@flikk/ui 1.0.0-beta.13 → 1.0.0-beta.14

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

@@ -1,33 +1,35 @@
-import { jsx } from 'react/jsx-runtime';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import React__default, { useMemo } from 'react';
 import { cn } from '../../../utils/cn.js';
-import { motion } from 'motion/react';
+import { motion, AnimatePresence } from 'motion/react';
 import { sidebarTheme } from './Sidebar.theme.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';
 
 const SIDEBAR_TRANSITION = {
     type: "spring",
     stiffness: 300,
     damping: 30,
 };
-const SidebarContainer = React__default.forwardRef(({ side = "left", variant = "sidebar", width, children, className, theme: customTheme = {}, ...props }, ref) => {
+const SidebarDesktop = React__default.forwardRef(({ side = "left", variant = "sidebar", width, children, className, theme: customTheme = {}, ...props }, ref) => {
     var _a, _b, _c;
     const context = useSidebarContext();
     const collapsed = (_a = context === null || context === void 0 ? void 0 : context.collapsed) !== null && _a !== void 0 ? _a : false;
-    // Default widths
     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;
-    const collapsedWidth = (width === null || width === void 0 ? void 0 : width.collapsed) || ((_c = context === null || context === void 0 ? void 0 : context.width) === null || _c === void 0 ? void 0 : _c.collapsed) || 80;
+    const collapsedWidth = (width === null || width === void 0 ? void 0 : width.collapsed) || ((_c = context === null || context === void 0 ? void 0 : context.width) === null || _c === void 0 ? void 0 : _c.collapsed) || 64;
     const theme = useMemo(() => ({
         ...sidebarTheme,
         ...customTheme,
-        variants: {
-            ...sidebarTheme.variants,
-            ...customTheme.variants,
-        },
-        sides: {
-            ...sidebarTheme.sides,
-            ...customTheme.sides,
-        },
+        variants: { ...sidebarTheme.variants, ...customTheme.variants },
+        sides: { ...sidebarTheme.sides, ...customTheme.sides },
     }), [customTheme]);
     const sidebarClasses = cn(theme.baseStyle, theme.variants[variant], theme.sides[side], className);
     const animateValue = useMemo(() => ({
@@ -36,9 +38,40 @@ const SidebarContainer = React__default.forwardRef(({ side = "left", variant = "
     }), [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, ...props, children: children }));
 });
-const Sidebar = React__default.forwardRef(({ side = "left", variant = "sidebar", defaultCollapsed = false, collapsed: controlledCollapsed, onCollapsedChange, width, children, className, theme: customTheme = {}, ...props }, ref) => {
-    return (jsx(SidebarProvider, { defaultCollapsed: defaultCollapsed, collapsed: controlledCollapsed, onCollapsedChange: onCollapsedChange, width: width, side: side, variant: variant, children: jsx(SidebarContainer, { ref: ref, className: className, theme: customTheme, side: side, variant: variant, width: width, ...props, children: children }) }));
+SidebarDesktop.displayName = "SidebarDesktop";
+const SidebarMobile = ({ children, className, theme: customTheme = {} }) => {
+    const context = useSidebarContext();
+    if (!context)
+        return null;
+    const { isMobileOpen, setMobileOpen } = context;
+    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 SidebarContainer = React__default.forwardRef((props, ref) => {
+    const context = useSidebarContext();
+    if (context === null || context === void 0 ? void 0 : context.isMobile) {
+        return (jsx(SidebarMobile, { className: props.className, theme: props.theme, children: props.children }));
+    }
+    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 }) }));
+});
+SidebarRoot.displayName = "Sidebar";
+const Sidebar = Object.assign(SidebarRoot, {
+    Header: SidebarHeader,
+    Content: SidebarContent,
+    Footer: SidebarFooter,
+    Nav: SidebarNav,
+    NavGroup: SidebarNavGroup,
+    Submenu: SidebarSubmenu,
+    Toggle: SidebarToggle,
+    MobileTrigger: SidebarMobileTrigger,
+    UserProfile: SidebarUserProfile,
 });
-Sidebar.displayName = "Sidebar";
 
 export { Sidebar };

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

@@ -1,16 +1,18 @@
 const sidebarTheme = {
-    baseStyle: 'flex flex-col h-full bg-white border-r border-gray-200 overflow-hidden transition-all duration-300 ease-in-out',
+    baseStyle: 'flex flex-col h-full bg-[var(--color-background)] overflow-hidden',
     variants: {
         sidebar: 'relative',
-        floating: 'rounded-[var(--radius-base)] shadow-lg border border-gray-200',
-        inset: 'rounded-[var(--radius-base)] bg-gray-50 border border-gray-200',
+        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)]',
     },
     sides: {
-        left: 'border-r',
-        right: 'border-l',
+        left: 'border-r border-[var(--color-border)]',
+        right: 'border-l border-[var(--color-border)]',
     },
-    collapsed: 'w-20',
-    expanded: 'w-[280px]', // Using arbitrary value since 280px is not a standard Tailwind width
+    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',
 };
 
 export { sidebarTheme };

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

