@vamos-ui/react 0.0.0-stage → 0.2.0

package/dist/business/line-items.js

@@ -0,0 +1,299 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import * as React from "react";
+import { Copy, ArrowUp, ArrowDown, Trash2, Plus, CornerDownLeft } from "lucide-react";
+import { cn } from "../lib/cn.js";
+import { useLabels } from "../lib/labels.js";
+import { useLocale } from "../lib/locale.js";
+import { useControllableState } from "../lib/use-controllable-state.js";
+import { Button } from "../components/button.js";
+import { Input } from "../components/input.js";
+import { NumberInput } from "../components/formatted-input.js";
+import { CurrencyInput } from "../components/currency-input.js";
+import { Select } from "../components/select.js";
+import { ActionMenu } from "../components/dropdown-menu.js";
+import { RecordPicker } from "../components/record-picker.js";
+import { Sortable, SortableHandle, SortableItem } from "../sortable/sortable.js";
+import { arrayMove } from "../sortable/core.js";
+import { computeLineTotals, createLineItem, isLineValid, vatLineTaxPack, } from "./line-items-core.js";
+export const lineItemsLabels = {
+    caption: "Line items",
+    item: "Item",
+    description: "Description",
+    quantity: "Qty",
+    unit: "Unit",
+    unitPrice: "Price",
+    discount: "Discount",
+    tax: "Tax",
+    withholding: "Withholding",
+    total: "Amount",
+    actions: "Actions",
+    reorder: "Reorder",
+    cell: "{column}, row {row}",
+    rowActions: "Actions for row {row}",
+    addRow: "Add item",
+    insertBelow: "Insert row below",
+    duplicate: "Duplicate",
+    moveUp: "Move up",
+    moveDown: "Move down",
+    remove: "Delete row",
+    none: "None",
+    pickItem: "Pick an item",
+    descriptionPlaceholder: "What are you selling?",
+    percent: "%",
+    discountType: "Switch discount to {type}",
+    discountPercent: "percent",
+    discountAmount: "amount",
+    invalidRow: "Quantity and price are required",
+    subtotal: "Subtotal",
+    discountTotal: "Discounts",
+    documentDiscount: "Document discount",
+    net: "Net",
+    taxLine: "{name} {rate}",
+    taxBase: "on {base}",
+    withheldLine: "Withholding {code} · {ratio}",
+    grandTotal: "Total",
+    payable: "Payable",
+    inclusive: "Prices include tax",
+    summary: "Totals",
+    added: "Row {row} added",
+    removed: "Row {row} deleted",
+    moved: "Row moved to position {row} of {total}",
+    totalAnnounce: "Total {total}",
+    shortcuts: "Enter on the last field adds a row · Alt+↑/↓ moves a row · Ctrl/⌘+Shift+Backspace deletes it",
+};
+const NUMERIC = ["quantity", "unitPrice", "discount", "total"];
+function toDecimal(n) {
+    if (n == null || !Number.isFinite(n))
+        return "";
+    return String(n);
+}
+function LineItemsInner(props, ref) {
+    const { value, defaultValue, onValueChange, currency: currencyProp, pricesIncludeTax, taxPack: packProp, taxRates, units, itemSource, onItemPick, columns: columnsProp, documentDiscount, onDocumentDiscountChange, readOnly, disabled, name, minRows = 1, newRow, hideSummary, summaryFooter, labels, className, } = props;
+    const t = useLabels("lineItems", lineItemsLabels, labels);
+    const { currency: providerCurrency, format } = useLocale();
+    const currency = (currencyProp ?? providerCurrency).toUpperCase();
+    const pack = React.useMemo(() => {
+        const base = packProp ?? vatLineTaxPack;
+        return taxRates ? { ...base, rates: taxRates } : base;
+    }, [packProp, taxRates]);
+    const make = React.useCallback((partial = {}) => createLineItem({ ...newRow?.(), ...partial }, pack), [newRow, pack]);
+    const [initial] = React.useState(() => defaultValue ?? Array.from({ length: Math.max(1, minRows) }, () => make()));
+    const totalsFor = React.useCallback((rows) => computeLineTotals(rows, { pricesIncludeTax, documentDiscount, taxPack: pack }), [pricesIncludeTax, documentDiscount, pack]);
+    const [rows, setRowsState] = useControllableState({ value, defaultValue: initial });
+    const totals = React.useMemo(() => totalsFor(rows), [rows, totalsFor]);
+    const rootRef = React.useRef(null);
+    const [announce, setAnnounce] = React.useState("");
+    const columns = React.useMemo(() => {
+        if (columnsProp)
+            return columnsProp;
+        const out = [];
+        if (itemSource)
+            out.push("item");
+        out.push("description", "quantity", "unit", "unitPrice", "discount", "tax");
+        if (pack.withholding?.length)
+            out.push("withholding");
+        out.push("total");
+        return out;
+    }, [columnsProp, itemSource, pack.withholding]);
+    const editable = !readOnly && !disabled;
+    const columnLabel = (c) => t(c);
+    const commit = (next, message) => {
+        setRowsState(next);
+        onValueChange?.(next, totalsFor(next));
+        if (message)
+            setAnnounce(message);
+    };
+    const patch = (id, p) => commit(rows.map((r) => (r.id === id ? { ...r, ...p } : r)));
+    const focusCell = (rowId, col) => {
+        requestAnimationFrame(() => {
+            const row = rootRef.current?.querySelector(`[data-row-id="${rowId}"]`);
+            if (!row)
+                return;
+            const cell = (col && row.querySelector(`[data-col="${col}"]`)) || row.querySelector("[data-col]");
+            cell?.querySelector("input:not([type=hidden]), button:not([data-slot=sortable-handle])")?.focus();
+        });
+    };
+    const addRow = (afterIndex = rows.length - 1, partial) => {
+        const row = make(partial);
+        const next = [...rows.slice(0, afterIndex + 1), row, ...rows.slice(afterIndex + 1)];
+        commit(next, t("added", { row: afterIndex + 2 }));
+        focusCell(row.id, columns[0]);
+    };
+    const removeRow = (index) => {
+        if (rows.length <= minRows)
+            return;
+        const next = rows.filter((_, i) => i !== index);
+        commit(next, t("removed", { row: index + 1 }));
+        const target = next[Math.min(index, next.length - 1)];
+        if (target)
+            focusCell(target.id);
+    };
+    const moveRow = (index, to, col) => {
+        if (to < 0 || to >= rows.length || to === index)
+            return;
+        const id = rows[index].id;
+        commit(arrayMove(rows, index, to), t("moved", { row: to + 1, total: rows.length }));
+        focusCell(id, col);
+    };
+    // Polite total announcement, debounced so typing doesn't spam.
+    const [totalAnnounce, setTotalAnnounce] = React.useState("");
+    const firstRun = React.useRef(true);
+    React.useEffect(() => {
+        if (firstRun.current) {
+            firstRun.current = false;
+            return;
+        }
+        const id = setTimeout(() => setTotalAnnounce(t("totalAnnounce", { total: format.currency(totals.payable, currency) })), 700);
+        return () => clearTimeout(id);
+    }, [totals.payable, currency, format, t]);
+    const onRowKeyDown = (e, index) => {
+        if (!editable)
+            return;
+        const col = e.target.closest("[data-col]")?.dataset.col;
+        const mod = e.metaKey || e.ctrlKey;
+        if (e.altKey && !mod && (e.key === "ArrowUp" || e.key === "ArrowDown")) {
+            e.preventDefault();
+            e.stopPropagation();
+            moveRow(index, index + (e.key === "ArrowUp" ? -1 : 1), col);
+        }
+        else if (mod && e.shiftKey && e.key === "Backspace") {
+            e.preventDefault();
+            e.stopPropagation();
+            removeRow(index);
+        }
+        else if (mod && e.key === "Enter") {
+            e.preventDefault();
+            e.stopPropagation();
+            addRow(index);
+        }
+        else if (e.key === "Enter" && !e.shiftKey && !e.altKey && e.target.tagName === "INPUT" && index === rows.length - 1) {
+            const editableCols = columns.filter((c) => c !== "total");
+            if (col && col === editableCols[editableCols.length - 1]) {
+                e.preventDefault();
+                addRow(index);
+            }
+        }
+    };
+    const showDiscount = columns.includes("discount");
+    const money = (v) => format.currency(v, currency);
+    const rateLabel = (rate) => pack.rates.find((r) => r.value === rate)?.label ?? `${rate}%`;
+    const renderCell = (row, index, col) => {
+        const line = totals.lines[index];
+        const aria = t("cell", { column: columnLabel(col), row: index + 1 });
+        const invalid = !isLineValid(row) && (row.unitPrice !== "" || row.description !== "");
+        if (!editable) {
+            switch (col) {
+                case "item":
+                case "description":
+                    return _jsx("span", { className: "block min-w-0 text-fg", children: col === "item" ? row.itemId ?? "" : row.description });
+                case "quantity":
+                    return _jsx("span", { className: "tabular", children: row.quantity ? format.number(row.quantity) : "" });
+                case "unit":
+                    return _jsx("span", { className: "text-fg-muted", children: row.unit });
+                case "unitPrice":
+                    return _jsx("span", { className: "tabular", children: row.unitPrice ? money(row.unitPrice) : "" });
+                case "discount":
+                    return row.discount && row.discount.value ? (_jsx("span", { className: "tabular text-fg-muted", children: row.discount.type === "percent" ? format.percent(Number(row.discount.value) / 100) : money(row.discount.value) })) : (_jsx("span", { className: "text-fg-subtle", children: "\u2014" }));
+                case "tax":
+                    return _jsx("span", { className: "tabular text-fg-muted", children: row.taxRate != null ? rateLabel(row.taxRate) : "" });
+                case "withholding":
+                    return _jsx("span", { className: "text-fg-muted", children: row.withholding ?? "—" });
+                case "total":
+                    return _jsx("span", { className: "tabular font-medium text-fg", children: line ? money(line.net) : "" });
+            }
+        }
+        switch (col) {
+            case "item":
+                return itemSource ? (_jsx(RecordPicker, { source: itemSource, size: "sm", value: row.itemId ?? null, onValueChange: (id, record) => patch(row.id, { itemId: id ?? undefined, ...(record && onItemPick ? onItemPick(record) : null) }), placeholder: t("pickItem"), "aria-label": aria, className: "min-w-40" })) : null;
+            case "description":
+                return (_jsx(Input, { size: "sm", variant: "ghost", value: row.description, placeholder: t("descriptionPlaceholder"), "aria-label": aria, onChange: (e) => patch(row.id, { description: e.target.value }) }));
+            case "quantity":
+                return (_jsx(NumberInput, { size: "sm", variant: "ghost", precision: 3, min: 0, value: row.quantity === "" ? null : Number(row.quantity), onValueChange: (n) => patch(row.id, { quantity: toDecimal(n) }), "aria-label": aria, invalid: invalid && row.quantity === "", inputClassName: "text-end" }));
+            case "unit":
+                return units ? (_jsx(Select, { size: "sm", variant: "ghost", value: row.unit ?? null, onValueChange: (u) => patch(row.id, { unit: u ?? undefined }), items: units.map((u) => ({ value: u, label: u })), "aria-label": aria, placeholder: "\u2014" })) : (_jsx(Input, { size: "sm", variant: "ghost", value: row.unit ?? "", onChange: (e) => patch(row.id, { unit: e.target.value }), "aria-label": aria }));
+            case "unitPrice":
+                return (_jsx(CurrencyInput, { size: "sm", variant: "ghost", currency: currency, currencyDisplay: "none", align: "end", value: row.unitPrice === "" ? null : row.unitPrice, onValueChange: (v) => patch(row.id, { unitPrice: v ?? "" }), "aria-label": aria, invalid: invalid && row.unitPrice === "" }));
+            case "discount": {
+                const type = row.discount?.type ?? "percent";
+                const other = type === "percent" ? "amount" : "percent";
+                return (_jsx(CurrencyInput, { size: "sm", variant: "ghost", currency: currency, currencyDisplay: "none", precision: 2, align: "end", placeholder: "0", value: row.discount?.value ? row.discount.value : null, onValueChange: (v) => patch(row.id, { discount: v ? { type, value: v } : undefined }), "aria-label": `${aria} (${type === "percent" ? t("discountPercent") : currency})`, trailing: _jsxs("button", { type: "button", className: "focus-ring -me-1 inline-flex h-5 min-w-6 items-center justify-center rounded-ui-sm px-1 text-[11px] font-medium text-fg-muted hover:bg-hover hover:text-fg", onClick: () => patch(row.id, { discount: { type: other, value: row.discount?.value ?? "" } }), children: [_jsx("span", { "aria-hidden": "true", children: type === "percent" ? t("percent") : currency }), _jsx("span", { className: "sr-only", children: t("discountType", { type: other === "percent" ? t("discountPercent") : t("discountAmount") }) })] }) }));
+            }
+            case "tax":
+                return (_jsx(Select, { size: "sm", variant: "ghost", value: row.taxRate ?? null, onValueChange: (r) => patch(row.id, { taxRate: r ?? undefined }), items: pack.rates.map((r) => ({ value: r.value, label: r.label })), "aria-label": aria }));
+            case "withholding":
+                return (_jsx(Select, { size: "sm", variant: "ghost", value: row.withholding ?? "none", onValueChange: (c) => patch(row.id, { withholding: !c || c === "none" ? undefined : c }), items: [{ value: "none", label: t("none") }, ...(pack.withholding ?? []).map((w) => ({ value: w.code, label: w.label }))], renderValue: (o) => (o.value === "none" ? t("none") : `${o.value} · ${pack.withholding?.find((w) => w.code === o.value)?.ratio.join("/") ?? ""}`), "aria-label": aria }));
+            case "total":
+                return (_jsx("span", { className: cn("block px-1 tabular font-medium text-fg", line?.invalid && "text-fg-subtle"), title: line?.invalid ? t("invalidRow") : undefined, children: line ? money(line.net) : "" }));
+        }
+    };
+    // Fixed table layout: inputs have an intrinsic width (size=20) that would otherwise push the
+    // numeric columns wide and squeeze the description. Widths in rem; description takes the rest.
+    const colRem = {
+        item: 12,
+        quantity: 4.75,
+        unit: 5.75,
+        unitPrice: 7.5,
+        discount: 6.75,
+        tax: 5.75,
+        withholding: 7.5,
+        total: 7.5,
+    };
+    // Read-only cells hold plain text, not inputs, so the columns can be tighter and the total
+    // column stays visible in a card-width container (e.g. an invoice detail page).
+    if (!editable)
+        Object.assign(colRem, { item: 9, quantity: 3.75, unit: 4.75, unitPrice: 6.75, discount: 5.5, tax: 4.25, withholding: 6.5, total: 7 });
+    const tableMinRem = 2 + (editable ? 2.25 : 0) + (editable ? 14 : 10) + columns.reduce((sum, c) => sum + (colRem[c] ?? 0), 0);
+    const table = (_jsxs("table", { className: "vui-line-items-table w-full table-fixed border-collapse text-sm", style: { ["--li-min-w"]: `${tableMinRem}rem` }, "data-slot": "line-items-table", children: [_jsxs("caption", { className: "sr-only", children: [props["aria-label"] ?? t("caption"), editable ? `. ${t("shortcuts")}` : ""] }), _jsx("thead", { children: _jsxs("tr", { className: "border-b border-line text-[11px] font-medium tracking-[0.04em] text-fg-subtle uppercase", children: [editable ? (_jsx("th", { scope: "col", className: "w-8", children: _jsx("span", { className: "sr-only", children: t("reorder") }) })) : (_jsx("th", { scope: "col", className: "w-8 py-2 ps-3 text-start font-medium tabular", children: "#" })), columns.map((c) => (_jsxs("th", { scope: "col", className: cn("px-2 py-2 font-medium", NUMERIC.includes(c) ? "text-end" : "text-start"), style: colRem[c] ? { width: `${colRem[c]}rem` } : undefined, children: [columnLabel(c), c === "unitPrice" ? _jsx("span", { className: "ms-1 font-mono text-[10px] normal-case tracking-normal text-fg-subtle", children: currency }) : null] }, c))), editable ? (_jsx("th", { scope: "col", className: "w-9", children: _jsx("span", { className: "sr-only", children: t("actions") }) })) : null] }) }), _jsx("tbody", { children: rows.map((row, index) => {
+                    const cells = (_jsxs(_Fragment, { children: [editable ? (_jsx("td", { className: "vui-li-handle ps-1 align-middle", children: _jsx(SortableHandle, { size: "sm" }) })) : (_jsx("td", { className: "vui-li-index py-2.5 ps-3 align-top text-xs text-fg-subtle tabular", children: index + 1 })), columns.map((c) => (_jsx("td", { "data-col": c, "data-label": columnLabel(c), className: cn("vui-li-cell px-1 py-1 align-middle", !editable && "px-2 py-2.5 align-top", NUMERIC.includes(c) && "text-end"), children: renderCell(row, index, c) }, c))), editable ? (_jsx("td", { className: "vui-li-actions pe-1 align-middle", children: _jsx(ActionMenu, { triggerLabel: t("rowActions", { row: index + 1 }), triggerSize: "xs", items: [
+                                        { id: "insert", label: t("insertBelow"), icon: _jsx(CornerDownLeft, {}), shortcut: "mod+enter", onSelect: () => addRow(index) },
+                                        { id: "duplicate", label: t("duplicate"), icon: _jsx(Copy, {}), onSelect: () => {
+                                                const { id: _id, ...copy } = row;
+                                                addRow(index, copy);
+                                            } },
+                                        { id: "up", label: t("moveUp"), icon: _jsx(ArrowUp, {}), shortcut: "alt+up", disabled: index === 0, onSelect: () => moveRow(index, index - 1) },
+                                        { id: "down", label: t("moveDown"), icon: _jsx(ArrowDown, {}), shortcut: "alt+down", disabled: index === rows.length - 1, onSelect: () => moveRow(index, index + 1) },
+                                        { type: "separator", id: "sep" },
+                                        { id: "remove", label: t("remove"), icon: _jsx(Trash2, {}), tone: "danger", shortcut: "mod+shift+backspace", disabled: rows.length <= minRows, onSelect: () => removeRow(index) },
+                                    ] }) })) : null] }));
+                    const rowClass = "vui-li-row border-b border-line last:border-b-0";
+                    return editable ? (_jsx(SortableItem, { id: row.id, as: "tr", "data-row-id": row.id, className: rowClass, onKeyDownCapture: (e) => onRowKeyDown(e, index), children: cells }, row.id)) : (_jsx("tr", { "data-row-id": row.id, className: rowClass, children: cells }, row.id));
+                }) })] }));
+    return (_jsxs("div", { ref: (node) => {
+            rootRef.current = node;
+            if (typeof ref === "function")
+                ref(node);
+            else if (ref)
+                ref.current = node;
+        }, "data-slot": "line-items", "data-readonly": readOnly ? "" : undefined, "aria-disabled": disabled || undefined, className: cn("vui-line-items flex flex-col gap-3", disabled && "opacity-60", className), children: [_jsxs("div", { className: cn("vui-line-items-frame overflow-x-auto rounded-ui-lg border border-line bg-surface", !editable && "focus-ring"), tabIndex: editable ? undefined : 0, children: [editable ? (_jsx(Sortable, { items: rows, getLabel: (r) => r.description || t("cell", { column: t("item"), row: rows.indexOf(r) + 1 }), onReorder: (next) => commit(next), children: table })) : (table), editable ? (_jsxs("div", { className: "flex items-center justify-between gap-3 border-t border-line px-2 py-1.5", children: [_jsxs(Button, { size: "sm", variant: "ghost", onClick: () => addRow(), "data-slot": "line-items-add", children: [_jsx(Plus, {}), " ", t("addRow")] }), _jsx("p", { className: "vui-li-hint hidden text-[11px] text-fg-subtle sm:block", children: t("shortcuts") })] })) : null] }), hideSummary ? null : (_jsx(LineItemsSummary, { totals: totals, currency: currency, taxPack: pack, pricesIncludeTax: pricesIncludeTax, showDiscount: showDiscount || !!documentDiscount, documentDiscount: documentDiscount, onDocumentDiscountChange: editable ? onDocumentDiscountChange : undefined, labels: labels, children: summaryFooter })), _jsx("div", { className: "sr-only", "aria-live": "polite", "aria-atomic": true, children: announce }), _jsx("div", { className: "sr-only", "aria-live": "polite", "aria-atomic": true, children: totalAnnounce }), name
+                ? rows.map((r, i) => (_jsxs(React.Fragment, { children: [["id", "itemId", "description", "quantity", "unit", "unitPrice", "taxRate", "withholding"].map((k) => r[k] != null ? _jsx("input", { type: "hidden", name: `${name}[${i}][${k}]`, value: String(r[k]) }, k) : null), r.discount ? (_jsxs(_Fragment, { children: [_jsx("input", { type: "hidden", name: `${name}[${i}][discount][type]`, value: r.discount.type }), _jsx("input", { type: "hidden", name: `${name}[${i}][discount][value]`, value: r.discount.value })] })) : null] }, r.id)))
+                : null] }));
+}
+/**
+ * Editable rows of item × quantity × price with discounts, tax per rate, a generic withholding
+ * field and exact totals. Real `<table>` semantics; every cell is a labelled input. Rows reorder
+ * by drag, keyboard (Alt+↑/↓) or the row menu. Below 40rem the rows stack into cards.
+ *
+ * ```tsx
+ * <LineItems currency="TRY" taxPack={trLineTaxPack()} units={["hour", "day", "pcs"]} defaultValue={rows} onValueChange={(rows, totals) => save(rows, totals.payable)} />
+ * ```
+ */
+export const LineItems = React.forwardRef(LineItemsInner);
+/* ------------------------------------------------------------------ */
+/* Summary                                                             */
+/* ------------------------------------------------------------------ */
+function SummaryRow({ label, value, muted, strong, divider, children }) {
+    return (_jsxs("div", { className: cn("flex items-baseline justify-between gap-6 py-1", strong && "pt-2.5", divider && "mt-1.5 border-t border-line"), children: [_jsxs("dt", { className: cn("min-w-0", muted ? "text-fg-muted" : "text-fg", strong && "font-medium"), children: [label, children] }), _jsx("dd", { className: cn("shrink-0 tabular", strong ? "font-mono text-lg font-medium tracking-[-0.02em] text-fg" : "text-fg"), children: value })] }));
+}
+/** Subtotal, discounts, tax per rate, withholding, total and payable. Usable alone (invoice previews). */
+export function LineItemsSummary({ totals, currency: currencyProp, taxPack = vatLineTaxPack, pricesIncludeTax, showDiscount, documentDiscount, onDocumentDiscountChange, labels, className, children, ...props }) {
+    const t = useLabels("lineItems", lineItemsLabels, labels);
+    const { currency: providerCurrency, format } = useLocale();
+    const currency = (currencyProp ?? providerCurrency).toUpperCase();
+    const money = (v) => format.currency(v, currency);
+    const hasDiscount = totals.discount !== "0.00" && totals.discount !== "0";
+    const rateLabel = (rate) => taxPack.rates.find((r) => r.value === rate)?.label ?? `${rate}%`;
+    const withholdingOf = (code) => taxPack.withholding?.find((w) => w.code === code);
+    const hasWithholding = totals.withholding.length > 0;
+    return (_jsx("div", { "data-slot": "line-items-summary", className: cn("flex justify-end", className), ...props, children: _jsxs("div", { className: "w-full max-w-[22rem] rounded-ui-lg surface-2 px-4 py-3 text-sm", children: [_jsxs("dl", { "aria-label": t("summary"), children: [_jsx(SummaryRow, { label: t("subtotal"), value: money(totals.subtotal), muted: true }), showDiscount || hasDiscount ? (_jsx(SummaryRow, { label: t("discountTotal"), value: hasDiscount ? `−${money(totals.discount)}` : money("0"), muted: true })) : null, onDocumentDiscountChange ? (_jsxs("div", { className: "flex items-center justify-between gap-4 py-1", children: [_jsx("dt", { className: "text-fg-muted", children: t("documentDiscount") }), _jsx("dd", { className: "w-32", children: _jsx(CurrencyInput, { size: "sm", currency: currency, currencyDisplay: "none", align: "end", placeholder: "0", value: documentDiscount?.value || null, onValueChange: (v) => onDocumentDiscountChange(v ? { type: documentDiscount?.type ?? "percent", value: v } : undefined), "aria-label": `${t("documentDiscount")} (${(documentDiscount?.type ?? "percent") === "percent" ? t("discountPercent") : currency})`, trailing: _jsxs("button", { type: "button", className: "focus-ring -me-1 inline-flex h-5 min-w-6 items-center justify-center rounded-ui-sm px-1 text-[11px] font-medium text-fg-muted hover:bg-hover hover:text-fg", onClick: () => onDocumentDiscountChange({ type: (documentDiscount?.type ?? "percent") === "percent" ? "amount" : "percent", value: documentDiscount?.value ?? "" }), children: [_jsx("span", { "aria-hidden": "true", children: (documentDiscount?.type ?? "percent") === "percent" ? t("percent") : currency }), _jsx("span", { className: "sr-only", children: t("discountType", { type: (documentDiscount?.type ?? "percent") === "percent" ? t("discountAmount") : t("discountPercent") }) })] }) }) })] })) : null, showDiscount || hasDiscount || totals.byRate.length > 1 ? _jsx(SummaryRow, { label: t("net"), value: money(totals.net), muted: true }) : null, totals.byRate.map((g) => (_jsx(SummaryRow, { label: t("taxLine", { name: taxPack.name, rate: rateLabel(g.rate) }), value: money(g.tax), muted: true, children: _jsx("span", { className: "ms-1.5 text-xs text-fg-subtle tabular", children: t("taxBase", { base: money(g.base) }) }) }, g.rate))), _jsx(SummaryRow, { divider: true, label: t("grandTotal"), value: money(totals.total), strong: !hasWithholding }), hasWithholding ? (_jsxs(_Fragment, { children: [totals.withholding.map((w) => (_jsx(SummaryRow, { label: t("withheldLine", { code: w.code, ratio: `${w.ratio[0]}/${w.ratio[1]}` }), value: `−${money(w.withheld)}`, muted: true, children: withholdingOf(w.code) ? _jsx("span", { className: "sr-only", children: withholdingOf(w.code).label }) : null }, w.code))), _jsx(SummaryRow, { divider: true, label: t("payable"), value: money(totals.payable), strong: true })] })) : null] }), pricesIncludeTax ? _jsx("p", { className: "pt-1 text-[11px] text-fg-subtle", children: t("inclusive") }) : null, children] }) }));
+}

