@jfdevelops/react-multi-step-form 1.0.0-alpha.22 → 1.0.0-alpha.24

package/dist/field.d.cts

@@ -0,0 +1,40 @@
+import { AnyResolvedStep, Override, Updater, fields } from "@jfdevelops/multi-step-form-core";
+import { ReactNode } from "react";
+
+//#region src/field.d.ts
+declare namespace field {
+  type sharedProps<TField extends string> = {
+    /**
+     * The name of the field.
+     */
+    name: TField;
+  };
+  export type childrenProps<TResolvedStep extends AnyResolvedStep, TTargetStep extends keyof TResolvedStep, TField extends fields.getDeep<TResolvedStep, TTargetStep>, TValue extends fields.resolveDeepPath<TResolvedStep, TTargetStep, TField> = fields.resolveDeepPath<TResolvedStep, TTargetStep, TField>> = sharedProps<TField> & Override<fields.get<TResolvedStep, TTargetStep>[fields.parentOf<TField>], 'defaultValue', TValue> & {
+    /**
+     * A useful wrapper around `update` to update the specific field.
+     * @param value The new value for the field.
+     */
+    onInputChange: (value: Updater<TValue>) => void;
+    /**
+     * Resets the field's value to the original value that was
+     * defined in the config.
+     */
+    reset: () => void;
+  };
+  export type props<TResolvedStep extends AnyResolvedStep, TTargetStep extends keyof TResolvedStep, TField extends fields.getDeep<TResolvedStep, TTargetStep>> = sharedProps<TField> & {
+    children: (props: childrenProps<TResolvedStep, TTargetStep, TField>) => ReactNode;
+  };
+  export type component<TResolvedStep extends AnyResolvedStep, TTargetStep extends keyof TResolvedStep> = <TField extends fields.getDeep<TResolvedStep, TTargetStep>>(props: props<TResolvedStep, TTargetStep, TField>) => ReactNode;
+  /**
+   * Create a field.
+   * @param propsCreator
+   * @param subscribe - Optional subscription function for reactivity
+   * @param getValue - Optional function to get the current field value reactively
+   * @returns
+   */
+  export function create<TResolvedStep extends AnyResolvedStep, TTargetStep extends keyof TResolvedStep>(propsCreator: <TField extends fields.getDeep<TResolvedStep, TTargetStep>>(name: TField) => field.childrenProps<TResolvedStep, TTargetStep, TField>, subscribe?: (listener: () => void) => () => void, getValue?: <TField extends fields.getDeep<TResolvedStep, TTargetStep>>(name: TField) => fields.resolveDeepPath<TResolvedStep, TTargetStep, TField>): component<TResolvedStep, TTargetStep>;
+  export {};
+}
+//#endregion
+export { field };
+//# sourceMappingURL=field.d.cts.map

package/dist/field.d.mts

@@ -0,0 +1,40 @@
+import { AnyResolvedStep, Override, Updater, fields } from "@jfdevelops/multi-step-form-core";
+import { ReactNode } from "react";
+
+//#region src/field.d.ts
+declare namespace field {
+  type sharedProps<TField extends string> = {
+    /**
+     * The name of the field.
+     */
+    name: TField;
+  };
+  export type childrenProps<TResolvedStep extends AnyResolvedStep, TTargetStep extends keyof TResolvedStep, TField extends fields.getDeep<TResolvedStep, TTargetStep>, TValue extends fields.resolveDeepPath<TResolvedStep, TTargetStep, TField> = fields.resolveDeepPath<TResolvedStep, TTargetStep, TField>> = sharedProps<TField> & Override<fields.get<TResolvedStep, TTargetStep>[fields.parentOf<TField>], 'defaultValue', TValue> & {
+    /**
+     * A useful wrapper around `update` to update the specific field.
+     * @param value The new value for the field.
+     */
+    onInputChange: (value: Updater<TValue>) => void;
+    /**
+     * Resets the field's value to the original value that was
+     * defined in the config.
+     */
+    reset: () => void;
+  };
+  export type props<TResolvedStep extends AnyResolvedStep, TTargetStep extends keyof TResolvedStep, TField extends fields.getDeep<TResolvedStep, TTargetStep>> = sharedProps<TField> & {
+    children: (props: childrenProps<TResolvedStep, TTargetStep, TField>) => ReactNode;
+  };
+  export type component<TResolvedStep extends AnyResolvedStep, TTargetStep extends keyof TResolvedStep> = <TField extends fields.getDeep<TResolvedStep, TTargetStep>>(props: props<TResolvedStep, TTargetStep, TField>) => ReactNode;
+  /**
+   * Create a field.
+   * @param propsCreator
+   * @param subscribe - Optional subscription function for reactivity
+   * @param getValue - Optional function to get the current field value reactively
+   * @returns
+   */
+  export function create<TResolvedStep extends AnyResolvedStep, TTargetStep extends keyof TResolvedStep>(propsCreator: <TField extends fields.getDeep<TResolvedStep, TTargetStep>>(name: TField) => field.childrenProps<TResolvedStep, TTargetStep, TField>, subscribe?: (listener: () => void) => () => void, getValue?: <TField extends fields.getDeep<TResolvedStep, TTargetStep>>(name: TField) => fields.resolveDeepPath<TResolvedStep, TTargetStep, TField>): component<TResolvedStep, TTargetStep>;
+  export {};
+}
+//#endregion
+export { field };
+//# sourceMappingURL=field.d.mts.map

package/dist/field.mjs

@@ -0,0 +1,25 @@
+import { memo, useSyncExternalStore } from "react";
+
+//#region src/field.tsx
+let field;
+(function(_field) {
+	function create(propsCreator, subscribe, getValue) {
+		return memo((props) => {
+			const { children, name } = props;
+			const subscribeFn = subscribe || (() => () => {});
+			const getValueFn = getValue || (() => void 0);
+			const currentValue = useSyncExternalStore(subscribeFn, () => getValueFn(name), () => getValueFn(name));
+			let createdProps = propsCreator(name);
+			if (getValue) createdProps = {
+				...createdProps,
+				defaultValue: currentValue
+			};
+			return children(createdProps);
+		}, (prevProps, nextProps) => prevProps.name === nextProps.name);
+	}
+	_field.create = create;
+})(field || (field = {}));
+
+//#endregion
+export { field };
+//# sourceMappingURL=field.mjs.map

