@carton-org/react-neumorphism/dist/components/Tooltip/Tooltip.js

A React component library implementing the neumorphism design style

import { jsxs as b, jsx as l } from "@emotion/react/jsx-runtime";
import { withTheme as P } from "@emotion/react";
import { useState as s, useRef as n, useCallback as c, useLayoutEffect as x } from "react";
import { createPortal as j } from "react-dom";
import { AnimatePresence as k } from "motion/react";
import { getPositionStyle as v, StyledTooltipWrapper as w, StyledTooltip as L } from "./tooltip.styles.js";
import { useScroll as M } from "../../hooks/useScroll.js";
import W from "../Typography/Typography.js";
const $ = ({
  text: p,
  children: a,
  alignment: e = "bottom-center",
  size: u = "sm",
  tooltipStyle: m,
  tooltipLabelStyle: f
}) => {
  const [y, d] = s(), [o, t] = s(!1), r = n(null), i = n(null), S = c(() => {
    if (r.current === null || i.current === null || !o)
      return;
    const T = v(r.current, i.current, e);
    d(T);
  }, [e, o]), h = c(() => {
    t(!1);
  }, []);
  return x(S, [e, o]), M({
    enable: o,
    callback: h
  }), /* @__PURE__ */ b(w, { ref: r, onMouseOver: () => t(!0), onFocus: () => t(!0), onMouseLeave: () => t(!1), onBlur: () => t(!1), children: [
    a,
    o && j(/* @__PURE__ */ l(k, { children: /* @__PURE__ */ l(L, { ref: i, initial: {
      opacity: 0
    }, animate: {
      opacity: 1
    }, exit: {
      opacity: 0
    }, transition: {
      duration: 0.2
    }, css: y, $tooltipStyle: m, children: /* @__PURE__ */ l(W, { size: u, labelStyle: f, children: p }) }) }), document.body)
  ] });
}, g = P($);
export {
  g as default
};