siesa-ui-kit 1.0.0 → 1.0.2

package/src/components/NavigationRail/NavigationRail.tsx

@@ -1,418 +1,418 @@
-import React from 'react';
-import type { NavigationRailProps, NavigationRailItemProps } from './NavigationRail.types';
-
-/**
- * NavigationRail del sistema de diseño Siesa
- *
- * Componente de navegación vertical (rail) para aplicaciones. Proporciona acceso
- * rápido a destinos principales mediante iconos y labels opcionales.
- *
- * **Características:**
- * - Ancho fijo de 80px para navegación compacta
- * - Soporte para FAB (Floating Action Button) en la parte superior
- * - Estados: normal, hover, selected, disabled
- * - Badges de notificación con contador opcional
- * - Alineación flexible: top, center, bottom
- * - Dark mode completo
- *
- * **Mejores prácticas implementadas:**
- * - Orden de modificadores: {responsive}:{dark}:{state}:{utility}
- * - Dark mode con estrategia 'class' (darkMode: 'class')
- * - Tokens de color consistentes con la documentación
- * - Tipografía Label XXSmall (10px Bold) según sistema de diseño
- * - Estados interactivos completos (hover, focus, active)
- *
- * @see docs/colors.md - Sistema de colores
- * @see docs/typography.md - Sistema tipográfico (Label XXSmall)
- * @see docs/spacing.md - Sistema de espaciado
- *
- * @example
- * ```tsx
- * // Navigation Rail básico
- * <NavigationRail
- *   items={[
- *     { id: 'home', icon: <HomeIcon />, label: 'Inicio', selected: true },
- *     { id: 'search', icon: <SearchIcon />, label: 'Buscar' },
- *     { id: 'notifications', icon: <BellIcon />, label: 'Notificaciones', badgeCount: 5 },
- *   ]}
- *   alignment="top"
- * />
- *
- * // Con FAB button
- * <NavigationRail
- *   showFab
- *   fabIcon={<PlusIcon />}
- *   onFabClick={() => console.log('Create new')}
- *   items={[...]}
- * />
- * ```
- */
-
-/**
- * NavigationRailItem - Componente interno para items individuales
- */
-const NavigationRailItem: React.FC<NavigationRailItemProps> = ({
-  icon,
-  label,
-  selected = false,
-  disabled = false,
-  badge = false,
-  badgeCount,
-  onClick,
-  ariaLabel,
-  id,
-}) => {
-  // ===== CLASES DEL ICON CONTAINER =====
-  // Estado selected usa background con overlay según Figma
-  const iconContainerClasses = [
-    // Base
-    'flex',
-    'flex-col',
-    'items-center',
-    'justify-center',
-    'px-4',
-    'py-1',
-    'rounded-full',
-    'overflow-hidden',
-    'shrink-0',
-
-    // Estados
-    selected
-      ? // Selected: bg-primary-custom-100 con overlay de rgba(0,0,0,0.024)
-        'bg-primary-custom-100 dark:bg-primary-custom-600/30'
-      : // Default/Hover: transparent → hover:bg-primary-custom-100
-        'bg-transparent hover:bg-primary-custom-100 dark:hover:bg-primary-custom-600/20',
-
-    // Transiciones
-    'transition-colors',
-    'duration-150',
-  ].join(' ');
-
-  // ===== CLASES DEL ICONO =====
-  const iconClasses = [
-    'w-4',
-    'h-4',
-    'shrink-0',
-
-    // Colores según estado
-    selected || !disabled
-      ? // Selected o habilitado con hover: content-primary → hover:primary-custom-600
-        selected
-          ? 'text-primary-custom-600 dark:text-white'
-          : 'text-content-primary hover:text-primary-custom-600 dark:text-dark-content-primary dark:hover:text-white'
-      : // Disabled
-        'text-content-tertiary dark:text-content-tertiary',
-
-    'transition-colors',
-    'duration-150',
-  ].join(' ');
-
-  // ===== CLASES DEL LABEL =====
-  const labelClasses = [
-    // Tipografía: Label XXSmall (10px Bold, leading 12px)
-    'text-[10px]',
-    'leading-3',
-    'font-bold',
-    'text-center',
-    'w-full',
-    'min-w-full',
-
-    // Colores
-    'text-content-primary',
-    'dark:text-dark-content-primary',
-  ].join(' ');
-
-  // ===== CLASES DEL CONTENEDOR PRINCIPAL =====
-  const containerClasses = [
-    'relative',
-    'flex',
-    'flex-col',
-    'items-center',
-    'gap-1',
-    'px-0.5',
-    'py-0',
-    'w-14', // 56px según Figma
-    'shrink-0',
-
-    // Interactividad
-    disabled
-      ? 'cursor-not-allowed opacity-50 pointer-events-none'
-      : 'cursor-pointer',
-
-    // Focus
-    'focus:outline-none',
-    'focus-visible:ring-2',
-    'focus-visible:ring-primary-custom-400',
-    'focus-visible:ring-offset-2',
-    'dark:focus-visible:ring-dark-border-custom',
-    'dark:focus-visible:ring-offset-dark-bg-primary',
-    'rounded-lg',
-  ].join(' ');
-
-  // ===== RENDERIZAR BADGE =====
-  const renderBadge = () => {
-    if (!badge && badgeCount === undefined) return null;
-
-    // Badge con número
-    if (badgeCount !== undefined) {
-      return (
-        <span
-          className="
-            absolute
-            -top-0.5
-            left-[34px]
-            flex
-            items-center
-            justify-center
-            min-w-[13px]
-            h-[13px]
-            px-1
-            rounded-full
-            text-[10px]
-            font-bold
-            leading-none
-            bg-red-700
-            text-white
-            dark:bg-red-700
-            dark:text-white
-            pointer-events-none
-          "
-          aria-label={`${badgeCount} notificaciones`}
-        >
-          {badgeCount > 99 ? '99+' : badgeCount}
-        </span>
-      );
-    }
-
-    // Badge dot simple
-    return (
-      <span
-        className="
-          absolute
-          -top-0.5
-          left-[34px]
-          w-[13px]
-          h-[13px]
-          rounded-full
-          bg-red-700
-          dark:bg-red-700
-          pointer-events-none
-        "
-        aria-label="Notificación"
-      />
-    );
-  };
-
-  return (
-    <button
-      type="button"
-      className={containerClasses}
-      disabled={disabled}
-      onClick={onClick}
-      aria-label={ariaLabel || label}
-      aria-current={selected ? 'page' : undefined}
-      data-item-id={id}
-    >
-      {/* Icon Container */}
-      <div className={iconContainerClasses}>
-        <span className={iconClasses}>
-          {icon}
-        </span>
-      </div>
-
-      {/* Label */}
-      <p className={labelClasses}>
-        {label}
-      </p>
-
-      {/* Badge */}
-      {renderBadge()}
-    </button>
-  );
-};
-
-/**
- * NavigationRail - Componente principal
- */
-export const NavigationRail: React.FC<NavigationRailProps> = ({
-  items,
-  alignment = 'top',
-  showFab = false,
-  fabIcon,
-  onFabClick,
-  fabAriaLabel = 'Crear nuevo',
-  className = '',
-  selectedId,
-  onItemSelect,
-}) => {
-  // ===== CLASES DEL CONTENEDOR PRINCIPAL =====
-  const containerClasses = [
-    // Layout
-    'flex',
-    'flex-col',
-    'items-center',
-    'relative',
-
-    // Tamaño fijo según Figma
-    'w-20', // 80px
-    'h-full',
-
-    // Fondo y bordes
-    'bg-white',
-    'dark:bg-dark-bg-primary',
-    'border-r',
-    'border-border-primary',
-    'dark:border-dark-border-primary',
-
-    className,
-  ].join(' ');
-
-  // ===== CLASES DEL WRAPPER CON PADDING =====
-  // Según Figma, cada alineación funciona diferente:
-  // - top: flujo normal desde arriba
-  // - center: wrapper con grow y items absolutamente centrados
-  // - bottom: wrapper con grow y items con justify-end
-  const wrapperClasses = [
-    'flex',
-    'flex-col',
-    'items-center',
-    'gap-10', // 40px entre FAB y items según Figma
-    'w-20', // 80px
-    'pb-10', // 40px padding bottom según Figma
-    'pt-2', // 8px padding top según Figma
-
-    // Para center y bottom, el wrapper debe crecer para ocupar espacio
-    alignment !== 'top' && 'grow',
-    alignment !== 'top' && 'basis-0',
-    alignment !== 'top' && 'min-h-0',
-  ].filter(Boolean).join(' ');
-
-  // ===== CLASES DEL CONTENEDOR DE ITEMS =====
-  // Para cada alineación, los items se posicionan diferente
-  const getItemsContainerClasses = () => {
-    const baseClasses = [
-      'flex',
-      'flex-col',
-      'items-center',
-      'gap-3', // 12px según Figma
-      'w-20', // 80px
-    ];
-
-    if (alignment === 'top') {
-      return [...baseClasses, 'shrink-0'].join(' ');
-    }
-
-    if (alignment === 'center') {
-      // Items absolutamente centrados según Figma
-      return [
-        ...baseClasses,
-        'absolute',
-        'left-1/2',
-        'top-1/2',
-        '-translate-x-1/2',
-        '-translate-y-1/2',
-      ].join(' ');
-    }
-
-    if (alignment === 'bottom') {
-      // Items al final con grow y justify-end según Figma
-      return [
-        ...baseClasses,
-        'grow',
-        'basis-0',
-        'min-h-0',
-        'justify-end',
-        'shrink-0',
-      ].join(' ');
-    }
-
-    return baseClasses.join(' ');
-  };
-
-  const itemsContainerClasses = getItemsContainerClasses();
-
-  // ===== CLASES DEL FAB BUTTON =====
-  const fabClasses = [
-    // Layout
-    'flex',
-    'items-center',
-    'justify-center',
-    'p-3', // 12px padding según Figma
-    'shrink-0',
-
-    // Estilo
-    'rounded-md',
-    'bg-primary-custom-600',
-    'text-primary-inverse-content',
-    'border',
-    'border-primary-custom-600',
-    'shadow-button-inset',
-
-    // Estados
-    'hover:bg-primary-custom-500',
-    'active:scale-95',
-    'focus:outline-none',
-    'focus:ring-2',
-    'focus:ring-primary-custom-400',
-    'focus:ring-offset-2',
-
-    // Dark mode
-    'dark:bg-dark-bg-inverse',
-    'dark:text-dark-content-inverse',
-    'dark:border-dark-bg-inverse',
-    'dark:hover:bg-dark-bg-inverse/90',
-    'dark:focus:ring-dark-border-custom',
-    'dark:focus:ring-offset-dark-bg-primary',
-
-    // Transiciones
-    'transition-all',
-    'duration-150',
-  ].join(' ');
-
-  // ===== MANEJAR SELECCIÓN DE ITEM =====
-  const handleItemClick = (item: NavigationRailItemProps) => {
-    if (item.disabled) return;
-
-    if (item.onClick) {
-      item.onClick();
-    }
-
-    if (onItemSelect && item.id) {
-      onItemSelect(item.id);
-    }
-  };
-
-  return (
-    <nav className={containerClasses} aria-label="Navegación principal">
-      <div className={wrapperClasses}>
-        {/* FAB Button (opcional) */}
-        {showFab && (
-          <div className="flex items-start gap-2.5 shrink-0">
-            <button
-              type="button"
-              className={fabClasses}
-              onClick={onFabClick}
-              aria-label={fabAriaLabel}
-            >
-              <span className="w-4 h-4 flex items-center justify-center">
-                {fabIcon}
-              </span>
-            </button>
-          </div>
-        )}
-
-        {/* Navigation Items */}
-        <div className={itemsContainerClasses}>
-          {items.map((item, index) => (
-            <NavigationRailItem
-              key={item.id || index}
-              {...item}
-              selected={item.selected || (selectedId !== undefined && item.id === selectedId)}
-              onClick={() => handleItemClick(item)}
-            />
-          ))}
-        </div>
-      </div>
-    </nav>
-  );
-};
+import React from 'react';
+import type { NavigationRailProps, NavigationRailItemProps } from './NavigationRail.types';
+
+/**
+ * NavigationRail del sistema de diseño Siesa
+ *
+ * Componente de navegación vertical (rail) para aplicaciones. Proporciona acceso
+ * rápido a destinos principales mediante iconos y labels opcionales.
+ *
+ * **Características:**
+ * - Ancho fijo de 80px para navegación compacta
+ * - Soporte para FAB (Floating Action Button) en la parte superior
+ * - Estados: normal, hover, selected, disabled
+ * - Badges de notificación con contador opcional
+ * - Alineación flexible: top, center, bottom
+ * - Dark mode completo
+ *
+ * **Mejores prácticas implementadas:**
+ * - Orden de modificadores: {responsive}:{dark}:{state}:{utility}
+ * - Dark mode con estrategia 'class' (darkMode: 'class')
+ * - Tokens de color consistentes con la documentación
+ * - Tipografía Label XXSmall (10px Bold) según sistema de diseño
+ * - Estados interactivos completos (hover, focus, active)
+ *
+ * @see docs/colors.md - Sistema de colores
+ * @see docs/typography.md - Sistema tipográfico (Label XXSmall)
+ * @see docs/spacing.md - Sistema de espaciado
+ *
+ * @example
+ * ```tsx
+ * // Navigation Rail básico
+ * <NavigationRail
+ *   items={[
+ *     { id: 'home', icon: <HomeIcon />, label: 'Inicio', selected: true },
+ *     { id: 'search', icon: <SearchIcon />, label: 'Buscar' },
+ *     { id: 'notifications', icon: <BellIcon />, label: 'Notificaciones', badgeCount: 5 },
+ *   ]}
+ *   alignment="top"
+ * />
+ *
+ * // Con FAB button
+ * <NavigationRail
+ *   showFab
+ *   fabIcon={<PlusIcon />}
+ *   onFabClick={() => console.log('Create new')}
+ *   items={[...]}
+ * />
+ * ```
+ */
+
+/**
+ * NavigationRailItem - Componente interno para items individuales
+ */
+const NavigationRailItem: React.FC<NavigationRailItemProps> = ({
+  icon,
+  label,
+  selected = false,
+  disabled = false,
+  badge = false,
+  badgeCount,
+  onClick,
+  ariaLabel,
+  id,
+}) => {
+  // ===== CLASES DEL ICON CONTAINER =====
+  // Estado selected usa background con overlay según Figma
+  const iconContainerClasses = [
+    // Base
+    'flex',
+    'flex-col',
+    'items-center',
+    'justify-center',
+    'px-4',
+    'py-1',
+    'rounded-full',
+    'overflow-hidden',
+    'shrink-0',
+
+    // Estados
+    selected
+      ? // Selected: bg-primary-custom-100 con overlay de rgba(0,0,0,0.024)
+        'bg-primary-custom-100 dark:bg-primary-custom-600/30'
+      : // Default/Hover: transparent → hover:bg-primary-custom-100
+        'bg-transparent hover:bg-primary-custom-100 dark:hover:bg-primary-custom-600/20',
+
+    // Transiciones
+    'transition-colors',
+    'duration-150',
+  ].join(' ');
+
+  // ===== CLASES DEL ICONO =====
+  const iconClasses = [
+    'w-4',
+    'h-4',
+    'shrink-0',
+
+    // Colores según estado
+    selected || !disabled
+      ? // Selected o habilitado con hover: content-primary → hover:primary-custom-600
+        selected
+          ? 'text-primary-custom-600 dark:text-white'
+          : 'text-content-primary hover:text-primary-custom-600 dark:text-dark-content-primary dark:hover:text-white'
+      : // Disabled
+        'text-content-tertiary dark:text-content-tertiary',
+
+    'transition-colors',
+    'duration-150',
+  ].join(' ');
+
+  // ===== CLASES DEL LABEL =====
+  const labelClasses = [
+    // Tipografía: Label XXSmall (10px Bold, leading 12px)
+    'text-[10px]',
+    'leading-3',
+    'font-bold',
+    'text-center',
+    'w-full',
+    'min-w-full',
+
+    // Colores
+    'text-content-primary',
+    'dark:text-dark-content-primary',
+  ].join(' ');
+
+  // ===== CLASES DEL CONTENEDOR PRINCIPAL =====
+  const containerClasses = [
+    'relative',
+    'flex',
+    'flex-col',
+    'items-center',
+    'gap-1',
+    'px-0.5',
+    'py-0',
+    'w-14', // 56px según Figma
+    'shrink-0',
+
+    // Interactividad
+    disabled
+      ? 'cursor-not-allowed opacity-50 pointer-events-none'
+      : 'cursor-pointer',
+
+    // Focus
+    'focus:outline-none',
+    'focus-visible:ring-2',
+    'focus-visible:ring-primary-custom-400',
+    'focus-visible:ring-offset-2',
+    'dark:focus-visible:ring-dark-border-custom',
+    'dark:focus-visible:ring-offset-dark-bg-primary',
+    'rounded-lg',
+  ].join(' ');
+
+  // ===== RENDERIZAR BADGE =====
+  const renderBadge = () => {
+    if (!badge && badgeCount === undefined) return null;
+
+    // Badge con número
+    if (badgeCount !== undefined) {
+      return (
+        <span
+          className="
+            absolute
+            -top-0.5
+            left-[34px]
+            flex
+            items-center
+            justify-center
+            min-w-[13px]
+            h-[13px]
+            px-1
+            rounded-full
+            text-[10px]
+            font-bold
+            leading-none
+            bg-red-700
+            text-white
+            dark:bg-red-700
+            dark:text-white
+            pointer-events-none
+          "
+          aria-label={`${badgeCount} notificaciones`}
+        >
+          {badgeCount > 99 ? '99+' : badgeCount}
+        </span>
+      );
+    }
+
+    // Badge dot simple
+    return (
+      <span
+        className="
+          absolute
+          -top-0.5
+          left-[34px]
+          w-[13px]
+          h-[13px]
+          rounded-full
+          bg-red-700
+          dark:bg-red-700
+          pointer-events-none
+        "
+        aria-label="Notificación"
+      />
+    );
+  };
+
+  return (
+    <button
+      type="button"
+      className={containerClasses}
+      disabled={disabled}
+      onClick={onClick}
+      aria-label={ariaLabel || label}
+      aria-current={selected ? 'page' : undefined}
+      data-item-id={id}
+    >
+      {/* Icon Container */}
+      <div className={iconContainerClasses}>
+        <span className={iconClasses}>
+          {icon}
+        </span>
+      </div>
+
+      {/* Label */}
+      <p className={labelClasses}>
+        {label}
+      </p>
+
+      {/* Badge */}
+      {renderBadge()}
+    </button>
+  );
+};
+
+/**
+ * NavigationRail - Componente principal
+ */
+export const NavigationRail: React.FC<NavigationRailProps> = ({
+  items,
+  alignment = 'top',
+  showFab = false,
+  fabIcon,
+  onFabClick,
+  fabAriaLabel = 'Crear nuevo',
+  className = '',
+  selectedId,
+  onItemSelect,
+}) => {
+  // ===== CLASES DEL CONTENEDOR PRINCIPAL =====
+  const containerClasses = [
+    // Layout
+    'flex',
+    'flex-col',
+    'items-center',
+    'relative',
+
+    // Tamaño fijo según Figma
+    'w-20', // 80px
+    'h-full',
+
+    // Fondo y bordes
+    'bg-white',
+    'dark:bg-dark-bg-primary',
+    'border-r',
+    'border-border-primary',
+    'dark:border-dark-border-primary',
+
+    className,
+  ].join(' ');
+
+  // ===== CLASES DEL WRAPPER CON PADDING =====
+  // Según Figma, cada alineación funciona diferente:
+  // - top: flujo normal desde arriba
+  // - center: wrapper con grow y items absolutamente centrados
+  // - bottom: wrapper con grow y items con justify-end
+  const wrapperClasses = [
+    'flex',
+    'flex-col',
+    'items-center',
+    'gap-10', // 40px entre FAB y items según Figma
+    'w-20', // 80px
+    'pb-10', // 40px padding bottom según Figma
+    'pt-2', // 8px padding top según Figma
+
+    // Para center y bottom, el wrapper debe crecer para ocupar espacio
+    alignment !== 'top' && 'grow',
+    alignment !== 'top' && 'basis-0',
+    alignment !== 'top' && 'min-h-0',
+  ].filter(Boolean).join(' ');
+
+  // ===== CLASES DEL CONTENEDOR DE ITEMS =====
+  // Para cada alineación, los items se posicionan diferente
+  const getItemsContainerClasses = () => {
+    const baseClasses = [
+      'flex',
+      'flex-col',
+      'items-center',
+      'gap-3', // 12px según Figma
+      'w-20', // 80px
+    ];
+
+    if (alignment === 'top') {
+      return [...baseClasses, 'shrink-0'].join(' ');
+    }
+
+    if (alignment === 'center') {
+      // Items absolutamente centrados según Figma
+      return [
+        ...baseClasses,
+        'absolute',
+        'left-1/2',
+        'top-1/2',
+        '-translate-x-1/2',
+        '-translate-y-1/2',
+      ].join(' ');
+    }
+
+    if (alignment === 'bottom') {
+      // Items al final con grow y justify-end según Figma
+      return [
+        ...baseClasses,
+        'grow',
+        'basis-0',
+        'min-h-0',
+        'justify-end',
+        'shrink-0',
+      ].join(' ');
+    }
+
+    return baseClasses.join(' ');
+  };
+
+  const itemsContainerClasses = getItemsContainerClasses();
+
+  // ===== CLASES DEL FAB BUTTON =====
+  const fabClasses = [
+    // Layout
+    'flex',
+    'items-center',
+    'justify-center',
+    'p-3', // 12px padding según Figma
+    'shrink-0',
+
+    // Estilo
+    'rounded-md',
+    'bg-primary-custom-600',
+    'text-primary-inverse-content',
+    'border',
+    'border-primary-custom-600',
+    'shadow-button-inset',
+
+    // Estados
+    'hover:bg-primary-custom-500',
+    'active:scale-95',
+    'focus:outline-none',
+    'focus:ring-2',
+    'focus:ring-primary-custom-400',
+    'focus:ring-offset-2',
+
+    // Dark mode
+    'dark:bg-dark-bg-inverse',
+    'dark:text-dark-content-inverse',
+    'dark:border-dark-bg-inverse',
+    'dark:hover:bg-dark-bg-inverse/90',
+    'dark:focus:ring-dark-border-custom',
+    'dark:focus:ring-offset-dark-bg-primary',
+
+    // Transiciones
+    'transition-all',
+    'duration-150',
+  ].join(' ');
+
+  // ===== MANEJAR SELECCIÓN DE ITEM =====
+  const handleItemClick = (item: NavigationRailItemProps) => {
+    if (item.disabled) return;
+
+    if (item.onClick) {
+      item.onClick();
+    }
+
+    if (onItemSelect && item.id) {
+      onItemSelect(item.id);
+    }
+  };
+
+  return (
+    <nav className={containerClasses} aria-label="Navegación principal">
+      <div className={wrapperClasses}>
+        {/* FAB Button (opcional) */}
+        {showFab && (
+          <div className="flex items-start gap-2.5 shrink-0">
+            <button
+              type="button"
+              className={fabClasses}
+              onClick={onFabClick}
+              aria-label={fabAriaLabel}
+            >
+              <span className="w-4 h-4 flex items-center justify-center">
+                {fabIcon}
+              </span>
+            </button>
+          </div>
+        )}
+
+        {/* Navigation Items */}
+        <div className={itemsContainerClasses}>
+          {items.map((item, index) => (
+            <NavigationRailItem
+              key={item.id || index}
+              {...item}
+              selected={item.selected || (selectedId !== undefined && item.id === selectedId)}
+              onClick={() => handleItemClick(item)}
+            />
+          ))}
+        </div>
+      </div>
+    </nav>
+  );
+};