package/dist/field.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"field.mjs","names":[],"sources":["../src/field.tsx"],"sourcesContent":["import type {\n  AnyResolvedStep,\n  fields,\n  Override,\n  Updater,\n} from '@jfdevelops/multi-step-form-core';\nimport type { ReactNode } from 'react';\nimport { memo, useSyncExternalStore } from 'react';\n\nexport namespace field {\n  type sharedProps<TField extends string> = {\n    /**\n     * The name of the field.\n     */\n    name: TField;\n  };\n\n  export type childrenProps<\n    TResolvedStep extends AnyResolvedStep,\n    TTargetStep extends keyof TResolvedStep,\n    TField extends fields.getDeep<TResolvedStep, TTargetStep>,\n    TValue extends fields.resolveDeepPath<\n      TResolvedStep,\n      TTargetStep,\n      TField\n    > = fields.resolveDeepPath<TResolvedStep, TTargetStep, TField>\n  > = sharedProps<TField> &\n    Override<\n      fields.get<TResolvedStep, TTargetStep>[fields.parentOf<TField>],\n      'defaultValue',\n      TValue\n    > & {\n      /**\n       * A useful wrapper around `update` to update the specific field.\n       * @param value The new value for the field.\n       */\n      onInputChange: (value: Updater<TValue>) => void;\n      /**\n       * Resets the field's value to the original value that was\n       * defined in the config.\n       */\n      reset: () => void;\n    };\n  export type props<\n    TResolvedStep extends AnyResolvedStep,\n    TTargetStep extends keyof TResolvedStep,\n    TField extends fields.getDeep<TResolvedStep, TTargetStep>\n  > = sharedProps<TField> & {\n    children: (\n      props: childrenProps<TResolvedStep, TTargetStep, TField>\n    ) => ReactNode;\n  };\n  export type component<\n    TResolvedStep extends AnyResolvedStep,\n    TTargetStep extends keyof TResolvedStep\n  > = <TField extends fields.getDeep<TResolvedStep, TTargetStep>>(\n    props: props<TResolvedStep, TTargetStep, TField>\n  ) => ReactNode;\n\n  /**\n   * Create a field.\n   * @param propsCreator\n   * @param subscribe - Optional subscription function for reactivity\n   * @param getValue - Optional function to get the current field value reactively\n   * @returns\n   */\n  export function create<\n    TResolvedStep extends AnyResolvedStep,\n    TTargetStep extends keyof TResolvedStep\n  >(\n    propsCreator: <TField extends fields.getDeep<TResolvedStep, TTargetStep>>(\n      name: TField\n    ) => field.childrenProps<TResolvedStep, TTargetStep, TField>,\n    subscribe?: (listener: () => void) => () => void,\n    getValue?: <TField extends fields.getDeep<TResolvedStep, TTargetStep>>(\n      name: TField\n    ) => fields.resolveDeepPath<TResolvedStep, TTargetStep, TField>\n  ) {\n    const Field: field.component<TResolvedStep, TTargetStep> = memo(\n      (props) => {\n        const { children, name } = props;\n\n        // Always call the hook, but use no-op functions if subscribe/getValue aren't provided\n        const subscribeFn = subscribe || (() => () => {});\n        const getValueFn = getValue || (() => undefined);\n\n        // Subscribe to changes to trigger rerenders\n        const currentValue = useSyncExternalStore(\n          subscribeFn,\n          () => getValueFn(name),\n          () => getValueFn(name)\n        );\n\n        let createdProps = propsCreator(name);\n\n        // If getValue is provided, override defaultValue with the reactive value\n        if (getValue) {\n          createdProps = {\n            ...createdProps,\n            defaultValue: currentValue,\n          } as typeof createdProps;\n        }\n\n        return children(createdProps);\n      },\n      // Custom comparison: only compare the `name` prop\n      // The `children` function will always be a new reference, but that's okay\n      // because we only re-render when the field value changes (via useSyncExternalStore)\n      // or when the `name` prop changes\n      (prevProps, nextProps) => prevProps.name === nextProps.name\n    );\n\n    return Field;\n  }\n}\n"],"mappings":";;;;;CAkES,SAAS,OAId,cAGA,WACA,UAGA;AAmCA,SAlC2D,MACxD,UAAU;GACT,MAAM,EAAE,UAAU,SAAS;GAG3B,MAAM,cAAc,0BAA0B;GAC9C,MAAM,aAAa,mBAAmB;GAGtC,MAAM,eAAe,qBACnB,mBACM,WAAW,KAAK,QAChB,WAAW,KAAK,CACvB;GAED,IAAI,eAAe,aAAa,KAAK;AAGrC,OAAI,SACF,gBAAe;IACb,GAAG;IACH,cAAc;IACf;AAGH,UAAO,SAAS,aAAa;MAM9B,WAAW,cAAc,UAAU,SAAS,UAAU,KACxD"}

package/dist/form-config.cjs

@@ -0,0 +1,32 @@
+let react_jsx_runtime = require("react/jsx-runtime");
+
+//#region src/form-config.tsx
+let MultiStepFormSchemaConfig;
+(function(_MultiStepFormSchemaConfig) {
+	_MultiStepFormSchemaConfig.DEFAULT_FORM_ALIAS = "Form";
+	function isFormAvailable(target, enabledFor) {
+		if (Array.isArray(target)) {
+			if (enabledFor === "all") return true;
+			if (typeof enabledFor === "object" && !Array.isArray(enabledFor)) return Object.keys(enabledFor).some((key) => target.includes(key));
+			if (Array.isArray(enabledFor)) return enabledFor.some((key) => target.includes(key));
+		}
+		return false;
+	}
+	_MultiStepFormSchemaConfig.isFormAvailable = isFormAvailable;
+	function createDefaultForm(id) {
+		return (props) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("form", {
+			id,
+			...props
+		});
+	}
+	_MultiStepFormSchemaConfig.createDefaultForm = createDefaultForm;
+})(MultiStepFormSchemaConfig || (MultiStepFormSchemaConfig = {}));
+
+//#endregion
+Object.defineProperty(exports, 'MultiStepFormSchemaConfig', {
+  enumerable: true,
+  get: function () {
+    return MultiStepFormSchemaConfig;
+  }
+});
+//# sourceMappingURL=form-config.cjs.map

