// src/components/Tooltip/Tooltip.tsx
import {
  useCallback,
  useEffect,
  useLayoutEffect,
  useRef,
  useState
} from "react";
import { createPortal } from "react-dom";

// src/utils/utils.ts
import { clsx } from "clsx";
import { twMerge } from "tailwind-merge";
function cn(...inputs) {
  return twMerge(clsx(inputs));
}

// src/components/Text/Text.tsx
import { jsx } from "react/jsx-runtime";
var Text = ({
  children,
  size = "md",
  weight = "normal",
  color = "text-text-950",
  as,
  className = "",
  ...props
}) => {
  let sizeClasses;
  let weightClasses;
  const sizeClassMap = {
    "2xs": "text-2xs",
    xs: "text-xs",
    sm: "text-sm",
    md: "text-md",
    lg: "text-lg",
    xl: "text-xl",
    "2xl": "text-2xl",
    "3xl": "text-3xl",
    "4xl": "text-4xl",
    "5xl": "text-5xl",
    "6xl": "text-6xl"
  };
  sizeClasses = sizeClassMap[size] ?? sizeClassMap.md;
  const weightClassMap = {
    hairline: "font-hairline",
    light: "font-light",
    normal: "font-normal",
    medium: "font-medium",
    semibold: "font-semibold",
    bold: "font-bold",
    extrabold: "font-extrabold",
    black: "font-black"
  };
  weightClasses = weightClassMap[weight] ?? weightClassMap.normal;
  const baseClasses = "font-primary";
  const Component = as ?? "p";
  return /* @__PURE__ */ jsx(
    Component,
    {
      className: cn(baseClasses, sizeClasses, weightClasses, color, className),
      ...props,
      children
    }
  );
};
var Text_default = Text;

// src/components/Tooltip/Tooltip.tsx
import { Fragment, jsx as jsx2, jsxs } from "react/jsx-runtime";
var POSITION_CLASSES = {
  top: "bottom-full left-1/2 -translate-x-1/2 mb-2",
  bottom: "top-full left-1/2 -translate-x-1/2 mt-2",
  left: "right-full top-1/2 -translate-y-1/2 mr-2",
  right: "left-full top-1/2 -translate-y-1/2 ml-2"
};
var TOOLTIP_GAP_PX = 8;
var computePortalCoords = (triggerRect, position, tooltipRect) => {
  switch (position) {
    case "bottom":
      return {
        top: triggerRect.bottom + TOOLTIP_GAP_PX,
        left: triggerRect.left + triggerRect.width / 2 - tooltipRect.width / 2
      };
    case "left":
      return {
        top: triggerRect.top + triggerRect.height / 2 - tooltipRect.height / 2,
        left: triggerRect.left - tooltipRect.width - TOOLTIP_GAP_PX
      };
    case "right":
      return {
        top: triggerRect.top + triggerRect.height / 2 - tooltipRect.height / 2,
        left: triggerRect.right + TOOLTIP_GAP_PX
      };
    case "top":
    default:
      return {
        top: triggerRect.top - tooltipRect.height - TOOLTIP_GAP_PX,
        left: triggerRect.left + triggerRect.width / 2 - tooltipRect.width / 2
      };
  }
};
var TOOLTIP_CONTENT_CLASSES = cn(
  "whitespace-nowrap",
  "px-4 py-2 rounded-lg",
  "bg-background-dark text-white",
  "text-sm font-medium",
  "shadow-[0px_3px_10px_0px_rgba(38,38,38,0.2)]",
  "transition-opacity duration-150"
);
function Tooltip({
  content,
  children,
  position = "top",
  className,
  contentClassName,
  disabled = false,
  usePortal = false
}) {
  const triggerRef = useRef(null);
  const tooltipRef = useRef(null);
  const [open, setOpen] = useState(false);
  const [coords, setCoords] = useState({
    top: 0,
    left: 0
  });
  const updatePosition = useCallback(() => {
    if (!triggerRef.current || !tooltipRef.current) return;
    const triggerRect = triggerRef.current.getBoundingClientRect();
    const tooltipRect = {
      width: tooltipRef.current.offsetWidth,
      height: tooltipRef.current.offsetHeight
    };
    setCoords(computePortalCoords(triggerRect, position, tooltipRect));
  }, [position]);
  useLayoutEffect(() => {
    if (!usePortal || !open) return;
    updatePosition();
    const onViewportChange = () => updatePosition();
    window.addEventListener("resize", onViewportChange);
    window.addEventListener("scroll", onViewportChange, true);
    return () => {
      window.removeEventListener("resize", onViewportChange);
      window.removeEventListener("scroll", onViewportChange, true);
    };
  }, [usePortal, open, updatePosition, content]);
  useEffect(() => {
    if (!usePortal) return;
    const node = triggerRef.current;
    if (!node) return;
    const handleOpen = () => setOpen(true);
    const handleClose = () => setOpen(false);
    node.addEventListener("mouseenter", handleOpen);
    node.addEventListener("mouseleave", handleClose);
    node.addEventListener("focusin", handleOpen);
    node.addEventListener("focusout", handleClose);
    return () => {
      node.removeEventListener("mouseenter", handleOpen);
      node.removeEventListener("mouseleave", handleClose);
      node.removeEventListener("focusin", handleOpen);
      node.removeEventListener("focusout", handleClose);
    };
  }, [usePortal]);
  if (disabled) {
    return /* @__PURE__ */ jsx2(Fragment, { children });
  }
  if (usePortal) {
    return /* @__PURE__ */ jsxs(
      Text_default,
      {
        as: "span",
        ref: triggerRef,
        className: cn("relative inline-flex", className),
        "aria-describedby": open ? "tooltip-portal" : void 0,
        children: [
          children,
          open && typeof document !== "undefined" && createPortal(
            /* @__PURE__ */ jsx2(
              "div",
              {
                ref: tooltipRef,
                id: "tooltip-portal",
                role: "tooltip",
                style: {
                  position: "fixed",
                  top: coords.top,
                  left: coords.left,
                  zIndex: 9999
                },
                className: cn(TOOLTIP_CONTENT_CLASSES, contentClassName),
                children: content
              }
            ),
            document.body
          )
        ]
      }
    );
  }
  return /* @__PURE__ */ jsxs("div", { className: cn("relative inline-flex group", className), children: [
    children,
    /* @__PURE__ */ jsx2(
      "div",
      {
        role: "tooltip",
        className: cn(
          "absolute z-50",
          TOOLTIP_CONTENT_CLASSES,
          "opacity-0 invisible",
          "group-hover:opacity-100 group-hover:visible",
          "group-focus-within:opacity-100 group-focus-within:visible",
          POSITION_CLASSES[position],
          contentClassName
        ),
        children: content
      }
    )
  ] });
}

