@sincpro/web-ui 0.0.0-stage → 0.2.0

package/dist/primitives/table/Table.js

@@ -0,0 +1,116 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { stickyTop, useScrollBox } from "../../foundations/sticky.js";
+import { ArrowDown, ArrowUp, ChevronRight, ChevronsUpDown } from "lucide-react";
+import { createContext, useContext, useId } from "react";
+export function Table({ children, 
+/** With a height, the table scrolls on its own and the header sticks.
+ *  Without a height, the page scrolls and the header goes away. */
+height, }) {
+    const caja = useScrollBox(height === undefined ? {} : { height });
+    return (
+    /* Cuándo esta caja es un contenedor de scroll y cuándo no lo decide
+       `useScrollBox`: ahí vive el dilema entero y ahí vive su explicación. Las
+       tres tablas del sistema lo resolvían con tres copias de la misma
+       medición. */
+    _jsx("div", { ref: caja.ref, className: `min-w-0 ${caja.className}`, style: caja.style, children: _jsx("table", { className: "w-full border-separate border-spacing-0 px-1 text-left", children: children }) }));
+}
+export function THead({ children }) {
+    return (
+    /* Se pega DEBAJO de lo que ya esté pegado —la barra de la aplicación y la
+       de la lista— y no en `top: 0`, que lo metía atrás de las dos. Sin alto en
+       `Table` el que scrollea es la página, y ahí la diferencia es justamente
+       la que hacía desaparecer los nombres de columna. Ver `system/sticky.tsx`. */
+    _jsx("thead", { className: "sticky z-10 bg-ground", style: stickyTop, children: _jsx("tr", { children: children }) }));
+}
+/** A column. If it gets a `sortKey`, it can be sorted.
+ *
+ *  The icon is ALWAYS there, dimmed when the column is not the sorted one: an
+ *  indicator that only shows up once you sort does not say which columns are
+ *  sortable, and then you have to try them one by one. */
+export function Th({ children, sortKey, sort, onSort, numeric = false, align, width, }) {
+    const active = sortKey !== undefined && sort?.key === sortKey;
+    const dir = active ? sort.direction : undefined;
+    function nextSort() {
+        if (sortKey === undefined || onSort === undefined)
+            return;
+        // asc → desc → unsorted. The third click puts the table back the way it was.
+        if (!active)
+            onSort({ key: sortKey, direction: "asc" });
+        else if (dir === "asc")
+            onSort({ key: sortKey, direction: "desc" });
+        else
+            onSort(null);
+    }
+    const Icon = dir === "asc" ? ArrowUp : dir === "desc" ? ArrowDown : ChevronsUpDown;
+    return (_jsx("th", { scope: "col", style: width === undefined ? undefined : { width }, "aria-sort": active ? (dir === "asc" ? "ascending" : "descending") : "none", className: `border-b border-line-strong px-3 py-2 text-meta font-medium whitespace-nowrap text-muted ${(align ?? (numeric ? "right" : "left")) === "right" ? "text-right" : "text-left"}`, children: sortKey === undefined ? (children) : (_jsxs("button", { type: "button", onClick: nextSort, className: `inline-flex items-center gap-1 rounded-control transition-colors duration-(--duration-instant) hover:text-ink focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-primary ${(align ?? (numeric ? "right" : "left")) === "right" ? "flex-row-reverse" : ""} ${active ? "text-ink" : ""}`, children: [children, _jsx(Icon, { className: `size-(--size-icon-sm) shrink-0 ${active ? "text-primary" : "text-line-strong"}`, strokeWidth: 2, "aria-hidden": true })] })) }));
+}
+/** The wash of a row lives on the cells, not on the `<tr>`. A background on the
+ *  row paints edge to edge; on the cells the ends can round and the table's
+ *  padding keeps the mark off the card. */
+const RowMark = createContext(false);
+const ROW_WASH = "group-hover/row:bg-ink/4";
+const ROW_ON = "bg-primary/8";
+function rowWash(selected) {
+    return selected ? ROW_ON : ROW_WASH;
+}
+export function Tr({ children, onClick, selected = false, }) {
+    return (_jsx(RowMark.Provider, { value: selected, children: _jsx("tr", { onClick: onClick, className: `group/row ${onClick === undefined ? "" : "cursor-pointer"}`, children: children }) }));
+}
+/**
+ * A row that opens its own detail underneath.
+ *
+ * Context: `DataTable` expands GROUPS —TanStack takes care of that— and that is
+ * not enough for the most common case in this product: a column that opens up
+ * to show its distribution. That is not a group, it is the detail of ONE row,
+ * and every view was writing it by hand with its own `colSpan` and its own
+ * chevron.
+ *
+ * The trigger is the first cell and not a column of chevrons: a whole column
+ * for a 12 px control is width that a twelve-column table needs.
+ */
+export function TrDetail({ children, detail, open, onToggle, columns, label, selected = false, }) {
+    const id = useId();
+    return (_jsx(RowMark.Provider, { value: selected, children: _jsxs(_Fragment, { children: [_jsxs("tr", { onClick: onToggle, className: "group/row cursor-pointer", children: [_jsx("td", { className: `border-b border-line py-1.5 pr-0 pl-2.5 align-middle first:rounded-l-control ${rowWash(selected)}`, children: _jsx("button", { type: "button", onClick: (e) => {
+                                    e.stopPropagation();
+                                    onToggle();
+                                }, "aria-expanded": open, "aria-controls": id, "aria-label": label, className: "inline-flex size-5 items-center justify-center rounded-pill text-muted transition-colors duration-(--duration-instant) hover:bg-ink/6 hover:text-ink focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary", children: _jsx(ChevronRight, { className: `size-(--size-icon-sm) transition-transform duration-(--duration-instant) ${open ? "rotate-90" : ""}`, strokeWidth: 2 }) }) }), children] }), _jsx("tr", { id: id, hidden: !open, children: _jsx("td", { colSpan: columns + 1, className: "border-b border-line bg-ground px-3 py-3", children: detail }) })] }) }));
+}
+/** The background of a cell, by tone. It replaces the row wash on that cell:
+ *  a hovered row and a painted cell are two signals, and stacking them reads
+ *  as a third color. */
+export const CELL_TONE = {
+    neutral: "bg-ink/6",
+    info: "bg-info/12",
+    good: "bg-good/12",
+    warn: "bg-warn/15",
+    bad: "bg-bad/12",
+    accent: "bg-accent/20",
+};
+export function Td({ children, numeric = false, align, 
+/** A CODE — an id, a hash, a key — set in the monospaced face. Off by default: a
+ *  number does not need it (a numeric cell gets tabular figures on its own), and a
+ *  name in mono reads like a log, not like a report. */
+mono = false, 
+/** Paints the whole cell. For what the eye has to find without reading: an
+ *  imputed value, one out of range, a row that changed.
+ *
+ *  Context: it is the CELL and not the text. Tinting the text says «this
+ *  number is of another kind»; tinting the cell says «look here», which is
+ *  something else — and in a table of forty rows by six columns, colored text
+ *  gets lost. */
+tone, title, }) {
+    const selected = useContext(RowMark);
+    return (_jsx("td", { title: title, className: `border-b border-line px-3 py-1.5 text-meta text-ink first:rounded-l-control last:rounded-r-control ${(align ?? (numeric ? "right" : "left")) === "right" ? "text-right" : "text-left"} ${mono ? "font-mono tabular-nums" : numeric ? "tabular-nums" : ""} ${tone === undefined ? rowWash(selected) : CELL_TONE[tone]}`, children: children }));
+}
+/** The selection checkbox, with its third state.
+ *
+ *  «some» is not an ornament: without it, the header checkbox of a table with
+ *  three of forty rows selected lies in both directions — empty says «none»
+ *  and filled says «all». */
+export function SelectBox({ checked, indeterminate = false, onChange, label, }) {
+    return (_jsx("input", { type: "checkbox", checked: checked, "aria-label": label, ref: (el) => {
+            if (el !== null)
+                el.indeterminate = indeterminate && !checked;
+        }, onChange: (e) => onChange?.(e.target.checked), onClick: (e) => e.stopPropagation(), className: "size-3.5 shrink-0 cursor-pointer accent-primary" }));
+}

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

