flikkui 0.1.0-beta.9 → 0.2.0-beta.1

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

@@ -0,0 +1,8 @@
+import React from 'react';
+export interface MessageActionsProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Action buttons to display
+     */
+    children: React.ReactNode;
+}
+export declare const MessageActions: React.ForwardRefExoticComponent<MessageActionsProps & React.RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1,16 @@
+import React__default from 'react';
+import { cn } from '../../../utils/cn.js';
+import { useMessageContext } from './MessageContext.js';
+import { messageTheme } from './Message.theme.js';
+
+const MessageActions = React__default.forwardRef(({ children, className, ...props }, ref) => {
+    const { isStreaming } = useMessageContext();
+    // Don't show actions if streaming
+    if (isStreaming) {
+        return null;
+    }
+    return (React__default.createElement("div", { ref: ref, className: cn(messageTheme.actionsContainerStyle, className), ...props }, children));
+});
+MessageActions.displayName = 'Message.Actions';
+
+export { MessageActions };

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

@@ -0,0 +1,16 @@
+import React from 'react';
+export interface MessageAvatarComponentProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * The source URL for the avatar image
+     */
+    src?: string;
+    /**
+     * The name or alt text for the avatar
+     */
+    name: string;
+    /**
+     * Fallback content to display when image fails to load
+     */
+    fallback?: React.ReactNode;
+}
+export declare const MessageAvatar: React.ForwardRefExoticComponent<MessageAvatarComponentProps & React.RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1,16 @@
+import React__default from 'react';
+import { Avatar } from '../Avatar/Avatar.js';
+import { useMessageContext } from './MessageContext.js';
+
+const MessageAvatar = React__default.forwardRef(({ src, name, fallback, className, ...props }, ref) => {
+    const { variant } = useMessageContext();
+    // Don't render avatar for system messages
+    if (variant === 'system') {
+        return null;
+    }
+    return (React__default.createElement("div", { ref: ref, className: className, ...props },
+        React__default.createElement(Avatar, { src: src, alt: name, fallback: fallback, size: "xs" })));
+});
+MessageAvatar.displayName = 'Message.Avatar';
+
+export { MessageAvatar };

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

@@ -0,0 +1,8 @@
+import React from 'react';
+export interface MessageContentProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * The message content
+     */
+    children: React.ReactNode;
+}
+export declare const MessageContent: React.ForwardRefExoticComponent<MessageContentProps & React.RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1,21 @@
+import React__default from 'react';
+import { cn } from '../../../utils/cn.js';
+import { useMessageContext } from './MessageContext.js';
+import { messageTheme } from './Message.theme.js';
+import { TypeWriter } from './TypeWriter.js';
+
+const MessageContent = React__default.forwardRef(({ children, className, ...props }, ref) => {
+    const { variant, role, isStreaming, typingSpeed } = useMessageContext();
+    // Get variant-specific theme
+    const variantTheme = messageTheme.variants[variant];
+    // Build bubble style using theme structure
+    const bubbleStyle = cn(messageTheme.bubbleBaseStyle, variantTheme.bubbleStyle, className);
+    // Use TypeWriter for streaming assistant/receiver messages with string content
+    const shouldAnimate = (role === 'assistant' || variant === 'receiver') &&
+        isStreaming &&
+        typeof children === 'string';
+    return (React__default.createElement("div", { ref: ref, className: bubbleStyle, ...props }, shouldAnimate ? (React__default.createElement(TypeWriter, { text: children, speed: typingSpeed, enabled: true, className: "break-words" })) : typeof children === 'string' ? (React__default.createElement("p", { className: "break-words" }, children)) : (children)));
+});
+MessageContent.displayName = 'Message.Content';
+
+export { MessageContent };

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

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

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

@@ -0,0 +1,12 @@
+import { createContext, useContext } from 'react';
+
+const MessageContext = createContext(undefined);
+const useMessageContext = () => {
+    const context = useContext(MessageContext);
+    if (!context) {
+        throw new Error('Message compound components must be used within <Message>');
+    }
+    return context;
+};
+
+export { MessageContext, useMessageContext };

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

