@flood-md/react 0.2.3 → 0.2.5

package/dist/select.js

@@ -1,7 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { resolveFieldStatus } from "./field-state.js";
 import { Children, Fragment, forwardRef, isValidElement, useEffect, useId, useImperativeHandle, useLayoutEffect, useRef, useState, } from "react";
-import { OverlayScrollArea } from "./scroll-area.js";
+import { ScrollArea } from "./index.js";
+import { positionLayer, registerLayer, returnFocus } from "./overlay-runtime.js";
 const useBrowserLayoutEffect = typeof window === "undefined" ? useEffect : useLayoutEffect;
 const text = (children) => Children.toArray(children).map((child) => typeof child === "string" || typeof child === "number" ? String(child) : isValidElement(child) ? text(child.props.children) : "").join("");
 function initialChoices(children, group, groupDisabled = false, groupHidden = false) {
@@ -28,8 +29,9 @@ export const SingleSelect = forwardRef(function SingleSelect({ children, value,
     const [choices, setChoices] = useState(() => initialChoices(children));
     const [selected, setSelected] = useState(() => String(defaultValue ?? initialChoices(children).find((choice) => !choice.disabled && !choice.hidden)?.value ?? ""));
     const [open, setOpen] = useState(false), [active, setActive] = useState(-1);
+    const activeIndex = useRef(active);
+    activeIndex.current = active;
     const [validation, setValidation] = useState("");
-    const [position, setPosition] = useState({ left: 0, top: 0, width: 0, maxHeight: 0, viewportHeight: 0 });
     const controlled = value !== undefined;
     const currentValue = controlled ? String(value) : selected;
     const current = useRef({ controlled, value: currentValue });
@@ -152,54 +154,101 @@ export const SingleSelect = forwardRef(function SingleSelect({ children, value,
             }
         }
     }
+    function revealOption(index) {
+        const option = menu.current?.querySelector(`[data-option-index="${index}"]`), viewport = scrollViewport.current;
+        if (!option || !viewport)
+            return;
+        const item = option.getBoundingClientRect(), bounds = viewport.getBoundingClientRect();
+        if (item.top < bounds.top)
+            viewport.scrollTop -= bounds.top - item.top;
+        else if (item.bottom > bounds.bottom)
+            viewport.scrollTop += item.bottom - bounds.bottom;
+    }
     useBrowserLayoutEffect(() => {
         if (!open || !menu.current || !trigger.current)
             return;
-        const popup = menu.current, button = trigger.current;
-        if (typeof popup.showPopover === "function" && !popup.matches(":popover-open"))
+        const popup = menu.current, button = trigger.current, document = popup.ownerDocument, view = document.defaultView;
+        let alive = true, frame = 0, lastViewportHeight = -1, unregister = () => { };
+        const assign = (element, property, value) => {
+            if (element.style.getPropertyValue(property) !== value)
+                element.style.setProperty(property, value);
+        };
+        const update = () => {
+            if (!alive)
+                return;
+            if (!button.isConnected || !button.getClientRects().length) {
+                setOpen(false);
+                return;
+            }
+            const rect = button.getBoundingClientRect(), visual = view.visualViewport;
+            const viewportTop = visual?.offsetTop ?? 0, viewportWidth = visual?.width ?? view.innerWidth, viewportHeight = visual?.height ?? view.innerHeight;
+            const rootSize = parseFloat(view.getComputedStyle(document.documentElement).fontSize);
+            const length = (name) => { const raw = view.getComputedStyle(button).getPropertyValue(name).trim(); return parseFloat(raw) * (raw.endsWith("rem") ? rootSize : 1); };
+            const gap = length("--flood-sys-space-2") || 0;
+            const below = Math.max(0, viewportTop + viewportHeight - rect.bottom - gap * 2), above = Math.max(0, rect.top - viewportTop - gap * 2);
+            const maxHeight = Math.min(length("--flood-sys-control-md-height") * 8, Math.max(below, above));
+            assign(popup, "width", `${Math.min(rect.width, Math.max(0, viewportWidth - gap * 2))}px`);
+            assign(popup, "max-height", `${maxHeight}px`);
+            // The shared positioner reads column-gap as its placement gap. On this
+            // block listbox it does not add layout space between options.
+            assign(popup, "column-gap", "var(--flood-sys-space-2)");
+            const css = view.getComputedStyle(popup);
+            const inset = parseFloat(css.paddingTop) + parseFloat(css.paddingBottom) + parseFloat(css.borderTopWidth) + parseFloat(css.borderBottomWidth);
+            const optionHeight = Math.max(0, maxHeight - inset);
+            if (scrollViewport.current)
+                assign(scrollViewport.current, "max-height", `${optionHeight}px`);
+            positionLayer(button, popup, "bottom", "start");
+            if (optionHeight !== lastViewportHeight) {
+                lastViewportHeight = optionHeight;
+                revealOption(activeIndex.current);
+            }
+            frame = view.requestAnimationFrame(update);
+        };
+        const start = () => {
+            if (!alive || !button.isConnected)
+                return;
+            const parent = button.closest("dialog");
+            if (parent && !parent.open) {
+                frame = view.requestAnimationFrame(start);
+                return;
+            }
+            if (typeof popup.showPopover !== "function")
+                throw new Error("Flood Select requires the native Popover API");
+            popup.style.visibility = "hidden";
             popup.showPopover();
-        const rect = button.getBoundingClientRect();
-        const rootSize = parseFloat(getComputedStyle(document.documentElement).fontSize);
-        const length = (name) => { const raw = getComputedStyle(button).getPropertyValue(name).trim(); return parseFloat(raw) * (raw.endsWith("rem") ? rootSize : 1); };
-        const gap = length("--flood-sys-space-2") || 0;
-        const below = Math.max(0, innerHeight - rect.bottom - gap * 2), above = Math.max(0, rect.top - gap * 2);
-        const maxHeight = Math.min(length("--flood-sys-control-md-height") * 8, Math.max(below, above));
-        const width = Math.min(rect.width, Math.max(0, innerWidth - gap * 2));
-        popup.style.width = `${width}px`;
-        popup.style.maxHeight = `${maxHeight}px`;
-        const popupStyle = getComputedStyle(popup);
-        const inset = parseFloat(popupStyle.paddingTop) + parseFloat(popupStyle.paddingBottom) + parseFloat(popupStyle.borderTopWidth) + parseFloat(popupStyle.borderBottomWidth);
-        const viewportHeight = Math.max(0, maxHeight - inset);
-        if (scrollViewport.current)
-            scrollViewport.current.style.maxHeight = `${viewportHeight}px`;
-        const height = popup.getBoundingClientRect().height;
-        const top = below >= height || below >= above ? rect.bottom + gap : Math.max(gap, rect.top - gap - height);
-        setPosition({ left: Math.max(gap, Math.min(rect.left, innerWidth - gap - width)), top, width, maxHeight, viewportHeight });
-    }, [open, choices]);
+            update();
+            unregister = registerLayer(document, {
+                panel: popup,
+                // Native callbacks are mirrored on the hidden select inside this span.
+                // Those synthetic focus events belong to this control, not outside it.
+                anchor: () => trigger.current?.parentElement ?? trigger.current,
+                close: () => setOpen(false),
+            });
+        };
+        const toggle = (event) => {
+            if (alive && event.newState === "closed" && !popup.matches(":popover-open"))
+                setOpen(false);
+        };
+        popup.addEventListener("toggle", toggle);
+        start();
+        return () => {
+            alive = false;
+            view.cancelAnimationFrame(frame);
+            unregister();
+            popup.removeEventListener("toggle", toggle);
+            returnFocus(popup, trigger.current);
+            if (popup.matches(":popover-open"))
+                popup.hidePopover();
+        };
+    }, [open]);
     useEffect(() => {
         if (!open || (choices[active] && enabled(choices[active])))
             return;
         const selectedIndex = choices.findIndex((choice) => choice.value === currentValue && enabled(choice));
         setActive(selectedIndex >= 0 ? selectedIndex : choices.findIndex(enabled));
     }, [choices, open, active, currentValue]);
-    useEffect(() => {
-        if (!open)
-            return;
-        menu.current?.querySelector(`[data-option-index="${active}"]`)?.scrollIntoView({ block: "nearest" });
-    }, [open, active]);
-    useEffect(() => {
-        if (!open)
-            return;
-        const outside = (event) => { if (event.target instanceof Node && !trigger.current?.contains(event.target) && !menu.current?.contains(event.target))
-            setOpen(false); };
-        const scroll = (event) => { if (event.target instanceof Node && menu.current?.contains(event.target))
-            return; setOpen(false); };
-        const resize = () => setOpen(false);
-        document.addEventListener("pointerdown", outside, true);
-        document.addEventListener("scroll", scroll, true);
-        window.addEventListener("resize", resize);
-        return () => { document.removeEventListener("pointerdown", outside, true); document.removeEventListener("scroll", scroll, true); window.removeEventListener("resize", resize); };
-    }, [open]);
+    useEffect(() => { if (open)
+        revealOption(active); }, [open, active]);
     const displayed = choices.find((choice) => choice.value === currentValue)?.label ?? "Select an option";
     const descriptions = [describedBy, validation && validationId].filter(Boolean).join(" ") || undefined;
     const visibleAttributes = Object.fromEntries(Object.entries(nativeProps).filter(([key]) => key.startsWith("data-") || key.startsWith("aria-")));
@@ -214,14 +263,13 @@ export const SingleSelect = forwardRef(function SingleSelect({ children, value,
         else
             groups.push({ label: choice.group, items: [{ choice, index }] });
     });
-    const renderOption = ({ choice, index }) => _jsxs("div", { id: `${menuId}-${index}`, role: "option", "aria-selected": choice.value === currentValue, "aria-disabled": choice.disabled || undefined, className: "flood-select__option", "data-active": index === active || undefined, "data-option-index": index, onPointerDown: (event) => event.preventDefault(), onPointerMove: () => { if (enabled(choice))
-            setActive(index); }, onClick: () => { if (enabled(choice)) {
-            commit(index);
-            trigger.current?.focus();
-        } }, children: [_jsx("span", { children: choice.label }), _jsx("span", { className: "flood-select__selected", "aria-hidden": "true", children: choice.value === currentValue ? "✓" : "" })] }, `${index}-${choice.value}`);
+    const renderOption = ({ choice, index }) => _jsxs("div", { id: `${menuId}-${index}`, role: "option", "aria-selected": choice.value === currentValue, "aria-disabled": choice.disabled || undefined, className: "flood-select__option", "data-active": index === active || undefined, "data-option-index": index, onPointerDown: (event) => { if (event.pointerType === "mouse")
+            event.preventDefault(); }, onPointerMove: () => { if (enabled(choice))
+            setActive(index); }, onClick: () => { if (enabled(choice))
+            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 })); setOpen(false); }, onClick: () => { if (onClick && !mirror(new MouseEvent("click", { bubbles: true, cancelable: true })))
+                    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
@@ -280,5 +328,6 @@ export const SingleSelect = forwardRef(function SingleSelect({ children, value,
                 onKeyDown: (event) => { onKeyDown?.(event); event.stopPropagation(); }, onKeyUp: onKeyUp, onClick: onClick, onInvalid: (event) => { onInvalid?.(event); const prevented = event.defaultPrevented; event.preventDefault(); if (!prevented) {
                     setValidation(event.currentTarget.validationMessage);
                     trigger.current?.focus();
-                } }, children: children }), open && _jsx("div", { ref: menu, id: menuId, role: "listbox", "aria-label": ariaLabel, "aria-labelledby": ariaLabel ? undefined : labelledBy ?? triggerId, popover: "manual", className: "flood-select__menu", onPointerDown: (event) => event.preventDefault(), onClick: (event) => event.preventDefault(), style: { left: position.left, top: position.top, width: position.width, maxHeight: position.maxHeight || undefined }, children: _jsxs(OverlayScrollArea, { ref: scrollViewport, orientation: "vertical", tabIndex: -1, className: "flood-select__viewport", style: { maxHeight: position.viewportHeight || undefined }, children: [!choices.some((choice) => !choice.hidden) && _jsx("div", { className: "flood-select__empty", children: "No options" }), groups.map((group, index) => group.label ? _jsxs("div", { role: "group", "aria-label": group.label, children: [_jsx("div", { className: "flood-select__group", "aria-hidden": "true", children: group.label }), group.items.map(renderOption)] }, index) : _jsx(Fragment, { children: group.items.map(renderOption) }, index))] }) }), validation && _jsx("span", { className: "flood-select__validation", id: validationId, role: "alert", children: validation })] });
+                } }, children: children }), open && _jsx("div", { ref: menu, popover: "manual", className: "flood-select__menu", onPointerDown: (event) => { if (event.pointerType === "mouse")
+                    event.preventDefault(); }, onClick: (event) => event.preventDefault(), children: _jsxs(ScrollArea, { ref: scrollViewport, id: menuId, role: "listbox", "aria-label": ariaLabel, "aria-labelledby": ariaLabel ? undefined : labelledBy ?? triggerId, orientation: "vertical", tabIndex: -1, className: "flood-select__viewport", children: [!choices.some((choice) => !choice.hidden) && _jsx("div", { className: "flood-select__empty", children: "No options" }), groups.map((group, index) => group.label ? _jsxs("div", { role: "group", "aria-label": group.label, children: [_jsx("div", { className: "flood-select__group", "aria-hidden": "true", children: group.label }), group.items.map(renderOption)] }, index) : _jsx(Fragment, { children: group.items.map(renderOption) }, index))] }) }), validation && _jsx("span", { className: "flood-select__validation", id: validationId, role: "alert", children: validation })] });
 });

