@sincpro/web-ui 0.1.0 → 1.0.0

package/dist/primitives/choice/Priority.d.ts

@@ -0,0 +1,20 @@
+export type PriorityProps = {
+    /** 0 is «sin prioridad». */
+    value: number;
+    /** How many stars. Odoo's three, by default. */
+    max?: number;
+    /** Without it the stars only show. Pressing the star already set clears it, the way Odoo
+     *  does — the only way back to «none» that needs no extra control. */
+    onChange?: (next: number) => void;
+    /** The group's name, when it is not «Prioridad». */
+    label?: string;
+};
+/**
+ * Priority as stars: how urgent a lead, a task or a ticket is, read in a list at a glance.
+ *
+ * Context: a select «baja / media / alta» is read as a word in a column of words; stars are
+ * counted without reading. They are a radio group: arrows move, and it is named — «Prioridad:
+ * 2 de 3» — so it is not colour alone. In the `warn` tone, not the gold: the gold is the
+ * screen's primary action.
+ */
+export declare function Priority({ value, max, onChange, label }: PriorityProps): import("react").JSX.Element;

package/dist/primitives/choice/Priority.js

@@ -0,0 +1,41 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { fillCopy, useUiCopy } from "../../foundations/copy.js";
+import { Star } from "lucide-react";
+import { useRef } from "react";
+/**
+ * Priority as stars: how urgent a lead, a task or a ticket is, read in a list at a glance.
+ *
+ * Context: a select «baja / media / alta» is read as a word in a column of words; stars are
+ * counted without reading. They are a radio group: arrows move, and it is named — «Prioridad:
+ * 2 de 3» — so it is not colour alone. In the `warn` tone, not the gold: the gold is the
+ * screen's primary action.
+ */
+export function Priority({ value, max = 3, onChange, label }) {
+    const copy = useUiCopy();
+    const name = label ?? copy.priority.label;
+    const stars = Array.from({ length: max }, (_, at) => at + 1);
+    const buttons = useRef([]);
+    const said = value === 0 ? copy.priority.none : fillCopy(copy.priority.level, { value, max });
+    const icon = (n) => (_jsx(Star, { "aria-hidden": true, className: `size-(--size-icon-md) ${n <= value ? "fill-warn text-warn" : "text-line-strong"}`, strokeWidth: 1.75 }));
+    if (onChange === undefined) {
+        return (_jsx("span", { role: "img", "aria-label": `${name}: ${said}`, className: "inline-flex items-center gap-0.5", children: stars.map((n) => (_jsx("span", { children: icon(n) }, n))) }));
+    }
+    const step = (event, n) => {
+        const next = event.key === "ArrowRight" || event.key === "ArrowUp"
+            ? Math.min(max, n + 1)
+            : event.key === "ArrowLeft" || event.key === "ArrowDown"
+                ? Math.max(1, n - 1)
+                : null;
+        if (next === null)
+            return;
+        event.preventDefault();
+        onChange(next);
+        buttons.current[next - 1]?.focus();
+    };
+    return (_jsx("span", { role: "radiogroup", "aria-label": name, className: "inline-flex items-center gap-0.5", children: stars.map((n) => (_jsx("button", { ref: (node) => {
+                buttons.current[n - 1] = node;
+            }, type: "button", role: "radio", "aria-checked": value === n, "aria-label": fillCopy(copy.priority.level, { value: n, max }), 
+            /* One stop in the tab order — the set star, or the first — and the arrows inside. */
+            tabIndex: n === Math.max(value, 1) ? 0 : -1, onClick: () => onChange(n === value ? 0 : n), onKeyDown: (event) => step(event, n), className: "relative z-10 rounded-control p-0.5 transition-colors duration-(--duration-instant) hover:bg-ink/6 focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-primary", children: icon(n) }, n))) }));
+}

package/dist/primitives/choice/SearchField.d.ts

@@ -7,6 +7,9 @@ export type SearchFieldProps = {
     disabled?: boolean;
     id?: string;
     describedBy?: string;
+    /** The name of the box when it is NOT inside a `Field` — the search of a list bar, of a
+     *  panel. Inside a field, the field's label names it. Without either, see below. */
+    "aria-label"?: string;
 };
 /**
  * A plain search box: a text, a clear button, Enter to submit. To filter the rows of a panel,
@@ -20,5 +23,11 @@ export type SearchFieldProps = {
  * It does not follow the form's read mode: what is typed here is never data of the record, so
  * there is nothing to draw as text. The browser's own clear cross is hidden; ours is the one
  * the keyboard and the screen reader know.
+ *
+ * It is never nameless. Most search boxes live OUTSIDE a form — the bar of a list, a panel —
+ * where there is no `Field` to label them, and a nameless one is read as «edit text» (React
+ * Aria warns about it in the console). The name is, in this order: the enclosing `Field`'s
+ * label, an explicit `aria-label`, the placeholder (what the eye reads is what the ear
+ * should hear), and finally the copy table's «Search».
  */
