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

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 };

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

@@ -7,6 +7,50 @@ export type MessageRole = "user" | "assistant" | "system";
  * Message variant types for chat UI
  */
 export type MessageVariant = "sender" | "receiver" | "system";
+/**
+ * Message delivery status
+ */
+export type MessageStatus = "sending" | "sent" | "delivered" | "read" | "failed";
+/**
+ * Attachment types
+ */
+export type MessageAttachmentType = "file" | "image" | "audio" | "link";
+/**
+ * Attachment data
+ */
+export interface MessageAttachment {
+    type: MessageAttachmentType;
+    name?: string;
+    url?: string;
+    size?: string;
+    duration?: string;
+    thumbnailUrl?: string;
+    description?: string;
+    domain?: string;
+}
+/**
+ * Reaction data
+ */
+export interface MessageReaction {
+    emoji: string;
+    count: number;
+    reacted?: boolean;
+}
+/**
+ * Reply/quote reference
+ */
+export interface MessageReplyTo {
+    name: string;
+    content: string;
+    avatar?: string;
+}
+/**
+ * Sender display info
+ */
+export interface MessageSenderInfo {
+    name: string;
+    avatar?: string;
+}
 /**
  * Avatar configuration for message sender
  */
@@ -99,6 +143,43 @@ export interface MessageProps extends Omit<React.HTMLAttributes<HTMLDivElement>,
      * @default true for assistant messages
      */
     showActions?: boolean;
+    /**
+     * Delivery status indicator (sending/sent/delivered/read/failed)
+     * Only renders for sender variant
+     */
+    status?: MessageStatus;
+    /**
+     * Timestamp when the message was read (shown alongside read status)
+     */
+    readAt?: Date | string;
+    /**
+     * Callback when retry button is clicked on failed messages
+     */
+    onRetry?: () => void;
+    /**
+     * File, image, audio, or link attachments
+     */
+    attachments?: MessageAttachment[];
+    /**
+     * Emoji reactions displayed below the message
+     */
+    reactions?: MessageReaction[];
+    /**
+     * Callback when a reaction pill is clicked
+     */
+    onReactionClick?: (emoji: string) => void;
+    /**
+     * Reply/quote reference shown above message content
+     */
+    replyTo?: MessageReplyTo;
+    /**
+     * Sender display info (name shown above receiver bubbles)
+     */
+    sender?: MessageSenderInfo;
+    /**
+     * Whether this is a consecutive message from the same sender (hides avatar & name)
+     */
+    isGrouped?: boolean;
     /**
      * Custom theme overrides
      */
@@ -126,6 +207,23 @@ export interface MessageTheme {
     };
     streamingIndicatorStyle: string;
     actionsContainerStyle: string;
+    statusStyle: string;
+    statusSending: string;
+    statusSent: string;
+    statusDelivered: string;
+    statusRead: string;
+    statusFailed: string;
+    attachmentContainerStyle: string;
+    fileStyle: string;
+    imageStyle: string;
+    audioStyle: string;
+    linkStyle: string;
+    reactionsContainerStyle: string;
+    reactionPillStyle: string;
+    reactionPillActiveStyle: string;
+    replyStyle: string;
+    dateDividerStyle: string;
+    senderNameStyle: string;
 }
 /**
  * Theme overrides for Message component
@@ -141,6 +239,23 @@ export interface MessageThemeOverrides {
     };
     streamingIndicatorStyle?: string;
     actionsContainerStyle?: string;
+    statusStyle?: string;
+    statusSending?: string;
+    statusSent?: string;
+    statusDelivered?: string;
+    statusRead?: string;
+    statusFailed?: string;
+    attachmentContainerStyle?: string;
+    fileStyle?: string;
+    imageStyle?: string;
+    audioStyle?: string;
+    linkStyle?: string;
+    reactionsContainerStyle?: string;
+    reactionPillStyle?: string;
+    reactionPillActiveStyle?: string;
+    replyStyle?: string;
+    dateDividerStyle?: string;
+    senderNameStyle?: string;
     /** @deprecated Use variants.sender.containerModifier instead */
     senderContainerStyle?: string;
     /** @deprecated Use variants.sender.bubbleStyle instead */

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

@@ -0,0 +1,8 @@
+import React from "react";
+export interface MessageAudioProps {
+    duration?: string;
+    name?: string;
+    onClick?: () => void;
+    className?: string;
+}
+export declare const MessageAudio: React.FC<MessageAudioProps>;

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

