@xaui/native 0.9.1-alpha.9 → 0.9.1-alpha.90

package/dist/components/carousel/carousel-indicator.d.ts

@@ -0,0 +1,42 @@
+import { View } from 'react-native';
+/**
+ * Where in the series the reader is.
+ *
+ * With no children it draws one dot per slide, which is what it is for. Children are the
+ * long form — a counter beside the dots, a subset, a shape of your own:
+ *
+ * ```tsx
+ * <Carousel.Indicator>
+ *   {photos.map((photo, index) => <Carousel.Dot key={photo.id} index={index} />)}
+ *   <Carousel.Counter />
+ * </Carousel.Indicator>
+ * ```
+ */
+export declare const CarouselIndicator: import("react").ForwardRefExoticComponent<import("react-native").ViewProps & Omit<import("../..").ViewStyleProps, keyof import("react-native").ViewProps> & {
+    children?: import("react").ReactNode;
+} & import("react").RefAttributes<View>>;
+/**
+ * One dot, which stretches into a pill as its slide comes into view.
+ *
+ * **The dot is the pill.** It grows in the row rather than being covered by a wider node
+ * over it: an overlay keeps the row's width fixed, so the pill spills over the dots either
+ * side and the reader sees a coloured lozenge with a grey dot half under it. Widening the
+ * dot itself means the row makes room, which is the shape this indicator actually is.
+ *
+ * **It follows the drag rather than the settle.** The width and the colour are interpolated
+ * from the live scroll offset on the UI thread, so the pill grows out of one dot and into
+ * the next while the finger is still down — which is what makes a reader believe the
+ * indicator is attached to the thing they are moving. Reading the settled index instead
+ * would make it jump once per gesture, after the fact.
+ *
+ * **A screen reader hears "3 of 5" rather than a label**, through `accessibilityValue`. A
+ * dot has no text of its own, and inventing one would be picking a language on behalf of
+ * every app that installs this.
+ */
+export declare const CarouselDot: import("react").ForwardRefExoticComponent<{
+    index: number;
+    children?: import("react").ReactNode;
+} & Omit<import("react-native").ViewProps, keyof {
+    index: number;
+    children?: import("react").ReactNode;
+}> & Omit<import("../..").ViewStyleProps, "pointerEvents" | "style" | "children" | "hitSlop" | "id" | "needsOffscreenAlphaCompositing" | "onLayout" | "removeClippedSubviews" | "testID" | "nativeID" | "collapsable" | "collapsableChildren" | "onBlur" | "onFocus" | "renderToHardwareTextureAndroid" | "focusable" | "tabIndex" | "shouldRasterizeIOS" | "isTVSelectable" | "hasTVPreferredFocus" | "tvParallaxShiftDistanceX" | "tvParallaxShiftDistanceY" | "tvParallaxTiltAngle" | "tvParallaxMagnification" | "onStartShouldSetResponder" | "onMoveShouldSetResponder" | "onResponderEnd" | "onResponderGrant" | "onResponderReject" | "onResponderMove" | "onResponderRelease" | "onResponderStart" | "onResponderTerminationRequest" | "onResponderTerminate" | "onStartShouldSetResponderCapture" | "onMoveShouldSetResponderCapture" | "onTouchStart" | "onTouchMove" | "onTouchEnd" | "onTouchCancel" | "onTouchEndCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerUp" | "onPointerUpCapture" | "accessible" | "accessibilityActions" | "accessibilityLabel" | "aria-label" | "accessibilityRole" | "accessibilityState" | "aria-busy" | "aria-checked" | "aria-disabled" | "aria-expanded" | "aria-selected" | "accessibilityHint" | "accessibilityValue" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "onAccessibilityAction" | "importantForAccessibility" | "aria-hidden" | "aria-modal" | "role" | "accessibilityLabelledBy" | "aria-labelledby" | "accessibilityLiveRegion" | "aria-live" | "screenReaderFocusable" | "accessibilityElementsHidden" | "accessibilityViewIsModal" | "onAccessibilityEscape" | "onAccessibilityTap" | "onMagicTap" | "accessibilityIgnoresInvertColors" | "accessibilityLanguage" | "accessibilityShowsLargeContentViewer" | "accessibilityLargeContentTitle" | "accessibilityRespondsToUserInteraction" | "index"> & import("react").RefAttributes<View>>;

package/dist/components/carousel/carousel-item.d.cts

