@jfdevelops/react-multi-step-form 1.0.0-alpha.32 → 1.0.0-alpha.34

package/dist/schema.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"schema.cjs","names":["MultiStepFormSchemaCore","#internal","DEFAULT_CASING","MultiStepFormStepSchema","MultiStepFormStepSchemaInternal"],"sources":["../src/schema.ts"],"sourcesContent":["import {\n  type CasingType,\n  type Constrain,\n  createCtx,\n  type CreateHelperFunctionOptionsBase,\n  DEFAULT_CASING,\n  type DefaultCasing,\n  type DefaultStorageKey,\n  type HelperFnChosenSteps,\n  type MultiStepFormSchemaOptions as MultiStepFormSchemaBaseOptions,\n  MultiStepFormSchema as MultiStepFormSchemaCore,\n  type ResolvedStep as ResolvedStepCore,\n  type Step,\n  type StepNumbers,\n} from '@jfdevelops/multi-step-form-core';\nimport type { ComponentPropsWithRef } from 'react';\nimport { MultiStepFormSchemaConfig } from './form-config';\nimport {\n  type CreateComponentCallback,\n  type CreatedMultiStepFormComponent,\n  type HelperFunctions,\n  MultiStepFormStepSchema,\n  type ResolvedStep,\n} from './step-schema';\nimport { MultiStepFormStepSchemaInternal } from '@jfdevelops/multi-step-form-core/_internals';\n\n// export type AnyMultiStepFormSchema = MultiStepFormSchema<any, any, any>;\nexport type AnyMultiStepFormSchema = { [x: string]: any };\n\n// Helper inference types for `AnyMultiStepFormSchema`\nexport namespace MultiStepFormSchema {\n  /**\n   * Infer the resolved step from a {@linkcode MultiStepFormSchema}.\n   */\n  export type resolvedStep<T extends AnyMultiStepFormSchema> =\n    T['stepSchema']['value'];\n  /**\n   * Infer the {@linkcode MultiStepFormSchema}'s step numbers.\n   */\n  export type stepNumbers<T extends AnyMultiStepFormSchema> = StepNumbers<\n    resolvedStep<T>\n  >;\n  /**\n   * Get the data for a specific step from a {@linkcode MultiStepFormSchema}.\n   */\n  export type getData<\n    T extends AnyMultiStepFormSchema,\n    TTarget extends keyof resolvedStep<T>\n  > = resolvedStep<T>[TTarget];\n}\n\nexport interface MultiStepFormSchemaOptions<\n  TStep extends Step<TCasing>,\n  TCasing extends CasingType,\n  TStorageKey extends string,\n  TFormAlias extends string,\n  TFormEnabledFor extends MultiStepFormSchemaConfig.formEnabledFor<TResolvedStep>,\n  TFormProps extends object,\n  TResolvedStep extends ResolvedStep<TStep, TCasing> = ResolvedStep<\n    TStep,\n    TCasing\n  >\n> extends MultiStepFormSchemaBaseOptions<TStep, TCasing, TStorageKey>,\n    MultiStepFormSchemaConfig.Form<\n      TResolvedStep,\n      TFormAlias,\n      TFormEnabledFor,\n      TFormProps\n    > {}\n\nexport class MultiStepFormSchema<\n    step extends Step<casing>,\n    casing extends CasingType = DefaultCasing,\n    storageKey extends string = DefaultStorageKey,\n    formAlias extends string = MultiStepFormSchemaConfig.defaultFormAlias,\n    formEnabledFor extends MultiStepFormSchemaConfig.formEnabledFor<resolvedStep> = MultiStepFormSchemaConfig.defaultEnabledFor,\n    formProps extends object = ComponentPropsWithRef<'form'>,\n    resolvedStep extends ResolvedStep<step, casing> = ResolvedStep<\n      step,\n      casing\n    >,\n    stepNumbers extends StepNumbers<resolvedStep> = StepNumbers<resolvedStep>\n  >\n  extends MultiStepFormSchemaCore<\n    step,\n    casing,\n    ResolvedStepCore<step, casing>,\n    StepNumbers<ResolvedStepCore<step, casing>>,\n    storageKey\n  >\n  implements HelperFunctions<resolvedStep, stepNumbers>\n{\n  // @ts-ignore\n  stepSchema: MultiStepFormStepSchema<\n    step,\n    casing,\n    storageKey,\n    formAlias,\n    formEnabledFor,\n    formProps\n  >;\n  readonly #internal: MultiStepFormStepSchemaInternal<\n    step,\n    casing,\n    resolvedStep,\n    stepNumbers\n  >;\n\n  constructor(\n    config: MultiStepFormSchemaOptions<\n      step,\n      Constrain<casing, CasingType>,\n      storageKey,\n      formAlias,\n      formEnabledFor,\n      formProps\n    >\n  ) {\n    const { nameTransformCasing = DEFAULT_CASING, storage, ...rest } = config;\n    const options = { nameTransformCasing, storage, ...rest };\n\n    super(options);\n\n    this.stepSchema = new MultiStepFormStepSchema<\n      step,\n      casing,\n      storageKey,\n      formAlias,\n      formEnabledFor,\n      formProps\n    >(options);\n    this.#internal = new MultiStepFormStepSchemaInternal<\n      step,\n      casing,\n      resolvedStep,\n      stepNumbers\n    >({\n      originalValue: this.stepSchema.original,\n      getValue: () => this.stepSchema.value as never,\n      setValue: (value) => {\n        this.stepSchema.value = { ...value } as never;\n        this.storage.add(value);\n        this.notify();\n      },\n    });\n  }\n\n  createComponent<\n    chosenSteps extends HelperFnChosenSteps<resolvedStep, stepNumbers>,\n    props = undefined\n  >(\n    options: CreateHelperFunctionOptionsBase<\n      resolvedStep,\n      stepNumbers,\n      chosenSteps\n    >,\n    fn: CreateComponentCallback<resolvedStep, stepNumbers, chosenSteps, props>\n  ): CreatedMultiStepFormComponent<props> {\n    const { stepData } = options;\n    const ctx = createCtx<resolvedStep, stepNumbers, chosenSteps>(\n      this.stepSchema.value as never,\n      stepData\n    ) as never;\n\n    return ((props?: props) =>\n      fn(\n        {\n          ctx,\n          update: this.#internal.createHelperFnInputUpdate(stepData),\n          reset: this.#internal.createHelperFnInputReset(stepData),\n        },\n        props as any\n      )) as any;\n  }\n}\n\nexport function createMultiStepFormSchema<\n  step extends Step<casing>,\n  casing extends CasingType = DefaultCasing,\n  storageKey extends string = DefaultStorageKey,\n  formAlias extends string = MultiStepFormSchemaConfig.defaultFormAlias,\n  formEnabledFor extends MultiStepFormSchemaConfig.formEnabledFor<resolvedStep> = MultiStepFormSchemaConfig.defaultEnabledFor,\n  formProps extends object = ComponentPropsWithRef<'form'>,\n  resolvedStep extends ResolvedStep<step, casing> = ResolvedStep<step, casing>,\n  stepNumbers extends StepNumbers<resolvedStep> = StepNumbers<resolvedStep>\n>(\n  options: MultiStepFormSchemaOptions<\n    step,\n    Constrain<casing, CasingType>,\n    storageKey,\n    formAlias,\n    formEnabledFor,\n    formProps\n  >\n) {\n  return new MultiStepFormSchema<\n    step,\n    casing,\n    storageKey,\n    formAlias,\n    formEnabledFor,\n    formProps,\n    resolvedStep,\n    stepNumbers\n  >(options);\n}\n"],"mappings":";;;;;AAsEA,IAAa,sBAAb,cAaUA,sDAQV;CAEE;CAQA,CAASC;CAOT,YACE,QAQA;EACA,MAAM,EAAE,sBAAsBC,kDAAgB,SAAS,GAAG,SAAS;EACnE,MAAM,UAAU;GAAE;GAAqB;GAAS,GAAG;GAAM;AAEzD,QAAM,QAAQ;AAEd,OAAK,aAAa,IAAIC,4CAOpB,QAAQ;AACV,QAAKF,WAAY,IAAIG,6EAKnB;GACA,eAAe,KAAK,WAAW;GAC/B,gBAAgB,KAAK,WAAW;GAChC,WAAW,UAAU;AACnB,SAAK,WAAW,QAAQ,EAAE,GAAG,OAAO;AACpC,SAAK,QAAQ,IAAI,MAAM;AACvB,SAAK,QAAQ;;GAEhB,CAAC;;CAGJ,gBAIE,SAKA,IACsC;EACtC,MAAM,EAAE,aAAa;EACrB,MAAM,uDACJ,KAAK,WAAW,OAChB,SACD;AAED,WAAS,UACP,GACE;GACE;GACA,QAAQ,MAAKH,SAAU,0BAA0B,SAAS;GAC1D,OAAO,MAAKA,SAAU,yBAAyB,SAAS;GACzD,EACD,MACD;;;AAIP,SAAgB,0BAUd,SAQA;AACA,QAAO,IAAI,oBAST,QAAQ"}
+{"version":3,"file":"schema.cjs","names":["MultiStepFormSchemaCore","#internal","DEFAULT_CASING","MultiStepFormStepSchema","MultiStepFormStepSchemaInternal","DEFAULT_STORAGE_KEY","MultiStepFormStorage","createMultiStepFormContext","createComponent"],"sources":["../src/schema.ts"],"sourcesContent":["import {\n  type BaseStorageConfig,\n  DEFAULT_CASING,\n  DEFAULT_STORAGE_KEY,\n  type Expand,\n  type HelperFn,\n  type HelperFnChosenSteps,\n  MultiStepFormSchema as MultiStepFormSchemaCore,\n  MultiStepFormStorage,\n  type steps,\n} from '@jfdevelops/multi-step-form-core';\nimport {\n  MultiStepFormStepSchemaInternal,\n  type StepSchema,\n} from '@jfdevelops/multi-step-form-core/_internals';\nimport {\n  createMultiStepFormContext,\n  type MultiStepFormContextResult,\n} from './create-context';\nimport { MultiStepFormSchemaConfig } from './form-config';\nimport { type HelperFunctions, MultiStepFormStepSchema } from './step-schema';\nimport { createComponent, type CreateComponentCallback } from './utils';\n\n// Helper inference types for `AnyMultiStepFormSchema`\nexport namespace MultiStepFormSchema {\n  export type config<\n    def extends StepSchema.Config,\n    value extends steps.instantiateSteps<def> = steps.instantiateSteps<def>,\n  > = MultiStepFormStepSchema.config<def, value> & {\n    /**\n     * The React context for the multi step form.\n     *\n     * This is a private property and is not meant to be used directly.\n     * @private\n     * @internal\n     */\n    context?: MultiStepFormContextResult<def, value>;\n  };\n}\n\nexport class MultiStepFormSchema<\n  const def extends StepSchema.Config,\n  value extends steps.instantiateSteps<def> = steps.instantiateSteps<def>,\n>\n  extends MultiStepFormSchemaCore<def, value>\n  implements HelperFunctions<def, value>\n{\n  stepSchema: MultiStepFormStepSchema<def, value>;\n  readonly #internal: MultiStepFormStepSchemaInternal<def, value>;\n  override readonly storage: MultiStepFormStorage<\n    value,\n    StepSchema.inferStorageKey<def>\n  >;\n  override readonly storageConfig: BaseStorageConfig<\n    StepSchema.inferStorageKey<def>\n  >;\n\n  readonly context: MultiStepFormContextResult<def, value> = undefined as never;\n  readonly formConfig: MultiStepFormSchemaConfig.FormConfig<def, value> =\n    undefined as never;\n\n  constructor(config: MultiStepFormSchema.config<def, value>) {\n    const {\n      nameTransformCasing = DEFAULT_CASING,\n      steps,\n      form,\n      storage,\n      context,\n    } = config;\n    const options = {\n      steps,\n      nameTransformCasing,\n      storage,\n      form,\n    } as MultiStepFormStepSchema.config<def, value>;\n\n    super(options);\n\n    this.stepSchema = new MultiStepFormStepSchema(options);\n    this.#internal = new MultiStepFormStepSchemaInternal({\n      originalValue: this.stepSchema.original,\n      getValue: () => this.stepSchema.value,\n      setValue: (value) => {\n        this.stepSchema.value = { ...value };\n        this.storage.add(value);\n        this.notify();\n      },\n    });\n    this.storageConfig = {\n      key: (storage?.key ??\n        DEFAULT_STORAGE_KEY) as StepSchema.inferStorageKey<def>,\n      store: storage?.store,\n      throwWhenUndefined: storage?.throwWhenUndefined,\n    };\n    this.storage = new MultiStepFormStorage({\n      data: this.stepSchema.value,\n      ...this.storageConfig,\n    });\n    if (context) {\n      this.context = context;\n    }\n\n    if (form) {\n      this.formConfig = form;\n    }\n  }\n\n  /**\n   * A helper function to add a form configuration to the {@linkcode MultiStepFormSchema}.\n   *\n   * By calling this function, you will have access to the create form component in all step\n   * utility functions.\n   *\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   *   },\n   * }).withForm({\n   *   render(data) {\n   *     return (props: MyCustomProps) => {\n   *       return <form {...props}>{props.children}</form>;\n   *     };\n   *   },\n   * });\n   * ```\n   * @param config The form configuration.\n   * @returns A new {@linkcode MultiStepFormSchema} with the form configuration.\n   */\n  withForm<\n    const formConfig extends MultiStepFormSchemaConfig.FormConfig<def, value>,\n  >(config: formConfig) {\n    const { key, store, throwWhenUndefined } = this.storageConfig;\n\n    return new MultiStepFormSchema<\n      Expand<def & Readonly<{ form: formConfig }>>\n    >({\n      steps: this.stepSchema.original,\n      form: config,\n      nameTransformCasing: this.stepSchema.defaultNameTransformationCasing,\n      storage: {\n        key,\n        store,\n        throwWhenUndefined: throwWhenUndefined,\n      },\n    } as never);\n  }\n\n  withContext() {\n    const context = createMultiStepFormContext(this);\n\n    return new MultiStepFormSchema<def, value>({\n      steps: this.stepSchema.original,\n      form: this.formConfig,\n      nameTransformCasing: this.stepSchema.defaultNameTransformationCasing,\n      storage: {\n        key: this.storageConfig.key,\n        store: this.storageConfig.store,\n        throwWhenUndefined: this.storageConfig.throwWhenUndefined,\n      },\n      context,\n    } as never);\n  }\n\n  createComponent<\n    chosenSteps extends HelperFnChosenSteps.main<\n      value,\n      steps.StepNumbers<value>\n    >,\n    props = undefined,\n  >(\n    options: HelperFn.BaseOptions<value, chosenSteps>,\n    fn: CreateComponentCallback<value, chosenSteps, props>\n  ) {\n    return createComponent({\n      fn,\n      input: ({ stepData }) => ({\n        reset: this.#internal.createHelperFnInputReset(stepData),\n        update: this.#internal.createHelperFnInputUpdate(stepData),\n      }),\n      options,\n      value: this.stepSchema.value,\n    });\n  }\n}\n\nexport function createMultiStepFormSchema<\n  const def extends StepSchema.Config,\n  value extends steps.instantiateSteps<def> = steps.instantiateSteps<def>,\n>(options: def) {\n  return new MultiStepFormSchema<def, value>(options);\n}\n"],"mappings":";;;;;;;AAwCA,IAAa,sBAAb,MAAa,4BAIHA,sDAEV;CACE;CACA,CAASC;CACT,AAAkB;CAIlB,AAAkB;CAIlB,AAAS,UAAkD;CAC3D,AAAS,aACP;CAEF,YAAY,QAAgD;EAC1D,MAAM,EACJ,sBAAsBC,kDACtB,OACA,MACA,SACA,YACE;EACJ,MAAM,UAAU;GACd;GACA;GACA;GACA;GACD;AAED,QAAM,QAAQ;AAEd,OAAK,aAAa,IAAIC,4CAAwB,QAAQ;AACtD,QAAKF,WAAY,IAAIG,6EAAgC;GACnD,eAAe,KAAK,WAAW;GAC/B,gBAAgB,KAAK,WAAW;GAChC,WAAW,UAAU;AACnB,SAAK,WAAW,QAAQ,EAAE,GAAG,OAAO;AACpC,SAAK,QAAQ,IAAI,MAAM;AACvB,SAAK,QAAQ;;GAEhB,CAAC;AACF,OAAK,gBAAgB;GACnB,KAAM,SAAS,OACbC;GACF,OAAO,SAAS;GAChB,oBAAoB,SAAS;GAC9B;AACD,OAAK,UAAU,IAAIC,uDAAqB;GACtC,MAAM,KAAK,WAAW;GACtB,GAAG,KAAK;GACT,CAAC;AACF,MAAI,QACF,MAAK,UAAU;AAGjB,MAAI,KACF,MAAK,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkCtB,SAEE,QAAoB;EACpB,MAAM,EAAE,KAAK,OAAO,uBAAuB,KAAK;AAEhD,SAAO,IAAI,oBAET;GACA,OAAO,KAAK,WAAW;GACvB,MAAM;GACN,qBAAqB,KAAK,WAAW;GACrC,SAAS;IACP;IACA;IACoB;IACrB;GACF,CAAU;;CAGb,cAAc;EACZ,MAAM,UAAUC,kDAA2B,KAAK;AAEhD,SAAO,IAAI,oBAAgC;GACzC,OAAO,KAAK,WAAW;GACvB,MAAM,KAAK;GACX,qBAAqB,KAAK,WAAW;GACrC,SAAS;IACP,KAAK,KAAK,cAAc;IACxB,OAAO,KAAK,cAAc;IAC1B,oBAAoB,KAAK,cAAc;IACxC;GACD;GACD,CAAU;;CAGb,gBAOE,SACA,IACA;AACA,SAAOC,8BAAgB;GACrB;GACA,QAAQ,EAAE,gBAAgB;IACxB,OAAO,MAAKP,SAAU,yBAAyB,SAAS;IACxD,QAAQ,MAAKA,SAAU,0BAA0B,SAAS;IAC3D;GACD;GACA,OAAO,KAAK,WAAW;GACxB,CAAC;;;AAIN,SAAgB,0BAGd,SAAc;AACd,QAAO,IAAI,oBAAgC,QAAQ"}

