@vamos-ui/react 0.0.0-stage → 0.3.0

package/dist/business/line-items-core.js

@@ -0,0 +1,183 @@
+/**
+ * Line items maths — React-free, exact. Every amount is a decimal string in and out; the work is
+ * done in BigInt minor units with half-up rounding, so totals never drift by a cent.
+ *
+ * Tax is generic: a `LineTaxPack` lists rates and optional withholding codes (X8). The `tr`
+ * pack (`trLineTaxPack`) is built from the KDV data in `@vamos-ui/react/locale-data`.
+ */
+import { fromUnits, mulDivRound, toUnits } from "../locale-data/core/decimal.js";
+import { activeTaxRates, allocateProRata, trKdv } from "../locale-data/tr/kdv.js";
+/** A generic VAT pack — handy defaults for docs and prototypes. */
+export const vatLineTaxPack = {
+    id: "vat",
+    name: "VAT",
+    rates: [
+        { value: "0", label: "0%" },
+        { value: "5", label: "5%" },
+        { value: "20", label: "20%" },
+    ],
+    rounding: "line",
+    defaultRate: "20",
+};
+/**
+ * Turkish KDV pack from the locale data: rates in force on `date` (0 / 1 / 10 / 20 since July
+ * 2023), tevkifat codes as withholding, line rounding.
+ *
+ * ```ts
+ * const pack = trLineTaxPack("2026-11-10"); // rates 0, 1, 10, 20 · withholding 601, 602, 604
+ * ```
+ */
+export function trLineTaxPack(date = "2026-01-01", scheme = trKdv, options = {}) {
+    return {
+        id: scheme.id,
+        name: "KDV",
+        rates: activeTaxRates(scheme, date).map((r) => ({ value: String(r.value), label: `%${r.value}` })),
+        withholding: scheme.withholding?.map((w) => ({
+            code: w.code,
+            label: `${w.code} · ${w.ratio[0]}/${w.ratio[1]} ${options.localLabels && w.localLabel ? w.localLabel : w.label}`,
+            ratio: w.ratio,
+        })),
+        rounding: scheme.rounding,
+        defaultRate: "20",
+    };
+}
+const RS = 4; // rate scale
+const HUNDRED = 100n * 10n ** BigInt(RS);
+function safeUnits(v, scale) {
+    if (v == null || v.trim() === "")
+        return null;
+    try {
+        return toUnits(v, scale);
+    }
+    catch {
+        return null;
+    }
+}
+/** True when a row has a parsable quantity and price. */
+export function isLineValid(row) {
+    return safeUnits(row.quantity, 6) !== null && safeUnits(row.unitPrice, 6) !== null;
+}
+/** "2" × "1450.00" → "2900.00", exact. */
+function lineAmount(qty, price, scale) {
+    const QS = 6;
+    const q = toUnits(qty, QS);
+    const p = toUnits(price, QS);
+    return mulDivRound(q * p, 10n ** BigInt(scale), 10n ** BigInt(QS * 2));
+}
+function discountUnits(base, d, scale) {
+    if (!d)
+        return 0n;
+    const v = safeUnits(d.value, d.type === "percent" ? RS : scale);
+    if (v === null || v <= 0n)
+        return 0n;
+    const out = d.type === "percent" ? mulDivRound(base, v, HUNDRED) : v;
+    const abs = base < 0n ? -base : base;
+    return out > abs ? abs : out;
+}
+/**
+ * Totals for a list of rows: per line, per tax rate and per withholding code. Prices can be
+ * net or tax-inclusive; a document discount is allocated pro-rata to the line bases.
+ *
+ * ```ts
+ * computeLineTotals([{ id: "1", description: "Consulting", quantity: "10", unitPrice: "100", taxRate: "20", withholding: "602" }], { taxPack: trLineTaxPack() });
+ * // net "1000.00", tax "200.00", total "1200.00", withheld "180.00", payable "1020.00"
+ * ```
+ */
+export function computeLineTotals(rows, options = {}) {
+    const S = options.precision ?? 2;
+    const pack = options.taxPack;
+    const inclusive = !!options.pricesIncludeTax;
+    const rateOf = (r) => safeUnits(r.taxRate ?? pack?.defaultRate ?? "0", RS) ?? 0n;
+    const ratioOf = (code) => (code ? pack?.withholding?.find((w) => w.code === code)?.ratio : undefined);
+    // 1. amount, row discount, and the net before the document discount
+    const pre = rows.map((r) => {
+        const valid = isLineValid(r);
+        const amount = valid ? lineAmount(r.quantity, r.unitPrice, S) : 0n;
+        const disc = discountUnits(amount, r.discount, S);
+        const afterDisc = amount - disc;
+        const rate = rateOf(r);
+        // net of tax
+        const toNet = (x) => (inclusive ? mulDivRound(x, HUNDRED, HUNDRED + rate) : x);
+        return { r, valid, amount, disc, afterDisc, rate, amountNet: toNet(amount), discNet: toNet(amount) - toNet(afterDisc), net: toNet(afterDisc) };
+    });
+    // 2. document discount, allocated pro-rata to line nets
+    const sumNet = pre.reduce((s, p) => s + p.net, 0n);
+    const docTotal = discountUnits(sumNet, options.documentDiscount, S);
+    const shares = docTotal > 0n && pre.length
+        ? allocateProRata(fromUnits(docTotal, S), pre.map((p) => fromUnits(p.net, S))).map((s) => toUnits(s, S))
+        : pre.map(() => 0n);
+    // 3. tax per line
+    const lines = pre.map((p, i) => {
+        const docShare = shares[i] ?? 0n;
+        const net = p.net - docShare;
+        // Tax-inclusive without a document discount: keep the entered gross exactly.
+        const tax = inclusive && docShare === 0n ? p.afterDisc - p.net : mulDivRound(net, p.rate, HUNDRED);
+        const ratio = ratioOf(p.r.withholding);
+        const withheld = ratio ? mulDivRound(tax, BigInt(ratio[0]), BigInt(ratio[1])) : 0n;
+        return {
+            id: p.r.id,
+            amount: fromUnits(p.amountNet, S),
+            discount: fromUnits(p.discNet, S),
+            documentDiscount: fromUnits(docShare, S),
+            net: fromUnits(net, S),
+            tax: fromUnits(tax, S),
+            total: fromUnits(net + tax, S),
+            withheld: fromUnits(withheld, S),
+            invalid: !p.valid,
+        };
+    });
+    // 4. per-rate and per-code groups
+    const rateMap = new Map();
+    const whMap = new Map();
+    pre.forEach((p, i) => {
+        if (!p.valid)
+            return;
+        const key = fromUnits(p.rate, RS).replace(/\.?0+$/, "") || "0";
+        const g = rateMap.get(key) ?? { units: p.rate, base: 0n, tax: 0n };
+        g.base += toUnits(lines[i].net, S);
+        g.tax += toUnits(lines[i].tax, S);
+        rateMap.set(key, g);
+        const ratio = ratioOf(p.r.withholding);
+        if (ratio && p.r.withholding) {
+            const w = whMap.get(p.r.withholding) ?? { ratio, tax: 0n, withheld: 0n };
+            w.tax += toUnits(lines[i].tax, S);
+            w.withheld += toUnits(lines[i].withheld, S);
+            whMap.set(p.r.withholding, w);
+        }
+    });
+    if (pack?.rounding === "document" && !inclusive) {
+        for (const g of rateMap.values())
+            g.tax = mulDivRound(g.base, g.units, HUNDRED);
+        for (const w of whMap.values())
+            w.withheld = mulDivRound(w.tax, BigInt(w.ratio[0]), BigInt(w.ratio[1]));
+    }
+    const subtotal = pre.reduce((s, p) => s + p.amountNet, 0n);
+    const net = [...rateMap.values()].reduce((s, g) => s + g.base, 0n);
+    const tax = [...rateMap.values()].reduce((s, g) => s + g.tax, 0n);
+    const withheld = [...whMap.values()].reduce((s, w) => s + w.withheld, 0n);
+    return {
+        lines,
+        subtotal: fromUnits(subtotal, S),
+        discount: fromUnits(subtotal - net, S),
+        net: fromUnits(net, S),
+        byRate: [...rateMap]
+            .sort((a, b) => (b[1].units > a[1].units ? 1 : b[1].units < a[1].units ? -1 : 0))
+            .map(([rate, g]) => ({ rate, base: fromUnits(g.base, S), tax: fromUnits(g.tax, S) })),
+        withholding: [...whMap].map(([code, w]) => ({ code, ratio: w.ratio, tax: fromUnits(w.tax, S), withheld: fromUnits(w.withheld, S) })),
+        tax: fromUnits(tax, S),
+        total: fromUnits(net + tax, S),
+        withheld: fromUnits(withheld, S),
+        payable: fromUnits(net + tax - withheld, S),
+        invalidCount: lines.filter((l) => l.invalid).length,
+    };
+}
+let seq = 0;
+/** A fresh row id ("li-…"). */
+export function createLineId() {
+    seq += 1;
+    return `li-${Date.now().toString(36)}-${seq.toString(36)}`;
+}
+/** A blank row with the pack's default rate. */
+export function createLineItem(partial = {}, pack) {
+    return { id: createLineId(), description: "", quantity: "1", unitPrice: "", taxRate: pack?.defaultRate, ...partial };
+}

