@payfit/unity-components/dist/esm/components/carousel/Carousel.d.ts

import { ReactNode } from 'react';
import { CarouselOptions } from './types.js';
export declare const carousel: import('tailwind-variants').TVReturnType<{} | {} | {}, undefined, "uy:relative uy:flex uy:flex-col uy:gap-200 uy:md:gap-300", {} | {}, undefined, import('tailwind-variants').TVReturnType<unknown, undefined, "uy:relative uy:flex uy:flex-col uy:gap-200 uy:md:gap-300", unknown, unknown, undefined>>;
export interface CarouselProps {
    options?: Pick<NonNullable<CarouselOptions>, 'align' | 'loop' | 'slidesToScroll' | 'containScroll' | 'inViewThreshold' | 'inViewMargin' | 'duration' | 'draggable' | 'dragFree' | 'dragThreshold'>;
    /**
     * Accessible label for the carousel region.
     * When provided, takes precedence over the title set in `CarouselHeader` for labeling.
     */
    'aria-label'?: string;
    /** Additional CSS classes for the root element. */
    className?: string;
    children: ReactNode;
}
/**
 * Root container of the Carousel. Manages shared state and provides context to all sub-components.
 * The Carousel component displays a series of slides in a horizontal, scrollable layout. It's built
 * on top of Embla Carousel and provides accessible navigation via keyboard, mouse, and touch.
 * ## Composition
 * Compose the Carousel with its child components:
 * - `CarouselHeader` – Optional header with title and action slot
 * - `CarouselContent` – Scrollable viewport that houses slides
 * - `CarouselSlide` – Individual slide wrapper
 * ## Features
 * - **Responsive**: Configure slides per page and spacing per breakpoint
 * - **Accessible**: Full keyboard navigation (Arrow keys, PageUp/PageDown, Home/End)
 * - **Touch-enabled**: Native swipe gestures on mobile
 * - **Flexible layout**: Control alignment, looping, and scroll behavior
 * - **Screen reader support**: ARIA labels and live region announcements
 * @example
 * ```tsx
 * import { Carousel, CarouselContent, CarouselHeader, CarouselSlide } from '@payfit/unity-components'
 *
 * <Carousel>
 *   <CarouselHeader title="Featured items" />
 *   <CarouselContent itemsPerPage={3} gap="$200">
 *     <CarouselSlide>Item 1</CarouselSlide>
 *     <CarouselSlide>Item 2</CarouselSlide>
 *     <CarouselSlide>Item 3</CarouselSlide>
 *   </CarouselContent>
 * </Carousel>
 * ```
 * @example
 * ```tsx
 * <Carousel>
 *   <CarouselHeader title="Responsive carousel" />
 *   <CarouselContent
 *     itemsPerPage={{ base: 1, md: 2, lg: 3 }}
 *     gap={{ base: '$100', md: '$200' }}
 *   >
 *     {slides.map((slide) => (
 *       <CarouselSlide key={slide.id}>{slide.content}</CarouselSlide>
 *     ))}
 *   </CarouselContent>
 * </Carousel>
 * ```
 * ## Accessibility
 * - Arrow keys navigate between individual slides
 * - PageUp/PageDown jump to the first slide of the next/previous page
 * - Home/End keys jump to the first/last slide
 * - Tab key exits the carousel to the next focusable element
 * - Screen readers announce the current slide and total count
 * @param {CarouselProps} props - Component props
 * @param {CarouselProps['options']} props.options - Embla Carousel configuration options
 * @param {CarouselProps['aria-label']} props.aria-label - Accessible label for the carousel region (overrides title from CarouselHeader)
 * @param {CarouselProps['className']} props.className - Additional CSS classes
 * @param {CarouselProps['children']} props.children - Carousel content (CarouselHeader, CarouselContent, CarouselSlide)
 * @see {@link CarouselProps} for all available props
 * @see {@link https://www.embla-carousel.com/api/options/|Embla Carousel Options}
 */
declare const Carousel: import('react').ForwardRefExoticComponent<CarouselProps & import('react').RefAttributes<HTMLDivElement>>;
export { Carousel };