@flikk/ui 1.0.0-beta.1

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

@@ -0,0 +1,169 @@
+import { ReactNode } from 'react';
+/**
+ * Message role types for AI conversations
+ */
+export type MessageRole = 'user' | 'assistant' | 'system';
+/**
+ * Message variant types for chat UI
+ */
+export type MessageVariant = 'sender' | 'receiver' | 'system';
+/**
+ * Avatar configuration for message sender
+ */
+export interface MessageAvatarProps {
+    /**
+     * The source URL for the avatar image
+     */
+    src?: string;
+    /**
+     * Alternative text for the avatar image
+     */
+    alt: string;
+    /**
+     * Fallback content to display when image fails to load
+     */
+    fallback?: ReactNode;
+}
+/**
+ * Message component props
+ * Supports both props-based API and compound component API
+ */
+export interface MessageProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'content'> {
+    /**
+     * The role of the message sender (AI semantic naming)
+     * Takes precedence over variant if both are provided
+     * - user: Messages from the user (maps to sender)
+     * - assistant: AI-generated responses (maps to receiver)
+     * - system: System notifications/messages
+     */
+    role?: MessageRole;
+    /**
+     * The variant of the message (Chat UI semantic naming)
+     * - sender: User messages (right-aligned)
+     * - receiver: Response messages (left-aligned)
+     * - system: System notifications (centered)
+     * @default "receiver"
+     */
+    variant?: MessageVariant;
+    /**
+     * The message content (supports rich content, markdown, etc.)
+     * Note: Optional when using compound API with Message.Content
+     */
+    content?: ReactNode;
+    /**
+     * Deprecated alias for content (for backward compatibility)
+     * @deprecated Use content instead
+     */
+    message?: ReactNode;
+    /**
+     * The timestamp of the message
+     */
+    timestamp?: Date | string;
+    /**
+     * Avatar configuration for the message sender
+     * Note: Not shown for system messages
+     */
+    avatar?: MessageAvatarProps;
+    /**
+     * Whether to show the timestamp
+     * @default true
+     */
+    showTimestamp?: boolean;
+    /**
+     * Whether the message is currently streaming (for AI responses)
+     * @default false
+     */
+    isStreaming?: boolean;
+    /**
+     * Custom streaming indicator content
+     * If not provided, a default animated indicator will be shown
+     */
+    streamingIndicator?: ReactNode;
+    /**
+     * Speed for word-by-word typing animation in milliseconds
+     * Only applies when isStreaming is true for assistant messages
+     * @default 100
+     */
+    typingSpeed?: number;
+    /**
+     * Custom action buttons slot
+     * Overrides default built-in actions (copy, regenerate)
+     */
+    actions?: ReactNode;
+    /**
+     * Callback when copy button is clicked (only for assistant/receiver messages)
+     */
+    onCopy?: () => void;
+    /**
+     * Callback when regenerate button is clicked (only for assistant/receiver messages)
+     */
+    onRegenerate?: () => void;
+    /**
+     * Whether to show built-in action buttons (copy, regenerate)
+     * Only shown for assistant/receiver messages when callbacks are provided
+     * @default true for assistant messages
+     */
+    showActions?: boolean;
+    /**
+     * Custom theme overrides
+     */
+    theme?: MessageThemeOverrides;
+}
+/**
+ * Variant-specific theme styles
+ */
+export interface MessageVariantTheme {
+    containerModifier: string;
+    bubbleStyle: string;
+    timestampModifier: string;
+}
+/**
+ * Message theme configuration
+ */
+export interface MessageTheme {
+    bubbleBaseStyle: string;
+    containerBaseStyle: string;
+    timestampStyle: string;
+    variants: {
+        sender: MessageVariantTheme;
+        receiver: MessageVariantTheme;
+        system: MessageVariantTheme;
+    };
+    streamingIndicatorStyle: string;
+    actionsContainerStyle: string;
+    actionButtonStyle: string;
+}
+/**
+ * Theme overrides for Message component
+ */
+export interface MessageThemeOverrides {
+    bubbleBaseStyle?: string;
+    containerBaseStyle?: string;
+    timestampStyle?: string;
+    variants?: {
+        sender?: Partial<MessageVariantTheme>;
+        receiver?: Partial<MessageVariantTheme>;
+        system?: Partial<MessageVariantTheme>;
+    };
+    streamingIndicatorStyle?: string;
+    actionsContainerStyle?: string;
+    actionButtonStyle?: string;
+    /** @deprecated Use variants.sender.containerModifier instead */
+    senderContainerStyle?: string;
+    /** @deprecated Use variants.sender.bubbleStyle instead */
+    senderBubbleStyle?: string;
+    /** @deprecated Use variants.sender.timestampModifier instead */
+    senderTimestampStyle?: string;
+    /** @deprecated Use variants.receiver.containerModifier instead */
+    receiverContainerStyle?: string;
+    /** @deprecated Use variants.receiver.bubbleStyle instead */
+    receiverBubbleStyle?: string;
+    /** @deprecated Use variants.receiver.timestampModifier instead */
+    receiverTimestampStyle?: string;
+    /** @deprecated Use variants.system.containerModifier instead */
+    systemContainerStyle?: string;
+    /** @deprecated Use variants.system.bubbleStyle instead */
+    systemBubbleStyle?: string;
+    /** @deprecated Use variants.system.timestampModifier instead */
+    systemTimestampStyle?: string;
+}

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,17 @@
+import { jsx } from 'react/jsx-runtime';
+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 (jsx("div", { ref: ref, className: cn(messageTheme.actionsContainerStyle, className), ...props, children: 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 { jsx } from 'react/jsx-runtime';
+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 (jsx("div", { ref: ref, className: className, ...props, children: jsx(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,22 @@
+import { jsx } from 'react/jsx-runtime';
+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 (jsx("div", { ref: ref, className: bubbleStyle, ...props, children: shouldAnimate ? (jsx(TypeWriter, { text: children, speed: typingSpeed, enabled: true, className: "break-words" })) : typeof children === 'string' ? (jsx("p", { className: "break-words", children: 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 { jsx } from 'react/jsx-runtime';
+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 (jsx("div", { ref: ref, className: timestampStyle, ...props, children: jsx("time", { dateTime: typeof timestamp === 'string' ? timestamp : timestamp.toISOString(), className: "select-none", children: 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 { jsx } from 'react/jsx-runtime';
+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 jsx("p", { className: className, children: 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 declare const Metric: React.ForwardRefExoticComponent<MetricProps & React.RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1,23 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+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';
+
+const Metric = React__default.forwardRef(({ value, label, description, trendValue, trendDirection = "up", trendChart, size = "md", variant = "filled", color = "primary", icon, className, ...props }, ref) => {
+    var _a;
+    const trendIcon = trendDirection === "up" ? (jsx(ArrowTrendingUpIcon, { className: "size-3.5", strokeWidth: 2.5 })) : (jsx(ArrowTrendingDownIcon, { className: "size-3.5", strokeWidth: 2.5 }));
+    const sizeStyles = metricTheme.sizes[size];
+    const variantStyles = metricTheme.variants[variant];
+    const variantColorStyles = metricTheme.variantColors[variant] || "";
+    const iconStyles = ((_a = metricTheme.iconContainerVariantColors[variant]) === null || _a === void 0 ? void 0 : _a[color]) || "";
+    return (jsx("div", { ref: ref, className: cn(metricTheme.baseStyle, variantStyles, variantColorStyles, sizeStyles.container, className), "data-size": size, ...props, children: jsxs("div", { className: "flex flex-col gap-3 ", children: [jsxs("div", { className: cn("flex items-start gap-3", sizeStyles.contentPadding), children: [icon && (jsx("div", { className: cn(metricTheme.iconContainerStyle, iconStyles, sizeStyles.iconContainer), children: icon })), jsxs("div", { className: "flex flex-col flex-1", children: [jsx("div", { className: cn(metricTheme.labelStyle, sizeStyles.label), children: label }), jsxs("div", { className: "flex items-center gap-2", children: [jsx("div", { className: cn(metricTheme.valueStyle, sizeStyles.value), children: value }), trendValue && (jsxs("div", { className: "flex items-center gap-1", children: [jsx("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)] dark:bg-[var(--color-success-100)]/20"
+                                                        : "bg-[var(--color-danger-100)] text-[var(--color-danger)] dark:bg-[var(--color-danger-100)]/20"), children: trendIcon }), jsx(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)]"), children: trendValue })] }))] }), description && (jsx("div", { className: cn(metricTheme.descriptionStyle, sizeStyles.description), children: description }))] })] }), trendChart && (jsx("div", { className: "w-full h-12 flex-shrink-0 -mt-4", children: trendChart }))] }) }));
+});
+Metric.displayName = "Metric";
+
+export { Metric };

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

@@ -0,0 +1,6 @@
+import { MetricTheme } from "./Metric.types";
+/**
+ * Default theme for the Metric component
+ * Uses variant-first color organization for reliable dark mode support
+ */
+export declare const metricTheme: MetricTheme;

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

@@ -0,0 +1,78 @@
+/**
+ * Default theme for the Metric component
+ * Uses variant-first color organization for reliable dark mode support
+ */
+const metricTheme = {
+    // Base container styles (shared across all variants)
+    baseStyle: "rounded-[var(--metric-radius)] transition-colors duration-200 overflow-hidden",
+    // Visual style variants (structure only, no colors)
+    variants: {
+        filled: "border border-[var(--color-border)]",
+        glass: "glass-effect",
+    },
+    // Container background styles per variant (color only applies to icon)
+    variantColors: {
+        filled: "bg-white dark:bg-[var(--color-background-secondary)]",
+        glass: "",
+    },
+    // Icon container styles organized PER VARIANT (color applies to icon)
+    iconContainerVariantColors: {
+        filled: {
+            neutral: "bg-white text-[var(--color-text-primary)] border border-[var(--color-border)] " +
+                "dark:bg-[var(--color-background-secondary)] dark:border-0",
+            primary: "bg-white text-[var(--color-primary)] border border-[var(--color-border)] " +
+                "dark:bg-[var(--color-background-secondary)] dark:border-0",
+            success: "bg-white text-[var(--color-success)] border border-[var(--color-border)] " +
+                "dark:bg-[var(--color-background-secondary)] dark:border-0",
+            warning: "bg-white text-[var(--color-warning)] border border-[var(--color-border)] " +
+                "dark:bg-[var(--color-background-secondary)] dark:border-0",
+            danger: "bg-white text-[var(--color-danger)] border border-[var(--color-border)] " +
+                "dark:bg-[var(--color-background-secondary)] dark:border-0",
+        },
+        glass: {
+            neutral: "glass-effect-1 !ring-0 text-[var(--color-text-primary)]",
+            primary: "glass-effect-2 !ring-0 shadow-lg shadow-blue-500/10 text-[var(--color-primary)] " +
+                "dark:text-[var(--color-primary-400)]",
+            success: "glass-effect-2 !ring-0 shadow-lg shadow-green-500/10 text-[var(--color-success)] " +
+                "dark:text-[var(--color-success-400)]",
+            warning: "glass-effect-2 !ring-0 shadow-lg shadow-yellow-500/10 text-[var(--color-warning)] " +
+                "dark:text-[var(--color-warning-400)]",
+            danger: "glass-effect-2 !ring-0 shadow-lg shadow-rose-500/10 text-[var(--color-danger)] " +
+                "dark:text-[var(--color-danger-400)]",
+        },
+    },
+    // 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",
+};
+
+export { metricTheme };

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

@@ -0,0 +1,92 @@
+import React from 'react';
+export type MetricSize = 'sm' | 'md' | 'lg';
+export type MetricColor = 'neutral' | 'primary' | 'success' | 'warning' | 'danger';
+export type MetricVariant = 'filled' | 'glass';
+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;
+    /**
+     * Visual style variant
+     * @default 'filled'
+     */
+    variant?: MetricVariant;
+    /**
+     * Semantic color for icon and accents
+     * @default 'primary'
+     */
+    color?: MetricColor;
+    /**
+     * Optional icon to display
+     */
+    icon?: React.ReactNode;
+    /**
+     * Custom className for styling overrides
+     */
+    className?: string;
+}
+export interface MetricTheme {
+    baseStyle: string;
+    variants: Record<MetricVariant, string>;
+    variantColors: Record<MetricVariant, string>;
+    iconContainerVariantColors: Record<MetricVariant, 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 interface MetricThemeOverrides {
+    baseStyle?: string;
+    variants?: Partial<Record<MetricVariant, string>>;
+    variantColors?: Partial<Record<MetricVariant, string>>;
+    iconContainerVariantColors?: Partial<Record<MetricVariant, Partial<Record<MetricColor, string>>>>;
+    sizes?: Partial<Record<MetricSize, Partial<{
+        container: string;
+        contentPadding: string;
+        iconContainer: string;
+        label: string;
+        value: string;
+        description: string;
+    }>>>;
+    labelStyle?: string;
+    valueStyle?: string;
+    descriptionStyle?: string;
+    iconContainerStyle?: string;
+}

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

@@ -0,0 +1,3 @@
+export { 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.d.ts

@@ -0,0 +1,9 @@
+import { Variants } from 'motion/react';
+/**
+ * Modal overlay animation variants
+ */
+export declare const modalOverlayAnimations: Variants;
+/**
+ * Modal content animation variants
+ */
+export declare const modalContentAnimations: Variants;

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

@@ -0,0 +1,51 @@
+/**
+ * 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'
+        }
+    }
+};
+/**
+ * Modal content animation variants
+ */
+const modalContentAnimations = {
+    initial: {
+        opacity: 0,
+        y: 20
+    },
+    animate: {
+        opacity: 1,
+        y: 0,
+        transition: {
+            type: 'spring',
+            damping: 25,
+            stiffness: 300,
+            delay: 0.05
+        }
+    },
+    exit: {
+        opacity: 0,
+        y: 20,
+        transition: {
+            duration: 0.2,
+            ease: 'easeIn'
+        }
+    }
+};
+
+export { modalContentAnimations, modalOverlayAnimations };