@mks2508/sidebar-headless 0.2.0 → 0.3.0

package/dist/components/Sidebar/hooks/useSidebarContext.d.ts

@@ -0,0 +1,48 @@
+import type { SidebarContextValue } from "../Sidebar.types";
+/**
+ * Hook para acceder al contexto del Sidebar
+ *
+ * @description
+ * Hook personalizado que provee acceso al contexto compartido del Sidebar.
+ * Debe ser utilizado dentro de un componente que esté envuelto por
+ * `<Sidebar>` o `<SidebarProvider>`.
+ *
+ * Lanza un error si se utiliza fuera del contexto apropiado, ayudando
+ * a detectar problemas de composición durante el desarrollo.
+ *
+ * @throws {Error} Si se usa fuera de un SidebarProvider
+ *
+ * @returns {SidebarContextValue} El valor del contexto del sidebar
+ *
+ * @example
+ * ```tsx
+ * function CustomToggle() {
+ *   const { open, setOpen } = useSidebarContext()
+ *
+ *   return (
+ *     <button onClick={() => setOpen(!open)}>
+ *       {open ? 'Cerrar' : 'Abrir'}
+ *     </button>
+ *   )
+ * }
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Acceder a configuración
+ * function CustomItem() {
+ *   const { colors, dimensions } = useSidebarContext()
+ *
+ *   return (
+ *     <div style={{
+ *       background: colors.hover,
+ *       width: dimensions.expandedWidth
+ *     }}>
+ *       Item
+ *     </div>
+ *   )
+ * }
+ * ```
+ */
+export declare function useSidebarContext(): SidebarContextValue;
+//# sourceMappingURL=useSidebarContext.d.ts.map

package/dist/components/Sidebar/hooks/useSidebarContext.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useSidebarContext.d.ts","sourceRoot":"","sources":["../../../../src/components/Sidebar/hooks/useSidebarContext.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAA;AAE3D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4CG;AACH,wBAAgB,iBAAiB,IAAI,mBAAmB,CAWvD"}

package/dist/components/Sidebar/hooks/useSidebarIndicator.d.ts

@@ -0,0 +1,72 @@
+import type { MouseEvent } from "react";
+/**
+ * Valor de retorno del hook useSidebarIndicator
+ * @interface
+ */
+interface UseSidebarIndicatorReturn {
+    /** Indica si el indicador está visible */
+    isVisible: boolean;
+    /** Indica si el mouse está sobre el área de items */
+    isOverItems: boolean;
+    /** Elemento del item actualmente hovered o enfocado (para FluidHoverIndicator) */
+    currentItemElement: HTMLElement | null;
+    /** ID del item bajo el indicador (para tooltip con subContent) */
+    hoveredItemId: string | null;
+    /** Label del item hovered (para tooltip simple) */
+    hoveredLabel: string | null;
+    /** Manejador de evento mousemove */
+    handleMouseMove: (e: MouseEvent<HTMLDivElement>) => void;
+    /** Manejador de evento mouseenter */
+    handleMouseEnter: () => void;
+    /** Manejador de evento mouseleave */
+    handleMouseLeave: () => void;
+    /** Manejador de evento focus */
+    handleFocus: () => void;
+    /** Manejador de evento blur */
+    handleBlur: (e: React.FocusEvent) => void;
+    /** Función para limpiar el estado hovered desde fuera (tooltip mouseleave) */
+    clearHoveredState: () => void;
+}
+/**
+ * Hook para gestionar el indicador visual del Sidebar
+ *
+ * @description
+ * Hook que implementa la lógica del indicador visual que sigue al cursor
+ * del mouse dentro del sidebar. El indicador se muestra cuando:
+ * - El mouse está sobre el sidebar (isHovering = true)
+ * - El cursor está en el área de items (isOverItems = true)
+ *
+ * Utiliza requestAnimationFrame para optimizar el rendimiento y evitar
+ * cálculos excesivos durante el movimiento del mouse.
+ *
+ * El indicador también se actualiza cuando se navega por teclado,
+ * integrándose con useSidebarKeyboard.
+ *
+ * @returns {UseSidebarIndicatorReturn} Estado y manejadores de eventos
+ *
+ * @example
+ * ```tsx
+ * function SidebarNav() {
+ *   const {
+ *     isVisible,
+ *     handleMouseMove,
+ *     handleMouseEnter,
+ *     handleMouseLeave
+ *   } = useSidebarIndicator()
+ *
+ *   return (
+ *     <nav
+ *       onMouseMove={handleMouseMove}
+ *       onMouseEnter={handleMouseEnter}
+ *       onMouseLeave={handleMouseLeave}
+ *     >
+ *       <SidebarIndicator visible={isVisible} />
+ *       {children}
+ *     </nav>
+ *   )
+ * }
+ * ```
+ */
+export declare function useSidebarIndicator(): UseSidebarIndicatorReturn;
+export {};
+//# sourceMappingURL=useSidebarIndicator.d.ts.map