package/dist/schema.d.cts

@@ -1,34 +1,75 @@
-import { CreateComponentCallback, CreatedMultiStepFormComponent, HelperFunctions, MultiStepFormStepSchema as MultiStepFormStepSchema$1, ResolvedStep as ResolvedStep$1 } from "./step-schema.cjs";
+import { CreateComponentCallback, CreatedMultiStepFormComponent } from "./utils.cjs";
+import { MultiStepFormContextResult } from "./create-context.cjs";
 import { MultiStepFormSchemaConfig } from "./form-config.cjs";
-import { CasingType, Constrain, CreateHelperFunctionOptionsBase, DefaultCasing, DefaultStorageKey, HelperFnChosenSteps, MultiStepFormSchema, MultiStepFormSchemaOptions, ResolvedStep, Step, StepNumbers } from "@jfdevelops/multi-step-form-core";
-import { ComponentPropsWithRef } from "react";
+import { HelperFunctions, MultiStepFormStepSchema as MultiStepFormStepSchema$1 } from "./step-schema.cjs";
+import * as _jfdevelops_multi_step_form_core0 from "@jfdevelops/multi-step-form-core";
+import { BaseStorageConfig, Expand, HelperFn, HelperFnChosenSteps, MultiStepFormSchema, MultiStepFormStorage, steps } from "@jfdevelops/multi-step-form-core";
+import { StepSchema } from "@jfdevelops/multi-step-form-core/_internals";
 
 //#region src/schema.d.ts
-type AnyMultiStepFormSchema = {
-  [x: string]: any;
-};
 declare namespace MultiStepFormSchema$1 {
-  /**
-   * Infer the resolved step from a {@linkcode MultiStepFormSchema}.
-   */
-  type resolvedStep<T extends AnyMultiStepFormSchema> = T['stepSchema']['value'];
-  /**
-   * Infer the {@linkcode MultiStepFormSchema}'s step numbers.
-   */
-  type stepNumbers<T extends AnyMultiStepFormSchema> = StepNumbers<resolvedStep<T>>;
-  /**
-   * Get the data for a specific step from a {@linkcode MultiStepFormSchema}.
-   */
-  type getData<T extends AnyMultiStepFormSchema, TTarget extends keyof resolvedStep<T>> = resolvedStep<T>[TTarget];
+  type config<def extends StepSchema.Config, value extends steps.instantiateSteps<def> = steps.instantiateSteps<def>> = MultiStepFormStepSchema$1.config<def, value> & {
+    /**
+     * The React context for the multi step form.
+     *
+     * This is a private property and is not meant to be used directly.
+     * @private
+     * @internal
+     */
+    context?: MultiStepFormContextResult<def, value>;
+  };
 }
