@flood-md/react 0.2.6 → 0.2.9

package/dist/date-field.js

@@ -0,0 +1,172 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useEffect, useId, useImperativeHandle, useLayoutEffect, useRef, useState } from "react";
+import { resolveFieldStatus, mergeDescriptions } from "./field-state.js";
+import { canonicalDate, dateInRange, daysInMonth, emptyDateParts, isEmptyDate, parseDate, stepDatePart } from "./date-value.js";
+const orders = { "month-day-year": ["month", "day", "year"], "day-month-year": ["day", "month", "year"], "year-month-day": ["year", "month", "day"] };
+const cx = (...values) => values.filter(Boolean).join(" ");
+const useBrowserLayoutEffect = typeof window === "undefined" ? useEffect : useLayoutEffect;
+export const SegmentedDateField = /* @__PURE__ */ forwardRef(function SegmentedDateField({ label, hideLabel = false, value, defaultValue = "", onValueChange, min, max, required = false, readOnly = false, disabled = false, name, form, controlSize = "md", invalid = false, status, description, order = "month-day-year", segmentLabels, messages, validationMessage, end, id: explicitId, className, onBlur, onKeyDown, "aria-describedby": describedBy, "aria-invalid": ariaInvalid, ...props }, forwardedRef) {
+    if (!label.trim())
+        throw new Error("Flood DateField requires a nonempty label");
+    for (const [key, entry] of [["value", value], ["defaultValue", defaultValue], ["min", min], ["max", max]]) {
+        if (entry !== undefined && entry !== "" && !parseDate(entry))
+            throw new Error(`Flood DateField ${key} must be an ISO Gregorian date from 0001 to 9999`);
+    }
+    if (min === "" || max === "" || (min && max && min > max))
+        throw new Error("Flood DateField requires an ordered nonempty date range");
+    const ordered = orders[order];
+    if (!ordered)
+        throw new Error("Flood DateField order is unsupported");
+    const labels = { year: segmentLabels?.year ?? "Year", month: segmentLabels?.month ?? "Month", day: segmentLabels?.day ?? "Day" };
+    if (!Object.values(labels).every(text => text.trim()))
+        throw new Error("Flood DateField segment labels must be nonempty");
+    if (messages && Object.values(messages).some(text => text !== undefined && !text.trim()))
+        throw new Error("Flood DateField validation messages must be nonempty");
+    const generated = useId(), id = explicitId ?? `flood-date-${generated}`;
+    const root = useRef(null), bridge = useRef(null);
+    const inputs = useRef({});
+    const lastFocused = useRef(undefined);
+    useImperativeHandle(forwardedRef, () => root.current, []);
+    const initial = useRef(defaultValue), [local, setLocal] = useState(defaultValue);
+    const committed = value ?? local;
+    const [parts, setParts] = useState(() => parseDate(committed) ?? emptyDateParts());
+    const [touched, setTouched] = useState(false), [inheritedDisabled, setInheritedDisabled] = useState(false);
+    const effectiveDisabled = disabled || inheritedDisabled;
+    const composing = useRef(undefined), compositionSnapshot = useRef(parts), lastPublished = useRef(committed);
+    const settledParts = composing.current ? compositionSnapshot.current : parts;
+    const canonical = canonicalDate(settledParts), empty = isEmptyDate(settledParts);
+    const inRange = !!canonical && dateInRange(canonical, min, max);
+    const candidate = empty ? "" : inRange ? canonical : undefined;
+    const pendingAcceptance = value !== undefined && candidate !== undefined && candidate !== value;
+    const ownMessage = pendingAcceptance ? messages?.invalid ?? "Enter a valid date." : empty ? (required ? messages?.required ?? "Enter a date." : "") : !canonical ? messages?.invalid ?? "Enter a valid date." : !inRange ? messages?.outOfRange ?? "Enter a date within the allowed range." : "";
+    const message = ownMessage || (validationMessage?.trim() ? validationMessage : "");
+    const current = useRef({ value, committed, onValueChange, parts });
+    current.current = { value, committed, onValueChange, parts };
+    useBrowserLayoutEffect(() => {
+        if (value !== undefined && value !== lastPublished.current)
+            setParts(parseDate(value) ?? emptyDateParts());
+        if (value !== undefined)
+            lastPublished.current = value;
+    }, [value]);
+    useBrowserLayoutEffect(() => {
+        for (const part of ordered)
+            inputs.current[part]?.setCustomValidity(part === ordered[0] && !effectiveDisabled && !readOnly ? message : "");
+    }, [message, effectiveDisabled, readOnly, order]);
+    useEffect(() => {
+        const node = inputs.current[ordered[0]];
+        if (!node)
+            return;
+        const update = () => setInheritedDisabled(node.matches(":disabled"));
+        update();
+        const observer = new node.ownerDocument.defaultView.MutationObserver(update);
+        let ancestor = node.parentElement;
+        while (ancestor) {
+            if (ancestor.localName === "fieldset")
+                observer.observe(ancestor, { attributes: true, attributeFilter: ["disabled"] });
+            ancestor = ancestor.parentElement;
+        }
+        return () => observer.disconnect();
+    }, [disabled, order]);
+    useEffect(() => {
+        const owner = bridge.current?.form;
+        if (!owner)
+            return;
+        const timers = new Set();
+        const reset = (event) => {
+            const timer = setTimeout(() => {
+                timers.delete(timer);
+                if (event.defaultPrevented)
+                    return;
+                const next = current.current.value === undefined ? initial.current : current.current.committed;
+                if (current.current.value === undefined)
+                    setLocal(next);
+                setParts(parseDate(next) ?? emptyDateParts());
+                setTouched(false);
+                lastPublished.current = next;
+            }, 0);
+            timers.add(timer);
+        };
+        owner.addEventListener("reset", reset);
+        return () => { owner.removeEventListener("reset", reset); for (const timer of timers)
+            clearTimeout(timer); };
+    }, [form]);
+    const select = (part) => { const node = inputs.current[part]; node?.focus(); node?.select(); };
+    const change = (next) => {
+        if (readOnly || effectiveDisabled || inputs.current[ordered[0]]?.matches(":disabled"))
+            return;
+        setParts(next);
+        const date = canonicalDate(next);
+        const nextValue = date && dateInRange(date, min, max) ? date : "";
+        if (value === undefined)
+            setLocal(nextValue);
+        if (lastPublished.current !== nextValue) {
+            lastPublished.current = nextValue;
+            onValueChange?.(nextValue);
+        }
+    };
+    const edit = (part, raw) => {
+        if (!/^\d*$/.test(raw))
+            return;
+        const limit = part === "year" ? 4 : 2;
+        const text = raw.slice(0, limit);
+        change({ ...current.current.parts, [part]: text });
+        if (text.length === limit && ordered.indexOf(part) < 2)
+            select(ordered[ordered.indexOf(part) + 1]);
+    };
+    const errorShown = touched && !effectiveDisabled && !readOnly && !!message;
+    const resolvedStatus = resolveFieldStatus(status, invalid || errorShown, ariaInvalid);
+    const descriptionId = description ? `${id}-description` : undefined;
+    const errorId = errorShown ? `${id}-error` : undefined;
+    return _jsxs("div", { ...props, id: id, ref: root, className: cx("flood-date-field", className), "data-disabled": effectiveDisabled || undefined, onBlur: event => {
+            onBlur?.(event);
+            if (!event.currentTarget.contains(event.relatedTarget)) {
+                setTouched(true);
+                const date = canonicalDate(current.current.parts);
+                const draft = isEmptyDate(current.current.parts) ? "" : date && dateInRange(date, min, max) ? date : undefined;
+                if (value !== undefined && draft !== undefined && draft !== value) {
+                    setParts(parseDate(value) ?? emptyDateParts());
+                    lastPublished.current = value;
+                }
+            }
+        }, onKeyDown: event => {
+            onKeyDown?.(event);
+            if (event.defaultPrevented || event.nativeEvent.isComposing || composing.current || event.keyCode === 229 || event.altKey || event.ctrlKey || event.metaKey)
+                return;
+            const target = event.target;
+            const part = target.getAttribute("data-segment");
+            if (!part || inputs.current[part] !== target)
+                return;
+            const index = ordered.indexOf(part);
+            const rtl = root.current && root.current.ownerDocument.defaultView.getComputedStyle(root.current).direction === "rtl";
+            const offset = (event.key === "ArrowLeft" ? -1 : 1) * (rtl ? -1 : 1);
+            if ((event.key === "ArrowLeft" || event.key === "ArrowRight") && index + offset >= 0 && index + offset <= 2) {
+                event.preventDefault();
+                select(ordered[index + offset]);
+                return;
+            }
+            if (readOnly || effectiveDisabled || target.matches(":disabled"))
+                return;
+            if (["ArrowUp", "ArrowDown", "Home", "End"].includes(event.key)) {
+                event.preventDefault();
+                change(stepDatePart(current.current.parts, part, event.key === "ArrowDown" ? -1 : 1, event.key === "Home" ? "start" : event.key === "End" ? "end" : undefined));
+                target.select();
+            }
+            if (event.key === "Backspace" && !parts[part] && index > 0) {
+                event.preventDefault();
+                select(ordered[index - 1]);
+            }
+        }, children: [_jsx("label", { className: cx("flood-label", hideLabel && "flood-visually-hidden"), id: `${id}-label`, htmlFor: `${id}-${ordered[0]}`, children: label }), _jsxs("div", { className: cx("flood-date-field__control", `flood-control--${controlSize}`), role: "group", "aria-labelledby": `${id}-label`, "aria-describedby": mergeDescriptions(describedBy, descriptionId, errorId), "data-size": controlSize, "data-status": resolvedStatus, "data-readonly": readOnly || undefined, "data-disabled": effectiveDisabled || undefined, onClick: event => {
+                    if (event.defaultPrevented || effectiveDisabled || event.target.closest("input,button,a,.flood-date-field__end"))
+                        return;
+                    const part = ordered.find(part => !parts[part]) ?? lastFocused.current ?? ordered[0];
+                    if (!inputs.current[part]?.matches(":disabled"))
+                        select(part);
+                }, children: [ordered.map((part, index) => _jsxs("span", { className: "flood-date-field__part", children: [index > 0 && _jsx("span", { className: "flood-date-field__separator", "aria-hidden": "true", children: "/" }), _jsx("input", { id: `${id}-${part}`, ref: node => { inputs.current[part] = node; }, className: "flood-date-field__segment", "data-segment": part, type: "text", role: "spinbutton", inputMode: "numeric", autoComplete: "off", spellCheck: false, form: form, "aria-label": `${label}, ${labels[part]}`, "aria-valuemin": 1, "aria-valuemax": part === "year" ? 9999 : part === "month" ? 12 : daysInMonth(Number(parts.year) || 2000, Number(parts.month) || 1), "aria-valuenow": parts[part] && Number(parts[part]) >= 1 && Number(parts[part]) <= (part === "year" ? 9999 : part === "month" ? 12 : daysInMonth(Number(parts.year) || 2000, Number(parts.month) || 1)) ? Number(parts[part]) : undefined, "aria-valuetext": parts[part] || undefined, "aria-invalid": resolvedStatus === "error" || undefined, "aria-required": required || undefined, "aria-describedby": mergeDescriptions(describedBy, descriptionId, errorId), placeholder: part === "year" ? "YYYY" : part === "month" ? "MM" : "DD", value: parts[part], disabled: disabled, readOnly: readOnly, onFocus: event => { lastFocused.current = part; event.currentTarget.select(); }, onClick: event => event.currentTarget.select(), onChange: event => { if (composing.current === part)
+                                    setParts(previous => ({ ...previous, [part]: event.target.value }));
+                                else
+                                    edit(part, event.target.value); }, onCompositionStart: () => { compositionSnapshot.current = current.current.parts; composing.current = part; }, onCompositionEnd: event => { composing.current = undefined; edit(part, event.currentTarget.value); }, onPaste: event => { if (readOnly || effectiveDisabled)
+                                    return; const parsed = parseDate(event.clipboardData.getData("text/plain").trim()); if (parsed) {
+                                    event.preventDefault();
+                                    change(parsed);
+                                } }, onInvalid: () => setTouched(true) })] }, part)), end != null && _jsx("div", { className: "flood-date-field__end", children: end })] }), _jsx("input", { ref: bridge, type: "hidden", name: name, form: form, value: canonical && (readOnly || inRange && !message) && (value === undefined || canonical === value) ? canonical : "", disabled: disabled }), description && _jsx("div", { id: descriptionId, className: "flood-date-field__description", children: description }), errorShown && _jsx("div", { id: errorId, className: "flood-date-field__error", children: message })] });
+});

