@mks2508/sidebar-headless 0.2.0 → 0.3.0

package/dist/lib/get-strict-context.d.ts

@@ -0,0 +1,10 @@
+import * as React from 'react';
+declare function getStrictContext<T>(name?: string): readonly [
+    ({ value, children }: {
+        value: T;
+        children?: React.ReactNode;
+    }) => React.JSX.Element,
+    () => T
+];
+export { getStrictContext };
+//# sourceMappingURL=get-strict-context.d.ts.map

package/dist/lib/get-strict-context.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"get-strict-context.d.ts","sourceRoot":"","sources":["../../src/lib/get-strict-context.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,iBAAS,gBAAgB,CAAC,CAAC,EACzB,IAAI,CAAC,EAAE,MAAM,GACZ,SAAS;IACV,CAAC,EACC,KAAK,EACL,QAAQ,EACT,EAAE;QACD,KAAK,EAAE,CAAC,CAAC;QACT,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;KAC5B,KAAK,KAAK,CAAC,GAAG,CAAC,OAAO;IACvB,MAAM,CAAC;CACR,CAoBA;AAED,OAAO,EAAE,gBAAgB,EAAE,CAAC"}

package/dist/lib/liquid-glass-presets.d.ts

@@ -0,0 +1,43 @@
+/**
+ * Glass configuration interface (local definition to avoid external dependency issues)
+ * Made flexible to handle all liquid glass configuration properties
+ */
+export 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;
+}
+/**
+ * Presets optimizados de Liquid Glass para componentes del Sidebar
+ *
+ * @description
+ * Configuraciones pre-optimizadas para diferentes componentes del sidebar:
+ * - `indicator`: Para el FluidHoverIndicator (hover states de items)
+ * - `tooltip`: Para tooltips expandidos con contenido rico
+ * - `dropdown`: Para menús dropdown y submenús
+ *
+ * Cada preset está calibrado para:
+ * - Performance óptimo en sidebar (blur reducido vs showcase)
+ * - Tamaños típicos de componentes de sidebar
+ * - Visual balance entre refracción y legibilidad
+ */
+/**
+ * Extended config interface for sidebar liquid glass
+ */
+export interface ExtendedSidebarLiquidConfig extends SidebarLiquidConfig {
+    /** Habilitar chromatic aberration (Phase 2) - solo para tooltips por defecto */
+    enableChromaticAberration?: boolean;
+}
+export type SidebarLiquidPreset = 'indicator' | 'tooltip' | 'dropdown' | 'sidebar';
+export declare const sidebarLiquidPresets: Record<SidebarLiquidPreset, SidebarLiquidConfig>;
+/**
+ * Helper para obtener preset con overrides
+ *
+ * @example
+ * ```tsx
+ * const config = getLiquidPreset('indicator', { blur: 12 })
+ * ```
+ */
+export declare function getLiquidPreset(preset: SidebarLiquidPreset, overrides?: Partial<SidebarLiquidConfig>): SidebarLiquidConfig;
+//# sourceMappingURL=liquid-glass-presets.d.ts.map

package/dist/lib/liquid-glass-presets.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"liquid-glass-presets.d.ts","sourceRoot":"","sources":["../../src/lib/liquid-glass-presets.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,MAAM,WAAW,mBAAmB;IAClC,gFAAgF;IAChF,yBAAyB,CAAC,EAAE,OAAO,CAAA;IACnC,6DAA6D;IAC7D,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAA;CACnB;AAED;;;;;;;;;;;;;GAaG;AAEH;;GAEG;AACH,MAAM,WAAW,2BAA4B,SAAQ,mBAAmB;IACtE,gFAAgF;IAChF,yBAAyB,CAAC,EAAE,OAAO,CAAA;CACpC;AAED,MAAM,MAAM,mBAAmB,GAAG,WAAW,GAAG,SAAS,GAAG,UAAU,GAAG,SAAS,CAAA;AAElF,eAAO,MAAM,oBAAoB,EAAE,MAAM,CAAC,mBAAmB,EAAE,mBAAmB,CAwJjF,CAAA;AAED;;;;;;;GAOG;AACH,wBAAgB,eAAe,CAC7B,MAAM,EAAE,mBAAmB,EAC3B,SAAS,CAAC,EAAE,OAAO,CAAC,mBAAmB,CAAC,GACvC,mBAAmB,CAKrB"}

