@btndprojects/loam-ui-native 0.1.0 → 0.2.1

package/dist/{chunk-IVNRBPGC.js → chunk-C4GTDLRC.js}

@@ -1,8 +1,9 @@
-import { ContextMenuOverlay, LONG_PRESS_DELAY_MS } from './chunk-PZXZJBMP.js';
+import { ContextMenuOverlay, LONG_PRESS_DELAY_MS } from './chunk-U5NLHYV6.js';
 import { haptics } from './chunk-NY2U3PBI.js';
-import { Icon } from './chunk-TKVFVF5D.js';
+import { useLabels } from './chunk-APCWFOZW.js';
+import { Icon } from './chunk-UXGIW7OK.js';
 import * as React from 'react';
-import { Animated, Easing, PanResponder, View, Pressable, StyleSheet, Text } from 'react-native';
+import { View, Animated, Easing, PanResponder, Pressable, StyleSheet, Text } from 'react-native';
 import { createStyleSheet, useLoamTheme, useStyles } from '@btndprojects/loam-theme-native';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 
@@ -39,6 +40,8 @@ function activeSwipeSide(offset) {
   if (offset < 0) return "trailing";
   return null;
 }
+var SWIPE_PEEK_FRACTION = 0.4;
+var swipePeekShown = false;
 function swipeActionCollapses(action) {
   return action.collapses ?? action.destructive === true;
 }
@@ -115,6 +118,15 @@ function resolveSwipeAccessibilityAction(actions, name) {
   if (name === "longpress") return "menu";
   return actions.find((a) => a.key === name) ?? null;
 }
