Breadcrumb Separator

1"use client";
2 
3import * as React from "react";
4import { cn } from "@/lib/utils";
5 
6/* ═══════════════════════════════════════════════════════════
7   Breadcrumb Separator — Reactive hover-cascade breadcrumb.
8 
9   The separator isn't decoration — it's a directional cue.
10   When you hover a parent item, you're expressing intent to
11   "go back." Items after the hovered one fade and shift right,
12   as if they'd be popped from the navigation stack. The
13   separator adjacent to the hovered item scales with a spring
14   overshoot, reinforcing the spatial metaphor.
15 
16   Two transition curves:
17     • Separator scale: cubic-bezier(0.34, 1.56, 0.64, 1) — spring
18     • Fade cascade: cubic-bezier(0.16, 1, 0.3, 1) — smooth ease-out
19   ═══════════════════════════════════════════════════════════ */
20 
21type SeparatorType = "chevron" | "slash" | "dot" | "arrow" | "dash";
22 
23interface BreadcrumbItem {
24  label: string;
25  href?: string;
26}
27 
28interface BreadcrumbSeparatorProps {
29  items: BreadcrumbItem[];
30  separator?: SeparatorType;
31  className?: string;
32}
33 
34function renderSeparator(type: SeparatorType) {
35  if (type === "chevron") {
36    return (
37      <svg width="14" height="14" viewBox="0 0 14 14" fill="none">
38        <path
39          d="M5.25 3.5L8.75 7L5.25 10.5"
40          stroke="currentColor"
41          strokeWidth="1.5"
42          strokeLinecap="round"
43          strokeLinejoin="round"
44        />
45      </svg>
46    );
47  }
48 
49  const chars: Record<string, string> = {
50    slash: "/",
51    dot: "·",
52    arrow: "→",
53    dash: "—",
54  };
55 
56  return <span className="text-xs leading-none">{chars[type]}</span>;
57}
58 
59export default function BreadcrumbSeparator({
60  items,
61  separator = "chevron",
62  className,
63}: BreadcrumbSeparatorProps) {
64  const [hoveredIndex, setHoveredIndex] = React.useState<number | null>(null);
65 
66  if (items.length === 0) return null;
67 
68  return (
69    <nav aria-label="Breadcrumb" className={cn("", className)}>
70      <ol
71        className="flex flex-wrap items-center gap-1"
72        onMouseLeave={() => setHoveredIndex(null)}
73      >
74        {items.map((item, index) => {
75          const isLast = index === items.length - 1;
76          const isLink = !!item.href && !isLast;
77          const isHovered = hoveredIndex === index;
78// … truncated