import * as react_jsx_runtime from 'react/jsx-runtime'; import * as react from 'react'; import react__default, { ReactNode, CSSProperties, ElementType, ComponentType, RefObject, MouseEvent as MouseEvent$1, HTMLAttributes, ComponentPropsWithoutRef } from 'react'; import * as class_variance_authority_types from 'class-variance-authority/types'; import { VariantProps } from 'class-variance-authority'; import { ClassValue } from 'clsx'; /** * Glass configuration interface (local definition to avoid external dependency issues) * Made flexible to handle all liquid glass configuration properties */ interface SidebarLiquidConfig { /** Habilitar chromatic aberration (Phase 2) - solo para tooltips por defecto */ enableChromaticAberration?: boolean; /** Allow any property to avoid external dependency issues */ [key: string]: any; } /** * Modo de colapso del sidebar * @enum {string} */ declare enum SidebarCollapseMode { /** Colapsa el sidebar a un ancho mínimo mostrando solo iconos */ COLLAPSE = "collapse", /** Oculta completamente el sidebar */ HIDE = "hide" } /** * Comportamiento del sidebar cuando está en modo hide * @enum {string} */ declare enum SidebarHideBehaviour { /** Muestra un botón indicador para reabrir el sidebar */ SHOW_INDICATOR = "showIndicator", /** El sidebar es completamente controlado externamente sin indicador */ CONTROLLED = "controlled" } /** * Comportamiento al abrir desde el estado hide * @enum {string} */ declare enum SidebarHideOpensBehavior { /** Abre al tamaño colapsado (solo iconos) */ COLLAPSED = "collapsed", /** Abre al tamaño expandido completo */ EXPANDED = "expanded" } /** * Comportamiento de layout del sidebar * @enum {string} */ declare enum SidebarLayoutBehaviour { /** Sidebar flotante con z-index que NO desplaza el contenido (default) */ FLOATING = "floating", /** Sidebar como parte del layout que SÍ desplaza el contenido */ INLINE = "inline" } /** * Anchos predefinidos del sidebar * @enum {string} */ declare enum SidebarWidth { /** Ancho en estado colapsado (solo iconos) */ COLLAPSED = "5rem", /** Ancho expandido completo */ EXPANDED = "16rem", /** Ancho mínimo absoluto */ MIN = "3rem", /** Ancho máximo absoluto */ MAX = "20rem" } /** * Duraciones de transición en milisegundos * @enum {number} */ declare enum SidebarTransitionDuration { /** Transición rápida para cambios de opacidad */ FAST = 200, /** Transición normal para width y transforms */ NORMAL = 300, /** Transición lenta para animaciones complejas */ SLOW = 500 } /** * Índices Z para capas del sidebar * @enum {number} */ declare enum SidebarZIndex { /** Base del contenedor wrapper */ BASE = 0, /** Indicador visual */ INDICATOR = 5, /** Contenido interno del sidebar */ CONTENT = 10, /** Botón de toggle */ TOGGLE = 30 } /** * Radios de borde predefinidos * @enum {string} */ declare enum SidebarBorderRadius { /** Sin radio de borde */ NONE = "0", /** Radio pequeño */ SM = "0.25rem", /** Radio medio */ MD = "0.5rem", /** Radio grande */ LG = "1rem", /** Radio completo (circular) */ FULL = "9999px" } /** * Posiciones para SidebarSafeArea * @enum {string} */ declare enum SidebarSafeAreaPosition { /** Área segura superior */ TOP = "top", /** Área segura inferior */ BOTTOM = "bottom" } /** * Timing functions para transiciones CSS * @enum {string} */ declare enum SidebarTimingFunction { /** Ease estándar */ EASE = "ease", /** Linear (velocidad constante) */ LINEAR = "linear", /** Ease in (aceleración) */ EASE_IN = "ease-in", /** Ease out (desaceleración) */ EASE_OUT = "ease-out", /** Ease in out (aceleración y desaceleración) */ EASE_IN_OUT = "ease-in-out", /** Cubic bezier personalizado */ CUSTOM = "cubic-bezier(0.4, 0, 0.2, 1)" } /** * Configuración de estilo visual del sidebar * @interface */ interface SidebarVisualStyle { /** Margen superior (separación del borde superior) */ marginTop?: string; /** Margen inferior (separación del borde inferior) */ marginBottom?: string; /** Margen izquierdo (separación del borde izquierdo) */ marginLeft?: string; /** Margen derecho (generalmente 0 en modo inline) */ marginRight?: string; /** Altura del sidebar (default: "100vh") */ height?: string; /** Radio de borde redondeado */ borderRadius?: string; /** Sombra del sidebar */ boxShadow?: string; } /** * Configuración de dimensiones del sidebar * @interface */ interface SidebarDimensions { /** Ancho cuando está colapsado */ collapsedWidth: string; /** Ancho cuando está expandido */ expandedWidth: string; /** Altura del indicador visual */ indicatorHeight: string; /** Distancia del tooltip al borde del sidebar (CSS-first con Anchor API) */ tooltipDistance?: string; /** Configuración de estilo visual */ visualStyle?: SidebarVisualStyle; } /** * Configuración de áreas seguras (safe areas) * @interface */ interface SidebarSafeAreas { /** Porcentaje de altura para área segura superior */ topPercent: number; /** Porcentaje de altura para área segura inferior */ bottomPercent: number; } /** * Configuración de animaciones * @interface */ interface SidebarAnimations { /** Duración de transición de width en ms */ widthTransitionDuration: number; /** Duración de transición de opacidad en ms */ opacityTransitionDuration: number; /** Función de timing para animaciones */ timingFunction: string; } /** * Configuración experimental de Liquid Glass V2 * * @description * Feature flags para habilitar efectos avanzados de liquid glass basados en: * - SVG Displacement Mapping (Snell's Law refraction) * - Chromatic Aberration (RGB channel separation) * - Edge Glass 3D (dual backdrop layers) * - Backdrop Extension (Josh Comeau technique) * * @interface * @experimental */ interface SidebarLiquidGlassConfig { /** * Habilitar Liquid Glass V2 (master flag) * * @description * Activa el uso de FluidHoverIndicatorV2 y SidebarTooltipV2 con SVG displacement mapping * en lugar de las versiones básicas con backdrop-blur CSS. * * @default false */ enableLiquidGlassV2?: boolean; /** * Habilitar Chromatic Aberration (Phase 2) * * @description * Activa la separación real de canales RGB usando feColorMatrix + feOffset * en lugar del método legacy basado en diferentes escalas de displacement. * Proporciona +15% de realismo visual según benchmarks. * * **Requiere**: enableLiquidGlassV2 = true * * @default false */ enableChromaticAberration?: boolean; /** * Habilitar Edge Glass 3D (tooltips) * * @description * Activa dual backdrop layers con blur diferenciado para crear ilusión de profundidad: * - Depth layer: blur alto (16px) con brightness 1.15 * - Surface layer: blur moderado (8px) con brightness 1.25 * * **Solo aplica a**: SidebarTooltipV2 * **Requiere**: enableLiquidGlassV2 = true * * @default true */ enableEdgeGlass3D?: boolean; /** * Habilitar Backdrop Extension (Josh Comeau) * * @description * Extiende el área de backdrop-filter al 200% de altura con mask * para capturar elementos cercanos y mejorar el realismo de la refracción. * * **Solo aplica a**: SidebarTooltipV2 * **Requiere**: enableLiquidGlassV2 = true * * @default true */ enableBackdropExtension?: boolean; /** * Habilitar animaciones staggered de items en tooltips * * @description * Activa entrada/salida escalonada de items del tooltip usando CSS custom properties. * Incluye grid trick para height auto transitions y direction-aware animations. * * **Solo aplica a**: SidebarTooltipV2 * * @default true * @experimental */ enableTooltipItemAnimations?: boolean; /** * Habilitar animación 3D de cilindro para títulos de tooltips * * @description * Activa efecto de cilindro rotatorio 3D para el título del tooltip usando Web Animations API. * Mantiene historial circular de últimos 10 títulos y rota según dirección de navegación. * * **Features**: * - Rotación 3D con rotateX * - Direction-aware (up/down navigation) * - Historial circular de títulos * - Duración: 400ms, easing cubic-bezier * * **Solo aplica a**: SidebarTooltip * * @default false * @experimental */ enableCylinderTitle?: boolean; /** * Overrides de preset para configuración avanzada de Liquid Glass * * @description * Permite sobrescribir valores del preset 'sidebar' para debugging y ajuste fino. * Incluye parámetros visuales como frost, blur, scale, chromatic aberration RGB, etc. * * **Ejemplo**: * ```tsx * presetOverrides: { * frost: 0.08, * blur: 12, * blurBackground: 10, * scale: -200, * r: 5, * g: 15, * b: 25 * } * ``` * * **Requiere**: enableLiquidGlassV2 = true * * @default undefined * @experimental */ presetOverrides?: Partial; } /** * Librería de iconos a utilizar * @enum {string} */ declare enum SidebarIconLibrary { /** Iconos de lucide-react */ LUCIDE = "lucide", /** Iconos custom proporcionados por el usuario */ CUSTOM = "custom" } /** * Estado compartido del sidebar * @interface */ interface SidebarState { /** Indica si el sidebar está abierto */ open: boolean; /** Indica si el sidebar está colapsado (solo en modo COLLAPSE) */ collapsed: boolean; /** Modo de colapso actual */ collapseMode: SidebarCollapseMode; /** Comportamiento de layout actual */ layoutBehaviour: SidebarLayoutBehaviour; } /** * Estado del botón toggle * @interface */ interface SidebarToggleState { /** Indica si el toggle está activo/presionado */ active: boolean; /** Indica si el sidebar está abierto */ open: boolean; } /** * Estado de un item del sidebar * @interface */ interface SidebarItemState { /** Indica si el item está enfocado por teclado */ focused: boolean; /** Indica si el mouse está sobre el item */ hovered: boolean; /** Indica si el item está deshabilitado */ disabled: boolean; } /** * Estado del indicador visual * @interface */ interface SidebarIndicatorState { /** Indica si el indicador está visible */ visible: boolean; /** Posición Y del indicador en píxeles */ position: number; } /** * Tipo para render prop de Sidebar */ type SidebarRenderProp = (state: SidebarState) => ReactNode; /** * Tipo para render prop de SidebarToggle */ type SidebarToggleRenderProp = (state: SidebarToggleState) => ReactNode; /** * Tipo para render prop de SidebarItem */ type SidebarItemRenderProp = (state: SidebarItemState) => ReactNode; /** * Tipo para render prop de SidebarIndicator */ type SidebarIndicatorRenderProp = (state: SidebarIndicatorState) => ReactNode; /** * Valor del contexto compartido del Sidebar * @interface */ interface SidebarContextValue { /** Estado inicial del sidebar (solo lectura) */ defaultOpen: boolean; /** Estado actual open/closed del sidebar */ open: boolean; /** Función para actualizar el estado open */ setOpen: (open: boolean) => void; /** Modo de colapso actual */ collapseMode: SidebarCollapseMode; /** Comportamiento en modo hide */ hideBehaviour: SidebarHideBehaviour; /** Comportamiento al abrir desde hide */ hideOpensBehavior: SidebarHideOpensBehavior; /** Comportamiento de layout del sidebar */ layoutBehaviour: SidebarLayoutBehaviour; /** Configuración de dimensiones */ dimensions: SidebarDimensions; /** Configuración de safe areas */ safeAreas: SidebarSafeAreas; /** Configuración de animaciones */ animations: SidebarAnimations; /** ID del toggle input */ toggleId: string; /** Modo debug para visualizar safe areas */ debug: boolean; /** Ref al contenedor de navegación */ navRef: RefObject; /** Ref al contenedor de items */ contentRef: RefObject; /** Ref al indicador visual */ indicatorRef: RefObject; /** Registrar un item para navegación por teclado */ registerItem: (element: HTMLElement) => void; /** Des-registrar un item */ unregisterItem: (element: HTMLElement) => void; /** Items registrados actualmente */ items: HTMLElement[]; /** Indica si el indicador debe mostrarse por navegación de teclado */ showIndicatorForKeyboard: boolean; /** Función para activar/desactivar el indicador por teclado */ setShowIndicatorForKeyboard: (show: boolean) => void; /** Indica si el cursor/focus está sobre el área de items */ isOverItems: boolean; /** Función para actualizar el estado de isOverItems */ setIsOverItems: (isOver: boolean) => void; /** Habilitar FluidHoverIndicator (glassmorphism + spring physics) */ enableFluidIndicator: boolean; /** Habilitar tooltip en hover (muestra label o subcategorías) */ enableTooltip: boolean; /** Elemento del item actualmente hovered/focused (para FluidIndicator) */ currentItemElement: HTMLElement | null; /** Función para actualizar el currentItemElement */ setCurrentItemElement: (element: HTMLElement | null) => void; /** Configuración experimental de Liquid Glass V2 */ liquidGlass: SidebarLiquidGlassConfig; } /** * Props del componente Sidebar (root container) * @interface */ interface SidebarProps { /** Contenido del sidebar (puede ser ReactNode o render prop) */ children: ReactNode | SidebarRenderProp; /** Clase CSS adicional para el wrapper */ className?: string; /** Estilos inline para el wrapper */ style?: CSSProperties; /** Estado inicial abierto (modo uncontrolled) */ defaultOpen?: boolean; /** Estado abierto (modo controlled) */ open?: boolean; /** Callback cuando cambia el estado open */ onOpenChange?: (open: boolean) => void; /** Modo de colapso del sidebar */ collapseMode?: SidebarCollapseMode; /** Comportamiento en modo hide */ hideBehaviour?: SidebarHideBehaviour; /** Comportamiento al abrir desde hide */ hideOpensBehavior?: SidebarHideOpensBehavior; /** Comportamiento de layout del sidebar */ layoutBehaviour?: SidebarLayoutBehaviour; /** Configuración de dimensiones (partial override) */ dimensions?: Partial; /** Configuración de áreas seguras (partial override) */ safeAreas?: Partial; /** Configuración de animaciones (partial override) */ animations?: Partial; /** ID personalizado para el toggle input */ toggleId?: string; /** Modo debug (muestra bordes y labels) */ debug?: boolean; /** Habilitar FluidHoverIndicator (glassmorphism + spring physics) */ enableFluidIndicator?: boolean; /** Habilitar tooltip en hover (muestra label o subcategorías) */ enableTooltip?: boolean; /** * Configuración experimental de Liquid Glass V2 (partial override) * * @description * Permite activar/desactivar features experimentales de liquid glass mediante flags: * * @example * ```tsx * * ... * * ``` * * @experimental */ liquidGlass?: Partial; /** Elemento o componente a renderizar */ as?: ElementType; } /** * Props del componente SidebarNav * @interface */ interface SidebarNavProps { /** Contenido del nav */ children: ReactNode; /** Clase CSS adicional */ className?: string; /** Estilos inline */ style?: CSSProperties; /** Label ARIA para el nav */ "aria-label"?: string; /** Elemento o componente a renderizar */ as?: ElementType; } /** * Props del componente SidebarToggle * @interface */ interface SidebarToggleProps { /** Contenido del botón (puede ser ReactNode o render prop) */ children?: ReactNode | SidebarToggleRenderProp; /** Librería de iconos a utilizar (Lucide o custom) */ iconLibrary?: SidebarIconLibrary; /** Clase CSS adicional */ className?: string; /** Estilos inline */ style?: CSSProperties; /** Label ARIA para el botón */ "aria-label"?: string; /** Elemento o componente a renderizar */ as?: ElementType; } /** * Props del componente SidebarContent * @interface */ interface SidebarContentProps { /** Contenido (items del sidebar) */ children: ReactNode; /** Clase CSS adicional */ className?: string; /** Estilos inline */ style?: CSSProperties; /** Elemento o componente a renderizar */ as?: ElementType; } /** * Props del componente SidebarIndicator * @interface */ interface SidebarIndicatorProps { /** Contenido personalizado del indicador (opcional) */ children?: ReactNode | SidebarIndicatorRenderProp; /** Clase CSS adicional */ className?: string; /** Estilos inline */ style?: CSSProperties; /** Elemento o componente a renderizar */ as?: ElementType; } /** * Props del componente SidebarSafeArea * @interface */ interface SidebarSafeAreaProps { /** Contenido del área segura */ children?: ReactNode; /** Posición del área segura (top o bottom) */ position: SidebarSafeAreaPosition; /** Porcentaje de altura del sidebar (override del config) */ percent?: number; /** Clase CSS adicional */ className?: string; /** Estilos inline */ style?: CSSProperties; /** Elemento o componente a renderizar */ as?: ElementType; } /** * Props del componente SidebarItem * @interface */ interface SidebarItemProps { /** URL de destino */ href?: string; /** Icono del item */ icon?: ReactNode; /** Label/texto del item */ label?: string; /** Contenido del item (puede ser ReactNode o render prop) */ children?: ReactNode | SidebarItemRenderProp; /** Componente Link personalizado (ej: React Router Link, Next Link) */ LinkComponent?: ComponentType; /** Props adicionales para el LinkComponent */ linkProps?: Record; /** Clase CSS adicional */ className?: string; /** Estilos inline */ style?: CSSProperties; /** Callback al hacer hover */ onHover?: () => void; /** Callback al hacer click */ onClick?: () => void; /** Item deshabilitado */ disabled?: boolean; /** Elemento o componente a renderizar */ as?: ElementType; } /** * Configuración completa del sidebar (sin partials) */ interface SidebarConfig { defaultOpen: boolean; collapseMode: SidebarCollapseMode; hideBehaviour: SidebarHideBehaviour; hideOpensBehavior: SidebarHideOpensBehavior; layoutBehaviour: SidebarLayoutBehaviour; dimensions: SidebarDimensions; safeAreas: SidebarSafeAreas; animations: SidebarAnimations; toggleId: string; debug: boolean; liquidGlass: SidebarLiquidGlassConfig; } /** * Componente raíz del Sidebar con arquitectura headless * * @description * Componente principal que provee el contexto compartido a todos los * componentes primitivos del sidebar (SidebarNav, SidebarToggle, etc.). * * Este componente NO renderiza ningún elemento visual por sí mismo, * solo provee el Provider de contexto. Los estilos y estructura visual * se definen componiendo los primitivos hijos. * * Soporta dos modos: * - **Uncontrolled**: Usa `defaultOpen` para estado interno * - **Controlled**: Usa `open` + `onOpenChange` para control externo * * También soporta render props para acceder al estado del sidebar: * * @example * ```tsx * // Uso básico (children estáticos) * * * * * } /> * * * * ``` * * @example * ```tsx * // Con render props (acceso al estado) * * {({ open, collapsed }) => ( * <> * * * * * *
Sidebar is {open ? 'open' : 'closed'}
* * )} * * ``` * * @example * ```tsx * // Modo controlled * function App() { * const [open, setOpen] = useState(true) * * return ( * * ... * * ) * } * ``` * * @example * ```tsx * // Con configuración custom * * ... * * ``` * * @note * Los colores se obtienen automáticamente de los tokens CSS de shadcn definidos * en globals.css (--sidebar, --sidebar-accent, --sidebar-primary, etc.) */ declare function Sidebar({ children, className, style, defaultOpen, open, onOpenChange, collapseMode, hideBehaviour, hideOpensBehavior, layoutBehaviour, dimensions, animations, toggleId, debug, enableFluidIndicator, enableTooltip, liquidGlass, as, }: SidebarProps): react_jsx_runtime.JSX.Element; /** * Componente de navegación del Sidebar * * @description * Contenedor de navegación que renderiza un elemento `