@saas-ui/forms 3.0.0-alpha.28 → 3.0.0-alpha.29

package/CHANGELOG.md

@@ -1,5 +1,16 @@
 # @saas-ui/forms
 
+## 3.0.0-alpha.29
+
+### Major Changes
+
+- New useForm hook that returns typed form components
+
+### Patch Changes
+
+- Updated dependencies
+  - @saas-ui/react@3.0.0-alpha.29
+
 ## 3.0.0-alpha.28
 
 ### Patch Changes

package/dist/index.d.mts

@@ -3,8 +3,8 @@ import React__default, { ForwardRefRenderFunction, PropsWithoutRef } from 'react
 import { RecipeProps, SimpleGridProps, InputProps, TextareaProps, SystemStyleObject, Field as Field$1, HTMLChakraProps, ButtonProps as ButtonProps$1 } from '@chakra-ui/react';
 import { MaybeRenderProp } from '@saas-ui/core/utils';
 import * as react_hook_form from 'react-hook-form';
-import { FieldValues, FieldPath, UseFormReturn as UseFormReturn$1, UseFieldArrayReturn, UseFormProps, WatchObserver, SubmitHandler, SubmitErrorHandler, ResolverOptions, ResolverResult, RegisterOptions, FormProviderProps as FormProviderProps$1 } from 'react-hook-form';
-export { ArrayPath, BatchFieldArrayUpdate, BrowserNativeObject, ChangeHandler, Control, Controller, ControllerFieldState, ControllerProps, ControllerRenderProps, CriteriaMode, CustomElement, DeepMap, DeepPartial, DeepPartialSkipArrayKey, DeepRequired, DefaultValues, DelayCallback, EmptyObject, ErrorOption, EventType, ExtractObjects, FieldArray, FieldArrayMethodProps, FieldArrayPath, FieldArrayPathValue, FieldArrayWithId, Field as FieldDef, FieldElement, FieldError, FieldErrors, FieldErrorsImpl, FieldName, FieldNamesMarkedBoolean, FieldPath, FieldPathByValue, FieldPathValue, FieldPathValues, FieldRefs, FieldValue, FieldValues, FormProviderProps, FormState, FormStateProxy, FormStateSubjectRef, GetIsDirty, InternalFieldErrors, InternalFieldName, InternalNameSet, IsAny, IsFlatObject, KeepStateOptions, LiteralUnion, Message, Mode, MultipleFieldErrors, Names, NativeFieldValue, NestedValue, NonUndefined, Noop, Primitive, ReadFormState, Ref, RefCallBack, RegisterOptions, Resolver, ResolverError, ResolverOptions, ResolverResult, ResolverSuccess, SetFieldValue, SetValueConfig, Subjects, SubmitErrorHandler, SubmitHandler, TriggerConfig, UnpackNestedValue, UseControllerProps, UseControllerReturn, UseFieldArrayProps, UseFieldArrayReturn, UseFormClearErrors, UseFormGetValues, UseFormHandleSubmit, UseFormProps, UseFormRegister, UseFormRegisterReturn, UseFormReset, UseFormResetField, UseFormReturn, UseFormSetError, UseFormSetFocus, UseFormSetValue, UseFormStateProps, UseFormStateReturn, UseFormTrigger, UseFormUnregister, UseFormWatch, UseWatchProps, Validate, ValidateResult, ValidationMode, ValidationRule, ValidationValue, ValidationValueMessage, WatchInternal, WatchObserver, appendErrors, useController, useFieldArray, useForm, useFormState, useWatch } from 'react-hook-form';
+import { FieldValues, FieldPath, UseFormReturn as UseFormReturn$2, UseFieldArrayReturn, UseFormProps as UseFormProps$1, WatchObserver, SubmitHandler, SubmitErrorHandler, ResolverOptions, ResolverResult, RegisterOptions, useForm as useForm$1, DefaultValues, FormProviderProps as FormProviderProps$1 } from 'react-hook-form';
+export { ArrayPath, BatchFieldArrayUpdate, BrowserNativeObject, ChangeHandler, Control, Controller, ControllerFieldState, ControllerProps, ControllerRenderProps, CriteriaMode, CustomElement, DeepMap, DeepPartial, DeepPartialSkipArrayKey, DeepRequired, DefaultValues, DelayCallback, EmptyObject, ErrorOption, EventType, ExtractObjects, FieldArray, FieldArrayMethodProps, FieldArrayPath, FieldArrayPathValue, FieldArrayWithId, Field as FieldDef, FieldElement, FieldError, FieldErrors, FieldErrorsImpl, FieldName, FieldNamesMarkedBoolean, FieldPath, FieldPathByValue, FieldPathValue, FieldPathValues, FieldRefs, FieldValue, FieldValues, FormProviderProps, FormState, FormStateProxy, FormStateSubjectRef, GetIsDirty, InternalFieldErrors, InternalFieldName, InternalNameSet, IsAny, IsFlatObject, KeepStateOptions, LiteralUnion, Message, Mode, MultipleFieldErrors, Names, NativeFieldValue, NestedValue, NonUndefined, Noop, Primitive, ReadFormState, Ref, RefCallBack, RegisterOptions, Resolver, ResolverError, ResolverOptions, ResolverResult, ResolverSuccess, SetFieldValue, SetValueConfig, Subjects, SubmitErrorHandler, SubmitHandler, TriggerConfig, UnpackNestedValue, UseControllerProps, UseControllerReturn, UseFieldArrayProps, UseFieldArrayReturn, UseFormClearErrors, UseFormGetValues, UseFormHandleSubmit, UseFormRegister, UseFormRegisterReturn, UseFormReset, UseFormResetField, UseFormSetError, UseFormSetFocus, UseFormSetValue, UseFormStateProps, UseFormStateReturn, UseFormTrigger, UseFormUnregister, UseFormWatch, UseWatchProps, Validate, ValidateResult, ValidationMode, ValidationRule, ValidationValue, ValidationValueMessage, WatchInternal, WatchObserver, appendErrors, useController, useFieldArray, useFormState, useWatch } from 'react-hook-form';
 import { CheckboxProps } from '@saas-ui/react/checkbox';
 import { NumberInputProps } from '@saas-ui/react/number-input';
 import { PasswordInputProps } from '@saas-ui/react/password-input';
