@jfdevelops/react-multi-step-form 1.0.0-alpha.15 → 1.0.0-alpha.16

package/dist/create-context.cjs

@@ -0,0 +1,92 @@
+const require_use_multi_step_form_data = require('./hooks/use-multi-step-form-data.cjs');
+let __jfdevelops_multi_step_form_core = require("@jfdevelops/multi-step-form-core");
+let react_jsx_runtime = require("react/jsx-runtime");
+
+//#region src/create-context.tsx
+function createComponent(ctx) {
+	return function(fn) {
+		return ((props) => fn(ctx, props));
+	};
+}
+/**
+* Create multi step form context with a {@linkcode MultiStepFormSchema} instance.
+* @param schema The {@linkcode MultiStepFormSchema} instance.
+*/
+function createMultiStepFormContext(schema) {
+	const useMultiStepFormData = require_use_multi_step_form_data.createMultiStepFormDataHook(schema);
+	function useCurrentStepData(options) {
+		const { targetStep, notFoundMessage, isDataGuaranteed } = options;
+		const data = useMultiStepFormData({ targetStep });
+		const NoDataFoundComponent = notFoundMessage ? withNoStepDataFound({ targetStep }, notFoundMessage) : (props) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			...props,
+			children: ["No data found for step ", String(targetStep)]
+		});
+		if (isDataGuaranteed) return {
+			data,
+			NoCurrentData: NoDataFoundComponent
+		};
+		if (__jfdevelops_multi_step_form_core.MultiStepFormStepSchema.hasData(data)) return {
+			data,
+			hasData: true,
+			NoCurrentData: NoDataFoundComponent
+		};
+		return {
+			data: void 0,
+			hasData: false,
+			NoCurrentData: NoDataFoundComponent
+		};
+	}
+	function useProgress(options) {
+		const steps = useMultiStepFormData((data) => data.stepSchema.steps.value.length);
+		const { targetStep, maxProgressValue = 100, totalSteps = steps, progressTextTransformer } = options;
+		const currentStep = require_use_multi_step_form_data.throwIfInvalidStepNumber(schema, targetStep);
+		return {
+			value: currentStep / totalSteps * maxProgressValue,
+			maxProgressValue,
+			ProgressText: progressTextTransformer ? withProgressText({
+				targetStep,
+				maxProgressValue,
+				totalSteps
+			}, progressTextTransformer) : (props) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				...props,
+				children: [
+					"Step ",
+					currentStep,
+					"/",
+					totalSteps
+				]
+			})
+		};
+	}
+	function useCanRestartForm(cb) {
+		const value = useMultiStepFormData((data) => data.storage).get();
+		const canRestart = Boolean(value && typeof value === "object" && Object.keys(value).length > 0);
+		if (cb) return cb(canRestart);
+		return canRestart;
+	}
+	function withProgressText(options, cb) {
+		const steps = schema.getSnapshot().stepSchema.steps.value.length;
+		const { targetStep, maxProgressValue = 100, totalSteps = steps } = options;
+		return createComponent({
+			targetStep,
+			maxProgressValue,
+			totalSteps
+		})(cb);
+	}
+	function withNoStepDataFound(options, cb) {
+		require_use_multi_step_form_data.throwIfInvalidStepNumber(schema, options.targetStep);
+		return createComponent(options)(cb);
+	}
+	return {
+		useMultiStepFormData,
+		useCurrentStepData,
+		useProgress,
+		useCanRestartForm,
+		withProgressText,
+		withNoStepDataFound
+	};
+}
+
+//#endregion
+exports.createMultiStepFormContext = createMultiStepFormContext;
+//# sourceMappingURL=create-context.cjs.map

