@algolia/satellite 1.0.0-beta.16 → 1.0.0-beta.161

package/cjs/Tooltip/OverflowTooltipWrapper.js

@@ -0,0 +1,44 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.OverflowTooltipWrapper = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _react = require("react");
+var _satellitePrefixer = _interopRequireDefault(require("../styles/helpers/satellitePrefixer"));
+var _TextWrap = _interopRequireDefault(require("../TextWrap"));
+var _TooltipWrapper = require("./TooltipWrapper");
+var _utils = require("./utils");
+var _jsxRuntime = require("react/jsx-runtime");
+var _templateObject;
+var _excluded = ["children"];
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+var OverflowTooltipWrapper = function OverflowTooltipWrapper(_ref) {
+  var children = _ref.children,
+    props = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
+  var _useState = (0, _react.useState)(null),
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    content = _useState2[0],
+    setContent = _useState2[1];
+  var onMouseEnter = function onMouseEnter(evt) {
+    setContent((0, _utils.isOverflowing)(evt.currentTarget) ? evt.currentTarget.textContent : null);
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_TooltipWrapper.TooltipWrapper, _objectSpread(_objectSpread({
+    content: content && /*#__PURE__*/(0, _jsxRuntime.jsx)(_TextWrap["default"], {
+      children: content
+    })
+  }, props), {}, {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: (0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["truncate"]))),
+      onMouseEnter: onMouseEnter,
+      children: children
+    })
+  }));
+};
+exports.OverflowTooltipWrapper = OverflowTooltipWrapper;

package/cjs/Tooltip/Tooltip.d.ts

@@ -0,0 +1,24 @@
+import type { DetailedHTMLProps, HTMLAttributes } from "react";
+export declare type TooltipVariant = "dark" | "light";
+export interface TooltipProps extends DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement> {
+    variant?: TooltipVariant;
+}
+/**
+ * Tooltips are floating labels that briefly explain the function of a user interface element. They can be triggered when merchants hover, focus, tap, or click.
+ *
+ * Use tooltips to identify or add a small amount of information to an element. Typically, tooltips are used to help users understand the meaning or purpose of icons, showing the full version of truncated text, or displaying the alt text for an image. Tooltips do not receive input focus.
+ * When writing tooltips, be short and concise. When you need to add more than a single line of extra information, consider using inline dialogs instead.
+ *
+ * The position of tooltips is flexible and will change depending on how close the element is to the edge of the screen.
+ *
+ * ## Best practices
+ * Tooltips should:
+ *
+ * - Provide useful, additional information or clarification.
+ * - Succinctly describe or expand on the element they point to.
+ * - Not be used to communicate critical information, including errors in forms or other interaction feedback.
+ * - Not contain any links, inputs, or buttons.
+ * - Be used sparingly. If you're building something that requires a lot of tooltips, work on clarifying the design and the language in the experience.
+ */
+export declare const Tooltip: import("react").ForwardRefExoticComponent<Pick<TooltipProps, "key" | "id" | "color" | "translate" | "hidden" | "dir" | "slot" | "style" | "title" | "accessKey" | "draggable" | "lang" | "className" | "prefix" | "children" | "contentEditable" | "inputMode" | "tabIndex" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "contextMenu" | "placeholder" | "spellCheck" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "variant"> & import("react").RefAttributes<HTMLDivElement>>;
+export default Tooltip;

package/cjs/Tooltip/Tooltip.js