-export declare function SearchField({ value, onChange, placeholder, onSubmit, disabled, id: ownId, describedBy: ownDescribedBy, }: SearchFieldProps): import("react").JSX.Element;
+export declare function SearchField({ value, onChange, placeholder, onSubmit, disabled, id: ownId, describedBy: ownDescribedBy, "aria-label": ariaLabel, }: SearchFieldProps): import("react").JSX.Element;

package/dist/primitives/choice/SearchField.js

@@ -1,10 +1,17 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { AriaLocale } from "../../foundations/aria.js";
+import { useUiCopy } from "../../foundations/copy.js";
 import { FieldButton, FieldGroup } from "../field/aria.js";
 import { useFieldIds } from "../field/context.js";
 import { Search, X } from "lucide-react";
 import { Input, SearchField as AriaSearchField } from "react-aria-components";
+/** The trailing «…» of a placeholder is a visual cue that typing is expected, not part of
+ *  the name: «Buscar una cuenta…» is announced as «Buscar una cuenta». */
+function nameFromPlaceholder(placeholder) {
+    const name = placeholder?.replace(/[\s.…]+$/u, "").trim();
+    return name === undefined || name === "" ? undefined : name;
+}
 /**
  * A plain search box: a text, a clear button, Enter to submit. To filter the rows of a panel,
  * the options of a long settings page, the lines of a document.
@@ -17,11 +24,23 @@ import { Input, SearchField as AriaSearchField } from "react-aria-components";
  * It does not follow the form's read mode: what is typed here is never data of the record, so
  * there is nothing to draw as text. The browser's own clear cross is hidden; ours is the one
  * the keyboard and the screen reader know.
+ *
+ * It is never nameless. Most search boxes live OUTSIDE a form — the bar of a list, a panel —
+ * where there is no `Field` to label them, and a nameless one is read as «edit text» (React
+ * Aria warns about it in the console). The name is, in this order: the enclosing `Field`'s
+ * label, an explicit `aria-label`, the placeholder (what the eye reads is what the ear
+ * should hear), and finally the copy table's «Search».
  */
-export function SearchField({ value, onChange, placeholder, onSubmit, disabled = false, id: ownId, describedBy: ownDescribedBy, }) {
+export function SearchField({ value, onChange, placeholder, onSubmit, disabled = false, id: ownId, describedBy: ownDescribedBy, "aria-label": ariaLabel, }) {
+    const copy = useUiCopy();
     const { id, labelledBy, describedBy } = useFieldIds({
         id: ownId,
         describedBy: ownDescribedBy,
     });
-    return (_jsx(AriaLocale, { children: _jsx(AriaSearchField, { id: id, "aria-labelledby": labelledBy, "aria-describedby": describedBy, value: value, onChange: (next) => onChange?.(next), onSubmit: onSubmit, isDisabled: disabled, className: "group w-full min-w-0", children: _jsxs(FieldGroup, { children: [_jsx(Search, { "aria-hidden": true, className: "ml-2.5 size-(--size-icon-md) shrink-0 text-muted forced-colors:text-[ButtonText]", strokeWidth: 2 }), _jsx(Input, { placeholder: placeholder, className: "h-full min-w-0 flex-1 bg-transparent px-2 text-meta text-ink outline-0 placeholder:text-muted disabled:cursor-not-allowed [&::-webkit-search-cancel-button]:hidden" }), _jsx(FieldButton, { className: "mr-1 group-data-empty:invisible", children: _jsx(X, { "aria-hidden": true, className: "size-(--size-icon-md)", strokeWidth: 2 }) })] }) }) }));
+    /* A `Field` names it through its label; anything else falls back so it always has one. */
+    const name = ariaLabel ??
+        (labelledBy === undefined
+            ? (nameFromPlaceholder(placeholder) ?? copy.choice.search)
+            : undefined);
+    return (_jsx(AriaLocale, { children: _jsx(AriaSearchField, { id: id, "aria-labelledby": labelledBy, "aria-label": name, "aria-describedby": describedBy, value: value, onChange: (next) => onChange?.(next), onSubmit: onSubmit, isDisabled: disabled, className: "group w-full min-w-0", children: _jsxs(FieldGroup, { children: [_jsx(Search, { "aria-hidden": true, className: "ml-2.5 size-(--size-icon-md) shrink-0 text-muted forced-colors:text-[ButtonText]", strokeWidth: 2 }), _jsx(Input, { placeholder: placeholder, className: "h-full min-w-0 flex-1 bg-transparent px-2 text-meta text-ink outline-0 placeholder:text-muted disabled:cursor-not-allowed [&::-webkit-search-cancel-button]:hidden" }), _jsx(FieldButton, { className: "mr-1 group-data-empty:invisible", children: _jsx(X, { "aria-hidden": true, className: "size-(--size-icon-md)", strokeWidth: 2 }) })] }) }) }));
 }

package/dist/primitives/choice/Slider.d.ts

@@ -12,5 +12,10 @@ export type SliderProps = {
     describedBy?: string;
     /** Forces the mode. By default it inherits the form's: in read mode it draws the figure. */
     mode?: FormMode;
+    /** The name when it is NOT inside a `Field` — a toolbar's zoom. Inside a field, the
+     *  field's label names it. */
+    "aria-label"?: string;
+    /** The figure beside the track. Off for a control whose number means nothing — a zoom. */
+    output?: boolean;
 };
-export declare function Slider({ value, onChange, min, max, step, format, disabled, id: ownId, describedBy: ownDescribedBy, mode, }: SliderProps): import("react").JSX.Element;
+export declare function Slider({ value, onChange, min, max, step, format, disabled, id: ownId, describedBy: ownDescribedBy, mode, "aria-label": ariaLabel, output, }: SliderProps): import("react").JSX.Element;

package/dist/primitives/choice/Slider.js

@@ -33,7 +33,7 @@ const thumb = tv({
         },
     },
 });
