@mks2508/sidebar-headless 0.2.1 → 0.3.0

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

@@ -0,0 +1,285 @@
+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

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

@@ -0,0 +1 @@
+{"version":3,"file":"Sidebar.constants.d.ts","sourceRoot":"","sources":["../../../src/components/Sidebar/Sidebar.constants.ts"],"names":[],"mappings":"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"}

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

@@ -0,0 +1,80 @@
+import type { SidebarProps } from "./Sidebar.types";
+/**
+ * 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)
+ * <Sidebar defaultOpen={true} collapseMode="collapse">
+ *   <SidebarNav>
+ *     <SidebarToggle />
+ *     <SidebarContent>
+ *       <SidebarItem href="/" icon={<HomeIcon />} />
+ *     </SidebarContent>
+ *   </SidebarNav>
+ * </Sidebar>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Con render props (acceso al estado)
+ * <Sidebar>
+ *   {({ open, collapsed }) => (
+ *     <>
+ *       <SidebarNav className={cn(!open && 'hidden')}>
+ *         <SidebarContent>
+ *           <SidebarItem label={open ? "Home" : undefined} />
+ *         </SidebarContent>
+ *       </SidebarNav>
+ *       <div>Sidebar is {open ? 'open' : 'closed'}</div>
+ *     </>
+ *   )}
+ * </Sidebar>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Modo controlled
+ * function App() {
+ *   const [open, setOpen] = useState(true)
+ *
+ *   return (
+ *     <Sidebar open={open} onOpenChange={setOpen}>
+ *       <SidebarNav>...</SidebarNav>
+ *     </Sidebar>
+ *   )
+ * }
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Con configuración custom
+ * <Sidebar
+ *   collapseMode="hide"
+ *   dimensions={{ expandedWidth: "20rem" }}
+ *   animations={{ widthTransitionDuration: 500 }}
+ * >
+ *   <SidebarNav>...</SidebarNav>
+ * </Sidebar>
+ * ```
+ *
+ * @note
+ * Los colores se obtienen automáticamente de los tokens CSS de shadcn definidos
+ * en globals.css (--sidebar, --sidebar-accent, --sidebar-primary, etc.)
+ */
+export declare function Sidebar({ children, className, style, defaultOpen, open, onOpenChange, collapseMode, hideBehaviour, hideOpensBehavior, layoutBehaviour, dimensions, animations, toggleId, debug, enableFluidIndicator, enableTooltip, liquidGlass, as }: SidebarProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=Sidebar.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Sidebar.d.ts","sourceRoot":"","sources":["../../../src/components/Sidebar/Sidebar.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,YAAY,EAAqB,MAAM,iBAAiB,CAAA;AAGtE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4EG;AACH,wBAAgB,OAAO,CAAC,EACtB,QAAQ,EACR,SAAS,EACT,KAAK,EACL,WAAwC,EACxC,IAAI,EACJ,YAAY,EACZ,YAA0C,EAC1C,aAA4C,EAC5C,iBAAoD,EACpD,eAAgD,EAChD,UAAU,EACV,UAAU,EACV,QAAkC,EAClC,KAA4B,EAC5B,oBAA4B,EAC5B,aAAoB,EACpB,WAAW,EACX,EAAE,EACH,EAAE,YAAY,2CAoCd"}

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

@@ -0,0 +1,77 @@
+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
+ * })
+ *
+ * <style jsx>{styles}</style>
+ * ```
+ *
+ * @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)
+ *
+ * <div style={indicatorStyles} />
+ * ```
+ */
+export declare function generateIndicatorStyles(isVisible: boolean): React.CSSProperties;
+export {};
+//# sourceMappingURL=Sidebar.styles.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Sidebar.styles.d.ts","sourceRoot":"","sources":["../../../src/components/Sidebar/Sidebar.styles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,iBAAiB,EACjB,iBAAiB,EACjB,mBAAmB,EACnB,wBAAwB,EACxB,kBAAkB,EACnB,MAAM,iBAAiB,CAAA;AACxB,OAAO,EACL,sBAAsB,EACvB,MAAM,iBAAiB,CAAA;AAMxB;;;GAGG;AACH,UAAU,oBAAoB;IAC5B,UAAU,EAAE,iBAAiB,CAAA;IAC7B,UAAU,EAAE,iBAAiB,CAAA;IAC7B,YAAY,EAAE,mBAAmB,CAAA;IACjC,iBAAiB,EAAE,wBAAwB,CAAA;IAC3C,eAAe,EAAE,sBAAsB,CAAA;IACvC,WAAW,EAAE,kBAAkB,CAAA;CAChC;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAsCG;AACH,wBAAgB,qBAAqB,CAAC,EACpC,UAAU,EACV,UAAU,EACV,YAAY,EACZ,iBAAiB,EACjB,eAAe,EACf,WAAW,EACZ,EAAE,oBAAoB,GAAG,MAAM,CAyP/B;AAED;;;;;;;;;;;;;;;;;;;GAmBG;AACH,wBAAgB,uBAAuB,CAAC,SAAS,EAAE,OAAO,GAAG,KAAK,CAAC,aAAa,CAQ/E"}