@flikk/ui 1.0.0-beta.2 → 1.0.0-beta.4

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

@@ -1,11 +1,11 @@
-import { HTMLMotionProps } from "motion/react";
+import React from "react";
 import { ButtonSize } from "../Button";
 export type LinkSize = ButtonSize | "inherit";
 /**
  * Link component props
  * Extends standard anchor attributes.
  */
-export interface LinkProps extends Omit<HTMLMotionProps<"a">, 'color'> {
+export interface LinkProps extends Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, 'color'> {
     /**
      * The size of the link.
      * @default "inherit"

package/dist/components/core/MenuItem/MenuItem.js

@@ -9,7 +9,7 @@ import { menuItemTheme } from './MenuItem.theme.js';
  * Handles visual layout, base styling, keyboard activation, and focus tracking.
  * Context-specific behavior (selection, checked state) is handled by consumers.
  */
-const MenuItem = React__default.forwardRef(({ children, className, startContent, endContent, description, shortcut, disabled = false, isDanger = false, onActivate, theme: themeOverrides, role = "menuitem", ...props }, ref) => {
+const MenuItem = React__default.forwardRef(({ children, className, startContent, endContent, subtitle, shortcut, disabled = false, isDanger = false, onActivate, theme: themeOverrides, role = "menuitem", ...props }, ref) => {
     const [isFocused, setIsFocused] = useState(false);
     const theme = {
         ...menuItemTheme,
@@ -26,7 +26,7 @@ const MenuItem = React__default.forwardRef(({ children, className, startContent,
             handleClick();
         }
     }, [handleClick]);
-    return (jsxs("div", { ref: ref, role: role, tabIndex: disabled ? undefined : -1, "aria-disabled": disabled, "data-focused": isFocused, "data-disabled": disabled, className: cn(theme.baseStyle, theme.focusStyle, isDanger && theme.dangerStyle, className), onClick: handleClick, onKeyDown: handleKeyDown, onFocus: () => setIsFocused(true), onBlur: () => setIsFocused(false), ...props, children: [startContent && (jsx("div", { className: "flex items-center justify-center flex-shrink-0", children: startContent })), jsxs("div", { className: "flex-1 min-w-0", children: [jsxs("div", { className: "flex items-center justify-between gap-2", children: [jsx("span", { className: "truncate", children: children }), shortcut && (jsx("kbd", { className: theme.shortcutStyle, children: shortcut }))] }), description && (jsx("div", { className: theme.descriptionStyle, children: description }))] }), endContent && (jsx("div", { className: "flex items-center justify-center ml-2", children: endContent }))] }));
+    return (jsxs("div", { ref: ref, role: role, tabIndex: disabled ? undefined : -1, "aria-disabled": disabled, "data-focused": isFocused, "data-disabled": disabled, className: cn(theme.baseStyle, theme.focusStyle, isDanger && theme.dangerStyle, className), onClick: handleClick, onKeyDown: handleKeyDown, onFocus: () => setIsFocused(true), onBlur: () => setIsFocused(false), ...props, children: [startContent && (jsx("div", { className: "flex items-center justify-center flex-shrink-0", children: startContent })), jsxs("div", { className: "flex-1 min-w-0", children: [jsxs("div", { className: "flex items-center justify-between gap-2", children: [jsx("span", { className: "truncate", children: children }), shortcut && (jsx("span", { className: "ml-auto flex-shrink-0", children: shortcut }))] }), subtitle && jsx("div", { className: theme.subtitleStyle, children: subtitle })] }), endContent && (jsx("div", { className: "flex items-center justify-center ml-2", children: endContent }))] }));
 });
 MenuItem.displayName = "MenuItem";
 

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

@@ -2,7 +2,6 @@ export interface MenuItemTheme {
     baseStyle: string;
     dangerStyle: string;
     focusStyle: string;
-    shortcutStyle: string;
-    descriptionStyle: string;
+    subtitleStyle: string;
 }
 export declare const menuItemTheme: MenuItemTheme;

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

@@ -1,15 +1,15 @@
 const menuItemTheme = {
     // Base item styling with hover, focus, and disabled states
-    baseStyle: "relative flex items-center gap-2 px-2 py-1.5 text-sm 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-tertiary)] focus:bg-[var(--color-background-secondary)] " +
-        "data-[focused=true]:bg-[var(--color-background-tertiary)] " +
+    baseStyle: "relative flex items-center gap-2 px-2.5 py-1.5 text-sm 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)] " +
         "mb-px last-of-type:mb-0 " +
         "data-[disabled=true]:opacity-60 data-[disabled=true]:cursor-not-allowed data-[disabled=true]:pointer-events-none " +
         // Dark mode
-        "dark:text-[var(--color-text-primary)] " +
-        "dark:hover:bg-[var(--color-neutral-800)]/80 dark:focus:bg-[var(--color-neutral-800)] " +
-        "dark:data-[focused=true]:bg-[var(--color-neutral-800)] " +
+        " " +
+        " " +
+        "dark:data-[focused=true]:bg-[var(--color-background-secondary)] " +
         "dark:hover:bg-[var(--color-neutral-700)] " +
         "dark:data-[selected=true]:bg-[var(--color-neutral-600)]/50 dark:data-[selected=true]:text-[var(--color-text-primary)]",
     // Danger item styling (e.g., Delete actions)
@@ -18,10 +18,8 @@ const menuItemTheme = {
     // Focus visible styling for keyboard navigation
     focusStyle: "focus-visible:ring-2 focus-visible:ring-[var(--color-primary)] focus-visible:ring-offset-2 " +
         "dark:focus-visible:ring-[var(--color-primary-400)] dark:focus-visible:ring-offset-[var(--color-neutral-900)]",
-    // Keyboard shortcut display
-    shortcutStyle: "text-xs text-[var(--color-text-muted)] font-sans border border-[var(--color-border)] rounded px-1.5 py-0.5",
     // Description text below the label
-    descriptionStyle: "text-xs text-[var(--color-text-muted)] mt-0.5 truncate",
+    subtitleStyle: "text-xs text-[var(--color-text-muted)] mt-0.5 truncate",
 };
 
 export { menuItemTheme };

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

@@ -10,7 +10,7 @@ export interface MenuItemProps extends Omit<React.HTMLAttributes<HTMLDivElement>
     /** Icon or element at the end (right side) */
     endContent?: ReactNode;
     /** Secondary text below the label */
-    description?: string;
+    subtitle?: string;
     /** Keyboard shortcut display */
     shortcut?: ReactNode;
     /** Whether the item is disabled */

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

@@ -1,8 +1,9 @@
-import React from 'react';
-import { MessageProps } from './Message.types';
+import React from "react";
+import { MessageProps } from "./Message.types";
 export declare const Message: React.ForwardRefExoticComponent<MessageProps & React.RefAttributes<HTMLDivElement>> & {
     Avatar: React.ForwardRefExoticComponent<import("./MessageAvatar").MessageAvatarComponentProps & React.RefAttributes<HTMLDivElement>>;
     Content: React.ForwardRefExoticComponent<import("./MessageContent").MessageContentProps & React.RefAttributes<HTMLDivElement>>;
     Actions: React.ForwardRefExoticComponent<import("./MessageActions").MessageActionsProps & React.RefAttributes<HTMLDivElement>>;
     Timestamp: React.ForwardRefExoticComponent<import("./MessageTimestamp").MessageTimestampProps & React.RefAttributes<HTMLDivElement>>;
+    List: React.ForwardRefExoticComponent<import("./MessageList.types").MessageListProps & React.RefAttributes<import("..").ScrollAreaRef>>;
 };

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

@@ -4,6 +4,7 @@ import { cn } from '../../../utils/cn.js';
 import { formatTimestamp } from '../../../utils/dateUtils.js';
 import { messageTheme } from './Message.theme.js';
 import { Avatar } from '../Avatar/Avatar.js';
+import { Button } from '../Button/Button.js';
 import { motion } from 'motion/react';
 import { DocumentDuplicateIcon, ArrowPathIcon } from '@heroicons/react/24/outline';
 import { MessageContext } from './MessageContext.js';
@@ -11,37 +12,42 @@ import { MessageAvatar } from './MessageAvatar.js';
 import { MessageContent } from './MessageContent.js';
 import { MessageActions } from './MessageActions.js';
 import { MessageTimestamp } from './MessageTimestamp.js';
+import { MessageList } from './MessageList.js';
 import { TypeWriter } from './TypeWriter.js';
 
 const MessageFooter = ({ isStreaming, streamingIndicator, showTimestamp, timestamp, actions, timestampStyle, streamingIndicatorStyle, actionsContainerStyle, variant, }) => {
     if (isStreaming) {
-        return (jsx("div", { className: cn('flex flex-row items-center gap-3 mt-1', variant === 'receiver' ? 'ml-2' : 'mr-3'), children: jsx("div", { className: cn(timestampStyle, streamingIndicatorStyle), children: streamingIndicator || (jsxs(Fragment, { children: [jsx("span", { children: "Typing" }), jsx(motion.span, { animate: { opacity: [0.4, 1, 0.4] }, transition: {
+        return (jsx("div", { className: cn("flex flex-row items-center gap-3 mt-1", variant === "receiver" ? "ml-2" : "mr-3"), children: jsx("div", { className: cn(timestampStyle, streamingIndicatorStyle), children: streamingIndicator || (jsxs(Fragment, { children: [jsx("span", { children: "Typing" }), jsx(motion.span, { animate: { opacity: [0.4, 1, 0.4] }, transition: {
                                 duration: 1.5,
                                 repeat: Infinity,
-                                ease: 'easeInOut',
+                                ease: "easeInOut",
                             }, children: "\u2022\u2022\u2022" })] })) }) }));
     }
     // For system variant, only show timestamp (no actions)
-    if (variant === 'system') {
-        return showTimestamp && timestamp ? (jsx("div", { className: timestampStyle, children: jsx("time", { dateTime: typeof timestamp === 'string' ? timestamp : timestamp.toISOString(), className: "select-none", children: formatTimestamp(timestamp) }) })) : null;
+    if (variant === "system") {
+        return showTimestamp && timestamp ? (jsx("div", { className: timestampStyle, children: jsx("time", { dateTime: typeof timestamp === "string" ? timestamp : timestamp.toISOString(), className: "select-none", children: formatTimestamp(timestamp) }) })) : null;
     }
     // For sender/receiver variants, show timestamp and actions in a row
-    return (jsxs("div", { className: cn(`flex flex-row items-center gap-3 mt-2`, variant === 'receiver' ? 'ml-2' : 'mr-3'), children: [showTimestamp && timestamp && (jsx("div", { className: timestampStyle, children: jsx("time", { dateTime: typeof timestamp === 'string'
+    return (jsxs("div", { className: cn(`flex flex-row items-center gap-3 mt-3`, variant === "receiver" ? "-ml-0" : "mr-3"), children: [showTimestamp && timestamp && (jsx("div", { className: timestampStyle, children: jsx("time", { dateTime: typeof timestamp === "string"
                         ? timestamp
                         : timestamp.toISOString(), className: "select-none", children: formatTimestamp(timestamp) }) })), actions && jsx("div", { className: cn(actionsContainerStyle), children: actions })] }));
 };
-const MessageRoot = React__default.forwardRef(({ role, variant: variantProp, content, message, // Deprecated alias
-timestamp, avatar, showTimestamp = true, isStreaming = false, streamingIndicator, typingSpeed = 100, actions, onCopy, onRegenerate, showActions, className, theme: customTheme = {}, children, ...props }, ref) => {
+const MessageRoot = React__default.forwardRef(({ role, variant: variantProp, content, timestamp, avatar, showTimestamp = false, isStreaming = false, streamingIndicator, typingSpeed = 100, actions, onCopy, onRegenerate, showActions, className, theme: customTheme = {}, children, ...props }, ref) => {
     var _a, _b, _c, _d, _e, _f, _g, _h;
     // Determine the variant: role takes precedence over variant prop
     let variant;
     if (role) {
         // Map role to variant
-        variant = role === 'user' ? 'sender' : role === 'assistant' ? 'receiver' : 'system';
+        variant =
+            role === "user"
+                ? "sender"
+                : role === "assistant"
+                    ? "receiver"
+                    : "system";
     }
     else {
         // Use variant prop or default
-        variant = variantProp || 'receiver';
+        variant = variantProp || "receiver";
     }
     // Detect if using compound API (has children)
     const isCompoundAPI = !!children;
@@ -52,11 +58,10 @@ timestamp, avatar, showTimestamp = true, isStreaming = false, streamingIndicator
         isStreaming,
         typingSpeed,
     }), [role, variant, isStreaming, typingSpeed]);
-    // Resolve content (support deprecated 'message' prop)
-    const messageContent = content !== null && content !== void 0 ? content : message;
+    const messageContent = content;
     // Determine if we should show default actions
     const shouldShowDefaultActions = showActions !== false &&
-        (variant === 'receiver' || role === 'assistant') &&
+        (variant === "receiver" || role === "assistant") &&
         (onCopy || onRegenerate);
     if (isCompoundAPI) {
         // Compound API - Render with context
@@ -64,8 +69,8 @@ timestamp, avatar, showTimestamp = true, isStreaming = false, streamingIndicator
         // Build container style
         const containerStyle = cn(messageTheme.containerBaseStyle, variantTheme.containerModifier, customTheme.containerBaseStyle, (_b = (_a = customTheme.variants) === null || _a === void 0 ? void 0 : _a[variant]) === null || _b === void 0 ? void 0 : _b.containerModifier, 
         // Backward compatibility
-        variant === 'sender' && customTheme.senderContainerStyle, variant === 'receiver' && customTheme.receiverContainerStyle, variant === 'system' && customTheme.systemContainerStyle);
-        return (jsx(MessageContext.Provider, { value: contextValue, children: jsx("div", { ref: ref, className: cn('w-full max-w-full group', className), "data-variant": variant, "data-role": role, ...props, children: jsx("div", { className: containerStyle, children: children }) }) }));
+        variant === "sender" && customTheme.senderContainerStyle, variant === "receiver" && customTheme.receiverContainerStyle, variant === "system" && customTheme.systemContainerStyle);
+        return (jsx(MessageContext.Provider, { value: contextValue, children: jsx("div", { ref: ref, className: cn("w-full max-w-full group", className), "data-variant": variant, "data-role": role, ...props, children: jsx("div", { className: containerStyle, children: children }) }) }));
     }
     // Props API - Render inline
     // Get variant-specific theme
@@ -73,37 +78,38 @@ timestamp, avatar, showTimestamp = true, isStreaming = false, streamingIndicator
     // Build container styles
     const containerStyle = cn(messageTheme.containerBaseStyle, variantTheme.containerModifier, customTheme.containerBaseStyle, (_d = (_c = customTheme.variants) === null || _c === void 0 ? void 0 : _c[variant]) === null || _d === void 0 ? void 0 : _d.containerModifier, 
     // Backward compatibility
-    variant === 'sender' && customTheme.senderContainerStyle, variant === 'receiver' && customTheme.receiverContainerStyle, variant === 'system' && customTheme.systemContainerStyle);
+    variant === "sender" && customTheme.senderContainerStyle, variant === "receiver" && customTheme.receiverContainerStyle, variant === "system" && customTheme.systemContainerStyle);
     // Build bubble styles
     const bubbleStyle = cn(messageTheme.bubbleBaseStyle, variantTheme.bubbleStyle, customTheme.bubbleBaseStyle, (_f = (_e = customTheme.variants) === null || _e === void 0 ? void 0 : _e[variant]) === null || _f === void 0 ? void 0 : _f.bubbleStyle, 
     // Backward compatibility
-    variant === 'sender' && customTheme.senderBubbleStyle, variant === 'receiver' && customTheme.receiverBubbleStyle, variant === 'system' && customTheme.systemBubbleStyle);
+    variant === "sender" && customTheme.senderBubbleStyle, variant === "receiver" && customTheme.receiverBubbleStyle, variant === "system" && customTheme.systemBubbleStyle);
     // Build timestamp styles
     const timestampStyle = cn(messageTheme.timestampStyle, variantTheme.timestampModifier, customTheme.timestampStyle, (_h = (_g = customTheme.variants) === null || _g === void 0 ? void 0 : _g[variant]) === null || _h === void 0 ? void 0 : _h.timestampModifier, 
     // Backward compatibility
-    variant === 'sender' && customTheme.senderTimestampStyle, variant === 'receiver' && customTheme.receiverTimestampStyle, variant === 'system' && customTheme.systemTimestampStyle);
+    variant === "sender" && customTheme.senderTimestampStyle, variant === "receiver" && customTheme.receiverTimestampStyle, variant === "system" && customTheme.systemTimestampStyle);
     // Build default action buttons if needed
-    const defaultActionButtons = shouldShowDefaultActions ? (jsxs("div", { className: cn(messageTheme.actionsContainerStyle, customTheme.actionsContainerStyle), children: [onCopy && (jsx("button", { onClick: onCopy, className: cn(messageTheme.actionButtonStyle, customTheme.actionButtonStyle), "aria-label": "Copy message", children: jsx(DocumentDuplicateIcon, { className: "w-4 h-4" }) })), onRegenerate && (jsx("button", { onClick: onRegenerate, className: cn(messageTheme.actionButtonStyle, customTheme.actionButtonStyle), "aria-label": "Regenerate response", children: jsx(ArrowPathIcon, { className: "w-4 h-4" }) }))] })) : undefined;
+    const defaultActionButtons = shouldShowDefaultActions ? (jsxs("div", { className: cn(messageTheme.actionsContainerStyle, customTheme.actionsContainerStyle), children: [onCopy && (jsx(Button, { variant: "link", color: "neutral", size: "sm", onClick: onCopy, "aria-label": "Copy message", className: "opacity-40 hover:opacity-100", children: jsx(DocumentDuplicateIcon, { className: "size-4" }) })), onRegenerate && (jsx(Button, { variant: "link", color: "neutral", size: "sm", onClick: onRegenerate, "aria-label": "Regenerate response", className: "opacity-40 hover:opacity-100", children: jsx(ArrowPathIcon, { className: "size-4" }) }))] })) : undefined;
     // Use custom actions if provided, otherwise use default actions
     const finalActions = actions !== null && actions !== void 0 ? actions : defaultActionButtons;
     // Use TypeWriter for streaming receiver/assistant messages with string content (props API)
-    const shouldAnimate = (variant === 'receiver' || role === 'assistant') &&
+    const shouldAnimate = (variant === "receiver" || role === "assistant") &&
         isStreaming &&
-        typeof messageContent === 'string';
+        typeof messageContent === "string";
     const renderedContent = shouldAnimate ? (jsx(TypeWriter, { text: messageContent, speed: typingSpeed, enabled: true, className: "break-words" })) : (messageContent);
     // System messages render differently (centered, no avatar)
-    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-sm", 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" })] }) }));
+    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-sm", 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, 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 })] })] }) }));
 });
-MessageRoot.displayName = 'Message';
+MessageRoot.displayName = "Message";
 // Attach compound components
 const Message = Object.assign(MessageRoot, {
     Avatar: MessageAvatar,
     Content: MessageContent,
     Actions: MessageActions,
     Timestamp: MessageTimestamp,
+    List: MessageList,
 });
 
 export { Message };

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

@@ -1,4 +1,4 @@
-import { MessageTheme } from './Message.types';
+import { MessageTheme } from "./Message.types";
 /**
  * Unified Message theme with shared base styles + variant-specific modifiers
  * Based on ChatMessage theme with additional action button styles

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

@@ -4,43 +4,41 @@
  */
 const messageTheme = {
     // Shared base styles (apply to all variants)
-    bubbleBaseStyle: 'max-w-[80%] sm:max-w-[90%] rounded-[calc(var(--radius-base)*1.5)] px-3 py-2 w-fit min-w-fit border-t-[0.5px] ring-1 h-fit',
-    containerBaseStyle: 'flex items-start gap-3 h-fit text-sm',
-    timestampStyle: 'text-xs text-[var(--color-text-placeholder)] dark:text-[var(--color-neutral-500)]',
+    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-sm",
+    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-gradient-to-br from-[var(--color-primary)] to-[var(--color-primary-700)] text-white ' +
-                'rounded-tr-xs ring-[var(--color-primary-700)] border-t-1 border-[var(--color-primary-400)] ' +
+            containerModifier: "flex-row-reverse", // Reverse direction for right alignment
+            bubbleStyle: "bg-[var(--color-background-secondary)] text-[var(--color-text-secondary)] " +
+                "rounded-tr-xs  " +
                 // Dark mode - slightly darker gradient for better contrast
-                'dark:from-[var(--color-primary-600)] dark:to-[var(--color-primary-800)] dark:ring-[var(--color-primary-800)] dark:border-[var(--color-primary-400)]',
-            timestampModifier: 'text-right pr-1',
+                " ",
+            timestampModifier: "text-right pr-1",
         },
         receiver: {
-            containerModifier: '', // Default direction (no modifier needed)
-            bubbleStyle: 'bg-[var(--color-neutral-100)] text-[var(--color-text-primary)] rounded-tl-xs ' +
-                'shadow-black/10 ring-neutral-100 border-[var(--chat-bubble-border-receiver)] ' +
+            containerModifier: "", // Default direction (no modifier needed)
+            bubbleStyle: " text-[var(--color-text-secondary)] rounded-tl-xs py-0 px-0 " +
+                " " +
                 // Dark mode - dark background with lighter text
-                'dark:bg-[var(--color-neutral-900)] ' +
-                'dark:ring-[var(--color-neutral-800)] dark:border-[var(--color-neutral-700)] dark:border-neutral-500',
-            timestampModifier: 'text-left pl-1',
+                " " +
+                "",
+            timestampModifier: "text-left pl-1",
         },
         system: {
-            containerModifier: 'justify-center', // Center alignment
-            bubbleStyle: 'bg-[var(--color-neutral-100)] text-[var(--color-text-secondary)] rounded-[calc(var(--radius-base)*0.75)] px-2 py-1 ' +
-                'text-sm font-medium border-none ' +
+            containerModifier: "justify-center", // Center alignment
+            bubbleStyle: "bg-[var(--color-background)] text-[var(--color-text-muted)]/80 rounded-[calc(var(--radius-base)*0.75)] px-1 py-0.5 " +
+                "text-xs border-none " +
                 // Dark mode
-                'dark:bg-[var(--color-neutral-800)] dark:text-[var(--color-neutral-400)]',
-            timestampModifier: 'text-center',
+                "",
+            timestampModifier: "text-center",
         },
     },
     // Feature styles (streaming, actions)
-    streamingIndicatorStyle: 'flex items-center gap-1 text-[var(--color-text-placeholder)] text-xs ' +
-        'dark:text-[var(--color-neutral-500)]',
-    actionsContainerStyle: 'flex items-start gap-2',
-    actionButtonStyle: 'text-[var(--color-text-placeholder)] hover:text-[var(--color-text-primary)] ' +
-        'transition-colors cursor-pointer dark:text-[var(--color-neutral-500)] dark:hover:text-[var(--color-neutral-300)]',
+    streamingIndicatorStyle: "flex items-center gap-1 text-[var(--color-text-placeholder)] text-xs " +
+        "dark:text-[var(--color-neutral-500)]",
+    actionsContainerStyle: "flex items-start gap-3",
 };
 
 export { messageTheme };

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

@@ -50,11 +50,6 @@ export interface MessageProps extends Omit<React.HTMLAttributes<HTMLDivElement>,
      * 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
      */
@@ -131,7 +126,6 @@ export interface MessageTheme {
     };
     streamingIndicatorStyle: string;
     actionsContainerStyle: string;
-    actionButtonStyle: string;
 }
 /**
  * Theme overrides for Message component
@@ -147,7 +141,6 @@ export interface MessageThemeOverrides {
     };
     streamingIndicatorStyle?: string;
     actionsContainerStyle?: string;
-    actionButtonStyle?: string;
     /** @deprecated Use variants.sender.containerModifier instead */
     senderContainerStyle?: string;
     /** @deprecated Use variants.sender.bubbleStyle instead */

package/dist/components/core/Message/MessageList.animations.d.ts

@@ -0,0 +1,6 @@
+import type { Variants } from 'motion/react';
+/**
+ * Returns animation variants for message list items, or undefined
+ * when animations should be disabled (reduced motion or shouldAnimate=false).
+ */
+export declare const getMessageItemVariants: (shouldReduceMotion: boolean | null, shouldAnimate: boolean) => Variants | undefined;

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

@@ -0,0 +1,32 @@
+/**
+ * Returns animation variants for message list items, or undefined
+ * when animations should be disabled (reduced motion or shouldAnimate=false).
+ */
+const getMessageItemVariants = (shouldReduceMotion, shouldAnimate) => {
+    if (shouldReduceMotion || !shouldAnimate)
+        return undefined;
+    return {
+        initial: {
+            opacity: 0,
+            y: 10,
+        },
+        animate: {
+            opacity: 1,
+            y: 0,
+            transition: {
+                duration: 0.3,
+                ease: [0.2, 0.65, 0.3, 0.9],
+            },
+        },
+        exit: {
+            opacity: 0,
+            scale: 0.97,
+            transition: {
+                duration: 0.15,
+                ease: 'easeIn',
+            },
+        },
+    };
+};
+
+export { getMessageItemVariants };

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

@@ -0,0 +1,5 @@
+import React from 'react';
+import type { ScrollAreaRef } from '../ScrollArea/ScrollArea.types';
+import type { MessageListProps } from './MessageList.types';
+declare const MessageList: React.ForwardRefExoticComponent<MessageListProps & React.RefAttributes<ScrollAreaRef>>;
+export { MessageList };

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

@@ -0,0 +1,78 @@
+import { jsx } from 'react/jsx-runtime';
+import React__default, { useRef, useCallback, useEffect } from 'react';
+import { useReducedMotion, motion, AnimatePresence } from 'motion/react';
+import { cn } from '../../../utils/cn.js';
+import { ScrollArea } from '../ScrollArea/ScrollArea.js';
+import '../ScrollArea/smooth/SmoothScrollEngine.js';
+import { messageListTheme } from './MessageList.theme.js';
+import { getMessageItemVariants } from './MessageList.animations.js';
+
+const MessageList = React__default.forwardRef(({ children, autoScroll = true, scrollThreshold = 100, shouldAnimate = true, className, theme: customTheme, ...props }, ref) => {
+    var _a, _b;
+    const shouldReduceMotion = useReducedMotion();
+    const itemVariants = getMessageItemVariants(shouldReduceMotion, shouldAnimate);
+    const scrollAreaRef = useRef(null);
+    const userHasScrolledRef = useRef(false);
+    const childCountRef = useRef(0);
+    const scrollToBottom = useCallback(() => {
+        const el = scrollAreaRef.current;
+        if (!el)
+            return;
+        el.scrollTop = el.scrollHeight;
+    }, []);
+    const handleScroll = useCallback(() => {
+        const el = scrollAreaRef.current;
+        if (!el)
+            return;
+        const { scrollTop, scrollHeight, clientHeight } = el;
+        const isAtBottom = scrollHeight - scrollTop - clientHeight < scrollThreshold;
+        userHasScrolledRef.current = !isAtBottom;
+    }, [scrollThreshold]);
+    const childCount = React__default.Children.count(children);
+    // Auto-scroll when new children are added
+    useEffect(() => {
+        if (!autoScroll)
+            return;
+        if (childCount > childCountRef.current && !userHasScrolledRef.current) {
+            // rAF ensures AnimatePresence has mounted the new child before measuring
+            requestAnimationFrame(scrollToBottom);
+        }
+        childCountRef.current = childCount;
+    }, [childCount, autoScroll, scrollToBottom]);
+    // Scroll to bottom on initial mount
+    useEffect(() => {
+        scrollToBottom();
+    }, [scrollToBottom]);
+    // Dev warning for missing keys
+    if (process.env.NODE_ENV !== 'production') {
+        React__default.Children.forEach(children, (child) => {
+            if (React__default.isValidElement(child) && child.key === null) {
+                console.warn('[Message.List]: Each child must have a stable key prop for animations to work correctly.');
+            }
+        });
+    }
+    const baseStyle = (_a = customTheme === null || customTheme === void 0 ? void 0 : customTheme.baseStyle) !== null && _a !== void 0 ? _a : messageListTheme.baseStyle;
+    const innerStyle = (_b = customTheme === null || customTheme === void 0 ? void 0 : customTheme.innerStyle) !== null && _b !== void 0 ? _b : messageListTheme.innerStyle;
+    const wrappedChildren = React__default.Children.map(children, (child) => {
+        if (!React__default.isValidElement(child))
+            return child;
+        if (itemVariants) {
+            return (jsx(motion.div, { layout: true, variants: itemVariants, initial: "initial", animate: "animate", exit: "exit", children: child }, child.key));
+        }
+        return jsx("div", { children: child }, child.key);
+    });
+    // Merge internal ref with forwarded ref
+    const setRefs = useCallback((node) => {
+        scrollAreaRef.current = node;
+        if (typeof ref === 'function') {
+            ref(node);
+        }
+        else if (ref) {
+            ref.current = node;
+        }
+    }, [ref]);
+    return (jsx(ScrollArea, { ref: setRefs, type: "hover", orientation: "vertical", className: cn(baseStyle, className), onScroll: handleScroll, role: "log", "aria-live": "polite", ...props, children: jsx("div", { className: innerStyle, children: jsx(AnimatePresence, { mode: "popLayout", initial: false, children: wrappedChildren }) }) }));
+});
+MessageList.displayName = 'Message.List';
+
+export { MessageList };

package/dist/components/core/Message/MessageList.theme.d.ts

@@ -0,0 +1,2 @@
+import type { MessageListTheme } from './MessageList.types';
+export declare const messageListTheme: MessageListTheme;

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

@@ -0,0 +1,6 @@
+const messageListTheme = {
+    baseStyle: 'w-full',
+    innerStyle: 'flex flex-col gap-2 p-4',
+};
+
+export { messageListTheme };

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

@@ -0,0 +1,32 @@
+import { ReactNode, HTMLAttributes } from 'react';
+export interface MessageListTheme {
+    baseStyle: string;
+    innerStyle: string;
+}
+export interface MessageListThemeOverrides {
+    baseStyle?: string;
+    innerStyle?: string;
+}
+export interface MessageListProps extends HTMLAttributes<HTMLDivElement> {
+    /** Message children to render. Each child must have a stable `key` for animations. */
+    children?: ReactNode;
+    /**
+     * Auto-scroll to bottom when new children are added,
+     * unless the user has manually scrolled up.
+     * @default true
+     */
+    autoScroll?: boolean;
+    /**
+     * Pixels from the bottom to consider "at bottom" for auto-scroll detection.
+     * @default 100
+     */
+    scrollThreshold?: number;
+    /**
+     * Enable enter/exit animations for messages.
+     * Automatically disabled when the OS prefers reduced motion.
+     * @default true
+     */
+    shouldAnimate?: boolean;
+    /** Theme overrides for the list container and inner wrapper. */
+    theme?: MessageListThemeOverrides;
+}

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

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

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

@@ -14,8 +14,8 @@ export declare const Modal: {
         ({ children, className, ...props }: import("./Modal.types").ModalTitleProps): import("react/jsx-runtime").JSX.Element;
         displayName: string;
     };
-    Description: {
-        ({ children, className, ...props }: import("./Modal.types").ModalDescriptionProps): import("react/jsx-runtime").JSX.Element;
+    Subtitle: {
+        ({ children, className, ...props }: import("./Modal.types").ModalSubtitleProps): import("react/jsx-runtime").JSX.Element;
         displayName: string;
     };
     Body: {

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

@@ -6,7 +6,7 @@ import { modalTheme, modalSizeVariants } from './Modal.theme.js';
 import { modalContentAnimations, modalOverlayAnimations } from './Modal.animations.js';
 import { ModalHeader } from './ModalHeader.js';
 import { ModalTitle } from './ModalTitle.js';
-import { ModalDescription } from './ModalDescription.js';
+import { ModalSubtitle } from './ModalSubtitle.js';
 import { ModalBody } from './ModalBody.js';
 import { ModalFooter } from './ModalFooter.js';
 
@@ -23,7 +23,7 @@ const ModalRoot = ({ isOpen, onClose, size = "md", variant = "default", closeOnO
     // Generate unique IDs for ARIA linkage
     const id = useId();
     const titleId = `${id}-title`;
-    const descriptionId = `${id}-description`;
+    const subtitleId = `${id}-subtitle`;
     // State for tracking if modal body is scrollable
     const [isBodyScrollable, setIsBodyScrollable] = useState(false);
     // Reset scroll state when modal closes
@@ -53,9 +53,9 @@ const ModalRoot = ({ isOpen, onClose, size = "md", variant = "default", closeOnO
         isBodyScrollable,
         setIsBodyScrollable,
         titleId,
-        descriptionId,
+        subtitleId,
     };
-    return (jsx(Overlay, { isOpen: isOpen, onClose: onClose, closeOnOverlayClick: closeOnOverlayClick, closeOnEsc: closeOnEsc, position: "center", role: role, ariaModal: true, ariaLabelledBy: titleId, ariaDescribedBy: descriptionId, contentClassName: cn(theme.container, (_a = theme.containerVariants) === null || _a === void 0 ? void 0 : _a[variant], modalSizeVariants[size], className), animations: {
+    return (jsx(Overlay, { isOpen: isOpen, onClose: onClose, closeOnOverlayClick: closeOnOverlayClick, closeOnEsc: closeOnEsc, position: "center", role: role, ariaModal: true, ariaLabelledBy: titleId, ariaDescribedBy: subtitleId, contentClassName: cn(theme.container, (_a = theme.containerVariants) === null || _a === void 0 ? void 0 : _a[variant], modalSizeVariants[size], className), animations: {
             overlay: modalOverlayAnimations,
             content: modalContentAnimations,
         }, ...props, children: jsx(ModalContext.Provider, { value: contextValue, children: children }) }));
@@ -65,7 +65,7 @@ ModalRoot.displayName = "Modal";
 const Modal = Object.assign(ModalRoot, {
     Header: ModalHeader,
     Title: ModalTitle,
-    Description: ModalDescription,
+    Subtitle: ModalSubtitle,
     Body: ModalBody,
     Footer: ModalFooter,
 });

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

@@ -9,16 +9,16 @@ const modalTheme = {
     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)]",
-    description: "text-sm text-[var(--color-text-secondary)] mt-0.5",
+    subtitle: "text-sm text-[var(--color-text-secondary)] mt-0.5",
     body: "flex-1 overflow-y-auto p-6 pb-3",
     footer: "flex items-center justify-end gap-2 p-6 py-3 border-t border-transparent",
 };
 // Size variants for the modal container
 const modalSizeVariants = {
-    sm: "max-w-sm",
-    md: "max-w-md",
-    lg: "max-w-lg",
-    xl: "max-w-xl",
+    sm: "max-w-sm mx-4 sm:mx-0",
+    md: "max-w-md mx-4 sm:mx-0",
+    lg: "max-w-lg mx-4 sm:mx-0",
+    xl: "max-w-xl mx-4 sm:mx-0",
     full: "max-w-full mx-4",
 };