siesa-ui-kit 1.0.5 → 1.0.7

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

@@ -0,0 +1,92 @@
+import type { ReactNode } from 'react';
+/**
+ * Props para NavigationRailItem
+ */
+export interface NavigationRailItemProps {
+    /**
+     * Icono a mostrar en el item
+     */
+    icon: ReactNode;
+    /**
+     * Label del item de navegación
+     */
+    label: string;
+    /**
+     * Si el item está seleccionado actualmente
+     * @default false
+     */
+    selected?: boolean;
+    /**
+     * Si el item está deshabilitado
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Mostrar badge de notificación (dot rojo)
+     * @default false
+     */
+    badge?: boolean;
+    /**
+     * Número a mostrar en el badge (reemplaza el dot)
+     */
+    badgeCount?: number;
+    /**
+     * Handler para evento click
+     */
+    onClick?: () => void;
+    /**
+     * Label para accesibilidad (ARIA)
+     */
+    ariaLabel?: string;
+    /**
+     * ID único del item (para navegación)
+     */
+    id?: string;
+}
+/**
+ * Props del componente NavigationRail
+ */
+export interface NavigationRailProps {
+    /**
+     * Items de navegación a mostrar
+     */
+    items: NavigationRailItemProps[];
+    /**
+     * Alineación vertical de los items
+     * - `top`: Items alineados arriba (debajo del FAB)
+     * - `center`: Items centrados verticalmente
+     * - `bottom`: Items alineados abajo
+     * @default 'top'
+     */
+    alignment?: 'top' | 'center' | 'bottom';
+    /**
+     * Mostrar botón FAB (Floating Action Button) en la parte superior
+     * @default false
+     */
+    showFab?: boolean;
+    /**
+     * Icono del botón FAB
+     */
+    fabIcon?: ReactNode;
+    /**
+     * Handler para click en el FAB
+     */
+    onFabClick?: () => void;
+    /**
+     * Label del FAB para accesibilidad
+     */
+    fabAriaLabel?: string;
+    /**
+     * Clases CSS adicionales para el contenedor
+     */
+    className?: string;
+    /**
+     * ID del item seleccionado actualmente
+     */
+    selectedId?: string;
+    /**
+     * Handler cuando se selecciona un item
+     */
+    onItemSelect?: (id: string) => void;
+}
+//# sourceMappingURL=NavigationRail.types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"NavigationRail.types.d.ts","sourceRoot":"","sources":["../../../src/components/NavigationRail/NavigationRail.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC;;GAEG;AACH,MAAM,WAAW,uBAAuB;IACtC;;OAEG;IACH,IAAI,EAAE,SAAS,CAAC;IAEhB;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IAEd;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;;OAGG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;IAEhB;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IAEpB;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IAErB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;OAEG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;CACb;AAED;;GAEG;AACH,MAAM,WAAW,mBAAmB;IAClC;;OAEG;IACH,KAAK,EAAE,uBAAuB,EAAE,CAAC;IAEjC;;;;;;OAMG;IACH,SAAS,CAAC,EAAE,KAAK,GAAG,QAAQ,GAAG,QAAQ,CAAC;IAExC;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB;;OAEG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC;IAEpB;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;IAExB;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IAEpB;;OAEG;IACH,YAAY,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;CACrC"}

package/{src/components/NavigationRail/index.ts → dist/components/NavigationRail/index.d.ts}

@@ -1,2 +1,3 @@
-export { NavigationRail } from './NavigationRail';
-export type { NavigationRailProps, NavigationRailItemProps } from './NavigationRail.types';
+export { NavigationRail } from './NavigationRail';
+export type { NavigationRailProps, NavigationRailItemProps } from './NavigationRail.types';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/NavigationRail/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAClD,YAAY,EAAE,mBAAmB,EAAE,uBAAuB,EAAE,MAAM,wBAAwB,CAAC"}

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

