@jfdevelops/react-multi-step-form 1.0.0-alpha.3 → 1.0.0-alpha.30

package/dist/schema.cjs

@@ -0,0 +1,45 @@
+const require_step_schema = require('./step-schema.cjs');
+let __jfdevelops_multi_step_form_core = require("@jfdevelops/multi-step-form-core");
+let __jfdevelops_multi_step_form_core__internals = require("@jfdevelops/multi-step-form-core/_internals");
+
+//#region src/schema.ts
+var MultiStepFormSchema = class extends __jfdevelops_multi_step_form_core.MultiStepFormSchema {
+	stepSchema;
+	#internal;
+	constructor(config) {
+		const { nameTransformCasing = __jfdevelops_multi_step_form_core.DEFAULT_CASING, storage, ...rest } = config;
+		const options = {
+			nameTransformCasing,
+			storage,
+			...rest
+		};
+		super(options);
+		this.stepSchema = new require_step_schema.MultiStepFormStepSchema(options);
+		this.#internal = new __jfdevelops_multi_step_form_core__internals.MultiStepFormStepSchemaInternal({
+			originalValue: this.stepSchema.original,
+			getValue: () => this.stepSchema.value,
+			setValue: (value) => {
+				this.stepSchema.value = { ...value };
+				this.storage.add(value);
+				this.notify();
+			}
+		});
+	}
+	createComponent(options, fn) {
+		const { stepData } = options;
+		const ctx = (0, __jfdevelops_multi_step_form_core.createCtx)(this.stepSchema.value, stepData);
+		return ((props) => fn({
+			ctx,
+			update: this.#internal.createHelperFnInputUpdate(stepData),
+			reset: this.#internal.createHelperFnInputReset(stepData)
+		}, props));
+	}
+};
+function createMultiStepFormSchema(options) {
+	return new MultiStepFormSchema(options);
+}
+
+//#endregion
+exports.MultiStepFormSchema = MultiStepFormSchema;
+exports.createMultiStepFormSchema = createMultiStepFormSchema;
+//# sourceMappingURL=schema.cjs.map

package/dist/schema.cjs.map

@@ -0,0 +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"}

package/dist/schema.d.cts

@@ -0,0 +1,34 @@
+import { CreateComponentCallback, CreatedMultiStepFormComponent, HelperFunctions, MultiStepFormStepSchema as MultiStepFormStepSchema$1, ResolvedStep as ResolvedStep$1 } from "./step-schema.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";
+
+//#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];
+}
+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> {
+  #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>;
+}
+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>;
+//#endregion
+export { AnyMultiStepFormSchema, MultiStepFormSchema$1 as MultiStepFormSchema, MultiStepFormSchemaOptions$1 as MultiStepFormSchemaOptions, createMultiStepFormSchema };
+//# sourceMappingURL=schema.d.cts.map

package/dist/schema.d.mts

@@ -0,0 +1,34 @@
+import { CreateComponentCallback, CreatedMultiStepFormComponent, HelperFunctions, MultiStepFormStepSchema as MultiStepFormStepSchema$1, ResolvedStep as ResolvedStep$1 } from "./step-schema.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";
+
+//#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];
+}
+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> {
+  #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>;
+}
+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>;
+//#endregion
+export { AnyMultiStepFormSchema, MultiStepFormSchema$1 as MultiStepFormSchema, MultiStepFormSchemaOptions$1 as MultiStepFormSchemaOptions, createMultiStepFormSchema };
+//# sourceMappingURL=schema.d.mts.map

package/dist/schema.mjs

