{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "breadcrumb",
  "title": "Breadcrumb",
  "dependencies": [
    "@phosphor-icons/react"
  ],
  "registryDependencies": [
    "https://ui.hotfix.jobs/r/tokens.json",
    "https://ui.hotfix.jobs/r/utils.json"
  ],
  "files": [
    {
      "path": "registry/components/ui/breadcrumb.tsx",
      "content": "\"use client\";\n\nimport { Fragment, useState } from \"react\";\nimport type * as React from \"react\";\nimport { cn } from \"@/lib/utils\";\n\nimport { CaretRight, DotsThree, House } from \"@phosphor-icons/react/dist/ssr\";\nexport interface BreadcrumbItem {\n  /** Label. If `href === \"/\"` and `name === \"Home\"`, renders as home icon. */\n  name: string;\n  /** If omitted, the crumb renders as a non-link (useful for the current page). */\n  href?: string;\n  /** Custom leading icon; overrides the auto home-icon behavior. */\n  icon?: React.ReactNode;\n}\n\nexport interface BreadcrumbProps\n  extends Omit<React.HTMLAttributes<HTMLElement>, \"children\"> {\n  items: BreadcrumbItem[];\n  /**\n   * When true, treat any `<a>` element from your router as a Link. The default\n   * uses `<a>`: pass a `linkAs` render prop if you need Next.js Link etc.\n   */\n  linkAs?: (props: {\n    href: string;\n    children: React.ReactNode;\n    className?: string;\n    \"aria-label\"?: string;\n    \"aria-current\"?: \"page\";\n  }) => React.ReactElement;\n}\n\nfunction Separator() {\n  return (\n    <CaretRight\n      aria-hidden\n      className=\"size-3.5 shrink-0 text-ink-tertiary\"\n    />\n  );\n}\n\n/** Horizontal trail of ancestor links. Long chains collapse middle items on mobile. */\nexport function Breadcrumb({\n  items,\n  linkAs,\n  className,\n  ...props\n}: BreadcrumbProps): React.ReactElement | null {\n  const [expanded, setExpanded] = useState(false);\n  if (items.length === 0) return null;\n\n  const collapseMiddle = items.length > 3;\n  const LinkComponent =\n    linkAs ??\n    ((linkProps) => <a {...linkProps}>{linkProps.children}</a>);\n\n  return (\n    <nav\n      aria-label=\"Breadcrumb\"\n      data-slot=\"breadcrumb\"\n      className={cn(\"text-small\", className)}\n      {...props}\n    >\n      <ol className=\"flex items-center gap-2 overflow-x-auto whitespace-nowrap text-ink-muted [scrollbar-width:none] [-ms-overflow-style:none] [&::-webkit-scrollbar]:hidden\">\n        {items.map((item, idx) => {\n          const isLast = idx === items.length - 1;\n          const isMiddle = idx > 0 && !isLast;\n          const hiddenOnMobile = collapseMiddle && isMiddle && !expanded;\n          const isHome =\n            item.icon === undefined &&\n            item.href === \"/\" &&\n            item.name === \"Home\";\n\n          const content =\n            item.icon !== undefined ? (\n              <>\n                <span className=\"inline-flex shrink-0 items-center\">\n                  {item.icon}\n                </span>\n                <span className={cn(isLast && \"truncate\")}>{item.name}</span>\n              </>\n            ) : isHome ? (\n              <>\n                <House className=\"size-3.5 shrink-0\" aria-hidden />\n                <span className=\"sr-only\">{item.name}</span>\n              </>\n            ) : (\n              <span className={cn(isLast && \"truncate\")}>{item.name}</span>\n            );\n\n          const inlineClass =\n            \"inline-flex items-center gap-1 rounded-[var(--radius-6)] outline-none focus-visible:shadow-[inset_0_-2px_0_var(--focus-ring-color)]\";\n\n          const crumb =\n            item.href && !isLast ? (\n              <LinkComponent\n                href={item.href}\n                aria-label={isHome ? item.name : undefined}\n                className={cn(\n                  inlineClass,\n                  \"text-ink-muted transition-colors duration-[var(--duration-state)] ease-[var(--ease-standard)] hover:text-ink\",\n                )}\n              >\n                {content}\n              </LinkComponent>\n            ) : (\n              <span\n                aria-current={isLast ? \"page\" : undefined}\n                className={cn(\n                  inlineClass,\n                  isLast && \"text-ink min-w-0\",\n                )}\n              >\n                {content}\n              </span>\n            );\n\n          return (\n            <Fragment key={`${idx}-${item.name}`}>\n              <li\n                className={cn(\n                  \"flex items-center gap-2\",\n                  isLast && \"min-w-0\",\n                  hiddenOnMobile && \"hidden sm:flex\",\n                )}\n              >\n                {idx > 0 && <Separator />}\n                {crumb}\n              </li>\n              {collapseMiddle && idx === 0 && (\n                <li\n                  className={cn(\n                    \"items-center gap-2\",\n                    expanded ? \"hidden\" : \"flex sm:hidden\",\n                  )}\n                >\n                  <Separator />\n                  <button\n                    type=\"button\"\n                    onClick={() => setExpanded(true)}\n                    aria-expanded={expanded}\n                    aria-label=\"Show hidden breadcrumbs\"\n                    className=\"inline-flex size-6 items-center justify-center rounded-[var(--radius-8)] text-ink-muted outline-none transition-colors duration-[var(--duration-state)] ease-[var(--ease-standard)] hover:bg-layer-hover hover:text-ink active:bg-layer-hover focus-visible:shadow-[inset_0_-2px_0_var(--focus-ring-color)]\"\n                  >\n                    <DotsThree className=\"size-4\" aria-hidden />\n                  </button>\n                </li>\n              )}\n            </Fragment>\n          );\n        })}\n      </ol>\n    </nav>\n  );\n}\n",
      "type": "registry:ui",
      "target": "components/ui/breadcrumb.tsx"
    }
  ],
  "type": "registry:ui"
}