@flikk/ui 1.0.0-beta.3 → 1.0.0-beta.31

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

@@ -1,3 +1,4 @@
+"use client";
 import { SnapPointDetector } from './SnapPointDetector.js';
 import { PerformanceMonitor } from '../../../../utils/performanceMonitor.js';
 import { normalizeWheelDelta, getMaxScroll, lerp, clampScroll, calculateVelocity, calculateScrollProgress, detectScrollDirection } from '../../../../utils/smoothScrollUtils.js';
@@ -36,6 +37,10 @@ class SmoothScrollEngine {
         this.previousPosition = 0;
         this.idleFrames = 0;
         // Programmatic scroll animation
+        // NOTE: this flag — NOT animationOnComplete — gates whether a programmatic
+        // animation is active. onComplete is optional, so keying off it meant
+        // scrollTo(pos) with no callback never animated (the Scroll-to-Top/Bottom bug).
+        this.isAnimating = false;
         this.animationStartTime = 0;
         this.animationDuration = 0;
         this.animationStartPosition = 0;
@@ -66,6 +71,7 @@ class SmoothScrollEngine {
                 this.state.targetSnapPoint = null;
             }
             // Cancel programmatic animation
+            this.isAnimating = false;
             this.animationOnComplete = null;
             this.wake();
         };
@@ -102,11 +108,13 @@ class SmoothScrollEngine {
             this.state.target += adjustedDelta;
             this.touchStartY = touchY;
             this.touchStartX = touchX;
-            // Cancel snap animation
+            // Cancel snap + programmatic animation on user input
             if (this.state.isSnapping) {
                 this.state.isSnapping = false;
                 this.state.targetSnapPoint = null;
             }
+            this.isAnimating = false;
+            this.animationOnComplete = null;
             this.wake();
         };
         /**
@@ -120,7 +128,7 @@ class SmoothScrollEngine {
             // Record frame for performance monitoring
             this.performanceMonitor.recordFrame(time);
             // Handle programmatic animation
-            if (this.animationOnComplete) {
+            if (this.isAnimating) {
                 this.animateProgrammaticScroll(time);
             }
             // Handle snap animation
@@ -140,7 +148,7 @@ class SmoothScrollEngine {
             const isSettled = Math.abs(this.state.current - this.state.target) < 0.5 &&
                 Math.abs(this.state.velocity.current) < 0.1 &&
                 !this.state.isSnapping &&
-                !this.animationOnComplete;
+                !this.isAnimating;
             if (isSettled) {
                 this.idleFrames++;
                 if (this.idleFrames >= SmoothScrollEngine.IDLE_THRESHOLD) {
@@ -267,6 +275,7 @@ class SmoothScrollEngine {
         this.state.target = this.state.current;
         if (progress >= 1) {
             // Animation complete
+            this.isAnimating = false;
             const callback = this.animationOnComplete;
             this.animationOnComplete = null;
             if (callback)
@@ -416,6 +425,7 @@ class SmoothScrollEngine {
         this.state.isSnapping = false;
         this.state.targetSnapPoint = null;
         // Setup animation
+        this.isAnimating = true;
         this.animationStartTime = performance.now();
         this.animationDuration = duration;
         this.animationStartPosition = this.state.current;
@@ -447,6 +457,30 @@ class SmoothScrollEngine {
         }
         this.scrollTo(position, options);
     }
+    /**
+     * Set scroll position immediately without animation, updating internal state
+     */
+    setPosition(position) {
+        const max = getMaxScroll(this.element, this.orientation);
+        const clamped = clampScroll(position, 0, max);
+        this.state.current = clamped;
+        this.state.target = clamped;
+        this.previousPosition = clamped;
+        this.state.velocity.current = 0;
+        this.state.velocity.previous = 0;
+        // Sync to DOM
+        if (this.orientation === 'horizontal') {
+            this.element.scrollLeft = clamped;
+        }
+        else {
+            this.element.scrollTop = clamped;
+        }
+        // Stop any ongoing programmatic scroll or snapping
+        this.state.isSnapping = false;
+        this.state.targetSnapPoint = null;
+        this.isAnimating = false;
+        this.animationOnComplete = null;
+    }
     /**
      * Get current velocity
      */

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

