@saas-ui/forms 2.0.0-next.8 → 2.0.0-rc.22

package/dist/zod/index.js

@@ -75,21 +75,36 @@ 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;
+};
+var createZodStepForm = (options) => {
+  const ZodStepForm = forms.createStepForm({
+    resolver: (schema) => zod.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();
 
 Object.defineProperty(exports, 'zodResolver', {
   enumerable: true,
   get: function () { return zod.zodResolver; }
 });
 exports.Form = Form;
+exports.StepForm = StepForm;
 exports.createZodForm = createZodForm;
 exports.getFieldsFromSchema = getFieldsFromSchema;
 exports.getNestedSchema = getNestedSchema;

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/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/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) => {
@@ -74,16 +74,30 @@ 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;
+};
+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,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/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,11 +1,12 @@
 {
   "name": "@saas-ui/forms",
-  "version": "2.0.0-next.8",
+  "version": "2.0.0-rc.22",
   "description": "Fully functional forms for Chakra UI.",
   "source": "src/index.ts",
   "exports": {
     ".": {
       "require": "./dist/index.js",
+      "types": "./dist/index.d.ts",
       "import": "./dist/index.mjs"
     },
     "./src": {
@@ -29,13 +30,26 @@
     },
     "./ajv": {
       "require": "./dist/ajv/index.js",
-      "types": "./dist/zod/index.d.ts",
+      "types": "./dist/ajv/index.d.ts",
       "import": "./dist/ajv/index.mjs"
     },
     "./ajv/src": {
       "default": "./ajv/src/index.ts"
     }
   },
+  "typesVersions": {
+    "*": {
+      "ajv": [
+        "./dist/ajv/index.d.ts"
+      ],
+      "yup": [
+        "./dist/yup/index.d.ts"
+      ],
+      "zod": [
+        "./dist/zod/index.d.ts"
+      ]
+    }
+  },
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",
@@ -89,7 +103,8 @@
   "dependencies": {
     "@chakra-ui/react-utils": "^2.0.12",
     "@chakra-ui/utils": "^2.0.15",
-    "@saas-ui/core": "2.0.0-next.6",
+    "@hookform/resolvers": "^3.1.0",
+    "@saas-ui/core": "2.0.0-rc.19",
     "react-hook-form": "^7.43.9"
   },
   "peerDependencies": {
@@ -101,13 +116,12 @@
     "react-dom": ">=18.0.0"
   },
   "devDependencies": {
-    "@hookform/resolvers": "^3.0.1",
     "@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/array-field.tsx

@@ -30,6 +30,7 @@ import {
 import { FieldPath, FieldValues } from 'react-hook-form'
 import { isFunction } from '@chakra-ui/utils'
 import { MaybeRenderProp } from '@chakra-ui/react-utils'
+import { useFieldProps } from './form-context'
 
 export interface ArrayFieldButtonProps extends ButtonProps {}
 
@@ -262,12 +263,14 @@ export const ArrayFieldContainer = React.forwardRef(
     }: ArrayFieldContainerProps,
     ref: React.ForwardedRef<UseArrayFieldReturn>
   ) => {
+    const overrides = useFieldProps(name)
+
     const context = useArrayField({
       name,
       defaultValue,
       keyName,
-      min,
-      max,
+      min: min || (overrides as any)?.min,
+      max: max || (overrides as any)?.max,
     })
 
     // This exposes the useArrayField api through the forwarded ref
@@ -275,7 +278,7 @@ export const ArrayFieldContainer = React.forwardRef(
 
     return (
       <ArrayFieldProvider value={context}>
-        <BaseField name={name} {...fieldProps}>
+        <BaseField name={name} {...fieldProps} {...overrides}>
           {children}
         </BaseField>
       </ArrayFieldProvider>

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,18 +12,39 @@ 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
+> = (<
+  TSchema = unknown,
+  TFieldValues extends FieldValues = FieldValues,
+  TContext extends object = object
+>(
+  props: WithFields<
+    FormProps<TSchema, TFieldValues, TContext>,
+    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,
+      TFieldValues extends FieldValues = FieldValues,
+      TContext extends object = object
     >(
-      props: WithFields<FormProps<TFieldValues, TContext, TSchema>, FieldDefs>,
+      props: WithFields<FormProps<TSchema, TFieldValues, TContext>, FieldDefs>,
       ref: ForwardedRef<HTMLFormElement>
     ) => {
       const { schema, ...rest } = props
@@ -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,100 @@
+import React, { useMemo } from 'react'
+import { forwardRef } from '@chakra-ui/react'
+import {
+  ArrayField,
+  DisplayIf,
+  FieldProps,
+  FieldValues,
+  FieldsProvider,
+  Form,
+  GetFieldResolver,
+  ObjectField,
+} from './'
+import { Field } from './field'
+import { FormStep, StepsOptions } from './step-form'
+import {
+  StepFormProvider,
+  UseStepFormProps,
+  useStepForm,
+} from './use-step-form'
+import { StepperProvider } from '@saas-ui/core'
+import { runIfFn } from '@chakra-ui/utils'
+import { GetResolver } from './form'
+
+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,
+  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 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
+>({ fields, resolver, fieldResolver }: CreateFormProps<FieldDefs> = {}) {
+  const StepForm = forwardRef<any, 'div'>((props, ref) => {
+    const { children, steps, ...rest } = props
+
+    const stepper = useStepForm({
+      resolver,
+      fieldResolver,
+      ...props,
+    })
+
+    const { getFormProps, ...ctx } = stepper
+
+    const context = useMemo(() => ctx, [ctx])
+
+    return (
+      <StepperProvider value={context}>
+        <StepFormProvider value={context}>
+          <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 StepFormType<FieldDefs, ExtraProps, ExtraOverrides>
+
+  StepForm.displayName = `Step${Form.displayName || Form.name}`
+
+  return StepForm
+}

package/src/form-context.tsx

@@ -57,7 +57,7 @@ export const useFieldProps = <TFieldValues extends FieldValues = FieldValues>(
 ): BaseFieldProps<TFieldValues> | undefined => {
   const parsedName = name?.replace(/\.[0-9]/g, '.$')
   const context = useFormContext()
-  return context?.fields?.[parsedName] as any
+  return (context?.fields?.[parsedName] as any) || {}
 }
 
 export type UseFormReturn<

package/src/form.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react'
 
 import { chakra, HTMLChakraProps, forwardRef } from '@chakra-ui/react'
-import { cx, runIfFn } from '@chakra-ui/utils'
+import { FocusableElement, cx, runIfFn } from '@chakra-ui/utils'
 
 import {
   useForm,
@@ -29,22 +29,25 @@ import { SubmitButton } from './submit-button'
 import { DisplayIf, DisplayIfProps } from './display-if'
 import { ArrayField, ArrayFieldProps } from './array-field'
 import { ObjectField, ObjectFieldProps } from './object-field'
+import { UseArrayFieldReturn } from './use-array-field'
 
 export interface FormRenderContext<
   TFieldValues extends FieldValues = FieldValues,
   TContext extends object = object,
   TFieldTypes = FieldProps<TFieldValues>
 > extends UseFormReturn<TFieldValues, TContext> {
-  Field: React.FC<TFieldTypes>
+  Field: React.FC<TFieldTypes & React.RefAttributes<FocusableElement>>
   DisplayIf: React.FC<DisplayIfProps<TFieldValues>>
-  ArrayField: React.FC<ArrayFieldProps<TFieldValues>>
+  ArrayField: React.FC<
+    ArrayFieldProps<TFieldValues> & React.RefAttributes<UseArrayFieldReturn>
+  >
   ObjectField: React.FC<ObjectFieldProps<TFieldValues>>
 }
 
 interface FormOptions<
+  TSchema = unknown,
   TFieldValues extends FieldValues = FieldValues,
   TContext extends object = object,
-  TSchema = any,
   TFieldTypes = FieldProps<TFieldValues>
 > {
   /**
@@ -84,16 +87,16 @@ interface FormOptions<
 }
 
 export interface FormProps<
+  TSchema = unknown,
   TFieldValues extends FieldValues = FieldValues,
   TContext extends object = object,
-  TSchema = any,
   TFieldTypes = FieldProps<TFieldValues>
 > extends UseFormProps<TFieldValues, TContext>,
     Omit<
       HTMLChakraProps<'form'>,
       'children' | 'onChange' | 'onSubmit' | 'onError'
     >,
-    FormOptions<TFieldValues, TContext, TSchema, TFieldTypes> {}
+    FormOptions<TSchema, TFieldValues, TContext, TFieldTypes> {}
 
 /**
  * The wrapper component provides context, state, and focus management.
@@ -102,12 +105,12 @@ export interface FormProps<
  */
 export const Form = forwardRef(
   <
+    TSchema = any,
     TFieldValues extends FieldValues = FieldValues,
     TContext extends object = object,
-    TSchema = any,
     TFieldTypes = FieldProps<TFieldValues>
   >(
-    props: FormProps<TFieldValues, TContext, TSchema, TFieldTypes>,
+    props: FormProps<TSchema, TFieldValues, TContext, TFieldTypes>,
     ref: React.ForwardedRef<HTMLFormElement>
   ) => {
     const {
@@ -188,7 +191,7 @@ export const Form = forwardRef(
         >
           {runIfFn(_children, {
             Field: DefaultField as any,
-            DisplayIf: DisplayIf,
+            DisplayIf: DisplayIf as any,
             ArrayField: ArrayField as any,
             ObjectField: ObjectField as any,
             ...methods,
@@ -197,13 +200,15 @@ export const Form = forwardRef(
       </FormProvider>
     )
   }
-) as (<
-  TFieldValues extends FieldValues,
+) as FormComponent
+
+export type FormComponent = (<
+  TSchema = unknown,
+  TFieldValues extends FieldValues = FieldValues,
   TContext extends object = object,
-  TSchema = any,
   TFieldTypes = FieldProps<TFieldValues>
 >(
-  props: FormProps<TFieldValues, TContext, TSchema, TFieldTypes> & {
+  props: FormProps<TSchema, TFieldValues, TContext, TFieldTypes> & {
     ref?: React.ForwardedRef<HTMLFormElement>
   }
 ) => React.ReactElement) & {
@@ -216,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,36 @@ 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'
+
+/**
+ * Form component.
+ *
+ * @see Docs https://saas-ui.dev/docs/components/forms/form
+ */
 export const Form = createForm()
 
+export { createStepForm } from './create-step-form'
+
+/**
+ * Multi-step form component.
+ *
+ * @see Docs https://saas-ui.dev/docs/components/forms/step-form
+ */
+export const StepForm = createStepForm()
+
 export type {
   BatchFieldArrayUpdate,
   ChangeHandler,

package/src/object-field.tsx

@@ -12,6 +12,7 @@ import { BaseFieldProps } from './types'
 
 import { mapNestedFields } from './utils'
 import { FieldPath, FieldValues } from 'react-hook-form'
+import { useFieldProps } from './form-context'
 
 export interface ObjectFieldProps<
   TFieldValues extends FieldValues = FieldValues,
@@ -33,13 +34,29 @@ export const FormLegend = (props: FormLabelProps) => {
  * @see Docs https://saas-ui.dev/docs/components/forms/object-field
  */
 export const ObjectField: React.FC<ObjectFieldProps> = (props) => {
-  const { name, label, hideLabel, children, columns, spacing, ...fieldProps } =
-    props
+  const {
+    name,
+    label,
+    hideLabel: hideLabelProp,
+    children,
+    columns: columnsProp,
+    spacing: spacingProp,
+    ...fieldProps
+  } = props
+
+  const { hideLabel, columns, spacing, ...overrides } = useFieldProps(
+    name
+  ) as Omit<ObjectFieldProps, 'name'>
 
   return (
-    <FormControl name={name} as="fieldset" {...fieldProps}>
-      <FormLegend display={hideLabel ? 'none' : 'block'}>{label}</FormLegend>
-      <FormLayout columns={columns} gridGap={spacing}>
+    <FormControl name={name} as="fieldset" {...fieldProps} {...overrides}>
+      <FormLegend display={hideLabelProp || hideLabel ? 'none' : 'block'}>
+        {label}
+      </FormLegend>
+      <FormLayout
+        columns={columnsProp || columns}
+        gridGap={spacingProp || spacing}
+      >
         {mapNestedFields(name, children)}
       </FormLayout>
     </FormControl>

package/src/select/select.tsx

@@ -80,7 +80,7 @@ export const SelectButton = forwardRef<SelectButtonProps, 'button'>(
 
     const height = styles.field?.h || styles.field?.height
 
-    const buttonStyles: SystemStyleObject = {
+    const buttonStyles: any = {
       fontWeight: 'normal',
       textAlign: 'left',
       color: 'inherit',
@@ -101,6 +101,7 @@ export const SelectButton = forwardRef<SelectButtonProps, 'button'>(
       <MenuButton
         as={Button}
         id={id || React.useId()}
+        {...buttonStyles}
         {...rest}
         onFocus={onFocus}
         onBlur={onBlur}
@@ -111,7 +112,6 @@ export const SelectButton = forwardRef<SelectButtonProps, 'button'>(
         data-required={dataAttr(isRequired)}
         rightIcon={rightIcon}
         ref={ref}
-        sx={buttonStyles}
       >
         {renderValue(displayValue) || placeholder}
       </MenuButton>