@sincpro/web-ui 0.0.0-stage → 0.2.0

package/dist/primitives/dialog/Dialog.js

@@ -0,0 +1,121 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useUiCopy } from "../../foundations/copy.js";
+import { cn, tv } from "../../foundations/variants.js";
+import { Button, IconButton } from "../button/Button.js";
+import { Maximize2, X } from "lucide-react";
+import { useId } from "react";
+import { Dialog as AriaDialog, Heading, Modal, ModalOverlay } from "react-aria-components";
+/** The scrim. The page stays visible under it — the dialog is ABOUT something on it.
+ *  On a phone it drops the padding and pushes the window to the bottom edge. */
+const overlay = tv({
+    base: "fixed inset-0 z-50 flex items-center justify-center bg-scrim/40 p-4 transition-opacity duration-(--duration-quick) ease-(--ease-out) max-sm:items-end max-sm:p-0 sm:p-8",
+    variants: {
+        isEntering: { true: "opacity-0" },
+        isExiting: { true: "opacity-0" },
+    },
+});
+/** The window. It never grows past the scrim's padding: when the form is long the BODY
+ *  scrolls and the header (what it is about) and the footer (what to do) stay in view.
+ *
+ *  On a phone it is a bottom sheet: every width is the full width, only the top corners
+ *  are rounded (the bottom ones sit on the screen's edge), it stops at `--size-sheet`,
+ *  and it enters from below — the motion says where it lives. */
+const modal = tv({
+    base: "flex max-h-full w-full flex-col overflow-hidden rounded-panel border border-line-strong bg-surface text-ink shadow-window outline-0 transition-[opacity,translate] duration-(--duration-panel) ease-(--ease-out) forced-colors:bg-[Canvas] max-sm:max-h-(--size-sheet) max-sm:max-w-none max-sm:rounded-b-none max-sm:border-x-0 max-sm:border-b-0",
+    variants: {
+        width: { sm: "max-w-md", md: "max-w-2xl", lg: "max-w-4xl" },
+        isEntering: { true: "translate-y-2 opacity-0 max-sm:translate-y-full" },
+        isExiting: {
+            true: "translate-y-1 opacity-0 duration-(--duration-quick) max-sm:translate-y-full",
+        },
+    },
+});
+/** The scrim and the window recipes. Internal — exported only so a test can read the
+ *  classes that make the bottom sheet: the modal is a portal and draws nothing on the
+ *  server. */
+export const dialogStyles = { overlay, modal };
+/** The inside of the window: React Aria's `Dialog` with the header, body and footer.
+ *
+ *  Internal — exported only so a test can read its markup, which the modal (a portal)
+ *  does not produce on the server. */
+export function DialogSurface({ title, subtitle, context, onClose, onExpand, expandLabel, footer, children, }) {
+    const copy = useUiCopy();
+    const subtitleId = useId();
+    const expand = expandLabel ?? copy.dialog.expand;
+    return (_jsxs(AriaDialog, { "aria-describedby": subtitle === undefined ? undefined : subtitleId, className: "flex max-h-[inherit] min-h-0 flex-1 flex-col outline-0", children: [_jsxs("header", { className: "flex shrink-0 items-start gap-3 border-b border-line px-4 py-3", children: [_jsxs("div", { className: "min-w-0 flex-1", children: [context === undefined ? null : (
+                            /* The context, on top and small. It is what keeps the first field
+                               from being «about what?». Same voice as a field label, not a
+                               console kicker: mono uppercase next to a form title was a
+                               second chrome fighting the first. */
+                            _jsxs("p", { className: "mb-0.5 flex min-w-0 flex-wrap items-baseline gap-x-2 gap-y-0.5 text-micro text-muted", children: [context.kind === undefined ? null : (_jsx("span", { className: "font-medium", children: context.kind })), _jsx("span", { className: "min-w-0 truncate text-ink", children: context.label }), context.detail === undefined ? null : (_jsx("span", { className: "min-w-0 truncate tabular-nums", children: context.detail }))] })), _jsx(Heading, { slot: "title", className: "text-title font-semibold text-ink", children: title }), subtitle === undefined ? null : (_jsx("p", { id: subtitleId, className: "mt-1 max-w-prose text-meta text-muted", children: subtitle }))] }), _jsxs("div", { className: "flex shrink-0 items-center gap-1", children: [onExpand === undefined ? null : (_jsx(IconButton, { icon: Maximize2, label: expand, onClick: onExpand })), _jsx(IconButton, { icon: X, label: copy.shell.close, onClick: onClose })] })] }), _jsx("div", { className: cn("min-h-0 flex-1 overflow-y-auto px-4 py-4", footer === undefined && "max-sm:safe-bottom"), children: children }), footer === undefined ? null : (_jsx("footer", { className: "flex shrink-0 flex-wrap items-center justify-end gap-2 border-t border-line bg-ground px-4 py-3 max-sm:safe-bottom", children: footer }))] }));
+}
+/**
+ * What has to be answered before moving on: a short form that blocks the page and keeps
+ * saying what it is about.
+ *
+ * Context: controlled by `open` + `onClose` — the screen that opens it owns the decision of
+ * when it is open, and every way out (×, Escape, the scrim) reports through `onClose`. It
+ * stays mounted for the exit transition after `open` turns `false`, so the window fades
+ * out instead of vanishing.
+ */
+export function Dialog({ open, width = "md", onClose, ...surface }) {
+    return (_jsx(ModalOverlay, { isOpen: open, onOpenChange: (next) => {
+            if (!next)
+                onClose();
+        }, isDismissable: true, className: overlay, children: _jsx(Modal, { className: (state) => modal({ ...state, width }), children: _jsx(DialogSurface, { onClose: onClose, ...surface }) }) }));
+}
+/** A dialog with steps, for what CANNOT be answered in one go.
+ *
+ *  ── When a form deserves to be a wizard ─────────────────────────────
+ *
+ *  Only when **one answer changes the following questions**. If the fields are
+ *  independent, splitting them into steps simplifies nothing: it adds clicks and
+ *  hides half the form, and whoever wants to review what they entered has to
+ *  navigate backwards. A long but complete form is filled in faster than three
+ *  short steps.
+ *
+ *  The case that does justify it: a purchase order. Whether it is a local purchase
+ *  or an import changes which conditions exist — an import asks for currency and
+ *  incoterm, a local one for payment terms. There, step 2 cannot even be drawn
+ *  until step 1 has been answered.
+ *
+ *  ── The steps already completed can be clicked ──────────────────────
+ *
+ *  Going back is not a mistake: it is reviewing. What you cannot do is jump
+ *  ahead, because the next step does not know yet what to ask.
+ *
+ *  ── It is the CONTENT of a `Dialog`, not a second one ────────────────
+ *
+ *  The focus trap, Escape and the return of focus are the dialog's. The wizard
+ *  only moves between steps, so it has no overlay behaviour of its own. */
+export function Wizard({ steps, current, onStepChange, children, onCancel, onBack, onNext, nextLabel, busy = false, }) {
+    /* The words of the wizard's own buttons come from the copy table. */
+    const words = useUiCopy().dialog;
+    const at = steps.findIndex((s) => s.id === current);
+    const step = steps[at];
+    const last = at === steps.length - 1;
+    const blocked = step?.blocked;
+    return (_jsxs("div", { className: "flex min-w-0 flex-col gap-3", children: [_jsx("ol", { className: "flex min-w-0 flex-wrap items-center gap-0.5 rounded-box bg-ink/4 p-1", children: steps.map((s, i) => {
+                    const done = i < at;
+                    const here = i === at;
+                    return (_jsx("li", { className: "flex items-center", children: _jsxs("button", { type: "button", disabled: i > at, onClick: () => {
+                                if (!here)
+                                    onStepChange?.(s.id);
+                            }, "aria-current": here ? "step" : undefined, "data-state": here ? "current" : done ? "done" : "pending", className: `inline-flex items-center gap-1.5 rounded-control px-2 py-1 text-micro transition-colors duration-(--duration-instant) disabled:pointer-events-none focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-primary ${here
+                                ? "bg-surface font-medium text-ink"
+                                : done
+                                    ? "text-ink hover:bg-surface/70"
+                                    : "text-muted"}`, children: [_jsx("span", { className: `inline-flex size-5 shrink-0 items-center justify-center rounded-pill text-micro tabular-nums ${here
+                                        ? "bg-ink text-surface"
+                                        : done
+                                            ? "bg-ink/10 text-ink"
+                                            : "bg-ink/8 text-muted"}`, children: i + 1 }), s.label] }) }, s.id));
+                }) }), _jsx("div", { className: "min-w-0", children: children }), _jsxs("div", { className: "flex flex-wrap items-center gap-2 border-t border-line pt-3", children: [blocked === undefined ? null : (
+                    /* The reason, next to the disabled button. A grey «next» with no
+                       explanation is a dead end: the user tries, nothing happens, and
+                       there is no way to know what is missing. */
+                    _jsx("span", { className: "mr-auto min-w-0 text-micro text-warn", children: blocked })), _jsxs("span", { className: blocked === undefined
+                            ? "ml-auto flex items-center gap-2"
+                            : "flex items-center gap-2", children: [onCancel === undefined ? null : (_jsx(Button, { role: "ghost", onClick: onCancel, children: words.cancel })), at > 0 ? (_jsx(Button, { role: "secondary", onClick: onBack, children: words.back })) : null, _jsx(Button, { role: "primary", onClick: onNext, disabled: blocked !== undefined || busy, "aria-busy": busy || undefined, children: busy ? words.busy : (nextLabel ?? (last ? words.finish : words.next)) })] })] })] }));
+}

