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

package/date-field/intl.js

@@ -0,0 +1,36 @@
+export const datePickerMessages = {
+    "ar-AE": { "calendar": "التقويم", "day": "يوم", "dayPeriod": "ص/م", "endDate": "تاريخ الانتهاء", "era": "العصر", "hour": "الساعات", "minute": "الدقائق", "month": "الشهر", "second": "الثواني", "selectedDateDescription": "تاريخ محدد: {date}", "selectedRangeDescription": "المدى الزمني المحدد: {startDate} إلى {endDate}", "selectedTimeDescription": "الوقت المحدد: {time}", "startDate": "تاريخ البدء", "timeZoneName": "التوقيت", "weekday": "اليوم", "year": "السنة", "Empty": "فارغ" },
+    "bg-BG": { "calendar": "Календар", "day": "ден", "dayPeriod": "пр.об./сл.об.", "endDate": "Крайна дата", "era": "ера", "hour": "час", "minute": "минута", "month": "месец", "second": "секунда", "selectedDateDescription": "Избрана дата: {date}", "selectedRangeDescription": "Избран диапазон: {startDate} до {endDate}", "selectedTimeDescription": "Избрано време: {time}", "startDate": "Начална дата", "timeZoneName": "часова зона", "weekday": "ден от седмицата", "year": "година", "Empty": "Изпразни" },
+    "cs-CZ": { "calendar": "Kalendář", "day": "den", "dayPeriod": "část dne", "endDate": "Konečné datum", "era": "letopočet", "hour": "hodina", "minute": "minuta", "month": "měsíc", "second": "sekunda", "selectedDateDescription": "Vybrané datum: {date}", "selectedRangeDescription": "Vybrané období: {startDate} až {endDate}", "selectedTimeDescription": "Vybraný čas: {time}", "startDate": "Počáteční datum", "timeZoneName": "časové pásmo", "weekday": "den v týdnu", "year": "rok", "Empty": "Prázdné" },
+    "da-DK": { "calendar": "Kalender", "day": "dag", "dayPeriod": "AM/PM", "endDate": "Slutdato", "era": "æra", "hour": "time", "minute": "minut", "month": "måned", "second": "sekund", "selectedDateDescription": "Valgt dato: {date}", "selectedRangeDescription": "Valgt interval: {startDate} til {endDate}", "selectedTimeDescription": "Valgt tidspunkt: {time}", "startDate": "Startdato", "timeZoneName": "tidszone", "weekday": "ugedag", "year": "år", "Empty": "Tom" },
+    "de-DE": { "calendar": "Kalender", "day": "Tag", "dayPeriod": "Tageshälfte", "endDate": "Enddatum", "era": "Epoche", "hour": "Stunde", "minute": "Minute", "month": "Monat", "second": "Sekunde", "selectedDateDescription": "Ausgewähltes Datum: {date}", "selectedRangeDescription": "Ausgewählter Bereich: {startDate} bis {endDate}", "selectedTimeDescription": "Ausgewählte Zeit: {time}", "startDate": "Startdatum", "timeZoneName": "Zeitzone", "weekday": "Wochentag", "year": "Jahr", "Empty": "Leer" },
+    "el-GR": { "calendar": "Ημερολόγιο", "day": "ημέρα", "dayPeriod": "π.μ./μ.μ.", "endDate": "Ημερομηνία λήξης", "era": "περίοδος", "hour": "ώρα", "minute": "λεπτό", "month": "μήνας", "second": "δευτερόλεπτο", "selectedDateDescription": "Επιλεγμένη ημερομηνία: {date}", "selectedRangeDescription": "Επιλεγμένο εύρος: {startDate} έως {endDate}", "selectedTimeDescription": "Επιλεγμένη ώρα: {time}", "startDate": "Ημερομηνία έναρξης", "timeZoneName": "ζώνη ώρας", "weekday": "καθημερινή", "year": "έτος", "Empty": "Άδειο" },
+    "en-US": { "era": "era", "year": "year", "month": "month", "day": "day", "hour": "hour", "minute": "minute", "second": "second", "dayPeriod": "AM/PM", "calendar": "Calendar", "startDate": "Start Date", "endDate": "End Date", "weekday": "day of the week", "timeZoneName": "time zone", "selectedDateDescription": "Selected Date: {date}", "selectedRangeDescription": "Selected Range: {startDate} to {endDate}", "selectedTimeDescription": "Selected Time: {time}", "Empty": "Empty" },
+    "es-ES": { "calendar": "Calendario", "day": "día", "dayPeriod": "a. m./p. m.", "endDate": "Fecha final", "era": "era", "hour": "hora", "minute": "minuto", "month": "mes", "second": "segundo", "selectedDateDescription": "Fecha seleccionada: {date}", "selectedRangeDescription": "Rango seleccionado: {startDate} a {endDate}", "selectedTimeDescription": "Hora seleccionada: {time}", "startDate": "Fecha de inicio", "timeZoneName": "zona horaria", "weekday": "día de la semana", "year": "año", "Empty": "Vacío" },
+    "et-EE": { "calendar": "Kalender", "day": "päev", "dayPeriod": "enne/pärast lõunat", "endDate": "Lõppkuupäev", "era": "ajastu", "hour": "tund", "minute": "minut", "month": "kuu", "second": "sekund", "selectedDateDescription": "Valitud kuupäev: {date}", "selectedRangeDescription": "Valitud vahemik: {startDate} kuni {endDate}", "selectedTimeDescription": "Valitud aeg: {time}", "startDate": "Alguskuupäev", "timeZoneName": "ajavöönd", "weekday": "nädalapäev", "year": "aasta", "Empty": "Tühjenda" },
+    "fi-FI": { "calendar": "Kalenteri", "day": "päivä", "dayPeriod": "vuorokaudenaika", "endDate": "Päättymispäivä", "era": "aikakausi", "hour": "tunti", "minute": "minuutti", "month": "kuukausi", "second": "sekunti", "selectedDateDescription": "Valittu päivämäärä: {date}", "selectedRangeDescription": "Valittu aikaväli: {startDate} – {endDate}", "selectedTimeDescription": "Valittu aika: {time}", "startDate": "Alkamispäivä", "timeZoneName": "aikavyöhyke", "weekday": "viikonpäivä", "year": "vuosi", "Empty": "Tyhjä" },
+    "fr-FR": { "calendar": "Calendrier", "day": "jour", "dayPeriod": "cadran", "endDate": "Date de fin", "era": "ère", "hour": "heure", "minute": "minute", "month": "mois", "second": "seconde", "selectedDateDescription": "Date sélectionnée : {date}", "selectedRangeDescription": "Plage sélectionnée : {startDate} au {endDate}", "selectedTimeDescription": "Heure choisie : {time}", "startDate": "Date de début", "timeZoneName": "fuseau horaire", "weekday": "jour de la semaine", "year": "année", "Empty": "Vide" },
+    "he-IL": { "calendar": "לוח שנה", "day": "יום", "dayPeriod": "לפנה״צ/אחה״צ", "endDate": "תאריך סיום", "era": "תקופה", "hour": "שעה", "minute": "דקה", "month": "חודש", "second": "שנייה", "selectedDateDescription": "תאריך נבחר: {date}", "selectedRangeDescription": "טווח נבחר: {startDate} עד {endDate}", "selectedTimeDescription": "זמן נבחר: {time}", "startDate": "תאריך התחלה", "timeZoneName": "אזור זמן", "weekday": "יום בשבוע", "year": "שנה", "Empty": "ריק" },
+    "hr-HR": { "calendar": "Kalendar", "day": "dan", "dayPeriod": "AM/PM", "endDate": "Datum završetka", "era": "era", "hour": "sat", "minute": "minuta", "month": "mjesec", "second": "sekunda", "selectedDateDescription": "Odabrani datum: {date}", "selectedRangeDescription": "Odabrani raspon: {startDate} do {endDate}", "selectedTimeDescription": "Odabrano vrijeme: {time}", "startDate": "Datum početka", "timeZoneName": "vremenska zona", "weekday": "dan u tjednu", "year": "godina", "Empty": "Prazno" },
+    "hu-HU": { "calendar": "Naptár", "day": "nap", "dayPeriod": "napszak", "endDate": "Befejező dátum", "era": "éra", "hour": "óra", "minute": "perc", "month": "hónap", "second": "másodperc", "selectedDateDescription": "Kijelölt dátum: {date}", "selectedRangeDescription": "Kijelölt tartomány: {startDate}–{endDate}", "selectedTimeDescription": "Kijelölt idő: {time}", "startDate": "Kezdő dátum", "timeZoneName": "időzóna", "weekday": "hét napja", "year": "év", "Empty": "Üres" },
+    "it-IT": { "calendar": "Calendario", "day": "giorno", "dayPeriod": "AM/PM", "endDate": "Data finale", "era": "era", "hour": "ora", "minute": "minuto", "month": "mese", "second": "secondo", "selectedDateDescription": "Data selezionata: {date}", "selectedRangeDescription": "Intervallo selezionato: da {startDate} a {endDate}", "selectedTimeDescription": "Ora selezionata: {time}", "startDate": "Data iniziale", "timeZoneName": "fuso orario", "weekday": "giorno della settimana", "year": "anno", "Empty": "Vuoto" },
+    "ja-JP": { "calendar": "カレンダー", "day": "日", "dayPeriod": "午前/午後", "endDate": "終了日", "era": "時代", "hour": "時", "minute": "分", "month": "月", "second": "秒", "selectedDateDescription": "選択した日付 : {date}", "selectedRangeDescription": "選択範囲 : {startDate} から {endDate}", "selectedTimeDescription": "選択した時間 : {time}", "startDate": "開始日", "timeZoneName": "タイムゾーン", "weekday": "曜日", "year": "年", "Empty": "空" },
+    "ko-KR": { "calendar": "달력", "day": "일", "dayPeriod": "오전/오후", "endDate": "종료일", "era": "연호", "hour": "시", "minute": "분", "month": "월", "second": "초", "selectedDateDescription": "선택 일자: {date}", "selectedRangeDescription": "선택 범위: {startDate} ~ {endDate}", "selectedTimeDescription": "선택 시간: {time}", "startDate": "시작일", "timeZoneName": "시간대", "weekday": "요일", "year": "년", "Empty": "비어 있음" },
+    "lt-LT": { "calendar": "Kalendorius", "day": "diena", "dayPeriod": "iki pietų / po pietų", "endDate": "Pabaigos data", "era": "era", "hour": "valanda", "minute": "minutė", "month": "mėnuo", "second": "sekundė", "selectedDateDescription": "Pasirinkta data: {date}", "selectedRangeDescription": "Pasirinktas intervalas: nuo {startDate} iki {endDate}", "selectedTimeDescription": "Pasirinktas laikas: {time}", "startDate": "Pradžios data", "timeZoneName": "laiko juosta", "weekday": "savaitės diena", "year": "metai", "Empty": "Tuščias" },
+    "lv-LV": { "calendar": "Kalendārs", "day": "diena", "dayPeriod": "priekšpusdienā/pēcpusdienā", "endDate": "Beigu datums", "era": "ēra", "hour": "stundas", "minute": "minūtes", "month": "mēnesis", "second": "sekundes", "selectedDateDescription": "Atlasītais datums: {date}", "selectedRangeDescription": "Atlasītais diapazons: no {startDate} līdz {endDate}", "selectedTimeDescription": "Atlasītais laiks: {time}", "startDate": "Sākuma datums", "timeZoneName": "laika josla", "weekday": "nedēļas diena", "year": "gads", "Empty": "Tukšs" },
+    "nb-NO": { "calendar": "Kalender", "day": "dag", "dayPeriod": "a.m./p.m.", "endDate": "Sluttdato", "era": "tidsalder", "hour": "time", "minute": "minutt", "month": "måned", "second": "sekund", "selectedDateDescription": "Valgt dato: {date}", "selectedRangeDescription": "Valgt område: {startDate} til {endDate}", "selectedTimeDescription": "Valgt tid: {time}", "startDate": "Startdato", "timeZoneName": "tidssone", "weekday": "ukedag", "year": "år", "Empty": "Tom" },
+    "nl-NL": { "calendar": "Kalender", "day": "dag", "dayPeriod": "a.m./p.m.", "endDate": "Einddatum", "era": "tijdperk", "hour": "uur", "minute": "minuut", "month": "maand", "second": "seconde", "selectedDateDescription": "Geselecteerde datum: {date}", "selectedRangeDescription": "Geselecteerd bereik: {startDate} tot {endDate}", "selectedTimeDescription": "Geselecteerde tijd: {time}", "startDate": "Startdatum", "timeZoneName": "tijdzone", "weekday": "dag van de week", "year": "jaar", "Empty": "Leeg" },
+    "pl-PL": { "calendar": "Kalendarz", "day": "dzień", "dayPeriod": "rano / po południu / wieczorem", "endDate": "Data końcowa", "era": "era", "hour": "godzina", "minute": "minuta", "month": "miesiąc", "second": "sekunda", "selectedDateDescription": "Wybrana data: {date}", "selectedRangeDescription": "Wybrany zakres: {startDate} do {endDate}", "selectedTimeDescription": "Wybrany czas: {time}", "startDate": "Data początkowa", "timeZoneName": "strefa czasowa", "weekday": "dzień tygodnia", "year": "rok", "Empty": "Pusty" },
+    "pt-BR": { "calendar": "Calendário", "day": "dia", "dayPeriod": "AM/PM", "endDate": "Data final", "era": "era", "hour": "hora", "minute": "minuto", "month": "mês", "second": "segundo", "selectedDateDescription": "Data selecionada: {date}", "selectedRangeDescription": "Intervalo selecionado: {startDate} a {endDate}", "selectedTimeDescription": "Hora selecionada: {time}", "startDate": "Data inicial", "timeZoneName": "fuso horário", "weekday": "dia da semana", "year": "ano", "Empty": "Vazio" },
+    "pt-PT": { "calendar": "Calendário", "day": "dia", "dayPeriod": "am/pm", "endDate": "Data de Término", "era": "era", "hour": "hora", "minute": "minuto", "month": "mês", "second": "segundo", "selectedDateDescription": "Data selecionada: {date}", "selectedRangeDescription": "Intervalo selecionado: {startDate} a {endDate}", "selectedTimeDescription": "Hora selecionada: {time}", "startDate": "Data de Início", "timeZoneName": "fuso horário", "weekday": "dia da semana", "year": "ano", "Empty": "Vazio" },
+    "ro-RO": { "calendar": "Calendar", "day": "zi", "dayPeriod": "a.m/p.m.", "endDate": "Dată final", "era": "eră", "hour": "oră", "minute": "minut", "month": "lună", "second": "secundă", "selectedDateDescription": "Dată selectată: {date}", "selectedRangeDescription": "Interval selectat: de la {startDate} până la {endDate}", "selectedTimeDescription": "Ora selectată: {time}", "startDate": "Dată început", "timeZoneName": "fus orar", "weekday": "ziua din săptămână", "year": "an", "Empty": "Gol" },
+    "ru-RU": { "calendar": "Календарь", "day": "день", "dayPeriod": "AM/PM", "endDate": "Дата окончания", "era": "эра", "hour": "час", "minute": "минута", "month": "месяц", "second": "секунда", "selectedDateDescription": "Выбранная дата: {date}", "selectedRangeDescription": "Выбранный диапазон: с {startDate} по {endDate}", "selectedTimeDescription": "Выбранное время: {time}", "startDate": "Дата начала", "timeZoneName": "часовой пояс", "weekday": "день недели", "year": "год", "Empty": "Не заполнено" },
+    "sk-SK": { "calendar": "Kalendár", "day": "deň", "dayPeriod": "AM/PM", "endDate": "Dátum ukončenia", "era": "letopočet", "hour": "hodina", "minute": "minúta", "month": "mesiac", "second": "sekunda", "selectedDateDescription": "Vybratý dátum: {date}", "selectedRangeDescription": "Vybratý rozsah: od {startDate} do {endDate}", "selectedTimeDescription": "Vybratý čas: {time}", "startDate": "Dátum začatia", "timeZoneName": "časové pásmo", "weekday": "deň týždňa", "year": "rok", "Empty": "Prázdne" },
+    "sl-SI": { "calendar": "Koledar", "day": "dan", "dayPeriod": "dop/pop", "endDate": "Datum konca", "era": "doba", "hour": "ura", "minute": "minuta", "month": "mesec", "second": "sekunda", "selectedDateDescription": "Izbrani datum: {date}", "selectedRangeDescription": "Izbrano območje: {startDate} do {endDate}", "selectedTimeDescription": "Izbrani čas: {time}", "startDate": "Datum začetka", "timeZoneName": "časovni pas", "weekday": "dan v tednu", "year": "leto", "Empty": "Prazen" },
+    "sr-SP": { "calendar": "Kalendar", "day": "дан", "dayPeriod": "пре подне/по подне", "endDate": "Datum završetka", "era": "ера", "hour": "сат", "minute": "минут", "month": "месец", "second": "секунд", "selectedDateDescription": "Izabrani datum: {date}", "selectedRangeDescription": "Izabrani opseg: od {startDate} do {endDate}", "selectedTimeDescription": "Izabrano vreme: {time}", "startDate": "Datum početka", "timeZoneName": "временска зона", "weekday": "дан у недељи", "year": "година", "Empty": "Prazno" },
+    "sv-SE": { "calendar": "Kalender", "day": "dag", "dayPeriod": "fm/em", "endDate": "Slutdatum", "era": "era", "hour": "timme", "minute": "minut", "month": "månad", "second": "sekund", "selectedDateDescription": "Valt datum: {date}", "selectedRangeDescription": "Valt intervall: {startDate} till {endDate}", "selectedTimeDescription": "Vald tid: {time}", "startDate": "Startdatum", "timeZoneName": "tidszon", "weekday": "veckodag", "year": "år", "Empty": "Tomt" },
+    "tr-TR": { "calendar": "Takvim", "day": "gün", "dayPeriod": "ÖÖ/ÖS", "endDate": "Bitiş Tarihi", "era": "çağ", "hour": "saat", "minute": "dakika", "month": "ay", "second": "saniye", "selectedDateDescription": "Seçilen Tarih: {date}", "selectedRangeDescription": "Seçilen Aralık: {startDate} - {endDate}", "selectedTimeDescription": "Seçilen Zaman: {time}", "startDate": "Başlangıç Tarihi", "timeZoneName": "saat dilimi", "weekday": "haftanın günü", "year": "yıl", "Empty": "Boş" },
+    "uk-UA": { "calendar": "Календар", "day": "день", "dayPeriod": "дп/пп", "endDate": "Дата завершення", "era": "ера", "hour": "година", "minute": "хвилина", "month": "місяць", "second": "секунда", "selectedDateDescription": "Вибрана дата: {date}", "selectedRangeDescription": "Вибраний діапазон: {startDate} — {endDate}", "selectedTimeDescription": "Вибраний час: {time}", "startDate": "Дата початку", "timeZoneName": "часовий пояс", "weekday": "день тижня", "year": "рік", "Empty": "Пусто" },
+    "zh-CN": { "calendar": "日历", "day": "日", "dayPeriod": "上午/下午", "endDate": "结束日期", "era": "纪元", "hour": "小时", "minute": "分钟", "month": "月", "second": "秒", "selectedDateDescription": "选定的日期：{date}", "selectedRangeDescription": "选定的范围：{startDate} 至 {endDate}", "selectedTimeDescription": "选定的时间：{time}", "startDate": "开始日期", "timeZoneName": "时区", "weekday": "工作日", "year": "年", "Empty": "空" },
+    "zh-TW": { "calendar": "日曆", "day": "日", "dayPeriod": "上午/下午", "endDate": "結束日期", "era": "纪元", "hour": "小时", "minute": "分钟", "month": "月", "second": "秒", "selectedDateDescription": "選定的日期：{date}", "selectedRangeDescription": "選定的範圍：{startDate} 至 {endDate}", "selectedTimeDescription": "選定的時間：{time}", "startDate": "開始日期", "timeZoneName": "时区", "weekday": "工作日", "year": "年", "Empty": "空白" },
+};