package/dist/create-context.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"create-context.cjs","names":["createMultiStepFormDataHook","MultiStepFormStepSchema","throwIfInvalidStepNumber"],"sources":["../src/create-context.tsx"],"sourcesContent":["import { MultiStepFormStepSchema } from '@jfdevelops/multi-step-form-core';\nimport { type ComponentProps, type ReactNode } from 'react';\nimport {\n  createMultiStepFormDataHook,\n  throwIfInvalidStepNumber,\n  UseMultiStepFormData,\n} from './hooks/use-multi-step-form-data';\nimport { MultiStepFormSchema, type AnyMultiStepFormSchema } from './schema';\nimport type {\n  CreatedMultiStepFormComponent,\n  CreateFunction,\n} from './step-schema';\n\ntype BaseOptions<\n  TSchema extends AnyMultiStepFormSchema,\n  TTargetStep extends keyof MultiStepFormSchema.resolvedStep<TSchema>\n> = {\n  /**\n   * The step to return data from.\n   */\n  targetStep: TTargetStep;\n};\nexport type UseCurrentStepOptions<\n  TSchema extends AnyMultiStepFormSchema,\n  TTargetStep extends keyof MultiStepFormSchema.resolvedStep<TSchema>,\n  props,\n  isDataGuaranteed extends boolean = false\n> = BaseOptions<TSchema, TTargetStep> & {\n  /**\n   * Determines if the result should follow \"strictness\".\n   * The result will change based on the value for this option.\n   *\n   * - `true`: `data` is **defined** and `hasData` isn't available.\n   * - `false`: `data` _can be_ `undefined`, but the `hasData` property is available\n   * to help with type narrowing.\n   *\n   * @default false\n   * @example\n   * ### `true`\n   * ```tsx\n   * function MyComponent() {\n   *  const { data, NoCurrentData } = useCurrentStep({\n   *    stepNumber: 1,\n   *    isDataGuaranteed: true,\n   *  })\n   *\n   * // Notice how `NoCurrentData` is still available\n   * // Do things with `data` here\n   * }\n   * ```\n   *\n   * ### `false` - The default\n   * ```tsx\n   * function MyComponent() {\n   *  const { data, NoCurrentData, hasData } = useCurrentStep({\n   *    stepNumber: 1,\n   *  })\n   *\n   *  if (!hasData) {\n   *    return <NoCurrentData />\n   *  }\n   *\n   * // Do things with `data` here\n   * }\n   * ```\n   */\n  isDataGuaranteed?: isDataGuaranteed;\n  /**\n   * An optional transformation function to provide a custom not found message.\n   */\n  notFoundMessage?: CreateFunction<\n    [ctx: BaseOptions<TSchema, TTargetStep>, props: props],\n    ReactNode\n  >;\n};\nexport interface UseCurrentStepBaseResult<TData = unknown, TProps = undefined> {\n  /**\n   * The current step's data.\n   */\n  data: TData | undefined;\n  /**\n   * Boolean indicating if the current step has data.\n   */\n  hasData: boolean;\n  /**\n   * Component to render some sort of error if `data` isn't defined.\n   */\n  NoCurrentData: CreatedMultiStepFormComponent<\n    TProps extends undefined ? Omit<ComponentProps<'div'>, 'children'> : TProps\n  >;\n}\nexport interface UseCurrentStepErrorResult<TData = unknown, TProps = undefined>\n  extends UseCurrentStepBaseResult<TData, TProps> {\n  data: undefined;\n  hasData: false;\n}\nexport interface UseCurrentStepSuccessResult<\n  TData = unknown,\n  TProps = undefined\n> extends UseCurrentStepBaseResult<TData, TProps> {\n  data: TData;\n  hasData: true;\n}\nexport type UseCurrentStepResult<\n  TSchema extends AnyMultiStepFormSchema,\n  TTargetStep extends keyof MultiStepFormSchema.resolvedStep<TSchema>,\n  props,\n  isDataGuaranteed extends boolean = false\n> = isDataGuaranteed extends true\n  ? Omit<\n      UseCurrentStepSuccessResult<\n        MultiStepFormSchema.getData<TSchema, TTargetStep>,\n        props\n      >,\n      'hasData'\n    >\n  :\n      | UseCurrentStepErrorResult<\n          MultiStepFormSchema.getData<TSchema, TTargetStep>,\n          props\n        >\n      | UseCurrentStepSuccessResult<\n          MultiStepFormSchema.getData<TSchema, TTargetStep>,\n          props\n        >;\nexport type UseProgressBaseOptions<\n  TSchema extends AnyMultiStepFormSchema,\n  TTargetStep extends keyof MultiStepFormSchema.resolvedStep<TSchema>\n> = BaseOptions<TSchema, TTargetStep> & {\n  /**\n   * The total amount of steps that are in the form.\n   *\n   * @default schema.stepData.steps.value.length\n   */\n  totalSteps?: number;\n  /**\n   * The highest value the progress indicator should go.\n   *\n   * @default 100\n   */\n  maxProgressValue?: number;\n};\nexport type UseProgressOptions<\n  TSchema extends AnyMultiStepFormSchema,\n  TTargetStep extends keyof MultiStepFormSchema.resolvedStep<TSchema>,\n  props\n> = UseProgressBaseOptions<TSchema, TTargetStep> & {\n  /**\n   * An optional transformation function to provide a custom progress text.\n   */\n  progressTextTransformer?: CreateFunction<\n    [ctx: Required<UseProgressBaseOptions<TSchema, TTargetStep>>, props],\n    ReactNode\n  >;\n};\nexport type UseProgressResult<props> = {\n  /**\n   * The value of the progress indicator.\n   */\n  value: number;\n  /**\n   * The highest value the progress indicator can be.\n   *\n   * @default 100\n   */\n  maxProgressValue: number;\n  ProgressText: CreatedMultiStepFormComponent<\n    props extends undefined ? Omit<ComponentProps<'div'>, 'children'> : props\n  >;\n};\nexport type CreateHOC<TContext, TProps> = (\n  ctx: TContext,\n  props: TProps\n) => CreatedMultiStepFormComponent<TProps>;\n\nexport type MultiStepFormContextResult<\n  TSchema extends AnyMultiStepFormSchema,\n  TResolvedStep extends MultiStepFormSchema.resolvedStep<TSchema> = MultiStepFormSchema.resolvedStep<TSchema>\n> = {\n  // MultiStepFormContext: schema;\n  // MultiStepFormProvider: (props: { children: ReactNode }) => JSX.Element;\n  // useMultiStepFormSchema: schema;\n  useMultiStepFormData: UseMultiStepFormData<TSchema>;\n  /**\n   * Gets the data for the specified step.\n   *\n   * @returns The data for the given step number.\n   */\n  useCurrentStepData: <\n    targetStep extends keyof TResolvedStep,\n    props = undefined,\n    isDataGuaranteed extends boolean = false\n  >(\n    options: UseCurrentStepOptions<TSchema, targetStep, props, isDataGuaranteed>\n  ) => UseCurrentStepResult<TSchema, targetStep, props, isDataGuaranteed>;\n  useProgress: <targetStep extends keyof TResolvedStep, props = undefined>(\n    options: UseProgressOptions<TSchema, targetStep, props>\n  ) => UseProgressResult<props>;\n  /**\n   * A hook that can be used to check if the form can be restarted. If no {@linkcode cb}\n   * is provided, the return value will be dictated by if there is an object stored in\n   * {@link MultiStepFormSchema#storage}.\n   * @param cb A callback function to provide custom logic for if the form can restart.\n   * @returns A boolean indicating if the form can restart.\n   */\n  useCanRestartForm: (cb?: (canRestart: boolean) => boolean) => boolean;\n  /**\n   * A HOC for creating a custom progress text for `useProgress`.\n   * @param options Options for creating the HOC.\n   * @param cb The callback function for creating the HOC.\n   * @returns A HOC for the `progressTextTransformer` option of the `useProgress` hook.\n   */\n  withProgressText: <targetStep extends keyof TResolvedStep, props = undefined>(\n    options: UseProgressBaseOptions<TSchema, targetStep>,\n    cb: (\n      ctx: Required<UseProgressBaseOptions<TSchema, targetStep>>,\n      props: props\n    ) => ReactNode\n  ) => CreatedMultiStepFormComponent<props>;\n  /**\n   * A HOC for creating a custom not found component for when a step's data is `undefined`.\n   * @param options Options for creating the HOC.\n   * @param cb The callback function for creating the HOC.\n   * @returns A HOC for the `notFoundMessage` option of the `useCurrentStep` hook.\n   */\n  withNoStepDataFound: <\n    targetStep extends keyof TResolvedStep,\n    props = undefined\n  >(\n    options: BaseOptions<TSchema, targetStep>,\n    cb: (ctx: BaseOptions<TSchema, targetStep>, props: props) => ReactNode\n  ) => CreatedMultiStepFormComponent<props>;\n};\n\nfunction createComponent<ctx>(ctx: ctx) {\n  return function <props>(fn: CreateFunction<[ctx, props], ReactNode>) {\n    return ((props: props) =>\n      fn(ctx, props)) as CreatedMultiStepFormComponent<props>;\n  };\n}\n\n/**\n * Create multi step form context with a {@linkcode MultiStepFormSchema} instance.\n * @param schema The {@linkcode MultiStepFormSchema} instance.\n */\n// export function createMultiStepFormContext<\n//   schema extends AnyMultiStepFormSchema\n// >(schema: schema): MultiStepFormContextResult<schema>;\n// /**\n//  * Create multi step form context without a {@linkcode MultiStepFormSchema} instance.\n//  *\n//  * The {@linkcode MultiStepFormSchema} instance is returned.\n//  * @param options Options to create a new instance of {@linkcode MultiStepFormSchema}.\n//  */\n// export function createMultiStepFormContext<\n//   step extends Step<casing>,\n//   casing extends CasingType = DefaultCasing,\n//   storageKey extends string = DefaultStorageKey,\n//   resolvedStep extends ResolvedStep<step, casing> = ResolvedStep<step, casing>,\n//   stepNumbers extends StepNumbers<resolvedStep> = StepNumbers<resolvedStep>,\n//   schema extends MultiStepFormSchema<\n//     step,\n//     casing,\n//     storageKey,\n//     resolvedStep,\n//     stepNumbers\n//   > = MultiStepFormSchema<step, casing, storageKey, resolvedStep, stepNumbers>\n// >(\n//   options: MultiStepFormSchemaConfig<\n//     step,\n//     Constrain<casing, CasingType>,\n//     storageKey\n//   >\n// ): MultiStepFormContextResult<schema> & {\n//   schema: MultiStepFormSchema<step, casing, storageKey>;\n// };\nexport function createMultiStepFormContext<\n  schema extends AnyMultiStepFormSchema,\n  resolvedStep extends MultiStepFormSchema.resolvedStep<schema> = MultiStepFormSchema.resolvedStep<schema>\n>(schema: schema): MultiStepFormContextResult<schema> {\n  // const isInstance = schemaOrOptions instanceof MultiStepFormSchema;\n  // const schema: schema = isInstance\n  //   ? schemaOrOptions\n  //   : createMultiStepFormSchema(schemaOrOptions);\n  // const Context = createContext(schema);\n\n  // function Provider({ children }: { children: ReactNode }) {\n  //   const [observer] = useState(() => new MultiStepFormObserver({ schema }));\n\n  //   useEffect(() => {\n  //     const unmount = schema.mount();\n\n  //     return () => {\n  //       unmount();\n  //       observer.destroy();\n  //     };\n  //   }, [observer]);\n\n  //   return <Context.Provider value={observer}>{children}</Context.Provider>;\n  // }\n\n  // function throwIfInvalidStepNumber(\n  //   schema: MultiStepFormSchema<step, casing, storageKey>,\n  //   stepNumber: number\n  // ) {\n  //   const formatter = new Intl.ListFormat('en', {\n  //     type: 'disjunction',\n  //     style: 'long',\n  //   });\n  //   const { as, isValidStepNumber } = schema.stepSchema.steps;\n\n  //   invariant(\n  //     isValidStepNumber(stepNumber),\n  //     `The step number \"${stepNumber}\" is not a valid step number. Valid step numbers include ${formatter.format(\n  //       as('array.string.untyped')\n  //     )}`,\n  //     TypeError\n  //   );\n  // }\n\n  // @ts-ignore Type instantiation is excessively deep and possibly infinite\n  const useMultiStepFormData = createMultiStepFormDataHook(schema);\n\n  function useCurrentStepData<\n    targetStep extends keyof resolvedStep,\n    props = undefined,\n    isDataGuaranteed extends boolean = false\n  >(\n    options: UseCurrentStepOptions<schema, targetStep, props, isDataGuaranteed>\n  ): UseCurrentStepResult<schema, targetStep, props, isDataGuaranteed> {\n    const { targetStep, notFoundMessage, isDataGuaranteed } = options;\n    const data = useMultiStepFormData({\n      targetStep,\n    });\n    const NoDataFoundComponent = notFoundMessage\n      ? withNoStepDataFound({ targetStep }, notFoundMessage)\n      : (props: Omit<ComponentProps<'div'>, 'children'>) => (\n          <div {...props}>No data found for step {String(targetStep)}</div>\n        );\n\n    if (isDataGuaranteed) {\n      return {\n        data,\n        NoCurrentData: NoDataFoundComponent as never,\n      } as never;\n    }\n\n    if (MultiStepFormStepSchema.hasData(data)) {\n      return {\n        data,\n        hasData: true,\n        NoCurrentData: NoDataFoundComponent as never,\n      } as never;\n    }\n\n    return {\n      data: undefined,\n      hasData: false,\n      NoCurrentData: NoDataFoundComponent as never,\n    } as never;\n  }\n\n  function useProgress<\n    targetStep extends keyof resolvedStep,\n    props = undefined\n  >(\n    options: UseProgressOptions<schema, targetStep, props>\n  ): UseProgressResult<props> {\n    const steps = useMultiStepFormData(\n      (data) => data.stepSchema.steps.value.length\n    );\n    const {\n      targetStep,\n      maxProgressValue = 100,\n      totalSteps = steps,\n      progressTextTransformer,\n    } = options;\n    const currentStep = throwIfInvalidStepNumber(schema, targetStep);\n    const value = (currentStep / totalSteps) * maxProgressValue;\n    const ProgressText = progressTextTransformer\n      ? withProgressText(\n          { targetStep, maxProgressValue, totalSteps },\n          progressTextTransformer\n        )\n      : (props: Omit<ComponentProps<'div'>, 'children'>) => (\n          <div {...props}>\n            Step {currentStep}/{totalSteps}\n          </div>\n        );\n\n    return {\n      value,\n      maxProgressValue,\n      ProgressText: ProgressText as never,\n    };\n  }\n\n  function useCanRestartForm(cb?: CreateFunction<[boolean], boolean>) {\n    const storage = useMultiStepFormData((data) => data.storage);\n    const value = storage.get();\n    const canRestart = Boolean(\n      value && typeof value === 'object' && Object.keys(value).length > 0\n    );\n\n    if (cb) {\n      return cb(canRestart);\n    }\n\n    return canRestart;\n  }\n\n  function withProgressText<\n    targetStep extends keyof resolvedStep,\n    props = undefined\n  >(\n    options: UseProgressBaseOptions<schema, targetStep>,\n    cb: (\n      ctx: Required<UseProgressBaseOptions<schema, targetStep>>,\n      props: props\n    ) => ReactNode\n  ) {\n    const steps = schema.getSnapshot().stepSchema.steps.value.length;\n    const { targetStep, maxProgressValue = 100, totalSteps = steps } = options;\n\n    return createComponent({ targetStep, maxProgressValue, totalSteps })(cb);\n  }\n\n  function withNoStepDataFound<\n    targetStep extends keyof resolvedStep,\n    props = undefined\n  >(\n    options: BaseOptions<schema, targetStep>,\n    cb: (ctx: BaseOptions<schema, targetStep>, props: props) => ReactNode\n  ) {\n    throwIfInvalidStepNumber(schema, options.targetStep);\n\n    return createComponent(options)(cb);\n  }\n\n  return {\n    // MultiStepFormContext: Context,\n    useMultiStepFormData,\n    useCurrentStepData,\n    useProgress,\n    useCanRestartForm,\n    withProgressText,\n    withNoStepDataFound,\n  };\n}\n"],"mappings":";;;;;AA0OA,SAAS,gBAAqB,KAAU;AACtC,QAAO,SAAiB,IAA6C;AACnE,WAAS,UACP,GAAG,KAAK,MAAM;;;;;;;AAuCpB,SAAgB,2BAGd,QAAoD;CA0CpD,MAAM,uBAAuBA,6DAA4B,OAAO;CAEhE,SAAS,mBAKP,SACmE;EACnE,MAAM,EAAE,YAAY,iBAAiB,qBAAqB;EAC1D,MAAM,OAAO,qBAAqB,EAChC,YACD,CAAC;EACF,MAAM,uBAAuB,kBACzB,oBAAoB,EAAE,YAAY,EAAE,gBAAgB,IACnD,UACC,4CAAC;GAAI,GAAI;cAAO,2BAAwB,OAAO,WAAW;IAAO;AAGvE,MAAI,iBACF,QAAO;GACL;GACA,eAAe;GAChB;AAGH,MAAIC,0DAAwB,QAAQ,KAAK,CACvC,QAAO;GACL;GACA,SAAS;GACT,eAAe;GAChB;AAGH,SAAO;GACL,MAAM;GACN,SAAS;GACT,eAAe;GAChB;;CAGH,SAAS,YAIP,SAC0B;EAC1B,MAAM,QAAQ,sBACX,SAAS,KAAK,WAAW,MAAM,MAAM,OACvC;EACD,MAAM,EACJ,YACA,mBAAmB,KACnB,aAAa,OACb,4BACE;EACJ,MAAM,cAAcC,0DAAyB,QAAQ,WAAW;AAahE,SAAO;GACL,OAba,cAAc,aAAc;GAczC;GACA,cAdmB,0BACjB,iBACE;IAAE;IAAY;IAAkB;IAAY,EAC5C,wBACD,IACA,UACC,4CAAC;IAAI,GAAI;;KAAO;KACR;KAAY;KAAE;;KAChB;GAOX;;CAGH,SAAS,kBAAkB,IAAyC;EAElE,MAAM,QADU,sBAAsB,SAAS,KAAK,QAAQ,CACtC,KAAK;EAC3B,MAAM,aAAa,QACjB,SAAS,OAAO,UAAU,YAAY,OAAO,KAAK,MAAM,CAAC,SAAS,EACnE;AAED,MAAI,GACF,QAAO,GAAG,WAAW;AAGvB,SAAO;;CAGT,SAAS,iBAIP,SACA,IAIA;EACA,MAAM,QAAQ,OAAO,aAAa,CAAC,WAAW,MAAM,MAAM;EAC1D,MAAM,EAAE,YAAY,mBAAmB,KAAK,aAAa,UAAU;AAEnE,SAAO,gBAAgB;GAAE;GAAY;GAAkB;GAAY,CAAC,CAAC,GAAG;;CAG1E,SAAS,oBAIP,SACA,IACA;AACA,4DAAyB,QAAQ,QAAQ,WAAW;AAEpD,SAAO,gBAAgB,QAAQ,CAAC,GAAG;;AAGrC,QAAO;EAEL;EACA;EACA;EACA;EACA;EACA;EACD"}