package/dist/primitives/dialog/Drill.d.ts

@@ -0,0 +1,90 @@
+import { type DialogContext, type DialogWidth } from "./Dialog.js";
+import { type ReactNode, type RefObject } from "react";
+/** Where the drill was opened from: the page's record. The first crumb of the trail. */
+export type DrillOrigin = DialogContext;
+/** Which contexts are open, in order, and the ways to move between them. */
+export interface DrillState {
+    /** The ids of the open contexts, from the first opened to the one in front. */
+    readonly path: readonly string[];
+    /** One level deeper. An id already on the path goes back to it instead: a product
+     *  that leads to its supplier that leads to the same product is a loop, not depth. */
+    open: (id: string) => void;
+    /** Up one level. On the first one, it closes. */
+    back: () => void;
+    /** Back to the context with this id, closing the ones in front of it. */
+    to: (id: string) => void;
+    /** Close every level: back to the page. */
+    close: () => void;
+    /** Internal: the control that opened each level, where focus returns when the level
+     *  above it closes. Written by `open`, read by `Drill`. */
+    readonly focusMarks: RefObject<(HTMLElement | null)[]>;
+}
+/** One level deeper: push the id — or, when it is already open, go back to it. Internal,
+ *  exported for the test. */
+export declare function openPath(path: readonly string[], id: string): readonly string[];
+/** Back to the context with this id; an id not on the path changes nothing. */
+export declare function toPath(path: readonly string[], id: string): readonly string[];
+/** The written contexts that are open, in the order of the path. A context on the path
+ *  that is not written is skipped: there is nothing to draw for it. */
+export declare function framesOf(children: ReactNode, path: readonly string[]): DrillContextProps[];
+/** The state of a `Drill`: the path of open contexts. Pass it to `<Drill state={…}>` and
+ *  call `open(id)` from wherever the context is opened — a relation's «Abrir», a
+ *  `Picker`'s open button, a rail action, a line's cell. */
+export declare function useDrill(initial?: readonly string[]): DrillState;
+export interface DrillContextProps {
+    /** What `open(id)` names. Unique inside the drill. */
+    id: string;
+    /** The context's name: the title while it is in front, its crumb when it is behind.
+     *  Short — «Línea 3», «Impresora térmica 80 mm», «Registrar pago». */
+    title: string;
+    /** One sentence under the title; also the dialog's description while in front. */
+    subtitle?: string;
+    /** This context's actions — Cancel and ONE primary. Drawn only while it is in front. */
+    footer?: ReactNode;
+    /** No padding of its own: for a child that is already a surface with its own margins
+     *  (a `Record`). A form or a wizard keeps the padding. */
+    flush?: boolean;
+    children: ReactNode;
+}
+export interface DrillProps {
+    state: DrillState;
+    /** The page's record, as the first crumb: «pedido · S00142». Pressing it closes. */
+    origin?: DrillOrigin;
+    /** One width for every level: a window that changes width at each step jumps under the
+     *  pointer. `lg` by default — a record with pages and lines needs it. */
+    width?: DialogWidth;
+    /** The `Drill.Context`s. Which ones are open is the state's path. */
+    children: ReactNode;
+}
+/**
+ * The inside of the window: the trail, the context in front (and the ones behind it,
+ * hidden), and the footer of the one in front.
+ *
+ * Internal — exported only so a test can read its markup, which the modal (a portal)
+ * does not produce on the server.
+ */
+export declare function DrillSurface({ frames, origin, onBack, onTo, onClose, focusMarks, }: {
+    frames: readonly DrillContextProps[];
+    origin?: DrillOrigin;
+    onBack: () => void;
+    onTo: (id: string) => void;
+    onClose: () => void;
+    focusMarks?: RefObject<(HTMLElement | null)[]>;
+}): import("react").JSX.Element | null;
+/**
+ * ONE dialog that holds a stack of contexts opened from a record — and from each other —
+ * with a trail back to the page. See the header of this file.
+ *
+ *     const drill = useDrill();
+ *     …<RelationValue name={product} onOpen={() => drill.open("product")} />…
+ *     <Drill state={drill} origin={{ kind: "pedido", label: "S00142" }}>
+ *       <Drill.Context id="product" title={product} flush>
+ *         <Record identity={…}>…</Record>
+ *       </Drill.Context>
+ *       <Drill.Context id="supplier" title={supplier} footer={…}>…</Drill.Context>
+ *     </Drill>
+ */
+export declare function Drill({ state, origin, width, children }: DrillProps): import("react").JSX.Element;
+export declare namespace Drill {
+    var Context: ((props: DrillContextProps) => ReactNode) & import("../../foundations/slots.js").Slotted<"context">;
+}

