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

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

@@ -15,7 +15,7 @@ const paginationTheme = {
         // Base state - dark
         "dark:bg-[var(--color-neutral-800)] dark:text-[var(--color-neutral-400)] dark:border-transparent " +
         // Hover state - light
-        "hover:text-[var(--color-text-primary)] hover:bg-neutral-50 hover:border-[var(--color-border)] " +
+        "hover:text-[var(--color-text-primary)] hover:bg-[var(--color-background-secondary)] hover:border-[var(--color-border)] " +
         // Hover state - dark
         "dark:hover:bg-[var(--color-neutral-700)] dark:hover:text-[var(--color-neutral-200)] dark:hover:border-[var(--color-neutral-600)] " +
         // Active state - light

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

@@ -1,6 +1,6 @@
 import React from "react";
 import { PopoverRootProps as PopoverProps } from "./Popover.types";
 export declare const Popover: (({ children, className, isOpen: controlledIsOpen, defaultIsOpen, onOpenChange, placement, offset, triggerType, closeOnClickOutside, closeOnEsc, preventClose, hasBackdrop, theme: themeOverrides, darkMode, ...props }: PopoverProps) => import("react/jsx-runtime").JSX.Element) & {
-    Trigger: React.ForwardRefExoticComponent<Omit<import("./Popover.types").PopoverTriggerProps, "ref"> & React.RefAttributes<any>>;
+    Trigger: React.ForwardRefExoticComponent<Omit<import("./Popover.types").PopoverTriggerProps, "ref"> & React.RefAttributes<HTMLElement>>;
     Body: React.ForwardRefExoticComponent<import("./Popover.types").PopoverBodyProps & React.RefAttributes<HTMLDivElement>>;
 };

package/dist/components/core/Popover/PopoverBody.js

@@ -58,7 +58,7 @@ const PopoverBody = React__default.forwardRef(({ children, className, animation
     const { position, cssVariables, contentRef: portalContentRef, } = useSelectPortal({
         triggerRef,
         isOpen: isOpen || false,
-        placement: placement,
+        placement,
         offset: offset || 8,
         autoWidth: true,
         onClose: () => {
@@ -132,7 +132,7 @@ const PopoverBody = React__default.forwardRef(({ children, className, animation
         return (jsx(Overlay, { ref: handleRef, isOpen: isOpen, onClose: () => {
                 if (!preventClose)
                     onOpenChange(false);
-            }, closeOnOverlayClick: closeOnClickOutside && !preventClose, closeOnEsc: closeOnEsc && !preventClose, enableScrollLock: false, enableFocusTrap: false, position: "none", role: "dialog", ariaModal: true, contentClassName: contentClasses, contentStyle: contentPositionStyle, animations: animation && !shouldReduceMotion
+            }, closeOnOverlayClick: closeOnClickOutside && !preventClose, closeOnEsc: closeOnEsc && !preventClose, enableScrollLock: false, enableFocusTrap: true, position: "none", role: "dialog", ariaModal: true, contentClassName: contentClasses, contentStyle: contentPositionStyle, animations: animation && !shouldReduceMotion
                 ? {
                     overlay: overlayBackdropAnimations,
                     content: overlayContentAnimations,

package/dist/components/core/Popover/PopoverTrigger.d.ts

@@ -1,3 +1,3 @@
 import React from "react";
 import { PopoverTriggerProps } from "./Popover.types";
-export declare const PopoverTrigger: React.ForwardRefExoticComponent<Omit<PopoverTriggerProps, "ref"> & React.RefAttributes<any>>;
+export declare const PopoverTrigger: React.ForwardRefExoticComponent<Omit<PopoverTriggerProps, "ref"> & React.RefAttributes<HTMLElement>>;

package/dist/components/core/Popover/PopoverTrigger.js

@@ -5,6 +5,7 @@ import { usePopoverContext } from './PopoverContext.js';
 const PopoverTrigger = React__default.forwardRef(({ children, className, ...props }, ref) => {
     var _a;
     const context = usePopoverContext();
+    const childElement = children;
     // Create trigger events based on triggerType
     const getTriggerEvents = () => {
         if (context.triggerType === "click") {
@@ -14,7 +15,7 @@ const PopoverTrigger = React__default.forwardRef(({ children, className, ...prop
                     e.preventDefault();
                     context.onOpenChange(!context.isOpen);
                     // Call the original onClick if it exists
-                    (_b = (_a = children.props) === null || _a === void 0 ? void 0 : _a.onClick) === null || _b === void 0 ? void 0 : _b.call(_a, e);
+                    (_b = (_a = childElement.props) === null || _a === void 0 ? void 0 : _a.onClick) === null || _b === void 0 ? void 0 : _b.call(_a, e);
                 },
             };
         }
@@ -24,7 +25,7 @@ const PopoverTrigger = React__default.forwardRef(({ children, className, ...prop
                     var _a, _b;
                     context.onOpenChange(true);
                     // Call the original onMouseEnter if it exists
-                    (_b = (_a = children.props) === null || _a === void 0 ? void 0 : _a.onMouseEnter) === null || _b === void 0 ? void 0 : _b.call(_a, e);
+                    (_b = (_a = childElement.props) === null || _a === void 0 ? void 0 : _a.onMouseEnter) === null || _b === void 0 ? void 0 : _b.call(_a, e);
                 },
                 onMouseLeave: (e) => {
                     var _a, _b;
@@ -32,43 +33,42 @@ const PopoverTrigger = React__default.forwardRef(({ children, className, ...prop
                         context.onOpenChange(false);
                     }
                     // Call the original onMouseLeave if it exists
-                    (_b = (_a = children.props) === null || _a === void 0 ? void 0 : _a.onMouseLeave) === null || _b === void 0 ? void 0 : _b.call(_a, e);
+                    (_b = (_a = childElement.props) === null || _a === void 0 ? void 0 : _a.onMouseLeave) === null || _b === void 0 ? void 0 : _b.call(_a, e);
                 },
             };
         }
         return {};
     };
     // Merge refs for the trigger element
-    function setRef(node) {
+    function mergeRefs(node) {
         context.triggerRef.current = node;
         if (ref) {
             if (typeof ref === "function")
                 ref(node);
-            else if (typeof ref === "object")
+            else if (typeof ref === "object" && ref)
                 ref.current = node;
         }
-        const childRef = children.ref;
+        const childRef = childElement.ref;
         if (childRef) {
             if (typeof childRef === "function")
                 childRef(node);
-            else if (typeof childRef === "object")
+            else if (typeof childRef === "object" && childRef)
                 childRef.current = node;
         }
     }
     const triggerEvents = getTriggerEvents();
-    const childElement = children;
     return React__default.cloneElement(childElement, {
-        ref: setRef,
+        ref: mergeRefs,
         "aria-expanded": context.isOpen,
         "aria-haspopup": true,
         "aria-controls": context.contentId,
-        className: cn((_a = childElement.props) === null || _a === void 0 ? void 0 : _a.className, className, "popover-trigger"),
+        className: cn("popover-trigger", (_a = childElement.props) === null || _a === void 0 ? void 0 : _a.className, className),
         "data-state": context.isOpen ? "open" : "closed",
         "data-trigger-type": context.triggerType,
         ...triggerEvents,
         ...props,
     });
 });
-PopoverTrigger.displayName = "PopoverTrigger";
+PopoverTrigger.displayName = "Popover.Trigger";
 
 export { PopoverTrigger };

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

@@ -6,23 +6,24 @@ import { ProgressProps } from "./Progress.types";
  * Features:
  * - Determinate mode: Shows specific progress value (0-100)
  * - Indeterminate mode: Animated loading state when value is undefined
- * - Multiple sizes and semantic colors
+ * - Multiple sizes with default primary color
+ * - className controls the fill bar color (the primary styling target)
+ * - wrapperClassName controls the outer container
  * - Flexible label positioning (right, top, bottom, inside)
  * - Respects reduced motion preferences
- * - Full className override support
  *
  * @example
- * // Determinate progress
- * <Progress value={60} color="primary" />
+ * // Default (primary color)
+ * <Progress value={60} />
+ *
+ * // Custom fill color via className
+ * <Progress value={70} className="bg-[var(--color-success)]" />
  *
  * // With label
  * <Progress value={75} showLabel labelPosition="right" />
  *
  * // Indeterminate (loading)
- * <Progress color="primary" />
- *
- * // Custom label format
- * <Progress value={50} showLabel formatLabel={(pct) => `${pct}% complete`} />
+ * <Progress />
  */
 declare const Progress: React.ForwardRefExoticComponent<ProgressProps & React.RefAttributes<HTMLDivElement>>;
 export { Progress };