package/dist/business/multi-step-form.d.ts

@@ -0,0 +1,131 @@
+import * as React from "react";
+export declare const multiStepFormLabels: {
+    back: string;
+    next: string;
+    submit: string;
+    submitting: string;
+    saveDraft: string;
+    savingDraft: string;
+    draftSaved: string;
+    draftFailed: string;
+    step: string;
+    stepHeading: string;
+    optional: string;
+    fixErrors: string;
+    submitFailed: string;
+    edit: string;
+    review: string;
+    leave: string;
+};
+export type MultiStepFormLabels = typeof multiStepFormLabels;
+export type MultiStepStatus = "upcoming" | "current" | "complete" | "error";
+export interface StepDef<C = unknown> {
+    id: string;
+    title: string;
+    description?: string;
+    optional?: boolean;
+    /** Conditional step: hidden (and skipped) while it returns `false`. Receives `context`. */
+    when?: (ctx: C) => boolean;
+    /** Runs on Next. `true` passes; a string is the summary error shown at the top of the step. */
+    validate?: () => true | string | Promise<true | string>;
+}
+export interface MultiStepFormProps<C = unknown> extends Omit<React.FormHTMLAttributes<HTMLFormElement>, "onSubmit" | "defaultValue"> {
+    steps: StepDef<C>[];
+    /** Current step id (controlled). */
+    value?: string;
+    defaultValue?: string;
+    onValueChange?: (id: string) => void;
+    /** Passed to `when` of conditional steps (usually the form values). */
+    context?: C;
+    /** Can't jump ahead past an invalid or unvisited step. Default `true`. */
+    linear?: boolean;
+    /** Runs on Submit (the last step). Throw to show the error and stay on the step. */
+    onComplete: () => Promise<void> | void;
+    onSaveDraft?: () => Promise<void> | void;
+    /** Saves the draft every `intervalMs` (needs `onSaveDraft`). */
+    autosave?: {
+        intervalMs: number;
+    };
+    /** `"page"`: sticky footer. `"dialog"`: footer in flow (put the form inside `DialogBody`). Default `"page"`. */
+    presentation?: "page" | "dialog";
+    orientation?: "horizontal" | "vertical";
+    /** Mirror the step in the URL (`?step=contract`), so a reload or a shared link resumes there. */
+    syncUrl?: boolean | {
+        key: string;
+    };
+    /** Warn before closing the tab until the form is submitted. */
+    confirmLeave?: boolean;
+    labels?: Partial<MultiStepFormLabels>;
+    children?: React.ReactNode;
+}
+/** State and navigation of the surrounding `MultiStepForm`. */
+export declare function useMultiStepForm(): {
+    current: string;
+    index: number;
+    total: number;
+    steps: StepDef<unknown>[];
+    next: () => Promise<void>;
+    back: () => void;
+    goTo: (id: string) => void;
+    saveDraft: () => Promise<void>;
+    isFirst: boolean;
+    isLast: boolean;
+    status: Record<string, MultiStepStatus>;
+    submitting: boolean;
+};
+/**
+ * A long form split into steps: per-step validation, conditional steps, draft saving, a review
+ * step and URL resume. Form-library agnostic — each step exposes `validate()`.
+ *
+ * ```tsx
+ * <MultiStepForm steps={steps} onComplete={submit}>
+ *   <MultiStepFormStepper />
+ *   <MultiStepFormStep id="identity">…fields…</MultiStepFormStep>
+ *   <MultiStepFormStep id="review"><MultiStepFormReview>…</MultiStepFormReview></MultiStepFormStep>
+ *   <MultiStepFormFooter />
+ * </MultiStepForm>
+ * ```
+ */
+export declare const MultiStepForm: <C = unknown>(props: MultiStepFormProps<C> & {
+    ref?: React.Ref<HTMLFormElement>;
+}) => React.ReactElement;
+export interface MultiStepFormStepperProps {
+    /** Stepper look. Default `"numbered"` (switches to compact on small screens). */
+    variant?: "numbered" | "compact" | "bar" | "dots";
+    className?: string;
+}
+/** The progress display (kit `Stepper`), wired to the form: completed steps are clickable. */
+export declare function MultiStepFormStepper({ variant, className }: MultiStepFormStepperProps): React.JSX.Element;
+export interface MultiStepFormStepProps extends Omit<React.HTMLAttributes<HTMLElement>, "title"> {
+    id: string;
+    /** Hide the built-in heading (render your own `h2` with `useMultiStepForm`). */
+    hideHeading?: boolean;
+    /** Keep the step mounted while hidden (keeps uncontrolled field values). Default `true`. */
+    keepMounted?: boolean;
+}
+/** One step's content. Shows its heading ("Step 2 of 5" + title) and the error summary. */
+export declare function MultiStepFormStep({ id, hideHeading, keepMounted, className, children, ...props }: MultiStepFormStepProps): React.JSX.Element | null;
+export interface MultiStepFormReviewSection {
+    /** Step id the "Edit" link jumps to. */
+    step: string;
+    /** Rows: label → value. */
+    items: {
+        label: string;
+        value: React.ReactNode;
+    }[];
+    /** Heading. Default: the step title. */
+    title?: string;
+}
+export interface MultiStepFormReviewProps extends React.HTMLAttributes<HTMLDivElement> {
+    sections: MultiStepFormReviewSection[];
+}
+/** A summary of earlier steps with "Edit" links back to each one. */
+export declare function MultiStepFormReview({ sections, className, ...props }: MultiStepFormReviewProps): React.JSX.Element;
+export interface MultiStepFormFooterProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Submit button label on the last step. */
+    submitLabel?: string;
+    /** Extra content at the start (a "Cancel" link). */
+    start?: React.ReactNode;
+}
+/** Back · Save draft · Next / Submit. Sticky at the bottom in page presentation. */
+export declare function MultiStepFormFooter({ submitLabel, start, className, ...props }: MultiStepFormFooterProps): React.JSX.Element;