{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "breadcrumb",
  "type": "registry:component",
  "title": "Breadcrumb",
  "description": "Navigation breadcrumb trail showing the current page hierarchy.",
  "dependencies": [
    "@vllnt/ui@^0.2.1"
  ],
  "registryDependencies": [],
  "files": [
    {
      "path": "registry/default/breadcrumb/breadcrumb.tsx",
      "content": "import Link from \"next/link\";\nimport type * as React from \"react\";\n\nimport { cn } from \"@vllnt/ui\";\n\nexport type BreadcrumbItem = {\n  href?: string;\n  icon?: React.ReactNode;\n  label: React.ReactNode;\n};\n\ntype BreadcrumbProps = {\n  className?: string;\n  items: BreadcrumbItem[];\n  separator?: \"arrow\" | \"chevron\" | \"slash\";\n  showHomeIcon?: boolean;\n  variant?: \"default\" | \"minimal\";\n};\n\nconst SEPARATOR_CHARS: Record<string, string> = {\n  arrow: \"→\",\n  chevron: \"›\",\n  slash: \"/\",\n};\n\nfunction SeparatorIcon({ type }: { type: string }) {\n  return (\n    <span aria-hidden=\"true\" className=\"text-muted-foreground\">\n      {SEPARATOR_CHARS[type] ?? \"›\"}\n    </span>\n  );\n}\n\nexport function Breadcrumb({\n  className,\n  items,\n  separator = \"chevron\",\n  variant = \"default\",\n}: BreadcrumbProps) {\n  return (\n    <nav\n      aria-label=\"Breadcrumb\"\n      className={cn(\"flex items-center space-x-1 text-sm\", className)}\n    >\n      {items.map((item, index) => (\n        <div\n          className=\"flex items-center\"\n          key={\n            typeof item.label === \"string\" ? item.label : `breadcrumb-${index}`\n          }\n        >\n          {index > 0 && (\n            <span className=\"mx-2\">\n              <SeparatorIcon type={separator} />\n            </span>\n          )}\n\n          {item.href ? (\n            <Link\n              className=\"flex items-center gap-1 hover:text-foreground transition-colors\"\n              href={item.href}\n            >\n              {item.icon ? (\n                <span className=\"flex-shrink-0\">{item.icon}</span>\n              ) : null}\n              <span\n                className={cn(\n                  // Truncate plain string labels; custom React elements handle their own overflow\n                  typeof item.label === \"string\" && \"truncate\",\n                  variant === \"minimal\"\n                    ? \"text-muted-foreground\"\n                    : \"text-foreground\",\n                )}\n              >\n                {item.label}\n              </span>\n            </Link>\n          ) : (\n            <span className=\"flex items-center gap-1 text-muted-foreground\">\n              {item.icon ? (\n                <span className=\"flex-shrink-0\">{item.icon}</span>\n              ) : null}\n              <span\n                className={cn(typeof item.label === \"string\" && \"truncate\")}\n              >\n                {item.label}\n              </span>\n            </span>\n          )}\n        </div>\n      ))}\n    </nav>\n  );\n}\n",
      "type": "registry:component"
    }
  ],
  "version": "0.2.1",
  "stability": "stable"
}