{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "ink/key-value",
  "title": "Key Value",
  "description": "Aligned key–value pairs",
  "dependencies": [
    "ink"
  ],
  "registryDependencies": [
    "https://termcn.dev/r/ink/terminal-text.json",
    "https://termcn.dev/r/ink/use-theme.json"
  ],
  "files": [
    {
      "path": "registry/ui/key-value.tsx",
      "content": "import { Box, Text } from \"ink\";\nimport React, { useMemo } from \"react\";\nimport type { ReactNode } from \"react\";\n\nimport { useTheme } from \"@/hooks/use-theme\";\nimport {\n  padToTerminalWidth,\n  terminalWidth,\n} from \"@/lib/terminal-text\";\n\nexport interface KeyValueItem {\n  key: string;\n  value: ReactNode;\n  color?: string;\n}\n\nexport interface KeyValueProps {\n  items: KeyValueItem[];\n  keyWidth?: number;\n  separator?: string;\n  keyColor?: string;\n  valueColor?: string;\n  \"aria-label\"?: string;\n}\n\nexport const KeyValue = ({\n  items,\n  keyWidth,\n  separator = \":\",\n  keyColor,\n  valueColor,\n  \"aria-label\": ariaLabel = \"Key value list\",\n}: KeyValueProps) => {\n  const theme = useTheme();\n\n  const resolvedKeyWidth = useMemo(() => {\n    if (keyWidth !== undefined) {\n      return keyWidth;\n    }\n    let max = 0;\n    for (const item of items) {\n      max = Math.max(max, terminalWidth(item.key));\n    }\n    return max + 1;\n  }, [items, keyWidth]);\n\n  const resolvedKeyColor = keyColor ?? theme.colors.mutedForeground;\n  const resolvedValueColor = valueColor ?? theme.colors.foreground;\n\n  return (\n    <Box flexDirection=\"column\" aria-role=\"list\">\n      <Text aria-label={ariaLabel}>{\"\"}</Text>\n      {items.map((item, idx) => {\n        const paddedKey = padToTerminalWidth(item.key, resolvedKeyWidth);\n        return (\n          <Box\n            key={idx}\n            flexDirection=\"row\"\n            gap={1}\n            aria-role=\"listitem\"\n            aria-label={\n              typeof item.value === \"string\" || typeof item.value === \"number\"\n                ? `${item.key}: ${item.value}`\n                : item.key\n            }\n          >\n            <Text color={resolvedKeyColor}>{paddedKey}</Text>\n            <Text color={resolvedKeyColor}>{separator}</Text>\n            <Text color={item.color ?? resolvedValueColor}>{item.value}</Text>\n          </Box>\n        );\n      })}\n    </Box>\n  );\n};\n",
      "type": "registry:ui"
    }
  ],
  "categories": [
    "data"
  ],
  "type": "registry:ui"
}