@sincpro/web-ui 0.0.0-stage → 0.1.0

package/dist/primitives/menu/Menu.js

@@ -0,0 +1,59 @@
+"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 } from "lucide-react";
+import { Autocomplete, Button as AriaButton, Header, Input, Menu as AriaMenu, MenuItem, MenuSection, MenuTrigger, SearchField, Separator, 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)",
+};
+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 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 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 : (
+                /* 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));
+                    return o.divider === true
+                        ? [
+                            _jsx(Separator, { className: "my-1 h-px border-0 bg-line" }, `${o.id}-divider`),
+                            item,
+                        ]
+                        : [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/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-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/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 {};

package/dist/primitives/notice/Toast.js

@@ -0,0 +1,142 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useUiCopy } from "../../foundations/copy.js";
+import { cn, focusRing } from "../../foundations/variants.js";
+import { CheckCircle2, Info, TriangleAlert, X, XCircle } from "lucide-react";
+import { createContext, useCallback, useContext, useEffect, useMemo, useRef, useState, } from "react";
+import { Button as AriaButton, Link as AriaLink, Text, UNSTABLE_Toast as AriaToast, UNSTABLE_ToastContent as ToastContent, UNSTABLE_ToastQueue as ToastQueue, UNSTABLE_ToastRegion as ToastRegion, } from "react-aria-components";
+const Ctx = createContext(null);
+export function useToast() {
+    const api = useContext(Ctx);
+    if (api === null) {
+        throw new Error("useToast needs a <ToastProvider> above it in the tree.");
+    }
+    return api;
+}
+/** 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 function useToastIfAny() {
+    return useContext(Ctx);
+}
+const ICON = {
+    neutral: Info,
+    info: Info,
+    good: CheckCircle2,
+    warn: TriangleAlert,
+    bad: XCircle,
+    accent: Info,
+};
+const TONE = {
+    neutral: "text-muted",
+    info: "text-info",
+    good: "text-good",
+    warn: "text-warn",
+    bad: "text-bad",
+    accent: "text-ink",
+};
+const LIFE = 8000;
+/** The default: the bad ones do NOT leave on their own. See the note above. */
+function lifeOf(toast) {
+    return toast.duration ?? (toast.tone === "bad" ? 0 : LIFE);
+}
+const LINK = "self-start rounded-control text-micro font-medium text-primary transition-colors duration-(--duration-instant) hover:underline hover:underline-offset-4 cursor-pointer outline-offset-1";
+export function ToastProvider({ children }) {
+    const [toasts, setToasts] = useState([]);
+    const next = useRef(1);
+    const dismiss = useCallback((id) => {
+        setToasts((prev) => prev.filter((t) => t.id !== id));
+    }, []);
+    const show = useCallback((spec) => {
+        const id = next.current;
+        next.current += 1;
+        setToasts((prev) => {
+            if (spec.key === undefined)
+                return [...prev, { ...spec, id }];
+            const i = prev.findIndex((t) => t.key === spec.key);
+            /* Replaces IN ITS PLACE and not at the end: if the notice jumps to the
+               bottom of the stack every time it updates, whoever was reading it loses
+               it. */
+            if (i < 0)
+                return [...prev, { ...spec, id }];
+            const n = [...prev];
+            n[i] = { ...spec, id };
+            return n;
+        });
+        return id;
+    }, []);
+    const api = useMemo(() => ({ show, dismiss }), [show, dismiss]);
+    return (_jsxs(Ctx.Provider, { value: api, children: [children, _jsx(ToastLayer, { toasts: toasts, onDismiss: dismiss })] }));
+}
+/** 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 function ToastLayer({ toasts, onDismiss, }) {
+    const copy = useUiCopy();
+    const [queue] = useState(() => new ToastQueue());
+    const [, setVersion] = useState(0);
+    const latest = useRef(onDismiss);
+    /* The ids the layer is closing because the LIST dropped them: those must not be reported
+       back as if the person had closed them. */
+    const dropping = useRef(new Set());
+    useEffect(() => {
+        latest.current = onDismiss;
+    }, [onDismiss]);
+    useEffect(() => {
+        const wanted = new Set(toasts.map((t) => t.id));
+        const queued = new Set(queue.visibleToasts.map((t) => t.content.id));
+        for (const queuedToast of queue.visibleToasts) {
+            if (!wanted.has(queuedToast.content.id)) {
+                dropping.current.add(queuedToast.content.id);
+                queue.close(queuedToast.key);
+            }
+        }
+        for (const toast of toasts) {
+            if (queued.has(toast.id))
+                continue;
+            const life = lifeOf(toast);
+            queue.add(toast, {
+                ...(life > 0 ? { timeout: life } : {}),
+                onClose: () => {
+                    if (dropping.current.delete(toast.id))
+                        return;
+                    latest.current(toast.id);
+                },
+            });
+        }
+        setVersion((v) => v + 1);
+    }, [toasts, queue]);
+    const byId = new Map(queue.visibleToasts.map((t) => [t.content.id, t]));
+    /* Drawn in the LIST's order, oldest at the bottom: the newest notice appears on top of
+       the stack and a replaced one stays where it was. */
+    const ordered = [...toasts].reverse().flatMap((t) => {
+        const queued = byId.get(t.id);
+        return queued === undefined ? [] : [{ toast: t, queued }];
+    });
+    /* Mounted only while there is something to show. React Aria registers the region as an F6
+       landmark when it mounts, and it skips the registration if the region's element does not
+       exist yet — which is the case for a region mounted empty (it draws nothing until the
+       first notice). Mounting it together with its first notice is what makes F6 reach it. */
+    if (ordered.length === 0)
+        return null;
+    return (_jsx(ToastRegion, { queue: queue, "aria-label": copy.shell.notices, 
+        /* `inset-x-4` with a fixed width and `ml-auto`: that way the notice rests against the
+           right but never runs off the left edge on a phone. */
+        className: ({ isFocusVisible }) => cn("fixed inset-x-4 bottom-4 z-50 ml-auto flex w-(--container-toast) max-w-full flex-col gap-2 rounded-panel outline-offset-4", focusRing({ isFocusVisible })), children: ordered.map(({ toast, queued }) => (_jsx(ToastCard, { toast: toast, queued: queued, queue: queue }, queued.key))) }));
+}
+function ToastCard({ toast, queued, queue, }) {
+    const copy = useUiCopy();
+    const tone = toast.tone ?? "neutral";
+    const Icon = ICON[tone];
+    const close = () => queue.close(queued.key);
+    const action = toast.action;
+    return (_jsxs(AriaToast, { toast: queued, className: ({ isFocusVisible }) => cn("flex min-w-0 items-start gap-2.5 rounded-panel border border-line bg-surface px-3.5 py-3 shadow-float outline-offset-2", focusRing({ isFocusVisible })), children: [_jsx(Icon, { className: `mt-px size-(--size-icon-md) shrink-0 ${TONE[tone]}`, strokeWidth: 2, "aria-hidden": true }), _jsxs(ToastContent, { className: "flex min-w-0 flex-1 flex-col gap-1", children: [_jsx(Text, { slot: "title", className: "text-meta text-ink", children: toast.message }), toast.detail === undefined ? null : (_jsx(Text, { slot: "description", className: "text-micro text-muted", children: toast.detail }))] }), action === undefined ? null : action.href !== undefined ? (_jsx(AriaLink, { href: action.href, onPress: close, className: ({ isFocusVisible }) => cn(LINK, "mt-px", focusRing({ isFocusVisible })), children: action.label })) : (_jsx(AriaButton, { onPress: () => {
+                    action.onSelect?.();
+                    close();
+                }, className: ({ isFocusVisible }) => cn(LINK, "mt-px", focusRing({ isFocusVisible })), children: action.label })), _jsx(AriaButton, { slot: "close", "aria-label": copy.shell.closeNotice, className: ({ isFocusVisible }) => cn("-mt-0.5 -mr-1 inline-flex size-6 shrink-0 cursor-default items-center justify-center rounded-pill text-muted transition-colors duration-(--duration-instant) hover:bg-ink/6 hover:text-ink pressed:bg-ink/10", focusRing({ isFocusVisible })), children: _jsx(X, { className: "size-(--size-icon-sm)", strokeWidth: 2, "aria-hidden": true }) })] }));
+}

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

