@sincpro/web-ui 0.0.0-stage → 0.1.0

package/dist/primitives/toolbar/Toolbar.js

@@ -0,0 +1,36 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { tv } from "../../foundations/variants.js";
+import { Separator as AriaSeparator, Toolbar as AriaToolbar, } from "react-aria-components";
+/**
+ * A row of controls that is ONE stop for the keyboard: the actions above an editable table,
+ * the bar of a rich-text editor.
+ *
+ * Context: a table with eight actions above it costs eight Tabs before reaching the first
+ * cell. Inside a toolbar Tab enters and leaves the group once, and the arrows move between
+ * its controls — the way every desktop application has always worked. React Aria does the
+ * moving by walking the DOM for focusable elements, so the system's own `Button` and
+ * `IconButton` (plain native buttons) work inside it as they are, with nothing to forward.
+ *
+ * It draws no box of its own: it sits on whatever surface it is placed, like the actions of a
+ * record header. The gap is the one between buttons of a row; a `ToolbarSeparator` splits
+ * the groups (edit · insert · export) so a long bar still reads as a few decisions.
+ */
+const toolbar = tv({
+    base: "flex gap-1",
+    variants: {
+        orientation: {
+            horizontal: "flex-row flex-wrap items-center",
+            vertical: "flex-col items-start",
+        },
+    },
+});
+export function Toolbar({ label, children, orientation = "horizontal", }) {
+    return (_jsx(AriaToolbar, { "aria-label": label, orientation: orientation, className: (state) => toolbar({ orientation: state.orientation }), children: children }));
+}
+/** A hairline between two groups of a `Toolbar`, across its direction. */
+export function ToolbarSeparator({ orientation = "vertical", }) {
+    return (_jsx(AriaSeparator, { orientation: orientation, className: orientation === "vertical"
+            ? "mx-1 h-(--size-icon-lg) w-px shrink-0 border-none bg-line-strong forced-colors:bg-[ButtonBorder]"
+            : "my-1 h-px w-full border-none bg-line-strong forced-colors:bg-[ButtonBorder]" }));
+}

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

@@ -0,0 +1 @@
+export { Toolbar, ToolbarSeparator } from "./Toolbar.js";

package/dist/primitives/toolbar/index.js

@@ -0,0 +1,2 @@
+/* LA BARRA DE HERRAMIENTAS — un grupo de controles que se recorre con las flechas. */
+export { Toolbar, ToolbarSeparator } from "./Toolbar.js";

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

@@ -0,0 +1,37 @@
+import { type ReactNode } from "react";
+/**
+ * UN VALOR QUE SE COPIA.
+ *
+ * Context: la mitad de los valores de este producto existen para pegarse en otro
+ * lado —un NIT, un CUF de factura, una referencia bancaria, un código de
+ * autorización de 26 caracteres—. Seleccionarlos a mano falla justo con los que
+ * más importa no equivocar: son largos, van en monoespaciada y se cortan.
+ *
+ * ── Confirma, y por eso el estado vive acá ──────────────────────────
+ *
+ * Copiar no tiene efecto visible: el portapapeles está afuera de la pantalla. Un
+ * botón que no contesta se aprieta tres veces «por las dudas». Por eso el ícono
+ * pasa a un tilde por dos segundos — lo mínimo para creerle sin quedarse
+ * mirando.
+ *
+ * ── Y puede fallar ──────────────────────────────────────────────────
+ *
+ * `navigator.clipboard` no existe fuera de un contexto seguro, y en algunos
+ * navegadores exige un permiso que se puede negar. Se contempla: si falla, el
+ * botón lo dice en vez de fingir que copió. Una confirmación falsa es peor que
+ * ninguna, porque alguien pega lo que tenía antes y no se entera.
+ */
+export type CopyableProps = {
+    /** Lo que se copia. Siempre texto: el portapapeles no tiene tipos. */
+    value: string;
+    /** Cómo se ve, si no es el valor tal cual. Un fingerprint se muestra cortado y
+     *  se copia entero, que es justamente por qué las dos cosas son props
+     *  distintas. */
+    children?: ReactNode;
+    /** El valor es de máquina: id, hash, clave. Sin esto, tipografía normal. */
+    mono?: boolean;
+    /** Sólo el botón, sin el valor al lado. Para una celda o un encabezado donde
+     *  el valor ya está dibujado. */
+    bare?: boolean;
+};
+export declare function Copyable({ value, children, mono, bare }: CopyableProps): import("react").JSX.Element;

