@jacksonavila/phone-lib 2.0.1 → 2.0.2

package/README.md

@@ -1,42 +1,51 @@
 # PhoneLib 📱
 
+Modern JavaScript library to easily integrate a phone input with country selector, flags, and phone number validation. **Compatible with Vanilla JavaScript and React**.
+
 Librería JavaScript moderna para integrar fácilmente un input de teléfono con selector de país, banderas y validación de números telefónicos. **Compatible con Vanilla JavaScript y React**.
 
 [![npm version](https://img.shields.io/npm/v/@jacksonavila/phone-lib.svg)](https://www.npmjs.com/package/@jacksonavila/phone-lib)
 [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
 
-## ✨ Características
+---
 
-- ✅ **Dropdown con países** mostrando nombre, código ISO2, código de marcación y bandera
-- ✅ **Input de tipo "tel"** con formato automático según el país seleccionado
-- ✅ **Validación de números** telefónicos usando `libphonenumber-js`
-- ✅ **API pública completa** con métodos para obtener información del número
-- ✅ **Soporte para Vanilla JavaScript y React**
-- ✅ **Dos layouts disponibles**: integrado y separado
-- ✅ **Eventos y callbacks** personalizables
-- ✅ **Control programático** completo
-- ✅ **Detección automática** de país
-- ✅ **Filtrado de países** (incluir/excluir/deshabilitar)
-- ✅ **Modo readonly/disabled**
-- ✅ **Estilos CSS modernos** y responsivos
-- ✅ **Accesibilidad** mejorada (ARIA labels, navegación por teclado)
+## ✨ Features / Características
+
+- ✅ **Country dropdown** / **Dropdown de países** showing name, ISO2 code, dial code, and flag
+- ✅ **Tel input** / **Input tipo tel** with automatic formatting based on selected country
+- ✅ **Phone number validation** / **Validación de números** using `libphonenumber-js`
+- ✅ **Complete public API** / **API pública completa** with methods to get number information
+- ✅ **Vanilla JavaScript and React support** / **Soporte para Vanilla JavaScript y React**
+- ✅ **Two layouts available** / **Dos layouts disponibles**: integrated and separated
+- ✅ **Customizable events and callbacks** / **Eventos y callbacks** personalizables
+- ✅ **Full programmatic control** / **Control programático** completo
+- ✅ **Automatic country detection** / **Detección automática** de país
+- ✅ **Country filtering** / **Filtrado de países** (include/exclude/disable)
+- ✅ **Readonly/disabled mode** / **Modo readonly/disabled**
+- ✅ **Modern responsive CSS** / **Estilos CSS modernos** y responsivos
+- ✅ **Improved accessibility** / **Accesibilidad mejorada** (ARIA labels, keyboard navigation)
 
-## 📦 Instalación
+---
+
+## 📦 Installation / Instalación
 
 ```bash
 npm install @jacksonavila/phone-lib
 ```
 
-### Dependencias
+### Dependencies / Dependencias
 
 ```bash
-# Para proyectos React
+# For React projects / Para proyectos React
 npm install react react-dom
 
-# La dependencia libphonenumber-js se instala automáticamente
+# libphonenumber-js is installed automatically
+# libphonenumber-js se instala automáticamente
 ```
 
-## 🚀 Inicio Rápido
+---
+
+## 🚀 Quick Start / Inicio Rápido
 
 ### Vanilla JavaScript
 
@@ -58,7 +67,7 @@ npm install react react-dom
       showDialCode: true
     });
 
-    // Obtener información del número
+    // Get number information / Obtener información del número
     const info = phoneLib.getInfo();
     console.log(info);
   </script>
@@ -86,11 +95,13 @@ function App() {
 export default App;
 ```
 
-## 📖 Guía de Uso Completa
+---
+
+## 📖 Complete Usage Guide / Guía de Uso Completa
 
 ### Vanilla JavaScript
 
-#### Ejemplo Básico
+#### Basic Example / Ejemplo Básico
 
 ```javascript
 import PhoneLib from '@jacksonavila/phone-lib';
@@ -105,7 +116,7 @@ const phoneLib = new PhoneLib('#phone-container', {
 });
 ```
 
-#### Con Eventos y Callbacks
+#### With Events and Callbacks / Con Eventos y Callbacks
 
 ```javascript
 import PhoneLib from '@jacksonavila/phone-lib';
@@ -116,59 +127,59 @@ const phoneLib = new PhoneLib('#phone-container', {
   
   // Callbacks
   onCountryChange: (country, dialCode, countryName) => {
-    console.log('País cambiado:', country, dialCode, countryName);
+    console.log('Country changed / País cambiado:', country, dialCode, countryName);
   },
   
   onPhoneChange: (phoneNumber, isValid, country) => {
-    console.log('Número:', phoneNumber, 'Válido:', isValid);
+    console.log('Number / Número:', phoneNumber, 'Valid / Válido:', isValid);
     if (isValid) {
       const info = phoneLib.getInfo();
-      console.log('Información completa:', info);
+      console.log('Complete info / Información completa:', info);
     }
   },
   
   onValidationChange: (isValid, phoneNumber) => {
-    console.log('Validación:', isValid ? 'Válido' : 'Inválido');
+    console.log('Validation / Validación:', isValid ? 'Valid / Válido' : 'Invalid / Inválido');
   },
   
-  onFocus: () => console.log('Input enfocado'),
-  onBlur: () => console.log('Input perdió foco')
+  onFocus: () => console.log('Input focused / Input enfocado'),
+  onBlur: () => console.log('Input blurred / Input perdió foco')
 });
 
-// Escuchar eventos DOM personalizados
+// Listen to custom DOM events / Escuchar eventos DOM personalizados
 document.getElementById('phone-container').addEventListener('phoneLib:countryChange', (e) => {
-  console.log('Evento DOM:', e.detail);
+  console.log('DOM event / Evento DOM:', e.detail);
 });
 ```
 
-#### Control Programático
+#### Programmatic Control / Control Programático
 
 ```javascript
-// Establecer valores
+// Set values / Establecer valores
 phoneLib.setCountry('ES');
 phoneLib.setPhoneNumber('+34600123456');
 phoneLib.setValue('US', '5551234567');
 
-// Controlar estado
+// Control state / Controlar estado
 phoneLib.enable();
 phoneLib.disable();
 phoneLib.reset();
 
-// Obtener información
+// Get information / Obtener información
 const country = phoneLib.getCountry();        // 'CO'
 const dialCode = phoneLib.getDialCode();      // '+57'
 const raw = phoneLib.getRaw();                // '3001234567'
 const e164 = phoneLib.getE164();              // '+573001234567'
 const isValid = phoneLib.isValid();           // true/false
-const info = phoneLib.getInfo();              // Objeto completo
+const info = phoneLib.getInfo();              // Complete object / Objeto completo
 ```
 
-#### Integración con Formularios
+#### Form Integration / Integración con Formularios
 
 ```html
 <form id="contact-form">
   <div id="phone-container"></div>
-  <button type="submit">Enviar</button>
+  <button type="submit">Submit / Enviar</button>
 </form>
 
 <script type="module">
@@ -186,25 +197,25 @@ const info = phoneLib.getInfo();              // Objeto completo
     const phoneInfo = phoneLib.getInfo();
     
     if (!phoneInfo.isValid) {
-      alert('Por favor ingrese un número válido');
+      alert('Please enter a valid number / Por favor ingrese un número válido');
       return;
     }
 
-    // Enviar datos
+    // Send data / Enviar datos
     const formData = {
       phone: phoneInfo.e164,
       country: phoneInfo.country,
-      // ... otros campos
+      // ... other fields / otros campos
     };
 
-    console.log('Enviando:', formData);
+    console.log('Sending / Enviando:', formData);
   });
 </script>
 ```
 
 ### React
 
-#### Ejemplo Básico
+#### Basic Example / Ejemplo Básico
 
 ```jsx
 import React from 'react';