package/dist/components/Sidebar/hooks/useSidebarIndicator.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useSidebarIndicator.d.ts","sourceRoot":"","sources":["../../../../src/components/Sidebar/hooks/useSidebarIndicator.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AAGvC;;;GAGG;AACH,UAAU,yBAAyB;IACjC,2CAA0C;IAC1C,SAAS,EAAE,OAAO,CAAA;IAClB,uDAAqD;IACrD,WAAW,EAAE,OAAO,CAAA;IACpB,kFAAkF;IAClF,kBAAkB,EAAE,WAAW,GAAG,IAAI,CAAA;IACtC,kEAAkE;IAClE,aAAa,EAAE,MAAM,GAAG,IAAI,CAAA;IAC5B,mDAAmD;IACnD,YAAY,EAAE,MAAM,GAAG,IAAI,CAAA;IAC3B,oCAAoC;IACpC,eAAe,EAAE,CAAC,CAAC,EAAE,UAAU,CAAC,cAAc,CAAC,KAAK,IAAI,CAAA;IACxD,qCAAqC;IACrC,gBAAgB,EAAE,MAAM,IAAI,CAAA;IAC5B,qCAAqC;IACrC,gBAAgB,EAAE,MAAM,IAAI,CAAA;IAC5B,gCAAgC;IAChC,WAAW,EAAE,MAAM,IAAI,CAAA;IACvB,+BAA+B;IAC/B,UAAU,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAA;IACzC,+EAA8E;IAC9E,iBAAiB,EAAE,MAAM,IAAI,CAAA;CAC9B;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAuCG;AACH,wBAAgB,mBAAmB,IAAI,yBAAyB,CA2K/D"}

package/dist/components/Sidebar/hooks/useSidebarKeyboard.d.ts

@@ -0,0 +1,51 @@
+/**
+ * Valor de retorno del hook useSidebarKeyboard
+ * @interface
+ */
+interface UseSidebarKeyboardReturn {
+    /** Índice del item actualmente enfocado (-1 si ninguno) */
+    focusedIndex: number;
+    /** Función para cambiar el índice enfocado manualmente */
+    setFocusedIndex: (index: number) => void;
+    /** Callback para actualizar el indicador según el item enfocado */
+    updateIndicatorForFocus: (index: number) => void;
+}
+/**
+ * Hook para gestionar la navegación por teclado en el Sidebar
+ *
+ * @description
+ * Hook que implementa navegación accesible por teclado para los items
+ * del sidebar, siguiendo las especificaciones WAI-ARIA:
+ *
+ * - ArrowDown: Navegar al siguiente item
+ * - ArrowUp: Navegar al item anterior
+ * - Home: Ir al primer item
+ * - End: Ir al último item
+ * - Tab: Navegación estándar que actualiza el indicador
+ *
+ * También sincroniza el indicador visual con el item enfocado.
+ *
+ * @returns {UseSidebarKeyboardReturn} Estado y funciones para navegación
+ *
+ * @example
+ * ```tsx
+ * function SidebarNav() {
+ *   const { focusedIndex, updateIndicatorForFocus } = useSidebarKeyboard()
+ *
+ *   return (
+ *     <nav>
+ *       {items.map((item, index) => (
+ *         <SidebarItem
+ *           key={item.id}
+ *           focused={index === focusedIndex}
+ *           onFocus={() => updateIndicatorForFocus(index)}
+ *         />
+ *       ))}
+ *     </nav>
+ *   )
+ * }
+ * ```
+ */
+export declare function useSidebarKeyboard(): UseSidebarKeyboardReturn;
+export {};
+//# sourceMappingURL=useSidebarKeyboard.d.ts.map

package/dist/components/Sidebar/hooks/useSidebarKeyboard.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useSidebarKeyboard.d.ts","sourceRoot":"","sources":["../../../../src/components/Sidebar/hooks/useSidebarKeyboard.ts"],"names":[],"mappings":"AAMA;;;GAGG;AACH,UAAU,wBAAwB;IAChC,4DAA2D;IAC3D,YAAY,EAAE,MAAM,CAAA;IACpB,4DAA0D;IAC1D,eAAe,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IACxC,oEAAmE;IACnE,uBAAuB,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;CACjD;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmCG;AACH,wBAAgB,kBAAkB,IAAI,wBAAwB,CA+I7D"}

package/dist/components/Sidebar/hooks/useSubContent.d.ts

@@ -0,0 +1,7 @@
+export declare function useSubContent(): {
+    subContentMap: Map<string, import("../SidebarContext").SubContentData>;
+    registerSubContent: (itemId: string, data: import("../SidebarContext").SubContentData) => void;
+    unregisterSubContent: (itemId: string) => void;
+    getSubContent: (itemId: string) => import("../SidebarContext").SubContentData | undefined;
+};
+//# sourceMappingURL=useSubContent.d.ts.map

package/dist/components/Sidebar/hooks/useSubContent.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useSubContent.d.ts","sourceRoot":"","sources":["../../../../src/components/Sidebar/hooks/useSubContent.ts"],"names":[],"mappings":"AAKA,wBAAgB,aAAa;;;;;EAQ5B"}

package/dist/components/Sidebar/hooks/useTitleHistory.d.ts

