@sincpro/web-ui 0.1.0 → 1.0.0

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";
+export { 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";
+export { 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,69 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Popover } from "./Popover.js";
+import { isValidElement } from "react";
+import { setInteractionModality } from "react-aria";
+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 (
+    /* React Aria opens a preview on hover only once it KNOWS the pointer is in use — and it
+       learns that from a press, not from a move. On a page just loaded, before any click, the
+       pointer rested on a name and nothing opened. Entering the trigger with a mouse says it,
+       in the capture phase so it is said before React Aria's own hover handler asks. */
+    _jsx("span", { className: "contents", onPointerOverCapture: (event) => {
+            if (event.pointerType === "mouse")
+                setInteractionModality("pointer");
+        }, children: _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/MatchedText.d.ts

@@ -0,0 +1,10 @@
+/**
+ * A text with the part that matched the search marked — internal to the lists that filter
+ * as you type (`Picker`, `TagsField`). A `<mark>`, so it is also said as marked text, and
+ * bold besides the tint: in forced colors the tint is gone and the weight is what remains.
+ */
+export declare function MatchedText({ text, query, locale, }: {
+    text: string;
+    query: string;
+    locale?: string;
+}): string | (string | import("react").JSX.Element)[];

package/dist/primitives/picker/MatchedText.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { matchSpans } from "../../foundations/match.js";
+/**
+ * A text with the part that matched the search marked — internal to the lists that filter
+ * as you type (`Picker`, `TagsField`). A `<mark>`, so it is also said as marked text, and
+ * bold besides the tint: in forced colors the tint is gone and the weight is what remains.
+ */
+export function MatchedText({ text, query, locale, }) {
+    if (query.trim() === "")
+        return text;
+    return matchSpans(text, query, locale).map((span, index) => span.hit ? (_jsx("mark", { className: "rounded-mark bg-accent/25 font-semibold text-current", children: span.text }, index)) : (span.text));
+}

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

@@ -1,3 +1,4 @@
+import type { OpenTarget } from "../../foundations/types.js";
 import { type FormMode } from "../field/mode.js";
 import type { LucideIcon } from "lucide-react";
 import { type ReactNode } from "react";
@@ -18,19 +19,53 @@ 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;
+    /** A person or a company: its face before the name — the photo, or its initials when
+     *  `true`. Who is being chosen is recognised before it is read, in the list and in the field. */
+    avatar?: true | string;
+    /** What is read at a glance on the right, in tabular figures: the balance owed, the stock,
+     *  a state badge, a priority — a widget, not text. Where `meta` describes, this COMPARES:
+     *  lined up in one column, eight customers' debts are read top to bottom. */
+    aside?: ReactNode;
 }
+/**
+ * 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[];
     value?: string;
     onChange?: (id: string) => void;
     placeholder?: string;
-    /** What to do with the ones that don't fit. Without this, the footer only
-     *  informs. */
-    onBrowseAll?: () => void;
+    /** «Buscar más…»: the last option of the list, always there when this is — the record
+     *  may not be among the eight, or two of them may need their columns to tell apart. It
+     *  gets what was typed, so the list that chooses (`List onChoose`, in a modal of the
+     *  workspace) opens on the same search. */
+    onBrowseAll?: (query: string) => void;
+    /** «Crear «…»»: a record made from the typed text alone (Odoo's `name_create`); it returns
+     *  the new id — or a promise of it — and the field chooses it. Offered while something is
+     *  typed that no option is called exactly. The consumer appends the new item to `items`. */
+    onCreate?: (name: string) => string | Promise<string>;
+    /** «Crear y editar…»: the new record needs more than a name — open its form (in a workspace,
+     *  a modal) with the typed text as the name. Choosing it there is the consumer's. */
+    onCreateAndEdit?: (name: string) => void;
     /** Open the chosen record. Drawn as a trailing affordance, the way a many2one
      *  offers "open" next to "pick". Absent when there is nothing chosen. */
-    onOpen?: (id: string) => void;
+    onOpen?: (id: string, to: OpenTarget) => void;
+    /** Where the chosen record can open, the first being the button's (a modal, by default: the
+     *  form stays behind); the rest go in «Abrir en…». `onOpen` is told which was picked. */
+    openTargets?: readonly OpenTarget[];
     emptyText?: string;
     /** Placeholder of the field while it is being typed into. It is NOT a second
      *  box — the field itself is the search. */
@@ -39,10 +74,38 @@ 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 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 «Buscar más…» 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, query, emptyText, onLoadMore, loadingMore, "aria-label": ariaLabel, }: {
+    items: readonly PickerItem[];
+    marks: boolean;
+    hints: boolean;
+    remaining: number;
+    /** What was typed: it is marked in every row, so each row says why it is there. */
+    query?: string;
+    emptyText: string;
+    onLoadMore?: () => void;
+    loadingMore?: boolean;
+    /** Only when rendered outside the combobox, which otherwise names the list. */
+    "aria-label"?: string;
+}): import("react").JSX.Element;