@vireocodedev/ui 0.2.0 → 0.2.1

package/dist/capabilities/forms/components/forms/VireoFormToggleButtonGroupField/VireoFormToggleButtonGroupField.js

@@ -0,0 +1,179 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { createElement as _createElement } from "react";
+import { useVireoFormContext } from "../../../../../capabilities/forms/contexts/VireoFormContext/VireoFormContext.js";
+import { useVireoFieldContext } from "../../../../../capabilities/forms/contexts/VireoFormHookContexts/VireoFormHookContexts.js";
+import { formatFirstVireoFormError, shouldDisplayVireoFormError } from "../../../../../capabilities/forms/utils/vireoFormErrors.js";
+import { joinClassNames, mergeSx, resolveSlotProps } from "../../../../../core/public.js";
+import { unstable_composeClasses as composeClasses, } from "@mui/material";
+import { useThemeProps } from "@mui/material/styles";
+import { useForkRef } from "@mui/material/utils";
+import { useStore } from "@tanstack/react-form";
+import React from "react";
+import { getVireoFormToggleButtonGroupFieldUtilityClass, } from "./VireoFormToggleButtonGroupField.classes.js";
+import { VIREO_FORM_TOGGLE_BUTTON_GROUP_FIELD_NAME, } from "./VireoFormToggleButtonGroupField.identity.js";
+import { VireoFormToggleButtonGroupFieldFormHelperText, VireoFormToggleButtonGroupFieldRoot, VireoFormToggleButtonGroupFieldToggleButton, VireoFormToggleButtonGroupFieldToggleButtonGroup, } from "./VireoFormToggleButtonGroupField.styled.js";
+function useUtilityClasses(ownerState, classes) {
+    return composeClasses({
+        root: [
+            "root",
+            ownerState.dirty && "dirty",
+            ownerState.touched && "touched",
+            ownerState.invalid && "invalid",
+            ownerState.errorVisible && "errorVisible",
+            ownerState.validating && "validating",
+            ownerState.submitting && "submitting",
+            ownerState.disabled && "disabled",
+            ownerState.readOnly && "readOnly",
+            ownerState.hasValue && "hasValue",
+            ownerState.multiple && "multiple",
+        ],
+        toggleButtonGroup: ["toggleButtonGroup"],
+        toggleButton: ["toggleButton"],
+        formHelperText: ["formHelperText"],
+    }, getVireoFormToggleButtonGroupFieldUtilityClass, classes);
+}
+function valuesEqual(left, right) {
+    return Object.is(left, right);
+}
+function optionKey(value) {
+    return `${typeof value}:${String(value)}`;
+}
+function hasDuplicateValues(options) {
+    return options.some((option, index) => options.slice(0, index).some(previous => valuesEqual(previous.value, option.value)));
+}
+function joinIds(...ids) {
+    const joined = ids.filter(Boolean).join(" ");
+    return joined || undefined;
+}
+function isAriaInvalid(value) {
+    return value === true || value === "true";
+}
+function VireoFormToggleButtonGroupFieldImpl(inProps, forwardedRef) {
+    const props = useThemeProps({
+        props: inProps,
+        name: VIREO_FORM_TOGGLE_BUTTON_GROUP_FIELD_NAME,
+    });
+    const { "aria-describedby": ariaDescribedBy, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, className, classes: classesProp, color = "standard", disabled = false, disableClearable = false, error = false, errorDisplay: errorDisplayProp, formatError: formatErrorProp, fullWidth = true, getOptionProps, helperText = " ", multiple = false, onBlur, onChange, onValueChange, options, orientation = "horizontal", readOnly = false, renderOption, required = false, size = "medium", slotProps = {}, slots = {}, style, sx, ...other } = props;
+    if (hasDuplicateValues(options)) {
+        throw new Error(`${VIREO_FORM_TOGGLE_BUTTON_GROUP_FIELD_NAME} options must have unique values.`);
+    }
+    const field = useVireoFieldContext();
+    const formContext = useVireoFormContext();
+    const generatedHelperTextId = React.useId();
+    const fieldState = useStore(field.store, current => ({
+        dirty: current.meta.isDirty,
+        errors: current.meta.errors,
+        invalid: !current.meta.isValid,
+        touched: current.meta.isTouched,
+        validating: current.meta.isValidating,
+        value: current.value,
+    }));
+    const submitting = useStore(field.form.store, current => current.isSubmitting);
+    const errorDisplay = errorDisplayProp ?? formContext.errorDisplay;
+    const errorVisible = fieldState.invalid &&
+        shouldDisplayVireoFormError(errorDisplay, {
+            submissionAttempts: formContext.submissionAttempts,
+            touched: fieldState.touched,
+        });
+    const formattedError = errorVisible
+        ? formatFirstVireoFormError(fieldState.errors, formatErrorProp ?? formContext.formatError)
+        : undefined;
+    const multipleValue = Array.isArray(fieldState.value) ? fieldState.value : [];
+    const exclusiveValue = Array.isArray(fieldState.value) || fieldState.value === undefined ? null : fieldState.value;
+    const hasValue = multiple ? multipleValue.length > 0 : exclusiveValue !== null;
+    const ownerState = {
+        color,
+        dirty: fieldState.dirty,
+        disabled,
+        disableClearable,
+        errorVisible: error || errorVisible,
+        fullWidth,
+        hasValue,
+        invalid: fieldState.invalid,
+        multiple,
+        orientation,
+        readOnly,
+        required,
+        size,
+        submitting,
+        touched: fieldState.touched,
+        validating: fieldState.validating,
+    };
+    const classes = useUtilityClasses(ownerState, classesProp);
+    const resolvedRootSlotProps = resolveSlotProps(slotProps.root, ownerState);
+    const { className: rootSlotClassName, ref: rootSlotRef, style: rootSlotStyle, sx: rootSlotSx, ...rootSlotOther } = resolvedRootSlotProps;
+    const resolvedGroupSlotProps = resolveSlotProps(slotProps.toggleButtonGroup, ownerState);
+    const { "aria-describedby": groupSlotAriaDescribedBy, "aria-invalid": groupSlotAriaInvalid, "aria-label": groupSlotAriaLabel, "aria-labelledby": groupSlotAriaLabelledBy, className: groupSlotClassName, exclusive: _groupSlotExclusive, onBlur: groupSlotOnBlur, onChange: groupSlotOnChange, ref: groupSlotRef, value: _groupSlotValue, ...groupSlotOther } = resolvedGroupSlotProps;
+    void _groupSlotExclusive;
+    void _groupSlotValue;
+    const resolvedToggleButtonSlotProps = resolveSlotProps(slotProps.toggleButton, ownerState);
+    const { children: _toggleButtonSlotChildren, className: toggleButtonSlotClassName, disabled: toggleButtonSlotDisabled, onChange: _toggleButtonSlotOnChange, selected: _toggleButtonSlotSelected, value: _toggleButtonSlotValue, ...toggleButtonSlotOther } = resolvedToggleButtonSlotProps;
+    void _toggleButtonSlotChildren;
+    void _toggleButtonSlotOnChange;
+    void _toggleButtonSlotSelected;
+    void _toggleButtonSlotValue;
+    const resolvedHelperSlotProps = resolveSlotProps(slotProps.formHelperText, ownerState);
+    const { className: helperSlotClassName, id: helperSlotId, ...helperSlotOther } = resolvedHelperSlotProps;
+    const rootRef = useForkRef(forwardedRef, rootSlotRef);
+    const effectiveError = error || fieldState.invalid;
+    const effectiveHelperText = errorVisible ? formattedError : helperText;
+    const helperTextId = helperSlotId ?? generatedHelperTextId;
+    const describedBy = joinIds(ariaDescribedBy, groupSlotAriaDescribedBy, effectiveHelperText !== undefined ? helperTextId : undefined);
+    const isSelected = (value) => multiple
+        ? multipleValue.some(selectedValue => valuesEqual(value, selectedValue))
+        : valuesEqual(value, exclusiveValue);
+    const normalizeMultipleValue = (candidate) => {
+        const values = Array.isArray(candidate) ? candidate : [];
+        return options.filter(option => values.some(value => valuesEqual(option.value, value))).map(option => option.value);
+    };
+    const handleChange = (event, candidateValue) => {
+        if (disabled || readOnly)
+            return;
+        const nextValue = multiple
+            ? normalizeMultipleValue(candidateValue)
+            : (options.find(option => valuesEqual(option.value, candidateValue))?.value ?? null);
+        const wouldClear = multiple ? nextValue.length === 0 : nextValue === null;
+        if (disableClearable && hasValue && wouldClear)
+            return;
+        groupSlotOnChange?.(event, nextValue);
+        if (event.defaultPrevented)
+            return;
+        onChange?.(event, nextValue);
+        if (event.defaultPrevented)
+            return;
+        onValueChange?.(nextValue);
+        field.handleChange(nextValue);
+    };
+    const handleBlur = event => {
+        groupSlotOnBlur?.(event);
+        if (event.defaultPrevented)
+            return;
+        onBlur?.(event);
+        if (event.defaultPrevented)
+            return;
+        field.handleBlur();
+    };
+    const selectedEnabledIndex = options.findIndex(option => isSelected(option.value) && !disabled && !option.disabled);
+    const firstEnabledIndex = options.findIndex(option => !disabled && !option.disabled);
+    const preferredFocusIndex = selectedEnabledIndex >= 0 ? selectedEnabledIndex : firstEnabledIndex;
+    return (_jsxs(VireoFormToggleButtonGroupFieldRoot, { ...other, ...rootSlotOther, as: slots.root, ref: rootRef, ownerState: ownerState, className: joinClassNames(classes.root, className, rootSlotClassName), disabled: disabled, error: effectiveError, fullWidth: fullWidth, required: required, style: { ...style, ...rootSlotStyle }, sx: mergeSx(sx, rootSlotSx), children: [_jsx(VireoFormToggleButtonGroupFieldToggleButtonGroup, { ...groupSlotOther, as: slots.toggleButtonGroup, ref: groupSlotRef, ownerState: ownerState, "aria-describedby": describedBy, "aria-invalid": effectiveError || isAriaInvalid(groupSlotAriaInvalid) || undefined, "aria-label": ariaLabel ?? groupSlotAriaLabel, "aria-labelledby": ariaLabelledBy ?? groupSlotAriaLabelledBy, "aria-readonly": readOnly || undefined, "aria-required": required || undefined, className: joinClassNames(classes.toggleButtonGroup, groupSlotClassName), color: color, exclusive: !multiple, onBlur: handleBlur, onChange: handleChange, orientation: orientation, size: size, value: multiple ? multipleValue : exclusiveValue, children: options.map((option, index) => {
+                    const selected = isSelected(option.value);
+                    const optionDisabled = disabled || toggleButtonSlotDisabled === true || option.disabled === true;
+                    const optionState = { disabled: optionDisabled, index, selected };
+                    const optionProps = (getOptionProps?.(option, optionState) ?? {});
+                    const { children: _optionChildren, className: optionClassName, disabled: _optionDisabled, onChange: _optionOnChange, selected: _optionSelected, value: _optionValue, ...optionOther } = optionProps;
+                    void _optionChildren;
+                    void _optionDisabled;
+                    void _optionOnChange;
+                    void _optionSelected;
+                    void _optionValue;
+                    return (_createElement(VireoFormToggleButtonGroupFieldToggleButton, { ...toggleButtonSlotOther, ...optionOther, as: slots.toggleButton, key: optionKey(option.value), ownerState: ownerState, "aria-label": option.ariaLabel ?? optionOther["aria-label"], className: joinClassNames(classes.toggleButton, toggleButtonSlotClassName, optionClassName), "data-vireo-field-focus-target": index === preferredFocusIndex ? "true" : undefined, disabled: optionDisabled, value: option.value }, renderOption?.(option, optionState) ?? option.label));
+                }) }), effectiveHelperText !== undefined && (_jsx(VireoFormToggleButtonGroupFieldFormHelperText, { ...helperSlotOther, as: slots.formHelperText, id: helperTextId, ownerState: ownerState, className: joinClassNames(classes.formHelperText, helperSlotClassName), children: effectiveHelperText }))] }));
+}
+/**
+ * Binds exclusive or multiple scalar choices to the current TanStack Form field through toggle buttons.
+ *
+ * Consumers render it as `field.ToggleButtonGroupField`; the raw runtime remains internal to the forms capability.
+ */
+export const VireoFormToggleButtonGroupField = React.forwardRef(VireoFormToggleButtonGroupFieldImpl);
+VireoFormToggleButtonGroupField.displayName = VIREO_FORM_TOGGLE_BUTTON_GROUP_FIELD_NAME;