@@ -0,0 +1,7 @@
+export { type Aggregate, type DataColumn, DataTable, type DataTableCreate, type GroupColumn, } from "./DataTable.js";
+export { EditableTable, type EditAdd, type EditBands, type EditColumn, type EditLayout, sectionLines, type StackPlace, stackPlaces, type TabTarget, tabTarget, } from "./EditableTable.js";
+export { PivotTable, type PivotTableProps, } from "./PivotTable.js";
+export { type ReportColumn, type ReportRow, type ReportRowKind, ReportTable, } from "./ReportTable.js";
+export { type RowAction, RowActions } from "./RowActions.js";
+export { type SheetColumn, SheetTable } from "./SheetTable.js";
+export { CELL_TONE, type SortDirection, type SortState, Table, Td, Th, THead, Tr, } from "./Table.js";

package/dist/primitives/table/index.js

@@ -0,0 +1,9 @@
+/* The presentation (`Table`) is ours and is used on its own; `DataTable` is the
+   wiring to TanStack for grouping and sorting. See the note in `DataTable.tsx`. */
+export { DataTable, } from "./DataTable.js";
+export { EditableTable, sectionLines, stackPlaces, tabTarget, } from "./EditableTable.js";
+export { PivotTable, } from "./PivotTable.js";
+export { ReportTable, } from "./ReportTable.js";
+export { RowActions } from "./RowActions.js";
+export { SheetTable } from "./SheetTable.js";
+export { CELL_TONE, Table, Td, Th, THead, Tr, } from "./Table.js";

