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

package/dist/index.d.ts

@@ -1,14 +1,37 @@
 import * as React$1 from 'react';
 import React__default from 'react';
-import { NumberInputProps as NumberInputProps$1, InputProps, RadioProps, RadioGroupProps, SystemProps, StackDirection, MenuItemOptionProps, MenuProps, ButtonProps, MenuOptionGroupProps, MenuListProps, SelectProps as SelectProps$1, TextareaProps, SwitchProps, CheckboxProps, UsePinInputProps, HTMLChakraProps, FormControlProps, SimpleGridProps, ResponsiveValue, FormLabelProps, ThemingProps } from '@chakra-ui/react';
-import { MaybeRenderProp } from '@chakra-ui/react-utils';
-import * as react_hook_form from 'react-hook-form';
-import { FieldValues, UseFormReturn, UseFormProps, ResolverOptions, ResolverResult, WatchObserver, SubmitHandler, SubmitErrorHandler, FieldPath, RegisterOptions, UseFieldArrayReturn } from 'react-hook-form';
-export { BatchFieldArrayUpdate, ChangeHandler, Control, Controller, ControllerFieldState, ControllerProps, ControllerRenderProps, CriteriaMode, CustomElement, DeepMap, DeepPartial, DeepPartialSkipArrayKey, DefaultValues, DelayCallback, EmptyObject, ErrorOption, EventType, FieldArray, FieldArrayMethodProps, FieldArrayWithId, Field as FieldDef, FieldElement, FieldError, FieldErrors, FieldName, FieldNamesMarkedBoolean, FieldRefs, FieldValue, FieldValues, FormProvider, 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, useFormContext, useFormState, useWatch } from 'react-hook-form';
 import * as _chakra_ui_system_dist_system_types from '@chakra-ui/system/dist/system.types';
