telpick 1.0.1 → 1.0.3

package/README.es.md

@@ -8,6 +8,12 @@ Selector de país y código telefónico multiplataforma con diseño moderno y an
 
 [English](README.md) | **Español**
 
+## Probar la demo
+
+Puedes probar la demo interactiva en línea:
+
+**[→ Abrir demo (GitHub Pages)](https://julioalmirooficial.github.io/telpick/)**
+
 ## Características
 
 - Diseño moderno con animaciones suaves
@@ -42,6 +48,8 @@ yarn add telpick
 <script src="https://unpkg.com/telpick@latest/dist/telpick.umd.js"></script>
 ```
 
+**Importar CSS:** Usa `import 'telpick/dist/style.css'` cuando instalas desde npm (el paquete publicado incluye `dist`). Si instalas desde GitHub (ej. `npm install github:julioalmirooficial/telpick`), usa `import 'telpick/src/telpick.css'` porque `dist` no está en el repo.
+
 ## Uso
 
 ### React

package/README.md

@@ -8,6 +8,12 @@ Multi-platform country and phone code selector with a modern design, smooth anim
 
 **English** | [Español](README.es.md)
 
+## Try the demo
+
+You can try the interactive demo online:
+
+**[→ Open demo (GitHub Pages)](https://julioalmirooficial.github.io/telpick/)**
+
 ## Features
 
 - Modern design with smooth animations
@@ -42,6 +48,8 @@ yarn add telpick
 <script src="https://unpkg.com/telpick@latest/dist/telpick.umd.js"></script>
 ```
 
+**Importing CSS:** Use `import 'telpick/dist/style.css'` when you install from npm (the published package includes `dist`). If you install from GitHub (e.g. `npm install github:julioalmirooficial/telpick`), use `import 'telpick/src/telpick.css'` instead, because `dist` is not in the repo.
+
 ## Usage
 
 ### React

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "telpick",
-  "version": "1.0.1",
+  "version": "1.0.3",
   "description": "Multi-platform country and phone code selector with a modern design, smooth animations, and automatic IP detection.",
   "main": "dist/telpick.umd.js",
   "module": "dist/telpick.esm.js",
@@ -23,7 +23,8 @@
       "import": "./dist/telpick.vanilla.js",
       "types": "./dist/telpick.d.ts"
     },
-    "./style.css": "./dist/style.css"
+    "./style.css": "./dist/style.css",
+    "./src/telpick.css": "./src/telpick.css"
   },
   "files": [
     "dist",
@@ -34,6 +35,8 @@
   ],
   "scripts": {
     "build": "vite build",
+    "build:demo": "vite build --config vite.config.demo.js",
+    "deploy:demo": "npm run build:demo && gh-pages -d docs",
     "dev": "vite",
     "prepublishOnly": "npm run build",
     "test": "jest"
@@ -81,6 +84,7 @@
     }
   },
   "devDependencies": {
+    "gh-pages": "^6.1.1",
     "vite": "^4.0.0",
     "typescript": "^5.0.0",
     "vue": "^3.0.0",

package/src/demo-init.js

@@ -0,0 +1,34 @@
+/**
+ * Demo init: carga Telpick y monta el Interactive Demo.
+ * Así Telpick está disponible cuando se ejecuta el init (evita race con el script inline).
+ */
+import Telpick from './telpick.js'
+
+window.Telpick = Telpick
+
+function initDemo() {
+  const container = document.getElementById('telpick-container')
+  if (!container) return
+
+  const telpick = new Telpick({
+    code: null,
+    onChange: (country) => {
+      const infoEl = document.getElementById('selected-info')
+      if (infoEl) {
+        document.getElementById('selected-code').textContent = country.code
+        document.getElementById('selected-country').textContent = country.country
+        document.getElementById('selected-phone').textContent = country.code
+        document.getElementById('selected-iso').textContent = country.country_code
+        infoEl.classList.add('active')
+      }
+    },
+    styleOverrides: {}
+  })
+  telpick.init(container)
+}
+
+if (document.readyState === 'loading') {
+  document.addEventListener('DOMContentLoaded', initDemo)
+} else {
+  initDemo()
+}