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

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

@@ -0,0 +1,108 @@
+import { HTMLAttributes, ReactNode } from 'react';
+/**
+ * Toast semantic colors (intent)
+ */
+export type ToastColor = 'neutral' | 'dark' | 'primary' | 'success' | 'warning' | 'danger';
+/**
+ * Toast state (e.g., loading indicator)
+ */
+export type ToastState = 'default' | 'loading';
+export type ToastPosition = 'top-left' | 'top-center' | 'top-right' | 'bottom-left' | 'bottom-center' | 'bottom-right';
+export interface ToastAction {
+    label: string;
+    onClick: () => void;
+}
+export interface ToastTheme {
+    baseStyle: string;
+    colors: Record<ToastColor, string>;
+    iconStyle: string;
+    titleStyle: string;
+    descriptionStyle: string;
+    actionStyle: string;
+    closeButtonStyle: string;
+    containerStyle: string;
+}
+export interface ToastThemeOverrides {
+    baseStyle?: string;
+    colors?: Partial<Record<ToastColor, string>>;
+    iconStyle?: string;
+    titleStyle?: string;
+    descriptionStyle?: string;
+    actionStyle?: string;
+    closeButtonStyle?: string;
+    containerStyle?: string;
+}
+export interface ToastData {
+    id: string;
+    color?: ToastColor;
+    state?: ToastState;
+    title?: string;
+    description?: string;
+    icon?: ReactNode;
+    action?: ToastAction;
+    duration?: number;
+    dismissible?: boolean;
+    onDismiss?: () => void;
+}
+export interface ToastProps extends HTMLAttributes<HTMLDivElement> {
+    /** Toast data */
+    toast: ToastData;
+    /** Custom class name */
+    className?: string;
+    /** Theme overrides (deprecated - use className for customization) */
+    theme?: ToastThemeOverrides;
+    /** Callback when toast is dismissed */
+    onDismiss?: (id: string) => void;
+    /** Index of toast in the stack */
+    index?: number;
+    /** Whether the toast stack is expanded */
+    isExpanded?: boolean;
+    /** Total number of toasts in the stack */
+    totalToasts?: number;
+    /** Mouse enter handler for hover management */
+    onMouseEnter?: () => void;
+    /** Mouse leave handler for hover management */
+    onMouseLeave?: () => void;
+}
+export interface ToastProviderProps {
+    children: ReactNode;
+    position?: ToastPosition;
+    maxToasts?: number;
+    defaultDuration?: number;
+}
+export interface ToastContextValue {
+    toasts: ToastData[];
+    addToast: (toast: Omit<ToastData, 'id'>) => string;
+    removeToast: (id: string) => void;
+    removeAllToasts: () => void;
+}
+export interface UseToastOptions {
+    color?: ToastColor;
+    state?: ToastState;
+    duration?: number;
+    dismissible?: boolean;
+    action?: ToastAction;
+    icon?: ReactNode;
+}
+export interface UseToastReturn {
+    toast: (title: string, options?: UseToastOptions & {
+        description?: string;
+    }) => string;
+    success: (title: string, options?: Omit<UseToastOptions, 'color'> & {
+        description?: string;
+    }) => string;
+    error: (title: string, options?: Omit<UseToastOptions, 'color'> & {
+        description?: string;
+    }) => string;
+    warning: (title: string, options?: Omit<UseToastOptions, 'color'> & {
+        description?: string;
+    }) => string;
+    info: (title: string, options?: Omit<UseToastOptions, 'color'> & {
+        description?: string;
+    }) => string;
+    loading: (title: string, options?: Omit<UseToastOptions, 'state'> & {
+        description?: string;
+    }) => string;
+    dismiss: (id: string) => void;
+    dismissAll: () => void;
+}

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