@@ -0,0 +1,11 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { cn } from '../../../utils/cn.js';
+import 'react';
+import { messageTheme } from './Message.theme.js';
+import { PlayIcon } from '@heroicons/react/24/solid';
+
+const MessageAudio = ({ duration, name, onClick, className, }) => {
+    return (jsxs("div", { className: cn(messageTheme.audioStyle, className), children: [jsx("button", { onClick: onClick, className: "flex items-center justify-center size-8 rounded-full bg-[var(--color-primary)] text-white flex-shrink-0 cursor-pointer", "aria-label": name ? `Play ${name}` : "Play audio", type: "button", children: jsx(PlayIcon, { className: "size-4 ml-0.5" }) }), jsxs("div", { className: "flex flex-col min-w-0 flex-1", children: [name && (jsx("span", { className: "font-medium text-[var(--color-text-primary)] truncate", children: name })), duration && (jsx("span", { className: "text-xs text-[var(--color-text-muted)]", children: duration }))] })] }));
+};
+
+export { MessageAudio };

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

@@ -1,9 +1,11 @@
-import { MessageRole, MessageVariant } from './Message.types';
+import { MessageRole, MessageVariant, MessageStatus } from './Message.types';
 export interface MessageContextValue {
     role?: MessageRole;
     variant: MessageVariant;
     isStreaming?: boolean;
     typingSpeed?: number;
+    status?: MessageStatus;
+    isGrouped?: boolean;
 }
 export declare const MessageContext: import("react").Context<MessageContextValue | undefined>;
 export declare const useMessageContext: () => MessageContextValue;

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

@@ -0,0 +1,6 @@
+import React from "react";
+export interface MessageDateDividerProps {
+    label: string;
+    className?: string;
+}
+export declare const MessageDateDivider: React.FC<MessageDateDividerProps>;

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

@@ -0,0 +1,10 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { cn } from '../../../utils/cn.js';
+import 'react';
+import { messageTheme } from './Message.theme.js';
+
+const MessageDateDivider = ({ label, className, }) => {
+    return (jsxs("div", { className: cn(messageTheme.dateDividerStyle, className), children: [jsx("hr", { className: "flex-1 border-t border-[var(--color-border)]" }), jsx("span", { children: label }), jsx("hr", { className: "flex-1 border-t border-[var(--color-border)]" })] }));
+};
+
+export { MessageDateDivider };

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

@@ -0,0 +1,9 @@
+import React from "react";
+export interface MessageFileProps {
+    name?: string;
+    url?: string;
+    size?: string;
+    onClick?: () => void;
+    className?: string;
+}
+export declare const MessageFile: React.FC<MessageFileProps>;

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

@@ -0,0 +1,15 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { cn } from '../../../utils/cn.js';
+import 'react';
+import { messageTheme } from './Message.theme.js';
+import { DocumentIcon, ArrowDownTrayIcon } from '@heroicons/react/24/outline';
+
+const MessageFile = ({ name = "File", url, size, onClick, className, }) => {
+    const content = (jsxs("div", { className: cn(messageTheme.fileStyle, className), onClick: !url ? onClick : undefined, role: !url && onClick ? "button" : undefined, tabIndex: !url && onClick ? 0 : undefined, children: [jsx(DocumentIcon, { className: "size-5 flex-shrink-0 text-[var(--color-text-muted)]" }), jsxs("div", { className: "flex flex-col min-w-0 flex-1", children: [jsx("span", { className: "font-medium text-[var(--color-text-primary)] truncate", children: name }), size && (jsx("span", { className: "text-xs text-[var(--color-text-muted)]", children: size }))] }), url && (jsx(ArrowDownTrayIcon, { className: "size-4 flex-shrink-0 text-[var(--color-text-muted)]" }))] }));
+    if (url) {
+        return (jsx("a", { href: url, download: true, className: "no-underline", "aria-label": `Download ${name}`, children: content }));
+    }
+    return content;
+};
+
+export { MessageFile };

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

@@ -0,0 +1,11 @@
+import React from "react";
+export interface MessageImageProps {
+    src?: string;
+    thumbnailUrl?: string;
+    name?: string;
+    size?: string;
+    alt?: string;
+    onClick?: () => void;
+    className?: string;
+}
+export declare const MessageImage: React.FC<MessageImageProps>;

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