@@ -0,0 +1,14 @@
+import { View } from 'react-native';
+/**
+ * One slide.
+ *
+ * Its **width is the track's**, divided by `itemsPerView` and less the gaps and the peeks —
+ * never a prop. A slide given a width in points is a slide that is wrong on the next screen
+ * size, and the arithmetic is in `carouselMetrics` where it can be read and tested.
+ *
+ * It clips, so an image drawn to its edges takes the slide's corner rather than overhanging
+ * it. Its height is whatever is inside it: a carousel is as tall as its content.
+ */
+export declare const CarouselItem: import("react").ForwardRefExoticComponent<import("react-native").ViewProps & Omit<import("../..").ViewStyleProps, keyof import("react-native").ViewProps> & {
+    children?: import("react").ReactNode;
+} & import("react").RefAttributes<View>>;

package/dist/components/carousel/carousel-item.d.ts

@@ -0,0 +1,14 @@
+import { View } from 'react-native';
+/**
+ * One slide.
+ *
+ * Its **width is the track's**, divided by `itemsPerView` and less the gaps and the peeks —
+ * never a prop. A slide given a width in points is a slide that is wrong on the next screen
+ * size, and the arithmetic is in `carouselMetrics` where it can be read and tested.
+ *
+ * It clips, so an image drawn to its edges takes the slide's corner rather than overhanging
+ * it. Its height is whatever is inside it: a carousel is as tall as its content.
+ */
+export declare const CarouselItem: import("react").ForwardRefExoticComponent<import("react-native").ViewProps & Omit<import("../..").ViewStyleProps, keyof import("react-native").ViewProps> & {
+    children?: import("react").ReactNode;
+} & import("react").RefAttributes<View>>;

package/dist/components/carousel/carousel-thumbnails.d.cts

@@ -0,0 +1,32 @@
+import { ScrollView, View } from 'react-native';
+/**
+ * A strip of small versions of the slides, under the carousel.
+ *
+ * It is an indicator that **shows what it points at**, which is the one thing dots cannot
+ * do: on a series of photographs a reader picks the one they want rather than counting
+ * across to it.
+ *
+ * It scrolls on its own, because a strip long enough to be worth having is longer than the
+ * screen. Unlike the track it does not snap: it is being read, not paged.
+ */
+export declare const CarouselThumbnails: import("react").ForwardRefExoticComponent<import("react-native").ViewProps & Omit<import("../..").ViewStyleProps, keyof import("react-native").ViewProps> & {
+    children?: import("react").ReactNode;
+} & import("react").RefAttributes<ScrollView>>;
+/**
+ * One thumbnail. Pressing it goes to its slide.
+ *
+ * The ring around the chosen one is **always drawn and only its colour moves**, so choosing
+ * a thumbnail does not resize it — a border that appears on selection nudges every
+ * thumbnail after it along the strip.
+ *
+ * Like `Carousel.Dot`, it says "3 of 12" through `accessibilityValue` rather than through a
+ * label this library would have to invent a language for. What is *in* it is yours, so an
+ * image with its own `accessibilityLabel` is how a thumbnail says what it shows.
+ */
+export declare const CarouselThumbnail: import("react").ForwardRefExoticComponent<{
+    index: number;
+    children?: import("react").ReactNode;
+} & Omit<import("react-native").ViewProps, keyof {
+    index: number;
+    children?: import("react").ReactNode;
+}> & Omit<import("../..").ViewStyleProps, "pointerEvents" | "style" | "children" | "hitSlop" | "id" | "needsOffscreenAlphaCompositing" | "onLayout" | "removeClippedSubviews" | "testID" | "nativeID" | "collapsable" | "collapsableChildren" | "onBlur" | "onFocus" | "renderToHardwareTextureAndroid" | "focusable" | "tabIndex" | "shouldRasterizeIOS" | "isTVSelectable" | "hasTVPreferredFocus" | "tvParallaxShiftDistanceX" | "tvParallaxShiftDistanceY" | "tvParallaxTiltAngle" | "tvParallaxMagnification" | "onStartShouldSetResponder" | "onMoveShouldSetResponder" | "onResponderEnd" | "onResponderGrant" | "onResponderReject" | "onResponderMove" | "onResponderRelease" | "onResponderStart" | "onResponderTerminationRequest" | "onResponderTerminate" | "onStartShouldSetResponderCapture" | "onMoveShouldSetResponderCapture" | "onTouchStart" | "onTouchMove" | "onTouchEnd" | "onTouchCancel" | "onTouchEndCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerUp" | "onPointerUpCapture" | "accessible" | "accessibilityActions" | "accessibilityLabel" | "aria-label" | "accessibilityRole" | "accessibilityState" | "aria-busy" | "aria-checked" | "aria-disabled" | "aria-expanded" | "aria-selected" | "accessibilityHint" | "accessibilityValue" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "onAccessibilityAction" | "importantForAccessibility" | "aria-hidden" | "aria-modal" | "role" | "accessibilityLabelledBy" | "aria-labelledby" | "accessibilityLiveRegion" | "aria-live" | "screenReaderFocusable" | "accessibilityElementsHidden" | "accessibilityViewIsModal" | "onAccessibilityEscape" | "onAccessibilityTap" | "onMagicTap" | "accessibilityIgnoresInvertColors" | "accessibilityLanguage" | "accessibilityShowsLargeContentViewer" | "accessibilityLargeContentTitle" | "accessibilityRespondsToUserInteraction" | "index"> & import("react").RefAttributes<View>>;

