flikkui 0.1.0-beta.11 → 0.1.0-beta.12

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

@@ -0,0 +1,169 @@
+import { ReactNode } from 'react';
+/**
+ * Message role types for AI conversations
+ */
+export type MessageRole = 'user' | 'assistant' | 'system';
+/**
+ * Message variant types for chat UI
+ */
+export type MessageVariant = 'sender' | 'receiver' | 'system';
+/**
+ * Avatar configuration for message sender
+ */
+export interface MessageAvatarProps {
+    /**
+     * The source URL for the avatar image
+     */
+    src?: string;
+    /**
+     * Alternative text for the avatar image
+     */
+    alt: string;
+    /**
+     * Fallback content to display when image fails to load
+     */
+    fallback?: ReactNode;
+}
+/**
+ * Message component props
+ * Supports both props-based API and compound component API
+ */
+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
+     * - user: Messages from the user (maps to sender)
+     * - assistant: AI-generated responses (maps to receiver)
+     * - system: System notifications/messages
+     */
+    role?: MessageRole;
+    /**
+     * The variant of the message (Chat UI semantic naming)
+     * - sender: User messages (right-aligned)
+     * - receiver: Response messages (left-aligned)
+     * - system: System notifications (centered)
+     * @default "receiver"
+     */
+    variant?: MessageVariant;
+    /**
+     * The message content (supports rich content, markdown, etc.)
+     * Note: Optional when using compound API with Message.Content
+     */
+    content?: ReactNode;
+    /**
+     * Deprecated alias for content (for backward compatibility)
+     * @deprecated Use content instead
+     */
+    message?: ReactNode;
+    /**
+     * The timestamp of the message
+     */
+    timestamp?: Date | string;
+    /**
+     * Avatar configuration for the message sender
+     * Note: Not shown for system messages
+     */
+    avatar?: MessageAvatarProps;
+    /**
+     * Whether to show the timestamp
+     * @default true
+     */
+    showTimestamp?: boolean;
+    /**
+     * Whether the message is currently streaming (for AI responses)
+     * @default false
+     */
+    isStreaming?: boolean;
+    /**
+     * Custom streaming indicator content
+     * If not provided, a default animated indicator will be shown
+     */
+    streamingIndicator?: ReactNode;
+    /**
+     * Speed for word-by-word typing animation in milliseconds
+     * Only applies when isStreaming is true for assistant messages
+     * @default 100
+     */
+    typingSpeed?: number;
+    /**
+     * Custom action buttons slot
+     * Overrides default built-in actions (copy, regenerate)
+     */
+    actions?: ReactNode;
+    /**
+     * Callback when copy button is clicked (only for assistant/receiver messages)
+     */
+    onCopy?: () => void;
+    /**
+     * Callback when regenerate button is clicked (only for assistant/receiver messages)
+     */
+    onRegenerate?: () => void;
+    /**
+     * Whether to show built-in action buttons (copy, regenerate)
+     * Only shown for assistant/receiver messages when callbacks are provided
+     * @default true for assistant messages
+     */
+    showActions?: boolean;
+    /**
+     * Custom theme overrides
+     */
+    theme?: MessageThemeOverrides;
+}
+/**
+ * Variant-specific theme styles
+ */
+export interface MessageVariantTheme {
+    containerModifier: string;
+    bubbleStyle: string;
+    timestampModifier: string;
+}
+/**
+ * Message theme configuration
+ */
+export interface MessageTheme {
+    bubbleBaseStyle: string;
+    containerBaseStyle: string;
+    timestampStyle: string;
+    variants: {
+        sender: MessageVariantTheme;
+        receiver: MessageVariantTheme;
+        system: MessageVariantTheme;
+    };
+    streamingIndicatorStyle: string;
+    actionsContainerStyle: string;
+    actionButtonStyle: string;
+}
+/**
+ * Theme overrides for Message component
+ */
+export interface MessageThemeOverrides {
+    bubbleBaseStyle?: string;
+    containerBaseStyle?: string;
+    timestampStyle?: string;
+    variants?: {
+        sender?: Partial<MessageVariantTheme>;
+        receiver?: Partial<MessageVariantTheme>;
+        system?: Partial<MessageVariantTheme>;
+    };
+    streamingIndicatorStyle?: string;
+    actionsContainerStyle?: string;
+    actionButtonStyle?: string;
+    /** @deprecated Use variants.sender.containerModifier instead */
+    senderContainerStyle?: string;
+    /** @deprecated Use variants.sender.bubbleStyle instead */
+    senderBubbleStyle?: string;
+    /** @deprecated Use variants.sender.timestampModifier instead */
+    senderTimestampStyle?: string;
+    /** @deprecated Use variants.receiver.containerModifier instead */
+    receiverContainerStyle?: string;
+    /** @deprecated Use variants.receiver.bubbleStyle instead */
+    receiverBubbleStyle?: string;
+    /** @deprecated Use variants.receiver.timestampModifier instead */
+    receiverTimestampStyle?: string;
+    /** @deprecated Use variants.system.containerModifier instead */
+    systemContainerStyle?: string;
+    /** @deprecated Use variants.system.bubbleStyle instead */
+    systemBubbleStyle?: string;
+    /** @deprecated Use variants.system.timestampModifier instead */
+    systemTimestampStyle?: string;
+}

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

