@sincpro/web-ui 0.0.0-stage → 0.2.0

package/dist/primitives/date/Calendar.js

@@ -0,0 +1,134 @@
+"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 { listOptionStyles } from "../field/aria.js";
+import { Popover } from "../overlay/Popover.js";
+import { ChevronDown, ChevronLeft, ChevronRight } from "lucide-react";
+import { Button as AriaButton, Calendar as AriaCalendar, CalendarCell, CalendarGrid, CalendarGridBody, CalendarGridHeader, CalendarHeaderCell, CalendarHeading, CalendarMonthPicker, CalendarYearPicker, ListBox, ListBoxItem, RangeCalendar as AriaRangeCalendar, Select as AriaSelect, SelectValue, 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.
+ *
+ * The month and the year of the heading are two small selects: a birth date in 1987 or a
+ * contract signed in 2019 is two picks away, not eighty presses of «previous month». They
+ * are ALWAYS there, not behind a prop, because they cost nothing to the look — the words of
+ * the heading become the buttons, same weight, same color, the arrows where they were — and
+ * a prop is the one every app forgets on the one form (the birth date) that needed it.
+ */
+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",
+});
+const jumpTrigger = tv({
+    extend: focusRing,
+    base: "inline-flex h-(--size-control-sm) items-center gap-1 rounded-control px-1.5 text-body font-semibold text-ink transition-colors duration-(--duration-instant) hover:bg-ink/6 pressed:bg-ink/10",
+});
+/* A word of the heading that opens a list. `first-letter` needs a block box: Spanish month
+   names are lower case, and a heading that starts «octubre» reads like a typo. */
+function Jump({ "aria-label": label, value, onChange, items }) {
+    return (_jsxs(AriaSelect, { "aria-label": label, value: value, onChange: onChange, children: [_jsxs(AriaButton, { className: jumpTrigger, children: [_jsx(SelectValue, { className: "inline-block first-letter:uppercase", children: ({ selectedText }) => selectedText }), _jsx(ChevronDown, { "aria-hidden": true, className: "size-(--size-icon-sm) text-muted", strokeWidth: 2.5 })] }), _jsx(Popover, { placement: "bottom", className: "min-w-(--trigger-width)", children: _jsx(ListBox, { items: items, className: "max-h-[inherit] overflow-auto p-1 outline-0", children: (item) => (_jsx(ListBoxItem, { id: item.id, textValue: item.formatted, className: listOptionStyles, children: _jsx("span", { className: "block tabular-nums first-letter:uppercase", children: item.formatted }) })) }) })] }));
+}
+/* A century around the shown year: wide enough for a birth date or an old contract in one
+   pick, and `min`/`max` clip it (a birth date with `max` = today lists back from today).
+   The list opens scrolled to the shown year and typing «1987» jumps to it. */
+const YEARS_LISTED = 100;
+/** `jump` turns the heading into the month and year selects. Off only for two months side
+ *  by side: their heading names a span («octubre – noviembre de 2026») that one month
+ *  select cannot stand for. */
+function Header({ jump }) {
+    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 }) }), jump ? (_jsxs("div", { className: "flex flex-1 items-center justify-center", children: [_jsx(CalendarMonthPicker, { format: "long", children: (aria) => _jsx(Jump, { ...aria }) }), _jsx(CalendarYearPicker, { visibleYears: YEARS_LISTED, children: (aria) => _jsx(Jump, { ...aria }) })] })) : (_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, { jump: true }), _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, { jump: months === 1 }), _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,42 @@
+import { type FormMode } from "../field/mode.js";
+/** The typed segments inside the field box — shared with `TimeField` and `DateTimePicker`
+ *  (internal: not in the family barrel). */
+export declare function Segments({ slot }: {
+    slot?: "start" | "end";
+}): import("react").JSX.Element;
+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;
+    /** The name of the control when it is NOT inside a `Field` — a cell of an editable table.
+     *  Inside a field, the field's label names it. */
+    "aria-label"?: string;
+    /** Forces the mode. By default it inherits the form's: in read mode it draws the 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, "aria-label": ariaLabel, }: 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, "aria-label": ariaLabel, }: 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, "aria-label": ariaLabel, }: Shared & {
+    value: DateRangeValue | null;
+    onChange?: (next: DateRangeValue | null) => void;
+}): import("react").JSX.Element;
+export {};

package/dist/primitives/date/DatePicker.js

@@ -0,0 +1,103 @@
+"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]",
+        },
+    },
+});
+/** The typed segments inside the field box — shared with `TimeField` and `DateTimePicker`
+ *  (internal: not in the family barrel). */
+export 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();
+    /* `toDate("UTC")` is midnight in UTC, so the formatter has to read it in UTC too: in the
+       zone of the machine, anywhere west of Greenwich, the 30th was drawn as the 29th. */
+    const format = new DateFormatter(copy.locale, { dateStyle: "medium", timeZone: "UTC" });
+    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, "aria-label": ariaLabel, }) {
+    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-label": ariaLabel, "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, "aria-label": ariaLabel, }) {
+    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-label": ariaLabel, "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, "aria-label": ariaLabel, }) {
+    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-label": ariaLabel, "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/DateTime.d.ts

@@ -0,0 +1,35 @@
+import { type FormMode } from "../field/mode.js";
+type HourCycle = 12 | 24;
+type Shared = {
+    id?: string;
+    describedBy?: string;
+    invalid?: boolean;
+    disabled?: boolean;
+    /** 12h or 24h. By default, the one of the copy's locale. Only the display: the value is
+     *  always 24h. */
+    hourCycle?: HourCycle;
+    /** The name of the control when it is NOT inside a `Field` — a cell of an editable table.
+     *  Inside a field, the field's label names it. */
+    "aria-label"?: string;
+    /** Forces the mode. By default it inherits the form's: in read mode it draws the value. */
+    mode?: FormMode;
+};
+/** A time of day typed by segments — the hour of an appointment, the opening of a shift.
+ *  The value is `"HH:MM"` in 24h, or `null`. */
+export declare function TimeField({ value, onChange, id: ownId, describedBy: ownDescribedBy, invalid: ownInvalid, disabled, min, max, hourCycle, mode, "aria-label": ariaLabel, }: Shared & {
+    value: string | null;
+    onChange?: (next: string | null) => void;
+    /** The earliest and latest time that can be typed, as `"HH:MM"`. */
+    min?: string;
+    max?: string;
+}): import("react").JSX.Element;
+/** A day and its time — a delivery slot, an appointment: the day typed or picked on the
+ *  calendar, the time typed after it. The value is a local `"YYYY-MM-DDTHH:MM"`, or `null`. */
+export declare function DateTimePicker({ value, onChange, id: ownId, describedBy: ownDescribedBy, invalid: ownInvalid, disabled, min, max, hourCycle, mode, "aria-label": ariaLabel, }: Shared & {
+    value: string | null;
+    onChange?: (next: string | null) => void;
+    /** The earliest and latest moment, as `"YYYY-MM-DDTHH:MM"` or a bare day `"YYYY-MM-DD"`. */
+    min?: string;
+    max?: string;
+}): import("react").JSX.Element;
+export {};

package/dist/primitives/date/DateTime.js

@@ -0,0 +1,100 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { DateFormatter, parseDateTime, parseTime, toCalendarDate, } from "@internationalized/date";
+import { AriaLocale } from "../../foundations/aria.js";
+import { useUiCopy } from "../../foundations/copy.js";
+import { Calendar } from "./Calendar.js";
+import { Segments } from "./DatePicker.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 { DatePicker as AriaDatePicker, Dialog, TimeField as AriaTimeField, } from "react-aria-components";
+/**
+ * A time of day, and a day with its time — an appointment, a delivery slot — as an ERP
+ * stores them: `"09:05"` and `"2026-10-30T09:05"`.
+ *
+ * Context: the same contract as `DatePicker` — a string in, a string out, converted here
+ * once. The time is 24h and without seconds because that is what a backend column of a
+ * time keeps; the time with a date is LOCAL and without a zone, because «the delivery is
+ * on the 30th at nine» is a wall-clock time where the warehouse is, not an instant: putting
+ * a zone on it is the backend's decision, not the field's.
+ *
+ * What the person SEES follows the locale of the copy: the hour cycle (12h with «p. m.» or
+ * 24h) is the one `Intl` gives that locale through `AriaLocale`. CLDR writes `es-BO` in 12h;
+ * a company that works in 24h passes `hourCycle={24}` — the value stays `"15:05"` either way.
+ */
+const pad = (n) => String(n).padStart(2, "0");
+const hhmm = (time) => `${pad(time.hour)}:${pad(time.minute)}`;
+/* `"09:05"` or `"09:05:00"` — a column of type time often comes with its seconds. */
+function parseClock(value) {
+    if (value === null || value === undefined || value === "")
+        return null;
+    try {
+        return parseTime(value);
+    }
+    catch {
+        return null;
+    }
+}
+/* `"2026-10-30T09:05"`; a bare `"2026-10-30"` is that day at midnight, so a `min` can be a day. */
+function parseStamp(value) {
+    if (value === null || value === undefined || value === "")
+        return null;
+    try {
+        return parseDateTime(value);
+    }
+    catch {
+        return null;
+    }
+}
+/* React Aria's `toString()` adds the seconds; the contract is to the minute. */
+function stampOf(value) {
+    const time = "hour" in value ? hhmm(value) : "00:00";
+    return `${toCalendarDate(value).toString()}T${time}`;
+}
+/* Read mode draws what the segments would: the locale's format, its hour cycle unless the
+   control forces one. Everything is formatted in UTC from UTC parts, so the zone of the
+   machine never moves the clock. */
+function useReadClock(options, hourCycle) {
+    const copy = useUiCopy();
+    return new DateFormatter(copy.locale, {
+        ...options,
+        timeZone: "UTC",
+        ...(hourCycle === undefined ? {} : { hourCycle: hourCycle === 24 ? "h23" : "h12" }),
+    });
+}
+/** A time of day typed by segments — the hour of an appointment, the opening of a shift.
+ *  The value is `"HH:MM"` in 24h, or `null`. */
+export function TimeField({ value, onChange, id: ownId, describedBy: ownDescribedBy, invalid: ownInvalid, disabled = false, min, max, hourCycle, mode, "aria-label": ariaLabel, }) {
+    const { id, labelledBy, describedBy, invalid } = useFieldIds({
+        id: ownId,
+        describedBy: ownDescribedBy,
+        invalid: ownInvalid,
+    });
+    const format = useReadClock({ timeStyle: "short" }, hourCycle);
+    if (useFormMode(mode) === "read") {
+        const time = parseClock(value);
+        return (_jsx(ReadValue, { value: time === null
+                ? ""
+                : format.format(new Date(Date.UTC(1970, 0, 1, time.hour, time.minute))) }));
+    }
+    return (_jsx(AriaLocale, { children: _jsx(AriaTimeField, { id: id, "aria-labelledby": labelledBy, "aria-label": ariaLabel, "aria-describedby": describedBy, value: parseClock(value), onChange: (next) => onChange?.(next === null ? null : hhmm(next)), minValue: parseClock(min) ?? undefined, maxValue: parseClock(max) ?? undefined, hourCycle: hourCycle, isInvalid: invalid, isDisabled: disabled, className: "w-full", children: _jsx(FieldGroup, { children: _jsx(Segments, {}) }) }) }));
+}
+/** A day and its time — a delivery slot, an appointment: the day typed or picked on the
+ *  calendar, the time typed after it. The value is a local `"YYYY-MM-DDTHH:MM"`, or `null`. */
+export function DateTimePicker({ value, onChange, id: ownId, describedBy: ownDescribedBy, invalid: ownInvalid, disabled = false, min, max, hourCycle, mode, "aria-label": ariaLabel, }) {
+    const { id, labelledBy, describedBy, invalid } = useFieldIds({
+        id: ownId,
+        describedBy: ownDescribedBy,
+        invalid: ownInvalid,
+    });
+    const format = useReadClock({ dateStyle: "medium", timeStyle: "short" }, hourCycle);
+    if (useFormMode(mode) === "read") {
+        const stamp = parseStamp(value);
+        return _jsx(ReadValue, { value: stamp === null ? "" : format.format(stamp.toDate("UTC")) });
+    }
+    return (_jsx(AriaLocale, { children: _jsxs(AriaDatePicker, { id: id, "aria-labelledby": labelledBy, "aria-label": ariaLabel, "aria-describedby": describedBy, value: parseStamp(value), onChange: (next) => onChange?.(next === null ? null : stampOf(next)), minValue: parseStamp(min) ?? undefined, maxValue: parseStamp(max) ?? undefined, granularity: "minute", hourCycle: hourCycle, 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, {}) }) })] }) }));
+}

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

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

package/dist/primitives/date/index.js

@@ -0,0 +1,6 @@
+/* LAS FECHAS Y LAS HORAS — escritas por segmentos o elegidas en un calendario, con el orden
+   del idioma de la copia. El valor es un ISO (`"2026-10-30"`, `"09:05"`,
+   `"2026-10-30T09:05"`), lo que manda cualquier backend. */
+export { Calendar, RangeCalendar, } from "./Calendar.js";
+export { DateField, DatePicker, DateRangePicker, } from "./DatePicker.js";
+export { DateTimePicker, TimeField } from "./DateTime.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;