-interface MultiStepFormSchemaOptions$1<TStep extends Step<TCasing>, TCasing extends CasingType, TStorageKey extends string, TFormAlias extends string, TFormEnabledFor extends MultiStepFormSchemaConfig.formEnabledFor<TResolvedStep>, TFormProps extends object, TResolvedStep extends ResolvedStep$1<TStep, TCasing> = ResolvedStep$1<TStep, TCasing>> extends MultiStepFormSchemaOptions<TStep, TCasing, TStorageKey>, MultiStepFormSchemaConfig.Form<TResolvedStep, TFormAlias, TFormEnabledFor, TFormProps> {}
-declare class MultiStepFormSchema$1<step extends Step<casing>, casing extends CasingType = DefaultCasing, storageKey extends string = DefaultStorageKey, formAlias extends string = MultiStepFormSchemaConfig.defaultFormAlias, formEnabledFor extends MultiStepFormSchemaConfig.formEnabledFor<resolvedStep$1> = MultiStepFormSchemaConfig.defaultEnabledFor, formProps extends object = ComponentPropsWithRef<'form'>, resolvedStep$1 extends ResolvedStep$1<step, casing> = ResolvedStep$1<step, casing>, stepNumbers extends StepNumbers<resolvedStep$1> = StepNumbers<resolvedStep$1>> extends MultiStepFormSchema<step, casing, ResolvedStep<step, casing>, StepNumbers<ResolvedStep<step, casing>>, storageKey> implements HelperFunctions<resolvedStep$1, stepNumbers> {
+declare class MultiStepFormSchema$1<const def extends StepSchema.Config, value extends steps.instantiateSteps<def> = steps.instantiateSteps<def>> extends MultiStepFormSchema<def, value> implements HelperFunctions<def, value> {
   #private;
-  stepSchema: MultiStepFormStepSchema$1<step, casing, storageKey, formAlias, formEnabledFor, formProps>;
-  constructor(config: MultiStepFormSchemaOptions$1<step, Constrain<casing, CasingType>, storageKey, formAlias, formEnabledFor, formProps>);
-  createComponent<chosenSteps extends HelperFnChosenSteps<resolvedStep$1, stepNumbers>, props = undefined>(options: CreateHelperFunctionOptionsBase<resolvedStep$1, stepNumbers, chosenSteps>, fn: CreateComponentCallback<resolvedStep$1, stepNumbers, chosenSteps, props>): CreatedMultiStepFormComponent<props>;
+  stepSchema: MultiStepFormStepSchema$1<def, value>;
+  readonly storage: MultiStepFormStorage<value, StepSchema.inferStorageKey<def>>;
+  readonly storageConfig: BaseStorageConfig<StepSchema.inferStorageKey<def>>;
+  readonly context: MultiStepFormContextResult<def, value>;
+  readonly formConfig: MultiStepFormSchemaConfig.FormConfig<def, value>;
+  constructor(config: MultiStepFormSchema$1.config<def, value>);
+  /**
+   * A helper function to add a form configuration to the {@linkcode MultiStepFormSchema}.
+   *
+   * By calling this function, you will have access to the create form component in all step
+   * utility functions.
+   *
+   * @example
+   * ```tsx
+   * const schema = createMultiStepFormSchema({
+   *   steps: {
+   *     step1: {
+   *       title: 'Step 1',
+   *       fields: {
+   *         firstName: {
+   *           defaultValue: '',
+   *         },
+   *       },
+   *     },
+   *   },
+   * }).withForm({
+   *   render(data) {
+   *     return (props: MyCustomProps) => {
+   *       return <form {...props}>{props.children}</form>;
+   *     };
+   *   },
+   * });
+   * ```
+   * @param config The form configuration.
+   * @returns A new {@linkcode MultiStepFormSchema} with the form configuration.
+   */
+  withForm<const formConfig extends MultiStepFormSchemaConfig.FormConfig<def, value>>(config: formConfig): MultiStepFormSchema$1<Expand<def & Readonly<{
+    form: formConfig;
+  }>>, Expand<steps._instantiateSteps<Expand<def & Readonly<{
+    form: formConfig;
+  }>>> extends infer T ? { [key in keyof T]: Expand<T[key] & (T extends {} ? key extends steps.StepNumbers<T> ? {
+    update: _jfdevelops_multi_step_form_core0.UpdateFn.stepSpecific<T, key, steps.StepNumbers<T>>;
+    reset: _jfdevelops_multi_step_form_core0.ResetFn.stepSpecific<T, key>;
+    createHelperFn: _jfdevelops_multi_step_form_core0.StepSpecificHelperFn<T, key>;
+  } & steps.ExtendedStepSpecificFunctions<t, T, key> : {} : {}) extends infer T_1 ? { [k in keyof T_1]: T_1[k] } : never> } : never>>;
+  withContext(): MultiStepFormSchema$1<def, value>;
+  createComponent<chosenSteps extends HelperFnChosenSteps.main<value, steps.StepNumbers<value>>, props = undefined>(options: HelperFn.BaseOptions<value, chosenSteps>, fn: CreateComponentCallback<value, chosenSteps, props>): CreatedMultiStepFormComponent<props>;
 }
-declare function createMultiStepFormSchema<step extends Step<casing>, casing extends CasingType = DefaultCasing, storageKey extends string = DefaultStorageKey, formAlias extends string = MultiStepFormSchemaConfig.defaultFormAlias, formEnabledFor extends MultiStepFormSchemaConfig.formEnabledFor<resolvedStep$1> = MultiStepFormSchemaConfig.defaultEnabledFor, formProps extends object = ComponentPropsWithRef<'form'>, resolvedStep$1 extends ResolvedStep$1<step, casing> = ResolvedStep$1<step, casing>, stepNumbers extends StepNumbers<resolvedStep$1> = StepNumbers<resolvedStep$1>>(options: MultiStepFormSchemaOptions$1<step, Constrain<casing, CasingType>, storageKey, formAlias, formEnabledFor, formProps>): MultiStepFormSchema$1<step, casing, storageKey, formAlias, formEnabledFor, formProps, resolvedStep$1, stepNumbers>;
+declare function createMultiStepFormSchema<const def extends StepSchema.Config, value extends steps.instantiateSteps<def> = steps.instantiateSteps<def>>(options: def): MultiStepFormSchema$1<def, value>;
 //#endregion
-export { AnyMultiStepFormSchema, MultiStepFormSchema$1 as MultiStepFormSchema, MultiStepFormSchemaOptions$1 as MultiStepFormSchemaOptions, createMultiStepFormSchema };
+export { MultiStepFormSchema$1 as MultiStepFormSchema, createMultiStepFormSchema };
 //# sourceMappingURL=schema.d.cts.map

package/dist/schema.d.mts

@@ -1,34 +1,75 @@
-import { CreateComponentCallback, CreatedMultiStepFormComponent, HelperFunctions, MultiStepFormStepSchema as MultiStepFormStepSchema$1, ResolvedStep as ResolvedStep$1 } from "./step-schema.mjs";
+import { CreateComponentCallback, CreatedMultiStepFormComponent } from "./utils.mjs";
+import { MultiStepFormContextResult } from "./create-context.mjs";
 import { MultiStepFormSchemaConfig } from "./form-config.mjs";
-import { CasingType, Constrain, CreateHelperFunctionOptionsBase, DefaultCasing, DefaultStorageKey, HelperFnChosenSteps, MultiStepFormSchema, MultiStepFormSchemaOptions, ResolvedStep, Step, StepNumbers } from "@jfdevelops/multi-step-form-core";
-import { ComponentPropsWithRef } from "react";
+import { HelperFunctions, MultiStepFormStepSchema as MultiStepFormStepSchema$1 } from "./step-schema.mjs";
+import * as _jfdevelops_multi_step_form_core0 from "@jfdevelops/multi-step-form-core";
+import { BaseStorageConfig, Expand, HelperFn, HelperFnChosenSteps, MultiStepFormSchema, MultiStepFormStorage, steps } from "@jfdevelops/multi-step-form-core";
+import { StepSchema } from "@jfdevelops/multi-step-form-core/_internals";
 
 //#region src/schema.d.ts
-type AnyMultiStepFormSchema = {
-  [x: string]: any;
-};
 declare namespace MultiStepFormSchema$1 {
-  /**
-   * Infer the resolved step from a {@linkcode MultiStepFormSchema}.
-   */
-  type resolvedStep<T extends AnyMultiStepFormSchema> = T['stepSchema']['value'];
-  /**
-   * Infer the {@linkcode MultiStepFormSchema}'s step numbers.
-   */
-  type stepNumbers<T extends AnyMultiStepFormSchema> = StepNumbers<resolvedStep<T>>;
-  /**
-   * Get the data for a specific step from a {@linkcode MultiStepFormSchema}.
-   */
-  type getData<T extends AnyMultiStepFormSchema, TTarget extends keyof resolvedStep<T>> = resolvedStep<T>[TTarget];
+  type config<def extends StepSchema.Config, value extends steps.instantiateSteps<def> = steps.instantiateSteps<def>> = MultiStepFormStepSchema$1.config<def, value> & {
+    /**
+     * The React context for the multi step form.
+     *
+     * This is a private property and is not meant to be used directly.
+     * @private
+     * @internal
+     */
+    context?: MultiStepFormContextResult<def, value>;
+  };
 }
-interface MultiStepFormSchemaOptions$1<TStep extends Step<TCasing>, TCasing extends CasingType, TStorageKey extends string, TFormAlias extends string, TFormEnabledFor extends MultiStepFormSchemaConfig.formEnabledFor<TResolvedStep>, TFormProps extends object, TResolvedStep extends ResolvedStep$1<TStep, TCasing> = ResolvedStep$1<TStep, TCasing>> extends MultiStepFormSchemaOptions<TStep, TCasing, TStorageKey>, MultiStepFormSchemaConfig.Form<TResolvedStep, TFormAlias, TFormEnabledFor, TFormProps> {}
-declare class MultiStepFormSchema$1<step extends Step<casing>, casing extends CasingType = DefaultCasing, storageKey extends string = DefaultStorageKey, formAlias extends string = MultiStepFormSchemaConfig.defaultFormAlias, formEnabledFor extends MultiStepFormSchemaConfig.formEnabledFor<resolvedStep$1> = MultiStepFormSchemaConfig.defaultEnabledFor, formProps extends object = ComponentPropsWithRef<'form'>, resolvedStep$1 extends ResolvedStep$1<step, casing> = ResolvedStep$1<step, casing>, stepNumbers extends StepNumbers<resolvedStep$1> = StepNumbers<resolvedStep$1>> extends MultiStepFormSchema<step, casing, ResolvedStep<step, casing>, StepNumbers<ResolvedStep<step, casing>>, storageKey> implements HelperFunctions<resolvedStep$1, stepNumbers> {
+declare class MultiStepFormSchema$1<const def extends StepSchema.Config, value extends steps.instantiateSteps<def> = steps.instantiateSteps<def>> extends MultiStepFormSchema<def, value> implements HelperFunctions<def, value> {
   #private;
-  stepSchema: MultiStepFormStepSchema$1<step, casing, storageKey, formAlias, formEnabledFor, formProps>;
-  constructor(config: MultiStepFormSchemaOptions$1<step, Constrain<casing, CasingType>, storageKey, formAlias, formEnabledFor, formProps>);
-  createComponent<chosenSteps extends HelperFnChosenSteps<resolvedStep$1, stepNumbers>, props = undefined>(options: CreateHelperFunctionOptionsBase<resolvedStep$1, stepNumbers, chosenSteps>, fn: CreateComponentCallback<resolvedStep$1, stepNumbers, chosenSteps, props>): CreatedMultiStepFormComponent<props>;
+  stepSchema: MultiStepFormStepSchema$1<def, value>;
+  readonly storage: MultiStepFormStorage<value, StepSchema.inferStorageKey<def>>;
+  readonly storageConfig: BaseStorageConfig<StepSchema.inferStorageKey<def>>;
+  readonly context: MultiStepFormContextResult<def, value>;
+  readonly formConfig: MultiStepFormSchemaConfig.FormConfig<def, value>;
+  constructor(config: MultiStepFormSchema$1.config<def, value>);
+  /**
+   * A helper function to add a form configuration to the {@linkcode MultiStepFormSchema}.
+   *
+   * By calling this function, you will have access to the create form component in all step
+   * utility functions.
+   *
+   * @example
+   * ```tsx
+   * const schema = createMultiStepFormSchema({
+   *   steps: {
+   *     step1: {
+   *       title: 'Step 1',
+   *       fields: {
+   *         firstName: {
+   *           defaultValue: '',
+   *         },
+   *       },
+   *     },
+   *   },
+   * }).withForm({
+   *   render(data) {
+   *     return (props: MyCustomProps) => {
+   *       return <form {...props}>{props.children}</form>;
+   *     };
+   *   },
+   * });
+   * ```
+   * @param config The form configuration.
+   * @returns A new {@linkcode MultiStepFormSchema} with the form configuration.
+   */
+  withForm<const formConfig extends MultiStepFormSchemaConfig.FormConfig<def, value>>(config: formConfig): MultiStepFormSchema$1<Expand<def & Readonly<{
+    form: formConfig;
+  }>>, Expand<steps._instantiateSteps<Expand<def & Readonly<{
+    form: formConfig;
+  }>>> extends infer T ? { [key in keyof T]: Expand<T[key] & (T extends {} ? key extends steps.StepNumbers<T> ? {
+    update: _jfdevelops_multi_step_form_core0.UpdateFn.stepSpecific<T, key, steps.StepNumbers<T>>;
+    reset: _jfdevelops_multi_step_form_core0.ResetFn.stepSpecific<T, key>;
+    createHelperFn: _jfdevelops_multi_step_form_core0.StepSpecificHelperFn<T, key>;
+  } & steps.ExtendedStepSpecificFunctions<t, T, key> : {} : {}) extends infer T_1 ? { [k in keyof T_1]: T_1[k] } : never> } : never>>;
+  withContext(): MultiStepFormSchema$1<def, value>;
+  createComponent<chosenSteps extends HelperFnChosenSteps.main<value, steps.StepNumbers<value>>, props = undefined>(options: HelperFn.BaseOptions<value, chosenSteps>, fn: CreateComponentCallback<value, chosenSteps, props>): CreatedMultiStepFormComponent<props>;
 }
-declare function createMultiStepFormSchema<step extends Step<casing>, casing extends CasingType = DefaultCasing, storageKey extends string = DefaultStorageKey, formAlias extends string = MultiStepFormSchemaConfig.defaultFormAlias, formEnabledFor extends MultiStepFormSchemaConfig.formEnabledFor<resolvedStep$1> = MultiStepFormSchemaConfig.defaultEnabledFor, formProps extends object = ComponentPropsWithRef<'form'>, resolvedStep$1 extends ResolvedStep$1<step, casing> = ResolvedStep$1<step, casing>, stepNumbers extends StepNumbers<resolvedStep$1> = StepNumbers<resolvedStep$1>>(options: MultiStepFormSchemaOptions$1<step, Constrain<casing, CasingType>, storageKey, formAlias, formEnabledFor, formProps>): MultiStepFormSchema$1<step, casing, storageKey, formAlias, formEnabledFor, formProps, resolvedStep$1, stepNumbers>;
+declare function createMultiStepFormSchema<const def extends StepSchema.Config, value extends steps.instantiateSteps<def> = steps.instantiateSteps<def>>(options: def): MultiStepFormSchema$1<def, value>;
 //#endregion
-export { AnyMultiStepFormSchema, MultiStepFormSchema$1 as MultiStepFormSchema, MultiStepFormSchemaOptions$1 as MultiStepFormSchemaOptions, createMultiStepFormSchema };
+export { MultiStepFormSchema$1 as MultiStepFormSchema, createMultiStepFormSchema };
 //# sourceMappingURL=schema.d.mts.map

package/dist/schema.mjs

@@ -1,17 +1,24 @@
+import { createMultiStepFormContext } from "./create-context.mjs";
+import { createComponent } from "./utils.mjs";
 import { MultiStepFormStepSchema as MultiStepFormStepSchema$1 } from "./step-schema.mjs";
-import { DEFAULT_CASING, MultiStepFormSchema, createCtx } from "@jfdevelops/multi-step-form-core";
+import { DEFAULT_CASING, DEFAULT_STORAGE_KEY, MultiStepFormSchema, MultiStepFormStorage } from "@jfdevelops/multi-step-form-core";
 import { MultiStepFormStepSchemaInternal } from "@jfdevelops/multi-step-form-core/_internals";
 
 //#region src/schema.ts
-var MultiStepFormSchema$1 = class extends MultiStepFormSchema {
+var MultiStepFormSchema$1 = class MultiStepFormSchema$1 extends MultiStepFormSchema {
 	stepSchema;
 	#internal;
+	storage;
+	storageConfig;
+	context = void 0;
+	formConfig = void 0;
 	constructor(config) {
-		const { nameTransformCasing = DEFAULT_CASING, storage, ...rest } = config;
+		const { nameTransformCasing = DEFAULT_CASING, steps: steps$1, form, storage, context } = config;
 		const options = {
+			steps: steps$1,
 			nameTransformCasing,
 			storage,
-			...rest
+			form
 		};
 		super(options);
 		this.stepSchema = new MultiStepFormStepSchema$1(options);
@@ -24,15 +31,85 @@ var MultiStepFormSchema$1 = class extends MultiStepFormSchema {
 				this.notify();
 			}
 		});
+		this.storageConfig = {
+			key: storage?.key ?? DEFAULT_STORAGE_KEY,
+			store: storage?.store,
+			throwWhenUndefined: storage?.throwWhenUndefined
+		};
+		this.storage = new MultiStepFormStorage({
+			data: this.stepSchema.value,
+			...this.storageConfig
+		});
+		if (context) this.context = context;
+		if (form) this.formConfig = form;
+	}
+	/**
+	* A helper function to add a form configuration to the {@linkcode MultiStepFormSchema}.
+	*
+	* By calling this function, you will have access to the create form component in all step
+	* utility functions.
+	*
+	* @example
+	* ```tsx
+	* const schema = createMultiStepFormSchema({
+	*   steps: {
+	*     step1: {
+	*       title: 'Step 1',
+	*       fields: {
+	*         firstName: {
+	*           defaultValue: '',
+	*         },
+	*       },
+	*     },
+	*   },
+	* }).withForm({
+	*   render(data) {
+	*     return (props: MyCustomProps) => {
+	*       return <form {...props}>{props.children}</form>;
+	*     };
+	*   },
+	* });
+	* ```
+	* @param config The form configuration.
+	* @returns A new {@linkcode MultiStepFormSchema} with the form configuration.
+	*/
+	withForm(config) {
+		const { key, store, throwWhenUndefined } = this.storageConfig;
+		return new MultiStepFormSchema$1({
+			steps: this.stepSchema.original,
+			form: config,
+			nameTransformCasing: this.stepSchema.defaultNameTransformationCasing,
+			storage: {
+				key,
+				store,
+				throwWhenUndefined
+			}
+		});
+	}
+	withContext() {
+		const context = createMultiStepFormContext(this);
+		return new MultiStepFormSchema$1({
+			steps: this.stepSchema.original,
+			form: this.formConfig,
+			nameTransformCasing: this.stepSchema.defaultNameTransformationCasing,
+			storage: {
+				key: this.storageConfig.key,
+				store: this.storageConfig.store,
+				throwWhenUndefined: this.storageConfig.throwWhenUndefined
+			},
+			context
+		});
 	}
 	createComponent(options, fn) {
-		const { stepData } = options;
-		const ctx = createCtx(this.stepSchema.value, stepData);
-		return ((props) => fn({
-			ctx,
-			update: this.#internal.createHelperFnInputUpdate(stepData),
-			reset: this.#internal.createHelperFnInputReset(stepData)
-		}, props));
+		return createComponent({
+			fn,
+			input: ({ stepData }) => ({
+				reset: this.#internal.createHelperFnInputReset(stepData),
+				update: this.#internal.createHelperFnInputUpdate(stepData)
+			}),
+			options,
+			value: this.stepSchema.value
+		});
 	}
 };
 function createMultiStepFormSchema(options) {

package/dist/schema.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"schema.mjs","names":["MultiStepFormSchema","MultiStepFormSchemaCore","#internal","MultiStepFormStepSchema"],"sources":["../src/schema.ts"],"sourcesContent":["import {\n  type CasingType,\n  type Constrain,\n  createCtx,\n  type CreateHelperFunctionOptionsBase,\n  DEFAULT_CASING,\n  type DefaultCasing,\n  type DefaultStorageKey,\n  type HelperFnChosenSteps,\n  type MultiStepFormSchemaOptions as MultiStepFormSchemaBaseOptions,\n  MultiStepFormSchema as MultiStepFormSchemaCore,\n  type ResolvedStep as ResolvedStepCore,\n  type Step,\n  type StepNumbers,\n} from '@jfdevelops/multi-step-form-core';\nimport type { ComponentPropsWithRef } from 'react';\nimport { MultiStepFormSchemaConfig } from './form-config';\nimport {\n  type CreateComponentCallback,\n  type CreatedMultiStepFormComponent,\n  type HelperFunctions,\n  MultiStepFormStepSchema,\n  type ResolvedStep,\n} from './step-schema';\nimport { MultiStepFormStepSchemaInternal } from '@jfdevelops/multi-step-form-core/_internals';\n\n// export type AnyMultiStepFormSchema = MultiStepFormSchema<any, any, any>;\nexport type AnyMultiStepFormSchema = { [x: string]: any };\n\n// Helper inference types for `AnyMultiStepFormSchema`\nexport namespace MultiStepFormSchema {\n  /**\n   * Infer the resolved step from a {@linkcode MultiStepFormSchema}.\n   */\n  export type resolvedStep<T extends AnyMultiStepFormSchema> =\n    T['stepSchema']['value'];\n  /**\n   * Infer the {@linkcode MultiStepFormSchema}'s step numbers.\n   */\n  export type stepNumbers<T extends AnyMultiStepFormSchema> = StepNumbers<\n    resolvedStep<T>\n  >;\n  /**\n   * Get the data for a specific step from a {@linkcode MultiStepFormSchema}.\n   */\n  export type getData<\n    T extends AnyMultiStepFormSchema,\n    TTarget extends keyof resolvedStep<T>\n  > = resolvedStep<T>[TTarget];\n}\n\nexport interface MultiStepFormSchemaOptions<\n  TStep extends Step<TCasing>,\n  TCasing extends CasingType,\n  TStorageKey extends string,\n  TFormAlias extends string,\n  TFormEnabledFor extends MultiStepFormSchemaConfig.formEnabledFor<TResolvedStep>,\n  TFormProps extends object,\n  TResolvedStep extends ResolvedStep<TStep, TCasing> = ResolvedStep<\n    TStep,\n    TCasing\n  >\n> extends MultiStepFormSchemaBaseOptions<TStep, TCasing, TStorageKey>,\n    MultiStepFormSchemaConfig.Form<\n      TResolvedStep,\n      TFormAlias,\n      TFormEnabledFor,\n      TFormProps\n    > {}\n\nexport class MultiStepFormSchema<\n    step extends Step<casing>,\n    casing extends CasingType = DefaultCasing,\n    storageKey extends string = DefaultStorageKey,\n    formAlias extends string = MultiStepFormSchemaConfig.defaultFormAlias,\n    formEnabledFor extends MultiStepFormSchemaConfig.formEnabledFor<resolvedStep> = MultiStepFormSchemaConfig.defaultEnabledFor,\n    formProps extends object = ComponentPropsWithRef<'form'>,\n    resolvedStep extends ResolvedStep<step, casing> = ResolvedStep<\n      step,\n      casing\n    >,\n    stepNumbers extends StepNumbers<resolvedStep> = StepNumbers<resolvedStep>\n  >\n  extends MultiStepFormSchemaCore<\n    step,\n    casing,\n    ResolvedStepCore<step, casing>,\n    StepNumbers<ResolvedStepCore<step, casing>>,\n    storageKey\n  >\n  implements HelperFunctions<resolvedStep, stepNumbers>\n{\n  // @ts-ignore\n  stepSchema: MultiStepFormStepSchema<\n    step,\n    casing,\n    storageKey,\n    formAlias,\n    formEnabledFor,\n    formProps\n  >;\n  readonly #internal: MultiStepFormStepSchemaInternal<\n    step,\n    casing,\n    resolvedStep,\n    stepNumbers\n  >;\n\n  constructor(\n    config: MultiStepFormSchemaOptions<\n      step,\n      Constrain<casing, CasingType>,\n      storageKey,\n      formAlias,\n      formEnabledFor,\n      formProps\n    >\n  ) {\n    const { nameTransformCasing = DEFAULT_CASING, storage, ...rest } = config;\n    const options = { nameTransformCasing, storage, ...rest };\n\n    super(options);\n\n    this.stepSchema = new MultiStepFormStepSchema<\n      step,\n      casing,\n      storageKey,\n      formAlias,\n      formEnabledFor,\n      formProps\n    >(options);\n    this.#internal = new MultiStepFormStepSchemaInternal<\n      step,\n      casing,\n      resolvedStep,\n      stepNumbers\n    >({\n      originalValue: this.stepSchema.original,\n      getValue: () => this.stepSchema.value as never,\n      setValue: (value) => {\n        this.stepSchema.value = { ...value } as never;\n        this.storage.add(value);\n        this.notify();\n      },\n    });\n  }\n\n  createComponent<\n    chosenSteps extends HelperFnChosenSteps<resolvedStep, stepNumbers>,\n    props = undefined\n  >(\n    options: CreateHelperFunctionOptionsBase<\n      resolvedStep,\n      stepNumbers,\n      chosenSteps\n    >,\n    fn: CreateComponentCallback<resolvedStep, stepNumbers, chosenSteps, props>\n  ): CreatedMultiStepFormComponent<props> {\n    const { stepData } = options;\n    const ctx = createCtx<resolvedStep, stepNumbers, chosenSteps>(\n      this.stepSchema.value as never,\n      stepData\n    ) as never;\n\n    return ((props?: props) =>\n      fn(\n        {\n          ctx,\n          update: this.#internal.createHelperFnInputUpdate(stepData),\n          reset: this.#internal.createHelperFnInputReset(stepData),\n        },\n        props as any\n      )) as any;\n  }\n}\n\nexport function createMultiStepFormSchema<\n  step extends Step<casing>,\n  casing extends CasingType = DefaultCasing,\n  storageKey extends string = DefaultStorageKey,\n  formAlias extends string = MultiStepFormSchemaConfig.defaultFormAlias,\n  formEnabledFor extends MultiStepFormSchemaConfig.formEnabledFor<resolvedStep> = MultiStepFormSchemaConfig.defaultEnabledFor,\n  formProps extends object = ComponentPropsWithRef<'form'>,\n  resolvedStep extends ResolvedStep<step, casing> = ResolvedStep<step, casing>,\n  stepNumbers extends StepNumbers<resolvedStep> = StepNumbers<resolvedStep>\n>(\n  options: MultiStepFormSchemaOptions<\n    step,\n    Constrain<casing, CasingType>,\n    storageKey,\n    formAlias,\n    formEnabledFor,\n    formProps\n  >\n) {\n  return new MultiStepFormSchema<\n    step,\n    casing,\n    storageKey,\n    formAlias,\n    formEnabledFor,\n    formProps,\n    resolvedStep,\n    stepNumbers\n  >(options);\n}\n"],"mappings":";;;;;AAsEA,IAAaA,wBAAb,cAaUC,oBAQV;CAEE;CAQA,CAASC;CAOT,YACE,QAQA;EACA,MAAM,EAAE,sBAAsB,gBAAgB,SAAS,GAAG,SAAS;EACnE,MAAM,UAAU;GAAE;GAAqB;GAAS,GAAG;GAAM;AAEzD,QAAM,QAAQ;AAEd,OAAK,aAAa,IAAIC,0BAOpB,QAAQ;AACV,QAAKD,WAAY,IAAI,gCAKnB;GACA,eAAe,KAAK,WAAW;GAC/B,gBAAgB,KAAK,WAAW;GAChC,WAAW,UAAU;AACnB,SAAK,WAAW,QAAQ,EAAE,GAAG,OAAO;AACpC,SAAK,QAAQ,IAAI,MAAM;AACvB,SAAK,QAAQ;;GAEhB,CAAC;;CAGJ,gBAIE,SAKA,IACsC;EACtC,MAAM,EAAE,aAAa;EACrB,MAAM,MAAM,UACV,KAAK,WAAW,OAChB,SACD;AAED,WAAS,UACP,GACE;GACE;GACA,QAAQ,MAAKA,SAAU,0BAA0B,SAAS;GAC1D,OAAO,MAAKA,SAAU,yBAAyB,SAAS;GACzD,EACD,MACD;;;AAIP,SAAgB,0BAUd,SAQA;AACA,QAAO,IAAIF,sBAST,QAAQ"}
+{"version":3,"file":"schema.mjs","names":["MultiStepFormSchema","MultiStepFormSchemaCore","#internal","MultiStepFormStepSchema"],"sources":["../src/schema.ts"],"sourcesContent":["import {\n  type BaseStorageConfig,\n  DEFAULT_CASING,\n  DEFAULT_STORAGE_KEY,\n  type Expand,\n  type HelperFn,\n  type HelperFnChosenSteps,\n  MultiStepFormSchema as MultiStepFormSchemaCore,\n  MultiStepFormStorage,\n  type steps,\n} from '@jfdevelops/multi-step-form-core';\nimport {\n  MultiStepFormStepSchemaInternal,\n  type StepSchema,\n} from '@jfdevelops/multi-step-form-core/_internals';\nimport {\n  createMultiStepFormContext,\n  type MultiStepFormContextResult,\n} from './create-context';\nimport { MultiStepFormSchemaConfig } from './form-config';\nimport { type HelperFunctions, MultiStepFormStepSchema } from './step-schema';\nimport { createComponent, type CreateComponentCallback } from './utils';\n\n// Helper inference types for `AnyMultiStepFormSchema`\nexport namespace MultiStepFormSchema {\n  export type config<\n    def extends StepSchema.Config,\n    value extends steps.instantiateSteps<def> = steps.instantiateSteps<def>,\n  > = MultiStepFormStepSchema.config<def, value> & {\n    /**\n     * The React context for the multi step form.\n     *\n     * This is a private property and is not meant to be used directly.\n     * @private\n     * @internal\n     */\n    context?: MultiStepFormContextResult<def, value>;\n  };\n}\n\nexport class MultiStepFormSchema<\n  const def extends StepSchema.Config,\n  value extends steps.instantiateSteps<def> = steps.instantiateSteps<def>,\n>\n  extends MultiStepFormSchemaCore<def, value>\n  implements HelperFunctions<def, value>\n{\n  stepSchema: MultiStepFormStepSchema<def, value>;\n  readonly #internal: MultiStepFormStepSchemaInternal<def, value>;\n  override readonly storage: MultiStepFormStorage<\n    value,\n    StepSchema.inferStorageKey<def>\n  >;\n  override readonly storageConfig: BaseStorageConfig<\n    StepSchema.inferStorageKey<def>\n  >;\n\n  readonly context: MultiStepFormContextResult<def, value> = undefined as never;\n  readonly formConfig: MultiStepFormSchemaConfig.FormConfig<def, value> =\n    undefined as never;\n\n  constructor(config: MultiStepFormSchema.config<def, value>) {\n    const {\n      nameTransformCasing = DEFAULT_CASING,\n      steps,\n      form,\n      storage,\n      context,\n    } = config;\n    const options = {\n      steps,\n      nameTransformCasing,\n      storage,\n      form,\n    } as MultiStepFormStepSchema.config<def, value>;\n\n    super(options);\n\n    this.stepSchema = new MultiStepFormStepSchema(options);\n    this.#internal = new MultiStepFormStepSchemaInternal({\n      originalValue: this.stepSchema.original,\n      getValue: () => this.stepSchema.value,\n      setValue: (value) => {\n        this.stepSchema.value = { ...value };\n        this.storage.add(value);\n        this.notify();\n      },\n    });\n    this.storageConfig = {\n      key: (storage?.key ??\n        DEFAULT_STORAGE_KEY) as StepSchema.inferStorageKey<def>,\n      store: storage?.store,\n      throwWhenUndefined: storage?.throwWhenUndefined,\n    };\n    this.storage = new MultiStepFormStorage({\n      data: this.stepSchema.value,\n      ...this.storageConfig,\n    });\n    if (context) {\n      this.context = context;\n    }\n\n    if (form) {\n      this.formConfig = form;\n    }\n  }\n\n  /**\n   * A helper function to add a form configuration to the {@linkcode MultiStepFormSchema}.\n   *\n   * By calling this function, you will have access to the create form component in all step\n   * utility functions.\n   *\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   *   },\n   * }).withForm({\n   *   render(data) {\n   *     return (props: MyCustomProps) => {\n   *       return <form {...props}>{props.children}</form>;\n   *     };\n   *   },\n   * });\n   * ```\n   * @param config The form configuration.\n   * @returns A new {@linkcode MultiStepFormSchema} with the form configuration.\n   */\n  withForm<\n    const formConfig extends MultiStepFormSchemaConfig.FormConfig<def, value>,\n  >(config: formConfig) {\n    const { key, store, throwWhenUndefined } = this.storageConfig;\n\n    return new MultiStepFormSchema<\n      Expand<def & Readonly<{ form: formConfig }>>\n    >({\n      steps: this.stepSchema.original,\n      form: config,\n      nameTransformCasing: this.stepSchema.defaultNameTransformationCasing,\n      storage: {\n        key,\n        store,\n        throwWhenUndefined: throwWhenUndefined,\n      },\n    } as never);\n  }\n\n  withContext() {\n    const context = createMultiStepFormContext(this);\n\n    return new MultiStepFormSchema<def, value>({\n      steps: this.stepSchema.original,\n      form: this.formConfig,\n      nameTransformCasing: this.stepSchema.defaultNameTransformationCasing,\n      storage: {\n        key: this.storageConfig.key,\n        store: this.storageConfig.store,\n        throwWhenUndefined: this.storageConfig.throwWhenUndefined,\n      },\n      context,\n    } as never);\n  }\n\n  createComponent<\n    chosenSteps extends HelperFnChosenSteps.main<\n      value,\n      steps.StepNumbers<value>\n    >,\n    props = undefined,\n  >(\n    options: HelperFn.BaseOptions<value, chosenSteps>,\n    fn: CreateComponentCallback<value, chosenSteps, props>\n  ) {\n    return createComponent({\n      fn,\n      input: ({ stepData }) => ({\n        reset: this.#internal.createHelperFnInputReset(stepData),\n        update: this.#internal.createHelperFnInputUpdate(stepData),\n      }),\n      options,\n      value: this.stepSchema.value,\n    });\n  }\n}\n\nexport function createMultiStepFormSchema<\n  const def extends StepSchema.Config,\n  value extends steps.instantiateSteps<def> = steps.instantiateSteps<def>,\n>(options: def) {\n  return new MultiStepFormSchema<def, value>(options);\n}\n"],"mappings":";;;;;;;AAwCA,IAAaA,wBAAb,MAAaA,8BAIHC,oBAEV;CACE;CACA,CAASC;CACT,AAAkB;CAIlB,AAAkB;CAIlB,AAAS,UAAkD;CAC3D,AAAS,aACP;CAEF,YAAY,QAAgD;EAC1D,MAAM,EACJ,sBAAsB,gBACtB,gBACA,MACA,SACA,YACE;EACJ,MAAM,UAAU;GACd;GACA;GACA;GACA;GACD;AAED,QAAM,QAAQ;AAEd,OAAK,aAAa,IAAIC,0BAAwB,QAAQ;AACtD,QAAKD,WAAY,IAAI,gCAAgC;GACnD,eAAe,KAAK,WAAW;GAC/B,gBAAgB,KAAK,WAAW;GAChC,WAAW,UAAU;AACnB,SAAK,WAAW,QAAQ,EAAE,GAAG,OAAO;AACpC,SAAK,QAAQ,IAAI,MAAM;AACvB,SAAK,QAAQ;;GAEhB,CAAC;AACF,OAAK,gBAAgB;GACnB,KAAM,SAAS,OACb;GACF,OAAO,SAAS;GAChB,oBAAoB,SAAS;GAC9B;AACD,OAAK,UAAU,IAAI,qBAAqB;GACtC,MAAM,KAAK,WAAW;GACtB,GAAG,KAAK;GACT,CAAC;AACF,MAAI,QACF,MAAK,UAAU;AAGjB,MAAI,KACF,MAAK,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkCtB,SAEE,QAAoB;EACpB,MAAM,EAAE,KAAK,OAAO,uBAAuB,KAAK;AAEhD,SAAO,IAAIF,sBAET;GACA,OAAO,KAAK,WAAW;GACvB,MAAM;GACN,qBAAqB,KAAK,WAAW;GACrC,SAAS;IACP;IACA;IACoB;IACrB;GACF,CAAU;;CAGb,cAAc;EACZ,MAAM,UAAU,2BAA2B,KAAK;AAEhD,SAAO,IAAIA,sBAAgC;GACzC,OAAO,KAAK,WAAW;GACvB,MAAM,KAAK;GACX,qBAAqB,KAAK,WAAW;GACrC,SAAS;IACP,KAAK,KAAK,cAAc;IACxB,OAAO,KAAK,cAAc;IAC1B,oBAAoB,KAAK,cAAc;IACxC;GACD;GACD,CAAU;;CAGb,gBAOE,SACA,IACA;AACA,SAAO,gBAAgB;GACrB;GACA,QAAQ,EAAE,gBAAgB;IACxB,OAAO,MAAKE,SAAU,yBAAyB,SAAS;IACxD,QAAQ,MAAKA,SAAU,0BAA0B,SAAS;IAC3D;GACD;GACA,OAAO,KAAK,WAAW;GACxB,CAAC;;;AAIN,SAAgB,0BAGd,SAAc;AACd,QAAO,IAAIF,sBAAgC,QAAQ"}

package/dist/selector.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"selector.cjs","names":["createUseSelector","Selector: component<TCurrentStep>","MultiStepFormLogger","selector","Fragment"],"sources":["../src/selector.tsx"],"sourcesContent":["import {\n  AnyResolvedStep,\n  Expand,\n  MultiStepFormLogger,\n  type CurrentStepHelperFnCtx,\n} from '@jfdevelops/multi-step-form-core';\nimport { createElement, useMemo } from 'react';\nimport { Fragment } from 'react/jsx-runtime';\nimport {\n  createUseSelector,\n  SelectorFn,\n  type DebugOptions,\n} from './hooks/use-selector';\n\nexport namespace selector {\n  export type props<TCurrentStep extends AnyResolvedStep, TSelected> = {\n    selector: SelectorFn<TCurrentStep, TSelected>;\n    children?: (selected: TSelected) => React.ReactNode;\n    /**\n     * Optional debug options to customize logging behavior.\n     */\n    debug?: boolean | DebugOptions<TSelected>;\n  };\n  export type component<TCurrentStep extends AnyResolvedStep> =\n    /**\n     * A component for reactively displaying a value from the form context.\n     * Unlike `useSelector`, this component only re-renders itself, not the parent component.\n     * Use this when you want to display a reactive value without causing parent re-renders.\n     *\n     * @param props - The props for the Selector component.\n     *\n     * @example\n     * ```tsx\n     * // With no debug options (default behavior)\n     * <Selector selector={(ctx) => ctx.step1.fields.firstName.defaultValue}>\n     *   {(value) => <p>First name: {value}</p>}\n     * </Selector>\n     * ```\n\n     * @example\n     * ```tsx\n     * // With debug enabled\n     *  <Selector selector={(ctx) => ctx.step1.fields.firstName.defaultValue} debug>\n     *   {(value) => <p>First name: {value}</p>}\n     * </Selector>\n     * ```\n     *\n     * @example\n     * ```tsx\n     * // With custom debug options\n     * <Selector\n     *   selector={(ctx) => ctx.step1.fields.firstName.defaultValue}\n     *   debug={{\n     *     onRender: (value) => console.log('Rendered with:', value),\n     *     onValueChanged: (oldVal, newVal) => console.log('Changed:', oldVal, '->', newVal)\n     *   }}\n     * >\n     *   {(value) => <p>First name: {value}</p>}\n     * </Selector>\n     * ```\n     */\n    <TSelected>(props: props<TCurrentStep, TSelected>) => React.ReactNode;\n\n  export function create<TCurrentStep extends AnyResolvedStep>(\n    createCtx: () => Expand<CurrentStepHelperFnCtx<TCurrentStep>>,\n    subscribe: (listener: () => void) => () => void\n  ) {\n    const useSelector = createUseSelector(createCtx, subscribe);\n    const Selector: component<TCurrentStep> = ({\n      selector,\n      children,\n      debug,\n    }) => {\n      const isDebugEnabled =\n        typeof debug === 'boolean' ? debug : debug !== undefined;\n      const debugOptions = typeof debug === 'object' ? debug : undefined;\n      const prefix = debugOptions?.prefix;\n\n      const logger = useMemo(() => {\n        if (!isDebugEnabled) {\n          return undefined;\n        }\n\n        return new MultiStepFormLogger({\n          debug: true,\n          prefix: (defaultValue) => {\n            const defaultPrefix = `${defaultValue}-Selector`;\n            console.log(prefix);\n\n            // If no prefix is provided, use default\n            if (!prefix) {\n              return defaultPrefix;\n            }\n\n            // If prefix is a string, use it directly\n            if (typeof prefix === 'string') {\n              return prefix;\n            }\n\n            // If prefix is a function, call it with the default prefix\n            if (typeof prefix === 'function') {\n              return prefix(defaultValue);\n            }\n\n            // If prefix is an object with action/value, handle prepend/append\n            if (typeof prefix === 'object') {\n              const { action = 'prepend', value, delimiter = '-' } = prefix;\n              const resolvedValue =\n                typeof value === 'function' ? value(defaultValue) : value;\n\n              if (action === 'prepend') {\n                return `${resolvedValue}${delimiter}${defaultPrefix}`;\n              }\n\n              if (action === 'append') {\n                return `${defaultPrefix}${delimiter}${resolvedValue}`;\n              }\n\n              return defaultPrefix;\n            }\n\n            return defaultPrefix;\n          },\n        });\n      }, [isDebugEnabled, prefix]);\n\n      const selected = useSelector(selector, logger, debugOptions);\n\n      logger?.info(\n        debugOptions?.onRender?.(selected) ??\n          `Rendering with selected: ${JSON.stringify(selected)}`\n      );\n\n      if (children) {\n        return createElement(Fragment, null, children(selected));\n      }\n      return createElement(Fragment, null, String(selected ?? ''));\n    };\n\n    // Remove memo to test if it's causing the issue\n    // The memo was meant to prevent re-renders when parent re-renders,\n    // but useSyncExternalStore should handle reactivity\n    return Selector;\n  }\n}\n"],"mappings":";;;;;;;;CA+DS,SAAS,OACd,WACA,WACA;EACA,MAAM,cAAcA,uCAAkB,WAAW,UAAU;EAC3D,MAAMC,YAAqC,EACzC,sBACA,UACA,YACI;GACJ,MAAM,iBACJ,OAAO,UAAU,YAAY,QAAQ,UAAU;GACjD,MAAM,eAAe,OAAO,UAAU,WAAW,QAAQ;GACzD,MAAM,SAAS,cAAc;GAE7B,MAAM,kCAAuB;AAC3B,QAAI,CAAC,eACH;AAGF,WAAO,IAAIC,sDAAoB;KAC7B,OAAO;KACP,SAAS,iBAAiB;MACxB,MAAM,gBAAgB,GAAG,aAAa;AACtC,cAAQ,IAAI,OAAO;AAGnB,UAAI,CAAC,OACH,QAAO;AAIT,UAAI,OAAO,WAAW,SACpB,QAAO;AAIT,UAAI,OAAO,WAAW,WACpB,QAAO,OAAO,aAAa;AAI7B,UAAI,OAAO,WAAW,UAAU;OAC9B,MAAM,EAAE,SAAS,WAAW,OAAO,YAAY,QAAQ;OACvD,MAAM,gBACJ,OAAO,UAAU,aAAa,MAAM,aAAa,GAAG;AAEtD,WAAI,WAAW,UACb,QAAO,GAAG,gBAAgB,YAAY;AAGxC,WAAI,WAAW,SACb,QAAO,GAAG,gBAAgB,YAAY;AAGxC,cAAO;;AAGT,aAAO;;KAEV,CAAC;MACD,CAAC,gBAAgB,OAAO,CAAC;GAE5B,MAAM,WAAW,YAAYC,YAAU,QAAQ,aAAa;AAE5D,WAAQ,KACN,cAAc,WAAW,SAAS,IAChC,4BAA4B,KAAK,UAAU,SAAS,GACvD;AAED,OAAI,SACF,iCAAqBC,4BAAU,MAAM,SAAS,SAAS,CAAC;AAE1D,mCAAqBA,4BAAU,MAAM,OAAO,YAAY,GAAG,CAAC;;AAM9D,SAAO"}
+{"version":3,"file":"selector.cjs","names":["createUseSelector","Selector: component<steps>","MultiStepFormLogger","selector","Fragment"],"sources":["../src/selector.tsx"],"sourcesContent":["import {\n  type Expand,\n  type HelperFn,\n  MultiStepFormLogger,\n  type steps,\n} from '@jfdevelops/multi-step-form-core';\nimport { createElement, useMemo } from 'react';\nimport { Fragment } from 'react/jsx-runtime';\nimport {\n  createUseSelector,\n  type DebugOptions,\n  type SelectorFn,\n} from './hooks/use-selector';\n\nexport namespace selector {\n  export type props<steps extends steps.instantiateSteps, selected> = {\n    selector: SelectorFn<steps, selected>;\n    children?: (selected: selected) => React.ReactNode;\n    /**\n     * Optional debug options to customize logging behavior.\n     */\n    debug?: boolean | DebugOptions<selected>;\n  };\n  export type component<steps extends steps.instantiateSteps> =\n    /**\n     * A component for reactively displaying a value from the form context.\n     * Unlike `useSelector`, this component only re-renders itself, not the parent component.\n     * Use this when you want to display a reactive value without causing parent re-renders.\n     *\n     * @param props - The props for the Selector component.\n     *\n     * @example\n     * ```tsx\n     * // With no debug options (default behavior)\n     * <Selector selector={(ctx) => ctx.step1.fields.firstName.defaultValue}>\n     *   {(value) => <p>First name: {value}</p>}\n     * </Selector>\n     * ```\n\n     * @example\n     * ```tsx\n     * // With debug enabled\n     *  <Selector selector={(ctx) => ctx.step1.fields.firstName.defaultValue} debug>\n     *   {(value) => <p>First name: {value}</p>}\n     * </Selector>\n     * ```\n     *\n     * @example\n     * ```tsx\n     * // With custom debug options\n     * <Selector\n     *   selector={(ctx) => ctx.step1.fields.firstName.defaultValue}\n     *   debug={{\n     *     onRender: (value) => console.log('Rendered with:', value),\n     *     onValueChanged: (oldVal, newVal) => console.log('Changed:', oldVal, '->', newVal)\n     *   }}\n     * >\n     *   {(value) => <p>First name: {value}</p>}\n     * </Selector>\n     * ```\n     */\n    <selected>(props: props<steps, selected>) => React.ReactNode;\n\n  export function create<steps extends steps.instantiateSteps>(\n    createCtx: () => Expand<\n      HelperFn.buildCtx<steps, [steps.StepNumbers<steps>]>\n    >,\n    subscribe: (listener: () => void) => () => void\n  ) {\n    const useSelector = createUseSelector(createCtx, subscribe);\n    const Selector: component<steps> = ({ selector, children, debug }) => {\n      const isDebugEnabled =\n        typeof debug === 'boolean' ? debug : debug !== undefined;\n      const debugOptions = typeof debug === 'object' ? debug : undefined;\n      const prefix = debugOptions?.prefix;\n\n      const logger = useMemo(() => {\n        if (!isDebugEnabled) {\n          return undefined;\n        }\n\n        return new MultiStepFormLogger({\n          debug: true,\n          prefix: (defaultValue) => {\n            const defaultPrefix = `${defaultValue}-Selector`;\n            console.log(prefix);\n\n            // If no prefix is provided, use default\n            if (!prefix) {\n              return defaultPrefix;\n            }\n\n            // If prefix is a string, use it directly\n            if (typeof prefix === 'string') {\n              return prefix;\n            }\n\n            // If prefix is a function, call it with the default prefix\n            if (typeof prefix === 'function') {\n              return prefix(defaultValue);\n            }\n\n            // If prefix is an object with action/value, handle prepend/append\n            if (typeof prefix === 'object') {\n              const { action = 'prepend', value, delimiter = '-' } = prefix;\n              const resolvedValue =\n                typeof value === 'function' ? value(defaultValue) : value;\n\n              if (action === 'prepend') {\n                return `${resolvedValue}${delimiter}${defaultPrefix}`;\n              }\n\n              if (action === 'append') {\n                return `${defaultPrefix}${delimiter}${resolvedValue}`;\n              }\n\n              return defaultPrefix;\n            }\n\n            return defaultPrefix;\n          },\n        });\n      }, [isDebugEnabled, prefix]);\n\n      const selected = useSelector(selector, logger, debugOptions);\n\n      logger?.info(\n        debugOptions?.onRender?.(selected) ??\n          `Rendering with selected: ${JSON.stringify(selected)}`\n      );\n\n      if (children) {\n        return createElement(Fragment, null, children(selected));\n      }\n      return createElement(Fragment, null, String(selected ?? ''));\n    };\n\n    // Remove memo to test if it's causing the issue\n    // The memo was meant to prevent re-renders when parent re-renders,\n    // but useSyncExternalStore should handle reactivity\n    return Selector;\n  }\n}\n"],"mappings":";;;;;;;;CA+DS,SAAS,OACd,WAGA,WACA;EACA,MAAM,cAAcA,uCAAkB,WAAW,UAAU;EAC3D,MAAMC,YAA8B,EAAE,sBAAU,UAAU,YAAY;GACpE,MAAM,iBACJ,OAAO,UAAU,YAAY,QAAQ,UAAU;GACjD,MAAM,eAAe,OAAO,UAAU,WAAW,QAAQ;GACzD,MAAM,SAAS,cAAc;GAE7B,MAAM,kCAAuB;AAC3B,QAAI,CAAC,eACH;AAGF,WAAO,IAAIC,sDAAoB;KAC7B,OAAO;KACP,SAAS,iBAAiB;MACxB,MAAM,gBAAgB,GAAG,aAAa;AACtC,cAAQ,IAAI,OAAO;AAGnB,UAAI,CAAC,OACH,QAAO;AAIT,UAAI,OAAO,WAAW,SACpB,QAAO;AAIT,UAAI,OAAO,WAAW,WACpB,QAAO,OAAO,aAAa;AAI7B,UAAI,OAAO,WAAW,UAAU;OAC9B,MAAM,EAAE,SAAS,WAAW,OAAO,YAAY,QAAQ;OACvD,MAAM,gBACJ,OAAO,UAAU,aAAa,MAAM,aAAa,GAAG;AAEtD,WAAI,WAAW,UACb,QAAO,GAAG,gBAAgB,YAAY;AAGxC,WAAI,WAAW,SACb,QAAO,GAAG,gBAAgB,YAAY;AAGxC,cAAO;;AAGT,aAAO;;KAEV,CAAC;MACD,CAAC,gBAAgB,OAAO,CAAC;GAE5B,MAAM,WAAW,YAAYC,YAAU,QAAQ,aAAa;AAE5D,WAAQ,KACN,cAAc,WAAW,SAAS,IAChC,4BAA4B,KAAK,UAAU,SAAS,GACvD;AAED,OAAI,SACF,iCAAqBC,4BAAU,MAAM,SAAS,SAAS,CAAC;AAE1D,mCAAqBA,4BAAU,MAAM,OAAO,YAAY,GAAG,CAAC;;AAM9D,SAAO"}

