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

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

@@ -1,20 +1,49 @@
-import { __rest, __assign } from '../../../node_modules/tslib/tslib.es6.js';
+import { __rest, __assign } from '/Users/ggn/Development/ui-flik/node_modules/tslib/tslib.es6.js';
 import React__default, { useRef, useState, useCallback, useEffect } from 'react';
+import { useReducedMotion, AnimatePresence, motion } from 'motion/react';
 import { createPortal } from 'react-dom';
 import { cn } from '../../../utils/cn.js';
 import { useDropdownContext } from './DropdownContext.js';
 import { useClickOutside } from '../../../utils/useClickOutside.js';
 import { useSelectPortal } from '../../../hooks/useSelectPortal.js';
-import { useReducedMotion } from '../../../node_modules/framer-motion/dist/es/utils/reduced-motion/use-reduced-motion.js';
-import { AnimatePresence } from '../../../node_modules/framer-motion/dist/es/components/AnimatePresence/index.js';
-import { motion } from '../../../node_modules/framer-motion/dist/es/render/components/motion/proxy.js';
 
+/**
+ * Hook to detect dark mode state from document
+ */
+var useDarkMode = function () {
+    var _a = useState(false), isDark = _a[0], setIsDark = _a[1];
+    useEffect(function () {
+        if (typeof document === "undefined")
+            return;
+        var checkDarkMode = function () {
+            var hasDarkClass = document.documentElement.classList.contains("dark") ||
+                document.body.classList.contains("dark") ||
+                document.querySelector(".dark") !== null;
+            setIsDark(hasDarkClass);
+        };
+        checkDarkMode();
+        // Observe class changes on html and body
+        var observer = new MutationObserver(checkDarkMode);
+        observer.observe(document.documentElement, {
+            attributes: true,
+            attributeFilter: ["class"],
+        });
+        observer.observe(document.body, {
+            attributes: true,
+            attributeFilter: ["class"],
+        });
+        return function () { return observer.disconnect(); };
+    }, []);
+    return isDark;
+};
 /**
  * DropdownMenu component - renders the menu with keyboard navigation
  */
 var DropdownMenu = React__default.forwardRef(function (_a, ref) {
     var children = _a.children, className = _a.className, _b = _a.animation, animation = _b === void 0 ? true : _b, _c = _a.portal, portal = _c === void 0 ? true : _c, _d = _a.horizontal, horizontal = _d === void 0 ? false : _d, ariaLabel = _a["aria-label"], props = __rest(_a, ["children", "className", "animation", "portal", "horizontal", "aria-label"]);
     var _e = useDropdownContext(), isOpen = _e.isOpen, onOpenChange = _e.onOpenChange, triggerRef = _e.triggerRef, menuRef = _e.menuRef, placement = _e.placement, offset = _e.offset, theme = _e.theme;
+    // Detect dark mode for portal content
+    var isDarkMode = useDarkMode();
     var shouldReduceMotion = useReducedMotion();
     var localRef = useRef(null);
     var _f = useState(-1), focusedIndex = _f[0], setFocusedIndex = _f[1];
@@ -100,12 +129,20 @@ var DropdownMenu = React__default.forwardRef(function (_a, ref) {
                 }
                 break;
         }
-    }, [focusedIndex, focusItem, getMenuItems, onOpenChange, triggerRef, typeaheadString]);
+    }, [
+        focusedIndex,
+        focusItem,
+        getMenuItems,
+        onOpenChange,
+        triggerRef,
+        typeaheadString,
+    ]);
     // Click outside to close
     useClickOutside(localRef, function (e) {
         var _a;
         // Skip if clicking on the trigger element
-        if (e.target === triggerRef.current || ((_a = triggerRef.current) === null || _a === void 0 ? void 0 : _a.contains(e.target))) {
+        if (e.target === triggerRef.current ||
+            ((_a = triggerRef.current) === null || _a === void 0 ? void 0 : _a.contains(e.target))) {
             return;
         }
         onOpenChange(false);
@@ -138,8 +175,11 @@ var DropdownMenu = React__default.forwardRef(function (_a, ref) {
         if (menuRef) {
             menuRef.current = el;
         }
-        if (portalContentRef && typeof portalContentRef === "object" && "current" in portalContentRef) {
-            portalContentRef.current = el;
+        if (portalContentRef &&
+            typeof portalContentRef === "object" &&
+            "current" in portalContentRef) {
+            portalContentRef.current =
+                el;
         }
     }, [ref, menuRef, portalContentRef]);
     // Animation variants
@@ -169,10 +209,11 @@ var DropdownMenu = React__default.forwardRef(function (_a, ref) {
                 stiffness: 500,
                 damping: 30,
             }, "data-state": isOpen ? "open" : "closed", "data-placement": placement }, domProps), children))));