@@ -224,7 +235,7 @@ function App() {
 export default App;
 ```
 
-#### Con Ref y Métodos
+#### With Ref and Methods / Con Ref y Métodos
 
 ```jsx
 import React, { useRef } from 'react';
@@ -238,11 +249,11 @@ function App() {
     const info = phoneLibRef.current.getInfo();
     
     if (!info.isValid) {
-      alert('Número inválido');
+      alert('Invalid number / Número inválido');
       return;
     }
 
-    console.log('Enviar:', info.e164);
+    console.log('Send / Enviar:', info.e164);
   };
 
   return (
@@ -252,16 +263,16 @@ function App() {
         initialCountry="CO"
         layout="integrated"
         onPhoneChange={(phone, isValid) => {
-          console.log('Número:', phone, 'Válido:', isValid);
+          console.log('Number / Número:', phone, 'Valid / Válido:', isValid);
         }}
       />
-      <button onClick={handleSubmit}>Enviar</button>
+      <button onClick={handleSubmit}>Submit / Enviar</button>
     </div>
   );
 }
 ```
 
-#### Con Estado de React
+#### With React State / Con Estado de React
 
 ```jsx
 import React, { useState, useRef } from 'react';
@@ -292,9 +303,9 @@ function PhoneForm() {
       
       {phoneData && (
         <div>
-          <p>País: {phoneData.country}</p>
-          <p>Número: {phoneData.e164}</p>
-          <p>Válido: {phoneData.isValid ? 'Sí' : 'No'}</p>
+          <p>Country / País: {phoneData.country}</p>
+          <p>Number / Número: {phoneData.e164}</p>
+          <p>Valid / Válido: {phoneData.isValid ? 'Yes / Sí' : 'No'}</p>
         </div>
       )}
     </div>
@@ -302,7 +313,7 @@ function PhoneForm() {
 }
 ```
 
-#### Integración con Formularios React
+#### React Form Integration / Integración con Formularios React
 
 ```jsx
 import React, { useRef } from 'react';
@@ -319,7 +330,7 @@ function ContactForm() {
     const phoneInfo = phoneLibRef.current.getInfo();
     
     if (!phoneInfo.isValid) {
-      alert('Por favor ingrese un número válido');
+      alert('Please enter a valid number / Por favor ingrese un número válido');
       return;
     }
 
@@ -330,7 +341,7 @@ function ContactForm() {
       country: phoneInfo.country
     };
 
-    // Enviar datos
+    // Send data / Enviar datos
     fetch('/api/contact', {
       method: 'POST',
       headers: { 'Content-Type': 'application/json' },
@@ -340,7 +351,7 @@ function ContactForm() {
 
   return (
     <form ref={formRef} onSubmit={handleSubmit}>
-      <input name="name" placeholder="Nombre" required />
+      <input name="name" placeholder="Name / Nombre" required />
       <input name="email" type="email" placeholder="Email" required />
       
       <PhoneLibReact
@@ -349,107 +360,111 @@ function ContactForm() {
         validateOnInput={true}
       />
       
-      <button type="submit">Enviar</button>
+      <button type="submit">Submit / Enviar</button>
     </form>
   );
 }
 ```
 
-## 🎨 Layouts Disponibles
+---
 
-### Layout Integrado (Default)
+## 🎨 Available Layouts / Layouts Disponibles
 
-El selector de país y el input están en la misma línea:
+### Integrated Layout / Layout Integrado (Default)
+
+The country selector and input are on the same line / El selector de país y el input están en la misma línea:
 
 ```javascript
 const phoneLib = new PhoneLib('#container', {
   layout: 'integrated',
-  showDialCode: true  // Muestra +57 en el botón
+  showDialCode: true  // Shows +57 in button / Muestra +57 en el botón
 });
 ```
 
-**Con código visible:**
-- Muestra: `[🇨🇴 +57 ▼] [300 123 4567]`
+**With code visible / Con código visible:**
+- Shows / Muestra: `[🇨🇴 +57 ▼] [300 123 4567]`
 
-**Sin código visible:**
+**Without code visible / Sin código visible:**
 ```javascript
 const phoneLib = new PhoneLib('#container', {
   layout: 'integrated',
-  showDialCode: false  // Solo muestra la bandera
+  showDialCode: false  // Only shows flag / Solo muestra la bandera
 });
 ```
-- Muestra: `[🇨🇴 ▼] [300 123 4567]`
+- Shows / Muestra: `[🇨🇴 ▼] [300 123 4567]`
 
-### Layout Separado
+### Separated Layout / Layout Separado
 
-Los campos están separados en una fila:
+Fields are separated in a row / Los campos están separados en una fila:
 
 ```javascript
 const phoneLib = new PhoneLib('#container', {
   layout: 'separated',
-  showDialCode: true  // Muestra campo "Código" separado
+  showDialCode: true  // Shows separate "Code" field / Muestra campo "Código" separado
 });
 ```
 
-**Con código visible:**
-- Muestra: `[País: 🇨🇴 Colombia ▼] [Código: +57] [Número: 300 123 4567]`
+**With code visible / Con código visible:**
+- Shows / Muestra: `[Country / País: 🇨🇴 Colombia ▼] [Code / Código: +57] [Number / Número: 300 123 4567]`
 
-**Sin código visible:**
+**Without code visible / Sin código visible:**
 ```javascript
 const phoneLib = new PhoneLib('#container', {
   layout: 'separated',
-  showDialCode: false  // Solo muestra País y Número
+  showDialCode: false  // Only shows Country and Number / Solo muestra País y Número
 });
 ```
-- Muestra: `[País: 🇨🇴 Colombia ▼] [Número: 300 123 4567]`
+- Shows / Muestra: `[Country / País: 🇨🇴 Colombia ▼] [Number / Número: 300 123 4567]`
+
+---
 
-## ⚙️ Opciones de Configuración
+## ⚙️ Configuration Options / Opciones de Configuración
 
-### Opciones Básicas
+### Basic Options / Opciones Básicas
 
 ```javascript
 {
-  initialCountry: 'CO',              // País inicial (ISO2)
-  preferredCountries: ['CO', 'US'],  // Países que aparecen primero
-  showHint: true,                     // Mostrar hint de validación
-  layout: 'integrated',               // 'integrated' o 'separated'
-  showDialCode: true                  // Mostrar código de marcación
+  initialCountry: 'CO',              // Initial country / País inicial (ISO2)
+  preferredCountries: ['CO', 'US'],  // Countries that appear first / Países que aparecen primero
+  showHint: true,                    // Show validation hint / Mostrar hint de validación
+  layout: 'integrated',              // 'integrated' or 'separated' / 'integrated' o 'separated'
+  showDialCode: true                 // Show dial code / Mostrar código de marcación
 }
 ```
 
-### Opciones Avanzadas
+### Advanced Options / Opciones Avanzadas
 
 ```javascript
 {
-  // Detección y validación
-  autoDetectCountry: true,            // Detectar país automáticamente
-  validateOnInput: false,             // Validar mientras se escribe
+  // Detection and validation / Detección y validación
+  autoDetectCountry: true,            // Auto-detect country / Detectar país automáticamente
+  validateOnInput: false,             // Validate while typing / Validar mientras se escribe
   
-  // Filtrado de países
-  onlyCountries: ['CO', 'US', 'ES'],  // Solo estos países
-  disabledCountries: ['CU', 'KP'],    // Deshabilitar estos
-  excludeCountries: ['XX'],           // Excluir estos
+  // Country filtering / Filtrado de países
+  onlyCountries: ['CO', 'US', 'ES'],  // Only these countries / Solo estos países
+  disabledCountries: ['CU', 'KP'],    // Disable these / Deshabilitar estos
+  excludeCountries: ['XX'],           // Exclude these / Excluir estos
   
-  // Estados
-  readonly: false,                    // Modo solo lectura
-  disabled: false,                    // Componente deshabilitado
+  // States / Estados
+  readonly: false,                   // Read-only mode / Modo solo lectura
+  disabled: false,                   // Disabled component / Componente deshabilitado
   
-  // Personalización
-  placeholder: 'Ingrese su número',  // Placeholder personalizado
-  countryLabel: 'País',               // Label para selector
-  dialCodeLabel: 'Código',            // Label para código
-  phoneLabel: 'Número de teléfono',  // Label para número
+  // Customization / Personalización
+  placeholder: 'Enter your number',   // Custom placeholder / Placeholder personalizado
+  countryLabel: 'Country',            // Label for selector / Label para selector
+  dialCodeLabel: 'Code',             // Label for code / Label para código
+  phoneLabel: 'Phone number',         // Label for number / Label para número
   
-  // Mensajes
+  // Messages / Mensajes
   messages: {
-    invalid: 'Número inválido',
-    valid: '✓ Número válido'
+    invalid: 'Invalid number',
+    valid: '✓ Valid number'
   },
   
-  // Estilos
+  // Styles / Estilos
   customClasses: {
-    wrapper: 'mi-clase',
-    input: 'mi-input'
+    wrapper: 'my-class',
+    input: 'my-input'
   },
   customStyles: {
     input: {
@@ -459,97 +474,99 @@ const phoneLib = new PhoneLib('#container', {
 }
 ```
 
-### Callbacks y Eventos
+### Callbacks and Events / Callbacks y Eventos
 
 ```javascript
 {
   onCountryChange: (country, dialCode, countryName) => {
-    // País cambiado
+    // Country changed / País cambiado
   },
   onPhoneChange: (phoneNumber, isValid, country) => {
-    // Número cambiado
+    // Number changed / Número cambiado
   },
   onValidationChange: (isValid, phoneNumber) => {
-    // Validación cambiada
+    // Validation changed / Validación cambiada
   },
   onFocus: () => {
-    // Input enfocado
+    // Input focused / Input enfocado
   },
   onBlur: () => {
-    // Input perdió foco
+    // Input blurred / Input perdió foco
   }
 }
 ```
 
-## 📚 API Pública
+---
+
+## 📚 Public API
 
-### Métodos de Lectura
+### Reading Methods / Métodos de Lectura
 
 #### `getCountry()`
-Devuelve el código ISO2 del país seleccionado.
+Returns the ISO2 code of the selected country / Devuelve el código ISO2 del país seleccionado.
 
 ```javascript
 const country = phoneLib.getCountry(); // 'CO'
 ```
 
 #### `getDialCode()`
-Devuelve el código de marcación del país seleccionado.
+Returns the dial code of the selected country / Devuelve el código de marcación del país seleccionado.
 
 ```javascript
 const dialCode = phoneLib.getDialCode(); // '+57'
 ```
 
 #### `getRaw()`
-Devuelve el número ingresado sin formato (solo dígitos).
+Returns the entered number without formatting (digits only) / Devuelve el número ingresado sin formato (solo dígitos).
 
 ```javascript
 const raw = phoneLib.getRaw(); // '3001234567'
 ```
 
 #### `getE164()`
-Devuelve el número en formato E.164.
+Returns the number in E.164 format / Devuelve el número en formato E.164.
 
 ```javascript
 const e164 = phoneLib.getE164(); // '+573001234567'
 ```
 
 #### `isValid()`
-Devuelve `true` si el número es válido, `false` en caso contrario.
+Returns `true` if the number is valid, `false` otherwise / Devuelve `true` si el número es válido, `false` en caso contrario.
 
 ```javascript
 const isValid = phoneLib.isValid(); // true o false
 ```
 
 #### `formatInternational()`
-Devuelve el número en formato internacional.
+Returns the number in international format / Devuelve el número en formato internacional.
 
 ```javascript
 const international = phoneLib.formatInternational(); // '+57 300 123 4567'
 ```
 
 #### `formatNational()`
-Devuelve el número en formato nacional.
+Returns the number in national format / Devuelve el número en formato nacional.
 
 ```javascript
 const national = phoneLib.formatNational(); // '300 123 4567'
 ```
 
 #### `formatRFC3966()`
-Devuelve el número en formato RFC3966.
+Returns the number in RFC3966 format / Devuelve el número en formato RFC3966.
 
 ```javascript
 const rfc3966 = phoneLib.formatRFC3966(); // 'tel:+57-300-123-4567'
 ```
 
 #### `getNumberType()`
-Devuelve el tipo de número (MOBILE, FIXED_LINE, etc.).
+Returns the number type (MOBILE, FIXED_LINE, etc.) / Devuelve el tipo de número (MOBILE, FIXED_LINE, etc.).
 
 ```javascript
 const type = phoneLib.getNumberType(); // 'MOBILE' o null
 ```
 
 #### `getInfo()`
-Devuelve un objeto con toda la información del número.
+Returns an object with all number information / Devuelve un objeto con toda la información del número.
 
 ```javascript
 const info = phoneLib.getInfo();
@@ -568,7 +585,7 @@ const info = phoneLib.getInfo();
 ```
 
 #### `getCountryMetadata()`
-Devuelve información completa del país seleccionado.
+Returns complete information about the selected country / Devuelve información completa del país seleccionado.
 
 ```javascript
 const metadata = phoneLib.getCountryMetadata();
@@ -580,31 +597,31 @@ const metadata = phoneLib.getCountryMetadata();
 // }
 ```
 
-### Métodos de Control
+### Control Methods / Métodos de Control
 
 #### `setCountry(iso2)`
-Establece el país programáticamente.
+Sets the country programmatically / Establece el país programáticamente.
 
 ```javascript
 phoneLib.setCountry('ES');
 ```
 
 #### `setPhoneNumber(number)`
-Establece el número telefónico programáticamente.
+Sets the phone number programmatically / Establece el número telefónico programáticamente.
 
 ```javascript
 phoneLib.setPhoneNumber('+34600123456');
 ```
 
 #### `setValue(country, number)`
-Establece país y número juntos.
+Sets both country and number / Establece país y número juntos.
 
 ```javascript
 phoneLib.setValue('ES', '600123456');
 ```
 
 #### `enable()` / `disable()`
-Habilita o deshabilita el componente.
+Enables or disables the component / Habilita o deshabilita el componente.
 
 ```javascript
 phoneLib.enable();
@@ -612,21 +629,21 @@ phoneLib.disable();
 ```
 
 #### `reset()`
-Resetea el componente a valores iniciales.
+Resets the component to initial values / Resetea el componente a valores iniciales.
 
 ```javascript
 phoneLib.reset();
 ```
 
 #### `destroy()`
-Destruye la instancia y limpia recursos.
+Destroys the instance and cleans up resources / Destruye la instancia y limpia recursos.
 
 ```javascript
 phoneLib.destroy();
 ```
 
 #### `updateOptions(newOptions)`
-Actualiza opciones dinámicamente.
+Updates options dynamically / Actualiza opciones dinámicamente.
 
 ```javascript
 phoneLib.updateOptions({
@@ -634,21 +651,23 @@ phoneLib.updateOptions({
 });
 ```
 
-## 🎨 Estilos Personalizados
+---
+
+## 🎨 Custom Styling / Estilos Personalizados
 
-### Con Clases CSS
+### With CSS Classes / Con Clases CSS
 
 ```javascript
 const phoneLib = new PhoneLib('#container', {
   customClasses: {
-    wrapper: 'mi-clase-personalizada',
-    dropdownButton: 'mi-boton-personalizado',
-    input: 'mi-input-personalizado'
+    wrapper: 'my-custom-class',
+    dropdownButton: 'my-custom-button',
+    input: 'my-custom-input'
   }
 });
 ```
 
-### Con Estilos Inline
+### With Inline Styles / Con Estilos Inline
 
 ```javascript
 const phoneLib = new PhoneLib('#container', {
@@ -666,177 +685,193 @@ const phoneLib = new PhoneLib('#container', {
 });
 ```
 
-### Elementos Personalizables
+### Customizable Elements / Elementos Personalizables
+
+- `wrapper` - Main container / Contenedor principal
+- `dropdownButton` - Country selector button / Botón del selector de país
+- `input` - Phone input field / Campo de entrada de teléfono
+- `dialCodeInput` - Dial code field (separated layout only) / Campo de código (solo layout separado)
+- `row` - Grid row (separated layout only) / Fila del grid (solo layout separado)
 
-- `wrapper` - Contenedor principal
-- `dropdownButton` - Botón del selector de país
-- `input` - Campo de entrada de teléfono
-- `dialCodeInput` - Campo de código (solo layout separado)
-- `row` - Fila del grid (solo layout separado)
+---
 
-## 🔧 Ejemplos Avanzados
+## 🔧 Advanced Examples / Ejemplos Avanzados
 
-### Detección Automática de País
+### Automatic Country Detection / Detección Automática de País
 
 ```javascript
 const phoneLib = new PhoneLib('#container', {
-  autoDetectCountry: true  // Detecta país al ingresar +34...
+  autoDetectCountry: true  // Detects country when entering +34... / Detecta país al ingresar +34...
 });
 
-// El usuario escribe: +34 600 123 456
-// Automáticamente cambia a España
+// User types / Usuario escribe: +34 600 123 456
+// Automatically changes to Spain / Automáticamente cambia a España
 ```
 
-### Filtrado de Países
+### Country Filtering / Filtrado de Países
 
 ```javascript
 const phoneLib = new PhoneLib('#container', {
-  // Solo mostrar estos países
+  // Only show these countries / Solo mostrar estos países
   onlyCountries: ['CO', 'US', 'ES', 'MX'],
   
-  // Deshabilitar estos países (aparecen pero no se pueden seleccionar)
+  // Disable these countries (appear but can't be selected) / Deshabilitar estos países
   disabledCountries: ['CU', 'KP'],
   
-  // Excluir estos países (no aparecen en la lista)
+  // Exclude these countries (don't appear in list) / Excluir estos países
   excludeCountries: ['XX']
 });
 ```
 
-### Validación en Tiempo Real
+### Real-time Validation / Validación en Tiempo Real
 
 ```javascript
 const phoneLib = new PhoneLib('#container', {
-  validateOnInput: true,  // Valida mientras el usuario escribe
+  validateOnInput: true,  // Validate while user types / Valida mientras el usuario escribe
   
   onValidationChange: (isValid) => {
     if (isValid) {
-      console.log('Número válido!');
+      console.log('Valid number! / ¡Número válido!');
     }
   }
 });
 ```
 
-### Modo Readonly/Disabled
+### Readonly/Disabled Mode / Modo Readonly/Disabled
 
 ```javascript
-// Solo lectura
+// Read-only / Solo lectura
 const phoneLib = new PhoneLib('#container', {
   readonly: true
 });
 
-// Deshabilitado
+// Disabled / Deshabilitado
 const phoneLib = new PhoneLib('#container', {
   disabled: true
 });
 ```
 
-## 📱 Props del Componente React
-
-| Prop | Tipo | Default | Descripción |
-|------|------|---------|-------------|
-| `initialCountry` | string | `'US'` | País inicial (ISO2) |
-| `preferredCountries` | array | `[]` | Países preferidos |
-| `showHint` | boolean | `true` | Mostrar hint de validación |
-| `layout` | string | `'integrated'` | `'integrated'` o `'separated'` |
-| `showDialCode` | boolean | `true` | Mostrar código de marcación |
-| `autoDetectCountry` | boolean | `false` | Detectar país automáticamente |
-| `validateOnInput` | boolean | `false` | Validar mientras se escribe |
-| `disabledCountries` | array | `[]` | Países deshabilitados |
-| `onlyCountries` | array | `[]` | Solo estos países |
-| `excludeCountries` | array | `[]` | Excluir estos países |
-| `readonly` | boolean | `false` | Modo solo lectura |
-| `disabled` | boolean | `false` | Componente deshabilitado |
-| `placeholder` | string | `null` | Placeholder personalizado |
-| `countryLabel` | string | `'País'` | Label para selector |
-| `dialCodeLabel` | string | `'Código'` | Label para código |
-| `phoneLabel` | string | `'Número de teléfono'` | Label para número |
-| `customClasses` | object | `{}` | Clases CSS personalizadas |
-| `customStyles` | object | `{}` | Estilos inline personalizados |
-| `messages` | object | `{}` | Mensajes personalizables |
-| `ariaLabels` | object | `{}` | Labels ARIA personalizables |
-| `onCountryChange` | function | `null` | Callback cuando cambia el país |
-| `onPhoneChange` | function | `null` | Callback cuando cambia el número |
-| `onValidationChange` | function | `null` | Callback cuando cambia la validación |
-| `onFocus` | function | `null` | Callback cuando se enfoca |
-| `onBlur` | function | `null` | Callback cuando pierde foco |
-
-## 🧪 Desarrollo y Pruebas
-
-### Ejecutar Demos Localmente
+---
+
+## 📱 React Component Props
+
+| Prop | Type | Default | Description / Descripción |
+|------|------|---------|--------------------------|
+| `initialCountry` | string | `'US'` | Initial country (ISO2) / País inicial (ISO2) |
+| `preferredCountries` | array | `[]` | Preferred countries / Países preferidos |
+| `showHint` | boolean | `true` | Show validation hint / Mostrar hint de validación |
+| `layout` | string | `'integrated'` | `'integrated'` or `'separated'` / `'integrated'` o `'separated'` |
+| `showDialCode` | boolean | `true` | Show dial code / Mostrar código de marcación |
+| `autoDetectCountry` | boolean | `false` | Auto-detect country / Detectar país automáticamente |
+| `validateOnInput` | boolean | `false` | Validate while typing / Validar mientras se escribe |
+| `disabledCountries` | array | `[]` | Disabled countries / Países deshabilitados |
+| `onlyCountries` | array | `[]` | Only these countries / Solo estos países |
+| `excludeCountries` | array | `[]` | Exclude these countries / Excluir estos países |
+| `readonly` | boolean | `false` | Read-only mode / Modo solo lectura |
+| `disabled` | boolean | `false` | Disabled component / Componente deshabilitado |
+| `placeholder` | string | `null` | Custom placeholder / Placeholder personalizado |
+| `countryLabel` | string | `'Country'` / `'País'` | Label for selector / Label para selector |
+| `dialCodeLabel` | string | `'Code'` / `'Código'` | Label for code / Label para código |
+| `phoneLabel` | string | `'Phone number'` / `'Número de teléfono'` | Label for number / Label para número |
+| `customClasses` | object | `{}` | Custom CSS classes / Clases CSS personalizadas |
+| `customStyles` | object | `{}` | Inline styles / Estilos inline personalizados |
+| `messages` | object | `{}` | Custom messages / Mensajes personalizables |
+| `ariaLabels` | object | `{}` | ARIA labels / Labels ARIA personalizables |
+| `onCountryChange` | function | `null` | Callback when country changes / Callback cuando cambia el país |
+| `onPhoneChange` | function | `null` | Callback when number changes / Callback cuando cambia el número |
+| `onValidationChange` | function | `null` | Callback when validation changes / Callback cuando cambia la validación |
+| `onFocus` | function | `null` | Callback when focused / Callback cuando se enfoca |
+| `onBlur` | function | `null` | Callback when blurred / Callback cuando pierde foco |
+
+---
+
+## 🧪 Development and Testing / Desarrollo y Pruebas
+
+### Run Demos Locally / Ejecutar Demos Localmente
 
 ```bash
-# Instalar dependencias
+# Install dependencies / Instalar dependencias
 npm install
 
-# Iniciar servidor de desarrollo
+# Start development server / Iniciar servidor de desarrollo
 npm run serve
 ```
 
-Esto abrirá `http://localhost:3004` con todos los demos disponibles.
+This will open `http://localhost:3004` with all available demos / Esto abrirá `http://localhost:3004` con todos los demos disponibles.
 
-### Archivos de Demo
+### Demo Files / Archivos de Demo
 
-- `demo.html` - Layout integrado básico
-- `demo-separated.html` - Layout separado
-- `demo-all-layouts.html` - Comparación de todos los layouts
-- `demo-features.html` - Todas las características
-- `demo-react.html` - Ejemplo con React
+- `demo.html` - Basic integrated layout / Layout integrado básico
+- `demo-separated.html` - Separated layout / Layout separado
+- `demo-all-layouts.html` - All layouts comparison / Comparación de todos los layouts
+- `demo-features.html` - All features / Todas las características
+- `demo-react.html` - React example / Ejemplo con React
+
+---
 
-## 📦 Estructura del Paquete
+## 📦 Package Structure / Estructura del Paquete
 
 ```
 @jacksonavila/phone-lib/
-├── phone-lib.js          # Código principal (Vanilla JS)
-├── phone-lib.css         # Estilos CSS
-├── phone-lib-react.jsx   # Componente React
-├── phone-lib-react.js    # Versión CommonJS/ESM React
-└── README.md             # Documentación
+├── phone-lib.js          # Main code (Vanilla JS) / Código principal (Vanilla JS)
+├── phone-lib.css         # CSS styles / Estilos CSS
+├── phone-lib-react.jsx   # React component / Componente React
+├── phone-lib-react.js    # CommonJS/ESM React version / Versión CommonJS/ESM React
+└── README.md             # Documentation / Documentación
 ```
 
-### Rutas de Importación
+### Import Paths / Rutas de Importación
 
 ```javascript
-// Librería principal (Vanilla JS)
+// Main library (Vanilla JS) / Librería principal (Vanilla JS)
 import PhoneLib from '@jacksonavila/phone-lib';
 
-// Componente React
+// React component / Componente React
 import PhoneLibReact from '@jacksonavila/phone-lib/react';
 
-// Estilos CSS
+// CSS styles / Estilos CSS
 import '@jacksonavila/phone-lib/css';
 
-// O con rutas completas
+// Or with full paths / O con rutas completas
 import PhoneLib from '@jacksonavila/phone-lib/phone-lib.js';
 import PhoneLibReact from '@jacksonavila/phone-lib/phone-lib-react.jsx';
 import '@jacksonavila/phone-lib/phone-lib.css';
 ```
 
-## 🤝 Contribuir
+---
+
+## 🤝 Contributing / Contribuir
+
+Contributions are welcome / Las contribuciones son bienvenidas. Please / Por favor:
+
+1. Fork the project / Haz fork del proyecto
+2. Create a feature branch / Crea una rama para tu feature (`git checkout -b feature/AmazingFeature`)
+3. Commit your changes / Commit tus cambios (`git commit -m 'Add some AmazingFeature'`)
+4. Push to the branch / Push a la rama (`git push origin feature/AmazingFeature`)
+5. Open a Pull Request / Abre un Pull Request
 
-Las contribuciones son bienvenidas. Por favor:
+---
+
+## 📄 License / Licencia
 
-1. Fork el proyecto
-2. Crea una rama para tu feature (`git checkout -b feature/AmazingFeature`)
-3. Commit tus cambios (`git commit -m 'Add some AmazingFeature'`)
-4. Push a la rama (`git push origin feature/AmazingFeature`)
-5. Abre un Pull Request
+This project is licensed under the MIT License / Este proyecto está bajo la Licencia MIT - see the [LICENSE](LICENSE) file for details / ver el archivo [LICENSE](LICENSE) para más detalles.
 
-## 📄 Licencia
+---
 
-Este proyecto está bajo la Licencia MIT - ver el archivo [LICENSE](LICENSE) para más detalles.
+## 🙏 Acknowledgments / Agradecimientos
 
-## 🙏 Agradecimientos
+- [libphonenumber-js](https://github.com/catamphetamine/libphonenumber-js) - For phone number validation and formatting / Para validación y formato de números telefónicos
 
-- [libphonenumber-js](https://github.com/catamphetamine/libphonenumber-js) - Para validación y formato de números telefónicos
+---
 
-## 📞 Soporte
+## 📞 Support / Soporte
 
-Si tienes preguntas o encuentras algún problema:
+If you have questions or find any issues / Si tienes preguntas o encuentras algún problema:
 
-- Abre un [issue](https://github.com/tu-usuario/phone-lib/issues) en GitHub
-- Consulta la [documentación completa](./USAGE.md)
-- Revisa los [ejemplos](./demo.html)
+- Open an [issue](https://github.com/tu-usuario/phone-lib/issues) on GitHub
+- Check the [complete documentation](./USAGE.md) / Consulta la [documentación completa](./USAGE.md)
+- Review the [examples](./demo.html) / Revisa los [ejemplos](./demo.html)
 
 ---
 
-**Hecho con ❤️ para la comunidad de desarrolladores**
+**Made with ❤️ for the developer community / Hecho con ❤️ para la comunidad de desarrolladores**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jacksonavila/phone-lib",
-  "version": "2.0.1",
+  "version": "2.0.2",
   "description": "Librería JavaScript para input de teléfono con selector de país y banderas - Compatible con Vanilla JS y React",
   "main": "phone-lib.js",
   "module": "phone-lib.js",
@@ -71,4 +71,4 @@
   "engines": {
     "node": ">=14.0.0"
   }
-}
+}