@dropi/ui 0.1.43 → 0.1.45

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dropi/ui",
-  "version": "0.1.43",
+  "version": "0.1.45",
   "description": "Dropi Design System — Web Components for Angular, React and Vue",
   "main": "dist/index.cjs.js",
   "module": "dist/index.js",

package/readme.md

@@ -1,22 +1,25 @@
-# @dropi/ui
+# @dropi/ui 🚀
 
 Librería de Web Components del Design System de Dropi, construida con **Stencil.js v4**.
-Genera componentes reutilizables para Angular, React y Vue desde una única base de código.
+Genera componentes de alto rendimiento para **Angular**, **React** y **Next.js** desde una única base de código.
 
-- **Paquete npm:** `@dropi/ui` (v0.1.24)
-- **React wrappers:** `@dropi/ui-react` (v0.1.9)
+- **Paquete npm:** [@dropi/ui](https://www.npmjs.com/package/@dropi/ui) (v0.1.44)
+- **React wrappers:** [@dropi/ui-react](https://www.npmjs.com/package/@dropi/ui-react) (v0.1.18)
+
+> [!NOTE]
+> Esta es una librería de uso interno y para partners autorizados. La documentación detallada del código fuente reside en nuestro repositorio privado de Bitbucket.
 
 ---
 
 ## ⚡ Quick Start (Recomendado)
 
-Ejecuta este comando en la raíz de tu proyecto:
+Si estás en un proyecto de React o Angular, la forma más rápida de configurar todo es:
 
 ```bash
 npx @dropi/ui setup
 ```
 
-Detecta tu framework (Angular, React, Next.js), instala las dependencias correctas e inyecta la configuración automáticamente.
+Este comando detectará tu framework e instalará automáticamente las dependencias y configuraciones necesarias.
 
 ---
 
@@ -139,6 +142,40 @@ onOnInput={(e) => console.log(e.detail)}
 
 ---
 
+## 📋 Soporte para Formularios Nativos
+
+Todos los componentes de entrada (`DropiInput`, `DropiSelect`, `DropiCheckbox`, `DropiSwitch`, `DropiPhoneInput`, `DropiCountrySelector`, `DropiOtpSendCode`) soportan la **asociación nativa a formularios**. 
+
+Esto permite capturar sus valores de forma instantánea usando el estándar del navegador:
+
+### Ejemplo en React (Estilo FormData)
+```tsx
+const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
+  e.preventDefault();
+  
+  // Extrae todos los valores automáticamente
+  const formData = new FormData(e.currentTarget);
+  const data = Object.fromEntries(formData.entries());
+  
+  console.log(data); // { email: "...", country: "CO", phone: "+57..." }
+};
+
+return (
+  <form onSubmit={handleSubmit}>
+    <DropiInput name="email" label="Email" required />
+    <DropiCountrySelector name="country" label="País" />
+    <DropiPhoneInput name="phone" label="Celular" />
+    
+    <DropiButton nativeType="submit" text="Enviar Registro" />
+  </form>
+);
+```
+
+> [!IMPORTANT]
+> Para que un componente sea capturado por el formulario, **debe tener la prop `name`** definida.
+
+---
+
 ## Uso en React (Métodos Imperativos)
 
 Componentes como `DropiModal` y `DropiToast` tienen métodos que deben llamarse vía `ref`. Dado que los wrappers son generados, a veces es necesario castear a `any` para acceder a `show()` o `hide()`.
@@ -175,6 +212,8 @@ Botón de acción principal con múltiples variantes de tipo, apariencia, tamañ
 | `text` | `string` | `''` | Texto del label |
 | `preIcon` | `string` | `''` | Ícono antes del texto |
 | `postIcon` | `string` | `''` | Ícono después del texto |
+| `nativeType` | `'button' \| 'submit' \| 'reset'` | `'button'` | Tipo de botón nativo HTML |
+
 
 **Eventos**
 
@@ -771,6 +810,89 @@ const [open, setOpen] = useState(false);
 
 ---
 
+---
+
+### `<dropi-phone-input>`
+
+Input de teléfono con selector de país y sincronización nativa con `dropi-core_front`.
+
+**Props**
+
+| Prop | Tipo | Default | Descripción |
+|---|---|---|---|
+| `name` | `string` | `''` | Nombre para formularios nativos |
+| `codArea` | `string` | `'57'` | Código de área inicial (sin +) |
+| `ngModelPhone` | `string` | `''` | Valor del teléfono |
+| `phoneNumberPlaceholder` | `string` | `null` | Placeholder del campo numérico |
+| `disabledInput` | `boolean` | `false` | Deshabilita el input |
+| `isValidPhone` | `boolean` | `undefined` | Estado de validación manual |
+
+**Eventos**
+
+| Evento React | `e.detail` | Cuándo |
+|---|---|---|
+| `onDropiCodChange` | `string` | Cambia el código de área |
+| `onDropiPhoneChange` | `string` | Cambia el número de teléfono |
+
+---
+
+### `<dropi-country-selector>`
+
+Selector de países con buscador y flags.
+
+**Props**
+
+| Prop | Tipo | Default | Descripción |
+|---|---|---|---|
+| `name` | `string` | `''` | Nombre para formularios nativos |
+| `label` | `string` | `''` | Label superior |
+| `placeholder` | `string` | `'Seleccionar'` | Texto por defecto |
+| `currentSelection` | `string` | `''` | Código ISO del país seleccionado (ej. 'CO') |
+
+**Eventos**
+
+| Evento React | `e.detail` | Cuándo |
+|---|---|---|
+| `onDropiChangeSelect` | `CountryItem` | Se selecciona un país |
+
+---
+
+### `<dropi-otp-send-code>`
+
+Campo de validación OTP (Código de seguridad).
+
+**Props**
+
+| Prop | Tipo | Default | Descripción |
+|---|---|---|---|
+| `name` | `string` | `''` | Nombre para formularios nativos |
+| `digitsCount` | `number` | `6` | Cantidad de dígitos |
+| `engine` | `'email' \| 'phone'` | `'email'` | Ícono y texto descriptivo |
+| `labelContact` | `string` | `''` | Correo o Teléfono al que se envió |
+
+**Eventos**
+
+| Evento React | `e.detail` | Cuándo |
+|---|---|---|
+| `onCodeAccepted` | `string` | El código se ha completado |
+
+---
+
+### `<dropi-date-picker>`
+
+Selector de fechas individual o por rangos.
+
+**Props**
+
+| Prop | Tipo | Default | Descripción |
+|---|---|---|---|
+| `name` | `string` | `''` | Nombre para formularios nativos |
+| `label` | `string` | `''` | Label |
+| `isRange` | `boolean` | `false` | Habilita selección de rango |
+| `placeholder` | `string` | `''` | Placeholder |
+
+---
+
 ### `<dropi-toast>`
 
 Notificaciones tipo push con animaciones Lottie.
@@ -799,6 +921,103 @@ const Toast = DropiToast as any;
 
 ---
 
+## 🏛️ Catálogo Completo de Componentes (65)
+
+A continuación se listan todos los componentes disponibles en la librería, organizados por su función principal.
+
+### ⌨️ Entradas y Formularios
+| Componente | Función |
+|---|---|
+| `<dropi-input>` | Campo de texto versátil con validación |
+| `<dropi-select>` | Selector avanzado (búsqueda, flags, multiselect) |
+| `<dropi-text-area>` | Área de texto con contador |
+| `<dropi-phone-input>` | Input de celular con selector de país |
+| `<dropi-country-selector>` | Selector global de países |
+| `<dropi-checkbox>` | Checkbox estilizado |
+| `<dropi-switch>` | Interruptor On/Off |
+| `<dropi-radio-button>` | Opción de selección única |
+| `<dropi-otp-send-code>` | Campo de validación de código OTP |
+| `<dropi-date-picker>` | Selector de fecha individual |
+| `<dropi-date-picker-range>` | Selector de rangos de fecha |
+| `<dropi-color-picker>` | Selector de colores |
+| `<dropi-city-selector>` | Selector de ciudades por departamentos |
+| `<dropi-file-upload>` | Zona de carga de archivos |
+| `<dropi-checkbox-selection-list>` | Lista larga de checkboxes con buscador |
+| `<dropi-radio-selection-list>` | Lista larga de radio buttons con buscador |
+| `<dropi-search>` | Barra de búsqueda especializada |
+
+### 📊 Visualización de Datos y Status
+| Componente | Función |
+|---|---|
+| `<dropi-table>` | Tabla de datos profesional (sort, filter, paginador) |
+| `<dropi-badge>` | Estado de cuenta/usuario |
+| `<dropi-badge-legacy>` | Badges de contador y estados legacy |
+| `<dropi-tag>` | Etiquetas de colores y semánticas |
+| `<dropi-tag-type-product>` | Tags específicos para tipos de producto |
+| `<dropi-progress-bar>` | Barra de progreso visual |
+| `<dropi-skeleton>` | Placeholder de carga (text, circle, rect) |
+| `<dropi-avatars>` | Foto de perfil o iniciales |
+| `<dropi-icon>` | Renderizador de íconos del sistema |
+| `<dropi-ilustration-icon>` | Ilustraciones de estado White Label |
+| `<dropi-logo>` | Logotipos oficiales de Dropi |
+| `<dropi-chips>` | Etiquetas con opción de cierre |
+| `<dropi-image-miniature>` | Galería de miniaturas de imágenes |
+| `<dropi-country-flags>` | Renderizador de banderas por código |
+
+### 🔔 Feedback y Overlays
+| Componente | Función |
+|---|---|
+| `<dropi-modal>` | Ventana de diálogo base |
+| `<dropi-alert-modal>` | Modal de confirmación con Lottie |
+| `<dropi-toast>` | Notificaciones push flotantes |
+| `<dropi-alert>` | Banner de alerta (inline/flag) |
+| `<dropi-alert-legacy>` | Alerta simple para compatibilidad Angular |
+| `<dropi-drawer>` | Panel lateral deslizable |
+| `<dropi-tooltip>` | Burbuja de información (hover) |
+| `<dropi-tooltip-v2>` | Tooltip mejorado con posiciones avanzadas |
+| `<dropi-empty-state>` | Pantalla "Sin resultados" con acciones |
+| `<dropi-banner-external>` | Banner publicitario/informativo externo |
+| `<dropi-lottie-loader>` | Cargador animado Lottie genérico |
+
+### 🗺️ Navegación y Estructura
+| Componente | Función |
+|---|---|
+| `<dropi-navbar>` | Barra de navegación superior |
+| `<dropi-sidebar>` | Menú lateral de navegación |
+| `<dropi-tabs>` | Sistema de pestañas con contadores |
+| `<dropi-breadcrumb>` | Migas de pan para navegación |
+| `<dropi-paginator>` | Control de páginas para listas |
+| `<dropi-steps>` | Indicador de pasos horizontal |
+| `<dropi-vertical-steps>` | Indicador de pasos vertical |
+| `<dropi-simple-stepper>` | Stepper simplificado para flujos rápidos |
+| `<dropi-accordion>` | Acordeón simple |
+| `<dropi-accordion-item>` | Item individual de acordeón |
+
+### 🎥 Multimedia y Otros
+| Componente | Función |
+|---|---|
+| `<dropi-media-player>` | Reproductor de Audio/Video personalizado |
+| `<dropi-youtube-lazy-video>` | Carga diferida de videos de YT |
+| `<dropi-image-overlay>` | Visualizador de imagen a pantalla completa |
+| `<dropi-read-more>` | Truncado de texto con "Ver más" |
+| `<dropi-time-line>` | Línea de tiempo de eventos/tracking |
+| `<dropi-file-upload-progress-bar>` | Barra de progreso individual por archivo |
+| `<dropi-carousel>` | Carrusel de imágenes/contenido |
+
+---
+
+## 🤖 AI Skills & Automation
+
+Esta librería está diseñada para ser mantenida por IAs (Claude Code, Cursor, Windsurf). 
+
+## Skills Universales (Compatibles con Claude, Cursor, Windsurf)
+
+Todos los skills han sido estandarizados en la carpeta `/skills`.
+- `/install-dropi-ui` — `skills/install-dropi-ui/skill.md`
+- `/update-context` — `skills/update-context/skill.md`
+
+---
+
 ## Build (desarrollo)
 
 ```bash

package/skills/update-context/skill.md

@@ -0,0 +1,37 @@
+---
+name: update-context
+description: Instrucciones universales para actualizar el contexto del proyecto (api.md, resumen.md, arquitectura.md)
+---
+
+# Universal Skill: /update-context
+
+Este archivo es la fuente de verdad para que cualquier IA (Claude, Cursor, Windsurf, Copilot) mantenga la documentación del proyecto al día.
+
+## 📜 Objetivo
+Mantener los archivos en la carpeta `context/` sincronizados con el código real, especialmente tras cambios masivos o nuevas funcionalidades (como la de 65 componentes y Formularios Nativos).
+
+## 🛠️ Procedimiento Obligatorio
+
+1. **Analizar cambios recientes**:
+   - `git log -n 10 --oneline` (Ver qué se hizo)
+   - `git diff HEAD~5 --name-only` (Ver qué archivos cambiaron)
+
+2. **Verificar Archivos de Contexto**:
+   - `context/resumen.md`: Debe contener el historial de hoy.
+   - `context/api.md`: Debe listar los componentes actuales (65+).
+   - `context/arquitectura.md`: Debe reflejar patrones como "Form Associated".
+
+3. **Actualización Absoluta**:
+   - Si se detecta un componente nuevo, se DEBE agregar a `api.md`.
+   - Si se detecta un patrón nuevo (ej. `ElementInternals`), se DEBE documentar en `arquitectura.md`.
+   - La fecha de actualización debe ser `YYYY-MM-DD`.
+
+## 🤖 Guía para IAs (Prompt Injection)
+Cuando el usuario pida "actualiza el contexto" o use el comando `/update-context`, la IA DEBE:
+- Leer este archivo.
+- Realizar los pasos de análisis.
+- Aplicar los `replace_file_content` necesarios.
+- Reportar un resumen de qué archivos de contexto fueron "sincronizados".
+
+---
+*Dropi UI Documentation System — 2026*