@sincpro/web-ui 0.0.0-stage → 0.2.0

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

@@ -0,0 +1,128 @@
+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;
+    /** The line below. It exists because a thirty-entry menu without hints forces
+     *  you to open each one to discover what it does. */
+    hint?: string;
+    icon?: LucideIcon;
+    /** For the menus that CHOOSE (group by, favorites) instead of executing. */
+    checked?: boolean;
+    /** A hairline ABOVE this option. It separates the three rows of a date —months,
+     *  quarters, years— which are one group because they combine, but read as
+     *  three because they answer at three different zooms. */
+    divider?: boolean;
+    /** Cómo se SACA esta opción cuando se dibuja como ficha, si sacarla no es lo mismo que
+     *  volver a elegirla. El filtro a medida es el caso: elegirlo abre el constructor, y eso
+     *  no es lo que tiene que pasar al tocar su ×. */
+    onRemove?: () => void;
+    disabled?: boolean;
+    /** Visual mark at the end of the label. A string is drawn as a pill
+     *  —"maqueta", "nuevo"—; anything else is drawn as is, which is how a status
+     *  `Tag` or an already formatted counter comes in. */
+    badge?: ReactNode;
+    /** What THIS option does. It exists on top of the menu's `onSelect` because a
+     *  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
+     *  a separator — which also serves a purpose. */
+    label?: string;
+    /**
+     * The group folds under its label, and starts folded unless something in it
+     * is ticked.
+     *
+     * It exists for the DATE narrowings. «Fecha de pedido» is not one option, it
+     * is eleven —three months, four quarters, three years— and eleven options
+     * always open push the rest of the panel off the screen. A date is the only
+     * field that brings its own little calendar, so it is the only one that
+     * folds; the others are a list and a list does not need a door.
+     */
+    collapsible?: boolean;
+    options: MenuOption[];
+}
+declare const WIDTH: {
+    /** A menu of short verbs hanging off an icon: "duplicate", "delete". */
+    readonly sm: "min-w-44 max-w-64";
+    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. */
+chevron, active, iconOnly, variant, searchPlaceholder, emptyText, width, role, size, title, closeOnSelect, }: {
+    label: string;
+    groups: readonly MenuGroup[];
+    onSelect?: (id: string) => void;
+    surface?: "canvas" | "chrome";
+    align?: "start" | "end";
+    icon?: LucideIcon;
+    chevron?: boolean;
+    /** Something is chosen inside. A filter menu that doesn't look different when
+     *  it filters is how someone ends up looking at a trimmed list without
+     *  knowing it. */
+    active?: boolean;
+    /** `text` removes the frame and the background: it is the menu of an
+     *  application BAR. `button` —the default— is the menu of a control. */
+    variant?: "button" | "text";
+    /** With a search box, the menu filters over label and hint. It only goes in
+     *  when there are enough entries for searching to gain something — a search
+     *  box on top of four options is one more control between the hand and what
+     *  was already visible. */
+    searchPlaceholder?: string;
+    emptyText?: string;
+    /** `md` for a menu of verbs; `lg` when the entries carry a hint that cannot be
+     *  truncated without losing its reason to exist. */
+    width?: keyof typeof WIDTH;
+    /** The trigger looks like a BUTTON of that role. It is for the menu that
+     *  starts something —"＋ Create"—, which has to look like the main action and
+     *  not like a control of the list. Without this, the trigger is the usual
+     *  small one. */
+    role?: ButtonRole;
+    size?: ButtonSize;
+    /** What explains the menu on hover. It is not drawn. */
+    title?: string;
+    /** Icon only. `label` becomes the accessible name and the `title`, and stops
+     *  being drawn — it is the actions `⋯`, where the icon already says there is
+     *  more.
+     *
+     *  The label does NOT become optional when hidden: a menu without an
+     *  accessible name is a menu a screen reader announces as "button". */
+    iconOnly?: boolean;
+    /** Column and filter menus toggle several options in a row. Closing after
+     *  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

@@ -0,0 +1,89 @@
+"use client";
+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, 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. */
+chevron = true, active = false, iconOnly = false, variant = "button", searchPlaceholder, emptyText, width = "md", role, size = "md", title, closeOnSelect = true, }) {
+    const copy = useUiCopy();
+    const { contains } = useFilter({ sensitivity: "base" });
+    /* `text` is the menu of a BAR: no frame and no background, just the highlight
+       on hover. Five bordered menus on top of an application are five buttons
+       competing with the ones in the view, and the bar stops reading as an index.
+       `button` is the menu of a CONTROL —"filters ▾", "group ▾"—, and there the
+       frame is what says it can be pressed. */
+    const triggerClass = (open) => variant === "text"
+        ? surface === "chrome"
+            ? `border-transparent text-chrome-muted hover:bg-chrome-ink/12 hover:text-chrome-ink ${active || open ? "bg-chrome-ink/12 text-chrome-ink" : ""}`
+            : `border-transparent text-muted hover:bg-ink/6 hover:text-ink ${active || open ? "bg-ink/6 text-ink" : ""}`
+        : 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 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));
+        }, 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 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`),
+                            item,
+                        ]
+                        : [item];
+                })] }, g.label ?? gi))) }));
+}

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

@@ -0,0 +1 @@
+export { Menu, type MenuGroup, type MenuOption } from "./Menu.js";

package/dist/primitives/menu/index.js

@@ -0,0 +1,2 @@
+/* A data-driven dropdown: the actions `⋯` and "+ Create". */
+export { Menu } from "./Menu.js";

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

@@ -0,0 +1,49 @@
+import type { Tone } from "../../foundations/types.js";
+import type { LucideIcon } from "lucide-react";
+import type { ReactNode } from "react";
+/**
+ * UN AVISO sobre lo que se está mirando.
+ *
+ * Context: `Empty`, `Failed` y `Missing` dicen que NO HAY contenido y ocupan el
+ * lugar de la vista. Esto es lo contrario: hay contenido, se ve, y hace falta
+ * decir algo ADEMÁS —«hay asientos sin registrar en este período», «este período
+ * está cerrado», «se guardó»—. Sin esta pieza, cada pantalla se lo inventaba
+ * con un `div` y un color a ojo, y así es como el mismo grado de urgencia
+ * terminaba pintado de tres maneras.
+ *
+ * ── El tono es la ÚNICA decisión ────────────────────────────────────
+ *
+ *     info     un dato que cambia cómo se lee lo de abajo
+ *     warn     algo que conviene mirar antes de seguir
+ *     bad      algo que está mal y ya tuvo consecuencias
+ *     good     algo salió bien y no hay nada que hacer
+ *
+ * El ícono sale del tono y no se elige: un aviso rojo con un tilde verde adentro
+ * es una contradicción que alguien va a escribir si se lo dejamos escribir.
+ *
+ * ── Lo que NO hace ──────────────────────────────────────────────────
+ *
+ * No se cierra solo, no tiene temporizador y no se apila. Un aviso que
+ * desaparece a los cuatro segundos es un aviso que alguien no llegó a leer — eso
+ * es un `Toast`, que es otra pieza y otra pregunta («pasó algo lejos de acá»).
+ * Éste habla de lo que está en pantalla, así que se queda mientras sea cierto.
+ */
+export type CalloutProps = {
+    /** Qué pasa. Una oración, en la voz del producto. */
+    children: ReactNode;
+    /** Sin esto, `info`. */
+    tone?: Extract<Tone, "info" | "warn" | "bad" | "good">;
+    /** El encabezado, cuando la oración sola no alcanza. La mayoría no lo
+     *  necesita: un aviso de dos renglones con título es un cartel. */
+    title?: ReactNode;
+    /** Lo que resuelve el aviso, si hay algo que apretar. */
+    action?: ReactNode;
+    /** Presente = se puede cerrar. Ausente = no, porque lo que dice sigue siendo
+     *  cierto lo mire quien lo mire. */
+    onDismiss?: () => void;
+    /** El rótulo accesible de la ×. */
+    dismissLabel?: string;
+    /** Un ícono propio, cuando el del tono no dice lo suficiente. */
+    icon?: LucideIcon;
+};
+export declare function Callout({ children, tone, title, action, onDismiss, dismissLabel, icon, }: CalloutProps): import("react").JSX.Element;

package/dist/primitives/notice/Callout.js

@@ -0,0 +1,28 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { byDensity, useDensity } from "../../foundations/density.js";
+import { AlertTriangle, CheckCircle2, Info, OctagonAlert, X } from "lucide-react";
+const ICON = {
+    info: Info,
+    warn: AlertTriangle,
+    bad: OctagonAlert,
+    good: CheckCircle2,
+};
+/* El fondo es una capa del color sobre el papel y no un color propio: así el
+   aviso se lee sobre el piso y sobre el papel blanco sin dos juegos de tokens, y
+   sigue funcionando el día que cambie la paleta. */
+const SKIN = {
+    info: "border-info/25 bg-info/8 text-info",
+    warn: "border-warn/30 bg-warn/10 text-warn",
+    bad: "border-bad/25 bg-bad/8 text-bad",
+    good: "border-good/25 bg-good/8 text-good",
+};
+export function Callout({ children, tone = "info", title, action, onDismiss, dismissLabel, icon, }) {
+    const d = useDensity();
+    const Icon = icon ?? ICON[tone];
+    return (_jsxs("div", { 
+        /* `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-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/Notice.d.ts