package/dist/primitives/tabs/Tabs.d.ts

@@ -0,0 +1,91 @@
+import type { Tone } from "../../foundations/types.js";
+import type { LucideIcon } from "lucide-react";
+/**
+ * UNA TIRA DE PESTAÑAS. La misma en todo el sistema.
+ *
+ * Context: esto vivía adentro del encabezado del registro y se llamaba
+ * `Aspects`, así que la actividad —que necesita exactamente lo mismo— no podía
+ * usarlo: un contexto no importa de otro contexto. El resultado era una tira de
+ * pestañas de segunda mano, con el activo marcado de otra manera, en la misma
+ * pantalla que la buena.
+ *
+ * Es una primitiva porque no sabe qué está separando: las caras de un registro,
+ * las dos fuentes de una historia, o lo que venga.
+ *
+ * ── Por qué el activo es una PESTAÑA de carpeta ─────────────────────
+ *
+ * Y no un subrayado. Un subrayado dice «esto está elegido»; una pestaña que sale
+ * del borde y tapa la línea dice «esto está ABIERTO y lo de abajo es su
+ * contenido», que es la relación real. La diferencia importa cuando hay tres y
+ * el contenido de abajo no cambia de forma al cambiar de una a otra.
+ *
+ * ── El contador apagado en cero ─────────────────────────────────────
+ *
+ * Un cero se dibuja, y apagado. Esconderlo obliga a abrir la pestaña para
+ * descubrir que está vacía; pintarlo como los demás la hace parecer que tiene
+ * algo. «No hay ninguna» es información y se dice.
+ *
+ * ── El contador y la NOTIFICACIÓN son dos cosas ─────────────────────
+ *
+ * El contador dice CUÁNTAS cosas hay detrás, y es neutro: «pagos 0» es una
+ * respuesta tan válida como «pagos 5». La notificación dice que algo de ahí
+ * PIDE que lo mires —falló, cambió, llegó— y por eso tiene color y por eso un
+ * cero no se dibuja: no hay nada que pedir.
+ *
+ * Confundirlos se ve así: una pestaña con «3» al lado y nadie sabe si son tres
+ * cosas o tres problemas. Son dos marcas porque son dos preguntas.
+ */
+/**
+ * ALGO DE ESTA PESTAÑA PIDE ATENCIÓN.
+ *
+ * No es un conteo: un conteo dice cuántas cosas hay y esto dice que hay algo que
+ * mirar. Por eso tiene color, por eso no se dibuja en cero, y por eso puede
+ * convivir con el contador — «pagos 4 ⬤» es cuatro cosas, una de ellas
+ * rechazada.
+ */
+export type TabNotice = {
+    /**
+     * Qué es lo que pide atención, en la voz del producto: «3 sin leer», «la
+     * factura no se pudo enviar».
+     *
+     * Obligatorio, y por la misma razón que en `StatusDot`: un punto de color sin
+     * su palabra al lado obliga a aprender una leyenda que no está escrita en
+     * ningún lado, y no le dice nada a quien no distingue el rojo del verde. Acá
+     * la marca acelera el barrido y la palabra informa — se lee al pasar por
+     * encima y la lee un lector de pantalla.
+     */
+    label: string;
+    /** Cuántas cosas lo piden. Sin esto es un punto, que es lo que se pone cuando
+     *  llegó algo nuevo y contarlo no agrega nada. Un `0` no dibuja nada: no hay
+     *  nada que pedir. */
+    count?: number;
+    /** De qué clase: `bad` algo falló, `warn` algo avisa, `accent` o `info` algo
+     *  llegó. Sin esto, `bad` — que es el caso por el que esto existe. */
+    tone?: Tone;
+};
+export type TabItem = {
+    id: string;
+    label: string;
+    /** La marca de la pestaña. Con tres o más, el ícono es lo que se reconoce sin
+     *  leer — y en una tira angosta es lo único que sobrevive al truncado. */
+    icon?: LucideIcon;
+    /** Cuántas cosas hay detrás. `undefined` = no se cuenta; `0` se dibuja
+     *  apagado, que es distinto de no contar. */
+    count?: number;
+    /** Que algo de acá pide que lo mires. Aparte del contador: ver `TabNotice`. */
+    notice?: TabNotice;
+};
+/**
+ * The strip only: what each tab opens is drawn by whoever uses it (`Record`, `Activity`).
+ *
+ * Built on React Aria's `Tabs`, so the strip is a real tab list for the keyboard: the
+ * arrows move between tabs and select them, Home/End jump to the ends, and only the open
+ * tab is in the Tab order. The hand-written version had the roles and none of the keys.
+ */
+export declare function Tabs({ tabs, current, onSelect, label, }: {
+    tabs: readonly TabItem[];
+    current: string;
+    onSelect?: (id: string) => void;
+    /** El rótulo accesible de la tira. Sin esto, «las caras del registro». */
+    label?: string;
+}): import("react").JSX.Element;