@@ -0,0 +1,21 @@
+import { __rest, __assign } from '/Users/ggn/Development/ui-flik/node_modules/tslib/tslib.es6.js';
+import React__default from 'react';
+import { cn } from '../../../utils/cn.js';
+import '../../../utils/streamingErrors.js';
+import '../../../utils/optimisticErrors.js';
+import '../../../utils/actionQueue.js';
+import { useMessageContext } from './MessageContext.js';
+import { messageTheme } from './Message.theme.js';
+
+var MessageActions = React__default.forwardRef(function (_a, ref) {
+    var children = _a.children, className = _a.className, props = __rest(_a, ["children", "className"]);
+    var isStreaming = useMessageContext().isStreaming;
+    // Don't show actions if streaming
+    if (isStreaming) {
+        return null;
+    }
+    return (React__default.createElement("div", __assign({ ref: ref, className: cn(messageTheme.actionsContainerStyle, className) }, props), children));
+});
+MessageActions.displayName = 'Message.Actions';
+
+export { MessageActions };

package/dist/components/{ai → core}/Message/MessageAvatar.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-export interface MessageAvatarProps extends React.HTMLAttributes<HTMLDivElement> {
+export interface MessageAvatarComponentProps extends React.HTMLAttributes<HTMLDivElement> {
     /**
      * The source URL for the avatar image
      */
@@ -13,4 +13,4 @@ export interface MessageAvatarProps extends React.HTMLAttributes<HTMLDivElement>
      */
     fallback?: React.ReactNode;
 }
-export declare const MessageAvatar: React.ForwardRefExoticComponent<MessageAvatarProps & React.RefAttributes<HTMLDivElement>>;
+export declare const MessageAvatar: React.ForwardRefExoticComponent<MessageAvatarComponentProps & React.RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1,18 @@
+import { __rest, __assign } from '/Users/ggn/Development/ui-flik/node_modules/tslib/tslib.es6.js';
+import React__default from 'react';
+import { Avatar } from '../Avatar/Avatar.js';
+import { useMessageContext } from './MessageContext.js';
+
+var MessageAvatar = React__default.forwardRef(function (_a, ref) {
+    var src = _a.src, name = _a.name, fallback = _a.fallback, className = _a.className, props = __rest(_a, ["src", "name", "fallback", "className"]);
+    var variant = useMessageContext().variant;
+    // Don't render avatar for system messages
+    if (variant === 'system') {
+        return null;
+    }
+    return (React__default.createElement("div", __assign({ ref: ref, className: className }, props),
+        React__default.createElement(Avatar, { src: src, alt: name, fallback: fallback, size: "xs" })));
+});
+MessageAvatar.displayName = 'Message.Avatar';
+
+export { MessageAvatar };

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

@@ -0,0 +1,26 @@
+import { __rest, __assign } from '/Users/ggn/Development/ui-flik/node_modules/tslib/tslib.es6.js';
+import React__default from 'react';
+import { cn } from '../../../utils/cn.js';
+import '../../../utils/streamingErrors.js';
+import '../../../utils/optimisticErrors.js';
+import '../../../utils/actionQueue.js';
+import { useMessageContext } from './MessageContext.js';
+import { messageTheme } from './Message.theme.js';
+import { TypeWriter } from './TypeWriter.js';
+
+var MessageContent = React__default.forwardRef(function (_a, ref) {
+    var children = _a.children, className = _a.className, props = __rest(_a, ["children", "className"]);
+    var _b = useMessageContext(), variant = _b.variant, role = _b.role, isStreaming = _b.isStreaming, typingSpeed = _b.typingSpeed;
+    // Get variant-specific theme
+    var variantTheme = messageTheme.variants[variant];
+    // Build bubble style using theme structure
+    var bubbleStyle = cn(messageTheme.bubbleBaseStyle, variantTheme.bubbleStyle, className);
+    // Use TypeWriter for streaming assistant/receiver messages with string content
+    var shouldAnimate = (role === 'assistant' || variant === 'receiver') &&
+        isStreaming &&
+        typeof children === 'string';
+    return (React__default.createElement("div", __assign({ ref: ref, className: bubbleStyle }, props), shouldAnimate ? (React__default.createElement(TypeWriter, { text: children, speed: typingSpeed, enabled: true, className: "break-words" })) : typeof children === 'string' ? (React__default.createElement("p", { className: "break-words" }, children)) : (children)));
+});
+MessageContent.displayName = 'Message.Content';
+
+export { MessageContent };

package/dist/components/{ai → core}/Message/MessageContext.d.ts

@@ -1,6 +1,7 @@
-import { MessageRole } from './Message.types';
+import { MessageRole, MessageVariant } from './Message.types';
 export interface MessageContextValue {
-    role: MessageRole;
+    role?: MessageRole;
+    variant: MessageVariant;
     isStreaming?: boolean;
     typingSpeed?: number;
 }

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

@@ -0,0 +1,12 @@
+import { createContext, useContext } from 'react';
+
+var MessageContext = createContext(undefined);
+var useMessageContext = function () {
+    var context = useContext(MessageContext);
+    if (!context) {
+        throw new Error('Message compound components must be used within <Message>');
+    }
+    return context;
+};
+
+export { MessageContext, useMessageContext };

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

@@ -0,0 +1,23 @@
+import { __rest, __assign } from '/Users/ggn/Development/ui-flik/node_modules/tslib/tslib.es6.js';
+import React__default from 'react';
+import { cn } from '../../../utils/cn.js';
+import { formatTimestamp } from '../../../utils/dateUtils.js';
+import '../../../utils/streamingErrors.js';
+import '../../../utils/optimisticErrors.js';
+import '../../../utils/actionQueue.js';
+import { useMessageContext } from './MessageContext.js';
+import { messageTheme } from './Message.theme.js';
+
+var MessageTimestamp = React__default.forwardRef(function (_a, ref) {
+    var timestamp = _a.timestamp, className = _a.className, props = __rest(_a, ["timestamp", "className"]);
+    var variant = useMessageContext().variant;
+    // Get variant-specific theme
+    var variantTheme = messageTheme.variants[variant];
+    // Build timestamp style using theme structure
+    var timestampStyle = cn(messageTheme.timestampStyle, variantTheme.timestampModifier, className);
+    return (React__default.createElement("div", __assign({ ref: ref, className: timestampStyle }, props),
+        React__default.createElement("time", { dateTime: typeof timestamp === 'string' ? timestamp : timestamp.toISOString(), className: "select-none" }, formatTimestamp(timestamp))));
+});
+MessageTimestamp.displayName = 'Message.Timestamp';
+
+export { MessageTimestamp };

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

@@ -0,0 +1,28 @@
+import React__default from 'react';
+import { useTypewriter } from '../../../hooks/useTypewriter.js';
+
+/**
+ * TypeWriter component that animates text word-by-word
+ *
+ * @example
+ * ```tsx
+ * <TypeWriter
+ *   text="Hello world, this is a typing animation"
+ *   speed={100}
+ *   enabled={true}
+ * />
+ * ```
+ */
+var TypeWriter = function (_a) {
+    var text = _a.text, _b = _a.speed, speed = _b === void 0 ? 100 : _b, _c = _a.enabled, enabled = _c === void 0 ? true : _c, onComplete = _a.onComplete, className = _a.className;
+    var displayText = useTypewriter({
+        text: text,
+        speed: speed,
+        enabled: enabled,
+        onComplete: onComplete,
+    }).displayText;
+    return React__default.createElement("p", { className: className }, displayText);
+};
+TypeWriter.displayName = 'TypeWriter';
+
+export { TypeWriter };

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

@@ -0,0 +1,5 @@
+export { Message } from './Message';
+export type { MessageProps, MessageRole, MessageVariant, MessageAvatarProps, MessageTheme, MessageThemeOverrides, MessageVariantTheme, } from './Message.types';
+export { messageTheme } from './Message.theme';
+export { TypeWriter } from './TypeWriter';
+export type { TypeWriterProps } from './TypeWriter';

package/dist/components/core/Metric/Metric.js

@@ -1,14 +1,16 @@
-import { __rest, __assign } from '../../../node_modules/tslib/tslib.es6.js';
+import { __rest, __assign } from '/Users/ggn/Development/ui-flik/node_modules/tslib/tslib.es6.js';
 import React__default from 'react';
 import { cn } from '../../../utils/cn.js';
+import '../../../utils/streamingErrors.js';
+import '../../../utils/optimisticErrors.js';
+import '../../../utils/actionQueue.js';
 import { metricTheme } from './Metric.theme.js';
 import { Badge } from '../Badge/Badge.js';
-import ForwardRef from '../../../node_modules/@heroicons/react/24/outline/esm/ArrowTrendingUpIcon.js';
-import ForwardRef$1 from '../../../node_modules/@heroicons/react/24/outline/esm/ArrowTrendingDownIcon.js';
+import { ArrowTrendingUpIcon, ArrowTrendingDownIcon } from '@heroicons/react/24/outline';
 
 function Metric(_a) {
     var value = _a.value, label = _a.label, description = _a.description, trendValue = _a.trendValue, _b = _a.trendDirection, trendDirection = _b === void 0 ? "up" : _b, trendChart = _a.trendChart, _c = _a.size, size = _c === void 0 ? "md" : _c, _d = _a.color, color = _d === void 0 ? "primary" : _d, icon = _a.icon, _e = _a.noBorder, noBorder = _e === void 0 ? false : _e, className = _a.className, props = __rest(_a, ["value", "label", "description", "trendValue", "trendDirection", "trendChart", "size", "color", "icon", "noBorder", "className"]);
-    var trendIcon = trendDirection === "up" ? (React__default.createElement(ForwardRef, { className: "size-3.5", strokeWidth: 2.5 })) : (React__default.createElement(ForwardRef$1, { className: "size-3.5", strokeWidth: 2.5 }));
+    var trendIcon = trendDirection === "up" ? (React__default.createElement(ArrowTrendingUpIcon, { className: "size-3.5", strokeWidth: 2.5 })) : (React__default.createElement(ArrowTrendingDownIcon, { className: "size-3.5", strokeWidth: 2.5 }));
     var sizeStyles = metricTheme.sizes[size];
     return (React__default.createElement("div", __assign({ className: cn(metricTheme.baseStyle, metricTheme.colorStyles[color], sizeStyles.container, noBorder && "border-transparent", className), "data-color": color, "data-size": size }, props),
         React__default.createElement("div", { className: "flex flex-col gap-3 " },

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

@@ -1,3 +1,3 @@
 export { default as Metric } from './Metric';
-export type { MetricProps, MetricSize, MetricVariant, MetricColor, MetricTheme, MetricThemeOverrides, } from './Metric.types';
+export type { MetricProps, MetricSize, MetricColor, MetricTheme, MetricThemeOverrides, } from './Metric.types';
 export { metricTheme } from './Metric.theme';

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

@@ -1,6 +1,7 @@
-import { __rest, __assign } from '../../../node_modules/tslib/tslib.es6.js';
+import { __rest, __assign } from '/Users/ggn/Development/ui-flik/node_modules/tslib/tslib.es6.js';
 import React__default, { createContext, useState, useCallback, useEffect, useContext } from 'react';
 import { createPortal } from 'react-dom';
+import { AnimatePresence, motion } from 'motion/react';
 import { cn } from '../../../utils/cn.js';
 import { modalTheme, modalSizeVariants } from './Modal.theme.js';
 import { modalOverlayAnimations, modalContentAnimations } from './Modal.animations.js';
@@ -9,8 +10,6 @@ import { ModalTitle } from './ModalTitle.js';
 import { ModalDescription } from './ModalDescription.js';
 import { ModalBody } from './ModalBody.js';
 import { ModalFooter } from './ModalFooter.js';
-import { AnimatePresence } from '../../../node_modules/framer-motion/dist/es/components/AnimatePresence/index.js';
-import { motion } from '../../../node_modules/framer-motion/dist/es/render/components/motion/proxy.js';
 
 // Create context for Modal components
 var ModalContext = createContext(undefined);
@@ -66,8 +65,13 @@ var ModalRoot = function (_a) {
         isBodyScrollable: isBodyScrollable,
         setIsBodyScrollable: setIsBodyScrollable,
     };
+    // Detect dark mode from document
+    var isDarkMode = typeof document !== "undefined" &&
+        (document.documentElement.classList.contains("dark") ||
+            document.body.classList.contains("dark") ||
+            document.querySelector(".dark") !== null);
     var modalContent = (React__default.createElement(ModalContext.Provider, { value: contextValue },
-        React__default.createElement(AnimatePresence, null, isOpen && (React__default.createElement(motion.div, { className: cn(theme.overlay), onClick: handleOverlayClick, variants: modalOverlayAnimations, initial: "initial", animate: "animate", exit: "exit" },
+        React__default.createElement(AnimatePresence, null, isOpen && (React__default.createElement(motion.div, { className: cn(isDarkMode && "dark", theme.overlay), onClick: handleOverlayClick, variants: modalOverlayAnimations, initial: "initial", animate: "animate", exit: "exit" },
             React__default.createElement(motion.div, __assign({ className: cn(theme.container, modalSizeVariants[size], className), variants: modalContentAnimations, initial: "initial", animate: "animate", exit: "exit" }, props), children))))));
     // Render in portal
     return createPortal(modalContent, document.body);

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

@@ -1,6 +1,6 @@
 var modalTheme = {
     overlay: "fixed inset-0 bg-[var(--overlay-bg)] backdrop-blur-[var(--overlay-blur)] z-50 flex items-center justify-center",
-    container: "relative glass-effect !from-[var(--color-neutral-200)]/80 !border-t-2 w-full max-h-[calc(100vh-2rem)] bg-white rounded-[var(--modal-rounded)] shadow-2xl shadow-black/30 !ring-4 !ring-white/20 flex flex-col my-4 min-h-0 overflow-hidden ",
+    container: "relative glass-effect-2 w-full max-h-[calc(100vh-2rem)] !bg-[var(--color-background)]/90 rounded-[var(--modal-rounded)] shadow-2xl shadow-black/30 !ring-4 !ring-white/10 flex flex-col my-4 min-h-0 overflow-hidden ",
     header: "flex items-start justify-between p-6 pb-0 shrink-0 border-b border-transparent gap-6 relative",
     headerContent: "flex flex-col items-start gap-2 flex-1",
     title: "text-base leading-6 font-semibold text-[var(--color-text-primary)]",

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

@@ -1,4 +1,4 @@
-import { __rest, __assign } from '../../../node_modules/tslib/tslib.es6.js';
+import { __rest, __assign } from '/Users/ggn/Development/ui-flik/node_modules/tslib/tslib.es6.js';
 import React__default, { useRef, useCallback, useLayoutEffect } from 'react';
 import { cn } from '../../../utils/cn.js';
 import { useModalContext } from './Modal.js';

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

@@ -1,4 +1,4 @@
-import { __rest, __assign } from '../../../node_modules/tslib/tslib.es6.js';
+import { __rest, __assign } from '/Users/ggn/Development/ui-flik/node_modules/tslib/tslib.es6.js';
 import React__default from 'react';
 import { cn } from '../../../utils/cn.js';
 import { useModalContext } from './Modal.js';

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

@@ -1,4 +1,4 @@
-import { __rest, __assign } from '../../../node_modules/tslib/tslib.es6.js';
+import { __rest, __assign } from '/Users/ggn/Development/ui-flik/node_modules/tslib/tslib.es6.js';
 import React__default from 'react';
 import { cn } from '../../../utils/cn.js';
 import { useModalContext } from './Modal.js';

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

@@ -1,20 +1,21 @@
-import { __rest, __assign } from '../../../node_modules/tslib/tslib.es6.js';
+import { __rest, __assign } from '/Users/ggn/Development/ui-flik/node_modules/tslib/tslib.es6.js';
 import React__default from 'react';
 import { cn } from '../../../utils/cn.js';
 import { useModalContext } from './Modal.js';
 import { Button } from '../Button/Button.js';
-import ForwardRef from '../../../node_modules/@heroicons/react/24/outline/esm/XMarkIcon.js';
+import { XMarkIcon } from '@heroicons/react/24/outline';
 
 var ModalHeader = function (_a) {
     var children = _a.children, icon = _a.icon, showCloseButton = _a.showCloseButton, className = _a.className, props = __rest(_a, ["children", "icon", "showCloseButton", "className"]);
     var _b = useModalContext(), onClose = _b.onClose, contextShowCloseButton = _b.showCloseButton, theme = _b.theme, isBodyScrollable = _b.isBodyScrollable;
     var shouldShowCloseButton = showCloseButton !== null && showCloseButton !== void 0 ? showCloseButton : contextShowCloseButton;
-    return (React__default.createElement("div", __assign({ className: cn(theme.header, isBodyScrollable && "border-border", className) }, props),
+    return (React__default.createElement("div", __assign({ className: cn(theme.header, isBodyScrollable && "border-[var(--color-border)] relative", className) }, props),
         React__default.createElement("div", { className: cn(theme.headerContent) },
             icon && (React__default.createElement("div", { className: "flex-shrink-0 text-[var(--color-text-secondary)]" }, icon)),
             React__default.createElement("div", { className: "flex-1" }, children)),
-        shouldShowCloseButton && (React__default.createElement(Button, { color: "neutral", variant: "link", iconOnly: true, size: "sm", onClick: onClose, "aria-label": "Close modal", className: "size-6 p-0" },
-            React__default.createElement(ForwardRef, { className: "size-5" })))));
+        shouldShowCloseButton && (React__default.createElement("div", { className: "" },
+            React__default.createElement(Button, { color: "neutral", variant: "ghost", iconOnly: true, size: "sm", onClick: onClose, "aria-label": "Close modal", className: "rounded-full" },
+                React__default.createElement(XMarkIcon, { className: "size-5" }))))));
 };
 ModalHeader.displayName = "Modal.Header";
 

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

@@ -1,4 +1,4 @@
-import { __rest, __assign } from '../../../node_modules/tslib/tslib.es6.js';
+import { __rest, __assign } from '/Users/ggn/Development/ui-flik/node_modules/tslib/tslib.es6.js';
 import React__default from 'react';
 import { cn } from '../../../utils/cn.js';
 import { useModalContext } from './Modal.js';

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

@@ -1,4 +1,4 @@
-import { __rest, __assign } from '../../../node_modules/tslib/tslib.es6.js';
+import { __rest, __assign } from '/Users/ggn/Development/ui-flik/node_modules/tslib/tslib.es6.js';
 import React__default from 'react';
 import { cn } from '../../../utils/cn.js';
 import { navItemTheme } from './NavItem.theme.js';
@@ -6,18 +6,33 @@ import { useSidebarContext } from '../Sidebar/SidebarContext.js';
 import { Tooltip } from '../Tooltip/Tooltip.js';
 import '../Tooltip/Tooltip.animations.js';
 import { Badge } from '../Badge/Badge.js';
-import ForwardRef from '../../../node_modules/@heroicons/react/20/solid/esm/ChevronDownIcon.js';
+import { ChevronDownIcon } from '@heroicons/react/20/solid';
 
 var NavItem = React__default.forwardRef(function (_a, ref) {
     var _b, _c;
-    var children = _a.children, icon = _a.icon, badge = _a.badge, href = _a.href, onClick = _a.onClick, _d = _a.active, active = _d === void 0 ? false : _d, _e = _a.disabled, disabled = _e === void 0 ? false : _e, _f = _a.hasSubmenu, hasSubmenu = _f === void 0 ? false : _f, _g = _a.expanded, expanded = _g === void 0 ? false : _g, onToggleExpanded = _a.onToggleExpanded, _h = _a.level, level = _h === void 0 ? 0 : _h, _j = _a.showTooltipWhenCollapsed, showTooltipWhenCollapsed = _j === void 0 ? true : _j, className = _a.className, _k = _a.theme, customTheme = _k === void 0 ? {} : _k, props = __rest(_a, ["children", "icon", "badge", "href", "onClick", "active", "disabled", "hasSubmenu", "expanded", "onToggleExpanded", "level", "showTooltipWhenCollapsed", "className", "theme"]);
+    var children = _a.children, propStartContent = _a.startContent, propEndContent = _a.endContent, icon = _a.icon, // Legacy
+    badge = _a.badge, // Legacy
+    description = _a.description, shortcut = _a.shortcut, href = _a.href, onClick = _a.onClick, _d = _a.active, active = _d === void 0 ? false : _d, _e = _a.disabled, disabled = _e === void 0 ? false : _e, propIsDisabled = _a.isDisabled, _f = _a.isDanger, isDanger = _f === void 0 ? false : _f, _g = _a.hasSubmenu, hasSubmenu = _g === void 0 ? false : _g, _h = _a.expanded, expanded = _h === void 0 ? false : _h, onToggleExpanded = _a.onToggleExpanded, _j = _a.level, level = _j === void 0 ? 0 : _j, _k = _a.showTooltipWhenCollapsed, showTooltipWhenCollapsed = _k === void 0 ? true : _k, className = _a.className, _l = _a.theme, customTheme = _l === void 0 ? {} : _l, props = __rest(_a, ["children", "startContent", "endContent", "icon", "badge", "description", "shortcut", "href", "onClick", "active", "disabled", "isDisabled", "isDanger", "hasSubmenu", "expanded", "onToggleExpanded", "level", "showTooltipWhenCollapsed", "className", "theme"]);
     var sidebarContext = useSidebarContext();
     var collapsed = (sidebarContext === null || sidebarContext === void 0 ? void 0 : sidebarContext.collapsed) || false;
-    var isInSidebar = sidebarContext;
-    var theme = __assign(__assign(__assign({}, navItemTheme), customTheme), { states: __assign(__assign({}, navItemTheme.states), customTheme.states), iconStates: __assign(__assign({}, navItemTheme.iconStates), customTheme.iconStates), levels: __assign(__assign({}, navItemTheme.levels), customTheme.levels), collapsed: __assign(__assign({}, navItemTheme.collapsed), customTheme.collapsed) });
+    var isInSidebar = !!sidebarContext;
+    // Map legacy props
+    var startContent = propStartContent || icon;
+    var actualIsDisabled = propIsDisabled || disabled;
+    // Construct end content
+    var endContent = propEndContent;
+    if (!endContent && badge) {
+        endContent = (React__default.createElement(Badge, { color: "neutral", variant: "ghost", size: "sm" }, badge));
+    }
+    if (!endContent && hasSubmenu) {
+        endContent = (React__default.createElement(ChevronDownIcon, { className: cn("size-4 transition-transform duration-300", expanded && "rotate-180") }));
+    }
+    var theme = __assign(__assign(__assign({}, navItemTheme), customTheme), { states: __assign(__assign({}, navItemTheme.states), customTheme.states), iconStates: __assign(__assign({}, navItemTheme.iconStates), customTheme.iconStates), levels: __assign(__assign({}, navItemTheme.levels), customTheme.levels), collapsed: __assign(__assign({}, navItemTheme.collapsed), customTheme.collapsed), danger: customTheme.danger ||
+            navItemTheme.danger ||
+            "text-[var(--color-danger)] hover:bg-[var(--color-danger-50)]" });
     // Handle click events
     var handleClick = function (e) {
-        if (disabled) {
+        if (actualIsDisabled) {
             e.preventDefault();
             return;
         }
@@ -33,22 +48,23 @@ var NavItem = React__default.forwardRef(function (_a, ref) {
         }
         // If href is provided, let the default navigation happen
     };
-    // Determine active state
     var isActive = active;
     // Get state classes
     var getStateClasses = function () {
-        if (disabled)
+        if (actualIsDisabled)
             return theme.states.disabled;
         if (isActive)
             return theme.states.active;
         return theme.states.default;
     };
+    // Danger overrides
+    var dangerClasses = isDanger ? theme.danger : "";
     // Build container classes
-    var containerClasses = cn(theme.baseStyle, getStateClasses(), theme.levels[level], isInSidebar && collapsed && ((_b = theme.collapsed) === null || _b === void 0 ? void 0 : _b.container), className);
+    var containerClasses = cn(theme.baseStyle, getStateClasses(), theme.levels[level], isInSidebar && collapsed && ((_b = theme.collapsed) === null || _b === void 0 ? void 0 : _b.container), dangerClasses, className);
     // Get icon state classes
     var getIconStateClasses = function () {
         var _a, _b, _c;
-        if (disabled)
+        if (actualIsDisabled)
             return (_a = theme.iconStates) === null || _a === void 0 ? void 0 : _a.disabled;
         if (isActive)
             return (_b = theme.iconStates) === null || _b === void 0 ? void 0 : _b.active;
@@ -56,26 +72,31 @@ var NavItem = React__default.forwardRef(function (_a, ref) {
     };
     // Build icon classes
     var iconClasses = cn(isInSidebar && collapsed ? (_c = theme.collapsed) === null || _c === void 0 ? void 0 : _c.icon : theme.icon, getIconStateClasses());
-    // Build text classes
     var textClasses = cn(theme.text);
     // Content component
-    var content = (React__default.createElement("div", __assign({ ref: ref, className: containerClasses, role: href ? "link" : "button", tabIndex: disabled ? -1 : 0, "aria-disabled": disabled, "aria-expanded": hasSubmenu ? expanded : undefined, "data-active": isActive, "data-disabled": disabled, "data-level": level, onClick: handleClick, onKeyDown: function (e) {
+    var content = (React__default.createElement("div", __assign({ 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: function (e) {
             if (e.key === "Enter" || e.key === " ") {
                 e.preventDefault();
                 handleClick(e);
             }
         } }, props),
-        icon && (React__default.createElement("span", { className: cn("flex-shrink-0", !collapsed && "mr-3"), "aria-hidden": "true" }, React__default.cloneElement(icon, {
-            className: iconClasses
-        }))),
-        (!isInSidebar || !collapsed) && (React__default.createElement("span", { className: textClasses }, children)),
-        badge && (!isInSidebar || !collapsed) && (React__default.createElement(Badge, { color: "neutral", variant: "soft", size: "sm" }, badge)),
-        hasSubmenu && (!isInSidebar || !collapsed) && (React__default.createElement("span", { className: "ml-auto flex-shrink-0" },
-            React__default.createElement(ForwardRef, { className: cn("size-4 transition-transform duration-300", expanded && "rotate-180") }))),
+        startContent && (React__default.createElement("div", { className: cn("flex items-center justify-center flex-shrink-0"
+            // Icon size is handled by icon classes
+            ) }, React__default.isValidElement(startContent)
+            ? React__default.cloneElement(startContent, {
+                className: cn(iconClasses, startContent.props.className),
+            })
+            : startContent)),
+        (!isInSidebar || !collapsed) && (React__default.createElement("div", { className: "flex-1 min-w-0" },
+            React__default.createElement("div", { className: "flex items-center justify-between gap-2" },
+                React__default.createElement("span", { className: cn("truncate", textClasses) }, children),
+                shortcut && (React__default.createElement("kbd", { className: "hidden group-hover:inline-block text-xs text-[var(--color-text-muted)] font-sans border border-[var(--color-border)] rounded px-1.5 py-0.5" }, shortcut))),
+            description && (React__default.createElement("div", { className: "text-xs text-[var(--color-text-muted)] mt-0.5 truncate" }, description)))),
+        endContent && (!isInSidebar || !collapsed) && (React__default.createElement("div", { className: "flex items-center justify-center flex-shrink-0" }, endContent)),
         isInSidebar && collapsed && (React__default.createElement("span", { className: "sr-only" }, children))));
     // Wrap with link if href is provided
-    if (href && !disabled) {
-        var LinkContent = (React__default.createElement("a", { href: href, className: "block" }, content));
+    if (href && !actualIsDisabled) {
+        var LinkContent = (React__default.createElement("a", { href: href, className: "block group" }, content));
         // Show tooltip in collapsed sidebar mode
         if (isInSidebar && collapsed && showTooltipWhenCollapsed) {
             return (React__default.createElement(Tooltip, { content: children, placement: "right" }, LinkContent));

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

@@ -1,25 +1,25 @@
 var navItemTheme = {
-    baseStyle: "relative flex items-center cursor-pointer select-none transition-all duration-300 w-full rounded-lg px-[var(--nav-item-px)] py-[var(--nav-item-py)] text-sm font-medium group",
-    icon: "size-5 text-[var(--color-text-placeholder)]",
+    baseStyle: "relative flex items-center gap-2 px-2 py-1.5 text-sm font-medium cursor-pointer select-none transition-all duration-300 w-full rounded-lg outline-none group",
+    icon: "size-4 text-[var(--color-text-secondary)]",
     text: "flex-1 min-w-0 truncate",
     states: {
-        default: "text-[var(--color-text-primary)]/80 hover:bg-gray-100 hover:text-[var(--color-text-primary)]",
-        active: "bg-[var(--color-primary-50)] text-[var(--color-primary)]",
-        disabled: "text-[var(--color-text-placeholder)] cursor-not-allowed hover:bg-transparent hover:text-[var(--color-text-placeholder)]",
-        hover: "hover:bg-gray-50",
+        default: "text-[var(--color-text-primary)] hover:bg-neutral-100",
+        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",
     },
     iconStates: {
-        default: "text-[var(--color-text-placeholder)] group-hover:text-[var(--color-text-primary)]",
+        default: "text-[var(--color-text-secondary)] group-hover:text-[var(--color-text-primary)]",
         active: "text-[var(--color-primary)]",
-        disabled: "text-[var(--color-text-placeholder)]/50",
+        disabled: "opacity-60",
     },
     levels: {
         0: "",
-        1: "ml-4",
-        2: "ml-8",
+        1: "pl-6",
+        2: "pl-10",
     },
     collapsed: {
-        container: "justify-center px-2",
+        container: "!gap-0 justify-center p-2 aspect-square",
         icon: "size-5",
     },
 };