@saas-ui/forms 2.0.0-next.5 → 2.0.0-next.7

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,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,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 {\n  createForm,\n  CreateFormProps,\n  WithFields,\n  FormProps,\n} from '@saas-ui/forms'\nimport { 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    ...options,\n  }) as <\n    TSchema extends z.AnyZodObject = z.AnyZodObject,\n    TContext extends object = object\n  >(\n    props: WithFields<FormProps<z.infer<TSchema>, TContext, TSchema>, FieldDefs>\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.5",
+  "version": "2.0.0-next.7",
   "description": "Fully functional forms for Chakra UI.",
   "source": "src/index.ts",
   "exports": {
@@ -48,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",
@@ -86,10 +87,10 @@
     "url": "https://storybook.saas-ui.dev"
   },
   "dependencies": {
-    "@chakra-ui/react-utils": "^2.0.11",
-    "@chakra-ui/utils": "^2.0.14",
-    "@saas-ui/core": "2.0.0-next.5",
-    "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.6",
+    "react-hook-form": "^7.43.9"
   },
   "peerDependencies": {
     "@chakra-ui/react": ">=2.4.9",
@@ -100,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,7 +7,7 @@ import {
   Button,
   ButtonProps,
 } from '@chakra-ui/react'
-import { AddIcon, MinusIcon } from '@chakra-ui/icons'
+import { PlusIcon, MinusIcon } from '@saas-ui/core/icons'
 
 import { FormLayout, FormLayoutProps } from './layout'
 import { BaseField } from './base-field'
@@ -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 {}
 
@@ -167,16 +170,23 @@ export const ArrayFieldAddButton: React.FC<ArrayFieldButtonProps> = (props) => {
       {...useArrayFieldAddButton()}
       {...props}
     >
-      {props.children || <AddIcon />}
+      {props.children || <PlusIcon />}
     </Button>
   )
 }
 
 ArrayFieldAddButton.displayName = 'ArrayFieldAddButton'
 
-export interface ArrayFieldProps
-  extends ArrayFieldOptions,
-    Omit<BaseFieldProps, '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.
@@ -187,19 +197,21 @@ 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>
     )
