@sincpro/web-ui 0.0.0-stage → 0.2.0

package/dist/primitives/value/Fecha.js

@@ -0,0 +1,89 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { currentCopy, currentCopyLocale, useUiCopy } from "../../foundations/copy.js";
+/* ==================================================================== *
+ *  WHEN — a date says two things and they can't both be said together.
+ *
+ *      «2 min ago»             how recent it is. Understood without thinking.
+ *      «14/09/2026 06:21»      which one it is. It gets compared, copied, cited.
+ *
+ *  The first is the one that helps in a list —what is being asked is «is this
+ *  from now?»— and the second the one that helps when something has to be done
+ *  with the datum. Writing both spends twice the width to answer a single
+ *  question, so the relative one is drawn and the exact one goes in the `title`:
+ *  a hover away, taking up nothing.
+ *
+ *  ── Why there is no «4 months ago» ──────────────────────────────────
+ *
+ *  Past the week, the relative stops informing: «4 months ago» doesn't let you
+ *  order two things or remember which one it was. From there on the date is
+ *  drawn, which is what at that distance is really being asked.
+ * ==================================================================== */
+function relativeFormat(locale) {
+    return new Intl.RelativeTimeFormat(locale, { numeric: "auto" });
+}
+function dateFormat(locale) {
+    return new Intl.DateTimeFormat(locale, {
+        day: "2-digit",
+        month: "2-digit",
+        year: "numeric",
+    });
+}
+function timeFormat(locale) {
+    return new Intl.DateTimeFormat(locale, {
+        hour: "2-digit",
+        minute: "2-digit",
+        hourCycle: "h23",
+    });
+}
+const MINUTE = 60_000;
+const HOUR = 60 * MINUTE;
+const DAY = 24 * HOUR;
+/** The steps, from finest to coarsest. The first one that fits, wins. */
+const STEPS = [
+    [MINUTE, "minute"],
+    [HOUR, "hour"],
+    [DAY, "day"],
+];
+export function formatRelative(when, now = new Date()) {
+    const locale = currentCopyLocale();
+    const delta = when.getTime() - now.getTime();
+    const abs = Math.abs(delta);
+    if (abs < MINUTE)
+        return currentCopy().time.justNow;
+    if (abs > 7 * DAY)
+        return dateFormat(locale).format(when);
+    const step = STEPS.find(([ms]) => abs < ms * 60) ?? STEPS[STEPS.length - 1];
+    const [ms, unit] = step;
+    return relativeFormat(locale).format(Math.round(delta / ms), unit);
+}
+export function formatDateTime(when) {
+    const locale = currentCopyLocale();
+    return `${dateFormat(locale).format(when)} ${timeFormat(locale).format(when)}`;
+}
+/** A day written as `YYYY-MM-DD` (what a date field stores) is that day HERE. `new Date()`
+ *  reads it as midnight in UTC, and west of Greenwich that is the evening before: a due date
+ *  of the 15th was drawn as the 14th in La Paz. Anything else goes through `Date` as is. */
+function toDate(when) {
+    const day = typeof when === "string" ? /^(\d{4})-(\d{2})-(\d{2})$/.exec(when) : null;
+    if (day === null)
+        return new Date(when);
+    return new Date(Number(day[1]), Number(day[2]) - 1, Number(day[3]));
+}
+export function DateValue({ when, format = "relative", 
+/** So it can be tested: without this, a story with «hace 2 min» changes its
+ *  text every minute and no snapshot works as a reference. */
+now, }) {
+    const copy = useUiCopy();
+    const d = when instanceof Date ? when : toDate(when);
+    if (Number.isNaN(d.getTime())) {
+        return (_jsx("span", { className: "text-meta text-muted italic", title: copy.time.invalid, children: copy.time.noDate }));
+    }
+    const exact = formatDateTime(d);
+    const text = format === "exact"
+        ? exact
+        : format === "date"
+            ? dateFormat(copy.locale).format(d)
+            : formatRelative(d, now);
+    return (_jsx("time", { dateTime: d.toISOString(), title: exact, className: "text-meta whitespace-nowrap tabular-nums text-muted", children: text }));
+}

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

