@saas-ui/forms 2.0.0-next.2 → 2.0.0-next.20

package/dist/index.d.ts

@@ -1,13 +1,13 @@
 import * as React$1 from 'react';
 import React__default from 'react';
-import { NumberInputProps as NumberInputProps$1, InputProps, RadioGroupProps, SystemProps, StackDirection, RadioProps, MenuProps, ButtonProps, MenuOptionGroupProps, MenuListProps, SelectProps as SelectProps$1, FormControlProps, TextareaProps, SwitchProps, CheckboxProps, UsePinInputProps, HTMLChakraProps, SimpleGridProps, ResponsiveValue, FormLabelProps, ThemingProps } from '@chakra-ui/react';
-import * as _chakra_ui_system_dist_system_types from '@chakra-ui/system/dist/system.types';
 import * as react_hook_form from 'react-hook-form';
-import { RegisterOptions, FieldValues, FieldPath, UseFormProps, ResolverOptions, ResolverResult, WatchObserver, SubmitHandler, SubmitErrorHandler, UseFormReturn, 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 { FocusableElement } from '@chakra-ui/utils';
+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 { UseStepperReturn, UseStepperProps, StepperStepsProps } from '@saas-ui/core';
+import { StepsProps, StepsItemProps, UseStepperReturn, UseStepperProps } from '@saas-ui/core';
+import { NumberInputProps as NumberInputProps$1, InputProps, RadioProps, RadioGroupProps, SystemProps, StackDirection, MenuProps, ButtonProps, MenuListProps, MenuItemOptionProps, SelectProps as SelectProps$1, TextareaProps, SwitchProps, CheckboxProps, UsePinInputProps, FormControlProps, SimpleGridProps, ResponsiveValue, FormLabelProps, HTMLChakraProps, ThemingProps } from '@chakra-ui/react';
+import { FocusableElement } from '@chakra-ui/utils';
+import * as _chakra_ui_system_dist_system_types from '@chakra-ui/system/dist/system.types';
 
 interface NumberInputOptions {
     /**
@@ -29,50 +29,99 @@ interface NumberInputProps extends NumberInputProps$1, NumberInputOptions {
 interface PasswordOptions {
     viewIcon?: React__default.ReactNode;
     viewOffIcon?: React__default.ReactNode;
+    leftAddon?: React__default.ReactNode;
 }
 interface PasswordInputProps extends InputProps, PasswordOptions {
 }
 declare const PasswordInput: _chakra_ui_system_dist_system_types.ComponentWithAs<"div", PasswordInputProps>;
 
-interface Option$3 extends RadioProps {
-    value: string;
-    label?: string;
+interface RadioOption extends Omit<RadioProps, 'value' | 'label'>, FieldOption {
 }
+type RadioOptions = FieldOptions<RadioOption>;
 interface RadioInputOptions {
-    options: Option$3[];
+    options: RadioOptions;
     spacing?: SystemProps['margin'];
     direction?: StackDirection;
 }
 interface RadioInputProps extends Omit<RadioGroupProps, 'children'>, RadioInputOptions {
 }
+declare const RadioInput: _chakra_ui_system_dist_system_types.ComponentWithAs<"div", RadioInputProps>;
 
-interface Option$2 {
-    value: string;
-    label?: string;
-}
 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.
+     */
+    name: string;
+    /**
+     * The value of the select field.
+     */
+    value?: string | string[];
+    /**
+     * The initial value of the select field.
      */
-    options?: Option$2[];
+    defaultValue?: string | string[];
     /**
-     * Props passed to the MenuList.
+     * The callback invoked when the value of the select field changes.
+     * @param value The value of the select field.
      */
-    menuListProps?: MenuListProps;
+    onChange?: (value: string | string[]) => void;
     /**
-     * Customize how the value is rendered.
-     * @type (value?: string[]) => React.ReactElement
+     * The placeholder text when there's no value.
      */
-    renderValue?: (value?: string[]) => React$1.ReactElement | undefined;
+    placeholder?: string;
+    /**
+     * If `true`, the select will be disabled.
+     */
+    isDisabled?: boolean;
+    /**
+     * An array of options
+     * If you leave this empty the children prop will be rendered.
+     */
+    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'>, Pick<ButtonProps, 'isDisabled' | 'leftIcon' | 'rightIcon'>, Pick<MenuOptionGroupProps, 'onChange'>, SelectOptions {
+
+interface SelectProps extends Omit<MenuProps, 'children'>, 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;
@@ -85,17 +134,85 @@ interface NativeSelectProps extends SelectProps$1, NativeSelectOptions {
 }
 declare const NativeSelect: _chakra_ui_system_dist_system_types.ComponentWithAs<"select", NativeSelectProps>;
 
-interface Option {
-    value: string;
-    label?: string;
-    [key: string]: unknown;
+interface InputFieldProps extends InputProps {
+    type?: string;
+    leftAddon?: React$1.ReactNode;
+    rightAddon?: React$1.ReactNode;
 }
-type FieldRules = Pick<RegisterOptions, 'required' | 'min' | 'max' | 'maxLength' | 'minLength' | 'pattern'>;
-interface FieldProps<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>> extends Omit<FormControlProps, 'label' | 'type'> {
+declare const InputField: React$1.FC<InputFieldProps & BaseFieldProps<react_hook_form.FieldValues, string>>;
+interface NumberInputFieldProps extends NumberInputProps {
+    type: 'number';
+}
+declare const NumberInputField: React$1.FC<NumberInputFieldProps & BaseFieldProps<react_hook_form.FieldValues, string>>;
+declare const PasswordInputField: React$1.FC<PasswordInputProps & BaseFieldProps<react_hook_form.FieldValues, string>>;
+declare const TextareaField: React$1.FC<TextareaProps & BaseFieldProps<react_hook_form.FieldValues, string>>;
+declare const SwitchField: React$1.FC<SwitchProps & BaseFieldProps<react_hook_form.FieldValues, string>>;
+declare const SelectField: React$1.FC<SelectProps & BaseFieldProps<react_hook_form.FieldValues, string>>;
+declare const CheckboxField: React$1.FC<CheckboxProps & BaseFieldProps<react_hook_form.FieldValues, string>>;
+declare const RadioField: React$1.FC<RadioInputProps & BaseFieldProps<react_hook_form.FieldValues, string>>;
+declare const NativeSelectField: React$1.FC<NativeSelectProps & BaseFieldProps<react_hook_form.FieldValues, string>>;
+interface PinFieldProps extends Omit<UsePinInputProps, 'type'> {
+    pinLength?: number;
+    pinType?: 'alphanumeric' | 'number';
+    spacing?: SystemProps['margin'];
+}
+declare const PinField: React$1.FC<PinFieldProps & BaseFieldProps<react_hook_form.FieldValues, string>>;
+declare const defaultFieldTypes: {
+    text: React$1.FC<InputFieldProps & BaseFieldProps<react_hook_form.FieldValues, string>>;
+    email: React$1.FC<InputFieldProps & BaseFieldProps<react_hook_form.FieldValues, string>>;
+    url: React$1.FC<InputFieldProps & BaseFieldProps<react_hook_form.FieldValues, string>>;
+    phone: React$1.FC<InputFieldProps & BaseFieldProps<react_hook_form.FieldValues, string>>;
+    number: React$1.FC<NumberInputFieldProps & BaseFieldProps<react_hook_form.FieldValues, string>>;
+    password: React$1.FC<PasswordInputProps & BaseFieldProps<react_hook_form.FieldValues, string>>;
+    textarea: React$1.FC<TextareaProps & BaseFieldProps<react_hook_form.FieldValues, string>>;
+    switch: React$1.FC<SwitchProps & BaseFieldProps<react_hook_form.FieldValues, string>>;
+    select: React$1.FC<SelectProps & BaseFieldProps<react_hook_form.FieldValues, string>>;
+    checkbox: React$1.FC<CheckboxProps & BaseFieldProps<react_hook_form.FieldValues, string>>;
+    radio: React$1.FC<RadioInputProps & BaseFieldProps<react_hook_form.FieldValues, string>>;
+    pin: React$1.FC<PinFieldProps & BaseFieldProps<react_hook_form.FieldValues, string>>;
+    'native-select': React$1.FC<NativeSelectProps & BaseFieldProps<react_hook_form.FieldValues, string>>;
+};
+type DefaultFields = typeof defaultFieldTypes;
+
+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>;
+
+type FieldOption = {
+    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
      */
@@ -114,16 +231,7 @@ interface FieldProps<TFieldValues extends FieldValues = FieldValues, TName exten
     rules?: Omit<RegisterOptions<TFieldValues, TName>, 'valueAsNumber' | 'valueAsDate' | 'setValueAs' | 'disabled'>;
     /**
      * Build-in types:
-     * - text
-     * - number
-     * - password
-     * - textarea
-     * - select
-     * - native-select
-     * - checkbox
-     * - radio
-     * - switch
-     * - pin
+     * text, number, password, textarea, select, native-select, checkbox, radio, switch, pin
      *
      * Will default to a text field if there is no matching type.
      */
@@ -133,218 +241,74 @@ interface FieldProps<TFieldValues extends FieldValues = FieldValues, TName exten
      */
     placeholder?: string;
 }
-declare const BaseField: React$1.FC<FieldProps>;
-type As<Props = any> = React$1.ElementType<Props>;
-type PropsOf<T extends As> = React$1.ComponentPropsWithoutRef<T> & {
-    type?: FieldTypes;
-};
-/**
- * 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.
- */
-declare const Field: (<TFieldValues extends FieldValues>(props: FieldProps<TFieldValues, react_hook_form.Path<TFieldValues>> & FieldTypeProps & {
-    ref?: React$1.ForwardedRef<FocusableElement> | undefined;
-}) => React$1.ReactElement) & {
-    displayName?: string | undefined;
-};
-declare const withControlledInput: (InputComponent: React$1.FC<any>) => _chakra_ui_system_dist_system_types.ComponentWithAs<React$1.FC<any>, FieldProps<FieldValues, string>>;
-declare const withUncontrolledInput: (InputComponent: React$1.FC<any>) => _chakra_ui_system_dist_system_types.ComponentWithAs<React$1.FC<any>, FieldProps<FieldValues, string>>;
-interface RegisterFieldTypeOptions {
-    isControlled?: boolean;
-    hideLabel?: boolean;
-    BaseField?: React$1.FC<any>;
-}
-/**
- * Register a new field type
- * @param type The name for this field in kebab-case, eg `email` or `array-field`
- * @param component The React component
- * @param options
- * @param options.isControlled Set this to true if this is a controlled field.
- * @param options.hideLabel Hide the field label, for example for the checkbox field.
- */
-declare const registerFieldType: <T extends object>(type: string, component: React$1.FC<T>, options?: RegisterFieldTypeOptions) => React$1.FC<T & FieldProps<FieldValues, string>>;
-interface InputFieldProps extends InputProps {
-    type?: string;
-    leftAddon?: React$1.ReactNode;
-    rightAddon?: React$1.ReactNode;
-}
-declare const InputField: React$1.FC<InputFieldProps & FieldProps<FieldValues, string>>;
-interface NumberInputFieldProps extends NumberInputProps {
-    type: 'number';
-}
-declare const NumberInputField: React$1.FC<NumberInputFieldProps & FieldProps<FieldValues, string>>;
-declare const PasswordInputField: React$1.FC<PasswordInputProps & FieldProps<FieldValues, string>>;
-declare const TextareaField: React$1.FC<TextareaProps & FieldProps<FieldValues, string>>;
-declare const SwitchField: React$1.FC<SwitchProps & FieldProps<FieldValues, string>>;
-declare const SelectField: React$1.FC<SelectProps & FieldProps<FieldValues, string>>;
-declare const CheckboxField: React$1.FC<CheckboxProps & FieldProps<FieldValues, string>>;
-declare const RadioField: React$1.FC<RadioInputProps & FieldProps<FieldValues, string>>;
-declare const NativeSelectField: React$1.FC<NativeSelectProps & FieldProps<FieldValues, string>>;
-interface PinFieldProps extends Omit<UsePinInputProps, 'type'> {
-    pinLength?: number;
-    pinType?: 'alphanumeric' | 'number';
-    spacing?: SystemProps['margin'];
-}
-declare const PinField: React$1.FC<PinFieldProps & FieldProps<FieldValues, string>>;
-declare const fieldTypes: {
-    text: React$1.FC<InputFieldProps & FieldProps<FieldValues, string>>;
-    email: React$1.FC<InputFieldProps & FieldProps<FieldValues, string>>;
-    url: React$1.FC<InputFieldProps & FieldProps<FieldValues, string>>;
-    phone: React$1.FC<InputFieldProps & FieldProps<FieldValues, string>>;
-    number: React$1.FC<NumberInputFieldProps & FieldProps<FieldValues, string>>;
-    password: React$1.FC<PasswordInputProps & FieldProps<FieldValues, string>>;
-    textarea: React$1.FC<TextareaProps & FieldProps<FieldValues, string>>;
-    switch: React$1.FC<SwitchProps & FieldProps<FieldValues, string>>;
-    checkbox: React$1.FC<CheckboxProps & FieldProps<FieldValues, string>>;
-    radio: React$1.FC<RadioInputProps & FieldProps<FieldValues, string>>;
-    pin: React$1.FC<PinFieldProps & FieldProps<FieldValues, string>>;
-    select: React$1.FC<SelectProps & FieldProps<FieldValues, string>>;
-    'native-select': React$1.FC<NativeSelectProps & FieldProps<FieldValues, string>>;
+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, 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 DefaultFieldOverrides = {
+    submit?: SubmitButtonProps;
+    [key: string]: any;
 };
-type FieldTypes = typeof fieldTypes;
-type FieldType<Props = any> = React$1.ElementType<Props>;
-type TypeProps<P extends FieldType, T> = React$1.ComponentPropsWithoutRef<P> & {
-    type: T;
-};
-type FieldTypeProps = {
-    [Property in keyof FieldTypes]: TypeProps<FieldTypes[Property], Property>;
-}[keyof FieldTypes] | {
-    type?: string;
+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'>;
 };
-
-interface DisplayFieldProps extends FormControlProps, Omit<FieldProps, 'type' | 'label'> {
-}
-declare const DisplayField: React$1.FC<DisplayFieldProps>;
-declare const FormValue: React$1.FC<{
-    name: string;
-}>;
+type WithFields<TFormProps extends FormProps<any, any, any, any>, FieldDefs, ExtraOverrides = object> = TFormProps extends FormProps<infer TSchema, infer TFieldValues, infer TContext> ? Omit<TFormProps, 'children' | 'fields'> & {
+    children?: FormChildren<FieldDefs, TFieldValues, TContext>;
+    fields?: FieldOverrides<FieldDefs, TFieldValues> & {
+        submit?: SubmitButtonProps;
+    } & ExtraOverrides;
+} : never;
 
 type FieldResolver = {
-    getFields(): FieldProps[];
-    getNestedFields(name: string): FieldProps[];
+    getFields(): BaseFieldProps[];
+    getNestedFields(name: string): BaseFieldProps[];
 };
-interface SchemaField extends FieldProps {
+type GetFieldResolver<TSchema = any> = (schema: TSchema) => FieldResolver;
+interface SchemaField extends BaseFieldProps {
     items?: SchemaField[];
     properties?: Record<string, SchemaField>;
 }
 type ObjectSchema = Record<string, SchemaField>;
-declare const objectFieldResolver: (schema: ObjectSchema) => FieldResolver;
+declare const objectFieldResolver: GetFieldResolver<ObjectSchema>;
 
-interface FieldsProps {
-    schema: any;
-    fieldResolver?: FieldResolver;
-    focusFirstField?: boolean;
-}
-declare const Fields: React$1.FC<FieldsProps>;
-
-interface FormRenderContext<TFieldValues extends FieldValues = FieldValues, TContext extends object = object> extends UseFormReturn<TFieldValues, TContext> {
-    Field: React$1.FC<FieldProps<TFieldValues>>;
-}
-interface FormOptions<TFieldValues extends FieldValues = FieldValues, TContext extends object = object, TSchema = any> {
-    /**
-     * 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>>;
-}
-interface FormProps<TFieldValues extends FieldValues = FieldValues, TContext extends object = object, TSchema = any> extends UseFormProps<TFieldValues, TContext>, Omit<HTMLChakraProps<'form'>, 'children' | 'onChange' | 'onSubmit' | 'onError'>, FormOptions<TFieldValues, TContext, TSchema> {
+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;
 }
-declare const Form: (<TFieldValues extends FieldValues, TContext extends object = object, TSchema = any>(props: FormProps<TFieldValues, TContext, TSchema> & {
-    ref?: React$1.ForwardedRef<HTMLFormElement> | undefined;
-}) => React$1.ReactElement) & {
-    displayName?: string | undefined;
-    getResolver?: GetResolver | undefined;
-    getFieldResolver: GetFieldResolver;
+/**
+ * Conditionally render parts of a form.
+ *
+ * @see Docs https://saas-ui.dev/docs/components/forms/form
+ */
+declare const DisplayIf: {
+    <TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ children, name, defaultValue, isDisabled, isExact, condition, }: DisplayIfProps<TFieldValues, TName>): React$1.ReactElement<any, string | React$1.JSXElementConstructor<any>> | null;
+    displayName: string;
 };
-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;
-interface CreateFormProps {
-    resolver?: GetResolver;
-}
-declare function createForm<Schema = any>({ resolver }: CreateFormProps): <TFieldValues extends FieldValues, TContext extends object = object, TSchema extends Schema = Schema>(props: FormProps<TFieldValues, TContext, TSchema>) => JSX.Element;
 
-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 FormLayoutProps extends SimpleGridProps {
 }
-declare const AutoForm: _chakra_ui_system_dist_system_types.ComponentWithAs<_chakra_ui_system_dist_system_types.As<any>, AutoFormProps<FieldValues, object>>;
-
-type FormLayoutProps = SimpleGridProps;
 /**
- * FormLayout
+ * Create consistent field spacing and positioning.
+ *
  *
  * Renders form items in a `SimpleGrid`
  * @see https://chakra-ui.com/docs/layout/simple-grid
+ *
+ * @see https://saas-ui.dev/docs/components/forms/form
  */
 declare const FormLayout: {
     ({ children, ...props }: FormLayoutProps): JSX.Element;
     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;
-}
-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 {
@@ -460,6 +424,11 @@ interface ArrayFieldRowProps extends FormLayoutProps {
      */
     children: React$1.ReactNode;
 }
+/**
+ * Render prop component, to get access to the internal fields state. Must be a child of ArrayFieldContainer.
+ *
+ * @see Docs https://saas-ui.dev/docs/components/forms/array-field
+ */
 declare const ArrayFieldRow: React$1.FC<ArrayFieldRowProps>;
 interface ArrayFieldRowFieldsProps extends FormLayoutProps {
     /**
@@ -475,16 +444,42 @@ interface ArrayFieldRowFieldsProps extends FormLayoutProps {
      */
     children: React$1.ReactNode;
 }
+/**
+ * Add the name prefix to the fields and acts as a horizontal form layout by default.
+ *
+ * @see Docs https://saas-ui.dev/docs/components/forms/array-field
+ */
 declare const ArrayFieldRowFields: React$1.FC<ArrayFieldRowFieldsProps>;
+/**
+ * The row container component providers row context.
+ *
+ * @see Docs https://saas-ui.dev/docs/components/forms/array-field
+ */
 declare const ArrayFieldRowContainer: React$1.FC<ArrayFieldRowProps>;
+/**
+ * The default remove button.
+ *
+ * @see Docs https://saas-ui.dev/docs/components/forms/array-field
+ */
 declare const ArrayFieldRemoveButton: React$1.FC<ArrayFieldButtonProps>;
+/**
+ * The default add button.
+ *
+ * @see Docs https://saas-ui.dev/docs/components/forms/array-field
+ */
 declare const ArrayFieldAddButton: React$1.FC<ArrayFieldButtonProps>;
-interface ArrayFieldProps extends ArrayFieldOptions, Omit<FieldProps, '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;
     [key: string]: unknown;
 }
+/**
+ * The wrapper component that composes the default ArrayField functionality.
+ *
+ * @see Docs https://saas-ui.dev/docs/components/forms/array-field
+ */
 declare const ArrayField: ((props: ArrayFieldProps & {
     ref?: React$1.ForwardedRef<UseArrayFieldReturn>;
 }) => React$1.ReactElement) & {
@@ -497,29 +492,148 @@ declare const ArrayFieldRows: {
     ({ children, }: ArrayFieldRowsProps): React$1.ReactElement | null;
     displayName: string;
 };
-declare const ArrayFieldContainer: React$1.ForwardRefExoticComponent<ArrayFieldProps & React$1.RefAttributes<UseArrayFieldReturn>>;
+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<ArrayFieldContainerProps & React$1.RefAttributes<UseArrayFieldReturn>>;
 
-interface ObjectFieldProps extends FieldProps {
-    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>;
 }
 declare const FormLegend: (props: FormLabelProps) => JSX.Element;
+/**
+ * The object field component.
+ *
+ * @see Docs https://saas-ui.dev/docs/components/forms/object-field
+ */
 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 & React$1.RefAttributes<FocusableElement>>;
+    DisplayIf: React$1.FC<DisplayIfProps<TFieldValues>>;
+    ArrayField: React$1.FC<ArrayFieldProps<TFieldValues> & React$1.RefAttributes<UseArrayFieldReturn>>;
+    ObjectField: React$1.FC<ObjectFieldProps<TFieldValues>>;
 }
-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;
+interface FormOptions<TSchema = unknown, TFieldValues extends FieldValues = FieldValues, TContext extends object = object, 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<TSchema = unknown, TFieldValues extends FieldValues = FieldValues, TContext extends object = object, TFieldTypes = FieldProps<TFieldValues>> extends UseFormProps<TFieldValues, TContext>, Omit<HTMLChakraProps<'form'>, 'children' | 'onChange' | 'onSubmit' | 'onError'>, FormOptions<TSchema, TFieldValues, TContext, TFieldTypes> {
+}
+/**
+ * The wrapper component provides context, state, and focus management.
+ *
+ * @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, TFieldTypes = FieldProps<TFieldValues>>(props: FormProps<TSchema, TFieldValues, TContext, TFieldTypes> & {
+    ref?: React$1.ForwardedRef<HTMLFormElement>;
+}) => React$1.ReactElement) & {
+    displayName?: string;
+};
+type GetResolver = <TFieldValues extends FieldValues, TContext extends object>(schema: unknown) => (values: TFieldValues, context: TContext | undefined, options: ResolverOptions<TFieldValues>) => Promise<ResolverResult<TFieldValues>>;
+
+type StepsOptions<TSchema, TName extends string = string> = {
+    /**
+     * The step name
+     */
+    name: TName;
+    /**
+     * Schema
+     */
+    schema?: TSchema;
+}[];
+interface StepFormProps<TSteps extends StepsOptions<any> = StepsOptions<any>, TFieldValues extends FieldValues = FieldValues, TContext extends object = object, TFieldTypes = FieldProps<TFieldValues>> extends UseStepFormProps<TSteps, TFieldValues, TContext, TFieldTypes> {
+}
+interface FormStepOptions<TName extends string = string> {
+    /**
+     * The step name
+     */
+    name: TName;
+    /**
+     * Schema
+     */
+    schema?: any;
+    /**
+     * Hook Form Resolver
+     */
+    resolver?: any;
+}
+interface FormStepperProps extends StepsProps, ThemingProps<'Stepper'> {
+    render?: StepsItemProps['render'];
+}
+/**
+ * Renders a stepper that displays progress above the form.
+ *
+ * @see Docs https://saas-ui.dev/docs/components/forms/step-form
+ */
+declare const FormStepper: React$1.FC<FormStepperProps>;
+interface FormStepProps<TName extends string = string> extends FormStepOptions<TName>, Omit<HTMLChakraProps<'div'>, 'onSubmit'> {
+    onSubmit?: FormStepSubmitHandler;
+}
+/**
+ * The form step containing fields for a specific step.
+ *
+ * @see Docs https://saas-ui.dev/docs/components/forms/step-form
+ */
+declare const FormStep: {
+    <TName extends string = string>(props: FormStepProps<TName>): JSX.Element | null;
     displayName: string;
 };
+/**
+ * A button that this opens the previous step when clicked. Disabled on the first step.
+ *
+ * @see Docs https://saas-ui.dev/docs/components/forms/step-form
+ */
+declare const PrevButton: React$1.FC<ButtonProps>;
+interface NextButtonProps extends Omit<ButtonProps, 'children'> {
+    submitLabel?: string;
+    label?: string;
+}
+/**
+ * A button that submits the active step.
+ *
+ * @see Docs https://saas-ui.dev/docs/components/forms/step-form
+ */
+declare const NextButton: React$1.FC<NextButtonProps>;
 
 interface StepState {
     name: string;
@@ -537,8 +651,21 @@ interface StepFormContext extends UseStepperReturn {
 declare const StepFormProvider: React$1.Provider<StepFormContext>;
 declare const useStepFormContext: () => StepFormContext;
 
-interface UseStepFormProps<TFieldValues extends FieldValues = FieldValues> extends Omit<UseStepperProps, 'onChange'>, Omit<FormProps<TFieldValues>, 'children'> {
-    children: MaybeRenderProp<UseStepFormReturn<TFieldValues>>;
+type StepName<T extends {
+    [k: number]: {
+        readonly name: string;
+    };
+}> = T[number]['name'];
+interface StepFormRenderContext<TSteps extends StepsOptions<any> = StepsOptions<any>, TFieldValues extends FieldValues = FieldValues, TContext extends object = object, TFieldTypes = FieldProps<TFieldValues>> extends UseStepFormReturn<TFieldValues> {
+    Field: React$1.FC<TFieldTypes & React$1.RefAttributes<FocusableElement>>;
+    FormStep: React$1.FC<FormStepProps<StepName<TSteps>>>;
+    DisplayIf: React$1.FC<DisplayIfProps<TFieldValues>>;
+    ArrayField: React$1.FC<ArrayFieldProps<TFieldValues> & React$1.RefAttributes<UseArrayFieldReturn>>;
+    ObjectField: React$1.FC<ObjectFieldProps<TFieldValues>>;
+}
+interface UseStepFormProps<TSteps extends StepsOptions<any> = StepsOptions<any>, TFieldValues extends FieldValues = FieldValues, TContext extends object = object, TFieldTypes = FieldProps<TFieldValues>> extends Omit<UseStepperProps, 'onChange'>, Omit<FormProps<any, TFieldValues, TContext, TFieldTypes>, 'children'> {
+    steps?: TSteps;
+    children: MaybeRenderProp<StepFormRenderContext<TSteps, TFieldValues, TContext, TFieldTypes>>;
 }
 interface UseStepFormReturn<TFieldValues extends FieldValues = FieldValues> extends UseStepperReturn {
     getFormProps(): {
@@ -549,7 +676,7 @@ interface UseStepFormReturn<TFieldValues extends FieldValues = FieldValues> exte
     updateStep(step: any): void;
     steps: Record<string, any>;
 }
-declare function useStepForm<TFieldValues extends FieldValues = FieldValues>(props: UseStepFormProps<TFieldValues>): UseStepFormReturn<TFieldValues>;
+declare function useStepForm<TSteps extends StepsOptions<any> = StepsOptions<any>, TFieldValues extends FieldValues = FieldValues, TContext extends object = object, TFieldTypes = FieldProps<TFieldValues>>(props: UseStepFormProps<TSteps, TFieldValues, TContext, TFieldTypes>): UseStepFormReturn<TFieldValues>;
 interface UseFormStepProps {
     name: string;
     schema?: any;
@@ -558,38 +685,97 @@ interface UseFormStepProps {
 }
 declare function useFormStep(props: UseFormStepProps): StepState;
 
-interface StepFormProps<TFieldValues extends FieldValues = FieldValues, TContext extends object = object> extends UseStepFormProps<TFieldValues> {
+interface CreateFormProps$1<FieldDefs> {
+    resolver?: GetResolver;
+    fieldResolver?: GetFieldResolver;
+    fields?: FieldDefs extends Record<string, React__default.FC<any>> ? FieldDefs : never;
+}
+type FormType<FieldDefs, ExtraProps = object, ExtraOverrides = object> = (<TSchema = unknown, TFieldValues extends FieldValues = FieldValues, TContext extends object = object>(props: WithFields<FormProps<TSchema, TFieldValues, TContext>, FieldDefs, ExtraOverrides> & {
+    ref?: React__default.ForwardedRef<HTMLFormElement>;
+} & ExtraProps) => React__default.ReactElement) & {
+    displayName?: string;
+    id?: string;
+};
+declare function createForm<FieldDefs>({ resolver, fieldResolver, fields, }?: CreateFormProps$1<FieldDefs>): FormType<FieldDefs, object, object>;
+
+interface DisplayFieldProps extends FormControlProps, Omit<FieldProps, 'type' | 'label'> {
 }
-declare const StepForm: <TFieldValues extends FieldValues>(props: StepFormProps<TFieldValues, object> & {
-    ref?: React$1.ForwardedRef<HTMLFormElement> | undefined;
-}) => React$1.ReactElement;
-interface FormStepOptions {
-    /**
-     * The step name
-     */
+/**
+ *
+ *
+ * @see Docs https://saas-ui.dev/
+ */
+declare const DisplayField: React$1.FC<DisplayFieldProps>;
+declare const FormValue: React$1.FC<{
     name: string;
-    /**
-     * Schema
-     */
-    schema?: any;
-    /**
-     * Hook Form Resolver
-     */
-    resolver?: any;
-}
-interface FormStepperProps extends StepperStepsProps, ThemingProps<'Stepper'> {
-}
-declare const FormStepper: React$1.FC<FormStepperProps>;
-interface FormStepProps extends FormStepOptions, Omit<HTMLChakraProps<'div'>, 'onSubmit'> {
-    onSubmit?: FormStepSubmitHandler;
-}
-declare const FormStep: React$1.FC<FormStepProps>;
-declare const PrevButton: React$1.FC<ButtonProps>;
-interface NextButtonProps extends Omit<ButtonProps, 'children'> {
-    submitLabel?: string;
+}>;
+
+interface Option {
+    value: string;
     label?: string;
+    [key: string]: unknown;
 }
-declare const NextButton: React$1.FC<NextButtonProps>;
+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>;
+
+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;
@@ -603,4 +789,57 @@ declare const WatchField: <Value = unknown, TFieldValues extends FieldValues = F
 type InputRightButtonProps = ButtonProps;
 declare const InputRightButton: _chakra_ui_system_dist_system_types.ComponentWithAs<"div", ButtonProps>;
 
-export { ArrayField, ArrayFieldAddButton, ArrayFieldButtonProps, ArrayFieldContainer, ArrayFieldOptions, ArrayFieldProps, ArrayFieldProvider, ArrayFieldRemoveButton, ArrayFieldRow, ArrayFieldRowContainer, ArrayFieldRowFields, ArrayFieldRowFieldsProps, ArrayFieldRowProvider, ArrayFieldRows, ArrayFieldRowsProps, As, AutoForm, AutoFormProps, BaseField, CheckboxField, CreateFormProps, DisplayField, DisplayFieldProps, DisplayIf, DisplayIfProps, Field, FieldProps, FieldResolver, FieldRules, Fields, FieldsProps, Form, FormLayout, FormLayoutProps, FormLegend, FormProps, 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, PropsOf, RadioField, RegisterFieldTypeOptions, Select, SelectField, SelectProps, StepForm, StepFormContext, StepFormProps, StepFormProvider, StepState, SubmitButton, SubmitButtonProps, SwitchField, TextareaField, UseArrayFieldReturn, UseArrayFieldRowProps, UseArrayFieldRowReturn, UseFormStepProps, UseStepFormProps, UseStepFormReturn, WatchField, WatchFieldProps, createForm, objectFieldResolver, registerFieldType, useArrayField, useArrayFieldAddButton, useArrayFieldContext, useArrayFieldRemoveButton, useArrayFieldRow, useArrayFieldRowContext, useFormStep, useStepForm, useStepFormContext, withControlledInput, withUncontrolledInput };
+/**
+ * The default BaseField component
+ * Composes the Chakra UI FormControl component, with FormLabel, FormHelperText and FormErrorMessage.
+ */
+declare const BaseField: React$1.FC<BaseFieldProps>;
+
+interface CreateFieldOptions {
+    isControlled?: boolean;
+    hideLabel?: boolean;
+    BaseField?: React$1.FC<any>;
+}
+/**
+ * Register a new field type
+ * @param type The name for this field in kebab-case, eg `email` or `array-field`
+ * @param component The React component
+ * @param options
+ * @param options.isControlled Set this to true if this is a controlled field.
+ * @param options.hideLabel Hide the field label, for example for the checkbox field.
+ */
+declare const createField: <TProps extends object>(component: React$1.FC<TProps>, options?: CreateFieldOptions) => React$1.FC<TProps & BaseFieldProps<react_hook_form.FieldValues, string>>;
+
+type StepFormType<FieldDefs, ExtraProps = object, ExtraOverrides = object> = (<TSteps extends StepsOptions<any> = StepsOptions<any>, TFieldValues extends FieldValues = FieldValues, TContext extends object = object, TFieldTypes = FieldProps<TFieldValues>>(props: UseStepFormProps<TSteps, TFieldValues, TContext, TFieldTypes> & {
+    ref?: React__default.ForwardedRef<HTMLFormElement>;
+}) => React__default.ReactElement) & {
+    displayName?: string;
+    id?: string;
+};
+interface CreateFormProps<FieldDefs> {
+    resolver?: GetResolver;
+    fieldResolver?: GetFieldResolver;
+    fields?: FieldDefs extends Record<string, React__default.FC<any>> ? FieldDefs : never;
+}
+declare function createStepForm<FieldDefs = any, ExtraProps = object, ExtraOverrides = object>({ fields, resolver, fieldResolver }?: CreateFormProps<FieldDefs>): StepFormType<FieldDefs, ExtraProps, ExtraOverrides>;
+
+/**
+ * Form component.
+ *
+ * @see Docs https://saas-ui.dev/docs/components/forms/form
+ */
+declare const Form: FormType<unknown, object, object>;
+
+/**
+ * Multi-step form component.
+ *
+ * @see Docs https://saas-ui.dev/docs/components/forms/step-form
+ */
+declare const StepForm: (<TSteps extends StepsOptions<any> = StepsOptions<any>, TFieldValues extends react_hook_form.FieldValues = react_hook_form.FieldValues, TContext extends object = object, TFieldTypes = FieldProps<TFieldValues>>(props: UseStepFormProps<TSteps, TFieldValues, TContext, TFieldTypes> & {
+    ref?: React$1.ForwardedRef<HTMLFormElement> | undefined;
+}) => React$1.ReactElement<any, string | React$1.JSXElementConstructor<any>>) & {
+    displayName?: string | undefined;
+    id?: 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$1 as CreateFormProps, DefaultFieldOverrides, DefaultFields, DisplayField, DisplayFieldProps, DisplayIf, DisplayIfProps, Field, FieldOptions, FieldProps, FieldResolver, FieldRules, FieldsProps, FieldsProvider, Form, FormComponent, FormLayout, FormLayoutProps, FormLegend, FormProps, FormProvider, FormRenderContext, FormStep, FormStepOptions, FormStepProps, FormStepSubmitHandler, FormStepper, FormStepperProps, FormType, 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, StepsOptions, SubmitButton, SubmitButtonProps, SwitchField, TextareaField, UseArrayFieldReturn, UseArrayFieldRowProps, UseArrayFieldRowReturn, UseFormStepProps, UseStepFormProps, UseStepFormReturn, WatchField, WatchFieldProps, WithFields, createField, createForm, createStepForm, defaultFieldTypes, objectFieldResolver, useArrayField, useArrayFieldAddButton, useArrayFieldContext, useArrayFieldRemoveButton, useArrayFieldRow, useArrayFieldRowContext, useField, useFormContext, useFormStep, useStepForm, useStepFormContext };