@btndprojects/loam-ui-native 0.1.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-C7IUWIUZ.js

@@ -0,0 +1,643 @@
+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-PCEFCOLN.js';
+import * as React from 'react';
+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';
+
+var DEFAULT_LABELS = {
+  archive: "Archive",
+  empty: "You're all caught up",
+  emptyDescription: "New notifications will show up here.",
+  title: "Notifications",
+  markAllRead: "Mark all read",
+  unread: "Unread",
+  read: "Read",
+  unreadCount: (n) => `${n} unread`,
+  today: "Today",
+  yesterday: "Yesterday",
+  earlier: "Earlier"
+};
+function toDate(value) {
+  if (value == null) return null;
+  const d = value instanceof Date ? value : new Date(value);
+  return Number.isNaN(d.getTime()) ? null : d;
+}
+function startOfDay(d) {
+  return new Date(d.getFullYear(), d.getMonth(), d.getDate()).getTime();
+}
+function dayLabel(date, now, labels = DEFAULT_LABELS, locale) {
+  const day = startOfDay(date);
+  const today = startOfDay(now);
+  const oneDay = 864e5;
+  if (day === today) return labels.today;
+  if (day === today - oneDay) return labels.yesterday;
+  const sameYear = date.getFullYear() === now.getFullYear();
+  return date.toLocaleDateString(locale, {
+    month: "short",
+    day: "numeric",
+    ...sameYear ? {} : { year: "numeric" }
+  });
+}
+function buildSections(items, groupByDay, now, labels = DEFAULT_LABELS, locale) {
+  if (!groupByDay) return [{ key: "all", title: "", data: items }];
+  const order = [];
+  const byKey = /* @__PURE__ */ new Map();
+  for (const item of items) {
+    const date = toDate(item.date);
+    const key = date ? String(startOfDay(date)) : "earlier";
+    let section = byKey.get(key);
+    if (!section) {
+      section = {
+        key,
+        title: date ? dayLabel(date, now, labels, locale) : labels.earlier,
+        data: []
+      };
+      byKey.set(key, section);
+      order.push(key);
+    }
+    section.data.push(item);
+  }
+  return order.map((k) => byKey.get(k));
+}
+function notificationAccessibilityLabel(item, read, unreadLabel, readLabel) {
+  return [read ? readLabel : unreadLabel, item.title, item.body, item.time].filter(Boolean).join(". ");
+}
+var NotificationRow = React.memo(function NotificationRow2({
+  item,
+  read,
+  divider,
+  motion,
+  animateEntrance,
+  enterDelay = 0,
+  onArchive,
+  archiveLabel,
+  unreadLabel,
+  readLabel,
+  onActivate,
+  android,
+  size,
+  density,
+  tone,
+  icon,
+  action,
+  disabled
+}) {
+  const theme = useLoamTheme("notification-center");
+  const { styles } = useStyles(sheet);
+  const unread = !read;
+  const unreadOpacity = React.useRef(new Animated.Value(read ? 0 : 1)).current;
+  const first = React.useRef(true);
+  React.useEffect(() => {
+    if (first.current) {
+      first.current = false;
+      unreadOpacity.setValue(read ? 0 : 1);
+      return;
+    }
+    if (motion === "none") {
+      unreadOpacity.setValue(read ? 0 : 1);
+      return;
+    }
+    Animated.timing(unreadOpacity, {
+      toValue: read ? 0 : 1,
+      duration: theme.motion.swap.duration,
+      easing: Easing.bezier(...theme.motion.swap.easing),
+      useNativeDriver: true
+    }).start();
+  }, [read, motion, unreadOpacity, theme.motion.swap]);
+  const enter = React.useRef(new Animated.Value(animateEntrance ? 0 : 1)).current;
+  React.useEffect(() => {
+    if (!animateEntrance) return;
+    Animated.timing(enter, {
+      toValue: 1,
+      delay: enterDelay,
+      duration: theme.motion.enter.duration,
+      easing: Easing.bezier(...theme.motion.enter.easing),
+      useNativeDriver: true
+    }).start();
+  }, []);
+  const translateY = enter.interpolate({ inputRange: [0, 1], outputRange: [8, 0] });
+  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,
+          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(View, { style: styles.gutter, pointerEvents: "none", children: /* @__PURE__ */ jsx(
+      Animated.View,
+      {
+        importantForAccessibility: "no-hide-descendants",
+        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,
+              // 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,
+              resolveTextRole(theme, android ? "bodyMedium" : "subheadline", android)
+            ],
+            numberOfLines: 2,
+            children: item.body
+          }
+        ) : void 0,
+        trailing,
+        onPress: () => onActivate(item),
+        accessibilityLabel: label,
+        swipeActions: onArchive ? {
+          trailing: [
+            {
+              key: "archive",
+              label: archiveLabel,
+              icon: "archive",
+              fullSwipe: true,
+              onAction: () => onArchive(item)
+            }
+          ]
+        } : void 0
+      }
+    ),
+    divider && !android ? /* @__PURE__ */ jsx(View, { style: styles.separator, pointerEvents: "none" }) : null
+  ] });
+});
+function NotificationCenter({
+  notifications,
+  groupByDay = true,
+  onMarkAllRead,
+  onItemPress,
+  onArchive,
+  archiveLabel: archiveLabelProp,
+  emptyLabel: emptyLabelProp,
+  title: titleProp,
+  titleFace = "system",
+  markAllReadLabel: markAllReadLabelProp,
+  unreadLabel: unreadLabelProp,
+  readLabel: readLabelProp,
+  motion = "reduced",
+  now,
+  platform,
+  labels: labelsProp,
+  size = "md",
+  variant = "plain",
+  density,
+  tone,
+  icon = "bell",
+  action,
+  disabled = false
+}) {
+  const labels = useLabels("notificationCenter", DEFAULT_LABELS, labelsProp);
+  const locale = useLoamLocale();
+  const archiveLabel = archiveLabelProp ?? labels.archive;
+  const emptyLabel = emptyLabelProp ?? labels.empty;
+  const title = titleProp ?? labels.title;
+  const markAllReadLabel = markAllReadLabelProp ?? labels.markAllRead;
+  const unreadLabel = unreadLabelProp ?? labels.unread;
+  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,
+    [locallyRead]
+  );
+  const prevIds = React.useRef(null);
+  const newIds = React.useMemo(() => {
+    const seen = /* @__PURE__ */ new Set();
+    if (prevIds.current) {
+      for (const item of notifications) {
+        if (!prevIds.current.has(item.id)) seen.add(item.id);
+      }
+    }
+    return seen;
+  }, [notifications]);
+  React.useEffect(() => {
+    prevIds.current = new Set(notifications.map((n) => n.id));
+  });
+  const activate = React.useCallback(
+    (item) => {
+      setLocallyRead((prev) => prev[item.id] ? prev : { ...prev, [item.id]: true });
+      item.onPress?.();
+      onItemPress?.(item);
+    },
+    [onItemPress]
+  );
+  const markAll = React.useCallback(() => {
+    setLocallyRead((prev) => {
+      const next = { ...prev };
+      for (const n of notifications) next[n.id] = true;
+      return next;
+    });
+    AccessibilityInfo.announceForAccessibility(markAllReadLabel);
+    onMarkAllRead?.();
+  }, [notifications, onMarkAllRead, markAllReadLabel]);
+  const unreadCount = React.useMemo(
+    () => notifications.reduce((n, item) => isRead(item) ? n : n + 1, 0),
+    [notifications, isRead]
+  );
+  const sections = React.useMemo(
+    () => buildSections(
+      notifications,
+      groupByDay,
+      now != null ? new Date(now) : /* @__PURE__ */ new Date(),
+      labels,
+      locale
+    ),
+    [notifications, groupByDay, now, labels, locale]
+  );
+  const children = [];
+  const opening = prevIds.current === null;
+  let rowCount = 0;
+  const stickyIndices = [];
+  for (const section of sections) {
+    if (groupByDay && section.title) {
+      stickyIndices.push(children.length);
+      children.push(
+        /* @__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) => {
+      const row = rowCount++;
+      children.push(
+        /* @__PURE__ */ jsx(
+          NotificationRow,
+          {
+            item,
+            read: isRead(item),
+            divider: i < section.data.length - 1,
+            motion,
+            animateEntrance: motion === "full" && (newIds.has(item.id) || opening && row < 6),
+            enterDelay: opening ? Math.min(row, 5) * 30 : 0,
+            onArchive,
+            archiveLabel,
+            unreadLabel,
+            readLabel,
+            onActivate: activate,
+            android,
+            size,
+            density,
+            tone,
+            icon,
+            action,
+            disabled
+          },
+          item.id
+        )
+      );
+    });
+  }
+  const empty = notifications.length === 0;
+  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,
+          {
+            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
+            }
+          )
+        )
+      ]
+    }
+  );
+}
+function MarkAllReadButton({
+  label,
+  disabled,
+  onPress,
+  android
+}) {
+  const { styles } = useStyles(sheet);
+  const theme = useLoamTheme("notification-center");
+  const ink = disabled ? theme.color.text3 : theme.color.accentStrong;
+  return /* @__PURE__ */ jsxs(
+    Pressable,
+    {
+      accessibilityRole: "button",
+      accessibilityLabel: label,
+      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 ? android ? styles.markAllPressed : { opacity: theme.opacity[38] } : null
+      ],
+      children: [
+        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 })
+      ]
+    }
+  );
+}
+var sheet = createStyleSheet((theme) => ({
+  root: {
+    flex: 1,
+    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",
+    justifyContent: "space-between",
+    gap: theme.space.s3,
+    paddingHorizontal: theme.space.s4,
+    paddingTop: theme.space.s4,
+    paddingBottom: theme.space.s3
+  },
+  headerTitleWrap: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: theme.space.s2,
+    flexShrink: 1
+  },
+  headerTitle: {
+    fontFamily: theme.font.display,
+    fontWeight: theme.font.displayWeight,
+    fontSize: theme.type.title2.fontSize,
+    lineHeight: theme.type.title2.lineHeight,
+    color: theme.color.text
+  },
+  markAll: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: theme.space.s1,
+    minHeight: theme.tapMin,
+    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: {
+    fontFamily: theme.font.sans,
+    fontWeight: theme.fontWeight.bold,
+    fontSize: theme.type.subheadline.fontSize,
+    letterSpacing: theme.type.subheadline.letterSpacing
+  },
+  scroll: { flex: 1 },
+  scrollContent: { paddingBottom: theme.space.s6 },
+  sectionHeader: {
+    paddingHorizontal: theme.space.s4,
+    paddingTop: theme.space.s3,
+    paddingBottom: theme.space.s2,
+    backgroundColor: theme.color.bg
+  },
+  sectionHeaderText: {
+    fontFamily: theme.font.mono,
+    fontSize: theme.type.footnote.fontSize,
+    lineHeight: theme.type.footnote.lineHeight,
+    color: theme.color.text3,
+    textTransform: "uppercase",
+    letterSpacing: 1
+  },
+  sectionHeaderAndroid: { fontFamily: theme.font.sans, color: theme.color.accentStrong },
+  rowWrap: { position: "relative" },
+  // 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: 0,
+    bottom: 0,
+    start: 0,
+    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
+  },
+  // 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],
+    height: theme.space[36],
+    borderRadius: theme.radius.full,
+    alignItems: "center",
+    justifyContent: "center",
+    backgroundColor: theme.color.surface2
+  },
+  title: {
+    fontFamily: theme.font.sans,
+    fontSize: theme.type.headline.fontSize,
+    lineHeight: theme.type.headline.lineHeight,
+    letterSpacing: theme.type.headline.letterSpacing,
+    color: theme.color.text
+  },
+  body: {
+    fontFamily: theme.font.sans,
+    fontSize: theme.type.subheadline.fontSize,
+    lineHeight: theme.type.subheadline.lineHeight,
+    letterSpacing: theme.type.subheadline.letterSpacing,
+    color: theme.color.text2
+  },
+  trailing: {
+    alignItems: "flex-end",
+    alignSelf: "flex-start",
+    justifyContent: "flex-start",
+    gap: theme.space.s2,
+    minWidth: theme.space[44]
+  },
+  time: {
+    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],
+    height: theme.space[8],
+    borderRadius: theme.radius.full,
+    backgroundColor: theme.color.accent,
+    borderWidth: theme.borderWidth.hair,
+    borderColor: theme.edge.accent
+  },
+  emptyWrap: {
+    flex: 1,
+    alignItems: "center",
+    justifyContent: "center",
+    padding: theme.space.s5
+  },
+  // Badge hugs with `flex-start`, which pins it to the top of this centred row.
+  rowBadge: { alignSelf: "center" }
+}));
+
+export { NotificationCenter, buildSections, dayLabel, notificationAccessibilityLabel };

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 };