@@ -1,3 +1,4 @@
+"use client";
 /**
  * Detects and manages CSS scroll snap points
  * Reads snap-align values from DOM and calculates scroll positions

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

@@ -1,3 +1,4 @@
+"use client";
 import { useRef, useEffect, useMemo } from 'react';
 import { SmoothScrollEngine } from './SmoothScrollEngine.js';
 import { isReducedMotion } from '../../../../utils/smoothScrollUtils.js';
@@ -106,6 +107,10 @@ function useSmoothScroll(elementRef, config = {}, orientation = 'vertical') {
                 var _a;
                 (_a = engineRef.current) === null || _a === void 0 ? void 0 : _a.updateConfig(newConfig);
             },
+            setPosition: (position) => {
+                var _a;
+                (_a = engineRef.current) === null || _a === void 0 ? void 0 : _a.setPosition(position);
+            },
             refreshSnapPoints: () => {
                 var _a;
                 (_a = engineRef.current) === null || _a === void 0 ? void 0 : _a.refreshSnapPoints();

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

@@ -39,6 +39,11 @@ export interface SmoothScrollAPI {
      * @param config - Partial configuration to update
      */
     update: (config: SmoothScrollConfigUpdate) => void;
+    /**
+     * Set scroll position immediately without animation, updating internal state
+     * @param position - Target scroll position in pixels
+     */
+    setPosition: (position: number) => void;
     /**
      * Refresh snap points (call when DOM changes)
      */

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

@@ -1,60 +1,62 @@
+"use client";
 import { jsx, jsxs } from 'react/jsx-runtime';
-import React__default, { useRef, useState, useEffect, useMemo } from 'react';
+import React__default, { useRef, useState, useCallback, useEffect, useMemo } from 'react';
 import { cn } from '../../../utils/cn.js';
 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
  * Uses compound component pattern with Segmented.Item
  */
-const SegmentedComponent = React__default.forwardRef(({ value, onChange, size = "md", disabled = false, block = false, children, className, slidingBackgroundClassName, theme, ...props }, ref) => {
+const SegmentedComponent = React__default.forwardRef(({ value, onChange, size = "md", disabled = false, block = false, children, className, slidingBackgroundClassName, theme, "aria-label": ariaLabel, ...props }, ref) => {
     var _a;
     const containerRef = useRef(null);
     const [activeStyle, setActiveStyle] = useState({});
-    const updateActiveStyle = () => {
+    const updateActiveStyle = useCallback(() => {
         if (!containerRef.current || !value)
             return;
         const activeButton = containerRef.current.querySelector(`[data-value="${value}"]`);
         if (activeButton) {
-            const containerRect = containerRef.current.getBoundingClientRect();
-            const buttonRect = activeButton.getBoundingClientRect();
+            // Use offsetTop/offsetLeft (measured from the offsetParent's padding
+            // edge) so the sliding background aligns correctly when the container
+            // has a border. getBoundingClientRect() returns border-box coords,
+            // which would offset the bg by the container's border width.
             setActiveStyle({
-                width: buttonRect.width,
-                height: buttonRect.height,
-                transform: `translateX(${buttonRect.left - containerRect.left - 2}px)`,
+                width: activeButton.offsetWidth,
+                height: activeButton.offsetHeight,
+                top: activeButton.offsetTop,
+                transform: `translateX(${activeButton.offsetLeft}px)`,
             });
         }
-    };
+    }, [value]);
     useEffect(() => {
         updateActiveStyle();
-    }, [value]);
+    }, [value, updateActiveStyle]);
     // 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 = {
+    const contextValue = useMemo(() => ({
         selectedValue: value,
         onChange,
         size,
         disabled,
-    };
+    }), [value, onChange, size, disabled]);
     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: "radiogroup", "aria-label": ariaLabel, 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)] bg-[var(--color-background)] border border-[var(--color-border)] p-0",
