import React from "react";
import type { FormHeightNames } from "../../../system/Sizes";
import type { IconKey, IconProps } from "../Icons/types/IconProps.type";
type FormFieldWidth = "sm" | "md" | "lg" | "xl" | "full";
/**
 * It's very complicated to tap into the onChange events of inputs,
 * so I omit the type it requires and add a easier one to deal with.
 */
type CustomHTMLInputProps = Omit<React.HTMLProps<HTMLInputElement>, "onChange" | "ref"> & {
    isError?: boolean;
};
export type FakeEventTarget = {
    target: {
        value: string;
        name: string;
    };
    currentTarget: {
        value: string;
        name: string;
    };
};
export interface InputProps extends CustomHTMLInputProps {
    clearable?: boolean;
    isDisabled?: boolean;
    withPrefix?: string;
    withSuffix?: string;
    icon?: React.FC<IconProps> | IconKey;
    width?: FormFieldWidth;
    height?: FormHeightNames;
    /**
     * Check the `asFormField` prop of this component to understand why this signature.
     */
    onChange?: (event: FakeEventTarget | string) => void;
    /**
     * ### TO BE USED WHEN INSIDE REACT-HOOK-FORM
     *
     * react-hook-form uses the onChange event differently.
     * Instead of passing an `event` object, it uses the value itself from the callback.
     *
     * So we need to use this flag to determine how to call the onChange callback.
     *
     * @example
     *
     * // In react-hook-forms:
     *
     * onChange({target: { name: 'myInput' }, value: 'text'}) // -> this whole object will be set as the value
     *
     * // so instead do:
     *
     * onChange('text') // -> 🤝
     */
    asFormField?: boolean;
}
export declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;
export default Input;