@flood-md/react 0.2.2 → 0.2.4

package/dist/avatar.d.ts

@@ -0,0 +1,5 @@
+/** Keyed by src in Avatar so each source starts with its own load lifecycle. */
+export declare function AvatarArtwork({ src, fallback }: {
+    src?: string;
+    fallback: string;
+}): import("react").JSX.Element;

package/dist/avatar.js

@@ -0,0 +1,8 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { Image } from "./index.js";
+/** Keyed by src in Avatar so each source starts with its own load lifecycle. */
+export function AvatarArtwork({ src, fallback }) {
+    const [state, setState] = useState("loading");
+    return _jsxs(_Fragment, { children: [_jsx("span", { className: "flood-avatar__fallback", "aria-hidden": "true", children: fallback }), src && state !== "error" && _jsx(Image, { src: src, alt: "", "aria-hidden": "true", decoding: "async", className: "flood-avatar__image", "data-ready": state === "ready", onLoad: () => setState("ready"), onError: () => setState("error") })] });
+}

package/dist/checkbox.d.ts

@@ -0,0 +1,4 @@
+import { type InputHTMLAttributes } from "react";
+export declare const MixedCheckbox: import("react").ForwardRefExoticComponent<InputHTMLAttributes<HTMLInputElement> & {
+    indeterminate: boolean;
+} & import("react").RefAttributes<HTMLInputElement>>;

package/dist/checkbox.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef, useEffect, useImperativeHandle, useLayoutEffect, useRef } from "react";
+const useBrowserLayoutEffect = typeof window === "undefined" ? useEffect : useLayoutEffect;
+export const MixedCheckbox = forwardRef(function MixedCheckbox({ indeterminate, onChange, ...props }, ref) {
+    const node = useRef(null), mixed = useRef(indeterminate);
+    useImperativeHandle(ref, () => node.current, []);
+    useBrowserLayoutEffect(() => { mixed.current = indeterminate; if (node.current)
+        node.current.indeterminate = indeterminate; });
+    return _jsx("input", { ...props, ref: node, type: "checkbox", className: "flood-check", "aria-checked": indeterminate ? "mixed" : props["aria-checked"], onChange: event => { const control = event.currentTarget; try {
+            onChange?.(event);
+        }
+        finally {
+            control.indeterminate = mixed.current;
+        } } });
+});

package/dist/choice-group.d.ts

@@ -0,0 +1,16 @@
+import type { Checkbox, Fieldset, FieldsetProps, ChoiceOption } from "./index.js";
+interface Props extends Omit<FieldsetProps, "children" | "defaultValue"> {
+    name: string;
+    options: readonly ChoiceOption[];
+    kind: "radio" | "checkbox";
+    selected?: readonly string[];
+    initial: readonly string[];
+    onSelectionChange?: (value: string[]) => void;
+    required?: boolean;
+    orientation: "vertical" | "horizontal";
+    fieldsetComponent: typeof Fieldset;
+    choiceComponent: typeof Checkbox;
+}
+/** Private selection model; native inputs own keyboard, focus, forms and validity. */
+export declare const ChoiceGroup: import("react").ForwardRefExoticComponent<Props & import("react").RefAttributes<HTMLFieldSetElement>>;
+export {};

package/dist/choice-group.js

