@flikk/ui 1.0.0-beta.1

package/dist/components/core/Masonry/Masonry.js

@@ -0,0 +1,227 @@
+import { jsx } from 'react/jsx-runtime';
+import React__default, { useRef, useState, useCallback, useEffect } from 'react';
+import { motion, AnimatePresence } from 'motion/react';
+import { cn } from '../../../utils/cn.js';
+import { getMasonryTheme } from './Masonry.theme.js';
+
+const MASONRY_ITEM_INITIAL = { opacity: 0, y: 10 };
+const MASONRY_ITEM_ANIMATE = { opacity: 1, y: 0 };
+const MASONRY_ITEM_EXIT = { opacity: 0, scale: 0.95 };
+const MASONRY_ITEM_TRANSITION_BASE = {
+    duration: 0.4,
+    ease: [0.2, 0.65, 0.3, 0.9],
+};
+const Masonry = React__default.forwardRef(({ children, columns = 3, gap = 16, gapBreakpoints, className, style, minColumns = 1, maxColumns = 10, sequential = false, themeOverrides, loading = false, ...props }, ref) => {
+    const containerRef = useRef(null);
+    const [currentColumns, setCurrentColumns] = useState(typeof columns === 'number' ? columns : 3);
+    const [currentGap, setCurrentGap] = useState(gap);
+    const [containerWidth, setContainerWidth] = useState(0);
+    // Get the theme with any overrides applied
+    const theme = getMasonryTheme(themeOverrides);
+    // Calculate responsive columns and gap
+    const calculateLayout = useCallback(() => {
+        if (!containerRef.current)
+            return;
+        // Use getBoundingClientRect for more accurate width measurement
+        const containerRect = containerRef.current.getBoundingClientRect();
+        const width = Math.floor(containerRect.width);
+        // Only update if width actually changed to prevent unnecessary re-renders
+        if (width !== containerWidth && width > 0) {
+            setContainerWidth(width);
+        }
+        // Handle responsive columns
+        if (typeof columns === 'object') {
+            const breakpoints = Object.keys(columns)
+                .map(Number)
+                .sort((a, b) => a - b);
+            let newColumns = 3; // Default fallback
+            for (const breakpoint of breakpoints) {
+                if (width >= breakpoint) {
+                    newColumns = columns[breakpoint];
+                }
+            }
+            // Ensure columns are within min/max bounds
+            newColumns = Math.min(Math.max(newColumns, minColumns), maxColumns);
+            setCurrentColumns(newColumns);
+        }
+        else {
+            const clampedColumns = Math.min(Math.max(columns, minColumns), maxColumns);
+            setCurrentColumns(clampedColumns);
+        }
+        // Handle responsive gap
+        if (gapBreakpoints) {
+            const gapBreakpointKeys = Object.keys(gapBreakpoints)
+                .map(Number)
+                .sort((a, b) => a - b);
+            let newGap = gap;
+            for (const breakpoint of gapBreakpointKeys) {
+                if (width >= breakpoint) {
+                    newGap = gapBreakpoints[breakpoint];
+                }
+            }
+            setCurrentGap(newGap);
+        }
+        else {
+            setCurrentGap(gap);
+        }
+    }, [columns, gap, gapBreakpoints, minColumns, maxColumns, containerWidth]);
+    // Arrange items in masonry layout
+    const arrangeItems = useCallback(() => {
+        if (!containerRef.current)
+            return;
+        const container = containerRef.current;
+        const wrappers = Array.from(container.children);
+        if (wrappers.length === 0)
+            return;
+        // Get fresh container width to avoid stale closure issues
+        const currentContainerWidth = container.offsetWidth;
+        // Calculate column width
+        const availableWidth = currentContainerWidth - (currentGap * (currentColumns - 1));
+        const columnWidth = Math.floor(availableWidth / currentColumns);
+        if (columnWidth <= 0)
+            return; // Prevent invalid layouts
+        // Initialize column heights
+        const columnHeights = new Array(currentColumns).fill(0);
+        // PHASE 1: READ - Measure all wrapper heights first (prevents layout thrashing)
+        const wrapperHeights = [];
+        wrappers.forEach((wrapper) => {
+            // Temporarily reset positioning to measure natural height
+            const originalPosition = wrapper.style.position;
+            const originalLeft = wrapper.style.left;
+            const originalTop = wrapper.style.top;
+            // Set width and reset positioning for accurate measurement
+            wrapper.style.width = `${columnWidth}px`;
+            wrapper.style.position = 'static';
+            wrapper.style.left = '';
+            wrapper.style.top = '';
+            // Force layout recalculation to get accurate height
+            void wrapper.offsetHeight;
+            const height = wrapper.offsetHeight;
+            wrapperHeights.push(height > 0 ? height : 0);
+            // Restore original positioning (will be overwritten in write phase, but keeps state consistent)
+            wrapper.style.position = originalPosition;
+            wrapper.style.left = originalLeft;
+            wrapper.style.top = originalTop;
+        });
+        // PHASE 2: WRITE - Position all wrappers (batch all DOM writes)
+        wrappers.forEach((wrapper, index) => {
+            // Set positioning styles
+            wrapper.style.position = 'absolute';
+            wrapper.style.width = `${columnWidth}px`;
+            let targetColumn;
+            if (sequential) {
+                // Sequential placement: round-robin distribution
+                targetColumn = index % currentColumns;
+            }
+            else {
+                // Optimal placement: shortest column
+                targetColumn = columnHeights.indexOf(Math.min(...columnHeights));
+            }
+            // Calculate position
+            const left = targetColumn * (columnWidth + currentGap);
+            const top = columnHeights[targetColumn];
+            // Position the wrapper
+            wrapper.style.left = `${left}px`;
+            wrapper.style.top = `${top}px`;
+            // Update column height using pre-measured height
+            const itemHeight = wrapperHeights[index];
+            if (itemHeight > 0) {
+                columnHeights[targetColumn] = top + itemHeight + currentGap;
+            }
+        });
+        // Set final container height after all items are positioned
+        requestAnimationFrame(() => {
+            const maxHeight = Math.max(...columnHeights) - currentGap;
+            container.style.height = `${Math.max(0, maxHeight)}px`;
+        });
+    }, [currentColumns, currentGap, sequential]);
+    // Handle container resize with ResizeObserver for better performance
+    useEffect(() => {
+        if (!containerRef.current)
+            return;
+        let resizeTimeoutId;
+        const resizeObserver = new ResizeObserver((_entries) => {
+            // Debounce resize events to prevent excessive recalculations
+            clearTimeout(resizeTimeoutId);
+            resizeTimeoutId = setTimeout(() => {
+                calculateLayout();
+            }, 100);
+        });
+        // Fallback window resize handler for older browsers
+        const handleWindowResize = () => {
+            clearTimeout(resizeTimeoutId);
+            resizeTimeoutId = setTimeout(() => {
+                calculateLayout();
+            }, 100);
+        };
+        resizeObserver.observe(containerRef.current);
+        window.addEventListener('resize', handleWindowResize);
+        return () => {
+            resizeObserver.disconnect();
+            window.removeEventListener('resize', handleWindowResize);
+            clearTimeout(resizeTimeoutId);
+        };
+    }, [calculateLayout]);
+    // Initial layout calculation and arrangement
+    useEffect(() => {
+        // Wait for next tick to ensure container is mounted and measured
+        const timer = setTimeout(() => {
+            calculateLayout();
+            // Only arrange items if we have a valid container width
+            if (containerWidth > 0) {
+                arrangeItems();
+            }
+        }, 0);
+        return () => clearTimeout(timer);
+    }, [calculateLayout, arrangeItems, children, containerWidth]);
+    // Re-arrange when children change (with debouncing)
+    useEffect(() => {
+        let timeoutId;
+        const observer = new MutationObserver(() => {
+            // Debounce multiple rapid changes
+            clearTimeout(timeoutId);
+            timeoutId = setTimeout(() => {
+                arrangeItems();
+            }, 10);
+        });
+        if (containerRef.current) {
+            observer.observe(containerRef.current, {
+                childList: true,
+                subtree: false, // Only watch direct children, not nested changes
+            });
+        }
+        return () => {
+            observer.disconnect();
+            clearTimeout(timeoutId);
+        };
+    }, [arrangeItems]);
+    // Generate container classes
+    const containerClasses = cn(theme.container.base, loading && theme.container.loading, className);
+    // Wrap each child in a positioning div with theme styles
+    const wrappedChildren = React__default.Children.map(children, (child, index) => {
+        if (!React__default.isValidElement(child)) {
+            return child;
+        }
+        const wrapperClasses = cn(theme.item.base, theme.animations.transition);
+        return (jsx(motion.div, { className: wrapperClasses, "data-masonry-item": true, initial: MASONRY_ITEM_INITIAL, animate: MASONRY_ITEM_ANIMATE, exit: MASONRY_ITEM_EXIT, transition: {
+                ...MASONRY_ITEM_TRANSITION_BASE,
+                delay: index * 0.05,
+            }, children: child }, child.key || index));
+    });
+    return (jsx("div", { ref: (node) => {
+            containerRef.current = node;
+            if (typeof ref === 'function') {
+                ref(node);
+            }
+            else if (ref) {
+                ref.current = node;
+            }
+        }, className: containerClasses, style: {
+            ...style,
+            // Ensure container has minimum dimensions for proper layout calculation
+            minHeight: loading ? '200px' : undefined,
+        }, ...props, children: jsx(AnimatePresence, { mode: "popLayout", children: wrappedChildren }) }));
+});
+Masonry.displayName = 'Masonry';
+
+export { Masonry };

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

