import React from 'react'; import type { LayoutBaseProps } from './LayoutBase.types'; /** * LayoutBase - Layout base del sistema Siesa * * Layout reutilizable que implementa la estructura base con NavigationRail * lateral, Navbar superior y área de contenido dinámico. Diseñado para ser * usado como wrapper en diferentes vistas de la aplicación. * * **Composición:** * - Navbar: Barra superior con logo Siesa, título del producto y dropdown de usuario * - NavigationRailGroup: Rail de navegación lateral con iconos y búsqueda * - Área de contenido: Contenido dinámico pasado como children * * **Mejores prácticas implementadas:** * - Orden de modificadores: {responsive}:{dark}:{state}:{utility} * - Dark mode con estrategia 'class' (darkMode: 'class') * - Tokens de color consistentes con la documentación * - Responsive design mobile-first con breakpoints md:, lg:, xl: * - Composición con componentes del sistema (NO reimplementación) * - Type safety con TypeScript estricto * * @see docs/colors.md - Sistema de colores * @see docs/typography.md - Sistema tipográfico * @see docs/spacing.md - Sistema de espaciado * @see src/components/Navbar - Componente Navbar reutilizado * @see src/components/NavigationRailGroup - Componente NavigationRail reutilizado * * @example * ```tsx * // Uso básico * *
Mi contenido personalizado
*
* * // Uso avanzado con props pass-through * openCart(), * onNotificationsClick: () => openNotifications(), * }} * navigationRailProps={{ * showSearchButton: true, * labels: { * searchPlaceholder: "Buscar módulos...", * collapseButton: "Minimizar" * }, * onItemClick: (item) => handleNavigation(item), * onItemHover: (item) => showPreview(item), * }} * > *
Contenido con funcionalidad completa
*
* ``` */ export declare const LayoutBase: React.FC; //# sourceMappingURL=LayoutBase.d.ts.map