@flood-md/react 0.2.4 → 0.2.5

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-import { type ButtonHTMLAttributes, type InputHTMLAttributes, type TextareaHTMLAttributes, type SelectHTMLAttributes, type AnchorHTMLAttributes, type ReactNode, type HTMLAttributes, type CSSProperties, type LabelHTMLAttributes, type FieldsetHTMLAttributes, type RefCallback, type RefObject, type TableHTMLAttributes, type ImgHTMLAttributes } from "react";
+import { type ButtonHTMLAttributes, type InputHTMLAttributes, type TextareaHTMLAttributes, type SelectHTMLAttributes, type AnchorHTMLAttributes, type ReactNode, type HTMLAttributes, type CSSProperties, type LabelHTMLAttributes, type FieldsetHTMLAttributes, type RefCallback, type RefObject, type TableHTMLAttributes, type ImgHTMLAttributes, type BlockquoteHTMLAttributes } from "react";
 export type ControlSize = "2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl";
 export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
     variant?: "solid" | "subtle" | "outline" | "ghost";
@@ -8,6 +8,16 @@ export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
 export declare const Button: import("react").ForwardRefExoticComponent<ButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
 export type FieldStatus = "error" | "warning" | "success" | "info";
 export type ContentSize = "sm" | "md" | "lg";
+export interface TagProps extends HTMLAttributes<HTMLSpanElement> {
+    size?: ContentSize;
+    icon?: ReactNode;
+    disabled?: boolean;
+    onRemove?: () => void;
+    removeLabel?: string;
+    removeButtonProps?: Omit<ButtonHTMLAttributes<HTMLButtonElement>, "children" | "type" | "disabled" | "onClick" | "aria-label">;
+}
+/** @since 0.2.5 */
+export declare const Tag: import("react").ForwardRefExoticComponent<TagProps & import("react").RefAttributes<HTMLSpanElement>>;
 export interface KbdProps extends HTMLAttributes<HTMLElement> {
     size?: ContentSize;
 }
@@ -216,6 +226,21 @@ export interface DialogProps extends Omit<HTMLAttributes<HTMLDialogElement>, "ch
     initialFocusRef?: RefObject<HTMLElement | null>;
 }
 export declare const Dialog: import("react").ForwardRefExoticComponent<DialogProps & import("react").RefAttributes<HTMLDialogElement>>;