package/dist/create-context.d.cts

@@ -0,0 +1,154 @@
+import { CreateFunction, CreatedMultiStepFormComponent } from "./step-schema.cjs";
+import { AnyMultiStepFormSchema, MultiStepFormSchema } from "./schema.cjs";
+import { UseMultiStepFormData } from "./hooks/use-multi-step-form-data.cjs";
+import { ComponentProps, ReactNode } from "react";
+
+//#region src/create-context.d.ts
+type BaseOptions<TSchema extends AnyMultiStepFormSchema, TTargetStep extends keyof MultiStepFormSchema.resolvedStep<TSchema>> = {
+  /**
+   * The step to return data from.
+   */
+  targetStep: TTargetStep;
+};
+type UseCurrentStepOptions<TSchema extends AnyMultiStepFormSchema, TTargetStep extends keyof MultiStepFormSchema.resolvedStep<TSchema>, props, isDataGuaranteed extends boolean = false> = BaseOptions<TSchema, TTargetStep> & {
+  /**
+   * Determines if the result should follow "strictness".
+   * The result will change based on the value for this option.
+   *
+   * - `true`: `data` is **defined** and `hasData` isn't available.
+   * - `false`: `data` _can be_ `undefined`, but the `hasData` property is available
+   * to help with type narrowing.
+   *
+   * @default false
+   * @example
+   * ### `true`
+   * ```tsx
+   * function MyComponent() {
+   *  const { data, NoCurrentData } = useCurrentStep({
+   *    stepNumber: 1,
+   *    isDataGuaranteed: true,
+   *  })
+   *
+   * // Notice how `NoCurrentData` is still available
+   * // Do things with `data` here
+   * }
+   * ```
+   *
+   * ### `false` - The default
+   * ```tsx
+   * function MyComponent() {
+   *  const { data, NoCurrentData, hasData } = useCurrentStep({
+   *    stepNumber: 1,
+   *  })
+   *
+   *  if (!hasData) {
+   *    return <NoCurrentData />
+   *  }
+   *
+   * // Do things with `data` here
+   * }
+   * ```
+   */
+  isDataGuaranteed?: isDataGuaranteed;
+  /**
+   * An optional transformation function to provide a custom not found message.
+   */
+  notFoundMessage?: CreateFunction<[ctx: BaseOptions<TSchema, TTargetStep>, props: props], ReactNode>;
+};
+interface UseCurrentStepBaseResult<TData = unknown, TProps = undefined> {
+  /**
+   * The current step's data.
+   */
+  data: TData | undefined;
+  /**
+   * Boolean indicating if the current step has data.
+   */
+  hasData: boolean;
+  /**
+   * Component to render some sort of error if `data` isn't defined.
+   */
+  NoCurrentData: CreatedMultiStepFormComponent<TProps extends undefined ? Omit<ComponentProps<'div'>, 'children'> : TProps>;
+}
+interface UseCurrentStepErrorResult<TData = unknown, TProps = undefined> extends UseCurrentStepBaseResult<TData, TProps> {
+  data: undefined;
+  hasData: false;
+}
+interface UseCurrentStepSuccessResult<TData = unknown, TProps = undefined> extends UseCurrentStepBaseResult<TData, TProps> {
+  data: TData;
+  hasData: true;
+}
+type UseCurrentStepResult<TSchema extends AnyMultiStepFormSchema, TTargetStep extends keyof MultiStepFormSchema.resolvedStep<TSchema>, props, isDataGuaranteed extends boolean = false> = isDataGuaranteed extends true ? Omit<UseCurrentStepSuccessResult<MultiStepFormSchema.getData<TSchema, TTargetStep>, props>, 'hasData'> : UseCurrentStepErrorResult<MultiStepFormSchema.getData<TSchema, TTargetStep>, props> | UseCurrentStepSuccessResult<MultiStepFormSchema.getData<TSchema, TTargetStep>, props>;
+type UseProgressBaseOptions<TSchema extends AnyMultiStepFormSchema, TTargetStep extends keyof MultiStepFormSchema.resolvedStep<TSchema>> = BaseOptions<TSchema, TTargetStep> & {
+  /**
+   * The total amount of steps that are in the form.
+   *
+   * @default schema.stepData.steps.value.length
+   */
+  totalSteps?: number;
+  /**
+   * The highest value the progress indicator should go.
+   *
+   * @default 100
+   */
+  maxProgressValue?: number;
+};
+type UseProgressOptions<TSchema extends AnyMultiStepFormSchema, TTargetStep extends keyof MultiStepFormSchema.resolvedStep<TSchema>, props> = UseProgressBaseOptions<TSchema, TTargetStep> & {
+  /**
+   * An optional transformation function to provide a custom progress text.
+   */
+  progressTextTransformer?: CreateFunction<[ctx: Required<UseProgressBaseOptions<TSchema, TTargetStep>>, props], ReactNode>;
+};
+type UseProgressResult<props> = {
+  /**
+   * The value of the progress indicator.
+   */
+  value: number;
+  /**
+   * The highest value the progress indicator can be.
+   *
+   * @default 100
+   */
+  maxProgressValue: number;
+  ProgressText: CreatedMultiStepFormComponent<props extends undefined ? Omit<ComponentProps<'div'>, 'children'> : props>;
+};
+type CreateHOC<TContext, TProps> = (ctx: TContext, props: TProps) => CreatedMultiStepFormComponent<TProps>;
+type MultiStepFormContextResult<TSchema extends AnyMultiStepFormSchema, TResolvedStep extends MultiStepFormSchema.resolvedStep<TSchema> = MultiStepFormSchema.resolvedStep<TSchema>> = {
+  useMultiStepFormData: UseMultiStepFormData<TSchema>;
+  /**
+   * Gets the data for the specified step.
+   *
+   * @returns The data for the given step number.
+   */
+  useCurrentStepData: <targetStep extends keyof TResolvedStep, props = undefined, isDataGuaranteed extends boolean = false>(options: UseCurrentStepOptions<TSchema, targetStep, props, isDataGuaranteed>) => UseCurrentStepResult<TSchema, targetStep, props, isDataGuaranteed>;
+  useProgress: <targetStep extends keyof TResolvedStep, props = undefined>(options: UseProgressOptions<TSchema, targetStep, props>) => UseProgressResult<props>;
+  /**
+   * A hook that can be used to check if the form can be restarted. If no {@linkcode cb}
+   * is provided, the return value will be dictated by if there is an object stored in
+   * {@link MultiStepFormSchema#storage}.
+   * @param cb A callback function to provide custom logic for if the form can restart.
+   * @returns A boolean indicating if the form can restart.
+   */
+  useCanRestartForm: (cb?: (canRestart: boolean) => boolean) => boolean;
+  /**
+   * A HOC for creating a custom progress text for `useProgress`.
+   * @param options Options for creating the HOC.
+   * @param cb The callback function for creating the HOC.
+   * @returns A HOC for the `progressTextTransformer` option of the `useProgress` hook.
+   */
+  withProgressText: <targetStep extends keyof TResolvedStep, props = undefined>(options: UseProgressBaseOptions<TSchema, targetStep>, cb: (ctx: Required<UseProgressBaseOptions<TSchema, targetStep>>, props: props) => ReactNode) => CreatedMultiStepFormComponent<props>;
+  /**
+   * A HOC for creating a custom not found component for when a step's data is `undefined`.
+   * @param options Options for creating the HOC.
+   * @param cb The callback function for creating the HOC.
+   * @returns A HOC for the `notFoundMessage` option of the `useCurrentStep` hook.
+   */
+  withNoStepDataFound: <targetStep extends keyof TResolvedStep, props = undefined>(options: BaseOptions<TSchema, targetStep>, cb: (ctx: BaseOptions<TSchema, targetStep>, props: props) => ReactNode) => CreatedMultiStepFormComponent<props>;
+};
+/**
+ * Create multi step form context with a {@linkcode MultiStepFormSchema} instance.
+ * @param schema The {@linkcode MultiStepFormSchema} instance.
+ */
+declare function createMultiStepFormContext<schema extends AnyMultiStepFormSchema, resolvedStep extends MultiStepFormSchema.resolvedStep<schema> = MultiStepFormSchema.resolvedStep<schema>>(schema: schema): MultiStepFormContextResult<schema>;
+//#endregion
+export { CreateHOC, MultiStepFormContextResult, UseCurrentStepBaseResult, UseCurrentStepErrorResult, UseCurrentStepOptions, UseCurrentStepResult, UseCurrentStepSuccessResult, UseProgressBaseOptions, UseProgressOptions, UseProgressResult, createMultiStepFormContext };
+//# sourceMappingURL=create-context.d.cts.map

