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

package/dist/chunk-OPLPLFGK.cjs

@@ -0,0 +1,493 @@
+"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 _chunkSL3V7R2Ycjs = require('./chunk-SL3V7R2Y.cjs');
+var _chunkCDRGTUYFcjs = require('./chunk-CDRGTUYF.cjs');
+var _chunkIIAQISBGcjs = require('./chunk-IIAQISBG.cjs');
+var _chunkTK44VBIEcjs = require('./chunk-TK44VBIE.cjs');
+
+// src/components/pager/pager-content.tsx
+var _react = require('react');
+var _reactnativereanimated = require('react-native-reanimated');
+var _reactnativereanimated2 = _interopRequireDefault(_reactnativereanimated);
+
+// src/components/pager/pager.context.ts
+var [PagerProvider, usePager] = _chunkCDRGTUYFcjs.createSlotContext.call(void 0, "Pager");
+
+// src/components/pager/pager-content.tsx
+var _jsxruntime = require('react/jsx-runtime');
+var PagerContent = _react.forwardRef.call(void 0, function PagerContent2({
+  children,
+  style,
+  onLayout,
+  ...props
+}, ref) {
+  const {
+    contentStyle,
+    orientation,
+    step,
+    track,
+    setTrack,
+    count,
+    setCount,
+    offset,
+    trackRef,
+    isDisabled,
+    onSettle
+  } = usePager();
+  const [styleProps, rest] = _chunkTK44VBIEcjs.useStyleProps.call(void 0, props);
+  const scroller = _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)]);
+    const {
+      width,
+      height
+    } = event.nativeEvent.layout;
+    if (width !== track.width || height !== track.height) setTrack({
+      width,
+      height
+    });
+  };
+  const settled = _reactnativereanimated.useSharedValue.call(void 0, 0);
+  const isHorizontal = orientation === "horizontal";
+  const scroll = _reactnativereanimated.useAnimatedScrollHandler.call(void 0, event => {
+    const travelled = isHorizontal ? event.contentOffset.x : event.contentOffset.y;
+    offset.set(travelled);
+    const next = _chunkFTPPUTWLcjs.indexFromOffset.call(void 0, travelled, 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: 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
+
+var _reactnative = require('react-native');
+
+// 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 = _chunkSL3V7R2Ycjs.createRecipe.call(void 0, {
+  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
+
+var HIT_SLOP = 8;
+var AnimatedPressable = _reactnativereanimated2.default.createAnimatedComponent(_reactnative.Pressable);
+var PagerIndicator = _react.forwardRef.call(void 0, function PagerIndicator2({
+  children,
+  style,
+  ...props
+}, ref) {
+  const {
+    indicatorStyle,
+    count
+  } = usePager();
+  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, PagerDot, {
+      index
+    }, index)))
+  });
+});
+PagerIndicator.displayName = "XAUI.Pager.Indicator";
+const _worklet_9864592886974_init_data = {
+  code: "function chunkOPLPLFGKCjs1(){const{_chunkFTPPUTWLcjs,offset,step,count,index,_reactnativereanimated,DOT_REST_OPACITY}=this.__closure;const distance=Math.abs(_chunkFTPPUTWLcjs.progressFromOffset.call(void 0,offset.get(),step,count)-index);const nearness=Math.max(0,1-distance);return{opacity:_reactnativereanimated.interpolate.call(void 0,nearness,[0,1],[DOT_REST_OPACITY,1])};}",
+  location: "/home/runner/work/xaui/xaui/packages/native/dist/chunk-OPLPLFGK.cjs",
+  sourceMap: "{\"version\":3,\"names\":[\"chunkOPLPLFGKCjs1\",\"_chunkFTPPUTWLcjs\",\"offset\",\"step\",\"count\",\"index\",\"_reactnativereanimated\",\"DOT_REST_OPACITY\",\"__closure\",\"distance\",\"Math\",\"abs\",\"progressFromOffset\",\"call\",\"get\",\"nearness\",\"max\",\"opacity\",\"interpolate\"],\"sources\":[\"/home/runner/work/xaui/xaui/packages/native/dist/chunk-OPLPLFGK.cjs\"],\"mappings\":\"AA4MsE,SAAAA,iBAAMA,CAAA,QAAAC,iBAAA,CAAAC,MAAA,CAAAC,IAAA,CAAAC,KAAA,CAAAC,KAAA,CAAAC,sBAAA,CAAAC,gBAAA,OAAAC,SAAA,CAExE,KAAM,CAAAC,QAAQ,CAAGC,IAAI,CAACC,GAAG,CAACV,iBAAiB,CAACW,kBAAkB,CAACC,IAAI,CAAC,IAAK,EAAC,CAAEX,MAAM,CAACY,GAAG,CAAC,CAAC,CAAEX,IAAI,CAAEC,KAAK,CAAC,CAAGC,KAAK,CAAC,CAC/G,KAAM,CAAAU,QAAQ,CAAGL,IAAI,CAACM,GAAG,CAAC,CAAC,CAAE,CAAC,CAAGP,QAAQ,CAAC,CAC1C,MAAO,CAAEQ,OAAO,CAAEX,sBAAsB,CAACY,WAAW,CAACL,IAAI,CAAC,IAAK,EAAC,CAAEE,QAAQ,CAAE,CAAC,CAAC,CAAE,CAAC,CAAC,CAAE,CAACR,gBAAgB,CAAE,CAAC,CAAC,CAAE,CAAC,CAC9G\",\"ignoreList\":[]}"
+};
+var PagerDot = _react.forwardRef.call(void 0, function PagerDot2({
+  index,
+  children,
+  style,
+  ...props
+}, ref) {
+  const {
+    dotStyle,
+    offset,
+    step,
+    count,
+    index: current,
+    isDisabled,
+    goTo
+  } = usePager();
+  const [styleProps, rest] = _chunkTK44VBIEcjs.useStyleProps.call(void 0, props);
+  const travel = _reactnativereanimated.useAnimatedStyle.call(void 0, function chunkOPLPLFGKCjs1Factory({
+    _worklet_9864592886974_init_data,
+    _chunkFTPPUTWLcjs,
+    offset,
+    step,
+    count,
+    index,
+    _reactnativereanimated,
+    DOT_REST_OPACITY
+  }) {
+    const _e = [new global.Error(), -8, -27];
+    const chunkOPLPLFGKCjs1 = function () {
+      const distance = Math.abs(_chunkFTPPUTWLcjs.progressFromOffset.call(void 0, offset.get(), step, count) - index);
+      const nearness = Math.max(0, 1 - distance);
+      return {
+        opacity: _reactnativereanimated.interpolate.call(void 0, nearness, [0, 1], [DOT_REST_OPACITY, 1])
+      };
+    };
+    chunkOPLPLFGKCjs1.__closure = {
+      _chunkFTPPUTWLcjs,
+      offset,
+      step,
+      count,
+      index,
+      _reactnativereanimated,
+      DOT_REST_OPACITY
+    };
+    chunkOPLPLFGKCjs1.__workletHash = 9864592886974;
+    chunkOPLPLFGKCjs1.__pluginVersion = "0.7.4";
+    chunkOPLPLFGKCjs1.__initData = _worklet_9864592886974_init_data;
+    chunkOPLPLFGKCjs1.__stackDetails = _e;
+    return chunkOPLPLFGKCjs1;
+  }({
+    _worklet_9864592886974_init_data,
+    _chunkFTPPUTWLcjs,
+    offset,
+    step,
+    count,
+    index,
+    _reactnativereanimated,
+    DOT_REST_OPACITY
+  }), [offset, step, count, index]);
+  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, travel, styleProps, style],
+    onPress: () => goTo(index),
+    children
+  });
+});
+PagerDot.displayName = "XAUI.Pager.Dot";
+
+// src/components/pager/pager-page.tsx
+
+var PagerPage = _react.forwardRef.call(void 0, function PagerPage2({
+  children,
+  style,
+  ...props
+}, ref) {
+  const {
+    pageStyle,
+    track
+  } = usePager();
+  const [styleProps, rest] = _chunkTK44VBIEcjs.useStyleProps.call(void 0, props);
+  return /* @__PURE__ */_jsxruntime.jsx.call(void 0, _reactnative.View, {
+    ref,
+    ...rest,
+    style: [pageStyle, {
+      width: track.width,
+      height: track.height
+    }, styleProps, style],
+    children
+  });
+});
+PagerPage.displayName = "XAUI.Pager.Page";
+
+// src/components/pager/pager.tsx
+
+var PagerRoot = _react.forwardRef.call(void 0, function Pager({
+  children,
+  variant,
+  size,
+  color,
+  orientation = "horizontal",
+  index: indexProp,
+  defaultIndex = 0,
+  onIndexChange,
+  isDisabled = false,
+  style,
+  ...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 [track, setTrack] = _react.useState.call(void 0, {
+    width: 0,
+    height: 0
+  });
+  const [count, setCount] = _react.useState.call(void 0, 0);
+  const trackRef = _reactnativereanimated.useAnimatedRef.call(void 0);
+  const offset = _reactnativereanimated.useSharedValue.call(void 0, 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 = _react.useCallback.call(void 0, next => {
+    const distance = next * step;
+    _optionalChain([trackRef, 'access', _3 => _3.current, 'optionalAccess', _4 => _4.scrollTo, 'call', _5 => _5({
+      x: orientation === "horizontal" ? distance : 0,
+      y: orientation === "horizontal" ? 0 : distance,
+      animated: true
+    })]);
+    setIndex(next);
+  }, [orientation, setIndex, step, trackRef]);
+  const context = _react.useMemo.call(void 0, () => ({
+    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, _optionalChain([tint, 'optionalAccess', _6 => _6.root]), styleProps, style];
+  return /* @__PURE__ */_jsxruntime.jsx.call(void 0, PagerProvider, {
+    value: context,
+    children: /* @__PURE__ */_jsxruntime.jsx.call(void 0, _reactnative.View, {
+      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
+});
+exports.usePager = usePager;
+exports.PagerContent = PagerContent;
+exports.DOT_REST_OPACITY = DOT_REST_OPACITY;
+exports.pagerRecipe = pagerRecipe;
+exports.PagerIndicator = PagerIndicator;
+exports.PagerDot = PagerDot;
+exports.PagerPage = PagerPage;
+exports.PagerRoot = PagerRoot;
+exports.Pager = Pager2;