@dropi/ui 0.1.17 → 0.1.18

package/package.json

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

package/readme.md

@@ -3,7 +3,7 @@
 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.
 
-- **Paquete npm:** `@dropi/ui` (v0.1.15)
+- **Paquete npm:** `@dropi/ui` (v0.1.17)
 - **React wrappers:** `@dropi/ui-react`
 
 ---
@@ -21,7 +21,7 @@ Ejecuta el siguiente comando en la raíz de tu proyecto:
 ```bash
 npx @dropi/ui setup
 ```
-*Este comando detectará tu framework (Angular, React o Vue), instalará las dependencias necesarias y configurará estilos e iconos automáticamente.*
+*Este comando detectará tu framework (Angular, React o Vue), instalará las dependencias necesarias y configurará estilos, iconos, animaciones Lottie y scripts automáticamente.*
 
 ---
 
@@ -79,6 +79,23 @@ onDropiChange={(e) => console.log(e.detail)}
 
 ---
 
+## 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()`.
+
+```tsx
+const modalRef = useRef<any>(null);
+const Modal = DropiModal as any; // Cast opcional para mejor DX
+
+<Modal ref={modalRef} header="Título">
+  <p>Contenido</p>
+</Modal>
+
+<button onClick={() => modalRef.current?.show()}>Abrir</button>
+```
+
+---
+
 ## Componentes
 
 ---
@@ -301,6 +318,7 @@ interface SelectOption {
   shortLabel?: string      // para showCountryFlags
   secondLabel?: string     // subtítulo en radioOptions
   countryCode?: string     // código de país para flags
+  countryId?: string       // id de país para flags
   imageUrl?: string        // imagen en radioOptions
   preIcon?: string         // ícono izquierdo
   disabled?: boolean
@@ -477,6 +495,175 @@ Renderiza íconos SVG desde el sprite de Dropi. Sin eventos.
 
 ---
 
+### `<dropi-tabs>`
+
+Sistema de pestañas con contadores y estados.
+
+**Props**
+
+| Prop | Tipo | Default | Descripción |
+|---|---|---|---|
+| `tabs` | `TabItem[]` | `[]` | Lista de tabs `{ id, label, counter, active, disabled, completed }` |
+| `showIcon` | `boolean` | `false` | Mostrar check si `completed` |
+
+**Ejemplo React**
+```tsx
+<DropiTabs 
+  tabs={[{ id: 1, label: 'Activos', counter: 5 }]} 
+  onDropiTabChange={(e) => console.log(e.detail)} 
+/>
+```
+
+---
+
+### `<dropi-accordion>`
+
+Contenedor colapsable.
+
+**Props**
+
+| Prop | Tipo | Default | Descripción |
+|---|---|---|---|
+| `header` | `string` | `''` | Título del acordeón |
+| `preIcon` | `string` | `''` | Ícono izquierdo |
+| `disabled` | `boolean` | `false` | Deshabilitar |
+
+**Ejemplo React**
+```tsx
+<DropiAccordion header="¿Cómo funciona?">
+  <p>Contenido interno</p>
+</DropiAccordion>
+```
+
+---
+
+### `<dropi-skeleton>`
+
+Indicadores de carga.
+
+**Props**
+
+| Prop | Tipo | Default | Descripción |
+|---|---|---|---|
+| `variant` | `'text' \| 'circle' \| 'rect'` | `'text'` | Forma |
+| `width` | `string` | `'100%'` | Ancho CSS |
+| `height` | `string` | `'16px'` | Alto CSS |
+
+---
+
+### `<dropi-paginator>`
+
+Control de paginación.
+
+**Props**
+
+| Prop | Tipo | Default | Descripción |
+|---|---|---|---|
+| `total` | `number` | `0` | Total de registros |
+| `rows` | `number` | `10` | Registros por página |
+| `showPageSizeSelector` | `boolean` | `false` | Selector de cantidad por página |
+
+**Ejemplo React**
+```tsx
+<DropiPaginator 
+  total={100} 
+  onDropiPageChange={(e) => console.log(e.detail.page)} 
+/>
+```
+
+---
+
+### `<dropi-empty-state>`
+
+Pantalla de "no hay datos".
+
+**Props**
+
+| Prop | Tipo | Default | Descripción |
+|---|---|---|---|
+| `header` | `string` | `''` | Título principal |
+| `description` | `string` | `''` | Subtítulo descriptivo |
+| `actionLabel` | `string` | `''` | Texto botón principal |
+| `secondaryLabel` | `string` | `''` | Texto botón secundario |
+
+---
+
+### `<dropi-tooltip>` (V2)
+
+Burbuja de información al hover.
+
+**Props**
+
+| Prop | Tipo | Default | Descripción |
+|---|---|---|---|
+| `text` | `string` | `''` | Mensaje del tooltip |
+| `position` | `'top' \| 'bottom' \| 'left' \| 'right'` | `'top'` | Posición |
+| `maxWidth` | `string` | `'280px'` | Ancho máximo |
+
+**Ejemplo React**
+```tsx
+<DropiTooltip text="Guardar cambios" position="bottom">
+  <DropiButton text="Hover me" />
+</DropiTooltip>
+```
+
+---
+
+### `<dropi-modal>`
+
+Ventana de diálogo con overlays.
+
+**Props**
+
+| Prop | Tipo | Default | Descripción |
+|---|---|---|---|
+| `header` | `string` | `''` | Título del modal |
+| `size` | `'s' \| 'm' \| 'l' \| 'full' ...` | `'m'` | Tamaño |
+| `visible` | `boolean` | `false` | Controlar visibilidad vía prop |
+
+**Ejemplo React (Imperativo)**
+```tsx
+const modalRef = useRef<any>(null);
+const Modal = DropiModal as any;
+
+<Modal ref={modalRef} header="Mi Modal">
+  <p>Contenido</p>
+  <div slot="footer">
+     <DropiButton text="Cerrar" onDropiClick={() => modalRef.current.hide()} />
+  </div>
+</Modal>
+```
+
+---
+
+### `<dropi-toast>`
+
+Notificaciones tipo push con animaciones Lottie.
+
+**Mapeo de Severidad a Lottie:**
+- `success` -> `success.json`
+- `error` -> `failure.json`
+- `warn` -> `warning.json`
+- `info` -> `question.json`
+
+**Ejemplo React**
+```tsx
+const toastRef = useRef<any>(null);
+const Toast = DropiToast as any;
+ 
+<Toast ref={toastRef} position="top-right" />
+ 
+<button onClick={() => toastRef.current.show({ 
+  severity: 'success', 
+  summary: '¡Éxito!', 
+  detail: 'Usuario creado.' 
+})}>
+  Lanzar Toast
+</button>
+```
+
+---
+
 ## Build (desarrollo)
 
 ```bash