@flikk/ui 1.0.0-beta.25 → 1.0.0-beta.27

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

@@ -10,24 +10,22 @@ export interface NavItemSubmenuItem {
     active?: boolean;
     /** Whether this sub-item is disabled */
     isDisabled?: boolean;
-    /** Badge text/number on the sub-item */
-    badge?: string | number;
     /** Notification count/dot on the sub-item */
     notification?: number | boolean;
     /** Start content (icon) for the sub-item */
     startContent?: ReactNode;
 }
-export interface NavItemProps extends React.HTMLAttributes<HTMLDivElement> {
+export interface NavItemProps extends React.HTMLAttributes<HTMLElement> {
     /**
      * Content of the navigation item
      */
     children: ReactNode;
     /**
-     * Start content (icon), replaces `icon`
+     * Start content (icon)
      */
     startContent?: ReactNode;
     /**
-     * End content (badge/arrow), replaces `badge`
+     * End content (badge/arrow)
      */
     endContent?: ReactNode;
     /**
@@ -38,16 +36,6 @@ export interface NavItemProps extends React.HTMLAttributes<HTMLDivElement> {
      * Keyboard shortcut (optional)
      */
     shortcut?: string;
-    /**
-     * Legacy icon prop (mapped to startContent)
-     * @deprecated Use startContent instead
-     */
-    icon?: ReactNode;
-    /**
-     * Legacy badge prop (mapped to endContent)
-     * @deprecated Use endContent instead
-     */
-    badge?: string | number;
     /**
      * Notification indicator. Pass a number for a count badge, or true for a dot.
      */
@@ -70,15 +58,6 @@ export interface NavItemProps extends React.HTMLAttributes<HTMLDivElement> {
      * @default false
      */
     isDisabled?: boolean;
-    /**
-     * Alias for isDisabled
-     * @deprecated Use isDisabled
-     */
-    disabled?: boolean;
-    /**
-     * Whether the item represents a danger action
-     */
-    isDanger?: boolean;
     /**
      * Whether the item has a submenu (manual mode).
      * If `items` is provided, this is set automatically.
@@ -128,14 +107,14 @@ export interface NavItemTheme {
         default: string;
         active: string;
         disabled: string;
-        hover: string;
     };
-    iconStates?: {
-        default?: string;
-        active?: string;
-        disabled?: string;
-        hover?: string;
+    iconStates: {
+        default: string;
+        active: string;
+        disabled: string;
     };
+    /** Keyboard focus-visible ring */
+    focusStyle: string;
     levels: {
         0: string;
         1: string;
@@ -145,10 +124,10 @@ export interface NavItemTheme {
         container: string;
         icon: string;
     };
-    activeIndicator?: string;
-    notificationDot?: string;
-    notificationBadge?: string;
-    danger?: string;
+    density: {
+        compact: string;
+    };
+    notificationDot: string;
 }
 export interface NavItemThemeOverrides {
     baseStyle?: string;
@@ -158,14 +137,13 @@ export interface NavItemThemeOverrides {
         default: string;
         active: string;
         disabled: string;
-        hover: string;
     }>;
     iconStates?: Partial<{
         default: string;
         active: string;
         disabled: string;
-        hover: string;
     }>;
+    focusStyle?: string;
     levels?: Partial<{
         0: string;
         1: string;
@@ -175,8 +153,8 @@ export interface NavItemThemeOverrides {
         container: string;
         icon: string;
     }>;
-    activeIndicator?: string;
+    density?: Partial<{
+        compact: string;
+    }>;
     notificationDot?: string;
-    notificationBadge?: string;
-    danger?: string;
 }

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

@@ -13,15 +13,15 @@ const paginationTheme = {
         // Base state - light
         "cursor-pointer bg-white border border-transparent text-[var(--color-text-muted)] " +
         // Base state - dark
-        "dark:bg-[var(--color-neutral-800)] dark:text-[var(--color-neutral-400)] dark:border-transparent " +
+        "dark:bg-transparent dark:text-[var(--color-text-secondary)] dark:border-transparent " +
         // Hover state - light
         "hover:text-[var(--color-text-primary)] hover:bg-[var(--color-background-secondary)] hover:border-[var(--color-border)] " +
         // Hover state - dark
-        "dark:hover:bg-[var(--color-neutral-700)] dark:hover:text-[var(--color-neutral-200)] dark:hover:border-[var(--color-neutral-600)] " +
+        "dark:hover:bg-[var(--color-surface-hover)] dark:hover:text-[var(--color-text-primary)] dark:hover:border-[var(--color-border)]/0 " +
         // Active state - light
         "data-[active=true]:bg-white data-[active=true]:border-[var(--color-border)] data-[active=true]:text-[var(--color-text-primary)] " +
         // Active state - dark (uses primary color accent)
-        "dark:data-[active=true]:bg-[var(--color-primary-900)] dark:data-[active=true]:border-[var(--color-primary-700)] dark:data-[active=true]:text-[var(--color-primary-300)] " +
+        "dark:data-[active=true]:bg-[var(--color-neutral-800)] dark:data-[active=true]:border-none dark:data-[active=true]:text-[var(--color-text-primary)] " +
         // Disabled state
         "data-[disabled=true]:opacity-50 data-[disabled=true]:cursor-not-allowed data-[disabled=true]:pointer-events-none",
     // Unified item sizes

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

@@ -5,7 +5,7 @@ const popoverTheme = {
     // Base styles for the popover
     baseStyle: "z-50 outline-none",
     // Body styles
-    bodyStyle: "bg-[var(--color-surface)] border border-[var(--color-border)] rounded-[var(--popover-radius)] shadow-real-xl p-4 max-w-[min(24rem,calc(100vw-2rem))] dark:bg-[var(--color-background-secondary)] ",
+    bodyStyle: "bg-[var(--color-surface-overlay)] border border-[var(--color-border)] rounded-[var(--popover-radius)] shadow-real-xl p-4 max-w-[min(24rem,calc(100vw-2rem))] dark:bg-[var(--color-surface-overlay)] ",
 };
 
 export { popoverTheme };

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

@@ -48,8 +48,12 @@ export interface PopoverBodyProps extends React.HTMLAttributes<HTMLDivElement> {
     children: ReactNode;
     animation?: boolean;
     portal?: boolean;
-    /** Enable scroll support with viewport-aware max-height. Uses available
-     *  space computed by the positioning hook, falling back to 400px. */
+    /** Cap the body to the viewport-available height (space below/above the
+     *  trigger, computed by the positioning hook; falls back to 400px) and add
+     *  `overflow-y-auto`, so tall content scrolls inside the popover instead of
+     *  extending past the viewport unreachably. `max-height` + `auto` means short
+     *  popovers show no scrollbar. Set `false` to opt out (uncapped, may overflow).
+     *  @default true */
     scrollable?: boolean;
     /** Custom max-height when scrollable is true (e.g. "300px", "20rem").
      *  Overrides the default viewport-aware height. */

package/dist/components/core/Popover/PopoverBody.js

@@ -26,7 +26,7 @@ const overlayContentAnimations = {
 /**
  * PopoverBody component displays the body/content of the popover
  */
-const PopoverBody = React__default.forwardRef(({ children, className, animation = true, portal = true, scrollable = false, maxHeight, ...props }, ref) => {
+const PopoverBody = React__default.forwardRef(({ children, className, animation = true, portal = true, scrollable = true, maxHeight, ...props }, ref) => {
     const { isOpen, onOpenChange, triggerRef, contentRef, placement, offset, triggerType, closeOnClickOutside, closeOnEsc, preventClose, hasBackdrop, theme, contentId, } = usePopoverContext();
     const shouldReduceMotion = useReducedMotion();
     const localRef = useRef(null);
@@ -45,13 +45,20 @@ const PopoverBody = React__default.forwardRef(({ children, className, animation
     });
     // Click outside detection (active when no backdrop — with backdrop, Overlay handles it)
     useClickOutside(localRef, (e) => {
-        var _a;
+        var _a, _b, _c;
         if (hasBackdrop)
             return; // Overlay handles click-outside via backdrop
         if (e.target === triggerRef.current ||
             ((_a = triggerRef.current) === null || _a === void 0 ? void 0 : _a.contains(e.target))) {
             return;
         }
+        // Ignore clicks that land inside any FlikkUI overlay portal (a nested
+        // Select/Tooltip/Dropdown/Popover renders to document.body, outside our
+        // content ref — without this it would count as an outside click and
+        // dismiss the popover). See the `data-flikkui-portal` convention.
+        if ((_c = (_b = e.target) === null || _b === void 0 ? void 0 : _b.closest) === null || _c === void 0 ? void 0 : _c.call(_b, "[data-flikkui-portal]")) {
+            return;
+        }
         if (closeOnClickOutside && !preventClose) {
             onOpenChange(false);
         }
@@ -120,7 +127,7 @@ const PopoverBody = React__default.forwardRef(({ children, className, animation
                 ? { duration: 0 }
                 : popoverTransitions.content, "data-state": isOpen ? "open" : "closed", "data-placement": placement, "data-trigger": triggerType, onClick: (e) => e.stopPropagation(), ...domProps, children: children })) }));
     if (portal && isClient) {
-        return createPortal(jsx("div", { className: isDarkMode ? "dark" : undefined, children: popoverContent }), document.body);
+        return createPortal(jsx("div", { "data-flikkui-portal": "", className: isDarkMode ? "dark" : undefined, children: popoverContent }), document.body);
     }
     return popoverContent;
 });

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

@@ -5,7 +5,7 @@ const progressTheme = {
     // Container styles
     containerStyle: "w-full",
     // Track (background) styles
-    trackStyle: "relative w-full rounded-full bg-[var(--color-background-tertiary)] overflow-hidden",
+    trackStyle: "relative w-full rounded-full bg-[var(--color-surface-sunken)] overflow-hidden",
     // Fill (progress bar) styles — includes default primary color
     fillStyle: "h-full rounded-full bg-[var(--color-primary)]",
     // Label text styles

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

@@ -155,12 +155,12 @@ const ScrollArea = React__default.forwardRef(({ children, type = 'hover', size =
             case 'always':
                 return [
                     '[&::-webkit-scrollbar-thumb]:bg-[var(--color-border)]',
-                    '[&::-webkit-scrollbar-track]:bg-[var(--color-background-secondary)]',
+                    '[&::-webkit-scrollbar-track]:bg-[var(--color-surface-sunken)]',
                 ].join(' ');
             case 'scroll':
                 return [
                     '[&::-webkit-scrollbar-thumb]:bg-transparent',
-                    '[&[data-scrolling]::-webkit-scrollbar-thumb]:bg-black/30',
+                    '[&[data-scrolling]::-webkit-scrollbar-thumb]:bg-[var(--color-border)]',
                     '[&::-webkit-scrollbar-thumb]:transition-colors',
                     '[&::-webkit-scrollbar-thumb]:duration-300',
                 ].join(' ');

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

@@ -5,7 +5,7 @@
 const scrollAreaTheme = {
     baseStyle: 'relative h-full w-full',
     scrollbarStyle: 'flex touch-none select-none transition-colors duration-150',
-    thumbStyle: 'relative flex-1 rounded-full bg-[var(--color-border)]',
+    thumbStyle: 'relative flex-1 rounded-full bg-[var(--color-border)]/60',
 };
 
 export { scrollAreaTheme };

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

@@ -19,13 +19,15 @@ const SegmentedComponent = React__default.forwardRef(({ value, onChange, size =
             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,
-                top: buttonRect.top - containerRect.top,
-                transform: `translateX(${buttonRect.left - containerRect.left}px)`,
+                width: activeButton.offsetWidth,
+                height: activeButton.offsetHeight,
+                top: activeButton.offsetTop,
+                transform: `translateX(${activeButton.offsetLeft}px)`,
             });
         }
     }, [value]);

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-tertiary)]/50 border-0 border-[var(--color-border)]/50 p-1 shadow-inner dark:bg-[var(--color-background-secondary)]",
+    baseStyle: "relative flex rounded-[var(--segmented-radius)] bg-[var(--color-surface)] border border-[var(--color-border)]/60 p-[var(--segmented-padding)] shadow-inner",
     // Size variants using CSS variables
     sizes: {
         sm: "min-h-[var(--segmented-min-h-sm)]",
@@ -15,14 +15,14 @@ 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)-4px)] transition-transform duration-200 ease-out pointer-events-none z-0 bg-white dark:bg-[var(--color-background-tertiary)] shadow-real-md",
+    slidingBackgroundStyle: "absolute top-[0px] left-[0px] rounded-[var(--segmented-inner-radius)] transition-transform duration-200 ease-out pointer-events-none z-0 bg-white dark:bg-[var(--color-surface-raised)] shadow-real-lg",
 };
 /**
  * Default theme for the SegmentedItem component
  */
 const segmentedItemTheme = {
     // Base styles for the segmented item
-    baseStyle: "relative flex min-w-fit flex-1 items-center justify-center transition-all duration-200 rounded-[calc(var(--segmented-radius)-4px)] font-medium cursor-pointer focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-primary-500)] focus-visible:ring-offset-1",
+    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-sm px-[var(--segmented-px-sm)]",

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

@@ -1,14 +1,16 @@
 import React from "react";
 import { SidebarProps } from "./Sidebar.types";
 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>>;
-    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>>;
     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,31 +1,40 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import React__default, { useMemo } from 'react';
+import React__default, { useMemo, useRef, useEffect } from 'react';
 import { cn } from '../../../utils/cn.js';
 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 { SidebarSubmenu } from './SidebarSubmenu.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: "tween",
-    duration: 0.22,
-    ease: [0.4, 0, 0.2, 1],
+    type: "spring",
+    stiffness: 320,
+    damping: 34,
+    mass: 1,
 };
-const SidebarDesktop = 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;
     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) || 64;
+    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,
@@ -38,19 +47,41 @@ const SidebarDesktop = React__default.forwardRef(({ side = "left", variant = "si
         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, ...motionSafeProps, 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 }));
 });
 SidebarDesktop.displayName = "SidebarDesktop";
 const SidebarMobile = ({ children, className, theme: customTheme = {} }) => {
+    var _a, _b, _c, _d;
     const context = useSidebarContext();
-    if (!context)
-        return null;
-    const { isMobileOpen, setMobileOpen } = context;
+    const panelRef = useRef(null);
+    // Hooks must run unconditionally — keep above any early return
     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 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();
@@ -60,21 +91,27 @@ const SidebarContainer = React__default.forwardRef((props, ref) => {
     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 }) }));
+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,
-    Submenu: SidebarSubmenu,
     Toggle: SidebarToggle,
     MobileTrigger: SidebarMobileTrigger,
     UserProfile: SidebarUserProfile,
     Logo: SidebarLogo,
+    Search: SidebarSearch,
+    Card: SidebarCard,
 });
 
 export { Sidebar };

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

@@ -1,18 +1,16 @@
 const sidebarTheme = {
-    baseStyle: 'flex flex-col h-full bg-[var(--color-background)] overflow-hidden',
+    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-[var(--color-border)]',
-        inset: 'rounded-[var(--radius-base)] bg-[var(--color-background-secondary)] border border-[var(--color-border)]',
+        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 border-[var(--color-border)]',
         right: 'border-l border-[var(--color-border)]',
     },
-    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',
+    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 };