@vireocodedev/ui 0.2.0 → 0.2.1

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

@@ -0,0 +1,90 @@
+import { VireoOverlayHeader, VireoResponsiveOverlayFrame, } from "../../../../../../capabilities/overlays/public.js";
+import { Box, DialogActions, DialogContent, } from "@mui/material";
+import { styled } from "@mui/material/styles";
+import { VIREO_RESPONSIVE_FORM_OVERLAY_NAME } from "./VireoResponsiveFormOverlay.identity.js";
+export const VireoResponsiveFormOverlayRoot = styled(VireoResponsiveOverlayFrame, {
+    name: VIREO_RESPONSIVE_FORM_OVERLAY_NAME,
+    slot: "Root",
+    overridesResolver: (_props, styles) => styles.root,
+})({});
+export const VireoResponsiveFormOverlayHeader = styled(VireoOverlayHeader, {
+    name: VIREO_RESPONSIVE_FORM_OVERLAY_NAME,
+    slot: "Header",
+    overridesResolver: (_props, styles) => styles.header,
+})(({ theme }) => ({
+    backgroundColor: theme.palette.background.paper,
+    padding: theme.spacing(2),
+    [theme.breakpoints.up("sm")]: {
+        paddingInline: theme.spacing(3),
+    },
+}));
+export const VireoResponsiveFormOverlayBody = styled(Box, {
+    name: VIREO_RESPONSIVE_FORM_OVERLAY_NAME,
+    slot: "Body",
+    overridesResolver: (_props, styles) => styles.body,
+})(({ ownerState }) => ({
+    containerName: "vireo-responsive-form-overlay-body",
+    containerType: "inline-size",
+    display: "flex",
+    flex: "1 1 auto",
+    flexDirection: "column",
+    minHeight: 0,
+    minWidth: 0,
+    overflow: "hidden",
+    ...(ownerState.hasFormWrapper && {
+        "& > *": {
+            display: "flex",
+            flex: "1 1 auto",
+            flexDirection: "column",
+            gap: 0,
+            margin: 0,
+            marginInline: 0,
+            maxHeight: "100%",
+            maxWidth: "none",
+            minHeight: 0,
+            minWidth: 0,
+            overflow: "hidden",
+            width: "100%",
+        },
+    }),
+}));
+export const VireoResponsiveFormOverlayFormRegions = styled(Box)({
+    display: "flex",
+    flex: "1 1 auto",
+    flexDirection: "column",
+    gap: 0,
+    minHeight: 0,
+    minWidth: 0,
+    overflow: "hidden",
+    width: "100%",
+});
+export const VireoResponsiveFormOverlayContent = styled(DialogContent, {
+    name: VIREO_RESPONSIVE_FORM_OVERLAY_NAME,
+    slot: "Content",
+    overridesResolver: (_props, styles) => styles.content,
+})(({ theme }) => ({
+    backgroundColor: `var(--mui-palette-surface-sunken, ${theme.palette.background.default})`,
+    flex: "1 1 auto",
+    minHeight: 0,
+    minWidth: 0,
+    overflowY: "auto",
+    padding: theme.spacing(2),
+    "@container vireo-responsive-form-overlay-body (min-width: 30rem)": {
+        padding: theme.spacing(3),
+    },
+}));
+export const VireoResponsiveFormOverlayActions = styled(DialogActions, {
+    name: VIREO_RESPONSIVE_FORM_OVERLAY_NAME,
+    slot: "Actions",
+    overridesResolver: (_props, styles) => styles.actions,
+})(({ theme }) => ({
+    backgroundColor: theme.palette.background.paper,
+    borderTop: `1px solid ${theme.palette.divider}`,
+    flex: "0 0 auto",
+    justifyContent: "flex-end",
+    padding: theme.spacing(2),
+    paddingBottom: `calc(${theme.spacing(2)} + env(safe-area-inset-bottom, 0px))`,
+    "@container vireo-responsive-form-overlay-body (min-width: 30rem)": {
+        paddingInline: theme.spacing(3),
+    },
+}));

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