package/dist/primitives/dialog/Drill.js

@@ -0,0 +1,172 @@
+"use client";
+import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { fillCopy, useUiCopy } from "../../foundations/copy.js";
+import { flatten, propsOf, slot, slotOf } from "../../foundations/slots.js";
+import { cn, focusRing, tv } from "../../foundations/variants.js";
+import { IconButton } from "../button/Button.js";
+import { dialogStyles, } from "./Dialog.js";
+import { ArrowLeft, ChevronRight, X } from "lucide-react";
+import { useEffect, useId, useRef, useState } from "react";
+import { useKeyboard } from "react-aria";
+import { Dialog as AriaDialog, Heading, Link, Modal, ModalOverlay, } from "react-aria-components";
+function focused() {
+    if (typeof document === "undefined")
+        return null;
+    return document.activeElement instanceof HTMLElement ? document.activeElement : null;
+}
+/** One level deeper: push the id — or, when it is already open, go back to it. Internal,
+ *  exported for the test. */
+export function openPath(path, id) {
+    const at = path.indexOf(id);
+    return at === -1 ? [...path, id] : path.slice(0, at + 1);
+}
+/** Back to the context with this id; an id not on the path changes nothing. */
+export function toPath(path, id) {
+    const at = path.indexOf(id);
+    return at === -1 ? path : path.slice(0, at + 1);
+}
+/** The written contexts that are open, in the order of the path. A context on the path
+ *  that is not written is skipped: there is nothing to draw for it. */
+export function framesOf(children, path) {
+    const written = flatten(children)
+        .filter((node) => slotOf(node) === "context")
+        .map((node) => propsOf(node))
+        .filter((props) => props !== undefined);
+    return path
+        .map((id) => written.find((context) => context.id === id))
+        .filter((frame) => frame !== undefined);
+}
+/** The state of a `Drill`: the path of open contexts. Pass it to `<Drill state={…}>` and
+ *  call `open(id)` from wherever the context is opened — a relation's «Abrir», a
+ *  `Picker`'s open button, a rail action, a line's cell. */
+export function useDrill(initial = []) {
+    const [path, setPath] = useState(initial);
+    const focusMarks = useRef([]);
+    return {
+        path,
+        open: (id) => {
+            if (!path.includes(id))
+                focusMarks.current[path.length] = focused();
+            setPath(openPath(path, id));
+        },
+        back: () => setPath(path.slice(0, -1)),
+        to: (id) => setPath(toPath(path, id)),
+        close: () => setPath([]),
+        focusMarks,
+    };
+}
+const crumb = tv({
+    extend: focusRing,
+    base: "block max-w-(--container-crumb) min-w-0 cursor-pointer truncate rounded-mark text-muted transition-colors duration-(--duration-instant) hover:text-ink hover:underline hover:underline-offset-4",
+});
+/**
+ * The inside of the window: the trail, the context in front (and the ones behind it,
+ * hidden), and the footer of the one in front.
+ *
+ * Internal — exported only so a test can read its markup, which the modal (a portal)
+ * does not produce on the server.
+ */
+export function DrillSurface({ frames, origin, onBack, onTo, onClose, focusMarks, }) {
+    const copy = useUiCopy();
+    const depth = frames.length;
+    const top = frames[depth - 1];
+    const parent = depth > 1 ? frames[depth - 2] : undefined;
+    const bodies = useRef(new Map());
+    const was = useRef(depth);
+    const subtitleId = useId();
+    const { keyboardProps } = useKeyboard({
+        onKeyDown: (e) => {
+            if (e.key !== "Escape") {
+                e.continuePropagation();
+                return;
+            }
+            if (depth > 1)
+                onBack();
+            else
+                onClose();
+        },
+    });
+    /* Focus follows the level. Down: into the new context, so the keyboard does not stay on
+       a control that is now hidden. Up: back to what opened the level that closed. */
+    const topId = top?.id;
+    useEffect(() => {
+        const before = was.current;
+        was.current = depth;
+        if (before === depth || depth === 0 || topId === undefined)
+            return;
+        const box = bodies.current.get(topId);
+        if (depth > before) {
+            box?.focus();
+            return;
+        }
+        const mark = focusMarks?.current[depth];
+        (mark?.isConnected === true ? mark : box)?.focus();
+    }, [depth, topId, focusMarks]);
+    if (top === undefined)
+        return null;
+    const trail = [
+        ...(origin === undefined
+            ? []
+            : [
+                {
+                    key: "\u0000origin",
+                    label: (_jsxs(_Fragment, { children: [origin.kind === undefined ? null : (_jsxs("span", { className: "font-medium", children: [origin.kind, " "] })), _jsx("span", { className: "text-ink", children: origin.label })] })),
+                    onPress: onClose,
+                },
+            ]),
+        ...frames.slice(0, -1).map((frame) => ({
+            key: frame.id,
+            label: frame.title,
+            onPress: () => onTo(frame.id),
+        })),
+    ];
+    return (_jsx(AriaDialog, { ...(top.subtitle === undefined ? {} : { "aria-describedby": subtitleId }), className: "flex max-h-[inherit] min-h-0 flex-1 flex-col outline-0", children: _jsxs("div", { ...keyboardProps, className: "flex max-h-[inherit] min-h-0 flex-1 flex-col", children: [_jsxs("header", { className: "flex shrink-0 items-start gap-2 border-b border-line px-4 py-3", children: [parent === undefined ? null : (_jsx("span", { className: "-ml-1.5 shrink-0", children: _jsx(IconButton, { icon: ArrowLeft, label: fillCopy(copy.drill.back, { name: parent.title }), onClick: onBack }) })), _jsxs("div", { className: "min-w-0 flex-1", children: [trail.length === 0 ? null : (
+                                /* Where this was opened from, small and on top — the same place `Dialog`
+                                   says what it is about. Every crumb is a way back; the one in front is
+                                   not a crumb, it is the title. */
+                                _jsx("nav", { "aria-label": copy.drill.trail, className: "mb-0.5 flex min-w-0", children: _jsx("ol", { className: "flex min-w-0 flex-wrap items-center gap-x-1 gap-y-0.5 text-micro", children: trail.map((one, i) => (_jsxs("li", { className: "flex min-w-0 items-center gap-1", children: [i === 0 ? null : (_jsx(ChevronRight, { className: "size-(--size-icon-sm) shrink-0 text-line-strong", strokeWidth: 2, "aria-hidden": true })), _jsx(Link, { onPress: one.onPress, className: ({ isFocusVisible }) => crumb({ isFocusVisible }), children: one.label })] }, one.key))) }) })), _jsx(Heading, { slot: "title", className: "truncate text-title font-semibold text-ink", children: top.title }), top.subtitle === undefined ? null : (_jsx("p", { id: subtitleId, className: "mt-1 max-w-prose text-meta text-muted", children: top.subtitle }))] }), _jsx(IconButton, { icon: X, label: copy.shell.close, onClick: onClose })] }), frames.map((frame) => {
+                    const front = frame.id === top.id;
+                    return (
+                    /* Each level scrolls on its own and the ones behind are `hidden`, not gone:
+                       their state — a half-typed payment, the open tab of a product — is still
+                       there when the level above closes. */
+                    _jsx("div", { ref: (node) => {
+                            if (node === null)
+                                bodies.current.delete(frame.id);
+                            else
+                                bodies.current.set(frame.id, node);
+                        }, hidden: !front, tabIndex: -1, "data-drill-context": frame.id, className: cn("min-h-0 flex-1 overflow-y-auto outline-0", frame.flush !== true && "px-4 py-4", front && frame.footer === undefined && "max-sm:safe-bottom"), children: frame.children }, frame.id));
+                }), top.footer === undefined ? null : (_jsx("footer", { className: "flex shrink-0 flex-wrap items-center justify-end gap-2 border-t border-line bg-ground px-4 py-3 max-sm:safe-bottom", children: top.footer }))] }) }));
+}
+/** One context of a drill: a title, what goes inside, and its own footer. It does not
+ *  draw where it is written — the `Drill` draws it when its id is on the path. */
+const DrillContextSlot = slot("context", (_props) => null);
+/**
+ * ONE dialog that holds a stack of contexts opened from a record — and from each other —
+ * with a trail back to the page. See the header of this file.
+ *
+ *     const drill = useDrill();
+ *     …<RelationValue name={product} onOpen={() => drill.open("product")} />…
+ *     <Drill state={drill} origin={{ kind: "pedido", label: "S00142" }}>
+ *       <Drill.Context id="product" title={product} flush>
+ *         <Record identity={…}>…</Record>
+ *       </Drill.Context>
+ *       <Drill.Context id="supplier" title={supplier} footer={…}>…</Drill.Context>
+ *     </Drill>
+ */
+export function Drill({ state, origin, width = "lg", children }) {
+    /* While the window fades out the path is already empty: it keeps drawing the last levels
+       it had, so the content does not vanish before the window does. */
+    const [lastPath, setLastPath] = useState(state.path);
+    if (state.path.length > 0 && state.path !== lastPath)
+        setLastPath(state.path);
+    const path = state.path.length > 0 ? state.path : lastPath;
+    const frames = framesOf(children, path);
+    return (_jsx(ModalOverlay, { isOpen: state.path.length > 0, onOpenChange: (next) => {
+            if (!next)
+                state.close();
+        }, isDismissable: true, 
+        /* Escape is ours: up one level, not out of everything. See the header. */
+        isKeyboardDismissDisabled: true, className: dialogStyles.overlay, children: _jsx(Modal, { className: (s) => dialogStyles.modal({ ...s, width }), children: _jsx(DrillSurface, { frames: frames, ...(origin === undefined ? {} : { origin }), onBack: state.back, onTo: state.to, onClose: state.close, focusMarks: state.focusMarks }) }) }));
+}
+Drill.Context = DrillContextSlot;

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