@@ -1,6 +1,7 @@
 import { ReactNode } from 'react';
 export type SidebarSide = 'left' | 'right';
 export type SidebarVariant = 'sidebar' | 'floating' | 'inset';
+export type SidebarUserStatus = 'online' | 'offline' | 'away' | 'busy';
 export interface SidebarContextValue {
     collapsed: boolean;
     setCollapsed: (collapsed: boolean) => void;
@@ -11,6 +12,11 @@ export interface SidebarContextValue {
     };
     side: SidebarSide;
     variant: SidebarVariant;
+    /** Whether the sidebar is currently showing as mobile overlay */
+    isMobileOpen: boolean;
+    setMobileOpen: (open: boolean) => void;
+    /** Whether we're below the mobile breakpoint */
+    isMobile: boolean;
 }
 export interface SidebarProps extends React.HTMLAttributes<HTMLDivElement> {
     /**
@@ -43,6 +49,19 @@ export interface SidebarProps extends React.HTMLAttributes<HTMLDivElement> {
         expanded?: number;
         collapsed?: number;
     };
+    /**
+     * Mobile breakpoint in pixels. Below this, sidebar becomes a full-screen overlay.
+     * @default 1024
+     */
+    mobileBreakpoint?: number;
+    /**
+     * Controlled mobile open state
+     */
+    mobileOpen?: boolean;
+    /**
+     * Callback when mobile open state changes
+     */
+    onMobileOpenChange?: (open: boolean) => void;
     /**
      * Children components
      */
@@ -78,6 +97,12 @@ export interface SidebarFooterProps extends React.HTMLAttributes<HTMLDivElement>
     children: ReactNode;
 }
 export interface SidebarNavProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * When true, only one submenu can be open at a time within this nav.
+     * Opening a new submenu auto-closes the previously open one.
+     * @default false
+     */
+    accordion?: boolean;
     children: ReactNode;
 }
 export interface SidebarNavGroupProps extends React.HTMLAttributes<HTMLDivElement> {
@@ -105,6 +130,34 @@ export interface SidebarToggleProps extends React.HTMLAttributes<HTMLButtonEleme
      */
     collapseIcon?: ReactNode;
 }