package/dist/slider.d.ts

@@ -0,0 +1,7 @@
+import type { SliderProps, Fieldset } from "./index.js";
+interface Props extends SliderProps {
+    fieldsetComponent: typeof Fieldset;
+}
+/** Native range inputs keep keyboard/AT interaction; the shared rail handles pointer selection. */
+export declare const RangeControl: import("react").ForwardRefExoticComponent<Props & import("react").RefAttributes<HTMLFieldSetElement>>;
+export {};

package/dist/slider.js

@@ -0,0 +1,89 @@
+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) {
+    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())
+        throw new Error("Flood Slider requires an accessible label");
+    const generatedId = useId();
+    const id = props.id ?? `flood-slider-${generatedId}`;
+    const hasError = hasFieldContent(props.error);
+    const status = resolveFieldStatus(props.status, hasError, props["aria-invalid"]);
+    const describedBy = mergeDescriptions(props["aria-describedby"], hasFieldContent(props.hint) && `${id}-hint`, hasError && `${id}-error`, !hasError && hasFieldContent(props.message) && `${id}-message`);
+    const snap = (number) => Number(Math.max(min, Math.min(min + Math.floor((max - min) / step + 1e-9) * step, min + Math.round((number - min) / step) * step)).toPrecision(14));
+    const normalize = (numbers) => {
+        if ((numbers.length !== 1 && numbers.length !== 2) || numbers.some(number => !Number.isFinite(number)) || (numbers.length === 2 && numbers[0] > numbers[1]))
+            throw new Error("Flood Slider accepts one value or an ordered pair of finite values");
+        return numbers.map(snap);
+    };
+    const initial = useRef(normalize(defaultValue));
+    const [local, setLocal] = useState(initial.current);
+    const values = normalize(value ?? local);
+    if (thumbLabels && (thumbLabels.length !== values.length || thumbLabels.some(text => !text.trim())))
+        throw new Error("Flood Slider needs one nonempty label per thumb");
+    const inputs = useRef([]);
+    const drag = useRef(null);
+    const valuesRef = useRef(values);
+    valuesRef.current = values;
+    const update = (index, next) => {
+        const before = valuesRef.current;
+        const number = Math.max(index === 1 ? before[0] : min, Math.min(index === 0 && before.length === 2 ? before[1] : max, snap(next)));
+        const result = before.map((old, position) => position === index ? number : old);
+        if (result.every((number, position) => number === before[position]))
+            return;
+        if (value === undefined) {
+            valuesRef.current = result;
+            setLocal(result);
+        }
+        onValueChange?.([...result]);
+    };
+    useEffect(() => {
+        const form = inputs.current[0]?.form;
+        if (!form || value !== undefined)
+            return;
+        const reset = (event) => queueMicrotask(() => { if (!event.defaultPrevented)
+            setLocal(initial.current); });
+        form.addEventListener("reset", reset);
+        return () => form.removeEventListener("reset", reset);
+    }, [value, props.form]);
+    const percent = (number) => 100 * (number - min) / (max - min);
+    const pointValue = (node, clientX) => {
+        const box = node.getBoundingClientRect();
+        const ratio = Math.max(0, Math.min(1, (clientX - box.left) / box.width));
+        return min + (node.ownerDocument.defaultView?.getComputedStyle(node).direction === "rtl" ? 1 - ratio : ratio) * (max - min);
+    };
+    const inert = (node) => disabled || readOnly || Boolean(node.closest("fieldset:disabled"));
+    const start = values.length === 1 ? 0 : percent(values[0]);
+    const end = percent(values[values.length - 1]);
+    return _jsxs(Group, { ...props, id: id, ref: ref, legend: label, name: name, disabled: disabled, className: ["flood-slider", `flood-control--${controlSize}`, className].filter(Boolean).join(" "), "data-readonly": readOnly || undefined, onKeyDown: event => {
+            onKeyDown?.(event);
+            if (event.defaultPrevented || event.altKey || event.ctrlKey || event.metaKey || event.nativeEvent.isComposing)
+                return;
+            if (readOnly && ["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight", "Home", "End", "PageUp", "PageDown"].includes(event.key))
+                event.preventDefault();
+            const index = inputs.current.indexOf(event.target);
+            if (index < 0 || inert(event.currentTarget) || (event.key !== "ArrowLeft" && event.key !== "ArrowRight"))
+                return;
+            // Native WebKit does not reverse horizontal range keys in RTL.
+            const rtl = event.currentTarget.ownerDocument.defaultView?.getComputedStyle(event.currentTarget).direction === "rtl";
+            event.preventDefault();
+            update(index, values[index] + step * (event.key === (rtl ? "ArrowLeft" : "ArrowRight") ? 1 : -1));
+        }, children: [showValue && _jsx("div", { className: "flood-slider__value", "aria-hidden": "true", children: _jsx("bdi", { dir: "ltr", children: values.join(" – ") }) }), _jsxs("div", { className: "flood-slider__rail", style: { "--flood-slider-start": `${start}%`, "--flood-slider-end": `${100 - end}%` }, onPointerDown: event => {
+                    if (inputs.current.includes(event.target) || inert(event.currentTarget) || event.button !== 0)
+                        return;
+                    event.preventDefault();
+                    const next = pointValue(event.currentTarget, event.clientX);
+                    const lowerDistance = Math.abs(next - values[0]);
+                    const upperDistance = values.length === 2 ? Math.abs(next - values[1]) : Infinity;
+                    const index = upperDistance < lowerDistance || (values.length === 2 && upperDistance === lowerDistance && next >= values[0]) ? 1 : 0;
+                    drag.current = index;
+                    inputs.current[index]?.focus();
+                    event.currentTarget.setPointerCapture(event.pointerId);
+                    update(index, next);
+                }, onPointerMove: event => { if (drag.current !== null && !inert(event.currentTarget))
+                    update(drag.current, pointValue(event.currentTarget, event.clientX)); }, onPointerUp: () => { drag.current = null; }, onLostPointerCapture: () => { drag.current = null; }, onPointerCancel: () => { drag.current = null; }, children: [_jsx("span", { className: "flood-slider__track", "aria-hidden": "true", children: _jsx("span", { className: "flood-slider__fill" }) }), values.map((number, index) => _jsx("input", { ref: node => { inputs.current[index] = node; }, type: "range", className: "flood-slider__input", name: name, form: props.form, value: number, min: min, max: max, step: step, disabled: disabled, "aria-label": thumbLabels?.[index] ?? (values.length === 1 ? label : `${label}: ${index === 0 ? "minimum" : "maximum"}`), "aria-valuemin": index === 1 ? values[0] : min, "aria-valuemax": index === 0 && values.length === 2 ? values[1] : max, "aria-describedby": describedBy, "aria-readonly": readOnly || undefined, "aria-invalid": status === "error" || undefined, onPointerDown: event => { if (readOnly)
+                            event.preventDefault(); }, onChange: event => { if (!inert(event.currentTarget))
+                            update(index, event.currentTarget.valueAsNumber); } }, index))] })] });
+});

