@btndprojects/loam-ui-native 0.1.1 → 0.3.1

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

@@ -1,8 +1,11 @@
-import { ContextMenuOverlay, LONG_PRESS_DELAY_MS } from './chunk-PZXZJBMP.js';
+import { ContextMenuOverlay, LONG_PRESS_DELAY_MS } from './chunk-7CGJBQUA.js';
+import { resolveTextRole } from './chunk-L4D5LHCH.js';
 import { haptics } from './chunk-NY2U3PBI.js';
-import { Icon } from './chunk-TKVFVF5D.js';
+import { isAndroidIdiom } from './chunk-TH4PW2WU.js';
+import { useLabels } from './chunk-APCWFOZW.js';
+import { Icon } from './chunk-PCEFCOLN.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 +42,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 +120,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 +139,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,
@@ -152,9 +166,11 @@ function RowBody({
   trailing,
   onPress,
   divider = false,
-  disabled = false,
+  chevron = false,
+  platform,
+  disabled: disabledProp,
   accessibilityLabel,
-  density = "comfortable",
+  density: densityProp,
   selectable = false,
   selected = false,
   onToggleSelected,
@@ -166,19 +182,55 @@ function RowBody({
   accessibilityHint,
   dragHandle
 }) {
-  const { styles } = useStyles(sheet, { divider, disabled, density, selected });
+  const theme = useLoamTheme("list-row");
+  const group = React.useContext(ListGroupContext);
+  const android = isAndroidIdiom(theme, platform ?? group?.platform);
+  const density = densityProp ?? group?.density ?? "comfortable";
+  const disabled = disabledProp ?? group?.disabled ?? false;
+  const { styles } = useStyles(sheet, {
+    divider: divider && !group && !android,
+    disabled,
+    density
+  });
+  const [textStart, setTextStart] = React.useState();
+  const separator = !android && group?.separator === true;
+  const metrics = density === "compact" ? {} : {
+    minHeight: android ? subtitle != null ? theme.space[72] : theme.space[56] : subtitle != null ? theme.space[60] : theme.space[44],
+    paddingVertical: theme.space[android ? 8 : 6]
+  };
+  const titleRole = resolveTextRole(theme, "body", android);
+  const subtitleRole = resolveTextRole(theme, "subheadline", android);
+  const fill = selected ? { backgroundColor: theme.state.selected } : group && android ? { backgroundColor: theme.color.surface } : null;
   const content = /* @__PURE__ */ jsxs(Fragment, { children: [
-    selectable && selected ? /* @__PURE__ */ jsx(View, { accessible: false, style: styles.selectBar }) : null,
     selectable ? /* @__PURE__ */ jsx(View, { style: styles.slot, children: /* @__PURE__ */ jsx(SelectionIndicator, { selected }) }) : null,
     leading != null ? /* @__PURE__ */ jsx(View, { style: styles.slot, children: leading }) : null,
-    /* @__PURE__ */ jsxs(View, { style: styles.main, children: [
-      line(title, styles.title),
-      line(subtitle, styles.subtitle)
-    ] }),
+    /* @__PURE__ */ jsxs(
+      View,
+      {
+        style: styles.main,
+        onLayout: separator ? (e) => setTextStart(e.nativeEvent.layout.x) : void 0,
+        children: [
+          line(title, [styles.title, titleRole]),
+          line(subtitle, [styles.subtitle, subtitleRole])
+        ]
+      }
+    ),
     trailing != null ? /* @__PURE__ */ jsx(View, { style: styles.slot, children: trailing }) : null,
-    dragHandle != null ? dragHandle : null
+    chevron ? /* @__PURE__ */ jsx(View, { style: styles.slot, children: /* @__PURE__ */ jsx(Icon, { name: "chevron-right", size: theme.icon.sm, color: theme.color.text3 }) }) : null,
+    dragHandle != null ? dragHandle : null,
+    separator ? /* @__PURE__ */ jsx(
+      View,
+      {
+        "aria-hidden": true,
+        accessibilityElementsHidden: true,
+        importantForAccessibility: "no-hide-descendants",
+        testID: "list-row-separator",
+        style: [styles.separator, { start: textStart ?? theme.space.s4 }]
+      }
+    ) : null
   ] });
-  const primaryPress = selectable ? onToggleSelected : onPress;
+  const readOnly = group?.interactive === false;
+  const primaryPress = readOnly ? void 0 : selectable ? onToggleSelected : onPress;
   if (primaryPress || interactive) {
     const label = accessibilityLabel ?? (typeof title === "string" ? title : void 0);
     return /* @__PURE__ */ jsx(
@@ -195,21 +247,32 @@ function RowBody({
         onPress: disabled ? void 0 : primaryPress,
         onLongPress: disabled ? void 0 : onLongPress,
         delayLongPress: LONG_PRESS_DELAY_MS,
-        style: ({ pressed }) => [styles.base, style, pressed && !disabled ? styles.pressed : null],
+        android_ripple: android ? { color: theme.state.pressed, borderless: false } : void 0,
+        style: ({ pressed }) => [
+          styles.base,
+          metrics,
+          fill,
+          style,
+          pressed && !disabled && !android ? styles.pressed : null
+        ],
         children: content
       }
     );
   }
-  return /* @__PURE__ */ jsx(View, { style: [styles.base, style], children: content });
+  return /* @__PURE__ */ jsx(View, { style: [styles.base, metrics, fill, style], children: content });
 }
 function ListRow(props) {
   const {
     swipeActions,
     swipeReleaseLabel,
     swipeMenuLabel,
+    menuItems,
     swipeHint,
+    swipePeek = true,
+    onSwipePeek,
     selectable = false,
     selected,
+    value,
     defaultSelected = false,
     onSelectedChange,
     draggable = false,
@@ -220,11 +283,15 @@ function ListRow(props) {
     onMoveDown,
     dragHandleLabel,
     motion = "full",
+    labels: labelsProp,
     ...rest
   } = props;
-  const isControlled = selected !== void 0;
+  const labels = useLabels("listRow", DEFAULT_LABELS, labelsProp);
+  const groupSelected = React.useContext(ListGroupContext)?.selected;
+  const effectiveSelected = selected ?? (selectable && groupSelected && value !== void 0 ? groupSelected.includes(value) : void 0);
+  const isControlled = effectiveSelected !== void 0;
   const [internalSelected, setInternalSelected] = React.useState(defaultSelected);
-  const isSelected = isControlled ? selected : internalSelected;
+  const isSelected = effectiveSelected ?? internalSelected;
   const toggleSelected = React.useCallback(() => {
     const next = !isSelected;
     if (!isControlled) setInternalSelected(next);
@@ -248,33 +315,83 @@ 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 +623,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 +662,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 +769,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 +813,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 +827,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 +893,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,35 +933,73 @@ 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)
         }
       )
     }
   );
 }
-function List({ children, role }) {
+var ListGroupContext = React.createContext(null);
+function List({
+  children,
+  role,
+  platform,
+  density,
+  disabled,
+  interactive,
+  leading,
+  trailing,
+  tone,
+  selected
+}) {
+  const theme = useLoamTheme("list-row");
   const { styles } = useStyles(sheet, { divider: false, disabled: false });
+  const android = isAndroidIdiom(theme, platform);
   const items = React.Children.toArray(children).filter(Boolean);
-  return /* @__PURE__ */ jsx(View, { role, accessibilityRole: role, style: styles.list, children: items.map((child, i) => /* @__PURE__ */ jsxs(React.Fragment, { children: [
-    child,
-    i < items.length - 1 ? (
-      // Hidden, not just unlabelled. The dividers are interleaved between
-      // the children, so under `role="list"` they would be owned children
-      // of the list alongside the items — and a `list` may own only
-      // `listitem`s. Hiding them keeps `aria-required-children` satisfied
-      // while `role="list"` satisfies `aria-required-parent`, which is the
-      // trade the board and notification-center notes both warn about.
-      /* @__PURE__ */ jsx(
-        View,
-        {
-          "aria-hidden": true,
-          accessibilityElementsHidden: true,
-          importantForAccessibility: "no-hide-descendants",
-          style: styles.listDivider
-        }
-      )
-    ) : null
-  ] }, i)) });
+  const isRow = (child) => React.isValidElement(child) && child.type === ListRow;
+  return /* @__PURE__ */ jsxs(
+    View,
+    {
+      role,
+      accessibilityRole: role,
+      style: [
+        styles.list,
+        android ? styles.listAndroid : null,
+        tone && { backgroundColor: theme.color[`${tone}Soft`], borderColor: theme.edge[tone] }
+      ],
+      children: [
+        leading != null ? /* @__PURE__ */ jsx(View, { style: styles.listSlot, children: leading }) : null,
+        items.map((child, i) => /* @__PURE__ */ jsxs(
+          ListGroupContext.Provider,
+          {
+            value: { platform, separator: i < items.length - 1, density, disabled, interactive, selected },
+            children: [
+              child,
+              i < items.length - 1 && !isRow(child) && !android ? (
+                // Hidden, not just unlabelled. The dividers are interleaved between
+                // the children, so under `role="list"` they would be owned children
+                // of the list alongside the items — and a `list` may own only
+                // `listitem`s. Hiding them keeps `aria-required-children` satisfied
+                // while `role="list"` satisfies `aria-required-parent`, which is the
+                // trade the board and notification-center notes both warn about.
+                /* @__PURE__ */ jsx(
+                  View,
+                  {
+                    "aria-hidden": true,
+                    accessibilityElementsHidden: true,
+                    importantForAccessibility: "no-hide-descendants",
+                    style: styles.listDivider
+                  }
+                )
+              ) : null
+            ]
+          },
+          i
+        )),
+        trailing != null ? /* @__PURE__ */ jsx(View, { style: styles.listSlot, children: trailing }) : null
+      ]
+    }
+  );
 }
 var sheet = createStyleSheet((theme) => ({
   base: {
@@ -836,14 +1017,6 @@ var sheet = createStyleSheet((theme) => ({
         comfortable: { minHeight: theme.layout.listRowH, paddingVertical: theme.space.s3 },
         compact: { minHeight: theme.ctl.lg, paddingVertical: theme.space.s2 }
       },
-      // A selected row is drawn on an opaque `surface` — not the translucent
-      // `selected` wash — so its `text2` subtitle keeps a full AA margin (5.65:1
-      // in light) instead of the 4.28:1 the wash would leave it with over the
-      // page background. The accent signal is the start-edge bar + filled check.
-      selected: {
-        true: { backgroundColor: theme.color.surface },
-        false: {}
-      },
       divider: {
         true: { borderBottomWidth: theme.borderWidth.thin, borderBottomColor: theme.color.border },
         false: {}
@@ -854,16 +1027,13 @@ var sheet = createStyleSheet((theme) => ({
       }
     }
   },
-  pressed: { backgroundColor: theme.color.surface2 },
+  pressed: { backgroundColor: theme.state.pressed },
   slot: { flexShrink: 0 },
   main: { flex: 1, minWidth: 0, gap: theme.space.s1 },
-  // Row title = the "Headline" role (the one emphasised body-size style).
+  // Row title: the font family, ink and platform role come from resolveTextRole
+  // at render (body 17 / 400 iOS, bodyLarge Android); only the ink is fixed here.
   title: {
     fontFamily: theme.font.sans,
-    fontWeight: theme.type.headline.fontWeight,
-    fontSize: theme.type.headline.fontSize,
-    lineHeight: theme.type.headline.lineHeight,
-    letterSpacing: theme.type.headline.letterSpacing,
     color: theme.color.text
   },
   // Row subtitle = the "Subheadline" role (supporting text under the title).
@@ -878,10 +1048,25 @@ var sheet = createStyleSheet((theme) => ({
     backgroundColor: theme.color.surface,
     borderWidth: theme.borderWidth.thin,
     borderColor: theme.color.border,
-    borderRadius: theme.radius.xl,
+    borderRadius: theme.radius.lg,
     overflow: "hidden"
   },
+  listSlot: { paddingHorizontal: theme.space.s4, paddingVertical: theme.space.s2 },
   listDivider: { height: theme.space[1], backgroundColor: theme.color.border },
+  // Android: no dividers — the rows sit on surface tiles separated by space.
+  listAndroid: {
+    backgroundColor: "transparent",
+    borderWidth: 0,
+    gap: theme.space[2]
+  },
+  separator: {
+    position: "absolute",
+    end: 0,
+    bottom: 0,
+    height: theme.borderWidth.thin,
+    backgroundColor: theme.color.border,
+    pointerEvents: "none"
+  },
   /* ---- selection affordance ---- */
   /**
    * The leading selection circle. `w2` is the static ring weight (part of the
@@ -907,20 +1092,6 @@ var sheet = createStyleSheet((theme) => ({
       }
     }
   },
-  /**
-   * The start-edge accent bar marking a selected row. Absolutely positioned so
-   * it adds no layout shift between selected/unselected, and `accent` clears the
-   * 3:1 non-text-contrast bar against the surface in both modes.
-   */
-  selectBar: {
-    position: "absolute",
-    top: 0,
-    bottom: 0,
-    start: 0,
-    width: theme.space.s1,
-    backgroundColor: theme.color.accent,
-    pointerEvents: "none"
-  },
   /* ---- drag layer ---- */
   /** The draggable root at rest — transparent, so a grouped List's surface shows. */
   dragRoot: { backgroundColor: "transparent" },