@sincpro/web-ui 0.0.0-stage → 0.1.0

package/dist/primitives/date/Calendar.js

@@ -0,0 +1,110 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { parseDate } from "@internationalized/date";
+import { AriaLocale } from "../../foundations/aria.js";
+import { focusRing, tv } from "../../foundations/variants.js";
+import { ChevronLeft, ChevronRight } from "lucide-react";
+import { Button as AriaButton, Calendar as AriaCalendar, CalendarCell, CalendarGrid, CalendarGridBody, CalendarGridHeader, CalendarHeaderCell, CalendarHeading, RangeCalendar as AriaRangeCalendar, useLocale, } from "react-aria-components";
+/**
+ * The month grid — on its own, or inside the popover of a date picker.
+ *
+ * Context: keyboard and screen reader behave like a native calendar because React Aria
+ * implements the grid pattern (arrows move a day, PageUp/PageDown a month, Home/End the
+ * week). The selected day is the system's `primary`, not the gold: the gold is for the ONE
+ * action of a screen, and a calendar is not an action.
+ */
+const navButton = tv({
+    extend: focusRing,
+    base: "inline-flex size-(--size-control-sm) items-center justify-center rounded-control text-muted transition-colors duration-(--duration-instant) hover:bg-ink/6 hover:text-ink pressed:bg-ink/10 disabled:text-line-strong",
+});
+function Header() {
+    const { direction } = useLocale();
+    const [Prev, Next] = direction === "rtl" ? [ChevronRight, ChevronLeft] : [ChevronLeft, ChevronRight];
+    return (_jsxs("header", { className: "mb-2 flex items-center gap-1", children: [_jsx(AriaButton, { slot: "previous", className: navButton, children: _jsx(Prev, { "aria-hidden": true, className: "size-(--size-icon-md)", strokeWidth: 2 }) }), _jsx(CalendarHeading, { className: "flex-1 text-center text-body font-semibold text-ink first-letter:uppercase" }), _jsx(AriaButton, { slot: "next", className: navButton, children: _jsx(Next, { "aria-hidden": true, className: "size-(--size-icon-md)", strokeWidth: 2 }) })] }));
+}
+function WeekDays() {
+    return (_jsx(CalendarGridHeader, { children: (day) => (_jsx(CalendarHeaderCell, { className: "pb-1 text-micro font-medium text-muted", children: day })) }));
+}
+const dayCell = tv({
+    extend: focusRing,
+    base: "flex size-(--size-control-md) cursor-default items-center justify-center rounded-control text-meta tabular-nums outside-month:text-line-strong forced-color-adjust-none",
+    variants: {
+        isSelected: {
+            false: "text-ink hover:bg-ink/6 pressed:bg-ink/10",
+            true: "bg-primary font-medium text-surface invalid:bg-danger forced-colors:bg-[Highlight] forced-colors:text-[HighlightText]",
+        },
+        isDisabled: {
+            true: "text-line-strong hover:bg-transparent forced-colors:text-[GrayText]",
+        },
+        isToday: {
+            true: "font-semibold underline decoration-2 underline-offset-4",
+        },
+    },
+});
+/* ISO in, ISO out — the same contract as `DatePicker`. Inside a picker none of these are
+   passed and the calendar reads the picker's state from React Aria's context; only the
+   props that ARE given are forwarded, so an `undefined` never shadows that context. */
+function iso(value) {
+    if (value === undefined)
+        return undefined;
+    if (value === null || value === "")
+        return null;
+    try {
+        return parseDate(value);
+    }
+    catch {
+        return null;
+    }
+}
+function defined(props) {
+    return Object.fromEntries(Object.entries(props).filter(([, v]) => v !== undefined));
+}
+/** One month, to pick one day. */
+export function Calendar({ value, onChange, min, max, isUnavailable, ...rest }) {
+    const props = defined({
+        value: iso(value),
+        onChange: onChange === undefined ? undefined : (next) => onChange(next.toString()),
+        minValue: iso(min) ?? undefined,
+        maxValue: iso(max) ?? undefined,
+        isDateUnavailable: isUnavailable === undefined
+            ? undefined
+            : (date) => isUnavailable(date.toString()),
+    });
+    return (_jsx(AriaLocale, { children: _jsxs(AriaCalendar, { ...rest, ...props, className: "w-fit", children: [_jsx(Header, {}), _jsxs(CalendarGrid, { className: "border-separate border-spacing-0.5", children: [_jsx(WeekDays, {}), _jsx(CalendarGridBody, { children: (date) => _jsx(CalendarCell, { date: date, className: dayCell }) })] })] }) }));
+}
+const rangeDay = tv({
+    extend: focusRing,
+    base: "flex size-full items-center justify-center rounded-control forced-color-adjust-none",
+    variants: {
+        position: {
+            none: "text-ink group-hover:bg-ink/6 group-pressed:bg-ink/10",
+            middle: "text-ink group-hover:bg-primary/18",
+            cap: "bg-primary font-medium text-surface group-invalid:bg-danger forced-colors:bg-[Highlight] forced-colors:text-[HighlightText]",
+        },
+        isDisabled: {
+            true: "text-line-strong forced-colors:text-[GrayText]",
+        },
+    },
+});
+/** One or two months, to pick a span: the first click opens it, the second closes it. */
+export function RangeCalendar({ months = 1, value, onChange, min, max, ...rest }) {
+    const start = iso(value?.start);
+    const end = iso(value?.end);
+    const props = defined({
+        value: value === undefined ? undefined : start && end ? { start, end } : null,
+        onChange: onChange === undefined
+            ? undefined
+            : (next) => onChange({ start: next.start.toString(), end: next.end.toString() }),
+        minValue: iso(min) ?? undefined,
+        maxValue: iso(max) ?? undefined,
+    });
+    return (_jsx(AriaLocale, { children: _jsxs(AriaRangeCalendar, { ...rest, ...props, visibleDuration: { months }, className: "w-fit", children: [_jsx(Header, {}), _jsx("div", { className: "flex gap-4", children: Array.from({ length: months }, (_, i) => (_jsxs(CalendarGrid, { offset: { months: i }, className: "border-separate border-spacing-y-0.5", children: [_jsx(WeekDays, {}), _jsx(CalendarGridBody, { children: (date) => (_jsx(CalendarCell, { date: date, className: "group size-(--size-control-md) cursor-default text-meta tabular-nums outside-month:invisible selected:bg-primary/10 selection-start:rounded-s-control selection-end:rounded-e-control", children: ({ formattedDate, isSelected, isSelectionStart, isSelectionEnd, isFocusVisible, isDisabled, }) => (_jsx("span", { className: rangeDay({
+                                            position: isSelected && (isSelectionStart || isSelectionEnd)
+                                                ? "cap"
+                                                : isSelected
+                                                    ? "middle"
+                                                    : "none",
+                                            isDisabled,
+                                            isFocusVisible,
+                                        }), children: formattedDate })) })) })] }, i))) })] }) }));
+}

