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

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 rounded-[var(--segmented-radius)] bg-neutral-100 dark:bg-neutral-900 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,19 @@ 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 dark:bg-neutral-800",
 };
 /**
  * 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 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
     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-sm px-[var(--segmented-px-sm)]",
+        md: "text-sm px-[var(--segmented-px-md)]",
+        lg: "text-sm 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 };

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

@@ -1,6 +1,8 @@
-import { ReactNode } from 'react';
+import { ReactNode, HTMLAttributes } from 'react';
 export type SidebarSide = 'left' | 'right';
 export type SidebarVariant = 'sidebar' | 'floating' | 'inset';
+export type SidebarUserStatus = 'online' | 'offline' | 'away' | 'busy';
+export type SidebarDensity = 'comfortable' | 'compact';
 export interface SidebarContextValue {
     collapsed: boolean;
     setCollapsed: (collapsed: boolean) => void;
@@ -11,6 +13,12 @@ export interface SidebarContextValue {
     };
     side: SidebarSide;
     variant: SidebarVariant;
+    density: SidebarDensity;
+    /** 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> {
     /**
@@ -23,6 +31,11 @@ export interface SidebarProps extends React.HTMLAttributes<HTMLDivElement> {
      * @default "sidebar"
      */
     variant?: SidebarVariant;
+    /**
+     * Navigation density
+     * @default "comfortable"
+     */
+    density?: SidebarDensity;
     /**
      * Whether the sidebar is collapsed by default
      * @default false
@@ -43,10 +56,23 @@ 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
      */
-    children: ReactNode;
+    children?: ReactNode;
     /**
      * Custom theme overrides
      */
