@ultraviolet/form 2.0.0-next.5 → 2.0.0-next.7

package/dist/index.d.ts

@@ -1,51 +1,111 @@
-import * as _emotion_react_jsx_runtime from '@emotion/react/jsx-runtime';
-import { Checkbox, CheckboxGroup, DateInput, Radio, SelectableCard, NumberInput, TagInput, TimeInput, Toggle, Button, RadioGroup } from '@ultraviolet/ui';
+export { FieldArray, useFieldArray } from 'react-final-form-arrays';
+import { FieldSubscription, AnyObject, FieldValidator, FieldState } from 'final-form';
+export { FORM_ERROR, FormApi } from 'final-form';
+import { UseFieldConfig, FieldMetaState, FormRenderProps, FormProps as FormProps$1 } from 'react-final-form';
+export { Field, FormSpy, useField, useForm, useFormState } from 'react-final-form';
 import * as react from 'react';
-import { ComponentProps, ReactNode, FocusEvent, ForwardedRef, FocusEventHandler, JSX } from 'react';
-import * as react_hook_form from 'react-hook-form';
-import { FieldValues, FieldPath, Validate, PathValue, Path, UseControllerProps, FieldError, UseFormReturn, DefaultValues, FieldErrors, FieldPathValue, DeepPartial, ArrayPath, FieldArray } from 'react-hook-form';
-export { ControllerRenderProps, DeepPartial, FieldErrors, FieldPath, FieldValues, Path, PathValue, UseFieldArrayMove, UseFieldArrayRemove, UseFormReturn, UseFormSetValue, useController, useFieldArray, useForm, useFormContext, useFormState, useWatch } from 'react-hook-form';
+import { ReactNode, ComponentProps, FocusEvent, ForwardedRef, FocusEventHandler } from 'react';
+import * as _emotion_react_jsx_runtime from '@emotion/react/jsx-runtime';
+import { CheckboxGroup, DateInput, Radio, SelectInput, SelectableCard, NumberInput, TagInput, TextInput, TimeInput, Toggle, Button, RadioGroup } from '@ultraviolet/ui';
 import { CSSObject, Theme, css } from '@emotion/react';
-import Select, { OptionProps, GroupBase, Props, CommonProps } from 'react-select';
+import Select, { GroupBase, OptionProps, Props, CommonProps } from 'react-select';
 