// src/components/TruncatedText/TruncatedText.tsx
import { jsx as jsx3 } from "react/jsx-runtime";
var SIZE_CLASS_MAP = {
  "2xs": "text-2xs",
  xs: "text-xs",
  sm: "text-sm",
  md: "text-md",
  lg: "text-lg",
  xl: "text-xl",
  "2xl": "text-2xl",
  "3xl": "text-3xl",
  "4xl": "text-4xl",
  "5xl": "text-5xl",
  "6xl": "text-6xl"
};
var WEIGHT_CLASS_MAP = {
  hairline: "font-hairline",
  light: "font-light",
  normal: "font-normal",
  medium: "font-medium",
  semibold: "font-semibold",
  bold: "font-bold",
  extrabold: "font-extrabold",
  black: "font-black"
};
var TruncatedText = ({
  children,
  tooltipContent,
  tooltipPosition = "top",
  size = "md",
  weight = "normal",
  color = "text-text-950",
  className,
  wrapperClassName,
  as,
  ...rest
}) => {
  const Component = as ?? "span";
  const resolvedTooltipContent = tooltipContent ?? (typeof children === "string" ? children : "");
  return /* @__PURE__ */ jsx3(
    Tooltip,
    {
      content: resolvedTooltipContent,
      position: tooltipPosition,
      disabled: !resolvedTooltipContent,
      usePortal: true,
      className: cn("inline-flex min-w-0 max-w-full", wrapperClassName),
      children: /* @__PURE__ */ jsx3(
        Component,
        {
          className: cn(
            "font-primary truncate block min-w-0 max-w-full",
            SIZE_CLASS_MAP[size],
            WEIGHT_CLASS_MAP[weight],
            color,
            className
          ),
          ...rest,
          children
        }
      )
    }
  );
};
var TruncatedText_default = TruncatedText;
export {
  TruncatedText,
  TruncatedText_default as default
};
//# sourceMappingURL=index.mjs.map