import * as _emotion_react_jsx_runtime from '@emotion/react/jsx-runtime';
import { InputHTMLAttributes } from 'react';
import { InputSize } from '../@types/InputSize.js';
import { Props } from '../@types/Props.js';
import { ThemeTextInput } from './theme.js';

type Width = 30 | 10 | 4;
interface TextInputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'value' | 'size'>, Props {
    id?: string;
    /**
     * Appears above the text input
     */
    label: string;
    /**
     * Adds the word "Optional" after the label. Non-optional fields are rendered with the `required` attribute.
     */
    optional?: boolean;
    /**
     * Visually hides the label and the "Optional" text set by the `optional` flag.
     */
    hideLabel?: boolean;
    /**
     * Additional text that appears below the label
     */
    supporting?: string;
    /**
     * Size of the text input field, label and error message if visible.
     */
    size?: InputSize;
    /**
     * Determines the width of a fixed-length field, based on the specified character length of the user input. If unspecified,
     * the width will default to 100% of the field's container.
     */
    width?: Width;
    /**
     * Appears as an inline error message.
     */
    error?: string;
    /**
     * Appears as an inline success message.
     * This prop should not have a value set at the same time as the error prop. In the event that both are set, errors take precedence.
     */
    success?: string;
    /**
     * The contents of the text input field. This is necessary when using the [controlled approach](https://reactjs.org/docs/forms.html#controlled-components) to form state management.
     *
     * _Note: if you pass the `value` prop, you MUST also pass an `onChange` handler, or the field will be rendered as read-only_
     */
    value?: string;
    /**
     * Partial or complete theme to override the component's colour palette.
     * The sanctioned colours have been set out by the design system team.
     * The colours which can be changed are:
     *
     *  `textUserInput`<br>
     *  `textLabel`<br>
     *  `textOptional`<br>
     *  `textSupporting`<br>
     *  `textError`<br>
     *  `textSuccess`<br>
     *  `backgroundInput`<br>
     *  `border`<br>
     *  `borderError`<br>
     *  `borderSuccess`<br>
     *
     */
    theme?: Partial<ThemeTextInput>;
}
/**
 * [Storybook](https://guardian.github.io/storybooks/?path=/story/source_react-components-textinput--default-default-theme) •
 * [Design System](https://theguardian.design/2a1e5182b/p/097455-text-input-field/b/050445) •
 * [GitHub](https://github.com/guardian/csnx/tree/main/libs/@guardian/source/src/react-components/text-input/TextInput.tsx) •
 * [NPM](https://www.npmjs.com/package/@guardian/source)
 *
 * Single line fields that allow users to enter freeform data.
 *
 * The following themes are supported: `light`
 */
declare const TextInput: ({ id, label: labelText, optional, hideLabel, supporting, size, width, error, success, theme, cssOverrides, ...props }: TextInputProps) => _emotion_react_jsx_runtime.JSX.Element;

export { TextInput };
export type { TextInputProps, Width };