-declare const FORM_ERROR = "FINAL_FORM/form-error";
-
-type MetaField = {
-    min?: number | string;
-    max?: number | string;
+type FormErrorFunctionParams<InputValue = unknown> = {
+    label: string;
+    name: string;
+    value: InputValue;
+    allValues: AnyObject;
+    meta?: FieldMetaState<InputValue>;
+};
+type RequiredErrors = {
+    TOO_LOW: ((params: FormErrorFunctionParams & {
+        min: number;
+    }) => string) | string;
+    TOO_HIGH: ((params: FormErrorFunctionParams & {
+        max: number;
+    }) => string) | string;
+    MIN_LENGTH: ((params: FormErrorFunctionParams & {
+        minLength: number;
+    }) => string) | string;
+    MAX_LENGTH: ((params: FormErrorFunctionParams & {
+        maxLength: number;
+    }) => string) | string;
+    REGEX: ((params: FormErrorFunctionParams & {
+        regex: (RegExp | RegExp[])[];
+    }) => string) | string;
+    REQUIRED: ((params: FormErrorFunctionParams) => string) | string;
+    MAX_DATE: ((params: FormErrorFunctionParams & {
+        maxDate: Date;
+    }) => string) | string;
+    MIN_DATE: ((params: FormErrorFunctionParams & {
+        minDate: Date;
+    }) => string) | string;
+};
+type FormErrors = RequiredErrors;
+type ValidatorProps = {
+    required?: boolean;
+    min?: number;
     minLength?: number;
+    max?: number;
     maxLength?: number;
     regex?: (RegExp | RegExp[])[];
-    minDate?: Date;
     maxDate?: Date;
-    label: string;
-    value?: string | number;
-};
-type RequiredErrors = {
-    [key in FieldError['type']]: (params: MetaField) => string;
-};
-type FormErrors = {
-    [key in 'required' | 'min' | 'max' | 'minLength' | 'maxLength' | 'pattern' | 'minDate' | 'maxDate']: RequiredErrors[key];
+    minDate?: Date;
 };
-type BaseFieldProps<TFieldValues extends FieldValues = FieldValues> = {
-    name: FieldPath<TFieldValues>;
-    required?: boolean;
-    validate?: Validate<PathValue<TFieldValues, Path<TFieldValues>>, TFieldValues>;
-    rules?: UseControllerProps<TFieldValues>['rules'];
-    defaultValue?: PathValue<TFieldValues, Path<TFieldValues>>;
-    label?: string;
-    value?: PathValue<TFieldValues, Path<TFieldValues>>;
+type ValidatorObject<InputValue = unknown> = {
+    validate: (value: InputValue, allValues?: AnyObject, meta?: FieldMetaState<InputValue>) => boolean;
+    error: keyof RequiredErrors;
+};
+type BaseFieldProps<FieldValue, InputValue = unknown> = {
+    parse?: UseFieldConfig<FieldValue, InputValue>['parse'];
+    format?: UseFieldConfig<FieldValue, InputValue>['format'];
+    formatOnBlur?: boolean;
+    subscription?: FieldSubscription;
+    validateFields?: string[];
+    defaultValue?: FieldValue;
+    data?: AnyObject;
+    allowNull?: boolean;
+    initialValue?: FieldValue;
+    multiple?: boolean;
+    isEqual?: (a: InputValue, b: InputValue) => boolean;
+    validate?: FieldValidator<FieldValue>;
+    afterSubmit?: () => void;
+    beforeSubmit?: () => void | boolean;
+    value?: FieldValue;
 };
 
-type CheckboxFieldProps<TFieldValues extends FieldValues> = BaseFieldProps<TFieldValues> & Partial<Pick<ComponentProps<typeof Checkbox>, 'disabled' | 'onBlur' | 'onChange' | 'onFocus' | 'progress' | 'size' | 'data-testid' | 'helper' | 'tooltip'>> & {
-    className?: string;
+declare const CheckboxField: react.ForwardRefExoticComponent<BaseFieldProps<string, string> & Partial<Pick<({
+    error?: ReactNode;
+    size?: number | undefined;
+    progress?: boolean | undefined;
+    helper?: ReactNode;
+    disabled?: boolean | undefined;
+    checked?: boolean | "indeterminate" | undefined;
+    className?: string | undefined;
+    "data-visibility"?: string | undefined;
+    required?: boolean | undefined;
+    'data-testid'?: string | undefined;
+    tooltip?: string | undefined;
+} & Pick<react.InputHTMLAttributes<HTMLInputElement>, "name" | "value" | "onFocus" | "onBlur" | "autoFocus" | "id" | "onChange"> & (({
+    "aria-label"?: undefined;
+} & {
+    children: ReactNode;
+}) | ({
+    children?: undefined;
+} & {
+    'aria-label': string;
+}))) & react.RefAttributes<HTMLInputElement>, "value" | "disabled" | "onFocus" | "onBlur" | "onChange" | "progress" | "size" | "data-testid" | "helper" | "tooltip">> & {
+    name: string;
+    label?: string | undefined;
+    className?: string | undefined;
     children?: ReactNode;
-};
-declare const CheckboxField: <TFieldValues extends FieldValues>({ name, label, size, progress, disabled, required, className, children, onChange, onBlur, onFocus, rules, helper, tooltip, "data-testid": dataTestId, value, }: CheckboxFieldProps<TFieldValues>) => _emotion_react_jsx_runtime.JSX.Element;
+    required?: boolean | undefined;
+} & react.RefAttributes<HTMLInputElement>>;
 
-type CheckboxGroupFieldProps<TFieldValues extends FieldValues> = BaseFieldProps<TFieldValues> & Partial<Pick<ComponentProps<typeof CheckboxGroup>, 'className' | 'helper' | 'onChange' | 'required' | 'direction' | 'children' | 'error' | 'legend'>> & Required<Pick<ComponentProps<typeof CheckboxGroup>, 'legend'>>;
+type CheckboxGroupValue = string[];
+type CheckboxGroupFieldProps<T = CheckboxGroupValue, K = string> = BaseFieldProps<T, K> & Partial<Pick<ComponentProps<typeof CheckboxGroup>, 'className' | 'helper' | 'onChange' | 'required' | 'direction' | 'children' | 'value' | 'error' | 'legend'>> & Required<Pick<ComponentProps<typeof CheckboxGroup>, 'legend' | 'name'>>;
 declare const CheckboxGroupField: {
-    <TFieldValues extends FieldValues>({ legend, className, helper, direction, children, onChange, label, error: customError, name, required, }: CheckboxGroupFieldProps<TFieldValues>): _emotion_react_jsx_runtime.JSX.Element;
+    ({ legend, value, className, helper, direction, children, onChange, error: customError, name, required, }: CheckboxGroupFieldProps): _emotion_react_jsx_runtime.JSX.Element;
     Checkbox: ({ onFocus, onBlur, disabled, error, name, value, children, helper, className, autoFocus, "data-testid": dataTestId, }: Omit<({
         error?: react.ReactNode;
         size?: number | undefined;
@@ -58,7 +118,7 @@ declare const CheckboxGroupField: {
         required?: boolean | undefined;
         'data-testid'?: string | undefined;
         tooltip?: string | undefined;
-    } & Pick<react.InputHTMLAttributes<HTMLInputElement>, "value" | "onChange" | "onBlur" | "onFocus" | "name" | "autoFocus" | "id"> & (({
+    } & Pick<react.InputHTMLAttributes<HTMLInputElement>, "name" | "value" | "onFocus" | "onBlur" | "autoFocus" | "id" | "onChange"> & (({
         "aria-label"?: undefined;
     } & {
         children: react.ReactNode;
@@ -71,7 +131,9 @@ declare const CheckboxGroupField: {
     }) => _emotion_react_jsx_runtime.JSX.Element;
 };
 
-type DateFieldProps<TFieldValues extends FieldValues> = BaseFieldProps<TFieldValues> & Omit<ComponentProps<typeof DateInput>, 'maxDate' | 'minDate' | 'disabled' | 'required' | 'locale' | 'name' | 'onChange' | 'onFocus' | 'onBlur' | 'autoFocus' | 'stardDate' | 'endDate'> & {
+type DateExtends = Date | [Date | null, Date | null];
+type DateFieldProps = BaseFieldProps<DateExtends> & Omit<ComponentProps<typeof DateInput>, 'maxDate' | 'minDate' | 'disabled' | 'required' | 'locale' | 'name' | 'onChange' | 'onFocus' | 'onBlur' | 'autoFocus' | 'startDate' | 'endDate'> & {
+    name: string;
     maxDate?: Date;
     minDate?: Date;
     disabled?: boolean;
@@ -82,58 +144,36 @@ type DateFieldProps<TFieldValues extends FieldValues> = BaseFieldProps<TFieldVal
     onFocus?: (value: FocusEvent<HTMLElement>) => void;
     autoFocus?: boolean;
 };
-declare const DateField: <TFieldValues extends FieldValues>({ required, name, label, format, locale, maxDate, minDate, disabled, onChange, onBlur, onFocus, rules, autoFocus, excludeDates, selectsRange, "data-testid": dataTestId, }: DateFieldProps<TFieldValues>) => _emotion_react_jsx_runtime.JSX.Element;
+declare const DateField: ({ required, name, label, validate, format, locale, maxDate, minDate, initialValue, disabled, value: inputVal, onChange, onBlur, onFocus, formatOnBlur, autoFocus, excludeDates, selectsRange, "data-testid": dataTestId, }: DateFieldProps) => _emotion_react_jsx_runtime.JSX.Element;
 
-type Without<T, U> = {
-    [P in Exclude<keyof T, keyof U>]?: never;
-};
-type SingleXOR<T, U> = T | U extends object ? (Without<T, U> & U) | (Without<U, T> & T) : T | U;
-type XOR<T extends unknown[]> = T extends [infer Only] ? Only : T extends [infer A, infer B, ...infer Rest] ? XOR<[SingleXOR<A, B>, ...Rest]> : never;
-type FormStateReturn<TFormValues extends FieldValues> = {
-    values: TFormValues;
-    hasValidationErrors: boolean;
-    errors: FieldErrors<TFormValues>;
-    submitting: boolean;
-    pristine: boolean;
-    handleSubmit: () => Promise<void>;
-    submitError: boolean;
-    valid: boolean;
-    form: {
-        change: UseFormReturn<TFormValues>['setValue'];
-        reset: UseFormReturn<TFormValues>['reset'];
-        submit: () => Promise<void>;
-    };
-};
-type OnRawSubmitReturn = {
-    [FORM_ERROR]?: string;
-} | undefined | null | string | void | boolean | number;
-type FormProps<TFormValues extends FieldValues = FieldValues> = {
-    children?: ((props: FormStateReturn<TFormValues>) => ReactNode) | ReactNode;
+type FormProps<FormValues = unknown> = {
+    children?: ((props: FormRenderProps<FormValues, Partial<FormValues>>) => ReactNode) | ReactNode;
     errors: FormErrors;
+    /**
+     * onRawSubmit is the base onSubmit from final-form
+     */
+    onRawSubmit: FormProps$1<FormValues, Partial<FormValues>>['onSubmit'];
+    initialValues?: Partial<FormValues>;
+    validateOnBlur?: FormProps$1<FormValues, Partial<FormValues>>['validateOnBlur'];
+    validate?: FormProps$1<FormValues, Partial<FormValues>>['validate'];
+    /**
+     * The form name attribute
+     */
     name?: string;
-    onRawSubmit: (data: TFormValues, formState: {
-        reset: UseFormReturn<TFormValues>['reset'];
-        resetFieldState: UseFormReturn<TFormValues>['resetField'];
-        restart: () => void;
-        change: UseFormReturn<TFormValues>['setValue'];
-    }) => Promise<OnRawSubmitReturn> | OnRawSubmitReturn;
-} & XOR<[
-    {
-        /**
-         * @deprecated
-         */
-        initialValues?: DefaultValues<TFormValues>;
-    },
-    {
-        methods: UseFormReturn<TFormValues>;
-    }
-]>;
-declare const Form: <TFormValues extends FieldValues>({ children, methods: methodsProp, initialValues, errors, onRawSubmit, name, }: FormProps<TFormValues>) => _emotion_react_jsx_runtime.JSX.Element;
+    render?: FormProps$1<FormValues, Partial<FormValues>>['render'];
+    mutators?: FormProps$1<FormValues, Partial<FormValues>>['mutators'];
+    keepDirtyOnReinitialize?: boolean;
+    className?: string;
+};
+declare const Form: <FormValues>({ children, onRawSubmit, errors, initialValues, validateOnBlur, validate, name, render, mutators, keepDirtyOnReinitialize, className, }: FormProps<FormValues>) => _emotion_react_jsx_runtime.JSX.Element;
 
-type RadioFieldProps<TFieldValues extends FieldValues> = Omit<BaseFieldProps<TFieldValues>, 'label'> & Partial<Pick<ComponentProps<typeof Radio>, 'disabled' | 'id' | 'onBlur' | 'onChange' | 'onFocus' | 'data-testid' | 'tooltip' | 'label'>> & {
+type RadioValue$1 = NonNullable<ComponentProps<typeof Radio>['value']>;
+type RadioFieldProps<T = RadioValue$1, K = string> = BaseFieldProps<T, K> & Partial<Pick<ComponentProps<typeof Radio>, 'disabled' | 'id' | 'onBlur' | 'onChange' | 'onFocus' | 'value' | 'data-testid' | 'label' | 'tooltip'>> & {
     className?: string;
+    name: string;
+    required?: boolean;
 };
-declare const RadioField: <TFieldValues extends FieldValues>({ className, "data-testid": dataTestId, disabled, id, name, onBlur, label, onChange, onFocus, required, value, rules, tooltip, }: RadioFieldProps<TFieldValues>) => _emotion_react_jsx_runtime.JSX.Element;
+declare const RadioField: ({ className, "data-testid": dataTestId, disabled, id, label, name, onBlur, onChange, onFocus, required, validate, value, tooltip, }: RadioFieldProps) => _emotion_react_jsx_runtime.JSX.Element;
 
 type SelectOption = {
     value: string;
@@ -175,7 +215,7 @@ type SelectProps = StyledContainerProps & Omit<Props<SelectOption>, 'value'> & C
     time?: boolean;
 };
 type StateManagedSelect = typeof Select;
-type SelectInputProps = Partial<SelectProps & SelectStyleProps & {
+type SelectInputProps = Partial<SelectProps & SelectStyleProps & Pick<ComponentProps<typeof SelectInput>, 'data-testid'> & {
     /**
      * Name of the animation
      */
@@ -194,15 +234,16 @@ type SelectInputProps = Partial<SelectProps & SelectStyleProps & {
     children: ReactNode;
     emptyState?: ComponentProps<Select>['noOptionsMessage'];
 }>;
-type SelectInputFieldProps<TFieldValues extends FieldValues = FieldValues> = BaseFieldProps<TFieldValues> & Partial<Pick<SelectInputProps, 'animation' | 'animationDuration' | 'animationOnChange' | 'children' | 'className' | 'disabled' | 'error' | 'id' | 'inputId' | 'isClearable' | 'isLoading' | 'isSearchable' | 'menuPortalTarget' | 'onBlur' | 'onChange' | 'onFocus' | 'options' | 'placeholder' | 'readOnly' | 'required' | 'value' | 'noTopLabel' | 'noOptionsMessage' | 'customStyle'>> & {
-    multiple?: boolean;
-    parse?: (value: unknown, name?: string) => unknown;
-    format?: (value: unknown, name: string) => unknown;
+type SelectInputOptions = SelectProps['options'];
+type SelectInputOptionOrGroup = NonNullable<SelectInputOptions>[number];
+type SelectInputFieldProps<T extends SelectInputOptionOrGroup = SelectInputOptionOrGroup> = BaseFieldProps<T> & Pick<SelectInputProps, 'animation' | 'animationDuration' | 'animationOnChange' | 'children' | 'className' | 'disabled' | 'error' | 'id' | 'inputId' | 'isClearable' | 'isLoading' | 'isSearchable' | 'menuPortalTarget' | 'onBlur' | 'onChange' | 'onFocus' | 'options' | 'placeholder' | 'readOnly' | 'required' | 'value' | 'noTopLabel' | 'noOptionsMessage' | 'customStyle' | 'data-testid'> & {
+    label?: string;
     maxLength?: number;
     minLength?: number;
+    name: string;
 };
 declare const SelectInputField: {
-    <TFieldValues extends FieldValues>({ animation, animationDuration, animationOnChange, children, className, disabled, format: formatProp, id, inputId, isClearable, isLoading, isSearchable, label, maxLength, menuPortalTarget, minLength, multiple, name, onBlur, onChange, onFocus, options: optionsProp, parse: parseProp, placeholder, readOnly, required, rules, noTopLabel, noOptionsMessage, customStyle, }: SelectInputFieldProps<TFieldValues>): _emotion_react_jsx_runtime.JSX.Element;
+    <T extends (SelectOption | GroupBase<SelectOption>) & (SelectOption | GroupBase<SelectOption>) = (SelectOption | GroupBase<SelectOption>) & (SelectOption | GroupBase<SelectOption>)>({ animation, animationDuration, animationOnChange, children, className, disabled, error: errorProp, format: formatProp, formatOnBlur, id, inputId, isClearable, isLoading, isSearchable, label, maxLength, menuPortalTarget, minLength, multiple, name, onBlur, onChange, onFocus, options: optionsProp, parse: parseProp, placeholder, readOnly, required, value, noTopLabel, noOptionsMessage, customStyle, validate, "data-testid": dataTestId, }: SelectInputFieldProps<T>): _emotion_react_jsx_runtime.JSX.Element;
     Option: (props: Partial<OptionProps<{
         value: string;
         label: ReactNode;
@@ -224,25 +265,36 @@ declare const SelectInputField: {
     }>) => react.JSX.Element;
 };
 
-type SelectableCardFieldProps<TFieldValues extends FieldValues> = Omit<BaseFieldProps<TFieldValues>, 'label'> & Partial<Pick<ComponentProps<typeof SelectableCard>, 'disabled' | 'onBlur' | 'onChange' | 'onFocus' | 'showTick' | 'type' | 'id' | 'children' | 'tooltip' | 'label'>> & {
+type SelectableCardValue = NonNullable<ComponentProps<typeof SelectableCard>['value']>;
+type SelectableCardFieldProps<T = SelectableCardValue, K = string> = BaseFieldProps<T, K> & Partial<Pick<ComponentProps<typeof SelectableCard>, 'disabled' | 'onBlur' | 'onChange' | 'onFocus' | 'value' | 'showTick' | 'type' | 'id' | 'children' | 'name' | 'tooltip' | 'label' | 'data-testid'>> & {
+    name: string;
+    required?: boolean;
     className?: string;
 };
-declare const SelectableCardField: <TFieldValues extends FieldValues>({ name, value, onChange, showTick, type, disabled, children, className, onFocus, onBlur, required, tooltip, id, label, rules, }: SelectableCardFieldProps<TFieldValues>) => _emotion_react_jsx_runtime.JSX.Element;
+declare const SelectableCardField: ({ name, value, onChange, showTick, type, disabled, children, className, onFocus, onBlur, required, validate, tooltip, id, label, "data-testid": dataTestId, }: SelectableCardFieldProps) => _emotion_react_jsx_runtime.JSX.Element;
 
-type NumberInputValueFieldProps<TFieldValues extends FieldValues> = BaseFieldProps<TFieldValues> & Partial<Pick<ComponentProps<typeof NumberInput>, 'disabled' | 'maxValue' | 'minValue' | 'onMaxCrossed' | 'onMinCrossed' | 'size' | 'step' | 'text' | 'onChange' | 'className'>> & {
+type NumberInputValue = NonNullable<ComponentProps<typeof NumberInput>['value']>;
+type NumberInputValueFieldProps<T = NumberInputValue, K = string> = BaseFieldProps<T, K> & Partial<Pick<ComponentProps<typeof NumberInput>, 'disabled' | 'maxValue' | 'minValue' | 'onMaxCrossed' | 'onMinCrossed' | 'size' | 'step' | 'text' | 'value' | 'onChange' | 'className' | 'data-testid'>> & {
+    name: string;
+    required?: boolean;
     onBlur?: FocusEventHandler<HTMLInputElement>;
     onFocus?: FocusEventHandler<HTMLInputElement>;
 };
-declare const NumberInputField: <TFieldValues extends FieldValues>({ disabled, maxValue, minValue, name, onChange, onBlur, onFocus, onMaxCrossed, onMinCrossed, required, size, step, text, rules, className, label, }: NumberInputValueFieldProps<TFieldValues>) => _emotion_react_jsx_runtime.JSX.Element;
+declare const NumberInputField: ({ disabled, maxValue, minValue, name, onChange, onBlur, onFocus, onMaxCrossed, onMinCrossed, required, size, step, text, validate, value, className, "data-testid": dataTestId, }: NumberInputValueFieldProps) => _emotion_react_jsx_runtime.JSX.Element;
 
-declare const SubmitErrorAlert: ({ className }: {
+declare const SubmitErrorAlert: <FormValues>({ className, }: {
     className?: string | undefined;
-}) => _emotion_react_jsx_runtime.JSX.Element | null;
+}) => _emotion_react_jsx_runtime.JSX.Element;
 
-type TagInputFieldProps<TFieldValues extends FieldValues = FieldValues> = BaseFieldProps<TFieldValues> & Partial<Pick<ComponentProps<typeof TagInput>, 'tags' | 'variant' | 'onChange' | 'placeholder' | 'disabled' | 'className' | 'id'>>;
-declare const TagInputField: <TFieldValues extends FieldValues>({ className, disabled, id, name, onChange, placeholder, required, rules, variant, }: TagInputFieldProps<TFieldValues>) => _emotion_react_jsx_runtime.JSX.Element;
+type TagInputProp = ComponentProps<typeof TagInput>['tags'];
+type TagInputFieldProps<T = TagInputProp, K = string> = BaseFieldProps<T, K> & Partial<Pick<ComponentProps<typeof TagInput>, 'tags' | 'variant' | 'onChange' | 'placeholder' | 'disabled' | 'className' | 'id' | 'data-testid'>> & {
+    name: string;
+    required?: boolean;
+};
+declare const TagInputField: ({ className, "data-testid": dataTestId, disabled, id, name, onChange, placeholder, required, tags, validate, variant, }: TagInputFieldProps) => _emotion_react_jsx_runtime.JSX.Element;
 
-declare const TextInputField: react.ForwardRefExoticComponent<BaseFieldProps<FieldValues> & Partial<Pick<({
+type TextInputValue = NonNullable<ComponentProps<typeof TextInput>['value']>;
+declare const TextInputField: react.ForwardRefExoticComponent<BaseFieldProps<TextInputValue, string> & Partial<Pick<({
     'data-testid'?: string | undefined;
     ariaControls?: string | undefined;
     autoComplete?: string | undefined;
@@ -281,32 +333,33 @@ declare const TextInputField: react.ForwardRefExoticComponent<BaseFieldProps<Fie
     value?: string | number | undefined;
     wrap?: string | undefined;
     inputProps?: {
-        type?: react.HTMLInputTypeAttribute | undefined;
+        error?: boolean | undefined;
+        name?: string | undefined;
+        value?: string | number | readonly string[] | undefined;
         required?: boolean | undefined;
         min?: string | number | undefined;
+        minLength?: number | undefined;
         max?: string | number | undefined;
         maxLength?: number | undefined;
-        minLength?: number | undefined;
-        value?: string | number | readonly string[] | undefined;
-        onChange?: react.ChangeEventHandler<HTMLInputElement> | undefined;
-        onBlur?: react.FocusEventHandler<HTMLInputElement> | undefined;
         disabled?: boolean | undefined;
-        pattern?: string | undefined;
+        defaultValue?: string | number | readonly string[] | undefined;
+        multiple?: boolean | undefined;
+        type?: react.HTMLInputTypeAttribute | undefined;
         children?: react.ReactNode;
         className?: string | undefined;
-        form?: string | undefined;
-        slot?: string | undefined;
-        style?: react.CSSProperties | undefined;
-        title?: string | undefined;
         onFocus?: react.FocusEventHandler<HTMLInputElement> | undefined;
-        name?: string | undefined;
+        onBlur?: react.FocusEventHandler<HTMLInputElement> | undefined;
         autoFocus?: boolean | undefined;
         id?: string | undefined;
+        onChange?: react.ChangeEventHandler<HTMLInputElement> | undefined;
         "aria-label"?: string | undefined;
+        form?: string | undefined;
+        slot?: string | undefined;
+        style?: react.CSSProperties | undefined;
+        title?: string | undefined;
+        pattern?: string | undefined;
         size?: number | undefined;
-        error?: boolean | undefined;
         checked?: boolean | undefined;
-        defaultValue?: string | number | readonly string[] | undefined;
         onSubmit?: react.FormEventHandler<HTMLInputElement> | undefined;
         autoComplete?: string | undefined;
         defaultChecked?: boolean | undefined;
@@ -320,7 +373,6 @@ declare const TextInputField: react.ForwardRefExoticComponent<BaseFieldProps<Fie
         hidden?: boolean | undefined;
         lang?: string | undefined;
         nonce?: string | undefined;
-        placeholder?: string | undefined;
         spellCheck?: (boolean | "false" | "true") | undefined;
         tabIndex?: number | undefined;
         translate?: "yes" | "no" | undefined;
@@ -368,7 +420,7 @@ declare const TextInputField: react.ForwardRefExoticComponent<BaseFieldProps<Fie
         "aria-description"?: string | undefined;
         "aria-details"?: string | undefined;
         "aria-disabled"?: (boolean | "false" | "true") | undefined;
-        "aria-dropeffect"?: "link" | "none" | "copy" | "execute" | "move" | "popup" | undefined;
+        "aria-dropeffect"?: "link" | "move" | "none" | "copy" | "execute" | "popup" | undefined;
         "aria-errormessage"?: string | undefined;
         "aria-expanded"?: (boolean | "false" | "true") | undefined;
         "aria-flowto"?: string | undefined;
@@ -564,11 +616,11 @@ declare const TextInputField: react.ForwardRefExoticComponent<BaseFieldProps<Fie
         onAnimationIterationCapture?: react.AnimationEventHandler<HTMLInputElement> | undefined;
         onTransitionEnd?: react.TransitionEventHandler<HTMLInputElement> | undefined;
         onTransitionEndCapture?: react.TransitionEventHandler<HTMLInputElement> | undefined;
+        placeholder?: string | undefined;
         height?: string | number | undefined;
         width?: string | number | undefined;
-        list?: string | undefined;
         readOnly?: boolean | undefined;
-        multiple?: boolean | undefined;
+        list?: string | undefined;
         step?: string | number | undefined;
         accept?: string | undefined;
         alt?: string | undefined;
@@ -589,27 +641,24 @@ declare const TextInputField: react.ForwardRefExoticComponent<BaseFieldProps<Fie
     } | undefined;
     max?: string | number | undefined;
     min?: string | number | undefined;
-} & (Omit<react.InputHTMLAttributes<HTMLInputElement>, "onChange"> | Omit<react.TextareaHTMLAttributes<HTMLTextAreaElement>, "onChange">)) & react.RefAttributes<HTMLInputElement | HTMLTextAreaElement | null>, "type" | "min" | "max" | "maxLength" | "minLength" | "onChange" | "onBlur" | "disabled" | "onFocus" | "autoFocus" | "id" | "size" | "autoComplete" | "placeholder" | "autoCapitalize" | "autoCorrect" | "autoSave" | "onKeyDown" | "onKeyUp" | "readOnly" | "noTopLabel" | "cols" | "rows" | "fillAvailable" | "generated" | "multiline" | "notice" | "random" | "resizable" | "unit" | "valid">> & {
+} & (Omit<react.InputHTMLAttributes<HTMLInputElement>, "onChange"> | Omit<react.TextareaHTMLAttributes<HTMLTextAreaElement>, "onChange">)) & react.RefAttributes<HTMLInputElement | HTMLTextAreaElement | null>, "valid" | "value" | "required" | "minLength" | "maxLength" | "disabled" | "type" | "label" | "onFocus" | "onBlur" | "autoFocus" | "id" | "onChange" | "size" | "data-testid" | "autoComplete" | "autoCapitalize" | "autoCorrect" | "autoSave" | "onKeyDown" | "onKeyUp" | "placeholder" | "noTopLabel" | "readOnly" | "cols" | "rows" | "fillAvailable" | "generated" | "multiline" | "notice" | "random" | "resizable" | "unit">> & {
+    name: string;
     className?: string | undefined;
-    /**
-     * @deprecated Use rules instead
-     */
+    max?: number | undefined;
+    min?: number | undefined;
     regex?: (RegExp | RegExp[])[] | undefined;
-    format?: ((value: unknown) => any) | undefined;
-    parse?: ((value: string) => any) | undefined;
-    customError?: string | undefined;
 } & react.RefAttributes<HTMLInputElement>>;
 
-type TimeFieldProps<TFieldValues extends FieldValues> = BaseFieldProps<TFieldValues> & ComponentProps<typeof TimeInput> & {
+type TimeFieldProps = BaseFieldProps<Date> & ComponentProps<typeof TimeInput> & {
     name: string;
 };
-declare const TimeField: <TFieldValues extends FieldValues>({ required, name, schedule, placeholder, disabled, readOnly, onBlur, onFocus, onChange, isLoading, isClearable, inputId, id, animation, animationDuration, animationOnChange, className, isSearchable, rules, options, "data-testid": dataTestId, }: TimeFieldProps<TFieldValues>) => _emotion_react_jsx_runtime.JSX.Element;
+declare const TimeField: ({ required, name, schedule, placeholder, disabled, initialValue, validate, readOnly, value, onChange, onBlur, onFocus, isLoading, isClearable, inputId, id, formatOnBlur, animation, animationDuration, animationOnChange, className, isSearchable, options, "data-testid": dataTestId, }: TimeFieldProps) => _emotion_react_jsx_runtime.JSX.Element;
 
-type ToggleFieldProps<TFieldValues extends FieldValues> = Omit<BaseFieldProps<TFieldValues>, 'label'> & Pick<ComponentProps<typeof Toggle>, 'disabled' | 'label' | 'onChange' | 'size' | 'tooltip' | 'labelPosition' | 'className' | 'data-testid'> & {
-    parse?: (value: boolean) => any;
-    format?: (value: any) => boolean;
+type ToggleFieldProps<T = unknown, K = unknown> = BaseFieldProps<T, K> & Pick<ComponentProps<typeof Toggle>, 'disabled' | 'label' | 'onChange' | 'size' | 'tooltip' | 'labelPosition' | 'className' | 'data-testid'> & {
+    name: string;
+    required?: boolean;
 };
-declare const ToggleField: <TFieldValues extends FieldValues>({ className, disabled, label, name, onChange, required, size, tooltip, rules, labelPosition, parse, format, "data-testid": dataTestId, }: ToggleFieldProps<TFieldValues>) => _emotion_react_jsx_runtime.JSX.Element;
+declare const ToggleField: ({ afterSubmit, allowNull, beforeSubmit, className, data, defaultValue, disabled, format, formatOnBlur, initialValue, isEqual, label, multiple, name, onChange, parse, required, size, subscription, tooltip, validate, validateFields, value, labelPosition, "data-testid": dataTestId, }: ToggleFieldProps) => _emotion_react_jsx_runtime.JSX.Element;
 
 type SubmitProps = {
     children?: ReactNode;
@@ -626,158 +675,60 @@ type SubmitProps = {
 };
 declare const Submit: ({ children, className, disabled, icon, iconPosition, size, variant, sentiment, tooltip, fullWidth, onClick, }: SubmitProps) => _emotion_react_jsx_runtime.JSX.Element;
 
-type RadioGroupFieldProps<TFieldValues extends FieldValues> = BaseFieldProps<TFieldValues> & Partial<Pick<ComponentProps<typeof RadioGroup>, 'onChange' | 'legend' | 'children' | 'error' | 'helper' | 'direction'>> & {
+type RadioValue = NonNullable<ComponentProps<typeof RadioGroup>['value']>;
+type RadioGroupFieldProps<T = RadioValue, K = string> = BaseFieldProps<T, K> & Partial<Pick<ComponentProps<typeof RadioGroup>, 'onChange' | 'value' | 'legend' | 'children' | 'required' | 'name' | 'error' | 'helper' | 'direction'>> & {
     className?: string;
+    name: string;
+    required?: boolean;
 };
 declare const RadioGroupField: {
-    <TFieldValues extends FieldValues>({ className, legend, name, onChange, required, rules, children, label, error: customError, helper, direction, }: RadioGroupFieldProps<TFieldValues>): JSX.Element;
+    ({ className, legend, name, onChange, required, validate, value, children, error: customError, helper, direction, }: RadioGroupFieldProps): _emotion_react_jsx_runtime.JSX.Element;
     Radio: ({ onFocus, onBlur, disabled, error, name, value, label, helper, className, autoFocus, onKeyDown, "data-testid": dataTestId, }: {
+        error?: react.ReactNode;
+        name?: string | undefined;
         value: string | number;
-        onBlur?: react.FocusEventHandler<HTMLInputElement> | undefined;
+        key?: react.Key | null | undefined;
         disabled?: boolean | undefined;
+        label?: react.ReactNode;
         className?: string | undefined;
         ref?: react.Ref<HTMLInputElement> | undefined;
-        label?: react.ReactNode;
         onFocus?: react.FocusEventHandler<HTMLInputElement> | undefined;
-        name?: string | undefined;
+        onBlur?: react.FocusEventHandler<HTMLInputElement> | undefined;
         autoFocus?: boolean | undefined;
         id?: string | undefined;
         'aria-label'?: string | undefined;
         'data-testid'?: string | undefined;
         helper?: react.ReactNode;
         tooltip?: string | undefined;
-        error?: react.ReactNode;
-        key?: react.Key | null | undefined;
         onKeyDown?: react.KeyboardEventHandler<HTMLInputElement> | undefined;
     }) => _emotion_react_jsx_runtime.JSX.Element;
 };
 
-type ErrorContextValue = {
-    errors: RequiredErrors;
-    getError: (meta: MetaField, error?: FieldError) => string | undefined;
-};
-type ErrorProviderProps = {
-    children: ReactNode;
-    errors: RequiredErrors;
-};
-declare const ErrorProvider: ({ children, errors }: ErrorProviderProps) => _emotion_react_jsx_runtime.JSX.Element;
-declare const useErrors: () => ErrorContextValue;
-
-type CallbackFn<TFieldValues extends FieldValues, TFieldName extends FieldPath<TFieldValues>> = (value: FieldPathValue<TFieldValues, TFieldName>, values: DeepPartial<TFieldValues>) => void | Promise<void>;
-/**
- * @deprecated
- */
-declare const useOnFieldChange: <TFieldValues extends FieldValues, TFieldName extends FieldPath<TFieldValues>>(fieldName: TFieldName, callback: CallbackFn<TFieldValues, TFieldName>, enabled?: boolean) => void;
-
-type UseFormStateParams = {
-    subscription?: Record<string, boolean>;
-};
-/**
- * @deprecated Use [useForm](https://www.react-hook-form.com/api/useform/), [useFormContext](https://www.react-hook-form.com/api/useformcontext/) or [useWatch](https://www.react-hook-form.com/api/usewatch/) to get values. Use [useFormState](https://www.react-hook-form.com/api/useformstate/) to get form states.
- * @example
- * ```tsx
- * const Input = () {
- *   const username = useWatch({
- *    name: 'username'
- *   })
- *
- *   const { isValid } = useFormState()
- * }
- * ```
-
- */
-declare const useFormStateDeprecated: <TFieldValues extends FieldValues>(_params?: UseFormStateParams) => {
-    dirtySinceLastSubmit: boolean;
-    submitErrors: (Record<string, Partial<{
-        type: string | number;
-        message: string;
-    }>> & Partial<{
-        type: string | number;
-        message: string;
-    }>) | undefined;
-    values: TFieldValues;
-    hasValidationErrors: boolean;
-    pristine: boolean;
-    errors: react_hook_form.FieldErrors<TFieldValues>;
-    initialValues: Readonly<react_hook_form.DeepPartial<TFieldValues>> | undefined;
-    touched: Partial<Readonly<react_hook_form.DeepMap<react_hook_form.DeepPartial<TFieldValues>, boolean>>>;
-    submitting: boolean;
-    invalid: boolean;
-    valid: boolean;
+type UseValidationParams<FieldValue = unknown> = {
+    validators: ValidatorObject<FieldValue>[];
+    validate?: FieldValidator<FieldValue>;
 };
+type UseValidationResult<FieldValue = unknown> = (value: FieldValue, allValues: AnyObject, meta?: FieldState<FieldValue>) => string[] | undefined | unknown;
+declare const useValidation: <T = unknown>({ validators, validate, }: UseValidationParams<T>) => UseValidationResult<T>;
 
-type Options$1<TFieldValues extends FieldValues> = {
-    subscription?: Record<string, boolean>;
-    validate?: Validate<FieldPathValue<TFieldValues, Path<TFieldValues>>, TFieldValues>;
-};
-/**
- * @deprecated Use [useForm](https://www.react-hook-form.com/api/useform/), [useFormContext](https://www.react-hook-form.com/api/useformcontext/) or [useWatch](https://www.react-hook-form.com/api/usewatch/) to get values. Use [useFormState](https://www.react-hook-form.com/api/useformstate/) to get fields states.
- * @example
- * ```tsx
- * const Input = () {
- *   const username = useWatch({
- *    name: 'username'
- *   })
- *
- *   const { errors } = useFormState()
- *
- *   console.log(errors.username)
- * }
- * ```
+type CallbackFn<FieldValue, AllValues> = (value: FieldValue, values: AllValues) => unknown;
+declare const useOnFieldChange: <FieldValue = unknown, AllValues = unknown>(name: string, callback: CallbackFn<FieldValue, AllValues>, enabled?: boolean) => void;
 
- */
-declare const useFieldDeprecated: <T, TFieldValues extends FieldValues = FieldValues, TFieldName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>(name: TFieldName, options?: Options$1<TFieldValues> | undefined) => {
-    input: {
-        value: T;
-        onChange: (...event: any[]) => void;
-    };
-    meta: {
-        error: string | undefined;
-        touched: boolean;
-        invalid: boolean;
-        dirty: boolean;
-    };
-};
+declare const pickValidators: <InputValue = unknown>(args: ValidatorProps) => ValidatorObject<InputValue>[];
 
-/**
- * @deprecated Use [useFormContext](https://www.react-hook-form.com/api/useformcontext/)
- *
- * @example
- * ```tsx
- * const Input = () {
- *   const { setValue } = useFormContext()
- *
- *   setValue('username', 'John Wick')
- * }
- * ```
- */
-declare const useFormDeprecated: <TFieldValues extends FieldValues>() => {
-    change: react_hook_form.UseFormSetValue<TFieldValues>;
-    resetFieldState: react_hook_form.UseFormResetField<TFieldValues>;
-    getFieldState: react_hook_form.UseFormGetFieldState<TFieldValues>;
-    batch: (callback: () => void) => void;
-    restart: react_hook_form.UseFormReset<TFieldValues>;
-    reset: react_hook_form.UseFormReset<TFieldValues>;
-    submit: (e?: react.BaseSyntheticEvent<object, any, any> | undefined) => Promise<void>;
+type GetErrorProps = Omit<FormErrorFunctionParams, 'allValues'> & AnyObject & {
+    errorProp?: string;
+    additionalErrorChecks?: boolean;
 };
-
-type Options<TFieldValues extends FieldValues> = {
-    validate?: Validate<FieldArray<TFieldValues>[], TFieldValues>;
-    subscription?: Record<string, boolean>;
+type ErrorContextValue = {
+    errors: FormErrors;
+    getError: (props: GetErrorProps) => string | undefined;
 };
-/**
- * @deprecated Use [useFieldArray](https://www.react-hook-form.com/api/usefieldarray/)
- */
-declare const useFieldArrayDeprecated: <T, TFieldValues extends FieldValues = FieldValues>(name: ArrayPath<TFieldValues>, options?: Options<TFieldValues> | undefined) => {
-    fields: {
-        push: react_hook_form.UseFieldArrayAppend<TFieldValues, ArrayPath<TFieldValues>>;
-        value: T[];
-        remove: react_hook_form.UseFieldArrayRemove;
-        update: react_hook_form.UseFieldArrayUpdate<TFieldValues, ArrayPath<TFieldValues>>;
-        map: (callback: (name: string, index: number) => ReactNode) => ReactNode[];
-        move: react_hook_form.UseFieldArrayMove;
-        length: number;
-    };
+type ErrorProviderProps = {
+    children: ReactNode;
+    errors: FormErrors;
 };
+declare const ErrorProvider: ({ children, errors }: ErrorProviderProps) => _emotion_react_jsx_runtime.JSX.Element;
+declare const useErrors: () => ErrorContextValue;
 
-export { type BaseFieldProps, CheckboxField, CheckboxGroupField, DateField, ErrorProvider, FORM_ERROR, Form, type FormErrors, type FormProps, NumberInputField, RadioField, RadioGroupField, SelectInputField, SelectableCardField, Submit, SubmitErrorAlert, TagInputField, TextInputField, TimeField, ToggleField, useErrors, useFieldArrayDeprecated, useFieldDeprecated, useFormDeprecated, useFormStateDeprecated, useOnFieldChange };
+export { type BaseFieldProps, CheckboxField, CheckboxGroupField, DateField, ErrorProvider, Form, type FormErrors, NumberInputField, RadioField, RadioGroupField, SelectInputField, SelectableCardField, Submit, SubmitErrorAlert, TagInputField, TextInputField, TimeField, ToggleField, pickValidators, useErrors, useOnFieldChange, useValidation };