chrona-react 0.2.1 → 0.3.1

package/README.md

@@ -6,8 +6,9 @@ values, no free-form date parsing, and no CSS — you own every pixel.
 Part of [Chrona](https://github.com/devlinduldulao/chrona). Built on
 [`chrona-core`](https://www.npmjs.com/package/chrona-core).
 
-> **Status: experimental 0.2.1.** Public APIs and styling attributes are not
-> frozen for v1; 0.2.0 changes the Calendar cell anatomy. See the
+> **Status: experimental 0.3.1.** Public APIs and styling attributes are not
+> frozen for v1. 0.3.0 changes when a field reports a value and leaves `today`
+> to the client; 0.2.0 changed the Calendar cell anatomy. See the
 > [changelog](./CHANGELOG.md). Automated axe checks pass, but no screen-reader
 > compatibility certification is claimed.
 
@@ -28,6 +29,15 @@ it is not native, load a polyfill before rendering:
 import "temporal-polyfill/global";
 ```
 
+`temporal-polyfill` 1.x installs itself only where Temporal is missing, and its
+default entry carries the ISO calendar alone. Node 24+ and current Chrome have
+native Temporal, so on those the import does nothing — and native Temporal in
+Node cannot yet do arithmetic on non-ISO calendars, `gregory` among them. A
+Calendar given `calendar="gregory"` or a Gregorian value renders in the browser
+and throws `RangeError: Temporal error: Not yet implemented.` during SSR. Keep
+values in `iso8601` unless you have verified the server runtime, and reach for
+`temporal-polyfill/full/global` when you need other calendar systems.
+
 The TypeScript types come along for free: `chrona-core`'s declarations reference
 `temporal-spec/global`, so importing anything from this package puts the ambient
 `Temporal` namespace in scope, exactly as the examples below assume.
@@ -138,6 +148,148 @@ Hidden inputs serialize with `.toString()` and are never read back.
 inputs do not take part in browser constraint validation — validate required,
 incomplete, or invalid values in your form layer before submission.
 
+## With shadcn/ui
+
+Chrona does not replace shadcn. Keep `Button`, `Popover`, `Label`, and `cn`.
+Replace the `react-day-picker` calendar and the native `<input type="time">`.
+Values stay `Temporal.PlainDate` / `Temporal.PlainTime` — do not convert through
+`Date`. Style days as `[data-part="cell-trigger"]`.
+
+```tsx
+"use client";
+
+import { useState } from "react";
+import { ChevronLeftIcon, ChevronRightIcon } from "lucide-react";
+import { Calendar as ChronaCalendar, TimeField } from "chrona-react";
+import { Button } from "@/components/ui/button";
+import { Label } from "@/components/ui/label";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
+import { cn } from "@/lib/utils";
+
+const calendarClassName = cn(
+  "bg-background p-3",
+  "[&_[data-part=header]]:mb-2 [&_[data-part=header]]:flex [&_[data-part=header]]:items-center [&_[data-part=header]]:justify-between",
+  "[&_[data-part=heading]]:text-sm [&_[data-part=heading]]:font-medium",
+  "[&_[data-part=grid-header]]:grid [&_[data-part=grid-header]]:grid-cols-7",
+  "[&_[data-part=header-cell]]:text-muted-foreground [&_[data-part=header-cell]]:text-center [&_[data-part=header-cell]]:text-[0.8rem]",
+  "[&_[data-part=row]]:grid [&_[data-part=row]]:grid-cols-7",
+  "[&_[data-part=cell-trigger]]:size-8 [&_[data-part=cell-trigger]]:w-full [&_[data-part=cell-trigger]]:rounded-md [&_[data-part=cell-trigger]]:text-sm",
+  "[&_[data-part=cell-trigger][data-selected]]:bg-primary [&_[data-part=cell-trigger][data-selected]]:text-primary-foreground",
+  "[&_[data-part=cell-trigger][data-today]]:bg-accent",
+  "[&_[data-part=cell-trigger][data-outside-month]]:text-muted-foreground [&_[data-part=cell-trigger][data-outside-month]]:opacity-50",
+);
+
+export function ShadcnCalendar({
+  value,
+  onChange,
+  placeholderValue,
+  className,
+}: {
+  value: Temporal.PlainDate | null;
+  onChange: (value: Temporal.PlainDate | null) => void;
+  placeholderValue: Temporal.PlainDate;
+  className?: string;
+}) {
+  return (
+    <ChronaCalendar.Root
+      value={value}
+      onChange={onChange}
+      placeholderValue={placeholderValue}
+      fixedWeeks
+      className={cn(calendarClassName, className)}
+    >
+      <ChronaCalendar.Header>
+        <ChronaCalendar.PrevButton asChild>
+          <Button variant="ghost" size="icon" className="size-8 p-0">
+            <ChevronLeftIcon className="size-4" />
+          </Button>
+        </ChronaCalendar.PrevButton>
+        <ChronaCalendar.Heading />
+        <ChronaCalendar.NextButton asChild>
+          <Button variant="ghost" size="icon" className="size-8 p-0">
+            <ChevronRightIcon className="size-4" />
+          </Button>
+        </ChronaCalendar.NextButton>
+      </ChronaCalendar.Header>
+      <ChronaCalendar.Grid>
+        <ChronaCalendar.GridHeader />
+        <ChronaCalendar.GridBody />
+      </ChronaCalendar.Grid>
+      <ChronaCalendar.LiveRegion className="sr-only" />
+    </ChronaCalendar.Root>
+  );
+}
+
+export function ShadcnDateTimePicker() {
+  const reference = Temporal.PlainDate.from({ year: 2026, month: 9, day: 16 });
+  const [open, setOpen] = useState(false);
+  const [date, setDate] = useState<Temporal.PlainDate | null>(null);
+  const [time, setTime] = useState<Temporal.PlainTime | null>(
+    Temporal.PlainTime.from("09:30:00"),
+  );
+
+  return (
+    <div className="flex gap-4">
+      <div className="flex flex-col gap-3">
+        <Label className="px-1">Date</Label>
+        <Popover open={open} onOpenChange={setOpen}>
+          <PopoverTrigger asChild>
+            <Button variant="outline" className="w-40 justify-start font-normal">
+              {date
+                ? date.toLocaleString("en-US", { dateStyle: "medium" })
+                : "Pick a date"}
+            </Button>
+          </PopoverTrigger>
+          <PopoverContent className="w-auto p-0" align="start">
+            <ShadcnCalendar
+              value={date}
+              placeholderValue={reference}
+              onChange={(next) => {
+                setDate(next);
+                setOpen(false);
+              }}
+            />
+          </PopoverContent>
+        </Popover>
+      </div>
+      <TimeField.Root value={time} onChange={setTime} hourCycle="h23" granularity="second">
+        <TimeField.Label className="px-1">Time</TimeField.Label>
+        <TimeField.Field className="border-input bg-background inline-flex h-9 items-center rounded-md border px-3 text-sm shadow-xs [&_[data-part=segment]]:w-6 [&_[data-part=segment]]:bg-transparent [&_[data-part=segment]]:text-center" />
+      </TimeField.Root>
+    </div>
+  );
+}
+```
+
+Chrona's `DatePicker` already owns a native `<dialog>` — do not wrap it in
+shadcn `Popover`. Use `DatePicker.Trigger asChild` with `Button` instead:
+
+```tsx
+import { CalendarIcon } from "lucide-react";
+import { DatePicker } from "chrona-react";
+
+<DatePicker.Root value={date} onChange={setDate} placeholderValue={reference}>
+  <DatePicker.Label asChild>
+    <Label>Appointment</Label>
+  </DatePicker.Label>
+  <DatePicker.Field className="border-input inline-flex h-9 items-center rounded-md border px-3 text-sm" />
+  <DatePicker.Trigger asChild>
+    <Button variant="outline" size="icon">
+      <CalendarIcon className="size-4" />
+    </Button>
+  </DatePicker.Trigger>
+  <DatePicker.Popover className="bg-popover text-popover-foreground rounded-md border p-3 shadow-md">
+    <DatePicker.Calendar />
+  </DatePicker.Popover>
+</DatePicker.Root>
+```
+
+`asChild` uses the child's children, so pass an icon (or omit `asChild` and keep Chrona's default glyph).
+
 ## Notes
 
 - ESM with declarations and source maps, targeting ES2022.
@@ -146,14 +298,22 @@ incomplete, or invalid values in your form layer before submission.
   the year are zero-padded, so a field keeps one width as it fills.
 - Typed digits are literal and stepping clamps: 29 February is reachable before
   the year is typed, and a finished date the calendar cannot hold reports
-  `onInvalid("nonexistent")` instead of sliding to the 28th. Validation waits for
-  a segment to finish, so a half-typed year raises nothing until blur.
+  `onInvalid("nonexistent")` instead of sliding to the 28th. A segment is a draft
+  until its last digit lands: a half-typed year neither reports a value nor
+  raises `onInvalid`, and blur settles whatever is there.
 - Use `value`/`onChange` or `defaultValue`/`onChange` — do not switch modes
   during a component's lifetime.
+- Field segments take digits from the keyboard and from soft keyboards that only
+  report an input event. The AM/PM segment also accepts its locale's own label,
+  so it can be set from a touch keyboard; it has no pointer affordance of its
+  own, so give readers a keyboard path to it.
 
 ## Server Rendering
 
-These are client components: mark the module that renders them `"use client"`.
+These components use state and context, so they carry a `"use client"`
+directive. Importing them from a Server Component is safe — the framework moves
+the import across the boundary — but the module that *renders* them still has to
+be a client module, so mark it `"use client"` as usual.
 
 The polyfill import is a side effect, so it has to reach the *client* bundle.
 Importing `temporal-polyfill/global` from a Server Component file installs
@@ -189,14 +349,61 @@ const REFERENCE = Temporal.PlainDate.from({ year: 2026, month: 9, day: 16 });
 ```
 
 Pass the same reference date, value, locale, and time zone on server and client.
-`timeZone` matters because today is resolved at render time, and a server in
-another zone marks a different cell.
+
+### Today
+
+A server cannot know the reader's today: it may be in another time zone, and a
+statically prerendered page can be served days after it was built. `Calendar`
+therefore leaves `data-today` and `aria-current="date"` out of the server HTML
+and resolves them on the client, right after hydration. The marker is correct
+for the reader and the markup hydrates cleanly; the cost is that it appears one
+frame late. Pass `today` yourself when you want it in the server HTML:
+
+```tsx
+<Calendar.Root today={Temporal.PlainDate.from("2026-09-16")} />
+```
+
+### Give every calendar a reference date
+
+With no `value`, `defaultValue`, `focusedValue`, `defaultFocusedValue` or
+`placeholderValue`, a calendar opens on the month of *its own* today — the
+server's on the server, the reader's in the browser. When those differ the
+focused cell, and at a month boundary the whole grid, will not match, and React
+reports a hydration mismatch it cannot patch up. Supply `placeholderValue` (or
+a value) on any calendar that is server-rendered.
+
+### Segments report once
+
+A `DateField` segment is a draft until its last digit lands. Typing `2026` calls
+`onChange` once with that year, not four times on the way through 2, 20 and 202,
+so a handler that writes to a route, a server action or a store is not handed
+dates nobody typed. Leaving the field early settles the draft literally: `20`
+becomes the year 20.
 
 Segment literals are normalized before they reach the DOM: `Intl` emits U+202F
 before AM/PM on newer ICU data and a plain space on older data, and Node and the
 browser rarely ship the same ICU. Chrona collapses both to a plain space, so a
 12-hour `TimeField` hydrates cleanly without forcing `hourCycle="h23"`.
 
+Two things it does not cover:
+
+- Dates before the Gregorian reform of 1582. Labels go through the `gregory`
+  calendar, which ICU treats as Julian before the cutover, and runtimes disagree
+  about the shift — Node labels ISO `0001-01-01` "January 3, 1" where Chrome
+  says "January 1, 1". Historical ranges that reach back past 1582 will both
+  mislabel cells and mismatch on hydration.
+- Cell labels in `ja-JP` and `zh-CN` when the server and the browser run
+  *different* Temporal implementations. V8 renders a date-only `dateStyle` as
+  `2026/9/16水曜日`; `temporal-polyfill` renders `2026年9月16日水曜日`. Node 24+
+  and current Chrome are both native, so they agree — but a Node 22 server is
+  polyfilled while its Chrome client is not, and every cell's accessible name
+  then differs. Run the same implementation on both sides.
+
+Load exactly one Temporal implementation, too. Two copies of a polyfill, or a
+mix of its default and `full` entry points, each install their own
+`globalThis.Temporal`; values built by the loser are refused with a
+`TEMPORAL_MISMATCH` `ChronaError` naming that cause.
+
 Full documentation lives in the [repository README](https://github.com/devlinduldulao/chrona#readme).
 
 ## License

package/dist/calendar.js

@@ -1,10 +1,11 @@
+"use client";
 import {
   Calendar,
   CalendarRoot,
   CalendarSurface,
   useCalendar
-} from "./chunk-RCWVBOO6.js";
-import "./chunk-GN2YCKFZ.js";
+} from "./chunk-I46LC4EZ.js";
+import "./chunk-SDDSKOYU.js";
 export {
   Calendar,
   CalendarRoot,

package/dist/{chunk-JNQXKZO3.js → chunk-27APJXNX.js}

@@ -1,13 +1,14 @@
+"use client";
 import {
   Part,
   composeEvent,
   useChronaConfig,
   useFormReset
-} from "./chunk-GN2YCKFZ.js";
+} from "./chunk-SDDSKOYU.js";
 
 // src/field.tsx
 import * as React from "react";
-import { connectField, createField, createStore, digitValue, fieldHourCycle, transitionField, translations } from "chrona-core";
+import { connectField, createField, createStore, dayPeriodValue, digitValue, fieldHourCycle, transitionField, translations } from "chrona-core";
 import { jsx } from "react/jsx-runtime";
 function equalValues(first, second) {
   return first === null || second === null ? first === second : first.equals(second);
@@ -63,6 +64,7 @@ function useField(kind, props) {
   const [labelled, setLabelled] = React.useState(false);
   return { id, state, options, send, reset, moveFocus, groupRef, announcement, registerLabel: setLabelled, api: connectField(state, { ...options, id, labelId: labelled ? `${id}-label` : void 0 }) };
 }
+var isInsertion = (type) => type === "insertText" || type === "insertCompositionText" || type === "insertReplacementText";
 function createFieldComponents(kind) {
   const Context = React.createContext(null);
   function useContext2() {
@@ -107,10 +109,19 @@ function createFieldComponents(kind) {
         onDrop: composeEvent(onDrop, (event) => event.preventDefault()),
         onChange: (event) => {
           const native = event.nativeEvent;
-          const digit = digitValue(native.data ?? "", options.locale);
+          const data = native.data ?? "";
           event.currentTarget.value = display;
-          if (native.inputType === "insertText" && digit !== null) send({ type: "DIGIT", segment: type, digit });
-          else if (native.inputType === "deleteContentBackward" || native.inputType === "deleteContentForward") send({ type: "CLEAR", segment: type });
+          if (isInsertion(native.inputType)) {
+            if (type === "dayPeriod") {
+              const period = dayPeriodValue(data, options.locale, fieldHourCycle(options));
+              if (period !== null) send({ type: "PERIOD", value: period });
+              return;
+            }
+            const digit = digitValue(data, options.locale);
+            if (digit !== null) send({ type: "DIGIT", segment: type, digit });
+          } else if (native.inputType === "deleteContentBackward" || native.inputType === "deleteContentForward") {
+            send({ type: "CLEAR", segment: type });
+          }
         },
         onKeyDown: composeEvent(onKeyDown, (event) => {
           if (event.altKey || event.ctrlKey || event.metaKey || event.nativeEvent.isComposing) return;
@@ -142,11 +153,14 @@ function createFieldComponents(kind) {
               event.preventDefault();
               moveFocus(type, (event.key === "ArrowRight" ? 1 : -1) * (dir === "rtl" ? -1 : 1));
               break;
-            default:
-              if (type === "dayPeriod" && ["a", "p"].includes(event.key.toLowerCase())) {
+            default: {
+              if (type !== "dayPeriod" || event.key.length !== 1) return;
+              const period = dayPeriodValue(event.key, options.locale, fieldHourCycle(options));
+              if (period !== null) {
                 event.preventDefault();
-                send({ type: "PERIOD", value: event.key.toLowerCase() === "a" ? 0 : 1 });
+                send({ type: "PERIOD", value: period });
               }
+            }
           }
         })
       }
@@ -181,4 +195,4 @@ export {
   useField,
   createFieldComponents
 };
-//# sourceMappingURL=chunk-JNQXKZO3.js.map
+//# sourceMappingURL=chunk-27APJXNX.js.map

package/dist/chunk-27APJXNX.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/field.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { connectField, createField, createStore, dayPeriodValue, digitValue, fieldHourCycle, transitionField, translations, type FieldEvent, type FieldInvalidReason, type FieldKind, type FieldOptions, type FieldValue, type SegmentType } from \"chrona-core\";\nimport { Part, composeEvent, type PartProps } from \"./part\";\nimport { useChronaConfig } from \"./provider\";\nimport { useFormReset, type HiddenInputProps } from \"./form\";\n\nexport interface FieldProps<Kind extends FieldKind> extends FieldOptions<Kind> {\n    defaultValue?: FieldValue<Kind> | null;\n    onChange?: (value: FieldValue<Kind> | null) => void;\n    onInvalid?: (reason: FieldInvalidReason) => void;\n    id?: string;\n    describedBy?: string;\n}\n\nfunction equalValues(first: { equals: (other: never) => boolean } | null, second: { equals: (other: never) => boolean } | null) {\n    return first === null || second === null ? first === second : first.equals(second as never);\n}\n\nexport function useField<Kind extends FieldKind>(kind: Kind, props: FieldProps<Kind>) {\n    const options = useChronaConfig(props);\n    const generatedId = React.useId();\n    const id = props.id ?? generatedId;\n    const [store] = React.useState(() => createStore(createField(kind, { ...options, value: props.value !== undefined ? props.value : props.defaultValue })));\n    const snapshot = React.useSyncExternalStore(store.subscribe, store.getSnapshot, store.getServerSnapshot);\n    const value = props.value !== undefined ? props.value : snapshot.value;\n    const placeholderValue = options.placeholderValue ?? snapshot.reference;\n    const { minValue, maxValue, locale, hourCycle, granularity } = options;\n    const configured = React.useMemo(() => createField(kind, { value, placeholderValue, minValue, maxValue, locale, hourCycle, granularity }), [kind, value, placeholderValue, minValue, maxValue, locale, hourCycle, granularity]);\n    const cycle = fieldHourCycle(options);\n    const configuration = `${cycle}:${props.granularity ?? \"minute\"}`;\n    const previousConfiguration = React.useRef(configuration);\n    const state = props.value !== undefined && !equalValues(snapshot.value, props.value)\n        ? configured\n        : kind === \"time\" && configuration !== previousConfiguration.current\n            ? configured\n            : snapshot;\n    React.useEffect(() => {\n        if (previousConfiguration.current !== configuration) {\n            previousConfiguration.current = configuration;\n            store.setState(state);\n        }\n    }, [configuration, state, store]);\n    const groupRef = React.useRef<HTMLElement | null>(null);\n    const [invalidReason, setInvalidReason] = React.useState<FieldInvalidReason | null>(null);\n    const announcementKey = { range: \"invalidRange\", unavailable: \"unavailable\", nonexistent: \"nonexistentDate\" } as const;\n    const announcement = invalidReason === null ? \"\" : options.translations?.[announcementKey[invalidReason]] ?? translations[announcementKey[invalidReason]];\n\n    function moveFocus(segment: SegmentType, offset: number) {\n        const elements = Array.from(groupRef.current?.querySelectorAll<HTMLInputElement>(\"input[data-segment]\") ?? []);\n        const index = elements.findIndex((element) => element.dataset.segment === segment);\n        elements[index + offset]?.focus();\n    }\n\n    function send(event: FieldEvent) {\n        const result = transitionField(state, event, options);\n        store.setState(result.state);\n        if (!result.state.invalid) setInvalidReason(null);\n        for (const effect of result.effects) {\n            if (effect.type === \"change\") props.onChange?.(effect.value);\n            if (effect.type === \"invalid\") { setInvalidReason(effect.reason); props.onInvalid?.(effect.reason); }\n            if (effect.type === \"advance\") queueMicrotask(() => moveFocus(effect.segment, 1));\n        }\n    }\n\n    function reset() {\n        setInvalidReason(null);\n        const value = props.defaultValue ?? null;\n        store.setState(createField(kind, { ...options, value }));\n        if (!equalValues(state.value, value)) props.onChange?.(value);\n    }\n\n    const [labelled, setLabelled] = React.useState(false);\n    return { id, state, options, send, reset, moveFocus, groupRef, announcement, registerLabel: setLabelled, api: connectField(state, { ...options, id, labelId: labelled ? `${id}-label` : undefined }) };\n}\n\n/** Insertion `inputType`s a soft keyboard or IME can use for a single character. */\nconst isInsertion = (type: string) => type === \"insertText\" || type === \"insertCompositionText\" || type === \"insertReplacementText\";\n\nexport function createFieldComponents<Kind extends FieldKind>(kind: Kind) {\n    const Context = React.createContext<ReturnType<typeof useField<Kind>> | null>(null);\n    function useContext() {\n        const context = React.useContext(Context);\n        if (!context) throw new Error(`${kind === \"date\" ? \"DateField\" : \"TimeField\"} parts must be inside their Root.`);\n        return context;\n    }\n\n    function Root({ children, asChild, className, style, ...props }: FieldProps<Kind> & Pick<PartProps, \"children\" | \"asChild\" | \"className\" | \"style\">) {\n        const context = useField(kind, props);\n        return <Context.Provider value={context}><Part asChild={asChild} className={className} style={style} id={props.id} dir={context.options.dir} data-scope={`${kind}-field`} data-part=\"root\">{children}</Part></Context.Provider>;\n    }\n\n    const Label = React.forwardRef<HTMLElement, PartProps>(function Label(props, ref) {\n        const { id, registerLabel } = useContext();\n        React.useEffect(() => {\n            registerLabel(true);\n            return () => registerLabel(false);\n        }, [registerLabel]);\n        return <Part as=\"span\" {...props} ref={ref} id={`${id}-label`} data-scope={`${kind}-field`} data-part=\"label\" />;\n    });\n\n    const Segment = React.forwardRef<HTMLInputElement, Omit<React.ComponentPropsWithoutRef<\"input\">, \"type\" | \"value\" | \"defaultValue\" | \"onChange\" | \"children\"> & { type: SegmentType }>(function Segment({ type, onKeyDown, onFocus, onBlur, onPaste, onDrop, ...props }, ref) {\n        const { state, api, options, send, moveFocus, groupRef } = useContext();\n        if (!(type in state.parts)) throw new Error(`The ${type} segment is not enabled in this field.`);\n        const { display, ...segmentProps } = api.getSegmentProps(type);\n        return <input {...props} {...segmentProps} ref={ref} type=\"text\" inputMode={type === \"dayPeriod\" ? \"text\" : \"numeric\"} autoComplete=\"off\" spellCheck={false} value={display} disabled={options.disabled} readOnly={options.readOnly}\n            onFocus={composeEvent(onFocus, (event) => { event.currentTarget.select(); })}\n            onBlur={composeEvent(onBlur, () => send({ type: \"BLUR\" }))}\n            onPaste={composeEvent(onPaste, (event) => event.preventDefault())}\n            onDrop={composeEvent(onDrop, (event) => event.preventDefault())}\n            onChange={(event) => {\n                // Soft keyboards do not produce a usable `key`, and Android delivers most text as a\n                // composition, so the input event is the only signal there. Nothing is parsed: the\n                // inserted text still has to read as one digit, or as this locale's AM/PM label.\n                const native = event.nativeEvent as InputEvent;\n                const data = native.data ?? \"\";\n                event.currentTarget.value = display;\n                if (isInsertion(native.inputType)) {\n                    if (type === \"dayPeriod\") {\n                        const period = dayPeriodValue(data, options.locale, fieldHourCycle(options));\n                        if (period !== null) send({ type: \"PERIOD\", value: period });\n                        return;\n                    }\n                    const digit = digitValue(data, options.locale);\n                    if (digit !== null) send({ type: \"DIGIT\", segment: type, digit });\n                } else if (native.inputType === \"deleteContentBackward\" || native.inputType === \"deleteContentForward\") {\n                    send({ type: \"CLEAR\", segment: type });\n                }\n            }}\n            onKeyDown={composeEvent(onKeyDown, (event) => {\n                if (event.altKey || event.ctrlKey || event.metaKey || event.nativeEvent.isComposing) return;\n                const digit = digitValue(event.key, options.locale);\n                const dir = options.dir ?? (groupRef.current?.closest(\"[dir]\")?.getAttribute(\"dir\") === \"rtl\" ? \"rtl\" : \"ltr\");\n                if (digit !== null) { event.preventDefault(); send({ type: \"DIGIT\", segment: type, digit }); return; }\n                switch (event.key) {\n                    case \"ArrowUp\": case \"ArrowDown\": event.preventDefault(); send({ type: \"STEP\", segment: type, direction: event.key === \"ArrowUp\" ? 1 : -1 }); break;\n                    case \"Home\": case \"End\": event.preventDefault(); send({ type: \"EDGE\", segment: type, edge: event.key === \"Home\" ? \"min\" : \"max\" }); break;\n                    case \"Backspace\": case \"Delete\": event.preventDefault(); send({ type: \"CLEAR\", segment: type }); break;\n                    case \"ArrowLeft\": case \"ArrowRight\": event.preventDefault(); moveFocus(type, (event.key === \"ArrowRight\" ? 1 : -1) * (dir === \"rtl\" ? -1 : 1)); break;\n                    default: {\n                        if (type !== \"dayPeriod\" || event.key.length !== 1) return;\n                        const period = dayPeriodValue(event.key, options.locale, fieldHourCycle(options));\n                        if (period !== null) { event.preventDefault(); send({ type: \"PERIOD\", value: period }); }\n                    }\n                }\n            })} />;\n    });\n\n    const Field = React.forwardRef<HTMLElement, PartProps>(function Field({ children, ...props }, ref) {\n        const { api, groupRef } = useContext();\n        return <Part {...props} {...api.getGroupProps()} ref={(node) => {\n            groupRef.current = node;\n            if (typeof ref === \"function\") ref(node); else if (ref) ref.current = node;\n        }}>{children ?? api.segments.map((segment, index) => segment.type === \"literal\" ? <span key={index} aria-hidden=\"true\" data-scope={`${kind}-field`} data-part=\"literal\">{segment.value}</span> : <Segment key={segment.type} type={segment.type} />)}</Part>;\n    });\n\n    function HiddenInput(props: HiddenInputProps) {\n        const { state, options, reset } = useContext();\n        const input = React.useRef<HTMLInputElement>(null);\n        useFormReset(input, props.form, reset);\n        return <input {...props} ref={input} type=\"hidden\" value={state.value?.toString() ?? \"\"} disabled={options.disabled || props.disabled} data-scope={`${kind}-field`} data-part=\"hidden-input\" />;\n    }\n\n    const ClearButton = React.forwardRef<HTMLElement, React.ComponentPropsWithoutRef<\"button\"> & { asChild?: boolean }>(function ClearButton({ onClick, ...props }, ref) {\n        const { options, send } = useContext();\n        return <Part as=\"button\" {...props} ref={ref} type=\"button\" aria-label={options.translations?.clear ?? translations.clear} disabled={options.disabled || options.readOnly} data-scope={`${kind}-field`} data-part=\"clear-button\" onClick={composeEvent(onClick, () => send({ type: \"CLEAR\" }))} />;\n    });\n\n    const LiveRegion = React.forwardRef<HTMLElement, PartProps>(function LiveRegion(props, ref) {\n        const { announcement } = useContext();\n        return <Part {...props} ref={ref} role=\"status\" aria-live=\"polite\" aria-atomic=\"true\" data-scope={`${kind}-field`} data-part=\"live-region\">{announcement}</Part>;\n    });\n\n    return { Root, Label, Field, Segment, HiddenInput, ClearButton, LiveRegion };\n}"],"mappings":";;;;;;;;;AAAA,YAAY,WAAW;AACvB,SAAS,cAAc,aAAa,aAAa,gBAAgB,YAAY,gBAAgB,iBAAiB,oBAAoI;AAuFjM;AA1EjD,SAAS,YAAY,OAAqD,QAAsD;AAC5H,SAAO,UAAU,QAAQ,WAAW,OAAO,UAAU,SAAS,MAAM,OAAO,MAAe;AAC9F;AAEO,SAAS,SAAiC,MAAY,OAAyB;AAClF,QAAM,UAAU,gBAAgB,KAAK;AACrC,QAAM,cAAoB,YAAM;AAChC,QAAM,KAAK,MAAM,MAAM;AACvB,QAAM,CAAC,KAAK,IAAU,eAAS,MAAM,YAAY,YAAY,MAAM,EAAE,GAAG,SAAS,OAAO,MAAM,UAAU,SAAY,MAAM,QAAQ,MAAM,aAAa,CAAC,CAAC,CAAC;AACxJ,QAAM,WAAiB,2BAAqB,MAAM,WAAW,MAAM,aAAa,MAAM,iBAAiB;AACvG,QAAM,QAAQ,MAAM,UAAU,SAAY,MAAM,QAAQ,SAAS;AACjE,QAAM,mBAAmB,QAAQ,oBAAoB,SAAS;AAC9D,QAAM,EAAE,UAAU,UAAU,QAAQ,WAAW,YAAY,IAAI;AAC/D,QAAM,aAAmB,cAAQ,MAAM,YAAY,MAAM,EAAE,OAAO,kBAAkB,UAAU,UAAU,QAAQ,WAAW,YAAY,CAAC,GAAG,CAAC,MAAM,OAAO,kBAAkB,UAAU,UAAU,QAAQ,WAAW,WAAW,CAAC;AAC9N,QAAM,QAAQ,eAAe,OAAO;AACpC,QAAM,gBAAgB,GAAG,KAAK,IAAI,MAAM,eAAe,QAAQ;AAC/D,QAAM,wBAA8B,aAAO,aAAa;AACxD,QAAM,QAAQ,MAAM,UAAU,UAAa,CAAC,YAAY,SAAS,OAAO,MAAM,KAAK,IAC7E,aACA,SAAS,UAAU,kBAAkB,sBAAsB,UACvD,aACA;AACV,EAAM,gBAAU,MAAM;AAClB,QAAI,sBAAsB,YAAY,eAAe;AACjD,4BAAsB,UAAU;AAChC,YAAM,SAAS,KAAK;AAAA,IACxB;AAAA,EACJ,GAAG,CAAC,eAAe,OAAO,KAAK,CAAC;AAChC,QAAM,WAAiB,aAA2B,IAAI;AACtD,QAAM,CAAC,eAAe,gBAAgB,IAAU,eAAoC,IAAI;AACxF,QAAM,kBAAkB,EAAE,OAAO,gBAAgB,aAAa,eAAe,aAAa,kBAAkB;AAC5G,QAAM,eAAe,kBAAkB,OAAO,KAAK,QAAQ,eAAe,gBAAgB,aAAa,CAAC,KAAK,aAAa,gBAAgB,aAAa,CAAC;AAExJ,WAAS,UAAU,SAAsB,QAAgB;AACrD,UAAM,WAAW,MAAM,KAAK,SAAS,SAAS,iBAAmC,qBAAqB,KAAK,CAAC,CAAC;AAC7G,UAAM,QAAQ,SAAS,UAAU,CAAC,YAAY,QAAQ,QAAQ,YAAY,OAAO;AACjF,aAAS,QAAQ,MAAM,GAAG,MAAM;AAAA,EACpC;AAEA,WAAS,KAAK,OAAmB;AAC7B,UAAM,SAAS,gBAAgB,OAAO,OAAO,OAAO;AACpD,UAAM,SAAS,OAAO,KAAK;AAC3B,QAAI,CAAC,OAAO,MAAM,QAAS,kBAAiB,IAAI;AAChD,eAAW,UAAU,OAAO,SAAS;AACjC,UAAI,OAAO,SAAS,SAAU,OAAM,WAAW,OAAO,KAAK;AAC3D,UAAI,OAAO,SAAS,WAAW;AAAE,yBAAiB,OAAO,MAAM;AAAG,cAAM,YAAY,OAAO,MAAM;AAAA,MAAG;AACpG,UAAI,OAAO,SAAS,UAAW,gBAAe,MAAM,UAAU,OAAO,SAAS,CAAC,CAAC;AAAA,IACpF;AAAA,EACJ;AAEA,WAAS,QAAQ;AACb,qBAAiB,IAAI;AACrB,UAAMA,SAAQ,MAAM,gBAAgB;AACpC,UAAM,SAAS,YAAY,MAAM,EAAE,GAAG,SAAS,OAAAA,OAAM,CAAC,CAAC;AACvD,QAAI,CAAC,YAAY,MAAM,OAAOA,MAAK,EAAG,OAAM,WAAWA,MAAK;AAAA,EAChE;AAEA,QAAM,CAAC,UAAU,WAAW,IAAU,eAAS,KAAK;AACpD,SAAO,EAAE,IAAI,OAAO,SAAS,MAAM,OAAO,WAAW,UAAU,cAAc,eAAe,aAAa,KAAK,aAAa,OAAO,EAAE,GAAG,SAAS,IAAI,SAAS,WAAW,GAAG,EAAE,WAAW,OAAU,CAAC,EAAE;AACzM;AAGA,IAAM,cAAc,CAAC,SAAiB,SAAS,gBAAgB,SAAS,2BAA2B,SAAS;AAErG,SAAS,sBAA8C,MAAY;AACtE,QAAM,UAAgB,oBAAwD,IAAI;AAClF,WAASC,cAAa;AAClB,UAAM,UAAgB,iBAAW,OAAO;AACxC,QAAI,CAAC,QAAS,OAAM,IAAI,MAAM,GAAG,SAAS,SAAS,cAAc,WAAW,mCAAmC;AAC/G,WAAO;AAAA,EACX;AAEA,WAAS,KAAK,EAAE,UAAU,SAAS,WAAW,OAAO,GAAG,MAAM,GAAuF;AACjJ,UAAM,UAAU,SAAS,MAAM,KAAK;AACpC,WAAO,oBAAC,QAAQ,UAAR,EAAiB,OAAO,SAAS,8BAAC,QAAK,SAAkB,WAAsB,OAAc,IAAI,MAAM,IAAI,KAAK,QAAQ,QAAQ,KAAK,cAAY,GAAG,IAAI,UAAU,aAAU,QAAQ,UAAS,GAAO;AAAA,EAChN;AAEA,QAAM,QAAc,iBAAmC,SAASC,OAAM,OAAO,KAAK;AAC9E,UAAM,EAAE,IAAI,cAAc,IAAID,YAAW;AACzC,IAAM,gBAAU,MAAM;AAClB,oBAAc,IAAI;AAClB,aAAO,MAAM,cAAc,KAAK;AAAA,IACpC,GAAG,CAAC,aAAa,CAAC;AAClB,WAAO,oBAAC,QAAK,IAAG,QAAQ,GAAG,OAAO,KAAU,IAAI,GAAG,EAAE,UAAU,cAAY,GAAG,IAAI,UAAU,aAAU,SAAQ;AAAA,EAClH,CAAC;AAED,QAAM,UAAgB,iBAAiK,SAASE,SAAQ,EAAE,MAAM,WAAW,SAAS,QAAQ,SAAS,QAAQ,GAAG,MAAM,GAAG,KAAK;AAC1Q,UAAM,EAAE,OAAO,KAAK,SAAS,MAAM,WAAW,SAAS,IAAIF,YAAW;AACtE,QAAI,EAAE,QAAQ,MAAM,OAAQ,OAAM,IAAI,MAAM,OAAO,IAAI,wCAAwC;AAC/F,UAAM,EAAE,SAAS,GAAG,aAAa,IAAI,IAAI,gBAAgB,IAAI;AAC7D,WAAO;AAAA,MAAC;AAAA;AAAA,QAAO,GAAG;AAAA,QAAQ,GAAG;AAAA,QAAc;AAAA,QAAU,MAAK;AAAA,QAAO,WAAW,SAAS,cAAc,SAAS;AAAA,QAAW,cAAa;AAAA,QAAM,YAAY;AAAA,QAAO,OAAO;AAAA,QAAS,UAAU,QAAQ;AAAA,QAAU,UAAU,QAAQ;AAAA,QACvN,SAAS,aAAa,SAAS,CAAC,UAAU;AAAE,gBAAM,cAAc,OAAO;AAAA,QAAG,CAAC;AAAA,QAC3E,QAAQ,aAAa,QAAQ,MAAM,KAAK,EAAE,MAAM,OAAO,CAAC,CAAC;AAAA,QACzD,SAAS,aAAa,SAAS,CAAC,UAAU,MAAM,eAAe,CAAC;AAAA,QAChE,QAAQ,aAAa,QAAQ,CAAC,UAAU,MAAM,eAAe,CAAC;AAAA,QAC9D,UAAU,CAAC,UAAU;AAIjB,gBAAM,SAAS,MAAM;AACrB,gBAAM,OAAO,OAAO,QAAQ;AAC5B,gBAAM,cAAc,QAAQ;AAC5B,cAAI,YAAY,OAAO,SAAS,GAAG;AAC/B,gBAAI,SAAS,aAAa;AACtB,oBAAM,SAAS,eAAe,MAAM,QAAQ,QAAQ,eAAe,OAAO,CAAC;AAC3E,kBAAI,WAAW,KAAM,MAAK,EAAE,MAAM,UAAU,OAAO,OAAO,CAAC;AAC3D;AAAA,YACJ;AACA,kBAAM,QAAQ,WAAW,MAAM,QAAQ,MAAM;AAC7C,gBAAI,UAAU,KAAM,MAAK,EAAE,MAAM,SAAS,SAAS,MAAM,MAAM,CAAC;AAAA,UACpE,WAAW,OAAO,cAAc,2BAA2B,OAAO,cAAc,wBAAwB;AACpG,iBAAK,EAAE,MAAM,SAAS,SAAS,KAAK,CAAC;AAAA,UACzC;AAAA,QACJ;AAAA,QACA,WAAW,aAAa,WAAW,CAAC,UAAU;AAC1C,cAAI,MAAM,UAAU,MAAM,WAAW,MAAM,WAAW,MAAM,YAAY,YAAa;AACrF,gBAAM,QAAQ,WAAW,MAAM,KAAK,QAAQ,MAAM;AAClD,gBAAM,MAAM,QAAQ,QAAQ,SAAS,SAAS,QAAQ,OAAO,GAAG,aAAa,KAAK,MAAM,QAAQ,QAAQ;AACxG,cAAI,UAAU,MAAM;AAAE,kBAAM,eAAe;AAAG,iBAAK,EAAE,MAAM,SAAS,SAAS,MAAM,MAAM,CAAC;AAAG;AAAA,UAAQ;AACrG,kBAAQ,MAAM,KAAK;AAAA,YACf,KAAK;AAAA,YAAW,KAAK;AAAa,oBAAM,eAAe;AAAG,mBAAK,EAAE,MAAM,QAAQ,SAAS,MAAM,WAAW,MAAM,QAAQ,YAAY,IAAI,GAAG,CAAC;AAAG;AAAA,YAC9I,KAAK;AAAA,YAAQ,KAAK;AAAO,oBAAM,eAAe;AAAG,mBAAK,EAAE,MAAM,QAAQ,SAAS,MAAM,MAAM,MAAM,QAAQ,SAAS,QAAQ,MAAM,CAAC;AAAG;AAAA,YACpI,KAAK;AAAA,YAAa,KAAK;AAAU,oBAAM,eAAe;AAAG,mBAAK,EAAE,MAAM,SAAS,SAAS,KAAK,CAAC;AAAG;AAAA,YACjG,KAAK;AAAA,YAAa,KAAK;AAAc,oBAAM,eAAe;AAAG,wBAAU,OAAO,MAAM,QAAQ,eAAe,IAAI,OAAO,QAAQ,QAAQ,KAAK,EAAE;AAAG;AAAA,YAChJ,SAAS;AACL,kBAAI,SAAS,eAAe,MAAM,IAAI,WAAW,EAAG;AACpD,oBAAM,SAAS,eAAe,MAAM,KAAK,QAAQ,QAAQ,eAAe,OAAO,CAAC;AAChF,kBAAI,WAAW,MAAM;AAAE,sBAAM,eAAe;AAAG,qBAAK,EAAE,MAAM,UAAU,OAAO,OAAO,CAAC;AAAA,cAAG;AAAA,YAC5F;AAAA,UACJ;AAAA,QACJ,CAAC;AAAA;AAAA,IAAG;AAAA,EACZ,CAAC;AAED,QAAM,QAAc,iBAAmC,SAASG,OAAM,EAAE,UAAU,GAAG,MAAM,GAAG,KAAK;AAC/F,UAAM,EAAE,KAAK,SAAS,IAAIH,YAAW;AACrC,WAAO,oBAAC,QAAM,GAAG,OAAQ,GAAG,IAAI,cAAc,GAAG,KAAK,CAAC,SAAS;AAC5D,eAAS,UAAU;AACnB,UAAI,OAAO,QAAQ,WAAY,KAAI,IAAI;AAAA,eAAY,IAAK,KAAI,UAAU;AAAA,IAC1E,GAAI,sBAAY,IAAI,SAAS,IAAI,CAAC,SAAS,UAAU,QAAQ,SAAS,YAAY,oBAAC,UAAiB,eAAY,QAAO,cAAY,GAAG,IAAI,UAAU,aAAU,WAAW,kBAAQ,SAApF,KAA0F,IAAU,oBAAC,WAA2B,MAAM,QAAQ,QAA5B,QAAQ,IAA0B,CAAE,GAAE;AAAA,EACzP,CAAC;AAED,WAAS,YAAY,OAAyB;AAC1C,UAAM,EAAE,OAAO,SAAS,MAAM,IAAIA,YAAW;AAC7C,UAAM,QAAc,aAAyB,IAAI;AACjD,iBAAa,OAAO,MAAM,MAAM,KAAK;AACrC,WAAO,oBAAC,WAAO,GAAG,OAAO,KAAK,OAAO,MAAK,UAAS,OAAO,MAAM,OAAO,SAAS,KAAK,IAAI,UAAU,QAAQ,YAAY,MAAM,UAAU,cAAY,GAAG,IAAI,UAAU,aAAU,gBAAe;AAAA,EACjM;AAEA,QAAM,cAAoB,iBAA0F,SAASI,aAAY,EAAE,SAAS,GAAG,MAAM,GAAG,KAAK;AACjK,UAAM,EAAE,SAAS,KAAK,IAAIJ,YAAW;AACrC,WAAO,oBAAC,QAAK,IAAG,UAAU,GAAG,OAAO,KAAU,MAAK,UAAS,cAAY,QAAQ,cAAc,SAAS,aAAa,OAAO,UAAU,QAAQ,YAAY,QAAQ,UAAU,cAAY,GAAG,IAAI,UAAU,aAAU,gBAAe,SAAS,aAAa,SAAS,MAAM,KAAK,EAAE,MAAM,QAAQ,CAAC,CAAC,GAAG;AAAA,EACpS,CAAC;AAED,QAAM,aAAmB,iBAAmC,SAASK,YAAW,OAAO,KAAK;AACxF,UAAM,EAAE,aAAa,IAAIL,YAAW;AACpC,WAAO,oBAAC,QAAM,GAAG,OAAO,KAAU,MAAK,UAAS,aAAU,UAAS,eAAY,QAAO,cAAY,GAAG,IAAI,UAAU,aAAU,eAAe,wBAAa;AAAA,EAC7J,CAAC;AAED,SAAO,EAAE,MAAM,OAAO,OAAO,SAAS,aAAa,aAAa,WAAW;AAC/E;","names":["value","useContext","Label","Segment","Field","ClearButton","LiveRegion"]}

package/dist/{chunk-QQANBK5G.js → chunk-GXQA645Q.js}

@@ -1,19 +1,23 @@
+"use client";
 import {
   Calendar,
   CalendarSurface,
   useCalendar
-} from "./chunk-RCWVBOO6.js";
+} from "./chunk-I46LC4EZ.js";
 import {
   Part,
   composeEvent,
   useChronaConfig,
   useFormReset
-} from "./chunk-GN2YCKFZ.js";
+} from "./chunk-SDDSKOYU.js";
 
 // src/range-calendar.tsx
 import * as React from "react";
-import { createRange, createStore, formatDate, getRangeCellProps, getRangeCellTriggerProps, transitionRange, translations, validateRange } from "chrona-core";
+import { createRange, createStore, formatDate, getRangeCellProps, getRangeCellTriggerProps, sameDate, transitionRange, translations, validateRange } from "chrona-core";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+function sameRange(first, second) {
+  return first === null || second === null ? first === second : sameDate(first.start, second.start) && sameDate(first.end, second.end);
+}
 function useRangeCalendar(input = {}) {
   const props = useChronaConfig(input);
   const [store] = React.useState(() => createStore(createRange(props.value !== void 0 ? props.value : props.defaultValue)));
@@ -63,7 +67,7 @@ function useRangeCalendar(input = {}) {
     reset() {
       const value = props.defaultValue ?? null;
       store.setState(createRange(value));
-      props.onChange?.(value);
+      if (!sameRange(state.value, value)) props.onChange?.(value);
     },
     calendar: { ...calendar, api }
   };
@@ -113,4 +117,4 @@ export {
   useRangeCalendar,
   RangeCalendar
 };
-//# sourceMappingURL=chunk-QQANBK5G.js.map
+//# sourceMappingURL=chunk-GXQA645Q.js.map

package/dist/chunk-GXQA645Q.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/range-calendar.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { createRange, createStore, formatDate, getRangeCellProps, getRangeCellTriggerProps, sameDate, transitionRange, translations, validateRange, type DateRange, type PlainDate, type RangeEvent } from \"chrona-core\";\nimport { Calendar, CalendarSurface, useCalendar, type CalendarProps } from \"./calendar\";\nimport { Part, composeEvent, type PartProps } from \"./part\";\nimport { useFormReset, type HiddenInputProps } from \"./form\";\nimport { useChronaConfig } from \"./provider\";\n\nexport interface RangeCalendarProps extends Omit<CalendarProps, \"value\" | \"defaultValue\" | \"onChange\"> {\n    value?: DateRange | null;\n    defaultValue?: DateRange | null;\n    onChange?: (value: DateRange | null) => void;\n    onRangeStartChange?: (value: PlainDate | null) => void;\n    onInvalid?: () => void;\n}\n\nfunction sameRange(first: DateRange | null, second: DateRange | null): boolean {\n    return first === null || second === null\n        ? first === second\n        : sameDate(first.start, second.start) && sameDate(first.end, second.end);\n}\n\nexport function useRangeCalendar(input: RangeCalendarProps = {}) {\n    const props = useChronaConfig(input);\n    const [store] = React.useState(() => createStore(createRange(props.value !== undefined ? props.value : props.defaultValue)));\n    const snapshot = React.useSyncExternalStore(store.subscribe, store.getSnapshot, store.getServerSnapshot);\n    if (props.value) validateRange(props.value);\n    const state = { ...snapshot, value: props.value === undefined ? snapshot.value : props.value };\n    const [announcement, setAnnouncement] = React.useState(\"\");\n    function send(event: RangeEvent) {\n        const result = transitionRange(state, event, props);\n        store.setState(result.state);\n        for (const effect of result.effects) {\n            if (effect.type === \"change\") {\n                props.onChange?.(effect.value);\n                setAnnouncement(effect.value ? [effect.value.start, effect.value.end].map((date) => formatDate(date, props.locale, { dateStyle: \"long\" })).join(props.translations?.rangeSeparator ?? translations.rangeSeparator) : \"\");\n            }\n            if (effect.type === \"rangeStart\") {\n                props.onRangeStartChange?.(effect.value);\n                if (effect.value) setAnnouncement(formatDate(effect.value, props.locale, { dateStyle: \"long\" }));\n            }\n            if (effect.type === \"invalid\") { props.onInvalid?.(); setAnnouncement(props.translations?.unavailable ?? translations.unavailable); }\n        }\n    }\n    const calendar = useCalendar({ ...props, value: null, defaultValue: null, placeholderValue: props.placeholderValue ?? state.value?.start, onChange: (date) => { if (date) send({ type: \"SELECT\", date }); }, onFocusedValueChange: (date) => { props.onFocusedValueChange?.(date); if (state.anchor) send({ type: \"PREVIEW\", date }); } });\n    const baseApi = calendar.api;\n    const api = {\n        ...baseApi,\n        getCellProps: (date: PlainDate, month?: PlainDate) => ({ ...baseApi.getCellProps(date, month), ...getRangeCellProps(state, date) }),\n        getCellTriggerProps: (date: PlainDate, month?: PlainDate) => ({ ...baseApi.getCellTriggerProps(date, month), ...getRangeCellTriggerProps(state, date) }),\n    };\n    return {\n        state, send, announcement, props, options: props, api, rootRef: calendar.rootRef, months: calendar.months,\n        reset() {\n            const value = props.defaultValue ?? null;\n            store.setState(createRange(value));\n            if (!sameRange(state.value, value)) props.onChange?.(value);\n        },\n        calendar: { ...calendar, api },\n    };\n}\n\nconst Context = React.createContext<ReturnType<typeof useRangeCalendar> | null>(null);\nfunction useContext() {\n    const value = React.useContext(Context);\n    if (!value) throw new Error(\"RangeCalendar parts must be inside RangeCalendar.Root.\");\n    return value;\n}\n\nfunction Root({ children, asChild, className, style, ...props }: RangeCalendarProps & Pick<PartProps, \"children\" | \"asChild\" | \"className\" | \"style\">) {\n    const context = useRangeCalendar(props);\n    return <Context.Provider value={context}><CalendarSurface calendar={context.calendar} asChild={asChild} className={className} style={style} data-scope=\"range-calendar\" onKeyDown={(event) => { if (event.key === \"Escape\" && context.state.anchor) { event.preventDefault(); context.send({ type: \"CANCEL\" }); } }}>{children}</CalendarSurface></Context.Provider>;\n}\n\nconst Cell = React.forwardRef<HTMLElement, React.ComponentPropsWithoutRef<typeof Calendar.Cell>>(function Cell({ date, onPointerEnter, ...props }, ref) {\n    const { send } = useContext();\n    return <Calendar.Cell {...props} ref={ref} date={date} onPointerEnter={composeEvent(onPointerEnter, () => send({ type: \"PREVIEW\", date }))} />;\n});\n\nconst GridBody = React.forwardRef<HTMLElement, React.ComponentPropsWithoutRef<typeof Calendar.GridBody>>(function GridBody({ children, ...props }, ref) {\n    return <Calendar.GridBody {...props} ref={ref}>{children ?? ((date) => <Cell date={date} />)}</Calendar.GridBody>;\n});\n\nconst LiveRegion = React.forwardRef<HTMLElement, PartProps>(function LiveRegion(props, ref) {\n    const { announcement } = useContext();\n    return <Part {...props} ref={ref} role=\"status\" aria-live=\"polite\" aria-atomic=\"true\" data-scope=\"range-calendar\" data-part=\"live-region\">{announcement}</Part>;\n});\n\nconst ClearButton = React.forwardRef<HTMLElement, React.ComponentPropsWithoutRef<typeof Calendar.ClearButton>>(function ClearButton({ onClick, ...props }, ref) {\n    const { send, props: options } = useContext();\n    return <Part as=\"button\" {...props} ref={ref} type=\"button\" disabled={options.disabled || options.readOnly} aria-label={options.translations?.clear ?? translations.clear} data-scope=\"range-calendar\" data-part=\"clear-button\" onClick={composeEvent(onClick, () => send({ type: \"CLEAR\" }))} />;\n});\n\nfunction HiddenInput({ name, form, id, disabled, ...inputProps }: HiddenInputProps & { name: string }) {\n    const { state, props, reset } = useContext();\n    const input = React.useRef<HTMLInputElement>(null);\n    useFormReset(input, form, reset);\n    return <><input {...inputProps} id={id ? `${id}-start` : undefined} ref={input} type=\"hidden\" name={`${name}.start`} form={form} value={state.value?.start.toString() ?? \"\"} disabled={props.disabled || disabled} data-scope=\"range-calendar\" data-part=\"hidden-input\" /><input {...inputProps} id={id ? `${id}-end` : undefined} type=\"hidden\" name={`${name}.end`} form={form} value={state.value?.end.toString() ?? \"\"} disabled={props.disabled || disabled} data-scope=\"range-calendar\" data-part=\"hidden-input\" /></>;\n}\n\nexport const RangeCalendar = { ...Calendar, Root, Cell, GridBody, LiveRegion, ClearButton, HiddenInput };"],"mappings":"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","names":["useContext","Cell","GridBody","LiveRegion","ClearButton"]}

package/dist/{chunk-RCWVBOO6.js → chunk-I46LC4EZ.js}

@@ -1,14 +1,22 @@
+"use client";
 import {
   Part,
   composeEvent,
   useChronaConfig,
   useFormReset
-} from "./chunk-GN2YCKFZ.js";
+} from "./chunk-SDDSKOYU.js";
 
 // src/calendar.tsx
 import * as React from "react";
 import { calendarKeys, connectCalendar, createCalendar, createStore, formatDate, getNumberFormatter, resolveWeekStart, sameDate, syncCalendar, temporal, transitionCalendar, translations, weeksInMonthView } from "chrona-core";
 import { jsx } from "react/jsx-runtime";
