flikkui 0.1.0-beta.11

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

@@ -0,0 +1,68 @@
+import { __rest } from '../../../node_modules/tslib/tslib.es6.js';
+import React__default, { useEffect } from 'react';
+import { cn } from '../../../utils/cn.js';
+import { toastTheme } from './Toast.theme.js';
+import { toastAnimations, getToastStackingAnimation } from './Toast.animations.js';
+import ForwardRef from '../../../node_modules/@heroicons/react/24/solid/esm/ArrowPathIcon.js';
+import ForwardRef$1 from '../../../node_modules/@heroicons/react/24/solid/esm/XCircleIcon.js';
+import ForwardRef$2 from '../../../node_modules/@heroicons/react/24/solid/esm/ExclamationTriangleIcon.js';
+import ForwardRef$3 from '../../../node_modules/@heroicons/react/24/solid/esm/CheckCircleIcon.js';
+import ForwardRef$4 from '../../../node_modules/@heroicons/react/24/solid/esm/InformationCircleIcon.js';
+import ForwardRef$5 from '../../../node_modules/@heroicons/react/24/solid/esm/XMarkIcon.js';
+import { motion } from '../../../node_modules/framer-motion/dist/es/render/components/motion/proxy.js';
+
+var colorIcons = {
+    neutral: ForwardRef$4,
+    dark: ForwardRef$4,
+    primary: ForwardRef$4,
+    success: ForwardRef$3,
+    warning: ForwardRef$2,
+    danger: ForwardRef$1,
+};
+var Toast = React__default.forwardRef(function (_a, ref) {
+    var _b, _c, _d, _e, _f, _g;
+    var toast = _a.toast, className = _a.className; _a.theme; var onDismiss = _a.onDismiss, _j = _a.index, index = _j === void 0 ? 0 : _j, _k = _a.isExpanded, isExpanded = _k === void 0 ? false : _k, _l = _a.totalToasts, totalToasts = _l === void 0 ? 1 : _l, onMouseEnter = _a.onMouseEnter, onMouseLeave = _a.onMouseLeave; __rest(_a, ["toast", "className", "theme", "onDismiss", "index", "isExpanded", "totalToasts", "onMouseEnter", "onMouseLeave"]);
+    var id = toast.id, _m = toast.color, color = _m === void 0 ? 'primary' : _m, _o = toast.state, state = _o === void 0 ? 'default' : _o, title = toast.title, description = toast.description, icon = toast.icon, action = toast.action, _p = toast.duration, duration = _p === void 0 ? 5000 : _p, _q = toast.dismissible, dismissible = _q === void 0 ? true : _q;
+    var IconComponent = state === 'loading' ? ForwardRef : colorIcons[color];
+    // Auto-dismiss after duration
+    useEffect(function () {
+        if (duration > 0 && dismissible) {
+            var timer_1 = setTimeout(function () {
+                onDismiss === null || onDismiss === void 0 ? void 0 : onDismiss(id);
+            }, duration);
+            return function () { return clearTimeout(timer_1); };
+        }
+    }, [duration, dismissible, id, onDismiss]);
+    var handleDismiss = function () {
+        onDismiss === null || onDismiss === void 0 ? void 0 : onDismiss(id);
+    };
+    var handleActionClick = function () {
+        action === null || action === void 0 ? void 0 : action.onClick();
+        if (dismissible) {
+            handleDismiss();
+        }
+    };
+    var stackingStyle = getToastStackingAnimation(index, totalToasts, isExpanded);
+    return (React__default.createElement(motion.div, { ref: ref, layout: true, initial: toastAnimations.initial, animate: {
+            opacity: (_b = stackingStyle.opacity) !== null && _b !== void 0 ? _b : 1,
+            y: (_c = stackingStyle.y) !== null && _c !== void 0 ? _c : 0,
+            scale: (_d = stackingStyle.scale) !== null && _d !== void 0 ? _d : 1,
+            zIndex: (_e = stackingStyle.zIndex) !== null && _e !== void 0 ? _e : 1
+        }, exit: toastAnimations.exit, transition: toastAnimations.transition, className: cn(toastTheme.baseStyle, ((_f = toastTheme.colors) === null || _f === void 0 ? void 0 : _f[color]) || "", 'pointer-events-auto', index > 0 && !isExpanded && 'absolute top-0 left-0', className), style: {
+            zIndex: (_g = stackingStyle.zIndex) !== null && _g !== void 0 ? _g : 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(ForwardRef$5, { className: "w-4 h-4" })))));
+});
+Toast.displayName = 'Toast';
+
+export { Toast };

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