@@ -0,0 +1,90 @@
+import React from 'react';
+import type { NavigationRailItemProps } from './NavigationRailItem.types';
+/**
+ * NavigationRailItem - Componente independiente para items de NavigationRail
+ *
+ * Item individual de navegación vertical (rail) para aplicaciones. Proporciona
+ * un punto de acceso a destinos mediante un icono, label opcional y badges.
+ *
+ * **Características principales:**
+ * - Ancho fijo de 56px según Figma
+ * - Estados completos: normal, hover, selected, focus, disabled
+ * - Badges de notificación con contador opcional
+ * - Tipografía Label XXSmall (10px Bold) según sistema de diseño
+ * - Dark mode completo con estrategia 'class'
+ * - Focus rings adaptativos para accesibilidad
+ * - Soporte para iconos 16x16px
+ *
+ * **Especificaciones de Figma (node 4294-22931):**
+ * - Ancho: 56px (w-14)
+ * - Icon container: 32px altura, px-4 py-1, rounded-full
+ * - Label: 10px Bold, leading 12px (Label XXSmall)
+ * - Gap: 4px (gap-1)
+ * - Badge: 13x13px, posición absolute
+ *
+ * **Estados visuales (según Figma):**
+ * - **Enabled**: Icon transparent, label text-content-primary
+ * - **Hover**: Icon container bg-primary-custom-100 (#dbeefe), icon text-primary-custom-600
+ * - **Selected**: Icon container bg-primary-custom-100 con overlay, icon text-primary-custom-600
+ * - **Focus**: Focus ring 2px (#60b6fa) con offset 2px (#dbeefe), sombras combinadas
+ * - **Disabled**: Opacity 55%, no interactivo
+ *
+ * **Dark Mode:**
+ * - Background: dark-bg-primary
+ * - Hover icon container: dark-bg-primary/20
+ * - Selected icon container: dark-primary-custom-600/30
+ * - Icon colors: dark-content-primary, dark-white on selected
+ * - Focus ring: dark-border-custom
+ *
+ * **Mejores prácticas implementadas:**
+ * - Orden de modificadores: {responsive}:{dark}:{state}:{utility}
+ * - Tokens de color consistentes con documentación
+ * - Accesibilidad ARIA completa
+ * - Focus visible para keyboard navigation
+ * - Badge positioning absoluto para no afectar layout
+ *
+ * @see docs/colors.md - Sistema de colores (primary-custom, dark-*, content-*)
+ * @see docs/typography.md - Tipografía (Label XXSmall)
+ * @see docs/spacing.md - Sistema de espaciado
+ * @see docs/shadows.md - Sistema de sombras y focus rings
+ * @see https://www.figma.com/design/5XNqf2YTxvwemxwo1LMQ6j/Siesa-UI-Kit?node-id=4294-22931
+ *
+ * @example
+ * ```tsx
+ * // Item básico
+ * <NavigationRailItem
+ *   id="home"
+ *   icon={<HomeIcon />}
+ *   label="Inicio"
+ *   selected={true}
+ *   onClick={() => navigate('/')}
+ * />
+ *
+ * // Con badge de notificación
+ * <NavigationRailItem
+ *   id="notifications"
+ *   icon={<BellIcon />}
+ *   label="Notificaciones"
+ *   badgeCount={5}
+ *   onClick={() => navigate('/notifications')}
+ * />
+ *
+ * // Item deshabilitado
+ * <NavigationRailItem
+ *   id="premium"
+ *   icon={<StarIcon />}
+ *   label="Premium"
+ *   disabled={true}
+ * />
+ *
+ * // Solo icono (sin label)
+ * <NavigationRailItem
+ *   id="home"
+ *   icon={<HomeIcon />}
+ *   label="Inicio"
+ *   showLabelText={false}
+ * />
+ * ```
+ */
+export declare const NavigationRailItem: React.FC<NavigationRailItemProps>;
+//# sourceMappingURL=NavigationRailItem.d.ts.map

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

@@ -0,0 +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"}

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