+var noStoreUpdates = () => () => {
+};
+var noServerToday = () => null;
+function useToday(options) {
+  const iso = React.useSyncExternalStore(noStoreUpdates, () => temporal().Now.plainDateISO(options.timeZone).toString(), noServerToday);
+  return options.today ?? (iso === null ? void 0 : temporal().PlainDate.from(iso));
+}
 function useCalendar(props = {}) {
   const options = useChronaConfig(props);
   const generatedId = React.useId();
@@ -19,6 +27,7 @@ function useCalendar(props = {}) {
   React.useEffect(() => {
     store.setState(state);
   });
+  const today = useToday(options);
   const rootRef = React.useRef(null);
   const pendingFocus = React.useRef(false);
   const [announcement, setAnnouncement] = React.useState("");
@@ -50,7 +59,7 @@ function useCalendar(props = {}) {
     send,
     rootRef,
     announcement,
-    api: connectCalendar(state, { ...options, id, today: temporal().Now.plainDateISO(options.timeZone) }),
+    api: connectCalendar(state, { ...options, id, today }),
     months: Array.from({ length: options.numberOfMonths ?? 1 }, (_, index) => state.visibleMonth.add({ months: index }))
   };
 }
@@ -165,4 +174,4 @@ export {
   CalendarSurface,
   Calendar
 };
-//# sourceMappingURL=chunk-RCWVBOO6.js.map
+//# sourceMappingURL=chunk-I46LC4EZ.js.map

package/dist/chunk-I46LC4EZ.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/calendar.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { calendarKeys, connectCalendar, createCalendar, createStore, formatDate, getNumberFormatter, resolveWeekStart, sameDate, syncCalendar, temporal, transitionCalendar, translations, weeksInMonthView, type CalendarEvent, type CalendarOptions, type PlainDate } from \"chrona-core\";\nimport { Part, composeEvent, type PartProps } from \"./part\";\nimport { useChronaConfig } from \"./provider\";\nimport { useFormReset, type HiddenInputProps } from \"./form\";\n\nexport interface CalendarProps extends CalendarOptions {\n    defaultValue?: PlainDate | null;\n    defaultFocusedValue?: PlainDate;\n    onChange?: (value: PlainDate | null) => void;\n    onSelect?: (value: PlainDate) => void;\n    onFocusedValueChange?: (value: PlainDate) => void;\n    id?: string;\n}\n\n/**\n * `today` depends on when and where the page is rendered, so a server render — including a page\n * prerendered at build time and served days later — cannot know the reader's. Resolving it through\n * `useSyncExternalStore` keeps the hydrating markup identical to the server's (no marker) and lets\n * React correct it right after, instead of leaving the server's day marked for good. Applications\n * that need the marker in the server HTML pass `today` themselves.\n */\nconst noStoreUpdates = () => () => {};\nconst noServerToday = () => null;\nfunction useToday(options: CalendarOptions): PlainDate | undefined {\n    const iso = React.useSyncExternalStore(noStoreUpdates, () => temporal().Now.plainDateISO(options.timeZone).toString(), noServerToday);\n    return options.today ?? (iso === null ? undefined : temporal().PlainDate.from(iso));\n}\n\nexport function useCalendar(props: CalendarProps = {}) {\n    const options = useChronaConfig(props);\n    const generatedId = React.useId();\n    const id = props.id ?? generatedId;\n    const [store] = React.useState(() => createStore(createCalendar({ ...options, value: props.value !== undefined ? props.value : props.defaultValue, focusedValue: props.focusedValue ?? props.defaultFocusedValue })));\n    const snapshot = React.useSyncExternalStore(store.subscribe, store.getSnapshot, store.getServerSnapshot);\n    // The store is the single source of truth; controlled props are reconciled into it by syncCalendar.\n    const state = syncCalendar(snapshot, { ...options, value: props.value, focusedValue: props.focusedValue });\n    React.useEffect(() => { store.setState(state); });\n    const today = useToday(options);\n    const rootRef = React.useRef<HTMLElement | null>(null);\n    const pendingFocus = React.useRef(false);\n    const [announcement, setAnnouncement] = React.useState(\"\");\n\n    React.useEffect(() => {\n        if (pendingFocus.current) {\n            pendingFocus.current = false;\n            rootRef.current?.querySelector<HTMLElement>('[data-part=\"cell-trigger\"][tabindex=\"0\"]')?.focus();\n        }\n    });\n\n    function send(event: CalendarEvent) {\n        const dir = options.dir ?? (rootRef.current?.closest(\"[dir]\")?.getAttribute(\"dir\") === \"rtl\" ? \"rtl\" : \"ltr\");\n        const result = transitionCalendar(state, event, { ...options, dir });\n        store.setState(result.state);\n        for (const effect of result.effects) {\n            if (effect.type === \"focus\") {\n                pendingFocus.current = true;\n                if (!sameDate(effect.value, state.focusedValue)) props.onFocusedValueChange?.(effect.value);\n            } else if (effect.type === \"change\") {\n                props.onChange?.(effect.value);\n                setAnnouncement(effect.value ? (options.translations?.selected ?? translations.selected)(formatDate(effect.value, options.locale, { dateStyle: \"full\" })) : \"\");\n            } else {\n                props.onSelect?.(effect.value);\n            }\n        }\n    }\n\n    return {\n        state, options, send, rootRef, announcement,\n        api: connectCalendar(state, { ...options, id, today }),\n        months: Array.from({ length: options.numberOfMonths ?? 1 }, (_, index) => state.visibleMonth.add({ months: index })),\n    };\n}\n\ntype CalendarContextValue = ReturnType<typeof useCalendar>;\nconst Context = React.createContext<CalendarContextValue | null>(null);\nconst MonthContext = React.createContext<PlainDate | null>(null);\n\nfunction useContext() {\n    const value = React.useContext(Context);\n    if (!value) throw new Error(\"Calendar parts must be inside Calendar.Root.\");\n    return value;\n}\n\nexport function CalendarRoot({ children, asChild, className, style, ...props }: CalendarProps & Pick<PartProps, \"children\" | \"asChild\" | \"className\" | \"style\">) {\n    const calendar = useCalendar(props);\n    return <CalendarSurface calendar={calendar} id={props.id} asChild={asChild} className={className} style={style}>{children}</CalendarSurface>;\n}\n\nexport function CalendarSurface({ calendar, ...props }: PartProps & { calendar: CalendarContextValue }) {\n    return <Context.Provider value={calendar}><Part {...calendar.api.getRootProps()} {...props} ref={calendar.rootRef} /></Context.Provider>;\n}\n\nconst Header = React.forwardRef<HTMLElement, PartProps>(function Header(props, ref) {\n    return <Part {...props} ref={ref} data-scope=\"calendar\" data-part=\"header\" />;\n});\n\nconst Heading = React.forwardRef<HTMLElement, PartProps>(function Heading({ children, ...props }, ref) {\n    const { months, options } = useContext();\n    const month = React.useContext(MonthContext);\n    return <Part as=\"h2\" {...props} ref={ref} data-scope=\"calendar\" data-part=\"heading\" aria-live=\"polite\" aria-atomic=\"true\">{children ?? (month ? [month] : months).map((date) => formatDate(date, options.locale, { month: \"long\", year: \"numeric\" })).join(options.translations?.rangeSeparator ?? translations.rangeSeparator)}</Part>;\n});\n\ntype ButtonProps = React.ComponentPropsWithoutRef<\"button\"> & { asChild?: boolean };\n\n/**\n * Paging buttons carry an `aria-label` but no text, so without a default they render as blank\n * chrome for sighted users. The arrow points the way the button pages in the resolved direction.\n */\nfunction Chevron({ towards }: { towards: \"start\" | \"end\" }) {\n    const points = towards === \"start\" ? \"15 4 7 12 15 20\" : \"9 4 17 12 9 20\";\n    return <svg aria-hidden=\"true\" focusable=\"false\" viewBox=\"0 0 24 24\" width=\"1em\" height=\"1em\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" data-scope=\"calendar\" data-part=\"chevron\"><polyline points={points} /></svg>;\n}\n\nconst PrevButton = React.forwardRef<HTMLElement, ButtonProps>(function PrevButton({ onClick, children, ...props }, ref) {\n    const { api, send, options } = useContext();\n    return <Part as=\"button\" {...props} {...api.getPrevButtonProps()} ref={ref} onClick={composeEvent(onClick, () => send({ type: \"PAGE\", direction: -1 }))}>{children ?? <Chevron towards={options.dir === \"rtl\" ? \"end\" : \"start\"} />}</Part>;\n});\n\nconst NextButton = React.forwardRef<HTMLElement, ButtonProps>(function NextButton({ onClick, children, ...props }, ref) {\n    const { api, send, options } = useContext();\n    return <Part as=\"button\" {...props} {...api.getNextButtonProps()} ref={ref} onClick={composeEvent(onClick, () => send({ type: \"PAGE\", direction: 1 }))}>{children ?? <Chevron towards={options.dir === \"rtl\" ? \"start\" : \"end\"} />}</Part>;\n});\n\nconst Grid = React.forwardRef<HTMLElement, PartProps & { monthIndex?: number }>(function Grid({ monthIndex = 0, children, ...props }, ref) {\n    const { api, months } = useContext();\n    const month = months[monthIndex];\n    if (!month) throw new Error(\"Calendar.Grid monthIndex is outside numberOfMonths.\");\n    return <MonthContext.Provider value={month}><Part {...props} {...api.getGridProps(month)} ref={ref}>{children}</Part></MonthContext.Provider>;\n});\n\nfunction useMonth() {\n    const context = useContext();\n    const month = React.useContext(MonthContext) ?? context.state.visibleMonth;\n    return { ...context, month, weeks: weeksInMonthView(month.toPlainYearMonth(), resolveWeekStart(context.options.locale, context.options.firstDayOfWeek), context.options.fixedWeeks) };\n}\n\nexport interface Weekday { date: PlainDate; label: string }\n\nconst GridHeader = React.forwardRef<HTMLElement, Omit<PartProps, \"children\"> & { children?: (day: Weekday) => React.ReactNode }>(function GridHeader({ children, ...props }, ref) {\n    const { weeks, options } = useMonth();\n    return <Part {...props} ref={ref} role=\"row\" data-scope=\"calendar\" data-part=\"grid-header\">{weeks[0]!.map((date) => {\n        const day = { date, label: formatDate(date, options.locale, { weekday: \"short\" }) };\n        return <React.Fragment key={date.toString()}>{children ? children(day) : <HeaderCell day={day} />}</React.Fragment>;\n    })}</Part>;\n});\n\nconst HeaderCell = React.forwardRef<HTMLElement, PartProps & { day: Weekday }>(function HeaderCell({ day, children, ...props }, ref) {\n    const { options } = useContext();\n    return <Part {...props} ref={ref} role=\"columnheader\" aria-label={formatDate(day.date, options.locale, { weekday: \"long\" })} data-scope=\"calendar\" data-part=\"header-cell\">{children ?? day.label}</Part>;\n});\n\nconst GridBody = React.forwardRef<HTMLElement, Omit<PartProps, \"children\"> & { children?: (date: PlainDate) => React.ReactNode }>(function GridBody({ children, ...props }, ref) {\n    const { weeks } = useMonth();\n    return <Part {...props} ref={ref} role=\"rowgroup\" data-scope=\"calendar\" data-part=\"grid-body\">{weeks.map((week) => <div key={week[0]!.toString()} role=\"row\" data-scope=\"calendar\" data-part=\"row\">{week.map((date) => <React.Fragment key={date.toString()}>{children ? children(date) : <Cell date={date} />}</React.Fragment>)}</div>)}</Part>;\n});\n\nconst CellContext = React.createContext<PlainDate | null>(null);\n\nconst CellTrigger = React.forwardRef<HTMLElement, ButtonProps>(function CellTrigger({ children, onClick, onKeyDown, onFocus, ...props }, ref) {\n    const { api, send, month, options } = useMonth();\n    const date = React.useContext(CellContext);\n    if (!date) throw new Error(\"Calendar.CellTrigger must be inside Calendar.Cell.\");\n    // aria-disabled instead of native disabled keeps out-of-range dates discoverable by screen readers.\n    return <Part as=\"button\" {...props} {...api.getCellTriggerProps(date, month)} ref={ref}\n        onFocus={composeEvent(onFocus, () => { if (!options.disabled) send({ type: \"FOCUS\", date }); })}\n        onClick={composeEvent(onClick, () => send({ type: \"SELECT\", date }))}\n        onKeyDown={composeEvent(onKeyDown, (event) => {\n            if (!calendarKeys.has(event.key) || event.altKey || event.ctrlKey || event.metaKey) return;\n            event.preventDefault();\n            send({ type: \"KEY_DOWN\", key: event.key, shiftKey: event.shiftKey });\n        })}>{children ?? getNumberFormatter(options.locale, { useGrouping: false }).format(date.day)}</Part>;\n});\n\n/** The grid semantics live on the cell; the button inside it stays a button. */\nconst Cell = React.forwardRef<HTMLElement, PartProps & { date: PlainDate }>(function Cell({ date, children, ...props }, ref) {\n    const { api, month } = useMonth();\n    return <CellContext.Provider value={date}><Part {...props} {...api.getCellProps(date, month)} ref={ref}>{children ?? <CellTrigger />}</Part></CellContext.Provider>;\n});\n\nconst LiveRegion = React.forwardRef<HTMLElement, PartProps>(function LiveRegion(props, ref) {\n    const { announcement } = useContext();\n    return <Part {...props} ref={ref} role=\"status\" aria-live=\"polite\" aria-atomic=\"true\" data-scope=\"calendar\" data-part=\"live-region\">{announcement}</Part>;\n});\n\nconst ClearButton = React.forwardRef<HTMLElement, ButtonProps>(function ClearButton({ onClick, ...props }, ref) {\n    const { options, send, state } = useContext();\n    return <Part as=\"button\" {...props} ref={ref} type=\"button\" data-scope=\"calendar\" data-part=\"clear-button\" aria-label={options.translations?.clear ?? translations.clear} disabled={options.disabled || options.readOnly || state.value === null} onClick={composeEvent(onClick, () => send({ type: \"CLEAR\" }))} />;\n});\n\nfunction HiddenInput(props: HiddenInputProps) {\n    const { state, options, send } = useContext();\n    const input = React.useRef<HTMLInputElement>(null);\n    useFormReset(input, props.form, () => send({ type: \"RESET\", value: options.defaultValue ?? null }));\n    return <input {...props} ref={input} type=\"hidden\" disabled={options.disabled || props.disabled} value={state.value?.toString() ?? \"\"} data-scope=\"calendar\" data-part=\"hidden-input\" />;\n}\n\nexport const Calendar = { Root: CalendarRoot, Header, Heading, PrevButton, NextButton, Grid, GridHeader, HeaderCell, GridBody, Cell, CellTrigger, LiveRegion, ClearButton, HiddenInput };"],"mappings":"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","names":["useContext","Header","Heading","PrevButton","NextButton","Grid","GridHeader","HeaderCell","GridBody","CellTrigger","Cell","LiveRegion","ClearButton"]}

