import { Signal, TNode, Value } from '@tempots/dom';
import type { IconSize } from '../theme';
/** Transition effect for slide changes. */
export type CarouselTransition = 'slide' | 'fade';
/** Indicator style for showing slide position. */
export type CarouselIndicator = 'dots' | 'progress' | 'fraction' | 'none';
/** Slide alignment when slidesPerView shows more slots than remaining slides. */
export type CarouselAlignment = 'start' | 'center' | 'end';
/** Controller for programmatic carousel control, returned by {@link createCarousel}. */
export interface CarouselController {
    /** Navigate to a specific slide index. */
    goTo: (index: number) => void;
    /** Navigate to the next slide. */
    next: () => void;
    /** Navigate to the previous slide. */
    prev: () => void;
    /** Start auto-play. */
    play: () => void;
    /** Stop auto-play. */
    pause: () => void;
    /** Reactive signal indicating whether auto-play is active. */
    isPlaying: Signal<boolean>;
    /** Reactive signal of the current slide index. */
    currentIndex: Signal<number>;
    /** Total number of slides. */
    totalSlides: number;
}
/** Configuration options for the {@link Carousel} and {@link createCarousel} components. */
export type CarouselOptions = {
    /** Index of the currently active slide. @default 0 */
    currentIndex?: Value<number>;
    /** Enable auto-play rotation. @default false */
    autoPlay?: Value<boolean>;
    /** Auto-play interval in milliseconds. @default 3000 */
    interval?: Value<number>;
    /** Whether to loop infinitely. @default false */
    loop?: Value<boolean>;
    /** Number of slides visible at once. @default 1 */
    slidesPerView?: Value<number>;
    /** Transition effect. @default 'slide' */
    transition?: Value<CarouselTransition>;
    /** Transition duration in milliseconds. @default 300 */
    transitionDuration?: Value<number>;
    /** Show navigation arrows. @default true */
    showArrows?: Value<boolean>;
    /** Pause auto-play on hover. @default true */
    pauseOnHover?: Value<boolean>;
    /** Enable keyboard navigation. @default true */
    keyboard?: Value<boolean>;
    /** Accessible label for the carousel. @default 'Carousel' */
    ariaLabel?: Value<string>;
    /** Gap between slides (CSS units, e.g. '16px', '1rem'). @default '0px' */
    gap?: Value<string>;
    /** Amount of next/prev slide to peek (CSS units, e.g. '40px', '10%'). @default '0px' */
    peekAmount?: Value<string>;
    /** Slide alignment. @default 'start' */
    align?: Value<CarouselAlignment>;
    /** CSS timing function for transitions. @default 'cubic-bezier(0.2, 0, 0, 1)' */
    easing?: Value<string>;
    /** Indicator type. @default 'dots' */
    indicator?: Value<CarouselIndicator>;
    /** Pixel threshold for mouse drag navigation. @default 50 */
    dragThreshold?: Value<number>;
    /** Iconify icon name for the previous arrow. @default 'lucide:chevron-left' */
    prevIcon?: Value<string>;
    /** Iconify icon name for the next arrow. @default 'lucide:chevron-right' */
    nextIcon?: Value<string>;
    /** Size of the arrow icons. @default 'md' */
    arrowIconSize?: Value<IconSize>;
    /** Called when the active slide changes. */
    onSlideChange?: (index: number) => void;
    /** Called when auto-play state toggles. */
    onAutoPlayToggle?: (playing: boolean) => void;
};
/**
 * Creates a carousel with an imperative controller for programmatic control.
 *
 * @param options - Carousel configuration
 * @param children - Slide content elements (each child is one slide)
 * @returns A tuple of [TNode, CarouselController]
 *
 * @example
 * ```typescript
 * const [carousel, ctrl] = createCarousel(
 *   { autoPlay: true, loop: true },
 *   html.div('Slide 1'),
 *   html.div('Slide 2'),
 *   html.div('Slide 3')
 * )
 * // Later: ctrl.goTo(2), ctrl.play(), ctrl.pause()
 * ```
 */
export declare function createCarousel(options: CarouselOptions, ...children: TNode[]): [TNode, CarouselController];
/**
 * A fully-featured carousel component for cycling through slide content.
 *
 * Supports auto-play, touch/swipe, mouse drag, keyboard navigation, multiple
 * transition effects, and accessible ARIA attributes.
 *
 * For programmatic control, use {@link createCarousel} instead which returns
 * a controller alongside the component.
 *
 * @param options - Carousel configuration
 * @param children - Slide content elements (each child is one slide)
 * @returns A carousel container with navigation controls
 *
 * @example
 * ```typescript
 * Carousel(
 *   { autoPlay: true, loop: true },
 *   html.div('Slide 1'),
 *   html.div('Slide 2'),
 *   html.div('Slide 3')
 * )
 * ```
 */
export declare function Carousel(options: CarouselOptions, ...children: TNode[]): TNode;