chrona-react 0.1.0

package/dist/chunk-XNVORQQ5.js

@@ -0,0 +1,112 @@
+import {
+  Calendar,
+  CalendarSurface,
+  useCalendar
+} from "./chunk-EFN32TNK.js";
+import {
+  Part,
+  composeEvent,
+  useChronaConfig,
+  useFormReset
+} from "./chunk-GN2YCKFZ.js";
+
+// src/range-calendar.tsx
+import * as React from "react";
+import { createRange, createStore, formatDate, getRangeCellProps, transitionRange, translations, validateRange } from "chrona-core";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+function useRangeCalendar(input = {}) {
+  const props = useChronaConfig(input);
+  const [store] = React.useState(() => createStore(createRange(props.value !== void 0 ? props.value : props.defaultValue)));
+  const snapshot = React.useSyncExternalStore(store.subscribe, store.getSnapshot, store.getServerSnapshot);
+  if (props.value) validateRange(props.value);
+  const state = { ...snapshot, value: props.value === void 0 ? snapshot.value : props.value };
+  const [announcement, setAnnouncement] = React.useState("");
+  function send(event) {
+    const result = transitionRange(state, event, props);
+    store.setState(result.state);
+    for (const effect of result.effects) {
+      if (effect.type === "change") {
+        props.onChange?.(effect.value);
+        setAnnouncement(effect.value ? [effect.value.start, effect.value.end].map((date) => formatDate(date, props.locale, { dateStyle: "long" })).join(props.translations?.rangeSeparator ?? translations.rangeSeparator) : "");
+      }
+      if (effect.type === "rangeStart") {
+        props.onRangeStartChange?.(effect.value);
+        if (effect.value) setAnnouncement(formatDate(effect.value, props.locale, { dateStyle: "long" }));
+      }
+      if (effect.type === "invalid") {
+        props.onInvalid?.();
+        setAnnouncement(props.translations?.unavailable ?? translations.unavailable);
+      }
+    }
+  }
+  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 });
+  } });
+  const baseApi = calendar.api;
+  const api = { ...baseApi, getCellProps: (date, month) => ({ ...baseApi.getCellProps(date, month), ...getRangeCellProps(state, date) }) };
+  return {
+    state,
+    send,
+    announcement,
+    props,
+    options: props,
+    api,
+    rootRef: calendar.rootRef,
+    months: calendar.months,
+    reset() {
+      const value = props.defaultValue ?? null;
+      store.setState(createRange(value));
+      props.onChange?.(value);
+    },
+    calendar: { ...calendar, api }
+  };
+}
+var Context = React.createContext(null);
+function useContext2() {
+  const value = React.useContext(Context);
+  if (!value) throw new Error("RangeCalendar parts must be inside RangeCalendar.Root.");
+  return value;
+}
+function Root({ children, asChild, className, style, ...props }) {
+  const context = useRangeCalendar(props);
+  return /* @__PURE__ */ jsx(Context.Provider, { value: context, children: /* @__PURE__ */ jsx(CalendarSurface, { calendar: context.calendar, asChild, className, style, "data-scope": "range-calendar", onKeyDown: (event) => {
+    if (event.key === "Escape" && context.state.anchor) {
+      event.preventDefault();
+      context.send({ type: "CANCEL" });
+    }
+  }, children }) });
+}
+var Cell = React.forwardRef(function Cell2({ date, onPointerEnter, ...props }, ref) {
+  const { send } = useContext2();
+  return /* @__PURE__ */ jsx(Calendar.Cell, { ...props, ref, date, onPointerEnter: composeEvent(onPointerEnter, () => send({ type: "PREVIEW", date })) });
+});
+var GridBody = React.forwardRef(function GridBody2({ children, ...props }, ref) {
+  return /* @__PURE__ */ jsx(Calendar.GridBody, { ...props, ref, children: children ?? ((date) => /* @__PURE__ */ jsx(Cell, { date })) });
+});
+var LiveRegion = React.forwardRef(function LiveRegion2(props, ref) {
+  const { announcement } = useContext2();
+  return /* @__PURE__ */ jsx(Part, { ...props, ref, role: "status", "aria-live": "polite", "aria-atomic": "true", "data-scope": "range-calendar", "data-part": "live-region", children: announcement });
+});
+var ClearButton = React.forwardRef(function ClearButton2({ onClick, ...props }, ref) {
+  const { send, props: options } = useContext2();
+  return /* @__PURE__ */ jsx(Part, { as: "button", ...props, 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" })) });
+});
+function HiddenInput({ name, form, id, disabled, ...inputProps }) {
+  const { state, props, reset } = useContext2();
+  const input = React.useRef(null);
+  useFormReset(input, form, reset);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("input", { ...inputProps, id: id ? `${id}-start` : void 0, ref: input, type: "hidden", name: `${name}.start`, form, value: state.value?.start.toString() ?? "", disabled: props.disabled || disabled, "data-scope": "range-calendar", "data-part": "hidden-input" }),
+    /* @__PURE__ */ jsx("input", { ...inputProps, id: id ? `${id}-end` : void 0, type: "hidden", name: `${name}.end`, form, value: state.value?.end.toString() ?? "", disabled: props.disabled || disabled, "data-scope": "range-calendar", "data-part": "hidden-input" })
+  ] });
+}
+var RangeCalendar = { ...Calendar, Root, Cell, GridBody, LiveRegion, ClearButton, HiddenInput };
+
+export {
+  useRangeCalendar,
+  RangeCalendar
+};
+//# sourceMappingURL=chunk-XNVORQQ5.js.map

