@sincpro/web-ui 0.0.0-stage → 0.1.0

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`, `Chatter`).
+ *
+ * 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,32 @@
+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;
+    /** 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;

package/dist/primitives/tag/TagsField.js

@@ -0,0 +1,182 @@
+"use client";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { AriaLocale } from "../../foundations/aria.js";
+import { fillCopy, useUiCopy } from "../../foundations/copy.js";
+import { cn } from "../../foundations/variants.js";
+import { fieldGroupStyles, listOptionStyles } from "../field/aria.js";
+import { useFieldIds } from "../field/context.js";
+import { ReadValue } from "../field/Field.js";
+import { useFormMode } from "../field/mode.js";
+import { Popover } from "../overlay/Popover.js";
+import { tagChoices, withoutTag, withTag, } from "./choices.js";
+import { Tags } from "./Tags.js";
+import { Plus } from "lucide-react";
+import { useContext, useEffect, useMemo, useRef, useState, } from "react";
+import { ComboBox as AriaComboBox, ComboBoxStateContext, Group, Input, ListBox, ListBoxItem, useFilter, useLocale, } from "react-aria-components";
+/* ==================================================================== *
+ *  TAGSFIELD — a many2many written as chips: the categories of a customer, the labels of an
+ *  invoice.
+ *
+ *  Context: the read form of this value is `Tags` — a strip of chips. Editing it is the same
+ *  strip plus ONE way in: the chips stay where they are read (removable with their × or
+ *  Backspace), and an input right after the last one adds the next. A separate «add tag»
+ *  button that opens a list would be two controls for one value, and a multi-select with
+ *  checkboxes hides what is chosen behind a closed field — the opposite of a many2many,
+ *  whose whole point is that the categories are seen.
+ *
+ *  ── React Aria's tag group and React Aria's combobox, side by side ──
+ *
+ *  The chips are `Tags` (React Aria's `TagGroup`): one tab stop, arrows between chips,
+ *  Backspace or Delete removes the focused one. The input is React Aria's `ComboBox`: typing
+ *  filters in the copy table's locale («exportacion» finds «exportación»), arrows walk the
+ *  list, Enter adds. Two additions are ours, both what a person who types tags expects:
+ *  while typing, the FIRST match is marked, so Enter adds it (typing «may» and Enter is the
+ *  whole gesture, and the row it takes is the tinted one); and Backspace in the empty input
+ *  removes the last chip.
+ *
+ *  The chosen tags never come back as options — choosing «mayorista» twice is a duplicate,
+ *  not a choice. «Create «…»» is offered only when `onCreate` is given and the text names no
+ *  existing tag (see `tagChoices`).
+ *
+ *  The value is a plain `string[]` of ids, in the order they were added — what the backend
+ *  stores in a many2many, never React Aria's `Selection`.
+ * ==================================================================== */
+/** The key of the «create» row. Not an id: it cannot collide with one. */
+const CREATE = "\u0000create";
+/** The chosen tags as chips, in the order of `value`. An id missing from `options` is still
+ *  drawn (as itself): hiding it would hide data the record has. */
+function chosenOptions(options, value) {
+    const byId = new Map(options.map((option) => [option.value, option]));
+    return value.map((id) => byId.get(id) ?? { value: id, label: id });
+}
+/**
+ * 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 function TagsField({ mode, ...props }) {
+    if (useFormMode(mode) === "read") {
+        const chosen = chosenOptions(props.options, props.value);
+        if (chosen.length === 0)
+            return _jsx(ReadValue, { value: null });
+        return (_jsx("span", { className: "flex min-h-(--size-control-md) items-center", children: _jsx(Tags, { items: chosen.map((option) => ({
+                    id: option.value,
+                    label: option.label,
+                    ...(option.tone === undefined ? {} : { tone: option.tone }),
+                })) }) }));
+    }
+    /* The filter reads the locale from React Aria's context, so the box that provides it has
+       to be ABOVE the component that asks for it. */
+    return (_jsx(AriaLocale, { children: _jsx(EditableTagsField, { ...props }) }));
+}
+function EditableTagsField({ value, onChange, options, onCreate, placeholder, disabled = false, id: ownId, describedBy: ownDescribedBy, invalid: ownInvalid, }) {
+    const { id, labelledBy, describedBy, invalid } = useFieldIds({
+        id: ownId,
+        describedBy: ownDescribedBy,
+        invalid: ownInvalid,
+    });
+    const copy = useUiCopy();
+    const { contains } = useFilter({ sensitivity: "base" });
+    const { locale } = useLocale();
+    const collator = useMemo(() => new Intl.Collator(locale, { sensitivity: "base", usage: "search" }), [locale]);
+    const [text, setText] = useState("");
+    const boxRef = useRef(null);
+    const [width, setWidth] = useState(null);
+    const inputRef = useRef(null);
+    /* The value after an `await` is the one of THEN, not the one of the render that started
+       creating: a tag removed meanwhile must not come back. */
+    const latest = useRef(value);
+    latest.current = value;
+    const { available, create } = tagChoices(options, value, text, { contains, same: (a, b) => collator.compare(a.trim(), b) === 0 }, onCreate !== undefined && !disabled);
+    const listed = create === null
+        ? available
+        : [
+            ...available,
+            { value: CREATE, label: fillCopy(copy.inlineEdit.createTag, { name: create }) },
+        ];
+    const commit = (key) => {
+        if (key === null)
+            return;
+        const chosen = String(key);
+        setText("");
+        if (chosen !== CREATE) {
+            onChange?.(withTag(latest.current, chosen));
+            return;
+        }
+        if (create === null || onCreate === undefined)
+            return;
+        void Promise.resolve(onCreate(create)).then((created) => onChange?.(withTag(latest.current, created)));
+    };
+    const remove = (tagId) => {
+        const next = withoutTag(value, tagId);
+        onChange?.(next);
+        /* The last chip leaves and takes its strip with it: the focus goes to the input instead
+           of falling to the page. */
+        if (next.length === 0)
+            inputRef.current?.focus();
+    };
+    const chips = chosenOptions(options, value).map((option) => ({
+        id: option.value,
+        label: option.label,
+        ...(option.tone === undefined ? {} : { tone: option.tone }),
+        ...(disabled ? {} : { onRemove: () => remove(option.value) }),
+    }));
+    return (
+    /* The chips sit beside the combobox, not inside it: React Aria builds the combobox's
+       list from what it holds, and a tag group in there is read as part of that list. The
+       popover is anchored to the whole box and as wide as it — the list continues the field,
+       and the input alone is a sliver after the last chip. */
+    _jsxs(Group, { ref: boxRef, isDisabled: disabled, isInvalid: invalid, className: (state) => fieldGroupStyles({
+            ...state,
+            /* The box grows with the chips: five categories wrap to a second line instead of
+               scrolling out of sight. */
+            className: "h-auto min-h-(--size-control-md) flex-wrap gap-1 py-1 pl-1.5",
+        }), children: [chips.length === 0 ? null : (_jsx(Tags, { items: chips, ...(labelledBy === undefined ? {} : { labelledBy }) })), _jsxs(AriaComboBox, { id: id, "aria-labelledby": labelledBy, "aria-describedby": describedBy, items: listed, selectedKey: null, onSelectionChange: commit, inputValue: text, onInputChange: setText, 
+                /* Arriving at the field shows what can still be added, the way a many2one opens its
+                   list on focus. With every tag chosen and no text there is nothing to show, and the
+                   list stays closed. */
+                menuTrigger: "focus", onOpenChange: (isOpen) => {
+                    if (isOpen)
+                        setWidth(boxRef.current?.getBoundingClientRect().width ?? null);
+                }, isInvalid: invalid, isDisabled: disabled, className: "flex min-w-24 flex-1", children: [_jsx(TagInput, { inputRef: inputRef, placeholder: value.length === 0 ? (placeholder ?? copy.inlineEdit.addTag) : undefined, firstKey: listed[0]?.value ?? null, onTake: commit, onBackspace: () => {
+                            const last = value.at(-1);
+                            if (last !== undefined)
+                                onChange?.(withoutTag(value, last));
+                        }, empty: text === "" }), _jsx(Popover, { triggerRef: boxRef, ...(width === null
+                            ? {}
+                            : { style: { "--trigger-width": `${width}px` } }), placement: "bottom start", className: "w-(--trigger-width)", children: _jsx(ListBox, { items: listed, className: "max-h-[inherit] overflow-auto p-1 outline-0", children: (item) => (_jsx(ListBoxItem, { id: item.value, textValue: item.label, className: (state) => cn(listOptionStyles(state), item.value === CREATE ? "text-primary" : ""), children: item.value === CREATE ? (_jsxs(_Fragment, { children: [_jsx(Plus, { "aria-hidden": true, className: "size-(--size-icon-sm) shrink-0", strokeWidth: 2 }), _jsx("span", { className: "truncate font-medium", children: item.label })] })) : (_jsx("span", { className: "truncate", children: item.label })) })) }) })] })] }));
+}
+/** The input after the chips. It reads the combobox's state to know whether the keyboard
+ *  marked an option — Enter with nothing marked takes the first match. */
+function TagInput({ inputRef, placeholder, firstKey, onTake, onBackspace, empty, }) {
+    const state = useContext(ComboBoxStateContext);
+    /* While typing, the first match is MARKED — so the row Enter is going to take is the row
+       the eye sees tinted, not a guess. Only when the keyboard has not marked another one. */
+    const open = state?.isOpen === true;
+    useEffect(() => {
+        if (state === null || !open || empty || firstKey === null)
+            return;
+        const focused = state.selectionManager.focusedKey;
+        if (focused === null || state.collection.getItem(focused) === null) {
+            state.selectionManager.setFocusedKey(firstKey);
+        }
+    }, [state, open, empty, firstKey]);
+    const onKeyDown = (event) => {
+        if (event.key === "Backspace" && empty) {
+            onBackspace();
+            return;
+        }
+        if (event.key !== "Enter" || empty || firstKey === null)
+            return;
+        if (state?.selectionManager.focusedKey != null)
+            return;
+        /* Stopped in the capture phase, so React Aria's own Enter — «commit nothing, reset the
+           text» — does not run after ours. */
+        event.preventDefault();
+        event.stopPropagation();
+        state?.close();
+        onTake(firstKey);
+    };
+    return (_jsx(Input, { ref: inputRef, placeholder: placeholder, onKeyDownCapture: onKeyDown, className: "h-(--size-control-sm) min-w-0 flex-1 bg-transparent px-1 text-meta text-ink outline-0 placeholder:text-muted disabled:cursor-not-allowed" }));
+}

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

@@ -0,0 +1,38 @@
+import type { Tone } from "../../foundations/types.js";
+/**
+ * One tag that can be put on a record: what is stored (`value`, the id) and what is read
+ * (`label`), plus the tone it MEANS when it means something.
+ *
+ * Context: the same plain shape as `ChoiceOption` — the categories of a customer and the
+ * labels of an invoice come from data, and the ids go back to the backend as they came.
+ */
+export interface TagOption {
+    value: string;
+    label: string;
+    /** Neutral by default: «mayorista» classifies, it does not warn. */
+    tone?: Tone;
+}
+/** How the typed text is compared — the locale's, handed in by the component. */
+export type TagMatch = {
+    /** `label` contains `query`, ignoring case and accents. */
+    contains: (label: string, query: string) => boolean;
+    /** `a` and `b` are the same word, ignoring case and accents. */
+    same: (a: string, b: string) => boolean;
+};
+/**
+ * What the inline input offers for a given text.
+ *
+ * Context: pure and outside the component because it is the contract of the field — the
+ * chosen ones never come back as options (choosing «mayorista» twice is a duplicate, not a
+ * choice), the typed text filters, and «create» is offered only when the text names NO
+ * existing tag, chosen or not: creating «Mayorista» next to «mayorista» is how a catalog
+ * ends up with both.
+ */
+export declare function tagChoices(options: readonly TagOption[], value: readonly string[], text: string, match: TagMatch, creatable: boolean): {
+    available: TagOption[];
+    create: string | null;
+};
+/** The value with one more id at the end; the same value when it is already there. */
+export declare function withTag(value: readonly string[], id: string): string[];
+/** The value without that id. */
+export declare function withoutTag(value: readonly string[], id: string): string[];

package/dist/primitives/tag/choices.js

@@ -0,0 +1,26 @@
+/**
+ * What the inline input offers for a given text.
+ *
+ * Context: pure and outside the component because it is the contract of the field — the
+ * chosen ones never come back as options (choosing «mayorista» twice is a duplicate, not a
+ * choice), the typed text filters, and «create» is offered only when the text names NO
+ * existing tag, chosen or not: creating «Mayorista» next to «mayorista» is how a catalog
+ * ends up with both.
+ */
+export function tagChoices(options, value, text, match, creatable) {
+    const chosen = new Set(value);
+    const query = text.trim();
+    const available = options.filter((option) => !chosen.has(option.value) && (query === "" || match.contains(option.label, query)));
+    const create = creatable && query !== "" && !options.some((option) => match.same(option.label, query))
+        ? query
+        : null;
+    return { available, create };
+}
+/** The value with one more id at the end; the same value when it is already there. */
+export function withTag(value, id) {
+    return value.includes(id) ? [...value] : [...value, id];
+}
+/** The value without that id. */
+export function withoutTag(value, id) {
+    return value.filter((one) => one !== id);
+}

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

@@ -0,0 +1,4 @@
+export { StatusDot, Tag } from "./Tag.js";
+export { type TagItem, Tags } from "./Tags.js";
+export { type TagOption } from "./choices.js";
+export { TagsField, type TagsFieldProps } from "./TagsField.js";

package/dist/primitives/tag/index.js

@@ -0,0 +1,8 @@
+/* Saying a state without writing a sentence: the capsule and the dot. */
+export { StatusDot, Tag } from "./Tag.js";
+/* La tira de fichas: la misma en la barra, en el desplegable y en cualquier
+   lugar donde se dibuje una lista de palabras cortas. */
+export { Tags } from "./Tags.js";
+/* El many2many: las fichas elegidas más una entrada que agrega la siguiente. */
+export {} from "./choices.js";
+export { TagsField } from "./TagsField.js";

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

@@ -0,0 +1,13 @@
+import type { ReactNode } from "react";
+export declare function Toolbar({ label, children, orientation, }: {
+    /** What the group is, read aloud on entering it: «Acciones de las líneas». A screen with
+     *  two toolbars is two unnamed groups otherwise. */
+    label: string;
+    children: ReactNode;
+    orientation?: "horizontal" | "vertical";
+}): import("react").JSX.Element;
+/** A hairline between two groups of a `Toolbar`, across its direction. */
+export declare function ToolbarSeparator({ orientation, }: {
+    /** `vertical` (the default) splits a horizontal toolbar; `horizontal`, a vertical one. */
+    orientation?: "horizontal" | "vertical";
+}): import("react").JSX.Element;