@@ -0,0 +1,2 @@
+import { ToastTheme } from './Toast.types';
+export declare const toastTheme: ToastTheme;

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

@@ -0,0 +1,22 @@
+var 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 };

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.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { ToastProviderProps, ToastContextValue } from './Toast.types';
+export declare const ToastProvider: React.FC<ToastProviderProps>;
+export declare const useToastContext: () => ToastContextValue;

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

@@ -0,0 +1,73 @@
+import { __assign, __spreadArray } from '../../../node_modules/tslib/tslib.es6.js';
+import React__default, { createContext, useState, useCallback, useContext } from 'react';
+import { createPortal } from 'react-dom';
+import { Toast } from './Toast.js';
+import { toastTheme } from './Toast.theme.js';
+import { cn } from '../../../utils/cn.js';
+import { AnimatePresence } from '../../../node_modules/framer-motion/dist/es/components/AnimatePresence/index.js';
+
+var ToastContext = createContext(undefined);
+var 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',
+};
+var ToastProvider = function (_a) {
+    var children = _a.children, _b = _a.position, position = _b === void 0 ? 'top-right' : _b, _c = _a.maxToasts, maxToasts = _c === void 0 ? 5 : _c, _d = _a.defaultDuration, defaultDuration = _d === void 0 ? 5000 : _d;
+    var _e = useState([]), toasts = _e[0], setToasts = _e[1];
+    var _f = useState(false), isHovered = _f[0], setIsHovered = _f[1];
+    var hoverTimeoutRef = React__default.useRef(null);
+    var addToast = useCallback(function (toastData) {
+        var _a;
+        var id = Math.random().toString(36).substring(2, 9);
+        var newToast = __assign(__assign({}, toastData), { id: id, duration: (_a = toastData.duration) !== null && _a !== void 0 ? _a : defaultDuration });
+        setToasts(function (current) {
+            var updated = __spreadArray([newToast], current, true);
+            // Limit the number of toasts
+            return updated.slice(0, maxToasts);
+        });
+        return id;
+    }, [maxToasts, defaultDuration]);
+    var removeToast = useCallback(function (id) {
+        setToasts(function (current) { return current.filter(function (toast) { return toast.id !== id; }); });
+    }, []);
+    var removeAllToasts = useCallback(function () {
+        setToasts([]);
+    }, []);
+    var handleMouseEnter = useCallback(function () {
+        if (hoverTimeoutRef.current) {
+            clearTimeout(hoverTimeoutRef.current);
+            hoverTimeoutRef.current = null;
+        }
+        setIsHovered(true);
+    }, []);
+    var handleMouseLeave = useCallback(function () {
+        // Add a small delay before collapsing to prevent flickering
+        hoverTimeoutRef.current = setTimeout(function () {
+            setIsHovered(false);
+        }, 150);
+    }, []);
+    var contextValue = {
+        toasts: toasts,
+        addToast: addToast,
+        removeToast: removeToast,
+        removeAllToasts: 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(function (toast, index) { return (React__default.createElement(Toast, { key: toast.id, toast: toast, onDismiss: removeToast, index: index, isExpanded: isHovered, totalToasts: toasts.length, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave })); })))), document.body)));
+};
+var useToastContext = function () {
+    var 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/index.d.ts

@@ -0,0 +1,5 @@
+export { Toast } from './Toast';
+export { ToastProvider, useToastContext } from './ToastProvider';
+export { useToast } from './useToast';
+export type { ToastProps, ToastData, ToastProviderProps, ToastTheme, ToastThemeOverrides, UseToastReturn, UseToastOptions, } from './Toast.types';
+export { toastTheme } from './Toast.theme';

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

@@ -0,0 +1,2 @@
+import { UseToastReturn } from './Toast.types';
+export declare const useToast: () => UseToastReturn;

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

@@ -0,0 +1,97 @@
+import { useCallback } from 'react';
+import { useToastContext } from './ToastProvider.js';
+
+var useToast = function () {
+    var _a = useToastContext(), addToast = _a.addToast, removeToast = _a.removeToast, removeAllToasts = _a.removeAllToasts;
+    var toast = useCallback(function (title, options) {
+        return addToast({
+            title: 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]);
+    var success = useCallback(function (title, options) {
+        return addToast({
+            title: 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]);
+    var error = useCallback(function (title, options) {
+        return addToast({
+            title: 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]);
+    var warning = useCallback(function (title, options) {
+        return addToast({
+            title: 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]);
+    var info = useCallback(function (title, options) {
+        return addToast({
+            title: 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]);
+    var loading = useCallback(function (title, options) {
+        var _a, _b;
+        return addToast({
+            title: 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]);
+    var dismiss = useCallback(function (id) {
+        removeToast(id);
+    }, [removeToast]);
+    var dismissAll = useCallback(function () {
+        removeAllToasts();
+    }, [removeAllToasts]);
+    return {
+        toast: toast,
+        success: success,
+        error: error,
+        warning: warning,
+        info: info,
+        loading: loading,
+        dismiss: dismiss,
+        dismissAll: dismissAll,
+    };
+};
+
+export { useToast };

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

@@ -0,0 +1,32 @@
+import { Variants } from 'motion/react';
+import { TooltipPlacement } from './Tooltip.types';
+/**
+ * Base animation variants for the tooltip - optimized for smooth positioning
+ */
+export declare const baseTooltipVariants: Variants;
+/**
+ * Get animation variants based on tooltip placement
+ * @param placement - Tooltip placement (top, right, bottom, left)
+ * @returns Animation variants for the specified placement
+ */
+export declare const getTooltipVariants: (placement: TooltipPlacement) => Variants;
+/**
+ * Spring animation configuration options
+ */
+export declare const tooltipSpringConfig: {
+    light: {
+        type: "spring";
+        stiffness: number;
+        damping: number;
+    };
+    medium: {
+        type: "spring";
+        stiffness: number;
+        damping: number;
+    };
+    bouncy: {
+        type: "spring";
+        stiffness: number;
+        damping: number;
+    };
+};

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

@@ -0,0 +1,46 @@
+import { __assign } from '../../../node_modules/tslib/tslib.es6.js';
+
+// Define optimized spring configurations
+var springConfig = {
+    type: "spring",
+    stiffness: 500,
+    damping: 30
+};
+/**
+ * Base animation variants for the tooltip - optimized for smooth positioning
+ */
+var baseTooltipVariants = {
+    initial: {
+        opacity: 0,
+        transition: { duration: 0.1 }
+    },
+    animate: {
+        opacity: 1,
+        transition: __assign(__assign({}, springConfig), { duration: 0.2 })
+    },
+    exit: {
+        opacity: 0,
+        transition: { duration: 0.15, damping: 35 }
+    }
+};
+/**
+ * Get animation variants based on tooltip placement
+ * @param placement - Tooltip placement (top, right, bottom, left)
+ * @returns Animation variants for the specified placement
+ */
+var getTooltipVariants = function (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 }) });
+        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 }) });
+        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 }) });
+        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 }) });
+        default:
+            return baseTooltipVariants;
+    }
+};
+
+export { baseTooltipVariants, getTooltipVariants };

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