@@ -0,0 +1,45 @@
+import { type LucideIcon } from "lucide-react";
+import type { ReactNode } from "react";
+export declare function Skeleton({ rows, label, }: {
+    /** How many row-silhouettes. Six is a screen of a list, not a guess at
+     *  the real count. */
+    rows?: number;
+    /** What a screen reader hears. The bars stay silent. */
+    label: string;
+}): import("react").JSX.Element;
+/** What is shown when there is nothing to show: a sentence, and the gesture
+ *  that resolves it if there is one. Never a drawing. */
+export declare function Empty({ sentence, action, 
+/** Centered for an empty list; left-aligned inside a block, where centering it
+ *  detaches it from everything else. */
+align, }: {
+    sentence: string;
+    action?: ReactNode;
+    align?: "center" | "start";
+}): import("react").JSX.Element;
+/**
+ * The sentence the backend wrote, whole and verbatim.
+ *
+ * Context: a hairline around a quiet red wash — it is not an alarm, it is an
+ * explanation. A bar on the left alone reads as a cut. Trimming the message or
+ * replacing it with one of our own is what forces you to go to the console to
+ * find out what happened.
+ */
+export declare function Failed({ heading, sentence, action, }: {
+    heading: string;
+    sentence: string;
+    action?: ReactNode;
+}): import("react").JSX.Element;
+/**
+ * Nobody knows how to draw this. It carries the full identifier because that is
+ * the only thing that makes it fixable.
+ */
+export declare function Missing({ heading, detail, icon: Icon, tone, }: {
+    heading: string;
+    detail?: string;
+    icon?: LucideIcon;
+    tone?: "warn" | "bad";
+}): import("react").JSX.Element;
+/** The icon `Missing` uses for what broke while being drawn, so that whoever
+ *  composes does not have to choose it. */
+export declare const ICONO_ROTO: LucideIcon;