package/dist/create-context.d.mts

@@ -0,0 +1,154 @@
+import { CreateFunction, CreatedMultiStepFormComponent } from "./step-schema.mjs";
+import { AnyMultiStepFormSchema, MultiStepFormSchema } from "./schema.mjs";
+import { UseMultiStepFormData } from "./hooks/use-multi-step-form-data.mjs";
+import { ComponentProps, ReactNode } from "react";
+
+//#region src/create-context.d.ts
+type BaseOptions<TSchema extends AnyMultiStepFormSchema, TTargetStep extends keyof MultiStepFormSchema.resolvedStep<TSchema>> = {
+  /**
+   * The step to return data from.
+   */
+  targetStep: TTargetStep;
+};
+type UseCurrentStepOptions<TSchema extends AnyMultiStepFormSchema, TTargetStep extends keyof MultiStepFormSchema.resolvedStep<TSchema>, props, isDataGuaranteed extends boolean = false> = BaseOptions<TSchema, TTargetStep> & {
+  /**
+   * Determines if the result should follow "strictness".
+   * The result will change based on the value for this option.
+   *
+   * - `true`: `data` is **defined** and `hasData` isn't available.
+   * - `false`: `data` _can be_ `undefined`, but the `hasData` property is available
+   * to help with type narrowing.
+   *
+   * @default false
+   * @example
+   * ### `true`
+   * ```tsx
+   * function MyComponent() {
+   *  const { data, NoCurrentData } = useCurrentStep({
+   *    stepNumber: 1,
+   *    isDataGuaranteed: true,
+   *  })
+   *
+   * // Notice how `NoCurrentData` is still available
+   * // Do things with `data` here
+   * }
+   * ```
+   *
+   * ### `false` - The default
+   * ```tsx
+   * function MyComponent() {
+   *  const { data, NoCurrentData, hasData } = useCurrentStep({
+   *    stepNumber: 1,
+   *  })
+   *
+   *  if (!hasData) {
+   *    return <NoCurrentData />
+   *  }
+   *
+   * // Do things with `data` here
+   * }
+   * ```
+   */
+  isDataGuaranteed?: isDataGuaranteed;
+  /**
+   * An optional transformation function to provide a custom not found message.
+   */
+  notFoundMessage?: CreateFunction<[ctx: BaseOptions<TSchema, TTargetStep>, props: props], ReactNode>;
+};
+interface UseCurrentStepBaseResult<TData = unknown, TProps = undefined> {
+  /**
+   * The current step's data.
+   */
+  data: TData | undefined;
+  /**
+   * Boolean indicating if the current step has data.
+   */
+  hasData: boolean;
+  /**
+   * Component to render some sort of error if `data` isn't defined.
+   */
+  NoCurrentData: CreatedMultiStepFormComponent<TProps extends undefined ? Omit<ComponentProps<'div'>, 'children'> : TProps>;
+}
+interface UseCurrentStepErrorResult<TData = unknown, TProps = undefined> extends UseCurrentStepBaseResult<TData, TProps> {
+  data: undefined;
+  hasData: false;
+}
+interface UseCurrentStepSuccessResult<TData = unknown, TProps = undefined> extends UseCurrentStepBaseResult<TData, TProps> {
+  data: TData;
+  hasData: true;
+}
+type UseCurrentStepResult<TSchema extends AnyMultiStepFormSchema, TTargetStep extends keyof MultiStepFormSchema.resolvedStep<TSchema>, props, isDataGuaranteed extends boolean = false> = isDataGuaranteed extends true ? Omit<UseCurrentStepSuccessResult<MultiStepFormSchema.getData<TSchema, TTargetStep>, props>, 'hasData'> : UseCurrentStepErrorResult<MultiStepFormSchema.getData<TSchema, TTargetStep>, props> | UseCurrentStepSuccessResult<MultiStepFormSchema.getData<TSchema, TTargetStep>, props>;
+type UseProgressBaseOptions<TSchema extends AnyMultiStepFormSchema, TTargetStep extends keyof MultiStepFormSchema.resolvedStep<TSchema>> = BaseOptions<TSchema, TTargetStep> & {
+  /**
+   * The total amount of steps that are in the form.
+   *
+   * @default schema.stepData.steps.value.length
+   */
+  totalSteps?: number;
+  /**
+   * The highest value the progress indicator should go.
+   *
+   * @default 100
+   */
+  maxProgressValue?: number;
+};
+type UseProgressOptions<TSchema extends AnyMultiStepFormSchema, TTargetStep extends keyof MultiStepFormSchema.resolvedStep<TSchema>, props> = UseProgressBaseOptions<TSchema, TTargetStep> & {
+  /**
+   * An optional transformation function to provide a custom progress text.
+   */
+  progressTextTransformer?: CreateFunction<[ctx: Required<UseProgressBaseOptions<TSchema, TTargetStep>>, props], ReactNode>;
+};
+type UseProgressResult<props> = {
+  /**
+   * The value of the progress indicator.
+   */
+  value: number;
+  /**
+   * The highest value the progress indicator can be.
+   *
+   * @default 100
+   */
+  maxProgressValue: number;
+  ProgressText: CreatedMultiStepFormComponent<props extends undefined ? Omit<ComponentProps<'div'>, 'children'> : props>;
+};
+type CreateHOC<TContext, TProps> = (ctx: TContext, props: TProps) => CreatedMultiStepFormComponent<TProps>;
+type MultiStepFormContextResult<TSchema extends AnyMultiStepFormSchema, TResolvedStep extends MultiStepFormSchema.resolvedStep<TSchema> = MultiStepFormSchema.resolvedStep<TSchema>> = {
+  useMultiStepFormData: UseMultiStepFormData<TSchema>;
+  /**
+   * Gets the data for the specified step.
+   *
+   * @returns The data for the given step number.
+   */
+  useCurrentStepData: <targetStep extends keyof TResolvedStep, props = undefined, isDataGuaranteed extends boolean = false>(options: UseCurrentStepOptions<TSchema, targetStep, props, isDataGuaranteed>) => UseCurrentStepResult<TSchema, targetStep, props, isDataGuaranteed>;
+  useProgress: <targetStep extends keyof TResolvedStep, props = undefined>(options: UseProgressOptions<TSchema, targetStep, props>) => UseProgressResult<props>;
+  /**
+   * A hook that can be used to check if the form can be restarted. If no {@linkcode cb}
+   * is provided, the return value will be dictated by if there is an object stored in
+   * {@link MultiStepFormSchema#storage}.
+   * @param cb A callback function to provide custom logic for if the form can restart.
+   * @returns A boolean indicating if the form can restart.
+   */
+  useCanRestartForm: (cb?: (canRestart: boolean) => boolean) => boolean;
+  /**
+   * A HOC for creating a custom progress text for `useProgress`.
+   * @param options Options for creating the HOC.
+   * @param cb The callback function for creating the HOC.
+   * @returns A HOC for the `progressTextTransformer` option of the `useProgress` hook.
+   */
+  withProgressText: <targetStep extends keyof TResolvedStep, props = undefined>(options: UseProgressBaseOptions<TSchema, targetStep>, cb: (ctx: Required<UseProgressBaseOptions<TSchema, targetStep>>, props: props) => ReactNode) => CreatedMultiStepFormComponent<props>;
+  /**
+   * A HOC for creating a custom not found component for when a step's data is `undefined`.
+   * @param options Options for creating the HOC.
+   * @param cb The callback function for creating the HOC.
+   * @returns A HOC for the `notFoundMessage` option of the `useCurrentStep` hook.
+   */
+  withNoStepDataFound: <targetStep extends keyof TResolvedStep, props = undefined>(options: BaseOptions<TSchema, targetStep>, cb: (ctx: BaseOptions<TSchema, targetStep>, props: props) => ReactNode) => CreatedMultiStepFormComponent<props>;
+};
+/**
+ * Create multi step form context with a {@linkcode MultiStepFormSchema} instance.
+ * @param schema The {@linkcode MultiStepFormSchema} instance.
+ */
+declare function createMultiStepFormContext<schema extends AnyMultiStepFormSchema, resolvedStep extends MultiStepFormSchema.resolvedStep<schema> = MultiStepFormSchema.resolvedStep<schema>>(schema: schema): MultiStepFormContextResult<schema>;
+//#endregion
+export { CreateHOC, MultiStepFormContextResult, UseCurrentStepBaseResult, UseCurrentStepErrorResult, UseCurrentStepOptions, UseCurrentStepResult, UseCurrentStepSuccessResult, UseProgressBaseOptions, UseProgressOptions, UseProgressResult, createMultiStepFormContext };
+//# sourceMappingURL=create-context.d.mts.map

