@saas-ui/forms 1.5.3 → 2.0.0-next.1

package/dist/zod/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../zod/src/zod-resolver.ts"],"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 const zodForm = <T extends z.ZodTypeAny>(\n  schema: T,\n  schemaOptions = {},\n  resolverOptions = {}\n) => {\n  return {\n    schema,\n    resolver: zodResolver(schema, schemaOptions, resolverOptions),\n    fieldResolver: zodFieldResolver(schema),\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"],"names":["getType","field","_def","typeName","getArrayOption","name","_field$_def$name","value","getFieldsFromSchema","schema","fields","schemaFields","type","shape","options","min","max","meta","description","zodParseMeta","push","label","getNestedSchema","path","get","zodFieldResolver","getFields","getNestedFields","JSON","parse","e","schemaOptions","resolverOptions","resolver","zodResolver","fieldResolver","stringify"],"mappings":"2SAYA,IAAMA,EAAU,SAACC,GACf,OAAQA,EAAMC,KAAKC,UACjB,IAAK,WACH,MAAO,QACT,IAAK,YACH,MAAO,SACT,IAAK,YACH,MAAO,SACT,IAAK,UACH,MAAO,OAET,QACE,MAAO,OAEb,EAEoBC,EAAG,SAACH,EAAYI,SAClC,OAAO,OAAAJ,EAAAA,EAAMC,KAAKG,SAAX,EAAAC,EAAkBC,KAC3B,EAQaC,EAAsB,SAACC,GAClC,IAAMC,EAAuB,GAEzBC,EAAoC,CAAA,EACxC,GAA6B,aAAzBF,EAAOP,KAAKC,SACdQ,EAAeF,EAAOP,KAAKU,KAAKC,UACvBJ,IAAyB,cAAzBA,EAAOP,KAAKC,SAGrB,OACDO,EAHCC,EAAeF,EAAOP,KAAKW,OAG5B,CAED,IAAK,SAAcF,EAAc,CAC/B,IAAMV,EAAQU,EAAaN,GAEdS,EAAY,CAAE,EACC,aAAxBb,EAAMC,KAAKC,WACbW,EAAQC,IAAMX,EAAeH,EAAO,aACpCa,EAAQE,IAAMZ,EAAeH,EAAO,cAGtC,IAAUgB,EAAGhB,EAAMiB,aAAeC,EAAalB,EAAMiB,aAErDR,EAAOU,KACLf,EAAAA,CAAAA,KAAAA,EACAgB,OAAOJ,MAAAA,OAAAA,EAAAA,EAAMI,QAASpB,EAAMiB,aAAeb,EAC3CO,MAAMK,MAAAA,OAAAA,EAAAA,EAAML,OAAQZ,EAAQC,IACzBa,GAEN,CACD,OACFJ,CAAA,EAE4BY,EAAG,SAACb,EAAsBc,GACpD,OAAUC,MAACf,EAAOP,KAAKW,QAASU,EAClC,EAEaE,EAAmB,SAAyBhB,GACvD,MAAO,CACLiB,qBACE,OAA0BlB,EAACC,EAC7B,EACAkB,gBAAgBtB,SAAAA,GACd,OAA0BG,EAACc,EAAgBb,EAAQJ,GACrD,EAEJ,EAuByBc,EAAG,SAACF,GAC3B,IACE,OAAWW,KAACC,MAAMZ,EAGnB,CAFC,MAAOa,GACP,OACDb,CAAA,CACH,uMA3BuB,SACrBR,EACAsB,EACAC,GAEA,YAHa,IAAbD,IAAAA,EAAgB,CAAA,QACD,IAAfC,IAAAA,EAAkB,CAAA,GAEX,CACLvB,OAAAA,EACAwB,SAAUC,EAAAA,YAAYzB,EAAQsB,EAAeC,GAC7CG,cAAeV,EAAiBhB,GAEpC,kBAOuB,SAACQ,GACtB,OAAWW,KAACQ,UAAUnB,EACxB"}
+{"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"]}

package/dist/zod/index.mjs

@@ -0,0 +1,85 @@
+import { zodResolver } from '@hookform/resolvers/zod';
+export { zodResolver } from '@hookform/resolvers/zod';
+import { get } from '@chakra-ui/utils';
+import { createForm } from '@saas-ui/forms';
+
+// zod/src/zod-resolver.ts
+var getType = (field) => {
+  switch (field._def.typeName) {
+    case "ZodArray":
+      return "array";
+    case "ZodObject":
+      return "object";
+    case "ZodNumber":
+      return "number";
+    case "ZodDate":
+      return "date";
+    case "ZodString":
+    default:
+      return "text";
+  }
+};
+var getArrayOption = (field, name) => {
+  var _a;
+  return (_a = field._def[name]) == null ? void 0 : _a.value;
+};
+var getFieldsFromSchema = (schema) => {
+  const fields = [];
+  let schemaFields = {};
+  if (schema._def.typeName === "ZodArray") {
+    schemaFields = schema._def.type.shape;
+  } else if (schema._def.typeName === "ZodObject") {
+    schemaFields = schema._def.shape();
+  } else {
+    return fields;
+  }
+  for (const name in schemaFields) {
+    const field = schemaFields[name];
+    const options = {};
+    if (field._def.typeName === "ZodArray") {
+      options.min = getArrayOption(field, "minLength");
+      options.max = getArrayOption(field, "maxLength");
+    }
+    const meta = field.description && zodParseMeta(field.description);
+    fields.push({
+      name,
+      label: (meta == null ? void 0 : meta.label) || field.description || name,
+      type: (meta == null ? void 0 : meta.type) || getType(field),
+      ...options
+    });
+  }
+  return fields;
+};
+var getNestedSchema = (schema, path) => {
+  return get(schema._def.shape(), path);
+};
+var zodFieldResolver = (schema) => {
+  return {
+    getFields() {
+      return getFieldsFromSchema(schema);
+    },
+    getNestedFields(name) {
+      return getFieldsFromSchema(getNestedSchema(schema, name));
+    }
+  };
+};
+var zodMeta = (meta) => {
+  return JSON.stringify(meta);
+};
+var zodParseMeta = (meta) => {
+  try {
+    return JSON.parse(meta);
+  } catch (e) {
+    return meta;
+  }
+};
+var createZodForm = (options) => {
+  return createForm({
+    resolver: (schema) => zodResolver(schema, options == null ? void 0 : options.schemaOptions, options == null ? void 0 : options.resolverOptions),
+    ...options
+  });
+};
+
+export { createZodForm, getFieldsFromSchema, getNestedSchema, zodFieldResolver, zodMeta, zodParseMeta };
+//# sourceMappingURL=out.js.map
+//# sourceMappingURL=index.mjs.map

package/dist/zod/index.mjs.map

@@ -0,0 +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"]}

package/package.json

@@ -1,61 +1,55 @@
 {
   "name": "@saas-ui/forms",
-  "version": "1.5.3",
+  "version": "2.0.0-next.1",
   "description": "Fully functional forms for Chakra UI.",
   "source": "src/index.ts",
   "exports": {
     ".": {
       "require": "./dist/index.js",
-      "import": "./dist/index.modern.mjs"
+      "import": "./dist/index.mjs"
     },
     "./src": {
       "default": "./src/index.ts"
     },
     "./yup": {
       "require": "./dist/yup/index.js",
-      "import": "./dist/yup/index.modern.mjs"
+      "import": "./dist/yup/index.mjs"
     },
     "./yup/src": {
       "default": "./yup/src/index.ts"
     },
     "./zod": {
       "require": "./dist/zod/index.js",
-      "import": "./dist/zod/index.modern.mjs"
+      "import": "./dist/zod/index.mjs"
     },
     "./zod/src": {
       "default": "./zod/src/index.ts"
     },
     "./ajv": {
       "require": "./dist/ajv/index.js",
-      "import": "./dist/ajv/index.modern.mjs"
+      "import": "./dist/ajv/index.mjs"
     },
     "./ajv/src": {
       "default": "./ajv/src/index.ts"
     }
   },
   "main": "./dist/index.js",
-  "module": "./dist/index.modern.mjs",
+  "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",
   "scripts": {
     "clean": "rimraf --no-glob ./dist",
     "build": "yarn build:package && yarn build:yup && yarn build:zod && yarn build:ajv",
-    "build:package": "yarn clean && cross-env NODE_ENV=production microbundle --tsconfig ./tsconfig.json --jsx React.createElement --jsxFragment React.Fragment -f cjs,modern --compress",
-    "build:yup": "cross-env NODE_ENV=production microbundle --cwd yup --tsconfig ./yup/tsconfig.json -f cjs,modern --compress",
-    "build:zod": "cross-env NODE_ENV=production microbundle --cwd zod --tsconfig ./zod/tsconfig.json -f cjs,modern --compress",
-    "build:ajv": "cross-env NODE_ENV=production microbundle --cwd ajv --tsconfig ./ajv/tsconfig.json -f cjs,modern --compress",
+    "build:package": "tsup src/index.ts --config tsup.config.ts",
+    "build:yup": "tsup yup/src/index.ts --config yup/tsup.config.ts",
+    "build:zod": "tsup zod/src/index.ts --config zod/tsup.config.ts",
+    "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"
   },
   "files": [
     "dist",
-    "src",
-    "yup/package.json",
-    "yup/src",
-    "zod/package.json",
-    "zod/src",
-    "ajv/package.json",
-    "ajv/src"
+    "src"
   ],
   "sideEffects": false,
   "publishConfig": {
@@ -92,26 +86,22 @@
     "@chakra-ui/icons": "^2.0.16",
     "@chakra-ui/react-utils": "^2.0.11",
     "@chakra-ui/utils": "^2.0.14",
-    "@hookform/resolvers": "^2.9.10",
-    "@saas-ui/button": "1.4.0",
-    "@saas-ui/input-right-button": "1.4.0",
-    "@saas-ui/number-input": "1.4.0",
-    "@saas-ui/password-input": "1.4.0",
-    "@saas-ui/pin-input": "1.4.0",
-    "@saas-ui/radio": "1.4.1",
-    "@saas-ui/react-utils": "1.2.0",
-    "@saas-ui/select": "1.4.0",
-    "@saas-ui/stepper": "1.4.0",
-    "react-hook-form": "^7.42.1"
+    "@saas-ui/core": "2.0.0-next.1",
+    "react-hook-form": "^7.43.0"
   },
   "peerDependencies": {
-    "@chakra-ui/react": ">=2.4.6",
-    "@chakra-ui/system": ">=2.3.8",
-    "react": ">=18.0.0"
+    "@chakra-ui/react": ">=2.4.9",
+    "@emotion/react": ">=11.0.0",
+    "@emotion/styled": ">=11.0.0",
+    "framer-motion": ">=6.0.0",
+    "react": ">=18.0.0",
+    "react-dom": ">=18.0.0"
   },
   "devDependencies": {
-    "ajv": "^8.11.2",
+    "@hookform/resolvers": "^2.9.3",
+    "@types/json-schema": "^7.0.11",
+    "ajv": "^8.12.0",
     "yup": "^0.32.11",
-    "zod": "^3.19.1"
+    "zod": "^3.20.2"
   }
 }

package/src/array-field.tsx

@@ -1,9 +1,14 @@
 import * as React from 'react'
 
-import { chakra, ResponsiveValue, forwardRef } from '@chakra-ui/system'
+import {
+  chakra,
+  ResponsiveValue,
+  forwardRef,
+  Button,
+  ButtonProps,
+} from '@chakra-ui/react'
 import { __DEV__ } from '@chakra-ui/utils'
 import { AddIcon, MinusIcon } from '@chakra-ui/icons'
-import { IconButton, ButtonProps } from '@saas-ui/button'
 
 import { FormLayout, FormLayoutProps } from './layout'
 import { BaseField, FieldProps } from './field'
@@ -23,6 +28,8 @@ import {
   UseArrayFieldReturn,
 } from './use-array-field'
 
+export interface ArrayFieldButtonProps extends ButtonProps {}
+
 interface ArrayField {
   id: string
   [key: string]: unknown
@@ -120,14 +127,13 @@ if (__DEV__) {
   ArrayFieldRowContainer.displayName = 'ArrayFieldRowContainer'
 }
 
-export const ArrayFieldRemoveButton: React.FC<ButtonProps> = (props) => {
+export const ArrayFieldRemoveButton: React.FC<ArrayFieldButtonProps> = (
+  props
+) => {
   return (
-    <IconButton
-      icon={<MinusIcon />}
-      aria-label="Remove row"
-      {...useArrayFieldRemoveButton()}
-      {...props}
-    />
+    <Button aria-label="Remove row" {...useArrayFieldRemoveButton()} {...props}>
+      {props.children || <MinusIcon />}
+    </Button>
   )
 }
 
@@ -135,15 +141,16 @@ if (__DEV__) {
   ArrayFieldRemoveButton.displayName = 'ArrayFieldRemoveButton'
 }
 
-export const ArrayFieldAddButton: React.FC<ButtonProps> = (props) => {
+export const ArrayFieldAddButton: React.FC<ArrayFieldButtonProps> = (props) => {
   return (
-    <IconButton
-      icon={<AddIcon />}
+    <Button
       aria-label="Add row"
       float="right"
       {...useArrayFieldAddButton()}
       {...props}
-    />
+    >
+      {props.children || <AddIcon />}
+    </Button>
   )
 }
 

package/src/auto-form.tsx

@@ -1,13 +1,11 @@
 import * as React from 'react'
-import { FieldValues, UseFormReturn } from 'react-hook-form'
+import { FieldValues } from 'react-hook-form'
 import { forwardRef } from '@chakra-ui/react'
-import { __DEV__ } from '@chakra-ui/utils'
 
 import { Form, FormProps } from './form'
 import { FormLayout } from './layout'
 import { Fields } from './fields'
 import { SubmitButton } from './submit-button'
-import { FieldResolver } from '.'
 
 interface AutoFormOptions {
   /**
@@ -27,16 +25,21 @@ interface AutoFormOptions {
   fieldResolver?: any
 }
 
-export interface AutoFormProps<TFieldValues extends FieldValues>
-  extends Omit<FormProps<TFieldValues>, 'schema' | 'children'>,
+export interface AutoFormProps<
+  TFieldValues extends FieldValues,
+  TContext extends object = object
+> extends Omit<FormProps<TFieldValues, TContext>, 'schema' | 'children'>,
     AutoFormOptions {
   children?: React.ReactNode
 }
 
 export const AutoForm = forwardRef(
-  <TFieldValues extends FieldValues = FieldValues>(
-    props: AutoFormProps<TFieldValues>,
-    ref: React.ForwardedRef<UseFormReturn<TFieldValues>>
+  <
+    TFieldValues extends FieldValues = FieldValues,
+    TContext extends object = object
+  >(
+    props: AutoFormProps<TFieldValues, TContext>,
+    ref: React.ForwardedRef<HTMLFormElement>
   ) => {
     const {
       schema,
@@ -56,15 +59,6 @@ export const AutoForm = forwardRef(
       </Form>
     )
   }
-) as (<TFieldValues extends FieldValues>(
-  props: AutoFormProps<TFieldValues> & {
-    ref?: React.ForwardedRef<UseFormReturn<TFieldValues>>
-  }
-) => React.ReactElement) & {
-  displayName?: string
-  getFieldResolver?: (schema: any) => FieldResolver
-}
+)
 
-if (__DEV__) {
-  AutoForm.displayName = 'AutoForm'
-}
+AutoForm.displayName = 'AutoForm'

package/src/field-resolver.ts

@@ -20,7 +20,7 @@ const mapFields = (schema: ObjectSchema): FieldProps[] =>
     return {
       ...field,
       name,
-      label: label || title, // json schema compatibility
+      label: label || title || name, // json schema compatibility
     }
   })
 

package/src/field.tsx

@@ -35,16 +35,11 @@ import {
 } from '@chakra-ui/react'
 import { __DEV__, FocusableElement, callAllHandlers } from '@chakra-ui/utils'
 
-import { NumberInput, NumberInputProps } from '@saas-ui/number-input'
-import { PasswordInput, PasswordInputProps } from '@saas-ui/password-input'
-import { RadioInput, RadioInputProps } from '@saas-ui/radio'
+import { NumberInput, NumberInputProps } from './number-input'
+import { PasswordInput, PasswordInputProps } from './password-input'
+import { RadioInput, RadioInputProps } from './radio'
 
-import {
-  Select,
-  SelectProps,
-  NativeSelect,
-  NativeSelectProps,
-} from '@saas-ui/select'
+import { Select, SelectProps, NativeSelect, NativeSelectProps } from './select'
 
 export interface Option {
   value: string

package/src/fields.tsx

@@ -77,6 +77,4 @@ export const Fields: React.FC<FieldsProps> = ({
   )
 }
 
-if (__DEV__) {
-  Fields.displayName = 'Fields'
-}
+Fields.displayName = 'Fields'

package/src/form.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react'
 
 import { chakra, HTMLChakraProps, forwardRef } from '@chakra-ui/react'
-import { cx, MaybeFunction, runIfFn, __DEV__ } from '@chakra-ui/utils'
+import { cx, runIfFn, __DEV__ } from '@chakra-ui/utils'
 
 import {
   useForm,
@@ -13,7 +13,6 @@ import {
   SubmitErrorHandler,
   ResolverOptions,
   ResolverResult,
-  ChangeHandler,
   WatchObserver,
 } from 'react-hook-form'
 import { objectFieldResolver, FieldResolver } from './field-resolver'
@@ -21,14 +20,24 @@ import { MaybeRenderProp } from '@chakra-ui/react-utils'
 
 export type { UseFormReturn, FieldValues, SubmitHandler }
 
-interface FormOptions<
+import { Field as DefaultField, FieldProps } from './field'
+
+interface FormRenderContext<
   TFieldValues extends FieldValues = FieldValues,
   TContext extends object = object
+> extends UseFormReturn<TFieldValues, TContext> {
+  Field: React.FC<FieldProps<TFieldValues>>
+}
+
+interface FormOptions<
+  TFieldValues extends FieldValues = FieldValues,
+  TContext extends object = object,
+  TSchema = any
 > {
   /**
-   * The form schema, currently supports Yup schema only.
+   * The form schema, supports Yup, Zod, and AJV.
    */
-  schema?: any
+  schema?: TSchema
   /**
    * Triggers when any of the field change.
    */
@@ -42,34 +51,34 @@ interface FormOptions<
    */
   onError?: SubmitErrorHandler<TFieldValues>
   /**
-   * Ref on the HTMLFormElement.
+   * The Hook Form state ref.
    */
-  formRef?: React.RefObject<HTMLFormElement>
+  formRef?: React.RefObject<UseFormReturn<TFieldValues, TContext>>
   /**
    * The form children, can be a render prop or a ReactNode.
    */
-  children?: MaybeRenderProp<UseFormReturn<TFieldValues, TContext>>
+  children?: MaybeRenderProp<FormRenderContext<TFieldValues, TContext>>
 }
 
-// @todo Figure out how to pass down FieldValues to all Field components, if at all possible.
-
 export interface FormProps<
   TFieldValues extends FieldValues = FieldValues,
-  TContext extends object = object
+  TContext extends object = object,
+  TSchema = any
 > extends UseFormProps<TFieldValues, TContext>,
     Omit<
       HTMLChakraProps<'form'>,
       'children' | 'onChange' | 'onSubmit' | 'onError'
     >,
-    FormOptions<TFieldValues, TContext> {}
+    FormOptions<TFieldValues, TContext, TSchema> {}
 
 export const Form = forwardRef(
   <
     TFieldValues extends FieldValues = FieldValues,
-    TContext extends object = object
+    TContext extends object = object,
+    TSchema = any
   >(
-    props: FormProps<TFieldValues, TContext>,
-    ref: React.ForwardedRef<UseFormReturn<TFieldValues, TContext>>
+    props: FormProps<TFieldValues, TContext, TSchema>,
+    ref: React.ForwardedRef<HTMLFormElement>
   ) => {
     const {
       mode = 'all',
@@ -82,6 +91,9 @@ export const Form = forwardRef(
       delayError,
       schema,
       defaultValues,
+      values,
+      context,
+      resetOptions,
       onChange,
       onSubmit,
       onError,
@@ -94,12 +106,15 @@ export const Form = forwardRef(
       mode,
       resolver,
       defaultValues,
+      values,
       reValidateMode,
       shouldFocusError,
       shouldUnregister,
       shouldUseNativeValidation,
       criteriaMode,
       delayError,
+      context,
+      resetOptions,
     }
 
     if (schema && !resolver) {
@@ -110,7 +125,7 @@ export const Form = forwardRef(
     const { handleSubmit } = methods
 
     // This exposes the useForm api through the forwarded ref
-    React.useImperativeHandle(ref, () => methods, [ref, methods])
+    React.useImperativeHandle(formRef, () => methods, [formRef, methods])
 
     React.useEffect(() => {
       let subscription: any
@@ -120,22 +135,34 @@ export const Form = forwardRef(
       return () => subscription?.unsubscribe()
     }, [methods, onChange])
 
+    const Field: React.FC<FieldProps<TFieldValues>> = React.useMemo(
+      () => (props) => <DefaultField<TFieldValues> {...props} />,
+      []
+    )
+
     return (
       <FormProvider {...methods}>
         <chakra.form
-          ref={formRef}
+          ref={ref}
           onSubmit={handleSubmit(onSubmit, onError)}
           {...rest}
-          className={cx('saas-form', props.className)}
+          className={cx('sui-form', props.className)}
         >
-          {runIfFn(children, methods)}
+          {runIfFn(children, {
+            Field,
+            ...methods,
+          })}
         </chakra.form>
       </FormProvider>
     )
   }
-) as (<TFieldValues extends FieldValues, TContext extends object = object>(
-  props: FormProps<TFieldValues, TContext> & {
-    ref?: React.ForwardedRef<UseFormReturn<TFieldValues>>
+) as (<
+  TFieldValues extends FieldValues,
+  TContext extends object = object,
+  TSchema = any
+>(
+  props: FormProps<TFieldValues, TContext, TSchema> & {
+    ref?: React.ForwardedRef<HTMLFormElement>
   }
 ) => React.ReactElement) & {
   displayName?: string
@@ -145,9 +172,7 @@ export const Form = forwardRef(
 
 Form.getFieldResolver = objectFieldResolver
 
-if (__DEV__) {
-  Form.displayName = 'Form'
-}
+Form.displayName = 'Form'
 
 export type GetResolver = <
   TFieldValues extends FieldValues,
@@ -161,3 +186,22 @@ export type GetResolver = <
 ) => Promise<ResolverResult<TFieldValues>>
 
 export type GetFieldResolver = (schema: any) => FieldResolver
+
+export interface CreateFormProps {
+  resolver?: GetResolver
+}
+
+export function createForm<Schema = any>({ resolver }: CreateFormProps) {
+  const CreateForm = <
+    TFieldValues extends FieldValues,
+    TContext extends object = object,
+    TSchema extends Schema = Schema
+  >(
+    props: FormProps<TFieldValues, TContext, TSchema>
+  ) => {
+    const { schema, ...rest } = props
+    return <Form resolver={resolver?.(props.schema)} {...rest} />
+  }
+
+  return CreateForm
+}

package/src/index.ts

@@ -13,6 +13,9 @@ export * from './step-form'
 export * from './use-step-form'
 export * from './field-resolver'
 export * from './watch-field'
+export * from './input-right-button'
+export * from './select'
+export * from './password-input'
 
 export type {
   BatchFieldArrayUpdate,

package/src/input-right-button/index.ts

@@ -0,0 +1 @@
+export * from './input-right-button'

package/src/input-right-button/input-right-button.stories.tsx

@@ -0,0 +1,47 @@
+import {
+  Container,
+  Input,
+  InputGroup,
+  Icon,
+  FormControl,
+  FormLabel,
+} from '@chakra-ui/react'
+import * as React from 'react'
+
+import { ComponentStory } from '@storybook/react'
+
+import { InputRightButton } from '../src'
+
+import { FiEye } from 'react-icons/fi'
+
+export default {
+  title: 'Components/Forms/InputRightButton',
+  decorators: [
+    (Story: any) => (
+      <Container mt="40px">
+        <Story />
+      </Container>
+    ),
+  ],
+}
+
+const Template: ComponentStory<typeof InputRightButton> = (args) => (
+  <FormControl>
+    <FormLabel>Input Right Button</FormLabel>
+    <InputGroup>
+      <Input />
+      <InputRightButton {...args} />
+    </InputGroup>
+  </FormControl>
+)
+
+export const Basic = Template.bind({})
+Basic.args = {
+  label: 'Save',
+}
+
+export const WithIcon = Template.bind({})
+WithIcon.args = {
+  children: <Icon as={FiEye} />,
+  'aria-label': 'Show password',
+}