package/dist/capabilities/forms/components/forms/VireoFormToggleButtonGroupField/VireoFormToggleButtonGroupField.styled.d.ts

@@ -0,0 +1,9 @@
+import { type StyledSlotComponent } from "../../../../../core/public.js";
+import { type FormControlProps, type FormHelperTextProps, type ToggleButtonGroupProps, type ToggleButtonProps } from "@mui/material";
+import type { VireoFormToggleButtonGroupFieldOwnerState } from "./VireoFormToggleButtonGroupField.types.js";
+type StyledComponent<TProps extends object> = StyledSlotComponent<TProps, VireoFormToggleButtonGroupFieldOwnerState>;
+export declare const VireoFormToggleButtonGroupFieldRoot: StyledComponent<FormControlProps>;
+export declare const VireoFormToggleButtonGroupFieldToggleButtonGroup: StyledComponent<ToggleButtonGroupProps>;
+export declare const VireoFormToggleButtonGroupFieldToggleButton: StyledComponent<ToggleButtonProps>;
+export declare const VireoFormToggleButtonGroupFieldFormHelperText: StyledComponent<FormHelperTextProps>;
+export {};

package/dist/capabilities/forms/components/forms/VireoFormToggleButtonGroupField/VireoFormToggleButtonGroupField.styled.js