@@ -0,0 +1,54 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.Tooltip = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+var _clsx = _interopRequireDefault(require("clsx"));
+var _react = require("react");
+var _satellitePrefixer = _interopRequireDefault(require("../styles/helpers/satellitePrefixer"));
+var _jsxRuntime = require("react/jsx-runtime");
+var _excluded = ["className", "variant"];
+var _templateObject, _templateObject2, _templateObject3;
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+var VARIANT_CLASSNAMES = {
+  dark: (0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["tooltip-dark"]))),
+  light: (0, _satellitePrefixer["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["tooltip-light"])))
+};
+
+/**
+ * Tooltips are floating labels that briefly explain the function of a user interface element. They can be triggered when merchants hover, focus, tap, or click.
+ *
+ * Use tooltips to identify or add a small amount of information to an element. Typically, tooltips are used to help users understand the meaning or purpose of icons, showing the full version of truncated text, or displaying the alt text for an image. Tooltips do not receive input focus.
+ * When writing tooltips, be short and concise. When you need to add more than a single line of extra information, consider using inline dialogs instead.
+ *
+ * The position of tooltips is flexible and will change depending on how close the element is to the edge of the screen.
+ *
+ * ## Best practices
+ * Tooltips should:
+ *
+ * - Provide useful, additional information or clarification.
+ * - Succinctly describe or expand on the element they point to.
+ * - Not be used to communicate critical information, including errors in forms or other interaction feedback.
+ * - Not contain any links, inputs, or buttons.
+ * - Be used sparingly. If you're building something that requires a lot of tooltips, work on clarifying the design and the language in the experience.
+ */
+var Tooltip = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
+  var className = _ref.className,
+    _ref$variant = _ref.variant,
+    variant = _ref$variant === void 0 ? "dark" : _ref$variant,
+    divProps = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", _objectSpread(_objectSpread({}, divProps), {}, {
+    className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["tooltip typo-display-body"]))), VARIANT_CLASSNAMES[variant], className),
+    ref: ref
+  }));
+});
+exports.Tooltip = Tooltip;
+Tooltip.displayName = "Tooltip";
+var _default = Tooltip;
+exports["default"] = _default;

package/cjs/Tooltip/Tooltip.tailwind.d.ts

@@ -0,0 +1,5 @@
+export = tooltipPlugin;
+declare const tooltipPlugin: {
+    handler: import("tailwindcss/types/config").PluginCreator;
+    config?: Partial<import("tailwindcss").Config> | undefined;
+};

package/cjs/Tooltip/Tooltip.tailwind.js