package/date-field/live-value.d.ts

@@ -0,0 +1,22 @@
+type Text = string | null;
+/** A date value (single, multiple or range) in the states' string form. */
+export declare function dateValueText(value: unknown): Text | Text[] | {
+    start: Text;
+    end: Text;
+} | null;
+/**
+ * The `value` option for a date state: a live, defined, non-Signal `value` becomes an accessor of its string form
+ * (controlled, never written); a Signal (two-way), `undefined` (uncontrolled) or a static value is returned as is.
+ */
+export declare function liveDateValue<T extends {
+    value?: unknown;
+}>(props: T): T["value"];
+/**
+ * `props` with a live controlled `value` replaced by its string-form accessor (`liveDateValue`), other keys forwarded
+ * unread — spread it into the state options: the copy reads no `value` getter (a resumed region is not re-created
+ * on a value change). Static props / no live `value`: `props` itself.
+ */
+export declare function liveDateProps<T extends {
+    value?: unknown;
+}>(props: T): T;
+export {};

package/date-field/live-value.jsx

@@ -0,0 +1,44 @@
+// Rivet-only (no React Aria counterpart): live controlled date values (live props P5). The date states keep values
+// as strings (`@rivetjs/cdk/date` serialize: resumable); a live `value={date()}` arrives as a getter of a date object
+// (or an array / range of them). `liveDateValue` turns it into an accessor of the string form, which the states take
+// as a controlled value: read on every use, never written (changes only call `onChange`, upstream's controlled prop).
+// A `.tsx` module (resume-compiled): the accessor is a resumable symbol over a narrow props view.
+import { untrack } from "@rivetjs/reactivity";
+import { splitProps } from "@rivetjs/runtime/props";
+import { toDateValueString } from "../date/serialize.js";
+import { isLive, liveAssign } from "../utils/live.jsx";
+/** A date value (single, multiple or range) in the states' string form. */
+export function dateValueText(value) {
+    if (value == null)
+        return null;
+    if (typeof value === "string")
+        return value;
+    if (Array.isArray(value))
+        return value.map((v) => toDateValueString(v));
+    const range = value;
+    if (!("calendar" in range) && "start" in range && "end" in range)
+        return { start: toDateValueString(range.start), end: toDateValueString(range.end) };
+    return toDateValueString(value);
+}
+/**
+ * The `value` option for a date state: a live, defined, non-Signal `value` becomes an accessor of its string form
+ * (controlled, never written); a Signal (two-way), `undefined` (uncontrolled) or a static value is returned as is.
+ */
+export function liveDateValue(props) {
+    if (!isLive(props, "value"))
+        return props.value;
+    const now = untrack(() => props.value);
+    if (now === undefined || typeof now === "function")
+        return now;
+    const view = splitProps(props, ["value"])[0];
+    return (() => dateValueText(view.value));
+}
+/**
+ * `props` with a live controlled `value` replaced by its string-form accessor (`liveDateValue`), other keys forwarded
+ * unread — spread it into the state options: the copy reads no `value` getter (a resumed region is not re-created
+ * on a value change). Static props / no live `value`: `props` itself.
+ */
+export function liveDateProps(props) {
+    const value = liveDateValue(props);
+    return typeof value === "function" && value !== untrack(() => props.value) ? liveAssign(props, { value }) : props;
+}

