@phila/phila-ui-tooltip 0.0.4

package/README.md

@@ -0,0 +1,27 @@
+## Notes
+
+The tooltip is positioned according to the space available on the screen. On mobile the tooltip is enabled on tap, and an X is shown to allow users to close it.
+
+## Code Samples
+
+### Basic tooltip with dark mode enabled (default)
+
+```html
+<tooltip message="My tooltip message" />
+```
+
+### Basic tooltip with light mode enabled
+
+```html
+<tooltip message="My tooltip message" mode="light" />
+```
+
+## Live Examples
+
+### Basic tooltip with dark mode enabled (default)
+
+<example name="Tooltip1" height="300"></example>
+
+### Basic tooltip with light mode enabled
+
+<example name="Tooltip2" height="300"></example>

package/dist/Tooltip.css

@@ -0,0 +1 @@
+@font-face{font-family:Montserrat;src:local("Montserrat Regular"),local("Montserrat-Regular"),url(https://www.phila.gov/assets/fonts/Montserrat/Montserrat-Regular.woff2) format("woff2"),url(https://www.phila.gov/assets/fonts/Montserrat/Montserrat-Regular.woff) format("woff");font-weight:400;font-style:normal}@font-face{font-family:Open Sans;src:local("Open Sans Italic"),local("OpenSans-Italic"),url(https://www.phila.gov/assets/fonts/OpenSans/OpenSans-Italic.woff2) format("woff2"),url(https://www.phila.gov/assets/fonts/OpenSans/OpenSans-Italic.woff) format("woff");font-weight:400;font-style:italic}@font-face{font-family:Open Sans;src:local("Open Sans Bold Italic"),local("OpenSans-BoldItalic"),url(https://www.phila.gov/assets/fonts/OpenSans/OpenSans-BoldItalic.woff2) format("woff2"),url(https://www.phila.gov/assets/fonts/OpenSans/OpenSans-BoldItalic.woff) format("woff");font-weight:700;font-style:italic}@font-face{font-family:Montserrat;src:local("Montserrat Bold"),local("Montserrat-Bold"),url(https://www.phila.gov/assets/fonts/Montserrat/Montserrat-Bold.woff2) format("woff2"),url(https://www.phila.gov/assets/fonts/Montserrat/Montserrat-Bold.woff) format("woff");font-weight:700;font-style:normal}@font-face{font-family:Open Sans;src:local("Open Sans Bold"),local("OpenSans-Bold"),url(https://www.phila.gov/assets/fonts/OpenSans/OpenSans-Bold.woff2) format("woff2"),url(https://www.phila.gov/assets/fonts/OpenSans/OpenSans-Bold.woff) format("woff");font-weight:700;font-style:normal}@font-face{font-family:Open Sans;src:local("Open Sans SemiBold Italic"),local("OpenSans-SemiBoldItalic"),url(https://www.phila.gov/assets/fonts/OpenSans/OpenSans-SemiBoldItalic.woff2) format("woff2"),url(https://www.phila.gov/assets/fonts/OpenSans/OpenSans-SemiBoldItalic.woff) format("woff");font-weight:600;font-style:italic}@font-face{font-family:Open Sans;src:local("Open Sans SemiBold"),local("OpenSans-SemiBold"),url(https://www.phila.gov/assets/fonts/OpenSans/OpenSans-SemiBold.woff2) format("woff2"),url(https://www.phila.gov/assets/fonts/OpenSans/OpenSans-SemiBold.woff) format("woff");font-weight:600;font-style:normal}@font-face{font-family:Open Sans;src:local("Open Sans Regular"),local("OpenSans-Regular"),url(https://www.phila.gov/assets/fonts/OpenSans/OpenSans-Regular.woff2) format("woff2"),url(https://www.phila.gov/assets/fonts/OpenSans/OpenSans-Regular.woff) format("woff");font-weight:400;font-style:normal}.tooltip{display:inline-block;margin-left:5px;vertical-align:middle}.tooltip button{color:#0f4d90;font-size:25px;border:0;background-color:transparent;box-shadow:none;padding:0;margin:0;cursor:pointer;vertical-align:middle;position:relative;top:-2px}.tooltip-box{display:block;visibility:hidden;z-index:-100;width:auto;max-width:500px;position:fixed;top:0;left:0;opacity:0;transition:opacity .25s ease-in-out;pointer-events:none}.tooltip-box .tooltip-message{line-height:20px;color:#fff;background-color:#444;font-size:12px;padding:10px 8px 8px}@media screen and (max-width: 768px){.tooltip-box .tooltip-message{padding-top:36px}.tooltip-box .tooltip-message:before{display:inline-block;font-style:normal;font-variant:normal;text-rendering:auto;-webkit-font-smoothing:antialiased;content:"";position:absolute;top:12px;right:16px;font-family:"Font Awesome 5 Pro",sans-serif;font-weight:900;font-size:20px}}@media screen and (max-width: 500px){.tooltip-box{width:auto;max-width:100%}}.tooltip-box .tooltip-arrow{position:fixed;left:0;top:0;border:solid 8px transparent;border-top-color:#444}.tooltip-box .tooltip-arrow.arrow-up{border-top-color:transparent;border-bottom-color:#444}.tooltip-box.light .tooltip-message{color:#444;background-color:#f0f0f0}.tooltip-box.light .tooltip-arrow{border-top-color:#f0f0f0}.tooltip-box.light .tooltip-arrow.arrow-up{border-top-color:transparent;border-bottom-color:#f0f0f0}.tooltip-box.show{visibility:visible;opacity:1;z-index:9999}

package/dist/Tooltip.js

@@ -0,0 +1,112 @@
+import "./Tooltip.css";
+import { defineComponent as p, ref as n, onMounted as h, openBlock as a, createElementBlock as r, renderSlot as d } from "vue";
+class c {
+  constructor(t, o, i, s) {
+    this.htmlBody = document.getElementsByTagName("body")[0], this.tooltip = t, this.tooltipIcon = null, this.tooltipIconClasses = "fas fa-info-circle", this.tooltipArrow = null, this.tooltipBox = null, this.tooltipText = o, this.tooltipBoxClasses = "tooltip-box", this.tooltipMessageClasses = "tooltip-message", this.tooltipArrowClasses = "tooltip-arrow", this.tooltipMode = i || "dark", this.currentTooltipPosition = null, this.initPositionSet = !1, this.tooltipID = s, this.tooltipBtnID = `btn-${s}`, this.padding = 8, this.arrowAttrs = {
+      height: 8,
+      width: 16
+    }, this.clickedToOpen = !1, this.newTooltip();
+  }
+  newTooltip() {
+    this.makeTooltipContainer(), this.setTooltipEvents(), this.setTooltipMsg(), this.setTooltipMode(), this.addTooltip();
+    const t = this;
+    var o = setInterval(function() {
+      const i = document.getElementById(t.tooltipID);
+      i && i.offsetHeight > 0 && (t.addTooltipIcon(), t.setInitTooltipPosition(), t.updateArrowPosition(), clearInterval(o));
+    }, 500);
+  }
+  makeTooltipContainer() {
+    this.tooltipArrow = document.createElement("div"), this.tooltipArrow.className = this.tooltipArrowClasses, this.tooltipBox = document.createElement("div"), this.tooltipBox.className = this.tooltipBoxClasses, this.tooltipBox.setAttribute("id", this.tooltipID), this.tooltipMessage = document.createElement("div"), this.tooltipMessage.className = this.tooltipMessageClasses, this.tooltipIcon = document.createElement("button"), this.tooltipIcon.setAttribute("aria-label", "tooltip"), this.tooltipIcon.className = this.tooltipIconClasses, this.tooltipIcon.setAttribute("id", this.tooltipBtnID);
+  }
+  addTooltipIcon() {
+    this.tooltip.appendChild(this.tooltipIcon);
+  }
+  addTooltip() {
+    this.tooltipBox.appendChild(this.tooltipMessage), this.tooltipBox.appendChild(this.tooltipArrow), this.htmlBody.appendChild(this.tooltipBox);
+  }
+  setTooltipMode() {
+    this.tooltipBox.className = this.tooltipBoxClasses, this.tooltipBox.classList.add(this.tooltipMode);
+  }
+  setTooltipMsg() {
+    this.tooltipMessage.innerText = this.tooltipText;
+  }
+  setTooltipEvents() {
+    const t = this;
+    window.addEventListener("resize", function() {
+      t.updateTooltipPosition();
+    }, !0), this.tooltipIcon.addEventListener("mouseenter", function() {
+      t.updateTooltipPosition(), t.showTooltip();
+    }), window.addEventListener("scroll", function() {
+      t.tooltipBox.classList.contains("show") && t.hideTooltip();
+    }), this.tooltipIcon.addEventListener("focus", function() {
+      t.updateTooltipPosition(), t.showTooltip();
+    }), this.tooltipIcon.addEventListener("mouseleave", function() {
+      t.clickedToOpen || t.hideTooltip();
+    }), this.tooltipIcon.addEventListener("blur", function() {
+      t.hideTooltip();
+    }), this.tooltipIcon.addEventListener("click", function() {
+      t.clickedToOpen = !0, t.updateTooltipPosition(), t.toggleTooltip();
+    }, !1), window.addEventListener("click", function(o) {
+      o.target !== t.tooltipIcon && t.clickedToOpen && (t.hideTooltip(), t.clickedToOpen = !1);
+    });
+  }
+  toggleTooltip() {
+    this.clickedToOpen ? this.showTooltip() : this.hideTooltip();
+  }
+  showTooltip() {
+    this.tooltipBox.classList.add("show"), this.tooltipBox.setAttribute("aria-hidden", !1);
+  }
+  hideTooltip() {
+    this.tooltipBox.classList.remove("show"), this.tooltipBox.setAttribute("aria-hidden", !0);
+  }
+  updateArrowPosition() {
+    const t = this.tooltipIcon.getBoundingClientRect(), o = this.tooltipBox.getBoundingClientRect();
+    this.tooltipArrow.style.left = `${t.left + this.tooltipIcon.offsetWidth / 2 - this.arrowAttrs.width / 2}px`, o.top > t.top ? (this.tooltipArrow.style.top = `${o.top - this.arrowAttrs.height * 2}px`, this.tooltipArrow.classList.add("arrow-up")) : (this.tooltipArrow.style.top = `${o.top + this.tooltipBox.offsetHeight}px`, this.tooltipArrow.classList.remove("arrow-up"));
+  }
+  setInitTooltipPosition() {
+    const t = this.tooltipIcon.getBoundingClientRect();
+    this.tooltipBox.style.left = `${t.left + this.tooltipIcon.offsetWidth / 2 - this.tooltipBox.offsetWidth / 2}px`, this.tooltipBox.style.top = `${t.top - this.tooltipBox.offsetHeight - this.arrowAttrs.height}px`;
+  }
+  updateTooltipPosition(t = !0) {
+    t && this.setInitTooltipPosition();
+    const o = window.innerWidth;
+    let i = o - this.padding * 2;
+    i <= 500 && (this.tooltipBox.style.maxWidth = `${i}px`);
+    const s = this.tooltipIcon.getBoundingClientRect(), e = this.tooltipBox.getBoundingClientRect();
+    if (e.left < this.padding) {
+      this.tooltipBox.style.left = `${this.padding}px`, this.tooltipBox.style.top = `${s.top - this.tooltipBox.offsetHeight - this.arrowAttrs.height}px`, this.updateTooltipPosition(!1);
+      return;
+    } else if (e.left + this.tooltipBox.offsetWidth > o - this.padding) {
+      this.tooltipBox.style.left = `${window.innerWidth - this.padding - this.tooltipBox.offsetWidth}px`, this.tooltipBox.style.top = `${s.top - this.tooltipBox.offsetHeight - this.arrowAttrs.height}px`, this.updateTooltipPosition(!1);
+      return;
+    } else if (e.top < this.padding) {
+      this.tooltipBox.style.left = `${e.left}px`, this.tooltipBox.style.top = `${s.bottom + this.arrowAttrs.height}px`, this.updateTooltipPosition(!1);
+      return;
+    }
+    this.updateArrowPosition();
+  }
+}
+const f = ["aria-describedby"], x = /* @__PURE__ */ p({
+  __name: "Tooltip",
+  props: {
+    mode: { default: "light" },
+    message: {}
+  },
+  setup(l) {
+    const t = l, o = n(Math.floor((1 + Math.random()) * 65536).toString(16).substring(1)), i = n(null);
+    return h(() => {
+      t.message.length >= 250 && console.warn("The tooltip message should be no longer than 250 characters"), new c(i.value, t.message, t.mode, o.value);
+    }), (s, e) => (a(), r("div", {
+      ref_key: "tooltip",
+      ref: i,
+      class: "tooltip",
+      role: "tooltip",
+      "aria-describedby": o.value
+    }, [
+      d(s.$slots, "default")
+    ], 8, f));
+  }
+});
+export {
+  x as default
+};

package/dist/Tooltip.umd.cjs

@@ -0,0 +1,2 @@
+(function(i,l){typeof exports=="object"&&typeof module<"u"?module.exports=l(require("vue")):typeof define=="function"&&define.amd?define(["vue"],l):(i=typeof globalThis<"u"?globalThis:i||self,i.Tooltip=l(i.Vue))})(this,function(i){"use strict";var l=document.createElement("style");l.textContent=`@font-face{font-family:Montserrat;src:local("Montserrat Regular"),local("Montserrat-Regular"),url(https://www.phila.gov/assets/fonts/Montserrat/Montserrat-Regular.woff2) format("woff2"),url(https://www.phila.gov/assets/fonts/Montserrat/Montserrat-Regular.woff) format("woff");font-weight:400;font-style:normal}@font-face{font-family:Open Sans;src:local("Open Sans Italic"),local("OpenSans-Italic"),url(https://www.phila.gov/assets/fonts/OpenSans/OpenSans-Italic.woff2) format("woff2"),url(https://www.phila.gov/assets/fonts/OpenSans/OpenSans-Italic.woff) format("woff");font-weight:400;font-style:italic}@font-face{font-family:Open Sans;src:local("Open Sans Bold Italic"),local("OpenSans-BoldItalic"),url(https://www.phila.gov/assets/fonts/OpenSans/OpenSans-BoldItalic.woff2) format("woff2"),url(https://www.phila.gov/assets/fonts/OpenSans/OpenSans-BoldItalic.woff) format("woff");font-weight:700;font-style:italic}@font-face{font-family:Montserrat;src:local("Montserrat Bold"),local("Montserrat-Bold"),url(https://www.phila.gov/assets/fonts/Montserrat/Montserrat-Bold.woff2) format("woff2"),url(https://www.phila.gov/assets/fonts/Montserrat/Montserrat-Bold.woff) format("woff");font-weight:700;font-style:normal}@font-face{font-family:Open Sans;src:local("Open Sans Bold"),local("OpenSans-Bold"),url(https://www.phila.gov/assets/fonts/OpenSans/OpenSans-Bold.woff2) format("woff2"),url(https://www.phila.gov/assets/fonts/OpenSans/OpenSans-Bold.woff) format("woff");font-weight:700;font-style:normal}@font-face{font-family:Open Sans;src:local("Open Sans SemiBold Italic"),local("OpenSans-SemiBoldItalic"),url(https://www.phila.gov/assets/fonts/OpenSans/OpenSans-SemiBoldItalic.woff2) format("woff2"),url(https://www.phila.gov/assets/fonts/OpenSans/OpenSans-SemiBoldItalic.woff) format("woff");font-weight:600;font-style:italic}@font-face{font-family:Open Sans;src:local("Open Sans SemiBold"),local("OpenSans-SemiBold"),url(https://www.phila.gov/assets/fonts/OpenSans/OpenSans-SemiBold.woff2) format("woff2"),url(https://www.phila.gov/assets/fonts/OpenSans/OpenSans-SemiBold.woff) format("woff");font-weight:600;font-style:normal}@font-face{font-family:Open Sans;src:local("Open Sans Regular"),local("OpenSans-Regular"),url(https://www.phila.gov/assets/fonts/OpenSans/OpenSans-Regular.woff2) format("woff2"),url(https://www.phila.gov/assets/fonts/OpenSans/OpenSans-Regular.woff) format("woff");font-weight:400;font-style:normal}.tooltip{display:inline-block;margin-left:5px;vertical-align:middle}.tooltip button{color:#0f4d90;font-size:25px;border:0;background-color:transparent;box-shadow:none;padding:0;margin:0;cursor:pointer;vertical-align:middle;position:relative;top:-2px}.tooltip-box{display:block;visibility:hidden;z-index:-100;width:auto;max-width:500px;position:fixed;top:0;left:0;opacity:0;transition:opacity .25s ease-in-out;pointer-events:none}.tooltip-box .tooltip-message{line-height:20px;color:#fff;background-color:#444;font-size:12px;padding:10px 8px 8px}@media screen and (max-width: 768px){.tooltip-box .tooltip-message{padding-top:36px}.tooltip-box .tooltip-message:before{display:inline-block;font-style:normal;font-variant:normal;text-rendering:auto;-webkit-font-smoothing:antialiased;content:"";position:absolute;top:12px;right:16px;font-family:"Font Awesome 5 Pro",sans-serif;font-weight:900;font-size:20px}}@media screen and (max-width: 500px){.tooltip-box{width:auto;max-width:100%}}.tooltip-box .tooltip-arrow{position:fixed;left:0;top:0;border:solid 8px transparent;border-top-color:#444}.tooltip-box .tooltip-arrow.arrow-up{border-top-color:transparent;border-bottom-color:#444}.tooltip-box.light .tooltip-message{color:#444;background-color:#f0f0f0}.tooltip-box.light .tooltip-arrow{border-top-color:#f0f0f0}.tooltip-box.light .tooltip-arrow.arrow-up{border-top-color:transparent;border-bottom-color:#f0f0f0}.tooltip-box.show{visibility:visible;opacity:1;z-index:9999}
+`,document.head.appendChild(l);class p{constructor(t,o,s,e){this.htmlBody=document.getElementsByTagName("body")[0],this.tooltip=t,this.tooltipIcon=null,this.tooltipIconClasses="fas fa-info-circle",this.tooltipArrow=null,this.tooltipBox=null,this.tooltipText=o,this.tooltipBoxClasses="tooltip-box",this.tooltipMessageClasses="tooltip-message",this.tooltipArrowClasses="tooltip-arrow",this.tooltipMode=s||"dark",this.currentTooltipPosition=null,this.initPositionSet=!1,this.tooltipID=e,this.tooltipBtnID=`btn-${e}`,this.padding=8,this.arrowAttrs={height:8,width:16},this.clickedToOpen=!1,this.newTooltip()}newTooltip(){this.makeTooltipContainer(),this.setTooltipEvents(),this.setTooltipMsg(),this.setTooltipMode(),this.addTooltip();const t=this;var o=setInterval(function(){const s=document.getElementById(t.tooltipID);s&&s.offsetHeight>0&&(t.addTooltipIcon(),t.setInitTooltipPosition(),t.updateArrowPosition(),clearInterval(o))},500)}makeTooltipContainer(){this.tooltipArrow=document.createElement("div"),this.tooltipArrow.className=this.tooltipArrowClasses,this.tooltipBox=document.createElement("div"),this.tooltipBox.className=this.tooltipBoxClasses,this.tooltipBox.setAttribute("id",this.tooltipID),this.tooltipMessage=document.createElement("div"),this.tooltipMessage.className=this.tooltipMessageClasses,this.tooltipIcon=document.createElement("button"),this.tooltipIcon.setAttribute("aria-label","tooltip"),this.tooltipIcon.className=this.tooltipIconClasses,this.tooltipIcon.setAttribute("id",this.tooltipBtnID)}addTooltipIcon(){this.tooltip.appendChild(this.tooltipIcon)}addTooltip(){this.tooltipBox.appendChild(this.tooltipMessage),this.tooltipBox.appendChild(this.tooltipArrow),this.htmlBody.appendChild(this.tooltipBox)}setTooltipMode(){this.tooltipBox.className=this.tooltipBoxClasses,this.tooltipBox.classList.add(this.tooltipMode)}setTooltipMsg(){this.tooltipMessage.innerText=this.tooltipText}setTooltipEvents(){const t=this;window.addEventListener("resize",function(){t.updateTooltipPosition()},!0),this.tooltipIcon.addEventListener("mouseenter",function(){t.updateTooltipPosition(),t.showTooltip()}),window.addEventListener("scroll",function(){t.tooltipBox.classList.contains("show")&&t.hideTooltip()}),this.tooltipIcon.addEventListener("focus",function(){t.updateTooltipPosition(),t.showTooltip()}),this.tooltipIcon.addEventListener("mouseleave",function(){t.clickedToOpen||t.hideTooltip()}),this.tooltipIcon.addEventListener("blur",function(){t.hideTooltip()}),this.tooltipIcon.addEventListener("click",function(){t.clickedToOpen=!0,t.updateTooltipPosition(),t.toggleTooltip()},!1),window.addEventListener("click",function(o){o.target!==t.tooltipIcon&&t.clickedToOpen&&(t.hideTooltip(),t.clickedToOpen=!1)})}toggleTooltip(){this.clickedToOpen?this.showTooltip():this.hideTooltip()}showTooltip(){this.tooltipBox.classList.add("show"),this.tooltipBox.setAttribute("aria-hidden",!1)}hideTooltip(){this.tooltipBox.classList.remove("show"),this.tooltipBox.setAttribute("aria-hidden",!0)}updateArrowPosition(){const t=this.tooltipIcon.getBoundingClientRect(),o=this.tooltipBox.getBoundingClientRect();this.tooltipArrow.style.left=`${t.left+this.tooltipIcon.offsetWidth/2-this.arrowAttrs.width/2}px`,o.top>t.top?(this.tooltipArrow.style.top=`${o.top-this.arrowAttrs.height*2}px`,this.tooltipArrow.classList.add("arrow-up")):(this.tooltipArrow.style.top=`${o.top+this.tooltipBox.offsetHeight}px`,this.tooltipArrow.classList.remove("arrow-up"))}setInitTooltipPosition(){const t=this.tooltipIcon.getBoundingClientRect();this.tooltipBox.style.left=`${t.left+this.tooltipIcon.offsetWidth/2-this.tooltipBox.offsetWidth/2}px`,this.tooltipBox.style.top=`${t.top-this.tooltipBox.offsetHeight-this.arrowAttrs.height}px`}updateTooltipPosition(t=!0){t&&this.setInitTooltipPosition();const o=window.innerWidth;let s=o-this.padding*2;s<=500&&(this.tooltipBox.style.maxWidth=`${s}px`);const e=this.tooltipIcon.getBoundingClientRect(),n=this.tooltipBox.getBoundingClientRect();if(n.left<this.padding){this.tooltipBox.style.left=`${this.padding}px`,this.tooltipBox.style.top=`${e.top-this.tooltipBox.offsetHeight-this.arrowAttrs.height}px`,this.updateTooltipPosition(!1);return}else if(n.left+this.tooltipBox.offsetWidth>o-this.padding){this.tooltipBox.style.left=`${window.innerWidth-this.padding-this.tooltipBox.offsetWidth}px`,this.tooltipBox.style.top=`${e.top-this.tooltipBox.offsetHeight-this.arrowAttrs.height}px`,this.updateTooltipPosition(!1);return}else if(n.top<this.padding){this.tooltipBox.style.left=`${n.left}px`,this.tooltipBox.style.top=`${e.bottom+this.arrowAttrs.height}px`,this.updateTooltipPosition(!1);return}this.updateArrowPosition()}}const r=["aria-describedby"];return i.defineComponent({__name:"Tooltip",props:{mode:{default:"light"},message:{}},setup(a){const t=a,o=i.ref(Math.floor((1+Math.random())*65536).toString(16).substring(1)),s=i.ref(null);return i.onMounted(()=>{t.message.length>=250&&console.warn("The tooltip message should be no longer than 250 characters"),new p(s.value,t.message,t.mode,o.value)}),(e,n)=>(i.openBlock(),i.createElementBlock("div",{ref_key:"tooltip",ref:s,class:"tooltip",role:"tooltip","aria-describedby":o.value},[i.renderSlot(e.$slots,"default")],8,r))}})});

package/dist/Tooltip.vue.d.ts

@@ -0,0 +1,34 @@
+import { TooltipProps } from './types';
+
+declare const _default: __VLS_WithTemplateSlots<import('vue').DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<TooltipProps>, {
+    mode: string;
+}>, {}, unknown, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<TooltipProps>, {
+    mode: string;
+}>>>, {
+    mode: "dark" | "light";
+}, {}>, {
+    default?(_: {}): any;
+}>;
+export default _default;
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToRuntimeProps<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: import('vue').PropType<T[K]>;
+        required: true;
+    };
+};
+type __VLS_WithDefaults<P, D> = {
+    [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify<P[K] & {
+        default: D[K];
+    }> : P[K];
+};
+type __VLS_Prettify<T> = {
+    [K in keyof T]: T[K];
+} & {};
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/types.d.ts

@@ -0,0 +1,11 @@
+import { default as Tooltip } from './Tooltip.vue';
+
+declare module "@vue/runtime-core" {
+    interface GlobalComponents {
+        Tooltip: typeof Tooltip;
+    }
+}
+export interface TooltipProps {
+    mode: "light" | "dark";
+    message: string;
+}

package/package.json

@@ -0,0 +1,46 @@
+{
+  "name": "@phila/phila-ui-tooltip",
+  "private": false,
+  "version": "0.0.4",
+  "type": "module",
+  "files": [
+    "dist"
+  ],
+  "main": "./dist/Tooltip.umd.cjs",
+  "module": "./dist/Tooltip.js",
+  "types": "./dist/types.d.ts",
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist/types.d.ts",
+        "default": "./dist/Tooltip.js"
+      },
+      "require": "./dist/Tooltip.umd.cjs"
+    }
+  },
+  "scripts": {
+    "dev": "vite",
+    "prepublish": "npm i && npm run build",
+    "build": "vue-tsc && vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@phila/phila-ui-core": "^1.0.12",
+    "vue": "^3.3.8"
+  },
+  "devDependencies": {
+    "@types/node": "^20.10.3",
+    "@vitejs/plugin-vue": "^4.5.0",
+    "sass": "^1.70.0",
+    "typescript": "^5.2.2",
+    "vite": "^5.0.0",
+    "vite-plugin-dts": "^3.6.4",
+    "vite-plugin-lib-inject-css": "^1.3.0",
+    "vue-tsc": "^1.8.22"
+  },
+  "publishConfig": {
+    "registry": "https://registry.npmjs.com/",
+    "access": "public"
+  },
+  "gitHead": "2b2468cbfe9c815c8febd5c12dccb2c785617cb1"
+}