+    baseStyle: "relative flex w-fit rounded-[var(--segmented-radius)] bg-[var(--color-surface-sunken)] border border-[var(--color-border)] p-[var(--segmented-padding)] shadow-inner-real-md",
     // Size variants using CSS variables
     sizes: {
         sm: "min-h-[var(--segmented-min-h-sm)]",
@@ -15,19 +15,22 @@ const segmentedTheme = {
     // Disabled style
     disabledStyle: "opacity-50 cursor-not-allowed pointer-events-none",
     // Sliding background style with CSS variables
-    slidingBackgroundStyle: "absolute top-[0px] left-[0px] rounded-[calc(var(--segmented-radius)-0.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-[var(--segmented-inner-radius)] transition-transform duration-200 ease-out pointer-events-none z-0 bg-[var(--color-surface)] 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",
-    // Size variants using CSS variables
+    baseStyle: "relative flex min-w-fit flex-1 items-center justify-center whitespace-nowrap transition-all duration-200 rounded-[var(--segmented-inner-radius)] 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. Type reads --segmented-text-size-*
+    // (which aliases the shared --form-text-size-* ramp) so lg steps up with its
+    // box — it was pinned at text-sm across all three sizes while Button/Input,
+    // whose height tokens Segmented literally aliases, both stepped up at lg.
     sizes: {
-        sm: "text-[length:var(--segmented-text-size-md)] 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-[length:var(--segmented-text-size-sm)]/[var(--segmented-line-height-sm)] px-[var(--segmented-px-sm)]",
+        md: "text-[length:var(--segmented-text-size-md)]/[var(--segmented-line-height-md)] px-[var(--segmented-px-md)]",
+        lg: "text-[length:var(--segmented-text-size-lg)]/[var(--segmented-line-height-lg)] px-[var(--segmented-px-lg)]",
     },
     // Selected state
     selectedStyle: "text-[var(--color-text-primary)] z-10",

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

@@ -1,3 +1,4 @@
+"use client";
 import { jsx } from 'react/jsx-runtime';
 import React__default, { useContext } from 'react';
 import { cn } from '../../../utils/cn.js';
@@ -18,12 +19,38 @@ const SegmentedItem = React__default.forwardRef(({ value, disabled = false, chil
         onChange === null || onChange === void 0 ? void 0 : onChange(value);
         onClick === null || onClick === void 0 ? void 0 : onClick(event);
     };
-    return (jsx("button", { ref: ref, type: "button", role: "tab", "aria-selected": isSelected, disabled: isDisabled, className: cn(segmentedItemTheme.baseStyle, segmentedItemTheme.sizes[size], isSelected
+    const handleKeyDown = (event) => {
+        if (isDisabled)
+            return;
+        const radioGroup = event.currentTarget.parentElement;
+        if (!radioGroup)
+            return;
+        const radios = Array.from(radioGroup.querySelectorAll('[role="radio"]:not([disabled])'));
+        const currentIndex = radios.indexOf(event.currentTarget);
+        let targetRadio;
+        if (event.key === 'ArrowRight' || event.key === 'ArrowDown') {
+            event.preventDefault();
+            targetRadio = radios[(currentIndex + 1) % radios.length];
+        }
+        else if (event.key === 'ArrowLeft' || event.key === 'ArrowUp') {
+            event.preventDefault();
+            targetRadio = radios[(currentIndex - 1 + radios.length) % radios.length];
+        }
+        if (targetRadio) {
+            targetRadio.focus();
+            // Read the value from the data attribute and trigger selection
+            const targetValue = targetRadio.getAttribute('data-value');
+            if (targetValue) {
+                onChange === null || onChange === void 0 ? void 0 : onChange(targetValue);
+            }
+        }
+    };
+    return (jsx("button", { ref: ref, type: "button", role: "radio", "aria-checked": isSelected, tabIndex: isSelected ? 0 : -1, disabled: isDisabled, className: cn(segmentedItemTheme.baseStyle, segmentedItemTheme.sizes[size], isSelected
             ? segmentedItemTheme.selectedStyle
             : segmentedItemTheme.unselectedStyle, isDisabled && segmentedItemTheme.disabledStyle, className // User overrides take precedence
-        ), onClick: handleClick, "data-value": value, "data-selected": isSelected, "data-disabled": isDisabled, ...props, children: children }));
+        ), onClick: handleClick, onKeyDown: handleKeyDown, "data-value": value, "data-selected": isSelected, "data-state": isSelected ? "active" : "inactive", "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/Separator/Separator.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsx } from 'react/jsx-runtime';
 import React__default, { useMemo } from 'react';
 import { cn } from '../../../utils/cn.js';

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

@@ -1,3 +1,16 @@
 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>> & {
+    Provider: React.FC<import("./Sidebar.types").SidebarProviderProps>;
+    Header: React.ForwardRefExoticComponent<import("./Sidebar.types").SidebarHeaderProps & React.RefAttributes<HTMLDivElement>>;
+    Content: React.ForwardRefExoticComponent<import("./Sidebar.types").SidebarContentProps & React.RefAttributes<HTMLDivElement>>;
+    Footer: React.ForwardRefExoticComponent<import("./Sidebar.types").SidebarFooterProps & React.RefAttributes<HTMLDivElement>>;
+    Nav: React.ForwardRefExoticComponent<import("./Sidebar.types").SidebarNavProps & React.RefAttributes<HTMLDivElement>>;
+    NavGroup: React.ForwardRefExoticComponent<import("./Sidebar.types").SidebarNavGroupProps & React.RefAttributes<HTMLDivElement>>;
+    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>>;
+    Logo: React.ForwardRefExoticComponent<import("./Sidebar.types").SidebarLogoProps & React.RefAttributes<HTMLDivElement>>;
+    Search: React.ForwardRefExoticComponent<import("./Sidebar.types").SidebarSearchProps & React.RefAttributes<HTMLInputElement>>;
+    Card: React.ForwardRefExoticComponent<import("./Sidebar.types").SidebarCardProps & React.RefAttributes<HTMLDivElement>>;
+};

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

@@ -1,44 +1,118 @@
-import { jsx } from 'react/jsx-runtime';
-import React__default, { useMemo } from 'react';
+"use client";
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import React__default, { useMemo, useRef, useEffect } 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 { useFocusTrap } from '../../../hooks/useFocusTrap.js';
 import { useSidebarContext, SidebarProvider } from './SidebarContext.js';
+import { SidebarHeader } from './SidebarHeader.js';
+import { SidebarContent } from './SidebarContent.js';
+import { SidebarFooter } from './SidebarFooter.js';
+import { SidebarNav } from './SidebarNav.js';
+import { SidebarNavGroup } from './SidebarNavGroup.js';
+import { SidebarToggle } from './SidebarToggle.js';
+import { SidebarMobileTrigger } from './SidebarMobileTrigger.js';
+import { SidebarUserProfile } from './SidebarUserProfile.js';
+import { SidebarLogo } from './SidebarLogo.js';
+import { SidebarSearch } from './SidebarSearch.js';
+import { SidebarCard } from './SidebarCard.js';
 
+// Subtle spring on the sidebar's width animation. Stiffness/damping picked so
+// the effective duration sits in the same ~200ms window as the internal CSS
+// transitions on padding/gap (Tailwind `duration-200`), but with a soft
+// organic settle instead of a linear cubic-bezier. Damping ratio ≈ 0.9 — a
+// hair under critical so there's a barely-perceptible easing-into-final
+// rather than an overshoot/bounce.
 const SIDEBAR_TRANSITION = {
     type: "spring",
-    stiffness: 300,
-    damping: 30,
+    stiffness: 320,
+    damping: 34,
+    mass: 1,
 };
-const SidebarContainer = React__default.forwardRef(({ side = "left", variant = "sidebar", width, children, className, theme: customTheme = {}, ...props }, ref) => {
-    var _a, _b, _c;
+const SidebarDesktop = React__default.forwardRef(({ side = "left", variant = "sidebar", density, width, children, className, theme: customTheme = {}, ...props }, ref) => {
+    var _a, _b, _c, _d;
     const context = useSidebarContext();
     const collapsed = (_a = context === null || context === void 0 ? void 0 : context.collapsed) !== null && _a !== void 0 ? _a : false;
-    // 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) || 60;
     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.aside, { ref: ref, className: sidebarClasses, "aria-label": "Sidebar", "data-side": side, "data-variant": variant, "data-density": (_d = density !== null && density !== void 0 ? density : context === null || context === void 0 ? void 0 : context.density) !== null && _d !== void 0 ? _d : "comfortable", "data-collapsed": collapsed, initial: false, animate: animateValue, transition: SIDEBAR_TRANSITION, ...motionSafeProps, children: children }));
 });
-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 = {} }) => {
+    var _a, _b, _c, _d;
+    const context = useSidebarContext();
+    const panelRef = useRef(null);
+    // Hooks must run unconditionally — keep above any early return
+    const theme = useMemo(() => ({
+        ...sidebarTheme,
+        ...customTheme,
+    }), [customTheme]);
+    const isMobileOpen = (_a = context === null || context === void 0 ? void 0 : context.isMobileOpen) !== null && _a !== void 0 ? _a : false;
+    const side = (_b = context === null || context === void 0 ? void 0 : context.side) !== null && _b !== void 0 ? _b : "left";
+    const panelWidth = (_d = (_c = context === null || context === void 0 ? void 0 : context.width) === null || _c === void 0 ? void 0 : _c.expanded) !== null && _d !== void 0 ? _d : 280;
+    // Trap focus inside the open drawer; focus returns to trigger on close.
+    useFocusTrap(panelRef, isMobileOpen);
+    // Close on Escape while the drawer is open.
+    useEffect(() => {
+        if (!isMobileOpen)
+            return;
+        const onKeyDown = (e) => {
+            if (e.key === "Escape")
+                context === null || context === void 0 ? void 0 : context.setMobileOpen(false);
+        };
+        document.addEventListener("keydown", onKeyDown);
+        return () => document.removeEventListener("keydown", onKeyDown);
+    }, [isMobileOpen, context]);
+    if (!context)
+        return null;
+    const { setMobileOpen } = context;
+    const offscreen = side === "left" ? "-100%" : "100%";
+    return (jsx(AnimatePresence, { children: isMobileOpen && (jsxs(Fragment, { children: [jsx(motion.div, { className: cn(theme.mobileBackdrop), initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, transition: { duration: 0.2 }, onClick: () => setMobileOpen(false), "aria-hidden": "true" }), jsx(motion.div, { ref: panelRef, className: cn(theme.mobileOverlay, side === "left"
+                        ? "left-0 rounded-r-xl border-r"
+                        : "right-0 rounded-l-xl border-l rounded-r-none border-r-0", className), style: { width: panelWidth }, initial: { x: offscreen }, animate: { x: 0 }, exit: { x: offscreen }, transition: { type: "spring", stiffness: 400, damping: 38 }, role: "dialog", "aria-modal": "true", "aria-label": "Navigation menu", children: children })] })) }));
+};
+const SidebarContainer = React__default.forwardRef((props, ref) => {
+    const context = useSidebarContext();
+    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, density = "comfortable", mobileBreakpoint, mobileOpen, onMobileOpenChange, width, children, className, theme: customTheme = {}, ...props }, ref) => {
+    const existingContext = useSidebarContext();
+    if (existingContext) {
+        return (jsx(SidebarContainer, { ref: ref, className: className, theme: customTheme, side: side, variant: variant, density: density, width: width, ...props, children: children }));
+    }
+    return (jsx(SidebarProvider, { defaultCollapsed: defaultCollapsed, collapsed: controlledCollapsed, onCollapsedChange: onCollapsedChange, density: density, mobileBreakpoint: mobileBreakpoint, mobileOpen: mobileOpen, onMobileOpenChange: onMobileOpenChange, width: width, side: side, variant: variant, children: jsx(SidebarContainer, { ref: ref, className: className, theme: customTheme, side: side, variant: variant, density: density, width: width, ...props, children: children }) }));
+});
+SidebarRoot.displayName = "Sidebar";
+const Sidebar = Object.assign(SidebarRoot, {
+    Provider: SidebarProvider,
+    Header: SidebarHeader,
+    Content: SidebarContent,
+    Footer: SidebarFooter,
+    Nav: SidebarNav,
+    NavGroup: SidebarNavGroup,
+    Toggle: SidebarToggle,
+    MobileTrigger: SidebarMobileTrigger,
+    UserProfile: SidebarUserProfile,
+    Logo: SidebarLogo,
+    Search: SidebarSearch,
+    Card: SidebarCard,
 });
-Sidebar.displayName = "Sidebar";
 
 export { Sidebar };

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

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