@@ -15,6 +15,7 @@ import { SwitchProps } from '@saas-ui/react/switch';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { UseStepperReturn } from '@saas-ui/core';
 import { ButtonProps } from '@saas-ui/react/button';
+import { z } from 'zod';
 
 interface FormLayoutOptions {
     columns?: SimpleGridProps['columns'];
@@ -96,8 +97,8 @@ interface DisplayIfProps<TFieldValues extends FieldValues = FieldValues, TName e
     defaultValue?: unknown;
     isDisabled?: boolean;
     isExact?: boolean;
-    condition?: (value: unknown, context: UseFormReturn$1<TFieldValues>) => boolean;
-    onToggle?: (conditionMatched: boolean, context: UseFormReturn$1<TFieldValues>) => void;
+    condition?: (value: unknown, context: UseFormReturn$2<TFieldValues>) => boolean;
+    onToggle?: (conditionMatched: boolean, context: UseFormReturn$2<TFieldValues>) => void;
 }
 /**
  * Conditionally render parts of a form.
@@ -216,7 +217,7 @@ declare const useArrayFieldAddButton: () => {
     isDisabled: boolean;
 };
 
-interface FormRenderContext<TFieldValues extends FieldValues = FieldValues, TContext extends object = object, TFieldTypes = FieldProps<TFieldValues>> extends UseFormReturn$1<TFieldValues, TContext> {
+interface FormRenderContext<TFieldValues extends FieldValues = FieldValues, TContext extends object = object, TFieldTypes = FieldProps<TFieldValues>> extends UseFormReturn$2<TFieldValues, TContext> {
     Field: React__default.FC<TFieldTypes & React__default.RefAttributes<FocusableElement>>;
     DisplayIf: React__default.FC<DisplayIfProps<TFieldValues>>;
     ArrayField: React__default.FC<ArrayFieldProps<TFieldValues> & React__default.RefAttributes<UseArrayFieldReturn>>;
@@ -242,7 +243,7 @@ interface FormOptions<TSchema = unknown, TFieldValues extends FieldValues = Fiel
     /**
      * The Hook Form state ref.
      */
-    formRef?: React__default.Ref<UseFormReturn$1<TFieldValues, TContext>>;
+    formRef?: React__default.Ref<UseFormReturn$2<TFieldValues, TContext>>;
     /**
      * The form children, can be a render prop or a ReactNode.
      */
@@ -256,7 +257,7 @@ interface FormOptions<TSchema = unknown, TFieldValues extends FieldValues = Fiel
      */
     fields?: DefaultFieldOverrides;
 }