@@ -0,0 +1,155 @@
+import type { ReactNode } from 'react';
+/**
+ * Props para NavigationRailItem
+ *
+ * Componente independiente para items individuales de NavigationRail.
+ * Implementación pixel-perfect según Figma (node 4294-22931).
+ *
+ * **Estados:**
+ * - `Enabled`: Estado normal del item
+ * - `Hover`: Overlay de color en el icon container
+ * - `Selected`: Background con overlay según Figma
+ * - `Focus`: Focus ring de 4px (#60b6fa) con offset de 2px (#dbeefe)
+ * - `Disabled`: Opacity 55% con pointer-events-none
+ *
+ * **Especificaciones de Figma:**
+ * - Ancho: 56px (w-14)
+ * - Altura: auto (flex-col)
+ * - Gap: 4px entre icon y label
+ * - Padding: 2px horizontal, 0px vertical (px-0.5)
+ * - Border radius: 9999px (rounded-full) en icon container
+ * - Tipografía label: Label XXSmall (10px Bold, leading 12px)
+ * - Icono: 16x16px
+ *
+ * @see https://www.figma.com/design/5XNqf2YTxvwemxwo1LMQ6j/Siesa-UI-Kit?node-id=4294-22931
+ * @see docs/colors.md - Sistema de colores
+ * @see docs/typography.md - Sistema tipográfico (Label XXSmall)
+ * @see docs/spacing.md - Sistema de espaciado
+ * @see docs/shadows.md - Sistema de sombras (focus ring)
+ */
+export interface NavigationRailItemProps {
+    /**
+     * Icono a mostrar en el item
+     * Tamaño recomendado: 16x16px
+     * Tipos compatibles: ReactNode, SVG, Heroicons, etc.
+     *
+     * @example
+     * ```tsx
+     * import { HomeIcon } from '@heroicons/react/24/outline';
+     * <NavigationRailItem icon={<HomeIcon />} />
+     * ```
+     */
+    icon: ReactNode;
+    /**
+     * Label/texto del item de navegación
+     * Se muestra debajo del icono en tipografía Label XXSmall
+     *
+     * @example
+     * <NavigationRailItem label="Inicio" />
+     */
+    label: string;
+    /**
+     * Si el item está seleccionado actualmente
+     *
+     * Estado visual:
+     * - Background: bg-primary-custom-100 (#dbeefe) con overlay rgba(0,0,0,0.024)
+     * - Icono: text-primary-custom-600 (#0e79fd)
+     * - Label: text-content-primary
+     *
+     * @default false
+     */
+    selected?: boolean;
+    /**
+     * Si el item está deshabilitado
+     *
+     * Estado visual:
+     * - Opacity: 55%
+     * - Cursor: not-allowed
+     * - Pointer-events: none
+     *
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Mostrar badge de notificación (dot rojo)
+     *
+     * El badge se posiciona en la esquina superior derecha del icon container.
+     * Tamaño: 13x13px
+     * Color: #b91c1c (red-700)
+     * Posición: left-[34px], top-[-3px]
+     *
+     * @default false
+     */
+    badge?: boolean;
+    /**
+     * Número a mostrar en el badge (reemplaza el dot simple)
+     *
+     * Si el número es mayor a 99, muestra "99+"
+     * Tipografía: 10px Bold
+     * Color: white (#ffffff)
+     *
+     * @example
+     * <NavigationRailItem badgeCount={5} />  // Muestra: 5
+     * <NavigationRailItem badgeCount={150} /> // Muestra: 99+
+     */
+    badgeCount?: number;
+    /**
+     * Handler para evento click del item
+     *
+     * Se ejecuta cuando el usuario hace click en el item,
+     * incluso si está en estado selected.
+     */
+    onClick?: () => void;
+    /**
+     * Label para accesibilidad (ARIA-label)
+     *
+     * Si no se proporciona, usa el valor de `label`
+     *
+     * @example
+     * <NavigationRailItem label="Inicio" ariaLabel="Ir a la página de inicio" />
+     */
+    ariaLabel?: string;
+    /**
+     * ID único del item
+     *
+     * Usado para identificar el item en callbacks y para navegación.
+     * Se añade como atributo data-item-id en el elemento DOM.
+     *
+     * @example
+     * <NavigationRailItem id="home" label="Inicio" />
+     */
+    id?: string;
+    /**
+     * Mostrar el label del texto
+     *
+     * Si es false, solo se muestra el icono
+     *
+     * @default true
+     */
+    showLabelText?: boolean;
+    /**
+     * Mostrar icono
+     *
+     * Si es false, solo se muestra el label
+     *
+     * @default true
+     */
+    showIcon?: boolean;
+    /**
+     * Clases CSS adicionales personalizadas
+     *
+     * Se aplican al contenedor principal (button)
+     */
+    className?: string;
+}
+/**
+ * Estados posibles del componente según Figma
+ *
+ * - `Enabled`: Estado normal, sin interacción
+ * - `Hover`: Mouse over el item
+ * - `Selected`: Item actualmente seleccionado
+ * - `Focus`: Keyboard focus (accesibilidad)
+ * - `Disabled`: Item deshabilitado, no interactivo
+ */
+export type NavigationRailItemState = 'Enabled' | 'Hover' | 'Selected' | 'Focus' | 'Disabled';
+//# sourceMappingURL=NavigationRailItem.types.d.ts.map

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

@@ -0,0 +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"}

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