-    // Use portal if specified
-    return portal && typeof document !== "undefined"
-        ? createPortal(menuContent, document.body)
-        : menuContent;
+    // Use portal if specified - wrap with dark class for dark mode support
+    if (portal && typeof document !== "undefined") {
+        return createPortal(React__default.createElement("div", { className: isDarkMode ? "dark" : undefined }, menuContent), document.body);
+    }
+    return menuContent;
 });
 DropdownMenu.displayName = "DropdownMenu";
 

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

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

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

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

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

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

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

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

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

@@ -1,9 +1,8 @@
-import { __rest, __assign } from '../../../node_modules/tslib/tslib.es6.js';
+import { __rest, __assign } from '/Users/ggn/Development/ui-flik/node_modules/tslib/tslib.es6.js';
 import React__default, { useMemo } from 'react';
+import { useReducedMotion, motion } from 'motion/react';
 import { buttonTheme } from '../Button/Button.theme.js';
 import { cn } from '../../../utils/cn.js';
-import { useReducedMotion } from '../../../node_modules/framer-motion/dist/es/utils/reduced-motion/use-reduced-motion.js';
-import { motion } from '../../../node_modules/framer-motion/dist/es/render/components/motion/proxy.js';
 
 var Link = React__default.forwardRef(function (_a, ref) {
     var children = _a.children, _b = _a.className, className = _b === void 0 ? "" : _b, _c = _a.size, size = _c === void 0 ? "inherit" : _c, _d = _a.disabled, disabled = _d === void 0 ? false : _d, href = _a.href, props = __rest(_a, ["children", "className", "size", "disabled", "href"]);
@@ -13,13 +12,13 @@ var Link = React__default.forwardRef(function (_a, ref) {
     var resolvedVariant = "link";
     // Memoize theme classes for performance
     var themeClasses = useMemo(function () {
-        var _a, _b, _c, _d, _e;
+        var _a, _b, _c, _d, _e, _f;
         var sizeClasses = size === "inherit"
             ? "h-fit"
             : ((_b = (_a = buttonTheme.sizes) === null || _a === void 0 ? void 0 : _a[size]) === null || _b === void 0 ? void 0 : _b[resolvedVariant]) || "";
-        var colorClasses = ((_c = buttonTheme.colorStyles) === null || _c === void 0 ? void 0 : _c[color]) || "";
-        var variantClasses = ((_d = buttonTheme.variantStyles) === null || _d === void 0 ? void 0 : _d[resolvedVariant]) || "";
-        var stateClasses = disabled ? ((_e = buttonTheme.states) === null || _e === void 0 ? void 0 : _e.disabled) || "" : "";
+        var colorClasses = ((_d = (_c = buttonTheme.variantColors) === null || _c === void 0 ? void 0 : _c[resolvedVariant]) === null || _d === void 0 ? void 0 : _d[color]) || "";
+        var variantClasses = ((_e = buttonTheme.variantStyles) === null || _e === void 0 ? void 0 : _e[resolvedVariant]) || "";
+        var stateClasses = disabled ? ((_f = buttonTheme.states) === null || _f === void 0 ? void 0 : _f.disabled) || "" : "";
         return {
             sizeClasses: sizeClasses,
             colorClasses: colorClasses,

package/dist/components/core/Loader/Loader.js

@@ -0,0 +1,64 @@
+import { __rest, __assign } from '/Users/ggn/Development/ui-flik/node_modules/tslib/tslib.es6.js';
+import React__default, { useMemo } from 'react';
+import { loaderTheme } from './Loader.theme.js';
+import { cn } from '../../../utils/cn.js';
+import '../../../utils/streamingErrors.js';
+import '../../../utils/optimisticErrors.js';
+import '../../../utils/actionQueue.js';
+
+/**
+ * Loader component - Supports both circular (spinner) and linear (progress bar) variants
+ *
+ * Features:
+ * - Circular variant: Spinning loader for indeterminate loading
+ * - Linear variant: Progress bar with determinate (value) or indeterminate modes
+ * - Multiple sizes and semantic colors
+ * - Optional percentage/label display for linear variant
+ * - Full theme customization
+ *
+ * @example
+ * // Circular loader
+ * <Loader variant="circular" size="md" />
+ *
+ * // Linear progress bar (determinate)
+ * <Loader variant="linear" value={60} showLabel />
+ *
+ * // Linear loading bar (indeterminate)
+ * <Loader variant="linear" />
+ */
+var Loader = function (_a) {
+    var _b, _c;
+    var _d = _a.variant, variant = _d === void 0 ? 'circular' : _d, _e = _a.size, size = _e === void 0 ? 'md' : _e, _f = _a.color, color = _f === void 0 ? 'primary' : _f, value = _a.value, _g = _a.max, max = _g === void 0 ? 100 : _g, _h = _a.showLabel, showLabel = _h === void 0 ? false : _h, label = _a.label, className = _a.className, customTheme = _a.theme, props = __rest(_a, ["variant", "size", "color", "value", "max", "showLabel", "label", "className", "theme"]);
+    // Merge custom theme with default theme
+    var theme = customTheme ? __assign(__assign({}, loaderTheme), customTheme) : loaderTheme;
+    // Calculate percentage for linear variant
+    var percentage = useMemo(function () {
+        if (value === undefined || value === null)
+            return 0;
+        var pct = Math.min(Math.max((value / max) * 100, 0), 100);
+        return Math.round(pct);
+    }, [value, max]);
+    // Determine if this is indeterminate mode (no value provided)
+    var isIndeterminate = value === undefined || value === null;
+    // Get theme values for current size and color
+    var sizeStyles = ((_b = theme.sizes) === null || _b === void 0 ? void 0 : _b[size]) || theme.sizes['md'];
+    var colorStyles = ((_c = theme.colors) === null || _c === void 0 ? void 0 : _c[color]) || theme.colors['primary'];
+    // Render circular variant (spinner)
+    if (variant === 'circular') {
+        return (React__default.createElement("div", __assign({ className: cn(theme.baseStyle, className), role: "status", "aria-label": "loading" }, props),
+            React__default.createElement("div", { className: cn(theme.circularStyle, theme.animation, sizeStyles === null || sizeStyles === void 0 ? void 0 : sizeStyles.circular, colorStyles === null || colorStyles === void 0 ? void 0 : colorStyles.circular) })));
+    }
+    // Render linear variant (progress bar)
+    return (React__default.createElement("div", __assign({ className: cn(theme.linearContainerStyle, className), role: "progressbar", "aria-valuemin": 0, "aria-valuemax": max, "aria-valuenow": isIndeterminate ? undefined : value, "aria-label": isIndeterminate ? "loading" : "".concat(percentage, "% complete") }, props),
+        React__default.createElement("div", { className: cn(theme.linearTrackStyle, sizeStyles === null || sizeStyles === void 0 ? void 0 : sizeStyles.linear) }, isIndeterminate ? (
+        // Indeterminate loading animation
+        React__default.createElement("div", { className: cn(theme.linearBarStyle, colorStyles === null || colorStyles === void 0 ? void 0 : colorStyles.linear, "w-1/3 animate-[shimmer_2s_ease-in-out_infinite]"), style: {
+                backgroundImage: "linear-gradient(90deg, transparent, currentColor, transparent)",
+            } })) : (
+        // Determinate progress bar
+        React__default.createElement("div", { className: cn(theme.linearBarStyle, colorStyles === null || colorStyles === void 0 ? void 0 : colorStyles.linear), style: { width: "".concat(percentage, "%") } }))),
+        showLabel && !isIndeterminate && (React__default.createElement("span", { className: theme.linearLabelStyle }, label || "".concat(percentage, "%")))));
+};
+Loader.displayName = 'Loader';
+
+export { Loader };

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

@@ -0,0 +1,60 @@
+/**
+ * Default theme for the Loader component
+ * Uses production-ready CSS variables from global.scss
+ */
+var loaderTheme = {
+    // Base styles for the loader container
+    baseStyle: "inline-flex items-center justify-center",
+    // Circular variant (spinner) styles
+    circularStyle: "rounded-full",
+    // Linear variant container
+    linearContainerStyle: "w-full flex items-center gap-3",
+    // Linear track (background)
+    linearTrackStyle: "flex-1 h-2 rounded-full bg-[var(--color-background-tertiary)] overflow-hidden",
+    // 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",
+    // Size variants for both circular and linear
+    sizes: {
+        sm: {
+            circular: "size-4 border-2",
+            linear: "h-1.5",
+        },
+        md: {
+            circular: "size-5 border-[3px]",
+            linear: "h-2",
+        },
+        lg: {
+            circular: "size-6 border-[3px]",
+            linear: "h-3",
+        },
+    },
+    // Color variants using correct CSS variables
+    colors: {
+        primary: {
+            circular: "border-[var(--color-primary)] border-t-transparent",
+            linear: "bg-[var(--color-primary)]",
+        },
+        success: {
+            circular: "border-[var(--color-success)] border-t-transparent",
+            linear: "bg-[var(--color-success)]",
+        },
+        warning: {
+            circular: "border-[var(--color-warning)] border-t-transparent",
+            linear: "bg-[var(--color-warning)]",
+        },
+        danger: {
+            circular: "border-[var(--color-danger)] border-t-transparent",
+            linear: "bg-[var(--color-danger)]",
+        },
+        muted: {
+            circular: "border-[var(--color-text-muted)] border-t-transparent",
+            linear: "bg-[var(--color-text-muted)]",
+        },
+    },
+    // Animation class for circular spinner
+    animation: "animate-[spin_1s_linear_infinite]",
+};
+
+export { loaderTheme };

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

@@ -1,9 +1,8 @@
-import { __rest, __assign } from '../../../node_modules/tslib/tslib.es6.js';
+import { __rest, __assign } from '/Users/ggn/Development/ui-flik/node_modules/tslib/tslib.es6.js';
 import React__default, { useRef, useState, useCallback, useEffect } from 'react';
+import { motion, AnimatePresence } from 'motion/react';
 import { cn } from '../../../utils/cn.js';
 import { getMasonryTheme } from './Masonry.theme.js';
-import { motion } from '../../../node_modules/framer-motion/dist/es/render/components/motion/proxy.js';
-import { AnimatePresence } from '../../../node_modules/framer-motion/dist/es/components/AnimatePresence/index.js';
 
 var Masonry = function (_a) {
     var children = _a.children, _b = _a.columns, columns = _b === void 0 ? 3 : _b, _c = _a.gap, gap = _c === void 0 ? 16 : _c, gapBreakpoints = _a.gapBreakpoints, className = _a.className, style = _a.style, _d = _a.minColumns, minColumns = _d === void 0 ? 1 : _d, _e = _a.maxColumns, maxColumns = _e === void 0 ? 10 : _e, _f = _a.sequential, sequential = _f === void 0 ? false : _f, themeOverrides = _a.themeOverrides, _g = _a.loading, loading = _g === void 0 ? false : _g, props = __rest(_a, ["children", "columns", "gap", "gapBreakpoints", "className", "style", "minColumns", "maxColumns", "sequential", "themeOverrides", "loading"]);

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

@@ -1,4 +1,4 @@
-import { __assign } from '../../../node_modules/tslib/tslib.es6.js';
+import { __assign } from '/Users/ggn/Development/ui-flik/node_modules/tslib/tslib.es6.js';
 
 /**
  * Default theme for the Masonry component

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

@@ -1,7 +1,7 @@
 import React from 'react';
 import { MessageProps } from './Message.types';
 export declare const Message: React.ForwardRefExoticComponent<MessageProps & React.RefAttributes<HTMLDivElement>> & {
-    Avatar: React.ForwardRefExoticComponent<import("./MessageAvatar").MessageAvatarProps & 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,136 @@
+import { __rest, __assign } from '/Users/ggn/Development/ui-flik/node_modules/tslib/tslib.es6.js';
+import React__default from 'react';
+import { cn } from '../../../utils/cn.js';
+import { formatTimestamp } from '../../../utils/dateUtils.js';
+import '../../../utils/streamingErrors.js';
+import '../../../utils/optimisticErrors.js';
+import '../../../utils/actionQueue.js';
+import { 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';
+
+var MessageFooter = function (_a) {
+    var isStreaming = _a.isStreaming, streamingIndicator = _a.streamingIndicator, showTimestamp = _a.showTimestamp, timestamp = _a.timestamp, actions = _a.actions, timestampStyle = _a.timestampStyle, streamingIndicatorStyle = _a.streamingIndicatorStyle, actionsContainerStyle = _a.actionsContainerStyle, variant = _a.variant;
+    if (isStreaming) {
+        return (React__default.createElement("div", { className: cn('flex flex-row items-center gap-3 mt-1', variant === 'receiver' ? 'ml-2' : 'mr-3') },
+            React__default.createElement("div", { className: cn(timestampStyle, streamingIndicatorStyle) }, streamingIndicator || (React__default.createElement(React__default.Fragment, null,
+                React__default.createElement("span", null, "Typing"),
+                React__default.createElement(motion.span, { animate: { opacity: [0.4, 1, 0.4] }, transition: {
+                        duration: 1.5,
+                        repeat: Infinity,
+                        ease: 'easeInOut',
+                    } }, "\u2022\u2022\u2022"))))));
+    }
+    // For system variant, only show timestamp (no actions)
+    if (variant === 'system') {
+        return showTimestamp && timestamp ? (React__default.createElement("div", { className: timestampStyle },
+            React__default.createElement("time", { dateTime: typeof timestamp === 'string' ? timestamp : timestamp.toISOString(), className: "select-none" }, formatTimestamp(timestamp)))) : null;
+    }
+    // For sender/receiver variants, show timestamp and actions in a row
+    return (React__default.createElement("div", { className: cn("flex flex-row items-center gap-3 mt-2", variant === 'receiver' ? 'ml-2' : 'mr-3') },
+        showTimestamp && timestamp && (React__default.createElement("div", { className: timestampStyle },
+            React__default.createElement("time", { dateTime: typeof timestamp === 'string'
+                    ? timestamp
+                    : timestamp.toISOString(), className: "select-none" }, formatTimestamp(timestamp)))),
+        actions && React__default.createElement("div", { className: cn(actionsContainerStyle) }, actions)));
+};
+var MessageRoot = React__default.forwardRef(function (_a, ref) {
+    var _b, _c, _d, _e, _f, _g, _h, _j;
+    var role = _a.role, variantProp = _a.variant, content = _a.content, message = _a.message, // Deprecated alias
+    timestamp = _a.timestamp, avatar = _a.avatar, _k = _a.showTimestamp, showTimestamp = _k === void 0 ? true : _k, _l = _a.isStreaming, isStreaming = _l === void 0 ? false : _l, streamingIndicator = _a.streamingIndicator, _m = _a.typingSpeed, typingSpeed = _m === void 0 ? 100 : _m, actions = _a.actions, onCopy = _a.onCopy, onRegenerate = _a.onRegenerate, showActions = _a.showActions, className = _a.className, _o = _a.theme, customTheme = _o === void 0 ? {} : _o, children = _a.children, props = __rest(_a, ["role", "variant", "content", "message", "timestamp", "avatar", "showTimestamp", "isStreaming", "streamingIndicator", "typingSpeed", "actions", "onCopy", "onRegenerate", "showActions", "className", "theme", "children"]);
+    // Determine the variant: role takes precedence over variant prop
+    var 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)
+    var isCompoundAPI = !!children;
+    // Context value for compound components
+    var contextValue = {
+        role: role,
+        variant: variant,
+        isStreaming: isStreaming,
+        typingSpeed: typingSpeed,
+    };
+    // Resolve content (support deprecated 'message' prop)
+    var messageContent = content !== null && content !== void 0 ? content : message;
+    // Determine if we should show default actions
+    var shouldShowDefaultActions = showActions !== false &&
+        (variant === 'receiver' || role === 'assistant') &&
+        (onCopy || onRegenerate);
+    if (isCompoundAPI) {
+        // Compound API - Render with context
+        var variantTheme_1 = messageTheme.variants[variant];
+        // Build container style
+        var containerStyle_1 = cn(messageTheme.containerBaseStyle, variantTheme_1.containerModifier, customTheme.containerBaseStyle, (_c = (_b = customTheme.variants) === null || _b === void 0 ? void 0 : _b[variant]) === null || _c === void 0 ? void 0 : _c.containerModifier, 
+        // Backward compatibility
+        variant === 'sender' && customTheme.senderContainerStyle, variant === 'receiver' && customTheme.receiverContainerStyle, variant === 'system' && customTheme.systemContainerStyle);
+        return (React__default.createElement(MessageContext.Provider, { value: contextValue },
+            React__default.createElement("div", __assign({ ref: ref, className: cn('w-full max-w-full group', className), "data-variant": variant, "data-role": role }, props),
+                React__default.createElement("div", { className: containerStyle_1 }, children))));
+    }
+    // Props API - Render inline
+    // Get variant-specific theme
+    var variantTheme = messageTheme.variants[variant];
+    // Build container styles
+    var containerStyle = cn(messageTheme.containerBaseStyle, variantTheme.containerModifier, customTheme.containerBaseStyle, (_e = (_d = customTheme.variants) === null || _d === void 0 ? void 0 : _d[variant]) === null || _e === void 0 ? void 0 : _e.containerModifier, 
+    // Backward compatibility
+    variant === 'sender' && customTheme.senderContainerStyle, variant === 'receiver' && customTheme.receiverContainerStyle, variant === 'system' && customTheme.systemContainerStyle);
+    // Build bubble styles
+    var bubbleStyle = cn(messageTheme.bubbleBaseStyle, variantTheme.bubbleStyle, customTheme.bubbleBaseStyle, (_g = (_f = customTheme.variants) === null || _f === void 0 ? void 0 : _f[variant]) === null || _g === void 0 ? void 0 : _g.bubbleStyle, 
+    // Backward compatibility
+    variant === 'sender' && customTheme.senderBubbleStyle, variant === 'receiver' && customTheme.receiverBubbleStyle, variant === 'system' && customTheme.systemBubbleStyle);
+    // Build timestamp styles
+    var timestampStyle = cn(messageTheme.timestampStyle, variantTheme.timestampModifier, customTheme.timestampStyle, (_j = (_h = customTheme.variants) === null || _h === void 0 ? void 0 : _h[variant]) === null || _j === void 0 ? void 0 : _j.timestampModifier, 
+    // Backward compatibility
+    variant === 'sender' && customTheme.senderTimestampStyle, variant === 'receiver' && customTheme.receiverTimestampStyle, variant === 'system' && customTheme.systemTimestampStyle);
+    // Build default action buttons if needed
+    var defaultActionButtons = shouldShowDefaultActions ? (React__default.createElement("div", { className: cn(messageTheme.actionsContainerStyle, customTheme.actionsContainerStyle) },
+        onCopy && (React__default.createElement("button", { onClick: onCopy, className: cn(messageTheme.actionButtonStyle, customTheme.actionButtonStyle), "aria-label": "Copy message" },
+            React__default.createElement(DocumentDuplicateIcon, { className: "w-4 h-4" }))),
+        onRegenerate && (React__default.createElement("button", { onClick: onRegenerate, className: cn(messageTheme.actionButtonStyle, customTheme.actionButtonStyle), "aria-label": "Regenerate response" },
+            React__default.createElement(ArrowPathIcon, { className: "w-4 h-4" }))))) : undefined;
+    // Use custom actions if provided, otherwise use default actions
+    var finalActions = actions !== null && actions !== void 0 ? actions : defaultActionButtons;
+    // Use TypeWriter for streaming receiver/assistant messages with string content (props API)
+    var shouldAnimate = (variant === 'receiver' || role === 'assistant') &&
+        isStreaming &&
+        typeof messageContent === 'string';
+    var renderedContent = shouldAnimate ? (React__default.createElement(TypeWriter, { text: messageContent, speed: typingSpeed, enabled: true, className: "break-words" })) : (messageContent);
+    // System messages render differently (centered, no avatar)
+    if (variant === 'system') {
+        return (React__default.createElement("div", __assign({ ref: ref, className: cn('w-full max-w-full', className), "data-variant": "system", "data-role": role }, props),
+            React__default.createElement("div", { className: containerStyle },
+                React__default.createElement("div", { className: bubbleStyle }, typeof renderedContent === 'string' ? (React__default.createElement("p", { className: "text-sm" }, renderedContent)) : (renderedContent)),
+                React__default.createElement(MessageFooter, { isStreaming: isStreaming, streamingIndicator: streamingIndicator, showTimestamp: showTimestamp, timestamp: timestamp, actions: undefined, timestampStyle: timestampStyle, streamingIndicatorStyle: cn(messageTheme.streamingIndicatorStyle, customTheme.streamingIndicatorStyle), actionsContainerStyle: undefined, variant: "system" }))));
+    }
+    return (React__default.createElement("div", __assign({ ref: ref, className: cn('w-full max-w-full group', className), "data-variant": variant, "data-role": role }, props),
+        React__default.createElement("div", { className: containerStyle },
+            avatar && (React__default.createElement("div", { className: "flex-shrink-0" },
+                React__default.createElement(Avatar, { src: avatar.src, alt: avatar.alt, fallback: avatar.fallback, size: "xs" }))),
+            React__default.createElement("div", { className: cn('flex flex-col', variant === 'sender' ? 'items-end' : 'items-start') },
+                React__default.createElement("div", { className: bubbleStyle }, typeof renderedContent === 'string' ? (React__default.createElement("p", { className: "break-words" }, renderedContent)) : (renderedContent)),
+                React__default.createElement(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
+var 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
+ */
+var messageTheme = {
+    // Shared base styles (apply to all variants)
+    bubbleBaseStyle: 'max-w-[80%] sm:max-w-[90%] rounded-xl 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-md 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 };