package/dist/primitives/tabs/Tabs.js

@@ -0,0 +1,56 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useUiCopy } from "../../foundations/copy.js";
+import { Tab, TabList, Tabs as AriaTabs } from "react-aria-components";
+/* El color de la notificación. Estático y en una tabla porque Tailwind no puede
+   componer una clase con un pedazo variable: `bg-${tone}/12` no existe en la
+   hoja. */
+const NOTICE_TONE = {
+    neutral: "bg-ink/8 text-muted",
+    info: "bg-info/12 text-info",
+    good: "bg-good/12 text-good",
+    warn: "bg-warn/14 text-warn",
+    bad: "bg-bad/12 text-bad",
+    accent: "bg-accent/14 text-accent",
+};
+const NOTICE_DOT = {
+    neutral: "bg-muted",
+    info: "bg-info",
+    good: "bg-good",
+    warn: "bg-warn",
+    bad: "bg-bad",
+    accent: "bg-accent",
+};
+/**
+ * The strip only: what each tab opens is drawn by whoever uses it (`Record`, `Activity`).
+ *
+ * Built on React Aria's `Tabs`, so the strip is a real tab list for the keyboard: the
+ * arrows move between tabs and select them, Home/End jump to the ends, and only the open
+ * tab is in the Tab order. The hand-written version had the roles and none of the keys.
+ */
+export function Tabs({ tabs, current, onSelect, label, }) {
+    const copy = useUiCopy();
+    return (_jsx(AriaTabs, { selectedKey: current, onSelectionChange: (key) => onSelect?.(String(key)), children: _jsx(TabList, { "aria-label": label ?? copy.record.faces, className: "flex min-w-0 flex-wrap items-end gap-1", children: tabs.map((a) => {
+                const Icon = a.icon;
+                const empty = a.count === 0;
+                /* Un cero no pide nada, así que no se dibuja. Es la diferencia con el
+                   contador, donde «0» es una respuesta. */
+                const notice = a.notice?.count === 0 ? undefined : a.notice;
+                return (_jsx(Tab, { id: a.id, ...(notice === undefined
+                        ? {}
+                        : { "aria-label": `${a.label} · ${notice.label}` }), className: ({ isSelected }) => `inline-flex shrink-0 cursor-default items-center px-3 py-2 text-meta outline-0 transition-colors duration-(--duration-instant) focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-primary ${isSelected
+                        ? "-mb-px rounded-t-control border border-b-0 border-line-strong bg-surface font-medium text-ink"
+                        : "border border-transparent text-muted hover:text-ink"}`, children: ({ isSelected }) => (
+                    /* The `title` goes on the content and not on the tab: React Aria does not
+                       forward it, and on the content the native tooltip still covers the
+                       whole tab. */
+                    _jsxs("span", { className: "inline-flex items-center gap-1.5", ...(notice === undefined ? {} : { title: notice.label }), children: [Icon === undefined ? null : (_jsx(Icon, { className: `size-(--size-icon-sm) shrink-0 ${isSelected ? "text-ink" : "text-muted"}`, strokeWidth: 2, "aria-hidden": true })), a.label, a.count === undefined ? null : (_jsx("span", { className: `rounded-pill px-1.5 text-micro tabular-nums ${empty
+                                    ? "bg-ink/5 text-muted/70"
+                                    : isSelected
+                                        ? "bg-ink/8 text-ink"
+                                        : "bg-ink/8 text-muted"}`, children: a.count.toLocaleString(copy.locale) })), notice === undefined ? null : notice.count === undefined ? (
+                            /* Sin número, un punto. La palabra no se dibuja pero está: en el
+                               `title` y en el nombre accesible de la pestaña. */
+                            _jsx("span", { className: `size-1.5 shrink-0 rounded-pill ${NOTICE_DOT[notice.tone ?? "bad"]}`, "aria-hidden": true })) : (_jsx("span", { className: `rounded-pill px-1.5 text-micro font-medium tabular-nums ${NOTICE_TONE[notice.tone ?? "bad"]}`, "aria-hidden": true, children: notice.count.toLocaleString(copy.locale) }))] })) }, a.id));
+            }) }) }));
+}

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