-export function Slider({ value, onChange, min, max, step = 1, format, disabled = false, id: ownId, describedBy: ownDescribedBy, mode, }) {
+export function Slider({ value, onChange, min, max, step = 1, format, disabled = false, id: ownId, describedBy: ownDescribedBy, mode, "aria-label": ariaLabel, output = true, }) {
     const copy = useUiCopy();
     const { id, labelledBy, describedBy } = useFieldIds({
         id: ownId,
@@ -42,5 +42,5 @@ export function Slider({ value, onChange, min, max, step = 1, format, disabled =
     if (useFormMode(mode) === "read") {
         return _jsx(ReadValue, { value: new Intl.NumberFormat(copy.locale, format).format(value) });
     }
-    return (_jsx(AriaLocale, { children: _jsxs(AriaSlider, { id: id, "aria-labelledby": labelledBy, "aria-describedby": describedBy, value: value, onChange: (next) => onChange?.(next), minValue: min, maxValue: max, step: step, formatOptions: format, isDisabled: disabled, className: "flex h-(--size-control-md) w-full min-w-0 items-center gap-3 disabled:opacity-45", children: [_jsxs(SliderTrack, { className: "relative flex h-(--size-control-md) min-w-0 flex-1 cursor-pointer items-center disabled:cursor-not-allowed", children: [_jsx("span", { className: "relative h-1 w-full rounded-pill bg-line-strong forced-colors:bg-[ButtonBorder]", children: _jsx(SliderFill, { className: "rounded-pill bg-primary disabled:bg-muted forced-colors:bg-[Highlight]" }) }), _jsx(SliderThumb, { "aria-labelledby": labelledBy, "aria-describedby": describedBy, className: thumb })] }), _jsx(SliderOutput, { className: "w-14 shrink-0 text-right text-meta text-ink tabular-nums" })] }) }));
+    return (_jsx(AriaLocale, { children: _jsxs(AriaSlider, { id: id, "aria-labelledby": labelledBy, "aria-label": ariaLabel, "aria-describedby": describedBy, value: value, onChange: (next) => onChange?.(next), minValue: min, maxValue: max, step: step, formatOptions: format, isDisabled: disabled, className: "flex h-(--size-control-md) w-full min-w-0 items-center gap-3 disabled:opacity-45", children: [_jsxs(SliderTrack, { className: "relative flex h-(--size-control-md) min-w-0 flex-1 cursor-pointer items-center disabled:cursor-not-allowed", children: [_jsx("span", { className: "relative h-1 w-full rounded-pill bg-line-strong forced-colors:bg-[ButtonBorder]", children: _jsx(SliderFill, { className: "rounded-pill bg-primary disabled:bg-muted forced-colors:bg-[Highlight]" }) }), _jsx(SliderThumb, { "aria-labelledby": labelledBy, "aria-label": ariaLabel, "aria-describedby": describedBy, className: thumb })] }), output ? (_jsx(SliderOutput, { className: "w-14 shrink-0 text-right text-meta text-ink tabular-nums" })) : null] }) }));
 }

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

@@ -1,5 +1,7 @@
 export { ComboBox, type ComboBoxProps } from "./ComboBox.js";
+export { KanbanState, type KanbanStateValue, } from "./KanbanState.js";
 export { type ChoiceOption, type SegmentOption, } from "./options.js";
+export { Priority, type PriorityProps } from "./Priority.js";
 export { RadioGroup, type RadioGroupProps, } from "./RadioGroup.js";
 export { SearchField, type SearchFieldProps, } from "./SearchField.js";
 export { SegmentedControl, type SegmentedControlProps, } from "./SegmentedControl.js";

package/dist/primitives/choice/index.js

@@ -2,7 +2,9 @@
    (RadioGroup, SegmentedControl), prender o apagar (Switch), un valor en un rango (Slider)
    y buscar un texto suelto (SearchField). El valor es siempre un dato plano. */
 export { ComboBox } from "./ComboBox.js";
+export { KanbanState, } from "./KanbanState.js";
 export {} from "./options.js";
+export { Priority } from "./Priority.js";
 export { RadioGroup, } from "./RadioGroup.js";
 export { SearchField, } from "./SearchField.js";
 export { SegmentedControl, } from "./SegmentedControl.js";

package/dist/primitives/date/Calendar.js

@@ -3,8 +3,10 @@ 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";
+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.
  *
@@ -12,15 +14,37 @@ import { Button as AriaButton, Calendar as AriaCalendar, CalendarCell, CalendarG
  * 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",
 });
-function Header() {
+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 }) }), _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 }) })] }));
+    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 })) }));
@@ -70,7 +94,7 @@ export function Calendar({ value, onChange, min, max, isUnavailable, ...rest })
             ? 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 }) })] })] }) }));
