@eightshift/ui-components 5.0.0 → 5.0.2

package/dist/components/tooltip/tooltip.js

@@ -0,0 +1,527 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { c as $96b38030c423d352$export$9fc1347d4195ccb3, $ as $fc909762b330b746$export$61c6a8c84e605fb6, a as $d3f049242431219c$export$45fda7c47f93fd48, d as $2a41e45df1593e64$export$d39e1813b3bdd0e1, b as $d3f049242431219c$export$6d3443f2c48bfc20, e as $44f671af83e7d9e0$export$2de4954e8ae13b9f, f as $44f671af83e7d9e0$export$746d02f47f4d381 } from "../../OverlayArrow-5aDgmImj.js";
+import { n as $b5e257d569688ac6$export$535bd6ca7f90a273, d as $3ef42575df84b30b$export$9d1611c77c2fe928, e as $bdb11010cef70236$export$f680877a34711e37, i as $64fa3d84918910a7$export$2881499e37b75b9a, a as $64fa3d84918910a7$export$29f1550f4b0d4415, k as $f0a04ccd8dbdd83b$export$e5c5a5f917a5871c, b as $64fa3d84918910a7$export$4d86445c2cf5e3 } from "../../utils-CZt7LCbO.js";
+import { $ as $6179b936705e76d3$export$ae780daf29e6d456, a as $f645667febf57a63$export$4c014de7c8940b4c, x as $507fabe10e71c6fb$export$630ff653c5ada6a9, n as $507fabe10e71c6fb$export$b9b3dfddab17db27, y as $f645667febf57a63$export$13f3202a3e5ddd5 } from "../../useHover-C2SkI1Fn.js";
+import React__default, { useContext, useState, useMemo, useRef, useEffect, forwardRef, createContext } from "react";
+import { $ as $65484d02dcb7eb3e$export$457c3d6518dd4c6f } from "../../filterDOMProps-EDDcM64A.js";
+import { $ as $dbSRa$reactdom } from "../../index-CFozsmNS.js";
+import { c as clsx } from "../../lite-DVmmD_-j.js";
+const $f57aed4a881a3485$var$Context = /* @__PURE__ */ React__default.createContext(null);
+function $f57aed4a881a3485$export$178405afcd8c5eb(props) {
+  let { children } = props;
+  let parent = useContext($f57aed4a881a3485$var$Context);
+  let [modalCount, setModalCount] = useState(0);
+  let context = useMemo(() => ({
+    parent,
+    modalCount,
+    addModal() {
+      setModalCount((count) => count + 1);
+      if (parent) parent.addModal();
+    },
+    removeModal() {
+      setModalCount((count) => count - 1);
+      if (parent) parent.removeModal();
+    }
+  }), [
+    parent,
+    modalCount
+  ]);
+  return /* @__PURE__ */ React__default.createElement($f57aed4a881a3485$var$Context.Provider, {
+    value: context
+  }, children);
+}
+function $f57aed4a881a3485$export$d9aaed4c3ece1bc0() {
+  let context = useContext($f57aed4a881a3485$var$Context);
+  return {
+    modalProviderProps: {
+      "aria-hidden": context && context.modalCount > 0 ? true : void 0
+    }
+  };
+}
+function $f57aed4a881a3485$var$OverlayContainerDOM(props) {
+  let { modalProviderProps } = $f57aed4a881a3485$export$d9aaed4c3ece1bc0();
+  return /* @__PURE__ */ React__default.createElement("div", {
+    "data-overlay-container": true,
+    ...props,
+    ...modalProviderProps
+  });
+}
+function $f57aed4a881a3485$export$bf688221f59024e5(props) {
+  return /* @__PURE__ */ React__default.createElement($f57aed4a881a3485$export$178405afcd8c5eb, null, /* @__PURE__ */ React__default.createElement($f57aed4a881a3485$var$OverlayContainerDOM, props));
+}
+function $f57aed4a881a3485$export$b47c3594eab58386(props) {
+  let isSSR = $b5e257d569688ac6$export$535bd6ca7f90a273();
+  let { portalContainer = isSSR ? null : document.body, ...rest } = props;
+  let { getContainer } = $96b38030c423d352$export$9fc1347d4195ccb3();
+  if (!props.portalContainer && getContainer) portalContainer = getContainer();
+  React__default.useEffect(() => {
+    if (portalContainer === null || portalContainer === void 0 ? void 0 : portalContainer.closest("[data-overlay-container]")) throw new Error("An OverlayContainer must not be inside another container. Please change the portalContainer prop.");
+  }, [
+    portalContainer
+  ]);
+  if (!portalContainer) return null;
+  let contents = /* @__PURE__ */ React__default.createElement($f57aed4a881a3485$export$bf688221f59024e5, rest);
+  return /* @__PURE__ */ $dbSRa$reactdom.createPortal(contents, portalContainer);
+}
+function $326e436e94273fe1$export$1c4b08e0eca38426(props, state) {
+  let domProps = $65484d02dcb7eb3e$export$457c3d6518dd4c6f(props, {
+    labelable: true
+  });
+  let { hoverProps } = $6179b936705e76d3$export$ae780daf29e6d456({
+    onHoverStart: () => state === null || state === void 0 ? void 0 : state.open(true),
+    onHoverEnd: () => state === null || state === void 0 ? void 0 : state.close()
+  });
+  return {
+    tooltipProps: $3ef42575df84b30b$export$9d1611c77c2fe928(domProps, hoverProps, {
+      role: "tooltip"
+    })
+  };
+}
+function $4e1b34546679e357$export$a6da6c504e4bba8b(props, state, ref) {
+  let { isDisabled, trigger } = props;
+  let tooltipId = $bdb11010cef70236$export$f680877a34711e37();
+  let isHovered = useRef(false);
+  let isFocused = useRef(false);
+  let handleShow = () => {
+    if (isHovered.current || isFocused.current) state.open(isFocused.current);
+  };
+  let handleHide = (immediate) => {
+    if (!isHovered.current && !isFocused.current) state.close(immediate);
+  };
+  useEffect(() => {
+    let onKeyDown = (e) => {
+      if (ref && ref.current) {
+        if (e.key === "Escape") {
+          e.stopPropagation();
+          state.close(true);
+        }
+      }
+    };
+    if (state.isOpen) {
+      document.addEventListener("keydown", onKeyDown, true);
+      return () => {
+        document.removeEventListener("keydown", onKeyDown, true);
+      };
+    }
+  }, [
+    ref,
+    state
+  ]);
+  let onHoverStart = () => {
+    if (trigger === "focus") return;
+    if ($507fabe10e71c6fb$export$630ff653c5ada6a9() === "pointer") isHovered.current = true;
+    else isHovered.current = false;
+    handleShow();
+  };
+  let onHoverEnd = () => {
+    if (trigger === "focus") return;
+    isFocused.current = false;
+    isHovered.current = false;
+    handleHide();
+  };
+  let onPressStart = () => {
+    isFocused.current = false;
+    isHovered.current = false;
+    handleHide(true);
+  };
+  let onFocus = () => {
+    let isVisible = $507fabe10e71c6fb$export$b9b3dfddab17db27();
+    if (isVisible) {
+      isFocused.current = true;
+      handleShow();
+    }
+  };
+  let onBlur = () => {
+    isFocused.current = false;
+    isHovered.current = false;
+    handleHide(true);
+  };
+  let { hoverProps } = $6179b936705e76d3$export$ae780daf29e6d456({
+    isDisabled,
+    onHoverStart,
+    onHoverEnd
+  });
+  let { focusableProps } = $f645667febf57a63$export$4c014de7c8940b4c({
+    isDisabled,
+    onFocus,
+    onBlur
+  }, ref);
+  return {
+    triggerProps: {
+      "aria-describedby": state.isOpen ? tooltipId : void 0,
+      ...$3ef42575df84b30b$export$9d1611c77c2fe928(focusableProps, hoverProps, {
+        onPointerDown: onPressStart,
+        onKeyDown: onPressStart,
+        tabIndex: void 0
+      })
+    },
+    tooltipProps: {
+      id: tooltipId
+    }
+  };
+}
+const $8796f90736e175cb$var$TOOLTIP_DELAY = 1500;
+const $8796f90736e175cb$var$TOOLTIP_COOLDOWN = 500;
+let $8796f90736e175cb$var$tooltips = {};
+let $8796f90736e175cb$var$tooltipId = 0;
+let $8796f90736e175cb$var$globalWarmedUp = false;
+let $8796f90736e175cb$var$globalWarmUpTimeout = null;
+let $8796f90736e175cb$var$globalCooldownTimeout = null;
+function $8796f90736e175cb$export$4d40659c25ecb50b(props = {}) {
+  let { delay = $8796f90736e175cb$var$TOOLTIP_DELAY, closeDelay = $8796f90736e175cb$var$TOOLTIP_COOLDOWN } = props;
+  let { isOpen, open, close } = $fc909762b330b746$export$61c6a8c84e605fb6(props);
+  let id = useMemo(() => `${++$8796f90736e175cb$var$tooltipId}`, []);
+  let closeTimeout = useRef(null);
+  let closeCallback = useRef(close);
+  let ensureTooltipEntry = () => {
+    $8796f90736e175cb$var$tooltips[id] = hideTooltip;
+  };
+  let closeOpenTooltips = () => {
+    for (let hideTooltipId in $8796f90736e175cb$var$tooltips) if (hideTooltipId !== id) {
+      $8796f90736e175cb$var$tooltips[hideTooltipId](true);
+      delete $8796f90736e175cb$var$tooltips[hideTooltipId];
+    }
+  };
+  let showTooltip = () => {
+    if (closeTimeout.current) clearTimeout(closeTimeout.current);
+    closeTimeout.current = null;
+    closeOpenTooltips();
+    ensureTooltipEntry();
+    $8796f90736e175cb$var$globalWarmedUp = true;
+    open();
+    if ($8796f90736e175cb$var$globalWarmUpTimeout) {
+      clearTimeout($8796f90736e175cb$var$globalWarmUpTimeout);
+      $8796f90736e175cb$var$globalWarmUpTimeout = null;
+    }
+    if ($8796f90736e175cb$var$globalCooldownTimeout) {
+      clearTimeout($8796f90736e175cb$var$globalCooldownTimeout);
+      $8796f90736e175cb$var$globalCooldownTimeout = null;
+    }
+  };
+  let hideTooltip = (immediate) => {
+    if (immediate || closeDelay <= 0) {
+      if (closeTimeout.current) clearTimeout(closeTimeout.current);
+      closeTimeout.current = null;
+      closeCallback.current();
+    } else if (!closeTimeout.current) closeTimeout.current = setTimeout(() => {
+      closeTimeout.current = null;
+      closeCallback.current();
+    }, closeDelay);
+    if ($8796f90736e175cb$var$globalWarmUpTimeout) {
+      clearTimeout($8796f90736e175cb$var$globalWarmUpTimeout);
+      $8796f90736e175cb$var$globalWarmUpTimeout = null;
+    }
+    if ($8796f90736e175cb$var$globalWarmedUp) {
+      if ($8796f90736e175cb$var$globalCooldownTimeout) clearTimeout($8796f90736e175cb$var$globalCooldownTimeout);
+      $8796f90736e175cb$var$globalCooldownTimeout = setTimeout(() => {
+        delete $8796f90736e175cb$var$tooltips[id];
+        $8796f90736e175cb$var$globalCooldownTimeout = null;
+        $8796f90736e175cb$var$globalWarmedUp = false;
+      }, Math.max($8796f90736e175cb$var$TOOLTIP_COOLDOWN, closeDelay));
+    }
+  };
+  let warmupTooltip = () => {
+    closeOpenTooltips();
+    ensureTooltipEntry();
+    if (!isOpen && !$8796f90736e175cb$var$globalWarmUpTimeout && !$8796f90736e175cb$var$globalWarmedUp) $8796f90736e175cb$var$globalWarmUpTimeout = setTimeout(() => {
+      $8796f90736e175cb$var$globalWarmUpTimeout = null;
+      $8796f90736e175cb$var$globalWarmedUp = true;
+      showTooltip();
+    }, delay);
+    else if (!isOpen) showTooltip();
+  };
+  useEffect(() => {
+    closeCallback.current = close;
+  }, [
+    close
+  ]);
+  useEffect(() => {
+    return () => {
+      if (closeTimeout.current) clearTimeout(closeTimeout.current);
+      let tooltip = $8796f90736e175cb$var$tooltips[id];
+      if (tooltip) delete $8796f90736e175cb$var$tooltips[id];
+    };
+  }, [
+    id
+  ]);
+  return {
+    isOpen,
+    open: (immediate) => {
+      if (!immediate && delay > 0 && !closeTimeout.current) warmupTooltip();
+      else showTooltip();
+    },
+    close: hideTooltip
+  };
+}
+const $4e3b923658d69c60$export$7a7623236eec67fa = /* @__PURE__ */ createContext(null);
+const $4e3b923658d69c60$export$39ae08fa83328b12 = /* @__PURE__ */ createContext(null);
+function $4e3b923658d69c60$export$8c610744efcf8a1d(props) {
+  let state = $8796f90736e175cb$export$4d40659c25ecb50b(props);
+  let ref = useRef(null);
+  let { triggerProps, tooltipProps } = $4e1b34546679e357$export$a6da6c504e4bba8b(props, state, ref);
+  return /* @__PURE__ */ React__default.createElement($64fa3d84918910a7$export$2881499e37b75b9a, {
+    values: [
+      [
+        $4e3b923658d69c60$export$7a7623236eec67fa,
+        state
+      ],
+      [
+        $4e3b923658d69c60$export$39ae08fa83328b12,
+        {
+          ...tooltipProps,
+          triggerRef: ref
+        }
+      ]
+    ]
+  }, /* @__PURE__ */ React__default.createElement($f645667febf57a63$export$13f3202a3e5ddd5, {
+    ...triggerProps,
+    ref
+  }, props.children));
+}
+const $4e3b923658d69c60$export$28c660c63b792dea = /* @__PURE__ */ forwardRef(function Tooltip({ UNSTABLE_portalContainer, ...props }, ref) {
+  [props, ref] = $64fa3d84918910a7$export$29f1550f4b0d4415(props, ref, $4e3b923658d69c60$export$39ae08fa83328b12);
+  let contextState = useContext($4e3b923658d69c60$export$7a7623236eec67fa);
+  let localState = $8796f90736e175cb$export$4d40659c25ecb50b(props);
+  let state = props.isOpen != null || props.defaultOpen != null || !contextState ? localState : contextState;
+  let isExiting = $d3f049242431219c$export$45fda7c47f93fd48(ref, state.isOpen) || props.isExiting || false;
+  if (!state.isOpen && !isExiting) return null;
+  return /* @__PURE__ */ React__default.createElement($f57aed4a881a3485$export$b47c3594eab58386, {
+    portalContainer: UNSTABLE_portalContainer
+  }, /* @__PURE__ */ React__default.createElement($4e3b923658d69c60$var$TooltipInner, {
+    ...props,
+    tooltipRef: ref,
+    isExiting
+  }));
+});
+function $4e3b923658d69c60$var$TooltipInner(props) {
+  let state = useContext($4e3b923658d69c60$export$7a7623236eec67fa);
+  let arrowRef = useRef(null);
+  let [arrowWidth, setArrowWidth] = useState(0);
+  $f0a04ccd8dbdd83b$export$e5c5a5f917a5871c(() => {
+    if (arrowRef.current && state.isOpen) setArrowWidth(arrowRef.current.getBoundingClientRect().width);
+  }, [
+    state.isOpen,
+    arrowRef
+  ]);
+  let { overlayProps, arrowProps, placement } = $2a41e45df1593e64$export$d39e1813b3bdd0e1({
+    placement: props.placement || "top",
+    targetRef: props.triggerRef,
+    overlayRef: props.tooltipRef,
+    offset: props.offset,
+    crossOffset: props.crossOffset,
+    isOpen: state.isOpen,
+    arrowSize: arrowWidth,
+    arrowBoundaryOffset: props.arrowBoundaryOffset,
+    shouldFlip: props.shouldFlip,
+    onClose: () => state.close(true)
+  });
+  let isEntering = $d3f049242431219c$export$6d3443f2c48bfc20(props.tooltipRef, !!placement) || props.isEntering || false;
+  let renderProps = $64fa3d84918910a7$export$4d86445c2cf5e3({
+    ...props,
+    defaultClassName: "react-aria-Tooltip",
+    values: {
+      placement,
+      isEntering,
+      isExiting: props.isExiting,
+      state
+    }
+  });
+  props = $3ef42575df84b30b$export$9d1611c77c2fe928(props, overlayProps);
+  let { tooltipProps } = $326e436e94273fe1$export$1c4b08e0eca38426(props, state);
+  return /* @__PURE__ */ React__default.createElement("div", {
+    ...tooltipProps,
+    ref: props.tooltipRef,
+    ...renderProps,
+    style: {
+      ...overlayProps.style,
+      ...renderProps.style
+    },
+    "data-placement": placement !== null && placement !== void 0 ? placement : void 0,
+    "data-entering": isEntering || void 0,
+    "data-exiting": props.isExiting || void 0
+  }, /* @__PURE__ */ React__default.createElement($44f671af83e7d9e0$export$2de4954e8ae13b9f.Provider, {
+    value: {
+      ...arrowProps,
+      placement,
+      ref: arrowRef
+    }
+  }, renderProps.children));
+}
+/**
+ * A simple tooltip component.
+ *
+ * It can be used in two modes:
+ * - **Controlled mode**: You can control the tooltip with the `open` prop.
+ * - **Uncontrolled mode**: The tooltip will be open by default with the `defaultOpen` prop.
+ *
+ * @component
+ * @param {Object} props - Component props.
+ * @param {string|JSX.Element} props.text - The text to display in the tooltip.
+ * @param {TooltipTheme} [props.theme='dark'] - The theme of the tooltip.
+ * @param {number} [props.offset=0] - Additional offset between the tooltip and the element on the main axis (same axis as element).
+ * @param {number} [props.crossOffset=0] - Additional offset between the tooltip and the element on the cross axis (opposite axis as element).
+ * @param {number} [props.containerPadding=12] - Space that should be left between the tooltip and the main containing element (usually browser window).
+ * @param {number} [props.openDelay=1500] - Duration before the tooltip is shown, in milliseconds.
+ * @param {number} [props.closeDelay=500] - Duration before the tooltip is hidden, in milliseconds.
+ * @param {boolean} [props.shouldFlip=true] - If `false`, the tooltip will not flip to the opposite side if there is not enough space.
+ * @param {boolean} [props.defaultOpen] - (**Uncontrolled mode**) Whether the tooltip is initially open.
+ * @param {boolean} [props.open] - (**Controlled mode**) Whether the tooltip is open.
+ * @param {Function} [props.onOpenChange] - (**Controlled mode**) Function to run when the tooltip is opened or closed.
+ * @param {TooltipPlacement} [props.placement] - The side of the trigger element where the tooltip will be displayed.
+ * @param {string} [props.className] - Classes to pass to the tooltip.
+ * @param {RefObject<Element>} [props.triggerRef] - Ref to anchor the tooltip to. If not provided, the tooltip will be anchored to the trigger element.
+ * @param {boolean} [props.arrow] - If `true`, an arrow is shown on the tooltip.
+ *
+ * @returns {JSX.Element} The Tooltip component.
+ *
+ * @typedef {'light' | 'dark'} TooltipTheme
+ * @typedef {'bottom' | 'bottom left' | 'bottom right' | 'bottom start' | 'bottom end' | 'top' | 'top left' | 'top right' | 'top start' | 'top end' | 'left' | 'left top' | 'left bottom' | 'start' | 'start top' | 'start bottom' | 'right' | 'right top' | 'right bottom' | 'end' | 'end top' | 'end bottom'} TooltipPlacement
+ *
+ * @example
+ * <Tooltip text='My tooltip'>
+ * 	<Button>Hover me</Button>
+ * </Tooltip>
+ *
+ * @preserve
+ */
+const Tooltip2 = (props) => {
+  const {
+    children,
+    text,
+    theme = "dark",
+    offset = 0,
+    crossOffset = 0,
+    containerPadding = 12,
+    openDelay = 1500,
+    closeDelay = 500,
+    shouldFlip = true,
+    arrow,
+    open,
+    defaultOpen,
+    onOpenChange,
+    placement,
+    className,
+    triggerRef,
+    disabled
+  } = props;
+  return /* @__PURE__ */ jsxs(
+    $4e3b923658d69c60$export$8c610744efcf8a1d,
+    {
+      delay: openDelay,
+      closeDelay,
+      isDisabled: disabled,
+      isOpen: open,
+      onOpenChange,
+      defaultOpen,
+      children: [
+        children,
+        /* @__PURE__ */ jsxs(
+          $4e3b923658d69c60$export$28c660c63b792dea,
+          {
+            containerPadding,
+            placement,
+            shouldFlip,
+            triggerRef,
+            offset,
+            crossOffset,
+            className: ({ isEntering, isExiting }) => clsx(
+              "es:group es:pointer-events-none",
+              "es:z-20 es:select-none es:rounded-md es:border es:px-1.5 es:py-0.5 es:text-sm es:shadow es:backdrop-blur-3xl es:will-change-[transform,opacity] es:fill-mode-forwards",
+              theme === "light" && "es:border-secondary-200 es:bg-white/90 es:text-secondary-700",
+              theme === "dark" && "es:border-secondary-600 es:bg-black/80 es:text-secondary-100",
+              isEntering && "es:motion-opacity-in es:motion-duration-300 es:motion-safe:data-[placement=left]:motion-translate-x-in-[5%] es:motion-safe:data-[placement=right]:-motion-translate-x-in-[5%] es:motion-safe:data-[placement=top]:motion-translate-y-in-[5%] es:motion-safe:data-[placement=bottom]:-motion-translate-y-in-[5%] es:motion-ease-spring-smooth es:motion-ease-linear/opacity",
+              isExiting && "es:motion-opacity-out es:motion-duration-200 es:motion-safe:data-[placement=left]:motion-translate-x-out-[12.5%] es:motion-safe:data-[placement=right]:motion-translate-x-out-[-12.5%] es:motion-safe:data-[placement=top]:motion-translate-y-out-[12.5%] es:motion-safe:data-[placement=bottom]:motion-translate-y-out-[-12.5%] es:motion-ease-spring-smooth es:motion-ease-linear/opacity",
+              className
+            ),
+            children: [
+              arrow && /* @__PURE__ */ jsx($44f671af83e7d9e0$export$746d02f47f4d381, { children: /* @__PURE__ */ jsx(
+                "svg",
+                {
+                  width: 8,
+                  height: 8,
+                  viewBox: "0 0 8 8",
+                  className: clsx(
+                    "es:m-px es:stroke-none es:drop-shadow-sm",
+                    "es:pointer-events-none",
+                    theme === "light" && "es:fill-secondary-200",
+                    theme === "dark" && "es:fill-secondary-600",
+                    "es:group-data-[placement=left]:-rotate-90 es:group-data-[placement=right]:rotate-90 es:group-data-[placement=bottom]:rotate-180",
+                    "es:forced-colors:fill-[Canvas] es:forced-colors:stroke-[ButtonBorder]"
+                  ),
+                  children: /* @__PURE__ */ jsx("path", { d: "M0 0 L4 4 L8 0" })
+                }
+              ) }),
+              text
+            ]
+          }
+        )
+      ]
+    }
+  );
+};
+/**
+ * A "decorative" tooltip than can be used with element that usually don't support tooltips.
+ * Usually the only elements that support tooltips are interactive elements like buttons or links.
+ *
+ * This component will wrap the element and add the tooltip functionality to it.
+ * The tooltip will be shown when the element is hovered or anything within is focused.
+ *
+ * **Note**: This is not officially supported by the ARIA spec, so use with caution.
+ *
+ * @see {@link Tooltip} before using this component.
+ *
+ * @component
+ * @param {Object} props - Component props.
+ * @param {string|JSX.Element} props.text - The text to display in the tooltip.
+ * @param {TooltipTheme} [props.theme='dark'] - The theme of the tooltip.
+ * @param {number} [props.offset=0] - Additional offset between the tooltip and the element on the main axis (same axis as element).
+ * @param {number} [props.crossOffset=0] - Additional offset between the tooltip and the element on the cross axis (opposite axis as element).
+ * @param {number} [props.containerPadding=12] - Space that should be left between the tooltip and the main containing element (usually browser window).
+ * @param {number} [props.openDelay=1500] - Duration before the tooltip is shown, in milliseconds.
+ * @param {number} [props.closeDelay=500] - Duration before the tooltip is hidden, in milliseconds.
+ * @param {boolean} [props.shouldFlip=true] - If `false`, the tooltip will not flip to the opposite side if there is not enough space.
+ * @param {TooltipPlacement} [props.placement] - The side of the trigger element where the tooltip will be displayed.
+ * @param {string} [props.className] - Classes to pass to the tooltip.
+ * @param {string} [props.wrapperClassName] - Classes to pass to the tooltip wrapper (if `doNotReplaceChild` is `false`).
+ * @param {boolean} [props.arrow] - If `true`, an arrow is shown on the tooltip.
+ *
+ * @returns {JSX.Element} The DecorativeTooltip component.
+ *
+ * @typedef {'light' | 'dark'} TooltipTheme
+ * @typedef {'bottom' | 'bottom left' | 'bottom right' | 'bottom start' | 'bottom end' | 'top' | 'top left' | 'top right' | 'top start' | 'top end' | 'left' | 'left top' | 'left bottom' | 'start' | 'start top' | 'start bottom' | 'right' | 'right top' | 'right bottom' | 'end' | 'end top' | 'end bottom'} TooltipPlacement
+ *
+ * @example
+ * <DecorativeTooltip text='My tooltip'>
+ * 	<span>Hover me</span>
+ * </DecorativeTooltip>
+ *
+ * @preserve
+ */
+const DecorativeTooltip = (props) => {
+  const { openDelay, closeDelay, children, text, wrapperClassName, ...rest } = props;
+  const state = $8796f90736e175cb$export$4d40659c25ecb50b(props);
+  const ref = useRef(null);
+  const { triggerProps } = $4e1b34546679e357$export$a6da6c504e4bba8b(props, state, ref);
+  return /* @__PURE__ */ jsx(
+    Tooltip2,
+    {
+      triggerRef: ref,
+      text,
+      open: state.isOpen,
+      ...rest,
+      children: /* @__PURE__ */ jsx(
+        "div",
+        {
+          ref,
+          ...triggerProps,
+          className: wrapperClassName,
+          children
+        }
+      )
+    }
+  );
+};
+export {
+  DecorativeTooltip,
+  Tooltip2 as Tooltip
+};