@@ -0,0 +1 @@
+export { type TabItem, type TabNotice, Tabs } from "./Tabs.js";

package/dist/primitives/tabs/index.js

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

package/dist/primitives/tag/Tag.d.ts

@@ -0,0 +1,36 @@
+import type { Tone } from "../../foundations/types.js";
+import type { ReactNode } from "react";
+export type { Tone };
+/** The classes of a tone on a surface — the capsule's colors, shared with the chips of
+ *  `Tags` so a classification reads the same as a value and as a removable chip. */
+export declare function tagTone(tone: Tone, surface: "canvas" | "chrome"): string;
+export declare function Tag({ children, tone, surface, 
+/** Context: a one-word classification sometimes needs a sentence that does not
+ *  fit. The sentence goes into the `title` and not underneath, because the
+ *  line below is taken up by the row's metadata. */
+title, }: {
+    children: ReactNode;
+    tone?: Tone;
+    surface?: "canvas" | "chrome";
+    title?: string;
+}): import("react").JSX.Element;
+/** The status dot.
+ *
+ *  **It never goes alone.** A colored dot without its word next to it forces
+ *  you to learn a legend that is written down nowhere, and it says nothing to
+ *  someone who cannot tell red from green. The dot speeds up the scanning of a
+ *  column; the word is what informs. That is why `label` is mandatory and gets
+ *  drawn — if it needs to be hidden, it is hidden with `aria` and not by
+ *  deleting it.
+ *
+ *  `pulse` for what is ALIVE: a bank statement still importing. It is the only animation in
+ *  the system, and it exists because «importando» and «importado» differ by one
+ *  letter and that is far too little for a state that changes on its own. */
+export declare function StatusDot({ tone, label, pulse, surface, }: {
+    tone?: Tone;
+    /** ReactNode and not `string`: the label is visible text, and sometimes it
+     *  carries a figure or a name already formatted by whoever composes. */
+    label: ReactNode;
+    pulse?: boolean;
+    surface?: "canvas" | "chrome";
+}): import("react").JSX.Element;

package/dist/primitives/tag/Tag.js

@@ -0,0 +1,68 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/** Each tone on its two surfaces. The state does not change meaning when
+ *  crossing from the canvas to the chrome, but its value does: `good` #2F6B3C
+ *  gives 1.7:1 on #1C1A17 and the lightened one has to be used. */
+const TAG_TONE = {
+    neutral: {
+        canvas: "border border-line-strong bg-ink/5 text-ink",
+        chrome: "border border-chrome-muted/30 bg-chrome-ink/10 text-chrome-ink",
+    },
+    info: {
+        canvas: "border border-info/25 bg-info/10 text-info",
+        chrome: "border border-chrome-link/30 bg-chrome-link/15 text-chrome-link",
+    },
+    good: {
+        canvas: "border border-good/25 bg-good/10 text-good",
+        chrome: "border border-chrome-good/30 bg-chrome-good/15 text-chrome-good",
+    },
+    warn: {
+        canvas: "border border-warn/30 bg-warn/10 text-warn",
+        chrome: "border border-chrome-warn/35 bg-chrome-warn/15 text-chrome-warn",
+    },
+    bad: {
+        canvas: "border border-bad/25 bg-bad/10 text-bad",
+        chrome: "border border-chrome-bad/35 bg-chrome-bad/15 text-chrome-bad",
+    },
+    accent: {
+        // The gold as TEXT only exists on the chrome (7.39:1). On the canvas it
+        // gives 2.43:1, so there this tag falls back to ink on a gold wash: the
+        // brand is visible and the word is readable.
+        canvas: "border border-accent/40 bg-accent/18 text-ink",
+        chrome: "border border-chrome-accent/40 bg-chrome-accent/15 text-chrome-accent",
+    },
+};
+/** The classes of a tone on a surface — the capsule's colors, shared with the chips of
+ *  `Tags` so a classification reads the same as a value and as a removable chip. */
+export function tagTone(tone, surface) {
+    return TAG_TONE[tone][surface];
+}
+export function Tag({ children, tone = "neutral", surface = "canvas", 
+/** Context: a one-word classification sometimes needs a sentence that does not
+ *  fit. The sentence goes into the `title` and not underneath, because the
+ *  line below is taken up by the row's metadata. */
+title, }) {
+    return (_jsx("span", { title: title, className: `inline-flex shrink-0 items-center rounded-pill px-2 py-0.5 text-micro font-medium whitespace-nowrap ${TAG_TONE[tone][surface]}`, children: children }));
+}
+const DOT_TONE = {
+    neutral: { canvas: "bg-muted", chrome: "bg-chrome-muted" },
+    info: { canvas: "bg-info", chrome: "bg-chrome-link" },
+    good: { canvas: "bg-good", chrome: "bg-chrome-good" },
+    warn: { canvas: "bg-warn", chrome: "bg-chrome-warn" },
+    bad: { canvas: "bg-bad", chrome: "bg-chrome-bad" },
+    accent: { canvas: "bg-accent", chrome: "bg-chrome-accent" },
+};
+/** The status dot.
+ *
+ *  **It never goes alone.** A colored dot without its word next to it forces
+ *  you to learn a legend that is written down nowhere, and it says nothing to
+ *  someone who cannot tell red from green. The dot speeds up the scanning of a
+ *  column; the word is what informs. That is why `label` is mandatory and gets
+ *  drawn — if it needs to be hidden, it is hidden with `aria` and not by
+ *  deleting it.
+ *
+ *  `pulse` for what is ALIVE: a bank statement still importing. It is the only animation in
+ *  the system, and it exists because «importando» and «importado» differ by one
+ *  letter and that is far too little for a state that changes on its own. */
+export function StatusDot({ tone = "neutral", label, pulse = false, surface = "canvas", }) {
+    return (_jsxs("span", { className: "inline-flex shrink-0 items-center gap-1.5 whitespace-nowrap", children: [_jsxs("span", { className: "relative flex size-1.5 shrink-0", children: [pulse ? (_jsx("span", { className: `absolute inline-flex size-full animate-ping rounded-pill opacity-70 ${DOT_TONE[tone][surface]}` })) : null, _jsx("span", { className: `relative inline-flex size-1.5 rounded-pill ${DOT_TONE[tone][surface]}` })] }), _jsx("span", { className: `text-micro ${surface === "chrome" ? "text-chrome-muted" : "text-muted"}`, children: label })] }));
+}

