import { MaybeRefOrGetter } from 'vue';
import { DateValue, OnyxDatePickerProps } from '../components/OnyxDatePicker/types.js';
import { FormElementV2Tooltip } from '../components/OnyxFormElementV2/types.js';
import { InputType } from '../components/OnyxInput/types.js';
import { default as enUS } from '../i18n/locales/en-US.json';
import { UseFormValidityOptions } from './useCustomValidity.js';
import { MaxLength } from './useLenientMaxLengthValidation.js';
export type CustomMessageType = string | FormMessages;
export type FormMessages = {
    /**
     * A short message preview to inform the user about the input state.
     * It's usually shown directly underneath the input field.
     */
    shortMessage: string;
    /**
     * An extended informative message to provide more details.
     * It's usually shown in a tooltip next to the shortMessage.
     */
    longMessage?: string;
    /**
     * Will visually hide the message.
     */
    hidden?: boolean;
};
export type CustomValidityProp = {
    /**
     * Custom error message to show. Takes precedence over intrinsic error messages.
     */
    error?: CustomMessageType;
};
export type FormValidationProps = {
    error?: CustomMessageType;
    modelValue?: unknown;
    type?: InputType | OnyxDatePickerProps["type"];
    maxlength?: MaxLength;
    minlength?: number;
    min?: DateValue;
    max?: DateValue;
    validStepSize?: number;
};
export type AnyFormError = CustomMessageType | FormElementV2Tooltip;
export type UseFormElementErrorOptions = Omit<UseFormValidityOptions<FormValidationProps>, "error" | "props"> & {
    props: Omit<FormValidationProps, "error"> & {
        error?: AnyFormError;
    };
    error?: MaybeRefOrGetter<AnyFormError | undefined>;
};
/**
 * Input types that have a translation for their validation error message.
 */
export declare const TRANSLATED_INPUT_TYPES: (keyof typeof enUS.validations.typeMismatch)[];
export type TranslatedInputType = (typeof TRANSLATED_INPUT_TYPES)[number];
/**
 * Transforms a customMessage into the format needed to display an error preview and extended message
 */
export declare const getFormMessages: (customMessage?: CustomMessageType) => FormMessages | undefined;
/**
 * Returns a string combining short + long message or just the customMessage if it was provided as single string.
 * Will be used e.g. for customInvalidity and showing a tooltip e.g. in RadioButtons
 */
export declare const getFormMessageText: (error?: CustomMessageType) => string | undefined;
export declare const useFormElementError: (options: UseFormElementErrorOptions) => {
    /**
     * Directive to set the custom error message and emit validityChange event.
     */
    vCustomValidity: {
        mounted: (el: import('./useCustomValidity.js').InputValidationElement) => void;
    };
    /**
     * A custom error or the default translation of the first invalid state if one exists.
     */
    errorMessages: import('vue').ComputedRef<FormMessages | undefined>;
};