@btndprojects/loam-ui-native 0.2.1 → 0.3.1

package/dist/{chunk-T5LTPKX6.js → chunk-IMMALLRU.js}

@@ -1,10 +1,11 @@
+import { Skeleton } from './chunk-YJ5PXOX3.js';
 import { NAMED_ROLE } from './chunk-W23G6JLF.js';
 import { useLoamLocale } from './chunk-APCWFOZW.js';
 import { useResolvedMotion } from './chunk-J64KGCGX.js';
 import * as React from 'react';
 import { StyleSheet, AccessibilityInfo, View, Text, Animated, Easing } from 'react-native';
 import { useLoamTheme } from '@btndprojects/loam-theme-native';
-import { jsx } from 'react/jsx-runtime';
+import { jsx, jsxs } from 'react/jsx-runtime';
 
 var DIGITS = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"];
 function isDigit(ch) {
@@ -55,7 +56,12 @@ function NumberRoll({
   decorative = false,
   accessibilityLabel,
   style,
-  testID
+  testID,
+  size,
+  unit,
+  tone = "default",
+  loading = false,
+  align
 }) {
   const theme = useLoamTheme("number-roll");
   const resolved = useResolvedMotion(motion, "number-roll");
@@ -75,7 +81,13 @@ function NumberRoll({
   React.useEffect(() => {
     if (announce && !decorative) AccessibilityInfo.announceForAccessibility(text);
   }, [announce, decorative, text]);
-  const flat = StyleSheet.flatten(textStyle) ?? {};
+  const sizePx = size ? { sm: 14, md: 16, lg: 24, xl: 34 }[size] : void 0;
+  const toneColor = tone === "default" ? theme.color.text : tone === "accent" ? theme.color.accentStrong : tone === "good" ? theme.color.good : tone === "warn" ? theme.color.warn : theme.color.danger;
+  const flat = {
+    ...sizePx ? { fontSize: sizePx, fontWeight: theme.fontWeight.semibold } : null,
+    ...toneColor ? { color: toneColor } : null,
+    ...StyleSheet.flatten(textStyle) ?? {}
+  };
   const fontSize = typeof flat.fontSize === "number" ? flat.fontSize : 16;
   const lineHeight = typeof flat.lineHeight === "number" ? flat.lineHeight : Math.round(fontSize * 1.2);
   const glyphStyle = {
@@ -95,37 +107,53 @@ function NumberRoll({
     "aria-hidden": true
   } : {
     accessibilityRole: NAMED_ROLE,
-    accessibilityLabel: accessibilityLabel ?? text,
+    accessibilityLabel: accessibilityLabel ?? (unit ? `${text} ${unit}` : text),
     accessibilityLiveRegion: announce ? "polite" : "none"
   };
-  return /* @__PURE__ */ jsx(View, { style: [styles.row, style], testID, ...a11y, children: /* @__PURE__ */ jsx(
+  const alignStyle = align ? { alignSelf: align === "start" ? "flex-start" : align === "end" ? "flex-end" : "center" } : void 0;
+  if (loading) {
+    return /* @__PURE__ */ jsx(View, { style: [styles.row, alignStyle, style], testID, children: /* @__PURE__ */ jsx(Skeleton, { variant: "text", width: fontSize * 3, height: lineHeight, decorative: true }) });
+  }
+  return /* @__PURE__ */ jsx(View, { style: [styles.row, alignStyle, style], testID, ...a11y, children: /* @__PURE__ */ jsxs(
     View,
     {
       style: styles.row,
       accessibilityElementsHidden: true,
       importantForAccessibility: "no-hide-descendants",
       "aria-hidden": true,
-      children: tokens.map((ch, i) => {
-        const key = String(tokens.length - 1 - i);
-        if (isDigit(ch)) {
-          const index = digitIndex++;
-          return /* @__PURE__ */ jsx(
-            RollDigit,
-            {
-              digit: rollInPending ? 0 : Number(ch),
-              index,
-              lineHeight,
+      children: [
+        tokens.map((ch, i) => {
+          const key = String(tokens.length - 1 - i);
+          if (isDigit(ch)) {
+            const index = digitIndex++;
+            return /* @__PURE__ */ jsx(
+              RollDigit,
+              {
+                digit: rollInPending ? 0 : Number(ch),
+                index,
+                lineHeight,
+                glyphStyle,
+                animate,
+                duration,
+                easing: springEasing,
+                stagger
+              },
+              key
+            );
+          }
+          return /* @__PURE__ */ jsx(Text, { style: glyphStyle, children: ch }, key);
+        }),
+        unit ? /* @__PURE__ */ jsx(
+          Text,
+          {
+            style: [
               glyphStyle,
-              animate,
-              duration,
-              easing: springEasing,
-              stagger
-            },
-            key
-          );
-        }
-        return /* @__PURE__ */ jsx(Text, { style: glyphStyle, children: ch }, key);
-      })
+              { fontWeight: theme.fontWeight.regular, marginStart: theme.space.s1 }
+            ],
+            children: unit
+          }
+        ) : null
+      ]
     }
   ) });
 }

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

@@ -1,7 +1,9 @@
-import { ContextMenuOverlay, LONG_PRESS_DELAY_MS } from './chunk-U5NLHYV6.js';
+import { ContextMenuOverlay, LONG_PRESS_DELAY_MS } from './chunk-7CGJBQUA.js';
+import { resolveTextRole } from './chunk-L4D5LHCH.js';
 import { haptics } from './chunk-NY2U3PBI.js';
+import { isAndroidIdiom } from './chunk-TH4PW2WU.js';
 import { useLabels } from './chunk-APCWFOZW.js';
-import { Icon } from './chunk-UXGIW7OK.js';
+import { Icon } from './chunk-PCEFCOLN.js';
 import * as React from 'react';
 import { View, Animated, Easing, PanResponder, Pressable, StyleSheet, Text } from 'react-native';
 import { createStyleSheet, useLoamTheme, useStyles } from '@btndprojects/loam-theme-native';
@@ -164,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,
@@ -178,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(
@@ -207,12 +247,19 @@ 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 {
@@ -225,6 +272,7 @@ function ListRow(props) {
     onSwipePeek,
     selectable = false,
     selected,
+    value,
     defaultSelected = false,
     onSelectedChange,
     draggable = false,
@@ -239,9 +287,11 @@ function ListRow(props) {
     ...rest
   } = props;
   const labels = useLabels("listRow", DEFAULT_LABELS, labelsProp);
-  const isControlled = selected !== void 0;
+  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);
@@ -318,7 +368,16 @@ function MenuRow({
         }
       }
     ),
-    /* @__PURE__ */ jsx(ContextMenuOverlay, { open, onClose: () => setOpen(false), items, anchor, accessibilityLabel: menuLabel })
+    /* @__PURE__ */ jsx(
+      ContextMenuOverlay,
+      {
+        open,
+        onClose: () => setOpen(false),
+        items,
+        anchor,
+        accessibilityLabel: menuLabel
+      }
+    )
   ] });
 }
 function SwipeRow({
@@ -880,29 +939,67 @@ function DraggableRow({
     }
   );
 }
-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: {
@@ -920,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: {}
@@ -938,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).
@@ -962,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
@@ -991,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" },

package/dist/{chunk-EVOIGUBI.js → chunk-JAVZ5JPV.js}

@@ -1,8 +1,9 @@
-import { Thinking } from './chunk-W74TXYFB.js';
+import { Thinking } from './chunk-LUZFCCSD.js';
+import { Spinner } from './chunk-G7H3NX3G.js';
 import { useLabels } from './chunk-APCWFOZW.js';
-import { Icon } from './chunk-UXGIW7OK.js';
+import { Icon } from './chunk-PCEFCOLN.js';
 import * as React from 'react';
-import { Animated, Easing, View, Text, Pressable } from 'react-native';
+import { Platform, Animated, Easing, View, Text, Pressable } from 'react-native';
 import { createStyleSheet, useStyles, useLoamTheme } from '@btndprojects/loam-theme-native';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 
@@ -49,7 +50,11 @@ function SaveStatus({
   queued,
   onRetry,
   variant = "inline",
+  platform,
   size = "md",
+  labelTone = "tinted",
+  savingIndicator = "pulse",
+  errorGlyph = "triangle",
   motion = "full",
   accessibilityLabel,
   labels: labelsProp,
@@ -65,9 +70,12 @@ function SaveStatus({
   const animate = motion === "full" && !theme.reduceMotion;
   const label = status === "saved" && savedAt != null ? labels.savedAt(formatSavedAt(savedAt, labels)) : status === "offline" && queued != null && queued > 0 ? labels.offlineQueued(queued) : labels.states[status];
   const chipPad = variant === "toolbar" ? {
-    paddingHorizontal: size === "sm" ? theme.space.s2 : theme.space.s3,
-    paddingVertical: size === "sm" ? theme.space.s1 : theme.space.s2
+    // Final 03 (R12): the chip sits on the control tier — ctl-sm / ctl-md, px 10 / 12.
+    height: size === "sm" ? theme.ctl.sm : theme.ctl.md,
+    paddingHorizontal: size === "sm" ? theme.space[10] : theme.space.s3
   } : null;
+  const android = platform !== void 0 ? platform === "android" : Platform.OS === "android" || Platform.OS !== "ios" && theme.platform === "Android";
+  const retryHit = Math.max(8, Math.round((theme.tapMin - theme.type.footnote.lineHeight) / 2));
   const fade = React.useRef(new Animated.Value(1)).current;
   const mounted = React.useRef(false);
   React.useEffect(() => {
@@ -96,7 +104,7 @@ function SaveStatus({
       testID,
       style: [styles.root, chipPad, style],
       children: [
-        /* @__PURE__ */ jsx(Animated.View, { style: [styles.line, animate ? { opacity: fade } : null], children: meta.spin ? (
+        /* @__PURE__ */ jsx(Animated.View, { style: [styles.line, animate ? { opacity: fade } : null], children: meta.spin && savingIndicator === "pulse" ? (
           // `saving` is the single-signal `thinking` recipe: a gently pulsing
           // label says "working". A spinning icon beside it would say it twice.
           // Compose the Thinking primitive as a muted, embedded indicator
@@ -116,8 +124,23 @@ function SaveStatus({
             }
           )
         ) : /* @__PURE__ */ jsxs(Fragment, { children: [
-          /* @__PURE__ */ jsx(View, { testID: "save-status-icon", children: /* @__PURE__ */ jsx(Icon, { name: meta.icon, size: iconSize, color: tone }) }),
-          /* @__PURE__ */ jsx(Text, { style: styles.label, children: label })
+          /* @__PURE__ */ jsx(View, { testID: "save-status-icon", children: meta.spin ? /* @__PURE__ */ jsx(
+            Spinner,
+            {
+              size: "sm",
+              color: tone,
+              motion,
+              accessibilityLabel: label
+            }
+          ) : /* @__PURE__ */ jsx(
+            Icon,
+            {
+              name: status === "error" && errorGlyph === "circle" ? "alert-circle" : meta.icon,
+              size: iconSize,
+              color: tone
+            }
+          ) }),
+          /* @__PURE__ */ jsx(Text, { style: [styles.label, labelTone === "ink" ? { color: theme.color.text } : null], children: label })
         ] }) }),
         status === "error" && onRetry ? /* @__PURE__ */ jsxs(
           Pressable,
@@ -125,14 +148,23 @@ function SaveStatus({
             accessibilityRole: "button",
             accessibilityLabel: labels.retry,
             onPress: onRetry,
-            hitSlop: 8,
+            hitSlop: retryHit,
             style: ({ pressed }) => [
               styles.retry,
               pressed ? { opacity: theme.state.pressedOpacity } : null
             ],
             children: [
               /* @__PURE__ */ jsx(Icon, { name: "refresh", size: iconSize, color: theme.color.danger }),
-              /* @__PURE__ */ jsx(Text, { style: styles.retryLabel, children: labels.retry })
+              /* @__PURE__ */ jsx(
+                Text,
+                {
+                  style: [
+                    styles.retryLabel,
+                    { fontWeight: android ? theme.fontWeight.medium : theme.fontWeight.semibold }
+                  ],
+                  children: labels.retry
+                }
+              )
             ]
           }
         ) : null
@@ -151,7 +183,7 @@ var sheet = createStyleSheet((theme) => ({
       variant: {
         inline: {},
         toolbar: {
-          borderRadius: theme.radius.lg,
+          borderRadius: theme.radius.sm,
           borderWidth: theme.borderWidth.base,
           borderColor: theme.color.border,
           backgroundColor: theme.color.surface2
@@ -191,9 +223,7 @@ var sheet = createStyleSheet((theme) => ({
   },
   retryLabel: {
     fontFamily: theme.font.sans,
-    fontWeight: theme.fontWeight.bold,
     color: theme.color.danger,
-    textDecorationLine: "underline",
     fontSize: theme.type.footnote.fontSize,
     lineHeight: theme.type.footnote.lineHeight,
     letterSpacing: theme.type.footnote.letterSpacing