@primer/react/dist/Tooltip/Tooltip.js

An implementation of GitHub's Primer Design System using React

import { useId as useId$1 } from "../hooks/useId.js";
import { TooltipContext } from "./TooltipContext.js";
import Tooltip_module_css_default from "./Tooltip.module.css.js";
import { clsx } from "clsx";
import { jsx } from "react/jsx-runtime";
import React, { useMemo } from "react";
//#region src/Tooltip/Tooltip.tsx
/**
* @deprecated
*/
/**
* @deprecated
*/
const Tooltip = /*#__PURE__*/ React.forwardRef(function Tooltip({ as: Component = "span", direction = "n", children, className, text, noDelay, align, wrap, id, ...rest }, ref) {
	const tooltipId = useId$1(id);
	const tooltipClasses = clsx(className, Tooltip_module_css_default.Tooltip, Tooltip_module_css_default[`Tooltip--${direction}`], {
		[Tooltip_module_css_default[`Tooltip--align${align === "left" ? "Left" : "Right"}`]]: align,
		[Tooltip_module_css_default["Tooltip--noDelay"]]: noDelay,
		[Tooltip_module_css_default["Tooltip--multiline"]]: wrap,
		[`tooltipped-${direction}`]: true,
		[`tooltipped-align-${align === "left" ? "left" : "right"}-2`]: align,
		"tooltipped-no-delay": noDelay,
		"tooltipped-multiline": wrap
	});
	const value = useMemo(() => ({ tooltipId }), [tooltipId]);
	return /*#__PURE__*/ jsx(TooltipContext.Provider, {
		value,
		children: /*#__PURE__*/ jsx(Component, {
			role: "tooltip",
			"aria-label": text,
			id: tooltipId,
			...rest,
			className: tooltipClasses,
			ref,
			children
		})
	});
});
Tooltip.alignments = ["left", "right"];
Tooltip.directions = [
	"n",
	"ne",
	"e",
	"se",
	"s",
	"sw",
	"w",
	"nw"
];
Tooltip.__SLOT__ = Symbol("Tooltip");
//#endregion
export { Tooltip as default };