@flood-md/react 0.2.6 → 0.2.8

package/dist/time-field.js

@@ -0,0 +1,176 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useEffect, useId, useImperativeHandle, useRef, useState } from "react";
+import { Label } from "./index.js";
+import { mergeDescriptions, resolveFieldStatus } from "./field-state.js";
+import { canonicalTime, emptyTimeParts, isEmptyTime, parseTime, stepTimePart, timeInRange, timeOnStep } from "./time-value.js";
+const cx = (...values) => values.filter(Boolean).join(" ");
+export const SegmentedTimeField = /* @__PURE__ */ forwardRef(function SegmentedTimeField({ label, end, hideLabel = false, value, defaultValue = "", onValueChange, precision = "minute", min, max, step: explicitStep, required = false, readOnly = false, disabled = false, name, form, controlSize = "md", invalid = false, status, description, segmentLabels, messages, id: explicitId, className, onKeyDown, onPaste, onBlur, "aria-describedby": describedBy, "aria-invalid": ariaInvalid, ...props }, forwardedRef) {
+    if (precision !== "minute" && precision !== "second")
+        throw new Error("Flood TimeField precision must be minute or second");
+    if (!label.trim())
+        throw new Error("Flood TimeField requires a nonempty label");
+    const step = explicitStep ?? (precision === "minute" ? 60 : 1);
+    if (!Number.isSafeInteger(step) || step <= 0 || (precision === "minute" && step % 60 !== 0))
+        throw new Error("Flood TimeField step must be positive integer seconds compatible with precision");
+    for (const [key, entry] of [["value", value], ["defaultValue", defaultValue], ["min", min], ["max", max]]) {
+        if (entry !== undefined && entry !== "" && !parseTime(entry, precision))
+            throw new Error(`Flood TimeField ${key} must match its canonical 24-hour precision`);
+    }
+    if (min === "" || max === "" || (min && max && min > max))
+        throw new Error("Flood TimeField requires ordered same-day bounds");
+    const labels = { hour: segmentLabels?.hour ?? "Hour", minute: segmentLabels?.minute ?? "Minute", second: segmentLabels?.second ?? "Second" };
+    if (!Object.values(labels).every(text => text.trim()) || (messages && Object.values(messages).some(text => text !== undefined && !text.trim())))
+        throw new Error("Flood TimeField segment labels and supplied messages must be nonempty");
+    const generated = useId(), id = explicitId ?? `flood-time-${generated}`;
+    const root = useRef(null), bridge = useRef(null), inputs = useRef({}), lastFocused = useRef("hour");
+    useImperativeHandle(forwardedRef, () => root.current, []);
+    const ordered = precision === "second" ? ["hour", "minute", "second"] : ["hour", "minute"];
+    const initial = useRef(defaultValue), [local, setLocal] = useState(defaultValue), committed = value ?? local;
+    const [parts, setParts] = useState(() => parseTime(committed, precision) ?? emptyTimeParts());
+    const [touched, setTouched] = useState(false), [inheritedDisabled, setInheritedDisabled] = useState(false);
+    const effectiveDisabled = disabled || inheritedDisabled, composing = useRef(undefined), snapshot = useRef(parts), lastPublished = useRef(committed);
+    const settled = composing.current ? snapshot.current : parts, canonical = canonicalTime(settled, precision), empty = isEmptyTime(settled, precision);
+    const inRange = Boolean(canonical && timeInRange(canonical, min, max)), onStep = Boolean(canonical && timeOnStep(settled, step, min, precision));
+    const proposal = empty ? "" : canonical && inRange && onStep ? canonical : undefined;
+    const pendingAcceptance = value !== undefined && proposal !== undefined && proposal !== value;
+    const message = pendingAcceptance ? messages?.invalid ?? "Enter a valid time." : empty ? required ? messages?.required ?? "Enter a time." : "" : !canonical ? messages?.invalid ?? "Enter a valid time." : !inRange ? messages?.outOfRange ?? "Enter a time within the allowed range." : !onStep ? messages?.stepMismatch ?? "Enter a time matching the allowed step." : "";
+    const current = useRef({ value, committed, parts });
+    current.current = { value, committed, parts };
+    useEffect(() => {
+        if (value !== undefined && value !== lastPublished.current)
+            setParts(parseTime(value, precision) ?? emptyTimeParts());
+        if (value !== undefined)
+            lastPublished.current = value;
+    }, [value, precision]);
+    useEffect(() => {
+        for (const part of ["hour", "minute", "second"])
+            inputs.current[part]?.setCustomValidity(part === "hour" && !effectiveDisabled && !readOnly ? message : "");
+    }, [message, effectiveDisabled, readOnly, precision]);
+    useEffect(() => {
+        const node = inputs.current.hour;
+        if (!node)
+            return;
+        const update = () => setInheritedDisabled(node.matches(":disabled"));
+        update();
+        const observer = new node.ownerDocument.defaultView.MutationObserver(update);
+        for (let ancestor = node.parentElement; ancestor; ancestor = ancestor.parentElement)
+            if (ancestor.localName === "fieldset")
+                observer.observe(ancestor, { attributes: true, attributeFilter: ["disabled"] });
+        return () => observer.disconnect();
+    }, [disabled]);
+    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 || !root.current)
+                    return;
+                const next = current.current.value === undefined ? initial.current : current.current.committed;
+                if (current.current.value === undefined)
+                    setLocal(next);
+                composing.current = undefined;
+                setParts(parseTime(next, precision) ?? emptyTimeParts());
+                setTouched(false);
+                lastPublished.current = next;
+            }, 0);
+            timers.add(timer);
+        };
+        owner.addEventListener("reset", reset);
+        return () => { owner.removeEventListener("reset", reset); timers.forEach(clearTimeout); };
+    }, [form, precision]);
+    const blocked = () => Boolean(readOnly || effectiveDisabled || inputs.current.hour?.matches(":disabled"));
+    const select = (part) => { const node = inputs.current[part]; node?.focus({ preventScroll: true }); node?.select(); };
+    const change = (next) => {
+        if (blocked())
+            return;
+        setParts(next);
+        const time = canonicalTime(next, precision), nextValue = time && timeInRange(time, min, max) && timeOnStep(next, step, min, precision) ? time : "";
+        if (value === undefined)
+            setLocal(nextValue);
+        if (lastPublished.current !== nextValue) {
+            lastPublished.current = nextValue;
+            onValueChange?.(nextValue);
+        }
+    };
+    const edit = (part, raw) => {
+        if (!/^\d*$/.test(raw))
+            return;
+        const text = raw.slice(0, 2);
+        change({ ...current.current.parts, [part]: text });
+        const next = ordered[ordered.indexOf(part) + 1];
+        if (text.length === 2 && next)
+            select(next);
+    };
+    const errorShown = touched && !effectiveDisabled && !readOnly && Boolean(message), resolvedStatus = resolveFieldStatus(status, invalid || errorShown, ariaInvalid);
+    const descriptionId = description ? `${id}-description` : undefined, errorId = errorShown ? `${id}-error` : undefined;
+    const descriptions = mergeDescriptions(describedBy, descriptionId, errorId);
+    return _jsxs("div", { ...props, ref: root, id: id, className: cx("flood-time-field", className), "data-disabled": effectiveDisabled || undefined, onBlur: event => {
+            onBlur?.(event);
+            if (event.defaultPrevented || event.currentTarget.contains(event.relatedTarget) || composing.current)
+                return;
+            setTouched(true);
+            const draft = canonicalTime(current.current.parts, precision), isEmpty = isEmptyTime(current.current.parts, precision);
+            if (value !== undefined && (isEmpty || (draft && timeInRange(draft, min, max) && timeOnStep(current.current.parts, step, min, precision))) && (isEmpty ? "" : draft) !== value) {
+                setParts(parseTime(value, precision) ?? emptyTimeParts());
+                lastPublished.current = value;
+            }
+            else if (draft && timeInRange(draft, min, max) && timeOnStep(current.current.parts, step, min, precision))
+                setParts(parseTime(draft, precision));
+        }, onKeyDown: event => {
+            onKeyDown?.(event);
+            if (event.defaultPrevented || event.nativeEvent.isComposing || composing.current || event.keyCode === 229 || event.altKey || event.ctrlKey || event.metaKey || event.shiftKey)
+                return;
+            const target = event.target, part = target.getAttribute("data-time-segment");
+            if (!part || inputs.current[part] !== target)
+                return;
+            const index = ordered.indexOf(part), rtl = 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") && ordered[index + offset]) {
+                event.preventDefault();
+                select(ordered[index + offset]);
+                return;
+            }
+            if (readOnly && event.key === "Backspace") {
+                event.preventDefault();
+                return;
+            }
+            if (blocked())
+                return;
+            if (["ArrowUp", "ArrowDown", "Home", "End"].includes(event.key)) {
+                event.preventDefault();
+                change(stepTimePart(current.current.parts, precision, part, event.key === "ArrowDown" ? -1 : 1, step, min, max, event.key === "Home" ? "start" : event.key === "End" ? "end" : undefined));
+                target.select();
+            }
+            else if (event.key === "Backspace" && !parts[part] && index > 0) {
+                event.preventDefault();
+                select(ordered[index - 1]);
+            }
+        }, onPaste: event => {
+            onPaste?.(event);
+            if (event.defaultPrevented || blocked() || composing.current || !ordered.some(part => inputs.current[part] === event.target))
+                return;
+            const parsed = parseTime(event.clipboardData.getData("text/plain").trim(), precision);
+            if (parsed) {
+                event.preventDefault();
+                change(parsed);
+            }
+        }, children: [_jsx(Label, { htmlFor: `${id}-hour`, id: `${id}-label`, required: required, className: hideLabel ? "flood-visually-hidden" : undefined, children: label }), _jsxs("div", { role: "group", "aria-labelledby": `${id}-label`, "aria-describedby": descriptions, className: cx("flood-time-field__control", `flood-control--${controlSize}`), "data-status": resolvedStatus, "data-readonly": readOnly || undefined, "data-disabled": effectiveDisabled || undefined, onClick: event => {
+                    if (event.defaultPrevented || effectiveDisabled || inputs.current.hour?.matches(":disabled") || event.target.closest("input,button,a,[role=button]"))
+                        return;
+                    select(ordered.find(part => !current.current.parts[part]) ?? (ordered.includes(lastFocused.current) ? lastFocused.current : "hour"));
+                }, children: [ordered.map((part, index) => _jsxs("span", { className: "flood-time-field__part", children: [index > 0 && _jsx("span", { className: "flood-time-field__separator", "aria-hidden": "true", children: ":" }), _jsx("input", { ref: node => { inputs.current[part] = node; }, id: `${id}-${part}`, "data-time-segment": part, className: "flood-time-field__segment", type: "text", role: "spinbutton", inputMode: "numeric", autoComplete: "off", spellCheck: false, maxLength: 2, form: form, "aria-label": `${label}, ${labels[part]}`, "aria-valuemin": 0, "aria-valuemax": part === "hour" ? 23 : 59, "aria-valuenow": /^\d{1,2}$/.test(parts[part]) && Number(parts[part]) <= (part === "hour" ? 23 : 59) ? Number(parts[part]) : undefined, "aria-valuetext": parts[part] || undefined, "aria-invalid": resolvedStatus === "error" || undefined, "aria-required": required || undefined, "aria-describedby": descriptions, value: parts[part], disabled: disabled, readOnly: readOnly, placeholder: part === "hour" ? "HH" : part === "minute" ? "MM" : "SS", onFocus: event => { lastFocused.current = part; event.currentTarget.select(); }, onClick: event => event.currentTarget.select(), onChange: event => { if (blocked())
+                                    return; const raw = event.currentTarget.value; if (composing.current === part)
+                                    setParts(previous => ({ ...previous, [part]: raw }));
+                                else
+                                    edit(part, raw); }, onCompositionStart: () => { if (blocked())
+                                    return; snapshot.current = current.current.parts; composing.current = part; }, onCompositionEnd: event => { composing.current = undefined; if (blocked()) {
+                                    setParts(snapshot.current);
+                                    return;
+                                } if (/^\d*$/.test(event.currentTarget.value))
+                                    edit(part, event.currentTarget.value);
+                                else
+                                    setParts(snapshot.current); }, onInvalid: () => setTouched(true) })] }, part)), end && _jsx("span", { className: "flood-time-field__end", children: end })] }), _jsx("input", { ref: bridge, type: "hidden", name: name, form: form, value: canonical && (readOnly || inRange && onStep) && (value === undefined || canonical === value) ? canonical : "", disabled: disabled }), description && _jsx("div", { id: descriptionId, className: "flood-time-field__description", children: description }), errorShown && _jsx("div", { id: errorId, role: "alert", className: "flood-time-field__error", children: message })] });
+});