@@ -0,0 +1,8 @@
+import React from 'react';
+export interface MessageTimestampProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * The timestamp to display
+     */
+    timestamp: Date | string;
+}
+export declare const MessageTimestamp: React.ForwardRefExoticComponent<MessageTimestampProps & React.RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1,18 @@
+import React__default from 'react';
+import { cn } from '../../../utils/cn.js';
+import { formatTimestamp } from '../../../utils/dateUtils.js';
+import { useMessageContext } from './MessageContext.js';
+import { messageTheme } from './Message.theme.js';
+
+const MessageTimestamp = React__default.forwardRef(({ timestamp, className, ...props }, ref) => {
+    const { variant } = useMessageContext();
+    // Get variant-specific theme
+    const variantTheme = messageTheme.variants[variant];
+    // Build timestamp style using theme structure
+    const timestampStyle = cn(messageTheme.timestampStyle, variantTheme.timestampModifier, className);
+    return (React__default.createElement("div", { ref: ref, className: timestampStyle, ...props },
+        React__default.createElement("time", { dateTime: typeof timestamp === 'string' ? timestamp : timestamp.toISOString(), className: "select-none" }, formatTimestamp(timestamp))));
+});
+MessageTimestamp.displayName = 'Message.Timestamp';
+
+export { MessageTimestamp };

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

@@ -0,0 +1,38 @@
+import React from 'react';
+export interface TypeWriterProps {
+    /**
+     * The text to animate
+     */
+    text: string;
+    /**
+     * Speed in milliseconds per word
+     * @default 100
+     */
+    speed?: number;
+    /**
+     * Whether the animation is enabled
+     * @default true
+     */
+    enabled?: boolean;
+    /**
+     * Callback when animation completes
+     */
+    onComplete?: () => void;
+    /**
+     * Additional CSS classes
+     */
+    className?: string;
+}
+/**
+ * TypeWriter component that animates text word-by-word
+ *
+ * @example
+ * ```tsx
+ * <TypeWriter
+ *   text="Hello world, this is a typing animation"
+ *   speed={100}
+ *   enabled={true}
+ * />
+ * ```
+ */
+export declare const TypeWriter: React.FC<TypeWriterProps>;

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

@@ -0,0 +1,27 @@
+import React__default from 'react';
+import { useTypewriter } from '../../../hooks/useTypewriter.js';
+
+/**
+ * TypeWriter component that animates text word-by-word
+ *
+ * @example
+ * ```tsx
+ * <TypeWriter
+ *   text="Hello world, this is a typing animation"
+ *   speed={100}
+ *   enabled={true}
+ * />
+ * ```
+ */
+const TypeWriter = ({ text, speed = 100, enabled = true, onComplete, className, }) => {
+    const { displayText } = useTypewriter({
+        text,
+        speed,
+        enabled,
+        onComplete,
+    });
+    return React__default.createElement("p", { className: className }, displayText);
+};
+TypeWriter.displayName = 'TypeWriter';
+
+export { TypeWriter };

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

@@ -0,0 +1,5 @@
+export { Message } from './Message';
+export type { MessageProps, MessageRole, MessageVariant, MessageAvatarProps, MessageTheme, MessageThemeOverrides, MessageVariantTheme, } from './Message.types';
+export { messageTheme } from './Message.theme';
+export { TypeWriter } from './TypeWriter';
+export type { TypeWriterProps } from './TypeWriter';

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

@@ -0,0 +1,3 @@
+import React from "react";
+import { MetricProps } from "./Metric.types";
+export default function Metric({ value, label, description, trendValue, trendDirection, trendChart, size, color, icon, noBorder, className, ...props }: MetricProps): React.JSX.Element;

package/dist/components/core/Metric/Metric.js

