@flood-md/react 0.2.1 → 0.2.3

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-import { type ButtonHTMLAttributes, type InputHTMLAttributes, type TextareaHTMLAttributes, type AnchorHTMLAttributes, type ReactNode, type HTMLAttributes } from "react";
+import { type ButtonHTMLAttributes, type InputHTMLAttributes, type TextareaHTMLAttributes, type SelectHTMLAttributes, type AnchorHTMLAttributes, type ReactNode, type HTMLAttributes, type LabelHTMLAttributes, type FieldsetHTMLAttributes, type RefCallback, type RefObject } from "react";
 export type ControlSize = "2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl";
 export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
     variant?: "solid" | "subtle" | "outline" | "ghost";
@@ -6,50 +6,272 @@ export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
     loading?: boolean;
 }
 export declare const Button: import("react").ForwardRefExoticComponent<ButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
+export type FieldStatus = "error" | "warning" | "success" | "info";
+export interface TabItem {
+    value: string;
+    label: string;
+    content: ReactNode;
+    icon?: ReactNode;
+    disabled?: boolean;
+}
+export interface TabsProps extends Omit<HTMLAttributes<HTMLDivElement>, "children" | "defaultValue" | "onChange"> {
+    label: string;
+    items: readonly TabItem[];
+    value?: string;
+    defaultValue?: string;
+    onValueChange?: (value: string) => void;
+    activationMode?: "automatic" | "manual";
+    orientation?: "horizontal" | "vertical";
+    controlSize?: "sm" | "md" | "lg" | "xl";
+    disabled?: boolean;
+    iconOnly?: boolean;
+}
+export declare const Tabs: import("react").ForwardRefExoticComponent<TabsProps & import("react").RefAttributes<HTMLDivElement>>;
+export interface BreadcrumbItem {
+    label: string;
+    href?: string;
+}
+export interface BreadcrumbProps extends Omit<HTMLAttributes<HTMLElement>, "children"> {
+    items: readonly BreadcrumbItem[];
+    label?: string;
+    separator?: string;
+}
+export declare const Breadcrumb: import("react").ForwardRefExoticComponent<BreadcrumbProps & import("react").RefAttributes<HTMLElement>>;
+export interface PaginationProps extends Omit<HTMLAttributes<HTMLElement>, "children" | "onChange"> {
+    page: number;
+    pageCount: number;
+    onPageChange?: (page: number) => void;
+    getHref?: (page: number) => string;
+    siblingCount?: 0 | 1 | 2;
+    controlSize?: "sm" | "md" | "lg" | "xl";
+    disabled?: boolean;
+    label?: string;
+    previousLabel?: string;
+    nextLabel?: string;
+    pageLabel?: (page: number) => string;
+}
+export declare const Pagination: import("react").ForwardRefExoticComponent<PaginationProps & import("react").RefAttributes<HTMLElement>>;
+export interface OverlayTriggerProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+    ref: RefCallback<HTMLButtonElement>;
+}
+export interface TooltipProps extends Omit<HTMLAttributes<HTMLDivElement>, "children" | "content" | "title" | "role"> {
+    content: string;
+    trigger: (props: OverlayTriggerProps) => ReactNode;
+    side?: "top" | "bottom" | "left" | "right";
+    align?: "start" | "center" | "end";
+    delay?: number;
+    disabled?: boolean;
+}
+export declare const Tooltip: import("react").ForwardRefExoticComponent<TooltipProps & import("react").RefAttributes<HTMLDivElement>>;
+export interface PopoverProps extends Omit<HTMLAttributes<HTMLDivElement>, "children" | "title" | "role"> {
+    title: string;
+    trigger: (props: OverlayTriggerProps) => ReactNode;
+    children?: ReactNode;
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    disabled?: boolean;
+    side?: "top" | "bottom" | "left" | "right";
+    align?: "start" | "center" | "end";
+    closeLabel?: string;
+    initialFocusRef?: RefObject<HTMLElement | null>;
+}
+export declare const Popover: import("react").ForwardRefExoticComponent<PopoverProps & import("react").RefAttributes<HTMLDivElement>>;
+export interface DialogProps extends Omit<HTMLAttributes<HTMLDialogElement>, "children" | "title" | "role"> {
+    title: string;
+    description?: string;
+    trigger: (props: OverlayTriggerProps) => ReactNode;
+    children?: ReactNode;
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    disabled?: boolean;
+    closeLabel?: string;
+    closeOnOutsideClick?: boolean;
+    initialFocusRef?: RefObject<HTMLElement | null>;
+}
+export declare const Dialog: import("react").ForwardRefExoticComponent<DialogProps & import("react").RefAttributes<HTMLDialogElement>>;
+export interface CollapsibleProps extends Omit<HTMLAttributes<HTMLDivElement>, "title" | "onChange"> {
+    title: string;
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    disabled?: boolean;
+    controlSize?: "sm" | "md" | "lg" | "xl";
+    headingLevel?: 2 | 3 | 4 | 5 | 6;
+}
+export declare const Collapsible: import("react").ForwardRefExoticComponent<CollapsibleProps & import("react").RefAttributes<HTMLDivElement>>;
+export interface AccordionItem {
+    value: string;
+    title: string;
+    content: ReactNode;
+    disabled?: boolean;
+}
+export interface AccordionProps extends Omit<HTMLAttributes<HTMLDivElement>, "children" | "role" | "defaultValue" | "onChange"> {
+    label: string;
+    items: readonly AccordionItem[];
+    expansionMode?: "single" | "multiple";
+    value?: readonly string[];
+    defaultValue?: readonly string[];
+    onValueChange?: (value: string[]) => void;
+    disabled?: boolean;
+    controlSize?: "sm" | "md" | "lg" | "xl";
+    headingLevel?: 2 | 3 | 4 | 5 | 6;
+}
+export declare const Accordion: import("react").ForwardRefExoticComponent<AccordionProps & import("react").RefAttributes<HTMLDivElement>>;
+export interface ToggleProps extends Omit<ButtonProps, "aria-pressed" | "type" | "role" | "defaultValue"> {
+    pressed?: boolean;
+    defaultPressed?: boolean;
+    onPressedChange?: (pressed: boolean) => void;
+    iconOnly?: boolean;
+}
+/** A native toggle button; its accessible name stays stable when pressed. */
+export declare const Toggle: import("react").ForwardRefExoticComponent<ToggleProps & import("react").RefAttributes<HTMLButtonElement>>;
+export interface ToggleOption {
+    value: string;
+    label: string;
+    icon?: ReactNode;
+    disabled?: boolean;
+}
+export interface ToggleGroupProps extends Omit<HTMLAttributes<HTMLDivElement>, "role" | "children" | "defaultValue" | "onChange"> {
+    label: string;
+    options: readonly ToggleOption[];
+    selectionMode?: "single" | "multiple";
+    value?: readonly string[];
+    defaultValue?: readonly string[];
+    onValueChange?: (value: string[]) => void;
+    orientation?: "horizontal" | "vertical";
+    size?: ControlSize;
+    variant?: "solid" | "subtle" | "outline" | "ghost";
+    disabled?: boolean;
+    iconOnly?: boolean;
+}
+/** Optional selections exposed as pressed buttons, not radios, tabs or a toolbar. */
+export declare const ToggleGroup: import("react").ForwardRefExoticComponent<ToggleGroupProps & import("react").RefAttributes<HTMLDivElement>>;
+export interface ButtonGroupProps extends Omit<HTMLAttributes<HTMLDivElement>, "role"> {
+    label: string;
+    orientation?: "horizontal" | "vertical";
+}
+/** Connected actions keep their ordinary Tab order; this is not a toolbar. */
+export declare const ButtonGroup: import("react").ForwardRefExoticComponent<ButtonGroupProps & import("react").RefAttributes<HTMLDivElement>>;
 export interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