package/dist/time-picker.d.ts

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

package/dist/time-picker.js

@@ -0,0 +1,83 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useEffect, useImperativeHandle, useLayoutEffect, useRef, useState } from "react";
+import { TimeField, Popover, IconButton, ListBox, ScrollArea } from "./index.js";
+import { parseTime, timeSeconds } from "./time-value.js";
+const useBrowserLayoutEffect = typeof window === "undefined" ? useEffect : useLayoutEffect;
+const triggerSizes = { sm: "xs", md: "sm", lg: "md", xl: "lg" };
+export const ClockTimePicker = /* @__PURE__ */ forwardRef(function ClockTimePicker({ label, value, defaultValue = "", onValueChange, precision = "minute", step: explicitStep, interval: explicitInterval, min, max, open: controlledOpen, defaultOpen = false, onOpenChange, panelLabel, openTimeLabel, disabled = false, readOnly = false, controlSize = "md", form, className, onKeyDown, ...props }, ref) {
+    const step = explicitStep ?? (precision === "minute" ? 60 : 1), interval = explicitInterval ?? Math.ceil(1800 / step) * step;
+    if (!Number.isSafeInteger(step) || step < 1 || !Number.isSafeInteger(interval) || interval < 1 || interval % step !== 0 || (precision === "minute" && (step % 60 !== 0 || interval % 60 !== 0)))
+        throw new Error("Flood TimePicker interval must be positive seconds compatible with step and precision");
+    if ((min !== undefined && !parseTime(min, precision)) || (max !== undefined && !parseTime(max, precision)) || (min && max && min > max))
+        throw new Error("Flood TimePicker requires canonical ordered clock bounds");
+    const first = min ? timeSeconds(parseTime(min, precision)) : 0, last = max ? timeSeconds(parseTime(max, precision)) : precision === "minute" ? 86340 : 86399;
+    const count = Math.floor((last - first) / interval) + 1;
+    if (count > 1000)
+        throw new Error("Flood TimePicker interval must limit the list to at most 1000 options");
+    const options = Array.from({ length: count }, (_, index) => {
+        const seconds = first + index * interval, value = [Math.floor(seconds / 3600), Math.floor(seconds % 3600 / 60), ...(precision === "second" ? [seconds % 60] : [])].map(n => String(n).padStart(2, "0")).join(":");
+        return { value, label: value };
+    });
+    const root = useRef(null), positionReference = useRef(null), list = useRef(null);
+    useImperativeHandle(ref, () => root.current, []);
+    const initial = useRef(defaultValue), [local, setLocal] = useState(defaultValue), [localOpen, setOpen] = useState(defaultOpen), [width, setWidth] = useState(), [inheritedDisabled, setInheritedDisabled] = useState(false);
+    const committed = value ?? local, requestedOpen = controlledOpen ?? localOpen, blocked = disabled || readOnly || inheritedDisabled;
+    const current = useRef({ value, controlledOpen, committed });
+    current.current = { value, controlledOpen, committed };
+    const nativeDisabled = () => root.current?.querySelector("input[data-time-segment]")?.matches(":disabled") ?? false;
+    const request = (next) => { if (next && (blocked || nativeDisabled()))
+        return; if (controlledOpen === undefined)
+        setOpen(next); onOpenChange?.(next); };
+    const change = (next) => { if (blocked || nativeDisabled())
+        return; if (value === undefined)
+        setLocal(next); onValueChange?.(next); };
+    useBrowserLayoutEffect(() => {
+        const control = root.current?.querySelector(".flood-time-field__control");
+        if (!control)
+            return;
+        positionReference.current = control;
+        const update = () => { const next = control.getBoundingClientRect().width; if (next > 0)
+            setWidth(next); };
+        update();
+        const Observer = control.ownerDocument.defaultView?.ResizeObserver, observer = Observer ? new Observer(update) : undefined;
+        observer?.observe(control);
+        return () => { observer?.disconnect(); positionReference.current = null; };
+    }, []);
+    useEffect(() => {
+        const node = root.current;
+        if (!node)
+            return;
+        const update = () => setInheritedDisabled(nativeDisabled());
+        update();
+        const observer = new node.ownerDocument.defaultView.MutationObserver(update);
+        for (let ancestor = node.parentElement; ancestor; ancestor = ancestor.parentElement)
+            if (ancestor.localName === "fieldset")
+                observer.observe(ancestor, { attributes: true, attributeFilter: ["disabled"] });
+        return () => observer.disconnect();
+    }, [disabled]);
+    useEffect(() => { if (blocked && requestedOpen) {
+        if (controlledOpen === undefined)
+            setOpen(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)
+            setLocal(initial.current); if (current.current.controlledOpen === undefined)
+            setOpen(false); }, 0); timers.add(timer); };
+        owner.addEventListener("reset", reset);
+        return () => { owner.removeEventListener("reset", reset); timers.forEach(clearTimeout); };
+    }, [form]);
+    const title = panelLabel ?? `${label} options`;
+    return _jsx(TimeField, { ...props, ref: root, label: label, value: committed, defaultValue: defaultValue, onValueChange: change, precision: precision, step: step, min: min, max: max, form: form, disabled: disabled, readOnly: readOnly, controlSize: controlSize, className: ["flood-time-picker", className].filter(Boolean).join(" "), onKeyDown: event => {
+            onKeyDown?.(event);
+            if (!event.defaultPrevented && !event.nativeEvent.isComposing && event.keyCode !== 229 && event.altKey && event.key === "ArrowDown" && event.target.matches("input[data-time-segment]")) {
+                event.preventDefault();
+                request(true);
+            }
+        }, end: _jsx(Popover, { title: title, chrome: "minimal", align: "end", open: !blocked && requestedOpen, onOpenChange: request, disabled: blocked, initialFocusRef: list, positionReference: positionReference, className: "flood-time-picker__panel", style: { "--flood-time-picker-width": width ? `${width}px` : undefined }, trigger: trigger => _jsx(IconButton, { ...trigger, label: openTimeLabel ?? `Choose time: ${label}`, variant: "ghost", size: triggerSizes[controlSize], children: _jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.75", children: [_jsx("circle", { cx: "12", cy: "12", r: "9" }), _jsx("path", { d: "M12 7v5l3 2" })] }) }), children: _jsx(ScrollArea, { className: "flood-time-picker__scroll", orientation: "vertical", tabIndex: -1, children: _jsx(ListBox, { ref: list, label: title, hideLabel: true, appearance: "plain", selectionBehavior: "manual", options: options, value: options.some(option => option.value === committed) ? committed : "", controlSize: controlSize, onValueChange: next => { change(typeof next === "string" ? next : next[0] ?? ""); request(false); } }) }) }) });
+});

package/dist/time-value.d.ts

@@ -0,0 +1,12 @@
+/** Clock times in one 24-hour day. No Date, locale conversion or timezone arithmetic. */
+export type TimePrecision = "minute" | "second";
+export type TimeSegment = "hour" | "minute" | "second";
+export type TimeParts = Record<TimeSegment, string>;
+export declare const emptyTimeParts: () => TimeParts;
+export declare const isEmptyTime: (parts: TimeParts, precision: TimePrecision) => boolean;
+export declare function canonicalTime(parts: TimeParts, precision: TimePrecision): string | undefined;
+export declare function parseTime(value: string, precision: TimePrecision): TimeParts | undefined;
+export declare const timeSeconds: (parts: TimeParts) => number;
+export declare const timeInRange: (value: string, min?: string, max?: string) => boolean;
+export declare const timeOnStep: (parts: TimeParts, step: number, min?: string, precision?: TimePrecision) => boolean;
+export declare function stepTimePart(parts: TimeParts, precision: TimePrecision, part: TimeSegment, direction: number, step: number, min?: string, max?: string, edge?: "start" | "end"): TimeParts;

package/dist/time-value.js

@@ -0,0 +1,36 @@
+export const emptyTimeParts = () => ({ hour: "", minute: "", second: "" });
+export const isEmptyTime = (parts, precision) => !parts.hour && !parts.minute && (precision === "minute" || !parts.second);
+export function canonicalTime(parts, precision) {
+    const names = precision === "second" ? ["hour", "minute", "second"] : ["hour", "minute"];
+    if (names.some(name => !/^\d{1,2}$/.test(parts[name]) || Number(parts[name]) > (name === "hour" ? 23 : 59)))
+        return;
+    return names.map(name => parts[name].padStart(2, "0")).join(":");
+}
+export function parseTime(value, precision) {
+    if (!(precision === "second" ? /^\d{2}:\d{2}:\d{2}$/ : /^\d{2}:\d{2}$/).test(value))
+        return;
+    const [hour, minute, second = ""] = value.split(":");
+    const parts = { hour, minute, second };
+    return canonicalTime(parts, precision) === value ? parts : undefined;
+}
+export const timeSeconds = (parts) => Number(parts.hour) * 3600 + Number(parts.minute) * 60 + Number(parts.second);
+export const timeInRange = (value, min, max) => (!min || value >= min) && (!max || value <= max);
+export const timeOnStep = (parts, step, min, precision = "minute") => (timeSeconds(parts) - (min ? timeSeconds(parseTime(min, precision)) : 0)) % step === 0;
+function fromSeconds(seconds, precision) {
+    return { hour: String(Math.floor(seconds / 3600)).padStart(2, "0"), minute: String(Math.floor(seconds % 3600 / 60)).padStart(2, "0"), second: precision === "second" ? String(seconds % 60).padStart(2, "0") : "" };
+}
+export function stepTimePart(parts, precision, part, direction, step, min, max, edge) {
+    const base = min ? timeSeconds(parseTime(min, precision)) : 0;
+    const ceiling = max ? timeSeconds(parseTime(max, precision)) : precision === "second" ? 86399 : 86340;
+    const last = Math.floor((ceiling - base) / step);
+    if (edge)
+        return fromSeconds(base + (edge === "start" ? 0 : last) * step, precision);
+    if (isEmptyTime(parts, precision))
+        return fromSeconds(direction > 0 ? base : base + last * step, precision);
+    const bounded = (name) => /^\d{1,2}$/.test(parts[name]) ? Math.min(Number(parts[name]), name === "hour" ? 23 : 59) : 0;
+    const current = bounded("hour") * 3600 + bounded("minute") * 60 + (precision === "second" ? bounded("second") : 0);
+    const unit = part === "hour" ? 3600 : part === "minute" ? 60 : 1;
+    const proposed = current + direction * Math.max(step, unit);
+    const position = direction > 0 ? Math.ceil((proposed - base) / step) : Math.floor((proposed - base) / step);
+    return fromSeconds(base + Math.max(0, Math.min(last, position)) * step, precision);
+}

package/dist/toolbar.js

@@ -3,7 +3,7 @@ import { forwardRef, useEffect, useImperativeHandle, useLayoutEffect, useRef } f
 const useBrowserLayoutEffect = typeof window === "undefined" ? useEffect : useLayoutEffect;
 const selector = 'button:not([role]),button[role="button"],a[href]:not([role]),a[href][role="link"]';
 const independent = '[role="menu"],[role="tablist"],[role="radiogroup"],[role="listbox"],[role="combobox"],.flood-toggle-group';
-export const RovingToolbar = forwardRef(function RovingToolbar({ label, orientation = "horizontal", loop = true, className, onKeyDown, onKeyDownCapture, onFocus, ...props }, ref) {
+export const RovingToolbar = /* @__PURE__ */ forwardRef(function RovingToolbar({ label, orientation = "horizontal", loop = true, className, onKeyDown, onKeyDownCapture, onFocus, ...props }, ref) {
     const root = useRef(null), current = useRef(null), within = useRef(false);
     const refresh = useRef(() => []);
     useImperativeHandle(ref, () => root.current, []);

package/dist/tree-select.d.ts

@@ -0,0 +1,3 @@
+import { type TreeSelectProps } from "./index.js";
+/** A single hierarchical form selection. Tree owns navigation; the select owns submission. */
+export declare const HierarchicalSelect: import("react").ForwardRefExoticComponent<TreeSelectProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/tree-select.js

@@ -0,0 +1,113 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useCallback, useEffect, useId, useImperativeHandle, useLayoutEffect, useRef, useState } from "react";
+import { Popover, ScrollArea, Tree } from "./index.js";
+import { mergeDescriptions, resolveFieldStatus } from "./field-state.js";
+const useBrowserLayoutEffect = typeof window === "undefined" ? useEffect : useLayoutEffect;
+/** A single hierarchical form selection. Tree owns navigation; the select owns submission. */
+export const HierarchicalSelect = /* @__PURE__ */ forwardRef(function HierarchicalSelect({ label, hideLabel = false, items, value, defaultValue = "", onValueChange, placeholder = "Choose an item…", name, form, required = false, disabled = false, readOnly = false, invalid, status, controlSize = "md", open: controlledOpen, defaultOpen = false, onOpenChange, expandedValues, defaultExpandedValues = [], onExpandedValuesChange, emptyMessage = "No items.", invalidSelectionMessage = "Choose an item.", id: explicitId, className, "aria-describedby": describedBy, "aria-invalid": ariaInvalid, onKeyDown, ...props }, forwardedRef) {
+    if (![label, placeholder, emptyMessage, invalidSelectionMessage].every(text => text.trim()))
+        throw new Error("Flood TreeSelect requires nonempty labels and messages");
+    const entries = new Map();
+    const collect = (nodes, ancestors) => {
+        if (ancestors.length > 256)
+            throw new Error("Flood TreeSelect nesting exceeds the supported depth");
+        for (const item of nodes) {
+            if (!item.value.trim() || !item.label.trim() || entries.has(item.value))
+                throw new Error("Flood TreeSelect items need globally unique nonempty values and labels");
+            entries.set(item.value, { item, ancestors });
+            if (item.children)
+                collect(item.children, [...ancestors, item.value]);
+        }
+    };
+    collect(items, []);
+    const generated = useId(), id = explicitId ?? `flood-tree-select-${generated}`;
+    const root = useRef(null), native = useRef(null), trigger = useRef(null), initialFocus = useRef(null);
+    const overlayAnchor = useRef(undefined);
+    const setTrigger = useCallback((node) => { trigger.current = node; overlayAnchor.current?.(node); }, []);
+    useImperativeHandle(forwardedRef, () => root.current, []);
+    const initial = useRef(defaultValue), [local, setLocal] = useState(defaultValue), [localOpen, setLocalOpen] = useState(defaultOpen);
+    const [width, setWidth] = useState(), [validation, setValidation] = useState(""), [inheritedDisabled, setInheritedDisabled] = useState(false);
+    const requested = value ?? local, entry = entries.get(requested), selected = entry?.item.selectable === false ? undefined : entry?.item;
+    const committed = selected?.value ?? "", blocked = disabled || readOnly || inheritedDisabled, requestedOpen = controlledOpen ?? localOpen;
+    const [expanded, setExpanded] = useState(() => [...new Set([...defaultExpandedValues, ...(entries.get(value ?? defaultValue)?.ancestors ?? [])])]);
+    const current = useRef({ value, controlledOpen, onOpenChange, requestedOpen, onValueChange });
+    current.current = { value, controlledOpen, onOpenChange, requestedOpen, onValueChange };
+    const requestOpen = (next) => {
+        if (next && (blocked || native.current?.matches(":disabled")))
+            return;
+        if (current.current.controlledOpen === undefined)
+            setLocalOpen(next);
+        if (next !== current.current.requestedOpen)
+            current.current.onOpenChange?.(next);
+    };
+    const choose = (next) => {
+        const key = typeof next === "string" ? next : next[0] ?? "", choice = entries.get(key)?.item;
+        if (blocked || native.current?.matches(":disabled") || !choice || choice.disabled || choice.readOnly || choice.selectable === false)
+            return;
+        if (current.current.value === undefined)
+            setLocal(key);
+        if (key !== committed)
+            current.current.onValueChange?.(key);
+        setValidation("");
+        requestOpen(false);
+    };
+    useBrowserLayoutEffect(() => {
+        const node = trigger.current;
+        if (!node)
+            return;
+        const update = () => { const next = node.getBoundingClientRect().width; if (next > 0)
+            setWidth(previous => previous === next ? previous : next); };
+        update();
+        const Observer = node.ownerDocument.defaultView?.ResizeObserver, observer = Observer ? new Observer(update) : undefined;
+        observer?.observe(node);
+        return () => observer?.disconnect();
+    }, []);
+    useBrowserLayoutEffect(() => {
+        const node = native.current;
+        if (!node)
+            return;
+        node.setCustomValidity(!readOnly && required && !committed ? invalidSelectionMessage : "");
+        if (validation && node.validity.valid)
+            setValidation("");
+    });
+    useEffect(() => {
+        const node = native.current, Observer = node?.ownerDocument.defaultView?.MutationObserver;
+        if (!node || !Observer)
+            return;
+        const update = () => setInheritedDisabled(node.matches(":disabled")), observer = new Observer(update);
+        update();
+        let ancestor = node.parentElement;
+        while (ancestor) {
+            if (ancestor.localName === "fieldset")
+                observer.observe(ancestor, { attributes: true, attributeFilter: ["disabled"] });
+            ancestor = ancestor.parentElement;
+        }
+        return () => observer.disconnect();
+    }, []);
+    useEffect(() => { if (blocked && requestedOpen)
+        requestOpen(false); }, [blocked, requestedOpen]);
+    useEffect(() => {
+        const owner = native.current?.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)
+            setLocal(initial.current); setValidation(""); requestOpen(false); }, 0); timers.add(timer); };
+        owner.addEventListener("reset", reset);
+        return () => { owner.removeEventListener("reset", reset); for (const timer of timers)
+            clearTimeout(timer); };
+    }, [form]);
+    const described = mergeDescriptions(describedBy, readOnly && `${id}-readonly`, required && `${id}-required`, validation && `${id}-validation`);
+    return _jsxs("div", { ...props, ref: root, id: id, className: ["flood-tree-select", className].filter(Boolean).join(" "), "data-disabled": disabled || inheritedDisabled || undefined, "data-readonly": readOnly || undefined, onKeyDown: event => { onKeyDown?.(event); if (event.defaultPrevented || blocked || event.nativeEvent.isComposing || event.keyCode === 229)
+            return; if (event.target === trigger.current && (event.key === "ArrowDown" || event.key === "ArrowUp")) {
+            event.preventDefault();
+            requestOpen(true);
+        } }, children: [_jsx("label", { htmlFor: `${id}-trigger`, id: `${id}-label`, className: ["flood-label", hideLabel ? "flood-visually-hidden" : ""].filter(Boolean).join(" "), children: label }), _jsx(Popover, { title: label, className: "flood-tree-select__panel", open: !blocked && requestedOpen, onOpenChange: requestOpen, disabled: blocked, initialFocusRef: initialFocus, style: { "--flood-tree-select-width": width === undefined ? undefined : `${width}px` }, trigger: overlay => {
+                    overlayAnchor.current = overlay.ref;
+                    return _jsx("span", { className: `flood-select flood-select--custom flood-control--${controlSize}`, children: _jsx("button", { ...overlay, ref: setTrigger, id: `${id}-trigger`, className: `flood-input flood-select__control flood-control--${controlSize}`, "aria-labelledby": `${id}-label ${id}-value`, "aria-describedby": described, "aria-invalid": invalid || status === "error" || Boolean(validation) || ariaInvalid || undefined, "data-status": resolveFieldStatus(status, invalid || Boolean(validation), ariaInvalid), "data-readonly": readOnly || undefined, "aria-disabled": readOnly || undefined, children: _jsx("span", { id: `${id}-value`, className: "flood-select__value", "data-placeholder": !selected || undefined, children: selected?.label ?? placeholder }) }) });
+                }, children: _jsx(ScrollArea, { orientation: "vertical", className: "flood-tree-select__scroll", tabIndex: -1, children: _jsx(Tree, { ref: node => { initialFocus.current = node?.querySelector('[role="treeitem"][tabindex="0"], [role="tree"][tabindex="0"]') ?? null; }, label: label, hideLabel: true, items: items, value: committed, onValueChange: choose, controlSize: controlSize, emptyMessage: emptyMessage, expandedValues: expandedValues ?? expanded, onExpandedValuesChange: next => { if (expandedValues === undefined)
+                            setExpanded(next); onExpandedValuesChange?.(next); }, onClick: event => { const target = event.target.closest('[role="treeitem"]'); if (target?.dataset.treeValue === committed && !event.target.closest('[data-tree-toggle="true"]'))
+                            requestOpen(false); }, onKeyDown: event => { if ((event.key === "Enter" || event.key === " ") && event.target.dataset.treeValue === committed)
+                            requestOpen(false); } }) }) }), _jsxs("select", { ref: native, name: name, form: form, value: committed, disabled: disabled, required: required && !readOnly, hidden: true, "aria-hidden": "true", tabIndex: -1, onChange: () => { }, onInvalid: event => { event.preventDefault(); setValidation(event.currentTarget.validationMessage); trigger.current?.focus(); }, children: [_jsx("option", { value: "" }), [...entries.values()].filter(({ item }) => item.selectable !== false).map(({ item }) => _jsx("option", { value: item.value, children: item.label }, item.value))] }), _jsx("span", { hidden: true, id: `${id}-readonly`, children: "Selection is read only." }), _jsx("span", { hidden: true, id: `${id}-required`, children: "Required." }), validation && _jsx("span", { id: `${id}-validation`, className: "flood-tree-select__validation", role: "alert", children: validation })] });
+});

package/dist/tree.d.ts

@@ -0,0 +1,3 @@
+import type { TreeProps } from "./index.js";
+/** Application selection, not navigation or a form field; expansion and selection are independent. */
+export declare const SelectionTree: import("react").ForwardRefExoticComponent<TreeProps & import("react").RefAttributes<HTMLDivElement>>;