@klu_dev/ui-klu-green 1.2.3 → 1.2.4

package/README.md

@@ -654,4 +654,85 @@ export default function NavigationDashboard() {
 | `id` | `string` | Identificador único de la pestaña. |
 | `label` | `string` | Texto descriptivo de la opción que verá el usuario. |
 | `icon` | `ReactNode` | Elemento gráfico/ícono extraído del objeto `Icons`. |
-| `content` | `ReactNode` | (Opcional) Componente o vista que se renderizará automáticamente al activar la pestaña. |
+| `content` | `ReactNode` | (Opcional) Componente o vista que se renderizará automáticamente al activar la pestaña. |
+
+
+## Uso de MobileMenuDrawer
+
+Componente presentacional ("tonto") diseñado para desplegar la barra de navegación en vistas responsivas móviles. Al cambiar de pestaña, delega el control de la acción a la aplicación contenedora para poder mutar layouts completos de forma dinámica mediante un Mapeo de Componentes.
+
+
+
+```tsx
+import { useState } from 'react'
+import { MobileMenuDrawer, Button, Icons } from '@klu_dev/ui-klu-green'
+import { MoreHorizontal } from 'lucide-react'
+
+// 1. Importa tus componentes/vistas completos del proyecto
+import { MiVistaInicio } from './views/MiVistaInicio'
+import { MiVistaTarjeta } from './views/MiVistaTarjeta'
+import { MiVistaMovimientos } from './views/MiVistaMovimientos'
+
+export function AppMobileLayout() {
+  const [isMenuOpen, setIsMenuOpen] = useState(false)
+  const [activeTab, setActiveTab] = useState('inicio')
+
+  // Opciones compartidas con el menú
+  const opcionesMenu = [
+    { id: 'inicio', label: 'Inicio', icon: Icons.HOME },
+    { id: 'tarjeta', label: 'Mi Tarjeta', icon: Icons.MYCARD },
+    { id: 'movimientos', label: 'Movimientos', icon: Icons.MOVEMENTS },
+  ]
+
+  // 2. Diccionario de mapeo: Asocia cada ID string con su respectiva vista
+  const rendersDeVistas: Record<string, React.ReactNode> = {
+    inicio: <MiVistaInicio />,
+    tarjeta: <MiVistaTarjeta />,
+    movimientos: <MiVistaMovimientos />,
+  }
+
+  return (
+    <div className="uiklu-w-full uiklu-min-h-screen uiklu-bg-gray-50 uiklu-flex uiklu-flex-col">
+      <header className="uiklu-bg-white uiklu-p-4 uiklu-flex uiklu-justify-between uiklu-items-center uiklu-border-b">
+        <span>Mi Banca Web</span>
+        
+        {/* Botón para abrir el drawer */}
+        <Button
+          variant="iconCircle"
+          size="iconOnly"
+          onClick={() => setIsMenuOpen(true)}
+          icon={<MoreHorizontal style={{ width: '20px', height: '20px', color: '#FFF' }} />}
+        />
+      </header>
+
+      {/* 3. Contenedor Dinámico: Se monta la vista completa en base al ID seleccionado */}
+      <main className="uiklu-p-4 uiklu-flex-1">
+        {rendersDeVistas[activeTab] || <MiVistaInicio />}
+      </main>
+
+      {/* Render del Drawer Mobile */}
+      <MobileMenuDrawer
+        isOpen={isMenuOpen}
+        onClose={() => setIsMenuOpen(false)}
+        items={opcionesMenu}
+        activeTab={activeTab}
+        onTabChange={setActiveTab}
+      />
+    </div>
+  )
+}
+```
+
+
+### Props de MobileMenuDrawer
+### Props de MobileMenuDrawer
+
+| Prop | Tipo | Descripción |
+| :--- | :--- | :--- |
+| `isOpen` | `boolean` | Controla la visibilidad en pantalla del menú desplegable. |
+| `onClose` | `() => void` | Callback ejecutado al presionar el botón de cerrar (`X`) o seleccionar una pestaña. |
+| `items` | `NavItem[]` | Array de opciones con estructura `{ id, label, icon, hasDivider? }`. |
+| `activeTab` | `string` | ID de la pestaña seleccionada actualmente. |
+| `onTabChange` | `(id: string) => void` | Callback gatillado al pulsar una nueva opción del menú. Devuelve el `id`. |
+
+

package/dist/index.css

@@ -266,6 +266,10 @@ button,
 .uiklu-m-0{
     margin: 0px;
 }
+.uiklu-mx-auto{
+    margin-left: auto;
+    margin-right: auto;
+}
 .uiklu-my-2{
     margin-top: 0.5rem;
     margin-bottom: 0.5rem;
@@ -342,6 +346,9 @@ button,
 .uiklu-block{
     display: block;
 }
+.uiklu-inline-block{
+    display: inline-block;
+}
 .uiklu-flex{
     display: flex;
 }
@@ -363,6 +370,9 @@ button,
 .uiklu-h-4{
     height: 1rem;
 }
+.uiklu-h-44{
+    height: 11rem;
+}
 .uiklu-h-5{
     height: 1.25rem;
 }
@@ -435,6 +445,9 @@ button,
 .uiklu-min-h-screen{
     min-height: 100vh;
 }
+.uiklu-w-12{
+    width: 3rem;
+}
 .uiklu-w-2{
     width: 0.5rem;
 }
@@ -639,6 +652,9 @@ button,
 .uiklu-grid-cols-1{
     grid-template-columns: repeat(1, minmax(0, 1fr));
 }
+.uiklu-grid-cols-2{
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+}
 .uiklu-flex-row{
     flex-direction: row;
 }
@@ -719,11 +735,30 @@ button,
     margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
     margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
 }
+.uiklu-space-y-3 > :not([hidden]) ~ :not([hidden]){
+    --tw-space-y-reverse: 0;
+    margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse)));
+    margin-bottom: calc(0.75rem * var(--tw-space-y-reverse));
+}
+.uiklu-space-y-4 > :not([hidden]) ~ :not([hidden]){
+    --tw-space-y-reverse: 0;
+    margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
+    margin-bottom: calc(1rem * var(--tw-space-y-reverse));
+}
 .uiklu-space-y-6 > :not([hidden]) ~ :not([hidden]){
     --tw-space-y-reverse: 0;
     margin-top: calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));
     margin-bottom: calc(1.5rem * var(--tw-space-y-reverse));
 }
