@flood-md/react 0.2.6 → 0.2.9

package/dist/navigation.js

@@ -3,7 +3,7 @@ import { forwardRef, useEffect, useId, useImperativeHandle, useLayoutEffect, use
 import { Button, IconSlot, Link, ScrollArea } from "./index.js";
 import { pageWindow } from "./page-window.js";
 const useBrowserLayoutEffect = typeof window === "undefined" ? useEffect : useLayoutEffect;
-export const TabNavigation = forwardRef(function TabNavigation({ label, items, value, defaultValue, onValueChange, activationMode = "automatic", orientation = "horizontal", controlSize = "md", disabled = false, iconOnly = false, className, onKeyDown, id: explicitId, ...props }, ref) {
+export const TabNavigation = /* @__PURE__ */ forwardRef(function TabNavigation({ label, items, value, defaultValue, onValueChange, activationMode = "automatic", orientation = "horizontal", controlSize = "md", disabled = false, iconOnly = false, className, onKeyDown, id: explicitId, ...props }, ref) {
     const generated = useId(), id = explicitId ?? `flood-tabs-${generated}`;
     const [local, setLocal] = useState(defaultValue), [focused, setFocused] = useState();
     const root = useRef(null), list = useRef(null), focusedPanel = useRef(undefined);
@@ -49,10 +49,10 @@ export const TabNavigation = forwardRef(function TabNavigation({ label, items, v
                         setFocused(undefined); }, children: items.map((item, index) => _jsxs(Button, { variant: "ghost", size: controlSize, id: `${id}-tab-${index}`, type: "button", role: "tab", "aria-selected": item.value === selected, "aria-controls": `${id}-panel-${index}`, "data-value": item.value, disabled: disabled || item.disabled, tabIndex: item.value === tabStop ? 0 : -1, "aria-label": iconOnly ? item.label : undefined, className: `flood-tab${iconOnly ? " flood-icon-button" : ""}`, onFocus: () => setFocused(item.value), onClick: () => select(item.value), children: [item.icon && _jsx(IconSlot, { size: controlSize, children: item.icon }), !iconOnly && item.label] }, item.value)) }) }), items.map((item, index) => _jsx("div", { id: `${id}-panel-${index}`, role: "tabpanel", "aria-labelledby": `${id}-tab-${index}`, tabIndex: 0, hidden: item.value !== selected, className: "flood-tabs__panel", onFocusCapture: () => { focusedPanel.current = item.value; }, onBlurCapture: event => { if (!event.currentTarget.hidden)
                     focusedPanel.current = undefined; }, children: item.content }, item.value))] });
 });
