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

package/dist/components/core/CommandPalette/CommandItem.js

@@ -126,7 +126,7 @@ const CommandItem = ({ command, index, isHighlighted, contentStart, contentEnd,
         }
         return null;
     };
-    return (jsxs("div", { "data-command-index": index, "data-highlighted": isHighlighted, "data-disabled": command.disabled || false, className: cn(theme.commandItem, className), onClick: handleClick, onMouseEnter: handleMouseEnter, children: [finalContentStart && (jsx("div", { className: "flex-shrink-0", children: finalContentStart })), jsxs("div", { className: "flex-1 min-w-0", children: [jsx("div", { className: "text-base  truncate", children: command.label }), command.subtitle && (jsx("div", { className: "text-base opacity-70 truncate mt-0", children: command.subtitle }))] }), renderContentEnd()] }));
+    return (jsxs("div", { "data-command-index": index, "data-highlighted": isHighlighted, "data-disabled": command.disabled || false, className: cn(theme.commandItem, className), role: "option", "aria-selected": isHighlighted, "aria-disabled": command.disabled || false, onClick: handleClick, onMouseEnter: handleMouseEnter, children: [finalContentStart && (jsx("div", { className: "flex-shrink-0", children: finalContentStart })), jsxs("div", { className: "flex-1 min-w-0", children: [jsx("div", { className: "text-base  truncate", children: command.label }), command.subtitle && (jsx("div", { className: "text-base opacity-70 truncate mt-0", children: command.subtitle }))] }), renderContentEnd()] }));
 };
 
 export { CommandItem };

package/dist/components/core/CommandPalette/CommandPalette.js

@@ -6,6 +6,8 @@ import { cn } from '../../../utils/cn.js';
 import { MagnifyingGlassIcon } from '@heroicons/react/24/outline';
 import { CommandItem } from './CommandItem.js';
 import { Overlay } from '../../effects/Overlay/Overlay.js';
+import { ScrollArea } from '../ScrollArea/ScrollArea.js';
+import '../ScrollArea/smooth/SmoothScrollEngine.js';
 
 /**
  * Default filter function for commands
@@ -77,7 +79,7 @@ const groupCommandsByCategory = (commands) => {
  * />
  * ```
  */
