Breadcrumb

1import { ArrowsHorizontalIcon, CaretRightIcon } from "@phosphor-icons/react";
2import { Slot as SlotPrimitive } from "radix-ui";
3import * as React from "react";
4 
5import { type MaterialAxisProps, materialSurface, splitAxisProps } from "@/lib/material";
6import { cn } from "@/lib/utils";
7 
8const Breadcrumb = React.forwardRef<
9  HTMLElement,
10  React.ComponentPropsWithoutRef<"nav"> & {
11    separator?: React.ComponentType<{
12      className?: string;
13    }>;
14  }
15>(({ ...props }, ref) => <nav ref={ref} aria-label="breadcrumb" data-slot="breadcrumb" {...props} />);
16Breadcrumb.displayName = "Breadcrumb";
17 
18/* Role: bordered adaptive glass. */
19const ROLE = {
20  border: true,
21};
22 
23const BreadcrumbList = React.forwardRef<
24  HTMLOListElement,
25  React.ComponentPropsWithoutRef<"ol"> &
26    MaterialAxisProps & {
27      variant?: "default" | "glass";
28    }
29>(({ className, variant = "glass", ...props }, ref) => {
30  const [axes, rest] = splitAxisProps(props);
31  /* Variant classes carry BEHAVIOR only; the surface comes from materialSurface. */
32  const variants = {
33    default: "",
34    glass: "rounded-lg px-4 py-2",
35  };
36 
37  const m = materialSurface(variant === "default" ? null : ROLE, axes);
38 
39  return (
40    <ol
41      ref={ref}
42      data-slot="breadcrumb-list"
43      data-material={m?.["data-material"]}
44      className={cn(
45        m?.className,
46        "flex flex-wrap items-center gap-1.5 break-words text-sm text-muted-foreground sm:gap-2.5",
47        variants[variant],
48        className,
49      )}
50      {...rest}
51    />
52  );
53});
54BreadcrumbList.displayName = "BreadcrumbList";
55 
56const BreadcrumbItem = React.forwardRef<HTMLLIElement, React.ComponentPropsWithoutRef<"li">>(({ className, ...props }, ref) => (
57  <li ref={ref} data-slot="breadcrumb-item" className={cn("inline-flex items-center gap-1.5", className)} {...props} />
58));
59BreadcrumbItem.displayName = "BreadcrumbItem";
60 
61const BreadcrumbLink = React.forwardRef<
62  HTMLAnchorElement,
63  React.ComponentPropsWithoutRef<"a"> & {
64    asChild?: boolean;
65  }
66>(({ asChild, className, ...props }, ref) => {
67  const Comp = asChild ? SlotPrimitive.Slot : "a";
68  return <Comp ref={ref} data-slot="breadcrumb-link" className={cn("transition-colors hover:text-foreground", className)} {...props} />;
69});
70BreadcrumbLink.displayName = "BreadcrumbLink";
71 
72const BreadcrumbPage = React.forwardRef<HTMLSpanElement, React.ComponentPropsWithoutRef<"span">>(({ className, ...props }, ref) => (
73  <span
74    ref={ref}
75    data-slot="breadcrumb-page"
76    role="link"
77// … truncated