@@ -0,0 +1,13 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { cn } from '../../../utils/cn.js';
+import 'react';
+import { messageTheme } from './Message.theme.js';
+
+const MessageImage = ({ src, thumbnailUrl, name, size, alt, onClick, className, }) => {
+    const imgSrc = thumbnailUrl || src;
+    if (!imgSrc)
+        return null;
+    return (jsxs("div", { className: cn(messageTheme.imageStyle, className), children: [jsx("img", { src: imgSrc, alt: alt || name || "Image attachment", className: "w-full h-auto object-cover cursor-pointer", onClick: onClick, role: onClick ? "button" : undefined, tabIndex: onClick ? 0 : undefined }), (name || size) && (jsxs("div", { className: "flex items-center justify-between px-2 py-1.5 text-xs text-[var(--color-text-muted)]", children: [name && jsx("span", { className: "truncate", children: name }), size && jsx("span", { className: "flex-shrink-0", children: size })] }))] }));
+};
+
+export { MessageImage };

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

@@ -0,0 +1,10 @@
+import React from "react";
+export interface MessageLinkProps {
+    url?: string;
+    thumbnailUrl?: string;
+    title?: string;
+    description?: string;
+    domain?: string;
+    className?: string;
+}
+export declare const MessageLink: React.FC<MessageLinkProps>;

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

@@ -0,0 +1,15 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { cn } from '../../../utils/cn.js';
+import 'react';
+import { messageTheme } from './Message.theme.js';
+import { LinkIcon } from '@heroicons/react/16/solid';
+
+const MessageLink = ({ url, thumbnailUrl, title, description, domain, className, }) => {
+    const content = (jsxs("div", { className: cn(messageTheme.linkStyle, className), children: [thumbnailUrl && (jsx("img", { src: thumbnailUrl, alt: title || "Link preview", className: "w-full h-32 object-cover" })), jsxs("div", { className: "px-3 py-2.5 flex flex-col gap-0.5", children: [title && (jsx("span", { className: "font-medium text-[var(--color-text-primary)] line-clamp-1", children: title })), description && (jsx("span", { className: "text-[var(--color-text-muted)] line-clamp-2", children: description })), domain && (jsxs("span", { className: "flex items-center gap-1 text-xs text-[var(--color-text-placeholder)] mt-0.5", children: [jsx(LinkIcon, { className: "size-3" }), domain] }))] })] }));
+    if (url) {
+        return (jsx("a", { href: url, target: "_blank", rel: "noopener noreferrer", className: "no-underline", "aria-label": title ? `Open ${title}` : "Open link", children: content }));
+    }
+    return content;
+};
+
+export { MessageLink };

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

@@ -0,0 +1,8 @@
+import React from "react";
+import { MessageReaction } from "./Message.types";
+export interface MessageReactionsProps {
+    reactions?: MessageReaction[];
+    onReactionClick?: (emoji: string) => void;
+    className?: string;
+}
+export declare const MessageReactions: React.FC<MessageReactionsProps>;

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

@@ -0,0 +1,12 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { cn } from '../../../utils/cn.js';
+import 'react';
+import { messageTheme } from './Message.theme.js';
+
+const MessageReactions = ({ reactions, onReactionClick, className, }) => {
+    if (!(reactions === null || reactions === void 0 ? void 0 : reactions.length))
+        return null;
+    return (jsx("div", { className: cn(messageTheme.reactionsContainerStyle, className), children: reactions.map((reaction) => (jsxs("button", { type: "button", onClick: () => onReactionClick === null || onReactionClick === void 0 ? void 0 : onReactionClick(reaction.emoji), className: cn(messageTheme.reactionPillStyle, reaction.reacted && messageTheme.reactionPillActiveStyle), "aria-label": `${reaction.emoji} ${reaction.count}`, children: [jsx("span", { children: reaction.emoji }), jsx("span", { children: reaction.count })] }, reaction.emoji))) }));
+};
+
+export { MessageReactions };

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

@@ -0,0 +1,8 @@
+import React from "react";
+export interface MessageReplyProps {
+    name: string;
+    content: string;
+    avatar?: string;
+    className?: string;
+}
+export declare const MessageReply: React.FC<MessageReplyProps>;

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