@@ -0,0 +1,44 @@
+import { MultiStepFormStepSchema as MultiStepFormStepSchema$1 } from "./step-schema.mjs";
+import { DEFAULT_CASING, MultiStepFormSchema, createCtx } 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 {
+	stepSchema;
+	#internal;
+	constructor(config) {
+		const { nameTransformCasing = DEFAULT_CASING, storage, ...rest } = config;
+		const options = {
+			nameTransformCasing,
+			storage,
+			...rest
+		};
+		super(options);
+		this.stepSchema = new MultiStepFormStepSchema$1(options);
+		this.#internal = new MultiStepFormStepSchemaInternal({
+			originalValue: this.stepSchema.original,
+			getValue: () => this.stepSchema.value,
+			setValue: (value) => {
+				this.stepSchema.value = { ...value };
+				this.storage.add(value);
+				this.notify();
+			}
+		});
+	}
+	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));
+	}
+};
+function createMultiStepFormSchema(options) {
+	return new MultiStepFormSchema$1(options);
+}
+
+//#endregion
+export { MultiStepFormSchema$1 as MultiStepFormSchema, createMultiStepFormSchema };
+//# sourceMappingURL=schema.mjs.map

package/dist/schema.mjs.map

@@ -0,0 +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"}

package/dist/selector.cjs

@@ -0,0 +1,53 @@
+const require_use_selector = require('./hooks/use-selector.cjs');
+let __jfdevelops_multi_step_form_core = require("@jfdevelops/multi-step-form-core");
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+
+//#region src/selector.tsx
+let selector;
+(function(_selector) {
+	function create(createCtx, subscribe) {
+		const useSelector = require_use_selector.createUseSelector(createCtx, subscribe);
+		const Selector = ({ selector: selector$1, children, debug }) => {
+			const isDebugEnabled = typeof debug === "boolean" ? debug : debug !== void 0;
+			const debugOptions = typeof debug === "object" ? debug : void 0;
+			const prefix = debugOptions?.prefix;
+			const logger = (0, react.useMemo)(() => {
+				if (!isDebugEnabled) return;
+				return new __jfdevelops_multi_step_form_core.MultiStepFormLogger({
+					debug: true,
+					prefix: (defaultValue) => {
+						const defaultPrefix = `${defaultValue}-Selector`;
+						console.log(prefix);
+						if (!prefix) return defaultPrefix;
+						if (typeof prefix === "string") return prefix;
+						if (typeof prefix === "function") return prefix(defaultValue);
+						if (typeof prefix === "object") {
+							const { action = "prepend", value, delimiter = "-" } = prefix;
+							const resolvedValue = typeof value === "function" ? value(defaultValue) : value;
+							if (action === "prepend") return `${resolvedValue}${delimiter}${defaultPrefix}`;
+							if (action === "append") return `${defaultPrefix}${delimiter}${resolvedValue}`;
+							return defaultPrefix;
+						}
+						return defaultPrefix;
+					}
+				});
+			}, [isDebugEnabled, prefix]);
+			const selected = useSelector(selector$1, logger, debugOptions);
+			logger?.info(debugOptions?.onRender?.(selected) ?? `Rendering with selected: ${JSON.stringify(selected)}`);
+			if (children) return (0, react.createElement)(react_jsx_runtime.Fragment, null, children(selected));
+			return (0, react.createElement)(react_jsx_runtime.Fragment, null, String(selected ?? ""));
+		};
+		return Selector;
+	}
+	_selector.create = create;
+})(selector || (selector = {}));
+
+//#endregion
+Object.defineProperty(exports, 'selector', {
+  enumerable: true,
+  get: function () {
+    return selector;
+  }
+});
+//# sourceMappingURL=selector.cjs.map

