@klu_dev/ui-klu-green 1.2.2 → 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;
 }
@@ -402,6 +412,9 @@ button,
 .uiklu-h-\[6px\]{
     height: 6px;
 }
+.uiklu-h-auto{
+    height: auto;
+}
 .uiklu-h-full{
     height: 100%;
 }
@@ -423,9 +436,6 @@ button,
 .uiklu-min-h-\[20px\]{
     min-height: 20px;
 }
-.uiklu-min-h-\[350px\]{
-    min-height: 350px;
-}
 .uiklu-min-h-\[400px\]{
     min-height: 400px;
 }
@@ -435,6 +445,9 @@ button,
 .uiklu-min-h-screen{
     min-height: 100vh;
 }
+.uiklu-w-12{
+    width: 3rem;
+}
 .uiklu-w-2{
     width: 0.5rem;
 }
@@ -483,6 +496,9 @@ button,
 .uiklu-w-\[383px\]{
     width: 383px;
 }
+.uiklu-w-\[40px\]{
+    width: 40px;
+}
 .uiklu-w-\[450px\]{
     width: 450px;
 }
@@ -532,6 +548,9 @@ button,
 .uiklu-min-w-\[383px\]{
     min-width: 383px;
 }
+.uiklu-min-w-\[40px\]{
+    min-width: 40px;
+}
 .uiklu-min-w-\[75px\]{
     min-width: 75px;
 }
@@ -562,6 +581,9 @@ button,
 .uiklu-max-w-\[400px\]{
     max-width: 400px;
 }
+.uiklu-max-w-\[40px\]{
+    max-width: 40px;
+}
 .uiklu-max-w-\[450px\]{
     max-width: 450px;
 }
@@ -630,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;
 }
@@ -710,17 +735,39 @@ 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;
 }
 .uiklu-overflow-hidden{
     overflow: hidden;
 }
+.uiklu-overflow-y-auto{
+    overflow-y: auto;
+}
 .uiklu-truncate{
     overflow: hidden;
     text-overflow: ellipsis;
@@ -795,6 +842,9 @@ button,
 .uiklu-border-\[1px\]{
     border-width: 1px;
 }
+.uiklu-border-b{
+    border-bottom-width: 1px;
+}
 .uiklu-border-b-\[1px\]{
     border-bottom-width: 1px;
 }
@@ -830,6 +880,10 @@ button,
     --tw-border-opacity: 1;
     border-color: hsl(var(--uiklu-destructive) / var(--tw-border-opacity, 1));
 }
+.uiklu-border-gray-100{
+    --tw-border-opacity: 1;
+    border-color: rgb(243 244 246 / var(--tw-border-opacity, 1));
+}
 .uiklu-border-gray-200{
     --tw-border-opacity: 1;
     border-color: rgb(229 231 235 / var(--tw-border-opacity, 1));
@@ -946,6 +1000,10 @@ 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));
@@ -978,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));
@@ -990,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;
 }
@@ -1016,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);
@@ -1026,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;
 }
@@ -1054,6 +1128,9 @@ button,
 .uiklu-p-10{
     padding: 2.5rem;
 }
+.uiklu-p-2{
+    padding: 0.5rem;
+}
 .uiklu-p-2\.5{
     padding: 0.625rem;
 }
@@ -1143,6 +1220,9 @@ button,
     padding-top: 0.75rem;
     padding-bottom: 0.75rem;
 }
+.uiklu-pb-4{
+    padding-bottom: 1rem;
+}
 .uiklu-pb-\[20px\]{
     padding-bottom: 20px;
 }
@@ -1189,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;
@@ -1286,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;
@@ -1350,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));
@@ -1394,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/dist/index.d.ts

