@btndprojects/loam-ui-native 0.1.1 → 0.3.1

package/dist/chunk-JNY4ZHAR.js

@@ -1,634 +0,0 @@
-import { Timeline } from './chunk-4GBOGOTV.js';
-import { List, ListRow } from './chunk-IVNRBPGC.js';
-import { EmptyState } from './chunk-LZLHELAG.js';
-import { methodIcon } from './chunk-PUPM2YGF.js';
-import { Amount } from './chunk-VBOXAEPI.js';
-import { Sheet } from './chunk-ZVFE5QGU.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 };