Breadcrumb

1"use client";
2 
3import * as React from "react";
4import { mergeProps } from "@base-ui/react/merge-props";
5import { useRender } from "@base-ui/react/use-render";
6 
7import { cn } from "@/lib/utils";
8import { ChevronRightIcon, MoreHorizontalIcon } from "lucide-react";
9 
10function Breadcrumb({ className, ...props }: React.ComponentProps<"nav">) {
11  return (
12    <nav aria-label="breadcrumb" data-slot="breadcrumb" className={cn(className)} {...props} />
13  );
14}
15 
16function BreadcrumbList({ className, ...props }: React.ComponentProps<"ol">) {
17  return (
18    <ol
19      data-slot="breadcrumb-list"
20      className={cn(
21        "flex flex-wrap items-center gap-1.5 text-sm font-base wrap-break-word text-foreground sm:gap-2.5",
22        className,
23      )}
24      {...props}
25    />
26  );
27}
28 
29function BreadcrumbItem({ className, ...props }: React.ComponentProps<"li">) {
30  return (
31    <li
32      data-slot="breadcrumb-item"
33      className={cn("inline-flex items-center gap-1.5", className)}
34      {...props}
35    />
36  );
37}
38 
39function BreadcrumbLink({
40  asChild = false,
41  children,
42  className,
43  render,
44  ...props
45}: useRender.ComponentProps<"a"> & { asChild?: boolean }) {
46  const child = React.Children.toArray(children).find(React.isValidElement);
47 
48  return useRender({
49    defaultTagName: "a",
50    props: mergeProps<"a">(
51      {
52        className: cn("transition-colors hover:text-main", className),
53        children: asChild ? undefined : children,
54      },
55      props,
56    ),
57    render: asChild ? child : render,
58    state: {
59      slot: "breadcrumb-link",
60    },
61  });
62}
63 
64function BreadcrumbPage({ className, ...props }: React.ComponentProps<"span">) {
65  return (
66    <span
67      data-slot="breadcrumb-page"
68      role="link"
69      aria-disabled="true"
70      aria-current="page"
71      className={cn(className)}
72      {...props}
73    />
74  );
75}
76 
77function BreadcrumbSeparator({ children, className, ...props }: React.ComponentProps<"li">) {
78  return (
79    <li
80      data-slot="breadcrumb-separator"
81      role="presentation"
82      aria-hidden="true"
83      className={cn("[&>svg]:size-3.5", className)}
84      {...props}
85    >
86      {children ?? <ChevronRightIcon />}
87    </li>
88  );
89}
90 
91function BreadcrumbEllipsis({ className, ...props }: React.ComponentProps<"span">) {
92  return (
93    <span
94      data-slot="breadcrumb-ellipsis"
95      role="presentation"
96      aria-hidden="true"
97      className={cn("flex size-9 items-center justify-center [&>svg]:size-4", className)}
98      {...props}
99    >
100// … truncated