@btndprojects/loam-ui-native 0.2.1 → 0.3.1

package/dist/{chunk-FV6HMP7W.js → chunk-D4BCQICM.js}

@@ -1,13 +1,14 @@
-import { Amount, PriceRow } from './chunk-QHAITQIF.js';
-import { DescriptionList } from './chunk-QIKT7LIB.js';
-import { usePayLabels } from './chunk-GEIGMWNF.js';
-import { Badge } from './chunk-TN2ZNJUI.js';
-import { Button } from './chunk-E2E3I5W2.js';
+import { Amount, PriceRow } from './chunk-GVQQG435.js';
+import { DescriptionList } from './chunk-PFLNFIVB.js';
+import { usePayLabels } from './chunk-QNZII37O.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-UXGIW7OK.js';
+import { Icon } from './chunk-PCEFCOLN.js';
 import { useResolvedMotion, springConfig } from './chunk-J64KGCGX.js';
 import * as React from 'react';
-import { Animated, Text, View } from 'react-native';
+import { Animated, View, Text } from 'react-native';
 import { createStyleSheet, useLoamTheme, useStyles } from '@btndprojects/loam-theme-native';
 import { dateZone, dayLabel } from '@btndprojects/loam-date';
 import { INVOICE_STATUS, invoiceStatusLabel, taxModeText, currencyName } from '@btndprojects/loam-pay';
