@saas-ui/forms 2.0.0-next.19 → 2.0.0-next.20

package/dist/zod/index.mjs

@@ -1,7 +1,7 @@
 import { zodResolver } from '@hookform/resolvers/zod';
 export { zodResolver } from '@hookform/resolvers/zod';
 import { get } from '@chakra-ui/utils';
-import { createForm } from '@saas-ui/forms';
+import { createForm, createStepForm } from '@saas-ui/forms';
 
 // zod/src/zod-resolver.ts
 var getType = (field) => {
@@ -83,10 +83,21 @@ var createZodForm = (options) => {
   ZodForm.id = "ZodForm";
   return ZodForm;
 };
+var createZodStepForm = (options) => {
+  const ZodStepForm = createStepForm({
+    resolver: (schema) => zodResolver(schema, options == null ? void 0 : options.schemaOptions, options == null ? void 0 : options.resolverOptions),
+    fieldResolver: zodFieldResolver,
+    ...options
+  });
+  ZodStepForm.displayName = "ZodStepForm";
+  ZodStepForm.id = "ZodStepForm";
+  return ZodStepForm;
+};
 
 // zod/src/index.ts
 var Form = createZodForm();
+var StepForm = createZodStepForm();
 
-export { Form, createZodForm, getFieldsFromSchema, getNestedSchema, zodFieldResolver, zodMeta, zodParseMeta };
+export { Form, StepForm, createZodForm, getFieldsFromSchema, getNestedSchema, zodFieldResolver, zodMeta, zodParseMeta };
 //# sourceMappingURL=out.js.map
 //# sourceMappingURL=index.mjs.map

package/dist/zod/index.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../zod/src/zod-resolver.ts","../../zod/src/create-zod-form.ts","../../zod/src/index.ts"],"names":[],"mappings":";AACA,SAAS,mBAAmB;AAC5B,SAAS,WAAW;AAUpB,IAAM,UAAU,CAAC,UAAwB;AACvC,UAAQ,MAAM,KAAK,UAAU;AAAA,IAC3B,KAAK;AACH,aAAO;AAAA,IACT,KAAK;AACH,aAAO;AAAA,IACT,KAAK;AACH,aAAO;AAAA,IACT,KAAK;AACH,aAAO;AAAA,IACT,KAAK;AAAA,IACL;AACE,aAAO;AAAA,EACX;AACF;AAEA,IAAM,iBAAiB,CAAC,OAAY,SAAiB;AA5BrD;AA6BE,UAAO,WAAM,KAAK,IAAI,MAAf,mBAAkB;AAC3B;AAQO,IAAM,sBAAsB,CAAC,WAAuC;AACzE,QAAM,SAAuB,CAAC;AAE9B,MAAI,eAAoC,CAAC;AACzC,MAAI,OAAO,KAAK,aAAa,YAAY;AACvC,mBAAe,OAAO,KAAK,KAAK;AAAA,EAClC,WAAW,OAAO,KAAK,aAAa,aAAa;AAC/C,mBAAe,OAAO,KAAK,MAAM;AAAA,EACnC,OAAO;AACL,WAAO;AAAA,EACT;AAEA,aAAW,QAAQ,cAAc;AAC/B,UAAM,QAAQ,aAAa,IAAI;AAE/B,UAAM,UAAmB,CAAC;AAC1B,QAAI,MAAM,KAAK,aAAa,YAAY;AACtC,cAAQ,MAAM,eAAe,OAAO,WAAW;AAC/C,cAAQ,MAAM,eAAe,OAAO,WAAW;AAAA,IACjD;AAEA,UAAM,OAAO,MAAM,eAAe,aAAa,MAAM,WAAW;AAEhE,WAAO,KAAK;AAAA,MACV;AAAA,MACA,QAAO,6BAAM,UAAS,MAAM,eAAe;AAAA,MAC3C,OAAM,6BAAM,SAAQ,QAAQ,KAAK;AAAA,MACjC,GAAG;AAAA,IACL,CAAC;AAAA,EACH;AACA,SAAO;AACT;AAEO,IAAM,kBAAkB,CAAC,QAAsB,SAAiB;AACrE,SAAO,IAAI,OAAO,KAAK,MAAM,GAAG,IAAI;AACtC;AAEO,IAAM,mBAAmB,CAAyB,WAAc;AACrE,SAAO;AAAA,IACL,YAAY;AACV,aAAO,oBAAoB,MAAM;AAAA,IACnC;AAAA,IACA,gBAAgB,MAAc;AAC5B,aAAO,oBAAoB,gBAAgB,QAAQ,IAAI,CAAC;AAAA,IAC1D;AAAA,EACF;AACF;AAOO,IAAM,UAAU,CAAC,SAAkB;AACxC,SAAO,KAAK,UAAU,IAAI;AAC5B;AAEO,IAAM,eAAe,CAAC,SAAiB;AAC5C,MAAI;AACF,WAAO,KAAK,MAAM,IAAI;AAAA,EACxB,SAAS,GAAP;AACA,WAAO;AAAA,EACT;AACF;;;ACrGA;AAAA,EACE;AAAA,OAKK;AAkCA,IAAM,gBAAgB,CAC3B,YACG;AACH,QAAM,UAAU,WAAW;AAAA,IACzB,UAAU,CAAC,WACT,YAAY,QAAQ,mCAAS,eAAe,mCAAS,eAAe;AAAA,IACtE,eAAe;AAAA,IACf,GAAG;AAAA,EACL,CAAC;AAED,UAAQ,cAAc;AACtB,UAAQ,KAAK;AAEb,SAAO;AACT;;;ACzCO,IAAM,OAAO,cAAc","sourcesContent":["import * as z from 'zod'\nimport { zodResolver } from '@hookform/resolvers/zod'\nimport { get } from '@chakra-ui/utils'\nimport { FieldProps } from '@saas-ui/forms'\n\nexport { zodResolver }\n\nexport type Options = {\n  min?: number\n  max?: number\n}\n\nconst getType = (field: z.ZodTypeAny) => {\n  switch (field._def.typeName) {\n    case 'ZodArray':\n      return 'array'\n    case 'ZodObject':\n      return 'object'\n    case 'ZodNumber':\n      return 'number'\n    case 'ZodDate':\n      return 'date'\n    case 'ZodString':\n    default:\n      return 'text'\n  }\n}\n\nconst getArrayOption = (field: any, name: string) => {\n  return field._def[name]?.value\n}\n\n/**\n * A helper function to render forms automatically based on a Yup schema\n *\n * @param schema The Yup schema\n * @returns {FieldProps[]}\n */\nexport const getFieldsFromSchema = (schema: z.ZodTypeAny): FieldProps[] => {\n  const fields: FieldProps[] = []\n\n  let schemaFields: Record<string, any> = {}\n  if (schema._def.typeName === 'ZodArray') {\n    schemaFields = schema._def.type.shape\n  } else if (schema._def.typeName === 'ZodObject') {\n    schemaFields = schema._def.shape()\n  } else {\n    return fields\n  }\n\n  for (const name in schemaFields) {\n    const field = schemaFields[name]\n\n    const options: Options = {}\n    if (field._def.typeName === 'ZodArray') {\n      options.min = getArrayOption(field, 'minLength')\n      options.max = getArrayOption(field, 'maxLength')\n    }\n\n    const meta = field.description && zodParseMeta(field.description)\n\n    fields.push({\n      name,\n      label: meta?.label || field.description || name,\n      type: meta?.type || getType(field),\n      ...options,\n    })\n  }\n  return fields\n}\n\nexport const getNestedSchema = (schema: z.ZodTypeAny, path: string) => {\n  return get(schema._def.shape(), path)\n}\n\nexport const zodFieldResolver = <T extends z.ZodTypeAny>(schema: T) => {\n  return {\n    getFields() {\n      return getFieldsFromSchema(schema)\n    },\n    getNestedFields(name: string) {\n      return getFieldsFromSchema(getNestedSchema(schema, name))\n    },\n  }\n}\n\nexport interface ZodMeta {\n  label: string\n  type?: string\n}\n\nexport const zodMeta = (meta: ZodMeta) => {\n  return JSON.stringify(meta)\n}\n\nexport const zodParseMeta = (meta: string) => {\n  try {\n    return JSON.parse(meta)\n  } catch (e) {\n    return meta\n  }\n}\n","import {\n  createForm,\n  CreateFormProps,\n  WithFields,\n  FormProps,\n  FieldValues,\n} from '@saas-ui/forms'\nimport { zodFieldResolver, zodResolver } from './zod-resolver'\nimport { z } from 'zod'\n\ntype ResolverArgs = Parameters<typeof zodResolver>\n\nexport interface CreateZodFormProps<FieldDefs>\n  extends CreateFormProps<FieldDefs> {\n  schemaOptions?: ResolverArgs[1]\n  resolverOptions?: ResolverArgs[2]\n}\n\nexport type ZodFormType<\n  FieldDefs,\n  ExtraProps = object,\n  ExtraOverrides = object,\n  Type extends 'zod' = 'zod'\n> = (<\n  TSchema extends z.AnyZodObject = z.AnyZodObject,\n  TFieldValues extends z.infer<TSchema> = z.infer<TSchema>,\n  TContext extends object = object\n>(\n  props: WithFields<\n    FormProps<TSchema, TFieldValues, TContext>,\n    FieldDefs,\n    ExtraOverrides\n  > & {\n    ref?: React.ForwardedRef<HTMLFormElement>\n  } & ExtraProps\n) => React.ReactElement) & {\n  displayName?: string\n  id?: string\n}\n\nexport const createZodForm = <FieldDefs>(\n  options?: CreateZodFormProps<FieldDefs>\n) => {\n  const ZodForm = createForm({\n    resolver: (schema: any) =>\n      zodResolver(schema, options?.schemaOptions, options?.resolverOptions),\n    fieldResolver: zodFieldResolver,\n    ...options,\n  })\n\n  ZodForm.displayName = 'ZodForm'\n  ZodForm.id = 'ZodForm'\n\n  return ZodForm as ZodFormType<FieldDefs>\n}\n","export {\n  zodResolver,\n  getFieldsFromSchema,\n  getNestedSchema,\n  zodFieldResolver,\n  zodMeta,\n  zodParseMeta,\n} from './zod-resolver'\nexport type { Options, ZodMeta } from './zod-resolver'\nexport { createZodForm, type ZodFormType } from './create-zod-form'\n\nimport { createZodForm } from './create-zod-form'\n\nexport const Form = createZodForm()\n"]}
+{"version":3,"sources":["../../zod/src/zod-resolver.ts","../../zod/src/create-zod-form.ts","../../zod/src/create-zod-step-form.ts","../../zod/src/index.ts"],"names":[],"mappings":";AACA,SAAS,mBAAmB;AAC5B,SAAS,WAAW;AAUpB,IAAM,UAAU,CAAC,UAAwB;AACvC,UAAQ,MAAM,KAAK,UAAU;AAAA,IAC3B,KAAK;AACH,aAAO;AAAA,IACT,KAAK;AACH,aAAO;AAAA,IACT,KAAK;AACH,aAAO;AAAA,IACT,KAAK;AACH,aAAO;AAAA,IACT,KAAK;AAAA,IACL;AACE,aAAO;AAAA,EACX;AACF;AAEA,IAAM,iBAAiB,CAAC,OAAY,SAAiB;AA5BrD;AA6BE,UAAO,WAAM,KAAK,IAAI,MAAf,mBAAkB;AAC3B;AAQO,IAAM,sBAAsB,CAAC,WAAuC;AACzE,QAAM,SAAuB,CAAC;AAE9B,MAAI,eAAoC,CAAC;AACzC,MAAI,OAAO,KAAK,aAAa,YAAY;AACvC,mBAAe,OAAO,KAAK,KAAK;AAAA,EAClC,WAAW,OAAO,KAAK,aAAa,aAAa;AAC/C,mBAAe,OAAO,KAAK,MAAM;AAAA,EACnC,OAAO;AACL,WAAO;AAAA,EACT;AAEA,aAAW,QAAQ,cAAc;AAC/B,UAAM,QAAQ,aAAa,IAAI;AAE/B,UAAM,UAAmB,CAAC;AAC1B,QAAI,MAAM,KAAK,aAAa,YAAY;AACtC,cAAQ,MAAM,eAAe,OAAO,WAAW;AAC/C,cAAQ,MAAM,eAAe,OAAO,WAAW;AAAA,IACjD;AAEA,UAAM,OAAO,MAAM,eAAe,aAAa,MAAM,WAAW;AAEhE,WAAO,KAAK;AAAA,MACV;AAAA,MACA,QAAO,6BAAM,UAAS,MAAM,eAAe;AAAA,MAC3C,OAAM,6BAAM,SAAQ,QAAQ,KAAK;AAAA,MACjC,GAAG;AAAA,IACL,CAAC;AAAA,EACH;AACA,SAAO;AACT;AAEO,IAAM,kBAAkB,CAAC,QAAsB,SAAiB;AACrE,SAAO,IAAI,OAAO,KAAK,MAAM,GAAG,IAAI;AACtC;AAEO,IAAM,mBAAmB,CAAyB,WAAc;AACrE,SAAO;AAAA,IACL,YAAY;AACV,aAAO,oBAAoB,MAAM;AAAA,IACnC;AAAA,IACA,gBAAgB,MAAc;AAC5B,aAAO,oBAAoB,gBAAgB,QAAQ,IAAI,CAAC;AAAA,IAC1D;AAAA,EACF;AACF;AAOO,IAAM,UAAU,CAAC,SAAkB;AACxC,SAAO,KAAK,UAAU,IAAI;AAC5B;AAEO,IAAM,eAAe,CAAC,SAAiB;AAC5C,MAAI;AACF,WAAO,KAAK,MAAM,IAAI;AAAA,EACxB,SAAS,GAAP;AACA,WAAO;AAAA,EACT;AACF;;;ACrGA;AAAA,EACE;AAAA,OAKK;AAkCA,IAAM,gBAAgB,CAC3B,YACG;AACH,QAAM,UAAU,WAAW;AAAA,IACzB,UAAU,CAAC,WACT,YAAY,QAAQ,mCAAS,eAAe,mCAAS,eAAe;AAAA,IACtE,eAAe;AAAA,IACf,GAAG;AAAA,EACL,CAAC;AAED,UAAQ,cAAc;AACtB,UAAQ,KAAK;AAEb,SAAO;AACT;;;ACtDA;AAAA,EAEE;AAAA,OAGK;AA6CA,IAAM,oBAAoB,CAC/B,YACG;AACH,QAAM,cAAc,eAAmC;AAAA,IACrD,UAAU,CAAC,WACT,YAAY,QAAQ,mCAAS,eAAe,mCAAS,eAAe;AAAA,IACtE,eAAe;AAAA,IACf,GAAG;AAAA,EACL,CAAC;AAED,cAAY,cAAc;AAC1B,cAAY,KAAK;AAEjB,SAAO;AACT;;;AClDO,IAAM,OAAO,cAAc;AAE3B,IAAM,WAAW,kBAAkB","sourcesContent":["import * as z from 'zod'\nimport { zodResolver } from '@hookform/resolvers/zod'\nimport { get } from '@chakra-ui/utils'\nimport { FieldProps } from '@saas-ui/forms'\n\nexport { zodResolver }\n\nexport type Options = {\n  min?: number\n  max?: number\n}\n\nconst getType = (field: z.ZodTypeAny) => {\n  switch (field._def.typeName) {\n    case 'ZodArray':\n      return 'array'\n    case 'ZodObject':\n      return 'object'\n    case 'ZodNumber':\n      return 'number'\n    case 'ZodDate':\n      return 'date'\n    case 'ZodString':\n    default:\n      return 'text'\n  }\n}\n\nconst getArrayOption = (field: any, name: string) => {\n  return field._def[name]?.value\n}\n\n/**\n * A helper function to render forms automatically based on a Yup schema\n *\n * @param schema The Yup schema\n * @returns {FieldProps[]}\n */\nexport const getFieldsFromSchema = (schema: z.ZodTypeAny): FieldProps[] => {\n  const fields: FieldProps[] = []\n\n  let schemaFields: Record<string, any> = {}\n  if (schema._def.typeName === 'ZodArray') {\n    schemaFields = schema._def.type.shape\n  } else if (schema._def.typeName === 'ZodObject') {\n    schemaFields = schema._def.shape()\n  } else {\n    return fields\n  }\n\n  for (const name in schemaFields) {\n    const field = schemaFields[name]\n\n    const options: Options = {}\n    if (field._def.typeName === 'ZodArray') {\n      options.min = getArrayOption(field, 'minLength')\n      options.max = getArrayOption(field, 'maxLength')\n    }\n\n    const meta = field.description && zodParseMeta(field.description)\n\n    fields.push({\n      name,\n      label: meta?.label || field.description || name,\n      type: meta?.type || getType(field),\n      ...options,\n    })\n  }\n  return fields\n}\n\nexport const getNestedSchema = (schema: z.ZodTypeAny, path: string) => {\n  return get(schema._def.shape(), path)\n}\n\nexport const zodFieldResolver = <T extends z.ZodTypeAny>(schema: T) => {\n  return {\n    getFields() {\n      return getFieldsFromSchema(schema)\n    },\n    getNestedFields(name: string) {\n      return getFieldsFromSchema(getNestedSchema(schema, name))\n    },\n  }\n}\n\nexport interface ZodMeta {\n  label: string\n  type?: string\n}\n\nexport const zodMeta = (meta: ZodMeta) => {\n  return JSON.stringify(meta)\n}\n\nexport const zodParseMeta = (meta: string) => {\n  try {\n    return JSON.parse(meta)\n  } catch (e) {\n    return meta\n  }\n}\n","import {\n  createForm,\n  CreateFormProps,\n  WithFields,\n  FormProps,\n  FieldValues,\n} from '@saas-ui/forms'\nimport { zodFieldResolver, zodResolver } from './zod-resolver'\nimport { z } from 'zod'\n\ntype ResolverArgs = Parameters<typeof zodResolver>\n\nexport interface CreateZodFormProps<FieldDefs>\n  extends CreateFormProps<FieldDefs> {\n  schemaOptions?: ResolverArgs[1]\n  resolverOptions?: ResolverArgs[2]\n}\n\nexport type ZodFormType<\n  FieldDefs,\n  ExtraProps = object,\n  ExtraOverrides = object,\n  Type extends 'zod' = 'zod'\n> = (<\n  TSchema extends z.AnyZodObject = z.AnyZodObject,\n  TFieldValues extends z.infer<TSchema> = z.infer<TSchema>,\n  TContext extends object = object\n>(\n  props: WithFields<\n    FormProps<TSchema, TFieldValues, TContext>,\n    FieldDefs,\n    ExtraOverrides\n  > & {\n    ref?: React.ForwardedRef<HTMLFormElement>\n  } & ExtraProps\n) => React.ReactElement) & {\n  displayName?: string\n  id?: string\n}\n\nexport const createZodForm = <FieldDefs>(\n  options?: CreateZodFormProps<FieldDefs>\n) => {\n  const ZodForm = createForm({\n    resolver: (schema: any) =>\n      zodResolver(schema, options?.schemaOptions, options?.resolverOptions),\n    fieldResolver: zodFieldResolver,\n    ...options,\n  })\n\n  ZodForm.displayName = 'ZodForm'\n  ZodForm.id = 'ZodForm'\n\n  return ZodForm as ZodFormType<FieldDefs>\n}\n","import {\n  CreateFormProps,\n  createStepForm,\n  StepsOptions,\n  UseStepFormProps,\n} from '@saas-ui/forms'\nimport { zodFieldResolver, zodResolver } from './zod-resolver'\nimport { AnyZodObject, z } from 'zod'\nimport React from 'react'\n\ntype ResolverArgs = Parameters<typeof zodResolver>\n\nexport interface CreateZodFormProps<FieldDefs>\n  extends CreateFormProps<FieldDefs> {\n  schemaOptions?: ResolverArgs[1]\n  resolverOptions?: ResolverArgs[2]\n}\n\ntype InferStepType<T extends Required<StepsOptions<AnyZodObject>>> = T extends [\n  infer Step,\n  ...infer Rest\n]\n  ? Step extends { schema: AnyZodObject }\n    ? z.infer<Step['schema']> &\n        (Rest extends Required<StepsOptions<AnyZodObject>>\n          ? InferStepType<Rest>\n          : object)\n    : object\n  : object\n\ntype ZodStepFormType<\n  FieldDefs,\n  ExtraProps = object,\n  ExtraOverrides = object\n> = (<\n  TSteps extends Required<StepsOptions<AnyZodObject>> = Required<\n    StepsOptions<AnyZodObject>\n  >,\n  TFieldValues extends InferStepType<TSteps> = InferStepType<TSteps>,\n  TContext extends object = object\n>(\n  props: UseStepFormProps<TSteps, TFieldValues, TContext> & {\n    steps: TSteps\n    ref?: React.ForwardedRef<HTMLFormElement>\n  }\n) => React.ReactElement) & {\n  displayName?: string\n  id?: string\n}\n\nexport const createZodStepForm = <FieldDefs>(\n  options?: CreateZodFormProps<FieldDefs>\n) => {\n  const ZodStepForm = createStepForm<any, any, any, any>({\n    resolver: (schema: any) =>\n      zodResolver(schema, options?.schemaOptions, options?.resolverOptions),\n    fieldResolver: zodFieldResolver,\n    ...options,\n  })\n\n  ZodStepForm.displayName = 'ZodStepForm'\n  ZodStepForm.id = 'ZodStepForm'\n\n  return ZodStepForm as ZodStepFormType<FieldDefs>\n}\n","export {\n  zodResolver,\n  getFieldsFromSchema,\n  getNestedSchema,\n  zodFieldResolver,\n  zodMeta,\n  zodParseMeta,\n} from './zod-resolver'\nexport type { Options, ZodMeta } from './zod-resolver'\nexport { createZodForm, type ZodFormType } from './create-zod-form'\n\nimport { createZodForm } from './create-zod-form'\nimport { createZodStepForm } from './create-zod-step-form'\n\nexport const Form = createZodForm()\n\nexport const StepForm = createZodStepForm()\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@saas-ui/forms",
-  "version": "2.0.0-next.19",
+  "version": "2.0.0-next.20",
   "description": "Fully functional forms for Chakra UI.",
   "source": "src/index.ts",
   "exports": {
@@ -103,8 +103,8 @@
   "dependencies": {
     "@chakra-ui/react-utils": "^2.0.12",
     "@chakra-ui/utils": "^2.0.15",
-    "@hookform/resolvers": "^3.0.1",
-    "@saas-ui/core": "2.0.0-next.16",
+    "@hookform/resolvers": "^3.1.0",
+    "@saas-ui/core": "2.0.0-next.17",
     "react-hook-form": "^7.43.9"
   },
   "peerDependencies": {
@@ -119,9 +119,9 @@
     "@types/json-schema": "^7.0.11",
     "ajv": "^8.12.0",
     "ajv-errors": "^3.0.0",
-    "json-schema-to-ts": "^2.7.2",
+    "json-schema-to-ts": "^2.8.2",
     "tsd": "^0.28.1",
-    "yup": "^1.0.2",
+    "yup": "^1.1.1",
     "zod": "^3.21.4"
   },
   "tsd": {

package/src/create-step-form.tsx

@@ -1,58 +1,39 @@
-import { useMemo } from 'react'
+import React, { useMemo } from 'react'
 import { forwardRef } from '@chakra-ui/react'
-import { FormType } from './create-form'
 import {
   ArrayField,
   DisplayIf,
   FieldProps,
   FieldValues,
+  FieldsProvider,
   Form,
+  GetFieldResolver,
   ObjectField,
 } from './'
 import { Field } from './field'
-import { StepFormProps, FormStep } from './step-form'
+import { FormStep, StepsOptions } from './step-form'
 import {
   StepFormProvider,
   UseStepFormProps,
   useStepForm,
 } from './use-step-form'
-import { YupFormType } from '../yup/src/create-yup-form'
-import { ZodFormType } from '../zod/src/create-zod-form'
 import { StepperProvider } from '@saas-ui/core'
 import { runIfFn } from '@chakra-ui/utils'
+import { GetResolver } from './form'
 
-// /**
-//  * @todo make this dynamic to support other schema types
-//  */
-type MergeStepFormProps<T> = T extends YupFormType<
-  infer FieldDefs,
-  infer ExtraProps,
-  infer ExtraOverrides,
-  'yup'
->
-  ? YupFormType<
-      FieldDefs,
-      ExtraProps & Omit<StepFormProps, 'children'>,
-      ExtraOverrides
-    >
-  : T extends ZodFormType<
-      infer FieldDefs,
-      infer ExtraProps,
-      infer ExtraOverrides,
-      'zod'
-    >
-  ? ZodFormType<
-      FieldDefs,
-      ExtraProps & Omit<StepFormProps, 'children'>,
-      ExtraOverrides
-    >
-  : T extends FormType<infer FieldDefs, infer ExtraProps, infer ExtraOverrides>
-  ? FormType<
-      FieldDefs,
-      ExtraProps & Omit<StepFormProps, 'children'>,
-      ExtraOverrides
-    >
-  : never
+type StepFormType<FieldDefs, ExtraProps = object, ExtraOverrides = object> = (<
+  TSteps extends StepsOptions<any> = StepsOptions<any>,
+  TFieldValues extends FieldValues = FieldValues,
+  TContext extends object = object,
+  TFieldTypes = FieldProps<TFieldValues>
+>(
+  props: UseStepFormProps<TSteps, TFieldValues, TContext, TFieldTypes> & {
+    ref?: React.ForwardedRef<HTMLFormElement>
+  }
+) => React.ReactElement) & {
+  displayName?: string
+  id?: string
+}
 
 export type DefaultFormType<
   FieldDefs = any,
@@ -69,59 +50,25 @@ export type DefaultFormType<
   id?: string
 }
 
-// export function createStepForm<
-//   FieldDefs = any,
-//   ExtraProps = object,
-//   ExtraOverrides = object,
-//   TFormType extends DefaultFormType<
-//     FieldDefs,
-//     ExtraProps,
-//     ExtraOverrides
-//   > = DefaultFormType<FieldDefs, ExtraProps, ExtraOverrides>
-// >(Form: TFormType) {
-//   const StepForm = forwardRef<any, 'div'>((props, ref) => {
-//     const { children, ...rest } = props
-
-//     const stepper = useStepForm(props)
-
-//     const { getFormProps, ...ctx } = stepper
-
-//     const context = useMemo(() => ctx, [ctx])
-
-//     return (
-//       <StepperProvider value={context}>
-//         <StepFormProvider value={context}>
-//           <Form ref={ref} {...rest} {...getFormProps()}>
-//             {runIfFn(children, {
-//               ...stepper,
-//               FormStep,
-//               Field,
-//             })}
-//           </Form>
-//         </StepFormProvider>
-//       </StepperProvider>
-//     )
-//   }) as MergeStepFormProps<TFormType>
-
-//   StepForm.displayName = `Step${Form.displayName || Form.name}`
-
-//   return StepForm
-// }
+export interface CreateFormProps<FieldDefs> {
+  resolver?: GetResolver
+  fieldResolver?: GetFieldResolver
+  fields?: FieldDefs extends Record<string, React.FC<any>> ? FieldDefs : never
+}
 
 export function createStepForm<
   FieldDefs = any,
   ExtraProps = object,
-  ExtraOverrides = object,
-  TFormType extends DefaultFormType<
-    FieldDefs,
-    ExtraProps,
-    ExtraOverrides
-  > = DefaultFormType<FieldDefs, ExtraProps, ExtraOverrides>
->(Form: TFormType) {
+  ExtraOverrides = object
+>({ fields, resolver, fieldResolver }: CreateFormProps<FieldDefs> = {}) {
   const StepForm = forwardRef<any, 'div'>((props, ref) => {
-    const { children, ...rest } = props
+    const { children, steps, ...rest } = props
 
-    const stepper = useStepForm(props)
+    const stepper = useStepForm({
+      resolver,
+      fieldResolver,
+      ...props,
+    })
 
     const { getFormProps, ...ctx } = stepper
 
@@ -130,30 +77,22 @@ export function createStepForm<
     return (
       <StepperProvider value={context}>
         <StepFormProvider value={context}>
-          <Form ref={ref} {...rest} {...getFormProps()}>
-            {runIfFn(children, {
-              ...stepper,
-              Field: Field as any,
-              DisplayIf: DisplayIf as any,
-              ArrayField: ArrayField as any,
-              ObjectField: ObjectField as any,
-            })}
-          </Form>
+          <FieldsProvider value={fields || {}}>
+            <Form ref={ref} {...rest} {...getFormProps()}>
+              {runIfFn(children, {
+                ...stepper,
+                Field: Field as any,
+                FormStep: FormStep as any,
+                DisplayIf: DisplayIf as any,
+                ArrayField: ArrayField as any,
+                ObjectField: ObjectField as any,
+              })}
+            </Form>
+          </FieldsProvider>
         </StepFormProvider>
       </StepperProvider>
     )
-  }) as (<
-    TFieldValues extends FieldValues = FieldValues,
-    TContext extends object = object,
-    TFieldTypes = FieldProps<TFieldValues>
-  >(
-    props: UseStepFormProps<TFieldValues, TContext, TFieldTypes> & {
-      ref?: React.ForwardedRef<HTMLFormElement>
-    }
-  ) => React.ReactElement) & {
-    displayName?: string
-    id?: string
-  }
+  }) as StepFormType<FieldDefs, ExtraProps, ExtraOverrides>
 
   StepForm.displayName = `Step${Form.displayName || Form.name}`
 

package/src/index.ts

@@ -57,14 +57,21 @@ export { FormProvider, useFormContext } from './form-context'
 import { createForm } from './create-form'
 import { createStepForm } from './create-step-form'
 
+/**
+ * Form component.
+ *
+ * @see Docs https://saas-ui.dev/docs/components/forms/form
+ */
 export const Form = createForm()
 
+export { createStepForm } from './create-step-form'
+
 /**
- * The wrapper component provides context, state, and focus management.
+ * Multi-step form component.
  *
  * @see Docs https://saas-ui.dev/docs/components/forms/step-form
  */
-export const StepForm = createStepForm(Form)
+export const StepForm = createStepForm()
 
 export type {
   BatchFieldArrayUpdate,

package/src/step-form.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react'
 
-import { FieldValues, UseFormReturn } from 'react-hook-form'
+import { FieldValues } from 'react-hook-form'
 
 import {
   chakra,
@@ -10,90 +10,48 @@ import {
   ThemingProps,
 } from '@chakra-ui/react'
 
-import { callAllHandlers, runIfFn, cx } from '@chakra-ui/utils'
+import { callAllHandlers, cx } from '@chakra-ui/utils'
 
 import {
-  StepperProvider,
-  StepperSteps,
-  StepperStepsProps,
-  StepperStep,
+  Steps,
+  StepsItem,
+  StepsItemProps,
+  StepsProps,
   useStepperContext,
-  StepperContainer,
-  StepperProps,
 } from '@saas-ui/core'
 
-import { Form } from './'
-import { Field } from './field'
-
 import { SubmitButton } from './submit-button'
 
 import {
-  useStepForm,
   useFormStep,
-  StepFormProvider,
   UseStepFormProps,
   FormStepSubmitHandler,
 } from './use-step-form'
 import { FieldProps } from './types'
-import { DisplayIf } from './display-if'
-import { ArrayField } from './array-field'
-import { ObjectField } from './object-field'
-import { createStepForm } from './create-step-form'
+
+export type StepsOptions<TSchema, TName extends string = string> = {
+  /**
+   * The step name
+   */
+  name: TName
+  /**
+   * Schema
+   */
+  schema?: TSchema
+}[]
 
 export interface StepFormProps<
+  TSteps extends StepsOptions<any> = StepsOptions<any>,
   TFieldValues extends FieldValues = FieldValues,
   TContext extends object = object,
   TFieldTypes = FieldProps<TFieldValues>
-> extends UseStepFormProps<TFieldValues, TContext, TFieldTypes> {}
-
-// export const StepForm = React.forwardRef(
-//   <
-//     TFieldValues extends FieldValues = FieldValues,
-//     TContext extends object = object,
-//     TFieldTypes = FieldProps<TFieldValues>
-//   >(
-//     props: StepFormProps<TFieldValues, TContext, TFieldTypes>,
-//     ref: React.ForwardedRef<HTMLFormElement>
-//   ) => {
-//     const { children, ...rest } = props
-
-//     const stepper = useStepForm(props)
-
-//     const { getFormProps, ...ctx } = stepper
-
-//     const context = React.useMemo(() => ctx, [ctx])
-
-//     return (
-//       <StepperProvider value={context}>
-//         <StepFormProvider value={context}>
-//           <Form ref={ref} {...rest} {...getFormProps()}>
-//             {runIfFn(children, {
-//               ...stepper,
-//               Field: Field as any,
-//               DisplayIf: DisplayIf as any,
-//               ArrayField: ArrayField as any,
-//               ObjectField: ObjectField as any,
-//             })}
-//           </Form>
-//         </StepFormProvider>
-//       </StepperProvider>
-//     )
-//   }
-// ) as <
-//   TFieldValues extends FieldValues = FieldValues,
-//   TContext extends object = object,
-//   TFieldTypes = FieldProps<TFieldValues>
-// >(
-//   props: UseStepFormProps<TFieldValues, TContext, TFieldTypes> & {
-//     ref?: React.ForwardedRef<HTMLFormElement>
-//   }
-// ) => React.ReactElement
-
-export interface FormStepOptions {
+> extends UseStepFormProps<TSteps, TFieldValues, TContext, TFieldTypes> {}
+
+export interface FormStepOptions<TName extends string = string> {
   /**
    * The step name
    */
-  name: string
+  name: TName
   /**
    * Schema
    */
@@ -104,9 +62,9 @@ export interface FormStepOptions {
   resolver?: any
 }
 
-export interface FormStepperProps
-  extends StepperStepsProps,
-    ThemingProps<'Stepper'> {}
+export interface FormStepperProps extends StepsProps, ThemingProps<'Stepper'> {
+  render?: StepsItemProps['render']
+}
 
 /**
  * Renders a stepper that displays progress above the form.
@@ -116,7 +74,16 @@ export interface FormStepperProps
 export const FormStepper: React.FC<FormStepperProps> = (props) => {
   const { activeIndex, setIndex } = useStepperContext()
 
-  const { children, orientation, variant, colorScheme, size, ...rest } = props
+  const {
+    children,
+    orientation,
+    variant,
+    colorScheme,
+    size,
+    onChange: onChangeProp,
+    render,
+    ...rest
+  } = props
 
   const elements = React.Children.map(children, (child) => {
     if (
@@ -125,14 +92,15 @@ export const FormStepper: React.FC<FormStepperProps> = (props) => {
     ) {
       const { isCompleted } = useFormStep(child.props) // Register this step
       return (
-        <StepperStep
+        <StepsItem
+          render={render}
           name={child.props.name}
           title={child.props.title}
           isCompleted={isCompleted}
           {...rest}
         >
           {child.props.children}
-        </StepperStep>
+        </StepsItem>
       )
     }
     return child
@@ -140,10 +108,11 @@ export const FormStepper: React.FC<FormStepperProps> = (props) => {
 
   const onChange = React.useCallback((i: number) => {
     setIndex(i)
+    onChangeProp?.(i)
   }, [])
 
   return (
-    <StepperContainer
+    <Steps
       orientation={orientation}
       step={activeIndex}
       variant={variant}
@@ -151,15 +120,13 @@ export const FormStepper: React.FC<FormStepperProps> = (props) => {
       size={size}
       onChange={onChange}
     >
-      <StepperSteps mb="4" {...props}>
-        {elements}
-      </StepperSteps>
-    </StepperContainer>
+      {elements}
+    </Steps>
   )
 }
 
-export interface FormStepProps
-  extends FormStepOptions,
+export interface FormStepProps<TName extends string = string>
+  extends FormStepOptions<TName>,
     Omit<HTMLChakraProps<'div'>, 'onSubmit'> {
   onSubmit?: FormStepSubmitHandler
 }
@@ -168,10 +135,11 @@ export interface FormStepProps
  *
  * @see Docs https://saas-ui.dev/docs/components/forms/step-form
  */
-export const FormStep: React.FC<FormStepProps> = (props) => {
-  const { name, schema, resolver, children, className, onSubmit, ...rest } =
-    props
-  const step = useFormStep({ name, schema, resolver, onSubmit })
+export const FormStep = <TName extends string = string>(
+  props: FormStepProps<TName>
+) => {
+  const { name, children, className, onSubmit, ...rest } = props
+  const step = useFormStep({ name, onSubmit })
 
   const { isActive } = step
 

package/src/use-step-form.tsx

@@ -34,7 +34,7 @@ export const [StepFormProvider, useStepFormContext] =
   })
 
 import { FormProps } from './form'
-import { FormStepProps } from './step-form'
+import { FormStepProps, StepsOptions } from './step-form'
 import { FieldProps } from './types'
 import { FocusableElement } from '@chakra-ui/utils'
 import { DisplayIfProps } from './display-if'
@@ -42,12 +42,17 @@ import { ArrayFieldProps } from './array-field'
 import { UseArrayFieldReturn } from './use-array-field'
 import { ObjectFieldProps } from './object-field'
 
+type StepName<T extends { [k: number]: { readonly name: string } }> =
+  T[number]['name']
+
 interface StepFormRenderContext<
+  TSteps extends StepsOptions<any> = StepsOptions<any>,
   TFieldValues extends FieldValues = FieldValues,
   TContext extends object = object,
   TFieldTypes = FieldProps<TFieldValues>
 > extends UseStepFormReturn<TFieldValues> {
   Field: React.FC<TFieldTypes & React.RefAttributes<FocusableElement>>
+  FormStep: React.FC<FormStepProps<StepName<TSteps>>>
   DisplayIf: React.FC<DisplayIfProps<TFieldValues>>
   ArrayField: React.FC<
     ArrayFieldProps<TFieldValues> & React.RefAttributes<UseArrayFieldReturn>
@@ -56,13 +61,15 @@ interface StepFormRenderContext<
 }
 
 export interface UseStepFormProps<
+  TSteps extends StepsOptions<any> = StepsOptions<any>,
   TFieldValues extends FieldValues = FieldValues,
   TContext extends object = object,
   TFieldTypes = FieldProps<TFieldValues>
 > extends Omit<UseStepperProps, 'onChange'>,
     Omit<FormProps<any, TFieldValues, TContext, TFieldTypes>, 'children'> {
+  steps?: TSteps
   children: MaybeRenderProp<
-    StepFormRenderContext<TFieldValues, TContext, TFieldTypes>
+    StepFormRenderContext<TSteps, TFieldValues, TContext, TFieldTypes>
   >
 }
 
@@ -79,15 +86,18 @@ export interface UseStepFormReturn<
 }
 
 export function useStepForm<
+  TSteps extends StepsOptions<any> = StepsOptions<any>,
   TFieldValues extends FieldValues = FieldValues,
   TContext extends object = object,
   TFieldTypes = FieldProps<TFieldValues>
 >(
-  props: UseStepFormProps<TFieldValues, TContext, TFieldTypes>
+  props: UseStepFormProps<TSteps, TFieldValues, TContext, TFieldTypes>
 ): UseStepFormReturn<TFieldValues> {
-  const { onChange, ...rest } = props
+  const { onChange, steps: stepsOptions, resolver, ...rest } = props
   const stepper = useStepper(rest)
 
+  const [options, setOptions] = React.useState<TSteps | undefined>(stepsOptions)
+
   const { activeStep, isLastStep, nextStep } = stepper
 
   const [steps, updateSteps] = React.useState<Record<string, StepState>>({})
@@ -121,23 +131,30 @@ export function useStepForm<
 
   const getFormProps = React.useCallback(() => {
     const step = steps[activeStep]
+
     return {
       onSubmit: onSubmitStep,
       schema: step?.schema,
-      resolver: step?.resolver,
+      resolver: step?.schema
+        ? /* @todo fix resolver type */ (resolver as any)?.(step.schema)
+        : undefined,
     }
   }, [steps, onSubmitStep, activeStep])
 
   const updateStep = React.useCallback(
     (step: StepState) => {
+      const stepOptions = options?.find((s) => s.name === step.name)
       updateSteps((steps) => {
         return {
           ...steps,
-          [step.name]: step,
+          [step.name]: {
+            ...step,
+            schema: stepOptions?.schema,
+          },
         }
       })
     },
-    [steps]
+    [steps, options]
   )
 
   return {