@@ -0,0 +1,2 @@
+export { Dialog, type DialogContext, type DialogProps, type DialogWidth, Wizard, type WizardProps, type WizardStep, } from "./Dialog.js";
+export { Drill, type DrillContextProps, type DrillOrigin, type DrillProps, type DrillState, useDrill, } from "./Drill.js";

package/dist/primitives/dialog/index.js

@@ -0,0 +1,4 @@
+/* What has to be answered before moving on. */
+export { Dialog, Wizard, } from "./Dialog.js";
+/* One dialog that holds a stack of contexts opened from a record, and from each other. */
+export { Drill, useDrill, } from "./Drill.js";

package/dist/primitives/disclosure/Disclosure.d.ts

@@ -0,0 +1,36 @@
+import { type ReactNode } from "react";
+export type DisclosureProps = {
+    /** The name of what folds. */
+    title: ReactNode;
+    children: ReactNode;
+    /** Its key inside an `Accordion`. Needed only when the accordion is controlled or has a
+     *  `defaultExpanded`. */
+    id?: string;
+    /** Something about the content, at the right of the row: «3 líneas», «Bs 1.240,00». It is
+     *  what lets a closed section be read without opening it. */
+    detail?: ReactNode;
+    defaultExpanded?: boolean;
+    expanded?: boolean;
+    onExpandedChange?: (expanded: boolean) => void;
+    disabled?: boolean;
+    /** The heading level of the title, so the outline of the page stays true. */
+    level?: 2 | 3 | 4 | 5 | 6;
+};
+export declare function Disclosure({ title, children, id, detail, defaultExpanded, expanded, onExpandedChange, disabled, level, }: DisclosureProps): import("react").JSX.Element;
+/**
+ * Several `Disclosure`s that work as one: by default opening one closes the other.
+ *
+ * Context: a FAQ or the groups of a long form read better one at a time — the open section
+ * is the one being read and the rest stay as an index. `allowsMultipleExpanded` is for when
+ * the sections are compared, not read (the lines of two groups side by side). The value is
+ * a list of the sections' `id`s, not React Aria's `Set<Key>`, like every other control.
+ */
+export declare function Accordion({ children, allowsMultipleExpanded, defaultExpanded, expanded, onExpandedChange, disabled, }: {
+    /** `Disclosure`s, each with its `id`. */
+    children: ReactNode;
+    allowsMultipleExpanded?: boolean;
+    defaultExpanded?: string[];
+    expanded?: string[];
+    onExpandedChange?: (ids: string[]) => void;
+    disabled?: boolean;
+}): import("react").JSX.Element;

