import React from 'react';
import type { NavigationRailTypesProps } from './NavigationRailTypes.types';
/**
 * Componente NavigationRailTypes del sistema de diseño Siesa
 *
 * Barra de navegación lateral que permite dos modos visuales:
 * - **Collapsed (Colapsado)**: 80px width, solo iconos con botón de búsqueda
 * - **Expanded (Expandido)**: 215px width, con labels y búsqueda integrada
 *
 * **Características:**
 * - Dos modos: collapsed e expanded (toggle con botón "Colapsar")
 * - Soporta items con badges de notificación
 * - Items colapsables para agrupar navegación relacionada
 * - Botón "Recientes" en footer
 * - Búsqueda integrada (solo en modo expanded)
 * - Dark mode completo
 * - Focus rings adaptativos
 *
 * **Especificaciones de Figma:**
 * - Collapsed: 80px width, items con height 44px + gap 12px
 * - Expanded: 215px width, items reutilizan DropdownItemCollapsible
 * - Icono search: 16x16px, azul (#0e79fd)
 * - Borde derecho: 1px solid #e4e4e7 (collapsed)
 * - Borde izquierdo: 1px solid #e4e4e7 (expanded)
 * - Height total: 900px (scroll si necesario)
 *
 * **Estructura:**
 * 1. Header (Search en expanded) - altura variable
 * 2. Menu & Destinations - flex 1 con items scrollables
 * 3. Footer - Actions con divider y botones
 *
 * **Estados de Items:**
 * - `default`: Text color content-primary
 * - `hover`: Fondo hover-overlay, icon color content-custom-primary
 * - `active`: Fondo custom-primary, text color custom-primary
 * - `disabled`: Opacity 50%, sin interacción
 *
 * **Colores (Light Mode):**
 * - Background: background-primary (#ffffff)
 * - Borders: border-primary (#e4e4e7)
 * - Text: content-primary (#18181b)
 * - Icons: content-secondary (#a1a1aa)
 * - Icon hover: content-custom-primary (#0e79fd)
 * - Divider: border-primary (#e4e4e7)
 * - Search input: bg-primary, border-primary, placeholder: content-tertiary
 *
 * **Colores (Dark Mode):**
 * - Background: background-primary/dark (#09090b)
 * - Borders: border-primary/dark (#3f3f46)
 * - Text: content-primary/dark (#fafafa)
 * - Icons: content-secondary/dark (#a1a1aa)
 * - Icon hover: content-custom-primary/dark (#bfe2fe)
 * - Divider: border-primary/dark (#3f3f46)
 *
 * **Tipografía:**
 * - Items labels: Paragraph/Small (14px, Regular, line-height 20px)
 * - Heading: Paragraph/Tiny (12px, Regular, line-height 16px) - si aplica
 * - Button labels: Label Small (14px, Bold)
 *
 * @see docs/colors.md - Sistema de colores
 * @see docs/typography.md - Sistema tipográfico
 * @see docs/spacing.md - Sistema de espaciado (gap-3, px-4, py-2, etc)
 * @see https://www.figma.com/design/5XNqf2YTxvwemxwo1LMQ6j/Siesa-UI-Kit?node-id=6135-36219
 *
 * @example
 * ```tsx
 * const navItems: NavigationRailItem[] = [
 *   {
 *     id: 'home',
 *     label: 'Home',
 *     icon: <HomeIcon />,
 *     active: true,
 *     onClick: () => navigate('/home'),
 *   },
 *   {
 *     id: 'users',
 *     label: 'Users',
 *     icon: <UsersIcon />,
 *     badge: true,
 *     onClick: () => navigate('/users'),
 *   },
 * ];
 *
 * const [isCollapsed, setIsCollapsed] = useState(true);
 *
 * <NavigationRailTypes
 *   collapsed={isCollapsed}
 *   items={navItems}
 *   showRecentButton={true}
 *   onCollapsedChange={setIsCollapsed}
 *   onItemClick={(index, item) => console.log('Selected:', item.id)}
 * />
 * ```
 *
 * @see NavigationRailTypes.types.ts - Props e interfaces
 */
export declare const NavigationRailTypes: React.ForwardRefExoticComponent<NavigationRailTypesProps & React.RefAttributes<HTMLDivElement>>;
export default NavigationRailTypes;
//# sourceMappingURL=NavigationRailTypes.d.ts.map