@@ -0,0 +1,137 @@
+"use strict";
+
+// @ts-check
+var plugin = require("tailwindcss/plugin");
+var tooltipPlugin = plugin(function (_ref) {
+  var addComponents = _ref.addComponents,
+    theme = _ref.theme;
+  /** @type {string} */
+  var tooltipDarkBackground = theme("colors.grey.900");
+  /** @type {string} */
+  var tooltipLightBackground = theme("colors.white");
+  var animationDuration = "100ms";
+  var animationEasing = "cubic-bezier(.17,.61,.4,.95)";
+  addComponents({
+    ".tooltip": {
+      padding: "".concat(theme("spacing.1"), " ").concat(theme("spacing.2")),
+      backgroundColor: tooltipDarkBackground,
+      color: theme("colors.white"),
+      boxShadow: theme("boxShadow.z200"),
+      borderRadius: theme("borderRadius.DEFAULT"),
+      // Used on the dashboard, should probably move over there
+      code: {
+        color: "currentColor",
+        border: "1px solid currentColor",
+        background: "initial",
+        whiteSpace: "nowrap",
+        lineHeight: "2"
+      }
+    },
+    ".tooltip-dark": {
+      ".typo-link": {
+        color: theme("colors.accent.300"),
+        textDecoration: "underline"
+      }
+    },
+    ".tooltip-light": {
+      color: theme("colors.grey.900"),
+      backgroundColor: tooltipLightBackground
+    }
+  });
+  addComponents({
+    /* eslint-disable @algolia/satellite/prefer-stl-helper */
+    "@keyframes stl-tooltip-slide-down-and-fade": {
+      from: {
+        opacity: "0",
+        transform: "translateY(-2px)"
+      },
+      to: {
+        opacity: "1",
+        transform: "translateY(0)"
+      }
+    },
+    "@keyframes stl-tooltip-slide-left-and-fade": {
+      from: {
+        opacity: "0",
+        transform: "translateX(2px)"
+      },
+      to: {
+        opacity: "1",
+        transform: "translateX(0)"
+      }
+    },
+    "@keyframes stl-tooltip-slide-up-and-fade": {
+      from: {
+        opacity: "0",
+        transform: "translateY(2px)"
+      },
+      to: {
+        opacity: "1",
+        transform: "translateY(0)"
+      }
+    },
+    "@keyframes stl-tooltip-slide-right-and-fade": {
+      from: {
+        opacity: "0",
+        transform: "translateX(-2px)"
+      },
+      to: {
+        opacity: "1",
+        transform: "translateX(0)"
+      }
+    },
+    "@keyframes stl-tooltip-fade-out": {
+      from: {
+        opacity: "1"
+      },
+      to: {
+        opacity: "0"
+      }
+    },
+    ".tooltip-content": {
+      zIndex: theme("zIndex.tooltip"),
+      userSelect: "none",
+      maxWidth: theme("spacing.64"),
+      // Even if the user has enabled reduced motion or animate is `false`,
+      // we still need to keep this animation to handle the hide delay
+      '&[data-state="closed"]': {
+        animation: "stl-tooltip-fade-out 0ms linear var(--tooltip-hide-delay)"
+      },
+      "@media (prefers-reduced-motion: no-preference)": {
+        willChange: "transform, opacity",
+        '&[data-state="delayed-open"]': {
+          '&[data-side="top"]': {
+            animation: "stl-tooltip-slide-down-and-fade ".concat(animationDuration, " ").concat(animationEasing)
+          },
+          '&[data-side="right"]': {
+            animation: "stl-tooltip-slide-left-and-fade ".concat(animationDuration, " ").concat(animationEasing)
+          },
+          '&[data-side="left"]': {
+            animation: "stl-tooltip-slide-right-and-fade ".concat(animationDuration, " ").concat(animationEasing)
+          },
+          '&[data-side="bottom"]': {
+            animation: "stl-tooltip-slide-up-and-fade ".concat(animationDuration, " ").concat(animationEasing)
+          }
+        },
+        '&[data-state="closed"]': {
+          animation: "stl-tooltip-fade-out ".concat(animationDuration, " ").concat(animationEasing, " var(--tooltip-hide-delay)")
+        }
+      }
+    },
+    ".tooltip-arrow-dark": {
+      fill: tooltipDarkBackground
+    },
+    // Since Radix relies on a SVG for the arrow, we use the stroke property
+    // with a dash array/offset to create a border around the arrow.
+    ".tooltip-arrow-light": {
+      fill: tooltipLightBackground,
+      stroke: theme("colors.shadow.10"),
+      strokeWidth: "3px",
+      strokeDasharray: "36",
+      strokeDashoffset: "-30"
+    }
+    /* eslint-enable @algolia/satellite/prefer-stl-helper */
+  });
+});
+
+module.exports = tooltipPlugin;

package/cjs/Tooltip/TooltipWrapper.d.ts

@@ -0,0 +1,15 @@
+import { ReactElement, ReactNode, ReactText } from "react";
+import type { TooltipWrapperBaseProps } from "./types";
+export interface TooltipWrapperProps extends TooltipWrapperBaseProps {
+    /**
+     * Defines whether the tooltip should be displayed or not.
+     * @default undefined
+     */
+    show?: boolean;
+    /**
+     * Defines the content of the tooltip.
+     */
+    content: ReactNode;
+    children: ReactElement | ReactText;
+}
+export declare const TooltipWrapper: ({ show, delay, hideDelay, content: tooltipContent, side, sideOffset, align, alignOffset, tooltipVariant, tooltipClassName, children, noArrow, interactive, avoidCollisions, }: TooltipWrapperProps) => JSX.Element;

package/cjs/Tooltip/TooltipWrapper.js