package/dist/lib/utils.d.ts

@@ -0,0 +1,3 @@
+import { type ClassValue } from "clsx";
+export declare function cn(...inputs: ClassValue[]): string;
+//# sourceMappingURL=utils.d.ts.map

package/dist/lib/utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../src/lib/utils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,UAAU,EAAQ,MAAM,MAAM,CAAC;AAG7C,wBAAgB,EAAE,CAAC,GAAG,MAAM,EAAE,UAAU,EAAE,UAEzC"}

package/dist/types/sidebar-minimal.d.ts

@@ -0,0 +1,21 @@
+import type { ComponentType } from "react";
+export interface Category {
+    id: string;
+    name: string;
+    icon: ComponentType<{
+        size?: number;
+        className?: string;
+    }>;
+    subcategories?: SubCategory[];
+}
+export interface SubCategory {
+    id: string;
+    name: string;
+    icon?: ComponentType<{
+        size?: number;
+        className?: string;
+    }> | string | {
+        displayName?: string;
+    };
+}
+//# sourceMappingURL=sidebar-minimal.d.ts.map

package/dist/types/sidebar-minimal.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"sidebar-minimal.d.ts","sourceRoot":"","sources":["../../src/types/sidebar-minimal.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAA;AAE1C,MAAM,WAAW,QAAQ;IACvB,EAAE,EAAE,MAAM,CAAA;IACV,IAAI,EAAE,MAAM,CAAA;IACZ,IAAI,EAAE,aAAa,CAAC;QAAE,IAAI,CAAC,EAAE,MAAM,CAAC;QAAC,SAAS,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC,CAAA;IAC1D,aAAa,CAAC,EAAE,WAAW,EAAE,CAAA;CAC9B;AAED,MAAM,WAAW,WAAW;IAC1B,EAAE,EAAE,MAAM,CAAA;IACV,IAAI,EAAE,MAAM,CAAA;IACZ,IAAI,CAAC,EAAE,aAAa,CAAC;QAAE,IAAI,CAAC,EAAE,MAAM,CAAC;QAAC,SAAS,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC,GAAG,MAAM,GAAG;QAAE,WAAW,CAAC,EAAE,MAAM,CAAA;KAAE,CAAA;CAChG"}

package/dist/utils/TooltipAnimationController.d.ts

