@flood-md/react 0.2.5 → 0.2.8

package/dist/color-controls.js

@@ -0,0 +1,110 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useEffect, useId, useImperativeHandle, useLayoutEffect, useRef, useState } from "react";
+import { Input, Label, Slider } from "./index.js";
+const useBrowserLayoutEffect = typeof window === "undefined" ? useEffect : useLayoutEffect;
+/** The first color contract deliberately accepts only opaque RGB hex values. */
+export function normalizeHexColor(value) {
+    const text = value.trim().toLowerCase();
+    if (/^#[0-9a-f]{6}$/.test(text))
+        return text;
+    if (/^#[0-9a-f]{3}$/.test(text))
+        return `#${[...text.slice(1)].map(character => character + character).join("")}`;
+    return undefined;
+}
+function checkedColor(value) {
+    const normalized = normalizeHexColor(value);
+    if (!normalized)
+        throw new Error("Flood color values must be opaque #rgb or #rrggbb hex strings");
+    return normalized;
+}
+const cx = (...values) => values.filter(Boolean).join(" ");
+export const ColorPreview = /* @__PURE__ */ forwardRef(function ColorPreview({ value, label, size = "md", className, style, ...props }, ref) {
+    if (!label.trim())
+        throw new Error("Flood ColorSwatch requires a nonempty label");
+    const color = checkedColor(value);
+    return _jsx("span", { ...props, ref: ref, role: "img", "aria-label": label, className: cx("flood-color-swatch", `flood-color-swatch--${size}`, className), style: { ...style, backgroundColor: color } });
+});
+export const ColorEditor = /* @__PURE__ */ forwardRef(function ColorEditor({ label, hideLabel = false, value, defaultValue = "", onValueChange, name, form, required = false, disabled = false, readOnly = false, controlSize = "md", presets = [], invalidMessage = "Enter a color in #rrggbb format.", hexLabel = "Hex", channelLabels = ["Red", "Green", "Blue"], presetsLabel = "Preset colors", id: explicitId, className, ...props }, ref) {
+    if (![label, invalidMessage, hexLabel, presetsLabel, ...channelLabels].every(text => text.trim()) || channelLabels.length !== 3)
+        throw new Error("Flood ColorPicker requires nonempty labels and three channel names");
+    const canonical = (color) => color === "" ? "" : checkedColor(color);
+    const initial = useRef(canonical(defaultValue));
+    const [local, setLocal] = useState(initial.current);
+    const current = value === undefined ? local : canonical(value);
+    const [draft, setDraft] = useState(current), [showError, setShowError] = useState(false);
+    const pending = useRef(undefined);
+    const previous = useRef({ current, readOnly });
+    const input = useRef(null);
+    const generated = useId(), id = explicitId ?? `flood-color-picker-${generated}`;
+    const choices = [...new Set(presets.map(checkedColor))];
+    useImperativeHandle(ref, () => input.current, []);
+    useBrowserLayoutEffect(() => {
+        // Keep the user's short valid spelling while they continue typing six digits.
+        // A refused controlled request restores the host's accepted value instead.
+        if (pending.current !== undefined) {
+            if (pending.current !== current)
+                setDraft(current);
+            pending.current = undefined;
+        }
+        else if (previous.current.current !== current || previous.current.readOnly !== readOnly)
+            setDraft(current);
+        previous.current = { current, readOnly };
+    });
+    const invalidDraft = draft !== "" && !normalizeHexColor(draft);
+    const message = readOnly ? "" : invalidDraft || (required && !current) ? invalidMessage : "";
+    useBrowserLayoutEffect(() => { input.current?.setCustomValidity(message); });
+    const controlled = useRef(value !== undefined);
+    controlled.current = value !== undefined;
+    useEffect(() => {
+        const owner = input.current?.form;
+        if (!owner)
+            return;
+        const timers = new Set();
+        const reset = (event) => {
+            const timer = setTimeout(() => {
+                timers.delete(timer);
+                if (event.defaultPrevented || !input.current)
+                    return;
+                if (!controlled.current) {
+                    setLocal(initial.current);
+                    setDraft(initial.current);
+                }
+                else
+                    setDraft(input.current.dataset.acceptedValue ?? "");
+                setShowError(false);
+            }, 0);
+            timers.add(timer);
+        };
+        owner.addEventListener("reset", reset);
+        return () => { owner.removeEventListener("reset", reset); timers.forEach(clearTimeout); };
+    }, [form]);
+    const blocked = () => disabled || readOnly || input.current?.matches(":disabled");
+    const commit = (next, raw = next) => {
+        if (blocked())
+            return;
+        pending.current = next;
+        setDraft(raw);
+        if (value === undefined)
+            setLocal(next);
+        setShowError(false);
+        if (next !== current)
+            onValueChange?.(next);
+    };
+    const channels = [0, 1, 2].map(index => parseInt((current || "#000000").slice(index * 2 + 1, index * 2 + 3), 16));
+    return _jsxs("div", { ...props, id: id, className: cx("flood-color-picker", className), role: "group", "aria-labelledby": props["aria-label"] ? undefined : props["aria-labelledby"] ?? `${id}-label`, "data-disabled": disabled || undefined, "data-readonly": readOnly || undefined, children: [_jsx(Label, { id: `${id}-label`, htmlFor: `${id}-hex`, required: required, className: hideLabel ? "flood-visually-hidden" : undefined, children: label }), _jsxs("div", { className: "flood-color-picker__panel", children: [_jsxs("div", { className: "flood-color-picker__value", children: [current ? _jsx(ColorPreview, { value: current, label: current, size: "lg" }) : _jsx("span", { className: "flood-color-picker__empty", "aria-hidden": "true" }), _jsxs("div", { className: "flood-color-picker__hex", children: [_jsx(Label, { htmlFor: `${id}-hex`, children: hexLabel }), _jsx(Input, { ref: input, id: `${id}-hex`, form: form, value: draft, "data-accepted-value": current, autoComplete: "off", autoCapitalize: "off", spellCheck: false, dir: "ltr", placeholder: "#rrggbb", controlSize: controlSize, readOnly: readOnly, disabled: disabled, required: required, "aria-invalid": showError && Boolean(message) || undefined, "aria-describedby": [props["aria-describedby"], showError && message ? `${id}-error` : undefined].filter(Boolean).join(" ") || undefined, onChange: event => {
+                                            if (blocked())
+                                                return;
+                                            const text = event.currentTarget.value;
+                                            setDraft(text);
+                                            setShowError(false);
+                                            const normalized = normalizeHexColor(text);
+                                            if (!text || normalized)
+                                                commit(normalized ?? "", text);
+                                        }, onBlur: () => { if (!message)
+                                            setDraft(current);
+                                        else if (!readOnly)
+                                            setShowError(true); }, onInvalid: () => setShowError(true) })] })] }), _jsx("div", { className: "flood-color-picker__channels", children: channelLabels.map((channel, index) => _jsx(Slider, { label: channel, min: 0, max: 255, step: 1, value: [channels[index]], controlSize: "sm", disabled: disabled, readOnly: readOnly, form: form, onValueChange: next => {
+                                const numbers = channels.map((number, position) => position === index ? next[0] : number);
+                                commit(`#${numbers.map(number => number.toString(16).padStart(2, "0")).join("")}`);
+                            } }, index)) }), choices.length > 0 && _jsx("div", { className: "flood-color-picker__presets", role: "group", "aria-label": presetsLabel, children: choices.map(color => _jsx("button", { type: "button", className: "flood-color-picker__preset", "aria-label": color, "aria-pressed": current === color, "aria-disabled": readOnly || undefined, disabled: disabled, onClick: () => commit(color), children: _jsx(ColorPreview, { value: color, label: color, size: "sm", "aria-hidden": "true" }) }, color)) })] }), name && _jsx("input", { type: "hidden", name: name, form: form, value: invalidDraft && !readOnly ? "" : current, disabled: disabled }), showError && message && _jsx("span", { id: `${id}-error`, className: "flood-error", role: "alert", children: message })] });
+});

package/dist/combobox.js

@@ -6,7 +6,7 @@ import { positionLayer, registerLayer } from "./overlay-runtime.js";
 const useBrowserLayoutEffect = typeof window === "undefined" ? useEffect : useLayoutEffect;
 const searchable = (text) => text.normalize("NFKD").replace(/\p{M}/gu, "").toLowerCase();
 /** Shared search/layer model. Public single and multiple value contracts stay distinct. */
-export const SearchSelection = forwardRef(function SearchSelection({ options, selectedValues: value, initialValues: defaultValue, onSelectionChange: onValueChange, multiple = false, removeItemLabel = "Remove", clearable = false, emptyMessage = "No results found.", listLabel = "Options", toggleLabel = "Show options", clearLabel = "Clear selection", invalidSelectionMessage = "Select an option.", controlSize = "md", readOnly, disabled, required, name, id: explicitId, className, onKeyDown, onBlur, onClick, onInvalid, autoComplete = "off", ...props }, forwardedRef) {
+export const SearchSelection = /* @__PURE__ */ forwardRef(function SearchSelection({ options, selectedValues: value, initialValues: defaultValue, onSelectionChange: onValueChange, multiple = false, removeItemLabel = "Remove", clearable = false, emptyMessage = "No results found.", listLabel = "Options", toggleLabel = "Show options", clearLabel = "Clear selection", invalidSelectionMessage = "Select an option.", controlSize = "md", readOnly, disabled, required, name, id: explicitId, className, onKeyDown, onBlur, onClick, onInvalid, autoComplete = "off", ...props }, forwardedRef) {
     if (new Set(options.map(option => option.value)).size !== options.length || options.some(option => !option.value || !option.label.trim()))
         throw new Error("Flood Combobox options need unique nonempty values and labels");
     if (![emptyMessage, listLabel, toggleLabel, clearLabel, invalidSelectionMessage].every(text => text.trim()))
@@ -74,23 +74,32 @@ export const SearchSelection = forwardRef(function SearchSelection({ options, se
         setOpen(true);
     };
     useBrowserLayoutEffect(() => {
-        input.current?.setCustomValidity(required && !selections.length ? invalidSelectionMessage : "");
-    }, [required, selections.length, invalidSelectionMessage]);
+        const control = input.current;
+        control?.setCustomValidity(required && !selections.length ? invalidSelectionMessage : "");
+        if (validation && control?.validity.valid)
+            setValidation("");
+    });
     useEffect(() => {
         const form = input.current?.form;
         if (!form)
             return;
-        const reset = (event) => queueMicrotask(() => {
-            if (event.defaultPrevented)
-                return;
-            if (current.current.value === undefined)
-                setLocal(initial.current);
-            setQuery(null);
-            setOpen(false);
-            setValidation("");
-        });
+        const timers = new Set();
+        const reset = (event) => {
+            // React may cancel reset in its delegated handler after this native listener.
+            const timer = setTimeout(() => {
+                timers.delete(timer);
+                if (event.defaultPrevented || !input.current)
+                    return;
+                if (current.current.value === undefined)
+                    setLocal(initial.current);
+                setQuery(null);
+                setOpen(false);
+                setValidation("");
+            }, 0);
+            timers.add(timer);
+        };
         form.addEventListener("reset", reset);
-        return () => form.removeEventListener("reset", reset);
+        return () => { form.removeEventListener("reset", reset); timers.forEach(clearTimeout); };
     }, [props.form]);
     useEffect(() => {
         const control = input.current, Observer = control?.ownerDocument.defaultView?.MutationObserver;

package/dist/command-list.d.ts

@@ -0,0 +1,3 @@
+import { type CommandListProps } from "./index.js";
+/** Searchable action suggestions. No selected form value or modal lifecycle. */
+export declare const SearchCommandList: import("react").ForwardRefExoticComponent<CommandListProps & import("react").RefAttributes<HTMLInputElement>>;

package/dist/command-list.js

@@ -0,0 +1,93 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useEffect, useId, useImperativeHandle, useRef, useState } from "react";
+import { Input, Label, ScrollArea, Surface, Text, VisuallyHidden } from "./index.js";
+const searchable = (value) => value.normalize("NFKD").replace(/\p{M}/gu, "").toLowerCase();
+/** Searchable action suggestions. No selected form value or modal lifecycle. */
+export const SearchCommandList = /* @__PURE__ */ forwardRef(function SearchCommandList({ label, hideLabel = false, items, query, defaultQuery = "", onQueryChange, onAction, disabled = false, loading = false, placeholder = "Search commands…", emptyMessage = "No commands found.", loadingMessage = "Loading commands…", controlSize = "md", id: explicitId, className, onKeyDown, ...props }, forwardedRef) {
+    if (![label, emptyMessage, loadingMessage].every(value => value.trim()))
+        throw new Error("Flood CommandList requires nonempty accessible labels and state messages");
+    if (new Set(items.map(item => item.id)).size !== items.length || items.some(item => !item.id.trim() || !item.label.trim()))
+        throw new Error("Flood CommandList items require unique nonempty IDs and labels");
+    const generated = useId(), rootId = explicitId ?? `flood-command-list-${generated}`, inputId = `${rootId}-input`, listId = `${rootId}-list`;
+    const input = useRef(null), viewport = useRef(null), composing = useRef(false);
+    useImperativeHandle(forwardedRef, () => input.current, []);
+    const [localQuery, setLocalQuery] = useState(defaultQuery), [activeId, setActiveId] = useState(), [inheritedDisabled, setInheritedDisabled] = useState(false);
+    const text = query ?? localQuery;
+    const terms = searchable(text).trim().split(/\s+/).filter(Boolean);
+    const filtered = items.filter(item => {
+        const haystack = searchable([item.label, item.description ?? "", item.group ?? "", ...(item.keywords ?? [])].join(" "));
+        return terms.every(term => haystack.includes(term));
+    });
+    const groups = new Map();
+    for (const item of filtered) {
+        const key = item.group?.trim() ?? "", group = groups.get(key);
+        if (group)
+            group.push(item);
+        else
+            groups.set(key, [item]);
+    }
+    const effectiveDisabled = disabled || inheritedDisabled;
+    const enabled = loading || effectiveDisabled ? [] : [...groups.values()].flat().filter(item => !item.disabled);
+    const active = enabled.find(item => item.id === activeId) ?? enabled[0];
+    const positions = new Map(items.map((item, index) => [item.id, index]));
+    const optionId = (item) => `${listId}-option-${positions.get(item.id)}`;
+    const blocked = () => Boolean(disabled || loading || input.current?.matches(":disabled"));
+    const invoke = (item) => {
+        if (blocked() || item.disabled)
+            return;
+        input.current?.focus({ preventScroll: true });
+        onAction?.(item.id);
+    };
+    useEffect(() => { setActiveId(undefined); }, [text]);
+    useEffect(() => {
+        const node = input.current, view = node?.ownerDocument.defaultView;
+        if (!node || !view)
+            return;
+        const update = () => setInheritedDisabled(node.matches(":disabled"));
+        update();
+        const observer = new view.MutationObserver(update);
+        for (let ancestor = node.parentElement; ancestor; ancestor = ancestor.parentElement)
+            if (ancestor.localName === "fieldset")
+                observer.observe(ancestor, { attributes: true, attributeFilter: ["disabled"] });
+        return () => observer.disconnect();
+    }, [disabled]);
+    useEffect(() => {
+        if (!active || !viewport.current)
+            return;
+        const option = input.current?.ownerDocument.getElementById(optionId(active));
+        if (!option)
+            return;
+        const area = viewport.current, a = option.getBoundingClientRect(), b = area.getBoundingClientRect();
+        if (a.top < b.top)
+            area.scrollTop -= b.top - a.top;
+        else if (a.bottom > b.bottom)
+            area.scrollTop += a.bottom - b.bottom;
+    }, [active?.id, text, loading, items]);
+    const status = loading ? loadingMessage : filtered.length ? "" : emptyMessage;
+    return _jsxs("div", { ...props, id: rootId, className: ["flood-command-list", `flood-control--${controlSize}`, className].filter(Boolean).join(" "), "data-disabled": effectiveDisabled || undefined, onKeyDown: event => {
+            onKeyDown?.(event);
+            if (event.defaultPrevented || event.target !== input.current || event.altKey || event.ctrlKey || event.metaKey || event.shiftKey || event.nativeEvent.isComposing || composing.current)
+                return;
+            if (event.key === "Enter") {
+                event.preventDefault();
+                if (active)
+                    invoke(active);
+                return;
+            }
+            if (blocked() || !enabled.length)
+                return;
+            if (!["ArrowDown", "ArrowUp", "Home", "End"].includes(event.key))
+                return;
+            event.preventDefault();
+            const index = enabled.findIndex(item => item.id === active?.id);
+            const next = event.key === "Home" ? 0 : event.key === "End" ? enabled.length - 1 : (index + (event.key === "ArrowDown" ? 1 : -1) + enabled.length) % enabled.length;
+            setActiveId(enabled[next].id);
+        }, children: [_jsx(Label, { htmlFor: inputId, className: hideLabel ? "flood-visually-hidden" : undefined, children: label }), _jsx(Input, { ref: input, id: inputId, value: text, disabled: disabled, type: "text", controlSize: controlSize, placeholder: placeholder, autoComplete: "off", spellCheck: false, role: "combobox", "aria-autocomplete": "list", "aria-haspopup": "listbox", "aria-expanded": "true", "aria-controls": listId, "aria-activedescendant": active ? optionId(active) : undefined, onCompositionStart: () => { composing.current = true; }, onCompositionEnd: () => { composing.current = false; }, onChange: event => { const next = event.currentTarget.value; if (disabled || event.currentTarget.matches(":disabled"))
+                    return; if (query === undefined)
+                    setLocalQuery(next); onQueryChange?.(next); } }), _jsx(Surface, { padding: "1", className: "flood-command-list__surface", children: _jsx(ScrollArea, { ref: viewport, id: listId, role: "listbox", "aria-label": label, "aria-busy": loading || undefined, "aria-disabled": effectiveDisabled || undefined, tabIndex: -1, className: "flood-command-list__viewport", style: { maxHeight: "18rem" }, children: status ? _jsx("div", { role: "option", "aria-disabled": "true", "aria-selected": "false", className: "flood-command-list__empty", children: _jsx(Text, { size: "compact", tone: "subtle", children: status }) }) : [...groups].map(([group, entries], groupIndex) => {
+                        const content = entries.map(item => _jsxs("div", { id: optionId(item), role: "option", "aria-disabled": item.disabled || effectiveDisabled || undefined, "aria-selected": item.id === active?.id, "data-active": item.id === active?.id || undefined, className: "flood-command-list__option", onPointerMove: event => { if (event.pointerType === "mouse" && !blocked() && !item.disabled)
+                                setActiveId(item.id); }, onPointerDown: event => { if (event.pointerType === "mouse")
+                                event.preventDefault(); }, onMouseDown: event => event.preventDefault(), onClick: () => invoke(item), children: [_jsx("span", { className: "flood-command-list__label", children: item.label }), item.description && _jsx("span", { className: "flood-command-list__description", children: item.description })] }, item.id));
+                        return group ? _jsxs("div", { role: "group", "aria-labelledby": `${listId}-group-${groupIndex}`, className: "flood-command-list__group", children: [_jsx(Text, { as: "div", size: "helper", tone: "subtle", id: `${listId}-group-${groupIndex}`, className: "flood-command-list__group-label", children: group }), content] }, `group:${group}`) : _jsx("div", { role: "group", className: "flood-command-list__group", children: content }, "ungrouped");
+                    }) }) }), _jsx(VisuallyHidden, { role: "status", children: status })] });
+});

package/dist/content-elements.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import { Avatar, VisuallyHidden } from "./index.js";
 const cx = (...parts) => parts.filter(Boolean).join(" ");
-export const GroupedAvatars = forwardRef(function GroupedAvatars({ items, label, max = 4, size = "md", overflowLabel, className, ...props }, ref) {
+export const GroupedAvatars = /* @__PURE__ */ forwardRef(function GroupedAvatars({ items, label, max = 4, size = "md", overflowLabel, className, ...props }, ref) {
     if (!Number.isInteger(max) || max < 1)
         throw new Error("Flood AvatarGroup max must be a positive integer");
     if (!label.trim() || items.some(item => !item.id.trim() || !item.name.trim()) || new Set(items.map(item => item.id)).size !== items.length)
@@ -12,27 +12,27 @@ export const GroupedAvatars = forwardRef(function GroupedAvatars({ items, label,
         throw new Error("Flood AvatarGroup overflowLabel must be nonempty");
     return _jsxs("ul", { ...props, ref: ref, "aria-label": label, className: cx("flood-avatar-group", className), "data-size": size, children: [visible.map(item => _jsx("li", { children: _jsx(Avatar, { name: item.name, src: item.src, fallback: item.fallback, size: size }) }, item.id)), remaining > 0 && _jsx("li", { children: _jsxs("span", { className: "flood-avatar flood-avatar-group__overflow", "data-size": size, role: "img", "aria-label": overflowLabel ?? `${remaining} more people`, children: ["+", remaining] }) })] });
 });
-export const NamedStatus = forwardRef(function NamedStatus({ label, tone = "neutral", size = "md", announce = false, className, role, ...props }, ref) {
+export const NamedStatus = /* @__PURE__ */ forwardRef(function NamedStatus({ label, tone = "neutral", size = "md", announce = false, className, role, ...props }, ref) {
     if (!label.trim())
         throw new Error("Flood StatusIndicator requires a visible label");
     return _jsxs("span", { ...props, ref: ref, role: announce ? "status" : role, className: cx("flood-status-indicator", className), "data-tone": tone, "data-size": size, children: [_jsx("span", { className: "flood-status-indicator__dot", "aria-hidden": "true" }), label] });
 });
-export const CaptionedFigure = forwardRef(function CaptionedFigure({ caption, captionPosition = "after", children, className, ...props }, ref) {
+export const CaptionedFigure = /* @__PURE__ */ forwardRef(function CaptionedFigure({ caption, captionPosition = "after", children, className, ...props }, ref) {
     const content = caption !== undefined && caption !== null && caption !== false ? _jsx("figcaption", { className: "flood-figure__caption", children: caption }) : null;
     return _jsxs("figure", { ...props, ref: ref, className: cx("flood-figure", className), children: [captionPosition === "before" && content, children, captionPosition === "after" && content] });
 });
-export const AttributedQuote = forwardRef(function AttributedQuote({ attribution, children, className, ...props }, ref) {
+export const AttributedQuote = /* @__PURE__ */ forwardRef(function AttributedQuote({ attribution, children, className, ...props }, ref) {
     return _jsxs("blockquote", { ...props, ref: ref, className: cx("flood-blockquote", className), children: [_jsx("div", { className: "flood-blockquote__quote", children: children }), attribution !== undefined && attribution !== null && attribution !== false && _jsx("footer", { className: "flood-blockquote__attribution", children: attribution })] });
 });
-export const InlineCodeText = forwardRef(function InlineCodeText({ size = "md", wrap = true, className, ...props }, ref) {
+export const InlineCodeText = /* @__PURE__ */ forwardRef(function InlineCodeText({ size = "md", wrap = true, className, ...props }, ref) {
     return _jsx("code", { ...props, ref: ref, className: cx("flood-inline-code", className), "data-size": size, "data-wrap": wrap });
 });
-export const MeasuredValue = forwardRef(function MeasuredValue({ label, value, hint, trend, size = "md", className, ...props }, ref) {
+export const MeasuredValue = /* @__PURE__ */ forwardRef(function MeasuredValue({ label, value, hint, trend, size = "md", className, ...props }, ref) {
     if (!label.trim() || (trend && !trend.label.trim()))
         throw new Error("Flood Metric requires a label and meaningful trend text");
     return _jsxs("dl", { ...props, ref: ref, className: cx("flood-metric", className), "data-size": size, children: [_jsx("dt", { className: "flood-metric__label", children: label }), _jsx("dd", { className: "flood-metric__value", children: value }), trend && _jsxs("dd", { className: "flood-metric__trend", "data-tone": trend.tone ?? "neutral", children: [_jsx("span", { "aria-hidden": "true", children: trend.direction === "up" ? "↑" : trend.direction === "down" ? "↓" : "→" }), trend.label] }), hint !== undefined && hint !== null && hint !== false && _jsx("dd", { className: "flood-metric__hint", children: hint })] });
 });
-export const EventTimeline = forwardRef(function EventTimeline({ items, label, stateLabels, className, ...props }, ref) {
+export const EventTimeline = /* @__PURE__ */ forwardRef(function EventTimeline({ items, label, stateLabels, className, ...props }, ref) {
     if (!label.trim() || items.some(item => !item.id.trim() || !item.title.trim()) || new Set(items.map(item => item.id)).size !== items.length)
         throw new Error("Flood Timeline needs a label and unique nonempty item IDs/titles");
     if (items.filter(item => item.state === "current").length > 1)

package/dist/context-menu.d.ts

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

package/dist/context-menu.js

@@ -0,0 +1,76 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useEffect, useImperativeHandle, useRef, useState } from "react";
+import { focusMenuEdge, MenuLayer, validateMenuTree } from "./menu.js";
+import { placeOverlay, positionLayer } from "./overlay-runtime.js";
+export const ContextActionMenu = /* @__PURE__ */ forwardRef(function ContextActionMenu({ label, items, children, onAction, open: controlled, defaultOpen = false, onOpenChange, disabled = false, controlSize = "sm", className, tabIndex = 0, onContextMenu, onKeyDown, ...props }, forwardedRef) {
+    if (!label.trim())
+        throw new Error("Flood ContextMenu requires a nonempty label");
+    validateMenuTree(items);
+    const root = useRef(null), panel = useRef(null), source = useRef(null);
+    useImperativeHandle(forwardedRef, () => root.current, []);
+    const [local, setLocal] = useState(defaultOpen), [point, setPoint] = useState(undefined);
+    const requestedOpen = controlled ?? local, open = !disabled && requestedOpen;
+    const pending = useRef(undefined);
+    const current = useRef({ controlled, onOpenChange });
+    current.current = { controlled, onOpenChange };
+    const request = (next) => {
+        if (pending.current === next)
+            return;
+        pending.current = next;
+        queueMicrotask(() => { pending.current = undefined; });
+        if (current.current.controlled === undefined)
+            setLocal(next);
+        current.current.onOpenChange?.(next);
+    };
+    useEffect(() => { if (disabled && requestedOpen)
+        request(false); }, [disabled, requestedOpen]);
+    const anchor = () => source.current?.isConnected ? source.current : root.current;
+    const targetOf = (target) => {
+        const element = target && "nodeType" in target && target.nodeType === 1 ? target : null;
+        const focusable = element?.closest('button,a[href],input,select,textarea,[tabindex],[contenteditable="true"]');
+        return focusable && root.current?.contains(focusable) && typeof focusable.focus === "function" ? focusable : root.current;
+    };
+    const position = (element) => {
+        const target = anchor();
+        if (!target)
+            return;
+        if (!point) {
+            positionLayer(target, element, "bottom", "start");
+            return;
+        }
+        const view = element.ownerDocument.defaultView, visual = view.visualViewport;
+        const viewport = { left: visual?.offsetLeft ?? 0, top: visual?.offsetTop ?? 0, width: visual?.width ?? view.innerWidth, height: visual?.height ?? view.innerHeight };
+        const gap = parseFloat(view.getComputedStyle(element).columnGap) || 8;
+        element.style.setProperty("--flood-overlay-available-width", `${Math.max(0, viewport.width - 2 * gap)}px`);
+        element.style.setProperty("--flood-overlay-available-height", `${Math.max(0, viewport.height - 2 * gap)}px`);
+        const rect = { left: point.x, right: point.x, top: point.y, bottom: point.y, width: 0, height: 0 };
+        const placed = placeOverlay(rect, element.getBoundingClientRect(), viewport, "bottom", "start", gap, view.getComputedStyle(target).direction === "rtl");
+        element.style.left = `${placed.left}px`;
+        element.style.top = `${placed.top}px`;
+        element.dataset.side = placed.side;
+        element.style.visibility = "visible";
+    };
+    return _jsxs("div", { ...props, ref: root, role: "group", "aria-label": label, tabIndex: tabIndex, className: ["flood-context-menu", className].filter(Boolean).join(" "), onContextMenu: event => {
+            onContextMenu?.(event);
+            if (event.defaultPrevented || disabled || panel.current?.contains(event.target))
+                return;
+            event.preventDefault();
+            source.current = targetOf(event.target);
+            setPoint({ x: event.clientX, y: event.clientY });
+            request(true);
+            if (open)
+                focusMenuEdge(panel.current);
+        }, onKeyDown: event => {
+            onKeyDown?.(event);
+            if (event.defaultPrevented || disabled || event.altKey || event.ctrlKey || event.metaKey || panel.current?.contains(event.target))
+                return;
+            if (event.key !== "ContextMenu" && !(event.shiftKey && event.key === "F10"))
+                return;
+            event.preventDefault();
+            source.current = targetOf(event.target);
+            setPoint(undefined);
+            request(true);
+            if (open)
+                focusMenuEdge(panel.current);
+        }, children: [children, _jsx(MenuLayer, { ref: panel, label: label, items: items, open: open, requestOpen: request, closeTree: () => request(false), anchor: anchor, rootAnchor: anchor, position: position, onAction: onAction, controlSize: controlSize })] });
+});

package/dist/data-display.js

@@ -1,11 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import { ScrollArea } from "./index.js";
-export const DescribedData = forwardRef(function DescribedData({ items, layout, density, dividers, className, ...props }, ref) {
+export const DescribedData = /* @__PURE__ */ forwardRef(function DescribedData({ items, layout, density, dividers, className, ...props }, ref) {
     if (items.some(item => !item.id.trim()) || new Set(items.map(item => item.id)).size !== items.length)
         throw new Error("Flood description items require unique nonempty IDs");
     return _jsx("dl", { ...props, ref: ref, className: ["flood-description-list", className].filter(Boolean).join(" "), "data-layout": layout, "data-density": density, "data-dividers": dividers, children: items.map(item => _jsxs("div", { className: "flood-description-list__item", children: [_jsx("dt", { children: item.term }), _jsx("dd", { children: item.description })] }, item.id)) });
 });
-export const TabularData = forwardRef(function TabularData({ caption, children, hideCaption, density, striped, scrollLabel, className, hidden, dir, lang, ...props }, ref) {
+export const TabularData = /* @__PURE__ */ forwardRef(function TabularData({ caption, children, hideCaption, density, striped, scrollLabel, className, hidden, dir, lang, ...props }, ref) {
     return _jsx("div", { className: "flood-table-container", hidden: hidden, dir: dir, lang: lang, children: _jsx(ScrollArea, { orientation: "horizontal", "aria-label": scrollLabel ?? caption, children: _jsxs("table", { ...props, ref: ref, hidden: hidden, dir: dir, lang: lang, className: ["flood-table", className].filter(Boolean).join(" "), "data-density": density, "data-striped": striped, children: [_jsx("caption", { className: hideCaption ? "flood-visually-hidden" : undefined, children: caption }), children] }) }) });
 });

package/dist/data-table.d.ts

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

package/dist/data-table.js

@@ -0,0 +1,58 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useMemo, useState } from "react";
+import { Table, Checkbox, Button, IconSlot, VisuallyHidden, Pagination, Text, Spinner, Alert, Stack } from "./index.js";
+export const ManagedDataTable = /* @__PURE__ */ forwardRef(function ManagedDataTable({ caption, hideCaption = false, columns, rows, density = "comfortable", striped = false, minWidth = "40rem", sort: controlledSort, defaultSort = null, onSortChange, locale = "en", selectable = false, selectedIds, defaultSelectedIds = [], onSelectionChange, page: controlledPage, defaultPage = 1, pageSize = 10, onPageChange, state = "ready", onRetry, labels = {}, className, ...props }, ref) {
+    if (!caption.trim() || columns.length === 0 || columns.some(column => !column.id.trim() || !column.label.trim()) || new Set(columns.map(column => column.id)).size !== columns.length)
+        throw new Error("Flood DataTable requires a caption and unique named columns");
+    if (rows.some(row => !row.id.trim() || (row.label !== undefined && !row.label.trim())) || new Set(rows.map(row => row.id)).size !== rows.length)
+        throw new Error("Flood DataTable rows require unique nonempty IDs and labels");
+    if (!Number.isSafeInteger(pageSize) || pageSize < 1 || !Number.isSafeInteger(defaultPage) || defaultPage < 1 || (controlledPage !== undefined && (!Number.isSafeInteger(controlledPage) || controlledPage < 1)))
+        throw new Error("Flood DataTable page and pageSize must be positive safe integers");
+    const [localSort, setSort] = useState(defaultSort), [localSelected, setSelected] = useState(defaultSelectedIds), [localPage, setPage] = useState(defaultPage);
+    const requestedSort = controlledSort === undefined ? localSort : controlledSort;
+    const sorting = requestedSort && columns.some(column => column.id === requestedSort.column && column.sortable) ? requestedSort : null;
+    const sorted = useMemo(() => {
+        if (!sorting)
+            return [...rows];
+        const collator = new Intl.Collator(locale, { numeric: true, sensitivity: "base" });
+        const value = (row) => {
+            const explicit = row.sortValues?.[sorting.column];
+            if (explicit !== undefined)
+                return explicit;
+            const cell = row.cells[sorting.column];
+            return typeof cell === "string" || typeof cell === "number" ? cell : null;
+        };
+        return rows.map((row, index) => ({ row, index })).sort((a, b) => {
+            const left = value(a.row), right = value(b.row);
+            // Missing values stay last in both directions; ties retain source order.
+            if (left === null || right === null)
+                return left === right ? a.index - b.index : left === null ? 1 : -1;
+            const comparison = typeof left === "number" && typeof right === "number" ? left - right : collator.compare(String(left), String(right));
+            return comparison === 0 ? a.index - b.index : comparison * (sorting.direction === "ascending" ? 1 : -1);
+        }).map(entry => entry.row);
+    }, [rows, sorting?.column, sorting?.direction, locale]);
+    const pageCount = Math.max(1, Math.ceil(rows.length / pageSize)), page = Math.min(controlledPage ?? localPage, pageCount);
+    const visible = sorted.slice((page - 1) * pageSize, page * pageSize), eligible = new Set(rows.filter(row => !row.selectionDisabled).map(row => row.id));
+    const selection = [...new Set(selectedIds ?? localSelected)].filter(id => eligible.has(id)), chosen = new Set(selection);
+    const pageChoices = visible.filter(row => !row.selectionDisabled), all = pageChoices.length > 0 && pageChoices.every(row => chosen.has(row.id)), some = pageChoices.some(row => chosen.has(row.id));
+    const blocked = state !== "ready";
+    const select = (next) => { if (blocked)
+        return; const accepted = [...new Set(next)].filter(id => eligible.has(id)); if (selectedIds === undefined)
+        setSelected(accepted); onSelectionChange?.(accepted); };
+    const changePage = (next) => { if (blocked)
+        return; if (controlledPage === undefined)
+        setPage(next); onPageChange?.(next); };
+    const changeSort = (column) => {
+        if (blocked)
+            return;
+        const next = sorting?.column !== column ? { column, direction: "ascending" } : sorting.direction === "ascending" ? { column, direction: "descending" } : null;
+        if (controlledSort === undefined)
+            setSort(next);
+        onSortChange?.(next);
+        if (page !== 1)
+            changePage(1);
+    };
+    const resultLabel = labels.results ?? ((from, to, total) => `${from}–${to} of ${total}`);
+    return _jsxs("div", { ...props, ref: ref, className: ["flood-data-table", className].filter(Boolean).join(" "), "aria-busy": state === "loading" || undefined, children: [_jsxs(Table, { caption: caption, hideCaption: hideCaption, density: density, striped: striped, style: { minWidth }, children: [_jsx("thead", { children: _jsxs("tr", { children: [selectable && _jsx("th", { scope: "col", className: "flood-data-table__choice", children: _jsx(Checkbox, { label: _jsx(VisuallyHidden, { children: labels.selectPage ?? "Select rows on this page" }), checked: all, indeterminate: some && !all, disabled: blocked || pageChoices.length === 0, onChange: event => { const ids = new Set(selection); for (const row of pageChoices)
+                                            event.currentTarget.checked ? ids.add(row.id) : ids.delete(row.id); select([...ids]); } }) }), columns.map(column => _jsx("th", { scope: "col", "data-sortable": column.sortable || undefined, "aria-sort": sorting?.column === column.id ? sorting.direction : undefined, style: { textAlign: column.align ?? "start", width: column.width }, children: column.sortable ? _jsxs(Button, { variant: "ghost", size: "sm", disabled: blocked, className: "flood-data-table__sort", "aria-label": (labels.sort ?? ((label) => `Sort by ${label}`))(column.label), onClick: () => changeSort(column.id), children: [column.label, _jsx(IconSlot, { size: "sm", children: _jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.75", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: sorting?.column === column.id ? _jsx("path", { d: sorting.direction === "ascending" ? "m7 14 5-5 5 5" : "m7 10 5 5 5-5" }) : _jsx("path", { d: "m8 8 4-4 4 4M8 16l4 4 4-4" }) }) })] }) : column.label }, column.id))] }) }), _jsx("tbody", { children: state === "ready" && visible.length > 0 ? visible.map(row => _jsxs("tr", { "data-selected": selectable && chosen.has(row.id) || undefined, children: [selectable && _jsx("td", { className: "flood-data-table__choice", children: _jsx(Checkbox, { label: _jsx(VisuallyHidden, { children: (labels.selectRow ?? ((label) => `Select ${label}`))(row.label ?? row.id) }), checked: chosen.has(row.id), disabled: Boolean(row.selectionDisabled), onChange: event => select(event.currentTarget.checked ? [...selection, row.id] : selection.filter(id => id !== row.id)) }) }), columns.map(column => _jsx("td", { style: { textAlign: column.align ?? "start" }, children: row.cells[column.id] ?? null }, column.id))] }, row.id)) : _jsx("tr", { children: _jsx("td", { colSpan: columns.length + (selectable ? 1 : 0), className: "flood-data-table__state", children: state === "loading" ? _jsx(Spinner, { label: labels.loading ?? "Loading rows…" }) : state === "error" ? _jsxs(Stack, { gap: "3", children: [_jsx(Alert, { tone: "error", announcement: "polite", children: labels.error ?? "Could not load the rows." }), onRetry && _jsx(Button, { variant: "subtle", size: "sm", onClick: onRetry, children: labels.retry ?? "Try again" })] }) : _jsx(Text, { as: "p", size: "compact", tone: "subtle", role: "status", children: labels.empty ?? "No results found." }) }) }) })] }), _jsxs("div", { className: "flood-data-table__footer", children: [_jsx(Text, { as: "p", size: "helper", tone: "subtle", children: state === "ready" ? resultLabel(rows.length ? (page - 1) * pageSize + 1 : 0, Math.min(page * pageSize, rows.length), rows.length) : "" }), selectable && _jsx(Text, { as: "p", size: "helper", tone: "subtle", role: "status", children: (labels.selection ?? ((count, total) => `${count} of ${total} selected`))(selection.length, eligible.size) }), pageCount > 1 && _jsx(Pagination, { page: page, pageCount: pageCount, onPageChange: changePage, disabled: blocked, label: labels.pagination, previousLabel: labels.previousPage, nextLabel: labels.nextPage, pageLabel: labels.page })] })] });
+});

package/dist/date-field.d.ts

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