{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "ink/breadcrumb",
  "title": "Breadcrumb",
  "description": "Breadcrumb navigation trail",
  "dependencies": [
    "ink"
  ],
  "registryDependencies": [
    "https://termcn.dev/r/ink/interaction.json",
    "https://termcn.dev/r/ink/terminal-symbols.json",
    "https://termcn.dev/r/ink/use-theme.json",
    "https://termcn.dev/r/ink/use-unicode.json"
  ],
  "files": [
    {
      "path": "registry/ui/breadcrumb.tsx",
      "content": "import { Box, Text } from \"ink\";\n\nimport { useInteraction } from \"@/hooks/use-interaction\";\nimport { useTheme } from \"@/hooks/use-theme\";\nimport { useUnicode } from \"@/hooks/use-unicode\";\nimport { resolveTerminalSymbol } from \"@/lib/terminal-symbols\";\n\nexport interface BreadcrumbItem {\n  label: string;\n  key: string;\n  onSelect?: () => void;\n}\n\nexport interface BreadcrumbProps {\n  items: BreadcrumbItem[];\n  separator?: string;\n  activeKey?: string;\n  id?: string;\n  autoFocus?: boolean;\n  isActive?: boolean;\n  disabled?: boolean;\n  \"aria-label\"?: string;\n}\n\nexport const Breadcrumb = ({\n  items,\n  separator,\n  activeKey,\n  id,\n  autoFocus = false,\n  isActive = true,\n  disabled = false,\n  \"aria-label\": ariaLabel,\n}: BreadcrumbProps) => {\n  const theme = useTheme();\n  const unicode = useUnicode();\n  const resolvedSeparator =\n    separator ?? resolveTerminalSymbol(unicode, \"›\", \">\");\n\n  const activeIndex =\n    activeKey === undefined\n      ? items.length - 1\n      : items.findIndex((i) => i.key === activeKey);\n\n  const { isFocused } = useInteraction(\n    (_input, key) => {\n      if (key.leftArrow && activeIndex > 0) {\n        const prev = items[activeIndex - 1];\n        if (prev?.onSelect) {\n          prev.onSelect();\n        }\n      }\n      if (key.rightArrow && activeIndex < items.length - 1) {\n        items[activeIndex + 1]?.onSelect?.();\n      }\n      if (key.home) {\n        items[0]?.onSelect?.();\n      }\n      if (key.end) {\n        items.at(-1)?.onSelect?.();\n      }\n    },\n    { autoFocus, disabled, id, isActive }\n  );\n\n  return (\n    <Box aria-role=\"list\" flexDirection=\"row\" alignItems=\"center\">\n      <Text aria-label={ariaLabel ?? \"Breadcrumb\"}>\n        {isFocused ? \">\" : \" \"}\n      </Text>\n      {items.map((item, idx) => {\n        const isActive = idx === activeIndex;\n        return (\n          <Box\n            key={item.key}\n            aria-label={item.label}\n            aria-role=\"listitem\"\n            aria-state={{ disabled, selected: isActive }}\n            flexDirection=\"row\"\n            alignItems=\"center\"\n          >\n            <Text\n              aria-hidden\n              color={\n                isActive ? theme.colors.primary : theme.colors.mutedForeground\n              }\n              bold={isActive}\n            >\n              {item.label}\n            </Text>\n            {idx < items.length - 1 && (\n              <Text aria-hidden color={theme.colors.mutedForeground}>\n                {\" \"}\n                {resolvedSeparator}{\" \"}\n              </Text>\n            )}\n          </Box>\n        );\n      })}\n    </Box>\n  );\n};\n",
      "type": "registry:ui"
    }
  ],
  "categories": [
    "navigation"
  ],
  "type": "registry:ui"
}