package/dist/components/carousel/carousel-thumbnails.d.ts

@@ -0,0 +1,32 @@
+import { ScrollView, View } from 'react-native';
+/**
+ * A strip of small versions of the slides, under the carousel.
+ *
+ * It is an indicator that **shows what it points at**, which is the one thing dots cannot
+ * do: on a series of photographs a reader picks the one they want rather than counting
+ * across to it.
+ *
+ * It scrolls on its own, because a strip long enough to be worth having is longer than the
+ * screen. Unlike the track it does not snap: it is being read, not paged.
+ */
+export declare const CarouselThumbnails: import("react").ForwardRefExoticComponent<import("react-native").ViewProps & Omit<import("../..").ViewStyleProps, keyof import("react-native").ViewProps> & {
+    children?: import("react").ReactNode;
+} & import("react").RefAttributes<ScrollView>>;
+/**
+ * One thumbnail. Pressing it goes to its slide.
+ *
+ * The ring around the chosen one is **always drawn and only its colour moves**, so choosing
+ * a thumbnail does not resize it — a border that appears on selection nudges every
+ * thumbnail after it along the strip.
+ *
+ * Like `Carousel.Dot`, it says "3 of 12" through `accessibilityValue` rather than through a
+ * label this library would have to invent a language for. What is *in* it is yours, so an
+ * image with its own `accessibilityLabel` is how a thumbnail says what it shows.
+ */
+export declare const CarouselThumbnail: import("react").ForwardRefExoticComponent<{
+    index: number;
+    children?: import("react").ReactNode;
+} & Omit<import("react-native").ViewProps, keyof {
+    index: number;
+    children?: import("react").ReactNode;
+}> & Omit<import("../..").ViewStyleProps, "pointerEvents" | "style" | "children" | "hitSlop" | "id" | "needsOffscreenAlphaCompositing" | "onLayout" | "removeClippedSubviews" | "testID" | "nativeID" | "collapsable" | "collapsableChildren" | "onBlur" | "onFocus" | "renderToHardwareTextureAndroid" | "focusable" | "tabIndex" | "shouldRasterizeIOS" | "isTVSelectable" | "hasTVPreferredFocus" | "tvParallaxShiftDistanceX" | "tvParallaxShiftDistanceY" | "tvParallaxTiltAngle" | "tvParallaxMagnification" | "onStartShouldSetResponder" | "onMoveShouldSetResponder" | "onResponderEnd" | "onResponderGrant" | "onResponderReject" | "onResponderMove" | "onResponderRelease" | "onResponderStart" | "onResponderTerminationRequest" | "onResponderTerminate" | "onStartShouldSetResponderCapture" | "onMoveShouldSetResponderCapture" | "onTouchStart" | "onTouchMove" | "onTouchEnd" | "onTouchCancel" | "onTouchEndCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerUp" | "onPointerUpCapture" | "accessible" | "accessibilityActions" | "accessibilityLabel" | "aria-label" | "accessibilityRole" | "accessibilityState" | "aria-busy" | "aria-checked" | "aria-disabled" | "aria-expanded" | "aria-selected" | "accessibilityHint" | "accessibilityValue" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "onAccessibilityAction" | "importantForAccessibility" | "aria-hidden" | "aria-modal" | "role" | "accessibilityLabelledBy" | "aria-labelledby" | "accessibilityLiveRegion" | "aria-live" | "screenReaderFocusable" | "accessibilityElementsHidden" | "accessibilityViewIsModal" | "onAccessibilityEscape" | "onAccessibilityTap" | "onMagicTap" | "accessibilityIgnoresInvertColors" | "accessibilityLanguage" | "accessibilityShowsLargeContentViewer" | "accessibilityLargeContentTitle" | "accessibilityRespondsToUserInteraction" | "index"> & import("react").RefAttributes<View>>;