@@ -0,0 +1,75 @@
+import React__default, { createContext, useState, useCallback, useContext } from 'react';
+import { AnimatePresence } from 'motion/react';
+import { createPortal } from 'react-dom';
+import { Toast } from './Toast.js';
+import { toastTheme } from './Toast.theme.js';
+import { cn } from '../../../utils/cn.js';
+
+const ToastContext = createContext(undefined);
+const positionStyles = {
+    'top-left': 'top-4 left-4',
+    'top-center': 'top-4 left-1/2 -translate-x-1/2',
+    'top-right': 'top-4 right-4',
+    'bottom-left': 'bottom-4 left-4',
+    'bottom-center': 'bottom-4 left-1/2 -translate-x-1/2',
+    'bottom-right': 'bottom-4 right-4',
+};
+const ToastProvider = ({ children, position = 'top-right', maxToasts = 5, defaultDuration = 5000, }) => {
+    const [toasts, setToasts] = useState([]);
+    const [isHovered, setIsHovered] = useState(false);
+    const hoverTimeoutRef = React__default.useRef(null);
+    const addToast = useCallback((toastData) => {
+        var _a;
+        const id = Math.random().toString(36).substring(2, 9);
+        const newToast = {
+            ...toastData,
+            id,
+            duration: (_a = toastData.duration) !== null && _a !== void 0 ? _a : defaultDuration,
+        };
+        setToasts(current => {
+            const updated = [newToast, ...current];
+            // Limit the number of toasts
+            return updated.slice(0, maxToasts);
+        });
+        return id;
+    }, [maxToasts, defaultDuration]);
+    const removeToast = useCallback((id) => {
+        setToasts(current => current.filter(toast => toast.id !== id));
+    }, []);
+    const removeAllToasts = useCallback(() => {
+        setToasts([]);
+    }, []);
+    const handleMouseEnter = useCallback(() => {
+        if (hoverTimeoutRef.current) {
+            clearTimeout(hoverTimeoutRef.current);
+            hoverTimeoutRef.current = null;
+        }
+        setIsHovered(true);
+    }, []);
+    const handleMouseLeave = useCallback(() => {
+        // Add a small delay before collapsing to prevent flickering
+        hoverTimeoutRef.current = setTimeout(() => {
+            setIsHovered(false);
+        }, 150);
+    }, []);
+    const contextValue = {
+        toasts,
+        addToast,
+        removeToast,
+        removeAllToasts,
+    };
+    return (React__default.createElement(ToastContext.Provider, { value: contextValue },
+        children,
+        typeof window !== 'undefined' && createPortal(React__default.createElement("div", { className: cn(toastTheme.containerStyle, positionStyles[position]), "aria-live": "polite", "aria-label": "Notifications" },
+            React__default.createElement("div", { className: "relative", onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave },
+                React__default.createElement(AnimatePresence, { mode: "popLayout" }, toasts.map((toast, index) => (React__default.createElement(Toast, { key: toast.id, toast: toast, onDismiss: removeToast, index: index, isExpanded: isHovered, totalToasts: toasts.length, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave })))))), document.body)));
+};
+const useToastContext = () => {
+    const context = useContext(ToastContext);
+    if (!context) {
+        throw new Error('useToastContext must be used within a ToastProvider');
+    }
+    return context;
+};
+
+export { ToastProvider, useToastContext };

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

