@sincpro/web-ui 0.1.0 → 0.2.0

package/dist/primitives/field/note.js

@@ -0,0 +1,117 @@
+"use client";
+import { Fragment as _Fragment, jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { Flag } from "../notice/Flag.js";
+import { createContext, useContext, useLayoutEffect, useRef, useSyncExternalStore, } from "react";
+export function createNoteRegistry() {
+    const entries = new Map();
+    const listeners = new Set();
+    let list = [];
+    const changed = () => {
+        list = [...entries.values()];
+        for (const listener of listeners)
+            listener();
+    };
+    return {
+        put: (entry) => {
+            const known = entries.get(entry.id);
+            if (known === undefined) {
+                entries.set(entry.id, entry);
+                changed();
+                return;
+            }
+            /* In place: the snapshot keeps its identity, so `useSyncExternalStore` sees no change
+               — a new array here re-rendered the record, which re-rendered the field, which put
+               again, for ever. */
+            Object.assign(known, entry);
+        },
+        drop: (id) => {
+            if (entries.delete(id))
+                changed();
+        },
+        subscribe: (listener) => {
+            listeners.add(listener);
+            return () => listeners.delete(listener);
+        },
+        snapshot: () => list,
+    };
+}
+/** The registry of the record around — `Record` provides it. */
+export const NoteRegistryContext = createContext(null);
+const NONE = [];
+const noop = () => () => { };
+/** The notes mounted in the record around, in the order they were mounted. */
+export function useNoteEntries() {
+    const registry = useContext(NoteRegistryContext);
+    const snapshot = registry?.snapshot ?? (() => NONE);
+    /* The same snapshot on the server: nothing registers there (no effects run), so it is
+       empty unless someone filled the registry by hand. */
+    return useSyncExternalStore(registry?.subscribe ?? noop, snapshot, snapshot);
+}
+/** What a card belongs to when nobody said: the row it sits in, by the first words of its
+ *  first cell — «Impresora térmica de tickets 80 mm» —, or nothing. The card's own words
+ *  (it sits in that cell) are skipped. */
+function ownerFromRow(card) {
+    const cell = card.closest("tr")?.querySelector("td");
+    if (cell === null || cell === undefined)
+        return "";
+    const walk = document.createTreeWalker(cell, NodeFilter.SHOW_TEXT);
+    for (let node = walk.nextNode(); node !== null; node = walk.nextNode()) {
+        if (node.parentElement?.closest("[data-field-note]") !== null)
+            continue;
+        const text = node.textContent?.trim() ?? "";
+        if (text !== "")
+            return text.slice(0, 60);
+    }
+    return "";
+}
+/** The field or row a card is anchored to: the row, the fact (a `<dd>`'s group), or the
+ *  field box the card is the last child of. */
+function anchorOf(card) {
+    if (card === null)
+        return null;
+    const row = card.closest("tr");
+    if (row !== null)
+        return row;
+    const parent = card.parentElement;
+    return parent?.tagName === "DD" ? parent.parentElement : parent;
+}
+/* ---------------------------------------------------------------- *
+ *  The two faces
+ * ---------------------------------------------------------------- */
+/** What a note leaves in its field: its sentence, hidden, for the field's
+ *  `aria-describedby`, and its entry in the record's activity — where it is listed with
+ *  what it belongs to and taken back to on press. Nothing is drawn: the mark by the label
+ *  (`NoteFlag`) says WHERE, the activity says WHAT. */
+export function NoteCard({ note, id, owner, }) {
+    const registry = useContext(NoteRegistryContext);
+    const ref = useRef(null);
+    /* Before paint, so the record's activity knows on its first frame whether there is
+       anything to align — its default view depends on it. On EVERY render: the words are
+       kept current, silently (a new `note` object each render must not re-render the
+       record); only appearing and going away are news. */
+    useLayoutEffect(() => {
+        if (registry === null)
+            return;
+        const card = ref.current;
+        registry.put({
+            id,
+            note,
+            owner: owner ?? (card === null ? "" : ownerFromRow(card)),
+            anchor: () => anchorOf(ref.current),
+        });
+    });
+    useLayoutEffect(() => {
+        if (registry === null)
+            return;
+        return () => registry.drop(id);
+    }, [registry, id]);
+    return (_jsx("div", { ref: ref, "data-field-note": "", hidden: true, children: _jsxs("span", { id: id, children: [note.label, note.detail === undefined ? null : _jsxs(_Fragment, { children: [" \u2014 ", note.detail] })] }) }));
+}
+/** The mark next to the label: WHERE the note is. It opens the note on press. */
+export function NoteFlag({ note }) {
+    return (_jsx("span", { className: "inline-flex shrink-0", children: _jsx(Flag, { tone: note.tone ?? "info", label: note.label, children: note.detail === undefined && note.action === undefined ? undefined : (_jsxs("span", { className: "flex flex-col gap-2", children: [note.detail === undefined ? null : _jsx("span", { children: note.detail }), note.action === undefined ? null : _jsx("span", { className: "flex", children: note.action })] })) }) }));
+}
+/** Joins ids for `aria-describedby`, dropping the absent ones. */
+export function describedByOf(...ids) {
+    return ids.filter((x) => x !== undefined && x !== null).join(" ") || undefined;
+}

package/dist/primitives/index.d.ts

@@ -16,4 +16,5 @@ export * from "./table/index.js";
 export * from "./tabs/index.js";
 export * from "./tag/index.js";
 export * from "./toolbar/index.js";
+export * from "./tree/index.js";
 export * from "./value/index.js";

package/dist/primitives/index.js

@@ -17,4 +17,5 @@ export * from "./table/index.js";
 export * from "./tabs/index.js";
 export * from "./tag/index.js";
 export * from "./toolbar/index.js";
+export * from "./tree/index.js";
 export * from "./value/index.js";

package/dist/primitives/menu/Menu.d.ts

@@ -1,6 +1,7 @@
 import { type ButtonRole, type ButtonSize } from "../button/Button.js";
 import type { LucideIcon } from "lucide-react";
 import type { ReactNode } from "react";
+import { type Key } from "react-aria-components";
 export interface MenuOption {
     id: string;
     label: string;
@@ -27,6 +28,16 @@ export interface MenuOption {
      *  menu built from a registry —twenty-five operations, each one with its own
      *  action— has no reasonable `switch` on the other side. */
     onSelect?: () => void;
+    /** The keys that run this option without opening the menu, as the user reads them
+     *  —«Ctrl+P», «⌘D»—. Drawn at the end of the row and linked to it for a screen reader.
+     *  It is a HINT: binding the keys is the application's job, because the menu does not
+     *  exist until it is opened. In an ERP the frequent verbs have a shortcut, and the menu
+     *  is where people learn it. */
+    shortcut?: string;
+    /** The option opens a SUBMENU with these options instead of running. Its own `onSelect`
+     *  and `checked` are ignored — a row that opens something does not also do something.
+     *  Children may carry `items` too, but a third level is usually a dialog in disguise. */
+    items?: readonly MenuOption[];
 }
 export interface MenuGroup {
     /** The group's label, in the brand voice. Without a label, the group is just
@@ -51,6 +62,9 @@ declare const WIDTH: {
     readonly md: "min-w-56 max-w-80";
     readonly lg: "min-w-80 max-w-(--container-short)";
 };
+/** Every option of the tree by id, children included: a submenu is a separate React Aria
+ *  menu with its own `onAction`, and both have to reach the same handlers. */
+export declare function indexOptions(options: readonly MenuOption[], into?: Map<string, MenuOption>): Map<string, MenuOption>;
 export declare function Menu({ label, groups, onSelect, surface, align, icon: Trigger, 
 /** The menu as a control of a list ("filters ▾") carries the chevron; the
  *  actions `⋯` does not, because the icon already says there is more. */
@@ -97,4 +111,18 @@ chevron, active, iconOnly, variant, searchPlaceholder, emptyText, width, role, s
      *  each click turns three hides into three open-close round trips. */
     closeOnSelect?: boolean;
 }): import("react").JSX.Element;
+/**
+ * The panel of a `Menu`: its groups and rows, and the submenus hanging from them. Internal —
+ * it is not exported from the family — and separate from the trigger for two reasons: a
+ * submenu is this same panel one level down, and a panel can be rendered on the server
+ * without the trigger's popover, which is how the tests see the rows.
+ */
+export declare function MenuList({ label, groups, onAction, closeOnSelect, emptyText, width, }: {
+    label: string;
+    groups: readonly MenuGroup[];
+    onAction: (key: Key) => void;
+    closeOnSelect: boolean;
+    emptyText: string;
+    width?: keyof typeof WIDTH;
+}): import("react").JSX.Element;
 export {};

package/dist/primitives/menu/Menu.js

@@ -3,14 +3,29 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useUiCopy } from "../../foundations/copy.js";
 import { buttonClasses, } from "../button/Button.js";
 import { Popover } from "../overlay/Popover.js";
-import { Check, ChevronDown } from "lucide-react";
-import { Autocomplete, Button as AriaButton, Header, Input, Menu as AriaMenu, MenuItem, MenuSection, MenuTrigger, SearchField, Separator, useFilter, } from "react-aria-components";
+import { Check, ChevronDown, ChevronRight } from "lucide-react";
+import { Autocomplete, Button as AriaButton, Header, Input, Keyboard, Menu as AriaMenu, MenuItem, MenuSection, MenuTrigger, SearchField, Separator, SubmenuTrigger, useFilter, } from "react-aria-components";
 const WIDTH = {
     /** A menu of short verbs hanging off an icon: "duplicate", "delete". */
     sm: "min-w-44 max-w-64",
     md: "min-w-56 max-w-80",
     lg: "min-w-80 max-w-(--container-short)",
 };
+/** A submenu opens beside its row, flush against the parent panel and pulled up by the
+ *  panel's padding plus its hairline (`p-1` + 1), so its first row lines up with the row that
+ *  opened it — a submenu that starts half a row lower reads as belonging to the next one. */
+const SUBMENU_OFFSET = 0;
+const SUBMENU_CROSS_OFFSET = -5;
+/** Every option of the tree by id, children included: a submenu is a separate React Aria
+ *  menu with its own `onAction`, and both have to reach the same handlers. */
+export function indexOptions(options, into = new Map()) {
+    for (const o of options) {
+        into.set(o.id, o);
+        if (o.items !== undefined)
+            indexOptions(o.items, into);
+    }
+    return into;
+}
 export function Menu({ label, groups, onSelect, surface = "canvas", align = "start", icon: Trigger, 
 /** The menu as a control of a list ("filters ▾") carries the chevron; the
  *  actions `⋯` does not, because the icon already says there is more. */
@@ -29,18 +44,41 @@ chevron = true, active = false, iconOnly = false, variant = "button", searchPlac
         : surface === "chrome"
             ? `border-chrome-muted/35 bg-chrome-raised text-chrome-ink hover:border-chrome-accent/45 ${active ? "border-chrome-accent/60" : ""}`
             : `border-line-strong bg-surface hover:border-primary/45 hover:bg-primary/5 ${active ? "border-primary/60 text-primary" : "text-ink"}`;
-    const hasMarks = groups.some((g) => g.options.some((o) => o.checked !== undefined || o.icon !== undefined));
-    const hasHints = groups.some((g) => g.options.some((o) => o.hint !== undefined));
-    const byId = new Map(groups.flatMap((g) => g.options.map((o) => [o.id, o])));
-    const menu = (_jsx(AriaMenu, { "aria-label": label, shouldCloseOnSelect: closeOnSelect, onAction: (key) => {
+    const byId = indexOptions(groups.flatMap((g) => g.options));
+    const menu = (_jsx(MenuList, { label: label, groups: groups, width: width, closeOnSelect: closeOnSelect, onAction: (key) => {
             const option = byId.get(String(key));
             option?.onSelect?.();
             onSelect?.(String(key));
-        }, renderEmptyState: () => (_jsx("p", { className: "px-3 py-3 text-meta text-muted italic", children: emptyText ?? copy.menu.empty })), className: "max-h-[inherit] overflow-y-auto p-1 outline-0", children: groups.map((g, gi) => (_jsxs(MenuSection, { className: "[&:not(:first-child)]:mt-1 [&:not(:first-child)]:border-t [&:not(:first-child)]:border-line [&:not(:first-child)]:pt-1", children: [g.label === undefined ? null : (
+        }, emptyText: emptyText ?? copy.menu.empty }));
+    return (_jsxs(MenuTrigger, { children: [_jsx(AriaButton, { "aria-label": iconOnly ? label : undefined, ...(role === undefined ? {} : { "data-emphasis": role }), className: ({ isPressed, isFocusVisible }) => role === undefined
+                    ? `inline-flex h-(--size-control-sm) shrink-0 cursor-default items-center gap-1.5 border text-micro font-medium whitespace-nowrap outline-0 transition-colors duration-(--duration-instant) ${isFocusVisible ? "outline-2 outline-offset-2 outline-primary" : ""} ${iconOnly ? "w-(--size-control-sm) justify-center rounded-pill" : "rounded-control px-2.5"} ${triggerClass(isPressed)}`
+                    : `${buttonClasses(role, size, surface)} gap-1.5`, children: _jsxs("span", { className: "contents", title: title ?? (iconOnly ? label : undefined), children: [Trigger === undefined ? (iconOnly ? (_jsx(ChevronDown, { className: "size-(--size-icon-sm)", strokeWidth: 2, "aria-hidden": true })) : null) : (_jsx(Trigger, { className: "size-(--size-icon-sm)", strokeWidth: 2, "aria-hidden": true })), iconOnly ? null : label, chevron && !iconOnly ? (_jsx(ChevronDown, { className: "size-(--size-icon-sm)", strokeWidth: 2, "aria-hidden": true })) : null] }) }), _jsx(Popover, { placement: align === "end" ? "bottom end" : "bottom start", className: WIDTH[width], children: searchPlaceholder === undefined ? (menu) : (
+                /* The search box stays at the top: in a menu of twenty-five entries,
+                   scrolling loses exactly the control that explains why only three are
+                   visible. It filters on label AND hint — half the entries of this
+                   product are told apart only by the hint. */
+                _jsxs(Autocomplete, { filter: contains, children: [_jsx(SearchField, { "aria-label": searchPlaceholder, autoFocus: true, className: "border-b border-line px-2 pt-2 pb-2", children: _jsx(Input, { placeholder: searchPlaceholder, className: "h-(--size-control-sm) w-full rounded-control border border-line-strong bg-surface px-2.5 text-meta text-ink outline-0 placeholder:text-muted focus-visible:border-primary" }) }), menu] })) })] }));
+}
+/**
+ * The panel of a `Menu`: its groups and rows, and the submenus hanging from them. Internal —
+ * it is not exported from the family — and separate from the trigger for two reasons: a
+ * submenu is this same panel one level down, and a panel can be rendered on the server
+ * without the trigger's popover, which is how the tests see the rows.
+ */
+export function MenuList({ label, groups, onAction, closeOnSelect, emptyText, width = "md", }) {
+    /* Per panel: a submenu without icons does not inherit its parent's mark column. */
+    const hasMarks = groups.some((g) => g.options.some((o) => o.checked !== undefined || o.icon !== undefined));
+    const hasHints = groups.some((g) => g.options.some((o) => o.hint !== undefined));
+    const row = (o) => {
+        const Icon = o.icon;
+        const opens = o.items !== undefined;
+        const checked = !opens && o.checked === true;
+        return (_jsxs(MenuItem, { id: o.id, textValue: o.hint === undefined ? o.label : `${o.label} ${o.hint}`, isDisabled: o.disabled, className: `flex w-full cursor-default rounded-control ${hasHints ? "items-start py-1.5" : "items-center py-1"} gap-2 px-2 text-left outline-0 transition-colors duration-(--duration-instant) data-focused:bg-primary/8 data-open:bg-primary/8 disabled:opacity-45`, children: [hasMarks ? (_jsx("span", { className: `${hasHints ? "mt-0.5" : ""} flex size-(--size-icon-sm) shrink-0 items-center justify-center`, children: checked ? (_jsx(Check, { className: "size-(--size-icon-sm) text-primary", strokeWidth: 2.5, "aria-hidden": true })) : Icon !== undefined ? (_jsx(Icon, { className: "size-(--size-icon-sm) text-muted", strokeWidth: 2, "aria-hidden": true })) : null })) : null, _jsxs("span", { className: "min-w-0 flex-1", children: [_jsxs("span", { className: "flex items-center gap-1.5", children: [_jsx("span", { className: `truncate text-meta ${checked ? "font-medium text-ink" : "text-ink"}`, children: o.label }), o.badge === undefined ? null : typeof o.badge === "string" ? (_jsx("span", { className: "inline-flex shrink-0 items-center rounded-pill border border-warn/30 bg-warn/10 px-2 py-0.5 text-micro text-warn", children: o.badge })) : (_jsx("span", { className: "ml-auto shrink-0", children: o.badge }))] }), o.hint === undefined ? null : (_jsx("span", { className: "mt-0.5 block truncate text-micro text-muted", children: o.hint }))] }), o.shortcut === undefined ? null : (_jsx(Keyboard, { className: "shrink-0 self-center pl-3 font-mono text-micro text-muted", children: o.shortcut })), opens ? (_jsx(ChevronRight, { className: "size-(--size-icon-sm) shrink-0 self-center text-muted", strokeWidth: 2, "aria-hidden": true })) : null] }, o.id));
+    };
+    return (_jsx(AriaMenu, { "aria-label": label, shouldCloseOnSelect: closeOnSelect, onAction: onAction, renderEmptyState: () => (_jsx("p", { className: "px-3 py-3 text-meta text-muted italic", children: emptyText })), className: "max-h-[inherit] overflow-y-auto p-1 outline-0", children: groups.map((g, gi) => (_jsxs(MenuSection, { className: "[&:not(:first-child)]:mt-1 [&:not(:first-child)]:border-t [&:not(:first-child)]:border-line [&:not(:first-child)]:pt-1", children: [g.label === undefined ? null : (
                 /* Same skeleton as the row: the label sits on the text column. */
                 _jsxs(Header, { className: "flex items-center gap-2 px-2 pt-1 pb-0.5 text-micro font-medium text-muted", children: [hasMarks ? (_jsx("span", { className: "size-(--size-icon-sm) shrink-0", "aria-hidden": true })) : null, g.label] })), g.options.flatMap((o) => {
-                    const Icon = o.icon;
-                    const item = (_jsxs(MenuItem, { id: o.id, textValue: o.hint === undefined ? o.label : `${o.label} ${o.hint}`, isDisabled: o.disabled, className: `flex w-full cursor-default rounded-control ${hasHints ? "items-start py-1.5" : "items-center py-1"} gap-2 px-2 text-left outline-0 transition-colors duration-(--duration-instant) data-focused:bg-primary/8 disabled:opacity-45`, children: [hasMarks ? (_jsx("span", { className: `${hasHints ? "mt-0.5" : ""} flex size-(--size-icon-sm) shrink-0 items-center justify-center`, children: o.checked === true ? (_jsx(Check, { className: "size-(--size-icon-sm) text-primary", strokeWidth: 2.5, "aria-hidden": true })) : Icon !== undefined ? (_jsx(Icon, { className: "size-(--size-icon-sm) text-muted", strokeWidth: 2, "aria-hidden": true })) : null })) : null, _jsxs("span", { className: "min-w-0 flex-1", children: [_jsxs("span", { className: "flex items-center gap-1.5", children: [_jsx("span", { className: `truncate text-meta ${o.checked === true ? "font-medium text-ink" : "text-ink"}`, children: o.label }), o.badge === undefined ? null : typeof o.badge === "string" ? (_jsx("span", { className: "inline-flex shrink-0 items-center rounded-pill border border-warn/30 bg-warn/10 px-2 py-0.5 text-micro text-warn", children: o.badge })) : (_jsx("span", { className: "ml-auto shrink-0", children: o.badge }))] }), o.hint === undefined ? null : (_jsx("span", { className: "mt-0.5 block truncate text-micro text-muted", children: o.hint }))] })] }, o.id));
+                    const item = o.items === undefined ? (row(o)) : (_jsxs(SubmenuTrigger, { children: [row(o), _jsx(Popover, { offset: SUBMENU_OFFSET, crossOffset: SUBMENU_CROSS_OFFSET, className: WIDTH[width], children: _jsx(MenuList, { label: o.label, groups: [{ options: [...o.items] }], onAction: onAction, closeOnSelect: closeOnSelect, emptyText: emptyText, width: width }) })] }, o.id));
                     return o.divider === true
                         ? [
                             _jsx(Separator, { className: "my-1 h-px border-0 bg-line" }, `${o.id}-divider`),
@@ -48,12 +86,4 @@ chevron = true, active = false, iconOnly = false, variant = "button", searchPlac
                         ]
                         : [item];
                 })] }, g.label ?? gi))) }));
-    return (_jsxs(MenuTrigger, { children: [_jsx(AriaButton, { "aria-label": iconOnly ? label : undefined, ...(role === undefined ? {} : { "data-emphasis": role }), className: ({ isPressed, isFocusVisible }) => role === undefined
-                    ? `inline-flex h-(--size-control-sm) shrink-0 cursor-default items-center gap-1.5 border text-micro font-medium whitespace-nowrap outline-0 transition-colors duration-(--duration-instant) ${isFocusVisible ? "outline-2 outline-offset-2 outline-primary" : ""} ${iconOnly ? "w-(--size-control-sm) justify-center rounded-pill" : "rounded-control px-2.5"} ${triggerClass(isPressed)}`
-                    : `${buttonClasses(role, size, surface)} gap-1.5`, children: _jsxs("span", { className: "contents", title: title ?? (iconOnly ? label : undefined), children: [Trigger === undefined ? (iconOnly ? (_jsx(ChevronDown, { className: "size-(--size-icon-sm)", strokeWidth: 2, "aria-hidden": true })) : null) : (_jsx(Trigger, { className: "size-(--size-icon-sm)", strokeWidth: 2, "aria-hidden": true })), iconOnly ? null : label, chevron && !iconOnly ? (_jsx(ChevronDown, { className: "size-(--size-icon-sm)", strokeWidth: 2, "aria-hidden": true })) : null] }) }), _jsx(Popover, { placement: align === "end" ? "bottom end" : "bottom start", className: WIDTH[width], children: searchPlaceholder === undefined ? (menu) : (
-                /* The search box stays at the top: in a menu of twenty-five entries,
-                   scrolling loses exactly the control that explains why only three are
-                   visible. It filters on label AND hint — half the entries of this
-                   product are told apart only by the hint. */
-                _jsxs(Autocomplete, { filter: contains, children: [_jsx(SearchField, { "aria-label": searchPlaceholder, autoFocus: true, className: "border-b border-line px-2 pt-2 pb-2", children: _jsx(Input, { placeholder: searchPlaceholder, className: "h-(--size-control-sm) w-full rounded-control border border-line-strong bg-surface px-2.5 text-meta text-ink outline-0 placeholder:text-muted focus-visible:border-primary" }) }), menu] })) })] }));
 }

package/dist/primitives/notice/Callout.js

@@ -24,5 +24,5 @@ export function Callout({ children, tone = "info", title, action, onDismiss, dis
         /* `status` y no `alert`: `alert` interrumpe al lector de pantalla y se
            reserva para lo que pasó JUSTO AHORA. Un aviso que ya estaba cuando la
            pantalla abrió no interrumpe nada. */
-        role: "status", className: `flex min-w-0 items-start gap-2.5 rounded-box border ${SKIN[tone]} ${byDensity(d, "px-3 py-2.5", "px-2.5 py-2")}`, children: [_jsx(Icon, { className: "mt-0.5 size-(--size-icon-sm) shrink-0", strokeWidth: 2, "aria-hidden": true }), _jsxs("div", { className: "flex min-w-0 flex-1 flex-col gap-1", children: [title === undefined ? null : (_jsx("p", { className: "text-meta font-medium text-ink", children: title })), _jsx("div", { className: "min-w-0 text-meta text-ink", children: children })] }), action === undefined ? null : _jsx("span", { className: "shrink-0", children: action }), onDismiss === undefined ? null : (_jsx("button", { type: "button", onClick: onDismiss, "aria-label": dismissLabel ?? "cerrar", title: dismissLabel ?? "cerrar", className: "-mr-1 shrink-0 rounded-control p-0.5 text-muted transition-colors duration-(--duration-instant) hover:bg-ink/6 hover:text-ink", children: _jsx(X, { className: "size-(--size-icon-sm)", strokeWidth: 2 }) }))] }));
+        role: "status", className: `flex min-w-0 items-start gap-2.5 rounded-box border ${SKIN[tone]} ${byDensity(d, "px-3 py-2.5", "px-2.5 py-2")}`, children: [_jsx(Icon, { className: "mt-0.5 size-(--size-icon-sm) shrink-0", strokeWidth: 2, "aria-hidden": true }), _jsxs("div", { className: "flex min-w-0 flex-1 flex-wrap items-start gap-x-3 gap-y-2", children: [_jsxs("div", { className: "flex min-w-0 flex-1 basis-(--container-name) flex-col gap-1", children: [title === undefined ? null : (_jsx("p", { className: "text-meta font-medium text-ink", children: title })), _jsx("div", { className: "min-w-0 text-meta text-ink", children: children })] }), action === undefined ? null : _jsx("span", { className: "shrink-0", children: action })] }), onDismiss === undefined ? null : (_jsx("button", { type: "button", onClick: onDismiss, "aria-label": dismissLabel ?? "cerrar", title: dismissLabel ?? "cerrar", className: "-mr-1 shrink-0 rounded-control p-0.5 text-muted transition-colors duration-(--duration-instant) hover:bg-ink/6 hover:text-ink", children: _jsx(X, { className: "size-(--size-icon-sm)", strokeWidth: 2 }) }))] }));
 }

package/dist/primitives/notice/Flag.d.ts

@@ -0,0 +1,13 @@
+import type { Tone } from "../../foundations/types.js";
+import type { ReactNode } from "react";
+export type FlagTone = Extract<Tone, "bad" | "warn" | "info" | "good">;
+export type FlagProps = {
+    tone: FlagTone;
+    /** The sentence the mark stands for — «Sin existencias». It names the mark and heads
+     *  the popover. */
+    label: string;
+    /** What explains it, inside the popover: the figures, what to do. */
+    children?: ReactNode;
+};
+/** A toned mark that opens its sentence. See the file's header. */
+export declare function Flag({ tone, label, children }: FlagProps): import("react").JSX.Element;

package/dist/primitives/notice/Flag.js

@@ -0,0 +1,31 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { tv } from "../../foundations/variants.js";
+import { Popover } from "../overlay/Popover.js";
+import { CircleAlert, CircleCheck, Info, TriangleAlert } from "lucide-react";
+import { Button, Dialog, DialogTrigger, Heading } from "react-aria-components";
+const ICON = {
+    bad: CircleAlert,
+    warn: TriangleAlert,
+    info: Info,
+    good: CircleCheck,
+};
+const mark = tv({
+    base: "inline-flex size-5 shrink-0 cursor-default items-center justify-center rounded-pill outline-0 transition-colors duration-(--duration-instant) forced-colors:text-[ButtonText]",
+    variants: {
+        tone: {
+            bad: "bg-bad/12 text-bad hover:bg-bad/20 aria-expanded:bg-bad/20",
+            warn: "bg-warn/15 text-warn hover:bg-warn/25 aria-expanded:bg-warn/25",
+            info: "bg-info/12 text-info hover:bg-info/20 aria-expanded:bg-info/20",
+            good: "bg-good/12 text-good hover:bg-good/20 aria-expanded:bg-good/20",
+        },
+        isFocusVisible: {
+            true: "outline-2 outline-offset-1 outline-primary forced-colors:outline-[Highlight]",
+        },
+    },
+});
+/** A toned mark that opens its sentence. See the file's header. */
+export function Flag({ tone, label, children }) {
+    const Icon = ICON[tone];
+    return (_jsxs(DialogTrigger, { children: [_jsx("span", { className: "inline-flex shrink-0", onClick: (e) => e.stopPropagation(), children: _jsx(Button, { "aria-label": label, className: (state) => mark({ ...state, tone }), children: _jsx(Icon, { className: "size-(--size-icon-sm)", strokeWidth: 2.25, "aria-hidden": true }) }) }), _jsx(Popover, { placement: "bottom start", className: "max-w-72 rounded-box", children: _jsxs(Dialog, { className: "flex flex-col gap-1 px-3 py-2.5 outline-0", children: [_jsx(Heading, { slot: "title", className: "text-meta font-medium text-ink", children: label }), children === undefined ? null : (_jsx("div", { className: "text-micro leading-relaxed text-muted", children: children }))] }) })] }));
+}

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

@@ -1,3 +1,4 @@
 export { Callout, type CalloutProps } from "./Callout.js";
+export { Flag, type FlagProps, type FlagTone } from "./Flag.js";
 export { Empty, Failed, ICONO_ROTO, Missing, Skeleton, } from "./Notice.js";
 export { ToastLayer, ToastProvider, type ToastSpec, useToast, useToastIfAny, } from "./Toast.js";

package/dist/primitives/notice/index.js

@@ -1,5 +1,6 @@
 /* How a view says that there is nothing, that it failed, or that nobody knows
    how to draw it. */
 export { Callout } from "./Callout.js";
+export { Flag } from "./Flag.js";
 export { Empty, Failed, ICONO_ROTO, Missing, Skeleton, } from "./Notice.js";
 export { ToastLayer, ToastProvider, useToast, useToastIfAny, } from "./Toast.js";

package/dist/primitives/overlay/Preview.d.ts

@@ -0,0 +1,19 @@
+import { type PopoverProps } from "./Popover.js";
+import { type ReactElement, type ReactNode } from "react";
+export type PreviewProps = {
+    /** What the preview is of — a link to the record, written as an element: a React Aria
+     *  `Link`, or anything that forwards `ref` and spreads native props. It must be
+     *  focusable: the keyboard reaches the preview through it. */
+    trigger: ReactElement;
+    /** The accessible name of the floating card: «Resumen de Distribuidora Andina». */
+    label: string;
+    /** What floats: a `RelationCard`, a few facts. It may hold actions — «Abrir». */
+    children: ReactNode;
+    placement?: PopoverProps["placement"];
+    /** Milliseconds resting on the trigger before it opens. 600 by default — see above. */
+    delay?: number;
+    closeDelay?: number;
+    /** The trigger stays, the preview does not open. */
+    disabled?: boolean;
+};
+export declare function Preview({ trigger, label, children, placement, delay, closeDelay, disabled, }: PreviewProps): import("react").JSX.Element;

package/dist/primitives/overlay/Preview.js

@@ -0,0 +1,60 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Popover } from "./Popover.js";
+import { isValidElement } from "react";
+import { Focusable, Link, PreviewTrigger } from "react-aria-components";
+/**
+ * A glance at a record without leaving the screen: the customer of an invoice, the product
+ * of a line — who or what it is, shown when the pointer rests on its name, the keyboard
+ * stops on it or a finger presses it long.
+ *
+ * Context: it sits between the two other things that float from a mark.
+ *
+ * - `Tooltip` is a LABEL: a few words about a control, never interactive — React Aria makes
+ *   it a `role="tooltip"` the keyboard cannot enter. A customer's debt, phone and «Abrir»
+ *   are not a label.
+ * - `PopoverTrigger` is ASKED FOR: a press on a button opens a dialog that takes the focus
+ *   until it is closed. Right for a small form; too much ceremony to see whose NIT it is.
+ *
+ * `Preview` is React Aria's `PreviewTrigger`: a NON-modal popover (`role="dialog"`, named by
+ * `label`) that opens on hover, on keyboard focus and on long press, and that MAY hold
+ * interactive content. It does not take the focus when it opens — the person who tabs past
+ * a column of customers keeps walking the table — but Tab from the trigger goes into it,
+ * Escape closes it and returns to the trigger, and the pointer can travel diagonally from the
+ * name to the card without it closing (React Aria's safe area). A long press moves the focus
+ * into it, so a touch screen reader lands on the card. All of that is React Aria's; this
+ * only floats it on the system's `Popover` — the surface, hairline, radius and `float`
+ * shadow everything that opens over the page has.
+ *
+ * ── The delays: 600 ms to open, 200 ms to close ──────────────────────
+ *
+ * They are React Aria's defaults, written here so a change in the library does not change
+ * the system silently. 600 ms is the line between crossing and resting: in a table the
+ * pointer crosses customer names all day on its way to something else, and a card of 18rem
+ * that covered four rows on every pass would be noise. Below ~400 ms it opens on the way;
+ * above a second it feels broken to the person who did stop to look. Keyboard focus waits the
+ * same, so tabbing quickly does not open a card per row. Once one is open the next opens at
+ * once (React Aria's warm-up): comparing the customers of six invoices is a run down the
+ * column, not six waits. It is shorter than a tooltip's on purpose — a preview is asked for
+ * by resting on a NAME you want to know about; a tooltip names an icon you mostly know.
+ * 200 ms to close is only for the jittery exit; the trip to the card is covered by the
+ * safe area, not by the delay.
+ *
+ * ── The trigger ──────────────────────────────────────────────────────
+ *
+ * React Aria hands the trigger its hover, focus, long-press and `aria-*` props through
+ * context. A React Aria `Link` — the name of a `RelationValue` — reads that context itself,
+ * so it is passed as is. Anything else — a system `Button`, a `ButtonLink`, a plain `<a>` —
+ * goes through `Focusable`, the adapter that clones those props and a `ref` onto an element
+ * that forwards `ref` and spreads native props (the same one `TooltipTrigger` uses). Wrapping
+ * the `Link` too would hand it the props twice.
+ */
+const PREVIEW_DELAY = 600;
+const PREVIEW_CLOSE_DELAY = 200;
+export function Preview({ trigger, label, children, placement = "bottom start", delay = PREVIEW_DELAY, closeDelay = PREVIEW_CLOSE_DELAY, disabled = false, }) {
+    const readsContext = isValidElement(trigger) && trigger.type === Link;
+    return (_jsxs(PreviewTrigger, { delay: delay, closeDelay: closeDelay, isDisabled: disabled, children: [readsContext ? (trigger) : (
+            /* React Aria types the child as an intrinsic element; a component that forwards
+               `ref` and spreads native props is the same thing to it at runtime. */
+            _jsx(Focusable, { children: trigger })), _jsx(Popover, { placement: placement, "aria-label": label, children: _jsx("div", { className: "max-h-[inherit] max-w-sm overflow-auto p-3", children: children }) })] }));
+}

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

@@ -1,3 +1,4 @@
 export { Popover, type PopoverProps } from "./Popover.js";
 export { PopoverTrigger, type PopoverTriggerProps, } from "./PopoverTrigger.js";
+export { Preview, type PreviewProps } from "./Preview.js";
 export { Tooltip, type TooltipProps, TooltipTrigger, } from "./Tooltip.js";

package/dist/primitives/overlay/index.js

@@ -1,5 +1,7 @@
 /* LO QUE FLOTA anclado a algo: el calendario de un selector de fecha, la lista de un
-   combobox, un formulario chico abierto desde un botón, el nombre de un ícono. */
+   combobox, un formulario chico abierto desde un botón, el nombre de un ícono, el vistazo
+   a un registro al pasar por su nombre. */
 export { Popover } from "./Popover.js";
 export { PopoverTrigger, } from "./PopoverTrigger.js";
+export { Preview } from "./Preview.js";
 export { Tooltip, TooltipTrigger, } from "./Tooltip.js";

package/dist/primitives/picker/Picker.d.ts

@@ -18,7 +18,22 @@ export interface PickerItem {
      *  on the box and finding the product, and having to remember what it was
      *  called. Drawing every code of every option is not an alternative. */
     haystack?: string;
+    /** The header this item is listed under. Consecutive items with the same section share
+     *  one header; an item without it is listed loose, outside any section. */
+    section?: string;
 }
+/**
+ * What the list shows and how many are left out of it. Capped at 8 with the footer count,
+ * unless the list loads incrementally — then everything that arrived is listed and the
+ * scroll asks for more.
+ */
+export declare function shownRows(filtered: readonly PickerItem[], { loading, incremental }: {
+    loading: boolean;
+    incremental: boolean;
+}): {
+    visible: readonly PickerItem[];
+    remaining: number;
+};
 export type PickerProps = {
     id?: string;
     items: readonly PickerItem[];
@@ -39,10 +54,36 @@ export type PickerProps = {
      *  while loading reads as "there is nothing", which is a different answer. */
     loading?: boolean;
     loadingText?: string;
+    /** The list grows from the backend: called when its end scrolls into view. The consumer
+     *  appends the next page to `items`; with nothing more to fetch it does nothing. Turns off
+     *  the cap of 8, the «see all…» row and the footer count. */
+    onLoadMore?: () => void;
+    /** A page asked for by `onLoadMore` is on its way: a quiet row at the end says so. Unlike
+     *  `loading`, the rows already there stay. */
+    loadingMore?: boolean;
     describedBy?: string;
     invalid?: boolean;
     disabled?: 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 name. */
     mode?: FormMode;
 };
 export declare function Picker({ mode, ...props }: PickerProps): import("react").JSX.Element;
+/**
+ * The list of a `Picker`: its rows, the section headers, the «see all…» row and the loading
+ * row at the end. Internal — not exported from the family — and apart from the combobox so it
+ * can be rendered on the server without a popover, which is how the tests see the rows.
+ */
+export declare function PickerOptions({ items, marks, hints, remaining, emptyText, onLoadMore, loadingMore, "aria-label": ariaLabel, }: {
+    items: readonly PickerItem[];
+    marks: boolean;
+    hints: boolean;
+    remaining: number;
+    emptyText: string;
+    onLoadMore?: () => void;
+    loadingMore?: boolean;
+    /** Only when rendered outside the combobox, which otherwise names the list. */
+    "aria-label"?: string;
+}): import("react").JSX.Element;