@sincpro/web-ui 0.0.0-stage → 0.2.0

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

@@ -0,0 +1,74 @@
+import type { Tone } from "../../foundations/types.js";
+import { type FormMode } from "../field/mode.js";
+import type { LucideIcon } from "lucide-react";
+import { type ReactNode } from "react";
+/** What the floating summary of the related record says. */
+export type RelationSummary = {
+    /** The title of the card. The relation's name when absent. */
+    title?: string;
+    /** The state of the related record — «al día», «con deuda». */
+    tag?: {
+        label: string;
+        tone?: Tone;
+    };
+    /** Two to four facts that answer the usual question about it: the debt, the credit
+     *  limit, the city, the phone. More is a record, not a summary. */
+    facts?: readonly {
+        label: string;
+        value: ReactNode;
+    }[];
+};
+type RelationMedia = {
+    src?: string;
+    alt?: string;
+    icon?: LucideIcon;
+};
+export type RelationCardProps = {
+    name: string;
+    secondary?: ReactNode;
+    media?: RelationMedia;
+    summary?: RelationSummary;
+    /** «Abrir»: go to the related record. */
+    onOpen?: () => void;
+    /** The record's address, when it has one: «Abrir» becomes a real link. */
+    href?: string;
+};
+/**
+ * The summary of a related record: picture, title, its tag, a handful of facts and «Abrir».
+ *
+ * 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.
+ */
+export declare function RelationCard({ name, secondary, media, summary, onOpen, href, }: RelationCardProps): import("react").JSX.Element;
+export type RelationValueProps = {
+    /** The related record's name. Empty, `null` or absent = no record: said, in muted. */
+    name?: string | null;
+    /** What tells it apart: a NIT, a code, a city. Small and quiet, under the name. */
+    secondary?: ReactNode;
+    /** Its picture or icon, on the left. */
+    media?: RelationMedia;
+    /** Go to the related record. The name becomes a link. */
+    onOpen?: () => void;
+    /** The related record's address: the name becomes a real `<a>` (middle-click, copy). */
+    href?: string;
+    /** Present = an info button next to the name opens the `RelationCard`. */
+    summary?: RelationSummary;
+    /** Floats the summary from the NAME on hover, focus or long press, instead of from the
+     *  info button. `true` = the `RelationCard` (with `summary` when given); a node = that
+     *  content instead — the product of a line, a consumer's own card. Needs the name to be a
+     *  link (`href` or `onOpen`); without one the content opens from the info button. */
+    preview?: boolean | ReactNode;
+    /** The control that EDITS this relation — a `Picker` — drawn instead in edit mode. */
+    editor?: ReactNode;
+    /** Forces the mode; by default the form's. Only matters with `editor`. */
+    mode?: FormMode;
+};
+/**
+ * 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 declare function RelationValue({ name, secondary, media, onOpen, href, summary, preview, editor, mode, }: RelationValueProps): string | number | bigint | boolean | Iterable<ReactNode> | Promise<string | number | bigint | boolean | import("react").ReactPortal | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | Iterable<ReactNode> | null | undefined> | import("react").JSX.Element | null | undefined;
+export {};

package/dist/primitives/value/Relation.js

@@ -0,0 +1,74 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { fillCopy, useUiCopy } from "../../foundations/copy.js";
+import { cn, focusRing } from "../../foundations/variants.js";
+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 { PopoverTrigger } from "../overlay/PopoverTrigger.js";
+import { Preview } from "../overlay/Preview.js";
+import { Tag } from "../tag/Tag.js";
+import { ArrowRight, Info } from "lucide-react";
+import { useContext } from "react";
+import { Link } from "react-aria-components";
+/**
+ * The summary of a related record: picture, title, its tag, a handful of facts and «Abrir».
+ *
+ * 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.
+ */
+export function RelationCard({ name, secondary, media, summary = {}, 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] }));
+}
+/**
+ * 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, preview, editor, mode, }) {
+    const copy = useUiCopy();
+    const formMode = useFormMode(mode);
+    /* Inside a `Field` the value takes the control's height, so a form that goes from
+       editing to reading does not move (the same rule as `ReadValue`). */
+    const inField = useContext(FieldIdsContext) !== null;
+    if (editor !== undefined && formMode === "edit")
+        return _jsx(_Fragment, { children: editor });
+    const frame = (child) => inField ? (_jsx("span", { className: "flex min-h-(--size-control-md) min-w-0 items-center", children: child })) : (child);
+    if (name === undefined || name === null || name === "") {
+        return frame(_jsx("span", { className: "text-meta text-muted italic", children: copy.relation.none }));
+    }
+    const goes = href !== undefined || onOpen !== undefined;
+    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 === undefined || preview === null || preview === false
+        ? undefined
+        : 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`: the summary when there is no preview on the name; the preview's content when
+       there is no link for it to ride on. */
+    const info = previewed !== undefined
+        ? goes
+            ? undefined
+            : () => previewed
+        : summary === undefined
+            ? undefined
+            : (close) => card(onOpen === undefined
+                ? undefined
+                : () => {
+                    close();
+                    onOpen();
+                });
+    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 }) }), 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

@@ -0,0 +1,121 @@
+import { type ReactNode } from "react";
+/**
+ * The money summary of a document — subtotal, taxes, discounts and the TOTAL — under its
+ * 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.
+ * Every invoice people have ever read puts the summary apart, on the right, with the total
+ * last and largest: following that convention is reading the document the way it is already
+ * 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 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 that closes the breakdown. Usually one, and last. */
+    total?: boolean;
+};
+/** 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[];
+    /** 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

@@ -0,0 +1,54 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+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

@@ -0,0 +1,40 @@
+import type { ReactNode } from "react";
+export declare const formatCount: (value: number, locale?: string) => string;
+export declare const formatNumber: (value: number, locale?: string) => string;
+export declare const formatDistance: (value: number, locale?: string) => string;
+/** A label with its number, for the glance at the top of a view. */
+export declare function KeyValue({ label, value }: {
+    label: string;
+    value: ReactNode;
+}): import("react").JSX.Element;
+/**
+ * A number with its unit: right aligned, with tabular figures.
+ *
+ * Context: this is the detail a table's look depends on. Tabular figures give every digit
+ * the same width, so `32.561` lines up across rows exactly as it did in monospace — without
+ * making a business report look like a terminal. The unit stays in the same face so the
+ * digits keep their column.
+ */
+export declare function Numeric({ value, unit, format, }: {
+    value: number;
+    unit?: string;
+    format?: "integer" | "decimal" | "distance";
+}): import("react").JSX.Element;
+/**
+ * The content of a data cell, with what the system decides and the view does not.
+ *
+ * Context: `""` is a TRULY EMPTY cell and not a missing datum — they are two
+ * different things and the engine tells them apart, so the interface does too. A
+ * missing one is passed as `null` and drawn with its mark; an empty string is a
+ * value somebody typed, and it gets one too.
+ *
+ * It used to live in the application, where it couldn't serve the other five
+ * tables.
+ */
+export declare function Cell({ value, 
+/** From how many characters it gets truncated. A 64 character identifier
+ *  breaks the width of the whole table for a column nobody reads in full. */
+max, }: {
+    value: string | number | null | undefined;
+    max?: number;
+}): import("react").JSX.Element;

package/dist/primitives/value/Value.js

@@ -0,0 +1,80 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { currentCopyLocale, useUiCopy } from "../../foundations/copy.js";
+/**
+ * Context: the mono/sans rule decides everything in here. The label goes in
+ * PROPORTIONAL —«orígenes», «mediana» are words, not data— and the value in
+ * tabular monospace, which is what makes four of these in a row keep their
+ * digits in a column.
+ *
+ * Formats follow the session locale, not a baked-in Spanish `Intl`.
+ */
+function integerFormat(locale) {
+    return new Intl.NumberFormat(locale, { maximumFractionDigits: 0 });
+}
+function decimalFormat(locale) {
+    return new Intl.NumberFormat(locale, { maximumFractionDigits: 2 });
+}
+/** Four decimals and not two for distances — they live near zero
+ *  (`0.0696`, `0.0149`) and with two they turn into `0.07` and `0.01`, which is
+ *  losing exactly the part that tells one column from another. */
+function distanceFormat(locale) {
+    return new Intl.NumberFormat(locale, {
+        minimumFractionDigits: 4,
+        maximumFractionDigits: 4,
+    });
+}
+export const formatCount = (value, locale = currentCopyLocale()) => integerFormat(locale).format(value);
+export const formatNumber = (value, locale = currentCopyLocale()) => decimalFormat(locale).format(value);
+export const formatDistance = (value, locale = currentCopyLocale()) => distanceFormat(locale).format(value);
+/** A label with its number, for the glance at the top of a view. */
+export function KeyValue({ label, value }) {
+    return (_jsxs("div", { className: "min-w-0", children: [_jsx("dt", { className: "text-micro text-muted", children: label }), _jsx("dd", { className: "mt-0.5 truncate text-lead tabular-nums text-ink", children: value })] }));
+}
+/**
+ * A number with its unit: right aligned, with tabular figures.
+ *
+ * Context: this is the detail a table's look depends on. Tabular figures give every digit
+ * the same width, so `32.561` lines up across rows exactly as it did in monospace — without
+ * making a business report look like a terminal. The unit stays in the same face so the
+ * digits keep their column.
+ */
+export function Numeric({ value, unit, format = "integer", }) {
+    const text = format === "distance"
+        ? formatDistance(value)
+        : format === "decimal"
+            ? formatNumber(value)
+            : 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 })] }));
+}
+/**
+ * The content of a data cell, with what the system decides and the view does not.
+ *
+ * Context: `""` is a TRULY EMPTY cell and not a missing datum — they are two
+ * different things and the engine tells them apart, so the interface does too. A
+ * missing one is passed as `null` and drawn with its mark; an empty string is a
+ * value somebody typed, and it gets one too.
+ *
+ * It used to live in the application, where it couldn't serve the other five
+ * tables.
+ */
+export function Cell({ value, 
+/** From how many characters it gets truncated. A 64 character identifier
+ *  breaks the width of the whole table for a column nobody reads in full. */
+max = 48, }) {
+    const copy = useUiCopy();
+    if (value === null || value === undefined) {
+        return (_jsx("span", { className: "text-muted italic", title: copy.cell.missing, children: copy.cell.missing }));
+    }
+    if (typeof value === "number")
+        return _jsx(Numeric, { value: value, format: "decimal" });
+    if (value === "") {
+        return (_jsx("span", { className: "text-line-strong", title: copy.cell.empty, children: "\u00B7" }));
+    }
+    if (value.length <= max)
+        return _jsx(_Fragment, { children: value });
+    /* It is truncated with the whole value in the `title`: whoever needs the full
+       id has it a hover away, and whoever is reading the column next to it doesn't
+       pay for its width. */
+    return (_jsxs("span", { title: value, className: "truncate", children: [value.slice(0, max), "\u2026"] }));
+}

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

@@ -0,0 +1,9 @@
+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 { ProgressBar, type ProgressBarProps, } from "./ProgressBar.js";
+export { RelationCard, type RelationCardProps, type RelationSummary, RelationValue, type RelationValueProps, } from "./Relation.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

@@ -0,0 +1,10 @@
+/* Show a number or a datum so that it reads as such and not as text. */
+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 { ProgressBar, } from "./ProgressBar.js";
+export { RelationCard, RelationValue, } from "./Relation.js";
+export { Totals, } from "./Totals.js";
+export { Cell, formatCount, formatDistance, formatNumber, KeyValue, Numeric, } from "./Value.js";