package/dist/styles.css

@@ -1,6 +1,15 @@
 @import "@flood-md/tokens/tokens.css";
 @import "./foundations.css";
 
+/* A named loading indicator; buttons opt into decorative presentation. */
+.flood-loading { --flood-loading-size: 1.25rem; display: inline-flex; position: relative; flex: none; vertical-align: middle; inline-size: var(--flood-loading-size); block-size: var(--flood-loading-size); }
+.flood-loading[data-size="sm"] { --flood-loading-size: 1rem; }
+.flood-loading[data-size="lg"] { --flood-loading-size: 1.5rem; }
+.flood-loading > .flood-spinner { display: block; box-sizing: border-box; width: 100%; height: 100%; }
+.flood-root .flood-loading .flood-spinner { inline-size: 100%; block-size: 100%; }
+.flood-root .flood-button .flood-loading { --flood-loading-size: var(--flood-control-icon); }
+.flood-loading[hidden] { display: none; }
+
 :where(.flood-button, .flood-input, .flood-choice, .flood-field, .flood-link) {
   box-sizing: border-box;
   font-family: var(--flood-font-sans);

package/dist/text-inputs.d.ts

@@ -0,0 +1,9 @@
+import type { SearchInputProps, PasswordInputProps, InputGroup, IconButton, IconSlot } from "./index.js";
+type Parts = {
+    group: typeof InputGroup;
+    action: typeof IconButton;
+    icon: typeof IconSlot;
+};
+export declare const SearchField: import("react").ForwardRefExoticComponent<SearchInputProps & Parts & import("react").RefAttributes<HTMLInputElement>>;
+export declare const PasswordField: import("react").ForwardRefExoticComponent<PasswordInputProps & Parts & import("react").RefAttributes<HTMLInputElement>>;
+export {};

package/dist/text-inputs.js

@@ -0,0 +1,45 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useEffect, useImperativeHandle, useRef, useState } from "react";
+const glyph = (kind, visible = false) => _jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.75", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: kind === "search" ? _jsxs(_Fragment, { children: [_jsx("circle", { cx: "10.5", cy: "10.5", r: "6.5" }), _jsx("path", { d: "m16 16 4 4" })] }) : kind === "clear" ? _jsx("path", { d: "m6 6 12 12M18 6 6 18" }) : _jsxs(_Fragment, { children: [_jsx("path", { d: "M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7S2 12 2 12Z" }), _jsx("circle", { cx: "12", cy: "12", r: "3" }), visible && _jsx("path", { d: "m3 3 18 18" })] }) });
+export const SearchField = forwardRef(function SearchField({ group: Group, action: Action, icon: Icon, clearable = true, clearLabel = "Clear search", controlSize = "md", className, value, defaultValue, onChange, disabled, readOnly, ...props }, ref) {
+    const input = useRef(null);
+    useImperativeHandle(ref, () => input.current, []);
+    const [text, setText] = useState(String(defaultValue ?? ""));
+    const current = value === undefined ? text : String(value);
+    useEffect(() => {
+        const form = input.current?.form;
+        if (!form)
+            return;
+        const reset = (event) => setTimeout(() => { if (!event.defaultPrevented && input.current)
+            setText(input.current.value); }, 0);
+        form.addEventListener("reset", reset);
+        return () => form.removeEventListener("reset", reset);
+    }, [props.form]);
+    const clear = () => {
+        const node = input.current;
+        if (!node || readOnly || node.matches(":disabled"))
+            return;
+        const view = node.ownerDocument.defaultView;
+        Object.getOwnPropertyDescriptor(view.HTMLInputElement.prototype, "value").set.call(node, "");
+        node.dispatchEvent(new view.Event("input", { bubbles: true }));
+        node.focus();
+    };
+    return _jsx(Group, { ...props, ref: input, type: "search", controlSize: controlSize, className: ["flood-search-input", className].filter(Boolean).join(" "), value: value, defaultValue: defaultValue, disabled: disabled, readOnly: readOnly, onChange: event => { setText(event.currentTarget.value); onChange?.(event); }, start: _jsx(Icon, { size: controlSize, children: glyph("search") }), end: clearable && current.length > 0 && !readOnly ? _jsx(Action, { label: clearLabel, variant: "ghost", size: controlSize, disabled: disabled, onPointerDown: event => event.preventDefault(), onClick: clear, children: glyph("clear") }) : undefined });
+});
+export const PasswordField = forwardRef(function PasswordField({ group: Group, action: Action, icon: _Icon, visible, defaultVisible = false, onVisibleChange, showPasswordLabel = "Show password", hidePasswordLabel = "Hide password", controlSize = "md", className, disabled, ...props }, ref) {
+    const input = useRef(null);
+    useImperativeHandle(ref, () => input.current, []);
+    const [local, setLocal] = useState(defaultVisible);
+    const shown = visible ?? local;
+    return _jsx(Group, { ...props, ref: input, type: shown ? "text" : "password", disabled: disabled, controlSize: controlSize, className: ["flood-password-input", className].filter(Boolean).join(" "), end: _jsx(Action, { label: shown ? hidePasswordLabel : showPasswordLabel, variant: "ghost", size: controlSize, disabled: disabled, onPointerDown: event => event.preventDefault(), onClick: () => {
+                const node = input.current;
+                if (!node || node.matches(":disabled"))
+                    return;
+                const start = node.selectionStart, end = node.selectionEnd, direction = node.selectionDirection;
+                if (visible === undefined)
+                    setLocal(!shown);
+                onVisibleChange?.(!shown);
+                requestAnimationFrame(() => { if (start !== null && end !== null && node.isConnected)
+                    node.setSelectionRange(start, end, direction ?? undefined); });
+            }, children: glyph("eye", shown) }) });
+});