+var DEFAULT_LABELS = {
+  dragHandle: "Drag to reorder",
+  rowActions: "Row actions",
+  release: "Release",
+  swipeHint: "Long press for actions",
+  moveUp: "Move up",
+  moveDown: "Move down",
+  reorderHint: (handle) => `${handle}. Use the move up and move down actions to reorder.`
+};
 function resolveRowMotion(motion, osReduced) {
   if (motion === "none") return "none";
   if (motion === "reduced") return "reduced";
@@ -125,7 +137,7 @@ function line(value, style) {
   return typeof value === "string" || typeof value === "number" ? /* @__PURE__ */ jsx(Text, { style, numberOfLines: 1, children: value }) : value;
 }
 function SelectionIndicator({ selected }) {
-  const theme = useLoamTheme();
+  const theme = useLoamTheme("list-row");
   const { styles } = useStyles(sheet, { selectedBox: selected });
   return /* @__PURE__ */ jsx(
     View,
@@ -207,7 +219,10 @@ function ListRow(props) {
     swipeActions,
     swipeReleaseLabel,
     swipeMenuLabel,
+    menuItems,
     swipeHint,
+    swipePeek = true,
+    onSwipePeek,
     selectable = false,
     selected,
     defaultSelected = false,
@@ -220,8 +235,10 @@ function ListRow(props) {
     onMoveDown,
     dragHandleLabel,
     motion = "full",
+    labels: labelsProp,
     ...rest
   } = props;
+  const labels = useLabels("listRow", DEFAULT_LABELS, labelsProp);
   const isControlled = selected !== void 0;
   const [internalSelected, setInternalSelected] = React.useState(defaultSelected);
   const isSelected = isControlled ? selected : internalSelected;
@@ -248,33 +265,74 @@ function ListRow(props) {
         onDragEnd,
         onMoveUp,
         onMoveDown,
-        handleLabel: dragHandleLabel ?? "Drag to reorder",
+        handleLabel: dragHandleLabel ?? labels.dragHandle,
+        labels,
         motion
       }
     );
   }
-  if (sides.leading.length === 0 && sides.trailing.length === 0) return /* @__PURE__ */ jsx(RowBody, { ...row });
+  if (sides.leading.length === 0 && sides.trailing.length === 0) {
+    return menuItems && menuItems.length > 0 ? /* @__PURE__ */ jsx(MenuRow, { row, items: menuItems, menuLabel: swipeMenuLabel ?? labels.rowActions }) : /* @__PURE__ */ jsx(RowBody, { ...row });
+  }
   return /* @__PURE__ */ jsx(
     SwipeRow,
     {
       row,
       sides,
-      releaseLabel: swipeReleaseLabel ?? "Release",
-      menuLabel: swipeMenuLabel ?? "Row actions",
-      hint: swipeHint ?? "Long press for actions",
-      motion
+      menuItems,
+      releaseLabel: swipeReleaseLabel ?? labels.release,
+      menuLabel: swipeMenuLabel ?? labels.rowActions,
+      hint: swipeHint ?? labels.swipeHint,
+      motion,
+      peek: swipePeek,
+      onPeek: onSwipePeek
     }
   );
 }
+function MenuRow({
+  row,
+  items,
+  menuLabel
+}) {
+  const [open, setOpen] = React.useState(false);
+  const [anchor, setAnchor] = React.useState(null);
+  const rootRef = React.useRef(null);
+  const openMenu = () => {
+    const node = rootRef.current;
+    if (node && typeof node.measureInWindow === "function") {
+      node.measureInWindow((mx, my, width, height) => setAnchor({ x: mx, y: my, width, height }));
+    }
+    haptics.impact("heavy");
+    setOpen(true);
+  };
+  return /* @__PURE__ */ jsxs(View, { ref: rootRef, collapsable: false, children: [
+    /* @__PURE__ */ jsx(
+      RowBody,
+      {
+        ...row,
+        interactive: true,
+        onLongPress: openMenu,
+        accessibilityActions: [{ name: "longpress", label: menuLabel }],
+        onAccessibilityAction: (e) => {
+          if (e.nativeEvent.actionName === "longpress") openMenu();
+        }
+      }
+    ),
+    /* @__PURE__ */ jsx(ContextMenuOverlay, { open, onClose: () => setOpen(false), items, anchor, accessibilityLabel: menuLabel })
+  ] });
+}
 function SwipeRow({
   row,
   sides,
+  menuItems: menuOverride,
   releaseLabel,
   menuLabel,
   hint,
-  motion
+  motion,
+  peek,
+  onPeek
 }) {
-  const theme = useLoamTheme();
+  const theme = useLoamTheme("list-row");
   const { styles } = useStyles(sheet, { divider: false, disabled: false });
   const reducedMotion = resolveRowMotion(motion, theme.reduceMotion) !== "full";
   const hasLeading = sides.leading.length > 0;
@@ -506,6 +564,31 @@ function SwipeRow({
     rowWidth.current = e.nativeEvent.layout.width || FALLBACK_ROW_WIDTH;
     rowHeight.current = e.nativeEvent.layout.height || rowHeight.current;
   };
+  const peekRef = React.useRef({ peek, onPeek, rails, springTo, hasTrailing });
+  peekRef.current = { peek, onPeek, rails, springTo, hasTrailing };
+  React.useEffect(() => {
+    const cfg = peekRef.current;
+    if (!cfg.peek || swipePeekShown) return;
+    const side = cfg.hasTrailing ? "trailing" : "leading";
+    const open = cfg.rails[side].openOffset;
+    if (open === 0) return;
+    swipePeekShown = true;
+    let back = null;
+    const start = setTimeout(() => {
+      if (axis.current !== null || cur.current !== 0) return;
+      peekRef.current.onPeek?.();
+      peekRef.current.springTo(open * SWIPE_PEEK_FRACTION, 0, SWIPE_SPRING_SNAP);
+      back = setTimeout(() => {
+        if (axis.current === null && Math.abs(cur.current) < Math.abs(open)) {
+          peekRef.current.springTo(0, 0, SWIPE_SPRING_SNAP);
+        }
+      }, theme.duration.slow);
+    }, theme.duration.slow);
+    return () => {
+      clearTimeout(start);
+      if (back) clearTimeout(back);
+    };
+  }, []);
   const openMenu = () => {
     const node = rootRef.current;
     if (node && typeof node.measureInWindow === "function") {
@@ -520,7 +603,7 @@ function SwipeRow({
     if (target === "menu") openMenu();
     else if (target) fire(target);
   };
-  const menuItems = allActions.map((a) => ({
+  const menuItems = menuOverride ?? allActions.map((a) => ({
     key: a.key,
     label: a.label,
     icon: a.icon ?? (a.destructive === true ? "trash" : "folder"),
@@ -627,7 +710,7 @@ function SwipeActionButton({
   reduced,
   onPress
 }) {
-  const theme = useLoamTheme();
+  const theme = useLoamTheme("list-row");
   const destructive = action.destructive === true;
   const { styles } = useStyles(sheet, { destructive });
   const p = side === "leading" ? x.interpolate({
@@ -671,10 +754,10 @@ function SwipeActionButton({
     ) }) })
   );
 }
-function dragAccessibilityActions(canMoveUp, canMoveDown) {
+function dragAccessibilityActions(canMoveUp, canMoveDown, labels = DEFAULT_LABELS) {
   const actions = [];
-  if (canMoveUp) actions.push({ name: "moveUp", label: "Move up" });
-  if (canMoveDown) actions.push({ name: "moveDown", label: "Move down" });
+  if (canMoveUp) actions.push({ name: "moveUp", label: labels.moveUp });
+  if (canMoveDown) actions.push({ name: "moveDown", label: labels.moveDown });
   return actions;
 }
 function DraggableRow({
@@ -685,9 +768,10 @@ function DraggableRow({
   onMoveUp,
   onMoveDown,
   handleLabel,
+  labels,
   motion
 }) {
-  const theme = useLoamTheme();
+  const theme = useLoamTheme("list-row");
   const { styles } = useStyles(sheet, { divider: false, disabled: false });
   const reducedMotion = resolveRowMotion(motion, theme.reduceMotion) !== "full";
   const noMotion = motion === "none";
@@ -750,7 +834,7 @@ function DraggableRow({
       onPanResponderTerminate: () => settleRef.current()
     })
   ).current;
-  const dragActions = dragAccessibilityActions(onMoveUp != null, onMoveDown != null);
+  const dragActions = dragAccessibilityActions(onMoveUp != null, onMoveDown != null, labels);
   const onRowAction = (e) => {
     if (e.nativeEvent.actionName === "moveUp") onMoveUp?.();
     else if (e.nativeEvent.actionName === "moveDown") onMoveDown?.();
@@ -790,7 +874,7 @@ function DraggableRow({
           dragHandle: handle,
           accessibilityActions: dragActions.length > 0 ? dragActions : void 0,
           onAccessibilityAction: dragActions.length > 0 ? onRowAction : void 0,
-          accessibilityHint: `${handleLabel}. Use the move up and move down actions to reorder.`
+          accessibilityHint: labels.reorderHint(handleLabel)
         }
       )
     }

package/dist/{chunk-4ZAHCY44.js → chunk-C6APNDVA.js}

@@ -1,9 +1,14 @@
-import { Icon } from './chunk-TKVFVF5D.js';
+import { useLabels } from './chunk-APCWFOZW.js';
+import { Icon } from './chunk-UXGIW7OK.js';
 import * as React from 'react';
 import { Animated, Easing, Pressable, View, Text, AccessibilityInfo } from 'react-native';
 import { createStyleSheet, useStyles, useLoamTheme } from '@btndprojects/loam-theme-native';
 import { jsx, jsxs } from 'react/jsx-runtime';
 
+var DEFAULT_LABELS = {
+  copy: "Copy",
+  copied: "Copied"
+};
 function CopyButton({
   onCopy,
   label,
@@ -11,10 +16,12 @@ function CopyButton({
   size = "sm",
   timeout = 2e3,
   motion = "full",
-  accessibilityLabel
+  accessibilityLabel,
+  labels: labelsProp
 }) {
+  const labels = useLabels("copyButton", DEFAULT_LABELS, labelsProp);
   const { styles } = useStyles(sheet, { variant, size });
-  const theme = useLoamTheme();
+  const theme = useLoamTheme("copy-button");
   const fg = theme.color.text;
   const iconSize = theme.ctl.icon[size];
   const slop = Math.max(0, (theme.hit[size] - theme.ctl[size]) / 2);
@@ -45,7 +52,7 @@ function CopyButton({
   const handlePress = () => {
     onCopy?.();
     setCopied(true);
-    AccessibilityInfo.announceForAccessibility("Copied");
+    AccessibilityInfo.announceForAccessibility(labels.copied);
     clearTimeout(timer.current);
     timer.current = setTimeout(() => setCopied(false), timeout);
   };
@@ -58,7 +65,7 @@ function CopyButton({
     Pressable,
     {
       accessibilityRole: "button",
-      accessibilityLabel: accessibilityLabel ?? label ?? "Copy",
+      accessibilityLabel: accessibilityLabel ?? label ?? labels.copy,
       onPress: handlePress,
       onPressIn: () => press(0.97),
       onPressOut: () => press(1),

package/dist/{chunk-4SZYY6AN.js → chunk-CMTVNF3D.js}

@@ -14,7 +14,7 @@ function Touchable({
   style,
   accessibilityLabel
 }) {
-  const theme = useLoamTheme();
+  const theme = useLoamTheme("interactions");
   const scale = React.useRef(new Animated.Value(1)).current;
   const highlight = React.useRef(new Animated.Value(0)).current;
   const overlayOpacity = highlight.interpolate({
@@ -23,13 +23,16 @@ function Touchable({
   });
   const layerIn = theme.motion.hover;
   const layerOut = theme.motion.exit;
+  const animateScale = !theme.reduceMotion;
   const pressIn = () => {
-    Animated.spring(scale, {
-      toValue: scaleTo,
-      useNativeDriver: true,
-      speed: 40,
-      bounciness: 6
-    }).start();
+    if (animateScale) {
+      Animated.spring(scale, {
+        toValue: scaleTo,
+        useNativeDriver: true,
+        speed: 40,
+        bounciness: 6
+      }).start();
+    }
     if (ripple) {
       Animated.timing(highlight, {
         toValue: 1,
@@ -40,12 +43,14 @@ function Touchable({
     }
   };
   const pressOut = () => {
-    Animated.spring(scale, {
-      toValue: 1,
-      useNativeDriver: true,
-      speed: 40,
-      bounciness: 6
-    }).start();
+    if (animateScale) {
+      Animated.spring(scale, {
+        toValue: 1,
+        useNativeDriver: true,
+        speed: 40,
+        bounciness: 6
+      }).start();
+    }
     if (ripple) {
       Animated.timing(highlight, {
         toValue: 0,