@@ -0,0 +1,3 @@
+export { Callout, type CalloutProps } from "./Callout.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

@@ -0,0 +1,5 @@
+/* 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 { Empty, Failed, ICONO_ROTO, Missing, Skeleton, } from "./Notice.js";
+export { ToastLayer, ToastProvider, useToast, useToastIfAny, } from "./Toast.js";

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

@@ -0,0 +1,6 @@
+import type { ReactNode } from "react";
+import { type PopoverProps as AriaPopoverProps } from "react-aria-components";
+export type PopoverProps = Omit<AriaPopoverProps, "children"> & {
+    children: ReactNode;
+};
+export declare function Popover({ children, className, offset, ...props }: PopoverProps): import("react").JSX.Element;

package/dist/primitives/overlay/Popover.js

@@ -0,0 +1,27 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { tv } from "../../foundations/variants.js";
+import { composeRenderProps, Popover as AriaPopover, } from "react-aria-components";
+/**
+ * What floats over the page anchored to something: the calendar of a date picker, the list
+ * of a combobox, a small form opened from a button.
+ *
+ * Context: it is the same surface the system's `Menu` floats on — raised white, strong
+ * hairline, the `float` shadow — so everything that opens on top of the page reads as one
+ * kind of thing. React Aria places it, flips it when it does not fit, traps and returns the
+ * focus and closes it on Escape; this only dresses it.
+ */
+const popover = tv({
+    base: "rounded-panel border border-line-strong bg-surface text-ink shadow-float outline-0 transition-[opacity,translate] duration-(--duration-quick) ease-(--ease-out) forced-colors:bg-[Canvas]",
+    variants: {
+        isEntering: {
+            true: "opacity-0 placement-bottom:-translate-y-1 placement-top:translate-y-1",
+        },
+        isExiting: {
+            true: "opacity-0",
+        },
+    },
+});
+export function Popover({ children, className, offset = 6, ...props }) {
+    return (_jsx(AriaPopover, { offset: offset, ...props, className: composeRenderProps(className, (own, state) => popover({ ...state, className: own })), children: children }));
+}

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