package/dist/create-context.mjs

@@ -0,0 +1,92 @@
+import { createMultiStepFormDataHook, throwIfInvalidStepNumber } from "./hooks/use-multi-step-form-data.mjs";
+import { MultiStepFormStepSchema } from "@jfdevelops/multi-step-form-core";
+import { jsxs } from "react/jsx-runtime";
+
+//#region src/create-context.tsx
+function createComponent(ctx) {
+	return function(fn) {
+		return ((props) => fn(ctx, props));
+	};
+}
+/**
+* Create multi step form context with a {@linkcode MultiStepFormSchema} instance.
+* @param schema The {@linkcode MultiStepFormSchema} instance.
+*/
+function createMultiStepFormContext(schema) {
+	const useMultiStepFormData = createMultiStepFormDataHook(schema);
+	function useCurrentStepData(options) {
+		const { targetStep, notFoundMessage, isDataGuaranteed } = options;
+		const data = useMultiStepFormData({ targetStep });
+		const NoDataFoundComponent = notFoundMessage ? withNoStepDataFound({ targetStep }, notFoundMessage) : (props) => /* @__PURE__ */ jsxs("div", {
+			...props,
+			children: ["No data found for step ", String(targetStep)]
+		});
+		if (isDataGuaranteed) return {
+			data,
+			NoCurrentData: NoDataFoundComponent
+		};
+		if (MultiStepFormStepSchema.hasData(data)) return {
+			data,
+			hasData: true,
+			NoCurrentData: NoDataFoundComponent
+		};
+		return {
+			data: void 0,
+			hasData: false,
+			NoCurrentData: NoDataFoundComponent
+		};
+	}
+	function useProgress(options) {
+		const steps = useMultiStepFormData((data) => data.stepSchema.steps.value.length);
+		const { targetStep, maxProgressValue = 100, totalSteps = steps, progressTextTransformer } = options;
+		const currentStep = throwIfInvalidStepNumber(schema, targetStep);
+		return {
+			value: currentStep / totalSteps * maxProgressValue,
+			maxProgressValue,
+			ProgressText: progressTextTransformer ? withProgressText({
+				targetStep,
+				maxProgressValue,
+				totalSteps
+			}, progressTextTransformer) : (props) => /* @__PURE__ */ jsxs("div", {
+				...props,
+				children: [
+					"Step ",
+					currentStep,
+					"/",
+					totalSteps
+				]
+			})
+		};
+	}
+	function useCanRestartForm(cb) {
+		const value = useMultiStepFormData((data) => data.storage).get();
+		const canRestart = Boolean(value && typeof value === "object" && Object.keys(value).length > 0);
+		if (cb) return cb(canRestart);
+		return canRestart;
+	}
+	function withProgressText(options, cb) {
+		const steps = schema.getSnapshot().stepSchema.steps.value.length;
+		const { targetStep, maxProgressValue = 100, totalSteps = steps } = options;
+		return createComponent({
+			targetStep,
+			maxProgressValue,
+			totalSteps
+		})(cb);
+	}
+	function withNoStepDataFound(options, cb) {
+		throwIfInvalidStepNumber(schema, options.targetStep);
+		return createComponent(options)(cb);
+	}
+	return {
+		useMultiStepFormData,
+		useCurrentStepData,
+		useProgress,
+		useCanRestartForm,
+		withProgressText,
+		withNoStepDataFound
+	};
+}
+
+//#endregion
+export { createMultiStepFormContext };
+//# sourceMappingURL=create-context.mjs.map