package/dist/selector.d.cts

@@ -1,17 +1,17 @@
 import { DebugOptions, SelectorFn } from "./hooks/use-selector.cjs";
-import { AnyResolvedStep, CurrentStepHelperFnCtx, Expand } from "@jfdevelops/multi-step-form-core";
+import { Expand, HelperFn } from "@jfdevelops/multi-step-form-core";
 
 //#region src/selector.d.ts
 declare namespace selector {
-  type props<TCurrentStep extends AnyResolvedStep, TSelected> = {
-    selector: SelectorFn<TCurrentStep, TSelected>;
-    children?: (selected: TSelected) => React.ReactNode;
+  type props<steps$1 extends steps$1.instantiateSteps, selected> = {
+    selector: SelectorFn<steps$1, selected>;
+    children?: (selected: selected) => React.ReactNode;
     /**
      * Optional debug options to customize logging behavior.
      */
-    debug?: boolean | DebugOptions<TSelected>;
+    debug?: boolean | DebugOptions<selected>;
   };
-  type component<TCurrentStep extends AnyResolvedStep> =
+  type component<steps$1 extends steps$1.instantiateSteps> =
   /**
    * A component for reactively displaying a value from the form context.
    * Unlike `useSelector`, this component only re-renders itself, not the parent component.
@@ -48,8 +48,8 @@ declare namespace selector {
    * </Selector>
    * ```
    */
-  <TSelected>(props: props<TCurrentStep, TSelected>) => React.ReactNode;
-  function create<TCurrentStep extends AnyResolvedStep>(createCtx: () => Expand<CurrentStepHelperFnCtx<TCurrentStep>>, subscribe: (listener: () => void) => () => void): component<TCurrentStep>;
+  <selected>(props: props<steps$1, selected>) => React.ReactNode;
+  function create<steps$1 extends steps$1.instantiateSteps>(createCtx: () => Expand<HelperFn.buildCtx<steps$1, [steps$1.StepNumbers<steps$1>]>>, subscribe: (listener: () => void) => () => void): component<steps$1>;
 }
 //#endregion
 export { selector };

package/dist/selector.d.mts

@@ -1,17 +1,17 @@
 import { DebugOptions, SelectorFn } from "./hooks/use-selector.mjs";
-import { AnyResolvedStep, CurrentStepHelperFnCtx, Expand } from "@jfdevelops/multi-step-form-core";
+import { Expand, HelperFn } from "@jfdevelops/multi-step-form-core";
 
 //#region src/selector.d.ts
 declare namespace selector {
-  type props<TCurrentStep extends AnyResolvedStep, TSelected> = {
-    selector: SelectorFn<TCurrentStep, TSelected>;
-    children?: (selected: TSelected) => React.ReactNode;
+  type props<steps$1 extends steps$1.instantiateSteps, selected> = {
+    selector: SelectorFn<steps$1, selected>;
+    children?: (selected: selected) => React.ReactNode;
     /**
      * Optional debug options to customize logging behavior.
      */
-    debug?: boolean | DebugOptions<TSelected>;
+    debug?: boolean | DebugOptions<selected>;
   };
-  type component<TCurrentStep extends AnyResolvedStep> =
+  type component<steps$1 extends steps$1.instantiateSteps> =
   /**
    * A component for reactively displaying a value from the form context.
    * Unlike `useSelector`, this component only re-renders itself, not the parent component.
@@ -48,8 +48,8 @@ declare namespace selector {
    * </Selector>
    * ```
    */
-  <TSelected>(props: props<TCurrentStep, TSelected>) => React.ReactNode;
-  function create<TCurrentStep extends AnyResolvedStep>(createCtx: () => Expand<CurrentStepHelperFnCtx<TCurrentStep>>, subscribe: (listener: () => void) => () => void): component<TCurrentStep>;
+  <selected>(props: props<steps$1, selected>) => React.ReactNode;
+  function create<steps$1 extends steps$1.instantiateSteps>(createCtx: () => Expand<HelperFn.buildCtx<steps$1, [steps$1.StepNumbers<steps$1>]>>, subscribe: (listener: () => void) => () => void): component<steps$1>;
 }
 //#endregion
 export { selector };

package/dist/selector.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"selector.mjs","names":["createCtx","Selector: component<TCurrentStep>","selector"],"sources":["../src/selector.tsx"],"sourcesContent":["import {\n  AnyResolvedStep,\n  Expand,\n  MultiStepFormLogger,\n  type CurrentStepHelperFnCtx,\n} from '@jfdevelops/multi-step-form-core';\nimport { createElement, useMemo } from 'react';\nimport { Fragment } from 'react/jsx-runtime';\nimport {\n  createUseSelector,\n  SelectorFn,\n  type DebugOptions,\n} from './hooks/use-selector';\n\nexport namespace selector {\n  export type props<TCurrentStep extends AnyResolvedStep, TSelected> = {\n    selector: SelectorFn<TCurrentStep, TSelected>;\n    children?: (selected: TSelected) => React.ReactNode;\n    /**\n     * Optional debug options to customize logging behavior.\n     */\n    debug?: boolean | DebugOptions<TSelected>;\n  };\n  export type component<TCurrentStep extends AnyResolvedStep> =\n    /**\n     * A component for reactively displaying a value from the form context.\n     * Unlike `useSelector`, this component only re-renders itself, not the parent component.\n     * Use this when you want to display a reactive value without causing parent re-renders.\n     *\n     * @param props - The props for the Selector component.\n     *\n     * @example\n     * ```tsx\n     * // With no debug options (default behavior)\n     * <Selector selector={(ctx) => ctx.step1.fields.firstName.defaultValue}>\n     *   {(value) => <p>First name: {value}</p>}\n     * </Selector>\n     * ```\n\n     * @example\n     * ```tsx\n     * // With debug enabled\n     *  <Selector selector={(ctx) => ctx.step1.fields.firstName.defaultValue} debug>\n     *   {(value) => <p>First name: {value}</p>}\n     * </Selector>\n     * ```\n     *\n     * @example\n     * ```tsx\n     * // With custom debug options\n     * <Selector\n     *   selector={(ctx) => ctx.step1.fields.firstName.defaultValue}\n     *   debug={{\n     *     onRender: (value) => console.log('Rendered with:', value),\n     *     onValueChanged: (oldVal, newVal) => console.log('Changed:', oldVal, '->', newVal)\n     *   }}\n     * >\n     *   {(value) => <p>First name: {value}</p>}\n     * </Selector>\n     * ```\n     */\n    <TSelected>(props: props<TCurrentStep, TSelected>) => React.ReactNode;\n\n  export function create<TCurrentStep extends AnyResolvedStep>(\n    createCtx: () => Expand<CurrentStepHelperFnCtx<TCurrentStep>>,\n    subscribe: (listener: () => void) => () => void\n  ) {\n    const useSelector = createUseSelector(createCtx, subscribe);\n    const Selector: component<TCurrentStep> = ({\n      selector,\n      children,\n      debug,\n    }) => {\n      const isDebugEnabled =\n        typeof debug === 'boolean' ? debug : debug !== undefined;\n      const debugOptions = typeof debug === 'object' ? debug : undefined;\n      const prefix = debugOptions?.prefix;\n\n      const logger = useMemo(() => {\n        if (!isDebugEnabled) {\n          return undefined;\n        }\n\n        return new MultiStepFormLogger({\n          debug: true,\n          prefix: (defaultValue) => {\n            const defaultPrefix = `${defaultValue}-Selector`;\n            console.log(prefix);\n\n            // If no prefix is provided, use default\n            if (!prefix) {\n              return defaultPrefix;\n            }\n\n            // If prefix is a string, use it directly\n            if (typeof prefix === 'string') {\n              return prefix;\n            }\n\n            // If prefix is a function, call it with the default prefix\n            if (typeof prefix === 'function') {\n              return prefix(defaultValue);\n            }\n\n            // If prefix is an object with action/value, handle prepend/append\n            if (typeof prefix === 'object') {\n              const { action = 'prepend', value, delimiter = '-' } = prefix;\n              const resolvedValue =\n                typeof value === 'function' ? value(defaultValue) : value;\n\n              if (action === 'prepend') {\n                return `${resolvedValue}${delimiter}${defaultPrefix}`;\n              }\n\n              if (action === 'append') {\n                return `${defaultPrefix}${delimiter}${resolvedValue}`;\n              }\n\n              return defaultPrefix;\n            }\n\n            return defaultPrefix;\n          },\n        });\n      }, [isDebugEnabled, prefix]);\n\n      const selected = useSelector(selector, logger, debugOptions);\n\n      logger?.info(\n        debugOptions?.onRender?.(selected) ??\n          `Rendering with selected: ${JSON.stringify(selected)}`\n      );\n\n      if (children) {\n        return createElement(Fragment, null, children(selected));\n      }\n      return createElement(Fragment, null, String(selected ?? ''));\n    };\n\n    // Remove memo to test if it's causing the issue\n    // The memo was meant to prevent re-renders when parent re-renders,\n    // but useSyncExternalStore should handle reactivity\n    return Selector;\n  }\n}\n"],"mappings":";;;;;;;;CA+DS,SAAS,OACd,aACA,WACA;EACA,MAAM,cAAc,kBAAkBA,aAAW,UAAU;EAC3D,MAAMC,YAAqC,EACzC,sBACA,UACA,YACI;GACJ,MAAM,iBACJ,OAAO,UAAU,YAAY,QAAQ,UAAU;GACjD,MAAM,eAAe,OAAO,UAAU,WAAW,QAAQ;GACzD,MAAM,SAAS,cAAc;GAE7B,MAAM,SAAS,cAAc;AAC3B,QAAI,CAAC,eACH;AAGF,WAAO,IAAI,oBAAoB;KAC7B,OAAO;KACP,SAAS,iBAAiB;MACxB,MAAM,gBAAgB,GAAG,aAAa;AACtC,cAAQ,IAAI,OAAO;AAGnB,UAAI,CAAC,OACH,QAAO;AAIT,UAAI,OAAO,WAAW,SACpB,QAAO;AAIT,UAAI,OAAO,WAAW,WACpB,QAAO,OAAO,aAAa;AAI7B,UAAI,OAAO,WAAW,UAAU;OAC9B,MAAM,EAAE,SAAS,WAAW,OAAO,YAAY,QAAQ;OACvD,MAAM,gBACJ,OAAO,UAAU,aAAa,MAAM,aAAa,GAAG;AAEtD,WAAI,WAAW,UACb,QAAO,GAAG,gBAAgB,YAAY;AAGxC,WAAI,WAAW,SACb,QAAO,GAAG,gBAAgB,YAAY;AAGxC,cAAO;;AAGT,aAAO;;KAEV,CAAC;MACD,CAAC,gBAAgB,OAAO,CAAC;GAE5B,MAAM,WAAW,YAAYC,YAAU,QAAQ,aAAa;AAE5D,WAAQ,KACN,cAAc,WAAW,SAAS,IAChC,4BAA4B,KAAK,UAAU,SAAS,GACvD;AAED,OAAI,SACF,QAAO,cAAc,UAAU,MAAM,SAAS,SAAS,CAAC;AAE1D,UAAO,cAAc,UAAU,MAAM,OAAO,YAAY,GAAG,CAAC;;AAM9D,SAAO"}
+{"version":3,"file":"selector.mjs","names":["createCtx","Selector: component<steps>","selector"],"sources":["../src/selector.tsx"],"sourcesContent":["import {\n  type Expand,\n  type HelperFn,\n  MultiStepFormLogger,\n  type steps,\n} from '@jfdevelops/multi-step-form-core';\nimport { createElement, useMemo } from 'react';\nimport { Fragment } from 'react/jsx-runtime';\nimport {\n  createUseSelector,\n  type DebugOptions,\n  type SelectorFn,\n} from './hooks/use-selector';\n\nexport namespace selector {\n  export type props<steps extends steps.instantiateSteps, selected> = {\n    selector: SelectorFn<steps, selected>;\n    children?: (selected: selected) => React.ReactNode;\n    /**\n     * Optional debug options to customize logging behavior.\n     */\n    debug?: boolean | DebugOptions<selected>;\n  };\n  export type component<steps extends steps.instantiateSteps> =\n    /**\n     * A component for reactively displaying a value from the form context.\n     * Unlike `useSelector`, this component only re-renders itself, not the parent component.\n     * Use this when you want to display a reactive value without causing parent re-renders.\n     *\n     * @param props - The props for the Selector component.\n     *\n     * @example\n     * ```tsx\n     * // With no debug options (default behavior)\n     * <Selector selector={(ctx) => ctx.step1.fields.firstName.defaultValue}>\n     *   {(value) => <p>First name: {value}</p>}\n     * </Selector>\n     * ```\n\n     * @example\n     * ```tsx\n     * // With debug enabled\n     *  <Selector selector={(ctx) => ctx.step1.fields.firstName.defaultValue} debug>\n     *   {(value) => <p>First name: {value}</p>}\n     * </Selector>\n     * ```\n     *\n     * @example\n     * ```tsx\n     * // With custom debug options\n     * <Selector\n     *   selector={(ctx) => ctx.step1.fields.firstName.defaultValue}\n     *   debug={{\n     *     onRender: (value) => console.log('Rendered with:', value),\n     *     onValueChanged: (oldVal, newVal) => console.log('Changed:', oldVal, '->', newVal)\n     *   }}\n     * >\n     *   {(value) => <p>First name: {value}</p>}\n     * </Selector>\n     * ```\n     */\n    <selected>(props: props<steps, selected>) => React.ReactNode;\n\n  export function create<steps extends steps.instantiateSteps>(\n    createCtx: () => Expand<\n      HelperFn.buildCtx<steps, [steps.StepNumbers<steps>]>\n    >,\n    subscribe: (listener: () => void) => () => void\n  ) {\n    const useSelector = createUseSelector(createCtx, subscribe);\n    const Selector: component<steps> = ({ selector, children, debug }) => {\n      const isDebugEnabled =\n        typeof debug === 'boolean' ? debug : debug !== undefined;\n      const debugOptions = typeof debug === 'object' ? debug : undefined;\n      const prefix = debugOptions?.prefix;\n\n      const logger = useMemo(() => {\n        if (!isDebugEnabled) {\n          return undefined;\n        }\n\n        return new MultiStepFormLogger({\n          debug: true,\n          prefix: (defaultValue) => {\n            const defaultPrefix = `${defaultValue}-Selector`;\n            console.log(prefix);\n\n            // If no prefix is provided, use default\n            if (!prefix) {\n              return defaultPrefix;\n            }\n\n            // If prefix is a string, use it directly\n            if (typeof prefix === 'string') {\n              return prefix;\n            }\n\n            // If prefix is a function, call it with the default prefix\n            if (typeof prefix === 'function') {\n              return prefix(defaultValue);\n            }\n\n            // If prefix is an object with action/value, handle prepend/append\n            if (typeof prefix === 'object') {\n              const { action = 'prepend', value, delimiter = '-' } = prefix;\n              const resolvedValue =\n                typeof value === 'function' ? value(defaultValue) : value;\n\n              if (action === 'prepend') {\n                return `${resolvedValue}${delimiter}${defaultPrefix}`;\n              }\n\n              if (action === 'append') {\n                return `${defaultPrefix}${delimiter}${resolvedValue}`;\n              }\n\n              return defaultPrefix;\n            }\n\n            return defaultPrefix;\n          },\n        });\n      }, [isDebugEnabled, prefix]);\n\n      const selected = useSelector(selector, logger, debugOptions);\n\n      logger?.info(\n        debugOptions?.onRender?.(selected) ??\n          `Rendering with selected: ${JSON.stringify(selected)}`\n      );\n\n      if (children) {\n        return createElement(Fragment, null, children(selected));\n      }\n      return createElement(Fragment, null, String(selected ?? ''));\n    };\n\n    // Remove memo to test if it's causing the issue\n    // The memo was meant to prevent re-renders when parent re-renders,\n    // but useSyncExternalStore should handle reactivity\n    return Selector;\n  }\n}\n"],"mappings":";;;;;;;;CA+DS,SAAS,OACd,aAGA,WACA;EACA,MAAM,cAAc,kBAAkBA,aAAW,UAAU;EAC3D,MAAMC,YAA8B,EAAE,sBAAU,UAAU,YAAY;GACpE,MAAM,iBACJ,OAAO,UAAU,YAAY,QAAQ,UAAU;GACjD,MAAM,eAAe,OAAO,UAAU,WAAW,QAAQ;GACzD,MAAM,SAAS,cAAc;GAE7B,MAAM,SAAS,cAAc;AAC3B,QAAI,CAAC,eACH;AAGF,WAAO,IAAI,oBAAoB;KAC7B,OAAO;KACP,SAAS,iBAAiB;MACxB,MAAM,gBAAgB,GAAG,aAAa;AACtC,cAAQ,IAAI,OAAO;AAGnB,UAAI,CAAC,OACH,QAAO;AAIT,UAAI,OAAO,WAAW,SACpB,QAAO;AAIT,UAAI,OAAO,WAAW,WACpB,QAAO,OAAO,aAAa;AAI7B,UAAI,OAAO,WAAW,UAAU;OAC9B,MAAM,EAAE,SAAS,WAAW,OAAO,YAAY,QAAQ;OACvD,MAAM,gBACJ,OAAO,UAAU,aAAa,MAAM,aAAa,GAAG;AAEtD,WAAI,WAAW,UACb,QAAO,GAAG,gBAAgB,YAAY;AAGxC,WAAI,WAAW,SACb,QAAO,GAAG,gBAAgB,YAAY;AAGxC,cAAO;;AAGT,aAAO;;KAEV,CAAC;MACD,CAAC,gBAAgB,OAAO,CAAC;GAE5B,MAAM,WAAW,YAAYC,YAAU,QAAQ,aAAa;AAE5D,WAAQ,KACN,cAAc,WAAW,SAAS,IAChC,4BAA4B,KAAK,UAAU,SAAS,GACvD;AAED,OAAI,SACF,QAAO,cAAc,UAAU,MAAM,SAAS,SAAS,CAAC;AAE1D,UAAO,cAAc,UAAU,MAAM,OAAO,YAAY,GAAG,CAAC;;AAM9D,SAAO"}