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

package/dist/components/ai/PromptInput/PromptInput.js

@@ -512,7 +512,7 @@ className, textareaClassName, footerClassName, theme = {},
         return (jsx(Button, { iconOnly: true, className: cn(mergedTheme.submitButtonStyle, extraClassName), size: buttonSize, variant: buttonVariant, color: buttonColor, onClick: handleSubmit, disabled: !canSubmit, state: isLoading ? "loading" : "default", "aria-label": submitButtonLabel, title: submitShortcut ? `Submit (${submitShortcut})` : undefined, showReflection: buttonVariant === "filled" ? false : undefined, children: jsx(AnimatePresence, { mode: "wait", initial: false, children: jsx(motion.span, { variants: iconSwapVariants, initial: "initial", animate: "animate", exit: "exit", className: "flex items-center justify-center", children: submitButtonIcon }, "submit") }) }));
     };
     // ========== Render ==========
-    return (jsxs("div", { className: cn("min-w-xl mx-auto", className), ...props, children: [jsx("input", { ref: fileInputRef, type: "file", accept: acceptedFileTypes.join(","), multiple: true, onChange: (e) => {
+    return (jsxs("div", { className: cn("w-full mx-auto", className), ...props, children: [jsx("input", { ref: fileInputRef, type: "file", accept: acceptedFileTypes.join(","), multiple: true, onChange: (e) => {
                     if (e.target.files)
                         processFiles(e.target.files);
                     e.target.value = "";

package/dist/components/ai/PromptInput/VoiceRecorder.js

@@ -170,7 +170,7 @@ const VoiceRecorder = ({ onComplete, onCancel, maxDuration, className, }) => {
             setRecordingState("recording");
         }
     }, [recordingState, clearTimer, startTimer]);
-    return (jsxs("div", { className: cn("flex items-center justify-between w-full", className), children: [jsx(Button, { variant: "ghost", color: "neutral", size: "sm", className: "rounded-full", onClick: handleCancel, "aria-label": "Cancel recording", children: "Cancel" }), jsxs("div", { className: "flex items-center gap-2.5", children: [jsx(motion.div, { className: "size-2.5 rounded-full bg-[var(--color-danger)]", animate: recordingState === "recording"
+    return (jsxs("div", { className: cn("flex items-center justify-between w-full", className), children: [jsx(Button, { variant: "soft", color: "neutral", size: "sm", className: "rounded-full", onClick: handleCancel, "aria-label": "Cancel recording", children: "Cancel" }), jsxs("div", { className: "flex items-center gap-2.5", children: [jsx(motion.div, { className: "size-2.5 rounded-full bg-[var(--color-danger)]", animate: recordingState === "recording"
                             ? { opacity: [1, 0.3, 1] }
                             : { opacity: 0.5 }, transition: recordingState === "recording"
                             ? { duration: 1.2, repeat: Infinity, ease: "easeInOut" }

package/dist/components/ai/PromptSuggestions/PromptSuggestion.theme.js

@@ -1,5 +1,5 @@
 const promptSuggestionTheme = {
-    baseStyle: "inline-flex items-center gap-2 py-2 px-3.5 rounded-full " +
+    baseStyle: "inline-flex items-center gap-2 py-1 px-3 rounded-full " +
         "bg-white dark:bg-[var(--color-background)] " +
         "border border-[var(--color-border)] " +
         "text-base font-medium text-[var(--color-text-primary)] " +

package/dist/components/charts/FunnelChart/FunnelChart.js

@@ -430,7 +430,7 @@ const FunnelChart = ({ data, height = 400, width = 600, showPercentages = true,
                                 animate: "visible",
                                 custom: index,
                             }
-                            : {}), children: jsxs(Badge, { color: isGoodConversion ? "success" : "warning", variant: "ghost", size: "sm", pill: true, children: ["\u2193 ", stage.conversionRate.toFixed(1), "%"] }) }, `conversion-${stage.name}`));
+                            : {}), children: jsxs(Badge, { color: isGoodConversion ? "success" : "warning", variant: "soft", size: "sm", pill: true, children: ["\u2193 ", stage.conversionRate.toFixed(1), "%"] }) }, `conversion-${stage.name}`));
                 }), orientation === "vertical" &&
                 showConversionRate &&
                 stages.map((stage, index) => {
@@ -448,7 +448,7 @@ const FunnelChart = ({ data, height = 400, width = 600, showPercentages = true,
                                 animate: "visible",
                                 custom: index,
                             }
-                            : {}), children: jsxs(Badge, { color: isGoodConversion ? "success" : "warning", variant: "ghost", size: "sm", pill: true, children: [stage.conversionRate.toFixed(0), "%"] }) }, `conversion-${stage.name}`));
+                            : {}), children: jsxs(Badge, { color: isGoodConversion ? "success" : "warning", variant: "soft", size: "sm", pill: true, children: [stage.conversionRate.toFixed(0), "%"] }) }, `conversion-${stage.name}`));
                 }), showSummary && summaryPosition !== "none" && stages.length > 1 && (jsxs(motion.div, { className: cn("absolute bg-[var(--color-background)] rounded-lg shadow-sm border border-[var(--color-border)] px-3 py-2 pointer-events-none", getSummaryPositionClasses(summaryPosition)), ...(animate
                     ? {
                         variants: summaryVariants,

package/dist/components/core/Badge/Badge.js

@@ -90,9 +90,9 @@ const Badge = React__default.memo(React__default.forwardRef(({ children, variant
                 ...(_c = badgeTheme.variantColors) === null || _c === void 0 ? void 0 : _c.outline,
                 ...(_d = customTheme.variantColors) === null || _d === void 0 ? void 0 : _d.outline,
             },
-            ghost: {
-                ...(_e = badgeTheme.variantColors) === null || _e === void 0 ? void 0 : _e.ghost,
-                ...(_f = customTheme.variantColors) === null || _f === void 0 ? void 0 : _f.ghost,
+            soft: {
+                ...(_e = badgeTheme.variantColors) === null || _e === void 0 ? void 0 : _e.soft,
+                ...(_f = customTheme.variantColors) === null || _f === void 0 ? void 0 : _f.soft,
             },
         },
         sizes: {

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

@@ -11,7 +11,7 @@ const badgeTheme = {
     variants: {
         filled: "",
         outline: "bg-transparent border",
-        ghost: "ring-transparent border-0",
+        soft: "ring-transparent border-0",
     },
     // Color styles organized PER VARIANT
     // This structure enables reliable dark: variants and className overrides
@@ -45,8 +45,8 @@ const badgeTheme = {
             danger: "text-[var(--color-danger)] border-[var(--color-border)] " +
                 "dark:text-[var(--color-danger-400)]",
         },
-        // Ghost variant - subtle background tints
-        ghost: {
+        // Soft variant - subtle background tints
+        soft: {
             neutral: "bg-[var(--color-neutral-200)] text-[var(--color-text-primary)] " +
                 "dark:bg-[var(--color-neutral-900)]  ",
             primary: "bg-[var(--color-primary-100)] text-[var(--color-primary-700)] " +
@@ -63,8 +63,8 @@ const badgeTheme = {
     },
     // Flat size structure (no nested objects)
     sizes: {
-        xs: "text-xs px-1 py-0 gap-1 font-medium",
-        sm: "text-sm px-1.5 py-0 gap-1 font-medium",
+        xs: "text-xs px-1 py-0 gap-1 font-semibold",
+        sm: "text-sm px-1.5 py-0 gap-1 font-semibold",
         md: "text-sm px-2 py-0.25 gap-1 font-semibold",
     },
     // Border radius per size (using CSS variable)

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

@@ -1,6 +1,6 @@
 import React, { ReactNode, MouseEvent } from "react";
 import { SemanticColor } from "../../../utils/colorUtils";
-export type BadgeVariant = "filled" | "outline" | "ghost";
+export type BadgeVariant = "filled" | "outline" | "soft";
 export type BadgeColor = SemanticColor;
 export type BadgeSize = "xs" | "sm" | "md";
 /**

package/dist/components/core/Button/Button.ripple.js

@@ -120,7 +120,7 @@ function getRippleColorClass(variant, color) {
     if (variant === "filled") {
         return "bg-white/30";
     }
-    // For outline/ghost buttons, use color-matched ripple
+    // For outline/soft buttons, use color-matched ripple
     switch (color) {
         case "primary":
             return "bg-[var(--color-primary)]/20";

package/dist/components/core/Button/Button.theme.d.ts

@@ -9,7 +9,7 @@ export interface ButtonTheme {
     variantColors: {
         filled: Record<ButtonColor, string>;
         outline: Record<ButtonColor, string>;
-        ghost: Record<ButtonColor, string>;
+        soft: Record<ButtonColor, string>;
         link: Record<ButtonColor, string>;
     };
     sizes: Record<ButtonSize, {

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

@@ -8,7 +8,7 @@ const buttonTheme = {
     variantStyles: {
         filled: "border hover:brightness-[0.9] dark:hover:brightness-[1.15]",
         outline: "bg-transparent border",
-        ghost: "border-transparent",
+        soft: "border-transparent",
         link: "bg-transparent border-transparent",
     },
     // Color styles organized BY VARIANT for reliable dark: prefixes
@@ -66,8 +66,8 @@ const buttonTheme = {
                 "dark:text-[var(--color-danger-300)] dark:border-[var(--color-danger-400)] " +
                 "dark:hover:bg-[var(--color-danger-900)]/30",
         },
-        // Ghost variant - subtle background tints
-        ghost: {
+        // Soft variant - subtle background tints
+        soft: {
             neutral: "text-[var(--color-text-primary)] bg-[var(--color-neutral-100)] " +
                 "hover:bg-[var(--color-neutral-200)] " +
                 "focus-visible:outline-[var(--color-text-secondary)] " +

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

@@ -51,6 +51,6 @@ export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElemen
     darkMode?: boolean;
 }
 export type ButtonColor = SemanticColor;
-export type ButtonVariant = "filled" | "outline" | "ghost" | "link";
+export type ButtonVariant = "filled" | "outline" | "soft" | "link";
 export type ButtonSize = "sm" | "md" | "lg";
 export type ButtonState = "default" | "disabled" | "error" | "loading";

package/dist/components/core/Calendar/CalendarMini/CalendarMini.js

@@ -195,7 +195,7 @@ const CalendarMini = React__default.forwardRef(({ selectedDate, currentMonth, on
     };
     const MonthRow = enableAnimations ? motion.div : "div";
     const DateItem = enableAnimations ? motion.button : "button";
-    return (jsxs("div", { ref: ref, className: cn(mergedTheme.baseStyle, className), role: "region", "aria-label": "Mini calendar", ...rest, children: [jsx(Button, { iconOnly: true, color: "neutral", variant: "ghost", className: "!flex-shrink !flex-grow-0 !w-fit self-stretch !h-auto !min-h-0 px-0.5", onClick: handlePrevMonth, "aria-label": "Previous month", children: jsx(ChevronLeftIcon, { className: "size-5 text-[var(--color-text-primary)]" }) }), jsxs("div", { className: "flex flex-col gap-1 relative", children: [jsxs("div", { className: "flex items-center gap-1", children: [jsx("div", { className: "flex flex-col relative overflow-hidden flex-1", style: {
+    return (jsxs("div", { ref: ref, className: cn(mergedTheme.baseStyle, className), role: "region", "aria-label": "Mini calendar", ...rest, children: [jsx(Button, { iconOnly: true, color: "neutral", variant: "soft", className: "!flex-shrink !flex-grow-0 !w-fit self-stretch !h-auto !min-h-0 px-0.5", onClick: handlePrevMonth, "aria-label": "Previous month", children: jsx(ChevronLeftIcon, { className: "size-5 text-[var(--color-text-primary)]" }) }), jsxs("div", { className: "flex flex-col gap-1 relative", children: [jsxs("div", { className: "flex items-center gap-1", children: [jsx("div", { className: "flex flex-col relative overflow-hidden flex-1", style: {
                                     maskImage: "linear-gradient(to right, transparent, black 16px, black calc(100% - 16px), transparent)",
                                     WebkitMaskImage: "linear-gradient(to right, transparent, black 16px, black calc(100% - 16px), transparent)",
                                 }, children: jsx("div", { ref: monthScrollRef, className: cn(mergedTheme.monthRowStyle), role: "tablist", "aria-label": "Month selection", children: jsx(AnimatePresence, { mode: "popLayout", initial: false, custom: direction, children: jsx(MonthRow, { custom: direction, ...(enableAnimations && {
@@ -243,7 +243,7 @@ const CalendarMini = React__default.forwardRef(({ selectedDate, currentMonth, on
                                             }), "aria-selected": isSelected, "aria-current": isToday ? "date" : undefined, "aria-disabled": disabled, type: "button", ...(enableAnimations && {
                                                 whileTap: !disabled ? { scale: 0.95 } : undefined,
                                             }), children: [jsx("div", { className: "text-base font-medium opacity-60", children: formatDayName(date) }), jsx("time", { dateTime: date.toISOString(), className: cn("font-semibold"), children: formatDateNumber(date) })] }, date.toISOString()));
-                                    }) }, `${startDate.getTime()}-dates`) }) }) })] }), jsx(Button, { iconOnly: true, color: "neutral", variant: "ghost", className: "!flex-shrink !flex-grow-0 !w-fit self-stretch !h-auto !min-h-0 px-0.5", onClick: handleNextMonth, "aria-label": "Next month", children: jsx(ChevronRightIcon, { className: "size-5 text-[var(--color-text-primary)]" }) })] }));
+                                    }) }, `${startDate.getTime()}-dates`) }) }) })] }), jsx(Button, { iconOnly: true, color: "neutral", variant: "soft", className: "!flex-shrink !flex-grow-0 !w-fit self-stretch !h-auto !min-h-0 px-0.5", onClick: handleNextMonth, "aria-label": "Next month", children: jsx(ChevronRightIcon, { className: "size-5 text-[var(--color-text-primary)]" }) })] }));
 });
 CalendarMini.displayName = "CalendarMini";
 

package/dist/components/core/Drawer/DrawerHeader.js

@@ -8,7 +8,7 @@ import { XMarkIcon } from '@heroicons/react/24/outline';
 const DrawerHeader = ({ children, icon, showCloseButton, className, ...props }) => {
     const { onClose, showCloseButton: contextShowCloseButton, theme, } = useDrawerContext();
     const shouldShowCloseButton = showCloseButton !== null && showCloseButton !== void 0 ? showCloseButton : contextShowCloseButton;
-    return (jsxs("div", { className: cn(theme.header, className), ...props, children: [jsxs("div", { className: cn(theme.headerContent), children: [icon && (jsx("div", { className: "flex-shrink-0 text-[var(--color-text-secondary)]", children: icon })), jsx("div", { className: "flex-1 min-w-0", children: children })] }), shouldShowCloseButton && (jsx(Button, { color: "neutral", variant: "ghost", iconOnly: true, size: "sm", onClick: onClose, "aria-label": "Close drawer", className: "rounded-full shrink-0", children: jsx(XMarkIcon, { className: "size-5" }) }))] }));
+    return (jsxs("div", { className: cn(theme.header, className), ...props, children: [jsxs("div", { className: cn(theme.headerContent), children: [icon && (jsx("div", { className: "flex-shrink-0 text-[var(--color-text-secondary)]", children: icon })), jsx("div", { className: "flex-1 min-w-0", children: children })] }), shouldShowCloseButton && (jsx(Button, { color: "neutral", variant: "soft", iconOnly: true, size: "sm", onClick: onClose, "aria-label": "Close drawer", className: "rounded-full shrink-0", children: jsx(XMarkIcon, { className: "size-5" }) }))] }));
 };
 DrawerHeader.displayName = "Drawer.Header";
 

package/dist/components/core/Link/Link.js

@@ -33,7 +33,7 @@ const Link = React__default.forwardRef(({ children, className = "", size = "inhe
         }, [shouldReduceMotion]);
     return (jsx(motion.a, { ref: ref, href: disabled ? undefined : href, className: cn(buttonTheme.baseStyle, themeClasses.colorClasses, themeClasses.variantClasses, themeClasses.sizeClasses, themeClasses.stateClasses, 
         // Special case for link variant to have an underline
-        "underline underline-offset-4 rounded-none", className), "data-color": color, "data-variant": resolvedVariant, "data-size": size, "aria-disabled": disabled || undefined, ...(disabled ? {} : animationProps), ...props, children: children }));
+        "underline underline-offset-4 rounded-none font-semibold", className), "data-color": color, "data-variant": resolvedVariant, "data-size": size, "aria-disabled": disabled || undefined, ...(disabled ? {} : animationProps), ...props, children: children }));
 });
 Link.displayName = "Link";
 

package/dist/components/core/Modal/ModalHeader.js

@@ -8,7 +8,7 @@ import { XMarkIcon } from '@heroicons/react/24/outline';
 const ModalHeader = ({ children, icon, showCloseButton, className, ...props }) => {
     const { onClose, showCloseButton: contextShowCloseButton, theme, isBodyScrollable, } = useModalContext();
     const shouldShowCloseButton = showCloseButton !== null && showCloseButton !== void 0 ? showCloseButton : contextShowCloseButton;
-    return (jsxs("div", { className: cn(theme.header, isBodyScrollable && "border-[var(--color-border)] relative", className), ...props, children: [jsxs("div", { className: cn(theme.headerContent), children: [icon && (jsx("div", { className: "flex-shrink-0 text-[var(--color-text-secondary)]", children: icon })), jsx("div", { className: "flex-1", children: children })] }), shouldShowCloseButton && (jsx("div", { className: "", children: jsx(Button, { color: "neutral", variant: "ghost", iconOnly: true, size: "sm", onClick: onClose, "aria-label": "Close modal", className: "rounded-full", children: jsx(XMarkIcon, { className: "size-5" }) }) }))] }));
+    return (jsxs("div", { className: cn(theme.header, isBodyScrollable && "border-[var(--color-border)] relative", className), ...props, children: [jsxs("div", { className: cn(theme.headerContent), children: [icon && (jsx("div", { className: "flex-shrink-0 text-[var(--color-text-secondary)]", children: icon })), jsx("div", { className: "flex-1", children: children })] }), shouldShowCloseButton && (jsx("div", { className: "", children: jsx(Button, { color: "neutral", variant: "soft", iconOnly: true, size: "sm", onClick: onClose, "aria-label": "Close modal", className: "rounded-full", children: jsx(XMarkIcon, { className: "size-5" }) }) }))] }));
 };
 ModalHeader.displayName = "Modal.Header";
 

package/dist/components/core/NavItem/NavItem.js

@@ -1,53 +1,85 @@
-import { jsx, jsxs } from 'react/jsx-runtime';
-import React__default, { useMemo } from 'react';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import React__default, { useId, useState, useCallback, useMemo } from 'react';
 import { cn } from '../../../utils/cn.js';
 import { navItemTheme } from './NavItem.theme.js';
-import { useSidebarContext } from '../Sidebar/SidebarContext.js';
+import { useSidebarContext, useAccordionNavContext } from '../Sidebar/SidebarContext.js';
 import { Tooltip } from '../Tooltip/Tooltip.js';
 import '../Tooltip/Tooltip.animations.js';
 import { Badge } from '../Badge/Badge.js';
 import { ChevronDownIcon } from '@heroicons/react/20/solid';
+import { AnimatePresence, motion } from 'motion/react';
 
 const NavItem = React__default.forwardRef(({ children, startContent: propStartContent, endContent: propEndContent, icon, // Legacy
 badge, // Legacy
-description, shortcut, href, onClick, active = false, disabled = false, isDisabled: propIsDisabled, isDanger = false, hasSubmenu = false, expanded = false, onToggleExpanded, level = 0, showTooltipWhenCollapsed = true, className, theme: customTheme = {}, ...props }, ref) => {
+notification, description, shortcut, href, onClick, active = false, disabled = false, isDisabled: propIsDisabled, isDanger = false, hasSubmenu: propHasSubmenu = false, expanded: controlledExpanded, onToggleExpanded, items, defaultExpanded = false, level = 0, showTooltipWhenCollapsed = true, className, theme: customTheme = {}, ...props }, ref) => {
     var _a, _b;
     const sidebarContext = useSidebarContext();
+    const accordionNav = useAccordionNavContext();
+    const stableId = useId();
     const collapsed = (sidebarContext === null || sidebarContext === void 0 ? void 0 : sidebarContext.collapsed) || false;
     const isInSidebar = !!sidebarContext;
+    const isMobile = (sidebarContext === null || sidebarContext === void 0 ? void 0 : sidebarContext.isMobile) || false;
+    // Self-managed submenu state
+    const [internalExpanded, setInternalExpanded] = useState(defaultExpanded);
+    // Determine if this item has a submenu
+    const hasSubmenu = propHasSubmenu || (items && items.length > 0);
+    // Determine expanded state: controlled vs accordion vs internal
+    const isAccordionManaged = !!accordionNav;
+    const isControlled = controlledExpanded !== undefined;
+    let isExpanded;
+    if (isControlled) {
+        isExpanded = controlledExpanded;
+    }
+    else if (isAccordionManaged && hasSubmenu) {
+        isExpanded = accordionNav.openId === stableId;
+    }
+    else {
+        isExpanded = internalExpanded;
+    }
+    const handleToggleExpanded = useCallback(() => {
+        if (isControlled) {
+            onToggleExpanded === null || onToggleExpanded === void 0 ? void 0 : onToggleExpanded();
+        }
+        else if (isAccordionManaged) {
+            if (isExpanded) {
+                accordionNav.unregister(stableId);
+            }
+            else {
+                accordionNav.register(stableId);
+            }
+        }
+        else {
+            setInternalExpanded(prev => !prev);
+        }
+    }, [isControlled, isAccordionManaged, isExpanded, onToggleExpanded, accordionNav, stableId]);
     // Map legacy props
     const startContent = propStartContent || icon;
     const actualIsDisabled = propIsDisabled || disabled;
-    // Construct end content
+    // Build end content
     let endContent = propEndContent;
     if (!endContent && badge) {
-        endContent = (jsx(Badge, { color: "neutral", variant: "ghost", size: "sm", children: badge }));
-    }
-    if (!endContent && hasSubmenu) {
-        endContent = (jsx(ChevronDownIcon, { className: cn("size-4 transition-transform duration-300", expanded && "rotate-180") }));
+        endContent = (jsx(Badge, { color: "neutral", variant: "soft", size: "sm", children: badge }));
     }
+    // Notification element
+    const notificationElement = useMemo(() => {
+        if (notification === undefined || notification === false)
+            return null;
+        if (notification === true) {
+            return (jsx("span", { className: cn(navItemTheme.notificationDot, customTheme.notificationDot) }));
+        }
+        if (typeof notification === "number" && notification > 0) {
+            return (jsx("span", { className: cn(navItemTheme.notificationBadge, customTheme.notificationBadge), children: notification > 99 ? "99+" : notification }));
+        }
+        return null;
+    }, [notification, customTheme.notificationDot, customTheme.notificationBadge]);
     const theme = useMemo(() => ({
         ...navItemTheme,
         ...customTheme,
-        states: {
-            ...navItemTheme.states,
-            ...customTheme.states,
-        },
-        iconStates: {
-            ...navItemTheme.iconStates,
-            ...customTheme.iconStates,
-        },
-        levels: {
-            ...navItemTheme.levels,
-            ...customTheme.levels,
-        },
-        collapsed: {
-            ...navItemTheme.collapsed,
-            ...customTheme.collapsed,
-        },
-        danger: customTheme.danger ||
-            navItemTheme.danger ||
-            "text-[var(--color-danger)] hover:bg-[var(--color-danger-50)]",
+        states: { ...navItemTheme.states, ...customTheme.states },
+        iconStates: { ...navItemTheme.iconStates, ...customTheme.iconStates },
+        levels: { ...navItemTheme.levels, ...customTheme.levels },
+        collapsed: { ...navItemTheme.collapsed, ...customTheme.collapsed },
+        danger: customTheme.danger || navItemTheme.danger || "text-[var(--color-danger)] hover:bg-[var(--color-danger-50)]",
     }), [customTheme]);
     // Handle click events
     const handleClick = (e) => {
@@ -55,19 +87,27 @@ description, shortcut, href, onClick, active = false, disabled = false, isDisabl
             e.preventDefault();
             return;
         }
-        if (hasSubmenu && onToggleExpanded) {
+        if (hasSubmenu) {
             e.preventDefault();
-            onToggleExpanded();
+            handleToggleExpanded();
             return;
         }
         if (onClick) {
             e.preventDefault();
             onClick();
+            // Close mobile sidebar after clicking a nav item
+            if (isMobile && sidebarContext) {
+                sidebarContext.setMobileOpen(false);
+            }
             return;
         }
-        // If href is provided, let the default navigation happen
+        // Close mobile sidebar after navigation
+        if (href && isMobile && sidebarContext) {
+            sidebarContext.setMobileOpen(false);
+        }
     };
     const isActive = active;
+    const isCollapsedView = isInSidebar && collapsed && !isMobile;
     // Get state classes
     const getStateClasses = () => {
         if (actualIsDisabled)
@@ -78,8 +118,10 @@ description, shortcut, href, onClick, active = false, disabled = false, isDisabl
     };
     // Danger overrides
     const dangerClasses = isDanger ? theme.danger : "";
+    // Active indicator
+    const activeIndicatorClasses = isActive && level === 0 ? theme.activeIndicator : "";
     // Build container classes
-    const containerClasses = cn(theme.baseStyle, getStateClasses(), theme.levels[level], isInSidebar && collapsed && ((_a = theme.collapsed) === null || _a === void 0 ? void 0 : _a.container), dangerClasses, className);
+    const containerClasses = cn(theme.baseStyle, getStateClasses(), theme.levels[level], isCollapsedView && ((_a = theme.collapsed) === null || _a === void 0 ? void 0 : _a.container), dangerClasses, activeIndicatorClasses, className);
     // Get icon state classes
     const getIconStateClasses = () => {
         var _a, _b, _c;
@@ -90,35 +132,41 @@ description, shortcut, href, onClick, active = false, disabled = false, isDisabl
         return (_c = theme.iconStates) === null || _c === void 0 ? void 0 : _c.default;
     };
     // Build icon classes
-    const iconClasses = cn(isInSidebar && collapsed ? (_b = theme.collapsed) === null || _b === void 0 ? void 0 : _b.icon : theme.icon, getIconStateClasses());
+    const iconClasses = cn(isCollapsedView ? (_b = theme.collapsed) === null || _b === void 0 ? void 0 : _b.icon : theme.icon, getIconStateClasses());
     const textClasses = cn(theme.text);
+    // Chevron for submenu
+    const chevron = hasSubmenu && !isCollapsedView ? (jsx(ChevronDownIcon, { className: cn("size-4 transition-transform duration-200 text-[var(--color-text-muted)]", isExpanded && "rotate-180") })) : null;
     // Content component
-    const content = (jsxs("div", { ref: ref, className: containerClasses, role: href ? "link" : "button", tabIndex: actualIsDisabled ? -1 : 0, "aria-disabled": actualIsDisabled, "aria-expanded": hasSubmenu ? expanded : undefined, "data-active": isActive, "data-disabled": actualIsDisabled, "data-level": level, onClick: handleClick, onKeyDown: (e) => {
+    const content = (jsxs("div", { ref: ref, className: containerClasses, role: href ? "link" : "button", tabIndex: actualIsDisabled ? -1 : 0, "aria-disabled": actualIsDisabled, "aria-expanded": hasSubmenu ? isExpanded : undefined, "data-active": isActive, "data-disabled": actualIsDisabled, "data-level": level, onClick: handleClick, onKeyDown: (e) => {
             if (e.key === "Enter" || e.key === " ") {
                 e.preventDefault();
                 handleClick(e);
             }
-        }, ...props, children: [startContent && (jsx("div", { className: cn("flex items-center justify-center flex-shrink-0"
-                // Icon size is handled by icon classes
-                ), children: React__default.isValidElement(startContent)
-                    ? React__default.cloneElement(startContent, {
-                        className: cn(iconClasses, startContent.props.className),
-                    })
-                    : startContent })), (!isInSidebar || !collapsed) && (jsxs("div", { className: "flex-1 min-w-0", children: [jsxs("div", { className: "flex items-center justify-between gap-2", children: [jsx("span", { className: cn("truncate", textClasses), children: children }), shortcut && (jsx("kbd", { className: "hidden group-hover:inline-block text-sm text-[var(--color-text-muted)] font-sans border border-[var(--color-border)] rounded px-1.5 py-0.5", children: shortcut }))] }), description && (jsx("div", { className: "text-sm text-[var(--color-text-muted)] mt-0.5 truncate", children: description }))] })), endContent && (!isInSidebar || !collapsed) && (jsx("div", { className: "flex items-center justify-center flex-shrink-0", children: endContent })), isInSidebar && collapsed && (jsx("span", { className: "sr-only", children: children }))] }));
+        }, ...props, children: [startContent && (jsxs("div", { className: "flex items-center justify-center flex-shrink-0 relative", children: [React__default.isValidElement(startContent)
+                        ? React__default.cloneElement(startContent, {
+                            className: cn(iconClasses, startContent.props.className),
+                        })
+                        : startContent, isCollapsedView && notificationElement && (jsx("span", { className: "absolute -top-1 -right-1", children: notificationElement }))] })), !isCollapsedView && (jsxs("div", { className: "flex-1 min-w-0", children: [jsxs("div", { className: "flex items-center justify-between gap-2", children: [jsx("span", { className: cn("truncate", textClasses), children: children }), shortcut && (jsx("kbd", { className: "hidden group-hover:inline-block text-sm text-[var(--color-text-muted)] font-sans border border-[var(--color-border)] rounded px-1.5 py-0.5", children: shortcut }))] }), description && (jsx("div", { className: "text-sm text-[var(--color-text-muted)] mt-0.5 truncate", children: description }))] })), !isCollapsedView && (jsxs("div", { className: "flex items-center gap-1.5 flex-shrink-0", children: [notificationElement, endContent, chevron] })), isCollapsedView && (jsx("span", { className: "sr-only", children: children }))] }));
+    // Self-contained submenu
+    const submenu = hasSubmenu && items && items.length > 0 && !isCollapsedView ? (jsx(AnimatePresence, { initial: false, children: isExpanded && (jsx(motion.div, { initial: "collapsed", animate: "open", exit: "collapsed", variants: {
+                open: { opacity: 1, height: "auto" },
+                collapsed: { opacity: 0, height: 0 },
+            }, transition: { duration: 0.2, ease: "easeInOut" }, className: "overflow-hidden", children: items.map((item, idx) => (jsx(NavItem, { level: Math.min((level + 1), 2), startContent: item.startContent, active: item.active, isDisabled: item.isDisabled, badge: item.badge, notification: item.notification, href: item.href, onClick: item.onClick, children: item.children }, idx))) })) })) : null;
     // Wrap with link if href is provided
-    if (href && !actualIsDisabled) {
-        const LinkContent = (jsx("a", { href: href, className: "block group", children: content }));
-        // Show tooltip in collapsed sidebar mode
-        if (isInSidebar && collapsed && showTooltipWhenCollapsed) {
-            return (jsx(Tooltip, { content: children, placement: "right", children: LinkContent }));
+    const renderWrapped = (node) => {
+        if (href && !actualIsDisabled) {
+            return (jsx("a", { href: href, className: "block group", children: node }));
         }
-        return LinkContent;
-    }
+        return node;
+    };
     // Show tooltip in collapsed sidebar mode
-    if (isInSidebar && collapsed && showTooltipWhenCollapsed) {
-        return (jsx(Tooltip, { content: children, placement: "right", children: content }));
-    }
-    return content;
+    const renderWithTooltip = (node) => {
+        if (isCollapsedView && showTooltipWhenCollapsed) {
+            return (jsx(Tooltip, { content: children, placement: "right", children: node }));
+        }
+        return node;
+    };
+    return (jsxs(Fragment, { children: [renderWithTooltip(renderWrapped(content)), submenu] }));
 });
 NavItem.displayName = "NavItem";
 

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

@@ -1,12 +1,12 @@
 const navItemTheme = {
-    baseStyle: "relative flex items-center gap-2 px-2 py-1.5 text-base font-medium cursor-pointer select-none transition-all duration-300 w-full rounded-[var(--nav-item-radius)] outline-none group",
+    baseStyle: "relative flex items-center gap-2 px-2 py-1.5 text-base font-medium cursor-pointer select-none transition-all duration-150 w-full rounded-[var(--nav-item-radius)] outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-primary)] group",
     icon: "size-4 text-[var(--color-text-secondary)]",
     text: "flex-1 min-w-0 truncate",
     states: {
-        default: "text-[var(--color-text-primary)] hover:bg-neutral-100",
+        default: "text-[var(--color-text-primary)] hover:bg-[var(--color-background-secondary)]",
         active: "bg-[var(--color-primary)]/10 text-[var(--color-primary)] font-semibold",
         disabled: "opacity-60 cursor-not-allowed pointer-events-none text-[var(--color-text-placeholder)]",
-        hover: "hover:bg-neutral-100",
+        hover: "hover:bg-[var(--color-background-secondary)]",
     },
     iconStates: {
         default: "text-[var(--color-text-secondary)] group-hover:text-[var(--color-text-primary)]",
@@ -22,6 +22,9 @@ const navItemTheme = {
         container: "!gap-0 justify-center p-2 aspect-square",
         icon: "size-5",
     },
+    activeIndicator: "before:absolute before:left-0 before:top-1/2 before:-translate-y-1/2 before:h-5 before:w-[3px] before:rounded-full before:bg-[var(--color-primary)]",
+    notificationDot: "size-2 rounded-full bg-[var(--color-danger)]",
+    notificationBadge: "min-w-[18px] h-[18px] px-1 text-[10px] font-semibold rounded-full bg-[var(--color-danger)] text-[var(--color-danger-contrast)] flex items-center justify-center leading-none",
 };
 
 export { navItemTheme };

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

@@ -1,4 +1,22 @@
 import { ReactNode } from "react";
+export interface NavItemSubmenuItem {
+    /** Label text */
+    children: ReactNode;
+    /** Link href */
+    href?: string;
+    /** Click handler */
+    onClick?: () => void;
+    /** Whether this sub-item is active */
+    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> {
     /**
      * Content of the navigation item
@@ -30,6 +48,10 @@ export interface NavItemProps extends React.HTMLAttributes<HTMLDivElement> {
      * @deprecated Use endContent instead
      */
     badge?: string | number;
+    /**
+     * Notification indicator. Pass a number for a count badge, or true for a dot.
+     */
+    notification?: number | boolean;
     /**
      * Link href (for navigation)
      */
@@ -58,19 +80,31 @@ export interface NavItemProps extends React.HTMLAttributes<HTMLDivElement> {
      */
     isDanger?: boolean;
     /**
-     * Whether the item has a submenu
+     * Whether the item has a submenu (manual mode).
+     * If `items` is provided, this is set automatically.
      * @default false
      */
     hasSubmenu?: boolean;
     /**
-     * Whether the submenu is expanded (for multi-level navigation)
+     * Whether the submenu is expanded (controlled mode for manual submenus).
      * @default false
      */
     expanded?: boolean;
     /**
-     * Callback when submenu is toggled
+     * Callback when submenu is toggled (manual mode)
      */
     onToggleExpanded?: () => void;
+    /**
+     * Self-contained submenu items. When provided, NavItem manages its own
+     * expand/collapse state internally. Children items automatically get
+     * level={parentLevel + 1}.
+     */
+    items?: NavItemSubmenuItem[];
+    /**
+     * Whether the self-contained submenu is expanded by default
+     * @default false
+     */
+    defaultExpanded?: boolean;
     /**
      * Nesting level for indentation (0, 1, 2)
      * @default 0
@@ -111,6 +145,10 @@ export interface NavItemTheme {
         container: string;
         icon: string;
     };
+    activeIndicator?: string;
+    notificationDot?: string;
+    notificationBadge?: string;
+    danger?: string;
 }
 export interface NavItemThemeOverrides {
     baseStyle?: string;
@@ -137,32 +175,8 @@ export interface NavItemThemeOverrides {
         container: string;
         icon: string;
     }>;
-    danger?: string;
-}
-export interface NavItemTheme {
-    baseStyle: string;
-    icon: string;
-    text: string;
-    states: {
-        default: string;
-        active: string;
-        disabled: string;
-        hover: string;
-    };
-    iconStates?: {
-        default?: string;
-        active?: string;
-        disabled?: string;
-        hover?: string;
-    };
-    levels: {
-        0: string;
-        1: string;
-        2: string;
-    };
-    collapsed: {
-        container: string;
-        icon: string;
-    };
+    activeIndicator?: string;
+    notificationDot?: string;
+    notificationBadge?: string;
     danger?: string;
 }

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

@@ -1,2 +1,2 @@
 export { NavItem } from './NavItem';
-export type { NavItemProps, NavItemTheme, NavItemThemeOverrides } from './NavItem.types';
+export type { NavItemProps, NavItemSubmenuItem, NavItemTheme, NavItemThemeOverrides } from './NavItem.types';

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

@@ -28,7 +28,7 @@ const pillTheme = {
      */
     sizes: {
         sm: "text-sm px-2 py-0.5 gap-0.5",
-        md: "text-base px-2.5 py-1 gap-1",
+        md: "text-base px-2 py-0.5 gap-1",
         lg: "text-base px-3 py-1 gap-1.5",
     },
     /**

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

@@ -1,3 +1,13 @@
 import React from "react";
 import { SidebarProps } from "./Sidebar.types";
-export declare const Sidebar: React.ForwardRefExoticComponent<SidebarProps & React.RefAttributes<HTMLDivElement>>;
+export declare const Sidebar: React.ForwardRefExoticComponent<SidebarProps & React.RefAttributes<HTMLDivElement>> & {
+    Header: React.ForwardRefExoticComponent<import("./Sidebar.types").SidebarHeaderProps & React.RefAttributes<HTMLDivElement>>;
+    Content: React.ForwardRefExoticComponent<import("./Sidebar.types").SidebarContentProps & React.RefAttributes<HTMLDivElement>>;
+    Footer: React.ForwardRefExoticComponent<import("./Sidebar.types").SidebarFooterProps & React.RefAttributes<HTMLDivElement>>;
+    Nav: React.ForwardRefExoticComponent<import("./Sidebar.types").SidebarNavProps & React.RefAttributes<HTMLDivElement>>;
+    NavGroup: React.ForwardRefExoticComponent<import("./Sidebar.types").SidebarNavGroupProps & React.RefAttributes<HTMLDivElement>>;
+    Submenu: ({ children, isOpen, className, }: import("./SidebarSubmenu").SidebarSubmenuProps) => import("react/jsx-runtime").JSX.Element;
+    Toggle: React.ForwardRefExoticComponent<import("./Sidebar.types").SidebarToggleProps & React.RefAttributes<HTMLButtonElement>>;
+    MobileTrigger: React.ForwardRefExoticComponent<import("./Sidebar.types").SidebarMobileTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+    UserProfile: React.ForwardRefExoticComponent<import("./Sidebar.types").SidebarUserProfileProps & React.RefAttributes<HTMLDivElement>>;
+};