@mekari/pixel3-tooltip 0.0.0

package/dist/index.js

@@ -0,0 +1,373 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.tsx
+var src_exports = {};
+__export(src_exports, {
+  MpTooltip: () => MpTooltip,
+  PixelTooltipDirective: () => PixelTooltipDirective
+});
+module.exports = __toCommonJS(src_exports);
+
+// src/tooltip.tsx
+var import_vue3 = require("vue");
+var import_vue4 = require("vue");
+
+// src/modules/tooltip.hooks.ts
+var import_vue = require("@floating-ui/vue");
+var import_pixel3_utils = require("@mekari/pixel3-utils");
+var import_vue2 = require("vue");
+var import_recipes = require("@mekari/pixel3-styled-system/recipes");
+function useTooltip(props, emit, slots) {
+  if (slots.default().length > 1) {
+    console.error("[Pixel]: The MpTooltip component only expects one child.");
+  }
+  const getId = (0, import_vue2.computed)(() => props.id || `tooltip-${(0, import_pixel3_utils.useId)(4)}`);
+  const isOpen = (0, import_vue2.ref)(false);
+  const triggerNode2 = (0, import_vue2.ref)(null);
+  const contentNode = (0, import_vue2.ref)(null);
+  const placement = (0, import_vue2.ref)(props.placement);
+  const middleware = (0, import_vue2.ref)([(0, import_vue.offset)(4), (0, import_vue.flip)(), (0, import_vue.shift)()]);
+  const {
+    floatingStyles
+  } = (0, import_vue.useFloating)(triggerNode2, contentNode, {
+    placement,
+    middleware,
+    whileElementsMounted: import_vue.autoUpdate
+  });
+  function onOpenTooltip() {
+    setTimeout(() => {
+      isOpen.value = true;
+      emit("open");
+    }, props.showDelay);
+  }
+  __name(onOpenTooltip, "onOpenTooltip");
+  function onCloseTooltip() {
+    setTimeout(() => {
+      isOpen.value = false;
+      emit("close");
+    }, props.hideDelay);
+  }
+  __name(onCloseTooltip, "onCloseTooltip");
+  const triggerAttrs = (0, import_vue2.computed)(() => {
+    return {
+      ref: triggerNode2,
+      "data-pixel-component": "MpTooltip",
+      id: getId.value,
+      onMouseover: () => {
+        if (props.isManual)
+          return;
+        onOpenTooltip();
+      },
+      onMouseleave: () => {
+        if (props.isManual)
+          return;
+        onCloseTooltip();
+      },
+      onFocus: () => {
+        if (props.isManual)
+          return;
+        onOpenTooltip();
+      },
+      onBlur: () => {
+        if (props.isManual)
+          return;
+        onCloseTooltip();
+      }
+    };
+  });
+  const contentAttrs = (0, import_vue2.computed)(() => {
+    return {
+      ref: contentNode,
+      class: (0, import_recipes.tooltipRecipe)(),
+      style: {
+        display: isOpen.value ? "unset" : "none",
+        ...floatingStyles.value
+      }
+    };
+  });
+  (0, import_vue2.watch)(() => props.isOpen, (newValue) => {
+    if (props.isManual) {
+      isOpen.value = newValue;
+    }
+  });
+  return {
+    triggerNode: triggerNode2,
+    contentNode,
+    triggerAttrs,
+    contentAttrs,
+    isOpen,
+    onOpenTooltip,
+    onCloseTooltip
+  };
+}
+__name(useTooltip, "useTooltip");
+function useSingletonTooltip(props) {
+  const {
+    triggerNode: triggerNode2,
+    isOpen,
+    placement
+  } = (0, import_vue2.toRefs)(props);
+  const contentNode = (0, import_vue2.ref)(null);
+  const middleware = (0, import_vue2.ref)([(0, import_vue.offset)(4), (0, import_vue.flip)(), (0, import_vue.shift)()]);
+  const {
+    floatingStyles
+  } = (0, import_vue.useFloating)(triggerNode2, contentNode, {
+    placement,
+    middleware,
+    whileElementsMounted: import_vue.autoUpdate
+  });
+  const contentAttrs = (0, import_vue2.computed)(() => {
+    return {
+      ref: contentNode,
+      class: (0, import_recipes.tooltipRecipe)(),
+      style: {
+        display: (isOpen == null ? void 0 : isOpen.value) ? "unset" : "none",
+        ...floatingStyles.value
+      }
+    };
+  });
+  return {
+    triggerNode: triggerNode2,
+    contentNode,
+    contentAttrs
+  };
+}
+__name(useSingletonTooltip, "useSingletonTooltip");
+
+// src/modules/tooltip.props.ts
+var tooltipProps = {
+  label: {
+    type: String
+  },
+  placement: {
+    type: String,
+    default: "top"
+  },
+  id: {
+    type: String
+  },
+  defaultIsOpen: {
+    type: Boolean
+  },
+  isManual: {
+    type: Boolean
+  },
+  isOpen: {
+    type: Boolean
+  },
+  showDelay: {
+    type: Number,
+    default: 0
+  },
+  hideDelay: {
+    type: Number,
+    default: 0
+  },
+  usePortal: {
+    type: Boolean
+  },
+  isKeepAlive: {
+    type: Boolean,
+    default: true
+  }
+};
+var singletonTooltipProps = {
+  triggerNode: {
+    type: [Object],
+    default: null
+  },
+  label: {
+    type: String
+  },
+  placement: {
+    type: String,
+    default: "right"
+  },
+  isOpen: {
+    type: Boolean
+  }
+};
+
+// src/tooltip.tsx
+var MpTooltip = (0, import_vue4.defineComponent)({
+  name: "MpTooltip",
+  inheritAttrs: false,
+  props: tooltipProps,
+  emits: ["open", "close"],
+  setup(props, {
+    slots,
+    emit
+  }) {
+    const {
+      triggerAttrs,
+      contentAttrs,
+      isOpen
+    } = useTooltip(props, emit, slots);
+    return () => {
+      const triggerNode2 = (0, import_vue4.cloneVNode)(slots.default()[0], triggerAttrs.value);
+      const contentNode = (0, import_vue3.createVNode)("div", contentAttrs.value, [(0, import_vue3.createTextVNode)(" "), slots.label ? slots.label() : props.label, (0, import_vue3.createTextVNode)(" ")]);
+      const renderContentNode = props.usePortal ? (0, import_vue3.createVNode)(import_vue4.Teleport, {
+        "to": "body"
+      }, {
+        default: () => [(0, import_vue3.createTextVNode)(" "), contentNode, (0, import_vue3.createTextVNode)(" ")]
+      }) : contentNode;
+      return (0, import_vue3.createVNode)(import_vue3.Fragment, null, [triggerNode2, props.isKeepAlive ? renderContentNode : isOpen.value ? renderContentNode : null]);
+    };
+  }
+});
+
+// src/v-tooltip.ts
+var import_vue7 = require("vue");
+
+// src/singleton-tooltip.tsx
+var import_vue5 = require("vue");
+var import_vue6 = require("vue");
+var MpSingletonTooltip = (0, import_vue6.defineComponent)({
+  name: "MpSingletonTooltip",
+  inheritAttrs: false,
+  props: singletonTooltipProps,
+  setup(props, {
+    slots
+  }) {
+    const {
+      contentAttrs
+    } = useSingletonTooltip(props);
+    return () => {
+      return props.label ? (0, import_vue5.createVNode)("div", contentAttrs.value, [(0, import_vue5.createTextVNode)(" "), slots.default ? slots.default() : props.label, (0, import_vue5.createTextVNode)(" ")]) : null;
+    };
+  }
+});
+
+// src/v-tooltip.ts
+var directiveApp;
+var triggerNode = (0, import_vue7.ref)(null);
+var timeoutOpen = (0, import_vue7.ref)();
+var timeoutClose = (0, import_vue7.ref)();
+var tooltipState = (0, import_vue7.ref)({
+  isOpen: false,
+  label: "",
+  placement: "top"
+});
+function initTooltipDirectiveApp() {
+  if (directiveApp)
+    return;
+  directiveApp = (0, import_vue7.createApp)({
+    devtools: {
+      hide: true
+    },
+    name: "PixelTooltipDirectiveApp",
+    render() {
+      return (0, import_vue7.h)(MpSingletonTooltip, {
+        isOpen: tooltipState.value.isOpen,
+        triggerNode,
+        label: tooltipState.value.label,
+        placement: tooltipState.value.placement
+      });
+    }
+  });
+  const mountTarget = document.createElement("div");
+  mountTarget.id = "PixelTooltipDirectiveApp";
+  document.body.appendChild(mountTarget);
+  directiveApp.mount(mountTarget);
+}
+__name(initTooltipDirectiveApp, "initTooltipDirectiveApp");
+var PixelTooltipDirective = {
+  mounted: (el, binding) => {
+    if (window) {
+      initTooltipDirectiveApp();
+    }
+    const value = binding.value;
+    const props = {
+      label: typeof binding.value === "string" ? binding.value : value.label,
+      placement: value.placement,
+      showDelay: value.showDelay,
+      hideDelay: value.hideDelay
+    };
+    el.$pixelTooltip = {
+      show: async () => {
+        clearTimeout(timeoutOpen.value);
+        timeoutOpen.value = setTimeout(async () => {
+          triggerNode.value = el;
+          tooltipState.value.label = props.label;
+          tooltipState.value.placement = props.placement || "top";
+          tooltipState.value.isOpen = true;
+        }, value.showDelay || 0);
+      },
+      hide: () => {
+        clearTimeout(timeoutClose.value);
+        timeoutClose.value = setTimeout(async () => {
+          tooltipState.value.isOpen = false;
+          tooltipState.value.label = "";
+        }, value.hideDelay || 0);
+      }
+    };
+    el.addEventListener("mouseover", el.$pixelTooltip.show);
+    el.addEventListener("focus", el.$pixelTooltip.show);
+    el.addEventListener("mouseleave", el.$pixelTooltip.hide);
+    el.addEventListener("blur", el.$pixelTooltip.hide);
+  },
+  updated: (el, binding) => {
+    if (window) {
+      initTooltipDirectiveApp();
+    }
+    const value = binding.value;
+    const props = {
+      label: typeof binding.value === "string" ? binding.value : value.label,
+      placement: value.placement,
+      showDelay: value.showDelay,
+      hideDelay: value.hideDelay
+    };
+    el.$pixelTooltip = {
+      show: async () => {
+        clearTimeout(timeoutOpen.value);
+        timeoutOpen.value = setTimeout(async () => {
+          triggerNode.value = el;
+          tooltipState.value.label = props.label;
+          tooltipState.value.placement = props.placement || "top";
+          tooltipState.value.isOpen = true;
+        }, value.showDelay || 0);
+      },
+      hide: () => {
+        clearTimeout(timeoutClose.value);
+        timeoutClose.value = setTimeout(async () => {
+          tooltipState.value.isOpen = false;
+          tooltipState.value.label = "";
+        }, value.hideDelay || 0);
+      }
+    };
+    el.addEventListener("mouseover", el.$pixelTooltip.show);
+    el.addEventListener("focus", el.$pixelTooltip.show);
+    el.addEventListener("mouseleave", el.$pixelTooltip.hide);
+    el.addEventListener("blur", el.$pixelTooltip.hide);
+  },
+  beforeUnmount(el) {
+    el.removeEventListener("mouseover", el.$pixelTooltip.show);
+    el.removeEventListener("focus", el.$pixelTooltip.show);
+    el.removeEventListener("mouseleave", el.$pixelTooltip.hide);
+    el.removeEventListener("blur", el.$pixelTooltip.hide);
+    delete el["$pixelTooltip"];
+  }
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  MpTooltip,
+  PixelTooltipDirective
+});

