@flikk/ui 1.0.0-beta.3 → 1.0.0-beta.31

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

@@ -1,8 +1,17 @@
+"use client";
 import { jsx } from 'react/jsx-runtime';
-import { useTypewriter } from '../../../hooks/useTypewriter.js';
+import { useMemo, useRef, useCallback, useEffect } from 'react';
+import { useReducedMotion, motion } from 'motion/react';
+import { cn } from '../../../utils/cn.js';
 
+const tokenize = (text) => {
+    if (!text)
+        return [];
+    // Split on word boundaries, preserving whitespace with each token
+    return text.match(/\S+\s*/g) || [];
+};
 /**
- * TypeWriter component that animates text word-by-word
+ * TypeWriter component that animates text word-by-word with a smooth fade-in
  *
  * @example
  * ```tsx
@@ -13,14 +22,70 @@ import { useTypewriter } from '../../../hooks/useTypewriter.js';
  * />
  * ```
  */
-const TypeWriter = ({ text, speed = 100, enabled = true, onComplete, className, }) => {
-    const { displayText } = useTypewriter({
-        text,
-        speed,
-        enabled,
-        onComplete,
+const TypeWriter = ({ text, speed = 80, enabled = true, onComplete, className, }) => {
+    const shouldReduceMotion = useReducedMotion();
+    const animate = enabled && !shouldReduceMotion;
+    const tokens = useMemo(() => tokenize(text), [text]);
+    const onCompleteRef = useRef(onComplete);
+    onCompleteRef.current = onComplete;
+    const fireComplete = useCallback(() => {
+        var _a;
+        (_a = onCompleteRef.current) === null || _a === void 0 ? void 0 : _a.call(onCompleteRef);
+    }, []);
+    // How many tokens have already been committed (and thus already animated). Updated AFTER
+    // commit in the effect below — NEVER mutated during render, so a StrictMode/concurrent
+    // double-render can't mark tokens "already animated" on a throwaway pass and suppress the
+    // entrance animation.
+    const revealedCountRef = useRef(0);
+    // Token count at the first render; only these original tokens get a staggered delay
+    // (tokens appended later — e.g. while streaming — fade in immediately).
+    const initialTokensCountRef = useRef(null);
+    if (initialTokensCountRef.current === null) {
+        initialTokensCountRef.current = tokens.length;
+    }
+    // Detect a non-append text change (shrink or full replace) so reveal tracking resets and the
+    // new text animates from scratch. Reading the ref during render is pure; it's written below.
+    const prevTextRef = useRef(text);
+    const isReplacement = !text.startsWith(prevTextRef.current) || text.length < prevTextRef.current.length;
+    const revealedBefore = isReplacement ? 0 : revealedCountRef.current;
+    // Commit the reveal bookkeeping after paint (pure render, side-effects in the effect).
+    useEffect(() => {
+        if (isReplacement)
+            initialTokensCountRef.current = tokens.length;
+        revealedCountRef.current = tokens.length;
+        prevTextRef.current = text;
     });
-    return jsx("p", { className: className, children: displayText });
+    // Reduced-motion / disabled: nothing animates, so the entrance can't drive completion —
+    // signal it after commit instead, otherwise callers that chain on onComplete hang forever.
+    useEffect(() => {
+        if (!animate && tokens.length > 0)
+            fireComplete();
+    }, [animate, tokens.length, fireComplete]);
+    if (!animate) {
+        return jsx("p", { className: cn("whitespace-pre-wrap wrap-break-word", className), children: text });
+    }
+    // Convert speed (ms per word) to seconds for stagger delay
+    const staggerDelay = speed / 1000;
+    const lastIndex = tokens.length - 1;
+    return (jsx("p", { className: cn("whitespace-pre-wrap wrap-break-word", className), children: tokens.map((token, index) => {
+            var _a;
+            // A token already revealed on a previous commit renders statically (no re-animation).
+            const isNew = index >= revealedBefore;
+            if (!isNew) {
+                return (jsx("span", { style: { display: 'inline' }, children: token }, `${index}-${token}`));
+            }
+            // Apply the stagger delay only to tokens present at the initial render.
+            const delay = index < ((_a = initialTokensCountRef.current) !== null && _a !== void 0 ? _a : 0) ? index * staggerDelay : 0;
+            return (jsx(motion.span, { initial: { opacity: 0, filter: 'blur(3px)' }, animate: { opacity: 1, filter: 'blur(0px)' }, transition: {
+                    duration: 0.25,
+                    delay: delay,
+                    ease: 'easeOut',
+                }, 
+                // The last (highest-index) token settles last — its completion marks the whole
+                // current batch as done. Fires once per newly-revealed batch, never before the
+                // animation has actually run.
+                onAnimationComplete: index === lastIndex ? fireComplete : undefined, style: { display: 'inline' }, children: token }, `${index}-${token}`));
+        }) }));
 };
 TypeWriter.displayName = 'TypeWriter';
 

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

@@ -1,7 +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) with premium spring
  */
 export declare const modalContentAnimations: Variants;

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

@@ -1,51 +1,41 @@
+"use client";
+import '../../../theme/ThemeContext.js';
+import '../../../theme/SurfaceContext.js';
+import { springs, overlayBackdropAnimations } from '../../../theme/animations.js';
+
 /**
  * Modal overlay animation variants
  */
-const modalOverlayAnimations = {
-    initial: {
-        opacity: 0
-    },
-    animate: {
-        opacity: 1,
-        transition: {
-            duration: 0.2,
-            ease: 'easeOut'
-        }
-    },
-    exit: {
-        opacity: 0,
-        transition: {
-            duration: 0.15,
-            ease: 'easeIn'
-        }
-    }
-};
+const modalOverlayAnimations = overlayBackdropAnimations;
 /**
  * Modal content animation variants
+ * Scale + slight slide (Vercel/Notion style) with premium spring
  */
 const modalContentAnimations = {
     initial: {
         opacity: 0,
-        y: 20
+        scale: 0.98,
+        y: 12,
+        willChange: "transform, opacity",
     },
     animate: {
         opacity: 1,
+        scale: 1,
         y: 0,
         transition: {
-            type: 'spring',
-            damping: 25,
-            stiffness: 300,
-            delay: 0.05
-        }
+            ...springs.smooth,
+            delay: 0.05,
+        },
     },
     exit: {
         opacity: 0,
-        y: 20,
+        scale: 0.98,
+        y: 8,
         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

@@ -1,9 +1,7 @@
-import React from "react";
-import { ModalProps, ModalContextValue } from "./Modal.types";
-export declare const ModalContext: React.Context<ModalContextValue | undefined>;
-export declare const useModalContext: () => ModalContextValue;
+import { ModalProps } from "./Modal.types";
+export { ModalContext, useModalContext } from "./ModalContext";
 export declare const Modal: {
-    ({ isOpen, onClose, size, variant, closeOnOverlayClick, closeOnEsc, showCloseButton, role, children, className, theme: themeOverrides, ...props }: ModalProps): import("react/jsx-runtime").JSX.Element;
+    ({ isOpen, onClose, size, closeOnOverlayClick, closeOnEsc, showCloseButton, role, children, className, theme: themeOverrides, elevation, lift, darkMode, ...props }: ModalProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 } & {
     Header: {
@@ -11,7 +9,7 @@ export declare const Modal: {
         displayName: string;
     };
     Title: {
-        ({ children, className, ...props }: import("./Modal.types").ModalTitleProps): import("react/jsx-runtime").JSX.Element;
+        ({ children, className, as: Tag, ...props }: import("./Modal.types").ModalTitleProps): import("react/jsx-runtime").JSX.Element;
         displayName: string;
     };
     Subtitle: {

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

@@ -1,25 +1,24 @@
+"use client";
 import { jsx } from 'react/jsx-runtime';
-import { createContext, useId, useState, useEffect, useContext } from 'react';
+import { useId, useState, useEffect, useMemo } from 'react';
 import { cn } from '../../../utils/cn.js';
 import { Overlay } from '../../effects/Overlay/Overlay.js';
 import { modalTheme, modalSizeVariants } from './Modal.theme.js';
 import { modalContentAnimations, modalOverlayAnimations } from './Modal.animations.js';
+import { ModalContext } from './ModalContext.js';
+export { useModalContext } from './ModalContext.js';
 import { ModalHeader } from './ModalHeader.js';
 import { ModalTitle } from './ModalTitle.js';
 import { ModalSubtitle } from './ModalSubtitle.js';
 import { ModalBody } from './ModalBody.js';
 import { ModalFooter } from './ModalFooter.js';
+import { useSurfaceElevation, SurfaceProvider, surfaceClasses } from '../../../theme/SurfaceContext.js';
 
-// Create context for Modal components
-const ModalContext = createContext(undefined);
-const useModalContext = () => {
-    const ctx = useContext(ModalContext);
-    if (!ctx)
-        throw new Error("Modal compound components must be used within <Modal>");
-    return ctx;
-};
-const ModalRoot = ({ isOpen, onClose, size = "md", variant = "default", closeOnOverlayClick = true, closeOnEsc = true, showCloseButton = true, role = "dialog", children, className, theme: themeOverrides, ...props }) => {
-    var _a;
+const ModalRoot = ({ isOpen, onClose, size = "md", closeOnOverlayClick = true, closeOnEsc = true, showCloseButton = true, role = "dialog", children, className, theme: themeOverrides, elevation, lift, darkMode = false, ...props }) => {
+    // Grounded backdrop overlay: a Modal covers the viewport, so it paints a FIXED rung 4
+    // regardless of where its <Modal> JSX sits (a Modal declared inside a Card must not
+    // inherit the Card's rung). Content inside still lifts relative to the modal.
+    const surfaceLevel = useSurfaceElevation({ baseRung: 4, ground: true, elevation, lift });
     // Generate unique IDs for ARIA linkage
     const id = useId();
     const titleId = `${id}-title`;
@@ -32,20 +31,20 @@ 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 = {
+    const theme = useMemo(() => ({
         ...modalTheme,
         ...(themeOverrides || {}),
-        containerVariants: {
-            ...modalTheme.containerVariants,
-            ...((themeOverrides === null || themeOverrides === void 0 ? void 0 : themeOverrides.containerVariants) || {}),
-        },
-    };
+    }), [themeOverrides]);
     // Context value
-    const contextValue = {
+    const contextValue = useMemo(() => ({
         isOpen,
         onClose,
         size,
+        isSizeToken,
         closeOnOverlayClick,
         closeOnEsc,
         showCloseButton,
@@ -54,11 +53,11 @@ const ModalRoot = ({ isOpen, onClose, size = "md", variant = "default", closeOnO
         setIsBodyScrollable,
         titleId,
         subtitleId,
-    };
-    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], modalSizeVariants[size], className), animations: {
+    }), [isOpen, onClose, size, isSizeToken, closeOnOverlayClick, closeOnEsc, showCloseButton, theme, isBodyScrollable, setIsBodyScrollable, titleId, subtitleId]);
+    return (jsx(Overlay, { isOpen: isOpen, onClose: onClose, closeOnOverlayClick: closeOnOverlayClick, closeOnEsc: closeOnEsc, position: "center", role: role, ariaModal: true, ariaLabelledBy: titleId, ariaDescribedBy: subtitleId, contentClassName: cn(surfaceClasses(surfaceLevel, { translucent: true, shadow: false }), theme.container, isSizeToken ? modalSizeVariants[size] : size, darkMode && "dark", className), animations: {
             overlay: modalOverlayAnimations,
             content: modalContentAnimations,
-        }, ...props, children: jsx(ModalContext.Provider, { value: contextValue, children: children }) }));
+        }, ...props, children: jsx(ModalContext.Provider, { value: contextValue, children: jsx(SurfaceProvider, { level: surfaceLevel, children: children }) }) }));
 };
 ModalRoot.displayName = "Modal";
 // Attach compound subcomponents
@@ -70,4 +69,4 @@ const Modal = Object.assign(ModalRoot, {
     Footer: ModalFooter,
 });
 
-export { Modal, ModalContext, useModalContext };
+export { Modal, ModalContext };

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

@@ -1,24 +1,27 @@
 const modalTheme = {
     // Note: overlay styling is now handled by the shared Overlay component
     overlay: "",
-    container: "relative w-full max-h-[calc(100vh-2rem)] rounded-[var(--modal-radius)] shadow-2xl shadow-black/30 flex flex-col my-4 min-h-0 overflow-hidden",
-    containerVariants: {
-        default: "bg-white ring-4 !ring-white/10 dark:bg-[var(--color-background-secondary)] border border-[var(--color-border)]",
-        translucent: "bg-gradient-to-b from-[var(--color-background)]/90 to-[var(--color-background)]/70 backdrop-blur-xl ring-4 ring-white/20 border-t border-[var(--color-border)]",
-    },
-    header: "flex items-start justify-between p-6 pb-0 shrink-0 border-b border-transparent gap-6 relative",
+    // bg comes from the relative-elevation engine (surfaceClasses) at runtime so a modal
+    // lifts above its host substrate; keep the dramatic shadow + ring + border + radius here.
+    container: "relative w-full max-h-[calc(100vh-2rem)] rounded-[var(--modal-radius)] shadow-2xl shadow-black/30 flex flex-col my-4 min-h-0 overflow-hidden ring-6 !ring-white/10 border border-[var(--color-border)]",
+    header: "flex items-start justify-between px-[var(--modal-px)] pt-[var(--modal-py)] 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)]",
+    title: "text-[length:var(--modal-title-size)] leading-6 font-semibold text-[var(--color-text-primary)]",
     subtitle: "text-sm text-[var(--color-text-secondary)] 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",
+    // pb-[...*0.75] is the gap before the footer — proportional to --modal-py
+    // (today's ratio, 12/16) so a themed --modal-py increase widens it too.
+    body: "flex-1 overflow-y-auto px-[var(--modal-px)] pt-[var(--modal-py)] pb-[calc(var(--modal-py)*0.75)]",
+    // Footer is deliberately lighter/tighter than header/body — expressed as a
+    // proportional calc() off the same tokens (today's ratios: 0.75x/0.5x) so
+    // that relationship survives a themed --modal-px/--modal-py override.
+    footer: "flex items-center justify-end gap-2 px-[calc(var(--modal-px)*0.75)] py-[calc(var(--modal-py)*0.5)] border-t border-transparent",
 };
 // Size variants for the modal container
 const modalSizeVariants = {
     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",
+    md: "max-w-lg mx-4 sm:mx-0",
+    lg: "max-w-2xl mx-4 sm:mx-0",
+    xl: "max-w-4xl mx-4 sm:mx-0",
     full: "max-w-full mx-4",
 };
 

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

@@ -1,10 +1,11 @@
 import React from "react";
-export type ModalSize = "sm" | "md" | "lg" | "xl" | "full";
-export type ModalVariant = "default" | "translucent";
+import type { SurfaceElevation } from "../../../theme/SurfaceContext";
+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 interface ModalTheme {
     overlay: string;
     container: string;
-    containerVariants: Record<ModalVariant, string>;
     header: string;
     headerContent: string;
     title: string;
@@ -15,7 +16,6 @@ export interface ModalTheme {
 export interface ModalThemeOverrides {
     overlay?: string;
     container?: string;
-    containerVariants?: Partial<Record<ModalVariant, string>>;
     header?: string;
     headerContent?: string;
     title?: string;
@@ -27,6 +27,7 @@ export interface ModalContextValue {
     isOpen: boolean;
     onClose: () => void;
     size: ModalSize;
+    isSizeToken: boolean;
     closeOnOverlayClick: boolean;
     closeOnEsc: boolean;
     showCloseButton: boolean;
@@ -40,13 +41,6 @@ export interface ModalProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "
     isOpen: boolean;
     onClose: () => void;
     size?: ModalSize;
-    /**
-     * Visual variant of the modal container.
-     * - `default`: Solid background with subtle ring
-     * - `translucent`: Frosted glass effect with reduced opacity and backdrop blur
-     * @default "default"
-     */
-    variant?: ModalVariant;
     closeOnOverlayClick?: boolean;
     closeOnEsc?: boolean;
     showCloseButton?: boolean;
@@ -56,10 +50,17 @@ 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;
+    /**
+     * Pin the surface elevation rung (overrides the automatic relative lift).
+     * A rung number (1–8) or a semantic alias ("surface"/"raised"/"overlay"…).
+     */
+    elevation?: SurfaceElevation;
+    /** `false` opts out of the relative lift — paints at the modal's base rung. */
+    lift?: boolean;
     /**
      * Force dark mode styling for the component. Use when placing the component
      * on a dark background while the page is in light mode. This applies the
@@ -86,6 +87,8 @@ export interface ModalFooterProps extends React.HTMLAttributes<HTMLDivElement> {
 export interface ModalTitleProps extends React.HTMLAttributes<HTMLHeadingElement> {
     children: React.ReactNode;
     className?: string;
+    /** Heading level to render. Defaults to 'h2'. */
+    as?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
 }
 export interface ModalSubtitleProps extends React.HTMLAttributes<HTMLParagraphElement> {
     children: React.ReactNode;

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

@@ -1,7 +1,8 @@
+"use client";
 import { jsx } from 'react/jsx-runtime';
-import { useRef, useCallback, useLayoutEffect } from 'react';
+import { useRef, useCallback, useEffect } from 'react';
 import { cn } from '../../../utils/cn.js';
-import { useModalContext } from './Modal.js';
+import { useModalContext } from './ModalContext.js';
 
 const ModalBody = ({ children, className, ...props }) => {
     const { theme, setIsBodyScrollable } = useModalContext();
@@ -13,17 +14,16 @@ const ModalBody = ({ children, className, ...props }) => {
             setIsBodyScrollable(scrollHeight > clientHeight);
         }
     }, [setIsBodyScrollable]);
-    // Check scrollable state on layout changes
-    useLayoutEffect(() => {
-        checkScrollable();
+    // Defer initial scroll check so it doesn't trigger layout thrashing during entrance animation
+    useEffect(() => {
+        const timer = setTimeout(checkScrollable, 300);
+        return () => clearTimeout(timer);
     }, [checkScrollable, children]);
-    // Set up resize observer to monitor content changes
-    useLayoutEffect(() => {
+    // Set up resize observer to monitor content changes (deferred to avoid animation jank)
+    useEffect(() => {
         const element = bodyRef.current;
         if (!element)
             return;
-        // Initial check
-        checkScrollable();
         // Create ResizeObserver to watch for content changes
         const resizeObserver = new ResizeObserver(checkScrollable);
         resizeObserver.observe(element);

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

@@ -0,0 +1,3 @@
+import { ModalContextValue } from "./Modal.types";
+export declare const ModalContext: import("react").Context<ModalContextValue | undefined>;
+export declare const useModalContext: () => ModalContextValue;

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

@@ -0,0 +1,16 @@
+"use client";
+import { createContext, useContext } from 'react';
+
+// Lives in its own module (not Modal.tsx) so sub-components — and external
+// providers like ModalStack/AlertDialog — can consume the context without
+// importing Modal.tsx, which imports the sub-components back (circular dep).
+// Modal.tsx re-exports both names, so `from "../Modal/Modal"` keeps working.
+const ModalContext = createContext(undefined);
+const useModalContext = () => {
+    const ctx = useContext(ModalContext);
+    if (!ctx)
+        throw new Error("Modal compound components must be used within <Modal>");
+    return ctx;
+};
+
+export { ModalContext, useModalContext };

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

@@ -1,10 +1,11 @@
+"use client";
 import { jsx } from 'react/jsx-runtime';
 import { cn } from '../../../utils/cn.js';
-import { useModalContext } from './Modal.js';
+import { useModalContext } from './ModalContext.js';
 
 const ModalFooter = ({ children, className, ...props }) => {
     const { theme, isBodyScrollable } = useModalContext();
-    return (jsx("div", { className: cn(theme.footer, isBodyScrollable && "border-border", className), ...props, children: children }));
+    return (jsx("div", { className: cn(theme.footer, isBodyScrollable && "border-[var(--color-border)]", className), ...props, children: children }));
 };
 ModalFooter.displayName = "Modal.Footer";
 

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

@@ -1,13 +1,15 @@
+"use client";
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { cn } from '../../../utils/cn.js';
-import { useModalContext } from './Modal.js';
+import { useModalContext } from './ModalContext.js';
 import { Button } from '../Button/Button.js';
-import { XMarkIcon } from '@heroicons/react/24/outline';
+import 'react';
+import { X } from '@phosphor-icons/react';
 
 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: "mono", variant: "outline", iconOnly: true, size: "sm", onClick: onClose, "aria-label": "Close modal", className: "rounded-full shrink-0", children: jsx(X, { className: "size-4" }) }) }))] }));
 };
 ModalHeader.displayName = "Modal.Header";
 

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

@@ -1,6 +1,7 @@
+"use client";
 import { jsx } from 'react/jsx-runtime';
 import { cn } from '../../../utils/cn.js';
-import { useModalContext } from './Modal.js';
+import { useModalContext } from './ModalContext.js';
 
 const ModalSubtitle = ({ children, className, ...props }) => {
     const { theme, subtitleId } = useModalContext();

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

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

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

@@ -1,10 +1,11 @@
+"use client";
 import { jsx } from 'react/jsx-runtime';
 import { cn } from '../../../utils/cn.js';
-import { useModalContext } from './Modal.js';
+import { useModalContext } from './ModalContext.js';
 
-const ModalTitle = ({ children, className, ...props }) => {
+const ModalTitle = ({ children, className, as: Tag = 'h2', ...props }) => {
     const { theme, titleId } = useModalContext();
-    return (jsx("div", { id: titleId, className: cn(theme.title, className), ...props, children: children }));
+    return (jsx(Tag, { id: titleId, className: cn(theme.title, className), ...props, children: children }));
 };
 ModalTitle.displayName = "Modal.Title";
 

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

@@ -1,2 +1,2 @@
 export { Modal } from "./Modal";
-export type { ModalProps, ModalSize, ModalVariant, ModalThemeOverrides } from "./Modal.types";
+export type { ModalProps, ModalSize, ModalThemeOverrides } from "./Modal.types";

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

@@ -1,3 +1,4 @@
+"use client";
 /**
  * Back modal — iOS-style scale-down when the front modal opens.
  */

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

@@ -5,7 +5,7 @@ export declare const ModalStack: {
     displayName: string;
 } & {
     Modal: {
-        ({ size, variant, showCloseButton, showBackButton, onClose, onBack, children, className, theme: themeOverrides, _stackOnClose, _isBackModal, }: ModalStackModalInternalProps): import("react/jsx-runtime").JSX.Element;
+        ({ size, showCloseButton, showBackButton, onClose, onBack, children, className, theme: themeOverrides, _stackOnClose, _isBackModal, }: ModalStackModalInternalProps): import("react/jsx-runtime").JSX.Element;
         displayName: string;
     };
 };

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

@@ -1,3 +1,4 @@
+"use client";
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { Children, isValidElement, useCallback, cloneElement } from 'react';
 import { motion, AnimatePresence } from 'motion/react';
@@ -39,7 +40,7 @@ const ModalStackRoot = ({ isOpen, onClose, closeOnOverlayClick = true, closeOnEs
             onClose();
         }
     }, [isFrontOpen, frontOnClose, onClose]);
-    return (jsx(Overlay, { isOpen: isOpen, onClose: handleClose, closeOnOverlayClick: closeOnOverlayClick, closeOnEsc: closeOnEsc, position: "center", role: "dialog", ariaModal: true, animations: {
+    return (jsx(Overlay, { isOpen: isOpen, onClose: handleClose, closeOnOverlayClick: closeOnOverlayClick, closeOnEsc: closeOnEsc, position: "center", animations: {
             overlay: modalOverlayAnimations,
             content: MODAL_STACK_CONTENT_ANIMATION,
         }, contentClassName: className, children: jsxs("div", { className: "relative flex items-center justify-center w-full", children: [backModal && (jsx(motion.div, { className: "w-full flex items-center justify-center", variants: backModalAnimations, initial: "initial", animate: isFrontOpen ? "stacked" : "idle", exit: "exit", style: { originY: 0 }, children: cloneElement(backModal, {

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

@@ -1,5 +1,5 @@
 import React from "react";
-import { ModalSize, ModalVariant, ModalThemeOverrides } from "../Modal/Modal.types";
+import { ModalSize, ModalThemeOverrides } from "../Modal/Modal.types";
 export interface ModalStackProps {
     isOpen: boolean;
     onClose: () => void;
@@ -12,7 +12,6 @@ export interface ModalStackModalProps {
     isOpen?: boolean;
     onClose?: () => void;
     size?: ModalSize;
-    variant?: ModalVariant;
     showCloseButton?: boolean;
     showBackButton?: boolean;
     onBack?: () => void;

package/dist/components/core/ModalStack/ModalStackModal.d.ts

@@ -6,6 +6,6 @@ export interface ModalStackModalInternalProps extends ModalStackModalProps {
     _isBackModal?: boolean;
 }
 export declare const ModalStackModal: {
-    ({ size, variant, showCloseButton, showBackButton, onClose, onBack, children, className, theme: themeOverrides, _stackOnClose, _isBackModal, }: ModalStackModalInternalProps): import("react/jsx-runtime").JSX.Element;
+    ({ size, showCloseButton, showBackButton, onClose, onBack, children, className, theme: themeOverrides, _stackOnClose, _isBackModal, }: ModalStackModalInternalProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };