@rivetjs/cdk 0.0.0-stage → 0.1.0-alpha.0

package/state/date-intl.d.ts

@@ -0,0 +1,3 @@
+import type { LocalizedStrings } from "@rivetjs/cdk/i18n";
+export type DateValidationMessageKey = "rangeUnderflow" | "rangeOverflow" | "rangeReversed" | "unavailableDate";
+export declare const dateValidationMessages: LocalizedStrings<DateValidationMessageKey>;

package/state/date-intl.js

@@ -0,0 +1,36 @@
+export const dateValidationMessages = {
+    "ar-AE": { "rangeOverflow": "يجب أن تكون القيمة {maxValue} أو قبل ذلك.", "rangeReversed": "تاريخ البدء يجب أن يكون قبل تاريخ الانتهاء.", "rangeUnderflow": "يجب أن تكون القيمة {minValue} أو بعد ذلك.", "unavailableDate": "البيانات المحددة غير متاحة." },
+    "bg-BG": { "rangeOverflow": "Стойността трябва да е {maxValue} или по-ранна.", "rangeReversed": "Началната дата трябва да е преди крайната.", "rangeUnderflow": "Стойността трябва да е {minValue} или по-късно.", "unavailableDate": "Избраната дата не е налична." },
+    "cs-CZ": { "rangeOverflow": "Hodnota musí být {maxValue} nebo dřívější.", "rangeReversed": "Datum zahájení musí předcházet datu ukončení.", "rangeUnderflow": "Hodnota musí být {minValue} nebo pozdější.", "unavailableDate": "Vybrané datum není k dispozici." },
+    "da-DK": { "rangeOverflow": "Værdien skal være {maxValue} eller tidligere.", "rangeReversed": "Startdatoen skal være før slutdatoen.", "rangeUnderflow": "Værdien skal være {minValue} eller nyere.", "unavailableDate": "Den valgte dato er ikke tilgængelig." },
+    "de-DE": { "rangeOverflow": "Der Wert muss {maxValue} oder früher sein.", "rangeReversed": "Das Startdatum muss vor dem Enddatum liegen.", "rangeUnderflow": "Der Wert muss {minValue} oder später sein.", "unavailableDate": "Das ausgewählte Datum ist nicht verfügbar." },
+    "el-GR": { "rangeOverflow": "Η τιμή πρέπει να είναι {maxValue} ή παλαιότερη.", "rangeReversed": "Η ημερομηνία έναρξης πρέπει να είναι πριν από την ημερομηνία λήξης.", "rangeUnderflow": "Η τιμή πρέπει να είναι {minValue} ή μεταγενέστερη.", "unavailableDate": "Η επιλεγμένη ημερομηνία δεν είναι διαθέσιμη." },
+    "en-US": { "rangeUnderflow": "Value must be {minValue} or later.", "rangeOverflow": "Value must be {maxValue} or earlier.", "rangeReversed": "Start date must be before end date.", "unavailableDate": "Selected date unavailable." },
+    "es-ES": { "rangeOverflow": "El valor debe ser {maxValue} o anterior.", "rangeReversed": "La fecha de inicio debe ser anterior a la fecha de finalización.", "rangeUnderflow": "El valor debe ser {minValue} o posterior.", "unavailableDate": "Fecha seleccionada no disponible." },
+    "et-EE": { "rangeOverflow": "Väärtus peab olema {maxValue} või varasem.", "rangeReversed": "Alguskuupäev peab olema enne lõppkuupäeva.", "rangeUnderflow": "Väärtus peab olema {minValue} või hilisem.", "unavailableDate": "Valitud kuupäev pole saadaval." },
+    "fi-FI": { "rangeOverflow": "Arvon on oltava {maxValue} tai sitä aikaisempi.", "rangeReversed": "Aloituspäivän on oltava ennen lopetuspäivää.", "rangeUnderflow": "Arvon on oltava {minValue} tai sitä myöhäisempi.", "unavailableDate": "Valittu päivämäärä ei ole käytettävissä." },
+    "fr-FR": { "rangeOverflow": "La valeur doit être {maxValue} ou antérieure.", "rangeReversed": "La date de début doit être antérieure à la date de fin.", "rangeUnderflow": "La valeur doit être {minValue} ou ultérieure.", "unavailableDate": "La date sélectionnée n’est pas disponible." },
+    "he-IL": { "rangeOverflow": "הערך חייב להיות {maxValue} או מוקדם יותר.", "rangeReversed": "תאריך ההתחלה חייב להיות לפני תאריך הסיום.", "rangeUnderflow": "הערך חייב להיות {minValue} או מאוחר יותר.", "unavailableDate": "התאריך הנבחר אינו זמין." },
+    "hr-HR": { "rangeOverflow": "Vrijednost mora biti {maxValue} ili ranije.", "rangeReversed": "Datum početka mora biti prije datuma završetka.", "rangeUnderflow": "Vrijednost mora biti {minValue} ili kasnije.", "unavailableDate": "Odabrani datum nije dostupan." },
+    "hu-HU": { "rangeOverflow": "Az értéknek {maxValue} vagy korábbinak kell lennie.", "rangeReversed": "A kezdő dátumnak a befejező dátumnál korábbinak kell lennie.", "rangeUnderflow": "Az értéknek {minValue} vagy későbbinek kell lennie.", "unavailableDate": "A kiválasztott dátum nem érhető el." },
+    "it-IT": { "rangeOverflow": "Il valore deve essere {maxValue} o precedente.", "rangeReversed": "La data di inizio deve essere antecedente alla data di fine.", "rangeUnderflow": "Il valore deve essere {minValue} o successivo.", "unavailableDate": "Data selezionata non disponibile." },
+    "ja-JP": { "rangeOverflow": "値は {maxValue} 以下にする必要があります。", "rangeReversed": "開始日は終了日より前にする必要があります。", "rangeUnderflow": "値は {minValue} 以上にする必要があります。", "unavailableDate": "選択した日付は使用できません。" },
+    "ko-KR": { "rangeOverflow": "값은 {maxValue} 이전이어야 합니다.", "rangeReversed": "시작일은 종료일 이전이어야 합니다.", "rangeUnderflow": "값은 {minValue} 이후여야 합니다.", "unavailableDate": "선택한 날짜를 사용할 수 없습니다." },
+    "lt-LT": { "rangeOverflow": "Reikšmė turi būti {maxValue} arba ankstesnė.", "rangeReversed": "Pradžios data turi būti ankstesnė nei pabaigos data.", "rangeUnderflow": "Reikšmė turi būti {minValue} arba naujesnė.", "unavailableDate": "Pasirinkta data nepasiekiama." },
+    "lv-LV": { "rangeOverflow": "Vērtībai ir jābūt {maxValue} vai agrākai.", "rangeReversed": "Sākuma datumam ir jābūt pirms beigu datuma.", "rangeUnderflow": "Vērtībai ir jābūt {minValue} vai vēlākai.", "unavailableDate": "Atlasītais datums nav pieejams." },
+    "nb-NO": { "rangeOverflow": "Verdien må være {maxValue} eller tidligere.", "rangeReversed": "Startdatoen må være før sluttdatoen.", "rangeUnderflow": "Verdien må være {minValue} eller senere.", "unavailableDate": "Valgt dato utilgjengelig." },
+    "nl-NL": { "rangeOverflow": "Waarde moet {maxValue} of eerder zijn.", "rangeReversed": "De startdatum moet voor de einddatum liggen.", "rangeUnderflow": "Waarde moet {minValue} of later zijn.", "unavailableDate": "Geselecteerde datum niet beschikbaar." },
+    "pl-PL": { "rangeOverflow": "Wartość musi mieć wartość {maxValue} lub wcześniejszą.", "rangeReversed": "Data rozpoczęcia musi być wcześniejsza niż data zakończenia.", "rangeUnderflow": "Wartość musi mieć wartość {minValue} lub późniejszą.", "unavailableDate": "Wybrana data jest niedostępna." },
+    "pt-BR": { "rangeOverflow": "O valor deve ser {maxValue} ou anterior.", "rangeReversed": "A data inicial deve ser anterior à data final.", "rangeUnderflow": "O valor deve ser {minValue} ou posterior.", "unavailableDate": "Data selecionada indisponível." },
+    "pt-PT": { "rangeOverflow": "O valor tem de ser {maxValue} ou anterior.", "rangeReversed": "A data de início deve ser anterior à data de fim.", "rangeUnderflow": "O valor tem de ser {minValue} ou posterior.", "unavailableDate": "Data selecionada indisponível." },
+    "ro-RO": { "rangeOverflow": "Valoarea trebuie să fie {maxValue} sau anterioară.", "rangeReversed": "Data de început trebuie să fie anterioară datei de sfârșit.", "rangeUnderflow": "Valoarea trebuie să fie {minValue} sau ulterioară.", "unavailableDate": "Data selectată nu este disponibilă." },
+    "ru-RU": { "rangeOverflow": "Значение должно быть не позже {maxValue}.", "rangeReversed": "Дата начала должна предшествовать дате окончания.", "rangeUnderflow": "Значение должно быть не раньше {minValue}.", "unavailableDate": "Выбранная дата недоступна." },
+    "sk-SK": { "rangeOverflow": "Hodnota musí byť {maxValue} alebo skoršia.", "rangeReversed": "Dátum začiatku musí byť skorší ako dátum konca.", "rangeUnderflow": "Hodnota musí byť {minValue} alebo neskoršia.", "unavailableDate": "Vybratý dátum je nedostupný." },
+    "sl-SI": { "rangeOverflow": "Vrednost mora biti {maxValue} ali starejša.", "rangeReversed": "Začetni datum mora biti pred končnim datumom.", "rangeUnderflow": "Vrednost mora biti {minValue} ali novejša.", "unavailableDate": "Izbrani datum ni na voljo." },
+    "sr-SP": { "rangeOverflow": "Vrednost mora da bude {maxValue} ili starija.", "rangeReversed": "Datum početka mora biti pre datuma završetka.", "rangeUnderflow": "Vrednost mora da bude {minValue} ili novija.", "unavailableDate": "Izabrani datum nije dostupan." },
+    "sv-SE": { "rangeOverflow": "Värdet måste vara {maxValue} eller tidigare.", "rangeReversed": "Startdatumet måste vara före slutdatumet.", "rangeUnderflow": "Värdet måste vara {minValue} eller senare.", "unavailableDate": "Det valda datumet är inte tillgängligt." },
+    "tr-TR": { "rangeOverflow": "Değer, {maxValue} veya öncesi olmalıdır.", "rangeReversed": "Başlangıç tarihi bitiş tarihinden önce olmalıdır.", "rangeUnderflow": "Değer, {minValue} veya sonrası olmalıdır.", "unavailableDate": "Seçilen tarih kullanılamıyor." },
+    "uk-UA": { "rangeOverflow": "Значення має бути не пізніше {maxValue}.", "rangeReversed": "Дата початку має передувати даті завершення.", "rangeUnderflow": "Значення має бути не раніше {minValue}.", "unavailableDate": "Вибрана дата недоступна." },
+    "zh-CN": { "rangeOverflow": "值必须是 {maxValue} 或更早日期。", "rangeReversed": "开始日期必须早于结束日期。", "rangeUnderflow": "值必须是 {minValue} 或更晚日期。", "unavailableDate": "所选日期不可用。" },
+    "zh-TW": { "rangeOverflow": "值必須是 {maxValue} 或更早。", "rangeReversed": "開始日期必須在結束日期之前。", "rangeUnderflow": "值必須是 {minValue} 或更晚。", "unavailableDate": "所選日期無法使用。" },
+};

