@saas-ui/forms 2.0.0-next.3 → 2.0.0-next.6

package/dist/zod/index.js

@@ -77,14 +77,19 @@ var zodParseMeta = (meta) => {
 var createZodForm = (options) => {
   return forms.createForm({
     resolver: (schema) => zod.zodResolver(schema, options == null ? void 0 : options.schemaOptions, options == null ? void 0 : options.resolverOptions),
+    fieldResolver: zodFieldResolver,
     ...options
   });
 };
 
+// zod/src/index.ts
+var Form = createZodForm();
+
 Object.defineProperty(exports, 'zodResolver', {
   enumerable: true,
   get: function () { return zod.zodResolver; }
 });
+exports.Form = Form;
 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/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"]}

package/dist/zod/index.mjs

@@ -76,10 +76,14 @@ var zodParseMeta = (meta) => {
 var createZodForm = (options) => {
   return createForm({
     resolver: (schema) => zodResolver(schema, options == null ? void 0 : options.schemaOptions, options == null ? void 0 : options.resolverOptions),
+    fieldResolver: zodFieldResolver,
     ...options
   });
 };
 
-export { createZodForm, getFieldsFromSchema, getNestedSchema, zodFieldResolver, zodMeta, zodParseMeta };
+// zod/src/index.ts
+var Form = createZodForm();
+
+export { Form, 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/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"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@saas-ui/forms",
-  "version": "2.0.0-next.3",
+  "version": "2.0.0-next.6",
   "description": "Fully functional forms for Chakra UI.",
   "source": "src/index.ts",
   "exports": {
@@ -13,6 +13,7 @@
     },
     "./yup": {
       "require": "./dist/yup/index.js",
+      "types": "./dist/yup/index.d.ts",
       "import": "./dist/yup/index.mjs"
     },
     "./yup/src": {
@@ -20,6 +21,7 @@
     },
     "./zod": {
       "require": "./dist/zod/index.js",
+      "types": "./dist/zod/index.d.ts",
       "import": "./dist/zod/index.mjs"
     },
     "./zod/src": {
@@ -27,6 +29,7 @@
     },
     "./ajv": {
       "require": "./dist/ajv/index.js",
+      "types": "./dist/zod/index.d.ts",
       "import": "./dist/ajv/index.mjs"
     },
     "./ajv/src": {
@@ -45,7 +48,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 +87,10 @@
     "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.3",
-    "react-hook-form": "^7.43.0"
+    "@chakra-ui/react-utils": "^2.0.12",
+    "@chakra-ui/utils": "^2.0.15",
+    "@saas-ui/core": "2.0.0-next.5",
+    "react-hook-form": "^7.43.9"
   },
   "peerDependencies": {
     "@chakra-ui/react": ">=2.4.9",
@@ -98,10 +101,16 @@
     "react-dom": ">=18.0.0"
   },
   "devDependencies": {
-    "@hookform/resolvers": "^2.9.3",
+    "@hookform/resolvers": "^3.0.1",
     "@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.7.2",
+    "tsd": "^0.28.1",
+    "yup": "^1.0.2",
+    "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,9 @@ 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'
 
 export interface ArrayFieldButtonProps extends ButtonProps {}
 
@@ -53,7 +56,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 +74,7 @@ export const ArrayFieldRow: React.FC<ArrayFieldRowProps> = ({
   )
 }
 
-if (__DEV__) {
-  ArrayFieldRow.displayName = 'ArrayFieldRow'
-}
+ArrayFieldRow.displayName = 'ArrayFieldRow'
 
 export interface ArrayFieldRowFieldsProps extends FormLayoutProps {
   /**
@@ -85,7 +90,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 +107,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 +131,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 +155,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 +170,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 +224,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 +237,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,7 +259,7 @@ export const ArrayFieldContainer = React.forwardRef(
       max,
       children,
       ...fieldProps
-    }: ArrayFieldProps,
+    }: ArrayFieldContainerProps,
     ref: React.ForwardedRef<UseArrayFieldReturn>
   ) => {
     const context = useArrayField({
@@ -244,6 +283,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'

package/src/create-field.tsx

@@ -0,0 +1,144 @@
+import * as React from 'react'
+import { Controller } from 'react-hook-form'
+
+import { forwardRef, useMergeRefs } from '@chakra-ui/react'
+import { callAllHandlers } from '@chakra-ui/utils'
+import { BaseFieldProps, FieldProps } from './types'
+import { BaseField } from './base-field'
+import { useFormContext } from './form-context'
+
+interface CreateFieldProps {
+  displayName: string
+  hideLabel?: boolean
+  BaseField: React.FC<any>
+}
+
+const _createField = (
+  InputComponent: React.FC<any>,
+  { displayName, hideLabel, BaseField }: CreateFieldProps
+) => {
+  const Field = forwardRef((props, ref) => {
+    const {
+      id,
+      name,
+      label,
+      help,
+      isDisabled,
+      isInvalid,
+      isReadOnly,
+      isRequired,
+      rules,
+      ...inputProps
+    } = props
+
+    const inputRules = {
+      required: isRequired,
+      ...rules,
+    }
+
+    return (
+      <BaseField
+        id={id}
+        name={name}
+        label={label}
+        help={help}
+        hideLabel={hideLabel}
+        isDisabled={isDisabled}
+        isInvalid={isInvalid}
+        isReadOnly={isReadOnly}
+        isRequired={isRequired}
+      >
+        <InputComponent
+          ref={ref}
+          id={id}
+          name={name}
+          label={hideLabel ? label : undefined} // Only pass down the label when it should be inline.
+          rules={inputRules}
+          {...inputProps}
+        />
+      </BaseField>
+    )
+  })
+  Field.displayName = displayName
+
+  return Field
+}
+
+const withControlledInput = (InputComponent: React.FC<any>) => {
+  return forwardRef<FieldProps, typeof InputComponent>(
+    ({ name, rules, ...inputProps }, ref) => {
+      const { control } = useFormContext()
+
+      return (
+        <Controller
+          name={name}
+          control={control}
+          rules={rules}
+          render={({ field: { ref: _ref, ...field } }) => (
+            <InputComponent
+              {...field}
+              {...inputProps}
+              onChange={callAllHandlers(inputProps.onChange, field.onChange)}
+              onBlur={callAllHandlers(inputProps.onBlur, field.onBlur)}
+              ref={useMergeRefs(ref, _ref)}
+            />
+          )}
+        />
+      )
+    }
+  )
+}
+
+const withUncontrolledInput = (InputComponent: React.FC<any>) => {
+  return forwardRef<FieldProps, typeof InputComponent>(
+    ({ name, rules, ...inputProps }, ref) => {
+      const { register } = useFormContext()
+
+      const { ref: _ref, ...field } = register(name, rules)
+
+      return (
+        <InputComponent
+          {...field}
+          {...inputProps}
+          onChange={callAllHandlers(inputProps.onChange, field.onChange)}
+          onBlur={callAllHandlers(inputProps.onBlur, field.onBlur)}
+          ref={useMergeRefs(ref, _ref)}
+        />
+      )
+    }
+  )
+}
+
+export interface CreateFieldOptions {
+  isControlled?: boolean
+  hideLabel?: boolean
+  BaseField?: React.FC<any>
+}
+
+/**
+ * Register a new field type
+ * @param type The name for this field in kebab-case, eg `email` or `array-field`
+ * @param component The React component
+ * @param options
+ * @param options.isControlled Set this to true if this is a controlled field.
+ * @param options.hideLabel Hide the field label, for example for the checkbox field.
+ */
+export const createField = <TProps extends object>(
+  component: React.FC<TProps>,
+  options?: CreateFieldOptions
+) => {
+  let InputComponent
+  if (options?.isControlled) {
+    InputComponent = withControlledInput(component)
+  } else {
+    InputComponent = withUncontrolledInput(component)
+  }
+
+  const Field = _createField(InputComponent, {
+    displayName: `${component.displayName ?? 'Custom'}Field`,
+    hideLabel: options?.hideLabel,
+    BaseField: options?.BaseField || BaseField,
+  }) as React.FC<TProps & BaseFieldProps>
+
+  return Field
+}