@@ -0,0 +1,51 @@
+import { FormControl, FormHelperText, ToggleButton, ToggleButtonGroup, } from "@mui/material";
+import { styled } from "@mui/material/styles";
+import { VIREO_FORM_TOGGLE_BUTTON_GROUP_FIELD_NAME } from "./VireoFormToggleButtonGroupField.identity.js";
+export const VireoFormToggleButtonGroupFieldRoot = styled(FormControl, {
+    name: VIREO_FORM_TOGGLE_BUTTON_GROUP_FIELD_NAME,
+    slot: "Root",
+    overridesResolver: (props, styles) => [
+        styles.root,
+        props.ownerState.dirty && styles.dirty,
+        props.ownerState.touched && styles.touched,
+        props.ownerState.invalid && styles.invalid,
+        props.ownerState.errorVisible && styles.errorVisible,
+        props.ownerState.validating && styles.validating,
+        props.ownerState.submitting && styles.submitting,
+        props.ownerState.disabled && styles.disabled,
+        props.ownerState.readOnly && styles.readOnly,
+        props.ownerState.hasValue && styles.hasValue,
+        props.ownerState.multiple && styles.multiple,
+    ],
+})(({ ownerState }) => ({
+    minWidth: 0,
+    ...(ownerState.fullWidth && { width: "100%" }),
+}));
+export const VireoFormToggleButtonGroupFieldToggleButtonGroup = styled(ToggleButtonGroup, {
+    name: VIREO_FORM_TOGGLE_BUTTON_GROUP_FIELD_NAME,
+    slot: "ToggleButtonGroup",
+    overridesResolver: (_props, styles) => styles.toggleButtonGroup,
+})(({ ownerState, theme }) => ({
+    minWidth: 0,
+    flexWrap: "nowrap",
+    ...(ownerState.fullWidth && { width: "100%" }),
+    ...(ownerState.orientation === "vertical" && { alignItems: "stretch" }),
+    ...(ownerState.errorVisible && { "& .MuiToggleButton-root": { borderColor: theme.palette.error.main } }),
+}));
+export const VireoFormToggleButtonGroupFieldToggleButton = styled(ToggleButton, {
+    name: VIREO_FORM_TOGGLE_BUTTON_GROUP_FIELD_NAME,
+    slot: "ToggleButton",
+    overridesResolver: (_props, styles) => styles.toggleButton,
+})(({ ownerState }) => ({
+    minWidth: 0,
+    whiteSpace: "normal",
+    ...(ownerState.fullWidth && {
+        flex: "1 1 0",
+        width: ownerState.orientation === "vertical" ? "100%" : undefined,
+    }),
+}));
+export const VireoFormToggleButtonGroupFieldFormHelperText = styled(FormHelperText, {
+    name: VIREO_FORM_TOGGLE_BUTTON_GROUP_FIELD_NAME,
+    slot: "FormHelperText",
+    overridesResolver: (_props, styles) => styles.formHelperText,
+})(({ theme }) => ({ marginInline: theme.spacing(1.75) }));

