import type { SidebarDimensions, SidebarAnimations, SidebarCollapseMode, SidebarHideOpensBehavior, SidebarVisualStyle } from "./Sidebar.types"; import { SidebarLayoutBehaviour } from "./Sidebar.types"; /** * Configuración para el generador de estilos * @interface */ interface StyleGeneratorConfig { dimensions: SidebarDimensions; animations: SidebarAnimations; collapseMode: SidebarCollapseMode; hideOpensBehavior: SidebarHideOpensBehavior; layoutBehaviour: SidebarLayoutBehaviour; visualStyle: SidebarVisualStyle; } /** * Genera los estilos CSS del sidebar usando CSS-in-JS y tokens de shadcn * * @description * Función que genera todo el CSS necesario para el sidebar, * utilizando los tokens CSS de shadcn definidos en globals.css: * * **Tokens utilizados:** * - `--sidebar`: Color de fondo * - `--sidebar-foreground`: Color de texto * - `--sidebar-primary`: Color primario (indicador, elementos activos) * - `--sidebar-accent`: Color de hover y estados secundarios * - `--sidebar-border`: Color de bordes * - `--sidebar-ring`: Color de focus ring (accesibilidad) * * Usa CSS Layers para organización y control de especificidad: * - sidebar-base: Variables y estilos base * - sidebar-states: Estados (:checked, :hover, etc.) * - sidebar-animations: Transiciones y animaciones * * @param {StyleGeneratorConfig} config - Configuración de dimensiones y animaciones * @returns {string} String con el CSS completo * * @example * ```tsx * const styles = generateSidebarStyles({ * dimensions: DEFAULT_DIMENSIONS, * animations: DEFAULT_ANIMATIONS, * collapseMode: SidebarCollapseMode.COLLAPSE, * hideOpensBehavior: SidebarHideOpensBehavior.COLLAPSED * }) * * * ``` * * @note * Los colores NO se configuran aquí, se obtienen automáticamente de los tokens * CSS de shadcn. Esto permite soporte automático para dark/light mode. */ export declare function generateSidebarStyles({ dimensions, animations, collapseMode, hideOpensBehavior, layoutBehaviour, visualStyle }: StyleGeneratorConfig): string; /** * Genera estilos para el indicador visual usando tokens CSS * * @description * Función auxiliar para generar estilos dinámicos del indicador. * Útil para aplicar estilos inline con estado reactivo. * * Utiliza el token `--sidebar-primary` para el color del indicador, * asegurando consistencia con el theme del sidebar. * * @param {boolean} isVisible - Si el indicador está visible * @returns {React.CSSProperties} Objeto de estilos inline * * @example * ```tsx * const indicatorStyles = generateIndicatorStyles(isHovering && isOverItems) * *
* ``` */ export declare function generateIndicatorStyles(isVisible: boolean): React.CSSProperties; export {}; //# sourceMappingURL=Sidebar.styles.d.ts.map