package/dist/chunk-XNVORQQ5.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/range-calendar.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { createRange, createStore, formatDate, getRangeCellProps, 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\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 = { ...baseApi, getCellProps: (date: PlainDate, month?: PlainDate) => ({ ...baseApi.getCellProps(date, month), ...getRangeCellProps(state, date) }) };\n    return {\n        state, send, announcement, props, options: props, api, rootRef: calendar.rootRef, months: calendar.months,\n        reset() { const value = props.defaultValue ?? null; store.setState(createRange(value)); props.onChange?.(value); },\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-ZN4FZDUQ.js

@@ -0,0 +1,16 @@
+import {
+  createFieldComponents,
+  useField
+} from "./chunk-VSD2IX3U.js";
+
+// src/date-field.tsx
+var DateField = createFieldComponents("date");
+function useDateField(props = {}) {
+  return useField("date", props);
+}
+
+export {
+  DateField,
+  useDateField
+};
+//# sourceMappingURL=chunk-ZN4FZDUQ.js.map

package/dist/chunk-ZN4FZDUQ.js.map

@@ -0,0 +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":[]}

package/dist/date-field.d.ts

@@ -0,0 +1,74 @@
+import { P as PartProps, H as HiddenInputProps, C as ChronaConfig } from './form-BCAGbNh-.js';
+import * as chrona_core from 'chrona-core';
+import * as React from 'react';
+import { F as FieldProps } from './field-CQjoX8QG.js';
+
+type DateFieldProps = FieldProps<"date">;
+declare const DateField: {
+    Root: ({ children, asChild, className, style, ...props }: FieldProps<"date"> & Pick<PartProps, "children" | "asChild" | "className" | "style">) => React.JSX.Element;
+    Label: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLElement> & {
+        asChild?: boolean;
+    } & React.RefAttributes<HTMLElement>>;
+    Field: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLElement> & {
+        asChild?: boolean;
+    } & React.RefAttributes<HTMLElement>>;
+    Segment: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref">, "value" | "defaultValue" | "onChange" | "children" | "type"> & {
+        type: chrona_core.SegmentType;
+    } & React.RefAttributes<HTMLInputElement>>;
+    HiddenInput: (props: HiddenInputProps) => React.JSX.Element;
+    ClearButton: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
+        asChild?: boolean;
+    } & React.RefAttributes<HTMLElement>>;
+    LiveRegion: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLElement> & {
+        asChild?: boolean;
+    } & React.RefAttributes<HTMLElement>>;
+};
+declare function useDateField(props?: DateFieldProps): {
+    id: string;
+    state: chrona_core.FieldState<"date">;
+    options: FieldProps<"date"> & ChronaConfig;
+    send: (event: chrona_core.FieldEvent) => void;
+    reset: () => void;
+    moveFocus: (segment: chrona_core.SegmentType, offset: number) => void;
+    groupRef: React.RefObject<HTMLElement | null>;
+    announcement: string;
+    registerLabel: React.Dispatch<React.SetStateAction<boolean>>;
+    api: {
+        segments: {
+            type: chrona_core.SegmentType | "literal";
+            value: string;
+        }[];
+        getGroupProps: () => {
+            role: "group";
+            "aria-labelledby": string | undefined;
+            "aria-describedby": string | undefined;
+            "aria-invalid": true | undefined;
+            "data-scope": string;
+            "data-part": string;
+            "data-invalid": string | undefined;
+            "data-disabled": string | undefined;
+            "data-readonly": string | undefined;
+            dir: "ltr" | "rtl" | undefined;
+        };
+        getSegmentProps: (segment: chrona_core.SegmentType) => {
+            role: "spinbutton";
+            "aria-label": string;
+            "aria-valuemin": number;
+            "aria-valuemax": number;
+            "aria-valuenow": number | undefined;
+            "aria-valuetext": string;
+            "aria-required": true | undefined;
+            "aria-invalid": true | undefined;
+            "aria-describedby": string | undefined;
+            "aria-readonly": true | undefined;
+            "data-scope": string;
+            "data-part": string;
+            "data-segment": chrona_core.SegmentName;
+            "data-placeholder": string | undefined;
+            "data-invalid": string | undefined;
+            display: string;
+        };
+    };
+};
+
+export { DateField, type DateFieldProps, useDateField };