@@ -0,0 +1,55 @@
+import { type PopoverProps } from "./Popover.js";
+import { type ReactElement, type ReactNode } from "react";
+/** What the trigger has to accept: the system's `Button` and `IconButton` both do — they
+ *  forward `ref`, spread native props and say what they open. */
+type TriggerElement = ReactElement<{
+    expanded?: boolean;
+    haspopup?: "menu" | "dialog" | "listbox";
+}>;
+type Naming = 
+/** Drawn at the top of the popover, and its accessible name. */
+{
+    title: string;
+    label?: undefined;
+}
+/** The accessible name when the popover has no visible title — a detail card whose
+ *  first line already says what it is. */
+ | {
+    title?: undefined;
+    label: string;
+};
+export type PopoverTriggerProps = Naming & {
+    /** The button that opens it — a system `Button` or `IconButton`, written as an element. */
+    trigger: TriggerElement;
+    /** The content. As a function it receives `close`, for the «Aplicar» of a small form. */
+    children: ReactNode | ((close: () => void) => ReactNode);
+    placement?: PopoverProps["placement"];
+};
+/**
+ * A small form or a detail opened from a button, floating next to it: «filtrar por monto»,
+ * «ver detalle del cliente».
+ *
+ * Context: it is the step below `Dialog`. A dialog takes the screen and asks something
+ * before moving on; this asks two numbers WITHOUT hiding the table they filter — the
+ * person keeps seeing what the answer is about. It floats on the system's `Popover`, so it
+ * looks like the calendar of a date picker and the list of a combobox.
+ *
+ * ── Why `trigger={<Button …/>}` and not a compound `<PopoverTrigger.Button>` ──
+ *
+ * The opener is an ordinary system button, written the way every other button of the
+ * screen is written. A compound form would need a second button component — a React Aria
+ * `Button` dressed like ours — and two buttons that look the same and are different
+ * components drift apart by the third release. One prop, one element, one button.
+ *
+ * ── It is React Aria's `DialogTrigger`, through `Pressable` ──
+ *
+ * `DialogTrigger` hands its trigger the press handlers and a `ref` through context; React
+ * Aria's `Pressable` is the adapter that clones them onto any element that forwards `ref`
+ * and spreads native props — which the system's buttons do. So the popover is anchored to
+ * the button itself, focus goes into the dialog and comes back to the button, and Escape
+ * and a click outside close it. The open state is kept here only to tell the button
+ * `expanded` and `haspopup="dialog"`, so it says what it opens the same way a menu
+ * trigger says it.
+ */
+export declare function PopoverTrigger({ trigger, title, label, children, placement, }: PopoverTriggerProps): import("react").JSX.Element;
+export {};

package/dist/primitives/overlay/PopoverTrigger.js

