lizaui 8.2.9 → 8.3.9

package/dist/phone-input/index.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.es.js","sources":["../../src/components/phone-input/phone-input.tsx"],"sourcesContent":["import type React from \"react\";\nimport { useState, useEffect, useRef, useId } from \"react\";\nimport { getCountryCallingCode, AsYouType, isValidPhoneNumber } from \"libphonenumber-js\";\nimport { ChevronDown, Check, Search } from \"lucide-react\";\nimport { twMerge } from \"tailwind-merge\";\nimport { cn } from \"@/lib/utils\";\nimport { LabelError, ScrollArea } from \"../ui\";\nimport { AnimatePresence } from \"framer-motion\";\nimport { LazyMotion, m, domAnimation } from \"framer-motion\";\n\nconst countryData = {\n\tPE: { name: \"Perú\", flag: \"🇵🇪\" },\n\tUS: { name: \"Estados Unidos\", flag: \"🇺🇸\" },\n\tMX: { name: \"México\", flag: \"🇲🇽\" },\n\tAR: { name: \"Argentina\", flag: \"🇦🇷\" },\n\tCO: { name: \"Colombia\", flag: \"🇨🇴\" },\n\tCL: { name: \"Chile\", flag: \"🇨🇱\" },\n\tBR: { name: \"Brasil\", flag: \"🇧🇷\" },\n\tBO: { name: \"Bolivia\", flag: \"🇧🇴\" },\n\tVE: { name: \"Venezuela\", flag: \"🇻🇪\" },\n};\n\ninterface Country {\n\tcode: string;\n\tname: string;\n\tflag: string;\n\tcallingCode: string;\n}\n\ninterface PhoneInputProps {\n\tid?: string;\n\tname: string;\n\tlabel?: string;\n\tplaceholder?: string;\n\trequired?: boolean;\n\tclassName?: string;\n\tonCountryChange?: (country: Country) => void;\n\tonPhoneChange?: (phone: string, isValid: boolean) => void;\n\ttouched?: boolean;\n\tvalues?: any;\n\tonBlur?: (e: React.FocusEvent<HTMLInputElement>) => void;\n\terror?: string;\n\tvalue?: string; // para standalone\n\tdefaultCountry?: string;\n\tdisabled?: boolean;\n\tclassNameContainer?: string;\n}\n\nexport const PhoneInput: React.FC<PhoneInputProps> = ({\n\tid,\n\tname,\n\tlabel = \"Teléfono\",\n\tplaceholder = \"Ingrese un número de teléfono\",\n\trequired = false,\n\tclassName = \"\",\n\tclassNameContainer = \"\",\n\tonCountryChange,\n\tonPhoneChange,\n\ttouched: externalTouched,\n\tonBlur: externalOnBlur,\n\terror: externalError,\n\tvalue: externalValue,\n\tdefaultCountry = \"PE\",\n\tdisabled = false,\n}) => {\n\tconst [selectedCountry, setSelectedCountry] = useState<Country>({\n\t\tcode: defaultCountry,\n\t\tname: countryData[defaultCountry as keyof typeof countryData].name,\n\t\tflag: countryData[defaultCountry as keyof typeof countryData].flag,\n\t\tcallingCode: `+${getCountryCallingCode(defaultCountry as keyof typeof countryData)}`,\n\t});\n\n\tconst [isDropdownOpen, setIsDropdownOpen] = useState(false);\n\tconst [phoneValue, setPhoneValue] = useState(\"\");\n\tconst [formattedValue, setFormattedValue] = useState(\"\");\n\tconst [isValid, setIsValid] = useState(false);\n\tconst [countries, setCountries] = useState<Country[]>([]);\n\tconst [searchTerm, setSearchTerm] = useState(\"\");\n\tconst [filteredCountries, setFilteredCountries] = useState<Country[]>([]);\n\n\tconst dropdownRef = useRef<HTMLDivElement>(null);\n\tconst inputRef = useRef<HTMLInputElement>(null);\n\tconst searchInputRef = useRef<HTMLInputElement>(null);\n\n\tconst inputId = useId();\n\tconst resolvedId = id || inputId;\n\tconst isControlled = externalValue !== undefined;\n\n\t// Inicializar países en el orden definido en countryData\n\tuseEffect(() => {\n\t\tconst availableCountries = Object.keys(countryData).map((countryCode) => {\n\t\t\tconst data = countryData[countryCode as keyof typeof countryData];\n\t\t\treturn {\n\t\t\t\tcode: countryCode,\n\t\t\t\tname: data.name,\n\t\t\t\tflag: data.flag,\n\t\t\t\tcallingCode: `+${getCountryCallingCode(countryCode as keyof typeof countryData)}`,\n\t\t\t};\n\t\t});\n\t\tsetCountries(availableCountries);\n\t\tsetFilteredCountries(availableCountries);\n\t}, []);\n\n\t// Manejo de click fuera para cerrar dropdown\n\tuseEffect(() => {\n\t\tconst handleClickOutside = (event: MouseEvent) => {\n\t\t\tif (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {\n\t\t\t\tsetIsDropdownOpen(false);\n\t\t\t}\n\t\t};\n\t\tdocument.addEventListener(\"mousedown\", handleClickOutside);\n\t\treturn () => document.removeEventListener(\"mousedown\", handleClickOutside);\n\t}, []);\n\n\t// Sincronizar externalValue con estados internos (incluye reset con \"\")\n\tuseEffect(() => {\n\t\tif (!isControlled || countries.length === 0) return;\n\n\t\t// Si el valor externo es vacío o null, limpiar estados\n\t\tif (externalValue === \"\" || externalValue == null) {\n\t\t\tsetPhoneValue(\"\");\n\t\t\tsetFormattedValue(\"\");\n\t\t\tsetIsValid(false);\n\t\t\treturn;\n\t\t}\n\n\t\tconst value = String(externalValue);\n\t\tlet country = countries.find((c) => value.startsWith(c.callingCode));\n\n\t\t// Si no se detecta país por código, mantener el seleccionado actual\n\t\tif (!country) {\n\t\t\tcountry = selectedCountry;\n\t\t}\n\n\t\tif (country) {\n\t\t\t// Actualizar país si cambió\n\t\t\tif (selectedCountry.code !== country.code) {\n\t\t\t\tsetSelectedCountry(country);\n\t\t\t}\n\n\t\t\tconst raw = value.replace(country.callingCode, \"\").replace(/[^\\d]/g, \"\");\n\t\t\tsetPhoneValue(raw);\n\n\t\t\tconst formatter = new AsYouType(country.code as keyof typeof countryData);\n\t\t\tconst formatted = formatter.input(raw);\n\t\t\tsetFormattedValue(formatted);\n\n\t\t\tconst valid = isValidPhoneNumber(value);\n\t\t\tsetIsValid(valid);\n\t\t} else {\n\t\t\t// Fallback: no país detectado, limpiar formato pero conservar value crudo\n\t\t\tsetPhoneValue(\"\");\n\t\t\tsetFormattedValue(\"\");\n\t\t\tsetIsValid(false);\n\t\t}\n\t}, [externalValue, countries, isControlled, selectedCountry]);\n\n\t// Formatear número al escribir\n\tconst handlePhoneChange = (value: string, event?: React.ChangeEvent<HTMLInputElement>) => {\n\t\tconst cleanValue = value.replace(/[^\\d]/g, \"\");\n\n\t\tif (event?.nativeEvent instanceof InputEvent && event.nativeEvent.inputType === \"deleteContentBackward\" && cleanValue.length < 4) {\n\t\t\tsetPhoneValue(cleanValue);\n\t\t\tsetFormattedValue(cleanValue); // mostrar sin formato\n\t\t\treturn;\n\t\t}\n\t\tconst formatter = new AsYouType(selectedCountry.code as keyof typeof countryData);\n\t\tconst formatted = formatter.input(cleanValue);\n\n\t\tsetPhoneValue(cleanValue);\n\t\tsetFormattedValue(formatted);\n\n\t\tconst fullNumber = selectedCountry.callingCode + cleanValue;\n\t\tconst valid = isValidPhoneNumber(fullNumber);\n\t\tsetIsValid(valid);\n\n\t\tonPhoneChange?.(fullNumber, valid);\n\t};\n\n\t// Seleccionar país\n\tconst handleCountrySelect = (country: Country) => {\n\t\tsetSelectedCountry(country);\n\t\tsetIsDropdownOpen(false);\n\t\tsetSearchTerm(\"\");\n\n\t\tif (phoneValue) {\n\t\t\tconst formatter = new AsYouType(country.code as keyof typeof countryData);\n\t\t\tconst formatted = formatter.input(phoneValue);\n\t\t\tsetFormattedValue(formatted);\n\n\t\t\tconst fullNumber = country.callingCode + phoneValue;\n\t\t\tconst valid = isValidPhoneNumber(fullNumber);\n\t\t\tsetIsValid(valid);\n\n\t\t\tonPhoneChange?.(fullNumber, valid);\n\t\t}\n\n\t\tonCountryChange?.(country);\n\t\tsetTimeout(() => inputRef.current?.focus(), 100);\n\t};\n\n\tconst handleDropdownToggle = () => {\n\t\tsetIsDropdownOpen(!isDropdownOpen);\n\t\tif (!isDropdownOpen) {\n\t\t\tsetTimeout(() => searchInputRef.current?.focus(), 100);\n\t\t}\n\t};\n\n\t// Filtrar países en búsqueda\n\tuseEffect(() => {\n\t\tif (!searchTerm.trim()) {\n\t\t\tsetFilteredCountries(countries);\n\t\t} else {\n\t\t\tconst searchLower = searchTerm.toLowerCase();\n\t\t\tconst filtered = countries.filter(\n\t\t\t\t(country) =>\n\t\t\t\t\tcountry.name.toLowerCase().includes(searchLower) ||\n\t\t\t\t\tcountry.callingCode.includes(searchTerm) ||\n\t\t\t\t\tcountry.code.toLowerCase().includes(searchLower),\n\t\t\t);\n\t\t\tsetFilteredCountries(filtered);\n\t\t}\n\t}, [searchTerm, countries]);\n\n\tconst isTouched = externalTouched;\n\tconst currentError = externalError;\n\tconst hasError = isTouched && currentError;\n\n\tconst isInvalid = !disabled && !!externalError && externalTouched;\n\n\treturn (\n\t\t<div className={twMerge(\"w-full relative flex flex-col\", classNameContainer)}>\n\t\t\t{label && (\n\t\t\t\t<label\n\t\t\t\t\thtmlFor={resolvedId}\n\t\t\t\t\tclassName={cn(\"form-control-label block font-normal text-sm text-foreground mb-1\", {\n\t\t\t\t\t\t\"text-danger\": hasError,\n\t\t\t\t\t})}\n\t\t\t\t>\n\t\t\t\t\t{label} {required && <span className=\"text-danger\">*</span>}\n\t\t\t\t</label>\n\t\t\t)}\n\n\t\t\t<div\n\t\t\t\tclassName={twMerge(\n\t\t\t\t\t\"flex w-full min-w-0 transition-[color,box-shadow] outline-none rounded-md h-input-default\",\n\t\t\t\t\t\"bg-white border border-input\",\n\t\t\t\t\t\"disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50\",\n\t\t\t\t\thasError\n\t\t\t\t\t\t? \"border-danger aria-invalid:ring-danger/20\"\n\t\t\t\t\t\t: isValid && phoneValue\n\t\t\t\t\t\t? \"focus-within:border-primary focus-within:ring-primary/20\"\n\t\t\t\t\t\t: \"focus-within:border-primary focus-within:ring-primary/20\",\n\t\t\t\t\t\"focus-within:ring-[3px]\",\n\t\t\t\t)}\n\t\t\t\taria-invalid={isInvalid ? \"true\" : \"false\"}\n\t\t\t>\n\t\t\t\t{/* Country selector */}\n\t\t\t\t<div className=\"relative\" ref={dropdownRef}>\n\t\t\t\t\t<button\n\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\tonClick={handleDropdownToggle}\n\t\t\t\t\t\tclassName={twMerge(\n\t\t\t\t\t\t\t\"flex items-center gap-2 px-3 border-r border-input h-input-default\",\n\t\t\t\t\t\t\t\"hover:bg-muted/20 focus:outline-none rounded-l-md\",\n\t\t\t\t\t\t)}\n\t\t\t\t\t>\n\t\t\t\t\t\t<span className=\"text-lg\">{selectedCountry.flag}</span>\n\t\t\t\t\t\t<span className=\"text-sm font-medium text-foreground\">{selectedCountry.callingCode}</span>\n\t\t\t\t\t\t<ChevronDown className={`w-4 h-4 text-muted-foreground transition-transform ${isDropdownOpen ? \"rotate-180\" : \"\"}`} />\n\t\t\t\t\t</button>\n\n\t\t\t\t\t<AnimatePresence>\n\t\t\t\t\t\t{isDropdownOpen && (\n\t\t\t\t\t\t\t<LazyMotion features={domAnimation}>\n\t\t\t\t\t\t\t\t<m.div\n\t\t\t\t\t\t\t\t\tkey=\"country-dropdown\"\n\t\t\t\t\t\t\t\t\tinitial={{ opacity: 0, y: -8, scale: 0.98 }}\n\t\t\t\t\t\t\t\t\tanimate={{ opacity: 1, y: 0, scale: 1, transition: { type: \"spring\", stiffness: 420, damping: 28 } }}\n\t\t\t\t\t\t\t\t\texit={{ opacity: 0, y: -6, scale: 0.98, transition: { duration: 0.15, ease: \"easeOut\" } }}\n\t\t\t\t\t\t\t\t\tstyle={{ transformOrigin: \"top center\" }}\n\t\t\t\t\t\t\t\t\tclassName=\"absolute top-full left-0 z-50 w-60 mt-1 bg-white border border-input rounded-md shadow-lg max-h-60 overflow-hidden\"\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<div className=\"sticky top-0 bg-white border-b border-input p-3\">\n\t\t\t\t\t\t\t\t\t\t<div className=\"relative\">\n\t\t\t\t\t\t\t\t\t\t\t<Search className=\"absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground\" />\n\t\t\t\t\t\t\t\t\t\t\t<input\n\t\t\t\t\t\t\t\t\t\t\t\tref={searchInputRef}\n\t\t\t\t\t\t\t\t\t\t\t\ttype=\"text\"\n\t\t\t\t\t\t\t\t\t\t\t\tvalue={searchTerm}\n\t\t\t\t\t\t\t\t\t\t\t\tonChange={(e) => setSearchTerm(e.target.value)}\n\t\t\t\t\t\t\t\t\t\t\t\tplaceholder=\"Buscar país o código\"\n\t\t\t\t\t\t\t\t\t\t\t\tclassName=\"w-full pl-10 pr-3 py-2 h-9 border border-input rounded-md text-sm focus:outline-none focus:border-primary focus:ring-[3px] focus:ring-primary/20\"\n\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t<ScrollArea className=\"max-h-48 overflow-y-auto pb-5\">\n\t\t\t\t\t\t\t\t\t\t{filteredCountries.map((country) => (\n\t\t\t\t\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\t\t\t\t\tkey={country.code}\n\t\t\t\t\t\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\t\t\t\t\t\tonClick={() => handleCountrySelect(country)}\n\t\t\t\t\t\t\t\t\t\t\t\tclassName={twMerge(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\"w-full flex items-center gap-3 px-3 py-1 text-sm transition\",\n\t\t\t\t\t\t\t\t\t\t\t\t\tselectedCountry.code === country.code\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t? \"bg-primary/5 border-l-2 border-primary\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t: \"hover:bg-muted/20\",\n\t\t\t\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t<span className=\"text-lg\">{country.flag}</span>\n\t\t\t\t\t\t\t\t\t\t\t\t<span className=\"flex-1 text-left\">{country.name}</span>\n\t\t\t\t\t\t\t\t\t\t\t\t<span className=\"text-muted-foreground\">{country.callingCode}</span>\n\t\t\t\t\t\t\t\t\t\t\t\t{selectedCountry.code === country.code && <Check className=\"w-4 h-4 text-primary\" />}\n\t\t\t\t\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t\t\t\t</ScrollArea>\n\t\t\t\t\t\t\t\t</m.div>\n\t\t\t\t\t\t\t</LazyMotion>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</AnimatePresence>\n\t\t\t\t</div>\n\n\t\t\t\t{/* Phone input */}\n\t\t\t\t<input\n\t\t\t\t\tref={inputRef}\n\t\t\t\t\tid={resolvedId}\n\t\t\t\t\ttype=\"tel\"\n\t\t\t\t\tname={name}\n\t\t\t\t\tvalue={formattedValue}\n\t\t\t\t\tonChange={(e) => handlePhoneChange(e.target.value, e)}\n\t\t\t\t\tonBlur={externalOnBlur}\n\t\t\t\t\tplaceholder={placeholder}\n\t\t\t\t\tdisabled={disabled}\n\t\t\t\t\t{...(!disabled ? { \"aria-invalid\": isInvalid } : {})}\n\t\t\t\t\tclassName={twMerge(\n\t\t\t\t\t\t\"flex-1 px-3 py-1 h-input-default border-0 rounded-r-md bg-transparent focus:outline-none text-foreground text-sm\",\n\t\t\t\t\t\tclassName,\n\t\t\t\t\t)}\n\t\t\t\t\tautoComplete=\"tel\"\n\t\t\t\t/>\n\t\t\t</div>\n\n\t\t\t{!disabled && externalError && externalTouched && <LabelError text={externalError || currentError || \"\"} />}\n\t\t</div>\n\t);\n};\n"],"names":["countryData","PhoneInput","id","name","label","placeholder","required","className","classNameContainer","onCountryChange","onPhoneChange","externalTouched","externalOnBlur","externalError","externalValue","defaultCountry","disabled","selectedCountry","setSelectedCountry","useState","getCountryCallingCode","isDropdownOpen","setIsDropdownOpen","phoneValue","setPhoneValue","formattedValue","setFormattedValue","isValid","setIsValid","countries","setCountries","searchTerm","setSearchTerm","filteredCountries","setFilteredCountries","dropdownRef","useRef","inputRef","searchInputRef","inputId","useId","resolvedId","isControlled","useEffect","availableCountries","countryCode","data","handleClickOutside","event","value","country","c","raw","formatted","AsYouType","valid","isValidPhoneNumber","handlePhoneChange","cleanValue","fullNumber","handleCountrySelect","handleDropdownToggle","searchLower","filtered","isTouched","currentError","hasError","isInvalid","twMerge","jsxs","cn","jsx","ChevronDown","AnimatePresence","LazyMotion","domAnimation","m","Search","ScrollArea","Check","LabelError"],"mappings":"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"}
+{"version":3,"file":"index.es.js","sources":["../../src/components/phone-input/phone-input.tsx"],"sourcesContent":["import type React from \"react\";\nimport { useState, useEffect, useRef, useId } from \"react\";\nimport { getCountryCallingCode, AsYouType, isValidPhoneNumber } from \"libphonenumber-js\";\nimport { ChevronDown, Check, Search } from \"lucide-react\";\nimport { twMerge } from \"tailwind-merge\";\nimport { cn } from \"@/lib/utils\";\nimport { LabelError, ScrollArea } from \"../ui\";\nimport { AnimatePresence } from \"framer-motion\";\nimport { LazyMotion, m, domAnimation } from \"framer-motion\";\n\nconst countryData = {\n\tPE: { name: \"Perú\", flag: \"🇵🇪\" },\n\tUS: { name: \"Estados Unidos\", flag: \"🇺🇸\" },\n\tMX: { name: \"México\", flag: \"🇲🇽\" },\n\tAR: { name: \"Argentina\", flag: \"🇦🇷\" },\n\tCO: { name: \"Colombia\", flag: \"🇨🇴\" },\n\tCL: { name: \"Chile\", flag: \"🇨🇱\" },\n\tBR: { name: \"Brasil\", flag: \"🇧🇷\" },\n\tBO: { name: \"Bolivia\", flag: \"🇧🇴\" },\n\tVE: { name: \"Venezuela\", flag: \"🇻🇪\" },\n};\n\ninterface Country {\n\tcode: string;\n\tname: string;\n\tflag: string;\n\tcallingCode: string;\n}\n\ninterface PhoneInputProps {\n\tid?: string;\n\tname: string;\n\tlabel?: string;\n\tplaceholder?: string;\n\trequired?: boolean;\n\tclassName?: string;\n\tonCountryChange?: (country: Country) => void;\n\tonPhoneChange?: (phone: string, isValid: boolean) => void;\n\ttouched?: boolean;\n\tvalues?: any;\n\tonBlur?: (e: React.FocusEvent<HTMLInputElement>) => void;\n\terror?: string;\n\tvalue?: string; // para standalone\n\tdefaultCountry?: string;\n\tdisabled?: boolean;\n\tclassNameContainer?: string;\n}\n\nexport const PhoneInput: React.FC<PhoneInputProps> = ({\n\tid,\n\tname,\n\tlabel = \"Teléfono\",\n\tplaceholder = \"Ingrese un número de teléfono\",\n\trequired = false,\n\tclassName = \"\",\n\tclassNameContainer = \"\",\n\tonCountryChange,\n\tonPhoneChange,\n\ttouched: externalTouched,\n\tonBlur: externalOnBlur,\n\terror: externalError,\n\tvalue: externalValue,\n\tdefaultCountry = \"PE\",\n\tdisabled = false,\n}) => {\n\tconst [selectedCountry, setSelectedCountry] = useState<Country>({\n\t\tcode: defaultCountry,\n\t\tname: countryData[defaultCountry as keyof typeof countryData].name,\n\t\tflag: countryData[defaultCountry as keyof typeof countryData].flag,\n\t\tcallingCode: `+${getCountryCallingCode(defaultCountry as keyof typeof countryData)}`,\n\t});\n\n\tconst [isDropdownOpen, setIsDropdownOpen] = useState(false);\n\tconst [phoneValue, setPhoneValue] = useState(\"\");\n\tconst [formattedValue, setFormattedValue] = useState(\"\");\n\tconst [isValid, setIsValid] = useState(false);\n\tconst [countries, setCountries] = useState<Country[]>([]);\n\tconst [searchTerm, setSearchTerm] = useState(\"\");\n\tconst [filteredCountries, setFilteredCountries] = useState<Country[]>([]);\n\n\tconst dropdownRef = useRef<HTMLDivElement>(null);\n\tconst inputRef = useRef<HTMLInputElement>(null);\n\tconst searchInputRef = useRef<HTMLInputElement>(null);\n\n\tconst inputId = useId();\n\tconst resolvedId = id || inputId;\n\tconst isControlled = externalValue !== undefined;\n\n\t// Inicializar países en el orden definido en countryData\n\tuseEffect(() => {\n\t\tconst availableCountries = Object.keys(countryData).map((countryCode) => {\n\t\t\tconst data = countryData[countryCode as keyof typeof countryData];\n\t\t\treturn {\n\t\t\t\tcode: countryCode,\n\t\t\t\tname: data.name,\n\t\t\t\tflag: data.flag,\n\t\t\t\tcallingCode: `+${getCountryCallingCode(countryCode as keyof typeof countryData)}`,\n\t\t\t};\n\t\t});\n\t\tsetCountries(availableCountries);\n\t\tsetFilteredCountries(availableCountries);\n\t}, []);\n\n\t// Manejo de click fuera para cerrar dropdown\n\tuseEffect(() => {\n\t\tconst handleClickOutside = (event: MouseEvent) => {\n\t\t\tif (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {\n\t\t\t\tsetIsDropdownOpen(false);\n\t\t\t}\n\t\t};\n\t\tdocument.addEventListener(\"mousedown\", handleClickOutside);\n\t\treturn () => document.removeEventListener(\"mousedown\", handleClickOutside);\n\t}, []);\n\n\t// Sincronizar externalValue con estados internos (incluye reset con \"\")\n\tuseEffect(() => {\n\t\tif (!isControlled || countries.length === 0) return;\n\n\t\t// Si el valor externo es vacío o null, limpiar estados\n\t\tif (externalValue === \"\" || externalValue == null) {\n\t\t\tsetPhoneValue(\"\");\n\t\t\tsetFormattedValue(\"\");\n\t\t\tsetIsValid(false);\n\t\t\treturn;\n\t\t}\n\n\t\tconst value = String(externalValue);\n\t\tlet country = countries.find((c) => value.startsWith(c.callingCode));\n\n\t\t// Si no se detecta país por código, mantener el seleccionado actual\n\t\tif (!country) {\n\t\t\tcountry = selectedCountry;\n\t\t}\n\n\t\tif (country) {\n\t\t\t// Actualizar país si cambió\n\t\t\tif (selectedCountry.code !== country.code) {\n\t\t\t\tsetSelectedCountry(country);\n\t\t\t}\n\n\t\t\tconst raw = value.replace(country.callingCode, \"\").replace(/[^\\d]/g, \"\");\n\t\t\tsetPhoneValue(raw);\n\n\t\t\tconst formatter = new AsYouType(country.code as keyof typeof countryData);\n\t\t\tconst formatted = formatter.input(raw);\n\t\t\tsetFormattedValue(formatted);\n\n\t\t\tconst valid = isValidPhoneNumber(value);\n\t\t\tsetIsValid(valid);\n\t\t} else {\n\t\t\t// Fallback: no país detectado, limpiar formato pero conservar value crudo\n\t\t\tsetPhoneValue(\"\");\n\t\t\tsetFormattedValue(\"\");\n\t\t\tsetIsValid(false);\n\t\t}\n\t}, [externalValue, countries, isControlled, selectedCountry]);\n\n\t// Formatear número al escribir\n\tconst handlePhoneChange = (value: string, event?: React.ChangeEvent<HTMLInputElement>) => {\n\t\tconst cleanValue = value.replace(/[^\\d]/g, \"\");\n\n\t\tif (event?.nativeEvent instanceof InputEvent && event.nativeEvent.inputType === \"deleteContentBackward\" && cleanValue.length < 4) {\n\t\t\tsetPhoneValue(cleanValue);\n\t\t\tsetFormattedValue(cleanValue); // mostrar sin formato\n\t\t\treturn;\n\t\t}\n\t\tconst formatter = new AsYouType(selectedCountry.code as keyof typeof countryData);\n\t\tconst formatted = formatter.input(cleanValue);\n\n\t\tsetPhoneValue(cleanValue);\n\t\tsetFormattedValue(formatted);\n\n\t\tconst fullNumber = selectedCountry.callingCode + cleanValue;\n\t\tconst valid = isValidPhoneNumber(fullNumber);\n\t\tsetIsValid(valid);\n\n\t\tonPhoneChange?.(fullNumber, valid);\n\t};\n\n\t// Seleccionar país\n\tconst handleCountrySelect = (country: Country) => {\n\t\tsetSelectedCountry(country);\n\t\tsetIsDropdownOpen(false);\n\t\tsetSearchTerm(\"\");\n\n\t\tif (phoneValue) {\n\t\t\tconst formatter = new AsYouType(country.code as keyof typeof countryData);\n\t\t\tconst formatted = formatter.input(phoneValue);\n\t\t\tsetFormattedValue(formatted);\n\n\t\t\tconst fullNumber = country.callingCode + phoneValue;\n\t\t\tconst valid = isValidPhoneNumber(fullNumber);\n\t\t\tsetIsValid(valid);\n\n\t\t\tonPhoneChange?.(fullNumber, valid);\n\t\t}\n\n\t\tonCountryChange?.(country);\n\t\tsetTimeout(() => inputRef.current?.focus(), 100);\n\t};\n\n\tconst handleDropdownToggle = () => {\n\t\tsetIsDropdownOpen(!isDropdownOpen);\n\t\tif (!isDropdownOpen) {\n\t\t\tsetTimeout(() => searchInputRef.current?.focus(), 100);\n\t\t}\n\t};\n\n\t// Filtrar países en búsqueda\n\tuseEffect(() => {\n\t\tif (!searchTerm.trim()) {\n\t\t\tsetFilteredCountries(countries);\n\t\t} else {\n\t\t\tconst searchLower = searchTerm.toLowerCase();\n\t\t\tconst filtered = countries.filter(\n\t\t\t\t(country) =>\n\t\t\t\t\tcountry.name.toLowerCase().includes(searchLower) ||\n\t\t\t\t\tcountry.callingCode.includes(searchTerm) ||\n\t\t\t\t\tcountry.code.toLowerCase().includes(searchLower),\n\t\t\t);\n\t\t\tsetFilteredCountries(filtered);\n\t\t}\n\t}, [searchTerm, countries]);\n\n\tconst isTouched = externalTouched;\n\tconst currentError = externalError;\n\tconst hasError = isTouched && currentError;\n\n\tconst isInvalid = !disabled && !!externalError && externalTouched;\n\n\treturn (\n\t\t<div className={twMerge(\"w-full relative flex flex-col\", classNameContainer)}>\n\t\t\t{label && (\n\t\t\t\t<label\n\t\t\t\t\thtmlFor={resolvedId}\n\t\t\t\t\tclassName={cn(\"form-control-label block font-normal text-sm text-foreground mb-1\", {\n\t\t\t\t\t\t\"text-danger\": hasError,\n\t\t\t\t\t})}\n\t\t\t\t>\n\t\t\t\t\t{label} {required && <span className=\"text-danger\">*</span>}\n\t\t\t\t</label>\n\t\t\t)}\n\n\t\t\t<div\n\t\t\t\tclassName={twMerge(\n\t\t\t\t\t\"flex w-full min-w-0 transition-[color,box-shadow] outline-none rounded-md h-input-default\",\n\t\t\t\t\t\"bg-white border border-input\",\n\t\t\t\t\t\"disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50\",\n\t\t\t\t\thasError\n\t\t\t\t\t\t? \"border-danger aria-invalid:ring-danger/20\"\n\t\t\t\t\t\t: isValid && phoneValue\n\t\t\t\t\t\t? \"focus-within:border-primary focus-within:ring-primary/20\"\n\t\t\t\t\t\t: \"focus-within:border-primary focus-within:ring-primary/20\",\n\t\t\t\t\t\"focus-within:ring-[3px]\",\n\t\t\t\t)}\n\t\t\t\taria-invalid={isInvalid ? \"true\" : \"false\"}\n\t\t\t>\n\t\t\t\t{/* Country selector */}\n\t\t\t\t<div className=\"relative\" ref={dropdownRef}>\n\t\t\t\t\t<button\n\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\tonClick={handleDropdownToggle}\n\t\t\t\t\t\tclassName={twMerge(\n\t\t\t\t\t\t\t\"flex items-center gap-2 px-3 border-r border-input h-input-default\",\n\t\t\t\t\t\t\t\"hover:bg-muted/20 focus:outline-none rounded-l-md\",\n\t\t\t\t\t\t)}\n\t\t\t\t\t>\n\t\t\t\t\t\t<span className=\"text-lg\">{selectedCountry.flag}</span>\n\t\t\t\t\t\t<span className=\"text-sm font-medium text-foreground\">{selectedCountry.callingCode}</span>\n\t\t\t\t\t\t<ChevronDown className={`w-4 h-4 text-muted-foreground transition-transform ${isDropdownOpen ? \"rotate-180\" : \"\"}`} />\n\t\t\t\t\t</button>\n\n\t\t\t\t\t<AnimatePresence>\n\t\t\t\t\t\t{isDropdownOpen && (\n\t\t\t\t\t\t\t<LazyMotion features={domAnimation}>\n\t\t\t\t\t\t\t\t<m.div\n\t\t\t\t\t\t\t\t\tkey=\"country-dropdown\"\n\t\t\t\t\t\t\t\t\tinitial={{ opacity: 0, y: -8, scale: 0.98 }}\n\t\t\t\t\t\t\t\t\tanimate={{ opacity: 1, y: 0, scale: 1, transition: { type: \"spring\", stiffness: 420, damping: 28 } }}\n\t\t\t\t\t\t\t\t\texit={{ opacity: 0, y: -6, scale: 0.98, transition: { duration: 0.15, ease: \"easeOut\" } }}\n\t\t\t\t\t\t\t\t\tstyle={{ transformOrigin: \"top center\" }}\n\t\t\t\t\t\t\t\t\tclassName=\"absolute top-full left-0 z-50 w-60 mt-1 bg-white border border-input rounded-md shadow-lg max-h-60 overflow-hidden\"\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<div className=\"sticky top-0 bg-white border-b border-input p-3\">\n\t\t\t\t\t\t\t\t\t\t<div className=\"relative\">\n\t\t\t\t\t\t\t\t\t\t\t<Search className=\"absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground\" />\n\t\t\t\t\t\t\t\t\t\t\t<input\n\t\t\t\t\t\t\t\t\t\t\t\tref={searchInputRef}\n\t\t\t\t\t\t\t\t\t\t\t\ttype=\"text\"\n\t\t\t\t\t\t\t\t\t\t\t\tvalue={searchTerm}\n\t\t\t\t\t\t\t\t\t\t\t\tonChange={(e) => setSearchTerm(e.target.value)}\n\t\t\t\t\t\t\t\t\t\t\t\tplaceholder=\"Buscar país o código\"\n\t\t\t\t\t\t\t\t\t\t\t\tclassName=\"w-full pl-10 pr-3 py-2 h-9 border border-input rounded-md text-sm focus:outline-none focus:border-primary focus:ring-[3px] focus:ring-primary/20\"\n\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t<ScrollArea className=\"max-h-48 overflow-y-auto pb-5\">\n\t\t\t\t\t\t\t\t\t\t{filteredCountries.map((country) => (\n\t\t\t\t\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\t\t\t\t\tkey={country.code}\n\t\t\t\t\t\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\t\t\t\t\t\tonClick={() => handleCountrySelect(country)}\n\t\t\t\t\t\t\t\t\t\t\t\tclassName={twMerge(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\"w-full flex items-center gap-3 px-3 py-1 text-sm transition\",\n\t\t\t\t\t\t\t\t\t\t\t\t\tselectedCountry.code === country.code\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t? \"bg-primary/5 border-l-2 border-primary\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t: \"hover:bg-muted/20\",\n\t\t\t\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t<span className=\"text-lg\">{country.flag}</span>\n\t\t\t\t\t\t\t\t\t\t\t\t<span className=\"flex-1 text-left\">{country.name}</span>\n\t\t\t\t\t\t\t\t\t\t\t\t<span className=\"text-muted-foreground\">{country.callingCode}</span>\n\t\t\t\t\t\t\t\t\t\t\t\t{selectedCountry.code === country.code && <Check className=\"w-4 h-4 text-primary\" />}\n\t\t\t\t\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t\t\t\t</ScrollArea>\n\t\t\t\t\t\t\t\t</m.div>\n\t\t\t\t\t\t\t</LazyMotion>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</AnimatePresence>\n\t\t\t\t</div>\n\n\t\t\t\t{/* Phone input */}\n\t\t\t\t<input\n\t\t\t\t\tref={inputRef}\n\t\t\t\t\tid={resolvedId}\n\t\t\t\t\ttype=\"tel\"\n\t\t\t\t\tname={name}\n\t\t\t\t\tvalue={formattedValue}\n\t\t\t\t\tonChange={(e) => handlePhoneChange(e.target.value, e)}\n\t\t\t\t\tonBlur={externalOnBlur}\n\t\t\t\t\tplaceholder={placeholder}\n\t\t\t\t\tdisabled={disabled}\n\t\t\t\t\t{...(!disabled ? { \"aria-invalid\": isInvalid } : {})}\n\t\t\t\t\tclassName={twMerge(\n\t\t\t\t\t\t\"flex-1 px-3 py-1 h-input-default border-0 rounded-r-md bg-transparent focus:outline-none text-foreground text-sm\",\n\t\t\t\t\t\tclassName,\n\t\t\t\t\t)}\n\t\t\t\t\tautoComplete=\"tel\"\n\t\t\t\t/>\n\t\t\t</div>\n\n\t\t\t{!disabled && externalError && externalTouched && <LabelError text={externalError || currentError || \"\"} />}\n\t\t</div>\n\t);\n};\n"],"names":["countryData","PhoneInput","id","name","label","placeholder","required","className","classNameContainer","onCountryChange","onPhoneChange","externalTouched","externalOnBlur","externalError","externalValue","defaultCountry","disabled","selectedCountry","setSelectedCountry","useState","getCountryCallingCode","isDropdownOpen","setIsDropdownOpen","phoneValue","setPhoneValue","formattedValue","setFormattedValue","isValid","setIsValid","countries","setCountries","searchTerm","setSearchTerm","filteredCountries","setFilteredCountries","dropdownRef","useRef","inputRef","searchInputRef","inputId","useId","resolvedId","isControlled","useEffect","availableCountries","countryCode","data","handleClickOutside","event","value","country","c","raw","formatted","AsYouType","valid","isValidPhoneNumber","handlePhoneChange","cleanValue","fullNumber","handleCountrySelect","handleDropdownToggle","searchLower","filtered","isTouched","currentError","hasError","isInvalid","twMerge","jsxs","cn","jsx","ChevronDown","AnimatePresence","LazyMotion","domAnimation","m","Search","ScrollArea","Check","LabelError"],"mappings":"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"}