/// <reference types="react" />
import './text-field.scss';
import { type ReactRef } from '@/utils/react-ref';
/**
 * @specs https://m3.material.io/components/text-fields/specs
 */
export declare const TextField: import("react").ForwardRefExoticComponent<{
    leadingIcon?: React.ReactNode;
    trailingIcon?: React.ReactNode;
    labelText?: React.ReactNode;
    supportingText?: React.ReactNode;
    value?: string | number | undefined;
    onChange?: ((text: string) => void) | undefined;
    readonly?: boolean | undefined;
    disabled?: boolean | undefined;
    error?: boolean | undefined;
    /**
     * Textarea will ignore this and only show as filled style
     * @default filled
     */
    sd?: "filled" | "outlined" | undefined;
    /**
     * Set to true to change the internal element to `<textarea>`
     */
    textarea?: boolean | undefined;
    /**
     * Rows only for textarea
     * @default 2
     */
    rows?: number | undefined;
    placeholder?: string | undefined;
    /**
     * For access the internal input element
     *
     * [warn]: (for typescript user) use `const ref = useRef<HTMLInputElement | undefined>()` to create a MutableRefObject
     */
    inputRef?: ReactRef<HTMLInputElement | undefined> | undefined;
    /**
     * For access the internal textarea element
     *
     * [warn]: (for typescript user) use `const ref = useRef<HTMLInputElement | undefined>()` to create a MutableRefObject
     */
    textareaRef?: ReactRef<HTMLTextAreaElement | undefined> | undefined;
    /**
     * For internal use, control if focused is shown
     */
    'data-sd-focus'?: boolean | undefined;
} & Omit<import("react").HTMLProps<HTMLElement>, "as" | "ref" | "disabled" | "placeholder" | "rows" | "value" | "onChange" | "textarea" | "trailingIcon" | "sd" | "error" | "leadingIcon" | "labelText" | "supportingText" | "readonly" | "inputRef" | "textareaRef" | "data-sd-focus"> & import("react").RefAttributes<HTMLDivElement>>;