@@ -0,0 +1,29 @@
+import React__default from 'react';
+import { cn } from '../../../utils/cn.js';
+import { metricTheme } from './Metric.theme.js';
+import { Badge } from '../Badge/Badge.js';
+import { ArrowTrendingUpIcon, ArrowTrendingDownIcon } from '@heroicons/react/24/outline';
+
+function Metric({ value, label, description, trendValue, trendDirection = "up", trendChart, size = "md", color = "primary", icon, noBorder = false, className, ...props }) {
+    const trendIcon = trendDirection === "up" ? (React__default.createElement(ArrowTrendingUpIcon, { className: "size-3.5", strokeWidth: 2.5 })) : (React__default.createElement(ArrowTrendingDownIcon, { className: "size-3.5", strokeWidth: 2.5 }));
+    const sizeStyles = metricTheme.sizes[size];
+    return (React__default.createElement("div", { className: cn(metricTheme.baseStyle, metricTheme.colorStyles[color], sizeStyles.container, noBorder && "border-transparent", className), "data-color": color, "data-size": size, ...props },
+        React__default.createElement("div", { className: "flex flex-col gap-3 " },
+            React__default.createElement("div", { className: cn("flex items-start gap-3", sizeStyles.contentPadding) },
+                icon && (React__default.createElement("div", { className: cn(metricTheme.iconContainerStyle, metricTheme.iconContainerColorStyles[color], sizeStyles.iconContainer), "data-color": color }, icon)),
+                React__default.createElement("div", { className: "flex flex-col flex-1" },
+                    React__default.createElement("div", { className: cn(metricTheme.labelStyle, sizeStyles.label) }, label),
+                    React__default.createElement("div", { className: "flex items-center gap-2" },
+                        React__default.createElement("div", { className: cn(metricTheme.valueStyle, sizeStyles.value) }, value),
+                        trendValue && (React__default.createElement("div", { className: "flex items-center gap-1" },
+                            React__default.createElement("div", { className: cn("rounded-full p-1 flex flex-shrink-0 w-fit h-fit", trendDirection === "up"
+                                    ? "bg-[var(--color-success-100)] text-[var(--color-success)]"
+                                    : "bg-[var(--color-danger-100)] text-[var(--color-danger)]") }, trendIcon),
+                            React__default.createElement(Badge, { color: trendDirection === "up" ? "success" : "danger", variant: "ghost", className: cn("!bg-transparent p-0 font-semibold !gap-1 !ring-0", trendDirection === "up"
+                                    ? "!text-[var(--color-success)]"
+                                    : "!text-[var(--color-danger)]") }, trendValue)))),
+                    description && (React__default.createElement("div", { className: cn(metricTheme.descriptionStyle, sizeStyles.description) }, description)))),
+            trendChart && (React__default.createElement("div", { className: "w-full h-12 flex-shrink-0 -mt-4" }, trendChart)))));
+}
+
+export { Metric as default };

package/dist/components/core/Metric/Metric.theme.d.ts

@@ -0,0 +1,6 @@
+import { MetricTheme } from "./Metric.types";
+/**
+ * Default theme for the Metric component
+ * Following Button component pattern with data attributes
+ */
+export declare const metricTheme: MetricTheme;

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

@@ -0,0 +1,68 @@
+/**
+ * Default theme for the Metric component
+ * Following Button component pattern with data attributes
+ */
+const metricTheme = {
+    // Base container styles
+    baseStyle: "rounded-2xl glass-effect transition-colors duration-200 overflow-hidden",
+    // Container border colors
+    colorStyles: {
+        // neutral: 'data-[color=neutral]:border-[var(--color-border)]',
+        // primary: 'data-[color=primary]:border-[var(--color-border)]',
+        // success: 'data-[color=success]:border-[var(--color-border)]',
+        // warning: 'data-[color=warning]:border-[var(--color-border)]',
+        // danger: 'data-[color=danger]:border-[var(--color-border)]',
+        neutral: "",
+        primary: "",
+        success: "",
+        warning: "",
+        danger: "",
+    },
+    // Icon container colors - applied directly with data attributes
+    iconContainerColorStyles: {
+        neutral: "data-[color=neutral]:bg-gray-100 " +
+            "data-[color=neutral]:text-[var(--color-text-primary)]",
+        primary: "data-[color=primary]:bg-[var(--color-primary-100)] " +
+            "data-[color=primary]:text-[var(--color-primary)] data-[color=primary]:shadow-blue-500/20",
+        success: "data-[color=success]:bg-[var(--color-success-50)] " +
+            "data-[color=success]:text-[var(--color-success)] data-[color=success]:shadow-green-500/20",
+        warning: "data-[color=warning]:bg-[var(--color-warning-50)] " +
+            "data-[color=warning]:text-[var(--color-warning)] data-[color=warning]:shadow-yellow-500/20",
+        danger: "data-[color=danger]:bg-[var(--color-danger-50)] " +
+            "data-[color=danger]:text-[var(--color-danger)] data-[color=danger]:shadow-rose-400/20",
+    },
+    // Size variants for container and sub-elements
+    sizes: {
+        sm: {
+            container: "", // Padding moved to content section
+            contentPadding: "p-3",
+            iconContainer: "size-10",
+            label: "text-xs",
+            value: "text-xl",
+            description: "text-xs mt-1",
+        },
+        md: {
+            container: "", // Padding moved to content section
+            contentPadding: "p-4",
+            iconContainer: "size-14",
+            label: "text-sm",
+            value: "text-2xl",
+            description: "text-xs mt-0.5",
+        },
+        lg: {
+            container: "", // Padding moved to content section
+            contentPadding: "p-5",
+            iconContainer: "size-16",
+            label: "text-base",
+            value: "text-3xl",
+            description: "text-sm mt-1",
+        },
+    },
+    // Common element styles
+    labelStyle: "font-semibold text-[var(--color-text-secondary)] mb-1",
+    valueStyle: "font-bold text-[var(--color-text-primary)] tracking-tight",
+    descriptionStyle: "text-[var(--color-text-secondary)]/80",
+    iconContainerStyle: "rounded-full flex items-center justify-center flex-shrink-0 p-3.5 border-t glass-effect !to-transparent !ring-0 shadow-lg",
+};
+
+export { metricTheme };

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

