@btndprojects/loam-ui-native 0.0.0-stage → 0.1.0

package/dist/chunk-MOUJOP55.js

@@ -0,0 +1,425 @@
+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 * as React from 'react';
+import { Animated, Easing, View, Text, ScrollView, Pressable } from 'react-native';
+import { useLoamTheme, useStyles, createStyleSheet } from '@btndprojects/loam-theme-native';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+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) {
+  const day = startOfDay(date);
+  const today = startOfDay(now);
+  const oneDay = 864e5;
+  if (day === today) return "Today";
+  if (day === today - oneDay) return "Yesterday";
+  const sameYear = date.getFullYear() === now.getFullYear();
+  return date.toLocaleDateString(void 0, {
+    month: "short",
+    day: "numeric",
+    ...sameYear ? {} : { year: "numeric" }
+  });
+}
+function buildSections(items, groupByDay, now) {
+  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) : "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,
+  unreadLabel,
+  readLabel,
+  onActivate
+}) {
+  const theme = useLoamTheme();
+  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,
+      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 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 trailing = /* @__PURE__ */ jsxs(View, { style: styles.trailing, children: [
+    /* @__PURE__ */ jsx(Text, { style: styles.time, children: item.time }),
+    /* @__PURE__ */ jsx(
+      Animated.View,
+      {
+        importantForAccessibility: "no-hide-descendants",
+        style: [styles.dot, { opacity: unreadOpacity, pointerEvents: "none" }]
+      }
+    )
+  ] });
+  const label = notificationAccessibilityLabel(item, read, unreadLabel, readLabel);
+  return /* @__PURE__ */ jsxs(Animated.View, { style: [styles.rowWrap, { opacity: enter, transform: [{ translateY }] }], children: [
+    /* @__PURE__ */ jsx(
+      Animated.View,
+      {
+        importantForAccessibility: "no-hide-descendants",
+        style: [styles.accentBar, { opacity: unreadOpacity, pointerEvents: "none" }]
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      ListRow,
+      {
+        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 }
+            ],
+            numberOfLines: 2,
+            children: item.title
+          }
+        ),
+        subtitle: item.body ? /* @__PURE__ */ jsx(Text, { style: styles.body, numberOfLines: 2, children: item.body }) : void 0,
+        trailing,
+        divider,
+        onPress: () => onActivate(item),
+        accessibilityLabel: label
+      }
+    )
+  ] });
+});
+function NotificationCenter({
+  notifications,
+  groupByDay = true,
+  onMarkAllRead,
+  onItemPress,
+  emptyLabel = "You're all caught up",
+  title = "Notifications",
+  markAllReadLabel = "Mark all read",
+  unreadLabel = "Unread",
+  readLabel = "Read",
+  motion = "reduced",
+  now
+}) {
+  const { styles } = useStyles(sheet);
+  const theme = useLoamTheme();
+  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;
+    });
+    onMarkAllRead?.();
+  }, [notifications, onMarkAllRead]);
+  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]
+  );
+  const children = [];
+  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: styles.sectionHeaderText, children: section.title }) }, `h-${section.key}`)
+      );
+    }
+    section.data.forEach((item, i) => {
+      children.push(
+        /* @__PURE__ */ jsx(
+          NotificationRow,
+          {
+            item,
+            read: isRead(item),
+            divider: i < section.data.length - 1,
+            motion,
+            animateEntrance: motion === "full" && newIds.has(item.id),
+            unreadLabel,
+            readLabel,
+            onActivate: activate
+          },
+          item.id
+        )
+      );
+    });
+  }
+  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, { style: styles.headerTitle, children: title }),
+        unreadCount > 0 ? /* @__PURE__ */ jsx(Badge, { style: styles.rowBadge, variant: "accent", size: "sm", accessibilityLabel: `${unreadCount} unread`, children: String(unreadCount) }) : 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: "New notifications will show up here."
+      }
+    ) }) : (
+      // 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,
+        {
+          accessibilityLabel: title,
+          style: styles.scroll,
+          contentContainerStyle: styles.scrollContent,
+          stickyHeaderIndices: stickyIndices,
+          indicatorStyle: theme.dark ? "white" : "black",
+          children
+        }
+      )
+    )
+  ] });
+}
+function MarkAllReadButton({
+  label,
+  disabled,
+  onPress
+}) {
+  const { styles } = useStyles(sheet);
+  const theme = useLoamTheme();
+  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,
+      style: ({ pressed }) => [
+        styles.markAll,
+        disabled ? styles.markAllDisabled : null,
+        pressed && !disabled ? styles.markAllPressed : null
+      ],
+      children: [
+        /* @__PURE__ */ jsx(Icon, { name: "check", size: theme.icon.sm, color: ink }),
+        /* @__PURE__ */ jsx(Text, { style: [styles.markAllLabel, { color: ink }], children: label })
+      ]
+    }
+  );
+}
+var sheet = createStyleSheet((theme) => ({
+  root: {
+    flex: 1,
+    alignSelf: "stretch",
+    backgroundColor: theme.color.bg
+  },
+  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
+  },
+  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
+  },
+  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: {
+    position: "absolute",
+    top: theme.space.s3,
+    bottom: theme.space.s3,
+    start: 0,
+    width: theme.space[3],
+    borderRadius: theme.radius.full,
+    backgroundColor: theme.color.accent,
+    borderWidth: theme.borderWidth.hair,
+    borderColor: theme.edge.accent,
+    zIndex: 1
+  },
+  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",
+    justifyContent: "center",
+    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
+  },
+  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-N32RGOA5.js

