@sincpro/web-ui 0.1.0 → 1.0.0

package/dist/foundations/copy.js

@@ -10,6 +10,9 @@ export const ENGLISH_COPY = {
         sheet: "Sheet",
         report: "Report",
         pivot: "Pivot",
+        calendar: "Calendar",
+        gantt: "Gantt",
+        timeline: "Planning",
         chart: "Chart",
         group: "How to view",
     },
@@ -31,6 +34,7 @@ export const ENGLISH_COPY = {
         named: "Select {name}",
         more: "More actions",
         moreOf: "More actions for {name}",
+        allMatching: "Select all {count} that match",
     },
     pager: {
         size: "Rows per page",
@@ -49,6 +53,12 @@ export const ENGLISH_COPY = {
         saving: "Saving…",
         discard: "Discard",
         failed: "failed",
+        notices: "Notices about this record",
+        noticeOne: "{count} notice",
+        noticeMany: "{count} notices",
+        blocking: "What is wrong with this record",
+        created: "Created by {by} · {at}",
+        updated: "Last changed by {by} · {at}",
     },
     shell: {
         modules: "All modules",
@@ -61,7 +71,6 @@ export const ENGLISH_COPY = {
         closePreview: "Close preview",
         account: "My account",
         openAsPanel: "Open as panel",
-        commandPalette: "Command palette",
     },
     field: {
         drop: "Drop a file here, or choose one.",
@@ -77,6 +86,7 @@ export const ENGLISH_COPY = {
     },
     choice: {
         noResults: "No results",
+        search: "Search",
     },
     search: {
         tools: "Filter, group and favorites",
@@ -89,6 +99,10 @@ export const ENGLISH_COPY = {
         or: "or",
         groupedBy: "grouped by",
         narrowedBy: "showing",
+        moreFacets: "+{count}",
+        fewerFacets: "show less",
+        removeGrouping: "Stop grouping",
+        clearAll: "Clear every filter and grouping",
         switchJoin: "All of them, or any of them",
         joins: { all: "all", any: "any", none: "none" },
         notWord: "not",
@@ -119,6 +133,7 @@ export const ENGLISH_COPY = {
         retry: "Try again",
     },
     table: {
+        add: "Add",
         row: "row",
         rows: "rows",
         yes: "yes",
@@ -134,8 +149,12 @@ export const ENGLISH_COPY = {
     list: {
         empty: "There is nothing here yet.",
         emptyFiltered: "Nothing matches what is on.",
+        countOne: "1 record",
+        count: "{count} records",
+        peek: "Quick look",
+        open: "Open",
     },
-    chatter: {
+    activity: {
         bySystem: "the system",
         more: "show the whole error",
         less: "show less",
@@ -146,13 +165,26 @@ export const ENGLISH_COPY = {
         recipients: "Who receives it",
         noRecipients: "nobody to send it to yet",
         messagePlaceholder: "Write a message…",
-        empty: "Nothing has happened here yet.",
-        history: "history",
+        emptyMessages: "Nobody has written here yet.",
+        emptyEvents: "Nothing has been logged yet.",
+        title: "Activity",
         open: "Open the {label}",
         fold: "Fold the {label}",
-        tabAll: "all",
-        tabMessages: "messages",
-        tabEvents: "events",
+        alerts: "Notices",
+        conversation: "Conversation",
+        history: "History",
+        viewTimeline: "Timeline",
+        moreAlerts: "Show {count} more",
+        fewerAlerts: "Show fewer",
+        filters: "Show",
+        filterAll: "All",
+        filterConversation: "Messages",
+        filterNotes: "Notes",
+        filterEvents: "Events",
+        today: "Today",
+        yesterday: "Yesterday",
+        emptyFilter: "Nothing of this kind yet.",
+        goTo: "Go to {owner}",
         send: "Send",
         sending: "Sending…",
         cancel: "Cancel",
@@ -161,6 +193,8 @@ export const ENGLISH_COPY = {
         label: "Copy",
         done: "Copied",
         failed: "Could not copy",
+        field: "Copy «{label}»",
+        empty: "Nothing to copy",
     },
     sorting: {
         label: "Sort",
@@ -217,8 +251,11 @@ export const ENGLISH_COPY = {
     },
     editable: {
         add: "Add a line",
+        addRow: "Add a row",
         empty: "No lines yet.",
         remove: "Remove the line",
+        reorder: "Move the row",
+        reorderHint: "Drag it, or Alt + ↑ / ↓",
     },
     picker: {
         placeholder: "pick one…",
@@ -228,7 +265,19 @@ export const ENGLISH_COPY = {
         more: "{count} more",
         refine: "— narrow the filter",
         open: "Open",
-        browseAll: "see all…",
+        browseAll: "Search more…",
+        create: "Create «{name}»",
+        createAndEdit: "Create and edit…",
+        matched: "matches",
+        loadingMore: "loading more…",
+        openIn: {
+            modal: "Open in a modal",
+            peek: "Quick look",
+            page: "Open as the page",
+            side: "Open beside",
+            window: "Open in a window",
+        },
+        openMore: "Open in…",
     },
     cell: {
         missing: "missing",
@@ -307,14 +356,20 @@ export const ENGLISH_COPY = {
         total: "Total",
         rows: "rows",
         open: "Open {row} × {column}",
+        measures: "Measures",
+        rowsAxis: "Rows",
+        columnsAxis: "Columns",
+        addLevel: "Add to {axis}",
+        removeLevel: "Remove {level}",
+        swap: "Swap rows and columns",
+        download: "Download",
+        fromSearch: "from the search's grouping",
     },
     person: {
         unassigned: "unassigned",
-        contact: "Contact",
         email: "Write an email",
         call: "Call",
         whatsapp: "WhatsApp",
-        open: "Open profile",
     },
     lines: {
         add: "Add a line",
@@ -323,6 +378,10 @@ export const ENGLISH_COPY = {
         remove: "Remove line",
         empty: "No lines yet.",
         done: "Done",
+        addSection: "Add a section",
+        addNote: "Add a note",
+        section: "Section",
+        note: "Note",
     },
     lineItems: {
         one: "{count} line",
@@ -334,6 +393,50 @@ export const ENGLISH_COPY = {
         undo: "Undo",
         table: "Lines",
     },
+    priority: {
+        label: "Priority",
+        level: "{value} of {max}",
+        none: "no priority",
+    },
+    board: {
+        emptyLane: "Nothing in this stage.",
+        moveHint: "Drag it, or Alt + ← / → to move it to another stage",
+        moved: "{name} moved to {column}",
+        quickCreate: "Quick create in {column}",
+        quickPlaceholder: "Name… (Enter creates)",
+        fold: "Fold {column}",
+        unfold: "Unfold {column}",
+        addColumn: "Add a stage",
+        addColumnPlaceholder: "Stage name… (Enter adds)",
+    },
+    timeline: {
+        prev: "Previous",
+        next: "Next",
+        today: "Today",
+        goTo: "Go to a date",
+        zoom: "Zoom",
+        zoomIn: "Zoom in",
+        zoomOut: "Zoom out",
+        fullscreen: "Full screen",
+        exitFullscreen: "Exit full screen",
+        scale: "Scale",
+        scales: { day: "Day", week: "Week", month: "Month", year: "Year" },
+        moveHint: "Drag it to move it, its right edge to stretch it; Alt + arrows from the keyboard",
+        moved: "{name}: {range}",
+        create: "Create in {row} · {at}",
+    },
+    kanbanState: {
+        label: "State",
+        normal: "In progress",
+        done: "Ready for the next stage",
+        blocked: "Blocked",
+    },
+    activityState: {
+        none: "No activities",
+        overdue: "Overdue",
+        today: "Due today",
+        planned: "Planned",
+    },
     relation: {
         open: "Open",
         none: "Not set",
@@ -341,6 +444,15 @@ export const ENGLISH_COPY = {
     relationCard: {
         summary: "Summary of {name}",
     },
+    totals: {
+        less: "less",
+        details: "Details: {label}",
+        open: "Open",
+        unlink: "Unlink",
+        credits: "Outstanding credits",
+        apply: "Apply",
+        applyCredit: "Apply {label}",
+    },
     inlineEdit: {
         addTag: "Add…",
         createTag: "Create «{name}»",
@@ -352,6 +464,9 @@ export const ENGLISH_COPY = {
         light: "Light",
         dark: "Dark",
     },
+    tree: {
+        empty: "Nothing here yet.",
+    },
     assist: {
         assistant: "Assistant",
         suggests: "suggests",
@@ -430,7 +545,7 @@ export function mergeCopy(over) {
         ops: { ...ENGLISH_COPY.ops, ...over.ops },
         sorting: { ...ENGLISH_COPY.sorting, ...over.sorting },
         copyable: { ...ENGLISH_COPY.copyable, ...over.copyable },
-        chatter: { ...ENGLISH_COPY.chatter, ...over.chatter },
+        activity: { ...ENGLISH_COPY.activity, ...over.activity },
         editable: { ...ENGLISH_COPY.editable, ...over.editable },
         picker: { ...ENGLISH_COPY.picker, ...over.picker },
         cell: { ...ENGLISH_COPY.cell, ...over.cell },
@@ -442,10 +557,17 @@ export function mergeCopy(over) {
         person: { ...ENGLISH_COPY.person, ...over.person },
         lines: { ...ENGLISH_COPY.lines, ...over.lines },
         lineItems: { ...ENGLISH_COPY.lineItems, ...over.lineItems },
+        priority: { ...ENGLISH_COPY.priority, ...over.priority },
+        board: { ...ENGLISH_COPY.board, ...over.board },
+        kanbanState: { ...ENGLISH_COPY.kanbanState, ...over.kanbanState },
+        timeline: { ...ENGLISH_COPY.timeline, ...over.timeline },
+        activityState: { ...ENGLISH_COPY.activityState, ...over.activityState },
         relation: { ...ENGLISH_COPY.relation, ...over.relation },
         relationCard: { ...ENGLISH_COPY.relationCard, ...over.relationCard },
+        totals: { ...ENGLISH_COPY.totals, ...over.totals },
         inlineEdit: { ...ENGLISH_COPY.inlineEdit, ...over.inlineEdit },
         theme: { ...ENGLISH_COPY.theme, ...over.theme },
+        tree: { ...ENGLISH_COPY.tree, ...over.tree },
         assist: { ...ENGLISH_COPY.assist, ...over.assist },
     };
 }

package/dist/foundations/index.d.ts

@@ -2,7 +2,7 @@ export { currentCopy, currentCopyLocale, ENGLISH_COPY, fillCopy, installCopy, me
 export { byDensity, type Density, DensityProvider, useDensity, } from "./density.js";
 export { bySurface, SurfaceProvider, useSurface } from "./surface.js";
 export { applyTheme, isTheme, type ResolvedTheme, resolveTheme, type Theme, THEME_ATTRIBUTE, ThemeProvider, type ThemeProviderProps, THEMES, useTheme, } from "./theme.js";
-export type { Size, Surface, Tone } from "./types.js";
+export type { OpenTarget, Size, Surface, Tone } from "./types.js";
 /** El castellano del sistema, para quien lo quiera instalar entero. */
 export { SPANISH_COPY } from "./copy.es.js";
 export { flatten, loose, pick, pickAll, propsOf, slot, slotOf, type Slotted, } from "./slots.js";

package/dist/foundations/match.d.ts

@@ -0,0 +1,23 @@
+/**
+ * Where a typed search falls inside a text — «tería» inside «Ferretería» — so a list can SHOW
+ * why each option is there.
+ *
+ * Context: a picker filters accent- and case-insensitively (React Aria's `useFilter`, base
+ * sensitivity): «ferreteria» finds «Ferretería». Highlighting has to agree with it, or the
+ * option is listed with nothing marked and reads as a wrong match. So the text is folded the
+ * same way — decomposed, marks dropped, lower-cased in the locale — while remembering which
+ * original character each folded one came from, and the spans are cut on the ORIGINAL text:
+ * what is drawn keeps its accents.
+ */
+export type MatchSpan = {
+    text: string;
+    hit: boolean;
+};
+/** The text cut into what matched the query and what did not, in order. An empty query (or
+ *  one that does not occur) is one span with no hit. */
+export declare function matchSpans(text: string, query: string, locale?: string): MatchSpan[];
+/** Whether the query occurs in the text, folded the same way as `matchSpans`. */
+export declare function matches(text: string, query: string, locale?: string): boolean;
+/** The word of a hidden search text where the query fell — the code «CEM-IP30» out of
+ *  «CEM-IP30 7771234000017» — to say why an option whose name does not match is listed. */
+export declare function matchedWord(text: string, query: string, locale?: string): string | null;

package/dist/foundations/match.js

@@ -0,0 +1,63 @@
+/**
+ * Where a typed search falls inside a text — «tería» inside «Ferretería» — so a list can SHOW
+ * why each option is there.
+ *
+ * Context: a picker filters accent- and case-insensitively (React Aria's `useFilter`, base
+ * sensitivity): «ferreteria» finds «Ferretería». Highlighting has to agree with it, or the
+ * option is listed with nothing marked and reads as a wrong match. So the text is folded the
+ * same way — decomposed, marks dropped, lower-cased in the locale — while remembering which
+ * original character each folded one came from, and the spans are cut on the ORIGINAL text:
+ * what is drawn keeps its accents.
+ */
+function fold(char, locale) {
+    return char.normalize("NFD").replace(/\p{M}/gu, "").toLocaleLowerCase(locale);
+}
+/** The text cut into what matched the query and what did not, in order. An empty query (or
+ *  one that does not occur) is one span with no hit. */
+export function matchSpans(text, query, locale) {
+    const wanted = [...query.trim()].map((char) => fold(char, locale)).join("");
+    if (wanted === "")
+        return [{ text, hit: false }];
+    /* `origin[i]` is where, in the original text, folded character i came from. One more entry
+       at the end maps «the end of the folded text» to the end of the original. */
+    let folded = "";
+    const origin = [];
+    let at = 0;
+    for (const char of text) {
+        const piece = fold(char, locale);
+        for (let k = 0; k < piece.length; k += 1)
+            origin.push(at);
+        folded += piece;
+        at += char.length;
+    }
+    origin.push(text.length);
+    const spans = [];
+    let cursor = 0;
+    let found = folded.indexOf(wanted);
+    while (found !== -1) {
+        const start = origin[found] ?? text.length;
+        const end = origin[found + wanted.length] ?? text.length;
+        if (start > cursor)
+            spans.push({ text: text.slice(cursor, start), hit: false });
+        if (end > start)
+            spans.push({ text: text.slice(start, end), hit: true });
+        cursor = Math.max(cursor, end);
+        found = folded.indexOf(wanted, found + wanted.length);
+    }
+    if (cursor < text.length)
+        spans.push({ text: text.slice(cursor), hit: false });
+    return spans.length === 0 ? [{ text, hit: false }] : spans;
+}
+/** Whether the query occurs in the text, folded the same way as `matchSpans`. */
+export function matches(text, query, locale) {
+    return matchSpans(text, query, locale).some((span) => span.hit);
+}
+/** The word of a hidden search text where the query fell — the code «CEM-IP30» out of
+ *  «CEM-IP30 7771234000017» — to say why an option whose name does not match is listed. */
+export function matchedWord(text, query, locale) {
+    for (const word of text.split(/\s+/)) {
+        if (word !== "" && matches(word, query, locale))
+            return word;
+    }
+    return null;
+}

package/dist/foundations/slots.d.ts

@@ -52,7 +52,7 @@ export declare function slotOf<Name extends string>(node: ReactNode): Name | und
  * medio del árbol —lo que escribe cualquiera que ponga dos ranuras bajo un
  * condicional— escondería las ranuras que tiene adentro.
  */
-export declare function flatten(children: ReactNode): ReactNode[];
+export declare function flatten(children: ReactNode, prefix?: string): ReactNode[];
 /** La primera ranura de ese nombre. */
 export declare function pick<Name extends string>(nodes: readonly ReactNode[], name: Name): ReactNode | undefined;
 /** Todas las ranuras de ese nombre, en el orden en que se escribieron. Lo usa el

package/dist/foundations/slots.js

@@ -1,4 +1,4 @@
-import { Children, Fragment, isValidElement } from "react";
+import { Children, cloneElement, Fragment, isValidElement } from "react";
 /**
  * Marca un componente como ranura y lo devuelve.
  *
@@ -26,11 +26,16 @@ export function slotOf(node) {
  * medio del árbol —lo que escribe cualquiera que ponga dos ranuras bajo un
  * condicional— escondería las ranuras que tiene adentro.
  */
-export function flatten(children) {
+export function flatten(children, prefix = "") {
     const out = [];
     for (const child of Children.toArray(children)) {
         if (isValidElement(child) && child.type === Fragment) {
-            out.push(...flatten(child.props.children));
+            /* The fragment's children are keyed from zero again («.0», «.1»…): without the
+               fragment's own key in front they collide with their new siblings. */
+            out.push(...flatten(child.props.children, `${prefix}${String(child.key)}/`));
+        }
+        else if (prefix !== "" && isValidElement(child)) {
+            out.push(cloneElement(child, { key: `${prefix}${String(child.key)}` }));
         }
         else {
             out.push(child);

package/dist/foundations/types.d.ts

@@ -21,3 +21,10 @@ export type Tone = "neutral" | "info" | "good" | "warn" | "bad" | "accent";
  *  Three and not five: a fourth intermediate step gets picked out of habit and
  *  stops meaning a place. */
 export type Size = "sm" | "md" | "lg";
+/**
+ * WHERE a record opens, in the words a workspace (the composer) uses: the page (with its crumb
+ * back), a modal over the surface that asked, a peek (a drawer, reading without leaving), a
+ * side panel, a floating window; web-ui only SAYS which one the person chose — opening is the
+ * app's (`api.open(ref, { to })`). See the guide «Cómo abrimos las cosas».
+ */
+export type OpenTarget = "modal" | "peek" | "page" | "side" | "window";

package/dist/foundations/types.js

@@ -12,39 +12,3 @@
  *  `list/`, even if it is shared across its three files.
  * ==================================================================== */
 export {};
-/* ==================================================================== *
- *  THE SYSTEM'S TWO API CONVENTIONS
- *
- *  They are here and not in the README because a convention that lives in the
- *  documentation breaks in the first component written in a hurry. Here it is
- *  read by whoever is going to write the next component.
- *
- *  ── 1. How a callback is named ──────────────────────────────────────
- *
- *      onXChange   the component proposes a NEW value for `x`, and whoever
- *                  uses it decides whether to accept it. It ALWAYS goes with
- *                  the `x` prop.
- *                  → onTermsChange(terms), onSelectedChange(set), onSortChange(sort)
- *
- *      onX         something happened that is not a value change: an intent.
- *                  → onClose(), onOpen(), onPromote(), onBrowseAll()
- *
- *  The test for knowing which one: **is there a prop with that name next to
- *  it?** If `value` exists, it is `onValueChange`. If not, it is an event and
- *  goes without a suffix.
- *
- *  ── 2. Controlled, always ───────────────────────────────────────────
- *
- *  Any state the consumer might want to read, store in the URL or restore on
- *  reload is CONTROLLED: `value` + `onValueChange`, with no internal memory.
- *  That is what lets the entire workspace live in the hash.
- *
- *  The exception, and there is only one: **what dies with the component and
- *  nobody cares about afterwards.** An open menu, an expanded filter panel, the
- *  half-typed text in the search box. That does keep state inside, because
- *  exposing it would force every consumer to declare a `useState` for something
- *  they are never going to read.
- *
- *  Put another way: if it makes sense to send it to a colleague over chat so
- *  they see the same thing, it is controlled.
- * ==================================================================== */

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

@@ -1,4 +1,4 @@
-export { Block, type BlockProps, type BlockStatus, Rule, SectionHeader, } from "./Block.js";
+export { Block, type BlockProps, type BlockStatus, Rule, } from "./Block.js";
 export { FullWidth, SectionGrid } from "./SectionGrid.js";
 export { Line } from "./Line.js";
 export { Step, type StepProps, Steps, type StepsProps, useSteps, } from "./Steps.js";

package/dist/primitives/block/index.js

@@ -1,5 +1,5 @@
 /* The structure of a view: where each section starts and ends. */
-export { Block, Rule, SectionHeader, } from "./Block.js";
+export { Block, Rule, } from "./Block.js";
 export { FullWidth, SectionGrid } from "./SectionGrid.js";
 /* La línea de tres zonas: lo que centra el centro contra la LÍNEA y no contra
    lo que sobra. La usan las dos bandas — la del registro y la de la lista. */

package/dist/primitives/cell/CellStack.d.ts

@@ -31,7 +31,7 @@ export declare function Thumb({ src, alt, icon: Icon, size, }: {
  * card. The second line wraps or truncates (`wrap`); the first always truncates, with the full
  * text on hover.
  */
-export declare function CellStack({ primary, secondary, media, wrap, }: {
+export declare function CellStack({ primary, secondary, media, avatar, wrap, }: {
     /** What the row is — the name. In ink, one line. */
     primary: ReactNode;
     /** What tells it apart — a description, a code, a reference. Small and quiet. */
@@ -42,6 +42,12 @@ export declare function CellStack({ primary, secondary, media, wrap, }: {
         alt?: string;
         icon?: LucideIcon;
     };
+    /** A person or a company instead of `media`: its round face — the photo, or the initials in
+     *  the color it has everywhere. The same contract as a list row's `avatar`. */
+    avatar?: {
+        name: string;
+        src?: string;
+    };
     /** Let the second line wrap (a description) instead of truncating (a code). */
     wrap?: boolean;
 }): import("react").JSX.Element;

package/dist/primitives/cell/CellStack.js

@@ -1,4 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Avatar } from "../value/Avatar.js";
 /**
  * A thumbnail — the photo of a product, the logo of a customer — or, when there is none, its
  * icon on a quiet tile. One size per context so a column of them lines up.
@@ -28,6 +29,8 @@ export function Thumb({ src, alt, icon: Icon, size = "md", }) {
  * card. The second line wraps or truncates (`wrap`); the first always truncates, with the full
  * text on hover.
  */
-export function CellStack({ primary, secondary, media, wrap = false, }) {
-    return (_jsxs("span", { className: "flex min-w-0 items-center gap-2.5", children: [media === undefined ? null : (_jsx(Thumb, { size: "md", ...(media.src === undefined ? {} : { src: media.src }), ...(media.alt === undefined ? {} : { alt: media.alt }), ...(media.icon === undefined ? {} : { icon: media.icon }) })), _jsxs("span", { className: "flex min-w-0 flex-col", children: [_jsx("span", { className: "truncate text-meta font-medium text-ink", ...(typeof primary === "string" ? { title: primary } : {}), children: primary }), secondary === undefined ? null : (_jsx("span", { className: `text-micro text-muted ${wrap ? "line-clamp-2" : "truncate"}`, ...(typeof secondary === "string" ? { title: secondary } : {}), children: secondary }))] })] }));
+export function CellStack({ primary, secondary, media, avatar, wrap = false, }) {
+    return (_jsxs("span", { className: "flex min-w-0 items-center gap-2.5", children: [avatar !== undefined ? (
+            /* The name is written beside it: the photo's `alt` would say it twice. */
+            _jsx("span", { "aria-hidden": true, className: "flex shrink-0", children: _jsx(Avatar, { name: avatar.name, size: "lg", ...(avatar.src === undefined ? {} : { src: avatar.src }) }) })) : media === undefined ? null : (_jsx(Thumb, { size: "md", ...(media.src === undefined ? {} : { src: media.src }), ...(media.alt === undefined ? {} : { alt: media.alt }), ...(media.icon === undefined ? {} : { icon: media.icon }) })), _jsxs("span", { className: "flex min-w-0 flex-col", children: [_jsx("span", { className: "truncate text-meta font-medium text-ink", ...(typeof primary === "string" ? { title: primary } : {}), children: primary }), secondary === undefined ? null : (_jsx("span", { className: `text-micro text-muted ${wrap ? "line-clamp-2" : "truncate"}`, ...(typeof secondary === "string" ? { title: secondary } : {}), children: secondary }))] })] }));
 }

package/dist/primitives/choice/ComboBox.d.ts

@@ -10,6 +10,9 @@ export type ComboBoxProps = {
     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 the label. */
     mode?: FormMode;
 };

package/dist/primitives/choice/ComboBox.js

@@ -10,7 +10,7 @@ import { Popover } from "../overlay/Popover.js";
 import { Check, ChevronDown } from "lucide-react";
 import { ComboBox as AriaComboBox, Input, ListBox, ListBoxItem, Text, useFilter, } from "react-aria-components";
 /**
- * One of many, found by typing: the customer of an invoice, the product of a line.
+ * One of a closed list, found by typing: a country, a currency, a tax regime, a unit.
  *
  * Context: a `Select` makes you scroll a list you already know the name in; here you type
  * three letters of it. The filter is React Aria's `contains` in the locale of the copy table
@@ -18,9 +18,13 @@ import { ComboBox as AriaComboBox, Input, ListBox, ListBoxItem, Text, useFilter,
  * The value is the option's `value` string — what the backend stores — never React Aria's
  * `Key`.
  *
- * It is not `Picker`: that one chooses a RECORD among thousands, with metadata rows, a cap
- * and a "see more". This is a closed list already in memory — tens to a few hundred — where
- * one muted line under the name (a tax id, a city) is enough to tell two apart.
+ * The four ways to choose, and which is which:
+ *   - `Select`    a short closed list (a handful): open it and read it.
+ *   - `ComboBox`  a long closed list already in memory (tens to a few hundred): type three
+ *                 letters; one muted line under the name is enough to tell two apart.
+ *   - `Picker`    a RECORD — a customer, a product — among thousands: rows with face, facts
+ *                 and widgets, «Buscar más…», create, and opening the chosen one.
+ *   - `Suggest`   free text that proposes what already exists without forbidding a new one.
  *
  * When nothing matches, the list simply closes: an empty floating box tells nothing the
  * unchanged field does not, and the system has no "no results" sentence of its own here.
@@ -37,14 +41,14 @@ export function ComboBox({ mode, ...props }) {
        to be ABOVE the component that asks for it. */
     return (_jsx(AriaLocale, { children: _jsx(EditableComboBox, { ...props }) }));
 }
-function EditableComboBox({ value, onChange, options, placeholder, disabled = false, id: ownId, describedBy: ownDescribedBy, invalid: ownInvalid, }) {
+function EditableComboBox({ value, onChange, options, placeholder, disabled = false, id: ownId, describedBy: ownDescribedBy, invalid: ownInvalid, "aria-label": ariaLabel, }) {
     const { id, labelledBy, describedBy, invalid } = useFieldIds({
         id: ownId,
         describedBy: ownDescribedBy,
         invalid: ownInvalid,
     });
     const { contains } = useFilter({ sensitivity: "base" });
-    return (_jsxs(AriaComboBox, { id: id, "aria-labelledby": labelledBy, "aria-describedby": describedBy, 
+    return (_jsxs(AriaComboBox, { id: id, "aria-labelledby": labelledBy, "aria-label": ariaLabel, "aria-describedby": describedBy, 
         /* `defaultItems` and not `items`: with `items` React Aria hands the filtering to the
            consumer. These are the same options every render — only the filtering is React
            Aria's. */

package/dist/primitives/choice/KanbanState.d.ts

@@ -0,0 +1,14 @@
+export type KanbanStateValue = "normal" | "done" | "blocked";
+/**
+ * Odoo's kanban state — the traffic light on a card: in progress, ready for the next stage,
+ * blocked.
+ *
+ * Context: it answers «can this move on?» without opening the record, and the stage alone does
+ * not say it — two cards in «propuesta», one waiting on the customer, one ready to send. A dot
+ * never goes alone (docs/PRINCIPLES.md §3): its word is the button's name and title, and the
+ * list it opens says all three. Without `onChange` it only shows.
+ */
+export declare function KanbanState({ value, onChange, }: {
+    value: KanbanStateValue;
+    onChange?: (next: KanbanStateValue) => void;
+}): import("react").JSX.Element;

package/dist/primitives/choice/KanbanState.js

@@ -0,0 +1,37 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useUiCopy } from "../../foundations/copy.js";
+import { PopoverTrigger } from "../overlay/PopoverTrigger.js";
+const ORDER = ["normal", "done", "blocked"];
+const FILL = {
+    normal: "bg-line-strong",
+    done: "bg-good",
+    blocked: "bg-bad",
+};
+/** The dot as `PopoverTrigger`'s opener: it hands over `expanded` / `haspopup`, which a bare
+ *  `<button>` would pass to the DOM as unknown attributes. */
+function DotButton({ expanded, haspopup, ...rest }) {
+    return _jsx("button", { type: "button", "aria-expanded": expanded, "aria-haspopup": haspopup, ...rest });
+}
+/**
+ * Odoo's kanban state — the traffic light on a card: in progress, ready for the next stage,
+ * blocked.
+ *
+ * Context: it answers «can this move on?» without opening the record, and the stage alone does
+ * not say it — two cards in «propuesta», one waiting on the customer, one ready to send. A dot
+ * never goes alone (docs/PRINCIPLES.md §3): its word is the button's name and title, and the
+ * list it opens says all three. Without `onChange` it only shows.
+ */
+export function KanbanState({ value, onChange, }) {
+    const copy = useUiCopy();
+    const words = copy.kanbanState;
+    const said = `${words.label}: ${words[value]}`;
+    const dot = (state) => (_jsx("span", { "aria-hidden": true, className: `block size-2.5 rounded-pill ${FILL[state]}` }));
+    if (onChange === undefined) {
+        return (_jsx("span", { role: "img", "aria-label": said, title: said, className: "inline-flex p-1", children: dot(value) }));
+    }
+    return (_jsx(PopoverTrigger, { label: words.label, placement: "bottom end", trigger: _jsx(DotButton, { "aria-label": said, title: said, className: "relative z-10 inline-flex rounded-pill p-1 transition-colors duration-(--duration-instant) hover:bg-ink/8 focus-visible:outline-2 focus-visible:outline-primary", children: dot(value) }), children: (close) => (_jsx("div", { role: "radiogroup", "aria-label": words.label, className: "flex flex-col p-1", children: ORDER.map((state) => (_jsxs("button", { type: "button", role: "radio", "aria-checked": state === value, onClick: () => {
+                    onChange(state);
+                    close();
+                }, className: `flex items-center gap-2 rounded-control px-2 py-1.5 text-left text-meta text-ink transition-colors duration-(--duration-instant) hover:bg-ink/5 ${state === value ? "font-medium" : ""}`, children: [dot(state), words[state]] }, state))) })) }));
+}