phone-input-lib/dist/index.d.mts

A lightweight, developer-friendly npm library that provides a phone number input component with flags, country codes, and Tailwind support.

import React$1 from 'react';
import { CountryCode } from 'libphonenumber-js';
export { CountryCode } from 'libphonenumber-js';
import { Country } from 'countries-ts';

interface CountryData {
    name: string;
    dialCode: string;
    flag: string;
    priority?: number;
    code: CountryCode;
}
interface PhoneInputProps {
    value: string;
    onChange: (value: string) => void;
    defaultCountry?: CountryCode;
    className?: string;
    inputClassName?: string;
    selectClassName?: string;
    showFlags?: boolean;
    disabled?: boolean;
    placeholder?: string;
    required?: boolean;
    error?: boolean;
    id?: string;
    style?: React.CSSProperties;
    inputId?: string;
    inputStyle?: React.CSSProperties;
    inputName?: string;
    selectId?: string;
    selectStyle?: React.CSSProperties;
    selectName?: string;
}
interface PhoneValidationResult {
    isValid: boolean;
    formattedValue: string;
    nationalFormat: string;
    internationalFormat: string;
    e164Format: string;
}

declare const PhoneInput: React$1.FC<PhoneInputProps>;

/** * Size variants for the CountrySelect component */
type CountrySelectSize = 'sm' | 'md' | 'lg';
/** * Props for the CountrySelect component */
interface CountrySelectProps {
    /** Selected country code (ISO2) - controlled component */
    value?: CountryCode;
    /** Callback when country selection changes */
    onChange: (countryCode: CountryCode, country: CountryData) => void;
    /** Default selected country code for uncontrolled usage */
    defaultValue?: CountryCode;
    /** Additional CSS class names */
    className?: string;
    /** Whether to show country flags */
    showFlags?: boolean;
    /** Whether the component is disabled */
    disabled?: boolean;
    /** Placeholder text when no country is selected */
    placeholder?: string;
    /** Whether to show search input in dropdown */
    searchable?: boolean;
    /** Whether the component is in error state */
    error?: boolean;
    /** Whether the component is in loading state */
    loading?: boolean;
    /** Size variant of the component */
    size?: CountrySelectSize;
    /** Maximum height of dropdown in pixels */
    maxDropdownHeight?: number;
    /** Whether to show dial codes in options */
    showDialCodes?: boolean;
    /** Custom filter function for countries */
    filterCountries?: (countries: CountryData[]) => CountryData[];
    /** Accessible label for screen readers */
    'aria-label'?: string;
    /** Whether the field is required */
    required?: boolean;
    id?: string;
    style?: React$1.CSSProperties;
    name?: string;
    onFocus?: () => void;
    onBlur?: () => void;
    onOpen?: () => void;
    onClose?: () => void;
}
declare const CountrySelect: React$1.FC<CountrySelectProps>;

interface FlagIconProps {
    country: CountryData;
    className?: string;
    showFlags?: boolean;
}
declare const FlagIcon: React$1.FC<FlagIconProps>;

declare const countries: CountryData[];
declare const mappedDefaultCountry: CountryData;

declare const mapCountryData: (country: Country) => CountryData;

declare const CSS_PATH = "./styles/phone-input.css";

export { CSS_PATH, type CountryData, CountrySelect, type CountrySelectProps, type CountrySelectSize, FlagIcon, PhoneInput, type PhoneInputProps, type PhoneValidationResult, countries, mapCountryData, mappedDefaultCountry };