@@ -0,0 +1,3 @@
+export { NavigationRailItem } from './NavigationRailItem';
+export type { NavigationRailItemProps, NavigationRailItemState } from './NavigationRailItem.types';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/NavigationRailItem/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAC1D,YAAY,EAAE,uBAAuB,EAAE,uBAAuB,EAAE,MAAM,4BAA4B,CAAC"}

package/dist/components/NavigationRailPanel/NavigationRailPanel.d.ts

@@ -0,0 +1,124 @@
+import React from 'react';
+import type { NavigationRailPanelProps } from './NavigationRailPanel.types';
+/**
+ * Componente NavigationRailPanel del sistema de diseño Siesa
+ *
+ * Panel de navegación vertical (rail) que puede contener múltiples secciones
+ * de items, búsqueda y encabezados. Se usa típicamente en aplicaciones con
+ * navegación compleja que requieren una estructura jerárquica.
+ *
+ * **Estructura principal:**
+ * 1. Encabezado (DropdownItemHeading) - Opcional
+ * 2. Input de búsqueda - Opcional
+ * 3. Divisor - Siempre presente después de búsqueda/encabezado
+ * 4. Body con secciones de items:
+ *    - Heading de sección (Paragraph/Tiny, content-tertiary)
+ *    - Items colapsables (DropdownItemCollapsible) o simples
+ *    - Divisor entre secciones
+ *
+ * **Dimensiones según Figma:**
+ * - Altura: Variable (por defecto 900px)
+ * - Ancho del panel: 248px (con padding 12px)
+ * - Ancho de contenido: 224px
+ * - Padding del panel: 12px
+ * - Padding del body: 12px
+ * - Border: 1px left (border-primary)
+ * - Border radius: 0px (es un panel recto)
+ *
+ * **Tipografía:**
+ * - Heading (DropdownItemHeading): Label/Small (14px Bold)
+ * - Section heading: Paragraph/Tiny (12px Regular) - content-tertiary
+ * - Items: Paragraph/Small (14px Regular)
+ *
+ * **Colores (Light Mode):**
+ * - Background: #ffffff (white)
+ * - Border: #e4e4e7 (border-primary)
+ * - Heading text: #18181b (content-primary)
+ * - Section heading: #71717a (content-tertiary)
+ * - Item text: #18181b (content-primary)
+ * - Icon color: #a1a1aa (content-secondary)
+ *
+ * **Colores (Dark Mode):**
+ * - Background: #18181b (dark bg)
+ * - Border: #3f3f46 (border-primary/dark)
+ * - Heading text: #fafafa (content-primary/dark)
+ * - Section heading: #a1a1aa (content-tertiary/dark)
+ * - Item text: #fafafa (content-primary/dark)
+ * - Icon color: #a1a1aa (content-secondary/dark)
+ *
+ * **Estados:**
+ * - Default: Sin interacción
+ * - Hover: Items con hover overlay sutil
+ * - Focus: Focus ring adaptativo
+ * - Disabled: Opacidad 50%
+ * - Active (items colapsables): Expanded state
+ *
+ * **Espaciado interno:**
+ * - Gap entre section heading e items: 0.5 (2px)
+ * - Gap entre items: 0.5 (2px)
+ * - Gap entre elemento y contenido: 3 (12px)
+ * - Padding vertical section heading: pt-3 pb-1 (12px top, 4px bottom)
+ * - Padding items: py-2 px-4 (8px vertical, 16px horizontal)
+ *
+ * **Scroll:**
+ * - El body es scrolleable verticalmente (overflow-y-auto)
+ * - El encabezado y búsqueda se mantienen fijos en el tope
+ *
+ * @see docs/colors.md - Sistema de colores
+ * @see docs/typography.md - Sistema tipográfico
+ * @see docs/spacing.md - Sistema de espaciado
+ * @see docs/shadows.md - Sistema de sombras
+ * @see ../DropdownItemHeading - Componente reutilizado para encabezado
+ * @see ../DropdownItemCollapsible - Componente reutilizado para items colapsables
+ * @see ../Input - Componente reutilizado para búsqueda
+ * @see ../Divider - Componente reutilizado para separadores
+ * @see https://www.figma.com/design/5XNqf2YTxvwemxwo1LMQ6j/Siesa-UI-Kit?node-id=6134-34415 - Diseño Figma
+ *
+ * @example
+ * ```tsx
+ * // Ejemplo simple con secciones
+ * <NavigationRailPanel
+ *   height={900}
+ *   showHeading={true}
+ *   heading={{
+ *     label: 'Settings',
+ *     description: 'Configure your preferences',
+ *     iconName: 'cog-6-tooth',
+ *     actionLabel: 'Clear',
+ *     showAction: true,
+ *   }}
+ *   showSearch={true}
+ *   search={{
+ *     placeholder: 'Buscar módulo',
+ *   }}
+ *   sections={[
+ *     {
+ *       heading: 'Section 1',
+ *       items: [
+ *         { label: 'Item 1', isCollapsible: true, children: [...] },
+ *         { label: 'Item 2', isCollapsible: false },
+ *       ],
+ *     },
+ *     {
+ *       heading: 'Section 2',
+ *       items: [
+ *         { label: 'Item 3' },
+ *       ],
+ *     },
+ *   ]}
+ * />
+ *
+ * // Ejemplo con items simples sin secciones
+ * <NavigationRailPanel
+ *   showHeading={false}
+ *   showSearch={true}
+ *   items={[
+ *     { label: 'Dashboard', icon: <DashboardIcon /> },
+ *     { label: 'Users', icon: <UserIcon /> },
+ *     { label: 'Settings', icon: <SettingsIcon /> },
+ *   ]}
+ * />
+ * ```
+ */
+export declare const NavigationRailPanel: React.FC<NavigationRailPanelProps>;
+//# sourceMappingURL=NavigationRailPanel.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"NavigationRailPanel.d.ts","sourceRoot":"","sources":["../../../src/components/NavigationRailPanel/NavigationRailPanel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAC;AACxC,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,6BAA6B,CAAC;AAM5E;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAuHG;AACH,eAAO,MAAM,mBAAmB,EAAE,KAAK,CAAC,EAAE,CAAC,wBAAwB,CAiIlE,CAAC"}

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