package/state/date-picker.d.ts

@@ -0,0 +1,144 @@
+import { type Signal } from "@rivetjs/reactivity";
+import { DateFormatter, type CalendarDate, type DateValueString } from "@rivetjs/cdk/date";
+import { type ValidationFunction, type ValidationResult } from "./form-validation.js";
+import { type OverlayTriggerProps, type OverlayTriggerState } from "./overlays.js";
+import { type DateFieldBaseOptions, type DateInput, type DateRangeOwner, type DateValue, type DateValueOwner, type DateValueProp, type FieldOptions, type MappedDateValue, type FormatterOptions, type Granularity, type RangeValue, type TimeValue } from "./date-field.js";
+export type { DateInput, DateValue, DateValueString, Granularity, RangeValue, TimeValue };
+export type PageBehavior = "single" | "visible";
+export type FirstDayOfWeek = "sun" | "mon" | "tue" | "wed" | "thu" | "fri" | "sat";
+interface DatePickerBaseOptions extends DateFieldBaseOptions, OverlayTriggerProps {
+    /** Determines whether the date picker popover should close automatically when a date is selected. @default true */
+    shouldCloseOnSelect?: boolean | (() => boolean);
+    /** Controls the behavior of paging (the calendar's `pageBehavior`). @default visible */
+    pageBehavior?: PageBehavior;
+    /** The day that starts the week. */
+    firstDayOfWeek?: FirstDayOfWeek;
+    id?: string;
+}
+export interface DatePickerStateOptions<T extends DateValue = DateValue> extends DatePickerBaseOptions {
+    /** Controlled value: a date, or a two-way signal of its string form. */
+    value?: DateValueProp<T>;
+    /** Uncontrolled initial value. */
+    defaultValue?: T | DateValueString | null;
+    /** Called with the new value (date object). */
+    onChange?: (value: MappedDateValue<T> | null) => void;
+    /** Callback that is called for each date of the calendar. If it returns true, then the date is unavailable. */
+    isDateUnavailable?: (date: DateValue) => boolean;
+    /** Custom client validation of the value (a date object). */
+    validate?: ValidationFunction<MappedDateValue<T>>;
+}
+export interface DateRangePickerStateOptions<T extends DateValue = DateValue> extends DatePickerBaseOptions {
+    /** Controlled value: a range of dates, or a two-way signal of `{ start, end }` string forms. */
+    value?: RangeValue<T | DateValueString> | null | Signal<RangeValue<DateValueString> | null>;
+    defaultValue?: RangeValue<T | DateValueString> | null;
+    onChange?: (value: RangeValue<MappedDateValue<T>> | null) => void;
+    /** When combined with `isDateUnavailable`, determines whether non-contiguous ranges, i.e. ranges containing unavailable dates, may be selected. */
+    allowsNonContiguousRanges?: boolean;
+    /** Callback that is called for each date of the calendar. If it returns true, then the date is unavailable. */
+    isDateUnavailable?: (date: DateValue, anchorDate: CalendarDate | null) => boolean;
+    /** Custom client validation of the range (date objects). */
+    validate?: ValidationFunction<RangeValue<MappedDateValue<T>>>;
+    /** The name of the start date input element, used when submitting an HTML form. */
+    startName?: string;
+    /** The name of the end date input element, used when submitting an HTML form. */
+    endName?: string;
+}
+interface PickerStateBase extends OverlayTriggerState {
+    readonly id: string;
+    readonly shouldCloseOnSelect: boolean | (() => boolean);
+    readonly pageBehavior?: PageBehavior | undefined;
+    readonly firstDayOfWeek?: FirstDayOfWeek | undefined;
+    /** Focus is within the picker (RAC `isFocusWithin`, `data-focus-within`). */
+    readonly isFocusWithin: Signal<boolean>;
+    /** Keyboard focus is within the picker (RAC `isFocusVisible`, `data-focus-visible`). */
+    readonly isFocusVisible: Signal<boolean>;
+}
+export interface DatePickerState extends PickerStateBase, DateValueOwner {
+    readonly kind: "picker";
+    /** The default date (`defaultValue ?? initial value`). */
+    readonly defaultValue: DateValueString | null;
+    /** The date portion selected in the calendar before a time was (string form). */
+    readonly selectedDate: Signal<DateValueString | null>;
+    /** The time portion set before a date was (string form). */
+    readonly selectedTime: Signal<DateValueString | null>;
+}
+export interface DateRangePickerState extends PickerStateBase, DateRangeOwner {
+    /** The default selected date range. */
+    readonly defaultValue: RangeValue<DateValueString> | null;
+    readonly allowsNonContiguousRanges: boolean;
+    readonly startName?: string | undefined;
+    readonly endName?: string | undefined;
+    /** The date portion of the selected range before a time range was. */
+    readonly selectedDateRange: Signal<RangeValue<DateValueString | null> | null>;
+    /** The time portion of the selected range before a date range was. */
+    readonly selectedTimeRange: Signal<RangeValue<DateValueString | null> | null>;
+}
+export type AnyDatePickerState = DatePickerState | DateRangePickerState;
+/**
+ * `useDatePickerState`: state of a date picker (a DateField plus a Calendar popover to enter or
+ * select a date and time value).
+ */
+export declare function createDatePickerState<T extends DateValue = DateValue>(options?: DatePickerStateOptions<T>): DatePickerState;
+/**
+ * `useDateRangePickerState`: state of a date range picker (two DateFields plus a RangeCalendar
+ * popover to enter or select a date and time range).
+ */
+export declare function createDateRangePickerState<T extends DateValue = DateValue>(options?: DateRangePickerStateOptions<T>): DateRangePickerState;
+/** The currently selected date (DatePicker). */
+export declare const pickerValue: (state: DatePickerState) => DateValue | null;
+/** The current range (`{start, end}` may be partial while the fields are edited). */
+export declare function pickerRangeValue(state: DateRangePickerState): RangeValue<DateValue | null>;
+/** The granularity for the field, based on the `granularity` prop and current value. */
+export declare function granularity(state: AnyDatePickerState): Granularity;
+/** Whether the date picker supports selecting a time, according to the `granularity` prop and current value. */
+export declare function hasTime(state: AnyDatePickerState): boolean;
+/** The date portion of the value; may be set prior to `value` if a date was selected but no time yet. */
+export declare function dateValue(state: DatePickerState): DateValue | null;
+/** The time portion of the value; may be set prior to `value` if a time was selected but no date yet. */
+export declare function timeValue(state: DatePickerState): TimeValue | null;
+/** The date portion of the selected range (DateRangePicker). */
+export declare function dateRange(state: DateRangePickerState): RangeValue<DateValue | null> | null;
+/** The time portion of the selected range (DateRangePicker). */
+export declare function timeRange(state: DateRangePickerState): RangeValue<TimeValue | null> | null;
+/** Whether the date picker is invalid, based on the `isInvalid`, `minValue`, and `maxValue` props. */
+export declare const isInvalid: (state: AnyDatePickerState) => boolean;
+/** @deprecated Use `isInvalid` instead. */
+export declare const validationState: (state: AnyDatePickerState) => "invalid" | null;
+/** The displayed validation (`state.displayValidation`). */
+export declare const pickerDisplayValidation: (state: AnyDatePickerState) => ValidationResult;
+/** Sets the selected date (DatePicker) or range (DateRangePicker). */
+export declare function setValue(state: DatePickerState, value: DateValue | null): void;
+export declare function setValue(state: DateRangePickerState, value: RangeValue<DateValue | null> | null): void;
+/**
+ * Sets the date portion of the value (the Calendar's `onChange`); intercepts so a time is not changed by date selection.
+ * `beforeCommit` runs after the value is written, right before the validation commit (the picker syncs its hidden
+ * inputs there, so the commit sees their new native validity: RA reads it in a layout effect after the update).
+ */
+export declare function setDateValue(state: DatePickerState, newValue: DateValue, beforeCommit?: () => void): void;
+/** Sets the time portion of the value. */
+export declare function setTimeValue(state: DatePickerState, newValue: TimeValue): void;
+/** Sets the date portion of the selected range (the RangeCalendar's `onChange`); `beforeCommit` as `setDateValue`. */
+export declare function setDateRange(state: DateRangePickerState, range: RangeValue<DateValue | null>, beforeCommit?: () => void): void;
+/** Sets the time portion of the selected range. */
+export declare function setTimeRange(state: DateRangePickerState, range: RangeValue<TimeValue | null>): void;
+/** Sets the date portion of either the start or end of the selected range. */
+export declare function setDate(state: DateRangePickerState, part: "start" | "end", date: DateValue | null): void;
+/** Sets the time portion of either the start or end of the selected range. */
+export declare function setTime(state: DateRangePickerState, part: "start" | "end", time: TimeValue | null): void;
+/** Sets the date and time of either the start or end of the selected range. */
+export declare function setDateTime(state: DateRangePickerState, part: "start" | "end", dateTime: DateValue | null): void;
+/**
+ * Sets whether the calendar popover is open. Closing commits a selected date (range) without a time
+ * using a placeholder time; if only the time was set, nothing commits (kept until the next open).
+ */
+export declare function setOpen(state: AnyDatePickerState, isOpen: boolean): void;
+/** The commit `setOpen(false)` does (also run when the popover closes by Escape / outside press). */
+export declare function commitOnClose(state: AnyDatePickerState): void;
+/** Formats the selected value (DatePicker: a string; DateRangePicker: `{start, end}` or null). */
+export declare function formatValue(state: DatePickerState, locale: string, fieldOptions: FieldOptions): string;
+export declare function formatValue(state: DateRangePickerState, locale: string, fieldOptions: FieldOptions): {
+    start: string;
+    end: string;
+} | null;
+/** Gets a formatter based on state's props. */
+export declare function getDateFormatter(state: AnyDatePickerState, locale: string, formatOptions: FormatterOptions): DateFormatter;

