import React from 'react';
import { type ComponentSize } from '../../../lib/utils';
import { IconName } from '../Icons';
import { type GlassVariant } from '../../../lib/glass';
/**
 * Input component props
 *
 * @public
 *
 * @example
 * ```tsx
 * // Composable API (recommended)
 * <Input size="md" variant="default">
 *   <InputLabel mandatory>Email</InputLabel>
 *   <InputField type="email" leadingIcon="mail" placeholder="Enter email" />
 *   <InputError>Invalid email</InputError>
 * </Input>
 *
 * // Declarative API (deprecated)
 * <Input label="Email" type="email" placeholder="Enter your email" />
 * ```
 */
export interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'> {
    /**
     * Input content (for composable API)
     */
    children?: React.ReactNode;
    /**
     * Label text displayed above the input
     */
    label?: string;
    /**
     * Shows mandatory indicator (*) next to label
     * @default false
     */
    labelMandatory?: boolean;
    /**
     * Shows optional indicator next to label
     * @default false
     */
    labelOptional?: boolean;
    /**
     * Shows suffix icon in label
     * @default false
     */
    labelSuffixIcon?: boolean;
    /**
     * Custom icon component for label
     */
    labelIcon?: React.ReactNode;
    /**
     * Error message displayed below input
     * When provided, input shows error styling
     */
    error?: string;
    /**
     * Warning message displayed below input
     * When provided, input shows warning styling
     */
    warning?: string;
    /**
     * Success message displayed below input
     * When provided, input shows success styling
     */
    success?: string;
    /**
     * Helper text displayed below input
     * Provides additional context or instructions
     */
    helperText?: string;
    /**
     * Icon displayed on the left side of input
     * Can be an IconName string or a custom React component
     * @see {@link IconName} for available icon names
     */
    leadingIcon?: IconName | React.ReactNode;
    /**
     * Icon displayed on the right side of input
     * Can be an IconName string or a custom React component
     * @see {@link IconName} for available icon names
     */
    trailingIcon?: IconName | React.ReactNode;
    /**
     * Size for leading icon (only applies when leadingIcon is IconName string)
     * @default Based on input size
     */
    leadingIconSize?: number;
    /**
     * Size for trailing icon (only applies when trailingIcon is IconName string)
     * @default Based on input size
     */
    trailingIconSize?: number;
    /**
     * Additional CSS classes for leading icon container
     */
    leadingIconClassName?: string;
    /**
     * Additional CSS classes for trailing icon container
     */
    trailingIconClassName?: string;
    /**
     * Additional CSS classes for InputField wrapper div
     */
    wrapperClassName?: string;
    /**
     * Additional inline styles for InputField wrapper div
     */
    wrapperStyle?: React.CSSProperties;
    /**
     * Input size
     * @default 'md'
     *
     * Available sizes: `xxs` (x4), `xs` (x6), `sm` (x8), `md` (x10),
     * `lg` (x12), `xl` (x14), `xxl` (x16)
     */
    size?: ComponentSize;
    /**
     * Visual style variant
     * @default 'default'
     *
     * - `default`: Standard input with border
     * - `filled`: Filled background style
     * - `outlined`: Outlined border style
     */
    variant?: 'default' | 'filled' | 'outlined';
    /**
     * Enable glassmorphism effect on input background
     * - `true`: Standard glass effect
     * - `'subtle'`: Subtle glass effect
     * - `'prominent'`: Prominent glass effect
     */
    glass?: GlassVariant;
}
/**
 * Input Component
 *
 * A versatile text input component with label, validation states, icons, and helper text.
 * Supports both composable API (recommended) and declarative API (deprecated).
 *
 * @public
 *
 * @example
 * ```tsx
 * // Composable API (recommended)
 * import { Input, InputLabel, InputField, InputError, InputHelper } from 'ft-design-system';
 *
 * function MyForm() {
 *   const [email, setEmail] = useState('');
 *   const [error, setError] = useState('');
 *
 *   return (
 *     <Input size="md" variant="default">
 *       <InputLabel mandatory>Email Address</InputLabel>
 *       <InputField
 *         type="email"
 *         value={email}
 *         onChange={(e) => setEmail(e.target.value)}
 *         leadingIcon="mail"
 *         placeholder="Enter your email"
 *       />
 *       {error && <InputError>{error}</InputError>}
 *       <InputHelper>We'll never share your email</InputHelper>
 *     </Input>
 *   );
 * }
 * ```
 *
 * @remarks
 * - Composable API provides maximum flexibility and control
 * - All sub-components (InputLabel, InputField, InputError, etc.) support `asChild`
 * - Automatically generates accessible IDs for labels and error messages
 * - Supports validation states: error, warning, success
 * - Icon positioning adapts to input size
 * - Accessible: includes ARIA attributes and keyboard navigation
 * - Declarative API is deprecated but still functional for backward compatibility
 */
export declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;
//# sourceMappingURL=Input.d.ts.map