@saas-ui/forms 2.0.0-next.2 → 2.0.0-next.21

package/dist/zod/index.js

@@ -75,16 +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"],"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,UAAX,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;AAE3B,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,SAAS,kBAA8C;AAWhD,IAAM,gBAAgB,CAAC,YAAiC;AAC7D,SAAO,WAA2B;AAAA,IAChC,UAAU,CAAC,WACT,YAAY,QAAQ,mCAAS,eAAe,mCAAS,eAAe;AAAA,IACtE,GAAG;AAAA,EACL,CAAC;AAMH","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 { createForm, CreateFormProps, FormProps } from '@saas-ui/forms'\nimport { zodResolver } from './zod-resolver'\nimport { z } from 'zod'\n\ntype ResolverArgs = Parameters<typeof zodResolver>\n\nexport interface CreateZodFormProps extends CreateFormProps {\n  schemaOptions?: ResolverArgs[1]\n  resolverOptions?: ResolverArgs[2]\n}\n\nexport const createZodForm = (options?: CreateZodFormProps) => {\n  return createForm<z.AnyZodObject>({\n    resolver: (schema) =>\n      zodResolver(schema, options?.schemaOptions, options?.resolverOptions),\n    ...options,\n  }) as <\n    TSchema extends z.AnyZodObject = z.AnyZodObject,\n    TContext extends object = object\n  >(\n    props: FormProps<z.infer<TSchema>, TContext, TSchema>\n  ) => React.ReactElement\n}\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,12 +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 { 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"],"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,UAAX,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;AAE3B,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,SAAS,kBAA8C;AAWhD,IAAM,gBAAgB,CAAC,YAAiC;AAC7D,SAAO,WAA2B;AAAA,IAChC,UAAU,CAAC,WACT,YAAY,QAAQ,mCAAS,eAAe,mCAAS,eAAe;AAAA,IACtE,GAAG;AAAA,EACL,CAAC;AAMH","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 { createForm, CreateFormProps, FormProps } from '@saas-ui/forms'\nimport { zodResolver } from './zod-resolver'\nimport { z } from 'zod'\n\ntype ResolverArgs = Parameters<typeof zodResolver>\n\nexport interface CreateZodFormProps extends CreateFormProps {\n  schemaOptions?: ResolverArgs[1]\n  resolverOptions?: ResolverArgs[2]\n}\n\nexport const createZodForm = (options?: CreateZodFormProps) => {\n  return createForm<z.AnyZodObject>({\n    resolver: (schema) =>\n      zodResolver(schema, options?.schemaOptions, options?.resolverOptions),\n    ...options,\n  }) as <\n    TSchema extends z.AnyZodObject = z.AnyZodObject,\n    TContext extends object = object\n  >(\n    props: FormProps<z.infer<TSchema>, TContext, TSchema>\n  ) => React.ReactElement\n}\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.2",
+  "version": "2.0.0-next.21",
   "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": {
@@ -13,6 +14,7 @@
     },
     "./yup": {
       "require": "./dist/yup/index.js",
+      "types": "./dist/yup/index.d.ts",
       "import": "./dist/yup/index.mjs"
     },
     "./yup/src": {
@@ -20,6 +22,7 @@
     },
     "./zod": {
       "require": "./dist/zod/index.js",
+      "types": "./dist/zod/index.d.ts",
       "import": "./dist/zod/index.mjs"
     },
     "./zod/src": {
@@ -27,12 +30,26 @@
     },
     "./ajv": {
       "require": "./dist/ajv/index.js",
+      "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",
@@ -45,7 +62,8 @@
     "build:ajv": "tsup ajv/src/index.ts --config ajv/tsup.config.ts",
     "lint": "eslint src --ext .ts,.tsx,.js,.jsx --config ../../.eslintrc.js",
     "lint:staged": "lint-staged --allow-empty --config ../../lint-staged.config.js",
-    "typecheck": "tsc --noEmit"
+    "typecheck": "tsc --noEmit",
+    "tsd": "tsd"
   },
   "files": [
     "dist",
@@ -83,11 +101,11 @@
     "url": "https://storybook.saas-ui.dev"
   },
   "dependencies": {
-    "@chakra-ui/icons": "^2.0.16",
-    "@chakra-ui/react-utils": "^2.0.11",
-    "@chakra-ui/utils": "^2.0.14",
-    "@saas-ui/core": "2.0.0-next.2",
-    "react-hook-form": "^7.43.0"
+    "@chakra-ui/react-utils": "^2.0.12",
+    "@chakra-ui/utils": "^2.0.15",
+    "@hookform/resolvers": "^3.1.0",
+    "@saas-ui/core": "2.0.0-next.18",
+    "react-hook-form": "^7.43.9"
   },
   "peerDependencies": {
     "@chakra-ui/react": ">=2.4.9",
@@ -98,10 +116,15 @@
     "react-dom": ">=18.0.0"
   },
   "devDependencies": {
-    "@hookform/resolvers": "^2.9.3",
     "@types/json-schema": "^7.0.11",
     "ajv": "^8.12.0",
-    "yup": "^0.32.11",
-    "zod": "^3.20.2"
+    "ajv-errors": "^3.0.0",
+    "json-schema-to-ts": "^2.8.2",
+    "tsd": "^0.28.1",
+    "yup": "^1.1.1",
+    "zod": "^3.21.4"
+  },
+  "tsd": {
+    "directory": "tests"
   }
 }