package/dist/components/carousel/carousel.context.d.cts

@@ -0,0 +1,9 @@
+import type { CarouselContextValue } from './carousel.type';
+/**
+ * R10 — the resolved styles, the metrics and the live offset.
+ *
+ * A control of your own is written against this: the offset is a shared value, so an
+ * indicator that follows the drag frame by frame is `useAnimatedStyle` over it rather than
+ * state that re-renders the row seventy times a second.
+ */
+export declare const CarouselProvider: import("react").Provider<CarouselContextValue | null>, useCarousel: () => CarouselContextValue;

package/dist/components/carousel/carousel.context.d.ts

@@ -0,0 +1,9 @@
+import type { CarouselContextValue } from './carousel.type';
+/**
+ * R10 — the resolved styles, the metrics and the live offset.
+ *
+ * A control of your own is written against this: the offset is a shared value, so an
+ * indicator that follows the drag frame by frame is `useAnimatedStyle` over it rather than
+ * state that re-renders the row seventy times a second.
+ */
+export declare const CarouselProvider: import("react").Provider<CarouselContextValue | null>, useCarousel: () => CarouselContextValue;

package/dist/components/carousel/carousel.d.cts

@@ -0,0 +1,35 @@
+import { View } from 'react-native';
+import type { ViewStyle } from 'react-native';
+export declare const CarouselRoot: import("react").ForwardRefExoticComponent<{
+    size?: import("./carousel.type").CarouselSize;
+    variant?: import("./carousel.type").CarouselVariant;
+    color?: string;
+    radius?: import("../..").RadiusKey;
+    index?: number;
+    defaultIndex?: number;
+    onIndexChange?: (index: number) => void;
+    itemsPerView?: number;
+    peek?: number;
+    gap?: number;
+    hasLoop?: boolean;
+    autoPlayInterval?: number;
+    isDisabled?: boolean;
+    style?: import("react-native").StyleProp<ViewStyle>;
+    children?: import("react").ReactNode;
+} & import("../..").AsChildProps & Omit<import("react-native").ViewProps, keyof {
+    size?: import("./carousel.type").CarouselSize;
+    variant?: import("./carousel.type").CarouselVariant;
+    color?: string;
+    radius?: import("../..").RadiusKey;
+    index?: number;
+    defaultIndex?: number;
+    onIndexChange?: (index: number) => void;
+    itemsPerView?: number;
+    peek?: number;
+    gap?: number;
+    hasLoop?: boolean;
+    autoPlayInterval?: number;
+    isDisabled?: boolean;
+    style?: import("react-native").StyleProp<ViewStyle>;
+    children?: import("react").ReactNode;
+}> & Omit<import("../..").ViewStyleProps, "gap" | "color" | "pointerEvents" | "style" | "children" | "hitSlop" | "id" | "needsOffscreenAlphaCompositing" | "onLayout" | "removeClippedSubviews" | "testID" | "nativeID" | "collapsable" | "collapsableChildren" | "onBlur" | "onFocus" | "renderToHardwareTextureAndroid" | "focusable" | "tabIndex" | "shouldRasterizeIOS" | "isTVSelectable" | "hasTVPreferredFocus" | "tvParallaxShiftDistanceX" | "tvParallaxShiftDistanceY" | "tvParallaxTiltAngle" | "tvParallaxMagnification" | "onStartShouldSetResponder" | "onMoveShouldSetResponder" | "onResponderEnd" | "onResponderGrant" | "onResponderReject" | "onResponderMove" | "onResponderRelease" | "onResponderStart" | "onResponderTerminationRequest" | "onResponderTerminate" | "onStartShouldSetResponderCapture" | "onMoveShouldSetResponderCapture" | "onTouchStart" | "onTouchMove" | "onTouchEnd" | "onTouchCancel" | "onTouchEndCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerUp" | "onPointerUpCapture" | "accessible" | "accessibilityActions" | "accessibilityLabel" | "aria-label" | "accessibilityRole" | "accessibilityState" | "aria-busy" | "aria-checked" | "aria-disabled" | "aria-expanded" | "aria-selected" | "accessibilityHint" | "accessibilityValue" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "onAccessibilityAction" | "importantForAccessibility" | "aria-hidden" | "aria-modal" | "role" | "accessibilityLabelledBy" | "aria-labelledby" | "accessibilityLiveRegion" | "aria-live" | "screenReaderFocusable" | "accessibilityElementsHidden" | "accessibilityViewIsModal" | "onAccessibilityEscape" | "onAccessibilityTap" | "onMagicTap" | "accessibilityIgnoresInvertColors" | "accessibilityLanguage" | "accessibilityShowsLargeContentViewer" | "accessibilityLargeContentTitle" | "accessibilityRespondsToUserInteraction" | "isDisabled" | "radius" | "size" | "variant" | "index" | "itemsPerView" | "peek" | "defaultIndex" | "onIndexChange" | "hasLoop" | "autoPlayInterval"> & import("react").RefAttributes<View>>;