package/date-picker/behaviour.d.ts

@@ -0,0 +1,95 @@
+import { createSlotId } from "../slots/index.jsx";
+import { type ValidationResult } from "../state/form-validation.js";
+import { type AriaDateFieldOptions, type FocusWithinHandlers } from "../date-field/behaviour.jsx";
+import { type DateFieldState } from "../state/date-field.js";
+import { type AnyDatePickerState, type DatePickerState, type DateRangePickerState } from "../state/date-picker.js";
+import { type CalendarDate, type DateValueString } from "@rivetjs/cdk/date";
+export declare const labelId: (state: AnyDatePickerState) => string;
+export declare const buttonId: (state: AnyDatePickerState) => string;
+export declare const dialogId: (state: AnyDatePickerState) => string;
+/** The selected-value description (React Aria `useDescription`). */
+export declare const valueDescriptionId: (state: AnyDatePickerState) => string;
+/** DatePicker field id; DateRangePicker: `<id>-start` / `<id>-end`. */
+export declare const fieldId: (state: AnyDatePickerState, part?: "start" | "end") => string;
+/** The selected-value description (`Selected Date: …` / `Selected Range: … to …`). Reads. */
+export declare function pickerValueDescription(state: AnyDatePickerState): string;
+/**
+ * keydown in the group (useDatePickerGroup + useDatePicker): Alt+ArrowDown / Alt+ArrowUp open the
+ * popover; ArrowLeft / ArrowRight move between the segments and the button. A segment's own keys
+ * (handled by its field) are skipped. Runs on the group and forwarded by the fields.
+ */
+export declare function datePickerGroupKeyDown(event: KeyboardEvent, state: AnyDatePickerState): void;
+/** Label click: focus the first segment (DateRangePicker: the start field's). */
+export declare function datePickerLabelClick(event: MouseEvent, state: AnyDatePickerState): void;
+/** focusin within the picker (RAC useFocusRing({within}) of the root: `data-focus-within`, `data-focus-visible`). */
+export declare function datePickerFocusIn(event: FocusEvent, state: AnyDatePickerState): void;
+/** focusout within the picker: focus within ends when focus leaves the root (the portalled popover is outside). */
+export declare function datePickerFocusOut(event: FocusEvent, state: AnyDatePickerState): void;
+/** The user's FocusableProps of a picker (React Aria useDatePicker: on the group, not while the popover is open). */
+export interface PickerUserEvents extends FocusWithinHandlers {
+    onKeyDown?: ((event: KeyboardEvent) => void) | undefined;
+}
+/**
+ * The user's handler of a group keydown / focusin / focusout (after the picker's own): once
+ * per event (fields forward theirs and client-created events also bubble), skipped while open.
+ */
+export declare function datePickerUserEvent(event: Event, state: AnyDatePickerState, user: PickerUserEvents | undefined): void;
+/** Events a picker field forwards to the picker after its own handler (resumed handlers do not bubble to ancestors). */
+export declare function datePickerFieldEvent(event: Event, state: AnyDatePickerState, user?: PickerUserEvents): void;
+/** The popover opened: move focus to the calendar's focused cell (RAC Calendar `autoFocus`). */
+export declare function datePickerPopoverOpened(element: Element | null | undefined): void;
+/** Sync the hidden inputs of the picker's fields (after a value written from the calendar / on close). */
+export declare function syncPickerInputs(state: AnyDatePickerState, doc: Document): void;
+type Accessor<T> = () => T;
+export interface AriaDatePickerOptions extends PickerUserEvents {
+    "aria-label"?: string | undefined;
+    "aria-labelledby"?: string | undefined;
+    "aria-describedby"?: string | undefined;
+    "aria-details"?: string | undefined;
+    /** Whether a visible label renders (RAC `useSlot`). */
+    label?: boolean | Accessor<boolean> | undefined;
+    onKeyUp?: ((event: KeyboardEvent) => void) | undefined;
+    name?: string | undefined;
+    /** DateRangePicker: the names of the start / end hidden inputs. */
+    startName?: string | undefined;
+    endName?: string | undefined;
+    form?: string | undefined;
+    validationBehavior?: "native" | "aria" | undefined;
+    /** Calendar props from the picker (forwarded to CalendarContext / RangeCalendarContext). */
+    isDateUnavailable?: ((date: CalendarDate, anchorDate?: CalendarDate | null) => boolean) | undefined;
+    allowsNonContiguousRanges?: boolean | undefined;
+    createCalendar?: unknown;
+}
+export interface DatePickerAria {
+    groupProps: Record<string, unknown>;
+    labelProps: Record<string, unknown>;
+    /** DatePicker: the DateInput's props (DateFieldContext). */
+    fieldProps: AriaDateFieldOptions & {
+        pickerField: DateFieldState;
+    };
+    buttonProps: Record<string, unknown>;
+    dialogProps: Record<string, unknown>;
+    calendarProps: Record<string, unknown>;
+    descriptionProps: {
+        id: ReturnType<typeof createSlotId>;
+    };
+    errorMessageProps: {
+        id: ReturnType<typeof createSlotId>;
+    };
+    isInvalid: Accessor<boolean>;
+    validationErrors: Accessor<string[]>;
+    validationDetails: Accessor<ValidationResult["validationDetails"]>;
+}
+export interface DateRangePickerAria extends Omit<DatePickerAria, "fieldProps"> {
+    startFieldProps: AriaDateFieldOptions & {
+        pickerField: DateFieldState;
+    };
+    endFieldProps: AriaDateFieldOptions & {
+        pickerField: DateFieldState;
+    };
+}
+/** useDatePicker: the attribute bags of a date picker. Creates the picker's field state (shared value). */
+export declare function datePickerProps(props: AriaDatePickerOptions, state: DatePickerState): DatePickerAria;
+/** useDateRangePicker: the attribute bags of a date range picker (start / end fields share the picker's value). */
+export declare function dateRangePickerProps(props: AriaDatePickerOptions, state: DateRangePickerState): DateRangePickerAria;
+export type { DatePickerState, DateRangePickerState, DateValueString };

