phone-input-lib/dist/index.mjs.map

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

{"version":3,"sources":["../src/components/PhoneInput.tsx","../src/components/CountrySelect.tsx","../src/data/countries.ts","../src/utils/mapCountryData.ts","../src/components/FlagIcon.tsx","../src/hooks/usePhoneValidation.ts","../src/index.ts"],"sourcesContent":["import React, { useState, useEffect, useCallback } from 'react';\r\nimport { CountrySelect } from './CountrySelect';\r\nimport { validatePhone } from '../hooks/usePhoneValidation';\r\nimport { CountryData, PhoneInputProps } from '../types';\r\nimport countries from '../data/countries';\r\nimport { CountryCode } from 'libphonenumber-js';\r\n\r\nexport const PhoneInput: React.FC<PhoneInputProps> = ({\r\n  value = '',\r\n  onChange,\r\n  defaultCountry = 'US',\r\n  className = '',\r\n  inputClassName = '',\r\n  selectClassName = '',\r\n  showFlags = true,\r\n  disabled = false,\r\n  placeholder = 'Phone number',\r\n  required = false,\r\n  error = false,\r\n  id,\r\n  style,\r\n  inputId,\r\n  inputStyle,\r\n  inputName,\r\n  selectId,\r\n  selectStyle,\r\n  selectName,\r\n}) => {\r\n  // Get initial country based on defaultCountry prop\r\n  const getInitialCountry = useCallback(() => {\r\n    return countries.find((c) => c.code === defaultCountry) || countries[0];\r\n  }, [defaultCountry]);\r\n\r\n  // State for the selected country\r\n  const [selectedCountry, setSelectedCountry] =\r\n    useState<CountryData>(getInitialCountry);\r\n\r\n  // State for just the phone number part (no country code)\r\n  const [phoneNumber, setPhoneNumber] = useState<string>('');\r\n\r\n  // State for validation error\r\n  const [validationError, setValidationError] = useState<boolean>(false);\r\n\r\n  // Parse incoming value to extract phone number part\r\n  const parseIncomingValue = useCallback(\r\n    (incomingValue: string) => {\r\n      if (!incomingValue || incomingValue.trim() === '') {\r\n        return '';\r\n      }\r\n\r\n      // If value starts with +, extract the number part after the dial code\r\n      if (incomingValue.startsWith('+')) {\r\n        const dialCodeRegex = new RegExp(`^\\\\+${selectedCountry.dialCode}\\\\s*`);\r\n        const phoneNumberPart = incomingValue.replace(dialCodeRegex, '').trim();\r\n        return phoneNumberPart;\r\n      }\r\n\r\n      // If it doesn't start with +, treat it as just the phone number\r\n      return incomingValue.trim();\r\n    },\r\n    [selectedCountry.dialCode]\r\n  );\r\n\r\n  // Initialize phone number from value prop\r\n  useEffect(() => {\r\n    const parsedNumber = parseIncomingValue(value);\r\n    setPhoneNumber(parsedNumber);\r\n  }, [value, parseIncomingValue]);\r\n\r\n  // Update country when defaultCountry prop changes\r\n  useEffect(() => {\r\n    const newCountry = getInitialCountry();\r\n    setSelectedCountry(newCountry);\r\n  }, [getInitialCountry]);\r\n\r\n  // Handle country selection change\r\n  const handleCountryChange = useCallback(\r\n    (countryCode: CountryCode, countryData: CountryData) => {\r\n      console.log('PhoneInput: Country change handler called', {\r\n        countryCode,\r\n        countryData,\r\n      });\r\n\r\n      setSelectedCountry(countryData);\r\n\r\n      // Rebuild the full phone value with new country code\r\n      if (phoneNumber) {\r\n        const fullValue = `${countryData.dialCode} ${phoneNumber}`;\r\n        onChange(fullValue);\r\n      } else {\r\n        // If no phone number, still call onChange to update the country part\r\n        onChange(`${countryData.dialCode}`);\r\n      }\r\n    },\r\n    [phoneNumber, onChange]\r\n  );\r\n\r\n  // Handle phone number input changes\r\n  const handlePhoneNumberChange = useCallback(\r\n    (e: React.ChangeEvent<HTMLInputElement>) => {\r\n      const inputValue = e.target.value;\r\n\r\n      // Allow numbers, spaces, hyphens, parentheses, and dots\r\n      const cleanValue = inputValue.replace(/[^0-9\\s\\-\\(\\)\\.]/g, '');\r\n\r\n      // Update local state\r\n      setPhoneNumber(cleanValue);\r\n\r\n      // Create the full international format\r\n      const fullValue = cleanValue\r\n        ? `${selectedCountry.dialCode} ${cleanValue}`\r\n        : `${selectedCountry.dialCode}`;\r\n      onChange(fullValue);\r\n\r\n      // Validate if there's a value\r\n      if (cleanValue) {\r\n        try {\r\n          const validationResult = validatePhone({\r\n            value: cleanValue,\r\n            country: selectedCountry,\r\n          });\r\n          setValidationError(!validationResult.isValid);\r\n        } catch (error) {\r\n          setValidationError(true);\r\n        }\r\n      } else {\r\n        setValidationError(false);\r\n      }\r\n    },\r\n    [selectedCountry, onChange]\r\n  );\r\n\r\n  console.log('PhoneInput render - Selected Country:', selectedCountry);\r\n\r\n  return (\r\n    <div className={className} id={id} style={style}>\r\n      <CountrySelect\r\n        value={selectedCountry.code}\r\n        onChange={handleCountryChange}\r\n        className={selectClassName}\r\n        showFlags={showFlags}\r\n        disabled={disabled}\r\n        id={selectId}\r\n        style={selectStyle}\r\n        name={selectName}\r\n        searchable={true}\r\n        showDialCodes={true}\r\n        placeholder=\"Select country\"\r\n      />\r\n      <input\r\n        type=\"tel\"\r\n        value={phoneNumber}\r\n        onChange={handlePhoneNumberChange}\r\n        className={`${inputClassName} ${validationError || error ? 'error' : ''}`}\r\n        disabled={disabled}\r\n        placeholder={placeholder}\r\n        required={required}\r\n        id={inputId}\r\n        style={inputStyle}\r\n        name={inputName}\r\n        autoComplete=\"tel\"\r\n      />\r\n    </div>\r\n  );\r\n};\r\n","import React, {\r\n  useMemo,\r\n  useState,\r\n  useRef,\r\n  useEffect,\r\n  useCallback,\r\n} from 'react';\r\nimport { CountryData } from '../types';\r\nimport countries from '../data/countries';\r\nimport { FlagIcon } from './FlagIcon';\r\nimport { CountryCode } from 'libphonenumber-js';\r\n\r\n/** * Size variants for the CountrySelect component */\r\nexport type CountrySelectSize = 'sm' | 'md' | 'lg';\r\n\r\n/** * Props for the CountrySelect component */\r\nexport interface CountrySelectProps {\r\n  /** Selected country code (ISO2) - controlled component */\r\n  value?: CountryCode;\r\n  /** Callback when country selection changes */\r\n  onChange: (countryCode: CountryCode, country: CountryData) => void;\r\n  /** Default selected country code for uncontrolled usage */\r\n  defaultValue?: CountryCode;\r\n  /** Additional CSS class names */\r\n  className?: string;\r\n  /** Whether to show country flags */\r\n  showFlags?: boolean;\r\n  /** Whether the component is disabled */\r\n  disabled?: boolean;\r\n  /** Placeholder text when no country is selected */\r\n  placeholder?: string;\r\n  /** Whether to show search input in dropdown */\r\n  searchable?: boolean;\r\n  /** Whether the component is in error state */\r\n  error?: boolean;\r\n  /** Whether the component is in loading state */\r\n  loading?: boolean;\r\n  /** Size variant of the component */\r\n  size?: CountrySelectSize;\r\n  /** Maximum height of dropdown in pixels */\r\n  maxDropdownHeight?: number;\r\n  /** Whether to show dial codes in options */\r\n  showDialCodes?: boolean;\r\n  /** Custom filter function for countries */\r\n  filterCountries?: (countries: CountryData[]) => CountryData[];\r\n  /** Accessible label for screen readers */\r\n  'aria-label'?: string;\r\n  /** Whether the field is required */\r\n  required?: boolean;\r\n\r\n  // HTML attributes\r\n  id?: string;\r\n  style?: React.CSSProperties;\r\n  name?: string;\r\n\r\n  // Event handlers\r\n  onFocus?: () => void;\r\n  onBlur?: () => void;\r\n  onOpen?: () => void;\r\n  onClose?: () => void;\r\n}\r\n\r\n/** * Size-based styling configurations */\r\nconst sizeStyles: Record<\r\n  CountrySelectSize,\r\n  {\r\n    trigger: React.CSSProperties;\r\n    fontSize: string;\r\n    iconSize: string;\r\n  }\r\n> = {\r\n  sm: {\r\n    trigger: { padding: '0.375rem 0.5rem' },\r\n    fontSize: '0.75rem',\r\n    iconSize: '0.875rem',\r\n  },\r\n  md: {\r\n    trigger: { padding: '0.5rem 0.75rem' },\r\n    fontSize: '0.875rem',\r\n    iconSize: '1rem',\r\n  },\r\n  lg: {\r\n    trigger: { padding: '0.75rem 1rem' },\r\n    fontSize: '1rem',\r\n    iconSize: '1.125rem',\r\n  },\r\n};\r\n\r\n/** * Base styles for the component */\r\nconst styles = {\r\n  container: {\r\n    position: 'relative' as const,\r\n    display: 'inline-block',\r\n    width: '100%',\r\n  },\r\n  trigger: {\r\n    display: 'flex',\r\n    alignItems: 'center',\r\n    justifyContent: 'space-between',\r\n    width: '100%',\r\n    // lineHeight: '1.25rem',\r\n    color: '#374151',\r\n    backgroundColor: '#ffffff',\r\n    border: '1px solid #d1d5db',\r\n    borderRadius: '0.5rem',\r\n    cursor: 'pointer',\r\n    transition: 'all 0.15s ease-in-out',\r\n    outline: 'none',\r\n    minHeight: '2.5rem',\r\n  },\r\n  triggerHover: {\r\n    borderColor: '#9ca3af',\r\n  },\r\n  triggerFocused: {\r\n    borderColor: '#3b82f6',\r\n    boxShadow: '0 0 0 3px rgba(59, 130, 246, 0.1)',\r\n  },\r\n  triggerError: {\r\n    borderColor: '#ef4444',\r\n    boxShadow: '0 0 0 3px rgba(239, 68, 68, 0.1)',\r\n  },\r\n  triggerDisabled: {\r\n    backgroundColor: '#f9fafb',\r\n    color: '#9ca3af',\r\n    cursor: 'not-allowed',\r\n    opacity: 0.6,\r\n  },\r\n  content: {\r\n    display: 'flex',\r\n    alignItems: 'center',\r\n    gap: '0.5rem',\r\n    flex: 1,\r\n    minWidth: 0,\r\n  },\r\n  chevron: {\r\n    width: '1rem',\r\n    height: '1rem',\r\n    transition: 'transform 0.2s ease-in-out',\r\n    fill: 'currentColor',\r\n    flexShrink: 0,\r\n  },\r\n  chevronOpen: {\r\n    transform: 'rotate(180deg)',\r\n  },\r\n  loadingSpinner: {\r\n    width: '1rem',\r\n    height: '1rem',\r\n    border: '2px solid #e5e7eb',\r\n    borderTop: '2px solid #3b82f6',\r\n    borderRadius: '50%',\r\n    animation: 'spin 1s linear infinite',\r\n  },\r\n  dropdown: {\r\n    position: 'absolute' as const,\r\n    top: '100%',\r\n    left: '0',\r\n    right: '0',\r\n    marginTop: '0.25rem',\r\n    backgroundColor: '#ffffff',\r\n    border: '1px solid #d1d5db',\r\n    borderRadius: '0.5rem',\r\n    boxShadow:\r\n      '0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)',\r\n    zIndex: 1000,\r\n    overflowY: 'auto' as const,\r\n  },\r\n  searchContainer: {\r\n    padding: '0.5rem',\r\n    borderBottom: '1px solid #e5e7eb',\r\n    position: 'sticky' as const,\r\n    top: 0,\r\n    backgroundColor: '#ffffff',\r\n    zIndex: 1,\r\n  },\r\n  searchInput: {\r\n    width: '100%',\r\n    padding: '0.5rem',\r\n    fontSize: '0.875rem',\r\n    border: '1px solid #d1d5db',\r\n    borderRadius: '0.375rem',\r\n    outline: 'none',\r\n    backgroundColor: '#ffffff',\r\n  },\r\n  searchInputFocused: {\r\n    borderColor: '#3b82f6',\r\n    boxShadow: '0 0 0 2px rgba(59, 130, 246, 0.1)',\r\n  },\r\n  optionsList: {\r\n    maxHeight: '200px',\r\n    overflowY: 'auto' as const,\r\n  },\r\n  option: {\r\n    display: 'flex',\r\n    alignItems: 'center',\r\n    gap: '0.5rem',\r\n    padding: '0.5rem 0.75rem',\r\n    fontSize: '0.875rem',\r\n    color: '#374151',\r\n    cursor: 'pointer',\r\n    transition: 'background-color 0.15s ease-in-out',\r\n  },\r\n  optionHover: {\r\n    backgroundColor: '#f3f4f6',\r\n  },\r\n  optionSelected: {\r\n    backgroundColor: '#eff6ff',\r\n    color: '#1d4ed8',\r\n    fontWeight: '500' as const,\r\n  },\r\n  optionText: {\r\n    whiteSpace: 'nowrap' as const,\r\n    overflow: 'hidden',\r\n    textOverflow: 'ellipsis',\r\n    flex: 1,\r\n  },\r\n  optionDialCode: {\r\n    color: '#6b7280',\r\n    fontSize: '0.8rem',\r\n    flexShrink: 0,\r\n  },\r\n  noResults: {\r\n    padding: '0.75rem',\r\n    textAlign: 'center' as const,\r\n    color: '#6b7280',\r\n    fontSize: '0.875rem',\r\n  },\r\n  placeholder: {\r\n    color: '#9ca3af',\r\n  },\r\n};\r\n\r\nexport const CountrySelect: React.FC<CountrySelectProps> = ({\r\n  value,\r\n  onChange,\r\n  defaultValue,\r\n  className = '',\r\n  showFlags = true,\r\n  disabled = false,\r\n  placeholder = 'Select country',\r\n  searchable = false,\r\n  error = false,\r\n  loading = false,\r\n  size = 'md',\r\n  maxDropdownHeight = 300,\r\n  showDialCodes = true,\r\n  filterCountries,\r\n  'aria-label': ariaLabel,\r\n  required = false,\r\n  id,\r\n  style,\r\n  name,\r\n  onFocus,\r\n  onBlur,\r\n  onOpen,\r\n  onClose,\r\n}) => {\r\n  // State management\r\n  const [isOpen, setIsOpen] = useState(false);\r\n  const [hoveredIndex, setHoveredIndex] = useState(-1);\r\n  const [isFocused, setIsFocused] = useState(false);\r\n  const [searchQuery, setSearchQuery] = useState('');\r\n  const [internalValue, setInternalValue] = useState<CountryCode | undefined>(\r\n    defaultValue\r\n  );\r\n\r\n  // Refs\r\n  const containerRef = useRef<HTMLDivElement>(null);\r\n  const searchInputRef = useRef<HTMLInputElement>(null);\r\n  const dropdownRef = useRef<HTMLDivElement>(null);\r\n\r\n  // Determine if component is controlled or uncontrolled\r\n  const isControlled = value !== undefined;\r\n  const currentValue = isControlled ? value : internalValue;\r\n\r\n  // Process and sort countries\r\n  const processedCountries = useMemo(() => {\r\n    let processedList = [...countries];\r\n\r\n    // Apply custom filter if provided\r\n    if (filterCountries) {\r\n      processedList = filterCountries(processedList);\r\n    }\r\n\r\n    // Sort countries by priority and then alphabetically by name\r\n    processedList.sort((a, b) => {\r\n      const priorityA = a.priority || 999;\r\n      const priorityB = b.priority || 999;\r\n      if (priorityA !== priorityB) {\r\n        return priorityA - priorityB;\r\n      }\r\n      return a.name.localeCompare(b.name);\r\n    });\r\n\r\n    return processedList;\r\n  }, [filterCountries]);\r\n\r\n  // Filter countries based on search query\r\n  const filteredCountries = useMemo(() => {\r\n    if (!searchQuery.trim()) {\r\n      return processedCountries;\r\n    }\r\n    const query = searchQuery.toLowerCase().trim();\r\n    return processedCountries.filter(\r\n      (country) =>\r\n        country.name.toLowerCase().includes(query) ||\r\n        country.code.toLowerCase().includes(query) ||\r\n        country.dialCode.includes(query)\r\n    );\r\n  }, [processedCountries, searchQuery]);\r\n\r\n  // Find the currently selected country\r\n  const selectedCountry = useMemo(() => {\r\n    return (\r\n      processedCountries.find((country) => country.code === currentValue) ||\r\n      null\r\n    );\r\n  }, [processedCountries, currentValue]);\r\n\r\n  // Handle value changes\r\n  const handleValueChange = useCallback(\r\n    (countryCode: CountryCode, country: CountryData) => {\r\n      console.log('CountrySelect: handleValueChange called with', {\r\n        countryCode,\r\n        country,\r\n      });\r\n\r\n      if (!isControlled) {\r\n        setInternalValue(countryCode);\r\n      }\r\n\r\n      onChange(countryCode, country);\r\n    },\r\n    [isControlled, onChange]\r\n  );\r\n\r\n  // Close dropdown when clicking outside\r\n  useEffect(() => {\r\n    const handleClickOutside = (event: MouseEvent) => {\r\n      if (\r\n        containerRef.current &&\r\n        !containerRef.current.contains(event.target as Node)\r\n      ) {\r\n        handleClose();\r\n      }\r\n    };\r\n\r\n    if (isOpen) {\r\n      document.addEventListener('mousedown', handleClickOutside);\r\n      return () =>\r\n        document.removeEventListener('mousedown', handleClickOutside);\r\n    }\r\n  }, [isOpen]);\r\n\r\n  // Set initial hovered index when dropdown opens\r\n  useEffect(() => {\r\n    if (isOpen) {\r\n      const selectedIndex = filteredCountries.findIndex(\r\n        (country) => country.code === currentValue\r\n      );\r\n      setHoveredIndex(selectedIndex >= 0 ? selectedIndex : 0);\r\n\r\n      // Focus search input if searchable\r\n      if (searchable && searchInputRef.current) {\r\n        requestAnimationFrame(() => {\r\n          searchInputRef.current?.focus();\r\n        });\r\n      }\r\n    } else {\r\n      setHoveredIndex(-1);\r\n      setSearchQuery('');\r\n    }\r\n  }, [isOpen, currentValue, filteredCountries, searchable]);\r\n\r\n  // Handle dropdown open\r\n  const handleOpen = useCallback(() => {\r\n    if (disabled || loading) return;\r\n    setIsOpen(true);\r\n    setIsFocused(true);\r\n    onOpen?.();\r\n  }, [disabled, loading, onOpen]);\r\n\r\n  // Handle dropdown close\r\n  const handleClose = useCallback(() => {\r\n    setIsOpen(false);\r\n    setIsFocused(false);\r\n    onClose?.();\r\n  }, [onClose]);\r\n\r\n  // Handle focus\r\n  const handleFocus = useCallback(() => {\r\n    setIsFocused(true);\r\n    onFocus?.();\r\n  }, [onFocus]);\r\n\r\n  // Handle blur\r\n  const handleBlur = useCallback(() => {\r\n    if (!isOpen) {\r\n      setIsFocused(false);\r\n      onBlur?.();\r\n    }\r\n  }, [isOpen, onBlur]);\r\n\r\n  // Handle keyboard navigation\r\n  const handleKeyDown = useCallback(\r\n    (event: React.KeyboardEvent) => {\r\n      if (disabled || loading) return;\r\n\r\n      switch (event.key) {\r\n        case 'Enter':\r\n        case ' ':\r\n          event.preventDefault();\r\n          if (isOpen && hoveredIndex >= 0 && filteredCountries[hoveredIndex]) {\r\n            const selectedCountry = filteredCountries[hoveredIndex];\r\n            handleValueChange(selectedCountry.code, selectedCountry);\r\n            handleClose();\r\n          } else if (!isOpen) {\r\n            handleOpen();\r\n          }\r\n          break;\r\n\r\n        case 'ArrowDown':\r\n          event.preventDefault();\r\n          if (!isOpen) {\r\n            handleOpen();\r\n          } else {\r\n            setHoveredIndex((prev) => {\r\n              const nextIndex =\r\n                prev < filteredCountries.length - 1 ? prev + 1 : 0;\r\n              scrollToOption(nextIndex);\r\n              return nextIndex;\r\n            });\r\n          }\r\n          break;\r\n\r\n        case 'ArrowUp':\r\n          event.preventDefault();\r\n          if (!isOpen) {\r\n            handleOpen();\r\n          } else {\r\n            setHoveredIndex((prev) => {\r\n              const nextIndex =\r\n                prev > 0 ? prev - 1 : filteredCountries.length - 1;\r\n              scrollToOption(nextIndex);\r\n              return nextIndex;\r\n            });\r\n          }\r\n          break;\r\n\r\n        case 'Escape':\r\n          event.preventDefault();\r\n          handleClose();\r\n          break;\r\n\r\n        case 'Tab':\r\n          if (isOpen) {\r\n            handleClose();\r\n          }\r\n          break;\r\n\r\n        default:\r\n          // For searchable mode, open dropdown and focus search input\r\n          if (searchable && !isOpen && event.key.length === 1) {\r\n            handleOpen();\r\n          }\r\n          break;\r\n      }\r\n    },\r\n    [\r\n      disabled,\r\n      loading,\r\n      isOpen,\r\n      hoveredIndex,\r\n      filteredCountries,\r\n      handleValueChange,\r\n      handleClose,\r\n      handleOpen,\r\n      searchable,\r\n    ]\r\n  );\r\n\r\n  // Scroll to option in dropdown\r\n  const scrollToOption = useCallback((index: number) => {\r\n    if (dropdownRef.current) {\r\n      const option = dropdownRef.current.querySelector(\r\n        `[data-option-index=\"${index}\"]`\r\n      ) as HTMLElement;\r\n      if (option) {\r\n        option.scrollIntoView({ block: 'nearest' });\r\n      }\r\n    }\r\n  }, []);\r\n\r\n  // Handle search input changes\r\n  const handleSearchChange = useCallback(\r\n    (event: React.ChangeEvent<HTMLInputElement>) => {\r\n      const query = event.target.value;\r\n      setSearchQuery(query);\r\n      setHoveredIndex(0); // Reset to first option when searching\r\n    },\r\n    []\r\n  );\r\n\r\n  // Handle search input key down\r\n  const handleSearchKeyDown = useCallback(\r\n    (event: React.KeyboardEvent<HTMLInputElement>) => {\r\n      if (\r\n        event.key === 'ArrowDown' ||\r\n        event.key === 'ArrowUp' ||\r\n        event.key === 'Enter' ||\r\n        event.key === 'Escape'\r\n      ) {\r\n        // Delegate to main key handler\r\n        handleKeyDown(event);\r\n      }\r\n    },\r\n    [handleKeyDown]\r\n  );\r\n\r\n  // Handle trigger click\r\n  const handleTriggerClick = useCallback(() => {\r\n    if (disabled || loading) return;\r\n    if (isOpen) {\r\n      handleClose();\r\n    } else {\r\n      handleOpen();\r\n    }\r\n  }, [disabled, loading, isOpen, handleClose, handleOpen]);\r\n\r\n  // Handle option click\r\n  const handleOptionClick = useCallback(\r\n    (country: CountryData) => {\r\n      console.log('Option clicked:', country);\r\n      handleValueChange(country.code, country);\r\n      handleClose();\r\n    },\r\n    [handleValueChange, handleClose]\r\n  );\r\n\r\n  // Handle option hover\r\n  const handleOptionHover = useCallback((index: number) => {\r\n    setHoveredIndex(index);\r\n  }, []);\r\n\r\n  // Compute styles\r\n  const sizeConfig = sizeStyles[size];\r\n  const triggerStyle: React.CSSProperties = {\r\n    ...styles.trigger,\r\n    ...sizeConfig.trigger,\r\n    fontSize: sizeConfig.fontSize,\r\n    ...(disabled ? styles.triggerDisabled : {}),\r\n    ...(error && !disabled ? styles.triggerError : {}),\r\n    ...(isFocused && !disabled && !error ? styles.triggerFocused : {}),\r\n    ...style,\r\n  };\r\n\r\n  const chevronStyle: React.CSSProperties = {\r\n    ...styles.chevron,\r\n    width: sizeConfig.iconSize,\r\n    height: sizeConfig.iconSize,\r\n    ...(isOpen ? styles.chevronOpen : {}),\r\n  };\r\n\r\n  const dropdownStyle: React.CSSProperties = {\r\n    ...styles.dropdown,\r\n    maxHeight: `${maxDropdownHeight}px`,\r\n  };\r\n\r\n  // Generate display text for selected country\r\n  const getDisplayText = () => {\r\n    if (!selectedCountry) {\r\n      return placeholder;\r\n    }\r\n    return `(${selectedCountry.dialCode})`;\r\n  };\r\n\r\n  return (\r\n    <>\r\n      {/* Add keyframes for spinner animation */}\r\n      <style>\r\n        {`\r\n          @keyframes spin {\r\n            from { transform: rotate(0deg); }\r\n            to { transform: rotate(360deg); }\r\n          }\r\n        `}\r\n      </style>\r\n      <div\r\n        ref={containerRef}\r\n        className={className}\r\n        style={styles.container}\r\n        id={id}\r\n      >\r\n        {/* Trigger Button */}\r\n        <div\r\n          role=\"combobox\"\r\n          aria-expanded={isOpen}\r\n          aria-haspopup=\"listbox\"\r\n          aria-label={ariaLabel || 'Select country'}\r\n          aria-required={required}\r\n          aria-invalid={error}\r\n          tabIndex={disabled ? -1 : 0}\r\n          style={triggerStyle}\r\n          onClick={handleTriggerClick}\r\n          onKeyDown={handleKeyDown}\r\n          onFocus={handleFocus}\r\n          onBlur={handleBlur}\r\n          onMouseEnter={() => !disabled && setIsFocused(true)}\r\n          onMouseLeave={() => !isOpen && setIsFocused(false)}\r\n        >\r\n          <div style={styles.content}>\r\n            {showFlags && selectedCountry && (\r\n              <FlagIcon country={selectedCountry} showFlags={showFlags} />\r\n            )}\r\n            <span\r\n              style={{\r\n                ...styles.optionText,\r\n                ...(selectedCountry ? {} : styles.placeholder),\r\n                fontSize: sizeConfig.fontSize,\r\n              }}\r\n            >\r\n              {getDisplayText()}\r\n            </span>\r\n          </div>\r\n          {loading ? (\r\n            <div style={styles.loadingSpinner} />\r\n          ) : (\r\n            <svg style={chevronStyle} viewBox=\"0 0 24 24\">\r\n              <path d=\"M7 10l5 5 5-5z\" />\r\n            </svg>\r\n          )}\r\n        </div>\r\n\r\n        {/* Dropdown */}\r\n        {isOpen && !disabled && !loading && (\r\n          <div\r\n            ref={dropdownRef}\r\n            style={dropdownStyle}\r\n            role=\"listbox\"\r\n            aria-label=\"Country options\"\r\n          >\r\n            {/* Options List */}\r\n            <div style={styles.optionsList}>\r\n              {filteredCountries.length > 0 ? (\r\n                filteredCountries.map((country, index) => {\r\n                  const isSelected = country.code === currentValue;\r\n                  const isHovered = index === hoveredIndex;\r\n                  const optionStyle: React.CSSProperties = {\r\n                    ...styles.option,\r\n                    ...(isHovered ? styles.optionHover : {}),\r\n                    ...(isSelected ? styles.optionSelected : {}),\r\n                  };\r\n\r\n                  return (\r\n                    <div\r\n                      key={country.code}\r\n                      data-option-index={index}\r\n                      role=\"option\"\r\n                      aria-selected={isSelected}\r\n                      style={optionStyle}\r\n                      onClick={() => handleOptionClick(country)}\r\n                      onMouseEnter={() => handleOptionHover(index)}\r\n                    >\r\n                      <span style={styles.optionText}>{country.name}</span>\r\n                      {showDialCodes && (\r\n                        <span style={styles.optionDialCode}>\r\n                          {country.dialCode}\r\n                        </span>\r\n                      )}\r\n                    </div>\r\n                  );\r\n                })\r\n              ) : (\r\n                <div style={styles.noResults}>No countries found</div>\r\n              )}\r\n            </div>\r\n          </div>\r\n        )}\r\n\r\n        {/* Hidden select for form compatibility */}\r\n        <select\r\n          name={name}\r\n          value={currentValue || ''}\r\n          onChange={() => {}} // Controlled by div component\r\n          tabIndex={-1}\r\n          required={required}\r\n          style={{\r\n            position: 'absolute',\r\n            left: '-9999px',\r\n            opacity: 0,\r\n            pointerEvents: 'none',\r\n          }}\r\n          aria-hidden=\"true\"\r\n        >\r\n          <option value=\"\">{placeholder}</option>\r\n          {processedCountries.map((country) => (\r\n            <option key={country.code} value={country.code}>\r\n              {country.name} ({country.dialCode})\r\n            </option>\r\n          ))}\r\n        </select>\r\n      </div>\r\n    </>\r\n  );\r\n};\r\n","import { CountryData } from '../types';\r\n\r\nimport { Country, getByCountry, listCountries } from 'countries-ts';\r\nimport { mapCountryData } from '../utils/mapCountryData';\r\n\r\nexport const countries: CountryData[] = listCountries().map((country) => {\r\n  return mapCountryData(country);\r\n});\r\n\r\nconst defaultCountry = getByCountry('India') as Country;\r\nexport const mappedDefaultCountry: CountryData = mapCountryData(defaultCountry);\r\nexport default countries;\r\n","import { Country } from 'countries-ts';\r\nimport { CountryData } from '../types';\r\nimport { CountryCode } from 'libphonenumber-js';\r\n\r\nexport const mapCountryData = (country: Country): CountryData => {\r\n  const mappedData: CountryData = {\r\n    dialCode: country.countryCode,\r\n    flag: country.flag,\r\n    name: country.label,\r\n    code: country.code as CountryCode,\r\n  };\r\n  return mappedData;\r\n};\r\n","import React from 'react';\r\nimport { CountryData } from '../types';\r\n\r\nexport interface FlagIconProps {\r\n  country: CountryData;\r\n  className?: string;\r\n  showFlags?: boolean;\r\n}\r\n\r\nexport const FlagIcon: React.FC<FlagIconProps> = ({\r\n  country,\r\n  className = '',\r\n  showFlags = true,\r\n}) => {\r\n  if (!showFlags) {\r\n    return null;\r\n  }\r\n\r\n  return (\r\n    <span className={className} role=\"img\" aria-label={`${country.name} flag`}>\r\n      <img\r\n        src={country.flag}\r\n        alt={country.name}\r\n        style={{ width: '20px', objectFit: 'contain' }}\r\n      />\r\n    </span>\r\n  );\r\n};\r\n","import {\r\n  parseIncompletePhoneNumber,\r\n  formatIncompletePhoneNumber,\r\n  CountryCode,\r\n  validatePhoneNumberLength,\r\n} from 'libphonenumber-js';\r\nimport { CountryData } from '../types';\r\n\r\nexport interface UsePhoneValidationProps {\r\n  value: string;\r\n  country: CountryData;\r\n}\r\n\r\nexport interface PhoneValidationResult {\r\n  isValid: boolean;\r\n  formattedValue: string;\r\n  nationalFormat: string;\r\n  internationalFormat: string;\r\n  e164Format: string;\r\n  countryCode: string;\r\n}\r\n\r\nexport const validatePhone = ({\r\n  value,\r\n  country,\r\n}: UsePhoneValidationProps): PhoneValidationResult => {\r\n  try {\r\n    if (!country) {\r\n      return {\r\n        isValid: false,\r\n        formattedValue: value,\r\n        nationalFormat: '',\r\n        internationalFormat: '',\r\n        e164Format: '',\r\n        countryCode: '',\r\n      };\r\n    }\r\n\r\n    const code: CountryCode = country.code;\r\n\r\n    // Format the phone number based on the selected country\r\n    const formattedValue = formatIncompletePhoneNumber(value, code);\r\n\r\n    // Try to parse the phone number\r\n    const phoneNumber = parseIncompletePhoneNumber(value);\r\n\r\n    const isValid = validatePhoneNumberLength(\r\n      `${country.dialCode}${phoneNumber}`,\r\n      code\r\n    );\r\n    if (phoneNumber) {\r\n      return {\r\n        isValid: isValid === 'TOO_SHORT' || isValid === undefined,\r\n        formattedValue,\r\n        nationalFormat: phoneNumber,\r\n        internationalFormat: phoneNumber,\r\n        e164Format: phoneNumber,\r\n        countryCode: phoneNumber || '',\r\n      };\r\n    } else {\r\n      return {\r\n        isValid: false,\r\n        formattedValue,\r\n        nationalFormat: '',\r\n        internationalFormat: '',\r\n        e164Format: '',\r\n        countryCode: '',\r\n      };\r\n    }\r\n  } catch (error) {\r\n    // If there's an error, return the original value\r\n    return {\r\n      isValid: false,\r\n      formattedValue: value,\r\n      nationalFormat: '',\r\n      internationalFormat: '',\r\n      e164Format: '',\r\n      countryCode: '',\r\n    };\r\n  }\r\n};\r\n","// Components\r\nexport { PhoneInput } from './components/PhoneInput';\r\nexport { CountrySelect } from './components/CountrySelect';\r\nexport { FlagIcon } from './components/FlagIcon';\r\n\r\n// Types\r\nexport type {\r\n  PhoneInputProps,\r\n  CountryData,\r\n  PhoneValidationResult,\r\n} from './types';\r\n\r\n// CountrySelect specific types\r\nexport type {\r\n  CountrySelectProps,\r\n  CountrySelectSize,\r\n} from './components/CountrySelect';\r\n\r\n// Data\r\nexport { default as countries } from './data/countries';\r\nexport { mappedDefaultCountry } from './data/countries';\r\n\r\n// Utilities\r\nexport { mapCountryData } from './utils/mapCountryData';\r\n\r\n// Re-export commonly used types from libphonenumber-js for convenience\r\nexport type { CountryCode } from 'libphonenumber-js';\r\n\r\n// Styles - Import this CSS file in your project to get the component styles\r\n// import 'phone-input-lib/dist/phone-input.css';\r\nexport const CSS_PATH = './styles/phone-input.css';\r\n"],"mappings":"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","names":["useState","useEffect","useCallback","jsx","selectedCountry","jsx","jsxs","defaultCountry","useCallback","useState","useEffect","error"]}