import { SyntheticEvent } from 'react';
import { Validator } from '@mangopay/checkout-sdk-core';
import { TranslationKey } from '@mangopay/checkout-sdk-elements-core';
export type InputFieldElement = HTMLInputElement | HTMLSelectElement;
export type Formatter = (value: string, event?: Event) => string;
export type ValidationError<T> = {
    type: T;
    message: string;
};
export interface UseInputFieldParams<ValidationErrorType extends string = string> {
    value: string;
    setValue: (value: string) => void;
    onChange?: (value: string, error?: ValidationError<ValidationErrorType>) => void;
    formatter?: Formatter;
    validation?: {
        validator: Validator<ValidationErrorType>;
        validationOrder: ValidationErrorType[];
        validationMessageByErrorType?: Record<ValidationErrorType, TranslationKey>;
        isCardFormValidationTriggered?: boolean;
    };
}
export interface UseInputFieldResult<InputElementType extends InputFieldElement, ValidationErrorType extends string = string> {
    isDirty: boolean;
    isFocused: boolean;
    isValid: boolean;
    validationErrorType?: ValidationErrorType;
    validationErrorMessage?: string;
    validationResult?: Record<ValidationErrorType, boolean>;
    handleChange: (event: SyntheticEvent<InputElementType>) => void;
    handleBlur: (event: SyntheticEvent<InputElementType>) => void;
    handleFocus: (event: SyntheticEvent<InputElementType>) => void;
    showErrorState: boolean;
}
export declare const useInputField: <InputElementType extends InputFieldElement = InputFieldElement, ValidationErrorType extends string = string>(params?: UseInputFieldParams<ValidationErrorType> | undefined) => UseInputFieldResult<InputElementType, ValidationErrorType>;