@@ -0,0 +1,29 @@
+import type { ReactNode } from "react";
+export type MeterLevel = "good" | "warn" | "danger";
+/** Percentages of the range where the color changes. */
+export type MeterThresholds = {
+    warn: number;
+    danger: number;
+};
+/** The level of a percentage: under `warn` is good, up to `danger` is warn, above is danger. */
+export declare function meterLevel(percentage: number, thresholds?: MeterThresholds): MeterLevel;
+export type MeterProps = {
+    /** What is measured: «Crédito usado», «Stock». */
+    label: string;
+    value: number;
+    minValue?: number;
+    /** The capacity. 100 by default, so a plain percentage needs nothing else. */
+    maxValue?: number;
+    /** How the figure is written. Absent: the percentage of the range. */
+    formatOptions?: Intl.NumberFormatOptions;
+    /** The figure written by hand, when a single formatted number does not say it:
+     *  «Bs 42.500 de 50.000». It is also what a screen reader reads. */
+    valueLabel?: ReactNode;
+    /** Where the color changes, in percent of the range. */
+    thresholds?: MeterThresholds;
+    /** Off when the figure is already beside it — a cell with its column. */
+    showValue?: boolean;
+    /** The width of the track. A meter in a table cell is shorter than one in a card. */
+    width?: string;
+};
+export declare function Meter({ label, value, minValue, maxValue, formatOptions, valueLabel, thresholds, showValue, width, }: MeterProps): import("react").JSX.Element;

package/dist/primitives/value/Meter.js

@@ -0,0 +1,46 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { AriaLocale } from "../../foundations/aria.js";
+import { tv } from "../../foundations/variants.js";
+import { Meter as AriaMeter } from "react-aria-components";
+/**
+ * Where a quantity stands against a known range: the credit used, the stock against the
+ * capacity of the warehouse, the budget spent.
+ *
+ * Context: it looks like `ProgressBar` and it is the opposite thing. A progress bar is a
+ * TASK advancing toward done — an import, a stock count — and full is good news. A meter is a
+ * MEASUREMENT that just is, and full is often the alarm: a credit line at 95 % is a client
+ * who cannot buy tomorrow. That is why its color is not a tone the consumer picks but the
+ * reading of the value — `good` under 70 %, `warn` from 70 to 90, `danger` above — so the
+ * one that needs a look is the red one in a column of thirty. The thresholds move for the
+ * measure where full is fine (a warehouse meant to run at 95 %).
+ *
+ * React Aria writes `role="meter"` and the `aria-value*`; the visible figure is formatted by
+ * React Aria in the locale of the copy table (`AriaLocale`), in tabular figures so a column
+ * of meters keeps its digits aligned.
+ */
+const fill = tv({
+    base: "block h-full rounded-pill transition-[width] duration-(--duration-panel) ease-(--ease-out) forced-colors:bg-[Highlight]",
+    variants: {
+        level: {
+            good: "bg-good",
+            warn: "bg-warn",
+            danger: "bg-danger",
+        },
+    },
+});
+const DEFAULT_THRESHOLDS = { warn: 70, danger: 90 };
+/** The level of a percentage: under `warn` is good, up to `danger` is warn, above is danger. */
+export function meterLevel(percentage, thresholds = DEFAULT_THRESHOLDS) {
+    if (percentage > thresholds.danger)
+        return "danger";
+    if (percentage >= thresholds.warn)
+        return "warn";
+    return "good";
+}
+export function Meter({ label, value, minValue = 0, maxValue = 100, formatOptions, valueLabel, thresholds = DEFAULT_THRESHOLDS, showValue = true, width = "w-64", }) {
+    return (_jsx(AriaLocale, { children: _jsx(AriaMeter, { "aria-label": label, value: value, minValue: minValue, maxValue: maxValue, formatOptions: formatOptions, valueLabel: valueLabel, className: `flex max-w-full flex-col gap-1.5 ${width}`, children: ({ percentage, valueText }) => {
+                const level = meterLevel(percentage, thresholds);
+                return (_jsxs(_Fragment, { children: [_jsxs("span", { className: "flex items-baseline justify-between gap-2", children: [_jsx("span", { className: "truncate text-meta text-ink", children: label }), showValue ? (_jsx("span", { "data-level": level, className: `shrink-0 text-meta tabular-nums ${level === "danger" ? "font-medium text-danger" : "text-muted"}`, children: valueText })) : null] }), _jsx("span", { className: "block h-(--size-track) overflow-hidden rounded-pill bg-ink/10 forced-colors:outline forced-colors:outline-[ButtonBorder]", children: _jsx("span", { "data-level": level, className: fill({ level }), style: { width: `${percentage}%` } }) })] }));
+            } }) }));
+}

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