@@ -0,0 +1,73 @@
+import React from 'react';
+export type MetricSize = 'sm' | 'md' | 'lg';
+export type MetricColor = 'neutral' | 'primary' | 'success' | 'warning' | 'danger';
+export type TrendDirection = 'up' | 'down';
+export interface MetricProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * The main value to display (number or formatted string)
+     */
+    value: string | number;
+    /**
+     * Label describing the metric
+     */
+    label: string;
+    /**
+     * Optional description or secondary text
+     */
+    description?: string;
+    /**
+     * Trend value to display (e.g., "+10.34%", "-5.2%")
+     * Also acts as boolean - if provided, trend badge is shown
+     */
+    trendValue?: string;
+    /**
+     * Trend direction - determines icon and color
+     * @default 'up'
+     */
+    trendDirection?: TrendDirection;
+    /**
+     * Optional trend chart (can be LineChart, AreaChart, BarChart, etc.)
+     */
+    trendChart?: React.ReactNode;
+    /**
+     * Size variant
+     * @default 'md'
+     */
+    size?: MetricSize;
+    /**
+     * Semantic color for icon and accents
+     * @default 'primary'
+     */
+    color?: MetricColor;
+    /**
+     * Optional icon to display
+     */
+    icon?: React.ReactNode;
+    /**
+     * Remove border from container
+     * @default false
+     */
+    noBorder?: boolean;
+    /**
+     * Custom className for styling overrides
+     */
+    className?: string;
+}
+export interface MetricTheme {
+    baseStyle: string;
+    colorStyles: Record<MetricColor, string>;
+    iconContainerColorStyles: Record<MetricColor, string>;
+    sizes: Record<MetricSize, {
+        container: string;
+        contentPadding: string;
+        iconContainer: string;
+        label: string;
+        value: string;
+        description: string;
+    }>;
+    labelStyle: string;
+    valueStyle: string;
+    descriptionStyle: string;
+    iconContainerStyle: string;
+}
+export type MetricThemeOverrides = Partial<MetricTheme>;

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

@@ -0,0 +1,3 @@
+export { default as Metric } from './Metric';
+export type { MetricProps, MetricSize, MetricColor, MetricTheme, MetricThemeOverrides, } from './Metric.types';
+export { metricTheme } from './Metric.theme';

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

@@ -1,7 +1,7 @@
 /**
  * Modal overlay animation variants
  */