package/dist/index.mjs

@@ -0,0 +1,14 @@
+import {
+  MpTooltip
+} from "./chunk-4C7JA7QR.mjs";
+import {
+  PixelTooltipDirective
+} from "./chunk-73AMP22F.mjs";
+import "./chunk-JHWDKDBR.mjs";
+import "./chunk-OBETIXOG.mjs";
+import "./chunk-22GSYROL.mjs";
+import "./chunk-QZ7VFGWC.mjs";
+export {
+  MpTooltip,
+  PixelTooltipDirective
+};

package/dist/metafile-cjs.json

@@ -0,0 +1 @@
+{"inputs":{"src/modules/tooltip.hooks.ts":{"bytes":3101,"imports":[{"path":"@floating-ui/vue","kind":"import-statement","external":true},{"path":"@mekari/pixel3-utils","kind":"import-statement","external":true},{"path":"vue","kind":"import-statement","external":true},{"path":"@mekari/pixel3-styled-system/recipes","kind":"import-statement","external":true},{"path":"<runtime>","kind":"import-statement","external":true}],"format":"esm"},"src/modules/tooltip.props.ts":{"bytes":1707,"imports":[],"format":"esm"},"src/tooltip.tsx":{"bytes":1278,"imports":[{"path":"vue","kind":"import-statement","external":true},{"path":"vue","kind":"import-statement","external":true},{"path":"src/modules/tooltip.hooks.ts","kind":"import-statement","original":"./modules/tooltip.hooks"},{"path":"src/modules/tooltip.props.ts","kind":"import-statement","original":"./modules/tooltip.props"}],"format":"esm"},"src/singleton-tooltip.tsx":{"bytes":781,"imports":[{"path":"vue","kind":"import-statement","external":true},{"path":"vue","kind":"import-statement","external":true},{"path":"src/modules/tooltip.props.ts","kind":"import-statement","original":"./modules/tooltip.props"},{"path":"src/modules/tooltip.hooks.ts","kind":"import-statement","original":"./modules/tooltip.hooks"}],"format":"esm"},"src/v-tooltip.ts":{"bytes":4420,"imports":[{"path":"vue","kind":"import-statement","external":true},{"path":"src/singleton-tooltip.tsx","kind":"import-statement","original":"./singleton-tooltip"},{"path":"<runtime>","kind":"import-statement","external":true}],"format":"esm"},"src/index.tsx":{"bytes":176,"imports":[{"path":"src/tooltip.tsx","kind":"import-statement","original":"./tooltip"},{"path":"src/v-tooltip.ts","kind":"import-statement","original":"./v-tooltip"}],"format":"esm"}},"outputs":{"dist/index.js":{"imports":[{"path":"vue","kind":"require-call","external":true},{"path":"vue","kind":"require-call","external":true},{"path":"@floating-ui/vue","kind":"require-call","external":true},{"path":"@mekari/pixel3-utils","kind":"require-call","external":true},{"path":"vue","kind":"require-call","external":true},{"path":"@mekari/pixel3-styled-system/recipes","kind":"require-call","external":true},{"path":"vue","kind":"require-call","external":true},{"path":"vue","kind":"require-call","external":true},{"path":"vue","kind":"require-call","external":true}],"exports":[],"entryPoint":"src/index.tsx","inputs":{"src/index.tsx":{"bytesInOutput":177},"src/tooltip.tsx":{"bytesInOutput":1141},"src/modules/tooltip.hooks.ts":{"bytesInOutput":3417},"src/modules/tooltip.props.ts":{"bytesInOutput":679},"src/v-tooltip.ts":{"bytesInOutput":3695},"src/singleton-tooltip.tsx":{"bytesInOutput":566}},"bytes":10888},"dist/singleton-tooltip.js":{"imports":[{"path":"vue","kind":"require-call","external":true},{"path":"vue","kind":"require-call","external":true},{"path":"@floating-ui/vue","kind":"require-call","external":true},{"path":"@mekari/pixel3-utils","kind":"require-call","external":true},{"path":"vue","kind":"require-call","external":true},{"path":"@mekari/pixel3-styled-system/recipes","kind":"require-call","external":true}],"exports":[],"entryPoint":"src/singleton-tooltip.tsx","inputs":{"src/singleton-tooltip.tsx":{"bytesInOutput":749},"src/modules/tooltip.props.ts":{"bytesInOutput":219},"src/modules/tooltip.hooks.ts":{"bytesInOutput":1096}},"bytes":3191},"dist/tooltip.js":{"imports":[{"path":"vue","kind":"require-call","external":true},{"path":"vue","kind":"require-call","external":true},{"path":"@floating-ui/vue","kind":"require-call","external":true},{"path":"@mekari/pixel3-utils","kind":"require-call","external":true},{"path":"vue","kind":"require-call","external":true},{"path":"@mekari/pixel3-styled-system/recipes","kind":"require-call","external":true}],"exports":[],"entryPoint":"src/tooltip.tsx","inputs":{"src/tooltip.tsx":{"bytesInOutput":1274},"src/modules/tooltip.hooks.ts":{"bytesInOutput":2484},"src/modules/tooltip.props.ts":{"bytesInOutput":460}},"bytes":5316},"dist/v-tooltip.js":{"imports":[{"path":"vue","kind":"require-call","external":true},{"path":"vue","kind":"require-call","external":true},{"path":"vue","kind":"require-call","external":true},{"path":"@floating-ui/vue","kind":"require-call","external":true},{"path":"@mekari/pixel3-utils","kind":"require-call","external":true},{"path":"vue","kind":"require-call","external":true},{"path":"@mekari/pixel3-styled-system/recipes","kind":"require-call","external":true}],"exports":[],"entryPoint":"src/v-tooltip.ts","inputs":{"src/v-tooltip.ts":{"bytesInOutput":3860},"src/singleton-tooltip.tsx":{"bytesInOutput":566},"src/modules/tooltip.props.ts":{"bytesInOutput":219},"src/modules/tooltip.hooks.ts":{"bytesInOutput":1125}},"bytes":6942},"dist/modules/tooltip.hooks.js":{"imports":[{"path":"@floating-ui/vue","kind":"require-call","external":true},{"path":"@mekari/pixel3-utils","kind":"require-call","external":true},{"path":"vue","kind":"require-call","external":true},{"path":"@mekari/pixel3-styled-system/recipes","kind":"require-call","external":true}],"exports":[],"entryPoint":"src/modules/tooltip.hooks.ts","inputs":{"src/modules/tooltip.hooks.ts":{"bytesInOutput":3576}},"bytes":4625},"dist/modules/tooltip.props.js":{"imports":[],"exports":[],"entryPoint":"src/modules/tooltip.props.ts","inputs":{"src/modules/tooltip.props.ts":{"bytesInOutput":966}},"bytes":1945}}}

