@btndprojects/loam-ui-native 0.2.1 → 0.3.1

package/dist/{chunk-ZLTO5VQI.js → chunk-ALJYZLNQ.js}

@@ -1,5 +1,8 @@
+import { Avatar } from './chunk-JWCVBFDU.js';
+import { isAndroidIdiom } from './chunk-TH4PW2WU.js';
 import { useLabels } from './chunk-APCWFOZW.js';
-import { Icon } from './chunk-UXGIW7OK.js';
+import { useFocusRing } from './chunk-2YKVID2V.js';
+import { Icon } from './chunk-PCEFCOLN.js';
 import * as React from 'react';
 import { Dimensions, Animated, Easing, PanResponder, View, Platform, findNodeHandle, AccessibilityInfo, StyleSheet, Pressable, Text, Modal } from 'react-native';
 import { createStyleSheet, useLoamTheme, useStyles } from '@btndprojects/loam-theme-native';
@@ -10,6 +13,7 @@ var DEFAULT_LABELS = {
   close: "Close navigation"
 };
 var PANEL_FRACTION = 0.78;
+var SIZE_FRACTION = { sm: 0.66, md: PANEL_FRACTION, lg: 0.88 };
 var SWIPE_SLOP = 10;
 var SWIPE_DISMISS_FRACTION = 0.3;
 var SWIPE_FLICK_VELOCITY = 0.4;