package/dist/capabilities/forms/components/forms/VireoFormToggleButtonGroupField/VireoFormToggleButtonGroupField.types.d.ts

@@ -0,0 +1,125 @@
+import type { VireoFormErrorDisplay, VireoFormErrorFormatter } from "../../../../../capabilities/forms/components/forms/VireoForm/VireoForm.types.js";
+import type { VireoDataAttributeValue, VireoThemeComponent } from "../../../../../core/public.js";
+import type { FormControl, FormControlProps, FormHelperText, ToggleButton, ToggleButtonGroup, ToggleButtonGroupProps, ToggleButtonProps } from "@mui/material";
+import type { CreateSlotsAndSlotProps, SlotProps } from "@mui/material/utils";
+import type React from "react";
+import { type VireoFormToggleButtonGroupFieldClasses, type VireoFormToggleButtonGroupFieldClassKey } from "./VireoFormToggleButtonGroupField.classes.js";
+import type { VIREO_FORM_TOGGLE_BUTTON_GROUP_FIELD_NAME } from "./VireoFormToggleButtonGroupField.identity.js";
+/** Scalar option identifiers supported by `field.ToggleButtonGroupField`. */
+export type VireoFormToggleButtonGroupFieldValue = string | number;
+/** One ordered choice rendered by `field.ToggleButtonGroupField`. */
+export type VireoFormToggleButtonGroupFieldOption<TValue extends VireoFormToggleButtonGroupFieldValue> = {
+    value: TValue;
+    label: React.ReactNode;
+    disabled?: boolean;
+    /** Accessible name for icon-only or otherwise non-descriptive visible content. */
+    ariaLabel?: string;
+};
+export type VireoFormToggleButtonGroupFieldOptionState = {
+    selected: boolean;
+    disabled: boolean;
+    index: number;
+};
+export type VireoFormToggleButtonGroupFieldOwnerState = {
+    color: NonNullable<ToggleButtonGroupProps["color"]>;
+    dirty: boolean;
+    disabled: boolean;
+    disableClearable: boolean;
+    errorVisible: boolean;
+    fullWidth: boolean;
+    hasValue: boolean;
+    invalid: boolean;
+    multiple: boolean;
+    orientation: NonNullable<ToggleButtonGroupProps["orientation"]>;
+    readOnly: boolean;
+    required: boolean;
+    size: NonNullable<ToggleButtonGroupProps["size"]>;
+    submitting: boolean;
+    touched: boolean;
+    validating: boolean;
+};
+export interface VireoFormToggleButtonGroupFieldRootSlotPropsOverrides {
+    [key: `data-${string}`]: VireoDataAttributeValue;
+}
+export interface VireoFormToggleButtonGroupFieldToggleButtonGroupSlotPropsOverrides {
+    [key: `data-${string}`]: VireoDataAttributeValue;
+}
+export interface VireoFormToggleButtonGroupFieldToggleButtonSlotPropsOverrides {
+    [key: `data-${string}`]: VireoDataAttributeValue;
+}
+export interface VireoFormToggleButtonGroupFieldFormHelperTextSlotPropsOverrides {
+    [key: `data-${string}`]: VireoDataAttributeValue;
+}
+/** Replaceable semantic regions exposed by the bound toggle-button-group field. */
+export type VireoFormToggleButtonGroupFieldSlots = {
+    root: React.ElementType;
+    toggleButtonGroup: React.ElementType;
+    toggleButton: React.ElementType;
+    formHelperText: React.ElementType;
+};
+/** Slot props exposed by the bound toggle-button-group field. */
+export type VireoFormToggleButtonGroupFieldSlotsAndSlotProps = CreateSlotsAndSlotProps<VireoFormToggleButtonGroupFieldSlots, {
+    /** @default FormControl */
+    root: SlotProps<typeof FormControl, VireoFormToggleButtonGroupFieldRootSlotPropsOverrides, VireoFormToggleButtonGroupFieldOwnerState>;
+    /** @default ToggleButtonGroup */
+    toggleButtonGroup: SlotProps<typeof ToggleButtonGroup, VireoFormToggleButtonGroupFieldToggleButtonGroupSlotPropsOverrides, VireoFormToggleButtonGroupFieldOwnerState>;
+    /** @default ToggleButton */
+    toggleButton: SlotProps<typeof ToggleButton, VireoFormToggleButtonGroupFieldToggleButtonSlotPropsOverrides, VireoFormToggleButtonGroupFieldOwnerState>;
+    /** @default FormHelperText */
+    formHelperText: SlotProps<typeof FormHelperText, VireoFormToggleButtonGroupFieldFormHelperTextSlotPropsOverrides, VireoFormToggleButtonGroupFieldOwnerState>;
+}>;
+type ComponentOwnedProp = "aria-describedby" | "aria-label" | "aria-labelledby" | "children" | "classes" | "color" | "component" | "defaultValue" | "disabled" | "error" | "fullWidth" | "name" | "onBlur" | "onChange" | "ref" | "required" | "size" | "slotProps" | "slots" | "value";
+/** Props inherited from FormControl after excluding form-owned and Vireo-owned props. */
+export type VireoFormToggleButtonGroupFieldInheritedProps = Omit<FormControlProps, ComponentOwnedProp>;
+/** Accessible naming contract for the toggle-button group itself. */
+export type VireoFormToggleButtonGroupFieldAccessibleNameProps = {
+    "aria-label": string;
+    "aria-labelledby"?: string;
+} | {
+    "aria-label"?: undefined;
+    "aria-labelledby": string;
+};
+type ProtectedToggleButtonProp = "children" | "disabled" | "onChange" | "selected" | "value";
+export type VireoFormToggleButtonGroupFieldOptionProps = Omit<ToggleButtonProps, ProtectedToggleButtonProp> & {
+    [key: `data-${string}`]: VireoDataAttributeValue;
+};
+export type VireoFormToggleButtonGroupFieldSharedProps<TValue extends VireoFormToggleButtonGroupFieldValue> = VireoFormToggleButtonGroupFieldSlotsAndSlotProps & {
+    options: readonly VireoFormToggleButtonGroupFieldOption<TValue>[];
+    renderOption?: (option: VireoFormToggleButtonGroupFieldOption<TValue>, state: VireoFormToggleButtonGroupFieldOptionState) => React.ReactNode;
+    getOptionProps?: (option: VireoFormToggleButtonGroupFieldOption<TValue>, state: VireoFormToggleButtonGroupFieldOptionState) => VireoFormToggleButtonGroupFieldOptionProps;
+    classes?: Partial<VireoFormToggleButtonGroupFieldClasses>;
+    color?: ToggleButtonGroupProps["color"];
+    disabled?: boolean;
+    disableClearable?: boolean;
+    error?: boolean;
+    errorDisplay?: VireoFormErrorDisplay;
+    formatError?: VireoFormErrorFormatter;
+    /** @default true */
+    fullWidth?: boolean;
+    /** Defaults to a reserved line; pass `null` to remove it. @default ' ' */
+    helperText?: React.ReactNode;
+    orientation?: ToggleButtonGroupProps["orientation"];
+    readOnly?: boolean;
+    required?: boolean;
+    size?: ToggleButtonGroupProps["size"];
+    onBlur?: NonNullable<ToggleButtonGroupProps["onBlur"]>;
+    "aria-describedby"?: string;
+};
+export type VireoFormToggleButtonGroupFieldExclusiveProps<TValue extends VireoFormToggleButtonGroupFieldValue> = VireoFormToggleButtonGroupFieldSharedProps<TValue> & {
+    multiple?: false;
+    onChange?: (event: React.MouseEvent<HTMLElement>, value: TValue | null) => void;
+    onValueChange?: (value: TValue | null) => void;
+};
+export type VireoFormToggleButtonGroupFieldMultipleProps<TValue extends VireoFormToggleButtonGroupFieldValue> = VireoFormToggleButtonGroupFieldSharedProps<TValue> & {
+    multiple: true;
+    onChange?: (event: React.MouseEvent<HTMLElement>, value: TValue[]) => void;
+    onValueChange?: (value: TValue[]) => void;
+};
+/** Props accepted by `field.ToggleButtonGroupField`. */
+export type VireoFormToggleButtonGroupFieldProps<TValue extends VireoFormToggleButtonGroupFieldValue = VireoFormToggleButtonGroupFieldValue> = (VireoFormToggleButtonGroupFieldExclusiveProps<TValue> | VireoFormToggleButtonGroupFieldMultipleProps<TValue>) & VireoFormToggleButtonGroupFieldAccessibleNameProps & VireoFormToggleButtonGroupFieldInheritedProps;
+declare module "@mui/material/styles" {
+    interface Components<Theme = unknown> {
+        [VIREO_FORM_TOGGLE_BUTTON_GROUP_FIELD_NAME]?: VireoThemeComponent<VireoFormToggleButtonGroupFieldProps, VireoFormToggleButtonGroupFieldClassKey, VireoFormToggleButtonGroupFieldOwnerState, Theme>;
+    }
+}
+export {};

