import React from 'react';
import type { SharedAccessibilityProps, SharedProps } from '@coinbase/cds-common/types';
import { type BoxBaseProps, type BoxDefaultElement, type BoxProps } from '../layout/Box';
import {
  CarouselAutoplayContext,
  type CarouselAutoplayContextValue,
  CarouselContext,
  type CarouselContextValue,
  useCarouselAutoplayContext,
  useCarouselContext,
} from './CarouselContext';
export type CarouselItemRenderChildren = React.FC<{
  isVisible: boolean;
}>;
export type CarouselItemBaseProps = Omit<BoxBaseProps, 'children'> & {
  /**
   * Unique identifier for this carousel item.
   */
  id: string;
  /**
   * Component to render as the carousel item content.
   * Can be a React node or a function that receives the visibility state.
   */
  children?: CarouselItemRenderChildren | React.ReactNode;
  /**
   * @internal Used by Carousel to mark clone items for looping.
   * Clone items are non-interactive and excluded from tab order.
   */
  isClone?: boolean;
};
export type CarouselItemProps = Omit<BoxProps<BoxDefaultElement>, 'children'> &
  CarouselItemBaseProps;
export type CarouselItemComponent = React.FC<CarouselItemProps>;
export type CarouselItemElement = React.ReactElement<CarouselItemProps, CarouselItemComponent>;
export { CarouselAutoplayContext, CarouselContext, useCarouselAutoplayContext, useCarouselContext };
export type { CarouselAutoplayContextValue, CarouselContextValue };
export type CarouselNavigationComponentBaseProps = Pick<
  CarouselBaseProps,
  | 'autoplay'
  | 'nextPageAccessibilityLabel'
  | 'previousPageAccessibilityLabel'
  | 'startAutoplayAccessibilityLabel'
  | 'stopAutoplayAccessibilityLabel'
