@klu_dev/ui-klu-green 1.1.3 → 1.1.5

package/README.md

@@ -16,6 +16,7 @@ npm install @klu_dev/ui-klu-green
 - BackButton
 - Select
 - Typography
+- Modal
 
 ## Antes de comenzar a agregar componentes
 
@@ -305,4 +306,111 @@ export default function FormSelect() {
 | `sm` | `150px` | `uiklu-w-[150px]` |
 | `md` | `250px` | `uiklu-w-[250px]` |
 | `lg` | `350px` | `uiklu-w-[350px]` |
-| `full` | `100%` | `uiklu-w-full` |
+| `full` | `100%` | `uiklu-w-full` |
+
+
+
+## Uso Modal
+Componente de diálogo flexible basado en Radix UI. Permite encabezados con íconos, contenido personalizado y un pie con botones configurables que usan las variantes de la librería.
+
+
+- **Modal Autorización:**
+
+```tsx
+import { Modal, Button, Input, Icons } from "@klu_dev/ui-klu-green"
+import { useState } from "react"
+
+export default function AuthExample() {
+  const [isOpen, setIsOpen] = useState(false)
+
+  return (
+    <>
+      <Button onClick={() => setIsOpen(true)}>Abrir Autorización</Button>
+
+      <Modal
+        open={isOpen}
+        onOpenChange={setIsOpen}
+        title="Autorización"
+        icon={Icons.SHIELD_CHECK}
+        footerButtons={[
+          { 
+            label: "Cancelar", 
+            variant: "outlinePrimary", 
+            onClick: () => setIsOpen(false) 
+          },
+          { 
+            label: "Verificar código", 
+            variant: "primary", 
+            onClick: () => console.log("Validando...") 
+          }
+        ]}
+      >
+        <div className="uiklu-space-y-6">
+          <p className="uiklu-text-balance-slate-600 uiklu-text-[14px]">
+            Este movimiento esta protegido con la aplicación de autenticación.
+          </p>
+          <div className="uiklu-space-y-2">
+            <label className="uiklu-text-balance-slate-600 uiklu-text-[14px] uiklu-font-medium">
+              Código de autenticación
+            </label>
+            <Input type="password" placeholder="**********" size="full" />
+          </div>
+        </div>
+      </Modal>
+    </>
+  )
+}
+```
+
+
+
+- **Modal Mensaje informativo:**
+Ideal para confirmaciones de éxito o avisos rápidos donde solo se requiere un botón de acción.
+
+
+```tsx
+import { Modal, Icons } from "@klu_dev/ui-klu-green"
+import { useState } from "react"
+
+export default function SuccessMessage() {
+  const [isOpen, setIsOpen] = useState(false)
+
+  return (
+    <>
+      <button onClick={() => setIsOpen(true)}>Actualizar Contraseña</button>
+
+      <Modal
+        open={isOpen}
+        onOpenChange={setIsOpen}
+        title="Cambio Exitoso"
+        icon={Icons.SHIELD_CHECK}
+        footerButtons={[
+          { 
+            label: "Entendido", 
+            variant: "primary", 
+            onClick: () => setIsOpen(false) 
+          }
+        ]}
+      >
+        <p className="uiklu-text-balance-slate-600 uiklu-text-[14px] uiklu-leading-relaxed">
+          Tu contraseña se ha actualizado correctamente. Te recomendamos no compartirla con nadie por seguridad.
+        </p>
+      </Modal>
+    </>
+  )
+}
+
+```
+
+- **Props de Modal:**
+
+| Prop | Tipo | Descripción |
+| :--- | :--- | :--- |
+| `open` | `boolean` | Controla si el modal está visible. |
+| `onOpenChange` | `function` | Función para actualizar el estado de apertura. |
+| `title` | `string` | Título que aparece en el encabezado. |
+| `icon` | `ReactNode` | Icono decorativo al lado del título. |
+| `children` | `ReactNode` | Contenido principal (cuerpo) del modal. |
+| `footerButtons` | `array` | Configuración de botones (label, onClick, variant). |
+| `sm:max-w` | `500px` | Ancho máximo en pantallas pequeñas: `uiklu-sm:max-w-[500px]` |
+