package/dist/capabilities/forms/components/forms/VireoFormToggleButtonGroupField/VireoFormToggleButtonGroupField.types.js

@@ -0,0 +1 @@
+export {};

package/dist/capabilities/forms/components/forms/VireoFormToggleButtonGroupField/index.d.ts

@@ -0,0 +1,3 @@
+export * from "./VireoFormToggleButtonGroupField.js";
+export * from "./VireoFormToggleButtonGroupField.classes.js";
+export * from "./VireoFormToggleButtonGroupField.types.js";

package/dist/capabilities/forms/components/forms/VireoFormToggleButtonGroupField/index.js

@@ -0,0 +1,3 @@
+export * from "./VireoFormToggleButtonGroupField.js";
+export * from "./VireoFormToggleButtonGroupField.classes.js";
+export * from "./VireoFormToggleButtonGroupField.types.js";

package/dist/capabilities/forms/contexts/VireoFormContext/VireoFormContext.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+import type { VireoFormErrorDisplay, VireoFormErrorFormatter } from "../../../../capabilities/forms/components/forms/VireoForm/VireoForm.types.js";
+export type VireoFormContextValue = {
+    errorDisplay: VireoFormErrorDisplay;
+    formatError?: VireoFormErrorFormatter;
+    submissionAttempts: number;
+};
+export declare const VireoFormContext: React.Context<VireoFormContextValue | undefined>;
+export declare function useVireoFormContext(): VireoFormContextValue;