+.uiklu-divide-y > :not([hidden]) ~ :not([hidden]){
+    --tw-divide-y-reverse: 0;
+    border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
+    border-bottom-width: calc(1px * var(--tw-divide-y-reverse));
+}
+.uiklu-divide-gray-100 > :not([hidden]) ~ :not([hidden]){
+    --tw-divide-opacity: 1;
+    border-color: rgb(243 244 246 / var(--tw-divide-opacity, 1));
+}
 .uiklu-self-center{
     align-self: center;
 }
@@ -965,13 +1000,14 @@ button,
     --tw-bg-opacity: 1;
     background-color: rgb(220 252 231 / var(--tw-bg-opacity, 1));
 }
+.uiklu-bg-green-50{
+    --tw-bg-opacity: 1;
+    background-color: rgb(240 253 244 / var(--tw-bg-opacity, 1));
+}
 .uiklu-bg-orange{
     --tw-bg-opacity: 1;
     background-color: hsl(var(--uiklu-orange) / var(--tw-bg-opacity, 1));
 }
-.uiklu-bg-orange\/20{
-    background-color: hsl(var(--uiklu-orange) / 0.2);
-}
 .uiklu-bg-orange500{
     --tw-bg-opacity: 1;
     background-color: hsl(var(--uiklu-orange-500) / var(--tw-bg-opacity, 1));
@@ -1000,6 +1036,10 @@ button,
     --tw-bg-opacity: 1;
     background-color: hsl(var(--uiklu-primary-light) / var(--tw-bg-opacity, 1));
 }
+.uiklu-bg-red-50{
+    --tw-bg-opacity: 1;
+    background-color: rgb(254 242 242 / var(--tw-bg-opacity, 1));
+}
 .uiklu-bg-slate-50{
     --tw-bg-opacity: 1;
     background-color: rgb(248 250 252 / var(--tw-bg-opacity, 1));
@@ -1012,6 +1052,10 @@ button,
     --tw-bg-opacity: 1;
     background-color: rgb(13 148 136 / var(--tw-bg-opacity, 1));
 }
+.uiklu-bg-teal-700{
+    --tw-bg-opacity: 1;
+    background-color: rgb(15 118 110 / var(--tw-bg-opacity, 1));
+}
 .uiklu-bg-transparent{
     background-color: transparent;
 }
