@btndprojects/loam-ui-native 0.1.1 → 0.3.1

package/dist/{chunk-PZXZJBMP.js → chunk-7CGJBQUA.js}

@@ -1,11 +1,48 @@
-import { expandedProps } from './chunk-RQ3HASCC.js';
+import { Sheet } from './chunk-B7JZ3N5G.js';
+import { expandedProps } from './chunk-W23G6JLF.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 { useLabels } from './chunk-APCWFOZW.js';
+import { Icon } from './chunk-PCEFCOLN.js';
+import { useWindowDimensions, Platform, View, Pressable, Text, Animated, Easing, Modal, StyleSheet } from 'react-native';
 import { createStyleSheet, useLoamTheme, useStyles } from '@btndprojects/loam-theme-native';
+import * as React from 'react';
 import { jsx, jsxs } from 'react/jsx-runtime';
 
+var ANDROID_ANCHORED_MENU_MAX = 5;
+function resolveOverlayPresentation({
+  kind,
+  platform,
+  width,
+  regularWidth,
+  itemCount = 0,
+  presentation
+}) {
+  if (presentation) return presentation;
+  if (platform === "ios") {
+    if (width >= regularWidth) return "anchored";
+    return kind === "combobox" ? "full" : "sheet";
+  }
+  if (kind === "menu" && itemCount <= ANDROID_ANCHORED_MENU_MAX) return "anchored";
+  return kind === "combobox" ? "full" : "sheet";
+}
+function useOverlayPresentation({
+  kind,
+  itemCount,
+  presentation,
+  platform
+}) {
+  const theme = useLoamTheme("overlay-presentation");
+  const { width } = useWindowDimensions();
+  const os = platform ?? (Platform.OS === "ios" ? "ios" : Platform.OS === "android" ? "android" : theme.platform === "iOS" ? "ios" : "android");
+  return resolveOverlayPresentation({
+    kind,
+    platform: os,
+    width,
+    itemCount,
+    presentation,
+    regularWidth: theme.breakpoint.tablet
+  });
+}
 var LONG_PRESS_DELAY_MS = 360;
 var PRE_PRESS_SCALE = 0.95;
 var LIFT_SCALE = 1.06;
@@ -20,6 +57,7 @@ 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 PREVIEW_MAX_WIDTH = 320;
 var MENU_FROM_SCALE_ANDROID = 0.85;
 var IOS_MENU_TRANSLUCENCY = 0.82;
 var IOS_FROST_OPACITY = 0.22;
@@ -54,25 +92,110 @@ function placeContextMenu(anchor, screen, platform) {
   return { left, top, width };
 }
 function useResolvedPlatform(explicit) {
-  const theme = useLoamTheme();
+  const theme = useLoamTheme("context-menu");
   if (explicit) return explicit;
   if (Platform.OS === "ios") return "ios";
   if (Platform.OS === "android") return "android";
   return theme.platform === "iOS" ? "ios" : "android";
 }