package/dist/capabilities/forms/contexts/VireoFormContext/VireoFormContext.js

@@ -0,0 +1,9 @@
+import React from "react";
+export const VireoFormContext = React.createContext(undefined);
+export function useVireoFormContext() {
+    const context = React.useContext(VireoFormContext);
+    if (!context) {
+        throw new Error("Vireo form field components must be rendered inside form.Form.");
+    }
+    return context;
+}

package/dist/capabilities/forms/contexts/VireoFormHookContexts/VireoFormHookContexts.d.ts

@@ -0,0 +1 @@
+export declare const vireoFieldContext: import("react").Context<import("@tanstack/form-core").AnyFieldApi>, vireoTanStackFormContext: import("react").Context<import("@tanstack/form-core").AnyFormApi>, useVireoFieldContext: <TData>() => import("@tanstack/form-core").FieldApi<any, string, TData, any, any, any, any, any, any, any, any, any, any, any, any, any, any, any, any, any, any, any, any>, useVireoTanStackFormContext: () => import("@tanstack/react-form").ReactFormExtendedApi<Record<string, never>, any, any, any, any, any, any, any, any, any, any, any>;

package/dist/capabilities/forms/contexts/VireoFormHookContexts/VireoFormHookContexts.js

@@ -0,0 +1,2 @@
+import { createFormHookContexts } from "@tanstack/react-form";
+export const { fieldContext: vireoFieldContext, formContext: vireoTanStackFormContext, useFieldContext: useVireoFieldContext, useFormContext: useVireoTanStackFormContext, } = createFormHookContexts();

package/dist/capabilities/forms/contexts/VireoMultiStepContext/VireoMultiStepContext.d.ts

@@ -0,0 +1,11 @@
+import type { VireoFormMultiStepLocaleText } from "../../../../capabilities/forms/types/vireoMultiStep.types.js";
+import type { VireoMultiStepStore } from "../../../../capabilities/forms/state/vireoMultiStepStore/vireoMultiStepStore.js";
+import React from "react";
+export type VireoMultiStepContextValue = {
+    controller: VireoMultiStepStore;
+    keepMounted: boolean;
+    localeText: VireoFormMultiStepLocaleText;
+};
+export declare const VireoMultiStepContext: React.Context<VireoMultiStepContextValue | undefined>;
+export declare function useOptionalVireoMultiStepContext(): VireoMultiStepContextValue | undefined;
+export declare function useVireoMultiStepContext(): VireoMultiStepContextValue;

package/dist/capabilities/forms/contexts/VireoMultiStepContext/VireoMultiStepContext.js

@@ -0,0 +1,11 @@
+import React from "react";
+export const VireoMultiStepContext = React.createContext(undefined);
+export function useOptionalVireoMultiStepContext() {
+    return React.useContext(VireoMultiStepContext);
+}
+export function useVireoMultiStepContext() {
+    const context = React.useContext(VireoMultiStepContext);
+    if (!context)
+        throw new Error("Vireo multi-step components must be rendered inside form.MultiStep.");
+    return context;
+}

package/dist/capabilities/forms/form-overlays/components/overlays/VireoResponsiveFormOverlay/VireoResponsiveFormOverlay.classes.d.ts

@@ -0,0 +1,9 @@
+import { type VireoResponsiveFormOverlaySlotName } from "./VireoResponsiveFormOverlay.identity.js";
+/** Utility classes available to VireoResponsiveFormOverlay. */
+export type VireoResponsiveFormOverlayClasses = Record<VireoResponsiveFormOverlaySlotName, string>;
+/** Valid keys for VireoResponsiveFormOverlay utility classes and theme style overrides. */
+export type VireoResponsiveFormOverlayClassKey = keyof VireoResponsiveFormOverlayClasses;
+/** Returns the generated utility class name for a VireoResponsiveFormOverlay slot or state. */
+export declare function getVireoResponsiveFormOverlayUtilityClass(slot: string): string;
+/** Generated utility class names keyed by each public VireoResponsiveFormOverlay class key. */
+export declare const vireoResponsiveFormOverlayClasses: VireoResponsiveFormOverlayClasses;

package/dist/capabilities/forms/form-overlays/components/overlays/VireoResponsiveFormOverlay/VireoResponsiveFormOverlay.classes.js

@@ -0,0 +1,8 @@
+import { generateUtilityClass, generateUtilityClasses } from "@mui/material";
+import { VIREO_RESPONSIVE_FORM_OVERLAY_NAME, VIREO_RESPONSIVE_FORM_OVERLAY_SLOTS, } from "./VireoResponsiveFormOverlay.identity.js";
+/** Returns the generated utility class name for a VireoResponsiveFormOverlay slot or state. */
+export function getVireoResponsiveFormOverlayUtilityClass(slot) {
+    return generateUtilityClass(VIREO_RESPONSIVE_FORM_OVERLAY_NAME, slot);
+}
+/** Generated utility class names keyed by each public VireoResponsiveFormOverlay class key. */
+export const vireoResponsiveFormOverlayClasses = generateUtilityClasses(VIREO_RESPONSIVE_FORM_OVERLAY_NAME, [...VIREO_RESPONSIVE_FORM_OVERLAY_SLOTS]);

