{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "breadcrumb",
  "type": "registry:ui",
  "title": "Breadcrumb",
  "description": "Fluent 2-styled breadcrumb with shadcn APIs. Seven composable parts (Breadcrumb, BreadcrumbList, BreadcrumbItem, BreadcrumbLink, BreadcrumbPage, BreadcrumbSeparator, BreadcrumbEllipsis), inline SVG chevron/ellipsis glyphs to stay a Server Component.",
  "author": "graundtech <https://github.com/graundtech/fluent2-react-kit>",
  "dependencies": [
    "@radix-ui/react-slot"
  ],
  "registryDependencies": [
    "https://fluent2-react-kit.graund.io/r/utils.json"
  ],
  "files": [
    {
      "path": "components/ui/breadcrumb.tsx",
      "type": "registry:ui",
      "target": "components/ui/breadcrumb.tsx",
      "content": "import { Slot } from \"@radix-ui/react-slot\";\nimport type { ComponentProps } from \"react\";\n\nimport { cn } from \"@/lib/utils\";\n\n/**\n * Breadcrumb — Fluent 2-styled, shadcn-API breadcrumb family.\n *\n * Pure markup, matching shadcn/ui's Breadcrumb structure exactly: `Breadcrumb`\n * (`<nav aria-label=\"breadcrumb\">`), `BreadcrumbList` (`<ol>`), `BreadcrumbItem`\n * (`<li>`), `BreadcrumbLink` (`<a>`, `asChild`-capable via Radix `Slot`),\n * `BreadcrumbPage` (`<span role=\"link\" aria-current=\"page\">` for the\n * non-interactive current step), `BreadcrumbSeparator` (`<li\n * role=\"presentation\" aria-hidden=\"true\">`) and `BreadcrumbEllipsis` (same\n * presentation pattern, for a collapsed run of items) —\n * https://ui.shadcn.com/docs/components/breadcrumb.\n *\n * Two deliberate divergences from shadcn, both driven by this kit's\n * conventions doc (§9):\n *\n * 1. `BreadcrumbSeparator`'s default glyph and `BreadcrumbEllipsis`'s dots are\n *    inline `<svg>`, not lucide's `ChevronRight`/`MoreHorizontal` (shadcn) or\n *    `@fluentui/react-icons` (this kit's usual icon source). Importing from\n *    `@fluentui/react-icons` forces `\"use client\"` onto the whole file (its\n *    icon sizing module calls a client-only Griffel API at module scope — see\n *    conventions §9 / `select.tsx`), which would needlessly turn this static\n *    markup component into a client boundary. An inline SVG keeps `Breadcrumb`\n *    a Server Component, matching `Card`/`Separator`.\n * 2. `BreadcrumbLink`'s hover treatment intentionally mirrors this kit's own\n *    `Link` component's `default` variant (`hover:text-foreground`, color\n *    transition only, underline only on hover via the surrounding\n *    `hover:underline` here is *not* applied — shadcn's breadcrumb link has no\n *    underline at all, even on hover, since it sits in a compact trail rather\n *    than prose) rather than inventing a new recipe: `hover:text-foreground\n *    transition-colors duration-fast ease-ease` plus the standard\n *    focus-visible ring (conventions §4). Kept text-only (no underline) to\n *    match shadcn's breadcrumb parity goal; reach for `Link` directly if a\n *    consumer wants the underlined treatment.\n *\n * No `variant`/`size` props and no `cva` table — shadcn's Breadcrumb ships\n * none, so every part is a plain function component (matches `Card`).\n *\n * Server-safe: no `\"use client\"`, no hooks — the React import is type-only.\n */\n\nfunction Breadcrumb({ className, ...props }: 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({ className, ...props }: ComponentProps<\"ol\">) {\n  return (\n    <ol\n      data-slot=\"breadcrumb-list\"\n      className={cn(\n        // Trail text is Fluent NeutralForeground2 (#424242), one grey step\n        // darker than muted-foreground (Figma validation pass 2, 9077:5763).\n        \"flex flex-wrap items-center gap-1.5 text-sm text-foreground-2 sm:gap-2.5\",\n        className\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction BreadcrumbItem({ className, ...props }: 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  asChild = false,\n  className,\n  ...props\n}: ComponentProps<\"a\"> & { asChild?: boolean }) {\n  const Comp = asChild ? Slot : \"a\";\n\n  return (\n    <Comp\n      data-slot=\"breadcrumb-link\"\n      className={cn(\n        // Fluent breadcrumb items are button-like pills — SubtleBackground\n        // hover/pressed fills on a 4px radius (the Figma item symbols are\n        // literally Type=Button; validation pass 2, node 9077:5740). The fill\n        // uses the kit's standard subtle-hover pair (--accent), the same\n        // one-grey-step drift already accepted for Select/Menu highlights.\n        \"rounded-md px-1.5 py-0.5 outline-none transition-colors duration-fast ease-ease hover:bg-accent hover:text-foreground active:bg-accent/80\",\n        \"focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background\",\n        className\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction BreadcrumbPage({ className, ...props }: ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"breadcrumb-page\"\n      role=\"link\"\n      aria-disabled=\"true\"\n      aria-current=\"page\"\n      // Current page is emphasized by WEIGHT ONLY (Body 1 -> Body 1 Strong,\n      // same NeutralForeground2 trail color) — Figma validation pass 2, node\n      // 9077:5783. Padding mirrors the link pill so items align.\n      className={cn(\"px-1.5 py-0.5 font-semibold\", className)}\n      {...props}\n    />\n  );\n}\n\nfunction BreadcrumbSeparator({\n  children,\n  className,\n  ...props\n}: ComponentProps<\"li\">) {\n  return (\n    <li\n      data-slot=\"breadcrumb-separator\"\n      role=\"presentation\"\n      aria-hidden=\"true\"\n      className={cn(\"[&>svg]:size-3.5\", className)}\n      {...props}\n    >\n      {children ?? (\n        <svg\n          viewBox=\"0 0 16 16\"\n          fill=\"none\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n        >\n          <path\n            d=\"M6 3.5L10 8L6 12.5\"\n            stroke=\"currentColor\"\n            strokeWidth=\"1.5\"\n            strokeLinecap=\"round\"\n            strokeLinejoin=\"round\"\n          />\n        </svg>\n      )}\n    </li>\n  );\n}\n\nfunction BreadcrumbEllipsis({ className, ...props }: ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"breadcrumb-ellipsis\"\n      role=\"presentation\"\n      aria-hidden=\"true\"\n      className={cn(\"flex size-6 items-center justify-center\", className)}\n      {...props}\n    >\n      <svg\n        viewBox=\"0 0 16 16\"\n        fill=\"none\"\n        className=\"size-4\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n      >\n        <circle cx=\"2.5\" cy=\"8\" r=\"1.25\" fill=\"currentColor\" />\n        <circle cx=\"8\" cy=\"8\" r=\"1.25\" fill=\"currentColor\" />\n        <circle cx=\"13.5\" cy=\"8\" r=\"1.25\" fill=\"currentColor\" />\n      </svg>\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"
    }
  ]
}