package/dist/date-picker.d.ts

@@ -0,0 +1,3 @@
+import type { DatePickerProps } from "./index.js";
+/** Calendar selection and keyboard date entry share one DateField value/form bridge. */
+export declare const CalendarDatePicker: import("react").ForwardRefExoticComponent<DatePickerProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/date-picker.js

@@ -0,0 +1,108 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useEffect, useImperativeHandle, useLayoutEffect, useRef, useState } from "react";
+import { Calendar, DateField, IconButton, Popover } from "./index.js";
+const useBrowserLayoutEffect = typeof window === "undefined" ? useEffect : useLayoutEffect;
+const triggerSizes = { sm: "xs", md: "sm", lg: "md", xl: "lg" };
+/** Calendar selection and keyboard date entry share one DateField value/form bridge. */
+export const CalendarDatePicker = /* @__PURE__ */ forwardRef(function CalendarDatePicker({ value, defaultValue = "", onValueChange, open: controlledOpen, defaultOpen = false, onOpenChange, calendarLabel, openCalendarLabel, locale, weekStartsOn, today, previousMonthLabel, nextMonthLabel, label, disabled = false, readOnly = false, controlSize = "md", min, max, form, className, onKeyDown, ...props }, forwardedRef) {
+    const panelLabel = calendarLabel ?? `${label} calendar`;
+    const triggerLabel = openCalendarLabel ?? `Open calendar: ${label}`;
+    if (!panelLabel.trim() || !triggerLabel.trim())
+        throw new Error("Flood DatePicker calendar labels must be nonempty");
+    const root = useRef(null);
+    const positionReference = useRef(null);
+    const [fieldWidth, setFieldWidth] = useState();
+    useImperativeHandle(forwardedRef, () => root.current, []);
+    const initial = useRef(defaultValue), [localValue, setLocalValue] = useState(defaultValue);
+    const [localOpen, setLocalOpen] = useState(defaultOpen), [inheritedDisabled, setInheritedDisabled] = useState(false);
+    const committed = value ?? localValue, requestedOpen = controlledOpen ?? localOpen;
+    const blocked = disabled || readOnly || inheritedDisabled;
+    const current = useRef({ value, controlledOpen, onValueChange, onOpenChange, requestedOpen });
+    current.current = { value, controlledOpen, onValueChange, onOpenChange, requestedOpen };
+    const requestOpen = (next) => {
+        if (current.current.controlledOpen === undefined)
+            setLocalOpen(next);
+        current.current.onOpenChange?.(next);
+    };
+    const nativeDisabled = () => root.current?.querySelector("input[data-segment]")?.matches(":disabled") ?? false;
+    const changeDate = (next) => {
+        if (blocked || nativeDisabled())
+            return;
+        if (current.current.value === undefined)
+            setLocalValue(next);
+        current.current.onValueChange?.(next);
+    };
+    useBrowserLayoutEffect(() => {
+        const control = root.current?.querySelector(".flood-date-field__control");
+        if (!control)
+            return;
+        positionReference.current = control;
+        const update = () => { const width = control.getBoundingClientRect().width; if (width > 0)
+            setFieldWidth(previous => previous === width ? previous : width); };
+        update();
+        const view = control.ownerDocument.defaultView;
+        const observer = view?.ResizeObserver ? new view.ResizeObserver(update) : undefined;
+        observer?.observe(control);
+        return () => { observer?.disconnect(); if (positionReference.current === control)
+            positionReference.current = null; };
+    }, []);
+    useBrowserLayoutEffect(() => {
+        const node = root.current;
+        if (!node)
+            return;
+        const update = () => setInheritedDisabled(nativeDisabled());
+        update();
+        const observer = new node.ownerDocument.defaultView.MutationObserver(update);
+        let ancestor = node.parentElement;
+        while (ancestor) {
+            if (ancestor.localName === "fieldset")
+                observer.observe(ancestor, { attributes: true, attributeFilter: ["disabled"] });
+            ancestor = ancestor.parentElement;
+        }
+        return () => observer.disconnect();
+    }, [disabled]);
+    useEffect(() => {
+        if (blocked && current.current.requestedOpen) {
+            if (current.current.controlledOpen === undefined)
+                setLocalOpen(false);
+            current.current.onOpenChange?.(false);
+        }
+    }, [blocked, requestedOpen]);
+    useEffect(() => {
+        const owner = root.current?.querySelector('input[type="hidden"]')?.form;
+        if (!owner)
+            return;
+        const timers = new Set();
+        const reset = (event) => {
+            const timer = setTimeout(() => {
+                timers.delete(timer);
+                if (event.defaultPrevented)
+                    return;
+                if (current.current.value === undefined)
+                    setLocalValue(initial.current);
+                if (current.current.requestedOpen) {
+                    if (current.current.controlledOpen === undefined)
+                        setLocalOpen(false);
+                    current.current.onOpenChange?.(false);
+                }
+            }, 0);
+            timers.add(timer);
+        };
+        owner.addEventListener("reset", reset);
+        return () => { owner.removeEventListener("reset", reset); for (const timer of timers)
+            clearTimeout(timer); };
+    }, [form]);
+    return _jsx(DateField, { ...props, ref: root, label: label, value: committed, onValueChange: changeDate, disabled: disabled, readOnly: readOnly, controlSize: controlSize, min: min, max: max, form: form, className: ["flood-date-picker", className].filter(Boolean).join(" "), onKeyDown: event => {
+            onKeyDown?.(event);
+            if (!event.defaultPrevented && !event.nativeEvent.isComposing && event.keyCode !== 229 &&
+                !blocked && !nativeDisabled() && event.altKey && !event.ctrlKey && !event.metaKey && event.key === "ArrowDown" &&
+                event.target.matches("input[data-segment]")) {
+                event.preventDefault();
+                requestOpen(true);
+            }
+        }, end: _jsx(Popover, { title: panelLabel, className: "flood-date-picker__panel", align: "end", positionReference: positionReference, style: { "--flood-date-picker-width": fieldWidth === undefined ? undefined : `${fieldWidth}px` }, open: !blocked && requestedOpen, onOpenChange: requestOpen, disabled: blocked, trigger: trigger => _jsx(IconButton, { ...trigger, label: triggerLabel, variant: "ghost", size: triggerSizes[controlSize], children: _jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.75", strokeLinecap: "round", strokeLinejoin: "round", children: [_jsx("rect", { x: "3", y: "5", width: "18", height: "16", rx: "2" }), _jsx("path", { d: "M16 3v4M8 3v4M3 11h18" })] }) }), children: _jsx(Calendar, { label: panelLabel, value: committed, min: min, max: max, locale: locale, weekStartsOn: weekStartsOn, today: today, previousMonthLabel: previousMonthLabel, nextMonthLabel: nextMonthLabel, autoFocus: true, onValueChange: changeDate, onDateSelect: () => {
+                    if (blocked || nativeDisabled())
+                        return;
+                    requestOpen(false);
+                } }) }) });
+});

