{
  "$schema": "https://blode.co/ui/schema/registry-item.json",
  "name": "breadcrumb",
  "title": "Breadcrumb",
  "author": "Matthew Blode",
  "description": "A navigation aid that shows the current page location within a hierarchy.",
  "dependencies": ["@base-ui/react"],
  "files": [
    {
      "path": "ui/breadcrumb.tsx",
      "content": "import { mergeProps } from \"@base-ui/react/merge-props\";\nimport { useRender } from \"@base-ui/react/use-render\";\nimport { ChevronRight, MoreHorizontal } from \"blode-icons-react\";\nimport type * as React from \"react\";\n\nimport { cn } from \"@/lib/utils\";\n\nconst Breadcrumb = ({ ...props }: React.ComponentProps<\"nav\">) => (\n  <nav aria-label=\"breadcrumb\" data-slot=\"breadcrumb\" {...props} />\n);\n\nconst BreadcrumbList = ({ className, ...props }: React.ComponentProps<\"ol\">) => (\n  <ol\n    className={cn(\n      \"flex flex-wrap items-center gap-1.5 break-words text-muted-foreground text-sm sm:gap-2.5\",\n      className,\n    )}\n    data-slot=\"breadcrumb-list\"\n    {...props}\n  />\n);\n\nconst BreadcrumbItem = ({ className, ...props }: React.ComponentProps<\"li\">) => (\n  <li\n    className={cn(\"inline-flex items-center gap-1.5\", className)}\n    data-slot=\"breadcrumb-item\"\n    {...props}\n  />\n);\n\nconst BreadcrumbLink = ({\n  asChild,\n  className,\n  children,\n  ...props\n}: React.ComponentProps<\"a\"> & {\n  asChild?: boolean;\n}) =>\n  useRender({\n    defaultTagName: \"a\",\n    props: mergeProps<\"a\">(\n      {\n        className: cn(\"transition-colors hover:text-foreground\", className),\n      },\n      asChild ? props : { ...props, children },\n    ),\n    render: asChild ? (children as React.ReactElement) : undefined,\n    state: {\n      slot: \"breadcrumb-link\",\n    },\n  });\n\nconst BreadcrumbPage = ({ className, ...props }: React.ComponentProps<\"span\">) => (\n  <span\n    aria-current=\"page\"\n    aria-disabled=\"true\"\n    className={cn(\"font-normal text-foreground\", className)}\n    data-slot=\"breadcrumb-page\"\n    {...props}\n  />\n);\n\nconst BreadcrumbSeparator = ({ children, className, ...props }: React.ComponentProps<\"li\">) => (\n  <li\n    aria-hidden=\"true\"\n    className={cn(\"[&>svg]:size-3.5\", className)}\n    data-slot=\"breadcrumb-separator\"\n    role=\"presentation\"\n    {...props}\n  >\n    {children ?? <ChevronRight />}\n  </li>\n);\n\nconst BreadcrumbEllipsis = ({ className, ...props }: React.ComponentProps<\"span\">) => (\n  <span\n    aria-hidden=\"true\"\n    className={cn(\"flex size-9 items-center justify-center\", className)}\n    data-slot=\"breadcrumb-ellipsis\"\n    role=\"presentation\"\n    {...props}\n  >\n    <MoreHorizontal className=\"size-4\" />\n    <span className=\"sr-only\">More</span>\n  </span>\n);\n\nexport {\n  Breadcrumb,\n  BreadcrumbList,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n  BreadcrumbEllipsis,\n};\n",
      "type": "registry:ui",
      "target": ""
    }
  ],
  "type": "registry:ui"
}