@@ -0,0 +1,86 @@
+import type { VireoOverlayHeader, VireoResponsiveOverlayFrame, VireoResponsiveOverlayFrameProps } from "../../../../../../capabilities/overlays/public.js";
+import type { VireoDataAttributeValue, VireoThemeComponent } from "../../../../../../core/public.js";
+import type { Box, DialogActions, DialogContent } from "@mui/material";
+import type { CreateSlotsAndSlotProps, SlotProps } from "@mui/material/utils";
+import type React from "react";
+import { type VireoResponsiveFormOverlayClasses, type VireoResponsiveFormOverlayClassKey } from "./VireoResponsiveFormOverlay.classes.js";
+import type { VIREO_RESPONSIVE_FORM_OVERLAY_NAME, VireoResponsiveFormOverlaySlotName } from "./VireoResponsiveFormOverlay.identity.js";
+export type VireoResponsiveFormOverlayOwnerState = {
+    open: boolean;
+    closeDisabled: boolean;
+    hasActions: boolean;
+    hasFormWrapper: boolean;
+};
+export interface VireoResponsiveFormOverlayRootSlotPropsOverrides {
+    [key: `data-${string}`]: VireoDataAttributeValue;
+}
+export interface VireoResponsiveFormOverlayHeaderSlotPropsOverrides {
+    [key: `data-${string}`]: VireoDataAttributeValue;
+}
+export interface VireoResponsiveFormOverlayBodySlotPropsOverrides {
+    [key: `data-${string}`]: VireoDataAttributeValue;
+}
+export interface VireoResponsiveFormOverlayContentSlotPropsOverrides {
+    [key: `data-${string}`]: VireoDataAttributeValue;
+}
+export interface VireoResponsiveFormOverlayActionsSlotPropsOverrides {
+    [key: `data-${string}`]: VireoDataAttributeValue;
+}
+/** Replaceable semantic regions exposed by {@link VireoResponsiveFormOverlay}. */
+export type VireoResponsiveFormOverlaySlots = {
+    [TSlotName in VireoResponsiveFormOverlaySlotName]: React.ElementType;
+};
+/** Slot props exposed by {@link VireoResponsiveFormOverlay}. */
+export type VireoResponsiveFormOverlaySlotsAndSlotProps = CreateSlotsAndSlotProps<VireoResponsiveFormOverlaySlots, {
+    /** @default VireoResponsiveOverlayFrame */
+    root: SlotProps<typeof VireoResponsiveOverlayFrame, VireoResponsiveFormOverlayRootSlotPropsOverrides, VireoResponsiveFormOverlayOwnerState>;
+    /** @default VireoOverlayHeader */
+    header: SlotProps<typeof VireoOverlayHeader, VireoResponsiveFormOverlayHeaderSlotPropsOverrides, VireoResponsiveFormOverlayOwnerState>;
+    /** @default Box */
+    body: SlotProps<typeof Box, VireoResponsiveFormOverlayBodySlotPropsOverrides, VireoResponsiveFormOverlayOwnerState>;
+    /** @default DialogContent */
+    content: SlotProps<typeof DialogContent, VireoResponsiveFormOverlayContentSlotPropsOverrides, VireoResponsiveFormOverlayOwnerState>;
+    /** @default DialogActions */
+    actions: SlotProps<typeof DialogActions, VireoResponsiveFormOverlayActionsSlotPropsOverrides, VireoResponsiveFormOverlayOwnerState>;
+}>;
+/** Guarded actions available to a rendered overlay action row. */
+export type VireoResponsiveFormOverlayActionContext = {
+    /** Requests closure through close disabling and the current unsaved-changes scope. */
+    requestClose: () => void;
+};
+/** Static actions or a render callback that receives the guarded close request. */
+export type VireoResponsiveFormOverlayActions = React.ReactNode | ((context: VireoResponsiveFormOverlayActionContext) => React.ReactNode);
+/** Props owned by {@link VireoResponsiveFormOverlay}. */
+export type VireoResponsiveFormOverlayOwnProps = VireoResponsiveFormOverlaySlotsAndSlotProps & {
+    /** Visible overlay heading. */
+    title: React.ReactNode;
+    /** Accessible label for the close action. */
+    closeLabel: string;
+    /** Prevents dismissal while a form operation is in progress. @default false */
+    closeDisabled?: boolean;
+    /** Form content rendered inside the responsive surface. */
+    children: React.ReactNode;
+    /** Optional persistent action row rendered after the scrolling content. */
+    actions?: VireoResponsiveFormOverlayActions;
+    /**
+     * Wraps the content and action regions in one semantic form boundary.
+     * The returned wrapper is normalized to fill the responsive overlay body.
+     */
+    renderForm?: (children: React.ReactNode) => React.ReactNode;
+    /** Whether close requests participate in the nearest unsaved-changes scope. @default true */
+    guardUnsavedChanges?: boolean;
+    /** Override or extend the utility classes applied to each slot. */
+    classes?: Partial<VireoResponsiveFormOverlayClasses>;
+};
+/** Props VireoResponsiveFormOverlay inherits from its default root after excluding component-owned props. */
+export type VireoResponsiveFormOverlayInheritedProps = Omit<VireoResponsiveOverlayFrameProps, "children" | "classes" | "onClose" | "open" | "slotProps" | "slots" | "title"> & {
+    open: boolean;
+    onClose: () => void;
+};
+/** Props accepted by {@link VireoResponsiveFormOverlay}. */
+export type VireoResponsiveFormOverlayProps = VireoResponsiveFormOverlayOwnProps & VireoResponsiveFormOverlayInheritedProps;
+declare module "@mui/material/styles" {
+    interface Components<Theme = unknown> {
+        [VIREO_RESPONSIVE_FORM_OVERLAY_NAME]?: VireoThemeComponent<VireoResponsiveFormOverlayProps, VireoResponsiveFormOverlayClassKey, VireoResponsiveFormOverlayOwnerState, Theme>;
+    }
+}

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

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

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

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

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

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

package/dist/capabilities/forms/hooks/useVireoForm/useVireoForm.d.ts

