import type React from 'react';
export interface GlobalHTMLAttributes {
    hidden?: boolean;
    id?: string;
    title?: string;
    dir?: string;
    lang?: string;
    slot?: string;
    translate?: 'yes' | 'no';
    className?: string;
    style?: React.CSSProperties;
    tabIndex?: number;
    onPointerDown?: React.PointerEventHandler<Element>;
    onPointerEnter?: React.PointerEventHandler<Element>;
    onPointerLeave?: React.PointerEventHandler<Element>;
    onPointerMove?: React.PointerEventHandler<Element>;
    onPointerUp?: React.PointerEventHandler<Element>;
}
/**
 * Base interface for all inputs.
 *
 * React's InputHTMLAttributes contains too many properties.
 */
export type BaseInputProps<Element = HTMLInputElement> = {
    /**
     * A concise label for the input, keep it below 40 characters.
     *
     * For a large form where only some options are required, add an asterisk (*) to the end of the label.
     *
     * If most fields in the form are required, add (optional) to the label.
     */
    label: string;
    /**
     * Disables the input. Use sparingly as it can be non-obvious to users why an input has been
     * disabled. Prefer showing validation messages and hints instead.
     *
     * @default false
     */
    disabled?: boolean;
    /**
     * Gives the input focus on page load. Use sparingly as it can be confusing to screen-reader and
     * mobile users.
     *
     * @default false
     */
    autoFocus?: boolean;
    /**
     * Makes the input read-only. Use sparingly, it's often preferred to present the data as regular
     * text or in a table instead.
     *
     * @default false
     */
    readOnly?: boolean;
    /**
     * Id of a form element that this input should be associated with. Defaults to the containing
     * form element.
     */
    form?: string;
    /**
     * Additional hint or description.
     * Supports text, links and block content such as paragraphs or Markdown output.
     */
    hint?: React.ReactNode;
    /**
     * Hint the browser about what label to show for the Enter button on mobile keyboards.
     */
    enterKeyHint?: 'enter' | 'done' | 'go' | 'next' | 'previous' | 'search' | 'send';
    /**
     * Makes the input required.
     *
     * @default false
     */
    required?: boolean;
    'aria-describedby'?: string;
    'aria-labelledby'?: string;
    /**
     * Fires if the input fails validation on form submit.
     */
    onInvalid?: React.FormEventHandler<Element>;
    onFocus?: React.FocusEventHandler<Element>;
    onBlur?: React.FocusEventHandler<Element>;
    onKeyDown?: React.KeyboardEventHandler<Element>;
    onKeyUp?: React.KeyboardEventHandler<Element>;
};
export interface TextLikeProps extends GlobalHTMLAttributes, BaseInputProps {
    /**
     * @default 'top-label'
     */
    variant?: 'top-label' | 'floating-label';
    /**
     * The name of the input to use when submitting the form.
     */
    name: string;
    /**
     * Placeholder text to show in the input when it is empty.
     */
    placeholder?: string;
    /**
     * Set the error message of an input and mark it invalid.
     */
    errorMessage?: string;
    /**
     * Force the input to be invalid.
     *
     * @default false
     */
    'aria-invalid'?: boolean;
}
export interface DateLikeProps extends GlobalHTMLAttributes, BaseInputProps {
    /**
     * @default 'top-label'
     */
    variant?: 'top-label' | 'floating-label';
    /**
     * The name of the input to use when submitting the form.
     */
    name: string;
    /**
     * Set the error message of an input and mark it invalid.
     */
    errorMessage?: string;
    /**
     * Force the input to be invalid.
     *
     * @default false
     */
    'aria-invalid'?: boolean;
}