@kloudlite/design-system
Version:
A design system for building ambitious products.
85 lines (81 loc) • 2.45 kB
JavaScript
"use client";
// components/atoms/tooltip.tsx
import { useEffect, useState } from "react";
import * as TooltipPrimitive from "@radix-ui/react-tooltip";
import { AnimatePresence, motion } from "framer-motion";
// components/utils.tsx
import classNames from "classnames";
import { useMemo } from "react";
import { v4 } from "uuid";
var cn = (...props) => {
return classNames(...props);
};
// components/atoms/tooltip.tsx
import { jsx, jsxs } from "react/jsx-runtime";
var Provider2 = ({ delayDuration = 0, children }) => /* @__PURE__ */ jsx(TooltipPrimitive.Provider, { delayDuration, children });
var Root2 = ({
children,
content,
open = false,
offset = 5,
side,
align,
className
}) => {
const [_open, _setOpen] = useState(false);
useEffect(() => {
_setOpen(open);
}, [open]);
return /* @__PURE__ */ jsxs(
TooltipPrimitive.Root,
{
open: _open,
onOpenChange: (e) => {
if (open) {
_setOpen(open);
} else {
_setOpen(e);
}
},
children: [
/* @__PURE__ */ jsx(TooltipPrimitive.Trigger, { asChild: true, children }),
/* @__PURE__ */ jsx(AnimatePresence, { children: _open && /* @__PURE__ */ jsx(TooltipPrimitive.Portal, { forceMount: true, children: /* @__PURE__ */ jsx(
TooltipPrimitive.Content,
{
asChild: true,
sideOffset: offset,
side: side || "right",
align: align || "start",
alignOffset: 0,
onClick: (e) => e.preventDefault(),
children: /* @__PURE__ */ jsx(
motion.div,
{
onKeyDown: (e) => console.log(e),
initial: { y: -2, opacity: 0 },
animate: { y: 0, opacity: 1 },
exit: { y: -2, opacity: 0 },
transition: { duration: 0.3, ease: "anticipate" },
className: cn(
"kl-z-[99999999999] kl-bodySm kl-text-text-default kl-px-lg kl-py-md kl-shadow-popover kl-bg-surface-basic-default kl-rounded kl-max-w-[200px] kl-overflow-hidden [pointer-events:kl-all]",
className
),
children: content
}
)
}
) }) })
]
}
);
};
var Tooltip = {
Root: Root2,
Provider: Provider2
};
var tooltip_default = Tooltip;
export {
Provider2 as Provider,
Root2 as Root,
tooltip_default as default
};