package/dist/date-field.js

@@ -0,0 +1,11 @@
+import {
+  DateField,
+  useDateField
+} from "./chunk-ZN4FZDUQ.js";
+import "./chunk-VSD2IX3U.js";
+import "./chunk-GN2YCKFZ.js";
+export {
+  DateField,
+  useDateField
+};
+//# sourceMappingURL=date-field.js.map

package/dist/date-field.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/dist/date-picker.d.ts

@@ -0,0 +1,69 @@
+import { P as PartProps, H as HiddenInputProps } from './form-BCAGbNh-.js';
+import * as chrona_core from 'chrona-core';
+import { PlainDate, PickerEvent } from 'chrona-core';
+import * as React from 'react';
+import { CalendarProps } from './calendar.js';
+import { DateFieldProps } from './date-field.js';
+import 'temporal-spec';
+import './field-CQjoX8QG.js';
+
+interface DatePickerProps extends DateFieldProps {
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    modal?: boolean;
+    timeZone?: string;
+    firstDayOfWeek?: number;
+    fixedWeeks?: boolean;
+    numberOfMonths?: number;
+    pagedNavigation?: boolean;
+}
+interface PickerContext {
+    props: DatePickerProps;
+    options: DatePickerProps;
+    state: {
+        value: PlainDate | null;
+        open: boolean;
+    };
+    id: string;
+    value: PlainDate | null;
+    change: (value: PlainDate | null) => void;
+    open: boolean;
+    send: (event: PickerEvent) => void;
+    trigger: {
+        current: HTMLElement | null;
+    };
+    labelled: boolean;
+    registerLabel: (present: boolean) => void;
+}
+declare function Root({ children, asChild, className, style, ...input }: DatePickerProps & Pick<PartProps, "children" | "asChild" | "className" | "style">): React.JSX.Element;
+declare function useDatePicker(input?: DatePickerProps): PickerContext;
+declare function PickerCalendar({ children, ...props }: Omit<CalendarProps, "value" | "defaultValue" | "onChange"> & Pick<PartProps, "children" | "className" | "style">): React.JSX.Element;
+declare const DatePicker: {
+    Root: typeof Root;
+    Label: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLElement> & {
+        asChild?: boolean;
+    } & React.RefAttributes<HTMLElement>>;
+    Field: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLElement> & {
+        asChild?: boolean;
+    } & React.RefAttributes<HTMLElement>>;
+    Segment: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref">, "value" | "defaultValue" | "onChange" | "children" | "type"> & {
+        type: chrona_core.SegmentType;
+    } & React.RefAttributes<HTMLInputElement>>;
+    HiddenInput: (props: HiddenInputProps) => React.JSX.Element;
+    ClearButton: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
+        asChild?: boolean;
+    } & React.RefAttributes<HTMLElement>>;
+    LiveRegion: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLElement> & {
+        asChild?: boolean;
+    } & React.RefAttributes<HTMLElement>>;
+    Trigger: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
+        asChild?: boolean;
+    } & React.RefAttributes<HTMLElement>>;
+    Popover: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.DialogHTMLAttributes<HTMLDialogElement>, HTMLDialogElement>, "ref">, "open"> & {
+        anchored?: boolean;
+    } & React.RefAttributes<HTMLDialogElement>>;
+    Calendar: typeof PickerCalendar;
+};
+
+export { DatePicker, type DatePickerProps, useDatePicker };

