import { DropdownOption } from '@mezzanine-ui/core/dropdown';
import { ChangeEventHandler, Ref } from 'react';
import { PopperPlacement } from '../Popper';
import { TextFieldAffixProps, TextFieldProps } from '../TextField';
import { NativeElementPropsWithoutKeyAndRef } from '../utils/jsx-types';
import { ActionButtonProps } from './ActionButton';
import { PasswordStrengthIndicatorProps } from './PasswordStrengthIndicator';
import { SelectButtonProps } from './SelectButton';
/**
 * Base props shared by all Input variants
 */
export interface InputBaseProps extends Omit<TextFieldProps, 'children' | 'clearable' | 'onClear' | 'prefix' | 'suffix'> {
    /**
     * The default value of input.
     */
    defaultValue?: string;
    /**
     * Formatter function to transform the value for display.
     * Common use cases: measure formatting (1000 → "1,000"), phone numbers, etc.
     * Default to formatting number with commas for "measure" variant.
     * @example
     * formatter={(value) => value.replace(/\B(?=(\d{3})+(?!\d))/g, ',')}
     */
    formatter?: (value: string) => string;
    /**
     * The id of input element.
     */
    id?: string;
    /**
     * The react ref passed to input element.
     */
    inputRef?: Ref<HTMLInputElement>;
    /**
     * The other native props for input element.
     */
    inputProps?: Omit<NativeElementPropsWithoutKeyAndRef<'input'>, 'defaultValue' | 'disabled' | 'onChange' | 'placeholder' | 'readOnly' | 'value' | 'type' | 'id' | 'name' | `aria-${'disabled' | 'multiline' | 'readonly'}`>;
    /**
     * The input type of input element.
     * @default 'text'
     */
    inputType?: NativeElementPropsWithoutKeyAndRef<'input'>['type'];
    /**
     * The name of input element.
     */
    name?: string;
    /**
     * The change event handler of input element.
     */
    onChange?: ChangeEventHandler<HTMLInputElement>;
    /**
     * Parser function to extract the raw value from formatted display value.
     * Should reverse the formatter transformation.
     * Default to removing commas for "measure" formatting.
     * @example
     * parser={(value) => value.replace(/,/g, '')}
     */
    parser?: (value: string) => string;
    /**
     * The placeholder of input.
     */
    placeholder?: string;
    /**
     * The value of input.
     */
    value?: string;
}
/**
 * Clearable props
 */
export type ClearableInput = Pick<TextFieldProps, 'clearable' | 'onClear'>;
/**
 * Number input
 */
export type NumberInput = {
    /**
     * The minimum value.
     */
    min?: number;
    /**
     * The maximum value.
     */
    max?: number;
    /**
     * The step value.
     * @default 1
     */
    step?: number;
};
/**
 * 1. Base Input - Basic input field
 */
export type BaseInputProps = InputBaseProps & ClearableInput & {
    /**
     * The type of input.
     * @default 'base'
     */
    variant?: 'base';
};
/**
 * 2. With Affix Input - Input with prefix/suffix decorations
 */
export type WithAffixInputProps = InputBaseProps & TextFieldAffixProps & ClearableInput & {
    variant: 'affix';
};
/**
 * 3. Search Input - Input with search icon prefix
 */
export type SearchInputProps = InputBaseProps & ClearableInput & {
    variant: 'search';
};
/**
 * 4. Number Input - Small numeric input (36x36)
 */
export type NumberInputProps = InputBaseProps & NumberInput & {
    variant: 'number';
};
/**
 * 5. Measure Input - Input with unit text and spinner buttons
 */
export type MeasureInputProps = InputBaseProps & NumberInput & TextFieldAffixProps & {
    variant: 'measure';
    /**
     * Whether to show spinner buttons.
     * @default false
     */
    showSpinner?: boolean;
    /**
     * Callback when spinner up button is clicked.
     */
    onSpinUp?: VoidFunction;
    /**
     * Callback when spinner down button is clicked.
     */
    onSpinDown?: VoidFunction;
};
/**
 * 6. Action Input - Input with action button (button is adjacent to TextField, not inside)
 */
export type ActionInputProps = InputBaseProps & {
    variant: 'action';
    /**
     * The action button props.
     */
    actionButton: ActionButtonProps & {
        position: 'prefix' | 'suffix';
    };
};
/**
 * 7. Select Input - Input with select button (button is adjacent to TextField, not inside)
 */
export type SelectInputProps = InputBaseProps & {
    variant: 'select';
    /**
     * The select button props.
     */
    selectButton: SelectButtonProps & {
        position: 'prefix' | 'suffix' | 'both';
    };
    /**
     * The options of the dropdown.
     */
    options?: DropdownOption[];
    /**
     * The selected value of the dropdown.
     */
    selectedValue?: string;
    /**
     * The onChange event handler of the dropdown.
     */
    onSelect?: (value: string) => void;
    /**
     * The width of the dropdown.
     */
    dropdownWidth?: number | string;
    /**
     * The max height of the dropdown.
     */
    dropdownMaxHeight?: number | string;
    /**
     * The placement of the dropdown.
     */
    dropdownPlacement?: PopperPlacement;
};
/**
 * 8. Password Input - Password input with visibility toggle
 */
export type WithPasswordStrengthIndicator = {
    /**
     * Whether to show password strength indicator.
     */
    showPasswordStrengthIndicator?: false;
    passwordStrengthIndicator?: never;
} | {
    /**
     * Whether to show password strength indicator.
     */
    showPasswordStrengthIndicator: true;
    /**
     * The props for password strength indicator.
     */
    passwordStrengthIndicator: PasswordStrengthIndicatorProps;
};
export type PasswordInputProps = InputBaseProps & ClearableInput & WithPasswordStrengthIndicator & {
    variant: 'password';
};
export type InputProps = BaseInputProps | WithAffixInputProps | SearchInputProps | NumberInputProps | MeasureInputProps | ActionInputProps | SelectInputProps | PasswordInputProps;
/**
 * 多功能輸入框元件，透過 `variant` 支援多種輸入類型。
 *
 * 支援以下八種 variant：`base`（基本輸入）、`affix`（帶前後綴裝飾）、`search`（搜尋，預設帶清除鍵）、
 * `number`（原生數字輸入）、`measure`（格式化數字，可選轉盤按鈕）、`action`（帶操作按鈕）、
 * `select`（帶下拉選單按鈕）、`password`（密碼，可切換可見性並顯示強度指示器）。
 * `measure` variant 會自動以千分位格式化顯示值，並在 `onChange` 時回傳原始數值。
 *
 * @example
 * ```tsx
 * import Input from '@mezzanine-ui/react/Input';
 *
 * // 基本輸入（可清除）
 * <Input variant="base" clearable placeholder="請輸入文字" />
 *
 * // 搜尋輸入
 * <Input variant="search" placeholder="搜尋關鍵字" />
 *
 * // 密碼輸入（含強度指示器）
 * <Input
 *   variant="password"
 *   placeholder="請輸入密碼"
 *   showPasswordStrengthIndicator
 *   passwordStrengthIndicator={{ strength: 2 }}
 * />
 *
 * // 數字計量輸入（含轉盤按鈕）
 * <Input variant="measure" suffix="px" showSpinner min={0} max={100} />
 * ```
 *
 * @see {@link FormField} 用於包裹 Input 並提供標籤與錯誤訊息
 * @see {@link TextField} Input 底層使用的文字框容器元件
 */
declare const Input: import("react").ForwardRefExoticComponent<InputProps & import("react").RefAttributes<HTMLDivElement>>;
export default Input;