package/src/array-field.tsx

@@ -7,11 +7,11 @@ import {
   Button,
   ButtonProps,
 } from '@chakra-ui/react'
-import { __DEV__ } from '@chakra-ui/utils'
-import { AddIcon, MinusIcon } from '@chakra-ui/icons'
+import { PlusIcon, MinusIcon } from '@saas-ui/core/icons'
 
 import { FormLayout, FormLayoutProps } from './layout'
-import { BaseField, FieldProps } from './field'
+import { BaseField } from './base-field'
+import { BaseFieldProps } from './types'
 
 import { mapNestedFields } from './utils'
 
@@ -27,6 +27,10 @@ import {
   useArrayFieldAddButton,
   UseArrayFieldReturn,
 } from './use-array-field'
+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 {}
 
@@ -53,7 +57,11 @@ interface ArrayFieldRowProps extends FormLayoutProps {
    */
   children: React.ReactNode
 }
-
+/**
+ * Render prop component, to get access to the internal fields state. Must be a child of ArrayFieldContainer.
+ *
+ * @see Docs https://saas-ui.dev/docs/components/forms/array-field
+ */
 export const ArrayFieldRow: React.FC<ArrayFieldRowProps> = ({
   children,
   index,
@@ -67,9 +75,7 @@ export const ArrayFieldRow: React.FC<ArrayFieldRowProps> = ({
   )
 }
 
-if (__DEV__) {
-  ArrayFieldRow.displayName = 'ArrayFieldRow'
-}
+ArrayFieldRow.displayName = 'ArrayFieldRow'
 
 export interface ArrayFieldRowFieldsProps extends FormLayoutProps {
   /**
@@ -85,7 +91,11 @@ export interface ArrayFieldRowFieldsProps extends FormLayoutProps {
    */
   children: React.ReactNode
 }
-
+/**
+ * Add the name prefix to the fields and acts as a horizontal form layout by default.
+ *
+ * @see Docs https://saas-ui.dev/docs/components/forms/array-field
+ */
 export const ArrayFieldRowFields: React.FC<ArrayFieldRowFieldsProps> = ({
   children,
   ...layoutProps
@@ -98,13 +108,17 @@ export const ArrayFieldRowFields: React.FC<ArrayFieldRowFieldsProps> = ({
   )
 }
 
-if (__DEV__) {
-  ArrayFieldRowFields.displayName = 'ArrayFieldRowFields'
-}
+ArrayFieldRowFields.displayName = 'ArrayFieldRowFields'
 
+/**
+ * The row container component providers row context.
+ *
+ * @see Docs https://saas-ui.dev/docs/components/forms/array-field
+ */
 export const ArrayFieldRowContainer: React.FC<ArrayFieldRowProps> = ({
   children,
   index,
+  ...rest
 }) => {
   const context = useArrayFieldRow({ index })
 
@@ -118,15 +132,20 @@ export const ArrayFieldRowContainer: React.FC<ArrayFieldRowProps> = ({
 
   return (
     <ArrayFieldRowProvider value={context}>
-      <chakra.div __css={styles}>{children}</chakra.div>
+      <chakra.div {...rest} __css={styles}>
+        {children}
+      </chakra.div>
     </ArrayFieldRowProvider>
   )
 }
 
-if (__DEV__) {
-  ArrayFieldRowContainer.displayName = 'ArrayFieldRowContainer'
-}
+ArrayFieldRowContainer.displayName = 'ArrayFieldRowContainer'
 
+/**
+ * The default remove button.
+ *
+ * @see Docs https://saas-ui.dev/docs/components/forms/array-field
+ */
 export const ArrayFieldRemoveButton: React.FC<ArrayFieldButtonProps> = (
   props
 ) => {
@@ -137,10 +156,13 @@ export const ArrayFieldRemoveButton: React.FC<ArrayFieldButtonProps> = (
   )
 }
 
-if (__DEV__) {
-  ArrayFieldRemoveButton.displayName = 'ArrayFieldRemoveButton'
-}
+ArrayFieldRemoveButton.displayName = 'ArrayFieldRemoveButton'
 
+/**
+ * The default add button.
+ *
+ * @see Docs https://saas-ui.dev/docs/components/forms/array-field
+ */
 export const ArrayFieldAddButton: React.FC<ArrayFieldButtonProps> = (props) => {
   return (
     <Button
@@ -149,36 +171,48 @@ export const ArrayFieldAddButton: React.FC<ArrayFieldButtonProps> = (props) => {
       {...useArrayFieldAddButton()}
       {...props}
     >
-      {props.children || <AddIcon />}
+      {props.children || <PlusIcon />}
     </Button>
   )
 }
 
-if (__DEV__) {
-  ArrayFieldAddButton.displayName = 'ArrayFieldAddButton'
-}
+ArrayFieldAddButton.displayName = 'ArrayFieldAddButton'
 
-export interface ArrayFieldProps
-  extends ArrayFieldOptions,
-    Omit<FieldProps, 'defaultValue'> {}
+export interface ArrayFieldProps<
+  TFieldValues extends FieldValues = FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
+> extends ArrayFieldOptions<TFieldValues, TName>,
+    Omit<
+      BaseFieldProps<TFieldValues, TName>,
+      'name' | 'defaultValue' | 'children'
+    > {
+  children: MaybeRenderProp<ArrayField[]>
+}
 
+/**
+ * The wrapper component that composes the default ArrayField functionality.
+ *
+ * @see Docs https://saas-ui.dev/docs/components/forms/array-field
+ */
 export const ArrayField = forwardRef(
   (props: ArrayFieldProps, ref: React.ForwardedRef<UseArrayFieldReturn>) => {
     const { children, ...containerProps } = props
 
+    const rowFn = isFunction(children)
+      ? children
+      : (fields: ArrayField[]) => (
+          <>
+            {fields.map(({ id }, index: number) => (
+              <ArrayFieldRow key={id} index={index}>
+                {children}
+              </ArrayFieldRow>
+            )) || null}
+          </>
+        )
+
     return (
       <ArrayFieldContainer ref={ref} {...containerProps}>
-        <ArrayFieldRows>
-          {(fields: ArrayField[]) => (
-            <>
-              {fields.map(({ id }, index: number) => (
-                <ArrayFieldRow key={id} index={index}>
-                  {children}
-                </ArrayFieldRow>
-              ))}
-            </>
-          )}
-        </ArrayFieldRows>
+        <ArrayFieldRows>{rowFn as any}</ArrayFieldRows>
         <ArrayFieldAddButton />
       </ArrayFieldContainer>
     )
@@ -191,9 +225,7 @@ export const ArrayField = forwardRef(
   displayName: string
 }
 
-if (__DEV__) {
-  ArrayField.displayName = 'ArrayField'
-}
+ArrayField.displayName = 'ArrayField'
 
 export interface ArrayFieldRowsProps {
   children: (fields: ArrayField[]) => React.ReactElement | null
@@ -206,10 +238,18 @@ export const ArrayFieldRows = ({
   return children(fields)
 }
 
-if (__DEV__) {
-  ArrayFieldRows.displayName = 'ArrayFieldRows'
+ArrayFieldRows.displayName = 'ArrayFieldRows'
+
+export interface ArrayFieldContainerProps
+  extends Omit<ArrayFieldProps, 'children'> {
+  children: React.ReactNode
 }
 
+/**
+ * The container component provides context and state management.
+ *
+ * @see Docs https://saas-ui.dev/docs/components/forms/array-field
+ */
 export const ArrayFieldContainer = React.forwardRef(
   (
     {
@@ -220,15 +260,17 @@ export const ArrayFieldContainer = React.forwardRef(
       max,
       children,
       ...fieldProps
-    }: ArrayFieldProps,
+    }: 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
@@ -236,7 +278,7 @@ export const ArrayFieldContainer = React.forwardRef(
 
     return (
       <ArrayFieldProvider value={context}>
-        <BaseField name={name} {...fieldProps}>
+        <BaseField name={name} {...fieldProps} {...overrides}>
           {children}
         </BaseField>
       </ArrayFieldProvider>
@@ -244,6 +286,4 @@ export const ArrayFieldContainer = React.forwardRef(
   }
 )
 
-if (__DEV__) {
-  ArrayFieldContainer.displayName = 'ArrayFieldContainer'
-}
+ArrayFieldContainer.displayName = 'ArrayFieldContainer'

package/src/auto-form.tsx

@@ -4,7 +4,7 @@ import { forwardRef } from '@chakra-ui/react'
 
 import { Form, FormProps } from './form'
 import { FormLayout } from './layout'
-import { Fields } from './fields'
+import { AutoFields } from './fields'
 import { SubmitButton } from './submit-button'
 
 interface AutoFormOptions {
@@ -32,7 +32,11 @@ export interface AutoFormProps<
     AutoFormOptions {
   children?: React.ReactNode
 }
-
+/**
+ * The wrapper component that manages context and state.
+ *
+ * @see Docs https://saas-ui.dev/docs/components/forms/auto-form
+ */
 export const AutoForm = forwardRef(
   <
     TFieldValues extends FieldValues = FieldValues,
@@ -52,7 +56,7 @@ export const AutoForm = forwardRef(
     return (
       <Form {...rest} schema={schema} ref={ref}>
         <FormLayout>
-          {<Fields schema={schema} fieldResolver={fieldResolver} />}
+          {<AutoFields schema={schema} fieldResolver={fieldResolver} />}
           {submitLabel && <SubmitButton>{submitLabel}</SubmitButton>}
           {children}
         </FormLayout>

package/src/base-field.tsx

@@ -0,0 +1,54 @@
+import * as React from 'react'
+import { FormState, get } from 'react-hook-form'
+
+import {
+  Box,
+  FormControl,
+  FormLabel,
+  FormHelperText,
+  FormErrorMessage,
+} from '@chakra-ui/react'
+
+import { useFormContext } from './form-context'
+
+import { BaseFieldProps, FieldProps } from './types'
+
+const getError = (name: string, formState: FormState<{ [x: string]: any }>) => {
+  return get(formState.errors, name)
+}
+
+const isTouched = (
+  name: string,
+  formState: FormState<{ [x: string]: any }>
+) => {
+  return get(formState.touchedFields, name)
+}
+
+/**
+ * The default BaseField component
+ * Composes the Chakra UI FormControl component, with FormLabel, FormHelperText and FormErrorMessage.
+ */
+export const BaseField: React.FC<BaseFieldProps> = (props) => {
+  const { name, label, help, hideLabel, children, ...controlProps } = props
+
+  const { formState } = useFormContext()
+
+  const error = getError(name, formState)
+
+  return (
+    <FormControl {...controlProps} isInvalid={!!error}>
+      {label && !hideLabel ? <FormLabel>{label}</FormLabel> : null}
+      <Box>
+        {children}
+        {help && !error?.message ? (
+          <FormHelperText>{help}</FormHelperText>
+        ) : null}
+        {error?.message && (
+          <FormErrorMessage>{error?.message}</FormErrorMessage>
+        )}
+      </Box>
+    </FormControl>
+  )
+}
+
+BaseField.displayName = 'BaseField'