@@ -0,0 +1,52 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useEffect, useLayoutEffect, useImperativeHandle, useRef, useState } from "react";
+const useBrowserLayoutEffect = typeof window === "undefined" ? useEffect : useLayoutEffect;
+/** Private selection model; native inputs own keyboard, focus, forms and validity. */
+export const ChoiceGroup = forwardRef(function ChoiceGroup({ kind, name, options, selected, initial, onSelectionChange, required, orientation, fieldsetComponent: Group, choiceComponent: Choice, legend, ...props }, forwardedRef) {
+    if (new Set(options.map(option => option.value)).size !== options.length)
+        throw new Error("Flood choice group option values must be unique");
+    const root = useRef(null);
+    const inputs = useRef(new Map());
+    const [local, setLocal] = useState(() => [...new Set(initial)]);
+    const controlled = selected !== undefined;
+    const values = controlled ? selected : local;
+    const latest = useRef({ controlled, selected, initial });
+    useBrowserLayoutEffect(() => { latest.current = { controlled, selected, initial }; });
+    useImperativeHandle(forwardedRef, () => root.current, []);
+    useEffect(() => {
+        const fieldset = root.current;
+        if (!fieldset)
+            return;
+        const eventRoot = fieldset.getRootNode();
+        const timers = new Set();
+        const reset = (event) => {
+            if (!fieldset.form || event.target !== fieldset.form)
+                return;
+            // Wait for the whole dispatch/default action, including React's delegated
+            // reset handler. A microtask can run between native event listeners.
+            const timer = setTimeout(() => {
+                timers.delete(timer);
+                if (event.defaultPrevented || root.current !== fieldset || event.target !== fieldset.form)
+                    return;
+                const current = latest.current;
+                const next = [...new Set(current.controlled ? current.selected : current.initial)];
+                if (!current.controlled)
+                    setLocal(next);
+                // Controlled groups must also undo native DOM reset if the host keeps its value.
+                inputs.current.forEach(input => { input.checked = next.includes(input.value); });
+            }, 0);
+            timers.add(timer);
+        };
+        eventRoot.addEventListener("reset", reset, true);
+        return () => { eventRoot.removeEventListener("reset", reset, true); timers.forEach(clearTimeout); };
+    }, []);
+    return _jsx(Group, { ...props, ref: root, legend: required ? _jsxs(_Fragment, { children: [legend, _jsx("span", { "aria-hidden": "true", children: " *" })] }) : legend, role: kind === "radio" ? "radiogroup" : "group", "aria-required": kind === "radio" ? required || undefined : undefined, "aria-orientation": kind === "radio" ? orientation : undefined, children: _jsxs("div", { className: "flood-choice-group", "data-orientation": orientation, children: [options.length === 0 && _jsx("span", { className: "flood-hint", children: "No options available." }), options.map(option => _jsx(Choice, { ref: input => { if (input)
+                        inputs.current.set(option.value, input);
+                    else
+                        inputs.current.delete(option.value); }, name: name, value: option.value, label: option.label, form: props.form, disabled: option.disabled, required: kind === "radio" ? required : undefined, checked: values.includes(option.value), onChange: event => {
+                        const next = kind === "radio" ? [option.value] : [...new Set(event.currentTarget.checked ? [...values, option.value] : values.filter(value => value !== option.value))];
+                        if (!controlled)
+                            setLocal(next);
+                        onSelectionChange?.([...next]);
+                    } }, option.value))] }) });
+});

package/dist/data-display.d.ts

@@ -0,0 +1,3 @@
+import type { DescriptionListProps, TableProps } from "./index.js";
+export declare const DescribedData: import("react").ForwardRefExoticComponent<DescriptionListProps & import("react").RefAttributes<HTMLDListElement>>;
+export declare const TabularData: import("react").ForwardRefExoticComponent<TableProps & import("react").RefAttributes<HTMLTableElement>>;

package/dist/data-display.js