@@ -0,0 +1,42 @@
+import type { Tone } from "../../foundations/types.js";
+import type { LucideIcon } from "lucide-react";
+/**
+ * A metric that also FILTERS: «2 por confirmar», «41 por entregar».
+ *
+ * Context: it is different from `KeyValue` and from a `ListingBar` counter, and
+ * the difference is that this one gets pressed. A number that leads somewhere has
+ * to look like something that gets pressed, or nobody discovers that the list can
+ * be narrowed from there — which is the most common case of «I didn't know you
+ * could do that».
+ *
+ * ── The color shows up when the narrowing is APPLIED ─────────────────
+ *
+ * At rest the cards are all the same: sheet background and a hair of border. The
+ * only tinted thing is the FIGURE, which is what the card is about. Four
+ * different color backgrounds on top of a list are not four filters, they are
+ * four stains competing with the rows that don't say which one is applied.
+ *
+ * The tone paints the background only when the metric is active. There the color
+ * does mean something —«I'm only seeing this»— and with a single card lit up
+ * there is nothing to compete with.
+ *
+ * The figure goes big on top and the label small underneath, the other way around
+ * from a smart button: here what gets compared at a glance across three cards is
+ * the NUMBER.
+ */
+export type MetricProps = {
+    value: number | string;
+    label: string;
+    tone?: Tone;
+    icon?: LucideIcon;
+    /** Present = narrows the list. Absent = only informs, and doesn't get pressed. */
+    onClick?: () => void;
+    /** This narrowing is applied. */
+    active?: boolean;
+};
+export declare function Metric({ value, label, tone, icon: Icon, onClick, active, }: MetricProps): import("react").JSX.Element;
+/** The row of metrics. It wraps if they don't fit; it doesn't scroll: a hidden
+ *  metric is a filter nobody finds. */
+export declare function Metrics({ children }: {
+    children: React.ReactNode;
+}): import("react").JSX.Element;

package/dist/primitives/value/Metric.js

@@ -0,0 +1,38 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useUiCopy } from "../../foundations/copy.js";
+import { bySurface, useSurface } from "../../foundations/surface.js";
+const TONE = {
+    neutral: { background: "bg-ink/6", text: "text-ink", edge: "border-ink/20" },
+    info: { background: "bg-info/10", text: "text-info", edge: "border-info/35" },
+    good: { background: "bg-good/10", text: "text-good", edge: "border-good/35" },
+    warn: { background: "bg-warn/12", text: "text-warn", edge: "border-warn/40" },
+    bad: { background: "bg-bad/10", text: "text-bad", edge: "border-bad/35" },
+    /* The gold can't be text over the canvas (2,43:1), so here the figure goes in
+       ink and the tone is only visible when the card is lit up. */
+    accent: { background: "bg-accent/20", text: "text-ink", edge: "border-accent/50" },
+};
+export function Metric({ value, label, tone = "neutral", icon: Icon, onClick, active = false, }) {
+    const copy = useUiCopy();
+    const sup = useSurface();
+    const t = TONE[tone];
+    /* At rest the box is the sheet with a hair of border: that is what makes four
+       metrics read as one row and not as four notices. Lit up it gets tinted, and
+       there the color says which one is applied. */
+    const skin = active
+        ? `${t.background} ${t.edge}`
+        : bySurface(sup, "bg-surface border-line", "bg-chrome-ink/6 border-chrome-ink/15");
+    const box = `flex min-w-(--container-metric) shrink-0 flex-col justify-center gap-0.5 rounded-box border px-3.5 py-2 text-left transition-colors duration-(--duration-instant) ${skin} ${onClick === undefined
+        ? ""
+        : "cursor-pointer hover:border-line-strong focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary"}`;
+    const content = (_jsxs(_Fragment, { children: [_jsxs("span", { className: `flex items-center gap-1.5 text-title font-semibold tabular-nums ${t.text}`, children: [Icon === undefined ? null : (_jsx(Icon, { className: "size-(--size-icon-md)", strokeWidth: 2, "aria-hidden": true })), typeof value === "number" ? value.toLocaleString(copy.locale) : value] }), _jsx("span", { className: `text-micro ${bySurface(sup, "text-muted", "text-chrome-muted")}`, children: label })] }));
+    if (onClick === undefined) {
+        return (_jsx("div", { className: box, "aria-label": `${value} ${label}`, children: content }));
+    }
+    return (_jsx("button", { type: "button", onClick: onClick, "aria-pressed": active, className: box, children: content }));
+}
+/** The row of metrics. It wraps if they don't fit; it doesn't scroll: a hidden
+ *  metric is a filter nobody finds. */
+export function Metrics({ children }) {
+    return _jsx("div", { className: "flex min-w-0 flex-wrap items-stretch gap-2", children: children });
+}

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