@@ -0,0 +1,154 @@
+import type { ReactNode } from 'react';
+import type { DropdownItemCollapsibleChildProps } from '../DropdownItemCollapsible/DropdownItemCollapsible.types';
+/**
+ * Props de la sección de items dentro del NavigationRailPanel
+ */
+export interface NavigationRailPanelSectionProps {
+    /**
+     * Encabezado de la sección (label del heading)
+     * Ejemplo: "Categorías", "Departamentos", "Opciones"
+     */
+    heading?: string;
+    /**
+     * Items que se muestran en la sección
+     * Pueden ser items simples o items colapsables
+     */
+    items: NavigationRailPanelItemProps[];
+    /**
+     * Si mostrar divisor después de esta sección
+     * @default true
+     */
+    showDivider?: boolean;
+    /**
+     * Clases CSS adicionales
+     */
+    className?: string;
+}
+/**
+ * Props de un item individual dentro del NavigationRailPanel
+ */
+export interface NavigationRailPanelItemProps {
+    /**
+     * Texto o contenido principal del item
+     * Ejemplo: "Users", "Settings", "Help"
+     */
+    label: string;
+    /**
+     * Icono a mostrar antes del texto (izquierda)
+     * Recomendado: 16x16px
+     */
+    icon?: ReactNode;
+    /**
+     * Si el item es colapsable (muestra items anidados)
+     * @default false
+     */
+    isCollapsible?: boolean;
+    /**
+     * Items anidados que se muestran cuando el item está expandido
+     * Se usa solo cuando isCollapsible es true
+     */
+    children?: DropdownItemCollapsibleChildProps[];
+    /**
+     * Si el item está expandido inicialmente (para items colapsables)
+     * @default false
+     */
+    defaultOpen?: boolean;
+    /**
+     * Si el item está deshabilitado
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Callback cuando se hace click en el item
+     */
+    onClick?: (e: React.MouseEvent<HTMLButtonElement | HTMLDivElement>) => void;
+    /**
+     * Callback cuando el item colapsable se expande/contrae
+     * @param open - nuevo estado de expansión
+     */
+    onOpenChange?: (open: boolean) => void;
+    /**
+     * Clases CSS adicionales
+     */
+    className?: string;
+}
+/**
+ * Props del componente NavigationRailPanel
+ *
+ * @see https://www.figma.com/design/5XNqf2YTxvwemxwo1LMQ6j/Siesa-UI-Kit?node-id=6134-34415
+ */
+export interface NavigationRailPanelProps {
+    /**
+     * Altura del panel en píxeles
+     * Se usa para el contenedor principal
+     * Ejemplo: 600, 800, 900
+     * @default 900
+     */
+    height?: number | string;
+    /**
+     * Ancho del panel en píxeles
+     * Ancho estándar: 248px (con padding incluido)
+     * @default 248
+     */
+    width?: number | string;
+    /**
+     * Encabezado del panel con icono, label, descripción y acción
+     * Ejemplo: { label: "Settings", description: "Configure your preferences" }
+     */
+    heading?: {
+        label: string;
+        description?: string;
+        showDescription?: boolean;
+        iconName?: string;
+        actionLabel?: string;
+        showAction?: boolean;
+        onActionClick?: () => void;
+    };
+    /**
+     * Si mostrar el encabezado (DropdownItemHeading)
+     * @default true
+     */
+    showHeading?: boolean;
+    /**
+     * Configuración del input de búsqueda
+     */
+    search?: {
+        /**
+         * Placeholder del input
+         * @default "Buscar módulo"
+         */
+        placeholder?: string;
+        /**
+         * Valor actual del input
+         */
+        value?: string;
+        /**
+         * Callback cuando cambia el valor del input
+         */
+        onChange?: (value: string) => void;
+    };
+    /**
+     * Si mostrar el input de búsqueda
+     * @default true
+     */
+    showSearch?: boolean;
+    /**
+     * Secciones de items dentro del panel
+     * Cada sección puede tener un encabezado y múltiples items
+     */
+    sections?: NavigationRailPanelSectionProps[];
+    /**
+     * Alternativa a sections: items simples sin agrupar
+     * Se usan cuando no necesitas secciones
+     */
+    items?: NavigationRailPanelItemProps[];
+    /**
+     * Clases CSS adicionales para el contenedor principal
+     */
+    className?: string;
+    /**
+     * Clases CSS adicionales para el panel interno
+     */
+    panelClassName?: string;
+}
+//# sourceMappingURL=NavigationRailPanel.types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"NavigationRailPanel.types.d.ts","sourceRoot":"","sources":["../../../src/components/NavigationRailPanel/NavigationRailPanel.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,KAAK,EAAE,iCAAiC,EAAE,MAAM,0DAA0D,CAAC;AAElH;;GAEG;AACH,MAAM,WAAW,+BAA+B;IAC9C;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB;;;OAGG;IACH,KAAK,EAAE,4BAA4B,EAAE,CAAC;IAEtC;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IAEtB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;GAEG;AACH,MAAM,WAAW,4BAA4B;IAC3C;;;OAGG;IACH,KAAK,EAAE,MAAM,CAAC;IAEd;;;OAGG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;IAEjB;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IAExB;;;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;;OAEG;IACH,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,iBAAiB,GAAG,cAAc,CAAC,KAAK,IAAI,CAAC;IAE5E;;;OAGG;IACH,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IAEvC;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;GAIG;AACH,MAAM,WAAW,wBAAwB;IACvC;;;;;OAKG;IACH,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAEzB;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAExB;;;OAGG;IACH,OAAO,CAAC,EAAE;QACR,KAAK,EAAE,MAAM,CAAC;QACd,WAAW,CAAC,EAAE,MAAM,CAAC;QACrB,eAAe,CAAC,EAAE,OAAO,CAAC;QAC1B,QAAQ,CAAC,EAAE,MAAM,CAAC;QAClB,WAAW,CAAC,EAAE,MAAM,CAAC;QACrB,UAAU,CAAC,EAAE,OAAO,CAAC;QACrB,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;KAC5B,CAAC;IAEF;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IAEtB;;OAEG;IACH,MAAM,CAAC,EAAE;QACP;;;WAGG;QACH,WAAW,CAAC,EAAE,MAAM,CAAC;QAErB;;WAEG;QACH,KAAK,CAAC,EAAE,MAAM,CAAC;QAEf;;WAEG;QACH,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;KACpC,CAAC;IAEF;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;;OAGG;IACH,QAAQ,CAAC,EAAE,+BAA+B,EAAE,CAAC;IAE7C;;;OAGG;IACH,KAAK,CAAC,EAAE,4BAA4B,EAAE,CAAC;IAEvC;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;OAEG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB"}

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

@@ -0,0 +1,3 @@
+export { NavigationRailPanel } from './NavigationRailPanel';
+export type { NavigationRailPanelProps, NavigationRailPanelSectionProps, NavigationRailPanelItemProps, } from './NavigationRailPanel.types';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/NavigationRailPanel/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAC5D,YAAY,EACV,wBAAwB,EACxB,+BAA+B,EAC/B,4BAA4B,GAC7B,MAAM,6BAA6B,CAAC"}