@flikk/ui 1.0.0-beta.2 → 1.0.0-beta.21

package/dist/components/core/ScrollArea/ScrollArea.js

@@ -1,5 +1,5 @@
 import { jsx } from 'react/jsx-runtime';
-import React__default, { useRef, useMemo, useImperativeHandle } from 'react';
+import React__default, { useRef, useMemo, useImperativeHandle, useState, useEffect } from 'react';
 import { cn } from '../../../utils/cn.js';
 import { scrollAreaTheme } from './ScrollArea.theme.js';
 import { useSmoothScroll } from './smooth/useSmoothScroll.js';
@@ -25,7 +25,7 @@ import { useSmoothScroll } from './smooth/useSmoothScroll.js';
  * </ScrollArea>
  * ```
  */
-const ScrollArea = React__default.forwardRef(({ children, type = 'hover', orientation = 'vertical', snap, snapAlign = 'start', smooth = false, smoothConfig, onScrollProgress, onPerformanceUpdate, className, theme, ...props }, ref) => {
+const ScrollArea = React__default.forwardRef(({ children, type = 'hover', size = 'default', orientation = 'vertical', snap, snapAlign = 'start', smooth = false, smoothConfig, onScrollProgress, onPerformanceUpdate, className, theme, ...props }, ref) => {
     // Internal ref for the scrollable element
     const internalRef = useRef(null);
     // Determine scroll orientation for smooth scroll
@@ -65,6 +65,26 @@ const ScrollArea = React__default.forwardRef(({ children, type = 'hover', orient
         }
         return extendedRef;
     }, [smooth, smoothAPI]);
+    // Scroll-detection state for type='scroll' (overlay scrollbar)
+    const [isScrolling, setIsScrolling] = useState(false);
+    const scrollTimerRef = useRef(undefined);
+    useEffect(() => {
+        if (type !== 'scroll')
+            return;
+        const el = internalRef.current;
+        if (!el)
+            return;
+        const onScroll = () => {
+            setIsScrolling(true);
+            clearTimeout(scrollTimerRef.current);
+            scrollTimerRef.current = setTimeout(() => setIsScrolling(false), 1000);
+        };
+        el.addEventListener('scroll', onScroll, { passive: true });
+        return () => {
+            el.removeEventListener('scroll', onScroll);
+            clearTimeout(scrollTimerRef.current);
+        };
+    }, [type]);
     // Resolve theme with overrides
     const resolvedTheme = useMemo(() => {
         var _a, _b, _c;
@@ -75,7 +95,19 @@ const ScrollArea = React__default.forwardRef(({ children, type = 'hover', orient
         });
     }, [theme]);
     // Determine overflow classes based on orientation
+    // For type='scroll', use overflow:overlay so scrollbar overlays content
     const overflowClasses = useMemo(() => {
+        if (type === 'scroll') {
+            switch (orientation) {
+                case 'horizontal':
+                    return 'overflow-x-[overlay] overflow-y-hidden';
+                case 'both':
+                    return 'overflow-x-[overlay] overflow-y-[overlay]';
+                case 'vertical':
+                default:
+                    return 'overflow-y-[overlay] overflow-x-hidden';
+            }
+        }
         switch (orientation) {
             case 'horizontal':
                 return 'overflow-x-auto overflow-y-hidden';
@@ -85,7 +117,7 @@ const ScrollArea = React__default.forwardRef(({ children, type = 'hover', orient
             default:
                 return 'overflow-y-auto overflow-x-hidden';
         }
-    }, [orientation]);
+    }, [orientation, type]);
     // Scroll snap classes
     // When snap is enabled for horizontal/both, the viewport becomes a flex container
     // so that items are direct children of the scrollable element (required for snap-align).
@@ -107,9 +139,11 @@ const ScrollArea = React__default.forwardRef(({ children, type = 'hover', orient
         return `${axisClass} ${strictnessClass} ${alignClass} ${layoutClass}`;
     }, [snap, orientation, snapAlign]);
     // Base scrollbar styling classes (shared across all types)
+    const scrollbarDimension = size === 'thin'
+        ? '[&::-webkit-scrollbar]:w-1 [&::-webkit-scrollbar]:h-1'
+        : '[&::-webkit-scrollbar]:w-2 [&::-webkit-scrollbar]:h-2';
     const scrollbarBase = [
-        '[&::-webkit-scrollbar]:w-2',
-        '[&::-webkit-scrollbar]:h-2',
+        scrollbarDimension,
         '[&::-webkit-scrollbar-track]:bg-transparent',
         '[&::-webkit-scrollbar-thumb]:rounded-full',
         '[&::-webkit-scrollbar-corner]:bg-transparent',
@@ -124,13 +158,21 @@ const ScrollArea = React__default.forwardRef(({ children, type = 'hover', orient
                 ].join(' ');
             case 'scroll':
                 return [
-                    '[&::-webkit-scrollbar-thumb]:bg-[var(--color-border)]',
+                    '[&::-webkit-scrollbar-thumb]:bg-transparent',
+                    '[&[data-scrolling]::-webkit-scrollbar-thumb]:bg-black/30',
+                    '[&::-webkit-scrollbar-thumb]:transition-colors',
+                    '[&::-webkit-scrollbar-thumb]:duration-300',
                 ].join(' ');
             case 'hover':
                 return [
                     '[&::-webkit-scrollbar-thumb]:bg-transparent',
                     '[&:hover::-webkit-scrollbar-thumb]:bg-[var(--color-border)]',
                 ].join(' ');
+            case 'none':
+                return [
+                    '[&::-webkit-scrollbar]:!hidden',
+                    '[scrollbar-width:none]',
+                ].join(' ');
             case 'auto':
             default:
                 return [
@@ -138,7 +180,7 @@ const ScrollArea = React__default.forwardRef(({ children, type = 'hover', orient
                 ].join(' ');
         }
     }, [type]);
-    return (jsx("div", { ref: internalRef, className: cn(resolvedTheme.baseStyle, overflowClasses, snapClasses, scrollbarBase, scrollbarVisibility, className), "data-orientation": orientation, "data-type": type, "data-smooth": smooth, ...props, children: children }));
+    return (jsx("div", { ref: internalRef, className: cn(resolvedTheme.baseStyle, overflowClasses, snapClasses, scrollbarBase, scrollbarVisibility, className), "data-orientation": orientation, "data-type": type, "data-smooth": smooth, "data-scrolling": isScrolling || undefined, ...props, children: children }));
 });
 ScrollArea.displayName = 'ScrollArea';
 

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

@@ -4,10 +4,17 @@ import { SmoothScrollConfig, ScrollProgress, PerformanceMetrics } from './smooth
  * Scrollbar visibility behavior
  * - 'auto': Standard browser behavior (show when content overflows)
  * - 'always': Always show scrollbar
- * - 'scroll': Always show scrollbar track
+ * - 'scroll': Show scrollbar only while actively scrolling (overlay, no track)
  * - 'hover': Show scrollbar only on hover
+ * - 'none': Hide scrollbar completely while keeping scroll functionality
  */
-export type ScrollAreaType = 'auto' | 'always' | 'scroll' | 'hover';
+export type ScrollAreaType = 'auto' | 'always' | 'scroll' | 'hover' | 'none';
+/**
+ * Scrollbar size
+ * - 'default': 8px scrollbar (w-2/h-2)
+ * - 'thin': 4px scrollbar (w-1/h-1)
+ */
+export type ScrollAreaSize = 'default' | 'thin';
 /**
  * Theme structure for the ScrollArea component
  */
@@ -29,7 +36,7 @@ export interface ScrollAreaThemeOverrides {
  */
 export interface ScrollAreaRef extends HTMLDivElement {
     /** Programmatically scroll to position with smooth animation */
-    smoothScrollTo?: (position: number, options?: any) => void;
+    smoothScrollTo?: (position: number, options?: import("./smooth/SmoothScrollEngine.types").ScrollToOptions) => void;
     /** Get current scroll velocity */
     getScrollVelocity?: () => number;
     /** Pause smooth scrolling */
@@ -65,6 +72,8 @@ export interface ScrollAreaProps extends HTMLAttributes<HTMLDivElement> {
     children: ReactNode;
     /** Scrollbar visibility behavior @default 'hover' */
     type?: ScrollAreaType;
+    /** Scrollbar size @default 'default' */
+    size?: ScrollAreaSize;
     /** Scroll direction @default 'vertical' */
     orientation?: 'vertical' | 'horizontal' | 'both';
     /**

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

@@ -1,5 +1,5 @@
 export { ScrollArea } from './ScrollArea';
-export type { ScrollAreaProps, ScrollAreaRef, ScrollAreaTheme, ScrollAreaThemeOverrides, ScrollAreaType, } from './ScrollArea.types';
+export type { ScrollAreaProps, ScrollAreaRef, ScrollAreaTheme, ScrollAreaThemeOverrides, ScrollAreaType, ScrollAreaSize, } from './ScrollArea.types';
 export { scrollAreaTheme } from './ScrollArea.theme';
 export { useSmoothScroll } from './smooth/useSmoothScroll';
 export type { SmoothScrollAPI, SmoothScrollConfig, ScrollProgress, ScrollToOptions, SnapPoint, EasingFunction, PerformanceMetrics, } from './smooth';

package/dist/components/core/Segmented/Segmented.js

@@ -5,7 +5,6 @@ import { debounce } from '../../../utils/debounce.js';
 import { segmentedTheme } from './Segmented.theme.js';
 import { SegmentedContext } from './SegmentedContext.js';
 import { SegmentedItem } from './SegmentedItem.js';
-import { GlassEffect } from '../../effects/GlassEffect/GlassEffect.js';
 
 /**
  * Segmented component for selecting one option from a set of segments
@@ -25,7 +24,8 @@ const SegmentedComponent = React__default.forwardRef(({ value, onChange, size =
             setActiveStyle({
                 width: buttonRect.width,
                 height: buttonRect.height,
-                transform: `translateX(${buttonRect.left - containerRect.left - 2}px)`,
+                top: buttonRect.top - containerRect.top,
+                transform: `translateX(${buttonRect.left - containerRect.left}px)`,
             });
         }
     };
@@ -35,8 +35,8 @@ const SegmentedComponent = React__default.forwardRef(({ value, onChange, size =
     // Debounced resize handler for better performance
     const debouncedUpdateActiveStyle = useMemo(() => debounce(updateActiveStyle, 100), [updateActiveStyle]);
     useEffect(() => {
-        window.addEventListener('resize', debouncedUpdateActiveStyle);
-        return () => window.removeEventListener('resize', debouncedUpdateActiveStyle);
+        window.addEventListener("resize", debouncedUpdateActiveStyle);
+        return () => window.removeEventListener("resize", debouncedUpdateActiveStyle);
     }, [debouncedUpdateActiveStyle]);
     const contextValue = {
         selectedValue: value,
@@ -46,15 +46,14 @@ const SegmentedComponent = React__default.forwardRef(({ value, onChange, size =
     };
     return (jsx(SegmentedContext.Provider, { value: contextValue, children: jsxs("div", { ref: (node) => {
                 containerRef.current = node;
-                if (typeof ref === 'function') {
+                if (typeof ref === "function") {
                     ref(node);
                 }
                 else if (ref) {
                     ref.current = node;
                 }
-            }, role: "tablist", "aria-orientation": "horizontal", className: cn((theme === null || theme === void 0 ? void 0 : theme.baseStyle) || segmentedTheme.baseStyle, ((_a = theme === null || theme === void 0 ? void 0 : theme.sizes) === null || _a === void 0 ? void 0 : _a[size]) || segmentedTheme.sizes[size], block && ((theme === null || theme === void 0 ? void 0 : theme.blockStyle) || segmentedTheme.blockStyle), disabled && ((theme === null || theme === void 0 ? void 0 : theme.disabledStyle) || segmentedTheme.disabledStyle), className // User overrides take precedence
-            ), "data-size": size, "data-disabled": disabled, "data-block": block, ...props, children: [jsx(GlassEffect, { rounded: "var(--segmented-radius)", blendModeOuter: "soft-light" }), value && (jsx("div", { className: cn((theme === null || theme === void 0 ? void 0 : theme.slidingBackgroundStyle) || segmentedTheme.slidingBackgroundStyle, slidingBackgroundClassName // User overrides take precedence
-                    ), style: activeStyle })), children] }) }));
+            }, role: "tablist", "aria-orientation": "horizontal", className: cn((theme === null || theme === void 0 ? void 0 : theme.baseStyle) || segmentedTheme.baseStyle, ((_a = theme === null || theme === void 0 ? void 0 : theme.sizes) === null || _a === void 0 ? void 0 : _a[size]) || segmentedTheme.sizes[size], block && ((theme === null || theme === void 0 ? void 0 : theme.blockStyle) || segmentedTheme.blockStyle), disabled && ((theme === null || theme === void 0 ? void 0 : theme.disabledStyle) || segmentedTheme.disabledStyle), className), "data-size": size, "data-disabled": disabled, "data-block": block, ...props, children: [value && (jsx("div", { className: cn((theme === null || theme === void 0 ? void 0 : theme.slidingBackgroundStyle) ||
+                        segmentedTheme.slidingBackgroundStyle, slidingBackgroundClassName), style: activeStyle })), children] }) }));
 });
 // Set display name for dev tools and Storybook
 SegmentedComponent.displayName = "Segmented";

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

@@ -3,7 +3,7 @@
  */
 const segmentedTheme = {
     // Base styles for the segmented container
-    baseStyle: "relative flex rounded-[var(--segmented-radius)] p-[2px] bg-[var(--color-background-secondary)]",
+    baseStyle: "relative flex rounded-[var(--segmented-radius)] bg-[var(--color-background-tertiary)]/50 border-0 border-[var(--color-border)]/50 p-1 shadow-inner dark:bg-[var(--color-background-secondary)]",
     // Size variants using CSS variables
     sizes: {
         sm: "min-h-[var(--segmented-min-h-sm)]",
@@ -15,19 +15,19 @@ const segmentedTheme = {
     // Disabled style
     disabledStyle: "opacity-50 cursor-not-allowed pointer-events-none",
     // Sliding background style with CSS variables
-    slidingBackgroundStyle: "absolute top-[2px] left-[2px] rounded-[calc(var(--segmented-radius)-1.5px)] transition-transform duration-200 ease-out pointer-events-none z-0 bg-[var(--color-background-secondary)] shadow-real-md glass-effect",
+    slidingBackgroundStyle: "absolute top-[0px] left-[0px] rounded-[calc(var(--segmented-radius)-4px)] transition-transform duration-200 ease-out pointer-events-none z-0 bg-white dark:bg-[var(--color-background-tertiary)] shadow-real-md",
 };
 /**
  * Default theme for the SegmentedItem component
  */
 const segmentedItemTheme = {
     // Base styles for the segmented item
-    baseStyle: "relative flex min-h-full min-w-fit flex-1 items-center justify-center transition-all duration-200 rounded-[calc(var(--segmented-radius)-1.5px)] font-medium cursor-pointer focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-primary-500)] focus-visible:ring-offset-1",
+    baseStyle: "relative flex min-w-fit flex-1 items-center justify-center transition-all duration-200 rounded-[calc(var(--segmented-radius)-4px)] font-medium cursor-pointer focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-primary-500)] focus-visible:ring-offset-1",
     // Size variants using CSS variables
     sizes: {
-        sm: "text-[length:var(--segmented-text-size-sm)] px-[var(--segmented-px-sm)]",
-        md: "text-[length:var(--segmented-text-size-md)] px-[var(--segmented-px-md)]",
-        lg: "text-[length:var(--segmented-text-size-lg)] px-[var(--segmented-px-lg)]",
+        sm: "text-base px-[var(--segmented-px-sm)]",
+        md: "text-base px-[var(--segmented-px-md)]",
+        lg: "text-base px-[var(--segmented-px-lg)]",
     },
     // Selected state
     selectedStyle: "text-[var(--color-text-primary)] z-10",

package/dist/components/core/Segmented/SegmentedItem.js

@@ -24,6 +24,6 @@ const SegmentedItem = React__default.forwardRef(({ value, disabled = false, chil
         ), onClick: handleClick, "data-value": value, "data-selected": isSelected, "data-disabled": isDisabled, ...props, children: children }));
 });
 // Set display name for dev tools and Storybook
-SegmentedItem.displayName = "SegmentedItem";
+SegmentedItem.displayName = "Segmented.Item";
 
 export { SegmentedItem };

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

@@ -1,3 +1,13 @@
 import React from "react";
 import { SidebarProps } from "./Sidebar.types";
-export declare const Sidebar: React.ForwardRefExoticComponent<SidebarProps & React.RefAttributes<HTMLDivElement>>;
+export declare const Sidebar: React.ForwardRefExoticComponent<SidebarProps & React.RefAttributes<HTMLDivElement>> & {
+    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,43 +1,78 @@
-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 { onAnimationStart, onAnimationEnd, onDrag, onDragStart, onDragEnd, ...motionSafeProps } = props;
     const sidebarClasses = cn(theme.baseStyle, theme.variants[variant], theme.sides[side], className);
     const animateValue = useMemo(() => ({
         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, ...props, children: children }));
+    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 }));
 });
-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 };