package/dist/selector.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"selector.cjs","names":["createUseSelector","Selector: component<TResolvedStep, TSteps, TChosenSteps>","MultiStepFormLogger","selector","Fragment"],"sources":["../src/selector.tsx"],"sourcesContent":["import {\n  AnyResolvedStep,\n  Expand,\n  HelperFnChosenSteps,\n  HelperFnCtx,\n  MultiStepFormLogger,\n  StepNumbers,\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<\n    TResolvedStep extends AnyResolvedStep,\n    TSteps extends StepNumbers<TResolvedStep>,\n    TChosenSteps extends HelperFnChosenSteps<TResolvedStep, TSteps>,\n    TSelected\n  > = {\n    selector: SelectorFn<TResolvedStep, TSteps, TChosenSteps, 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<\n    TResolvedStep extends AnyResolvedStep,\n    TSteps extends StepNumbers<TResolvedStep>,\n    TChosenSteps extends HelperFnChosenSteps<TResolvedStep, TSteps>\n  > =\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>(\n      props: props<TResolvedStep, TSteps, TChosenSteps, TSelected>\n    ) => React.ReactNode;\n\n  export function create<\n    TResolvedStep extends AnyResolvedStep,\n    TSteps extends StepNumbers<TResolvedStep>,\n    TChosenSteps extends HelperFnChosenSteps<TResolvedStep, TSteps>\n  >(\n    createCtx: () => Expand<HelperFnCtx<TResolvedStep, TSteps, TChosenSteps>>,\n    subscribe: (listener: () => void) => () => void\n  ) {\n    const useSelector = createUseSelector(createCtx, subscribe);\n    const Selector: component<TResolvedStep, TSteps, TChosenSteps> = ({\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":";;;;;;;;CA4ES,SAAS,OAKd,WACA,WACA;EACA,MAAM,cAAcA,uCAAkB,WAAW,UAAU;EAC3D,MAAMC,YAA4D,EAChE,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"}

package/dist/selector.d.cts

@@ -0,0 +1,56 @@
+import { DebugOptions, SelectorFn } from "./hooks/use-selector.cjs";
+import { AnyResolvedStep, Expand, HelperFnChosenSteps, HelperFnCtx, StepNumbers } from "@jfdevelops/multi-step-form-core";
+
+//#region src/selector.d.ts
+declare namespace selector {
+  type props<TResolvedStep extends AnyResolvedStep, TSteps extends StepNumbers<TResolvedStep>, TChosenSteps extends HelperFnChosenSteps<TResolvedStep, TSteps>, TSelected> = {
+    selector: SelectorFn<TResolvedStep, TSteps, TChosenSteps, TSelected>;
+    children?: (selected: TSelected) => React.ReactNode;
+    /**
+     * Optional debug options to customize logging behavior.
+     */
+    debug?: boolean | DebugOptions<TSelected>;
+  };
+  type component<TResolvedStep extends AnyResolvedStep, TSteps extends StepNumbers<TResolvedStep>, TChosenSteps extends HelperFnChosenSteps<TResolvedStep, TSteps>> =
+  /**
+   * A component for reactively displaying a value from the form context.
+   * Unlike `useSelector`, this component only re-renders itself, not the parent component.
+   * Use this when you want to display a reactive value without causing parent re-renders.
+   *
+   * @param props - The props for the Selector component.
+   *
+   * @example
+   * ```tsx
+   * // With no debug options (default behavior)
+   * <Selector selector={(ctx) => ctx.step1.fields.firstName.defaultValue}>
+   *   {(value) => <p>First name: {value}</p>}
+   * </Selector>
+   * ```
+    * @example
+   * ```tsx
+   * // With debug enabled
+   *  <Selector selector={(ctx) => ctx.step1.fields.firstName.defaultValue} debug>
+   *   {(value) => <p>First name: {value}</p>}
+   * </Selector>
+   * ```
+   *
+   * @example
+   * ```tsx
+   * // With custom debug options
+   * <Selector
+   *   selector={(ctx) => ctx.step1.fields.firstName.defaultValue}
+   *   debug={{
+   *     onRender: (value) => console.log('Rendered with:', value),
+   *     onValueChanged: (oldVal, newVal) => console.log('Changed:', oldVal, '->', newVal)
+   *   }}
+   * >
+   *   {(value) => <p>First name: {value}</p>}
+   * </Selector>
+   * ```
+   */
+  <TSelected>(props: props<TResolvedStep, TSteps, TChosenSteps, TSelected>) => React.ReactNode;
+  function create<TResolvedStep extends AnyResolvedStep, TSteps extends StepNumbers<TResolvedStep>, TChosenSteps extends HelperFnChosenSteps<TResolvedStep, TSteps>>(createCtx: () => Expand<HelperFnCtx<TResolvedStep, TSteps, TChosenSteps>>, subscribe: (listener: () => void) => () => void): component<TResolvedStep, TSteps, TChosenSteps>;
+}
+//#endregion
+export { selector };
+//# sourceMappingURL=selector.d.cts.map