@@ -0,0 +1,60 @@
+import type { VireoFormProps } from "../../../../capabilities/forms/components/forms/VireoForm/VireoForm.types.js";
+import { VireoFormActions } from "../../../../capabilities/forms/components/forms/VireoFormActions/VireoFormActions.js";
+import { VireoFormAutocompleteField } from "../../../../capabilities/forms/components/forms/VireoFormAutocompleteField/VireoFormAutocompleteField.js";
+import { VireoFormAutocompleteMultipleField } from "../../../../capabilities/forms/components/forms/VireoFormAutocompleteMultipleField/VireoFormAutocompleteMultipleField.js";
+import { VireoFormFreeSoloAutocompleteField } from "../../../../capabilities/forms/components/forms/VireoFormFreeSoloAutocompleteField/VireoFormFreeSoloAutocompleteField.js";
+import { VireoFormFreeSoloAutocompleteMultipleField } from "../../../../capabilities/forms/components/forms/VireoFormFreeSoloAutocompleteMultipleField/VireoFormFreeSoloAutocompleteMultipleField.js";
+import { VireoFormCheckboxField } from "../../../../capabilities/forms/components/forms/VireoFormCheckboxField/VireoFormCheckboxField.js";
+import { VireoFormCounterField } from "../../../../capabilities/forms/components/forms/VireoFormCounterField/VireoFormCounterField.js";
+import { VireoFormErrorSummary } from "../../../../capabilities/forms/components/forms/VireoFormErrorSummary/VireoFormErrorSummary.js";
+import { VireoFormFileField } from "../../../../capabilities/forms/components/forms/VireoFormFileField/VireoFormFileField.js";
+import { VireoFormFileListField } from "../../../../capabilities/forms/components/forms/VireoFormFileListField/VireoFormFileListField.js";
+import { VireoFormNumberField } from "../../../../capabilities/forms/components/forms/VireoFormNumberField/VireoFormNumberField.js";
+import { VireoFormRadioGroupField } from "../../../../capabilities/forms/components/forms/VireoFormRadioGroupField/VireoFormRadioGroupField.js";
+import { VireoFormSection } from "../../../../capabilities/forms/components/forms/VireoFormSection/VireoFormSection.js";
+import { VireoFormSectionItem } from "../../../../capabilities/forms/components/forms/VireoFormSectionItem/VireoFormSectionItem.js";
+import { VireoFormSelectField } from "../../../../capabilities/forms/components/forms/VireoFormSelectField/VireoFormSelectField.js";
+import { VireoFormSelectMultipleField } from "../../../../capabilities/forms/components/forms/VireoFormSelectMultipleField/VireoFormSelectMultipleField.js";
+import { VireoFormSwitchField } from "../../../../capabilities/forms/components/forms/VireoFormSwitchField/VireoFormSwitchField.js";
+import { VireoFormSubmitButton } from "../../../../capabilities/forms/components/forms/VireoFormSubmitButton/VireoFormSubmitButton.js";
+import { VireoFormTemporalField } from "../../../../capabilities/forms/components/forms/VireoFormTemporalField/VireoFormTemporalField.js";
+import { VireoFormTextField } from "../../../../capabilities/forms/components/forms/VireoFormTextField/VireoFormTextField.js";
+import { VireoFormToggleButtonGroupField } from "../../../../capabilities/forms/components/forms/VireoFormToggleButtonGroupField/VireoFormToggleButtonGroupField.js";
+import type { AnyFormApi, AppFieldExtendedReactFormApi } from "@tanstack/react-form";
+import { type FormAsyncValidateOrFn, type FormOptions, type FormValidateOrFn } from "@tanstack/react-form";
+import React from "react";
+type VireoFormRuntimeApi = AnyFormApi & {
+    AppForm: React.ComponentType<React.PropsWithChildren>;
+};
+/** @internal Returns the TanStack runtime hidden by the consumer-facing Vireo façade. */
+export declare function getVireoFormRuntimeApi(form: object): VireoFormRuntimeApi;
+type BaseVireoFormApi<TFormData, TOnMount extends undefined | FormValidateOrFn<TFormData>, TOnChange extends undefined | FormValidateOrFn<TFormData>, TOnChangeAsync extends undefined | FormAsyncValidateOrFn<TFormData>, TOnBlur extends undefined | FormValidateOrFn<TFormData>, TOnBlurAsync extends undefined | FormAsyncValidateOrFn<TFormData>, TOnSubmit extends undefined | FormValidateOrFn<TFormData>, TOnSubmitAsync extends undefined | FormAsyncValidateOrFn<TFormData>, TOnDynamic extends undefined | FormValidateOrFn<TFormData>, TOnDynamicAsync extends undefined | FormAsyncValidateOrFn<TFormData>, TOnServer extends undefined | FormAsyncValidateOrFn<TFormData>, TSubmitMeta> = AppFieldExtendedReactFormApi<TFormData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TOnServer, TSubmitMeta, {
+    AutocompleteField: typeof VireoFormAutocompleteField;
+    AutocompleteMultipleField: typeof VireoFormAutocompleteMultipleField;
+    FreeSoloAutocompleteField: typeof VireoFormFreeSoloAutocompleteField;
+    FreeSoloAutocompleteMultipleField: typeof VireoFormFreeSoloAutocompleteMultipleField;
+    CheckboxField: typeof VireoFormCheckboxField;
+    CounterField: typeof VireoFormCounterField;
+    FileField: typeof VireoFormFileField;
+    FileListField: typeof VireoFormFileListField;
+    NumberField: typeof VireoFormNumberField;
+    RadioGroupField: typeof VireoFormRadioGroupField;
+    SelectField: typeof VireoFormSelectField;
+    SelectMultipleField: typeof VireoFormSelectMultipleField;
+    SwitchField: typeof VireoFormSwitchField;
+    TemporalField: typeof VireoFormTemporalField;
+    TextField: typeof VireoFormTextField;
+    ToggleButtonGroupField: typeof VireoFormToggleButtonGroupField;
+}, {
+    Actions: typeof VireoFormActions;
+    ErrorSummary: typeof VireoFormErrorSummary;
+    Section: typeof VireoFormSection;
+    SectionItem: typeof VireoFormSectionItem;
+    SubmitButton: typeof VireoFormSubmitButton;
+}>;
+export type VireoFormApi<TFormData, TOnMount extends undefined | FormValidateOrFn<TFormData>, TOnChange extends undefined | FormValidateOrFn<TFormData>, TOnChangeAsync extends undefined | FormAsyncValidateOrFn<TFormData>, TOnBlur extends undefined | FormValidateOrFn<TFormData>, TOnBlurAsync extends undefined | FormAsyncValidateOrFn<TFormData>, TOnSubmit extends undefined | FormValidateOrFn<TFormData>, TOnSubmitAsync extends undefined | FormAsyncValidateOrFn<TFormData>, TOnDynamic extends undefined | FormValidateOrFn<TFormData>, TOnDynamicAsync extends undefined | FormAsyncValidateOrFn<TFormData>, TOnServer extends undefined | FormAsyncValidateOrFn<TFormData>, TSubmitMeta> = Omit<BaseVireoFormApi<TFormData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TOnServer, TSubmitMeta>, "AppField" | "AppForm" | "Field"> & {
+    Field: BaseVireoFormApi<TFormData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TOnServer, TSubmitMeta>["AppField"];
+    Form: React.ForwardRefExoticComponent<VireoFormProps & React.RefAttributes<HTMLFormElement>>;
+};
+export declare function useVireoForm<TFormData, TOnMount extends undefined | FormValidateOrFn<TFormData>, TOnChange extends undefined | FormValidateOrFn<TFormData>, TOnChangeAsync extends undefined | FormAsyncValidateOrFn<TFormData>, TOnBlur extends undefined | FormValidateOrFn<TFormData>, TOnBlurAsync extends undefined | FormAsyncValidateOrFn<TFormData>, TOnSubmit extends undefined | FormValidateOrFn<TFormData>, TOnSubmitAsync extends undefined | FormAsyncValidateOrFn<TFormData>, TOnDynamic extends undefined | FormValidateOrFn<TFormData>, TOnDynamicAsync extends undefined | FormAsyncValidateOrFn<TFormData>, TOnServer extends undefined | FormAsyncValidateOrFn<TFormData>, TSubmitMeta>(options: FormOptions<TFormData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TOnServer, TSubmitMeta>): VireoFormApi<TFormData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TOnServer, TSubmitMeta>;
+export {};