package/dist/primitives/tag/Tags.d.ts

@@ -0,0 +1,57 @@
+import type { Surface, Tone } from "../../foundations/types.js";
+import type { LucideIcon } from "lucide-react";
+export type TagItem = {
+    id: string;
+    label: string;
+    /** What clarifies it without having to read it whole: which table a field
+     *  comes from, which symbol a comparison is. It goes muted and inside. */
+    note?: string;
+    icon?: LucideIcon;
+    /** Choose it. Without this the chip is a value and is not pressed. */
+    onSelect?: () => void;
+    /** Remove it, when removing it means something. It is a separate button
+     *  inside the chip — and Backspace/Delete on the focused chip — so removing
+     *  is not the same as choosing. */
+    onRemove?: () => void;
+    /** The accessible name of the × . React Aria already names it «Remove» +
+     *  the chip; this replaces the verb when the chip needs a more exact one
+     *  («quitar el filtro»). */
+    removeLabel?: string;
+    /** It is chosen right now. */
+    selected?: boolean;
+    /** It is MARKED by the keyboard of someone else — the search input that
+     *  drives a list of suggestions — which is different from chosen: marked is
+     *  «Enter takes this one», chosen is «this one is already set». */
+    active?: boolean;
+    /** What the chip MEANS, the same tones as `Tag`: a customer category «crédito vencido»
+     *  in `bad`. Neutral by default — most tags classify, they do not warn. Chosen and
+     *  marked chips keep their own paint: that state is what the strip is saying then. */
+    tone?: Tone;
+    title?: string;
+};
+export declare function Tags({ items, surface, label, labelledBy, stack, multiple, }: {
+    items: readonly TagItem[];
+    /** By default it inherits the surface that wraps it. */
+    surface?: Surface;
+    /** The accessible name of the strip. A strip of values is read as text and
+     *  does not need one; a strip that can be pressed or removed is a control,
+     *  and a control without a name is announced as «grid» and nothing else. */
+    label?: string;
+    /** The id of a visible label that names the strip — the label of the `Field` it lives
+     *  in. It wins over `label`. */
+    labelledBy?: string;
+    /**
+     * One below the other, and not on a line that wraps.
+     *
+     * The difference is not aesthetic: a strip ACCOMPANIES —they are the parts of
+     * something being written, and are read together— and a list IS CHOSEN FROM,
+     * and there the eye goes down a column and so does the keyboard. Twelve
+     * attributes wrapped in three lines are twelve things to sweep in a zigzag to
+     * find one.
+     */
+    stack?: boolean;
+    /** When chips carry `selected`, more than one can be chosen at a time. By
+     *  default the choice is ONE — a join, a grain, a period — and the strip is
+     *  announced as single-select. */
+    multiple?: boolean;
+}): import("react").JSX.Element | null;

package/dist/primitives/tag/Tags.js

