@xaui/native 0.9.1-alpha.40 → 0.9.1-alpha.41

package/dist/chunk-VLKBESEV.cjs

@@ -0,0 +1,407 @@
+"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 _chunk7EIHHOHPcjs = require('./chunk-7EIHHOHP.cjs');
+
+
+var _chunk3E7CDKFOcjs = require('./chunk-3E7CDKFO.cjs');
+
+
+var _chunk7DPL3ZDScjs = require('./chunk-7DPL3ZDS.cjs');
+
+
+
+var _chunkFNEUOBCVcjs = require('./chunk-FNEUOBCV.cjs');
+
+
+var _chunk57SJ4LJFcjs = require('./chunk-57SJ4LJF.cjs');
+
+
+
+var _chunk7GHM4GKLcjs = require('./chunk-7GHM4GKL.cjs');
+
+
+var _chunkTK44VBIEcjs = require('./chunk-TK44VBIE.cjs');
+
+// src/components/tabs/tabs-content.tsx
+var _react = require('react');
+var _reactnative = require('react-native');
+
+// src/components/tabs/tabs.context.ts
+var [TabsProvider, useTabs] = _chunk7GHM4GKLcjs.createSlotContext.call(void 0, "Tabs");
+var [TabsTriggerProvider, useTabsTrigger] = _chunk7GHM4GKLcjs.createSlotContext.call(void 0, "Tabs.Trigger");
+
+// src/components/tabs/tabs-content.tsx
+var _jsxruntime = require('react/jsx-runtime');
+var TabsContent = _react.forwardRef.call(void 0, function TabsContent2({ value, children, accessibilityRole = "tab", style, ...props }, ref) {
+  const { value: selected } = useTabs();
+  const [styleProps, rest] = _chunkTK44VBIEcjs.useStyleProps.call(void 0, props);
+  if (selected !== value) return null;
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    _reactnative.View,
+    {
+      ref,
+      accessibilityRole,
+      ...rest,
+      style: [styleProps, style],
+      children
+    }
+  );
+});
+TabsContent.displayName = "XAUI.Tabs.Content";
+
+// src/components/tabs/tabs-indicator.tsx
+
+
+
+
+
+var _reactnativereanimated = require('react-native-reanimated'); var _reactnativereanimated2 = _interopRequireDefault(_reactnativereanimated);
+
+// src/components/tabs/tabs.animation.ts
+var INDICATOR_SPRING = { damping: 20, stiffness: 220, mass: 0.6 };
+
+// src/components/tabs/tabs-indicator.tsx
+
+function TabsIndicator({ style, ...props }) {
+  const { indicatorStyle, value, rects } = useTabs();
+  const [styleProps, rest] = _chunkTK44VBIEcjs.useStyleProps.call(void 0, props);
+  const rect = value === void 0 ? void 0 : rects[value];
+  const x = _reactnativereanimated.useSharedValue.call(void 0, _nullishCoalesce(_optionalChain([rect, 'optionalAccess', _ => _.x]), () => ( 0)));
+  const width = _reactnativereanimated.useSharedValue.call(void 0, _nullishCoalesce(_optionalChain([rect, 'optionalAccess', _2 => _2.width]), () => ( 0)));
+  const hasArrived = _reactnativereanimated.useSharedValue.call(void 0, rect !== void 0);
+  _react.useEffect.call(void 0, () => {
+    if (rect === void 0) return;
+    if (hasArrived.get()) {
+      x.set(_reactnativereanimated.withSpring.call(void 0, rect.x, INDICATOR_SPRING));
+      width.set(_reactnativereanimated.withSpring.call(void 0, rect.width, INDICATOR_SPRING));
+    } else {
+      x.set(rect.x);
+      width.set(rect.width);
+      hasArrived.set(true);
+    }
+  }, [rect, hasArrived, width, x]);
+  const travel = _reactnativereanimated.useAnimatedStyle.call(void 0, () => ({
+    transform: [{ translateX: x.get() }],
+    width: width.get(),
+    opacity: hasArrived.get() ? 1 : 0
+  }));
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _reactnativereanimated2.default.View, { ...rest, style: [indicatorStyle, travel, styleProps, style] });
+}
+TabsIndicator.displayName = "XAUI.Tabs.Indicator";
+
+// src/components/tabs/tabs-label.tsx
+
+
+
+var TabsLabel = _react.forwardRef.call(void 0, function TabsLabel2({ children, numberOfLines = 1, style, ...props }, ref) {
+  const { labelStyle, labelSelectedStyle } = useTabs();
+  const { isSelected } = useTabsTrigger();
+  const [styleProps, rest] = _chunkTK44VBIEcjs.useStyleProps.call(void 0, props);
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    _reactnative.Text,
+    {
+      ref,
+      numberOfLines,
+      ...rest,
+      style: [labelStyle, isSelected && labelSelectedStyle, styleProps, style],
+      children
+    }
+  );
+});
+TabsLabel.displayName = "XAUI.Tabs.Label";
+
+// src/components/tabs/tabs-list.tsx
+
+
+
+var TabsList = _react.forwardRef.call(void 0, function TabsList2({ children, accessibilityRole = "tablist", style, ...props }, ref) {
+  const { listStyle } = useTabs();
+  const [styleProps, rest] = _chunkTK44VBIEcjs.useStyleProps.call(void 0, props);
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    _reactnative.View,
+    {
+      ref,
+      accessibilityRole,
+      ...rest,
+      style: [listStyle, styleProps, style],
+      children
+    }
+  );
+});
+TabsList.displayName = "XAUI.Tabs.List";
+
+// src/components/tabs/tabs-trigger.tsx
+
+
+var TabsTrigger = _react.forwardRef.call(void 0, function TabsTrigger2({
+  value,
+  children,
+  isDisabled = false,
+  asChild = false,
+  accessibilityRole = "tab",
+  accessibilityState,
+  style,
+  onLayout,
+  onPress,
+  onPressIn,
+  onPressOut,
+  ...props
+}, ref) {
+  const {
+    triggerStyle,
+    value: selected,
+    isDisabled: isRootDisabled,
+    select,
+    setRect
+  } = useTabs();
+  const [styleProps, rest] = _chunkTK44VBIEcjs.useStyleProps.call(void 0, props);
+  const [isPressed, press] = _chunk7DPL3ZDScjs.usePressState.call(void 0, { onPressIn, onPressOut });
+  const isSelected = selected === value;
+  const disabled = isRootDisabled || isDisabled;
+  const measure = _react.useCallback.call(void 0, 
+    (event) => {
+      _optionalChain([onLayout, 'optionalCall', _3 => _3(event)]);
+      const { x, width } = event.nativeEvent.layout;
+      setRect(value, { x, width });
+    },
+    [onLayout, setRect, value]
+  );
+  const handlePress = _react.useCallback.call(void 0, 
+    (event) => {
+      _optionalChain([onPress, 'optionalCall', _4 => _4(event)]);
+      select(value);
+    },
+    [onPress, select, value]
+  );
+  const context = _react.useMemo.call(void 0, 
+    () => ({ isSelected, isPressed, isDisabled: disabled }),
+    [isSelected, isPressed, disabled]
+  );
+  const text = typeof children === "function" ? null : _chunk7GHM4GKLcjs.childrenToString.call(void 0, children);
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, TabsTriggerProvider, { value: context, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    _chunk3E7CDKFOcjs.PressableFeedback,
+    {
+      ref,
+      isPressed,
+      isDisabled: disabled,
+      asChild,
+      accessibilityRole,
+      accessibilityState: {
+        disabled,
+        selected: isSelected,
+        ...accessibilityState
+      },
+      ...rest,
+      onLayout: measure,
+      style: [
+        triggerStyle,
+        styleProps,
+        typeof style === "function" ? style({ pressed: isPressed }) : style
+      ],
+      onPress: handlePress,
+      onPressIn: press.onPressIn,
+      onPressOut: press.onPressOut,
+      children: typeof children === "function" ? children(context) : text !== null ? (
+        // R3 — a stringifiable tab becomes its label, which is what makes the common
+        // case `<Tabs.Trigger value="all">Tout</Tabs.Trigger>`.
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, TabsLabel, { children: text })
+      ) : children
+    }
+  ) });
+});
+TabsTrigger.displayName = "XAUI.Tabs.Trigger";
+
+// src/components/tabs/tabs.tsx
+
+
+
+// src/components/tabs/tabs.recipe.ts
+var SLOTS = ["root", "list", "trigger", "label", "indicator", "content"];
+var VARIANT_TOKENS = {
+  primary: { bg: "default", bgSelected: "segment", fgSelected: "segmentForeground" },
+  secondary: { bgSelected: "accent", fgSelected: "foreground" },
+  // The accent rather than the foreground: with nothing else moving, the colour is the
+  // whole signal, and a chosen tab in plain ink reads as one that is merely darker.
+  light: { fgSelected: "accent" }
+};
+var SIZES = {
+  sm: { paddingHorizontal: 2.5, paddingVertical: 1, gap: 1, label: "sm" },
+  md: { paddingHorizontal: 3, paddingVertical: 1.5, gap: 1.5, label: "md" },
+  lg: { paddingHorizontal: 4, paddingVertical: 2, gap: 2, label: "lg" }
+};
+var TRACK_INSET = 3;
+function sizeAxis(step) {
+  const { paddingHorizontal, paddingVertical, gap, label } = step;
+  return (theme) => ({
+    trigger: {
+      paddingHorizontal: theme.spacing(paddingHorizontal),
+      paddingVertical: theme.spacing(paddingVertical),
+      gap: theme.spacing(gap)
+    },
+    label: {
+      fontSize: theme.fontSizes[label],
+      lineHeight: theme.lineHeights[label]
+    }
+  });
+}
+var tabsRecipe = _chunkFNEUOBCVcjs.createRecipe.call(void 0, {
+  slots: SLOTS,
+  base: (theme) => ({
+    root: { flexDirection: "column", gap: theme.spacing(2) },
+    list: {
+      // Hugs its tabs rather than filling the row. A tab bar as wide as the screen with
+      // three tabs in it is a segmented control pretending to be a navigation bar.
+      alignSelf: "flex-start",
+      flexDirection: "row",
+      alignItems: "center",
+      borderCurve: "continuous"
+    },
+    trigger: {
+      flexDirection: "row",
+      alignItems: "center",
+      justifyContent: "center"
+    },
+    label: {
+      fontFamily: theme.fontFamilies.body,
+      fontWeight: theme.fontWeights.medium,
+      color: theme.colors.muted
+    },
+    // Behind the triggers, not over them: it is the surface the chosen tab sits on.
+    indicator: { position: "absolute", zIndex: 0, borderCurve: "continuous" }
+  }),
+  variantTokens: VARIANT_TOKENS,
+  paint: (_theme, colors) => ({
+    list: { backgroundColor: colors.bg },
+    indicator: { backgroundColor: colors.bgSelected },
+    // Read by the root and handed to the chosen trigger's label alone, which is why it is
+    // on a slot the recipe otherwise leaves to `muted`.
+    content: { color: colors.fgSelected }
+  }),
+  variants: {
+    size: {
+      sm: sizeAxis(SIZES.sm),
+      md: sizeAxis(SIZES.md),
+      lg: sizeAxis(SIZES.lg)
+    },
+    radius: _chunkFNEUOBCVcjs.radiusAxis.call(void 0, "list", "indicator")
+  },
+  /**
+   * Where the shapes differ, and `light` is absent on purpose: the base gives the list no
+   * padding, no corner and no edge, so a shape that adds none of them is the base itself.
+   * `primary` is a pill inside a filled track, so the track is padded and both corners are
+   * round; `secondary` is a rule along a bottom edge, so the track carries a hairline and
+   * the indicator is that rule.
+   */
+  compoundVariants: [
+    {
+      when: { variant: "primary" },
+      style: (theme) => ({
+        list: { padding: TRACK_INSET, borderRadius: theme.radius["3xl"] },
+        indicator: {
+          top: TRACK_INSET,
+          bottom: TRACK_INSET,
+          borderRadius: theme.radius["3xl"],
+          ...theme.shadows.surface
+        }
+      })
+    },
+    {
+      when: { variant: "secondary" },
+      style: (theme) => ({
+        list: {
+          borderBottomWidth: theme.borderWidth.default,
+          borderColor: theme.colors.border
+        },
+        // Two points rather than a hairline: a rule that says which tab is chosen has to
+        // outweigh the one it sits on.
+        indicator: { bottom: 0, height: 2, borderRadius: 0 }
+      })
+    }
+  ],
+  states: {
+    disabled: (theme) => ({ list: { opacity: theme.opacity.disabled } })
+  },
+  defaultVariants: { variant: "primary", size: "md" }
+});
+
+// src/components/tabs/tabs.tsx
+
+var TabsRoot = _react.forwardRef.call(void 0, function Tabs({
+  children,
+  variant,
+  size,
+  radius,
+  color,
+  value: controlledValue,
+  defaultValue,
+  onValueChange,
+  isDisabled = false,
+  style,
+  ...props
+}, ref) {
+  const theme = _chunk57SJ4LJFcjs.useXAUITheme.call(void 0, );
+  const [styleProps, rest] = _chunkTK44VBIEcjs.useStyleProps.call(void 0, props);
+  const [rects, setRects] = _react.useState.call(void 0, {});
+  const [value, setValue] = _chunk7EIHHOHPcjs.useControllableState.call(void 0, {
+    value: controlledValue,
+    defaultValue,
+    onChange: onValueChange
+  });
+  const selection = { variant, size, radius };
+  const styles = tabsRecipe.resolve({
+    theme,
+    selection,
+    states: { disabled: isDisabled }
+  });
+  const tint = color ? tabsRecipe.tint({ theme, color, selection }) : void 0;
+  const select = _react.useCallback.call(void 0, (next) => setValue(next), [setValue]);
+  const setRect = _react.useCallback.call(void 0, (tab, rect) => {
+    setRects((current) => {
+      const previous = current[tab];
+      if (previous && previous.x === rect.x && previous.width === rect.width)
+        return current;
+      return { ...current, [tab]: rect };
+    });
+  }, []);
+  const context = _react.useMemo.call(void 0, () => {
+    const selected = _reactnative.StyleSheet.flatten([styles.content, _optionalChain([tint, 'optionalAccess', _5 => _5.content])]);
+    return {
+      listStyle: tint ? [styles.list, tint.list] : styles.list,
+      triggerStyle: styles.trigger,
+      labelStyle: styles.label,
+      labelSelectedStyle: { color: selected.color },
+      indicatorStyle: tint ? [styles.indicator, tint.indicator] : styles.indicator,
+      contentStyle: void 0,
+      variant: _nullishCoalesce(variant, () => ( "primary")),
+      value,
+      isDisabled,
+      select,
+      rects,
+      setRect
+    };
+  }, [styles, tint, variant, value, isDisabled, select, rects, setRect]);
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, TabsProvider, { value: context, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _reactnative.View, { ref, ...rest, style: [styles.root, styleProps, style], children }) });
+});
+TabsRoot.displayName = "XAUI.Tabs.Root";
+
+// src/components/tabs/index.ts
+var Tabs2 = Object.assign(TabsRoot, {
+  List: TabsList,
+  Trigger: TabsTrigger,
+  Label: TabsLabel,
+  Indicator: TabsIndicator,
+  Content: TabsContent
+});
+
+
+
+
+
+
+
+
+
+
+
+
+exports.useTabs = useTabs; exports.useTabsTrigger = useTabsTrigger; exports.TabsContent = TabsContent; exports.TabsIndicator = TabsIndicator; exports.TabsLabel = TabsLabel; exports.TabsList = TabsList; exports.TabsTrigger = TabsTrigger; exports.tabsRecipe = tabsRecipe; exports.TabsRoot = TabsRoot; exports.Tabs = Tabs2;