@@ -0,0 +1,10 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { cn } from '../../../utils/cn.js';
+import 'react';
+import { messageTheme } from './Message.theme.js';
+
+const MessageReply = ({ name, content, className, }) => {
+    return (jsxs("div", { className: cn(messageTheme.replyStyle, className), children: [jsx("span", { className: "font-semibold text-[var(--color-text-primary)]", children: name }), jsx("p", { className: "line-clamp-2 mt-0.5", children: content })] }));
+};
+
+export { MessageReply };

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

@@ -0,0 +1,6 @@
+import React from "react";
+export interface MessageSenderNameProps {
+    name: string;
+    className?: string;
+}
+export declare const MessageSenderName: React.FC<MessageSenderNameProps>;

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

@@ -0,0 +1,10 @@
+import { jsx } from 'react/jsx-runtime';
+import { cn } from '../../../utils/cn.js';
+import 'react';
+import { messageTheme } from './Message.theme.js';
+
+const MessageSenderName = ({ name, className, }) => {
+    return (jsx("span", { className: cn(messageTheme.senderNameStyle, className), children: name }));
+};
+
+export { MessageSenderName };

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

@@ -0,0 +1,9 @@
+import React from "react";
+import { MessageStatus } from "./Message.types";
+export interface MessageStatusIndicatorProps {
+    status?: MessageStatus;
+    readAt?: Date | string;
+    onRetry?: () => void;
+    className?: string;
+}
+export declare const MessageStatusIndicator: React.FC<MessageStatusIndicatorProps>;

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

@@ -0,0 +1,45 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { cn } from '../../../utils/cn.js';
+import 'react';
+import { messageTheme } from './Message.theme.js';
+import { Button } from '../Button/Button.js';
+import { ExclamationCircleIcon, CheckIcon, ClockIcon } from '@heroicons/react/16/solid';
+
+const DoubleCheck = ({ className }) => (jsxs("span", { className: cn("inline-flex items-center -space-x-2", className), children: [jsx(CheckIcon, { className: "size-3.5" }), jsx(CheckIcon, { className: "size-3.5" })] }));
+const MessageStatusIndicator = ({ status, readAt, onRetry, className, }) => {
+    if (!status)
+        return null;
+    const statusConfig = {
+        sending: {
+            icon: jsx(ClockIcon, { className: "size-3.5" }),
+            style: messageTheme.statusSending,
+            label: "Sending",
+        },
+        sent: {
+            icon: jsx(CheckIcon, { className: "size-3.5" }),
+            style: messageTheme.statusSent,
+            label: "Sent",
+        },
+        delivered: {
+            icon: jsx(DoubleCheck, {}),
+            style: messageTheme.statusDelivered,
+            label: "Delivered",
+        },
+        read: {
+            icon: jsx(DoubleCheck, {}),
+            style: messageTheme.statusRead,
+            label: readAt
+                ? `Read ${typeof readAt === "string" ? readAt : readAt.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" })}`
+                : "Read",
+        },
+        failed: {
+            icon: jsx(ExclamationCircleIcon, { className: "size-3.5" }),
+            style: messageTheme.statusFailed,
+            label: "Failed",
+        },
+    };
+    const config = statusConfig[status];
+    return (jsxs("div", { className: cn(messageTheme.statusStyle, config.style, className), "aria-label": config.label, children: [config.icon, status === "failed" && onRetry && (jsx(Button, { variant: "link", color: "danger", size: "sm", onClick: onRetry, className: "text-xs px-0 h-auto", "aria-label": "Retry sending message", children: "Retry" }))] }));
+};
+
+export { MessageStatusIndicator };

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

@@ -1,5 +1,5 @@
 export { Message } from './Message';
-export type { MessageProps, MessageRole, MessageVariant, MessageAvatarProps, MessageTheme, MessageThemeOverrides, MessageVariantTheme, } from './Message.types';
+export type { MessageProps, MessageRole, MessageVariant, MessageAvatarProps, MessageTheme, MessageThemeOverrides, MessageVariantTheme, MessageStatus, MessageAttachmentType, MessageAttachment, MessageReaction, MessageReplyTo, MessageSenderInfo, } from './Message.types';
 export { messageTheme } from './Message.theme';
 export { messageListTheme } from './MessageList.theme';
 export type { MessageListProps, MessageListTheme, MessageListThemeOverrides, } from './MessageList.types';
