@sincpro/web-ui 0.0.0-stage → 0.1.0

package/dist/primitives/value/Person.js

@@ -0,0 +1,208 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useUiCopy } from "../../foundations/copy.js";
+import { useSurface } from "../../foundations/surface.js";
+import { Button } from "../button/Button.js";
+import { PopoverTrigger } from "../overlay/PopoverTrigger.js";
+import { ArrowRight, Mail, MessageCircle, Phone } from "lucide-react";
+/* ==================================================================== *
+ *  WHO — the person as a datum, not as a string of text.
+ *
+ *  «andres.g@sincpro.com.bo» in a cell is a correct and unreadable datum: twelve
+ *  rows of emails get read letter by letter. An initial in a circle is
+ *  recognized without reading, which is what is needed when the question is «who
+ *  does this belong to?» and not «what is their email?».
+ *
+ *  ── The color comes out of the name and nobody picks it ──────────────
+ *
+ *  A hash of the name against the tone palette. It is deterministic —the same
+ *  person always has the same color, on every screen— and that is why the color
+ *  gets to mean something. If the consumer picked it, the same person would be
+ *  green in one list and blue in another, and recognition without reading is lost
+ *  entirely.
+ *
+ *  The color here is NOT a state: it is identity. That is why it uses the tone
+ *  palette but never `bad` nor `warn` — a person is not «in error».
+ * ==================================================================== */
+const PALETTE = [
+    "bg-info/15 text-info",
+    "bg-good/15 text-good",
+    "bg-accent/25 text-ink",
+    "bg-primary/12 text-primary",
+    "bg-ink/10 text-ink",
+];
+/** The initials: two, and from the first two WORDS. «Ana María Gutiérrez» gives
+ *  `AG` and not `AM` — the surname distinguishes more than the middle name. */
+function initials(name) {
+    const parts = name
+        .trim()
+        .split(/\s+/)
+        .filter((p) => p.length > 0);
+    const first = parts[0]?.[0] ?? "?";
+    const last = parts.length > 1 ? parts[parts.length - 1]?.[0] : undefined;
+    return `${first}${last ?? ""}`.toUpperCase();
+}
+/* The same five identities on the dark chrome. The canvas palette there composed its tints
+   over the navy and left ink letters on a dark disc — 1.61:1, unreadable (measured on the
+   application bar). Same index, so a person keeps their color across the two surfaces. */
+const CHROME_PALETTE = [
+    "bg-chrome-link/20 text-chrome-link",
+    "bg-chrome-good/20 text-chrome-good",
+    "bg-chrome-accent/12 text-chrome-accent",
+    "bg-chrome-link/14 text-chrome-ink",
+    "bg-chrome-ink/14 text-chrome-ink",
+];
+function toneOf(name, surface = "canvas") {
+    let h = 0;
+    for (const ch of name)
+        h = (h * 31 + ch.codePointAt(0)) % 100000;
+    const palette = surface === "chrome" ? CHROME_PALETTE : PALETTE;
+    return palette[h % palette.length];
+}
+/* The text doesn't go below `micro`: two initials at 10 px can't be read, and an
+   unreadable initial is a colored circle — which is exactly what we don't want.
+   What changes between sizes is the circle. */
+const SIZE = {
+    sm: "size-5 text-micro",
+    md: "size-6 text-micro",
+    lg: "size-8 text-meta",
+    /* The head of a contact card: the face is what the card is about. */
+    xl: "size-12 text-body",
+};
+/* Two initials, so the overlap stays short of the second letter. The ring is
+   1px: a 2px ring of the surface color reads as a gap between people, which
+   is the thing a stack is not. */
+const OVERLAP = {
+    sm: "-ml-1.5",
+    md: "-ml-2",
+    lg: "-ml-2.5",
+    xl: "-ml-3.5",
+};
+export function Avatar({ name, size = "md", 
+/** The photo, if there is one. Without it the initials go, which is the normal
+ *  case here. */
+src, }) {
+    const surface = useSurface();
+    if (src !== undefined) {
+        return (
+        /* The photo lies over the initials, drawn invisible: an image has no text baseline, so
+           a chip with a photo sat on the image's bottom edge in a row aligned by baseline (a
+           `DataField`), higher than the label next to it. The hidden initials give the photo
+           the same baseline the initials disc has. */
+        _jsxs("span", { title: name, className: `relative inline-flex shrink-0 items-center justify-center overflow-hidden rounded-pill ${SIZE[size]}`, children: [_jsx("span", { "aria-hidden": true, className: "invisible", children: initials(name) }), _jsx("img", { src: src, alt: name, className: "absolute inset-0 size-full object-cover" })] }));
+    }
+    return (_jsx("span", { title: name, "aria-hidden": true, className: `inline-flex shrink-0 items-center justify-center rounded-pill font-medium select-none ${SIZE[size]} ${toneOf(name, surface)}`, children: initials(name) }));
+}
+/** 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 `+`. */
+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;
+}
+/**
+ * Who a person is and how to reach them: the face, the name, the role, and one row per way
+ * of contact — write, call, WhatsApp — then their record.
+ *
+ * Context: in an ERP the question after «who is the salesperson of this invoice?» is almost
+ * always «how do I reach her?». Copying an email out of another screen to paste it into the
+ * mail client is the detour this card removes. Each way of contact 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.
+ *
+ * It is what opens from a `UserChip` with `contact`, and it is exported on its own for the
+ * side panel of a record, where the same person is shown without a chip to open.
+ */
+export function ContactCard({ name, src, role, contact = {}, onOpen }) {
+    const copy = useUiCopy().person;
+    const rows = contactRows(contact, copy);
+    return (
+    /* React events bubble through the popover's portal to the React parents of the chip —
+       a table row that opens on click among them. A click inside the card is not a click
+       on the row. */
+    _jsxs("div", { className: "flex w-64 max-w-full flex-col gap-3", onClick: (e) => e.stopPropagation(), children: [_jsxs("div", { className: "flex min-w-0 items-center gap-3", children: [_jsx("span", { "aria-hidden": true, className: "flex shrink-0", children: _jsx(Avatar, { name: name, size: "xl", ...(src === undefined ? {} : { src }) }) }), _jsxs("div", { className: "flex min-w-0 flex-col", children: [_jsx("span", { className: "truncate text-lead font-semibold text-ink", title: name, children: name }), role === undefined ? null : (_jsx("span", { className: "line-clamp-2 text-meta text-muted", title: role, children: role }))] })] }), rows.length === 0 ? null : (_jsx("ul", { className: "-mx-1 flex flex-col", 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))) })), onOpen === undefined ? null : (_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.open }) }))] }));
+}
+/** The chip as the opener of its card. A native button that takes what `PopoverTrigger`
+ *  hands its trigger — `ref`, the press handlers, `expanded` and `haspopup` — the same
+ *  contract the system's buttons keep. */
+function ChipButton({ expanded, haspopup, children, ref, ...native }) {
+    return (_jsx("button", { ...native, ref: ref, type: "button", ...(haspopup === undefined ? {} : { "aria-haspopup": haspopup }), ...(expanded === undefined ? {} : { "aria-expanded": expanded }), 
+        /* The hover tint is a pseudo-element that spills past the box, not padding: padding
+           moved the chip off the column of values, and negative margins to undo it made the
+           chip wider than the room its parent measured — and it truncated itself. */
+        className: "relative isolate inline-flex max-w-full min-w-0 cursor-pointer items-center gap-2 rounded-control text-left outline-primary outline-offset-4 before:absolute before:-inset-x-1 before:-inset-y-0.5 before:-z-10 before:rounded-control before:transition-colors before:duration-(--duration-instant) hover:before:bg-ink/6 focus-visible:outline-2 aria-expanded:before:bg-ink/6 forced-colors:outline-[Highlight]", children: children }));
+}
+/**
+ * The person with their name next to them. For a cell, a list row, a field in read mode or
+ * a fact of a record.
+ *
+ * Context: a chip is a button ONLY when it has somewhere to go. With `contact` or `onOpen` it
+ * opens the `ContactCard` (press, Enter or Space — React Aria's `DialogTrigger` through
+ * `PopoverTrigger`: focus goes into the card, Escape and a click outside close it, and focus
+ * comes back to the chip). Without them it stays text: a button that does nothing is a lie a
+ * keyboard user pays for with one more Tab stop on every row.
+ *
+ * It opens on PRESS and not on hover: the card holds links, and content that has to be
+ * reached with the pointer or the keyboard cannot disappear when the pointer leaves the name.
+ */
+export function UserChip({ name, size = "md", src, detail, role, contact, onOpen, }) {
+    const face = (_jsxs(_Fragment, { children: [_jsx("span", { "aria-hidden": true, className: "flex shrink-0", children: _jsx(Avatar, { name: name, size: size, ...(src === undefined ? {} : { src }) }) }), _jsx("span", { className: "min-w-0 truncate text-meta text-ink", children: name }), detail === undefined ? null : (_jsx("span", { className: "min-w-0 shrink truncate text-micro text-muted", children: detail }))] }));
+    const reachable = onOpen !== undefined ||
+        (contact !== undefined &&
+            Object.values(contact).some((v) => v !== undefined && v !== ""));
+    if (!reachable) {
+        return _jsx("span", { className: "inline-flex min-w-0 items-center gap-2", children: face });
+    }
+    return (_jsx(PopoverTrigger, { label: name, trigger: _jsx(ChipButton, { children: face }), children: (close) => (_jsx(ContactCard, { name: name, ...(src === undefined ? {} : { src }), ...(role === undefined ? {} : { role }), ...(contact === undefined ? {} : { contact }), ...(onOpen === undefined
+                ? {}
+                : {
+                    onOpen: () => {
+                        close();
+                        onOpen();
+                    },
+                }) })) }));
+}
+/** Several people in little width: the widget of a to-many relation.
+ *
+ *  Context: they overlap and get cut off at `max`. Five avatars in a row are five
+ *  things; five overlapped with a «+3» are ONE thing that has eight inside, which
+ *  is what the cell means to say.
+ *
+ *  The `title` carries the whole list: whoever needs the names has them without
+ *  the column paying for their width. */
+export function UserStack({ names, max = 4, size = "md", }) {
+    const copy = useUiCopy();
+    if (names.length === 0) {
+        return (_jsx("span", { className: "text-meta text-muted italic", title: copy.person.unassigned, children: copy.person.unassigned }));
+    }
+    const visible = names.length <= max ? names : names.slice(0, max - 1);
+    const rest = names.length - visible.length;
+    return (_jsxs("span", { className: "inline-flex items-center", title: names.join(", "), children: [visible.map((n, i) => (_jsx("span", { className: i === 0 ? "" : OVERLAP[size], children: _jsx("span", { className: "block rounded-pill ring-1 ring-surface", children: _jsx(Avatar, { name: n, size: size }) }) }, n))), rest <= 0 ? null : (_jsxs("span", { className: `${OVERLAP[size]} inline-flex items-center justify-center rounded-pill bg-ink/10 font-medium tabular-nums text-muted ring-1 ring-surface ${SIZE[size]}`, children: ["+", rest] }))] }));
+}

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

@@ -0,0 +1,69 @@
+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;
+    /** 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, 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,57 @@
+"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 { 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, 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 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();
+                            },
+                        }) })) }))] }));
+}

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

@@ -0,0 +1,26 @@
+import type { ReactNode } from "react";
+/**
+ * The money summary of a document — subtotal, taxes, discounts and the TOTAL — under its
+ * lines, aligned to the right.
+ *
+ * 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 block: a rule above it, and the figure
+ * at the title size.
+ */
+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. */
+    total?: boolean;
+};
+export declare function Totals({ rows }: {
+    rows: readonly TotalsRow[];
+}): import("react").JSX.Element;

package/dist/primitives/value/Totals.js

@@ -0,0 +1,4 @@
+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))) }));
+}

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

@@ -0,0 +1,77 @@
+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;
+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;
+/**
+ * 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.
+ *
+ * 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,119 @@
+"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 })] }));
+}
+/**
+ * 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.
+ *
+ * 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,8 @@
+export { Copyable, type CopyableProps } 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 { 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";

package/dist/primitives/value/index.js

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