package/dist/primitives/value/Copyable.js

@@ -0,0 +1,50 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useUiCopy } from "../../foundations/copy.js";
+import { Check, Copy } from "lucide-react";
+import { useEffect, useRef, useState } from "react";
+/** Cuánto dura el tilde. Dos segundos: alcanza para verlo sin que el botón se
+ *  quede en un estado que ya no es cierto. */
+const CONFIRMED_FOR = 2000;
+export function Copyable({ value, children, mono = false, bare = false }) {
+    const copy = useUiCopy();
+    const [state, setState] = useState("idle");
+    const timer = useRef(null);
+    /* Se limpia al desmontar: sin esto, copiar y cerrar el panel antes de los dos
+       segundos deja un `setState` apuntando a un componente que ya no existe. */
+    useEffect(() => () => {
+        if (timer.current !== null)
+            clearTimeout(timer.current);
+    }, []);
+    async function run() {
+        if (timer.current !== null)
+            clearTimeout(timer.current);
+        try {
+            await navigator.clipboard.writeText(value);
+            setState("done");
+        }
+        catch {
+            /* Sin portapapeles —contexto no seguro, permiso negado— se DICE. Fingir
+               que copió hace que alguien pegue lo que tenía antes sin enterarse. */
+            setState("failed");
+        }
+        timer.current = setTimeout(() => setState("idle"), CONFIRMED_FOR);
+    }
+    const label = state === "done"
+        ? copy.copyable.done
+        : state === "failed"
+            ? copy.copyable.failed
+            : copy.copyable.label;
+    const button = (_jsx("button", { type: "button", onClick: run, "aria-label": label, title: label, className: `inline-flex shrink-0 items-center justify-center rounded-control p-0.5 transition-colors duration-(--duration-instant) ${state === "done"
+            ? "text-good"
+            : state === "failed"
+                ? "text-bad"
+                : "text-muted hover:bg-ink/6 hover:text-ink"}`, children: state === "done" ? (_jsx(Check, { className: "size-(--size-icon-sm)", strokeWidth: 2.5 })) : (_jsx(Copy, { className: "size-(--size-icon-sm)", strokeWidth: 2 })) }));
+    if (bare)
+        return button;
+    return (
+    /* El botón aparece con el puntero y ocupa lugar SIEMPRE: si apareciera de la
+       nada, el valor se correría al pasar por encima, y un texto que se mueve
+       cuando vas a seleccionarlo es peor que no tener botón. */
+    _jsxs("span", { className: "group/copy inline-flex min-w-0 items-center gap-1", children: [_jsx("span", { className: `min-w-0 truncate ${mono ? "font-mono" : ""}`, children: children ?? value }), _jsx("span", { className: "opacity-0 transition-opacity duration-(--duration-instant) group-hover/copy:opacity-100 focus-within:opacity-100", children: button })] }));
+}

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

@@ -0,0 +1,12 @@
+export declare function formatRelative(when: Date, now?: Date): string;
+export declare function formatDateTime(when: Date): string;
+export declare function DateValue({ when, format, 
+/** 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, }: {
+    when: Date | string | number;
+    /** `relative` for lists and logs; `exact` when the datum gets compared or
+     *  copied; `date` when the time of day means nothing. */
+    format?: "relative" | "exact" | "date";
+    now?: Date;
+}): import("react").JSX.Element;

package/dist/primitives/value/Fecha.js

@@ -0,0 +1,80 @@
+"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)}`;
+}
+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 : new Date(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 {};