@@ -7,3 +7,21 @@ export { TypeWriter } from './TypeWriter';
 export type { TypeWriterProps } from './TypeWriter';
 export { MessageBody } from './MessageBody';
 export type { MessageBodyProps } from './MessageBody';
+export { MessageStatusIndicator } from './MessageStatusIndicator';
+export type { MessageStatusIndicatorProps } from './MessageStatusIndicator';
+export { MessageSenderName } from './MessageSenderName';
+export type { MessageSenderNameProps } from './MessageSenderName';
+export { MessageFile } from './MessageFile';
+export type { MessageFileProps } from './MessageFile';
+export { MessageImage } from './MessageImage';
+export type { MessageImageProps } from './MessageImage';
+export { MessageAudio } from './MessageAudio';
+export type { MessageAudioProps } from './MessageAudio';
+export { MessageLink } from './MessageLink';
+export type { MessageLinkProps } from './MessageLink';
+export { MessageReply } from './MessageReply';
+export type { MessageReplyProps } from './MessageReply';
+export { MessageReactions } from './MessageReactions';
+export type { MessageReactionsProps } from './MessageReactions';
+export { MessageDateDivider } from './MessageDateDivider';
+export type { MessageDateDividerProps } from './MessageDateDivider';

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

@@ -5,5 +5,6 @@ import { Variants } from 'motion/react';
 export declare const modalOverlayAnimations: Variants;
 /**
  * Modal content animation variants
+ * Scale + slight slide (Vercel/Notion style)
  */
 export declare const modalContentAnimations: Variants;

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

@@ -22,30 +22,33 @@ const modalOverlayAnimations = {
 };
 /**
  * Modal content animation variants
+ * Scale + slight slide (Vercel/Notion style)
  */
 const modalContentAnimations = {
     initial: {
         opacity: 0,
-        y: 20
+        scale: 0.98,
+        y: 8,
     },
     animate: {
         opacity: 1,
+        scale: 1,
         y: 0,
         transition: {
-            type: 'spring',
-            damping: 25,
-            stiffness: 300,
-            delay: 0.05
-        }
+            duration: 0.2,
+            ease: [0.4, 0, 0.2, 1],
+            delay: 0.05,
+        },
     },
     exit: {
         opacity: 0,
-        y: 20,
+        scale: 0.98,
+        y: 4,
         transition: {
-            duration: 0.2,
-            ease: 'easeIn'
-        }
-    }
+            duration: 0.15,
+            ease: [0.4, 0, 1, 1],
+        },
+    },
 };
 
 export { modalContentAnimations, modalOverlayAnimations };

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

@@ -8,7 +8,7 @@ import { XMarkIcon } from '@heroicons/react/24/outline';
 const ModalHeader = ({ children, icon, showCloseButton, className, ...props }) => {
     const { onClose, showCloseButton: contextShowCloseButton, theme, isBodyScrollable, } = useModalContext();
     const shouldShowCloseButton = showCloseButton !== null && showCloseButton !== void 0 ? showCloseButton : contextShowCloseButton;
-    return (jsxs("div", { className: cn(theme.header, isBodyScrollable && "border-[var(--color-border)] relative", className), ...props, children: [jsxs("div", { className: cn(theme.headerContent), children: [icon && (jsx("div", { className: "flex-shrink-0 text-[var(--color-text-secondary)]", children: icon })), jsx("div", { className: "flex-1", children: children })] }), shouldShowCloseButton && (jsx("div", { className: "", children: jsx(Button, { color: "neutral", variant: "ghost", iconOnly: true, size: "sm", onClick: onClose, "aria-label": "Close modal", className: "rounded-full", children: jsx(XMarkIcon, { className: "size-5" }) }) }))] }));
+    return (jsxs("div", { className: cn(theme.header, isBodyScrollable && "border-[var(--color-border)] relative", className), ...props, children: [jsxs("div", { className: cn(theme.headerContent), children: [icon && (jsx("div", { className: "flex-shrink-0 text-[var(--color-text-secondary)]", children: icon })), jsx("div", { className: "flex-1", children: children })] }), shouldShowCloseButton && (jsx("div", { className: "", children: jsx(Button, { color: "neutral", variant: "soft", iconOnly: true, size: "sm", onClick: onClose, "aria-label": "Close modal", className: "rounded-full", children: jsx(XMarkIcon, { className: "size-5" }) }) }))] }));
 };
 ModalHeader.displayName = "Modal.Header";