package/dist/primitives/date/DatePicker.d.ts

@@ -0,0 +1,34 @@
+import { type FormMode } from "../field/mode.js";
+type Shared = {
+    id?: string;
+    describedBy?: string;
+    invalid?: boolean;
+    disabled?: boolean;
+    /** The earliest and latest day that can be chosen, as ISO dates. */
+    min?: string;
+    max?: string;
+    /** Forces the mode. By default it inherits the form's: in read mode it draws the value. */
+    mode?: FormMode;
+};
+/** A date typed by segments, without a calendar: for a form where dates are known by heart
+ *  (a birth date, a contract date). */
+export declare function DateField({ value, onChange, id: ownId, describedBy: ownDescribedBy, invalid: ownInvalid, disabled, min, max, mode, }: Shared & {
+    value: string | null;
+    onChange?: (next: string | null) => void;
+}): import("react").JSX.Element;
+/** A date typed by segments, or picked on a calendar from the button. */
+export declare function DatePicker({ value, onChange, id: ownId, describedBy: ownDescribedBy, invalid: ownInvalid, disabled, min, max, mode, }: Shared & {
+    value: string | null;
+    onChange?: (next: string | null) => void;
+}): import("react").JSX.Element;
+export type DateRangeValue = {
+    start: string;
+    end: string;
+};
+/** A span of days — a period of a report, the validity of a contract — typed or picked on
+ *  two months at once. */
+export declare function DateRangePicker({ value, onChange, id: ownId, describedBy: ownDescribedBy, invalid: ownInvalid, disabled, min, max, mode, }: Shared & {
+    value: DateRangeValue | null;
+    onChange?: (next: DateRangeValue | null) => void;
+}): import("react").JSX.Element;
+export {};

