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

package/dist/chunk-6HT2LP62.js

@@ -0,0 +1,504 @@
+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 { 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 { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+
+function InvoiceStatusStamp({
+  stamp: value,
+  size = "md",
+  style
+}) {
+  const theme = useLoamTheme();
+  const { styles } = useStyles(sheet);
+  const plate = stampPlate(theme, value.tone);
+  return /* @__PURE__ */ jsx(
+    View,
+    {
+      testID: `invoice-stamp-${value.tone}`,
+      accessibilityRole: "text",
+      accessibilityLabel: value.label,
+      style: [
+        styles.stamp,
+        size === "lg" ? styles.stampLg : styles.stampMd,
+        { borderColor: plate.edge, backgroundColor: plate.fill },
+        style
+      ],
+      children: /* @__PURE__ */ jsx(
+        Text,
+        {
+          style: [
+            styles.stampLabel,
+            size === "lg" ? styles.stampLabelLg : styles.stampLabelMd,
+            { color: plate.ink }
+          ],
+          children: value.label
+        }
+      )
+    }
+  );
+}
+function stampPlate(theme, tone) {
+  switch (tone) {
+    case "good":
+      return { fill: theme.color.goodSoft, edge: theme.color.good, ink: theme.color.goodOnSoft };
+    case "warn":
+      return { fill: theme.color.warnSoft, edge: theme.color.warn, ink: theme.color.warnOnSoft };
+    case "danger":
+      return {
+        fill: theme.color.dangerSoft,
+        edge: theme.color.danger,
+        ink: theme.color.dangerOnSoft
+      };
+    case "info":
+    default:
+      return { fill: theme.color.infoSoft, edge: theme.color.info, ink: theme.color.infoOnSoft };
+  }
+}
+function InvoiceStatusBadge({
+  status,
+  label,
+  size = "sm"
+}) {
+  const meta = INVOICE_STATUS[status];
+  return /* @__PURE__ */ jsx(Badge, { variant: meta.tone, size, children: label ?? meta.label });
+}
+var sheet = createStyleSheet((theme) => ({
+  stamp: {
+    alignSelf: "flex-start",
+    alignItems: "center",
+    justifyContent: "center",
+    borderRadius: theme.radius.md,
+    // The static thick weight: the plate outline is part of the drawing.
+    borderWidth: theme.borderWidth.thick
+  },
+  stampMd: { paddingHorizontal: theme.space.s3, paddingVertical: theme.space.s1 },
+  stampLg: { paddingHorizontal: theme.space.s4, paddingVertical: theme.space.s2 },
+  stampLabel: {
+    fontFamily: theme.font.sans,
+    fontWeight: theme.fontWeight.bold,
+    textTransform: "uppercase"
+  },
+  stampLabelMd: {
+    fontSize: theme.type.footnote.fontSize,
+    lineHeight: theme.type.footnote.lineHeight,
+    letterSpacing: theme.tracking.wide
+  },
+  stampLabelLg: {
+    fontSize: theme.fontSize[17],
+    lineHeight: theme.type.body.lineHeight,
+    letterSpacing: theme.tracking.wider
+  }
+}));
+function discountLabel(discounts) {
+  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 ");
+}
+function InvoiceDocument({
+  invoice,
+  totals: t,
+  stamp,
+  dense = false,
+  showPayAction = false,
+  locale,
+  zone,
+  onPay,
+  onDownloadPdf,
+  title = "Invoice",
+  payLabel = "Pay by card instead",
+  style
+}) {
+  const theme = useLoamTheme();
+  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 zeroRated = invoice.taxMode === "reverse" || invoice.taxMode === "exempt";
+  return /* @__PURE__ */ jsxs(
+    View,
+    {
+      role: "region",
+      accessibilityLabel: `${title} ${invoice.number}`,
+      style: [styles.doc, dense ? styles.docDense : 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: `VAT ${invoice.seller.vat}` }) : null,
+            invoice.seller.reg ? /* @__PURE__ */ jsx(Text, { style: styles.sellerMeta, children: `Reg. ${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(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(
+          DescriptionList,
+          {
+            layout: "inline",
+            density: "compact",
+            items: [
+              { term: "Issued", description: day(invoice.issued) },
+              {
+                term: "Due",
+                description: /* @__PURE__ */ jsx(Text, { style: styles.strongValue, children: day(invoice.due) })
+              },
+              { term: "Terms", description: invoice.terms }
+            ]
+          }
+        ) }),
+        /* @__PURE__ */ jsx(Block, { title: "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}` }
+            ]
+          }
+        ) }),
+        /* @__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(
+          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,
+              /* @__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(View, { style: styles.pushEnd, children: /* @__PURE__ */ jsx(
+                  Amount,
+                  {
+                    minor: line.amount,
+                    currency: cy,
+                    size: "sm",
+                    weight: "bold",
+                    noSymbol: true,
+                    locale,
+                    align: "end"
+                  }
+                ) })
+              ] })
+            ]
+          },
+          `${invoice.id}-line-${index}`
+        )) }) }),
+        /* @__PURE__ */ jsxs(Block, { title: "How to pay", 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.bic ? [
+                  {
+                    term: "BIC / SWIFT",
+                    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) }
+              ]
+            }
+          ),
+          showPayAction ? /* @__PURE__ */ jsx(View, { style: styles.payAction, children: /* @__PURE__ */ jsx(Button, { variant: "tonal", size: "sm", leadingIcon: "card", 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 }),
+          t.discount !== 0 ? /* @__PURE__ */ jsx(
+            PriceRow,
+            {
+              label: discountLabel(invoice.discounts),
+              minor: -t.discount,
+              currency: cy,
+              tone: "good",
+              noSymbol: true,
+              locale
+            }
+          ) : null,
+          t.discount !== 0 ? /* @__PURE__ */ jsx(PriceRow, { label: "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",
+                minor: t.taxable,
+                currency: cy,
+                noSymbol: true,
+                locale
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              PriceRow,
+              {
+                label: `${invoice.taxLabel} \xB7 included above`,
+                minor: t.tax,
+                currency: cy,
+                noSymbol: true,
+                locale
+              }
+            )
+          ] }) : /* @__PURE__ */ jsx(
+            PriceRow,
+            {
+              label: zeroRated ? `${invoice.taxLabel} \xB7 ${mode.label.toLowerCase()}` : invoice.taxLabel,
+              minor: t.tax,
+              currency: cy,
+              noSymbol: true,
+              locale
+            }
+          ),
+          (invoice.credits ?? []).map((c) => /* @__PURE__ */ jsx(
+            PriceRow,
+            {
+              label: c.label,
+              minor: -c.amount,
+              currency: cy,
+              tone: "good",
+              noSymbol: true,
+              locale
+            },
+            c.label
+          )),
+          /* @__PURE__ */ jsx(PriceRow, { label: "Total", minor: t.total, currency: cy, strong: true, rule: true, locale }),
+          (invoice.payments ?? []).map((p) => /* @__PURE__ */ jsx(
+            PriceRow,
+            {
+              label: `${p.label} \xB7 ${day(p.at)}`,
+              minor: -p.amount,
+              currency: cy,
+              tone: "good",
+              noSymbol: true,
+              locale
+            },
+            `${p.label}-${p.at}`
+          )),
+          /* @__PURE__ */ jsx(PriceRow, { label: "Amount due", minor: t.due, currency: cy, strong: true, rule: true, locale })
+        ] }) }),
+        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 })
+          ] })
+        ] }) : 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}` })
+        ] }),
+        onDownloadPdf ? /* @__PURE__ */ jsx(View, { style: styles.docActions, children: /* @__PURE__ */ jsx(Button, { variant: "outline", size: "sm", leadingIcon: "download", onPress: onDownloadPdf, children: "Download PDF" }) }) : null
+      ]
+    }
+  );
+}
+function partyEntries(party, mono) {
+  const out = [
+    { term: "Name", description: party.name },
+    { term: "Address", description: party.addr }
+  ];
+  if (party.vat) out.push({ term: "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 });
+  return out;
+}
+function Block({
+  title,
+  children
+}) {
+  const { styles } = useStyles(sheet2);
+  return /* @__PURE__ */ jsxs(View, { style: styles.block, children: [
+    /* @__PURE__ */ jsx(Text, { accessibilityRole: "header", style: styles.overline, children: title }),
+    children
+  ] });
+}
+var sheet2 = createStyleSheet((theme) => ({
+  doc: {
+    alignSelf: "stretch",
+    gap: theme.space.s5,
+    padding: theme.space.s5,
+    borderRadius: theme.radius.lg,
+    borderWidth: theme.borderWidth.base,
+    borderColor: theme.color.border,
+    backgroundColor: theme.color.surface
+  },
+  docDense: { gap: theme.space.s4, padding: theme.space.s4 },
+  header: {
+    flexDirection: "row",
+    flexWrap: "wrap",
+    alignItems: "flex-start",
+    justifyContent: "space-between",
+    gap: theme.space.s4
+  },
+  sellerBlock: { flexShrink: 1, gap: theme.space.s1 },
+  sellerName: {
+    fontFamily: theme.font.display,
+    fontWeight: theme.font.displayWeight,
+    fontSize: theme.type.title3.fontSize,
+    lineHeight: theme.type.title3.lineHeight,
+    color: theme.color.text
+  },
+  sellerAddr: {
+    fontFamily: theme.font.sans,
+    fontSize: theme.type.footnote.fontSize,
+    lineHeight: theme.type.footnote.lineHeight,
+    color: theme.color.text2
+  },
+  sellerMeta: {
+    fontFamily: theme.font.sans,
+    fontSize: theme.type.caption1.fontSize,
+    lineHeight: theme.type.caption1.lineHeight,
+    color: theme.color.text3
+  },
+  titleBlock: { alignItems: "flex-end", gap: theme.space.s2 },
+  docTitle: {
+    fontFamily: theme.font.display,
+    fontWeight: theme.font.displayWeight,
+    fontSize: theme.type.title1.fontSize,
+    lineHeight: theme.type.title1.lineHeight,
+    letterSpacing: theme.type.title1.letterSpacing,
+    color: theme.color.text
+  },
+  mono: {
+    fontFamily: theme.font.mono,
+    fontVariant: ["tabular-nums"],
+    fontSize: theme.type.footnote.fontSize,
+    lineHeight: theme.type.footnote.lineHeight,
+    color: theme.color.text
+  },
+  strongValue: {
+    fontFamily: theme.font.sans,
+    fontWeight: theme.fontWeight.bold,
+    fontSize: theme.type.footnote.fontSize,
+    lineHeight: theme.type.footnote.lineHeight,
+    color: theme.color.text
+  },
+  block: { gap: theme.space.s2 },
+  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 },
+  line: {
+    gap: theme.space.s1,
+    padding: theme.space.s3,
+    borderRadius: theme.radius.md,
+    borderWidth: theme.borderWidth.base,
+    borderColor: theme.color.border,
+    backgroundColor: theme.color.surface2
+  },
+  lineDense: { padding: theme.space.s2 },
+  lineDesc: {
+    fontFamily: theme.font.sans,
+    fontWeight: theme.fontWeight.semibold,
+    fontSize: theme.type.footnote.fontSize,
+    lineHeight: theme.type.footnote.lineHeight,
+    color: theme.color.text
+  },
+  lineDetail: {
+    fontFamily: theme.font.sans,
+    fontSize: theme.type.caption1.fontSize,
+    lineHeight: theme.type.caption1.lineHeight,
+    color: theme.color.text3
+  },
+  lineFoot: {
+    flexDirection: "row",
+    flexWrap: "wrap",
+    alignItems: "baseline",
+    gap: theme.space.s1
+  },
+  lineMeta: {
+    fontFamily: theme.font.sans,
+    fontVariant: ["tabular-nums"],
+    fontSize: theme.type.caption1.fontSize,
+    lineHeight: theme.type.caption1.lineHeight,
+    color: theme.color.text2
+  },
+  pushEnd: { marginStart: "auto" },
+  empty: {
+    fontFamily: theme.font.sans,
+    fontSize: theme.type.footnote.fontSize,
+    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: {
+    flexDirection: "row",
+    alignItems: "flex-start",
+    gap: theme.space.s3,
+    padding: theme.space.s4,
+    borderRadius: theme.radius.md,
+    borderWidth: theme.borderWidth.base,
+    borderColor: theme.color.border,
+    backgroundColor: theme.color.surface2
+  },
+  legalBody: { flex: 1, gap: theme.space.s1 },
+  legalTitle: {
+    fontFamily: theme.font.sans,
+    fontWeight: theme.fontWeight.bold,
+    fontSize: theme.type.footnote.fontSize,
+    lineHeight: theme.type.footnote.lineHeight,
+    color: theme.color.text
+  },
+  legalNote: {
+    fontFamily: theme.font.sans,
+    fontSize: theme.type.footnote.fontSize,
+    lineHeight: theme.type.footnote.fontSize * theme.lineHeight.normal,
+    color: theme.color.text2
+  },
+  footer: {
+    gap: theme.space.s2,
+    paddingTop: theme.space.s4,
+    borderTopWidth: theme.borderWidth.base,
+    borderTopColor: theme.color.border
+  },
+  notes: {
+    fontFamily: theme.font.sans,
+    fontSize: theme.type.footnote.fontSize,
+    lineHeight: theme.type.footnote.fontSize * theme.lineHeight.normal,
+    color: theme.color.text2
+  },
+  taxFooter: {
+    fontFamily: theme.font.sans,
+    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-6N33LFQA.js

@@ -0,0 +1,35 @@
+import * as React from 'react';
+import { AccessibilityInfo } from 'react-native';
+
+// src/lib/motion.ts
+function useReducedMotion() {
+  const [reduced, setReduced] = React.useState(false);
+  React.useEffect(() => {
+    let cancelled = false;
+    let sub;
+    try {
+      const query = AccessibilityInfo.isReduceMotionEnabled?.();
+      query?.then((value) => {
+        if (!cancelled) setReduced(value);
+      }).catch(() => {
+      });
+      sub = AccessibilityInfo.addEventListener?.("reduceMotionChanged", (value) => {
+        setReduced(value);
+      });
+    } catch {
+    }
+    return () => {
+      cancelled = true;
+      sub?.remove?.();
+    };
+  }, []);
+  return reduced;
+}
+function useResolvedMotion(motion = "full") {
+  const osReduced = useReducedMotion();
+  if (motion === "none") return "none";
+  if (motion === "reduced") return "reduced";
+  return osReduced ? "reduced" : "full";
+}
+
+export { useReducedMotion, useResolvedMotion };