package/dist/metafile-esm.json

@@ -0,0 +1 @@
+{"inputs":{"src/modules/tooltip.hooks.ts":{"bytes":3101,"imports":[{"path":"@floating-ui/vue","kind":"import-statement","external":true},{"path":"@mekari/pixel3-utils","kind":"import-statement","external":true},{"path":"vue","kind":"import-statement","external":true},{"path":"@mekari/pixel3-styled-system/recipes","kind":"import-statement","external":true},{"path":"<runtime>","kind":"import-statement","external":true}],"format":"esm"},"src/modules/tooltip.props.ts":{"bytes":1707,"imports":[],"format":"esm"},"src/tooltip.tsx":{"bytes":1278,"imports":[{"path":"vue","kind":"import-statement","external":true},{"path":"vue","kind":"import-statement","external":true},{"path":"src/modules/tooltip.hooks.ts","kind":"import-statement","original":"./modules/tooltip.hooks"},{"path":"src/modules/tooltip.props.ts","kind":"import-statement","original":"./modules/tooltip.props"}],"format":"esm"},"src/singleton-tooltip.tsx":{"bytes":781,"imports":[{"path":"vue","kind":"import-statement","external":true},{"path":"vue","kind":"import-statement","external":true},{"path":"src/modules/tooltip.props.ts","kind":"import-statement","original":"./modules/tooltip.props"},{"path":"src/modules/tooltip.hooks.ts","kind":"import-statement","original":"./modules/tooltip.hooks"}],"format":"esm"},"src/v-tooltip.ts":{"bytes":4420,"imports":[{"path":"vue","kind":"import-statement","external":true},{"path":"src/singleton-tooltip.tsx","kind":"import-statement","original":"./singleton-tooltip"},{"path":"<runtime>","kind":"import-statement","external":true}],"format":"esm"},"src/index.tsx":{"bytes":176,"imports":[{"path":"src/tooltip.tsx","kind":"import-statement","original":"./tooltip"},{"path":"src/v-tooltip.ts","kind":"import-statement","original":"./v-tooltip"}],"format":"esm"}},"outputs":{"dist/index.mjs":{"imports":[{"path":"dist/chunk-4C7JA7QR.mjs","kind":"import-statement"},{"path":"dist/chunk-73AMP22F.mjs","kind":"import-statement"},{"path":"dist/chunk-JHWDKDBR.mjs","kind":"import-statement"},{"path":"dist/chunk-OBETIXOG.mjs","kind":"import-statement"},{"path":"dist/chunk-22GSYROL.mjs","kind":"import-statement"},{"path":"dist/chunk-QZ7VFGWC.mjs","kind":"import-statement"}],"exports":["MpTooltip","PixelTooltipDirective"],"entryPoint":"src/index.tsx","inputs":{"src/index.tsx":{"bytesInOutput":0}},"bytes":289},"dist/singleton-tooltip.mjs":{"imports":[{"path":"dist/chunk-JHWDKDBR.mjs","kind":"import-statement"},{"path":"dist/chunk-OBETIXOG.mjs","kind":"import-statement"},{"path":"dist/chunk-22GSYROL.mjs","kind":"import-statement"},{"path":"dist/chunk-QZ7VFGWC.mjs","kind":"import-statement"}],"exports":["MpSingletonTooltip"],"entryPoint":"src/singleton-tooltip.tsx","inputs":{},"bytes":187},"dist/tooltip.mjs":{"imports":[{"path":"dist/chunk-4C7JA7QR.mjs","kind":"import-statement"},{"path":"dist/chunk-OBETIXOG.mjs","kind":"import-statement"},{"path":"dist/chunk-22GSYROL.mjs","kind":"import-statement"},{"path":"dist/chunk-QZ7VFGWC.mjs","kind":"import-statement"}],"exports":["MpTooltip"],"entryPoint":"src/tooltip.tsx","inputs":{},"bytes":169},"dist/chunk-4C7JA7QR.mjs":{"imports":[{"path":"dist/chunk-OBETIXOG.mjs","kind":"import-statement"},{"path":"dist/chunk-22GSYROL.mjs","kind":"import-statement"},{"path":"vue","kind":"import-statement","external":true},{"path":"vue","kind":"import-statement","external":true}],"exports":["MpTooltip"],"inputs":{"src/tooltip.tsx":{"bytesInOutput":1074}},"bytes":1227},"dist/v-tooltip.mjs":{"imports":[{"path":"dist/chunk-73AMP22F.mjs","kind":"import-statement"},{"path":"dist/chunk-JHWDKDBR.mjs","kind":"import-statement"},{"path":"dist/chunk-OBETIXOG.mjs","kind":"import-statement"},{"path":"dist/chunk-22GSYROL.mjs","kind":"import-statement"},{"path":"dist/chunk-QZ7VFGWC.mjs","kind":"import-statement"}],"exports":["PixelTooltipDirective"],"entryPoint":"src/v-tooltip.ts","inputs":{},"bytes":224},"dist/chunk-73AMP22F.mjs":{"imports":[{"path":"dist/chunk-JHWDKDBR.mjs","kind":"import-statement"},{"path":"dist/chunk-QZ7VFGWC.mjs","kind":"import-statement"},{"path":"vue","kind":"import-statement","external":true}],"exports":["PixelTooltipDirective"],"inputs":{"src/v-tooltip.ts":{"bytesInOutput":3600}},"bytes":3768},"dist/chunk-JHWDKDBR.mjs":{"imports":[{"path":"dist/chunk-OBETIXOG.mjs","kind":"import-statement"},{"path":"dist/chunk-22GSYROL.mjs","kind":"import-statement"},{"path":"vue","kind":"import-statement","external":true},{"path":"vue","kind":"import-statement","external":true}],"exports":["MpSingletonTooltip"],"inputs":{"src/singleton-tooltip.tsx":{"bytesInOutput":560}},"bytes":750},"dist/modules/tooltip.hooks.mjs":{"imports":[{"path":"dist/chunk-OBETIXOG.mjs","kind":"import-statement"},{"path":"dist/chunk-QZ7VFGWC.mjs","kind":"import-statement"}],"exports":["useSingletonTooltip","useTooltip"],"entryPoint":"src/modules/tooltip.hooks.ts","inputs":{},"bytes":157},"dist/chunk-OBETIXOG.mjs":{"imports":[{"path":"dist/chunk-QZ7VFGWC.mjs","kind":"import-statement"},{"path":"@floating-ui/vue","kind":"import-statement","external":true},{"path":"@mekari/pixel3-utils","kind":"import-statement","external":true},{"path":"vue","kind":"import-statement","external":true},{"path":"@mekari/pixel3-styled-system/recipes","kind":"import-statement","external":true}],"exports":["useSingletonTooltip","useTooltip"],"inputs":{"src/modules/tooltip.hooks.ts":{"bytesInOutput":2975}},"bytes":3106},"dist/modules/tooltip.props.mjs":{"imports":[{"path":"dist/chunk-22GSYROL.mjs","kind":"import-statement"},{"path":"dist/chunk-QZ7VFGWC.mjs","kind":"import-statement"}],"exports":["singletonTooltipProps","tooltipEmits","tooltipProps"],"entryPoint":"src/modules/tooltip.props.ts","inputs":{},"bytes":197},"dist/chunk-22GSYROL.mjs":{"imports":[],"exports":["singletonTooltipProps","tooltipEmits","tooltipProps"],"inputs":{"src/modules/tooltip.props.ts":{"bytesInOutput":717}},"bytes":818},"dist/chunk-QZ7VFGWC.mjs":{"imports":[],"exports":["__name"],"inputs":{},"bytes":151}}}