package/dist/selector.d.mts

@@ -0,0 +1,56 @@
+import { DebugOptions, SelectorFn } from "./hooks/use-selector.mjs";
+import { AnyResolvedStep, Expand, HelperFnChosenSteps, HelperFnCtx, StepNumbers } from "@jfdevelops/multi-step-form-core";
+
+//#region src/selector.d.ts
+declare namespace selector {
+  type props<TResolvedStep extends AnyResolvedStep, TSteps extends StepNumbers<TResolvedStep>, TChosenSteps extends HelperFnChosenSteps<TResolvedStep, TSteps>, TSelected> = {
+    selector: SelectorFn<TResolvedStep, TSteps, TChosenSteps, TSelected>;
+    children?: (selected: TSelected) => React.ReactNode;
+    /**
+     * Optional debug options to customize logging behavior.
+     */
+    debug?: boolean | DebugOptions<TSelected>;
+  };
+  type component<TResolvedStep extends AnyResolvedStep, TSteps extends StepNumbers<TResolvedStep>, TChosenSteps extends HelperFnChosenSteps<TResolvedStep, TSteps>> =
+  /**
+   * A component for reactively displaying a value from the form context.
+   * Unlike `useSelector`, this component only re-renders itself, not the parent component.
+   * Use this when you want to display a reactive value without causing parent re-renders.
+   *
+   * @param props - The props for the Selector component.
+   *
+   * @example
+   * ```tsx
+   * // With no debug options (default behavior)
+   * <Selector selector={(ctx) => ctx.step1.fields.firstName.defaultValue}>
+   *   {(value) => <p>First name: {value}</p>}
+   * </Selector>
+   * ```
+    * @example
+   * ```tsx
+   * // With debug enabled
+   *  <Selector selector={(ctx) => ctx.step1.fields.firstName.defaultValue} debug>
+   *   {(value) => <p>First name: {value}</p>}
+   * </Selector>
+   * ```
+   *
+   * @example
+   * ```tsx
+   * // With custom debug options
+   * <Selector
+   *   selector={(ctx) => ctx.step1.fields.firstName.defaultValue}
+   *   debug={{
+   *     onRender: (value) => console.log('Rendered with:', value),
+   *     onValueChanged: (oldVal, newVal) => console.log('Changed:', oldVal, '->', newVal)
+   *   }}
+   * >
+   *   {(value) => <p>First name: {value}</p>}
+   * </Selector>
+   * ```
+   */
+  <TSelected>(props: props<TResolvedStep, TSteps, TChosenSteps, TSelected>) => React.ReactNode;
+  function create<TResolvedStep extends AnyResolvedStep, TSteps extends StepNumbers<TResolvedStep>, TChosenSteps extends HelperFnChosenSteps<TResolvedStep, TSteps>>(createCtx: () => Expand<HelperFnCtx<TResolvedStep, TSteps, TChosenSteps>>, subscribe: (listener: () => void) => () => void): component<TResolvedStep, TSteps, TChosenSteps>;
+}
+//#endregion
+export { selector };
+//# sourceMappingURL=selector.d.mts.map

package/dist/selector.mjs