@@ -0,0 +1,41 @@
+/**
+ * useTitleHistory
+ *
+ * Hook para mantener un historial circular de títulos del tooltip.
+ * Sincroniza con la dirección de navegación (up/down) para determinar el índice actual.
+ *
+ * Features:
+ * - Historial circular con límite máximo (default: 10 títulos)
+ * - Sincronización con dirección de navegación
+ * - Reset del historial
+ * - Manejo de primera renderización
+ *
+ * @example
+ * ```typescript
+ * const { titles, currentIndex, addTitle } = useTitleHistory({
+ *   maxHistory: 10
+ * });
+ *
+ * // Al cambiar de item
+ * addTitle('New Item', 'down');
+ * // titles = ['New Item']
+ * // currentIndex = 0
+ * ```
+ */
+import type { TooltipDirection } from './useTooltipDirection';
+export interface UseTitleHistoryOptions {
+    /** Máximo número de títulos en historial (default: 10) */
+    maxHistory?: number;
+}
+export interface UseTitleHistoryReturn {
+    /** Array de títulos en el historial */
+    titles: string[];
+    /** Índice actual en el historial */
+    currentIndex: number;
+    /** Agregar nuevo título según dirección de navegación */
+    addTitle: (newTitle: string, direction: TooltipDirection) => void;
+    /** Resetear historial */
+    reset: () => void;
+}
+export declare function useTitleHistory({ maxHistory }?: UseTitleHistoryOptions): UseTitleHistoryReturn;
+//# sourceMappingURL=useTitleHistory.d.ts.map

package/dist/components/Sidebar/hooks/useTitleHistory.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useTitleHistory.d.ts","sourceRoot":"","sources":["../../../../src/components/Sidebar/hooks/useTitleHistory.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AAGH,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAA;AAE7D,MAAM,WAAW,sBAAsB;IACrC,6DAA0D;IAC1D,UAAU,CAAC,EAAE,MAAM,CAAA;CACpB;AAED,MAAM,WAAW,qBAAqB;IACpC,wCAAuC;IACvC,MAAM,EAAE,MAAM,EAAE,CAAA;IAChB,qCAAoC;IACpC,YAAY,EAAE,MAAM,CAAA;IACpB,6DAAyD;IACzD,QAAQ,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,SAAS,EAAE,gBAAgB,KAAK,IAAI,CAAA;IACjE,yBAAyB;IACzB,KAAK,EAAE,MAAM,IAAI,CAAA;CAClB;AAED,wBAAgB,eAAe,CAAC,EAC9B,UAAe,EAChB,GAAE,sBAA2B,GAAG,qBAAqB,CAoFrD"}

package/dist/components/Sidebar/hooks/useTooltipDirection.d.ts

@@ -0,0 +1,29 @@
+/**
+ * useTooltipDirection
+ *
+ * Hook para detectar la dirección de navegación en el sidebar basado en índices.
+ *
+ * Direction-aware animations:
+ * - Si navegamos a un item con índice mayor → direction: 'down'
+ * - Si navegamos a un item con índice menor → direction: 'up'
+ * - Primera navegación → direction: 'down' (default)
+ *
+ * @example
+ * ```typescript
+ * const { getDirection, currentIndex } = useTooltipDirection();
+ *
+ * // Al cambiar de item
+ * const direction = getDirection(newItemIndex);
+ * // direction = 'up' | 'down'
+ * ```
+ */
+export type TooltipDirection = 'up' | 'down';
+export interface UseTooltipDirectionReturn {
+    getDirection: (currentIndex: number) => TooltipDirection;
+    currentIndex: number | null;
+    previousIndex: number | null;
+    reset: () => void;
+}
+export declare function useTooltipDirection(): UseTooltipDirectionReturn;
+export default useTooltipDirection;
+//# sourceMappingURL=useTooltipDirection.d.ts.map

package/dist/components/Sidebar/hooks/useTooltipDirection.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useTooltipDirection.d.ts","sourceRoot":"","sources":["../../../../src/components/Sidebar/hooks/useTooltipDirection.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;GAkBG;AAIH,MAAM,MAAM,gBAAgB,GAAG,IAAI,GAAG,MAAM,CAAC;AAE7C,MAAM,WAAW,yBAAyB;IACxC,YAAY,EAAE,CAAC,YAAY,EAAE,MAAM,KAAK,gBAAgB,CAAC;IACzD,YAAY,EAAE,MAAM,GAAG,IAAI,CAAC;IAC5B,aAAa,EAAE,MAAM,GAAG,IAAI,CAAC;IAC7B,KAAK,EAAE,MAAM,IAAI,CAAC;CACnB;AAED,wBAAgB,mBAAmB,IAAI,yBAAyB,CAkC/D;AAED,eAAe,mBAAmB,CAAC"}

package/dist/components/Sidebar/hooks/useTooltipTransition.d.ts

