@flikk/ui 1.0.0-beta.1 → 1.0.0-beta.11

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

@@ -1,2 +1,2 @@
 export { Drawer } from "./Drawer";
-export type { DrawerProps, DrawerPosition, DrawerSize, DrawerThemeOverrides } from "./Drawer.types";
+export type { DrawerProps, DrawerPosition, DrawerSize, DrawerThemeOverrides, DrawerHeaderProps, DrawerTitleProps, DrawerSubtitleProps, DrawerContentProps, DrawerFooterProps, } from "./Drawer.types";

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

@@ -9,7 +9,7 @@ const dropdownTheme = {
     itemDangerStyle: menuItemTheme.dangerStyle,
     itemFocusStyle: menuItemTheme.focusStyle,
     // Section title styling
-    sectionTitleStyle: "px-2 py-1.5 text-xs font-semibold text-[var(--color-text-muted)] uppercase tracking-tight",
+    sectionTitleStyle: "px-2 py-1.5 text-sm font-semibold text-[var(--color-text-muted)] uppercase tracking-tight",
     // Section container styling
     sectionStyle: "py-1",
     // Separator between sections

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

@@ -1,7 +1,7 @@
 import React, { ReactNode } from "react";
 import { DropdownTheme } from "./Dropdown.theme";
 export type DropdownPlacement = "top" | "top-start" | "top-end" | "right" | "right-start" | "right-end" | "bottom" | "bottom-start" | "bottom-end" | "left" | "left-start" | "left-end";
-export type SelectionMode = 'none' | 'single' | 'multiple';
+export type SelectionMode = "none" | "single" | "multiple";
 export interface DropdownContextValue {
     isOpen: boolean;
     onOpenChange: (isOpen: boolean) => void;
@@ -53,14 +53,14 @@ export interface DropdownMenuProps extends React.HTMLAttributes<HTMLDivElement>
     horizontal?: boolean;
     "aria-label"?: string;
 }
-export interface DropdownItemProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'color' | 'onSelect'> {
+export interface DropdownItemProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "color" | "onSelect"> {
     itemKey: string;
     children: ReactNode;
     className?: string;
     startContent?: ReactNode;
     endContent?: ReactNode;
-    description?: string;
-    shortcut?: string;
+    subtitle?: string;
+    shortcut?: ReactNode;
     isDisabled?: boolean;
     isDanger?: boolean;
     onAction?: () => void;

package/dist/components/core/Dropdown/DropdownItem.js

@@ -9,7 +9,7 @@ import { MenuItem } from '../MenuItem/MenuItem.js';
  * DropdownItem component - individual menu item for action menus.
  * Built on shared MenuItem, adds selection mode and Dropdown context integration.
  */
-const DropdownItem = React__default.forwardRef(({ itemKey, children, className, startContent, endContent, description, shortcut, isDisabled = false, isDanger = false, onAction, ...props }, ref) => {
+const DropdownItem = React__default.forwardRef(({ itemKey, children, className, startContent, endContent, subtitle, shortcut, isDisabled = false, isDanger = false, onAction, ...props }, ref) => {
     const { closeOnSelect, onOpenChange, disabledKeys, selectedKeys, selectionMode, onAction: contextOnAction, onSelectionChange, theme, } = useDropdownContext();
     // Check if item is disabled
     const disabled = isDisabled || disabledKeys.has(itemKey);
@@ -63,7 +63,7 @@ const DropdownItem = React__default.forwardRef(({ itemKey, children, className,
     // Build end content: user's endContent OR selection checkmark
     const resolvedEndContent = endContent ||
         (selectionMode !== "none" ? (jsx("div", { className: cn("flex items-center justify-center flex-shrink-0 w-5 h-5"), children: isSelected && (jsx(CheckIcon, { className: "size-4 text-[var(--color-text-secondary)]" })) })) : undefined);
-    return (jsx(MenuItem, { ref: ref, role: itemRole, disabled: disabled, isDanger: isDanger, startContent: startContent, endContent: resolvedEndContent, description: description, shortcut: shortcut, onActivate: handleActivate, "data-selected": isSelected, ...(selectionMode !== "none" ? { "aria-checked": isSelected } : {}), className: className, theme: {
+    return (jsx(MenuItem, { ref: ref, role: itemRole, disabled: disabled, isDanger: isDanger, startContent: startContent, endContent: resolvedEndContent, subtitle: subtitle, shortcut: shortcut, onActivate: handleActivate, "data-selected": isSelected, ...(selectionMode !== "none" ? { "aria-checked": isSelected } : {}), className: className, theme: {
             baseStyle: theme.itemBaseStyle,
             dangerStyle: theme.itemDangerStyle,
             focusStyle: theme.itemFocusStyle,

package/dist/components/core/Dropdown/DropdownMenu.js

@@ -57,6 +57,7 @@ const DropdownMenu = React__default.forwardRef(({ children, className, animation
         placement: placement,
         offset: offset || 4,
         autoWidth: false,
+        stickyTracking: true,
     });
     // Get all menu items (not separators or sections)
     const getMenuItems = useCallback(() => {

package/dist/components/core/Empty/Empty.js

@@ -3,7 +3,7 @@ import React__default from 'react';
 import { emptyTheme } from './Empty.theme.js';
 import { cn } from '../../../utils/cn.js';
 
-const Empty = React__default.forwardRef(({ title, description, image, imageAlt, icon, action, className, children, ...props }, ref) => {
+const Empty = React__default.forwardRef(({ title, subtitle, image, imageAlt, icon, action, className, children, ...props }, ref) => {
     // Fixed image and icon dimensions
     const imageDimensions = "size-32";
     const iconDimensions = "size-16";
@@ -11,7 +11,7 @@ const Empty = React__default.forwardRef(({ title, description, image, imageAlt,
     if (children) {
         return (jsx("div", { ref: ref, className: cn(emptyTheme.baseStyle, className), role: "region", "aria-label": "Empty state", ...props, children: children }));
     }
-    return (jsxs("div", { ref: ref, className: cn(emptyTheme.baseStyle, className), role: "region", "aria-label": "Empty state", ...props, children: [image ? (jsx("div", { className: "flex-shrink-0 mb-6", children: jsx("img", { src: image, alt: imageAlt || "Empty state illustration", className: cn("mx-auto object-cover", imageDimensions), loading: "lazy" }) })) : icon ? (jsx("div", { className: cn("flex-shrink-0 mx-auto text-[var(--color-text-muted)] mb-6", iconDimensions), "aria-hidden": "true", children: icon })) : null, jsxs("div", { className: "flex flex-col items-center justify-center gap-1", children: [title && jsx("div", { className: emptyTheme.titleStyle, children: title }), description && (jsx("div", { className: emptyTheme.descriptionStyle, children: description }))] }), action && (jsx("div", { className: "flex flex-col sm:flex-row gap-2 justify-center items-center mt-3", children: action }))] }));
+    return (jsxs("div", { ref: ref, className: cn(emptyTheme.baseStyle, className), role: "region", "aria-label": "Empty state", ...props, children: [image ? (jsx("div", { className: "flex-shrink-0 mb-6", children: jsx("img", { src: image, alt: imageAlt || "Empty state illustration", className: cn("mx-auto object-cover", imageDimensions), loading: "lazy" }) })) : icon ? (jsx("div", { className: cn("flex-shrink-0 mx-auto text-[var(--color-text-muted)] mb-6", iconDimensions), "aria-hidden": "true", children: icon })) : null, jsxs("div", { className: "flex flex-col items-center justify-center gap-1", children: [title && jsx("div", { className: emptyTheme.titleStyle, children: title }), subtitle && (jsx("div", { className: emptyTheme.subtitleStyle, children: subtitle }))] }), action && (jsx("div", { className: "flex flex-col sm:flex-row gap-2 justify-center items-center mt-3", children: action }))] }));
 });
 // Set display name for dev tools and Storybook
 Empty.displayName = "Empty";

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

@@ -4,7 +4,7 @@
 export interface EmptyTheme {
     baseStyle: string;
     titleStyle: string;
-    descriptionStyle: string;
+    subtitleStyle: string;
 }
 /**
  * Default theme for the Empty component

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

@@ -5,9 +5,9 @@ const emptyTheme = {
     // Base container styles - customizable spacing, colors, and layout
     baseStyle: "flex flex-col items-center justify-center text-center w-full max-w-md mx-auto space-y-3 py-12 px-6 ",
     // Title text styles - customizable typography and colors
-    titleStyle: "text-base font-medium text-[var(--color-text-primary)]",
-    // Description text styles - customizable typography and colors  
-    descriptionStyle: "text-base text-[var(--color-text-secondary)]/70",
+    titleStyle: "text-lg font-semibold text-[var(--color-text-primary)]",
+    // Description text styles - customizable typography and colors
+    subtitleStyle: "text-base text-[var(--color-text-muted)]",
 };
 
 export { emptyTheme };

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

@@ -5,8 +5,8 @@ import React from "react";
 export interface EmptyProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'title'> {
     /** Primary title/heading text */
     title?: React.ReactNode;
-    /** Descriptive text explaining the empty state */
-    description?: React.ReactNode;
+    /** Subtitle text explaining the empty state */
+    subtitle?: React.ReactNode;
     /**
      * Optional image source for illustration
      * Note: If both image and icon are provided, image takes precedence

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

@@ -4,10 +4,10 @@
 const kbdTheme = {
     baseStyle: 'inline-flex items-center justify-center font-sans font-medium rounded-[calc(var(--radius-base)*0.75)]  bg-neutral-100 border border-[var(--color-border)] text-[var(--color-text-secondary)] glass-effect',
     sizes: {
-        sm: 'text-xs px-1 py-0.5 min-w-[1.25rem]',
-        md: 'text-sm px-1.5 py-0.5 min-w-[1.5rem]',
+        sm: 'text-sm px-1 py-0.5 min-w-[1.25rem]',
+        md: 'text-base px-1.5 py-0.5 min-w-[1.5rem]',
     },
-    separatorStyle: 'text-[var(--color-text-muted)] text-xs',
+    separatorStyle: 'text-[var(--color-text-muted)] text-sm',
 };
 
 export { kbdTheme };

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

@@ -1,4 +1,4 @@
 import React from "react";
 import { LinkProps } from "./Link.types";
-declare const Link: React.ForwardRefExoticComponent<Omit<LinkProps, "ref"> & React.RefAttributes<HTMLAnchorElement>>;
+declare const Link: React.ForwardRefExoticComponent<LinkProps & React.RefAttributes<HTMLAnchorElement>>;
 export { Link };

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

@@ -14,7 +14,7 @@ const loaderTheme = {
     // Linear bar (foreground)
     linearBarStyle: "h-full rounded-full transition-all duration-300 ease-out",
     // Label text for linear variant
-    linearLabelStyle: "text-sm font-medium text-[var(--color-text-secondary)] min-w-[3ch] tabular-nums",
+    linearLabelStyle: "text-base font-medium text-[var(--color-text-secondary)] min-w-[3ch] tabular-nums",
     // Size variants for both circular and linear
     sizes: {
         sm: {

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,27 +1,25 @@
 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-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)] " +
         "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)
-    dangerStyle: "text-[var(--color-danger)] hover:bg-[var(--color-danger)] hover:text-white " +
-        "dark:text-[var(--color-danger-400)] dark:hover:bg-[var(--color-danger-600)] dark:hover:text-white",
+    dangerStyle: "text-[var(--color-danger)] hover:bg-[var(--color-danger)] hover:text-[var(--color-danger-contrast)] " +
+        "dark:text-[var(--color-danger-400)] dark:hover:bg-[var(--color-danger-600)] dark:hover:text-[var(--color-danger-contrast)]",
     // 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-sm 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-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, 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-base",
+    timestampStyle: "text-sm 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-sm 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-sm " +
+        "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 };