@sincpro/web-ui 0.1.0 → 0.2.0

package/dist/foundations/copy.js

@@ -49,6 +49,10 @@ export const ENGLISH_COPY = {
         saving: "Saving…",
         discard: "Discard",
         failed: "failed",
+        notices: "Notices about this record",
+        noticeOne: "{count} notice",
+        noticeMany: "{count} notices",
+        blocking: "What is wrong with this record",
     },
     shell: {
         modules: "All modules",
@@ -77,6 +81,7 @@ export const ENGLISH_COPY = {
     },
     choice: {
         noResults: "No results",
+        search: "Search",
     },
     search: {
         tools: "Filter, group and favorites",
@@ -119,6 +124,7 @@ export const ENGLISH_COPY = {
         retry: "Try again",
     },
     table: {
+        add: "Add",
         row: "row",
         rows: "rows",
         yes: "yes",
@@ -134,8 +140,10 @@ export const ENGLISH_COPY = {
     list: {
         empty: "There is nothing here yet.",
         emptyFiltered: "Nothing matches what is on.",
+        countOne: "1 record",
+        count: "{count} records",
     },
-    chatter: {
+    activity: {
         bySystem: "the system",
         more: "show the whole error",
         less: "show less",
@@ -146,13 +154,26 @@ export const ENGLISH_COPY = {
         recipients: "Who receives it",
         noRecipients: "nobody to send it to yet",
         messagePlaceholder: "Write a message…",
-        empty: "Nothing has happened here yet.",
-        history: "history",
+        emptyMessages: "Nobody has written here yet.",
+        emptyEvents: "Nothing has been logged yet.",
+        title: "Activity",
         open: "Open the {label}",
         fold: "Fold the {label}",
-        tabAll: "all",
-        tabMessages: "messages",
-        tabEvents: "events",
+        alerts: "Notices",
+        conversation: "Conversation",
+        history: "History",
+        viewTimeline: "Timeline",
+        moreAlerts: "Show {count} more",
+        fewerAlerts: "Show fewer",
+        filters: "Show",
+        filterAll: "All",
+        filterConversation: "Messages",
+        filterNotes: "Notes",
+        filterEvents: "Events",
+        today: "Today",
+        yesterday: "Yesterday",
+        emptyFilter: "Nothing of this kind yet.",
+        goTo: "Go to {owner}",
         send: "Send",
         sending: "Sending…",
         cancel: "Cancel",
@@ -161,6 +182,8 @@ export const ENGLISH_COPY = {
         label: "Copy",
         done: "Copied",
         failed: "Could not copy",
+        field: "Copy «{label}»",
+        empty: "Nothing to copy",
     },
     sorting: {
         label: "Sort",
@@ -217,6 +240,7 @@ export const ENGLISH_COPY = {
     },
     editable: {
         add: "Add a line",
+        addRow: "Add a row",
         empty: "No lines yet.",
         remove: "Remove the line",
     },
@@ -229,6 +253,7 @@ export const ENGLISH_COPY = {
         refine: "— narrow the filter",
         open: "Open",
         browseAll: "see all…",
+        loadingMore: "loading more…",
     },
     cell: {
         missing: "missing",
@@ -240,6 +265,10 @@ export const ENGLISH_COPY = {
         invalid: "invalid date",
         noDate: "no date",
     },
+    drill: {
+        back: "Back to {name}",
+        trail: "Opened from",
+    },
     dialog: {
         expand: "Expand to a panel",
         cancel: "Cancel",
@@ -323,6 +352,10 @@ export const ENGLISH_COPY = {
         remove: "Remove line",
         empty: "No lines yet.",
         done: "Done",
+        addSection: "Add a section",
+        addNote: "Add a note",
+        section: "Section",
+        note: "Note",
     },
     lineItems: {
         one: "{count} line",
@@ -341,6 +374,15 @@ export const ENGLISH_COPY = {
     relationCard: {
         summary: "Summary of {name}",
     },
+    totals: {
+        less: "less",
+        details: "Details: {label}",
+        open: "Open",
+        unlink: "Unlink",
+        credits: "Outstanding credits",
+        apply: "Apply",
+        applyCredit: "Apply {label}",
+    },
     inlineEdit: {
         addTag: "Add…",
         createTag: "Create «{name}»",
@@ -352,6 +394,9 @@ export const ENGLISH_COPY = {
         light: "Light",
         dark: "Dark",
     },
+    tree: {
+        empty: "Nothing here yet.",
+    },
     assist: {
         assistant: "Assistant",
         suggests: "suggests",
@@ -430,11 +475,12 @@ export function mergeCopy(over) {
         ops: { ...ENGLISH_COPY.ops, ...over.ops },
         sorting: { ...ENGLISH_COPY.sorting, ...over.sorting },
         copyable: { ...ENGLISH_COPY.copyable, ...over.copyable },
-        chatter: { ...ENGLISH_COPY.chatter, ...over.chatter },
+        activity: { ...ENGLISH_COPY.activity, ...over.activity },
         editable: { ...ENGLISH_COPY.editable, ...over.editable },
         picker: { ...ENGLISH_COPY.picker, ...over.picker },
         cell: { ...ENGLISH_COPY.cell, ...over.cell },
         time: { ...ENGLISH_COPY.time, ...over.time },
+        drill: { ...ENGLISH_COPY.drill, ...over.drill },
         dialog: { ...ENGLISH_COPY.dialog, ...over.dialog },
         report: { ...ENGLISH_COPY.report, ...over.report },
         builder: { ...ENGLISH_COPY.builder, ...over.builder },
@@ -444,8 +490,10 @@ export function mergeCopy(over) {
         lineItems: { ...ENGLISH_COPY.lineItems, ...over.lineItems },
         relation: { ...ENGLISH_COPY.relation, ...over.relation },
         relationCard: { ...ENGLISH_COPY.relationCard, ...over.relationCard },
+        totals: { ...ENGLISH_COPY.totals, ...over.totals },
         inlineEdit: { ...ENGLISH_COPY.inlineEdit, ...over.inlineEdit },
         theme: { ...ENGLISH_COPY.theme, ...over.theme },
+        tree: { ...ENGLISH_COPY.tree, ...over.tree },
         assist: { ...ENGLISH_COPY.assist, ...over.assist },
     };
 }

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

@@ -10,6 +10,9 @@ export type ComboBoxProps = {
     id?: string;
     describedBy?: string;
     invalid?: boolean;
+    /** 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 label. */
     mode?: FormMode;
 };

package/dist/primitives/choice/ComboBox.js

@@ -37,14 +37,14 @@ export function ComboBox({ mode, ...props }) {
        to be ABOVE the component that asks for it. */
     return (_jsx(AriaLocale, { children: _jsx(EditableComboBox, { ...props }) }));
 }
-function EditableComboBox({ value, onChange, options, placeholder, disabled = false, id: ownId, describedBy: ownDescribedBy, invalid: ownInvalid, }) {
+function EditableComboBox({ value, onChange, options, placeholder, disabled = false, id: ownId, describedBy: ownDescribedBy, invalid: ownInvalid, "aria-label": ariaLabel, }) {
     const { id, labelledBy, describedBy, invalid } = useFieldIds({
         id: ownId,
         describedBy: ownDescribedBy,
         invalid: ownInvalid,
     });
     const { contains } = useFilter({ sensitivity: "base" });
-    return (_jsxs(AriaComboBox, { id: id, "aria-labelledby": labelledBy, "aria-describedby": describedBy, 
+    return (_jsxs(AriaComboBox, { id: id, "aria-labelledby": labelledBy, "aria-label": ariaLabel, "aria-describedby": describedBy, 
         /* `defaultItems` and not `items`: with `items` React Aria hands the filtering to the
            consumer. These are the same options every render — only the filtering is React
            Aria's. */

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/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";