@@ -1038,6 +1082,11 @@ button,
     --tw-gradient-to: rgb(251 160 34 / 0) var(--tw-gradient-to-position);
     --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
 }
+.uiklu-from-teal-600{
+    --tw-gradient-from: #0d9488 var(--tw-gradient-from-position);
+    --tw-gradient-to: rgb(13 148 136 / 0) var(--tw-gradient-to-position);
+    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
+}
 .uiklu-via-\[\#225c4e\]{
     --tw-gradient-to: rgb(34 92 78 / 0)  var(--tw-gradient-to-position);
     --tw-gradient-stops: var(--tw-gradient-from), #225c4e var(--tw-gradient-via-position), var(--tw-gradient-to);
@@ -1048,6 +1097,9 @@ button,
 .uiklu-to-\[\#d9a041\]{
     --tw-gradient-to: #d9a041 var(--tw-gradient-to-position);
 }
+.uiklu-to-teal-700{
+    --tw-gradient-to: #0f766e var(--tw-gradient-to-position);
+}
 .uiklu-bg-cover{
     background-size: cover;
 }
@@ -1076,6 +1128,9 @@ button,
 .uiklu-p-10{
     padding: 2.5rem;
 }
+.uiklu-p-2{
+    padding: 0.5rem;
+}
 .uiklu-p-2\.5{
     padding: 0.625rem;
 }
@@ -1214,6 +1269,10 @@ button,
     font-size: 16px;
     line-height: 28px;
 }
+.uiklu-text-3xl{
+    font-size: 18px;
+    line-height: 28px;
+}
 .uiklu-text-4xl{
     font-size: 20px;
     line-height: 22px;
@@ -1311,6 +1370,9 @@ button,
 .uiklu-tracking-wider{
     letter-spacing: 0.05em;
 }
+.uiklu-tracking-widest{
+    letter-spacing: 0.1em;
+}
 .\!uiklu-text-destructive{
     --tw-text-opacity: 1 !important;
     color: hsl(var(--uiklu-destructive) / var(--tw-text-opacity, 1)) !important;
@@ -1375,6 +1437,14 @@ button,
     --tw-text-opacity: 1;
     color: hsl(var(--uiklu-gray-900) / var(--tw-text-opacity, 1));
 }
+.uiklu-text-green-500{
+    --tw-text-opacity: 1;
+    color: rgb(34 197 94 / var(--tw-text-opacity, 1));
+}
+.uiklu-text-green-600{
+    --tw-text-opacity: 1;
+    color: rgb(22 163 74 / var(--tw-text-opacity, 1));
+}
 .uiklu-text-green-700{
     --tw-text-opacity: 1;
     color: rgb(21 128 61 / var(--tw-text-opacity, 1));
@@ -1419,10 +1489,30 @@ button,
     --tw-text-opacity: 1;
     color: hsl(var(--uiklu-primary-900) / var(--tw-text-opacity, 1));
 }
+.uiklu-text-red-500{
+    --tw-text-opacity: 1;
+    color: rgb(239 68 68 / var(--tw-text-opacity, 1));
+}
+.uiklu-text-red-600{
+    --tw-text-opacity: 1;
+    color: rgb(220 38 38 / var(--tw-text-opacity, 1));
+}
 .uiklu-text-secondary{
     --tw-text-opacity: 1;
     color: hsl(var(--uiklu-secondary) / var(--tw-text-opacity, 1));
 }
+.uiklu-text-teal-400{
+    --tw-text-opacity: 1;
+    color: rgb(45 212 191 / var(--tw-text-opacity, 1));
+}
+.uiklu-text-teal-600{
+    --tw-text-opacity: 1;
+    color: rgb(13 148 136 / var(--tw-text-opacity, 1));
+}
+.uiklu-text-teal-700{
+    --tw-text-opacity: 1;
+    color: rgb(15 118 110 / var(--tw-text-opacity, 1));
+}
 .uiklu-text-white{
     --tw-text-opacity: 1;
     color: rgb(255 255 255 / var(--tw-text-opacity, 1));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@klu_dev/ui-klu-green",
-  "version": "1.2.3",
+  "version": "1.2.4",
   "description": "Librería de componentes UI",
   "type": "module",
   "main": "./dist/index.js",