@@ -0,0 +1,97 @@
+import { useCallback } from 'react';
+import { useToastContext } from './ToastProvider.js';
+
+const useToast = () => {
+    const { addToast, removeToast, removeAllToasts } = useToastContext();
+    const toast = useCallback((title, options) => {
+        return addToast({
+            title,
+            color: (options === null || options === void 0 ? void 0 : options.color) || 'primary',
+            state: (options === null || options === void 0 ? void 0 : options.state) || 'default',
+            description: options === null || options === void 0 ? void 0 : options.description,
+            duration: options === null || options === void 0 ? void 0 : options.duration,
+            dismissible: options === null || options === void 0 ? void 0 : options.dismissible,
+            action: options === null || options === void 0 ? void 0 : options.action,
+            icon: options === null || options === void 0 ? void 0 : options.icon,
+        });
+    }, [addToast]);
+    const success = useCallback((title, options) => {
+        return addToast({
+            title,
+            color: 'success',
+            state: (options === null || options === void 0 ? void 0 : options.state) || 'default',
+            description: options === null || options === void 0 ? void 0 : options.description,
+            duration: options === null || options === void 0 ? void 0 : options.duration,
+            dismissible: options === null || options === void 0 ? void 0 : options.dismissible,
+            action: options === null || options === void 0 ? void 0 : options.action,
+            icon: options === null || options === void 0 ? void 0 : options.icon,
+        });
+    }, [addToast]);
+    const error = useCallback((title, options) => {
+        return addToast({
+            title,
+            color: 'danger',
+            state: (options === null || options === void 0 ? void 0 : options.state) || 'default',
+            description: options === null || options === void 0 ? void 0 : options.description,
+            duration: options === null || options === void 0 ? void 0 : options.duration,
+            dismissible: options === null || options === void 0 ? void 0 : options.dismissible,
+            action: options === null || options === void 0 ? void 0 : options.action,
+            icon: options === null || options === void 0 ? void 0 : options.icon,
+        });
+    }, [addToast]);
+    const warning = useCallback((title, options) => {
+        return addToast({
+            title,
+            color: 'warning',
+            state: (options === null || options === void 0 ? void 0 : options.state) || 'default',
+            description: options === null || options === void 0 ? void 0 : options.description,
+            duration: options === null || options === void 0 ? void 0 : options.duration,
+            dismissible: options === null || options === void 0 ? void 0 : options.dismissible,
+            action: options === null || options === void 0 ? void 0 : options.action,
+            icon: options === null || options === void 0 ? void 0 : options.icon,
+        });
+    }, [addToast]);
+    const info = useCallback((title, options) => {
+        return addToast({
+            title,
+            color: 'primary',
+            state: (options === null || options === void 0 ? void 0 : options.state) || 'default',
+            description: options === null || options === void 0 ? void 0 : options.description,
+            duration: options === null || options === void 0 ? void 0 : options.duration,
+            dismissible: options === null || options === void 0 ? void 0 : options.dismissible,
+            action: options === null || options === void 0 ? void 0 : options.action,
+            icon: options === null || options === void 0 ? void 0 : options.icon,
+        });
+    }, [addToast]);
+    const loading = useCallback((title, options) => {
+        var _a, _b;
+        return addToast({
+            title,
+            color: (options === null || options === void 0 ? void 0 : options.color) || 'neutral',
+            state: 'loading',
+            description: options === null || options === void 0 ? void 0 : options.description,
+            duration: (_a = options === null || options === void 0 ? void 0 : options.duration) !== null && _a !== void 0 ? _a : 0, // Loading toasts don't auto-dismiss by default
+            dismissible: (_b = options === null || options === void 0 ? void 0 : options.dismissible) !== null && _b !== void 0 ? _b : false, // Loading toasts are not dismissible by default
+            action: options === null || options === void 0 ? void 0 : options.action,
+            icon: options === null || options === void 0 ? void 0 : options.icon,
+        });
+    }, [addToast]);
+    const dismiss = useCallback((id) => {
+        removeToast(id);
+    }, [removeToast]);
+    const dismissAll = useCallback(() => {
+        removeAllToasts();
+    }, [removeAllToasts]);
+    return {
+        toast,
+        success,
+        error,
+        warning,
+        info,
+        loading,
+        dismiss,
+        dismissAll,
+    };
+};
+
+export { useToast };

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

@@ -1,7 +1,5 @@
-import { __assign } from '../../../node_modules/tslib/tslib.es6.js';
-
 // Define optimized spring configurations