package/dist/primitives/disclosure/Disclosure.js

@@ -0,0 +1,52 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn, focusRing, tv } from "../../foundations/variants.js";
+import { ChevronRight } from "lucide-react";
+import { useContext } from "react";
+import { Button as AriaButton, Disclosure as AriaDisclosure, DisclosureGroup as AriaDisclosureGroup, DisclosureGroupStateContext, DisclosurePanel, DisclosureStateContext, Heading, } from "react-aria-components";
+/**
+ * A section that folds: the advanced options of a form, a question of a FAQ, the lines of a
+ * group.
+ *
+ * Context: it is a HEADING ROW, not a card. What folds is part of the page it is on — the
+ * rest of the form, the rest of the list — so it is separated by hairlines and not boxed:
+ * a box would say «this is another thing», and the advanced options of an invoice are still
+ * the invoice. The title is set like a field label (`text-meta`, medium) because that is
+ * what it is: the name of what is underneath.
+ *
+ * The chevron points right when closed and turns down when open — the one mark everybody
+ * already reads as «there is more here». React Aria owns the rest: the row is a real button
+ * with `aria-expanded`, the panel is `hidden="until-found"` when closed (the browser's
+ * find-in-page still opens it), and the height animates from the measure it publishes.
+ */
+const row = tv({
+    extend: focusRing,
+    base: "flex w-full items-center gap-2 rounded-control px-2 py-2 text-left text-meta font-medium text-ink transition-colors duration-(--duration-instant) hover:bg-ink/6 pressed:bg-ink/10",
+    variants: {
+        isDisabled: {
+            true: "cursor-not-allowed text-muted hover:bg-transparent forced-colors:text-[GrayText]",
+        },
+    },
+});
+function Header({ title, detail, level, }) {
+    const isExpanded = useContext(DisclosureStateContext)?.isExpanded ?? false;
+    return (_jsx(Heading, { level: level, className: "m-0", children: _jsxs(AriaButton, { slot: "trigger", className: (state) => row(state), children: [_jsx(ChevronRight, { "aria-hidden": true, strokeWidth: 2, className: cn("size-(--size-icon-md) shrink-0 text-muted transition-transform duration-(--duration-quick) ease-(--ease-out)", isExpanded && "rotate-90") }), _jsx("span", { className: "min-w-0 flex-1 truncate", children: title }), detail === undefined ? null : (_jsx("span", { className: "shrink-0 text-micro font-normal text-muted tabular-nums", children: detail }))] }) }));
+}
+export function Disclosure({ title, children, id, detail, defaultExpanded, expanded, onExpandedChange, disabled, level = 3, }) {
+    // Inside an accordion the group draws the line above; alone, it closes itself on both sides.
+    const inGroup = useContext(DisclosureGroupStateContext) !== null;
+    return (_jsxs(AriaDisclosure, { id: id, defaultExpanded: defaultExpanded, isExpanded: expanded, onExpandedChange: onExpandedChange, isDisabled: disabled, className: cn("border-line py-1", inGroup ? "border-b" : "border-y"), children: [_jsx(Header, { title: title, detail: detail, level: level }), _jsx(DisclosurePanel, { className: "h-(--disclosure-panel-height) overflow-clip motion-safe:transition-[height] motion-safe:duration-(--duration-panel) motion-safe:ease-(--ease-out)", children: _jsx("div", { className: "px-2 pt-1 pb-3 text-meta text-ink", children: children }) })] }));
+}
+/**
+ * Several `Disclosure`s that work as one: by default opening one closes the other.
+ *
+ * Context: a FAQ or the groups of a long form read better one at a time — the open section
+ * is the one being read and the rest stay as an index. `allowsMultipleExpanded` is for when
+ * the sections are compared, not read (the lines of two groups side by side). The value is
+ * a list of the sections' `id`s, not React Aria's `Set<Key>`, like every other control.
+ */
+export function Accordion({ children, allowsMultipleExpanded = false, defaultExpanded, expanded, onExpandedChange, disabled, }) {
+    return (_jsx(AriaDisclosureGroup, { allowsMultipleExpanded: allowsMultipleExpanded, defaultExpandedKeys: defaultExpanded, expandedKeys: expanded, onExpandedChange: onExpandedChange === undefined
+            ? undefined
+            : (keys) => onExpandedChange([...keys].map(String)), isDisabled: disabled, className: "border-t border-line", children: children }));
+}

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

