import React from 'react';
import { FlintInput as FlintInputElement } from '@getufy/flint-ui/input/flint-input';
export interface FlintInputInputDetail {
    value: string;
}
export interface FlintInputChangeDetail {
    value: string;
}
/**
 * Input: a styled text input with label, help text, and error states.
 *
 * @slot prefix - Content placed before the input (e.g. icon).
 * @slot suffix - Content placed after the input (e.g. icon).
 */
export interface FlintInputProps extends Omit<React.HTMLAttributes<FlintInputElement>, 'defaultValue'> {
    /** Label text displayed above the input. */
    label?: string;
    /** Current value (controlled). When set, the component reflects this value and does not manage its own state. */
    value?: string;
    /** HTML input type (text, email, password, etc.). */
    type?: string;
    /** Placeholder text shown when the input is empty. */
    placeholder?: string;
    /** Help text displayed below the input. */
    helperText?: string;
    /** Whether the input is in an error state. */
    error?: boolean;
    /** Error message displayed below the input. */
    errorMessage?: string;
    /** Disables the input and prevents interaction. */
    disabled?: boolean;
    /** Marks the input as required for form validation. */
    required?: boolean;
    /** Makes the input read-only. */
    readonly?: boolean;
    /** Form field name used when submitting form data. */
    name?: string;
    /** Browser autocomplete hint. */
    autocomplete?: string;
    /** 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;
    /**
     * Size variant of the input.
     * Allowed values: 'sm' | 'md' | 'lg'
     */
    size?: 'sm' | 'md' | 'lg';
    /**
     * Visual variant of the input.
     * Allowed values: 'outlined' | 'filled'
     */
    variant?: 'outlined' | 'filled';
    /** Whether to use pill-shaped (fully rounded) ends. */
    pill?: boolean;
    /** Initial value (uncontrolled). Only used on first render; ignored after mount. */
    defaultValue?: string | undefined;
    /** Shows a clear button when the input has a value. */
    clearable?: boolean;
    /** Debounce delay in milliseconds for the `flint-input-input` event. 0 means no debounce. Useful for search inputs. */
    debounce?: number;
    /** 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-input-input`
     */
    onFlintInputInput?: (event: CustomEvent<FlintInputInputDetail>) => void;
    /**
     * Fired when the input loses focus after the value has changed. detail: `{ value: string }`
     * DOM event: `flint-input-change`
     */
    onFlintInputChange?: (event: CustomEvent<FlintInputChangeDetail>) => void;
    /**
     * Fired when the clear button is clicked. detail: `undefined`
     * DOM event: `flint-input-clear`
     */
    onFlintInputClear?: (event: CustomEvent) => void;
}
export declare const FlintInput: React.ForwardRefExoticComponent<FlintInputProps & React.RefAttributes<FlintInputElement>>;