{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "snapp-feature-breadcrumb",
  "title": "Snapp Feature Breadcrumb",
  "description": "Figma-aligned pill breadcrumb with clickable ancestors and an accessible current-page state.",
  "dependencies": [
    "lucide-react"
  ],
  "registryDependencies": [
    "@snapp/snapp-breadcrumb",
    "@snapp/snapp-theme",
    "@snapp/snapp-utils"
  ],
  "files": [
    {
      "path": "registry/radix-nova/components/navigation/feature-breadcrumb.tsx",
      "content": "import type * as React from \"react\"\nimport { Fragment } from \"react\"\nimport { BookOpen, ChevronRight } from \"lucide-react\"\n\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/components/ui/breadcrumb\"\nimport { cn } from \"@/lib/utils\"\n\ninterface FeatureBreadcrumbItem {\n  id: string\n  label: React.ReactNode\n  onSelect?: () => void\n  current?: boolean\n}\n\ninterface FeatureBreadcrumbProps\n  extends Omit<React.ComponentProps<typeof Breadcrumb>, \"children\"> {\n  icon?: React.ReactNode\n  items: FeatureBreadcrumbItem[]\n}\n\nfunction FeatureBreadcrumb({\n  className,\n  icon,\n  items,\n  ...props\n}: FeatureBreadcrumbProps) {\n  if (items.length === 0) return null\n\n  return (\n    <Breadcrumb\n      className={cn(\"text-sm font-normal leading-4\", className)}\n      data-slot=\"snapp-feature-breadcrumb\"\n      {...props}\n    >\n      <BreadcrumbList className=\"m-0 list-none gap-2 p-0 text-snapp-text-soft\">\n        <BreadcrumbItem aria-hidden=\"true\">\n          {icon ?? <BookOpen className=\"size-5\" strokeWidth={1.5} />}\n        </BreadcrumbItem>\n        {items.map((item, index) => (\n          <Fragment key={item.id}>\n            {index > 0 ? (\n              <BreadcrumbSeparator className=\"[&>svg]:size-4\">\n                <ChevronRight strokeWidth={1.5} />\n              </BreadcrumbSeparator>\n            ) : null}\n            <BreadcrumbItem>\n              {item.onSelect ? (\n                <button\n                  aria-current={item.current ? \"page\" : undefined}\n                  className=\"min-h-7 cursor-pointer rounded-full border-0 bg-snapp-skeleton-soft px-4 py-1.5 text-snapp-text-soft transition-colors hover:bg-snapp-surface-secondary hover:text-snapp-text-brand focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-snapp-brand-primary\"\n                  type=\"button\"\n                  onClick={item.onSelect}\n                >\n                  {item.label}\n                </button>\n              ) : (\n                <BreadcrumbPage className=\"min-h-7 max-w-64 truncate rounded-full bg-snapp-skeleton-soft px-4 py-1.5 text-snapp-text-brand\">\n                  {item.label}\n                </BreadcrumbPage>\n              )}\n            </BreadcrumbItem>\n          </Fragment>\n        ))}\n      </BreadcrumbList>\n    </Breadcrumb>\n  )\n}\n\nexport { FeatureBreadcrumb }\nexport type { FeatureBreadcrumbItem, FeatureBreadcrumbProps }\n",
      "type": "registry:component",
      "target": "@components/snapp/navigation/feature-breadcrumb.tsx"
    }
  ],
  "type": "registry:component"
}