+export interface DrawerProps extends DialogProps {
+    side?: "start" | "end" | "top" | "bottom";
+    size?: "sm" | "md" | "lg";
+    footer?: ReactNode;
+}
+export declare const Drawer: import("react").ForwardRefExoticComponent<DrawerProps & import("react").RefAttributes<HTMLDialogElement>>;
+export interface AlertDialogProps extends Omit<DialogProps, "children" | "role" | "description" | "closeLabel" | "closeOnOutsideClick" | "initialFocusRef"> {
+    description: string;
+    confirmLabel?: string;
+    cancelLabel?: string;
+    confirmDisabled?: boolean;
+    onConfirm: () => void;
+    onCancel?: () => void;
+}
+export declare const AlertDialog: import("react").ForwardRefExoticComponent<AlertDialogProps & import("react").RefAttributes<HTMLDialogElement>>;
 export interface CollapsibleProps extends Omit<HTMLAttributes<HTMLDivElement>, "title" | "onChange"> {
     title: string;
     open?: boolean;
@@ -292,6 +317,83 @@ export interface InputGroupProps extends Omit<InputProps, "children" | "type"> {
 }
 /** 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 FileInputProps extends Omit<InputProps, "type" | "value" | "defaultValue" | "children" | "readOnly"> {
+    clearable?: boolean;
+    clearLabel?: string;
+    selectionLabel?: string;
+    removeFileLabel?: string;
+    onFilesChange?: (files: readonly File[]) => void;
+}
+export declare const FileInput: import("react").ForwardRefExoticComponent<FileInputProps & import("react").RefAttributes<HTMLInputElement>>;
+export interface SearchInputProps extends Omit<InputProps, "type" | "children"> {
+    clearable?: boolean;
+    clearLabel?: string;
+}
+export declare const SearchInput: import("react").ForwardRefExoticComponent<SearchInputProps & import("react").RefAttributes<HTMLInputElement>>;
+export interface PasswordInputProps extends Omit<InputProps, "type" | "children"> {
+    visible?: boolean;
+    defaultVisible?: boolean;
+    onVisibleChange?: (visible: boolean) => void;
+    showPasswordLabel?: string;
+    hidePasswordLabel?: string;
+}
+export declare const PasswordInput: import("react").ForwardRefExoticComponent<PasswordInputProps & import("react").RefAttributes<HTMLInputElement>>;
+export interface ComboboxOption {
+    value: string;
+    label: string;
+    description?: string;
+    keywords?: readonly string[];
+    disabled?: boolean;
+}
+export interface ComboboxProps extends Omit<InputProps, "type" | "value" | "defaultValue" | "onChange" | "children"> {
+    options: readonly ComboboxOption[];
+    value?: string;
+    defaultValue?: string;
+    onValueChange?: (value: string) => void;
+    clearable?: boolean;
+    emptyMessage?: string;
+    listLabel?: string;
+    toggleLabel?: string;
+    clearLabel?: string;
+    invalidSelectionMessage?: string;
+}
+/** @since 0.2.5 */
+export declare const Combobox: import("react").ForwardRefExoticComponent<ComboboxProps & import("react").RefAttributes<HTMLInputElement>>;
+export interface MultiSelectProps extends Omit<ComboboxProps, "value" | "defaultValue" | "onValueChange"> {
+    value?: readonly string[];
+    defaultValue?: readonly string[];
+    onValueChange?: (value: string[]) => void;
+    removeItemLabel?: string;
+}
+/** @since 0.2.5 */
+export declare const MultiSelect: import("react").ForwardRefExoticComponent<MultiSelectProps & import("react").RefAttributes<HTMLInputElement>>;
+export interface NumberInputProps extends Omit<InputProps, "type" | "value" | "defaultValue" | "onChange" | "min" | "max" | "step" | "children"> {
+    value?: number | null;
+    defaultValue?: number | null;
+    onValueChange?: (value: number | null) => void;
+    min?: number;
+    max?: number;
+    step?: number;
+    decreaseLabel?: string;
+    increaseLabel?: string;
+}
+/** @since 0.2.5 */
+export declare const NumberInput: import("react").ForwardRefExoticComponent<NumberInputProps & import("react").RefAttributes<HTMLInputElement>>;
+export interface SliderProps extends Omit<FieldsetProps, "legend" | "children" | "defaultValue" | "onChange"> {
+    label: string;
+    value?: readonly number[];
+    defaultValue?: readonly number[];
+    onValueChange?: (value: number[]) => void;
+    min?: number;
+    max?: number;
+    step?: number;
+    thumbLabels?: readonly string[];
+    showValue?: boolean;
+    readOnly?: boolean;
+    controlSize?: "sm" | "md" | "lg" | "xl";
+}
+/** @since 0.2.5 */
+export declare const Slider: import("react").ForwardRefExoticComponent<SliderProps & import("react").RefAttributes<HTMLFieldSetElement>>;
 export interface TextareaProps extends TextareaHTMLAttributes<HTMLTextAreaElement> {
     status?: FieldStatus;
     invalid?: boolean;
@@ -500,3 +602,223 @@ export interface ScrollAreaProps extends HTMLAttributes<HTMLDivElement> {
 }
 /** Native scrolling with inset overlay tracks; the ref targets the scrollable viewport. */
 export declare const ScrollArea: import("react").ForwardRefExoticComponent<ScrollAreaProps & import("react").RefAttributes<HTMLDivElement>>;
+export interface CopyButtonProps extends Omit<ButtonProps, "children" | "value" | "type" | "onClick" | "loading"> {
+    value: string;
+    copyLabel?: string;
+    copiedLabel?: string;
+    errorLabel?: string;
+    resetDelay?: number;
+    onCopied?: () => void;
+    onCopyError?: (error: unknown) => void;
+}
+export declare const CopyButton: import("react").ForwardRefExoticComponent<CopyButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
+export interface ToastItem {
+    id: string;
+    title: string;
+    description?: string;
+    status?: FieldStatus | "neutral";
+    duration?: number;
+    action?: {
+        label: string;
+        onClick: () => void;
+    };
+}
+export interface ToastRegionProps extends Omit<HTMLAttributes<HTMLDivElement>, "children" | "role"> {
+    items: readonly ToastItem[];
+    onDismiss: (id: string) => void;
+    label?: string;
+    closeLabel?: string;
+    placement?: "top-start" | "top-end" | "bottom-start" | "bottom-end";
+    limit?: number;
+    inline?: boolean;
+    hotkey?: boolean;
+}
+export declare const ToastRegion: import("react").ForwardRefExoticComponent<ToastRegionProps & import("react").RefAttributes<HTMLDivElement>>;
+export interface AvatarGroupItem {
+    id: string;
+    name: string;
+    src?: string;
+    fallback?: string;
+}
+export interface AvatarGroupProps extends Omit<HTMLAttributes<HTMLUListElement>, "children"> {
+    items: readonly AvatarGroupItem[];
+    label: string;
+    max?: number;
+    size?: ContentSize;
+    overflowLabel?: string;
+}
+export declare const AvatarGroup: import("react").ForwardRefExoticComponent<AvatarGroupProps & import("react").RefAttributes<HTMLUListElement>>;
+export interface StatusIndicatorProps extends Omit<HTMLAttributes<HTMLSpanElement>, "children"> {
+    label: string;
+    tone?: SemanticTone;
+    size?: ContentSize;
+    announce?: boolean;
+}
+export declare const StatusIndicator: import("react").ForwardRefExoticComponent<StatusIndicatorProps & import("react").RefAttributes<HTMLSpanElement>>;
+export interface FigureProps extends HTMLAttributes<HTMLElement> {
+    caption?: ReactNode;
+    captionPosition?: "before" | "after";
+}
+export declare const Figure: import("react").ForwardRefExoticComponent<FigureProps & import("react").RefAttributes<HTMLElement>>;
+export interface BlockquoteProps extends BlockquoteHTMLAttributes<HTMLQuoteElement> {
+    attribution?: ReactNode;
+}
+export declare const Blockquote: import("react").ForwardRefExoticComponent<BlockquoteProps & import("react").RefAttributes<HTMLQuoteElement>>;
+export interface InlineCodeProps extends HTMLAttributes<HTMLElement> {
+    size?: ContentSize;
+    wrap?: boolean;
+}
+export declare const InlineCode: import("react").ForwardRefExoticComponent<InlineCodeProps & import("react").RefAttributes<HTMLElement>>;
+export interface MetricTrend {
+    label: string;
+    direction: "up" | "down" | "flat";
+    tone?: SemanticTone;
+}
+export interface MetricProps extends Omit<HTMLAttributes<HTMLDListElement>, "children"> {
+    label: string;
+    value: ReactNode;
+    hint?: ReactNode;
+    trend?: MetricTrend;
+    size?: ContentSize;
+}
+export declare const Metric: import("react").ForwardRefExoticComponent<MetricProps & import("react").RefAttributes<HTMLDListElement>>;
+export interface TimelineItem {
+    id: string;
+    title: string;
+    description?: ReactNode;
+    state?: "complete" | "current" | "upcoming";
+    dateTime?: string;
+    timeLabel?: string;
+    icon?: ReactNode;
+}
+export interface TimelineProps extends Omit<HTMLAttributes<HTMLOListElement>, "children"> {
+    label: string;
+    items: readonly TimelineItem[];
+    stateLabels?: {
+        complete?: string;
+        current?: string;
+        upcoming?: string;
+    };
+}
+export declare const Timeline: import("react").ForwardRefExoticComponent<TimelineProps & import("react").RefAttributes<HTMLOListElement>>;
+export interface NavigationListItem {
+    value: string;
+    label: string;
+    href: string;
+    description?: string;
+    icon?: ReactNode;
+    group?: string;
+    linkProps?: Omit<AnchorHTMLAttributes<HTMLAnchorElement>, "href" | "children" | "aria-current">;
+}
+export interface NavigationListProps extends Omit<HTMLAttributes<HTMLElement>, "children" | "role" | "aria-label"> {
+    label: string;
+    items: readonly NavigationListItem[];
+    currentValue?: string;
+    size?: ContentSize;
+}
+export declare const NavigationList: import("react").ForwardRefExoticComponent<NavigationListProps & import("react").RefAttributes<HTMLElement>>;
+export interface StepItem {
+    value: string;
+    title: string;
+    description?: string;
+    status?: "complete" | "upcoming" | "error";
+    disabled?: boolean;
+}
+export interface StepsProps extends Omit<HTMLAttributes<HTMLOListElement>, "children" | "role" | "aria-label"> {
+    label: string;
+    items: readonly StepItem[];
+    currentValue?: string;
+    orientation?: "horizontal" | "vertical";
+    onStepChange?: (value: string) => void;
+    statusLabels?: {
+        complete: string;
+        current: string;
+        upcoming: string;
+        error: string;
+    };
+}
+export declare const Steps: import("react").ForwardRefExoticComponent<StepsProps & import("react").RefAttributes<HTMLOListElement>>;
+export interface SectionProps extends Omit<HTMLAttributes<HTMLElement>, "title"> {
+    title: string;
+    description?: ReactNode;
+    actions?: ReactNode;
+    headingLevel?: 2 | 3 | 4 | 5 | 6;
+    headingSize?: "display" | "large" | "page" | "section";
+}
+export declare const Section: import("react").ForwardRefExoticComponent<SectionProps & import("react").RefAttributes<HTMLElement>>;
+export interface SplitProps extends Omit<HTMLAttributes<HTMLDivElement>, "children"> {
+    main: ReactNode;
+    aside: ReactNode;
+    side?: "start" | "end";
+    ratio?: "balanced" | "main" | "aside";
+    collapseAt?: "sm" | "md" | "lg" | "never";
+    gap?: Space;
+}
+export declare const Split: import("react").ForwardRefExoticComponent<SplitProps & import("react").RefAttributes<HTMLDivElement>>;
+export interface CenterProps extends HTMLAttributes<HTMLDivElement> {
+    inline?: boolean;
+    maxWidth?: string;
+    minHeight?: string;
+}
+export declare const Center: import("react").ForwardRefExoticComponent<CenterProps & import("react").RefAttributes<HTMLDivElement>>;
+export interface SkipLinkProps extends Omit<AnchorHTMLAttributes<HTMLAnchorElement>, "href"> {
+    href: string;
+}
+export declare const SkipLink: import("react").ForwardRefExoticComponent<SkipLinkProps & import("react").RefAttributes<HTMLAnchorElement>>;
+export interface ListBoxProps extends Omit<HTMLAttributes<HTMLDivElement>, "children" | "role" | "defaultValue" | "onChange"> {
+    label: string;
+    hideLabel?: boolean;
+    options: readonly ComboboxOption[];
+    value?: string | readonly string[];
+    defaultValue?: string | readonly string[];
+    onValueChange?: (value: string | string[]) => void;
+    multiple?: boolean;
+    disabled?: boolean;
+    readOnly?: boolean;
+    name?: string;
+    form?: string;
+    controlSize?: "sm" | "md" | "lg" | "xl";
+}
+export declare const ListBox: import("react").ForwardRefExoticComponent<ListBoxProps & import("react").RefAttributes<HTMLDivElement>>;
+export interface PinInputProps extends Omit<InputProps, "type" | "children" | "value" | "defaultValue" | "onChange" | "pattern" | "size"> {
+    label: string;
+    hideLabel?: boolean;
+    length?: number;
+    value?: string;
+    defaultValue?: string;
+    onValueChange?: (value: string) => void;
+    mode?: "numeric" | "alphanumeric";
+    mask?: boolean;
+}
+export declare const PinInput: import("react").ForwardRefExoticComponent<PinInputProps & import("react").RefAttributes<HTMLInputElement>>;
+export interface RatingProps extends Omit<FieldsetHTMLAttributes<HTMLFieldSetElement>, "children" | "onChange" | "defaultValue"> {
+    label: string;
+    hideLabel?: boolean;
+    value?: number;
+    defaultValue?: number;
+    max?: number;
+    onValueChange?: (value: number) => void;
+    getValueLabel?: (value: number, max: number) => string;
+    readOnly?: boolean;
+    required?: boolean;
+    name: string;
+    form?: string;
+    size?: ContentSize;
+}
+export declare const Rating: import("react").ForwardRefExoticComponent<RatingProps & import("react").RefAttributes<HTMLFieldSetElement>>;
+export interface DropzoneProps extends Omit<FileInputProps, "onDragEnter" | "onDragLeave" | "onDragOver" | "onDrop"> {
+    label: string;
+    description?: string;
+}
+export declare const Dropzone: import("react").ForwardRefExoticComponent<DropzoneProps & import("react").RefAttributes<HTMLInputElement>>;
+export interface CharacterCountProps extends HTMLAttributes<HTMLOutputElement> {
+    value?: string;
+    count?: number;
+    max?: number;
+    mode?: "count" | "remaining";
+    label?: string;
+    overLimitLabel?: string;
+    htmlFor?: string;
+    form?: string;
+}
+export declare const CharacterCount: import("react").ForwardRefExoticComponent<CharacterCountProps & import("react").RefAttributes<HTMLOutputElement>>;

package/dist/index.js

@@ -15,10 +15,29 @@ import { ValueIndicator, FeedbackMessage } from "./feedback.js";
 import { DescribedData, TabularData } from "./data-display.js";
 import { ActionMenu } from "./menu.js";
 import { RovingToolbar } from "./toolbar.js";
+import { NumericStepper } from "./numeric-input.js";
+import { RangeControl } from "./slider.js";
+import { GroupedAvatars, NamedStatus, CaptionedFigure, AttributedQuote, InlineCodeText, MeasuredValue, EventTimeline } from "./content-elements.js";
+import { NavigationMenu, StepSequence, ContentSection, SplitLayout, CenterLayout, SkipNavigation } from "./navigation-layout.js";
+import { CollectionListBox, SegmentedPinInput, StarRating, FileDropzone, SupportingCharacterCount } from "./form-controls.js";
+import { ClipboardAction, NotificationRegion } from "./feedback-actions.js";
+import { ConfirmationDialog } from "./alert-dialog.js";
+import { FilePicker } from "./file-input.js";
+import { SearchField, PasswordField } from "./text-inputs.js";
+import { SearchSelection } from "./combobox.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(Spinner, { decorative: true }), children] }));
 });