@@ -27,12 +31,12 @@ var SPEC = {
   headerPadX: 10,
   /** Gap between the name and the email. */
   identityGap: 1,
-  /** Avatar diameter. */
-  avatar: 40,
-  /** Display-name size. */
-  nameSize: 14.5,
-  /** Email size. */
-  emailSize: 11.5
+  /** Row height on iOS (the OS list row). */
+  rowIOS: 44,
+  /** Row height on Android (the Material drawer item). */
+  rowAndroid: 56,
+  /** Leading glyph size. */
+  glyph: 22
 };
 function NavDrawer({
   open,
@@ -46,12 +50,18 @@ function NavDrawer({
   motion = "full",
   inline = false,
   onOpen,
+  platform,
+  variant = "default",
+  size,
   labels: labelsProp
 }) {
   const labels = useLabels("navDrawer", DEFAULT_LABELS, labelsProp);
   const theme = useLoamTheme("nav-drawer");
   const { styles } = useStyles(navDrawer);
-  const panelWidth = React.useMemo(() => Dimensions.get("window").width * PANEL_FRACTION, []);
+  const android = isAndroidIdiom(theme, platform);
+  const fraction = size ? SIZE_FRACTION[size] : PANEL_FRACTION;
+  const panelWidth = React.useMemo(() => Dimensions.get("window").width * fraction, [fraction]);
+  const rowHeight = size ? size === "sm" ? theme.tapMin : Math.max(theme.tapMin, theme.ctl.lg) + (size === "lg" ? theme.space.s2 : 0) : void 0;
   const reducedMotion = theme.reduceMotion || motion === "reduced";
   const instantMotion = motion === "none";
   const [visible, setVisible] = React.useState(open);
@@ -274,8 +284,9 @@ function NavDrawer({
         accessibilityLabel: userName ?? labels.navigation,
         style: [
           styles.panel,
+          variant === "soft" ? { backgroundColor: theme.color.surface2 } : null,
           {
-            width: inline ? `${PANEL_FRACTION * 100}%` : panelWidth,
+            width: inline ? `${fraction * 100}%` : panelWidth,
             paddingTop: SPEC.panelPadTop + safeAreaTop,
             opacity: panelOpacity,
             transform: [{ translateX }]
@@ -283,7 +294,7 @@ function NavDrawer({
         ],
         children: [
           (avatarInitials || userName || userEmail) && /* @__PURE__ */ jsxs(View, { style: styles.header, children: [
-            avatarInitials ? /* @__PURE__ */ jsx(View, { style: styles.avatar, children: /* @__PURE__ */ jsx(Text, { style: styles.avatarText, children: avatarInitials }) }) : null,
+            avatarInitials || userName ? /* @__PURE__ */ jsx(Avatar, { size: "lg", name: userName ?? avatarInitials }) : null,
             /* @__PURE__ */ jsxs(View, { style: styles.identity, children: [
               userName ? /* @__PURE__ */ jsx(Text, { style: styles.userName, numberOfLines: 1, children: userName }) : null,
               userEmail ? /* @__PURE__ */ jsx(Text, { style: styles.userEmail, numberOfLines: 1, children: userEmail }) : null
@@ -291,23 +302,28 @@ function NavDrawer({
           ] }),
           /* @__PURE__ */ jsx(View, { style: styles.list, children: items.map((item, i) => {
             const active = item.active ?? false;
-            const fg = active ? theme.color.accentOnSoft : theme.color.text;
-            return /* @__PURE__ */ jsxs(
-              Pressable,
-              {
-                accessibilityRole: "link",
-                accessibilityLabel: item.label,
-                accessibilityState: { selected: active },
-                ...active ? { "aria-current": "page" } : null,
-                onPress: () => handleItemPress(item),
-                style: [styles.item, active ? styles.itemActive : null],
-                children: [
-                  /* @__PURE__ */ jsx(Icon, { name: item.icon, size: 20, color: fg }),
-                  /* @__PURE__ */ jsx(Text, { style: [styles.itemLabel, { color: fg }], numberOfLines: 1, children: item.label })
-                ]
-              },
-              `${item.label}-${i}`
-            );
+            const section = item.section && item.section !== items[i - 1]?.section ? item.section : null;
+            return /* @__PURE__ */ jsxs(React.Fragment, { children: [
+              section ? /* @__PURE__ */ jsx(
+                Text,
+                {
+                  accessibilityRole: "header",
+                  style: [styles.section, android ? styles.sectionAndroid : null],
+                  children: android ? section : section.toUpperCase()
+                }
+              ) : null,
+              /* @__PURE__ */ jsx(
+                DrawerRow,
+                {
+                  item,
+                  active,
+                  android,
+                  rowHeight,
+                  styles,
+                  onPress: () => handleItemPress(item)
+                }
+              )
+            ] }, `${item.label}-${i}`);
           }) })
         ]
       }
@@ -329,6 +345,49 @@ function NavDrawer({
     )
   ] });
 }
+function DrawerRow({
+  item,
+  active,
+  android,
+  rowHeight,
+  styles,
+  onPress
+}) {
+  const theme = useLoamTheme("nav-drawer");
+  const focusRing = useFocusRing(theme.radius.md);
+  return /* @__PURE__ */ jsxs(
+    Pressable,
+    {
+      accessibilityRole: "link",
+      accessibilityLabel: item.count !== void 0 ? `${item.label}, ${item.count}` : item.label,
+      accessibilityState: { selected: active },
+      ...active ? { "aria-current": "page" } : null,
+      onPress,
+      onFocus: focusRing.handlers.onFocus,
+      onBlur: focusRing.handlers.onBlur,
+      android_ripple: android ? { color: theme.state.pressed } : void 0,
+      style: ({ pressed }) => [
+        styles.item,
+        { minHeight: rowHeight ?? (android ? SPEC.rowAndroid : SPEC.rowIOS) },
+        active ? styles.itemActive : null,
+        pressed && !android && !active ? styles.itemPressed : null,
+        focusRing.style
+      ],
+      children: [
+        /* @__PURE__ */ jsx(
+          Icon,
+          {
+            name: item.icon,
+            size: SPEC.glyph,
+            color: active ? theme.color.accentStrong : theme.color.text2
+          }
+        ),
+        /* @__PURE__ */ jsx(Text, { style: [styles.itemLabel, android ? styles.itemLabelAndroid : null], numberOfLines: 1, children: item.label }),
+        item.count !== void 0 ? /* @__PURE__ */ jsx(Text, { style: styles.itemCount, accessibilityElementsHidden: true, importantForAccessibility: "no", children: item.count }) : null
+      ]
+    }
+  );
+}
 var navDrawer = createStyleSheet((theme) => ({
   root: {
     flex: 1,
@@ -369,20 +428,6 @@ var navDrawer = createStyleSheet((theme) => ({
     paddingHorizontal: SPEC.headerPadX,
     paddingBottom: theme.space.s4
   },
-  avatar: {
-    width: SPEC.avatar,
-    height: SPEC.avatar,
-    borderRadius: theme.radius.full,
-    backgroundColor: theme.color.accent,
-    alignItems: "center",
-    justifyContent: "center"
-  },
-  avatarText: {
-    fontFamily: theme.font.sans,
-    fontWeight: theme.fontWeight.bold,
-    fontSize: theme.fontSize[14],
-    color: theme.color.accentInk
-  },
   // `minWidth: 0` lets a long name/email truncate instead of widening the row.
   identity: {
     flex: 1,
@@ -392,47 +437,72 @@ var navDrawer = createStyleSheet((theme) => ({
   },
   userName: {
     fontFamily: theme.font.sans,
-    fontWeight: theme.fontWeight.bold,
-    fontSize: SPEC.nameSize,
-    lineHeight: SPEC.nameSize * theme.lineHeight.snug,
+    fontWeight: theme.fontWeight.semibold,
+    fontSize: theme.type.body.fontSize,
+    lineHeight: theme.type.body.lineHeight,
     color: theme.color.text
   },
   userEmail: {
     fontFamily: theme.font.sans,
-    fontSize: SPEC.emailSize,
-    lineHeight: SPEC.emailSize * theme.lineHeight.snug,
+    fontSize: theme.type.footnote.fontSize,
+    lineHeight: theme.type.footnote.lineHeight,
     color: theme.color.text2
   },
   // Horizontal padding now lives on the panel, so the rows sit inside its 12px.
   list: {
     gap: SPEC.itemGap
   },
+  section: {
+    fontFamily: theme.font.sans,
+    fontSize: theme.type.footnote.fontSize,
+    lineHeight: theme.type.footnote.lineHeight,
+    color: theme.color.text2,
+    paddingHorizontal: theme.space.s3,
+    paddingTop: theme.space.s4,
+    paddingBottom: theme.space[6]
+  },
+  // Material titleSmall, accent-strong.
+  sectionAndroid: {
+    fontSize: theme.fontSize[14],
+    lineHeight: theme.space[20],
+    fontWeight: theme.fontWeight.medium,
+    color: theme.color.accentStrong
+  },
+  // OS-tier rows (44 iOS / 56 Android) at r 12; the height is set at the use site.
   item: {
     flexDirection: "row",
     alignItems: "center",
-    // Reference (buildDrawer): `gap:14px` — 14px is a step of the spacing ramp.
     gap: theme.space[14],
-    // Reference: `padding:13px 12px` — use paddingVertical instead of fixed height.
-    paddingVertical: theme.space[13],
     paddingHorizontal: theme.space.s3,
     borderRadius: theme.radius.md,
-    backgroundColor: "transparent",
-    // Reserved on every row, not just the active one: a border that appears with
-    // the state would move every label 1px when the selection changes.
-    borderWidth: theme.borderWidth.base,
-    borderColor: "transparent"
+    overflow: "hidden",
+    backgroundColor: "transparent"
   },
+  // Selection is state-selected and the accent-strong glyph; no edge (no start bar).
   itemActive: {
-    backgroundColor: theme.color.accentSoft,
-    // Which item you are on is carried by a fill alone, and a fill is what high
-    // contrast re-resolves away — the accent edge is what still says "here".
-    borderColor: theme.edge.accent
+    backgroundColor: theme.state.selected
+  },
+  itemPressed: {
+    backgroundColor: theme.state.pressed
   },
   itemLabel: {
+    flex: 1,
     fontFamily: theme.font.sans,
-    fontWeight: theme.fontWeight.semibold,
-    // Reference (buildDrawer): `font-size:15px` — 15px, read from the ramp rather than hardcoded.
-    fontSize: theme.fontSize[15]
+    fontSize: theme.type.body.fontSize,
+    lineHeight: theme.type.body.lineHeight,
+    fontWeight: theme.fontWeight.regular,
+    color: theme.color.text
+  },
+  itemCount: {
+    fontFamily: theme.font.sans,
+    fontSize: theme.fontSize[13],
+    color: theme.color.text3
+  },
+  // Material label large, 14 / 500.
+  itemLabelAndroid: {
+    fontSize: theme.fontSize[14],
+    lineHeight: theme.space[20],
+    fontWeight: theme.fontWeight.medium
   }
 }));
 

package/dist/{chunk-GDKVKNR2.js → chunk-AQ5FIG74.js}

@@ -1,7 +1,11 @@
+import { resolveTextRole } from './chunk-L4D5LHCH.js';
+import { SkeletonText } from './chunk-YJ5PXOX3.js';
+import { softToneSkin } from './chunk-PJLTKDVY.js';
 import { useLabels } from './chunk-APCWFOZW.js';
-import { Icon } from './chunk-UXGIW7OK.js';
+import { useFocusRing } from './chunk-2YKVID2V.js';
+import { Icon } from './chunk-PCEFCOLN.js';
 import * as React from 'react';
-import { Animated, Pressable, Text, Easing, Platform, findNodeHandle, AccessibilityInfo, Modal, View } from 'react-native';
+import { Animated, Pressable, Text, Platform, Easing, findNodeHandle, AccessibilityInfo, Modal, View } from 'react-native';
 import { useStyles, createStyleSheet, useLoamTheme } from '@btndprojects/loam-theme-native';
 import { jsx, jsxs } from 'react/jsx-runtime';
 
@@ -16,13 +20,22 @@ var defaultRememberStorage = {
 function measureBox(node) {
   return new Promise((resolve) => {
     if (!node?.measureInWindow) return resolve(null);
-    node.measureInWindow((x, y, w, h) => resolve(Number.isFinite(x) && w > 0 && h > 0 ? { x, y, w, h } : null));
+    node.measureInWindow(
+      (x, y, w, h) => resolve(Number.isFinite(x) && w > 0 && h > 0 ? { x, y, w, h } : null)
+    );
   });
 }
 var DEFAULT_LABELS = {
   closeDialog: "Close dialog",
   close: "Close"
 };
+var DialogPlatformContext = React.createContext(void 0);
+function resolveDialogPlatform(explicit, themed) {
+  if (explicit) return explicit;
+  if (Platform.OS === "ios") return "ios";
+  if (Platform.OS === "android") return "android";
+  return themed === "Android" ? "android" : "ios";
+}
 function Dialog({
   open,
   defaultOpen = false,
@@ -37,13 +50,20 @@ function Dialog({
   showClose = dismissible,
   accessibilityLabel,
   motion = "full",
+  size,
+  loading = false,
+  tone,
   morphFrom,
   children,
-  labels: labelsProp
+  labels: labelsProp,
+  platform
 }) {
   const labels = useLabels("dialog", DEFAULT_LABELS, labelsProp);
   const theme = useLoamTheme("dialog");
+  const closeRing = useFocusRing(theme.ctl.r.md);
+  const os = resolveDialogPlatform(platform, theme.platform);
   const { styles } = useStyles(sheet);
+  const skin = tone ? softToneSkin(theme, tone) : null;
   const controlled = open !== void 0;
   const persist = remember && rememberKey != null;
   const reducedMotion = theme.reduceMotion || motion === "reduced";
@@ -89,7 +109,11 @@ function Dialog({
     const ox = root?.x ?? 0;
     const oy = root?.y ?? 0;
     const radius = Math.abs(src.w - src.h) < 2 ? src.h / 2 : Math.min(src.h / 2, theme.radius.md);
-    return { src: { ...src, x: src.x - ox, y: src.y - oy }, dst: { ...dst, x: dst.x - ox, y: dst.y - oy }, radius };
+    return {
+      src: { ...src, x: src.x - ox, y: src.y - oy },
+      dst: { ...dst, x: dst.x - ox, y: dst.y - oy },
+      radius
+    };
   }, [morphFrom, theme.radius.md]);
   const onCardLayout = React.useCallback(() => {
     if (!pending) return;
@@ -204,7 +228,12 @@ function Dialog({
     // The content arrives once the clip is big enough to hold it.
     opacity: fly.interpolate({ inputRange: [0, 0.4, 1], outputRange: [0, 0, 1] })
   } : styles.rest;
-  const cardStyle = flight ? [styles.card, styles.flat, { width: flight.dst.w, maxWidth: flight.dst.w }] : [styles.card, { opacity: pending ? 0 : progress, transform: [{ scale: cardScale }] }];
+  const cardStyle = flight ? [styles.card, styles.flat, { width: flight.dst.w, maxWidth: flight.dst.w }] : [
+    styles.card,
+    size ? { maxWidth: theme.dialog[size] } : null,
+    skin ? { borderWidth: theme.borderWidth.thin, borderColor: skin.edge } : null,
+    { opacity: pending ? 0 : progress, transform: [{ scale: cardScale }] }
+  ];
   return /* @__PURE__ */ jsx(Modal, { transparent: true, visible: mounted, animationType: "none", onRequestClose: requestDismiss, children: /* @__PURE__ */ jsxs(View, { ref: rootRef, collapsable: false, style: styles.root, children: [
     /* @__PURE__ */ jsx(
       AnimatedPressable,
@@ -224,6 +253,7 @@ function Dialog({
         role: "dialog",
         accessibilityViewIsModal: true,
         accessibilityLabel: accessibilityLabel ?? title,
+        "aria-busy": loading || void 0,
         onLayout: onCardLayout,
         style: cardStyle,
         children: [
@@ -233,23 +263,46 @@ function Dialog({
               accessibilityRole: "button",
               accessibilityLabel: labels.close,
               onPress: requestDismiss,
-              style: styles.close,
-              hitSlop: 8,
-              children: /* @__PURE__ */ jsx(Icon, { name: "x", size: 20, color: theme.color.text3 })
+              onFocus: closeRing.handlers.onFocus,
+              onBlur: closeRing.handlers.onBlur,
+              style: ({ pressed }) => [
+                styles.close,
+                pressed && styles.closePressed,
+                closeRing.focused && closeRing.style
+              ],
+              hitSlop: Math.max(0, (theme.tapMin - theme.ctl.iconBtn) / 2),
+              children: /* @__PURE__ */ jsx(Icon, { name: "x", size: theme.ctl.icon.md, color: theme.color.text3 })
             }
           ) : null,
-          title ? /* @__PURE__ */ jsx(DialogTitle, { ref: titleRef, children: title }) : null,
-          description ? /* @__PURE__ */ jsx(DialogDescription, { children: description }) : null,
-          children
+          /* @__PURE__ */ jsxs(DialogPlatformContext.Provider, { value: os, children: [
+            title ? /* @__PURE__ */ jsx(DialogTitle, { ref: titleRef, color: skin?.ink, children: title }) : null,
+            description ? /* @__PURE__ */ jsx(DialogDescription, { children: description }) : null,
+            loading ? /* @__PURE__ */ jsx(SkeletonText, { lines: 3 }) : children
+          ] })
         ]
       }
     ) }) })
   ] }) });
 }
 var DialogTitle = React.forwardRef(
-  function DialogTitle2({ children }, ref) {
-    const { styles } = useStyles(sheet);
-    return /* @__PURE__ */ jsx(Text, { ref, accessibilityRole: "header", style: styles.title, children });
+  function DialogTitle2({ children, color }, ref) {
+    const { styles, theme } = useStyles(sheet);
+    const os = resolveDialogPlatform(React.useContext(DialogPlatformContext), theme.platform);
+    const brand = theme.font.display !== theme.font.sans;
+    return /* @__PURE__ */ jsx(
+      Text,
+      {
+        ref,
+        accessibilityRole: "header",
+        style: [
+          styles.title,
+          resolveTextRole(theme, "dialogTitle", os === "android"),
+          brand ? { fontFamily: theme.font.display } : null,
+          color ? { color } : null
+        ],
+        children
+      }
+    );
   }
 );
 function DialogDescription({ children }) {
@@ -257,8 +310,17 @@ function DialogDescription({ children }) {
   return /* @__PURE__ */ jsx(Text, { style: styles.description, children });
 }
 function DialogFooter({ children }) {
-  const { styles } = useStyles(sheet);
-  return /* @__PURE__ */ jsx(View, { style: styles.footer, children });
+  const { styles, theme } = useStyles(sheet);
+  const os = resolveDialogPlatform(React.useContext(DialogPlatformContext), theme.platform);
+  if (os === "android") return /* @__PURE__ */ jsx(View, { style: styles.footer, children });
+  const ordered = React.Children.toArray(children).filter(Boolean);
+  const longLabel = ordered.some((child) => {
+    const label = React.isValidElement(child) ? child.props.children : null;
+    return typeof label === "string" && label.length >= 12;
+  });
+  const stacked = ordered.length >= 3 || longLabel;
+  const actions = stacked && ordered.length === 2 ? [...ordered].reverse() : ordered;
+  return /* @__PURE__ */ jsx(View, { style: stacked ? styles.footerStacked : styles.footerColumns, children: actions.map((child, i) => /* @__PURE__ */ jsx(View, { style: stacked ? void 0 : styles.column, children: child }, i)) });
 }
 var sheet = createStyleSheet((theme) => ({
   root: {
@@ -308,23 +370,27 @@ var sheet = createStyleSheet((theme) => ({
   },
   close: {
     position: "absolute",
-    top: theme.space.s3,
-    right: theme.space.s3,
+    top: theme.space.s4,
+    right: theme.space.s4,
     zIndex: 1,
-    padding: theme.space.s1,
-    borderRadius: theme.radius.full
+    // Ghost icon button: 36 box, the control radius, pressed = the state fill.
+    width: theme.ctl.iconBtn,
+    height: theme.ctl.iconBtn,
+    alignItems: "center",
+    justifyContent: "center",
+    borderRadius: theme.ctl.r.md
   },
+  closePressed: { backgroundColor: theme.state.pressed },
   title: {
-    fontFamily: theme.font.display,
-    fontWeight: `${theme.font.displayWeight}`,
-    fontSize: theme.fontSize[26],
+    fontFamily: theme.font.sans,
     color: theme.color.text
   },
+  // F10: the subheadline role — 15 on iOS, 14 on Android.
   description: {
     fontFamily: theme.font.sans,
-    // Reference (buildOverlays, Android): font-size:14px — sm token matches exactly.
-    fontSize: theme.fontSize[14],
-    lineHeight: theme.fontSize[14] * 1.5,
+    fontSize: theme.type.subheadline.fontSize,
+    lineHeight: theme.type.subheadline.lineHeight,
+    letterSpacing: theme.type.subheadline.letterSpacing,
     color: theme.color.text2
   },
   footer: {
@@ -332,8 +398,22 @@ var sheet = createStyleSheet((theme) => ({
     justifyContent: "flex-end",
     alignItems: "center",
     gap: theme.space.s2,
-    marginTop: theme.space.s2
-  }
+    // 24 below the body: the card's 12 gap plus this.
+    marginTop: theme.space.s3
+  },
+  footerColumns: {
+    flexDirection: "row",
+    alignItems: "stretch",
+    gap: theme.space.s2,
+    marginTop: theme.space.s3
+  },
+  footerStacked: {
+    flexDirection: "column",
+    alignItems: "stretch",
+    gap: theme.space.s2,
+    marginTop: theme.space.s3
+  },
+  column: { flex: 1 }
 }));
 
-export { Dialog, DialogDescription, DialogFooter, DialogTitle, defaultRememberStorage };
+export { Dialog, DialogDescription, DialogFooter, DialogTitle, defaultRememberStorage, measureBox };