import type React from 'react';
import type { CarouselDetail, CarouselSlide } from './types.js';
export interface CarouselRef extends HTMLElement {
    /** Advances to the next slide. */
    next(): void;
    /** Returns to the previous slide. */
    prev(): void;
    /** Navigates to the slide at the given index. */
    goTo(index: number): void;
}
/**
 * In React, reach the imperative methods through a ref:
 * `const api = useRef<CarouselRef>(null)`, pass `ref={api}`, then `api.current?.next()`.
 * Available: next(), prev(), goTo().
 *
 * @csspart base
 */
export interface CarouselOwnProps {
    /**
     * Unique identifier for the element.
     * @example 'example-id'
     */
    id?: string;
    /**
     * Visible label text.
     * @example 'Example label'
     */
    label?: string;
    /**
     * Visual style variant. Allowed values: `editorial`, `card`.
     * @example 'editorial'
     */
    variant?: 'editorial' | 'card';
    /**
     * Corner radius style. Allowed values: `sharp`, `rounded`.
     * @example 'sharp'
     */
    shape?: 'sharp' | 'rounded';
    /**
     * Component size. Allowed values: `xs`, `sm`, `md`, `lg`, `xl`.
     * @example 'xs'
     */
    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
    /**
     * Array of slide objects. Each has content HTML and optional alt text.
     * @example [{ title: 'Welcome', subtitle: 'Introduction' }]
     */
    slides?: CarouselSlide[];
    /**
     * Enables automatic slide advancement. Allowed values: `off`, `on`.
     * @example 'off'
     */
    autoplay?: 'off' | 'on';
    /**
     * Auto-play interval in milliseconds (default: 5000).
     * @defaultValue 0
     * @example 1
     */
    autoplayInterval?: number;
    /**
     * Whether the carousel wraps around: advancing past the last slide returns to the first.
     * @defaultValue true
     * @example true
     */
    loopMode?: boolean;
    /**
     * Enables a motion blur effect during slide transitions.
     * @defaultValue true
     * @example true
     */
    motionBlur?: boolean;
    /**
     * Enables a custom drag cursor during swipe gestures.
     * @defaultValue true
     * @example true
     */
    customCursor?: boolean;
    /**
     * Style of the slide position indicators (dots, lines, fraction). Allowed values: `dot`, `sharp`, `rounded`, `none`.
     * @example 'dot'
     */
    indicator?: 'dot' | 'sharp' | 'rounded' | 'none';
    /**
     * Fires when the committed component value or state changes. Detail: `CarouselDetail`.
     * @example (event) => console.log(event.detail.index)
     */
    onChange?: (event: CustomEvent<CarouselDetail>) => void;
    /** CSS class applied to the Custom Element host.
     * @example 'my-component'
     */
    className?: string;
    /** Inline styles applied to the Custom Element host.
     * @example { marginTop: 8 }
     */
    style?: React.CSSProperties;
}
/**
 * Props for `<Carousel>`: the component's own API plus every standard DOM
 * attribute and native React event handler, forwarded verbatim to the
 * `<cx-carousel>` host — `id`, `data-*`, `aria-*`, `title`, `tabIndex`,
 * `slot`, `onMouseEnter`, and the rest. Own props always win over a
 * same-named DOM attribute.
 */
export type CarouselProps = CarouselOwnProps & Omit<React.HTMLAttributes<HTMLElement>, keyof CarouselOwnProps | 'children' | 'dangerouslySetInnerHTML'>;
export declare const Carousel: React.ForwardRefExoticComponent<CarouselOwnProps & Omit<React.HTMLAttributes<HTMLElement>, "children" | "dangerouslySetInnerHTML" | keyof CarouselOwnProps> & React.RefAttributes<CarouselRef>>;