siesa-ui-kit 1.0.0 → 1.0.2

package/src/components/NavigationBar/NavigationBar.tsx

@@ -1,246 +1,246 @@
-import React from 'react';
-import type { NavigationBarProps, NavigationBarItem } from './NavigationBar.types';
-
-/**
- * NavigationBar del sistema de diseño Siesa
- *
- * **Componente de navegación inferior (Bottom Navigation Bar) para móvil.**
- * Permite al usuario navegar entre vistas principales de la aplicación.
- * Diseñado para contener 3-5 ítems de navegación.
- *
- * **🔄 Navegación Responsive:**
- * El NavigationRail (navegación lateral vertical) se convierte en NavigationBar
- * (navegación inferior horizontal) cuando la pantalla es móvil. Esta es una
- * práctica recomendada de UX para aprovechar mejor el espacio en diferentes
- * dispositivos:
- * - **Desktop/Tablet**: Usar NavigationRail (lateral)
- * - **Mobile**: Usar NavigationBar (inferior)
- *
- * **Características:**
- * - Soporta hasta 5 ítems de navegación (recomendado: 3-5)
- * - Cada ítem tiene icono + label
- * - Indicador visual de ítem activo (fondo azul claro)
- * - Estados: active, hover, disabled
- * - Dark mode completo
- * - Accesibilidad con ARIA labels
- *
- * **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
- * - Type safety con TypeScript estricto
- * - Tipografía Label XXSmall (10px Bold) según sistema de diseño
- * - Iconos de 16x16px según especificaciones de Figma
- *
- * @see docs/colors.md - Sistema de colores
- * @see docs/typography.md - Sistema tipográfico (Label XXSmall)
- * @see docs/spacing.md - Sistema de espaciado
- * @see NavigationRail - Componente de navegación lateral para desktop
- *
- * @example
- * ```tsx
- * const items = [
- *   { id: 'home', icon: <HomeIcon />, label: 'Inicio', active: true },
- *   { id: 'search', icon: <SearchIcon />, label: 'Buscar' },
- *   { id: 'profile', icon: <ProfileIcon />, label: 'Perfil' },
- * ];
- *
- * <NavigationBar
- *   items={items}
- *   activeItemId="home"
- *   onItemClick={(id) => console.log('Clicked:', id)}
- * />
- * ```
- *
- * @example
- * // Patrón responsive: NavigationRail en desktop, NavigationBar en mobile
- * ```tsx
- * function ResponsiveNav() {
- *   return (
- *     <>
- *       // NavigationRail para desktop/tablet
- *       <div className="hidden md:block">
- *         <NavigationRail items={items} />
- *       </div>
- *
- *       // NavigationBar para móvil
- *       <div className="md:hidden fixed bottom-0 left-0 right-0 z-50">
- *         <NavigationBar items={items} />
- *       </div>
- *     </>
- *   );
- * }
- * ```
- */
-export const NavigationBar: React.FC<NavigationBarProps> = ({
-  items,
-  activeItemId,
-  onItemClick,
-  className = '',
-  ariaLabel = 'Navegación Principal',
-}) => {
-  // ===== VALIDACIÓN: Máximo 5 ítems =====
-  if (items.length > 5) {
-    console.warn('NavigationBar: Se recomienda un máximo de 5 ítems para mejor UX');
-  }
-
-  // ===== HANDLER DE CLICK =====
-  const handleItemClick = (item: NavigationBarItem) => {
-    if (item.disabled) return;
-
-    // Llamar onClick del ítem individual si existe
-    if (item.onClick) {
-      item.onClick(item.id);
-    }
-
-    // Llamar onItemClick global si existe
-    if (onItemClick) {
-      onItemClick(item.id);
-    }
-  };
-
-  // ===== RENDERIZAR ÍTEM =====
-  const renderItem = (item: NavigationBarItem) => {
-    const isActive = item.active || item.id === activeItemId;
-
-    // ===== CLASES DEL CONTENEDOR DEL ÍTEM =====
-    const itemContainerClasses = `
-      flex-1
-      flex
-      flex-col
-      items-center
-      gap-1
-      px-0.5
-      py-0
-      min-w-0
-      cursor-pointer
-      transition-all
-      duration-150
-      ${item.disabled ? 'opacity-50 cursor-not-allowed pointer-events-none' : ''}
-    `
-      .replace(/\s+/g, ' ')
-      .trim();
-
-    // ===== CLASES DEL ICON CONTAINER =====
-    // Fondo azul claro cuando está activo (rgb(219, 238, 254) = #dbeefe = primary-custom-100)
-    // En dark mode usa el mismo color opaco según Figma
-    const iconContainerClasses = `
-      flex
-      items-center
-      justify-center
-      px-4
-      py-1
-      rounded-full
-      overflow-hidden
-      transition-all
-      duration-150
-      ${
-        isActive
-          ? 'bg-primary-custom-100 dark:bg-primary-custom-100'
-          : 'bg-transparent hover:bg-hover-overlay dark:hover:bg-hover-overlay-dark'
-      }
-    `
-      .replace(/\s+/g, ' ')
-      .trim();
-
-    // ===== CLASES DEL LABEL =====
-    // Label XXSmall: 10px Bold, line-height 12px (según typography.md y Figma)
-    const labelClasses = `
-      font-['SiesaBT:Bold',sans-serif]
-      text-[10px]
-      leading-[12px]
-      font-bold
-      text-center
-      w-full
-      min-w-0
-      text-content-primary
-      dark:text-dark-content-primary
-      transition-colors
-      duration-150
-    `
-      .replace(/\s+/g, ' ')
-      .trim();
-
-    // ===== CLASES DEL ICONO =====
-    // Iconos de 16x16px según Figma
-    const iconClasses = `
-      w-4
-      h-4
-      shrink-0
-      text-content-primary
-      dark:text-dark-content-primary
-      transition-colors
-      duration-150
-    `
-      .replace(/\s+/g, ' ')
-      .trim();
-
-    return (
-      <button
-        key={item.id}
-        type="button"
-        className={itemContainerClasses}
-        onClick={() => handleItemClick(item)}
-        disabled={item.disabled}
-        aria-label={item.ariaLabel || item.label}
-        aria-current={isActive ? 'page' : undefined}
-      >
-        {/* Icon Container */}
-        <div className={iconContainerClasses}>
-          <span className={iconClasses}>{item.icon}</span>
-        </div>
-
-        {/* Label */}
-        <span className={labelClasses}>{item.label}</span>
-      </button>
-    );
-  };
-
-  // ===== CLASES DEL CONTENEDOR PRINCIPAL =====
-  const containerClasses = `
-    bg-bg-primary
-    dark:bg-dark-bg-primary
-    p-4
-    w-full
-    transition-colors
-    duration-150
-  `
-    .replace(/\s+/g, ' ')
-    .trim();
-
-  // ===== CLASES DEL MENU (Contenedor de ítems) =====
-  const menuClasses = `
-    flex
-    items-start
-    justify-center
-    w-full
-  `
-    .replace(/\s+/g, ' ')
-    .trim();
-
-  // ===== CLASES DEL DESTINATIONS (Contenedor con gap) =====
-  const destinationsClasses = `
-    flex-1
-    flex
-    items-start
-    gap-2
-    min-h-0
-    min-w-0
-  `
-    .replace(/\s+/g, ' ')
-    .trim();
-
-  return (
-    <nav
-      className={`${containerClasses} ${className}`.trim()}
-      role="navigation"
-      aria-label={ariaLabel}
-    >
-      <div className={menuClasses}>
-        <div className={destinationsClasses}>
-          {items.map((item) => renderItem(item))}
-        </div>
-      </div>
-    </nav>
-  );
-};
+import React from 'react';
+import type { NavigationBarProps, NavigationBarItem } from './NavigationBar.types';
+
+/**
+ * NavigationBar del sistema de diseño Siesa
+ *
+ * **Componente de navegación inferior (Bottom Navigation Bar) para móvil.**
+ * Permite al usuario navegar entre vistas principales de la aplicación.
+ * Diseñado para contener 3-5 ítems de navegación.
+ *
+ * **🔄 Navegación Responsive:**
+ * El NavigationRail (navegación lateral vertical) se convierte en NavigationBar
+ * (navegación inferior horizontal) cuando la pantalla es móvil. Esta es una
+ * práctica recomendada de UX para aprovechar mejor el espacio en diferentes
+ * dispositivos:
+ * - **Desktop/Tablet**: Usar NavigationRail (lateral)
+ * - **Mobile**: Usar NavigationBar (inferior)
+ *
+ * **Características:**
+ * - Soporta hasta 5 ítems de navegación (recomendado: 3-5)
+ * - Cada ítem tiene icono + label
+ * - Indicador visual de ítem activo (fondo azul claro)
+ * - Estados: active, hover, disabled
+ * - Dark mode completo
+ * - Accesibilidad con ARIA labels
+ *
+ * **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
+ * - Type safety con TypeScript estricto
+ * - Tipografía Label XXSmall (10px Bold) según sistema de diseño
+ * - Iconos de 16x16px según especificaciones de Figma
+ *
+ * @see docs/colors.md - Sistema de colores
+ * @see docs/typography.md - Sistema tipográfico (Label XXSmall)
+ * @see docs/spacing.md - Sistema de espaciado
+ * @see NavigationRail - Componente de navegación lateral para desktop
+ *
+ * @example
+ * ```tsx
+ * const items = [
+ *   { id: 'home', icon: <HomeIcon />, label: 'Inicio', active: true },
+ *   { id: 'search', icon: <SearchIcon />, label: 'Buscar' },
+ *   { id: 'profile', icon: <ProfileIcon />, label: 'Perfil' },
+ * ];
+ *
+ * <NavigationBar
+ *   items={items}
+ *   activeItemId="home"
+ *   onItemClick={(id) => console.log('Clicked:', id)}
+ * />
+ * ```
+ *
+ * @example
+ * // Patrón responsive: NavigationRail en desktop, NavigationBar en mobile
+ * ```tsx
+ * function ResponsiveNav() {
+ *   return (
+ *     <>
+ *       // NavigationRail para desktop/tablet
+ *       <div className="hidden md:block">
+ *         <NavigationRail items={items} />
+ *       </div>
+ *
+ *       // NavigationBar para móvil
+ *       <div className="md:hidden fixed bottom-0 left-0 right-0 z-50">
+ *         <NavigationBar items={items} />
+ *       </div>
+ *     </>
+ *   );
+ * }
+ * ```
+ */
+export const NavigationBar: React.FC<NavigationBarProps> = ({
+  items,
+  activeItemId,
+  onItemClick,
+  className = '',
+  ariaLabel = 'Navegación Principal',
+}) => {
+  // ===== VALIDACIÓN: Máximo 5 ítems =====
+  if (items.length > 5) {
+    console.warn('NavigationBar: Se recomienda un máximo de 5 ítems para mejor UX');
+  }
+
+  // ===== HANDLER DE CLICK =====
+  const handleItemClick = (item: NavigationBarItem) => {
+    if (item.disabled) return;
+
+    // Llamar onClick del ítem individual si existe
+    if (item.onClick) {
+      item.onClick(item.id);
+    }
+
+    // Llamar onItemClick global si existe
+    if (onItemClick) {
+      onItemClick(item.id);
+    }
+  };
+
+  // ===== RENDERIZAR ÍTEM =====
+  const renderItem = (item: NavigationBarItem) => {
+    const isActive = item.active || item.id === activeItemId;
+
+    // ===== CLASES DEL CONTENEDOR DEL ÍTEM =====
+    const itemContainerClasses = `
+      flex-1
+      flex
+      flex-col
+      items-center
+      gap-1
+      px-0.5
+      py-0
+      min-w-0
+      cursor-pointer
+      transition-all
+      duration-150
+      ${item.disabled ? 'opacity-50 cursor-not-allowed pointer-events-none' : ''}
+    `
+      .replace(/\s+/g, ' ')
+      .trim();
+
+    // ===== CLASES DEL ICON CONTAINER =====
+    // Fondo azul claro cuando está activo (rgb(219, 238, 254) = #dbeefe = primary-custom-100)
+    // En dark mode usa el mismo color opaco según Figma
+    const iconContainerClasses = `
+      flex
+      items-center
+      justify-center
+      px-4
+      py-1
+      rounded-full
+      overflow-hidden
+      transition-all
+      duration-150
+      ${
+        isActive
+          ? 'bg-primary-custom-100 dark:bg-primary-custom-100'
+          : 'bg-transparent hover:bg-hover-overlay dark:hover:bg-hover-overlay-dark'
+      }
+    `
+      .replace(/\s+/g, ' ')
+      .trim();
+
+    // ===== CLASES DEL LABEL =====
+    // Label XXSmall: 10px Bold, line-height 12px (según typography.md y Figma)
+    const labelClasses = `
+      font-['SiesaBT:Bold',sans-serif]
+      text-[10px]
+      leading-[12px]
+      font-bold
+      text-center
+      w-full
+      min-w-0
+      text-content-primary
+      dark:text-dark-content-primary
+      transition-colors
+      duration-150
+    `
+      .replace(/\s+/g, ' ')
+      .trim();
+
+    // ===== CLASES DEL ICONO =====
+    // Iconos de 16x16px según Figma
+    const iconClasses = `
+      w-4
+      h-4
+      shrink-0
+      text-content-primary
+      dark:text-dark-content-primary
+      transition-colors
+      duration-150
+    `
+      .replace(/\s+/g, ' ')
+      .trim();
+
+    return (
+      <button
+        key={item.id}
+        type="button"
+        className={itemContainerClasses}
+        onClick={() => handleItemClick(item)}
+        disabled={item.disabled}
+        aria-label={item.ariaLabel || item.label}
+        aria-current={isActive ? 'page' : undefined}
+      >
+        {/* Icon Container */}
+        <div className={iconContainerClasses}>
+          <span className={iconClasses}>{item.icon}</span>
+        </div>
+
+        {/* Label */}
+        <span className={labelClasses}>{item.label}</span>
+      </button>
+    );
+  };
+
+  // ===== CLASES DEL CONTENEDOR PRINCIPAL =====
+  const containerClasses = `
+    bg-bg-primary
+    dark:bg-dark-bg-primary
+    p-4
+    w-full
+    transition-colors
+    duration-150
+  `
+    .replace(/\s+/g, ' ')
+    .trim();
+
+  // ===== CLASES DEL MENU (Contenedor de ítems) =====
+  const menuClasses = `
+    flex
+    items-start
+    justify-center
+    w-full
+  `
+    .replace(/\s+/g, ' ')
+    .trim();
+
+  // ===== CLASES DEL DESTINATIONS (Contenedor con gap) =====
+  const destinationsClasses = `
+    flex-1
+    flex
+    items-start
+    gap-2
+    min-h-0
+    min-w-0
+  `
+    .replace(/\s+/g, ' ')
+    .trim();
+
+  return (
+    <nav
+      className={`${containerClasses} ${className}`.trim()}
+      role="navigation"
+      aria-label={ariaLabel}
+    >
+      <div className={menuClasses}>
+        <div className={destinationsClasses}>
+          {items.map((item) => renderItem(item))}
+        </div>
+      </div>
+    </nav>
+  );
+};