@@ -0,0 +1,82 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TooltipWrapper = void 0;
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+var Tooltip = _interopRequireWildcard(require("@radix-ui/react-tooltip"));
+var _clsx = _interopRequireDefault(require("clsx"));
+var _react = require("react");
+var _Satellite = require("../Satellite");
+var _satellitePrefixer = _interopRequireDefault(require("../styles/helpers/satellitePrefixer"));
+var _Tooltip = _interopRequireDefault(require("./Tooltip"));
+var _jsxRuntime = require("react/jsx-runtime");
+var _templateObject, _templateObject2, _templateObject3;
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+var TooltipWrapper = function TooltipWrapper(_ref) {
+  var show = _ref.show,
+    _ref$delay = _ref.delay,
+    delay = _ref$delay === void 0 ? 250 : _ref$delay,
+    _ref$hideDelay = _ref.hideDelay,
+    hideDelay = _ref$hideDelay === void 0 ? 500 : _ref$hideDelay,
+    tooltipContent = _ref.content,
+    _ref$side = _ref.side,
+    side = _ref$side === void 0 ? "bottom" : _ref$side,
+    _ref$sideOffset = _ref.sideOffset,
+    sideOffset = _ref$sideOffset === void 0 ? 0 : _ref$sideOffset,
+    _ref$align = _ref.align,
+    align = _ref$align === void 0 ? "center" : _ref$align,
+    _ref$alignOffset = _ref.alignOffset,
+    alignOffset = _ref$alignOffset === void 0 ? 0 : _ref$alignOffset,
+    _ref$tooltipVariant = _ref.tooltipVariant,
+    tooltipVariant = _ref$tooltipVariant === void 0 ? "dark" : _ref$tooltipVariant,
+    tooltipClassName = _ref.tooltipClassName,
+    children = _ref.children,
+    _ref$noArrow = _ref.noArrow,
+    noArrow = _ref$noArrow === void 0 ? false : _ref$noArrow,
+    _ref$interactive = _ref.interactive,
+    interactive = _ref$interactive === void 0 ? true : _ref$interactive,
+    _ref$avoidCollisions = _ref.avoidCollisions,
+    avoidCollisions = _ref$avoidCollisions === void 0 ? true : _ref$avoidCollisions;
+  var createPortal = (0, _Satellite.useCreatePortal)();
+  if (!tooltipContent) return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
+    children: children
+  });
+  var isReactText = typeof children === "string" || typeof children === "number";
+  if (!isReactText && children.type === _react.Fragment) throw new Error("TooltipWrapper component doesn't accept a Fragment as a child.");
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(Tooltip.Provider, {
+    delayDuration: delay,
+    skipDelayDuration: 300,
+    disableHoverableContent: !interactive,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(Tooltip.Root, {
+      open: show,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Tooltip.Trigger, {
+        asChild: !isReactText,
+        children: children
+      }), createPortal( /*#__PURE__*/(0, _jsxRuntime.jsxs)(Tooltip.Content, {
+        className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["tooltip-content"]))), tooltipClassName),
+        style: {
+          "--tooltip-hide-delay": "".concat(hideDelay, "ms")
+        },
+        side: side,
+        sideOffset: (noArrow ? 8 : 4) + sideOffset,
+        align: align,
+        alignOffset: alignOffset,
+        avoidCollisions: avoidCollisions,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Tooltip["default"], {
+          variant: tooltipVariant,
+          children: tooltipContent
+        }), !noArrow && /*#__PURE__*/(0, _jsxRuntime.jsx)(Tooltip.Arrow, {
+          width: 8,
+          height: 4,
+          className: (0, _clsx["default"])(tooltipVariant === "light" ? (0, _satellitePrefixer["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["tooltip-arrow-light"]))) : (0, _satellitePrefixer["default"])(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["tooltip-arrow-dark"]))))
+        })]
+      }))]
+    })
+  });
+};
+exports.TooltipWrapper = TooltipWrapper;

package/{types/components → cjs}/Tooltip/index.d.ts

@@ -1,3 +1,4 @@
 export * from "./Tooltip";
 export * from "./TooltipWrapper";
+export * from "./OverflowTooltipWrapper";
 export { default } from "./Tooltip";

