siesa-ui-kit 1.0.2 → 1.0.4

package/src/components/NavigationRailTypes/NavigationRailTypes.tsx

@@ -1,378 +1,363 @@
-import React, { useState } from 'react';
-import type { NavigationRailTypesProps, NavigationRailItem } from './NavigationRailTypes.types';
-import { ChevronRightIcon, ChevronLeftIcon, ClockIcon, MagnifyingGlassIcon } from './icons';
-import { Button } from '../Button/Button';
-import { Divider } from '../Divider/Divider';
-import { DropdownItemCollapsible } from '../DropdownItemCollapsible/DropdownItemCollapsible';
-
-/**
- * Componente NavigationRailTypes del sistema de diseño Siesa
- *
- * Barra de navegación lateral que permite dos modos visuales:
- * - **Collapsed (Colapsado)**: 80px width, solo iconos con botón de búsqueda
- * - **Expanded (Expandido)**: 215px width, con labels y búsqueda integrada
- *
- * **Características:**
- * - Dos modos: collapsed e expanded (toggle con botón "Colapsar")
- * - Soporta items con badges de notificación
- * - Items colapsables para agrupar navegación relacionada
- * - Botón "Recientes" en footer
- * - Búsqueda integrada (solo en modo expanded)
- * - Dark mode completo
- * - Focus rings adaptativos
- *
- * **Especificaciones de Figma:**
- * - Collapsed: 80px width, items con height 44px + gap 12px
- * - Expanded: 215px width, items reutilizan DropdownItemCollapsible
- * - Icono search: 16x16px, azul (#0e79fd)
- * - Borde derecho: 1px solid #e4e4e7 (collapsed)
- * - Borde izquierdo: 1px solid #e4e4e7 (expanded)
- * - Height total: 900px (scroll si necesario)
- *
- * **Estructura:**
- * 1. Header (Search en expanded) - altura variable
- * 2. Menu & Destinations - flex 1 con items scrollables
- * 3. Footer - Actions con divider y botones
- *
- * **Estados de Items:**
- * - `default`: Text color content-primary
- * - `hover`: Fondo hover-overlay, icon color content-custom-primary
- * - `active`: Fondo custom-primary, text color custom-primary
- * - `disabled`: Opacity 50%, sin interacción
- *
- * **Colores (Light Mode):**
- * - Background: background-primary (#ffffff)
- * - Borders: border-primary (#e4e4e7)
- * - Text: content-primary (#18181b)
- * - Icons: content-secondary (#a1a1aa)
- * - Icon hover: content-custom-primary (#0e79fd)
- * - Divider: border-primary (#e4e4e7)
- * - Search input: bg-primary, border-primary, placeholder: content-tertiary
- *
- * **Colores (Dark Mode):**
- * - Background: background-primary/dark (#09090b)
- * - Borders: border-primary/dark (#3f3f46)
- * - Text: content-primary/dark (#fafafa)
- * - Icons: content-secondary/dark (#a1a1aa)
- * - Icon hover: content-custom-primary/dark (#bfe2fe)
- * - Divider: border-primary/dark (#3f3f46)
- *
- * **Tipografía:**
- * - Items labels: Paragraph/Small (14px, Regular, line-height 20px)
- * - Heading: Paragraph/Tiny (12px, Regular, line-height 16px) - si aplica
- * - Button labels: Label Small (14px, Bold)
- *
- * @see docs/colors.md - Sistema de colores
- * @see docs/typography.md - Sistema tipográfico
- * @see docs/spacing.md - Sistema de espaciado (gap-3, px-4, py-2, etc)
- * @see https://www.figma.com/design/5XNqf2YTxvwemxwo1LMQ6j/Siesa-UI-Kit?node-id=6135-36219
- *
- * @example
- * ```tsx
- * const navItems: NavigationRailItem[] = [
- *   {
- *     id: 'home',
- *     label: 'Home',
- *     icon: <HomeIcon />,
- *     active: true,
- *     onClick: () => navigate('/home'),
- *   },
- *   {
- *     id: 'users',
- *     label: 'Users',
- *     icon: <UsersIcon />,
- *     badge: true,
- *     onClick: () => navigate('/users'),
- *   },
- * ];
- *
- * const [isCollapsed, setIsCollapsed] = useState(true);
- *
- * <NavigationRailTypes
- *   collapsed={isCollapsed}
- *   items={navItems}
- *   showRecentButton={true}
- *   onCollapsedChange={setIsCollapsed}
- *   onItemClick={(index, item) => console.log('Selected:', item.id)}
- * />
- * ```
- *
- * @see NavigationRailTypes.types.ts - Props e interfaces
- */
-export const NavigationRailTypes = React.forwardRef<
-  HTMLDivElement,
-  NavigationRailTypesProps
->(
-  (
-    {
-      collapsed = true,
-      items = [],
-      showRecentButton = true,
-      onCollapsedChange,
-      onItemClick,
-      className,
-    },
-    ref
-  ) => {
-    const [searchQuery, setSearchQuery] = useState('');
-
-    const handleCollapsedToggle = () => {
-      onCollapsedChange?.(!collapsed);
-    };
-
-    const handleItemClick = (index: number, item: NavigationRailItem) => {
-      item.onClick?.(new Event('click') as any);
-      onItemClick?.(index, item);
-    };
-
-    return (
-      <div
-        ref={ref}
-        className={`
-          ${collapsed ? 'w-[80px]' : 'w-[215px]'}
-          bg-background-primary dark:bg-background-primary
-          dark:border-border-primary dark:border-l
-          ${collapsed ? 'border-r dark:border-border-primary border-border-primary' : 'border-l dark:border-border-primary border-border-primary'}
-          border-solid
-          h-[900px]
-          flex flex-col
-          items-center
-          relative
-          transition-all duration-300
-          ${className || ''}
-        `}
-      >
-        {/* Sección de búsqueda - solo en modo expandido */}
-        {!collapsed && (
-          <div className="w-full flex flex-col gap-3 px-3 py-3 relative shrink-0">
-            <div className="w-full flex flex-col gap-2 items-start relative shrink-0">
-              <div className="w-full bg-background-primary dark:bg-background-primary border border-border-primary dark:border-border-primary border-solid flex items-center overflow-hidden px-3 py-1.5 relative rounded-lg shadow-sm shrink-0">
-                <div className="flex flex-1 gap-2 items-center min-h-px min-w-px relative shrink-0">
-                  <MagnifyingGlassIcon className="opacity-50 overflow-clip relative shrink-0 size-4 text-content-secondary dark:text-content-secondary" />
-                  <input
-                    type="text"
-                    placeholder="Buscar módulo"
-                    value={searchQuery}
-                    onChange={(e) => setSearchQuery(e.target.value)}
-                    className="
-                      flex-1 bg-transparent
-                      font-['SiesaBT',sans-serif] font-normal text-sm leading-5
-                      text-content-primary dark:text-content-primary
-                      placeholder:text-content-tertiary dark:placeholder:text-content-tertiary
-                      outline-none
-                    "
-                  />
-                </div>
-              </div>
-            </div>
-            <Divider className="w-full" />
-          </div>
-        )}
-
-        {/* Main content - Menu & Destinations */}
-        <div
-          className={`
-            flex-1 flex flex-col
-            items-center min-h-px min-w-px
-            relative shrink-0
-            px-0
-            ${collapsed
-              ? 'gap-7 py-2 w-[80px]'
-              : 'gap-0.5 p-3 w-full bg-background-primary dark:bg-background-primary border-l dark:border-border-primary border-border-primary border-solid'
-            }
-          `}
-        >
-          {/* Botón Search en collapsed */}
-          {collapsed && (
-            <Button
-              type="default"
-              size="xl"
-              iconOnly
-              leftIcon={<MagnifyingGlassIcon className="overflow-clip relative shrink-0 size-4 text-primary-inverse-content dark:text-primary-inverse-content" />}
-              ariaLabel="Search"
-            />
-          )}
-
-          {/* Items container */}
-          <div
-            className={`
-              flex flex-col items-center min-h-px min-w-px
-              relative shrink-0
-              flex-1
-              overflow-y-auto
-              ${collapsed
-                ? 'gap-3 leading-none w-[80px]'
-                : 'gap-0.5 p-3 w-full'
-              }
-            `}
-          >
-            {items.length === 0 ? (
-              // Items de demo/ejemplo
-              <>
-                {collapsed &&
-                  Array.from({ length: 4 }).map((_, idx) => (
-                    <div
-                      key={`demo-collapsed-${idx}`}
-                      className={`
-                        flex flex-col gap-1 items-center
-                        px-0.5 py-0 relative
-                      `}
-                    >
-                      <div className="flex flex-col items-center justify-center overflow-clip px-4 py-1 relative rounded-full shrink-0">
-                        <svg
-                          className="overflow-clip relative shrink-0 size-4 text-content-secondary dark:text-content-secondary"
-                          fill="none"
-                          viewBox="0 0 24 24"
-                          stroke="currentColor"
-                        >
-                          <path
-                            strokeLinecap="round"
-                            strokeLinejoin="round"
-                            strokeWidth={2}
-                            d="M3 12a9 9 0 1118 0 9 9 0 01-18 0z"
-                          />
-                        </svg>
-                      </div>
-                    </div>
-                  ))}
-
-                {!collapsed &&
-                  Array.from({ length: 6 }).map((_, idx) => (
-                    <DropdownItemCollapsible
-                      key={`demo-expanded-${idx}`}
-                      label="Item"
-                      showDivider={false}
-                      showHeading={false}
-                    />
-                  ))}
-              </>
-            ) : collapsed ? (
-              // Items reales - collapsed mode
-              <>
-                {items.map((item, idx) => (
-                  <button
-                    key={item.id}
-                    onClick={() => handleItemClick(idx, item)}
-                    disabled={item.disabled}
-                    className={`
-                      flex flex-col gap-1 items-center
-                      px-0.5 py-0
-                      relative
-                      rounded-full
-                      focus:outline-none focus:ring-4 focus:ring-offset-2
-                      focus:ring-primary-custom-400 focus:ring-offset-background-primary
-                      dark:focus:ring-offset-background-primary
-                      hover:opacity-80
-                      disabled:opacity-50 disabled:pointer-events-none
-                      transition-all duration-200
-                      ${item.active ? 'text-background-inverse-custom-primary dark:text-background-inverse-custom-primary' : 'text-content-secondary dark:text-content-secondary'}
-                    `}
-                    aria-label={item.ariaLabel || item.label}
-                  >
-                    <div className="flex flex-col items-center justify-center overflow-clip px-4 py-1 relative rounded-full shrink-0">
-                      {item.icon}
-                    </div>
-                    {(item.badge || item.badgeCount) && (
-                      <div
-                        className={`
-                          absolute top-0 right-0
-                          ${item.badgeCount
-                            ? 'w-5 h-5 text-xs font-bold flex items-center justify-center rounded-full'
-                            : 'w-2 h-2 rounded-full'
-                          }
-                          ${item.badgeColor === 'blue'
-                            ? 'bg-primary-custom-600 dark:bg-primary-custom-600 text-primary-inverse-content'
-                            : 'bg-red-600 dark:bg-red-600 text-white'
-                          }
-                        `}
-                      >
-                        {item.badgeCount ? (item.badgeCount > 99 ? '99+' : item.badgeCount) : ''}
-                      </div>
-                    )}
-                  </button>
-                ))}
-              </>
-            ) : (
-              // Items reales - expanded mode
-              <>
-                {items.map((item, idx) => (
-                  <div key={item.id} className="w-full">
-                    {/* TODO: Implementar items expandidos usando DropdownItemCollapsible */}
-                    <DropdownItemCollapsible
-                      label={item.label}
-                      icon={item.icon}
-                      showDivider={idx < items.length - 1}
-                      showHeading={false}
-                      disabled={item.disabled}
-                      onClick={() => handleItemClick(idx, item)}
-                    />
-                  </div>
-                ))}
-              </>
-            )}
-          </div>
-
-          {/* Footer - Actions */}
-          <div className={`w-full flex flex-col gap-3 items-center relative shrink-0 ${!collapsed ? 'px-3' : ''}`}>
-            <Divider className="w-full" />
-
-            <div
-              className={`
-                flex flex-col gap-3 relative shrink-0
-                ${collapsed ? 'items-start px-3' : 'w-full items-stretch'}
-              `}
-            >
-              {/* Botón Recientes */}
-              {showRecentButton && collapsed && (
-                <Button
-                  type="outline"
-                  size="base"
-                  iconOnly
-                  leftIcon={<ClockIcon className="size-4 text-primary-custom-600 dark:text-primary-custom-600" />}
-                  ariaLabel="Recientes"
-                />
-              )}
-
-              {showRecentButton && !collapsed && (
-                <Button
-                  type="outline"
-                  size="base"
-                  leftIcon={<ClockIcon className="size-4 text-primary-custom-600 dark:text-primary-custom-600" />}
-                  fullWidth
-                >
-                  Recientes
-                </Button>
-              )}
-
-              {/* Botón Colapsar/Expandir */}
-              {collapsed ? (
-                <Button
-                  type="plain"
-                  size="base"
-                  iconOnly
-                  leftIcon={<ChevronRightIcon className="overflow-clip relative shrink-0 size-4 text-background-inverse-custom-primary dark:text-background-inverse-custom-primary" />}
-                  onClick={handleCollapsedToggle}
-                  ariaLabel="Expandir"
-                />
-              ) : (
-                <Button
-                  type="outline"
-                  size="base"
-                  leftIcon={<ChevronLeftIcon className="overflow-clip relative shrink-0 size-4 text-content-custom-primary dark:text-content-custom-primary" />}
-                  onClick={handleCollapsedToggle}
-                  fullWidth
-                >
-                  Colapsar
-                </Button>
-              )}
-            </div>
-          </div>
-        </div>
-      </div>
-    );
-  }
-);
-
-NavigationRailTypes.displayName = 'NavigationRailTypes';
-
-export default NavigationRailTypes;
+import React, { useState } from 'react';
+import type { NavigationRailTypesProps, NavigationRailItem } from './NavigationRailTypes.types';
+import { ChevronRightIcon, ChevronLeftIcon, ClockIcon, MagnifyingGlassIcon } from './icons';
+import { Button } from '../Button/Button';
+import { Divider } from '../Divider/Divider';
+import { DropdownItemCollapsible } from '../DropdownItemCollapsible/DropdownItemCollapsible';
+import { NavigationRailItem as NavigationRailItemComponent } from '../NavigationRailItem/NavigationRailItem';
+import { Input } from '../Input/Input';
+
+/**
+ * Componente NavigationRailTypes del sistema de diseño Siesa
+ *
+ * Barra de navegación lateral que permite dos modos visuales:
+ * - **Collapsed (Colapsado)**: 80px width, solo iconos con botón de búsqueda
+ * - **Expanded (Expandido)**: 215px width, con labels y búsqueda integrada
+ *
+ * **Características:**
+ * - Dos modos: collapsed e expanded (toggle con botón "Colapsar")
+ * - Soporta items con badges de notificación
+ * - Items colapsables para agrupar navegación relacionada
+ * - Botón "Recientes" en footer
+ * - Búsqueda integrada (solo en modo expanded)
+ * - Dark mode completo
+ * - Focus rings adaptativos
+ *
+ * **Especificaciones de Figma:**
+ * - Collapsed: 80px width, items con height 44px + gap 12px
+ * - Expanded: 215px width, items reutilizan DropdownItemCollapsible
+ * - Icono search: 16x16px, azul (#0e79fd)
+ * - Borde derecho: 1px solid #e4e4e7 (collapsed)
+ * - Borde izquierdo: 1px solid #e4e4e7 (expanded)
+ * - Height total: 900px (scroll si necesario)
+ *
+ * **Estructura:**
+ * 1. Header (Search en expanded) - altura variable
+ * 2. Menu & Destinations - flex 1 con items scrollables
+ * 3. Footer - Actions con divider y botones
+ *
+ * **Estados de Items:**
+ * - `default`: Text color content-primary
+ * - `hover`: Fondo hover-overlay, icon color content-custom-primary
+ * - `active`: Fondo custom-primary, text color custom-primary
+ * - `disabled`: Opacity 50%, sin interacción
+ *
+ * **Colores (Light Mode):**
+ * - Background: background-primary (#ffffff)
+ * - Borders: border-primary (#e4e4e7)
+ * - Text: content-primary (#18181b)
+ * - Icons: content-secondary (#a1a1aa)
+ * - Icon hover: content-custom-primary (#0e79fd)
+ * - Divider: border-primary (#e4e4e7)
+ * - Search input: bg-primary, border-primary, placeholder: content-tertiary
+ *
+ * **Colores (Dark Mode):**
+ * - Background: background-primary/dark (#09090b)
+ * - Borders: border-primary/dark (#3f3f46)
+ * - Text: content-primary/dark (#fafafa)
+ * - Icons: content-secondary/dark (#a1a1aa)
+ * - Icon hover: content-custom-primary/dark (#bfe2fe)
+ * - Divider: border-primary/dark (#3f3f46)
+ *
+ * **Tipografía:**
+ * - Items labels: Paragraph/Small (14px, Regular, line-height 20px)
+ * - Heading: Paragraph/Tiny (12px, Regular, line-height 16px) - si aplica
+ * - Button labels: Label Small (14px, Bold)
+ *
+ * @see docs/colors.md - Sistema de colores
+ * @see docs/typography.md - Sistema tipográfico
+ * @see docs/spacing.md - Sistema de espaciado (gap-3, px-4, py-2, etc)
+ * @see https://www.figma.com/design/5XNqf2YTxvwemxwo1LMQ6j/Siesa-UI-Kit?node-id=6135-36219
+ *
+ * @example
+ * ```tsx
+ * const navItems: NavigationRailItem[] = [
+ *   {
+ *     id: 'home',
+ *     label: 'Home',
+ *     icon: <HomeIcon />,
+ *     active: true,
+ *     onClick: () => navigate('/home'),
+ *   },
+ *   {
+ *     id: 'users',
+ *     label: 'Users',
+ *     icon: <UsersIcon />,
+ *     badge: true,
+ *     onClick: () => navigate('/users'),
+ *   },
+ * ];
+ *
+ * const [isCollapsed, setIsCollapsed] = useState(true);
+ *
+ * <NavigationRailTypes
+ *   collapsed={isCollapsed}
+ *   items={navItems}
+ *   showRecentButton={true}
+ *   onCollapsedChange={setIsCollapsed}
+ *   onItemClick={(index, item) => console.log('Selected:', item.id)}
+ * />
+ * ```
+ *
+ * @see NavigationRailTypes.types.ts - Props e interfaces
+ */
+export const NavigationRailTypes = React.forwardRef<
+  HTMLDivElement,
+  NavigationRailTypesProps
+>(
+  (
+    {
+      collapsed = true,
+      items = [],
+      showRecentButton = true,
+      showSearchButton = true,
+      onCollapsedChange,
+      onItemClick,
+      onItemHover,
+      className,
+      labels = {},
+    },
+    ref
+  ) => {
+    const [searchQuery, setSearchQuery] = useState('');
+
+    // Labels con valores por defecto
+    const finalLabels = {
+      searchButton: labels.searchButton ?? 'Search',
+      searchPlaceholder: labels.searchPlaceholder ?? 'Buscar módulo',
+      recentButton: labels.recentButton ?? 'Recientes',
+      collapseButton: labels.collapseButton ?? 'Colapsar',
+      expandButton: labels.expandButton ?? 'Expandir',
+    };
+
+    const handleCollapsedToggle = () => {
+      onCollapsedChange?.(!collapsed);
+    };
+
+    const handleItemClick = (index: number, item: NavigationRailItem) => {
+      item.onClick?.(new Event('click') as any);
+      onItemClick?.(index, item);
+    };
+
+    const handleItemHover = (index: number, item: NavigationRailItem) => {
+      onItemHover?.(index, item);
+    };
+
+    return (
+      <div
+        ref={ref}
+        className={`
+          ${collapsed ? 'w-[80px]' : 'w-[215px]'}
+          h-full
+          bg-background-primary dark:bg-background-primary
+          ${collapsed ? 'border-r border-border-primary dark:border-border-primary' : 'border-l border-r border-border-primary dark:border-border-primary'}
+          border-solid
+          flex flex-col
+          items-center
+          relative
+          transition-all duration-300
+          ${className || ''}
+        `}
+      >
+        {/* Sección de búsqueda - solo en modo expandido */}
+        {!collapsed && (
+          <div className="w-full flex flex-col gap-3 px-3 py-3 relative shrink-0">
+            <Input
+              placeholder={finalLabels.searchPlaceholder}
+              value={searchQuery}
+              onChange={(e) => setSearchQuery(e.target.value)}
+              leftIcon={<MagnifyingGlassIcon className="size-4 text-content-secondary dark:text-content-secondary" />}
+              fullWidth
+            />
+            <Divider className="w-full" />
+          </div>
+        )}
+
+        {/* Main content - Menu & Destinations */}
+        <div
+          className={`
+            flex-1 flex flex-col
+            items-center min-h-px min-w-px
+            relative shrink-0
+            px-0
+            ${collapsed
+              ? 'gap-7 py-2 w-[80px]'
+              : 'gap-0.5 p-3 w-full bg-background-primary dark:bg-background-primary border-l dark:border-border-primary border-border-primary border-solid'
+            }
+          `}
+        >
+          {/* Botón Search en collapsed */}
+          {collapsed && showSearchButton && (
+            <Button
+              type="default"
+              size="xl"
+              iconOnly
+              leftIcon={<MagnifyingGlassIcon className="overflow-clip relative shrink-0 size-4 text-primary-inverse-content dark:text-primary-inverse-content" />}
+              ariaLabel={finalLabels.searchButton}
+            />
+          )}
+
+          {/* Items container */}
+          <div
+            className={`
+              flex flex-col items-center min-h-px min-w-px
+              relative shrink-0
+              flex-1
+              overflow-hidden
+              ${collapsed
+                ? 'gap-3 leading-none w-[80px]'
+                : 'gap-0.5 p-3 w-full'
+              }
+            `}
+          >
+            {items.length === 0 ? (
+              // Items de demo/ejemplo
+              <>
+                {collapsed &&
+                  Array.from({ length: 4 }).map((_, idx) => (
+                    <NavigationRailItemComponent
+                      key={`demo-collapsed-${idx}`}
+                      id={`demo-collapsed-${idx}`}
+                      label="Item"
+                      icon={
+                        <svg
+                          className="size-4"
+                          fill="none"
+                          viewBox="0 0 24 24"
+                          stroke="currentColor"
+                        >
+                          <path
+                            strokeLinecap="round"
+                            strokeLinejoin="round"
+                            strokeWidth={2}
+                            d="M3 12a9 9 0 1118 0 9 9 0 01-18 0z"
+                          />
+                        </svg>
+                      }
+                      showLabelText={false}
+                    />
+                  ))}
+
+                {!collapsed &&
+                  Array.from({ length: 6 }).map((_, idx) => (
+                    <DropdownItemCollapsible
+                      key={`demo-expanded-${idx}`}
+                      label="Item"
+                      showDivider={false}
+                      showHeading={false}
+                    />
+                  ))}
+              </>
+            ) : collapsed ? (
+              // Items reales - collapsed mode
+              <>
+                {items.map((item, idx) => (
+                  <NavigationRailItemComponent
+                    key={item.id}
+                    id={item.id}
+                    label={item.label}
+                    icon={item.icon}
+                    selected={item.active}
+                    disabled={item.disabled}
+                    badge={item.badge}
+                    badgeCount={item.badgeCount}
+                    ariaLabel={item.ariaLabel}
+                    showLabelText={false}
+                    onClick={() => handleItemClick(idx, item)}
+                    onMouseEnter={() => handleItemHover(idx, item)}
+                  />
+                ))}
+              </>
+            ) : (
+              // Items reales - expanded mode
+              <>
+                {items.map((item, idx) => {
+                  const isCollapsible = (item as any).children && (item as any).children.length > 0;
+                  return (
+                    <div key={item.id} className="w-full">
+                      <DropdownItemCollapsible
+                        label={item.label}
+                        icon={item.icon}
+                        selected={item.active}
+                        disabled={item.disabled}
+                        badge={item.badge}
+                        badgeCount={item.badgeCount}
+                        badgeColor={item.badgeColor as any}
+                        showDivider={false}
+                        showHeading={false}
+                        isCollapsible={isCollapsible}
+                        defaultOpen={(item as any).defaultOpen}
+                        children={isCollapsible ? (item as any).children : undefined}
+                        onClick={() => handleItemClick(idx, item)}
+                      />
+                    </div>
+                  );
+                })}
+              </>
+            )}
+          </div>
+
+          {/* Footer - Actions */}
+          <div className={`w-full flex flex-col gap-3 items-center relative shrink-0 ${!collapsed ? 'px-3' : ''}`}>
+            <Divider className="w-full" />
+
+            <div
+              className={`
+                flex flex-col gap-3 relative shrink-0 w-full
+                ${collapsed ? 'items-stretch px-3' : 'items-stretch'}
+              `}
+            >
+              {/* Botón Recientes */}
+              {showRecentButton && collapsed && (
+                <Button
+                  type="outline"
+                  size="base"
+                  fullWidth
+                  leftIcon={<ClockIcon className="size-4 text-primary-custom-600 dark:text-primary-custom-600" />}
+                  ariaLabel={finalLabels.recentButton}
+                />
+              )}
+
+              {showRecentButton && !collapsed && (
+                <Button
+                  type="outline"
+                  size="base"
+                  leftIcon={<ClockIcon className="size-4 text-primary-custom-600 dark:text-primary-custom-600" />}
+                  fullWidth
+                >
+                  {finalLabels.recentButton}
+                </Button>
+              )}
+
+              {/* Botón Colapsar/Expandir */}
+              {collapsed ? (
+                <Button
+                  type="plain"
+                  size="base"
+                  fullWidth
+                  leftIcon={<ChevronRightIcon className="overflow-clip relative shrink-0 size-4 text-background-inverse-custom-primary dark:text-background-inverse-custom-primary" />}
+                  onClick={handleCollapsedToggle}
+                  ariaLabel={finalLabels.expandButton}
+                />
+              ) : (
+                <Button
+                  type="outline"
+                  size="base"
+                  leftIcon={<ChevronLeftIcon className="overflow-clip relative shrink-0 size-4 text-content-custom-primary dark:text-content-custom-primary" />}
+                  onClick={handleCollapsedToggle}
+                  fullWidth
+                >
+                  {finalLabels.collapseButton}
+                </Button>
+              )}
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  }
+);
+
+NavigationRailTypes.displayName = 'NavigationRailTypes';
+
+export default NavigationRailTypes;