@sincpro/web-ui 0.1.0 → 1.0.0

package/dist/primitives/value/Relation.js

@@ -6,9 +6,13 @@ import { Button, ButtonLink, IconButton } from "../button/Button.js";
 import { CellStack, Thumb } from "../cell/CellStack.js";
 import { FieldIdsContext } from "../field/context.js";
 import { useFormMode } from "../field/mode.js";
+import { Menu } from "../menu/Menu.js";
 import { PopoverTrigger } from "../overlay/PopoverTrigger.js";
+import { Preview } from "../overlay/Preview.js";
 import { Tag } from "../tag/Tag.js";
-import { ArrowRight, Info } from "lucide-react";
+import { Avatar } from "./Avatar.js";
+import { ContactRows } from "./contact.js";
+import { ArrowRight, Ellipsis, Info } from "lucide-react";
 import { useContext } from "react";
 import { Link } from "react-aria-components";
 /**
@@ -17,22 +21,27 @@ import { Link } from "react-aria-components";
  * Context: it answers the question a person has about the customer of an invoice without
  * leaving the invoice — «does it owe us?», «what is its NIT?» — and, when the answer is
  * «I need more», one press takes them to the record. It is what floats from a
- * `RelationValue`, and it is exported on its own for a side panel.
+ * `RelationValue` and what opens from a `UserChip` (a person is a related record too: round
+ * face, role, the ways to reach them), and it is exported on its own for a side panel.
  */
-export function RelationCard({ name, secondary, media, summary = {}, onOpen, href, }) {
+export function RelationCard({ name, secondary, media, summary = {}, contact, onOpen, href, }) {
     const copy = useUiCopy();
     const title = summary.title ?? name;
     return (
     /* React events bubble through the popover's portal to the React parents of the link —
        a table row that opens on click among them. A click inside the card stays here. */
-    _jsxs("div", { className: "flex w-72 max-w-full flex-col gap-3", onClick: (e) => e.stopPropagation(), children: [_jsxs("div", { className: "flex min-w-0 items-start gap-3", children: [media === undefined ? null : (_jsx(Thumb, { size: "lg", ...(media.src === undefined ? {} : { src: media.src }), ...(media.alt === undefined ? {} : { alt: media.alt }), ...(media.icon === undefined ? {} : { icon: media.icon }) })), _jsxs("div", { className: "flex min-w-0 flex-1 flex-col gap-1", children: [_jsx("span", { className: "text-lead leading-tight font-semibold text-ink", children: title }), secondary === undefined ? null : (_jsx("span", { className: "truncate text-micro tabular-nums text-muted", children: secondary })), summary.tag === undefined ? null : (_jsx("span", { className: "flex", children: _jsx(Tag, { tone: summary.tag.tone ?? "neutral", children: summary.tag.label }) }))] })] }), summary.facts === undefined || summary.facts.length === 0 ? null : (_jsx("dl", { className: "grid grid-cols-2 gap-x-4 gap-y-2 border-t border-line pt-3", children: summary.facts.map((fact) => (_jsxs("div", { className: "flex min-w-0 flex-col", children: [_jsx("dt", { className: "truncate text-micro text-muted", children: fact.label }), _jsx("dd", { className: "truncate text-meta tabular-nums text-ink", children: fact.value })] }, fact.label))) })), href !== undefined ? (_jsx("div", { className: "flex justify-end border-t border-line pt-2", children: _jsx(ButtonLink, { href: href, role: "ghost", size: "sm", icon: ArrowRight, ...(onOpen === undefined ? {} : { onClick: onOpen }), children: copy.relation.open }) })) : onOpen !== undefined ? (_jsx("div", { className: "flex justify-end border-t border-line pt-2", children: _jsx(Button, { role: "ghost", size: "sm", icon: ArrowRight, onClick: onOpen, children: copy.relation.open }) })) : null] }));
+    _jsxs("div", { className: "flex w-72 max-w-full flex-col gap-3", onClick: (e) => e.stopPropagation(), children: [_jsxs("div", { className: "flex min-w-0 items-start gap-3", children: [media === undefined ? null : media.person === true ? (
+                    /* The name is written beside it: the photo's `alt` would say it twice. */
+                    _jsx("span", { "aria-hidden": true, className: "flex shrink-0", children: _jsx(Avatar, { name: name, size: "xl", ...(media.src === undefined ? {} : { src: media.src }) }) })) : (_jsx(Thumb, { size: "lg", ...(media.src === undefined ? {} : { src: media.src }), ...(media.alt === undefined ? {} : { alt: media.alt }), ...(media.icon === undefined ? {} : { icon: media.icon }) })), _jsxs("div", { className: "flex min-w-0 flex-1 flex-col gap-1", children: [_jsx("span", { className: "text-lead leading-tight font-semibold text-ink", children: title }), secondary === undefined ? null : (_jsx("span", { className: "truncate text-micro tabular-nums text-muted", children: secondary })), summary.tag === undefined ? null : (_jsx("span", { className: "flex", children: _jsx(Tag, { tone: summary.tag.tone ?? "neutral", children: summary.tag.label }) }))] })] }), summary.facts === undefined || summary.facts.length === 0 ? null : (_jsx("dl", { className: "grid grid-cols-2 gap-x-4 gap-y-2 border-t border-line pt-3", children: summary.facts.map((fact) => (_jsxs("div", { className: "flex min-w-0 flex-col", children: [_jsx("dt", { className: "truncate text-micro text-muted", children: fact.label }), _jsx("dd", { className: "truncate text-meta tabular-nums text-ink", children: fact.value })] }, fact.label))) })), contact === undefined ? null : _jsx(ContactRows, { contact: contact }), href !== undefined ? (_jsx("div", { className: "flex justify-end border-t border-line pt-2", children: _jsx(ButtonLink, { href: href, role: "ghost", size: "sm", icon: ArrowRight, ...(onOpen === undefined ? {} : { onClick: onOpen }), children: copy.relation.open }) })) : onOpen !== undefined ? (_jsx("div", { className: "flex justify-end border-t border-line pt-2", children: _jsx(Button, { role: "ghost", size: "sm", icon: ArrowRight, onClick: onOpen, children: copy.relation.open }) })) : null] }));
 }
 /**
  * A many2one as a value: the related record's name as a link, with its secondary line and
  * picture, and its summary one press away. Works in a table cell, a list row, a `Record.Facts`
  * value and a form field (read mode; pass the `Picker` as `editor` for edit mode).
  */
