@flikk/ui 1.0.0-beta.2 → 1.0.0-beta.21

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/MessageList.animations.d.ts

@@ -0,0 +1,6 @@
+import type { Variants } from 'motion/react';
+/**
+ * Returns animation variants for message list items, or undefined
+ * when animations should be disabled (reduced motion or shouldAnimate=false).
+ */
+export declare const getMessageItemVariants: (shouldReduceMotion: boolean | null, shouldAnimate: boolean) => Variants | undefined;

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

@@ -0,0 +1,32 @@
+/**
+ * Returns animation variants for message list items, or undefined
+ * when animations should be disabled (reduced motion or shouldAnimate=false).
+ */
+const getMessageItemVariants = (shouldReduceMotion, shouldAnimate) => {
+    if (shouldReduceMotion || !shouldAnimate)
+        return undefined;
+    return {
+        initial: {
+            opacity: 0,
+            y: 10,
+        },
+        animate: {
+            opacity: 1,
+            y: 0,
+            transition: {
+                duration: 0.3,
+                ease: [0.2, 0.65, 0.3, 0.9],
+            },
+        },
+        exit: {
+            opacity: 0,
+            scale: 0.97,
+            transition: {
+                duration: 0.15,
+                ease: 'easeIn',
+            },
+        },
+    };
+};
+
+export { getMessageItemVariants };

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

@@ -0,0 +1,5 @@
+import React from 'react';
+import type { ScrollAreaRef } from '../ScrollArea/ScrollArea.types';
+import type { MessageListProps } from './MessageList.types';
+declare const MessageList: React.ForwardRefExoticComponent<MessageListProps & React.RefAttributes<ScrollAreaRef>>;
+export { MessageList };

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

@@ -0,0 +1,78 @@
+import { jsx } from 'react/jsx-runtime';
+import React__default, { useRef, useCallback, useEffect } from 'react';
+import { useReducedMotion, motion, AnimatePresence } from 'motion/react';
+import { cn } from '../../../utils/cn.js';
+import { ScrollArea } from '../ScrollArea/ScrollArea.js';
+import '../ScrollArea/smooth/SmoothScrollEngine.js';
+import { messageListTheme } from './MessageList.theme.js';
+import { getMessageItemVariants } from './MessageList.animations.js';
+
+const MessageList = React__default.forwardRef(({ children, autoScroll = true, scrollThreshold = 100, shouldAnimate = true, className, theme: customTheme, ...props }, ref) => {
+    var _a, _b;
+    const shouldReduceMotion = useReducedMotion();
+    const itemVariants = getMessageItemVariants(shouldReduceMotion, shouldAnimate);
+    const scrollAreaRef = useRef(null);
+    const userHasScrolledRef = useRef(false);
+    const childCountRef = useRef(0);
+    const scrollToBottom = useCallback(() => {
+        const el = scrollAreaRef.current;
+        if (!el)
+            return;
+        el.scrollTop = el.scrollHeight;
+    }, []);
+    const handleScroll = useCallback(() => {
+        const el = scrollAreaRef.current;
+        if (!el)
+            return;
+        const { scrollTop, scrollHeight, clientHeight } = el;
+        const isAtBottom = scrollHeight - scrollTop - clientHeight < scrollThreshold;
+        userHasScrolledRef.current = !isAtBottom;
+    }, [scrollThreshold]);
+    const childCount = React__default.Children.count(children);
+    // Auto-scroll when new children are added
+    useEffect(() => {
+        if (!autoScroll)
+            return;
+        if (childCount > childCountRef.current && !userHasScrolledRef.current) {
+            // rAF ensures AnimatePresence has mounted the new child before measuring
+            requestAnimationFrame(scrollToBottom);
+        }
+        childCountRef.current = childCount;
+    }, [childCount, autoScroll, scrollToBottom]);
+    // Scroll to bottom on initial mount
+    useEffect(() => {
+        scrollToBottom();
+    }, [scrollToBottom]);
+    // Dev warning for missing keys
+    if (process.env.NODE_ENV !== 'production') {
+        React__default.Children.forEach(children, (child) => {
+            if (React__default.isValidElement(child) && child.key === null) {
+                console.warn('[Message.List]: Each child must have a stable key prop for animations to work correctly.');
+            }
+        });
+    }
+    const baseStyle = (_a = customTheme === null || customTheme === void 0 ? void 0 : customTheme.baseStyle) !== null && _a !== void 0 ? _a : messageListTheme.baseStyle;
+    const innerStyle = (_b = customTheme === null || customTheme === void 0 ? void 0 : customTheme.innerStyle) !== null && _b !== void 0 ? _b : messageListTheme.innerStyle;
+    const wrappedChildren = React__default.Children.map(children, (child) => {
+        if (!React__default.isValidElement(child))
+            return child;
+        if (itemVariants) {
+            return (jsx(motion.div, { layout: true, variants: itemVariants, initial: "initial", animate: "animate", exit: "exit", children: child }, child.key));
+        }
+        return jsx("div", { children: child }, child.key);
+    });
+    // Merge internal ref with forwarded ref
+    const setRefs = useCallback((node) => {
+        scrollAreaRef.current = node;
+        if (typeof ref === 'function') {
+            ref(node);
+        }
+        else if (ref) {
+            ref.current = node;
+        }
+    }, [ref]);
+    return (jsx(ScrollArea, { ref: setRefs, type: "hover", orientation: "vertical", className: cn(baseStyle, className), onScroll: handleScroll, role: "log", "aria-live": "polite", ...props, children: jsx("div", { className: innerStyle, children: jsx(AnimatePresence, { mode: "popLayout", initial: false, children: wrappedChildren }) }) }));
+});
+MessageList.displayName = 'Message.List';
+
+export { MessageList };

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

