1import * as React from "react"
  2import { Slot } from "@radix-ui/react-slot"
  3import { ChevronRight, MoreHorizontal } from "lucide-react"
  4
  5import { cn } from "@marzneshin/utils"
  6
  7const Breadcrumb = React.forwardRef<
  8  HTMLElement,
  9  React.ComponentPropsWithoutRef<"nav"> & {
 10    separator?: React.ReactNode
 11  }
 12>(({ ...props }, ref) => <nav ref={ref} aria-label="breadcrumb" {...props} />)
 13Breadcrumb.displayName = "Breadcrumb"
 14
 15const BreadcrumbList = React.forwardRef<
 16  HTMLOListElement,
 17  React.ComponentPropsWithoutRef<"ol">
 18>(({ className, ...props }, ref) => (
 19  <ol
 20    ref={ref}
 21    className={cn(
 22      "flex flex-wrap items-center gap-1.5 break-words text-sm text-muted-foreground sm:gap-2.5",
 23      className
 24    )}
 25    {...props}
 26  />
 27))
 28BreadcrumbList.displayName = "BreadcrumbList"
 29
 30const BreadcrumbItem = React.forwardRef<
 31  HTMLLIElement,
 32  React.ComponentPropsWithoutRef<"li">
 33>(({ className, ...props }, ref) => (
 34  <li
 35    ref={ref}
 36    className={cn("inline-flex items-center gap-1.5", className)}
 37    {...props}
 38  />
 39))
 40BreadcrumbItem.displayName = "BreadcrumbItem"
 41
 42const BreadcrumbLink = React.forwardRef<
 43  HTMLAnchorElement,
 44  React.ComponentPropsWithoutRef<"a"> & {
 45    asChild?: boolean
 46  }
 47>(({ asChild, className, ...props }, ref) => {
 48  const Comp = asChild ? Slot : "a"
 49
 50  return (
 51    <Comp
 52      ref={ref}
 53      className={cn("transition-colors hover:text-foreground", className)}
 54      {...props}
 55    />
 56  )
 57})
 58BreadcrumbLink.displayName = "BreadcrumbLink"
 59
 60const BreadcrumbPage = React.forwardRef<
 61  HTMLSpanElement,
 62  React.ComponentPropsWithoutRef<"span">
 63>(({ className, ...props }, ref) => (
 64  <span
 65    ref={ref}
 66    role="link"
 67    aria-disabled="true"
 68    aria-current="page"
 69    className={cn("font-normal text-foreground", className)}
 70    {...props}
 71  />
 72))
 73BreadcrumbPage.displayName = "BreadcrumbPage"
 74
 75const BreadcrumbSeparator = ({
 76  children,
 77  className,
 78  ...props
 79}: React.ComponentProps<"li">) => (
 80  <li
 81    role="presentation"
 82    aria-hidden="true"
 83    className={cn("[&>svg]:size-3.5", className)}
 84    {...props}
 85  >
 86    {children ?? <ChevronRight />}
 87  </li>
 88)
 89BreadcrumbSeparator.displayName = "BreadcrumbSeparator"
 90
 91const BreadcrumbEllipsis = ({
 92  className,
 93  ...props
 94}: React.ComponentProps<"span">) => (
 95  <span
 96    role="presentation"
 97    aria-hidden="true"
 98    className={cn("flex h-9 w-9 items-center justify-center", className)}
 99    {...props}
100  >
101    <MoreHorizontal className="h-4 w-4" />
102    <span className="sr-only">More</span>
103  </span>
104)
105BreadcrumbEllipsis.displayName = "BreadcrumbElipssis"
106
107export {
108  Breadcrumb,
109  BreadcrumbList,
110  BreadcrumbItem,
111  BreadcrumbLink,
112  BreadcrumbPage,
113  BreadcrumbSeparator,
114  BreadcrumbEllipsis,
115}