@btndprojects/loam-ui-native 0.1.0 → 0.2.1

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

@@ -1,13 +1,27 @@
-import { ListRow } from './chunk-IVNRBPGC.js';
-import { EmptyState } from './chunk-LZLHELAG.js';
-import { Badge } from './chunk-SBMNWWBV.js';
-import { Avatar } from './chunk-QDYDBCFP.js';
-import { Icon } from './chunk-TKVFVF5D.js';
+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 { useLabels, useLoamLocale } from './chunk-APCWFOZW.js';
+import { Icon } from './chunk-UXGIW7OK.js';
 import * as React from 'react';
-import { Animated, Easing, View, Text, ScrollView, Pressable } from 'react-native';
+import { Animated, Easing, View, Text, AccessibilityInfo, ScrollView, Pressable } 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);
@@ -16,20 +30,20 @@ function toDate(value) {
 function startOfDay(d) {
   return new Date(d.getFullYear(), d.getMonth(), d.getDate()).getTime();
 }
-function dayLabel(date, now) {
+function dayLabel(date, now, labels = DEFAULT_LABELS, locale) {
   const day = startOfDay(date);
   const today = startOfDay(now);
   const oneDay = 864e5;
-  if (day === today) return "Today";
-  if (day === today - oneDay) return "Yesterday";
+  if (day === today) return labels.today;
+  if (day === today - oneDay) return labels.yesterday;
   const sameYear = date.getFullYear() === now.getFullYear();
-  return date.toLocaleDateString(void 0, {
+  return date.toLocaleDateString(locale, {
     month: "short",
     day: "numeric",
     ...sameYear ? {} : { year: "numeric" }
   });
 }
-function buildSections(items, groupByDay, now) {
+function buildSections(items, groupByDay, now, labels = DEFAULT_LABELS, locale) {
   if (!groupByDay) return [{ key: "all", title: "", data: items }];
   const order = [];
   const byKey = /* @__PURE__ */ new Map();
@@ -38,7 +52,11 @@ function buildSections(items, groupByDay, now) {
     const key = date ? String(startOfDay(date)) : "earlier";
     let section = byKey.get(key);
     if (!section) {
-      section = { key, title: date ? dayLabel(date, now) : "Earlier", data: [] };
+      section = {
+        key,
+        title: date ? dayLabel(date, now, labels, locale) : labels.earlier,
+        data: []
+      };
       byKey.set(key, section);
       order.push(key);
     }
@@ -55,11 +73,14 @@ var NotificationRow = React.memo(function NotificationRow2({
   divider,
   motion,
   animateEntrance,
+  enterDelay = 0,
+  onArchive,
+  archiveLabel,
   unreadLabel,
   readLabel,
   onActivate
 }) {
-  const theme = useLoamTheme();
+  const theme = useLoamTheme("notification-center");
   const { styles } = useStyles(sheet);
   const unread = !read;
   const unreadOpacity = React.useRef(new Animated.Value(read ? 0 : 1)).current;
@@ -86,6 +107,7 @@ var NotificationRow = React.memo(function NotificationRow2({
     if (!animateEntrance) return;
     Animated.timing(enter, {
       toValue: 1,
+      delay: enterDelay,
       duration: theme.motion.enter.duration,
       easing: Easing.bezier(...theme.motion.enter.easing),
       useNativeDriver: true
@@ -133,7 +155,18 @@ var NotificationRow = React.memo(function NotificationRow2({
         trailing,
         divider,
         onPress: () => onActivate(item),
-        accessibilityLabel: label
+        accessibilityLabel: label,
+        swipeActions: onArchive ? {
+          trailing: [
+            {
+              key: "archive",
+              label: archiveLabel,
+              icon: "archive",
+              fullSwipe: true,
+              onAction: () => onArchive(item)
+            }
+          ]
+        } : void 0
       }
     )
   ] });
@@ -143,16 +176,27 @@ function NotificationCenter({
   groupByDay = true,
   onMarkAllRead,
   onItemPress,
-  emptyLabel = "You're all caught up",
-  title = "Notifications",
-  markAllReadLabel = "Mark all read",
-  unreadLabel = "Unread",
-  readLabel = "Read",
+  onArchive,
+  archiveLabel: archiveLabelProp,
+  emptyLabel: emptyLabelProp,
+  title: titleProp,
+  markAllReadLabel: markAllReadLabelProp,
+  unreadLabel: unreadLabelProp,
+  readLabel: readLabelProp,
   motion = "reduced",
-  now
+  now,
+  labels: labelsProp
 }) {
+  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();
+  const theme = useLoamTheme("notification-center");
   const [locallyRead, setLocallyRead] = React.useState({});
   const isRead = React.useCallback(
     (item) => item.read === true || locallyRead[item.id] === true,
@@ -185,17 +229,26 @@ function NotificationCenter({
       for (const n of notifications) next[n.id] = true;
       return next;
     });
+    AccessibilityInfo.announceForAccessibility(markAllReadLabel);
     onMarkAllRead?.();
-  }, [notifications, 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()),
-    [notifications, groupByDay, now]
+    () => 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) {
@@ -205,6 +258,7 @@ function NotificationCenter({
       );
     }
     section.data.forEach((item, i) => {
+      const row = rowCount++;
       children.push(
         /* @__PURE__ */ jsx(
           NotificationRow,
@@ -213,7 +267,10 @@ function NotificationCenter({
             read: isRead(item),
             divider: i < section.data.length - 1,
             motion,
-            animateEntrance: motion === "full" && newIds.has(item.id),
+            animateEntrance: motion === "full" && (newIds.has(item.id) || opening && row < 6),
+            enterDelay: opening ? Math.min(row, 5) * 30 : 0,
+            onArchive,
+            archiveLabel,
             unreadLabel,
             readLabel,
             onActivate: activate
@@ -227,8 +284,17 @@ function NotificationCenter({
   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, { style: styles.headerTitle, children: title }),
-        unreadCount > 0 ? /* @__PURE__ */ jsx(Badge, { style: styles.rowBadge, variant: "accent", size: "sm", accessibilityLabel: `${unreadCount} unread`, children: String(unreadCount) }) : null
+        /* @__PURE__ */ jsx(Text, { accessibilityRole: "header", style: styles.headerTitle, 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,
@@ -245,7 +311,7 @@ function NotificationCenter({
         variant: "empty",
         icon: "bell",
         title: emptyLabel,
-        description: "New notifications will show up here."
+        description: labels.emptyDescription
       }
     ) }) : (
       // No `role="list"`: sticky day headers are flattened in as direct children
@@ -255,6 +321,7 @@ function NotificationCenter({
       /* @__PURE__ */ jsx(
         ScrollView,
         {
+          role: "region",
           accessibilityLabel: title,
           style: styles.scroll,
           contentContainerStyle: styles.scrollContent,
@@ -272,7 +339,7 @@ function MarkAllReadButton({
   onPress
 }) {
   const { styles } = useStyles(sheet);
-  const theme = useLoamTheme();
+  const theme = useLoamTheme("notification-center");
   const ink = disabled ? theme.color.text3 : theme.color.accentStrong;
   return /* @__PURE__ */ jsxs(
     Pressable,