@flood-md/react 0.2.3 → 0.2.5

package/dist/file-input.js

@@ -0,0 +1,86 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useEffect, useImperativeHandle, useRef, useState } from "react";
+import { resolveFieldStatus } from "./field-state.js";
+/** FileList and native form submission stay owned by the browser. */
+export const FilePicker = forwardRef(function FilePicker({ actionComponent: Action, iconComponent: Icon, clearable = true, clearLabel = "Clear files", selectionLabel = "Selected files", removeFileLabel = "Remove file", placeholder, controlSize = "md", className, style, status, invalid, disabled, multiple, onChange, onFilesChange, ...props }, ref) {
+    const input = useRef(null);
+    useImperativeHandle(ref, () => input.current, []);
+    const [files, setFiles] = useState([]);
+    const selected = useRef([]);
+    const replacing = useRef(false);
+    useEffect(() => {
+        const form = input.current?.form;
+        if (!form)
+            return;
+        let timer;
+        const reset = (event) => {
+            timer = setTimeout(() => {
+                if (!event.defaultPrevented && input.current) {
+                    selected.current = Array.from(input.current.files ?? []);
+                    setFiles(selected.current);
+                }
+            }, 0);
+        };
+        form.addEventListener("reset", reset);
+        return () => { form.removeEventListener("reset", reset); clearTimeout(timer); };
+    }, [props.form]);
+    const clear = () => {
+        const node = input.current;
+        if (!node || node.matches(":disabled"))
+            return;
+        notify([]);
+        node.focus();
+    };
+    const notify = (next) => {
+        const node = input.current;
+        if (!node || node.matches(":disabled"))
+            return;
+        const transfer = new node.ownerDocument.defaultView.DataTransfer();
+        next.forEach(file => transfer.items.add(file));
+        node.files = transfer.files;
+        replacing.current = true;
+        try {
+            node.dispatchEvent(new node.ownerDocument.defaultView.Event("change", { bubbles: true }));
+        }
+        finally {
+            replacing.current = false;
+        }
+    };
+    const summary = multiple && files.length ? `${selectionLabel} (${files.length})` : files[0]?.name ?? "";
+    const cross = _jsx("svg", { "aria-hidden": "true", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.75", strokeLinecap: "round", children: _jsx("path", { d: "m6 6 12 12M18 6 6 18" }) });
+    const fileSize = (size) => new Intl.NumberFormat(props.lang, { style: "unit", unit: size < 1000 ? "byte" : size < 1000000 ? "kilobyte" : "megabyte", maximumFractionDigits: 1 }).format(size < 1000 ? size : size < 1000000 ? size / 1000 : size / 1000000);
+    return _jsxs("div", { className: "flood-file-input-field", hidden: props.hidden, dir: props.dir, lang: props.lang, children: [_jsxs("div", { hidden: props.hidden, dir: props.dir, lang: props.lang, style: style, className: ["flood-input-group", "flood-file-input", `flood-control--${controlSize}`, className].filter(Boolean).join(" "), "data-status": resolveFieldStatus(status, invalid, props["aria-invalid"]), "data-disabled": disabled || undefined, children: [_jsxs("div", { className: "flood-file-input__picker", children: [_jsx("input", { ...props, ref: input, type: "file", disabled: disabled, multiple: multiple, "aria-invalid": invalid || status === "error" || props["aria-invalid"], className: "flood-file-input__native", onChange: event => {
+                                    const node = event.currentTarget;
+                                    const picked = Array.from(node.files ?? []);
+                                    let next = picked;
+                                    if (multiple && !replacing.current && picked.length > 0) {
+                                        const seen = new Set();
+                                        next = [...selected.current, ...picked].filter(file => {
+                                            const identity = JSON.stringify([file.name, file.size, file.type, file.lastModified, file.webkitRelativePath]);
+                                            if (seen.has(identity))
+                                                return false;
+                                            seen.add(identity);
+                                            return true;
+                                        });
+                                        const transfer = new node.ownerDocument.defaultView.DataTransfer();
+                                        next.forEach(file => transfer.items.add(file));
+                                        node.files = transfer.files;
+                                    }
+                                    selected.current = next;
+                                    setFiles(next);
+                                    onChange?.(event);
+                                    onFilesChange?.(next);
+                                } }), _jsxs("span", { className: "flood-file-input__display", "aria-hidden": "true", "data-empty": files.length === 0 || undefined, children: [_jsx(Icon, { size: controlSize, children: _jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.75", strokeLinecap: "round", strokeLinejoin: "round", children: _jsx("path", { d: "M12 16V3m-4 4 4-4 4 4M4 15v5a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1v-5" }) }) }), _jsx("span", { className: "flood-file-input__summary", title: summary || undefined, children: summary || placeholder || (multiple ? "Choose files" : "Choose a file") })] })] }), clearable && files.length > 0 && _jsx("div", { className: "flood-input-group__addon flood-input-group__addon--end", children: _jsx(Action, { label: clearLabel, size: controlSize, variant: "ghost", disabled: disabled, onPointerDown: event => event.preventDefault(), onClick: clear, children: cross }) })] }), multiple && files.length > 0 && _jsxs("details", { className: "flood-file-input__selection", open: true, children: [_jsxs("summary", { children: [selectionLabel, _jsx("span", { className: "flood-file-input__count", children: files.length })] }), _jsx("ul", { className: "flood-file-input__list", children: files.map((file, index) => _jsxs("li", { className: "flood-file-input__file", children: [_jsxs("span", { className: "flood-file-input__metadata", children: [_jsx("span", { className: "flood-file-input__name", dir: "auto", children: file.name }), _jsx("span", { className: "flood-file-input__size", children: fileSize(file.size) })] }), clearable && _jsx(Action, { label: `${removeFileLabel} ${file.name}`, size: "sm", variant: "ghost", disabled: disabled, onClick: event => {
+                                        const node = input.current;
+                                        if (!node || node.matches(":disabled"))
+                                            return;
+                                        const list = event.currentTarget.closest("ul");
+                                        notify(Array.from(node.files ?? []).filter((_, position) => position !== index));
+                                        node.ownerDocument.defaultView.requestAnimationFrame(() => {
+                                            if (!node.isConnected)
+                                                return;
+                                            const buttons = list.querySelectorAll("button");
+                                            (buttons[Math.min(index, buttons.length - 1)] ?? node).focus();
+                                        });
+                                    }, children: cross })] }, `${file.name}-${file.lastModified}-${index}`)) })] })] });
+});

package/dist/focusable-hidden.d.ts

@@ -0,0 +1,3 @@
+import { type Ref, type RefCallback } from "react";
+/** A native ref adapter; does not replace handlers or clone rich child content. */
+export declare function useFocusableHidden<T extends HTMLElement>(enabled: boolean, forwardedRef?: Ref<T>): RefCallback<T>;

package/dist/focusable-hidden.js

@@ -0,0 +1,99 @@
+import { useCallback, useEffect, useLayoutEffect, useRef } from "react";
+const useBrowserLayoutEffect = typeof window === "undefined" ? useEffect : useLayoutEffect;
+const heldAttribute = "data-flood-focus-held";
+const scopes = new WeakMap();
+/** Keep in-flow focus reveal stable until the native pointer gesture completes. */
+function createScope(document) {
+    const view = document.defaultView;
+    const entries = new Set(), held = new Set(), pointers = new Set();
+    let releaseTask;
+    const cancelTask = () => { if (releaseTask !== undefined)
+        view.clearTimeout(releaseTask); releaseTask = undefined; };
+    const release = () => { cancelTask(); held.forEach(node => node.removeAttribute(heldAttribute)); held.clear(); };
+    const releaseAfterDispatch = () => {
+        if (pointers.size || !held.size)
+            return;
+        cancelTask();
+        // A task, rather than a microtask, keeps the reveal through all native click
+        // listeners. Pointerup also schedules this fallback when no click is fired.
+        releaseTask = view.setTimeout(() => { releaseTask = undefined; if (!pointers.size)
+            release(); }, 0);
+    };
+    const down = (event) => {
+        if (event.button !== 0)
+            return;
+        cancelTask();
+        pointers.add(event.pointerId);
+        entries.forEach(entry => {
+            if (entry.enabled() && entry.node.matches(":focus-within")) {
+                entry.node.setAttribute(heldAttribute, "");
+                held.add(entry.node);
+            }
+        });
+    };
+    const up = (event) => { pointers.delete(event.pointerId); releaseAfterDispatch(); };
+    const click = () => releaseAfterDispatch();
+    const cancel = (event) => { pointers.delete(event.pointerId); if (!pointers.size)
+        release(); };
+    const blur = () => { pointers.clear(); release(); };
+    document.addEventListener("pointerdown", down, true);
+    document.addEventListener("pointerup", up, true);
+    document.addEventListener("click", click, true);
+    document.addEventListener("pointercancel", cancel, true);
+    view.addEventListener("blur", blur);
+    const scope = { add(entry) {
+            entries.add(entry);
+            return () => {
+                entries.delete(entry);
+                held.delete(entry.node);
+                entry.node.removeAttribute(heldAttribute);
+                if (entries.size)
+                    return;
+                pointers.clear();
+                release();
+                document.removeEventListener("pointerdown", down, true);
+                document.removeEventListener("pointerup", up, true);
+                document.removeEventListener("click", click, true);
+                document.removeEventListener("pointercancel", cancel, true);
+                view.removeEventListener("blur", blur);
+                scopes.delete(document);
+            };
+        } };
+    return scope;
+}
+/** A native ref adapter; does not replace handlers or clone rich child content. */
+export function useFocusableHidden(enabled, forwardedRef) {
+    const node = useRef(null), active = useRef(enabled), disconnect = useRef(() => { });
+    const forwardedCleanup = useRef(undefined);
+    useBrowserLayoutEffect(() => {
+        active.current = enabled;
+        if (!enabled)
+            node.current?.removeAttribute(heldAttribute);
+    }, [enabled]);
+    return useCallback((element) => {
+        disconnect.current();
+        disconnect.current = () => { };
+        node.current = element;
+        if (element?.ownerDocument.defaultView) {
+            const document = element.ownerDocument;
+            let scope = scopes.get(document);
+            if (!scope) {
+                scope = createScope(document);
+                scopes.set(document, scope);
+            }
+            disconnect.current = scope.add({ node: element, enabled: () => active.current });
+        }
+        if (typeof forwardedRef === "function") {
+            const previousCleanup = forwardedCleanup.current;
+            forwardedCleanup.current = undefined;
+            previousCleanup?.();
+            if (element !== null || !previousCleanup) {
+                const cleanup = forwardedRef(element);
+                if (typeof cleanup === "function")
+                    forwardedCleanup.current = cleanup;
+            }
+        }
+        else if (forwardedRef)
+            forwardedRef.current = element;
+    }, [forwardedRef]);
+}

package/dist/fonts/README.md

@@ -1,18 +1,22 @@
 # Inter font asset
 
-`InterVariable.woff2` is an unmodified third-party font by the Inter Project
+`InterVariable.woff2` and `InterVariable-Italic.woff2` are unmodified third-party fonts by the Inter Project
 Authors, distributed under the [SIL Open Font License 1.1](LICENSE.txt).
-It is not original Flood artwork. Retain the license with redistributed copies.
+They are not original Flood artwork. Retain the license with redistributed copies.
 
 - Official source: <https://github.com/rsms/inter/releases/tag/v4.1>
 - Archive: <https://github.com/rsms/inter/releases/download/v4.1/Inter-4.1.zip>
-- Archive member: `web/InterVariable.woff2`
+- Normal archive member: `web/InterVariable.woff2`
+- Italic archive member: `web/InterVariable-Italic.woff2`
 - Font internal version: `Version 4.001;git-9221beed3`
 - Variable axes: weight 100–900; optical size 14–32.
 - SHA-256: `693b77d4f32ee9b8bfc995589b5fad5e99adf2832738661f5402f9978429a8e3`
+- Italic SHA-256: `e564f652916db6c139570fefb9524a77c4d48f30c92928de9db19b6b5c7a262a`
 - License SHA-256: `262481e844521b326f5ecd053e59b98c8b2da78c8ee1bdbb6e8174305e54935a`
 
 The full upstream font includes Cyrillic; it has not been subsetted or converted.
 The original `LICENSE.txt` is copied verbatim from the same release archive.
-The asset supplies normal variable weights, including the Flood 400/500 roles;
-italic text needs a separate face or an explicitly documented fallback.
+Both assets supply weight 100–900 and optical size 14–32, including Flood's 400/500
+roles. CSS registers separate normal and italic faces under Inter; native em/i
+content uses the real italic asset instead of synthetic slant. Both files include
+Latin and Cyrillic and retain the same unmodified upstream license.

package/dist/form-controls.d.ts

@@ -0,0 +1,6 @@
+import type { ListBoxProps, PinInputProps, RatingProps, DropzoneProps, CharacterCountProps } from "./index.js";
+export declare const CollectionListBox: import("react").ForwardRefExoticComponent<ListBoxProps & import("react").RefAttributes<HTMLDivElement>>;
+export declare const SegmentedPinInput: import("react").ForwardRefExoticComponent<PinInputProps & import("react").RefAttributes<HTMLInputElement>>;
+export declare const StarRating: import("react").ForwardRefExoticComponent<RatingProps & import("react").RefAttributes<HTMLFieldSetElement>>;
+export declare const FileDropzone: import("react").ForwardRefExoticComponent<DropzoneProps & import("react").RefAttributes<HTMLInputElement>>;
+export declare const SupportingCharacterCount: import("react").ForwardRefExoticComponent<CharacterCountProps & import("react").RefAttributes<HTMLOutputElement>>;

package/dist/form-controls.js

@@ -0,0 +1,250 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useEffect, useId, useImperativeHandle, useRef, useState } from "react";
+import { FileInput } from "./index.js";
+import { resolveFieldStatus, mergeDescriptions } from "./field-state.js";
+const cx = (...values) => values.filter(Boolean).join(" ");
+function useNativeReset(ref, form, reset) {
+    const callback = useRef(reset);
+    useEffect(() => { callback.current = reset; }, [reset]);
+    useEffect(() => {
+        const owner = ref.current?.form;
+        if (!owner)
+            return;
+        let timer;
+        const listener = (event) => { timer = setTimeout(() => { if (!event.defaultPrevented && ref.current)
+            callback.current(); }, 0); };
+        owner.addEventListener("reset", listener);
+        return () => { owner.removeEventListener("reset", listener); clearTimeout(timer); };
+    }, [ref, form]);
+}
+function useInheritedDisabled(ref, disabled) {
+    const [inherited, setInherited] = useState(false);
+    useEffect(() => {
+        const node = ref.current;
+        if (!node)
+            return;
+        const update = () => setInherited(node.matches(":disabled"));
+        update();
+        const observer = new node.ownerDocument.defaultView.MutationObserver(update);
+        let ancestor = node.parentElement;
+        while (ancestor) {
+            if (ancestor.localName === "fieldset")
+                observer.observe(ancestor, { attributes: true, attributeFilter: ["disabled"] });
+            ancestor = ancestor.parentElement;
+        }
+        return () => observer.disconnect();
+    }, [ref, disabled]);
+    return disabled || inherited;
+}
+export const CollectionListBox = forwardRef(function CollectionListBox({ label, hideLabel = false, options, value, defaultValue, onValueChange, multiple = false, disabled = false, readOnly = false, name, form, controlSize = "md", id: explicitId, className, onKeyDown, onFocus, ...props }, forwardedRef) {
+    const generated = useId(), id = explicitId ?? `flood-list-box-${generated}`;
+    const root = useRef(null), bridge = useRef(null);
+    useImperativeHandle(forwardedRef, () => root.current, []);
+    const unique = new Set();
+    for (const option of options) {
+        if (!option.value || !option.label.trim() || unique.has(option.value))
+            throw new Error("Flood ListBox options need unique nonempty values and labels");
+        unique.add(option.value);
+    }
+    const normalize = (raw) => {
+        const entries = typeof raw === "string" ? [raw] : [...raw ?? []];
+        const result = [...new Set(entries)].filter(entry => unique.has(entry));
+        return multiple ? result : result.slice(0, 1);
+    };
+    const initial = useRef(defaultValue), [local, setLocal] = useState(() => normalize(defaultValue));
+    const selected = normalize(value === undefined ? local : value);
+    const first = Math.max(0, options.findIndex(option => !option.disabled));
+    const [active, setActive] = useState(() => { const index = options.findIndex(option => selected.includes(option.value) && !option.disabled); return index < 0 ? first : index; });
+    const effectiveDisabled = useInheritedDisabled(bridge, disabled);
+    const search = useRef({ text: "", time: 0 });
+    useNativeReset(bridge, form, () => { if (value === undefined) {
+        setLocal(normalize(initial.current));
+        setActive(first);
+    } });
+    const blocked = () => effectiveDisabled || bridge.current?.matches(":disabled");
+    const commit = (index) => {
+        const option = options[index];
+        if (!option || option.disabled || blocked() || readOnly)
+            return;
+        const next = multiple ? selected.includes(option.value) ? selected.filter(entry => entry !== option.value) : [...selected, option.value] : [option.value];
+        if (value === undefined)
+            setLocal(next);
+        onValueChange?.(multiple ? [...next] : next[0] ?? "");
+    };
+    const move = (index, choose = !multiple) => {
+        setActive(index);
+        if (choose)
+            commit(index);
+        const target = root.current?.ownerDocument.getElementById(`${id}-option-${index}`);
+        target?.scrollIntoView({ block: "nearest" });
+    };
+    return _jsxs("div", { className: "flood-list-box-field", hidden: props.hidden, dir: props.dir, lang: props.lang, children: [_jsx("span", { id: `${id}-label`, className: cx("flood-form-control__label", hideLabel && "flood-form-control__sr-only"), children: label }), _jsxs("div", { ...props, ref: root, id: id, role: "listbox", tabIndex: effectiveDisabled ? -1 : props.tabIndex ?? 0, "aria-label": props["aria-label"], "aria-labelledby": props["aria-label"] ? undefined : props["aria-labelledby"] ?? `${id}-label`, "aria-multiselectable": multiple || undefined, "aria-disabled": effectiveDisabled || undefined, "aria-readonly": readOnly || undefined, "aria-activedescendant": options[active] ? `${id}-option-${active}` : undefined, className: cx("flood-list-box", `flood-control--${controlSize}`, className), onFocus: event => { onFocus?.(event); if (!options[active] || options[active].disabled)
+                    setActive(first); }, onKeyDown: event => {
+                    onKeyDown?.(event);
+                    if (event.defaultPrevented || event.altKey || event.ctrlKey || event.metaKey || event.nativeEvent.isComposing || blocked())
+                        return;
+                    const enabled = options.map((option, index) => !option.disabled ? index : -1).filter(index => index >= 0);
+                    if (!enabled.length)
+                        return;
+                    const position = enabled.indexOf(active);
+                    if (["ArrowDown", "ArrowUp", "Home", "End"].includes(event.key)) {
+                        event.preventDefault();
+                        const next = event.key === "Home" ? enabled[0] : event.key === "End" ? enabled.at(-1) : event.key === "ArrowDown" ? enabled[(position + 1) % enabled.length] : enabled[(position - 1 + enabled.length) % enabled.length];
+                        move(next);
+                        return;
+                    }
+                    if (event.key === " " || event.key === "Enter") {
+                        event.preventDefault();
+                        commit(active);
+                        return;
+                    }
+                    if (event.key.length === 1) {
+                        event.preventDefault();
+                        const time = Date.now(), previous = time - search.current.time < 700 ? search.current.text : "";
+                        const text = previous + event.key.toLocaleLowerCase(props.lang);
+                        search.current = { text, time };
+                        const query = [...text].every(letter => letter === text[0]) ? text[0] : text;
+                        const match = [...enabled.slice(position + 1), ...enabled.slice(0, position + 1)].find(index => options[index].label.toLocaleLowerCase(props.lang).startsWith(query));
+                        if (match !== undefined)
+                            move(match);
+                    }
+                }, children: [options.map((option, index) => _jsxs("div", { id: `${id}-option-${index}`, role: "option", "aria-selected": selected.includes(option.value), "aria-disabled": option.disabled || undefined, "data-active": index === active || undefined, className: "flood-list-box__option", onClick: () => { if (blocked())
+                            return; root.current?.focus(); setActive(index); commit(index); }, children: [_jsxs("span", { className: "flood-list-box__copy", children: [_jsx("span", { children: option.label }), option.description && _jsx("span", { className: "flood-list-box__description", children: option.description })] }), _jsx("span", { className: "flood-list-box__check", "aria-hidden": "true", children: selected.includes(option.value) ? "✓" : "" })] }, option.value)), !options.length && _jsx("div", { role: "option", "aria-disabled": "true", className: "flood-list-box__option", children: "No options" })] }), _jsx("input", { ref: bridge, type: "hidden", form: form, disabled: disabled }), name && selected.map(entry => _jsx("input", { type: "hidden", name: name, value: entry, form: form, disabled: disabled }, entry))] });
+});
+export const SegmentedPinInput = forwardRef(function SegmentedPinInput({ label, hideLabel = false, length = 6, mode = "numeric", mask = false, value, defaultValue = "", onValueChange, controlSize = "md", disabled, readOnly, className, style, status, invalid, id: explicitId, onFocus, onBlur, onSelect, onPointerDown, onPaste, onKeyUp, autoComplete = "one-time-code", inputMode, ...props }, forwardedRef) {
+    if (!Number.isInteger(length) || length < 1 || length > 12)
+        throw new Error("Flood PinInput length must be an integer from 1 to 12");
+    const clean = (text) => text.replace(mode === "numeric" ? /[^0-9]/g : /[^a-zA-Z0-9]/g, "").slice(0, length);
+    const initial = useRef(clean(defaultValue)), [local, setLocal] = useState(initial.current);
+    const text = clean(value ?? local), input = useRef(null), generated = useId(), id = explicitId ?? `flood-pin-${generated}`;
+    const [active, setActive] = useState(0), [focused, setFocused] = useState(false);
+    useImperativeHandle(forwardedRef, () => input.current, []);
+    useNativeReset(input, props.form, () => { if (value === undefined) {
+        setLocal(initial.current);
+        setActive(0);
+    } });
+    const syncCaret = () => setActive(Math.min(input.current?.selectionStart ?? 0, length - 1));
+    const insert = (next, caret) => {
+        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, next);
+        node.dispatchEvent(new view.Event("input", { bubbles: true }));
+        node.setSelectionRange(caret, caret);
+        syncCaret();
+    };
+    return _jsxs("div", { className: "flood-pin-input-field", hidden: props.hidden, dir: props.dir, lang: props.lang, children: [_jsx("label", { htmlFor: id, className: cx("flood-form-control__label", hideLabel && "flood-form-control__sr-only"), children: label }), _jsxs("div", { className: cx("flood-pin-input", `flood-control--${controlSize}`, className), style: style, "data-status": resolveFieldStatus(status, invalid, props["aria-invalid"]), "data-disabled": disabled || undefined, "data-readonly": readOnly || undefined, children: [_jsx("input", { ...props, id: id, ref: input, className: "flood-pin-input__editor", type: mask ? "password" : "text", value: text, maxLength: length, disabled: disabled, readOnly: readOnly, autoComplete: autoComplete, inputMode: inputMode ?? (mode === "numeric" ? "numeric" : "text"), pattern: mode === "numeric" ? `[0-9]{${length}}` : `[a-zA-Z0-9]{${length}}`, "aria-invalid": invalid || status === "error" || props["aria-invalid"], onChange: event => { const next = clean(event.currentTarget.value); if (value === undefined)
+                            setLocal(next); onValueChange?.(next); syncCaret(); }, onFocus: event => { setFocused(true); syncCaret(); onFocus?.(event); }, onBlur: event => { setFocused(false); onBlur?.(event); }, onSelect: event => { syncCaret(); onSelect?.(event); }, onKeyUp: event => { syncCaret(); onKeyUp?.(event); }, onPointerDown: event => {
+                            onPointerDown?.(event);
+                            if (event.defaultPrevented || event.button !== 0 || disabled)
+                                return;
+                            const slots = Array.from(event.currentTarget.parentElement.querySelectorAll("[data-pin-slot]"));
+                            const index = slots.findIndex(slot => { const rect = slot.getBoundingClientRect(); return event.clientX >= rect.left && event.clientX <= rect.right; });
+                            if (index < 0)
+                                return;
+                            event.preventDefault();
+                            event.currentTarget.focus();
+                            const position = Math.min(index, text.length);
+                            // A filled visual slot edits its character, rather than placing the caret
+                            // before it (which makes Backspace on the first slot appear unresponsive).
+                            event.currentTarget.setSelectionRange(position, position < text.length ? position + 1 : position);
+                            setActive(Math.min(position, length - 1));
+                        }, onPaste: event => {
+                            onPaste?.(event);
+                            if (event.defaultPrevented || readOnly || disabled)
+                                return;
+                            event.preventDefault();
+                            const node = event.currentTarget, start = node.selectionStart ?? 0, end = node.selectionEnd ?? start;
+                            const pasted = clean(event.clipboardData.getData("text")), next = clean(text.slice(0, start) + pasted + text.slice(end));
+                            insert(next, Math.min(start + pasted.length, length));
+                        } }), Array.from({ length }, (_, index) => _jsx("span", { "data-pin-slot": "", "aria-hidden": "true", className: "flood-pin-input__slot", "data-active": focused && index === active || undefined, children: text[index] ? mask ? "•" : text[index] : "" }, index))] })] });
+});
+export const StarRating = forwardRef(function StarRating({ label, hideLabel = false, value, defaultValue = 0, max = 5, onValueChange, getValueLabel, readOnly = false, required, name, form, size = "md", disabled, className, onKeyDown, ...props }, forwardedRef) {
+    if (!name?.trim())
+        throw new Error("Flood Rating requires a nonempty native group name");
+    if (!Number.isInteger(max) || max < 1 || max > 10)
+        throw new Error("Flood Rating max must be an integer from 1 to 10");
+    if (![value ?? 0, defaultValue].every(entry => Number.isInteger(entry) && entry >= 0 && entry <= max))
+        throw new Error("Flood Rating values must be integers from zero to max");
+    const root = useRef(null), first = useRef(null), initial = useRef(defaultValue);
+    useImperativeHandle(forwardedRef, () => root.current, []);
+    const [local, setLocal] = useState(defaultValue), [hover, setHover] = useState(null), current = value ?? local;
+    useNativeReset(first, form, () => {
+        if (value === undefined)
+            setLocal(initial.current);
+        else
+            root.current?.querySelectorAll('input[type="radio"]').forEach(input => { input.checked = Number(input.value) === value; });
+    });
+    const change = (next) => { if (readOnly || disabled || first.current?.matches(":disabled"))
+        return; if (value === undefined)
+        setLocal(next); onValueChange?.(next); };
+    const display = hover ?? current;
+    return _jsxs("fieldset", { ...props, ref: root, disabled: disabled, form: form, role: "radiogroup", "aria-readonly": readOnly || undefined, className: cx("flood-rating", `flood-rating--${size}`, className), onPointerLeave: () => setHover(null), onKeyDown: event => {
+            onKeyDown?.(event);
+            if (event.defaultPrevented || event.altKey || event.ctrlKey || event.metaKey || event.nativeEvent.isComposing || disabled)
+                return;
+            const inputs = Array.from(event.currentTarget.querySelectorAll('input[type="radio"]:not(:disabled)'));
+            const index = inputs.indexOf(event.target);
+            if (index < 0 || !inputs.length)
+                return;
+            const rtl = getComputedStyle(event.currentTarget).direction === "rtl";
+            let next = -1;
+            if (event.key === "Home")
+                next = 0;
+            else if (event.key === "End")
+                next = inputs.length - 1;
+            else if (event.key === "ArrowUp" || event.key === (rtl ? "ArrowLeft" : "ArrowRight"))
+                next = (index + 1) % inputs.length;
+            else if (event.key === "ArrowDown" || event.key === (rtl ? "ArrowRight" : "ArrowLeft"))
+                next = (index - 1 + inputs.length) % inputs.length;
+            if (next >= 0) {
+                event.preventDefault();
+                inputs[next].focus();
+                change(next + 1);
+            }
+            else if (readOnly && event.key === " ")
+                event.preventDefault();
+        }, children: [_jsx("legend", { className: cx("flood-form-control__label", hideLabel && "flood-form-control__sr-only"), children: label }), _jsx("div", { className: "flood-rating__choices", children: Array.from({ length: max }, (_, index) => {
+                    const number = index + 1;
+                    return _jsxs("label", { className: "flood-rating__choice", "data-filled": number <= display || undefined, onPointerEnter: () => { if (!readOnly && !disabled && !first.current?.matches(":disabled"))
+                            setHover(number); }, children: [_jsx("input", { ref: index === 0 ? first : undefined, type: "radio", name: name, form: form, value: number, required: required, disabled: disabled, checked: current === number, tabIndex: current === number || current === 0 && number === 1 ? 0 : -1, "aria-label": getValueLabel?.(number, max) ?? `${number} of ${max} stars`, onClick: event => { if (readOnly)
+                                    event.preventDefault(); }, onChange: () => change(number) }), _jsx("svg", { "aria-hidden": "true", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.6", strokeLinejoin: "round", children: _jsx("path", { d: "m12 3 2.8 5.8 6.4.9-4.6 4.5 1.1 6.4-5.7-3-5.7 3 1.1-6.4-4.6-4.5 6.4-.9L12 3Z" }) })] }, number);
+                }) })] });
+});
+export const FileDropzone = forwardRef(function FileDropzone({ label, description = "Drop files here or choose from your device.", multiple = true, disabled, className, style, id: explicitId, status, invalid, ...props }, forwardedRef) {
+    const input = useRef(null), generated = useId(), id = explicitId ?? `flood-dropzone-${generated}`;
+    useImperativeHandle(forwardedRef, () => input.current, []);
+    const [dragging, setDragging] = useState(false), depth = useRef(0);
+    const isFiles = (types) => Array.from(types).includes("Files");
+    return _jsxs("div", { hidden: props.hidden, dir: props.dir, lang: props.lang, style: style, className: cx("flood-dropzone", className), "data-dragging": dragging || undefined, "data-disabled": disabled || undefined, "data-status": resolveFieldStatus(status, invalid, props["aria-invalid"]), onDragEnter: event => { if (!isFiles(event.dataTransfer.types))
+            return; event.preventDefault(); depth.current++; if (!disabled && !input.current?.matches(":disabled"))
+            setDragging(true); }, onDragLeave: event => { if (!isFiles(event.dataTransfer.types))
+            return; depth.current = Math.max(0, depth.current - 1); if (!depth.current)
+            setDragging(false); }, onDragOver: event => { if (!isFiles(event.dataTransfer.types))
+            return; event.preventDefault(); event.dataTransfer.dropEffect = disabled || input.current?.matches(":disabled") ? "none" : "copy"; }, onDrop: event => {
+            if (!isFiles(event.dataTransfer.types))
+                return;
+            event.preventDefault();
+            depth.current = 0;
+            setDragging(false);
+            const node = input.current;
+            if (!node || disabled || node.matches(":disabled"))
+                return;
+            const picked = Array.from(event.dataTransfer.files);
+            if (!picked.length)
+                return;
+            const transfer = new node.ownerDocument.defaultView.DataTransfer();
+            (multiple ? picked : picked.slice(0, 1)).forEach(file => transfer.items.add(file));
+            node.files = transfer.files;
+            node.dispatchEvent(new node.ownerDocument.defaultView.Event("change", { bubbles: true }));
+        }, children: [_jsxs("div", { className: "flood-dropzone__intro", children: [_jsxs("label", { htmlFor: id, className: "flood-dropzone__label", children: [_jsx("svg", { "aria-hidden": "true", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.75", strokeLinecap: "round", strokeLinejoin: "round", children: _jsx("path", { d: "M12 16V3m-4 4 4-4 4 4M4 15v5a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1v-5" }) }), _jsx("span", { children: label })] }), description && _jsx("p", { id: `${id}-description`, className: "flood-dropzone__description", children: description })] }), _jsx(FileInput, { ...props, ref: input, id: id, multiple: multiple, disabled: disabled, status: status, invalid: invalid, "aria-describedby": mergeDescriptions(props["aria-describedby"], Boolean(description) && `${id}-description`) })] });
+});
+export const SupportingCharacterCount = forwardRef(function SupportingCharacterCount({ value = "", count, max, mode = "count", label = "Characters", overLimitLabel = "Over limit", className, ...props }, ref) {
+    const current = count ?? [...value].length;
+    if (!Number.isInteger(current) || current < 0 || max !== undefined && (!Number.isInteger(max) || max < 0))
+        throw new Error("Flood CharacterCount requires nonnegative integer counts and limits");
+    const over = max !== undefined && current > max, number = new Intl.NumberFormat(props.lang);
+    const text = mode === "remaining" && max !== undefined ? number.format(max - current) : max === undefined ? number.format(current) : `${number.format(current)} / ${number.format(max)}`;
+    return _jsxs("output", { ...props, ref: ref, "aria-live": props["aria-live"] ?? "off", className: cx("flood-character-count", className), "data-over-limit": over || undefined, "aria-label": props["aria-label"] ?? `${label}: ${text}${over ? `. ${overLimitLabel}` : ""}`, children: [_jsx("span", { children: text }), over && _jsx("span", { className: "flood-character-count__warning", children: overLimitLabel })] });
+});