package/dist/date-range-field.d.ts

@@ -0,0 +1,3 @@
+import type { DateRangeFieldProps } from "./index.js";
+/** Two original DateFields share one atomic range contract and two canonical form bridges. */
+export declare const PairedDateRangeField: import("react").ForwardRefExoticComponent<DateRangeFieldProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/date-range-field.js

@@ -0,0 +1,84 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useEffect, useId, useImperativeHandle, useLayoutEffect, useRef, useState } from "react";
+import { DateField } from "./index.js";
+import { mergeDescriptions } from "./field-state.js";
+import { canonicalDate, isEmptyDate } from "./date-value.js";
+import { availableDateRange, checkDateRange, completeDateRange, emptyDateRange, emptyRange, sameDateRange } from "./date-range-value.js";
+const cx = (...values) => values.filter(Boolean).join(" ");
+const useBrowserLayoutEffect = typeof window === "undefined" ? useEffect : useLayoutEffect;
+/** Two original DateFields share one atomic range contract and two canonical form bridges. */
+export const PairedDateRangeField = /* @__PURE__ */ forwardRef(function PairedDateRangeField({ label, hideLabel = false, value, defaultValue = emptyDateRange(), onValueChange, startName, endName, startLabel = "Start date", endLabel = "End date", min, max, required = false, disabled = false, readOnly = false, isDateDisabled, isRangeDisabled, rangeMessages, validationMessage, status, invalid, description, order = "month-day-year", controlSize = "md", segmentLabels, messages, end, form, id: explicitId, className, onBlur, onKeyDown, onKeyDownCapture, "aria-describedby": describedBy, ...props }, forwardedRef) {
+    if (!label.trim() || !startLabel.trim() || !endLabel.trim())
+        throw new Error("Flood DateRangeField requires nonempty range and endpoint labels");
+    checkDateRange(defaultValue, "defaultValue");
+    if (value !== undefined)
+        checkDateRange(value);
+    const initial = useRef({ ...defaultValue }), [local, setLocal] = useState(() => ({ ...defaultValue })), committed = value ?? local;
+    const [draft, setDraft] = useState(() => ({ ...committed }));
+    const root = useRef(null), startBridge = useRef(null), endBridge = useRef(null);
+    const generated = useId(), id = explicitId ?? `flood-date-range-${generated}`;
+    useImperativeHandle(forwardedRef, () => root.current, []);
+    const lastPublished = useRef({ ...committed }), current = useRef({ value, committed, draft });
+    current.current = { value, committed, draft };
+    const labels = { incomplete: rangeMessages?.incomplete ?? "Enter both dates.", reversed: rangeMessages?.reversed ?? "The end date must not precede the start date.", unavailable: rangeMessages?.unavailable ?? "This date range is unavailable." };
+    if (!Object.values(labels).every(text => text.trim()))
+        throw new Error("Flood DateRangeField relationship messages must be nonempty");
+    const available = availableDateRange(draft, min, max, isDateDisabled, isRangeDisabled), empty = emptyRange(draft);
+    const pending = value !== undefined && (empty || available) && !sameDateRange(draft, value);
+    const relationship = pending ? messages?.invalid ?? "Enter a valid date range." : empty ? (required ? labels.incomplete : "") : !draft.start || !draft.end ? labels.incomplete : draft.start > draft.end ? labels.reversed : !available ? labels.unavailable : "";
+    const constraint = relationship || (validationMessage?.trim() ? validationMessage : "");
+    const errorEndpoint = !draft.start || !!draft.start && !!isDateDisabled?.(draft.start) ? "start" : "end";
+    const descriptionId = description ? `${id}-description` : undefined;
+    useBrowserLayoutEffect(() => {
+        if (value !== undefined && !sameDateRange(value, lastPublished.current))
+            setDraft({ ...value });
+        if (value !== undefined)
+            lastPublished.current = { ...value };
+    }, [value?.start, value?.end]);
+    useEffect(() => {
+        const owner = startBridge.current?.form;
+        if (!owner)
+            return;
+        const timers = new Set();
+        const reset = (event) => { const timer = setTimeout(() => { timers.delete(timer); if (event.defaultPrevented)
+            return; const next = current.current.value === undefined ? initial.current : current.current.committed; if (current.current.value === undefined)
+            setLocal({ ...next }); setDraft({ ...next }); lastPublished.current = { ...next }; }, 0); timers.add(timer); };
+        owner.addEventListener("reset", reset);
+        return () => { owner.removeEventListener("reset", reset); for (const timer of timers)
+            clearTimeout(timer); };
+    }, [form]);
+    const change = (part, date) => {
+        if (disabled || readOnly || root.current?.querySelector("input[data-segment]")?.matches(":disabled"))
+            return;
+        const next = { ...current.current.draft, [part]: date };
+        current.current.draft = next;
+        setDraft(next);
+        if (value === undefined)
+            setLocal(next);
+        if (!sameDateRange(next, lastPublished.current)) {
+            lastPublished.current = { ...next };
+            onValueChange?.(next);
+        }
+    };
+    const readEndpoint = (part) => {
+        const parts = { year: "", month: "", day: "" };
+        root.current?.querySelectorAll(`[data-range-endpoint="${part}"] input[data-segment]`).forEach(node => { parts[node.dataset.segment] = node.value; });
+        return isEmptyDate(parts) ? "" : canonicalDate(parts);
+    };
+    const accepted = (readOnly ? completeDateRange(draft) || empty : (available || empty) && !constraint) && (value === undefined || sameDateRange(draft, value));
+    const firstPart = order.split("-")[0];
+    return _jsxs("div", { ...props, id: id, ref: root, role: "group", "aria-labelledby": `${id}-label`, "aria-describedby": mergeDescriptions(describedBy, descriptionId), className: cx("flood-date-range-field", className), onKeyDownCapture: event => { onKeyDownCapture?.(event); onKeyDown?.(event); }, onBlur: event => {
+            onBlur?.(event);
+            if (event.currentTarget.contains(event.relatedTarget))
+                return;
+            const start = readEndpoint("start"), finish = readEndpoint("end");
+            const next = start !== undefined && finish !== undefined ? { start, end: finish } : undefined;
+            if (value !== undefined && next && (emptyRange(next) || availableDateRange(next, min, max, isDateDisabled, isRangeDisabled)) && !sameDateRange(next, value)) {
+                setDraft({ ...value });
+                lastPublished.current = { ...value };
+            }
+            else if (constraint)
+                queueMicrotask(() => { const anchor = root.current?.querySelector(`[data-range-endpoint="${errorEndpoint}"] input[data-segment]`); if (anchor && !anchor.matches(":disabled"))
+                    anchor.checkValidity(); });
+        }, children: [_jsx("label", { id: `${id}-label`, htmlFor: `${id}-start-${firstPart}`, className: cx("flood-label", hideLabel && "flood-visually-hidden"), children: label }), _jsxs("div", { className: cx("flood-date-range-field__fields", `flood-control--${controlSize}`), children: [_jsx("div", { "data-range-endpoint": "start", children: _jsx(DateField, { id: `${id}-start`, label: `${label}, ${startLabel}`, hideLabel: true, value: draft.start, onValueChange: date => change("start", date), min: min, max: max, required: required, disabled: disabled, readOnly: readOnly, controlSize: controlSize, order: order, segmentLabels: segmentLabels, messages: messages, form: form, status: status, invalid: invalid, "aria-invalid": props["aria-invalid"], "aria-describedby": mergeDescriptions(describedBy, descriptionId), validationMessage: errorEndpoint === "start" ? constraint : undefined }) }), _jsx("span", { className: "flood-date-range-field__separator", "aria-hidden": "true", children: "\u2013" }), _jsx("div", { "data-range-endpoint": "end", children: _jsx(DateField, { id: `${id}-end`, label: `${label}, ${endLabel}`, hideLabel: true, value: draft.end, onValueChange: date => change("end", date), min: min, max: max, required: required, disabled: disabled, readOnly: readOnly, controlSize: controlSize, order: order, segmentLabels: segmentLabels, messages: messages, form: form, status: status, invalid: invalid, "aria-invalid": props["aria-invalid"], "aria-describedby": mergeDescriptions(describedBy, descriptionId), validationMessage: errorEndpoint === "end" ? constraint : undefined, end: end }) })] }), _jsx("input", { ref: startBridge, type: "hidden", name: startName, form: form, value: accepted ? draft.start : "", disabled: disabled }), _jsx("input", { ref: endBridge, type: "hidden", name: endName, form: form, value: accepted ? draft.end : "", disabled: disabled }), description && _jsx("div", { id: descriptionId, className: "flood-date-range-field__description", children: description })] });
+});

