@saas-ui/forms 1.5.2 → 2.0.0-next.0

package/dist/index.d.ts

@@ -1,19 +1,606 @@
-export * from './display-field';
-export * from './field';
-export * from './fields';
-export * from './form';
-export * from './auto-form';
-export * from './layout';
-export * from './submit-button';
-export * from './array-field';
-export * from './use-array-field';
-export * from './object-field';
-export * from './display-if';
-export * from './step-form';
-export * from './use-step-form';
-export * from './field-resolver';
-export * from './watch-field';
-export * from '@saas-ui/input-right-button';
-export type { BatchFieldArrayUpdate, ChangeHandler, Control, ControllerFieldState, ControllerProps, ControllerRenderProps, CriteriaMode, CustomElement, DeepMap, DeepPartial, DeepPartialSkipArrayKey, DefaultValues, DelayCallback, EmptyObject, ErrorOption, EventType, Field as FieldDef, FieldArray, FieldArrayMethodProps, FieldArrayWithId, 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, } from 'react-hook-form';
-export { appendErrors, useController, useFieldArray, useForm, useFormContext, useFormState, useWatch, Controller, FormProvider, } from 'react-hook-form';
-//# sourceMappingURL=index.d.ts.map
+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 { MaybeRenderProp } from '@chakra-ui/react-utils';
+import { UseStepperReturn, UseStepperProps, StepperStepsProps } from '@saas-ui/core';
+
+interface NumberInputOptions {
+    /**
+     * Hide the stepper.
+     */
+    hideStepper?: boolean;
+    /**
+     * Render a custom increment icon.
+     */
+    incrementIcon?: React$1.ReactNode;
+    /**
+     * Render a custom decrement icon.
+     */
+    decrementIcon?: React$1.ReactNode;
+}
+interface NumberInputProps extends NumberInputProps$1, NumberInputOptions {
+}
+
+interface PasswordOptions {
+    viewIcon?: React__default.ReactNode;
+    viewOffIcon?: 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 RadioInputOptions {
+    options: Option$3[];
+    spacing?: SystemProps['margin'];
+    direction?: StackDirection;
+}
+interface RadioInputProps extends Omit<RadioGroupProps, 'children'>, RadioInputOptions {
+}
+
+interface Option$2 {
+    value: string;
+    label?: string;
+}
+interface SelectOptions {
+    /**
+     * An array of options
+     * If you leave this empty the children prop will be rendered.
+     */
+    options?: Option$2[];
+    /**
+     * Props passed to the MenuList.
+     */
+    menuListProps?: MenuListProps;
+    /**
+     * Customize how the value is rendered.
+     * @type (value?: string[]) => React.ReactElement
+     */
+    renderValue?: (value?: string[]) => React$1.ReactElement | undefined;
+    /**
+     * Enable multiple select.
+     */
+    multiple?: boolean;
+}
+interface SelectProps extends Omit<MenuProps, 'children'>, Pick<ButtonProps, 'isDisabled' | 'leftIcon' | 'rightIcon'>, Pick<MenuOptionGroupProps, 'onChange'>, SelectOptions {
+}
+declare const Select: _chakra_ui_system_dist_system_types.ComponentWithAs<"select", SelectProps>;
+
+interface Option$1 {
+    value: string;
+    label?: string;
+}
+interface NativeSelectOptions {
+    options?: Option$1[];
+}
+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;
+}
+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'> {
+    /**
+     * The field name
+     */
+    name: TName;
+    /**
+     * The field label
+     */
+    label?: string;
+    /**
+     * Hide the field label
+     */
+    hideLabel?: boolean;
+    /**
+     * Field help text
+     */
+    help?: string;
+    /**
+     * React hook form rules
+     */
+    rules?: Omit<RegisterOptions<TFieldValues, TName>, 'valueAsNumber' | 'valueAsDate' | 'setValueAs' | 'disabled'>;
+    /**
+     * 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.
+     */
+    type?: string;
+    /**
+     * The input placeholder
+     */
+    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 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;
+};
+
+interface DisplayFieldProps extends FormControlProps, Omit<FieldProps, 'type' | 'label'> {
+}
+declare const DisplayField: React$1.FC<DisplayFieldProps>;
+declare const FormValue: React$1.FC<{
+    name: string;
+}>;
+
+type FieldResolver = {
+    getFields(): FieldProps[];
+    getNestedFields(name: string): FieldProps[];
+};
+interface SchemaField extends FieldProps {
+    items?: SchemaField[];
+    properties?: Record<string, SchemaField>;
+}
+type ObjectSchema = Record<string, SchemaField>;
+declare const objectFieldResolver: (schema: ObjectSchema) => FieldResolver;
+
+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> {
+}
+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;
+};
+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;
+}
+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
+ *
+ * Renders form items in a `SimpleGrid`
+ * @see https://chakra-ui.com/docs/layout/simple-grid
+ */
+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
+     */
+    name: string;
+    /**
+     * The default value for new items
+     */
+    defaultValue: Record<string, any>;
+    /**
+     * Min amount of items
+     */
+    min?: number;
+    /**
+     * Max amount of items
+     */
+    max?: number;
+}
+declare const ArrayFieldProvider: React$1.Provider<UseArrayFieldReturn>;
+declare const useArrayFieldContext: () => UseArrayFieldReturn;
+interface UseArrayFieldRowReturn {
+    /**
+     * Name of the array field including the index, eg 'field.0'
+     */
+    name: string;
+    /**
+     * The field index
+     */
+    index: number;
+    /**
+     * Remove this array item
+     */
+    remove: () => void;
+    /**
+     * True if this is the first item
+     */
+    isFirst: boolean;
+    /**
+     * True if this is the last item
+     */
+    isLast: boolean;
+}
+declare const ArrayFieldRowProvider: React$1.Provider<UseArrayFieldRowReturn>;
+declare const useArrayFieldRowContext: () => UseArrayFieldRowReturn;
+interface ArrayFieldOptions {
+    /**
+     * The field name
+     */
+    name: string;
+    /**
+     * Default value for new values in the array
+     */
+    defaultValue?: Record<string, any>;
+    /**
+     * Default key name for rows, change this if your data uses a different 'id' field
+     * @default "id"
+     */
+    keyName?: string;
+    min?: number;
+    max?: number;
+}
+declare const useArrayField: ({ name, defaultValue, keyName, min, max, }: ArrayFieldOptions) => {
+    name: string;
+    defaultValue: Record<string, any>;
+    min: number | undefined;
+    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>;
+    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>;
+    fields: Record<string, string>[];
+};
+interface UseArrayFieldRowProps {
+    index: number;
+}
+declare const useArrayFieldRow: ({ index }: UseArrayFieldRowProps) => {
+    index: number;
+    isFirst: boolean;
+    isLast: boolean;
+    name: string;
+    remove: () => void;
+};
+declare const useArrayFieldRemoveButton: () => {
+    onClick: () => void;
+    isDisabled: boolean;
+};
+declare const useArrayFieldAddButton: () => {
+    onClick: () => void;
+    isDisabled: boolean;
+};
+
+interface ArrayFieldButtonProps extends ButtonProps {
+}
+interface ArrayFieldRowProps extends FormLayoutProps {
+    /**
+     * Amount of field columns
+     */
+    columns?: ResponsiveValue<number>;
+    /**
+     * Spacing between fields
+     */
+    spacing?: ResponsiveValue<string | number>;
+    /**
+     * The array index
+     */
+    index: number;
+    /**
+     * The fields
+     */
+    children: React$1.ReactNode;
+}
+declare const ArrayFieldRow: React$1.FC<ArrayFieldRowProps>;
+interface ArrayFieldRowFieldsProps extends FormLayoutProps {
+    /**
+     * Amount of field columns
+     */
+    columns?: ResponsiveValue<number>;
+    /**
+     * Spacing between fields
+     */
+    spacing?: ResponsiveValue<string | number>;
+    /**
+     * The fields
+     */
+    children: React$1.ReactNode;
+}
+declare const ArrayFieldRowFields: React$1.FC<ArrayFieldRowFieldsProps>;
+declare const ArrayFieldRowContainer: React$1.FC<ArrayFieldRowProps>;
+declare const ArrayFieldRemoveButton: React$1.FC<ArrayFieldButtonProps>;
+declare const ArrayFieldAddButton: React$1.FC<ArrayFieldButtonProps>;
+interface ArrayFieldProps extends ArrayFieldOptions, Omit<FieldProps, 'defaultValue'> {
+}
+interface ArrayField {
+    id: string;
+    [key: string]: unknown;
+}
+declare const ArrayField: ((props: ArrayFieldProps & {
+    ref?: React$1.ForwardedRef<UseArrayFieldReturn>;
+}) => React$1.ReactElement) & {
+    displayName: string;
+};
+interface ArrayFieldRowsProps {
+    children: (fields: ArrayField[]) => React$1.ReactElement | null;
+}
+declare const ArrayFieldRows: {
+    ({ children, }: ArrayFieldRowsProps): React$1.ReactElement | null;
+    displayName: string;
+};
+declare const ArrayFieldContainer: React$1.ForwardRefExoticComponent<ArrayFieldProps & React$1.RefAttributes<UseArrayFieldReturn>>;
+
+interface ObjectFieldProps extends FieldProps {
+    name: string;
+    children: React$1.ReactNode;
+    columns?: ResponsiveValue<number>;
+    spacing?: ResponsiveValue<string | number>;
+}
+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;
+}
+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;
+};
+
+interface StepState {
+    name: string;
+    schema?: any;
+    resolver?: any;
+    isActive?: boolean;
+    isCompleted?: boolean;
+    onSubmit?: FormStepSubmitHandler;
+}
+type FormStepSubmitHandler<TFieldValues extends FieldValues = FieldValues> = (data: TFieldValues, stepper: UseStepperReturn) => Promise<void>;
+interface StepFormContext extends UseStepperReturn {
+    updateStep(state: StepState): void;
+    steps: Record<string, StepState>;
+}
+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>>;
+}
+interface UseStepFormReturn<TFieldValues extends FieldValues = FieldValues> extends UseStepperReturn {
+    getFormProps(): {
+        onSubmit: SubmitHandler<TFieldValues>;
+        schema?: any;
+        resolver?: any;
+    };
+    updateStep(step: any): void;
+    steps: Record<string, any>;
+}
+declare function useStepForm<TFieldValues extends FieldValues = FieldValues>(props: UseStepFormProps<TFieldValues>): UseStepFormReturn<TFieldValues>;
+interface UseFormStepProps {
+    name: string;
+    schema?: any;
+    resolver?: any;
+    onSubmit?: FormStepSubmitHandler;
+}
+declare function useFormStep(props: UseFormStepProps): StepState;
+
+interface StepFormProps<TFieldValues extends FieldValues = FieldValues, TContext extends object = object> extends UseStepFormProps<TFieldValues> {
+}
+declare const StepForm: <TFieldValues extends FieldValues>(props: StepFormProps<TFieldValues, object> & {
+    ref?: React$1.ForwardedRef<HTMLFormElement> | undefined;
+}) => React$1.ReactElement;
+interface FormStepOptions {
+    /**
+     * The step name
+     */
+    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;
+    label?: string;
+}
+declare const NextButton: React$1.FC<NextButtonProps>;
+
+interface WatchFieldProps<Value = unknown, TFieldValues extends FieldValues = FieldValues> {
+    name: string;
+    defaultValue?: Value;
+    isDisabled?: boolean;
+    isExact?: boolean;
+    children: (value: Value, form: UseFormReturn<TFieldValues>) => React.ReactElement | void;
+}
+declare const WatchField: <Value = unknown, TFieldValues extends FieldValues = FieldValues>(props: WatchFieldProps<Value, TFieldValues>) => React$1.ReactElement<any, string | React$1.JSXElementConstructor<any>> | null;
+
+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 };