+    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,
@@ -98,7 +122,7 @@ export function RangeCalendar({ months = 1, value, onChange, min, max, ...rest }
         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({
+    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

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

@@ -1,4 +1,9 @@
 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;
@@ -7,17 +12,20 @@ type Shared = {
     /** 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, }: Shared & {
+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, }: Shared & {
+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;
@@ -27,7 +35,7 @@ export type DateRangeValue = {
 };
 /** 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 & {
+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;

package/dist/primitives/date/DatePicker.js

@@ -35,7 +35,9 @@ const segment = tv({
         },
     },
 });
-function Segments({ slot }) {
+/** 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) {
@@ -50,7 +52,9 @@ function parse(iso) {
 }
 function useReadDate() {
     const copy = useUiCopy();
-    const format = new DateFormatter(copy.locale, { dateStyle: "medium" });
+    /* `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"));
@@ -58,7 +62,7 @@ function useReadDate() {
 }
 /** 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, }) {
+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,
@@ -67,10 +71,10 @@ export function DateField({ value, onChange, id: ownId, describedBy: ownDescribe
     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, {}) }) }) }));
+    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, }) {
+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,
@@ -79,11 +83,11 @@ export function DatePicker({ value, onChange, id: ownId, describedBy: ownDescrib
     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, {}) }) })] }) }));
+    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, }) {
+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,
@@ -95,5 +99,5 @@ export function DateRangePicker({ value, onChange, id: ownId, describedBy: ownDe
     }
     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 }) }) })] }) }));
+    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

@@ -1,2 +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

@@ -1,4 +1,6 @@
-/* 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. */
+/* 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

@@ -1,4 +1,4 @@
-import { type ReactNode } from "react";
+import { type PointerEvent, 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
@@ -52,13 +52,19 @@ export interface DialogProps {
      *  It is the tooltip and the accessible name, and it is not drawn. */
     expandLabel?: string;
     footer?: ReactNode;
+    /** The window can be dragged by its header, to see what is behind it — the form a «search
+     *  more» was opened from. Off on a phone, where the window is a bottom sheet. */
+    movable?: boolean;
     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;
+export declare function DialogSurface({ title, subtitle, context, onClose, onExpand, expandLabel, footer, children, onDragStart, }: Omit<DialogProps, "open" | "width" | "movable"> & {
+    /** Set by a movable `Dialog`: the header is the handle. */
+    onDragStart?: (event: PointerEvent<HTMLElement>) => void;
+}): 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.
@@ -68,7 +74,7 @@ export declare function DialogSurface({ title, subtitle, context, onClose, onExp
  * 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 declare function Dialog({ open, width, onClose, movable, ...surface }: DialogProps): import("react").JSX.Element;
 export interface WizardStep {
     id: string;
     label: string;