-export function RelationValue({ name, secondary, media, onOpen, href, summary, editor, mode, }) {
+export function RelationValue({ name, secondary, media, onOpen: onOpenOwn, onOpenIn, openTargets = ["modal", "peek", "side", "page"], href, summary, preview, editor, mode, }) {
+    const first = openTargets[0];
+    const onOpen = onOpenIn !== undefined && first !== undefined ? () => onOpenIn(first) : onOpenOwn;
     const copy = useUiCopy();
     const formMode = useFormMode(mode);
     /* Inside a `Field` the value takes the control's height, so a form that goes from
@@ -45,13 +54,32 @@ export function RelationValue({ name, secondary, media, onOpen, href, summary, e
         return frame(_jsx("span", { className: "text-meta text-muted italic", children: copy.relation.none }));
     }
     const goes = href !== undefined || onOpen !== undefined;
-    const primary = goes ? (_jsx(Link, { ...(href === undefined ? {} : { href }), ...(onOpen === undefined ? {} : { onPress: onOpen }), className: ({ isFocusVisible }) => cn("cursor-pointer rounded-mark text-primary no-underline underline-offset-2 hover:underline", focusRing({ isFocusVisible })), children: name })) : (name);
-    return frame(_jsxs("span", { className: "inline-flex max-w-full min-w-0 items-center gap-1", children: [_jsx(CellStack, { primary: primary, ...(secondary === undefined ? {} : { secondary }), ...(media === undefined ? {} : { media }) }), summary === undefined ? null : (_jsx(PopoverTrigger, { label: fillCopy(copy.relationCard.summary, { name }), trigger: _jsx(IconButton, { icon: Info, label: fillCopy(copy.relationCard.summary, { name }), size: "sm" }), children: (close) => (_jsx(RelationCard, { name: name, summary: summary, ...(secondary === undefined ? {} : { secondary }), ...(media === undefined ? {} : { media }), ...(href === undefined ? {} : { href }), ...(onOpen === undefined
-                        ? {}
-                        : {
-                            onOpen: () => {
-                                close();
-                                onOpen();
-                            },
-                        }) })) }))] }));
+    const summaryLabel = fillCopy(copy.relationCard.summary, { name });
+    const card = (open) => (_jsx(RelationCard, { name: name, ...(summary === undefined ? {} : { summary }), ...(secondary === undefined ? {} : { secondary }), ...(media === undefined ? {} : { media }), ...(href === undefined ? {} : { href }), ...(open === undefined ? {} : { onOpen: open }) }));
+    /* What floats from the name: the card, or the consumer's own content. */
+    const previewed = preview === false || preview === null
+        ? undefined
+        : preview === undefined
+            ? summary === undefined
+                ? undefined
+                : card(onOpen)
+            : preview === true
+                ? card(onOpen)
+                : preview;
+    const link = goes ? (_jsx(Link, { ...(href === undefined ? {} : { href }), ...(onOpen === undefined ? {} : { onPress: onOpen }), className: ({ isFocusVisible }) => cn("cursor-pointer rounded-mark text-primary no-underline underline-offset-2 hover:underline", focusRing({ isFocusVisible })), children: name })) : undefined;
+    const primary = link === undefined ? (name) : previewed === undefined ? (link) : (_jsx(Preview, { trigger: link, label: summaryLabel, children: previewed }));
+    /* The `i` only when the name is not a link: there is nothing for the card to ride on. */
+    const info = previewed === undefined || goes ? undefined : () => previewed;
+    return frame(_jsxs("span", { className: "inline-flex max-w-full min-w-0 items-center gap-1", children: [_jsx(CellStack, { primary: primary, ...(secondary === undefined ? {} : { secondary }), ...(media === undefined
+                    ? {}
+                    : media.person === true
+                        ? { avatar: { name, ...(media.src === undefined ? {} : { src: media.src }) } }
+                        : { media }) }), onOpenIn === undefined || openTargets.length < 2 ? null : (_jsx(Menu, { label: copy.picker.openMore, icon: Ellipsis, iconOnly: true, chevron: false, variant: "text", groups: [
+                    {
+                        options: openTargets.slice(1).map((to) => ({
+                            id: to,
+                            label: copy.picker.openIn[to],
+                        })),
+                    },
+                ], onSelect: (to) => onOpenIn(to) })), info === undefined ? null : (_jsx(PopoverTrigger, { label: summaryLabel, trigger: _jsx(IconButton, { icon: Info, label: summaryLabel, size: "sm" }), children: info }))] }));
 }

package/dist/primitives/value/Totals.d.ts

@@ -1,7 +1,8 @@
-import type { ReactNode } from "react";
+import { type ReactNode } from "react";
 /**
  * The money summary of a document — subtotal, taxes, discounts and the TOTAL — under its
- * lines, aligned to the right.
+ * lines, aligned to the right. And, once the document starts being settled, what was already
+ * taken off it, what is still owed, and what could still be taken off.
  *
  * Context: written as two more rows of the lines table, «IVA» and «Total» were the same size
  * and weight as a product line, and the one number the document exists for had to be found.
@@ -10,17 +11,111 @@ import type { ReactNode } from "react";
  * read (Jakob's law).
  *
  * Labels left and figures right of a narrow column, both in tabular figures, so the amounts
- * line up digit by digit. The `total` row closes the block: a rule above it, and the figure
- * at the title size.
+ * line up digit by digit. The `total` row closes the breakdown: a rule above it.
+ *
+ * ── Deductions, balance and credits: one block, not three ────────────
+ *
+ * A posted invoice is read as one sum: the total, minus each payment, gives what is owed. Drawn
+ * as a second component under this one, the payments would be a second column of figures that
+ * the screen has to line up with the first by hand — which a template cannot do without
+ * styling — and the decision below, WHICH figure leads, needs to see the three at once. So it
+ * is this block, extended, and a block with only `rows` draws exactly what it drew before.
+ *
+ * It still does not know what an invoice is. It speaks of `deductions` (a payment, a credit
+ * note, a retention: anything already applied against the total), a `balance` (what remains
+ * after them), `settled` (the word for «nothing remains»: «Pagada», «Conciliado») and
+ * `credits` (what could still be applied). The domain formats the money and owns the actions;
+ * this only lays them out and names them.
+ *
+ * ── The figure that leads moves with the state ───────────────────────
+ *
+ * There is ONE figure at the title size, and which one it is depends on where the document is:
+ *
+ *      nothing applied yet (a draft, a posted invoice)   the total
+ *      something applied, something owed                 the balance — the total steps down
+ *      settled                                           the total, with the `settled` mark
+ *
+ * Once a payment is in, the question the person brings is «how much is left?», and a total
+ * at the title size next to a balance at the body size answers the wrong question first.
+ * That is the default; `lead` says it explicitly when the screen knows better.
+ *
+ * ── A deduction is HEARD as one: «Pagado el 12/10/2026, menos Bs. 1.000,00» ──
+ *
+ * The amount arrives formatted and WITHOUT a sign; the block writes the minus. The visible
+ * «−» is hidden from assistive technology — screen readers skip it or say «dash» — and a
+ * visually hidden «menos» (`copy.totals.less`) is read in its place, so the label and the
+ * figure are one sentence and not two loose numbers.
+ *
+ * ── The detail of a deduction: an `i`, asked for ─────────────────────
+ *
+ * Where it came from (journal, reference, method), going to it, and unlinking it open from an
+ * `i` before the label — `PopoverTrigger`, the same `i` a `RelationValue` uses for its
+ * summary. Not a `Preview` on hover: the card holds an action that changes the document
+ * («Desvincular»), and that is asked for with a press, which the mouse, the keyboard and the
+ * finger all have. The `i` sits BEFORE the label so the label and its amount stay together
+ * in the reading order.
+ *
+ * ── None of these actions is the primary ─────────────────────────────
+ *
+ * The screen's one primary is somewhere else («Registrar pago», «Confirmar»). Unlinking is
+ * `secondary` and not `danger`: it does not destroy — the payment comes back as a credit and
+ * is applied again with one press, which is the undo. «Aplicar» and «Abrir» are `ghost`.
  */
 export type TotalsRow = {
     label: ReactNode;
     value: ReactNode;
     /** A note under the label — «incluido en el precio», «sobre Bs. 3.601,80». */
     detail?: ReactNode;
-    /** The row the block exists for. Usually one, and last. */
+    /** The row that closes the breakdown. Usually one, and last. */
     total?: boolean;
 };
-export declare function Totals({ rows }: {
+/** A fact of a deduction's detail: «Diario · Banco BNB», «Referencia · TRF-88213». */
+export type TotalsFact = {
+    label: string;
+    value: ReactNode;
+};
+/** Something already applied against the total: a payment, a credit note, a retention. */
+export type TotalsDeduction = {
+    /** What it is, as one phrase — «Pagado el 12/10/2026». A string: it also names the `i`
+     *  and the floating detail. */
+    label: string;
+    /** The amount taken off, formatted and WITHOUT a sign: the block writes the minus. */
+    value: ReactNode;
+    /** A quiet note under the label — «Transferencia · Banco BNB». */
+    detail?: ReactNode;
+    /** What the `i` shows: two to five facts — journal, reference, method. */
+    facts?: readonly TotalsFact[];
+    /** Go to the applied record. The detail shows «Abrir». */
+    onOpen?: () => void;
+    /** Undo the application — «Desvincular». Present = allowed; absent = not offered. */
+    onRemove?: () => void;
+};
+/** Something that COULD be applied and is not yet: an unused credit of the same party. */
+export type TotalsCredit = {
+    /** What it is — «NC/2026/0012». A string: it also names its «Aplicar». */
+    label: string;
+    /** The amount available, formatted. */
+    value: ReactNode;
+    /** A quiet note — «del 02/10/2026», «anticipo». */
+    detail?: ReactNode;
+    onApply: () => void;
+};
+export type TotalsProps = {
+    /** The breakdown and its `total`: subtotal, each tax group, discounts, TOTAL. */
     rows: readonly TotalsRow[];
-}): import("react").JSX.Element;
+    /** What was already applied against the total, one row each, after it. */
+    deductions?: readonly TotalsDeduction[];
+    /** What remains once the deductions are taken off — «Importe adeudado». */
+    balance?: Omit<TotalsRow, "total">;
+    /** Nothing remains: the word for it, drawn as a mark next to the leading figure —
+     *  «Pagada». */
+    settled?: string;
+    /** Which figure leads, at the title size. By default the balance when something was
+     *  deducted and the document is not settled; otherwise the total. */
+    lead?: "total" | "balance";
+    /** What could still be applied, apart and under the sum: it is not part of it. */
+    credits?: readonly TotalsCredit[];
+    /** The title of the credits. `copy.totals.credits` by default. */
+    creditsLabel?: string;
+};
+export declare function Totals({ rows, deductions, balance, settled, lead, credits, creditsLabel, }: TotalsProps): import("react").JSX.Element;

package/dist/primitives/value/Totals.js

@@ -1,4 +1,54 @@
+"use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-export function Totals({ rows }) {
-    return (_jsx("dl", { className: "ml-auto flex w-full max-w-(--container-search) flex-col gap-1.5", children: rows.map((row, i) => row.total === true ? (_jsxs("div", { className: "mt-1 flex items-baseline justify-between gap-4 border-t border-line-strong pt-2.5", children: [_jsx("dt", { className: "text-body font-semibold text-ink", children: row.label }), _jsx("dd", { className: "text-title font-semibold tabular-nums text-ink", children: row.value })] }, i)) : (_jsxs("div", { className: "flex items-baseline justify-between gap-4", children: [_jsxs("dt", { className: "flex flex-col text-meta text-muted", children: [row.label, row.detail === undefined ? null : (_jsx("span", { className: "text-micro text-muted", children: row.detail }))] }), _jsx("dd", { className: "text-meta tabular-nums text-ink", children: row.value })] }, i))) }));
+import { fillCopy, useUiCopy } from "../../foundations/copy.js";
+import { Button, IconButton } from "../button/Button.js";
+import { PopoverTrigger } from "../overlay/PopoverTrigger.js";
+import { Tag } from "../tag/Tag.js";
+import { ArrowRight, Info, Plus, Unlink } from "lucide-react";
+import { useId } from "react";
+/** The figure the block exists for: a rule above it and the figure at the title size. The
+ *  `data-lead` marks it for the tests and for whoever reads the DOM. */
+function LeadRow({ row, mark }) {
+    return (_jsxs("div", { "data-lead": "", className: "mt-1 flex flex-wrap items-baseline justify-between gap-x-4 border-t border-line-strong pt-2.5", children: [_jsxs("dt", { className: "flex min-w-0 flex-col", children: [_jsxs("span", { className: "flex flex-wrap items-center gap-2 text-body font-semibold text-ink", children: [row.label, mark === undefined ? null : _jsx(Tag, { tone: "good", children: mark })] }), row.detail === undefined ? null : (_jsx("span", { className: "text-micro text-muted", children: row.detail }))] }), _jsx("dd", { className: "ml-auto text-title font-semibold whitespace-nowrap tabular-nums text-ink", children: row.value })] }));
+}
+/** A figure that closes a part of the sum without leading it: the total once the balance
+ *  leads, or the balance while the total does. Ruled, in the body size. */
+function ClosingRow({ row }) {
+    return (_jsxs("div", { className: "mt-1 flex flex-wrap items-baseline justify-between gap-x-4 border-t border-line pt-2", children: [_jsxs("dt", { className: "flex min-w-0 flex-col", children: [_jsx("span", { className: "text-body font-semibold text-ink", children: row.label }), row.detail === undefined ? null : (_jsx("span", { className: "text-micro text-muted", children: row.detail }))] }), _jsx("dd", { className: "ml-auto text-body font-semibold whitespace-nowrap tabular-nums text-ink", children: row.value })] }));
+}
+function PlainRow({ row }) {
+    return (_jsxs("div", { className: "flex items-baseline justify-between gap-4", children: [_jsxs("dt", { className: "flex min-w-0 flex-col text-meta text-muted", children: [row.label, row.detail === undefined ? null : (_jsx("span", { className: "text-micro text-muted", children: row.detail }))] }), _jsx("dd", { className: "text-meta whitespace-nowrap tabular-nums text-ink", children: row.value })] }));
+}
+/** What floats from a deduction's `i`: its facts and, when allowed, «Desvincular» and
+ *  «Abrir». Both close the card first — the row may be gone once the action runs. */
+function DeductionDetail({ item, close }) {
+    const copy = useUiCopy();
+    const facts = item.facts ?? [];
+    const run = (action) => () => {
+        close();
+        action();
+    };
+    return (_jsxs("div", { className: "flex w-64 max-w-full flex-col gap-3", children: [facts.length === 0 ? null : (_jsx("dl", { className: "grid grid-cols-2 gap-x-4 gap-y-2", children: facts.map((fact) => (_jsxs("div", { className: "flex min-w-0 flex-col", children: [_jsx("dt", { className: "truncate text-micro text-muted", children: fact.label }), _jsx("dd", { className: "text-meta tabular-nums break-words text-ink", children: fact.value })] }, fact.label))) })), item.onRemove === undefined && item.onOpen === undefined ? null : (_jsxs("div", { className: "flex flex-wrap justify-end gap-2 border-t border-line pt-2", children: [item.onRemove === undefined ? null : (_jsx(Button, { role: "secondary", size: "sm", icon: Unlink, onClick: run(item.onRemove), children: copy.totals.unlink })), item.onOpen === undefined ? null : (_jsx(Button, { role: "ghost", size: "sm", icon: ArrowRight, onClick: run(item.onOpen), children: copy.totals.open }))] }))] }));
+}
+function DeductionRow({ item }) {
+    const copy = useUiCopy();
+    const asks = (item.facts !== undefined && item.facts.length > 0) ||
+        item.onRemove !== undefined ||
+        item.onOpen !== undefined;
+    return (_jsxs("div", { className: "flex items-baseline justify-between gap-4", children: [_jsxs("dt", { className: "flex min-w-0 items-baseline gap-1 text-meta text-muted", children: [asks ? (_jsx(PopoverTrigger, { title: item.label, placement: "bottom end", trigger: _jsx(IconButton, { icon: Info, label: fillCopy(copy.totals.details, { label: item.label }) }), children: (close) => _jsx(DeductionDetail, { item: item, close: close }) })) : null, _jsxs("span", { className: "flex min-w-0 flex-col", children: [item.label, item.detail === undefined ? null : (_jsx("span", { className: "text-micro text-muted", children: item.detail }))] })] }), _jsxs("dd", { className: "text-meta whitespace-nowrap tabular-nums text-ink", children: [_jsx("span", { "aria-hidden": true, children: "− " }), _jsxs("span", { className: "sr-only", children: [copy.totals.less, " "] }), item.value] })] }));
+}
+function Credits({ items, label }) {
+    const copy = useUiCopy();
+    const id = useId();
+    return (_jsxs("div", { className: "flex flex-col gap-1.5 border-t border-line pt-3", children: [_jsx("p", { id: id, className: "text-micro font-semibold text-muted", children: label }), _jsx("ul", { "aria-labelledby": id, className: "flex flex-col gap-1", children: items.map((credit, i) => (_jsxs("li", { className: "flex flex-wrap items-center justify-between gap-x-3 gap-y-1", children: [_jsxs("span", { className: "flex min-w-0 flex-col", children: [_jsx("span", { className: "text-meta text-ink", children: credit.label }), credit.detail === undefined ? null : (_jsx("span", { className: "text-micro text-muted", children: credit.detail }))] }), _jsxs("span", { className: "ml-auto flex shrink-0 items-center gap-2", children: [_jsx("span", { className: "text-meta whitespace-nowrap tabular-nums text-ink", children: credit.value }), _jsx(Button, { role: "ghost", size: "sm", icon: Plus, "aria-label": fillCopy(copy.totals.applyCredit, { label: credit.label }), onClick: credit.onApply, children: copy.totals.apply })] })] }, i))) })] }));
+}
+export function Totals({ rows, deductions = [], balance, settled, lead, credits = [], creditsLabel, }) {
+    const copy = useUiCopy();
+    const leads = lead ??
+        (balance !== undefined && deductions.length > 0 && settled === undefined
+            ? "balance"
+            : "total");
+    /* With nothing to lead it, the balance cannot lead: the total keeps the title size. */
+    const balanceLeads = leads === "balance" && balance !== undefined;
+    return (_jsxs("div", { className: "ml-auto flex w-full max-w-(--container-search) flex-col gap-3", children: [_jsxs("dl", { className: "flex flex-col gap-1.5", children: [rows.map((row, i) => row.total === true ? (balanceLeads ? (_jsx(ClosingRow, { row: row }, i)) : (_jsx(LeadRow, { row: row, ...(settled === undefined ? {} : { mark: settled }) }, i))) : (_jsx(PlainRow, { row: row }, i))), deductions.map((item, i) => (_jsx(DeductionRow, { item: item }, i))), balance === undefined ? null : balanceLeads ? (_jsx(LeadRow, { row: balance, ...(settled === undefined ? {} : { mark: settled }) })) : (_jsx(ClosingRow, { row: balance }))] }), credits.length === 0 ? null : (_jsx(Credits, { items: credits, label: creditsLabel ?? copy.totals.credits }))] }));
 }

package/dist/primitives/value/Value.d.ts

@@ -1,4 +1,3 @@
-import type { Tone } from "../../foundations/types.js";
 import type { ReactNode } from "react";
 export declare const formatCount: (value: number, locale?: string) => string;
 export declare const formatNumber: (value: number, locale?: string) => string;
@@ -21,42 +20,6 @@ export declare function Numeric({ value, unit, format, }: {
     unit?: string;
     format?: "integer" | "decimal" | "distance";
 }): import("react").JSX.Element;
-/**
- * A real bar, never a spinner.
- *
- * Context: a spinner says «wait» and doesn't say how much; a bar says both
- * things.
- *
- * ── Why the fill is FLAT and the gradient is asked for ──────────────
- *
- * The bar always lived with `bar-brand`, the blue→gold gradient. At 3 px and at
- * 62 % that doesn't read as a brand: it reads as a blue bar with a broken tip.
- * A gradient needs length to be a gradient, and a bar inside a list row doesn't
- * have it.
- *
- * Now the fill is a flat tone —and the tone SAYS something: `good` finished,
- * `warn` is running slow, `bad` failed— and the gradient is asked for with
- * `tone="brand"`, which is the long bar of a live import: there it does have room
- * to be read.
- *
- * And it got fatter, from 3 px to 6 px. At 3 px it isn't a bar, it's a line: it
- * can't be told apart from a separator and the fill isn't visible unless it goes
- * past 20 %.
- */
-export declare function ProgressBar({ value, label, width, tone, 
-/** The percentage next to it. It is turned off when the bar lives inside
- *  something that already says the figure —a cell with its column— and it
- *  would only mean reading it twice. */
-showValue, }: {
-    /** 0 to 100. */
-    value: number;
-    label: string;
-    /** The activity bar wants to be longer than a list row; there is no reason for
-     *  it to be the same number on both sides. */
-    width?: string;
-    tone?: Tone | "brand";
-    showValue?: boolean;
-}): import("react").JSX.Element;
 /**
  * The content of a data cell, with what the system decides and the view does not.
  *

package/dist/primitives/value/Value.js

@@ -47,45 +47,6 @@ export function Numeric({ value, unit, format = "integer", }) {
             : formatCount(value);
     return (_jsxs("span", { className: "block text-right text-body tabular-nums whitespace-nowrap text-ink", children: [_jsx("span", { className: "tabular-nums", children: text }), unit === undefined ? null : _jsx("span", { className: "ml-1 text-muted", children: unit })] }));
 }
-/**
- * A real bar, never a spinner.
- *
- * Context: a spinner says «wait» and doesn't say how much; a bar says both
- * things.
- *
- * ── Why the fill is FLAT and the gradient is asked for ──────────────
- *
- * The bar always lived with `bar-brand`, the blue→gold gradient. At 3 px and at
- * 62 % that doesn't read as a brand: it reads as a blue bar with a broken tip.
- * A gradient needs length to be a gradient, and a bar inside a list row doesn't
- * have it.
- *
- * Now the fill is a flat tone —and the tone SAYS something: `good` finished,
- * `warn` is running slow, `bad` failed— and the gradient is asked for with
- * `tone="brand"`, which is the long bar of a live import: there it does have room
- * to be read.
- *
- * And it got fatter, from 3 px to 6 px. At 3 px it isn't a bar, it's a line: it
- * can't be told apart from a separator and the fill isn't visible unless it goes
- * past 20 %.
- */
-export function ProgressBar({ value, label, width = "w-24", tone = "brand", 
-/** The percentage next to it. It is turned off when the bar lives inside
- *  something that already says the figure —a cell with its column— and it
- *  would only mean reading it twice. */
-showValue = true, }) {
-    const clamped = Math.max(0, Math.min(100, Math.round(value)));
-    const fill = tone === "brand" ? "bar-brand" : FILL[tone];
-    return (_jsxs("span", { className: "flex items-center gap-2", children: [_jsx("span", { className: `h-(--size-track) overflow-hidden rounded-pill bg-ink/10 ${width}`, role: "progressbar", "aria-valuenow": clamped, "aria-valuemin": 0, "aria-valuemax": 100, "aria-label": label, children: _jsx("span", { className: `block h-full rounded-pill transition-[width] duration-(--duration-panel) ease-out ${fill}`, style: { width: `${clamped}%` } }) }), showValue ? (_jsxs("span", { className: "text-meta tabular-nums text-muted", children: [clamped, "%"] })) : null] }));
-}
-const FILL = {
-    neutral: "bg-muted",
-    info: "bg-info",
-    good: "bg-good",
-    warn: "bg-warn",
-    bad: "bg-bad",
-    accent: "bg-accent",
-};
 /**
  * The content of a data cell, with what the system decides and the view does not.
  *

package/dist/primitives/value/contact.d.ts

@@ -0,0 +1,30 @@
+import { useUiCopy } from "../../foundations/copy.js";
+import type { LucideIcon } from "lucide-react";
+/** The ways to reach a person. Each one that is present becomes a row of the contact card. */
+export type PersonContact = {
+    email?: string;
+    /** As people write it — «+591 7 123-4567». The `tel:` link keeps only the digits and `+`. */
+    phone?: string;
+    /** The WhatsApp number with its country code, written any way; `wa.me` gets the digits. */
+    whatsapp?: string;
+};
+/** The three contact links, built from what people type. `wa.me` takes digits only — a `+`,
+ *  a space or a dash breaks it — and `tel:` takes digits and the leading `+`. */
+export declare function contactRows(contact: PersonContact, copy: ReturnType<typeof useUiCopy>["person"]): {
+    key: string;
+    icon: LucideIcon;
+    label: string;
+    value: string;
+    href: string;
+}[];
+/**
+ * The ways to reach someone, one ROW each — write, call, WhatsApp — on the card of any record
+ * that is a person or a company. Each way is a row and not a bare icon: the address and the
+ * number are drawn, because often what the person wants is to read the number aloud, not to
+ * dial it from the browser. Every row is a real link (`mailto:`, `tel:`, `wa.me`), so
+ * middle-click, «copy address» and the phone's own dialer work. Internal: `RelationCard` draws
+ * it from its `contact`.
+ */
+export declare function ContactRows({ contact }: {
+    contact: PersonContact;
+}): import("react").JSX.Element | null;

package/dist/primitives/value/contact.js

@@ -0,0 +1,51 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useUiCopy } from "../../foundations/copy.js";
+import { Mail, MessageCircle, Phone } from "lucide-react";
+/** The three contact links, built from what people type. `wa.me` takes digits only — a `+`,
+ *  a space or a dash breaks it — and `tel:` takes digits and the leading `+`. */
+export function contactRows(contact, copy) {
+    const rows = [];
+    if (contact.email !== undefined && contact.email !== "") {
+        rows.push({
+            key: "email",
+            icon: Mail,
+            label: copy.email,
+            value: contact.email,
+            href: `mailto:${contact.email}`,
+        });
+    }
+    if (contact.phone !== undefined && contact.phone !== "") {
+        rows.push({
+            key: "call",
+            icon: Phone,
+            label: copy.call,
+            value: contact.phone,
+            href: `tel:${contact.phone.replace(/[^\d+]/g, "")}`,
+        });
+    }
+    if (contact.whatsapp !== undefined && contact.whatsapp !== "") {
+        rows.push({
+            key: "whatsapp",
+            icon: MessageCircle,
+            label: copy.whatsapp,
+            value: contact.whatsapp,
+            href: `https://wa.me/${contact.whatsapp.replace(/\D/g, "")}`,
+        });
+    }
+    return rows;
+}
+/**
+ * The ways to reach someone, one ROW each — write, call, WhatsApp — on the card of any record
+ * that is a person or a company. Each way is a row and not a bare icon: the address and the
+ * number are drawn, because often what the person wants is to read the number aloud, not to
+ * dial it from the browser. Every row is a real link (`mailto:`, `tel:`, `wa.me`), so
+ * middle-click, «copy address» and the phone's own dialer work. Internal: `RelationCard` draws
+ * it from its `contact`.
+ */
+export function ContactRows({ contact }) {
+    const rows = contactRows(contact, useUiCopy().person);
+    if (rows.length === 0)
+        return null;
+    return (_jsx("ul", { className: "-mx-1 flex flex-col border-t border-line pt-2", children: rows.map(({ key, icon: Icon, label, value, href }) => (_jsx("li", { children: _jsxs("a", { href: href, "data-contact": key, ...(key === "whatsapp" ? { target: "_blank", rel: "noreferrer" } : {}), className: "flex min-w-0 items-center gap-2.5 rounded-control px-1 py-1.5 no-underline outline-primary outline-offset-2 hover:bg-ink/6 focus-visible:outline-2 forced-colors:outline-[Highlight]", children: [_jsx(Icon, { "aria-hidden": true, className: "size-(--size-icon-md) shrink-0 text-primary", strokeWidth: 2 }), _jsxs("span", { className: "flex min-w-0 flex-col", children: [_jsx("span", { className: "text-meta font-medium text-ink", children: label }), _jsx("span", { className: "truncate text-micro tabular-nums text-muted", children: value })] })] }) }, key))) }));
+}