@@ -78,6 +104,16 @@ 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;
+    /**
+     * Navigation density. Inherits from Sidebar when omitted.
+     */
+    density?: SidebarDensity;
     children: ReactNode;
 }
 export interface SidebarNavGroupProps extends React.HTMLAttributes<HTMLDivElement> {
@@ -105,6 +141,150 @@ 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;
+    /**
+     * Custom content for the expandable region, replacing the default name/email block.
+     * The avatar and all collapse choreography (reveal animation, tooltip, dropdown
+     * placement) are preserved — only the text area is overridden. Copy-paste friendly.
+     */
+    children?: ReactNode;
+}
+export interface SidebarLogoProps extends HTMLAttributes<HTMLDivElement> {
+    /**
+     * Logo shown when the sidebar is **expanded**. Accepts any node — an `<img>`,
+     * an inline `<svg>`, or composed JSX (e.g. a mark + wordmark). Preferred
+     * over the legacy `icon` + `text` API.
+     */
+    expanded?: ReactNode;
+    /**
+     * Logo shown when the sidebar is **collapsed**. Typically a square mark
+     * (image, SVG, or JSX). If omitted, falls back to `expanded`, then to the
+     * legacy `icon` prop.
+     */
+    collapsed?: ReactNode;
+    /**
+     * Convenience: image URL for the expanded logo. Rendered as an `<img>` with
+     * sensible defaults (`h-8 w-auto object-contain`). Use `expandedImageClassName`
+     * to override sizing / object-fit. Ignored when `expanded` (ReactNode) is set.
+     */
+    expandedSrc?: string;
+    /**
+     * Convenience: image URL for the collapsed logo. Rendered as an `<img>` in a
+     * 36×36 (`size-9`) slot — matching the nav icon track — with `object-cover`
+     * by default. Use `collapsedImageClassName` to switch to `object-contain`,
+     * adjust border-radius, etc. Ignored when `collapsed` (ReactNode) is set.
+     */
+    collapsedSrc?: string;
+    /** ClassName forwarded to the auto-rendered `<img>` for `expandedSrc`. */
+    expandedImageClassName?: string;
+    /** ClassName forwarded to the auto-rendered `<img>` for `collapsedSrc`. */
+    collapsedImageClassName?: string;
+    /** Alt text for any auto-rendered `<img>` (both `expandedSrc` and `collapsedSrc`). */
+    alt?: string;
+    /**
+     * Legacy: always-visible icon/mark. Shown in both states; the `text` prop
+     * fades in alongside it when expanded. Use `expanded` / `collapsed` instead
+     * for full control (especially for image/SVG logos that differ per state).
+     */
+    icon?: ReactNode;
+    /**
+     * Legacy: text rendered to the right of `icon` when expanded — animates
+     * in/out on collapse. Use `expanded` instead for full control.
+     */
+    text?: ReactNode;
+}
+export interface SidebarSearchProps extends Omit<HTMLAttributes<HTMLDivElement>, "onChange" | "defaultValue"> {
+    /** Controlled value */
+    value?: string;
+    /** Uncontrolled initial value */
+    defaultValue?: string;
+    /**
+     * Fires on every keystroke. Consumers wire this to render results wherever
+     * they like (popover, command palette, side panel). The Sidebar tree itself
+     * is NOT filtered.
+     */
+    onChange?: (value: string) => void;
+    /** @default "Search…" */
+    placeholder?: string;
+    /** @default 'sm' */
+    size?: "sm" | "md";
+    /** Override the leading icon (defaults to MagnifyingGlassIcon). */
+    iconStart?: ReactNode;
+    /** Tooltip + aria-label for the collapsed-mode icon button. @default "Search" */
+    collapsedLabel?: string;
+    /** Hide the collapsed-mode icon button entirely. @default false */
+    hideWhenCollapsed?: boolean;
+    /** Forwarded to the underlying Input's group wrapper — use for background
+     * overrides on custom sidebar surfaces (e.g. `bg-transparent`). */
+    inputGroupClassName?: string;
+}
+export interface SidebarCardTheme {
+    /** Outer wrapper applied in both styled and unstyled modes — must carry
+     * `overflow-hidden` so the height collapse animation clips children. */
+    wrapperStyle: string;
+    /** Default container chrome (rounded / surface bg / border / padding).
+     * Skipped when the consumer sets `unstyled`. */
+    baseStyle: string;
+}
+export interface SidebarCardThemeOverrides {
+    wrapperStyle?: string;
+    baseStyle?: string;
+}
+export interface SidebarCardProps extends HTMLAttributes<HTMLDivElement> {
+    children: ReactNode;
+    className?: string;
+    /**
+     * Drop the default container styling (rounded / bg / border / padding)
+     * so consumers can put an edge-to-edge image, a custom panel, or any
+     * non-card-shaped content inside without fighting the default chrome.
+     * The disappear-on-collapse animation is unchanged.
+     * @default false
+     */
+    unstyled?: boolean;
+    theme?: SidebarCardThemeOverrides;
+}
+export interface SidebarProviderProps {
+    children: React.ReactNode;
+    defaultCollapsed?: boolean;
+    collapsed?: boolean;
+    onCollapsedChange?: (collapsed: boolean) => void;
+    mobileBreakpoint?: number;
+    mobileOpen?: boolean;
+    onMobileOpenChange?: (open: boolean) => void;
+    width?: {
+        expanded?: number;
+        collapsed?: number;
+    };
+    side?: SidebarSide;
+    variant?: SidebarVariant;
+    density?: SidebarDensity;
+}
 export interface SidebarTheme {
     baseStyle: string;
     variants: {
@@ -113,8 +293,8 @@ export interface SidebarTheme {
     sides: {
         [K in SidebarSide]: string;
     };
-    collapsed: string;
-    expanded: string;
+    mobileOverlay: string;
+    mobileBackdrop: string;
 }
 export interface SidebarThemeOverrides {
     baseStyle?: string;
@@ -124,6 +304,6 @@ export interface SidebarThemeOverrides {
     sides?: Partial<{
         [K in SidebarSide]: string;
     }>;
-    collapsed?: string;
-    expanded?: string;
+    mobileOverlay?: string;
+    mobileBackdrop?: string;
 }

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

@@ -0,0 +1,25 @@
+import React from "react";
+import { SidebarCardProps } from "./Sidebar.types";
+/**
+ * A collapse-aware container for arbitrary sidebar content — promo CTAs,
+ * storage meters, tip-of-the-day, banner images, anything. Renders its
+ * children when the sidebar is expanded and **disappears entirely** when
+ * the sidebar collapses (smooth height + opacity exit via AnimatePresence).
+ *
+ * Composition is open: drop in raw text, an `<img>`, a `<Button>`,
+ * `<Progress>`, or any custom JSX. There are intentionally no sub-parts
+ * (`Sidebar.Card.Header`/`.Body`/…) because the whole card vanishes
+ * together — granular slots add ceremony with no payoff.
+ *
+ * @example
+ * <Sidebar.Card>
+ *   <p className="text-sm">Upgrade for unlimited projects.</p>
+ *   <Button size="sm" className="mt-2 w-full">Upgrade</Button>
+ * </Sidebar.Card>
+ *
+ * @example Edge-to-edge image (no default container chrome):
+ * <Sidebar.Card unstyled>
+ *   <img src="/promo.jpg" alt="" className="w-full rounded-[var(--card-radius)]" />
+ * </Sidebar.Card>
+ */
+export declare const SidebarCard: React.ForwardRefExoticComponent<SidebarCardProps & React.RefAttributes<HTMLDivElement>>;