@hackcove/ui-react 0.10.5 → 0.10.6

package/dist/DateCalendar.d.ts

@@ -1,10 +1,12 @@
 import { type ReactElement } from "react";
+import type { DateRangePreset } from "./DateRangePicker.js";
 export declare const calendarIcon: import("react").JSX.Element;
-/**
- * The picker's popover: header, a Monday-first month grid and a Clear footer. `container` is the
- * modal `<dialog>` the picker sits in, if any: a modal makes everything outside it inert and paints
- * above the body, so the popover renders inside it (which also keeps the theme's scope class).
- */
+/** The date picker's popover: header, a Monday-first month grid and a Clear footer. */
 export declare function CalendarPopover({ container }: {
     container: Element | undefined;
 }): ReactElement;
+/** The range picker's popover: the presets, if any, the header, one Monday-first month and Clear. */
+export declare function RangeCalendarPopover({ container, presets, }: {
+    container: Element | undefined;
+    presets: readonly DateRangePreset[] | undefined;
+}): ReactElement;

package/dist/DateCalendar.js

@@ -1,16 +1,22 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { getLocalTimeZone, today } from "@internationalized/date";
 import { useContext } from "react";
-import { Button, Calendar, CalendarCell, CalendarGrid, CalendarGridBody, CalendarGridHeader, CalendarHeaderCell, CalendarStateContext, DatePickerStateContext, Dialog, Popover, } from "react-aria-components";
+import { Button, Calendar, CalendarCell, CalendarGrid, CalendarGridBody, CalendarGridHeader, CalendarHeaderCell, CalendarStateContext, DatePickerStateContext, DateRangePickerStateContext, Dialog, Popover, RangeCalendar, RangeCalendarStateContext, } from "react-aria-components";
 import { cx, focusRing } from "./cx.js";
+import { Button as PresetButton } from "./Button.js";
 import { MONTH_OPTIONS, iconButtonClass } from "./DateField.js";
 import { Icon } from "./Icon.js";
 export const calendarIcon = (_jsx(Icon, { children: _jsxs("svg", { viewBox: "0 0 20 20", fill: "none", stroke: "currentColor", strokeWidth: "1.6", strokeLinecap: "round", children: [_jsx("rect", { x: "3", y: "4.5", width: "14", height: "12.5", rx: "2" }), _jsx("path", { d: "M3 8.5h14M7 2.5v4M13 2.5v4" })] }) }));
 const chevron = (d) => (_jsx(Icon, { children: _jsx("svg", { viewBox: "0 0 20 20", fill: "none", stroke: "currentColor", strokeWidth: "1.8", strokeLinecap: "round", strokeLinejoin: "round", children: _jsx("path", { d: d }) }) }));
 const selectClass = `rounded-md border border-slate-300 bg-white py-1 pr-1 pl-2 text-sm text-slate-900 transition hover:border-violet-400 ${focusRing}`;