+export interface SidebarMobileTriggerProps extends React.HTMLAttributes<HTMLButtonElement> {
+    /**
+     * Custom icon for the trigger
+     */
+    icon?: ReactNode;
+}
+export interface SidebarUserProfileProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * User display name
+     */
+    name: string;
+    /**
+     * User email
+     */
+    email?: string;
+    /**
+     * Avatar image URL
+     */
+    avatar?: string;
+    /**
+     * Online status indicator
+     */
+    status?: SidebarUserStatus;
+    /**
+     * Content to render when the profile is clicked (e.g. dropdown menu)
+     */
+    dropdownContent?: ReactNode;
+}
 export interface SidebarTheme {
     baseStyle: string;
     variants: {
@@ -115,6 +168,8 @@ export interface SidebarTheme {
     };
     collapsed: string;
     expanded: string;
+    mobileOverlay: string;
+    mobileBackdrop: string;
 }
 export interface SidebarThemeOverrides {
     baseStyle?: string;
@@ -126,4 +181,6 @@ export interface SidebarThemeOverrides {
     }>;
     collapsed?: string;
     expanded?: string;
+    mobileOverlay?: string;
+    mobileBackdrop?: string;
 }

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

@@ -6,7 +6,9 @@ import { useSidebarContext } from './SidebarContext.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;
-    return (jsx("div", { ref: ref, className: cn("flex-1 overflow-y-auto overflow-x-hidden py-2 transition-all duration-200", collapsed ? "px-2" : "px-3", className), ...props, children: children }));
+    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-2 transition-all duration-200", isCollapsedView ? "px-2" : "px-3", className), ...props, children: children }));
 });
 SidebarContent.displayName = "SidebarContent";
 

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

@@ -1,11 +1,25 @@
 import React from 'react';
 import { SidebarContextValue } from './Sidebar.types';
 export declare const useSidebarContext: () => SidebarContextValue | null;
+/** Accordion nav context: allows SidebarNav to coordinate which submenu is open */
+interface AccordionNavContextValue {
+    openId: string | null;
+    register: (id: string) => void;
+    unregister: (id: string) => void;
+}
+export declare const useAccordionNavContext: () => AccordionNavContextValue | null;
+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;

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

@@ -1,5 +1,5 @@
-import { jsx } from 'react/jsx-runtime';
-import { createContext, useContext, useState, useCallback, useMemo } from 'react';
+import { jsx, Fragment } from 'react/jsx-runtime';
+import { createContext, useContext, useState, useCallback, useMemo, useEffect } from 'react';
 
 const SidebarContext = createContext(null);
 const useSidebarContext = () => {
@@ -7,32 +7,84 @@ const useSidebarContext = () => {
     // Return null if not in sidebar context (allows NavItem to work elsewhere)
     return context;
 };
-const SidebarProvider = ({ children, defaultCollapsed = false, collapsed: controlledCollapsed, onCollapsedChange, width = {}, side = 'left', variant = 'sidebar', }) => {
+const AccordionNavContext = createContext(null);
+const useAccordionNavContext = () => useContext(AccordionNavContext);
+const AccordionNavProvider = ({ children, accordion = false }) => {
+    const [openId, setOpenId] = useState(null);
+    const register = useCallback((id) => {
+        setOpenId(id);
+    }, []);
+    const unregister = useCallback((id) => {
+        setOpenId(prev => (prev === id ? null : prev));
+    }, []);
+    const value = useMemo(() => ({ openId, register, unregister }), [openId, register, unregister]);
+    if (!accordion)
+        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 [internalCollapsed, setInternalCollapsed] = useState(defaultCollapsed);
-    // Determine if component is controlled
-    const isControlled = controlledCollapsed !== undefined;
-    const collapsed = isControlled ? controlledCollapsed : internalCollapsed;
+    const [internalMobileOpen, setInternalMobileOpen] = useState(false);
+    const [isMobile, setIsMobile] = useState(false);
+    // Detect 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]);
+    // Collapsed state
+    const isCollapsedControlled = controlledCollapsed !== undefined;
+    const collapsed = isCollapsedControlled ? controlledCollapsed : internalCollapsed;
     const setCollapsed = useCallback((newCollapsed) => {
-        if (!isControlled) {
+        if (!isCollapsedControlled) {
             setInternalCollapsed(newCollapsed);
         }
         onCollapsedChange === null || onCollapsedChange === void 0 ? void 0 : onCollapsedChange(newCollapsed);
-    }, [isControlled, onCollapsedChange]);
+    }, [isCollapsedControlled, onCollapsedChange]);
     const toggleCollapsed = useCallback(() => {
         setCollapsed(!collapsed);
     }, [collapsed, setCollapsed]);
+    // Mobile open state
+    const isMobileOpenControlled = controlledMobileOpen !== undefined;
+    const isMobileOpen = isMobileOpenControlled ? controlledMobileOpen : internalMobileOpen;
+    const setMobileOpen = useCallback((open) => {
+        if (!isMobileOpenControlled) {
+            setInternalMobileOpen(open);
+        }
+        onMobileOpenChange === null || onMobileOpenChange === void 0 ? void 0 : onMobileOpenChange(open);
+    }, [isMobileOpenControlled, onMobileOpenChange]);
+    // Lock body scroll when mobile overlay is open
+    useEffect(() => {
+        if (isMobile && isMobileOpen) {
+            document.body.style.overflow = 'hidden';
+            return () => { document.body.style.overflow = ''; };
+        }
+    }, [isMobile, isMobileOpen]);
     const contextValue = useMemo(() => ({
         collapsed,
         setCollapsed,
         toggleCollapsed,
         width: {
             expanded: width.expanded || 280,
-            collapsed: width.collapsed || 80,
+            collapsed: width.collapsed || 64,
         },
         side,
         variant,
-    }), [collapsed, setCollapsed, toggleCollapsed, width.expanded, width.collapsed, side, variant]);
+        isMobileOpen,
+        setMobileOpen,
+        isMobile,
+    }), [collapsed, setCollapsed, toggleCollapsed, width.expanded, width.collapsed, side, variant, isMobileOpen, setMobileOpen, isMobile]);
     return (jsx(SidebarContext.Provider, { value: contextValue, children: children }));
 };
 
