{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "tooltip",
  "type": "registry:ui",
  "title": "Tooltip",
  "description": "Names an icon-only control and its key: a graphite pill chip in the label role, SELECT · V with the key dimmed, 10 from the trigger after 120 ms, grouped so the next trigger shows at once; flips near the edge; fades on settle. Built on Base UI Tooltip. wrap makes a longer note that wraps at 280 with its detail in Tooltip.Dim.",
  "dependencies": [
    "@base-ui/react@^1.8.0"
  ],
  "registryDependencies": [
    "https://metalui.dev/r/tokens.json"
  ],
  "files": [
    {
      "path": "packages/metalui/src/components/tooltip/tooltip.tsx",
      "type": "registry:ui",
      "target": "components/metalui/tooltip/tooltip.tsx",
      "content": "'use client';\n\nimport * as React from 'react';\nimport { Tooltip as BaseTooltip } from '@base-ui/react/tooltip';\n\n/* ─────────────────────────────────────────────────────────\n * TOOLTIP (the brief; the reference design's #tip and .tb[data-tip]) on Base UI Tooltip\n *   rest      nothing\n *   120 ms    hovered or focused: a graphite label chip fades in on settle, 10 from the trigger\n *   group     inside one TooltipProvider, moving to the next trigger shows the next at once\n *   edge      flips to the other side near the edge (Base UI collision avoidance)\n *   leave     fades out on settle; a press hides it\n * \"SELECT · V\": the name, then the key dimmed. Never interactive: pointer passes through.\n * wrap: a longer note (where a thing came from) wraps at 280, its detail in Tooltip.Dim.\n * ───────────────────────────────────────────────────────── */\n\nconst delayMs = () => {\n  if (typeof window === 'undefined') return 120;\n  return parseFloat(getComputedStyle(document.documentElement).getPropertyValue('--mu-tooltip-delay-ms')) || 120;\n};\nconst gap = () => {\n  if (typeof window === 'undefined') return 10;\n  return parseFloat(getComputedStyle(document.documentElement).getPropertyValue('--mu-tooltip-gap')) || 10;\n};\n\nexport interface TooltipProps {\n  /** What the control is: \"Select\", or a note with a Tooltip.Dim detail. The trigger still needs its own accessible name (aria-label). */\n  label: React.ReactNode;\n  /** The key, shown dimmed after the name: \"V\", \"⌘Z\". */\n  shortcut?: string;\n  /** Where it sits. Default top; it flips near the edge. */\n  side?: 'top' | 'bottom' | 'left' | 'right';\n  /** The trigger. It must accept a ref and props (a button, a ToolButton's cap). */\n  children: React.ReactElement;\n  /** Controlled open state (a docs still, a test). */\n  open?: boolean;\n  /** A note that wraps at the max width instead of one line. */\n  wrap?: boolean;\n  /** Its own hover delay in ms (a note waits longer than a name); default the provider's. */\n  delay?: number;\n  /** Its own distance from the trigger (clear a chip the trigger shows on hover); default 10. */\n  offset?: number;\n  /** A class on the popup (a block's hook). */\n  className?: string;\n}\n\n/* Styled with the theme's utilities (the tooltip recipe): the graphite chip fades in and out on settle. */\nconst POSITIONER = 'mu-tooltip-positioner z-tooltip-z';\nconst POPUP = 'mu-tooltip max-w-tooltip-max-width py-tooltip-pad-y px-tooltip-pad-x rounded-tooltip-radius pointer-events-none type-tooltip text-tooltip-ink recipe-tooltip transition-tooltip data-starting-style:opacity-0 data-ending-style:opacity-0 data-instant:transition-none';\nconst KEY = 'mu-tooltip-key text-tooltip-key-ink';\n\n/** Names an icon-only control and its key, one hover away. */\nfunction TooltipRoot({ label, shortcut, side = 'top', children, open, wrap, delay, offset, className }: TooltipProps) {\n  return (\n    <BaseTooltip.Root open={open}>\n      <BaseTooltip.Trigger delay={delay} render={children} />\n      <BaseTooltip.Portal>\n        <BaseTooltip.Positioner className={POSITIONER} side={side} sideOffset={offset ?? gap()} collisionPadding={8}>\n          <BaseTooltip.Popup className={`${POPUP} ${wrap ? 'whitespace-normal' : 'whitespace-nowrap'}${className ? ` ${className}` : ''}`} data-wrap={wrap ? '' : undefined}>\n            {label}\n            {shortcut && <span className={KEY}> · {shortcut}</span>}\n          </BaseTooltip.Popup>\n        </BaseTooltip.Positioner>\n      </BaseTooltip.Portal>\n    </BaseTooltip.Root>\n  );\n}\n\n/** The dimmed part of a tooltip: a key, or a note's detail (\"· 14:10 · confident\"). */\nfunction Dim({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>) {\n  return <span className={className ? `${KEY} ${className}` : KEY} {...props} />;\n}\n\nexport const Tooltip = Object.assign(TooltipRoot, { Root: TooltipRoot, Dim });\n\n/** Groups tooltips: after one shows, the next trigger shows its own at once. Wrap a toolbar or a panel. */\nexport function TooltipProvider({ children, delay }: { children: React.ReactNode; delay?: number }) {\n  return <BaseTooltip.Provider delay={delay ?? delayMs()}>{children}</BaseTooltip.Provider>;\n}\n"
    }
  ],
  "docs": "Agent guide: https://metalui.dev/r/tooltip.md. SwiftUI: View.metalTooltip(_:shortcut:edge:) in the MetalUI Swift package."
}