lizaui 8.2.9 → 8.4.9

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

@@ -1 +1 @@
-{"version":3,"file":"index.cjs.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.cjs.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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"}

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

@@ -1,15 +1,15 @@
 import { j as t } from "../chunks/jsx-runtime-Cl_4eDuT.js";
-import { useState as s, useRef as L, useId as ae, useEffect as C } from "react";
+import { useState as r, useRef as I, useId as ae, useEffect as C } from "react";
 import { getCountryCallingCode as U, AsYouType as S, isValidPhoneNumber as k } from "libphonenumber-js";
-import { twMerge as u } from "tailwind-merge";
-import { c as ie } from "../chunks/utils-B6yFEsav.js";
-import "../chunks/textarea-BIy5pTb5.js";
-import { L as le } from "../chunks/label-error-DGQqDKTV.js";
-import "clsx";
-import { S as ce, a as de } from "../chunks/scroll-area-zt_z9PRo.js";
-import "../chunks/button-CSuKvE1x.js";
-import { AnimatePresence as me, LazyMotion as fe, domAnimation as ue, m as pe } from "framer-motion";
-import { C as ge, a as he } from "../chunks/index-VJ2Qvmen.js";
+import { t as u } from "../chunks/bundle-mjs-2oQ8XDAz.js";
+import { c as ie } from "../chunks/utils-CvyT6Z0O.js";
+import "../chunks/textarea-BYbersWf.js";
+import { L as le } from "../chunks/label-error-BOE4Qj5S.js";
+import { S as ce, a as de } from "../chunks/scroll-area-CE7quLQL.js";
+import "../chunks/button-uo4_Xad_.js";
+import { C as me, a as fe } from "../chunks/index-VJ2Qvmen.js";
+import { A as ue, L as pe } from "../chunks/index-DC9BfnBH.js";
+import { e as ge, m as he } from "../chunks/features-animation-BRAvwYFN.js";
 const j = {
   PE: { name: "Perú", flag: "🇵🇪" },
   US: { name: "Estados Unidos", flag: "🇺🇸" },
@@ -37,12 +37,12 @@ const j = {
   defaultCountry: g = "PE",
   disabled: h = !1
 }) => {
-  const [r, P] = s({
+  const [s, A] = r({
     code: g,
     name: j[g].name,
     flag: j[g].flag,
     callingCode: `+${U(g)}`
-  }), [x, y] = s(!1), [b, d] = s(""), [Q, a] = s(""), [Z, m] = s(!1), [i, _] = s([]), [f, R] = s(""), [ee, E] = s([]), I = L(null), T = L(null), A = L(null), te = ae(), V = W || te, D = c !== void 0;
+  }), [x, y] = r(!1), [b, d] = r(""), [Q, a] = r(""), [Z, m] = r(!1), [i, _] = r([]), [f, P] = r(""), [ee, E] = r([]), L = I(null), R = I(null), T = I(null), te = ae(), V = W || te, D = c !== void 0;
   C(() => {
     const e = Object.keys(j).map((n) => {
       const o = j[n];
@@ -56,7 +56,7 @@ const j = {
     _(e), E(e);
   }, []), C(() => {
     const e = (n) => {
-      I.current && !I.current.contains(n.target) && y(!1);
+      L.current && !L.current.contains(n.target) && y(!1);
     };
     return document.addEventListener("mousedown", e), () => document.removeEventListener("mousedown", e);
   }, []), C(() => {
@@ -67,8 +67,8 @@ const j = {
     }
     const e = String(c);
     let n = i.find((o) => e.startsWith(o.callingCode));
-    if (n || (n = r), n) {
-      r.code !== n.code && P(n);
+    if (n || (n = s), n) {
+      s.code !== n.code && A(n);
       const o = e.replace(n.callingCode, "").replace(/[^\d]/g, "");
       d(o);
       const l = new S(n.code).input(o);
@@ -77,27 +77,27 @@ const j = {
       m(v);
     } else
       d(""), a(""), m(!1);
-  }, [c, i, D, r]);
+  }, [c, i, D, s]);
   const oe = (e, n) => {
     const o = e.replace(/[^\d]/g, "");
     if (n?.nativeEvent instanceof InputEvent && n.nativeEvent.inputType === "deleteContentBackward" && o.length < 4) {
       d(o), a(o);
       return;
     }
-    const l = new S(r.code).input(o);
+    const l = new S(s.code).input(o);
     d(o), a(l);
-    const v = r.callingCode + o, $ = k(v);
+    const v = s.callingCode + o, $ = k(v);
     m($), O?.(v, $);
   }, ne = (e) => {
-    if (P(e), y(!1), R(""), b) {
+    if (A(e), y(!1), P(""), b) {
       const o = new S(e.code).input(b);
       a(o);
       const w = e.callingCode + b, l = k(w);
       m(l), O?.(w, l);
     }
-    J?.(e), setTimeout(() => T.current?.focus(), 100);
-  }, re = () => {
-    y(!x), x || setTimeout(() => A.current?.focus(), 100);
+    J?.(e), setTimeout(() => R.current?.focus(), 100);
+  }, se = () => {
+    y(!x), x || setTimeout(() => T.current?.focus(), 100);
   };
   C(() => {
     if (!f.trim())
@@ -109,7 +109,7 @@ const j = {
       E(n);
     }
   }, [f, i]);
-  const se = N, M = p, z = se && M, F = !h && !!p && N;
+  const re = N, M = p, z = re && M, F = !h && !!p && N;
   return /* @__PURE__ */ t.jsxs("div", { className: u("w-full relative flex flex-col", H), children: [
     B && /* @__PURE__ */ t.jsxs(
       "label",
@@ -137,25 +137,25 @@ const j = {
         ),
         "aria-invalid": F ? "true" : "false",
         children: [
-          /* @__PURE__ */ t.jsxs("div", { className: "relative", ref: I, children: [
+          /* @__PURE__ */ t.jsxs("div", { className: "relative", ref: L, children: [
             /* @__PURE__ */ t.jsxs(
               "button",
               {
                 type: "button",
-                onClick: re,
+                onClick: se,
                 className: u(
                   "flex items-center gap-2 px-3 border-r border-input h-input-default",
                   "hover:bg-muted/20 focus:outline-none rounded-l-md"
                 ),
                 children: [
-                  /* @__PURE__ */ t.jsx("span", { className: "text-lg", children: r.flag }),
-                  /* @__PURE__ */ t.jsx("span", { className: "text-sm font-medium text-foreground", children: r.callingCode }),
-                  /* @__PURE__ */ t.jsx(ge, { className: `w-4 h-4 text-muted-foreground transition-transform ${x ? "rotate-180" : ""}` })
+                  /* @__PURE__ */ t.jsx("span", { className: "text-lg", children: s.flag }),
+                  /* @__PURE__ */ t.jsx("span", { className: "text-sm font-medium text-foreground", children: s.callingCode }),
+                  /* @__PURE__ */ t.jsx(me, { className: `w-4 h-4 text-muted-foreground transition-transform ${x ? "rotate-180" : ""}` })
                 ]
               }
             ),
-            /* @__PURE__ */ t.jsx(me, { children: x && /* @__PURE__ */ t.jsx(fe, { features: ue, children: /* @__PURE__ */ t.jsxs(
-              pe.div,
+            /* @__PURE__ */ t.jsx(ue, { children: x && /* @__PURE__ */ t.jsx(pe, { features: ge, children: /* @__PURE__ */ t.jsxs(
+              he.div,
               {
                 initial: { opacity: 0, y: -8, scale: 0.98 },
                 animate: { opacity: 1, y: 0, scale: 1, transition: { type: "spring", stiffness: 420, damping: 28 } },
@@ -168,10 +168,10 @@ const j = {
                     /* @__PURE__ */ t.jsx(
                       "input",
                       {
-                        ref: A,
+                        ref: T,
                         type: "text",
                         value: f,
-                        onChange: (e) => R(e.target.value),
+                        onChange: (e) => P(e.target.value),
                         placeholder: "Buscar país o código",
                         className: "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"
                       }
@@ -184,13 +184,13 @@ const j = {
                       onClick: () => ne(e),
                       className: u(
                         "w-full flex items-center gap-3 px-3 py-1 text-sm transition",
-                        r.code === e.code ? "bg-primary/5 border-l-2 border-primary" : "hover:bg-muted/20"
+                        s.code === e.code ? "bg-primary/5 border-l-2 border-primary" : "hover:bg-muted/20"
                       ),
                       children: [
                         /* @__PURE__ */ t.jsx("span", { className: "text-lg", children: e.flag }),
                         /* @__PURE__ */ t.jsx("span", { className: "flex-1 text-left", children: e.name }),
                         /* @__PURE__ */ t.jsx("span", { className: "text-muted-foreground", children: e.callingCode }),
-                        r.code === e.code && /* @__PURE__ */ t.jsx(he, { className: "w-4 h-4 text-primary" })
+                        s.code === e.code && /* @__PURE__ */ t.jsx(fe, { className: "w-4 h-4 text-primary" })
                       ]
                     },
                     e.code
@@ -203,7 +203,7 @@ const j = {
           /* @__PURE__ */ t.jsx(
             "input",
             {
-              ref: T,
+              ref: R,
               id: V,
               type: "tel",
               name: X,

package/dist/ripple/index.cjs.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("../chunks/ripple-DieNd7XQ.js");exports.Ripple=e.Ripple;exports.useRipple=e.useRipple;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("../chunks/ripple-SBteSEo3.js");exports.Ripple=e.Ripple;exports.useRipple=e.useRipple;
 //# sourceMappingURL=index.cjs.js.map

package/dist/ripple/index.es.js

@@ -1,4 +1,4 @@
-import { R as s, u as R } from "../chunks/ripple-DMI95LHg.js";
+import { R as s, u as R } from "../chunks/ripple-CzU7YM2G.js";
 export {
   s as Ripple,
   R as useRipple