package/dist/date-range-picker.d.ts

@@ -0,0 +1,2 @@
+import type { DateRangePickerProps } from "./index.js";
+export declare const CalendarDateRangePicker: import("react").ForwardRefExoticComponent<DateRangePickerProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/date-range-picker.js

@@ -0,0 +1,81 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useEffect, useImperativeHandle, useLayoutEffect, useRef, useState } from "react";
+import { DateRangeField, IconButton, Popover, RangeCalendar } from "./index.js";
+import { emptyDateRange } from "./date-range-value.js";
+const useBrowserLayoutEffect = typeof window === "undefined" ? useEffect : useLayoutEffect;
+const triggerSizes = { sm: "xs", md: "sm", lg: "md", xl: "lg" };
+export const CalendarDateRangePicker = /* @__PURE__ */ forwardRef(function CalendarDateRangePicker({ value, defaultValue = emptyDateRange(), onValueChange, open: controlledOpen, defaultOpen = false, onOpenChange, label, calendarLabel, openCalendarLabel, locale, weekStartsOn, today, previousMonthLabel, nextMonthLabel, rangeLabels, disabled = false, readOnly = false, controlSize = "md", min, max, isDateDisabled, isRangeDisabled, form, className, onKeyDown, ...props }, forwardedRef) {
+    const panelLabel = calendarLabel ?? `${label} calendar`, triggerLabel = openCalendarLabel ?? `Open calendar: ${label}`;
+    if (!panelLabel.trim() || !triggerLabel.trim())
+        throw new Error("Flood DateRangePicker requires nonempty calendar and trigger labels");
+    const root = useRef(null), positionReference = useRef(null);
+    useImperativeHandle(forwardedRef, () => root.current, []);
+    const initial = useRef({ ...defaultValue }), [localValue, setLocalValue] = useState(() => ({ ...defaultValue }));
+    const [localOpen, setLocalOpen] = useState(defaultOpen), [inheritedDisabled, setInheritedDisabled] = useState(false), [fieldWidth, setFieldWidth] = useState();
+    const committed = value ?? localValue, requestedOpen = controlledOpen ?? localOpen, blocked = disabled || readOnly || inheritedDisabled;
+    const current = useRef({ value, committed, controlledOpen, requestedOpen });
+    current.current = { value, committed, controlledOpen, requestedOpen };
+    const nativeDisabled = () => root.current?.querySelector("input[data-segment]")?.matches(":disabled") ?? false;
+    const requestOpen = (next) => { if (current.current.controlledOpen === undefined)
+        setLocalOpen(next); onOpenChange?.(next); };
+    const change = (next) => { if (blocked || nativeDisabled())
+        return; if (value === undefined)
+        setLocalValue({ ...next }); onValueChange?.(next); };
+    useBrowserLayoutEffect(() => {
+        const fields = root.current?.querySelector(".flood-date-range-field__fields");
+        if (!fields)
+            return;
+        positionReference.current = fields;
+        const update = () => { const width = fields.getBoundingClientRect().width; if (width > 0)
+            setFieldWidth(previous => previous === width ? previous : width); };
+        update();
+        const view = fields.ownerDocument.defaultView, observer = view?.ResizeObserver ? new view.ResizeObserver(update) : undefined;
+        observer?.observe(fields);
+        return () => { observer?.disconnect(); if (positionReference.current === fields)
+            positionReference.current = null; };
+    }, []);
+    useBrowserLayoutEffect(() => {
+        const node = root.current;
+        if (!node)
+            return;
+        const update = () => setInheritedDisabled(nativeDisabled());
+        update();
+        const observer = new node.ownerDocument.defaultView.MutationObserver(update);
+        let ancestor = node.parentElement;
+        while (ancestor) {
+            if (ancestor.localName === "fieldset")
+                observer.observe(ancestor, { attributes: true, attributeFilter: ["disabled"] });
+            ancestor = ancestor.parentElement;
+        }
+        return () => observer.disconnect();
+    }, [disabled]);
+    useEffect(() => { if (blocked && requestedOpen) {
+        if (controlledOpen === undefined)
+            setLocalOpen(false);
+        onOpenChange?.(false);
+    } }, [blocked, requestedOpen]);
+    useEffect(() => {
+        const owner = root.current?.querySelector('input[type="hidden"]')?.form;
+        if (!owner)
+            return;
+        const timers = new Set();
+        const reset = (event) => { const timer = setTimeout(() => { timers.delete(timer); if (event.defaultPrevented)
+            return; if (current.current.value === undefined)
+            setLocalValue({ ...initial.current }); if (current.current.requestedOpen) {
+            if (current.current.controlledOpen === undefined)
+                setLocalOpen(false);
+            onOpenChange?.(false);
+        } }, 0); timers.add(timer); };
+        owner.addEventListener("reset", reset);
+        return () => { owner.removeEventListener("reset", reset); for (const timer of timers)
+            clearTimeout(timer); };
+    }, [form]);
+    return _jsx(DateRangeField, { ...props, ref: root, label: label, value: committed, onValueChange: change, disabled: disabled, readOnly: readOnly, controlSize: controlSize, min: min, max: max, isDateDisabled: isDateDisabled, isRangeDisabled: isRangeDisabled, form: form, className: ["flood-date-range-picker", className].filter(Boolean).join(" "), onKeyDown: event => {
+            onKeyDown?.(event);
+            if (!event.defaultPrevented && !event.nativeEvent.isComposing && event.keyCode !== 229 && !blocked && !nativeDisabled() && event.altKey && !event.ctrlKey && !event.metaKey && event.key === "ArrowDown" && event.target.matches("input[data-segment]")) {
+                event.preventDefault();
+                requestOpen(true);
+            }
+        }, end: _jsx(Popover, { title: panelLabel, className: "flood-date-range-picker__panel", align: "end", positionReference: positionReference, style: { "--flood-date-range-picker-width": fieldWidth ? `${fieldWidth}px` : undefined }, open: !blocked && requestedOpen, onOpenChange: requestOpen, disabled: blocked, trigger: trigger => _jsx(IconButton, { ...trigger, label: triggerLabel, variant: "ghost", size: triggerSizes[controlSize], children: _jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.75", strokeLinecap: "round", strokeLinejoin: "round", children: [_jsx("rect", { x: "3", y: "5", width: "18", height: "16", rx: "2" }), _jsx("path", { d: "M16 3v4M8 3v4M3 11h18" })] }) }), children: _jsx(RangeCalendar, { label: panelLabel, value: committed, min: min, max: max, isDateDisabled: isDateDisabled, isRangeDisabled: isRangeDisabled, locale: locale, weekStartsOn: weekStartsOn, today: today, previousMonthLabel: previousMonthLabel, nextMonthLabel: nextMonthLabel, rangeLabels: rangeLabels, autoFocus: true, onValueChange: change, onRangeSelect: () => { if (!blocked && !nativeDisabled())
+                    requestOpen(false); } }) }) });
+});

