@konstructio/ui
Version:
A set of reusable and customizable React components built for konstruct.io
36 lines (35 loc) • 1.46 kB
JavaScript
import { jsx as e, jsxs as s } from "react/jsx-runtime";
import { S as u } from "../../index-BtQfgaSF.js";
import { forwardRef as v, useRef as N, useImperativeHandle as h, useMemo as w, isValidElement as x } from "react";
import { cn as o } from "../../utils/index.js";
import { arrowVariants as R, tooltipVariants as V } from "./Tooltip.variants.js";
import { useTooltip as T } from "./hooks/useTooltip.js";
import { Typography as b } from "../Typography/Typography.js";
const I = v(
({ children: r, content: i, className: m, theme: l, position: a, wrapperClassName: n }, p) => {
const c = N(null), { isVisible: f, componentRef: t } = T();
h(p, () => t.current, [t]);
const d = w(
() => x(r) ? r : /* @__PURE__ */ e("p", { className: "p-2", children: r }),
[r]
);
return /* @__PURE__ */ e("div", { className: o("w-full", n), "data-theme": l, children: /* @__PURE__ */ s("div", { className: "relative w-max", children: [
/* @__PURE__ */ e(u, { ref: t, className: o("cursor-pointer ", m), children: d }),
/* @__PURE__ */ s(
"div",
{
ref: c,
className: o(V({ position: a })),
"data-visible": f,
children: [
/* @__PURE__ */ e("span", { className: o(R({ position: a })) }),
/* @__PURE__ */ e(b, { variant: "tooltip", className: "text-white", children: i })
]
}
)
] }) });
}
);
export {
I as Tooltip
};