siesa-ui-kit 1.0.2 → 1.0.4

package/claude/prompts/component-template.md

@@ -0,0 +1,121 @@
+# 🎯 Prompt Template: Crear/Corregir Componentes
+
+## ✅ Crear Componente Nuevo
+
+```
+Usando el agente @.claude\agents\siesa-ui-kit-specialist.md CREA el componente [NOMBRE_COMPONENTE]
+
+**Figma:** [LINK_FIGMA o "No disponible"]
+
+**Proceso completo:**
+1. Si hay Figma: extrae specs (colores, tamaños, espaciados, estados)
+2. Revisa docs necesarias (colors.md, typography.md, spacing.md, shadows.md)
+3. Usa Button como referencia de implementación
+4. Genera estructura completa en src/components/[NOMBRE_COMPONENTE]/
+5. Implementa usando tokens del sistema
+6. Asegura dark mode completo en TODOS los elementos
+7. Valida con npm run build
+8. Crea stories con todos los estados y ejemplos
+9. Genera README del componente
+
+**Checklist obligatorio:**
+- [ ] Todos los archivos necesarios (.tsx, .types.ts, .stories.tsx, index.ts, README.md)
+- [ ] JSDoc completo con Usando el agente @see references
+- [ ] Dark mode en todos los estados (hover, focus, active, disabled)
+- [ ] Focus rings adaptativos
+- [ ] Props con defaults y tipos estrictos
+- [ ] Tokens del sistema (NO colores hardcodeados)
+- [ ] Build sin errores
+- [ ] Stories con ejemplos completos
+- [ ] Pixel-perfect vs Figma (si aplica)
+
+Reporta detalladamente todos los cambios realizados.
+```
+
+---
+
+## 🔧 Corregir Componente Existente
+
+```
+Usando el agente @.claude\agents\siesa-ui-kit-specialist.md CORRIGE el componente [NOMBRE_COMPONENTE]
+
+**Figma:** [LINK_FIGMA o "No disponible"]
+
+**Proceso completo:**
+1. Si hay Figma: extrae specs (colores, tamaños, espaciados, estados)
+2. Revisa docs necesarias (colors.md, typography.md, spacing.md, shadows.md)
+3. Usa Button como referencia de implementación
+4. Compara con implementación actual en src/components/[NOMBRE_COMPONENTE]/
+5. Corrige usando tokens del sistema
+6. Asegura dark mode completo en TODOS los elementos
+7. Valida con npm run build
+8. Actualiza stories con todos los estados y ejemplos
+9. Actualiza README del componente si es necesario
+
+**Checklist obligatorio:**
+- [ ] Todos los archivos actualizados (.tsx, .types.ts, .stories.tsx)
+- [ ] JSDoc completo con Usando el agente @see references
+- [ ] Dark mode en todos los estados (hover, focus, active, disabled)
+- [ ] Focus rings adaptativos
+- [ ] Props con defaults y tipos estrictos
+- [ ] Tokens del sistema (NO colores hardcodeados)
+- [ ] Build sin errores
+- [ ] Stories con ejemplos completos
+- [ ] Pixel-perfect vs Figma (si aplica)
+
+Reporta detalladamente todos los cambios realizados.
+```
+
+---
+
+## 🖼️ Crear/Corregir Vista (Página Completa)
+
+```
+Usando el agente @.claude\agents\siesa-ui-kit-specialist.md CREA la vista [NOMBRE_VISTA]
+
+**Figma:** [LINK_FIGMA]
+
+**Descripción:** [Breve descripción de la vista/página]
+
+**Proceso completo:**
+1. Analiza el diseño de Figma en detalle (layout, composición, espaciado)
+2. Identifica componentes existentes en src/components/ que se pueden reutilizar
+3. Si faltan componentes, créalos primero siguiendo el template de componentes
+4. Revisa docs de layout patterns (si existen) o usa principios de spacing.md
+5. Crea estructura en src/views/[NOMBRE_VISTA]/ con:
+   - [NombreVista].tsx (componente principal)
+   - [NombreVista].stories.tsx (Storybook)
+   - index.ts (exports)
+   - README.md (documentación)
+6. Compone la vista usando componentes del Storybook
+7. Aplica responsive design (mobile-first)
+8. Asegura dark mode completo
+9. Valida con npm run build y npm run storybook
+10. Documenta uso y props en README
+
+**Checklist obligatorio:**
+- [ ] Análisis completo de Figma (secciones, componentes, layout)
+- [ ] Todos los componentes necesarios existen o fueron creados
+- [ ] Composición correcta con componentes del sistema
+- [ ] Responsive design (breakpoints: sm, md, lg, xl)
+- [ ] Dark mode en toda la vista
+- [ ] Tokens del sistema para espaciado y colores
+- [ ] Stories con diferentes estados (empty, loading, error, success)
+- [ ] README con capturas y ejemplos de uso
+- [ ] Build sin errores
+- [ ] Pixel-perfect vs Figma
+
+**Estructura esperada:**
+src/views/[NombreVista]/
+├── [NombreVista].tsx
+├── [NombreVista].stories.tsx
+├── index.ts
+└── README.md
+
+Reporta detalladamente la composición y componentes utilizados.
+```
+
+---
+
+**Versión**: 1.1.0
+**Última actualización**: 2025-11-12

