{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "breadcrumb",
  "title": "Breadcrumb",
  "description": "Displays the path to the current page and lets the user navigate back up the hierarchy.",
  "dependencies": [
    "@base-ui/react@^1.6.0",
    "@untitledui/icons@^0.0.22"
  ],
  "registryDependencies": [
    "@nx-ui/utils"
  ],
  "files": [
    {
      "path": "components/ui/breadcrumb.tsx",
      "content": "import * as React from \"react\"\nimport { mergeProps } from \"@base-ui/react/merge-props\"\nimport { useRender } from \"@base-ui/react/use-render\"\n\nimport { cn } from \"@/lib/utils\"\nimport { ChevronRight, DotsHorizontal } from \"@untitledui/icons\"\n\n/**\n * Visual variants for the breadcrumb trail, matching the UUI \"Breadcrumbs\"\n * types (text / button / text-line): `default` is the plain text trail;\n * `button` renders each crumb as a hover pill (set it per crumb on\n * `BreadcrumbLink`/`BreadcrumbPage`, and on `<BreadcrumbList>` for the\n * tighter pill spacing); `line` (list-level only) frames the trail with the\n * UUI top-and-bottom hairline treatment.\n */\ntype BreadcrumbVariant = \"default\" | \"button\"\ntype BreadcrumbListVariant = BreadcrumbVariant | \"line\"\n\nfunction Breadcrumb({ className, ...props }: React.ComponentProps<\"nav\">) {\n  return (\n    <nav\n      aria-label=\"breadcrumb\"\n      data-slot=\"breadcrumb\"\n      className={cn(className)}\n      {...props}\n    />\n  )\n}\n\nfunction BreadcrumbList({\n  className,\n  variant = \"default\",\n  ...props\n}: React.ComponentProps<\"ol\"> & { variant?: BreadcrumbListVariant }) {\n  return (\n    <ol\n      data-slot=\"breadcrumb-list\"\n      data-variant={variant}\n      className={cn(\n        \"flex flex-wrap items-center text-sm wrap-break-word text-muted-foreground\",\n        // UUI spacing: text trails gap-1.5/2, button trails tighter (the\n        // pills carry their own padding).\n        variant === \"button\" ? \"gap-0.5 md:gap-1\" : \"gap-1.5 md:gap-2\",\n        // The UUI \"text-line\" treatment: hairlines above and below the trail.\n        variant === \"line\" &&\n          \"relative py-2 pl-2 after:pointer-events-none after:absolute after:inset-0 after:border-y after:border-border-secondary\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction BreadcrumbItem({ className, ...props }: React.ComponentProps<\"li\">) {\n  return (\n    <li\n      data-slot=\"breadcrumb-item\"\n      className={cn(\"inline-flex items-center gap-1.5\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction BreadcrumbLink({\n  className,\n  render,\n  variant = \"default\",\n  ...props\n}: useRender.ComponentProps<\"a\"> & { variant?: BreadcrumbVariant }) {\n  return useRender({\n    defaultTagName: \"a\",\n    props: mergeProps<\"a\">(\n      {\n        // UUI type: crumb labels are text-sm font-semibold, quaternary at\n        // rest easing to tertiary on hover; icons run size-5.\n        className: cn(\n          \"flex cursor-pointer items-center gap-1 rounded-md font-semibold text-muted-foreground transition-colors duration-100 ease-linear outline-none hover:text-text-tertiary_hover focus-visible:ring-2 focus-visible:ring-ring [&>svg]:size-5 [&>svg]:text-fg-quaternary hover:[&>svg]:text-fg-quaternary_hover\",\n          variant === \"button\" && \"px-2 py-1 hover:bg-muted\",\n          className\n        ),\n      },\n      props\n    ),\n    render,\n    state: {\n      slot: \"breadcrumb-link\",\n    },\n  })\n}\n\nfunction BreadcrumbPage({\n  className,\n  variant = \"default\",\n  ...props\n}: React.ComponentProps<\"span\"> & { variant?: BreadcrumbVariant }) {\n  return (\n    <span\n      data-slot=\"breadcrumb-page\"\n      role=\"link\"\n      aria-disabled=\"true\"\n      aria-current=\"page\"\n      className={cn(\n        \"flex items-center gap-1 font-semibold text-foreground [&>svg]:size-5 [&>svg]:text-fg-quaternary\",\n        variant === \"button\" &&\n          \"rounded-md bg-muted px-2 py-1 text-secondary-foreground\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nconst separatorGlyph = {\n  chevron: <ChevronRight />,\n  slash: <span className=\"text-fg-quaternary\">/</span>,\n  dot: (\n    <span aria-hidden=\"true\" className=\"inline-block size-1 rounded-full bg-current\" />\n  ),\n} as const\n\nfunction BreadcrumbSeparator({\n  children,\n  className,\n  variant = \"chevron\",\n  ...props\n}: React.ComponentProps<\"li\"> & {\n  variant?: keyof typeof separatorGlyph\n}) {\n  return (\n    <li\n      data-slot=\"breadcrumb-separator\"\n      role=\"presentation\"\n      aria-hidden=\"true\"\n      className={cn(\n        \"flex items-center text-fg-quaternary [&>svg]:size-4\",\n        variant === \"dot\" && \"px-0.5\",\n        className\n      )}\n      {...props}\n    >\n      {children ?? separatorGlyph[variant]}\n    </li>\n  )\n}\n\nfunction BreadcrumbEllipsis({\n  className,\n  ...props\n}: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"breadcrumb-ellipsis\"\n      role=\"presentation\"\n      aria-hidden=\"true\"\n      className={cn(\n        \"flex size-5 items-center justify-center text-muted-foreground [&>svg]:size-4\",\n        className\n      )}\n      {...props}\n    >\n      <DotsHorizontal />\n      <span className=\"sr-only\">More</span>\n    </span>\n  )\n}\n\nexport {\n  Breadcrumb,\n  BreadcrumbList,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n  BreadcrumbEllipsis,\n}\n",
      "type": "registry:ui"
    }
  ],
  "type": "registry:ui"
}