@saas-ui/forms 2.0.0-next.13 → 2.0.0-next.15

package/dist/zod/index.js

@@ -75,11 +75,14 @@ var zodParseMeta = (meta) => {
   }
 };
 var createZodForm = (options) => {
-  return forms.createForm({
+  const ZodForm = forms.createForm({
     resolver: (schema) => zod.zodResolver(schema, options == null ? void 0 : options.schemaOptions, options == null ? void 0 : options.resolverOptions),
     fieldResolver: zodFieldResolver,
     ...options
   });
+  ZodForm.displayName = "ZodForm";
+  ZodForm.id = "ZodForm";
+  return ZodForm;
 };
 
 // zod/src/index.ts

package/dist/zod/index.js.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,OAIK;AAYA,IAAM,gBAAgB,CAC3B,YACG;AACH,SAAO,WAAW;AAAA,IAChB,UAAU,CAAC,WACT,YAAY,QAAQ,mCAAS,eAAe,mCAAS,eAAe;AAAA,IACtE,eAAe;AAAA,IACf,GAAG;AAAA,EACL,CAAC;AAWH;;;ACvBO,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} 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 const createZodForm = <FieldDefs>(\n  options?: CreateZodFormProps<FieldDefs>\n) => {\n  return createForm({\n    resolver: (schema) =>\n      zodResolver(schema, options?.schemaOptions, options?.resolverOptions),\n    fieldResolver: zodFieldResolver,\n    ...options,\n  }) as <\n    TSchema extends z.AnyZodObject = z.AnyZodObject,\n    TContext extends object = object\n  >(\n    props: WithFields<\n      FormProps<z.infer<TSchema>, TContext, TSchema>,\n      FieldDefs\n    > & {\n      ref?: React.ForwardedRef<HTMLFormElement>\n    }\n  ) => React.ReactElement\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 } 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/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  TFieldValues extends FieldValues = FieldValues, // placeholder\n  TContext extends object = object,\n  TSchema extends z.AnyZodObject = z.AnyZodObject\n>(\n  props: WithFields<\n    FormProps<z.infer<TSchema>, TContext, TSchema>,\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"]}

package/dist/zod/index.mjs

@@ -74,11 +74,14 @@ var zodParseMeta = (meta) => {
   }
 };
 var createZodForm = (options) => {
-  return createForm({
+  const ZodForm = createForm({
     resolver: (schema) => zodResolver(schema, options == null ? void 0 : options.schemaOptions, options == null ? void 0 : options.resolverOptions),
     fieldResolver: zodFieldResolver,
     ...options
   });
+  ZodForm.displayName = "ZodForm";
+  ZodForm.id = "ZodForm";
+  return ZodForm;
 };
 
 // zod/src/index.ts

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,OAIK;AAYA,IAAM,gBAAgB,CAC3B,YACG;AACH,SAAO,WAAW;AAAA,IAChB,UAAU,CAAC,WACT,YAAY,QAAQ,mCAAS,eAAe,mCAAS,eAAe;AAAA,IACtE,eAAe;AAAA,IACf,GAAG;AAAA,EACL,CAAC;AAWH;;;ACvBO,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} 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 const createZodForm = <FieldDefs>(\n  options?: CreateZodFormProps<FieldDefs>\n) => {\n  return createForm({\n    resolver: (schema) =>\n      zodResolver(schema, options?.schemaOptions, options?.resolverOptions),\n    fieldResolver: zodFieldResolver,\n    ...options,\n  }) as <\n    TSchema extends z.AnyZodObject = z.AnyZodObject,\n    TContext extends object = object\n  >(\n    props: WithFields<\n      FormProps<z.infer<TSchema>, TContext, TSchema>,\n      FieldDefs\n    > & {\n      ref?: React.ForwardedRef<HTMLFormElement>\n    }\n  ) => React.ReactElement\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 } 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/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  TFieldValues extends FieldValues = FieldValues, // placeholder\n  TContext extends object = object,\n  TSchema extends z.AnyZodObject = z.AnyZodObject\n>(\n  props: WithFields<\n    FormProps<z.infer<TSchema>, TContext, TSchema>,\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"]}

package/package.json

@@ -1,13 +1,13 @@
 {
   "name": "@saas-ui/forms",
-  "version": "2.0.0-next.13",
+  "version": "2.0.0-next.15",
   "description": "Fully functional forms for Chakra UI.",
   "source": "src/index.ts",
   "exports": {
     ".": {
       "require": "./dist/index.js",
       "types": "./dist/index.d.ts",
-      "import": "./dist/index.modern.mjs"
+      "import": "./dist/index.mjs"
     },
     "./src": {
       "default": "./src/index.ts"
@@ -15,7 +15,7 @@
     "./yup": {
       "require": "./dist/yup/index.js",
       "types": "./dist/yup/index.d.ts",
-      "import": "./dist/yup/index.modern.mjs"
+      "import": "./dist/yup/index.mjs"
     },
     "./yup/src": {
       "default": "./yup/src/index.ts"
@@ -23,7 +23,7 @@
     "./zod": {
       "require": "./dist/zod/index.js",
       "types": "./dist/zod/index.d.ts",
-      "import": "./dist/zod/index.modern.mjs"
+      "import": "./dist/zod/index.mjs"
     },
     "./zod/src": {
       "default": "./zod/src/index.ts"
@@ -31,7 +31,7 @@
     "./ajv": {
       "require": "./dist/ajv/index.js",
       "types": "./dist/ajv/index.d.ts",
-      "import": "./dist/ajv/index.modern.mjs"
+      "import": "./dist/ajv/index.mjs"
     },
     "./ajv/src": {
       "default": "./ajv/src/index.ts"
@@ -104,7 +104,7 @@
     "@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.11",
+    "@saas-ui/core": "2.0.0-next.13",
     "react-hook-form": "^7.43.9"
   },
   "peerDependencies": {

package/src/create-form.tsx

@@ -1,7 +1,7 @@
 import React, { ForwardedRef } from 'react'
 import { FieldsProvider } from './fields-context'
 import { Form, FieldValues, FormProps, GetResolver } from './form'
-import { WithFields } from './types'
+import { DefaultFieldOverrides, WithFields } from './types'
 import { objectFieldResolver } from './field-resolver'
 import { GetFieldResolver } from './field-resolver'
 import { forwardRef } from '@chakra-ui/react'
@@ -12,16 +12,37 @@ export interface CreateFormProps<FieldDefs> {
   fields?: FieldDefs extends Record<string, React.FC<any>> ? FieldDefs : never
 }
 
-export function createForm<FieldDefs, Schema = any>({
+export type FormType<
+  FieldDefs,
+  ExtraProps = object,
+  ExtraOverrides = object
+> = (<
+  TFieldValues extends FieldValues,
+  TContext extends object = object,
+  TSchema = unknown
+>(
+  props: WithFields<
+    FormProps<TFieldValues, TContext, TSchema>,
+    FieldDefs,
+    ExtraOverrides
+  > & {
+    ref?: React.ForwardedRef<HTMLFormElement>
+  } & ExtraProps
+) => React.ReactElement) & {
+  displayName?: string
+  id?: string
+}
+
+export function createForm<FieldDefs>({
   resolver,
   fieldResolver = objectFieldResolver,
   fields,
 }: CreateFormProps<FieldDefs> = {}) {
-  const CreateForm = forwardRef(
+  const DefaultForm = forwardRef(
     <
       TFieldValues extends FieldValues,
       TContext extends object = object,
-      TSchema extends Schema = Schema
+      TSchema = any
     >(
       props: WithFields<FormProps<TFieldValues, TContext, TSchema>, FieldDefs>,
       ref: ForwardedRef<HTMLFormElement>
@@ -38,17 +59,10 @@ export function createForm<FieldDefs, Schema = any>({
         </FieldsProvider>
       )
     }
-  ) as (<
-    TFieldValues extends FieldValues,
-    TContext extends object = object,
-    TSchema extends Schema = Schema
-  >(
-    props: WithFields<FormProps<TFieldValues, TContext, TSchema>, FieldDefs> & {
-      ref?: React.ForwardedRef<HTMLFormElement>
-    }
-  ) => React.ReactElement) & {
-    displayName?: string
-  }
+  ) as FormType<FieldDefs>
+
+  DefaultForm.displayName = 'Form'
+  DefaultForm.id = 'Form'
 
-  return CreateForm
+  return DefaultForm
 }

package/src/create-step-form.tsx

@@ -0,0 +1,161 @@
+import { useMemo } from 'react'
+import { forwardRef } from '@chakra-ui/react'
+import { FormType } from './create-form'
+import {
+  ArrayField,
+  DisplayIf,
+  FieldProps,
+  FieldValues,
+  Form,
+  ObjectField,
+} from './'
+import { Field } from './field'
+import { StepFormProps, FormStep } 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'
+
+// /**
+//  * @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
+
+export type DefaultFormType<
+  FieldDefs = any,
+  ExtraProps = object,
+  ExtraOverrides = object
+> = (<
+  TFieldValues extends Record<string, any> = any,
+  TContext extends object = object,
+  TSchema = unknown
+>(
+  props: any
+) => React.ReactElement) & {
+  displayName?: string
+  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 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,
+              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) & {
+    displayName?: string
+    id?: string
+  }
+
+  StepForm.displayName = `Step${Form.displayName || Form.name}`
+
+  return StepForm
+}

package/src/form.tsx

@@ -47,7 +47,7 @@ export interface FormRenderContext<
 interface FormOptions<
   TFieldValues extends FieldValues = FieldValues,
   TContext extends object = object,
-  TSchema = any,
+  TSchema = unknown,
   TFieldTypes = FieldProps<TFieldValues>
 > {
   /**
@@ -89,7 +89,7 @@ interface FormOptions<
 export interface FormProps<
   TFieldValues extends FieldValues = FieldValues,
   TContext extends object = object,
-  TSchema = any,
+  TSchema = unknown,
   TFieldTypes = FieldProps<TFieldValues>
 > extends UseFormProps<TFieldValues, TContext>,
     Omit<
@@ -200,10 +200,12 @@ export const Form = forwardRef(
       </FormProvider>
     )
   }
-) as (<
+) as FormComponent
+
+export type FormComponent = (<
   TFieldValues extends FieldValues,
   TContext extends object = object,
-  TSchema = any,
+  TSchema = unknown,
   TFieldTypes = FieldProps<TFieldValues>
 >(
   props: FormProps<TFieldValues, TContext, TSchema, TFieldTypes> & {
@@ -219,7 +221,7 @@ export type GetResolver = <
   TFieldValues extends FieldValues,
   TContext extends object
 >(
-  schema: any
+  schema: unknown
 ) => (
   values: TFieldValues,
   context: TContext | undefined,

package/src/index.ts

@@ -43,22 +43,29 @@ export type {
   WithFields,
   BaseFieldProps,
   FieldOptions,
+  DefaultFieldOverrides,
 } from './types'
 
-export { createForm, type CreateFormProps } from './create-form'
+export { createForm, type CreateFormProps, type FormType } from './create-form'
 export { createField, type CreateFieldOptions } from './create-field'
 
-export {
-  Form as BaseForm,
-  type FormProps,
-  type FormRenderContext,
-} from './form'
+export { Form as BaseForm } from './form'
+export type { FormProps, FormRenderContext, FormComponent } from './form'
 
 export { FormProvider, useFormContext } from './form-context'
 
 import { createForm } from './create-form'
+import { createStepForm } from './create-step-form'
+
 export const Form = createForm()
 
+/**
+ * The wrapper component provides context, state, and focus management.
+ *
+ * @see Docs https://saas-ui.dev/docs/components/forms/step-form
+ */
+export const StepForm = createStepForm(Form)
+
 export type {
   BatchFieldArrayUpdate,
   ChangeHandler,

package/src/step-form.tsx

@@ -22,7 +22,9 @@ import {
   StepperProps,
 } from '@saas-ui/core'
 
-import { Form } from './form'
+import { Form } from './'
+import { Field } from './field'
+
 import { SubmitButton } from './submit-button'
 
 import {
@@ -32,48 +34,60 @@ import {
   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 interface StepFormProps<
   TFieldValues extends FieldValues = FieldValues,
-  TContext extends object = object
-> extends UseStepFormProps<TFieldValues> {}
-
-/**
- * The wrapper component provides context, state, and focus management.
- *
- * @see Docs https://saas-ui.dev/docs/components/forms/step-form
- */
-export const StepForm = React.forwardRef(
-  <
-    TFieldValues extends FieldValues = FieldValues,
-    TContext extends object = object
-  >(
-    props: StepFormProps<TFieldValues, TContext>,
-    ref: React.ForwardedRef<HTMLFormElement>
-  ) => {
-    const { children, ...rest } = props
-
-    const stepper = useStepForm<TFieldValues>(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)}
-          </Form>
-        </StepFormProvider>
-      </StepperProvider>
-    )
-  }
-) as <TFieldValues extends FieldValues>(
-  props: StepFormProps<TFieldValues> & {
-    ref?: React.ForwardedRef<HTMLFormElement>
-  }
-) => React.ReactElement
+  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 {
   /**
@@ -181,7 +195,7 @@ export const PrevButton: React.FC<ButtonProps> = (props) => {
   return (
     <Button
       isDisabled={isFirstStep || isCompleted}
-      label="Back"
+      children="Back"
       {...props}
       className={cx('sui-form__prev-button', props.className)}
       onClick={callAllHandlers(props.onClick, prevStep)}

package/src/types.ts

@@ -133,12 +133,13 @@ export type FieldOverrides<
 
 export type WithFields<
   TFormProps extends FormProps<any, any, any, any>,
-  FieldDefs
+  FieldDefs,
+  ExtraOverrides = object
 > = TFormProps extends FormProps<infer TFieldValues, infer TContext>
   ? Omit<TFormProps, 'children' | 'fields'> & {
       children?: FormChildren<FieldDefs, TFieldValues, TContext>
       fields?: FieldOverrides<FieldDefs, TFieldValues> & {
         submit?: SubmitButtonProps
-      }
+      } & ExtraOverrides
     }
   : never

package/src/use-step-form.tsx

@@ -34,12 +34,36 @@ export const [StepFormProvider, useStepFormContext] =
   })
 
 import { FormProps } from './form'
+import { FormStepProps } from './step-form'
+import { FieldProps } from './types'
+import { FocusableElement } from '@chakra-ui/utils'
+import { DisplayIfProps } from './display-if'
+import { ArrayFieldProps } from './array-field'
+import { UseArrayFieldReturn } from './use-array-field'
+import { ObjectFieldProps } from './object-field'
+
+interface StepFormRenderContext<
+  TFieldValues extends FieldValues = FieldValues,
+  TContext extends object = object,
+  TFieldTypes = FieldProps<TFieldValues>
+> extends UseStepFormReturn<TFieldValues> {
+  Field: React.FC<TFieldTypes & React.RefAttributes<FocusableElement>>
+  DisplayIf: React.FC<DisplayIfProps<TFieldValues>>
+  ArrayField: React.FC<
+    ArrayFieldProps<TFieldValues> & React.RefAttributes<UseArrayFieldReturn>
+  >
+  ObjectField: React.FC<ObjectFieldProps<TFieldValues>>
+}
 
 export interface UseStepFormProps<
-  TFieldValues extends FieldValues = FieldValues
+  TFieldValues extends FieldValues = FieldValues,
+  TContext extends object = object,
+  TFieldTypes = FieldProps<TFieldValues>
 > extends Omit<UseStepperProps, 'onChange'>,
-    Omit<FormProps<TFieldValues>, 'children'> {
-  children: MaybeRenderProp<UseStepFormReturn<TFieldValues>>
+    Omit<FormProps<TFieldValues, TContext, any, TFieldTypes>, 'children'> {
+  children: MaybeRenderProp<
+    StepFormRenderContext<TFieldValues, TContext, TFieldTypes>
+  >
 }
 
 export interface UseStepFormReturn<
@@ -54,8 +78,12 @@ export interface UseStepFormReturn<
   steps: Record<string, any>
 }
 
-export function useStepForm<TFieldValues extends FieldValues = FieldValues>(
-  props: UseStepFormProps<TFieldValues>
+export function useStepForm<
+  TFieldValues extends FieldValues = FieldValues,
+  TContext extends object = object,
+  TFieldTypes = FieldProps<TFieldValues>
+>(
+  props: UseStepFormProps<TFieldValues, TContext, TFieldTypes>
 ): UseStepFormReturn<TFieldValues> {
   const { onChange, ...rest } = props
   const stepper = useStepper(rest)