@@ -0,0 +1 @@
+export { Accordion, Disclosure, type DisclosureProps, } from "./Disclosure.js";

package/dist/primitives/disclosure/index.js

@@ -0,0 +1,2 @@
+/* LO QUE SE PLIEGA — una sección que se abre y se cierra, y un grupo de ellas. */
+export { Accordion, Disclosure, } from "./Disclosure.js";

package/dist/primitives/field/Checks.d.ts

@@ -0,0 +1,57 @@
+import { type FormMode } from "./mode.js";
+export interface CheckItem {
+    value: string;
+    label: string;
+    /** The second line: what the thing is, not a second name. */
+    detail?: string;
+    disabled?: boolean;
+}
+/**
+ * One yes/no answer of a form: «Exento de IVA», «Enviar la factura por correo al
+ * publicar».
+ *
+ * Context: it is React Aria's `Checkbox` — a native checkbox input inside the label, so the
+ * whole sentence is the click target, Space toggles it and the form reads it as a checkbox.
+ * `mixed` is its indeterminate state: the parent of a group where only some are on, and
+ * pressing it turns them ALL on — never all off, because «some» is closer to «all» than to
+ * «none» in what the person was doing.
+ *
+ * Inside a `Field` it is named by the field's label AND its own sentence, and described by
+ * the field's hint and error — the same wiring as `Switch`.
+ */
+export declare function Checkbox({ checked, mixed, onChange, label, disabled, mode, id: ownId, describedBy: ownDescribedBy, invalid: ownInvalid, }: {
+    checked: boolean;
+    /** Some of the children are on. Pressing it turns them all on. */
+    mixed?: boolean;
+    onChange?: (next: boolean) => void;
+    label: string;
+    disabled?: boolean;
+    mode?: FormMode;
+    id?: string;
+    describedBy?: string;
+    invalid?: boolean;
+}): import("react").JSX.Element;
+/**
+ * Several answers, all in sight, more than one allowed: the taxes of a product, the
+ * warehouses a user can see, the documents of an export.
+ *
+ * Context: it is React Aria's `ListBox` with `selectionMode="multiple"` and not a stack of
+ * checkboxes, because what it is to a keyboard is ONE stop with a list inside — Tab lands on
+ * it, the arrows move, Space toggles, Home and End jump, a letter finds the row — and twelve
+ * Tab stops is how a form becomes a chore. A disabled row is drawn and skipped. The value is
+ * a plain `string[]`, never React Aria's `Selection`.
+ *
+ * `mono` is for when the label was written by the machine — an account code, a tax code —
+ * and the detail was written by a person. The two faces are the point.
+ */
+export declare function CheckList({ label, items, value, onChange, mono, emptyLabel, describedBy: ownDescribedBy, mode, }: {
+    label: string;
+    items: readonly CheckItem[];
+    value: readonly string[];
+    onChange?: (next: string[]) => void;
+    mono?: boolean;
+    /** What read mode says when nothing is chosen. By default, the copy table's `field.none`. */
+    emptyLabel?: string;
+    describedBy?: string;
+    mode?: FormMode;
+}): import("react").JSX.Element;