package/dist/primitives/date/DatePicker.js

@@ -0,0 +1,99 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { DateFormatter, parseDate } from "@internationalized/date";
+import { AriaLocale } from "../../foundations/aria.js";
+import { useUiCopy } from "../../foundations/copy.js";
+import { tv } from "../../foundations/variants.js";
+import { Calendar, RangeCalendar } from "./Calendar.js";
+import { FieldButton, FieldGroup } from "../field/aria.js";
+import { useFieldIds } from "../field/context.js";
+import { ReadValue } from "../field/Field.js";
+import { useFormMode } from "../field/mode.js";
+import { Popover } from "../overlay/Popover.js";
+import { CalendarDays } from "lucide-react";
+import { DateField as AriaDateField, DateInput, DatePicker as AriaDatePicker, DateRangePicker as AriaDateRangePicker, DateSegment, Dialog, } from "react-aria-components";
+/**
+ * Dates as an ERP stores them — ISO strings, `"2026-10-30"` — typed segment by segment or
+ * picked on a calendar.
+ *
+ * Context: the value is a string and not React Aria's `CalendarDate` because that is what
+ * every backend sends and every other control of the system takes. The conversion happens
+ * here, once, instead of at each of the hundred places an app reads a date.
+ *
+ * The field is SEGMENTED, not a free text box: the person types the day, the month and the
+ * year in the order of their locale (day/month/year in `es-BO`), the arrows step each one,
+ * and an impossible date cannot be written. That order comes from the copy table, never
+ * from the browser — see `AriaLocale`.
+ */
+const segment = tv({
+    base: "rounded-mark px-0.5 tabular-nums caret-transparent outline-0 type-literal:px-0 forced-color-adjust-none",
+    variants: {
+        isPlaceholder: { true: "text-muted" },
+        isDisabled: { true: "text-muted forced-colors:text-[GrayText]" },
+        isFocused: {
+            true: "bg-primary text-surface forced-colors:bg-[Highlight] forced-colors:text-[HighlightText]",
+        },
+    },
+});
+function Segments({ slot }) {
+    return (_jsx(DateInput, { slot: slot, className: "flex min-w-0 items-center px-2.5 whitespace-nowrap", children: (part) => _jsx(DateSegment, { segment: part, className: segment }) }));
+}
+function parse(iso) {
+    if (iso === null || iso === undefined || iso === "")
+        return null;
+    try {
+        return parseDate(iso);
+    }
+    catch {
+        return null;
+    }
+}
+function useReadDate() {
+    const copy = useUiCopy();
+    const format = new DateFormatter(copy.locale, { dateStyle: "medium" });
+    return (iso) => {
+        const date = parse(iso);
+        return date === null ? "" : format.format(date.toDate("UTC"));
+    };
+}
+/** A date typed by segments, without a calendar: for a form where dates are known by heart
+ *  (a birth date, a contract date). */
+export function DateField({ value, onChange, id: ownId, describedBy: ownDescribedBy, invalid: ownInvalid, disabled = false, min, max, mode, }) {
+    const { id, labelledBy, describedBy, invalid } = useFieldIds({
+        id: ownId,
+        describedBy: ownDescribedBy,
+        invalid: ownInvalid,
+    });
+    const read = useReadDate();
+    if (useFormMode(mode) === "read")
+        return _jsx(ReadValue, { value: read(value) });
+    return (_jsx(AriaLocale, { children: _jsx(AriaDateField, { id: id, "aria-labelledby": labelledBy, "aria-describedby": describedBy, value: parse(value), onChange: (next) => onChange?.(next === null ? null : next.toString()), minValue: parse(min) ?? undefined, maxValue: parse(max) ?? undefined, isInvalid: invalid, isDisabled: disabled, className: "w-full", children: _jsx(FieldGroup, { children: _jsx(Segments, {}) }) }) }));
+}
+/** A date typed by segments, or picked on a calendar from the button. */
+export function DatePicker({ value, onChange, id: ownId, describedBy: ownDescribedBy, invalid: ownInvalid, disabled = false, min, max, mode, }) {
+    const { id, labelledBy, describedBy, invalid } = useFieldIds({
+        id: ownId,
+        describedBy: ownDescribedBy,
+        invalid: ownInvalid,
+    });
+    const read = useReadDate();
+    if (useFormMode(mode) === "read")
+        return _jsx(ReadValue, { value: read(value) });
+    return (_jsx(AriaLocale, { children: _jsxs(AriaDatePicker, { id: id, "aria-labelledby": labelledBy, "aria-describedby": describedBy, value: parse(value), onChange: (next) => onChange?.(next === null ? null : next.toString()), minValue: parse(min) ?? undefined, maxValue: parse(max) ?? undefined, isInvalid: invalid, isDisabled: disabled, className: "w-full", children: [_jsxs(FieldGroup, { children: [_jsx(Segments, {}), _jsx(FieldButton, { className: "mr-1 ml-auto", children: _jsx(CalendarDays, { "aria-hidden": true, className: "size-(--size-icon-md)", strokeWidth: 2 }) })] }), _jsx(Popover, { placement: "bottom end", children: _jsx(Dialog, { className: "p-3 outline-0", children: _jsx(Calendar, {}) }) })] }) }));
+}
+/** A span of days — a period of a report, the validity of a contract — typed or picked on
+ *  two months at once. */
+export function DateRangePicker({ value, onChange, id: ownId, describedBy: ownDescribedBy, invalid: ownInvalid, disabled = false, min, max, mode, }) {
+    const { id, labelledBy, describedBy, invalid } = useFieldIds({
+        id: ownId,
+        describedBy: ownDescribedBy,
+        invalid: ownInvalid,
+    });
+    const read = useReadDate();
+    if (useFormMode(mode) === "read") {
+        return (_jsx(ReadValue, { value: value === null ? "" : `${read(value.start)} – ${read(value.end)}` }));
+    }
+    const start = parse(value?.start);
+    const end = parse(value?.end);
+    return (_jsx(AriaLocale, { children: _jsxs(AriaDateRangePicker, { id: id, "aria-labelledby": labelledBy, "aria-describedby": describedBy, value: start === null || end === null ? null : { start, end }, onChange: (next) => onChange?.(next === null ? null : { start: next.start.toString(), end: next.end.toString() }), minValue: parse(min) ?? undefined, maxValue: parse(max) ?? undefined, isInvalid: invalid, isDisabled: disabled, className: "w-full", children: [_jsxs(FieldGroup, { children: [_jsx(Segments, { slot: "start" }), _jsx("span", { "aria-hidden": true, className: "text-muted", children: "\u2013" }), _jsx(Segments, { slot: "end" }), _jsx(FieldButton, { className: "mr-1 ml-auto", children: _jsx(CalendarDays, { "aria-hidden": true, className: "size-(--size-icon-md)", strokeWidth: 2 }) })] }), _jsx(Popover, { placement: "bottom end", children: _jsx(Dialog, { className: "p-3 outline-0", children: _jsx(RangeCalendar, { months: 2 }) }) })] }) }));
+}

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

