@erudilabs/tooltip/dist/index.mjs

A tooltip is a element used in conjunction with the cursor or mouse pointer to display information about an item without needing to click on it.

"use client"
var __defProp = Object.defineProperty;
var __defProps = Object.defineProperties;
var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __propIsEnum = Object.prototype.propertyIsEnumerable;
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
var __spreadValues = (a, b) => {
  for (var prop in b || (b = {}))
    if (__hasOwnProp.call(b, prop))
      __defNormalProp(a, prop, b[prop]);
  if (__getOwnPropSymbols)
    for (var prop of __getOwnPropSymbols(b)) {
      if (__propIsEnum.call(b, prop))
        __defNormalProp(a, prop, b[prop]);
    }
  return a;
};
var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));

// src/tooltip.tsx
import { useState, useRef, Fragment } from "react";
import {
  useFloating,
  autoUpdate,
  offset,
  flip,
  inline,
  useInteractions,
  useHover,
  arrow,
  FloatingArrow
} from "@floating-ui/react";
import { mergeClassName } from "@erudilabs/merge-class-utils";
import { jsx, jsxs } from "react/jsx-runtime";
var Tooltip = (props) => {
  const { children, content, className, testId, placement = "top" } = props;
  const arrowRef = useRef(null);
  const [isOpen, setIsOpen] = useState(false);
  const ARROW_HEIGHT = 8;
  const GAP = 2;
  const { x, y, strategy, refs, context } = useFloating({
    open: isOpen,
    onOpenChange: setIsOpen,
    middleware: [
      inline(),
      offset(ARROW_HEIGHT + GAP),
      flip({
        fallbackAxisSideDirection: "start",
        fallbackPlacements: [
          "top",
          "right",
          "bottom",
          "left",
          "top-start",
          "top-end",
          "right-start",
          "right-end",
          "bottom-start",
          "bottom-end",
          "left-start",
          "left-end"
        ]
      }),
      arrow({
        element: arrowRef
      })
    ],
    placement,
    whileElementsMounted: autoUpdate
  });
  const hover = useHover(context, { move: false });
  const { getReferenceProps, getFloatingProps } = useInteractions([hover]);
  return /* @__PURE__ */ jsxs(Fragment, { children: [
    /* @__PURE__ */ jsx(
      "div",
      __spreadProps(__spreadValues({
        "data-testid": testId,
        ref: refs.setReference
      }, getReferenceProps()), {
        className: mergeClassName("cursor-pointer inline-block", className),
        children
      })
    ),
    isOpen && /* @__PURE__ */ jsxs(
      "div",
      __spreadProps(__spreadValues({
        ref: refs.setFloating,
        className: mergeClassName([
          "block text-left absolute z-30 p-2 text-sm transition-opacity duration-300 rounded-lg shadow-sm max-w-[400px]",
          "bg-gray-800",
          "dark:bg-gray-200"
        ]),
        style: {
          position: strategy,
          top: y != null ? y : 0,
          left: x != null ? x : 0,
          width: "max-content"
        }
      }, getFloatingProps()), {
        children: [
          /* @__PURE__ */ jsx("p", { className: "text-gray-50 dark:text-black", children: content }),
          /* @__PURE__ */ jsx(
            FloatingArrow,
            {
              ref: arrowRef,
              context,
              className: "fill-gray-800 dark:fill-gray-200"
            }
          )
        ]
      })
    )
  ] });
};
export {
  Tooltip
};
//# sourceMappingURL=index.mjs.map