+    status?: FieldStatus;
     invalid?: boolean;
     controlSize?: "sm" | "md" | "lg" | "xl";
 }
 export declare const Input: import("react").ForwardRefExoticComponent<InputProps & import("react").RefAttributes<HTMLInputElement>>;
+export interface InputGroupProps extends Omit<InputProps, "children" | "type"> {
+    type?: "text" | "email" | "password" | "search" | "tel" | "url" | "number";
+    start?: ReactNode;
+    end?: ReactNode;
+}
+/** One real Input with host-owned logical start/end adornments. Ref and native attributes target the input. */
+export declare const InputGroup: import("react").ForwardRefExoticComponent<InputGroupProps & import("react").RefAttributes<HTMLInputElement>>;
 export interface TextareaProps extends TextareaHTMLAttributes<HTMLTextAreaElement> {
+    status?: FieldStatus;
     invalid?: boolean;
     controlSize?: "sm" | "md" | "lg" | "xl";
 }
 export declare const Textarea: import("react").ForwardRefExoticComponent<TextareaProps & import("react").RefAttributes<HTMLTextAreaElement>>;
+export interface SelectProps extends SelectHTMLAttributes<HTMLSelectElement> {
+    status?: FieldStatus;
+    invalid?: boolean;
+    controlSize?: "sm" | "md" | "lg" | "xl";
+}
+/** Native select and option semantics with an independent visual control size. */
+export declare const Select: import("react").ForwardRefExoticComponent<SelectProps & import("react").RefAttributes<HTMLSelectElement>>;
 export interface ChoiceProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "type" | "size"> {
     label: ReactNode;
 }
 export declare const Checkbox: import("react").ForwardRefExoticComponent<ChoiceProps & import("react").RefAttributes<HTMLInputElement>>;
 export declare const Radio: import("react").ForwardRefExoticComponent<ChoiceProps & import("react").RefAttributes<HTMLInputElement>>;
 export declare const Switch: import("react").ForwardRefExoticComponent<ChoiceProps & import("react").RefAttributes<HTMLInputElement>>;
+export interface LabelProps extends LabelHTMLAttributes<HTMLLabelElement> {
+    required?: boolean;
+}
+/** A native label; the required marker never substitutes for the control's required prop. */
+export declare const Label: import("react").ForwardRefExoticComponent<LabelProps & import("react").RefAttributes<HTMLLabelElement>>;
+export interface FieldsetProps extends FieldsetHTMLAttributes<HTMLFieldSetElement> {
+    legend: ReactNode;
+    /** @since 0.2.3 */
+    hideLabel?: boolean;
+    hint?: ReactNode;
+    error?: ReactNode;
+    message?: ReactNode;
+    status?: FieldStatus;
+}
+/** A native group: disabled, form ownership and nested fieldsets retain browser behavior. */
+export declare const Fieldset: import("react").ForwardRefExoticComponent<FieldsetProps & import("react").RefAttributes<HTMLFieldSetElement>>;
+export interface ChoiceOption {
+    value: string;
+    label: ReactNode;
+    disabled?: boolean;
+}
+export interface RadioGroupProps extends Omit<FieldsetProps, "children" | "defaultValue" | "role"> {
+    name: string;
+    options: readonly ChoiceOption[];
+    value?: string;
+    defaultValue?: string;
+    onValueChange?: (value: string) => void;
+    orientation?: "vertical" | "horizontal";
+    required?: boolean;
+}
+export declare const RadioGroup: import("react").ForwardRefExoticComponent<RadioGroupProps & import("react").RefAttributes<HTMLFieldSetElement>>;
+export interface SegmentedControlProps extends Omit<RadioGroupProps, "legend" | "options"> {
+    label: string;
+    options: readonly ToggleOption[];
+    controlSize?: "sm" | "md" | "lg" | "xl";
+    iconOnly?: boolean;
+    fullWidth?: boolean;
+}
+/** A segmented presentation of native single-choice inputs, retaining forms and reset. */
+export declare const SegmentedControl: import("react").ForwardRefExoticComponent<SegmentedControlProps & import("react").RefAttributes<HTMLFieldSetElement>>;
+export interface CheckboxGroupProps extends Omit<FieldsetProps, "children" | "defaultValue" | "role"> {
+    name: string;
+    options: readonly ChoiceOption[];
+    value?: readonly string[];
+    defaultValue?: readonly string[];
+    onValueChange?: (value: string[]) => void;
+    orientation?: "vertical" | "horizontal";
+}
+export declare const CheckboxGroup: import("react").ForwardRefExoticComponent<CheckboxGroupProps & import("react").RefAttributes<HTMLFieldSetElement>>;
 export interface FieldControlProps {
     id: string;
     "aria-describedby"?: string;
     "aria-invalid"?: true;
+    status?: FieldStatus;
     required?: boolean;
 }
 export interface FieldProps {
+    status?: FieldStatus;
+    message?: ReactNode;
     id?: string;
     label: ReactNode;
+    /** @since 0.2.3 */
+    hideLabel?: boolean;
     hint?: ReactNode;
     error?: ReactNode;
     required?: boolean;
     describedBy?: string;
     children: (props: FieldControlProps) => ReactNode;
 }
