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

package/dist/chunk-5VKYNBNA.js

@@ -0,0 +1,607 @@
+import {
+  useAnchorRef
+} from "./chunk-734MFAX4.js";
+import {
+  useAnchoredPosition
+} from "./chunk-2EGR4LWD.js";
+import {
+  Portal
+} from "./chunk-2PMXMKS5.js";
+import {
+  anchoredEntering,
+  anchoredExiting,
+  overlayEntering,
+  overlayExiting
+} from "./chunk-64MXEVT3.js";
+import {
+  useMergedRef
+} from "./chunk-NCTOTTVW.js";
+import {
+  IconContext
+} from "./chunk-FHUYHV6J.js";
+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 {
+  createSlotContext
+} from "./chunk-K72UDPVN.js";
+import {
+  useStyleProps
+} from "./chunk-M63GFNKV.js";
+
+// src/components/menu/menu-content.tsx
+import { forwardRef } from "react";
+import Animated from "react-native-reanimated";
+
+// src/components/menu/menu.recipe.ts
+import { StyleSheet } from "react-native";
+var SLOTS = [
+  "trigger",
+  "overlay",
+  "content",
+  "label",
+  "separator",
+  "group",
+  "item",
+  "itemTitle",
+  "itemDescription",
+  "itemIndicator"
+];
+var VARIANT_TOKENS = {
+  default: { fg: "overlayForeground" },
+  danger: { fg: "danger" }
+};
+function menuMeasure(fontSize) {
+  return fontSize * 15;
+}
+var PANEL_PADDING_HORIZONTAL = 1.5;
+var PANEL_PADDING_VERTICAL = 3;
+var ITEM_PADDING_HORIZONTAL = 2.5;
+var ITEM_PADDING_VERTICAL = 2;
+var ITEM_GAP = 2.5;
+var LABEL_INSET = 3;
+var INDICATOR = 5;
+var HAIRLINE = StyleSheet.hairlineWidth;
+var menuRecipe = createRecipe({
+  slots: SLOTS,
+  base: (theme) => ({
+    overlay: { position: "absolute", top: 0, bottom: 0, start: 0, end: 0 },
+    content: {
+      position: "absolute",
+      backgroundColor: theme.colors.overlay,
+      paddingHorizontal: theme.spacing(PANEL_PADDING_HORIZONTAL),
+      paddingVertical: theme.spacing(PANEL_PADDING_VERTICAL),
+      // Their `--radius-3xl` on a base of 8 is 24; our base is 12, so the same 24 is `2xl`.
+      borderRadius: theme.radius["2xl"],
+      borderCurve: "continuous",
+      ...theme.shadows.overlay
+    },
+    label: {
+      fontFamily: theme.fontFamilies.body,
+      fontWeight: theme.fontWeights.medium,
+      fontSize: theme.fontSizes.sm,
+      lineHeight: theme.lineHeights.sm,
+      color: theme.colors.muted,
+      // Inset to the row's own text rather than to the panel: a heading that starts
+      // before the rows it heads reads as a heading for the panel.
+      marginStart: theme.spacing(LABEL_INSET),
+      paddingVertical: theme.spacing(1)
+    },
+    /**
+     * A rule between two runs of rows, placed by the caller rather than drawn between
+     * every pair. A menu of four related actions wants none; a menu whose last row is
+     * "Supprimer" wants exactly one, above it.
+     *
+     * It runs the panel's full inner width rather than lining up with the rows' text: a
+     * separator inset to the titles reads as belonging to the row under it, and this one
+     * belongs to neither.
+     */
+    separator: {
+      height: HAIRLINE,
+      backgroundColor: theme.colors.separator,
+      marginVertical: theme.spacing(1),
+      marginHorizontal: -theme.spacing(PANEL_PADDING_HORIZONTAL)
+    },
+    group: { flexDirection: "column" },
+    item: {
+      flexDirection: "row",
+      alignItems: "center",
+      gap: theme.spacing(ITEM_GAP),
+      paddingHorizontal: theme.spacing(ITEM_PADDING_HORIZONTAL),
+      paddingVertical: theme.spacing(ITEM_PADDING_VERTICAL),
+      borderRadius: theme.radius.lg,
+      borderCurve: "continuous"
+    },
+    itemTitle: {
+      fontFamily: theme.fontFamilies.body,
+      fontWeight: theme.fontWeights.medium,
+      fontSize: theme.fontSizes.md,
+      lineHeight: theme.lineHeights.md,
+      // Grows into the row so an indicator stays pinned to the end, whatever the label's
+      // length — but from its **content** size rather than from zero.
+      //
+      // `flex: 1` is `flexBasis: 0`, and the panel is measured before it has a width: with
+      // a basis of zero and no definite width to grow into, the row's content size is
+      // nothing and the title collapses. The whole menu measured as a 70-point capsule
+      // with no text in it. HeroUI writes `flex: 1` here and gets away with it because
+      // their measuring pass hands the panel a definite width; ours asks the panel how
+      // wide it wants to be, which is a question a zero basis cannot answer.
+      flexGrow: 1,
+      flexShrink: 1,
+      flexBasis: "auto"
+    },
+    itemDescription: {
+      fontFamily: theme.fontFamilies.body,
+      fontSize: theme.fontSizes.sm,
+      lineHeight: theme.lineHeights.sm,
+      color: theme.colors.muted
+    },
+    itemIndicator: {
+      width: theme.spacing(INDICATOR),
+      height: theme.spacing(INDICATOR),
+      alignItems: "center",
+      justifyContent: "center"
+    }
+  }),
+  variantTokens: VARIANT_TOKENS,
+  /** The variant paints the row's text and nothing else. The panel is the theme's. */
+  paint: (_theme, colors) => ({
+    itemTitle: { color: colors.fg },
+    itemIndicator: { color: colors.fg }
+  }),
+  variants: { radius: radiusAxis("content") },
+  states: {
+    pressed: (theme) => ({
+      item: { backgroundColor: theme.colors.defaultSoftPressed }
+    }),
+    disabled: (theme) => ({ trigger: { opacity: theme.opacity.disabled } })
+  },
+  defaultVariants: { variant: "default" }
+});
+
+// src/components/menu/menu.context.ts
+var [MenuProvider, useMenu] = createSlotContext("Menu");
+var [MenuItemProvider, useMenuItem] = createSlotContext("Menu.Item");
+
+// src/components/menu/menu-content.tsx
+import { jsx } from "react/jsx-runtime";
+var DEFAULT_OFFSET = 6;
+var DEFAULT_INSETS = {
+  top: 12,
+  bottom: 12,
+  start: 12,
+  end: 12
+};
+var MenuContent = forwardRef(function MenuContent2({
+  children,
+  placement = "bottom",
+  align = "center",
+  width = "content-fit",
+  offset = DEFAULT_OFFSET,
+  alignOffset = 0,
+  avoidCollisions = true,
+  insets,
+  style,
+  onLayout,
+  ...props
+}, ref) {
+  const context = useMenu();
+  const { contentStyle, isOpen, anchor } = context;
+  const [styleProps, rest] = useStyleProps(props);
+  const theme = useXAUITheme();
+  const { position, onContentLayout, measuringStyle } = useAnchoredPosition({
+    anchor,
+    isOpen,
+    placement,
+    align,
+    width,
+    offset,
+    alignOffset,
+    avoidCollisions,
+    insets: { ...DEFAULT_INSETS, ...insets },
+    maxWidth: menuMeasure(theme.fontSizes.md),
+    onLayout
+  });
+  if (!isOpen || anchor === null) return null;
+  return /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsx(MenuProvider, { value: context, children: /* @__PURE__ */ jsx(
+    Animated.View,
+    {
+      ref,
+      entering: position ? anchoredEntering(position.placement) : void 0,
+      exiting: position ? anchoredExiting(position.placement) : void 0,
+      onLayout: onContentLayout,
+      ...rest,
+      style: [
+        contentStyle,
+        position === null ? measuringStyle : {
+          top: position.top,
+          start: position.start,
+          width: position.width,
+          maxHeight: position.maxHeight
+        },
+        styleProps,
+        style
+      ],
+      children
+    },
+    position?.placement ?? "measuring"
+  ) }) });
+});
+MenuContent.displayName = "XAUI.Menu.Content";
+
+// src/components/menu/menu-group.tsx
+import { forwardRef as forwardRef2 } from "react";
+import { View } from "react-native";
+import { jsx as jsx2 } from "react/jsx-runtime";
+var MenuGroup = forwardRef2(function MenuGroup2({ children, accessibilityRole = "menu", style, ...props }, ref) {
+  const { groupStyle } = useMenu();
+  const [styleProps, rest] = useStyleProps(props);
+  return /* @__PURE__ */ jsx2(
+    View,
+    {
+      ref,
+      accessibilityRole,
+      ...rest,
+      style: [groupStyle, styleProps, style],
+      children
+    }
+  );
+});
+MenuGroup.displayName = "XAUI.Menu.Group";
+
+// src/components/menu/menu-item.tsx
+import { forwardRef as forwardRef3, useCallback, useMemo } from "react";
+import { jsx as jsx3 } from "react/jsx-runtime";
+var MenuItem = forwardRef3(function MenuItem2({
+  variant = "default",
+  children,
+  isDisabled = false,
+  closesOnPress = true,
+  asChild = false,
+  accessibilityRole = "menuitem",
+  accessibilityState,
+  style,
+  onPress,
+  onPressIn,
+  onPressOut,
+  ...props
+}, ref) {
+  const { itemStyle, itemPressedStyle, glyph, close } = useMenu();
+  const [styleProps, rest] = useStyleProps(props);
+  const [isPressed, press] = usePressState({ onPressIn, onPressOut });
+  const handlePress = useCallback(
+    (event) => {
+      onPress?.(event);
+      if (closesOnPress) close();
+    },
+    [close, closesOnPress, onPress]
+  );
+  const context = useMemo(
+    () => ({ variant, isPressed, isDisabled }),
+    [variant, isPressed, isDisabled]
+  );
+  return /* @__PURE__ */ jsx3(MenuItemProvider, { value: context, children: /* @__PURE__ */ jsx3(IconContext.Provider, { value: glyph[variant], children: /* @__PURE__ */ jsx3(
+    PressableFeedback,
+    {
+      ref,
+      isPressed,
+      isDisabled,
+      asChild,
+      accessibilityRole,
+      accessibilityState: { disabled: isDisabled, ...accessibilityState },
+      ...rest,
+      style: [
+        itemStyle,
+        isPressed && itemPressedStyle,
+        styleProps,
+        typeof style === "function" ? style({ pressed: isPressed }) : style
+      ],
+      onPress: handlePress,
+      onPressIn: press.onPressIn,
+      onPressOut: press.onPressOut,
+      children: typeof children === "function" ? children(context) : children
+    }
+  ) }) });
+});
+MenuItem.displayName = "XAUI.Menu.Item";
+
+// src/components/menu/menu-item-description.tsx
+import { forwardRef as forwardRef4 } from "react";
+import { Text } from "react-native";
+import { jsx as jsx4 } from "react/jsx-runtime";
+var MenuItemDescription = forwardRef4(
+  function MenuItemDescription2({ children, style, ...props }, ref) {
+    const { itemDescriptionStyle } = useMenu();
+    const [styleProps, rest] = useStyleProps(props);
+    return /* @__PURE__ */ jsx4(Text, { ref, ...rest, style: [itemDescriptionStyle, styleProps, style], children });
+  }
+);
+MenuItemDescription.displayName = "XAUI.Menu.ItemDescription";
+
+// src/components/menu/menu-item-indicator.tsx
+import { forwardRef as forwardRef5 } from "react";
+import { View as View2 } from "react-native";
+import { jsx as jsx5 } from "react/jsx-runtime";
+var MenuItemIndicator = forwardRef5(
+  function MenuItemIndicator2({ children, style, ...props }, ref) {
+    const { itemIndicatorStyle } = useMenu();
+    const [styleProps, rest] = useStyleProps(props);
+    return /* @__PURE__ */ jsx5(View2, { ref, ...rest, style: [itemIndicatorStyle, styleProps, style], children });
+  }
+);
+MenuItemIndicator.displayName = "XAUI.Menu.ItemIndicator";
+
+// src/components/menu/menu-item-title.tsx
+import { forwardRef as forwardRef6 } from "react";
+import { Text as Text2 } from "react-native";
+import { jsx as jsx6 } from "react/jsx-runtime";
+var MenuItemTitle = forwardRef6(
+  function MenuItemTitle2({ children, numberOfLines = 1, style, ...props }, ref) {
+    const { itemTitleStyle } = useMenu();
+    const { variant } = useMenuItem();
+    const [styleProps, rest] = useStyleProps(props);
+    return /* @__PURE__ */ jsx6(
+      Text2,
+      {
+        ref,
+        numberOfLines,
+        ...rest,
+        style: [itemTitleStyle[variant], styleProps, style],
+        children
+      }
+    );
+  }
+);
+MenuItemTitle.displayName = "XAUI.Menu.ItemTitle";
+
+// src/components/menu/menu-label.tsx
+import { forwardRef as forwardRef7 } from "react";
+import { Text as Text3 } from "react-native";
+import { jsx as jsx7 } from "react/jsx-runtime";
+var MenuLabel = forwardRef7(function MenuLabel2({ children, accessibilityRole = "header", style, ...props }, ref) {
+  const { labelStyle } = useMenu();
+  const [styleProps, rest] = useStyleProps(props);
+  return /* @__PURE__ */ jsx7(
+    Text3,
+    {
+      ref,
+      accessibilityRole,
+      ...rest,
+      style: [labelStyle, styleProps, style],
+      children
+    }
+  );
+});
+MenuLabel.displayName = "XAUI.Menu.Label";
+
+// src/components/menu/menu-separator.tsx
+import { forwardRef as forwardRef8 } from "react";
+import { View as View3 } from "react-native";
+import { jsx as jsx8 } from "react/jsx-runtime";
+var MenuSeparator = forwardRef8(
+  function MenuSeparator2({ style, ...props }, ref) {
+    const { separatorStyle } = useMenu();
+    const [styleProps, rest] = useStyleProps(props);
+    return /* @__PURE__ */ jsx8(
+      View3,
+      {
+        ref,
+        accessibilityElementsHidden: true,
+        importantForAccessibility: "no-hide-descendants",
+        ...rest,
+        style: [separatorStyle, styleProps, style]
+      }
+    );
+  }
+);
+MenuSeparator.displayName = "XAUI.Menu.Separator";
+
+// src/components/menu/menu-overlay.tsx
+import { forwardRef as forwardRef9 } from "react";
+import { Pressable } from "react-native";
+import Animated2 from "react-native-reanimated";
+import { jsx as jsx9 } from "react/jsx-runtime";
+var AnimatedPressable = Animated2.createAnimatedComponent(Pressable);
+var MenuOverlay = forwardRef9(function MenuOverlay2({ children, isDismissable = true, style, ...props }, ref) {
+  const context = useMenu();
+  const { overlayStyle, isOpen, close } = context;
+  const [styleProps, rest] = useStyleProps(props);
+  if (!isOpen) return null;
+  return /* @__PURE__ */ jsx9(Portal, { children: /* @__PURE__ */ jsx9(MenuProvider, { value: context, children: /* @__PURE__ */ jsx9(
+    AnimatedPressable,
+    {
+      ref,
+      entering: overlayEntering,
+      exiting: overlayExiting,
+      accessibilityRole: "none",
+      importantForAccessibility: "no",
+      onPress: isDismissable ? close : void 0,
+      ...rest,
+      style: [overlayStyle, styleProps, style],
+      children
+    }
+  ) }) });
+});
+MenuOverlay.displayName = "XAUI.Menu.Overlay";
+
+// src/components/menu/menu-trigger.tsx
+import { forwardRef as forwardRef10, useCallback as useCallback2 } from "react";
+import { jsx as jsx10 } from "react/jsx-runtime";
+var MenuTrigger = forwardRef10(function MenuTrigger2({
+  children,
+  asChild = false,
+  accessibilityRole = "button",
+  accessibilityState,
+  style,
+  onLayout,
+  onPress,
+  onPressIn,
+  onPressOut,
+  ...props
+}, ref) {
+  const { triggerStyle, isOpen, isDisabled, toggle, setAnchor } = useMenu();
+  const [styleProps, rest] = useStyleProps(props);
+  const [isPressed, press] = usePressState({ onPressIn, onPressOut });
+  const anchor = useAnchorRef({ isOpen, onAnchor: setAnchor, onLayout });
+  const refs = useMergedRef(anchor.node, ref);
+  const handlePress = useCallback2(
+    (event) => {
+      onPress?.(event);
+      anchor.measure();
+      toggle();
+    },
+    [anchor, onPress, toggle]
+  );
+  return /* @__PURE__ */ jsx10(
+    PressableFeedback,
+    {
+      ref: refs,
+      isPressed,
+      isDisabled,
+      asChild,
+      accessibilityRole,
+      accessibilityState: {
+        disabled: isDisabled,
+        expanded: isOpen,
+        ...accessibilityState
+      },
+      ...rest,
+      onLayout: anchor.onLayout,
+      style: [
+        triggerStyle,
+        styleProps,
+        typeof style === "function" ? style({ pressed: isPressed }) : style
+      ],
+      onPress: handlePress,
+      onPressIn: press.onPressIn,
+      onPressOut: press.onPressOut,
+      children
+    }
+  );
+});
+MenuTrigger.displayName = "XAUI.Menu.Trigger";
+
+// src/components/menu/menu.tsx
+import { useCallback as useCallback3, useMemo as useMemo2, useState } from "react";
+import { StyleSheet as StyleSheet2 } from "react-native";
+import { jsx as jsx11 } from "react/jsx-runtime";
+var VARIANTS = ["default", "danger"];
+function Menu({
+  children,
+  radius,
+  isOpen: controlledOpen,
+  defaultOpen = false,
+  onOpenChange,
+  isDisabled = false
+}) {
+  const theme = useXAUITheme();
+  const [anchor, setAnchor] = useState(null);
+  const [isOpen, setOpen] = useControllableState({
+    value: controlledOpen,
+    defaultValue: defaultOpen,
+    onChange: onOpenChange
+  });
+  const selection = { radius };
+  const styles = menuRecipe.resolve({
+    theme,
+    selection,
+    states: { disabled: isDisabled }
+  });
+  const pressed = menuRecipe.resolve({ theme, selection, states: { pressed: true } });
+  const open = useCallback3(() => setOpen(true), [setOpen]);
+  const close = useCallback3(() => setOpen(false), [setOpen]);
+  const toggle = useCallback3(() => setOpen((current) => !current), [setOpen]);
+  const context = useMemo2(() => {
+    const byVariant = (read) => Object.fromEntries(VARIANTS.map((v) => [v, read(v)]));
+    const title = byVariant(
+      (variant) => menuRecipe.resolve({ theme, selection: { ...selection, variant } }).itemTitle
+    );
+    return {
+      triggerStyle: styles.trigger,
+      overlayStyle: styles.overlay,
+      contentStyle: styles.content,
+      labelStyle: styles.label,
+      separatorStyle: styles.separator,
+      groupStyle: styles.group,
+      itemStyle: styles.item,
+      itemPressedStyle: pressed.item,
+      itemTitleStyle: title,
+      itemDescriptionStyle: styles.itemDescription,
+      itemIndicatorStyle: styles.itemIndicator,
+      glyph: byVariant((variant) => {
+        const flat = StyleSheet2.flatten([title[variant]]);
+        return {
+          size: flat.fontSize,
+          // `ColorValue` also covers the platform's opaque colours, which `Icon` cannot
+          // hand to a third-party component expecting a string.
+          color: typeof flat.color === "string" ? flat.color : void 0
+        };
+      }),
+      isOpen,
+      isDisabled,
+      open,
+      close,
+      toggle,
+      anchor,
+      setAnchor
+    };
+  }, [
+    styles,
+    pressed,
+    theme,
+    radius,
+    isOpen,
+    isDisabled,
+    open,
+    close,
+    toggle,
+    anchor
+  ]);
+  return /* @__PURE__ */ jsx11(MenuProvider, { value: context, children });
+}
+Menu.displayName = "XAUI.Menu.Root";
+
+// src/components/menu/index.ts
+var Menu2 = Object.assign(Menu, {
+  Trigger: MenuTrigger,
+  Overlay: MenuOverlay,
+  Content: MenuContent,
+  Label: MenuLabel,
+  Separator: MenuSeparator,
+  Group: MenuGroup,
+  Item: MenuItem,
+  ItemTitle: MenuItemTitle,
+  ItemDescription: MenuItemDescription,
+  ItemIndicator: MenuItemIndicator
+});
+
+export {
+  menuRecipe,
+  useMenu,
+  useMenuItem,
+  MenuContent,
+  MenuGroup,
+  MenuItem,
+  MenuItemDescription,
+  MenuItemIndicator,
+  MenuItemTitle,
+  MenuLabel,
+  MenuSeparator,
+  MenuOverlay,
+  MenuTrigger,
+  Menu,
+  Menu2
+};