package/dist/form-config.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"form-config.cjs","names":[],"sources":["../src/form-config.tsx"],"sourcesContent":["import type {\n  Expand,\n  HelperFnChosenSteps,\n  StepNumbers,\n  ValidStepKey,\n} from '@jfdevelops/multi-step-form-core';\nimport type { ComponentPropsWithRef, JSX } from 'react';\nimport type {\n  AnyResolvedStep,\n  CreatedMultiStepFormComponent,\n} from './step-schema';\n\nexport namespace MultiStepFormSchemaConfig {\n  export const DEFAULT_FORM_ALIAS = 'Form';\n  export type defaultEnabledFor = HelperFnChosenSteps.defaultStringOption;\n  export type defaultFormAlias = typeof DEFAULT_FORM_ALIAS;\n  export type formEnabledFor<TResolvedStep extends AnyResolvedStep> =\n    HelperFnChosenSteps<TResolvedStep, StepNumbers<TResolvedStep>>;\n  type strippedResolvedSteps<T extends AnyResolvedStep> = {\n    [_ in keyof T]: Expand<Omit<T[_], 'createComponent' | 'createHelperFn'>>;\n  };\n  export type AvailableStepForForm<\n    TResolvedStep extends AnyResolvedStep,\n    TEnabledFor extends formEnabledFor<TResolvedStep>\n  > = TEnabledFor extends defaultEnabledFor\n    ? strippedResolvedSteps<TResolvedStep>\n    : TEnabledFor extends [\n        ValidStepKey<StepNumbers<TResolvedStep>>,\n        ...ValidStepKey<StepNumbers<TResolvedStep>>[]\n      ]\n    ? TEnabledFor[number] extends keyof TResolvedStep\n      ? Pick<strippedResolvedSteps<TResolvedStep>, TEnabledFor[number]>\n      : never\n    : keyof TEnabledFor extends keyof TResolvedStep\n    ? Expand<\n        Pick<\n          strippedResolvedSteps<TResolvedStep>,\n          Extract<keyof TResolvedStep, keyof TEnabledFor>\n        >\n      >\n    : never;\n  export type formCtx<TAlias extends string, TProps> = {\n    [_ in TAlias]: CreatedMultiStepFormComponent<TProps>;\n  };\n  export type renderFnData<\n    TResolvedStep extends AnyResolvedStep,\n    TEnabledFor extends formEnabledFor<TResolvedStep>\n  > = {\n    /**\n     * The id for the form, either a custom one or the default one.\n     */\n    id: string;\n    /**\n     * The chosen steps that are available.\n     */\n    steps: Expand<AvailableStepForForm<TResolvedStep, TEnabledFor>>;\n  };\n\n  /**\n   * The configuration options for the `form` option.\n   */\n  export interface FormConfig<\n    TResolvedStep extends AnyResolvedStep,\n    TAlias extends string,\n    TFormEnabledFor extends formEnabledFor<TResolvedStep>,\n    TCustomFormProps extends object\n  > {\n    /**\n     * The `id` for the form component.\n     *\n     * If there is no value provided, the default id will the **current step key**.\n     *\n     * @default `${currentStep}`\n     */\n    id?: string;\n    /**\n     * The \"name\" of the form component.\n     * @default 'Form'\n     * @example\n     * ```tsx\n     * const schema = createMultiStepFormSchema({\n     *  steps: {\n     *    step1: {\n     *      title: 'Step 1',\n     *      fields: {\n     *        firstName: {\n     *          defaultValue: ''\n     *       }\n     *     }\n     *   },\n     *   form: {\n     *    alias: 'MyCustomForm',\n     *    render() {\n     *      // return custom form component here\n     *     }\n     *   }\n     *  }\n     * })\n     *\n     * const Step1 = schema.stepSchema.step1.createComponent(\n     *  ({ ctx, MyCustomForm }, props: { children: ReactNode }) =>\n     *     // Notice how the form is available with its alias\n     *     <MyCustomFormName>{children}</MyCustomFormName>\n     *  )\n     * ```\n     */\n    alias?: TAlias;\n    /**\n     * If the form component should be accessible for each step when calling `createComponent`.\n     *\n     * If no value is given, the form will be accessible for all the steps.\n     */\n    enabledForSteps?: TFormEnabledFor;\n    /**\n     *\n     * @param data The data that is available for creating the custom form.\n     * @param props Props that can be used for the custom form.\n     * @returns An {@see JSX.Element} that is the custom form.\n     * @example\n     * ### With custom props\n     * ```tsx\n     * type CustomProps = {\n     *   title: string;\n     *   description?: string;\n     *   children: ReactNode;\n     * };\n     *\n     * const schema = createMultiStepFormSchema({\n     *  steps: {\n     *    step1: {\n     *      title: 'Step 1',\n     *      fields: {\n     *        firstName: {\n     *          defaultValue: ''\n     *       }\n     *     }\n     *   },\n     *   form: {\n     *    alias: 'MyCustomForm',\n     *    render(data, props: CustomProps) {\n     *      return (\n     *         <div>\n     *          <h1>{props.title}</h1>\n     *          <p>{props.description}</p>\n     *          <form>{props.children}</form>\n     *         </div>\n     *       );\n     *     }\n     *   }\n     *  }\n     * })\n     * ```\n     * ### Without custom props\n     * ```tsx\n     * const schema = createMultiStepFormSchema({\n     *  steps: {\n     *    step1: {\n     *      title: 'Step 1',\n     *      fields: {\n     *        firstName: {\n     *          defaultValue: ''\n     *       }\n     *     }\n     *   },\n     *   form: {\n     *    alias: 'MyCustomForm',\n     *    render(data, props) {\n     *      // The default type for `props` will be `ComponentPropsWithRef<'form'>`\n     *      // return custom form component here\n     *     }\n     *   }\n     *  }\n     * })\n     * ```\n     */\n    render: (\n      data: renderFnData<TResolvedStep, TFormEnabledFor>,\n      props: TCustomFormProps\n    ) => JSX.Element;\n  }\n\n  export interface Form<\n    TResolvedStep extends AnyResolvedStep,\n    TAlias extends string,\n    TFormEnabledFor extends formEnabledFor<TResolvedStep>,\n    TCustomFormProps extends object\n  > {\n    form?: FormConfig<TResolvedStep, TAlias, TFormEnabledFor, TCustomFormProps>;\n  }\n\n  /**\n   * Compares {@linkcode enabledFor} to the {@linkcode target} to determine if the form\n   * should be available.\n   * @param target The target steps the form _should_ be available for.\n   * @param enabledFor The steps that the form _is_ enabled for.\n   * @returns A boolean representing if the form should be available.\n   */\n  // Note: the implementation is specific to `MultiStepFormStepSchema.createComponentForStep`\n  // because the `target` will always be an `Array` in `MultiStepFormStepSchema.createComponentForStep`.\n  // TODO add validation to keys\n  export function isFormAvailable<\n    TResolvedStep extends AnyResolvedStep,\n    TTarget extends HelperFnChosenSteps<\n      TResolvedStep,\n      StepNumbers<TResolvedStep>\n    >,\n    TEnabledFor extends formEnabledFor<TResolvedStep>\n  >(target: TTarget, enabledFor: TEnabledFor) {\n    if (Array.isArray(target)) {\n      if (enabledFor === 'all') {\n        return true;\n      }\n\n      if (typeof enabledFor === 'object' && !Array.isArray(enabledFor)) {\n        return Object.keys(enabledFor).some((key) =>\n          target.includes(key as `step${StepNumbers<TResolvedStep>}`)\n        );\n      }\n\n      if (Array.isArray(enabledFor)) {\n        return enabledFor.some((key) => target.includes(key));\n      }\n    }\n\n    return false;\n  }\n\n  /**\n   * Creates a form component with a default id.\n   * @param id The default id for the form.\n   * @returns A form component with a default {@linkcode id}.\n   */\n  export function createDefaultForm(id: string) {\n    return (props: Omit<ComponentPropsWithRef<'form'>, 'id'>) => (\n      <form id={id} {...props} />\n    );\n  }\n}\n"],"mappings":";;;;;iDAaoC;CA2L3B,SAAS,gBAOd,QAAiB,YAAyB;AAC1C,MAAI,MAAM,QAAQ,OAAO,EAAE;AACzB,OAAI,eAAe,MACjB,QAAO;AAGT,OAAI,OAAO,eAAe,YAAY,CAAC,MAAM,QAAQ,WAAW,CAC9D,QAAO,OAAO,KAAK,WAAW,CAAC,MAAM,QACnC,OAAO,SAAS,IAA2C,CAC5D;AAGH,OAAI,MAAM,QAAQ,WAAW,CAC3B,QAAO,WAAW,MAAM,QAAQ,OAAO,SAAS,IAAI,CAAC;;AAIzD,SAAO;;;CAQF,SAAS,kBAAkB,IAAY;AAC5C,UAAQ,UACN,2CAAC;GAAS;GAAI,GAAI;IAAS"}

package/dist/form-config.d.cts