-interface FormProps<TSchema = unknown, TFieldValues extends FieldValues = FieldValues, TContext extends object = object, TExtraFieldProps extends object = object, TFieldTypes = FieldProps<TFieldValues, TExtraFieldProps>> extends UseFormProps<TFieldValues, TContext>, Omit<HTMLChakraProps<'form'>, 'children' | 'onChange' | 'onSubmit' | 'onError'>, FormOptions<TSchema, TFieldValues, TContext, TExtraFieldProps, TFieldTypes> {
+interface FormProps$1<TSchema = unknown, TFieldValues extends FieldValues = FieldValues, TContext extends object = object, TExtraFieldProps extends object = object, TFieldTypes = FieldProps<TFieldValues, TExtraFieldProps>> extends UseFormProps$1<TFieldValues, TContext>, Omit<HTMLChakraProps<'form'>, 'children' | 'onChange' | 'onSubmit' | 'onError'>, FormOptions<TSchema, TFieldValues, TContext, TExtraFieldProps, TFieldTypes> {
 }
 /**
  * The wrapper component provides context, state, and focus management.
@@ -264,7 +265,7 @@ interface FormProps<TSchema = unknown, TFieldValues extends FieldValues = FieldV
  * @see Docs https://saas-ui.dev/docs/components/forms/form
  */
 declare const Form$1: FormComponent;
-type FormComponent = (<TSchema = unknown, TFieldValues extends FieldValues = FieldValues, TContext extends object = object, TExtraFieldProps extends object = object, TFieldTypes = FieldProps<TFieldValues>>(props: FormProps<TSchema, TFieldValues, TContext, TExtraFieldProps, TFieldTypes> & {
+type FormComponent = (<TSchema = unknown, TFieldValues extends FieldValues = FieldValues, TContext extends object = object, TExtraFieldProps extends object = object, TFieldTypes = FieldProps<TFieldValues>>(props: FormProps$1<TSchema, TFieldValues, TContext, TExtraFieldProps, TFieldTypes> & {
     ref?: React__default.ForwardedRef<HTMLFormElement>;
 }) => React__default.ReactElement) & {
     displayName?: string;
@@ -429,7 +430,7 @@ type FieldOverrides<FieldDefs, TFieldValues extends FieldValues = FieldValues, T
         type?: 'array';
     } & Omit<ArrayFieldProps<TFieldValues>, 'name' | 'children'>);
 };
-type WithFields<TFormProps extends FormProps<any, any, any, any, any>, FieldDefs, ExtraOverrides = object> = TFormProps extends FormProps<infer _TSchema, infer TFieldValues, infer TContext, infer TExtraFieldProps> ? Omit<TFormProps, 'children' | 'fields'> & {
+type WithFields<TFormProps extends FormProps$1<any, any, any, any, any>, FieldDefs, ExtraOverrides = object> = TFormProps extends FormProps$1<infer _TSchema, infer TFieldValues, infer TContext, infer TExtraFieldProps> ? Omit<TFormProps, 'children' | 'fields'> & {
     children?: FormChildren<FieldDefs, TFieldValues, TContext, TExtraFieldProps>;
     fields?: FieldOverrides<FieldDefs, TFieldValues> & {
         submit?: SubmitButtonProps;
@@ -545,7 +546,7 @@ interface CreateFormProps<FieldDefs, TGetBaseField extends GetBaseField = GetBas
     fields?: FieldDefs extends Record<string, React__default.FC<any>> ? FieldDefs : never;
     getBaseField?: TGetBaseField;
 }
-type FormType<FieldDefs, ExtraProps = object, ExtraFieldProps extends object = object, ExtraOverrides = object> = (<TSchema = unknown, TFieldValues extends FieldValues = FieldValues, TContext extends object = object>(props: WithFields<FormProps<TSchema, TFieldValues, TContext, ExtraFieldProps>, FieldDefs, ExtraOverrides> & {
+type FormType<FieldDefs, ExtraProps = object, ExtraFieldProps extends object = object, ExtraOverrides = object> = (<TSchema = unknown, TFieldValues extends FieldValues = FieldValues, TContext extends object = object>(props: WithFields<FormProps$1<TSchema, TFieldValues, TContext, ExtraFieldProps>, FieldDefs, ExtraOverrides> & {
     ref?: React__default.ForwardedRef<HTMLFormElement>;
 } & ExtraProps) => React__default.ReactElement) & {
     displayName?: string;
@@ -553,6 +554,30 @@ type FormType<FieldDefs, ExtraProps = object, ExtraFieldProps extends object = o
 };
 declare function createForm<FieldDefs, TGetBaseField extends GetBaseField<any> = GetBaseField<any>>({ resolver, fieldResolver, fields, getBaseField, }?: CreateFormProps<FieldDefs, TGetBaseField>): FormType<FieldDefs, object, TGetBaseField extends GetBaseField<infer ExtraFieldProps extends object> ? ExtraFieldProps : object, object>;
 
+interface UseFormProps<TFieldValues extends FieldValues, TContext extends object> extends UseFormProps$1<TFieldValues, TContext> {
+}
+interface UseFormReturn$1<TFieldValues extends FieldValues, TContext extends object> extends UseFormReturn$2<TFieldValues, TContext> {
+    Form: React.FC<Omit<FormProps<TFieldValues, TContext>, 'form'>>;
+    Field: React.FC<FieldProps<TFieldValues>>;
+    DisplayIf: React.FC<DisplayIfProps<TFieldValues>>;
+    ArrayField: React.FC<ArrayFieldProps<TFieldValues> & React.RefAttributes<UseArrayFieldReturn>>;
+    ObjectField: React.FC<ObjectFieldProps<TFieldValues>>;
+}
+declare function useForm<TFieldValues extends FieldValues, TContext extends object>(props?: UseFormProps<TFieldValues, TContext>): UseFormReturn$1<TFieldValues, TContext>;
+interface FormProps<TFieldValues extends FieldValues = FieldValues, TContext extends object = object> extends HTMLChakraProps<'form'> {
+    children: React.ReactNode;
+    form: ReturnType<typeof useForm$1<TFieldValues, TContext>>;
+    onSubmit: (data: any) => void;
+    onError?: (errors: any) => void;
+}
+interface UseZodFormProps<TSchema extends z.AnyZodObject | z.ZodEffects<z.AnyZodObject> = z.AnyZodObject, TFieldValues extends InferObjectSchema<TSchema> = InferObjectSchema<TSchema>, TContext extends object = object> extends Omit<UseFormProps$1<TFieldValues, TContext>, 'defaultValues'> {
+    schema: TSchema;
+    defaultValues?: DefaultValues<InferObjectSchema<TSchema>> | AsyncDefaultValues<InferObjectSchema<TSchema>>;
+}
+declare function useZodForm<TSchema extends z.AnyZodObject | z.ZodEffects<z.AnyZodObject> = z.AnyZodObject, TFieldValues extends InferObjectSchema<TSchema> = InferObjectSchema<TSchema>, TContext extends object = object>(props: UseZodFormProps<TSchema, TFieldValues, TContext>): UseFormReturn$1<InferObjectSchema<TSchema>, TContext>;
+type InferObjectSchema<T extends z.ZodTypeAny | z.ZodEffects<z.ZodTypeAny>> = T extends z.ZodEffects<infer TSchema> ? z.infer<TSchema> : z.infer<T>;
+type AsyncDefaultValues<TFieldValues> = (payload?: unknown) => Promise<TFieldValues>;
+
 interface DisplayFieldProps<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>> extends Omit<Field$1.RootProps, 'type' | 'onChange' | 'defaultValue'> {
     name: TName | ArrayFieldPath<TName>;
     label?: string;
@@ -691,4 +716,4 @@ declare const createField: <TType = unknown, TProps extends object = object>(com
  */
 declare const Form: FormType<unknown, object, any, object>;
 
-export { ArrayField, ArrayFieldAddButton, type ArrayFieldButtonProps, ArrayFieldContainer, type ArrayFieldContainerProps, type ArrayFieldOptions, type ArrayFieldPath, type ArrayFieldProps, ArrayFieldProvider, ArrayFieldRemoveButton, ArrayFieldRow, ArrayFieldRowContainer, ArrayFieldRowFields, type ArrayFieldRowFieldsProps, ArrayFieldRowProvider, ArrayFieldRows, type ArrayFieldRowsProps, AutoFields, BaseField, type BaseFieldProps, Form$1 as BaseForm, type CreateFieldOptions, type CreateFormProps, type DefaultFieldOverrides, type DefaultFields, DisplayField, type DisplayFieldProps, DisplayIf, type DisplayIfProps, Field, type FieldOption, type FieldOptions, type FieldOverrides, type FieldProps, type FieldResolver, type FieldRules, type FieldsProps, FieldsProvider, Form, type FormChildren, type FormComponent, FormLayout, type FormLayoutProps, FormLegend, type FormProps, FormProvider, type FormRenderContext, type FormType, FormValue, type GetBaseField, type GetFieldResolver, InputField, type InputFieldProps, type MergeFieldProps, ObjectField, type ObjectFieldProps, type ObjectSchema, type ShallowMerge, type StepFormChildren, SubmitButton, type SubmitButtonProps, TextareaField, type TextareaFieldProps, type UseArrayFieldReturn, type UseArrayFieldRowProps, type UseArrayFieldRowReturn, type ValueOf, WatchField, type WatchFieldProps, type WithFields, createField, createForm, defaultFieldTypes, objectFieldResolver, useArrayField, useArrayFieldAddButton, useArrayFieldContext, useArrayFieldRemoveButton, useArrayFieldRow, useArrayFieldRowContext, useBaseField, useField, useFormContext };
+export { ArrayField, ArrayFieldAddButton, type ArrayFieldButtonProps, ArrayFieldContainer, type ArrayFieldContainerProps, type ArrayFieldOptions, type ArrayFieldPath, type ArrayFieldProps, ArrayFieldProvider, ArrayFieldRemoveButton, ArrayFieldRow, ArrayFieldRowContainer, ArrayFieldRowFields, type ArrayFieldRowFieldsProps, ArrayFieldRowProvider, ArrayFieldRows, type ArrayFieldRowsProps, AutoFields, BaseField, type BaseFieldProps, Form$1 as BaseForm, type CreateFieldOptions, type CreateFormProps, type DefaultFieldOverrides, type DefaultFields, DisplayField, type DisplayFieldProps, DisplayIf, type DisplayIfProps, Field, type FieldOption, type FieldOptions, type FieldOverrides, type FieldProps, type FieldResolver, type FieldRules, type FieldsProps, FieldsProvider, Form, type FormChildren, type FormComponent, FormLayout, type FormLayoutProps, FormLegend, type FormProps$1 as FormProps, FormProvider, type FormRenderContext, type FormType, FormValue, type GetBaseField, type GetFieldResolver, InputField, type InputFieldProps, type MergeFieldProps, ObjectField, type ObjectFieldProps, type ObjectSchema, type ShallowMerge, type StepFormChildren, SubmitButton, type SubmitButtonProps, TextareaField, type TextareaFieldProps, type UseArrayFieldReturn, type UseArrayFieldRowProps, type UseArrayFieldRowReturn, type UseFormProps, type UseFormReturn$1 as UseFormReturn, type UseZodFormProps, type ValueOf, WatchField, type WatchFieldProps, type WithFields, createField, createForm, defaultFieldTypes, objectFieldResolver, useArrayField, useArrayFieldAddButton, useArrayFieldContext, useArrayFieldRemoveButton, useArrayFieldRow, useArrayFieldRowContext, useBaseField, useField, useForm, useFormContext, useZodForm };

package/dist/index.d.ts

@@ -3,8 +3,8 @@ import React__default, { ForwardRefRenderFunction, PropsWithoutRef } from 'react
 import { RecipeProps, SimpleGridProps, InputProps, TextareaProps, SystemStyleObject, Field as Field$1, HTMLChakraProps, ButtonProps as ButtonProps$1 } from '@chakra-ui/react';
 import { MaybeRenderProp } from '@saas-ui/core/utils';
 import * as react_hook_form from 'react-hook-form';
-import { FieldValues, FieldPath, UseFormReturn as UseFormReturn$1, UseFieldArrayReturn, UseFormProps, WatchObserver, SubmitHandler, SubmitErrorHandler, ResolverOptions, ResolverResult, RegisterOptions, FormProviderProps as FormProviderProps$1 } from 'react-hook-form';
-export { ArrayPath, BatchFieldArrayUpdate, BrowserNativeObject, ChangeHandler, Control, Controller, ControllerFieldState, ControllerProps, ControllerRenderProps, CriteriaMode, CustomElement, DeepMap, DeepPartial, DeepPartialSkipArrayKey, DeepRequired, DefaultValues, DelayCallback, EmptyObject, ErrorOption, EventType, ExtractObjects, FieldArray, FieldArrayMethodProps, FieldArrayPath, FieldArrayPathValue, FieldArrayWithId, Field as FieldDef, FieldElement, FieldError, FieldErrors, FieldErrorsImpl, FieldName, FieldNamesMarkedBoolean, FieldPath, FieldPathByValue, FieldPathValue, FieldPathValues, FieldRefs, FieldValue, FieldValues, FormProviderProps, FormState, FormStateProxy, FormStateSubjectRef, GetIsDirty, InternalFieldErrors, InternalFieldName, InternalNameSet, IsAny, IsFlatObject, KeepStateOptions, LiteralUnion, Message, Mode, MultipleFieldErrors, Names, NativeFieldValue, NestedValue, NonUndefined, Noop, Primitive, ReadFormState, Ref, RefCallBack, RegisterOptions, Resolver, ResolverError, ResolverOptions, ResolverResult, ResolverSuccess, SetFieldValue, SetValueConfig, Subjects, SubmitErrorHandler, SubmitHandler, TriggerConfig, UnpackNestedValue, UseControllerProps, UseControllerReturn, UseFieldArrayProps, UseFieldArrayReturn, UseFormClearErrors, UseFormGetValues, UseFormHandleSubmit, UseFormProps, UseFormRegister, UseFormRegisterReturn, UseFormReset, UseFormResetField, UseFormReturn, UseFormSetError, UseFormSetFocus, UseFormSetValue, UseFormStateProps, UseFormStateReturn, UseFormTrigger, UseFormUnregister, UseFormWatch, UseWatchProps, Validate, ValidateResult, ValidationMode, ValidationRule, ValidationValue, ValidationValueMessage, WatchInternal, WatchObserver, appendErrors, useController, useFieldArray, useForm, useFormState, useWatch } from 'react-hook-form';
+import { FieldValues, FieldPath, UseFormReturn as UseFormReturn$2, UseFieldArrayReturn, UseFormProps as UseFormProps$1, WatchObserver, SubmitHandler, SubmitErrorHandler, ResolverOptions, ResolverResult, RegisterOptions, useForm as useForm$1, DefaultValues, FormProviderProps as FormProviderProps$1 } from 'react-hook-form';
+export { ArrayPath, BatchFieldArrayUpdate, BrowserNativeObject, ChangeHandler, Control, Controller, ControllerFieldState, ControllerProps, ControllerRenderProps, CriteriaMode, CustomElement, DeepMap, DeepPartial, DeepPartialSkipArrayKey, DeepRequired, DefaultValues, DelayCallback, EmptyObject, ErrorOption, EventType, ExtractObjects, FieldArray, FieldArrayMethodProps, FieldArrayPath, FieldArrayPathValue, FieldArrayWithId, Field as FieldDef, FieldElement, FieldError, FieldErrors, FieldErrorsImpl, FieldName, FieldNamesMarkedBoolean, FieldPath, FieldPathByValue, FieldPathValue, FieldPathValues, FieldRefs, FieldValue, FieldValues, FormProviderProps, FormState, FormStateProxy, FormStateSubjectRef, GetIsDirty, InternalFieldErrors, InternalFieldName, InternalNameSet, IsAny, IsFlatObject, KeepStateOptions, LiteralUnion, Message, Mode, MultipleFieldErrors, Names, NativeFieldValue, NestedValue, NonUndefined, Noop, Primitive, ReadFormState, Ref, RefCallBack, RegisterOptions, Resolver, ResolverError, ResolverOptions, ResolverResult, ResolverSuccess, SetFieldValue, SetValueConfig, Subjects, SubmitErrorHandler, SubmitHandler, TriggerConfig, UnpackNestedValue, UseControllerProps, UseControllerReturn, UseFieldArrayProps, UseFieldArrayReturn, UseFormClearErrors, UseFormGetValues, UseFormHandleSubmit, UseFormRegister, UseFormRegisterReturn, UseFormReset, UseFormResetField, UseFormSetError, UseFormSetFocus, UseFormSetValue, UseFormStateProps, UseFormStateReturn, UseFormTrigger, UseFormUnregister, UseFormWatch, UseWatchProps, Validate, ValidateResult, ValidationMode, ValidationRule, ValidationValue, ValidationValueMessage, WatchInternal, WatchObserver, appendErrors, useController, useFieldArray, useFormState, useWatch } from 'react-hook-form';
 import { CheckboxProps } from '@saas-ui/react/checkbox';
 import { NumberInputProps } from '@saas-ui/react/number-input';
 import { PasswordInputProps } from '@saas-ui/react/password-input';
@@ -15,6 +15,7 @@ import { SwitchProps } from '@saas-ui/react/switch';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { UseStepperReturn } from '@saas-ui/core';
 import { ButtonProps } from '@saas-ui/react/button';
+import { z } from 'zod';
 
 interface FormLayoutOptions {
     columns?: SimpleGridProps['columns'];
@@ -96,8 +97,8 @@ interface DisplayIfProps<TFieldValues extends FieldValues = FieldValues, TName e
     defaultValue?: unknown;
     isDisabled?: boolean;
     isExact?: boolean;
-    condition?: (value: unknown, context: UseFormReturn$1<TFieldValues>) => boolean;
-    onToggle?: (conditionMatched: boolean, context: UseFormReturn$1<TFieldValues>) => void;
+    condition?: (value: unknown, context: UseFormReturn$2<TFieldValues>) => boolean;
+    onToggle?: (conditionMatched: boolean, context: UseFormReturn$2<TFieldValues>) => void;
 }
 /**
  * Conditionally render parts of a form.
@@ -216,7 +217,7 @@ declare const useArrayFieldAddButton: () => {
     isDisabled: boolean;
 };
 
-interface FormRenderContext<TFieldValues extends FieldValues = FieldValues, TContext extends object = object, TFieldTypes = FieldProps<TFieldValues>> extends UseFormReturn$1<TFieldValues, TContext> {
+interface FormRenderContext<TFieldValues extends FieldValues = FieldValues, TContext extends object = object, TFieldTypes = FieldProps<TFieldValues>> extends UseFormReturn$2<TFieldValues, TContext> {
     Field: React__default.FC<TFieldTypes & React__default.RefAttributes<FocusableElement>>;
     DisplayIf: React__default.FC<DisplayIfProps<TFieldValues>>;
     ArrayField: React__default.FC<ArrayFieldProps<TFieldValues> & React__default.RefAttributes<UseArrayFieldReturn>>;
@@ -242,7 +243,7 @@ interface FormOptions<TSchema = unknown, TFieldValues extends FieldValues = Fiel
     /**
      * The Hook Form state ref.
      */
-    formRef?: React__default.Ref<UseFormReturn$1<TFieldValues, TContext>>;
+    formRef?: React__default.Ref<UseFormReturn$2<TFieldValues, TContext>>;
     /**
      * The form children, can be a render prop or a ReactNode.
      */
@@ -256,7 +257,7 @@ interface FormOptions<TSchema = unknown, TFieldValues extends FieldValues = Fiel
      */
     fields?: DefaultFieldOverrides;
 }
-interface FormProps<TSchema = unknown, TFieldValues extends FieldValues = FieldValues, TContext extends object = object, TExtraFieldProps extends object = object, TFieldTypes = FieldProps<TFieldValues, TExtraFieldProps>> extends UseFormProps<TFieldValues, TContext>, Omit<HTMLChakraProps<'form'>, 'children' | 'onChange' | 'onSubmit' | 'onError'>, FormOptions<TSchema, TFieldValues, TContext, TExtraFieldProps, TFieldTypes> {
+interface FormProps$1<TSchema = unknown, TFieldValues extends FieldValues = FieldValues, TContext extends object = object, TExtraFieldProps extends object = object, TFieldTypes = FieldProps<TFieldValues, TExtraFieldProps>> extends UseFormProps$1<TFieldValues, TContext>, Omit<HTMLChakraProps<'form'>, 'children' | 'onChange' | 'onSubmit' | 'onError'>, FormOptions<TSchema, TFieldValues, TContext, TExtraFieldProps, TFieldTypes> {
 }
 /**
  * The wrapper component provides context, state, and focus management.
@@ -264,7 +265,7 @@ interface FormProps<TSchema = unknown, TFieldValues extends FieldValues = FieldV
  * @see Docs https://saas-ui.dev/docs/components/forms/form
  */
 declare const Form$1: FormComponent;
-type FormComponent = (<TSchema = unknown, TFieldValues extends FieldValues = FieldValues, TContext extends object = object, TExtraFieldProps extends object = object, TFieldTypes = FieldProps<TFieldValues>>(props: FormProps<TSchema, TFieldValues, TContext, TExtraFieldProps, TFieldTypes> & {
+type FormComponent = (<TSchema = unknown, TFieldValues extends FieldValues = FieldValues, TContext extends object = object, TExtraFieldProps extends object = object, TFieldTypes = FieldProps<TFieldValues>>(props: FormProps$1<TSchema, TFieldValues, TContext, TExtraFieldProps, TFieldTypes> & {
     ref?: React__default.ForwardedRef<HTMLFormElement>;
 }) => React__default.ReactElement) & {
     displayName?: string;
@@ -429,7 +430,7 @@ type FieldOverrides<FieldDefs, TFieldValues extends FieldValues = FieldValues, T
         type?: 'array';
     } & Omit<ArrayFieldProps<TFieldValues>, 'name' | 'children'>);
 };
-type WithFields<TFormProps extends FormProps<any, any, any, any, any>, FieldDefs, ExtraOverrides = object> = TFormProps extends FormProps<infer _TSchema, infer TFieldValues, infer TContext, infer TExtraFieldProps> ? Omit<TFormProps, 'children' | 'fields'> & {
+type WithFields<TFormProps extends FormProps$1<any, any, any, any, any>, FieldDefs, ExtraOverrides = object> = TFormProps extends FormProps$1<infer _TSchema, infer TFieldValues, infer TContext, infer TExtraFieldProps> ? Omit<TFormProps, 'children' | 'fields'> & {
     children?: FormChildren<FieldDefs, TFieldValues, TContext, TExtraFieldProps>;
     fields?: FieldOverrides<FieldDefs, TFieldValues> & {
         submit?: SubmitButtonProps;
@@ -545,7 +546,7 @@ interface CreateFormProps<FieldDefs, TGetBaseField extends GetBaseField = GetBas
     fields?: FieldDefs extends Record<string, React__default.FC<any>> ? FieldDefs : never;
     getBaseField?: TGetBaseField;
 }
-type FormType<FieldDefs, ExtraProps = object, ExtraFieldProps extends object = object, ExtraOverrides = object> = (<TSchema = unknown, TFieldValues extends FieldValues = FieldValues, TContext extends object = object>(props: WithFields<FormProps<TSchema, TFieldValues, TContext, ExtraFieldProps>, FieldDefs, ExtraOverrides> & {
+type FormType<FieldDefs, ExtraProps = object, ExtraFieldProps extends object = object, ExtraOverrides = object> = (<TSchema = unknown, TFieldValues extends FieldValues = FieldValues, TContext extends object = object>(props: WithFields<FormProps$1<TSchema, TFieldValues, TContext, ExtraFieldProps>, FieldDefs, ExtraOverrides> & {
     ref?: React__default.ForwardedRef<HTMLFormElement>;
 } & ExtraProps) => React__default.ReactElement) & {
     displayName?: string;
@@ -553,6 +554,30 @@ type FormType<FieldDefs, ExtraProps = object, ExtraFieldProps extends object = o
 };
 declare function createForm<FieldDefs, TGetBaseField extends GetBaseField<any> = GetBaseField<any>>({ resolver, fieldResolver, fields, getBaseField, }?: CreateFormProps<FieldDefs, TGetBaseField>): FormType<FieldDefs, object, TGetBaseField extends GetBaseField<infer ExtraFieldProps extends object> ? ExtraFieldProps : object, object>;
 
+interface UseFormProps<TFieldValues extends FieldValues, TContext extends object> extends UseFormProps$1<TFieldValues, TContext> {
+}
+interface UseFormReturn$1<TFieldValues extends FieldValues, TContext extends object> extends UseFormReturn$2<TFieldValues, TContext> {
+    Form: React.FC<Omit<FormProps<TFieldValues, TContext>, 'form'>>;
+    Field: React.FC<FieldProps<TFieldValues>>;
+    DisplayIf: React.FC<DisplayIfProps<TFieldValues>>;
+    ArrayField: React.FC<ArrayFieldProps<TFieldValues> & React.RefAttributes<UseArrayFieldReturn>>;
+    ObjectField: React.FC<ObjectFieldProps<TFieldValues>>;
+}
+declare function useForm<TFieldValues extends FieldValues, TContext extends object>(props?: UseFormProps<TFieldValues, TContext>): UseFormReturn$1<TFieldValues, TContext>;
+interface FormProps<TFieldValues extends FieldValues = FieldValues, TContext extends object = object> extends HTMLChakraProps<'form'> {
+    children: React.ReactNode;
+    form: ReturnType<typeof useForm$1<TFieldValues, TContext>>;
+    onSubmit: (data: any) => void;
+    onError?: (errors: any) => void;
+}
+interface UseZodFormProps<TSchema extends z.AnyZodObject | z.ZodEffects<z.AnyZodObject> = z.AnyZodObject, TFieldValues extends InferObjectSchema<TSchema> = InferObjectSchema<TSchema>, TContext extends object = object> extends Omit<UseFormProps$1<TFieldValues, TContext>, 'defaultValues'> {
+    schema: TSchema;
+    defaultValues?: DefaultValues<InferObjectSchema<TSchema>> | AsyncDefaultValues<InferObjectSchema<TSchema>>;
+}
+declare function useZodForm<TSchema extends z.AnyZodObject | z.ZodEffects<z.AnyZodObject> = z.AnyZodObject, TFieldValues extends InferObjectSchema<TSchema> = InferObjectSchema<TSchema>, TContext extends object = object>(props: UseZodFormProps<TSchema, TFieldValues, TContext>): UseFormReturn$1<InferObjectSchema<TSchema>, TContext>;
+type InferObjectSchema<T extends z.ZodTypeAny | z.ZodEffects<z.ZodTypeAny>> = T extends z.ZodEffects<infer TSchema> ? z.infer<TSchema> : z.infer<T>;
+type AsyncDefaultValues<TFieldValues> = (payload?: unknown) => Promise<TFieldValues>;
+
 interface DisplayFieldProps<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>> extends Omit<Field$1.RootProps, 'type' | 'onChange' | 'defaultValue'> {
     name: TName | ArrayFieldPath<TName>;
     label?: string;
@@ -691,4 +716,4 @@ declare const createField: <TType = unknown, TProps extends object = object>(com
  */
 declare const Form: FormType<unknown, object, any, object>;
 
-export { ArrayField, ArrayFieldAddButton, type ArrayFieldButtonProps, ArrayFieldContainer, type ArrayFieldContainerProps, type ArrayFieldOptions, type ArrayFieldPath, type ArrayFieldProps, ArrayFieldProvider, ArrayFieldRemoveButton, ArrayFieldRow, ArrayFieldRowContainer, ArrayFieldRowFields, type ArrayFieldRowFieldsProps, ArrayFieldRowProvider, ArrayFieldRows, type ArrayFieldRowsProps, AutoFields, BaseField, type BaseFieldProps, Form$1 as BaseForm, type CreateFieldOptions, type CreateFormProps, type DefaultFieldOverrides, type DefaultFields, DisplayField, type DisplayFieldProps, DisplayIf, type DisplayIfProps, Field, type FieldOption, type FieldOptions, type FieldOverrides, type FieldProps, type FieldResolver, type FieldRules, type FieldsProps, FieldsProvider, Form, type FormChildren, type FormComponent, FormLayout, type FormLayoutProps, FormLegend, type FormProps, FormProvider, type FormRenderContext, type FormType, FormValue, type GetBaseField, type GetFieldResolver, InputField, type InputFieldProps, type MergeFieldProps, ObjectField, type ObjectFieldProps, type ObjectSchema, type ShallowMerge, type StepFormChildren, SubmitButton, type SubmitButtonProps, TextareaField, type TextareaFieldProps, type UseArrayFieldReturn, type UseArrayFieldRowProps, type UseArrayFieldRowReturn, type ValueOf, WatchField, type WatchFieldProps, type WithFields, createField, createForm, defaultFieldTypes, objectFieldResolver, useArrayField, useArrayFieldAddButton, useArrayFieldContext, useArrayFieldRemoveButton, useArrayFieldRow, useArrayFieldRowContext, useBaseField, useField, useFormContext };
+export { ArrayField, ArrayFieldAddButton, type ArrayFieldButtonProps, ArrayFieldContainer, type ArrayFieldContainerProps, type ArrayFieldOptions, type ArrayFieldPath, type ArrayFieldProps, ArrayFieldProvider, ArrayFieldRemoveButton, ArrayFieldRow, ArrayFieldRowContainer, ArrayFieldRowFields, type ArrayFieldRowFieldsProps, ArrayFieldRowProvider, ArrayFieldRows, type ArrayFieldRowsProps, AutoFields, BaseField, type BaseFieldProps, Form$1 as BaseForm, type CreateFieldOptions, type CreateFormProps, type DefaultFieldOverrides, type DefaultFields, DisplayField, type DisplayFieldProps, DisplayIf, type DisplayIfProps, Field, type FieldOption, type FieldOptions, type FieldOverrides, type FieldProps, type FieldResolver, type FieldRules, type FieldsProps, FieldsProvider, Form, type FormChildren, type FormComponent, FormLayout, type FormLayoutProps, FormLegend, type FormProps$1 as FormProps, FormProvider, type FormRenderContext, type FormType, FormValue, type GetBaseField, type GetFieldResolver, InputField, type InputFieldProps, type MergeFieldProps, ObjectField, type ObjectFieldProps, type ObjectSchema, type ShallowMerge, type StepFormChildren, SubmitButton, type SubmitButtonProps, TextareaField, type TextareaFieldProps, type UseArrayFieldReturn, type UseArrayFieldRowProps, type UseArrayFieldRowReturn, type UseFormProps, type UseFormReturn$1 as UseFormReturn, type UseZodFormProps, type ValueOf, WatchField, type WatchFieldProps, type WithFields, createField, createForm, defaultFieldTypes, objectFieldResolver, useArrayField, useArrayFieldAddButton, useArrayFieldContext, useArrayFieldRemoveButton, useArrayFieldRow, useArrayFieldRowContext, useBaseField, useField, useForm, useFormContext, useZodForm };

package/dist/index.js

@@ -44,12 +44,12 @@ __export(src_exports, {
   AutoFields: () => AutoFields,
   BaseField: () => BaseField,
   BaseForm: () => Form,
-  Controller: () => import_react_hook_form9.Controller,
+  Controller: () => import_react_hook_form10.Controller,
   DisplayField: () => DisplayField,
   DisplayIf: () => DisplayIf,
   Field: () => Field2,
   FieldsProvider: () => FieldsProvider,
-  Form: () => Form2,
+  Form: () => Form4,
   FormLayout: () => FormLayout,
   FormLegend: () => FormLegend,
   FormProvider: () => FormProvider,
@@ -59,7 +59,7 @@ __export(src_exports, {
   SubmitButton: () => SubmitButton,
   TextareaField: () => TextareaField,
   WatchField: () => WatchField,
-  appendErrors: () => import_react_hook_form9.appendErrors,
+  appendErrors: () => import_react_hook_form10.appendErrors,
   createField: () => createField,
   createForm: () => createForm,
   defaultFieldTypes: () => defaultFieldTypes,
@@ -71,13 +71,14 @@ __export(src_exports, {
   useArrayFieldRow: () => useArrayFieldRow,
   useArrayFieldRowContext: () => useArrayFieldRowContext,
   useBaseField: () => useBaseField,
-  useController: () => import_react_hook_form9.useController,
+  useController: () => import_react_hook_form10.useController,
   useField: () => useField,
-  useFieldArray: () => import_react_hook_form9.useFieldArray,
-  useForm: () => import_react_hook_form9.useForm,
+  useFieldArray: () => import_react_hook_form10.useFieldArray,
+  useForm: () => useForm2,
   useFormContext: () => useFormContext,
-  useFormState: () => import_react_hook_form9.useFormState,
-  useWatch: () => import_react_hook_form9.useWatch
+  useFormState: () => import_react_hook_form10.useFormState,
+  useWatch: () => import_react_hook_form10.useWatch,
+  useZodForm: () => useZodForm
 });
 module.exports = __toCommonJS(src_exports);
 
@@ -992,17 +993,63 @@ function createForm({
   return DefaultForm;
 }
 
-// src/display-field.tsx
-var import_react15 = require("@chakra-ui/react");
+// src/use-form.tsx
+var import_react15 = require("react");
+var import_react16 = require("@chakra-ui/react");
+var import_zod = require("@hookform/resolvers/zod");
+var import_utils10 = require("@saas-ui/core/utils");
+var import_react_hook_form8 = require("react-hook-form");
 var import_jsx_runtime14 = require("react/jsx-runtime");
+function useForm2(props = {}) {
+  const form = (0, import_react_hook_form8.useForm)(props);
+  const FormComponent = (0, import_react15.forwardRef)(
+    function FormComponent2(props2, ref) {
+      return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Form2, { ...props2, form, ref });
+    }
+  );
+  return {
+    ...form,
+    Form: FormComponent,
+    Field: Field2,
+    DisplayIf,
+    ArrayField,
+    ObjectField
+  };
+}
+var Form2 = (0, import_react15.forwardRef)(
+  function Form3(props, ref) {
+    const { children, form, onSubmit, onError, ...rest } = props;
+    return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(FormProvider, { ...form, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+      import_react16.chakra.form,
+      {
+        ref,
+        onSubmit: form.handleSubmit(onSubmit, onError),
+        ...rest,
+        className: (0, import_utils10.cx)("sui-form", props.className),
+        children: props.children
+      }
+    ) });
+  }
+);
+function useZodForm(props) {
+  const { schema, ...rest } = props;
+  return useForm2({
+    resolver: (0, import_zod.zodResolver)(schema),
+    ...rest
+  });
+}
+
+// src/display-field.tsx
+var import_react17 = require("@chakra-ui/react");
+var import_jsx_runtime15 = require("react/jsx-runtime");
 var DisplayField = ({
   name,
   label,
   ...props
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_react15.Field.Root, { ...props, children: [
-    label ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react15.Field.Label, { htmlFor: name, children: label }) : null,
-    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react15.Text, { fontSize: "md", children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(FormValue, { name }) })
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_react17.Field.Root, { ...props, children: [
+    label ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_react17.Field.Label, { htmlFor: name, children: label }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_react17.Text, { fontSize: "md", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(FormValue, { name }) })
   ] });
 };
 DisplayField.displayName = "DisplayField";
@@ -1013,11 +1060,11 @@ var FormValue = ({ name }) => {
 FormValue.displayName = "FormValue";
 
 // src/watch-field.tsx
-var import_react_hook_form8 = require("react-hook-form");
+var import_react_hook_form9 = require("react-hook-form");
 var WatchField = (props) => {
   const { name, defaultValue, isDisabled, isExact } = props;
   const form = useFormContext();
-  const field = (0, import_react_hook_form8.useWatch)({
+  const field = (0, import_react_hook_form9.useWatch)({
     name,
     defaultValue,
     disabled: isDisabled,
@@ -1027,8 +1074,8 @@ var WatchField = (props) => {
 };
 
 // src/index.ts
-var import_react_hook_form9 = require("react-hook-form");
-var Form2 = createForm();
+var import_react_hook_form10 = require("react-hook-form");
+var Form4 = createForm();
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   ArrayField,
@@ -1077,6 +1124,7 @@ var Form2 = createForm();
   useForm,
   useFormContext,
   useFormState,
-  useWatch
+  useWatch,
+  useZodForm
 });
 //# sourceMappingURL=index.js.map