package/dist/create-context.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"create-context.mjs","names":[],"sources":["../src/create-context.tsx"],"sourcesContent":["import { MultiStepFormStepSchema } from '@jfdevelops/multi-step-form-core';\nimport { type ComponentProps, type ReactNode } from 'react';\nimport {\n  createMultiStepFormDataHook,\n  throwIfInvalidStepNumber,\n  UseMultiStepFormData,\n} from './hooks/use-multi-step-form-data';\nimport { MultiStepFormSchema, type AnyMultiStepFormSchema } from './schema';\nimport type {\n  CreatedMultiStepFormComponent,\n  CreateFunction,\n} from './step-schema';\n\ntype BaseOptions<\n  TSchema extends AnyMultiStepFormSchema,\n  TTargetStep extends keyof MultiStepFormSchema.resolvedStep<TSchema>\n> = {\n  /**\n   * The step to return data from.\n   */\n  targetStep: TTargetStep;\n};\nexport type UseCurrentStepOptions<\n  TSchema extends AnyMultiStepFormSchema,\n  TTargetStep extends keyof MultiStepFormSchema.resolvedStep<TSchema>,\n  props,\n  isDataGuaranteed extends boolean = false\n> = BaseOptions<TSchema, TTargetStep> & {\n  /**\n   * Determines if the result should follow \"strictness\".\n   * The result will change based on the value for this option.\n   *\n   * - `true`: `data` is **defined** and `hasData` isn't available.\n   * - `false`: `data` _can be_ `undefined`, but the `hasData` property is available\n   * to help with type narrowing.\n   *\n   * @default false\n   * @example\n   * ### `true`\n   * ```tsx\n   * function MyComponent() {\n   *  const { data, NoCurrentData } = useCurrentStep({\n   *    stepNumber: 1,\n   *    isDataGuaranteed: true,\n   *  })\n   *\n   * // Notice how `NoCurrentData` is still available\n   * // Do things with `data` here\n   * }\n   * ```\n   *\n   * ### `false` - The default\n   * ```tsx\n   * function MyComponent() {\n   *  const { data, NoCurrentData, hasData } = useCurrentStep({\n   *    stepNumber: 1,\n   *  })\n   *\n   *  if (!hasData) {\n   *    return <NoCurrentData />\n   *  }\n   *\n   * // Do things with `data` here\n   * }\n   * ```\n   */\n  isDataGuaranteed?: isDataGuaranteed;\n  /**\n   * An optional transformation function to provide a custom not found message.\n   */\n  notFoundMessage?: CreateFunction<\n    [ctx: BaseOptions<TSchema, TTargetStep>, props: props],\n    ReactNode\n  >;\n};\nexport interface UseCurrentStepBaseResult<TData = unknown, TProps = undefined> {\n  /**\n   * The current step's data.\n   */\n  data: TData | undefined;\n  /**\n   * Boolean indicating if the current step has data.\n   */\n  hasData: boolean;\n  /**\n   * Component to render some sort of error if `data` isn't defined.\n   */\n  NoCurrentData: CreatedMultiStepFormComponent<\n    TProps extends undefined ? Omit<ComponentProps<'div'>, 'children'> : TProps\n  >;\n}\nexport interface UseCurrentStepErrorResult<TData = unknown, TProps = undefined>\n  extends UseCurrentStepBaseResult<TData, TProps> {\n  data: undefined;\n  hasData: false;\n}\nexport interface UseCurrentStepSuccessResult<\n  TData = unknown,\n  TProps = undefined\n> extends UseCurrentStepBaseResult<TData, TProps> {\n  data: TData;\n  hasData: true;\n}\nexport type UseCurrentStepResult<\n  TSchema extends AnyMultiStepFormSchema,\n  TTargetStep extends keyof MultiStepFormSchema.resolvedStep<TSchema>,\n  props,\n  isDataGuaranteed extends boolean = false\n> = isDataGuaranteed extends true\n  ? Omit<\n      UseCurrentStepSuccessResult<\n        MultiStepFormSchema.getData<TSchema, TTargetStep>,\n        props\n      >,\n      'hasData'\n    >\n  :\n      | UseCurrentStepErrorResult<\n          MultiStepFormSchema.getData<TSchema, TTargetStep>,\n          props\n        >\n      | UseCurrentStepSuccessResult<\n          MultiStepFormSchema.getData<TSchema, TTargetStep>,\n          props\n        >;\nexport type UseProgressBaseOptions<\n  TSchema extends AnyMultiStepFormSchema,\n  TTargetStep extends keyof MultiStepFormSchema.resolvedStep<TSchema>\n> = BaseOptions<TSchema, TTargetStep> & {\n  /**\n   * The total amount of steps that are in the form.\n   *\n   * @default schema.stepData.steps.value.length\n   */\n  totalSteps?: number;\n  /**\n   * The highest value the progress indicator should go.\n   *\n   * @default 100\n   */\n  maxProgressValue?: number;\n};\nexport type UseProgressOptions<\n  TSchema extends AnyMultiStepFormSchema,\n  TTargetStep extends keyof MultiStepFormSchema.resolvedStep<TSchema>,\n  props\n> = UseProgressBaseOptions<TSchema, TTargetStep> & {\n  /**\n   * An optional transformation function to provide a custom progress text.\n   */\n  progressTextTransformer?: CreateFunction<\n    [ctx: Required<UseProgressBaseOptions<TSchema, TTargetStep>>, props],\n    ReactNode\n  >;\n};\nexport type UseProgressResult<props> = {\n  /**\n   * The value of the progress indicator.\n   */\n  value: number;\n  /**\n   * The highest value the progress indicator can be.\n   *\n   * @default 100\n   */\n  maxProgressValue: number;\n  ProgressText: CreatedMultiStepFormComponent<\n    props extends undefined ? Omit<ComponentProps<'div'>, 'children'> : props\n  >;\n};\nexport type CreateHOC<TContext, TProps> = (\n  ctx: TContext,\n  props: TProps\n) => CreatedMultiStepFormComponent<TProps>;\n\nexport type MultiStepFormContextResult<\n  TSchema extends AnyMultiStepFormSchema,\n  TResolvedStep extends MultiStepFormSchema.resolvedStep<TSchema> = MultiStepFormSchema.resolvedStep<TSchema>\n> = {\n  // MultiStepFormContext: schema;\n  // MultiStepFormProvider: (props: { children: ReactNode }) => JSX.Element;\n  // useMultiStepFormSchema: schema;\n  useMultiStepFormData: UseMultiStepFormData<TSchema>;\n  /**\n   * Gets the data for the specified step.\n   *\n   * @returns The data for the given step number.\n   */\n  useCurrentStepData: <\n    targetStep extends keyof TResolvedStep,\n    props = undefined,\n    isDataGuaranteed extends boolean = false\n  >(\n    options: UseCurrentStepOptions<TSchema, targetStep, props, isDataGuaranteed>\n  ) => UseCurrentStepResult<TSchema, targetStep, props, isDataGuaranteed>;\n  useProgress: <targetStep extends keyof TResolvedStep, props = undefined>(\n    options: UseProgressOptions<TSchema, targetStep, props>\n  ) => UseProgressResult<props>;\n  /**\n   * A hook that can be used to check if the form can be restarted. If no {@linkcode cb}\n   * is provided, the return value will be dictated by if there is an object stored in\n   * {@link MultiStepFormSchema#storage}.\n   * @param cb A callback function to provide custom logic for if the form can restart.\n   * @returns A boolean indicating if the form can restart.\n   */\n  useCanRestartForm: (cb?: (canRestart: boolean) => boolean) => boolean;\n  /**\n   * A HOC for creating a custom progress text for `useProgress`.\n   * @param options Options for creating the HOC.\n   * @param cb The callback function for creating the HOC.\n   * @returns A HOC for the `progressTextTransformer` option of the `useProgress` hook.\n   */\n  withProgressText: <targetStep extends keyof TResolvedStep, props = undefined>(\n    options: UseProgressBaseOptions<TSchema, targetStep>,\n    cb: (\n      ctx: Required<UseProgressBaseOptions<TSchema, targetStep>>,\n      props: props\n    ) => ReactNode\n  ) => CreatedMultiStepFormComponent<props>;\n  /**\n   * A HOC for creating a custom not found component for when a step's data is `undefined`.\n   * @param options Options for creating the HOC.\n   * @param cb The callback function for creating the HOC.\n   * @returns A HOC for the `notFoundMessage` option of the `useCurrentStep` hook.\n   */\n  withNoStepDataFound: <\n    targetStep extends keyof TResolvedStep,\n    props = undefined\n  >(\n    options: BaseOptions<TSchema, targetStep>,\n    cb: (ctx: BaseOptions<TSchema, targetStep>, props: props) => ReactNode\n  ) => CreatedMultiStepFormComponent<props>;\n};\n\nfunction createComponent<ctx>(ctx: ctx) {\n  return function <props>(fn: CreateFunction<[ctx, props], ReactNode>) {\n    return ((props: props) =>\n      fn(ctx, props)) as CreatedMultiStepFormComponent<props>;\n  };\n}\n\n/**\n * Create multi step form context with a {@linkcode MultiStepFormSchema} instance.\n * @param schema The {@linkcode MultiStepFormSchema} instance.\n */\n// export function createMultiStepFormContext<\n//   schema extends AnyMultiStepFormSchema\n// >(schema: schema): MultiStepFormContextResult<schema>;\n// /**\n//  * Create multi step form context without a {@linkcode MultiStepFormSchema} instance.\n//  *\n//  * The {@linkcode MultiStepFormSchema} instance is returned.\n//  * @param options Options to create a new instance of {@linkcode MultiStepFormSchema}.\n//  */\n// export function createMultiStepFormContext<\n//   step extends Step<casing>,\n//   casing extends CasingType = DefaultCasing,\n//   storageKey extends string = DefaultStorageKey,\n//   resolvedStep extends ResolvedStep<step, casing> = ResolvedStep<step, casing>,\n//   stepNumbers extends StepNumbers<resolvedStep> = StepNumbers<resolvedStep>,\n//   schema extends MultiStepFormSchema<\n//     step,\n//     casing,\n//     storageKey,\n//     resolvedStep,\n//     stepNumbers\n//   > = MultiStepFormSchema<step, casing, storageKey, resolvedStep, stepNumbers>\n// >(\n//   options: MultiStepFormSchemaConfig<\n//     step,\n//     Constrain<casing, CasingType>,\n//     storageKey\n//   >\n// ): MultiStepFormContextResult<schema> & {\n//   schema: MultiStepFormSchema<step, casing, storageKey>;\n// };\nexport function createMultiStepFormContext<\n  schema extends AnyMultiStepFormSchema,\n  resolvedStep extends MultiStepFormSchema.resolvedStep<schema> = MultiStepFormSchema.resolvedStep<schema>\n>(schema: schema): MultiStepFormContextResult<schema> {\n  // const isInstance = schemaOrOptions instanceof MultiStepFormSchema;\n  // const schema: schema = isInstance\n  //   ? schemaOrOptions\n  //   : createMultiStepFormSchema(schemaOrOptions);\n  // const Context = createContext(schema);\n\n  // function Provider({ children }: { children: ReactNode }) {\n  //   const [observer] = useState(() => new MultiStepFormObserver({ schema }));\n\n  //   useEffect(() => {\n  //     const unmount = schema.mount();\n\n  //     return () => {\n  //       unmount();\n  //       observer.destroy();\n  //     };\n  //   }, [observer]);\n\n  //   return <Context.Provider value={observer}>{children}</Context.Provider>;\n  // }\n\n  // function throwIfInvalidStepNumber(\n  //   schema: MultiStepFormSchema<step, casing, storageKey>,\n  //   stepNumber: number\n  // ) {\n  //   const formatter = new Intl.ListFormat('en', {\n  //     type: 'disjunction',\n  //     style: 'long',\n  //   });\n  //   const { as, isValidStepNumber } = schema.stepSchema.steps;\n\n  //   invariant(\n  //     isValidStepNumber(stepNumber),\n  //     `The step number \"${stepNumber}\" is not a valid step number. Valid step numbers include ${formatter.format(\n  //       as('array.string.untyped')\n  //     )}`,\n  //     TypeError\n  //   );\n  // }\n\n  // @ts-ignore Type instantiation is excessively deep and possibly infinite\n  const useMultiStepFormData = createMultiStepFormDataHook(schema);\n\n  function useCurrentStepData<\n    targetStep extends keyof resolvedStep,\n    props = undefined,\n    isDataGuaranteed extends boolean = false\n  >(\n    options: UseCurrentStepOptions<schema, targetStep, props, isDataGuaranteed>\n  ): UseCurrentStepResult<schema, targetStep, props, isDataGuaranteed> {\n    const { targetStep, notFoundMessage, isDataGuaranteed } = options;\n    const data = useMultiStepFormData({\n      targetStep,\n    });\n    const NoDataFoundComponent = notFoundMessage\n      ? withNoStepDataFound({ targetStep }, notFoundMessage)\n      : (props: Omit<ComponentProps<'div'>, 'children'>) => (\n          <div {...props}>No data found for step {String(targetStep)}</div>\n        );\n\n    if (isDataGuaranteed) {\n      return {\n        data,\n        NoCurrentData: NoDataFoundComponent as never,\n      } as never;\n    }\n\n    if (MultiStepFormStepSchema.hasData(data)) {\n      return {\n        data,\n        hasData: true,\n        NoCurrentData: NoDataFoundComponent as never,\n      } as never;\n    }\n\n    return {\n      data: undefined,\n      hasData: false,\n      NoCurrentData: NoDataFoundComponent as never,\n    } as never;\n  }\n\n  function useProgress<\n    targetStep extends keyof resolvedStep,\n    props = undefined\n  >(\n    options: UseProgressOptions<schema, targetStep, props>\n  ): UseProgressResult<props> {\n    const steps = useMultiStepFormData(\n      (data) => data.stepSchema.steps.value.length\n    );\n    const {\n      targetStep,\n      maxProgressValue = 100,\n      totalSteps = steps,\n      progressTextTransformer,\n    } = options;\n    const currentStep = throwIfInvalidStepNumber(schema, targetStep);\n    const value = (currentStep / totalSteps) * maxProgressValue;\n    const ProgressText = progressTextTransformer\n      ? withProgressText(\n          { targetStep, maxProgressValue, totalSteps },\n          progressTextTransformer\n        )\n      : (props: Omit<ComponentProps<'div'>, 'children'>) => (\n          <div {...props}>\n            Step {currentStep}/{totalSteps}\n          </div>\n        );\n\n    return {\n      value,\n      maxProgressValue,\n      ProgressText: ProgressText as never,\n    };\n  }\n\n  function useCanRestartForm(cb?: CreateFunction<[boolean], boolean>) {\n    const storage = useMultiStepFormData((data) => data.storage);\n    const value = storage.get();\n    const canRestart = Boolean(\n      value && typeof value === 'object' && Object.keys(value).length > 0\n    );\n\n    if (cb) {\n      return cb(canRestart);\n    }\n\n    return canRestart;\n  }\n\n  function withProgressText<\n    targetStep extends keyof resolvedStep,\n    props = undefined\n  >(\n    options: UseProgressBaseOptions<schema, targetStep>,\n    cb: (\n      ctx: Required<UseProgressBaseOptions<schema, targetStep>>,\n      props: props\n    ) => ReactNode\n  ) {\n    const steps = schema.getSnapshot().stepSchema.steps.value.length;\n    const { targetStep, maxProgressValue = 100, totalSteps = steps } = options;\n\n    return createComponent({ targetStep, maxProgressValue, totalSteps })(cb);\n  }\n\n  function withNoStepDataFound<\n    targetStep extends keyof resolvedStep,\n    props = undefined\n  >(\n    options: BaseOptions<schema, targetStep>,\n    cb: (ctx: BaseOptions<schema, targetStep>, props: props) => ReactNode\n  ) {\n    throwIfInvalidStepNumber(schema, options.targetStep);\n\n    return createComponent(options)(cb);\n  }\n\n  return {\n    // MultiStepFormContext: Context,\n    useMultiStepFormData,\n    useCurrentStepData,\n    useProgress,\n    useCanRestartForm,\n    withProgressText,\n    withNoStepDataFound,\n  };\n}\n"],"mappings":";;;;;AA0OA,SAAS,gBAAqB,KAAU;AACtC,QAAO,SAAiB,IAA6C;AACnE,WAAS,UACP,GAAG,KAAK,MAAM;;;;;;;AAuCpB,SAAgB,2BAGd,QAAoD;CA0CpD,MAAM,uBAAuB,4BAA4B,OAAO;CAEhE,SAAS,mBAKP,SACmE;EACnE,MAAM,EAAE,YAAY,iBAAiB,qBAAqB;EAC1D,MAAM,OAAO,qBAAqB,EAChC,YACD,CAAC;EACF,MAAM,uBAAuB,kBACzB,oBAAoB,EAAE,YAAY,EAAE,gBAAgB,IACnD,UACC,qBAAC;GAAI,GAAI;cAAO,2BAAwB,OAAO,WAAW;IAAO;AAGvE,MAAI,iBACF,QAAO;GACL;GACA,eAAe;GAChB;AAGH,MAAI,wBAAwB,QAAQ,KAAK,CACvC,QAAO;GACL;GACA,SAAS;GACT,eAAe;GAChB;AAGH,SAAO;GACL,MAAM;GACN,SAAS;GACT,eAAe;GAChB;;CAGH,SAAS,YAIP,SAC0B;EAC1B,MAAM,QAAQ,sBACX,SAAS,KAAK,WAAW,MAAM,MAAM,OACvC;EACD,MAAM,EACJ,YACA,mBAAmB,KACnB,aAAa,OACb,4BACE;EACJ,MAAM,cAAc,yBAAyB,QAAQ,WAAW;AAahE,SAAO;GACL,OAba,cAAc,aAAc;GAczC;GACA,cAdmB,0BACjB,iBACE;IAAE;IAAY;IAAkB;IAAY,EAC5C,wBACD,IACA,UACC,qBAAC;IAAI,GAAI;;KAAO;KACR;KAAY;KAAE;;KAChB;GAOX;;CAGH,SAAS,kBAAkB,IAAyC;EAElE,MAAM,QADU,sBAAsB,SAAS,KAAK,QAAQ,CACtC,KAAK;EAC3B,MAAM,aAAa,QACjB,SAAS,OAAO,UAAU,YAAY,OAAO,KAAK,MAAM,CAAC,SAAS,EACnE;AAED,MAAI,GACF,QAAO,GAAG,WAAW;AAGvB,SAAO;;CAGT,SAAS,iBAIP,SACA,IAIA;EACA,MAAM,QAAQ,OAAO,aAAa,CAAC,WAAW,MAAM,MAAM;EAC1D,MAAM,EAAE,YAAY,mBAAmB,KAAK,aAAa,UAAU;AAEnE,SAAO,gBAAgB;GAAE;GAAY;GAAkB;GAAY,CAAC,CAAC,GAAG;;CAG1E,SAAS,oBAIP,SACA,IACA;AACA,2BAAyB,QAAQ,QAAQ,WAAW;AAEpD,SAAO,gBAAgB,QAAQ,CAAC,GAAG;;AAGrC,QAAO;EAEL;EACA;EACA;EACA;EACA;EACA;EACD"}

