{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "tooltip",
  "dependencies": [
    "@radix-ui/react-tooltip"
  ],
  "devDependencies": [
    "sass"
  ],
  "registryDependencies": [
    "https://powui.dev/r/utils.json",
    "https://powui.dev/r/theme.json"
  ],
  "files": [
    {
      "path": "src/components/ui/tooltip.tsx",
      "content": "\"use client\";\n\nimport * as React from \"react\";\nimport * as TooltipPrimitive from \"@radix-ui/react-tooltip\";\n\nimport { cn } from \"@/lib/utils\";\n\nimport styles from \"./tooltip.module.scss\";\n\nfunction TooltipProvider({\n  delayDuration = 0,\n  ...props\n}: React.ComponentProps<typeof TooltipPrimitive.Provider>) {\n  return (\n    <TooltipPrimitive.Provider\n      data-slot=\"tooltip-provider\"\n      delayDuration={delayDuration}\n      {...props}\n    />\n  );\n}\n\nfunction Tooltip({\n  ...props\n}: React.ComponentProps<typeof TooltipPrimitive.Root>) {\n  return (\n    <TooltipProvider>\n      <TooltipPrimitive.Root data-slot=\"tooltip\" {...props} />\n    </TooltipProvider>\n  );\n}\n\nfunction TooltipTrigger({\n  ...props\n}: React.ComponentProps<typeof TooltipPrimitive.Trigger>) {\n  return <TooltipPrimitive.Trigger data-slot=\"tooltip-trigger\" {...props} />;\n}\n\nfunction TooltipContent({\n  className,\n  sideOffset = 0,\n  children,\n  shape,\n  arrowClassName,\n  ...props\n}: React.ComponentProps<typeof TooltipPrimitive.Content> & {\n  shape?: \"elliptical\" | \"square\";\n  arrowClassName?: string;\n}) {\n  return (\n    <TooltipPrimitive.Portal>\n      <TooltipPrimitive.Content\n        data-slot=\"tooltip-content\"\n        sideOffset={sideOffset}\n        {...props}\n      >\n        <div\n          className={cn(\n            shape === \"elliptical\" ? \"clip-path-ellipse\" : \"rounded-full\",\n            \"bg-primary text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-fit origin-(--radix-tooltip-content-transform-origin) rounded-md px-3 py-1.5 text-xs text-balance\",\n            className\n          )}\n        >\n          {children}\n        </div>\n      </TooltipPrimitive.Content>\n    </TooltipPrimitive.Portal>\n  );\n}\n\nconst BubbleSvg = ({ bubblePath = \"\" }: { bubblePath: string }) => {\n  const [pathRef, setPathRef] = React.useState<SVGPathElement | null>(null);\n\n  const pathLength = React.useMemo(() => {\n    if (pathRef) {\n      return pathRef.getTotalLength();\n    }\n    return 0;\n  }, [pathRef]);\n\n  const bubbleArc = React.useMemo(() => {\n    if (bubblePath === \"arc\") {\n      return \"M 50 0 Q 70 60 0 100\";\n    }\n    if (bubblePath === \"normal\") {\n      return \"M 50 0 L 50 100\";\n    }\n    return bubblePath; // Use custom path if provided\n  }, [bubblePath]);\n\n  const bubbles = React.useMemo(() => {\n    if (!pathLength) return null;\n    const bubbleCount = 3;\n    const firstBubbleRadius = 8;\n    const radiusDiff = 5;\n    const animationTime = 300;\n    const lastBubbleRadius = firstBubbleRadius + (bubbleCount - 1) * radiusDiff;\n\n    const radiusOfAllBubbles = Array.from(\n      { length: bubbleCount },\n      (_, i) => firstBubbleRadius + i * radiusDiff\n    ).reduce((acc, r) => acc + r, 0);\n\n    const safetyDistanceOnBothEnds = 5;\n\n    const distanceBetweenBubbles =\n      (pathLength - 2 * radiusOfAllBubbles - 2 * safetyDistanceOnBothEnds) /\n      (bubbleCount - 1);\n\n    const allBubblesPositions: number[] = [];\n\n    Array.from({ length: bubbleCount }, (_, i) => {\n      const currentBubbleRadius = lastBubbleRadius - i * radiusDiff;\n      let position = currentBubbleRadius;\n      if (i > 0) {\n        const prevBubbleRadius = currentBubbleRadius + radiusDiff;\n        position +=\n          allBubblesPositions[i - 1] +\n          prevBubbleRadius +\n          distanceBetweenBubbles;\n      } else {\n        position += safetyDistanceOnBothEnds;\n      }\n      allBubblesPositions.push(position);\n    });\n\n    return allBubblesPositions.map((position, index) => (\n      <circle\n        key={index}\n        className={cn(styles.bub, styles.bubble)}\n        r={firstBubbleRadius + (bubbleCount - 1 - index) * radiusDiff}\n      >\n        <animateMotion\n          path={bubbleArc}\n          dur={`${animationTime}ms`}\n          end={`${(position / pathLength) * animationTime}ms`}\n          fill=\"freeze\"\n        />\n      </circle>\n    ));\n  }, [bubbleArc, pathLength]);\n\n  const bubbleSVG = React.useMemo(() => {\n    return (\n      <svg\n        width=\"50\"\n        height=\"50\"\n        viewBox=\"0 0 100 100\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        aria-hidden=\"true\"\n        className=\"absolute top-full left-1/2 -translate-x-1/2 \"\n      >\n        <path d={bubbleArc} fill=\"none\" stroke=\"none\" ref={setPathRef} />\n        {/* <!-- bubbles sampled along the curve --> */}\n        {bubbles}\n      </svg>\n    );\n  }, [bubbleArc, bubbles]);\n\n  return bubbleSVG;\n};\n\nconst TooltipContainer = ({\n  triggerContent = \"Hover me\",\n  content = \"Tooltip content\",\n  className = \"\",\n  arrowClassName = \"\",\n  side = \"top\",\n  sideOffset = 20,\n  type = \"normal\",\n  bubblePath = \"normal\",\n}: {\n  triggerContent?: React.ReactNode;\n  content?: React.ReactNode;\n  className?: string;\n  arrowClassName?: string;\n  side?: TooltipPrimitive.TooltipContentProps[\"side\"];\n  sideOffset?: TooltipPrimitive.TooltipContentProps[\"sideOffset\"];\n  type?: \"normal\" | \"bubbles\";\n  bubblePath?: \"normal\" | \"arc\" | string;\n}) => {\n  let adjustedSideOffset = sideOffset;\n  if (side === \"left\" || side === \"right\") {\n    adjustedSideOffset += 12; // Adjust for horizontal sides\n  }\n\n  return (\n    <Tooltip>\n      <TooltipTrigger>{triggerContent}</TooltipTrigger>\n      <TooltipContent\n        side={side}\n        className={cn(\n          \"relative bg-popover border-4 border-foreground text-popover-foreground font-comic rounded-2xl px-4 py-3 shadow-[4px_4px_0px_var(--foreground)]\",\n          styles.bounceMount,\n          className\n        )}\n        sideOffset={adjustedSideOffset}\n      >\n        {content}\n        {type === \"normal\" && (\n          <div\n            className={cn(\n              side === \"top\" && \"translate-y-full -translate-x-1/2 left-1/2\",\n              side === \"bottom\" &&\n                \"rotate-180 -translate-x-1/2 left-1/2 top-0 -translate-y-full\",\n              side === \"right\" &&\n                \"rotate-90 top-1/2 -translate-y-1/2 right-full -translate-x-1/2\",\n              side === \"left\" &&\n                \"-rotate-90 top-1/2 -translate-y-1/2 left-full translate-x-1/2\",\n              styles.comicArrow,\n              arrowClassName\n            )}\n          />\n        )}\n        {type === \"bubbles\" && <BubbleSvg bubblePath={bubblePath} />}\n      </TooltipContent>\n    </Tooltip>\n  );\n};\n\nexport { TooltipContainer as Tooltip, TooltipContent, TooltipProvider, TooltipTrigger };\n",
      "type": "registry:ui"
    },
    {
      "path": "src/components/ui/tooltip.module.scss",
      "content": ".comicArrow {\n  position: absolute;\n  bottom: 0;\n  height: 0;\n  width: 0;\n  border-right: 10px solid transparent;\n  border-left: 10px solid transparent;\n  border-top: 30px solid black;\n  &:before {\n    content: \"\";\n    display: block;\n    translate: -50% calc(-100% - 10px);\n    border-right: 10px solid transparent;\n    border-left: 10px solid transparent;\n    border-top: 30px solid white;\n  }\n}\n\n.bub {\n  fill: #ffffff;\n  stroke: black;\n  stroke-width: 1.5;\n}\n\n@keyframes bounceScale {\n  0% {\n    scale: 0;\n  }\n  70% {\n    scale: 1.2;\n  }\n  80% {\n    scale: 1.2;\n  }\n  100% {\n    scale: 1;\n  }\n}\n\n.bounceMount {\n  animation: bounceScale 0.2s ease-in-out;\n}\n",
      "type": "registry:file",
      "target": "components/ui/tooltip.module.scss"
    }
  ],
  "type": "registry:ui"
}