package/dist/modules/tooltip.hooks.d.mts

@@ -0,0 +1,51 @@
+import { TooltipProps, TooltipEmits, SingletonTooltipProps, MaybeElement } from './tooltip.props.mjs';
+import * as _floating_ui_vue from '@floating-ui/vue';
+import * as vue from 'vue';
+import { Slots } from 'vue';
+
+declare function useTooltip(props: TooltipProps, emit: TooltipEmits, slots: Slots): {
+    triggerNode: vue.Ref<null>;
+    contentNode: vue.Ref<null>;
+    triggerAttrs: vue.ComputedRef<{
+        ref: vue.Ref<null>;
+        'data-pixel-component': string;
+        id: string;
+        onMouseover: () => void;
+        onMouseleave: () => void;
+        onFocus: () => void;
+        onBlur: () => void;
+    }>;
+    contentAttrs: vue.ComputedRef<{
+        ref: vue.Ref<null>;
+        class: string;
+        style: {
+            position: _floating_ui_vue.Strategy;
+            top: string;
+            left: string;
+            transform?: string | undefined;
+            willChange?: string | undefined;
+            display: string;
+        };
+    }>;
+    isOpen: vue.Ref<boolean>;
+    onOpenTooltip: () => void;
+    onCloseTooltip: () => void;
+};
+declare function useSingletonTooltip(props: SingletonTooltipProps): {
+    triggerNode: Readonly<vue.Ref<MaybeElement>>;
+    contentNode: vue.Ref<null>;
+    contentAttrs: vue.ComputedRef<{
+        ref: vue.Ref<null>;
+        class: string;
+        style: {
+            position: _floating_ui_vue.Strategy;
+            top: string;
+            left: string;
+            transform?: string | undefined;
+            willChange?: string | undefined;
+            display: string;
+        };
+    }>;
+};
+
+export { useSingletonTooltip, useTooltip };

