{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"breadcrumb","type":"registry:ui","title":"Breadcrumb","description":"Shows where a page sits in the site's hierarchy, with links back up to each level.","dependencies":["lucide-react"],"registryDependencies":["https://dashral.com/r/utils.json"],"files":[{"path":"registry/dashral/breadcrumb.tsx","type":"registry:file","target":"components/dashral/breadcrumb.tsx","content":"import * as React from \"react\"\nimport { ChevronRight, MoreHorizontal } from \"lucide-react\"\n\nimport { cn } from \"./lib/utils\"\n\ntype BreadcrumbItem = {\n  label: React.ReactNode\n  /** Where it links. The last item is the current page and never links. */\n  href?: string\n  icon?: React.ReactNode\n}\n\ntype BreadcrumbProps = Omit<React.ComponentProps<\"nav\">, \"children\"> & {\n  items: BreadcrumbItem[]\n  /** Your router's link, e.g. Next.js Link; a plain <a> by default. */\n  linkAs?: React.ElementType\n  /** Longer trails show the first item, an ellipsis and the last ones; the ellipsis shows the rest when pressed. */\n  maxItems?: number\n  /** Between items; a chevron by default. */\n  /** The collapsed pages' button, for screen readers; {count} is how many it shows. */\n  moreLabel?: string\n  separator?: React.ReactNode\n  classNames?: { list?: string; item?: string; link?: string; page?: string; separator?: string }\n}\n\n/**\n * Where the current page sits in the site's hierarchy, in one tag. Put one per page, above the title. It works without\n * JavaScript, so it can take your router's link from a server component.\n */\nfunction Breadcrumb({\n  items,\n  linkAs: LinkComponent = \"a\",\n  maxItems,\n  separator = <ChevronRight className=\"rtl:-scale-x-100\" />,\n  \"aria-label\": ariaLabel = \"Breadcrumb\",\n  moreLabel = \"Show {count} more pages\",\n  className,\n  classNames,\n  ...props\n}: BreadcrumbProps) {\n  // Past maxItems: the first item, an ellipsis, and the last ones. The middle stays in the page, hidden until the\n  // ellipsis (a checkbox, so it needs no script) is ticked.\n  const collapse = maxItems !== undefined && maxItems >= 2 && items.length > maxItems\n  const hiddenFrom = 1\n  const hiddenTo = collapse ? items.length - (maxItems - 1) : 1\n  const hidden = (i: number) => collapse && i >= hiddenFrom && i < hiddenTo\n  const whenHidden = \"hidden group-has-[[data-slot=breadcrumb-expand]:checked]/breadcrumb:inline-flex\"\n\n  return (\n    <nav data-slot=\"breadcrumb\" aria-label={ariaLabel} className={cn(\"group/breadcrumb\", className)} {...props}>\n      <ol className={cn(\"flex flex-wrap items-center gap-1.5 text-sm break-words text-muted-foreground\", classNames?.list)}>\n        {items.map((item, i) => {\n          const last = i === items.length - 1\n          return (\n            <React.Fragment key={i}>\n              {collapse && i === hiddenFrom && (\n                <>\n                  <li className=\"inline-flex items-center group-has-[[data-slot=breadcrumb-expand]:checked]/breadcrumb:hidden\">\n                    <label className=\"flex size-5 items-center justify-center rounded-sm outline-none hover:text-foreground has-focus-visible:ring-2 has-focus-visible:ring-ring/50 [&_svg]:size-4\">\n                      <input type=\"checkbox\" data-slot=\"breadcrumb-expand\" className=\"sr-only\" />\n                      <MoreHorizontal aria-hidden />\n                      <span className=\"sr-only\">{moreLabel.replace(\"{count}\", String(hiddenTo - hiddenFrom))}</span>\n                    </label>\n                  </li>\n                  <li role=\"presentation\" aria-hidden className={cn(\"group-has-[[data-slot=breadcrumb-expand]:checked]/breadcrumb:hidden [&>svg]:size-3.5\", classNames?.separator)}>\n                    {separator}\n                  </li>\n                </>\n              )}\n              <li className={cn(\"inline-flex items-center gap-1.5 [&_svg]:size-3.5\", hidden(i) && whenHidden, classNames?.item)}>\n                {last || !item.href ? (\n                  <span\n                    aria-current={last ? \"page\" : undefined}\n                    className={cn(\"inline-flex items-center gap-1.5\", last && \"font-medium text-foreground\", classNames?.page)}\n                  >\n                    {item.icon}\n                    {item.label}\n                  </span>\n                ) : (\n                  <LinkComponent\n                    href={item.href}\n                    className={cn(\n                      \"inline-flex items-center gap-1.5 rounded-sm transition-colors outline-none hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring/50\",\n                      classNames?.link\n                    )}\n                  >\n                    {item.icon}\n                    {item.label}\n                  </LinkComponent>\n                )}\n              </li>\n              {!last && (\n                <li role=\"presentation\" aria-hidden className={cn(\"[&>svg]:size-3.5\", hidden(i) && whenHidden, classNames?.separator)}>\n                  {separator}\n                </li>\n              )}\n            </React.Fragment>\n          )\n        })}\n      </ol>\n    </nav>\n  )\n}\n\nexport { Breadcrumb, type BreadcrumbProps, type BreadcrumbItem }\n"}]}