marker

1import * as React from "react"
2import { cva, type VariantProps } from "class-variance-authority"
3import { Slot } from "radix-ui"
4 
5import { cn } from "@/lib/utils"
6 
7const markerVariants = cva(
8  "group/marker relative flex min-h-4 w-full items-center gap-2 text-left text-sm text-muted-foreground [&_svg:not([class*='size-'])]:size-4 [a]:underline [a]:underline-offset-3 [a]:hover:text-foreground",
9  {
10    variants: {
11      variant: {
12        default: "",
13        separator:
14          "before:mr-1 before:h-px before:min-w-0 before:flex-1 before:bg-border after:ml-1 after:h-px after:min-w-0 after:flex-1 after:bg-border",
15        border: "border-b border-border pb-2",
16      },
17    },
18  }
19)
20 
21function Marker({
22  className,
23  variant = "default",
24  asChild = false,
25  ...props
26}: React.ComponentProps<"div"> &
27  VariantProps<typeof markerVariants> & {
28    asChild?: boolean
29  }) {
30  const Comp = asChild ? Slot.Root : "div"
31 
32  return (
33    <Comp
34      data-slot="marker"
35      data-variant={variant}
36      className={cn(markerVariants({ variant, className }))}
37      {...props}
38    />
39  )
40}
41 
42function MarkerIcon({ className, ...props }: React.ComponentProps<"span">) {
43  return (
44    <span
45      data-slot="marker-icon"
46      aria-hidden="true"
47      className={cn(
48        "size-4 shrink-0 [&_svg:not([class*='size-'])]:size-4",
49        className
50      )}
51      {...props}
52    />
53  )
54}
55 
56function MarkerContent({ className, ...props }: React.ComponentProps<"span">) {
57  return (
58    <span
59      data-slot="marker-content"
60      className={cn(
61        "min-w-0 wrap-break-word group-data-[variant=separator]/marker:flex-none group-data-[variant=separator]/marker:text-center *:[a]:underline *:[a]:underline-offset-3 *:[a]:hover:text-foreground",
62        className
63      )}
64      {...props}
65    />
66  )
67}
68 
69export { Marker, MarkerIcon, MarkerContent, markerVariants }