@@ -0,0 +1,2 @@
+import type { MessageListTheme } from './MessageList.types';
+export declare const messageListTheme: MessageListTheme;

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

@@ -0,0 +1,6 @@
+const messageListTheme = {
+    baseStyle: 'w-full',
+    innerStyle: 'flex flex-col gap-2 p-4',
+};
+
+export { messageListTheme };

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

@@ -0,0 +1,32 @@
+import { ReactNode, HTMLAttributes } from 'react';
+export interface MessageListTheme {
+    baseStyle: string;
+    innerStyle: string;
+}
+export interface MessageListThemeOverrides {
+    baseStyle?: string;
+    innerStyle?: string;
+}
+export interface MessageListProps extends HTMLAttributes<HTMLDivElement> {
+    /** Message children to render. Each child must have a stable `key` for animations. */
+    children?: ReactNode;
+    /**
+     * Auto-scroll to bottom when new children are added,
+     * unless the user has manually scrolled up.
+     * @default true
+     */
+    autoScroll?: boolean;
+    /**
+     * Pixels from the bottom to consider "at bottom" for auto-scroll detection.
+     * @default 100
+     */
+    scrollThreshold?: number;
+    /**
+     * Enable enter/exit animations for messages.
+     * Automatically disabled when the OS prefers reduced motion.
+     * @default true
+     */
+    shouldAnimate?: boolean;
+    /** Theme overrides for the list container and inner wrapper. */
+    theme?: MessageListThemeOverrides;
+}

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,27 @@
 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';
 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/Modal.d.ts

@@ -14,8 +14,8 @@ export declare const Modal: {
         ({ children, className, ...props }: import("./Modal.types").ModalTitleProps): import("react/jsx-runtime").JSX.Element;
         displayName: string;
     };