package/dist/date-range-value.d.ts

@@ -0,0 +1,8 @@
+import type { DateRangeValue } from "./index.js";
+export declare const emptyDateRange: () => DateRangeValue;
+export declare const sameDateRange: (a: DateRangeValue, b: DateRangeValue) => boolean;
+export declare function checkDateRange(range: DateRangeValue, name?: string): void;
+export declare const completeDateRange: (range: DateRangeValue) => boolean;
+export declare const orderedDateRange: (a: string, b: string) => DateRangeValue;
+export declare const emptyRange: (range: DateRangeValue) => boolean;
+export declare function availableDateRange(range: DateRangeValue, min?: string, max?: string, isDateDisabled?: (date: string) => boolean, isRangeDisabled?: (range: DateRangeValue) => boolean): boolean;

package/dist/date-range-value.js

@@ -0,0 +1,13 @@
+import { dateInRange, parseDate } from "./date-value.js";
+export const emptyDateRange = () => ({ start: "", end: "" });
+export const sameDateRange = (a, b) => a.start === b.start && a.end === b.end;
+export function checkDateRange(range, name = "value") {
+    if (!range || typeof range.start !== "string" || typeof range.end !== "string" || [range.start, range.end].some(date => date !== "" && !parseDate(date)))
+        throw new Error(`Flood date range ${name} requires ISO Gregorian start/end dates or empty strings`);
+}
+export const completeDateRange = (range) => !!range.start && !!range.end && range.start <= range.end;
+export const orderedDateRange = (a, b) => a <= b ? { start: a, end: b } : { start: b, end: a };
+export const emptyRange = (range) => !range.start && !range.end;
+export function availableDateRange(range, min, max, isDateDisabled, isRangeDisabled) {
+    return completeDateRange(range) && dateInRange(range.start, min, max) && dateInRange(range.end, min, max) && !isDateDisabled?.(range.start) && !isDateDisabled?.(range.end) && !isRangeDisabled?.(range);
+}