@@ -0,0 +1,104 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { AriaLocale } from "../../foundations/aria.js";
+import { bySurface, useSurface } from "../../foundations/surface.js";
+import { cn, focusRing } from "../../foundations/variants.js";
+import { tagTone } from "./Tag.js";
+import { X } from "lucide-react";
+import { Button as AriaButton, Tag as AriaTag, TagGroup, TagList, } from "react-aria-components";
+export function Tags({ items, surface, label, labelledBy, stack = false, multiple = false, }) {
+    const sup = useSurface(surface);
+    if (items.length === 0)
+        return null;
+    const interactive = items.some((i) => i.onSelect !== undefined || i.onRemove !== undefined);
+    if (!interactive)
+        return _jsx(StillStrip, { items: items, surface: sup, label: label, stack: stack });
+    return (_jsx(AriaLocale, { children: _jsx(ChipGroup, { items: items, surface: sup, label: label, labelledBy: labelledBy, stack: stack, multiple: multiple }) }));
+}
+const STRIP = "flex min-w-0 flex-wrap items-center gap-1";
+const STACK = "flex min-w-0 flex-col items-stretch gap-0.5";
+/** A strip nobody presses: text in a row, a list only when it is named. */
+function StillStrip({ items, surface, label, stack, }) {
+    const listed = label !== undefined;
+    return (_jsx("span", { className: stack ? STACK : STRIP, ...(listed ? { role: "list", "aria-label": label } : {}), children: items.map((item) => (_jsx("span", { ...(listed ? { role: "listitem" } : {}), ...(item.title === undefined ? {} : { title: item.title }), className: shell({ item, surface, stack, removable: false, pressable: false }), children: _jsx(Inside, { item: item }) }, item.id))) }));
+}
+function ChipGroup({ items, surface, label, labelledBy, stack, multiple, }) {
+    const byId = new Map(items.map((item) => [item.id, item]));
+    const removable = items.some((i) => i.onRemove !== undefined);
+    /* Selection is React Aria's only when the chips SAY whether they are chosen: then the
+       strip is announced as a selectable list and each chip as selected or not. Chips that
+       only act (`onSelect` without `selected`) are actions, and pressing one does not leave
+       anything «selected» behind. */
+    const selecting = items.some((i) => i.selected !== undefined && i.onSelect !== undefined);
+    const chosen = new Set(items.filter((i) => i.selected === true).map((i) => i.id));
+    /* The choice is the consumer's: the strip reports which chip was pressed and waits for the
+       next `selected`. In a single choice the chip that ARRIVES is the one pressed; pressing
+       the chosen one again reports that one, the way a radio reports the click on itself. */
+    const onSelectionChange = (next) => {
+        if (next === "all")
+            return;
+        const keys = new Set([...next].map(String));
+        const added = [...keys].filter((k) => !chosen.has(k));
+        const dropped = [...chosen].filter((k) => !keys.has(k));
+        const pressed = multiple ? [...added, ...dropped] : added.length > 0 ? added : dropped;
+        for (const key of pressed)
+            byId.get(key)?.onSelect?.();
+    };
+    /* Backspace on a chip removes it — and only the chips that can be removed: a chip without
+       `onRemove` in a strip that has some is still a value. */
+    const onRemove = (keys) => {
+        for (const key of keys)
+            byId.get(String(key))?.onRemove?.();
+    };
+    return (_jsx(TagGroup
+    /* The name falls back to the chips themselves: «cliente: Andina, estado: vencida» says
+       what the strip holds, which is better than an anonymous grid. */
+    , { ...(labelledBy === undefined
+            ? { "aria-label": label ?? items.map((i) => i.label).join(", ") }
+            : { "aria-labelledby": labelledBy }), ...(removable ? { onRemove } : {}), ...(selecting
+            ? {
+                selectionMode: multiple ? "multiple" : "single",
+                selectedKeys: chosen,
+                onSelectionChange,
+            }
+            : {}), 
+        /* Escape belongs to whatever holds the strip — the popover it lives in closes with it —
+           and not to «clear the selection», which would erase the choice without a word. */
+        escapeKeyBehavior: "none", className: "min-w-0", children: _jsx(TagList, { items: items, className: stack ? STACK : STRIP, children: (item) => (_jsxs(AriaTag, { id: item.id, textValue: item.note === undefined ? item.label : `${item.label} ${item.note}`, ...(!selecting && item.onSelect !== undefined
+                    ? { onAction: item.onSelect }
+                    : {}), ...(item.title === undefined ? {} : { title: item.title }), className: ({ isFocusVisible, isHovered }) => cn(shell({
+                    item,
+                    surface,
+                    stack,
+                    removable: item.onRemove !== undefined,
+                    pressable: item.onSelect !== undefined,
+                }), item.onSelect !== undefined && isHovered && item.active !== true
+                    ? bySurface(surface, "border-ink/40", "border-chrome-ink/40")
+                    : "", "outline-offset-1", focusRing({ isFocusVisible })), children: [_jsx(Inside, { item: item }), item.onRemove === undefined ? null : _jsx(Remove, { item: item, surface: surface })] })) }) }));
+}
+function paint(item, surface) {
+    if (item.active === true) {
+        return bySurface(surface, "border border-primary bg-primary text-surface", "border border-chrome-link bg-chrome-link text-chrome");
+    }
+    if (item.selected === true) {
+        return bySurface(surface, "border border-accent/40 bg-accent/18 text-ink", "border border-chrome-link/40 bg-chrome-link/25 text-chrome-ink");
+    }
+    if (item.tone !== undefined && item.tone !== "neutral")
+        return tagTone(item.tone, surface);
+    return bySurface(surface, "border border-line-strong bg-ink/5 text-ink", "border border-chrome-muted/30 bg-chrome-ink/12 text-chrome-ink");
+}
+/* Stacked, each chip takes its whole line: a column of chips of different widths does not
+   read as a list, it reads as a mess — and the blank on the right is what lets it be
+   pressed without aiming. */
+function shell({ item, surface, stack, removable, pressable, }) {
+    return cn(stack ? "flex w-full justify-start" : "inline-flex shrink-0", "min-w-0 items-center gap-1 rounded-pill py-0.5 text-micro transition-colors duration-(--duration-instant)", paint(item, surface), removable ? "pr-0.5 pl-2" : "px-2", pressable ? "cursor-pointer" : "cursor-default");
+}
+function Inside({ item }) {
+    const Icon = item.icon;
+    return (_jsxs(_Fragment, { children: [Icon === undefined ? null : (_jsx(Icon, { className: "size-3 shrink-0 opacity-70", strokeWidth: 2, "aria-hidden": true })), _jsx("span", { className: "min-w-0 truncate", children: item.label }), item.note === undefined ? null : (_jsxs("span", { className: "shrink-0 opacity-60", children: ["\u00B7 ", item.note] }))] }));
+}
+/* The × is React Aria's `remove` slot: it removes THIS chip and never presses it, so
+   removing a pressable chip does not also choose it. */
+function Remove({ item, surface }) {
+    return (_jsx(AriaButton, { slot: "remove", ...(item.removeLabel === undefined ? {} : { "aria-label": item.removeLabel }), className: ({ isFocusVisible }) => cn("inline-flex size-4 shrink-0 cursor-default items-center justify-center rounded-pill transition-colors duration-(--duration-instant)", bySurface(surface, "hover:bg-ink/15 pressed:bg-ink/20", "hover:bg-chrome-ink/25 pressed:bg-chrome-ink/30"), focusRing({ isFocusVisible })), children: _jsx(X, { className: "size-3", strokeWidth: 2.5, "aria-hidden": true }) }));
+}

