import React, { MutableRefObject, RefObject } from 'react';
import { FieldInstructionsProps } from '../FieldInstructions/FieldInstructions';
export interface TextFieldProps {
    /**
     * The label content.
     */
    label?: string;
    /**
     * The id of the `input` element.
     */
    id?: string;
    /**
     * Name attribute of the `input` element.
     */
    name?: string;
    /**
     * The help text content displayed under the input
     */
    helpText?: React.ReactNode;
    /**
     * Override or extend the styles applied to the component.
     */
    className?: string;
    /**
     * If `true`, the `input` element will be disabled.
     * @default false
     */
    disabled?: boolean;
    /**
     * If `true`, the outline and helptext will be displayed in an error state.
     * @default false
     */
    error?: boolean;
    /**
     * If `true`, the outline and helptext will be displayed in an success state.
     * @default false
     */
    success?: boolean;
    /**
     * Actions to add to the right within the borders of the TextField
     * eg. Clear-Button or an icon
     */
    rightContent?: React.ReactNode;
    /**
     * Actions to add to the left within the borders of the TextField
     * eg. search-button or just a search icon
     */
    leftContent?: React.ReactNode;
    /**
     * 'compact' displays the label _in_ the border when input is active
     */
    size?: 'default' | 'compact';
    /**
     * White: white background with light grey border
     * Grey: grey background with no border
     * Defaukt: white background with purple border when active
     */
    kind?: 'white' | 'grey' | 'default' | 'purpur';
    /**
     * Type of the `input` element. It should be [a valid HTML5 input type](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Form_%3Cinput%3E_types).
     */
    type?: string;
    /**
     * The value of the `input` element.
     */
    value?: string;
    /**
     * Accessibility props
     */
    'aria-label'?: string;
    'aria-activedescendant'?: string;
    'aria-autocomplete'?: 'none' | 'inline' | 'list' | 'both';
    'aria-controls'?: string;
    'aria-labelledby'?: string;
    /**
     * Eventhandlers
     */
    onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
    onFocus?: (event: React.FocusEvent<HTMLInputElement>) => void;
    onBlur?: (event: React.FocusEvent<HTMLInputElement>) => void;
    onKeyDown?: (event: React.KeyboardEvent<HTMLInputElement>) => void;
    onKeyUp?: (event: React.KeyboardEvent<HTMLInputElement>) => void;
    onPaste?: (event: React.ClipboardEvent<HTMLInputElement>) => void;
    /**
     * For compact TextFields vi use the label as a placeholder
     */
    placeholder?: string;
    autoComplete?: string;
    maxlength?: number;
    /**
     * To show field instructions for the text field
     */
    fieldInstructionsProps?: FieldInstructionsProps;
    inputRef?: RefObject<HTMLInputElement> | MutableRefObject<HTMLInputElement>;
    animated?: Boolean;
    dataTestId?: string;
    autoFocus?: boolean;
    dataTrackingId?: string;
    required?: boolean;
}
export declare const TextField: (props: TextFieldProps) => JSX.Element;