package/dist/components/carousel/carousel.d.ts

@@ -0,0 +1,35 @@
+import { View } from 'react-native';
+import type { ViewStyle } from 'react-native';
+export declare const CarouselRoot: import("react").ForwardRefExoticComponent<{
+    size?: import("./carousel.type").CarouselSize;
+    variant?: import("./carousel.type").CarouselVariant;
+    color?: string;
+    radius?: import("../..").RadiusKey;
+    index?: number;
+    defaultIndex?: number;
+    onIndexChange?: (index: number) => void;
+    itemsPerView?: number;
+    peek?: number;
+    gap?: number;
+    hasLoop?: boolean;
+    autoPlayInterval?: number;
+    isDisabled?: boolean;
+    style?: import("react-native").StyleProp<ViewStyle>;
+    children?: import("react").ReactNode;
+} & import("../..").AsChildProps & Omit<import("react-native").ViewProps, keyof {
+    size?: import("./carousel.type").CarouselSize;
+    variant?: import("./carousel.type").CarouselVariant;
+    color?: string;
+    radius?: import("../..").RadiusKey;
+    index?: number;
+    defaultIndex?: number;
+    onIndexChange?: (index: number) => void;
+    itemsPerView?: number;
+    peek?: number;
+    gap?: number;
+    hasLoop?: boolean;
+    autoPlayInterval?: number;
+    isDisabled?: boolean;
+    style?: import("react-native").StyleProp<ViewStyle>;
+    children?: import("react").ReactNode;
+}> & Omit<import("../..").ViewStyleProps, "gap" | "color" | "pointerEvents" | "style" | "children" | "hitSlop" | "id" | "needsOffscreenAlphaCompositing" | "onLayout" | "removeClippedSubviews" | "testID" | "nativeID" | "collapsable" | "collapsableChildren" | "onBlur" | "onFocus" | "renderToHardwareTextureAndroid" | "focusable" | "tabIndex" | "shouldRasterizeIOS" | "isTVSelectable" | "hasTVPreferredFocus" | "tvParallaxShiftDistanceX" | "tvParallaxShiftDistanceY" | "tvParallaxTiltAngle" | "tvParallaxMagnification" | "onStartShouldSetResponder" | "onMoveShouldSetResponder" | "onResponderEnd" | "onResponderGrant" | "onResponderReject" | "onResponderMove" | "onResponderRelease" | "onResponderStart" | "onResponderTerminationRequest" | "onResponderTerminate" | "onStartShouldSetResponderCapture" | "onMoveShouldSetResponderCapture" | "onTouchStart" | "onTouchMove" | "onTouchEnd" | "onTouchCancel" | "onTouchEndCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerUp" | "onPointerUpCapture" | "accessible" | "accessibilityActions" | "accessibilityLabel" | "aria-label" | "accessibilityRole" | "accessibilityState" | "aria-busy" | "aria-checked" | "aria-disabled" | "aria-expanded" | "aria-selected" | "accessibilityHint" | "accessibilityValue" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "onAccessibilityAction" | "importantForAccessibility" | "aria-hidden" | "aria-modal" | "role" | "accessibilityLabelledBy" | "aria-labelledby" | "accessibilityLiveRegion" | "aria-live" | "screenReaderFocusable" | "accessibilityElementsHidden" | "accessibilityViewIsModal" | "onAccessibilityEscape" | "onAccessibilityTap" | "onMagicTap" | "accessibilityIgnoresInvertColors" | "accessibilityLanguage" | "accessibilityShowsLargeContentViewer" | "accessibilityLargeContentTitle" | "accessibilityRespondsToUserInteraction" | "isDisabled" | "radius" | "size" | "variant" | "index" | "itemsPerView" | "peek" | "defaultIndex" | "onIndexChange" | "hasLoop" | "autoPlayInterval"> & import("react").RefAttributes<View>>;