package/dist/components/tabs/index.cjs

@@ -0,0 +1,33 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});
+
+
+
+
+
+
+
+
+
+
+var _chunkVLKBESEVcjs = require('../../chunk-VLKBESEV.cjs');
+require('../../chunk-7EIHHOHP.cjs');
+require('../../chunk-3E7CDKFO.cjs');
+require('../../chunk-7DPL3ZDS.cjs');
+require('../../chunk-EJQCQPET.cjs');
+require('../../chunk-FNEUOBCV.cjs');
+require('../../chunk-57SJ4LJF.cjs');
+require('../../chunk-7GHM4GKL.cjs');
+require('../../chunk-H4E4HDEP.cjs');
+require('../../chunk-TK44VBIE.cjs');
+
+
+
+
+
+
+
+
+
+
+
+exports.Tabs = _chunkVLKBESEVcjs.Tabs; exports.TabsContent = _chunkVLKBESEVcjs.TabsContent; exports.TabsIndicator = _chunkVLKBESEVcjs.TabsIndicator; exports.TabsLabel = _chunkVLKBESEVcjs.TabsLabel; exports.TabsList = _chunkVLKBESEVcjs.TabsList; exports.TabsRoot = _chunkVLKBESEVcjs.TabsRoot; exports.TabsTrigger = _chunkVLKBESEVcjs.TabsTrigger; exports.tabsRecipe = _chunkVLKBESEVcjs.tabsRecipe; exports.useTabs = _chunkVLKBESEVcjs.useTabs; exports.useTabsTrigger = _chunkVLKBESEVcjs.useTabsTrigger;