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

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

@@ -1,5 +1,3 @@
-import { semanticBgColors } from '../../../utils/colorUtils.js';
-
 /**
  * Default theme configuration for Progress component
  */
@@ -8,10 +6,10 @@ const progressTheme = {
     containerStyle: "w-full",
     // Track (background) styles
     trackStyle: "relative w-full rounded-full bg-[var(--color-background-tertiary)] overflow-hidden",
-    // Fill (progress bar) styles
-    fillStyle: "h-full rounded-full",
+    // Fill (progress bar) styles — includes default primary color
+    fillStyle: "h-full rounded-full bg-[var(--color-primary)]",
     // Label text styles
-    labelStyle: "text-base font-medium text-[var(--color-text-secondary)] tabular-nums min-w-[2.5rem] text-right",
+    labelStyle: "text-base font-semibold text-[var(--color-text-secondary)] tabular-nums min-w-[2.5rem] text-right",
     // Inside label styles (when label is positioned inside the bar)
     insideLabelStyle: "absolute inset-0 flex items-center justify-center text-sm font-medium text-[var(--color-primary-contrast)] tabular-nums",
     // Size variants for track height
@@ -20,17 +18,8 @@ const progressTheme = {
         md: "h-2.5",
         lg: "h-4",
     },
-    // Color variants for the fill
-    colors: {
-        neutral: semanticBgColors.neutral + " dark:bg-[var(--color-neutral-500)]",
-        primary: semanticBgColors.primary + " dark:bg-[var(--color-primary-400)]",
-        secondary: semanticBgColors.secondary + " dark:bg-[var(--color-secondary-400)]",
-        success: semanticBgColors.success + " dark:bg-[var(--color-success-400)]",
-        warning: semanticBgColors.warning + " dark:bg-[var(--color-warning-400)]",
-        danger: semanticBgColors.danger + " dark:bg-[var(--color-danger-400)]",
-    },
-    // Indeterminate animation styles
-    indeterminateStyle: "animate-[progress-indeterminate_1.5s_ease-in-out_infinite]",
+    // Indeterminate animation styles (striped pattern by default)
+    indeterminateStyle: "animate-[progress-indeterminate_1.8s_linear_infinite] bg-[repeating-linear-gradient(45deg,var(--color-primary),var(--color-primary)_10px,var(--color-primary-700)_10px,var(--color-primary-700)_20px)]",
 };
 
 export { progressTheme };

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

@@ -1,7 +1,5 @@
 import React from "react";
-import { SemanticColor } from "../../../utils/colorUtils";
 export type ProgressSize = "sm" | "md" | "lg";
-export type ProgressColor = SemanticColor;
 export type ProgressLabelPosition = "right" | "top" | "bottom" | "inside";
 /**
  * Theme configuration for Progress component
@@ -19,8 +17,6 @@ export interface ProgressTheme {
     insideLabelStyle: string;
     /** Size variants for the track height */
     sizes: Record<ProgressSize, string>;
-    /** Color variants for the fill */
-    colors: Record<ProgressColor, string>;
     /** Indeterminate animation styles */
     indeterminateStyle: string;
 }
@@ -34,7 +30,6 @@ export interface ProgressThemeOverrides {
     labelStyle?: string;
     insideLabelStyle?: string;
     sizes?: Partial<Record<ProgressSize, string>>;
-    colors?: Partial<Record<ProgressColor, string>>;
     indeterminateStyle?: string;
 }
 export interface ProgressProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "children"> {
@@ -48,11 +43,6 @@ export interface ProgressProps extends Omit<React.HTMLAttributes<HTMLDivElement>
      * @default 'md'
      */
     size?: ProgressSize;
-    /**
-     * The semantic color of the progress bar
-     * @default 'primary'
-     */
-    color?: ProgressColor;
     /**
      * Whether to show the percentage label
      * @default false
@@ -75,17 +65,9 @@ export interface ProgressProps extends Omit<React.HTMLAttributes<HTMLDivElement>
      */
     animated?: boolean;
     /**
-     * Additional class name for the track (background) element
-     */
-    trackClassName?: string;
-    /**
-     * Additional class name for the fill (progress) element
-     */
-    fillClassName?: string;
-    /**
-     * Additional class name for the container
+     * Additional class name for the outer container/track wrapper
      */
-    className?: string;
+    wrapperClassName?: string;
     /**
      * Component-level theme overrides
      */

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

@@ -1,2 +1,2 @@
 export { Progress } from "./Progress";
-export type { ProgressProps, ProgressSize, ProgressColor, ProgressLabelPosition, ProgressThemeOverrides, } from "./Progress.types";
+export type { ProgressProps, ProgressSize, ProgressLabelPosition, ProgressThemeOverrides, } from "./Progress.types";

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/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,44 +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;