@@ -0,0 +1,122 @@
+/**
+ * TooltipAnimationController
+ *
+ * Controlador centralizado para animaciones de tooltip usando Web Animations API.
+ *
+ * Features:
+ * - Cancelación inmediata de animaciones en hover rápido
+ * - Orquestación de múltiples animaciones simultáneas
+ * - Direction-aware animations (up/down)
+ * - commitStyles() para persistir estados finales
+ * - Promise-based API para sincronización
+ *
+ * @example
+ * ```typescript
+ * const controller = new TooltipAnimationController();
+ *
+ * await controller.transitionTooltip({
+ *   oldTitleEl: document.querySelector('.old-title'),
+ *   newTitleEl: document.querySelector('.new-title'),
+ *   oldItemsContainer: document.querySelector('.old-items'),
+ *   newItemsContainer: document.querySelector('.new-items'),
+ *   heightContainer: document.querySelector('.height-container'),
+ *   direction: 'down'
+ * });
+ * ```
+ */
+export type AnimationDirection = 'up' | 'down';
+export interface TooltipTransitionParams {
+    oldTitleEl: HTMLElement | null;
+    newTitleEl: HTMLElement | null;
+    oldItemsContainer: HTMLElement | null;
+    newItemsContainer: HTMLElement | null;
+    heightContainer: HTMLElement | null;
+    direction: AnimationDirection;
+    skipTitleAnimation?: boolean;
+}
+export interface AnimationTimings {
+    titleDuration: number;
+    itemExitDuration: number;
+    itemEnterDuration: number;
+    heightDuration: number;
+    itemStaggerDelay: number;
+    heightStartDelay: number;
+    itemEnterStartDelay: number;
+}
+export declare class TooltipAnimationController {
+    private currentAnimations;
+    private timings;
+    constructor(customTimings?: Partial<AnimationTimings>);
+    /**
+     * Transición completa del tooltip con todas las animaciones
+     */
+    transitionTooltip(params: TooltipTransitionParams): Promise<void>;
+    /**
+     * Anima título con crossfade + rotación 3D
+     */
+    private animateTitleCrossfade;
+    /**
+     * Anima salida de items existentes
+     */
+    private animateItemsExit;
+    /**
+     * Anima entrada de items nuevos con stagger
+     */
+    private animateItemsEnter;
+    /**
+     * Anima transición de height (requiere grid trick en CSS)
+     *
+     * Este método solo dispara la transición CSS cambiando el data-state.
+     * El CSS debe tener el grid trick configurado:
+     *
+     * ```css
+     * .tooltip-content-grid {
+     *   display: grid;
+     *   grid-template-rows: 0fr;
+     *   transition: grid-template-rows 200ms;
+     * }
+     * .tooltip-content-grid[data-state="open"] {
+     *   grid-template-rows: 1fr;
+     * }
+     * ```
+     */
+    private animateHeight;
+    /**
+     * Anima cubo 3D (Enfoque A: multi-cara)
+     */
+    animateCube(cubeEl: HTMLElement, direction: AnimationDirection, targetFace: string): Animation;
+    /**
+     * Obtiene la rotación actual del cubo desde su data-face
+     */
+    private getCurrentCubeRotation;
+    /**
+     * Cancela todas las animaciones activas
+     */
+    cancelAll(): void;
+    /**
+     * Finaliza todas las animaciones inmediatamente (skip to end)
+     */
+    finishAll(): void;
+    /**
+     * Obtiene el estado actual de las animaciones
+     */
+    getStatus(): {
+        active: number;
+        finished: number;
+        total: number;
+    };
+    /**
+     * Actualiza los timings
+     */
+    updateTimings(newTimings: Partial<AnimationTimings>): void;
+    /**
+     * Obtiene los timings actuales
+     */
+    getTimings(): AnimationTimings;
+    /**
+     * Destructor - limpia todas las animaciones
+     */
+    destroy(): void;
+}
+export default TooltipAnimationController;
+//# sourceMappingURL=TooltipAnimationController.d.ts.map