-export declare function Field({ id: explicitId, label, hint, error, required, describedBy, children, }: FieldProps): import("react").JSX.Element;
-export declare const Link: import("react").ForwardRefExoticComponent<AnchorHTMLAttributes<HTMLAnchorElement> & import("react").RefAttributes<HTMLAnchorElement>>;
+export declare function Field({ status, message, id: explicitId, label, hideLabel, hint, error, required, describedBy, children, }: FieldProps): import("react").JSX.Element;
+export interface LinkProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
+    variant?: "text" | "solid" | "subtle" | "outline" | "ghost";
+    size?: ControlSize;
+}
+export declare const Link: import("react").ForwardRefExoticComponent<LinkProps & import("react").RefAttributes<HTMLAnchorElement>>;
 /** Explicit opt-in to the dark foundations profile; no global theme mutation. */
 export declare const FloodRoot: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
 export interface TextProps extends HTMLAttributes<HTMLElement> {
     as?: "span" | "p" | "div";
-    size?: "body" | "compact" | "label" | "helper";
+    size?: "lead" | "body" | "compact" | "label" | "helper";
     tone?: "default" | "subtle" | "error" | "success" | "warning" | "info";
 }
 export declare const Text: import("react").ForwardRefExoticComponent<TextProps & import("react").RefAttributes<HTMLElement>>;
 export interface HeadingProps extends HTMLAttributes<HTMLHeadingElement> {
     level?: 1 | 2 | 3 | 4 | 5 | 6;
-    size?: "large" | "page" | "section";
+    size?: "display" | "large" | "page" | "section";
 }
 export declare const Heading: import("react").ForwardRefExoticComponent<HeadingProps & import("react").RefAttributes<HTMLHeadingElement>>;
 export type Space = "0" | "1" | "2" | "3" | "4" | "6" | "8" | "12";
@@ -77,3 +299,15 @@ export interface IconButtonProps extends Omit<ButtonProps, "aria-label"> {
 }
 export declare const IconButton: import("react").ForwardRefExoticComponent<IconButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
 export declare const Divider: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLHRElement> & import("react").RefAttributes<HTMLHRElement>>;
+export interface CodeSnippetProps extends Omit<HTMLAttributes<HTMLDivElement>, "children"> {
+    code: string;
+    action?: ReactNode;
+}
+/** Selectable code with an optional host-owned action; no clipboard side effects. */
+export declare const CodeSnippet: import("react").ForwardRefExoticComponent<CodeSnippetProps & import("react").RefAttributes<HTMLDivElement>>;
+export interface ScrollAreaProps extends HTMLAttributes<HTMLDivElement> {
+    orientation?: "vertical" | "horizontal" | "both";
+    contentInset?: "none" | "scrollbar";
+}
+/** Native scrolling with inset overlay tracks; the ref targets the scrollable viewport. */
+export declare const ScrollArea: import("react").ForwardRefExoticComponent<ScrollAreaProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/index.js

@@ -1,15 +1,124 @@
 "use client";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef, createElement, useId, } from "react";
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, createElement, useId, useState, } from "react";
+import { resolveFieldStatus, hasFieldContent, mergeDescriptions } from "./field-state.js";
+import { SingleSelect } from "./select.js";
+import { OverlayScrollArea } from "./scroll-area.js";
+import { ChoiceGroup } from "./choice-group.js";
+import { Disclosure } from "./disclosure.js";
+import { AnchoredOverlay, ModalOverlay } from "./overlays.js";
+import { TabNavigation, BreadcrumbNavigation, PageNavigation } from "./navigation.js";
 const classes = (...values) => values.filter(Boolean).join(" ");
 export const Button = forwardRef(function Button({ variant = "solid", size = "md", loading = false, disabled, type = "button", className, children, ...props }, ref) {
     return (_jsxs("button", { ...props, ref: ref, type: type, disabled: disabled || loading, "aria-busy": loading || undefined, className: classes("flood-button", `flood-button--${variant}`, `flood-button--${size}`, className), children: [loading && _jsx("span", { className: "flood-spinner", "aria-hidden": "true" }), children] }));
 });
