{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "ink/tooltip",
  "title": "Tooltip",
  "description": "Contextual tooltip on focus or hover",
  "dependencies": [
    "ink"
  ],
  "registryDependencies": [
    "https://termcn.dev/r/ink/terminal-style.json",
    "https://termcn.dev/r/ink/types.json",
    "https://termcn.dev/r/ink/use-theme.json",
    "https://termcn.dev/r/ink/use-unicode.json"
  ],
  "files": [
    {
      "path": "registry/ui/tooltip.tsx",
      "content": "import { useIsScreenReaderEnabled, Box, Text } from \"ink\";\nimport type { ReactNode } from \"react\";\n\nimport { useTheme } from \"@/hooks/use-theme\";\nimport { useUnicode } from \"@/hooks/use-unicode\";\nimport { resolveBorderStyle } from \"@/lib/terminal-style\";\nimport type { BorderStyle } from \"@/components/ui/types\";\n\nexport interface TooltipProps {\n  children: ReactNode;\n  content: string;\n  position?: \"top\" | \"bottom\" | \"left\" | \"right\";\n  isVisible?: boolean;\n  borderStyle?: BorderStyle;\n  borderColor?: string;\n  paddingX?: number;\n  paddingY?: number;\n  gap?: number;\n  arrowDown?: string;\n  arrowUp?: string;\n  \"aria-label\"?: string;\n}\n\nexport const Tooltip = ({\n  children,\n  content,\n  position = \"top\",\n  isVisible = false,\n  borderStyle = \"single\",\n  borderColor,\n  paddingX = 1,\n  paddingY = 0,\n  gap = 1,\n  arrowDown,\n  arrowUp,\n  \"aria-label\": ariaLabel,\n}: TooltipProps) => {\n  const unicode = useUnicode();\n  const theme = useTheme();\n  const isScreenReaderEnabled = useIsScreenReaderEnabled();\n  const resolvedBorderColor = borderColor ?? theme.colors.border;\n  const resolvedArrowDown = arrowDown ?? (unicode ? \"↓\" : \"v\");\n  const resolvedArrowUp = arrowUp ?? (unicode ? \"↑\" : \"^\");\n\n  const tooltipBox = (\n    <Box\n      borderStyle={resolveBorderStyle(\n        isScreenReaderEnabled ? undefined : borderStyle,\n        unicode\n      )}\n      borderColor={resolvedBorderColor}\n      paddingX={paddingX}\n      paddingY={paddingY}\n      aria-label={ariaLabel ?? `Tooltip: ${content}`}\n    >\n      <Text color={theme.colors.foreground}>{content}</Text>\n    </Box>\n  );\n\n  if (!isVisible) {\n    return <Box>{children}</Box>;\n  }\n\n  if (position === \"top\") {\n    return (\n      <Box flexDirection=\"column\" alignItems=\"flex-start\">\n        {tooltipBox}\n        <Text aria-hidden color={theme.colors.mutedForeground}>\n          {resolvedArrowDown}\n        </Text>\n        <Box>{children}</Box>\n      </Box>\n    );\n  }\n\n  if (position === \"bottom\") {\n    return (\n      <Box flexDirection=\"column\" alignItems=\"flex-start\">\n        <Box>{children}</Box>\n        <Text aria-hidden color={theme.colors.mutedForeground}>\n          {resolvedArrowUp}\n        </Text>\n        {tooltipBox}\n      </Box>\n    );\n  }\n\n  if (position === \"left\") {\n    return (\n      <Box flexDirection=\"row\" alignItems=\"center\" gap={gap}>\n        {tooltipBox}\n        <Box>{children}</Box>\n      </Box>\n    );\n  }\n\n  return (\n    <Box flexDirection=\"row\" alignItems=\"center\" gap={gap}>\n      <Box>{children}</Box>\n      {tooltipBox}\n    </Box>\n  );\n};\n",
      "type": "registry:ui"
    }
  ],
  "categories": [
    "overlays"
  ],
  "type": "registry:ui"
}