@@ -0,0 +1,9 @@
+import { MasonryTheme, MasonryThemeOverrides } from './Masonry.types';
+/**
+ * Default theme for the Masonry component
+ */
+export declare const masonryTheme: MasonryTheme;
+/**
+ * Apply theme overrides to the default theme
+ */
+export declare const getMasonryTheme: (overrides?: MasonryThemeOverrides) => MasonryTheme;

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

@@ -0,0 +1,34 @@
+/**
+ * Default theme for the Masonry component
+ */
+const masonryTheme = {
+    // Container styles
+    container: {
+        base: "relative w-full overflow-hidden",
+        loading: "opacity-70 pointer-events-none",
+    },
+    // Item wrapper styles (auto-applied to each child wrapper)
+    item: {
+        base: "relative rounded-[var(--form-radius)] border border-[var(--color-border)] overflow-hidden",
+    },
+    // Animation classes
+    animations: {
+        transition: "transition-[left,top,width,height] duration-400 ease-in-out",
+        enter: "opacity-0 scale-95",
+        exit: "opacity-100 scale-100",
+    },
+};
+/**
+ * Apply theme overrides to the default theme
+ */
+const getMasonryTheme = (overrides) => {
+    if (!overrides)
+        return masonryTheme;
+    return {
+        container: { ...masonryTheme.container, ...overrides.container },
+        item: { ...masonryTheme.item, ...overrides.item },
+        animations: { ...masonryTheme.animations, ...overrides.animations },
+    };
+};
+
+export { getMasonryTheme, masonryTheme };

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