package/dist/capabilities/forms/hooks/useVireoForm/useVireoForm.js

@@ -0,0 +1,107 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { VireoForm } from "../../../../capabilities/forms/components/forms/VireoForm/VireoForm.js";
+import { VireoFormActions } from "../../../../capabilities/forms/components/forms/VireoFormActions/VireoFormActions.js";
+import { VireoFormAutocompleteField } from "../../../../capabilities/forms/components/forms/VireoFormAutocompleteField/VireoFormAutocompleteField.js";
+import { VireoFormAutocompleteMultipleField } from "../../../../capabilities/forms/components/forms/VireoFormAutocompleteMultipleField/VireoFormAutocompleteMultipleField.js";
+import { VireoFormFreeSoloAutocompleteField } from "../../../../capabilities/forms/components/forms/VireoFormFreeSoloAutocompleteField/VireoFormFreeSoloAutocompleteField.js";
+import { VireoFormFreeSoloAutocompleteMultipleField } from "../../../../capabilities/forms/components/forms/VireoFormFreeSoloAutocompleteMultipleField/VireoFormFreeSoloAutocompleteMultipleField.js";
+import { VireoFormCheckboxField } from "../../../../capabilities/forms/components/forms/VireoFormCheckboxField/VireoFormCheckboxField.js";
+import { VireoFormCounterField } from "../../../../capabilities/forms/components/forms/VireoFormCounterField/VireoFormCounterField.js";
+import { VireoFormErrorSummary } from "../../../../capabilities/forms/components/forms/VireoFormErrorSummary/VireoFormErrorSummary.js";
+import { VireoFormFileField } from "../../../../capabilities/forms/components/forms/VireoFormFileField/VireoFormFileField.js";
+import { VireoFormFileListField } from "../../../../capabilities/forms/components/forms/VireoFormFileListField/VireoFormFileListField.js";
+import { VireoFormNumberField } from "../../../../capabilities/forms/components/forms/VireoFormNumberField/VireoFormNumberField.js";
+import { VireoFormRadioGroupField } from "../../../../capabilities/forms/components/forms/VireoFormRadioGroupField/VireoFormRadioGroupField.js";
+import { VireoFormSection } from "../../../../capabilities/forms/components/forms/VireoFormSection/VireoFormSection.js";
+import { VireoFormSectionItem } from "../../../../capabilities/forms/components/forms/VireoFormSectionItem/VireoFormSectionItem.js";
+import { VireoFormSelectField } from "../../../../capabilities/forms/components/forms/VireoFormSelectField/VireoFormSelectField.js";
+import { VireoFormSelectMultipleField } from "../../../../capabilities/forms/components/forms/VireoFormSelectMultipleField/VireoFormSelectMultipleField.js";
+import { VireoFormSwitchField } from "../../../../capabilities/forms/components/forms/VireoFormSwitchField/VireoFormSwitchField.js";
+import { VireoFormSubmitButton } from "../../../../capabilities/forms/components/forms/VireoFormSubmitButton/VireoFormSubmitButton.js";
+import { VireoFormTemporalField } from "../../../../capabilities/forms/components/forms/VireoFormTemporalField/VireoFormTemporalField.js";
+import { VireoFormTextField } from "../../../../capabilities/forms/components/forms/VireoFormTextField/VireoFormTextField.js";
+import { VireoFormToggleButtonGroupField } from "../../../../capabilities/forms/components/forms/VireoFormToggleButtonGroupField/VireoFormToggleButtonGroupField.js";
+import { vireoFieldContext, vireoTanStackFormContext, } from "../../../../capabilities/forms/contexts/VireoFormHookContexts/VireoFormHookContexts.js";
+import { createFormHook, } from "@tanstack/react-form";
+import React from "react";
+const { useAppForm } = createFormHook({
+    fieldComponents: {
+        AutocompleteField: VireoFormAutocompleteField,
+        AutocompleteMultipleField: VireoFormAutocompleteMultipleField,
+        FreeSoloAutocompleteField: VireoFormFreeSoloAutocompleteField,
+        FreeSoloAutocompleteMultipleField: VireoFormFreeSoloAutocompleteMultipleField,
+        CheckboxField: VireoFormCheckboxField,
+        CounterField: VireoFormCounterField,
+        FileField: VireoFormFileField,
+        FileListField: VireoFormFileListField,
+        NumberField: VireoFormNumberField,
+        RadioGroupField: VireoFormRadioGroupField,
+        SelectField: VireoFormSelectField,
+        SelectMultipleField: VireoFormSelectMultipleField,
+        SwitchField: VireoFormSwitchField,
+        TemporalField: VireoFormTemporalField,
+        TextField: VireoFormTextField,
+        ToggleButtonGroupField: VireoFormToggleButtonGroupField,
+    },
+    fieldContext: vireoFieldContext,
+    formComponents: {
+        Actions: VireoFormActions,
+        ErrorSummary: VireoFormErrorSummary,
+        Section: VireoFormSection,
+        SectionItem: VireoFormSectionItem,
+        SubmitButton: VireoFormSubmitButton,
+    },
+    formContext: vireoTanStackFormContext,
+});
+const vireoFormRuntimeApis = new WeakMap();
+/** @internal Returns the TanStack runtime hidden by the consumer-facing Vireo façade. */
+export function getVireoFormRuntimeApi(form) {
+    const runtime = vireoFormRuntimeApis.get(form);
+    if (!runtime)
+        throw new Error("The supplied form was not created by useVireoForm.");
+    return runtime;
+}
+export function useVireoForm(options) {
+    const appForm = useAppForm(options);
+    const BoundForm = React.useMemo(() => {
+        const Component = React.forwardRef((props, ref) => (_jsx(VireoForm, { ...props, ref: ref, form: appForm })));
+        Component.displayName = "VireoBoundForm";
+        return Component;
+    }, [appForm]);
+    return React.useMemo(() => {
+        const facade = new Proxy(appForm, {
+            get(target, property, receiver) {
+                if (property === "AppField" || property === "AppForm")
+                    return undefined;
+                if (property === "Field")
+                    return target.AppField;
+                if (property === "Form")
+                    return BoundForm;
+                return Reflect.get(target, property, receiver);
+            },
+            has(target, property) {
+                if (property === "AppField" || property === "AppForm")
+                    return false;
+                if (property === "Form")
+                    return true;
+                return Reflect.has(target, property);
+            },
+            ownKeys(target) {
+                return [...Reflect.ownKeys(target).filter(key => key !== "AppField" && key !== "AppForm"), "Form"];
+            },
+            getOwnPropertyDescriptor(target, property) {
+                if (property === "AppField" || property === "AppForm")
+                    return undefined;
+                if (property === "Field") {
+                    return { configurable: true, enumerable: true, value: target.AppField, writable: false };
+                }
+                if (property === "Form") {
+                    return { configurable: true, enumerable: true, value: BoundForm, writable: false };
+                }
+                return Reflect.getOwnPropertyDescriptor(target, property);
+            },
+        });
+        vireoFormRuntimeApis.set(facade, appForm);
+        return facade;
+    }, [appForm, BoundForm]);
+}