-export const Input = forwardRef(function Input({ invalid, controlSize = "md", className, ...props }, ref) {
-    return (_jsx("input", { ...props, ref: ref, "aria-invalid": invalid || props["aria-invalid"], className: classes("flood-input", `flood-control--${controlSize}`, className) }));
-});
-export const Textarea = forwardRef(function Textarea({ invalid, controlSize = "md", className, ...props }, ref) {
-    return (_jsx("textarea", { ...props, ref: ref, "aria-invalid": invalid || props["aria-invalid"], className: classes("flood-input", "flood-textarea", `flood-control--${controlSize}`, className) }));
+export const Tabs = forwardRef(function Tabs({ activationMode = "automatic", orientation = "horizontal", controlSize = "md", disabled = false, iconOnly = false, ...props }, ref) { return _jsx(TabNavigation, { ...props, ref: ref, activationMode: activationMode, orientation: orientation, controlSize: controlSize, disabled: disabled, iconOnly: iconOnly }); });
+export const Breadcrumb = forwardRef(function Breadcrumb({ label = "Breadcrumb", separator = "/", ...props }, ref) { return _jsx(BreadcrumbNavigation, { ...props, ref: ref, label: label, separator: separator }); });
+export const Pagination = forwardRef(function Pagination({ siblingCount = 1, controlSize = "sm", disabled = false, label = "Pagination", previousLabel = "Previous page", nextLabel = "Next page", ...props }, ref) { return _jsx(PageNavigation, { ...props, ref: ref, siblingCount: siblingCount, controlSize: controlSize, disabled: disabled, label: label, previousLabel: previousLabel, nextLabel: nextLabel }); });
+export const Tooltip = forwardRef(function Tooltip({ side = "top", align = "center", delay = 300, disabled = false, ...props }, ref) { return _jsx(AnchoredOverlay, { ...props, ref: ref, kind: "tooltip", side: side, align: align, delay: delay, disabled: disabled }); });
+export const Popover = forwardRef(function Popover({ side = "bottom", align = "start", defaultOpen = false, disabled = false, closeLabel = "Close", ...props }, ref) { return _jsx(AnchoredOverlay, { ...props, ref: ref, kind: "popover", side: side, align: align, defaultOpen: defaultOpen, disabled: disabled, closeLabel: closeLabel }); });
+export const Dialog = forwardRef(function Dialog({ defaultOpen = false, disabled = false, closeLabel = "Close", closeOnOutsideClick = true, ...props }, ref) { return _jsx(ModalOverlay, { ...props, ref: ref, defaultOpen: defaultOpen, disabled: disabled, closeLabel: closeLabel, closeOnOutsideClick: closeOnOutsideClick }); });
+export const Collapsible = forwardRef(function Collapsible({ open, defaultOpen = false, onOpenChange, disabled = false, controlSize = "md", ...props }, ref) {
+    const [local, setLocal] = useState(defaultOpen);
+    return _jsx(Disclosure, { ...props, ref: ref, expanded: open ?? local, disabled: disabled, controlSize: controlSize, onExpandedChange: next => {
+            if (open === undefined)
+                setLocal(next);
+            onOpenChange?.(next);
+        } });
+});
+export const Accordion = forwardRef(function Accordion({ label, items, expansionMode = "single", value, defaultValue = [], onValueChange, disabled = false, controlSize = "md", headingLevel = 3, className, onKeyDown, ...props }, ref) {
+    const [local, setLocal] = useState(() => [...new Set(defaultValue)]);
+    const expanded = value ?? local;
+    if (new Set(items.map(item => item.value)).size !== items.length)
+        throw new Error("Flood accordion item values must be unique");
+    if (expansionMode === "single" && new Set(expanded).size > 1)
+        throw new Error("Flood single Accordion accepts at most one value");
+    return _jsx("div", { ...props, ref: ref, role: "group", "aria-label": label, className: classes("flood-accordion", className), onKeyDown: event => {
+            onKeyDown?.(event);
+            if (event.defaultPrevented)
+                return;
+            const buttons = Array.from(event.currentTarget.querySelectorAll(":scope > .flood-disclosure > .flood-disclosure__heading > .flood-disclosure__trigger:not(:disabled)"));
+            const index = buttons.indexOf(event.target);
+            if (index < 0)
+                return;
+            const next = event.key === "Home" ? 0 : event.key === "End" ? buttons.length - 1 : event.key === "ArrowDown" ? (index + 1) % buttons.length : event.key === "ArrowUp" ? (index - 1 + buttons.length) % buttons.length : -1;
+            if (next >= 0) {
+                event.preventDefault();
+                buttons[next].focus();
+            }
+        }, children: items.map(item => _jsx(Collapsible, { title: item.title, open: expanded.includes(item.value), disabled: disabled || item.disabled, controlSize: controlSize, headingLevel: headingLevel, onOpenChange: active => {
+                const next = active ? expansionMode === "single" ? [item.value] : [...new Set([...expanded, item.value])] : expanded.filter(value => value !== item.value);
+                if (value === undefined)
+                    setLocal(next);
+                onValueChange?.([...next]);
+            }, children: item.content }, item.value)) });
+});
+/** A native toggle button; its accessible name stays stable when pressed. */
+export const Toggle = forwardRef(function Toggle({ pressed, defaultPressed = false, onPressedChange, iconOnly = false, size = "md", variant = "subtle", onClick, className, children, disabled, loading, ...props }, ref) {
+    const [local, setLocal] = useState(defaultPressed);
+    const selected = pressed ?? local;
+    return _jsx(Button, { ...props, ref: ref, type: "button", "aria-pressed": selected, size: size, variant: variant, disabled: disabled, loading: loading, className: classes("flood-toggle", iconOnly && "flood-icon-button", className), onClick: event => {
+            onClick?.(event);
+            if (event.defaultPrevented || disabled || loading)
+                return;
+            if (pressed === undefined)
+                setLocal(!selected);
+            onPressedChange?.(!selected);
+        }, children: iconOnly ? _jsx(IconSlot, { size: size, children: children }) : children });
+});
+/** Optional selections exposed as pressed buttons, not radios, tabs or a toolbar. */
+export const ToggleGroup = forwardRef(function ToggleGroup({ label, options, selectionMode = "multiple", value, defaultValue = [], onValueChange, orientation = "horizontal", size = "md", variant = "subtle", disabled = false, iconOnly = false, className, onKeyDown, ...props }, ref) {
+    const [local, setLocal] = useState(() => [...new Set(defaultValue)]);
+    const selected = value ?? local;
+    if (new Set(options.map(option => option.value)).size !== options.length)
+        throw new Error("Flood toggle option values must be unique");
+    if (selectionMode === "single" && new Set(selected).size > 1)
+        throw new Error("Flood single ToggleGroup accepts at most one value");
+    if (iconOnly && options.some(option => !option.icon))
+        throw new Error("Flood icon-only toggle options require icons");
+    return _jsx("div", { ...props, ref: ref, role: "group", "aria-label": label, "data-orientation": orientation, "data-selection-mode": selectionMode, className: classes("flood-button-group", "flood-toggle-group", className), onKeyDown: event => {
+            onKeyDown?.(event);
+            if (event.defaultPrevented)
+                return;
+            const buttons = Array.from(event.currentTarget.querySelectorAll(":scope > .flood-toggle:not(:disabled)"));
+            const index = buttons.indexOf(event.target);
+            if (index < 0)
+                return;
+            const rtl = getComputedStyle(event.currentTarget).direction === "rtl";
+            const nextKey = orientation === "vertical" ? "ArrowDown" : rtl ? "ArrowLeft" : "ArrowRight";
+            const previousKey = orientation === "vertical" ? "ArrowUp" : rtl ? "ArrowRight" : "ArrowLeft";
+            const next = event.key === "Home" ? 0 : event.key === "End" ? buttons.length - 1 : event.key === nextKey ? (index + 1) % buttons.length : event.key === previousKey ? (index - 1 + buttons.length) % buttons.length : -1;
+            if (next >= 0) {
+                event.preventDefault();
+                buttons[next].focus();
+            }
+        }, children: options.map(option => _jsx(Toggle, { size: size, variant: variant, disabled: disabled || option.disabled, pressed: selected.includes(option.value), iconOnly: iconOnly, "aria-label": iconOnly ? option.label : undefined, onPressedChange: active => {
+                const next = active ? selectionMode === "single" ? [option.value] : [...new Set([...selected, option.value])] : selected.filter(item => item !== option.value);
+                if (value === undefined)
+                    setLocal(next);
+                onValueChange?.([...next]);
+            }, children: iconOnly ? option.icon : _jsxs(_Fragment, { children: [option.icon && _jsx(IconSlot, { size: size, children: option.icon }), option.label] }) }, option.value)) });
+});
+/** Connected actions keep their ordinary Tab order; this is not a toolbar. */
+export const ButtonGroup = forwardRef(function ButtonGroup({ label, orientation = "horizontal", className, ...props }, ref) {
+    return _jsx("div", { ...props, ref: ref, role: "group", "aria-label": label, "data-orientation": orientation, className: classes("flood-button-group", className) });
+});
+export const Input = forwardRef(function Input({ invalid, status, controlSize = "md", className, ...props }, ref) {
+    return (_jsx("input", { ...props, ref: ref, "data-status": resolveFieldStatus(status, invalid, props["aria-invalid"]), "aria-invalid": invalid || status === "error" || props["aria-invalid"], className: classes("flood-input", `flood-control--${controlSize}`, className) }));
+});
+/** One real Input with host-owned logical start/end adornments. Ref and native attributes target the input. */
+export const InputGroup = forwardRef(function InputGroup({ start, end, controlSize = "md", className, style, invalid, status, disabled, readOnly, ...props }, ref) {
+    return _jsxs("div", { hidden: props.hidden, dir: props.dir, lang: props.lang, className: classes("flood-input-group", `flood-control--${controlSize}`, className), style: style, "data-status": resolveFieldStatus(status, invalid, props["aria-invalid"]), "data-disabled": disabled || undefined, "data-readonly": readOnly || undefined, children: [hasFieldContent(start) && _jsx("div", { className: "flood-input-group__addon flood-input-group__addon--start", children: start }), _jsx(Input, { ...props, ref: ref, controlSize: controlSize, invalid: invalid, status: status, disabled: disabled, readOnly: readOnly }), hasFieldContent(end) && _jsx("div", { className: "flood-input-group__addon flood-input-group__addon--end", children: end })] });
+});
+export const Textarea = forwardRef(function Textarea({ invalid, status, controlSize = "md", className, ...props }, ref) {
+    return (_jsx("textarea", { ...props, ref: ref, "data-status": resolveFieldStatus(status, invalid, props["aria-invalid"]), "aria-invalid": invalid || status === "error" || props["aria-invalid"], className: classes("flood-input", "flood-textarea", `flood-control--${controlSize}`, className) }));
+});
+/** Native select and option semantics with an independent visual control size. */
+export const Select = forwardRef(function Select({ invalid, status, controlSize = "md", className, multiple, size, ...props }, ref) {
+    const listbox = multiple || (size !== undefined && size > 1);
+    if (!listbox)
+        return _jsx(SingleSelect, { ...props, status: status, invalid: invalid, controlSize: controlSize, className: className, size: size, ref: ref });
+    return (_jsx("span", { className: classes("flood-select", `flood-control--${controlSize}`, listbox && "flood-select--listbox"), children: _jsx("select", { ...props, ref: ref, multiple: multiple, size: size, "data-status": resolveFieldStatus(status, invalid, props["aria-invalid"]), "aria-invalid": invalid || status === "error" || props["aria-invalid"], className: classes("flood-input", "flood-select__control", `flood-control--${controlSize}`, className) }) }));
 });
 export const Checkbox = forwardRef(function Checkbox({ label, className, ...props }, ref) {
     return (_jsxs("label", { className: classes("flood-choice", className), children: [_jsx("input", { ...props, ref: ref, type: "checkbox", className: "flood-check" }), _jsx("span", { children: label })] }));
@@ -20,20 +129,66 @@ export const Radio = forwardRef(function Radio({ label, className, ...props }, r
 export const Switch = forwardRef(function Switch({ label, className, ...props }, ref) {
     return (_jsxs("label", { className: classes("flood-choice", "flood-switch", className), children: [_jsx("span", { children: label }), _jsx("input", { ...props, ref: ref, type: "checkbox", role: "switch", className: "flood-switch-input" })] }));
 });
-export function Field({ id: explicitId, label, hint, error, required, describedBy, children, }) {
+/** A native label; the required marker never substitutes for the control's required prop. */
+export const Label = forwardRef(function Label({ required, children, className, ...props }, ref) {
+    return _jsxs("label", { ...props, ref: ref, className: classes("flood-label", className), children: [children, required && _jsx("span", { "aria-hidden": "true", children: " *" })] });
+});
+/** A native group: disabled, form ownership and nested fieldsets retain browser behavior. */
+export const Fieldset = forwardRef(function Fieldset({ legend, hideLabel = false, hint, error, message, status, children, className, id: explicitId, "aria-describedby": describedBy, "aria-invalid": ariaInvalid, ...props }, ref) {
+    const generatedId = useId();
+    const id = explicitId ?? `flood-${generatedId}`;
+    const hasHint = hasFieldContent(hint), hasError = hasFieldContent(error), hasMessage = hasFieldContent(message) && !hasError;
+    const resolvedStatus = resolveFieldStatus(status, hasError, ariaInvalid);
+    const description = mergeDescriptions(describedBy, hasHint && `${id}-hint`, hasError && `${id}-error`, hasMessage && `${id}-message`);
+    return _jsxs("fieldset", { ...props, ref: ref, id: id, className: classes("flood-fieldset", className), "data-hide-label": hideLabel || undefined, "data-status": resolvedStatus, "aria-describedby": description, "aria-invalid": resolvedStatus === "error" || ariaInvalid || undefined, children: [_jsx("legend", { className: classes("flood-legend", hideLabel && "flood-visually-hidden"), children: legend }), _jsxs("div", { className: "flood-fieldset__body", children: [hasHint && _jsx("div", { id: `${id}-hint`, className: "flood-hint", children: hint }), children, hasMessage && _jsx("div", { id: `${id}-message`, className: "flood-message", role: resolvedStatus === "error" ? "alert" : undefined, children: message }), hasError && _jsx("div", { id: `${id}-error`, className: "flood-error", role: "alert", children: error })] })] });
+});
+export const RadioGroup = forwardRef(function RadioGroup({ value, defaultValue, onValueChange, orientation = "vertical", ...props }, ref) {
+    return _jsx(ChoiceGroup, { ...props, ref: ref, kind: "radio", orientation: orientation, selected: value === undefined ? undefined : [value], initial: defaultValue === undefined ? [] : [defaultValue], onSelectionChange: next => onValueChange?.(next[0] ?? ""), fieldsetComponent: Fieldset, choiceComponent: Radio });
+});
+/** A segmented presentation of native single-choice inputs, retaining forms and reset. */
+export const SegmentedControl = forwardRef(function SegmentedControl({ label, options, controlSize = "md", iconOnly = false, fullWidth = false, orientation = "horizontal", className, onKeyDown, ...props }, ref) {
+    if (iconOnly && options.some(option => !option.icon))
+        throw new Error("Flood icon-only segments require icons");
+    return _jsx(RadioGroup, { ...props, ref: ref, legend: label, orientation: orientation, className: classes("flood-segmented", `flood-control--${controlSize}`, iconOnly && "flood-segmented--icons", fullWidth && "flood-segmented--full", className), options: options.map(option => ({ ...option, label: _jsxs(_Fragment, { children: [option.icon && _jsx(IconSlot, { size: controlSize, children: option.icon }), iconOnly ? _jsx("span", { className: "flood-segmented__name", children: option.label }) : option.label] }) })), onKeyDown: event => {
+            onKeyDown?.(event);
+            if (event.defaultPrevented)
+                return;
+            const inputs = Array.from(event.currentTarget.querySelectorAll(":scope > .flood-fieldset__body > .flood-choice-group > .flood-choice > input[type=radio]:not(:disabled)"));
+            const index = inputs.indexOf(event.target);
+            if (index < 0)
+                return;
+            const rtl = getComputedStyle(event.currentTarget).direction === "rtl";
+            const next = event.key === "Home" ? 0 : event.key === "End" ? inputs.length - 1
+                : event.key === "ArrowDown" || event.key === (rtl ? "ArrowLeft" : "ArrowRight") ? (index + 1) % inputs.length
+                    : event.key === "ArrowUp" || event.key === (rtl ? "ArrowRight" : "ArrowLeft") ? (index - 1 + inputs.length) % inputs.length : -1;
+            if (next >= 0) {
+                event.preventDefault();
+                inputs[next].focus();
+                inputs[next].click();
+            }
+        } });
+});
+export const CheckboxGroup = forwardRef(function CheckboxGroup({ value, defaultValue = [], onValueChange, orientation = "vertical", ...props }, ref) {
+    return _jsx(ChoiceGroup, { ...props, ref: ref, kind: "checkbox", orientation: orientation, selected: value, initial: defaultValue, onSelectionChange: onValueChange, fieldsetComponent: Fieldset, choiceComponent: Checkbox });
+});
+export function Field({ status, message, id: explicitId, label, hideLabel = false, hint, error, required, describedBy, children, }) {
     const generatedId = useId();
     const id = explicitId ?? `flood-${generatedId}`;
-    const description = [describedBy, hint && `${id}-hint`, error && `${id}-error`].filter(Boolean).join(" ") ||
-        undefined;
-    return (_jsxs("div", { className: "flood-field", children: [_jsxs("label", { className: "flood-label", htmlFor: id, children: [label, required && _jsx("span", { "aria-hidden": "true", children: " *" })] }), children({
+    const hasMessage = hasFieldContent(message);
+    const hasHint = hasFieldContent(hint);
+    const hasError = hasFieldContent(error);
+    const resolvedStatus = hasError ? "error" : status;
+    const description = mergeDescriptions(describedBy, hasHint && `${id}-hint`, hasError && `${id}-error`, hasMessage && !hasError && `${id}-message`);
+    return (_jsxs("div", { className: "flood-field", "data-hide-label": hideLabel || undefined, "data-status": resolvedStatus, children: [_jsx(Label, { htmlFor: id, required: required, className: hideLabel ? "flood-visually-hidden" : undefined, children: label }), children({
                 id,
                 "aria-describedby": description,
-                "aria-invalid": error ? true : undefined,
+                "aria-invalid": hasError || resolvedStatus === "error" ? true : undefined,
+                status: resolvedStatus,
                 required,
-            }), hint && (_jsx("div", { id: `${id}-hint`, className: "flood-hint", children: hint })), error && (_jsx("div", { id: `${id}-error`, className: "flood-error", role: "alert", children: error }))] }));
+            }), hasHint && (_jsx("div", { id: `${id}-hint`, className: "flood-hint", children: hint })), hasMessage && !hasError && _jsx("div", { id: `${id}-message`, className: "flood-message", role: resolvedStatus === "error" ? "alert" : undefined, children: message }), hasError && (_jsx("div", { id: `${id}-error`, className: "flood-error", role: "alert", children: error }))] }));
 }
-export const Link = forwardRef(function Link({ className, ...props }, ref) {
-    return (_jsx("a", { ...props, ref: ref, className: classes("flood-link", className) }));
+export const Link = forwardRef(function Link({ variant = "text", size = "md", className, ...props }, ref) {
+    return (_jsx("a", { ...props, ref: ref, className: classes("flood-link", variant !== "text" && "flood-link--button", variant !== "text" && "flood-button", variant !== "text" && `flood-button--${variant}`, variant !== "text" && `flood-button--${size}`, className) }));
 });
 /** Explicit opt-in to the dark foundations profile; no global theme mutation. */
 export const FloodRoot = forwardRef(function FloodRoot({ className, ...props }, ref) {
@@ -64,3 +219,11 @@ export const IconButton = forwardRef(function IconButton({ label, size = "md", v
 export const Divider = forwardRef(function Divider({ className, ...props }, ref) {
     return _jsx("hr", { ...props, ref: ref, className: classes("flood-divider", className) });
 });
+/** Selectable code with an optional host-owned action; no clipboard side effects. */
+export const CodeSnippet = forwardRef(function CodeSnippet({ code, action, className, ...props }, ref) {
+    return (_jsxs("div", { ...props, ref: ref, className: classes("flood-code-snippet", className), children: [_jsx("code", { className: "flood-code-snippet__code", children: code }), action != null && _jsx("div", { className: "flood-code-snippet__action", children: action })] }));
+});
+/** Native scrolling with inset overlay tracks; the ref targets the scrollable viewport. */
+export const ScrollArea = forwardRef(function ScrollArea({ orientation = "vertical", contentInset = "scrollbar", ...props }, ref) {
+    return _jsx(OverlayScrollArea, { ...props, orientation: orientation, contentInset: contentInset, ref: ref });
+});

package/dist/navigation.d.ts

@@ -0,0 +1,4 @@
+import type { TabsProps, BreadcrumbProps, PaginationProps } from "./index.js";
+export declare const TabNavigation: import("react").ForwardRefExoticComponent<TabsProps & import("react").RefAttributes<HTMLDivElement>>;
+export declare const BreadcrumbNavigation: import("react").ForwardRefExoticComponent<BreadcrumbProps & import("react").RefAttributes<HTMLElement>>;
+export declare const PageNavigation: import("react").ForwardRefExoticComponent<PaginationProps & import("react").RefAttributes<HTMLElement>>;

package/dist/navigation.js

@@ -0,0 +1,68 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useEffect, useId, useImperativeHandle, useLayoutEffect, useRef, useState } from "react";
+import { OverlayScrollArea } from "./scroll-area.js";
+import { pageWindow } from "./page-window.js";
+const useBrowserLayoutEffect = typeof window === "undefined" ? useEffect : useLayoutEffect;
+export const TabNavigation = forwardRef(function TabNavigation({ label, items, value, defaultValue, onValueChange, activationMode = "automatic", orientation = "horizontal", controlSize = "md", disabled = false, iconOnly = false, className, onKeyDown, id: explicitId, ...props }, ref) {
+    const generated = useId(), id = explicitId ?? `flood-tabs-${generated}`;
+    const [local, setLocal] = useState(defaultValue), [focused, setFocused] = useState();
+    const root = useRef(null), list = useRef(null), focusedPanel = useRef(undefined);
+    useImperativeHandle(ref, () => root.current, []);
+    if (new Set(items.map(item => item.value)).size !== items.length)
+        throw new Error("Flood tab values must be unique");
+    if (iconOnly && items.some(item => !item.icon))
+        throw new Error("Flood icon-only tabs require icons");
+    const available = items.filter(item => !item.disabled), enabled = disabled ? [] : available;
+    const selected = available.find(item => item.value === (value ?? local))?.value ?? available[0]?.value;
+    const tabStop = enabled.some(item => item.value === focused) ? focused : selected;
+    const select = (next) => { if (next === selected)
+        return; if (value === undefined)
+        setLocal(next); onValueChange?.(next); };
+    useBrowserLayoutEffect(() => {
+        if (focusedPanel.current === undefined || focusedPanel.current === selected)
+            return;
+        const index = items.findIndex(item => item.value === focusedPanel.current), panel = root.current?.ownerDocument.getElementById(`${id}-panel-${index}`);
+        const active = root.current?.ownerDocument.activeElement;
+        if (active === root.current?.ownerDocument.body || panel?.contains(active ?? null)) {
+            const next = items.findIndex(item => item.value === selected);
+            root.current?.ownerDocument.getElementById(`${id}-tab-${next}`)?.focus();
+        }
+        focusedPanel.current = undefined;
+    }, [selected, id, items]);
+    return _jsxs("div", { ...props, ref: root, id: id, className: ["flood-tabs", className].filter(Boolean).join(" "), "data-orientation": orientation, onKeyDown: event => {
+            onKeyDown?.(event);
+            if (event.defaultPrevented)
+                return;
+            const buttons = Array.from(list.current?.querySelectorAll(':scope > button[role="tab"]:not(:disabled)') ?? []), index = buttons.indexOf(event.target);
+            if (index < 0)
+                return;
+            const rtl = getComputedStyle(event.currentTarget).direction === "rtl";
+            const nextKey = orientation === "vertical" ? "ArrowDown" : rtl ? "ArrowLeft" : "ArrowRight", previousKey = orientation === "vertical" ? "ArrowUp" : rtl ? "ArrowRight" : "ArrowLeft";
+            const next = event.key === "Home" ? 0 : event.key === "End" ? buttons.length - 1 : event.key === nextKey ? (index + 1) % buttons.length : event.key === previousKey ? (index - 1 + buttons.length) % buttons.length : -1;
+            if (next >= 0) {
+                event.preventDefault();
+                buttons[next].focus();
+                if (activationMode === "automatic")
+                    select(buttons[next].dataset.value);
+            }
+        }, children: [_jsx(OverlayScrollArea, { orientation: orientation, tabIndex: -1, className: "flood-tabs__scroll", children: _jsx("div", { ref: list, role: "tablist", "aria-label": label, "aria-orientation": orientation, className: "flood-tabs__list", onBlur: event => { if (!event.currentTarget.contains(event.relatedTarget))
+                        setFocused(undefined); }, children: items.map((item, index) => _jsxs("button", { id: `${id}-tab-${index}`, type: "button", role: "tab", "aria-selected": item.value === selected, "aria-controls": `${id}-panel-${index}`, "data-value": item.value, disabled: disabled || item.disabled, tabIndex: item.value === tabStop ? 0 : -1, "aria-label": iconOnly ? item.label : undefined, className: `flood-button flood-button--ghost flood-button--${controlSize} flood-tab${iconOnly ? " flood-icon-button" : ""}`, onFocus: () => setFocused(item.value), onClick: () => select(item.value), children: [item.icon && _jsx("span", { className: `flood-icon flood-icon--${controlSize}`, "aria-hidden": "true", children: item.icon }), !iconOnly && item.label] }, item.value)) }) }), items.map((item, index) => _jsx("div", { id: `${id}-panel-${index}`, role: "tabpanel", "aria-labelledby": `${id}-tab-${index}`, tabIndex: 0, hidden: item.value !== selected, className: "flood-tabs__panel", onFocusCapture: () => { focusedPanel.current = item.value; }, onBlurCapture: event => { if (!event.currentTarget.hidden)
+                    focusedPanel.current = undefined; }, children: item.content }, item.value))] });
+});
+export const BreadcrumbNavigation = forwardRef(function BreadcrumbNavigation({ items, label = "Breadcrumb", separator = "/", className, ...props }, ref) {
+    return _jsx("nav", { ...props, ref: ref, "aria-label": label, className: ["flood-breadcrumb", className].filter(Boolean).join(" "), children: _jsx("ol", { children: items.map((item, index) => _jsxs("li", { children: [index > 0 && _jsx("span", { className: "flood-breadcrumb__separator", "aria-hidden": "true", children: separator }), item.href !== undefined ? _jsx("a", { className: "flood-link", href: item.href, "aria-current": index === items.length - 1 ? "page" : undefined, children: item.label }) : _jsx("span", { "aria-current": index === items.length - 1 ? "page" : undefined, children: item.label })] }, index)) }) });
+});
+export const PageNavigation = forwardRef(function PageNavigation({ page, pageCount, onPageChange, getHref, siblingCount = 1, controlSize = "sm", disabled = false, label = "Pagination", previousLabel = "Previous page", nextLabel = "Next page", pageLabel = page => `Page ${page}`, className, ...props }, ref) {
+    const pages = pageWindow(page, pageCount, siblingCount);
+    const control = (target, text, name, unavailable = false) => {
+        const inactive = disabled || unavailable, current = target === page;
+        const shared = { className: `flood-button flood-button--subtle flood-button--${controlSize} flood-page`, "aria-label": name, "aria-current": current && !unavailable ? "page" : undefined };
+        if (getHref)
+            return inactive ? _jsx("span", { ...shared, role: "link", "aria-disabled": "true", children: text }) : _jsx("a", { ...shared, href: getHref(target), onClick: event => { if (!event.defaultPrevented && event.button === 0 && !event.ctrlKey && !event.metaKey && !event.shiftKey && !event.altKey && !current)
+                    onPageChange?.(target); }, children: text });
+        return _jsx("button", { ...shared, type: "button", disabled: inactive, onClick: () => { if (!current)
+                onPageChange?.(target); }, children: text });
+    };
+    const arrow = (previous) => _jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.75", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", focusable: "false", children: _jsx("path", { d: previous ? "m15 5-7 7 7 7" : "m9 5 7 7-7 7" }) });
+    return _jsx("nav", { ...props, ref: ref, "aria-label": label, className: ["flood-pagination", className].filter(Boolean).join(" "), children: _jsxs("ul", { children: [_jsx("li", { children: control(page - 1, arrow(true), previousLabel, page === 1) }), pages.map(item => _jsx("li", { "aria-hidden": typeof item === "string" ? true : undefined, children: typeof item === "number" ? control(item, String(item), pageLabel(item)) : _jsx("span", { className: "flood-page-gap", children: "\u2026" }) }, item)), _jsx("li", { children: control(page + 1, arrow(false), nextLabel, page === pageCount) })] }) });
+});