'use client';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Content, Portal, Provider, Root, Trigger, } from '@radix-ui/react-tooltip';
import * as React from 'react';
import { cn } from '../../../scalars/lib/utils.js';
const TooltipContent = React.forwardRef(({ children, className, ...props }, ref) => {
    return (_jsx(Content, { ref: ref, ...props, className: cn(
        // Base styles
        'z-50 overflow-hidden rounded-md text-sm', 
        // Colors & Border
        'border border-gray-200 bg-white text-gray-900 dark:border-gray-900 dark:bg-slate-900 dark:text-gray-200', 
        // Padding & Shadow
        'px-3 py-1.5 shadow-md', 
        // Animations
        'data-[state=open]:animate-fade-in data-[state=open]:animate-zoom-in', 'data-[state=closed]:animate-fade-out data-[state=closed]:animate-zoom-out', 
        // Slide animations based on position
        'data-[side=bottom]:animate-slide-in-from-top', 'data-[side=left]:animate-slide-in-from-right', 'data-[side=right]:animate-slide-in-from-left', 'data-[side=top]:animate-slide-in-from-bottom', className), children: children }));
});
TooltipContent.displayName = 'TooltipContent';
const Tooltip = ({ content, children, triggerAsChild = false, delayDuration = 0, ...props }) => {
    const { open, defaultOpen, onOpenChange, ...rest } = props;
    return (_jsxs(Root, { defaultOpen: defaultOpen, delayDuration: delayDuration, onOpenChange: onOpenChange, open: open, children: [_jsx(Trigger, { asChild: triggerAsChild, type: triggerAsChild ? undefined : 'button', children: children }), _jsx(Portal, { children: _jsx(TooltipContent, { sideOffset: 3, ...rest, children: content }) })] }));
};
export { Tooltip, TooltipContent, Provider as TooltipProvider, Root as TooltipRoot, Trigger as TooltipTrigger, };
//# sourceMappingURL=tooltip.js.map