{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "animated-tooltip",
  "title": "Animated Tooltip",
  "description": "Tooltip that animates in on hover or focus with a scale-and-fade.",
  "dependencies": [
    "@vllnt/ui@^0.2.1"
  ],
  "registryDependencies": [],
  "files": [
    {
      "path": "registry/default/animated-tooltip/animated-tooltip.tsx",
      "content": "\"use client\";\n\nimport * as React from \"react\";\n\nimport { cn } from \"@vllnt/ui\";\n\n/** Side of the trigger the tooltip appears on. */\nexport type TooltipSide = \"bottom\" | \"top\";\n\n/** Props for {@link AnimatedTooltip}. */\nexport type AnimatedTooltipProps = React.ComponentPropsWithoutRef<\"div\"> & {\n  /** Trigger element that reveals the tooltip on hover or focus. */\n  children: React.ReactNode;\n  /** Content shown inside the tooltip bubble. */\n  content: React.ReactNode;\n  /** Side of the trigger the tooltip appears on. Defaults to `\"top\"`. */\n  side?: TooltipSide;\n};\n\nfunction Tooltip({\n  content,\n  side,\n}: {\n  content: React.ReactNode;\n  side: TooltipSide;\n}) {\n  return (\n    <div\n      className={cn(\n        \"absolute left-1/2 z-50 -translate-x-1/2 animate-in fade-in-0 zoom-in-95 whitespace-nowrap rounded-md border border-border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md\",\n        side === \"top\" ? \"bottom-full mb-2\" : \"top-full mt-2\",\n      )}\n      role=\"tooltip\"\n    >\n      {content}\n    </div>\n  );\n}\n\n/**\n * Trigger that reveals a tooltip bubble on hover or focus.\n *\n * The bubble scales and fades in; closing unmounts it.\n *\n * @example\n * ```tsx\n * <AnimatedTooltip content=\"Copied!\"><button>Copy</button></AnimatedTooltip>\n * ```\n */\nexport const AnimatedTooltip = ({\n  children,\n  className,\n  content,\n  ref,\n  side = \"top\",\n  ...props\n}: AnimatedTooltipProps & { ref?: React.Ref<HTMLDivElement> }) => {\n  const [open, setOpen] = React.useState(false);\n\n  return (\n    <div\n      className={cn(\"relative inline-flex\", className)}\n      onBlur={() => {\n        setOpen(false);\n      }}\n      onFocus={() => {\n        setOpen(true);\n      }}\n      onPointerEnter={() => {\n        setOpen(true);\n      }}\n      onPointerLeave={() => {\n        setOpen(false);\n      }}\n      ref={ref}\n      {...props}\n    >\n      {children}\n      {open ? <Tooltip content={content} side={side} /> : undefined}\n    </div>\n  );\n};\nAnimatedTooltip.displayName = \"AnimatedTooltip\";\n",
      "type": "registry:component"
    }
  ],
  "type": "registry:component",
  "version": "0.2.1",
  "stability": "stable"
}