@@ -0,0 +1,49 @@
+import React from "react";
+/**
+ * Theme configuration for the Masonry component
+ */
+export interface MasonryTheme {
+    container: {
+        base: string;
+        loading: string;
+    };
+    item: {
+        base: string;
+    };
+    animations: {
+        transition: string;
+        enter: string;
+        exit: string;
+    };
+}
+/**
+ * Masonry theme overrides interface for customization
+ */
+export interface MasonryThemeOverrides {
+    container?: Partial<MasonryTheme['container']>;
+    item?: Partial<MasonryTheme['item']>;
+    animations?: Partial<MasonryTheme['animations']>;
+}
+/**
+ * Masonry component props
+ */
+export interface MasonryProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Children elements to be arranged in masonry layout */
+    children: React.ReactNode;
+    /** Number of columns (static) or breakpoint configuration (responsive) */
+    columns?: number | Record<number, number>;
+    /** Gap between items in pixels */
+    gap?: number;
+    /** Gap configuration for different breakpoints */
+    gapBreakpoints?: Record<number, number>;
+    /** Minimum columns count */
+    minColumns?: number;
+    /** Maximum columns count */
+    maxColumns?: number;
+    /** Enable sequential placement (items placed in order vs optimal placement) */
+    sequential?: boolean;
+    /** Theme overrides for customizing appearance */
+    themeOverrides?: MasonryThemeOverrides;
+    /** Loading state */
+    loading?: boolean;
+}

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

@@ -0,0 +1,3 @@
+export { Masonry } from './Masonry';
+export { masonryTheme, getMasonryTheme } from './Masonry.theme';
+export type { MasonryProps, MasonryThemeOverrides, MasonryTheme } from './Masonry.types';

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

