@mks2508/sidebar-headless 0.2.0 → 0.3.0

package/dist/components/Sidebar/SidebarContext.d.ts

@@ -0,0 +1,87 @@
+import type { ReactNode } from "react";
+export interface SubContentData {
+    itemId: string;
+    subContent: ReactNode;
+    title?: string;
+}
+export declare const SubContentContext: import("react").Context<{
+    subContentMap: Map<string, SubContentData>;
+    registerSubContent: (itemId: string, data: SubContentData) => void;
+    unregisterSubContent: (itemId: string) => void;
+    getSubContent: (itemId: string) => SubContentData | undefined;
+} | null>;
+import type { SidebarContextValue, SidebarCollapseMode, SidebarHideBehaviour, SidebarHideOpensBehavior, SidebarLayoutBehaviour, SidebarDimensions, SidebarSafeAreas, SidebarAnimations, SidebarLiquidGlassConfig } from "./Sidebar.types";
+/**
+ * Contexto del Sidebar para compartir estado entre componentes primitivos
+ * @constant
+ */
+export declare const SidebarContext: import("react").Context<SidebarContextValue | null>;
+/**
+ * Props del SidebarProvider
+ * @interface
+ */
+interface SidebarProviderProps {
+    /** Contenido hijo (componentes primitivos del sidebar) */
+    children: ReactNode;
+    /** 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 */
+    dimensions?: Partial<SidebarDimensions>;
+    /** Configuración de safe areas */
+    safeAreas?: Partial<SidebarSafeAreas>;
+    /** Configuración de animaciones */
+    animations?: Partial<SidebarAnimations>;
+    /** ID del toggle input */
+    toggleId?: string;
+    /** Modo debug para visualizar safe areas */
+    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 */
+    liquidGlass?: Partial<SidebarLiquidGlassConfig>;
+}
+/**
+ * Provider del contexto del Sidebar
+ *
+ * @description
+ * Componente que provee el contexto compartido a todos los componentes
+ * primitivos del sidebar. Gestiona el estado global (open/closed) y
+ * referencias a elementos DOM necesarios para funcionalidades como
+ * el indicador visual y navegación por teclado.
+ *
+ * Soporta tanto modo controlled (pasando prop `open`) como uncontrolled
+ * (usando `defaultOpen`).
+ *
+ * @example
+ * ```tsx
+ * // Modo uncontrolled
+ * <SidebarProvider defaultOpen={true}>
+ *   <SidebarNav>...</SidebarNav>
+ * </SidebarProvider>
+ *
+ * // Modo controlled
+ * <SidebarProvider
+ *   open={isOpen}
+ *   onOpenChange={setIsOpen}
+ * >
+ *   <SidebarNav>...</SidebarNav>
+ * </SidebarProvider>
+ * ```
+ */
+export declare function SidebarProvider({ children, defaultOpen, open: controlledOpen, onOpenChange, collapseMode, hideBehaviour, hideOpensBehavior, layoutBehaviour, dimensions: dimensionsProp, safeAreas: safeAreasProp, animations: animationsProp, toggleId, debug, enableFluidIndicator, enableTooltip, liquidGlass: liquidGlassProp }: SidebarProviderProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=SidebarContext.d.ts.map

package/dist/components/Sidebar/SidebarContext.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SidebarContext.d.ts","sourceRoot":"","sources":["../../../src/components/Sidebar/SidebarContext.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,SAAS,EAAa,MAAM,OAAO,CAAA;AAEjD,MAAM,WAAW,cAAc;IAC7B,MAAM,EAAE,MAAM,CAAA;IACd,UAAU,EAAE,SAAS,CAAA;IACrB,KAAK,CAAC,EAAE,MAAM,CAAA;CACf;AAED,eAAO,MAAM,iBAAiB;;;;;SAKf,CAAA;AACf,OAAO,KAAK,EACV,mBAAmB,EACnB,mBAAmB,EACnB,oBAAoB,EACpB,wBAAwB,EACxB,sBAAsB,EACtB,iBAAiB,EACjB,gBAAgB,EAChB,iBAAiB,EACjB,wBAAwB,EACzB,MAAM,iBAAiB,CAAA;AAUxB;;;GAGG;AACH,eAAO,MAAM,cAAc,qDAAkD,CAAA;AAE7E;;;GAGG;AACH,UAAU,oBAAoB;IAC5B,0DAA0D;IAC1D,QAAQ,EAAE,SAAS,CAAA;IACnB,iDAAiD;IACjD,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,uCAAuC;IACvC,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,4CAA4C;IAC5C,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAA;IACtC,kCAAkC;IAClC,YAAY,CAAC,EAAE,mBAAmB,CAAA;IAClC,kCAAkC;IAClC,aAAa,CAAC,EAAE,oBAAoB,CAAA;IACpC,yCAAyC;IACzC,iBAAiB,CAAC,EAAE,wBAAwB,CAAA;IAC5C,2CAA2C;IAC3C,eAAe,CAAC,EAAE,sBAAsB,CAAA;IACxC,oCAAmC;IACnC,UAAU,CAAC,EAAE,OAAO,CAAC,iBAAiB,CAAC,CAAA;IACvC,mCAAkC;IAClC,SAAS,CAAC,EAAE,OAAO,CAAC,gBAAgB,CAAC,CAAA;IACrC,oCAAmC;IACnC,UAAU,CAAC,EAAE,OAAO,CAAC,iBAAiB,CAAC,CAAA;IACvC,0BAA0B;IAC1B,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,4CAA4C;IAC5C,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,qEAAqE;IACrE,oBAAoB,CAAC,EAAE,OAAO,CAAA;IAC9B,kEAAiE;IACjE,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,qDAAoD;IACpD,WAAW,CAAC,EAAE,OAAO,CAAC,wBAAwB,CAAC,CAAA;CAChD;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AACH,wBAAgB,eAAe,CAAC,EAC9B,QAAQ,EACR,WAAwC,EACxC,IAAI,EAAE,cAAc,EACpB,YAAY,EACZ,YAA0C,EAC1C,aAA4C,EAC5C,iBAAoD,EACpD,eAAgD,EAChD,UAAU,EAAE,cAAc,EAC1B,SAAS,EAAE,aAAa,EACxB,UAAU,EAAE,cAAc,EAC1B,QAAkC,EAClC,KAA4B,EAC5B,oBAA4B,EAC5B,aAAoB,EACpB,WAAW,EAAE,eAAe,EAC7B,EAAE,oBAAoB,2CAwLtB"}

package/dist/components/Sidebar/SidebarFluidIndicator.d.ts

@@ -0,0 +1,37 @@
+/**
+ * Props del SidebarFluidIndicator
+ * @interface
+ */
+interface SidebarFluidIndicatorProps {
+    /** Elemento del item actualmente hovered/focused */
+    targetElement: HTMLElement | null;
+    /** Indica si el indicador está visible */
+    isVisible: boolean;
+}
+/**
+ * Componente wrapper de FluidHoverIndicator para Sidebar
+ *
+ * @description
+ * Wrapper que conecta el FluidHoverIndicator (glassmorphism + spring physics)
+ * con el sistema de estado del Sidebar. Este componente decide automáticamente
+ * qué versión renderizar basándose en las feature flags:
+ *
+ * - **V1 (default)**: FluidHoverIndicator con backdrop-blur CSS básico
+ * - **V2 (experimental)**: FluidHoverIndicatorV2 con SVG displacement mapping
+ *
+ * Feature flags del contexto:
+ * - `liquidGlass.enableLiquidGlassV2`: Activa la versión V2
+ * - `liquidGlass.enableChromaticAberration`: Activa chromatic aberration (Phase 2)
+ *
+ * @example
+ * ```tsx
+ * <SidebarNav>
+ *   <SidebarIndicator />
+ *   <SidebarFluidIndicator targetElement={currentItemElement} isVisible={isVisible} />
+ *   <SidebarContent>...</SidebarContent>
+ * </SidebarNav>
+ * ```
+ */
+export declare function SidebarFluidIndicator({ targetElement, isVisible }: SidebarFluidIndicatorProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=SidebarFluidIndicator.d.ts.map

package/dist/components/Sidebar/SidebarFluidIndicator.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SidebarFluidIndicator.d.ts","sourceRoot":"","sources":["../../../src/components/Sidebar/SidebarFluidIndicator.tsx"],"names":[],"mappings":"AAMA;;;GAGG;AACH,UAAU,0BAA0B;IAClC,oDAAoD;IACpD,aAAa,EAAE,WAAW,GAAG,IAAI,CAAA;IACjC,2CAA0C;IAC1C,SAAS,EAAE,OAAO,CAAA;CACnB;AAED;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,wBAAgB,qBAAqB,CAAC,EAAE,aAAa,EAAE,SAAS,EAAE,EAAE,0BAA0B,2CAyB7F"}

package/dist/components/Sidebar/SidebarIndicator.d.ts

@@ -0,0 +1,59 @@
+import type { SidebarIndicatorProps } from "./Sidebar.types";
+/**
+ * Componente de indicador visual del Sidebar
+ *
+ * @description
+ * Indicador visual que sigue al cursor del mouse (o item enfocado) dentro
+ * del área de navegación. Proporciona feedback visual claro al usuario.
+ *
+ * Características:
+ * - Se muestra solo cuando el mouse está sobre el área de items
+ * - Sigue al cursor con animación suave
+ * - Se posiciona en el item enfocado al navegar por teclado
+ * - Totalmente customizable con className y style
+ * - Soporta render props para control total del contenido
+ * - Color y dimensiones configurables via contexto
+ *
+ * El indicador se oculta automáticamente cuando:
+ * - El mouse sale del sidebar
+ * - El cursor está fuera del área de items
+ * - Se pierde el focus del sidebar
+ *
+ * @example
+ * ```tsx
+ * // Uso básico con estilos por defecto
+ * <SidebarNav>
+ *   <SidebarIndicator />
+ *   <SidebarContent>...</SidebarContent>
+ * </SidebarNav>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Con estilos custom
+ * <SidebarIndicator className="bg-red-500 w-1" />
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Con render props
+ * <SidebarIndicator>
+ *   {({ visible, position }) => (
+ *     <div
+ *       className={cn('indicator', visible && 'opacity-100')}
+ *       style={{ top: position }}
+ *     >
+ *       <span>→</span>
+ *     </div>
+ *   )}
+ * </SidebarIndicator>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Como elemento custom
+ * <SidebarIndicator as={motion.div} animate={{ opacity: 1 }} />
+ * ```
+ */
+export declare const SidebarIndicator: import("react").ForwardRefExoticComponent<SidebarIndicatorProps & import("react").RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=SidebarIndicator.d.ts.map

package/dist/components/Sidebar/SidebarIndicator.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SidebarIndicator.d.ts","sourceRoot":"","sources":["../../../src/components/Sidebar/SidebarIndicator.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,qBAAqB,EAA8B,MAAM,iBAAiB,CAAA;AAGxF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAuDG;AACH,eAAO,MAAM,gBAAgB,kHAkE5B,CAAA"}

package/dist/components/Sidebar/SidebarItem.d.ts

@@ -0,0 +1,82 @@
+import type { SidebarItemProps } from "./Sidebar.types";
+/**
+ * Componente item de navegación del Sidebar
+ *
+ * @description
+ * Item individual de navegación dentro del sidebar.
+ * Renderiza un `<a>` por defecto, pero puede ser cualquier elemento
+ * o componente (ej: React Router Link, Next.js Link).
+ *
+ * Características:
+ * - Soporta iconos y labels
+ * - Gestiona estados de hover y focus
+ * - Se registra automáticamente para navegación por teclado
+ * - Aplica data attributes para styling
+ * - Soporta render props para control total
+ * - Compatible con React Router, Next.js, etc. via prop `as`
+ * - Label oculto automáticamente cuando sidebar está colapsado (via CSS container queries)
+ *
+ * @example
+ * ```tsx
+ * // Uso básico
+ * <SidebarItem
+ *   href="/"
+ *   icon={<HomeIcon />}
+ *   label="Home"
+ * />
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Con React Router
+ * <SidebarItem
+ *   as={Link}
+ *   to="/dashboard"
+ *   icon={<DashboardIcon />}
+ *   label="Dashboard"
+ * />
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Con Next.js Link
+ * <SidebarItem
+ *   LinkComponent={Link}
+ *   href="/profile"
+ *   icon={<UserIcon />}
+ *   label="Profile"
+ * />
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Con render props
+ * <SidebarItem href="/settings">
+ *   {({ focused, hovered, disabled }) => (
+ *     <div className={cn(
+ *       'flex items-center gap-2',
+ *       focused && 'ring-2',
+ *       hovered && 'bg-zinc-800',
+ *       disabled && 'opacity-50'
+ *     )}>
+ *       <SettingsIcon />
+ *       <span>Settings</span>
+ *     </div>
+ *   )}
+ * </SidebarItem>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Con callbacks
+ * <SidebarItem
+ *   href="/analytics"
+ *   icon={<ChartIcon />}
+ *   label="Analytics"
+ *   onHover={() => prefetchAnalytics()}
+ *   onClick={() => trackNavigation('analytics')}
+ * />
+ * ```
+ */
+export declare const SidebarItem: import("react").ForwardRefExoticComponent<SidebarItemProps & import("react").RefAttributes<HTMLAnchorElement>>;
+//# sourceMappingURL=SidebarItem.d.ts.map

package/dist/components/Sidebar/SidebarItem.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SidebarItem.d.ts","sourceRoot":"","sources":["../../../src/components/Sidebar/SidebarItem.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,gBAAgB,EAAyB,MAAM,iBAAiB,CAAA;AAQ9E;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8EG;AACH,eAAO,MAAM,WAAW,gHAwKtB,CAAA"}

package/dist/components/Sidebar/SidebarNav.d.ts

@@ -0,0 +1,48 @@
+import type { SidebarNavProps } from "./Sidebar.types";
+/**
+ * Componente de navegación del Sidebar
+ *
+ * @description
+ * Contenedor de navegación que renderiza un elemento `<nav>` por defecto.
+ * Gestiona los eventos de mouse y teclado para el indicador visual y
+ * la navegación accesible.
+ *
+ * Este componente:
+ * - Aplica data attributes para reflejar el estado (open/collapsed)
+ * - Gestiona eventos de mouse para el indicador visual
+ * - Gestiona navegación por teclado (arrows, home, end)
+ * - Expone una ref al elemento DOM para mediciones
+ *
+ * Usa forwardRef para permitir acceso al elemento DOM desde componentes padre.
+ *
+ * @example
+ * ```tsx
+ * <Sidebar>
+ *   <SidebarNav className="bg-zinc-900 border-zinc-800">
+ *     <SidebarToggle />
+ *     <SidebarIndicator />
+ *     <SidebarContent>
+ *       <SidebarItem href="/" />
+ *     </SidebarContent>
+ *   </SidebarNav>
+ * </Sidebar>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Con data attributes para styling
+ * <SidebarNav className="data-[open=true]:w-64 data-[open=false]:w-16">
+ *   {children}
+ * </SidebarNav>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Con elemento personalizado
+ * <SidebarNav as="aside" aria-label="Navegación lateral">
+ *   {children}
+ * </SidebarNav>
+ * ```
+ */
+export declare const SidebarNav: import("react").ForwardRefExoticComponent<SidebarNavProps & import("react").RefAttributes<HTMLElement>>;
+//# sourceMappingURL=SidebarNav.d.ts.map

package/dist/components/Sidebar/SidebarNav.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SidebarNav.d.ts","sourceRoot":"","sources":["../../../src/components/Sidebar/SidebarNav.tsx"],"names":[],"mappings":"AAYA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAA;AAYtD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4CG;AACH,eAAO,MAAM,UAAU,yGA6erB,CAAA"}

package/dist/components/Sidebar/SidebarSafeArea.d.ts

@@ -0,0 +1,56 @@
+import type { SidebarSafeAreaProps } from "./Sidebar.types";
+/**
+ * Componente de área segura del Sidebar
+ *
+ * @description
+ * Área reservada en la parte superior o inferior del sidebar para
+ * contenido especial como logos, usuario, configuración, etc.
+ *
+ * Las áreas seguras:
+ * - No contienen items de navegación
+ * - Tienen altura porcentual configurable
+ * - Pueden mostrar patrones de debug
+ * - Son completamente customizables
+ *
+ * Casos de uso comunes:
+ * - Top: Logo, título de la aplicación, búsqueda
+ * - Bottom: Usuario, configuración, logout
+ *
+ * @example
+ * ```tsx
+ * <SidebarNav>
+ *   <SidebarSafeArea position="top" percent={20}>
+ *     <img src="/logo.png" alt="Logo" />
+ *   </SidebarSafeArea>
+ *
+ *   <SidebarContent>
+ *     <SidebarItem href="/" />
+ *   </SidebarContent>
+ *
+ *   <SidebarSafeArea position="bottom" percent={15}>
+ *     <UserProfile />
+ *   </SidebarSafeArea>
+ * </SidebarNav>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Con estilos custom
+ * <SidebarSafeArea
+ *   position="top"
+ *   className="bg-zinc-950 border-b border-zinc-800"
+ * >
+ *   <h1>Mi App</h1>
+ * </SidebarSafeArea>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Override de porcentaje
+ * <SidebarSafeArea position="bottom" percent={30}>
+ *   <ExtendedFooter />
+ * </SidebarSafeArea>
+ * ```
+ */
+export declare const SidebarSafeArea: import("react").ForwardRefExoticComponent<SidebarSafeAreaProps & import("react").RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=SidebarSafeArea.d.ts.map

package/dist/components/Sidebar/SidebarSafeArea.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SidebarSafeArea.d.ts","sourceRoot":"","sources":["../../../src/components/Sidebar/SidebarSafeArea.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,iBAAiB,CAAA;AAO3D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoDG;AACH,eAAO,MAAM,eAAe,iHAsE3B,CAAA"}

package/dist/components/Sidebar/SidebarSubContent.d.ts

@@ -0,0 +1,10 @@
+import type { ReactNode } from "react";
+export interface SidebarSubContentProps {
+    children: ReactNode;
+    title?: string;
+}
+export declare function SidebarSubContent({ children, title }: SidebarSubContentProps): null;
+export declare namespace SidebarSubContent {
+    var displayName: string;
+}
+//# sourceMappingURL=SidebarSubContent.d.ts.map

package/dist/components/Sidebar/SidebarSubContent.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SidebarSubContent.d.ts","sourceRoot":"","sources":["../../../src/components/Sidebar/SidebarSubContent.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAEtC,MAAM,WAAW,sBAAsB;IACrC,QAAQ,EAAE,SAAS,CAAA;IACnB,KAAK,CAAC,EAAE,MAAM,CAAA;CACf;AAED,wBAAgB,iBAAiB,CAAC,EAAE,QAAQ,EAAE,KAAK,EAAE,EAAE,sBAAsB,QAE5E"}

package/dist/components/Sidebar/SidebarSubLink.d.ts

@@ -0,0 +1,18 @@
+import type { ReactNode, ComponentType, MouseEvent as ReactMouseEvent, CSSProperties } from "react";
+export interface SidebarSubLinkProps {
+    href: string;
+    children: ReactNode;
+    icon?: ReactNode;
+    LinkComponent?: ComponentType<any>;
+    linkProps?: Record<string, any>;
+    className?: string;
+    onClick?: (e: ReactMouseEvent<HTMLAnchorElement>) => void;
+    animationOrder?: number;
+    animationState?: 'entering' | 'leaving' | 'static';
+    style?: CSSProperties;
+}
+export declare function SidebarSubLink({ href, children, icon, LinkComponent, linkProps, className, onClick, animationOrder, animationState, style }: SidebarSubLinkProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace SidebarSubLink {
+    var displayName: string;
+}
+//# sourceMappingURL=SidebarSubLink.d.ts.map

package/dist/components/Sidebar/SidebarSubLink.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SidebarSubLink.d.ts","sourceRoot":"","sources":["../../../src/components/Sidebar/SidebarSubLink.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,aAAa,EAAE,UAAU,IAAI,eAAe,EAAE,aAAa,EAAE,MAAM,OAAO,CAAA;AAGnG,MAAM,WAAW,mBAAmB;IAClC,IAAI,EAAE,MAAM,CAAA;IACZ,QAAQ,EAAE,SAAS,CAAA;IACnB,IAAI,CAAC,EAAE,SAAS,CAAA;IAChB,aAAa,CAAC,EAAE,aAAa,CAAC,GAAG,CAAC,CAAA;IAClC,SAAS,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAA;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,eAAe,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAA;IACzD,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,cAAc,CAAC,EAAE,UAAU,GAAG,SAAS,GAAG,QAAQ,CAAA;IAClD,KAAK,CAAC,EAAE,aAAa,CAAA;CACtB;AAED,wBAAgB,cAAc,CAAC,EAC7B,IAAI,EACJ,QAAQ,EACR,IAAI,EACJ,aAAa,EACb,SAAc,EACd,SAAS,EACT,OAAO,EACP,cAAc,EACd,cAAc,EACd,KAAK,EACN,EAAE,mBAAmB,2CA0BrB"}

package/dist/components/Sidebar/SidebarToggle.d.ts

@@ -0,0 +1,52 @@
+import type { SidebarToggleProps } from "./Sidebar.types";
+/**
+ * Componente de botón toggle del Sidebar
+ *
+ * @description
+ * Botón que controla el estado abierto/cerrado del sidebar.
+ * Renderiza un `<label>` por defecto que controla un checkbox oculto,
+ * permitiendo gestionar el estado con CSS puro (:checked selector).
+ *
+ * Características:
+ * - Soporta render props para acceso al estado (open, active)
+ * - Renderiza icono de chevron por defecto (customizable)
+ * - Aplica data attributes para styling CSS
+ * - Accesibilidad completa (aria-label, aria-expanded)
+ * - Soporta prop `as` para usar elemento/componente custom
+ *
+ * @example
+ * ```tsx
+ * // Uso básico con icono por defecto
+ * <SidebarToggle />
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Con render props para estado
+ * <SidebarToggle>
+ *   {({ open, active }) => (
+ *     <div className={cn(active && 'bg-blue-500')}>
+ *       {open ? <CloseIcon /> : <MenuIcon />}
+ *     </div>
+ *   )}
+ * </SidebarToggle>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Con icono custom
+ * <SidebarToggle className="bg-zinc-800">
+ *   <CustomChevronIcon />
+ * </SidebarToggle>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Como botón real (sin checkbox)
+ * <SidebarToggle as="button" onClick={() => setOpen(!open)}>
+ *   Toggle
+ * </SidebarToggle>
+ * ```
+ */
+export declare const SidebarToggle: import("react").ForwardRefExoticComponent<SidebarToggleProps & import("react").RefAttributes<HTMLButtonElement | HTMLLabelElement>>;
+//# sourceMappingURL=SidebarToggle.d.ts.map

package/dist/components/Sidebar/SidebarToggle.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SidebarToggle.d.ts","sourceRoot":"","sources":["../../../src/components/Sidebar/SidebarToggle.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,kBAAkB,EAAgD,MAAM,iBAAiB,CAAA;AAoEvG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgDG;AACH,eAAO,MAAM,aAAa,qIA6EzB,CAAA"}

package/dist/components/Sidebar/SidebarTooltip.d.ts

@@ -0,0 +1,26 @@
+import type { ReactNode } from "react";
+import '@/animations/tooltip-keyframes.css';
+export interface SidebarTooltipProps {
+    /** Contenido del tooltip */
+    children: ReactNode;
+    /** Título opcional del tooltip */
+    title?: string;
+    /** Modo debug para visualizar safety triangle y layers */
+    debug?: boolean;
+    /** Handler llamado cuando el mouse sale del tooltip */
+    onMouseLeave?: () => void;
+    /** Habilitar liquid glass con SVG displacement filters (false = backdrop-blur básico) */
+    enableLiquidGlass?: boolean;
+    /** Habilitar Edge Glass 3D (dual backdrop layers para profundidad) */
+    enableEdgeGlass3D?: boolean;
+    /** Habilitar Backdrop Extension (Josh Comeau technique - 200% height) */
+    enableBackdropExtension?: boolean;
+    /** Habilitar chromatic aberration RGB (requiere enableLiquidGlass) */
+    enableChromaticAberration?: boolean;
+    /** Habilitar animaciones staggered de items (entrada/salida escalonada) */
+    enableTooltipItemAnimations?: boolean;
+    /** Habilitar animación 3D de cilindro para el título del tooltip */
+    enableCylinderTitle?: boolean;
+}
+export declare const SidebarTooltip: import("react").NamedExoticComponent<SidebarTooltipProps>;
+//# sourceMappingURL=SidebarTooltip.d.ts.map

package/dist/components/Sidebar/SidebarTooltip.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SidebarTooltip.d.ts","sourceRoot":"","sources":["../../../src/components/Sidebar/SidebarTooltip.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,SAAS,EAAgB,MAAM,OAAO,CAAA;AAKpD,OAAO,oCAAoC,CAAA;AAY3C,MAAM,WAAW,mBAAmB;IAClC,4BAA4B;IAC5B,QAAQ,EAAE,SAAS,CAAA;IACnB,mCAAkC;IAClC,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,0DAA0D;IAC1D,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,uDAAuD;IACvD,YAAY,CAAC,EAAE,MAAM,IAAI,CAAA;IAEzB,0FAAyF;IACzF,iBAAiB,CAAC,EAAE,OAAO,CAAA;IAC3B,sEAAsE;IACtE,iBAAiB,CAAC,EAAE,OAAO,CAAA;IAC3B,yEAAyE;IACzE,uBAAuB,CAAC,EAAE,OAAO,CAAA;IACjC,sEAAsE;IACtE,yBAAyB,CAAC,EAAE,OAAO,CAAA;IAEnC,2EAA2E;IAC3E,2BAA2B,CAAC,EAAE,OAAO,CAAA;IACrC,sEAAoE;IACpE,mBAAmB,CAAC,EAAE,OAAO,CAAA;CAC9B;AAED,eAAO,MAAM,cAAc,2DA+VzB,CAAA"}

package/dist/components/Sidebar/TooltipTitle3D.d.ts

@@ -0,0 +1,42 @@
+/**
+ * TooltipTitle3D
+ *
+ * Enfoque A: Cubo 3D Multi-cara con preserve-3d
+ *
+ * Implementa un cubo 3D CSS con 4 caras (front, top, bottom, back) que contienen
+ * títulos pre-renderizados. La rotación del cubo muestra la cara apropiada
+ * basada en la dirección de navegación.
+ *
+ * Ventajas:
+ * - True 3D effect con hardware acceleration
+ * - Smooth rotation entre caras
+ * - No flickering (títulos pre-renderizados)
+ * - Soporte para múltiples títulos (4 caras disponibles)
+ *
+ * Desventajas:
+ * - Require pre-renderizar títulos en todas las caras
+ * - Más complejo que crossfade approach
+ * - Limitado a 4 títulos diferentes sin regenerar caras
+ *
+ * @example
+ * ```tsx
+ * <TooltipTitle3D
+ *   titles={['Home', 'Search', 'Settings', 'Profile']}
+ *   currentFaceIndex={0}
+ *   debug={false}
+ * />
+ * ```
+ */
+export interface TooltipTitle3DProps {
+    titles: string[];
+    currentFaceIndex?: number;
+    debug?: boolean;
+    className?: string;
+}
+export interface TooltipTitle3DRef {
+    scene: HTMLDivElement | null;
+    cube: HTMLDivElement | null;
+}
+export declare const TooltipTitle3D: import("react").ForwardRefExoticComponent<TooltipTitle3DProps & import("react").RefAttributes<TooltipTitle3DRef>>;
+export default TooltipTitle3D;
+//# sourceMappingURL=TooltipTitle3D.d.ts.map

package/dist/components/Sidebar/TooltipTitle3D.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TooltipTitle3D.d.ts","sourceRoot":"","sources":["../../../src/components/Sidebar/TooltipTitle3D.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AAKH,MAAM,WAAW,mBAAmB;IAClC,MAAM,EAAE,MAAM,EAAE,CAAC;IACjB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,WAAW,iBAAiB;IAChC,KAAK,EAAE,cAAc,GAAG,IAAI,CAAC;IAC7B,IAAI,EAAE,cAAc,GAAG,IAAI,CAAC;CAC7B;AAED,eAAO,MAAM,cAAc,mHAgD1B,CAAC;AAIF,eAAe,cAAc,CAAC"}

package/dist/components/Sidebar/TooltipTitle3DCrossfade.d.ts

@@ -0,0 +1,46 @@
+/**
+ * TooltipTitle3DCrossfade
+ *
+ * Enfoque B: Rotación 3D con Crossfade
+ *
+ * Implementa transición de título con dos elementos (old/new) que rotan en 3D
+ * con crossfade simultáneo. Más simple y flexible que el enfoque de cubo.
+ *
+ * Ventajas:
+ * - Más simple que cubo multi-cara
+ * - No requiere pre-renderizar títulos
+ * - Flexible para cualquier número de títulos
+ * - Mejor performance (solo 2 elementos animados)
+ *
+ * Desventajas:
+ * - Requiere gestión de estado old/new title
+ * - Posible flickering si no se maneja bien el timing
+ *
+ * @example
+ * ```tsx
+ * <TooltipTitle3DCrossfade
+ *   oldTitle="Home"
+ *   newTitle="Search"
+ *   direction="down"
+ *   isTransitioning={true}
+ *   debug={false}
+ * />
+ * ```
+ */
+import type { TooltipDirection } from './hooks/useTooltipDirection';
+export interface TooltipTitle3DCrossfadeProps {
+    oldTitle?: string;
+    newTitle: string;
+    direction?: TooltipDirection;
+    isTransitioning?: boolean;
+    debug?: boolean;
+    className?: string;
+}
+export interface TooltipTitle3DCrossfadeRef {
+    container: HTMLDivElement | null;
+    oldTitleEl: HTMLDivElement | null;
+    newTitleEl: HTMLDivElement | null;
+}
+export declare const TooltipTitle3DCrossfade: import("react").ForwardRefExoticComponent<TooltipTitle3DCrossfadeProps & import("react").RefAttributes<TooltipTitle3DCrossfadeRef>>;
+export default TooltipTitle3DCrossfade;
+//# sourceMappingURL=TooltipTitle3DCrossfade.d.ts.map

package/dist/components/Sidebar/TooltipTitle3DCrossfade.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TooltipTitle3DCrossfade.d.ts","sourceRoot":"","sources":["../../../src/components/Sidebar/TooltipTitle3DCrossfade.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AAIH,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,6BAA6B,CAAC;AAEpE,MAAM,WAAW,4BAA4B;IAC3C,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,EAAE,MAAM,CAAC;IACjB,SAAS,CAAC,EAAE,gBAAgB,CAAC;IAC7B,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,WAAW,0BAA0B;IACzC,SAAS,EAAE,cAAc,GAAG,IAAI,CAAC;IACjC,UAAU,EAAE,cAAc,GAAG,IAAI,CAAC;IAClC,UAAU,EAAE,cAAc,GAAG,IAAI,CAAC;CACnC;AAED,eAAO,MAAM,uBAAuB,qIAqElC,CAAC;AAIH,eAAe,uBAAuB,CAAC"}

package/dist/components/Sidebar/TooltipTitleCylinder.d.ts

@@ -0,0 +1,9 @@
+import type { TooltipDirection } from './hooks/useTooltipDirection';
+export interface TooltipTitleCylinderProps {
+    title: string;
+    direction: TooltipDirection;
+    className?: string;
+    maxHistory?: number;
+}
+export declare function TooltipTitleCylinder({ title, direction, className, maxHistory }: TooltipTitleCylinderProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=TooltipTitleCylinder.d.ts.map

package/dist/components/Sidebar/TooltipTitleCylinder.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TooltipTitleCylinder.d.ts","sourceRoot":"","sources":["../../../src/components/Sidebar/TooltipTitleCylinder.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,6BAA6B,CAAA;AAEnE,MAAM,WAAW,yBAAyB;IACxC,KAAK,EAAE,MAAM,CAAA;IACb,SAAS,EAAE,gBAAgB,CAAA;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,UAAU,CAAC,EAAE,MAAM,CAAA;CACpB;AAED,wBAAgB,oBAAoB,CAAC,EACnC,KAAK,EACL,SAAS,EACT,SAAS,EACT,UAAe,EAChB,EAAE,yBAAyB,2CA8B3B"}