@dropi/ui 0.1.43 → 0.1.44

package/package.json

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

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**