package/dist/primitives/field/Checks.js

@@ -0,0 +1,72 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useUiCopy } from "../../foundations/copy.js";
+import { useFieldIds } from "./context.js";
+import { useFormMode } from "./mode.js";
+import { Check, Minus } from "lucide-react";
+import { useId } from "react";
+import { Checkbox as AriaCheckbox, ListBox, ListBoxItem, Text, } from "react-aria-components";
+function Mark({ on, mixed, focus = false, invalid = false, }) {
+    return (_jsx("span", { "aria-hidden": true, className: `inline-flex size-4 shrink-0 items-center justify-center rounded-mark border transition-colors duration-(--duration-instant) forced-color-adjust-none ${on
+            ? "border-primary bg-primary text-surface forced-colors:border-[Highlight] forced-colors:bg-[Highlight] forced-colors:text-[HighlightText]"
+            : `bg-surface text-transparent ${invalid ? "border-danger" : "border-line-strong"} forced-colors:border-[ButtonBorder]`} ${focus ? "outline-2 outline-offset-2 outline-primary forced-colors:outline-[Highlight]" : ""}`, children: mixed ? (_jsx(Minus, { className: "size-3", strokeWidth: 2.5 })) : (_jsx(Check, { className: "size-3", strokeWidth: 2.5 })) }));
+}
+/**
+ * One yes/no answer of a form: «Exento de IVA», «Enviar la factura por correo al
+ * publicar».
+ *
+ * Context: it is React Aria's `Checkbox` — a native checkbox input inside the label, so the
+ * whole sentence is the click target, Space toggles it and the form reads it as a checkbox.
+ * `mixed` is its indeterminate state: the parent of a group where only some are on, and
+ * pressing it turns them ALL on — never all off, because «some» is closer to «all» than to
+ * «none» in what the person was doing.
+ *
+ * Inside a `Field` it is named by the field's label AND its own sentence, and described by
+ * the field's hint and error — the same wiring as `Switch`.
+ */
+export function Checkbox({ checked, mixed = false, onChange, label, disabled = false, mode, id: ownId, describedBy: ownDescribedBy, invalid: ownInvalid, }) {
+    const { id, labelledBy, describedBy, invalid } = useFieldIds({
+        id: ownId,
+        describedBy: ownDescribedBy,
+        invalid: ownInvalid,
+    });
+    const textId = useId();
+    const on = checked || mixed;
+    if (useFormMode(mode) === "read") {
+        return (_jsxs("span", { className: "flex min-h-(--size-control-md) items-center gap-2 text-meta text-ink", children: [_jsx(Mark, { on: on, mixed: mixed && !checked }), label] }));
+    }
+    return (_jsx(AriaCheckbox, { id: id, "aria-labelledby": labelledBy === undefined ? undefined : `${labelledBy} ${textId}`, "aria-describedby": describedBy, isSelected: checked, isIndeterminate: mixed, onChange: (next) => onChange?.(mixed ? true : next), isDisabled: disabled, isInvalid: invalid, className: "group inline-flex min-w-0 cursor-pointer items-center gap-2.5 text-meta text-ink disabled:cursor-not-allowed disabled:opacity-45", children: ({ isSelected, isIndeterminate, isFocusVisible, isInvalid }) => (_jsxs(_Fragment, { children: [_jsx(Mark, { on: isSelected || isIndeterminate, mixed: isIndeterminate, focus: isFocusVisible, invalid: isInvalid }), _jsx("span", { id: textId, className: "min-w-0", children: label })] })) }));
+}
+/** The chosen values, in the order the person picked them — what `onChange` hands back. */
+function valuesOf(keys, items) {
+    if (keys === "all")
+        return items.filter((item) => !item.disabled).map((item) => item.value);
+    return [...keys].map(String);
+}
+/**
+ * Several answers, all in sight, more than one allowed: the taxes of a product, the
+ * warehouses a user can see, the documents of an export.
+ *
+ * Context: it is React Aria's `ListBox` with `selectionMode="multiple"` and not a stack of
+ * checkboxes, because what it is to a keyboard is ONE stop with a list inside — Tab lands on
+ * it, the arrows move, Space toggles, Home and End jump, a letter finds the row — and twelve
+ * Tab stops is how a form becomes a chore. A disabled row is drawn and skipped. The value is
+ * a plain `string[]`, never React Aria's `Selection`.
+ *
+ * `mono` is for when the label was written by the machine — an account code, a tax code —
+ * and the detail was written by a person. The two faces are the point.
+ */
+export function CheckList({ label, items, value, onChange, mono = false, emptyLabel, describedBy: ownDescribedBy, mode, }) {
+    const labelId = useId();
+    const { describedBy } = useFieldIds({ describedBy: ownDescribedBy });
+    const none = useUiCopy().field.none;
+    if (useFormMode(mode) === "read") {
+        const picked = items.filter((item) => value.includes(item.value));
+        return (_jsxs("div", { className: "flex min-w-0 flex-col gap-1", children: [_jsx("p", { className: "text-micro text-muted", children: label }), _jsx("p", { className: `text-meta text-ink ${mono ? "font-mono" : ""}`, children: picked.length === 0
+                        ? (emptyLabel ?? none)
+                        : picked.map((item) => item.label).join(", ") })] }));
+    }
+    return (_jsxs("div", { className: "flex min-w-0 flex-col gap-1.5", children: [_jsx("p", { id: labelId, className: "text-micro text-muted", children: label }), _jsx(ListBox, { "aria-labelledby": labelId, "aria-describedby": describedBy, items: items, selectionMode: "multiple", selectedKeys: value, onSelectionChange: (keys) => onChange?.(valuesOf(keys, items)), disabledKeys: items.filter((item) => item.disabled).map((item) => item.value), shouldFocusWrap: true, className: "flex flex-col overflow-hidden rounded-box border border-line bg-surface outline-0 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary", children: (item) => (_jsx(ListBoxItem, { id: item.value, textValue: item.label, className: ({ isSelected, isFocusVisible, isDisabled }) => `flex min-w-0 cursor-pointer items-center gap-2.5 border-b border-line px-3 py-2 text-left outline-0 last:border-b-0 ${isFocusVisible
+                        ? "outline-2 -outline-offset-2 outline-primary forced-colors:outline-[Highlight]"
+                        : ""} ${isDisabled ? "cursor-not-allowed opacity-45" : ""} ${isSelected ? "bg-primary/8" : "hover:bg-ink/4"}`, children: ({ isSelected }) => (_jsxs(_Fragment, { children: [_jsx(Mark, { on: isSelected, mixed: false }), _jsxs("span", { className: "flex min-w-0 flex-col", children: [_jsx(Text, { slot: "label", className: `truncate text-meta text-ink ${mono ? "font-mono" : ""}`, children: item.label }), item.detail === undefined ? null : (_jsx(Text, { slot: "description", className: "truncate text-micro text-muted", children: item.detail }))] })] })) })) })] }));
+}