> & {
  /**
   * Callback for when the previous button is pressed.
   */
  onGoPrevious?: () => void;
  /**
   * Callback for when the next button is pressed.
   */
  onGoNext?: () => void;
  /**
   * Whether the previous button is disabled.
   */
  disableGoPrevious?: boolean;
  /**
   * Whether the next button is disabled.
   */
  disableGoNext?: boolean;
  /**
   * Whether autoplay is currently stopped.
   */
  isAutoplayStopped?: boolean;
  /**
   * Callback fired when the autoplay button is clicked.
   */
  onToggleAutoplay?: () => void;
};
export type CarouselNavigationComponentProps = CarouselNavigationComponentBaseProps & {
  /**
   * Custom class name for the component.
   */
  className?: string;
  /**
   * Custom styles for the component.
   */
  style?: React.CSSProperties;
};
export type CarouselNavigationComponent = React.FC<CarouselNavigationComponentProps>;
export type CarouselPaginationComponentBaseProps = {
  /**
   * Total number of pages.
   */
  totalPages: number;
  /**
   * Index of the active page.
   */
  activePageIndex: number;
  /**
   * Callback for when a page is clicked.
   */
  onClickPage?: (index: number) => void;
  /**
   * Accessibility label for the go to page button. You can optionally pass a function that will receive the pageIndex as an argument, and return an accessibility label string.
   */
  paginationAccessibilityLabel?: string | ((pageIndex: number) => string);
  /**
   * Visual variant for the pagination indicators.
   * - 'pill': All indicators are pill-shaped (default)
   * - 'dot': Inactive indicators are small dots, active indicator expands to a pill
   * @default 'pill'
   * @note 'pill' variant is deprecated, use 'dot' instead
   */
  variant?: 'pill' | 'dot';
};
export type CarouselPaginationComponentProps = CarouselPaginationComponentBaseProps & {
  /**
   * Custom class name for the root element.
   */
  className?: string;
  /**
   * Custom styles for the component.
   */
  style?: React.CSSProperties;
};
export type CarouselPaginationComponent = React.FC<CarouselPaginationComponentProps>;
export type CarouselImperativeHandle = {
  /**
   * The currently active page index.
   */
  activePageIndex: number;
  /**
   * The total number of pages.
   */
  totalPages: number;
  /**
   * Navigate to a specific page by index.
   */
  goToPage: (pageIndex: number) => void;
};
export type CarouselBaseProps = SharedProps &
  SharedAccessibilityProps &
  BoxBaseProps & {
    /**
     * Children are required to be CarouselItems because we calculate
     * their offset relative to the parent container.
     */
    children?: CarouselItemElement | CarouselItemElement[];
    /**
     * Defines the drag interaction behavior for the carousel.
     * 'none' disables dragging completely.
     * 'free' enables free-form dragging with natural deceleration when released.
     * 'snap' enables dragging with automatic snapping to targets when released,
     * defined by snapMode.
     * @default 'snap'
     */
    drag?: 'none' | 'free' | 'snap';
    /**
     * Specifies the pagination and navigation strategy for the carousel.
     * 'item' treats each item as a separate page for navigation, pagination, and snapping.
     * 'page' groups items into pages based on visible area for navigation, pagination, and snapping.
     * This affects page calculation, navigation button behavior, and snap targets when dragging.
     * @default 'page'
     */
    snapMode?: 'item' | 'page';
    /**
     * Hides the navigation arrows (previous/next buttons and autoplay control).
     *
     * @note If you hide navigation with autoplay, you must provide
     * an alternative mechanism for users to pause the carousel.
     */
    hideNavigation?: boolean;
    /**
     * Hides the pagination indicators (dots/bars showing current page).
     */
    hidePagination?: boolean;
    /**
     * Custom component to render navigation arrows.
     * @default DefaultCarouselNavigation
     */
    NavigationComponent?: CarouselNavigationComponent;
    /**
     * Custom component to render pagination indicators.
     * @default DefaultCarouselPagination
     */
    PaginationComponent?: CarouselPaginationComponent;
    /**
     * Title to display above the carousel.
     * When a string is provided, it will be rendered with default title styling.
     * When a React element is provided, it completely replaces the default title component
     * and styling.
     */
    title?: React.ReactNode;
    /**
     * Accessibility label for the next page button.
     * @default 'Next page'
     */
    nextPageAccessibilityLabel?: string;
    /**
     * Accessibility label for the previous page button.
     * @default 'Previous page'
     */
    previousPageAccessibilityLabel?: string;
    /**
     * Accessibility label for the go to page button.
     * When a string is provided, it is used as-is for all indicators.
     * When a function is provided, it receives the page index and returns a label.
     * @default `Go to page X`
     */
    paginationAccessibilityLabel?: string | ((pageIndex: number) => string);
    /**
     * Accessibility label for starting autoplay.
     * @default 'Play Carousel'
     */
    startAutoplayAccessibilityLabel?: string;
    /**
     * Accessibility label for stopping autoplay.
     * @default 'Pause Carousel'
     */
    stopAutoplayAccessibilityLabel?: string;
    /**
     * Accessibility label announced by screen readers when the page changes.
     * Receives the current page index (0-based) and total pages.
     * @default `Page X of Y`
     */
    pageChangeAccessibilityLabel?: (activePageIndex: number, totalPages: number) => string;
    /**
     * Callback fired when the carousel page changes.
     */
    onChangePage?: (activePageIndex: number) => void;
    /**
     * Callback fired when the user starts dragging the carousel.
     */
    onDragStart?: () => void;
    /**
     * Callback fired when the user ends dragging the carousel.
     */
    onDragEnd?: () => void;
    /**
     * Enables infinite looping. When true, the carousel will seamlessly
     * loop from the last item back to the first.
     * @note Requires at least 2 pages worth of content to function.
     */
    loop?: boolean;
    /**
     * Whether autoplay is enabled for the carousel.
     */
    autoplay?: boolean;
    /**
     * The interval in milliseconds for autoplay.
     * @default 3000 (3 seconds)
     */
    autoplayInterval?: number;
    /**
     * Visual variant for the pagination indicators.
     * - 'pill': All indicators are pill-shaped (default)
     * - 'dot': Inactive indicators are small dots, active indicator expands to a pill
     * @default 'pill'
     * @note 'pill' variant is deprecated, use 'dot' instead
     */
    paginationVariant?: CarouselPaginationComponentBaseProps['variant'];
  };
export type CarouselProps = Omit<BoxProps<BoxDefaultElement>, 'title'> &
  CarouselBaseProps & {
    /**
     * Custom class name for the root element.
     */
    className?: string;
    /** Custom class names for individual elements of the Carousel component */
    classNames?: {
      /** Root element */
      root?: string;
      /** Title text element */
      title?: string;
      /** Navigation controls element */
      navigation?: string;
      /** Pagination indicators element */
      pagination?: string;
      /** Main carousel track element */
      carousel?: string;
      /** Outer carousel container element */
      carouselContainer?: string;
    };
    /** Custom styles for individual elements of the Carousel component */
    styles?: {
      /** Root element */
      root?: React.CSSProperties;
      /** Title text element */
      title?: React.CSSProperties;
      /** Navigation controls element */
      navigation?: React.CSSProperties;
      /** Pagination indicators element */
      pagination?: React.CSSProperties;
      /** Main carousel track element */
      carousel?: React.CSSProperties;
      /** Outer carousel container element */
      carouselContainer?: React.CSSProperties;
    };
  };
export declare const Carousel: React.MemoExoticComponent<
  React.ForwardRefExoticComponent<
    Omit<CarouselProps, 'ref'> & React.RefAttributes<CarouselImperativeHandle>
  >
>;
//# sourceMappingURL=Carousel.d.ts.map