@@ -0,0 +1,160 @@
+import { AnyResolvedStep as AnyResolvedStep$1, CreatedMultiStepFormComponent } from "./step-schema.cjs";
+import { Expand, HelperFnChosenSteps, StepNumbers, ValidStepKey } from "@jfdevelops/multi-step-form-core";
+import { ComponentPropsWithRef, JSX } from "react";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/form-config.d.ts
+declare namespace MultiStepFormSchemaConfig {
+  export const DEFAULT_FORM_ALIAS = "Form";
+  export type defaultEnabledFor = HelperFnChosenSteps.defaultStringOption;
+  export type defaultFormAlias = typeof DEFAULT_FORM_ALIAS;
+  export type formEnabledFor<TResolvedStep extends AnyResolvedStep$1> = HelperFnChosenSteps<TResolvedStep, StepNumbers<TResolvedStep>>;
+  type strippedResolvedSteps<T extends AnyResolvedStep$1> = { [_ in keyof T]: Expand<Omit<T[_], 'createComponent' | 'createHelperFn'>> };
+  export type AvailableStepForForm<TResolvedStep extends AnyResolvedStep$1, TEnabledFor extends formEnabledFor<TResolvedStep>> = TEnabledFor extends defaultEnabledFor ? strippedResolvedSteps<TResolvedStep> : TEnabledFor extends [ValidStepKey<StepNumbers<TResolvedStep>>, ...ValidStepKey<StepNumbers<TResolvedStep>>[]] ? TEnabledFor[number] extends keyof TResolvedStep ? Pick<strippedResolvedSteps<TResolvedStep>, TEnabledFor[number]> : never : keyof TEnabledFor extends keyof TResolvedStep ? Expand<Pick<strippedResolvedSteps<TResolvedStep>, Extract<keyof TResolvedStep, keyof TEnabledFor>>> : never;
+  export type formCtx<TAlias extends string, TProps> = { [_ in TAlias]: CreatedMultiStepFormComponent<TProps> };
+  export type renderFnData<TResolvedStep extends AnyResolvedStep$1, TEnabledFor extends formEnabledFor<TResolvedStep>> = {
+    /**
+     * The id for the form, either a custom one or the default one.
+     */
+    id: string;
+    /**
+     * The chosen steps that are available.
+     */
+    steps: Expand<AvailableStepForForm<TResolvedStep, TEnabledFor>>;
+  };
+  /**
+   * The configuration options for the `form` option.
+   */
+  export interface FormConfig<TResolvedStep extends AnyResolvedStep$1, TAlias extends string, TFormEnabledFor extends formEnabledFor<TResolvedStep>, TCustomFormProps extends object> {
+    /**
+     * The `id` for the form component.
+     *
+     * If there is no value provided, the default id will the **current step key**.
+     *
+     * @default `${currentStep}`
+     */
+    id?: string;
+    /**
+     * The "name" of the form component.
+     * @default 'Form'
+     * @example
+     * ```tsx
+     * const schema = createMultiStepFormSchema({
+     *  steps: {
+     *    step1: {
+     *      title: 'Step 1',
+     *      fields: {
+     *        firstName: {
+     *          defaultValue: ''
+     *       }
+     *     }
+     *   },
+     *   form: {
+     *    alias: 'MyCustomForm',
+     *    render() {
+     *      // return custom form component here
+     *     }
+     *   }
+     *  }
+     * })
+     *
+     * const Step1 = schema.stepSchema.step1.createComponent(
+     *  ({ ctx, MyCustomForm }, props: { children: ReactNode }) =>
+     *     // Notice how the form is available with its alias
+     *     <MyCustomFormName>{children}</MyCustomFormName>
+     *  )
+     * ```
+     */
+    alias?: TAlias;
+    /**
+     * If the form component should be accessible for each step when calling `createComponent`.
+     *
+     * If no value is given, the form will be accessible for all the steps.
+     */
+    enabledForSteps?: TFormEnabledFor;
+    /**
+     *
+     * @param data The data that is available for creating the custom form.
+     * @param props Props that can be used for the custom form.
+     * @returns An {@see JSX.Element} that is the custom form.
+     * @example
+     * ### With custom props
+     * ```tsx
+     * type CustomProps = {
+     *   title: string;
+     *   description?: string;
+     *   children: ReactNode;
+     * };
+     *
+     * const schema = createMultiStepFormSchema({
+     *  steps: {
+     *    step1: {
+     *      title: 'Step 1',
+     *      fields: {
+     *        firstName: {
+     *          defaultValue: ''
+     *       }
+     *     }
+     *   },
+     *   form: {
+     *    alias: 'MyCustomForm',
+     *    render(data, props: CustomProps) {
+     *      return (
+     *         <div>
+     *          <h1>{props.title}</h1>
+     *          <p>{props.description}</p>
+     *          <form>{props.children}</form>
+     *         </div>
+     *       );
+     *     }
+     *   }
+     *  }
+     * })
+     * ```
+     * ### Without custom props
+     * ```tsx
+     * const schema = createMultiStepFormSchema({
+     *  steps: {
+     *    step1: {
+     *      title: 'Step 1',
+     *      fields: {
+     *        firstName: {
+     *          defaultValue: ''
+     *       }
+     *     }
+     *   },
+     *   form: {
+     *    alias: 'MyCustomForm',
+     *    render(data, props) {
+     *      // The default type for `props` will be `ComponentPropsWithRef<'form'>`
+     *      // return custom form component here
+     *     }
+     *   }
+     *  }
+     * })
+     * ```
+     */
+    render: (data: renderFnData<TResolvedStep, TFormEnabledFor>, props: TCustomFormProps) => JSX.Element;
+  }
+  export interface Form<TResolvedStep extends AnyResolvedStep$1, TAlias extends string, TFormEnabledFor extends formEnabledFor<TResolvedStep>, TCustomFormProps extends object> {
+    form?: FormConfig<TResolvedStep, TAlias, TFormEnabledFor, TCustomFormProps>;
+  }
+  /**
+   * Compares {@linkcode enabledFor} to the {@linkcode target} to determine if the form
+   * should be available.
+   * @param target The target steps the form _should_ be available for.
+   * @param enabledFor The steps that the form _is_ enabled for.
+   * @returns A boolean representing if the form should be available.
+   */
+  export function isFormAvailable<TResolvedStep extends AnyResolvedStep$1, TTarget extends HelperFnChosenSteps<TResolvedStep, StepNumbers<TResolvedStep>>, TEnabledFor extends formEnabledFor<TResolvedStep>>(target: TTarget, enabledFor: TEnabledFor): boolean;
+  /**
+   * Creates a form component with a default id.
+   * @param id The default id for the form.
+   * @returns A form component with a default {@linkcode id}.
+   */
+  export function createDefaultForm(id: string): (props: Omit<ComponentPropsWithRef<"form">, "id">) => react_jsx_runtime0.JSX.Element;
+  export {};
+}
+//#endregion
+export { MultiStepFormSchemaConfig };
+//# sourceMappingURL=form-config.d.cts.map

package/dist/form-config.d.mts

