import { CountryCode as CountryCode$1 } from 'libphonenumber-js/min'; export { CountryCode } from 'libphonenumber-js/min'; import { CountryCode } from 'libphonenumber-js'; import React$1 from 'react'; /** * Configuration options for MaskDial */ interface MaskDialOptions { /** ISO 3166-1 alpha-2 country code (e.g., 'US', 'GB', 'IN') */ country?: CountryCode; /** Fallback country when auto-detection fails */ defaultCountry?: CountryCode; /** Show international format with country code prefix */ international?: boolean; /** Placeholder character for unfilled digits (default: none) */ placeholder?: string; /** Called after each format operation */ onFormat?: (data: FormatData) => void; /** Called when validation state changes */ onValidate?: (isValid: boolean, isPossible: boolean) => void; /** Called when detected country changes */ onCountryChange?: (country: CountryCode | undefined) => void; } /** * Data returned after formatting a phone number */ interface FormatData { /** Formatted display value */ formatted: string; /** E.164 format (e.g., +12025551234) */ e164: string | undefined; /** National format without country code */ national: string; /** Raw digits only */ digits: string; /** Detected or specified country ISO code */ country: CountryCode | undefined; /** Is the number valid for the detected country */ isValid: boolean; /** Is the number possibly valid (less strict) */ isPossible: boolean; /** Format template (e.g., "(xxx) xxx-xxxx") */ template: string | undefined; /** Country calling code (e.g., "1" for US) */ countryCallingCode: string | undefined; } /** * Validation result with detailed information */ interface ValidationResult { isValid: boolean; isPossible: boolean; error?: string; } /** * Hook options for useMaskDial */ interface UseMaskDialOptions extends Omit { /** Initial phone number value */ initialValue?: string; /** Callback when the formatted value changes */ onValueChange?: (data: FormatData) => void; /** Callback when validation state changes */ onValidationChange?: (isValid: boolean, isPossible: boolean) => void; } /** * Return type for useMaskDial hook */ interface UseMaskDialReturn { /** Current formatted value */ value: string; /** Set the raw value (will be formatted) */ setValue: (value: string) => void; /** Current country code */ country: CountryCode$1 | undefined; /** Set the country */ setCountry: (country: CountryCode$1) => void; /** Whether the number is valid */ isValid: boolean; /** Whether the number is possible */ isPossible: boolean; /** E.164 formatted number */ e164: string | undefined; /** National formatted number */ national: string; /** International formatted number */ international: string; /** Digits only */ digits: string; /** Format data from last format operation */ formatData: FormatData | null; /** Input props to spread on input element */ inputProps: { value: string; onChange: (e: React.ChangeEvent) => void; onKeyDown: (e: React.KeyboardEvent) => void; type: 'tel'; inputMode: 'tel'; autoComplete: 'tel'; }; /** Ref to attach to input element for cursor management */ inputRef: React.RefObject; /** Reset to initial state */ reset: () => void; } /** * React hook for phone number formatting and validation * * @example * ```tsx * import { useMaskDial } from 'maskdial/react' * * function PhoneInput() { * const { inputProps, isValid, e164 } = useMaskDial({ * country: 'US', * onValueChange: (data) => console.log('Formatted:', data.formatted) * }) * * return ( *
* * {isValid && Valid: {e164}} *
* ) * } * ``` */ declare function useMaskDial(options?: UseMaskDialOptions): UseMaskDialReturn; /** * Props for MaskDialInput component */ interface MaskDialInputProps extends Omit, 'value' | 'onChange' | 'type'> { /** Current phone value (controlled mode) */ value?: string; /** Callback when value changes */ onChange?: (value: string, data: FormatData | null) => void; /** Default value (uncontrolled mode) */ defaultValue?: string; /** Country code for formatting */ country?: CountryCode$1; /** Callback when country changes (from auto-detection) */ onCountryChange?: (country: CountryCode$1 | undefined) => void; /** Callback when validation changes */ onValidationChange?: (isValid: boolean, isPossible: boolean) => void; /** Show validation state visually */ showValidation?: boolean; /** CSS class for valid state */ validClassName?: string; /** CSS class for invalid state */ invalidClassName?: string; /** ARIA label for accessibility */ 'aria-label'?: string; /** ARIA describedby for accessibility */ 'aria-describedby'?: string; } /** * Ref handle for MaskDialInput */ interface MaskDialInputRef { /** Get the current formatted value */ getValue: () => string; /** Set the value */ setValue: (value: string) => void; /** Get E.164 formatted number */ getE164: () => string | undefined; /** Get national formatted number */ getNational: () => string; /** Get international formatted number */ getInternational: () => string; /** Get digits only */ getDigits: () => string; /** Check if number is valid */ isValid: () => boolean; /** Check if number is possible */ isPossible: () => boolean; /** Get current country */ getCountry: () => CountryCode$1 | undefined; /** Set country */ setCountry: (country: CountryCode$1) => void; /** Focus the input */ focus: () => void; /** Reset to default state */ reset: () => void; } /** * Phone number input component with formatting and validation * * @example * ```tsx * // Controlled mode * import { MaskDialInput } from 'maskdial/react' * * function PhoneForm() { * const [phone, setPhone] = useState('') * * return ( * { * setPhone(value) * console.log('E.164:', data?.e164) * }} * country="US" * placeholder="(555) 555-5555" * /> * ) * } * * // Uncontrolled mode with ref * function UncontrolledForm() { * const inputRef = useRef(null) * * const handleSubmit = () => { * const e164 = inputRef.current?.getE164() * console.log('Submit:', e164) * } * * return ( *
* * * * ) * } * ``` */ declare const MaskDialInput: React$1.ForwardRefExoticComponent>; /** * Country data with dial codes and flag emoji */ interface Country { /** Country name in English */ name: string; /** ISO 3166-1 alpha-2 country code */ iso: CountryCode$1; /** International dial code (without +) */ dialCode: string; /** Flag emoji */ flag: string; /** Priority for sorting (lower = higher priority) */ priority?: number; } /** * Comprehensive list of countries with dial codes * Sorted alphabetically by name */ declare const countries: Country[]; /** * Get country by ISO code */ declare function getCountryByIso(iso: CountryCode$1): Country | undefined; /** * Get countries by dial code (may return multiple for shared codes like +1) */ declare function getCountriesByDialCode(dialCode: string): Country[]; /** * Search countries by name or dial code */ declare function searchCountries(query: string): Country[]; /** * Get sorted countries with priority countries first */ declare function getSortedCountries(priorityCountries?: CountryCode$1[]): Country[]; /** * Props for CountrySelect component */ interface CountrySelectProps { /** Selected country code */ value?: CountryCode$1; /** Callback when country changes */ onChange?: (country: CountryCode$1) => void; /** Default country (uncontrolled mode) */ defaultValue?: CountryCode$1; /** Priority countries to show at top */ priorityCountries?: CountryCode$1[]; /** Placeholder text */ placeholder?: string; /** Disable the select */ disabled?: boolean; /** Show search input */ searchable?: boolean; /** Search placeholder */ searchPlaceholder?: string; /** Custom class name */ className?: string; /** Custom class name for dropdown */ dropdownClassName?: string; /** Custom class name for option */ optionClassName?: string; /** Show dial code in options */ showDialCode?: boolean; /** Show flag in options */ showFlag?: boolean; /** ARIA label */ 'aria-label'?: string; /** Custom render for selected item */ renderSelected?: (country: Country | undefined) => React$1.ReactNode; /** Custom render for option */ renderOption?: (country: Country, isSelected: boolean, isFocused: boolean) => React$1.ReactNode; /** Dropdown position */ dropdownPosition?: 'auto' | 'top' | 'bottom'; /** ID for the component */ id?: string; } /** * Ref handle for CountrySelect */ interface CountrySelectRef { /** Get the selected country */ getValue: () => CountryCode$1 | undefined; /** Set the selected country */ setValue: (country: CountryCode$1) => void; /** Open the dropdown */ open: () => void; /** Close the dropdown */ close: () => void; /** Focus the component */ focus: () => void; } /** * Country selector component with flag icons and search * * @example * ```tsx * import { CountrySelect } from 'maskdial/react' * * function CountryForm() { * const [country, setCountry] = useState('US') * * return ( * * ) * } * ``` */ declare const CountrySelect: React$1.ForwardRefExoticComponent>; export { type Country, CountrySelect, type CountrySelectProps, type CountrySelectRef, type FormatData, MaskDialInput, type MaskDialInputProps, type MaskDialInputRef, type MaskDialOptions, type UseMaskDialOptions, type UseMaskDialReturn, type ValidationResult, countries, getCountriesByDialCode, getCountryByIso, getSortedCountries, searchCountries, useMaskDial };