@@ -0,0 +1,60 @@
+/**
+ * useTooltipTransition
+ *
+ * Hook principal para orquestar animaciones de tooltip con:
+ * - Direction-aware animations (up/down)
+ * - Cancelación automática en hover rápido
+ * - Sincronización de título, items y height
+ * - Soporte para ambos enfoques de título 3D
+ *
+ * @example
+ * ```typescript
+ * const {
+ *   transition,
+ *   isAnimating,
+ *   controller
+ * } = useTooltipTransition({
+ *   debug: false,
+ *   customTimings: { titleDuration: 300 }
+ * });
+ *
+ * // Al cambiar de item
+ * await transition({
+ *   oldTitleEl: titleOldRef.current,
+ *   newTitleEl: titleNewRef.current,
+ *   oldItemsContainer: itemsOldRef.current,
+ *   newItemsContainer: itemsNewRef.current,
+ *   heightContainer: heightRef.current,
+ *   currentItemIndex: 2
+ * });
+ * ```
+ */
+import { TooltipAnimationController } from '@/utils/TooltipAnimationController';
+import type { AnimationTimings } from '@/utils/TooltipAnimationController';
+import type { TooltipDirection } from './useTooltipDirection';
+export interface UseTooltipTransitionOptions {
+    debug?: boolean;
+    customTimings?: Partial<AnimationTimings>;
+    onTransitionStart?: (direction: TooltipDirection) => void;
+    onTransitionEnd?: () => void;
+    onTransitionCancel?: () => void;
+}
+export interface TransitionOptions {
+    oldTitleEl: HTMLElement | null;
+    newTitleEl: HTMLElement | null;
+    oldItemsContainer: HTMLElement | null;
+    newItemsContainer: HTMLElement | null;
+    heightContainer: HTMLElement | null;
+    currentItemIndex: number;
+    skipTitleAnimation?: boolean;
+}
+export interface UseTooltipTransitionReturn {
+    transition: (options: TransitionOptions) => Promise<void>;
+    isAnimating: boolean;
+    currentDirection: TooltipDirection | null;
+    controller: TooltipAnimationController;
+    cancel: () => void;
+}
+export declare function useTooltipTransition(options?: UseTooltipTransitionOptions): UseTooltipTransitionReturn;
+export default useTooltipTransition;
+//# sourceMappingURL=useTooltipTransition.d.ts.map

package/dist/components/Sidebar/hooks/useTooltipTransition.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useTooltipTransition.d.ts","sourceRoot":"","sources":["../../../../src/components/Sidebar/hooks/useTooltipTransition.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AAGH,OAAO,EAAE,0BAA0B,EAAE,MAAM,oCAAoC,CAAC;AAChF,OAAO,KAAK,EAAE,gBAAgB,EAA2B,MAAM,oCAAoC,CAAC;AAEpG,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AAE9D,MAAM,WAAW,2BAA2B;IAC1C,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,aAAa,CAAC,EAAE,OAAO,CAAC,gBAAgB,CAAC,CAAC;IAC1C,iBAAiB,CAAC,EAAE,CAAC,SAAS,EAAE,gBAAgB,KAAK,IAAI,CAAC;IAC1D,eAAe,CAAC,EAAE,MAAM,IAAI,CAAC;IAC7B,kBAAkB,CAAC,EAAE,MAAM,IAAI,CAAC;CACjC;AAED,MAAM,WAAW,iBAAiB;IAChC,UAAU,EAAE,WAAW,GAAG,IAAI,CAAC;IAC/B,UAAU,EAAE,WAAW,GAAG,IAAI,CAAC;IAC/B,iBAAiB,EAAE,WAAW,GAAG,IAAI,CAAC;IACtC,iBAAiB,EAAE,WAAW,GAAG,IAAI,CAAC;IACtC,eAAe,EAAE,WAAW,GAAG,IAAI,CAAC;IACpC,gBAAgB,EAAE,MAAM,CAAC;IACzB,kBAAkB,CAAC,EAAE,OAAO,CAAC;CAC9B;AAED,MAAM,WAAW,0BAA0B;IACzC,UAAU,EAAE,CAAC,OAAO,EAAE,iBAAiB,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IAC1D,WAAW,EAAE,OAAO,CAAC;IACrB,gBAAgB,EAAE,gBAAgB,GAAG,IAAI,CAAC;IAC1C,UAAU,EAAE,0BAA0B,CAAC;IACvC,MAAM,EAAE,MAAM,IAAI,CAAC;CACpB;AAED,wBAAgB,oBAAoB,CAClC,OAAO,GAAE,2BAAgC,GACxC,0BAA0B,CAkF5B;AAED,eAAe,oBAAoB,CAAC"}

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