package/dist/capabilities/forms/hooks/useVireoMultiStepForm/useVireoMultiStepForm.d.ts

@@ -0,0 +1,54 @@
+import type { VireoFormProps } from "../../../../capabilities/forms/components/forms/VireoForm/VireoForm.types.js";
+import type { VireoFormMultiStepProps } from "../../../../capabilities/forms/components/forms/VireoFormMultiStep/VireoFormMultiStep.types.js";
+import type { VireoFormNextStepButtonProps } from "../../../../capabilities/forms/components/forms/VireoFormNextStepButton/VireoFormNextStepButton.types.js";
+import type { VireoFormPreviousStepButtonProps } from "../../../../capabilities/forms/components/forms/VireoFormPreviousStepButton/VireoFormPreviousStepButton.types.js";
+import type { VireoFormStepProps } from "../../../../capabilities/forms/components/forms/VireoFormStep/VireoFormStep.types.js";
+import type { VireoFormStepProgressProps } from "../../../../capabilities/forms/components/forms/VireoFormStepProgress/VireoFormStepProgress.types.js";
+import type { VireoMultiStepChangeEvent, VireoMultiStepDescriptor, VireoMultiStepNavigationResult, VireoMultiStepState, VireoMultiStepStepState } from "../../../../capabilities/forms/types/vireoMultiStep.types.js";
+import { type VireoFormApi } from "../../../../capabilities/forms/hooks/useVireoForm/useVireoForm.js";
+import type { FormAsyncValidateOrFn, FormOptions, FormValidateOrFn } from "@tanstack/react-form";
+import React from "react";
+type StepId<TSteps extends readonly {
+    id: string;
+}[]> = TSteps[number]["id"];
+export type VireoMultiStepSubscribeProps<TStepId extends string, TSelected = VireoMultiStepState<TStepId>> = {
+    selector?: (state: VireoMultiStepState<TStepId>) => TSelected;
+    children: (selected: TSelected) => React.ReactNode;
+};
+export type UseVireoMultiStepFormOptions<TFormData, TOnMount extends undefined | FormValidateOrFn<TFormData>, TOnChange extends undefined | FormValidateOrFn<TFormData>, TOnChangeAsync extends undefined | FormAsyncValidateOrFn<TFormData>, TOnBlur extends undefined | FormValidateOrFn<TFormData>, TOnBlurAsync extends undefined | FormAsyncValidateOrFn<TFormData>, TOnSubmit extends undefined | FormValidateOrFn<TFormData>, TOnSubmitAsync extends undefined | FormAsyncValidateOrFn<TFormData>, TOnDynamic extends undefined | FormValidateOrFn<TFormData>, TOnDynamicAsync extends undefined | FormAsyncValidateOrFn<TFormData>, TOnServer extends undefined | FormAsyncValidateOrFn<TFormData>, TSubmitMeta, TSteps extends readonly VireoMultiStepDescriptor<TFormData, string>[]> = FormOptions<TFormData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TOnServer, TSubmitMeta> & {
+    steps: TSteps;
+    initialStepId?: StepId<TSteps>;
+    onStepChange?: (event: VireoMultiStepChangeEvent<StepId<TSteps>>) => void;
+};
+export type VireoMultiStepFormApi<TFormData, TOnMount extends undefined | FormValidateOrFn<TFormData>, TOnChange extends undefined | FormValidateOrFn<TFormData>, TOnChangeAsync extends undefined | FormAsyncValidateOrFn<TFormData>, TOnBlur extends undefined | FormValidateOrFn<TFormData>, TOnBlurAsync extends undefined | FormAsyncValidateOrFn<TFormData>, TOnSubmit extends undefined | FormValidateOrFn<TFormData>, TOnSubmitAsync extends undefined | FormAsyncValidateOrFn<TFormData>, TOnDynamic extends undefined | FormValidateOrFn<TFormData>, TOnDynamicAsync extends undefined | FormAsyncValidateOrFn<TFormData>, TOnServer extends undefined | FormAsyncValidateOrFn<TFormData>, TSubmitMeta, TStepId extends string> = VireoFormApi<TFormData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TOnServer, TSubmitMeta> & {
+    Form: React.ForwardRefExoticComponent<VireoFormProps & React.RefAttributes<HTMLFormElement>>;
+    MultiStep: React.ForwardRefExoticComponent<VireoFormMultiStepProps & React.RefAttributes<HTMLDivElement>>;
+    Step: React.ForwardRefExoticComponent<Omit<VireoFormStepProps, "id" | "ref"> & {
+        id: TStepId;
+    } & React.RefAttributes<HTMLElement>>;
+    StepProgress: React.ForwardRefExoticComponent<VireoFormStepProgressProps & React.RefAttributes<HTMLDivElement>>;
+    PreviousStepButton: React.ForwardRefExoticComponent<VireoFormPreviousStepButtonProps & React.RefAttributes<HTMLButtonElement>>;
+    NextStepButton: React.ForwardRefExoticComponent<VireoFormNextStepButtonProps & React.RefAttributes<HTMLButtonElement>>;
+    MultiStepSubscribe: <TSelected = VireoMultiStepState<TStepId>>(props: VireoMultiStepSubscribeProps<TStepId, TSelected>) => React.ReactNode;
+    readonly multiStepState: VireoMultiStepState<TStepId>;
+    readonly steps: readonly VireoMultiStepStepState<TStepId>[];
+    readonly activeSteps: readonly VireoMultiStepStepState<TStepId>[];
+    readonly currentStep: VireoMultiStepStepState<TStepId>;
+    readonly currentStepId: TStepId;
+    readonly currentStepIndex: number;
+    readonly activeStepCount: number;
+    readonly completedStepCount: number;
+    readonly isFirstStep: boolean;
+    readonly isLastStep: boolean;
+    readonly isStepTransitioning: boolean;
+    readonly canGoPrevious: boolean;
+    readonly canGoNext: boolean;
+    readonly canSubmitCurrentStep: boolean;
+    getStepState: (id: TStepId) => VireoMultiStepStepState<TStepId> | undefined;
+    goToNextStep: () => Promise<VireoMultiStepNavigationResult<TStepId>>;
+    goToPreviousStep: () => Promise<VireoMultiStepNavigationResult<TStepId>>;
+    goToStep: (id: TStepId) => Promise<VireoMultiStepNavigationResult<TStepId>>;
+};
+/** Creates one TanStack-backed form with stable, typed multi-step navigation. */
+export declare function useVireoMultiStepForm<TFormData, TOnMount extends undefined | FormValidateOrFn<TFormData>, TOnChange extends undefined | FormValidateOrFn<TFormData>, TOnChangeAsync extends undefined | FormAsyncValidateOrFn<TFormData>, TOnBlur extends undefined | FormValidateOrFn<TFormData>, TOnBlurAsync extends undefined | FormAsyncValidateOrFn<TFormData>, TOnSubmit extends undefined | FormValidateOrFn<TFormData>, TOnSubmitAsync extends undefined | FormAsyncValidateOrFn<TFormData>, TOnDynamic extends undefined | FormValidateOrFn<TFormData>, TOnDynamicAsync extends undefined | FormAsyncValidateOrFn<TFormData>, TOnServer extends undefined | FormAsyncValidateOrFn<TFormData>, TSubmitMeta, const TSteps extends readonly VireoMultiStepDescriptor<TFormData, string>[]>(options: UseVireoMultiStepFormOptions<TFormData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TOnServer, TSubmitMeta, TSteps>): VireoMultiStepFormApi<TFormData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TOnServer, TSubmitMeta, StepId<TSteps>>;
+export {};

