@erudilabs/tooltip/dist/index.js

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"
"use strict";
var __defProp = Object.defineProperty;
var __defProps = Object.defineProperties;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
var __getOwnPropNames = Object.getOwnPropertyNames;
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));
var __export = (target, all) => {
  for (var name in all)
    __defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
  if (from && typeof from === "object" || typeof from === "function") {
    for (let key of __getOwnPropNames(from))
      if (!__hasOwnProp.call(to, key) && key !== except)
        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
  }
  return to;
};
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);

// src/index.ts
var src_exports = {};
__export(src_exports, {
  Tooltip: () => Tooltip
});
module.exports = __toCommonJS(src_exports);

// src/tooltip.tsx
var import_react = require("react");
var import_react2 = require("@floating-ui/react");
var import_merge_class_utils = require("@erudilabs/merge-class-utils");
var import_jsx_runtime = require("react/jsx-runtime");
var Tooltip = (props) => {
  const { children, content, className, testId, placement = "top" } = props;
  const arrowRef = (0, import_react.useRef)(null);
  const [isOpen, setIsOpen] = (0, import_react.useState)(false);
  const ARROW_HEIGHT = 8;
  const GAP = 2;
  const { x, y, strategy, refs, context } = (0, import_react2.useFloating)({
    open: isOpen,
    onOpenChange: setIsOpen,
    middleware: [
      (0, import_react2.inline)(),
      (0, import_react2.offset)(ARROW_HEIGHT + GAP),
      (0, import_react2.flip)({
        fallbackAxisSideDirection: "start",
        fallbackPlacements: [
          "top",
          "right",
          "bottom",
          "left",
          "top-start",
          "top-end",
          "right-start",
          "right-end",
          "bottom-start",
          "bottom-end",
          "left-start",
          "left-end"
        ]
      }),
      (0, import_react2.arrow)({
        element: arrowRef
      })
    ],
    placement,
    whileElementsMounted: import_react2.autoUpdate
  });
  const hover = (0, import_react2.useHover)(context, { move: false });
  const { getReferenceProps, getFloatingProps } = (0, import_react2.useInteractions)([hover]);
  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_react.Fragment, { children: [
    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
      "div",
      __spreadProps(__spreadValues({
        "data-testid": testId,
        ref: refs.setReference
      }, getReferenceProps()), {
        className: (0, import_merge_class_utils.mergeClassName)("cursor-pointer inline-block", className),
        children
      })
    ),
    isOpen && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
      "div",
      __spreadProps(__spreadValues({
        ref: refs.setFloating,
        className: (0, import_merge_class_utils.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__ */ (0, import_jsx_runtime.jsx)("p", { className: "text-gray-50 dark:text-black", children: content }),
          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
            import_react2.FloatingArrow,
            {
              ref: arrowRef,
              context,
              className: "fill-gray-800 dark:fill-gray-200"
            }
          )
        ]
      })
    )
  ] });
};
// Annotate the CommonJS export names for ESM import in node:
0 && (module.exports = {
  Tooltip
});
//# sourceMappingURL=index.js.map