{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "tooltip",
  "title": "Tooltip",
  "description": "Tooltip with direction (top/bottom/left/right) and optional CTA action.",
  "dependencies": [
    "@radix-ui/react-tooltip"
  ],
  "files": [
    {
      "path": "registry/components/tooltip.tsx",
      "content": "\"use client\";\n\nimport * as React from \"react\";\nimport * as TooltipPrimitive from \"@radix-ui/react-tooltip\";\nimport { cn } from \"@/lib/utils\";\n\ntype TooltipDirection = \"top\" | \"bottom\" | \"left\" | \"right\";\n\nexport type TooltipProps = {\n  direction?: TooltipDirection;\n  withCta?: boolean;\n  content: React.ReactNode;\n  ctaText?: string;\n  onCtaClick?: () => void;\n  trigger: React.ReactNode;\n  open?: boolean;\n  defaultOpen?: boolean;\n  onOpenChange?: (open: boolean) => void;\n  className?: string;\n};\n\nexport function Tooltip({\n  direction = \"top\",\n  withCta = false,\n  content,\n  ctaText = \"Learn more\",\n  onCtaClick,\n  trigger,\n  open,\n  defaultOpen,\n  onOpenChange,\n  className,\n}: TooltipProps) {\n  return (\n    <TooltipPrimitive.Provider delayDuration={120}>\n      <TooltipPrimitive.Root\n        open={open}\n        defaultOpen={defaultOpen}\n        onOpenChange={onOpenChange}\n      >\n        <TooltipPrimitive.Trigger asChild>{trigger}</TooltipPrimitive.Trigger>\n        <TooltipPrimitive.Portal>\n          <TooltipPrimitive.Content\n            side={direction}\n            align=\"end\"\n            sideOffset={10}\n            className={cn(\n              \"z-50 max-w-72 rounded-lg border border-gray-700 bg-gray-800 px-3 py-2.5 text-white shadow-[0_6px_16px_rgba(24,24,27,0.28)]\",\n              \"data-[state=delayed-open]:animate-in data-[state=closed]:animate-out\",\n              \"data-[state=closed]:fade-out-0 data-[state=delayed-open]:fade-in-0\",\n              \"data-[side=bottom]:slide-in-from-top-1 data-[side=left]:slide-in-from-right-1\",\n              \"data-[side=right]:slide-in-from-left-1 data-[side=top]:slide-in-from-bottom-1\",\n              className,\n            )}\n          >\n            <div className=\"flex flex-col gap-1.5\">\n              <div className=\"type-b3-regular !text-white\">{content}</div>\n              {withCta ? (\n                <button\n                  type=\"button\"\n                  onClick={onCtaClick}\n                  className=\"mt-2 w-fit self-end rounded-md bg-primary-500 px-2 py-1 type-b3-md !text-white hover:bg-primary-600 hover:!text-white\"\n                >\n                  {ctaText}\n                </button>\n              ) : null}\n            </div>\n            <TooltipPrimitive.Arrow\n              className=\"fill-gray-800\"\n              width={14}\n              height={7}\n            />\n          </TooltipPrimitive.Content>\n        </TooltipPrimitive.Portal>\n      </TooltipPrimitive.Root>\n    </TooltipPrimitive.Provider>\n  );\n}\n",
      "type": "registry:ui"
    }
  ],
  "type": "registry:ui"
}