package/dist/date-time-picker.d.ts

@@ -0,0 +1,3 @@
+import { type DateTimePickerProps } from "./index.js";
+/** A civil date and wall-clock time. The host owns timezone conversion. */
+export declare const CivilDateTimePicker: import("react").ForwardRefExoticComponent<DateTimePickerProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/date-time-picker.js

@@ -0,0 +1,31 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useEffect, useImperativeHandle, useRef, useState } from "react";
+import { DatePicker, TimePicker, Fieldset } from "./index.js";
+/** A civil date and wall-clock time. The host owns timezone conversion. */
+export const CivilDateTimePicker = /* @__PURE__ */ forwardRef(function CivilDateTimePicker({ label, validationMessage, timeInterval, hideLabel = false, hideFieldLabels = false, value, defaultValue = { date: "", time: "" }, onValueChange, dateLabel = "Date", timeLabel = "Time", dateName, timeName, form, required = false, disabled = false, readOnly = false, controlSize = "md", precision = "minute", order = "month-day-year", locale = "en-US", minDate, maxDate, minTime, maxTime, step, status, description, className, ...props }, ref) {
+    const [local, setLocal] = useState(defaultValue);
+    const root = useRef(null), initial = useRef(defaultValue);
+    useImperativeHandle(ref, () => root.current, []);
+    useEffect(() => {
+        const owner = root.current?.querySelector("input")?.form;
+        if (!owner)
+            return;
+        const timers = new Set();
+        const reset = (event) => { const timer = setTimeout(() => { timers.delete(timer); if (!event.defaultPrevented)
+            setLocal(initial.current); }, 0); timers.add(timer); };
+        owner.addEventListener("reset", reset);
+        return () => { owner.removeEventListener("reset", reset); timers.forEach(clearTimeout); };
+    }, [form]);
+    const selected = value ?? local;
+    const change = (part, next) => {
+        if (disabled || readOnly)
+            return;
+        const updated = { ...selected, [part]: next };
+        if (value === undefined)
+            setLocal(updated);
+        onValueChange?.(updated);
+    };
+    // Each field owns native validity, reset and submission. Values are deliberately
+    // separate: neither a timezone nor an instant is inferred from this pair.
+    return _jsx("div", { ...props, ref: root, className: ["flood-date-time-picker", className].filter(Boolean).join(" "), children: _jsx(Fieldset, { legend: label, hideLabel: hideLabel, hint: description, disabled: disabled, children: _jsxs("div", { className: "flood-date-time-picker__fields", children: [_jsx(DatePicker, { label: dateLabel, hideLabel: hideFieldLabels, value: value === undefined ? undefined : selected.date, defaultValue: defaultValue.date, onValueChange: next => change("date", next), name: dateName, form: form, required: required, disabled: disabled, readOnly: readOnly, controlSize: controlSize, order: order, locale: locale, min: minDate, max: maxDate, status: status, validationMessage: validationMessage }), _jsx(TimePicker, { label: timeLabel, hideLabel: hideFieldLabels, value: value === undefined ? undefined : selected.time, defaultValue: defaultValue.time, onValueChange: next => change("time", next), name: timeName, form: form, required: required, disabled: disabled, readOnly: readOnly, controlSize: controlSize, precision: precision, min: minTime, max: maxTime, step: step, interval: timeInterval, status: status })] }) }) });
+});