package/dist/capabilities/forms/form-overlays/components/overlays/VireoResponsiveFormOverlay/VireoResponsiveFormOverlay.d.ts

@@ -0,0 +1,15 @@
+import React from "react";
+/** Coordinates a guarded form across mobile full-screen-dialog and desktop overlay surfaces. */
+export declare const VireoResponsiveFormOverlay: React.ForwardRefExoticComponent<import("./VireoResponsiveFormOverlay.types.js").VireoResponsiveFormOverlaySlotsAndSlotProps & {
+    title: React.ReactNode;
+    closeLabel: string;
+    closeDisabled?: boolean;
+    children: React.ReactNode;
+    actions?: import("./VireoResponsiveFormOverlay.types.js").VireoResponsiveFormOverlayActions;
+    renderForm?: (children: React.ReactNode) => React.ReactNode;
+    guardUnsavedChanges?: boolean;
+    classes?: Partial<import("./VireoResponsiveFormOverlay.classes.js").VireoResponsiveFormOverlayClasses>;
+} & Omit<import("../../../../../../index.js").VireoResponsiveOverlayFrameProps, "children" | "classes" | "onClose" | "open" | "slotProps" | "slots" | "title"> & {
+    open: boolean;
+    onClose: () => void;
+} & React.RefAttributes<HTMLDivElement>>;

package/dist/capabilities/forms/form-overlays/components/overlays/VireoResponsiveFormOverlay/VireoResponsiveFormOverlay.identity.d.ts

@@ -0,0 +1,6 @@
+/** Stable component name shared by every VireoResponsiveFormOverlay integration point. */
+export declare const VIREO_RESPONSIVE_FORM_OVERLAY_NAME = "VireoResponsiveFormOverlay";
+/** Canonical public slots exposed by VireoResponsiveFormOverlay, in rendered DOM order. */
+export declare const VIREO_RESPONSIVE_FORM_OVERLAY_SLOTS: readonly ["root", "header", "body", "content", "actions"];
+/** Public slot names exposed by VireoResponsiveFormOverlay. */
+export type VireoResponsiveFormOverlaySlotName = (typeof VIREO_RESPONSIVE_FORM_OVERLAY_SLOTS)[number];

package/dist/capabilities/forms/form-overlays/components/overlays/VireoResponsiveFormOverlay/VireoResponsiveFormOverlay.identity.js

@@ -0,0 +1,10 @@
+/** Stable component name shared by every VireoResponsiveFormOverlay integration point. */
+export const VIREO_RESPONSIVE_FORM_OVERLAY_NAME = "VireoResponsiveFormOverlay";
+/** Canonical public slots exposed by VireoResponsiveFormOverlay, in rendered DOM order. */
+export const VIREO_RESPONSIVE_FORM_OVERLAY_SLOTS = [
+    "root",
+    "header",
+    "body",
+    "content",
+    "actions",
+];

package/dist/capabilities/forms/form-overlays/components/overlays/VireoResponsiveFormOverlay/VireoResponsiveFormOverlay.js