package/dist/{chunk-2GZMCFFY.js → chunk-RTDRFDYG.js}

@@ -1,7 +1,8 @@
+"use client";
 import {
   createFieldComponents,
   useField
-} from "./chunk-JNQXKZO3.js";
+} from "./chunk-27APJXNX.js";
 
 // src/date-field.tsx
 var DateField = createFieldComponents("date");
@@ -13,4 +14,4 @@ export {
   DateField,
   useDateField
 };
-//# sourceMappingURL=chunk-2GZMCFFY.js.map
+//# sourceMappingURL=chunk-RTDRFDYG.js.map

package/dist/{chunk-2GZMCFFY.js.map → chunk-RTDRFDYG.js.map}

@@ -1 +1 @@
-{"version":3,"sources":["../src/date-field.tsx"],"sourcesContent":["import { createFieldComponents, useField, type FieldProps } from \"./field\";\n\nexport type DateFieldProps = FieldProps<\"date\">;\nexport const DateField = createFieldComponents(\"date\");\nexport function useDateField(props: DateFieldProps = {}) { return useField(\"date\", props); }"],"mappings":";;;;;;AAGO,IAAM,YAAY,sBAAsB,MAAM;AAC9C,SAAS,aAAa,QAAwB,CAAC,GAAG;AAAE,SAAO,SAAS,QAAQ,KAAK;AAAG;","names":[]}
+{"version":3,"sources":["../src/date-field.tsx"],"sourcesContent":["import { createFieldComponents, useField, type FieldProps } from \"./field\";\n\nexport type DateFieldProps = FieldProps<\"date\">;\nexport const DateField = createFieldComponents(\"date\");\nexport function useDateField(props: DateFieldProps = {}) { return useField(\"date\", props); }"],"mappings":";;;;;;;AAGO,IAAM,YAAY,sBAAsB,MAAM;AAC9C,SAAS,aAAa,QAAwB,CAAC,GAAG;AAAE,SAAO,SAAS,QAAQ,KAAK;AAAG;","names":[]}

package/dist/{chunk-GN2YCKFZ.js → chunk-SDDSKOYU.js}

@@ -1,3 +1,5 @@
+"use client";
+
 // src/part.tsx
 import * as React from "react";
 function setRef(ref, value) {
@@ -95,4 +97,4 @@ export {
   useChronaConfig,
   useFormReset
 };
-//# sourceMappingURL=chunk-GN2YCKFZ.js.map
+//# sourceMappingURL=chunk-SDDSKOYU.js.map