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

package/dist/chunk-6JAGPPZU.cjs

@@ -0,0 +1,788 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } function _nullishCoalesce(lhs, rhsFn) { if (lhs != null) { return lhs; } else { return rhsFn(); } } function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; }
+
+
+
+
+var _chunkFTPPUTWLcjs = require('./chunk-FTPPUTWL.cjs');
+
+
+var _chunkWFEMJCXOcjs = require('./chunk-WFEMJCXO.cjs');
+
+
+var _chunk7EIHHOHPcjs = require('./chunk-7EIHHOHP.cjs');
+
+
+var _chunkOW4N2C3Mcjs = require('./chunk-OW4N2C3M.cjs');
+
+
+var _chunk7DPL3ZDScjs = require('./chunk-7DPL3ZDS.cjs');
+
+
+
+var _chunkSL3V7R2Ycjs = require('./chunk-SL3V7R2Y.cjs');
+
+
+
+var _chunkCDRGTUYFcjs = require('./chunk-CDRGTUYF.cjs');
+
+
+var _chunkEJQCQPETcjs = require('./chunk-EJQCQPET.cjs');
+
+
+var _chunkIIAQISBGcjs = require('./chunk-IIAQISBG.cjs');
+
+
+var _chunkTK44VBIEcjs = require('./chunk-TK44VBIE.cjs');
+
+// src/components/carousel/carousel-content.tsx
+var _react = require('react');
+
+
+
+
+var _reactnativereanimated = require('react-native-reanimated'); var _reactnativereanimated2 = _interopRequireDefault(_reactnativereanimated);
+
+// src/components/carousel/carousel.context.ts
+var [CarouselProvider, useCarousel] = _chunkCDRGTUYFcjs.createSlotContext.call(void 0, "Carousel");
+
+// src/components/carousel/carousel-content.tsx
+var _jsxruntime = require('react/jsx-runtime');
+var CarouselContent = _react.forwardRef.call(void 0, 
+  function CarouselContent2({ children, style, onLayout, ...props }, ref) {
+    const {
+      contentStyle,
+      metrics,
+      width,
+      count,
+      setCount,
+      offset,
+      trackRef,
+      isDisabled,
+      onInteract,
+      onSettle,
+      setTrackHeight
+    } = useCarousel();
+    const [styleProps, rest] = _chunkTK44VBIEcjs.useStyleProps.call(void 0, props);
+    const track = _chunkWFEMJCXOcjs.useMergedRef.call(void 0, ref, trackRef);
+    const given = _react.Children.count(children);
+    _react.useEffect.call(void 0, () => {
+      if (given !== count) setCount(given);
+    }, [count, given, setCount]);
+    const handleLayout = (event) => {
+      _optionalChain([onLayout, 'optionalCall', _2 => _2(event)]);
+      setTrackHeight(event.nativeEvent.layout.height);
+    };
+    const settled = _reactnativereanimated.useSharedValue.call(void 0, 0);
+    const { step } = metrics;
+    const scroll = _reactnativereanimated.useAnimatedScrollHandler.call(void 0, (event) => {
+      offset.set(event.contentOffset.x);
+      const next = _chunkFTPPUTWLcjs.indexFromOffset.call(void 0, event.contentOffset.x, step, count);
+      if (next !== settled.get()) {
+        settled.set(next);
+        _reactnativereanimated.runOnJS.call(void 0, onSettle)(next);
+      }
+    });
+    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      _reactnativereanimated2.default.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
+
+var _reactnative = require('react-native');
+
+var CarouselCounter = _react.forwardRef.call(void 0, 
+  function CarouselCounter2({ children, style, ...props }, ref) {
+    const { counterStyle, index, count } = useCarousel();
+    const [styleProps, rest] = _chunkTK44VBIEcjs.useStyleProps.call(void 0, props);
+    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _reactnative.Text, { ref, ...rest, style: [counterStyle, styleProps, style], children: _nullishCoalesce(children, () => ( `${count === 0 ? 0 : index + 1} / ${count}`)) });
+  }
+);
+CarouselCounter.displayName = "XAUI.Carousel.Counter";
+
+// src/components/carousel/carousel-indicator.tsx
+
+
+
+
+
+
+
+var HIT_SLOP = 8;
+var AnimatedPressable = _reactnativereanimated2.default.createAnimatedComponent(_reactnative.Pressable);
+var CarouselIndicator = _react.forwardRef.call(void 0, 
+  function CarouselIndicator2({ children, style, ...props }, ref) {
+    const { indicatorStyle, count } = useCarousel();
+    const [styleProps, rest] = _chunkTK44VBIEcjs.useStyleProps.call(void 0, props);
+    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _reactnative.View, { ref, ...rest, style: [indicatorStyle, styleProps, style], children: _nullishCoalesce(children, () => ( Array.from({ length: count }, (_, index) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, CarouselDot, { index }, index)))) });
+  }
+);
+CarouselIndicator.displayName = "XAUI.Carousel.Indicator";
+var CarouselDot = _react.forwardRef.call(void 0, function CarouselDot2({ index, children, style, ...props }, ref) {
+  const {
+    dotStyle,
+    dotInk,
+    offset,
+    metrics,
+    count,
+    index: current,
+    isDisabled,
+    goTo,
+    onInteract
+  } = useCarousel();
+  const [styleProps, rest] = _chunkTK44VBIEcjs.useStyleProps.call(void 0, props);
+  const { step } = metrics;
+  const { rest: restColor, active, width, pill } = dotInk;
+  const grow = _reactnativereanimated.useAnimatedStyle.call(void 0, () => {
+    const distance = Math.abs(_chunkFTPPUTWLcjs.progressFromOffset.call(void 0, offset.get(), step, count) - index);
+    const nearness = Math.max(0, 1 - distance);
+    return {
+      width: width + (pill - width) * nearness,
+      backgroundColor: _reactnativereanimated.interpolateColor.call(void 0, nearness, [0, 1], [restColor, active])
+    };
+  });
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    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
+
+
+
+var CarouselItem = _react.forwardRef.call(void 0, 
+  function CarouselItem2({ children, style, ...props }, ref) {
+    const { itemStyle, metrics } = useCarousel();
+    const [styleProps, rest] = _chunkTK44VBIEcjs.useStyleProps.call(void 0, props);
+    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      _reactnative.View,
+      {
+        ref,
+        ...rest,
+        style: [itemStyle, { width: metrics.itemWidth }, styleProps, style],
+        children
+      }
+    );
+  }
+);
+CarouselItem.displayName = "XAUI.Carousel.Item";
+
+// src/components/carousel/carousel-control.tsx
+
+
+
+// src/components/carousel/carousel.style.ts
+
+var QUARTER = _reactnative.I18nManager.isRTL ? "-45deg" : "45deg";
+var carouselSheet = _reactnative.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
+
+function control({ delta, displayName, edge, turn }) {
+  const Component = _react.forwardRef.call(void 0, 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] = _chunkTK44VBIEcjs.useStyleProps.call(void 0, props);
+    const [isPressed, press] = _chunk7DPL3ZDScjs.usePressState.call(void 0, { onPressIn, onPressOut });
+    if (!asChild && !rest.accessibilityLabel && !rest["aria-label"]) {
+      _chunkEJQCQPETcjs.warnDev.call(void 0, 
+        `${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__ */ _jsxruntime.jsx.call(void 0, 
+      _chunkOW4N2C3Mcjs.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: _nullishCoalesce(children, () => ( /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _reactnative.View, { 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
+
+
+
+
+// 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 = _chunkSL3V7R2Ycjs.createRecipe.call(void 0, {
+  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: _chunkSL3V7R2Ycjs.radiusAxis.call(void 0, "item", "thumbnail", "thumbnailActive")
+  },
+  states: {
+    disabled: (theme) => ({ root: { opacity: theme.opacity.disabled } })
+  },
+  defaultVariants: { variant: "primary", size: "md", radius: "2xl" }
+});
+
+// src/components/carousel/carousel.tsx
+
+function setTrackOffset(track, x) {
+  _optionalChain([track, 'access', _3 => _3.current, 'optionalAccess', _4 => _4.scrollTo, 'call', _5 => _5({ x, y: 0, animated: false })]);
+}
+var GLIDE_MS = 420;
+var GLIDE_FRAME_MS = 16;
+function easeOutCubic(t) {
+  return 1 - (1 - t) ** 3;
+}
+var CarouselRoot = _react.forwardRef.call(void 0, 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 = _chunkIIAQISBGcjs.useXAUITheme.call(void 0, );
+  const [styleProps, rest] = _chunkTK44VBIEcjs.useStyleProps.call(void 0, props);
+  const [index, setIndex] = _chunk7EIHHOHPcjs.useControllableState.call(void 0, {
+    value: indexProp,
+    defaultValue: defaultIndex,
+    onChange: onIndexChange
+  });
+  const [width, setWidth] = _react.useState.call(void 0, 0);
+  const [trackHeight, setTrackHeight] = _react.useState.call(void 0, 0);
+  const [count, setCount] = _react.useState.call(void 0, 0);
+  const hasInteracted = _react.useRef.call(void 0, false);
+  const trackRef = _reactnativereanimated.useAnimatedRef.call(void 0, );
+  const offset = _reactnativereanimated.useSharedValue.call(void 0, 0);
+  const glideTimer = _react.useRef.call(void 0, 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 = _react.useMemo.call(void 0, () => {
+    const at = _reactnative.StyleSheet.flatten([styles.dot]);
+    const on = _reactnative.StyleSheet.flatten([styles.dotActive, _optionalChain([tint, 'optionalAccess', _6 => _6.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 = _nullishCoalesce(gap, () => ( carouselGap(theme, size)));
+  const controlBox = _react.useMemo.call(void 0, () => carouselControlBox(theme, size), [theme, size]);
+  const metrics = _react.useMemo.call(void 0, 
+    () => _chunkFTPPUTWLcjs.carouselMetrics.call(void 0, { width, itemsPerView, gap: resolvedGap, peek }),
+    [width, itemsPerView, resolvedGap, peek]
+  );
+  const handleLayout = (event) => {
+    _optionalChain([onLayout, 'optionalCall', _7 => _7(event)]);
+    setWidth(event.nativeEvent.layout.width);
+  };
+  const stopGlide = _react.useCallback.call(void 0, () => {
+    if (glideTimer.current !== null) {
+      clearInterval(glideTimer.current);
+      glideTimer.current = null;
+    }
+  }, []);
+  const glideTo = _react.useCallback.call(void 0, 
+    (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 = _react.useCallback.call(void 0, 
+    (next) => {
+      glideTo(next * metrics.step);
+      setIndex(next);
+    },
+    [glideTo, metrics.step, setIndex]
+  );
+  const moveBy = _react.useCallback.call(void 0, 
+    (delta) => goTo(_chunkFTPPUTWLcjs.stepIndex.call(void 0, index, delta, count, hasLoop)),
+    [count, goTo, hasLoop, index]
+  );
+  const onInteract = _react.useCallback.call(void 0, () => {
+    hasInteracted.current = true;
+    stopGlide();
+  }, [stopGlide]);
+  _react.useEffect.call(void 0, () => stopGlide, [stopGlide]);
+  _react.useEffect.call(void 0, () => {
+    if (!autoPlayInterval || isDisabled || count < 2) return;
+    const timer = setInterval(() => {
+      if (hasInteracted.current) {
+        clearInterval(timer);
+        return;
+      }
+      setIndex((current) => {
+        const next = _chunkFTPPUTWLcjs.stepIndex.call(void 0, current, 1, count, true);
+        glideTo(next * metrics.step);
+        return next;
+      });
+    }, autoPlayInterval);
+    return () => clearInterval(timer);
+  }, [autoPlayInterval, count, isDisabled, glideTo, metrics.step, setIndex]);
+  const context = _react.useMemo.call(void 0, 
+    () => ({
+      contentStyle: styles.content,
+      itemStyle: styles.item,
+      controlStyle: [styles.control, _optionalChain([tint, 'optionalAccess', _8 => _8.control])],
+      controlInactiveStyle: [styles.control, _optionalChain([tint, 'optionalAccess', _9 => _9.control]), styles.controlInactive],
+      chevronStyle: [styles.chevron, _optionalChain([tint, 'optionalAccess', _10 => _10.chevron])],
+      indicatorStyle: styles.indicator,
+      dotStyle: styles.dot,
+      dotInk,
+      counterStyle: styles.counter,
+      thumbnailsStyle: styles.thumbnails,
+      thumbnailStyle: styles.thumbnail,
+      thumbnailActiveStyle: [styles.thumbnailActive, _optionalChain([tint, 'optionalAccess', _11 => _11.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__ */ _jsxruntime.jsx.call(void 0, CarouselProvider, { value: context, children: asChild ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkCDRGTUYFcjs.Slot, { ref, ...rest, onLayout: handleLayout, style: rootStyle, children }) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _reactnative.View, { ref, ...rest, onLayout: handleLayout, style: rootStyle, children }) });
+});
+CarouselRoot.displayName = "XAUI.Carousel.Root";
+
+// src/components/carousel/carousel-thumbnails.tsx
+
+
+
+var CarouselThumbnails = _react.forwardRef.call(void 0, 
+  function CarouselThumbnails2({ children, style, ...props }, ref) {
+    const { thumbnailsStyle } = useCarousel();
+    const [styleProps, rest] = _chunkTK44VBIEcjs.useStyleProps.call(void 0, props);
+    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      _reactnative.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 = _react.forwardRef.call(void 0, 
+  function CarouselThumbnail2({ index, children, style, ...props }, ref) {
+    const {
+      thumbnailStyle,
+      thumbnailActiveStyle,
+      index: current,
+      count,
+      isDisabled,
+      goTo,
+      onInteract
+    } = useCarousel();
+    const [styleProps, rest] = _chunkTK44VBIEcjs.useStyleProps.call(void 0, props);
+    const isActive = index === current;
+    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      _reactnative.Pressable,
+      {
+        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
+});
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+exports.useCarousel = useCarousel; exports.CarouselContent = CarouselContent; exports.CarouselCounter = CarouselCounter; exports.CarouselIndicator = CarouselIndicator; exports.CarouselDot = CarouselDot; exports.CarouselItem = CarouselItem; exports.CarouselPrevious = CarouselPrevious; exports.CarouselNext = CarouselNext; exports.carouselRecipe = carouselRecipe; exports.CarouselRoot = CarouselRoot; exports.CarouselThumbnails = CarouselThumbnails; exports.CarouselThumbnail = CarouselThumbnail; exports.Carousel = Carousel2;