{
  "name": "tooltip",
  "type": "registry:ui",
  "title": "Tooltip",
  "description": "The explanation layer — one line of words on a 400ms delay. The Kbd chip carries the key; this carries the words. title= is lint-banned in its favor.",
  "dependencies": [
    "@candlelight-ds/tokens",
    "@radix-ui/react-tooltip",
    "clsx",
    "tailwind-merge"
  ],
  "files": [
    {
      "path": "components/ui/Tooltip.tsx",
      "type": "registry:ui",
      "content": "'use client'\n\n/**\n * Tooltip — the explanation layer. Radix-backed (focus + touch + collision\n * handling), candlelight skin. The Kbd chip carries the key; this carries\n * the words. `title=` attributes are banned in favor of this (lint enforces).\n *\n * Use when: an icon-only control needs a name, or a control needs one line\n * of context.\n * Don't use when: the content is interactive (Menu/Overlay) or essential\n * to completing the task (put it in the UI).\n */\n\nimport * as RadixTooltip from '@radix-ui/react-tooltip'\nimport { cn } from '@/lib/utils'\n\ntype TooltipPosition = 'top' | 'bottom' | 'left' | 'right'\n\ninterface TooltipProps {\n  content: React.ReactNode\n  position?: TooltipPosition\n  delay?: number\n  children: React.ReactElement\n  className?: string\n  disabled?: boolean\n}\n\nexport function Tooltip({\n  content,\n  position = 'top',\n  delay = 400,\n  children,\n  className,\n  disabled = false,\n}: TooltipProps) {\n  if (disabled || !content) {\n    return children\n  }\n\n  return (\n    <RadixTooltip.Provider delayDuration={delay} skipDelayDuration={300}>\n      <RadixTooltip.Root>\n        <RadixTooltip.Trigger asChild>{children}</RadixTooltip.Trigger>\n        <RadixTooltip.Portal>\n          <RadixTooltip.Content\n            side={position}\n            sideOffset={6}\n            collisionPadding={8}\n            className={cn(\n              'z-announce max-w-[260px] rounded-sm border border-hairline bg-surface-3 px-2.5 py-1.5',\n              'text-tooltip leading-5 text-ink shadow-float',\n              'animate-stage-rise select-none',\n              className\n            )}\n          >\n            {content}\n          </RadixTooltip.Content>\n        </RadixTooltip.Portal>\n      </RadixTooltip.Root>\n    </RadixTooltip.Provider>\n  )\n}\n",
      "target": "components/ui/Tooltip.tsx"
    }
  ],
  "meta": {
    "candlelight": {
      "category": "primitive",
      "gRules": [
        "G10"
      ],
      "useWhen": "An icon-only control needs a name, or a control needs one line of context.",
      "dontUseWhen": "The content is interactive (Menu/Overlay) or essential to completing the task (put it in the UI).",
      "states": [
        "closed",
        "open (400ms delay)",
        "disabled passthrough"
      ],
      "keyboard": [
        {
          "keys": "Focus",
          "does": "shows after delay; Esc hides"
        }
      ],
      "acceptanceTests": [
        "Mandatory on every icon-only button (with aria-label).",
        "One line of explanation, never the key itself."
      ]
    }
  },
  "registryDependencies": [
    "utils"
  ]
}