sigma-ui/__generated/registry-schemes/style-system/css/tooltip.json

CLI for SIGMA-UI components.

{
  "name": "tooltip",
  "dependencies": [],
  "registryDependencies": [],
  "files": [
    {
      "name": "Tooltip.vue",
      "content": "<script setup lang=\"ts\">\nimport { TooltipRoot, type TooltipRootEmits, type TooltipRootProps, useForwardPropsEmits } from 'reka-ui';\n\nconst props = defineProps<TooltipRootProps>();\nconst emits = defineEmits<TooltipRootEmits>();\n\nconst forwarded = useForwardPropsEmits(props, emits);\n</script>\n\n<template>\n  <TooltipRoot v-bind=\"forwarded\">\n    <slot />\n  </TooltipRoot>\n</template>\n"
    },
    {
      "name": "TooltipContent.vue",
      "content": "<script setup lang=\"ts\">\nimport { TooltipContent, type TooltipContentEmits, type TooltipContentProps, TooltipPortal, useForwardPropsEmits } from 'reka-ui';\n\ndefineOptions({\n  inheritAttrs: false,\n});\n\nconst props = withDefaults(defineProps<TooltipContentProps>(), {\n  sideOffset: 4,\n});\n\nconst emits = defineEmits<TooltipContentEmits>();\n\nconst forwarded = useForwardPropsEmits(props, emits);\n</script>\n\n<template>\n  <TooltipPortal>\n    <TooltipContent\n      v-bind=\"{ ...forwarded, ...$attrs }\"\n      class=\"sigma-ui-tooltip-content\"\n      :class=\"[$attrs.class]\"\n    >\n      <slot />\n    </TooltipContent>\n  </TooltipPortal>\n</template>\n\n<style>\n.sigma-ui-tooltip-content {\n  z-index: 50;\n  overflow: hidden;\n  padding: 0.375rem 0.75rem;\n  border: 1px solid hsl(var(--border));\n  border-radius: var(--radius-md);\n  animation: tooltip-in 150ms cubic-bezier(0.16, 1, 0.3, 1);\n  background-color: hsl(var(--popover));\n  box-shadow: 0 2px 4px rgb(0 0 0 / 10%);\n  color: hsl(var(--popover-foreground));\n  font-size: 0.875rem;\n}\n\n.sigma-ui-tooltip-content[data-side=\"bottom\"] {\n  animation: tooltip-in-bottom 150ms cubic-bezier(0.16, 1, 0.3, 1);\n}\n\n.sigma-ui-tooltip-content[data-side=\"top\"] {\n  animation: tooltip-in-top 150ms cubic-bezier(0.16, 1, 0.3, 1);\n}\n\n.sigma-ui-tooltip-content[data-side=\"left\"] {\n  animation: tooltip-in-left 150ms cubic-bezier(0.16, 1, 0.3, 1);\n}\n\n.sigma-ui-tooltip-content[data-side=\"right\"] {\n  animation: tooltip-in-right 150ms cubic-bezier(0.16, 1, 0.3, 1);\n}\n\n.sigma-ui-tooltip-content[data-state=\"closed\"] {\n  animation: tooltip-out 250ms cubic-bezier(0.16, 1, 0.3, 1);\n}\n\n@keyframes tooltip-in {\n  from {\n    opacity: 0;\n    transform: scale(0.95);\n  }\n\n  to {\n    opacity: 1;\n    transform: scale(1);\n  }\n}\n\n@keyframes tooltip-out {\n  from {\n    opacity: 1;\n    transform: scale(1);\n  }\n\n  to {\n    opacity: 0;\n    transform: scale(0.95);\n  }\n}\n\n@keyframes tooltip-in-bottom {\n  from {\n    opacity: 0;\n    transform: translateY(-0.5rem);\n  }\n\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n}\n\n@keyframes tooltip-in-top {\n  from {\n    opacity: 0;\n    transform: translateY(0.5rem);\n  }\n\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n}\n\n@keyframes tooltip-in-left {\n  from {\n    opacity: 0;\n    transform: translateX(0.5rem);\n  }\n\n  to {\n    opacity: 1;\n    transform: translateX(0);\n  }\n}\n\n@keyframes tooltip-in-right {\n  from {\n    opacity: 0;\n    transform: translateX(-0.5rem);\n  }\n\n  to {\n    opacity: 1;\n    transform: translateX(0);\n  }\n}\n</style>\n"
    },
    {
      "name": "TooltipProvider.vue",
      "content": "<script setup lang=\"ts\">\nimport { TooltipProvider, type TooltipProviderProps } from 'reka-ui';\n\nconst props = defineProps<TooltipProviderProps>();\n</script>\n\n<template>\n  <TooltipProvider v-bind=\"props\">\n    <slot />\n  </TooltipProvider>\n</template>\n"
    },
    {
      "name": "TooltipTrigger.vue",
      "content": "<script setup lang=\"ts\">\nimport { TooltipTrigger, type TooltipTriggerProps } from 'reka-ui';\n\nconst props = defineProps<TooltipTriggerProps>();\n</script>\n\n<template>\n  <TooltipTrigger v-bind=\"props\">\n    <slot />\n  </TooltipTrigger>\n</template>\n"
    },
    {
      "name": "index.ts",
      "content": "export { default as Tooltip } from './Tooltip.vue';\nexport { default as TooltipContent } from './TooltipContent.vue';\nexport { default as TooltipTrigger } from './TooltipTrigger.vue';\nexport { default as TooltipProvider } from './TooltipProvider.vue';\n"
    }
  ],
  "type": "components:ui"
}