@btndprojects/loam-ui-native 0.1.1 → 0.3.1

package/dist/chunk-MOUJOP55.js

@@ -1,425 +0,0 @@
-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-NKB7BZYK.js

@@ -1,167 +0,0 @@
-import { Sheet } from './chunk-ZVFE5QGU.js';
-import { expandedProps } from './chunk-RQ3HASCC.js';
-import { haptics } from './chunk-NY2U3PBI.js';
-import { Icon } from './chunk-TKVFVF5D.js';
-import * as React from 'react';
-import { Pressable, Text } from 'react-native';
-import { createStyleSheet, useLoamTheme, useStyles } from '@btndprojects/loam-theme-native';
-import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
-
-function Picker({
-  items,
-  value,
-  onValueChange,
-  placeholder = "Select\u2026",
-  title,
-  disabled = false,
-  size = "md",
-  accessibilityLabel
-}) {
-  const [open, setOpen] = React.useState(false);
-  const theme = useLoamTheme();
-  const selected = items.find((item) => item.value === value);
-  const isPlaceholder = selected == null;
-  const displayText = selected?.label ?? placeholder;
-  const { styles } = useStyles(sheet, { size, disabled, placeholder: isPlaceholder });
-  const iconSize = theme.ctl.icon[size];
-  const slopY = Math.max(0, (theme.hit[size] - theme.ctl[size]) / 2);
-  const handleSelect = (next) => {
-    haptics.impact("light");
-    onValueChange?.(next);
-    setOpen(false);
-  };
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsxs(
-      Pressable,
-      {
-        accessibilityRole: "button",
-        accessibilityLabel: accessibilityLabel ?? displayText,
-        accessibilityState: { disabled, expanded: open },
-        ...expandedProps(open),
-        disabled,
-        onPress: disabled ? void 0 : () => setOpen(true),
-        hitSlop: { top: slopY, bottom: slopY },
-        style: styles.trigger,
-        children: [
-          /* @__PURE__ */ jsx(Text, { style: styles.value, numberOfLines: 1, children: displayText }),
-          /* @__PURE__ */ jsx(Icon, { name: "chevron-down", size: iconSize, color: theme.color.text3 })
-        ]
-      }
-    ),
-    /* @__PURE__ */ jsx(Sheet, { open, onClose: () => setOpen(false), title, children: items.map((item) => {
-      const isSelected = item.value === value;
-      return /* @__PURE__ */ jsxs(
-        Pressable,
-        {
-          accessibilityRole: "button",
-          accessibilityLabel: item.label,
-          accessibilityState: { selected: isSelected },
-          onPress: () => handleSelect(item.value),
-          style: ({ pressed }) => [
-            styles.option,
-            isSelected ? styles.optionSelected : null,
-            pressed ? styles.optionPressed : null
-          ],
-          children: [
-            /* @__PURE__ */ jsx(Text, { style: [styles.optionLabel, isSelected ? styles.optionLabelSelected : null], children: item.label }),
-            isSelected ? /* @__PURE__ */ jsx(Icon, { name: "check", size: theme.icon.md, color: theme.color.accentOnSoft }) : null
-          ]
-        },
-        item.value
-      );
-    }) })
-  ] });
-}
-var sheet = createStyleSheet((theme) => ({
-  trigger: {
-    flexDirection: "row",
-    alignItems: "center",
-    backgroundColor: theme.color.surface2,
-    // The reference draws a `1.5px` field edge — the static `w2` weight.
-    borderWidth: theme.borderWidth.thick,
-    borderColor: theme.color.borderStrong,
-    variants: {
-      // Height, padding, gap and corner radius all resolve from one control-size
-      // tier (26 / 30 / 36 / 44), matching {@link Input}.
-      size: {
-        xs: {
-          height: theme.ctl.xs,
-          paddingHorizontal: theme.ctl.px.xs,
-          gap: theme.ctl.gap.xs,
-          borderRadius: theme.ctl.r.xs
-        },
-        sm: {
-          height: theme.ctl.sm,
-          paddingHorizontal: theme.ctl.px.sm,
-          gap: theme.ctl.gap.sm,
-          borderRadius: theme.ctl.r.sm
-        },
-        md: {
-          height: theme.ctl.md,
-          paddingHorizontal: theme.ctl.px.md,
-          gap: theme.ctl.gap.md,
-          borderRadius: theme.ctl.r.md
-        },
-        lg: {
-          height: theme.ctl.lg,
-          paddingHorizontal: theme.ctl.px.lg,
-          gap: theme.ctl.gap.lg,
-          borderRadius: theme.ctl.r.lg
-        }
-      },
-      disabled: {
-        true: { opacity: theme.state.disabledOpacity },
-        false: {}
-      }
-    }
-  },
-  value: {
-    flex: 1,
-    fontFamily: theme.font.sans,
-    variants: {
-      size: {
-        xs: { fontSize: theme.fontSize[14] },
-        sm: { fontSize: theme.fontSize[14] },
-        md: { fontSize: theme.fontSize[16] },
-        lg: { fontSize: theme.fontSize[16] }
-      },
-      placeholder: {
-        true: { color: theme.color.text3 },
-        false: { color: theme.color.text }
-      }
-    }
-  },
-  option: {
-    flexDirection: "row",
-    alignItems: "center",
-    gap: theme.space.s3,
-    minHeight: theme.space[48],
-    paddingHorizontal: theme.space.s3,
-    paddingVertical: theme.space.s2,
-    borderRadius: theme.radius.md,
-    // Every row carries the edge weight so selecting one does not shift the text.
-    borderWidth: theme.borderWidth.base,
-    borderColor: "transparent"
-  },
-  // The reference's selection band: an `accentSoft` `radius.md` plate behind the
-  // centred option. `-soft` tints collapse at high contrast, so it carries the
-  // matching tone edge.
-  optionSelected: {
-    backgroundColor: theme.color.accentSoft,
-    borderWidth: theme.borderWidth.base,
-    borderColor: theme.edge.accent
-  },
-  optionPressed: { backgroundColor: theme.color.surface2 },
-  optionLabel: {
-    flex: 1,
-    fontFamily: theme.font.sans,
-    fontSize: theme.fontSize[16],
-    color: theme.color.text2
-  },
-  optionLabelSelected: {
-    fontWeight: theme.fontWeight.semibold,
-    color: theme.color.accentOnSoft
-  }
-}));
-
-export { Picker };