-export { SidebarProvider, useSidebarContext };
+export { AccordionNavProvider, SidebarProvider, useAccordionNavContext, useSidebarContext };

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

@@ -6,7 +6,9 @@ import { useSidebarContext } 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;
-    return (jsx("div", { ref: ref, className: cn("flex-shrink-0 border-t border-[var(--color-border)] bg-[var(--color-background)] transition-all duration-200", collapsed ? "p-2 flex justify-center" : "p-4", className), ...props, children: children }));
+    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-4", className), ...props, children: children }));
 });
 SidebarFooter.displayName = "SidebarFooter";
 

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

@@ -1,17 +1,21 @@
 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 { 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;
     // 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-gray-200 bg-white", className), ...props, children: children }));
+        return (jsx("div", { ref: ref, className: cn("flex-shrink-0 border-b border-[var(--color-border)]", className), ...props, children: children }));
     }
-    return (jsxs("div", { ref: ref, className: cn("flex items-center justify-between flex-shrink-0 h-16 border-b border-[var(--color-border)] bg-[var(--color-background)] transition-all duration-200", collapsed ? "px-3" : "px-4", className), ...props, children: [jsx("div", { className: cn("flex items-center min-w-0 transition-all duration-200", collapsed ? "flex-shrink-0" : "flex-1"), children: logo }), showToggle && (jsx("div", { className: "flex-shrink-0", children: customToggle || jsx(SidebarToggle, {}) }))] }));
+    return (jsxs("div", { ref: ref, className: cn("flex items-center justify-between flex-shrink-0 h-16 border-b border-[var(--color-border)] transition-all duration-200", collapsed && !isMobile ? "px-3" : "px-4", className), ...props, children: [jsx("div", { className: cn("flex items-center min-w-0 transition-all duration-200", collapsed && !isMobile ? "flex-shrink-0" : "flex-1"), children: logo }), isMobile && isMobileOpen && (jsx(Button, { variant: "soft", size: "sm", className: "size-8 p-0", onClick: () => sidebarContext === null || sidebarContext === void 0 ? void 0 : sidebarContext.setMobileOpen(false), "aria-label": "Close navigation", children: jsx(XMarkIcon, { className: "size-5" }) })), !isMobile && showToggle && (jsx("div", { className: "flex-shrink-0", children: customToggle || jsx(SidebarToggle, {}) }))] }));
 });
 SidebarHeader.displayName = "SidebarHeader";
 

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

