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