@@ -0,0 +1,2 @@
+export { Calendar, type CalendarProps, RangeCalendar, type RangeCalendarProps, } from "./Calendar.js";
+export { DateField, DatePicker, DateRangePicker, type DateRangeValue, } from "./DatePicker.js";

package/dist/primitives/date/index.js

@@ -0,0 +1,4 @@
+/* LAS FECHAS — escritas por segmentos o elegidas en un calendario, con el orden del idioma de
+   la copia. El valor es un ISO (`"2026-10-30"`), lo que manda cualquier backend. */
+export { Calendar, RangeCalendar, } from "./Calendar.js";
+export { DateField, DatePicker, DateRangePicker, } from "./DatePicker.js";

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

@@ -0,0 +1,118 @@
+import { type ReactNode } from "react";
+/** Where this dialog came from. It is drawn in the header, small. */
+export interface DialogContext {
+    /** The category, in small caps: «factura», «cliente». It answers *what kind of
+     *  thing is this about?* before saying which one. */
+    kind?: string;
+    /** Which one. The name of the resource. */
+    label: string;
+    /** What describes it without opening it: «saldo Bs. 12.450,00 · vence 15/11». */
+    detail?: string;
+}
+/** 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 declare const dialogStyles: {
+    overlay: import("tailwind-variants/config").TVReturnType<{
+        isEntering: {
+            true: string;
+        };
+        isExiting: {
+            true: string;
+        };
+    }, undefined, "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", undefined, undefined, undefined>;
+    modal: import("tailwind-variants/config").TVReturnType<{
+        width: {
+            sm: string;
+            md: string;
+            lg: string;
+        };
+        isEntering: {
+            true: string;
+        };
+        isExiting: {
+            true: string;
+        };
+    }, undefined, "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", undefined, undefined, undefined>;
+};
+export type DialogWidth = "sm" | "md" | "lg";
+export interface DialogProps {
+    open: boolean;
+    title: string;
+    /** One sentence under the title. It is also the dialog's description for assistive
+     *  technology: what is read after the name, before the first field. */
+    subtitle?: string;
+    context?: DialogContext;
+    width?: DialogWidth;
+    /** Every way out goes through here: the × button, Escape and a press on the scrim. */
+    onClose: () => void;
+    /** Dock into the workspace. Absent when there is nowhere to dock. */
+    onExpand?: () => void;
+    /** Where it expands to, when «into a panel» says nothing: «open the catalog».
+     *  It is the tooltip and the accessible name, and it is not drawn. */
+    expandLabel?: string;
+    footer?: ReactNode;
+    children: ReactNode;
+}
+/** 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 declare function DialogSurface({ title, subtitle, context, onClose, onExpand, expandLabel, footer, children, }: Omit<DialogProps, "open" | "width">): import("react").JSX.Element;
+/**
+ * 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 declare function Dialog({ open, width, onClose, ...surface }: DialogProps): import("react").JSX.Element;
+export interface WizardStep {
+    id: string;
+    label: string;
+    /** What is missing before you can move on. If it is present, «next» is turned
+     *  off and this is drawn — a disabled button with no reason is a dead end. */
+    blocked?: string;
+}
+export interface WizardProps {
+    steps: readonly WizardStep[];
+    current: string;
+    /** A completed step was pressed: going back to review it. */
+    onStepChange?: (id: string) => void;
+    children: ReactNode;
+    onCancel?: () => void;
+    onBack?: () => void;
+    onNext?: () => void;
+    /** On the last step it stops being «next» and starts naming what is going to
+     *  happen: «Crear orden». A button that says «next» on the last step hides that
+     *  something gets executed there. */
+    nextLabel?: string;
+    busy?: boolean;
+}
+/** 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 declare function Wizard({ steps, current, onStepChange, children, onCancel, onBack, onNext, nextLabel, busy, }: WizardProps): import("react").JSX.Element;

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/index.d.ts

@@ -0,0 +1 @@
+export { Dialog, type DialogContext, type DialogProps, type DialogWidth, Wizard, type WizardProps, type WizardStep, } from "./Dialog.js";

package/dist/primitives/dialog/index.js

@@ -0,0 +1,2 @@
+/* What has to be answered before moving on. */
+export { Dialog, Wizard, } from "./Dialog.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";