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

package/dist/chunk-LIEXFWTN.js

@@ -0,0 +1,1058 @@
+import { useMergedRef } from "./chunk-NCTOTTVW.js";
+import { useControllableState } from "./chunk-F6W3JQ7K.js";
+import { PressableFeedback } from "./chunk-2AFA5HA2.js";
+import { usePressState } from "./chunk-423RQBOX.js";
+import { createRecipe, radiusAxis } from "./chunk-DKVXTMIJ.js";
+import { Slot, createSlotContext } from "./chunk-TTZOIXKE.js";
+import { warnDev } from "./chunk-EGLLDKN6.js";
+import { useXAUITheme } from "./chunk-Z6JBWRPL.js";
+import { useStyleProps } from "./chunk-M63GFNKV.js";
+
+// src/components/carousel/carousel-content.tsx
+import { Children, forwardRef, useEffect } from "react";
+import Animated, { runOnJS, useAnimatedScrollHandler, useSharedValue } from "react-native-reanimated";
+
+// src/utils/carousel.ts
+const _worklet_14024102982305_init_data = {
+  code: "function clamp_chunkLIEXFWTNJs1(value,low,high){return Math.min(Math.max(value,low),high);}",
+  location: "/home/runner/work/xaui/xaui/packages/native/dist/chunk-LIEXFWTN.js",
+  sourceMap: "{\"version\":3,\"names\":[\"clamp_chunkLIEXFWTNJs1\",\"value\",\"low\",\"high\",\"Math\",\"min\",\"max\"],\"sources\":[\"/home/runner/work/xaui/xaui/packages/native/dist/chunk-LIEXFWTN.js\"],\"mappings\":\"AAsCA,SAAAA,uBAAAC,KAAA,CAAAC,GAAA,CAAAC,IAAA,SAAAC,IAAA,CAAAC,GAAA,CAAAD,IAAA,CAAAE,GAAA,CAAAL,KAAA,CAAAC,GAAA,EAAAC,IAAA,EACA\",\"ignoreList\":[]}"
+};
+const clamp = function clamp_chunkLIEXFWTNJs1Factory({
+  _worklet_14024102982305_init_data
+}) {
+  const _e = [new global.Error(), 1, -27];
+  const clamp = function (value, low, high) {
+    return Math.min(Math.max(value, low), high);
+  };
+  clamp.__closure = {};
+  clamp.__workletHash = 14024102982305;
+  clamp.__pluginVersion = "0.7.4";
+  clamp.__initData = _worklet_14024102982305_init_data;
+  clamp.__stackDetails = _e;
+  return clamp;
+}({
+  _worklet_14024102982305_init_data
+});
+function carouselMetrics({
+  width,
+  itemsPerView,
+  gap,
+  peek
+}) {
+  const perView = Math.max(1, Math.floor(itemsPerView));
+  const inset = peek > 0 ? peek + gap : 0;
+  const between = gap * (perView - 1);
+  const itemWidth = Math.max(0, (width - 2 * inset - between) / perView);
+  return {
+    itemWidth,
+    step: itemWidth + gap,
+    gap,
+    inset
+  };
+}
+const _worklet_3187956754807_init_data = {
+  code: "function indexFromOffset_chunkLIEXFWTNJs2(offset,step,count){const{clamp}=this.__closure;if(step<=0||count<=0)return 0;return clamp(Math.round(offset/step),0,count-1);}",
+  location: "/home/runner/work/xaui/xaui/packages/native/dist/chunk-LIEXFWTN.js",
+  sourceMap: "{\"version\":3,\"names\":[\"indexFromOffset_chunkLIEXFWTNJs2\",\"offset\",\"step\",\"count\",\"clamp\",\"__closure\",\"Math\",\"round\"],\"sources\":[\"/home/runner/work/xaui/xaui/packages/native/dist/chunk-LIEXFWTN.js\"],\"mappings\":\"AAuDA,SAAAA,gCAAuCA,CAAAC,MAAO,CAAAC,IAAA,CAAAC,KAAA,QAAAC,KAAA,OAAAC,SAAA,CAE5C,GAAIH,IAAI,EAAI,CAAC,EAAIC,KAAK,EAAI,CAAC,CAAE,MAAO,EAAC,CACrC,MAAO,CAAAC,KAAK,CAACE,IAAI,CAACC,KAAK,CAACN,MAAM,CAAGC,IAAI,CAAC,CAAE,CAAC,CAAEC,KAAK,CAAG,CAAC,CAAC,CACvD\",\"ignoreList\":[]}"
+};
+const indexFromOffset = function indexFromOffset_chunkLIEXFWTNJs2Factory({
+  _worklet_3187956754807_init_data,
+  clamp
+}) {
+  const _e = [new global.Error(), -2, -27];
+  const indexFromOffset = function (offset, step, count) {
+    if (step <= 0 || count <= 0) return 0;
+    return clamp(Math.round(offset / step), 0, count - 1);
+  };
+  indexFromOffset.__closure = {
+    clamp
+  };
+  indexFromOffset.__workletHash = 3187956754807;
+  indexFromOffset.__pluginVersion = "0.7.4";
+  indexFromOffset.__initData = _worklet_3187956754807_init_data;
+  indexFromOffset.__stackDetails = _e;
+  return indexFromOffset;
+}({
+  _worklet_3187956754807_init_data,
+  clamp
+});
+const _worklet_11197815536232_init_data = {
+  code: "function progressFromOffset_chunkLIEXFWTNJs3(offset,step,count){const{clamp}=this.__closure;if(step<=0||count<=0)return 0;return clamp(offset/step,0,count-1);}",
+  location: "/home/runner/work/xaui/xaui/packages/native/dist/chunk-LIEXFWTN.js",
+  sourceMap: "{\"version\":3,\"names\":[\"progressFromOffset_chunkLIEXFWTNJs3\",\"offset\",\"step\",\"count\",\"clamp\",\"__closure\"],\"sources\":[\"/home/runner/work/xaui/xaui/packages/native/dist/chunk-LIEXFWTN.js\"],\"mappings\":\"AA4DA,SAAAA,mCAA0CA,CAAAC,MAAO,CAAAC,IAAA,CAAAC,KAAA,QAAAC,KAAA,OAAAC,SAAA,CAE/C,GAAIH,IAAI,EAAI,CAAC,EAAIC,KAAK,EAAI,CAAC,CAAE,MAAO,EAAC,CACrC,MAAO,CAAAC,KAAK,CAACH,MAAM,CAAGC,IAAI,CAAE,CAAC,CAAEC,KAAK,CAAG,CAAC,CAAC,CAC3C\",\"ignoreList\":[]}"
+};
+const progressFromOffset = function progressFromOffset_chunkLIEXFWTNJs3Factory({
+  _worklet_11197815536232_init_data,
+  clamp
+}) {
+  const _e = [new global.Error(), -2, -27];
+  const progressFromOffset = function (offset, step, count) {
+    if (step <= 0 || count <= 0) return 0;
+    return clamp(offset / step, 0, count - 1);
+  };
+  progressFromOffset.__closure = {
+    clamp
+  };
+  progressFromOffset.__workletHash = 11197815536232;
+  progressFromOffset.__pluginVersion = "0.7.4";
+  progressFromOffset.__initData = _worklet_11197815536232_init_data;
+  progressFromOffset.__stackDetails = _e;
+  return progressFromOffset;
+}({
+  _worklet_11197815536232_init_data,
+  clamp
+});
+function stepIndex(index, delta, count, hasLoop) {
+  if (count <= 0) return 0;
+  const next = index + delta;
+  if (hasLoop) return (next % count + count) % count;
+  return clamp(next, 0, count - 1);
+}
+
+// src/components/carousel/carousel.context.ts
+var [CarouselProvider, useCarousel] = createSlotContext("Carousel");
+
+// src/components/carousel/carousel-content.tsx
+import { jsx } from "react/jsx-runtime";
+const _worklet_9978291698757_init_data = {
+  code: "function chunkLIEXFWTNJs4(event){const{offset,indexFromOffset,step,count,settled,runOnJS,onSettle}=this.__closure;offset.set(event.contentOffset.x);const next=indexFromOffset(event.contentOffset.x,step,count);if(next!==settled.get()){settled.set(next);runOnJS(onSettle)(next);}}",
+  location: "/home/runner/work/xaui/xaui/packages/native/dist/chunk-LIEXFWTN.js",
+  sourceMap: "{\"version\":3,\"names\":[\"chunkLIEXFWTNJs4\",\"event\",\"offset\",\"indexFromOffset\",\"step\",\"count\",\"settled\",\"runOnJS\",\"onSettle\",\"__closure\",\"set\",\"contentOffset\",\"x\",\"next\",\"get\"],\"sources\":[\"/home/runner/work/xaui/xaui/packages/native/dist/chunk-LIEXFWTN.js\"],\"mappings\":\"AAwG6C,SAAAA,gBAAUA,CAAAC,KAAA,QAAAC,MAAA,CAAAC,eAAA,CAAAC,IAAA,CAAAC,KAAA,CAAAC,OAAA,CAAAC,OAAA,CAAAC,QAAA,OAAAC,SAAA,CACjDP,MAAM,CAACQ,GAAG,CAACT,KAAK,CAACU,aAAa,CAACC,CAAC,CAAC,CACjC,KAAM,CAAAC,IAAI,CAAGV,eAAe,CAACF,KAAK,CAACU,aAAa,CAACC,CAAC,CAAER,IAAI,CAAEC,KAAK,CAAC,CAChE,GAAIQ,IAAI,GAAKP,OAAO,CAACQ,GAAG,CAAC,CAAC,CAAE,CAC1BR,OAAO,CAACI,GAAG,CAACG,IAAI,CAAC,CACjBN,OAAO,CAACC,QAAQ,CAAC,CAACK,IAAI,CAAC,CACzB,CACF\",\"ignoreList\":[]}"
+};
+var CarouselContent = forwardRef(function CarouselContent2({
+  children,
+  style,
+  onLayout,
+  ...props
+}, ref) {
+  const {
+    contentStyle,
+    metrics,
+    width,
+    count,
+    setCount,
+    offset,
+    trackRef,
+    isDisabled,
+    onInteract,
+    onSettle,
+    setTrackHeight
+  } = useCarousel();
+  const [styleProps, rest] = useStyleProps(props);
+  const track = useMergedRef(ref, trackRef);
+  const given = Children.count(children);
+  useEffect(() => {
+    if (given !== count) setCount(given);
+  }, [count, given, setCount]);
+  const handleLayout = event => {
+    onLayout?.(event);
+    setTrackHeight(event.nativeEvent.layout.height);
+  };
+  const settled = useSharedValue(0);
+  const {
+    step
+  } = metrics;
+  const scroll = useAnimatedScrollHandler(function chunkLIEXFWTNJs4Factory({
+    _worklet_9978291698757_init_data,
+    offset,
+    indexFromOffset,
+    step,
+    count,
+    settled,
+    runOnJS,
+    onSettle
+  }) {
+    const _e = [new global.Error(), -8, -27];
+    const chunkLIEXFWTNJs4 = function (event) {
+      offset.set(event.contentOffset.x);
+      const next = indexFromOffset(event.contentOffset.x, step, count);
+      if (next !== settled.get()) {
+        settled.set(next);
+        runOnJS(onSettle)(next);
+      }
+    };
+    chunkLIEXFWTNJs4.__closure = {
+      offset,
+      indexFromOffset,
+      step,
+      count,
+      settled,
+      runOnJS,
+      onSettle
+    };
+    chunkLIEXFWTNJs4.__workletHash = 9978291698757;
+    chunkLIEXFWTNJs4.__pluginVersion = "0.7.4";
+    chunkLIEXFWTNJs4.__initData = _worklet_9978291698757_init_data;
+    chunkLIEXFWTNJs4.__stackDetails = _e;
+    return chunkLIEXFWTNJs4;
+  }({
+    _worklet_9978291698757_init_data,
+    offset,
+    indexFromOffset,
+    step,
+    count,
+    settled,
+    runOnJS,
+    onSettle
+  }));
+  return /* @__PURE__ */jsx(Animated.ScrollView, {
+    ref: track,
+    horizontal: true,
+    showsHorizontalScrollIndicator: false,
+    scrollEnabled: !isDisabled,
+    snapToInterval: metrics.step,
+    decelerationRate: "fast",
+    disableIntervalMomentum: true,
+    scrollEventThrottle: 16,
+    ...rest,
+    contentContainerStyle: [{
+      gap: metrics.gap
+    },
+    // R13 — the inset is the same at both ends, so one key rather than two, and no
+    // side to get the wrong way round in a right-to-left layout.
+    {
+      paddingHorizontal: metrics.inset
+    }],
+    style: [contentStyle, styleProps, style],
+    onLayout: handleLayout,
+    onScroll: scroll,
+    onScrollBeginDrag: onInteract,
+    children: width > 0 ? children : null
+  });
+});
+CarouselContent.displayName = "XAUI.Carousel.Content";
+
+// src/components/carousel/carousel-counter.tsx
+import { forwardRef as forwardRef2 } from "react";
+import { Text } from "react-native";
+import { jsx as jsx2 } from "react/jsx-runtime";
+var CarouselCounter = forwardRef2(function CarouselCounter2({
+  children,
+  style,
+  ...props
+}, ref) {
+  const {
+    counterStyle,
+    index,
+    count
+  } = useCarousel();
+  const [styleProps, rest] = useStyleProps(props);
+  return /* @__PURE__ */jsx2(Text, {
+    ref,
+    ...rest,
+    style: [counterStyle, styleProps, style],
+    children: children ?? `${count === 0 ? 0 : index + 1} / ${count}`
+  });
+});
+CarouselCounter.displayName = "XAUI.Carousel.Counter";
+
+// src/components/carousel/carousel-indicator.tsx
+import { forwardRef as forwardRef3 } from "react";
+import { Pressable, View } from "react-native";
+import Animated2, { interpolateColor, useAnimatedStyle } from "react-native-reanimated";
+import { jsx as jsx3 } from "react/jsx-runtime";
+var HIT_SLOP = 8;
+var AnimatedPressable = Animated2.createAnimatedComponent(Pressable);
+var CarouselIndicator = forwardRef3(function CarouselIndicator2({
+  children,
+  style,
+  ...props
+}, ref) {
+  const {
+    indicatorStyle,
+    count
+  } = useCarousel();
+  const [styleProps, rest] = useStyleProps(props);
+  return /* @__PURE__ */jsx3(View, {
+    ref,
+    ...rest,
+    style: [indicatorStyle, styleProps, style],
+    children: children ?? Array.from({
+      length: count
+    }, (_, index) => /* @__PURE__ */jsx3(CarouselDot, {
+      index
+    }, index))
+  });
+});
+CarouselIndicator.displayName = "XAUI.Carousel.Indicator";
+const _worklet_11886564307953_init_data = {
+  code: "function chunkLIEXFWTNJs5(){const{progressFromOffset,offset,step,count,index,width,pill,interpolateColor,restColor,active}=this.__closure;const distance=Math.abs(progressFromOffset(offset.get(),step,count)-index);const nearness=Math.max(0,1-distance);return{width:width+(pill-width)*nearness,backgroundColor:interpolateColor(nearness,[0,1],[restColor,active])};}",
+  location: "/home/runner/work/xaui/xaui/packages/native/dist/chunk-LIEXFWTN.js",
+  sourceMap: "{\"version\":3,\"names\":[\"chunkLIEXFWTNJs5\",\"progressFromOffset\",\"offset\",\"step\",\"count\",\"index\",\"width\",\"pill\",\"interpolateColor\",\"restColor\",\"active\",\"__closure\",\"distance\",\"Math\",\"abs\",\"get\",\"nearness\",\"max\",\"backgroundColor\"],\"sources\":[\"/home/runner/work/xaui/xaui/packages/native/dist/chunk-LIEXFWTN.js\"],\"mappings\":\"AA2LgC,SAAAA,gBAAMA,CAAA,QAAAC,kBAAA,CAAAC,MAAA,CAAAC,IAAA,CAAAC,KAAA,CAAAC,KAAA,CAAAC,KAAA,CAAAC,IAAA,CAAAC,gBAAA,CAAAC,SAAA,CAAAC,MAAA,OAAAC,SAAA,CAClC,KAAM,CAAAC,QAAQ,CAAGC,IAAI,CAACC,GAAG,CAACb,kBAAkB,CAACC,MAAM,CAACa,GAAG,CAAC,CAAC,CAAEZ,IAAI,CAAEC,KAAK,CAAC,CAAGC,KAAK,CAAC,CAChF,KAAM,CAAAW,QAAQ,CAAGH,IAAI,CAACI,GAAG,CAAC,CAAC,CAAE,CAAC,CAAGL,QAAQ,CAAC,CAC1C,MAAO,CACLN,KAAK,CAAEA,KAAK,CAAG,CAACC,IAAI,CAAGD,KAAK,EAAIU,QAAQ,CACxCE,eAAe,CAAEV,gBAAgB,CAACQ,QAAQ,CAAE,CAAC,CAAC,CAAE,CAAC,CAAC,CAAE,CAACP,SAAS,CAAEC,MAAM,CAAC,CACzE,CAAC,CACH\",\"ignoreList\":[]}"
+};
+var CarouselDot = forwardRef3(function CarouselDot2({
+  index,
+  children,
+  style,
+  ...props
+}, ref) {
+  const {
+    dotStyle,
+    dotInk,
+    offset,
+    metrics,
+    count,
+    index: current,
+    isDisabled,
+    goTo,
+    onInteract
+  } = useCarousel();
+  const [styleProps, rest] = useStyleProps(props);
+  const {
+    step
+  } = metrics;
+  const {
+    rest: restColor,
+    active,
+    width,
+    pill
+  } = dotInk;
+  const grow = useAnimatedStyle(function chunkLIEXFWTNJs5Factory({
+    _worklet_11886564307953_init_data,
+    progressFromOffset,
+    offset,
+    step,
+    count,
+    index,
+    width,
+    pill,
+    interpolateColor,
+    restColor,
+    active
+  }) {
+    const _e = [new global.Error(), -11, -27];
+    const chunkLIEXFWTNJs5 = function () {
+      const distance = Math.abs(progressFromOffset(offset.get(), step, count) - index);
+      const nearness = Math.max(0, 1 - distance);
+      return {
+        width: width + (pill - width) * nearness,
+        backgroundColor: interpolateColor(nearness, [0, 1], [restColor, active])
+      };
+    };
+    chunkLIEXFWTNJs5.__closure = {
+      progressFromOffset,
+      offset,
+      step,
+      count,
+      index,
+      width,
+      pill,
+      interpolateColor,
+      restColor,
+      active
+    };
+    chunkLIEXFWTNJs5.__workletHash = 11886564307953;
+    chunkLIEXFWTNJs5.__pluginVersion = "0.7.4";
+    chunkLIEXFWTNJs5.__initData = _worklet_11886564307953_init_data;
+    chunkLIEXFWTNJs5.__stackDetails = _e;
+    return chunkLIEXFWTNJs5;
+  }({
+    _worklet_11886564307953_init_data,
+    progressFromOffset,
+    offset,
+    step,
+    count,
+    index,
+    width,
+    pill,
+    interpolateColor,
+    restColor,
+    active
+  }));
+  return /* @__PURE__ */jsx3(AnimatedPressable, {
+    ref,
+    accessibilityRole: "button",
+    accessibilityState: {
+      selected: index === current,
+      disabled: isDisabled
+    },
+    accessibilityValue: {
+      now: index + 1,
+      min: 1,
+      max: count
+    },
+    disabled: isDisabled,
+    hitSlop: HIT_SLOP,
+    ...rest,
+    style: [dotStyle, grow, styleProps, style],
+    onPress: () => {
+      onInteract();
+      goTo(index);
+    },
+    children
+  });
+});
+CarouselDot.displayName = "XAUI.Carousel.Dot";
+
+// src/components/carousel/carousel-item.tsx
+import { forwardRef as forwardRef4 } from "react";
+import { View as View2 } from "react-native";
+import { jsx as jsx4 } from "react/jsx-runtime";
+var CarouselItem = forwardRef4(function CarouselItem2({
+  children,
+  style,
+  ...props
+}, ref) {
+  const {
+    itemStyle,
+    metrics
+  } = useCarousel();
+  const [styleProps, rest] = useStyleProps(props);
+  return /* @__PURE__ */jsx4(View2, {
+    ref,
+    ...rest,
+    style: [itemStyle, {
+      width: metrics.itemWidth
+    }, styleProps, style],
+    children
+  });
+});
+CarouselItem.displayName = "XAUI.Carousel.Item";
+
+// src/components/carousel/carousel-control.tsx
+import { forwardRef as forwardRef5 } from "react";
+import { View as View3 } from "react-native";
+
+// src/components/carousel/carousel.style.ts
+import { I18nManager, StyleSheet } from "react-native";
+var QUARTER = I18nManager.isRTL ? "-45deg" : "45deg";
+var carouselSheet = StyleSheet.create({
+  /** Towards the end of the series — pointing right in a left-to-right layout. */
+  chevronForward: {
+    borderStartWidth: 0,
+    borderBottomWidth: 0,
+    transform: [{
+      rotate: QUARTER
+    }]
+  },
+  /** And back the other way. */
+  chevronBack: {
+    borderEndWidth: 0,
+    borderTopWidth: 0,
+    transform: [{
+      rotate: QUARTER
+    }]
+  }
+});
+
+// src/components/carousel/carousel-control.tsx
+import { jsx as jsx5 } from "react/jsx-runtime";
+function control({
+  delta,
+  displayName,
+  edge,
+  turn
+}) {
+  const Component = forwardRef5(function CarouselControl({
+    children,
+    asChild = false,
+    style,
+    onPressIn,
+    onPressOut,
+    ...props
+  }, ref) {
+    const {
+      controlStyle,
+      controlInactiveStyle,
+      chevronStyle,
+      controlBox,
+      trackHeight,
+      index,
+      count,
+      hasLoop,
+      isDisabled,
+      moveBy,
+      onInteract
+    } = useCarousel();
+    const [styleProps, rest] = useStyleProps(props);
+    const [isPressed, press] = usePressState({
+      onPressIn,
+      onPressOut
+    });
+    if (!asChild && !rest.accessibilityLabel && !rest["aria-label"]) {
+      warnDev(`${displayName}: a carousel arrow needs an \`accessibilityLabel\` \u2014 a chevron is not text, and there is nothing beside it that names the action.`);
+    }
+    const atEnd = delta > 0 ? index >= count - 1 : index <= 0;
+    const isInactive = isDisabled || !hasLoop && atEnd;
+    const place = {
+      // Half a button above the track's middle. Zero until the track has been measured,
+      // which puts the arrow at the top for one frame and nowhere wrong after it.
+      top: Math.max(0, (trackHeight - controlBox.size) / 2),
+      [edge]: controlBox.inset
+    };
+    return /* @__PURE__ */jsx5(PressableFeedback, {
+      ref,
+      isPressed,
+      asChild,
+      accessibilityRole: "button",
+      accessibilityState: {
+        disabled: isInactive
+      },
+      isDisabled: isInactive,
+      ...rest,
+      style: [controlStyle, isInactive ? controlInactiveStyle : null, place, styleProps, typeof style === "function" ? style({
+        pressed: isPressed
+      }) : style],
+      onPress: () => {
+        onInteract();
+        moveBy(delta);
+      },
+      onPressIn: press.onPressIn,
+      onPressOut: press.onPressOut,
+      children: children ?? /* @__PURE__ */jsx5(View3, {
+        style: [chevronStyle, carouselSheet[turn]]
+      })
+    });
+  });
+  Component.displayName = displayName;
+  return Component;
+}
+var CarouselPrevious = control({
+  delta: -1,
+  displayName: "XAUI.Carousel.Previous",
+  edge: "start",
+  turn: "chevronBack"
+});
+var CarouselNext = control({
+  delta: 1,
+  displayName: "XAUI.Carousel.Next",
+  edge: "end",
+  turn: "chevronForward"
+});
+
+// src/components/carousel/carousel.tsx
+import { forwardRef as forwardRef6, useCallback, useEffect as useEffect2, useMemo, useRef, useState } from "react";
+import { StyleSheet as StyleSheet2, View as View4 } from "react-native";
+import { useAnimatedRef, useSharedValue as useSharedValue2 } from "react-native-reanimated";
+
+// src/components/carousel/carousel.recipe.ts
+var SLOTS = ["root", "content", "item", "control", "controlInactive", "chevron", "indicator", "dot", "dotActive", "counter", "thumbnails", "thumbnail", "thumbnailActive"];
+var VARIANT_TOKENS = {
+  // The arrows sit **on** the slide, so their ground is the raised one rather than the
+  // page's: a control the same colour as the page vanishes over a pale photograph.
+  primary: {
+    bg: "surface",
+    fg: "foreground",
+    bgSelected: "accent",
+    fgSelected: "foreground"
+  },
+  secondary: {
+    bg: "default",
+    fg: "defaultForeground",
+    bgSelected: "defaultForeground",
+    fgSelected: "defaultForeground"
+  },
+  tertiary: {
+    bg: "surface",
+    fg: "foreground",
+    border: "border",
+    bgSelected: "foreground",
+    fgSelected: "foreground"
+  },
+  // No ground at all: the chevron is drawn straight on the slide, which is what a carousel
+  // over a dark photograph wants and what a carousel over a white one must not use.
+  ghost: {
+    fg: "foreground",
+    bgSelected: "accent",
+    fgSelected: "foreground"
+  }
+};
+var SIZES = {
+  xs: {
+    control: 24,
+    chevron: 6,
+    stroke: 1.5,
+    dot: 5,
+    pill: 14,
+    gap: 1.5,
+    thumbnail: 40,
+    counter: "xs"
+  },
+  sm: {
+    control: 30,
+    chevron: 7,
+    stroke: 1.5,
+    dot: 6,
+    pill: 18,
+    gap: 2,
+    thumbnail: 48,
+    counter: "xs"
+  },
+  md: {
+    control: 36,
+    chevron: 8,
+    stroke: 2,
+    dot: 7,
+    pill: 22,
+    gap: 2.5,
+    thumbnail: 60,
+    counter: "sm"
+  },
+  lg: {
+    control: 44,
+    chevron: 10,
+    stroke: 2,
+    dot: 8,
+    pill: 26,
+    gap: 3,
+    thumbnail: 72,
+    counter: "md"
+  }
+};
+function carouselGap(theme, size) {
+  return theme.spacing(SIZES[size].gap);
+}
+function carouselControlBox(theme, size) {
+  return {
+    size: SIZES[size].control,
+    inset: theme.spacing(2)
+  };
+}
+function sizeAxis(step) {
+  const {
+    control: control2,
+    chevron,
+    stroke,
+    dot,
+    pill,
+    gap,
+    thumbnail,
+    counter
+  } = step;
+  return theme => ({
+    control: {
+      width: control2,
+      height: control2,
+      borderRadius: control2 / 2
+    },
+    chevron: {
+      width: chevron,
+      height: chevron,
+      borderWidth: stroke
+    },
+    indicator: {
+      gap: theme.spacing(gap) * 0.5,
+      height: dot
+    },
+    dot: {
+      width: dot,
+      height: dot,
+      borderRadius: dot / 2
+    },
+    /**
+     * The chosen dot, **read as values and never applied as a style**: the width and the
+     * colour are interpolated on the UI thread, and a worklet cannot read a `StyleSheet`
+     * id. The root flattens this slot into `dotInk`, so the recipe still owns both numbers.
+     *
+     * A pill, not a wider dot: the corner stays the dot's own, so the shape grows sideways
+     * out of the circle it was rather than turning into a different one.
+     */
+    dotActive: {
+      width: pill,
+      height: dot,
+      borderRadius: dot / 2
+    },
+    thumbnails: {
+      gap: theme.spacing(gap) * 0.75
+    },
+    thumbnail: {
+      width: thumbnail,
+      height: thumbnail
+    },
+    thumbnailActive: {
+      width: thumbnail,
+      height: thumbnail
+    },
+    counter: {
+      fontSize: theme.fontSizes[counter],
+      lineHeight: theme.lineHeights[counter]
+    }
+  });
+}
+var carouselRecipe = createRecipe({
+  slots: SLOTS,
+  base: theme => ({
+    root: {
+      flexDirection: "column",
+      gap: theme.spacing(2),
+      position: "relative"
+    },
+    content: {
+      flexGrow: 0
+    },
+    item: {
+      borderCurve: "continuous",
+      overflow: "hidden",
+      // A slide is exactly as wide as `carouselMetrics` said and never less. In a row it
+      // is a flex item, and a flex item with a width still *shrinks* to fit its container
+      // — so five slides in a track one slide wide would each squeeze down to a fifth, the
+      // content would stop overflowing, and a carousel with nowhere to scroll to would sit
+      // there showing all five at once and ignoring its own arrows.
+      flexShrink: 0
+    },
+    /**
+     * An arrow at the end of a series that does not loop. It stays in place and stays
+     * legible — a control that disappears at the last slide takes its width with it and
+     * shifts everything beside it.
+     *
+     * A slot rather than a state, because the engine's states are a fixed set and this is
+     * not one of them: the carousel is not disabled, one of its two arrows is.
+     */
+    controlInactive: {
+      opacity: theme.opacity.disabled
+    },
+    control: {
+      // Over the slides rather than beside them: an arrow in the flow would move the track
+      // it belongs to, and the two would disagree about where the middle is.
+      position: "absolute",
+      alignItems: "center",
+      justifyContent: "center",
+      borderCurve: "continuous",
+      ...theme.shadows.surface
+    },
+    // The box and the stroke only. Which two of the four edges are actually drawn is
+    // `carousel.style.ts`'s — it is geometry, and it differs between the two arrows.
+    chevron: {},
+    indicator: {
+      flexDirection: "row",
+      alignItems: "center",
+      justifyContent: "center"
+    },
+    // A neutral fill rather than a faint version of the active one: the dots sit under
+    // the slides, on the page, and a pale tint of the accent there reads as a control that
+    // has half failed to load. `color` reaches the pill, which is the thing it should move.
+    dot: {
+      backgroundColor: theme.colors.default
+    },
+    counter: {
+      fontFamily: theme.fontFamilies.body,
+      color: theme.colors.muted
+    },
+    thumbnails: {
+      flexGrow: 0,
+      flexDirection: "row"
+    },
+    thumbnail: {
+      borderCurve: "continuous",
+      overflow: "hidden",
+      // The strip is a row too, and the same squeeze applies to it.
+      flexShrink: 0,
+      // The ring is always there and only its colour moves, so choosing a thumbnail does
+      // not resize it — a border that appears on selection nudges every thumbnail after it.
+      borderWidth: theme.borderWidth.field,
+      borderColor: "transparent"
+    },
+    thumbnailActive: {
+      borderCurve: "continuous",
+      overflow: "hidden",
+      flexShrink: 0,
+      borderWidth: theme.borderWidth.field
+    }
+  }),
+  variantTokens: VARIANT_TOKENS,
+  paint: (theme, colors) => ({
+    control: {
+      backgroundColor: colors.bg,
+      borderColor: colors.border,
+      borderWidth: colors.border ? theme.borderWidth.default : 0
+    },
+    chevron: {
+      borderColor: colors.fg
+    },
+    dotActive: {
+      backgroundColor: colors.bgSelected
+    },
+    thumbnailActive: {
+      borderColor: colors.bgSelected
+    }
+  }),
+  variants: {
+    size: {
+      xs: sizeAxis(SIZES.xs),
+      sm: sizeAxis(SIZES.sm),
+      md: sizeAxis(SIZES.md),
+      lg: sizeAxis(SIZES.lg)
+    },
+    /** The slides' corner, and the thumbnails'. The arrows stay round. */
+    radius: radiusAxis("item", "thumbnail", "thumbnailActive")
+  },
+  states: {
+    disabled: theme => ({
+      root: {
+        opacity: theme.opacity.disabled
+      }
+    })
+  },
+  defaultVariants: {
+    variant: "primary",
+    size: "md",
+    radius: "2xl"
+  }
+});
+
+// src/components/carousel/carousel.tsx
+import { jsx as jsx6 } from "react/jsx-runtime";
+function setTrackOffset(track, x) {
+  track.current?.scrollTo({
+    x,
+    y: 0,
+    animated: false
+  });
+}
+var GLIDE_MS = 420;
+var GLIDE_FRAME_MS = 16;
+function easeOutCubic(t) {
+  return 1 - (1 - t) ** 3;
+}
+var CarouselRoot = forwardRef6(function Carousel({
+  children,
+  variant,
+  size = "md",
+  color,
+  radius,
+  index: indexProp,
+  defaultIndex = 0,
+  onIndexChange,
+  itemsPerView = 1,
+  peek = 0,
+  gap,
+  hasLoop = false,
+  autoPlayInterval,
+  isDisabled = false,
+  asChild = false,
+  style,
+  onLayout,
+  ...props
+}, ref) {
+  const theme = useXAUITheme();
+  const [styleProps, rest] = useStyleProps(props);
+  const [index, setIndex] = useControllableState({
+    value: indexProp,
+    defaultValue: defaultIndex,
+    onChange: onIndexChange
+  });
+  const [width, setWidth] = useState(0);
+  const [trackHeight, setTrackHeight] = useState(0);
+  const [count, setCount] = useState(0);
+  const hasInteracted = useRef(false);
+  const trackRef = useAnimatedRef();
+  const offset = useSharedValue2(0);
+  const glideTimer = useRef(null);
+  const selection = {
+    variant,
+    size,
+    radius
+  };
+  const styles = carouselRecipe.resolve({
+    theme,
+    selection,
+    states: {
+      disabled: isDisabled
+    }
+  });
+  const tint = color ? carouselRecipe.tint({
+    theme,
+    color,
+    selection
+  }) : void 0;
+  const dotInk = useMemo(() => {
+    const at = StyleSheet2.flatten([styles.dot]);
+    const on = StyleSheet2.flatten([styles.dotActive, tint?.dotActive]);
+    return {
+      rest: typeof at.backgroundColor === "string" ? at.backgroundColor : theme.colors.default,
+      active: typeof on.backgroundColor === "string" ? on.backgroundColor : theme.colors.accent,
+      width: typeof at.width === "number" ? at.width : 0,
+      pill: typeof on.width === "number" ? on.width : 0
+    };
+  }, [styles, tint, theme]);
+  const resolvedGap = gap ?? carouselGap(theme, size);
+  const controlBox = useMemo(() => carouselControlBox(theme, size), [theme, size]);
+  const metrics = useMemo(() => carouselMetrics({
+    width,
+    itemsPerView,
+    gap: resolvedGap,
+    peek
+  }), [width, itemsPerView, resolvedGap, peek]);
+  const handleLayout = event => {
+    onLayout?.(event);
+    setWidth(event.nativeEvent.layout.width);
+  };
+  const stopGlide = useCallback(() => {
+    if (glideTimer.current !== null) {
+      clearInterval(glideTimer.current);
+      glideTimer.current = null;
+    }
+  }, []);
+  const glideTo = useCallback(x => {
+    stopGlide();
+    const from = offset.get();
+    const distance = x - from;
+    if (Math.abs(distance) < 1) {
+      setTrackOffset(trackRef, x);
+      return;
+    }
+    const start = Date.now();
+    glideTimer.current = setInterval(() => {
+      const t = Math.min(1, (Date.now() - start) / GLIDE_MS);
+      setTrackOffset(trackRef, from + distance * easeOutCubic(t));
+      if (t >= 1) stopGlide();
+    }, GLIDE_FRAME_MS);
+  }, [offset, stopGlide, trackRef]);
+  const goTo = useCallback(next => {
+    glideTo(next * metrics.step);
+    setIndex(next);
+  }, [glideTo, metrics.step, setIndex]);
+  const moveBy = useCallback(delta => goTo(stepIndex(index, delta, count, hasLoop)), [count, goTo, hasLoop, index]);
+  const onInteract = useCallback(() => {
+    hasInteracted.current = true;
+    stopGlide();
+  }, [stopGlide]);
+  useEffect2(() => stopGlide, [stopGlide]);
+  useEffect2(() => {
+    if (!autoPlayInterval || isDisabled || count < 2) return;
+    const timer = setInterval(() => {
+      if (hasInteracted.current) {
+        clearInterval(timer);
+        return;
+      }
+      setIndex(current => {
+        const next = stepIndex(current, 1, count, true);
+        glideTo(next * metrics.step);
+        return next;
+      });
+    }, autoPlayInterval);
+    return () => clearInterval(timer);
+  }, [autoPlayInterval, count, isDisabled, glideTo, metrics.step, setIndex]);
+  const context = useMemo(() => ({
+    contentStyle: styles.content,
+    itemStyle: styles.item,
+    controlStyle: [styles.control, tint?.control],
+    controlInactiveStyle: [styles.control, tint?.control, styles.controlInactive],
+    chevronStyle: [styles.chevron, tint?.chevron],
+    indicatorStyle: styles.indicator,
+    dotStyle: styles.dot,
+    dotInk,
+    counterStyle: styles.counter,
+    thumbnailsStyle: styles.thumbnails,
+    thumbnailStyle: styles.thumbnail,
+    thumbnailActiveStyle: [styles.thumbnailActive, tint?.thumbnailActive],
+    index,
+    count,
+    setCount,
+    metrics,
+    width,
+    trackHeight,
+    setTrackHeight,
+    controlBox,
+    hasLoop,
+    isDisabled,
+    offset,
+    trackRef,
+    goTo,
+    moveBy,
+    onInteract,
+    onSettle: setIndex
+  }), [styles, tint, dotInk, index, count, metrics, width, trackHeight, setTrackHeight, controlBox, hasLoop, isDisabled, offset, goTo, moveBy, onInteract, setIndex]);
+  const rootStyle = [styles.root, styleProps, style];
+  return /* @__PURE__ */jsx6(CarouselProvider, {
+    value: context,
+    children: asChild ? /* @__PURE__ */jsx6(Slot, {
+      ref,
+      ...rest,
+      onLayout: handleLayout,
+      style: rootStyle,
+      children
+    }) : /* @__PURE__ */jsx6(View4, {
+      ref,
+      ...rest,
+      onLayout: handleLayout,
+      style: rootStyle,
+      children
+    })
+  });
+});
+CarouselRoot.displayName = "XAUI.Carousel.Root";
+
+// src/components/carousel/carousel-thumbnails.tsx
+import { forwardRef as forwardRef7 } from "react";
+import { Pressable as Pressable2, ScrollView } from "react-native";
+import { jsx as jsx7 } from "react/jsx-runtime";
+var CarouselThumbnails = forwardRef7(function CarouselThumbnails2({
+  children,
+  style,
+  ...props
+}, ref) {
+  const {
+    thumbnailsStyle
+  } = useCarousel();
+  const [styleProps, rest] = useStyleProps(props);
+  return /* @__PURE__ */jsx7(ScrollView, {
+    ref,
+    horizontal: true,
+    showsHorizontalScrollIndicator: false,
+    ...rest,
+    style: [thumbnailsStyle, styleProps, style],
+    contentContainerStyle: CONTENT,
+    children
+  });
+});
+CarouselThumbnails.displayName = "XAUI.Carousel.Thumbnails";
+var CONTENT = {
+  flexDirection: "row",
+  gap: 8
+};
+var CarouselThumbnail = forwardRef7(function CarouselThumbnail2({
+  index,
+  children,
+  style,
+  ...props
+}, ref) {
+  const {
+    thumbnailStyle,
+    thumbnailActiveStyle,
+    index: current,
+    count,
+    isDisabled,
+    goTo,
+    onInteract
+  } = useCarousel();
+  const [styleProps, rest] = useStyleProps(props);
+  const isActive = index === current;
+  return /* @__PURE__ */jsx7(Pressable2, {
+    ref,
+    accessibilityRole: "button",
+    accessibilityState: {
+      selected: isActive,
+      disabled: isDisabled
+    },
+    accessibilityValue: {
+      now: index + 1,
+      min: 1,
+      max: count
+    },
+    disabled: isDisabled,
+    ...rest,
+    style: [isActive ? thumbnailActiveStyle : thumbnailStyle, styleProps, style],
+    onPress: () => {
+      onInteract();
+      goTo(index);
+    },
+    children
+  });
+});
+CarouselThumbnail.displayName = "XAUI.Carousel.Thumbnail";
+
+// src/components/carousel/index.ts
+var Carousel2 = Object.assign(CarouselRoot, {
+  Content: CarouselContent,
+  Item: CarouselItem,
+  Previous: CarouselPrevious,
+  Next: CarouselNext,
+  Indicator: CarouselIndicator,
+  Dot: CarouselDot,
+  Counter: CarouselCounter,
+  Thumbnails: CarouselThumbnails,
+  Thumbnail: CarouselThumbnail
+});
+export { useCarousel, CarouselContent, CarouselCounter, CarouselIndicator, CarouselDot, CarouselItem, CarouselPrevious, CarouselNext, carouselRecipe, CarouselRoot, CarouselThumbnails, CarouselThumbnail, Carousel2 as Carousel };