@brumaombra/ui-vintage 0.1.0

package/dist/TooltipTrigger.vue_vue_type_script_setup_true_lang-BRyHTWgw.js

@@ -0,0 +1,1117 @@
+import { ref, watchEffect, defineComponent, openBlock, createBlock, unref, mergeProps, withCtx, renderSlot, createElementBlock, computed, normalizeStyle, createVNode, normalizeProps, guardReactiveProps, toRefs, watch, onMounted, withModifiers, createTextVNode, toDisplayString, resolveDynamicComponent, toHandlers } from "vue";
+import { c as createContext, a as useForwardProps, u as useForwardPropsEmits } from "./useForwardPropsEmits-DmumnZO5.js";
+import { u as useForwardExpose } from "./useForwardExpose-CNVHwdF2.js";
+import { P as Primitive } from "./Primitive-D3IcFg81.js";
+import { i as injectPopperContentContext, a as PopperRoot_default, b as PopperContent_default, P as PopperAnchor_default } from "./PopperContent-BiM0YLO3.js";
+import { d as defu, D as DismissableLayer_default, P as Presence_default, T as Teleport_default, u as useId } from "./Teleport-CuUn4UkG.js";
+import { V as VisuallyHidden_default } from "./VisuallyHidden-udQT2Fmo.js";
+import { u as useVModel, b as useEventListener } from "./index-C1_fxYhb.js";
+import { g as refAutoReset, e as tryOnScopeDispose, o as createEventHook, u as useTimeoutFn, r as reactiveOmit } from "./index-Dfi5ESP2.js";
+import { c as cn } from "./utils-Bz4m9VPB.js";
+function useGraceArea(triggerElement, containerElement) {
+  const isPointerInTransit = refAutoReset(false, 300);
+  tryOnScopeDispose(() => {
+    isPointerInTransit.value = false;
+  });
+  const pointerGraceArea = ref(null);
+  const pointerExit = createEventHook();
+  function handleRemoveGraceArea() {
+    pointerGraceArea.value = null;
+    isPointerInTransit.value = false;
+  }
+  function handleCreateGraceArea(event, hoverTarget) {
+    const currentTarget = event.currentTarget;
+    const exitPoint = {
+      x: event.clientX,
+      y: event.clientY
+    };
+    const exitSide = getExitSideFromRect(exitPoint, currentTarget.getBoundingClientRect());
+    const paddedExitPoints = getPaddedExitPoints(exitPoint, exitSide, 1);
+    const hoverTargetPoints = getPointsFromRect(hoverTarget.getBoundingClientRect());
+    const graceArea = getHull([...paddedExitPoints, ...hoverTargetPoints]);
+    pointerGraceArea.value = graceArea;
+    isPointerInTransit.value = true;
+  }
+  watchEffect((cleanupFn) => {
+    if (triggerElement.value && containerElement.value) {
+      const handleTriggerLeave = (event) => handleCreateGraceArea(event, containerElement.value);
+      const handleContentLeave = (event) => handleCreateGraceArea(event, triggerElement.value);
+      triggerElement.value.addEventListener("pointerleave", handleTriggerLeave);
+      containerElement.value.addEventListener("pointerleave", handleContentLeave);
+      cleanupFn(() => {
+        var _a, _b;
+        (_a = triggerElement.value) == null ? void 0 : _a.removeEventListener("pointerleave", handleTriggerLeave);
+        (_b = containerElement.value) == null ? void 0 : _b.removeEventListener("pointerleave", handleContentLeave);
+      });
+    }
+  });
+  watchEffect((cleanupFn) => {
+    var _a;
+    if (pointerGraceArea.value) {
+      const handleTrackPointerGrace = (event) => {
+        var _a2, _b;
+        if (!pointerGraceArea.value || !(event.target instanceof Element)) return;
+        const target = event.target;
+        const pointerPosition = {
+          x: event.clientX,
+          y: event.clientY
+        };
+        const hasEnteredTarget = ((_a2 = triggerElement.value) == null ? void 0 : _a2.contains(target)) || ((_b = containerElement.value) == null ? void 0 : _b.contains(target));
+        const isPointerOutsideGraceArea = !isPointInPolygon(pointerPosition, pointerGraceArea.value);
+        const isAnotherGraceAreaTrigger = !!target.closest("[data-grace-area-trigger]");
+        if (hasEnteredTarget) handleRemoveGraceArea();
+        else if (isPointerOutsideGraceArea || isAnotherGraceAreaTrigger) {
+          handleRemoveGraceArea();
+          pointerExit.trigger();
+        }
+      };
+      (_a = triggerElement.value) == null ? void 0 : _a.ownerDocument.addEventListener("pointermove", handleTrackPointerGrace);
+      cleanupFn(() => {
+        var _a2;
+        return (_a2 = triggerElement.value) == null ? void 0 : _a2.ownerDocument.removeEventListener("pointermove", handleTrackPointerGrace);
+      });
+    }
+  });
+  return {
+    isPointerInTransit,
+    onPointerExit: pointerExit.on
+  };
+}
+function getExitSideFromRect(point, rect) {
+  const top = Math.abs(rect.top - point.y);
+  const bottom = Math.abs(rect.bottom - point.y);
+  const right = Math.abs(rect.right - point.x);
+  const left = Math.abs(rect.left - point.x);
+  switch (Math.min(top, bottom, right, left)) {
+    case left:
+      return "left";
+    case right:
+      return "right";
+    case top:
+      return "top";
+    case bottom:
+      return "bottom";
+    default:
+      throw new Error("unreachable");
+  }
+}
+function getPaddedExitPoints(exitPoint, exitSide, padding = 5) {
+  const paddedExitPoints = [];
+  switch (exitSide) {
+    case "top":
+      paddedExitPoints.push({
+        x: exitPoint.x - padding,
+        y: exitPoint.y + padding
+      }, {
+        x: exitPoint.x + padding,
+        y: exitPoint.y + padding
+      });
+      break;
+    case "bottom":
+      paddedExitPoints.push({
+        x: exitPoint.x - padding,
+        y: exitPoint.y - padding
+      }, {
+        x: exitPoint.x + padding,
+        y: exitPoint.y - padding
+      });
+      break;
+    case "left":
+      paddedExitPoints.push({
+        x: exitPoint.x + padding,
+        y: exitPoint.y - padding
+      }, {
+        x: exitPoint.x + padding,
+        y: exitPoint.y + padding
+      });
+      break;
+    case "right":
+      paddedExitPoints.push({
+        x: exitPoint.x - padding,
+        y: exitPoint.y - padding
+      }, {
+        x: exitPoint.x - padding,
+        y: exitPoint.y + padding
+      });
+      break;
+  }
+  return paddedExitPoints;
+}
+function getPointsFromRect(rect) {
+  const { top, right, bottom, left } = rect;
+  return [
+    {
+      x: left,
+      y: top
+    },
+    {
+      x: right,
+      y: top
+    },
+    {
+      x: right,
+      y: bottom
+    },
+    {
+      x: left,
+      y: bottom
+    }
+  ];
+}
+function isPointInPolygon(point, polygon) {
+  const { x, y } = point;
+  let inside = false;
+  for (let i = 0, j = polygon.length - 1; i < polygon.length; j = i++) {
+    const xi = polygon[i].x;
+    const yi = polygon[i].y;
+    const xj = polygon[j].x;
+    const yj = polygon[j].y;
+    const intersect = yi > y !== yj > y && x < (xj - xi) * (y - yi) / (yj - yi) + xi;
+    if (intersect) inside = !inside;
+  }
+  return inside;
+}
+function getHull(points) {
+  const newPoints = points.slice();
+  newPoints.sort((a, b) => {
+    if (a.x < b.x) return -1;
+    else if (a.x > b.x) return 1;
+    else if (a.y < b.y) return -1;
+    else if (a.y > b.y) return 1;
+    else return 0;
+  });
+  return getHullPresorted(newPoints);
+}
+function getHullPresorted(points) {
+  if (points.length <= 1) return points.slice();
+  const upperHull = [];
+  for (let i = 0; i < points.length; i++) {
+    const p = points[i];
+    while (upperHull.length >= 2) {
+      const q = upperHull[upperHull.length - 1];
+      const r = upperHull[upperHull.length - 2];
+      if ((q.x - r.x) * (p.y - r.y) >= (q.y - r.y) * (p.x - r.x)) upperHull.pop();
+      else break;
+    }
+    upperHull.push(p);
+  }
+  upperHull.pop();
+  const lowerHull = [];
+  for (let i = points.length - 1; i >= 0; i--) {
+    const p = points[i];
+    while (lowerHull.length >= 2) {
+      const q = lowerHull[lowerHull.length - 1];
+      const r = lowerHull[lowerHull.length - 2];
+      if ((q.x - r.x) * (p.y - r.y) >= (q.y - r.y) * (p.x - r.x)) lowerHull.pop();
+      else break;
+    }
+    lowerHull.push(p);
+  }
+  lowerHull.pop();
+  if (upperHull.length === 1 && lowerHull.length === 1 && upperHull[0].x === lowerHull[0].x && upperHull[0].y === lowerHull[0].y) return upperHull;
+  else return upperHull.concat(lowerHull);
+}
+const _hoisted_1 = {
+  key: 0,
+  d: "M0 0L6 6L12 0"
+};
+const _hoisted_2 = {
+  key: 1,
+  d: "M0 0L4.58579 4.58579C5.36683 5.36683 6.63316 5.36684 7.41421 4.58579L12 0"
+};
+var Arrow_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+  __name: "Arrow",
+  props: {
+    width: {
+      type: Number,
+      required: false,
+      default: 10
+    },
+    height: {
+      type: Number,
+      required: false,
+      default: 5
+    },
+    rounded: {
+      type: Boolean,
+      required: false
+    },
+    asChild: {
+      type: Boolean,
+      required: false
+    },
+    as: {
+      type: null,
+      required: false,
+      default: "svg"
+    }
+  },
+  setup(__props) {
+    const props = __props;
+    useForwardExpose();
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(unref(Primitive), mergeProps(props, {
+        width: _ctx.width,
+        height: _ctx.height,
+        viewBox: _ctx.asChild ? void 0 : "0 0 12 6",
+        preserveAspectRatio: _ctx.asChild ? void 0 : "none"
+      }), {
+        default: withCtx(() => [renderSlot(_ctx.$slots, "default", {}, () => [!_ctx.rounded ? (openBlock(), createElementBlock("path", _hoisted_1)) : (openBlock(), createElementBlock("path", _hoisted_2))])]),
+        _: 3
+      }, 16, [
+        "width",
+        "height",
+        "viewBox",
+        "preserveAspectRatio"
+      ]);
+    };
+  }
+});
+var Arrow_default = Arrow_vue_vue_type_script_setup_true_lang_default;
+const OPPOSITE_SIDE = {
+  top: "bottom",
+  right: "left",
+  bottom: "top",
+  left: "right"
+};
+var PopperArrow_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+  inheritAttrs: false,
+  __name: "PopperArrow",
+  props: {
+    width: {
+      type: Number,
+      required: false
+    },
+    height: {
+      type: Number,
+      required: false
+    },
+    rounded: {
+      type: Boolean,
+      required: false
+    },
+    asChild: {
+      type: Boolean,
+      required: false
+    },
+    as: {
+      type: null,
+      required: false,
+      default: "svg"
+    }
+  },
+  setup(__props) {
+    const { forwardRef } = useForwardExpose();
+    const contentContext = injectPopperContentContext();
+    const baseSide = computed(() => OPPOSITE_SIDE[contentContext.placedSide.value]);
+    return (_ctx, _cache) => {
+      var _a, _b, _c, _d;
+      return openBlock(), createElementBlock("span", {
+        ref: (el) => {
+          unref(contentContext).onArrowChange(el);
+          return void 0;
+        },
+        style: normalizeStyle({
+          position: "absolute",
+          left: ((_a = unref(contentContext).arrowX) == null ? void 0 : _a.value) ? `${(_b = unref(contentContext).arrowX) == null ? void 0 : _b.value}px` : void 0,
+          top: ((_c = unref(contentContext).arrowY) == null ? void 0 : _c.value) ? `${(_d = unref(contentContext).arrowY) == null ? void 0 : _d.value}px` : void 0,
+          [baseSide.value]: 0,
+          transformOrigin: {
+            top: "",
+            right: "0 0",
+            bottom: "center 0",
+            left: "100% 0"
+          }[unref(contentContext).placedSide.value],
+          transform: {
+            top: "translateY(100%)",
+            right: "translateY(50%) rotate(90deg) translateX(-50%)",
+            bottom: `rotate(180deg)`,
+            left: "translateY(50%) rotate(-90deg) translateX(50%)"
+          }[unref(contentContext).placedSide.value],
+          visibility: unref(contentContext).shouldHideArrow.value ? "hidden" : void 0
+        })
+      }, [createVNode(Arrow_default, mergeProps(_ctx.$attrs, {
+        ref: unref(forwardRef),
+        style: { display: "block" },
+        as: _ctx.as,
+        "as-child": _ctx.asChild,
+        rounded: _ctx.rounded,
+        width: _ctx.width,
+        height: _ctx.height
+      }), {
+        default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
+        _: 3
+      }, 16, [
+        "as",
+        "as-child",
+        "rounded",
+        "width",
+        "height"
+      ])], 4);
+    };
+  }
+});
+var PopperArrow_default = PopperArrow_vue_vue_type_script_setup_true_lang_default;
+var TooltipArrow_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+  __name: "TooltipArrow",
+  props: {
+    width: {
+      type: Number,
+      required: false,
+      default: 10
+    },
+    height: {
+      type: Number,
+      required: false,
+      default: 5
+    },
+    asChild: {
+      type: Boolean,
+      required: false
+    },
+    as: {
+      type: null,
+      required: false,
+      default: "svg"
+    }
+  },
+  setup(__props) {
+    const props = __props;
+    useForwardExpose();
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(unref(PopperArrow_default), normalizeProps(guardReactiveProps(props)), {
+        default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
+        _: 3
+      }, 16);
+    };
+  }
+});
+var TooltipArrow_default = TooltipArrow_vue_vue_type_script_setup_true_lang_default;
+const [injectTooltipProviderContext, provideTooltipProviderContext] = createContext("TooltipProvider");
+var TooltipProvider_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+  inheritAttrs: false,
+  __name: "TooltipProvider",
+  props: {
+    delayDuration: {
+      type: Number,
+      required: false,
+      default: 700
+    },
+    skipDelayDuration: {
+      type: Number,
+      required: false,
+      default: 300
+    },
+    disableHoverableContent: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    disableClosingTrigger: {
+      type: Boolean,
+      required: false
+    },
+    disabled: {
+      type: Boolean,
+      required: false
+    },
+    ignoreNonKeyboardFocus: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    content: {
+      type: Object,
+      required: false
+    }
+  },
+  setup(__props) {
+    const props = __props;
+    const { delayDuration, skipDelayDuration, disableHoverableContent, disableClosingTrigger, ignoreNonKeyboardFocus, disabled, content } = toRefs(props);
+    useForwardExpose();
+    const isOpenDelayed = ref(true);
+    const isPointerInTransitRef = ref(false);
+    const { start: startTimer, stop: clearTimer } = useTimeoutFn(() => {
+      isOpenDelayed.value = true;
+    }, skipDelayDuration, { immediate: false });
+    provideTooltipProviderContext({
+      isOpenDelayed,
+      delayDuration,
+      onOpen() {
+        clearTimer();
+        isOpenDelayed.value = false;
+      },
+      onClose() {
+        startTimer();
+      },
+      isPointerInTransitRef,
+      disableHoverableContent,
+      disableClosingTrigger,
+      disabled,
+      ignoreNonKeyboardFocus,
+      content
+    });
+    return (_ctx, _cache) => {
+      return renderSlot(_ctx.$slots, "default");
+    };
+  }
+});
+var TooltipProvider_default = TooltipProvider_vue_vue_type_script_setup_true_lang_default;
+const TOOLTIP_OPEN = "tooltip.open";
+const [injectTooltipRootContext, provideTooltipRootContext] = createContext("TooltipRoot");
+var TooltipRoot_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+  __name: "TooltipRoot",
+  props: {
+    defaultOpen: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    open: {
+      type: Boolean,
+      required: false,
+      default: void 0
+    },
+    delayDuration: {
+      type: Number,
+      required: false,
+      default: void 0
+    },
+    disableHoverableContent: {
+      type: Boolean,
+      required: false,
+      default: void 0
+    },
+    disableClosingTrigger: {
+      type: Boolean,
+      required: false,
+      default: void 0
+    },
+    disabled: {
+      type: Boolean,
+      required: false,
+      default: void 0
+    },
+    ignoreNonKeyboardFocus: {
+      type: Boolean,
+      required: false,
+      default: void 0
+    }
+  },
+  emits: ["update:open"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    useForwardExpose();
+    const providerContext = injectTooltipProviderContext();
+    const disableHoverableContent = computed(() => props.disableHoverableContent ?? providerContext.disableHoverableContent.value);
+    const disableClosingTrigger = computed(() => props.disableClosingTrigger ?? providerContext.disableClosingTrigger.value);
+    const disableTooltip = computed(() => props.disabled ?? providerContext.disabled.value);
+    const delayDuration = computed(() => props.delayDuration ?? providerContext.delayDuration.value);
+    const ignoreNonKeyboardFocus = computed(() => props.ignoreNonKeyboardFocus ?? providerContext.ignoreNonKeyboardFocus.value);
+    const open = useVModel(props, "open", emit, {
+      defaultValue: props.defaultOpen,
+      passive: props.open === void 0
+    });
+    watch(open, (isOpen) => {
+      if (!providerContext.onClose) return;
+      if (isOpen) {
+        providerContext.onOpen();
+        document.dispatchEvent(new CustomEvent(TOOLTIP_OPEN));
+      } else providerContext.onClose();
+    });
+    const wasOpenDelayedRef = ref(false);
+    const trigger = ref();
+    const stateAttribute = computed(() => {
+      if (!open.value) return "closed";
+      return wasOpenDelayedRef.value ? "delayed-open" : "instant-open";
+    });
+    const { start: startTimer, stop: clearTimer } = useTimeoutFn(() => {
+      wasOpenDelayedRef.value = true;
+      open.value = true;
+    }, delayDuration, { immediate: false });
+    function handleOpen() {
+      clearTimer();
+      wasOpenDelayedRef.value = false;
+      open.value = true;
+    }
+    function handleClose() {
+      clearTimer();
+      open.value = false;
+    }
+    function handleDelayedOpen() {
+      startTimer();
+    }
+    provideTooltipRootContext({
+      contentId: "",
+      open,
+      stateAttribute,
+      trigger,
+      onTriggerChange(el) {
+        trigger.value = el;
+      },
+      onTriggerEnter() {
+        if (providerContext.isOpenDelayed.value) handleDelayedOpen();
+        else handleOpen();
+      },
+      onTriggerLeave() {
+        if (disableHoverableContent.value) handleClose();
+        else clearTimer();
+      },
+      onOpen: handleOpen,
+      onClose: handleClose,
+      disableHoverableContent,
+      disableClosingTrigger,
+      disabled: disableTooltip,
+      ignoreNonKeyboardFocus
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(unref(PopperRoot_default), null, {
+        default: withCtx(() => [renderSlot(_ctx.$slots, "default", { open: unref(open) })]),
+        _: 3
+      });
+    };
+  }
+});
+var TooltipRoot_default = TooltipRoot_vue_vue_type_script_setup_true_lang_default;
+var TooltipContentImpl_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+  __name: "TooltipContentImpl",
+  props: {
+    ariaLabel: {
+      type: String,
+      required: false
+    },
+    asChild: {
+      type: Boolean,
+      required: false,
+      default: void 0
+    },
+    as: {
+      type: null,
+      required: false
+    },
+    side: {
+      type: null,
+      required: false
+    },
+    sideOffset: {
+      type: Number,
+      required: false
+    },
+    align: {
+      type: null,
+      required: false
+    },
+    alignOffset: {
+      type: Number,
+      required: false
+    },
+    avoidCollisions: {
+      type: Boolean,
+      required: false,
+      default: void 0
+    },
+    collisionBoundary: {
+      type: null,
+      required: false
+    },
+    collisionPadding: {
+      type: [Number, Object],
+      required: false
+    },
+    arrowPadding: {
+      type: Number,
+      required: false
+    },
+    sticky: {
+      type: String,
+      required: false
+    },
+    hideWhenDetached: {
+      type: Boolean,
+      required: false,
+      default: void 0
+    },
+    positionStrategy: {
+      type: String,
+      required: false
+    },
+    updatePositionStrategy: {
+      type: String,
+      required: false
+    }
+  },
+  emits: ["escapeKeyDown", "pointerDownOutside"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emits = __emit;
+    const rootContext = injectTooltipRootContext();
+    const providerContext = injectTooltipProviderContext();
+    const { forwardRef, currentElement } = useForwardExpose();
+    const ariaLabel = computed(() => {
+      var _a;
+      return props.ariaLabel || ((_a = currentElement.value) == null ? void 0 : _a.textContent);
+    });
+    const popperContentProps = computed(() => {
+      const { ariaLabel: _, ...restProps } = props;
+      return defu(restProps, providerContext.content.value ?? {}, {
+        side: "top",
+        sideOffset: 0,
+        align: "center",
+        avoidCollisions: true,
+        collisionBoundary: [],
+        collisionPadding: 0,
+        arrowPadding: 0,
+        sticky: "partial",
+        hideWhenDetached: false
+      });
+    });
+    onMounted(() => {
+      useEventListener(window, "scroll", (event) => {
+        const target = event.target;
+        if (target == null ? void 0 : target.contains(rootContext.trigger.value)) rootContext.onClose();
+      });
+      useEventListener(window, TOOLTIP_OPEN, rootContext.onClose);
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(unref(DismissableLayer_default), {
+        "as-child": "",
+        "disable-outside-pointer-events": false,
+        onEscapeKeyDown: _cache[0] || (_cache[0] = ($event) => emits("escapeKeyDown", $event)),
+        onPointerDownOutside: _cache[1] || (_cache[1] = (event) => {
+          var _a;
+          if (unref(rootContext).disableClosingTrigger.value && ((_a = unref(rootContext).trigger.value) == null ? void 0 : _a.contains(event.target))) event.preventDefault();
+          emits("pointerDownOutside", event);
+        }),
+        onFocusOutside: _cache[2] || (_cache[2] = withModifiers(() => {
+        }, ["prevent"])),
+        onDismiss: _cache[3] || (_cache[3] = ($event) => unref(rootContext).onClose())
+      }, {
+        default: withCtx(() => [createVNode(unref(PopperContent_default), mergeProps({
+          ref: unref(forwardRef),
+          "data-state": unref(rootContext).stateAttribute.value
+        }, {
+          ..._ctx.$attrs,
+          ...popperContentProps.value
+        }, { style: {
+          "--reka-tooltip-content-transform-origin": "var(--reka-popper-transform-origin)",
+          "--reka-tooltip-content-available-width": "var(--reka-popper-available-width)",
+          "--reka-tooltip-content-available-height": "var(--reka-popper-available-height)",
+          "--reka-tooltip-trigger-width": "var(--reka-popper-anchor-width)",
+          "--reka-tooltip-trigger-height": "var(--reka-popper-anchor-height)"
+        } }), {
+          default: withCtx(() => [renderSlot(_ctx.$slots, "default"), createVNode(unref(VisuallyHidden_default), {
+            id: unref(rootContext).contentId,
+            role: "tooltip"
+          }, {
+            default: withCtx(() => [createTextVNode(toDisplayString(ariaLabel.value), 1)]),
+            _: 1
+          }, 8, ["id"])]),
+          _: 3
+        }, 16, ["data-state"])]),
+        _: 3
+      });
+    };
+  }
+});
+var TooltipContentImpl_default = TooltipContentImpl_vue_vue_type_script_setup_true_lang_default;
+var TooltipContentHoverable_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+  __name: "TooltipContentHoverable",
+  props: {
+    ariaLabel: {
+      type: String,
+      required: false
+    },
+    asChild: {
+      type: Boolean,
+      required: false
+    },
+    as: {
+      type: null,
+      required: false
+    },
+    side: {
+      type: null,
+      required: false
+    },
+    sideOffset: {
+      type: Number,
+      required: false
+    },
+    align: {
+      type: null,
+      required: false
+    },
+    alignOffset: {
+      type: Number,
+      required: false
+    },
+    avoidCollisions: {
+      type: Boolean,
+      required: false
+    },
+    collisionBoundary: {
+      type: null,
+      required: false
+    },
+    collisionPadding: {
+      type: [Number, Object],
+      required: false
+    },
+    arrowPadding: {
+      type: Number,
+      required: false
+    },
+    sticky: {
+      type: String,
+      required: false
+    },
+    hideWhenDetached: {
+      type: Boolean,
+      required: false
+    },
+    positionStrategy: {
+      type: String,
+      required: false
+    },
+    updatePositionStrategy: {
+      type: String,
+      required: false
+    }
+  },
+  setup(__props) {
+    const props = __props;
+    const forwardedProps = useForwardProps(props);
+    const { forwardRef, currentElement } = useForwardExpose();
+    const { trigger, onClose } = injectTooltipRootContext();
+    const providerContext = injectTooltipProviderContext();
+    const { isPointerInTransit, onPointerExit } = useGraceArea(trigger, currentElement);
+    providerContext.isPointerInTransitRef = isPointerInTransit;
+    onPointerExit(() => {
+      onClose();
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(TooltipContentImpl_default, mergeProps({ ref: unref(forwardRef) }, unref(forwardedProps)), {
+        default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
+        _: 3
+      }, 16);
+    };
+  }
+});
+var TooltipContentHoverable_default = TooltipContentHoverable_vue_vue_type_script_setup_true_lang_default;
+var TooltipContent_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+  __name: "TooltipContent",
+  props: {
+    forceMount: {
+      type: Boolean,
+      required: false
+    },
+    ariaLabel: {
+      type: String,
+      required: false
+    },
+    asChild: {
+      type: Boolean,
+      required: false
+    },
+    as: {
+      type: null,
+      required: false
+    },
+    side: {
+      type: null,
+      required: false
+    },
+    sideOffset: {
+      type: Number,
+      required: false
+    },
+    align: {
+      type: null,
+      required: false
+    },
+    alignOffset: {
+      type: Number,
+      required: false
+    },
+    avoidCollisions: {
+      type: Boolean,
+      required: false
+    },
+    collisionBoundary: {
+      type: null,
+      required: false
+    },
+    collisionPadding: {
+      type: [Number, Object],
+      required: false
+    },
+    arrowPadding: {
+      type: Number,
+      required: false
+    },
+    sticky: {
+      type: String,
+      required: false
+    },
+    hideWhenDetached: {
+      type: Boolean,
+      required: false
+    },
+    positionStrategy: {
+      type: String,
+      required: false
+    },
+    updatePositionStrategy: {
+      type: String,
+      required: false
+    }
+  },
+  emits: ["escapeKeyDown", "pointerDownOutside"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emits = __emit;
+    const rootContext = injectTooltipRootContext();
+    const forwarded = useForwardPropsEmits(props, emits);
+    const { forwardRef } = useForwardExpose();
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(unref(Presence_default), { present: _ctx.forceMount || unref(rootContext).open.value }, {
+        default: withCtx(() => [(openBlock(), createBlock(resolveDynamicComponent(unref(rootContext).disableHoverableContent.value ? TooltipContentImpl_default : TooltipContentHoverable_default), mergeProps({ ref: unref(forwardRef) }, unref(forwarded)), {
+          default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
+          _: 3
+        }, 16))]),
+        _: 3
+      }, 8, ["present"]);
+    };
+  }
+});
+var TooltipContent_default = TooltipContent_vue_vue_type_script_setup_true_lang_default;
+var TooltipPortal_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+  __name: "TooltipPortal",
+  props: {
+    to: {
+      type: null,
+      required: false
+    },
+    disabled: {
+      type: Boolean,
+      required: false
+    },
+    defer: {
+      type: Boolean,
+      required: false
+    },
+    forceMount: {
+      type: Boolean,
+      required: false
+    }
+  },
+  setup(__props) {
+    const props = __props;
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(unref(Teleport_default), normalizeProps(guardReactiveProps(props)), {
+        default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
+        _: 3
+      }, 16);
+    };
+  }
+});
+var TooltipPortal_default = TooltipPortal_vue_vue_type_script_setup_true_lang_default;
+var TooltipTrigger_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+  __name: "TooltipTrigger",
+  props: {
+    reference: {
+      type: null,
+      required: false
+    },
+    asChild: {
+      type: Boolean,
+      required: false
+    },
+    as: {
+      type: null,
+      required: false,
+      default: "button"
+    }
+  },
+  setup(__props) {
+    const props = __props;
+    const rootContext = injectTooltipRootContext();
+    const providerContext = injectTooltipProviderContext();
+    rootContext.contentId || (rootContext.contentId = useId(void 0, "reka-tooltip-content"));
+    const { forwardRef, currentElement: triggerElement } = useForwardExpose();
+    const isPointerDown = ref(false);
+    const hasPointerMoveOpened = ref(false);
+    const tooltipListeners = computed(() => {
+      if (rootContext.disabled.value) return {};
+      return {
+        click: handleClick,
+        focus: handleFocus,
+        pointermove: handlePointerMove,
+        pointerleave: handlePointerLeave,
+        pointerdown: handlePointerDown,
+        blur: handleBlur
+      };
+    });
+    onMounted(() => {
+      rootContext.onTriggerChange(triggerElement.value);
+    });
+    function handlePointerUp() {
+      setTimeout(() => {
+        isPointerDown.value = false;
+      }, 1);
+    }
+    function handlePointerDown() {
+      if (rootContext.open && !rootContext.disableClosingTrigger.value) rootContext.onClose();
+      isPointerDown.value = true;
+      document.addEventListener("pointerup", handlePointerUp, { once: true });
+    }
+    function handlePointerMove(event) {
+      if (event.pointerType === "touch") return;
+      if (!hasPointerMoveOpened.value && !providerContext.isPointerInTransitRef.value) {
+        rootContext.onTriggerEnter();
+        hasPointerMoveOpened.value = true;
+      }
+    }
+    function handlePointerLeave() {
+      rootContext.onTriggerLeave();
+      hasPointerMoveOpened.value = false;
+    }
+    function handleFocus(event) {
+      var _a, _b;
+      if (isPointerDown.value) return;
+      if (rootContext.ignoreNonKeyboardFocus.value && !((_b = (_a = event.target).matches) == null ? void 0 : _b.call(_a, ":focus-visible"))) return;
+      rootContext.onOpen();
+    }
+    function handleBlur() {
+      rootContext.onClose();
+    }
+    function handleClick() {
+      if (!rootContext.disableClosingTrigger.value) rootContext.onClose();
+    }
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(unref(PopperAnchor_default), {
+        "as-child": "",
+        reference: _ctx.reference
+      }, {
+        default: withCtx(() => [createVNode(unref(Primitive), mergeProps({
+          ref: unref(forwardRef),
+          "aria-describedby": unref(rootContext).open.value ? unref(rootContext).contentId : void 0,
+          "data-state": unref(rootContext).stateAttribute.value,
+          as: _ctx.as,
+          "as-child": props.asChild,
+          "data-grace-area-trigger": ""
+        }, toHandlers(tooltipListeners.value)), {
+          default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
+          _: 3
+        }, 16, [
+          "aria-describedby",
+          "data-state",
+          "as",
+          "as-child"
+        ])]),
+        _: 3
+      }, 8, ["reference"]);
+    };
+  }
+});
+var TooltipTrigger_default = TooltipTrigger_vue_vue_type_script_setup_true_lang_default;
+const _sfc_main$2 = /* @__PURE__ */ defineComponent({
+  __name: "Tooltip",
+  props: {
+    defaultOpen: { type: Boolean },
+    open: { type: Boolean },
+    delayDuration: {},
+    disableHoverableContent: { type: Boolean },
+    disableClosingTrigger: { type: Boolean },
+    disabled: { type: Boolean },
+    ignoreNonKeyboardFocus: { type: Boolean }
+  },
+  emits: ["update:open"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emits = __emit;
+    const forwarded = useForwardPropsEmits(props, emits);
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(unref(TooltipRoot_default), mergeProps({ "data-slot": "tooltip" }, unref(forwarded)), {
+        default: withCtx((slotProps) => [
+          renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps(slotProps)))
+        ]),
+        _: 3
+      }, 16);
+    };
+  }
+});
+const _sfc_main$1 = /* @__PURE__ */ defineComponent({
+  ...{
+    inheritAttrs: false
+  },
+  __name: "TooltipContent",
+  props: {
+    forceMount: { type: Boolean },
+    ariaLabel: {},
+    asChild: { type: Boolean },
+    as: {},
+    side: {},
+    sideOffset: { default: 4 },
+    align: {},
+    alignOffset: {},
+    avoidCollisions: { type: Boolean },
+    collisionBoundary: {},
+    collisionPadding: {},
+    arrowPadding: {},
+    sticky: {},
+    hideWhenDetached: { type: Boolean },
+    positionStrategy: {},
+    updatePositionStrategy: {},
+    class: {}
+  },
+  emits: ["escapeKeyDown", "pointerDownOutside"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emits = __emit;
+    const delegatedProps = reactiveOmit(props, "class");
+    const forwarded = useForwardPropsEmits(delegatedProps, emits);
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(unref(TooltipPortal_default), null, {
+        default: withCtx(() => [
+          createVNode(unref(TooltipContent_default), mergeProps({ "data-slot": "tooltip-content" }, { ...unref(forwarded), ..._ctx.$attrs }, {
+            class: unref(cn)("bg-foreground text-background animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-fit rounded-md px-3 py-1.5 text-xs text-balance", props.class)
+          }), {
+            default: withCtx(() => [
+              renderSlot(_ctx.$slots, "default"),
+              createVNode(unref(TooltipArrow_default), { class: "bg-foreground fill-foreground z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]" })
+            ]),
+            _: 3
+          }, 16, ["class"])
+        ]),
+        _: 3
+      });
+    };
+  }
+});
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "TooltipTrigger",
+  props: {
+    reference: {},
+    asChild: { type: Boolean },
+    as: {}
+  },
+  setup(__props) {
+    const props = __props;
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(unref(TooltipTrigger_default), mergeProps({ "data-slot": "tooltip-trigger" }, props), {
+        default: withCtx(() => [
+          renderSlot(_ctx.$slots, "default")
+        ]),
+        _: 3
+      }, 16);
+    };
+  }
+});
+export {
+  TooltipProvider_default as T,
+  _sfc_main$2 as _,
+  _sfc_main$1 as a,
+  _sfc_main as b
+};