import React from 'react';
/**
 * Input component props
 * @property {InputSize} size - The size of the input
 * @property {InputState} state - The state of the input (default, disabled, invalid)
 * @property {string} label - Optional label text for the input
 * @property {string} helperText - Optional helper text displayed below the input
 * @property {React.ReactNode} iconStart - Icon to display before the input
 * @property {React.ReactNode} iconEnd - Icon to display after the input
 * @property {React.ReactNode} keyboardShortcut - Keyboard shortcut to display on the right side
 * @property {boolean} required - Whether the input is required
 * @property {boolean} passwordToggle - Whether to show a toggle button for password fields
 * @property {boolean} showNumberControls - Whether to display increment/decrement controls for number input
 * @property {number} min - Minimum value for number input
 * @property {number} max - Maximum value for number input
 * @property {number} step - Step value for number input
 * @property {PasswordStrengthIndicator} passwordStrengthIndicator - Password strength indicator configuration
 * @property {number} currencyDecimalPlaces - Number of decimal places for currency inputs
 */
export interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size' | 'type' | 'className'> {
    /** The size of the input */
    size?: InputSize;
    /** The state of the input (default, disabled, invalid) */
    state?: InputState;
    /**
     * The type of input. In addition to standard HTML types,
     * supports masked input types: 'creditCard', 'expiryDate', 'phone', 'ssn', 'currency'
     */
    type?: InputType;
    /** Optional label for the input — pass a string for default styling, or a ReactNode for full control */
    label?: React.ReactNode;
    /** Optional helper text below the input — pass a string for default styling, or a ReactNode for full control */
    helperText?: React.ReactNode;
    /** Icon to display before the input (small decorative) */
    iconStart?: React.ReactNode;
    /** Icon to display after the input (small decorative) */
    iconEnd?: React.ReactNode;
    /** Content to display before the input (larger structural) */
    contentStart?: React.ReactNode;
    /** Content to display after the input (larger structural) */
    contentEnd?: React.ReactNode;
    /** Keyboard shortcut to display on the right side */
    keyboardShortcut?: React.ReactNode;
    /** Additional class name for the input (highest priority) */
    className?: string;
    /** Additional class name for the label */
    labelClassName?: string;
    /** Additional class name for the helper text */
    helperTextClassName?: string;
    /** Additional class name for the wrapper */
    wrapperClassName?: string;
    /** Additional class name for the input group */
    inputGroupClassName?: string;
    /** Whether the input is required */
    required?: boolean;
    /** Whether to show a toggle button for password fields. Only works when type="password" */
    passwordToggle?: boolean;
    /** Whether to show increment/decrement controls for number inputs (false by default). Only works when type="number" */
    showNumberControls?: boolean;
    /** Password strength indicator configuration. Only applies when type="password" */
    passwordStrengthIndicator?: PasswordStrengthIndicator;
    /** Number of decimal places for currency inputs (default: 2). Only applies when type="currency" */
    currencyDecimalPlaces?: number;
    /**
     * Force dark mode styling for the component. Use when placing the component
     * on a dark background while the page is in light mode.
     * @default false
     */
    darkMode?: boolean;
}
export type InputSize = 'sm' | 'md' | 'lg';
export type InputState = 'default' | 'disabled' | 'invalid';
/**
 * Input types combining HTML standard types and custom masked input types
 */
export type InputType = 'text' | 'password' | 'email' | 'number' | 'tel' | 'url' | 'search' | 'date' | 'time' | 'datetime-local' | 'month' | 'week' | 'color' | 'file' | 'hidden' | 'image' | 'range' | 'reset' | 'submit' | 'creditCard' | 'expiryDate' | 'phone' | 'ssn' | 'currency';
/**
 * Password strength indicator configuration
 */
export interface PasswordStrengthIndicator {
    /** Whether to show the strength indicator */
    show: boolean;
    /** The current strength level */
    strength?: PasswordStrength;
    /** Custom label text to show. If not provided, default labels based on strength will be used */
    customLabel?: string;
    /** Custom class name for the indicator container */
    className?: string;
    /** The position of the strength indicator */
    position?: 'right' | 'below';
}
/**
 * Password strength levels
 */
export type PasswordStrength = 'weak' | 'moderate' | 'strong' | 'very-strong';
/**
 * Clean theme structure for Input component - following current Flikkui patterns
 */
export interface InputTheme {
    wrapperStyle: string;
    inputGroupStyle: string;
    inputGroupFocusStyle: string;
    inputGroupFocusInvalidStyle: string;
    baseStyle: string;
    sizes: Record<InputSize, string>;
    states: Record<InputState, string>;
    helperText: string;
    iconStartStyle: string;
    iconEndStyle: string;
    iconPadding: {
        left: string;
        right: string;
    };
    contentStyle: Record<InputSize, string>;
    contentStartStyle: string;
    contentEndStyle: string;
    keyboardShortcutStyle: string;
    passwordToggleStyle: string;
    numberButtonsContainerStyle: string;
    numberButtonStyle: string;
    typeStyles: {
        password: {
            toggleIconActive: string;
            toggleIconInactive: string;
        };
        search: {
            iconStyle: string;
        };
        number: {
            incrementIconStyle: string;
            decrementIconStyle: string;
        };
    };
    passwordStrengthIndicator: {
        containerStyle: string;
        labelStyle: string;
        dotStyle: string;
        dotActiveStyle: string;
        dotInactiveStyle: string;
        strengthStyles: Record<PasswordStrength, {
            label: string;
            color: string;
        }>;
    };
}