@@ -0,0 +1,90 @@
+import type { ReactNode } from "react";
+declare const SIZE: {
+    readonly sm: "size-5 text-micro";
+    readonly md: "size-6 text-micro";
+    readonly lg: "size-8 text-meta";
+    readonly xl: "size-12 text-body";
+};
+export type AvatarSize = keyof typeof SIZE;
+export declare function Avatar({ name, size, 
+/** The photo, if there is one. Without it the initials go, which is the normal
+ *  case here. */
+src, }: {
+    name: string;
+    size?: AvatarSize;
+    src?: string;
+}): import("react").JSX.Element;
+/** 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;
+};
+export type ContactCardProps = {
+    name: string;
+    /** The photo. Without it, the initials — in the same color the person has everywhere. */
+    src?: string;
+    /** What the person is here: «Vendedora · Sucursal La Paz». */
+    role?: string;
+    contact?: PersonContact;
+    /** Go to the person's own record — «Ver ficha». Without it the card only reaches them. */
+    onOpen?: () => void;
+};
+/**
+ * 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 declare function ContactCard({ name, src, role, contact, onOpen }: ContactCardProps): import("react").JSX.Element;
+export type UserChipProps = {
+    name: string;
+    size?: AvatarSize;
+    src?: string;
+    /** What goes next to the name in the chip: a role, an email, «hace 2 min». */
+    detail?: ReactNode;
+    /** What the person is, shown in the contact card: «Vendedora · Sucursal La Paz». */
+    role?: string;
+    /** The ways to reach them. Present = the chip opens a contact card. */
+    contact?: PersonContact;
+    /** Go to the person's record. Present = the chip opens a card with «Ver ficha». */
+    onOpen?: () => void;
+};
+/**
+ * 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 declare function UserChip({ name, size, src, detail, role, contact, onOpen, }: UserChipProps): import("react").JSX.Element;
+/** 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 declare function UserStack({ names, max, size, }: {
+    names: readonly string[];
+    max?: number;
+    size?: AvatarSize;
+}): import("react").JSX.Element;
+export {};

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/ProgressBar.d.ts

@@ -0,0 +1,31 @@
+import type { Tone } from "../../foundations/types.js";
+import type { ReactNode } from "react";
+export type ProgressBarProps = {
+    /** Where the task is, from `minValue` to `maxValue`. Absent = under way and it cannot say
+     *  how far: the bar sweeps and draws no figure. */
+    value?: number;
+    /** What is running: «Importación de clientes», «Cierre de octubre». Always its accessible
+     *  name; drawn above the bar only with `showLabel`. */
+    label: string;
+    minValue?: number;
+    /** The size of the task — 4000 for an import of 4.000 rows. 100 by default, so a plain
+     *  percentage needs nothing else. */
+    maxValue?: number;
+    /** How the figure is written. Absent: the percentage of the task. */
+    formatOptions?: Intl.NumberFormatOptions;
+    /** The figure written by hand, when a percentage does not say it: «1.240 de 4.000 filas».
+     *  It is also what a screen reader reads. Indeterminate, it is the only figure drawn —
+     *  «leyendo el archivo…». */
+    valueLabel?: ReactNode;
+    /** Draws the label above the bar: the bar a screen is about (an import, the closing of
+     *  the month). Off in a cell or a row, where the column or the line already says it. */
+    showLabel?: boolean;
+    /** Off when the figure is already beside it — a cell with its column. */
+    showValue?: boolean;
+    /** The width of the track (inline) or of the whole piece (with `showLabel`). A bar in a
+     *  list row is shorter than the bar of an import. */
+    width?: string;
+    /** The state of the task. `brand` — the gradient — is the long bar of a live process. */
+    tone?: Tone | "brand";
+};
+export declare function ProgressBar({ value, label, minValue, maxValue, formatOptions, valueLabel, showLabel, showValue, width, tone, }: ProgressBarProps): import("react").JSX.Element;

