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

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

@@ -0,0 +1,19 @@
+import React from 'react';
+export type FileTypeName = 'pdf' | 'doc' | 'docx' | 'txt' | 'xls' | 'xlsx' | 'csv' | 'ppt' | 'mp3' | 'wav' | 'mp4' | 'mov' | 'jpg' | 'png' | 'svg' | 'gif' | 'zip' | 'rar';
+export type FileTypeIconSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+export type FileTypeIconColorMode = 'color' | 'mono';
+export interface FileTypeIconTheme {
+    baseStyle: string;
+    sizes: Record<FileTypeIconSize, number>;
+}
+export interface FileTypeIconThemeOverrides {
+    baseStyle?: string;
+    sizes?: Partial<Record<FileTypeIconSize, number>>;
+}
+export interface FileTypeIconProps extends React.SVGProps<SVGSVGElement> {
+    type: FileTypeName;
+    size?: FileTypeIconSize | number;
+    colorMode?: FileTypeIconColorMode;
+    className?: string;
+    theme?: FileTypeIconThemeOverrides;
+}

package/dist/components/core/FileTypeIcon/fileTypes.d.ts

@@ -0,0 +1,7 @@
+import { FileTypeName } from './FileTypeIcon.types';
+export interface FileTypeData {
+    label: string;
+    color: string;
+    category: string;
+}
+export declare const fileTypes: Record<FileTypeName, FileTypeData>;

package/dist/components/core/FileTypeIcon/fileTypes.js

@@ -0,0 +1,30 @@
+const fileTypes = {
+    // PDF
+    pdf: { label: 'PDF', color: '#E5252A', category: 'pdf' },
+    // Documents
+    doc: { label: 'DOC', color: '#2B7CD3', category: 'document' },
+    docx: { label: 'DOCX', color: '#2B7CD3', category: 'document' },
+    txt: { label: 'TXT', color: '#4B5563', category: 'document' },
+    // Spreadsheets
+    xls: { label: 'XLS', color: '#1D6F42', category: 'spreadsheet' },
+    xlsx: { label: 'XLSX', color: '#1D6F42', category: 'spreadsheet' },
+    csv: { label: 'CSV', color: '#1D6F42', category: 'spreadsheet' },
+    // Presentations
+    ppt: { label: 'PPT', color: '#D04423', category: 'presentation' },
+    // Audio
+    mp3: { label: 'MP3', color: '#8B5CF6', category: 'audio' },
+    wav: { label: 'WAV', color: '#8B5CF6', category: 'audio' },
+    // Video
+    mp4: { label: 'MP4', color: '#7C3AED', category: 'video' },
+    mov: { label: 'MOV', color: '#7C3AED', category: 'video' },
+    // Images
+    jpg: { label: 'JPG', color: '#F59E0B', category: 'image' },
+    png: { label: 'PNG', color: '#F59E0B', category: 'image' },
+    svg: { label: 'SVG', color: '#F59E0B', category: 'image' },
+    gif: { label: 'GIF', color: '#F59E0B', category: 'image' },
+    // Archives
+    zip: { label: 'ZIP', color: '#CA8A04', category: 'archive' },
+    rar: { label: 'RAR', color: '#CA8A04', category: 'archive' },
+};
+
+export { fileTypes };

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

@@ -0,0 +1,2 @@
+export { FileTypeIcon } from './FileTypeIcon';
+export type { FileTypeIconProps, FileTypeName, FileTypeIconSize, FileTypeIconColorMode, FileTypeIconTheme, FileTypeIconThemeOverrides, } from './FileTypeIcon.types';

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/MenuItem/MenuItem.theme.js

