import { type ReactNode } from "react";
import { type Insets } from "react-native";
import { type ColorTokens, type ViewStyle, type TextStyle, type LayoutStyle } from "../../style/index.js";
export interface CarouselSkin {
    /** iOS/web dim the arrow/dot on press; Android uses a ripple instead (null). */
    pressedOpacity: number | null;
    /** Android arrow/dot ripple; null on iOS/web. */
    ripple: ((t: ColorTokens) => {
        color: string;
        borderless: boolean;
    }) | null;
    /**
     * Whether the prev/next arrows show when the `showArrows` prop is
     * unset. Platform-adaptive: on for the web and iOS (the hand-off's carousel), OFF
     * for Android (M3 carousel anatomy is container + items only, snap-scroll
     * navigation, no arrows). The
     * `showArrows` prop still opts them back in for pointer/iPad contexts.
     */
    defaultShowArrows: boolean;
    /**
     * Whether the dot indicator strip shows when the `showDots` prop is unset.
     * Platform-adaptive: on for web + iOS (the hand-off's dots), OFF for Android
     * (M3 defines no position/dot indicator). The `showDots` prop opts them in.
     */
    defaultShowDots: boolean;
    /**
     * hitSlop padding each arrow's touch target out to the platform minimum
     * (>= 44pt iOS / >= 48dp Android). hitSlop never affects layout, so the visual
     * arrow size stays. Undefined on web (no touch-target minimum for a pointer).
     */
    arrowHitSlop?: number | Insets;
    /** The slide wrapper shape (corner radius; the content clips to it). */
    slide: (t: ColorTokens) => ViewStyle;
    /** The inset around a plain-string slide's text, in px. A ReactNode slide fills the
     *  slide inside its edge (a picture is masked to its shape), so it brings its own. */
    slidePadding: number;
    /** The circular arrow button shape (size, radius, fill, border, shadow). */
    arrow: (t: ColorTokens) => ViewStyle;
    /** The chevron glyph size inside an arrow button, in px. */
    arrowIconSize: number;
    /**
     * Space between the carousel's outer edge and each arrow, in px. At least the
     * arrow's horizontal hitSlop, so the touch area stays inside the carousel's own
     * bounds: a clipping ancestor it fills (a full-width ScrollView) would cut it.
     */
    arrowInset: number;
    /**
     * Space between each arrow and the slides, in px. At least the arrow's horizontal
     * hitSlop, so the arrow's touch area never reaches over a slide.
     */
    arrowGap: number;
    /** The dot strip layout (the centered Row below the slides). */
    dotsRow: (t: ColorTokens) => ViewStyle;
    /** Real picker bounds. Omit to use the platform minimum. */
    dotTarget?: ViewStyle;
    /** One indicator dot; `active` widens/tints it to the brand `primary`. */
    dot: (t: ColorTokens, active: boolean) => ViewStyle;
    /** The default slide-content text type (when a slide is a plain string). */
    slideText: (t: ColorTokens) => TextStyle;
}
export interface CarouselItem {
    /** Stable identity for the slide. */
    key: string;
    /** The slide body. A string renders in the skin's slide-text type; a
     *  ReactNode renders as-is. */
    content: ReactNode;
}
export interface CarouselProps {
    /** The slides, left to right. */
    items: CarouselItem[];
    /** Controlled current slide. Pair with `onIndexChange`. Omit for uncontrolled. */
    index?: number;
    /** Initial current slide for the uncontrolled case (read once; default 0). */
    defaultIndex?: number;
    /** Called with the next current index whenever the slide changes. */
    onIndexChange?: (index: number) => void;
    /** Wrap from the last slide to the first (and first to last) on arrow nav. */
    loop?: boolean;
    /**
     * Show the prev/next chevron buttons beside the slides. Default is platform-adaptive:
     * <!-- only: web -->
     * on for web, off for iOS + Android (swipe idioms);
     * <!-- /only -->
     * <!-- only: ios android -->
     * on for web, off in the app (a swipe idiom);
     * <!-- /only -->
     * pass `true` to opt in.
     */
    showArrows?: boolean;
    /**
     * Show the centered dot indicators below the slides. Default is
     * <!-- only: web -->
     * platform-adaptive: on for web + iOS (UIPageControl), off for Android M3.
     * <!-- /only -->
     * <!-- only: ios -->
     * platform-adaptive: on for web + iOS (UIPageControl).
     * <!-- /only -->
     * <!-- only: android -->
     * platform-adaptive: on for web, off for Android.
     * <!-- /only -->
     */
    showDots?: boolean;
    /** E2E hook forwarded to the root element. */
    testID?: string;
    /** Composition within a parent only, never a restyle hook and never a width: the parent layout container provides the bounds. */
    style?: LayoutStyle;
}
/** Build a Carousel component from a platform skin. */
export declare function createCarousel(skin: CarouselSkin): (props: CarouselProps) => import("react").JSX.Element;
//# sourceMappingURL=carousel.shared.d.ts.map