@btndprojects/loam-ui-native 0.1.0 → 0.2.1

package/dist/{chunk-6HT2LP62.js → chunk-FV6HMP7W.js}

@@ -1,25 +1,99 @@
-import { Amount, PriceRow } from './chunk-VBOXAEPI.js';
-import { DescriptionList } from './chunk-TUTI5HOZ.js';
-import { Badge } from './chunk-SBMNWWBV.js';
-import { Button } from './chunk-3ARE4TES.js';
-import { Icon } from './chunk-TKVFVF5D.js';
-import 'react';
-import { View, Text } from 'react-native';
+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 { useLabels, useLoamLocale } from './chunk-APCWFOZW.js';
+import { Icon } from './chunk-UXGIW7OK.js';
+import { useResolvedMotion, springConfig } from './chunk-J64KGCGX.js';
+import * as React from 'react';
+import { Animated, Text, View } from 'react-native';
 import { createStyleSheet, useLoamTheme, useStyles } from '@btndprojects/loam-theme-native';
 import { dateZone, dayLabel } from '@btndprojects/loam-date';
-import { INVOICE_STATUS, TAX_MODES, REVERSE_CHARGE_NOTE } from '@btndprojects/loam-pay';
+import { INVOICE_STATUS, invoiceStatusLabel, taxModeText, currencyName } from '@btndprojects/loam-pay';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 
+// src/invoice/invoice-labels.ts
+var DEFAULT_LABELS = {
+  name: "Name",
+  address: "Address",
+  vat: "VAT",
+  registration: "Registration",
+  contact: "Contact",
+  sellerVat: (v) => `VAT ${v}`,
+  sellerReg: (r) => `Reg. ${r}`,
+  title: "Invoice",
+  billedTo: "Billed to",
+  dates: "Dates",
+  references: "References",
+  issued: "Issued",
+  due: "Due",
+  terms: "Terms",
+  invoice: "Invoice",
+  po: "PO",
+  taxMode: "Tax mode",
+  currency: "Currency",
+  currencyLine: (code, name) => `${code} \xB7 ${name}`,
+  linesTitle: (code) => `Lines \xB7 all amounts in ${code}`,
+  colDescription: "Description",
+  colQty: "Qty",
+  colUnit: "Unit",
+  colTax: "Tax",
+  colAmount: "Amount",
+  noLines: "This invoice has no lines.",
+  linesCaption: (n) => `Lines on invoice ${n}`,
+  howToPay: "How to pay",
+  iban: "IBAN",
+  bic: "BIC / SWIFT",
+  reference: "Reference",
+  payableBy: "Payable by",
+  payByCard: "Pay by card instead",
+  totals: "Totals",
+  subtotal: "Subtotal",
+  discount: "Discount",
+  discountPercent: (label, pct) => `${label} \xB7 ${pct}%`,
+  net: "Net",
+  taxable: "Taxable amount",
+  taxIncluded: (l) => `${l} \xB7 included above`,
+  taxZeroRated: (l, mode) => `${l} \xB7 ${mode.toLowerCase()}`,
+  payment: (label, date) => `${label} \xB7 ${date}`,
+  total: "Total",
+  amountDue: "Amount due",
+  taxModeFooter: (name, note) => `${name} \u2014 ${note}`,
+  downloadPdf: "Download PDF",
+  lineQty: (qty) => `${qty} \xD7`,
+  lineTax: (rate) => `\xB7 ${rate}% tax`,
+  print: "Print"
+};
 function InvoiceStatusStamp({
   stamp: value,
   size = "md",
-  style
+  style,
+  motion = "full"
 }) {
-  const theme = useLoamTheme();
+  const theme = useLoamTheme("invoice");
+  const level = useResolvedMotion(motion, "invoice");
+  const land = React.useRef(new Animated.Value(1)).current;
+  const first = React.useRef(true);
+  React.useEffect(() => {
+    if (first.current) {
+      first.current = false;
+      return;
+    }
+    if (level !== "full") return;
+    land.setValue(0);
+    const run = Animated.spring(land, {
+      ...springConfig(theme, "fs"),
+      toValue: 1,
+      useNativeDriver: true
+    });
+    run.start();
+    return () => run.stop();
+  }, [value.tone, value.label]);
   const { styles } = useStyles(sheet);
   const plate = stampPlate(theme, value.tone);
   return /* @__PURE__ */ jsx(
-    View,
+    Animated.View,
     {
       testID: `invoice-stamp-${value.tone}`,
       accessibilityRole: "text",
@@ -28,6 +102,12 @@ function InvoiceStatusStamp({
         styles.stamp,
         size === "lg" ? styles.stampLg : styles.stampMd,
         { borderColor: plate.edge, backgroundColor: plate.fill },
+        {
+          opacity: land.interpolate({ inputRange: [0, 1], outputRange: [0.4, 1] }),
+          transform: [
+            { scale: land.interpolate({ inputRange: [0, 1], outputRange: [STAMP_FROM, 1] }) }
+          ]
+        },
         style
       ],
       children: /* @__PURE__ */ jsx(
@@ -44,6 +124,7 @@ function InvoiceStatusStamp({
     }
   );
 }
+var STAMP_FROM = 0.9;
 function stampPlate(theme, tone) {
   switch (tone) {
     case "good":
@@ -64,10 +145,12 @@ function stampPlate(theme, tone) {
 function InvoiceStatusBadge({
   status,
   label,
-  size = "sm"
+  size = "sm",
+  labels
 }) {
+  const pay = usePayLabels(labels);
   const meta = INVOICE_STATUS[status];
-  return /* @__PURE__ */ jsx(Badge, { variant: meta.tone, size, children: label ?? meta.label });
+  return /* @__PURE__ */ jsx(Badge, { variant: meta.tone, size, children: label ?? invoiceStatusLabel(status, pay) });
 }
 var sheet = createStyleSheet((theme) => ({
   stamp: {
@@ -96,10 +179,10 @@ var sheet = createStyleSheet((theme) => ({
     letterSpacing: theme.tracking.wider
   }
 }));
-function discountLabel(discounts) {
+function discountLabel(discounts, labels = DEFAULT_LABELS) {
   const list = discounts ?? [];
-  if (list.length === 0) return "Discount";
-  return list.map((d) => d.kind === "pct" ? `${d.label} \xB7 ${d.value}%` : d.label).join(" \xB7 ");
+  if (list.length === 0) return labels.discount;
+  return list.map((d) => d.kind === "pct" ? labels.discountPercent(d.label, d.value) : d.label).join(" \xB7 ");
 }
 function InvoiceDocument({
   invoice,
@@ -107,20 +190,29 @@ function InvoiceDocument({
   stamp,
   dense = false,
   showPayAction = false,
-  locale,
+  locale: localeProp,
   zone,
   onPay,
   onDownloadPdf,
-  title = "Invoice",
-  payLabel = "Pay by card instead",
-  style
+  title: titleProp,
+  payLabel: payLabelProp,
+  payBusy = false,
+  labels: labelsProp,
+  style,
+  motion = "full"
 }) {
-  const theme = useLoamTheme();
+  const labels = useLabels("invoice", DEFAULT_LABELS, labelsProp);
+  const pay = usePayLabels(labelsProp);
+  const contextLocale = useLoamLocale();
+  const locale = localeProp ?? contextLocale;
+  const title = titleProp ?? labels.title;
+  const payLabel = payLabelProp ?? labels.payByCard;
+  const theme = useLoamTheme("invoice");
   const { styles } = useStyles(sheet2);
   const Z = zone ?? dateZone();
   const day = (ms) => dayLabel(Z, ms, { longMonth: true, locale });
   const cy = invoice.currency;
-  const mode = TAX_MODES[invoice.taxMode];
+  const mode = taxModeText(invoice.taxMode, pay);
   const zeroRated = invoice.taxMode === "reverse" || invoice.taxMode === "exempt";
   return /* @__PURE__ */ jsxs(
     View,
@@ -133,45 +225,52 @@ function InvoiceDocument({
           /* @__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: `VAT ${invoice.seller.vat}` }) : null,
-            invoice.seller.reg ? /* @__PURE__ */ jsx(Text, { style: styles.sellerMeta, children: `Reg. ${invoice.seller.reg}` }) : null
+            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
           ] }),
           /* @__PURE__ */ jsxs(View, { style: styles.titleBlock, children: [
             /* @__PURE__ */ jsx(Text, { accessibilityRole: "header", style: styles.docTitle, children: title }),
             /* @__PURE__ */ jsx(Text, { style: styles.mono, children: invoice.number }),
-            /* @__PURE__ */ jsx(InvoiceStatusStamp, { stamp, size: "lg" })
+            /* @__PURE__ */ jsx(InvoiceStatusStamp, { stamp, size: "lg", motion })
           ] })
         ] }),
-        /* @__PURE__ */ jsx(Block, { title: "Billed to", children: /* @__PURE__ */ jsx(DescriptionList, { layout: "inline", density: "compact", items: partyEntries(invoice.buyer, styles.mono) }) }),
-        /* @__PURE__ */ jsx(Block, { title: "Dates", children: /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsx(Block, { title: labels.billedTo, children: /* @__PURE__ */ jsx(
+          DescriptionList,
+          {
+            layout: "inline",
+            density: "compact",
+            items: partyEntries(invoice.buyer, styles.mono, labels)
+          }
+        ) }),
+        /* @__PURE__ */ jsx(Block, { title: labels.dates, children: /* @__PURE__ */ jsx(
           DescriptionList,
           {
             layout: "inline",
             density: "compact",
             items: [
-              { term: "Issued", description: day(invoice.issued) },
+              { term: labels.issued, description: day(invoice.issued) },
               {
-                term: "Due",
+                term: labels.due,
                 description: /* @__PURE__ */ jsx(Text, { style: styles.strongValue, children: day(invoice.due) })
               },
-              { term: "Terms", description: invoice.terms }
+              { term: labels.terms, description: invoice.terms }
             ]
           }
         ) }),
-        /* @__PURE__ */ jsx(Block, { title: "References", children: /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsx(Block, { title: labels.references, children: /* @__PURE__ */ jsx(
           DescriptionList,
           {
             layout: "inline",
             density: "compact",
             items: [
-              { term: "Invoice", description: /* @__PURE__ */ jsx(Text, { style: styles.mono, children: invoice.number }) },
-              ...invoice.po ? [{ term: "PO", description: /* @__PURE__ */ jsx(Text, { style: styles.mono, children: invoice.po }) }] : [],
-              { term: "Tax mode", description: mode.label },
-              { term: "Currency", description: `${t.c.code} \xB7 ${t.c.label}` }
+              { 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)) }
             ]
           }
         ) }),
-        /* @__PURE__ */ jsx(Block, { title: `Lines \xB7 all amounts in ${t.c.code}`, children: t.lines.length === 0 ? /* @__PURE__ */ jsx(Text, { style: styles.empty, children: "This invoice has no lines." }) : /* @__PURE__ */ jsx(View, { role: "list", accessibilityRole: "list", style: styles.lines, children: t.lines.map((line, index) => /* @__PURE__ */ jsxs(
+        /* @__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(
           View,
           {
             role: "listitem",
@@ -180,18 +279,9 @@ function InvoiceDocument({
               /* @__PURE__ */ jsx(Text, { style: styles.lineDesc, children: line.desc }),
               line.detail ? /* @__PURE__ */ jsx(Text, { style: styles.lineDetail, children: line.detail }) : null,
               /* @__PURE__ */ jsxs(View, { style: styles.lineFoot, children: [
-                /* @__PURE__ */ jsx(Text, { style: styles.lineMeta, children: `${line.qty} \xD7` }),
-                /* @__PURE__ */ jsx(
-                  Amount,
-                  {
-                    minor: line.unit,
-                    currency: cy,
-                    size: "sm",
-                    noSymbol: true,
-                    locale
-                  }
-                ),
-                /* @__PURE__ */ jsx(Text, { style: styles.lineMeta, children: `\xB7 ${zeroRated ? 0 : line.tax}% tax` }),
+                /* @__PURE__ */ jsx(Text, { style: styles.lineMeta, children: labels.lineQty(line.qty) }),
+                /* @__PURE__ */ jsx(Amount, { minor: line.unit, currency: cy, size: "sm", noSymbol: true, locale }),
+                /* @__PURE__ */ jsx(Text, { style: styles.lineMeta, children: labels.lineTax(zeroRated ? 0 : line.tax) }),
                 /* @__PURE__ */ jsx(View, { style: styles.pushEnd, children: /* @__PURE__ */ jsx(
                   Amount,
                   {
@@ -209,33 +299,38 @@ function InvoiceDocument({
           },
           `${invoice.id}-line-${index}`
         )) }) }),
-        /* @__PURE__ */ jsxs(Block, { title: "How to pay", children: [
+        /* @__PURE__ */ jsxs(Block, { title: labels.howToPay, children: [
           /* @__PURE__ */ jsx(
             DescriptionList,
             {
               layout: "inline",
               density: "compact",
               items: [
-                ...invoice.seller.iban ? [{ term: "IBAN", description: /* @__PURE__ */ jsx(Text, { style: styles.mono, children: invoice.seller.iban }) }] : [],
+                ...invoice.seller.iban ? [
+                  {
+                    term: labels.iban,
+                    description: /* @__PURE__ */ jsx(Text, { style: styles.mono, children: invoice.seller.iban })
+                  }
+                ] : [],
                 ...invoice.seller.bic ? [
                   {
-                    term: "BIC / SWIFT",
+                    term: labels.bic,
                     description: /* @__PURE__ */ jsx(Text, { style: styles.mono, children: invoice.seller.bic })
                   }
                 ] : [],
-                { term: "Reference", description: /* @__PURE__ */ jsx(Text, { style: styles.mono, children: invoice.number }) },
-                { term: "Payable by", description: day(invoice.due) }
+                { term: labels.reference, description: /* @__PURE__ */ jsx(Text, { style: styles.mono, children: invoice.number }) },
+                { term: labels.payableBy, description: day(invoice.due) }
               ]
             }
           ),
-          showPayAction ? /* @__PURE__ */ jsx(View, { style: styles.payAction, children: /* @__PURE__ */ jsx(Button, { variant: "tonal", size: "sm", leadingIcon: "card", onPress: onPay, children: payLabel }) }) : null
+          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: "Totals", children: /* @__PURE__ */ jsxs(View, { style: dense ? styles.totalsDense : styles.totals, children: [
-          /* @__PURE__ */ jsx(PriceRow, { label: "Subtotal", minor: t.gross, currency: cy, noSymbol: true, locale }),
+        /* @__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),
+              label: discountLabel(invoice.discounts, labels),
               minor: -t.discount,
               currency: cy,
               tone: "good",
@@ -243,12 +338,12 @@ function InvoiceDocument({
               locale
             }
           ) : null,
-          t.discount !== 0 ? /* @__PURE__ */ jsx(PriceRow, { label: "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,
               {
-                label: "Taxable amount",
+                label: labels.taxable,
                 minor: t.taxable,
                 currency: cy,
                 noSymbol: true,
@@ -258,7 +353,7 @@ function InvoiceDocument({
             /* @__PURE__ */ jsx(
               PriceRow,
               {
-                label: `${invoice.taxLabel} \xB7 included above`,
+                label: labels.taxIncluded(invoice.taxLabel),
                 minor: t.tax,
                 currency: cy,
                 noSymbol: true,
@@ -268,7 +363,7 @@ function InvoiceDocument({
           ] }) : /* @__PURE__ */ jsx(
             PriceRow,
             {
-              label: zeroRated ? `${invoice.taxLabel} \xB7 ${mode.label.toLowerCase()}` : invoice.taxLabel,
+              label: zeroRated ? labels.taxZeroRated(invoice.taxLabel, mode.label) : invoice.taxLabel,
               minor: t.tax,
               currency: cy,
               noSymbol: true,
@@ -287,11 +382,23 @@ function InvoiceDocument({
             },
             c.label
           )),
-          /* @__PURE__ */ jsx(PriceRow, { label: "Total", minor: t.total, currency: cy, strong: true, rule: true, locale }),
+          /* @__PURE__ */ jsx(
+            PriceRow,
+            {
+              label: labels.total,
+              minor: t.total,
+              currency: cy,
+              strong: true,
+              rule: true,
+              locale,
+              roll: true,
+              motion
+            }
+          ),
           (invoice.payments ?? []).map((p) => /* @__PURE__ */ jsx(
             PriceRow,
             {
-              label: `${p.label} \xB7 ${day(p.at)}`,
+              label: labels.payment(p.label, day(p.at)),
               minor: -p.amount,
               currency: cy,
               tone: "good",
@@ -300,33 +407,45 @@ function InvoiceDocument({
             },
             `${p.label}-${p.at}`
           )),
-          /* @__PURE__ */ jsx(PriceRow, { label: "Amount due", minor: t.due, currency: cy, strong: true, rule: true, locale })
+          /* @__PURE__ */ jsx(
+            PriceRow,
+            {
+              label: labels.amountDue,
+              minor: t.due,
+              currency: cy,
+              strong: true,
+              rule: true,
+              locale,
+              roll: true,
+              motion
+            }
+          )
         ] }) }),
         invoice.taxMode === "reverse" ? /* @__PURE__ */ jsxs(View, { style: styles.legalBox, children: [
           /* @__PURE__ */ jsx(Icon, { name: "info", size: theme.icon.sm, color: theme.color.text2 }),
           /* @__PURE__ */ jsxs(View, { style: styles.legalBody, children: [
             /* @__PURE__ */ jsx(Text, { style: styles.legalTitle, children: mode.label }),
-            /* @__PURE__ */ jsx(Text, { style: styles.legalNote, children: REVERSE_CHARGE_NOTE })
+            /* @__PURE__ */ jsx(Text, { style: styles.legalNote, children: pay.reverseChargeNote })
           ] })
         ] }) : 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: `${mode.label} \u2014 ${mode.note}` })
+          /* @__PURE__ */ jsx(Text, { style: styles.taxFooter, 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: "Download PDF" }) }) : null
+        onDownloadPdf ? /* @__PURE__ */ jsx(View, { style: styles.docActions, children: /* @__PURE__ */ jsx(Button, { variant: "outline", size: "sm", leadingIcon: "download", onPress: onDownloadPdf, children: labels.downloadPdf }) }) : null
       ]
     }
   );
 }
-function partyEntries(party, mono) {
+function partyEntries(party, mono, labels = DEFAULT_LABELS) {
   const out = [
-    { term: "Name", description: party.name },
-    { term: "Address", description: party.addr }
+    { term: labels.name, description: party.name },
+    { term: labels.address, description: party.addr }
   ];
-  if (party.vat) out.push({ term: "VAT", description: /* @__PURE__ */ jsx(Text, { style: mono, children: party.vat }) });
+  if (party.vat) out.push({ term: labels.vat, description: /* @__PURE__ */ jsx(Text, { style: mono, children: party.vat }) });
   if (party.reg)
-    out.push({ term: "Registration", description: /* @__PURE__ */ jsx(Text, { style: mono, children: party.reg }) });
-  if (party.contact) out.push({ term: "Contact", description: party.contact });
+    out.push({ term: labels.registration, description: /* @__PURE__ */ jsx(Text, { style: mono, children: party.reg }) });
+  if (party.contact) out.push({ term: labels.contact, description: party.contact });
   return out;
 }
 function Block({