package/dist/business/line-items.d.ts

@@ -0,0 +1,119 @@
+import * as React from "react";
+import { type RecordSource } from "../components/record-picker.js";
+import { type LineDiscount, type LineItem, type LineTaxPack, type LineTaxRate, type LineTotals } from "./line-items-core.js";
+export declare const lineItemsLabels: {
+    caption: string;
+    item: string;
+    description: string;
+    quantity: string;
+    unit: string;
+    unitPrice: string;
+    discount: string;
+    tax: string;
+    withholding: string;
+    total: string;
+    actions: string;
+    reorder: string;
+    cell: string;
+    rowActions: string;
+    addRow: string;
+    insertBelow: string;
+    duplicate: string;
+    moveUp: string;
+    moveDown: string;
+    remove: string;
+    none: string;
+    pickItem: string;
+    descriptionPlaceholder: string;
+    percent: string;
+    discountType: string;
+    discountPercent: string;
+    discountAmount: string;
+    invalidRow: string;
+    subtotal: string;
+    discountTotal: string;
+    documentDiscount: string;
+    net: string;
+    taxLine: string;
+    taxBase: string;
+    withheldLine: string;
+    grandTotal: string;
+    payable: string;
+    inclusive: string;
+    summary: string;
+    added: string;
+    removed: string;
+    moved: string;
+    totalAnnounce: string;
+    shortcuts: string;
+};
+export type LineItemsLabels = typeof lineItemsLabels;
+export type LineItemColumn = "item" | "description" | "quantity" | "unit" | "unitPrice" | "discount" | "tax" | "withholding" | "total";
+export interface LineItemsProps<R = unknown> {
+    value?: LineItem[];
+    defaultValue?: LineItem[];
+    /** Called with the rows and the recalculated totals. */
+    onValueChange?: (rows: LineItem[], totals: LineTotals) => void;
+    /** ISO 4217. Default: the LocaleProvider currency. */
+    currency?: string;
+    /** Unit prices include tax. */
+    pricesIncludeTax?: boolean;
+    /** Tax rates, withholding codes and rounding. Default: a generic VAT pack; use `trLineTaxPack()` for KDV. */
+    taxPack?: LineTaxPack;
+    /** Overrides the pack's rates. */
+    taxRates?: LineTaxRate[];
+    /** Unit choices ("hour", "day", "pcs"). Without it the unit cell is free text. */
+    units?: string[];
+    /** Products / services for the Item column (a Record picker). */
+    itemSource?: RecordSource<R>;
+    /** Fields copied into the row when a record is picked (description, price, unit, tax). */
+    onItemPick?: (record: R) => Partial<LineItem>;
+    /** Visible columns, in order. Default: item (with `itemSource`), description, quantity, unit, unit price, discount, tax, withholding (when the pack has codes), total. */
+    columns?: LineItemColumn[];
+    documentDiscount?: LineDiscount;
+    /** Makes the document discount editable in the summary. */
+    onDocumentDiscountChange?: (d: LineDiscount | undefined) => void;
+    /** Printable summary: no inputs, no row actions. */
+    readOnly?: boolean;
+    disabled?: boolean;
+    /** Hidden inputs for native form posts: `name[0][quantity]`… */
+    name?: string;
+    /** Rows that can't be deleted. Default 1. */
+    minRows?: number;
+    /** Defaults for new rows. */
+    newRow?: () => Partial<LineItem>;
+    /** Hide the totals block. */
+    hideSummary?: boolean;
+    /** Extra rows at the end of the summary (notes, amount in words). */
+    summaryFooter?: React.ReactNode;
+    labels?: Partial<LineItemsLabels>;
+    className?: string;
+    "aria-label"?: string;
+}
+/**
+ * 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 declare const LineItems: <R = unknown>(props: LineItemsProps<R> & {
+    ref?: React.Ref<HTMLDivElement>;
+}) => React.ReactElement;
+export interface LineItemsSummaryProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "children"> {
+    totals: LineTotals;
+    currency?: string;
+    taxPack?: LineTaxPack;
+    pricesIncludeTax?: boolean;
+    /** Show the discount rows. Default: when there is a discount. */
+    showDiscount?: boolean;
+    documentDiscount?: LineDiscount;
+    /** Makes the document discount editable. */
+    onDocumentDiscountChange?: (d: LineDiscount | undefined) => void;
+    labels?: Partial<LineItemsLabels>;
+    children?: React.ReactNode;
+}
+/** Subtotal, discounts, tax per rate, withholding, total and payable. Usable alone (invoice previews). */
+export declare function LineItemsSummary({ totals, currency: currencyProp, taxPack, pricesIncludeTax, showDiscount, documentDiscount, onDocumentDiscountChange, labels, className, children, ...props }: LineItemsSummaryProps): React.JSX.Element;

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] }) }));
+}