Breadcrumb

1// Base UI base breadcrumb — class strings from the maintainer-supplied radix source, verbatim.
2// Six of the seven parts are plain host elements with no primitive underneath and no state
3// attributes, so they carry across unchanged and there is no dialect to get wrong.
4//
5// `BreadcrumbLink` IS MISSING ITS ESCAPE HATCH, and unlike badge that costs something real: the
6// `asChild` branch is how a router's Link gets plugged in, which is most of what this family is
7// for. It is still left out, for the same reason:
8//
9//   radix        `asChild` swaps in `Slot`, a pure prop-merger
10//   React Aria   routes through RAC's own `Link` primitive with a `render` prop
11//   Base UI      has neither — no Slot, and no Link primitive
12//
13// Base UI's house convention is a `render` ELEMENT prop backed by `useRender`, and this base
14// already relies on it where a real primitive offers it (see pagination). But breadcrumb has no
15// primitive, so nothing here settles whether upstream's Base UI breadcrumb implements `render`
16// itself, and an API shape is not something a later commit can quietly correct — adding it is
17// additive, shipping the wrong spelling is breaking.
18//
19// Until then a router link still works, it just has to carry the classes itself:
20//
21//     <BreadcrumbItem>
22//       <RouterLink className="transition-colors hover:text-foreground">Home</RouterLink>
23//     </BreadcrumbItem>
24//
25// which loses only the `data-slot="breadcrumb-link"` hook.
26import { ChevronRightIcon, MoreHorizontalIcon } from '@octanejs/lucide';
27import { type OctaneNode } from 'octane';
28 
29import { cn } from '@/lib/utils';
30 
31type Props = { className?: string } & Record<string, unknown>;
32 
33export function Breadcrumb({ className, ...props }: Props) @{
34	<nav aria-label="breadcrumb" data-slot="breadcrumb" className={cn(className)} {...props} />
35}
36 
37export function BreadcrumbList({ className, ...props }: Props) @{
38	<ol
39		data-slot="breadcrumb-list"
40		className={cn(
41			'flex flex-wrap items-center gap-1.5 text-sm wrap-break-word text-muted-foreground',
42			className,
43		)}
44		{...props}
45	/>
46}
47 
48export function BreadcrumbItem({ className, ...props }: Props) @{
49	<li
50		data-slot="breadcrumb-item"
51		className={cn('inline-flex items-center gap-1', className)}
52		{...props}
53	/>
54}
55 
56export interface BreadcrumbLinkProps extends Props {
57	/**
58 * NOT SUPPORTED in this base — see the header. Declared as `never` so markup carrying it over
59// … truncated