@@ -0,0 +1,163 @@
+/**
+ * Sidebar Component - Componente headless de sidebar con arquitectura primitiva
+ *
+ * @module Sidebar
+ *
+ * @description
+ * Sistema de sidebar altamente configurable siguiendo el patrón de componentes
+ * headless inspirado en Headless UI y shadcn/ui.
+ *
+ * **Características principales:**
+ * - Arquitectura headless con primitivos componibles
+ * - Soporte para render props y data attributes
+ * - Navegación por teclado (arrows, home, end)
+ * - Indicador visual animado
+ * - Modos de colapso (hide/collapse)
+ * - Accesibilidad WAI-ARIA completa
+ * - Usa tokens CSS de shadcn para colores
+ * - Dark/Light mode automático
+ * - TypeScript strict mode
+ *
+ * @example
+ * ```tsx
+ * import {
+ *   Sidebar,
+ *   SidebarNav,
+ *   SidebarToggle,
+ *   SidebarContent,
+ *   SidebarIndicator,
+ *   SidebarItem,
+ *   SidebarIconLibrary
+ * } from '@/components/Sidebar'
+ *
+ * function App() {
+ *   return (
+ *     <Sidebar defaultOpen={true}>
+ *       <SidebarNav>
+ *         <SidebarToggle iconLibrary={SidebarIconLibrary.LUCIDE} />
+ *         <SidebarIndicator />
+ *         <SidebarContent>
+ *           <SidebarItem href="/" icon={<HomeIcon />} label="Home" />
+ *           <SidebarItem href="/settings" icon={<SettingsIcon />} label="Settings" />
+ *         </SidebarContent>
+ *       </SidebarNav>
+ *     </Sidebar>
+ *   )
+ * }
+ * ```
+ */
+/**
+ * Componente raíz del Sidebar (Provider)
+ */
+export { Sidebar } from "./Sidebar";
+/**
+ * Contenedor de navegación con gestión de eventos
+ */
+export { SidebarNav } from "./SidebarNav";
+/**
+ * Botón toggle para abrir/cerrar el sidebar
+ */
+export { SidebarToggle } from "./SidebarToggle";
+/**
+ * Contenedor de items de navegación
+ */
+export { SidebarContent } from "./SidebarContent";
+/**
+ * Indicador visual que sigue al cursor/focus
+ */
+export { SidebarIndicator } from "./SidebarIndicator";
+/**
+ * Indicador fluid glassmorphism con spring physics (experimental)
+ */
+export { SidebarFluidIndicator } from "./SidebarFluidIndicator";
+/**
+ * Área segura (top/bottom) para contenido especial
+ */
+export { SidebarSafeArea } from "./SidebarSafeArea";
+/**
+ * Item individual de navegación
+ */
+export { SidebarItem } from "./SidebarItem";
+/**
+ * Contenedor de subcontenido para tooltips (slot component)
+ */
+export { SidebarSubContent } from "./SidebarSubContent";
+/**
+ * Link individual dentro de tooltip de subcontenido
+ */
+export { SidebarSubLink } from "./SidebarSubLink";
+/**
+ * Tooltip genérico anclado al indicador
+ */
+export { SidebarTooltip } from "./SidebarTooltip";
+/**
+ * Hook para acceder al contexto del sidebar
+ *
+ * @throws {Error} Si se usa fuera de un componente <Sidebar>
+ *
+ * @example
+ * ```tsx
+ * const { open, setOpen, dimensions } = useSidebarContext()
+ * ```
+ */
+export { useSidebarContext } from "./hooks/useSidebarContext";
+/**
+ * Hook para navegación por teclado (arrows, home, end)
+ *
+ * @example
+ * ```tsx
+ * const { focusedIndex, updateIndicatorForFocus } = useSidebarKeyboard()
+ * ```
+ */
+export { useSidebarKeyboard } from "./hooks/useSidebarKeyboard";
+/**
+ * Hook para gestión del indicador visual
+ *
+ * @example
+ * ```tsx
+ * const { isVisible, handleMouseMove } = useSidebarIndicator()
+ * ```
+ */
+export { useSidebarIndicator } from "./hooks/useSidebarIndicator";
+/**
+ * Hook para acceder al contexto de subcontenido
+ *
+ * @throws {Error} Si se usa fuera de un componente <Sidebar>
+ *
+ * @example
+ * ```tsx
+ * const { registerSubContent, getSubContent } = useSubContent()
+ * ```
+ */
+export { useSubContent } from "./hooks/useSubContent";
+/**
+ * Todos los tipos e interfaces del sidebar
+ */
+export type { SidebarProps, SidebarNavProps, SidebarToggleProps, SidebarContentProps, SidebarIndicatorProps, SidebarSafeAreaProps, SidebarItemProps, SidebarState, SidebarToggleState, SidebarItemState, SidebarIndicatorState, SidebarContextValue, SidebarDimensions, SidebarSafeAreas, SidebarAnimations, SidebarConfig, SidebarRenderProp, SidebarToggleRenderProp, SidebarItemRenderProp, SidebarIndicatorRenderProp, SidebarVisualStyle, } from "./Sidebar.types";
+/**
+ * Tipos de componentes de subcontenido
+ */
+export type { SidebarSubContentProps } from "./SidebarSubContent";
+export type { SidebarSubLinkProps } from "./SidebarSubLink";
+export type { SidebarTooltipProps } from "./SidebarTooltip";
+/**
+ * Enums exportados
+ */
+export { SidebarCollapseMode, SidebarHideBehaviour, SidebarHideOpensBehavior, SidebarLayoutBehaviour, SidebarWidth, SidebarTransitionDuration, SidebarZIndex, SidebarBorderRadius, SidebarSafeAreaPosition, SidebarTimingFunction, SidebarIconLibrary, } from "./Sidebar.types";
+/**
+ * Constantes y valores por defecto
+ */
+export { DEFAULT_DIMENSIONS, DEFAULT_SAFE_AREAS, DEFAULT_ANIMATIONS, DEFAULT_CONFIG, DEFAULT_VISUAL_STYLE, SIDEBAR_KEYBOARD_KEYS, SIDEBAR_DATA_ATTRIBUTES, SIDEBAR_TAILWIND_CLASSES, SIDEBAR_DEBUG_PATTERNS, SIDEBAR_ARIA_ROLES, SIDEBAR_ARIA_LABELS, SIDEBAR_BREAKPOINTS, SIDEBAR_LIMITS, SIDEBAR_CSS_VARIABLES, SIDEBAR_VISUAL_PRESETS, } from "./Sidebar.constants";
+/**
+ * Tipos de constantes
+ */
+export type { SidebarVisualPreset } from "./Sidebar.constants";
+/**
+ * Funciones para generar estilos CSS dinámicos
+ *
+ * @note
+ * Los estilos usan tokens CSS de shadcn (--sidebar, --sidebar-primary, etc.)
+ * definidos en globals.css, permitiendo soporte automático de dark/light mode.
+ */
+export { generateSidebarStyles, generateIndicatorStyles } from "./Sidebar.styles";
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Sidebar/index.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+CG;AAMH;;GAEG;AACH,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAA;AAEnC;;GAEG;AACH,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AAEzC;;GAEG;AACH,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAA;AAE/C;;GAEG;AACH,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAA;AAEjD;;GAEG;AACH,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAA;AAErD;;GAEG;AACH,OAAO,EAAE,qBAAqB,EAAE,MAAM,yBAAyB,CAAA;AAE/D;;GAEG;AACH,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAA;AAEnD;;GAEG;AACH,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAA;AAE3C;;GAEG;AACH,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAA;AAEvD;;GAEG;AACH,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAA;AAEjD;;GAEG;AACH,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAA;AAMjD;;;;;;;;;GASG;AACH,OAAO,EAAE,iBAAiB,EAAE,MAAM,2BAA2B,CAAA;AAE7D;;;;;;;GAOG;AACH,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAA;AAE/D;;;;;;;GAOG;AACH,OAAO,EAAE,mBAAmB,EAAE,MAAM,6BAA6B,CAAA;AAEjE;;;;;;;;;GASG;AACH,OAAO,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAA;AAMrD;;GAEG;AACH,YAAY,EACV,YAAY,EACZ,eAAe,EACf,kBAAkB,EAClB,mBAAmB,EACnB,qBAAqB,EACrB,oBAAoB,EACpB,gBAAgB,EAChB,YAAY,EACZ,kBAAkB,EAClB,gBAAgB,EAChB,qBAAqB,EACrB,mBAAmB,EACnB,iBAAiB,EACjB,gBAAgB,EAChB,iBAAiB,EACjB,aAAa,EACb,iBAAiB,EACjB,uBAAuB,EACvB,qBAAqB,EACrB,0BAA0B,EAC1B,kBAAkB,GACnB,MAAM,iBAAiB,CAAA;AAExB;;GAEG;AACH,YAAY,EAAE,sBAAsB,EAAE,MAAM,qBAAqB,CAAA;AACjE,YAAY,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAA;AAC3D,YAAY,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAA;AAE3D;;GAEG;AACH,OAAO,EACL,mBAAmB,EACnB,oBAAoB,EACpB,wBAAwB,EACxB,sBAAsB,EACtB,YAAY,EACZ,yBAAyB,EACzB,aAAa,EACb,mBAAmB,EACnB,uBAAuB,EACvB,qBAAqB,EACrB,kBAAkB,GACnB,MAAM,iBAAiB,CAAA;AAMxB;;GAEG;AACH,OAAO,EACL,kBAAkB,EAClB,kBAAkB,EAClB,kBAAkB,EAClB,cAAc,EACd,oBAAoB,EACpB,qBAAqB,EACrB,uBAAuB,EACvB,wBAAwB,EACxB,sBAAsB,EACtB,kBAAkB,EAClB,mBAAmB,EACnB,mBAAmB,EACnB,cAAc,EACd,qBAAqB,EACrB,sBAAsB,GACvB,MAAM,qBAAqB,CAAA;AAE5B;;GAEG;AACH,YAAY,EAAE,mBAAmB,EAAE,MAAM,qBAAqB,CAAA;AAM9D;;;;;;GAMG;AACH,OAAO,EAAE,qBAAqB,EAAE,uBAAuB,EAAE,MAAM,kBAAkB,CAAA"}