package/dist/field.cjs

@@ -0,0 +1,22 @@
+
+//#region src/field.tsx
+let field;
+(function(_field) {
+	function create(propsCreator) {
+		const Field = (props) => {
+			const { children, name } = props;
+			return children(propsCreator(name));
+		};
+		return Field;
+	}
+	_field.create = create;
+})(field || (field = {}));
+
+//#endregion
+Object.defineProperty(exports, 'field', {
+  enumerable: true,
+  get: function () {
+    return field;
+  }
+});
+//# sourceMappingURL=field.cjs.map

package/dist/field.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"field.cjs","names":["Field: field.component<TResolvedStep, TTargetStep>"],"sources":["../src/field.tsx"],"sourcesContent":["import type {\n  AnyResolvedStep,\n  fields,\n  Override,\n  Updater,\n} from '@jfdevelops/multi-step-form-core';\nimport type { ReactNode } from 'react';\n\nexport namespace field {\n  type sharedProps<TField extends string> = {\n    /**\n     * The name of the field.\n     */\n    name: TField;\n  };\n\n  export type childrenProps<\n    TResolvedStep extends AnyResolvedStep,\n    TTargetStep extends keyof TResolvedStep,\n    TField extends fields.getDeep<TResolvedStep, TTargetStep>,\n    TValue extends fields.resolveDeepPath<\n      TResolvedStep,\n      TTargetStep,\n      TField\n    > = fields.resolveDeepPath<TResolvedStep, TTargetStep, TField>\n  > = sharedProps<TField> &\n    Override<\n      fields.get<TResolvedStep, TTargetStep>[fields.parentOf<TField>],\n      'defaultValue',\n      TValue\n    > & {\n      /**\n       * A useful wrapper around `update` to update the specific field.\n       * @param value The new value for the field.\n       */\n      onInputChange: (value: Updater<TValue>) => void;\n      /**\n       * Resets the field's value to the original value that was\n       * defined in the config.\n       */\n      reset: () => void;\n    };\n  export type props<\n    TResolvedStep extends AnyResolvedStep,\n    TTargetStep extends keyof TResolvedStep,\n    TField extends fields.getDeep<TResolvedStep, TTargetStep>\n  > = sharedProps<TField> & {\n    children: (\n      props: childrenProps<TResolvedStep, TTargetStep, TField>\n    ) => ReactNode;\n  };\n  export type component<\n    TResolvedStep extends AnyResolvedStep,\n    TTargetStep extends keyof TResolvedStep\n  > = <TField extends fields.getDeep<TResolvedStep, TTargetStep>>(\n    props: props<TResolvedStep, TTargetStep, TField>\n  ) => ReactNode;\n\n  /**\n   * Create a field.\n   * @param propsCreator\n   * @returns\n   */\n  export function create<\n    TResolvedStep extends AnyResolvedStep,\n    TTargetStep extends keyof TResolvedStep\n  >(\n    propsCreator: <TField extends fields.getDeep<TResolvedStep, TTargetStep>>(\n      name: TField\n    ) => field.childrenProps<TResolvedStep, TTargetStep, TField>\n  ) {\n    const Field: field.component<TResolvedStep, TTargetStep> = (props) => {\n      const { children, name } = props;\n      const createdProps = propsCreator(name);\n\n      return children(createdProps);\n    };\n\n    return Field;\n  }\n}\n"],"mappings":";;;;CA+DS,SAAS,OAId,cAGA;EACA,MAAMA,SAAsD,UAAU;GACpE,MAAM,EAAE,UAAU,SAAS;AAG3B,UAAO,SAFc,aAAa,KAAK,CAEV;;AAG/B,SAAO"}

package/dist/field.d.cts

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