@@ -0,0 +1,56 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useUnsavedChangesRequestDiscard, UnsavedChangesScope } from "../../../../../../capabilities/unsaved-changes/public.js";
+import { joinClassNames, mergeSx, resolveSlotProps } from "../../../../../../core/public.js";
+import { unstable_composeClasses as composeClasses } from "@mui/material";
+import { useThemeProps } from "@mui/material/styles";
+import { useForkRef } from "@mui/material/utils";
+import React from "react";
+import { getVireoResponsiveFormOverlayUtilityClass, } from "./VireoResponsiveFormOverlay.classes.js";
+import { VIREO_RESPONSIVE_FORM_OVERLAY_NAME, } from "./VireoResponsiveFormOverlay.identity.js";
+import { VireoResponsiveFormOverlayActions, VireoResponsiveFormOverlayBody, VireoResponsiveFormOverlayContent as VireoResponsiveFormOverlayContentSlot, VireoResponsiveFormOverlayFormRegions, VireoResponsiveFormOverlayHeader, VireoResponsiveFormOverlayRoot, } from "./VireoResponsiveFormOverlay.styled.js";
+function useUtilityClasses(_ownerState, classes) {
+    return composeClasses({
+        root: ["root"],
+        header: ["header"],
+        body: ["body"],
+        content: ["content"],
+        actions: ["actions"],
+    }, getVireoResponsiveFormOverlayUtilityClass, classes);
+}
+const VireoResponsiveFormOverlayContent = React.forwardRef(function VireoResponsiveFormOverlayContent(inProps, forwardedRef) {
+    const props = useThemeProps({ props: inProps, name: VIREO_RESPONSIVE_FORM_OVERLAY_NAME });
+    const { actions, children, className, classes: classesProp, closeDisabled = false, closeLabel, guardUnsavedChanges = true, onClose, open, renderForm, slotProps = {}, slots = {}, style, sx, title, ...other } = props;
+    const ownerState = {
+        open,
+        closeDisabled,
+        hasActions: actions != null,
+        hasFormWrapper: renderForm != null,
+    };
+    const classes = useUtilityClasses(ownerState, classesProp);
+    const resolvedRootSlotProps = resolveSlotProps(slotProps.root, ownerState);
+    const { className: rootSlotClassName, ref: rootSlotRef, style: rootSlotStyle, sx: rootSlotSx, ...rootSlotOther } = resolvedRootSlotProps;
+    const rootRef = useForkRef(forwardedRef, rootSlotRef);
+    const { className: headerSlotClassName, ...headerSlotOther } = resolveSlotProps(slotProps.header, ownerState);
+    const { className: bodySlotClassName, ...bodySlotOther } = resolveSlotProps(slotProps.body, ownerState);
+    const { className: contentSlotClassName, ...contentSlotOther } = resolveSlotProps(slotProps.content, ownerState);
+    const { className: actionsSlotClassName, ...actionsSlotOther } = resolveSlotProps(slotProps.actions, ownerState);
+    const guardedClose = useUnsavedChangesRequestDiscard(onClose, { disabled: closeDisabled || !guardUnsavedChanges });
+    const directClose = React.useCallback(() => {
+        if (!closeDisabled)
+            onClose();
+    }, [closeDisabled, onClose]);
+    const requestClose = guardUnsavedChanges ? guardedClose : directClose;
+    const resolvedActions = typeof actions === "function" ? actions({ requestClose }) : actions;
+    const Header = slots.header ?? VireoResponsiveFormOverlayHeader;
+    const Body = slots.body ?? VireoResponsiveFormOverlayBody;
+    const Content = slots.content ?? VireoResponsiveFormOverlayContentSlot;
+    const Actions = slots.actions ?? VireoResponsiveFormOverlayActions;
+    const bodyRegions = (_jsxs(_Fragment, { children: [_jsx(Content, { ...contentSlotOther, ownerState: ownerState, className: joinClassNames(classes.content, contentSlotClassName), children: children }), resolvedActions != null && (_jsx(Actions, { ...actionsSlotOther, ownerState: ownerState, className: joinClassNames(classes.actions, actionsSlotClassName), children: resolvedActions }))] }));
+    const formRegions = _jsx(VireoResponsiveFormOverlayFormRegions, { children: bodyRegions });
+    return (_jsxs(VireoResponsiveFormOverlayRoot, { ...other, ...rootSlotOther, as: slots.root, ref: rootRef, ownerState: ownerState, open: open, onClose: requestClose, className: joinClassNames(classes.root, className, rootSlotClassName), style: { ...style, ...rootSlotStyle }, sx: mergeSx(sx, rootSlotSx), children: [_jsx(Header, { ...headerSlotOther, ownerState: ownerState, className: joinClassNames(classes.header, headerSlotClassName), title: title, closeLabel: closeLabel, closeDisabled: closeDisabled, onClose: requestClose }), _jsx(Body, { ...bodySlotOther, ownerState: ownerState, className: joinClassNames(classes.body, bodySlotClassName), children: renderForm ? renderForm(formRegions) : bodyRegions })] }));
+});
+/** Coordinates a guarded form across mobile full-screen-dialog and desktop overlay surfaces. */
+export const VireoResponsiveFormOverlay = React.forwardRef(function VireoResponsiveFormOverlay(props, forwardedRef) {
+    return (_jsx(UnsavedChangesScope, { children: _jsx(VireoResponsiveFormOverlayContent, { ...props, ref: forwardedRef }) }));
+});
+VireoResponsiveFormOverlay.displayName = VIREO_RESPONSIVE_FORM_OVERLAY_NAME;

package/dist/capabilities/forms/form-overlays/components/overlays/VireoResponsiveFormOverlay/VireoResponsiveFormOverlay.styled.d.ts

@@ -0,0 +1,13 @@
+import { type VireoOverlayHeaderProps, type VireoResponsiveOverlayFrameProps } from "../../../../../../capabilities/overlays/public.js";
+import { type StyledSlotComponent } from "../../../../../../core/public.js";
+import { type BoxProps, type DialogActionsProps, type DialogContentProps } from "@mui/material";
+import type React from "react";
+import { type VireoResponsiveFormOverlayOwnerState } from "./VireoResponsiveFormOverlay.types.js";
+type VireoResponsiveFormOverlayStyledSlotComponent<TProps extends object> = StyledSlotComponent<TProps, VireoResponsiveFormOverlayOwnerState>;
+export declare const VireoResponsiveFormOverlayRoot: VireoResponsiveFormOverlayStyledSlotComponent<VireoResponsiveOverlayFrameProps & React.RefAttributes<HTMLDivElement>>;
+export declare const VireoResponsiveFormOverlayHeader: VireoResponsiveFormOverlayStyledSlotComponent<VireoOverlayHeaderProps & React.RefAttributes<HTMLElement>>;
+export declare const VireoResponsiveFormOverlayBody: VireoResponsiveFormOverlayStyledSlotComponent<BoxProps>;
+export declare const VireoResponsiveFormOverlayFormRegions: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<import("@mui/material").Theme> & Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import("@mui/system").BoxOwnProps<import("@mui/material").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
+export declare const VireoResponsiveFormOverlayContent: VireoResponsiveFormOverlayStyledSlotComponent<DialogContentProps>;
+export declare const VireoResponsiveFormOverlayActions: VireoResponsiveFormOverlayStyledSlotComponent<DialogActionsProps>;
+export {};