-const CommandPalette = React__default.forwardRef(({ isOpen, onClose, commands = [], placeholder = "Type a command or search...", emptyMessage = "No results found.", maxHeight = "400px", className = "", overlayClassName = "", theme: themeOverrides, grouped = false, onSearchChange, filterFunction = defaultFilterFunction, closeOnOverlayClick = true, closeOnEsc = true, }, ref) => {
+const CommandPalette = React__default.forwardRef(({ isOpen, onClose, commands = [], placeholder = "Type a command or search...", emptyMessage = "No results found.", maxHeight = "400px", className = "", overlayClassName = "", theme: themeOverrides, grouped = false, onSearchChange, filterFunction = defaultFilterFunction, closeOnOverlayClick = true, closeOnEsc = true, footer, footerClassName, }, ref) => {
     // Merge theme with overrides
     const theme = useMemo(() => ({ ...commandPaletteTheme, ...(themeOverrides || {}) }), [themeOverrides]);
     // State
@@ -195,7 +197,7 @@ const CommandPalette = React__default.forwardRef(({ isOpen, onClose, commands =
     // Render commands list
     const renderCommandsList = () => {
         if (flatFilteredCommands.length === 0) {
-            return jsx("div", { className: theme.emptyState, children: emptyMessage });
+            return jsx("div", { className: theme.emptyState, "aria-live": "polite", children: emptyMessage });
         }
         // If grouped, render with group labels
         if (isGroupedCommands(displayCommands)) {
@@ -212,9 +214,9 @@ const CommandPalette = React__default.forwardRef(({ isOpen, onClose, commands =
     return (jsxs(Overlay, { ref: ref, isOpen: isOpen, onClose: onClose, closeOnOverlayClick: closeOnOverlayClick, closeOnEsc: closeOnEsc, position: "top", overlayClassName: overlayClassName, contentClassName: cn(theme.container, className), animations: {
             overlay: overlayAnimations,
             content: containerAnimations,
-        }, children: [jsx("div", { className: theme.searchWrapper, children: jsxs("div", { className: "flex items-center gap-3", children: [jsx(MagnifyingGlassIcon, { className: "w-5 h-5 text-[var(--color-text-muted)]", strokeWidth: 2 }), jsx("input", { ref: searchInputRef, type: "text", className: theme.searchInput, placeholder: placeholder, value: searchValue, onChange: handleSearchChange, autoComplete: "off", autoCorrect: "off", spellCheck: false })] }) }), jsx("div", { ref: listContainerRef, className: "overflow-y-auto overscroll-contain px-1", style: {
+        }, children: [jsx("div", { className: theme.searchWrapper, children: jsxs("div", { className: "flex items-center gap-3", children: [jsx(MagnifyingGlassIcon, { className: "w-5 h-5 text-[var(--color-text-muted)]", strokeWidth: 2 }), jsx("input", { ref: searchInputRef, type: "text", className: theme.searchInput, placeholder: placeholder, value: searchValue, onChange: handleSearchChange, autoComplete: "off", autoCorrect: "off", spellCheck: false, "aria-label": "Search commands" })] }) }), jsx(ScrollArea, { ref: listContainerRef, type: "hover", className: "overscroll-contain px-1", style: {
                     maxHeight: typeof maxHeight === "number" ? `${maxHeight}px` : maxHeight,
-                }, children: renderCommandsList() })] }));
+                }, children: jsx("div", { role: "listbox", "aria-label": "Commands", children: renderCommandsList() }) }), footer && (jsx("div", { className: cn(theme.footer, footerClassName), children: footer }))] }));
 });
 CommandPalette.displayName = "CommandPalette";
 

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

@@ -25,6 +25,7 @@ const commandPaletteTheme = {
         "dark:data-[highlighted=true]:bg-[var(--color-primary-600)]",
     emptyState: "px-4 py-12 text-center text-base text-[var(--color-text-muted)] " +
         "dark:text-[var(--color-neutral-500)]",
+    footer: "border-t border-[var(--color-border)] px-4 py-2 text-sm text-[var(--color-text-muted)]font-medium",
 };
 
 export { commandPaletteTheme };

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

@@ -67,6 +67,10 @@ export interface CommandPaletteProps {
     closeOnOverlayClick?: boolean;
     /** Whether pressing Escape should close the palette (default: true) */
     closeOnEsc?: boolean;
+    /** Footer content rendered below the command list (e.g., keyboard hints) */
+    footer?: React.ReactNode;
+    /** Additional class name for the footer */
+    footerClassName?: string;
 }
 /**
  * Theme overrides for the CommandPalette component
@@ -86,4 +90,6 @@ export interface CommandPaletteThemeOverrides {
     commandItem?: string;
     /** Style for empty state */
     emptyState?: string;
+    /** Style for the footer area */
+    footer?: string;
 }

package/dist/components/core/ContextMenu/ContextMenu.js

@@ -39,11 +39,12 @@ const ContextMenuRoot = ({ children, className, onOpenChange, theme: themeOverri
     const handleOpenChange = useCallback((value) => {
         setIsOpen(value);
         onOpenChange === null || onOpenChange === void 0 ? void 0 : onOpenChange(value);
-        // Get cursor position from trigger element when opening
+        // Get cursor position from trigger element data attributes when opening
         if (value && triggerRef.current) {
-            const storedPosition = triggerRef.current.__cursorPosition;
-            if (storedPosition) {
-                setCursorPosition(storedPosition);
+            const x = triggerRef.current.dataset.cursorX;
+            const y = triggerRef.current.dataset.cursorY;
+            if (x && y) {
+                setCursorPosition({ x: Number(x), y: Number(y) });
             }
         }
     }, [onOpenChange]);

package/dist/components/core/ContextMenu/ContextMenuTrigger.js

@@ -14,11 +14,10 @@ const ContextMenuTrigger = React__default.forwardRef(({ children, className, dis
         // Prevent default browser context menu
         e.preventDefault();
         e.stopPropagation();
-        // Store cursor position BEFORE opening menu
-        e.currentTarget.__cursorPosition = {
-            x: e.clientX,
-            y: e.clientY,
-        };
+        // Store cursor position on trigger element via data attributes
+        const target = e.currentTarget;
+        target.dataset.cursorX = String(e.clientX);
+        target.dataset.cursorY = String(e.clientY);
         // Now open the menu with position available
         onOpenChange(true);
     }, [disabled, onOpenChange]);
@@ -44,6 +43,6 @@ const ContextMenuTrigger = React__default.forwardRef(({ children, className, dis
         "data-disabled": disabled,
     });
 });
-ContextMenuTrigger.displayName = "ContextMenuTrigger";
+ContextMenuTrigger.displayName = "ContextMenu.Trigger";
 
 export { ContextMenuTrigger };

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

@@ -1,7 +1,7 @@
 import { DrawerProps, DrawerContextValue } from "./Drawer.types";
 export declare const useDrawerContext: () => DrawerContextValue;
 export declare const Drawer: {
-    ({ isOpen, onClose, title, subtitle, icon, position, size, closeOnOverlayClick, closeOnEsc, showCloseButton, children, className, theme: themeOverrides, scale, ...props }: DrawerProps): import("react/jsx-runtime").JSX.Element;
+    ({ isOpen, onClose, title, subtitle, icon, position, size, closeOnOverlayClick, closeOnEsc, showCloseButton, children, className, theme: themeOverrides, scale, closeOnBack, ...props }: DrawerProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 } & {
     Header: {

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

@@ -1,5 +1,5 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
-import React__default, { createContext, useId, useMemo, useContext } from 'react';
+import React__default, { createContext, useId, useMemo, useRef, useEffect, useContext } from 'react';
 import { cn } from '../../../utils/cn.js';
 import { useScaleBackground } from '../../../hooks/useScaleBackground.js';
 import { Overlay } from '../../effects/Overlay/Overlay.js';
@@ -11,6 +11,27 @@ import { DrawerSubtitle } from './DrawerSubtitle.js';
 import { DrawerBody } from './DrawerBody.js';
 import { DrawerFooter } from './DrawerFooter.js';
 
+/** Manages browser history so the back button closes the drawer instead of navigating. */
+function useCloseOnBack(isOpen, onClose, enabled) {
+    const closedByPopstate = useRef(false);
+    useEffect(() => {
+        if (!enabled || !isOpen)
+            return;
+        closedByPopstate.current = false;
+        history.pushState({ flikDrawer: true }, "");
+        const handlePopstate = () => {
+            closedByPopstate.current = true;
+            onClose();
+        };
+        window.addEventListener("popstate", handlePopstate);
+        return () => {
+            window.removeEventListener("popstate", handlePopstate);
+            if (!closedByPopstate.current) {
+                history.back();
+            }
+        };
+    }, [isOpen, onClose, enabled]);
+}
 // Create context for Drawer components
 const DrawerContext = createContext(undefined);
 const useDrawerContext = () => {
@@ -19,7 +40,9 @@ const useDrawerContext = () => {
         throw new Error("Drawer compound components must be used within <Drawer>");
     return ctx;
 };
-const DrawerRoot = ({ isOpen, onClose, title, subtitle, icon, position = "right", size = "md", closeOnOverlayClick = true, closeOnEsc = true, showCloseButton = true, children, className, theme: themeOverrides, scale = 0.94, ...props }) => {
+const DrawerRoot = ({ isOpen, onClose, title, subtitle, icon, position = "right", size = "md", closeOnOverlayClick = true, closeOnEsc = true, showCloseButton = true, children, className, theme: themeOverrides, scale = 0.94, closeOnBack = false, ...props }) => {
+    // Close drawer on browser back button
+    useCloseOnBack(isOpen, onClose, closeOnBack);
     // iOS-style scale background effect
     useScaleBackground({ isOpen, scale, position });
     // Generate unique IDs for ARIA linkage

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

@@ -11,8 +11,8 @@ const drawerTheme = {
     title: "text-lg font-semibold leading-6 text-[var(--color-text-primary)]",
     subtitle: "text-base text-[var(--color-text-secondary)] mt-0.5",
     body: "flex-1 overflow-y-auto p-4",
-    footer: "flex items-center justify-end gap-3 p-4 border-t border-[var(--color-border)] shrink-0 " +
-        "dark:border-[var(--color-border)]",
+    footer: "flex items-center justify-end gap-3 p-4 py-3 border-t border-[var(--color-border)] shrink-0 " +
+        "",
 };
 // Position variants with margin support
 const drawerPositionVariantsWithMargin = {

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

@@ -62,6 +62,12 @@ export interface DrawerProps extends Omit<React.HTMLAttributes<HTMLDivElement>,
      * @default 0.94
      */
     scale?: number;
+    /**
+     * When enabled, pressing the browser back button closes the drawer
+     * instead of navigating away. Useful for mobile-like UX.
+     * @default false
+     */
+    closeOnBack?: boolean;
 }
 export interface DrawerHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
     children: React.ReactNode;

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

@@ -5,7 +5,7 @@ export declare const Dropdown: {
     displayName: string;
 } & {
     Trigger: {
-        ({ children, className }: import("./Dropdown.types").DropdownTriggerProps): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
+        ({ children, className }: import("./Dropdown.types").DropdownTriggerProps): React.ReactElement<import("./DropdownTrigger").TriggerChildProps, string | React.JSXElementConstructor<any>>;
         displayName: string;
     };
     Menu: React.ForwardRefExoticComponent<import("./Dropdown.types").DropdownMenuProps & React.RefAttributes<HTMLDivElement>>;

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

@@ -1,5 +1,5 @@
 import { jsx } from 'react/jsx-runtime';
-import { useState, useRef, useCallback } from 'react';
+import { useState, useRef, useId, useCallback } from 'react';
 import { cn } from '../../../utils/cn.js';
 import { DropdownContext } from './DropdownContext.js';
 import { DropdownTrigger } from './DropdownTrigger.js';
@@ -41,6 +41,9 @@ const DropdownRoot = ({ children, className, isOpen: controlledIsOpen, defaultIs
     // Refs for positioning
     const triggerRef = useRef(null);
     const menuRef = useRef(null);
+    // Generate a stable menu ID for aria-controls
+    const generatedMenuId = useId();
+    const menuId = `dropdown-menu-${generatedMenuId}`;
     // Handle open state changes
     const handleOpenChange = useCallback((value) => {
         if (!isControlledOpen) {
@@ -68,6 +71,7 @@ const DropdownRoot = ({ children, className, isOpen: controlledIsOpen, defaultIs
         onOpenChange: handleOpenChange,
         triggerRef,
         menuRef,
+        menuId,
         placement,
         offset,
         closeOnSelect,

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

@@ -7,6 +7,7 @@ export interface DropdownContextValue {
     onOpenChange: (isOpen: boolean) => void;
     triggerRef: React.RefObject<HTMLElement | null>;
     menuRef: React.RefObject<HTMLDivElement | null>;
+    menuId: string;
     placement: DropdownPlacement;
     offset: number;
     closeOnSelect: boolean;

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

@@ -69,6 +69,6 @@ const DropdownItem = React__default.forwardRef(({ itemKey, children, className,
             focusStyle: theme.itemFocusStyle,
         }, ...props, children: children }));
 });
-DropdownItem.displayName = "DropdownItem";
+DropdownItem.displayName = "Dropdown.Item";
 
 export { DropdownItem };

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

@@ -41,7 +41,7 @@ const useDarkMode = () => {
  * DropdownMenu component - renders the menu with keyboard navigation
  */
 const DropdownMenu = React__default.forwardRef(({ children, className, animation = true, portal = true, horizontal = false, "aria-label": ariaLabel, ...props }, ref) => {
-    const { isOpen, onOpenChange, triggerRef, menuRef, placement, offset, theme, } = useDropdownContext();
+    const { isOpen, onOpenChange, triggerRef, menuRef, menuId, placement, offset, theme, } = useDropdownContext();
     // Detect dark mode for portal content
     const isDarkMode = useDarkMode();
     const isClient = useIsClient();
@@ -54,7 +54,7 @@ const DropdownMenu = React__default.forwardRef(({ children, className, animation
     const { position, cssVariables, contentRef: portalContentRef, } = useSelectPortal({
         triggerRef,
         isOpen: isOpen || false,
-        placement: placement,
+        placement,
         offset: offset || 4,
         autoWidth: false,
         stickyTracking: true,
@@ -208,7 +208,7 @@ const DropdownMenu = React__default.forwardRef(({ children, className, animation
                 ...cssVariables,
                 top: `${position.top}px`,
                 left: `${position.left}px`,
-            }, role: "menu", "aria-label": ariaLabel || "Menu", "aria-orientation": horizontal ? "horizontal" : "vertical", tabIndex: -1, onKeyDown: handleKeyDown, variants: shouldReduceMotion || !animation ? {} : menuVariants, initial: shouldReduceMotion || !animation ? undefined : "hidden", animate: shouldReduceMotion || !animation ? undefined : "visible", exit: shouldReduceMotion || !animation ? undefined : "exit", transition: shouldReduceMotion || !animation
+            }, id: menuId, role: "menu", "aria-label": ariaLabel || "Menu", "aria-orientation": horizontal ? "horizontal" : "vertical", tabIndex: -1, onKeyDown: handleKeyDown, variants: shouldReduceMotion || !animation ? {} : menuVariants, initial: shouldReduceMotion || !animation ? undefined : "hidden", animate: shouldReduceMotion || !animation ? undefined : "visible", exit: shouldReduceMotion || !animation ? undefined : "exit", transition: shouldReduceMotion || !animation
                 ? { duration: 0 }
                 : {
                     type: "spring",
@@ -221,6 +221,6 @@ const DropdownMenu = React__default.forwardRef(({ children, className, animation
     }
     return menuContent;
 });
-DropdownMenu.displayName = "DropdownMenu";
+DropdownMenu.displayName = "Dropdown.Menu";
 
 export { DropdownMenu };

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

@@ -12,6 +12,6 @@ const DropdownSection = React__default.forwardRef(({ children, className, title,
                         ? jsx("div", { className: theme.sectionTitleStyle, role: "presentation", children: title })
                         : title), children] })] }));
 });
-DropdownSection.displayName = "DropdownSection";
+DropdownSection.displayName = "Dropdown.Section";
 
 export { DropdownSection };

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

@@ -10,6 +10,6 @@ const DropdownSeparator = React__default.forwardRef(({ className, ...props }, re
     const { theme } = useDropdownContext();
     return (jsx("div", { ref: ref, role: "separator", className: cn(theme.separatorStyle, className), ...props }));
 });
-DropdownSeparator.displayName = "DropdownSeparator";
+DropdownSeparator.displayName = "Dropdown.Separator";
 
 export { DropdownSeparator };

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

@@ -1,9 +1,14 @@
 import React from "react";
 import { DropdownTriggerProps } from "./Dropdown.types";
+export interface TriggerChildProps {
+    className?: string;
+    onClick?: (e: React.MouseEvent) => void;
+    ref?: React.Ref<HTMLElement>;
+}
 /**
  * DropdownTrigger component - wraps the trigger element
  */
 export declare const DropdownTrigger: {
-    ({ children, className }: DropdownTriggerProps): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
+    ({ children, className }: DropdownTriggerProps): React.ReactElement<TriggerChildProps, string | React.JSXElementConstructor<any>>;
     displayName: string;
 };

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

@@ -6,16 +6,17 @@ import { useDropdownContext } from './DropdownContext.js';
  */
 const DropdownTrigger = ({ children, className }) => {
     var _a;
-    const { isOpen, onOpenChange, triggerRef } = useDropdownContext();
+    const { isOpen, onOpenChange, triggerRef, menuId } = useDropdownContext();
     const handleClick = useCallback(() => {
         onOpenChange(!isOpen);
     }, [isOpen, onOpenChange]);
+    const childElement = children;
     // Clone the child element and add our props
-    const trigger = React__default.cloneElement(children, {
+    const trigger = React__default.cloneElement(childElement, {
         ref: (el) => {
             triggerRef.current = el;
             // Preserve any existing ref from the child
-            const childRef = children.ref;
+            const childRef = childElement.ref;
             if (typeof childRef === "function") {
                 childRef(el);
             }
@@ -24,21 +25,22 @@ const DropdownTrigger = ({ children, className }) => {
             }
         },
         onClick: (e) => {
+            var _a;
             // Call our handler
             handleClick();
             // Preserve any existing onClick from the child
-            const childProps = children.props;
-            if (childProps === null || childProps === void 0 ? void 0 : childProps.onClick) {
-                childProps.onClick(e);
+            if ((_a = childElement.props) === null || _a === void 0 ? void 0 : _a.onClick) {
+                childElement.props.onClick(e);
             }
         },
         "aria-expanded": isOpen,
         "aria-haspopup": "menu",
+        "aria-controls": isOpen ? menuId : undefined,
         "data-state": isOpen ? "open" : "closed",
-        className: className || ((_a = children.props) === null || _a === void 0 ? void 0 : _a.className),
+        className: className || ((_a = childElement.props) === null || _a === void 0 ? void 0 : _a.className),
     });
     return trigger;
 };
-DropdownTrigger.displayName = "DropdownTrigger";
+DropdownTrigger.displayName = "Dropdown.Trigger";
 
 export { DropdownTrigger };

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

@@ -2,10 +2,10 @@
  * Default theme configuration for Kbd component
  */
 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',
+    baseStyle: 'inline-flex items-center justify-center leading-none font-sans font-medium rounded-[calc(var(--radius-base)*0.75)] bg-[var(--color-background-secondary)] border border-[var(--color-border)] text-[var(--color-text-secondary)] glass-effect',
     sizes: {
-        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]',
+        sm: 'text-xs px-1 min-w-5 h-5',
+        md: 'text-sm px-1.5 min-w-6 h-6',
     },
     separatorStyle: 'text-[var(--color-text-muted)] text-sm',
 };

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

@@ -4,7 +4,9 @@ import { useReducedMotion, motion } from 'motion/react';
 import { buttonTheme } from '../Button/Button.theme.js';
 import { cn } from '../../../utils/cn.js';
 
-const Link = React__default.forwardRef(({ children, className = "", size = "inherit", disabled = false, href, ...props }, ref) => {
+const Link = React__default.forwardRef(({ children, className = "", size = "inherit", disabled = false, href, 
+// Destructure motion-conflicting props to avoid type issues
+onAnimationStart: _onAnimationStart, onAnimationEnd: _onAnimationEnd, onDrag: _onDrag, onDragStart: _onDragStart, onDragEnd: _onDragEnd, ...props }, ref) => {
     const shouldReduceMotion = useReducedMotion();
     const color = "primary"; // Default to primary, can be overridden by className
     // A link is essentially a button with variant="link"

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

@@ -6,4 +6,13 @@ export declare const Message: React.ForwardRefExoticComponent<MessageProps & Rea
     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>>;
+    Status: React.FC<import("./MessageStatusIndicator").MessageStatusIndicatorProps>;
+    SenderName: React.FC<import("./MessageSenderName").MessageSenderNameProps>;
+    File: React.FC<import("./MessageFile").MessageFileProps>;
+    Image: React.FC<import("./MessageImage").MessageImageProps>;
+    Audio: React.FC<import("./MessageAudio").MessageAudioProps>;
+    Link: React.FC<import("./MessageLink").MessageLinkProps>;
+    Reply: React.FC<import("./MessageReply").MessageReplyProps>;
+    Reactions: React.FC<import("./MessageReactions").MessageReactionsProps>;
+    DateDivider: React.FC<import("./MessageDateDivider").MessageDateDividerProps>;
 };

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

@@ -14,6 +14,15 @@ import { MessageActions } from './MessageActions.js';
 import { MessageTimestamp } from './MessageTimestamp.js';
 import { MessageList } from './MessageList.js';
 import { TypeWriter } from './TypeWriter.js';
+import { MessageStatusIndicator } from './MessageStatusIndicator.js';
+import { MessageSenderName } from './MessageSenderName.js';
+import { MessageFile } from './MessageFile.js';
+import { MessageImage } from './MessageImage.js';
+import { MessageAudio } from './MessageAudio.js';
+import { MessageLink } from './MessageLink.js';
+import { MessageReply } from './MessageReply.js';
+import { MessageReactions } from './MessageReactions.js';
+import { MessageDateDivider } from './MessageDateDivider.js';
 
 const MessageFooter = ({ isStreaming, streamingIndicator, showTimestamp, timestamp, actions, timestampStyle, streamingIndicatorStyle, actionsContainerStyle, variant, }) => {
     if (isStreaming) {
@@ -32,7 +41,26 @@ const MessageFooter = ({ isStreaming, streamingIndicator, showTimestamp, timesta
                         ? 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, timestamp, avatar, showTimestamp = false, isStreaming = false, streamingIndicator, typingSpeed = 100, actions, onCopy, onRegenerate, showActions, className, theme: customTheme = {}, children, ...props }, ref) => {
+/**
+ * Renders attachment sub-components based on attachment type
+ */
+const AttachmentsList = ({ attachments, containerClassName }) => {
+    return (jsx("div", { className: cn(messageTheme.attachmentContainerStyle, containerClassName), children: attachments.map((attachment, index) => {
+            switch (attachment.type) {
+                case "file":
+                    return (jsx(MessageFile, { name: attachment.name, url: attachment.url, size: attachment.size }, index));
+                case "image":
+                    return (jsx(MessageImage, { src: attachment.url, thumbnailUrl: attachment.thumbnailUrl, name: attachment.name, size: attachment.size }, index));
+                case "audio":
+                    return (jsx(MessageAudio, { name: attachment.name, duration: attachment.duration }, index));
+                case "link":
+                    return (jsx(MessageLink, { url: attachment.url, thumbnailUrl: attachment.thumbnailUrl, title: attachment.name, description: attachment.description, domain: attachment.domain }, index));
+                default:
+                    return null;
+            }
+        }) }));
+};
+const MessageRoot = React__default.forwardRef(({ role, variant: variantProp, content, timestamp, avatar, showTimestamp = false, isStreaming = false, streamingIndicator, typingSpeed = 100, actions, onCopy, onRegenerate, showActions, status, readAt, onRetry, attachments, reactions, onReactionClick, replyTo, sender, isGrouped, 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;
@@ -57,7 +85,9 @@ const MessageRoot = React__default.forwardRef(({ role, variant: variantProp, con
         variant,
         isStreaming,
         typingSpeed,
-    }), [role, variant, isStreaming, typingSpeed]);
+        status,
+        isGrouped,
+    }), [role, variant, isStreaming, typingSpeed, status, isGrouped]);
     const messageContent = content;
     // Determine if we should show default actions
     const shouldShowDefaultActions = showActions !== false &&
@@ -100,7 +130,9 @@ const MessageRoot = React__default.forwardRef(({ role, variant: variantProp, con
     if (variant === "system") {
         return (jsx("div", { ref: ref, className: cn("w-full max-w-full", className), "data-variant": "system", "data-role": role, ...props, children: jsxs("div", { className: containerStyle, children: [jsx("div", { className: bubbleStyle, children: typeof renderedContent === "string" ? (jsx("p", { className: "text-base", children: renderedContent })) : (renderedContent) }), jsx(MessageFooter, { isStreaming: isStreaming, streamingIndicator: streamingIndicator, showTimestamp: showTimestamp, timestamp: timestamp, actions: undefined, timestampStyle: timestampStyle, streamingIndicatorStyle: cn(messageTheme.streamingIndicatorStyle, customTheme.streamingIndicatorStyle), actionsContainerStyle: undefined, variant: "system" })] }) }));
     }
-    return (jsx("div", { ref: ref, className: cn("w-full max-w-full group", className), "data-variant": variant, "data-role": role, ...props, children: jsxs("div", { className: containerStyle, children: [avatar && (jsx("div", { className: "flex-shrink-0", children: jsx(Avatar, { src: avatar.src, name: avatar.name, fallback: avatar.fallback, size: "xs" }) })), jsxs("div", { className: cn("flex flex-col", variant === "sender" ? "items-end" : "items-start"), children: [jsx("div", { className: bubbleStyle, children: typeof renderedContent === "string" ? (jsx("p", { className: "break-words", children: renderedContent })) : (renderedContent) }), jsx(MessageFooter, { isStreaming: isStreaming, streamingIndicator: streamingIndicator, showTimestamp: showTimestamp, timestamp: timestamp, actions: finalActions, timestampStyle: timestampStyle, streamingIndicatorStyle: cn(messageTheme.streamingIndicatorStyle, customTheme.streamingIndicatorStyle), actionsContainerStyle: cn(messageTheme.actionsContainerStyle, customTheme.actionsContainerStyle), variant: variant })] })] }) }));
+    const showAvatar = avatar && !isGrouped;
+    const showSenderName = (sender === null || sender === void 0 ? void 0 : sender.name) && variant === "receiver" && !isGrouped;
+    return (jsxs("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: [showAvatar ? (jsx("div", { className: "flex-shrink-0", children: jsx(Avatar, { src: avatar.src, name: avatar.name, fallback: avatar.fallback, size: "xs" }) })) : isGrouped && avatar ? (jsx("div", { className: "flex-shrink-0 size-8" })) : null, jsxs("div", { className: cn("flex flex-col", variant === "sender" ? "items-end" : "items-start"), children: [showSenderName && jsx(MessageSenderName, { name: sender.name }), jsxs("div", { className: bubbleStyle, children: [replyTo && (jsx(MessageReply, { name: replyTo.name, content: replyTo.content, avatar: replyTo.avatar })), typeof renderedContent === "string" ? (jsx("p", { className: "break-words", children: renderedContent })) : (renderedContent), attachments && attachments.length > 0 && (jsx(AttachmentsList, { attachments: attachments, containerClassName: customTheme.attachmentContainerStyle }))] }), 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 }), status && variant === "sender" && (jsx(MessageStatusIndicator, { status: status, readAt: readAt, onRetry: onRetry, className: cn(variant === "sender" ? "self-end mr-1" : "self-start ml-1", customTheme.statusStyle) }))] })] }), reactions && reactions.length > 0 && (jsx("div", { className: cn("mt-0.5", avatar && !isGrouped ? "ml-11" : "", variant === "sender" ? "flex justify-end mr-1" : ""), children: jsx(MessageReactions, { reactions: reactions, onReactionClick: onReactionClick, className: customTheme.reactionsContainerStyle }) }))] }));
 });
 MessageRoot.displayName = "Message";
 // Attach compound components
@@ -110,6 +142,15 @@ const Message = Object.assign(MessageRoot, {
     Actions: MessageActions,
     Timestamp: MessageTimestamp,
     List: MessageList,
+    Status: MessageStatusIndicator,
+    SenderName: MessageSenderName,
+    File: MessageFile,
+    Image: MessageImage,
+    Audio: MessageAudio,
+    Link: MessageLink,
+    Reply: MessageReply,
+    Reactions: MessageReactions,
+    DateDivider: MessageDateDivider,
 });
 
 export { Message };

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

@@ -39,6 +39,28 @@ const messageTheme = {
     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",
+    // Status styles
+    statusStyle: "flex items-center gap-1 text-xs mt-1",
+    statusSending: "text-[var(--color-text-placeholder)] animate-pulse",
+    statusSent: "text-[var(--color-text-placeholder)]",
+    statusDelivered: "text-[var(--color-text-placeholder)]",
+    statusRead: "text-[var(--color-primary)]",
+    statusFailed: "text-[var(--color-danger)]",
+    // Attachment styles
+    attachmentContainerStyle: "flex flex-col gap-2 mt-2",
+    fileStyle: "flex items-center gap-3 rounded-lg border border-[var(--color-border)] bg-[var(--color-background-secondary)] px-3 py-2.5 text-sm",
+    imageStyle: "rounded-lg overflow-hidden max-w-xs",
+    audioStyle: "flex items-center gap-3 rounded-lg border border-[var(--color-border)] bg-[var(--color-background-secondary)] px-3 py-2.5 text-sm",
+    linkStyle: "flex flex-col rounded-lg border border-[var(--color-border)] overflow-hidden text-sm max-w-xs",
+    // Reactions styles
+    reactionsContainerStyle: "flex flex-wrap items-center gap-1.5 mt-1.5",
+    reactionPillStyle: "inline-flex items-center gap-1 rounded-full border border-[var(--color-border)] bg-[var(--color-background-secondary)] px-2 py-0.5 text-xs cursor-pointer transition-colors hover:bg-[var(--color-background-tertiary)]",
+    reactionPillActiveStyle: "border-[var(--color-primary-200)] bg-[var(--color-primary-50)] text-[var(--color-primary)]",
+    // Reply/quote styles
+    replyStyle: "border-l-2 border-[var(--color-border)] pl-2.5 mb-2 text-xs text-[var(--color-text-muted)]",
+    // Grouping styles
+    dateDividerStyle: "flex items-center gap-3 text-xs text-[var(--color-text-muted)] select-none",
+    senderNameStyle: "text-xs font-medium text-[var(--color-text-secondary)] mb-1 pl-1",
 };
 
 export { messageTheme };