@@ -0,0 +1,9 @@
+import React from "react";
+import { MenuItemProps } from "./MenuItem.types";
+/**
+ * MenuItem - Shared base component for menu items used by Dropdown and ContextMenu.
+ *
+ * Handles visual layout, base styling, keyboard activation, and focus tracking.
+ * Context-specific behavior (selection, checked state) is handled by consumers.
+ */
+export declare const MenuItem: React.ForwardRefExoticComponent<MenuItemProps & React.RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1,33 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import React__default, { useState, useCallback } from 'react';
+import { cn } from '../../../utils/cn.js';
+import { menuItemTheme } from './MenuItem.theme.js';
+
+/**
+ * MenuItem - Shared base component for menu items used by Dropdown and ContextMenu.
+ *
+ * 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 [isFocused, setIsFocused] = useState(false);
+    const theme = {
+        ...menuItemTheme,
+        ...themeOverrides,
+    };
+    const handleClick = useCallback(() => {
+        if (disabled)
+            return;
+        onActivate === null || onActivate === void 0 ? void 0 : onActivate();
+    }, [disabled, onActivate]);
+    const handleKeyDown = useCallback((e) => {
+        if (e.key === "Enter" || e.key === " ") {
+            e.preventDefault();
+            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 }))] }));
+});
+MenuItem.displayName = "MenuItem";
+
+export { MenuItem };

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

@@ -0,0 +1,8 @@
+export interface MenuItemTheme {
+    baseStyle: string;
+    dangerStyle: string;
+    focusStyle: string;
+    shortcutStyle: string;
+    descriptionStyle: string;
+}
+export declare const menuItemTheme: MenuItemTheme;

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

@@ -0,0 +1,27 @@
+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)] " +
+        "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: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",
+    // 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",
+};
+
+export { menuItemTheme };

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

@@ -0,0 +1,24 @@
+import { ReactNode } from "react";
+import { MenuItemTheme } from "./MenuItem.theme";
+export interface MenuItemProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "onSelect"> {
+    /** Main label content */
+    children: ReactNode;
+    /** Override classes (highest priority, shadcn pattern) */
+    className?: string;
+    /** Icon or element at the start (left side) */
+    startContent?: ReactNode;
+    /** Icon or element at the end (right side) */
+    endContent?: ReactNode;
+    /** Secondary text below the label */
+    description?: string;
+    /** Keyboard shortcut display */
+    shortcut?: ReactNode;
+    /** Whether the item is disabled */
+    disabled?: boolean;
+    /** Whether the item has danger/destructive styling */
+    isDanger?: boolean;
+    /** Called on click or Enter/Space keyboard activation */
+    onActivate?: () => void;
+    /** Theme overrides for styling */
+    theme?: Partial<MenuItemTheme>;
+}

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

@@ -0,0 +1,4 @@
+export { MenuItem } from "./MenuItem";
+export type { MenuItemProps } from "./MenuItem.types";
+export { menuItemTheme } from "./MenuItem.theme";
+export type { MenuItemTheme } from "./MenuItem.theme";

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

@@ -0,0 +1,8 @@
+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>>;
+};

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

@@ -0,0 +1,109 @@
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import React__default, { useMemo } from 'react';
+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 { motion } from 'motion/react';
+import { DocumentDuplicateIcon, ArrowPathIcon } from '@heroicons/react/24/outline';
+import { MessageContext } from './MessageContext.js';
+import { MessageAvatar } from './MessageAvatar.js';
+import { MessageContent } from './MessageContent.js';
+import { MessageActions } from './MessageActions.js';
+import { MessageTimestamp } from './MessageTimestamp.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: {
+                                duration: 1.5,
+                                repeat: Infinity,
+                                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;
+    }
+    // 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'
+                        ? 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) => {
+    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';
+    }
+    else {
+        // Use variant prop or default
+        variant = variantProp || 'receiver';
+    }
+    // Detect if using compound API (has children)
+    const isCompoundAPI = !!children;
+    // Context value for compound components
+    const contextValue = useMemo(() => ({
+        role,
+        variant,
+        isStreaming,
+        typingSpeed,
+    }), [role, variant, isStreaming, typingSpeed]);
+    // Resolve content (support deprecated 'message' prop)
+    const messageContent = content !== null && content !== void 0 ? content : message;
+    // Determine if we should show default actions
+    const shouldShowDefaultActions = showActions !== false &&
+        (variant === 'receiver' || role === 'assistant') &&
+        (onCopy || onRegenerate);
+    if (isCompoundAPI) {
+        // Compound API - Render with context
+        const variantTheme = messageTheme.variants[variant];
+        // 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 }) }) }));
+    }
+    // Props API - Render inline
+    // Get variant-specific theme
+    const variantTheme = messageTheme.variants[variant];
+    // 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);
+    // 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);
+    // 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);
+    // 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;
+    // 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') &&
+        isStreaming &&
+        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" })] }) }));
+    }
+    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';
+// Attach compound components
+const Message = Object.assign(MessageRoot, {
+    Avatar: MessageAvatar,
+    Content: MessageContent,
+    Actions: MessageActions,
+    Timestamp: MessageTimestamp,
+});
+
+export { Message };

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

@@ -0,0 +1,6 @@
+import { MessageTheme } from './Message.types';
+/**
+ * Unified Message theme with shared base styles + variant-specific modifiers
+ * Based on ChatMessage theme with additional action button styles
+ */
+export declare const messageTheme: MessageTheme;

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

@@ -0,0 +1,46 @@
+/**
+ * Unified Message theme with shared base styles + variant-specific modifiers
+ * Based on ChatMessage theme with additional action button styles
+ */
+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)]',
+    // 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)] ' +
+                // 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',
+        },
+        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)] ' +
+                // 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',
+        },
+        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 ' +
+                // Dark mode
+                'dark:bg-[var(--color-neutral-800)] dark:text-[var(--color-neutral-400)]',
+            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)]',
+};
+
+export { messageTheme };