-/** ‹, a month dropdown, a year dropdown and ›: a birth date decades back is two picks away. */
+/**
+ * ‹, a month dropdown, a year dropdown and ›: a birth date decades back is two picks away. It reads
+ * a one-date calendar's state, or a range calendar's when there is none.
+ */
 function CalendarHeader() {
-    const state = useContext(CalendarStateContext);
+    const single = useContext(CalendarStateContext);
+    const range = useContext(RangeCalendarStateContext);
+    const state = single ?? range;
     if (!state)
         return null;
     const focused = state.focusedDate;
@@ -20,8 +26,11 @@ function CalendarHeader() {
     const years = Array.from({ length: last - first + 1 }, (_, i) => first + i);
     return (_jsxs("div", { className: "flex items-center gap-1.5", children: [_jsx(Button, { slot: "previous", className: iconButtonClass, children: chevron("M12.5 15l-5-5 5-5") }), _jsx("select", { "aria-label": "Month", className: cx(selectClass, "flex-1"), value: focused.month, disabled: state.isDisabled, onChange: (event) => state.setFocusedDate(focused.set({ month: Number(event.target.value) })), children: MONTH_OPTIONS.map(({ month, name }) => (_jsx("option", { value: month, children: name }, month))) }), _jsx("select", { "aria-label": "Year", className: selectClass, value: focused.year, disabled: state.isDisabled, onChange: (event) => state.setFocusedDate(focused.set({ year: Number(event.target.value) })), children: years.map((year) => (_jsx("option", { value: year, children: year }, year))) }), _jsx(Button, { slot: "next", className: iconButtonClass, children: chevron("M7.5 5l5 5-5 5") })] }));
 }
+/** Clears the picker's value, a date or a range, and closes the popover. */
 function ClearButton() {
-    const picker = useContext(DatePickerStateContext);
+    const single = useContext(DatePickerStateContext);
+    const range = useContext(DateRangePickerStateContext);
+    const picker = single ?? range;
     return (_jsx("button", { type: "button", className: `rounded-md px-2 py-1 text-sm font-medium text-violet-600 transition hover:bg-violet-50 ${focusRing}`, onClick: () => {
             picker?.setValue(null);
             picker?.close();
@@ -35,11 +44,50 @@ const cellClass = ({ isSelected, isOutsideMonth, isDisabled, isUnavailable, isIn
         tone = "text-slate-300";
     return cx("flex h-9 w-9 items-center justify-center rounded-lg text-sm tabular-nums", tone, focusRing);
 };
+/** The colour of a day in a range calendar: the ends filled, the days between a light band. */
+function rangeTone(cell) {
+    if (cell.isOutsideMonth || cell.isDisabled || cell.isUnavailable)
+        return "text-slate-300";
+    if (!cell.isSelected)
+        return "cursor-pointer text-slate-700 hover:bg-slate-100";
+    if (cell.isInvalid)
+        return "bg-red-50 text-red-700";
+    if (cell.isSelectionStart || cell.isSelectionEnd)
+        return "bg-violet-600 text-violet-50";
+    return "bg-violet-50 text-violet-700";
+}
 /**
- * The picker's popover: header, a Monday-first month grid and a Clear footer. `container` is the
- * modal `<dialog>` the picker sits in, if any: a modal makes everything outside it inert and paints
- * above the body, so the popover renders inside it (which also keeps the theme's scope class).
+ * A day in a range calendar. The selected days join into one band: square between the ends, rounded
+ * on the outer side of each end. Any other day is rounded like a `cellClass` day.
  */
+const rangeCellClass = (cell) => cx("flex h-9 w-9 items-center justify-center text-sm tabular-nums", rangeTone(cell), cell.isSelected && !cell.isOutsideMonth
+    ? cx(cell.isSelectionStart && "rounded-l-lg", cell.isSelectionEnd && "rounded-r-lg")
+    : "rounded-lg", focusRing);
+/** The weekday row and the days of the month on show, in a `Calendar` or a `RangeCalendar`. */
+function MonthGrid({ cellClass: dayClass, }) {
+    return (_jsxs(CalendarGrid, { weekdayStyle: "short", children: [_jsx(CalendarGridHeader, { children: (day) => (_jsx(CalendarHeaderCell, { className: "pb-1 text-xs font-medium text-slate-500", children: day })) }), _jsx(CalendarGridBody, { children: (date) => _jsx(CalendarCell, { date: date, className: dayClass }) })] }));
+}
+/**
+ * The popover's frame and dialog. `container` is the modal `<dialog>` the picker sits in, if any: a
+ * modal makes everything outside it inert and paints above the body, so the popover renders inside
+ * it (which also keeps the theme's scope class).
+ */
+function PickerPopover({ container, children, }) {
+    return (_jsx(Popover, { ...(container ? { UNSTABLE_portalContainer: container } : {}), placement: "bottom start", className: "rounded-xl border border-slate-200 bg-white p-3 text-slate-900 shadow-lg", children: _jsxs(Dialog, { className: "flex flex-col gap-3 outline-none", children: [children, _jsx("div", { className: "flex justify-end border-t border-slate-200 pt-2", children: _jsx(ClearButton, {}) })] }) }));
+}
+/** The date picker's popover: header, a Monday-first month grid and a Clear footer. */
 export function CalendarPopover({ container }) {
-    return (_jsx(Popover, { ...(container ? { UNSTABLE_portalContainer: container } : {}), placement: "bottom start", className: "rounded-xl border border-slate-200 bg-white p-3 text-slate-900 shadow-lg", children: _jsxs(Dialog, { className: "flex flex-col gap-3 outline-none", children: [_jsxs(Calendar, { firstDayOfWeek: "mon", className: "flex flex-col gap-3", children: [_jsx(CalendarHeader, {}), _jsxs(CalendarGrid, { weekdayStyle: "short", children: [_jsx(CalendarGridHeader, { children: (day) => (_jsx(CalendarHeaderCell, { className: "pb-1 text-xs font-medium text-slate-500", children: day })) }), _jsx(CalendarGridBody, { children: (date) => _jsx(CalendarCell, { date: date, className: cellClass }) })] })] }), _jsx("div", { className: "flex justify-end border-t border-slate-200 pt-2", children: _jsx(ClearButton, {}) })] }) }));
+    return (_jsx(PickerPopover, { container: container, children: _jsxs(Calendar, { firstDayOfWeek: "mon", className: "flex flex-col gap-3", children: [_jsx(CalendarHeader, {}), _jsx(MonthGrid, { cellClass: cellClass })] }) }));
+}
+/** A preset's button: sets the range, which reports it, and closes the popover. */
+function PresetRow({ presets }) {
+    const picker = useContext(DateRangePickerStateContext);
+    return (_jsx("div", { className: "flex w-0 min-w-full flex-wrap gap-1.5", children: presets.map((preset) => (_jsx(PresetButton, { variant: "outline", size: "sm", onClick: () => {
+                picker?.setValue(preset.value);
+                picker?.close();
+            }, children: preset.label }, preset.label))) }));
+}
+/** The range picker's popover: the presets, if any, the header, one Monday-first month and Clear. */
+export function RangeCalendarPopover({ container, presets, }) {
+    return (_jsxs(PickerPopover, { container: container, children: [presets && presets.length > 0 ? _jsx(PresetRow, { presets: presets }) : null, _jsxs(RangeCalendar, { firstDayOfWeek: "mon", className: "flex flex-col gap-3", children: [_jsx(CalendarHeader, {}), _jsx(MonthGrid, { cellClass: rangeCellClass })] })] }));
 }

package/dist/DateFieldCalendar.d.ts

@@ -1,5 +1,19 @@
 import { type ReactElement } from "react";
 import { type FieldProps } from "./DateField.js";
+import type { Size } from "./size.js";
+/** The picker's padding, text and calendar button, by `size`. The button sets the height, so the padding is less than a `DateField`'s. */
+export declare const PICKER_SIZE: Record<Size, {
+    frame: string;
+    button: string;
+}>;
+/**
+ * The modal `<dialog>` a picker sits in, if any, for its popover's `container`: pass `findDialog` as the
+ * picker's `ref`.
+ */
+export declare function useDialogContainer(): {
+    container: Element | undefined;
+    findDialog: (el: HTMLDivElement | null) => void;
+};
 /** The body of `<DateField calendar>`: the field with a calendar button that opens a month view in a popover. */
 export declare function CalendarDateField({ label, description, errorMessage, error, isInvalid: invalidProp, value, defaultValue, onChange, name, size, ...rest }: FieldProps & {
     defaultOpen?: boolean;

package/dist/DateFieldCalendar.js

@@ -6,7 +6,7 @@ import { CalendarPopover, calendarIcon } from "./DateCalendar.js";
 import { FieldSegment, LOCALE, forcedInvalid, Notes, frameClass, iconButtonLook, labelClass, } from "./DateField.js";
 import { ShownInput, useShownDate } from "./shownDate.js";
 /** The picker's padding, text and calendar button, by `size`. The button sets the height, so the padding is less than a `DateField`'s. */
-const PICKER_SIZE = {
+export const PICKER_SIZE = {
     sm: { frame: "py-0.5 pl-2 pr-0.5 text-xs", button: "h-5 w-5" },
     md: { frame: "py-1 pl-2.5 pr-1 text-sm", button: "h-7 w-7" },
     lg: { frame: "py-1.5 pl-3 pr-1.5 text-base", button: "h-8 w-8" },
@@ -19,6 +19,15 @@ function PickerInput({ leaving, onLeft, children, }) {
     const field = useContext(DateFieldContext);
     return (_jsx(DateFieldContext.Provider, { value: { ...field, isReadOnly: leaving, onBlur: onLeft }, children: children }));
 }
+/**
+ * The modal `<dialog>` a picker sits in, if any, for its popover's `container`: pass `findDialog` as the
+ * picker's `ref`.
+ */
+export function useDialogContainer() {
+    const [container, setContainer] = useState(undefined);
+    const findDialog = useCallback((el) => setContainer(el?.closest("dialog") ?? undefined), []);
+    return { container, findDialog };
+}
 /** The body of `<DateField calendar>`: the field with a calendar button that opens a month view in a popover. */
 export function CalendarDateField({ label, description, errorMessage, error, isInvalid: invalidProp, value, defaultValue, onChange, name, size = "md", ...rest }) {
     const { inner, setInner, shown, impossible, onRead, validate, leaving, onBlurCapture, onLeft } = useShownDate({
@@ -29,7 +38,6 @@ export function CalendarDateField({ label, description, errorMessage, error, isI
         maxValue: rest.maxValue,
         isRequired: rest.isRequired,
     });
-    const [dialog, setDialog] = useState(undefined);
-    const findDialog = useCallback((el) => setDialog(el?.closest("dialog") ?? undefined), []);
-    return (_jsx(I18nProvider, { locale: LOCALE, children: _jsx(AriaDatePicker, { ...rest, ref: findDialog, value: inner, onChange: setInner, validate: validate, ...forcedInvalid({ impossible, isInvalid: invalidProp, error }), granularity: "day", shouldForceLeadingZeros: true, className: "flex flex-col gap-1.5", children: ({ isInvalid }) => (_jsxs(_Fragment, { children: [label ? _jsx(Label, { className: labelClass, children: label }) : null, _jsxs(Group, { className: (state) => cx(frameClass(state), "gap-1", PICKER_SIZE[size].frame), children: [_jsx("div", { className: "contents", onBlurCapture: onBlurCapture, children: _jsx(PickerInput, { leaving: leaving, onLeft: onLeft, children: _jsx(DateInput, { className: "flex flex-1", children: (segment) => (_jsx(FieldSegment, { segment: segment, ...(segment.type === "day" ? { onRead } : {}) })) }) }) }), _jsx(Button, { className: cx(iconButtonLook, PICKER_SIZE[size].button), children: calendarIcon })] }), _jsx(ShownInput, { name: name, shown: shown, isDisabled: rest.isDisabled }), _jsx(Notes, { description: description, errorMessage: errorMessage, error: error, impossible: impossible, isInvalid: isInvalid }), _jsx(CalendarPopover, { container: dialog })] })) }) }));
+    const { container, findDialog } = useDialogContainer();
+    return (_jsx(I18nProvider, { locale: LOCALE, children: _jsx(AriaDatePicker, { ...rest, ref: findDialog, value: inner, onChange: setInner, validate: validate, ...forcedInvalid({ impossible, isInvalid: invalidProp, error }), granularity: "day", shouldForceLeadingZeros: true, className: "flex flex-col gap-1.5", children: ({ isInvalid }) => (_jsxs(_Fragment, { children: [label ? _jsx(Label, { className: labelClass, children: label }) : null, _jsxs(Group, { className: (state) => cx(frameClass(state), "gap-1", PICKER_SIZE[size].frame), children: [_jsx("div", { className: "contents", onBlurCapture: onBlurCapture, children: _jsx(PickerInput, { leaving: leaving, onLeft: onLeft, children: _jsx(DateInput, { className: "flex flex-1", children: (segment) => (_jsx(FieldSegment, { segment: segment, ...(segment.type === "day" ? { onRead } : {}) })) }) }) }), _jsx(Button, { className: cx(iconButtonLook, PICKER_SIZE[size].button), children: calendarIcon })] }), _jsx(ShownInput, { name: name, shown: shown, isDisabled: rest.isDisabled }), _jsx(Notes, { description: description, errorMessage: errorMessage, error: error, impossible: impossible, isInvalid: isInvalid }), _jsx(CalendarPopover, { container: container })] })) }) }));
 }

package/dist/DateRangePicker.d.ts

@@ -0,0 +1,37 @@
+import { type ReactElement } from "react";
+import { type FieldProps } from "./DateField.js";
+import type { DataAttributes } from "./link.js";
+import { type ShownRange } from "./shownDate.js";
+/** A from and to date: `start` on or before `end`. */
+export type DateRange = ShownRange;
+/** A ready-made range the app builds from its own today, such as "Last 7 days". */
+export type DateRangePreset = {
+    label: string;
+    value: DateRange;
+};
+export type DateRangePickerProps = Pick<FieldProps, "label" | "description" | "errorMessage" | "error" | "isInvalid" | "size" | "minValue" | "maxValue" | "isRequired" | "isDisabled" | "aria-label" | "aria-labelledby" | "aria-describedby" | "aria-details"> & DataAttributes & {
+    /** The range, or `null` for none. Reported only when both days are complete, real and in order. */
+    value?: DateRange | null | undefined;
+    /** The range shown first when the picker holds its own value. */
+    defaultValue?: DateRange | null | undefined;
+    /** Called with the range once both sides make one, and with `null` when they stop making one. */
+    onChange?: ((range: DateRange | null) => void) | undefined;
+    /** Posts the start as `YYYY-MM-DD` in a form, or `""` while there is no range. */
+    startName?: string | undefined;
+    /** Posts the end as `YYYY-MM-DD` in a form, or `""` while there is no range. */
+    endName?: string | undefined;
+    /**
+     * Ready-made ranges, a row of buttons above the month. The app builds them from its own today;
+     * the picker has none of its own and never reads the clock.
+     */
+    presets?: readonly DateRangePreset[] | undefined;
+    /** Open the calendar on mount. */
+    defaultOpen?: boolean | undefined;
+};
+/**
+ * A from and to date in one field: DD/MM/YYYY "to" DD/MM/YYYY and a calendar button that opens one
+ * Monday-first month, where two presses pick the range. `presets` adds the app's ready-made ranges
+ * above the month. The range is reported only when both sides are complete, real dates within
+ * min/max and the start is on or before the end; otherwise `null`.
+ */
+export declare function DateRangePicker({ label, description, errorMessage, error, isInvalid: invalidProp, value, defaultValue, onChange, startName, endName, presets, defaultOpen, size, ...rest }: DateRangePickerProps): ReactElement;

package/dist/DateRangePicker.js

@@ -0,0 +1,42 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useContext } from "react";
+import { Button, DateFieldContext, DateInput, DateRangePicker as AriaDateRangePicker, Group, I18nProvider, Label, } from "react-aria-components";
+import { cx } from "./cx.js";
+import { RangeCalendarPopover, calendarIcon } from "./DateCalendar.js";
+import { FieldSegment, LOCALE, forcedInvalid, frameClass, iconButtonLook, labelClass, Notes, } from "./DateField.js";
+import { PICKER_SIZE, useDialogContainer } from "./DateFieldCalendar.js";
+import { ShownInput, useShownRange } from "./shownDate.js";
+/**
+ * One side's segments, named for a screen reader and read-only while focus leaves it with an
+ * impossible day (see `useShownDate`). React Aria hands each side its field props through the
+ * `start` and `end` slots; only this side's slot is changed.
+ */
+function SideInput({ slot, name, side, onRead, }) {
+    const field = useContext(DateFieldContext);
+    const slots = field && "slots" in field ? field.slots : undefined;
+    const own = slots?.[slot] ?? {};
+    return (_jsx("div", { role: "group", "aria-label": name, className: "flex items-center", onBlurCapture: side.onBlurCapture, children: _jsx(DateFieldContext.Provider, { value: {
+                slots: {
+                    ...slots,
+                    [slot]: { ...own, isReadOnly: side.leaving, onBlur: side.onLeft },
+                },
+            }, children: _jsx(DateInput, { slot: slot, className: "flex", children: (segment) => (_jsx(FieldSegment, { segment: segment, ...(segment.type === "day" ? { onRead } : {}) })) }) }) }));
+}
+/**
+ * A from and to date in one field: DD/MM/YYYY "to" DD/MM/YYYY and a calendar button that opens one
+ * Monday-first month, where two presses pick the range. `presets` adds the app's ready-made ranges
+ * above the month. The range is reported only when both sides are complete, real dates within
+ * min/max and the start is on or before the end; otherwise `null`.
+ */
+export function DateRangePicker({ label, description, errorMessage, error, isInvalid: invalidProp, value, defaultValue, onChange, startName, endName, presets, defaultOpen, size = "md", ...rest }) {
+    const shown = useShownRange({
+        value,
+        defaultValue,
+        onChange,
+        minValue: rest.minValue,
+        maxValue: rest.maxValue,
+        isRequired: rest.isRequired,
+    });
+    const { container, findDialog } = useDialogContainer();
+    return (_jsx(I18nProvider, { locale: LOCALE, children: _jsx(AriaDateRangePicker, { ...rest, ...(defaultOpen === undefined ? {} : { defaultOpen }), ref: findDialog, value: shown.inner, onChange: shown.setInner, validate: shown.validate, ...forcedInvalid({ impossible: shown.problem, isInvalid: invalidProp, error }), granularity: "day", shouldForceLeadingZeros: true, className: "flex flex-col gap-1.5", children: ({ isInvalid }) => (_jsxs(_Fragment, { children: [label ? _jsx(Label, { className: labelClass, children: label }) : null, _jsxs(Group, { className: (state) => cx(frameClass(state), "gap-1", PICKER_SIZE[size].frame), children: [_jsx(SideInput, { slot: "start", name: "Start date", side: shown.start, onRead: shown.onReadStart }), _jsx("span", { "aria-hidden": "true", className: "px-1 text-slate-500", children: "to" }), _jsx(SideInput, { slot: "end", name: "End date", side: shown.end, onRead: shown.onReadEnd }), _jsx(Button, { className: cx(iconButtonLook, PICKER_SIZE[size].button, "ml-auto"), children: calendarIcon })] }), _jsx(ShownInput, { name: startName, shown: shown.startShown, isDisabled: rest.isDisabled }), _jsx(ShownInput, { name: endName, shown: shown.endShown, isDisabled: rest.isDisabled }), _jsx(Notes, { description: description, errorMessage: errorMessage, error: error, impossible: shown.problem, isInvalid: isInvalid }), _jsx(RangeCalendarPopover, { container: container, presets: presets })] })) }) }));
+}

package/dist/index.d.ts

@@ -84,5 +84,6 @@ export { TextLink, type TextLinkSize } from "./TextLink.js";
 export { ToolCallCard } from "./ToolCallCard.js";
 export { Caption, Display, Lead, Overline, PageHeading, Prose, SectionHeading, SubsectionHeading, type SubsectionHeadingSize, Text, type TextTone, type TypographyColor, type TypographyProps, } from "./typography.js";
 export { DateField, type DateFieldProps } from "./DateField.js";
+export { DateRangePicker, type DateRange, type DateRangePickerProps, type DateRangePreset, } from "./DateRangePicker.js";
 export { fromISODate, toISODate } from "./isoDate.js";
 export type { CalendarDate } from "@internationalized/date";

package/dist/index.js

@@ -80,4 +80,5 @@ export { TextLink } from "./TextLink.js";
 export { ToolCallCard } from "./ToolCallCard.js";
 export { Caption, Display, Lead, Overline, PageHeading, Prose, SectionHeading, SubsectionHeading, Text, } from "./typography.js";
 export { DateField } from "./DateField.js";
+export { DateRangePicker, } from "./DateRangePicker.js";
 export { fromISODate, toISODate } from "./isoDate.js";

package/dist/shownDate.d.ts

@@ -36,6 +36,47 @@ export declare function useShownDate(props: ValueProps): {
     onBlurCapture: (event: FocusEvent<HTMLElement>) => void;
     onLeft: () => void;
 };
+/** A from and to date, both days. */
+export type ShownRange = {
+    start: CalendarDate;
+    end: CalendarDate;
+};
+type RangeProps = {
+    value?: ShownRange | null | undefined;
+    defaultValue?: ShownRange | null | undefined;
+    onChange?: ((range: ShownRange | null) => void) | undefined;
+    minValue?: FieldProps["minValue"] | undefined;
+    maxValue?: FieldProps["maxValue"] | undefined;
+    isRequired?: boolean | undefined;
+};
+/**
+ * `useShownDate` for a range: each side's segments are read on their own, and the range reported is
+ * what both sides show, once both are complete, real dates within min/max and the start is on or
+ * before the end; otherwise `null`. Each side keeps an impossible day on blur with its own `leaving`
+ * state, so one side is read-only only for the blur that leaves it. `problem` is the message for an
+ * impossible day, naming its side, or for an end before the start. `startShown` and `endShown`, what
+ * the hidden inputs post, are `""` while there is no range.
+ */
+export declare function useShownRange(props: RangeProps): {
+    inner: ShownRange | null;
+    setInner: import("react").Dispatch<import("react").SetStateAction<ShownRange | null>>;
+    startShown: string;
+    endShown: string;
+    problem: string | null;
+    onReadStart: (next: Read) => void;
+    onReadEnd: (next: Read) => void;
+    validate: () => "Enter the whole date." | null;
+    start: {
+        leaving: boolean;
+        onBlurCapture: (event: FocusEvent<HTMLElement>) => void;
+        onLeft: () => void;
+    };
+    end: {
+        leaving: boolean;
+        onBlurCapture: (event: FocusEvent<HTMLElement>) => void;
+        onLeft: () => void;
+    };
+};
 /** The hidden input a form posts under `name`: the shown date as `YYYY-MM-DD`, or `""`. */
 export declare function ShownInput({ name, shown, isDisabled, }: {
     name: string | undefined;

package/dist/shownDate.js

@@ -40,7 +40,7 @@ export function useShownDate(props) {
         impossible: null,
         partial: false,
     });
-    const [leaving, setLeaving] = useState(false);
+    const side = useLeaving(read.impossible);
     const shown = withinRange(read.typed, props);
     const reported = useRef(shown);
     const report = useRef(onChange);
@@ -73,15 +73,113 @@ export function useShownDate(props) {
         impossible: read.impossible,
         onRead,
         validate: () => (isRequired && read.partial ? "Enter the whole date." : null),
+        ...side,
+    };
+}
+/**
+ * The `leaving` read-only trick for one group of segments (see `useShownDate`): `onBlurCapture` goes
+ * on a wrapper of the input and `onLeft` is the field's own `onBlur`.
+ */
+function useLeaving(impossible) {
+    const [leaving, setLeaving] = useState(false);
+    return {
         leaving,
         onBlurCapture: (event) => {
-            if (read.impossible && !event.currentTarget.contains(event.relatedTarget)) {
+            if (impossible && !event.currentTarget.contains(event.relatedTarget)) {
                 flushSync(() => setLeaving(true));
             }
         },
         onLeft: () => setLeaving(false),
     };
 }
+const blank = { typed: "", impossible: null, partial: false };
+/** `"start/end"` when both are dates and start is on or before end, else `""`. */
+function rangeKey(start, end) {
+    return start && end && start <= end ? `${start}/${end}` : "";
+}
+function fromKey(key) {
+    const [start, end] = key.split("/").map(fromISODate);
+    return start && end ? { start, end } : null;
+}
+/** The given range as `"start/end"`, each side kept only within `bounds` when they are passed. */
+function givenKey(value, bounds) {
+    if (!value)
+        return "";
+    const [start, end] = [toISODate(value.start), toISODate(value.end)];
+    return bounds
+        ? rangeKey(withinRange(start, bounds), withinRange(end, bounds))
+        : `${start}/${end}`;
+}
+/** An impossible day, naming its side, or else an end before the start; `null` for neither. */
+function problemOf(start, end, startShown, endShown) {
+    const impossible = [
+        start.impossible && `Start date: ${start.impossible}`,
+        end.impossible && `End date: ${end.impossible}`,
+    ].filter(Boolean);
+    if (impossible.length > 0)
+        return impossible.join(" ");
+    if (startShown && endShown && startShown > endShown) {
+        return "The end date is before the start date.";
+    }
+    return null;
+}
+/**
+ * `useShownDate` for a range: each side's segments are read on their own, and the range reported is
+ * what both sides show, once both are complete, real dates within min/max and the start is on or
+ * before the end; otherwise `null`. Each side keeps an impossible day on blur with its own `leaving`
+ * state, so one side is read-only only for the blur that leaves it. `problem` is the message for an
+ * impossible day, naming its side, or for an end before the start. `startShown` and `endShown`, what
+ * the hidden inputs post, are `""` while there is no range.
+ */
+export function useShownRange(props) {
+    const { value, defaultValue, onChange, isRequired } = props;
+    const [inner, setInner] = useState(value ?? defaultValue ?? null);
+    const [start, setStart] = useState({ ...blank, typed: toISODate(inner?.start) });
+    const [end, setEnd] = useState({ ...blank, typed: toISODate(inner?.end) });
+    const onReadStart = useCallback((next) => setStart(next), []);
+    const onReadEnd = useCallback((next) => setEnd(next), []);
+    const startSide = useLeaving(start.impossible);
+    const endSide = useLeaving(end.impossible);
+    const startShown = withinRange(start.typed, props);
+    const endShown = withinRange(end.typed, props);
+    const shown = rangeKey(startShown, endShown);
+    const problem = problemOf(start, end, startShown, endShown);
+    const reported = useRef(shown);
+    const report = useRef(onChange);
+    useEffect(() => {
+        report.current = onChange;
+    });
+    const given = value === undefined ? undefined : givenKey(value, null);
+    const givenShown = givenKey(value ?? null, props);
+    const lastGiven = useRef(given);
+    useEffect(() => {
+        if (given === lastGiven.current)
+            return;
+        lastGiven.current = given;
+        if (given === undefined || given === reported.current)
+            return;
+        reported.current = givenShown;
+        setInner(fromKey(given));
+    }, [given, givenShown]);
+    useEffect(() => {
+        if (shown === reported.current)
+            return;
+        reported.current = shown;
+        report.current?.(fromKey(shown));
+    }, [shown]);
+    return {
+        inner,
+        setInner,
+        startShown: shown ? startShown : "",
+        endShown: shown ? endShown : "",
+        problem,
+        onReadStart,
+        onReadEnd,
+        validate: () => (isRequired && (start.partial || end.partial) ? "Enter the whole date." : null),
+        start: startSide,
+        end: endSide,
+    };
+}
 /** The hidden input a form posts under `name`: the shown date as `YYYY-MM-DD`, or `""`. */
 export function ShownInput({ name, shown, isDisabled, }) {
     return name ? _jsx("input", { type: "hidden", name: name, value: shown, disabled: isDisabled }) : null;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hackcove/ui-react",
-  "version": "0.10.5",
+  "version": "0.10.6",
   "description": "Hack Cove React components: primitives, typography roles and a safe Markdown renderer, written against Tailwind v4 utilities. Pair with a theme from @hackcove/themes.",
   "keywords": [
     "components",