-    Description: {
-        ({ children, className, ...props }: import("./Modal.types").ModalDescriptionProps): import("react/jsx-runtime").JSX.Element;
+    Subtitle: {
+        ({ children, className, ...props }: import("./Modal.types").ModalSubtitleProps): import("react/jsx-runtime").JSX.Element;
         displayName: string;
     };
     Body: {

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

@@ -6,7 +6,7 @@ import { modalTheme, modalSizeVariants } from './Modal.theme.js';
 import { modalContentAnimations, modalOverlayAnimations } from './Modal.animations.js';
 import { ModalHeader } from './ModalHeader.js';
 import { ModalTitle } from './ModalTitle.js';
-import { ModalDescription } from './ModalDescription.js';
+import { ModalSubtitle } from './ModalSubtitle.js';
 import { ModalBody } from './ModalBody.js';
 import { ModalFooter } from './ModalFooter.js';
 
@@ -23,7 +23,7 @@ const ModalRoot = ({ isOpen, onClose, size = "md", variant = "default", closeOnO
     // Generate unique IDs for ARIA linkage
     const id = useId();
     const titleId = `${id}-title`;
-    const descriptionId = `${id}-description`;
+    const subtitleId = `${id}-subtitle`;
     // State for tracking if modal body is scrollable
     const [isBodyScrollable, setIsBodyScrollable] = useState(false);
     // Reset scroll state when modal closes
@@ -32,6 +32,9 @@ const ModalRoot = ({ isOpen, onClose, size = "md", variant = "default", closeOnO
             setIsBodyScrollable(false);
         }
     }, [isOpen]);
+    // Detect whether size is a preset token or an arbitrary Tailwind class
+    const SIZE_TOKENS = ["sm", "md", "lg", "xl", "full"];
+    const isSizeToken = SIZE_TOKENS.includes(size);
     // Merge theme with overrides
     const theme = {
         ...modalTheme,
@@ -46,6 +49,7 @@ const ModalRoot = ({ isOpen, onClose, size = "md", variant = "default", closeOnO
         isOpen,
         onClose,
         size,
+        isSizeToken,
         closeOnOverlayClick,
         closeOnEsc,
         showCloseButton,
@@ -53,9 +57,9 @@ const ModalRoot = ({ isOpen, onClose, size = "md", variant = "default", closeOnO
         isBodyScrollable,
         setIsBodyScrollable,
         titleId,
-        descriptionId,
+        subtitleId,
     };
-    return (jsx(Overlay, { isOpen: isOpen, onClose: onClose, closeOnOverlayClick: closeOnOverlayClick, closeOnEsc: closeOnEsc, position: "center", role: role, ariaModal: true, ariaLabelledBy: titleId, ariaDescribedBy: descriptionId, contentClassName: cn(theme.container, (_a = theme.containerVariants) === null || _a === void 0 ? void 0 : _a[variant], modalSizeVariants[size], className), animations: {
+    return (jsx(Overlay, { isOpen: isOpen, onClose: onClose, closeOnOverlayClick: closeOnOverlayClick, closeOnEsc: closeOnEsc, position: "center", role: role, ariaModal: true, ariaLabelledBy: titleId, ariaDescribedBy: subtitleId, contentClassName: cn(theme.container, (_a = theme.containerVariants) === null || _a === void 0 ? void 0 : _a[variant], isSizeToken ? modalSizeVariants[size] : size, className), animations: {
             overlay: modalOverlayAnimations,
             content: modalContentAnimations,
         }, ...props, children: jsx(ModalContext.Provider, { value: contextValue, children: children }) }));
@@ -65,7 +69,7 @@ ModalRoot.displayName = "Modal";
 const Modal = Object.assign(ModalRoot, {
     Header: ModalHeader,
     Title: ModalTitle,
-    Description: ModalDescription,
+    Subtitle: ModalSubtitle,
     Body: ModalBody,
     Footer: ModalFooter,
 });

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

@@ -8,17 +8,17 @@ const modalTheme = {
     },
     header: "flex items-start justify-between p-6 pb-0 shrink-0 border-b border-transparent gap-6 relative",
     headerContent: "flex flex-col items-start gap-2 flex-1",
-    title: "text-base leading-6 font-semibold text-[var(--color-text-primary)]",
-    description: "text-sm text-[var(--color-text-secondary)] mt-0.5",
+    title: "text-lg leading-6 font-semibold text-[var(--color-text-primary)]",
+    subtitle: "text-base text-[var(--color-text-muted)] mt-0.5",
     body: "flex-1 overflow-y-auto p-6 pb-3",
     footer: "flex items-center justify-end gap-2 p-6 py-3 border-t border-transparent",
 };
 // Size variants for the modal container
 const modalSizeVariants = {
-    sm: "max-w-sm",
-    md: "max-w-md",
-    lg: "max-w-lg",
-    xl: "max-w-xl",
+    sm: "max-w-sm mx-4 sm:mx-0",
+    md: "max-w-md mx-4 sm:mx-0",
+    lg: "max-w-lg mx-4 sm:mx-0",
+    xl: "max-w-xl mx-4 sm:mx-0",
     full: "max-w-full mx-4",
 };
 

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

@@ -1,5 +1,7 @@
 import React from "react";
-export type ModalSize = "sm" | "md" | "lg" | "xl" | "full";
+export type ModalSizeToken = "sm" | "md" | "lg" | "xl" | "full";
+/** Preset size token or any arbitrary Tailwind width class, e.g. `"w-80"`, `"w-[50vw]"` */
+export type ModalSize = ModalSizeToken | (string & {});
 export type ModalVariant = "default" | "translucent";
 export interface ModalTheme {
     overlay: string;
@@ -8,7 +10,7 @@ export interface ModalTheme {
     header: string;
     headerContent: string;
     title: string;
-    description: string;
+    subtitle: string;
     body: string;
     footer: string;
 }
@@ -19,7 +21,7 @@ export interface ModalThemeOverrides {
     header?: string;
     headerContent?: string;
     title?: string;
-    description?: string;
+    subtitle?: string;
     body?: string;
     footer?: string;
 }
@@ -27,6 +29,7 @@ export interface ModalContextValue {
     isOpen: boolean;
     onClose: () => void;
     size: ModalSize;
+    isSizeToken: boolean;
     closeOnOverlayClick: boolean;
     closeOnEsc: boolean;
     showCloseButton: boolean;
@@ -34,7 +37,7 @@ export interface ModalContextValue {
     isBodyScrollable: boolean;
     setIsBodyScrollable: (scrollable: boolean) => void;
     titleId: string;
-    descriptionId: string;
+    subtitleId: string;
 }
 export interface ModalProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "onClose" | "onAnimationStart" | "onDragStart" | "onDrag" | "onDragEnd"> {
     isOpen: boolean;
@@ -56,7 +59,7 @@ export interface ModalProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "
      * - `alertdialog`: Alert dialog requiring user acknowledgment
      * @default "dialog"
      */
-    role?: 'dialog' | 'alertdialog';
+    role?: "dialog" | "alertdialog";
     children: React.ReactNode;
     className?: string;
     theme?: ModalThemeOverrides;
@@ -87,7 +90,7 @@ export interface ModalTitleProps extends React.HTMLAttributes<HTMLHeadingElement
     children: React.ReactNode;
     className?: string;
 }
-export interface ModalDescriptionProps extends React.HTMLAttributes<HTMLParagraphElement> {
+export interface ModalSubtitleProps extends React.HTMLAttributes<HTMLParagraphElement> {
     children: React.ReactNode;
     className?: string;
 }

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

@@ -2,12 +2,13 @@ import { jsxs, jsx } from 'react/jsx-runtime';
 import { cn } from '../../../utils/cn.js';
 import { useModalContext } from './Modal.js';
 import { Button } from '../Button/Button.js';
+import 'react';
 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";
 

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

@@ -0,0 +1,5 @@
+import { ModalSubtitleProps } from "./Modal.types";
+export declare const ModalSubtitle: {
+    ({ children, className, ...props }: ModalSubtitleProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

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

@@ -0,0 +1,11 @@
+import { jsx } from 'react/jsx-runtime';
+import { cn } from '../../../utils/cn.js';
+import { useModalContext } from './Modal.js';
+
+const ModalSubtitle = ({ children, className, ...props }) => {
+    const { theme, subtitleId } = useModalContext();
+    return (jsx("p", { id: subtitleId, className: cn(theme.subtitle, className), ...props, children: children }));
+};
+ModalSubtitle.displayName = "Modal.Subtitle";
+
+export { ModalSubtitle };

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

@@ -17,11 +17,11 @@ const backModalAnimations = {
         transition: { type: "spring", damping: 28, stiffness: 280 },
     },
     stacked: {
-        opacity: 1,
+        opacity: 0.5,
         scale: 0.9,
-        y: -4,
+        y: 4,
         borderRadius: "var(--modal-radius)",
-        filter: "brightness(0.94) blur(2px)",
+        filter: "brightness(0.94) blur(0px)",
         clipPath: "inset(0% 0% 88% 0%)",
         transition: { type: "spring", damping: 28, stiffness: 280 },
     },