package/dist/components/carousel/carousel.recipe.d.cts

@@ -0,0 +1,26 @@
+import type { SlotStyles } from '../../system/recipe';
+import type { XAUITheme } from '../../theme/theme.type';
+import type { CarouselSize, CarouselSlot, CarouselVariant } from './carousel.type';
+/** The gap the size implies, in points — the default for the root's `gap` prop. */
+export declare function carouselGap(theme: XAUITheme, size: CarouselSize): number;
+/**
+ * Where an arrow sits: its own diameter, and how far in from the track's edge.
+ *
+ * Read here rather than resolved as a style because both numbers are **arithmetic at the
+ * call site** — an arrow is centred on the track's measured height, and only the component
+ * that knows that height can subtract half of a button from it.
+ */
+export declare function carouselControlBox(theme: XAUITheme, size: CarouselSize): {
+    size: number;
+    inset: number;
+};
+export declare const carouselRecipe: import("../..").Recipe<"content" | "root" | "dot" | "indicator" | "item" | "control" | "chevron" | "dotActive" | "counter" | "thumbnails" | "thumbnail" | "thumbnailActive" | "controlInactive", CarouselVariant, {
+    readonly size: {
+        readonly xs: (theme: XAUITheme) => SlotStyles<CarouselSlot>;
+        readonly sm: (theme: XAUITheme) => SlotStyles<CarouselSlot>;
+        readonly md: (theme: XAUITheme) => SlotStyles<CarouselSlot>;
+        readonly lg: (theme: XAUITheme) => SlotStyles<CarouselSlot>;
+    };
+    /** The slides' corner, and the thumbnails'. The arrows stay round. */
+    readonly radius: Record<import("../..").RadiusKey, import("../..").StyleFn<"item" | "thumbnail" | "thumbnailActive">>;
+}>;

package/dist/components/carousel/carousel.recipe.d.ts

@@ -0,0 +1,26 @@
+import type { SlotStyles } from '../../system/recipe';
+import type { XAUITheme } from '../../theme/theme.type';
+import type { CarouselSize, CarouselSlot, CarouselVariant } from './carousel.type';
+/** The gap the size implies, in points — the default for the root's `gap` prop. */
+export declare function carouselGap(theme: XAUITheme, size: CarouselSize): number;
+/**
+ * Where an arrow sits: its own diameter, and how far in from the track's edge.
+ *
+ * Read here rather than resolved as a style because both numbers are **arithmetic at the
+ * call site** — an arrow is centred on the track's measured height, and only the component
+ * that knows that height can subtract half of a button from it.
+ */
+export declare function carouselControlBox(theme: XAUITheme, size: CarouselSize): {
+    size: number;
+    inset: number;
+};
+export declare const carouselRecipe: import("../..").Recipe<"content" | "root" | "dot" | "indicator" | "item" | "control" | "chevron" | "dotActive" | "counter" | "thumbnails" | "thumbnail" | "thumbnailActive" | "controlInactive", CarouselVariant, {
+    readonly size: {
+        readonly xs: (theme: XAUITheme) => SlotStyles<CarouselSlot>;
+        readonly sm: (theme: XAUITheme) => SlotStyles<CarouselSlot>;
+        readonly md: (theme: XAUITheme) => SlotStyles<CarouselSlot>;
+        readonly lg: (theme: XAUITheme) => SlotStyles<CarouselSlot>;
+    };
+    /** The slides' corner, and the thumbnails'. The arrows stay round. */
+    readonly radius: Record<import("../..").RadiusKey, import("../..").StyleFn<"item" | "thumbnail" | "thumbnailActive">>;
+}>;

package/dist/components/carousel/carousel.style.d.cts

@@ -0,0 +1,18 @@
+export declare const carouselSheet: {
+    /** Towards the end of the series — pointing right in a left-to-right layout. */
+    chevronForward: {
+        borderStartWidth: number;
+        borderBottomWidth: number;
+        transform: {
+            rotate: string;
+        }[];
+    };
+    /** And back the other way. */
+    chevronBack: {
+        borderEndWidth: number;
+        borderTopWidth: number;
+        transform: {
+            rotate: string;
+        }[];
+    };
+};