-function ContextMenuOverlay({
+function ContextMenuOverlay(props) {
+  const os = useResolvedPlatform(props.platform);
+  const presentation = useOverlayPresentation({
+    kind: "menu",
+    itemCount: props.items.length,
+    platform: os
+  });
+  if (os === "android" && presentation !== "anchored" && !props.preview) {
+    return /* @__PURE__ */ jsx(ContextMenuSheet, { ...props });
+  }
+  return /* @__PURE__ */ jsx(AnchoredContextMenu, { ...props });
+}
+function sizeType(theme, size) {
+  if (size === "sm") return theme.type.footnote;
+  if (size === "lg") return theme.type.body;
+  return null;
+}
+function ContextMenuSheet({
+  open,
+  onClose,
+  items,
+  accessibilityLabel,
+  labels: labelsProp,
+  density,
+  size
+}) {
+  const labels = useLabels("contextMenu", DEFAULT_LABELS, labelsProp);
+  const { styles, theme } = useStyles(sheet, { platform: "android" });
+  const ordered = orderContextMenuItems(items);
+  return /* @__PURE__ */ jsx(Sheet, { open, onClose, children: /* @__PURE__ */ jsxs(View, { accessibilityRole: "menu", accessibilityLabel: accessibilityLabel ?? labels.actions, children: [
+    ordered.map((item) => {
+      const tint = item.destructive ? theme.color.dangerOnSoft : theme.color.text;
+      return /* @__PURE__ */ jsxs(
+        Pressable,
+        {
+          accessibilityRole: "menuitem",
+          accessibilityLabel: item.label,
+          accessibilityState: { disabled: item.disabled === true, checked: item.checked },
+          disabled: item.disabled === true,
+          onPress: () => {
+            haptics.selection();
+            onClose();
+            item.onSelect?.();
+          },
+          style: ({ pressed }) => [
+            styles.sheetRow,
+            density === "compact" ? { paddingVertical: theme.space.s2 } : null,
+            pressed ? item.destructive ? styles.rowPressedDanger : styles.sheetRowPressed : null,
+            item.disabled ? styles.rowDisabled : null
+          ],
+          children: [
+            item.icon ? /* @__PURE__ */ jsx(
+              Icon,
+              {
+                name: item.icon,
+                size: theme.icon.md,
+                color: item.destructive ? theme.color.dangerOnSoft : theme.color.text2
+              }
+            ) : null,
+            /* @__PURE__ */ jsx(Text, { style: [styles.sheetLabel, sizeType(theme, size), { color: tint }], children: item.label }),
+            item.checked ? /* @__PURE__ */ jsx(Icon, { name: "check", size: theme.icon.md, color: tint }) : null
+          ]
+        },
+        item.key
+      );
+    }),
+    /* @__PURE__ */ jsx(
+      Pressable,
+      {
+        accessibilityRole: "menuitem",
+        accessibilityLabel: labels.cancel,
+        onPress: onClose,
+        style: ({ pressed }) => [styles.sheetRow, pressed ? styles.sheetRowPressed : null],
+        children: /* @__PURE__ */ jsx(Text, { style: [styles.sheetLabel, styles.sheetCancel], children: labels.cancel })
+      }
+    )
+  ] }) });
+}
+function AnchoredContextMenu({
   open,
   onClose,
   items,
   anchor,
   platform,
   lift,
+  preview,
+  onPreviewPress,
+  previewLabel,
   radius,
-  accessibilityLabel = "Actions",
-  closeLabel = "Close menu",
-  motion = "full"
+  accessibilityLabel,
+  closeLabel,
+  labels: labelsProp,
+  motion = "full",
+  density,
+  size
 }) {
-  const theme = useLoamTheme();
+  const labels = useLabels("contextMenu", DEFAULT_LABELS, labelsProp);
+  const theme = useLoamTheme("context-menu");
   const os = useResolvedPlatform(platform);
   const ios = os === "ios";
   const { styles } = useStyles(sheet, { platform: os });
@@ -212,6 +335,13 @@ function ContextMenuOverlay({
   const place = placeContextMenu(rect, window, os);
   const ordered = orderContextMenuItems(items);
   const liftRadius = radius ?? theme.radius.lg;
+  const [columnHeight, setColumnHeight] = React.useState(0);
+  const withPreview = ios && preview != null;
+  const columnWidth = Math.min(PREVIEW_MAX_WIDTH, window.width - theme.space.s4 * 2);
+  const columnTop = Math.max(
+    MENU_MIN_TOP,
+    Math.min(rect.y + rect.height + theme.space.s2, window.height - columnHeight - theme.space.s4)
+  );
   return /* @__PURE__ */ jsx(
     Modal,
     {
@@ -229,15 +359,17 @@ function ContextMenuOverlay({
             {
               style: StyleSheet.absoluteFill,
               accessibilityRole: "button",
-              accessibilityLabel: closeLabel,
+              accessibilityLabel: closeLabel ?? labels.closeMenu,
               onPress: onClose
             }
           )
         ] }),
-        ios && lift != null ? /* @__PURE__ */ jsx(
+        ios && lift != null && !withPreview ? /* @__PURE__ */ jsx(
           Animated.View,
           {
             pointerEvents: "none",
+            accessibilityElementsHidden: true,
+            importantForAccessibility: "no-hide-descendants",
             style: [
               styles.lift,
               {
@@ -255,11 +387,66 @@ function ContextMenuOverlay({
             children: lift
           }
         ) : null,
-        /* @__PURE__ */ jsxs(
+        withPreview ? /* @__PURE__ */ jsxs(
+          Animated.View,
+          {
+            onLayout: (e) => setColumnHeight(e.nativeEvent.layout.height),
+            style: [
+              styles.previewColumn,
+              {
+                top: columnTop,
+                left: (window.width - columnWidth) / 2,
+                width: columnWidth,
+                opacity: menuOpacity,
+                transform: [{ scale: menuScale }]
+              }
+            ],
+            children: [
+              /* @__PURE__ */ jsx(
+                Pressable,
+                {
+                  accessibilityRole: "button",
+                  accessibilityLabel: previewLabel,
+                  onPress: () => {
+                    onClose();
+                    onPreviewPress?.();
+                  },
+                  style: styles.platter,
+                  children: preview
+                }
+              ),
+              ordered.length > 0 ? /* @__PURE__ */ jsxs(
+                View,
+                {
+                  accessibilityViewIsModal: true,
+                  accessibilityRole: "menu",
+                  accessibilityLabel: accessibilityLabel ?? labels.actions,
+                  style: [styles.menu, styles.menuInColumn, { width: place.width }],
+                  children: [
+                    /* @__PURE__ */ jsx(View, { style: [StyleSheet.absoluteFill, styles.translucency] }),
+                    ordered.map((item, i) => /* @__PURE__ */ jsx(
+                      MenuItem,
+                      {
+                        item,
+                        platform: os,
+                        last: i === ordered.length - 1,
+                        onClose,
+                        density,
+                        size
+                      },
+                      item.key
+                    ))
+                  ]
+                }
+              ) : null
+            ]
+          }
+        ) : /* @__PURE__ */ jsxs(
           Animated.View,
           {
+            accessibilityViewIsModal: true,
             accessibilityRole: "menu",
-            accessibilityLabel,
+            accessibilityLabel: accessibilityLabel ?? labels.actions,
             style: [
               styles.menu,
               {
@@ -278,7 +465,9 @@ function ContextMenuOverlay({
                   item,
                   platform: os,
                   last: i === ordered.length - 1,
-                  onClose
+                  onClose,
+                  density,
+                  size
                 },
                 item.key
               ))
@@ -293,9 +482,12 @@ function MenuItem({
   item,
   platform,
   last,
-  onClose
+  onClose,
+  density,
+  size: labelSize,
+  highlighted = false
 }) {
-  const theme = useLoamTheme();
+  const theme = useLoamTheme("context-menu");
   const ios = platform === "ios";
   const { styles } = useStyles(sheet, { platform, separated: ios && !last });
   const size = React.useRef({ width: 0, height: 0 });
@@ -348,31 +540,45 @@ function MenuItem({
     if (ios) onClose();
     else timer.current = setTimeout(onClose, theme.duration.fast);
   };
-  const tint = item.destructive === true ? theme.color.danger : theme.color.text;
+  const tint = item.destructive === true ? theme.color.dangerOnSoft : 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
+      color: item.destructive === true ? theme.color.dangerOnSoft : theme.color.text3
     }
   );
+  const check = item.checked ? /* @__PURE__ */ jsx(Icon, { name: "check", size: theme.icon.sm, color: tint }) : null;
   return /* @__PURE__ */ jsxs(
     Pressable,
     {
       accessibilityRole: "menuitem",
       accessibilityLabel: item.label,
+      accessibilityState: { disabled: item.disabled === true, checked: item.checked },
+      disabled: item.disabled === true,
       onLayout,
       onPress,
       style: ({ pressed }) => [
         styles.item,
-        // iOS has no ripple, so it gets the state layer instead.
-        pressed && ios ? styles.itemPressed : null
+        density === "compact" ? { paddingVertical: theme.space.s2 } : null,
+        // iOS has no ripple, so it gets the state layer instead; a destructive
+        // row presses to the danger-soft fill.
+        pressed && ios || highlighted ? item.destructive ? styles.rowPressedDanger : styles.itemPressed : null,
+        item.disabled === true ? styles.rowDisabled : 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 }),
+        /* @__PURE__ */ jsx(
+          Text,
+          {
+            style: [styles.itemLabel, sizeType(theme, labelSize), { color: tint }],
+            numberOfLines: 1,
+            children: item.label
+          }
+        ),
         ios ? glyph : null,
+        check,
         ripple ? /* @__PURE__ */ jsx(
           Animated.View,
           {
@@ -395,6 +601,57 @@ function MenuItem({
     }
   );
 }
+function ContextMenuPreview({
+  items,
+  platform,
+  highlightedKey,
+  title,
+  density,
+  size,
+  labels: labelsProp
+}) {
+  const labels = useLabels("contextMenu", DEFAULT_LABELS, labelsProp);
+  const os = useResolvedPlatform(platform);
+  const { styles } = useStyles(sheet, { platform: os });
+  const ordered = orderContextMenuItems(items);
+  const { width: menuWidth } = placeContextMenu(
+    { x: 0, y: 0, height: 0 },
+    { width: Infinity, height: Infinity },
+    os
+  );
+  return /* @__PURE__ */ jsxs(
+    View,
+    {
+      accessibilityRole: "menu",
+      accessibilityLabel: title ?? labels.actions,
+      style: [styles.menu, styles.menuInline, { width: menuWidth }],
+      children: [
+        os === "ios" ? /* @__PURE__ */ jsx(View, { style: [StyleSheet.absoluteFill, styles.translucency] }) : null,
+        title ? /* @__PURE__ */ jsx(Text, { style: styles.sectionLabel, children: title }) : null,
+        ordered.map((item, i) => /* @__PURE__ */ jsx(
+          MenuItem,
+          {
+            item,
+            platform: os,
+            last: i === ordered.length - 1,
+            onClose: () => {
+            },
+            density,
+            size,
+            highlighted: item.key === highlightedKey
+          },
+          item.key
+        ))
+      ]
+    }
+  );
+}
+var DEFAULT_LABELS = {
+  actions: "Actions",
+  closeMenu: "Close menu",
+  showActions: "Show actions",
+  cancel: "Cancel"
+};
 function ContextMenu({
   items,
   children,
@@ -403,12 +660,18 @@ function ContextMenu({
   platform,
   accessibilityLabel,
   radius,
+  androidRipple,
   style,
   onOpen,
   onClose,
-  motion = "full"
+  motion = "full",
+  density,
+  size,
+  selected = false,
+  labels: labelsProp
 }) {
-  const theme = useLoamTheme();
+  const labels = useLabels("contextMenu", DEFAULT_LABELS, labelsProp);
+  const theme = useLoamTheme("context-menu");
   const os = useResolvedPlatform(platform);
   const ios = os === "ios";
   const { styles } = useStyles(sheet, { platform: os });
@@ -459,12 +722,16 @@ function ContextMenu({
         children: /* @__PURE__ */ jsx(
           Pressable,
           {
-            style: { borderRadius: triggerRadius },
+            style: [
+              { borderRadius: triggerRadius },
+              selected ? { backgroundColor: theme.state.selected } : null
+            ],
+            android_ripple: androidRipple,
             accessibilityRole: "button",
             accessibilityLabel,
-            accessibilityState: { disabled, expanded: open },
+            accessibilityState: { disabled, expanded: open, selected: selected || void 0 },
             ...expandedProps(open),
-            accessibilityActions: [{ name: "longpress", label: "Show actions" }],
+            accessibilityActions: [{ name: "longpress", label: labels.showActions }],
             onAccessibilityAction: (e) => {
               if (e.nativeEvent.actionName === "longpress") openMenu();
             },
@@ -509,12 +776,34 @@ function ContextMenu({
         lift: children,
         radius: triggerRadius,
         accessibilityLabel,
-        motion
+        labels: labelsProp,
+        motion,
+        density,
+        size
       }
     )
   ] });
 }
 var sheet = createStyleSheet((theme) => ({
+  sheetRow: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: theme.space.s3,
+    minHeight: theme.space[48],
+    paddingHorizontal: theme.space.s3,
+    borderRadius: theme.radius.md
+  },
+  sheetRowPressed: { backgroundColor: theme.state.pressed },
+  sheetLabel: {
+    flex: 1,
+    fontFamily: theme.font.sans,
+    fontSize: theme.fontSize[16]
+  },
+  sheetCancel: {
+    textAlign: "center",
+    fontWeight: theme.fontWeight.semibold,
+    color: theme.color.text
+  },
   /** The dim behind the menu. iOS whispers (`scrimLight`), Android commits (`scrim`). */
   dim: {
     variants: {
@@ -534,6 +823,25 @@ var sheet = createStyleSheet((theme) => ({
     position: "absolute",
     ...theme.shadow.lg
   },
+  /** The preview platter and the menu under it (iOS context preview). */
+  previewColumn: {
+    position: "absolute",
+    gap: theme.space.s2,
+    alignItems: "flex-start",
+    transformOrigin: "top center"
+  },
+  platter: {
+    alignSelf: "stretch",
+    backgroundColor: theme.color.surface,
+    borderRadius: theme.radius.md,
+    borderWidth: theme.borderWidth.base,
+    borderColor: theme.color.border,
+    padding: theme.space.s4,
+    gap: theme.space.s3,
+    ...theme.shadow.lg
+  },
+  /** The menu laid out in the column rather than placed absolutely. */
+  menuInColumn: { position: "relative", transformOrigin: "top left" },
   /** The in-place trigger while its copy is lifted. */
   liftedAway: { opacity: 0 },
   menu: {
@@ -542,11 +850,12 @@ var sheet = createStyleSheet((theme) => ({
     // 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,
+    // An anchored overlay sits at sh-md (was sh-lg); the lifted copy keeps lg.
+    ...theme.shadow.md,
     variants: {
       platform: {
-        // Reference radius 16 → `radius.lg` (19); 12 → `radius.md` (13).
-        ios: { borderRadius: theme.radius.lg },
+        // r 12 on both platforms → `radius.md`.
+        ios: { borderRadius: theme.radius.md },
         android: {
           borderRadius: theme.radius.md,
           backgroundColor: theme.color.surface,
@@ -590,6 +899,22 @@ var sheet = createStyleSheet((theme) => ({
     }
   },
   itemPressed: { backgroundColor: theme.state.pressed },
+  // ContextMenuPreview: the anchored menu in flow, at the reference width.
+  menuInline: { position: "relative" },
+  sectionLabel: {
+    fontFamily: theme.font.sans,
+    fontSize: theme.type.caption1.fontSize,
+    lineHeight: theme.type.caption1.lineHeight,
+    fontWeight: theme.fontWeight.semibold,
+    textTransform: "uppercase",
+    color: theme.color.text3,
+    paddingHorizontal: theme.space.s4,
+    paddingTop: theme.space.s3,
+    paddingBottom: theme.space.s1
+  },
+  // loam-contrast-ignore — transient pressed-row wash inside a bordered menu; the row has no surface of its own.
+  rowPressedDanger: { backgroundColor: theme.color.dangerSoft },
+  rowDisabled: { opacity: theme.state.disabledOpacity },
   itemLabel: {
     flexShrink: 1,
     fontFamily: theme.font.sans,
@@ -617,4 +942,4 @@ var sheet = createStyleSheet((theme) => ({
   }
 }));
 
-export { ContextMenu, ContextMenuOverlay, LONG_PRESS_DELAY_MS, orderContextMenuItems, placeContextMenu };
+export { ANDROID_ANCHORED_MENU_MAX, ContextMenu, ContextMenuOverlay, ContextMenuPreview, LONG_PRESS_DELAY_MS, orderContextMenuItems, placeContextMenu, useOverlayPresentation };

package/dist/{chunk-CJ5EOYZE.js → chunk-7IVF6JLJ.js}

@@ -1,16 +1,28 @@
-import { Spinner } from './chunk-O7AE6DAF.js';
+import { alignItemsStyle } from './chunk-TUACVJNG.js';
+import { Spinner } from './chunk-G7H3NX3G.js';
+import { useLabels } from './chunk-APCWFOZW.js';
 import * as React from 'react';
 import { FlatList, View } from 'react-native';
 import { createStyleSheet, useStyles } from '@btndprojects/loam-theme-native';
 import { jsx, Fragment } from 'react/jsx-runtime';
 
+var DEFAULT_LABELS = {
+  loadingMore: "Loading more"
+};
 function loadMoreIfNeeded(opts) {
   if (opts.hasMore && !opts.loading) opts.onLoadMore();
 }
 var FOOTER_SPINNER_SIZE = "lg";
-function Footer() {
-  const { styles } = useStyles(sheet);
-  return /* @__PURE__ */ jsx(View, { style: styles.footer, children: /* @__PURE__ */ jsx(Spinner, { size: FOOTER_SPINNER_SIZE, accessibilityLabel: "Loading more" }) });
+function Footer({ label }) {
+  const { styles, theme } = useStyles(sheet);
+  return /* @__PURE__ */ jsx(View, { style: styles.footer, children: /* @__PURE__ */ jsx(
+    Spinner,
+    {
+      size: FOOTER_SPINNER_SIZE,
+      color: theme.color.text2,
+      accessibilityLabel: label
+    }
+  ) });
 }
 function InfiniteList({
   data,
@@ -23,9 +35,13 @@ function InfiniteList({
   // Accepted for API parity but intentionally inert — a virtualized list must
   // not animate (recycled rows would flicker). Destructured so it is never
   // forwarded onto the underlying FlatList.
-  motion: _motion = "full"
+  motion: _motion = "full",
+  labels: labelsProp,
+  orientation = "vertical",
+  align
 }) {
   const { styles } = useStyles(sheet);
+  const labels = useLabels("infiniteList", DEFAULT_LABELS, labelsProp);
   const handleEndReached = React.useCallback(() => {
     loadMoreIfNeeded({ hasMore, loading, onLoadMore });
   }, [hasMore, loading, onLoadMore]);
@@ -42,8 +58,9 @@ function InfiniteList({
       keyExtractor,
       onEndReached: handleEndReached,
       onEndReachedThreshold,
-      contentContainerStyle: styles.content,
-      ListFooterComponent: loading ? /* @__PURE__ */ jsx(Footer, {}) : null
+      horizontal: orientation === "horizontal",
+      contentContainerStyle: [styles.content, alignItemsStyle(align)],
+      ListFooterComponent: loading ? /* @__PURE__ */ jsx(Footer, { label: labels.loadingMore }) : null
     }
   );
 }