{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "breadcrumb",
  "type": "registry:ui",
  "title": "Breadcrumb",
  "description": "Shows where a page sits in the hierarchy, with links back up. Collapses long trails with maxItems.",
  "dependencies": [
    "@radix-ui/react-slot@^1.1.0"
  ],
  "registryDependencies": [
    "https://junco.madebytobi.com/r/icons.json",
    "https://junco.madebytobi.com/r/junco-theme.json",
    "https://junco.madebytobi.com/r/utils.json"
  ],
  "files": [
    {
      "path": "registry/junco/ui/breadcrumb.tsx",
      "type": "registry:ui",
      "content": "import * as React from \"react\";\nimport { cn } from \"@/lib/utils\";\nimport { ChevronRightIcon, MoreHorizontalIcon } from \"@/lib/junco/icons\";\nimport { Slot } from \"@radix-ui/react-slot\";\n\nexport interface BreadcrumbItemData {\n  label: React.ReactNode;\n  /** Omit on the last item (the current page). */\n  href?: string;\n}\n\nexport interface BreadcrumbProps extends React.HTMLAttributes<HTMLElement> {\n  /** Shorthand: render these items. Or compose BreadcrumbList / BreadcrumbItem yourself. */\n  items?: BreadcrumbItemData[];\n  /** With more items than this, the middle collapses to \"…\". Default: never collapse. */\n  maxItems?: number;\n  /** Custom separator. Default a chevron. */\n  separator?: React.ReactNode;\n  /** Render links through your router, e.g. `(item, props) => <Link to={item.href} {...props} />`. */\n  renderLink?: (item: BreadcrumbItemData, props: { className: string; children: React.ReactNode }) => React.ReactNode;\n  classNames?: Partial<Record<\"root\" | \"list\" | \"item\" | \"link\" | \"page\" | \"separator\", string>>;\n}\n\nconst linkClass =\n  \"rounded-xs text-muted-foreground transition-colors duration-fast ease-standard hover:text-foreground focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring\";\n\n/**\n * Shows where a page sits in the hierarchy, with links back up. Collapses long trails with maxItems.\n *\n *   <Breadcrumb items={[{ label: \"Projects\", href: \"/projects\" }, { label: \"Junco\" }]} />\n */\nexport const Breadcrumb = React.forwardRef<HTMLElement, BreadcrumbProps>(\n  ({ className, classNames, items, maxItems, separator, renderLink, children, ...props }, ref) => {\n    let content = children;\n    if (items) {\n      const collapse = maxItems !== undefined && items.length > maxItems && maxItems >= 2;\n      const shown: (BreadcrumbItemData | \"ellipsis\")[] = collapse\n        ? [items[0]!, \"ellipsis\", ...items.slice(items.length - (maxItems - 1))]\n        : items;\n      content = (\n        <BreadcrumbList className={classNames?.list}>\n          {shown.map((item, i) => {\n            const isLast = i === shown.length - 1;\n            return (\n              <React.Fragment key={i}>\n                <BreadcrumbItem className={classNames?.item}>\n                  {item === \"ellipsis\" ? (\n                    <BreadcrumbEllipsis />\n                  ) : isLast || !item.href ? (\n                    <BreadcrumbPage className={classNames?.page} aria-current={isLast ? \"page\" : undefined}>\n                      {item.label}\n                    </BreadcrumbPage>\n                  ) : renderLink ? (\n                    renderLink(item, { className: cn(linkClass, classNames?.link), children: item.label })\n                  ) : (\n                    <BreadcrumbLink href={item.href} className={classNames?.link}>\n                      {item.label}\n                    </BreadcrumbLink>\n                  )}\n                </BreadcrumbItem>\n                {!isLast && <BreadcrumbSeparator className={classNames?.separator}>{separator}</BreadcrumbSeparator>}\n              </React.Fragment>\n            );\n          })}\n        </BreadcrumbList>\n      );\n    }\n    return (\n      <nav ref={ref} aria-label=\"Breadcrumb\" data-slot=\"breadcrumb\" className={cn(classNames?.root, className)} {...props}>\n        {content}\n      </nav>\n    );\n  },\n);\nBreadcrumb.displayName = \"Breadcrumb\";\n\nexport const BreadcrumbList = React.forwardRef<HTMLOListElement, React.OlHTMLAttributes<HTMLOListElement>>(\n  ({ className, ...props }, ref) => (\n    <ol ref={ref} className={cn(\"flex flex-wrap items-center gap-1.5 text-sm break-words\", className)} {...props} />\n  ),\n);\nBreadcrumbList.displayName = \"BreadcrumbList\";\n\nexport const BreadcrumbItem = React.forwardRef<HTMLLIElement, React.LiHTMLAttributes<HTMLLIElement>>(\n  ({ className, ...props }, ref) => <li ref={ref} className={cn(\"inline-flex items-center gap-1.5\", className)} {...props} />,\n);\nBreadcrumbItem.displayName = \"BreadcrumbItem\";\n\nexport interface BreadcrumbLinkProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {\n  /** Render your router's Link as the child. */\n  asChild?: boolean;\n}\n\nexport const BreadcrumbLink = React.forwardRef<HTMLAnchorElement, BreadcrumbLinkProps>(\n  ({ className, asChild, ...props }, ref) => {\n    const Comp = asChild ? Slot : \"a\";\n    return <Comp ref={ref} className={cn(linkClass, className)} {...props} />;\n  },\n);\nBreadcrumbLink.displayName = \"BreadcrumbLink\";\n\nexport const BreadcrumbPage = React.forwardRef<HTMLSpanElement, React.HTMLAttributes<HTMLSpanElement>>(\n  ({ className, ...props }, ref) => (\n    <span ref={ref} aria-current=\"page\" className={cn(\"font-medium text-foreground\", className)} {...props} />\n  ),\n);\nBreadcrumbPage.displayName = \"BreadcrumbPage\";\n\nexport function BreadcrumbSeparator({ className, children, ...props }: React.LiHTMLAttributes<HTMLLIElement>) {\n  return (\n    <li role=\"presentation\" aria-hidden className={cn(\"text-muted-foreground [&>svg]:size-3.5\", className)} {...props}>\n      {children ?? <ChevronRightIcon />}\n    </li>\n  );\n}\n\nexport function BreadcrumbEllipsis({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>) {\n  return (\n    <span className={cn(\"grid size-5 place-items-center text-muted-foreground\", className)} {...props}>\n      <MoreHorizontalIcon aria-hidden className=\"size-4\" />\n      <span className=\"sr-only\">More pages</span>\n    </span>\n  );\n}\n"
    }
  ],
  "docs": "Docs and examples: https://junco.madebytobi.com/docs/components/breadcrumb",
  "meta": {
    "hash": "83facfb7d748a946",
    "source": "packages/react/src/components/breadcrumb.tsx",
    "exports": [
      "BreadcrumbItemData",
      "BreadcrumbProps",
      "Breadcrumb",
      "BreadcrumbList",
      "BreadcrumbItem",
      "BreadcrumbLinkProps",
      "BreadcrumbLink",
      "BreadcrumbPage",
      "BreadcrumbSeparator",
      "BreadcrumbEllipsis"
    ],
    "props": {
      "Breadcrumb": {
        "extends": "React.HTMLAttributes<HTMLElement>",
        "props": [
          {
            "name": "items",
            "optional": true,
            "type": "BreadcrumbItemData[]",
            "description": "Shorthand: render these items. Or compose BreadcrumbList / BreadcrumbItem yourself."
          },
          {
            "name": "maxItems",
            "optional": true,
            "type": "number",
            "description": "With more items than this, the middle collapses to \"…\". Default: never collapse."
          },
          {
            "name": "separator",
            "optional": true,
            "type": "React.ReactNode",
            "description": "Custom separator. Default a chevron."
          },
          {
            "name": "renderLink",
            "optional": true,
            "type": "(item: BreadcrumbItemData, props: { className: string; children: React.ReactNode }) => React.ReactNode",
            "description": "Render links through your router, e.g. `(item, props) => <Link to={item.href} {...props} />`."
          },
          {
            "name": "classNames",
            "optional": true,
            "type": "Partial<Record<\"root\" | \"list\" | \"item\" | \"link\" | \"page\" | \"separator\""
          }
        ]
      },
      "BreadcrumbLink": {
        "extends": "React.AnchorHTMLAttributes<HTMLAnchorElement>",
        "props": [
          {
            "name": "asChild",
            "optional": true,
            "type": "boolean",
            "description": "Render your router's Link as the child."
          }
        ]
      }
    },
    "usage": "<Breadcrumb items={[{ label: \"Projects\", href: \"/projects\" }, { label: \"Junco\" }]} />",
    "docsUrl": "https://junco.madebytobi.com/docs/components/breadcrumb"
  }
}