package/dist/capabilities/forms/hooks/useVireoMultiStepForm/useVireoMultiStepForm.js

@@ -0,0 +1,80 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { VireoForm } from "../../../../capabilities/forms/components/forms/VireoForm/VireoForm.js";
+import { VireoFormMultiStep } from "../../../../capabilities/forms/components/forms/VireoFormMultiStep/VireoFormMultiStep.js";
+import { VireoFormNextStepButton } from "../../../../capabilities/forms/components/forms/VireoFormNextStepButton/VireoFormNextStepButton.js";
+import { VireoFormPreviousStepButton } from "../../../../capabilities/forms/components/forms/VireoFormPreviousStepButton/VireoFormPreviousStepButton.js";
+import { VireoFormStep } from "../../../../capabilities/forms/components/forms/VireoFormStep/VireoFormStep.js";
+import { VireoFormStepProgress } from "../../../../capabilities/forms/components/forms/VireoFormStepProgress/VireoFormStepProgress.js";
+import { VireoMultiStepStore } from "../../../../capabilities/forms/state/vireoMultiStepStore/vireoMultiStepStore.js";
+import { getVireoFormRuntimeApi, useVireoForm, } from "../../../../capabilities/forms/hooks/useVireoForm/useVireoForm.js";
+import React from "react";
+/** Creates one TanStack-backed form with stable, typed multi-step navigation. */
+export function useVireoMultiStepForm(options) {
+    const { initialStepId, onStepChange, steps, ...formOptions } = options;
+    const form = useVireoForm(formOptions);
+    const runtimeForm = getVireoFormRuntimeApi(form);
+    const controllerRef = React.useRef(undefined);
+    if (!controllerRef.current) {
+        controllerRef.current = new VireoMultiStepStore(runtimeForm, steps, initialStepId, onStepChange);
+    }
+    const controller = controllerRef.current;
+    controller.update(steps, onStepChange);
+    React.useEffect(() => controller.mount(), [controller]);
+    const BoundForm = React.useMemo(() => {
+        const Component = React.forwardRef((props, ref) => (_jsx(VireoForm, { ...props, ref: ref, form: runtimeForm, multiStepController: controller })));
+        Component.displayName = "VireoBoundMultiStepForm";
+        return Component;
+    }, [controller, runtimeForm]);
+    const BoundMultiStep = React.useMemo(() => {
+        const RuntimeMultiStep = VireoFormMultiStep;
+        const Component = React.forwardRef((props, ref) => (_jsx(RuntimeMultiStep, { ...props, ref: ref, controller: controller })));
+        Component.displayName = "VireoBoundFormMultiStep";
+        return Component;
+    }, [controller]);
+    const MultiStepSubscribe = React.useMemo(() => function BoundMultiStepSubscribe(props) {
+        const state = React.useSyncExternalStore(controller.subscribe, controller.getSnapshot, controller.getSnapshot);
+        const selected = props.selector ? props.selector(state) : state;
+        return props.children(selected);
+    }, [controller]);
+    return React.useMemo(() => {
+        const reset = form.reset.bind(form);
+        const facade = new Proxy(form, {
+            get(target, property, receiver) {
+                const state = controller.getSnapshot();
+                if (property === "Form")
+                    return BoundForm;
+                if (property === "MultiStep")
+                    return BoundMultiStep;
+                if (property === "Step")
+                    return VireoFormStep;
+                if (property === "StepProgress")
+                    return VireoFormStepProgress;
+                if (property === "PreviousStepButton")
+                    return VireoFormPreviousStepButton;
+                if (property === "NextStepButton")
+                    return VireoFormNextStepButton;
+                if (property === "MultiStepSubscribe")
+                    return MultiStepSubscribe;
+                if (property === "multiStepState")
+                    return state;
+                if (property === "getStepState")
+                    return controller.getStepState;
+                if (property === "goToNextStep")
+                    return controller.goToNextStep.bind(controller);
+                if (property === "goToPreviousStep")
+                    return controller.goToPreviousStep.bind(controller);
+                if (property === "goToStep")
+                    return controller.goToStep.bind(controller);
+                if (property === "reset")
+                    return (...args) => {
+                        reset(...args);
+                        controller.reset();
+                    };
+                if (property in state)
+                    return state[property];
+                return Reflect.get(target, property, receiver);
+            },
+        });
+        return facade;
+    }, [BoundForm, BoundMultiStep, MultiStepSubscribe, controller, form]);
+}

