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

package/dist/chunk-KPKEZWZM.js

@@ -0,0 +1,517 @@
+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_5592363110114_init_data = {
+  code: "function chunkKPKEZWZMJs1(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-KPKEZWZM.js",
+  sourceMap: "{\"version\":3,\"names\":[\"chunkKPKEZWZMJs1\",\"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-KPKEZWZM.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 chunkKPKEZWZMJs1Factory({
+    _worklet_5592363110114_init_data,
+    isHorizontal,
+    offset,
+    indexFromOffset,
+    step,
+    count,
+    settled,
+    runOnJS,
+    onSettle
+  }) {
+    const _e = [new global.Error(), -9, -27];
+    const chunkKPKEZWZMJs1 = 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);
+      }
+    };
+    chunkKPKEZWZMJs1.__closure = {
+      isHorizontal,
+      offset,
+      indexFromOffset,
+      step,
+      count,
+      settled,
+      runOnJS,
+      onSettle
+    };
+    chunkKPKEZWZMJs1.__workletHash = 5592363110114;
+    chunkKPKEZWZMJs1.__pluginVersion = "0.7.4";
+    chunkKPKEZWZMJs1.__initData = _worklet_5592363110114_init_data;
+    chunkKPKEZWZMJs1.__stackDetails = _e;
+    return chunkKPKEZWZMJs1;
+  }({
+    _worklet_5592363110114_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, { interpolateColor, useAnimatedStyle } from "react-native-reanimated";
+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_3999860474786_init_data = {
+  code: "function chunkKPKEZWZMJs2(){const{progressFromOffset,offset,step,count,index,interpolateColor,restColor,active}=this.__closure;const distance=Math.abs(progressFromOffset(offset.get(),step,count)-index);const nearness=Math.max(0,1-distance);return{backgroundColor:interpolateColor(nearness,[0,1],[restColor,active])};}",
+  location: "/home/runner/work/xaui/xaui/packages/native/dist/chunk-KPKEZWZM.js",
+  sourceMap: "{\"version\":3,\"names\":[\"chunkKPKEZWZMJs2\",\"progressFromOffset\",\"offset\",\"step\",\"count\",\"index\",\"interpolateColor\",\"restColor\",\"active\",\"__closure\",\"distance\",\"Math\",\"abs\",\"get\",\"nearness\",\"max\",\"backgroundColor\"],\"sources\":[\"/home/runner/work/xaui/xaui/packages/native/dist/chunk-KPKEZWZM.js\"],\"mappings\":\"AA+HkC,SAAAA,gBAAMA,CAAA,QAAAC,kBAAA,CAAAC,MAAA,CAAAC,IAAA,CAAAC,KAAA,CAAAC,KAAA,CAAAC,gBAAA,CAAAC,SAAA,CAAAC,MAAA,OAAAC,SAAA,CACpC,KAAM,CAAAC,QAAQ,CAAGC,IAAI,CAACC,GAAG,CAACX,kBAAkB,CAACC,MAAM,CAACW,GAAG,CAAC,CAAC,CAAEV,IAAI,CAAEC,KAAK,CAAC,CAAGC,KAAK,CAAC,CAChF,KAAM,CAAAS,QAAQ,CAAGH,IAAI,CAACI,GAAG,CAAC,CAAC,CAAE,CAAC,CAAGL,QAAQ,CAAC,CAC1C,MAAO,CACLM,eAAe,CAAEV,gBAAgB,CAACQ,QAAQ,CAAE,CAAC,CAAC,CAAE,CAAC,CAAC,CAAE,CAACP,SAAS,CAAEC,MAAM,CAAC,CACzE,CAAC,CACH\",\"ignoreList\":[]}"
+};
+var PagerDot = forwardRef2(function PagerDot2({
+  index,
+  children,
+  style,
+  ...props
+}, ref) {
+  const {
+    dotStyle,
+    dotInk,
+    offset,
+    step,
+    count,
+    index: current,
+    isDisabled,
+    goTo
+  } = usePager();
+  const [styleProps, rest] = useStyleProps(props);
+  const {
+    rest: restColor,
+    active
+  } = dotInk;
+  const travel = useAnimatedStyle(function chunkKPKEZWZMJs2Factory({
+    _worklet_3999860474786_init_data,
+    progressFromOffset,
+    offset,
+    step,
+    count,
+    index,
+    interpolateColor,
+    restColor,
+    active
+  }) {
+    const _e = [new global.Error(), -9, -27];
+    const chunkKPKEZWZMJs2 = function () {
+      const distance = Math.abs(progressFromOffset(offset.get(), step, count) - index);
+      const nearness = Math.max(0, 1 - distance);
+      return {
+        backgroundColor: interpolateColor(nearness, [0, 1], [restColor, active])
+      };
+    };
+    chunkKPKEZWZMJs2.__closure = {
+      progressFromOffset,
+      offset,
+      step,
+      count,
+      index,
+      interpolateColor,
+      restColor,
+      active
+    };
+    chunkKPKEZWZMJs2.__workletHash = 3999860474786;
+    chunkKPKEZWZMJs2.__pluginVersion = "0.7.4";
+    chunkKPKEZWZMJs2.__initData = _worklet_3999860474786_init_data;
+    chunkKPKEZWZMJs2.__stackDetails = _e;
+    return chunkKPKEZWZMJs2;
+  }({
+    _worklet_3999860474786_init_data,
+    progressFromOffset,
+    offset,
+    step,
+    count,
+    index,
+    interpolateColor,
+    restColor,
+    active
+  }));
+  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 { StyleSheet, View as View3 } from "react-native";
+import { useAnimatedRef, useSharedValue as useSharedValue2 } from "react-native-reanimated";
+
+// src/components/pager/pager.recipe.ts
+var SLOTS = ["root", "content", "page", "indicator", "dot", "dotActive"];
+var VARIANT_TOKENS = {
+  primary: {
+    bgSelected: "accent"
+  },
+  secondary: {
+    bgSelected: "defaultForeground"
+  },
+  // The raised ground rather than the page's, which on a light theme is white: this is the
+  // pager over a photograph, where an accent dot disappears into whatever is behind it.
+  tertiary: {
+    bgSelected: "surface"
+  }
+};
+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: theme => ({
+    /**
+     * **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"
+    },
+    /**
+     * A neutral fill rather than a faint version of the current one: a pale tint of the
+     * accent under the pages reads as a control that has half failed to load. A raw `color`
+     * reaches the current dot, which is the one it should move.
+     */
+    dot: {
+      backgroundColor: theme.colors.default
+    }
+  }),
+  variantTokens: VARIANT_TOKENS,
+  /**
+   * The current dot, **read as a value and never applied as a style**: the colour is
+   * interpolated on the UI thread, and `interpolateColor` needs a string rather than a
+   * `StyleSheet` id. The root flattens this slot into `dotInk`, so the recipe still owns it.
+   */
+  paint: (_theme, colors) => ({
+    dotActive: {
+      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.tsx
+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(() => {
+    const active = StyleSheet.flatten([styles.dotActive, tint?.dotActive]);
+    const at = StyleSheet.flatten([styles.dot]);
+    return {
+      contentStyle: styles.content,
+      pageStyle: styles.page,
+      indicatorStyle: styles.indicator,
+      dotStyle: styles.dot,
+      // Values rather than styles: the colour is interpolated on the UI thread, and
+      // `interpolateColor` needs strings. The fallbacks are the tokens the recipe named, for
+      // the platform colours `ColorValue` also covers.
+      dotInk: {
+        rest: typeof at.backgroundColor === "string" ? at.backgroundColor : theme.colors.default,
+        active: typeof active.backgroundColor === "string" ? active.backgroundColor : theme.colors.accent
+      },
+      orientation,
+      index,
+      count,
+      setCount,
+      track,
+      setTrack,
+      step,
+      offset,
+      goTo,
+      onSettle: setIndex,
+      trackRef,
+      isDisabled
+    };
+  }, [styles, tint, theme, 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, PagerIndicator, PagerDot, PagerPage, pagerRecipe, PagerRoot, Pager2 as Pager };