import { type SidebarDimensions, type SidebarSafeAreas, type SidebarAnimations, type SidebarConfig } from "./Sidebar.types"; /** * Dimensiones por defecto del sidebar * @constant */ export declare const DEFAULT_DIMENSIONS: SidebarDimensions; /** * Áreas seguras por defecto * @constant */ export declare const DEFAULT_SAFE_AREAS: SidebarSafeAreas; /** * Animaciones por defecto * @constant */ export declare const DEFAULT_ANIMATIONS: SidebarAnimations; /** * Configuración por defecto del sidebar * @constant * * @description * Los colores se obtienen automáticamente de los tokens CSS de shadcn: * - --sidebar: Color de fondo * - --sidebar-foreground: Color de texto * - --sidebar-primary: Color primario (indicador) * - --sidebar-accent: Color de hover * - --sidebar-border: Color de bordes */ export declare const DEFAULT_CONFIG: SidebarConfig; /** * Teclas de navegación del sidebar * @constant */ export declare const SIDEBAR_KEYBOARD_KEYS: { /** Flecha abajo - navegar al siguiente item */ readonly ARROW_DOWN: "ArrowDown"; /** Flecha arriba - navegar al item anterior */ readonly ARROW_UP: "ArrowUp"; /** Home - ir al primer item */ readonly HOME: "Home"; /** End - ir al último item */ readonly END: "End"; /** Tab - navegación estándar */ readonly TAB: "Tab"; /** Escape - cerrar sidebar o quitar focus */ readonly ESCAPE: "Escape"; }; /** * Tipo derivado de las teclas del teclado */ export type SidebarKeyboardKey = (typeof SIDEBAR_KEYBOARD_KEYS)[keyof typeof SIDEBAR_KEYBOARD_KEYS]; /** * Timing functions perfectas para animaciones suaves * @constant */ export declare const SIDEBAR_TIMING_FUNCTIONS: { /** Ease-out perfecto para elevación de iconos */ readonly EASE_OUT_PERFECT: "cubic-bezier(0.4, 0, 0.2, 1)"; /** Ease-in-out suave */ readonly EASE_IN_OUT_SMOOTH: "cubic-bezier(0.45, 0, 0.55, 1)"; /** Spring suave */ readonly SPRING_SOFT: "cubic-bezier(0.34, 1.56, 0.64, 1)"; }; /** * Atributos data-* para styling CSS y selección de elementos * @constant */ export declare const SIDEBAR_DATA_ATTRIBUTES: { /** data-open - indica si el sidebar está abierto */ readonly OPEN: "data-open"; /** data-collapsed - indica si el sidebar está colapsado */ readonly COLLAPSED: "data-collapsed"; /** data-focused - indica si un elemento está enfocado */ readonly FOCUSED: "data-focused"; /** data-hovered - indica si el mouse está sobre un elemento */ readonly HOVERED: "data-hovered"; /** data-disabled - indica si un elemento está deshabilitado */ readonly DISABLED: "data-disabled"; /** data-sidebar-item - marca un item del sidebar para navegación */ readonly ITEM: "data-sidebar-item"; /** data-active - indica si un toggle/botón está activo */ readonly ACTIVE: "data-active"; /** data-visible - indica si un elemento es visible */ readonly VISIBLE: "data-visible"; }; /** * Clases Tailwind reutilizables para componentes del sidebar * @constant */ export declare const SIDEBAR_TAILWIND_CLASSES: { /** Clases base para el wrapper */ readonly wrapper: "relative"; /** Clases base para el nav */ readonly nav: "relative h-screen border-r"; /** Clases base para el indicador */ readonly indicator: "absolute left-0 rounded-r-full pointer-events-none"; /** Clases base para el botón toggle */ readonly toggleButton: "block w-6 h-6 rounded-full cursor-pointer flex items-center justify-center transition-colors"; /** Clases para el wrapper del botón toggle */ readonly toggleButtonWrapper: "absolute top-6 z-30"; /** Clases base para el contenedor de items */ readonly content: "flex flex-col items-center"; /** Clases base para áreas seguras */ readonly safeArea: "flex items-center justify-center"; /** Clases de borde debug */ readonly debugBorder: "border-dashed"; /** Clases de focus ring (accesibilidad) */ readonly focusRing: "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2"; /** Clases SR-only (screen reader only) */ readonly srOnly: "sr-only"; }; /** * Tipo derivado de las clases Tailwind */ export type SidebarTailwindClass = (typeof SIDEBAR_TAILWIND_CLASSES)[keyof typeof SIDEBAR_TAILWIND_CLASSES]; /** * Patrones visuales para modo debug * @constant */ export declare const SIDEBAR_DEBUG_PATTERNS: { /** Patrón de rayas para áreas seguras */ readonly safeArea: "repeating-linear-gradient(45deg, transparent, transparent 10px, rgba(255,255,255,0.03) 10px, rgba(255,255,255,0.03) 20px)"; /** Fondo semi-transparente para área de contenido */ readonly contentArea: "rgba(0, 0, 0, 0.5)"; /** Color de borde para debug */ readonly borderColor: "rgb(34 197 94)"; /** Opacidad de borde debug */ readonly borderOpacity: "0.3"; }; /** * Roles ARIA para accesibilidad * @constant */ export declare const SIDEBAR_ARIA_ROLES: { /** Rol para el nav principal */ readonly navigation: "navigation"; /** Rol para lista de items */ readonly list: "list"; /** Rol para item individual */ readonly listitem: "listitem"; /** Rol para botón toggle */ readonly button: "button"; }; /** * Labels ARIA por defecto para accesibilidad * @constant */ export declare const SIDEBAR_ARIA_LABELS: { /** Label para toggle */ readonly toggleSidebar: "Alternar sidebar"; /** Label para navegación principal */ readonly mainNavigation: "Navegación principal"; /** Label cuando sidebar está abierto */ readonly sidebarOpen: "Sidebar abierto"; /** Label cuando sidebar está cerrado */ readonly sidebarClosed: "Sidebar cerrado"; }; /** * Configuración de estilo visual por defecto del sidebar * @constant */ export declare const DEFAULT_VISUAL_STYLE: { readonly marginTop: "0"; readonly marginBottom: "0"; readonly marginLeft: "0"; readonly marginRight: "0"; readonly height: "100vh"; readonly borderRadius: "0"; readonly boxShadow: "none"; }; /** * Preconfiguraciones de estilo visual para el sidebar * @constant */ export declare const SIDEBAR_VISUAL_PRESETS: { /** Estilo por defecto: pegado a bordes */ readonly DEFAULT: { readonly marginTop: "0"; readonly marginBottom: "0"; readonly marginLeft: "0"; readonly marginRight: "0"; readonly height: "100vh"; readonly borderRadius: "0"; readonly boxShadow: "none"; }; /** Estilo floating: separado y con sombra */ readonly FLOATING_CARD: { readonly marginTop: "1rem"; readonly marginBottom: "1rem"; readonly marginLeft: "1rem"; readonly marginRight: "0"; readonly height: "calc(100vh - 2rem)"; readonly borderRadius: "0.75rem"; readonly boxShadow: "0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)"; }; /** Estilo moderno: esquinas redondeadas suaves */ readonly MODERN_ROUNDED: { readonly marginTop: "0.5rem"; readonly marginBottom: "0.5rem"; readonly marginLeft: "0.5rem"; readonly marginRight: "0"; readonly height: "calc(100vh - 1rem)"; readonly borderRadius: "1rem"; readonly boxShadow: "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)"; }; /** Estilo minimal: ligera separación */ readonly MINIMAL_SPACED: { readonly marginTop: "0.25rem"; readonly marginBottom: "0.25rem"; readonly marginLeft: "0.25rem"; readonly marginRight: "0"; readonly height: "calc(100vh - 0.5rem)"; readonly borderRadius: "0.5rem"; readonly boxShadow: "0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)"; }; }; /** * Tipo para los presets de estilo visual */ export type SidebarVisualPreset = keyof typeof SIDEBAR_VISUAL_PRESETS; /** * Breakpoints para responsive behavior * @constant */ export declare const SIDEBAR_BREAKPOINTS: { /** Ancho mínimo para mostrar sidebar expandido */ readonly minExpandedWidth: 768; /** Ancho mínimo para sidebar colapsado */ readonly minCollapsedWidth: 640; /** Ancho para forzar modo mobile */ readonly mobileWidth: 480; }; /** * Límites y valores seguros para validación * @constant */ export declare const SIDEBAR_LIMITS: { /** Porcentaje mínimo para safe area */ readonly minSafeAreaPercent: 0; /** Porcentaje máximo para safe area */ readonly maxSafeAreaPercent: 50; /** Número máximo de items recomendado */ readonly maxRecommendedItems: 20; /** Duración mínima de transición (ms) */ readonly minTransitionDuration: 0; /** Duración máxima de transición (ms) */ readonly maxTransitionDuration: 1000; }; /** * Nombres de CSS variables utilizadas * @constant */ export declare const SIDEBAR_CSS_VARIABLES: { /** Ancho cuando cerrado */ readonly widthClosed: "--sidebar-width-closed"; /** Ancho cuando abierto */ readonly widthOpen: "--sidebar-width-open"; /** Ancho actual */ readonly width: "--sidebar-width"; /** Color de fondo */ readonly background: "--sidebar-bg"; /** Color de borde (variable interna para evitar colisión con --sidebar-border de shadcn) */ readonly borderColor: "--sidebar-border-color"; /** Color de hover */ readonly hover: "--sidebar-hover"; /** Color del indicador */ readonly indicator: "--sidebar-indicator"; /** Altura del indicador */ readonly indicatorHeight: "--sidebar-indicator-height"; /** Distancia del tooltip al sidebar */ readonly tooltipDistance: "--sidebar-tooltip-distance"; /** Comportamiento de layout */ readonly layoutBehaviour: "--sidebar-layout-behaviour"; /** Flag para modo inline */ readonly isInline: "--sidebar-is-inline"; /** Variables de estilo visual */ readonly marginTop: "--sidebar-margin-top"; readonly marginBottom: "--sidebar-margin-bottom"; readonly marginLeft: "--sidebar-margin-left"; readonly marginRight: "--sidebar-margin-right"; readonly sidebarHeight: "--sidebar-height"; readonly sidebarBorderRadius: "--sidebar-border-radius"; readonly sidebarBoxShadow: "--sidebar-box-shadow"; }; //# sourceMappingURL=Sidebar.constants.d.ts.map