import * as React from 'react';

/**
 * Button size configuration for CarouselPagination
 * Each size defines the button dimensions and corresponding icon size
 */
declare const BUTTON_SIZES: {
    readonly sm: {
        readonly buttonSize: "size-8";
        readonly iconSize: 16;
    };
    readonly md: {
        readonly buttonSize: "size-10";
        readonly iconSize: 20;
    };
    readonly lg: {
        readonly buttonSize: "size-12";
        readonly iconSize: 24;
    };
    readonly xl: {
        readonly buttonSize: "size-14";
        readonly iconSize: 28;
    };
};
type CarouselPaginationSize = keyof typeof BUTTON_SIZES;
interface CarouselPaginationProps {
    /**
     * Handler for scrolling to the previous item
     */
    onPrevious: () => void;
    /**
     * Handler for scrolling to the next item
     */
    onNext: () => void;
    /**
     * Whether the previous button should be disabled
     */
    canScrollPrevious?: boolean;
    /**
     * Whether the next button should be disabled
     */
    canScrollNext?: boolean;
    /**
     * Predefined button size - controls both button dimensions and icon size
     * @default "md"
     */
    size?: CarouselPaginationSize;
    /**
     * Responsive size - mobile size (optional, uses `size` if not provided)
     * Use this for different sizes on mobile vs desktop
     * @example size="lg" mobileSize="md" -> md on mobile, lg on desktop
     */
    mobileSize?: CarouselPaginationSize;
    /**
     * Custom icon size in pixels (overrides the size-based default)
     * @deprecated Use `size` prop instead for consistent sizing
     */
    iconSize?: number;
    /**
     * Additional CSS classes for the container
     */
    className?: string;
    /**
     * Additional CSS classes for the buttons
     * Note: Size-related classes (size-*, h-*, w-*) will be overridden by the `size` prop
     * to ensure perfect circles. Use `size` prop to control button dimensions.
     */
    buttonClassName?: string;
    /**
     * Icon name for the previous button
     * @default "lucide/arrow-left"
     */
    previousIcon?: string;
    /**
     * Icon name for the next button
     * @default "lucide/arrow-right"
     */
    nextIcon?: string;
    /**
     * Aria label for the previous button
     * @default "Previous"
     */
    previousAriaLabel?: string;
    /**
     * Aria label for the next button
     * @default "Next"
     */
    nextAriaLabel?: string;
}
/**
 * CarouselPagination - Reusable carousel navigation buttons based on AppleCarousel design.
 *
 * Features:
 * - **Perfect circles** - Uses aspect-square and explicit sizing to guarantee circular buttons
 * - **Consistent sizing** - Use the `size` prop for uniform appearance across devices
 * - **Responsive sizing** - Use `mobileSize` + `size` for different sizes on mobile/desktop
 * - **Disabled state** - Reduced opacity when at scroll boundaries
 * - **Flexible placement** - Container uses flexbox for easy positioning
 *
 * @example Basic usage
 * ```tsx
 * <CarouselPagination
 *   onPrevious={() => scroll("left")}
 *   onNext={() => scroll("right")}
 *   canScrollPrevious={!isAtStart}
 *   canScrollNext={!isAtEnd}
 * />
 * ```
 *
 * @example Responsive sizing (smaller on mobile, larger on desktop)
 * ```tsx
 * <CarouselPagination
 *   size="lg"
 *   mobileSize="md"
 *   onPrevious={scrollPrev}
 *   onNext={scrollNext}
 * />
 * ```
 *
 * @example Custom styling
 * ```tsx
 * <CarouselPagination
 *   size="xl"
 *   buttonClassName="bg-primary text-primary-foreground hover:bg-primary/90"
 *   onPrevious={scrollPrev}
 *   onNext={scrollNext}
 * />
 * ```
 */
declare function CarouselPagination({ onPrevious, onNext, canScrollPrevious, canScrollNext, size, mobileSize, iconSize: customIconSize, className, buttonClassName, previousIcon, nextIcon, previousAriaLabel, nextAriaLabel, }: CarouselPaginationProps): React.JSX.Element;

export { BUTTON_SIZES as CAROUSEL_PAGINATION_SIZES, CarouselPagination, type CarouselPaginationProps, type CarouselPaginationSize };