@@ -0,0 +1,3 @@
+import React from "react";
+import { SidebarMobileTriggerProps } from "./Sidebar.types";
+export declare const SidebarMobileTrigger: React.ForwardRefExoticComponent<SidebarMobileTriggerProps & React.RefAttributes<HTMLButtonElement>>;

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

@@ -0,0 +1,28 @@
+import { jsx } from 'react/jsx-runtime';
+import React__default from 'react';
+import { Bars3Icon } from '@heroicons/react/24/outline';
+import { cn } from '../../../utils/cn.js';
+import { useSidebarContext } from './SidebarContext.js';
+import { Button } from '../Button/Button.js';
+
+const SidebarMobileTrigger = React__default.forwardRef(({ icon, className, onClick, ...props }, ref) => {
+    const sidebarContext = useSidebarContext();
+    if (!sidebarContext) {
+        if (process.env.NODE_ENV !== "production") {
+            console.warn("SidebarMobileTrigger must be used within a Sidebar component");
+        }
+        return null;
+    }
+    const { isMobile, setMobileOpen } = sidebarContext;
+    // Only render on mobile
+    if (!isMobile)
+        return null;
+    const handleClick = (e) => {
+        setMobileOpen(true);
+        onClick === null || onClick === void 0 ? void 0 : onClick(e);
+    };
+    return (jsx(Button, { ref: ref, variant: "soft", size: "sm", className: cn("size-9 p-0", className), onClick: handleClick, "aria-label": "Open navigation menu", ...props, children: icon || jsx(Bars3Icon, { className: "size-5" }) }));
+});
+SidebarMobileTrigger.displayName = "SidebarMobileTrigger";
+
+export { SidebarMobileTrigger };

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

@@ -1,9 +1,10 @@
 import { jsx } from 'react/jsx-runtime';
 import React__default from 'react';
 import { cn } from '../../../utils/cn.js';
+import { AccordionNavProvider } from './SidebarContext.js';
 
-const SidebarNav = React__default.forwardRef(({ children, className, ...props }, ref) => {
-    return (jsx("nav", { ref: ref, className: cn('flex-1 space-y-1 p-4', className), role: "navigation", ...props, children: children }));
+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 }) }));
 });
 SidebarNav.displayName = 'SidebarNav';
 

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

@@ -6,8 +6,10 @@ import { useSidebarContext } 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 showTitle = title && (!collapsed || showTitleWhenCollapsed);
-    return (jsxs("div", { ref: ref, className: cn("space-y-1", className), ...props, children: [showTitle && (jsx("div", { className: "px-2 py-2", children: jsx("h3", { className: "text-sm font-semibold text-[var(--color-text-muted)] uppercase tracking-wider", children: title }) })), collapsed && !showTitleWhenCollapsed && (jsx("div", { className: "h-px bg-[var(--color-border)] mx-2 my-2" })), jsx("div", { className: "space-y-1", children: children })] }));
+    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: [showTitle && (jsx("div", { className: "px-2 py-2", children: jsx("h3", { className: "text-sm font-semibold text-[var(--color-text-muted)] uppercase tracking-wider", children: title }) })), isCollapsedView && !showTitleWhenCollapsed && (jsx("div", { className: "h-px bg-[var(--color-border)] mx-2 my-2" })), jsx("div", { className: "space-y-1", children: children })] }));
 });
 SidebarNavGroup.displayName = "SidebarNavGroup";
 

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