package/dist/date-time-range-picker.d.ts

@@ -0,0 +1,2 @@
+import { type DateTimeRangePickerProps } from "./index.js";
+export declare const CivilDateTimeRangePicker: import("react").ForwardRefExoticComponent<DateTimeRangePickerProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/date-time-range-picker.js

@@ -0,0 +1,51 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useEffect, useImperativeHandle, useRef, useState } from "react";
+import { Fieldset, Stack, DateTimePicker } from "./index.js";
+import { parseDate, dateInRange } from "./date-value.js";
+import { parseTime, timeOnStep } from "./time-value.js";
+const empty = () => ({ start: { date: "", time: "" }, end: { date: "", time: "" } });
+const copy = (value) => ({ start: { ...value.start }, end: { ...value.end } });
+const signature = (value) => [value.start.date, value.start.time, value.end.date, value.end.time].join("|");
+export const CivilDateTimeRangePicker = /* @__PURE__ */ forwardRef(function CivilDateTimeRangePicker({ label, hideLabel = false, value, defaultValue = empty(), onValueChange, startDateName, startTimeName, endDateName, endTimeName, startLabel = "Start", endLabel = "End", startDateLabel = "Start date", startTimeLabel = "Start time", endDateLabel = "End date", endTimeLabel = "End time", form, required = false, disabled = false, readOnly = false, controlSize = "md", precision = "minute", order = "month-day-year", locale = "en-US", minDate, maxDate, step: explicitStep, interval, status, description, incompleteMessage = "Complete both dates and times.", reversedMessage = "End must not precede start.", className, onBlur, ...props }, ref) {
+    if (![label, startLabel, endLabel, startDateLabel, startTimeLabel, endDateLabel, endTimeLabel, incompleteMessage, reversedMessage].every(text => text.trim()))
+        throw new Error("Flood DateTimeRangePicker requires nonempty labels and messages");
+    const initial = useRef(copy(defaultValue)), [local, setLocal] = useState(() => copy(defaultValue)), [proposal, setProposal] = useState();
+    const selected = value ?? local, sourceSignature = signature(selected), requested = proposal && signature(proposal) !== sourceSignature;
+    const root = useRef(null);
+    useImperativeHandle(ref, () => root.current, []);
+    useEffect(() => { setProposal(undefined); }, [sourceSignature]);
+    const complete = Boolean(parseDate(selected.start.date) && parseDate(selected.end.date) && parseTime(selected.start.time, precision) && parseTime(selected.end.time, precision));
+    const blank = Object.values(selected).every(endpoint => !endpoint.date && !endpoint.time);
+    const ordered = complete && `${selected.start.date}T${selected.start.time}` <= `${selected.end.date}T${selected.end.time}`;
+    const step = explicitStep ?? (precision === "minute" ? 60 : 1);
+    const available = complete && (readOnly || [selected.start, selected.end].every(endpoint => dateInRange(endpoint.date, minDate, maxDate) && timeOnStep(parseTime(endpoint.time, precision), step, undefined, precision)));
+    const accepted = Boolean(complete && ordered && available && !requested);
+    const constraint = requested ? incompleteMessage : !complete ? (blank && !required ? "" : incompleteMessage) : !ordered ? reversedMessage : "";
+    const change = (part, next) => {
+        if (disabled || readOnly || root.current?.querySelector("input")?.matches(":disabled"))
+            return;
+        const update = { ...selected, [part]: next };
+        if (value === undefined)
+            setLocal(update);
+        else
+            setProposal(update);
+        onValueChange?.(update);
+    };
+    useEffect(() => {
+        const owner = root.current?.querySelector("input")?.form;
+        if (!owner)
+            return;
+        const timers = new Set();
+        const reset = (event) => { const timer = setTimeout(() => { timers.delete(timer); if (event.defaultPrevented)
+            return; if (value === undefined)
+            setLocal(copy(initial.current)); setProposal(undefined); }, 0); timers.add(timer); };
+        owner.addEventListener("reset", reset);
+        return () => { owner.removeEventListener("reset", reset); timers.forEach(clearTimeout); };
+    }, [form, value === undefined]);
+    const shared = { form, required, disabled, readOnly, controlSize, precision, order, locale, minDate, maxDate, step, timeInterval: interval, status, hideFieldLabels: true };
+    return _jsxs("div", { ...props, ref: root, className: ["flood-date-time-range-picker", className].filter(Boolean).join(" "), onBlur: event => {
+            onBlur?.(event);
+            if (!event.defaultPrevented && !event.currentTarget.contains(event.relatedTarget))
+                setProposal(undefined);
+        }, children: [_jsx(Fieldset, { legend: label, hideLabel: hideLabel, hint: description, disabled: disabled, children: _jsxs(Stack, { gap: "4", children: [_jsx(DateTimePicker, { ...shared, label: startLabel, dateLabel: startDateLabel, timeLabel: startTimeLabel, value: selected.start, defaultValue: initial.current.start, onValueChange: next => change("start", next), validationMessage: constraint }), _jsx(DateTimePicker, { ...shared, label: endLabel, dateLabel: endDateLabel, timeLabel: endTimeLabel, value: selected.end, defaultValue: initial.current.end, onValueChange: next => change("end", next) })] }) }), [[startDateName, selected.start.date], [startTimeName, selected.start.time], [endDateName, selected.end.date], [endTimeName, selected.end.time]].map(([name, part], index) => name && _jsx("input", { type: "hidden", name: name, form: form, value: accepted ? part : "", disabled: disabled }, index))] });
+});

package/dist/date-value.d.ts

@@ -0,0 +1,10 @@
+/** Gregorian civil dates, deliberately independent of Date, time zones and calendars. */
+export type DateSegment = "year" | "month" | "day";
+export type DateParts = Record<DateSegment, string>;
+export declare const emptyDateParts: () => DateParts;
+export declare function daysInMonth(year: number, month: number): number;
+export declare function canonicalDate(parts: DateParts): string | undefined;
+export declare function parseDate(value: string): DateParts | undefined;
+export declare const dateInRange: (value: string, min?: string, max?: string) => boolean;
+export declare const isEmptyDate: (parts: DateParts) => boolean;
+export declare function stepDatePart(parts: DateParts, part: DateSegment, direction: number, edge?: "start" | "end"): DateParts;