package/dist/primitives/value/ProgressBar.js

@@ -0,0 +1,53 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { AriaLocale } from "../../foundations/aria.js";
+import { cn } from "../../foundations/variants.js";
+import { ProgressBar as AriaProgressBar } from "react-aria-components";
+/**
+ * A task under way: the import of 4.000 rows, the closing of the month, a file going up. A
+ * real bar, never a spinner — a spinner says «wait» and does not say how much; a bar says both.
+ *
+ * Context: it looks like `Meter` and it is the opposite thing. A meter is a QUANTITY in a
+ * range that just is — the stock against the warehouse, the credit used — and full is often
+ * the alarm. A progress bar is something HAPPENING, moving toward done, and full is the good
+ * news. That is why their color comes from different places: the meter's is the reading of
+ * its value; this one's is the state of the task, said by whoever runs it — `good` finished,
+ * `warn` is running slow, `bad` failed — and `brand` by default, the blue→gold gradient of
+ * the long bar of a live import. (At 6 px and 62 % in a list row a gradient reads as a
+ * broken bar, so a short bar there asks for a flat tone.)
+ *
+ * ── Determinate and indeterminate ─────────────────────────────────────
+ *
+ * With a `value` it fills to it, and the figure next to it is in tabular figures so a column
+ * of bars keeps its digits aligned. Without one the task is under way and cannot say how far
+ * — the server has not counted the rows yet — and the bar SAYS so instead of inventing a
+ * number: a segment sweeps along the track and no figure is drawn. That sweep is the only
+ * loop of the system (`--animate-progress-sweep`), and it runs behind `motion-safe:`: with
+ * `prefers-reduced-motion` the segment stands still, the whole track faded — «busy» without
+ * movement, and without a fill that could be read as a percentage.
+ *
+ * React Aria writes `role="progressbar"` and the `aria-value*` — no `aria-valuenow` while it
+ * is indeterminate, which is how a screen reader tells the two apart — and formats the figure
+ * in the copy table's locale (`AriaLocale`).
+ *
+ * The track is the system's `--size-track`: at 3 px it was a line that could not be told
+ * from a separator; two bars of different thickness on one screen read as two things.
+ */
+const FILL = {
+    neutral: "bg-muted",
+    info: "bg-info",
+    good: "bg-good",
+    warn: "bg-warn",
+    bad: "bg-bad",
+    accent: "bg-accent",
+};
+export function ProgressBar({ value, label, minValue = 0, maxValue = 100, formatOptions, valueLabel, showLabel = false, showValue = true, width = "w-24", tone = "brand", }) {
+    const fill = tone === "brand" ? "bar-brand" : FILL[tone];
+    return (_jsx(AriaLocale, { children: _jsx(AriaProgressBar, { "aria-label": label, ...(value === undefined ? {} : { value }), isIndeterminate: value === undefined, minValue: minValue, maxValue: maxValue, formatOptions: formatOptions, valueLabel: valueLabel, className: showLabel
+                ? `flex max-w-full flex-col gap-1.5 ${width}`
+                : "flex min-w-0 items-center gap-2", children: ({ percentage, valueText, isIndeterminate }) => {
+                const figure = showValue && valueText !== undefined ? (_jsx("span", { className: "shrink-0 text-meta tabular-nums text-muted", children: valueText })) : null;
+                const track = (_jsx("span", { className: cn("relative block h-(--size-track) overflow-hidden rounded-pill bg-ink/10 forced-colors:outline forced-colors:outline-[ButtonBorder]", showLabel ? "w-full" : width), children: isIndeterminate ? (_jsx("span", { "data-indeterminate": true, className: cn("absolute inset-y-0 left-0 w-2/5 rounded-pill forced-colors:bg-[Highlight]", "motion-safe:animate-progress-sweep motion-reduce:w-full motion-reduce:opacity-40", fill) })) : (_jsx("span", { className: cn("block h-full rounded-pill transition-[width] duration-(--duration-panel) ease-(--ease-out) forced-colors:bg-[Highlight]", fill), style: { width: `${percentage ?? 0}%` } })) }));
+                return showLabel ? (_jsxs(_Fragment, { children: [_jsxs("span", { className: "flex items-baseline justify-between gap-2", children: [_jsx("span", { className: "truncate text-meta text-ink", children: label }), figure] }), track] })) : (_jsxs(_Fragment, { children: [track, figure] }));
+            } }) }));
+}