@klu_dev/ui-klu-green 1.1.2 → 1.1.4

package/README.md

@@ -16,6 +16,7 @@ npm install @klu_dev/ui-klu-green
 - BackButton
 - Select
 - Typography
+- Modal
 
 ## Antes de comenzar a agregar componentes
 
@@ -134,25 +135,20 @@ export default function ButtonExamples() {
 
 - **Botón con ícono:**
 ```tsx
-import { Button, CardIcon, ChevronRightIcon } from "@klu_dev/ui-klu-green"
+import { Button, Icons } from "@klu_dev/ui-klu-green"
 
 export default function ButtonExamples() {
   return (
     <div className="uiklu-flex uiklu-flex-col uiklu-gap-6">
-      {/* Botón con icono a la izquierda (default) */}
-      <Button variant="primary" icon={<CardIcon />}>
+      {/* Botón con ícono usando el objeto Icons */}
+      <Button variant="primary" icon={Icons.CARD}>
         Pagar con Tarjeta
       </Button>
 
-      {/* Botón con icono a la derecha */}
-      <Button variant="outlinePrimary" icon={<ChevronRightIcon />} iconAlign="right">
+      {/* Botón con ícono a la derecha */}
+      <Button variant="outlinePrimary" icon={Icons.CHEVRON_RIGHT} iconAlign="right">
         Continuar
       </Button>
-
-      {/* Botón con gradiente e icono (el icono se adapta a blanco automáticamente) */}
-      <Button variant="secondary" size="lg" icon={<CardIcon />}>
-        Confirmar Transacción
-      </Button>
     </div>
   )
 }
@@ -310,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]` |
+