import type React from 'react';
import type { FocusDetail, InputDetail, KeyboardDetail } from './types.js';
export interface TextInputRef extends HTMLElement {
    /** Focuses the inner input or textarea. */
    focus(): void;
    /** Blurs the inner input or textarea. */
    blur(): void;
    /** Selects all text in the input. */
    select(): void;
    /** Returns the current input value. */
    getValue(): string;
    /** Sets the input value programmatically. */
    setValue(value: string): void;
}
/**
 * Emits `cx-input` and `cx-change` custom events, NOT native `input`/`change`.
 * Native `<form onSubmit>` won't catch Enter — listen for `onKeydown` to handle form submission.
 * Use `onInput` for controlled value updates: `onInput={(e) => setValue(e.detail.value)}`.
 *
 * In React, reach the imperative methods through a ref:
 * `const api = useRef<TextInputRef>(null)`, pass `ref={api}`, then `api.current?.focus()`.
 * Available: focus(), blur(), select(), +2 more.
 *
 * @csspart base
 */
export interface TextInputOwnProps {
    /**
     * Unique identifier for the element.
     * @example 'example-id'
     */
    id?: string;
    /**
     * Visible label text.
     * @example 'Example label'
     */
    label: string;
    /**
     * Visual style variant. Allowed values: `outline`, `filled`, `ghost`.
     * @example 'outline'
     */
    variant?: 'outline' | 'filled' | 'ghost';
    /**
     * Corner radius style. Allowed values: `sharp`, `rounded`, `pill`.
     * @example 'sharp'
     */
    shape?: 'sharp' | 'rounded' | 'pill';
    /**
     * Component size. Allowed values: `xs`, `sm`, `md`, `lg`, `xl`.
     * @example 'xs'
     */
    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
    /**
     * Input type. Use 'multiline' for textarea behavior with optional rows and autoGrow. Allowed values: `text`, `email`, `password`, `search`, `multiline`.
     * @example 'text'
     */
    kind?: 'text' | 'email' | 'password' | 'search' | 'multiline';
    /**
     * Placeholder text shown when empty.
     * @example 'Enter a value'
     */
    placeholder?: string;
    /**
     * Controlled value. Set via onInput callback.
     * @example 'example'
     */
    value?: string;
    /**
     * Helper text displayed below the input.
     * @example 'example'
     */
    helperText?: string;
    /**
     * Error message text. When set, shows validation error styling.
     * @example 'This field is invalid'
     */
    error?: string;
    /**
     * Disables the component, preventing interaction.
     * @defaultValue false
     * @example true
     */
    disabled?: boolean;
    /**
     * Makes the component read-only.
     * @defaultValue false
     * @example true
     */
    readonly?: boolean;
    /**
     * Marks the field as required for form validation.
     * @defaultValue false
     * @example true
     */
    required?: boolean;
    /**
     * Whether a clear button appears when the field has a value.
     * @defaultValue false
     * @example true
     */
    clearable?: boolean;
    /**
     * Icon displayed at the start of the input field.
     * @example 'example'
     */
    prefixIcon?: string;
    /**
     * Icon displayed at the end of the input field.
     * @example 'example'
     */
    suffixIcon?: string;
    /**
     * Whether to show a toggle button for password visibility.
     * @defaultValue false
     * @example true
     */
    passwordToggle?: boolean;
    /**
     * Controlled password visibility state.
     * @defaultValue false
     * @example true
     */
    passwordVisible?: boolean;
    /**
     * Form field name for submission.
     * @example 'fieldName'
     */
    name?: string;
    /**
     * Minimum character length for validation.
     * @example 1
     */
    minLength?: number;
    /**
     * Maximum character length allowed.
     * @example 1
     */
    maxLength?: number;
    /**
     * Regex pattern for input validation.
     * @example 'example'
     */
    pattern?: string;
    /**
     * Browser autocomplete hint (e.g. "email", "name", "off").
     * @example 'example'
     */
    autocomplete?: string;
    /**
     * Visible row count for a multiline input. Applies only when kind is multiline.
     * @defaultValue 3
     * @example 6
     */
    rows?: number;
    /**
     * Automatically expands the textarea to fit content (multiline mode only).
     * @defaultValue false
     * @example true
     */
    autoGrow?: boolean;
    /**
     * Fires on each user edit before the value is committed. Detail: `InputDetail`.
     * @example (event) => console.log(event.detail.value)
     */
    onInput?: (event: CustomEvent<InputDetail>) => void;
    /**
     * Fires when the committed component value or state changes. Detail: `InputDetail`.
     * @example (event) => console.log(event.detail.value)
     */
    onChange?: (event: CustomEvent<InputDetail>) => void;
    /**
     * Fires when focus enters the component. Detail: `FocusDetail`.
     * @example (event) => console.log(event.detail.relatedTarget)
     */
    onFocus?: (event: CustomEvent<FocusDetail>) => void;
    /**
     * Fires when focus leaves the component. Detail: `FocusDetail`.
     * @example (event) => console.log(event.detail.relatedTarget)
     */
    onBlur?: (event: CustomEvent<FocusDetail>) => void;
    /**
     * Fires when a key is pressed inside the component. Detail: `KeyboardDetail`.
     * @example (event) => console.log(event.detail.key)
     */
    onKeydown?: (event: CustomEvent<KeyboardDetail>) => void;
    /**
     * Fires when a key is released inside the component. Detail: `KeyboardDetail`.
     * @example (event) => console.log(event.detail.key)
     */
    onKeyup?: (event: CustomEvent<KeyboardDetail>) => void;
    /** CSS class applied to the Custom Element host.
     * @example 'my-component'
     */
    className?: string;
    /** Inline styles applied to the Custom Element host.
     * @example { marginTop: 8 }
     */
    style?: React.CSSProperties;
}
/**
 * Props for `<TextInput>`: the component's own API plus every standard DOM
 * attribute and native React event handler, forwarded verbatim to the
 * `<cx-text-input>` host — `id`, `data-*`, `aria-*`, `title`, `tabIndex`,
 * `slot`, `onMouseEnter`, and the rest. Own props always win over a
 * same-named DOM attribute.
 */
export type TextInputProps = TextInputOwnProps & Omit<React.HTMLAttributes<HTMLElement>, keyof TextInputOwnProps | 'children' | 'dangerouslySetInnerHTML'>;
export declare const TextInput: React.ForwardRefExoticComponent<TextInputOwnProps & Omit<React.HTMLAttributes<HTMLElement>, "children" | "dangerouslySetInnerHTML" | keyof TextInputOwnProps> & React.RefAttributes<TextInputRef>>;