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

package/dist/chunk-RGQWWKLA.js

@@ -0,0 +1,634 @@
+import { Timeline } from './chunk-4GBOGOTV.js';
+import { List, ListRow } from './chunk-IVNRBPGC.js';
+import { EmptyState } from './chunk-LZLHELAG.js';
+import { Amount } from './chunk-VBOXAEPI.js';
+import { Sheet } from './chunk-ZVFE5QGU.js';
+import { methodIcon } from './chunk-PUPM2YGF.js';
+import { Badge } from './chunk-SBMNWWBV.js';
+import { Alert } from './chunk-OETCUXQP.js';
+import { Icon } from './chunk-TKVFVF5D.js';
+import * as React from 'react';
+import { View, Text, Pressable } from 'react-native';
+import { createStyleSheet, useLoamTheme, useStyles } from '@btndprojects/loam-theme-native';
+import { receivableStatus, methodFor, bucketFor } from '@btndprojects/loam-pay';
+export { LEDGER_CARD_BREAKPOINT } from '@btndprojects/loam-pay';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+
+var RECEIVABLE_COLUMNS = [
+  "who",
+  "no",
+  "amount",
+  "dueIn",
+  "status",
+  "method"
+];
+function dueWords(dueIn) {
+  if (dueIn < 0) return `${-dueIn}d late`;
+  if (dueIn === 0) return "Due today";
+  return `in ${dueIn}d`;
+}
+function ReceivablesCardList({
+  rows,
+  actions = [],
+  actionsLabel = "Actions",
+  emptyTitle = "Nothing outstanding",
+  emptyDescription,
+  openLabel = "Open",
+  onOpenRow,
+  onAction,
+  locale,
+  style
+}) {
+  const theme = useLoamTheme();
+  const { styles } = useStyles(sheet);
+  const [menuFor, setMenuFor] = React.useState(null);
+  if (rows.length === 0) {
+    return /* @__PURE__ */ jsx(EmptyState, { variant: "empty", icon: "invoice", title: emptyTitle, description: emptyDescription });
+  }
+  return /* @__PURE__ */ jsxs(View, { style, children: [
+    /* @__PURE__ */ jsx(List, { role: "list", children: rows.map((r) => {
+      const s = receivableStatus(r);
+      const def = methodFor(r.method);
+      return (
+        // The trigger is a sibling of the row, not a child: a row rendered
+        // interactive is a real pressable, and a second pressable inside it
+        // would be a nested interactive control.
+        /* @__PURE__ */ jsxs(View, { role: "listitem", style: styles.rowShell, children: [
+          /* @__PURE__ */ jsx(View, { style: styles.rowMain, children: /* @__PURE__ */ jsx(
+            ListRow,
+            {
+              onPress: onOpenRow ? () => onOpenRow(r.no) : void 0,
+              accessibilityLabel: onOpenRow ? `${openLabel} ${r.no} \u2014 ${r.who}` : void 0,
+              title: /* @__PURE__ */ jsxs(View, { style: styles.titleRow, children: [
+                /* @__PURE__ */ jsx(Text, { numberOfLines: 1, style: styles.who, children: r.who }),
+                /* @__PURE__ */ jsx(View, { style: styles.pushEnd, children: /* @__PURE__ */ jsx(
+                  Amount,
+                  {
+                    minor: r.amount,
+                    currency: r.cur,
+                    size: "sm",
+                    weight: "bold",
+                    locale
+                  }
+                ) })
+              ] }),
+              subtitle: /* @__PURE__ */ jsxs(View, { style: styles.subRow, children: [
+                /* @__PURE__ */ jsx(Text, { style: styles.no, children: r.no }),
+                /* @__PURE__ */ jsx(Badge, { variant: s.tone, size: "sm", children: s.label }),
+                /* @__PURE__ */ jsx(Text, { style: styles.due, children: dueWords(r.dueIn) }),
+                /* @__PURE__ */ jsxs(View, { style: styles.methodRow, children: [
+                  /* @__PURE__ */ jsx(
+                    Icon,
+                    {
+                      name: methodIcon(def?.icon ?? "card"),
+                      size: theme.icon.xs,
+                      color: theme.color.text3
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(Text, { style: styles.method, children: def?.label ?? r.method })
+                ] })
+              ] })
+            }
+          ) }),
+          actions.length > 0 ? /* @__PURE__ */ jsx(
+            Pressable,
+            {
+              accessibilityRole: "button",
+              accessibilityLabel: `${actionsLabel} \u2014 ${r.no}`,
+              onPress: () => setMenuFor(r.no),
+              style: styles.menuTrigger,
+              children: /* @__PURE__ */ jsx(Icon, { name: "more-horizontal", size: theme.icon.md, color: theme.color.text2 })
+            }
+          ) : null
+        ] }, r.no)
+      );
+    }) }),
+    actions.length > 0 ? /* @__PURE__ */ jsx(
+      Sheet,
+      {
+        open: menuFor !== null,
+        title: menuFor === null ? actionsLabel : `${actionsLabel} \u2014 ${menuFor}`,
+        onClose: () => setMenuFor(null),
+        children: /* @__PURE__ */ jsx(View, { role: "list", accessibilityRole: "list", style: styles.actionList, children: actions.map((a) => (
+          // The item and the control are separate nodes: `role="listitem"`
+          // and `accessibilityRole="button"` on one element are two roles
+          // fighting over the same node, and react-native-web resolves it
+          // by dropping the button — which leaves the row unpressable to
+          // assistive tech and to a keyboard.
+          /* @__PURE__ */ jsx(View, { role: "listitem", children: /* @__PURE__ */ jsxs(
+            Pressable,
+            {
+              accessibilityRole: "button",
+              accessibilityLabel: a.label,
+              onPress: () => {
+                const no = menuFor;
+                setMenuFor(null);
+                if (no !== null) onAction?.(no, a.id);
+              },
+              style: ({ pressed }) => [
+                styles.actionRow,
+                pressed ? styles.actionRowPressed : null
+              ],
+              children: [
+                a.icon ? /* @__PURE__ */ jsx(
+                  Icon,
+                  {
+                    name: a.icon,
+                    size: theme.icon.md,
+                    color: a.danger ? theme.color.danger : theme.color.text2
+                  }
+                ) : null,
+                /* @__PURE__ */ jsx(Text, { style: [styles.actionLabel, a.danger ? styles.actionLabelDanger : null], children: a.label })
+              ]
+            }
+          ) }, a.id)
+        )) })
+      }
+    ) : null
+  ] });
+}
+var sheet = createStyleSheet((theme) => ({
+  rowShell: { flexDirection: "row", alignItems: "center", gap: theme.space.s1 },
+  rowMain: { flex: 1, minWidth: 0 },
+  titleRow: { flexDirection: "row", alignItems: "baseline", gap: theme.space.s3 },
+  who: {
+    flexShrink: 1,
+    fontFamily: theme.font.sans,
+    fontWeight: theme.fontWeight.semibold,
+    fontSize: theme.type.subheadline.fontSize,
+    lineHeight: theme.type.subheadline.lineHeight,
+    color: theme.color.text
+  },
+  pushEnd: { marginStart: "auto" },
+  subRow: {
+    flexDirection: "row",
+    flexWrap: "wrap",
+    alignItems: "center",
+    gap: theme.space.s2
+  },
+  no: {
+    fontFamily: theme.font.mono,
+    fontVariant: ["tabular-nums"],
+    fontSize: theme.type.caption1.fontSize,
+    lineHeight: theme.type.caption1.lineHeight,
+    color: theme.color.text2
+  },
+  due: {
+    fontFamily: theme.font.sans,
+    fontVariant: ["tabular-nums"],
+    fontSize: theme.type.caption1.fontSize,
+    lineHeight: theme.type.caption1.lineHeight,
+    color: theme.color.text2
+  },
+  methodRow: { flexDirection: "row", alignItems: "center", gap: theme.space.s1 },
+  method: {
+    fontFamily: theme.font.sans,
+    fontSize: theme.type.caption1.fontSize,
+    lineHeight: theme.type.caption1.lineHeight,
+    color: theme.color.text3
+  },
+  menuTrigger: {
+    width: theme.tapMin,
+    height: theme.tapMin,
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  actionList: { gap: theme.space.s1 },
+  actionRow: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: theme.space.s3,
+    minHeight: theme.tapMin,
+    paddingHorizontal: theme.space.s3,
+    borderRadius: theme.radius.md
+  },
+  actionRowPressed: { backgroundColor: theme.state.pressed },
+  actionLabel: {
+    fontFamily: theme.font.sans,
+    fontSize: theme.type.body.fontSize,
+    lineHeight: theme.type.body.lineHeight,
+    color: theme.color.text
+  },
+  actionLabelDanger: { color: theme.color.danger }
+}));
+function tilePaint(theme, tone) {
+  switch (tone) {
+    case "good":
+      return {
+        fill: theme.color.goodSoft,
+        edge: theme.edge.good,
+        ink: theme.color.goodOnSoft,
+        bar: theme.color.good
+      };
+    case "warn":
+      return {
+        fill: theme.color.warnSoft,
+        edge: theme.edge.warn,
+        ink: theme.color.warnOnSoft,
+        bar: theme.color.warn
+      };
+    case "danger":
+      return {
+        fill: theme.color.dangerSoft,
+        edge: theme.edge.danger,
+        ink: theme.color.dangerOnSoft,
+        bar: theme.color.danger
+      };
+    case "info":
+    default:
+      return {
+        fill: theme.color.infoSoft,
+        edge: theme.edge.info,
+        ink: theme.color.infoOnSoft,
+        bar: theme.color.info
+      };
+  }
+}
+function AgingBucketCard({
+  bucket,
+  minor,
+  currency,
+  count,
+  tone,
+  fill = 0,
+  onSelect,
+  locale,
+  countLabel,
+  style
+}) {
+  const theme = useLoamTheme();
+  const { styles } = useStyles(sheet2);
+  const paint = tilePaint(theme, tone);
+  const pct = Math.round(Math.min(1, Math.max(0, fill)) * 100);
+  const words = countLabel ?? (count === 1 ? "invoice" : "invoices");
+  const body = /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(Text, { style: [styles.bucketName, { color: paint.ink }], children: bucket }),
+    /* @__PURE__ */ jsx(
+      Amount,
+      {
+        minor,
+        currency,
+        size: "lg",
+        weight: "bold",
+        locale,
+        style: { color: paint.ink }
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      View,
+      {
+        "aria-hidden": true,
+        accessibilityElementsHidden: true,
+        importantForAccessibility: "no-hide-descendants",
+        style: styles.rail,
+        children: /* @__PURE__ */ jsx(View, { style: [styles.railFill, { width: `${pct}%`, backgroundColor: paint.bar }] })
+      }
+    ),
+    /* @__PURE__ */ jsx(Text, { style: [styles.count, { color: paint.ink }], children: `${count} ${words}` })
+  ] });
+  const tile = [
+    styles.tile,
+    { borderColor: paint.edge, backgroundColor: paint.fill },
+    style
+  ];
+  if (onSelect) {
+    return /* @__PURE__ */ jsx(
+      Pressable,
+      {
+        accessibilityRole: "button",
+        accessibilityLabel: `${bucket} \u2014 ${count} ${words}`,
+        onPress: onSelect,
+        style: tile,
+        children: ({ pressed }) => /* @__PURE__ */ jsxs(Fragment, { children: [
+          body,
+          pressed ? /* @__PURE__ */ jsx(View, { style: styles.tilePressed, pointerEvents: "none" }) : null
+        ] })
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(View, { style: tile, children: body });
+}
+function AgingSummary({
+  buckets,
+  currency,
+  onSelectBucket,
+  locale,
+  label = "Accounts receivable aging",
+  style
+}) {
+  const { styles } = useStyles(sheet2);
+  const peak = buckets.reduce((m, b) => Math.max(m, Math.abs(b.minor)), 0);
+  return /* @__PURE__ */ jsx(View, { role: "group", accessibilityLabel: label, style: [styles.strip, style], children: buckets.map((b) => /* @__PURE__ */ jsx(
+    AgingBucketCard,
+    {
+      bucket: b.bucket.bucket,
+      minor: b.minor,
+      currency,
+      count: b.count,
+      tone: b.bucket.tone,
+      fill: peak === 0 ? 0 : Math.abs(b.minor) / peak,
+      locale,
+      onSelect: onSelectBucket ? () => onSelectBucket(b.bucket.bucket) : void 0
+    },
+    b.bucket.bucket
+  )) });
+}
+var sheet2 = createStyleSheet((theme) => ({
+  strip: { alignSelf: "stretch", gap: theme.space.s3 },
+  tile: {
+    gap: theme.space.s2,
+    padding: theme.space.s3,
+    borderRadius: theme.radius.md,
+    borderWidth: theme.borderWidth.base
+  },
+  tilePressed: {
+    position: "absolute",
+    top: 0,
+    bottom: 0,
+    left: 0,
+    right: 0,
+    borderRadius: theme.radius.md,
+    backgroundColor: theme.state.pressed
+  },
+  bucketName: {
+    fontFamily: theme.font.sans,
+    fontWeight: theme.fontWeight.bold,
+    fontSize: theme.type.caption2.fontSize,
+    lineHeight: theme.type.caption2.lineHeight,
+    letterSpacing: theme.tracking.caps,
+    textTransform: "uppercase"
+  },
+  // `Progress`'s own `sm` track height — see the module note.
+  rail: {
+    height: theme.space[4],
+    overflow: "hidden",
+    borderRadius: theme.radius.full,
+    backgroundColor: theme.color.surface3
+  },
+  railFill: { height: "100%", borderRadius: theme.radius.full },
+  count: {
+    fontFamily: theme.font.sans,
+    fontVariant: ["tabular-nums"],
+    fontSize: theme.type.caption1.fontSize,
+    lineHeight: theme.type.caption1.lineHeight
+  }
+}));
+var RUNG_TONE = {
+  info: "info",
+  good: "good",
+  warn: "warn",
+  danger: "danger",
+  "text-3": "neutral"
+};
+var RUNG_ICON = {
+  accent: "refresh",
+  info: "info",
+  good: "check",
+  warn: "refresh",
+  danger: "alert-triangle",
+  neutral: "lock"
+};
+function rungPaint(theme, tone) {
+  switch (tone) {
+    case "info":
+      return {
+        dot: theme.color.info,
+        fill: theme.color.infoSoft,
+        edge: theme.edge.info,
+        ink: theme.color.infoOnSoft
+      };
+    case "good":
+      return {
+        dot: theme.color.good,
+        fill: theme.color.goodSoft,
+        edge: theme.edge.good,
+        ink: theme.color.goodOnSoft
+      };
+    case "warn":
+      return {
+        dot: theme.color.warn,
+        fill: theme.color.warnSoft,
+        edge: theme.edge.warn,
+        ink: theme.color.warnOnSoft
+      };
+    case "danger":
+      return {
+        dot: theme.color.danger,
+        fill: theme.color.dangerSoft,
+        edge: theme.edge.danger,
+        ink: theme.color.dangerOnSoft
+      };
+    case "text-3":
+    default:
+      return {
+        dot: theme.color.text3,
+        fill: theme.color.surface3,
+        edge: theme.color.border,
+        ink: theme.color.text3
+      };
+  }
+}
+function DunningRung({
+  day,
+  attempt,
+  surface,
+  tone,
+  current = false,
+  dayLabel = "Day",
+  style
+}) {
+  const theme = useLoamTheme();
+  const { styles } = useStyles(sheet3);
+  const paint = rungPaint(theme, tone);
+  const currentAttr = current ? { "aria-current": "step" } : {};
+  return /* @__PURE__ */ jsxs(
+    View,
+    {
+      role: "listitem",
+      ...currentAttr,
+      testID: `dunning-rung-${day}${current ? "-current" : ""}`,
+      style: [styles.rung, current ? styles.rungCurrent : null, style],
+      children: [
+        /* @__PURE__ */ jsx(View, { style: [styles.dayBadge, { borderColor: paint.edge, backgroundColor: paint.fill }], children: /* @__PURE__ */ jsx(Text, { style: [styles.dayLabel, { color: paint.ink }], children: `${dayLabel} ${day}` }) }),
+        /* @__PURE__ */ jsx(
+          View,
+          {
+            "aria-hidden": true,
+            accessibilityElementsHidden: true,
+            importantForAccessibility: "no-hide-descendants",
+            style: [styles.dot, { backgroundColor: paint.dot }]
+          }
+        ),
+        /* @__PURE__ */ jsxs(View, { style: styles.rungBody, children: [
+          /* @__PURE__ */ jsx(Text, { style: styles.attempt, children: attempt }),
+          /* @__PURE__ */ jsx(Text, { style: styles.surface, children: surface })
+        ] }),
+        current ? (
+          // The third marker. Never colour alone.
+          /* @__PURE__ */ jsx(Text, { style: styles.now, children: "Now" })
+        ) : null
+      ]
+    }
+  );
+}
+function DunningTimeline({
+  steps,
+  tones,
+  currentDay,
+  dayLabel = "Day",
+  density = "comfortable",
+  label = "Retry schedule",
+  style
+}) {
+  const { styles } = useStyles(sheet3);
+  const items = steps.map((s, i) => {
+    const tone = RUNG_TONE[tones?.[i] ?? "warn"];
+    const current = currentDay === s.day;
+    return {
+      id: `dunning-${s.day}`,
+      time: `${dayLabel} ${s.day}`,
+      title: s.attempt,
+      description: current ? /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(Text, { children: `${s.surface} ` }),
+        /* @__PURE__ */ jsx(Text, { style: styles.now, children: "Now" })
+      ] }) : s.surface,
+      tone,
+      icon: RUNG_ICON[tone],
+      current,
+      // The rung's stable hook. `Timeline` test-ids its node; this is the row,
+      // which is what carries `aria-current` and the band.
+      testID: `dunning-rung-${s.day}${current ? "-current" : ""}`
+    };
+  });
+  return /* @__PURE__ */ jsx(Timeline, { items, density, label, style });
+}
+function reminderTitle(day) {
+  if (day < 0) return `Due in ${-day} ${-day === 1 ? "day" : "days"}`;
+  if (day === 0) return "Due today";
+  return `${day} ${day === 1 ? "day" : "days"} past due`;
+}
+function ReminderTimeline({
+  days,
+  sentAt = {},
+  currentDay,
+  titles = {},
+  density = "comfortable",
+  label = "Reminder schedule"
+}) {
+  const items = days.map((d) => {
+    const sent = sentAt[d];
+    const isCurrent = currentDay === d;
+    return {
+      id: `reminder-${d}`,
+      time: sent ?? (isCurrent ? "Sending" : "Scheduled"),
+      title: titles[d] ?? reminderTitle(d),
+      // The one changed sentence sits here, under a headline that is the same
+      // shape on every rung.
+      description: d < 0 ? "A heads-up before the due date, so a slow approval chain has time to move." : d === 0 ? "The due date, restated with the amount and the same pay link." : "The same template again, one sentence clearer about how late it now is.",
+      state: sent ? "done" : isCurrent ? "working" : "pending",
+      icon: sent ? "check" : isCurrent ? "mail" : "clock"
+    };
+  });
+  return /* @__PURE__ */ jsx(Timeline, { items, density, label });
+}
+function overdueTone(daysLate) {
+  const tone = bucketFor(daysLate).tone;
+  return tone === "good" ? "info" : tone;
+}
+function OverdueNotice({
+  invoiceNumber,
+  minor,
+  currency,
+  daysLate,
+  dueLabel,
+  tone,
+  message,
+  action,
+  dismissible,
+  onDismiss,
+  locale,
+  style
+}) {
+  const { styles } = useStyles(sheet3);
+  const resolved = tone ?? overdueTone(daysLate);
+  const late = daysLate > 0;
+  return /* @__PURE__ */ jsxs(View, { style: [styles.overdue, style], children: [
+    /* @__PURE__ */ jsx(Amount, { minor, currency, size: "hero", weight: "bold", locale }),
+    /* @__PURE__ */ jsx(
+      Alert,
+      {
+        tone: resolved,
+        dismissible,
+        onDismiss,
+        action,
+        title: late ? `Overdue on ${invoiceNumber} \u2014 ${daysLate} ${daysLate === 1 ? "day" : "days"} past due` : `Due on ${invoiceNumber}`,
+        description: message ?? (late ? `The due date was ${dueLabel}. Paying now clears it; if it has already been paid, tell us and we will match it up.` : `Due ${dueLabel}. Nothing is late yet \u2014 this is a heads-up so an approval chain has time to move.`)
+      }
+    )
+  ] });
+}
+var sheet3 = createStyleSheet((theme) => ({
+  rung: {
+    flexDirection: "row",
+    alignItems: "flex-start",
+    gap: theme.space.s3,
+    padding: theme.space.s3,
+    borderRadius: theme.radius.md
+  },
+  rungCurrent: {
+    // The soft tint always carries its tone edge.
+    borderWidth: theme.borderWidth.base,
+    borderColor: theme.edge.accent,
+    backgroundColor: theme.color.accentSoft
+  },
+  dayBadge: {
+    alignItems: "center",
+    justifyContent: "center",
+    minWidth: theme.space[56],
+    paddingHorizontal: theme.space.s2,
+    paddingVertical: theme.space[2],
+    borderRadius: theme.radius.full,
+    borderWidth: theme.borderWidth.base
+  },
+  dayLabel: {
+    fontFamily: theme.font.sans,
+    fontWeight: theme.fontWeight.bold,
+    fontVariant: ["tabular-nums"],
+    fontSize: theme.fontSize[11],
+    lineHeight: theme.type.caption2.lineHeight,
+    letterSpacing: theme.tracking.wide,
+    textTransform: "uppercase"
+  },
+  dot: {
+    width: theme.space.s2,
+    height: theme.space.s2,
+    marginTop: theme.space.s2,
+    borderRadius: theme.radius.full
+  },
+  rungBody: { flex: 1, gap: theme.space[2] },
+  attempt: {
+    fontFamily: theme.font.sans,
+    fontWeight: theme.fontWeight.semibold,
+    fontSize: theme.type.footnote.fontSize,
+    lineHeight: theme.type.footnote.lineHeight,
+    color: theme.color.text
+  },
+  surface: {
+    fontFamily: theme.font.sans,
+    fontSize: theme.type.footnote.fontSize,
+    lineHeight: theme.type.footnote.fontSize * theme.lineHeight.normal,
+    color: theme.color.text2
+  },
+  now: {
+    fontFamily: theme.font.sans,
+    fontWeight: theme.fontWeight.bold,
+    fontSize: theme.fontSize[11],
+    lineHeight: theme.type.caption2.lineHeight,
+    letterSpacing: theme.tracking.wide,
+    textTransform: "uppercase",
+    color: theme.color.accentStrong
+  },
+  overdue: { alignSelf: "stretch", gap: theme.space.s2 }
+}));
+
+export { AgingBucketCard, AgingSummary, DunningRung, DunningTimeline, OverdueNotice, RECEIVABLE_COLUMNS, ReceivablesCardList, ReminderTimeline, dueWords, overdueTone, reminderTitle };