package/state/date-picker.js

@@ -0,0 +1,387 @@
+// Ported from react-stately (react-spectrum, Apache-2.0, © Adobe): datepicker/useDatePickerState.ts
+// and datepicker/useDateRangePickerState.ts.
+//
+// Rivet shape: plain signals + JSON (resumable); React Stately's methods are functions taking the
+// state first (`state.setDateValue(d)` → `setDateValue(state, d)`); DatePicker and DateRangePicker
+// share `setOpen` / `isInvalid` / `formatValue` (dispatch on `kind`). Dates are strings in the
+// signals. The overlay state is `createOverlayTriggerState`'s (the popover's open signal); the
+// whole state is region state, so a resumed page re-creating the picker's region keeps it.
+// The fields (`createPickerFieldState`, ./date-field.ts) read and write these values.
+import { signal, untrack, _regionState } from "@rivetjs/reactivity";
+import { DateFormatter, stringifyDateValue, toCalendarDate, toCalendarDateTime, toDateValueString, } from "@rivetjs/cdk/date";
+import { controllable } from "@rivetjs/cdk/interactions";
+import { createId } from "@rivetjs/cdk/id";
+import { resolveLocale } from "@rivetjs/cdk/i18n";
+import { createFormValidationState, commitValidation, displayValidation, DEFAULT_VALIDATION_RESULT, } from "./form-validation.js";
+import { createOverlayTriggerState, setOpen as setOverlayOpen } from "./overlays.js";
+import { builtinValidation, dateValueSignal, isWritable, defaultProps, getFormatOptions, getPlaceholderTime, isCompleteRange, noteLast, ownerBase, ownerFormat, parseInput, parseValue, rangeValueOf, writeRange, } from "./date-field.js";
+const pickerBase = (options) => ({
+    ...createOverlayTriggerState(options),
+    id: options.id ?? createId(),
+    shouldCloseOnSelect: options.shouldCloseOnSelect ?? true,
+    ...(options.pageBehavior ? { pageBehavior: options.pageBehavior } : {}),
+    ...(options.firstDayOfWeek ? { firstDayOfWeek: options.firstDayOfWeek } : {}),
+    isFocusWithin: signal(false),
+    isFocusVisible: signal(false),
+});
+/**
+ * `useDatePickerState`: state of a date picker (a DateField plus a Calendar popover to enter or
+ * select a date and time value).
+ */
+export function createDatePickerState(options = {}) {
+    return _regionState(() => {
+        const locale = resolveLocale(options.locale);
+        const value = dateValueSignal(options.value, options.defaultValue);
+        const initial = untrack(value);
+        const v = parseValue(initial) || parseInput(options.placeholderValue);
+        // props.granularity must actually exist in the value if one is provided.
+        const [granularity] = defaultProps(v, options.granularity, { granularity: "day", timeZone: null });
+        if (v && !(granularity in v))
+            throw new Error("Invalid granularity " + granularity + " for value " + v.toString());
+        const base = ownerBase(options, v, locale);
+        const state = {
+            ...pickerBase(options),
+            ...base,
+            kind: "picker",
+            value,
+            defaultValue: toDateValueString(options.defaultValue) ?? initial,
+            ...(options.onChange ? { onChange: options.onChange } : {}),
+            ...(options.isDateUnavailable ? { isDateUnavailable: options.isDateUnavailable } : {}),
+            ...(options.validate ? { validate: options.validate } : {}),
+            selectedDate: signal(null),
+            selectedTime: signal(null),
+            validation: createFormValidationState({
+                isInvalid: options.isInvalid,
+                validationState: options.validationState,
+                validationBehavior: options.validationBehavior ?? "aria",
+                name: options.name,
+                validationErrors: options.validationErrors,
+                builtinValidation: base.builtin,
+                value,
+            }),
+        };
+        state.builtin.set(untrack(() => builtinValidation(state)));
+        return state;
+    });
+}
+/**
+ * `useDateRangePickerState`: state of a date range picker (two DateFields plus a RangeCalendar
+ * popover to enter or select a date and time range).
+ */
+export function createDateRangePickerState(options = {}) {
+    return _regionState(() => {
+        const locale = resolveLocale(options.locale);
+        const toText = (range) => range ? { start: toDateValueString(range.start), end: toDateValueString(range.end) } : null;
+        const defaultText = toText(options.defaultValue);
+        const valueProp = options.value;
+        // A plain controlled value is the state's starting value (Rivet: the signal form is two-way).
+        const value = typeof valueProp === "function" ? controllable(valueProp, null) : controllable(undefined, valueProp !== undefined ? toText(valueProp) : defaultText);
+        const initial = untrack(value);
+        const partial = signal(initial || { start: null, end: null });
+        const v = parseValue(initial?.start) || parseValue(initial?.end) || parseInput(options.placeholderValue);
+        const [granularity] = defaultProps(v, options.granularity, { granularity: "day", timeZone: null });
+        if (v && !(granularity in v))
+            throw new Error("Invalid granularity " + granularity + " for value " + v.toString());
+        const base = ownerBase(options, v, locale);
+        const names = [options.startName, options.endName].filter((n) => n != null);
+        const state = {
+            ...pickerBase(options),
+            ...base,
+            kind: "range",
+            value,
+            partial,
+            defaultValue: defaultText ?? initial,
+            ...(options.onChange ? { onChange: options.onChange } : {}),
+            ...(options.isDateUnavailable ? { isDateUnavailable: options.isDateUnavailable } : {}),
+            ...(options.validate ? { validate: options.validate } : {}),
+            allowsNonContiguousRanges: options.allowsNonContiguousRanges ?? false,
+            ...(options.startName != null ? { startName: options.startName } : {}),
+            ...(options.endName != null ? { endName: options.endName } : {}),
+            selectedDateRange: signal(null),
+            selectedTimeRange: signal(null),
+            partValidity: signal({ start: DEFAULT_VALIDATION_RESULT, end: DEFAULT_VALIDATION_RESULT }),
+            validation: createFormValidationState({
+                isInvalid: options.isInvalid,
+                validationState: options.validationState,
+                validationBehavior: options.validationBehavior ?? "aria",
+                name: names,
+                validationErrors: options.validationErrors,
+                builtinValidation: base.builtin,
+                value,
+            }),
+        };
+        state.builtin.set(untrack(() => builtinValidation(state)));
+        return state;
+    });
+}
+// ---------------------------------------------------------------------------------------------
+// Accessors (reactive reads)
+/** The currently selected date (DatePicker). */
+export const pickerValue = (state) => parseValue(state.value());
+/** The current range (`{start, end}` may be partial while the fields are edited). */
+export function pickerRangeValue(state) {
+    const range = rangeValueOf(state);
+    return { start: parseValue(range.start), end: parseValue(range.end) };
+}
+/** The granularity for the field, based on the `granularity` prop and current value. */
+export function granularity(state) {
+    return ownerFormat(state).granularity;
+}
+/** Whether the date picker supports selecting a time, according to the `granularity` prop and current value. */
+export function hasTime(state) {
+    const g = granularity(state);
+    return g === "hour" || g === "minute" || g === "second";
+}
+/** The date portion of the value; may be set prior to `value` if a date was selected but no time yet. */
+export function dateValue(state) {
+    return pickerValue(state) ?? parseValue(state.selectedDate());
+}
+/** The time portion of the value; may be set prior to `value` if a time was selected but no date yet. */
+export function timeValue(state) {
+    const value = pickerValue(state);
+    if (value)
+        return "hour" in value ? value : parseValue(state.selectedTime());
+    return parseTime(state.selectedTime());
+}
+const parseTime = (text) => (text ? parseInput(text) : null);
+/** The date portion of the selected range (DateRangePicker). */
+export function dateRange(state) {
+    const value = pickerRangeValue(state);
+    if (isCompleteRange(value))
+        return value;
+    const selected = state.selectedDateRange();
+    return selected ? { start: parseValue(selected.start), end: parseValue(selected.end) } : null;
+}
+/** The time portion of the selected range (DateRangePicker). */
+export function timeRange(state) {
+    const value = pickerRangeValue(state);
+    if (isCompleteRange(value) && "hour" in value.start)
+        return value;
+    const selected = state.selectedTimeRange();
+    return selected ? { start: parseTime(selected.start), end: parseTime(selected.end) } : null;
+}
+/** Whether the date picker is invalid, based on the `isInvalid`, `minValue`, and `maxValue` props. */
+export const isInvalid = (state) => displayValidation(state.validation).isInvalid;
+/** @deprecated Use `isInvalid` instead. */
+export const validationState = (state) => (isInvalid(state) ? "invalid" : null);
+/** The displayed validation (`state.displayValidation`). */
+export const pickerDisplayValidation = (state) => displayValidation(state.validation);
+// ---------------------------------------------------------------------------------------------
+// Writes
+const shouldClose = (state) => typeof state.shouldCloseOnSelect === "function" ? state.shouldCloseOnSelect() : state.shouldCloseOnSelect;
+const afterWrite = (state, v) => {
+    noteLast(state.last, v);
+    state.builtin.set(untrack(() => builtinValidation(state)));
+};
+export function setValue(state, value) {
+    if (state.kind === "range") {
+        const range = value;
+        writeRange(state, range);
+        afterWrite(state, range?.start ?? range?.end ?? null);
+        return;
+    }
+    const text = stringifyDateValue(value);
+    if (untrack(state.value) !== text) {
+        if (isWritable(state.value))
+            state.value.set(text);
+        state.onChange?.(value);
+    }
+    afterWrite(state, value);
+}
+function commitValue(state, date, time, beforeCommit) {
+    setValue(state, "timeZone" in time ? time.set(toCalendarDate(date)) : toCalendarDateTime(date, time));
+    state.selectedDate.set(null);
+    state.selectedTime.set(null);
+    beforeCommit?.();
+    commitValidation(state.validation);
+}
+/**
+ * Sets the date portion of the value (the Calendar's `onChange`); intercepts so a time is not changed by date selection.
+ * `beforeCommit` runs after the value is written, right before the validation commit (the picker syncs its hidden
+ * inputs there, so the commit sees their new native validity: RA reads it in a layout effect after the update).
+ */
+export function setDateValue(state, newValue, beforeCommit) {
+    const close = shouldClose(state);
+    if (untrack(() => hasTime(state))) {
+        const selectedTime = untrack(() => timeValue(state));
+        if (selectedTime || close)
+            commitValue(state, newValue, selectedTime || getPlaceholderTime(parseValue(state.defaultValue) || parseValue(state.placeholderValue)), beforeCommit);
+        else
+            state.selectedDate.set(stringifyDateValue(newValue));
+    }
+    else {
+        setValue(state, newValue);
+        beforeCommit?.();
+        commitValidation(state.validation);
+    }
+    if (close)
+        setOverlayOpen(state, false);
+}
+/** Sets the time portion of the value. */
+export function setTimeValue(state, newValue) {
+    const selectedDate = untrack(() => dateValue(state));
+    if (selectedDate && newValue)
+        commitValue(state, selectedDate, newValue);
+    else
+        state.selectedTime.set(stringifyDateValue(newValue));
+}
+function commitRange(state, range, time, beforeCommit) {
+    setValue(state, {
+        start: "timeZone" in time.start ? time.start.set(toCalendarDate(range.start)) : toCalendarDateTime(range.start, time.start),
+        end: "timeZone" in time.end ? time.end.set(toCalendarDate(range.end)) : toCalendarDateTime(range.end, time.end),
+    });
+    state.selectedDateRange.set(null);
+    state.selectedTimeRange.set(null);
+    beforeCommit?.();
+    commitValidation(state.validation);
+}
+const rangeText = (range) => ({
+    start: stringifyDateValue(range.start),
+    end: stringifyDateValue(range.end),
+});
+/** Sets the date portion of the selected range (the RangeCalendar's `onChange`); `beforeCommit` as `setDateValue`. */
+export function setDateRange(state, range, beforeCommit) {
+    const close = shouldClose(state);
+    const time = untrack(() => timeRange(state));
+    const placeholder = parseValue(state.placeholderValue);
+    if (untrack(() => hasTime(state))) {
+        // Set a placeholder time if the popover is closing so we don't leave the field in an incomplete state.
+        if (isCompleteRange(range) && (close || (time?.start && time?.end)))
+            commitRange(state, range, { start: time?.start || getPlaceholderTime(placeholder), end: time?.end || getPlaceholderTime(placeholder) }, beforeCommit);
+        else
+            state.selectedDateRange.set(rangeText(range));
+    }
+    else if (isCompleteRange(range)) {
+        setValue(state, range);
+        beforeCommit?.();
+        commitValidation(state.validation);
+    }
+    else
+        state.selectedDateRange.set(rangeText(range));
+    if (close)
+        setOverlayOpen(state, false);
+}
+/** Sets the time portion of the selected range. */
+export function setTimeRange(state, range) {
+    const dates = untrack(() => dateRange(state));
+    if (isCompleteRange(dates) && isCompleteRange(range))
+        commitRange(state, dates, range);
+    else
+        state.selectedTimeRange.set(rangeText(range));
+}
+/** Sets the date portion of either the start or end of the selected range. */
+export function setDate(state, part, date) {
+    const dates = untrack(() => dateRange(state));
+    setDateRange(state, part === "start" ? { start: date, end: dates?.end ?? null } : { start: dates?.start ?? null, end: date });
+}
+/** Sets the time portion of either the start or end of the selected range. */
+export function setTime(state, part, time) {
+    const times = untrack(() => timeRange(state));
+    setTimeRange(state, part === "start" ? { start: time, end: times?.end ?? null } : { start: times?.start ?? null, end: time });
+}
+/** Sets the date and time of either the start or end of the selected range. */
+export function setDateTime(state, part, dateTime) {
+    const value = untrack(() => pickerRangeValue(state));
+    setValue(state, part === "start" ? { start: dateTime, end: value.end } : { start: value.start, end: dateTime });
+}
+/**
+ * Sets whether the calendar popover is open. Closing commits a selected date (range) without a time
+ * using a placeholder time; if only the time was set, nothing commits (kept until the next open).
+ */
+export function setOpen(state, isOpen) {
+    if (!isOpen)
+        commitOnClose(state);
+    setOverlayOpen(state, isOpen);
+}
+/** The commit `setOpen(false)` does (also run when the popover closes by Escape / outside press). */
+export function commitOnClose(state) {
+    if (!untrack(() => hasTime(state)))
+        return;
+    const placeholder = parseValue(state.placeholderValue);
+    if (state.kind === "range") {
+        const value = untrack(() => pickerRangeValue(state)), dates = untrack(() => dateRange(state)), time = untrack(() => timeRange(state));
+        if (!(value.start && value.end) && isCompleteRange(dates))
+            commitRange(state, dates, { start: time?.start || getPlaceholderTime(placeholder), end: time?.end || getPlaceholderTime(placeholder) });
+        return;
+    }
+    const value = untrack(() => pickerValue(state)), selectedDate = parseValue(untrack(state.selectedDate));
+    if (!value && selectedDate)
+        commitValue(state, selectedDate, parseTime(untrack(state.selectedTime)) || getPlaceholderTime(parseValue(state.defaultValue) || placeholder));
+}
+export function formatValue(state, locale, fieldOptions) {
+    if (state.kind === "range")
+        return formatRange(state, locale, fieldOptions);
+    const value = pickerValue(state);
+    if (!value)
+        return "";
+    const formatOpts = ownerFormat(state);
+    const formatter = new DateFormatter(locale, getFormatOptions(fieldOptions, formatOpts));
+    return formatter.format(value.toDate(formatOpts.timeZone ?? "UTC"));
+}
+function formatRange(state, locale, fieldOptions) {
+    const value = pickerRangeValue(state);
+    if (!value || !value.start || !value.end)
+        return null;
+    const startTimeZone = "timeZone" in value.start ? value.start.timeZone : undefined;
+    const startGranularity = state.granularityProp || (value.start && "minute" in value.start ? "minute" : "day");
+    const endTimeZone = "timeZone" in value.end ? value.end.timeZone : undefined;
+    const endGranularity = state.granularityProp || (value.end && "minute" in value.end ? "minute" : "day");
+    const startOptions = getFormatOptions(fieldOptions, {
+        granularity: startGranularity,
+        timeZone: startTimeZone,
+        hideTimeZone: state.hideTimeZone,
+        hourCycle: state.hourCycleProp,
+        showEra: (value.start.calendar.identifier === "gregory" && value.start.era === "BC") || (value.end.calendar.identifier === "gregory" && value.end.era === "BC"),
+    });
+    const startDate = value.start.toDate(startTimeZone || "UTC");
+    const endDate = value.end.toDate(endTimeZone || "UTC");
+    const startFormatter = new DateFormatter(locale, startOptions);
+    let endFormatter;
+    if (startTimeZone === endTimeZone && startGranularity === endGranularity && value.start.compare(value.end) !== 0) {
+        // Use formatRange, as it results in shorter output when some of the fields
+        // are shared between the start and end dates (e.g. the same month).
+        // Formatting will fail if the end date is before the start date. Fall back below when that happens.
+        try {
+            const parts = startFormatter.formatRangeToParts(startDate, endDate);
+            // Find the separator between the start and end date. This is determined
+            // by finding the last shared literal before the end range.
+            let separatorIndex = -1;
+            for (let i = 0; i < parts.length; i++) {
+                const part = parts[i];
+                if (part.source === "shared" && part.type === "literal")
+                    separatorIndex = i;
+                else if (part.source === "endRange")
+                    break;
+            }
+            // Now we can combine the parts into start and end strings.
+            let start = "";
+            let end = "";
+            for (let i = 0; i < parts.length; i++) {
+                if (i < separatorIndex)
+                    start += parts[i].value;
+                else if (i > separatorIndex)
+                    end += parts[i].value;
+            }
+            return { start, end };
+        }
+        catch {
+            // ignore
+        }
+        endFormatter = startFormatter;
+    }
+    else {
+        const endOptions = getFormatOptions(fieldOptions, {
+            granularity: endGranularity,
+            timeZone: endTimeZone,
+            hideTimeZone: state.hideTimeZone,
+            hourCycle: state.hourCycleProp,
+        });
+        endFormatter = new DateFormatter(locale, endOptions);
+    }
+    return { start: startFormatter.format(startDate), end: endFormatter.format(endDate) };
+}
+/** Gets a formatter based on state's props. */
+export function getDateFormatter(state, locale, formatOptions) {
+    const newOptions = { ...untrack(() => ownerFormat(state)), ...formatOptions };
+    return new DateFormatter(locale, getFormatOptions({}, newOptions));
+}