siesa-ui-kit 1.0.2 → 1.0.4

package/src/components/NavigationRailTypes/NavigationRailTypes.types.ts

@@ -1,130 +1,178 @@
-import type { ReactNode } from 'react';
-
-/**
- * Props del componente NavigationRailTypes
- *
- * @see https://www.figma.com/design/5XNqf2YTxvwemxwo1LMQ6j/Siesa-UI-Kit?node-id=6135-36219
- */
-export interface NavigationRailTypesProps {
-  /**
-   * Determina si el rail está colapsado (iconos solo) o expandido (con labels)
-   * - `true`: Modo colapsado (80px width, solo iconos)
-   * - `false`: Modo expandido (215px width, con labels)
-   * @default true
-   */
-  collapsed?: boolean;
-
-  /**
-   * Items de navegación a mostrar en la barra
-   * Se muestran en modo comprimido (iconos) o expandido (con descripción)
-   */
-  items?: NavigationRailItem[];
-
-  /**
-   * Si mostrar el botón "Recientes" en el footer
-   * @default true
-   */
-  showRecentButton?: boolean;
-
-  /**
-   * Callback cuando el estado collapsed cambia
-   * Útil para sincronizar con estado global
-   */
-  onCollapsedChange?: (collapsed: boolean) => void;
-
-  /**
-   * Callback cuando se clickea un item
-   * @param index - índice del item clickeado
-   * @param item - datos del item
-   */
-  onItemClick?: (index: number, item: NavigationRailItem) => void;
-
-  /**
-   * Classes CSS adicionales
-   */
-  className?: string;
-}
-
-/**
- * Props para cada item de navegación en el rail
- */
-export interface NavigationRailItem {
-  /**
-   * Identificador único del item
-   */
-  id: string;
-
-  /**
-   * Etiqueta del item (visible en modo expandido)
-   */
-  label: string;
-
-  /**
-   * Icono a mostrar (16x16px recomendado)
-   */
-  icon: ReactNode;
-
-  /**
-   * Si el item está activo/seleccionado
-   * @default false
-   */
-  active?: boolean;
-
-  /**
-   * Si el item está deshabilitado
-   * @default false
-   */
-  disabled?: boolean;
-
-  /**
-   * Callback cuando se hace click en el item
-   */
-  onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
-
-  /**
-   * URL para navigation (si se usa como link)
-   */
-  href?: string;
-
-  /**
-   * Atributos ARIA para accesibilidad
-   */
-  ariaLabel?: string;
-
-  /**
-   * Badge de notificación (dot rojo pequeño)
-   */
-  badge?: boolean;
-
-  /**
-   * Contador de notificaciones (99+ para >99)
-   */
-  badgeCount?: number;
-
-  /**
-   * Color del badge
-   * @default 'red'
-   */
-  badgeColor?: 'red' | 'blue' | 'green' | 'yellow' | 'orange';
-}
-
-/**
- * Props para el item colapsable (reutiliza DropdownItemCollapsible)
- * Solo se usa en modo expandido
- */
-export interface NavigationRailCollapsibleItem extends NavigationRailItem {
-  /**
-   * Items anidados (solo en modo expandido)
-   */
-  children?: NavigationRailItem[];
-
-  /**
-   * Si el item está expandido inicialmente
-   */
-  defaultOpen?: boolean;
-
-  /**
-   * Si el item es colapsable
-   */
-  isCollapsible?: boolean;
-}
+import type { ReactNode } from 'react';
+
+/**
+ * Props del componente NavigationRailTypes
+ *
+ * @see https://www.figma.com/design/5XNqf2YTxvwemxwo1LMQ6j/Siesa-UI-Kit?node-id=6135-36219
+ */
+export interface NavigationRailTypesProps {
+  /**
+   * Determina si el rail está colapsado (iconos solo) o expandido (con labels)
+   * - `true`: Modo colapsado (80px width, solo iconos)
+   * - `false`: Modo expandido (215px width, con labels)
+   * @default true
+   */
+  collapsed?: boolean;
+
+  /**
+   * Items de navegación a mostrar en la barra
+   * Se muestran en modo comprimido (iconos) o expandido (con descripción)
+   */
+  items?: NavigationRailItem[];
+
+  /**
+   * Si mostrar el botón "Recientes" en el footer
+   * @default true
+   */
+  showRecentButton?: boolean;
+
+  /**
+   * Si mostrar el botón de búsqueda en modo collapsed
+   * @default true
+   */
+  showSearchButton?: boolean;
+
+  /**
+   * Callback cuando el estado collapsed cambia
+   * Útil para sincronizar con estado global
+   */
+  onCollapsedChange?: (collapsed: boolean) => void;
+
+  /**
+   * Callback cuando se clickea un item
+   * @param index - índice del item clickeado
+   * @param item - datos del item
+   */
+  onItemClick?: (index: number, item: NavigationRailItem) => void;
+
+  /**
+   * Callback cuando se hace hover sobre un item
+   * @param index - índice del item con hover
+   * @param item - datos del item
+   */
+  onItemHover?: (index: number, item: NavigationRailItem) => void;
+
+  /**
+   * Classes CSS adicionales
+   */
+  className?: string;
+
+  /**
+   * Labels de internacionalización
+   */
+  labels?: {
+    /**
+     * Label del botón de búsqueda (collapsed mode)
+     * @default 'Search'
+     */
+    searchButton?: string;
+
+    /**
+     * Placeholder del input de búsqueda (expanded mode)
+     * @default 'Buscar módulo'
+     */
+    searchPlaceholder?: string;
+
+    /**
+     * Label del botón "Recientes"
+     * @default 'Recientes'
+     */
+    recentButton?: string;
+
+    /**
+     * Label del botón "Colapsar"
+     * @default 'Colapsar'
+     */
+    collapseButton?: string;
+
+    /**
+     * Label del botón "Expandir"
+     * @default 'Expandir'
+     */
+    expandButton?: string;
+  };
+}
+
+/**
+ * Props para cada item de navegación en el rail
+ */
+export interface NavigationRailItem {
+  /**
+   * Identificador único del item
+   */
+  id: string;
+
+  /**
+   * Etiqueta del item (visible en modo expandido)
+   */
+  label: string;
+
+  /**
+   * Icono a mostrar (16x16px recomendado)
+   */
+  icon: ReactNode;
+
+  /**
+   * Si el item está activo/seleccionado
+   * @default false
+   */
+  active?: boolean;
+
+  /**
+   * Si el item está deshabilitado
+   * @default false
+   */
+  disabled?: boolean;
+
+  /**
+   * Callback cuando se hace click en el item
+   */
+  onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
+
+  /**
+   * URL para navigation (si se usa como link)
+   */
+  href?: string;
+
+  /**
+   * Atributos ARIA para accesibilidad
+   */
+  ariaLabel?: string;
+
+  /**
+   * Badge de notificación (dot rojo pequeño)
+   */
+  badge?: boolean;
+
+  /**
+   * Contador de notificaciones (99+ para >99)
+   */
+  badgeCount?: number;
+
+  /**
+   * Color del badge
+   * @default 'red'
+   */
+  badgeColor?: 'red' | 'blue' | 'green' | 'yellow' | 'orange';
+}
+
+/**
+ * Props para el item colapsable (reutiliza DropdownItemCollapsible)
+ * Solo se usa en modo expandido
+ */
+export interface NavigationRailCollapsibleItem extends NavigationRailItem {
+  /**
+   * Items anidados (solo en modo expandido)
+   */
+  children?: NavigationRailItem[];
+
+  /**
+   * Si el item está expandido inicialmente
+   */
+  defaultOpen?: boolean;
+
+  /**
+   * Si el item es colapsable
+   */
+  isCollapsible?: boolean;
+}