@@ -16,8 +16,8 @@ interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "
 declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;
 
 declare const buttonVariants: (props?: ({
-    variant?: "primary" | "primaryOrange" | "secondary" | "outline" | "outlinePrimary" | "outlineSecondary" | "outlineWhite" | null | undefined;
-    size?: "sm" | "md" | "lg" | "full" | "xl" | "fullh" | null | undefined;
+    variant?: "primary" | "primaryOrange" | "secondary" | "outline" | "outlinePrimary" | "outlineSecondary" | "outlineWhite" | "iconCircle" | null | undefined;
+    size?: "sm" | "md" | "lg" | "full" | "xl" | "fullh" | "iconOnly" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
     asChild?: boolean;
@@ -36,7 +36,7 @@ declare const Select: React.FC<SelectPrimitive.SelectProps>;
 
 declare const typographyVariants: (props?: ({
     size?: "sm" | "md" | "xl" | "xxxl" | "xxl" | null | undefined;
-    color?: "primary" | "secondary" | "white" | "black" | "orange" | null | undefined;
+    color?: "primary" | "secondary" | "black" | "orange" | "white" | null | undefined;
     align?: "left" | "right" | "center" | "justify" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 interface TypographyProps extends Omit<React.HTMLAttributes<HTMLParagraphElement>, "color">, VariantProps<typeof typographyVariants> {
@@ -155,6 +155,8 @@ declare const Icons: {
     MOVEMENTS: react_jsx_runtime.JSX.Element;
     SERVICES: react_jsx_runtime.JSX.Element;
     BOXES: react_jsx_runtime.JSX.Element;
+    MENU: react_jsx_runtime.JSX.Element;
+    CIRCLE_MOVEMENTS: react_jsx_runtime.JSX.Element;
 };
 
 export { BackButton, BalanceInfo, Button, Icons, Input, LoadingScreen, Modal, PromoBanner, Select, SidebarTabs, ToastAction, Toaster, Typography, useToast };

package/dist/index.js

@@ -202,6 +202,14 @@ var buttonVariants = cva(
           uiklu-text-basewhite 
           uiklu-rounded-[48px]
           hover:uiklu-bg-white/10
+        `,
+        iconCircle: `
+          uiklu-bg-primary900
+          uiklu-text-white
+          hover:uiklu-bg-primary900/90
+          uiklu-rounded-full
+          uiklu-border-transparent
+          uiklu-p-0
         `
       },
       size: {
@@ -210,7 +218,8 @@ var buttonVariants = cva(
         lg: "uiklu-h-[50px] uiklu-w-[350px] uiklu-px-[32px] uiklu-text-2xl",
         xl: "uiklu-h-[60px] uiklu-w-[450px] uiklu-px-[40px] uiklu-text-2xl",
         full: "uiklu-w-full uiklu-h-[50px] uiklu-max-h-[60px] uiklu-px-[48px] uiklu-text-2xl uiklu-font-bold",
-        fullh: "uiklu-w-full uiklu-h-[40px] uiklu-max-h-[40px] uiklu-px-[40px] uiklu-text-xl uiklu-font-medium"
+        fullh: "uiklu-w-full uiklu-h-[40px] uiklu-max-h-[40px] uiklu-px-[40px] uiklu-text-xl uiklu-font-medium",
+        iconOnly: "uiklu-h-[40px] uiklu-w-[40px] uiklu-min-w-[40px] uiklu-max-w-[40px]"
       }
     },
     defaultVariants: {
@@ -220,8 +229,9 @@ var buttonVariants = cva(
   }
 );
 var Button = React2.forwardRef(
-  ({ className, variant, size, asChild = false, icon, iconAlign = "left", children, ...props }, ref) => {
+  ({ className, variant, size, asChild = false, icon, iconAlign = "left", children, style, ...props }, ref) => {
     const Comp = asChild ? Slot : "button";
+    const isIconCircle = variant === "iconCircle";
     return /* @__PURE__ */ jsxs2(
       Comp,
       {
@@ -231,6 +241,17 @@ var Button = React2.forwardRef(
           className
         ),
         ref,
+        style: {
+          ...isIconCircle && {
+            borderRadius: "50%",
+            aspectRatio: "1 / 1",
+            padding: 0,
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center"
+          },
+          ...style
+        },
         ...props,
         children: [
           icon && /* @__PURE__ */ jsx2("span", { className: "uiklu-flex uiklu-items-center uiklu-justify-center uiklu-shrink-0", children: icon }),
@@ -666,6 +687,50 @@ var SettingsIcon = ({ className }) => /* @__PURE__ */ jsx7("svg", { xmlns: "http
     fill: "currentColor"
   }
 ) });
+var IconMenu = ({ className }) => /* @__PURE__ */ jsx7("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", className, children: /* @__PURE__ */ jsx7(
+  "path",
+  {
+    d: "M12 9C11.4067 9 10.8266 9.17595 10.3333 9.50559C9.83994 9.83524 9.45543 10.3038 9.22836 10.8519C9.0013 11.4001 8.94189 12.0033 9.05765 12.5853C9.1734 13.1672 9.45912 13.7018 9.87868 14.1213C10.2982 14.5409 10.8328 14.8266 11.4147 14.9424C11.9967 15.0581 12.5999 14.9987 13.1481 14.7716C13.6962 14.5446 14.1648 14.1601 14.4944 13.6667C14.8241 13.1734 15 12.5933 15 12C15 11.2044 14.6839 10.4413 14.1213 9.87868C13.5587 9.31607 12.7957 9 12 9ZM12 13.5C11.7033 13.5 11.4133 13.412 11.1666 13.2472C10.92 13.0824 10.7277 12.8481 10.6142 12.574C10.5007 12.2999 10.4709 11.9983 10.5288 11.7074C10.5867 11.4164 10.7296 11.1491 10.9393 10.9393C11.1491 10.7296 11.4164 10.5867 11.7074 10.5288C11.9983 10.4709 12.2999 10.5006 12.574 10.6142C12.8481 10.7277 13.0824 10.92 13.2472 11.1666C13.412 11.4133 13.5 11.7033 13.5 12C13.5 12.3978 13.342 12.7794 13.0607 13.0607C12.7794 13.342 12.3978 13.5 12 13.5ZM4.5 9C3.90666 9 3.32664 9.17595 2.83329 9.50559C2.33994 9.83524 1.95543 10.3038 1.72836 10.8519C1.5013 11.4001 1.44189 12.0033 1.55765 12.5853C1.6734 13.1672 1.95912 13.7018 2.37868 14.1213C2.79824 14.5409 3.33279 14.8266 3.91473 14.9424C4.49667 15.0581 5.09987 14.9987 5.64805 14.7716C6.19623 14.5446 6.66477 14.1601 6.99441 13.6667C7.32405 13.1734 7.5 12.5933 7.5 12C7.5 11.2044 7.18393 10.4413 6.62132 9.87868C6.05871 9.31607 5.29565 9 4.5 9ZM4.5 13.5C4.20333 13.5 3.91332 13.412 3.66665 13.2472C3.41997 13.0824 3.22771 12.8481 3.11418 12.574C3.00065 12.2999 2.97095 11.9983 3.02882 11.7074C3.0867 11.4164 3.22956 11.1491 3.43934 10.9393C3.64912 10.7296 3.91639 10.5867 4.20737 10.5288C4.49834 10.4709 4.79994 10.5006 5.07403 10.6142C5.34812 10.7277 5.58238 10.92 5.74721 11.1666C5.91203 11.4133 6 11.7033 6 12C6 12.3978 5.84197 12.7794 5.56066 13.0607C5.27936 13.342 4.89783 13.5 4.5 13.5ZM19.5 9C18.9067 9 18.3266 9.17595 17.8333 9.50559C17.3399 9.83524 16.9554 10.3038 16.7284 10.8519C16.5013 11.4001 16.4419 12.0033 16.5576 12.5853C16.6734 13.1672 16.9591 13.7018 17.3787 14.1213C17.7982 14.5409 18.3328 14.8266 18.9147 14.9424C19.4967 15.0581 20.0999 14.9987 20.6481 14.7716C21.1962 14.5446 21.6648 14.1601 21.9944 13.6667C22.3241 13.1734 22.5 12.5933 22.5 12C22.5 11.2044 22.1839 10.4413 21.6213 9.87868C21.0587 9.31607 20.2957 9 19.5 9ZM19.5 13.5C19.2033 13.5 18.9133 13.412 18.6666 13.2472C18.42 13.0824 18.2277 12.8481 18.1142 12.574C18.0007 12.2999 17.9709 11.9983 18.0288 11.7074C18.0867 11.4164 18.2296 11.1491 18.4393 10.9393C18.6491 10.7296 18.9164 10.5867 19.2074 10.5288C19.4983 10.4709 19.7999 10.5006 20.074 10.6142C20.3481 10.7277 20.5824 10.92 20.7472 11.1666C20.912 11.4133 21 11.7033 21 12C21 12.3978 20.842 12.7794 20.5607 13.0607C20.2794 13.342 19.8978 13.5 19.5 13.5Z",
+    fill: "currentColor"
+  }
+) });
+var MovementsIconCircle = ({ className }) => /* @__PURE__ */ jsxs7(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "24",
+    height: "24",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    className,
+    style: {
+      display: "flex",
+      width: "24px",
+      height: "24px",
+      justifyContent: "center",
+      alignItems: "center",
+      aspectRatio: "1/1"
+    },
+    children: [
+      /* @__PURE__ */ jsx7(
+        "rect",
+        {
+          width: "24",
+          height: "24",
+          rx: "24",
+          fill: "var(--Paleta-Verde-Bosque-Oscuro-Key-Verde-Bosque-Oscuro-300, #49A6A4)"
+        }
+      ),
+      /* @__PURE__ */ jsx7("g", { transform: "translate(4.2, 4.2) scale(0.975)", children: /* @__PURE__ */ jsx7(
+        "path",
+        {
+          d: "M7.35375 10.6462C7.40024 10.6462 7.43712 10.7478 7.46228 10.8085C7.48745 10.8692 7.5004 10.9343 7.5004 11C7.5004 11.0657 7.48745 11.1308 7.46228 11.1915C7.43712 11.2522 7.40024 11.3073 7.35375 11.3537L5.35375 13.3537C5.30732 13.4002 5.25217 13.4371 5.19147 13.4623C5.13077 13.4874 5.06571 13.5004 5 13.5004C4.9343 13.5004 4.86923 13.4874 4.80853 13.4623C4.74783 13.4371 4.69269 13.4002 4.64625 13.3537L2.64625 11.3537C2.5998 11.3073 2.56295 11.2521 2.53781 11.1914C2.51267 11.1307 2.49973 11.0657 2.49973 11C2.49973 10.9343 2.51267 10.8692 2.53781 10.8085C2.56295 10.7479 2.5998 10.6927 2.64625 10.6462C2.74007 10.5524 2.86732 10.4997 3 10.4997C3.0657 10.4997 3.13076 10.5127 3.19145 10.5378C3.25215 10.5629 3.3073 10.5998 3.35375 10.6462L4.5 11.7931V3C4.5 2.86739 4.55268 2.74021 4.64645 2.64644C4.74022 2.55268 4.8674 2.5 5 2.5C5.13261 2.5 5.25979 2.55268 5.35356 2.64644C5.44732 2.74021 5.5 2.86739 5.5 3V11.7931L6.64625 10.6462C6.69269 10.5998 6.74783 10.5629 6.80853 10.5377C6.86923 10.5126 6.9343 10.4996 7 10.4996C7.06571 10.4996 7.13077 10.5126 7.19147 10.5377C7.25217 10.5629 7.30732 10.5998 7.35375 10.6462ZM13.3538 4.64625L11.3538 2.64625C11.3073 2.59976 11.2522 2.56288 11.1915 2.53772C11.1308 2.51255 11.0657 2.4996 11 2.4996C10.9343 2.4996 10.8692 2.51255 10.8085 2.53772C10.7478 2.56288 10.6927 2.59976 10.6463 2.64625L8.64625 4.64625C8.55243 4.74007 8.49972 4.86731 8.49972 5C8.49972 5.13268 8.55243 5.25993 8.64625 5.35375C8.74007 5.44757 8.86732 5.50027 9 5.50027C9.13269 5.50027 9.25993 5.44757 9.35375 5.35375L10.5 4.20687V13C10.5 13.1326 10.5527 13.2598 10.6465 13.3535C10.7402 13.4473 10.8674 13.5 11 13.5C11.1326 13.5 11.2598 13.4473 11.3536 13.3535C11.4473 13.2598 11.5 13.1326 11.5 13V4.20687L12.6463 5.35375C12.7401 5.44757 12.8673 5.50027 13 5.50027C13.1327 5.50027 13.2599 5.44757 13.3538 5.35375C13.4476 5.25993 13.5003 5.13268 13.5003 5C13.5003 4.86731 13.4476 4.74007 13.3538 4.64625Z",
+          fill: "white"
+        }
+      ) })
+    ]
+  }
+);
 var Icons = {
   CARD: /* @__PURE__ */ jsx7(CardIcon, {}),
   TICKET: /* @__PURE__ */ jsx7(TicketIcon, {}),
@@ -689,7 +754,9 @@ var Icons = {
   MYCARD: /* @__PURE__ */ jsx7(MyCardIcon, {}),
   MOVEMENTS: /* @__PURE__ */ jsx7(MovementsIcon, {}),
   SERVICES: /* @__PURE__ */ jsx7(ServicesPayIcon, {}),
-  BOXES: /* @__PURE__ */ jsx7(BoxesIcon, {})
+  BOXES: /* @__PURE__ */ jsx7(BoxesIcon, {}),
+  MENU: /* @__PURE__ */ jsx7(IconMenu, {}),
+  CIRCLE_MOVEMENTS: /* @__PURE__ */ jsx7(MovementsIconCircle, {})
 };
 
 // src/components/ui/modal.tsx
@@ -1208,7 +1275,7 @@ function PromoBanner({
 }) {
   return /* @__PURE__ */ jsxs12("div", { className: cn(
     "uiklu-relative uiklu-overflow-hidden uiklu-rounded-2xl uiklu-p-8 uiklu-text-white uiklu-font-sans uiklu-box-border",
-    "uiklu-w-full uiklu-min-h-[350px] uiklu-flex uiklu-flex-col uiklu-items-center uiklu-justify-between",
+    "uiklu-w-full uiklu-h-auto uiklu-gap-6 uiklu-flex uiklu-flex-col uiklu-items-center uiklu-justify-between",
     "uiklu-bg-[#06372D]",
     className
   ), children: [