@dropi/ui 0.1.42 → 0.1.44

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dropi/ui",
-  "version": "0.1.42",
+  "version": "0.1.44",
   "description": "Dropi Design System — Web Components for Angular, React and Vue",
   "main": "dist/index.cjs.js",
   "module": "dist/index.js",
@@ -45,7 +45,8 @@
     "scripts/"
   ],
   "bin": {
-    "@dropi/ui": "scripts/setup.js"
+    "dropi-ui": "scripts/setup.js",
+    "ui": "scripts/setup.js"
   },
   "workspaces": [
     "packages/*"

package/readme.md

@@ -139,6 +139,40 @@ onOnInput={(e) => console.log(e.detail)}
 
 ---
 
+## 📋 Soporte para Formularios Nativos
+
+Todos los componentes de entrada (`DropiInput`, `DropiSelect`, `DropiCheckbox`, `DropiSwitch`, `DropiPhoneInput`, `DropiCountrySelector`, `DropiOtpSendCode`) soportan asociación nativa a formularios. Esto permite capturar sus valores usando `new FormData(event.currentTarget)` o a través de la propiedad `elements` del formulario.
+
+### Requisitos
+1. El componente debe estar dentro de un tag `<form>`.
+2. Se **debe** proporcionar la prop `name` al componente.
+
+### Ejemplo en React
+```tsx
+const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
+  e.preventDefault();
+  
+  // Obtener todos los datos como un objeto
+  const formData = new FormData(e.currentTarget);
+  const data = Object.fromEntries(formData.entries());
+  console.log(data); // { email: "...", country: "CO", ... }
+
+  // Acceso directo por nombre
+  const { email } = e.currentTarget.elements as any;
+  console.log(email.value);
+};
+
+return (
+  <form onSubmit={handleSubmit}>
+    <DropiInput name="email" label="Email" required />
+    <DropiCountrySelector name="country" label="País" />
+    <DropiButton nativeType="submit" text="Enviar" />
+  </form>
+);
+```
+
+---
+
 ## 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 +209,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**
 

package/scripts/postinstall.js

@@ -32,7 +32,7 @@ if (__dirname.includes('node_modules')) {
   console.log('\x1b[1m%s\x1b[0m', '  🎨 @dropi/ui instalado exitosamente');
   console.log('━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━');
   console.log('\n  Para configurar estilos, iconos y soporte React, ejecuta:');
-  console.log('\x1b[33m%s\x1b[0m', '  npx @dropi/ui setup');
+  console.log('\x1b[33m%s\x1b[0m', '  npx dropi-ui setup');
   console.log('\x1b[32m%s\x1b[0m', '  o simplemente pídele a tu IA: "/install-dropi-ui"');
   console.log('\n━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━\n');
 }