{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "arrow-tooltip",
  "type": "registry:ui",
  "title": "Arrow Tooltip",
  "description": "A tooltip with a fully outlined border arrow that stays seamlessly connected to the panel on every side, built on Radix UI.",
  "dependencies": [
    "@radix-ui/react-tooltip"
  ],
  "files": [
    {
      "path": "registry/crafterui/ui/arrow-tooltip.tsx",
      "type": "registry:ui",
      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as TooltipPrimitive from \"@radix-ui/react-tooltip\"\n\nimport { cn } from \"@/lib/utils\"\n\n/**\n * Wraps the app (or a subtree) so tooltips can be used inside it.\n * `delayDuration` controls how long the pointer must rest before the tooltip opens.\n */\nfunction TooltipProvider({\n  delayDuration = 0,\n  ...props\n}: React.ComponentProps<typeof TooltipPrimitive.Provider>) {\n  return (\n    <TooltipPrimitive.Provider\n      data-slot=\"arrow-tooltip-provider\"\n      delayDuration={delayDuration}\n      {...props}\n    />\n  )\n}\n\n/**\n * Root tooltip. Self-provides a `TooltipProvider`, so it can be dropped in\n * anywhere without manual provider setup.\n */\nfunction Tooltip({\n  ...props\n}: React.ComponentProps<typeof TooltipPrimitive.Root>) {\n  return (\n    <TooltipProvider>\n      <TooltipPrimitive.Root data-slot=\"arrow-tooltip\" {...props} />\n    </TooltipProvider>\n  )\n}\n\n/**\n * The element that opens the tooltip on hover/focus. Use `asChild` to merge\n * the trigger behaviour onto your own element.\n */\nfunction TooltipTrigger({\n  ...props\n}: React.ComponentProps<typeof TooltipPrimitive.Trigger>) {\n  return (\n    <TooltipPrimitive.Trigger data-slot=\"arrow-tooltip-trigger\" {...props} />\n  )\n}\n\n/**\n * Floating tooltip panel with the signature outlined \"border arrow\" pointer\n * that stays seamlessly connected to the panel's outline on every side.\n */\nfunction TooltipContent({\n  className,\n  sideOffset = 0,\n  children,\n  ...props\n}: React.ComponentProps<typeof TooltipPrimitive.Content>) {\n  return (\n    <TooltipPrimitive.Portal>\n      <TooltipPrimitive.Content\n        data-slot=\"arrow-tooltip-content\"\n        sideOffset={sideOffset}\n        className={cn(\n          \"bg-background text-foreground outline-border animate-in fade-in-0 zoom-in-95 motion-reduce:animate-none 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 group z-50 w-fit origin-(--radix-tooltip-content-transform-origin) rounded-md px-3 py-1.5 text-xs text-balance outline-1\",\n          className\n        )}\n        {...props}\n      >\n        {children}\n        <TooltipPrimitive.Arrow asChild>\n          <span>\n            <ArrowSvg />\n          </span>\n        </TooltipPrimitive.Arrow>\n      </TooltipPrimitive.Content>\n    </TooltipPrimitive.Portal>\n  )\n}\n\nconst ArrowSvg = (props: React.ComponentProps<\"svg\">) => (\n  <svg\n    width=\"20\"\n    height=\"10\"\n    viewBox=\"0 0 20 10\"\n    fill=\"none\"\n    className=\"-mt-px ml-px\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    {...props}\n  >\n    <path\n      d=\"M10.3356 7.39793L15.1924 3.02682C15.9269 2.36577 16.8801 2 17.8683 2H20V0H0V2H1.4651C2.4532 2 3.4064 2.36577 4.1409 3.02682L8.9977 7.39793C9.378 7.7402 9.9553 7.74021 10.3356 7.39793Z\"\n      fill=\"var(--color-background)\"\n    />\n    <path\n      d=\"M11.1363 8.14124C10.3757 8.82575 9.22111 8.82578 8.46041 8.14122L3.60361 3.77011C3.05281 3.27432 2.33791 2.99999 1.59681 2.99999L4.24171 3L9.12941 7.39793C9.50971 7.7402 10.087 7.7402 10.4674 7.39793L15.3544 3L18 2.99999C17.2589 2.99999 16.544 3.27432 15.9931 3.77011L11.1363 8.14124Z\"\n      fill=\"var(--color-background)\"\n    />\n    <path\n      d=\"M9.6667 6.65461L14.5235 2.28352C15.4416 1.45721 16.6331 1 17.8683 1H20V2H17.8683C16.8801 2 15.9269 2.36577 15.1924 3.02682L10.3356 7.39793C9.9553 7.74021 9.378 7.7402 8.9977 7.39793L4.1409 3.02682C3.4064 2.36577 2.4532 2 1.4651 2H0V1H1.4651C2.7002 1 3.8917 1.45722 4.8099 2.28352L9.6667 6.65461Z\"\n      fill=\"var(--color-border)\"\n    />\n  </svg>\n)\n\nexport { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }\n"
    }
  ]
}