package/dist/date-picker.js

@@ -0,0 +1,13 @@
+import {
+  DatePicker,
+  useDatePicker
+} from "./chunk-5426MN2K.js";
+import "./chunk-ZN4FZDUQ.js";
+import "./chunk-EFN32TNK.js";
+import "./chunk-VSD2IX3U.js";
+import "./chunk-GN2YCKFZ.js";
+export {
+  DatePicker,
+  useDatePicker
+};
+//# sourceMappingURL=date-picker.js.map

package/dist/date-picker.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/dist/field-CQjoX8QG.d.ts

@@ -0,0 +1,11 @@
+import { FieldKind, FieldOptions, FieldValue } from 'chrona-core';
+
+interface FieldProps<Kind extends FieldKind> extends FieldOptions<Kind> {
+    defaultValue?: FieldValue<Kind> | null;
+    onChange?: (value: FieldValue<Kind> | null) => void;
+    onInvalid?: (reason: "range" | "unavailable") => void;
+    id?: string;
+    describedBy?: string;
+}
+
+export type { FieldProps as F };

package/dist/form-BCAGbNh-.d.ts

@@ -0,0 +1,20 @@
+import * as React from 'react';
+import { Translations } from 'chrona-core';
+
+interface ChronaConfig {
+    locale?: string;
+    timeZone?: string;
+    dir?: "ltr" | "rtl";
+    translations?: Partial<Translations>;
+}
+declare function ChronaProvider({ children, ...config }: ChronaConfig & {
+    children: React.ReactNode;
+}): React.JSX.Element;
+
+type PartProps = React.HTMLAttributes<HTMLElement> & {
+    asChild?: boolean;
+};
+
+type HiddenInputProps = Omit<React.ComponentPropsWithoutRef<"input">, "type" | "value" | "defaultValue" | "onChange">;
+
+export { type ChronaConfig as C, type HiddenInputProps as H, type PartProps as P, ChronaProvider as a };

package/dist/index.d.ts

@@ -0,0 +1,10 @@
+export { Calendar, CalendarProps, CalendarRoot, Weekday, useCalendar } from './calendar.js';
+export { C as ChronaConfig, a as ChronaProvider } from './form-BCAGbNh-.js';
+export { DateField, DateFieldProps, useDateField } from './date-field.js';
+export { TimeField, TimeFieldProps, useTimeField } from './time-field.js';
+export { DatePicker, DatePickerProps, useDatePicker } from './date-picker.js';
+export { RangeCalendar, RangeCalendarProps, useRangeCalendar } from './range-calendar.js';
+import 'temporal-spec';
+import 'chrona-core';
+import 'react';
+import './field-CQjoX8QG.js';

package/dist/index.js

@@ -0,0 +1,40 @@
+import {
+  DatePicker,
+  useDatePicker
+} from "./chunk-5426MN2K.js";
+import {
+  DateField,
+  useDateField
+} from "./chunk-ZN4FZDUQ.js";
+import {
+  RangeCalendar,
+  useRangeCalendar
+} from "./chunk-XNVORQQ5.js";
+import {
+  Calendar,
+  CalendarRoot,
+  useCalendar
+} from "./chunk-EFN32TNK.js";
+import {
+  TimeField,
+  useTimeField
+} from "./chunk-6QRNDYNF.js";
+import "./chunk-VSD2IX3U.js";
+import {
+  ChronaProvider
+} from "./chunk-GN2YCKFZ.js";
+export {
+  Calendar,
+  CalendarRoot,
+  ChronaProvider,
+  DateField,
+  DatePicker,
+  RangeCalendar,
+  TimeField,
+  useCalendar,
+  useDateField,
+  useDatePicker,
+  useRangeCalendar,
+  useTimeField
+};
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/dist/range-calendar.d.ts