package/dist/context-BbYZoHvX.js

@@ -0,0 +1,92 @@
+import React__default, { useState, useEffect, useContext } from "react";
+import { n as $b5e257d569688ac6$export$535bd6ca7f90a273 } from "./utils-CZt7LCbO.js";
+const $148a7a147e38ea7f$var$RTL_SCRIPTS = /* @__PURE__ */ new Set([
+  "Arab",
+  "Syrc",
+  "Samr",
+  "Mand",
+  "Thaa",
+  "Mend",
+  "Nkoo",
+  "Adlm",
+  "Rohg",
+  "Hebr"
+]);
+const $148a7a147e38ea7f$var$RTL_LANGS = /* @__PURE__ */ new Set([
+  "ae",
+  "ar",
+  "arc",
+  "bcc",
+  "bqi",
+  "ckb",
+  "dv",
+  "fa",
+  "glk",
+  "he",
+  "ku",
+  "mzn",
+  "nqo",
+  "pnb",
+  "ps",
+  "sd",
+  "ug",
+  "ur",
+  "yi"
+]);
+function $148a7a147e38ea7f$export$702d680b21cbd764(localeString) {
+  if (Intl.Locale) {
+    let locale = new Intl.Locale(localeString).maximize();
+    let textInfo = typeof locale.getTextInfo === "function" ? locale.getTextInfo() : locale.textInfo;
+    if (textInfo) return textInfo.direction === "rtl";
+    if (locale.script) return $148a7a147e38ea7f$var$RTL_SCRIPTS.has(locale.script);
+  }
+  let lang = localeString.split("-")[0];
+  return $148a7a147e38ea7f$var$RTL_LANGS.has(lang);
+}
+const $1e5a04cdaf7d1af8$var$localeSymbol = Symbol.for("react-aria.i18n.locale");
+function $1e5a04cdaf7d1af8$export$f09106e7c6677ec5() {
+  let locale = typeof window !== "undefined" && window[$1e5a04cdaf7d1af8$var$localeSymbol] || typeof navigator !== "undefined" && (navigator.language || navigator.userLanguage) || "en-US";
+  try {
+    Intl.DateTimeFormat.supportedLocalesOf([
+      locale
+    ]);
+  } catch {
+    locale = "en-US";
+  }
+  return {
+    locale,
+    direction: $148a7a147e38ea7f$export$702d680b21cbd764(locale) ? "rtl" : "ltr"
+  };
+}
+let $1e5a04cdaf7d1af8$var$currentLocale = $1e5a04cdaf7d1af8$export$f09106e7c6677ec5();
+let $1e5a04cdaf7d1af8$var$listeners = /* @__PURE__ */ new Set();
+function $1e5a04cdaf7d1af8$var$updateLocale() {
+  $1e5a04cdaf7d1af8$var$currentLocale = $1e5a04cdaf7d1af8$export$f09106e7c6677ec5();
+  for (let listener of $1e5a04cdaf7d1af8$var$listeners) listener($1e5a04cdaf7d1af8$var$currentLocale);
+}
+function $1e5a04cdaf7d1af8$export$188ec29ebc2bdc3a() {
+  let isSSR = $b5e257d569688ac6$export$535bd6ca7f90a273();
+  let [defaultLocale, setDefaultLocale] = useState($1e5a04cdaf7d1af8$var$currentLocale);
+  useEffect(() => {
+    if ($1e5a04cdaf7d1af8$var$listeners.size === 0) window.addEventListener("languagechange", $1e5a04cdaf7d1af8$var$updateLocale);
+    $1e5a04cdaf7d1af8$var$listeners.add(setDefaultLocale);
+    return () => {
+      $1e5a04cdaf7d1af8$var$listeners.delete(setDefaultLocale);
+      if ($1e5a04cdaf7d1af8$var$listeners.size === 0) window.removeEventListener("languagechange", $1e5a04cdaf7d1af8$var$updateLocale);
+    };
+  }, []);
+  if (isSSR) return {
+    locale: "en-US",
+    direction: "ltr"
+  };
+  return defaultLocale;
+}
+const $18f2051aff69b9bf$var$I18nContext = /* @__PURE__ */ React__default.createContext(null);
+function $18f2051aff69b9bf$export$43bb16f9c6d9e3f7() {
+  let defaultLocale = $1e5a04cdaf7d1af8$export$188ec29ebc2bdc3a();
+  let context = useContext($18f2051aff69b9bf$var$I18nContext);
+  return context || defaultLocale;
+}
+export {
+  $18f2051aff69b9bf$export$43bb16f9c6d9e3f7 as $
+};