@@ -1,6 +1,6 @@
 const menuItemTheme = {
     // Base item styling with hover, focus, and disabled states
-    baseStyle: "relative flex items-center gap-2 px-2.5 py-1.5 text-base font-[500] text-[var(--color-text-primary)] cursor-pointer outline-none select-none rounded-[var(--radius-base)] transition-colors duration-300 " +
+    baseStyle: "relative flex items-center gap-2 px-3 py-1.5 text-base font-[500] text-[var(--color-text-primary)] cursor-pointer outline-none select-none rounded-[var(--radius-base)] transition-colors duration-300 " +
         "hover:bg-[var(--color-background-secondary)] focus:bg-[var(--color-background-secondary)] " +
         "data-[focused=true]:bg-[var(--color-background-secondary)] " +
         "data-[selected=true]:bg-[var(--color-primary)]/5 data-[selected=true]:text-[var(--color-primary)] " +

package/dist/components/core/Message/Message.js

@@ -100,7 +100,7 @@ const MessageRoot = React__default.forwardRef(({ role, variant: variantProp, con
     if (variant === "system") {
         return (jsx("div", { ref: ref, className: cn("w-full max-w-full", className), "data-variant": "system", "data-role": role, ...props, children: jsxs("div", { className: containerStyle, children: [jsx("div", { className: bubbleStyle, children: typeof renderedContent === "string" ? (jsx("p", { className: "text-base", children: renderedContent })) : (renderedContent) }), jsx(MessageFooter, { isStreaming: isStreaming, streamingIndicator: streamingIndicator, showTimestamp: showTimestamp, timestamp: timestamp, actions: undefined, timestampStyle: timestampStyle, streamingIndicatorStyle: cn(messageTheme.streamingIndicatorStyle, customTheme.streamingIndicatorStyle), actionsContainerStyle: undefined, variant: "system" })] }) }));
     }
-    return (jsx("div", { ref: ref, className: cn("w-full max-w-full group", className), "data-variant": variant, "data-role": role, ...props, children: jsxs("div", { className: containerStyle, children: [avatar && (jsx("div", { className: "flex-shrink-0", children: jsx(Avatar, { src: avatar.src, alt: avatar.alt, fallback: avatar.fallback, size: "xs" }) })), jsxs("div", { className: cn("flex flex-col", variant === "sender" ? "items-end" : "items-start"), children: [jsx("div", { className: bubbleStyle, children: typeof renderedContent === "string" ? (jsx("p", { className: "break-words", children: renderedContent })) : (renderedContent) }), jsx(MessageFooter, { isStreaming: isStreaming, streamingIndicator: streamingIndicator, showTimestamp: showTimestamp, timestamp: timestamp, actions: finalActions, timestampStyle: timestampStyle, streamingIndicatorStyle: cn(messageTheme.streamingIndicatorStyle, customTheme.streamingIndicatorStyle), actionsContainerStyle: cn(messageTheme.actionsContainerStyle, customTheme.actionsContainerStyle), variant: variant })] })] }) }));
+    return (jsx("div", { ref: ref, className: cn("w-full max-w-full group", className), "data-variant": variant, "data-role": role, ...props, children: jsxs("div", { className: containerStyle, children: [avatar && (jsx("div", { className: "flex-shrink-0", children: jsx(Avatar, { src: avatar.src, name: avatar.name, fallback: avatar.fallback, size: "xs" }) })), jsxs("div", { className: cn("flex flex-col", variant === "sender" ? "items-end" : "items-start"), children: [jsx("div", { className: bubbleStyle, children: typeof renderedContent === "string" ? (jsx("p", { className: "break-words", children: renderedContent })) : (renderedContent) }), jsx(MessageFooter, { isStreaming: isStreaming, streamingIndicator: streamingIndicator, showTimestamp: showTimestamp, timestamp: timestamp, actions: finalActions, timestampStyle: timestampStyle, streamingIndicatorStyle: cn(messageTheme.streamingIndicatorStyle, customTheme.streamingIndicatorStyle), actionsContainerStyle: cn(messageTheme.actionsContainerStyle, customTheme.actionsContainerStyle), variant: variant })] })] }) }));
 });
 MessageRoot.displayName = "Message";
 // Attach compound components

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

@@ -6,12 +6,12 @@ const messageTheme = {
     // Shared base styles (apply to all variants)
     bubbleBaseStyle: "max-w-[80%] sm:max-w-[85%] rounded-[calc(var(--radius-base)*1.5)] px-3 py-2 w-fit min-w-fit h-fit",
     containerBaseStyle: "flex items-start gap-3 h-fit text-base",
-    timestampStyle: "text-sm text-[var(--color-text-placeholder)] dark:text-[var(--color-neutral-500)]",
+    timestampStyle: "text-xs text-[var(--color-text-placeholder)] dark:text-[var(--color-neutral-500)]",
     // Variant-specific modifiers (only differences)
     variants: {
         sender: {
             containerModifier: "flex-row-reverse", // Reverse direction for right alignment
-            bubbleStyle: "bg-[var(--color-background-secondary)] text-[var(--color-text-secondary)] " +
+            bubbleStyle: "bg-[var(--color-neutral-900)] text-[var(--color-neutral-100)] " +
                 "rounded-tr-xs  " +
                 // Dark mode - slightly darker gradient for better contrast
                 " ",

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

@@ -1,12 +1,12 @@
-import { ReactNode } from 'react';
+import { ReactNode } from "react";
 /**
  * Message role types for AI conversations
  */
-export type MessageRole = 'user' | 'assistant' | 'system';
+export type MessageRole = "user" | "assistant" | "system";
 /**
  * Message variant types for chat UI
  */
-export type MessageVariant = 'sender' | 'receiver' | 'system';
+export type MessageVariant = "sender" | "receiver" | "system";
 /**
  * Avatar configuration for message sender
  */
@@ -16,9 +16,9 @@ export interface MessageAvatarProps {
      */
     src?: string;
     /**
-     * Alternative text for the avatar image
+     * The name for the avatar (used for initials and alt text)
      */
-    alt: string;
+    name: string;
     /**
      * Fallback content to display when image fails to load
      */
@@ -28,7 +28,7 @@ export interface MessageAvatarProps {
  * Message component props
  * Supports both props-based API and compound component API
  */
-export interface MessageProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'content'> {
+export interface MessageProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "content"> {
     /**
      * The role of the message sender (AI semantic naming)
      * Takes precedence over variant if both are provided

package/dist/components/core/Message/MessageAvatar.d.ts

@@ -1,11 +1,11 @@
-import React from 'react';
+import React from "react";
 export interface MessageAvatarComponentProps extends React.HTMLAttributes<HTMLDivElement> {
     /**
      * The source URL for the avatar image
      */
     src?: string;
     /**
-     * The name or alt text for the avatar
+     * The name for the avatar
      */
     name: string;
     /**

package/dist/components/core/Message/MessageAvatar.js

@@ -6,11 +6,11 @@ import { useMessageContext } from './MessageContext.js';
 const MessageAvatar = React__default.forwardRef(({ src, name, fallback, className, ...props }, ref) => {
     const { variant } = useMessageContext();
     // Don't render avatar for system messages
-    if (variant === 'system') {
+    if (variant === "system") {
         return null;
     }
-    return (jsx("div", { ref: ref, className: className, ...props, children: jsx(Avatar, { src: src, alt: name, fallback: fallback, size: "xs" }) }));
+    return (jsx("div", { ref: ref, className: className, ...props, children: jsx(Avatar, { src: src, name: name, fallback: fallback, size: "xs" }) }));
 });
-MessageAvatar.displayName = 'Message.Avatar';
+MessageAvatar.displayName = "Message.Avatar";
 
 export { MessageAvatar };

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",
     },
     /**