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

package/dist/components/core/Tabs/TabsContent.js

@@ -1,23 +1,48 @@
-import { __rest, __assign } from '../../../node_modules/tslib/tslib.es6.js';
-import React__default from 'react';
+import React__default, { useMemo } from 'react';
+import { useReducedMotion, motion, AnimatePresence } from 'motion/react';
 import { cn } from '../../../utils/cn.js';
 import { tabsTheme } from './Tabs.theme.js';
 import { useTabsContext } from './TabsContext.js';
+import { getTabsContentVariants } from './Tabs.animations.js';
 
 /**
- * TabsContent component displays content panels for tabs
+ * TabsContent component displays content panels for tabs with directional fade animations
  */
-var TabsContent = React__default.forwardRef(function (_a, ref) {
-    var value = _a.value, _b = _a.forceMount, forceMount = _b === void 0 ? false : _b, children = _a.children, className = _a.className, props = __rest(_a, ["value", "forceMount", "children", "className"]);
-    var _c = useTabsContext(), selectedValue = _c.value, orientation = _c.orientation;
-    var isSelected = value === selectedValue;
-    var shouldRender = forceMount || isSelected;
+const TabsContent = React__default.forwardRef(({ value, forceMount = false, children, className, ...props }, ref) => {
+    const { value: selectedValue, orientation } = useTabsContext();
+    const shouldReduceMotion = useReducedMotion();
+    // Check if we're in Storybook and should disable animations
+    const isInStorybook = typeof window !== 'undefined' && window.__STORYBOOK_DISABLE_ANIMATIONS__;
+    const shouldDisableAnimations = !!shouldReduceMotion || isInStorybook;
+    const isSelected = value === selectedValue;
+    const shouldRender = forceMount || isSelected;
+    // Compute animation variants without a global cache (HMR-safe)
+    const contentVariants = useMemo(() => getTabsContentVariants(shouldDisableAnimations), [shouldDisableAnimations]);
+    // For forceMount, we handle visibility differently to preserve DOM
+    if (forceMount) {
+        return (React__default.createElement(motion.div, { ref: ref, role: "tabpanel", "aria-labelledby": `${value}-tab`, id: `${value}-content`, tabIndex: 0, className: cn(tabsTheme.contentStyle, !isSelected && "hidden", // Hide when not selected but force mounted
+            className // User overrides take precedence
+            ), "data-state": isSelected ? "active" : "inactive", "data-orientation": orientation, style: {
+                // Ensure proper stacking context for animations
+                position: "relative",
+            }, ...props }, children));
+    }
+    // Standard behavior with AnimatePresence for enter/exit animations
     if (!shouldRender) {
         return null;
     }
-    return (React__default.createElement("div", __assign({ ref: ref, role: "tabpanel", "aria-labelledby": "".concat(value, "-tab"), id: "".concat(value, "-content"), tabIndex: 0, hidden: !isSelected && !forceMount, className: cn(tabsTheme.contentStyle, !isSelected && forceMount && "hidden", // Hide when not selected but force mounted
-        className // User overrides take precedence
-        ), "data-state": isSelected ? "active" : "inactive", "data-orientation": orientation }, props), children));
+    // Determine animation props (user props will override due to spread order)
+    const animationProps = shouldDisableAnimations ? {} : {
+        initial: "initial",
+        animate: "animate",
+        exit: "exit",
+        variants: contentVariants,
+    };
+    return (React__default.createElement(AnimatePresence, { mode: "wait" }, isSelected && (React__default.createElement(motion.div, { key: `content-${value}`, ref: ref, role: "tabpanel", "aria-labelledby": `${value}-tab`, id: `${value}-content`, tabIndex: 0, className: cn(tabsTheme.contentStyle, className // User overrides take precedence
+        ), "data-state": "active", "data-orientation": orientation, style: {
+            // Ensure proper stacking context for animations
+            position: "relative",
+        }, ...animationProps, ...props }, children))));
 });
 TabsContent.displayName = "TabsContent";
 

package/dist/components/core/Tabs/TabsContext.js

@@ -3,12 +3,12 @@ import { createContext, useContext } from 'react';
 /**
  * Context for sharing state between Tabs container and child components
  */
-var TabsContext = createContext(null);
+const TabsContext = createContext(null);
 /**
  * Hook to consume TabsContext
  */
-var useTabsContext = function () {
-    var context = useContext(TabsContext);
+const useTabsContext = () => {
+    const context = useContext(TabsContext);
     if (!context) {
         throw new Error("Tabs components must be used within a Tabs component");
     }

package/dist/components/core/Tabs/TabsList.d.ts

@@ -1,6 +1,6 @@
 import React from "react";
 import { TabsListProps } from "./Tabs.types";
 /**
- * TabsList component displays the tab headers container
+ * TabsList component displays the tab headers container with sliding underline
  */
 export declare const TabsList: React.ForwardRefExoticComponent<TabsListProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/core/Tabs/TabsList.js

@@ -1,16 +1,87 @@
-import { __rest, __assign } from '../../../node_modules/tslib/tslib.es6.js';
-import React__default from 'react';
+import React__default, { useState, useRef, useMemo, useEffect } from 'react';
+import { useReducedMotion, motion } from 'motion/react';
 import { cn } from '../../../utils/cn.js';
 import { tabsTheme } from './Tabs.theme.js';
 import { useTabsContext } from './TabsContext.js';
+import { getUnderlineTransition } from './Tabs.animations.js';
 
 /**
- * TabsList component displays the tab headers container
+ * TabsList component displays the tab headers container with sliding underline
  */
-var TabsList = React__default.forwardRef(function (_a, ref) {
-    var children = _a.children, className = _a.className, props = __rest(_a, ["children", "className"]);
-    var _b = useTabsContext(), orientation = _b.orientation, size = _b.size;
-    return (React__default.createElement("div", __assign({ ref: ref, role: "tablist", "aria-orientation": orientation, className: cn(tabsTheme.listStyle, className), "data-orientation": orientation, "data-size": size }, props), children));
+const TabsList = React__default.forwardRef(({ children, className, ...props }, ref) => {
+    const { value: activeValue, orientation, size } = useTabsContext();
+    const shouldReduceMotion = useReducedMotion();
+    // State for underline position and visibility
+    const [underlinePosition, setUnderlinePosition] = useState(null);
+    const [showUnderline, setShowUnderline] = useState(false);
+    // Ref to access the list element for calculations
+    const listRef = useRef(null);
+    // Calculate underline position based on active tab
+    const updateUnderlinePosition = useMemo(() => {
+        return () => {
+            if (!activeValue || !listRef.current) {
+                setShowUnderline(false);
+                return;
+            }
+            // Find the active trigger element
+            const activeTrigger = listRef.current.querySelector(`[data-value="${activeValue}"]`);
+            if (!activeTrigger) {
+                setShowUnderline(false);
+                return;
+            }
+            // Get the position relative to the list container
+            const listRect = listRef.current.getBoundingClientRect();
+            const triggerRect = activeTrigger.getBoundingClientRect();
+            const left = triggerRect.left - listRect.left;
+            const width = triggerRect.width;
+            setUnderlinePosition({ left, width });
+            setShowUnderline(true);
+        };
+    }, [activeValue]);
+    // Update underline position when active value changes or on mount
+    useEffect(() => {
+        // Small delay to ensure DOM is updated
+        const timeoutId = setTimeout(updateUnderlinePosition, 0);
+        return () => clearTimeout(timeoutId);
+    }, [updateUnderlinePosition]);
+    // Handle window resize to recalculate positions
+    useEffect(() => {
+        const handleResize = () => {
+            updateUnderlinePosition();
+        };
+        window.addEventListener('resize', handleResize);
+        return () => window.removeEventListener('resize', handleResize);
+    }, [updateUnderlinePosition]);
+    // Animation configuration for underline
+    const underlineAnimation = useMemo(() => {
+        return {
+            initial: false,
+            animate: underlinePosition ? {
+                x: underlinePosition.left,
+                width: underlinePosition.width,
+            } : {
+                x: 0,
+                width: 0,
+            },
+            transition: getUnderlineTransition(shouldReduceMotion),
+        };
+    }, [underlinePosition, shouldReduceMotion]);
+    return (React__default.createElement("div", { ref: (node) => {
+            listRef.current = node;
+            if (typeof ref === 'function') {
+                ref(node);
+            }
+            else if (ref) {
+                ref.current = node;
+            }
+        }, role: "tablist", "aria-orientation": orientation, className: cn(tabsTheme.listStyle, className), "data-orientation": orientation, "data-size": size, ...props },
+        children,
+        showUnderline && underlinePosition && (React__default.createElement(motion.div, { className: cn(tabsTheme.underlineStyle, "pointer-events-none" // Prevent interference with tab interactions
+            ), style: {
+                position: 'absolute',
+                bottom: 0,
+            }, ...underlineAnimation, "aria-hidden": "true" // Decorative element
+         }))));
 });
 TabsList.displayName = "TabsList";
 

package/dist/components/core/Tabs/TabsTrigger.d.ts

@@ -1,6 +1,6 @@
 import React from "react";
 import { TabsTriggerProps } from "./Tabs.types";
 /**
- * TabsTrigger component displays individual tab headers
+ * TabsTrigger component displays individual tab headers with optional animations
  */
 export declare const TabsTrigger: React.ForwardRefExoticComponent<TabsTriggerProps & React.RefAttributes<HTMLButtonElement>>;

package/dist/components/core/Tabs/TabsTrigger.js

@@ -1,71 +1,139 @@
-import { __rest, __assign } from '../../../node_modules/tslib/tslib.es6.js';
-import React__default from 'react';
+import React__default, { useMemo, useCallback, useEffect } from 'react';
+import { useReducedMotion, motion } from 'motion/react';
 import { cn } from '../../../utils/cn.js';
 import { tabsTheme } from './Tabs.theme.js';
 import { useTabsContext } from './TabsContext.js';
+import { getTabsTriggerVariants } from './Tabs.animations.js';
 
 /**
- * TabsTrigger component displays individual tab headers
+ * TabsTrigger component displays individual tab headers with optional animations
  */
-var TabsTrigger = React__default.forwardRef(function (_a, ref) {
-    var value = _a.value, _b = _a.disabled, disabled = _b === void 0 ? false : _b, children = _a.children, className = _a.className, onClick = _a.onClick, onKeyDown = _a.onKeyDown, props = __rest(_a, ["value", "disabled", "children", "className", "onClick", "onKeyDown"]);
-    var _c = useTabsContext(), selectedValue = _c.value, onValueChange = _c.onValueChange, orientation = _c.orientation, size = _c.size, contextDisabled = _c.disabled;
-    var isSelected = value === selectedValue;
-    var isDisabled = disabled || contextDisabled;
-    var handleClick = function (event) {
+const TabsTrigger = React__default.forwardRef(({ value, disabled = false, children, className, onClick, onKeyDown, ...props }, ref) => {
+    const { value: selectedValue, onValueChange, orientation, size, disabled: contextDisabled, registerTrigger, unregisterTrigger } = useTabsContext();
+    const shouldReduceMotion = useReducedMotion();
+    // Check if we're in Storybook and should disable animations
+    const isInStorybook = typeof window !== 'undefined' && window.__STORYBOOK_DISABLE_ANIMATIONS__;
+    const shouldDisableAnimations = !!shouldReduceMotion || isInStorybook;
+    // Memoize derived state flags for performance
+    const derivedState = useMemo(() => ({
+        isSelected: value === selectedValue,
+        isDisabled: disabled || contextDisabled,
+    }), [value, selectedValue, disabled, contextDisabled]);
+    const { isSelected, isDisabled } = derivedState;
+    // Compute animation variants without a global cache (HMR-safe)
+    const triggerVariants = useMemo(() => getTabsTriggerVariants(shouldDisableAnimations), [shouldDisableAnimations]);
+    // Dev-time a11y warning for icon-only triggers without aria-label
+    if (process.env.NODE_ENV !== 'production') {
+        if (typeof children === 'object' && React__default.isValidElement(children) && !props["aria-label"]) {
+            // If children is just an icon element, warn about missing aria-label
+            const childType = children.type;
+            if (typeof childType === 'function' && childType.name && childType.name.includes('Icon')) {
+                // eslint-disable-next-line no-console
+                console.warn("TabsTrigger with icon-only content should have 'aria-label' for accessibility.");
+            }
+        }
+    }
+    // Safe onClick handler with error handling
+    const handleClick = useCallback((event) => {
         if (isDisabled)
             return;
-        onValueChange(value);
-        onClick === null || onClick === void 0 ? void 0 : onClick(event);
-    };
-    var handleKeyDown = function (event) {
+        try {
+            onValueChange(value);
+            onClick === null || onClick === void 0 ? void 0 : onClick(event);
+        }
+        catch (error) {
+            if (process.env.NODE_ENV !== 'production') {
+                // eslint-disable-next-line no-console
+                console.error("Error in tab trigger click handler:", error);
+            }
+        }
+    }, [isDisabled, onValueChange, value, onClick]);
+    // Enhanced keyboard navigation handler with error handling
+    const handleKeyDown = useCallback((event) => {
         var _a, _b;
         // Handle keyboard navigation for tabs
         if (!isDisabled) {
-            switch (event.key) {
-                case "ArrowLeft":
-                case "ArrowUp":
-                    event.preventDefault();
-                    // Move to previous tab - focus previous trigger
-                    var prevTrigger = event.currentTarget.previousElementSibling;
-                    if (prevTrigger && prevTrigger.tagName === 'BUTTON' && !prevTrigger.disabled) {
-                        prevTrigger.focus();
-                        prevTrigger.click();
-                    }
-                    break;
-                case "ArrowRight":
-                case "ArrowDown":
-                    event.preventDefault();
-                    // Move to next tab - focus next trigger
-                    var nextTrigger = event.currentTarget.nextElementSibling;
-                    if (nextTrigger && nextTrigger.tagName === 'BUTTON' && !nextTrigger.disabled) {
-                        nextTrigger.focus();
-                        nextTrigger.click();
-                    }
-                    break;
-                case "Home":
-                    event.preventDefault();
-                    // Move to first tab
-                    var firstTrigger = (_a = event.currentTarget.parentElement) === null || _a === void 0 ? void 0 : _a.firstElementChild;
-                    if (firstTrigger && firstTrigger.tagName === 'BUTTON' && !firstTrigger.disabled) {
-                        firstTrigger.focus();
-                        firstTrigger.click();
-                    }
-                    break;
-                case "End":
-                    event.preventDefault();
-                    // Move to last tab
-                    var lastTrigger = (_b = event.currentTarget.parentElement) === null || _b === void 0 ? void 0 : _b.lastElementChild;
-                    if (lastTrigger && lastTrigger.tagName === 'BUTTON' && !lastTrigger.disabled) {
-                        lastTrigger.focus();
-                        lastTrigger.click();
-                    }
-                    break;
+            try {
+                switch (event.key) {
+                    case "ArrowLeft":
+                    case "ArrowUp":
+                        event.preventDefault();
+                        // Move to previous tab - focus previous trigger
+                        const prevTrigger = event.currentTarget.previousElementSibling;
+                        if (prevTrigger && prevTrigger.tagName === 'BUTTON' && !prevTrigger.disabled) {
+                            prevTrigger.focus();
+                            prevTrigger.click();
+                        }
+                        break;
+                    case "ArrowRight":
+                    case "ArrowDown":
+                        event.preventDefault();
+                        // Move to next tab - focus next trigger
+                        const nextTrigger = event.currentTarget.nextElementSibling;
+                        if (nextTrigger && nextTrigger.tagName === 'BUTTON' && !nextTrigger.disabled) {
+                            nextTrigger.focus();
+                            nextTrigger.click();
+                        }
+                        break;
+                    case "Home":
+                        event.preventDefault();
+                        // Move to first tab
+                        const firstTrigger = (_a = event.currentTarget.parentElement) === null || _a === void 0 ? void 0 : _a.firstElementChild;
+                        if (firstTrigger && firstTrigger.tagName === 'BUTTON' && !firstTrigger.disabled) {
+                            firstTrigger.focus();
+                            firstTrigger.click();
+                        }
+                        break;
+                    case "End":
+                        event.preventDefault();
+                        // Move to last tab
+                        const lastTrigger = (_b = event.currentTarget.parentElement) === null || _b === void 0 ? void 0 : _b.lastElementChild;
+                        if (lastTrigger && lastTrigger.tagName === 'BUTTON' && !lastTrigger.disabled) {
+                            lastTrigger.focus();
+                            lastTrigger.click();
+                        }
+                        break;
+                }
+            }
+            catch (error) {
+                if (process.env.NODE_ENV !== 'production') {
+                    // eslint-disable-next-line no-console
+                    console.error("Error in tab trigger keyboard handler:", error);
+                }
             }
         }
         onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(event);
+    }, [isDisabled, onKeyDown]);
+    // Memoize theme classes to prevent recalculation on every render
+    const themeClasses = useMemo(() => {
+        return {
+            triggerStyle: tabsTheme.triggerStyle,
+            sizeStyle: tabsTheme.triggerSizes[size],
+        };
+    }, [size]);
+    // Generate default aria-label for icon-only triggers if not provided (fallback only)
+    const ariaLabel = props["aria-label"] || undefined;
+    // Register/unregister this trigger for underline positioning
+    useEffect(() => {
+        // Register with a slight delay to ensure DOM is ready
+        const timeoutId = setTimeout(() => {
+            if (ref && typeof ref === 'object' && ref.current) {
+                registerTrigger(value, ref.current);
+            }
+        }, 0);
+        return () => {
+            clearTimeout(timeoutId);
+            unregisterTrigger(value);
+        };
+    }, [value, registerTrigger, unregisterTrigger, ref]);
+    // Determine animation props (user props will override due to spread order)
+    const animationProps = shouldDisableAnimations ? {} : {
+        whileHover: !isDisabled ? "hover" : undefined,
+        whileTap: !isDisabled ? "tap" : undefined,
+        variants: triggerVariants,
     };
-    return (React__default.createElement("button", __assign({ ref: ref, type: "button", role: "tab", "aria-selected": isSelected, "aria-controls": "".concat(value, "-content"), id: "".concat(value, "-tab"), tabIndex: isSelected ? 0 : -1, disabled: isDisabled, className: cn(tabsTheme.triggerStyle, tabsTheme.triggerSizes[size], className), onClick: handleClick, onKeyDown: handleKeyDown, "data-value": value, "data-state": isSelected ? "active" : "inactive", "data-disabled": isDisabled, "data-orientation": orientation }, props), children));
+    return (React__default.createElement(motion.button, { ref: ref, type: "button", role: "tab", "aria-selected": isSelected, "aria-controls": `${value}-content`, id: `${value}-tab`, tabIndex: isSelected ? 0 : -1, disabled: isDisabled, className: cn(themeClasses.triggerStyle, themeClasses.sizeStyle, className // User overrides take precedence
+        ), onClick: handleClick, onKeyDown: handleKeyDown, "data-value": value, "data-state": isSelected ? "active" : "inactive", "data-disabled": isDisabled, "data-orientation": orientation, "aria-disabled": isDisabled || undefined, "aria-label": ariaLabel, ...animationProps, ...props }, children));
 });
 TabsTrigger.displayName = "TabsTrigger";
 

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

@@ -1,9 +1,6 @@
-import { Tabs } from './Tabs';
-import { TabsContext, useTabsContext } from './TabsContext';
 export { Tabs } from './Tabs';
 export { TabsList } from './TabsList';
 export { TabsTrigger } from './TabsTrigger';
 export { TabsContent } from './TabsContent';
-export { TabsContext, useTabsContext };
+export { TabsContext, useTabsContext } from './TabsContext';
 export type { TabsProps, TabsListProps, TabsTriggerProps, TabsContentProps, TabsSize, TabsOrientation, TabsContextValue } from './Tabs.types';
-export default Tabs;

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

@@ -0,0 +1,58 @@
+const toastAnimations = {
+    // Initial state when toast appears
+    initial: {
+        opacity: 0,
+        y: 50,
+        scale: 0.3,
+    },
+    // Exit animation when toast is dismissed
+    exit: {
+        opacity: 0,
+        scale: 0.5,
+        transition: { duration: 0.2 },
+    },
+    // Spring transition configuration
+    transition: {
+        type: "spring",
+        stiffness: 500,
+        damping: 30,
+        mass: 1,
+    },
+};
+// Stacking animation utilities
+const getToastStackingAnimation = (index, totalToasts, isExpanded) => {
+    if (totalToasts === 1)
+        return {};
+    const maxVisible = 3; // Show max 3 toasts in stack
+    const stackIndex = Math.min(index, maxVisible - 1);
+    if (isExpanded) {
+        // Expanded state - show all toasts with sufficient gap to prevent overlap
+        // Use a larger gap to accommodate variable heights
+        return {
+            y: index * 100, // 100px gap between toasts when expanded (increased from 80px)
+            scale: 1,
+            zIndex: totalToasts - index,
+            opacity: 1,
+        };
+    }
+    else {
+        // Stacked state - compress toasts
+        if (index >= maxVisible) {
+            // Show toasts beyond max visible but more compressed
+            return {
+                y: (maxVisible - 1) * 16,
+                scale: 1 - (maxVisible - 1) * 0.08,
+                zIndex: 0,
+                opacity: 0.3,
+            };
+        }
+        return {
+            y: stackIndex * 16, // 16px offset for each toast (increased from 12px)
+            scale: 1 - stackIndex * 0.08,
+            zIndex: totalToasts - index,
+            opacity: 1 - stackIndex * 0.25,
+        };
+    }
+};
+
+export { getToastStackingAnimation, toastAnimations };

package/dist/components/core/Toast/Toast.js

@@ -0,0 +1,62 @@
+import React__default, { useEffect } from 'react';
+import { motion } from 'motion/react';
+import { cn } from '../../../utils/cn.js';
+import { toastTheme } from './Toast.theme.js';
+import { toastAnimations, getToastStackingAnimation } from './Toast.animations.js';
+import { ArrowPathIcon, XCircleIcon, ExclamationTriangleIcon, CheckCircleIcon, InformationCircleIcon, XMarkIcon } from '@heroicons/react/24/solid';
+
+const colorIcons = {
+    neutral: InformationCircleIcon,
+    dark: InformationCircleIcon,
+    primary: InformationCircleIcon,
+    success: CheckCircleIcon,
+    warning: ExclamationTriangleIcon,
+    danger: XCircleIcon,
+};
+const Toast = React__default.forwardRef(({ toast, className, theme: customTheme = {}, // Deprecated - kept for backward compatibility
+onDismiss, index = 0, isExpanded = false, totalToasts = 1, onMouseEnter, onMouseLeave, ...props }, ref) => {
+    var _a, _b, _c, _d, _e, _f;
+    const { id, color = 'primary', state = 'default', title, description, icon, action, duration = 5000, dismissible = true, } = toast;
+    const IconComponent = state === 'loading' ? ArrowPathIcon : colorIcons[color];
+    // Auto-dismiss after duration
+    useEffect(() => {
+        if (duration > 0 && dismissible) {
+            const timer = setTimeout(() => {
+                onDismiss === null || onDismiss === void 0 ? void 0 : onDismiss(id);
+            }, duration);
+            return () => clearTimeout(timer);
+        }
+    }, [duration, dismissible, id, onDismiss]);
+    const handleDismiss = () => {
+        onDismiss === null || onDismiss === void 0 ? void 0 : onDismiss(id);
+    };
+    const handleActionClick = () => {
+        action === null || action === void 0 ? void 0 : action.onClick();
+        if (dismissible) {
+            handleDismiss();
+        }
+    };
+    const stackingStyle = getToastStackingAnimation(index, totalToasts, isExpanded);
+    return (React__default.createElement(motion.div, { ref: ref, layout: true, initial: toastAnimations.initial, animate: {
+            opacity: (_a = stackingStyle.opacity) !== null && _a !== void 0 ? _a : 1,
+            y: (_b = stackingStyle.y) !== null && _b !== void 0 ? _b : 0,
+            scale: (_c = stackingStyle.scale) !== null && _c !== void 0 ? _c : 1,
+            zIndex: (_d = stackingStyle.zIndex) !== null && _d !== void 0 ? _d : 1
+        }, exit: toastAnimations.exit, transition: toastAnimations.transition, className: cn(toastTheme.baseStyle, ((_e = toastTheme.colors) === null || _e === void 0 ? void 0 : _e[color]) || "", 'pointer-events-auto', index > 0 && !isExpanded && 'absolute top-0 left-0', className), style: {
+            zIndex: (_f = stackingStyle.zIndex) !== null && _f !== void 0 ? _f : 1,
+            position: index > 0 ? 'absolute' : 'relative',
+            top: index > 0 ? 0 : undefined,
+            left: index > 0 ? 0 : undefined,
+        }, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, role: "alert", "aria-live": "polite" },
+        React__default.createElement("div", { className: toastTheme.iconStyle }, icon || React__default.createElement(IconComponent, { className: cn("w-5 h-5", state === 'loading' && "animate-spin") })),
+        React__default.createElement("div", { className: "flex-1 min-w-0" },
+            title && (React__default.createElement("div", { className: toastTheme.titleStyle }, title)),
+            description && (React__default.createElement("div", { className: toastTheme.descriptionStyle }, description)),
+            action && (React__default.createElement("div", { className: "mt-2" },
+                React__default.createElement("button", { type: "button", className: toastTheme.actionStyle, onClick: handleActionClick }, action.label)))),
+        dismissible && (React__default.createElement("button", { type: "button", className: toastTheme.closeButtonStyle, onClick: handleDismiss, "aria-label": "Dismiss notification" },
+            React__default.createElement(XMarkIcon, { className: "w-4 h-4" })))));
+});
+Toast.displayName = 'Toast';
+
+export { Toast };

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

@@ -0,0 +1,22 @@
+const toastTheme = {
+    baseStyle: 'flex items-start gap-3 rounded-2xl px-4 py-3 shadow-2xl backdrop-blur-sm min-w-80 max-w-md ring-[0.5px] ring-white glass-effect',
+    /**
+     * Semantic colors with background, border, and text styling
+     */
+    colors: {
+        neutral: 'bg-[var(--color-background)]/50 border-[var(--color-border)]/40 text-[var(--color-text-primary)]',
+        dark: 'bg-[var(--color-background-quinary)]/50 border-[var(--color-border)]/40 text-white',
+        primary: 'bg-[var(--color-primary-100)]/50 border-[var(--color-primary-200)]/40 text-[var(--color-primary-800)] shadow-[var(--color-primary-600)]/20',
+        success: 'bg-[var(--color-success-100)]/50 border-[var(--color-success-200)]/40 text-[var(--color-success-800)] shadow-[var(--color-success-600)]/20',
+        warning: 'bg-[var(--color-warning-100)]/50 border-[var(--color-warning-200)]/40 text-[var(--color-warning-800)] shadow-[var(--color-warning-600)]/20',
+        danger: 'bg-[var(--color-danger-100)]/50 border-[var(--color-danger-200)]/40 text-[var(--color-danger-800)] shadow-[var(--color-danger-600)]/20',
+    },
+    iconStyle: 'flex-shrink-0 size-5 mt-0.5',
+    titleStyle: 'font-semibold text-sm',
+    descriptionStyle: 'text-sm mt-0.5 opacity-60',
+    actionStyle: 'text-xs font-medium px-2 py-1 rounded border bg-white/80 hover:bg-white transition-colors cursor-pointer',
+    closeButtonStyle: 'absolute top-2 right-2 flex-shrink-0 w-4 h-4 opacity-70 hover:opacity-100 transition-opacity cursor-pointer',
+    containerStyle: 'fixed z-50 pointer-events-none',
+};
+
+export { toastTheme };