@@ -19,7 +19,7 @@ const SidebarToggle = React__default.forwardRef(({ expandIcon, collapseIcon, cla
         toggleCollapsed();
         onClick === null || onClick === void 0 ? void 0 : onClick(e);
     };
-    return (jsx(Button, { ref: ref, variant: "ghost", size: "sm", className: cn("size-8 p-0", className), onClick: handleClick, "aria-label": collapsed ? "Expand sidebar" : "Collapse sidebar", title: collapsed ? "Expand sidebar" : "Collapse sidebar", ...props, children: jsx(motion.div, { initial: false, animate: { rotate: collapsed ? 180 : 0 }, transition: { duration: 0.2 }, children: collapsed
+    return (jsx(Button, { ref: ref, variant: "soft", size: "sm", className: cn("size-8 p-0", className), onClick: handleClick, "aria-label": collapsed ? "Expand sidebar" : "Collapse sidebar", title: collapsed ? "Expand sidebar" : "Collapse sidebar", ...props, children: jsx(motion.div, { initial: false, animate: { rotate: collapsed ? 180 : 0 }, transition: { duration: 0.2 }, children: collapsed
                 ? expandIcon || jsx(ChevronRightIcon, { className: "size-4" })
                 : collapseIcon || jsx(ChevronLeftIcon, { className: "size-4" }) }) }));
 });

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

@@ -0,0 +1,3 @@
+import React from "react";
+import { SidebarUserProfileProps } from "./Sidebar.types";
+export declare const SidebarUserProfile: React.ForwardRefExoticComponent<SidebarUserProfileProps & React.RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1,35 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import React__default from 'react';
+import { cn } from '../../../utils/cn.js';
+import { useSidebarContext } from './SidebarContext.js';
+import { Avatar } from '../Avatar/Avatar.js';
+import { Tooltip } from '../Tooltip/Tooltip.js';
+import '../Tooltip/Tooltip.animations.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) => {
+            if ((e.key === "Enter" || e.key === " ") && onClick) {
+                e.preventDefault();
+                onClick(e);
+            }
+        }, ...props, children: [avatarElement, !isCollapsedView && (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-muted)] truncate", children: email }))] }))] }));
+    // Tooltip when collapsed
+    if (isCollapsedView) {
+        return (jsx(Tooltip, { content: name, placement: "right", children: content }));
+    }
+    return content;
+});
+SidebarUserProfile.displayName = "SidebarUserProfile";
+
+export { SidebarUserProfile };

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

@@ -6,5 +6,7 @@ export { SidebarNav } from "./SidebarNav";
 export { SidebarNavGroup } from "./SidebarNavGroup";
 export { SidebarSubmenu } from "./SidebarSubmenu";
 export { SidebarToggle } from "./SidebarToggle";
+export { SidebarMobileTrigger } from "./SidebarMobileTrigger";
+export { SidebarUserProfile } from "./SidebarUserProfile";
 export { useSidebarContext } from "./SidebarContext";
-export type { SidebarProps, SidebarHeaderProps, SidebarContentProps, SidebarFooterProps, SidebarNavProps, SidebarNavGroupProps, SidebarToggleProps, SidebarSide, SidebarVariant, SidebarContextValue, SidebarTheme, SidebarThemeOverrides, } from "./Sidebar.types";
+export type { SidebarProps, SidebarHeaderProps, SidebarContentProps, SidebarFooterProps, SidebarNavProps, SidebarNavGroupProps, SidebarToggleProps, SidebarMobileTriggerProps, SidebarUserProfileProps, SidebarUserStatus, SidebarSide, SidebarVariant, SidebarContextValue, SidebarTheme, SidebarThemeOverrides, } from "./Sidebar.types";

package/dist/components/core/Tabs/Tabs.theme.d.ts

@@ -1,4 +1,4 @@
-import { TabsSize } from './Tabs.types';
+import { TabsSize } from "./Tabs.types";
 /**
  * Clean theme structure for Tabs components
  */

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

@@ -7,11 +7,11 @@ const tabsTheme = {
     // TabsList styles with proper design tokens
     listStyle: "relative inline-flex items-center flex-row border-b border-[var(--color-border)] gap-2",
     // TabsTrigger base styles - no individual borders, underline will be handled separately
-    triggerStyle: "relative inline-flex items-center justify-center whitespace-nowrap font-medium transition-all duration-300 cursor-pointer focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-primary)] focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 text-[var(--color-text-muted)] hover:text-[var(--color-text-primary)] data-[state=active]:text-[var(--color-primary)]",
+    triggerStyle: "relative inline-flex items-center justify-center whitespace-nowrap font-semibold transition-all duration-300 cursor-pointer focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-primary)] focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 text-[var(--color-text-muted)] hover:text-[var(--color-text-primary)] data-[state=active]:text-[var(--color-primary)]",
     // TabsTrigger size variants using CSS variables where applicable
     triggerSizes: {
-        sm: "px-2 py-1.5 text-base gap-1",
-        md: "px-2 py-2 text-base gap-1",
+        sm: "px-2 py-1.5 text-base",
+        md: "px-2 py-2 text-base",
     },
     // TabsBody styles with proper CSS variables
     bodyStyle: "focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-primary)] focus-visible:ring-offset-2",

package/dist/components/core/index.js

@@ -89,6 +89,8 @@ export { SidebarNav } from './Sidebar/SidebarNav.js';
 export { SidebarNavGroup } from './Sidebar/SidebarNavGroup.js';
 export { SidebarSubmenu } from './Sidebar/SidebarSubmenu.js';
 export { SidebarToggle } from './Sidebar/SidebarToggle.js';
+export { SidebarMobileTrigger } from './Sidebar/SidebarMobileTrigger.js';
+export { SidebarUserProfile } from './Sidebar/SidebarUserProfile.js';
 export { useSidebarContext } from './Sidebar/SidebarContext.js';
 export { OfflineIndicator } from './OfflineIndicator/OfflineIndicator.js';
 export { offlineIndicatorTheme } from './OfflineIndicator/OfflineIndicator.theme.js';

package/dist/components/data-display/GanttChart/GanttToolbar.js

@@ -23,7 +23,7 @@ const GanttToolbar = () => {
         const targetScroll = todayOffset * dayWidth - container.clientWidth / 2;
         container.scrollTo({ left: targetScroll, behavior: "smooth" });
     };
-    return (jsxs("div", { className: cn(theme.toolbarStyle), children: [jsxs("div", { className: "flex items-center gap-3", children: [todayOffset !== null && (jsxs(Button, { variant: "outline", color: "neutral", size: "sm", onClick: handleScrollToToday, children: [jsx(CalendarIcon, { className: "size-4" }), "Today"] })), jsx(Segmented, { value: zoom, onChange: (val) => setZoom(val), size: "sm", children: ZOOM_OPTIONS.map((opt) => (jsx(Segmented.Item, { value: opt.value, children: opt.label }, opt.value))) }), jsx(Checkbox, { id: "gantt-hide-completed", name: "hideCompleted", value: "hideCompleted", checked: hideCompleted, onChange: (checked) => setHideCompleted(checked), label: "Hide completed", size: "sm" })] }), jsx("div", { className: "flex items-center gap-2", children: onGroupAdd && !readonly && (jsxs(Button, { variant: "ghost", size: "sm", onClick: onGroupAdd, children: [jsx(PlusIcon, { className: "size-3.5" }), "Add group"] })) })] }));
+    return (jsxs("div", { className: cn(theme.toolbarStyle), children: [jsxs("div", { className: "flex items-center gap-3", children: [todayOffset !== null && (jsxs(Button, { variant: "outline", color: "neutral", size: "sm", onClick: handleScrollToToday, children: [jsx(CalendarIcon, { className: "size-4" }), "Today"] })), jsx(Segmented, { value: zoom, onChange: (val) => setZoom(val), size: "sm", children: ZOOM_OPTIONS.map((opt) => (jsx(Segmented.Item, { value: opt.value, children: opt.label }, opt.value))) }), jsx(Checkbox, { id: "gantt-hide-completed", name: "hideCompleted", value: "hideCompleted", checked: hideCompleted, onChange: (checked) => setHideCompleted(checked), label: "Hide completed", size: "sm" })] }), jsx("div", { className: "flex items-center gap-2", children: onGroupAdd && !readonly && (jsxs(Button, { variant: "soft", size: "sm", onClick: onGroupAdd, children: [jsx(PlusIcon, { className: "size-3.5" }), "Add group"] })) })] }));
 };
 
 export { GanttToolbar };