@@ -0,0 +1,160 @@
+import { AnyResolvedStep as AnyResolvedStep$1, CreatedMultiStepFormComponent } from "./step-schema.mjs";
+import { Expand, HelperFnChosenSteps, StepNumbers, ValidStepKey } from "@jfdevelops/multi-step-form-core";
+import { ComponentPropsWithRef, JSX } from "react";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/form-config.d.ts
+declare namespace MultiStepFormSchemaConfig {
+  export const DEFAULT_FORM_ALIAS = "Form";
+  export type defaultEnabledFor = HelperFnChosenSteps.defaultStringOption;
+  export type defaultFormAlias = typeof DEFAULT_FORM_ALIAS;
+  export type formEnabledFor<TResolvedStep extends AnyResolvedStep$1> = HelperFnChosenSteps<TResolvedStep, StepNumbers<TResolvedStep>>;
+  type strippedResolvedSteps<T extends AnyResolvedStep$1> = { [_ in keyof T]: Expand<Omit<T[_], 'createComponent' | 'createHelperFn'>> };
+  export type AvailableStepForForm<TResolvedStep extends AnyResolvedStep$1, TEnabledFor extends formEnabledFor<TResolvedStep>> = TEnabledFor extends defaultEnabledFor ? strippedResolvedSteps<TResolvedStep> : TEnabledFor extends [ValidStepKey<StepNumbers<TResolvedStep>>, ...ValidStepKey<StepNumbers<TResolvedStep>>[]] ? TEnabledFor[number] extends keyof TResolvedStep ? Pick<strippedResolvedSteps<TResolvedStep>, TEnabledFor[number]> : never : keyof TEnabledFor extends keyof TResolvedStep ? Expand<Pick<strippedResolvedSteps<TResolvedStep>, Extract<keyof TResolvedStep, keyof TEnabledFor>>> : never;
+  export type formCtx<TAlias extends string, TProps> = { [_ in TAlias]: CreatedMultiStepFormComponent<TProps> };
+  export type renderFnData<TResolvedStep extends AnyResolvedStep$1, TEnabledFor extends formEnabledFor<TResolvedStep>> = {
+    /**
+     * The id for the form, either a custom one or the default one.
+     */
+    id: string;
+    /**
+     * The chosen steps that are available.
+     */
+    steps: Expand<AvailableStepForForm<TResolvedStep, TEnabledFor>>;
+  };
+  /**
+   * The configuration options for the `form` option.
+   */
+  export interface FormConfig<TResolvedStep extends AnyResolvedStep$1, TAlias extends string, TFormEnabledFor extends formEnabledFor<TResolvedStep>, TCustomFormProps extends object> {
+    /**
+     * The `id` for the form component.
+     *
+     * If there is no value provided, the default id will the **current step key**.
+     *
+     * @default `${currentStep}`
+     */
+    id?: string;
+    /**
+     * The "name" of the form component.
+     * @default 'Form'
+     * @example
+     * ```tsx
+     * const schema = createMultiStepFormSchema({
+     *  steps: {
+     *    step1: {
+     *      title: 'Step 1',
+     *      fields: {
+     *        firstName: {
+     *          defaultValue: ''
+     *       }
+     *     }
+     *   },
+     *   form: {
+     *    alias: 'MyCustomForm',
+     *    render() {
+     *      // return custom form component here
+     *     }
+     *   }
+     *  }
+     * })
+     *
+     * const Step1 = schema.stepSchema.step1.createComponent(
+     *  ({ ctx, MyCustomForm }, props: { children: ReactNode }) =>
+     *     // Notice how the form is available with its alias
+     *     <MyCustomFormName>{children}</MyCustomFormName>
+     *  )
+     * ```
+     */
+    alias?: TAlias;
+    /**
+     * If the form component should be accessible for each step when calling `createComponent`.
+     *
+     * If no value is given, the form will be accessible for all the steps.
+     */
+    enabledForSteps?: TFormEnabledFor;
+    /**
+     *
+     * @param data The data that is available for creating the custom form.
+     * @param props Props that can be used for the custom form.
+     * @returns An {@see JSX.Element} that is the custom form.
+     * @example
+     * ### With custom props
+     * ```tsx
+     * type CustomProps = {
+     *   title: string;
+     *   description?: string;
+     *   children: ReactNode;
+     * };
+     *
+     * const schema = createMultiStepFormSchema({
+     *  steps: {
+     *    step1: {
+     *      title: 'Step 1',
+     *      fields: {
+     *        firstName: {
+     *          defaultValue: ''
+     *       }
+     *     }
+     *   },
+     *   form: {
+     *    alias: 'MyCustomForm',
+     *    render(data, props: CustomProps) {
+     *      return (
+     *         <div>
+     *          <h1>{props.title}</h1>
+     *          <p>{props.description}</p>
+     *          <form>{props.children}</form>
+     *         </div>
+     *       );
+     *     }
+     *   }
+     *  }
+     * })
+     * ```
+     * ### Without custom props
+     * ```tsx
+     * const schema = createMultiStepFormSchema({
+     *  steps: {
+     *    step1: {
+     *      title: 'Step 1',
+     *      fields: {
+     *        firstName: {
+     *          defaultValue: ''
+     *       }
+     *     }
+     *   },
+     *   form: {
+     *    alias: 'MyCustomForm',
+     *    render(data, props) {
+     *      // The default type for `props` will be `ComponentPropsWithRef<'form'>`
+     *      // return custom form component here
+     *     }
+     *   }
+     *  }
+     * })
+     * ```
+     */
+    render: (data: renderFnData<TResolvedStep, TFormEnabledFor>, props: TCustomFormProps) => JSX.Element;
+  }
+  export interface Form<TResolvedStep extends AnyResolvedStep$1, TAlias extends string, TFormEnabledFor extends formEnabledFor<TResolvedStep>, TCustomFormProps extends object> {
+    form?: FormConfig<TResolvedStep, TAlias, TFormEnabledFor, TCustomFormProps>;
+  }
+  /**
+   * Compares {@linkcode enabledFor} to the {@linkcode target} to determine if the form
+   * should be available.
+   * @param target The target steps the form _should_ be available for.
+   * @param enabledFor The steps that the form _is_ enabled for.
+   * @returns A boolean representing if the form should be available.
+   */
+  export function isFormAvailable<TResolvedStep extends AnyResolvedStep$1, TTarget extends HelperFnChosenSteps<TResolvedStep, StepNumbers<TResolvedStep>>, TEnabledFor extends formEnabledFor<TResolvedStep>>(target: TTarget, enabledFor: TEnabledFor): boolean;
+  /**
+   * Creates a form component with a default id.
+   * @param id The default id for the form.
+   * @returns A form component with a default {@linkcode id}.
+   */
+  export function createDefaultForm(id: string): (props: Omit<ComponentPropsWithRef<"form">, "id">) => react_jsx_runtime0.JSX.Element;
+  export {};
+}
+//#endregion
+export { MultiStepFormSchemaConfig };
+//# sourceMappingURL=form-config.d.mts.map

package/dist/form-config.mjs

@@ -0,0 +1,27 @@
+import { jsx } from "react/jsx-runtime";
+
+//#region src/form-config.tsx
+let MultiStepFormSchemaConfig;
+(function(_MultiStepFormSchemaConfig) {
+	_MultiStepFormSchemaConfig.DEFAULT_FORM_ALIAS = "Form";
+	function isFormAvailable(target, enabledFor) {
+		if (Array.isArray(target)) {
+			if (enabledFor === "all") return true;
+			if (typeof enabledFor === "object" && !Array.isArray(enabledFor)) return Object.keys(enabledFor).some((key) => target.includes(key));
+			if (Array.isArray(enabledFor)) return enabledFor.some((key) => target.includes(key));
+		}
+		return false;
+	}
+	_MultiStepFormSchemaConfig.isFormAvailable = isFormAvailable;
+	function createDefaultForm(id) {
+		return (props) => /* @__PURE__ */ jsx("form", {
+			id,
+			...props
+		});
+	}
+	_MultiStepFormSchemaConfig.createDefaultForm = createDefaultForm;
+})(MultiStepFormSchemaConfig || (MultiStepFormSchemaConfig = {}));
+
+//#endregion
+export { MultiStepFormSchemaConfig };
+//# sourceMappingURL=form-config.mjs.map

