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

package/dist/chunk-G3CCT4EY.js

@@ -0,0 +1,518 @@
+import { useControllableState } from "./chunk-F6W3JQ7K.js";
+import { PressableFeedback } from "./chunk-6UEZJRVI.js";
+import { usePressState } from "./chunk-423RQBOX.js";
+import { createRecipe, radiusAxis } from "./chunk-4GTAZM2C.js";
+import { useXAUITheme } from "./chunk-A3EGFI6T.js";
+import { childrenToString, createSlotContext } from "./chunk-K72UDPVN.js";
+import { useStyleProps } from "./chunk-M63GFNKV.js";
+
+// src/components/tabs/tabs-content.tsx
+import { forwardRef } from "react";
+import { View } from "react-native";
+
+// src/components/tabs/tabs.context.ts
+var [TabsProvider, useTabs] = createSlotContext("Tabs");
+var [TabsTriggerProvider, useTabsTrigger] = createSlotContext("Tabs.Trigger");
+
+// src/components/tabs/tabs-content.tsx
+import { jsx } from "react/jsx-runtime";
+var TabsContent = forwardRef(function TabsContent2({
+  value,
+  children,
+  accessibilityRole = "tab",
+  style,
+  ...props
+}, ref) {
+  const {
+    value: selected
+  } = useTabs();
+  const [styleProps, rest] = useStyleProps(props);
+  if (selected !== value) return null;
+  return /* @__PURE__ */jsx(View, {
+    ref,
+    accessibilityRole,
+    ...rest,
+    style: [styleProps, style],
+    children
+  });
+});
+TabsContent.displayName = "XAUI.Tabs.Content";
+
+// src/components/tabs/tabs-indicator.tsx
+import { useEffect } from "react";
+import Animated, { useAnimatedStyle, useSharedValue, withSpring } from "react-native-reanimated";
+
+// src/components/tabs/tabs.animation.ts
+var INDICATOR_SPRING = {
+  damping: 20,
+  stiffness: 220,
+  mass: 0.6
+};
+
+// src/components/tabs/tabs-indicator.tsx
+import { jsx as jsx2 } from "react/jsx-runtime";
+const _worklet_9378830951522_init_data = {
+  code: "function chunkG3CCT4EYJs1(){const{x,width,hasArrived}=this.__closure;return{transform:[{translateX:x.get()}],width:width.get(),opacity:hasArrived.get()?1:0};}",
+  location: "/home/runner/work/xaui/xaui/packages/native/dist/chunk-G3CCT4EY.js",
+  sourceMap: "{\"version\":3,\"names\":[\"chunkG3CCT4EYJs1\",\"x\",\"width\",\"hasArrived\",\"__closure\",\"transform\",\"translateX\",\"get\",\"opacity\"],\"sources\":[\"/home/runner/work/xaui/xaui/packages/native/dist/chunk-G3CCT4EY.js\"],\"mappings\":\"AAkFkC,SAAAA,iBAAA,QAAAC,CAAA,CAAAC,KAAA,CAAAC,UAAA,OAAAC,SAAA,OAAO,CACrCC,SAAS,CAAE,CAAC,CAAEC,UAAU,CAAEL,CAAC,CAACM,GAAG,CAAC,CAAE,CAAC,CAAC,CACpCL,KAAK,CAAEA,KAAK,CAACK,GAAG,CAAC,CAAC,CAClBC,OAAO,CAAEL,UAAU,CAACI,GAAG,CAAC,CAAC,CAAG,CAAC,CAAG,CAClC,CAAC\",\"ignoreList\":[]}"
+};
+function TabsIndicator({
+  style,
+  ...props
+}) {
+  const {
+    indicatorStyle,
+    value,
+    rects
+  } = useTabs();
+  const [styleProps, rest] = useStyleProps(props);
+  const rect = value === void 0 ? void 0 : rects[value];
+  const x = useSharedValue(rect?.x ?? 0);
+  const width = useSharedValue(rect?.width ?? 0);
+  const hasArrived = useSharedValue(rect !== void 0);
+  useEffect(() => {
+    if (rect === void 0) return;
+    if (hasArrived.get()) {
+      x.set(withSpring(rect.x, INDICATOR_SPRING));
+      width.set(withSpring(rect.width, INDICATOR_SPRING));
+    } else {
+      x.set(rect.x);
+      width.set(rect.width);
+      hasArrived.set(true);
+    }
+  }, [rect, hasArrived, width, x]);
+  const travel = useAnimatedStyle(function chunkG3CCT4EYJs1Factory({
+    _worklet_9378830951522_init_data,
+    x,
+    width,
+    hasArrived
+  }) {
+    const _e = [new global.Error(), -4, -27];
+    const chunkG3CCT4EYJs1 = () => ({
+      transform: [{
+        translateX: x.get()
+      }],
+      width: width.get(),
+      opacity: hasArrived.get() ? 1 : 0
+    });
+    chunkG3CCT4EYJs1.__closure = {
+      x,
+      width,
+      hasArrived
+    };
+    chunkG3CCT4EYJs1.__workletHash = 9378830951522;
+    chunkG3CCT4EYJs1.__pluginVersion = "0.7.4";
+    chunkG3CCT4EYJs1.__initData = _worklet_9378830951522_init_data;
+    chunkG3CCT4EYJs1.__stackDetails = _e;
+    return chunkG3CCT4EYJs1;
+  }({
+    _worklet_9378830951522_init_data,
+    x,
+    width,
+    hasArrived
+  }));
+  return /* @__PURE__ */jsx2(Animated.View, {
+    ...rest,
+    style: [indicatorStyle, travel, styleProps, style]
+  });
+}
+TabsIndicator.displayName = "XAUI.Tabs.Indicator";
+
+// src/components/tabs/tabs-label.tsx
+import { forwardRef as forwardRef2 } from "react";
+import { Text } from "react-native";
+import { jsx as jsx3 } from "react/jsx-runtime";
+var TabsLabel = forwardRef2(function TabsLabel2({
+  children,
+  numberOfLines = 1,
+  style,
+  ...props
+}, ref) {
+  const {
+    labelStyle,
+    labelSelectedStyle
+  } = useTabs();
+  const {
+    isSelected
+  } = useTabsTrigger();
+  const [styleProps, rest] = useStyleProps(props);
+  return /* @__PURE__ */jsx3(Text, {
+    ref,
+    numberOfLines,
+    ...rest,
+    style: [labelStyle, isSelected && labelSelectedStyle, styleProps, style],
+    children
+  });
+});
+TabsLabel.displayName = "XAUI.Tabs.Label";
+
+// src/components/tabs/tabs-list.tsx
+import { forwardRef as forwardRef3 } from "react";
+import { View as View2 } from "react-native";
+import { jsx as jsx4 } from "react/jsx-runtime";
+var TabsList = forwardRef3(function TabsList2({
+  children,
+  accessibilityRole = "tablist",
+  style,
+  ...props
+}, ref) {
+  const {
+    listStyle
+  } = useTabs();
+  const [styleProps, rest] = useStyleProps(props);
+  return /* @__PURE__ */jsx4(View2, {
+    ref,
+    accessibilityRole,
+    ...rest,
+    style: [listStyle, styleProps, style],
+    children
+  });
+});
+TabsList.displayName = "XAUI.Tabs.List";
+
+// src/components/tabs/tabs-trigger.tsx
+import { forwardRef as forwardRef4, useCallback, useMemo } from "react";
+import { jsx as jsx5 } from "react/jsx-runtime";
+var TabsTrigger = forwardRef4(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] = useStyleProps(props);
+  const [isPressed, press] = usePressState({
+    onPressIn,
+    onPressOut
+  });
+  const isSelected = selected === value;
+  const disabled = isRootDisabled || isDisabled;
+  const measure = useCallback(event => {
+    onLayout?.(event);
+    const {
+      x,
+      width
+    } = event.nativeEvent.layout;
+    setRect(value, {
+      x,
+      width
+    });
+  }, [onLayout, setRect, value]);
+  const handlePress = useCallback(event => {
+    onPress?.(event);
+    select(value);
+  }, [onPress, select, value]);
+  const context = useMemo(() => ({
+    isSelected,
+    isPressed,
+    isDisabled: disabled
+  }), [isSelected, isPressed, disabled]);
+  const text = typeof children === "function" ? null : childrenToString(children);
+  return /* @__PURE__ */jsx5(TabsTriggerProvider, {
+    value: context,
+    children: /* @__PURE__ */jsx5(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__ */
+      jsx5(TabsLabel, {
+        children: text
+      }) : children
+    })
+  });
+});
+TabsTrigger.displayName = "XAUI.Tabs.Trigger";
+
+// src/components/tabs/tabs.tsx
+import { forwardRef as forwardRef5, useCallback as useCallback2, useMemo as useMemo2, useState } from "react";
+import { StyleSheet, View as View3 } from "react-native";
+
+// 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 = createRecipe({
+  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: radiusAxis("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
+import { jsx as jsx6 } from "react/jsx-runtime";
+var TabsRoot = forwardRef5(function Tabs({
+  children,
+  variant,
+  size,
+  radius,
+  color,
+  value: controlledValue,
+  defaultValue,
+  onValueChange,
+  isDisabled = false,
+  style,
+  ...props
+}, ref) {
+  const theme = useXAUITheme();
+  const [styleProps, rest] = useStyleProps(props);
+  const [rects, setRects] = useState({});
+  const [value, setValue] = useControllableState({
+    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 = useCallback2(next => setValue(next), [setValue]);
+  const setRect = useCallback2((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 = useMemo2(() => {
+    const selected = StyleSheet.flatten([styles.content, tint?.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: variant ?? "primary",
+      value,
+      isDisabled,
+      select,
+      rects,
+      setRect
+    };
+  }, [styles, tint, variant, value, isDisabled, select, rects, setRect]);
+  return /* @__PURE__ */jsx6(TabsProvider, {
+    value: context,
+    children: /* @__PURE__ */jsx6(View3, {
+      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
+});
+export { useTabs, useTabsTrigger, TabsContent, TabsIndicator, TabsLabel, TabsList, TabsTrigger, tabsRecipe, TabsRoot, Tabs2 as Tabs };