@@ -227,6 +239,11 @@ export const ArrayFieldRows = ({
 
 ArrayFieldRows.displayName = 'ArrayFieldRows'
 
+export interface ArrayFieldContainerProps
+  extends Omit<ArrayFieldProps, 'children'> {
+  children: React.ReactNode
+}
+
 /**
  * The container component provides context and state management.
  *
@@ -242,7 +259,7 @@ export const ArrayFieldContainer = React.forwardRef(
       max,
       children,
       ...fieldProps
-    }: ArrayFieldProps,
+    }: ArrayFieldContainerProps,
     ref: React.ForwardedRef<UseArrayFieldReturn>
   ) => {
     const context = useArrayField({

package/src/base-field.tsx

@@ -1,11 +1,5 @@
 import * as React from 'react'
-import {
-  useFormContext,
-  FormState,
-  get,
-  RegisterOptions,
-  FieldValues,
-} from 'react-hook-form'
+import { FormState, get } from 'react-hook-form'
 
 import {
   Box,
@@ -14,8 +8,9 @@ import {
   FormHelperText,
   FormErrorMessage,
 } from '@chakra-ui/react'
-import { FocusableElement } from '@chakra-ui/utils'
-import { useField } from './fields-context'
+
+import { useFormContext } from './form-context'
+
 import { BaseFieldProps, FieldProps } from './types'
 
 const getError = (name: string, formState: FormState<{ [x: string]: any }>) => {

package/src/create-field.tsx

@@ -1,10 +1,11 @@
 import * as React from 'react'
-import { useFormContext, Controller } from 'react-hook-form'
+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

package/src/create-form.tsx

@@ -1,30 +1,53 @@
-import React from 'react'
+import React, { ForwardedRef } from 'react'
 import { FieldsProvider } from './fields-context'
 import { Form, FieldValues, FormProps, GetResolver } from './form'
 import { WithFields } from './types'
+import { objectFieldResolver } from './field-resolver'
+import { GetFieldResolver } from './field-resolver'
+import { forwardRef } from '@chakra-ui/react'
 
 export interface CreateFormProps<FieldDefs> {
   resolver?: GetResolver
+  fieldResolver?: GetFieldResolver
   fields?: FieldDefs extends Record<string, React.FC<any>> ? FieldDefs : never
 }
 
 export function createForm<FieldDefs, Schema = any>({
   resolver,
+  fieldResolver = objectFieldResolver,
   fields,
 }: CreateFormProps<FieldDefs> = {}) {
-  const CreateForm = <
+  const CreateForm = forwardRef(
+    <
+      TFieldValues extends FieldValues,
+      TContext extends object = object,
+      TSchema extends Schema = Schema
+    >(
+      props: WithFields<FormProps<TFieldValues, TContext, TSchema>, FieldDefs>,
+      ref: ForwardedRef<HTMLFormElement>
+    ) => {
+      const { schema, ...rest } = props
+      return (
+        <FieldsProvider value={fields || {}}>
+          <Form
+            ref={ref}
+            resolver={resolver?.(props.schema)}
+            fieldResolver={fieldResolver?.(schema)}
+            {...rest}
+          />
+        </FieldsProvider>
+      )
+    }
+  ) as (<
     TFieldValues extends FieldValues,
     TContext extends object = object,
     TSchema extends Schema = Schema
   >(
-    props: WithFields<FormProps<TFieldValues, TContext, TSchema>, FieldDefs>
-  ) => {
-    const { schema, ...rest } = props
-    return (
-      <FieldsProvider value={fields || {}}>
-        <Form resolver={resolver?.(props.schema)} {...rest} />
-      </FieldsProvider>
-    )
+    props: WithFields<FormProps<TFieldValues, TContext, TSchema>, FieldDefs> & {
+      ref?: React.ForwardedRef<HTMLFormElement>
+    }
+  ) => React.ReactElement) & {
+    displayName?: string
   }
 
   return CreateForm

package/src/default-fields.tsx

@@ -22,7 +22,14 @@ import { NumberInput, NumberInputProps } from './number-input'
 import { PasswordInput, PasswordInputProps } from './password-input'
 import { RadioInput, RadioInputProps } from './radio'
 
-import { Select, SelectProps, NativeSelect, NativeSelectProps } from './select'
+import {
+  Select,
+  SelectButton,
+  SelectList,
+  SelectProps,
+  NativeSelect,
+  NativeSelectProps,
+} from './select'
 
 import { createField } from './create-field'
 
@@ -74,9 +81,19 @@ export const SwitchField = createField<SwitchProps>(
   }
 )
 
-export const SelectField = createField<SelectProps>(Select, {
-  isControlled: true,
-})
+export const SelectField = createField<SelectProps>(
+  forwardRef((props, ref) => {
+    return (
+      <Select ref={ref} {...props}>
+        <SelectButton />
+        <SelectList />
+      </Select>
+    )
+  }),
+  {
+    isControlled: true,
+  }
+)
 
 export const CheckboxField = createField<CheckboxProps>(
   forwardRef(({ label, type, ...props }, ref) => {

package/src/display-field.tsx

@@ -1,6 +1,5 @@
 import * as React from 'react'
-import { useFormContext } from 'react-hook-form'
-
+import { useFormContext } from './form-context'
 import {
   Text,
   FormControl,

package/src/display-if.tsx

@@ -1,16 +1,19 @@
 import * as React from 'react'
 import {
-  useFormContext,
   useWatch,
   FieldValues,
   UseFormReturn,
+  FieldPath,
 } from 'react-hook-form'
 
+import { useFormContext } from './form-context'
+
 export interface DisplayIfProps<
-  TFieldValues extends FieldValues = FieldValues
+  TFieldValues extends FieldValues = FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
 > {
   children: React.ReactElement
-  name: string
+  name: TName
   defaultValue?: unknown
   isDisabled?: boolean
   isExact?: boolean
@@ -21,21 +24,24 @@ export interface DisplayIfProps<
  *
  * @see Docs https://saas-ui.dev/docs/components/forms/form
  */
-export const DisplayIf = <TFieldValues extends FieldValues = FieldValues>({
+export const DisplayIf = <
+  TFieldValues extends FieldValues = FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
+>({
   children,
   name,
   defaultValue,
   isDisabled,
   isExact,
   condition = (value) => !!value,
-}: DisplayIfProps<TFieldValues>) => {
-  const value = useWatch({
+}: DisplayIfProps<TFieldValues, TName>) => {
+  const value = useWatch<TFieldValues>({
     name,
-    defaultValue,
+    defaultValue: defaultValue as any,
     disabled: isDisabled,
     exact: isExact,
   })
-  const context = useFormContext<TFieldValues>()
+  const context = useFormContext() as any
   return condition(value, context) ? children : null
 }
 

package/src/field-resolver.ts

@@ -1,20 +1,22 @@
-import { BaseFieldProps as FieldProps } from './types'
+import { BaseFieldProps } from './types'
 
 import { get } from '@chakra-ui/utils'
 
 export type FieldResolver = {
-  getFields(): FieldProps[]
-  getNestedFields(name: string): FieldProps[]
+  getFields(): BaseFieldProps[]
+  getNestedFields(name: string): BaseFieldProps[]
 }
 
-interface SchemaField extends FieldProps {
+export type GetFieldResolver<TSchema = any> = (schema: TSchema) => FieldResolver
+
+interface SchemaField extends BaseFieldProps {
   items?: SchemaField[]
   properties?: Record<string, SchemaField>
 }
 
 export type ObjectSchema = Record<string, SchemaField>
 
-const mapFields = (schema: ObjectSchema): FieldProps[] =>
+const mapFields = (schema: ObjectSchema): BaseFieldProps[] =>
   schema &&
   Object.entries(schema).map(([name, { items, label, title, ...field }]) => {
     return {
@@ -24,11 +26,11 @@ const mapFields = (schema: ObjectSchema): FieldProps[] =>
     }
   })
 
-export const objectFieldResolver = (schema: ObjectSchema): FieldResolver => {
-  const getFields = () => {
+export const objectFieldResolver: GetFieldResolver<ObjectSchema> = (schema) => {
+  const getFields = (): BaseFieldProps[] => {
     return mapFields(schema)
   }
-  const getNestedFields = (name: string) => {
+  const getNestedFields = (name: string): BaseFieldProps[] => {
     const field = get(schema, name)
 
     if (!field) return []

package/src/field.tsx

@@ -4,6 +4,7 @@ import { RegisterOptions, FieldValues } from 'react-hook-form'
 import { FocusableElement } from '@chakra-ui/utils'
 import { useField } from './fields-context'
 import { FieldProps } from './types'
+import { useFieldProps } from './form-context'
 
 export interface Option {
   value: string
@@ -33,9 +34,11 @@ export const Field = React.forwardRef(
     props: FieldProps<TFieldValues>,
     ref: React.ForwardedRef<FocusableElement>
   ) => {
-    const { type = defaultInputType } = props
-    const InputComponent = useField(type)
-    return <InputComponent ref={ref} {...props} />
+    const { type = defaultInputType, name } = props
+    const overrides = useFieldProps(name)
+    const InputComponent = useField(overrides?.type || type)
+
+    return <InputComponent ref={ref} {...props} {...overrides} />
   }
 ) as (<TFieldValues extends FieldValues>(
   props: FieldProps<TFieldValues> & {

package/src/fields.tsx

@@ -1,6 +1,5 @@
 import * as React from 'react'
 
-import { Form } from './form'
 import { FormLayout } from './layout'
 import { BaseFieldProps } from './types'
 import { Field } from './field'
@@ -8,10 +7,10 @@ import { Field } from './field'
 import { ArrayField } from './array-field'
 import { ObjectField } from './object-field'
 import { FieldResolver } from './field-resolver'
-import { useFormContext } from 'react-hook-form'
+import { useFormContext } from './form-context'
 
-export interface FieldsProps {
-  schema: any
+export interface FieldsProps<TSchema = any> {
+  schema?: TSchema
   fieldResolver?: FieldResolver
   focusFirstField?: boolean
 }
@@ -35,29 +34,33 @@ const mapNestedFields = (resolver: FieldResolver, name: string) => {
 }
 
 export const AutoFields: React.FC<FieldsProps> = ({
-  schema,
-  fieldResolver,
+  schema: schemaProp,
+  fieldResolver: fieldResolverProp,
   focusFirstField,
   ...props
 }) => {
-  const resolver = React.useMemo(
-    () => fieldResolver || Form.getFieldResolver(schema),
-    [schema, fieldResolver]
-  )
+  const context = useFormContext()
+  const schema = schemaProp || context.schema
+  const fieldResolver = fieldResolverProp || context.fieldResolver
+  const resolver = React.useMemo(() => fieldResolver, [schema, fieldResolver])
 
-  const fields = React.useMemo(() => resolver.getFields(), [resolver])
+  const fields = React.useMemo(() => resolver?.getFields(), [resolver])
 
   const form = useFormContext()
 
   React.useEffect(() => {
-    if (focusFirstField && fields[0]?.name) {
+    if (focusFirstField && fields?.[0]?.name) {
       form.setFocus(fields[0].name)
     }
   }, [schema, fieldResolver, focusFirstField])
 
+  if (!resolver) {
+    return null
+  }
+
   return (
     <FormLayout {...props}>
-      {fields.map(
+      {fields?.map(
         ({
           name,
           type,

package/src/form-context.tsx

@@ -0,0 +1,84 @@
+import { createContext, useContext } from 'react'
+import {
+  FormProvider as HookFormProvider,
+  FormProviderProps as HookFormProviderProps,
+  useFormContext as useHookFormContext,
+  FieldValues,
+} from 'react-hook-form'
+import { FieldResolver } from './field-resolver'
+import { BaseFieldProps, FieldProps } from './types'
+
+export type FormContextValue<
+  TFieldValues extends FieldValues = FieldValues,
+  TContext = any,
+  TSchema = any
+> = {
+  fieldResolver?: FieldResolver
+  schema?: TSchema
+  fields?: {
+    [key: string]: unknown
+  }
+}
+
+export type FormProviderProps<
+  TFieldValues extends FieldValues = FieldValues,
+  TContext = any,
+  TSchema = any
+> = HookFormProviderProps<TFieldValues, TContext> & {
+  fieldResolver?: FieldResolver
+  schema?: TSchema
+  fields?: {
+    [key: string]: unknown
+  }
+}
+
+const FormContext = createContext<FormContextValue | null>(null)
+
+export const useFormContext = <
+  TFieldValues extends FieldValues = FieldValues,
+  TContext = any,
+  TSchema = any
+>() => {
+  const context = useContext(FormContext)
+  const hookContext = useHookFormContext()
+
+  if (!context) {
+    throw new Error('FormProvider must be used within a Form component')
+  }
+
+  return {
+    ...hookContext,
+    ...context,
+  }
+}
+
+export const useFieldProps = <TFieldValues extends FieldValues = FieldValues>(
+  name: string
+): BaseFieldProps<TFieldValues> | undefined => {
+  const parsedName = name?.replace(/\.[0-9]/g, '.$')
+  const context = useFormContext()
+  return context?.fields?.[parsedName] as any
+}
+
+export type UseFormReturn<
+  TFieldValues extends FieldValues = FieldValues,
+  TContext = any,
+  TSchema = any
+> = ReturnType<typeof useFormContext>
+
+export const FormProvider = <
+  TFieldValues extends FieldValues = FieldValues,
+  TContext = any,
+  TSchema = any
+>(
+  props: FormProviderProps<TFieldValues, TContext, TSchema>
+) => {
+  const { children, fieldResolver, schema, fields, ...rest } = props
+  return (
+    <HookFormProvider {...rest}>
+      <FormContext.Provider value={{ fieldResolver, schema, fields }}>
+        {children}
+      </FormContext.Provider>
+    </HookFormProvider>
+  )
+}