package/dist/modules/tooltip.hooks.d.ts

@@ -0,0 +1,51 @@
+import { TooltipProps, TooltipEmits, SingletonTooltipProps, MaybeElement } from './tooltip.props.js';
+import * as _floating_ui_vue from '@floating-ui/vue';
+import * as vue from 'vue';
+import { Slots } from 'vue';
+
+declare function useTooltip(props: TooltipProps, emit: TooltipEmits, slots: Slots): {
+    triggerNode: vue.Ref<null>;
+    contentNode: vue.Ref<null>;
+    triggerAttrs: vue.ComputedRef<{
+        ref: vue.Ref<null>;
+        'data-pixel-component': string;
+        id: string;
+        onMouseover: () => void;
+        onMouseleave: () => void;
+        onFocus: () => void;
+        onBlur: () => void;
+    }>;
+    contentAttrs: vue.ComputedRef<{
+        ref: vue.Ref<null>;
+        class: string;
+        style: {
+            position: _floating_ui_vue.Strategy;
+            top: string;
+            left: string;
+            transform?: string | undefined;
+            willChange?: string | undefined;
+            display: string;
+        };
+    }>;
+    isOpen: vue.Ref<boolean>;
+    onOpenTooltip: () => void;
+    onCloseTooltip: () => void;
+};
+declare function useSingletonTooltip(props: SingletonTooltipProps): {
+    triggerNode: Readonly<vue.Ref<MaybeElement>>;
+    contentNode: vue.Ref<null>;
+    contentAttrs: vue.ComputedRef<{
+        ref: vue.Ref<null>;
+        class: string;
+        style: {
+            position: _floating_ui_vue.Strategy;
+            top: string;
+            left: string;
+            transform?: string | undefined;
+            willChange?: string | undefined;
+            display: string;
+        };
+    }>;
+};
+
+export { useSingletonTooltip, useTooltip };