+import { ButtonProps, NumberInputProps as NumberInputProps$1, InputProps, RadioProps, RadioGroupProps, SystemProps, StackDirection, MenuProps, MenuListProps, MenuItemOptionProps, SelectProps as SelectProps$1, TextareaProps, SwitchProps, CheckboxProps, UsePinInputProps, FormControlProps, SimpleGridProps, ResponsiveValue, FormLabelProps, HTMLChakraProps, ThemingProps } from '@chakra-ui/react';
+import * as react_hook_form from 'react-hook-form';
+import { FieldValues, FieldPath, RegisterOptions, UseFormReturn as UseFormReturn$1, UseFieldArrayReturn, UseFormProps, WatchObserver, SubmitHandler, SubmitErrorHandler, ResolverOptions, ResolverResult, FormProviderProps as FormProviderProps$1 } from 'react-hook-form';
+export { BatchFieldArrayUpdate, ChangeHandler, Control, Controller, ControllerFieldState, ControllerProps, ControllerRenderProps, CriteriaMode, CustomElement, DeepMap, DeepPartial, DeepPartialSkipArrayKey, DefaultValues, DelayCallback, EmptyObject, ErrorOption, EventType, FieldArray, FieldArrayMethodProps, FieldArrayWithId, Field as FieldDef, FieldElement, FieldError, FieldErrors, FieldName, FieldNamesMarkedBoolean, 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 { MaybeRenderProp } from '@chakra-ui/react-utils';
 import { FocusableElement } from '@chakra-ui/utils';
 import { UseStepperReturn, UseStepperProps, StepperStepsProps } from '@saas-ui/core';
 
+interface SubmitButtonProps extends ButtonProps {
+    /**
+     * Disable the submit button if the form is untouched.
+     *
+     * Change the default behavior by updating
+     * `SubmitButton.defaultProps.disableIfUntouched`
+     */
+    disableIfUntouched?: boolean;
+    /**
+     * Disable the submit button if the form is invalid.
+     *
+     * Change the default behavior by updating
+     * `SubmitButton.defaultProps.disableIfInvalid`
+     */
+    disableIfInvalid?: boolean;
+}
+/**
+ * A button with type submit and default color scheme primary and isLoading state when the form is submitting.
+ *
+ * @see Docs https://saas-ui.dev/docs/components/forms/form
+ */
+declare const SubmitButton: _chakra_ui_system_dist_system_types.ComponentWithAs<"button", SubmitButtonProps>;
+
 interface NumberInputOptions {
     /**
      * Hide the stepper.
@@ -47,31 +70,81 @@ interface RadioInputProps extends Omit<RadioGroupProps, 'children'>, RadioInputO
 }
 declare const RadioInput: _chakra_ui_system_dist_system_types.ComponentWithAs<"div", RadioInputProps>;
 
-interface SelectOption extends Omit<MenuItemOptionProps, 'value'>, FieldOption {
-}
 interface SelectOptions {
     /**
-     * An array of options
-     * If you leave this empty the children prop will be rendered.
+     * The name of the input field in a native form.
      */
-    options?: FieldOptions<SelectOption>;
+    name: string;
+    /**
+     * The value of the select field.
+     */
+    value?: string | string[];
+    /**
+     * The initial value of the select field.
+     */
+    defaultValue?: string | string[];
+    /**
+     * The callback invoked when the value of the select field changes.
+     * @param value The value of the select field.
+     */
+    onChange?: (value: string | string[]) => void;
+    /**
+     * The placeholder text when there's no value.
+     */
+    placeholder?: string;
     /**
-     * Props passed to the MenuList.
+     * If `true`, the select will be disabled.
      */
-    menuListProps?: MenuListProps;
+    isDisabled?: boolean;
     /**
-     * Customize how the value is rendered.
-     * @type (value?: string[]) => React.ReactElement
+     * An array of options
+     * If you leave this empty the children prop will be rendered.
      */
-    renderValue?: (value?: string[]) => React$1.ReactElement | undefined;
+    options?: FieldOptions<SelectOption>;
     /**
      * Enable multiple select.
      */
     multiple?: boolean;
+    /**
+     * The function used to render the value of the select field.
+     * @param value The value of the select field.
+     * @returns The rendered value.
+     */
+    renderValue?: (value: string | string[]) => React__default.ReactNode;
+}
+
+interface SelectProps extends Omit<MenuProps, 'children'>, SelectOptions {
 }
-interface SelectProps extends Omit<MenuProps, 'children'>, Pick<ButtonProps, 'isDisabled' | 'leftIcon' | 'rightIcon'>, Pick<MenuOptionGroupProps, 'onChange'>, SelectOptions {
+interface SelectButtonProps extends ButtonProps {
 }
+/**
+ * Button that opens the select menu and displays the selected value.
+ *
+ * @see https://saas-ui.dev/docs/components/forms/select
+ */
+declare const SelectButton: _chakra_ui_system_dist_system_types.ComponentWithAs<"button", SelectButtonProps>;
+/**
+ * Allow users to select a value from a list of options.
+ *
+ * @see https://saas-ui.dev/docs/components/forms/select
+ */
 declare const Select: _chakra_ui_system_dist_system_types.ComponentWithAs<"select", SelectProps>;
+interface SelectListProps extends MenuListProps {
+}
+/**
+ * The list of options to choose from.
+ *
+ * @see https://saas-ui.dev/docs/components/forms/select
+ */
+declare const SelectList: React$1.FC<SelectListProps>;
+interface SelectOption extends Omit<MenuItemOptionProps, 'value'>, FieldOption {
+}
+/**
+ * An option in a select list
+ *
+ * @see https://saas-ui.dev/docs/components/forms/select
+ */
+declare const SelectOption: _chakra_ui_system_dist_system_types.ComponentWithAs<"button", MenuItemOptionProps>;
 
 interface Option$1 {
     value: string;
@@ -124,75 +197,22 @@ declare const defaultFieldTypes: {
 };
 type DefaultFields = typeof defaultFieldTypes;
 
-type FieldResolver = {
-    getFields(): BaseFieldProps[];
-    getNestedFields(name: string): BaseFieldProps[];
-};
-interface SchemaField extends BaseFieldProps {
-    items?: SchemaField[];
-    properties?: Record<string, SchemaField>;
-}
-type ObjectSchema = Record<string, SchemaField>;
-declare const objectFieldResolver: (schema: ObjectSchema) => FieldResolver;
-
-interface FormRenderContext<TFieldValues extends FieldValues = FieldValues, TContext extends object = object, TFieldTypes = FieldProps<TFieldValues>> extends UseFormReturn<TFieldValues, TContext> {
-    Field: React$1.FC<TFieldTypes>;
-}
-interface FormOptions<TFieldValues extends FieldValues = FieldValues, TContext extends object = object, TSchema = any, TFieldTypes = FieldProps<TFieldValues>> {
-    /**
-     * The form schema, supports Yup, Zod, and AJV.
-     */
-    schema?: TSchema;
-    /**
-     * Triggers when any of the field change.
-     */
-    onChange?: WatchObserver<TFieldValues>;
-    /**
-     * The submit handler.
-     */
-    onSubmit: SubmitHandler<TFieldValues>;
-    /**
-     * Triggers when there are validation errors.
-     */
-    onError?: SubmitErrorHandler<TFieldValues>;
-    /**
-     * The Hook Form state ref.
-     */
-    formRef?: React$1.RefObject<UseFormReturn<TFieldValues, TContext>>;
-    /**
-     * The form children, can be a render prop or a ReactNode.
-     */
-    children?: MaybeRenderProp<FormRenderContext<TFieldValues, TContext, TFieldTypes>>;
-}
-interface FormProps<TFieldValues extends FieldValues = FieldValues, TContext extends object = object, TSchema = any, TFieldTypes = FieldProps<TFieldValues>> extends UseFormProps<TFieldValues, TContext>, Omit<HTMLChakraProps<'form'>, 'children' | 'onChange' | 'onSubmit' | 'onError'>, FormOptions<TFieldValues, TContext, TSchema, TFieldTypes> {
-}
-/**
- * The wrapper component provides context, state, and focus management.
- *
- * @see Docs https://saas-ui.dev/docs/components/forms/form
- */
-declare const Form: (<TFieldValues extends FieldValues, TContext extends object = object, TSchema = any, TFieldTypes = FieldProps<TFieldValues>>(props: FormProps<TFieldValues, TContext, TSchema, TFieldTypes> & {
-    ref?: React$1.ForwardedRef<HTMLFormElement> | undefined;
-}) => React$1.ReactElement) & {
-    displayName?: string | undefined;
-    getResolver?: GetResolver | undefined;
-    getFieldResolver: GetFieldResolver;
-};
-type GetResolver = <TFieldValues extends FieldValues, TContext extends object>(schema: any) => (values: TFieldValues, context: TContext | undefined, options: ResolverOptions<TFieldValues>) => Promise<ResolverResult<TFieldValues>>;
-type GetFieldResolver = (schema: any) => FieldResolver;
-
 type FieldOption = {
-    label: string;
+    label?: string;
     value: string;
 };
 type FieldOptions<TOption extends FieldOption = FieldOption> = Array<string> | Array<TOption>;
 type ValueOf<T> = T[keyof T];
 type ShallowMerge<A, B> = Omit<A, keyof B> & B;
+type Split<S extends string, D extends string> = string extends S ? string[] : S extends '' ? [] : S extends `${infer T}${D}${infer U}` ? [T, ...Split<U, D>] : [S];
+type MapPath<T extends string[]> = T extends [infer U, ...infer R] ? U extends string ? `${U extends `${number}` ? '$' : U}${R[0] extends string ? '.' : ''}${R extends string[] ? MapPath<R> : ''}` : '' : '';
+type TransformPath<T extends string> = MapPath<Split<T, '.'>>;
+type ArrayFieldPath<Name extends string> = Name extends string ? TransformPath<Name> : never;
 interface BaseFieldProps<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>> extends Omit<FormControlProps, 'label' | 'type'> {
     /**
      * The field name
      */
-    name: TName;
+    name: TName | ArrayFieldPath<TName>;
     /**
      * The field label
      */
@@ -221,90 +241,57 @@ interface BaseFieldProps<TFieldValues extends FieldValues = FieldValues, TName e
      */
     placeholder?: string;
 }
-type MergeFieldProps<FieldDefs, TFieldValues extends FieldValues = FieldValues> = ValueOf<{
+type FieldPathWithArray<TFieldValues extends FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>> = TName | ArrayFieldPath<TName>;
+type MergeFieldProps<FieldDefs, TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>> = ValueOf<{
     [K in keyof FieldDefs]: FieldDefs[K] extends React.FC<infer Props> ? {
         type?: K;
-    } & ShallowMerge<Props, BaseFieldProps<TFieldValues>> : never;
+    } & ShallowMerge<Props, BaseFieldProps<TFieldValues, TName>> : never;
 }>;
 type FieldProps<TFieldValues extends FieldValues = FieldValues> = MergeFieldProps<DefaultFields, TFieldValues>;
 type FormChildren<FieldDefs, TFieldValues extends FieldValues = FieldValues, TContext extends object = object> = MaybeRenderProp<FormRenderContext<TFieldValues, TContext, MergeFieldProps<FieldDefs extends never ? DefaultFields : ShallowMerge<DefaultFields, FieldDefs>, TFieldValues>>>;
-type WithFields<TFormProps extends FormProps<any, any, any, any>, FieldDefs> = TFormProps extends FormProps<infer TFieldValues, infer TContext> ? Omit<TFormProps, 'children'> & {
-    children: FormChildren<FieldDefs, TFieldValues, TContext>;
+type DefaultFieldOverrides = {
+    submit?: SubmitButtonProps;
+    [key: string]: any;
+};
+type FieldOverrides<FieldDefs, TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>> = {
+    [K in FieldPathWithArray<TFieldValues, TName>]?: Omit<MergeFieldProps<FieldDefs extends never ? DefaultFields : ShallowMerge<DefaultFields, FieldDefs>, TFieldValues>, 'name'>;
+};
+type WithFields<TFormProps extends FormProps<any, any, any, any>, FieldDefs> = TFormProps extends FormProps<infer TFieldValues, infer TContext> ? Omit<TFormProps, 'children' | 'fields'> & {
+    children?: FormChildren<FieldDefs, TFieldValues, TContext>;
+    fields?: FieldOverrides<FieldDefs, TFieldValues> & {
+        submit?: SubmitButtonProps;
+    };
 } : never;
 
-interface DisplayFieldProps extends FormControlProps, Omit<FieldProps, 'type' | 'label'> {
-}
-/**
- *
- *
- * @see Docs https://saas-ui.dev/
- */
-declare const DisplayField: React$1.FC<DisplayFieldProps>;
-declare const FormValue: React$1.FC<{
-    name: string;
-}>;
-
-interface Option {
-    value: string;
-    label?: string;
-    [key: string]: unknown;
-}
-type FieldRules = Pick<RegisterOptions, 'required' | 'min' | 'max' | 'maxLength' | 'minLength' | 'pattern'>;
-/**
- * Form field component.
- *
- * Build-in types:
- * text, number, password, textarea, select, native-select, checkbox, radio, switch, pin
- *
- * Will default to a text field if there is no matching type.
-
- * @see Docs https://saas-ui.dev/docs/components/forms/field
- */
-declare const Field: (<TFieldValues extends FieldValues>(props: FieldProps<TFieldValues> & {
-    ref?: React$1.ForwardedRef<FocusableElement> | undefined;
-}) => React$1.ReactElement) & {
-    displayName?: string | undefined;
+type FieldResolver = {
+    getFields(): BaseFieldProps[];
+    getNestedFields(name: string): BaseFieldProps[];
 };
-
-interface FieldsProps {
-    schema: any;
-    fieldResolver?: FieldResolver;
-    focusFirstField?: boolean;
+type GetFieldResolver<TSchema = any> = (schema: TSchema) => FieldResolver;
+interface SchemaField extends BaseFieldProps {
+    items?: SchemaField[];
+    properties?: Record<string, SchemaField>;
 }
-declare const AutoFields: React$1.FC<FieldsProps>;
-
-declare const FieldsProvider: React__default.FC<{
-    value: Record<string, React__default.FC<any>>;
-    children: React__default.ReactNode;
-}>;
-declare const useField: (type: string) => React__default.FC<any>;
+type ObjectSchema = Record<string, SchemaField>;
+declare const objectFieldResolver: GetFieldResolver<ObjectSchema>;
 
-interface AutoFormOptions {
-    /**
-     * The submit button label.
-     * Pass `null` to render no submit button.
-     */
-    submitLabel?: React$1.ReactNode;
-    /**
-     * The schema.
-     * Supports object schema, Zod, Yup or Ajv (JSON Schema).
-     * @see https://www.saas-ui.dev/docs/forms/auto-form
-     */
-    schema: any;
-    /**
-     * The field resolver.
-     */
-    fieldResolver?: any;
-}
-interface AutoFormProps<TFieldValues extends FieldValues, TContext extends object = object> extends Omit<FormProps<TFieldValues, TContext>, 'schema' | 'children'>, AutoFormOptions {
-    children?: React$1.ReactNode;
+interface DisplayIfProps<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>> {
+    children: React$1.ReactElement;
+    name: TName;
+    defaultValue?: unknown;
+    isDisabled?: boolean;
+    isExact?: boolean;
+    condition?: (value: unknown, context: UseFormReturn$1<TFieldValues>) => boolean;
 }
 /**
- * The wrapper component that manages context and state.
+ * Conditionally render parts of a form.
  *
- * @see Docs https://saas-ui.dev/docs/components/forms/auto-form
+ * @see Docs https://saas-ui.dev/docs/components/forms/form
  */
-declare const AutoForm: _chakra_ui_system_dist_system_types.ComponentWithAs<_chakra_ui_system_dist_system_types.As<any>, AutoFormProps<FieldValues, object>>;
+declare const DisplayIf: {
+    <TFieldValues extends FieldValues = FieldValues, TName extends react_hook_form.Path<TFieldValues> = react_hook_form.Path<TFieldValues>>({ children, name, defaultValue, isDisabled, isExact, condition, }: DisplayIfProps<TFieldValues, TName>): React$1.ReactElement<any, string | React$1.JSXElementConstructor<any>> | null;
+    displayName: string;
+};
 
 interface FormLayoutProps extends SimpleGridProps {
 }
@@ -322,29 +309,6 @@ declare const FormLayout: {
     displayName: string;
 };
 
-interface SubmitButtonProps extends ButtonProps {
-    /**
-     * Disable the submit button if the form is untouched.
-     *
-     * Change the default behavior by updating
-     * `SubmitButton.defaultProps.disableIfUntouched`
-     */
-    disableIfUntouched?: boolean;
-    /**
-     * Disable the submit button if the form is invalid.
-     *
-     * Change the default behavior by updating
-     * `SubmitButton.defaultProps.disableIfInvalid`
-     */
-    disableIfInvalid?: boolean;
-}
-/**
- * A button with type submit and default color scheme primary and isLoading state when the form is submitting.
- *
- * @see Docs https://saas-ui.dev/docs/components/forms/form
- */
-declare const SubmitButton: _chakra_ui_system_dist_system_types.ComponentWithAs<"button", SubmitButtonProps>;
-
 interface UseArrayFieldReturn extends UseFieldArrayReturn {
     /**
      * The array field name
@@ -389,11 +353,11 @@ interface UseArrayFieldRowReturn {
 }
 declare const ArrayFieldRowProvider: React$1.Provider<UseArrayFieldRowReturn>;
 declare const useArrayFieldRowContext: () => UseArrayFieldRowReturn;
-interface ArrayFieldOptions {
+interface ArrayFieldOptions<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>> {
     /**
      * The field name
      */
-    name: string;
+    name: TName;
     /**
      * Default value for new values in the array
      */
@@ -413,12 +377,12 @@ declare const useArrayField: ({ name, defaultValue, keyName, min, max, }: ArrayF
     max: number | undefined;
     swap: react_hook_form.UseFieldArraySwap;
     move: react_hook_form.UseFieldArrayMove;
-    prepend: react_hook_form.UseFieldArrayPrepend<react_hook_form.FieldValues, string>;
-    append: react_hook_form.UseFieldArrayAppend<react_hook_form.FieldValues, string>;
+    prepend: react_hook_form.UseFieldArrayPrepend<FieldValues, string>;
+    append: react_hook_form.UseFieldArrayAppend<FieldValues, string>;
     remove: react_hook_form.UseFieldArrayRemove;
-    insert: react_hook_form.UseFieldArrayInsert<react_hook_form.FieldValues, string>;
-    update: react_hook_form.UseFieldArrayUpdate<react_hook_form.FieldValues, string>;
-    replace: react_hook_form.UseFieldArrayReplace<react_hook_form.FieldValues, string>;
+    insert: react_hook_form.UseFieldArrayInsert<FieldValues, string>;
+    update: react_hook_form.UseFieldArrayUpdate<FieldValues, string>;
+    replace: react_hook_form.UseFieldArrayReplace<FieldValues, string>;
     fields: Record<string, string>[];
 };
 interface UseArrayFieldRowProps {
@@ -504,7 +468,8 @@ declare const ArrayFieldRemoveButton: React$1.FC<ArrayFieldButtonProps>;
  * @see Docs https://saas-ui.dev/docs/components/forms/array-field
  */
 declare const ArrayFieldAddButton: React$1.FC<ArrayFieldButtonProps>;
-interface ArrayFieldProps extends ArrayFieldOptions, Omit<BaseFieldProps, 'defaultValue'> {
+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[]>;
 }
 interface ArrayField {
     id: string;
@@ -527,15 +492,18 @@ declare const ArrayFieldRows: {
     ({ children, }: ArrayFieldRowsProps): React$1.ReactElement | null;
     displayName: string;
 };
+interface ArrayFieldContainerProps extends Omit<ArrayFieldProps, 'children'> {
+    children: React$1.ReactNode;
+}
 /**
  * The container component provides context and state management.
  *
  * @see Docs https://saas-ui.dev/docs/components/forms/array-field
  */
-declare const ArrayFieldContainer: React$1.ForwardRefExoticComponent<ArrayFieldProps & React$1.RefAttributes<UseArrayFieldReturn>>;
+declare const ArrayFieldContainer: React$1.ForwardRefExoticComponent<ArrayFieldContainerProps & React$1.RefAttributes<UseArrayFieldReturn>>;
 
-interface ObjectFieldProps extends BaseFieldProps {
-    name: string;
+interface ObjectFieldProps<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>> extends BaseFieldProps {
+    name: TName;
     children: React$1.ReactNode;
     columns?: ResponsiveValue<number>;
     spacing?: ResponsiveValue<string | number>;
@@ -548,23 +516,106 @@ declare const FormLegend: (props: FormLabelProps) => JSX.Element;
  */
 declare const ObjectField: React$1.FC<ObjectFieldProps>;
 
-interface DisplayIfProps<TFieldValues extends FieldValues = FieldValues> {
-    children: React$1.ReactElement;
-    name: string;
-    defaultValue?: unknown;
-    isDisabled?: boolean;
-    isExact?: boolean;
-    condition?: (value: unknown, context: UseFormReturn<TFieldValues>) => boolean;
+interface FormRenderContext<TFieldValues extends FieldValues = FieldValues, TContext extends object = object, TFieldTypes = FieldProps<TFieldValues>> extends UseFormReturn$1<TFieldValues, TContext> {
+    Field: React$1.FC<TFieldTypes>;
+    DisplayIf: React$1.FC<DisplayIfProps<TFieldValues>>;
+    ArrayField: React$1.FC<ArrayFieldProps<TFieldValues>>;
+    ObjectField: React$1.FC<ObjectFieldProps<TFieldValues>>;
+}
+interface FormOptions<TFieldValues extends FieldValues = FieldValues, TContext extends object = object, TSchema = any, TFieldTypes = FieldProps<TFieldValues>> {
+    /**
+     * The form schema.
+     */
+    schema?: TSchema;
+    /**
+     * Triggers when any of the field change.
+     */
+    onChange?: WatchObserver<TFieldValues>;
+    /**
+     * The submit handler.
+     */
+    onSubmit: SubmitHandler<TFieldValues>;
+    /**
+     * Triggers when there are validation errors.
+     */
+    onError?: SubmitErrorHandler<TFieldValues>;
+    /**
+     * The Hook Form state ref.
+     */
+    formRef?: React$1.RefObject<UseFormReturn$1<TFieldValues, TContext>>;
+    /**
+     * The form children, can be a render prop or a ReactNode.
+     */
+    children?: MaybeRenderProp<FormRenderContext<TFieldValues, TContext, TFieldTypes>>;
+    /**
+     * The field resolver, used to resolve the fields from schemas.
+     */
+    fieldResolver?: FieldResolver;
+    /**
+     * Field overrides
+     */
+    fields?: DefaultFieldOverrides;
+}
+interface FormProps<TFieldValues extends FieldValues = FieldValues, TContext extends object = object, TSchema = any, TFieldTypes = FieldProps<TFieldValues>> extends UseFormProps<TFieldValues, TContext>, Omit<HTMLChakraProps<'form'>, 'children' | 'onChange' | 'onSubmit' | 'onError'>, FormOptions<TFieldValues, TContext, TSchema, TFieldTypes> {
 }
 /**
- * Conditionally render parts of a form.
+ * The wrapper component provides context, state, and focus management.
  *
  * @see Docs https://saas-ui.dev/docs/components/forms/form
  */
-declare const DisplayIf: {
-    <TFieldValues extends FieldValues = FieldValues>({ children, name, defaultValue, isDisabled, isExact, condition, }: DisplayIfProps<TFieldValues>): React$1.ReactElement<any, string | React$1.JSXElementConstructor<any>> | null;
-    displayName: string;
+declare const Form$1: (<TFieldValues extends FieldValues, TContext extends object = object, TSchema = any, TFieldTypes = FieldProps<TFieldValues>>(props: FormProps<TFieldValues, TContext, TSchema, TFieldTypes> & {
+    ref?: React$1.ForwardedRef<HTMLFormElement> | undefined;
+}) => React$1.ReactElement) & {
+    displayName?: string | undefined;
 };
+type GetResolver = <TFieldValues extends FieldValues, TContext extends object>(schema: any) => (values: TFieldValues, context: TContext | undefined, options: ResolverOptions<TFieldValues>) => Promise<ResolverResult<TFieldValues>>;
+
+interface DisplayFieldProps extends FormControlProps, Omit<FieldProps, 'type' | 'label'> {
+}
+/**
+ *
+ *
+ * @see Docs https://saas-ui.dev/
+ */
+declare const DisplayField: React$1.FC<DisplayFieldProps>;
+declare const FormValue: React$1.FC<{
+    name: string;
+}>;
+
+interface Option {
+    value: string;
+    label?: string;
+    [key: string]: unknown;
+}
+type FieldRules = Pick<RegisterOptions, 'required' | 'min' | 'max' | 'maxLength' | 'minLength' | 'pattern'>;
+/**
+ * Form field component.
+ *
+ * Build-in types:
+ * text, number, password, textarea, select, native-select, checkbox, radio, switch, pin
+ *
+ * Will default to a text field if there is no matching type.
+
+ * @see Docs https://saas-ui.dev/docs/components/forms/field
+ */
+declare const Field: (<TFieldValues extends FieldValues>(props: FieldProps<TFieldValues> & {
+    ref?: React$1.ForwardedRef<FocusableElement> | undefined;
+}) => React$1.ReactElement) & {
+    displayName?: string | undefined;
+};
+
+interface FieldsProps<TSchema = any> {
+    schema?: TSchema;
+    fieldResolver?: FieldResolver;
+    focusFirstField?: boolean;
+}
+declare const AutoFields: React$1.FC<FieldsProps>;
+
+declare const FieldsProvider: React__default.FC<{
+    value: Record<string, React__default.FC<any>>;
+    children: React__default.ReactNode;
+}>;
+declare const useField: (type: string) => React__default.FC<any>;
 
 interface StepState {
     name: string;
@@ -661,6 +712,38 @@ interface NextButtonProps extends Omit<ButtonProps, 'children'> {
  */
 declare const NextButton: React$1.FC<NextButtonProps>;
 
+type FormProviderProps<TFieldValues extends FieldValues = FieldValues, TContext = any, TSchema = any> = FormProviderProps$1<TFieldValues, TContext> & {
+    fieldResolver?: FieldResolver;
+    schema?: TSchema;
+    fields?: {
+        [key: string]: unknown;
+    };
+};
+declare const useFormContext: <TFieldValues extends FieldValues = FieldValues, TContext = any, TSchema = any>() => {
+    fieldResolver?: FieldResolver | undefined;
+    schema?: any;
+    fields?: {
+        [key: string]: unknown;
+    } | undefined;
+    watch: react_hook_form.UseFormWatch<FieldValues>;
+    getValues: react_hook_form.UseFormGetValues<FieldValues>;
+    getFieldState: react_hook_form.UseFormGetFieldState<FieldValues>;
+    setError: react_hook_form.UseFormSetError<FieldValues>;
+    clearErrors: react_hook_form.UseFormClearErrors<FieldValues>;
+    setValue: react_hook_form.UseFormSetValue<FieldValues>;
+    trigger: react_hook_form.UseFormTrigger<FieldValues>;
+    formState: react_hook_form.FormState<FieldValues>;
+    resetField: react_hook_form.UseFormResetField<FieldValues>;
+    reset: react_hook_form.UseFormReset<FieldValues>;
+    handleSubmit: react_hook_form.UseFormHandleSubmit<FieldValues>;
+    unregister: react_hook_form.UseFormUnregister<FieldValues>;
+    control: react_hook_form.Control<FieldValues, any>;
+    register: react_hook_form.UseFormRegister<FieldValues>;
+    setFocus: react_hook_form.UseFormSetFocus<FieldValues>;
+};
+type UseFormReturn<TFieldValues extends FieldValues = FieldValues, TContext = any, TSchema = any> = ReturnType<typeof useFormContext>;
+declare const FormProvider: <TFieldValues extends FieldValues = FieldValues, TContext = any, TSchema = any>(props: FormProviderProps<TFieldValues, TContext, TSchema>) => JSX.Element;
+
 interface WatchFieldProps<Value = unknown, TFieldValues extends FieldValues = FieldValues> {
     name: string;
     defaultValue?: Value;
@@ -681,11 +764,19 @@ declare const BaseField: React$1.FC<BaseFieldProps>;
 
 interface CreateFormProps<FieldDefs> {
     resolver?: GetResolver;
+    fieldResolver?: GetFieldResolver;
     fields?: FieldDefs extends Record<string, React__default.FC<any>> ? FieldDefs : never;
 }
-declare function createForm<FieldDefs, Schema = any>({ resolver, fields, }?: CreateFormProps<FieldDefs>): <TFieldValues extends FieldValues, TContext extends object = object, TSchema extends Schema = Schema>(props: Omit<FormProps<TFieldValues, TContext, TSchema, FieldProps<TFieldValues>>, "children"> & {
-    children: FormChildren<FieldDefs, TFieldValues, TContext>;
-}) => JSX.Element;
+declare function createForm<FieldDefs, Schema = any>({ resolver, fieldResolver, fields, }?: CreateFormProps<FieldDefs>): (<TFieldValues extends FieldValues, TContext extends object = object, TSchema extends Schema = Schema>(props: Omit<FormProps<TFieldValues, TContext, TSchema, FieldProps<TFieldValues>>, "children" | "fields"> & {
+    children?: FormChildren<FieldDefs, TFieldValues, TContext>;
+    fields?: (FieldOverrides<FieldDefs, TFieldValues, react_hook_form.Path<TFieldValues>> & {
+        submit?: SubmitButtonProps | undefined;
+    }) | undefined;
+} & {
+    ref?: React__default.ForwardedRef<HTMLFormElement> | undefined;
+}) => React__default.ReactElement) & {
+    displayName?: string | undefined;
+};
 
 interface CreateFieldOptions {
     isControlled?: boolean;
@@ -702,4 +793,15 @@ interface CreateFieldOptions {
  */
 declare const createField: <TProps extends object>(component: React$1.FC<TProps>, options?: CreateFieldOptions) => React$1.FC<TProps & BaseFieldProps<react_hook_form.FieldValues, string>>;
 
-export { ArrayField, ArrayFieldAddButton, ArrayFieldButtonProps, ArrayFieldContainer, ArrayFieldOptions, ArrayFieldProps, ArrayFieldProvider, ArrayFieldRemoveButton, ArrayFieldRow, ArrayFieldRowContainer, ArrayFieldRowFields, ArrayFieldRowFieldsProps, ArrayFieldRowProvider, ArrayFieldRows, ArrayFieldRowsProps, AutoFields, AutoForm, AutoFormProps, BaseField, BaseFieldProps, CheckboxField, CreateFieldOptions, CreateFormProps, DefaultFields, DisplayField, DisplayFieldProps, DisplayIf, DisplayIfProps, Field, FieldOptions, FieldProps, FieldResolver, FieldRules, FieldsProps, FieldsProvider, Form, FormLayout, FormLayoutProps, FormLegend, FormProps, FormRenderContext, FormStep, FormStepOptions, FormStepProps, FormStepSubmitHandler, FormStepper, FormStepperProps, FormValue, GetFieldResolver, GetResolver, InputField, InputFieldProps, InputRightButton, InputRightButtonProps, NativeSelect, NativeSelectField, NativeSelectProps, NextButton, NextButtonProps, NumberInputField, NumberInputFieldProps, ObjectField, ObjectFieldProps, ObjectSchema, Option, PasswordInput, PasswordInputField, PasswordInputProps, PinField, PinFieldProps, PrevButton, RadioField, RadioInput, RadioInputProps, RadioOption, RadioOptions, Select, SelectField, SelectOption, SelectProps, StepForm, StepFormContext, StepFormProps, StepFormProvider, StepState, SubmitButton, SubmitButtonProps, SwitchField, TextareaField, UseArrayFieldReturn, UseArrayFieldRowProps, UseArrayFieldRowReturn, UseFormStepProps, UseStepFormProps, UseStepFormReturn, WatchField, WatchFieldProps, WithFields, createField, createForm, defaultFieldTypes, objectFieldResolver, useArrayField, useArrayFieldAddButton, useArrayFieldContext, useArrayFieldRemoveButton, useArrayFieldRow, useArrayFieldRowContext, useField, useFormStep, useStepForm, useStepFormContext };
+declare const Form: (<TFieldValues extends react_hook_form.FieldValues, TContext extends object = object, TSchema extends any = any>(props: Omit<FormProps<TFieldValues, TContext, TSchema, FieldProps<TFieldValues>>, "children" | "fields"> & {
+    children?: FormChildren<unknown, TFieldValues, TContext>;
+    fields?: (FieldOverrides<unknown, TFieldValues, react_hook_form.Path<TFieldValues>> & {
+        submit?: SubmitButtonProps | undefined;
+    }) | undefined;
+} & {
+    ref?: React$1.ForwardedRef<HTMLFormElement> | undefined;
+}) => React$1.ReactElement<any, string | React$1.JSXElementConstructor<any>>) & {
+    displayName?: string | undefined;
+};
+
+export { ArrayField, ArrayFieldAddButton, ArrayFieldButtonProps, ArrayFieldContainer, ArrayFieldContainerProps, ArrayFieldOptions, ArrayFieldProps, ArrayFieldProvider, ArrayFieldRemoveButton, ArrayFieldRow, ArrayFieldRowContainer, ArrayFieldRowFields, ArrayFieldRowFieldsProps, ArrayFieldRowProvider, ArrayFieldRows, ArrayFieldRowsProps, AutoFields, BaseField, BaseFieldProps, Form$1 as BaseForm, CheckboxField, CreateFieldOptions, CreateFormProps, DefaultFields, DisplayField, DisplayFieldProps, DisplayIf, DisplayIfProps, Field, FieldOptions, FieldProps, FieldResolver, FieldRules, FieldsProps, FieldsProvider, Form, FormLayout, FormLayoutProps, FormLegend, FormProps, FormProvider, FormRenderContext, FormStep, FormStepOptions, FormStepProps, FormStepSubmitHandler, FormStepper, FormStepperProps, FormValue, GetFieldResolver, InputField, InputFieldProps, InputRightButton, InputRightButtonProps, NativeSelect, NativeSelectField, NativeSelectProps, NextButton, NextButtonProps, NumberInputField, NumberInputFieldProps, ObjectField, ObjectFieldProps, ObjectSchema, Option, PasswordInput, PasswordInputField, PasswordInputProps, PinField, PinFieldProps, PrevButton, RadioField, RadioInput, RadioInputProps, RadioOption, RadioOptions, Select, SelectButton, SelectButtonProps, SelectField, SelectList, SelectListProps, SelectOption, SelectProps, StepForm, StepFormContext, StepFormProps, StepFormProvider, StepState, SubmitButton, SubmitButtonProps, SwitchField, TextareaField, UseArrayFieldReturn, UseArrayFieldRowProps, UseArrayFieldRowReturn, UseFormStepProps, UseStepFormProps, UseStepFormReturn, WatchField, WatchFieldProps, WithFields, createField, createForm, defaultFieldTypes, objectFieldResolver, useArrayField, useArrayFieldAddButton, useArrayFieldContext, useArrayFieldRemoveButton, useArrayFieldRow, useArrayFieldRowContext, useField, useFormContext, useFormStep, useStepForm, useStepFormContext };