package/dist/capabilities/forms/public.d.ts

@@ -0,0 +1,55 @@
+export * from "./components/forms/VireoFormActions/index.js";
+export * from "./components/forms/VireoFormErrorSummary/VireoFormErrorSummary.classes.js";
+export type * from "./components/forms/VireoFormErrorSummary/VireoFormErrorSummary.types.js";
+export * from "./components/forms/VireoFormMultiStep/VireoFormMultiStep.classes.js";
+export type * from "./components/forms/VireoFormMultiStep/VireoFormMultiStep.types.js";
+export * from "./components/forms/VireoFormNextStepButton/VireoFormNextStepButton.classes.js";
+export type * from "./components/forms/VireoFormNextStepButton/VireoFormNextStepButton.types.js";
+export * from "./components/forms/VireoFormPreviousStepButton/VireoFormPreviousStepButton.classes.js";
+export type * from "./components/forms/VireoFormPreviousStepButton/VireoFormPreviousStepButton.types.js";
+export * from "./components/forms/VireoFormStep/VireoFormStep.classes.js";
+export type * from "./components/forms/VireoFormStep/VireoFormStep.types.js";
+export * from "./components/forms/VireoFormStepProgress/VireoFormStepProgress.classes.js";
+export type * from "./components/forms/VireoFormStepProgress/VireoFormStepProgress.types.js";
+export * from "./components/forms/VireoFormAutocompleteField/VireoFormAutocompleteField.classes.js";
+export type * from "./components/forms/VireoFormAutocompleteField/VireoFormAutocompleteField.types.js";
+export * from "./components/forms/VireoFormAutocompleteMultipleField/VireoFormAutocompleteMultipleField.classes.js";
+export type * from "./components/forms/VireoFormAutocompleteMultipleField/VireoFormAutocompleteMultipleField.types.js";
+export * from "./components/forms/VireoFormFreeSoloAutocompleteField/index.js";
+export * from "./components/forms/VireoFormFreeSoloAutocompleteMultipleField/index.js";
+export * from "./components/forms/VireoFormSection/index.js";
+export * from "./components/forms/VireoFormSectionItem/index.js";
+export * from "./components/forms/VireoFormCheckboxField/VireoFormCheckboxField.classes.js";
+export type * from "./components/forms/VireoFormCheckboxField/VireoFormCheckboxField.types.js";
+export * from "./components/forms/VireoFormCounterField/VireoFormCounterField.classes.js";
+export type * from "./components/forms/VireoFormCounterField/VireoFormCounterField.types.js";
+export * from "./components/forms/VireoFormFileField/VireoFormFileField.classes.js";
+export type * from "./components/forms/VireoFormFileField/VireoFormFileField.types.js";
+export * from "./components/forms/VireoFormFileListField/VireoFormFileListField.classes.js";
+export type * from "./components/forms/VireoFormFileListField/VireoFormFileListField.types.js";
+export * from "./components/forms/VireoFormNumberField/VireoFormNumberField.classes.js";
+export type * from "./components/forms/VireoFormNumberField/VireoFormNumberField.types.js";
+export * from "./components/forms/VireoFormRadioGroupField/VireoFormRadioGroupField.classes.js";
+export type * from "./components/forms/VireoFormRadioGroupField/VireoFormRadioGroupField.types.js";
+export * from "./components/forms/VireoFormSelectField/VireoFormSelectField.classes.js";
+export type * from "./components/forms/VireoFormSelectField/VireoFormSelectField.types.js";
+export * from "./components/forms/VireoFormSelectMultipleField/VireoFormSelectMultipleField.classes.js";
+export type * from "./components/forms/VireoFormSelectMultipleField/VireoFormSelectMultipleField.types.js";
+export * from "./components/forms/VireoFormSubmitButton/VireoFormSubmitButton.classes.js";
+export type * from "./components/forms/VireoFormSubmitButton/VireoFormSubmitButton.types.js";
+export * from "./components/forms/VireoFormSwitchField/VireoFormSwitchField.classes.js";
+export type * from "./components/forms/VireoFormSwitchField/VireoFormSwitchField.types.js";
+export * from "./components/forms/VireoFormTemporalField/VireoFormTemporalField.classes.js";
+export type * from "./components/forms/VireoFormTemporalField/VireoFormTemporalField.types.js";
+export * from "./components/forms/VireoForm/VireoForm.classes.js";
+export type * from "./components/forms/VireoForm/VireoForm.types.js";
+export * from "./components/forms/VireoFormTextField/VireoFormTextField.classes.js";
+export type * from "./components/forms/VireoFormTextField/VireoFormTextField.types.js";
+export * from "./components/forms/VireoFormToggleButtonGroupField/VireoFormToggleButtonGroupField.classes.js";
+export type * from "./components/forms/VireoFormToggleButtonGroupField/VireoFormToggleButtonGroupField.types.js";
+export { useVireoForm } from "./hooks/useVireoForm/useVireoForm.js";
+export type { VireoFormApi } from "./hooks/useVireoForm/useVireoForm.js";
+export * from "./hooks/useVireoMultiStepForm/useVireoMultiStepForm.js";
+export type * from "./types/vireoMultiStep.types.js";
+export * from "./components/data-display/VireoFileImagePreview/index.js";
+export * from "./form-overlays/components/overlays/VireoResponsiveFormOverlay/index.js";

