@btndprojects/loam-ui-native 0.0.0-stage → 0.1.0

package/dist/chunk-PZXZJBMP.js

@@ -0,0 +1,620 @@
+import { expandedProps } from './chunk-RQ3HASCC.js';
+import { haptics } from './chunk-NY2U3PBI.js';
+import { Icon } from './chunk-TKVFVF5D.js';
+import * as React from 'react';
+import { useWindowDimensions, Animated, Easing, Modal, View, StyleSheet, Pressable, Text, Platform } from 'react-native';
+import { createStyleSheet, useLoamTheme, useStyles } from '@btndprojects/loam-theme-native';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+var LONG_PRESS_DELAY_MS = 360;
+var PRE_PRESS_SCALE = 0.95;
+var LIFT_SCALE = 1.06;
+var MOVE_CANCEL_PX = 10;
+var MENU_WIDTH_IOS = 210;
+var MENU_WIDTH_ANDROID = 196;
+var MENU_HEIGHT_ESTIMATE = 210;
+var MENU_EDGE_PAD = 8;
+var MENU_MIN_TOP = 50;
+var MENU_OFFSET_Y_IOS = 10;
+var MENU_OFFSET_Y_ANDROID = -6;
+var MENU_OFFSET_X_IOS = 0;
+var MENU_OFFSET_X_ANDROID = 10;
+var MENU_FROM_SCALE_IOS = 0.7;
+var MENU_FROM_SCALE_ANDROID = 0.85;
+var IOS_MENU_TRANSLUCENCY = 0.82;
+var IOS_FROST_OPACITY = 0.22;
+var ANDROID_ITEM_ICON_OPACITY = 0.55;
+var RIPPLE_DIAMETER_FACTOR = 2.2;
+var RIPPLE_OPACITY = 0.18;
+function touchPoint(e) {
+  const ne = e.nativeEvent;
+  if (typeof ne.pageX === "number" && typeof ne.pageY === "number") {
+    return { x: ne.pageX, y: ne.pageY };
+  }
+  const t = ne.touches?.[0];
+  if (t && typeof t.pageX === "number" && typeof t.pageY === "number") {
+    return { x: t.pageX, y: t.pageY };
+  }
+  return null;
+}
+function orderContextMenuItems(items) {
+  const safe = items.filter((i) => !i.destructive);
+  const destructive = items.filter((i) => i.destructive);
+  return destructive.length === 0 ? items : [...safe, ...destructive];
+}
+function placeContextMenu(anchor, screen, platform) {
+  const ios = platform === "ios";
+  const width = ios ? MENU_WIDTH_IOS : MENU_WIDTH_ANDROID;
+  let left = anchor.x + (ios ? MENU_OFFSET_X_IOS : MENU_OFFSET_X_ANDROID);
+  let top = anchor.y + anchor.height + (ios ? MENU_OFFSET_Y_IOS : MENU_OFFSET_Y_ANDROID);
+  if (left + width > screen.width - MENU_EDGE_PAD) left = screen.width - width - MENU_EDGE_PAD;
+  if (top + MENU_HEIGHT_ESTIMATE > screen.height) {
+    top = Math.max(MENU_MIN_TOP, anchor.y - MENU_HEIGHT_ESTIMATE);
+  }
+  return { left, top, width };
+}
+function useResolvedPlatform(explicit) {
+  const theme = useLoamTheme();
+  if (explicit) return explicit;
+  if (Platform.OS === "ios") return "ios";
+  if (Platform.OS === "android") return "android";
+  return theme.platform === "iOS" ? "ios" : "android";
+}
+function ContextMenuOverlay({
+  open,
+  onClose,
+  items,
+  anchor,
+  platform,
+  lift,
+  radius,
+  accessibilityLabel = "Actions",
+  closeLabel = "Close menu",
+  motion = "full"
+}) {
+  const theme = useLoamTheme();
+  const os = useResolvedPlatform(platform);
+  const ios = os === "ios";
+  const { styles } = useStyles(sheet, { platform: os });
+  const window = useWindowDimensions();
+  const reducedMotion = theme.reduceMotion || motion === "reduced";
+  const instantMotion = motion === "none";
+  const [visible, setVisible] = React.useState(open);
+  const fromScale = ios ? MENU_FROM_SCALE_IOS : MENU_FROM_SCALE_ANDROID;
+  const backdropOpacity = React.useRef(new Animated.Value(0)).current;
+  const menuOpacity = React.useRef(new Animated.Value(0)).current;
+  const menuScale = React.useRef(new Animated.Value(fromScale)).current;
+  const liftScale = React.useRef(new Animated.Value(1)).current;
+  const enter = theme.motion.enter;
+  const exit = theme.motion.exit;
+  const scaleIn = ios ? { duration: theme.duration.base, easing: theme.easing.spring } : theme.motion.expand;
+  const animateIn = React.useCallback(() => {
+    if (instantMotion) {
+      backdropOpacity.setValue(1);
+      menuOpacity.setValue(1);
+      menuScale.setValue(1);
+      liftScale.setValue(1);
+      return;
+    }
+    if (reducedMotion) {
+      backdropOpacity.setValue(0);
+      menuOpacity.setValue(0);
+      menuScale.setValue(1);
+      liftScale.setValue(1);
+      Animated.parallel([
+        Animated.timing(backdropOpacity, {
+          toValue: 1,
+          duration: enter.duration,
+          easing: Easing.bezier(...enter.easing),
+          useNativeDriver: true
+        }),
+        Animated.timing(menuOpacity, {
+          toValue: 1,
+          duration: enter.duration,
+          easing: Easing.bezier(...enter.easing),
+          useNativeDriver: true
+        })
+      ]).start();
+      return;
+    }
+    backdropOpacity.setValue(0);
+    menuOpacity.setValue(0);
+    menuScale.setValue(fromScale);
+    liftScale.setValue(1);
+    Animated.parallel([
+      Animated.timing(backdropOpacity, {
+        toValue: 1,
+        duration: enter.duration,
+        easing: Easing.bezier(...enter.easing),
+        useNativeDriver: true
+      }),
+      Animated.timing(menuOpacity, {
+        toValue: 1,
+        duration: enter.duration,
+        easing: Easing.bezier(...enter.easing),
+        useNativeDriver: true
+      }),
+      Animated.timing(menuScale, {
+        toValue: 1,
+        duration: scaleIn.duration,
+        easing: Easing.bezier(...scaleIn.easing),
+        useNativeDriver: true
+      }),
+      Animated.timing(liftScale, {
+        toValue: LIFT_SCALE,
+        duration: scaleIn.duration,
+        easing: Easing.bezier(...scaleIn.easing),
+        useNativeDriver: true
+      })
+    ]).start();
+  }, [
+    backdropOpacity,
+    menuOpacity,
+    menuScale,
+    liftScale,
+    fromScale,
+    enter.duration,
+    enter.easing,
+    scaleIn.duration,
+    scaleIn.easing,
+    reducedMotion,
+    instantMotion
+  ]);
+  const animateOut = React.useCallback(() => {
+    if (instantMotion) {
+      backdropOpacity.setValue(0);
+      menuOpacity.setValue(0);
+      liftScale.setValue(1);
+      setVisible(false);
+      return;
+    }
+    const spec = {
+      duration: exit.duration,
+      easing: Easing.bezier(...exit.easing),
+      useNativeDriver: true
+    };
+    if (reducedMotion) {
+      Animated.parallel([
+        Animated.timing(backdropOpacity, { toValue: 0, ...spec }),
+        Animated.timing(menuOpacity, { toValue: 0, ...spec })
+      ]).start(({ finished }) => {
+        if (finished) setVisible(false);
+      });
+      return;
+    }
+    Animated.parallel([
+      Animated.timing(backdropOpacity, { toValue: 0, ...spec }),
+      Animated.timing(menuOpacity, { toValue: 0, ...spec }),
+      Animated.timing(menuScale, { toValue: fromScale, ...spec }),
+      Animated.timing(liftScale, { toValue: 1, ...spec })
+    ]).start(({ finished }) => {
+      if (finished) setVisible(false);
+    });
+  }, [
+    backdropOpacity,
+    menuOpacity,
+    menuScale,
+    liftScale,
+    fromScale,
+    exit.duration,
+    exit.easing,
+    reducedMotion,
+    instantMotion
+  ]);
+  React.useEffect(() => {
+    if (open) setVisible(true);
+    else if (visible) animateOut();
+  }, [open]);
+  React.useEffect(() => {
+    if (visible && open) animateIn();
+  }, [visible]);
+  const rect = anchor ?? { x: 0, y: 0, width: 0, height: 0 };
+  const place = placeContextMenu(rect, window, os);
+  const ordered = orderContextMenuItems(items);
+  const liftRadius = radius ?? theme.radius.lg;
+  return /* @__PURE__ */ jsx(
+    Modal,
+    {
+      visible,
+      transparent: true,
+      animationType: "none",
+      onRequestClose: onClose,
+      statusBarTranslucent: true,
+      children: /* @__PURE__ */ jsxs(View, { style: StyleSheet.absoluteFill, children: [
+        /* @__PURE__ */ jsxs(Animated.View, { style: [StyleSheet.absoluteFill, { opacity: backdropOpacity }], children: [
+          /* @__PURE__ */ jsx(View, { style: [StyleSheet.absoluteFill, styles.dim] }),
+          ios ? /* @__PURE__ */ jsx(View, { style: [StyleSheet.absoluteFill, styles.frost] }) : null,
+          /* @__PURE__ */ jsx(
+            Pressable,
+            {
+              style: StyleSheet.absoluteFill,
+              accessibilityRole: "button",
+              accessibilityLabel: closeLabel,
+              onPress: onClose
+            }
+          )
+        ] }),
+        ios && lift != null ? /* @__PURE__ */ jsx(
+          Animated.View,
+          {
+            pointerEvents: "none",
+            style: [
+              styles.lift,
+              {
+                left: rect.x,
+                top: rect.y,
+                width: rect.width,
+                height: rect.height,
+                // The shadow is painted from the view's own shape, so the radius
+                // has to travel with the copy or `shadow.lg` reads as a hard
+                // square block behind a rounded tile.
+                borderRadius: liftRadius,
+                transform: [{ scale: liftScale }]
+              }
+            ],
+            children: lift
+          }
+        ) : null,
+        /* @__PURE__ */ jsxs(
+          Animated.View,
+          {
+            accessibilityRole: "menu",
+            accessibilityLabel,
+            style: [
+              styles.menu,
+              {
+                left: place.left,
+                top: place.top,
+                width: place.width,
+                opacity: menuOpacity,
+                transform: [{ scale: menuScale }]
+              }
+            ],
+            children: [
+              ios ? /* @__PURE__ */ jsx(View, { style: [StyleSheet.absoluteFill, styles.translucency] }) : null,
+              ordered.map((item, i) => /* @__PURE__ */ jsx(
+                MenuItem,
+                {
+                  item,
+                  platform: os,
+                  last: i === ordered.length - 1,
+                  onClose
+                },
+                item.key
+              ))
+            ]
+          }
+        )
+      ] })
+    }
+  );
+}
+function MenuItem({
+  item,
+  platform,
+  last,
+  onClose
+}) {
+  const theme = useLoamTheme();
+  const ios = platform === "ios";
+  const { styles } = useStyles(sheet, { platform, separated: ios && !last });
+  const size = React.useRef({ width: 0, height: 0 });
+  const [ripple, setRipple] = React.useState(
+    null
+  );
+  const rippleScale = React.useRef(new Animated.Value(0)).current;
+  const rippleOpacity = React.useRef(new Animated.Value(0)).current;
+  const timer = React.useRef(null);
+  React.useEffect(
+    () => () => {
+      if (timer.current) clearTimeout(timer.current);
+    },
+    []
+  );
+  const onLayout = (e) => {
+    size.current = {
+      width: e.nativeEvent.layout.width,
+      height: e.nativeEvent.layout.height
+    };
+  };
+  const onPress = (e) => {
+    if (!ios) {
+      const { width, height } = size.current;
+      const d = Math.max(width, height) * RIPPLE_DIAMETER_FACTOR;
+      const lx = e.nativeEvent.locationX ?? width / 2;
+      const ly = e.nativeEvent.locationY ?? height / 2;
+      setRipple({ left: lx - d / 2, top: ly - d / 2, size: d });
+      rippleScale.setValue(0);
+      rippleOpacity.setValue(RIPPLE_OPACITY);
+      Animated.parallel([
+        // Reference: `scale(0) → scale(1)` over 480ms `ease-out` → the `decel`
+        // token, timed by `duration.slow` (500) so `reduceMotion` still applies.
+        Animated.timing(rippleScale, {
+          toValue: 1,
+          duration: theme.duration.slow,
+          easing: Easing.bezier(...theme.easing.out),
+          useNativeDriver: true
+        }),
+        Animated.timing(rippleOpacity, {
+          toValue: 0,
+          duration: theme.duration.slow,
+          easing: Easing.bezier(...theme.easing.out),
+          useNativeDriver: true
+        })
+      ]).start(() => setRipple(null));
+    }
+    haptics.impact("light");
+    item.onSelect?.();
+    if (ios) onClose();
+    else timer.current = setTimeout(onClose, theme.duration.fast);
+  };
+  const tint = item.destructive === true ? theme.color.danger : theme.color.text;
+  const glyph = item.icon == null ? null : /* @__PURE__ */ jsx(
+    Icon,
+    {
+      name: item.icon,
+      size: theme.icon.sm,
+      color: item.destructive === true ? theme.color.danger : theme.color.text3
+    }
+  );
+  return /* @__PURE__ */ jsxs(
+    Pressable,
+    {
+      accessibilityRole: "menuitem",
+      accessibilityLabel: item.label,
+      onLayout,
+      onPress,
+      style: ({ pressed }) => [
+        styles.item,
+        // iOS has no ripple, so it gets the state layer instead.
+        pressed && ios ? styles.itemPressed : null
+      ],
+      children: [
+        ios ? null : /* @__PURE__ */ jsx(View, { style: styles.androidGlyph, children: glyph }),
+        /* @__PURE__ */ jsx(Text, { style: [styles.itemLabel, { color: tint }], numberOfLines: 1, children: item.label }),
+        ios ? glyph : null,
+        ripple ? /* @__PURE__ */ jsx(
+          Animated.View,
+          {
+            pointerEvents: "none",
+            style: [
+              styles.ripple,
+              {
+                left: ripple.left,
+                top: ripple.top,
+                width: ripple.size,
+                height: ripple.size,
+                borderRadius: ripple.size / 2,
+                opacity: rippleOpacity,
+                transform: [{ scale: rippleScale }]
+              }
+            ]
+          }
+        ) : null
+      ]
+    }
+  );
+}
+function ContextMenu({
+  items,
+  children,
+  onPress,
+  disabled = false,
+  platform,
+  accessibilityLabel,
+  radius,
+  style,
+  onOpen,
+  onClose,
+  motion = "full"
+}) {
+  const theme = useLoamTheme();
+  const os = useResolvedPlatform(platform);
+  const ios = os === "ios";
+  const { styles } = useStyles(sheet, { platform: os });
+  const [open, setOpen] = React.useState(false);
+  const [anchor, setAnchor] = React.useState(null);
+  const triggerRef = React.useRef(null);
+  const start = React.useRef(null);
+  const moved = React.useRef(false);
+  const scale = React.useRef(new Animated.Value(1)).current;
+  const springTo = React.useCallback(
+    (to) => {
+      Animated.timing(scale, {
+        toValue: to,
+        duration: theme.duration.base,
+        easing: Easing.bezier(...theme.easing.spring),
+        useNativeDriver: true
+      }).start();
+    },
+    [scale, theme.duration.base, theme.easing.spring]
+  );
+  const openMenu = () => {
+    if (disabled || moved.current) return;
+    haptics.impact("heavy");
+    scale.setValue(1);
+    const node = triggerRef.current;
+    if (node && typeof node.measureInWindow === "function") {
+      node.measureInWindow((x, y, width, height) => setAnchor({ x, y, width, height }));
+    }
+    setOpen(true);
+    onOpen?.();
+  };
+  const closeMenu = () => {
+    setOpen(false);
+    onClose?.();
+  };
+  const flatStyle = StyleSheet.flatten(style);
+  const styleRadius = typeof flatStyle?.borderRadius === "number" ? flatStyle.borderRadius : void 0;
+  const triggerRadius = radius ?? styleRadius ?? theme.radius.lg;
+  return /* @__PURE__ */ jsxs(View, { ref: triggerRef, style, collapsable: false, children: [
+    /* @__PURE__ */ jsx(
+      Animated.View,
+      {
+        style: [
+          // iOS hides the in-place trigger while its lifted copy is on screen.
+          ios && open ? styles.liftedAway : null,
+          { borderRadius: triggerRadius, transform: [{ scale }] }
+        ],
+        children: /* @__PURE__ */ jsx(
+          Pressable,
+          {
+            style: { borderRadius: triggerRadius },
+            accessibilityRole: "button",
+            accessibilityLabel,
+            accessibilityState: { disabled, expanded: open },
+            ...expandedProps(open),
+            accessibilityActions: [{ name: "longpress", label: "Show actions" }],
+            onAccessibilityAction: (e) => {
+              if (e.nativeEvent.actionName === "longpress") openMenu();
+            },
+            disabled,
+            delayLongPress: LONG_PRESS_DELAY_MS,
+            onLongPress: disabled ? void 0 : openMenu,
+            onPress: disabled ? void 0 : onPress,
+            onPressIn: () => {
+              if (start.current === null) moved.current = false;
+              if (!disabled) springTo(PRE_PRESS_SCALE);
+            },
+            onPressOut: () => {
+              start.current = null;
+              springTo(1);
+            },
+            onTouchStart: (e) => {
+              moved.current = false;
+              start.current = touchPoint(e);
+            },
+            onTouchMove: (e) => {
+              const s = start.current;
+              const t = touchPoint(e);
+              if (!s || !t) return;
+              if (Math.abs(t.x - s.x) + Math.abs(t.y - s.y) > MOVE_CANCEL_PX) {
+                moved.current = true;
+                springTo(1);
+              }
+            },
+            children
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      ContextMenuOverlay,
+      {
+        open,
+        onClose: closeMenu,
+        items,
+        anchor,
+        platform: os,
+        lift: children,
+        radius: triggerRadius,
+        accessibilityLabel,
+        motion
+      }
+    )
+  ] });
+}
+var sheet = createStyleSheet((theme) => ({
+  /** The dim behind the menu. iOS whispers (`scrimLight`), Android commits (`scrim`). */
+  dim: {
+    variants: {
+      platform: {
+        ios: { backgroundColor: theme.color.scrimLight },
+        android: { backgroundColor: theme.color.scrim }
+      }
+    }
+  },
+  /** Stand-in for `backdrop-filter: blur(7px)` — a translucent `surface` veil. */
+  frost: {
+    backgroundColor: theme.color.surface,
+    opacity: IOS_FROST_OPACITY
+  },
+  /** The lifted copy of the trigger (iOS). */
+  lift: {
+    position: "absolute",
+    ...theme.shadow.lg
+  },
+  /** The in-place trigger while its copy is lifted. */
+  liftedAway: { opacity: 0 },
+  menu: {
+    position: "absolute",
+    overflow: "hidden",
+    // The reference sets `transform-origin: top left` so the menu grows out of
+    // the anchor's corner. RN 0.74+ supports `transformOrigin`.
+    transformOrigin: "top left",
+    ...theme.shadow.lg,
+    variants: {
+      platform: {
+        // Reference radius 16 → `radius.lg` (19); 12 → `radius.md` (13).
+        ios: { borderRadius: theme.radius.lg },
+        android: {
+          borderRadius: theme.radius.md,
+          backgroundColor: theme.color.surface,
+          // Reference `padding:8px 0` — `space.s2` is exactly 8.
+          paddingVertical: theme.space.s2
+        }
+      }
+    }
+  },
+  /** iOS: `color-mix(in srgb, var(--surface) 82%, transparent)`, as a fill layer. */
+  translucency: {
+    backgroundColor: theme.color.surface,
+    opacity: IOS_MENU_TRANSLUCENCY
+  },
+  item: {
+    flexDirection: "row",
+    alignItems: "center",
+    overflow: "hidden",
+    minHeight: theme.tapMin,
+    variants: {
+      platform: {
+        ios: {
+          justifyContent: "space-between",
+          // Reference `padding:13px 16px`.
+          paddingVertical: theme.space.s3,
+          paddingHorizontal: theme.space.s4
+        },
+        android: {
+          // Reference `padding:12px 18px` and `gap:14px`.
+          paddingVertical: theme.space.s3,
+          paddingHorizontal: theme.space.s4,
+          gap: theme.space.s3
+        }
+      },
+      separated: {
+        // iOS draws a `.5px` hairline between rows — the static `hair` weight,
+        // which must stay a true hairline rather than thicken with contrast.
+        true: { borderBottomWidth: theme.borderWidth.hair, borderBottomColor: theme.color.border },
+        false: {}
+      }
+    }
+  },
+  itemPressed: { backgroundColor: theme.state.pressed },
+  itemLabel: {
+    flexShrink: 1,
+    fontFamily: theme.font.sans,
+    fontWeight: theme.fontWeight.medium,
+    variants: {
+      platform: {
+        // Reference 16px (iOS) / 15px (Android) → `callout` / `subheadline`.
+        ios: {
+          fontSize: theme.type.callout.fontSize,
+          lineHeight: theme.type.callout.lineHeight,
+          letterSpacing: theme.type.callout.letterSpacing
+        },
+        android: {
+          fontSize: theme.type.subheadline.fontSize,
+          lineHeight: theme.type.subheadline.lineHeight,
+          letterSpacing: theme.type.subheadline.letterSpacing
+        }
+      }
+    }
+  },
+  androidGlyph: { opacity: ANDROID_ITEM_ICON_OPACITY },
+  ripple: {
+    position: "absolute",
+    backgroundColor: theme.color.text
+  }
+}));
+
+export { ContextMenu, ContextMenuOverlay, LONG_PRESS_DELAY_MS, orderContextMenuItems, placeContextMenu };