import { mergeProps } from "@base-ui/react/merge-props";
import { useRender } from "@base-ui/react/use-render";
import { ChevronRightIcon, MoreHorizontalIcon } from "lucide-react";
import type { ComponentProps } from "react";
import { cn } from "@/lib/utils";
function Breadcrumb({ className, ...props }: ComponentProps<"nav">) {
return (
<nav
aria-label="breadcrumb"
className={cn(className)}
data-slot="breadcrumb"
{...props}
/>
);
}
function BreadcrumbList({ className, ...props }: ComponentProps<"ol">) {
return (
<ol
className={cn(
"wrap-break-word flex flex-wrap items-center gap-1.5 text-muted-foreground text-xs/relaxed",
className
)}
data-slot="breadcrumb-list"
{...props}
/>
);
}
function BreadcrumbItem({ className, ...props }: ComponentProps<"li">) {
return (
<li
className={cn("inline-flex items-center gap-1", className)}
data-slot="breadcrumb-item"
{...props}
/>
);
}
function BreadcrumbLink({
className,
render,
...props
}: useRender.ComponentProps<"a">) {
return useRender({
defaultTagName: "a",
props: mergeProps<"a">(
{
className: cn("transition-colors hover:text-foreground", className),
},
props
),
render,
state: {
slot: "breadcrumb-link",
},
});
}
function BreadcrumbPage({ className, ...props }: ComponentProps<"span">) {
return (
<span
aria-current="page"
className={cn("font-normal text-foreground", className)}
data-slot="breadcrumb-page"
{...props}
/>
);
}
function BreadcrumbSeparator({
children,
className,
...props
}: ComponentProps<"li">) {
return (
<li
aria-hidden="true"
className={cn("[&>svg]:size-3.5", className)}
data-slot="breadcrumb-separator"
role="presentation"
{...props}
>
{children ?? <ChevronRightIcon className="rtl:rotate-180" />}
</li>
);
}
function BreadcrumbEllipsis({ className, ...props }: ComponentProps<"span">) {
return (
<span
aria-hidden="true"
className={cn(
"flex size-4 items-center justify-center [&>svg]:size-3.5",
className
)}
data-slot="breadcrumb-ellipsis"
role="presentation"
{...props}
>
<MoreHorizontalIcon />
<span className="sr-only">More</span>
</span>
);
}
export {
Breadcrumb,
BreadcrumbList,
BreadcrumbItem,
BreadcrumbLink,
BreadcrumbPage,
BreadcrumbSeparator,
BreadcrumbEllipsis,
};