@@ -0,0 +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) {
+    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) {
+    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/disclosure.d.ts

@@ -0,0 +1,12 @@
+import { type HTMLAttributes } from "react";
+interface Props extends Omit<HTMLAttributes<HTMLDivElement>, "title"> {
+    title: string;
+    expanded: boolean;
+    onExpandedChange: (open: boolean) => void;
+    disabled?: boolean;
+    controlSize: "sm" | "md" | "lg" | "xl";
+    headingLevel?: 2 | 3 | 4 | 5 | 6;
+}
+/** Shared original disclosure anatomy. The closed panel stays mounted but hidden. */
+export declare const Disclosure: import("react").ForwardRefExoticComponent<Props & import("react").RefAttributes<HTMLDivElement>>;
+export {};

package/dist/disclosure.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { createElement, forwardRef, useEffect, useId, useLayoutEffect, useRef, useImperativeHandle } from "react";
+import { Button } from "./index.js";
+const useBrowserLayoutEffect = typeof window === "undefined" ? useEffect : useLayoutEffect;
+/** Shared original disclosure anatomy. The closed panel stays mounted but hidden. */
+export const Disclosure = forwardRef(function Disclosure({ title, expanded, onExpandedChange, disabled, controlSize, headingLevel, className, children, id: explicitId, ...props }, ref) {
+    const generatedId = useId(), id = explicitId ?? `flood-disclosure-${generatedId}`;
+    const root = useRef(null), panel = useRef(null), trigger = useRef(null);
+    const focusedInside = useRef(false);
+    useImperativeHandle(ref, () => root.current, []);
+    useBrowserLayoutEffect(() => {
+        const active = panel.current?.ownerDocument.activeElement;
+        if (!expanded && focusedInside.current && !disabled && (panel.current?.contains(active ?? null) || active === panel.current?.ownerDocument.body))
+            trigger.current?.focus();
+        if (!expanded)
+            focusedInside.current = false;
+    }, [expanded, disabled]);
+    const button = _jsxs(Button, { ref: trigger, variant: "ghost", size: controlSize, id: `${id}-trigger`, type: "button", disabled: disabled, "aria-expanded": expanded, "aria-controls": `${id}-panel`, className: "flood-disclosure__trigger", onClick: () => onExpandedChange(!expanded), children: [_jsx("span", { className: "flood-disclosure__title", children: title }), _jsx("span", { className: "flood-disclosure__indicator", "aria-hidden": "true" })] });
+    return _jsxs("div", { ...props, id: id, ref: root, "data-open": expanded, className: ["flood-disclosure", `flood-control--${controlSize}`, className].filter(Boolean).join(" "), children: [createElement(headingLevel ? `h${headingLevel}` : "div", { className: "flood-disclosure__heading" }, button), _jsx("div", { ref: panel, id: `${id}-panel`, className: "flood-disclosure__panel", hidden: !expanded, onFocusCapture: () => { focusedInside.current = true; }, onBlurCapture: event => { if (event.relatedTarget && !event.currentTarget.contains(event.relatedTarget))
+                    focusedInside.current = false; }, children: children })] });
+});

package/dist/feedback.d.ts

@@ -0,0 +1,8 @@
+import type { AlertProps, ProgressProps } from "./index.js";
+export declare function validateRange(value: number | undefined, min: number, max: number, allowUnknown: boolean): void;
+export declare const ValueIndicator: import("react").ForwardRefExoticComponent<ProgressProps & {
+    kind: "progress" | "meter";
+    min: number;
+    max: number;
+} & import("react").RefAttributes<HTMLDivElement>>;
+export declare const FeedbackMessage: import("react").ForwardRefExoticComponent<AlertProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/feedback.js

@@ -0,0 +1,29 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useId } from "react";
+import { VisuallyHidden } from "./index.js";
+export function validateRange(value, min, max, allowUnknown) {
+    if (!Number.isFinite(min) || !Number.isFinite(max) || max <= min || !Number.isFinite(max - min))
+        throw new RangeError("Flood indicators require a finite increasing range");
+    if (value === undefined && allowUnknown)
+        return;
+    if (value === undefined || !Number.isFinite(value) || value < min || value > max)
+        throw new RangeError("Flood indicator value must be finite and within its range");
+}
+export const ValueIndicator = forwardRef(function ValueIndicator({ kind, label, value, min, max, valueText, size, tone, hideLabel, className, ...props }, ref) {
+    const labelId = `flood-indicator-${useId()}`;
+    validateRange(value, min, max, kind === "progress");
+    const unknown = value === undefined;
+    const percent = unknown ? undefined : ((value - min) / (max - min)) * 100;
+    const caption = _jsxs(_Fragment, { children: [_jsx("span", { id: labelId, children: label }), valueText && _jsx("span", { className: "flood-indicator__value", "aria-hidden": "true", children: valueText })] });
+    return _jsxs("div", { ...props, ref: ref, className: ["flood-indicator", className].filter(Boolean).join(" "), "data-kind": kind, "data-size": size, "data-tone": tone, "data-indeterminate": unknown, children: [hideLabel ? _jsx(VisuallyHidden, { as: "div", children: caption }) : _jsx("div", { className: "flood-indicator__caption", children: caption }), _jsx("div", { className: "flood-indicator__track", role: kind === "meter" ? "meter" : "progressbar", "aria-labelledby": labelId, "aria-valuemin": min, "aria-valuemax": max, "aria-valuenow": value, "aria-valuetext": valueText, children: _jsx("span", { className: "flood-indicator__fill", style: { inlineSize: percent === undefined ? undefined : `${percent}%` } }) })] });
+});
+function StatusGlyph({ tone }) {
+    return _jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.75", strokeLinecap: "round", strokeLinejoin: "round", focusable: "false", children: tone === "success" ? _jsxs(_Fragment, { children: [_jsx("circle", { cx: "12", cy: "12", r: "9" }), _jsx("path", { d: "m8 12 3 3 5-6" })] }) :
+            tone === "warning" ? _jsxs(_Fragment, { children: [_jsx("path", { d: "m12 3 10 17H2L12 3Z" }), _jsx("path", { d: "M12 9v4m0 3h.01" })] }) :
+                tone === "error" ? _jsxs(_Fragment, { children: [_jsx("circle", { cx: "12", cy: "12", r: "9" }), _jsx("path", { d: "m9 9 6 6m0-6-6 6" })] }) :
+                    _jsxs(_Fragment, { children: [_jsx("circle", { cx: "12", cy: "12", r: "9" }), _jsx("path", { d: "M12 11v5m0-9h.01" })] }) });
+}
+export const FeedbackMessage = forwardRef(function FeedbackMessage({ title, tone, icon, announcement, children, className, ...props }, ref) {
+    const artwork = icon === undefined ? _jsx(StatusGlyph, { tone: tone }) : icon;
+    return _jsxs("div", { ...props, ref: ref, className: ["flood-alert", className].filter(Boolean).join(" "), "data-tone": tone, role: announcement === "assertive" ? "alert" : announcement === "polite" ? "status" : undefined, "aria-atomic": announcement === "off" ? undefined : true, children: [artwork != null && _jsx("span", { className: "flood-alert__icon", "aria-hidden": "true", children: artwork }), _jsxs("div", { className: "flood-alert__content", children: [title && _jsx("p", { className: "flood-alert__title", children: title }), children != null && _jsx("div", { className: "flood-alert__body", children: children })] })] });
+});

package/dist/field-state.d.ts

@@ -0,0 +1,6 @@
+import type { AriaAttributes, ReactNode } from "react";
+import type { FieldStatus } from "./index.js";
+/** Existing invalid semantics always take precedence over a positive status. */
+export declare function resolveFieldStatus(status?: FieldStatus, invalid?: boolean, ariaInvalid?: AriaAttributes["aria-invalid"]): FieldStatus | undefined;
+export declare const hasFieldContent: (value: ReactNode) => boolean;
+export declare function mergeDescriptions(...values: Array<string | false | undefined>): string | undefined;

package/dist/field-state.js

@@ -0,0 +1,8 @@
+/** Existing invalid semantics always take precedence over a positive status. */
+export function resolveFieldStatus(status, invalid, ariaInvalid) {
+    return invalid || (ariaInvalid !== undefined && ariaInvalid !== false && ariaInvalid !== "false") ? "error" : status;
+}
+export const hasFieldContent = (value) => value !== null && value !== undefined && value !== false && value !== true && value !== "";
+export function mergeDescriptions(...values) {
+    return [...new Set(values.filter(Boolean).join(" ").split(/\s+/).filter(Boolean))].join(" ") || undefined;
+}

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.