package/dist/primitives/value/index.d.ts

@@ -1,8 +1,9 @@
-export { Copyable, type CopyableProps } from "./Copyable.js";
+export { Copyable, type CopyableProps, CopyButton, } from "./Copyable.js";
 export { DateValue, formatDateTime, formatRelative, } from "./Fecha.js";
 export { Meter, type MeterLevel, meterLevel, type MeterProps, type MeterThresholds, } from "./Meter.js";
 export { Metric, type MetricProps, Metrics } from "./Metric.js";
-export { Avatar, type AvatarSize, ContactCard, type ContactCardProps, type PersonContact, UserChip, type UserChipProps, UserStack, } from "./Person.js";
+export { Avatar, type AvatarSize, type PersonContact, UserChip, type UserChipProps, UserStack, } from "./Person.js";
+export { ProgressBar, type ProgressBarProps, } from "./ProgressBar.js";
 export { RelationCard, type RelationCardProps, type RelationSummary, RelationValue, type RelationValueProps, } from "./Relation.js";
-export { Totals, type TotalsRow } from "./Totals.js";
-export { Cell, formatCount, formatDistance, formatNumber, KeyValue, Numeric, ProgressBar, } from "./Value.js";
+export { Totals, type TotalsCredit, type TotalsDeduction, type TotalsFact, type TotalsProps, type TotalsRow, } from "./Totals.js";
+export { Cell, formatCount, formatDistance, formatNumber, KeyValue, Numeric, } from "./Value.js";

package/dist/primitives/value/index.js

@@ -1,9 +1,10 @@
 /* Show a number or a datum so that it reads as such and not as text. */
-export { Copyable } from "./Copyable.js";
+export { Copyable, CopyButton, } from "./Copyable.js";
 export { DateValue, formatDateTime, formatRelative, } from "./Fecha.js";
 export { Meter, meterLevel, } from "./Meter.js";
 export { Metric, Metrics } from "./Metric.js";
-export { Avatar, ContactCard, UserChip, UserStack, } from "./Person.js";
+export { Avatar, UserChip, UserStack, } from "./Person.js";
+export { ProgressBar, } from "./ProgressBar.js";
 export { RelationCard, RelationValue, } from "./Relation.js";
-export { Totals } from "./Totals.js";
-export { Cell, formatCount, formatDistance, formatNumber, KeyValue, Numeric, ProgressBar, } from "./Value.js";
+export { Totals, } from "./Totals.js";
+export { Cell, formatCount, formatDistance, formatNumber, KeyValue, Numeric, } from "./Value.js";