@@ -0,0 +1,194 @@
+import { CalendarProps, Weekday } from './calendar.js';
+import * as chrona_core from 'chrona-core';
+import { DateRange, PlainDate, RangeEvent } from 'chrona-core';
+import * as temporal_spec from 'temporal-spec';
+import { P as PartProps, H as HiddenInputProps, C as ChronaConfig } from './form-BCAGbNh-.js';
+import * as React from 'react';
+
+interface RangeCalendarProps extends Omit<CalendarProps, "value" | "defaultValue" | "onChange"> {
+    value?: DateRange | null;
+    defaultValue?: DateRange | null;
+    onChange?: (value: DateRange | null) => void;
+    onRangeStartChange?: (value: PlainDate | null) => void;
+    onInvalid?: () => void;
+}
+declare function useRangeCalendar(input?: RangeCalendarProps): {
+    state: {
+        value: DateRange | null;
+        anchor: PlainDate | null;
+        preview: PlainDate | null;
+        invalid: boolean;
+    };
+    send: (event: RangeEvent) => void;
+    announcement: string;
+    props: RangeCalendarProps & ChronaConfig;
+    options: RangeCalendarProps & ChronaConfig;
+    api: {
+        getCellProps: (date: PlainDate, month?: PlainDate) => {
+            "data-scope": string;
+            "aria-selected": boolean;
+            "data-selected": string | undefined;
+            "data-in-range": string | undefined;
+            "data-range-start": string | undefined;
+            "data-range-end": string | undefined;
+            "data-preview": string | undefined;
+            "data-invalid": string | undefined;
+            id: string;
+            role: "gridcell";
+            tabIndex: number;
+            "aria-label": string;
+            "aria-disabled": true | undefined;
+            "aria-current": "date" | undefined;
+            "data-date": string;
+            "data-focused": string | undefined;
+            "data-disabled": string | undefined;
+            "data-unavailable": string | undefined;
+            "data-outside-month": string | undefined;
+            "data-today": string | undefined;
+            "data-part": string;
+        };
+        getRootProps: () => {
+            dir: "ltr" | "rtl" | undefined;
+            "data-disabled": string | undefined;
+            "data-readonly": string | undefined;
+            "data-scope": string;
+            "data-part": string;
+        };
+        getGridProps: (month?: temporal_spec.Temporal.PlainDate) => {
+            role: "grid";
+            "aria-label": string;
+            "aria-readonly": true | undefined;
+            "aria-disabled": true | undefined;
+            "data-scope": string;
+            "data-part": string;
+        };
+        getPrevButtonProps: () => {
+            type: "button";
+            "aria-label": string;
+            disabled: boolean;
+            "data-scope": string;
+            "data-part": string;
+        };
+        getNextButtonProps: () => {
+            type: "button";
+            "aria-label": string;
+            disabled: boolean;
+            "data-scope": string;
+            "data-part": string;
+        };
+    };
+    rootRef: React.RefObject<HTMLElement | null>;
+    months: temporal_spec.Temporal.PlainDate[];
+    reset(): void;
+    calendar: {
+        api: {
+            getCellProps: (date: PlainDate, month?: PlainDate) => {
+                "data-scope": string;
+                "aria-selected": boolean;
+                "data-selected": string | undefined;
+                "data-in-range": string | undefined;
+                "data-range-start": string | undefined;
+                "data-range-end": string | undefined;
+                "data-preview": string | undefined;
+                "data-invalid": string | undefined;
+                id: string;
+                role: "gridcell";
+                tabIndex: number;
+                "aria-label": string;
+                "aria-disabled": true | undefined;
+                "aria-current": "date" | undefined;
+                "data-date": string;
+                "data-focused": string | undefined;
+                "data-disabled": string | undefined;
+                "data-unavailable": string | undefined;
+                "data-outside-month": string | undefined;
+                "data-today": string | undefined;
+                "data-part": string;
+            };
+            getRootProps: () => {
+                dir: "ltr" | "rtl" | undefined;
+                "data-disabled": string | undefined;
+                "data-readonly": string | undefined;
+                "data-scope": string;
+                "data-part": string;
+            };
+            getGridProps: (month?: temporal_spec.Temporal.PlainDate) => {
+                role: "grid";
+                "aria-label": string;
+                "aria-readonly": true | undefined;
+                "aria-disabled": true | undefined;
+                "data-scope": string;
+                "data-part": string;
+            };
+            getPrevButtonProps: () => {
+                type: "button";
+                "aria-label": string;
+                disabled: boolean;
+                "data-scope": string;
+                "data-part": string;
+            };
+            getNextButtonProps: () => {
+                type: "button";
+                "aria-label": string;
+                disabled: boolean;
+                "data-scope": string;
+                "data-part": string;
+            };
+        };
+        state: chrona_core.CalendarState;
+        options: CalendarProps & ChronaConfig;
+        send: (event: chrona_core.CalendarEvent) => void;
+        rootRef: React.RefObject<HTMLElement | null>;
+        announcement: string;
+        months: temporal_spec.Temporal.PlainDate[];
+    };
+};
+declare function Root({ children, asChild, className, style, ...props }: RangeCalendarProps & Pick<PartProps, "children" | "asChild" | "className" | "style">): React.JSX.Element;
+declare function HiddenInput({ name, form, id, disabled, ...inputProps }: HiddenInputProps & {
+    name: string;
+}): React.JSX.Element;
+declare const RangeCalendar: {
+    Root: typeof Root;
+    Cell: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
+        asChild?: boolean;
+    } & {
+        date: PlainDate;
+    } & React.RefAttributes<HTMLElement>, "ref"> & React.RefAttributes<HTMLElement>>;
+    GridBody: React.ForwardRefExoticComponent<Omit<Omit<PartProps, "children"> & {
+        children?: (date: PlainDate) => React.ReactNode;
+    } & React.RefAttributes<HTMLElement>, "ref"> & React.RefAttributes<HTMLElement>>;
+    LiveRegion: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLElement> & {
+        asChild?: boolean;
+    } & React.RefAttributes<HTMLElement>>;
+    ClearButton: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
+        asChild?: boolean;
+    } & React.RefAttributes<HTMLElement>, "ref"> & React.RefAttributes<HTMLElement>>;
+    HiddenInput: typeof HiddenInput;
+    Header: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLElement> & {
+        asChild?: boolean;
+    } & React.RefAttributes<HTMLElement>>;
+    Heading: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLElement> & {
+        asChild?: boolean;
+    } & React.RefAttributes<HTMLElement>>;
+    PrevButton: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
+        asChild?: boolean;
+    } & React.RefAttributes<HTMLElement>>;
+    NextButton: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
+        asChild?: boolean;
+    } & React.RefAttributes<HTMLElement>>;
+    Grid: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLElement> & {
+        asChild?: boolean;
+    } & {
+        monthIndex?: number;
+    } & React.RefAttributes<HTMLElement>>;
+    GridHeader: React.ForwardRefExoticComponent<Omit<PartProps, "children"> & {
+        children?: (day: Weekday) => React.ReactNode;
+    } & React.RefAttributes<HTMLElement>>;
+    HeaderCell: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLElement> & {
+        asChild?: boolean;
+    } & {
+        day: Weekday;
+    } & React.RefAttributes<HTMLElement>>;
+};
+
+export { RangeCalendar, type RangeCalendarProps, useRangeCalendar };

package/dist/range-calendar.js

@@ -0,0 +1,11 @@
+import {
+  RangeCalendar,
+  useRangeCalendar
+} from "./chunk-XNVORQQ5.js";
+import "./chunk-EFN32TNK.js";
+import "./chunk-GN2YCKFZ.js";
+export {
+  RangeCalendar,
+  useRangeCalendar
+};
+//# sourceMappingURL=range-calendar.js.map

package/dist/range-calendar.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}