package/dist/primitives/notice/Notice.js

@@ -0,0 +1,61 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { byDensity, useDensity } from "../../foundations/density.js";
+import { AlertTriangle, PackageX } from "lucide-react";
+/**
+ * Context: the ways a view says there is no content yet, and they are
+ * different because each one is fixed by a different person.
+ *
+ *     Skeleton  the content is coming. The silhouette stays so the eye
+ *               knows where the rows will land.
+ *     Empty     there is nothing yet, or the filter left nothing. It is NORMAL.
+ *     Failed    something broke. It carries the backend's sentence whole and
+ *               verbatim.
+ *     Missing   nobody knows how to resolve this. It is a wiring error.
+ *
+ * A generic «something went wrong» for all four forces you to open the console.
+ * A loading sentence drawn with `Empty` is the same mistake: it answers
+ * «there is nothing» while the data is still on its way.
+ */
+/** Quiet stand-in for a list that has not arrived.
+ *
+ *  The bars are the row: a name on the left, a figure on the right. That is
+ *  the scan of a list, held in place so the page does not jump when the rows
+ *  land. There is no shimmer. A pulse already means «this state is alive»
+ *  (`StatusDot`); a second one would spend motion on a wait. The sentence is
+ *  for the screen reader — the bars are not the message. */
+const SKELETON_NAME = ["w-48", "w-36", "w-56", "w-40", "w-44", "w-32"];
+export function Skeleton({ rows = 6, label, }) {
+    const d = useDensity();
+    return (_jsxs("div", { "aria-busy": "true", className: "flex flex-col", children: [_jsx("span", { className: "sr-only", children: label }), Array.from({ length: rows }, (_, i) => (_jsxs("div", { "aria-hidden": true, className: `flex items-center ${byDensity(d, "gap-3 px-2 py-2", "gap-2 px-1.5 py-1")}`, children: [_jsx("span", { className: `h-3.5 rounded-control bg-ink/8 ${SKELETON_NAME[i % SKELETON_NAME.length]}` }), _jsx("span", { className: "ml-auto h-3 w-14 rounded-control bg-ink/5" })] }, i)))] }));
+}
+/** What is shown when there is nothing to show: a sentence, and the gesture
+ *  that resolves it if there is one. Never a drawing. */
+export function Empty({ sentence, action, 
+/** Centered for an empty list; left-aligned inside a block, where centering it
+ *  detaches it from everything else. */
+align = "center", }) {
+    const centered = align === "center";
+    return (_jsxs("div", { className: `flex flex-wrap gap-3 px-4 py-10 ${centered ? "flex-col items-center text-center" : "items-center"}`, children: [_jsx("p", { className: "max-w-short text-body text-muted", children: sentence }), action] }));
+}
+/**
+ * The sentence the backend wrote, whole and verbatim.
+ *
+ * Context: a hairline around a quiet red wash — it is not an alarm, it is an
+ * explanation. A bar on the left alone reads as a cut. Trimming the message or
+ * replacing it with one of our own is what forces you to go to the console to
+ * find out what happened.
+ */
+export function Failed({ heading, sentence, action, }) {
+    return (_jsxs("div", { className: "rounded-control border border-bad/40 bg-bad/5 px-3 py-2.5", children: [_jsx("p", { className: "text-body font-medium text-bad", children: heading }), _jsx("p", { className: "mt-1.5 max-w-prose text-lead leading-relaxed text-ink", children: sentence }), action === undefined ? null : _jsx("div", { className: "mt-2.5", children: action })] }));
+}
+/**
+ * Nobody knows how to draw this. It carries the full identifier because that is
+ * the only thing that makes it fixable.
+ */
+export function Missing({ heading, detail, icon: Icon = PackageX, tone = "warn", }) {
+    return (_jsxs("div", { className: "flex h-full min-h-24 flex-col items-center justify-center gap-2 p-6 text-center", children: [_jsx(Icon, { className: `size-(--size-icon-lg) ${tone === "bad" ? "text-bad" : "text-warn"}`, strokeWidth: 1.75 }), _jsx("p", { className: "text-meta font-medium text-ink", children: heading }), detail === undefined ? null : (_jsx("p", { className: "max-w-short font-mono text-micro break-all text-muted", children: detail }))] }));
+}
+/** The icon `Missing` uses for what broke while being drawn, so that whoever
+ *  composes does not have to choose it. */
+export const ICONO_ROTO = AlertTriangle;

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