package/dist/components/Sidebar/sidebar-defaults.d.ts

@@ -0,0 +1,54 @@
+import type { SidebarLiquidGlassConfig } from './Sidebar.types';
+/**
+ * Valores por defecto para Liquid Glass V2
+ *
+ * @description
+ * Configuración conservadora que prioriza compatibilidad y performance:
+ * - Liquid Glass V2 desactivado por defecto (opt-in)
+ * - Chromatic Aberration desactivado (requiere opt-in explícito)
+ * - Edge Glass 3D y Backdrop Extension activados cuando V2 está habilitado
+ *
+ * @example
+ * ```tsx
+ * // Activar todas las features V2
+ * <Sidebar
+ *   liquidGlass={{
+ *     enableLiquidGlassV2: true,
+ *     enableChromaticAberration: true
+ *   }}
+ * />
+ * ```
+ */
+export declare const DEFAULT_LIQUID_GLASS_CONFIG: SidebarLiquidGlassConfig;
+/**
+ * Helper para merge de configuración liquid glass con defaults
+ *
+ * @example
+ * ```tsx
+ * const config = mergeLiquidGlassConfig({ enableLiquidGlassV2: true })
+ * // { enableLiquidGlassV2: true, enableChromaticAberration: false, ... }
+ * ```
+ */
+export declare function mergeLiquidGlassConfig(override?: Partial<SidebarLiquidGlassConfig>): SidebarLiquidGlassConfig;
+/**
+ * Validar configuración de liquid glass
+ *
+ * @description
+ * Verifica que las flags dependientes tengan sus requisitos satisfechos:
+ * - Chromatic Aberration requiere Liquid Glass V2
+ * - Edge Glass 3D requiere Liquid Glass V2
+ * - Backdrop Extension requiere Liquid Glass V2
+ *
+ * @returns Configuración validada con warnings en consola si hay conflictos
+ */
+export declare function validateLiquidGlassConfig(config: SidebarLiquidGlassConfig): SidebarLiquidGlassConfig;
+/**
+ * Tipo guard para verificar si Liquid Glass V2 está habilitado
+ */
+export declare function isLiquidGlassV2Enabled(config: SidebarLiquidGlassConfig): boolean;
+/**
+ * Tipo guard para verificar si Chromatic Aberration está habilitado
+ * (y sus requisitos están satisfechos)
+ */
+export declare function isChromaticAberrationEnabled(config: SidebarLiquidGlassConfig): boolean;
+//# sourceMappingURL=sidebar-defaults.d.ts.map

