import { type Replacement } from "@react-input/mask";
import { LucideIcon } from "lucide-react";
import { InputHTMLAttributes } from "react";
import "./style.css";
type MaskedInputProps = Omit<InputHTMLAttributes<HTMLInputElement>, "size" | "prefix" | "name" | "type"> & {
    name: string;
    mask: string;
    replacement: string | Replacement;
    separate?: boolean;
    showMask?: boolean;
    label?: string;
    errorMessage?: string;
    isLoading?: boolean;
    size?: "md" | "lg";
    variant?: "solid" | "outline" | "underline";
    prefix?: string | LucideIcon;
    suffix?: string | LucideIcon;
    showAsterisk?: boolean;
    leftIcon?: LucideIcon;
    rightIcon?: LucideIcon;
    value?: string | null;
    defaultValue?: string | null;
};
/**
 * MaskedInput component - used for text input fields with input masking support, labels, validation, icons, and loading states
 *
 * @param props - MaskedInput component properties
 * @param props.name - Required field name for form handling
 * @param props.mask - Input mask pattern (e.g., "___.___.___-__" for CPF)
 * @param props.replacement - Character or replacement configuration for mask positions
 * @param props.separate - Whether to separate mask characters from input value. Default: undefined
 * @param props.showMask - Whether to show the mask placeholder. Default: undefined
 * @param props.label - Optional label text to display above the input
 * @param props.errorMessage - Error message to display below the input
 * @param props.isLoading - Controls loading state with spinner. Default: false
 * @param props.size - Input size. Default: "md"
 * @param props.variant - Visual variant of the input. Default: "solid"
 * @param props.prefix - Text or icon to display at the beginning of the input
 * @param props.suffix - Text or icon to display at the end of the input
 * @param props.showAsterisk - Whether to show asterisk on label for required fields
 * @param props.leftIcon - Optional icon to display on the left side
 * @param props.rightIcon - Optional icon to display on the right side
 *
 * **...Other valid HTML properties for input element (except 'type' which is controlled by the mask)**
 *
 * @returns MaskedInput JSX element wrapped in FieldGroup with optional label and error
 *
 * @example
 * ```tsx
 * // Basic masked input for phone number
 * <MaskedInput
 *   name="phone"
 *   mask="(__) _____-____"
 *   replacement={{ _: /\d/ }}
 *   placeholder="(00) 00000-0000"
 * />
 *
 * // CPF input with label and validation
 * <MaskedInput
 *   name="cpf"
 *   label="CPF"
 *   mask="___.___.___-__"
 *   replacement="_"
 *   showAsterisk
 *   errorMessage="Please enter a valid CPF"
 *   showMask
 * />
 *
 * // Credit card input with icons and loading state
 * <MaskedInput
 *   name="creditCard"
 *   label="Credit Card"
 *   mask="____ ____ ____ ____"
 *   replacement={{ _: /\d/ }}
 *   leftIcon={CreditCardIcon}
 *   rightIcon={ShieldIcon}
 *   isLoading
 * />
 *
 * // Date input with prefix/suffix
 * <MaskedInput
 *   name="birthDate"
 *   label="Birth Date"
 *   mask="__/__/____"
 *   replacement="_"
 *   prefix="📅"
 *   variant="outline"
 *   separate
 * />
 *
 * // Large masked input with underline variant
 * <MaskedInput
 *   name="zipCode"
 *   label="ZIP Code"
 *   mask="_____-___"
 *   replacement={{ _: /\d/ }}
 *   size="lg"
 *   variant="underline"
 *   placeholder="00000-000"
 * />
 * ```
 */
declare function MaskedInput(props: MaskedInputProps): import("react/jsx-runtime").JSX.Element;
export { MaskedInput };
//# sourceMappingURL=index.d.ts.map