package/dist/form-config.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"form-config.mjs","names":[],"sources":["../src/form-config.tsx"],"sourcesContent":["import type {\n  Expand,\n  HelperFnChosenSteps,\n  StepNumbers,\n  ValidStepKey,\n} from '@jfdevelops/multi-step-form-core';\nimport type { ComponentPropsWithRef, JSX } from 'react';\nimport type {\n  AnyResolvedStep,\n  CreatedMultiStepFormComponent,\n} from './step-schema';\n\nexport namespace MultiStepFormSchemaConfig {\n  export const DEFAULT_FORM_ALIAS = 'Form';\n  export type defaultEnabledFor = HelperFnChosenSteps.defaultStringOption;\n  export type defaultFormAlias = typeof DEFAULT_FORM_ALIAS;\n  export type formEnabledFor<TResolvedStep extends AnyResolvedStep> =\n    HelperFnChosenSteps<TResolvedStep, StepNumbers<TResolvedStep>>;\n  type strippedResolvedSteps<T extends AnyResolvedStep> = {\n    [_ in keyof T]: Expand<Omit<T[_], 'createComponent' | 'createHelperFn'>>;\n  };\n  export type AvailableStepForForm<\n    TResolvedStep extends AnyResolvedStep,\n    TEnabledFor extends formEnabledFor<TResolvedStep>\n  > = TEnabledFor extends defaultEnabledFor\n    ? strippedResolvedSteps<TResolvedStep>\n    : TEnabledFor extends [\n        ValidStepKey<StepNumbers<TResolvedStep>>,\n        ...ValidStepKey<StepNumbers<TResolvedStep>>[]\n      ]\n    ? TEnabledFor[number] extends keyof TResolvedStep\n      ? Pick<strippedResolvedSteps<TResolvedStep>, TEnabledFor[number]>\n      : never\n    : keyof TEnabledFor extends keyof TResolvedStep\n    ? Expand<\n        Pick<\n          strippedResolvedSteps<TResolvedStep>,\n          Extract<keyof TResolvedStep, keyof TEnabledFor>\n        >\n      >\n    : never;\n  export type formCtx<TAlias extends string, TProps> = {\n    [_ in TAlias]: CreatedMultiStepFormComponent<TProps>;\n  };\n  export type renderFnData<\n    TResolvedStep extends AnyResolvedStep,\n    TEnabledFor extends formEnabledFor<TResolvedStep>\n  > = {\n    /**\n     * The id for the form, either a custom one or the default one.\n     */\n    id: string;\n    /**\n     * The chosen steps that are available.\n     */\n    steps: Expand<AvailableStepForForm<TResolvedStep, TEnabledFor>>;\n  };\n\n  /**\n   * The configuration options for the `form` option.\n   */\n  export interface FormConfig<\n    TResolvedStep extends AnyResolvedStep,\n    TAlias extends string,\n    TFormEnabledFor extends formEnabledFor<TResolvedStep>,\n    TCustomFormProps extends object\n  > {\n    /**\n     * The `id` for the form component.\n     *\n     * If there is no value provided, the default id will the **current step key**.\n     *\n     * @default `${currentStep}`\n     */\n    id?: string;\n    /**\n     * The \"name\" of the form component.\n     * @default 'Form'\n     * @example\n     * ```tsx\n     * const schema = createMultiStepFormSchema({\n     *  steps: {\n     *    step1: {\n     *      title: 'Step 1',\n     *      fields: {\n     *        firstName: {\n     *          defaultValue: ''\n     *       }\n     *     }\n     *   },\n     *   form: {\n     *    alias: 'MyCustomForm',\n     *    render() {\n     *      // return custom form component here\n     *     }\n     *   }\n     *  }\n     * })\n     *\n     * const Step1 = schema.stepSchema.step1.createComponent(\n     *  ({ ctx, MyCustomForm }, props: { children: ReactNode }) =>\n     *     // Notice how the form is available with its alias\n     *     <MyCustomFormName>{children}</MyCustomFormName>\n     *  )\n     * ```\n     */\n    alias?: TAlias;\n    /**\n     * If the form component should be accessible for each step when calling `createComponent`.\n     *\n     * If no value is given, the form will be accessible for all the steps.\n     */\n    enabledForSteps?: TFormEnabledFor;\n    /**\n     *\n     * @param data The data that is available for creating the custom form.\n     * @param props Props that can be used for the custom form.\n     * @returns An {@see JSX.Element} that is the custom form.\n     * @example\n     * ### With custom props\n     * ```tsx\n     * type CustomProps = {\n     *   title: string;\n     *   description?: string;\n     *   children: ReactNode;\n     * };\n     *\n     * const schema = createMultiStepFormSchema({\n     *  steps: {\n     *    step1: {\n     *      title: 'Step 1',\n     *      fields: {\n     *        firstName: {\n     *          defaultValue: ''\n     *       }\n     *     }\n     *   },\n     *   form: {\n     *    alias: 'MyCustomForm',\n     *    render(data, props: CustomProps) {\n     *      return (\n     *         <div>\n     *          <h1>{props.title}</h1>\n     *          <p>{props.description}</p>\n     *          <form>{props.children}</form>\n     *         </div>\n     *       );\n     *     }\n     *   }\n     *  }\n     * })\n     * ```\n     * ### Without custom props\n     * ```tsx\n     * const schema = createMultiStepFormSchema({\n     *  steps: {\n     *    step1: {\n     *      title: 'Step 1',\n     *      fields: {\n     *        firstName: {\n     *          defaultValue: ''\n     *       }\n     *     }\n     *   },\n     *   form: {\n     *    alias: 'MyCustomForm',\n     *    render(data, props) {\n     *      // The default type for `props` will be `ComponentPropsWithRef<'form'>`\n     *      // return custom form component here\n     *     }\n     *   }\n     *  }\n     * })\n     * ```\n     */\n    render: (\n      data: renderFnData<TResolvedStep, TFormEnabledFor>,\n      props: TCustomFormProps\n    ) => JSX.Element;\n  }\n\n  export interface Form<\n    TResolvedStep extends AnyResolvedStep,\n    TAlias extends string,\n    TFormEnabledFor extends formEnabledFor<TResolvedStep>,\n    TCustomFormProps extends object\n  > {\n    form?: FormConfig<TResolvedStep, TAlias, TFormEnabledFor, TCustomFormProps>;\n  }\n\n  /**\n   * Compares {@linkcode enabledFor} to the {@linkcode target} to determine if the form\n   * should be available.\n   * @param target The target steps the form _should_ be available for.\n   * @param enabledFor The steps that the form _is_ enabled for.\n   * @returns A boolean representing if the form should be available.\n   */\n  // Note: the implementation is specific to `MultiStepFormStepSchema.createComponentForStep`\n  // because the `target` will always be an `Array` in `MultiStepFormStepSchema.createComponentForStep`.\n  // TODO add validation to keys\n  export function isFormAvailable<\n    TResolvedStep extends AnyResolvedStep,\n    TTarget extends HelperFnChosenSteps<\n      TResolvedStep,\n      StepNumbers<TResolvedStep>\n    >,\n    TEnabledFor extends formEnabledFor<TResolvedStep>\n  >(target: TTarget, enabledFor: TEnabledFor) {\n    if (Array.isArray(target)) {\n      if (enabledFor === 'all') {\n        return true;\n      }\n\n      if (typeof enabledFor === 'object' && !Array.isArray(enabledFor)) {\n        return Object.keys(enabledFor).some((key) =>\n          target.includes(key as `step${StepNumbers<TResolvedStep>}`)\n        );\n      }\n\n      if (Array.isArray(enabledFor)) {\n        return enabledFor.some((key) => target.includes(key));\n      }\n    }\n\n    return false;\n  }\n\n  /**\n   * Creates a form component with a default id.\n   * @param id The default id for the form.\n   * @returns A form component with a default {@linkcode id}.\n   */\n  export function createDefaultForm(id: string) {\n    return (props: Omit<ComponentPropsWithRef<'form'>, 'id'>) => (\n      <form id={id} {...props} />\n    );\n  }\n}\n"],"mappings":";;;;;iDAaoC;CA2L3B,SAAS,gBAOd,QAAiB,YAAyB;AAC1C,MAAI,MAAM,QAAQ,OAAO,EAAE;AACzB,OAAI,eAAe,MACjB,QAAO;AAGT,OAAI,OAAO,eAAe,YAAY,CAAC,MAAM,QAAQ,WAAW,CAC9D,QAAO,OAAO,KAAK,WAAW,CAAC,MAAM,QACnC,OAAO,SAAS,IAA2C,CAC5D;AAGH,OAAI,MAAM,QAAQ,WAAW,CAC3B,QAAO,WAAW,MAAM,QAAQ,OAAO,SAAS,IAAI,CAAC;;AAIzD,SAAO;;;CAQF,SAAS,kBAAkB,IAAY;AAC5C,UAAQ,UACN,oBAAC;GAAS;GAAI,GAAI;IAAS"}