package/dist/modules/tooltip.hooks.js

@@ -0,0 +1,152 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/modules/tooltip.hooks.ts
+var tooltip_hooks_exports = {};
+__export(tooltip_hooks_exports, {
+  useSingletonTooltip: () => useSingletonTooltip,
+  useTooltip: () => useTooltip
+});
+module.exports = __toCommonJS(tooltip_hooks_exports);
+var import_vue = require("@floating-ui/vue");
+var import_pixel3_utils = require("@mekari/pixel3-utils");
+var import_vue2 = require("vue");
+var import_recipes = require("@mekari/pixel3-styled-system/recipes");
+function useTooltip(props, emit, slots) {
+  if (slots.default().length > 1) {
+    console.error("[Pixel]: The MpTooltip component only expects one child.");
+  }
+  const getId = (0, import_vue2.computed)(() => props.id || `tooltip-${(0, import_pixel3_utils.useId)(4)}`);
+  const isOpen = (0, import_vue2.ref)(false);
+  const triggerNode = (0, import_vue2.ref)(null);
+  const contentNode = (0, import_vue2.ref)(null);
+  const placement = (0, import_vue2.ref)(props.placement);
+  const middleware = (0, import_vue2.ref)([(0, import_vue.offset)(4), (0, import_vue.flip)(), (0, import_vue.shift)()]);
+  const {
+    floatingStyles
+  } = (0, import_vue.useFloating)(triggerNode, contentNode, {
+    placement,
+    middleware,
+    whileElementsMounted: import_vue.autoUpdate
+  });
+  function onOpenTooltip() {
+    setTimeout(() => {
+      isOpen.value = true;
+      emit("open");
+    }, props.showDelay);
+  }
+  __name(onOpenTooltip, "onOpenTooltip");
+  function onCloseTooltip() {
+    setTimeout(() => {
+      isOpen.value = false;
+      emit("close");
+    }, props.hideDelay);
+  }
+  __name(onCloseTooltip, "onCloseTooltip");
+  const triggerAttrs = (0, import_vue2.computed)(() => {
+    return {
+      ref: triggerNode,
+      "data-pixel-component": "MpTooltip",
+      id: getId.value,
+      onMouseover: () => {
+        if (props.isManual)
+          return;
+        onOpenTooltip();
+      },
+      onMouseleave: () => {
+        if (props.isManual)
+          return;
+        onCloseTooltip();
+      },
+      onFocus: () => {
+        if (props.isManual)
+          return;
+        onOpenTooltip();
+      },
+      onBlur: () => {
+        if (props.isManual)
+          return;
+        onCloseTooltip();
+      }
+    };
+  });
+  const contentAttrs = (0, import_vue2.computed)(() => {
+    return {
+      ref: contentNode,
+      class: (0, import_recipes.tooltipRecipe)(),
+      style: {
+        display: isOpen.value ? "unset" : "none",
+        ...floatingStyles.value
+      }
+    };
+  });
+  (0, import_vue2.watch)(() => props.isOpen, (newValue) => {
+    if (props.isManual) {
+      isOpen.value = newValue;
+    }
+  });
+  return {
+    triggerNode,
+    contentNode,
+    triggerAttrs,
+    contentAttrs,
+    isOpen,
+    onOpenTooltip,
+    onCloseTooltip
+  };
+}
+__name(useTooltip, "useTooltip");
+function useSingletonTooltip(props) {
+  const {
+    triggerNode,
+    isOpen,
+    placement
+  } = (0, import_vue2.toRefs)(props);
+  const contentNode = (0, import_vue2.ref)(null);
+  const middleware = (0, import_vue2.ref)([(0, import_vue.offset)(4), (0, import_vue.flip)(), (0, import_vue.shift)()]);
+  const {
+    floatingStyles
+  } = (0, import_vue.useFloating)(triggerNode, contentNode, {
+    placement,
+    middleware,
+    whileElementsMounted: import_vue.autoUpdate
+  });
+  const contentAttrs = (0, import_vue2.computed)(() => {
+    return {
+      ref: contentNode,
+      class: (0, import_recipes.tooltipRecipe)(),
+      style: {
+        display: (isOpen == null ? void 0 : isOpen.value) ? "unset" : "none",
+        ...floatingStyles.value
+      }
+    };
+  });
+  return {
+    triggerNode,
+    contentNode,
+    contentAttrs
+  };
+}
+__name(useSingletonTooltip, "useSingletonTooltip");
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  useSingletonTooltip,
+  useTooltip
+});