import React from 'react';
import type { NavigationRailGroupProps } from './NavigationRailGroup.types';
/**
 * NavigationRailGroup del sistema de diseño Siesa
 *
 * Componente de navegación lateral agrupado 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:**
 * ```
 * ┌────────────────────────────────────┐
 * │  NavigationRailGroup               │
 * │  ┌──────────┬─────────────────┐   │
 * │  │  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-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 />,
 *   },
 * ];
 *
 * <NavigationRailGroup
 *   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');
 *
 * <NavigationRailGroup
 *   state={state}
 *   items={items}
 *   onStateChange={setState}
 * />
 * ```
 *
 * @see NavigationRailGroup.types.ts - Props e interfaces
 */
export declare const NavigationRailGroup: React.ForwardRefExoticComponent<NavigationRailGroupProps & React.RefAttributes<HTMLDivElement>>;
export default NavigationRailGroup;
//# sourceMappingURL=NavigationRailGroup.d.ts.map