@bobbykim/manguito-theme 0.5.0 → 0.7.0

package/README.md

@@ -19,9 +19,7 @@ npx tailwindcss init -p
 tailwind.config.cjs
 
 ```cjs
-const {
-  mclTheme,
-} = require('./src/components/manguito-theme/themeVariables.cjs')
+const { mclTheme } = require('@bobbykim/manguito-theme/themeVariables.cjs')
 module.exports = {
   content: [
     './src/**/*.{vue,ts,js,cjs}',

package/lib/collapse/Collapse.vue

@@ -1,9 +1,9 @@
 <script setup lang="ts">
-import { ref, watch, Transition } from 'vue'
-import type { CollapseEvent } from './index.types'
+import { ref, watch, Transition, onMounted, onBeforeUnmount } from 'vue'
+import { observeVisibleAttr } from '../composables'
+
 const props = withDefaults(
   defineProps<{
-    collapseId: string
     accordion?: string
     className?: string
     visible?: boolean
@@ -13,12 +13,24 @@ const props = withDefaults(
     visible: false,
   }
 )
-const emit = defineEmits(['toggle'])
+const emit = defineEmits(['open', 'close'])
+const collapseRef = ref<HTMLElement | undefined>()
 const toggle = ref<boolean>(props.visible)
 
-const handleToggleEvent = (e: Event): void => {
+const toggleCollapse = (): void => {
   toggle.value = !toggle.value
-  emit('toggle', { ...e, visible: toggle.value } as CollapseEvent)
+}
+const openCollapse = (): void => {
+  toggle.value = true
+}
+const closeCollapse = (): void => {
+  toggle.value = false
+}
+const emitOpenEvent = () => {
+  emit('open', { visible: true })
+}
+const emitCloseEvent = () => {
+  emit('close', { visible: false })
 }
 
 /**
@@ -45,30 +57,49 @@ const onLeave = (el: any) => {
   el.style.opacity = '0'
 }
 
+// set nutation observer watching `visible` attribute in element
+const handleVisibility = (visible: boolean = false) => {
+  toggle.value = visible
+}
+const observer = observeVisibleAttr(handleVisibility)
+
 watch(
   () => props.visible,
   (newValue) => {
     toggle.value = newValue
   }
 )
+watch(toggle, (newValue) => {
+  if (newValue === true) {
+    emitOpenEvent()
+  } else if (newValue === false) {
+    emitCloseEvent()
+  }
+})
+defineExpose({
+  toggle: toggleCollapse,
+  close: closeCollapse,
+  open: openCollapse,
+})
+onMounted(() => {
+  if (collapseRef.value) {
+    observer.observe(collapseRef.value, { attributes: true })
+  }
+})
+onBeforeUnmount(() => {
+  observer.disconnect()
+})
 </script>
 
 <template>
-  <div>
-    <button
-      :id="collapseId"
-      @click="handleToggleEvent"
-      class="hidden"
-      :accordion="accordion"
-      :visible="toggle"
-    ></button>
+  <div :accordion="accordion" :visible="toggle" ref="collapseRef">
     <transition
       name="collapse"
       tag="div"
       @enter="onEnter"
       @after-enter="onAfterEnter"
       @leave="onLeave"
-      class="overflow-hidden"
+      class="overflow-y-clip"
     >
       <div v-show="toggle">
         <div :class="[className]">

package/lib/collapse/index.types.ts

@@ -1,3 +1,3 @@
-export interface CollapseEvent extends Event {
+export interface CollapseEvent {
   visible: boolean
 }

package/lib/composables/index.ts

@@ -0,0 +1 @@
+export * from './observeVisible'

package/lib/composables/observeVisible.ts

@@ -0,0 +1,24 @@
+export const observeVisibleAttr = (fn: (...args: any[]) => void) => {
+  const observer = new MutationObserver((mutations) => {
+    let changed = false
+    for (let i = 0; i < mutations.length && !changed; i++) {
+      const mutation = mutations[i]
+      const mutationType = mutation.type
+      const mutationAttribute = mutation.attributeName
+      const mutationTarget = mutation.target
+      if (mutationType === 'attributes') {
+        changed = true
+      } else if (mutationAttribute === 'visible') {
+        changed = true
+      }
+      if (changed) {
+        const visibleAttr =
+          (mutationTarget as HTMLElement).getAttribute('visible') === 'true'
+            ? true
+            : false
+        fn(visibleAttr)
+      }
+    }
+  })
+  return observer
+}

package/lib/directives/index.ts

@@ -1,4 +1,8 @@
-import { Directive } from 'vue'
+import { Directive, DirectiveBinding, h, render, createVNode } from 'vue'
+import generateClass from '../..'
+import type { Direction } from '../..'
+import tooltip from '../tooltip'
+import type { TooltipElementType, TooltipValueType } from './index.types'
 
 export const vClickOutside: Directive = {
   mounted(el, binding) {
@@ -27,7 +31,15 @@ export const vToggle: Directive = {
       } else {
         target = document.getElementById(binding.arg as string)!
       }
-      target.click()
+      if (!target) {
+        return
+      }
+      if (target.hasAttribute('visible') === false) {
+        return
+      }
+      const targetAttr = target.getAttribute('visible')
+      const attrAfterToggle = targetAttr === 'true' ? 'false' : 'true'
+      target.setAttribute('visible', attrAfterToggle)
       return
     }
     el.addEventListener('click', el.__ClickToggleHandler)
@@ -39,6 +51,37 @@ export const vToggle: Directive = {
 
 export const vCollapse: Directive = {
   mounted(el, binding) {
+    // el.__HandleToggler = (event: Event): void => {
+    //   const eTarget = event.target as HTMLElement
+    //   let target: HTMLElement
+    //   if (eTarget.tagName === 'A') {
+    //     const targetId = eTarget.getAttribute('href')
+    //     const formattedTargetId =
+    //       targetId?.charAt(0) === '#' ? targetId.substring(1) : targetId
+    //     target = document.getElementById(formattedTargetId as string)!
+    //   } else {
+    //     target = document.getElementById(binding.arg as string) as HTMLElement
+    //   }
+    //   if (!target.hasAttribute('accordion')) {
+    //     // run when it is not accordion component case
+    //     target.click()
+    //     return
+    //   }
+    //   const accordionName = target.getAttribute('accordion')
+    //   const accordionList: NodeListOf<HTMLElement> = document.querySelectorAll(
+    //     `button[accordion="${accordionName}"]`
+    //   )
+    //   // loop through each accordion items and handle reaction for each case
+    //   for (let i = 0; i < accordionList.length; i++) {
+    //     const isVisible = accordionList[i].getAttribute('visible')
+    //     if (accordionList[i].id !== target.id && isVisible === 'true') {
+    //       accordionList[i].click()
+    //     }
+    //     if (accordionList[i].id === target.id) {
+    //       accordionList[i].click()
+    //     }
+    //   }
+    // }
     el.__HandleToggler = (event: Event): void => {
       const eTarget = event.target as HTMLElement
       let target: HTMLElement
@@ -50,23 +93,36 @@ export const vCollapse: Directive = {
       } else {
         target = document.getElementById(binding.arg as string) as HTMLElement
       }
+      if (!target) {
+        return
+      }
+      if (target.hasAttribute('visible') === false) {
+        return
+      }
       if (!target.hasAttribute('accordion')) {
         // run when it is not accordion component case
-        target.click()
+        const targetAttr = target.getAttribute('visible')
+        const attrAfterToggle = targetAttr === 'true' ? 'false' : 'true'
+        target.setAttribute('visible', attrAfterToggle)
+        // target.click()
         return
       }
       const accordionName = target.getAttribute('accordion')
       const accordionList: NodeListOf<HTMLElement> = document.querySelectorAll(
-        `button[accordion="${accordionName}"]`
+        `div[accordion="${accordionName}"]`
       )
       // loop through each accordion items and handle reaction for each case
       for (let i = 0; i < accordionList.length; i++) {
         const isVisible = accordionList[i].getAttribute('visible')
         if (accordionList[i].id !== target.id && isVisible === 'true') {
-          accordionList[i].click()
+          accordionList[i].setAttribute('visible', 'false')
+          // accordionList[i].click()
         }
         if (accordionList[i].id === target.id) {
-          accordionList[i].click()
+          const targetAttr = target.getAttribute('visible')
+          const attrAfterToggle = targetAttr === 'true' ? 'false' : 'true'
+          target.setAttribute('visible', attrAfterToggle)
+          // accordionList[i].click()
         }
       }
     }
@@ -76,3 +132,109 @@ export const vCollapse: Directive = {
     el.removeEventListener('click', el.__HandleToggler)
   },
 }
+
+export const vTooltip: Directive<TooltipElementType, TooltipValueType> = {
+  mounted(el, binding) {
+    el.__HandleTooltip = (
+      el: HTMLElement,
+      binding: DirectiveBinding<TooltipValueType>
+    ) => {
+      // parent element class
+      el.classList.add('relative', 'group', 'overflow-visible')
+
+      // handle tooltip text
+      let tooltipText: string | null | undefined
+      if (el.hasAttribute('title')) {
+        tooltipText = el.getAttribute('title')
+      }
+      if (
+        !el.hasAttribute('title') &&
+        typeof binding.value !== 'undefined' &&
+        typeof binding.value === 'string'
+      ) {
+        tooltipText = binding.value
+      }
+      if (
+        !el.hasAttribute('title') &&
+        typeof binding.value !== 'undefined' &&
+        typeof binding.value !== 'string' &&
+        typeof binding.value.title === 'string'
+      ) {
+        tooltipText = binding.value.title
+      }
+      // handle tooltip color
+      let tooltipColor: string | null | undefined
+      if (el.hasAttribute('color')) {
+        tooltipColor = el.getAttribute('color')
+      }
+      if (
+        !el.hasAttribute('color') &&
+        typeof binding.value !== 'undefined' &&
+        typeof binding.value !== 'string' &&
+        typeof binding.value.color === 'string'
+      ) {
+        tooltipColor = binding.value.color
+      }
+      // handle tooltip text color
+      let tooltipTextColor: string | null | undefined
+      if (el.hasAttribute('text-color')) {
+        tooltipTextColor = el.getAttribute('text-color')
+      }
+      if (
+        !el.hasAttribute('text-color') &&
+        typeof binding.value !== 'undefined' &&
+        typeof binding.value !== 'string' &&
+        typeof binding.value.textColor === 'string'
+      ) {
+        tooltipTextColor = binding.value.textColor
+      }
+      // handle tooltip width
+      let tooltipWidth: string | number | null | undefined
+      if (el.hasAttribute('width')) {
+        tooltipWidth = el.getAttribute('width')
+      }
+      if (
+        !el.hasAttribute('width') &&
+        typeof binding.value !== 'undefined' &&
+        typeof binding.value !== 'string' &&
+        typeof binding.value.width === ('number' || 'string')
+      ) {
+        tooltipWidth = binding.value.width
+      }
+      // handle custom class names
+      let tooltipClassName: string | undefined
+      if (
+        typeof binding.value !== 'undefined' &&
+        typeof binding.value !== 'string' &&
+        typeof binding.value.className === 'string'
+      ) {
+        tooltipClassName = binding.value.className
+      }
+      let tooltipDirection: Direction | undefined
+      const modifierArray: string[] = Object.keys(binding.modifiers)
+      // handle direction
+      if (modifierArray.length > 0) {
+        tooltipDirection = modifierArray[0] as Direction
+      }
+      const vnode = createVNode(tooltip, {
+        direction: tooltipDirection,
+        title: tooltipText,
+        color: tooltipColor,
+        textColor: tooltipTextColor,
+        width: tooltipWidth,
+        customClass: tooltipClassName,
+      })
+      render(vnode, el)
+    }
+    el.__UnmountTooltip = (el: Element) => {
+      render(null, el)
+    }
+    el.__HandleTooltip(el, binding)
+  },
+  updated(el, binding) {
+    el.__HandleTooltip(el, binding)
+  },
+  unmounted(el) {
+    el.__UnmountTooltip(el)
+  },
+}

package/lib/directives/index.types.ts

@@ -0,0 +1,15 @@
+import type { ColorPalette } from '../..'
+
+export interface TooltipElementType extends HTMLElement {
+  __HandleTooltip: Function
+  __UnmountTooltip: Function
+}
+
+interface TooltipValueObjectType {
+  title?: string
+  color?: ColorPalette
+  textColor?: ColorPalette
+  width?: number | string
+  className?: string
+}
+export type TooltipValueType = TooltipValueObjectType | string

package/lib/modal/Modal.vue

@@ -1,14 +1,21 @@
 <script setup lang="ts">
-import { ref, computed, watch, Transition } from 'vue'
+import {
+  ref,
+  computed,
+  watch,
+  Transition,
+  onMounted,
+  onBeforeUnmount,
+} from 'vue'
 import generateClass, {
   ColorPalette,
   vClickOutside,
   VerticalAlignment,
 } from '../../'
+import { observeVisibleAttr } from '../composables'
 
 const props = withDefaults(
   defineProps<{
-    modalId: string
     title?: string
     titleColor?: ColorPalette
     className?: string
@@ -31,23 +38,31 @@ const props = withDefaults(
   }
 )
 
-const emit = defineEmits(['toggle', 'close'])
+const emit = defineEmits(['open', 'close'])
+const modalRef = ref<HTMLElement | undefined>()
 const toggle = ref<boolean>(props.visible)
 const toggleComplete = ref<boolean>(false)
 
-const handleToggleEvent = (e: Event): void => {
+// const handleToggleEvent = (): void => {
+//   toggle.value = !toggle.value
+// }
+const toggleModal = (): void => {
   toggle.value = !toggle.value
-  emit('toggle', e)
 }
 const openModal = (): void => {
   toggle.value = true
 }
-const closeModal = (e: Event): void => {
+const closeModal = (): void => {
   if (toggleComplete.value === true) {
     toggle.value = false
-    emit('close', e)
   }
 }
+const emitOpenEvent = () => {
+  emit('open', { visible: true })
+}
+const emitCloseEvent = () => {
+  emit('close', { visible: false })
+}
 const handlePlacementVar = computed(() => {
   let placementVariable: number
   if (props.placement === 'top') {
@@ -70,22 +85,44 @@ const onAfterEnter = () => {
 const onAfterLeave = () => {
   toggleComplete.value = false
 }
+
+// set nutation observer watching `visible` attribute in element
+const handleVisibility = (visible: boolean = false) => {
+  toggle.value = visible
+}
+const observer = observeVisibleAttr(handleVisibility)
+
 watch(
   () => props.visible,
   (newValue) => {
     toggle.value = newValue
   }
 )
+watch(toggle, (newValue) => {
+  if (newValue === true) {
+    emitOpenEvent()
+  } else if (newValue === false && toggleComplete.value === true) {
+    emitCloseEvent()
+  }
+})
 defineExpose({
-  toggle: handleToggleEvent,
+  toggle: toggleModal,
   close: closeModal,
   open: openModal,
 })
+onMounted(() => {
+  if (modalRef.value) {
+    observer.observe(modalRef.value, { attributes: true })
+  }
+})
+onBeforeUnmount(() => {
+  observer.disconnect()
+})
 </script>
 
 <template>
-  <div :style="handlePlacementVar">
-    <button :id="modalId" @click="handleToggleEvent" class="hidden"></button>
+  <div :style="handlePlacementVar" :visible="toggle" ref="modalRef">
+    <!-- <button :id="modalId" @click="handleToggleEvent" class="hidden"></button> -->
     <Transition name="fade" appear tag="div" v-if="!noBackdrop">
       <section
         v-if="toggle"

package/lib/sidebar/Sidebar.vue

@@ -1,10 +1,17 @@
 <script setup lang="ts">
-import { ref, computed, watch, Transition } from 'vue'
+import {
+  ref,
+  computed,
+  watch,
+  Transition,
+  onMounted,
+  onBeforeUnmount,
+} from 'vue'
 import generateClass, { ColorPalette, vClickOutside, DirectionX } from '../../'
+import { observeVisibleAttr } from '../composables'
 
 const props = withDefaults(
   defineProps<{
-    sidebarId: string
     title?: string
     titleColor?: ColorPalette
     className?: string
@@ -29,15 +36,18 @@ const props = withDefaults(
   }
 )
 
-const emit = defineEmits(['toggle', 'close'])
+const emit = defineEmits(['open', 'close'])
 const toggle = ref<boolean>(props.visible)
 const toggleComplete = ref<boolean>(false)
+const sidebarRef = ref<HTMLElement | undefined>()
 const headerRef = ref<HTMLElement>()
 const footerRef = ref<HTMLElement>()
 
 const handleToggleEvent = (e: Event): void => {
   toggle.value = !toggle.value
-  emit('toggle', e)
+}
+const toggleSidebar = (): void => {
+  toggle.value = !toggle.value
 }
 const openSidebar = (): void => {
   toggle.value = true
@@ -45,9 +55,14 @@ const openSidebar = (): void => {
 const closeSidebar = (e: Event): void => {
   if (toggleComplete.value === true) {
     toggle.value = false
-    emit('close', e)
   }
 }
+const emitOpenEvent = () => {
+  emit('open', { visible: true })
+}
+const emitCloseEvent = () => {
+  emit('close', { visible: false })
+}
 const handleStyleVariables = computed(() => {
   return {
     '--sidebar-width': `${props.width}px`,
@@ -75,22 +90,44 @@ const onAfterEnter = () => {
 const onAfterLeave = () => {
   toggleComplete.value = false
 }
+
+// set nutation observer watching `visible` attribute in element
+const handleVisibility = (visible: boolean = false) => {
+  toggle.value = visible
+}
+const observer = observeVisibleAttr(handleVisibility)
+
 watch(
   () => props.visible,
   (newValue) => {
     toggle.value = newValue
   }
 )
+watch(toggle, (newValue) => {
+  if (newValue === true) {
+    emitOpenEvent()
+  } else if (newValue === false && toggleComplete.value === true) {
+    emitCloseEvent()
+  }
+})
 defineExpose({
-  toggle: handleToggleEvent,
+  toggle: toggleSidebar,
   open: openSidebar,
   close: closeSidebar,
 })
+onMounted(() => {
+  if (sidebarRef.value) {
+    observer.observe(sidebarRef.value, { attributes: true })
+  }
+})
+onBeforeUnmount(() => {
+  observer.disconnect()
+})
 </script>
 
 <template>
-  <div :style="handleStyleVariables">
-    <button :id="sidebarId" @click="handleToggleEvent" class="hidden"></button>
+  <div :style="handleStyleVariables" :visible="toggle" ref="sidebarRef">
+    <!-- <button :id="sidebarId" @click="handleToggleEvent" class="hidden"></button> -->
     <Transition name="fade" appear tag="div" v-if="!noBackdrop">
       <section
         v-if="toggle"

package/lib/tooltip/index.ts

@@ -0,0 +1,75 @@
+import { PropType, defineComponent, h, computed } from 'vue'
+import type { Direction, ColorPalette } from '../../'
+import generateClass from '../../'
+
+export default defineComponent({
+  props: {
+    direction: {
+      type: String as PropType<Direction>,
+      default: 'right',
+    },
+    color: {
+      type: String as PropType<ColorPalette>,
+      default: 'dark-3',
+    },
+    textColor: {
+      type: String as PropType<ColorPalette>,
+      default: 'white',
+    },
+    width: {
+      type: [Number, String],
+      default: 80,
+    },
+    customClass: {
+      type: String,
+      default: '',
+    },
+    title: {
+      type: String,
+      required: true,
+    },
+  },
+  setup(props) {
+    const defaultClassList: string =
+      'invisible opacity-0 group-hover:visible group-hover:opacity-100 z-[100] tooltip'
+    const colorClass = computed<string>(() => {
+      /**
+       * @param {ColorPalette} color - props
+       * @param {ColorPalette} textolor - props
+       */
+      const { color, textColor } = props
+      const classArray: string[] = [
+        generateClass('BGCOLOR', color),
+        generateClass('TEXTCOLOR', textColor),
+      ]
+      return classArray.join(' ')
+    })
+    const tooltipWidth = computed(() => {
+      return { width: `${props.width}px` }
+    })
+    const tooltipDirection = computed<string>(() => {
+      switch (props.direction) {
+        case 'left':
+          return 'tooltip-left'
+        case 'top':
+          return 'tooltip-top'
+        case 'bottom':
+          return 'tooltip-bottom'
+        default:
+          return 'tooltip-right'
+      }
+    })
+    return () =>
+      h('div', {
+        class: [
+          defaultClassList,
+          props.customClass,
+          tooltipDirection.value,
+          colorClass.value,
+        ],
+        role: 'tooltip',
+        innerHTML: props.title,
+        style: [tooltipWidth.value],
+      })
+  },
+})

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bobbykim/manguito-theme",
-  "version": "0.5.0",
+  "version": "0.7.0",
   "description": "main theme file for manguito components library. Other MCL components will need to import this file to run.",
   "type": "module",
   "main": "index.ts",
@@ -17,5 +17,5 @@
     "url": "https://github.com/bobbykim89/manguito-component-library.git"
   },
   "license": "MIT",
-  "gitHead": "c095c399687fa416347eaec8a6d2003a39fc19ac"
+  "gitHead": "576d9aa7a55803b0dd7391bf81d00081848135ec"
 }

package/theme/theme.ts

@@ -11,7 +11,7 @@ import type {
   Range,
   OpacityRange,
   SpacingLevel,
-  Position,
+  Alignment as Position,
 } from './theme.types'
 
 export type ColorClass = {

package/themeVariables.cjs

@@ -141,6 +141,48 @@ const mclTheme = plugin.withOptions(
           ),
         }
       }, {})
+      const tooltipColors = Object.keys(colors).reduce((accumulator, key) => {
+        // const invalidKeys = ['current', 'transparent', 'inherit']
+        // if (invalidKeys.includes(key)) {
+        //   return
+        // }
+        if (typeof colors[key] === 'string') {
+          return {
+            ...accumulator,
+            [`.tooltip.tooltip-top.bg-${e(key)}`]: {
+              [`@apply after:border-t-${key}`]: {},
+            },
+            [`.tooltip.tooltip-bottom.bg-${e(key)}`]: {
+              [`@apply after:border-b-${key}`]: {},
+            },
+            [`.tooltip.tooltip-right.bg-${e(key)}`]: {
+              [`@apply after:border-r-${key}`]: {},
+            },
+            [`.tooltip.tooltip-left.bg-${e(key)}`]: {
+              [`@apply after:border-l-${key}`]: {},
+            },
+          }
+        }
+        const colorShades = Object.keys(colors[key])
+        return {
+          ...accumulator,
+          ...colorShades.reduce((acc, level) => ({
+            ...acc,
+            [`.tooltip.tooltip-top.bg-${e(key)}-${level}`]: {
+              [`@apply after:border-t-${key}-${level}`]: {},
+            },
+            [`.tooltip.tooltip-bottom.bg-${e(key)}-${level}`]: {
+              [`@apply after:border-b-${key}-${level}`]: {},
+            },
+            [`.tooltip.tooltip-right.bg-${e(key)}-${level}`]: {
+              [`@apply after:border-r-${key}-${level}`]: {},
+            },
+            [`.tooltip.tooltip-left.bg-${e(key)}-${level}`]: {
+              [`@apply after:border-l-${key}-${level}`]: {},
+            },
+          })),
+        }
+      }, {})
 
       addBase({
         body: {
@@ -417,11 +459,80 @@ const mclTheme = plugin.withOptions(
               left: '0',
             },
           },
+        '.tooltip': {
+          '@apply font-normal text-sm transition-opacity duration-200 p-2xs absolute rounded text-center drop-shadow-md':
+            {},
+        },
+        '.tooltip.tooltip-top': {
+          left: '50%',
+          bottom: '110%',
+          transform: 'translateX(-50%)',
+          '&::after': {
+            content: '" "',
+            position: 'absolute',
+            top: '100%',
+            left: '50%',
+            'margin-left': '-5px',
+            'border-width': '5px',
+            'border-style': 'solid',
+          },
+          '@apply after:border-t-dark-3 after:border-x-transparent after:border-b-transparent':
+            {},
+        },
+        '.tooltip.tooltip-bottom': {
+          left: '50%',
+          top: '110%',
+          transform: 'translateX(-50%)',
+          '&::after': {
+            content: '" "',
+            position: 'absolute',
+            bottom: '100%',
+            left: '50%',
+            'margin-left': '-5px',
+            'border-width': '5px',
+            'border-style': 'solid',
+          },
+          '@apply after:border-t-transparent after:border-x-transparent after:border-b-dark-3':
+            {},
+        },
+        '.tooltip.tooltip-left': {
+          top: '50%',
+          right: '110%',
+          transform: 'translateY(-50%)',
+          '&::after': {
+            content: '" "',
+            position: 'absolute',
+            top: '50%',
+            left: '100%',
+            'margin-top': '-5px',
+            'border-width': '5px',
+            'border-style': 'solid',
+          },
+          '@apply after:border-y-transparent after:border-r-transparent after:border-l-dark-3':
+            {},
+        },
+        '.tooltip.tooltip-right': {
+          top: '50%',
+          left: '110%',
+          transform: 'translateY(-50%)',
+          '&::after': {
+            content: '" "',
+            position: 'absolute',
+            top: '50%',
+            right: '100%',
+            'margin-top': '-5px',
+            'border-width': '5px',
+            'border-style': 'solid',
+          },
+          '@apply after:border-y-transparent after:border-l-transparent after:border-r-dark-3':
+            {},
+        },
       })
 
       addUtilities(listColors)
       addUtilities(btnColors)
       addUtilities(linkColors)
+      addUtilities(tooltipColors)
     }
   },
   (options = {}) => {

package/tsconfig.json

@@ -0,0 +1,8 @@
+{
+  "extends": "../../../tsconfig.json",
+  "include": ["./**/*.vue", "./**/*.ts"],
+  "compilerOptions": {
+    "declaration": true,
+    "emitDeclarationOnly": true
+  }
+}