{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "masai-breadcrumb",
  "title": "Masai Breadcrumb",
  "description": "Accessible breadcrumb navigation (nav + ordered list): optional href per segment, chevron separators, Masai typography tokens.",
  "dependencies": [
    "lucide-react"
  ],
  "files": [
    {
      "path": "registry/components/masai-breadcrumb.tsx",
      "content": "\"use client\";\n\nimport * as React from \"react\";\nimport { ChevronRight } from \"lucide-react\";\n\nimport { cn } from \"@/lib/utils\";\n\nexport type MasaiBreadcrumbItem = {\n  label: React.ReactNode;\n  /** Required for every segment except the last. The last crumb is always the current page (not a link). */\n  href?: string;\n};\n\nexport type MasaiBreadcrumbRenderLinkProps = {\n  href: string;\n  className?: string;\n  children: React.ReactNode;\n};\n\nexport type MasaiBreadcrumbProps = {\n  items: MasaiBreadcrumbItem[];\n  className?: string;\n  navClassName?: string;\n  listClassName?: string;\n  separatorClassName?: string;\n  linkClassName?: string;\n  currentClassName?: string;\n  separator?: React.ReactNode;\n  /**\n   * Renders clickable ancestors (everything before the last crumb). Swap in your framework `Link`\n   * (`next/link`, `@tanstack/react-router`, etc.) to keep navigation client-side instead of `<a>` full reloads.\n   */\n  renderLink?: (props: MasaiBreadcrumbRenderLinkProps) => React.ReactNode;\n};\n\nconst defaultSeparator = (\n  <ChevronRight\n    aria-hidden\n    className=\"size-[14px] shrink-0 text-gray-400\"\n    strokeWidth={2}\n  />\n);\n\nexport function MasaiBreadcrumb({\n  items,\n  className,\n  navClassName,\n  listClassName,\n  separatorClassName,\n  linkClassName,\n  currentClassName,\n  separator = defaultSeparator,\n  renderLink,\n}: MasaiBreadcrumbProps) {\n  if (!items?.length) {\n    return null;\n  }\n\n  const linkStyles = cn(\n    \"type-t1 text-gray-600 transition-colors hover:text-gray-900\",\n    linkClassName,\n  );\n\n  const staticStyles = cn(\"type-t1 text-gray-900\", currentClassName);\n\n  return (\n    <nav aria-label=\"Breadcrumb\" className={cn(className, navClassName)}>\n      <ol className={cn(\"flex flex-wrap items-center gap-x-1 gap-y-2 text-left\", listClassName)}>\n        {items.map((item, index) => {\n          const isLast = index === items.length - 1;\n          const rawHref = item.href?.trim();\n          /* Last segment is never a link — current page stays bold plain text even if href is passed. */\n          const asLink = Boolean(rawHref) && !isLast;\n          const href = rawHref ?? \"\";\n\n          return (\n            <li key={index} className=\"inline-flex min-w-0 items-center gap-x-1\">\n              {index > 0 ? (\n                <span className={cn(\"inline-flex shrink-0\", separatorClassName)} aria-hidden>\n                  {separator}\n                </span>\n              ) : null}\n              {asLink ? (\n                renderLink ? (\n                  renderLink({\n                    href,\n                    className: linkStyles,\n                    children: item.label,\n                  })\n                ) : (\n                  <a href={href} className={linkStyles}>\n                    {item.label}\n                  </a>\n                )\n              ) : (\n                <span\n                  className={cn(staticStyles, isLast ? \"font-bold\" : undefined)}\n                  aria-current={isLast ? \"page\" : undefined}\n                >\n                  {item.label}\n                </span>\n              )}\n            </li>\n          );\n        })}\n      </ol>\n    </nav>\n  );\n}\n",
      "type": "registry:ui"
    }
  ],
  "type": "registry:ui"
}