package/dist/utils/TooltipAnimationController.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TooltipAnimationController.d.ts","sourceRoot":"","sources":["../../src/utils/TooltipAnimationController.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AAEH,MAAM,MAAM,kBAAkB,GAAG,IAAI,GAAG,MAAM,CAAC;AAE/C,MAAM,WAAW,uBAAuB;IACtC,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,SAAS,EAAE,kBAAkB,CAAC;IAC9B,kBAAkB,CAAC,EAAE,OAAO,CAAC;CAC9B;AAED,MAAM,WAAW,gBAAgB;IAC/B,aAAa,EAAE,MAAM,CAAC;IACtB,gBAAgB,EAAE,MAAM,CAAC;IACzB,iBAAiB,EAAE,MAAM,CAAC;IAC1B,cAAc,EAAE,MAAM,CAAC;IACvB,gBAAgB,EAAE,MAAM,CAAC;IACzB,gBAAgB,EAAE,MAAM,CAAC;IACzB,mBAAmB,EAAE,MAAM,CAAC;CAC7B;AAED,qBAAa,0BAA0B;IACrC,OAAO,CAAC,iBAAiB,CAAmB;IAC5C,OAAO,CAAC,OAAO,CAAmB;IAElC,YAAY,aAAa,CAAC,EAAE,OAAO,CAAC,gBAAgB,CAAC,EAWpD;IAED;;OAEG;IACG,iBAAiB,CAAC,MAAM,EAAE,uBAAuB,GAAG,OAAO,CAAC,IAAI,CAAC,CA0CtE;IAED;;OAEG;IACH,OAAO,CAAC,qBAAqB;IAmC7B;;OAEG;IACH,OAAO,CAAC,gBAAgB;IAoBxB;;OAEG;IACH,OAAO,CAAC,iBAAiB;IAoBzB;;;;;;;;;;;;;;;;OAgBG;IACH,OAAO,CAAC,aAAa;IAsBrB;;OAEG;IACH,WAAW,CAAC,MAAM,EAAE,WAAW,EAAE,SAAS,EAAE,kBAAkB,EAAE,UAAU,EAAE,MAAM,GAAG,SAAS,CAsB7F;IAED;;OAEG;IACH,OAAO,CAAC,sBAAsB;IAW9B;;OAEG;IACH,SAAS,IAAI,IAAI,CAQhB;IAED;;OAEG;IACH,SAAS,IAAI,IAAI,CAOhB;IAED;;OAEG;IACH,SAAS,IAAI;QACX,MAAM,EAAE,MAAM,CAAC;QACf,QAAQ,EAAE,MAAM,CAAC;QACjB,KAAK,EAAE,MAAM,CAAC;KACf,CASA;IAED;;OAEG;IACH,aAAa,CAAC,UAAU,EAAE,OAAO,CAAC,gBAAgB,CAAC,GAAG,IAAI,CAEzD;IAED;;OAEG;IACH,UAAU,IAAI,gBAAgB,CAE7B;IAED;;OAEG;IACH,OAAO,IAAI,IAAI,CAEd;CACF;AAED,eAAe,0BAA0B,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mks2508/sidebar-headless",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "description": "Headless sidebar and mobile bottom navigation components for React with advanced animations, keyboard navigation, and full WAI-ARIA accessibility",
   "type": "module",
   "main": "./dist/index.js",
@@ -10,7 +10,7 @@
     ".": {
       "types": "./dist/index.d.ts",
       "import": "./dist/index.js",
-      "require": "./dist/index.js"
+      "require": "./dist/index.cjs"
     },
     "./styles.css": "./dist/index.css",
     "./mobile-optimizations.css": "./dist/MobileOptimizations.css",
@@ -28,10 +28,13 @@
   "scripts": {
     "dev": "cd playground && vite",
     "dev:clean": "killall -9 node || true && cd playground && vite",
-    "build": "tsup",
-    "build:watch": "tsup --watch",
+    "build": "rolldown -c",
+    "build:watch": "rolldown -c --watch",
     "preview": "cd playground && vite preview",
-    "typecheck": "tsc --noEmit",
+    "typecheck": "mkdir -p dist && tsgo --declaration --emitDeclarationOnly --noEmit false",
+    "typecheck:watch": "mkdir -p dist && tsgo --declaration --emitDeclarationOnly --noEmit false --watch",
+    "lint": "oxlint",
+    "lint:fix": "oxlint --fix",
     "prepublishOnly": "bun run build && bun run typecheck"
   },
   "keywords": [
@@ -65,7 +68,8 @@
   "homepage": "https://github.com/mks2508/sidebar-headless#readme",
   "peerDependencies": {
     "react": ">=18.0.0",
-    "react-dom": ">=18.0.0"
+    "react-dom": ">=18.0.0",
+    "lucide-react": ">=0.400.0"
   },
   "peerDependenciesMeta": {
     "@liquid-svg-glass/core": {
@@ -95,8 +99,10 @@
     "class-variance-authority": "^0.7.1",
     "lucide-react": "^0.545.0",
     "motion": "^12.23.24",
+    "oxlint": "^1.40.0",
     "react": "^19",
     "react-dom": "^19",
+    "rolldown": "^1.0.0-beta.60",
     "tailwindcss": "^4.1.11",
     "tsup": "^8.5.1",
     "tw-animate-css": "^1.4.0",