package/dist/hooks/use-multi-step-form-data.cjs

@@ -0,0 +1,41 @@
+let __jfdevelops_multi_step_form_core = require("@jfdevelops/multi-step-form-core");
+let use_sync_external_store_shim_with_selector = require("use-sync-external-store/shim/with-selector");
+
+//#region src/hooks/use-multi-step-form-data.ts
+function throwIfInvalidStepNumber(schema, targetStep) {
+	(0, __jfdevelops_multi_step_form_core.invariant)(typeof targetStep === "string", `The target step must be a string, was ${typeof targetStep}`);
+	const { as, isValidStepNumber } = schema.stepSchema.steps;
+	const formattedStepNumbersList = new Intl.ListFormat("en", {
+		type: "disjunction",
+		style: "long"
+	}).format(as("array.string.untyped"));
+	(0, __jfdevelops_multi_step_form_core.invariant)(__jfdevelops_multi_step_form_core.VALIDATED_STEP_REGEX.test(targetStep), `The target step must match the following format: "step{number}". Available steps are ${formattedStepNumbersList}`);
+	const stepNumber = Number.parseInt(targetStep.replace("step", ""));
+	(0, __jfdevelops_multi_step_form_core.invariant)(isValidStepNumber(stepNumber), `The step number "${stepNumber}" is not a valid step number. Valid step numbers include ${formattedStepNumbersList}`, TypeError);
+	return stepNumber;
+}
+function createMultiStepFormDataHook(schema) {
+	function useMultiStepFormData$1(optionsOrSelector) {
+		return (0, use_sync_external_store_shim_with_selector.useSyncExternalStoreWithSelector)(schema.subscribe, () => schema.getSnapshot(), () => schema.getSnapshot(), (snapshot) => {
+			if (typeof optionsOrSelector === "object") {
+				const stepNumber = throwIfInvalidStepNumber(snapshot, optionsOrSelector.targetStep);
+				return snapshot.stepSchema.get({ step: stepNumber }).data;
+			}
+			if (typeof optionsOrSelector === "function") return optionsOrSelector(snapshot);
+			return snapshot;
+		});
+	}
+	return useMultiStepFormData$1;
+}
+function useMultiStepFormData(schema, optionsOrSelector) {
+	const hook = createMultiStepFormDataHook(schema);
+	if (typeof optionsOrSelector === "object") return hook(optionsOrSelector);
+	if (typeof optionsOrSelector === "function") return hook(optionsOrSelector);
+	return hook();
+}
+
+//#endregion
+exports.createMultiStepFormDataHook = createMultiStepFormDataHook;
+exports.throwIfInvalidStepNumber = throwIfInvalidStepNumber;
+exports.useMultiStepFormData = useMultiStepFormData;
+//# sourceMappingURL=use-multi-step-form-data.cjs.map