package/date-picker/behaviour.jsx

@@ -0,0 +1,343 @@
+// Ported from react-aria (react-spectrum) src/datepicker/useDatePicker.ts, useDateRangePicker.ts and
+// useDatePickerGroup.ts, Apache-2.0, © Adobe.
+// Rivet:
+// - Naming: `useDatePicker` → `datePickerProps(props, state)` ({ groupProps, labelProps, fieldProps, buttonProps,
+//   dialogProps, calendarProps, descriptionProps, errorMessageProps, isInvalid, validationErrors,
+//   validationDetails }), `useDateRangePicker` → `dateRangePickerProps` (`startFieldProps` / `endFieldProps`).
+//   State-dependent values are accessors; handlers are free functions `(event, state)`. `.tsx`: the closures resume.
+// - `fieldProps` carry the picker's field state (`pickerField`, sharing the picker's value: React Aria passes
+//   `value` / `onChange`) and `forward` (a resumed page runs only the nearest element's handler of an event: the
+//   field forwards its keydown / focusin / focusout to the picker group's logic).
+// - `calendarProps` values the Calendar reads when it renders (each open) are accessors: `defaultValue`,
+//   `defaultFocusedValue`, `isInvalid` (React Aria: `value` / `onChange` of the current render).
+// - Ids derive from the picker's base id (`<id>-label`, `<id>-field` / `-start` / `-end`, `<id>-button`,
+//   `<id>-dialog` …). On open, focus moves to the calendar's focused cell (RAC Calendar `autoFocus`).
+// Deviation: closing commits (`commitOnClose`, React Stately `setOpen(false)`) from the component (`PickerCommit` in
+// index.tsx, mounted while open), so Escape / outside press commit like the state's `setOpen`.
+import { untrack } from "@rivetjs/reactivity";
+import { createFocusManager, focusSafely } from "@rivetjs/cdk/focus";
+import { isFocusVisible, syncModalityFromFocus } from "@rivetjs/cdk/interactions/focus-visible";
+import { createSlotId, slotIdRef } from "../slots/index.jsx";
+import { labelsProps } from "../label/behaviour.js";
+import { displayValidation } from "../state/form-validation.js";
+import { dateGroupPointerDown, dateGroupPointerUp, syncFieldInput, arrowNavigation, message, wasHandled, focusWithinEvent, onceFor, ownerFlag, ownerFlagAttr, } from "../date-field/behaviour.jsx";
+import { createPickerFieldState, ownerDisabled, ownerReadOnly } from "../state/date-field.js";
+import { dateRange, dateValue, formatValue, isInvalid as pickerIsInvalid, setDateRange, setDateValue, setOpen, } from "../state/date-picker.js";
+import { stringifyDateValue } from "@rivetjs/cdk/date";
+export const labelId = (state) => state.id + "-label";
+export const buttonId = (state) => state.id + "-button";
+export const dialogId = (state) => state.id + "-dialog";
+/** The selected-value description (React Aria `useDescription`). */
+export const valueDescriptionId = (state) => state.id + "-value";
+/** DatePicker field id; DateRangePicker: `<id>-start` / `<id>-end`. */
+export const fieldId = (state, part) => state.id + "-" + (part ?? "field");
+/** The selected-value description (`Selected Date: …` / `Selected Range: … to …`). Reads. */
+export function pickerValueDescription(state) {
+    if (state.kind === "range") {
+        const range = formatValue(state, state.locale, { month: "long" });
+        return range ? message(state.locale, "selectedRangeDescription", { startDate: range.start, endDate: range.end }) : "";
+    }
+    const date = formatValue(state, state.locale, { month: "long" });
+    return date ? message(state.locale, "selectedDateDescription", { date }) : "";
+}
+/**
+ * keydown in the group (useDatePickerGroup + useDatePicker): Alt+ArrowDown / Alt+ArrowUp open the
+ * popover; ArrowLeft / ArrowRight move between the segments and the button. A segment's own keys
+ * (handled by its field) are skipped. Runs on the group and forwarded by the fields.
+ */
+export function datePickerGroupKeyDown(event, state) {
+    if (untrack(state.isOpen) || wasHandled(event))
+        return;
+    const group = event.target.ownerDocument.getElementById(state.id);
+    if (!group?.contains(event.target))
+        return;
+    if (event.altKey && (event.key === "ArrowDown" || event.key === "ArrowUp")) {
+        event.preventDefault();
+        event.stopPropagation();
+        setOpen(state, true);
+        return;
+    }
+    if (event.altKey || event.ctrlKey || event.metaKey || event.shiftKey)
+        return;
+    if (arrowNavigation(state.locale, group, event.target, event)) {
+        event.preventDefault();
+        event.stopPropagation();
+    }
+}
+/** Label click: focus the first segment (DateRangePicker: the start field's). */
+export function datePickerLabelClick(event, state) {
+    const group = event.currentTarget.ownerDocument.getElementById(state.id);
+    if (group)
+        createFocusManager(() => group, { accept: (element) => element.id !== buttonId(state) }).focusFirst();
+}
+const pickerRoot = (state, event) => event.target.ownerDocument.getElementById(state.id)?.closest("[data-rv-date-picker]") ?? null;
+/** focusin within the picker (RAC useFocusRing({within}) of the root: `data-focus-within`, `data-focus-visible`). */
+export function datePickerFocusIn(event, state) {
+    syncModalityFromFocus(event.target);
+    if (!untrack(state.isFocusWithin))
+        state.isFocusWithin.set(true);
+    const visible = isFocusVisible();
+    if (untrack(state.isFocusVisible) !== visible)
+        state.isFocusVisible.set(visible);
+}
+/** focusout within the picker: focus within ends when focus leaves the root (the portalled popover is outside). */
+export function datePickerFocusOut(event, state) {
+    if (pickerRoot(state, event)?.contains(event.relatedTarget))
+        return;
+    state.isFocusWithin.set(false);
+    state.isFocusVisible.set(false);
+}
+/**
+ * The user's handler of a group keydown / focusin / focusout (after the picker's own): once
+ * per event (fields forward theirs and client-created events also bubble), skipped while open.
+ */
+export function datePickerUserEvent(event, state, user) {
+    if (!user)
+        return;
+    const group = event.target.ownerDocument.getElementById(state.id);
+    if (!group)
+        return;
+    const isOpen = untrack(state.isOpen);
+    if (event.type === "focusin" || event.type === "focusout") {
+        if (group.contains(event.target))
+            focusWithinEvent(group, event, user, isOpen);
+        return;
+    }
+    if (isOpen || !group.contains(event.target) || !onceFor(group, event))
+        return;
+    if (event.type === "keydown")
+        user.onKeyDown?.(event);
+}
+/** Events a picker field forwards to the picker after its own handler (resumed handlers do not bubble to ancestors). */
+export function datePickerFieldEvent(event, state, user) {
+    if (event.type === "keydown")
+        datePickerGroupKeyDown(event, state);
+    else if (event.type === "focusin")
+        datePickerFocusIn(event, state);
+    else if (event.type === "focusout")
+        datePickerFocusOut(event, state);
+    datePickerUserEvent(event, state, user);
+}
+/** The popover opened: move focus to the calendar's focused cell (RAC Calendar `autoFocus`). */
+export function datePickerPopoverOpened(element) {
+    if (!element)
+        return;
+    const cell = element.querySelector('[role="grid"] [tabindex="0"]');
+    if (cell && !cell.contains(element.ownerDocument.activeElement))
+        focusSafely(cell);
+}
+/** Sync the hidden inputs of the picker's fields (after a value written from the calendar / on close). */
+export function syncPickerInputs(state, doc) {
+    // Field views over the picker's value (cheap; the inputs show committed values only).
+    const parts = state.kind === "range" ? ["start", "end"] : [undefined];
+    for (const part of parts) {
+        const link = part ? { owner: state, part } : { owner: state };
+        syncFieldInput(createPickerFieldState(link, { id: fieldId(state, part), locale: state.locale, defaultValue: null }), doc);
+    }
+}
+/** The calendar button's `isDisabled` (disabled or read-only): the creation value, or an accessor while a flag is live. */
+function buttonDisabled(state) {
+    return state.disabled || state.readOnly ? buttonDisabledReader(state) : state.isDisabled || state.isReadOnly;
+}
+function buttonDisabledReader(state) {
+    return () => ownerDisabled(state) || ownerReadOnly(state);
+}
+function pickerBase(props, state) {
+    // Locals: a resumable closure reading `props.x` would capture the whole props object.
+    const label = props.label;
+    // A function (createSlot's `hasSlot`, resumable) or a plain boolean: an arrow made in a ternary would not serialize.
+    const labelled = typeof label === "function" ? label : !!label;
+    const hasLabel = () => (typeof labelled === "function" ? labelled() : labelled);
+    const ariaLabel = props["aria-label"];
+    const ownLabelledBy = props["aria-labelledby"];
+    const extraDescribedBy = props["aria-describedby"];
+    const isInvalid = () => pickerIsInvalid(state);
+    const descriptionId = createSlotId(state.id + "-description");
+    const errorId = createSlotId(state.id + "-error", isInvalid);
+    // useField: the visible label labels the group; aria-label + aria-labelledby → the group labels itself too.
+    const labelledBy = () => {
+        const ids = [hasLabel() ? labelId(state) : undefined, ownLabelledBy].filter(Boolean).join(" ") || undefined;
+        return labelsProps(state.id, ariaLabel, ids)["aria-labelledby"];
+    };
+    const describedBy = () => [
+        pickerValueDescription(state) ? valueDescriptionId(state) : undefined,
+        slotIdRef(descriptionId, false),
+        isInvalid() ? slotIdRef(errorId) : undefined,
+        extraDescribedBy,
+    ]
+        .filter(Boolean)
+        .join(" ") || undefined;
+    // The group labels the button and the dialog: the group's own label, else the group id.
+    const groupLabelledBy = () => labelledBy() || state.id;
+    const user = props.onFocus || props.onBlur || props.onFocusChange || props.onKeyDown
+        ? { onFocus: props.onFocus, onBlur: props.onBlur, onFocusChange: props.onFocusChange, onKeyDown: props.onKeyDown }
+        : undefined;
+    const validation = state.validation;
+    return {
+        hasLabel,
+        labelledBy,
+        describedBy,
+        user,
+        isInvalid,
+        groupProps: {
+            id: state.id,
+            role: "group",
+            "aria-label": ariaLabel,
+            "aria-labelledby": groupLabelledBy,
+            "aria-describedby": describedBy,
+            "aria-details": props["aria-details"],
+            "aria-disabled": ownerFlagAttr(state, 0),
+            isInvalid,
+            isDisabled: ownerFlag(state, 0),
+            isReadOnly: ownerFlag(state, 1),
+            onKeyDown: (event) => {
+                datePickerGroupKeyDown(event, state);
+                datePickerUserEvent(event, state, user);
+            },
+            onKeyUp: props.onKeyUp,
+            onFocusIn: (event) => {
+                datePickerFocusIn(event, state);
+                datePickerUserEvent(event, state, user);
+            },
+            onFocusOut: (event) => {
+                datePickerFocusOut(event, state);
+                datePickerUserEvent(event, state, user);
+            },
+            onPointerDown: (event) => dateGroupPointerDown(event),
+            onPointerUp: (event) => dateGroupPointerUp(event),
+        },
+        labelProps: { id: labelId(state), onClick: (event) => datePickerLabelClick(event, state) },
+        buttonProps: {
+            id: buttonId(state),
+            "aria-haspopup": "dialog",
+            "aria-label": message(state.locale, "calendar"),
+            "aria-labelledby": () => `${buttonId(state)} ${groupLabelledBy()}`,
+            "aria-describedby": describedBy,
+            "aria-expanded": () => (state.isOpen() ? "true" : "false"),
+            isDisabled: buttonDisabled(state),
+            isPressed: () => state.isOpen(),
+            onPress: () => setOpen(state, true),
+        },
+        dialogProps: { id: dialogId(state), "aria-labelledby": () => `${buttonId(state)} ${groupLabelledBy()}` },
+        descriptionProps: { id: descriptionId },
+        errorMessageProps: { id: errorId },
+        validationErrors: () => displayValidation(validation).validationErrors,
+        validationDetails: () => displayValidation(validation).validationDetails,
+    };
+}
+/** useDatePicker: the attribute bags of a date picker. Creates the picker's field state (shared value). */
+export function datePickerProps(props, state) {
+    const base = pickerBase(props, state);
+    const id = fieldId(state);
+    const field = createPickerFieldState({ owner: state }, { id, locale: state.locale, defaultValue: state.defaultValue });
+    const { user } = base;
+    const isDateUnavailable = props.isDateUnavailable;
+    return {
+        groupProps: base.groupProps,
+        labelProps: base.labelProps,
+        fieldProps: {
+            pickerField: field,
+            isPresentation: true,
+            "aria-label": props["aria-label"],
+            // An accessor (RA: useSlot starts `true`, the label settles after mount): a call here froze the client value
+            // before the picker Label mounted (server `month, ` + labelledby, client `month`).
+            "aria-labelledby": base.labelledBy,
+            // RA useDatePicker fieldProps: the segments are described by the picker.
+            "aria-describedby": base.describedBy,
+            name: props.name,
+            form: props.form,
+            validationBehavior: props.validationBehavior,
+            forward: (event) => datePickerFieldEvent(event, state, user),
+        },
+        buttonProps: base.buttonProps,
+        dialogProps: base.dialogProps,
+        calendarProps: {
+            autoFocus: true,
+            defaultValue: () => {
+                const value = untrack(() => dateValue(state));
+                return value ? stringifyDateValue(value) : null;
+            },
+            defaultFocusedValue: () => (untrack(() => dateValue(state)) ? undefined : state.placeholderValue),
+            onChange: (date) => {
+                // The hidden inputs sync before the validation commit (it reads their native validity).
+                setDateValue(state, date, () => syncPickerInputs(state, document));
+                syncPickerInputs(state, document);
+            },
+            minValue: state.minValue,
+            maxValue: state.maxValue,
+            isDisabled: ownerFlag(state, 0),
+            isReadOnly: ownerFlag(state, 1),
+            // RA: the user's function as is (an arrow made in a ternary does not serialize: the context entry dropped).
+            isDateUnavailable,
+            isInvalid: () => untrack(() => pickerIsInvalid(state)),
+            firstDayOfWeek: state.firstDayOfWeek,
+            pageBehavior: state.pageBehavior,
+        },
+        descriptionProps: base.descriptionProps,
+        errorMessageProps: base.errorMessageProps,
+        isInvalid: base.isInvalid,
+        validationErrors: base.validationErrors,
+        validationDetails: base.validationDetails,
+    };
+}
+/** useDateRangePicker: the attribute bags of a date range picker (start / end fields share the picker's value). */
+export function dateRangePickerProps(props, state) {
+    const base = pickerBase(props, state);
+    const { user } = base;
+    const fieldOf = (part) => {
+        const id = fieldId(state, part);
+        const defaults = state.defaultValue;
+        const field = createPickerFieldState({ owner: state, part }, { id, locale: state.locale, defaultValue: defaults ? defaults[part] : null });
+        return {
+            pickerField: field,
+            isPresentation: true,
+            "aria-label": message(state.locale, part === "start" ? "startDate" : "endDate"),
+            // An accessor (RA: useSlot starts `true`, the label settles after mount): a call here froze the client value
+            // before the picker Label mounted (server `month, ` + labelledby, client `month`).
+            "aria-labelledby": base.labelledBy,
+            // RA useDateRangePicker start / end fieldProps: the segments are described by the picker.
+            "aria-describedby": base.describedBy,
+            name: part === "start" ? props.startName : props.endName,
+            form: props.form,
+            validationBehavior: props.validationBehavior,
+            focusScope: state.id,
+            forward: (event) => datePickerFieldEvent(event, state, user),
+        };
+    };
+    const isDateUnavailable = props.isDateUnavailable;
+    return {
+        groupProps: base.groupProps,
+        labelProps: base.labelProps,
+        startFieldProps: fieldOf("start"),
+        endFieldProps: fieldOf("end"),
+        buttonProps: base.buttonProps,
+        dialogProps: base.dialogProps,
+        calendarProps: {
+            autoFocus: true,
+            defaultValue: () => {
+                const range = untrack(() => dateRange(state));
+                return range?.start && range.end ? { start: stringifyDateValue(range.start), end: stringifyDateValue(range.end) } : null;
+            },
+            defaultFocusedValue: () => (untrack(() => dateRange(state)) ? undefined : state.placeholderValue),
+            onChange: (range) => {
+                // The hidden inputs sync before the validation commit (it reads their native validity).
+                setDateRange(state, range, () => syncPickerInputs(state, document));
+                syncPickerInputs(state, document);
+            },
+            minValue: state.minValue,
+            maxValue: state.maxValue,
+            isDisabled: ownerFlag(state, 0),
+            isReadOnly: ownerFlag(state, 1),
+            isDateUnavailable,
+            allowsNonContiguousRanges: props.allowsNonContiguousRanges,
+            isInvalid: () => untrack(() => pickerIsInvalid(state)),
+            firstDayOfWeek: state.firstDayOfWeek,
+            pageBehavior: state.pageBehavior,
+        },
+        descriptionProps: base.descriptionProps,
+        errorMessageProps: base.errorMessageProps,
+        isInvalid: base.isInvalid,
+        validationErrors: base.validationErrors,
+        validationDetails: base.validationDetails,
+    };
+}