package/dist/capabilities/forms/public.js

@@ -0,0 +1,31 @@
+export * from "./components/forms/VireoFormActions/index.js";
+export * from "./components/forms/VireoFormErrorSummary/VireoFormErrorSummary.classes.js";
+export * from "./components/forms/VireoFormMultiStep/VireoFormMultiStep.classes.js";
+export * from "./components/forms/VireoFormNextStepButton/VireoFormNextStepButton.classes.js";
+export * from "./components/forms/VireoFormPreviousStepButton/VireoFormPreviousStepButton.classes.js";
+export * from "./components/forms/VireoFormStep/VireoFormStep.classes.js";
+export * from "./components/forms/VireoFormStepProgress/VireoFormStepProgress.classes.js";
+export * from "./components/forms/VireoFormAutocompleteField/VireoFormAutocompleteField.classes.js";
+export * from "./components/forms/VireoFormAutocompleteMultipleField/VireoFormAutocompleteMultipleField.classes.js";
+export * from "./components/forms/VireoFormFreeSoloAutocompleteField/index.js";
+export * from "./components/forms/VireoFormFreeSoloAutocompleteMultipleField/index.js";
+export * from "./components/forms/VireoFormSection/index.js";
+export * from "./components/forms/VireoFormSectionItem/index.js";
+export * from "./components/forms/VireoFormCheckboxField/VireoFormCheckboxField.classes.js";
+export * from "./components/forms/VireoFormCounterField/VireoFormCounterField.classes.js";
+export * from "./components/forms/VireoFormFileField/VireoFormFileField.classes.js";
+export * from "./components/forms/VireoFormFileListField/VireoFormFileListField.classes.js";
+export * from "./components/forms/VireoFormNumberField/VireoFormNumberField.classes.js";
+export * from "./components/forms/VireoFormRadioGroupField/VireoFormRadioGroupField.classes.js";
+export * from "./components/forms/VireoFormSelectField/VireoFormSelectField.classes.js";
+export * from "./components/forms/VireoFormSelectMultipleField/VireoFormSelectMultipleField.classes.js";
+export * from "./components/forms/VireoFormSubmitButton/VireoFormSubmitButton.classes.js";
+export * from "./components/forms/VireoFormSwitchField/VireoFormSwitchField.classes.js";
+export * from "./components/forms/VireoFormTemporalField/VireoFormTemporalField.classes.js";
+export * from "./components/forms/VireoForm/VireoForm.classes.js";
+export * from "./components/forms/VireoFormTextField/VireoFormTextField.classes.js";
+export * from "./components/forms/VireoFormToggleButtonGroupField/VireoFormToggleButtonGroupField.classes.js";
+export { useVireoForm } from "./hooks/useVireoForm/useVireoForm.js";
+export * from "./hooks/useVireoMultiStepForm/useVireoMultiStepForm.js";
+export * from "./components/data-display/VireoFileImagePreview/index.js";
+export * from "./form-overlays/components/overlays/VireoResponsiveFormOverlay/index.js";