package/dist/chunk-64MXEVT3.js

@@ -0,0 +1,66 @@
+// src/system/anchored/anchored-motion.ts
+import { Easing, Keyframe } from "react-native-reanimated";
+var ENTER_MS = 200;
+var EXIT_MS = 150;
+var TRAVEL = 8;
+function anchoredEntering(placement) {
+  const [x, y] = travel(placement);
+  return new Keyframe({
+    0: {
+      opacity: 0,
+      transform: [{ translateX: x }, { translateY: y }, { scale: 0.95 }]
+    },
+    100: {
+      opacity: 1,
+      transform: [{ translateX: 0 }, { translateY: 0 }, { scale: 1 }],
+      easing: Easing.out(Easing.cubic)
+    }
+  }).duration(ENTER_MS);
+}
+function anchoredExiting(placement) {
+  const [x, y] = travel(placement);
+  return new Keyframe({
+    0: {
+      opacity: 1,
+      transform: [{ translateX: 0 }, { translateY: 0 }, { scale: 1 }]
+    },
+    100: {
+      opacity: 0,
+      transform: [{ translateX: x }, { translateY: y }, { scale: 0.95 }],
+      easing: Easing.in(Easing.cubic)
+    }
+  }).duration(EXIT_MS);
+}
+function travel(placement) {
+  switch (placement) {
+    case "bottom":
+      return [0, -TRAVEL];
+    case "top":
+      return [0, TRAVEL];
+    case "end":
+      return [-TRAVEL, 0];
+    case "start":
+      return [TRAVEL, 0];
+  }
+}
+var overlayEntering = new Keyframe({
+  0: { opacity: 0 },
+  100: { opacity: 1 }
+}).duration(ENTER_MS);
+var overlayExiting = new Keyframe({
+  0: { opacity: 1 },
+  100: { opacity: 0 }
+}).duration(EXIT_MS);
+
+// src/system/anchored/indicator-spring.ts
+var INDICATOR_SPRING = { damping: 140, stiffness: 1e3, mass: 4 };
+var INDICATOR_ROTATION = [0, -180];
+
+export {
+  anchoredEntering,
+  anchoredExiting,
+  overlayEntering,
+  overlayExiting,
+  INDICATOR_SPRING,
+  INDICATOR_ROTATION
+};