@@ -0,0 +1,48 @@
+import { createUseSelector } from "./hooks/use-selector.mjs";
+import { MultiStepFormLogger } from "@jfdevelops/multi-step-form-core";
+import { createElement, useMemo } from "react";
+import { Fragment } from "react/jsx-runtime";
+
+//#region src/selector.tsx
+let selector;
+(function(_selector) {
+	function create(createCtx$1, subscribe) {
+		const useSelector = createUseSelector(createCtx$1, subscribe);
+		const Selector = ({ selector: selector$1, children, debug }) => {
+			const isDebugEnabled = typeof debug === "boolean" ? debug : debug !== void 0;
+			const debugOptions = typeof debug === "object" ? debug : void 0;
+			const prefix = debugOptions?.prefix;
+			const logger = useMemo(() => {
+				if (!isDebugEnabled) return;
+				return new MultiStepFormLogger({
+					debug: true,
+					prefix: (defaultValue) => {
+						const defaultPrefix = `${defaultValue}-Selector`;
+						console.log(prefix);
+						if (!prefix) return defaultPrefix;
+						if (typeof prefix === "string") return prefix;
+						if (typeof prefix === "function") return prefix(defaultValue);
+						if (typeof prefix === "object") {
+							const { action = "prepend", value, delimiter = "-" } = prefix;
+							const resolvedValue = typeof value === "function" ? value(defaultValue) : value;
+							if (action === "prepend") return `${resolvedValue}${delimiter}${defaultPrefix}`;
+							if (action === "append") return `${defaultPrefix}${delimiter}${resolvedValue}`;
+							return defaultPrefix;
+						}
+						return defaultPrefix;
+					}
+				});
+			}, [isDebugEnabled, prefix]);
+			const selected = useSelector(selector$1, logger, debugOptions);
+			logger?.info(debugOptions?.onRender?.(selected) ?? `Rendering with selected: ${JSON.stringify(selected)}`);
+			if (children) return createElement(Fragment, null, children(selected));
+			return createElement(Fragment, null, String(selected ?? ""));
+		};
+		return Selector;
+	}
+	_selector.create = create;
+})(selector || (selector = {}));
+
+//#endregion
+export { selector };
+//# sourceMappingURL=selector.mjs.map

package/dist/selector.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"selector.mjs","names":["createCtx","Selector: component<TResolvedStep, TSteps, TChosenSteps>","selector"],"sources":["../src/selector.tsx"],"sourcesContent":["import {\n  AnyResolvedStep,\n  Expand,\n  HelperFnChosenSteps,\n  HelperFnCtx,\n  MultiStepFormLogger,\n  StepNumbers,\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<\n    TResolvedStep extends AnyResolvedStep,\n    TSteps extends StepNumbers<TResolvedStep>,\n    TChosenSteps extends HelperFnChosenSteps<TResolvedStep, TSteps>,\n    TSelected\n  > = {\n    selector: SelectorFn<TResolvedStep, TSteps, TChosenSteps, 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<\n    TResolvedStep extends AnyResolvedStep,\n    TSteps extends StepNumbers<TResolvedStep>,\n    TChosenSteps extends HelperFnChosenSteps<TResolvedStep, TSteps>\n  > =\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>(\n      props: props<TResolvedStep, TSteps, TChosenSteps, TSelected>\n    ) => React.ReactNode;\n\n  export function create<\n    TResolvedStep extends AnyResolvedStep,\n    TSteps extends StepNumbers<TResolvedStep>,\n    TChosenSteps extends HelperFnChosenSteps<TResolvedStep, TSteps>\n  >(\n    createCtx: () => Expand<HelperFnCtx<TResolvedStep, TSteps, TChosenSteps>>,\n    subscribe: (listener: () => void) => () => void\n  ) {\n    const useSelector = createUseSelector(createCtx, subscribe);\n    const Selector: component<TResolvedStep, TSteps, TChosenSteps> = ({\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":";;;;;;;;CA4ES,SAAS,OAKd,aACA,WACA;EACA,MAAM,cAAc,kBAAkBA,aAAW,UAAU;EAC3D,MAAMC,YAA4D,EAChE,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"}