-export const BreadcrumbNavigation = forwardRef(function BreadcrumbNavigation({ items, label = "Breadcrumb", separator = "/", className, ...props }, ref) {
+export const BreadcrumbNavigation = /* @__PURE__ */ forwardRef(function BreadcrumbNavigation({ items, label = "Breadcrumb", separator = "/", className, ...props }, ref) {
     return _jsx("nav", { ...props, ref: ref, "aria-label": label, className: ["flood-breadcrumb", className].filter(Boolean).join(" "), children: _jsx("ol", { children: items.map((item, index) => _jsxs("li", { children: [index > 0 && _jsx("span", { className: "flood-breadcrumb__separator", "aria-hidden": "true", children: separator }), item.href !== undefined ? _jsx(Link, { href: item.href, "aria-current": index === items.length - 1 ? "page" : undefined, children: item.label }) : _jsx("span", { "aria-current": index === items.length - 1 ? "page" : undefined, children: item.label })] }, index)) }) });
 });
-export const PageNavigation = forwardRef(function PageNavigation({ page, pageCount, onPageChange, getHref, siblingCount = 1, controlSize = "sm", disabled = false, label = "Pagination", previousLabel = "Previous page", nextLabel = "Next page", pageLabel = page => `Page ${page}`, className, ...props }, ref) {
+export const PageNavigation = /* @__PURE__ */ forwardRef(function PageNavigation({ page, pageCount, onPageChange, getHref, siblingCount = 1, controlSize = "sm", disabled = false, label = "Pagination", previousLabel = "Previous page", nextLabel = "Next page", pageLabel = page => `Page ${page}`, className, ...props }, ref) {
     const pages = pageWindow(page, pageCount, siblingCount);
     const control = (target, text, name, unavailable = false) => {
         const inactive = disabled || unavailable, current = target === page;

package/dist/numeric-input.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef, useEffect, useImperativeHandle, useRef, useState } from "react";
 /** The browser owns decimal stepping, validity, editing and form submission. */
-export const NumericStepper = forwardRef(function NumericStepper({ inputComponent: Group, buttonComponent: Action, value, defaultValue = 0, onValueChange, min, max, step = 1, disabled, readOnly, controlSize = "md", decreaseLabel = "Decrease value", increaseLabel = "Increase value", className, onBlur, onKeyDown, ...props }, ref) {
+export const NumericStepper = /* @__PURE__ */ forwardRef(function NumericStepper({ inputComponent: Group, buttonComponent: Action, value, defaultValue = 0, onValueChange, min, max, step = 1, disabled, readOnly, controlSize = "md", decreaseLabel = "Decrease value", increaseLabel = "Increase value", className, onBlur, onKeyDown, ...props }, ref) {
     if (!Number.isFinite(step) || step <= 0 || (min !== undefined && !Number.isFinite(min)) || (max !== undefined && !Number.isFinite(max)) || (min !== undefined && max !== undefined && min > max))
         throw new Error("Flood NumberInput requires finite bounds and a positive step");
     for (const number of [value, defaultValue])

package/dist/overlays.js

@@ -1,6 +1,6 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef, useCallback, useEffect, useId, useImperativeHandle, useLayoutEffect, useRef, useState } from "react";
-import { IconButton, ScrollArea } from "./index.js";
+import { IconButton, ScrollArea, VisuallyHidden } from "./index.js";
 import { positionLayer, registerLayer, returnFocus, lockScroll, tabbables } from "./overlay-runtime.js";
 import { mergeDescriptions } from "./field-state.js";
 const useBrowserLayoutEffect = typeof window === "undefined" ? useEffect : useLayoutEffect;
@@ -21,7 +21,7 @@ function focusContent(panel, preferred) {
 function OverlayClose({ label, onClick }) {
     return _jsx(IconButton, { label: label, size: "sm", variant: "subtle", className: "flood-overlay-close", onClick: onClick, children: _jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.75", strokeLinecap: "round", "aria-hidden": "true", focusable: "false", children: _jsx("path", { d: "m4 4 16 16M20 4 4 20" }) }) });
 }
-export const AnchoredOverlay = forwardRef(function AnchoredOverlay(allProps, forwardedRef) {
+export const AnchoredOverlay = /* @__PURE__ */ forwardRef(function AnchoredOverlay(allProps, forwardedRef) {
     const { kind, trigger, side = "bottom", align = "start", disabled = false, id: explicitId, className, style, ...native } = allProps;
     const pop = allProps, tip = allProps;
     const [local, setLocal] = useState(kind === "popover" ? Boolean(pop.defaultOpen) : false);
@@ -38,7 +38,8 @@ export const AnchoredOverlay = forwardRef(function AnchoredOverlay(allProps, for
         suppressed.current = true;
         overPanel.current = false;
     } request(false); };
-    const current = useCurrent({ close, request, disabled, open, initialFocusRef: pop.initialFocusRef });
+    const current = useCurrent({ close, request, disabled, open, initialFocusRef: pop.initialFocusRef, positionReference: pop.positionReference });
+    const positionReference = () => { const node = current.current.positionReference?.current; return node?.isConnected && node.ownerDocument === panel.current?.ownerDocument ? node : anchor.current; };
     useImperativeHandle(forwardedRef, () => panel.current, []);
     useEffect(() => () => clearTimeout(timer.current), []);
     useEffect(() => { if (kind === "tooltip" && disabled) {
@@ -71,13 +72,13 @@ export const AnchoredOverlay = forwardRef(function AnchoredOverlay(allProps, for
                 throw new Error("Flood overlays require the native Popover API");
             element.style.visibility = "hidden";
             element.showPopover();
-            positionLayer(anchor.current, element, side, align);
+            positionLayer(positionReference(), element, side, align);
             unregister = registerLayer(document, { panel: element, anchor: () => anchor.current, close: () => current.current.close(), tooltip: kind === "tooltip" });
             if (kind === "popover")
                 focusContent(element, current.current.initialFocusRef?.current);
             const update = () => { if (!alive)
                 return; if (anchor.current?.isConnected)
-                positionLayer(anchor.current, element, side, align); frame = view.requestAnimationFrame(update); };
+                positionLayer(positionReference(), element, side, align); frame = view.requestAnimationFrame(update); };
             frame = view.requestAnimationFrame(update);
         };
         start();
@@ -87,7 +88,7 @@ export const AnchoredOverlay = forwardRef(function AnchoredOverlay(allProps, for
             current.current.request(false);
             queueMicrotask(() => { if (alive && current.current.open && element.isConnected && !element.matches(":popover-open") && anchor.current?.isConnected) {
                 element.showPopover();
-                positionLayer(anchor.current, element, side, align);
+                positionLayer(positionReference(), element, side, align);
                 if (kind === "popover")
                     focusContent(element, current.current.initialFocusRef?.current);
             } });
@@ -104,16 +105,16 @@ export const AnchoredOverlay = forwardRef(function AnchoredOverlay(allProps, for
             onPointerLeave: () => { hovered.current = false; leave(); }, onFocus: () => { focused.current = true; enter(true); }, onBlur: () => { focused.current = false; leave(); },
         } : { disabled, "aria-haspopup": "dialog", "aria-expanded": open, "aria-controls": id, onClick: () => request(!open) }) };
     // Remove component-only props before forwarding native div attributes.
-    const { title: unusedTitle, content: unusedContent, children: unusedChildren, open: unusedOpen, defaultOpen: unusedDefault, onOpenChange: unusedChange, delay: unusedDelay, closeLabel: unusedClose, initialFocusRef: unusedFocus, ...attributes } = native;
-    return _jsxs(_Fragment, { children: [trigger(triggerProps), _jsx("div", { ...attributes, ref: panel, id: id, popover: "manual", role: kind === "tooltip" ? "tooltip" : "dialog", "aria-labelledby": kind === "popover" ? `${id}-title` : undefined, tabIndex: kind === "popover" ? -1 : undefined, className: ["flood-overlay-panel", kind === "tooltip" ? "flood-tooltip" : "flood-popover", className].filter(Boolean).join(" "), style: style, onPointerEnter: event => { attributes.onPointerEnter?.(event); if (kind === "tooltip") {
+    const { title: unusedTitle, chrome: unusedChrome, content: unusedContent, children: unusedChildren, open: unusedOpen, defaultOpen: unusedDefault, onOpenChange: unusedChange, delay: unusedDelay, closeLabel: unusedClose, initialFocusRef: unusedFocus, positionReference: unusedPosition, ...attributes } = native;
+    return _jsxs(_Fragment, { children: [trigger(triggerProps), _jsx("div", { ...attributes, ref: panel, id: id, popover: "manual", role: kind === "tooltip" ? "tooltip" : "dialog", "aria-labelledby": kind === "popover" ? `${id}-title` : undefined, tabIndex: kind === "popover" ? -1 : undefined, "data-chrome": kind === "popover" ? pop.chrome : undefined, className: ["flood-overlay-panel", kind === "tooltip" ? "flood-tooltip" : "flood-popover", className].filter(Boolean).join(" "), style: style, onPointerEnter: event => { attributes.onPointerEnter?.(event); if (kind === "tooltip") {
                     overPanel.current = true;
                     clear();
                 } }, onPointerLeave: event => { attributes.onPointerLeave?.(event); if (kind === "tooltip") {
                     overPanel.current = false;
                     leave();
-                } }, children: kind === "tooltip" ? tip.content : _jsxs(_Fragment, { children: [_jsxs("div", { className: "flood-overlay-header", children: [_jsx("h2", { id: `${id}-title`, className: "flood-overlay-title", children: pop.title }), _jsx(OverlayClose, { label: pop.closeLabel ?? "Close", onClick: close })] }), open && _jsx("div", { className: "flood-overlay-body", children: pop.children })] }) })] });
+                } }, children: kind === "tooltip" ? tip.content : _jsxs(_Fragment, { children: [pop.chrome === "minimal" ? _jsx(VisuallyHidden, { children: _jsx("h2", { id: `${id}-title`, children: pop.title }) }) : _jsxs("div", { className: "flood-overlay-header", children: [_jsx("h2", { id: `${id}-title`, className: "flood-overlay-title", children: pop.title }), _jsx(OverlayClose, { label: pop.closeLabel ?? "Close", onClick: close })] }), open && _jsx("div", { className: "flood-overlay-body", children: pop.children })] }) })] });
 });
-export const ModalOverlay = forwardRef(function ModalOverlay({ showCloseButton = true, scrollBody = false, footer, title, description, trigger, children, open: controlled, defaultOpen = false, onOpenChange, disabled = false, closeLabel = "Close", closeOnOutsideClick = true, initialFocusRef, id: explicitId, className, onKeyDown, "aria-describedby": describedBy, ...props }, forwardedRef) {
+export const ModalOverlay = /* @__PURE__ */ forwardRef(function ModalOverlay({ showCloseButton = true, scrollBody = false, footer, title, description, trigger, children, open: controlled, defaultOpen = false, onOpenChange, disabled = false, closeLabel = "Close", closeOnOutsideClick = true, initialFocusRef, id: explicitId, className, onKeyDown, "aria-describedby": describedBy, ...props }, forwardedRef) {
     const [local, setLocal] = useState(defaultOpen), open = controlled ?? local;
     const dialog = useRef(null), anchor = useRef(null), generated = useId(), id = explicitId ?? `flood-dialog-${generated}`;
     const request = (next) => { if (controlled === undefined)

package/dist/range-calendar.d.ts

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

package/dist/range-calendar.js

@@ -0,0 +1,35 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef, useEffect, useState } from "react";
+import { CalendarGrid } from "./calendar.js";
+import { availableDateRange, checkDateRange, completeDateRange, emptyDateRange, orderedDateRange, sameDateRange } from "./date-range-value.js";
+export const DateRangeCalendar = /* @__PURE__ */ forwardRef(function DateRangeCalendar({ value, defaultValue = emptyDateRange(), onValueChange, onRangeSelect, isRangeDisabled, rangeLabels, min, max, isDateDisabled, className, ...props }, ref) {
+    checkDateRange(defaultValue, "defaultValue");
+    if (value !== undefined)
+        checkDateRange(value);
+    const [local, setLocal] = useState(defaultValue), range = value ?? local;
+    const [preview, setPreview] = useState();
+    const anchor = range.start || range.end, partial = !range.start || !range.end;
+    const tentative = anchor && partial && preview ? orderedDateRange(anchor, preview) : undefined;
+    const available = (next) => availableDateRange(next, min, max, isDateDisabled, isRangeDisabled);
+    const unavailable = !!tentative && !available(tentative);
+    const labels = { chooseStart: rangeLabels?.chooseStart ?? "Choose a start date.", chooseEnd: rangeLabels?.chooseEnd ?? "Choose an end date.", unavailable: rangeLabels?.unavailable ?? "This date range is unavailable." };
+    if (!Object.values(labels).every(text => text.trim()))
+        throw new Error("Flood RangeCalendar labels must be nonempty");
+    useEffect(() => setPreview(undefined), [range.start, range.end]);
+    const visual = tentative ?? (completeDateRange(range) ? range : anchor ? { start: anchor, end: anchor } : undefined);
+    return _jsx(CalendarGrid, { ...props, ref: ref, min: min, max: max, isDateDisabled: isDateDisabled, className: ["flood-range-calendar", className].filter(Boolean).join(" "), selectedDate: range.start || range.end, multiple: true, isSelected: date => completeDateRange(range) ? date >= range.start && date <= range.end : date === anchor, dayMetadata: date => ({ rangeStart: visual?.start === date, rangeEnd: visual?.end === date, inRange: !!visual && date >= visual.start && date <= visual.end, preview: !!tentative && date >= tentative.start && date <= tentative.end, unavailable: unavailable && !!tentative && date >= tentative.start && date <= tentative.end }), onDayPreview: setPreview, onDayActivate: date => {
+            const next = anchor && partial ? orderedDateRange(anchor, date) : { start: date, end: "" };
+            if (next.end && !available(next)) {
+                setPreview(date);
+                return;
+            }
+            setPreview(undefined);
+            if (!sameDateRange(next, range)) {
+                if (value === undefined)
+                    setLocal(next);
+                onValueChange?.(next);
+            }
+            if (next.end)
+                onRangeSelect?.(next);
+        }, footer: _jsx("div", { className: "flood-range-calendar__instruction", role: "status", "aria-live": "polite", children: unavailable ? labels.unavailable : anchor && partial ? labels.chooseEnd : labels.chooseStart }) });
+});

package/dist/resizable-panels.d.ts

@@ -0,0 +1,3 @@
+import type { ResizablePanelsProps } from "./index.js";
+/** Two bounded panes with a dedicated separator track; percentages exclude that track. */
+export declare const ResizablePaneGroup: import("react").ForwardRefExoticComponent<ResizablePanelsProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/resizable-panels.js

@@ -0,0 +1,205 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useEffect, useId, useImperativeHandle, useLayoutEffect, useRef, useState } from "react";
+const clamp = (value, min, max) => Math.max(min, Math.min(max, Math.round(value * 1e6) / 1e6));
+const useBrowserLayoutEffect = typeof window === "undefined" ? useEffect : useLayoutEffect;
+const resizeKeys = new Set(["ArrowLeft", "ArrowRight", "ArrowUp", "ArrowDown", "Home", "End"]);
+function lockDocument(document, cursor) {
+    const style = document.documentElement.style;
+    const entries = ["user-select", "-webkit-user-select", "cursor"].map(name => ({ name, value: style.getPropertyValue(name), priority: style.getPropertyPriority(name), owned: name === "cursor" ? cursor : "none" }));
+    for (const entry of entries)
+        style.setProperty(entry.name, entry.owned, "important");
+    return () => { for (const entry of entries) {
+        if (style.getPropertyValue(entry.name) !== entry.owned || style.getPropertyPriority(entry.name) !== "important")
+            continue;
+        if (entry.value)
+            style.setProperty(entry.name, entry.value, entry.priority);
+        else
+            style.removeProperty(entry.name);
+    } };
+}
+/** Two bounded panes with a dedicated separator track; percentages exclude that track. */
+export const ResizablePaneGroup = /* @__PURE__ */ forwardRef(function ResizablePaneGroup({ label, main, secondary, orientation = "horizontal", value, defaultValue = 50, onValueChange, onValueCommit, min = 10, max = 90, step = 1, largeStep = 10, disabled = false, id: explicitId, className, style, onPointerDown, onPointerMove, onPointerUp, onPointerCancel, onLostPointerCapture, onKeyDown, onKeyUp, onBlur, ...props }, forwardedRef) {
+    if (!label.trim())
+        throw new Error("Flood ResizablePanels requires a nonempty separator label");
+    if (orientation !== "horizontal" && orientation !== "vertical")
+        throw new Error("Flood ResizablePanels orientation must be horizontal or vertical");
+    if (![min, max].every(Number.isFinite) || min < 0 || max > 100 || min >= max)
+        throw new Error("Flood ResizablePanels bounds must satisfy 0 <= min < max <= 100");
+    if (![step, largeStep].every(number => Number.isFinite(number) && number > 0))
+        throw new Error("Flood ResizablePanels keyboard steps must be positive finite percentages");
+    for (const entry of [value, defaultValue])
+        if (entry !== undefined && (!Number.isFinite(entry) || entry < 0 || entry > 100))
+            throw new Error("Flood ResizablePanels values must be finite percentages from 0 to 100");
+    const generated = useId(), id = explicitId ?? `flood-resizable-${generated}`, mainId = `${id}-main`, secondaryId = `${id}-secondary`;
+    const root = useRef(null), handle = useRef(null), first = useRef(null), second = useRef(null);
+    useImperativeHandle(forwardedRef, () => root.current, []);
+    const [local, setLocal] = useState(defaultValue), [dragging, setDragging] = useState(false), percent = clamp(value ?? local, min, max);
+    const drag = useRef(undefined), keyboard = useRef(false), alive = useRef(true), restoreSeparatorFocus = useRef(false);
+    const current = useRef({ percent, value, min, max, orientation, disabled, onValueChange, onValueCommit });
+    current.current = { percent, value, min, max, orientation, disabled, onValueChange, onValueCommit };
+    const bindPane = (node, reference, inactive) => {
+        reference.current = node;
+        if (!node)
+            return;
+        if (inactive && node.contains(node.ownerDocument.activeElement))
+            restoreSeparatorFocus.current = true;
+        // Set the native property so React 18 does not receive an unknown boolean prop.
+        node.inert = inactive;
+    };
+    useBrowserLayoutEffect(() => {
+        if (restoreSeparatorFocus.current) {
+            restoreSeparatorFocus.current = false;
+            handle.current?.focus({ preventScroll: true });
+        }
+    });
+    const publish = (next) => {
+        const state = current.current, bounded = clamp(next, state.min, state.max);
+        if (state.value === undefined) {
+            current.current.percent = bounded;
+            setLocal(bounded);
+        }
+        state.onValueChange?.(bounded);
+    };
+    const commitAccepted = () => queueMicrotask(() => { if (alive.current)
+        current.current.onValueCommit?.(current.current.percent); });
+    const finish = (commit, restore = true) => {
+        const gesture = drag.current;
+        if (!gesture)
+            return;
+        drag.current = undefined;
+        gesture.restore();
+        try {
+            if (gesture.handle.hasPointerCapture(gesture.pointerId))
+                gesture.handle.releasePointerCapture(gesture.pointerId);
+        }
+        catch { /* Capture may already be released by the browser or node removal. */ }
+        if (alive.current)
+            setDragging(false);
+        if (!alive.current)
+            return;
+        if (!commit && restore && current.current.value === undefined) {
+            const start = clamp(gesture.initial, current.current.min, current.current.max);
+            if (start !== current.current.percent)
+                publish(start);
+        }
+        if (commit)
+            commitAccepted();
+    };
+    const move = (event) => {
+        const gesture = drag.current;
+        if (!gesture || gesture.pointerId !== event.pointerId || current.current.disabled)
+            return;
+        const a = first.current?.getBoundingClientRect(), b = second.current?.getBoundingClientRect();
+        if (!a || !b)
+            return;
+        const available = gesture.orientation === "horizontal" ? a.width + b.width : a.height + b.height;
+        if (!Number.isFinite(available) || available <= 0)
+            return;
+        const coordinate = gesture.orientation === "horizontal" ? event.clientX : event.clientY;
+        if (!Number.isFinite(coordinate))
+            return;
+        const direction = gesture.orientation === "horizontal" && gesture.rtl ? -1 : 1;
+        const next = clamp(gesture.initial + (coordinate - gesture.origin) * direction / available * 100, current.current.min, current.current.max);
+        if (next !== gesture.requested) {
+            gesture.requested = next;
+            publish(next);
+        }
+    };
+    useEffect(() => {
+        alive.current = true;
+        return () => { alive.current = false; keyboard.current = false; finish(false, false); };
+    }, []);
+    useEffect(() => { if (drag.current)
+        finish(false); keyboard.current = false; }, [disabled, orientation, min, max]);
+    useEffect(() => {
+        if (!dragging || !root.current)
+            return;
+        const document = root.current.ownerDocument, view = document.defaultView;
+        const cancel = () => finish(false), visibility = () => { if (document.hidden)
+            cancel(); };
+        view?.addEventListener("blur", cancel);
+        document.addEventListener("visibilitychange", visibility);
+        return () => { view?.removeEventListener("blur", cancel); document.removeEventListener("visibilitychange", visibility); };
+    }, [dragging]);
+    return _jsxs("div", { ...props, id: id, ref: root, className: ["flood-resizable-panels", className].filter(Boolean).join(" "), "data-orientation": orientation, "data-disabled": disabled || undefined, "data-dragging": dragging || undefined, style: { ...style, "--flood-main-weight": `${percent}fr`, "--flood-secondary-weight": `${100 - percent}fr` }, onPointerDown: event => {
+            onPointerDown?.(event);
+            const separator = handle.current, node = root.current;
+            if (event.defaultPrevented || current.current.disabled || drag.current || event.button !== 0 || event.isPrimary === false || !separator?.contains(event.target) || !node)
+                return;
+            const a = first.current?.getBoundingClientRect(), b = second.current?.getBoundingClientRect(), horizontal = orientation === "horizontal";
+            if (!a || !b || (horizontal ? a.width + b.width : a.height + b.height) <= 0 || !Number.isFinite(horizontal ? event.clientX : event.clientY))
+                return;
+            separator.focus({ preventScroll: true });
+            if (current.current.disabled || current.current.orientation !== orientation || !separator.isConnected)
+                return;
+            try {
+                separator.setPointerCapture(event.pointerId);
+            }
+            catch {
+                return;
+            }
+            event.preventDefault();
+            keyboard.current = false;
+            drag.current = { pointerId: event.pointerId, origin: horizontal ? event.clientX : event.clientY, initial: current.current.percent, requested: current.current.percent, orientation, rtl: node.ownerDocument.defaultView?.getComputedStyle(node).direction === "rtl", handle: separator, restore: lockDocument(node.ownerDocument, horizontal ? "col-resize" : "row-resize") };
+            setDragging(true);
+        }, onPointerMove: event => { onPointerMove?.(event); if (!event.defaultPrevented)
+            move(event); }, onPointerUp: event => {
+            let accepted = false;
+            try {
+                onPointerUp?.(event);
+                accepted = !event.defaultPrevented;
+                if (accepted)
+                    move(event);
+            }
+            finally {
+                if (drag.current?.pointerId === event.pointerId)
+                    finish(accepted);
+            }
+        }, onPointerCancel: event => { try {
+            onPointerCancel?.(event);
+        }
+        finally {
+            if (drag.current?.pointerId === event.pointerId)
+                finish(false);
+        } }, onLostPointerCapture: event => { try {
+            onLostPointerCapture?.(event);
+        }
+        finally {
+            if (drag.current?.pointerId === event.pointerId)
+                finish(false);
+        } }, onKeyDown: event => {
+            onKeyDown?.(event);
+            if (event.defaultPrevented || event.target !== handle.current || event.nativeEvent.isComposing || event.keyCode === 229 || event.altKey || event.ctrlKey || event.metaKey)
+                return;
+            if (event.key === "Escape" && drag.current) {
+                event.preventDefault();
+                finish(false);
+                return;
+            }
+            if (current.current.disabled || drag.current || !resizeKeys.has(event.key))
+                return;
+            const horizontal = orientation === "horizontal", rtl = root.current?.ownerDocument.defaultView?.getComputedStyle(root.current).direction === "rtl";
+            const direction = horizontal ? event.key === "ArrowRight" ? (rtl ? -1 : 1) : event.key === "ArrowLeft" ? (rtl ? 1 : -1) : 0 : event.key === "ArrowDown" ? 1 : event.key === "ArrowUp" ? -1 : 0;
+            if (!direction && event.key !== "Home" && event.key !== "End")
+                return;
+            event.preventDefault();
+            const state = current.current, next = clamp(event.key === "Home" ? min : event.key === "End" ? max : state.percent + direction * (event.shiftKey ? largeStep : step), min, max);
+            if (next !== state.percent) {
+                keyboard.current = true;
+                publish(next);
+            }
+        }, onKeyUp: event => { onKeyUp?.(event); if (event.target === handle.current && (event.key === "Home" || event.key === "End" || (orientation === "horizontal" ? ["ArrowLeft", "ArrowRight"] : ["ArrowUp", "ArrowDown"]).includes(event.key)) && keyboard.current) {
+            keyboard.current = false;
+            if (!event.defaultPrevented)
+                commitAccepted();
+        } }, onBlur: event => { try {
+            onBlur?.(event);
+        }
+        finally {
+            if (event.target === handle.current && keyboard.current) {
+                keyboard.current = false;
+                if (!event.defaultPrevented)
+                    commitAccepted();
+            }
+        } }, children: [_jsx("div", { ref: node => bindPane(node, first, percent === 0), id: mainId, "aria-hidden": percent === 0 || undefined, className: "flood-resizable-panels__panel", children: main }), _jsx("div", { ref: handle, role: "separator", tabIndex: disabled ? -1 : 0, "aria-disabled": disabled || undefined, "aria-label": label, "aria-orientation": orientation === "horizontal" ? "vertical" : "horizontal", "aria-controls": `${mainId} ${secondaryId}`, "aria-valuemin": min, "aria-valuemax": max, "aria-valuenow": percent, "aria-valuetext": `${Number(percent.toFixed(2))}%`, className: "flood-resizable-panels__separator" }), _jsx("div", { ref: node => bindPane(node, second, percent === 100), id: secondaryId, "aria-hidden": percent === 100 || undefined, className: "flood-resizable-panels__panel", children: secondary })] });
+});

package/dist/scroll-area.js

@@ -84,7 +84,7 @@ function cornerBounds(node, axis, crossStart, crossEnd, start, end, inset) {
     return { start, end: Math.max(start, end) };
 }
 /** Original overlay chrome; the viewport itself remains a browser-native scroll container. */
-export const OverlayScrollArea = forwardRef(function OverlayScrollArea({ orientation = "vertical", contentInset = "none", children, className, style, tabIndex = 0, role, onFocus, ...props }, forwardedRef) {
+export const OverlayScrollArea = /* @__PURE__ */ forwardRef(function OverlayScrollArea({ orientation = "vertical", contentInset = "none", children, className, style, tabIndex = 0, role, onFocus, ...props }, forwardedRef) {
     const id = useId();
     const viewport = useRef(null), content = useRef(null);
     const vertical = useRef(null), horizontal = useRef(null);

package/dist/select.js

@@ -20,7 +20,7 @@ function initialChoices(children, group, groupDisabled = false, groupHidden = fa
     });
 }
 /** Internal implementation. The public entry retains the native SelectProps/ref contract. */
-export const SingleSelect = forwardRef(function SingleSelect({ children, value, defaultValue, onChange, onInvalid, onFocus, onBlur, onKeyDown, onKeyUp, onClick, disabled, required, id, className, style, title, autoFocus, invalid, status, controlSize = "md", "aria-label": ariaLabel, "aria-labelledby": labelledBy, "aria-describedby": describedBy, "aria-invalid": ariaInvalid, ...nativeProps }, forwardedRef) {
+export const SingleSelect = /* @__PURE__ */ forwardRef(function SingleSelect({ children, value, defaultValue, onChange, onInvalid, onFocus, onBlur, onKeyDown, onKeyUp, onClick, disabled, required, id, className, style, title, autoFocus, invalid, status, controlSize = "md", "aria-label": ariaLabel, "aria-labelledby": labelledBy, "aria-describedby": describedBy, "aria-invalid": ariaInvalid, ...nativeProps }, forwardedRef) {
     const generatedId = useId();
     const triggerId = id ?? `flood-select-${generatedId}`;
     const menuId = `${triggerId}-options`, validationId = `${triggerId}-validation`;
@@ -269,11 +269,22 @@ export const SingleSelect = forwardRef(function SingleSelect({ children, value,
             commit(index); }, children: [_jsx("span", { children: choice.label }), _jsx("span", { className: "flood-select__selected", "aria-hidden": "true", children: choice.value === currentValue ? "✓" : "" })] }, `${index}-${choice.value}`);
     return _jsxs("span", { className: `flood-select flood-select--custom flood-control--${controlSize}`, dir: nativeProps.dir, lang: nativeProps.lang, hidden: nativeProps.hidden, children: [_jsx("button", { ...visibleAttributes, ref: trigger, id: triggerId, type: "button", role: "combobox", disabled: disabled, tabIndex: nativeProps.tabIndex, accessKey: nativeProps.accessKey, dir: nativeProps.dir, lang: nativeProps.lang, hidden: nativeProps.hidden, className: ["flood-input flood-select__control", `flood-control--${controlSize}`, className].filter(Boolean).join(" "), style: style, title: title, "aria-label": ariaLabel, "aria-labelledby": labelledBy, "aria-describedby": descriptions, "data-status": resolveFieldStatus(status, invalid || Boolean(validation), ariaInvalid), "aria-invalid": invalid || status === "error" || ariaInvalid || Boolean(validation) || undefined, "aria-required": required || undefined, "aria-expanded": open, "aria-haspopup": "listbox", "aria-controls": menuId, "aria-activedescendant": open && active >= 0 && choices[active] && !choices[active].hidden ? `${menuId}-${active}` : undefined, onFocus: (event) => { if (onFocus)
                     mirror(new FocusEvent("focusin", { bubbles: true, relatedTarget: event.relatedTarget })); }, onBlur: (event) => { if (onBlur)
-                    mirror(new FocusEvent("focusout", { bubbles: true, relatedTarget: event.relatedTarget })); }, onClick: () => { if (onClick && !mirror(new MouseEvent("click", { bubbles: true, cancelable: true })))
-                    return; if (open)
-                    setOpen(false);
-                else
-                    openMenu(); }, onKeyUp: (event) => { if (onKeyUp)
+                    mirror(new FocusEvent("focusout", { bubbles: true, relatedTarget: event.relatedTarget })); }, onMouseDown: (event) => {
+                    // Keep an already-focused combobox from blurring to the page before
+                    // Safari's click. Activation below owns focus; touch scrolling is native.
+                    if (event.button === 0)
+                        event.preventDefault();
+                }, onClick: (event) => {
+                    // Safari does not give buttons mouse focus. The combobox must own keys
+                    // before opening; focus first so a host click callback can still move it.
+                    event.currentTarget.focus({ preventScroll: true });
+                    if (onClick && !mirror(new MouseEvent("click", { bubbles: true, cancelable: true })))
+                        return;
+                    if (open)
+                        setOpen(false);
+                    else
+                        openMenu();
+                }, onKeyUp: (event) => { if (onKeyUp)
                     mirror(new KeyboardEvent("keyup", { key: event.key, bubbles: true, cancelable: true })); }, onKeyDown: (event) => {
                     if (onKeyDown && !mirror(new KeyboardEvent("keydown", { key: event.key, code: event.code, bubbles: true, cancelable: true, ctrlKey: event.ctrlKey, shiftKey: event.shiftKey, altKey: event.altKey, metaKey: event.metaKey }))) {
                         event.preventDefault();

package/dist/slider.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef, useEffect, useId, useRef, useState } from "react";
 import { hasFieldContent, mergeDescriptions, resolveFieldStatus } from "./field-state.js";
 /** Native range inputs keep keyboard/AT interaction; the shared rail handles pointer selection. */
-export const RangeControl = forwardRef(function RangeControl({ fieldsetComponent: Group, label, value, defaultValue = [50], onValueChange, min = 0, max = 100, step = 1, thumbLabels, showValue = true, readOnly = false, controlSize = "md", disabled, className, name, onKeyDown, ...props }, ref) {
+export const RangeControl = /* @__PURE__ */ forwardRef(function RangeControl({ fieldsetComponent: Group, label, value, defaultValue = [50], onValueChange, min = 0, max = 100, step = 1, thumbLabels, showValue = true, readOnly = false, controlSize = "md", disabled, className, name, onKeyDown, ...props }, ref) {
     if (![min, max, step, max - min, (max - min) / step].every(Number.isFinite) || min >= max || step <= 0)
         throw new Error("Flood Slider requires finite increasing bounds and a positive representable step");
     if (!label.trim())

package/dist/tag-input.d.ts

@@ -0,0 +1,3 @@
+import { type TagInputProps } from "./index.js";
+/** Free text tokens. Known-option IDs and suggestion layers belong to MultiSelect. */
+export declare const FreeTagEntry: import("react").ForwardRefExoticComponent<TagInputProps & import("react").RefAttributes<HTMLInputElement>>;

package/dist/tag-input.js

@@ -0,0 +1,181 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useEffect, useId, useImperativeHandle, useLayoutEffect, useRef, useState } from "react";
+import { Input, Label, Tag } from "./index.js";
+import { mergeDescriptions, resolveFieldStatus } from "./field-state.js";
+const useBrowserLayoutEffect = typeof window === "undefined" ? useEffect : useLayoutEffect;
+const normalize = (values) => [...new Set(values.map(value => value.trim()).filter(Boolean))];
+const same = (a, b) => a.length === b.length && a.every((value, index) => value === b[index]);
+/** Free text tokens. Known-option IDs and suggestion layers belong to MultiSelect. */
+export const FreeTagEntry = /* @__PURE__ */ forwardRef(function FreeTagEntry({ label, hideLabel = false, value, defaultValue = [], onValueChange, delimiters = [","], removeLabel = "Remove", requiredMessage = "Add at least one tag.", controlSize = "md", disabled, readOnly, required, name, form, id: explicitId, className, style, onKeyDown, onPaste, onInvalid, onCompositionStart, onCompositionEnd, ...props }, forwardedRef) {
+    if (!label.trim() || !removeLabel.trim() || !requiredMessage.trim())
+        throw new Error("Flood TagInput requires nonempty accessible labels and validation message");
+    if (delimiters.some(delimiter => [...delimiter].length !== 1 || delimiter === "\n" || delimiter === "\r"))
+        throw new Error("Flood TagInput delimiters must be single characters other than newlines");
+    for (const values of [value, defaultValue])
+        if (values !== undefined && (!Array.isArray(values) || values.some(item => typeof item !== "string")))
+            throw new Error("Flood TagInput values must be arrays of strings");
+    const generated = useId(), id = explicitId ?? `flood-tag-input-${generated}`;
+    const input = useRef(null), root = useRef(null), composing = useRef(false);
+    useImperativeHandle(forwardedRef, () => input.current, []);
+    const initial = useRef(normalize(defaultValue));
+    const [local, setLocal] = useState(initial.current), [draft, setDraft] = useState(""), [validation, setValidation] = useState("");
+    const tags = value === undefined ? local : normalize(value);
+    const controlled = useRef(value !== undefined);
+    controlled.current = value !== undefined;
+    const pending = useRef(undefined);
+    const blocked = () => Boolean(disabled || readOnly || input.current?.matches(":disabled"));
+    const publish = (next) => {
+        if (same(tags, next))
+            return;
+        if (value === undefined)
+            setLocal(next);
+        onValueChange?.([...next]);
+        setValidation("");
+    };
+    const add = (parts, remaining = "", source = draft) => {
+        const next = normalize([...tags, ...parts]);
+        if (same(tags, next)) {
+            pending.current = undefined;
+            setDraft(remaining);
+            return;
+        }
+        if (value === undefined)
+            setDraft(remaining);
+        else {
+            pending.current = { tags: next, draft: source, remaining };
+            setDraft(source);
+        }
+        publish(next);
+    };
+    useBrowserLayoutEffect(() => {
+        const request = pending.current;
+        if (request && request.tags.every(tag => tags.includes(tag))) {
+            pending.current = undefined;
+            setDraft(current => current === request.draft ? request.remaining : current);
+        }
+        const control = input.current;
+        control?.setCustomValidity(required && tags.length === 0 ? requiredMessage : "");
+        if (validation && control?.validity.valid)
+            setValidation("");
+    });
+    useEffect(() => {
+        const owner = input.current?.form;
+        if (!owner)
+            return;
+        const timers = new Set();
+        const reset = (event) => {
+            // React's delegated onReset may cancel after this native listener returns.
+            const timer = setTimeout(() => {
+                timers.delete(timer);
+                if (event.defaultPrevented || !input.current)
+                    return;
+                if (!controlled.current)
+                    setLocal([...initial.current]);
+                pending.current = undefined;
+                setDraft("");
+                setValidation("");
+            }, 0);
+            timers.add(timer);
+        };
+        owner.addEventListener("reset", reset);
+        return () => { owner.removeEventListener("reset", reset); timers.forEach(clearTimeout); };
+    }, [form]);
+    const remove = (tag) => {
+        if (blocked())
+            return;
+        // Removal is a separate edit, not acceptance of a pending addition.
+        pending.current = undefined;
+        publish(tags.filter(value => value !== tag));
+        input.current?.focus({ preventScroll: true });
+    };
+    const split = (text, includeNewlines = false) => {
+        const separators = new Set([...delimiters, ...(includeNewlines ? ["\n", "\r"] : [])]);
+        const parts = [""];
+        for (const character of text) {
+            if (separators.has(character))
+                parts.push("");
+            else
+                parts[parts.length - 1] += character;
+        }
+        return parts;
+    };
+    const removeButtons = () => [...root.current?.querySelectorAll(".flood-tag__remove:not(:disabled)") ?? []];
+    const rtl = () => input.current?.ownerDocument.defaultView?.getComputedStyle(input.current).direction === "rtl";
+    return _jsxs("div", { ref: root, className: "flood-tag-input", hidden: props.hidden, dir: props.dir, lang: props.lang, children: [_jsx(Label, { htmlFor: id, required: required, className: hideLabel ? "flood-visually-hidden" : undefined, children: label }), _jsxs("div", { className: ["flood-input-group", "flood-tag-input__control", `flood-control--${controlSize}`, className].filter(Boolean).join(" "), style: style, "data-disabled": disabled || undefined, "data-readonly": readOnly || undefined, "data-status": resolveFieldStatus(props.status, props.invalid || Boolean(validation), props["aria-invalid"]), onClick: event => { if (!blocked() && !event.target.closest("button,input"))
+                    input.current?.focus(); }, children: [tags.map(tag => _jsx(Tag, { size: controlSize === "sm" ? "sm" : controlSize === "md" ? "md" : "lg", disabled: disabled, onRemove: readOnly ? undefined : () => remove(tag), removeLabel: `${removeLabel} ${tag}`, removeButtonProps: { tabIndex: -1, onKeyDown: event => {
+                                if (event.defaultPrevented || event.altKey || event.ctrlKey || event.metaKey || event.nativeEvent.isComposing || blocked())
+                                    return;
+                                const buttons = removeButtons(), index = buttons.indexOf(event.currentTarget);
+                                if (event.key === "Backspace" || event.key === "Delete") {
+                                    event.preventDefault();
+                                    remove(tag);
+                                }
+                                else if (event.key === "Escape") {
+                                    event.preventDefault();
+                                    event.stopPropagation();
+                                    input.current?.focus();
+                                }
+                                else if (event.key === (rtl() ? "ArrowLeft" : "ArrowRight")) {
+                                    event.preventDefault();
+                                    (buttons[index + 1] ?? input.current)?.focus();
+                                }
+                                else if (event.key === (rtl() ? "ArrowRight" : "ArrowLeft")) {
+                                    event.preventDefault();
+                                    buttons[Math.max(0, index - 1)]?.focus();
+                                }
+                            } }, children: tag }, tag)), _jsx(Input, { ...props, ref: input, id: id, type: "text", form: form, value: draft, controlSize: controlSize, disabled: disabled, readOnly: readOnly, required: required && tags.length === 0, "aria-required": required || undefined, "aria-describedby": mergeDescriptions(props["aria-describedby"], tags.length > 0 && `${id}-selection`, Boolean(validation) && `${id}-validation`), invalid: props.invalid || Boolean(validation), onChange: event => {
+                            if (blocked())
+                                return;
+                            pending.current = undefined;
+                            const text = event.currentTarget.value;
+                            if (composing.current || ("isComposing" in event.nativeEvent && event.nativeEvent.isComposing)) {
+                                setDraft(text);
+                                return;
+                            }
+                            const parts = split(text);
+                            if (parts.length > 1)
+                                add(parts.slice(0, -1), parts.at(-1), text);
+                            else
+                                setDraft(text);
+                        }, onCompositionStart: event => { composing.current = true; onCompositionStart?.(event); }, onCompositionEnd: event => { composing.current = false; onCompositionEnd?.(event); }, onInvalid: event => { onInvalid?.(event); if (!event.defaultPrevented)
+                            setValidation(event.currentTarget.validationMessage); }, onKeyDown: event => {
+                            onKeyDown?.(event);
+                            if (event.defaultPrevented || event.altKey || event.ctrlKey || event.metaKey || event.nativeEvent.isComposing || composing.current)
+                                return;
+                            if (readOnly && event.key === "Backspace") {
+                                event.preventDefault();
+                                return;
+                            }
+                            if (blocked())
+                                return;
+                            if (event.key === "Enter" && draft.trim()) {
+                                event.preventDefault();
+                                add([draft]);
+                            }
+                            else if (delimiters.includes(event.key)) {
+                                event.preventDefault();
+                                add([draft]);
+                            }
+                            else if (event.key === "Backspace" && !draft && tags.length && !event.shiftKey) {
+                                event.preventDefault();
+                                remove(tags.at(-1));
+                            }
+                            else if (event.key === (rtl() ? "ArrowRight" : "ArrowLeft") && !event.shiftKey && event.currentTarget.selectionStart === 0 && event.currentTarget.selectionEnd === 0) {
+                                const last = removeButtons().at(-1);
+                                if (last) {
+                                    event.preventDefault();
+                                    last.focus();
+                                }
+                            }
+                        }, onPaste: event => {
+                            onPaste?.(event);
+                            if (event.defaultPrevented || blocked() || composing.current)
+                                return;
+                            const pasted = event.clipboardData.getData("text/plain");
+                            if (split(pasted, true).length === 1)
+                                return;
+                            event.preventDefault();
+                            const node = event.currentTarget, text = draft.slice(0, node.selectionStart ?? draft.length) + pasted + draft.slice(node.selectionEnd ?? draft.length);
+                            add(split(text, true), "", text);
+                        } })] }), name && tags.map(tag => _jsx("input", { type: "hidden", name: name, value: tag, form: form, disabled: disabled }, tag)), tags.length > 0 && _jsx("span", { id: `${id}-selection`, className: "flood-visually-hidden", children: tags.join(", ") }), validation && _jsx("span", { id: `${id}-validation`, role: "alert", className: "flood-error", children: validation })] });
+});