package/claude/prompts/siesa-ui-kit.md

@@ -0,0 +1,28 @@
+# 🎯 Prompt Templates
+
+> **Nota:** El agente `@siesa-ui-kit-specialist` contiene toda la documentación técnica detallada (tokens, dark mode, patrones, checklists, etc.). Estos prompts son atajos concisos.
+
+---
+
+## ✅ Crear Componente
+
+```
+@siesa-ui-kit-specialist CREA el componente [NOMBRE]
+
+Figma: [LINK o "No disponible"]
+```
+
+---
+
+## 🖼️ Crear Vista
+
+```
+@siesa-ui-kit-specialist CREA la vista [NOMBRE]
+
+Figma: [LINK o "No disponible"]
+```
+
+---
+
+**Versión**: 2.0.0
+**Última actualización**: 2025-12-09

package/claude/settings.local.json

@@ -1,7 +1,72 @@
 {
   "permissions": {
     "allow": [
-      "Bash(npm login)"
-    ]
+      "Bash(claude mcp add:*)",
+      "Bash(where:*)",
+      "Bash(set CLAUDE_CODE_GIT_BASH_PATH=C:UsersssanchezeAppDataLocalProgramsGitusrbinbash.exe)",
+      "Bash(setx CLAUDE_CODE_GIT_BASH_PATH \"C:\\Users\\ssancheze\\AppData\\Local\\Programs\\Git\\usr\\bin\\bash.exe\")",
+      "Bash($env:CLAUDE_CODE_GIT_BASH_PATH=\"C:\\Users\\ssancheze\\AppData\\Local\\Programs\\Git\\usr\\bin\\bash.exe\")",
+      "Bash(export CLAUDE_CODE_GIT_BASH_PATH=\"C:\\Users\\ssancheze\\AppData\\Local\\Programs\\Git\\usr\\bin\\bash.exe\")",
+      "Bash(claude mcp list:*)",
+      "Bash(claude mcp)",
+      "Bash(nul)",
+      "WebSearch",
+      "Bash(cmd /c npx -y figma-developer-mcp --help)",
+      "Bash(npx -y figma-developer-mcp:*)",
+      "Bash(claude mcp get:*)",
+      "Bash(npm install:*)",
+      "Bash(npx tailwindcss init:*)",
+      "Bash(npm run storybook:*)",
+      "Bash(taskkill:*)",
+      "Bash(npx kill-port:*)",
+      "Bash(cmd /c claude mcp add --transport http figma-desktop http://127.0.0.1:3845/mcp)",
+      "Bash(dir \"C:\\Users\\ssancheze\\AppData\\Local\\Programs\\Git\")",
+      "Bash(dir /B:*)",
+      "WebFetch(domain:www.figma.com)",
+      "mcp__figma-desktop__get_design_context",
+      "mcp__figma-desktop__get_variable_defs",
+      "mcp__figma-desktop__get_screenshot",
+      "Bash(npm run build:*)",
+      "Bash(timeout 10 npm run dev:*)",
+      "Bash(npm run dev:*)",
+      "mcp__figma-desktop__get_metadata",
+      "Bash(netstat:*)",
+      "Bash(findstr:*)",
+      "WebFetch(domain:storybook.js.org)",
+      "Bash(if not exist docs mkdir docs)",
+      "Bash(npm uninstall:*)",
+      "Bash(move postcss.config.js postcss.config.cjs)",
+      "Bash(del .storybookpreview.ts)",
+      "Bash(python update_stories.py:*)",
+      "Bash(del update_stories.py)",
+      "Bash(timeout /t 15 /nobreak:*)",
+      "Bash(dir:*)",
+      "Bash(git mv:*)",
+      "mcp__figma__get_metadata",
+      "mcp__figma__get_design_context",
+      "mcp__figma__get_screenshot",
+      "Bash(if not exist \"C:\\Users\\ssancheze\\Desktop\\Dev\\SiesaUIKit\\src\\components\\Navbar\" mkdir \"C:\\Users\\ssancheze\\Desktop\\Dev\\SiesaUIKit\\src\\components\\Navbar\")",
+      "Bash(timeout:*)",
+      "Bash(ping:*)",
+      "Bash(if not exist \"public\" mkdir \"public\")",
+      "Bash(if not exist \"C:\\Users\\ssancheze\\Desktop\\Dev\\SiesaUIKit\\src\\components\\NavigationRail\" mkdir \"C:\\Users\\ssancheze\\Desktop\\Dev\\SiesaUIKit\\src\\components\\NavigationRail\")",
+      "Bash(mkdir:*)",
+      "Bash(find:*)",
+      "Bash(curl:*)",
+      "mcp__figma__get_variable_defs",
+      "Bash(move:*)",
+      "Bash(cmd /c move:*)",
+      "Bash(cmd /c:*)",
+      "Bash(cat:*)",
+      "Bash(git config:*)",
+      "Bash(cmdkey /list:*)",
+      "Bash(git credential:*)",
+      "Bash(git credential-manager:*)",
+      "Bash(printf:*)",
+      "Bash(if not exist \"C:\\Users\\ssancheze\\Desktop\\Dev\\SiesaUIKit\\src\\views\\ListView\" mkdir \"C:\\Users\\ssancheze\\Desktop\\Dev\\SiesaUIKit\\src\\views\\ListView\")",
+      "Bash(npm run build:lib:*)"
+    ],
+    "deny": [],
+    "ask": []
   }
 }