@@ -0,0 +1,55 @@
+import type { Tone } from "../../foundations/types.js";
+import { type ReactNode } from "react";
+export interface ToastSpec {
+    /** What happened, in a sentence that stands on its own. */
+    message: string;
+    tone?: Tone;
+    /** The long detail: the server's reason. It goes underneath and small. */
+    detail?: string;
+    /** Where to go, or how to undo. «Deshacer», «Ver el pago». With `href` a real
+     *  link is drawn —it can be opened in another tab, copied, shared—; with
+     *  `onSelect`, a button. Either closes the notice. */
+    action?: {
+        label: string;
+        onSelect?: () => void;
+        href?: string;
+    };
+    /** How long it lives, in ms. `0` = until it is closed. By default: the bad
+     *  ones stay, the rest leave after 8 s. */
+    duration?: number;
+    /** The notice's identity. Two notices with the same key are the SAME one: the
+     *  new one replaces the old one in its place, without stacking.
+     *
+     *  Context: the server sends an import's progress over a channel that can
+     *  repeat, and three identical stacked notices are not more information —
+     *  they are the same information, three times, taking up the screen. */
+    key?: string;
+}
+interface Toast extends ToastSpec {
+    id: number;
+}
+interface ToastApi {
+    show: (spec: ToastSpec) => number;
+    dismiss: (id: number) => void;
+}
+export declare function useToast(): ToastApi;
+/** The same API, or `null` when no `ToastProvider` is above. For a component that OFFERS
+ *  undo when the screen has a notice stack and still renders alone — in a story, in a test,
+ *  in an app that has not mounted the provider yet. */
+export declare function useToastIfAny(): ToastApi | null;
+export declare function ToastProvider({ children }: {
+    children: ReactNode;
+}): import("react").JSX.Element;
+/** The region of a given list of notices. `ToastProvider` draws it from its own state; it is
+ *  exported so it can be drawn without the context — a story that wants to see the tones
+ *  together and still.
+ *
+ *  Context: React Aria's queue is the behaviour (timers, pause, landmark, focus) and this
+ *  list is the content. Each notice in the list is mirrored into the queue once; when the
+ *  queue closes one — its timer ran out, its × or its action was pressed — `onDismiss`
+ *  hears it, and when the list drops one the queue closes it. */
+export declare function ToastLayer({ toasts, onDismiss, }: {
+    toasts: readonly Toast[];
+    onDismiss: (id: number) => void;
+}): import("react").JSX.Element | null;
+export {};