package/dist/components/carousel/carousel.style.d.ts

@@ -0,0 +1,18 @@
+export declare const carouselSheet: {
+    /** Towards the end of the series — pointing right in a left-to-right layout. */
+    chevronForward: {
+        borderStartWidth: number;
+        borderBottomWidth: number;
+        transform: {
+            rotate: string;
+        }[];
+    };
+    /** And back the other way. */
+    chevronBack: {
+        borderEndWidth: number;
+        borderTopWidth: number;
+        transform: {
+            rotate: string;
+        }[];
+    };
+};

package/dist/components/carousel/carousel.type.d.cts

@@ -0,0 +1,160 @@
+import type { ReactNode } from 'react';
+import type { PressableStateCallbackType, StyleProp, TextProps, TextStyle, ViewProps, ViewStyle } from 'react-native';
+import type Animated from 'react-native-reanimated';
+import type { AnimatedRef, SharedValue } from 'react-native-reanimated';
+import type { PressableFeedbackProps } from '../../system/pressable-feedback';
+import type { AsChildProps } from '../../system/slot';
+import type { TextStyleProps, ViewStyleProps } from '../../system/style-props';
+import type { RadiusKey, Size } from '../../theme/theme.type';
+import type { CarouselMetrics } from '../../utils/carousel';
+export type CarouselSlot = 'root' | 'content' | 'item' | 'control' | 'chevron' | 'indicator' | 'dot' | 'dotActive' | 'counter' | 'thumbnails' | 'thumbnail' | 'thumbnailActive';
+/**
+ * The four emphases, narrowed as `Card` and `Surface` narrow them: a carousel reports
+ * nothing — it is a way of arranging what does — so `success` or `danger` would be an
+ * intent nothing here has.
+ *
+ * The variant paints the **controls**: the arrows, the dots and the counter. The slides are
+ * the caller's own content and this never touches them.
+ */
+export type CarouselVariant = 'primary' | 'secondary' | 'tertiary' | 'ghost';
+export type CarouselSize = Size;
+type CarouselOwnProps = {
+    /** The arrows' and the dots' size, the gap between slides, the controls' corner. */
+    size?: CarouselSize;
+    variant?: CarouselVariant;
+    /** A raw value (R7) for the controls. The slides are yours and it never reaches them. */
+    color?: string;
+    /** The slides' corner. */
+    radius?: RadiusKey;
+    /** Which slide is shown. Present means controlled. */
+    index?: number;
+    /** Where it starts when uncontrolled. */
+    defaultIndex?: number;
+    onIndexChange?: (index: number) => void;
+    /**
+     * How many whole slides are in view at once.
+     *
+     * @default 1
+     */
+    itemsPerView?: number;
+    /**
+     * How much of the neighbouring slide shows at each edge, in points.
+     *
+     * Zero — the default — is a carousel whose slides fill the track. Anything above it is
+     * the promise that there is more to the side, which is worth more than the pixels it
+     * costs on a series nobody would otherwise scroll.
+     */
+    peek?: number;
+    /** Between two slides, in points. Defaults to what `size` says. */
+    gap?: number;
+    /** Whether the arrows wrap round the ends rather than stopping at them. */
+    hasLoop?: boolean;
+    /**
+     * Advance on its own every this many milliseconds. Unset is off.
+     *
+     * **It stops at the first interaction and does not come back.** A carousel that resumes
+     * moving under a reader who has taken hold of it is a carousel fighting them.
+     */
+    autoPlayInterval?: number;
+    isDisabled?: boolean;
+    style?: StyleProp<ViewStyle>;
+    children?: ReactNode;
+};
+/** R14 — the carousel's own props, `View`'s, and every `ViewStyle` key neither claims. */
+export type CarouselProps = CarouselOwnProps & AsChildProps & Omit<ViewProps, keyof CarouselOwnProps> & Omit<ViewStyleProps, keyof CarouselOwnProps | keyof ViewProps>;
+/** `View`'s own props win over the `ViewStyle` keys of the same name (R14). */
+export type CarouselViewSlotProps = ViewProps & Omit<ViewStyleProps, keyof ViewProps> & {
+    children?: ReactNode;
+};
+/** `Text`'s own props win over the `TextStyle` keys of the same name (R14). */
+export type CarouselTextSlotProps = TextProps & Omit<TextStyleProps, keyof TextProps> & {
+    children?: ReactNode;
+};
+type CarouselControlOwnProps = {
+    /** An arrow of your own — an icon, a word. Unset draws the built-in chevron. */
+    children?: ReactNode;
+};
+/** R14 — it renders a `PressableFeedback`, so it carries that node's style keys through it. */
+export type CarouselControlProps = CarouselControlOwnProps & Omit<PressableFeedbackProps, 'isPressed' | 'style' | 'children'> & {
+    /** R9 — `Pressable`'s function form as much as an object or an array. */
+    style?: StyleProp<ViewStyle> | ((state: PressableStateCallbackType) => StyleProp<ViewStyle>);
+};
+type CarouselDotOwnProps = {
+    /** Which slide it stands for. */
+    index: number;
+    children?: ReactNode;
+};
+export type CarouselDotProps = CarouselDotOwnProps & Omit<ViewProps, keyof CarouselDotOwnProps> & Omit<ViewStyleProps, keyof CarouselDotOwnProps | keyof ViewProps>;
+type CarouselThumbnailOwnProps = {
+    /** Which slide pressing it goes to. */
+    index: number;
+    children?: ReactNode;
+};
+export type CarouselThumbnailProps = CarouselThumbnailOwnProps & Omit<ViewProps, keyof CarouselThumbnailOwnProps> & Omit<ViewStyleProps, keyof CarouselThumbnailOwnProps | keyof ViewProps>;
+/** R5 — resolved style ids, plus the state a slot cannot work out on its own. */
+export type CarouselContextValue = {
+    contentStyle: StyleProp<ViewStyle>;
+    itemStyle: StyleProp<ViewStyle>;
+    controlStyle: StyleProp<ViewStyle>;
+    /** The same arrow at the end of a series that does not loop: in place, and quiet. */
+    controlInactiveStyle: StyleProp<ViewStyle>;
+    chevronStyle: StyleProp<ViewStyle>;
+    indicatorStyle: StyleProp<ViewStyle>;
+    dotStyle: StyleProp<ViewStyle>;
+    /**
+     * The two colours and the two widths a dot travels between, as values rather than as
+     * style ids.
+     *
+     * A worklet interpolates numbers and strings; it cannot read a `StyleSheet` id. This is
+     * where R5 lands for an indicator that follows a drag — the recipe still owns every value
+     * and the root reads them back off it once, exactly as `useChartInk` does for SVG.
+     */
+    dotInk: {
+        rest: string;
+        active: string;
+        width: number;
+        pill: number;
+    };
+    counterStyle: StyleProp<TextStyle>;
+    thumbnailsStyle: StyleProp<ViewStyle>;
+    thumbnailStyle: StyleProp<ViewStyle>;
+    thumbnailActiveStyle: StyleProp<ViewStyle>;
+    /** The slide the track has settled on. */
+    index: number;
+    /** How many slides `Carousel.Content` was given. */
+    count: number;
+    /** How `Carousel.Content` tells everything else how many slides there are. */
+    setCount: (count: number) => void;
+    metrics: CarouselMetrics;
+    /** Zero until the root has been laid out. Nothing draws a track before then. */
+    width: number;
+    /** The track's own height, so an arrow can centre itself on the slides rather than on
+     * the root — which also holds the dots, and would put the arrows below the middle. */
+    trackHeight: number;
+    setTrackHeight: (height: number) => void;
+    /** An arrow's diameter and its inset from the track's edge. */
+    controlBox: {
+        size: number;
+        inset: number;
+    };
+    hasLoop: boolean;
+    isDisabled: boolean;
+    /** The scroll offset in points, on the UI thread — what a live indicator follows. */
+    offset: SharedValue<number>;
+    /**
+     * The track itself, so the controls and the thumbnails can move it.
+     *
+     * An **animated** ref, not a plain one: the ref `Animated.ScrollView` hands back is the
+     * wrapper Reanimated built, and it carries none of the scroller's own methods —
+     * `useAnimatedRef` is the documented way to reach them, and the one that also works on
+     * the web renderer.
+     */
+    trackRef: AnimatedRef<Animated.ScrollView>;
+    goTo: (index: number) => void;
+    /** `+1` for the next slide, `−1` for the one before. Wraps when `hasLoop`. */
+    moveBy: (delta: number) => void;
+    /** What the reader did. It is what stops autoplay, and it never restarts it. */
+    onInteract: () => void;
+    onSettle: (index: number) => void;
+};
+export {};