@@ -68,6 +69,10 @@ var DEFAULT_LABELS = {
 function InvoiceStatusStamp({
   stamp: value,
   size = "md",
+  variant = "soft",
+  count,
+  loading = false,
+  error = false,
   style,
   motion = "full"
 }) {
@@ -91,17 +96,34 @@ function InvoiceStatusStamp({
     return () => run.stop();
   }, [value.tone, value.label]);
   const { styles } = useStyles(sheet);
-  const plate = stampPlate(theme, value.tone);
+  const plate = stampPlate(theme, error ? "danger" : value.tone);
+  const word = typeof error === "string" && error ? error : value.label;
+  const text = count != null ? `${word} \xB7 ${count}` : word;
+  if (loading) {
+    return /* @__PURE__ */ jsx(View, { "aria-busy": true, accessibilityState: { busy: true }, style, children: /* @__PURE__ */ jsx(
+      Skeleton,
+      {
+        variant: "rect",
+        radius: "md",
+        height: size === "lg" ? theme.space[40] : theme.space[28],
+        width: size === "lg" ? theme.space[96] : theme.space[72]
+      }
+    ) });
+  }
   return /* @__PURE__ */ jsx(
     Animated.View,
     {
       testID: `invoice-stamp-${value.tone}`,
       accessibilityRole: "text",
-      accessibilityLabel: value.label,
+      accessibilityLabel: text,
+      "aria-invalid": error || void 0,
       style: [
         styles.stamp,
         size === "lg" ? styles.stampLg : styles.stampMd,
-        { borderColor: plate.edge, backgroundColor: plate.fill },
+        {
+          borderColor: plate.edge,
+          backgroundColor: variant === "outline" ? "transparent" : plate.fill
+        },
         {
           opacity: land.interpolate({ inputRange: [0, 1], outputRange: [0.4, 1] }),
           transform: [
@@ -118,7 +140,7 @@ function InvoiceStatusStamp({
             size === "lg" ? styles.stampLabelLg : styles.stampLabelMd,
             { color: plate.ink }
           ],
-          children: value.label
+          children: text
         }
       )
     }
@@ -146,11 +168,53 @@ function InvoiceStatusBadge({
   status,
   label,
   size = "sm",
+  variant = "soft",
+  count,
+  motion = "full",
+  loading = false,
+  error = false,
   labels
 }) {
   const pay = usePayLabels(labels);
+  const theme = useLoamTheme("invoice");
   const meta = INVOICE_STATUS[status];
-  return /* @__PURE__ */ jsx(Badge, { variant: meta.tone, size, children: label ?? invoiceStatusLabel(status, pay) });
+  if (loading) {
+    return /* @__PURE__ */ jsx(
+      View,
+      {
+        "aria-busy": true,
+        accessibilityState: { busy: true },
+        style: {
+          alignSelf: "flex-start",
+          borderRadius: theme.radius.full,
+          borderWidth: theme.borderWidth.base,
+          borderColor: theme.color.border,
+          overflow: "hidden"
+        },
+        children: /* @__PURE__ */ jsx(
+          Skeleton,
+          {
+            variant: "rect",
+            radius: "full",
+            height: size === "md" ? theme.space[24] : theme.space[20],
+            width: theme.space[64]
+          }
+        )
+      }
+    );
+  }
+  const text = typeof error === "string" && error ? error : label ?? invoiceStatusLabel(status, pay);
+  return /* @__PURE__ */ jsx(
+    Badge,
+    {
+      variant: error ? "danger" : meta.tone,
+      size,
+      outline: variant === "outline",
+      motion,
+      accessibilityLabel: error ? `${text}, error` : void 0,
+      children: count != null ? `${text} \xB7 ${count}` : text
+    }
+  );
 }
 var sheet = createStyleSheet((theme) => ({
   stamp: {
@@ -192,6 +256,7 @@ function InvoiceDocument({
   showPayAction = false,
   locale: localeProp,
   zone,
+  roll = true,
   onPay,
   onDownloadPdf,
   title: titleProp,
@@ -199,7 +264,10 @@ function InvoiceDocument({
   payBusy = false,
   labels: labelsProp,
   style,
-  motion = "full"
+  motion = "full",
+  platform: _platform,
+  tone,
+  error
 }) {
   const labels = useLabels("invoice", DEFAULT_LABELS, labelsProp);
   const pay = usePayLabels(labelsProp);
@@ -210,6 +278,8 @@ function InvoiceDocument({
   const theme = useLoamTheme("invoice");
   const { styles } = useStyles(sheet2);
   const Z = zone ?? dateZone();
+  const tinted = Boolean(error) || tone !== void 0 && tone !== "neutral";
+  const muted = tinted ? { color: theme.color.text2 } : null;
   const day = (ms) => dayLabel(Z, ms, { longMonth: true, locale });
   const cy = invoice.currency;
   const mode = taxModeText(invoice.taxMode, pay);
@@ -219,22 +289,45 @@ function InvoiceDocument({
     {
       role: "region",
       accessibilityLabel: `${title} ${invoice.number}`,
-      style: [styles.doc, dense ? styles.docDense : null, style],
+      style: [
+        styles.doc,
+        dense ? styles.docDense : null,
+        // An error paints the plate danger, whatever tone it was given: the
+        // danger ink is measured against its own tint, not another tone's.
+        error ? docTone(theme, "danger") : tone ? docTone(theme, tone) : null,
+        style
+      ],
       children: [
         /* @__PURE__ */ jsxs(View, { style: styles.header, children: [
           /* @__PURE__ */ jsxs(View, { style: styles.sellerBlock, children: [
             /* @__PURE__ */ jsx(Text, { style: styles.sellerName, children: invoice.seller.name }),
             /* @__PURE__ */ jsx(Text, { style: styles.sellerAddr, children: invoice.seller.addr }),
-            invoice.seller.vat ? /* @__PURE__ */ jsx(Text, { style: styles.sellerMeta, children: labels.sellerVat(invoice.seller.vat) }) : null,
-            invoice.seller.reg ? /* @__PURE__ */ jsx(Text, { style: styles.sellerMeta, children: labels.sellerReg(invoice.seller.reg) }) : null
+            invoice.seller.vat ? /* @__PURE__ */ jsx(Text, { style: [styles.sellerMeta, muted], children: labels.sellerVat(invoice.seller.vat) }) : null,
+            invoice.seller.reg ? /* @__PURE__ */ jsx(Text, { style: [styles.sellerMeta, muted], children: labels.sellerReg(invoice.seller.reg) }) : null
           ] }),
           /* @__PURE__ */ jsxs(View, { style: styles.titleBlock, children: [
-            /* @__PURE__ */ jsx(Text, { accessibilityRole: "header", style: styles.docTitle, children: title }),
+            /* @__PURE__ */ jsxs(View, { style: styles.titleRow, children: [
+              /* @__PURE__ */ jsx(Text, { accessibilityRole: "header", style: styles.docTitle, children: title }),
+              onDownloadPdf ? (
+                // Refinement 12: Download is a ghost sm icon button in the header.
+                /* @__PURE__ */ jsx(
+                  Button,
+                  {
+                    variant: "ghost",
+                    size: "sm",
+                    accessibilityLabel: labels.downloadPdf,
+                    leadingIcon: "download",
+                    onPress: onDownloadPdf
+                  }
+                )
+              ) : null
+            ] }),
             /* @__PURE__ */ jsx(Text, { style: styles.mono, children: invoice.number }),
             /* @__PURE__ */ jsx(InvoiceStatusStamp, { stamp, size: "lg", motion })
           ] })
         ] }),
-        /* @__PURE__ */ jsx(Block, { title: labels.billedTo, children: /* @__PURE__ */ jsx(
+        error ? /* @__PURE__ */ jsx(Text, { accessibilityRole: "alert", style: [styles.mono, { color: theme.color.dangerOnSoft }], children: error }) : null,
+        /* @__PURE__ */ jsx(Block, { muted, title: labels.billedTo, children: /* @__PURE__ */ jsx(
           DescriptionList,
           {
             layout: "inline",
@@ -242,7 +335,7 @@ function InvoiceDocument({
             items: partyEntries(invoice.buyer, styles.mono, labels)
           }
         ) }),
-        /* @__PURE__ */ jsx(Block, { title: labels.dates, children: /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsx(Block, { muted, title: labels.dates, children: /* @__PURE__ */ jsx(
           DescriptionList,
           {
             layout: "inline",
@@ -257,27 +350,33 @@ function InvoiceDocument({
             ]
           }
         ) }),
-        /* @__PURE__ */ jsx(Block, { title: labels.references, children: /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsx(Block, { muted, title: labels.references, children: /* @__PURE__ */ jsx(
           DescriptionList,
           {
             layout: "inline",
             density: "compact",
             items: [
-              { term: labels.invoice, description: /* @__PURE__ */ jsx(Text, { style: styles.mono, children: invoice.number }) },
+              {
+                term: labels.invoice,
+                description: /* @__PURE__ */ jsx(Text, { style: styles.mono, children: invoice.number })
+              },
               ...invoice.po ? [{ term: labels.po, description: /* @__PURE__ */ jsx(Text, { style: styles.mono, children: invoice.po }) }] : [],
               { term: labels.taxMode, description: mode.label },
-              { term: labels.currency, description: labels.currencyLine(t.c.code, currencyName(t.c.code, pay)) }
+              {
+                term: labels.currency,
+                description: labels.currencyLine(t.c.code, currencyName(t.c.code, pay))
+              }
             ]
           }
         ) }),
-        /* @__PURE__ */ jsx(Block, { title: labels.linesTitle(t.c.code), children: t.lines.length === 0 ? /* @__PURE__ */ jsx(Text, { style: styles.empty, children: labels.noLines }) : /* @__PURE__ */ jsx(View, { role: "list", accessibilityRole: "list", style: styles.lines, children: t.lines.map((line, index) => /* @__PURE__ */ jsxs(
+        /* @__PURE__ */ jsx(Block, { muted, title: labels.linesTitle(t.c.code), children: t.lines.length === 0 ? /* @__PURE__ */ jsx(Text, { style: [styles.empty, muted], children: labels.noLines }) : /* @__PURE__ */ jsx(View, { role: "list", accessibilityRole: "list", style: styles.lines, children: t.lines.map((line, index) => /* @__PURE__ */ jsxs(
           View,
           {
             role: "listitem",
             style: [styles.line, dense ? styles.lineDense : null],
             children: [
               /* @__PURE__ */ jsx(Text, { style: styles.lineDesc, children: line.desc }),
-              line.detail ? /* @__PURE__ */ jsx(Text, { style: styles.lineDetail, children: line.detail }) : null,
+              line.detail ? /* @__PURE__ */ jsx(Text, { style: [styles.lineDetail, muted], children: line.detail }) : null,
               /* @__PURE__ */ jsxs(View, { style: styles.lineFoot, children: [
                 /* @__PURE__ */ jsx(Text, { style: styles.lineMeta, children: labels.lineQty(line.qty) }),
                 /* @__PURE__ */ jsx(Amount, { minor: line.unit, currency: cy, size: "sm", noSymbol: true, locale }),
@@ -299,46 +398,65 @@ function InvoiceDocument({
           },
           `${invoice.id}-line-${index}`
         )) }) }),
-        /* @__PURE__ */ jsxs(Block, { title: labels.howToPay, children: [
+        /* @__PURE__ */ jsx(Block, { muted, title: labels.howToPay, children: /* @__PURE__ */ jsx(
+          DescriptionList,
+          {
+            layout: "inline",
+            density: "compact",
+            items: [
+              ...invoice.seller.iban ? [
+                {
+                  term: labels.iban,
+                  description: /* @__PURE__ */ jsx(Text, { style: styles.mono, children: invoice.seller.iban })
+                }
+              ] : [],
+              ...invoice.seller.bic ? [
+                {
+                  term: labels.bic,
+                  description: /* @__PURE__ */ jsx(Text, { style: styles.mono, children: invoice.seller.bic })
+                }
+              ] : [],
+              {
+                term: labels.reference,
+                description: /* @__PURE__ */ jsx(Text, { style: styles.mono, children: invoice.number })
+              },
+              { term: labels.payableBy, description: day(invoice.due) }
+            ]
+          }
+        ) }),
+        /* @__PURE__ */ jsx(Block, { muted, title: labels.totals, children: /* @__PURE__ */ jsxs(View, { style: dense ? styles.totalsDense : styles.totals, children: [
           /* @__PURE__ */ jsx(
-            DescriptionList,
+            PriceRow,
             {
-              layout: "inline",
-              density: "compact",
-              items: [
-                ...invoice.seller.iban ? [
-                  {
-                    term: labels.iban,
-                    description: /* @__PURE__ */ jsx(Text, { style: styles.mono, children: invoice.seller.iban })
-                  }
-                ] : [],
-                ...invoice.seller.bic ? [
-                  {
-                    term: labels.bic,
-                    description: /* @__PURE__ */ jsx(Text, { style: styles.mono, children: invoice.seller.bic })
-                  }
-                ] : [],
-                { term: labels.reference, description: /* @__PURE__ */ jsx(Text, { style: styles.mono, children: invoice.number }) },
-                { term: labels.payableBy, description: day(invoice.due) }
-              ]
+              label: labels.subtotal,
+              minor: t.gross,
+              currency: cy,
+              noSymbol: true,
+              locale
             }
           ),
-          showPayAction ? /* @__PURE__ */ jsx(View, { style: styles.payAction, children: /* @__PURE__ */ jsx(Button, { variant: "tonal", size: "sm", leadingIcon: "card", loading: payBusy, onPress: onPay, children: payLabel }) }) : null
-        ] }),
-        /* @__PURE__ */ jsx(Block, { title: labels.totals, children: /* @__PURE__ */ jsxs(View, { style: dense ? styles.totalsDense : styles.totals, children: [
-          /* @__PURE__ */ jsx(PriceRow, { label: labels.subtotal, minor: t.gross, currency: cy, noSymbol: true, locale }),
           t.discount !== 0 ? /* @__PURE__ */ jsx(
             PriceRow,
             {
               label: discountLabel(invoice.discounts, labels),
               minor: -t.discount,
               currency: cy,
-              tone: "good",
+              tone: tinted ? void 0 : "good",
               noSymbol: true,
               locale
             }
           ) : null,
-          t.discount !== 0 ? /* @__PURE__ */ jsx(PriceRow, { label: labels.net, minor: t.net, currency: cy, noSymbol: true, locale, rule: true }) : null,
+          t.discount !== 0 ? /* @__PURE__ */ jsx(
+            PriceRow,
+            {
+              label: labels.net,
+              minor: t.net,
+              currency: cy,
+              noSymbol: true,
+              locale,
+              rule: true
+            }
+          ) : null,
           invoice.taxMode === "inclusive" ? /* @__PURE__ */ jsxs(Fragment, { children: [
             /* @__PURE__ */ jsx(
               PriceRow,
@@ -376,7 +494,7 @@ function InvoiceDocument({
               label: c.label,
               minor: -c.amount,
               currency: cy,
-              tone: "good",
+              tone: tinted ? void 0 : "good",
               noSymbol: true,
               locale
             },
@@ -391,7 +509,7 @@ function InvoiceDocument({
               strong: true,
               rule: true,
               locale,
-              roll: true,
+              roll,
               motion
             }
           ),
@@ -401,7 +519,7 @@ function InvoiceDocument({
               label: labels.payment(p.label, day(p.at)),
               minor: -p.amount,
               currency: cy,
-              tone: "good",
+              tone: tinted ? void 0 : "good",
               noSymbol: true,
               locale
             },
@@ -416,7 +534,7 @@ function InvoiceDocument({
               strong: true,
               rule: true,
               locale,
-              roll: true,
+              roll,
               motion
             }
           )
@@ -430,9 +548,20 @@ function InvoiceDocument({
         ] }) : null,
         /* @__PURE__ */ jsxs(View, { style: styles.footer, children: [
           invoice.notes ? /* @__PURE__ */ jsx(Text, { style: styles.notes, children: invoice.notes }) : null,
-          /* @__PURE__ */ jsx(Text, { style: styles.taxFooter, children: labels.taxModeFooter(mode.label, mode.note) })
+          /* @__PURE__ */ jsx(Text, { style: [styles.taxFooter, muted], children: labels.taxModeFooter(mode.label, mode.note) })
         ] }),
-        onDownloadPdf ? /* @__PURE__ */ jsx(View, { style: styles.docActions, children: /* @__PURE__ */ jsx(Button, { variant: "outline", size: "sm", leadingIcon: "download", onPress: onDownloadPdf, children: labels.downloadPdf }) }) : null
+        showPayAction ? /* @__PURE__ */ jsx(
+          Button,
+          {
+            variant: "primary",
+            size: "lg",
+            fullWidth: true,
+            leadingIcon: "card",
+            loading: payBusy,
+            onPress: onPay,
+            children: payLabel
+          }
+        ) : null
       ]
     }
   );
@@ -450,14 +579,32 @@ function partyEntries(party, mono, labels = DEFAULT_LABELS) {
 }
 function Block({
   title,
+  muted,
   children
 }) {
   const { styles } = useStyles(sheet2);
   return /* @__PURE__ */ jsxs(View, { style: styles.block, children: [
-    /* @__PURE__ */ jsx(Text, { accessibilityRole: "header", style: styles.overline, children: title }),
+    /* @__PURE__ */ jsx(Text, { accessibilityRole: "header", style: [styles.overline, muted], children: title }),
     children
   ] });
 }
+function docTone(theme, tone) {
+  const c = theme.color;
+  const e = theme.edge;
+  switch (tone) {
+    case "good":
+      return { borderColor: e.good, backgroundColor: c.goodSoft };
+    case "warn":
+      return { borderColor: e.warn, backgroundColor: c.warnSoft };
+    case "danger":
+      return { borderColor: e.danger, backgroundColor: c.dangerSoft };
+    case "info":
+      return { borderColor: e.info, backgroundColor: c.infoSoft };
+    case "neutral":
+    default:
+      return { borderColor: e.neutral, backgroundColor: c.surface2 };
+  }
+}
 var sheet2 = createStyleSheet((theme) => ({
   doc: {
     alignSelf: "stretch",
@@ -497,6 +644,7 @@ var sheet2 = createStyleSheet((theme) => ({
     color: theme.color.text3
   },
   titleBlock: { alignItems: "flex-end", gap: theme.space.s2 },
+  titleRow: { flexDirection: "row", alignItems: "center", gap: theme.space.s2 },
   docTitle: {
     fontFamily: theme.font.display,
     fontWeight: theme.font.displayWeight,
@@ -521,12 +669,8 @@ var sheet2 = createStyleSheet((theme) => ({
   },
   block: { gap: theme.space.s2 },
   overline: {
+    ...theme.type.overline,
     fontFamily: theme.font.sans,
-    fontWeight: theme.fontWeight.bold,
-    fontSize: theme.type.caption2.fontSize,
-    lineHeight: theme.type.caption2.lineHeight,
-    letterSpacing: theme.tracking.caps,
-    textTransform: "uppercase",
     color: theme.color.text3
   },
   lines: { gap: theme.space.s2 },
@@ -572,7 +716,6 @@ var sheet2 = createStyleSheet((theme) => ({
     lineHeight: theme.type.footnote.lineHeight,
     color: theme.color.text3
   },
-  payAction: { alignSelf: "flex-start", paddingTop: theme.space.s1 },
   totals: { gap: theme.space.s2 },
   totalsDense: { gap: theme.space.s1 },
   legalBox: {
@@ -616,8 +759,7 @@ var sheet2 = createStyleSheet((theme) => ({
     fontSize: theme.type.caption1.fontSize,
     lineHeight: theme.type.caption1.fontSize * theme.lineHeight.normal,
     color: theme.color.text3
-  },
-  docActions: { flexDirection: "row", flexWrap: "wrap", gap: theme.space.s2 }
+  }
 }));
 
 export { InvoiceDocument, InvoiceStatusBadge, InvoiceStatusStamp };

package/dist/chunk-EABKIIA4.js

@@ -0,0 +1 @@
+