@btndprojects/loam-ui-native 0.1.1 → 0.3.1

package/dist/chunk-GM7YIPB7.js

@@ -0,0 +1,1052 @@
+import { Timeline } from './chunk-T77WJA74.js';
+import { StageTimeline } from './chunk-NNJLVA7M.js';
+import { List, ListRow } from './chunk-JA6TK7H2.js';
+import { Amount } from './chunk-GVQQG435.js';
+import { methodIcon } from './chunk-TDWWVJA4.js';
+import { usePayLabels } from './chunk-QNZII37O.js';
+import { MetricDelta } from './chunk-N7AX4OA4.js';
+import { EmptyState } from './chunk-QJMMM4RC.js';
+import { Alert } from './chunk-Z7I4ZSO6.js';
+import { Sheet } from './chunk-B7JZ3N5G.js';
+import { Button } from './chunk-5DTKORLI.js';
+import { Badge } from './chunk-LGNTP5XA.js';
+import { Skeleton } from './chunk-YJ5PXOX3.js';
+import { useLabels, useLoamLocale } from './chunk-APCWFOZW.js';
+import { Icon } from './chunk-PCEFCOLN.js';
+import { useResolvedMotion, springConfig } from './chunk-J64KGCGX.js';
+import * as React from 'react';
+import { Platform, findNodeHandle, AccessibilityInfo, View, Text, Pressable, Animated } from 'react-native';
+import { createStyleSheet, useLoamTheme, useStyles } from '@btndprojects/loam-theme-native';
+import { receivableStatus, methodFor, methodText, money, agingLabel, dunningText, bucketFor } from '@btndprojects/loam-pay';
+export { LEDGER_CARD_BREAKPOINT } from '@btndprojects/loam-pay';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+
+// src/receivables/receivables-labels.ts
+var plural = (n, one, other) => `${n} ${n === 1 ? one : other}`;
+var DEFAULT_LABELS = {
+  actions: "Actions",
+  actionsFor: (label, no) => `${label} \u2014 ${no}`,
+  customer: "Customer",
+  invoice: "Invoice",
+  amount: "Amount",
+  due: "Due",
+  status: "Status",
+  method: "Method",
+  lateDays: (d) => `${d}d late`,
+  dueToday: "Due today",
+  dueIn: (d) => `in ${d}d`,
+  emptyMessage: "Nothing outstanding.",
+  caption: "Outstanding invoices",
+  emptyTitle: "Nothing outstanding",
+  open: "Open",
+  openRow: (open, no, who) => `${open} ${no} \u2014 ${who}`,
+  agingLabel: "Accounts receivable aging",
+  invoiceCount: (n) => plural(n, "invoice", "invoices"),
+  openRowDetail: (open, no, who, amount, status, due) => `${open} ${no} \u2014 ${who}, ${amount}, ${status}, ${due}`,
+  bucketSummary: (bucket, amount, count) => `${bucket} \u2014 ${amount}, ${count}`,
+  cannotBeUndone: "This cannot be undone.",
+  cancel: "Cancel",
+  asksConfirm: "Asks you to confirm",
+  confirmTitle: (action, no) => `${action} \u2014 ${no}?`,
+  day: "Day",
+  dayN: (d) => `Day ${d}`,
+  now: "Now",
+  retrySchedule: "Retry schedule",
+  reminderSchedule: "Reminder schedule",
+  sending: "Sending",
+  scheduled: "Scheduled",
+  reminderTitle: (day) => {
+    if (day < 0) return `Due in ${plural(-day, "day", "days")}`;
+    if (day === 0) return "Due today";
+    return `${plural(day, "day", "days")} past due`;
+  },
+  reminderBefore: "A heads-up before the due date, so a slow approval chain has time to move.",
+  reminderOn: "The due date, restated with the amount and the same pay link.",
+  reminderAfter: "The same template again, one sentence clearer about how late it now is.",
+  overdueTitle: (invoice, days) => `overdue on ${invoice} \u2014 ${plural(days, "day", "days")} past due`,
+  dueTitle: (invoice) => `due on ${invoice}`,
+  overdueDescription: (due) => `The due date was ${due}. Paying now clears it; if it has already been paid, tell us and we will match it up.`,
+  dueDescription: (due) => `Due ${due}. Nothing is late yet \u2014 this is a heads-up so an approval chain has time to move.`
+};
+var RECEIVABLE_COLUMNS = [
+  "who",
+  "no",
+  "amount",
+  "dueIn",
+  "status",
+  "method"
+];
+function dueWords(dueIn, labels = DEFAULT_LABELS) {
+  if (dueIn < 0) return labels.lateDays(-dueIn);
+  if (dueIn === 0) return labels.dueToday;
+  return labels.dueIn(dueIn);
+}
+function ReceivablesCardList({
+  rows,
+  actions = [],
+  actionsLabel: actionsLabelProp,
+  emptyTitle: emptyTitleProp,
+  emptyDescription,
+  openLabel: openLabelProp,
+  onOpenRow,
+  onAction,
+  confirmMessage: confirmMessageProp,
+  cancelLabel: cancelLabelProp,
+  locale: localeProp,
+  labels: labelsProp,
+  style,
+  platform,
+  density,
+  selected,
+  onSelectedChange,
+  disabled = false,
+  tone = "status",
+  loading = false,
+  error
+}) {
+  const labels = useLabels("receivables", DEFAULT_LABELS, labelsProp);
+  const pay = usePayLabels(labelsProp);
+  const providerLocale = useLoamLocale();
+  const locale = localeProp ?? providerLocale;
+  const actionsLabel = actionsLabelProp ?? labels.actions;
+  const emptyTitle = emptyTitleProp ?? labels.emptyTitle;
+  const openLabel = openLabelProp ?? labels.open;
+  const confirmMessage = confirmMessageProp ?? labels.cannotBeUndone;
+  const cancelLabel = cancelLabelProp ?? labels.cancel;
+  const theme = useLoamTheme("receivables");
+  const { styles } = useStyles(sheet);
+  const [menuFor, setMenuFor] = React.useState(null);
+  const [confirming, setConfirming] = React.useState(null);
+  const confirmTitle = React.useRef(null);
+  const closeMenu = () => {
+    setMenuFor(null);
+    setConfirming(null);
+  };
+  const run = (id) => {
+    const no = menuFor;
+    closeMenu();
+    if (no !== null) onAction?.(no, id);
+  };
+  React.useEffect(() => {
+    if (!confirming) return;
+    const node = confirmTitle.current;
+    if (!node) return;
+    if (Platform.OS === "web") node.focus?.();
+    else {
+      const handle = findNodeHandle(node);
+      if (handle) AccessibilityInfo.setAccessibilityFocus(handle);
+    }
+  }, [confirming]);
+  if (error) return /* @__PURE__ */ jsx(Alert, { tone: "danger", title: error });
+  if (loading) {
+    return /* @__PURE__ */ jsx(
+      View,
+      {
+        role: "group",
+        "aria-busy": true,
+        accessibilityState: { busy: true },
+        accessibilityLabel: labels.actions,
+        style: [styles.loadingRows, style],
+        children: [0, 1, 2].map((i) => /* @__PURE__ */ jsx(Skeleton, { variant: "rect", height: theme.ctl.lg, radius: "md" }, i))
+      }
+    );
+  }
+  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, pay);
+      const def = methodFor(r.method);
+      const methodName = methodText(r.method, pay)?.label ?? 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,
+              ...density ? { density } : {},
+              disabled,
+              ...selected ? {
+                selectable: true,
+                selected: selected.includes(r.no),
+                onSelectedChange: (on) => onSelectedChange?.(
+                  on ? [...selected, r.no] : selected.filter((n) => n !== r.no)
+                )
+              } : null,
+              accessibilityLabel: onOpenRow ? labels.openRowDetail(
+                openLabel,
+                r.no,
+                r.who,
+                money(r.amount, r.cur, { locale }),
+                s.label,
+                dueWords(r.dueIn, labels)
+              ) : 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: tone === "status" ? s.tone : tone, size: "sm", children: s.label }),
+                /* @__PURE__ */ jsx(Text, { style: styles.due, children: dueWords(r.dueIn, labels) }),
+                /* @__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: methodName })
+                ] })
+              ] })
+            }
+          ) }),
+          actions.length > 0 ? /* @__PURE__ */ jsx(
+            Pressable,
+            {
+              accessibilityRole: "button",
+              accessibilityLabel: labels.actionsFor(actionsLabel, r.no),
+              disabled,
+              onPress: () => setMenuFor(r.no),
+              style: [styles.menuTrigger, disabled ? styles.menuDisabled : null],
+              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 : labels.actionsFor(actionsLabel, menuFor),
+        onClose: closeMenu,
+        children: confirming ? /* @__PURE__ */ jsxs(View, { style: styles.confirm, children: [
+          /* @__PURE__ */ jsxs(
+            View,
+            {
+              ref: confirmTitle,
+              accessible: true,
+              accessibilityRole: "header",
+              ...Platform.OS === "web" ? { tabIndex: -1 } : null,
+              style: styles.confirmTitleRow,
+              children: [
+                /* @__PURE__ */ jsx(Icon, { name: "alert-triangle", size: theme.icon.md, color: theme.color.danger }),
+                /* @__PURE__ */ jsx(Text, { style: styles.confirmTitle, children: labels.confirmTitle(confirming.label, menuFor ?? "") })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx(Text, { style: styles.confirmMessage, children: confirmMessage }),
+          /* @__PURE__ */ jsxs(View, { style: styles.confirmActions, children: [
+            /* @__PURE__ */ jsx(Button, { variant: "outline", onPress: () => setConfirming(null), children: cancelLabel }),
+            /* @__PURE__ */ jsx(Button, { variant: "danger", onPress: () => run(confirming.id), children: confirming.label })
+          ] })
+        ] }) : /* @__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.
+          // Refinement 12 (F39): each action is a ListRow on the
+          // one-line tier (iOS 44, Android 56) with a chevron.
+          /* @__PURE__ */ jsx(View, { role: "listitem", children: /* @__PURE__ */ jsx(
+            ListRow,
+            {
+              platform,
+              accessibilityLabel: a.label,
+              accessibilityHint: a.danger ? labels.asksConfirm : void 0,
+              onPress: () => a.danger ? setConfirming(a) : run(a.id),
+              leading: a.icon ? /* @__PURE__ */ jsx(
+                Icon,
+                {
+                  name: a.icon,
+                  size: theme.icon.md,
+                  color: a.danger ? theme.color.danger : theme.color.text2
+                }
+              ) : void 0,
+              title: /* @__PURE__ */ jsx(
+                Text,
+                {
+                  style: [styles.actionLabel, a.danger ? styles.actionLabelDanger : null],
+                  children: a.label
+                }
+              ),
+              trailing: a.danger ? /* @__PURE__ */ jsx(
+                Icon,
+                {
+                  name: "alert-triangle",
+                  size: theme.icon.sm,
+                  color: theme.color.danger
+                }
+              ) : void 0,
+              chevron: !a.danger
+            }
+          ) }, 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
+  },
+  // Refinement 12: the one reference style — mono 12 / 500, tabular, text-2.
+  no: {
+    fontFamily: theme.font.mono,
+    fontWeight: theme.fontWeight.medium,
+    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"
+  },
+  menuDisabled: { opacity: theme.state.disabledOpacity },
+  loadingRows: { alignSelf: "stretch", gap: theme.space.s2 },
+  actionList: {},
+  actionLabel: {
+    fontFamily: theme.font.sans,
+    fontSize: theme.type.body.fontSize,
+    lineHeight: theme.type.body.lineHeight,
+    color: theme.color.text
+  },
+  actionLabelDanger: { color: theme.color.danger },
+  confirm: { gap: theme.space.s3 },
+  confirmTitleRow: { flexDirection: "row", alignItems: "center", gap: theme.space.s2 },
+  confirmTitle: {
+    flexShrink: 1,
+    fontFamily: theme.font.sans,
+    fontSize: theme.type.body.fontSize,
+    lineHeight: theme.type.body.lineHeight,
+    fontWeight: theme.fontWeight.semibold,
+    color: theme.color.text
+  },
+  confirmMessage: {
+    fontFamily: theme.font.sans,
+    fontSize: theme.type.footnote.fontSize,
+    lineHeight: theme.type.footnote.lineHeight,
+    color: theme.color.text2
+  },
+  confirmActions: { flexDirection: "row", justifyContent: "flex-end", gap: theme.space.s2 }
+}));
+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: localeProp,
+  countLabel,
+  labels: labelsProp,
+  style,
+  motion = "full",
+  delay = 0,
+  roll = false,
+  loading = false,
+  delta,
+  deltaDirection,
+  invert = false,
+  size = "md",
+  variant = "soft",
+  elevation = "flat",
+  padding = "none",
+  align = "start",
+  error
+}) {
+  const labels = useLabels("receivables", DEFAULT_LABELS, labelsProp);
+  const pay = usePayLabels(labelsProp);
+  const providerLocale = useLoamLocale();
+  const locale = localeProp ?? providerLocale;
+  const theme = useLoamTheme("receivables");
+  const { styles } = useStyles(sheet2);
+  const paint = tilePaint(theme, error ? "danger" : tone);
+  const PAD = { none: 0, sm: theme.space.s2, md: theme.space.s4, lg: theme.space.s6 };
+  const ALIGN = { start: "flex-start", center: "center", end: "flex-end" };
+  const pct = Math.round(Math.min(1, Math.max(0, fill)) * 100);
+  const level = useResolvedMotion(motion, "receivables");
+  const grow = React.useRef(new Animated.Value(level === "full" ? 0 : pct)).current;
+  React.useEffect(() => {
+    if (level !== "full") {
+      grow.setValue(pct);
+      return;
+    }
+    const run = Animated.sequence([
+      Animated.delay(delay),
+      Animated.spring(grow, { ...springConfig(theme, "ds"), toValue: pct, useNativeDriver: false })
+    ]);
+    run.start();
+    return () => run.stop();
+  }, [pct, level]);
+  const countText = countLabel ? `${count} ${countLabel}` : labels.invoiceCount(count);
+  const name = agingLabel({ bucket }, pay);
+  const row = /* @__PURE__ */ jsx(
+    ListRow,
+    {
+      chevron: Boolean(onSelect),
+      onPress: onSelect,
+      accessibilityLabel: onSelect ? labels.bucketSummary(name, money(minor, currency, { locale }), countText) : void 0,
+      title: /* @__PURE__ */ jsxs(View, { style: [styles.titleRow, { justifyContent: ALIGN[align] }], children: [
+        /* @__PURE__ */ jsx(Text, { style: [styles.bucketName, { color: paint.ink }], children: name }),
+        /* @__PURE__ */ jsx(Text, { style: [styles.count, { color: paint.ink }], children: countText })
+      ] }),
+      trailing: (
+        // The tile's own on-soft ink, which is the one measured to clear AA
+        // against this tint. `color.text` would be a second, unmeasured ink on a
+        // tinted ground.
+        /* @__PURE__ */ jsx(
+          Amount,
+          {
+            minor,
+            currency,
+            size,
+            weight: "bold",
+            locale,
+            style: { color: paint.ink },
+            loading,
+            roll,
+            motion
+          }
+        )
+      )
+    }
+  );
+  return /* @__PURE__ */ jsxs(
+    View,
+    {
+      "aria-busy": loading || void 0,
+      accessibilityState: loading ? { busy: true } : void 0,
+      style: [
+        styles.tile,
+        {
+          borderColor: paint.edge,
+          backgroundColor: variant === "outline" ? "transparent" : paint.fill
+        },
+        padding !== "none" ? { padding: PAD[padding] } : null,
+        elevation === "raised" ? theme.shadow.md : null,
+        style
+      ],
+      children: [
+        row,
+        delta !== void 0 && delta !== "" && !loading ? /* @__PURE__ */ jsx(View, { style: [styles.delta, { alignSelf: ALIGN[align] }], children: /* @__PURE__ */ jsx(MetricDelta, { delta, deltaDirection, invert, size: "sm" }) }) : null,
+        error ? /* @__PURE__ */ jsx(
+          Text,
+          {
+            role: "alert",
+            accessibilityRole: "alert",
+            style: [styles.count, styles.errorText, { color: paint.ink }],
+            children: error
+          }
+        ) : null,
+        /* @__PURE__ */ jsx(
+          View,
+          {
+            "aria-hidden": true,
+            accessibilityElementsHidden: true,
+            importantForAccessibility: "no-hide-descendants",
+            style: styles.rail,
+            children: /* @__PURE__ */ jsx(
+              Animated.View,
+              {
+                style: [
+                  styles.railFill,
+                  {
+                    width: grow.interpolate({
+                      inputRange: [0, 100],
+                      outputRange: ["0%", "100%"],
+                      extrapolate: "clamp"
+                    }),
+                    backgroundColor: paint.bar
+                  }
+                ]
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+}
+function AgingSummary({
+  buckets,
+  currency,
+  onSelectBucket,
+  locale,
+  label,
+  labels: labelsProp,
+  style,
+  motion = "full",
+  roll = false,
+  loading = false,
+  size = "md",
+  delta,
+  align = "start",
+  error
+}) {
+  const labels = useLabels("receivables", DEFAULT_LABELS, labelsProp);
+  const theme = useLoamTheme("receivables");
+  const { styles } = useStyles(sheet2);
+  const peak = buckets.reduce((m, b) => Math.max(m, Math.abs(b.minor)), 0);
+  return /* @__PURE__ */ jsxs(
+    View,
+    {
+      role: "group",
+      accessibilityLabel: label ?? labels.agingLabel,
+      accessibilityState: loading ? { busy: true } : void 0,
+      "aria-busy": loading || void 0,
+      style: [styles.strip, style],
+      children: [
+        loading ? buckets.map((b) => (
+          // Tile footprint: the one-line row tier, the rail and the tile padding.
+          /* @__PURE__ */ jsx(
+            Skeleton,
+            {
+              variant: "rect",
+              height: theme.ctl.lg + theme.space[4] + theme.space.s3 + theme.space.s1,
+              radius: "md"
+            },
+            b.bucket.bucket
+          )
+        )) : buckets.map((b, i) => /* @__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,
+            motion,
+            roll,
+            size,
+            align,
+            ...delta?.[b.bucket.bucket] !== void 0 ? { delta: delta[b.bucket.bucket] } : {},
+            labels: labelsProp,
+            delay: Math.min(i, 8) * 30,
+            onSelect: onSelectBucket ? () => onSelectBucket(b.bucket.bucket) : void 0
+          },
+          b.bucket.bucket
+        )),
+        error ? /* @__PURE__ */ jsx(
+          Text,
+          {
+            role: "alert",
+            accessibilityRole: "alert",
+            style: [styles.count, { color: theme.color.dangerOnSoft }],
+            children: error
+          }
+        ) : null
+      ]
+    }
+  );
+}
+var sheet2 = createStyleSheet((theme) => ({
+  strip: { alignSelf: "stretch", gap: theme.space.s3 },
+  tile: {
+    overflow: "hidden",
+    paddingBottom: theme.space.s3,
+    gap: theme.space.s1,
+    borderRadius: theme.radius.md,
+    borderWidth: theme.borderWidth.base
+  },
+  delta: { alignSelf: "flex-start", paddingHorizontal: theme.space.s4 },
+  titleRow: { flexDirection: "row", alignItems: "baseline", gap: theme.space.s2 },
+  bucketName: {
+    ...theme.type.overline,
+    fontFamily: theme.font.sans
+  },
+  // `Progress`'s own `sm` track height — see the module note.
+  rail: {
+    height: theme.space[4],
+    marginHorizontal: theme.space.s4,
+    overflow: "hidden",
+    borderRadius: theme.radius.full,
+    backgroundColor: theme.color.surface3
+  },
+  railFill: { height: "100%", borderRadius: theme.radius.full },
+  errorText: { paddingHorizontal: theme.space.s4 },
+  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"
+};
+var RUNG_BADGE = {
+  info: "info",
+  good: "good",
+  warn: "warn",
+  danger: "danger",
+  "text-3": "neutral"
+};
+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 LoadingRows({ label }) {
+  const theme = useLoamTheme("receivables");
+  const { styles } = useStyles(sheet3);
+  return /* @__PURE__ */ jsx(
+    View,
+    {
+      role: "group",
+      "aria-busy": true,
+      accessibilityLabel: label,
+      accessibilityState: { busy: true },
+      style: styles.loadingRows,
+      children: [0, 1, 2].map((i) => /* @__PURE__ */ jsx(Skeleton, { variant: "rect", height: theme.ctl.lg, radius: "md" }, i))
+    }
+  );
+}
+function DunningRung({
+  day,
+  attempt,
+  surface,
+  tone,
+  current = false,
+  dayLabel,
+  labels: labelsProp,
+  style,
+  density = "comfortable",
+  selected = false,
+  disabled = false,
+  onPress,
+  loading = false,
+  error,
+  orientation = "vertical"
+}) {
+  const labels = useLabels("receivables", DEFAULT_LABELS, labelsProp);
+  const theme = useLoamTheme("receivables");
+  const { styles } = useStyles(sheet3);
+  const paint = rungPaint(theme, error ? "danger" : tone);
+  const currentAttr = current ? { "aria-current": "step" } : {};
+  const rungStyle = [
+    styles.rung,
+    density === "compact" ? styles.rungCompact : null,
+    orientation === "horizontal" ? styles.rungStacked : null,
+    current || selected ? styles.rungCurrent : null,
+    disabled ? styles.rungDisabled : null,
+    style
+  ];
+  const a11yState = { disabled, busy: loading, selected };
+  const content = /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(Badge, { variant: RUNG_BADGE[tone], size: "sm", style: styles.dayBadge, children: dayLabel ? `${dayLabel} ${day}` : labels.dayN(day) }),
+    /* @__PURE__ */ jsx(
+      View,
+      {
+        "aria-hidden": true,
+        accessibilityElementsHidden: true,
+        importantForAccessibility: "no-hide-descendants",
+        style: [styles.dot, { backgroundColor: paint.dot }]
+      }
+    ),
+    loading ? /* @__PURE__ */ jsxs(View, { style: styles.rungBody, children: [
+      /* @__PURE__ */ jsx(Skeleton, { variant: "rect", height: theme.space.s3, radius: "sm" }),
+      /* @__PURE__ */ jsx(Skeleton, { variant: "rect", height: theme.space.s3, radius: "sm" })
+    ] }) : /* @__PURE__ */ jsxs(View, { style: styles.rungBody, children: [
+      /* @__PURE__ */ jsx(Text, { style: [styles.attempt, error ? { color: paint.ink } : null], children: attempt }),
+      /* @__PURE__ */ jsx(Text, { style: styles.surface, children: surface }),
+      error ? /* @__PURE__ */ jsx(
+        Text,
+        {
+          role: "alert",
+          accessibilityRole: "alert",
+          style: [styles.surface, { color: paint.ink }],
+          children: error
+        }
+      ) : null
+    ] }),
+    current && !loading ? (
+      // The third marker. Never colour alone.
+      /* @__PURE__ */ jsx(Text, { style: styles.now, children: labels.now })
+    ) : null
+  ] });
+  return onPress ? /* @__PURE__ */ jsx(
+    View,
+    {
+      role: "listitem",
+      ...currentAttr,
+      "aria-busy": loading || void 0,
+      testID: `dunning-rung-${day}${current ? "-current" : ""}`,
+      children: /* @__PURE__ */ jsx(
+        Pressable,
+        {
+          accessibilityRole: "button",
+          accessibilityState: a11yState,
+          disabled: disabled || loading,
+          onPress,
+          style: rungStyle,
+          children: content
+        }
+      )
+    }
+  ) : /* @__PURE__ */ jsx(
+    View,
+    {
+      role: "listitem",
+      ...currentAttr,
+      accessibilityState: a11yState,
+      "aria-busy": loading || void 0,
+      testID: `dunning-rung-${day}${current ? "-current" : ""}`,
+      style: rungStyle,
+      children: content
+    }
+  );
+}
+function DunningTimeline({
+  steps,
+  tones,
+  currentDay,
+  dayLabel,
+  density = "comfortable",
+  label,
+  labels: labelsProp,
+  style,
+  loading = false,
+  error,
+  orientation = "vertical"
+}) {
+  const labels = useLabels("receivables", DEFAULT_LABELS, labelsProp);
+  const pay = usePayLabels(labelsProp);
+  const { styles } = useStyles(sheet3);
+  const items = steps.map((s, i) => {
+    const tone = RUNG_TONE[tones?.[i] ?? "warn"];
+    const current = currentDay === s.day;
+    const text = dunningText(s, pay);
+    return {
+      id: `dunning-${s.day}`,
+      time: dayLabel ? `${dayLabel} ${s.day}` : labels.dayN(s.day),
+      title: text.attempt,
+      description: current ? /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(Text, { children: `${text.surface} ` }),
+        /* @__PURE__ */ jsx(Text, { style: styles.now, children: labels.now })
+      ] }) : text.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" : ""}`
+    };
+  });
+  if (error) return /* @__PURE__ */ jsx(Alert, { tone: "danger", title: error });
+  if (loading) return /* @__PURE__ */ jsx(LoadingRows, { label: label ?? labels.retrySchedule });
+  if (orientation === "horizontal") {
+    return /* @__PURE__ */ jsx(View, { role: "group", accessibilityLabel: label ?? labels.retrySchedule, style, children: /* @__PURE__ */ jsx(
+      StageTimeline,
+      {
+        orientation: "horizontal",
+        stages: items.map((it) => ({
+          id: it.id,
+          label: it.title,
+          detail: it.time,
+          state: it.current ? "working" : "pending"
+        }))
+      }
+    ) });
+  }
+  return /* @__PURE__ */ jsx(Timeline, { items, density, label: label ?? labels.retrySchedule, style });
+}
+function reminderTitle(day, labels = DEFAULT_LABELS) {
+  return labels.reminderTitle(day);
+}
+function ReminderTimeline({
+  days,
+  sentAt = {},
+  currentDay,
+  titles = {},
+  density = "comfortable",
+  orientation = "vertical",
+  label,
+  labels: labelsProp,
+  loading = false,
+  error
+}) {
+  const labels = useLabels("receivables", DEFAULT_LABELS, labelsProp);
+  const items = days.map((d) => {
+    const sent = sentAt[d];
+    const isCurrent = currentDay === d;
+    return {
+      id: `reminder-${d}`,
+      time: sent ?? (isCurrent ? labels.sending : labels.scheduled),
+      title: titles[d] ?? reminderTitle(d, labels),
+      // The one changed sentence sits here, under a headline that is the same
+      // shape on every rung.
+      description: d < 0 ? labels.reminderBefore : d === 0 ? labels.reminderOn : labels.reminderAfter,
+      state: sent ? "done" : isCurrent ? "working" : "pending",
+      icon: sent ? "check" : isCurrent ? "mail" : "clock"
+    };
+  });
+  if (error) return /* @__PURE__ */ jsx(Alert, { tone: "danger", title: error });
+  if (loading) return /* @__PURE__ */ jsx(LoadingRows, { label: label ?? labels.reminderSchedule });
+  if (orientation === "horizontal") {
+    return /* @__PURE__ */ jsx(View, { role: "group", accessibilityLabel: label ?? labels.reminderSchedule, children: /* @__PURE__ */ jsx(
+      StageTimeline,
+      {
+        orientation: "horizontal",
+        stages: items.map((it) => ({
+          id: it.id,
+          label: it.title,
+          detail: it.time,
+          state: it.state ?? "pending"
+        }))
+      }
+    ) });
+  }
+  return /* @__PURE__ */ jsx(Timeline, { items, density, label: label ?? labels.reminderSchedule });
+}
+function overdueTone(daysLate) {
+  const tone = bucketFor(daysLate).tone;
+  return tone === "good" ? "info" : tone;
+}
+function sentenceCase(text, locale) {
+  return text.charAt(0).toLocaleUpperCase(locale) + text.slice(1);
+}
+function OverdueNotice({
+  invoiceNumber,
+  minor,
+  currency,
+  daysLate,
+  dueLabel,
+  tone,
+  message,
+  action,
+  dismissible,
+  onDismiss,
+  loading = false,
+  error,
+  locale: localeProp,
+  roll = false,
+  labels: labelsProp,
+  style,
+  variant,
+  size,
+  icon,
+  motion
+}) {
+  const labels = useLabels("receivables", DEFAULT_LABELS, labelsProp);
+  const providerLocale = useLoamLocale();
+  const locale = localeProp ?? providerLocale;
+  const { styles } = useStyles(sheet3);
+  const theme = useLoamTheme("receivables");
+  const resolved = tone ?? overdueTone(daysLate);
+  const late = daysLate > 0;
+  if (error)
+    return /* @__PURE__ */ jsx(Alert, { tone: "danger", title: error, variant, size, motion });
+  return /* @__PURE__ */ jsxs(View, { "aria-busy": loading || void 0, style: [styles.overdue, style], children: [
+    /* @__PURE__ */ jsx(
+      Amount,
+      {
+        minor,
+        currency,
+        size: "hero",
+        weight: "bold",
+        locale,
+        loading,
+        roll
+      }
+    ),
+    loading ? /* @__PURE__ */ jsx(Skeleton, { variant: "rect", height: theme.ctl.lg, radius: "md" }) : /* @__PURE__ */ jsx(
+      Alert,
+      {
+        tone: resolved,
+        variant,
+        size,
+        icon,
+        motion,
+        dismissible,
+        onDismiss,
+        action,
+        title: late ? sentenceCase(labels.overdueTitle(invoiceNumber, daysLate), locale) : sentenceCase(labels.dueTitle(invoiceNumber), locale),
+        description: message ?? (late ? labels.overdueDescription(dueLabel) : labels.dueDescription(dueLabel))
+      }
+    )
+  ] });
+}
+var sheet3 = createStyleSheet((theme) => ({
+  rung: {
+    flexDirection: "row",
+    alignItems: "flex-start",
+    gap: theme.space.s3,
+    padding: theme.space.s3,
+    borderRadius: theme.radius.md
+  },
+  // Refinement 12: the selected-row fill, not accent-soft (no edge, ink unchanged).
+  rungCurrent: { backgroundColor: theme.state.selected },
+  rungCompact: { padding: theme.space.s2 },
+  rungStacked: { flexDirection: "column" },
+  rungDisabled: { opacity: theme.state.disabledOpacity },
+  loadingRows: { alignSelf: "stretch", gap: theme.space.s2 },
+  dayBadge: { minWidth: theme.space[56] },
+  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: {
+    ...theme.type.overline,
+    fontFamily: theme.font.sans,
+    color: theme.color.accentStrong
+  },
+  overdue: { alignSelf: "stretch", gap: theme.space.s2 }
+}));
+
+export { AgingBucketCard, AgingSummary, DunningRung, DunningTimeline, OverdueNotice, RECEIVABLE_COLUMNS, ReceivablesCardList, ReminderTimeline, dueWords, overdueTone, reminderTitle };