@@ -0,0 +1,7 @@
+import React from "react";
+import { TooltipProps } from "./Tooltip.types";
+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 { Tooltip };

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

@@ -0,0 +1,84 @@
+import { __assign } from '../../../node_modules/tslib/tslib.es6.js';
+import React__default, { useState, useRef, useCallback, useEffect } from '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 { useSelectPortal } from '../../../hooks/useSelectPortal.js';
+import { AnimatePresence } from '../../../node_modules/framer-motion/dist/es/components/AnimatePresence/index.js';
+import { useReducedMotion } from '../../../node_modules/framer-motion/dist/es/utils/reduced-motion/use-reduced-motion.js';
+import { motion } from '../../../node_modules/framer-motion/dist/es/render/components/motion/proxy.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);
+    var shouldReduceMotion = useReducedMotion();
+    // Merge global theme with component-specific overrides
+    var theme = __assign(__assign({}, tooltipTheme), (themeOverrides || {}));
+    // Use the same positioning hook as Popover/Select for consistent behavior
+    var _l = useSelectPortal({
+        triggerRef: triggerRef,
+        isOpen: isVisible,
+        placement: placement, // TooltipPlacement matches SelectPlacement subset
+        offset: 8,
+        autoWidth: true,
+    }), position = _l.position, cssVariables = _l.cssVariables, portalContentRef = _l.contentRef;
+    // Event handlers - simplified timer management
+    var handleShowTooltip = useCallback(function () {
+        if (disabled)
+            return;
+        if (timerRef.current) {
+            clearTimeout(timerRef.current);
+        }
+        timerRef.current = setTimeout(function () {
+            setIsVisible(true);
+        }, delay);
+    }, [disabled, delay]);
+    var handleHideTooltip = useCallback(function () {
+        if (timerRef.current) {
+            clearTimeout(timerRef.current);
+        }
+        // Immediate hide for better responsiveness
+        setIsVisible(false);
+    }, []);
+    // Clean up timeout on unmount
+    useEffect(function () {
+        return function () {
+            if (timerRef.current) {
+                clearTimeout(timerRef.current);
+            }
+        };
+    }, []);
+    // Keyboard handler
+    var handleKeyDown = useCallback(function (e) {
+        if (e.key === 'Escape') {
+            handleHideTooltip();
+        }
+    }, [handleHideTooltip]);
+    // Event handlers for trigger element
+    var triggerHandlers = __assign(__assign({ onMouseEnter: handleShowTooltip, onMouseLeave: handleHideTooltip }, (showOnFocus && {
+        onFocus: handleShowTooltip,
+        onBlur: handleHideTooltip,
+    })), { onKeyDown: handleKeyDown });
+    // Combine refs for portal positioning
+    var handleRef = useCallback(function (el) {
+        tooltipRef.current = el;
+        if (portalContentRef && typeof portalContentRef === 'object' && 'current' in portalContentRef) {
+            portalContentRef.current = el;
+        }
+    }, [portalContentRef]);
+    // Computed values
+    var textOverflowClass = wrapText ? '' : 'text-ellipsis overflow-hidden whitespace-nowrap';
+    var widthClasses = cn(minWidth === 'fit-content' ? 'w-fit' : 'min-w-fit', textOverflowClass);
+    var tooltipContent = (React__default.createElement(AnimatePresence, null, isVisible && (React__default.createElement(motion.div, { id: id, role: role, ref: handleRef, style: __assign(__assign({ maxWidth: maxWidth, minWidth: minWidth !== 'fit-content' ? minWidth : undefined, width: 'max-content' }, cssVariables), { top: "".concat(position.top, "px"), left: "".concat(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", __assign({ className: "relative inline-block", ref: triggerRef }, triggerHandlers, { tabIndex: showOnFocus ? 0 : undefined, "aria-describedby": isVisible && id ? id : undefined }),
+        children,
+        typeof document !== 'undefined' && createPortal(tooltipContent, document.body)));
+};
+// Set display name for dev tools and Storybook
+Tooltip.displayName = "Tooltip";
+
+export { Tooltip };

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

@@ -0,0 +1,3 @@
+export declare const tooltipTheme: {
+    baseStyle: string;
+};

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

@@ -0,0 +1,6 @@
+var 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 glass-effect",
+};
+
+export { tooltipTheme };

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

@@ -0,0 +1,81 @@
+import { ReactNode } from "react";
+export type TooltipPlacement = "top" | "right" | "bottom" | "left";
+export interface TooltipThemeOverrides {
+    /**
+     * Base style for the tooltip container
+     */
+    baseStyle?: string;
+    /**
+     * Placement styles
+     */
+    top?: string;
+    right?: string;
+    bottom?: string;
+    left?: string;
+}
+export interface TooltipProps {
+    /**
+     * Content to display in the tooltip
+     */
+    content: ReactNode;
+    /**
+     * The element that triggers the tooltip
+     */
+    children: ReactNode;
+    /**
+     * Tooltip placement relative to the child element
+     * @default "top"
+     */
+    placement?: TooltipPlacement;
+    /**
+     * Delay before showing tooltip (in ms)
+     * @default 300
+     */
+    delay?: number;
+    /**
+     * Whether the tooltip is disabled
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Additional classes for the tooltip container
+     */
+    className?: string;
+    /**
+     * Max width for the tooltip content
+     * @default "360px"
+     */
+    maxWidth?: string;
+    /**
+     * Min width for the tooltip content
+     * @default "fit-content"
+     */
+    minWidth?: string | 'fit-content';
+    /**
+     * Whether the tooltip should be shown on focus (improves keyboard accessibility)
+     * @default true
+     */
+    showOnFocus?: boolean;
+    /**
+     * Whether to allow text wrapping for longer content
+     * @default false
+     */
+    wrapText?: boolean;
+    /**
+     * ID to be applied to the tooltip element (important for ARIA)
+     */
+    id?: string;
+    /**
+     * Theme overrides following shadcn patterns
+     */
+    theme?: TooltipThemeOverrides;
+    /**
+     * Custom ARIA label for the tooltip (enhances screen reader support)
+     */
+    'aria-label'?: string;
+    /**
+     * Role override for specific accessibility contexts
+     * @default "tooltip"
+     */
+    role?: 'tooltip' | 'dialog' | 'region';
+}