-var modalOverlayAnimations = {
+const modalOverlayAnimations = {
     initial: {
         opacity: 0
     },
@@ -23,7 +23,7 @@ var modalOverlayAnimations = {
 /**
  * Modal content animation variants
  */
-var modalContentAnimations = {
+const modalContentAnimations = {
     initial: {
         opacity: 0,
         y: 20

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

@@ -1,12 +1,20 @@
 import React from "react";
 import { ModalProps, ModalContextValue } from "./Modal.types";
 export declare const useModalContext: () => ModalContextValue;
-declare const _default: {
+export declare const Modal: {
     ({ isOpen, onClose, size, closeOnOverlayClick, closeOnEsc, showCloseButton, children, className, theme: themeOverrides, ...props }: ModalProps): React.ReactPortal;
     displayName: string;
 } & {
     Header: {
-        ({ children, showCloseButton, className, ...props }: import("./Modal.types").ModalHeaderProps): React.JSX.Element;
+        ({ children, icon, showCloseButton, className, ...props }: import("./Modal.types").ModalHeaderProps): React.JSX.Element;
+        displayName: string;
+    };
+    Title: {
+        ({ children, className, ...props }: import("./Modal.types").ModalTitleProps): React.JSX.Element;
+        displayName: string;
+    };
+    Description: {
+        ({ children, className, ...props }: import("./Modal.types").ModalDescriptionProps): React.JSX.Element;
         displayName: string;
     };
     Body: {
@@ -18,4 +26,3 @@ declare const _default: {
         displayName: string;
     };
 };
-export default _default;

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

@@ -1,74 +1,90 @@
-import { __rest, __assign } from '../../../node_modules/tslib/tslib.es6.js';
-import React__default, { createContext, useCallback, useEffect, useContext } from 'react';
+import React__default, { createContext, useState, useCallback, useEffect, useContext } from 'react';
 import { createPortal } from 'react-dom';
+import { AnimatePresence, motion } from 'motion/react';
 import { cn } from '../../../utils/cn.js';
 import { modalTheme, modalSizeVariants } from './Modal.theme.js';
 import { modalOverlayAnimations, modalContentAnimations } from './Modal.animations.js';
 import { ModalHeader } from './ModalHeader.js';
+import { ModalTitle } from './ModalTitle.js';
+import { ModalDescription } from './ModalDescription.js';
 import { ModalBody } from './ModalBody.js';
 import { ModalFooter } from './ModalFooter.js';
-import { AnimatePresence } from '../../../node_modules/framer-motion/dist/es/components/AnimatePresence/index.js';
-import { motion } from '../../../node_modules/framer-motion/dist/es/render/components/motion/proxy.js';
 
 // Create context for Modal components
-var ModalContext = createContext(undefined);
-var useModalContext = function () {
-    var ctx = useContext(ModalContext);
+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;
 };
-var Modal = function (_a) {
-    var isOpen = _a.isOpen, onClose = _a.onClose, _b = _a.size, size = _b === void 0 ? "md" : _b, _c = _a.closeOnOverlayClick, closeOnOverlayClick = _c === void 0 ? true : _c, _d = _a.closeOnEsc, closeOnEsc = _d === void 0 ? true : _d, _e = _a.showCloseButton, showCloseButton = _e === void 0 ? true : _e, children = _a.children, className = _a.className, themeOverrides = _a.theme, props = __rest(_a, ["isOpen", "onClose", "size", "closeOnOverlayClick", "closeOnEsc", "showCloseButton", "children", "className", "theme"]);
+const ModalRoot = ({ isOpen, onClose, size = "md", closeOnOverlayClick = true, closeOnEsc = true, showCloseButton = true, children, className, theme: themeOverrides, ...props }) => {
+    // State for tracking if modal body is scrollable
+    const [isBodyScrollable, setIsBodyScrollable] = useState(false);
     // Handle ESC key
-    var handleEscKey = useCallback(function (event) {
+    const handleEscKey = useCallback((event) => {
         if (event.key === "Escape" && closeOnEsc) {
             onClose();
         }
     }, [closeOnEsc, onClose]);
     // Handle overlay click
-    var handleOverlayClick = useCallback(function (event) {
+    const handleOverlayClick = useCallback((event) => {
         if (event.target === event.currentTarget && closeOnOverlayClick) {
             onClose();
         }
     }, [closeOnOverlayClick, onClose]);
     // Setup event listeners
-    useEffect(function () {
+    useEffect(() => {
         if (isOpen) {
             document.addEventListener("keydown", handleEscKey);
             // Prevent body scroll
             document.body.style.overflow = "hidden";
-            return function () {
+            return () => {
                 document.removeEventListener("keydown", handleEscKey);
                 document.body.style.overflow = "unset";
             };
         }
+        else {
+            // Reset scroll state when modal closes
+            setIsBodyScrollable(false);
+        }
     }, [isOpen, handleEscKey]);
     // Merge theme with overrides
-    var theme = __assign(__assign({}, modalTheme), (themeOverrides || {}));
+    const theme = {
+        ...modalTheme,
+        ...(themeOverrides || {}),
+    };
     // Context value
-    var contextValue = {
-        isOpen: isOpen,
-        onClose: onClose,
-        size: size,
-        closeOnOverlayClick: closeOnOverlayClick,
-        closeOnEsc: closeOnEsc,
-        showCloseButton: showCloseButton,
-        theme: theme,
+    const contextValue = {
+        isOpen,
+        onClose,
+        size,
+        closeOnOverlayClick,
+        closeOnEsc,
+        showCloseButton,
+        theme,
+        isBodyScrollable,
+        setIsBodyScrollable,
     };
-    var modalContent = (React__default.createElement(ModalContext.Provider, { value: contextValue },
-        React__default.createElement(AnimatePresence, null, isOpen && (React__default.createElement(motion.div, { className: cn(theme.overlay), onClick: handleOverlayClick, variants: modalOverlayAnimations, initial: "initial", animate: "animate", exit: "exit" },
-            React__default.createElement(motion.div, __assign({ className: cn(theme.container, modalSizeVariants[size], className), variants: modalContentAnimations, initial: "initial", animate: "animate", exit: "exit" }, props),
-                React__default.createElement("div", { className: cn(theme.content) }, children)))))));
+    // Detect dark mode from document
+    const isDarkMode = typeof document !== "undefined" &&
+        (document.documentElement.classList.contains("dark") ||
+            document.body.classList.contains("dark") ||
+            document.querySelector(".dark") !== null);
+    const modalContent = (React__default.createElement(ModalContext.Provider, { value: contextValue },
+        React__default.createElement(AnimatePresence, null, isOpen && (React__default.createElement(motion.div, { className: cn(isDarkMode && "dark", theme.overlay), onClick: handleOverlayClick, variants: modalOverlayAnimations, initial: "initial", animate: "animate", exit: "exit" },
+            React__default.createElement(motion.div, { className: cn(theme.container, modalSizeVariants[size], className), variants: modalContentAnimations, initial: "initial", animate: "animate", exit: "exit", ...props }, children))))));
     // Render in portal
     return createPortal(modalContent, document.body);
 };
-Modal.displayName = "Modal";
+ModalRoot.displayName = "Modal";
 // Attach compound subcomponents
-var Modal$1 = Object.assign(Modal, {
+const Modal = Object.assign(ModalRoot, {
     Header: ModalHeader,
+    Title: ModalTitle,
+    Description: ModalDescription,
     Body: ModalBody,
     Footer: ModalFooter,
 });
 
-export { Modal$1 as default, useModalContext };
+export { Modal, useModalContext };

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

@@ -1,19 +1,20 @@
-var modalTheme = {
-    overlay: "fixed inset-0 bg-black/70 backdrop-blur-sm z-50 flex items-center justify-center",
-    container: "relative w-full max-h-full",
-    content: "bg-white rounded-2xl shadow-2xl shadow-black/30 border border-border ring-6 ring-white/20 max-h-full flex flex-col overflow-hidden",
-    header: "flex items-center justify-between p-4 shrink-0",
-    body: "flex-1 overflow-y-auto p-4",
-    footer: "flex items-center justify-end gap-3 p-4",
-    closeButton: "p-1 rounded-md hover:bg-neutral-100 transition-colors text-neutral-500 hover:text-neutral-700"
+const modalTheme = {
+    overlay: "fixed inset-0 bg-[var(--overlay-bg)] backdrop-blur-[var(--overlay-blur)] z-50 flex items-center justify-center",
+    container: "relative glass-effect-2 w-full max-h-[calc(100vh-2rem)] !bg-[var(--color-background)]/90 rounded-[var(--modal-rounded)] shadow-2xl shadow-black/30 !ring-4 !ring-white/10 flex flex-col my-4 min-h-0 overflow-hidden ",
+    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-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
-var modalSizeVariants = {
+const modalSizeVariants = {
     sm: "max-w-sm",
     md: "max-w-md",
     lg: "max-w-lg",
     xl: "max-w-xl",
-    full: "max-w-full mx-4"
+    full: "max-w-full mx-4",
 };
 
 export { modalSizeVariants, modalTheme };