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

package/dist/chunk-2SHWOFQV.js

@@ -0,0 +1,495 @@
+import { indexFromOffset, progressFromOffset } from "./chunk-3A5RK2R7.js";
+import { useMergedRef } from "./chunk-NCTOTTVW.js";
+import { useControllableState } from "./chunk-F6W3JQ7K.js";
+import { createRecipe } from "./chunk-DKVXTMIJ.js";
+import { createSlotContext } from "./chunk-TTZOIXKE.js";
+import { useXAUITheme } from "./chunk-Z6JBWRPL.js";
+import { useStyleProps } from "./chunk-M63GFNKV.js";
+
+// src/components/pager/pager-content.tsx
+import { Children, forwardRef, useEffect } from "react";
+import Animated, { runOnJS, useAnimatedScrollHandler, useSharedValue } from "react-native-reanimated";
+
+// src/components/pager/pager.context.ts
+var [PagerProvider, usePager] = createSlotContext("Pager");
+
+// src/components/pager/pager-content.tsx
+import { jsx } from "react/jsx-runtime";
+const _worklet_10605200666301_init_data = {
+  code: "function chunk2SHWOFQVJs1(event){const{isHorizontal,offset,indexFromOffset,step,count,settled,runOnJS,onSettle}=this.__closure;const travelled=isHorizontal?event.contentOffset.x:event.contentOffset.y;offset.set(travelled);const next=indexFromOffset(travelled,step,count);if(next!==settled.get()){settled.set(next);runOnJS(onSettle)(next);}}",
+  location: "/home/runner/work/xaui/xaui/packages/native/dist/chunk-2SHWOFQV.js",
+  sourceMap: "{\"version\":3,\"names\":[\"chunk2SHWOFQVJs1\",\"event\",\"isHorizontal\",\"offset\",\"indexFromOffset\",\"step\",\"count\",\"settled\",\"runOnJS\",\"onSettle\",\"__closure\",\"travelled\",\"contentOffset\",\"x\",\"y\",\"set\",\"next\",\"get\"],\"sources\":[\"/home/runner/work/xaui/xaui/packages/native/dist/chunk-2SHWOFQV.js\"],\"mappings\":\"AAiE6C,SAAAA,gBAAUA,CAAAC,KAAA,QAAAC,YAAA,CAAAC,MAAA,CAAAC,eAAA,CAAAC,IAAA,CAAAC,KAAA,CAAAC,OAAA,CAAAC,OAAA,CAAAC,QAAA,OAAAC,SAAA,CACjD,KAAM,CAAAC,SAAS,CAAGT,YAAY,CAAGD,KAAK,CAACW,aAAa,CAACC,CAAC,CAAGZ,KAAK,CAACW,aAAa,CAACE,CAAC,CAC9EX,MAAM,CAACY,GAAG,CAACJ,SAAS,CAAC,CACrB,KAAM,CAAAK,IAAI,CAAGZ,eAAe,CAACO,SAAS,CAAEN,IAAI,CAAEC,KAAK,CAAC,CACpD,GAAIU,IAAI,GAAKT,OAAO,CAACU,GAAG,CAAC,CAAC,CAAE,CAC1BV,OAAO,CAACQ,GAAG,CAACC,IAAI,CAAC,CACjBR,OAAO,CAACC,QAAQ,CAAC,CAACO,IAAI,CAAC,CACzB,CACF\",\"ignoreList\":[]}"
+};
+var PagerContent = forwardRef(function PagerContent2({
+  children,
+  style,
+  onLayout,
+  ...props
+}, ref) {
+  const {
+    contentStyle,
+    orientation,
+    step,
+    track,
+    setTrack,
+    count,
+    setCount,
+    offset,
+    trackRef,
+    isDisabled,
+    onSettle
+  } = usePager();
+  const [styleProps, rest] = useStyleProps(props);
+  const scroller = useMergedRef(ref, trackRef);
+  const given = Children.count(children);
+  useEffect(() => {
+    if (given !== count) setCount(given);
+  }, [count, given, setCount]);
+  const handleLayout = event => {
+    onLayout?.(event);
+    const {
+      width,
+      height
+    } = event.nativeEvent.layout;
+    if (width !== track.width || height !== track.height) setTrack({
+      width,
+      height
+    });
+  };
+  const settled = useSharedValue(0);
+  const isHorizontal = orientation === "horizontal";
+  const scroll = useAnimatedScrollHandler(function chunk2SHWOFQVJs1Factory({
+    _worklet_10605200666301_init_data,
+    isHorizontal,
+    offset,
+    indexFromOffset,
+    step,
+    count,
+    settled,
+    runOnJS,
+    onSettle
+  }) {
+    const _e = [new global.Error(), -9, -27];
+    const chunk2SHWOFQVJs1 = function (event) {
+      const travelled = isHorizontal ? event.contentOffset.x : event.contentOffset.y;
+      offset.set(travelled);
+      const next = indexFromOffset(travelled, step, count);
+      if (next !== settled.get()) {
+        settled.set(next);
+        runOnJS(onSettle)(next);
+      }
+    };
+    chunk2SHWOFQVJs1.__closure = {
+      isHorizontal,
+      offset,
+      indexFromOffset,
+      step,
+      count,
+      settled,
+      runOnJS,
+      onSettle
+    };
+    chunk2SHWOFQVJs1.__workletHash = 10605200666301;
+    chunk2SHWOFQVJs1.__pluginVersion = "0.7.4";
+    chunk2SHWOFQVJs1.__initData = _worklet_10605200666301_init_data;
+    chunk2SHWOFQVJs1.__stackDetails = _e;
+    return chunk2SHWOFQVJs1;
+  }({
+    _worklet_10605200666301_init_data,
+    isHorizontal,
+    offset,
+    indexFromOffset,
+    step,
+    count,
+    settled,
+    runOnJS,
+    onSettle
+  }));
+  return /* @__PURE__ */jsx(Animated.ScrollView, {
+    ref: scroller,
+    horizontal: isHorizontal,
+    pagingEnabled: true,
+    showsHorizontalScrollIndicator: false,
+    showsVerticalScrollIndicator: false,
+    scrollEnabled: !isDisabled,
+    decelerationRate: "fast",
+    scrollEventThrottle: 16,
+    ...rest,
+    style: [contentStyle, styleProps, style],
+    onLayout: handleLayout,
+    onScroll: scroll,
+    children: step > 0 ? children : null
+  });
+});
+PagerContent.displayName = "XAUI.Pager.Content";
+
+// src/components/pager/pager-indicator.tsx
+import { forwardRef as forwardRef2 } from "react";
+import { Pressable, View } from "react-native";
+import Animated2, { interpolate, useAnimatedStyle } from "react-native-reanimated";
+
+// src/components/pager/pager.recipe.ts
+var SLOTS = ["root", "content", "page", "indicator", "dot"];
+var VARIANT_TOKENS = {
+  primary: {
+    bgSelected: "accent"
+  },
+  // The page's own ink, for an indicator that has to read as chrome rather than as accent.
+  secondary: {
+    bgSelected: "foreground"
+  },
+  // The raised ground — white on a light theme. A pager over a *photograph* wants
+  // `color="#ffffff"` instead: a photograph is a photograph in both colour modes, and this
+  // token flips with the theme.
+  tertiary: {
+    bgSelected: "surface"
+  }
+};
+var DOT_REST_OPACITY = 0.3;
+var SIZES = {
+  xs: {
+    dot: 5,
+    gap: 1
+  },
+  sm: {
+    dot: 6,
+    gap: 1.5
+  },
+  md: {
+    dot: 7,
+    gap: 1.5
+  },
+  lg: {
+    dot: 8,
+    gap: 2
+  }
+};
+function sizeAxis(step) {
+  const {
+    dot,
+    gap
+  } = step;
+  return theme => ({
+    indicator: {
+      gap: theme.spacing(gap)
+    },
+    dot: {
+      width: dot,
+      height: dot,
+      borderRadius: dot / 2
+    }
+  });
+}
+function orientationAxis(direction) {
+  return () => ({
+    indicator: {
+      flexDirection: direction
+    }
+  });
+}
+var pagerRecipe = createRecipe({
+  slots: SLOTS,
+  base: () => ({
+    /**
+     * **The root has no size of its own**, and that is deliberate rather than missing.
+     *
+     * `flex: 1` here would have been the convenient default and it is a trap: React Native
+     * expands it to a zero flex-basis, which **overrides an explicit `height`** — so
+     * `<Pager height={240}>` would collapse to the height of its dots, and the prop the
+     * caller reached for would silently do nothing. It is the same reason there is no
+     * `fullWidth` on a `Button`: RN's own behaviour is the answer, and the caller says which
+     * of the two they want — `flex={1}` to fill a screen, `height={320}` inside a scroll
+     * view.
+     *
+     * The track keeps its `flex: 1`, so it takes whatever the root was given less the dots.
+     * Nothing sizes it from outside, which is why it is safe there and not here.
+     */
+    content: {
+      flex: 1
+    },
+    // A page is the size of the track on both axes, and that number is measured rather than
+    // named, so it arrives as an inline style instead of from here.
+    page: {
+      overflow: "hidden"
+    },
+    indicator: {
+      alignItems: "center",
+      justifyContent: "center"
+    }
+  }),
+  variantTokens: VARIANT_TOKENS,
+  /**
+   * Every dot takes the same colour. What separates the current one from the rest is its
+   * opacity, animated on the UI thread — so this is a plain style rather than a value the
+   * root has to flatten and hand to a worklet.
+   */
+  paint: (_theme, colors) => ({
+    dot: {
+      backgroundColor: colors.bgSelected
+    }
+  }),
+  variants: {
+    size: {
+      xs: sizeAxis(SIZES.xs),
+      sm: sizeAxis(SIZES.sm),
+      md: sizeAxis(SIZES.md),
+      lg: sizeAxis(SIZES.lg)
+    },
+    orientation: {
+      horizontal: orientationAxis("row"),
+      vertical: orientationAxis("column")
+    }
+  },
+  states: {
+    disabled: theme => ({
+      indicator: {
+        opacity: theme.opacity.disabled
+      }
+    })
+  },
+  defaultVariants: {
+    variant: "primary",
+    size: "md",
+    orientation: "horizontal"
+  }
+});
+
+// src/components/pager/pager-indicator.tsx
+import { jsx as jsx2 } from "react/jsx-runtime";
+var HIT_SLOP = 8;
+var AnimatedPressable = Animated2.createAnimatedComponent(Pressable);
+var PagerIndicator = forwardRef2(function PagerIndicator2({
+  children,
+  style,
+  ...props
+}, ref) {
+  const {
+    indicatorStyle,
+    count
+  } = usePager();
+  const [styleProps, rest] = useStyleProps(props);
+  return /* @__PURE__ */jsx2(View, {
+    ref,
+    ...rest,
+    style: [indicatorStyle, styleProps, style],
+    children: children ?? Array.from({
+      length: count
+    }, (_, index) => /* @__PURE__ */jsx2(PagerDot, {
+      index
+    }, index))
+  });
+});
+PagerIndicator.displayName = "XAUI.Pager.Indicator";
+const _worklet_15861153305546_init_data = {
+  code: "function chunk2SHWOFQVJs2(){const{progressFromOffset,offset,step,count,index,interpolate,DOT_REST_OPACITY}=this.__closure;const distance=Math.abs(progressFromOffset(offset.get(),step,count)-index);const nearness=Math.max(0,1-distance);return{opacity:interpolate(nearness,[0,1],[DOT_REST_OPACITY,1])};}",
+  location: "/home/runner/work/xaui/xaui/packages/native/dist/chunk-2SHWOFQV.js",
+  sourceMap: "{\"version\":3,\"names\":[\"chunk2SHWOFQVJs2\",\"progressFromOffset\",\"offset\",\"step\",\"count\",\"index\",\"interpolate\",\"DOT_REST_OPACITY\",\"__closure\",\"distance\",\"Math\",\"abs\",\"get\",\"nearness\",\"max\",\"opacity\"],\"sources\":[\"/home/runner/work/xaui/xaui/packages/native/dist/chunk-2SHWOFQV.js\"],\"mappings\":\"AA4MkC,SAAAA,gBAAMA,CAAA,QAAAC,kBAAA,CAAAC,MAAA,CAAAC,IAAA,CAAAC,KAAA,CAAAC,KAAA,CAAAC,WAAA,CAAAC,gBAAA,OAAAC,SAAA,CAEpC,KAAM,CAAAC,QAAQ,CAAGC,IAAI,CAACC,GAAG,CAACV,kBAAkB,CAACC,MAAM,CAACU,GAAG,CAAC,CAAC,CAAET,IAAI,CAAEC,KAAK,CAAC,CAAGC,KAAK,CAAC,CAChF,KAAM,CAAAQ,QAAQ,CAAGH,IAAI,CAACI,GAAG,CAAC,CAAC,CAAE,CAAC,CAAGL,QAAQ,CAAC,CAC1C,MAAO,CAAEM,OAAO,CAAET,WAAW,CAACO,QAAQ,CAAE,CAAC,CAAC,CAAE,CAAC,CAAC,CAAE,CAACN,gBAAgB,CAAE,CAAC,CAAC,CAAE,CAAC,CAC1E\",\"ignoreList\":[]}"
+};
+var PagerDot = forwardRef2(function PagerDot2({
+  index,
+  children,
+  style,
+  ...props
+}, ref) {
+  const {
+    dotStyle,
+    offset,
+    step,
+    count,
+    index: current,
+    isDisabled,
+    goTo
+  } = usePager();
+  const [styleProps, rest] = useStyleProps(props);
+  const travel = useAnimatedStyle(function chunk2SHWOFQVJs2Factory({
+    _worklet_15861153305546_init_data,
+    progressFromOffset,
+    offset,
+    step,
+    count,
+    index,
+    interpolate,
+    DOT_REST_OPACITY
+  }) {
+    const _e = [new global.Error(), -8, -27];
+    const chunk2SHWOFQVJs2 = function () {
+      const distance = Math.abs(progressFromOffset(offset.get(), step, count) - index);
+      const nearness = Math.max(0, 1 - distance);
+      return {
+        opacity: interpolate(nearness, [0, 1], [DOT_REST_OPACITY, 1])
+      };
+    };
+    chunk2SHWOFQVJs2.__closure = {
+      progressFromOffset,
+      offset,
+      step,
+      count,
+      index,
+      interpolate,
+      DOT_REST_OPACITY
+    };
+    chunk2SHWOFQVJs2.__workletHash = 15861153305546;
+    chunk2SHWOFQVJs2.__pluginVersion = "0.7.4";
+    chunk2SHWOFQVJs2.__initData = _worklet_15861153305546_init_data;
+    chunk2SHWOFQVJs2.__stackDetails = _e;
+    return chunk2SHWOFQVJs2;
+  }({
+    _worklet_15861153305546_init_data,
+    progressFromOffset,
+    offset,
+    step,
+    count,
+    index,
+    interpolate,
+    DOT_REST_OPACITY
+  }), [offset, step, count, index]);
+  return /* @__PURE__ */jsx2(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, travel, styleProps, style],
+    onPress: () => goTo(index),
+    children
+  });
+});
+PagerDot.displayName = "XAUI.Pager.Dot";
+
+// src/components/pager/pager-page.tsx
+import { forwardRef as forwardRef3 } from "react";
+import { View as View2 } from "react-native";
+import { jsx as jsx3 } from "react/jsx-runtime";
+var PagerPage = forwardRef3(function PagerPage2({
+  children,
+  style,
+  ...props
+}, ref) {
+  const {
+    pageStyle,
+    track
+  } = usePager();
+  const [styleProps, rest] = useStyleProps(props);
+  return /* @__PURE__ */jsx3(View2, {
+    ref,
+    ...rest,
+    style: [pageStyle, {
+      width: track.width,
+      height: track.height
+    }, styleProps, style],
+    children
+  });
+});
+PagerPage.displayName = "XAUI.Pager.Page";
+
+// src/components/pager/pager.tsx
+import { forwardRef as forwardRef4, useCallback, useMemo, useState } from "react";
+import { View as View3 } from "react-native";
+import { useAnimatedRef, useSharedValue as useSharedValue2 } from "react-native-reanimated";
+import { jsx as jsx4 } from "react/jsx-runtime";
+var PagerRoot = forwardRef4(function Pager({
+  children,
+  variant,
+  size,
+  color,
+  orientation = "horizontal",
+  index: indexProp,
+  defaultIndex = 0,
+  onIndexChange,
+  isDisabled = false,
+  style,
+  ...props
+}, ref) {
+  const theme = useXAUITheme();
+  const [styleProps, rest] = useStyleProps(props);
+  const [index, setIndex] = useControllableState({
+    value: indexProp,
+    defaultValue: defaultIndex,
+    onChange: onIndexChange
+  });
+  const [track, setTrack] = useState({
+    width: 0,
+    height: 0
+  });
+  const [count, setCount] = useState(0);
+  const trackRef = useAnimatedRef();
+  const offset = useSharedValue2(0);
+  const selection = {
+    variant,
+    size,
+    orientation
+  };
+  const states = {
+    disabled: isDisabled
+  };
+  const styles = pagerRecipe.resolve({
+    theme,
+    selection,
+    states
+  });
+  const tint = color ? pagerRecipe.tint({
+    theme,
+    color,
+    selection,
+    states
+  }) : void 0;
+  const step = orientation === "horizontal" ? track.width : track.height;
+  const goTo = useCallback(next => {
+    const distance = next * step;
+    trackRef.current?.scrollTo({
+      x: orientation === "horizontal" ? distance : 0,
+      y: orientation === "horizontal" ? 0 : distance,
+      animated: true
+    });
+    setIndex(next);
+  }, [orientation, setIndex, step, trackRef]);
+  const context = useMemo(() => ({
+    contentStyle: styles.content,
+    pageStyle: styles.page,
+    indicatorStyle: styles.indicator,
+    // One colour for every dot; the current one is told apart by its opacity, which the dot
+    // animates itself. Nothing here has to be flattened into a value for a worklet.
+    dotStyle: tint ? [styles.dot, tint.dot] : styles.dot,
+    orientation,
+    index,
+    count,
+    setCount,
+    track,
+    setTrack,
+    step,
+    offset,
+    goTo,
+    onSettle: setIndex,
+    trackRef,
+    isDisabled
+  }), [styles, tint, orientation, index, count, track, setTrack, step, offset, goTo, setIndex, trackRef, isDisabled]);
+  const rootStyle = [styles.root, tint?.root, styleProps, style];
+  return /* @__PURE__ */jsx4(PagerProvider, {
+    value: context,
+    children: /* @__PURE__ */jsx4(View3, {
+      ref,
+      ...rest,
+      style: rootStyle,
+      children
+    })
+  });
+});
+PagerRoot.displayName = "XAUI.Pager.Root";
+
+// src/components/pager/index.ts
+var Pager2 = Object.assign(PagerRoot, {
+  Content: PagerContent,
+  Page: PagerPage,
+  Indicator: PagerIndicator,
+  Dot: PagerDot
+});
+export { usePager, PagerContent, DOT_REST_OPACITY, pagerRecipe, PagerIndicator, PagerDot, PagerPage, PagerRoot, Pager2 as Pager };

package/dist/chunk-3A5RK2R7.js

@@ -0,0 +1,40 @@
+// src/utils/carousel.ts
+function clamp(value, low, high) {
+  "worklet";
+  return Math.min(Math.max(value, low), high);
+}
+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 };
+}
+function indexFromOffset(offset, step, count) {
+  "worklet";
+  if (step <= 0 || count <= 0) return 0;
+  return clamp(Math.round(offset / step), 0, count - 1);
+}
+function progressFromOffset(offset, step, count) {
+  "worklet";
+  if (step <= 0 || count <= 0) return 0;
+  return clamp(offset / step, 0, count - 1);
+}
+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);
+}
+
+export {
+  carouselMetrics,
+  indexFromOffset,
+  progressFromOffset,
+  stepIndex
+};