@@ -0,0 +1,159 @@
+import { Badge } from './chunk-SBMNWWBV.js';
+import { useSurfaceAnnounce } from './chunk-RW6ZL2FQ.js';
+import { Icon } from './chunk-TKVFVF5D.js';
+import * as React from 'react';
+import { View, Text, Pressable } from 'react-native';
+import { createStyleSheet, useStyles, useLoamTheme } from '@btndprojects/loam-theme-native';
+import { confidenceTone, confidenceLabel } from '@btndprojects/loam-analyzer';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+
+var TONE_ICON = {
+  good: "check-circle",
+  warn: "alert-triangle",
+  danger: "alert-circle"
+};
+var ROW_CENTRED = { alignSelf: "center" };
+function ConfidenceBadge({
+  value,
+  label = "confidence",
+  size = "sm",
+  icon = false
+}) {
+  const tone = confidenceTone(value);
+  const text = confidenceLabel(value);
+  return /* @__PURE__ */ jsx(
+    Badge,
+    {
+      variant: tone,
+      size,
+      leadingIcon: icon ? TONE_ICON[tone] : void 0,
+      accessibilityLabel: `${text} ${label}`,
+      style: ROW_CENTRED,
+      children: text
+    }
+  );
+}
+function PhaseAnnouncement({
+  message
+}) {
+  const surface = useSurfaceAnnounce();
+  const [own, setOwn] = React.useState("");
+  const { styles } = useStyles(sharedSheet);
+  const sink = React.useRef(setOwn);
+  sink.current = surface ?? setOwn;
+  React.useEffect(() => {
+    if (message) sink.current(message);
+  }, [message]);
+  if (surface) return null;
+  return /* @__PURE__ */ jsx(
+    View,
+    {
+      role: "status",
+      accessibilityLiveRegion: "polite",
+      style: styles.srOnly,
+      ...{ "aria-live": "polite" },
+      children: /* @__PURE__ */ jsx(Text, { style: styles.srOnly, children: own })
+    }
+  );
+}
+function NoteBlock({ title, description }) {
+  const theme = useLoamTheme();
+  const { styles } = useStyles(sharedSheet);
+  return /* @__PURE__ */ jsxs(View, { accessible: true, accessibilityLabel: `${title} ${description}`, style: styles.note, children: [
+    /* @__PURE__ */ jsx(Icon, { name: "info", size: theme.icon.sm, color: theme.color.infoOnSoft }),
+    /* @__PURE__ */ jsxs(View, { style: styles.noteText, children: [
+      /* @__PURE__ */ jsx(Text, { style: styles.noteTitle, children: title }),
+      /* @__PURE__ */ jsx(Text, { style: styles.noteBody, children: description })
+    ] })
+  ] });
+}
+function MatchRow({ match, onPick }) {
+  const { styles } = useStyles(sharedSheet);
+  const inner = /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs(View, { style: styles.matchText, children: [
+      /* @__PURE__ */ jsx(Text, { numberOfLines: 1, style: styles.matchCommon, children: match.common }),
+      /* @__PURE__ */ jsx(Text, { numberOfLines: 1, style: styles.matchName, children: match.name })
+    ] }),
+    /* @__PURE__ */ jsx(ConfidenceBadge, { value: match.confidence })
+  ] });
+  if (!onPick) return /* @__PURE__ */ jsx(View, { style: styles.matchRow, children: inner });
+  return /* @__PURE__ */ jsx(
+    Pressable,
+    {
+      accessibilityRole: "button",
+      accessibilityLabel: `${match.common}, ${match.name}, ${confidenceLabel(match.confidence)} confidence`,
+      style: styles.matchRow,
+      onPress: () => onPick(match),
+      children: inner
+    }
+  );
+}
+var sharedSheet = createStyleSheet((theme) => ({
+  srOnly: {
+    position: "absolute",
+    width: theme.space[1],
+    height: theme.space[1],
+    overflow: "hidden"
+  },
+  note: {
+    flexDirection: "row",
+    alignItems: "flex-start",
+    gap: theme.space[8],
+    padding: theme.space[12],
+    borderRadius: theme.radius.md,
+    backgroundColor: theme.color.infoSoft,
+    borderWidth: theme.borderWidth.base,
+    borderColor: theme.edge.info
+  },
+  noteText: {
+    flexGrow: 1,
+    flexShrink: 1,
+    flexBasis: theme.space[0],
+    flexDirection: "column",
+    gap: theme.space[2]
+  },
+  noteTitle: {
+    fontFamily: theme.font.sans,
+    fontSize: theme.fontSize[13],
+    fontWeight: theme.fontWeight.semibold,
+    color: theme.color.infoOnSoft
+  },
+  noteBody: {
+    fontFamily: theme.font.sans,
+    fontSize: theme.fontSize[13],
+    lineHeight: theme.fontSize[13] * theme.lineHeight.relaxed,
+    color: theme.color.infoOnSoft
+  },
+  matchRow: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between",
+    gap: theme.space[12],
+    minHeight: theme.ctl.lg,
+    paddingHorizontal: theme.space[12],
+    paddingVertical: theme.space[8],
+    borderRadius: theme.radius.md,
+    backgroundColor: theme.color.surface2,
+    borderWidth: theme.borderWidth.base,
+    borderColor: theme.color.border
+  },
+  matchText: {
+    flexGrow: 1,
+    flexShrink: 1,
+    flexBasis: theme.space[0],
+    flexDirection: "column"
+  },
+  matchCommon: {
+    fontFamily: theme.font.sans,
+    fontSize: theme.fontSize[13],
+    color: theme.color.text
+  },
+  matchName: {
+    fontFamily: theme.font.sans,
+    fontSize: theme.fontSize[11],
+    fontStyle: "italic",
+    color: theme.color.text3
+  }
+}));
+
+export { ConfidenceBadge, MatchRow, NoteBlock, PhaseAnnouncement };

package/dist/chunk-N5ZNE2YE.js

@@ -0,0 +1 @@
+

package/dist/chunk-NBNCBML6.js

@@ -0,0 +1 @@
+