package/dist/hooks/use-multi-step-form-data.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-multi-step-form-data.cjs","names":["VALIDATED_STEP_REGEX","useMultiStepFormData"],"sources":["../../src/hooks/use-multi-step-form-data.ts"],"sourcesContent":["import type { AnyMultiStepFormSchema, MultiStepFormSchema } from '@/schema';\nimport {\n  invariant,\n  VALIDATED_STEP_REGEX,\n} from '@jfdevelops/multi-step-form-core';\nimport { useSyncExternalStoreWithSelector } from 'use-sync-external-store/shim/with-selector';\n\nexport type UseMultiStepFormDataOptions<\n  TSchema extends AnyMultiStepFormSchema,\n  TTarget extends keyof MultiStepFormSchema.resolvedStep<TSchema> = keyof MultiStepFormSchema.resolvedStep<TSchema>\n> = {\n  targetStep: TTarget;\n};\nexport type UseMultiStepFormData<\n  // step extends Step<casing>,\n  // casing extends CasingType,\n  // storageKey extends string,\n  // resolvedStep extends ResolvedStep<step, casing>,\n  // schema extends MultiStepFormSchema<\n  //   step,\n  //   casing,\n  //   storageKey\n  // > = MultiStepFormSchema<step, casing, storageKey>,\n  TSchema extends AnyMultiStepFormSchema,\n  TResolvedStep extends MultiStepFormSchema.resolvedStep<TSchema> = MultiStepFormSchema.resolvedStep<TSchema>\n> = {\n  /**\n   * Returns the entire {@linkcode MultiStepFormSchema instance}.\n   */\n  (): TSchema;\n  /**\n   * Returns the data for the target step.\n   * @param stepNumber The step number to return.\n   * @throws {TypeError} If `options.stepNumber` is invalid.\n   */\n  <targetStep extends keyof TResolvedStep>(\n    options: UseMultiStepFormDataOptions<TSchema, targetStep>\n  ): MultiStepFormSchema.getData<TSchema, targetStep>;\n  /**\n   * Returns the specified data from the {@linkcode MultiStepFormSchema} instance via the callback's return.\n   */\n  <data>(selector: (schema: TSchema) => data): data;\n};\n\nexport function throwIfInvalidStepNumber<\n  // step extends Step<casing>,\n  // casing extends CasingType = DefaultCasing,\n  // storageKey extends string = DefaultStorageKey,\n  // resolvedStep extends ResolvedStep<step, casing> = ResolvedStep<step, casing>,\n  // stepNumbers extends StepNumbers<resolvedStep> = StepNumbers<resolvedStep>\n  schema extends AnyMultiStepFormSchema\n>(schema: schema, targetStep: unknown) {\n  invariant(\n    typeof targetStep === 'string',\n    `The target step must be a string, was ${typeof targetStep}`\n  );\n\n  const { as, isValidStepNumber } = schema.stepSchema.steps;\n  const formatter = new Intl.ListFormat('en', {\n    type: 'disjunction',\n    style: 'long',\n  });\n  const formattedStepNumbersList = formatter.format(as('array.string.untyped'));\n\n  invariant(\n    VALIDATED_STEP_REGEX.test(targetStep),\n    `The target step must match the following format: \"step{number}\". Available steps are ${formattedStepNumbersList}`\n  );\n\n  const stepNumber = Number.parseInt(targetStep.replace('step', ''));\n\n  invariant(\n    isValidStepNumber(stepNumber),\n    `The step number \"${stepNumber}\" is not a valid step number. Valid step numbers include ${formattedStepNumbersList}`,\n    TypeError\n  );\n\n  return stepNumber as MultiStepFormSchema.stepNumbers<schema>;\n}\n\nexport function createMultiStepFormDataHook<\n  // step extends Step<casing>,\n  // casing extends CasingType = DefaultCasing,\n  // storageKey extends string = DefaultStorageKey,\n  // resolvedStep extends ResolvedStep<step, casing> = ResolvedStep<step, casing>,\n  // stepNumbers extends StepNumbers<resolvedStep> = StepNumbers<resolvedStep>\n  schema extends AnyMultiStepFormSchema\n>(schema: schema): UseMultiStepFormData<schema> {\n  function useMultiStepFormData(\n    optionsOrSelector?:\n      | UseMultiStepFormDataOptions<schema>\n      | ((data: schema) => unknown)\n  ) {\n    return useSyncExternalStoreWithSelector(\n      schema.subscribe,\n      () => schema.getSnapshot(),\n      () => schema.getSnapshot(),\n      (snapshot) => {\n        if (typeof optionsOrSelector === 'object') {\n          // @ts-ignore Type instantiation is excessively deep and possibly infinite\n          const stepNumber = throwIfInvalidStepNumber(\n            snapshot,\n            optionsOrSelector.targetStep\n          );\n\n          return snapshot.stepSchema.get({ step: stepNumber as never }).data;\n        }\n\n        if (typeof optionsOrSelector === 'function') {\n          return optionsOrSelector(snapshot);\n        }\n\n        return snapshot;\n      }\n    );\n  }\n\n  return useMultiStepFormData as any;\n}\n\nfunction useMultiStepFormData<schema extends AnyMultiStepFormSchema>(\n  schema: schema\n): schema;\nfunction useMultiStepFormData<\n  schema extends AnyMultiStepFormSchema,\n  targetStep extends keyof MultiStepFormSchema.resolvedStep<schema>\n>(\n  schema: schema,\n  options: UseMultiStepFormDataOptions<schema, targetStep>\n): MultiStepFormSchema.getData<schema, targetStep>;\nfunction useMultiStepFormData<schema extends AnyMultiStepFormSchema, data>(\n  schema: schema,\n  selector: (schema: schema) => data\n): data;\nfunction useMultiStepFormData<\n  // step extends Step<casing>,\n  // casing extends CasingType = DefaultCasing,\n  // storageKey extends string = DefaultStorageKey,\n  // resolvedStep extends ResolvedStep<step, casing> = ResolvedStep<step, casing>,\n  // stepNumbers extends StepNumbers<resolvedStep> = StepNumbers<resolvedStep>\n  schema extends AnyMultiStepFormSchema\n>(\n  schema: schema,\n  optionsOrSelector?:\n    | UseMultiStepFormDataOptions<schema>\n    | ((data: schema) => unknown)\n) {\n  const hook = createMultiStepFormDataHook(schema);\n\n  if (typeof optionsOrSelector === 'object') {\n    return hook(optionsOrSelector);\n  }\n\n  if (typeof optionsOrSelector === 'function') {\n    return hook(optionsOrSelector);\n  }\n\n  return hook();\n}\n\nexport { useMultiStepFormData };\n"],"mappings":";;;;AA4CA,SAAgB,yBAOd,QAAgB,YAAqB;AACrC,kDACE,OAAO,eAAe,UACtB,yCAAyC,OAAO,aACjD;CAED,MAAM,EAAE,IAAI,sBAAsB,OAAO,WAAW;CAKpD,MAAM,2BAJY,IAAI,KAAK,WAAW,MAAM;EAC1C,MAAM;EACN,OAAO;EACR,CAAC,CACyC,OAAO,GAAG,uBAAuB,CAAC;AAE7E,kDACEA,uDAAqB,KAAK,WAAW,EACrC,wFAAwF,2BACzF;CAED,MAAM,aAAa,OAAO,SAAS,WAAW,QAAQ,QAAQ,GAAG,CAAC;AAElE,kDACE,kBAAkB,WAAW,EAC7B,oBAAoB,WAAW,2DAA2D,4BAC1F,UACD;AAED,QAAO;;AAGT,SAAgB,4BAOd,QAA8C;CAC9C,SAASC,uBACP,mBAGA;AACA,0FACE,OAAO,iBACD,OAAO,aAAa,QACpB,OAAO,aAAa,GACzB,aAAa;AACZ,OAAI,OAAO,sBAAsB,UAAU;IAEzC,MAAM,aAAa,yBACjB,UACA,kBAAkB,WACnB;AAED,WAAO,SAAS,WAAW,IAAI,EAAE,MAAM,YAAqB,CAAC,CAAC;;AAGhE,OAAI,OAAO,sBAAsB,WAC/B,QAAO,kBAAkB,SAAS;AAGpC,UAAO;IAEV;;AAGH,QAAOA;;AAiBT,SAAS,qBAQP,QACA,mBAGA;CACA,MAAM,OAAO,4BAA4B,OAAO;AAEhD,KAAI,OAAO,sBAAsB,SAC/B,QAAO,KAAK,kBAAkB;AAGhC,KAAI,OAAO,sBAAsB,WAC/B,QAAO,KAAK,kBAAkB;AAGhC,QAAO,MAAM"}

package/dist/hooks/use-multi-step-form-data.d.cts

@@ -0,0 +1,28 @@
+import { AnyMultiStepFormSchema, MultiStepFormSchema } from "../schema.cjs";
+
+//#region src/hooks/use-multi-step-form-data.d.ts
+type UseMultiStepFormDataOptions<TSchema extends AnyMultiStepFormSchema, TTarget extends keyof MultiStepFormSchema.resolvedStep<TSchema> = keyof MultiStepFormSchema.resolvedStep<TSchema>> = {
+  targetStep: TTarget;
+};
+type UseMultiStepFormData<TSchema extends AnyMultiStepFormSchema, TResolvedStep extends MultiStepFormSchema.resolvedStep<TSchema> = MultiStepFormSchema.resolvedStep<TSchema>> = {
+  /**
+   * Returns the entire {@linkcode MultiStepFormSchema instance}.
+   */
+  (): TSchema;
+  /**
+   * Returns the data for the target step.
+   * @param stepNumber The step number to return.
+   * @throws {TypeError} If `options.stepNumber` is invalid.
+   */
+  <targetStep extends keyof TResolvedStep>(options: UseMultiStepFormDataOptions<TSchema, targetStep>): MultiStepFormSchema.getData<TSchema, targetStep>;
+  /**
+   * Returns the specified data from the {@linkcode MultiStepFormSchema} instance via the callback's return.
+   */
+  <data>(selector: (schema: TSchema) => data): data;
+};
+declare function useMultiStepFormData<schema extends AnyMultiStepFormSchema>(schema: schema): schema;
+declare function useMultiStepFormData<schema extends AnyMultiStepFormSchema, targetStep extends keyof MultiStepFormSchema.resolvedStep<schema>>(schema: schema, options: UseMultiStepFormDataOptions<schema, targetStep>): MultiStepFormSchema.getData<schema, targetStep>;
+declare function useMultiStepFormData<schema extends AnyMultiStepFormSchema, data>(schema: schema, selector: (schema: schema) => data): data;
+//#endregion
+export { UseMultiStepFormData, useMultiStepFormData };
+//# sourceMappingURL=use-multi-step-form-data.d.cts.map