package/dist/components/Button/icons.d.ts

@@ -3,23 +3,24 @@ interface IconProps {
     className?: string;
 }
 /**
- * Icono Plus (heroicons-micro/plus)
+ * Icono Plus (heroicons/plus)
  */
 export declare const PlusIcon: React.FC<IconProps>;
 /**
- * Icono ChevronDown (heroicons-micro/chevron-down)
+ * Icono ChevronDown (heroicons/chevron-down)
  */
 export declare const ChevronDownIcon: React.FC<IconProps>;
 /**
- * Icono ArrowRight (heroicons-micro/arrow-right)
+ * Icono ArrowRight (heroicons/arrow-right)
+ * @param {string} className Clases de Tailwind
  */
 export declare const ArrowRightIcon: React.FC<IconProps>;
 /**
- * Icono Check (heroicons-micro/check)
+ * Icono Check (heroicons/check)
  */
 export declare const CheckIcon: React.FC<IconProps>;
 /**
- * Icono X (heroicons-micro/x-mark)
+ * Icono X (heroicons/x-mark)
  */
 export declare const XIcon: React.FC<IconProps>;
 export {};

package/dist/components/Button/icons.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"icons.d.ts","sourceRoot":"","sources":["../../../src/components/Button/icons.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,UAAU,SAAS;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;GAEG;AACH,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,SAAS,CASxC,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,SAAS,CAa/C,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,SAAS,CAa9C,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,SAAS,CAazC,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,KAAK,EAAE,KAAK,CAAC,EAAE,CAAC,SAAS,CASrC,CAAC"}
+{"version":3,"file":"icons.d.ts","sourceRoot":"","sources":["../../../src/components/Button/icons.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAS1B,UAAU,SAAS;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;GAEG;AACH,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,SAAS,CAExC,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,SAAS,CAE/C,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,SAAS,CAE9C,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,SAAS,CAEzC,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,KAAK,EAAE,KAAK,CAAC,EAAE,CAAC,SAAS,CAErC,CAAC"}

package/dist/components/DropdownItemCollapsible/DropdownItemCollapsible.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DropdownItemCollapsible.d.ts","sourceRoot":"","sources":["../../../src/components/DropdownItemCollapsible/DropdownItemCollapsible.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAC;AACxC,OAAO,KAAK,EACV,4BAA4B,EAE7B,MAAM,iCAAiC,CAAC;AAGzC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+FG;AACH,eAAO,MAAM,uBAAuB,EAAE,KAAK,CAAC,EAAE,CAAC,4BAA4B,CAqL1E,CAAC;AAEF,eAAe,uBAAuB,CAAC"}
+{"version":3,"file":"DropdownItemCollapsible.d.ts","sourceRoot":"","sources":["../../../src/components/DropdownItemCollapsible/DropdownItemCollapsible.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAC;AACxC,OAAO,KAAK,EACV,4BAA4B,EAE7B,MAAM,iCAAiC,CAAC;AAIzC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+FG;AACH,eAAO,MAAM,uBAAuB,EAAE,KAAK,CAAC,EAAE,CAAC,4BAA4B,CAwM1E,CAAC;AAEF,eAAe,uBAAuB,CAAC"}

package/dist/components/DropdownItemCollapsible/DropdownItemCollapsible.types.d.ts

@@ -61,6 +61,27 @@ export interface DropdownItemCollapsibleProps {
      * @default true
      */
     showDivider?: boolean;
+    /**
+     * Si el item está seleccionado (activo)
+     * Útil para NavigationRailTypes en modo expandido
+     * @default false
+     */
+    selected?: boolean;
+    /**
+     * Si mostrar un badge de notificación (dot rojo)
+     * @default false
+     */
+    badge?: boolean;
+    /**
+     * Número a mostrar en el badge (máximo 99+)
+     * Si se proporciona, se muestra en lugar del dot rojo
+     */
+    badgeCount?: number;
+    /**
+     * Color del badge ('red', 'blue', etc.)
+     * @default 'red'
+     */
+    badgeColor?: 'red' | 'blue' | 'amber' | 'green' | 'purple';
     /**
      * Clases CSS adicionales
      */

package/dist/components/DropdownItemCollapsible/DropdownItemCollapsible.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DropdownItemCollapsible.types.d.ts","sourceRoot":"","sources":["../../../src/components/DropdownItemCollapsible/DropdownItemCollapsible.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC;;;;GAIG;AACH,MAAM,WAAW,4BAA4B;IAC3C;;;OAGG;IACH,KAAK,EAAE,MAAM,CAAC;IAEd;;;OAGG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;IAEjB;;;OAGG;IACH,QAAQ,CAAC,EAAE,iCAAiC,EAAE,CAAC;IAE/C;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IAEtB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;;OAGG;IACH,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IAEvC;;;OAGG;IACH,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;IAE3D;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IAExB;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IAEtB;;;;OAIG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IAEtB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;GAEG;AACH,MAAM,WAAW,iCAAiC;IAChD;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IAEd;;OAEG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;IAEjB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;OAEG;IACH,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,cAAc,CAAC,KAAK,IAAI,CAAC;IAExD;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB"}
+{"version":3,"file":"DropdownItemCollapsible.types.d.ts","sourceRoot":"","sources":["../../../src/components/DropdownItemCollapsible/DropdownItemCollapsible.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC;;;;GAIG;AACH,MAAM,WAAW,4BAA4B;IAC3C;;;OAGG;IACH,KAAK,EAAE,MAAM,CAAC;IAEd;;;OAGG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;IAEjB;;;OAGG;IACH,QAAQ,CAAC,EAAE,iCAAiC,EAAE,CAAC;IAE/C;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IAEtB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;;OAGG;IACH,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IAEvC;;;OAGG;IACH,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;IAE3D;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IAExB;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IAEtB;;;;OAIG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IAEtB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;;OAGG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;IAEhB;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IAEpB;;;OAGG;IACH,UAAU,CAAC,EAAE,KAAK,GAAG,MAAM,GAAG,OAAO,GAAG,OAAO,GAAG,QAAQ,CAAC;IAE3D;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;GAEG;AACH,MAAM,WAAW,iCAAiC;IAChD;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IAEd;;OAEG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;IAEjB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;OAEG;IACH,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,cAAc,CAAC,KAAK,IAAI,CAAC;IAExD;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB"}

package/dist/components/NavigationRailCommercial/NavigationRailCommercial.d.ts

@@ -0,0 +1,122 @@
+import React from 'react';
+import type { NavigationRailCommercialProps } from './NavigationRailCommercial.types';
+/**
+ * NavigationRailCommercial del sistema de diseño Siesa
+ *
+ * Componente de navegación lateral especializado para aplicaciones comerciales
+ * que combina NavigationRailTypes y NavigationRailPanel para crear una experiencia
+ * de navegación completa con múltiples estados:
+ *
+ * - **Collapsed**: Barra compacta de 80px con solo iconos
+ * - **Expanded**: Barra expandida de 215px con labels
+ * - **Hover**: Panel lateral con submenú del item (se muestra al hacer hover)
+ * - **Searcher**: Panel lateral con búsqueda y recientes
+ *
+ * **Características:**
+ * - Reutiliza NavigationRailTypes para la barra lateral principal
+ * - Reutiliza NavigationRailPanel para los paneles de hover y búsqueda
+ * - Gestión de estado integrada (collapsed, expanded, hover, searcher)
+ * - Dark mode completo en todos los elementos
+ * - Focus rings adaptativos
+ * - Transiciones suaves entre estados
+ *
+ * **Especificaciones de Figma:**
+ * - NavigationRailTypes: 80px (collapsed) / 215px (expanded)
+ * - NavigationRailPanel: 248px width, altura variable
+ * - Posición panel: left 80px desde el rail
+ * - Transiciones: 300ms ease-in-out
+ *
+ * **Estructura:**
+ * ```
+ * ┌────────────────────────────────────┐
+ * │  NavigationRailCommercial          │
+ * │  ┌──────────┬─────────────────┐   │
+ * │  │  Rail    │  Panel          │   │
+ * │  │  Types   │  (hover/search) │   │
+ * │  │  (base)  │  (opcional)     │   │
+ * │  └──────────┴─────────────────┘   │
+ * └────────────────────────────────────┘
+ * ```
+ *
+ * **Estados de Items:**
+ * - `default`: Sin interacción
+ * - `hover`: Muestra panel con submenú (si tiene children)
+ * - `active`: Item seleccionado, fondo custom-primary
+ * - `disabled`: Opacity 50%, sin interacción
+ *
+ * **Colores (Light Mode):**
+ * - Background rail: #ffffff (bg-primary)
+ * - Background panel: #ffffff (bg-primary)
+ * - Borders: #e4e4e7 (border-primary)
+ * - Text: #18181b (content-primary)
+ * - Icons: #a1a1aa (content-secondary)
+ * - Search button: #0e79fd (primary-custom-600)
+ *
+ * **Colores (Dark Mode):**
+ * - Background rail: #18181b (dark-bg-primary)
+ * - Background panel: #18181b (dark-bg-primary)
+ * - Borders: #71717a (dark-border-primary)
+ * - Text: #f4f4f5 (dark-content-primary)
+ * - Icons: #a1a1aa (content-secondary)
+ *
+ * **Tipografía:**
+ * - Items: Paragraph/Small (14px Regular, line-height 20px)
+ * - Panel heading: Label/Small (14px Bold)
+ * - Section headings: Paragraph/Tiny (12px Regular)
+ *
+ * **Implementación de Estados:**
+ * - `collapsed` + hover en item → state='hover' + muestra panel
+ * - `collapsed` + click en search → state='searcher' + muestra panel búsqueda
+ * - `expanded` → NavigationRailTypes expandido con Input integrado
+ * - Click en "Colapsar" → vuelve a collapsed
+ *
+ * @see docs/colors.md - Sistema de colores
+ * @see docs/typography.md - Sistema tipográfico
+ * @see docs/spacing.md - Sistema de espaciado
+ * @see ../NavigationRailTypes - Componente reutilizado para barra lateral
+ * @see ../NavigationRailPanel - Componente reutilizado para paneles
+ * @see https://www.figma.com/design/5XNqf2YTxvwemxwo1LMQ6j/Siesa-UI-Kit?node-id=6146-34487
+ *
+ * @example
+ * ```tsx
+ * // Uso básico en modo collapsed
+ * const items = [
+ *   {
+ *     id: 'admin',
+ *     label: 'Administración',
+ *     icon: <Cog6ToothIcon />,
+ *     isCollapsible: true,
+ *     children: [
+ *       { id: 'users', label: 'Usuarios' },
+ *       { id: 'roles', label: 'Roles' },
+ *     ],
+ *   },
+ *   {
+ *     id: 'sales',
+ *     label: 'Ventas',
+ *     icon: <ShoppingCartIcon />,
+ *   },
+ * ];
+ *
+ * <NavigationRailCommercial
+ *   state="collapsed"
+ *   items={items}
+ *   onItemClick={(item) => console.log('Clicked:', item.label)}
+ *   onItemHover={(item) => console.log('Hover:', item.label)}
+ * />
+ *
+ * // Uso con control de estado externo
+ * const [state, setState] = useState('collapsed');
+ *
+ * <NavigationRailCommercial
+ *   state={state}
+ *   items={items}
+ *   onStateChange={setState}
+ * />
+ * ```
+ *
+ * @see NavigationRailCommercial.types.ts - Props e interfaces
+ */
+export declare const NavigationRailCommercial: React.ForwardRefExoticComponent<NavigationRailCommercialProps & React.RefAttributes<HTMLDivElement>>;
+export default NavigationRailCommercial;
+//# sourceMappingURL=NavigationRailCommercial.d.ts.map

package/dist/components/NavigationRailCommercial/NavigationRailCommercial.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"NavigationRailCommercial.d.ts","sourceRoot":"","sources":["../../../src/components/NavigationRailCommercial/NavigationRailCommercial.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAC;AACxC,OAAO,KAAK,EACV,6BAA6B,EAE9B,MAAM,kCAAkC,CAAC;AAK1C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoHG;AACH,eAAO,MAAM,wBAAwB,sGA0KpC,CAAC;AAIF,eAAe,wBAAwB,CAAC"}

package/dist/components/NavigationRailCommercial/NavigationRailCommercial.types.d.ts

@@ -0,0 +1,139 @@
+import type { ReactNode } from 'react';
+/**
+ * Definición de un item de menú para el NavigationRailCommercial
+ */
+export interface NavigationRailCommercialMenuItem {
+    /**
+     * Identificador único del item
+     */
+    id: string;
+    /**
+     * Etiqueta/texto del item (visible en modo expanded)
+     */
+    label: string;
+    /**
+     * Icono del item (16x16px recomendado)
+     */
+    icon: ReactNode;
+    /**
+     * Si el item es colapsable (tiene submenu)
+     * @default false
+     */
+    isCollapsible?: boolean;
+    /**
+     * Items hijos (solo si isCollapsible es true)
+     */
+    children?: NavigationRailCommercialMenuItem[];
+    /**
+     * Si el item colapsable está abierto por defecto (solo si isCollapsible es true)
+     * @default false
+     */
+    defaultOpen?: boolean;
+    /**
+     * Si el item está seleccionado/activo
+     * @default false
+     */
+    active?: boolean;
+    /**
+     * Si el item está deshabilitado
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Callback cuando se hace click en el item
+     */
+    onClick?: () => void;
+    /**
+     * Badge de notificación
+     * @default false
+     */
+    badge?: boolean;
+    /**
+     * Contador de notificaciones (si badge es true)
+     */
+    badgeCount?: number;
+}
+/**
+ * Props del componente NavigationRailCommercial
+ *
+ * @see https://www.figma.com/design/5XNqf2YTxvwemxwo1LMQ6j/Siesa-UI-Kit?node-id=6146-34487
+ */
+export interface NavigationRailCommercialProps {
+    /**
+     * Estado del rail:
+     * - `collapsed`: 80px width, solo iconos
+     * - `expanded`: 215px width, con labels
+     * - `hover`: muestra panel lateral con submenu (estado temporal)
+     * - `searcher`: muestra panel lateral con búsqueda (estado temporal)
+     * @default 'collapsed'
+     */
+    state?: 'collapsed' | 'expanded' | 'hover' | 'searcher';
+    /**
+     * Items de menú a mostrar en la barra
+     */
+    items?: NavigationRailCommercialMenuItem[];
+    /**
+     * Panel lateral que se muestra en estados hover/searcher
+     * Contiene el menú detallado del item seleccionado
+     */
+    panelContent?: {
+        /**
+         * Título del panel (ej: "Administración")
+         */
+        heading?: string;
+        /**
+         * Items del panel
+         */
+        items?: NavigationRailCommercialMenuItem[];
+    };
+    /**
+     * Callback cuando cambia el estado del rail
+     * @param state - nuevo estado
+     */
+    onStateChange?: (state: NavigationRailCommercialProps['state']) => void;
+    /**
+     * Callback cuando se hace click en un item
+     * @param item - item clickeado
+     */
+    onItemClick?: (item: NavigationRailCommercialMenuItem) => void;
+    /**
+     * Callback cuando se hace hover en un item (para mostrar panel)
+     * @param item - item con hover
+     */
+    onItemHover?: (item: NavigationRailCommercialMenuItem) => void;
+    /**
+     * Labels de internacionalización
+     */
+    labels?: {
+        /**
+         * Placeholder del input de búsqueda
+         * @default 'Buscar módulo'
+         */
+        searchPlaceholder?: string;
+        /**
+         * Label del botón colapsar
+         * @default 'Colapsar'
+         */
+        collapseButton?: string;
+        /**
+         * Label sección recientes (panel búsqueda)
+         * @default 'Recientes'
+         */
+        recentSection?: string;
+        /**
+         * Label sección opciones frecuentes (panel búsqueda)
+         * @default 'Opciones frecuentes'
+         */
+        frequentSection?: string;
+    };
+    /**
+     * Clases CSS adicionales
+     */
+    className?: string;
+    /**
+     * Si mostrar el botón de búsqueda (en modo collapsed)
+     * @default true
+     */
+    showSearchButton?: boolean;
+}
+//# sourceMappingURL=NavigationRailCommercial.types.d.ts.map

package/dist/components/NavigationRailCommercial/NavigationRailCommercial.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"NavigationRailCommercial.types.d.ts","sourceRoot":"","sources":["../../../src/components/NavigationRailCommercial/NavigationRailCommercial.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC;;GAEG;AACH,MAAM,WAAW,gCAAgC;IAC/C;;OAEG;IACH,EAAE,EAAE,MAAM,CAAC;IAEX;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IAEd;;OAEG;IACH,IAAI,EAAE,SAAS,CAAC;IAEhB;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IAExB;;OAEG;IACH,QAAQ,CAAC,EAAE,gCAAgC,EAAE,CAAC;IAE9C;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IAEtB;;;OAGG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IAEjB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IAErB;;;OAGG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;IAEhB;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED;;;;GAIG;AACH,MAAM,WAAW,6BAA6B;IAC5C;;;;;;;OAOG;IACH,KAAK,CAAC,EAAE,WAAW,GAAG,UAAU,GAAG,OAAO,GAAG,UAAU,CAAC;IAExD;;OAEG;IACH,KAAK,CAAC,EAAE,gCAAgC,EAAE,CAAC;IAE3C;;;OAGG;IACH,YAAY,CAAC,EAAE;QACb;;WAEG;QACH,OAAO,CAAC,EAAE,MAAM,CAAC;QAEjB;;WAEG;QACH,KAAK,CAAC,EAAE,gCAAgC,EAAE,CAAC;KAC5C,CAAC;IAEF;;;OAGG;IACH,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,6BAA6B,CAAC,OAAO,CAAC,KAAK,IAAI,CAAC;IAExE;;;OAGG;IACH,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,gCAAgC,KAAK,IAAI,CAAC;IAE/D;;;OAGG;IACH,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,gCAAgC,KAAK,IAAI,CAAC;IAE/D;;OAEG;IACH,MAAM,CAAC,EAAE;QACP;;;WAGG;QACH,iBAAiB,CAAC,EAAE,MAAM,CAAC;QAE3B;;;WAGG;QACH,cAAc,CAAC,EAAE,MAAM,CAAC;QAExB;;;WAGG;QACH,aAAa,CAAC,EAAE,MAAM,CAAC;QAEvB;;;WAGG;QACH,eAAe,CAAC,EAAE,MAAM,CAAC;KAC1B,CAAC;IAEF;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;;OAGG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;CAC5B"}

package/dist/components/NavigationRailCommercial/icons.d.ts

@@ -0,0 +1,33 @@
+import React from 'react';
+/**
+ * Iconos estándar para NavigationRailCommercial
+ * Basados en Heroicons 20x20 solid (excepto ClockIcon que es 24x24 outline)
+ * Consistente con NavigationRailTypes
+ *
+ * @see docs/icons.md - Sistema de iconos del proyecto
+ */
+export declare const MagnifyingGlassIcon: React.FC<{
+    className?: string;
+}>;
+export declare const ChevronRightIcon: React.FC<{
+    className?: string;
+}>;
+export declare const ChevronLeftIcon: React.FC<{
+    className?: string;
+}>;
+export declare const Cog6ToothIcon: React.FC<{
+    className?: string;
+}>;
+export declare const ShoppingCartIcon: React.FC<{
+    className?: string;
+}>;
+export declare const CubeIcon: React.FC<{
+    className?: string;
+}>;
+export declare const DocumentIcon: React.FC<{
+    className?: string;
+}>;
+export declare const ClockIcon: React.FC<{
+    className?: string;
+}>;
+//# sourceMappingURL=icons.d.ts.map

package/dist/components/NavigationRailCommercial/icons.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"icons.d.ts","sourceRoot":"","sources":["../../../src/components/NavigationRailCommercial/icons.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAe1B;;;;;;GAMG;AAEH,eAAO,MAAM,mBAAmB,EAAE,KAAK,CAAC,EAAE,CAAC;IAAE,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,CAEhE,CAAC;AAEF,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,EAAE,CAAC;IAAE,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,CAE7D,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC;IAAE,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,CAE5D,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC;IAAE,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,CAE1D,CAAC;AAEF,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,EAAE,CAAC;IAAE,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,CAE7D,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC;IAAE,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,CAErD,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC;IAAE,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,CAEzD,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC;IAAE,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,CAEtD,CAAC"}

package/dist/components/NavigationRailCommercial/index.d.ts

@@ -0,0 +1,4 @@
+export { NavigationRailCommercial } from './NavigationRailCommercial';
+export type { NavigationRailCommercialProps, NavigationRailCommercialMenuItem, } from './NavigationRailCommercial.types';
+export * from './icons';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/NavigationRailCommercial/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/NavigationRailCommercial/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,wBAAwB,EAAE,MAAM,4BAA4B,CAAC;AACtE,YAAY,EACV,6BAA6B,EAC7B,gCAAgC,GACjC,MAAM,kCAAkC,CAAC;AAC1C,cAAc,SAAS,CAAC"}

package/dist/components/NavigationRailItem/NavigationRailItem.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"NavigationRailItem.d.ts","sourceRoot":"","sources":["../../../src/components/NavigationRailItem/NavigationRailItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,4BAA4B,CAAC;AAE1E;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqFG;AACH,eAAO,MAAM,kBAAkB,EAAE,KAAK,CAAC,EAAE,CAAC,uBAAuB,CA6NhE,CAAC"}
+{"version":3,"file":"NavigationRailItem.d.ts","sourceRoot":"","sources":["../../../src/components/NavigationRailItem/NavigationRailItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,4BAA4B,CAAC;AAE1E;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqFG;AACH,eAAO,MAAM,kBAAkB,EAAE,KAAK,CAAC,EAAE,CAAC,uBAAuB,CA8NhE,CAAC"}

package/dist/components/NavigationRailItem/NavigationRailItem.types.d.ts

@@ -100,6 +100,13 @@ export interface NavigationRailItemProps {
      * incluso si está en estado selected.
      */
     onClick?: () => void;
+    /**
+     * Handler para evento mouse enter del item
+     *
+     * Se ejecuta cuando el cursor entra en el área del item.
+     * Útil para mostrar paneles o menús contextuales.
+     */
+    onMouseEnter?: () => void;
     /**
      * Label para accesibilidad (ARIA-label)
      *

package/dist/components/NavigationRailItem/NavigationRailItem.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"NavigationRailItem.types.d.ts","sourceRoot":"","sources":["../../../src/components/NavigationRailItem/NavigationRailItem.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AACH,MAAM,WAAW,uBAAuB;IACtC;;;;;;;;;;OAUG;IACH,IAAI,EAAE,SAAS,CAAC;IAEhB;;;;;;OAMG;IACH,KAAK,EAAE,MAAM,CAAC;IAEd;;;;;;;;;OASG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;;;;;;;;OASG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;;;;;;;;OASG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;IAEhB;;;;;;;;;;OAUG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IAEpB;;;;;OAKG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IAErB;;;;;;;OAOG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;;;;;;;OAQG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;IAEZ;;;;;;OAMG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IAExB;;;;;;OAMG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;;;OAIG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;;;;GAQG;AACH,MAAM,MAAM,uBAAuB,GAAG,SAAS,GAAG,OAAO,GAAG,UAAU,GAAG,OAAO,GAAG,UAAU,CAAC"}
+{"version":3,"file":"NavigationRailItem.types.d.ts","sourceRoot":"","sources":["../../../src/components/NavigationRailItem/NavigationRailItem.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AACH,MAAM,WAAW,uBAAuB;IACtC;;;;;;;;;;OAUG;IACH,IAAI,EAAE,SAAS,CAAC;IAEhB;;;;;;OAMG;IACH,KAAK,EAAE,MAAM,CAAC;IAEd;;;;;;;;;OASG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;;;;;;;;OASG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;;;;;;;;OASG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;IAEhB;;;;;;;;;;OAUG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IAEpB;;;;;OAKG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IAErB;;;;;OAKG;IACH,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAE1B;;;;;;;OAOG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;;;;;;;OAQG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;IAEZ;;;;;;OAMG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IAExB;;;;;;OAMG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;;;OAIG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;;;;GAQG;AACH,MAAM,MAAM,uBAAuB,GAAG,SAAS,GAAG,OAAO,GAAG,UAAU,GAAG,OAAO,GAAG,UAAU,CAAC"}

package/dist/components/NavigationRailTypes/NavigationRailTypes.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"NavigationRailTypes.d.ts","sourceRoot":"","sources":["../../../src/components/NavigationRailTypes/NavigationRailTypes.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAC;AACxC,OAAO,KAAK,EAAE,wBAAwB,EAAsB,MAAM,6BAA6B,CAAC;AAMhG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6FG;AACH,eAAO,MAAM,mBAAmB,iGAgR/B,CAAC;AAIF,eAAe,mBAAmB,CAAC"}
+{"version":3,"file":"NavigationRailTypes.d.ts","sourceRoot":"","sources":["../../../src/components/NavigationRailTypes/NavigationRailTypes.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAC;AACxC,OAAO,KAAK,EAAE,wBAAwB,EAAsB,MAAM,6BAA6B,CAAC;AAQhG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6FG;AACH,eAAO,MAAM,mBAAmB,iGA+P/B,CAAC;AAIF,eAAe,mBAAmB,CAAC"}