package/dist/primitives/tag/TagsField.d.ts

@@ -0,0 +1,35 @@
+import { type FormMode } from "../field/mode.js";
+import { type TagOption } from "./choices.js";
+export type TagsFieldProps = {
+    /** The ids of the chosen tags, in the order they were added. */
+    value: readonly string[];
+    onChange?: (next: string[]) => void;
+    /** Every tag that can be put on the record — chosen ones included, for their labels. */
+    options: readonly TagOption[];
+    /**
+     * Create a tag from the typed text and return its new id (or a promise of it); the field
+     * then adds it. Without it there is no «create» row — the catalog is closed.
+     *
+     * Context: the id is returned and not invented here because the record is created by the
+     * backend (Odoo's `name_create`); the consumer also appends the new option to `options`.
+     */
+    onCreate?: (label: string) => string | Promise<string>;
+    /** The input's placeholder while no tag is chosen. Defaults to the copy table's «Add…». */
+    placeholder?: string;
+    disabled?: boolean;
+    id?: string;
+    describedBy?: string;
+    invalid?: boolean;
+    /** The name of the control when it is NOT inside a `Field` — a cell of an editable table.
+     *  Inside a field, the field's label names it. */
+    "aria-label"?: string;
+    /** Forces the mode. By default it inherits the form's: in read mode it draws `Tags`. */
+    mode?: FormMode;
+};
+/**
+ * A many2many as removable chips plus an inline combobox that adds one more.
+ *
+ * Works inside `<Field label=…>`: the field's label names both the input and the strip of
+ * chips, and its hint and error describe the input. In read mode it is `Tags`.
+ */
+export declare function TagsField({ mode, ...props }: TagsFieldProps): import("react").JSX.Element;