package/dist/components/Sidebar/sidebar-defaults.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"sidebar-defaults.d.ts","sourceRoot":"","sources":["../../../src/components/Sidebar/sidebar-defaults.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,iBAAiB,CAAA;AAE/D;;;;;;;;;;;;;;;;;;;GAmBG;AACH,eAAO,MAAM,2BAA2B,EAAE,wBAmDzC,CAAA;AAED;;;;;;;;GAQG;AACH,wBAAgB,sBAAsB,CACpC,QAAQ,CAAC,EAAE,OAAO,CAAC,wBAAwB,CAAC,GAC3C,wBAAwB,CAK1B;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,yBAAyB,CACvC,MAAM,EAAE,wBAAwB,GAC/B,wBAAwB,CA+B1B;AAED;;GAEG;AACH,wBAAgB,sBAAsB,CACpC,MAAM,EAAE,wBAAwB,GAC/B,OAAO,CAET;AAED;;;GAGG;AACH,wBAAgB,4BAA4B,CAC1C,MAAM,EAAE,wBAAwB,GAC/B,OAAO,CAGT"}

package/dist/components/animate-ui/components/base/switch.d.ts

@@ -0,0 +1,11 @@
+import * as React from 'react';
+import { type SwitchProps as SwitchPrimitiveProps } from '@/components/animate-ui/primitives/base/switch';
+type SwitchProps = SwitchPrimitiveProps & {
+    pressedWidth?: number;
+    startIcon?: React.ReactElement;
+    endIcon?: React.ReactElement;
+    thumbIcon?: React.ReactElement;
+};
+declare function Switch({ className, pressedWidth, startIcon, endIcon, thumbIcon, ...props }: SwitchProps): import("react/jsx-runtime").JSX.Element;
+export { Switch, type SwitchProps };
+//# sourceMappingURL=switch.d.ts.map

package/dist/components/animate-ui/components/base/switch.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"switch.d.ts","sourceRoot":"","sources":["../../../../../src/components/animate-ui/components/base/switch.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAIL,KAAK,WAAW,IAAI,oBAAoB,EACzC,MAAM,gDAAgD,CAAC;AAGxD,KAAK,WAAW,GAAG,oBAAoB,GAAG;IACxC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,SAAS,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC;IAC/B,OAAO,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC;IAC7B,SAAS,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC;CAChC,CAAC;AAEF,iBAAS,MAAM,CAAC,EACd,SAAS,EACT,YAAiB,EACjB,SAAS,EACT,OAAO,EACP,SAAS,EACT,GAAG,KAAK,EACT,EAAE,WAAW,2CA4Cb;AAED,OAAO,EAAE,MAAM,EAAE,KAAK,WAAW,EAAE,CAAC"}

package/dist/components/animate-ui/primitives/base/switch.d.ts

@@ -0,0 +1,23 @@
+import * as React from 'react';
+import { Switch as SwitchPrimitives } from '@base-ui-components/react/switch';
+import { type TargetAndTransition, type VariantLabels, type HTMLMotionProps, type LegacyAnimationControls } from 'motion/react';
+type SwitchContextType = {
+    isChecked: boolean;
+    setIsChecked: SwitchProps['onCheckedChange'];
+    isPressed: boolean;
+    setIsPressed: (isPressed: boolean) => void;
+};
+declare const useSwitch: () => SwitchContextType;
+type SwitchProps = Omit<React.ComponentProps<typeof SwitchPrimitives.Root>, 'render'> & HTMLMotionProps<'button'>;
+declare function Switch({ name, defaultChecked, checked, onCheckedChange, nativeButton, disabled, readOnly, required, inputRef, id, ...props }: SwitchProps): import("react/jsx-runtime").JSX.Element;
+type SwitchThumbProps = Omit<React.ComponentProps<typeof SwitchPrimitives.Thumb>, 'render'> & HTMLMotionProps<'div'> & {
+    pressedAnimation?: TargetAndTransition | VariantLabels | boolean | LegacyAnimationControls;
+};
+declare function SwitchThumb({ pressedAnimation, transition, ...props }: SwitchThumbProps): import("react/jsx-runtime").JSX.Element;
+type SwitchIconPosition = 'left' | 'right' | 'thumb';
+type SwitchIconProps = HTMLMotionProps<'div'> & {
+    position: SwitchIconPosition;
+};
+declare function SwitchIcon({ position, transition, ...props }: SwitchIconProps): import("react/jsx-runtime").JSX.Element;
+export { Switch, SwitchThumb, SwitchIcon, useSwitch, type SwitchProps, type SwitchThumbProps, type SwitchIconProps, type SwitchIconPosition, type SwitchContextType, };
+//# sourceMappingURL=switch.d.ts.map

