import type { TextFieldProps } from '../../shared';
import type { InputType, VisualVariant } from '../../types';
import '../../content/icon/icon';
/** Input component properties */
export type OreInputEvents = {
    change: Event;
    input: InputEvent;
};
export type OreInputProps = TextFieldProps<Exclude<VisualVariant, 'frost'>> & {
    /** Autocomplete hint */
    autocomplete?: string;
    /** Show a clear (×) button when the field has a value */
    clearable?: boolean;
    /** Virtual keyboard hint for mobile devices */
    inputmode?: 'none' | 'text' | 'decimal' | 'numeric' | 'tel' | 'search' | 'email' | 'url';
    /**
     * Shows an inline spinner inside the field and forces the inner `<input>` into
     * `disabled` for the duration — use while an async validation/submission request
     * is in flight (e.g. checking username availability) to prevent double-submits.
     */
    loading?: boolean;
    /** Maximum character length — shows a counter below the input */
    maxlength?: number;
    /** Minimum character length */
    minlength?: number;
    /** HTML pattern attribute for client-side validation */
    pattern?: string;
    /**
     * JS-only callback fired with the inner `<input>` element when it mounts,
     * and with `null` when it unmounts. Intended for composed components that
     * need imperative access to the raw input element.
     * Set as a JS property: `bitInput.ref = (el) => { ... }`.
     */
    ref?: ((el: HTMLInputElement | null) => void) | null;
    /** HTML input type */
    type?: InputType;
};
/**
 * A customizable text input component with multiple variants, label placements, and form features.
 *
 * @element ore-input
 *
 * @attr {string} label - Label text
 * @attr {string} label-placement - Label placement: 'inset' | 'outside'
 * @attr {string} type - HTML input type: 'text' | 'email' | 'password' | 'number' | 'tel' | 'url' | 'search'
 * @attr {string} value - Current input value
 * @attr {string} placeholder - Placeholder text
 * @attr {string} name - Form field name
 * @attr {string} helper - Helper text displayed below the input (fallback when the `helper` slot is empty)
 * @attr {string} error - Error message — marks the field as invalid (fallback when the `error` slot is empty)
 * @attr {boolean} disabled - Disable input interaction
 * @attr {boolean} readonly - Make the input read-only
 * @attr {boolean} required - Mark the field as required
 * @attr {boolean} loading - Show an inline spinner and force the field disabled
 * @attr {boolean} success - Show an inline success check icon (suppressed while `error` is set)
 * @attr {string} color - Theme color: 'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'error'
 * @attr {string} variant - Visual variant: 'solid' | 'flat' | 'bordered' | 'outline' | 'ghost' | 'text'
 * @attr {string} size - Input size: 'sm' | 'md' | 'lg'
 * @attr {string} rounded - Border radius: 'none' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | 'full'
 *
 * @fires input - Emitted when input value changes (on every keystroke).
 * @fires change - Emitted when input loses focus with changed value.
 *
 * @slot prefix - Content before the input (e.g., icons)
 * @slot suffix - Content after the input (e.g., clear button, validation icon)
 * @slot label - Replaces the label text — slotted content takes precedence over the `label` prop
 * @slot helper - Replaces the helper text — slotted content takes precedence over the `helper` prop
 * @slot error - Replaces the error text — slotted content takes precedence over the `error` prop
 *
 * @part wrapper - The input wrapper element
 * @part label - The label element (inset or outside)
 * @part field - The field container element
 * @part input-row - The input row container element
 * @part input - The input element
 * @part status-icon - The inline error/success icon shown inside the field
 * @part spinner - The inline loading spinner shown inside the field while `loading`
 * @part helper - The helper text element
 *
 * @cssprop --input-bg - Background color
 * @cssprop --input-color - Text color
 * @cssprop --input-border-color - Border color
 * @cssprop --input-placeholder-color - Placeholder text color
 * @cssprop --input-radius - Border radius
 * @cssprop --input-padding - Inner padding (block inline)
 * @cssprop --input-label-block-inset - Inset from the field block start for an inset label
 * @cssprop --input-label-inset - Inset from the field inline start for an inset label
 * @cssprop --input-gap - Gap between prefix/suffix icons and input text
 * @cssprop --input-font-size - Font size
 * @cssprop --input-height - Field height
 * @cssprop --input-hover-bg - Field background on hover (flat/ghost variants)
 * @cssprop --input-hover-border-color - Field border on hover (flat/bordered variants)
 * @cssprop --input-focus-bg - Field background when focused (flat variant)
 * @cssprop --input-focus-border-color - Field border when focused (flat/text variants)
 *
 * @example
 * ```html
 * <ore-input type="email" label="Email" placeholder="you@example.com" />
 * <ore-input label="Name" variant="bordered" color="primary" />
 * <ore-input label="Username" error="That username is taken" />
 * <ore-input label="Username" success />
 * <ore-input label="Username" loading />
 * ```
 */
export declare const INPUT_TAG: "ore-input";
//# sourceMappingURL=input.d.ts.map