@@ -0,0 +1,38 @@
+"use client";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Popover } from "./Popover.js";
+import { cloneElement, useState, } from "react";
+import { Dialog, DialogTrigger, Heading, Pressable } from "react-aria-components";
+/**
+ * A small form or a detail opened from a button, floating next to it: «filtrar por monto»,
+ * «ver detalle del cliente».
+ *
+ * Context: it is the step below `Dialog`. A dialog takes the screen and asks something
+ * before moving on; this asks two numbers WITHOUT hiding the table they filter — the
+ * person keeps seeing what the answer is about. It floats on the system's `Popover`, so it
+ * looks like the calendar of a date picker and the list of a combobox.
+ *
+ * ── Why `trigger={<Button …/>}` and not a compound `<PopoverTrigger.Button>` ──
+ *
+ * The opener is an ordinary system button, written the way every other button of the
+ * screen is written. A compound form would need a second button component — a React Aria
+ * `Button` dressed like ours — and two buttons that look the same and are different
+ * components drift apart by the third release. One prop, one element, one button.
+ *
+ * ── It is React Aria's `DialogTrigger`, through `Pressable` ──
+ *
+ * `DialogTrigger` hands its trigger the press handlers and a `ref` through context; React
+ * Aria's `Pressable` is the adapter that clones them onto any element that forwards `ref`
+ * and spreads native props — which the system's buttons do. So the popover is anchored to
+ * the button itself, focus goes into the dialog and comes back to the button, and Escape
+ * and a click outside close it. The open state is kept here only to tell the button
+ * `expanded` and `haspopup="dialog"`, so it says what it opens the same way a menu
+ * trigger says it.
+ */
+export function PopoverTrigger({ trigger, title, label, children, placement = "bottom start", }) {
+    const [open, setOpen] = useState(false);
+    return (_jsxs(DialogTrigger, { isOpen: open, onOpenChange: setOpen, children: [_jsx(Pressable, { children: 
+                /* 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. */
+                cloneElement(trigger, { expanded: open, haspopup: "dialog" }) }), _jsx(Popover, { placement: placement, children: _jsx(Dialog, { "aria-label": label, className: "max-h-[inherit] max-w-sm min-w-56 overflow-auto p-3 outline-0", children: ({ close }) => (_jsxs(_Fragment, { children: [title === undefined ? null : (_jsx(Heading, { slot: "title", className: "mb-2 text-meta font-semibold text-ink", children: title })), typeof children === "function" ? children(close) : children] })) }) })] }));
+}

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

@@ -0,0 +1,38 @@
+import { type ReactNode } from "react";
+import { type TooltipProps as AriaTooltipProps } from "react-aria-components";
+export type TooltipProps = Omit<AriaTooltipProps, "children" | "offset"> & {
+    /** A few words. A sentence of help is a `Hint`, not a tooltip. */
+    children: ReactNode;
+    /** The small point toward the control. On by default: in a row of five icons it says
+     *  WHICH one is being named. */
+    arrow?: boolean;
+};
+export declare function Tooltip({ children, arrow, className, ...props }: TooltipProps): import("react").JSX.Element;
+export declare function useInTooltipTrigger(): boolean;
+/**
+ * Ties a control to its `Tooltip`: the control first, the tooltip second.
+ *
+ * Context: the timing is React Aria's on purpose — its default delay before the first one,
+ * and the warm-up that opens the next one at once while the pointer runs along a row of
+ * icons. A tooltip that opens on every pass of the mouse is noise; one that makes you wait
+ * on each icon of a row is a toll. `delay` is here for the rare control that needs it, not
+ * to tune each screen.
+ *
+ * ── Why the control is wrapped in `Focusable` here ──
+ *
+ * React Aria's trigger hands its pointer, focus and `aria-describedby` props to the control
+ * through context, and only a React Aria component reads that context. `Focusable` is the
+ * adapter for everything else: it clones the control with those props and a `ref`. Doing it
+ * here means a consumer writes `<TooltipTrigger><Button …/><Tooltip …/></TooltipTrigger>`
+ * with the system's own buttons — they forward `ref` and spread native props — or with a
+ * plain `<button>`, and never has to know the adapter exists.
+ */
+export declare function TooltipTrigger({ children, delay, closeDelay, disabled, }: {
+    /** The control — one element that forwards `ref` and spreads native props, like every
+     *  system button — then the `Tooltip`. */
+    children: ReactNode;
+    /** Milliseconds before the first tooltip opens. React Aria's default when absent. */
+    delay?: number;
+    closeDelay?: number;
+    disabled?: boolean;
+}): import("react").JSX.Element;