-var springConfig = {
+const springConfig = {
     type: "spring",
     stiffness: 500,
     damping: 30
@@ -9,14 +7,14 @@ var springConfig = {
 /**
  * Base animation variants for the tooltip - optimized for smooth positioning
  */
-var baseTooltipVariants = {
+const baseTooltipVariants = {
     initial: {
         opacity: 0,
         transition: { duration: 0.1 }
     },
     animate: {
         opacity: 1,
-        transition: __assign(__assign({}, springConfig), { duration: 0.2 })
+        transition: { ...springConfig, duration: 0.2 }
     },
     exit: {
         opacity: 0,
@@ -28,19 +26,55 @@ var baseTooltipVariants = {
  * @param placement - Tooltip placement (top, right, bottom, left)
  * @returns Animation variants for the specified placement
  */
-var getTooltipVariants = function (placement) {
+const getTooltipVariants = (placement) => {
     switch (placement) {
         case 'top':
-            return __assign(__assign({}, baseTooltipVariants), { initial: __assign(__assign({}, baseTooltipVariants.initial), { y: 2 }), animate: __assign(__assign({}, baseTooltipVariants.animate), { y: 0 }), exit: __assign(__assign({}, baseTooltipVariants.exit), { y: 2 }) });
+            return {
+                ...baseTooltipVariants,
+                initial: { ...baseTooltipVariants.initial, y: 2 },
+                animate: { ...baseTooltipVariants.animate, y: 0 },
+                exit: { ...baseTooltipVariants.exit, y: 2 }
+            };
         case 'right':
-            return __assign(__assign({}, baseTooltipVariants), { initial: __assign(__assign({}, baseTooltipVariants.initial), { x: -2 }), animate: __assign(__assign({}, baseTooltipVariants.animate), { x: 0 }), exit: __assign(__assign({}, baseTooltipVariants.exit), { x: -2 }) });
+            return {
+                ...baseTooltipVariants,
+                initial: { ...baseTooltipVariants.initial, x: -2 },
+                animate: { ...baseTooltipVariants.animate, x: 0 },
+                exit: { ...baseTooltipVariants.exit, x: -2 }
+            };
         case 'bottom':
-            return __assign(__assign({}, baseTooltipVariants), { initial: __assign(__assign({}, baseTooltipVariants.initial), { y: -2 }), animate: __assign(__assign({}, baseTooltipVariants.animate), { y: 0 }), exit: __assign(__assign({}, baseTooltipVariants.exit), { y: -2 }) });
+            return {
+                ...baseTooltipVariants,
+                initial: { ...baseTooltipVariants.initial, y: -2 },
+                animate: { ...baseTooltipVariants.animate, y: 0 },
+                exit: { ...baseTooltipVariants.exit, y: -2 }
+            };
         case 'left':
-            return __assign(__assign({}, baseTooltipVariants), { initial: __assign(__assign({}, baseTooltipVariants.initial), { x: 2 }), animate: __assign(__assign({}, baseTooltipVariants.animate), { x: 0 }), exit: __assign(__assign({}, baseTooltipVariants.exit), { x: 2 }) });
+            return {
+                ...baseTooltipVariants,
+                initial: { ...baseTooltipVariants.initial, x: 2 },
+                animate: { ...baseTooltipVariants.animate, x: 0 },
+                exit: { ...baseTooltipVariants.exit, x: 2 }
+            };
         default:
             return baseTooltipVariants;
     }
 };
+/**
+ * Spring animation configuration options
+ */
+const tooltipSpringConfig = {
+    light: {
+        type: "spring",
+        stiffness: 200,
+        damping: 25
+    },
+    medium: springConfig,
+    bouncy: {
+        type: "spring",
+        stiffness: 400,
+        damping: 15
+    }
+};
 
-export { baseTooltipVariants, getTooltipVariants };
+export { baseTooltipVariants, getTooltipVariants, tooltipSpringConfig };

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

@@ -4,4 +4,4 @@ declare const Tooltip: {
     ({ content, children, placement, delay, disabled, className, maxWidth, minWidth, showOnFocus, wrapText, id, theme: themeOverrides, "aria-label": ariaLabel, role, }: TooltipProps): React.JSX.Element;
     displayName: string;
 };
-export default Tooltip;
+export { Tooltip };

package/dist/components/core/Tooltip/Tooltip.js

@@ -1,39 +1,73 @@
-import { __assign } from '../../../node_modules/tslib/tslib.es6.js';
 import React__default, { useState, useRef, useCallback, useEffect } from 'react';
+import { useReducedMotion, AnimatePresence, motion } from 'motion/react';
+import { createPortal } from 'react-dom';
 import { cn } from '../../../utils/cn.js';
 import { tooltipTheme } from './Tooltip.theme.js';
 import { getTooltipVariants } from './Tooltip.animations.js';
-import { useTooltipPositioning } from './useTooltipPositioning.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';
+import { useSelectPortal } from '../../../hooks/useSelectPortal.js';
 
-var Tooltip = function (_a) {
-    var content = _a.content, children = _a.children, _b = _a.placement, placement = _b === void 0 ? 'top' : _b, _c = _a.delay, delay = _c === void 0 ? 300 : _c, _d = _a.disabled, disabled = _d === void 0 ? false : _d, className = _a.className, _e = _a.maxWidth, maxWidth = _e === void 0 ? "360px" : _e, _f = _a.minWidth, minWidth = _f === void 0 ? "fit-content" : _f, _g = _a.showOnFocus, showOnFocus = _g === void 0 ? true : _g, _h = _a.wrapText, wrapText = _h === void 0 ? false : _h, id = _a.id, themeOverrides = _a.theme, ariaLabel = _a["aria-label"], _j = _a.role, role = _j === void 0 ? 'tooltip' : _j;
-    var _k = useState(false), isVisible = _k[0], setIsVisible = _k[1];
-    var tooltipRef = useRef(null);
-    var triggerRef = useRef(null);
-    var timerRef = useRef(null);
+/**
+ * Hook to detect dark mode state from document
+ */
+const useDarkMode = () => {
+    const [isDark, setIsDark] = useState(false);
+    useEffect(() => {
+        if (typeof document === "undefined")
+            return;
+        const checkDarkMode = () => {
+            const hasDarkClass = document.documentElement.classList.contains("dark") ||
+                document.body.classList.contains("dark") ||
+                document.querySelector(".dark") !== null;
+            setIsDark(hasDarkClass);
+        };
+        checkDarkMode();
+        // Observe class changes on html and body
+        const observer = new MutationObserver(checkDarkMode);
+        observer.observe(document.documentElement, {
+            attributes: true,
+            attributeFilter: ["class"],
+        });
+        observer.observe(document.body, {
+            attributes: true,
+            attributeFilter: ["class"],
+        });
+        return () => observer.disconnect();
+    }, []);
+    return isDark;
+};
+const Tooltip = ({ content, children, placement = "top", delay = 300, disabled = false, className, maxWidth = "360px", minWidth = "fit-content", showOnFocus = true, wrapText = false, id, theme: themeOverrides, "aria-label": ariaLabel, role = "tooltip", }) => {
+    const [isVisible, setIsVisible] = useState(false);
+    const tooltipRef = useRef(null);
+    const triggerRef = useRef(null);
+    const timerRef = useRef(null);
+    const shouldReduceMotion = useReducedMotion();
+    // Detect dark mode for portal content
+    const isDarkMode = useDarkMode();
     // Merge global theme with component-specific overrides
-    var theme = __assign(__assign({}, tooltipTheme), (themeOverrides || {}));
-    // Use custom positioning hook
-    var debouncedPositioning = useTooltipPositioning({
-        tooltipRef: tooltipRef,
-        triggerRef: triggerRef,
-        placement: placement,
-        isVisible: isVisible,
-    }).debouncedPositioning;
+    const theme = {
+        ...tooltipTheme,
+        ...(themeOverrides || {}),
+    };
+    // Use the same positioning hook as Popover/Select for consistent behavior
+    const { position, cssVariables, contentRef: portalContentRef} = useSelectPortal({
+        triggerRef,
+        isOpen: isVisible,
+        placement: placement, // TooltipPlacement matches SelectPlacement subset
+        offset: 8,
+        autoWidth: true,
+    });
     // Event handlers - simplified timer management
-    var handleShowTooltip = useCallback(function () {
+    const handleShowTooltip = useCallback(() => {
         if (disabled)
             return;
         if (timerRef.current) {
             clearTimeout(timerRef.current);
         }
-        timerRef.current = setTimeout(function () {
+        timerRef.current = setTimeout(() => {
             setIsVisible(true);
         }, delay);
     }, [disabled, delay]);
-    var handleHideTooltip = useCallback(function () {
+    const handleHideTooltip = useCallback(() => {
         if (timerRef.current) {
             clearTimeout(timerRef.current);
         }
@@ -41,45 +75,57 @@ var Tooltip = function (_a) {
         setIsVisible(false);
     }, []);
     // Clean up timeout on unmount
-    useEffect(function () {
-        return function () {
+    useEffect(() => {
+        return () => {
             if (timerRef.current) {
                 clearTimeout(timerRef.current);
             }
         };
     }, []);
-    // Handle window resize with debouncing - only when tooltip is visible
-    useEffect(function () {
-        if (isVisible) {
-            window.addEventListener('resize', debouncedPositioning);
-            return function () {
-                window.removeEventListener('resize', debouncedPositioning);
-            };
-        }
-    }, [isVisible, debouncedPositioning]);
-    // Keyboard handler - removed isVisible dependency to prevent re-creation
-    var handleKeyDown = useCallback(function (e) {
-        if (e.key === 'Escape') {
+    // Keyboard handler
+    const handleKeyDown = useCallback((e) => {
+        if (e.key === "Escape") {
             handleHideTooltip();
         }
     }, [handleHideTooltip]);
-    // Event handlers for trigger element - using mouse events for better predictability
-    var triggerHandlers = __assign(__assign({ onMouseEnter: handleShowTooltip, onMouseLeave: handleHideTooltip }, (showOnFocus && {
-        onFocus: handleShowTooltip,
-        onBlur: handleHideTooltip,
-    })), { onKeyDown: handleKeyDown });
-    // Computed values - simplified without unnecessary memoization
-    var textOverflowClass = wrapText ? '' : 'text-ellipsis overflow-hidden whitespace-nowrap';
-    var widthClasses = cn(minWidth === 'fit-content' ? 'w-fit' : 'min-w-fit', textOverflowClass);
-    return (React__default.createElement("div", __assign({ className: "relative inline-block", ref: triggerRef }, triggerHandlers, { tabIndex: showOnFocus ? 0 : undefined, "aria-describedby": isVisible && id ? id : undefined }),
+    // Event handlers for trigger element
+    const triggerHandlers = {
+        onMouseEnter: handleShowTooltip,
+        onMouseLeave: handleHideTooltip,
+        ...(showOnFocus && {
+            onFocus: handleShowTooltip,
+            onBlur: handleHideTooltip,
+        }),
+        onKeyDown: handleKeyDown,
+    };
+    // Combine refs for portal positioning
+    const handleRef = useCallback((el) => {
+        tooltipRef.current = el;
+        if (portalContentRef &&
+            typeof portalContentRef === "object" &&
+            "current" in portalContentRef) {
+            portalContentRef.current = el;
+        }
+    }, [portalContentRef]);
+    // Computed values
+    const textOverflowClass = wrapText
+        ? ""
+        : "text-ellipsis overflow-hidden whitespace-nowrap";
+    const widthClasses = cn(minWidth === "fit-content" ? "w-fit" : "min-w-fit", textOverflowClass);
+    const tooltipContent = (React__default.createElement(AnimatePresence, null, isVisible && (React__default.createElement(motion.div, { id: id, role: role, ref: handleRef, style: {
+            maxWidth,
+            minWidth: minWidth !== "fit-content" ? minWidth : undefined,
+            width: "max-content",
+            ...cssVariables,
+            top: `${position.top}px`,
+            left: `${position.left}px`,
+        }, className: cn(theme.baseStyle, widthClasses, className), "aria-hidden": !isVisible, "aria-label": ariaLabel, "aria-live": role === "tooltip" ? "polite" : undefined, variants: shouldReduceMotion ? {} : getTooltipVariants(placement), initial: shouldReduceMotion ? undefined : "initial", animate: shouldReduceMotion ? undefined : "animate", exit: shouldReduceMotion ? undefined : "exit" }, content))));
+    return (React__default.createElement("div", { className: "relative inline-block", ref: triggerRef, ...triggerHandlers, tabIndex: showOnFocus ? 0 : undefined, "aria-describedby": isVisible && id ? id : undefined },
         children,
-        React__default.createElement(AnimatePresence, null, isVisible && (React__default.createElement(motion.div, { id: id, role: role, ref: tooltipRef, style: {
-                maxWidth: maxWidth,
-                minWidth: minWidth !== 'fit-content' ? minWidth : undefined,
-                width: 'max-content'
-            }, className: cn(theme.baseStyle, theme[placement] || '', widthClasses, className), "aria-hidden": !isVisible, "aria-label": ariaLabel, "aria-live": role === 'tooltip' ? 'polite' : undefined, variants: getTooltipVariants(placement), initial: "initial", animate: "animate", exit: "exit" }, content)))));
+        typeof document !== "undefined" &&
+            createPortal(React__default.createElement("div", { className: isDarkMode ? "dark" : undefined }, tooltipContent), document.body)));
 };
 // Set display name for dev tools and Storybook
 Tooltip.displayName = "Tooltip";
 
-export { Tooltip as default };
+export { Tooltip };

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

@@ -1,7 +1,3 @@
 export declare const tooltipTheme: {
     baseStyle: string;
-    top: string;
-    right: string;
-    bottom: string;
-    left: string;
 };

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

@@ -1,11 +1,7 @@
-var tooltipTheme = {
-    // Base style for the tooltip
-    baseStyle: "absolute z-50 bg-background border border-border rounded-lg p-1.5 px-2 shadow-xl text-xs font-medium text-text-primary transition-opacity duration-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-primary)] focus-visible:ring-offset-2 pointer-events-none",
-    // Placement styles - flattened
-    top: "bottom-full mb-2.5 text-center",
-    right: "left-full ml-2.5 text-left",
-    bottom: "top-full mt-2.5 text-center",
-    left: "right-full mr-2.5 text-right",
+const tooltipTheme = {
+    // Base style for the tooltip - using fixed positioning for portal rendering
+    baseStyle: "fixed z-50 rounded-lg py-1 px-2 text-xs text-[var(--color-text-primary)] focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-primary)] focus-visible:ring-offset-2 pointer-events-none bg-white/60 backdrop-blur-md outline outline-[var(--color-border)] shadow-lg border-t-[1px] border-white " +
+        "dark:bg-neutral-800/80 dark:outline-[var(--color-border)]/80 dark:border-[var(--color-border)]",
 };
 
 export { tooltipTheme };

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

@@ -1,3 +1,3 @@
-export { default as Tooltip } from './Tooltip';
+export { Tooltip } from './Tooltip';
 export type { TooltipProps, TooltipThemeOverrides, TooltipPlacement } from './Tooltip.types';
 export { baseTooltipVariants, getTooltipVariants, tooltipSpringConfig } from './Tooltip.animations';

package/dist/components/core/Tree/Tree.animations.d.ts

@@ -1,5 +1,6 @@
-import { Variants } from 'motion/react';
+import { Variants, Transition } from 'motion/react';
 export declare const treeNodeVariants: Variants;
 export declare const expandIconVariants: Variants;
-export declare const nodeSelectionVariants: Variants;
-export declare const nodeHoverVariants: Variants;
+export declare const childrenStagger: Transition;
+export declare const childNodeVariants: Variants;
+export declare const getReducedMotionVariants: (originalVariants: Variants) => Variants;