{"$schema":"https://shadcn-vue.com/schema/registry-item.json","name":"tooltip","type":"registry:component","title":"Tooltip","description":"A popup that reveals information when hovering over an element.","files":[{"path":"tooltip/Tooltip.vue","type":"registry:component","content":"<template>\r\n  <TooltipProvider\r\n    :delay-duration=\"500\"\r\n    :disabled=\"isDisabled\"\r\n  >\r\n    <TooltipRoot ref=\"tooltipRootRef\">\r\n      <TooltipTrigger as-child>\r\n        <slot />\r\n      </TooltipTrigger>\r\n\r\n      <TooltipPortal>\r\n        <TooltipContent\r\n          v-if=\"shouldShowTooltip\"\r\n          :side=\"side\"\r\n          :arrow-padding=\"8\"\r\n          class=\"\r\n            bg-default\r\n            border border-accented\r\n            rounded\r\n            px-2\r\n            py-1\r\n            text-xs\r\n            text-highlighted\r\n            shadow-[0_1px_3px_0_rgba(0,0,0,0.10),0_1px_2px_0_rgba(0,0,0,0.06)]\"\r\n        >\r\n          <slot name=\"content\">\r\n            {{ text }}\r\n          </slot>\r\n\r\n          <TooltipArrow\r\n            v-if=\"arrow\"\r\n            :width=\"12\"\r\n            :height=\"6\"\r\n            class=\"fill-neutral-200\"\r\n            data-testid=\"tooltip-arrow\"\r\n          />\r\n        </TooltipContent>\r\n      </TooltipPortal>\r\n    </TooltipRoot>\r\n  </TooltipProvider>\r\n</template>\r\n\r\n<script setup lang=\"ts\">\r\nimport {\r\n  TooltipProvider,\r\n  TooltipRoot,\r\n  TooltipTrigger,\r\n  TooltipPortal,\r\n  TooltipContent,\r\n  TooltipArrow\r\n} from 'reka-ui'\r\nimport { computed, useTemplateRef } from 'vue'\r\n\r\nimport type { TooltipProps } from '@/lib/tooltip/TooltipProps.type'\r\n\r\nimport useTruncation from '@/composables/tooltip/useTruncation'\r\n\r\ndefineOptions({ name: 'MeTooltip' })\r\n\r\nconst props = withDefaults(defineProps<TooltipProps>(), {\r\n  side: 'top',\r\n  responsive: false\r\n})\r\n\r\nconst tooltipRootRef = useTemplateRef<{\r\n  $el: { nextElementSibling: HTMLElement; parentElement: HTMLElement }\r\n} | null>('tooltipRootRef')\r\n\r\nconst { shouldShowTooltip } = useTruncation(tooltipRootRef, {\r\n  responsive: props.responsive\r\n})\r\n\r\nconst isDisabled = computed(() => {\r\n  return props.disabled || !shouldShowTooltip.value\r\n})\r\n</script>\r\n"},{"path":"tooltip/TooltipProps.type.ts","type":"registry:lib","content":"export type TooltipProps = {\r\n  arrow?: boolean\r\n  disabled?: boolean\r\n  side?: 'top' | 'right' | 'bottom' | 'left'\r\n  text?: string\r\n  responsive?: boolean\r\n}\r\n"},{"path":"tooltip/useTruncation.ts","type":"registry:hook","content":"import { ref, computed, onMounted, watch, type Ref } from 'vue'\r\nimport { useResizeObserver, useMutationObserver, useDebounceFn } from '@vueuse/core'\r\n\r\ntype Options = {\r\n  responsive?: boolean\r\n}\r\n\r\nconst useTruncation = (\r\n  elRef: Ref<{ $el: { nextElementSibling: HTMLElement; parentElement: HTMLElement } } | null>,\r\n  options: Options = {}\r\n) => {\r\n  const target = ref<HTMLElement | null>(getTargetElement())\r\n  const isTruncated = ref<boolean>(false)\r\n\r\n  const { responsive = false }: Options = options\r\n  const debouncedCheck = useDebounceFn(checkTruncate, 250)\r\n\r\n  const shouldShowTooltip = computed(() => {\r\n    const hasTooltipOnTruncate = responsive && isTruncated.value\r\n\r\n    return hasTooltipOnTruncate || !responsive\r\n  })\r\n\r\n  watch(elRef, () => target.value = getTargetElement(), { flush: 'post' })\r\n\r\n  onMounted(() => {\r\n    if (responsive) {\r\n      useResizeObserver(target, debouncedCheck)\r\n      useMutationObserver(target, debouncedCheck, {\r\n        childList: true,\r\n        characterData: true\r\n      })\r\n    }\r\n  })\r\n\r\n  function getTargetElement() {\r\n    const rootElement = elRef.value?.$el\r\n    const targetElement = rootElement?.nextElementSibling || rootElement?.parentElement\r\n\r\n    return targetElement as HTMLElement\r\n  }\r\n\r\n  function checkTruncate() {\r\n    if (!target.value) return\r\n\r\n    isTruncated.value = target.value.offsetWidth < target.value.scrollWidth\r\n      || target.value.offsetHeight < target.value.scrollHeight\r\n  }\r\n\r\n  return {\r\n    shouldShowTooltip\r\n  }\r\n}\r\n\r\nexport default useTruncation\r\n"}],"registryDependencies":[],"dependencies":["reka-ui@^2.10.1","@vueuse/core@^14.2.1"]}