@btndprojects/loam-ui-native 0.2.1 → 0.3.1

package/dist/chunk-BTRMA7GC.js

@@ -0,0 +1,21 @@
+import { Icon } from './chunk-PCEFCOLN.js';
+import 'react';
+import { View, Text } from 'react-native';
+import { createStyleSheet, useLoamTheme, useStyles } from '@btndprojects/loam-theme-native';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+function FieldMessage({ children, invalid = false, testID }) {
+  const theme = useLoamTheme("field-message");
+  const { styles } = useStyles(sheet);
+  return /* @__PURE__ */ jsxs(View, { style: styles.row, testID, children: [
+    invalid ? /* @__PURE__ */ jsx(Icon, { name: "alert-circle", size: theme.icon.sm, color: theme.color.dangerOnSoft }) : null,
+    /* @__PURE__ */ jsx(Text, { style: invalid ? styles.error : styles.hint, children })
+  ] });
+}
+var sheet = createStyleSheet((theme) => ({
+  row: { flexDirection: "row", alignItems: "flex-start", gap: theme.space.s1 },
+  hint: { fontFamily: theme.font.sans, fontSize: theme.fontSize[12], color: theme.color.text3 },
+  error: { fontFamily: theme.font.sans, fontSize: theme.fontSize[12], color: theme.color.dangerOnSoft }
+}));
+
+export { FieldMessage };

package/dist/{chunk-FUMHAAF3.js → chunk-C7IUWIUZ.js}

@@ -1,11 +1,14 @@
-import { ListRow } from './chunk-C4GTDLRC.js';
-import { EmptyState } from './chunk-KFJGFLMW.js';
-import { Badge } from './chunk-TN2ZNJUI.js';
-import { Avatar } from './chunk-V2OEB75Z.js';
+import { ListRow } from './chunk-JA6TK7H2.js';
+import { EmptyState } from './chunk-QJMMM4RC.js';
+import { Avatar } from './chunk-JWCVBFDU.js';
+import { resolveTextRole } from './chunk-L4D5LHCH.js';
+import { Badge } from './chunk-LGNTP5XA.js';
+import { softToneSkin } from './chunk-PJLTKDVY.js';
+import { isAndroidIdiom } from './chunk-TH4PW2WU.js';
 import { useLabels, useLoamLocale } 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, AccessibilityInfo, ScrollView, Pressable } from 'react-native';
+import { Animated, Easing, View, Text, Pressable, AccessibilityInfo, ScrollView } from 'react-native';
 import { useLoamTheme, useStyles, createStyleSheet } from '@btndprojects/loam-theme-native';
 import { jsx, jsxs } from 'react/jsx-runtime';
 
