Marker

1import * as React from "react"
2import { mergeProps } from "@base-ui/react/merge-props"
3import { useRender } from "@base-ui/react/use-render"
4import { cva, type VariantProps } from "class-variance-authority"
5 
6import { cn } from "@/lib/utils"
7 
8const markerVariants = cva(
9  "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",
10  {
11    variants: {
12      variant: {
13        default: "",
14        separator:
15          "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",
16        border: "border-b border-border pb-2",
17      },
18    },
19  }
20)
21 
22function Marker({
23  className,
24  variant = "default",
25  render,
26  ...props
27}: useRender.ComponentProps<"div"> & VariantProps<typeof markerVariants>) {
28  return useRender({
29    defaultTagName: "div",
30    props: mergeProps<"div">(
31      {
32        className: cn(markerVariants({ variant, className })),
33      },
34      props
35    ),
36    render,
37    state: {
38      slot: "marker",
39      variant,
40    },
41  })
42}
43 
44function MarkerIcon({ className, ...props }: React.ComponentProps<"span">) {
45  return (
46    <span
47      data-slot="marker-icon"
48      aria-hidden="true"
49      className={cn(
50        "size-4 shrink-0 [&_svg:not([class*='size-'])]:size-4",
51        className
52      )}
53      {...props}
54    />
55  )
56}
57 
58function MarkerContent({ className, ...props }: React.ComponentProps<"span">) {
59  return (
60    <span
61      data-slot="marker-content"
62      className={cn(
63        "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",
64        className
65      )}
66      {...props}
67    />
68  )
69}
70 
71export { Marker, MarkerIcon, MarkerContent, markerVariants }