import React from 'react';
import { FlintTextField as FlintTextFieldElement } from '@getufy/flint-ui/text-field/flint-text-field';
export interface FlintTextFieldInputDetail {
    value: string;
}
export interface FlintTextFieldChangeDetail {
    value: string;
}
/**
 * Text Field: a styled text input with outlined/filled variants.
 *
 * @slot prefix - Content placed before the input (e.g. icon).
 * @slot suffix - Content placed after the input (e.g. icon).
 */
export interface FlintTextFieldProps extends Omit<React.HTMLAttributes<FlintTextFieldElement>, 'defaultValue'> {
    /** Label text displayed above the input. */
    label?: string;
    /** Current value of the text field. */
    value?: string;
    /** Placeholder text shown when the input is empty. */
    placeholder?: string;
    /** HTML input type (e.g. 'text', 'password', 'email'). */
    type?: string;
    /**
     * Visual style variant of the text field.
     * Allowed values: 'outlined' | 'filled'
     */
    variant?: 'outlined' | 'filled';
    /** Whether the text field is disabled. */
    disabled?: boolean;
    /** Whether the text field is in an error state. */
    error?: boolean;
    /** Helper text displayed below the input. */
    helperText?: string;
    /** Error message displayed below the input when in error state. */
    errorMessage?: string;
    /** Initial value for uncontrolled usage. */
    defaultValue?: string;
    /** Form field name used when submitting form data. */
    name?: string;
    /** Marks the input as required for form validation. */
    required?: boolean;
    /** Regex pattern for validation. */
    pattern?: string;
    /** Minimum value (for number/date inputs). */
    min?: string;
    /** Maximum value (for number/date inputs). */
    max?: string;
    /** Minimum length for text validation. */
    minLength?: number | undefined;
    /** Maximum length for text validation. */
    maxLength?: number | undefined;
    /** Makes the input read-only. */
    readonly?: boolean;
    /** Shows a clear button when the input has a value. */
    clearable?: boolean;
    /** Shows a toggle button on password inputs to reveal/hide the value. */
    passwordToggle?: boolean;
    /** Whether the password is currently visible. Only relevant when `passwordToggle` is true. */
    passwordVisible?: boolean;
    /**
     * Fired on each keystroke as the value changes. detail: `{ value: string }`
     * DOM event: `flint-text-field-input`
     */
    onFlintTextFieldInput?: (event: CustomEvent<FlintTextFieldInputDetail>) => void;
    /**
     * Fired when the input loses focus after the value has changed. detail: `{ value: string }`
     * DOM event: `flint-text-field-change`
     */
    onFlintTextFieldChange?: (event: CustomEvent<FlintTextFieldChangeDetail>) => void;
    /**
     * Fired when the clear button is clicked. detail: `undefined`
     * DOM event: `flint-text-field-clear`
     */
    onFlintTextFieldClear?: (event: CustomEvent) => void;
}
export declare const FlintTextField: React.ForwardRefExoticComponent<FlintTextFieldProps & React.RefAttributes<FlintTextFieldElement>>;