import React from 'react';
export type CarouselEffect = 'slide' | 'fade' | 'zoom' | 'flip';
export type CarouselIndicatorType = 'dots' | 'bars' | 'numbers' | 'thumbnails' | 'none';
export type CarouselControlsType = 'arrows' | 'sides' | 'none';
export interface CarouselSlide {
    /**
     * Unique identifier for the slide
     */
    id: string | number;
    /**
     * Content to display in the slide (image, component, etc.)
     */
    content: React.ReactNode;
    /**
     * Caption to display with the slide
     */
    caption?: React.ReactNode;
    /**
     * Thumbnail image URL for the slide (for thumbnail indicators)
     */
    thumbnail?: string;
}
export interface CarouselProps extends React.HTMLAttributes<HTMLDivElement> {
    /**
     * Array of slides to display
     */
    slides: CarouselSlide[];
    /**
     * Index of the initial slide to display
     * @default 0
     */
    initialSlide?: number;
    /**
     * Whether to auto-advance slides
     * @default false
     */
    autoPlay?: boolean;
    /**
     * Interval in milliseconds between auto-advancing slides
     * @default 5000
     */
    interval?: number;
    /**
     * Whether to pause auto-advance on hover
     * @default true
     */
    pauseOnHover?: boolean;
    /**
     * Whether to loop back to the first slide after the last
     * @default true
     */
    infinite?: boolean;
    /**
     * Type of transition effect
     * @default 'slide'
     */
    effect?: CarouselEffect;
    /**
     * Type of indicators to display
     * @default 'dots'
     */
    indicators?: CarouselIndicatorType;
    /**
     * Type of navigation controls to display
     * @default 'arrows'
     */
    controls?: CarouselControlsType;
    /**
     * Whether to show slide captions
     * @default true
     */
    showCaptions?: boolean;
    /**
     * Duration of transition effect in milliseconds
     * @default 300
     */
    transitionDuration?: number;
    /**
     * Whether to use swipe gestures on touch devices
     * @default true
     */
    swipeable?: boolean;
    /**
     * Callback fired when the active slide changes
     */
    onChange?: (index: number) => void;
    /**
     * Whether the carousel fills the container width
     * @default true
     */
    fullWidth?: boolean;
    /**
     * Aspect ratio for the carousel (e.g., '16:9', '4:3', '1:1')
     */
    aspectRatio?: string;
    /**
     * Custom className for slide container
     */
    slideClassName?: string;
    /**
     * Custom className for indicators
     */
    indicatorsClassName?: string;
    /**
     * Custom className for navigation controls
     */
    controlsClassName?: string;
    /**
     * Custom className for captions
     */
    captionClassName?: string;
}
/**
 * Carousel component built with Tailwind CSS
 *
 * A feature-rich carousel/slideshow with various transition effects,
 * navigation controls, and indicator types.
 *
 * @example
 * // Basic usage
 * <TailwindCarousel
 *   slides={[
 *     { id: 1, content: <img src="/image1.jpg" alt="Slide 1" />, caption: "Caption 1" },
 *     { id: 2, content: <img src="/image2.jpg" alt="Slide 2" />, caption: "Caption 2" },
 *     { id: 3, content: <img src="/image3.jpg" alt="Slide 3" />, caption: "Caption 3" },
 *   ]}
 * />
 *
 * @example
 * // With custom options
 * <TailwindCarousel
 *   slides={slides}
 *   autoPlay={true}
 *   interval={3000}
 *   effect="fade"
 *   indicators="thumbnails"
 *   controls="sides"
 *   aspectRatio="16:9"
 * />
 */
export declare const TailwindCarousel: React.ForwardRefExoticComponent<CarouselProps & React.RefAttributes<HTMLDivElement>>;
export default TailwindCarousel;
//# sourceMappingURL=TailwindCarousel.d.ts.map