package/cjs/Tooltip/index.js

@@ -0,0 +1,51 @@
+"use strict";
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _exportNames = {};
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function get() {
+    return _Tooltip["default"];
+  }
+});
+var _Tooltip = _interopRequireWildcard(require("./Tooltip"));
+Object.keys(_Tooltip).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _Tooltip[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _Tooltip[key];
+    }
+  });
+});
+var _TooltipWrapper = require("./TooltipWrapper");
+Object.keys(_TooltipWrapper).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _TooltipWrapper[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _TooltipWrapper[key];
+    }
+  });
+});
+var _OverflowTooltipWrapper = require("./OverflowTooltipWrapper");
+Object.keys(_OverflowTooltipWrapper).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _OverflowTooltipWrapper[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _OverflowTooltipWrapper[key];
+    }
+  });
+});
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }

package/cjs/Tooltip/types.d.ts

@@ -0,0 +1,65 @@
+import type { TooltipContentProps } from "@radix-ui/react-tooltip";
+import type { ReactNode } from "react";
+import type { TooltipVariant } from "./Tooltip";
+export interface TooltipWrapperBaseProps {
+    /**
+     * Defines how long you should hover the wrapped element before displaying the tooltip (in ms).
+     * @default 250
+     */
+    delay?: number;
+    /**
+     * Defines how long the tooltip should stay displayed when leaving the wrapped element (in ms).
+     * @default 500
+     */
+    hideDelay?: number;
+    /**
+     * Defines the side of the trigger element where the tooltip should be displayed.
+     * Will be reversed when collisions occur and `avoidCollisions` is enabled.
+     * @default "bottom"
+     */
+    side?: TooltipContentProps["side"];
+    /**
+     * Defines the offset in pixels of the tooltip from the trigger element.
+     * @default 0
+     */
+    sideOffset?: TooltipContentProps["sideOffset"];
+    /**
+     * Defines the preferred alignment of the tooltip against the trigger element.
+     * May change when collisions occur.
+     * @default "center"
+     */
+    align?: TooltipContentProps["align"];
+    /**
+     * Defines the offset in pixels of the tooltip along the trigger element.
+     * It only works when the `align` option is set to "start" or "end".
+     * @default 0
+     */
+    alignOffset?: TooltipContentProps["alignOffset"];
+    /**
+     * Defines the variant of the tooltip.
+     * @default "dark"
+     */
+    tooltipVariant?: TooltipVariant;
+    /**
+     * Defines the CSS class to be applied to the tooltip element.
+     */
+    tooltipClassName?: string;
+    /**
+     * Defines if the tooltip arrow should be hidden.
+     * @default false
+     */
+    noArrow?: boolean;
+    /**
+     * Defines whether the tooltip itself should be considered when computing the tooltip target.
+     * Useful when the tooltip itself contains selectable text or interactive elements, and thus
+     * shouldn't be dismissed when the mouse hovers it.
+     * @default true
+     */
+    interactive?: boolean;
+    /**
+     * Defines whether the tooltip should avoid collisions with the viewport.
+     * @default true
+     */
+    avoidCollisions?: boolean;
+    children: ReactNode;
+}

package/cjs/Tooltip/types.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/cjs/Tooltip/utils.d.ts

@@ -0,0 +1 @@
+export declare const isOverflowing: (element: HTMLElement) => boolean;

package/cjs/Tooltip/utils.js

@@ -0,0 +1,10 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.isOverflowing = void 0;
+var isOverflowing = function isOverflowing(element) {
+  return element.scrollHeight > element.clientHeight || element.scrollWidth > element.clientWidth;
+};
+exports.isOverflowing = isOverflowing;

package/cjs/Typography/Typography.tailwind.d.ts

@@ -0,0 +1,5 @@
+export = typographyPlugin;
+declare const typographyPlugin: {
+    handler: import("tailwindcss/types/config").PluginCreator;
+    config?: Partial<import("tailwindcss").Config> | undefined;
+};