package/src/components/NavigationBar/NavigationBar.types.ts

@@ -1,74 +1,74 @@
-import type { ReactNode } from 'react';
-
-/**
- * Interfaz para un ítem individual del Navigation Bar
- */
-export interface NavigationBarItem {
-  /**
-   * Identificador único del ítem
-   */
-  id: string;
-
-  /**
-   * Icono del ítem (componente React)
-   */
-  icon: ReactNode;
-
-  /**
-   * Label del ítem (texto debajo del icono)
-   */
-  label: string;
-
-  /**
-   * Si el ítem está activo
-   * @default false
-   */
-  active?: boolean;
-
-  /**
-   * Si el ítem está deshabilitado
-   * @default false
-   */
-  disabled?: boolean;
-
-  /**
-   * Función onClick del ítem
-   */
-  onClick?: (id: string) => void;
-
-  /**
-   * Etiqueta accesible para lectores de pantalla
-   */
-  ariaLabel?: string;
-}
-
-/**
- * Props del componente NavigationBar
- */
-export interface NavigationBarProps {
-  /**
-   * Lista de ítems del navigation bar (máximo 5 ítems recomendado)
-   */
-  items: NavigationBarItem[];
-
-  /**
-   * ID del ítem actualmente activo
-   */
-  activeItemId?: string;
-
-  /**
-   * Función que se ejecuta cuando se hace click en un ítem
-   */
-  onItemClick?: (id: string) => void;
-
-  /**
-   * Clases CSS adicionales para el contenedor
-   */
-  className?: string;
-
-  /**
-   * Etiqueta accesible para el navigation bar
-   * @default 'Navigation Bar'
-   */
-  ariaLabel?: string;
-}
+import type { ReactNode } from 'react';
+
+/**
+ * Interfaz para un ítem individual del Navigation Bar
+ */
+export interface NavigationBarItem {
+  /**
+   * Identificador único del ítem
+   */
+  id: string;
+
+  /**
+   * Icono del ítem (componente React)
+   */
+  icon: ReactNode;
+
+  /**
+   * Label del ítem (texto debajo del icono)
+   */
+  label: string;
+
+  /**
+   * Si el ítem está activo
+   * @default false
+   */
+  active?: boolean;
+
+  /**
+   * Si el ítem está deshabilitado
+   * @default false
+   */
+  disabled?: boolean;
+
+  /**
+   * Función onClick del ítem
+   */
+  onClick?: (id: string) => void;
+
+  /**
+   * Etiqueta accesible para lectores de pantalla
+   */
+  ariaLabel?: string;
+}
+
+/**
+ * Props del componente NavigationBar
+ */
+export interface NavigationBarProps {
+  /**
+   * Lista de ítems del navigation bar (máximo 5 ítems recomendado)
+   */
+  items: NavigationBarItem[];
+
+  /**
+   * ID del ítem actualmente activo
+   */
+  activeItemId?: string;
+
+  /**
+   * Función que se ejecuta cuando se hace click en un ítem
+   */
+  onItemClick?: (id: string) => void;
+
+  /**
+   * Clases CSS adicionales para el contenedor
+   */
+  className?: string;
+
+  /**
+   * Etiqueta accesible para el navigation bar
+   * @default 'Navigation Bar'
+   */
+  ariaLabel?: string;
+}