package/dist/toolbar.d.ts

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

package/dist/toolbar.js

@@ -0,0 +1,80 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef, useEffect, useImperativeHandle, useLayoutEffect, useRef } from "react";
+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) {
+    const root = useRef(null), current = useRef(null), within = useRef(false);
+    const refresh = useRef(() => []);
+    useImperativeHandle(ref, () => root.current, []);
+    useBrowserLayoutEffect(() => {
+        const element = root.current, document = element.ownerDocument, view = document.defaultView;
+        const original = new Map();
+        let alive = true;
+        const restore = (node) => { const value = original.get(node); if (value == null)
+            node.removeAttribute("tabindex");
+        else
+            node.setAttribute("tabindex", value); };
+        const sync = () => {
+            if (!alive)
+                return [];
+            const owned = Array.from(element.querySelectorAll(selector)).filter(node => node.closest('[role="toolbar"]') === element && !node.closest(independent));
+            const active = document.activeElement;
+            const hadFocus = active === element || original.has(active) || (active === document.body && within.current);
+            for (const node of original.keys())
+                if (!owned.includes(node)) {
+                    restore(node);
+                    original.delete(node);
+                }
+            const enabled = owned.filter(node => !node.matches(':disabled,[aria-disabled="true"]') && !node.closest('[hidden],[inert]') && node.getClientRects().length > 0 && getComputedStyle(node).visibility !== "hidden");
+            const entry = enabled.includes(active) ? active : enabled.includes(current.current) ? current.current : enabled[0] ?? null;
+            current.current = entry;
+            for (const node of owned) {
+                if (!original.has(node))
+                    original.set(node, node.getAttribute("tabindex"));
+                const value = node === entry ? "0" : "-1";
+                if (node.getAttribute("tabindex") !== value)
+                    node.setAttribute("tabindex", value);
+            }
+            const value = entry ? "-1" : "0";
+            if (element.getAttribute("tabindex") !== value)
+                element.setAttribute("tabindex", value);
+            if (hadFocus && active !== entry && !enabled.includes(active) && element.getClientRects().length)
+                (entry ?? element).focus({ preventScroll: true });
+            return enabled;
+        };
+        refresh.current = sync;
+        sync();
+        const observer = new MutationObserver(records => { if (records.some(record => !(record.target instanceof Element) || !record.target.closest(independent)))
+            sync(); });
+        observer.observe(element, { subtree: true, childList: true, attributes: true, attributeFilter: ["disabled", "aria-disabled", "hidden", "inert", "style", "class", "tabindex", "href", "role"] });
+        const resize = typeof ResizeObserver === "function" ? new ResizeObserver(() => sync()) : undefined;
+        resize?.observe(element);
+        const focus = (event) => { within.current = element.contains(event.target); };
+        document.addEventListener("focusin", focus);
+        view.addEventListener("resize", sync);
+        return () => { alive = false; observer.disconnect(); resize?.disconnect(); document.removeEventListener("focusin", focus); view.removeEventListener("resize", sync); for (const node of original.keys())
+            restore(node); refresh.current = () => []; };
+    }, []);
+    const move = (event) => {
+        const controls = refresh.current(), index = controls.indexOf(event.target);
+        if (index < 0 || event.altKey || event.ctrlKey || event.metaKey || event.nativeEvent.isComposing)
+            return;
+        const rtl = getComputedStyle(event.currentTarget).direction === "rtl";
+        const nextKey = orientation === "vertical" ? "ArrowDown" : rtl ? "ArrowLeft" : "ArrowRight", previousKey = orientation === "vertical" ? "ArrowUp" : rtl ? "ArrowRight" : "ArrowLeft";
+        const step = event.key === nextKey ? 1 : event.key === previousKey ? -1 : 0;
+        const wanted = event.key === "Home" ? 0 : event.key === "End" ? controls.length - 1 : step ? index + step : -1;
+        if (wanted < 0 && !step)
+            return;
+        const next = loop ? (wanted + controls.length) % controls.length : Math.max(0, Math.min(controls.length - 1, wanted));
+        event.preventDefault();
+        current.current = controls[next];
+        controls[next].focus({ preventScroll: true });
+        controls[next].scrollIntoView({ block: "nearest", inline: "nearest" });
+        refresh.current();
+    };
+    return _jsx("div", { ...props, ref: root, role: "toolbar", "aria-label": label, "aria-orientation": orientation, tabIndex: -1, "data-orientation": orientation, className: ["flood-toolbar", className].filter(Boolean).join(" "), onFocus: event => { onFocus?.(event); if (event.defaultPrevented)
+            return; within.current = true; refresh.current(); }, onKeyDownCapture: event => { onKeyDownCapture?.(event); if (!event.defaultPrevented && orientation === "vertical" && event.target.getAttribute("aria-haspopup") === "menu" && ["ArrowUp", "ArrowDown"].includes(event.key))
+            move(event); }, onKeyDown: event => { onKeyDown?.(event); if (!event.defaultPrevented)
+            move(event); } });
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flood-md/react",
-  "version": "0.2.3",
+  "version": "0.2.5",
   "type": "module",
   "description": "Original Flood components for React and Next.js.",
   "license": "MIT",
@@ -30,7 +30,7 @@
     "react-dom": "^18.3.0 || ^19.0.0"
   },
   "dependencies": {
-    "@flood-md/tokens": "0.2.3"
+    "@flood-md/tokens": "0.2.5"
   },
   "publishConfig": {
     "access": "public"