package/dist/components/animate-ui/primitives/base/switch.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"switch.d.ts","sourceRoot":"","sources":["../../../../../src/components/animate-ui/primitives/base/switch.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,MAAM,IAAI,gBAAgB,EAAE,MAAM,kCAAkC,CAAC;AAC9E,OAAO,EAEL,KAAK,mBAAmB,EACxB,KAAK,aAAa,EAClB,KAAK,eAAe,EACpB,KAAK,uBAAuB,EAC7B,MAAM,cAAc,CAAC;AAKtB,KAAK,iBAAiB,GAAG;IACvB,SAAS,EAAE,OAAO,CAAC;IACnB,YAAY,EAAE,WAAW,CAAC,iBAAiB,CAAC,CAAC;IAC7C,SAAS,EAAE,OAAO,CAAC;IACnB,YAAY,EAAE,CAAC,SAAS,EAAE,OAAO,KAAK,IAAI,CAAC;CAC5C,CAAC;AAEF,QAAA,MAAuB,SAAS,yBACsB,CAAC;AAEvD,KAAK,WAAW,GAAG,IAAI,CACrB,KAAK,CAAC,cAAc,CAAC,OAAO,gBAAgB,CAAC,IAAI,CAAC,EAClD,QAAQ,CACT,GACC,eAAe,CAAC,QAAQ,CAAC,CAAC;AAE5B,iBAAS,MAAM,CAAC,EACd,IAAI,EACJ,cAAc,EACd,OAAO,EACP,eAAe,EACf,YAAY,EACZ,QAAQ,EACR,QAAQ,EACR,QAAQ,EACR,QAAQ,EACR,EAAE,EACF,GAAG,KAAK,EACT,EAAE,WAAW,2CAqCb;AAED,KAAK,gBAAgB,GAAG,IAAI,CAC1B,KAAK,CAAC,cAAc,CAAC,OAAO,gBAAgB,CAAC,KAAK,CAAC,EACnD,QAAQ,CACT,GACC,eAAe,CAAC,KAAK,CAAC,GAAG;IACvB,gBAAgB,CAAC,EACb,mBAAmB,GACnB,aAAa,GACb,OAAO,GACP,uBAAuB,CAAC;CAC7B,CAAC;AAEJ,iBAAS,WAAW,CAAC,EACnB,gBAAgB,EAChB,UAA4D,EAC5D,GAAG,KAAK,EACT,EAAE,gBAAgB,2CAiBlB;AAED,KAAK,kBAAkB,GAAG,MAAM,GAAG,OAAO,GAAG,OAAO,CAAC;AAErD,KAAK,eAAe,GAAG,eAAe,CAAC,KAAK,CAAC,GAAG;IAC9C,QAAQ,EAAE,kBAAkB,CAAC;CAC9B,CAAC;AAEF,iBAAS,UAAU,CAAC,EAClB,QAAQ,EACR,UAA0C,EAC1C,GAAG,KAAK,EACT,EAAE,eAAe,2CAkBjB;AAED,OAAO,EACL,MAAM,EACN,WAAW,EACX,UAAU,EACV,SAAS,EACT,KAAK,WAAW,EAChB,KAAK,gBAAgB,EACrB,KAAK,eAAe,EACpB,KAAK,kBAAkB,EACvB,KAAK,iBAAiB,GACvB,CAAC"}

package/dist/components/fluid-hover-indicator-v2.d.ts

@@ -0,0 +1,46 @@
+import type { RefObject } from 'react';
+/**
+ * FluidHoverIndicatorV2 Props
+ */
+export interface FluidHoverIndicatorV2Props {
+    /** Target element to track */
+    targetElement: HTMLElement | null;
+    /** Whether the indicator should be visible */
+    isVisible: boolean;
+    /** Optional className for customization */
+    className?: string;
+    /** Container ref for relative positioning (default: targetElement.parentElement) */
+    containerRef?: RefObject<HTMLElement>;
+    /** Enable chromatic aberration (Phase 2) */
+    enableChromaticAberration?: boolean;
+}
+/**
+ * Fluid Hover Indicator V2 - Con Liquid Glass Effect
+ *
+ * @description
+ * Versión mejorada del FluidHoverIndicator que combina:
+ * - **Spring physics** del original (anticipation, stretch, overshoot)
+ * - **Liquid glass effect** con SVG displacement mapping
+ * - **Refracción real** según Snell's Law
+ * - **Chromatic aberration** RGB opcional (Phase 2)
+ * - **Backdrop extension** para capturar elementos cercanos
+ *
+ * Features del research aplicadas:
+ * - ✅ SVG Displacement (Kube.io) → Refracción física
+ * - ✅ Chromatic Aberration (Atlas Pup Labs) → RGB channels
+ * - ✅ Performance Optimizations → GPU acceleration
+ * - ✅ Backdrop Extension (Josh Comeau) → Captura elementos nearby
+ *
+ * @example
+ * ```tsx
+ * <SidebarNav>
+ *   <FluidHoverIndicatorV2
+ *     targetElement={hoveredItem}
+ *     isVisible={isHovering}
+ *     enableChromaticAberration={true}
+ *   />
+ * </SidebarNav>
+ * ```
+ */
+export declare function FluidHoverIndicatorV2({ targetElement, isVisible, className, containerRef, enableChromaticAberration }: FluidHoverIndicatorV2Props): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=fluid-hover-indicator-v2.d.ts.map