+/** @since 0.2.5 */
+export const Tag = forwardRef(function Tag({ size = "md", icon, disabled = false, onRemove, removeLabel, removeButtonProps, className, children, ...props }, ref) {
+    const label = removeLabel ?? (typeof children === "string" || typeof children === "number" ? `Remove ${children}` : "");
+    if (onRemove && !label.trim())
+        throw new Error("Flood Tag removal needs an accessible removeLabel for rich content");
+    const iconSize = size === "sm" ? "2xs" : size === "md" ? "xs" : "sm";
+    return _jsxs("span", { ...props, ref: ref, className: classes("flood-tag", className), "data-size": size, "data-disabled": disabled || undefined, children: [hasFieldContent(icon) && _jsx(IconSlot, { size: iconSize, children: icon }), _jsx("span", { className: "flood-tag__label", children: children }), onRemove && _jsx(IconButton, { ...removeButtonProps, type: "button", className: classes("flood-tag__remove", removeButtonProps?.className), label: label, variant: "ghost", size: iconSize, disabled: disabled, onClick: () => { if (!disabled)
+                    onRemove(); }, children: _jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.75", strokeLinecap: "round", "aria-hidden": "true", children: _jsx("path", { d: "m6 6 12 12M18 6 6 18" }) }) })] });
+});
 /** @since 0.2.4 */
 export const Kbd = forwardRef(function Kbd({ size = "sm", className, ...props }, ref) {
     return _jsx("kbd", { ...props, ref: ref, className: classes("flood-kbd", className), "data-size": size });
@@ -74,6 +93,12 @@ export const Menu = forwardRef(function Menu({ defaultOpen = false, disabled = f
 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 Drawer = forwardRef(function Drawer({ side = "end", size = "md", defaultOpen = false, closeLabel = "Close", closeOnOutsideClick = true, className, footer, ...props }, ref) {
+    return _jsx(ModalOverlay, { ...props, ref: ref, defaultOpen: defaultOpen, closeLabel: closeLabel, closeOnOutsideClick: closeOnOutsideClick, className: classes("flood-drawer", className), "data-side": side, "data-size": size, scrollBody: true, footer: footer });
+});
+export const AlertDialog = forwardRef(function AlertDialog({ defaultOpen = false, confirmLabel = "Continue", cancelLabel = "Cancel", confirmDisabled = false, ...props }, ref) {
+    return _jsx(ConfirmationDialog, { ...props, ref: ref, defaultOpen: defaultOpen, confirmLabel: confirmLabel, cancelLabel: cancelLabel, confirmDisabled: confirmDisabled });
+});
 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 => {
@@ -166,6 +191,31 @@ export const Input = forwardRef(function Input({ invalid, status, controlSize =
 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: typeof start === "string" ? _jsx("bdi", { dir: "auto", children: start }) : 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: typeof end === "string" ? _jsx("bdi", { dir: "auto", children: end }) : end })] });
 });
+export const FileInput = forwardRef(function FileInput({ clearable = true, clearLabel = "Clear files", controlSize = "md", ...props }, ref) {
+    return _jsx(FilePicker, { ...props, ref: ref, clearable: clearable, clearLabel: clearLabel, controlSize: controlSize, actionComponent: IconButton, iconComponent: IconSlot });
+});
+export const SearchInput = forwardRef(function SearchInput({ clearable = true, clearLabel = "Clear search", controlSize = "md", ...props }, ref) {
+    return _jsx(SearchField, { ...props, ref: ref, clearable: clearable, clearLabel: clearLabel, controlSize: controlSize, group: InputGroup, action: IconButton, icon: IconSlot });
+});
+export const PasswordInput = forwardRef(function PasswordInput({ defaultVisible = false, showPasswordLabel = "Show password", hidePasswordLabel = "Hide password", controlSize = "md", ...props }, ref) {
+    return _jsx(PasswordField, { ...props, ref: ref, defaultVisible: defaultVisible, showPasswordLabel: showPasswordLabel, hidePasswordLabel: hidePasswordLabel, controlSize: controlSize, group: InputGroup, action: IconButton, icon: IconSlot });
+});
+/** @since 0.2.5 */
+export const Combobox = forwardRef(function Combobox({ value, defaultValue = "", onValueChange, clearable = false, emptyMessage = "No results found.", listLabel = "Options", toggleLabel = "Show options", clearLabel = "Clear selection", invalidSelectionMessage = "Select an option.", controlSize = "md", ...props }, ref) {
+    return _jsx(SearchSelection, { ...props, ref: ref, multiple: false, selectedValues: value === undefined ? undefined : value ? [value] : [], initialValues: defaultValue ? [defaultValue] : [], onSelectionChange: next => onValueChange?.(next[0] ?? ""), clearable: clearable, emptyMessage: emptyMessage, listLabel: listLabel, toggleLabel: toggleLabel, clearLabel: clearLabel, invalidSelectionMessage: invalidSelectionMessage, controlSize: controlSize });
+});
+/** @since 0.2.5 */
+export const MultiSelect = forwardRef(function MultiSelect({ value, defaultValue = [], onValueChange, removeItemLabel = "Remove", clearable = false, emptyMessage = "No results found.", listLabel = "Options", toggleLabel = "Show options", clearLabel = "Clear selection", invalidSelectionMessage = "Select at least one option.", controlSize = "md", ...props }, ref) {
+    return _jsx(SearchSelection, { ...props, ref: ref, multiple: true, selectedValues: value, initialValues: defaultValue, onSelectionChange: onValueChange, removeItemLabel: removeItemLabel, clearable: clearable, emptyMessage: emptyMessage, listLabel: listLabel, toggleLabel: toggleLabel, clearLabel: clearLabel, invalidSelectionMessage: invalidSelectionMessage, controlSize: controlSize });
+});
+/** @since 0.2.5 */
+export const NumberInput = forwardRef(function NumberInput({ defaultValue = 0, step = 1, controlSize = "md", decreaseLabel = "Decrease value", increaseLabel = "Increase value", ...props }, ref) {
+    return _jsx(NumericStepper, { ...props, ref: ref, defaultValue: defaultValue, step: step, controlSize: controlSize, decreaseLabel: decreaseLabel, increaseLabel: increaseLabel, inputComponent: InputGroup, buttonComponent: IconButton });
+});
+/** @since 0.2.5 */
+export const Slider = forwardRef(function Slider({ defaultValue = [50], min = 0, max = 100, step = 1, showValue = true, readOnly = false, controlSize = "md", ...props }, ref) {
+    return _jsx(RangeControl, { ...props, ref: ref, defaultValue: defaultValue, min: min, max: max, step: step, showValue: showValue, readOnly: readOnly, controlSize: controlSize, fieldsetComponent: Fieldset });
+});
 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) }));
 });
@@ -336,3 +386,31 @@ export const CodeSnippet = forwardRef(function CodeSnippet({ code, codeDirection
 export const ScrollArea = forwardRef(function ScrollArea({ orientation = "vertical", contentInset = "scrollbar", ...props }, ref) {
     return _jsx(OverlayScrollArea, { ...props, orientation: orientation, contentInset: contentInset, ref: ref });
 });
+export const CopyButton = forwardRef(function CopyButton({ copyLabel = "Copy", copiedLabel = "Copied", errorLabel = "Failed", resetDelay = 2000, size = "md", variant = "subtle", ...props }, ref) {
+    return _jsx(ClipboardAction, { ...props, ref: ref, copyLabel: copyLabel, copiedLabel: copiedLabel, errorLabel: errorLabel, resetDelay: resetDelay, size: size, variant: variant });
+});
+export const ToastRegion = forwardRef(function ToastRegion({ label = "Notifications", closeLabel = "Dismiss notification", placement = "bottom-end", limit = 3, inline = false, hotkey = true, ...props }, ref) {
+    return _jsx(NotificationRegion, { ...props, ref: ref, label: label, closeLabel: closeLabel, placement: placement, limit: limit, inline: inline, hotkey: hotkey });
+});
+export const AvatarGroup = forwardRef(function AvatarGroup({ max = 4, size = "md", ...props }, ref) { return _jsx(GroupedAvatars, { ...props, ref: ref, max: max, size: size }); });
+export const StatusIndicator = forwardRef(function StatusIndicator({ tone = "neutral", size = "md", announce = false, ...props }, ref) { return _jsx(NamedStatus, { ...props, ref: ref, tone: tone, size: size, announce: announce }); });
+export const Figure = forwardRef(function Figure({ captionPosition = "after", ...props }, ref) { return _jsx(CaptionedFigure, { ...props, ref: ref, captionPosition: captionPosition }); });
+export const Blockquote = forwardRef(function Blockquote(props, ref) {
+    return _jsx(AttributedQuote, { ...props, ref: ref });
+});
+export const InlineCode = forwardRef(function InlineCode({ size = "md", wrap = true, ...props }, ref) { return _jsx(InlineCodeText, { ...props, ref: ref, size: size, wrap: wrap }); });
+export const Metric = forwardRef(function Metric({ size = "md", ...props }, ref) { return _jsx(MeasuredValue, { ...props, ref: ref, size: size }); });
+export const Timeline = forwardRef(function Timeline(props, ref) {
+    return _jsx(EventTimeline, { ...props, ref: ref });
+});
+export const NavigationList = forwardRef(function NavigationList({ size = "md", ...props }, ref) { return _jsx(NavigationMenu, { ...props, ref: ref, size: size }); });
+export const Steps = forwardRef(function Steps({ orientation = "horizontal", ...props }, ref) { return _jsx(StepSequence, { ...props, ref: ref, orientation: orientation }); });
+export const Section = forwardRef(function Section({ headingLevel = 2, headingSize = "section", ...props }, ref) { return _jsx(ContentSection, { ...props, ref: ref, headingLevel: headingLevel, headingSize: headingSize }); });
+export const Split = forwardRef(function Split({ side = "end", ratio = "main", collapseAt = "md", gap = "6", ...props }, ref) { return _jsx(SplitLayout, { ...props, ref: ref, side: side, ratio: ratio, collapseAt: collapseAt, gap: gap }); });
+export const Center = forwardRef(function Center({ inline = false, ...props }, ref) { return _jsx(CenterLayout, { ...props, ref: ref, inline: inline }); });
+export const SkipLink = forwardRef(function SkipLink({ children = "Skip to content", ...props }, ref) { return _jsx(SkipNavigation, { ...props, ref: ref, children: children }); });
+export const ListBox = forwardRef(function ListBox({ multiple = false, disabled = false, readOnly = false, hideLabel = false, controlSize = "md", ...props }, ref) { return _jsx(CollectionListBox, { ...props, ref: ref, multiple: multiple, disabled: disabled, readOnly: readOnly, hideLabel: hideLabel, controlSize: controlSize }); });
+export const PinInput = forwardRef(function PinInput({ length = 6, mode = "numeric", mask = false, hideLabel = false, controlSize = "md", ...props }, ref) { return _jsx(SegmentedPinInput, { ...props, ref: ref, length: length, mode: mode, mask: mask, hideLabel: hideLabel, controlSize: controlSize }); });
+export const Rating = forwardRef(function Rating({ max = 5, defaultValue = 0, hideLabel = false, readOnly = false, size = "md", ...props }, ref) { return _jsx(StarRating, { ...props, ref: ref, max: max, defaultValue: defaultValue, hideLabel: hideLabel, readOnly: readOnly, size: size }); });
+export const Dropzone = forwardRef(function Dropzone({ description = "Drop files here or choose from your device.", multiple = true, ...props }, ref) { return _jsx(FileDropzone, { ...props, ref: ref, description: description, multiple: multiple }); });
+export const CharacterCount = forwardRef(function CharacterCount({ mode = "count", label = "Characters", overLimitLabel = "Over limit", ...props }, ref) { return _jsx(SupportingCharacterCount, { ...props, ref: ref, mode: mode, label: label, overLimitLabel: overLimitLabel }); });

package/dist/navigation-layout.d.ts

@@ -0,0 +1,7 @@
+import type { NavigationListProps, StepsProps, SectionProps, SplitProps, CenterProps, SkipLinkProps } from "./index.js";
+export declare const NavigationMenu: import("react").ForwardRefExoticComponent<NavigationListProps & import("react").RefAttributes<HTMLElement>>;
+export declare const StepSequence: import("react").ForwardRefExoticComponent<StepsProps & import("react").RefAttributes<HTMLOListElement>>;
+export declare const ContentSection: import("react").ForwardRefExoticComponent<SectionProps & import("react").RefAttributes<HTMLElement>>;
+export declare const SplitLayout: import("react").ForwardRefExoticComponent<SplitProps & import("react").RefAttributes<HTMLDivElement>>;
+export declare const CenterLayout: import("react").ForwardRefExoticComponent<CenterProps & import("react").RefAttributes<HTMLDivElement>>;
+export declare const SkipNavigation: import("react").ForwardRefExoticComponent<SkipLinkProps & import("react").RefAttributes<HTMLAnchorElement>>;

package/dist/navigation-layout.js

@@ -0,0 +1,77 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useId } from "react";
+import { IconSlot, Heading } from "./index.js";
+const classes = (...names) => names.filter(Boolean).join(" ");
+function uniqueValues(items, component) {
+    if (items.some(item => !item.value.trim()) || new Set(items.map(item => item.value)).size !== items.length)
+        throw new Error(`Flood ${component} items require unique nonempty values`);
+}
+export const NavigationMenu = forwardRef(function NavigationMenu({ items, label, currentValue, size = "md", className, ...props }, ref) {
+    uniqueValues(items, "NavigationList");
+    if (!label.trim() || items.some(item => !item.label.trim() || !item.href.trim()))
+        throw new Error("Flood NavigationList requires a name and labelled links with destinations");
+    const id = useId();
+    const groups = [];
+    for (const item of items) {
+        const previous = groups.at(-1);
+        if (previous?.label === (item.group ?? ""))
+            previous.items.push(item);
+        else
+            groups.push({ label: item.group ?? "", items: [item] });
+    }
+    const links = (entries) => entries.map(item => _jsx("li", { children: _jsxs("a", { ...item.linkProps, href: item.href, "aria-current": item.value === currentValue ? "page" : undefined, className: classes("flood-navigation-list__link", item.linkProps?.className), children: [item.icon != null && _jsx(IconSlot, { size: size, children: item.icon }), _jsxs("span", { className: "flood-navigation-list__text", children: [_jsx("span", { className: "flood-navigation-list__label", children: item.label }), item.description && _jsx("span", { className: "flood-navigation-list__description", children: item.description })] })] }) }, item.value));
+    return _jsx("nav", { ...props, ref: ref, "aria-label": label, className: classes("flood-navigation-list", className), "data-size": size, children: _jsx("ul", { role: "list", className: "flood-navigation-list__groups", children: groups.map((group, index) => group.label ? _jsxs("li", { className: "flood-navigation-list__group", children: [_jsx("p", { className: "flood-navigation-list__group-title", id: `${id}-${index}`, children: group.label }), _jsx("ul", { role: "list", "aria-labelledby": `${id}-${index}`, children: links(group.items) })] }, index) : links(group.items)) }) });
+});
+export const StepSequence = forwardRef(function StepSequence({ items, label, currentValue = items[0]?.value, orientation = "horizontal", onStepChange, statusLabels = { complete: "Completed", current: "Current step", upcoming: "Upcoming", error: "Needs attention" }, className, ...props }, ref) {
+    uniqueValues(items, "Steps");
+    if (!label.trim() || items.some(item => !item.title.trim()))
+        throw new Error("Flood Steps requires a sequence name and step titles");
+    const currentIndex = items.findIndex(item => item.value === currentValue);
+    if (currentValue !== undefined && currentIndex < 0)
+        throw new Error("Flood Steps currentValue must identify a step");
+    return _jsx("ol", { ...props, ref: ref, role: "list", "aria-label": label, "data-orientation": orientation, className: classes("flood-steps", className), children: items.map((item, index) => {
+            const current = index === currentIndex;
+            const state = item.status === "error" ? "error" : current ? "current" : item.status ?? (index < currentIndex ? "complete" : "upcoming");
+            const content = _jsxs(_Fragment, { children: [_jsx("span", { className: "flood-steps__indicator", "aria-hidden": "true", children: state === "complete" ? _jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: _jsx("path", { d: "m5 12 4 4 10-10" }) }) : state === "error" ? "!" : index + 1 }), _jsxs("span", { className: "flood-steps__text", children: [_jsx("span", { className: "flood-steps__title", children: item.title }), _jsx("span", { className: "flood-visually-hidden", children: statusLabels[state] }), item.description && _jsx("span", { className: "flood-steps__description", children: item.description })] })] });
+            return _jsx("li", { "data-state": state, "aria-current": current ? "step" : undefined, children: onStepChange ? _jsx("button", { type: "button", className: "flood-steps__content flood-steps__action", disabled: item.disabled, onClick: () => onStepChange(item.value), children: content }) : _jsx("div", { className: "flood-steps__content", children: content }) }, item.value);
+        }) });
+});
+export const ContentSection = forwardRef(function ContentSection({ title, description, actions, headingLevel = 2, headingSize = "section", children, id: explicitId, className, "aria-labelledby": labelledBy, ...props }, ref) {
+    if (!title.trim() || ![2, 3, 4, 5, 6].includes(headingLevel))
+        throw new Error("Flood Section requires a nonempty title and headingLevel from 2 to 6");
+    const generated = useId(), headingId = `${explicitId ?? `flood-section-${generated}`}-title`;
+    return _jsxs("section", { ...props, ref: ref, id: explicitId, "aria-labelledby": labelledBy ?? headingId, className: classes("flood-section", className), children: [_jsxs("header", { className: "flood-section__header", children: [_jsxs("div", { className: "flood-section__heading", children: [_jsx(Heading, { id: headingId, level: headingLevel, size: headingSize, className: "flood-section__title", children: title }), description != null && _jsx("div", { className: "flood-section__description", children: description })] }), actions != null && _jsx("div", { className: "flood-section__actions", children: actions })] }), children != null && _jsx("div", { className: "flood-section__body", children: children })] });
+});
+export const SplitLayout = forwardRef(function SplitLayout({ main, aside, side = "end", ratio = "main", collapseAt = "md", gap = "6", className, style, ...props }, ref) {
+    const primary = _jsx("div", { className: "flood-split__main", children: main }, "main"), secondary = _jsx("div", { className: "flood-split__aside", children: aside }, "aside");
+    return _jsx("div", { ...props, ref: ref, className: classes("flood-split", className), style: { "--flood-layout-gap": `var(--flood-sys-space-${gap})`, ...style }, children: _jsx("div", { className: "flood-split__layout", "data-side": side, "data-ratio": ratio, "data-collapse": collapseAt, children: side === "start" ? [secondary, primary] : [primary, secondary] }) });
+});
+export const CenterLayout = forwardRef(function CenterLayout({ inline = false, maxWidth, minHeight, className, style, children, ...props }, ref) {
+    return _jsx("div", { ...props, ref: ref, className: classes("flood-center", className), "data-inline": inline || undefined, style: { minBlockSize: minHeight, "--flood-center-max": maxWidth, ...style }, children: _jsx("div", { className: "flood-center__content", children: children }) });
+});
+export const SkipNavigation = forwardRef(function SkipNavigation({ children = "Skip to content", className, onClick, href, ...props }, ref) {
+    if (!href.startsWith("#") || href.length < 2)
+        throw new Error("Flood SkipLink requires a nonempty same-page fragment href");
+    return _jsx("a", { ...props, ref: ref, href: href, className: classes("flood-skip-link", className), onClick: event => {
+            onClick?.(event);
+            if (event.defaultPrevented || event.button !== 0 || event.metaKey || event.ctrlKey || event.altKey || event.shiftKey || (props.target && props.target !== "_self"))
+                return;
+            const document = event.currentTarget.ownerDocument, view = document.defaultView;
+            let id;
+            try {
+                id = decodeURIComponent(href.slice(1));
+            }
+            catch {
+                return;
+            }
+            const target = document.getElementById(id);
+            if (!target || !view)
+                return;
+            view.requestAnimationFrame(() => {
+                if (!target.isConnected)
+                    return;
+                target.focus({ preventScroll: true });
+                target.scrollIntoView({ block: "start", behavior: view.matchMedia("(prefers-reduced-motion: reduce)").matches ? "instant" : "auto" });
+            });
+        }, children: children });
+});

package/dist/numeric-input.d.ts

@@ -0,0 +1,8 @@
+import type { NumberInputProps, InputGroup, IconButton } from "./index.js";
+interface Props extends NumberInputProps {
+    inputComponent: typeof InputGroup;
+    buttonComponent: typeof IconButton;
+}
+/** The browser owns decimal stepping, validity, editing and form submission. */
+export declare const NumericStepper: import("react").ForwardRefExoticComponent<Props & import("react").RefAttributes<HTMLInputElement>>;
+export {};

package/dist/numeric-input.js

@@ -0,0 +1,68 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useEffect, useImperativeHandle, useRef, useState } from "react";
+/** The browser owns decimal stepping, validity, editing and form submission. */
+export const NumericStepper = forwardRef(function NumericStepper({ inputComponent: Group, buttonComponent: Action, value, defaultValue = 0, onValueChange, min, max, step = 1, disabled, readOnly, controlSize = "md", decreaseLabel = "Decrease value", increaseLabel = "Increase value", className, onBlur, onKeyDown, ...props }, ref) {
+    if (!Number.isFinite(step) || step <= 0 || (min !== undefined && !Number.isFinite(min)) || (max !== undefined && !Number.isFinite(max)) || (min !== undefined && max !== undefined && min > max))
+        throw new Error("Flood NumberInput requires finite bounds and a positive step");
+    for (const number of [value, defaultValue])
+        if (number !== undefined && number !== null && !Number.isFinite(number))
+            throw new Error("Flood NumberInput value must be finite or null");
+    if (!decreaseLabel.trim() || !increaseLabel.trim())
+        throw new Error("Flood NumberInput step actions require accessible names");
+    const input = useRef(null);
+    useImperativeHandle(ref, () => input.current, []);
+    const initial = useRef(defaultValue === null ? "" : String(defaultValue));
+    const [local, setLocal] = useState(initial.current);
+    const [, refresh] = useState(0);
+    const current = value === undefined ? local : value === null ? "" : String(value);
+    const number = current === "" ? null : Number(current);
+    const publish = (text) => {
+        setLocal(text);
+        refresh(revision => revision + 1);
+        onValueChange?.(text === "" ? null : Number(text));
+    };
+    useEffect(() => {
+        const form = input.current?.form;
+        if (!form || value !== undefined)
+            return;
+        const reset = (event) => queueMicrotask(() => { if (!event.defaultPrevented)
+            setLocal(initial.current); });
+        form.addEventListener("reset", reset);
+        return () => form.removeEventListener("reset", reset);
+    }, [value, props.form]);
+    const move = (direction) => {
+        const node = input.current;
+        if (!node || disabled || readOnly || node.matches(":disabled"))
+            return;
+        const before = node.value;
+        if (direction > 0)
+            node.stepUp();
+        else
+            node.stepDown();
+        if (node.value !== before)
+            publish(node.value);
+    };
+    const glyph = (increase) => _jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.75", strokeLinecap: "round", "aria-hidden": "true", children: [_jsx("path", { d: "M5 12h14" }), increase && _jsx("path", { d: "M12 5v14" })] });
+    return _jsx(Group, { ...props, ref: input, type: "number", value: current, min: min, max: max, step: step, controlSize: controlSize, disabled: disabled, readOnly: readOnly, className: ["flood-number-input", className].filter(Boolean).join(" "), onChange: event => { if (!readOnly && !disabled)
+            publish(event.currentTarget.value); }, onBlur: event => {
+            onBlur?.(event);
+            if (event.defaultPrevented || readOnly || disabled || event.currentTarget.value === "")
+                return;
+            const node = event.currentTarget;
+            const before = node.value;
+            if (node.validity.rangeUnderflow && min !== undefined)
+                node.value = String(min);
+            if (node.validity.rangeOverflow && max !== undefined)
+                node.value = String(max);
+            if (node.value !== before)
+                publish(node.value);
+        }, onKeyDown: event => {
+            onKeyDown?.(event);
+            if (event.defaultPrevented || event.altKey || event.ctrlKey || event.metaKey || event.shiftKey || event.nativeEvent.isComposing || readOnly || disabled)
+                return;
+            if (event.key === "ArrowUp" || event.key === "ArrowDown") {
+                event.preventDefault();
+                move(event.key === "ArrowUp" ? 1 : -1);
+            }
+        }, start: _jsx(Action, { label: decreaseLabel, variant: "ghost", size: controlSize, disabled: disabled || readOnly || (number !== null && min !== undefined && number <= min), onClick: () => move(-1), children: glyph(false) }), end: _jsx(Action, { label: increaseLabel, variant: "ghost", size: controlSize, disabled: disabled || readOnly || (number !== null && max !== undefined && number >= max), onClick: () => move(1), children: glyph(true) }) });
+});