@flikk/ui 1.0.0-beta.25 → 1.0.0-beta.26

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

@@ -1,12 +1,12 @@
 import React from "react";
 import { SidebarProps } from "./Sidebar.types";
 export declare const Sidebar: React.ForwardRefExoticComponent<SidebarProps & React.RefAttributes<HTMLDivElement>> & {
+    Provider: React.FC<import("./Sidebar.types").SidebarProviderProps>;
     Header: React.ForwardRefExoticComponent<import("./Sidebar.types").SidebarHeaderProps & React.RefAttributes<HTMLDivElement>>;
     Content: React.ForwardRefExoticComponent<import("./Sidebar.types").SidebarContentProps & React.RefAttributes<HTMLDivElement>>;
     Footer: React.ForwardRefExoticComponent<import("./Sidebar.types").SidebarFooterProps & React.RefAttributes<HTMLDivElement>>;
     Nav: React.ForwardRefExoticComponent<import("./Sidebar.types").SidebarNavProps & React.RefAttributes<HTMLDivElement>>;
     NavGroup: React.ForwardRefExoticComponent<import("./Sidebar.types").SidebarNavGroupProps & React.RefAttributes<HTMLDivElement>>;
-    Submenu: ({ children, isOpen, className, }: import("./SidebarSubmenu").SidebarSubmenuProps) => import("react/jsx-runtime").JSX.Element;
     Toggle: React.ForwardRefExoticComponent<import("./Sidebar.types").SidebarToggleProps & React.RefAttributes<HTMLButtonElement>>;
     MobileTrigger: React.ForwardRefExoticComponent<import("./Sidebar.types").SidebarMobileTriggerProps & React.RefAttributes<HTMLButtonElement>>;
     UserProfile: React.ForwardRefExoticComponent<import("./Sidebar.types").SidebarUserProfileProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/core/Sidebar/Sidebar.js

@@ -1,27 +1,30 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import React__default, { useMemo } from 'react';
+import React__default, { useMemo, useRef, useEffect } from 'react';
 import { cn } from '../../../utils/cn.js';
 import { motion, AnimatePresence } from 'motion/react';
 import { sidebarTheme } from './Sidebar.theme.js';
+import { useFocusTrap } from '../../../hooks/useFocusTrap.js';
 import { useSidebarContext, SidebarProvider } from './SidebarContext.js';
 import { SidebarHeader } from './SidebarHeader.js';
 import { SidebarContent } from './SidebarContent.js';
 import { SidebarFooter } from './SidebarFooter.js';
 import { SidebarNav } from './SidebarNav.js';
 import { SidebarNavGroup } from './SidebarNavGroup.js';
-import { SidebarSubmenu } from './SidebarSubmenu.js';
 import { SidebarToggle } from './SidebarToggle.js';
 import { SidebarMobileTrigger } from './SidebarMobileTrigger.js';
 import { SidebarUserProfile } from './SidebarUserProfile.js';
 import { SidebarLogo } from './SidebarLogo.js';
 
+// Matches the 200ms / cubic-bezier(0.4,0,0.2,1) timing used by Tailwind's
+// `duration-200` transitions on the content + footer, so width, padding and
+// icon animations stay in sync.
 const SIDEBAR_TRANSITION = {
     type: "tween",
-    duration: 0.22,
+    duration: 0.2,
     ease: [0.4, 0, 0.2, 1],
 };
-const SidebarDesktop = React__default.forwardRef(({ side = "left", variant = "sidebar", width, children, className, theme: customTheme = {}, ...props }, ref) => {
-    var _a, _b, _c;
+const SidebarDesktop = React__default.forwardRef(({ side = "left", variant = "sidebar", density, width, children, className, theme: customTheme = {}, ...props }, ref) => {
+    var _a, _b, _c, _d;
     const context = useSidebarContext();
     const collapsed = (_a = context === null || context === void 0 ? void 0 : context.collapsed) !== null && _a !== void 0 ? _a : false;
     const expandedWidth = (width === null || width === void 0 ? void 0 : width.expanded) || ((_b = context === null || context === void 0 ? void 0 : context.width) === null || _b === void 0 ? void 0 : _b.expanded) || 280;
@@ -38,19 +41,41 @@ const SidebarDesktop = React__default.forwardRef(({ side = "left", variant = "si
         width: collapsed ? collapsedWidth : expandedWidth,
         maxWidth: "100vw",
     }), [collapsed, collapsedWidth, expandedWidth]);
-    return (jsx(motion.div, { ref: ref, className: sidebarClasses, "data-side": side, "data-variant": variant, "data-collapsed": collapsed, initial: false, animate: animateValue, transition: SIDEBAR_TRANSITION, ...motionSafeProps, children: children }));
+    return (jsx(motion.aside, { ref: ref, className: sidebarClasses, "aria-label": "Sidebar", "data-side": side, "data-variant": variant, "data-density": (_d = density !== null && density !== void 0 ? density : context === null || context === void 0 ? void 0 : context.density) !== null && _d !== void 0 ? _d : "comfortable", "data-collapsed": collapsed, initial: false, animate: animateValue, transition: SIDEBAR_TRANSITION, ...motionSafeProps, children: children }));
 });
 SidebarDesktop.displayName = "SidebarDesktop";
 const SidebarMobile = ({ children, className, theme: customTheme = {} }) => {
+    var _a, _b, _c, _d;
     const context = useSidebarContext();
-    if (!context)
-        return null;
-    const { isMobileOpen, setMobileOpen } = context;
+    const panelRef = useRef(null);
+    // Hooks must run unconditionally — keep above any early return
     const theme = useMemo(() => ({
         ...sidebarTheme,
         ...customTheme,
     }), [customTheme]);
-    return (jsx(AnimatePresence, { children: isMobileOpen && (jsxs(Fragment, { children: [jsx(motion.div, { className: cn(theme.mobileBackdrop), initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, transition: { duration: 0.2 }, onClick: () => setMobileOpen(false), "aria-hidden": "true" }), jsx(motion.div, { className: cn(theme.mobileOverlay, className), initial: { opacity: 0, y: 20 }, animate: { opacity: 1, y: 0 }, exit: { opacity: 0, y: 20 }, transition: { type: "spring", stiffness: 400, damping: 35 }, role: "dialog", "aria-modal": "true", "aria-label": "Navigation menu", children: children })] })) }));
+    const isMobileOpen = (_a = context === null || context === void 0 ? void 0 : context.isMobileOpen) !== null && _a !== void 0 ? _a : false;
+    const side = (_b = context === null || context === void 0 ? void 0 : context.side) !== null && _b !== void 0 ? _b : "left";
+    const panelWidth = (_d = (_c = context === null || context === void 0 ? void 0 : context.width) === null || _c === void 0 ? void 0 : _c.expanded) !== null && _d !== void 0 ? _d : 280;
+    // Trap focus inside the open drawer; focus returns to trigger on close.
+    useFocusTrap(panelRef, isMobileOpen);
+    // Close on Escape while the drawer is open.
+    useEffect(() => {
+        if (!isMobileOpen)
+            return;
+        const onKeyDown = (e) => {
+            if (e.key === "Escape")
+                context === null || context === void 0 ? void 0 : context.setMobileOpen(false);
+        };
+        document.addEventListener("keydown", onKeyDown);
+        return () => document.removeEventListener("keydown", onKeyDown);
+    }, [isMobileOpen, context]);
+    if (!context)
+        return null;
+    const { setMobileOpen } = context;
+    const offscreen = side === "left" ? "-100%" : "100%";
+    return (jsx(AnimatePresence, { children: isMobileOpen && (jsxs(Fragment, { children: [jsx(motion.div, { className: cn(theme.mobileBackdrop), initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, transition: { duration: 0.2 }, onClick: () => setMobileOpen(false), "aria-hidden": "true" }), jsx(motion.div, { ref: panelRef, className: cn(theme.mobileOverlay, side === "left"
+                        ? "left-0 rounded-r-xl border-r"
+                        : "right-0 rounded-l-xl border-l rounded-r-none border-r-0", className), style: { width: panelWidth }, initial: { x: offscreen }, animate: { x: 0 }, exit: { x: offscreen }, transition: { type: "spring", stiffness: 400, damping: 38 }, role: "dialog", "aria-modal": "true", "aria-label": "Navigation menu", children: children })] })) }));
 };
 const SidebarContainer = React__default.forwardRef((props, ref) => {
     const context = useSidebarContext();
@@ -60,17 +85,21 @@ const SidebarContainer = React__default.forwardRef((props, ref) => {
     return jsx(SidebarDesktop, { ref: ref, ...props });
 });
 SidebarContainer.displayName = "SidebarContainer";
-const SidebarRoot = React__default.forwardRef(({ side = "left", variant = "sidebar", defaultCollapsed = false, collapsed: controlledCollapsed, onCollapsedChange, mobileBreakpoint, mobileOpen, onMobileOpenChange, width, children, className, theme: customTheme = {}, ...props }, ref) => {
-    return (jsx(SidebarProvider, { defaultCollapsed: defaultCollapsed, collapsed: controlledCollapsed, onCollapsedChange: onCollapsedChange, mobileBreakpoint: mobileBreakpoint, mobileOpen: mobileOpen, onMobileOpenChange: onMobileOpenChange, width: width, side: side, variant: variant, children: jsx(SidebarContainer, { ref: ref, className: className, theme: customTheme, side: side, variant: variant, width: width, ...props, children: children }) }));
+const SidebarRoot = React__default.forwardRef(({ side = "left", variant = "sidebar", defaultCollapsed = false, collapsed: controlledCollapsed, onCollapsedChange, density = "comfortable", mobileBreakpoint, mobileOpen, onMobileOpenChange, width, children, className, theme: customTheme = {}, ...props }, ref) => {
+    const existingContext = useSidebarContext();
+    if (existingContext) {
+        return (jsx(SidebarContainer, { ref: ref, className: className, theme: customTheme, side: side, variant: variant, density: density, width: width, ...props, children: children }));
+    }
+    return (jsx(SidebarProvider, { defaultCollapsed: defaultCollapsed, collapsed: controlledCollapsed, onCollapsedChange: onCollapsedChange, density: density, mobileBreakpoint: mobileBreakpoint, mobileOpen: mobileOpen, onMobileOpenChange: onMobileOpenChange, width: width, side: side, variant: variant, children: jsx(SidebarContainer, { ref: ref, className: className, theme: customTheme, side: side, variant: variant, density: density, width: width, ...props, children: children }) }));
 });
 SidebarRoot.displayName = "Sidebar";
 const Sidebar = Object.assign(SidebarRoot, {
+    Provider: SidebarProvider,
     Header: SidebarHeader,
     Content: SidebarContent,
     Footer: SidebarFooter,
     Nav: SidebarNav,
     NavGroup: SidebarNavGroup,
-    Submenu: SidebarSubmenu,
     Toggle: SidebarToggle,
     MobileTrigger: SidebarMobileTrigger,
     UserProfile: SidebarUserProfile,

package/dist/components/core/Sidebar/Sidebar.theme.js

@@ -1,18 +1,16 @@
 const sidebarTheme = {
-    baseStyle: 'flex flex-col h-full bg-[var(--color-background)] overflow-hidden',
+    baseStyle: 'group flex flex-col h-full bg-[var(--color-background)] overflow-visible transition-colors duration-200 relative',
     variants: {
         sidebar: 'relative',
-        floating: 'rounded-[var(--radius-base)] shadow-lg border border-[var(--color-border)]',
-        inset: 'rounded-[var(--radius-base)] bg-[var(--color-background-secondary)] border border-[var(--color-border)]',
+        floating: 'relative m-3 h-[calc(100%-1.5rem)] rounded-xl border border-[var(--color-border)] bg-[color-mix(in_oklab,var(--color-background)_85%,transparent)] backdrop-blur-md shadow-[0_8px_30px_rgba(0,0,0,0.03),inset_0_1px_0_rgba(255,255,255,0.05)]',
+        inset: 'relative m-3 h-[calc(100%-1.5rem)] rounded-xl bg-[var(--color-background-secondary)] border border-[var(--color-border)] shadow-sm',
     },
     sides: {
         left: 'border-r border-[var(--color-border)]',
         right: 'border-l border-[var(--color-border)]',
     },
-    collapsed: 'w-16',
-    expanded: 'w-[280px]',
-    mobileOverlay: 'fixed inset-0 z-50 flex flex-col bg-[var(--color-background)]',
-    mobileBackdrop: 'fixed inset-0 z-40 bg-black/50 backdrop-blur-sm',
+    mobileOverlay: 'fixed inset-y-0 z-50 flex flex-col bg-[var(--color-background)] shadow-2xl max-w-[85vw] border-[var(--color-border)]',
+    mobileBackdrop: 'fixed inset-0 z-40 bg-black/40 backdrop-blur-sm',
 };
 
 export { sidebarTheme };

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

@@ -2,6 +2,7 @@ import { ReactNode, HTMLAttributes } from 'react';
 export type SidebarSide = 'left' | 'right';
 export type SidebarVariant = 'sidebar' | 'floating' | 'inset';
 export type SidebarUserStatus = 'online' | 'offline' | 'away' | 'busy';
+export type SidebarDensity = 'comfortable' | 'compact';
 export interface SidebarContextValue {
     collapsed: boolean;
     setCollapsed: (collapsed: boolean) => void;
@@ -12,6 +13,7 @@ export interface SidebarContextValue {
     };
     side: SidebarSide;
     variant: SidebarVariant;
+    density: SidebarDensity;
     /** Whether the sidebar is currently showing as mobile overlay */
     isMobileOpen: boolean;
     setMobileOpen: (open: boolean) => void;
@@ -29,6 +31,11 @@ export interface SidebarProps extends React.HTMLAttributes<HTMLDivElement> {
      * @default "sidebar"
      */
     variant?: SidebarVariant;
+    /**
+     * Navigation density
+     * @default "comfortable"
+     */
+    density?: SidebarDensity;
     /**
      * Whether the sidebar is collapsed by default
      * @default false
@@ -103,6 +110,10 @@ export interface SidebarNavProps extends React.HTMLAttributes<HTMLDivElement> {
      * @default false
      */
     accordion?: boolean;
+    /**
+     * Navigation density. Inherits from Sidebar when omitted.
+     */
+    density?: SidebarDensity;
     children: ReactNode;
 }
 export interface SidebarNavGroupProps extends React.HTMLAttributes<HTMLDivElement> {
@@ -157,6 +168,12 @@ export interface SidebarUserProfileProps extends React.HTMLAttributes<HTMLDivEle
      * Content to render when the profile is clicked (e.g. dropdown menu)
      */
     dropdownContent?: ReactNode;
+    /**
+     * Custom content for the expandable region, replacing the default name/email block.
+     * The avatar and all collapse choreography (reveal animation, tooltip, dropdown
+     * placement) are preserved — only the text area is overridden. Copy-paste friendly.
+     */
+    children?: ReactNode;
 }
 export interface SidebarLogoProps extends HTMLAttributes<HTMLDivElement> {
     /** Always-visible icon/mark (shown in both expanded and collapsed states) */
@@ -164,6 +181,22 @@ export interface SidebarLogoProps extends HTMLAttributes<HTMLDivElement> {
     /** Text shown only when expanded — animates in/out automatically */
     text?: ReactNode;
 }
+export interface SidebarProviderProps {
+    children: React.ReactNode;
+    defaultCollapsed?: boolean;
+    collapsed?: boolean;
+    onCollapsedChange?: (collapsed: boolean) => void;
+    mobileBreakpoint?: number;
+    mobileOpen?: boolean;
+    onMobileOpenChange?: (open: boolean) => void;
+    width?: {
+        expanded?: number;
+        collapsed?: number;
+    };
+    side?: SidebarSide;
+    variant?: SidebarVariant;
+    density?: SidebarDensity;
+}
 export interface SidebarTheme {
     baseStyle: string;
     variants: {
@@ -172,8 +205,6 @@ export interface SidebarTheme {
     sides: {
         [K in SidebarSide]: string;
     };
-    collapsed: string;
-    expanded: string;
     mobileOverlay: string;
     mobileBackdrop: string;
 }
@@ -185,8 +216,6 @@ export interface SidebarThemeOverrides {
     sides?: Partial<{
         [K in SidebarSide]: string;
     }>;
-    collapsed?: string;
-    expanded?: string;
     mobileOverlay?: string;
     mobileBackdrop?: string;
 }

package/dist/components/core/Sidebar/SidebarContent.js

@@ -1,14 +1,14 @@
 import { jsx } from 'react/jsx-runtime';
 import React__default from 'react';
 import { cn } from '../../../utils/cn.js';
-import { useSidebarContext } from './SidebarContext.js';
+import { useSidebarCollapsed, useSidebarDensity } from './SidebarContext.js';
+import { ScrollArea } from '../ScrollArea/ScrollArea.js';
+import '../ScrollArea/smooth/SmoothScrollEngine.js';
 
 const SidebarContent = React__default.forwardRef(({ children, className, ...props }, ref) => {
-    const sidebarContext = useSidebarContext();
-    const collapsed = (sidebarContext === null || sidebarContext === void 0 ? void 0 : sidebarContext.collapsed) || false;
-    const isMobile = (sidebarContext === null || sidebarContext === void 0 ? void 0 : sidebarContext.isMobile) || false;
-    const isCollapsedView = collapsed && !isMobile;
-    return (jsx("div", { ref: ref, className: cn("flex-1 overflow-y-auto overflow-x-hidden py-3 transition-all duration-200", isCollapsedView ? "px-2" : "px-2.5", className), ...props, children: children }));
+    const { isCollapsedView } = useSidebarCollapsed();
+    const density = useSidebarDensity();
+    return (jsx(ScrollArea, { ref: ref, type: "none", size: "thin", className: "flex-1 min-h-0", ...props, children: jsx("div", { className: cn("py-3 transition-[padding] duration-200 ease-[cubic-bezier(0.4,0,0.2,1)]", density === "compact" && "py-2", isCollapsedView ? "px-2" : "px-2.5", className), children: children }) }));
 });
 SidebarContent.displayName = "SidebarContent";
 

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

@@ -1,6 +1,22 @@
 import React from 'react';
-import { SidebarContextValue } from './Sidebar.types';
+import { SidebarContextValue, SidebarDensity, SidebarProviderProps } from './Sidebar.types';
 export declare const useSidebarContext: () => SidebarContextValue | null;
+export declare const useSidebarDensity: () => SidebarDensity;
+export declare const SidebarDensityProvider: React.FC<{
+    children: React.ReactNode;
+    density?: SidebarDensity;
+}>;
+/**
+ * Derived collapsed-view state, shared by all Sidebar sub-components.
+ * Returns falsy defaults outside a Sidebar so it can be called unconditionally.
+ */
+export declare const useSidebarCollapsed: () => {
+    collapsed: boolean;
+    isMobile: boolean;
+    isMobileOpen: boolean;
+    /** Collapsed desktop rail — true only when collapsed AND not the mobile overlay */
+    isCollapsedView: boolean;
+};
 /** Accordion nav context: allows SidebarNav to coordinate which submenu is open */
 interface AccordionNavContextValue {
     openId: string | null;
@@ -12,20 +28,5 @@ export declare const AccordionNavProvider: React.FC<{
     children: React.ReactNode;
     accordion?: boolean;
 }>;
-interface SidebarProviderProps {
-    children: React.ReactNode;
-    defaultCollapsed?: boolean;
-    collapsed?: boolean;
-    onCollapsedChange?: (collapsed: boolean) => void;
-    mobileBreakpoint?: number;
-    mobileOpen?: boolean;
-    onMobileOpenChange?: (open: boolean) => void;
-    width?: {
-        expanded?: number;
-        collapsed?: number;
-    };
-    side?: 'left' | 'right';
-    variant?: 'sidebar' | 'floating' | 'inset';
-}
 export declare const SidebarProvider: React.FC<SidebarProviderProps>;
 export {};

package/dist/components/core/Sidebar/SidebarContext.js

@@ -1,12 +1,42 @@
 import { jsx, Fragment } from 'react/jsx-runtime';
 import { createContext, useContext, useState, useCallback, useMemo, useEffect } from 'react';
+import { useMediaQuery } from '../../../hooks/useMediaQuery.js';
 
 const SidebarContext = createContext(null);
+const SidebarDensityContext = createContext(null);
 const useSidebarContext = () => {
     const context = useContext(SidebarContext);
     // Return null if not in sidebar context (allows NavItem to work elsewhere)
     return context;
 };
+const useSidebarDensity = () => {
+    var _a;
+    const navDensity = useContext(SidebarDensityContext);
+    const sidebarContext = useContext(SidebarContext);
+    return (_a = navDensity !== null && navDensity !== void 0 ? navDensity : sidebarContext === null || sidebarContext === void 0 ? void 0 : sidebarContext.density) !== null && _a !== void 0 ? _a : 'comfortable';
+};
+const SidebarDensityProvider = ({ children, density }) => {
+    if (!density)
+        return jsx(Fragment, { children: children });
+    return (jsx(SidebarDensityContext.Provider, { value: density, children: children }));
+};
+/**
+ * Derived collapsed-view state, shared by all Sidebar sub-components.
+ * Returns falsy defaults outside a Sidebar so it can be called unconditionally.
+ */
+const useSidebarCollapsed = () => {
+    var _a, _b, _c;
+    const context = useContext(SidebarContext);
+    const collapsed = (_a = context === null || context === void 0 ? void 0 : context.collapsed) !== null && _a !== void 0 ? _a : false;
+    const isMobile = (_b = context === null || context === void 0 ? void 0 : context.isMobile) !== null && _b !== void 0 ? _b : false;
+    return {
+        collapsed,
+        isMobile,
+        isMobileOpen: (_c = context === null || context === void 0 ? void 0 : context.isMobileOpen) !== null && _c !== void 0 ? _c : false,
+        /** Collapsed desktop rail — true only when collapsed AND not the mobile overlay */
+        isCollapsedView: collapsed && !isMobile,
+    };
+};
 const AccordionNavContext = createContext(null);
 const useAccordionNavContext = () => useContext(AccordionNavContext);
 const AccordionNavProvider = ({ children, accordion = false }) => {
@@ -22,26 +52,18 @@ const AccordionNavProvider = ({ children, accordion = false }) => {
         return jsx(Fragment, { children: children });
     return (jsx(AccordionNavContext.Provider, { value: value, children: children }));
 };
-const SidebarProvider = ({ children, defaultCollapsed = false, collapsed: controlledCollapsed, onCollapsedChange, mobileBreakpoint = 1024, mobileOpen: controlledMobileOpen, onMobileOpenChange, width = {}, side = 'left', variant = 'sidebar', }) => {
+const SidebarProvider = ({ children, defaultCollapsed = false, collapsed: controlledCollapsed, onCollapsedChange, mobileBreakpoint = 1024, mobileOpen: controlledMobileOpen, onMobileOpenChange, width = {}, side = 'left', variant = 'sidebar', density = 'comfortable', }) => {
     const [internalCollapsed, setInternalCollapsed] = useState(defaultCollapsed);
     const [internalMobileOpen, setInternalMobileOpen] = useState(false);
-    const [isMobile, setIsMobile] = useState(false);
-    // Detect mobile breakpoint
+    // Detect mobile breakpoint via the shared (SSR-safe) media-query hook
+    const isMobile = useMediaQuery(`(max-width: ${mobileBreakpoint - 1}px)`);
+    // Close the mobile drawer when leaving the mobile breakpoint
     useEffect(() => {
-        if (typeof window === 'undefined')
-            return;
-        const mql = window.matchMedia(`(max-width: ${mobileBreakpoint - 1}px)`);
-        const handler = (e) => {
-            setIsMobile(e.matches);
-            if (!e.matches) {
-                setInternalMobileOpen(false);
-                onMobileOpenChange === null || onMobileOpenChange === void 0 ? void 0 : onMobileOpenChange(false);
-            }
-        };
-        handler(mql);
-        mql.addEventListener('change', handler);
-        return () => mql.removeEventListener('change', handler);
-    }, [mobileBreakpoint, onMobileOpenChange]);
+        if (!isMobile) {
+            setInternalMobileOpen(false);
+            onMobileOpenChange === null || onMobileOpenChange === void 0 ? void 0 : onMobileOpenChange(false);
+        }
+    }, [isMobile, onMobileOpenChange]);
     // Collapsed state
     const isCollapsedControlled = controlledCollapsed !== undefined;
     const collapsed = isCollapsedControlled ? controlledCollapsed : internalCollapsed;
@@ -80,11 +102,12 @@ const SidebarProvider = ({ children, defaultCollapsed = false, collapsed: contro
         },
         side,
         variant,
+        density,
         isMobileOpen,
         setMobileOpen,
         isMobile,
-    }), [collapsed, setCollapsed, toggleCollapsed, width.expanded, width.collapsed, side, variant, isMobileOpen, setMobileOpen, isMobile]);
+    }), [collapsed, setCollapsed, toggleCollapsed, width.expanded, width.collapsed, side, variant, density, isMobileOpen, setMobileOpen, isMobile]);
     return (jsx(SidebarContext.Provider, { value: contextValue, children: children }));
 };
 
-export { AccordionNavProvider, SidebarProvider, useAccordionNavContext, useSidebarContext };
+export { AccordionNavProvider, SidebarDensityProvider, SidebarProvider, useAccordionNavContext, useSidebarCollapsed, useSidebarContext, useSidebarDensity };

package/dist/components/core/Sidebar/SidebarFooter.js

@@ -1,14 +1,12 @@
 import { jsx } from 'react/jsx-runtime';
 import React__default from 'react';
 import { cn } from '../../../utils/cn.js';
-import { useSidebarContext } from './SidebarContext.js';
+import { useSidebarCollapsed, useSidebarDensity } from './SidebarContext.js';
 
 const SidebarFooter = React__default.forwardRef(({ children, className, ...props }, ref) => {
-    const sidebarContext = useSidebarContext();
-    const collapsed = (sidebarContext === null || sidebarContext === void 0 ? void 0 : sidebarContext.collapsed) || false;
-    const isMobile = (sidebarContext === null || sidebarContext === void 0 ? void 0 : sidebarContext.isMobile) || false;
-    const isCollapsedView = collapsed && !isMobile;
-    return (jsx("div", { ref: ref, className: cn("flex-shrink-0 border-t border-[var(--color-border)] transition-all duration-200", isCollapsedView ? "p-2 flex justify-center" : "p-3", className), ...props, children: children }));
+    useSidebarCollapsed();
+    useSidebarDensity();
+    return (jsx("div", { ref: ref, className: cn("flex-shrink-0 border-t border-[var(--color-border)] p-2", className), ...props, children: children }));
 });
 SidebarFooter.displayName = "SidebarFooter";
 

package/dist/components/core/Sidebar/SidebarHeader.js

@@ -1,24 +1,19 @@
-import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { jsx, jsxs } from 'react/jsx-runtime';
 import React__default from 'react';
 import { XMarkIcon } from '@heroicons/react/24/outline';
 import { cn } from '../../../utils/cn.js';
-import { useSidebarContext } from './SidebarContext.js';
+import { useSidebarContext, useSidebarCollapsed } from './SidebarContext.js';
 import { SidebarToggle } from './SidebarToggle.js';
 import { Button } from '../Button/Button.js';
 
 const SidebarHeader = React__default.forwardRef(({ logo, showToggle = true, customToggle, children, className, ...props }, ref) => {
     const sidebarContext = useSidebarContext();
-    const collapsed = (sidebarContext === null || sidebarContext === void 0 ? void 0 : sidebarContext.collapsed) || false;
-    const isMobile = (sidebarContext === null || sidebarContext === void 0 ? void 0 : sidebarContext.isMobile) || false;
-    const isMobileOpen = (sidebarContext === null || sidebarContext === void 0 ? void 0 : sidebarContext.isMobileOpen) || false;
+    const { isMobile, isMobileOpen, isCollapsedView: isCollapsedDesktop } = useSidebarCollapsed();
     // If children are provided, use them instead of default layout
     if (children) {
         return (jsx("div", { ref: ref, className: cn("flex-shrink-0 border-b border-[var(--color-border)]", className), ...props, children: children }));
     }
-    const isCollapsedDesktop = collapsed && !isMobile;
-    return (jsx("div", { ref: ref, className: cn("flex items-center flex-shrink-0 h-14 border-b border-[var(--color-border)] overflow-hidden", isCollapsedDesktop ? "justify-center px-2" : "justify-between px-3", className), ...props, children: isCollapsedDesktop ? (
-        /* Collapsed: only show the toggle (expand) button centered */
-        showToggle && (customToggle || jsx(SidebarToggle, {}))) : (jsxs(Fragment, { children: [jsx("div", { className: "flex items-center min-w-0 flex-1", children: logo }), isMobile && isMobileOpen && (jsx(Button, { variant: "ghost", size: "sm", className: "size-7 p-0 text-[var(--color-text-muted)] hover:text-[var(--color-text-primary)]", onClick: () => sidebarContext === null || sidebarContext === void 0 ? void 0 : sidebarContext.setMobileOpen(false), "aria-label": "Close navigation", children: jsx(XMarkIcon, { className: "size-4" }) })), !isMobile && showToggle && (jsx("div", { className: "flex-shrink-0", children: customToggle || jsx(SidebarToggle, {}) }))] })) }));
+    return (jsxs("div", { ref: ref, className: cn("flex items-center flex-shrink-0 h-14 border-b border-[var(--color-border)] overflow-visible relative transition-[padding,background-color,border-color] duration-200 ease-[cubic-bezier(0.4,0,0.2,1)]", isCollapsedDesktop ? "px-4" : "px-3", className), ...props, children: [jsx("div", { className: cn("flex items-center min-w-0 flex-1"), children: logo }), isMobile && isMobileOpen && (jsx(Button, { variant: "ghost", size: "sm", className: "size-7 p-0 text-[var(--color-text-muted)] hover:text-[var(--color-text-primary)]", onClick: () => sidebarContext === null || sidebarContext === void 0 ? void 0 : sidebarContext.setMobileOpen(false), "aria-label": "Close navigation", children: jsx(XMarkIcon, { className: "size-4" }) })), !isMobile && showToggle && (customToggle || jsx(SidebarToggle, {}))] }));
 });
 SidebarHeader.displayName = "SidebarHeader";
 

package/dist/components/core/Sidebar/SidebarLogo.js

@@ -2,15 +2,11 @@ import { jsxs, jsx } from 'react/jsx-runtime';
 import React__default from 'react';
 import { cn } from '../../../utils/cn.js';
 import { AnimatePresence, motion } from 'motion/react';
-import { useSidebarContext } from './SidebarContext.js';
+import { useSidebarCollapsed } from './SidebarContext.js';
 
 const SidebarLogo = React__default.forwardRef(({ icon, text, className, ...props }, ref) => {
-    var _a, _b;
-    const context = useSidebarContext();
-    const collapsed = (_a = context === null || context === void 0 ? void 0 : context.collapsed) !== null && _a !== void 0 ? _a : false;
-    const isMobile = (_b = context === null || context === void 0 ? void 0 : context.isMobile) !== null && _b !== void 0 ? _b : false;
-    const isCollapsedView = collapsed && !isMobile;
-    return (jsxs("div", { ref: ref, className: cn("flex items-center gap-2 overflow-hidden", className), ...props, children: [jsx("div", { className: "flex-shrink-0", children: icon }), jsx(AnimatePresence, { initial: false, children: !isCollapsedView && text && (jsx(motion.div, { className: "overflow-hidden whitespace-nowrap", initial: { opacity: 0, x: -8 }, animate: { opacity: 1, x: 0 }, exit: { opacity: 0, x: -8 }, transition: { duration: 0.15, ease: [0.4, 0, 0.2, 1] }, children: typeof text === "string" ? (jsx("span", { className: "text-lg font-bold text-[var(--color-text-primary)]", children: text })) : (text) }, "logo-text")) })] }));
+    const { isCollapsedView } = useSidebarCollapsed();
+    return (jsxs("div", { ref: ref, className: cn("flex items-center gap-2 overflow-hidden", className), ...props, children: [jsx("div", { className: "flex-shrink-0", children: icon }), jsx(AnimatePresence, { initial: false, children: !isCollapsedView && text && (jsx(motion.div, { className: "overflow-hidden whitespace-nowrap", initial: { opacity: 0, x: -8 }, animate: { opacity: 1, x: 0 }, exit: { opacity: 0, x: -8 }, transition: { duration: 0.15, ease: [0.4, 0, 0.2, 1] }, children: typeof text === "string" ? (jsx("span", { className: "text-base font-semibold tracking-tight text-[var(--color-text-primary)]", children: text })) : (text) }, "logo-text")) })] }));
 });
 SidebarLogo.displayName = "SidebarLogo";
 

package/dist/components/core/Sidebar/SidebarNav.js

@@ -1,10 +1,11 @@
 import { jsx } from 'react/jsx-runtime';
 import React__default from 'react';
 import { cn } from '../../../utils/cn.js';
-import { AccordionNavProvider } from './SidebarContext.js';
+import { useSidebarDensity, SidebarDensityProvider, AccordionNavProvider } from './SidebarContext.js';
 
-const SidebarNav = React__default.forwardRef(({ accordion = false, children, className, ...props }, ref) => {
-    return (jsx("nav", { ref: ref, className: cn('flex-1 space-y-1 p-4', className), role: "navigation", ...props, children: jsx(AccordionNavProvider, { accordion: accordion, children: children }) }));
+const SidebarNav = React__default.forwardRef(({ accordion = false, density, children, className, ...props }, ref) => {
+    const resolvedDensity = density !== null && density !== void 0 ? density : useSidebarDensity();
+    return (jsx("nav", { ref: ref, className: cn('flex-1', resolvedDensity === 'compact' ? 'space-y-0.5' : 'space-y-1', className), "aria-label": "Sidebar", "data-density": resolvedDensity, ...props, children: jsx(SidebarDensityProvider, { density: density, children: jsx(AccordionNavProvider, { accordion: accordion, children: children }) }) }));
 });
 SidebarNav.displayName = 'SidebarNav';
 

package/dist/components/core/Sidebar/SidebarNavGroup.js

@@ -2,15 +2,12 @@ import { jsxs, jsx } from 'react/jsx-runtime';
 import React__default from 'react';
 import { cn } from '../../../utils/cn.js';
 import { AnimatePresence, motion } from 'motion/react';
-import { useSidebarContext } from './SidebarContext.js';
+import { useSidebarCollapsed } from './SidebarContext.js';
 
 const SidebarNavGroup = React__default.forwardRef(({ title, showTitleWhenCollapsed = false, children, className, ...props }, ref) => {
-    const sidebarContext = useSidebarContext();
-    const collapsed = (sidebarContext === null || sidebarContext === void 0 ? void 0 : sidebarContext.collapsed) || false;
-    const isMobile = (sidebarContext === null || sidebarContext === void 0 ? void 0 : sidebarContext.isMobile) || false;
-    const isCollapsedView = collapsed && !isMobile;
-    const showTitle = title && (!isCollapsedView || showTitleWhenCollapsed);
-    return (jsxs("div", { ref: ref, className: cn("space-y-1", className), ...props, children: [jsx(AnimatePresence, { initial: false, children: showTitle && (jsx(motion.div, { initial: { opacity: 0, height: 0 }, animate: { opacity: 1, height: "auto" }, exit: { opacity: 0, height: 0 }, transition: { duration: 0.15, ease: "easeInOut" }, className: "overflow-hidden", children: jsx("div", { className: "px-2 py-1", children: jsx("h3", { className: "text-xs font-semibold text-[var(--color-text-muted)] uppercase tracking-wider", children: title }) }) }, "title")) }), jsx(AnimatePresence, { initial: false, children: isCollapsedView && !showTitleWhenCollapsed && (jsx(motion.div, { initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, transition: { duration: 0.15 }, className: "h-px bg-[var(--color-border)] mx-2 my-1" }, "sep")) }), jsx("div", { className: "space-y-1", children: children })] }));
+    const { isCollapsedView } = useSidebarCollapsed();
+    const showTitleText = title && (!isCollapsedView || showTitleWhenCollapsed);
+    return (jsxs("div", { ref: ref, className: cn("space-y-1", className), ...props, children: [title && (jsx("div", { className: "h-6 flex items-center relative overflow-hidden", children: jsx(AnimatePresence, { initial: false, children: showTitleText ? (jsx(motion.div, { initial: { opacity: 0, x: -4 }, animate: { opacity: 1, x: 0 }, exit: { opacity: 0, x: -4 }, transition: { duration: 0.2, ease: [0.4, 0, 0.2, 1] }, className: "w-full px-2 py-1 absolute left-0", children: jsx("h3", { className: "text-[10px] font-bold text-[var(--color-text-muted)]/70 uppercase", children: title }) }, "title-text")) : (jsx(motion.div, { initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, transition: { duration: 0.2, ease: [0.4, 0, 0.2, 1] }, className: "w-full px-2 absolute left-0", children: jsx("div", { className: "h-px bg-[var(--color-border)] w-full" }) }, "title-separator")) }) })), jsx("div", { className: "space-y-1", children: children })] }));
 });
 SidebarNavGroup.displayName = "SidebarNavGroup";
 

package/dist/components/core/Sidebar/SidebarToggle.js

@@ -7,6 +7,7 @@ import { useSidebarContext } from './SidebarContext.js';
 import { Button } from '../Button/Button.js';
 
 const SidebarToggle = React__default.forwardRef(({ expandIcon, collapseIcon, className, onClick, ...props }, ref) => {
+    var _a;
     const sidebarContext = useSidebarContext();
     if (!sidebarContext) {
         if (process.env.NODE_ENV !== "production") {
@@ -20,7 +21,11 @@ const SidebarToggle = React__default.forwardRef(({ expandIcon, collapseIcon, cla
         onClick === null || onClick === void 0 ? void 0 : onClick(e);
     };
     const { onAnimationStart, onAnimationEnd, onDrag, onDragStart, onDragEnd, color: _color, ...buttonProps } = props;
-    return (jsx(Button, { ref: ref, variant: "ghost", size: "sm", className: cn("size-7 p-0 text-[var(--color-text-muted)] hover:text-[var(--color-text-primary)] hover:bg-[var(--color-background-secondary)]", className), onClick: handleClick, "aria-label": collapsed ? "Expand sidebar" : "Collapse sidebar", title: collapsed ? "Expand sidebar" : "Collapse sidebar", ...buttonProps, children: jsx(motion.div, { initial: false, animate: { rotate: collapsed ? 180 : 0 }, transition: { duration: 0.22, ease: [0.4, 0, 0.2, 1] }, children: jsx(ChevronLeftIcon, { className: "size-[15px]" }) }) }));
+    const side = (_a = sidebarContext.side) !== null && _a !== void 0 ? _a : "left";
+    const positionClasses = side === "left"
+        ? "absolute right-0 translate-x-1/2 top-4 z-50"
+        : "absolute left-0 -translate-x-1/2 top-4 z-50";
+    return (jsx(Button, { ref: ref, iconOnly: true, variant: "ghost", className: cn("size-6 p-0 rounded-full border border-[var(--color-border)] bg-[var(--color-background)]/50 backdrop-blur-sm text-[var(--color-text-muted)] hover:text-[var(--color-text-primary)] hover:shadow-md hover:bg-[var(--color-surface-hover)] opacity-100 transition-all duration-400", positionClasses, className), onClick: handleClick, "aria-label": collapsed ? "Expand sidebar" : "Collapse sidebar", title: collapsed ? "Expand sidebar" : "Collapse sidebar", ...buttonProps, children: jsx(motion.div, { initial: false, animate: { rotate: collapsed ? 180 : 0 }, transition: { duration: 0.2, ease: [0.4, 0, 0.2, 1] }, className: "flex items-center justify-center", children: jsx(ChevronLeftIcon, { className: "size-3", strokeWidth: 2.5 }) }) }));
 });
 SidebarToggle.displayName = "SidebarToggle";
 

package/dist/components/core/Sidebar/SidebarUserProfile.js

@@ -1,30 +1,46 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
+import { jsx, jsxs } from 'react/jsx-runtime';
 import React__default from 'react';
+import { ChevronUpDownIcon } from '@heroicons/react/20/solid';
 import { cn } from '../../../utils/cn.js';
-import { AnimatePresence, motion } from 'motion/react';
-import { useSidebarContext } from './SidebarContext.js';
+import { motion, AnimatePresence } from 'motion/react';
+import { useSidebarCollapsed } from './SidebarContext.js';
 import { Avatar } from '../Avatar/Avatar.js';
 import { Tooltip } from '../Tooltip/Tooltip.js';
 import '../Tooltip/Tooltip.animations.js';
+import { Dropdown } from '../Dropdown/Dropdown.js';
+import '../Dropdown/DropdownTrigger.js';
+import '../Dropdown/DropdownMenu.js';
+import '../Dropdown/DropdownItem.js';
+import '../Dropdown/DropdownSection.js';
+import '../Dropdown/DropdownSeparator.js';
+import '../Dropdown/Dropdown.theme.js';
 
-const statusColors = {
-    online: "bg-[var(--color-success)]",
-    offline: "bg-[var(--color-background-quaternary)]",
-    away: "bg-[var(--color-warning)]",
-    busy: "bg-[var(--color-danger)]",
-};
-const SidebarUserProfile = React__default.forwardRef(({ name, email, avatar, status, dropdownContent, className, onClick, ...props }, ref) => {
-    const sidebarContext = useSidebarContext();
-    const collapsed = (sidebarContext === null || sidebarContext === void 0 ? void 0 : sidebarContext.collapsed) || false;
-    const isMobile = (sidebarContext === null || sidebarContext === void 0 ? void 0 : sidebarContext.isMobile) || false;
-    const isCollapsedView = collapsed && !isMobile;
-    const avatarElement = (jsxs("div", { className: "relative flex-shrink-0", children: [jsx(Avatar, { src: avatar, name: name, size: "sm" }), status && (jsx("span", { className: cn("absolute -bottom-0.5 -right-0.5 size-3 rounded-full ring-2 ring-[var(--color-background)]", statusColors[status]), "aria-label": `Status: ${status}` }))] }));
-    const content = (jsxs("div", { ref: ref, className: cn("flex items-center gap-3 rounded-[var(--radius-base)] cursor-pointer transition-colors duration-150 hover:bg-[var(--color-background-secondary)]", isCollapsedView ? "justify-center p-2" : "px-3 py-2", className), role: "button", tabIndex: 0, onClick: onClick, onKeyDown: (e) => {
+const SidebarUserProfile = React__default.forwardRef(({ name, email, avatar, status, dropdownContent, children, className, onClick, ...props }, ref) => {
+    const { isCollapsedView } = useSidebarCollapsed();
+    // Strip drag/animation DOM handlers that collide with motion's prop types
+    const { onAnimationStart, onAnimationEnd, onDrag, onDragStart, onDragEnd, ...motionSafeProps } = props;
+    const avatarElement = (jsx(Avatar, { src: avatar, name: name, size: isCollapsedView ? "sm" : "md", status: status !== null && status !== void 0 ? status : "none" }));
+    const content = (jsxs(motion.div, { ref: ref, className: cn("flex w-full items-center rounded-[var(--radius-base)] cursor-pointer border border-transparent transition-[padding,gap,background-color,border-color,color,box-shadow] duration-200 ease-[cubic-bezier(0.4,0,0.2,1)] ", isCollapsedView ? "justify-center gap-0 px-1 py-2" : "gap-2 ", className), role: "button", tabIndex: 0, onClick: onClick, onKeyDown: (e) => {
             if ((e.key === "Enter" || e.key === " ") && onClick) {
                 e.preventDefault();
                 e.currentTarget.click();
             }
-        }, ...props, children: [avatarElement, jsx(AnimatePresence, { initial: false, children: !isCollapsedView && (jsxs(motion.div, { className: "flex-1 min-w-0", initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, transition: { duration: 0.12, ease: "easeOut" }, children: [jsx("div", { className: "text-sm font-medium text-[var(--color-text-primary)] truncate", children: name }), email && (jsx("div", { className: "text-xs text-[var(--color-text-muted)] truncate", children: email }))] }, "profile-text")) })] }));
+        }, 
+        // whileHover={{ scale: 1.01, x: isCollapsedView ? 0 : 2 }}
+        whileTap: { scale: 0.98 }, transition: { type: "spring", stiffness: 400, damping: 25 }, ...motionSafeProps, children: [jsx(motion.div
+            // whileHover={{ scale: 1.05 }}
+            // transition={{ type: "spring", stiffness: 400, damping: 20 }}
+            , { 
+                // whileHover={{ scale: 1.05 }}
+                // transition={{ type: "spring", stiffness: 400, damping: 20 }}
+                className: "flex-shrink-0", children: avatarElement }), jsx(AnimatePresence, { initial: false, children: !isCollapsedView && (jsxs(motion.div, { className: "flex flex-row items-center gap-2 flex-1 min-w-0 overflow-hidden whitespace-nowrap", initial: { opacity: 0, x: -4 }, animate: { opacity: 1, x: 0 }, exit: { opacity: 0, x: -4 }, transition: {
+                        opacity: { duration: 0.15, ease: [0.4, 0, 0.2, 1] },
+                        x: { duration: 0.2, ease: [0.4, 0, 0.2, 1] }
+                    }, children: [children !== null && children !== void 0 ? children : (jsxs("div", { className: "flex-1 min-w-0", children: [jsx("div", { className: "text-sm font-medium text-[var(--color-text-primary)] truncate", children: name }), email && (jsx("div", { className: "text-xs text-[var(--color-text-secondary)]/80 truncate", children: email }))] })), dropdownContent && (jsx(ChevronUpDownIcon, { className: "size-4 flex-shrink-0  text-[var(--color-text-muted)]" }))] }, "profile-text")) })] }));
+    // When dropdownContent is provided, the profile acts as a menu trigger.
+    if (dropdownContent) {
+        return (jsxs(Dropdown, { placement: "right-end", offset: 8, children: [jsx(Dropdown.Trigger, { children: content }), jsx(Dropdown.Menu, { "aria-label": `${name} menu`, children: dropdownContent })] }));
+    }
     return (jsx(Tooltip, { content: name, placement: "right", disabled: !isCollapsedView, triggerClassName: "block", children: content }));
 });
 SidebarUserProfile.displayName = "SidebarUserProfile";