@@ -78,7 +81,14 @@ var NotificationRow = React.memo(function NotificationRow2({
   archiveLabel,
   unreadLabel,
   readLabel,
-  onActivate
+  onActivate,
+  android,
+  size,
+  density,
+  tone,
+  icon,
+  action,
+  disabled
 }) {
   const theme = useLoamTheme("notification-center");
   const { styles } = useStyles(sheet);
@@ -114,46 +124,106 @@ var NotificationRow = React.memo(function NotificationRow2({
     }).start();
   }, []);
   const translateY = enter.interpolate({ inputRange: [0, 1], outputRange: [8, 0] });
-  const leading = item.avatar ? /* @__PURE__ */ jsx(Avatar, { src: item.avatar.src, name: item.avatar.name, size: "sm" }) : /* @__PURE__ */ jsx(View, { style: styles.iconTile, children: /* @__PURE__ */ jsx(Icon, { name: item.icon ?? "bell", size: theme.icon.sm, color: theme.color.text2 }) });
+  const skin = tone ? softToneSkin(theme, tone) : null;
+  const tile = size === "sm" ? theme.space[32] : size === "lg" ? theme.space[44] : theme.space[36];
+  const leading = item.avatar ? /* @__PURE__ */ jsx(Avatar, { src: item.avatar.src, name: item.avatar.name, size }) : /* @__PURE__ */ jsx(
+    View,
+    {
+      style: [
+        styles.iconTile,
+        { width: tile, height: tile },
+        skin ? { backgroundColor: skin.fill } : null
+      ],
+      children: /* @__PURE__ */ jsx(
+        Icon,
+        {
+          name: item.icon ?? icon,
+          size: theme.icon.sm,
+          color: skin ? skin.ink : theme.color.text2
+        }
+      )
+    }
+  );
   const trailing = /* @__PURE__ */ jsxs(View, { style: styles.trailing, children: [
-    /* @__PURE__ */ jsx(Text, { style: styles.time, children: item.time }),
     /* @__PURE__ */ jsx(
-      Animated.View,
+      Text,
       {
-        importantForAccessibility: "no-hide-descendants",
-        style: [styles.dot, { opacity: unreadOpacity, pointerEvents: "none" }]
+        style: [
+          styles.time,
+          resolveTextRole(theme, android ? "bodySmall" : "footnote", android),
+          { fontWeight: theme.fontWeight.regular }
+        ],
+        children: item.time
       }
-    )
+    ),
+    action ? /* @__PURE__ */ jsx(
+      Pressable,
+      {
+        accessibilityRole: "button",
+        accessibilityLabel: action.label,
+        disabled,
+        onPress: () => action.onPress(item),
+        hitSlop: theme.space[8],
+        children: /* @__PURE__ */ jsx(
+          Text,
+          {
+            style: [
+              resolveTextRole(theme, android ? "labelMedium" : "footnote", android),
+              { color: disabled ? theme.color.text3 : theme.color.accentStrong }
+            ],
+            children: action.label
+          }
+        )
+      }
+    ) : null
   ] });
   const label = notificationAccessibilityLabel(item, read, unreadLabel, readLabel);
   return /* @__PURE__ */ jsxs(Animated.View, { style: [styles.rowWrap, { opacity: enter, transform: [{ translateY }] }], children: [
-    /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsx(View, { style: styles.gutter, pointerEvents: "none", children: /* @__PURE__ */ jsx(
       Animated.View,
       {
         importantForAccessibility: "no-hide-descendants",
-        style: [styles.accentBar, { opacity: unreadOpacity, pointerEvents: "none" }]
+        style: [
+          android ? styles.dot : styles.leadDot,
+          skin ? { backgroundColor: skin.edge, borderColor: skin.edge } : null,
+          { opacity: unreadOpacity }
+        ]
       }
-    ),
+    ) }),
     /* @__PURE__ */ jsx(
       ListRow,
       {
+        platform: android ? "android" : "ios",
+        density,
+        disabled,
         leading,
         title: /* @__PURE__ */ jsx(
           Text,
           {
             style: [
               styles.title,
-              // An unread title is one ramp step heavier than a read one, not
-              // two hand-typed CSS weights.
-              { fontWeight: unread ? theme.fontWeight.bold : theme.fontWeight.semibold }
+              // Unread steps to 600 (iOS 17) or 500 (Android 16); read is 400.
+              resolveTextRole(theme, android ? "bodyLarge" : "headline", android),
+              {
+                fontWeight: unread ? android ? theme.fontWeight.medium : theme.fontWeight.semibold : theme.fontWeight.regular
+              }
             ],
             numberOfLines: 2,
             children: item.title
           }
         ),
-        subtitle: item.body ? /* @__PURE__ */ jsx(Text, { style: styles.body, numberOfLines: 2, children: item.body }) : void 0,
+        subtitle: item.body ? /* @__PURE__ */ jsx(
+          Text,
+          {
+            style: [
+              styles.body,
+              resolveTextRole(theme, android ? "bodyMedium" : "subheadline", android)
+            ],
+            numberOfLines: 2,
+            children: item.body
+          }
+        ) : void 0,
         trailing,
-        divider,
         onPress: () => onActivate(item),
         accessibilityLabel: label,
         swipeActions: onArchive ? {
@@ -168,7 +238,8 @@ var NotificationRow = React.memo(function NotificationRow2({
           ]
         } : void 0
       }
-    )
+    ),
+    divider && !android ? /* @__PURE__ */ jsx(View, { style: styles.separator, pointerEvents: "none" }) : null
   ] });
 });
 function NotificationCenter({
@@ -180,12 +251,21 @@ function NotificationCenter({
   archiveLabel: archiveLabelProp,
   emptyLabel: emptyLabelProp,
   title: titleProp,
+  titleFace = "system",
   markAllReadLabel: markAllReadLabelProp,
   unreadLabel: unreadLabelProp,
   readLabel: readLabelProp,
   motion = "reduced",
   now,
-  labels: labelsProp
+  platform,
+  labels: labelsProp,
+  size = "md",
+  variant = "plain",
+  density,
+  tone,
+  icon = "bell",
+  action,
+  disabled = false
 }) {
   const labels = useLabels("notificationCenter", DEFAULT_LABELS, labelsProp);
   const locale = useLoamLocale();
@@ -197,6 +277,7 @@ function NotificationCenter({
   const readLabel = readLabelProp ?? labels.read;
   const { styles } = useStyles(sheet);
   const theme = useLoamTheme("notification-center");
+  const android = isAndroidIdiom(theme, platform);
   const [locallyRead, setLocallyRead] = React.useState({});
   const isRead = React.useCallback(
     (item) => item.read === true || locallyRead[item.id] === true,
@@ -254,7 +335,13 @@ function NotificationCenter({
     if (groupByDay && section.title) {
       stickyIndices.push(children.length);
       children.push(
-        /* @__PURE__ */ jsx(View, { style: styles.sectionHeader, accessibilityRole: "header", children: /* @__PURE__ */ jsx(Text, { style: styles.sectionHeaderText, children: section.title }) }, `h-${section.key}`)
+        /* @__PURE__ */ jsx(View, { style: styles.sectionHeader, accessibilityRole: "header", children: /* @__PURE__ */ jsx(
+          Text,
+          {
+            style: android ? [resolveTextRole(theme, "titleSmall", true), styles.sectionHeaderAndroid] : styles.sectionHeaderText,
+            children: section.title
+          }
+        ) }, `h-${section.key}`)
       );
     }
     section.data.forEach((item, i) => {
@@ -273,7 +360,14 @@ function NotificationCenter({
             archiveLabel,
             unreadLabel,
             readLabel,
-            onActivate: activate
+            onActivate: activate,
+            android,
+            size,
+            density,
+            tone,
+            icon,
+            action,
+            disabled
           },
           item.id
         )
@@ -281,62 +375,89 @@ function NotificationCenter({
     });
   }
   const empty = notifications.length === 0;
-  return /* @__PURE__ */ jsxs(View, { style: styles.root, children: [
-    /* @__PURE__ */ jsxs(View, { style: styles.header, children: [
-      /* @__PURE__ */ jsxs(View, { style: styles.headerTitleWrap, children: [
-        /* @__PURE__ */ jsx(Text, { accessibilityRole: "header", style: styles.headerTitle, children: title }),
-        unreadCount > 0 ? /* @__PURE__ */ jsx(
-          Badge,
+  return /* @__PURE__ */ jsxs(
+    View,
+    {
+      style: [
+        styles.root,
+        variant === "tonal" ? { backgroundColor: theme.color.surface } : null,
+        variant === "bordered" ? styles.rootBordered : null
+      ],
+      children: [
+        /* @__PURE__ */ jsxs(View, { style: styles.header, children: [
+          /* @__PURE__ */ jsxs(View, { style: styles.headerTitleWrap, children: [
+            /* @__PURE__ */ jsx(
+              Text,
+              {
+                accessibilityRole: "header",
+                style: [
+                  styles.headerTitle,
+                  android ? resolveTextRole(theme, "headlineSmall", true) : resolveTextRole(theme, "largeTitle", false),
+                  // Android: the OS headline-small 24 / 400 in the system face, not the display face.
+                  android ? { fontFamily: theme.font.sans, fontWeight: theme.fontWeight.regular } : {
+                    fontWeight: theme.fontWeight.bold,
+                    ...titleFace === "system" ? { fontFamily: theme.font.sans } : null
+                  }
+                ],
+                children: title
+              }
+            ),
+            unreadCount > 0 ? /* @__PURE__ */ jsx(
+              Badge,
+              {
+                style: styles.rowBadge,
+                variant: "accent",
+                size: "sm",
+                accessibilityLabel: labels.unreadCount(unreadCount),
+                children: String(unreadCount)
+              }
+            ) : null
+          ] }),
+          onMarkAllRead ? /* @__PURE__ */ jsx(
+            MarkAllReadButton,
+            {
+              label: markAllReadLabel,
+              disabled: disabled || unreadCount === 0,
+              onPress: markAll,
+              android
+            }
+          ) : null
+        ] }),
+        empty ? /* @__PURE__ */ jsx(View, { style: styles.emptyWrap, children: /* @__PURE__ */ jsx(
+          EmptyState,
           {
-            style: styles.rowBadge,
-            variant: "accent",
-            size: "sm",
-            accessibilityLabel: labels.unreadCount(unreadCount),
-            children: String(unreadCount)
+            variant: "empty",
+            icon: "bell",
+            title: emptyLabel,
+            description: labels.emptyDescription
           }
-        ) : null
-      ] }),
-      onMarkAllRead ? /* @__PURE__ */ jsx(
-        MarkAllReadButton,
-        {
-          label: markAllReadLabel,
-          disabled: unreadCount === 0,
-          onPress: markAll
-        }
-      ) : null
-    ] }),
-    empty ? /* @__PURE__ */ jsx(View, { style: styles.emptyWrap, children: /* @__PURE__ */ jsx(
-      EmptyState,
-      {
-        variant: "empty",
-        icon: "bell",
-        title: emptyLabel,
-        description: labels.emptyDescription
-      }
-    ) }) : (
-      // No `role="list"`: sticky day headers are flattened in as direct children
-      // for `stickyHeaderIndices`, and a `list` may contain only `listitem`s
-      // (axe aria-required-children). A labelled scroll region of heading-
-      // separated button rows is the accessible shape here.
-      /* @__PURE__ */ jsx(
-        ScrollView,
-        {
-          role: "region",
-          accessibilityLabel: title,
-          style: styles.scroll,
-          contentContainerStyle: styles.scrollContent,
-          stickyHeaderIndices: stickyIndices,
-          indicatorStyle: theme.dark ? "white" : "black",
-          children
-        }
-      )
-    )
-  ] });
+        ) }) : (
+          // No `role="list"`: sticky day headers are flattened in as direct children
+          // for `stickyHeaderIndices`, and a `list` may contain only `listitem`s
+          // (axe aria-required-children). A labelled scroll region of heading-
+          // separated button rows is the accessible shape here.
+          /* @__PURE__ */ jsx(
+            ScrollView,
+            {
+              role: "region",
+              accessibilityLabel: title,
+              style: styles.scroll,
+              contentContainerStyle: styles.scrollContent,
+              stickyHeaderIndices: stickyIndices,
+              indicatorStyle: theme.dark ? "white" : "black",
+              children
+            }
+          )
+        )
+      ]
+    }
+  );
 }
 function MarkAllReadButton({
   label,
   disabled,
-  onPress
+  onPress,
+  android
 }) {
   const { styles } = useStyles(sheet);
   const theme = useLoamTheme("notification-center");
@@ -349,14 +470,16 @@ function MarkAllReadButton({
       accessibilityState: { disabled },
       disabled,
       onPress: disabled ? void 0 : onPress,
+      hitSlop: android ? void 0 : (theme.tapMin - theme.ctl.sm) / 2,
       style: ({ pressed }) => [
         styles.markAll,
+        android ? null : styles.markAllLink,
         disabled ? styles.markAllDisabled : null,
-        pressed && !disabled ? styles.markAllPressed : null
+        pressed && !disabled ? android ? styles.markAllPressed : { opacity: theme.opacity[38] } : null
       ],
       children: [
-        /* @__PURE__ */ jsx(Icon, { name: "check", size: theme.icon.sm, color: ink }),
-        /* @__PURE__ */ jsx(Text, { style: [styles.markAllLabel, { color: ink }], children: label })
+        android ? /* @__PURE__ */ jsx(Icon, { name: "check", size: theme.icon.sm, color: ink }) : null,
+        /* @__PURE__ */ jsx(Text, { style: [styles.markAllLabel, android ? null : styles.markAllLinkLabel, { color: ink }], children: label })
       ]
     }
   );
@@ -367,6 +490,12 @@ var sheet = createStyleSheet((theme) => ({
     alignSelf: "stretch",
     backgroundColor: theme.color.bg
   },
+  rootBordered: {
+    borderWidth: theme.borderWidth.base,
+    borderColor: theme.color.border,
+    borderRadius: theme.radius.md,
+    overflow: "hidden"
+  },
   header: {
     flexDirection: "row",
     alignItems: "center",
@@ -397,6 +526,11 @@ var sheet = createStyleSheet((theme) => ({
     paddingHorizontal: theme.space.s3,
     borderRadius: theme.radius.full
   },
+  markAllLink: { minHeight: theme.ctl.sm, paddingHorizontal: 0 },
+  markAllLinkLabel: {
+    fontWeight: theme.fontWeight.regular,
+    fontSize: theme.type.callout.fontSize
+  },
   markAllDisabled: { opacity: theme.state.disabledOpacity },
   markAllPressed: { backgroundColor: theme.state.pressed },
   markAllLabel: {
@@ -421,21 +555,36 @@ var sheet = createStyleSheet((theme) => ({
     textTransform: "uppercase",
     letterSpacing: 1
   },
+  sectionHeaderAndroid: { fontFamily: theme.font.sans, color: theme.color.accentStrong },
   rowWrap: { position: "relative" },
-  // The start-edge accent bar — the non-colour-independent half of the unread
-  // signal, sitting in the row's start gutter. `edge.accent` gives it a visible
-  // border under `prefers-contrast: more`, where the accent fill flattens.
-  accentBar: {
+  // The iOS unread dot: 10, centred in the 16 leading gutter, with
+  // `edge.accent` so it keeps an edge under increased contrast.
+  gutter: {
     position: "absolute",
-    top: theme.space.s3,
-    bottom: theme.space.s3,
+    top: 0,
+    bottom: 0,
     start: 0,
-    width: theme.space[3],
+    width: theme.space[16],
+    alignItems: "center",
+    justifyContent: "center",
+    zIndex: 1
+  },
+  leadDot: {
+    width: theme.space[10],
+    height: theme.space[10],
     borderRadius: theme.radius.full,
     backgroundColor: theme.color.accent,
     borderWidth: theme.borderWidth.hair,
-    borderColor: theme.edge.accent,
-    zIndex: 1
+    borderColor: theme.edge.accent
+  },
+  // iOS separators inset to 72, past the leading visual.
+  separator: {
+    position: "absolute",
+    bottom: 0,
+    start: theme.space[72],
+    end: 0,
+    height: theme.borderWidth.hair,
+    backgroundColor: theme.color.border
   },
   iconTile: {
     width: theme.space[36],
@@ -461,15 +610,17 @@ var sheet = createStyleSheet((theme) => ({
   },
   trailing: {
     alignItems: "flex-end",
-    justifyContent: "center",
+    alignSelf: "flex-start",
+    justifyContent: "flex-start",
     gap: theme.space.s2,
     minWidth: theme.space[44]
   },
   time: {
-    fontFamily: theme.font.mono,
-    fontSize: theme.type.caption1.fontSize,
-    lineHeight: theme.type.caption1.lineHeight,
-    color: theme.color.text3
+    fontFamily: theme.font.sans,
+    fontSize: theme.type.footnote.fontSize,
+    lineHeight: theme.type.footnote.lineHeight,
+    fontVariant: ["tabular-nums"],
+    color: theme.color.text2
   },
   dot: {
     width: theme.space[8],

package/dist/chunk-CA3DUVYD.js

@@ -0,0 +1,10 @@
+// src/lib/format-time.ts
+function formatTime(seconds) {
+  const s = Number.isFinite(seconds) && seconds > 0 ? Math.floor(seconds) : 0;
+  const h = Math.floor(s / 3600);
+  const m = Math.floor(s % 3600 / 60);
+  const sec = String(s % 60).padStart(2, "0");
+  return h > 0 ? `${h}:${String(m).padStart(2, "0")}:${sec}` : `${m}:${sec}`;
+}
+
+export { formatTime };