marker

1import type { PolymorphicProps } from "@kobalte/core/polymorphic";
2import { Polymorphic } from "@kobalte/core/polymorphic";
3 
4import { cn } from "~/lib/utils.ts";
5import type { VariantProps } from "class-variance-authority";
6import { cva } from "class-variance-authority";
7import type { Component, ComponentProps, ValidComponent } from "solid-js";
8 
9import { splitProps } from "solid-js";
10 
11const markerVariants = cva(
12  "min-h-4 gap-2 text-left text-sm text-muted-foreground [a]:underline [a]:underline-offset-3 [a]:hover:text-foreground [&_svg:not([class*='size-'])]:size-4 group/marker relative flex w-full items-center",
13  {
14    variants: {
15      variant: {
16        default: "",
17        separator: "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",
18        border: "border-b border-border pb-2",
19      },
20    },
21    defaultVariants: {
22      variant: "default",
23    },
24  },
25);
26 
27type MarkerProps =
28  & VariantProps<typeof markerVariants>
29  & { class?: string | undefined };
30 
31const Marker = <T extends ValidComponent = "div">(
32  props: PolymorphicProps<T, MarkerProps>,
33) => {
34  const [local, others] = splitProps(props as MarkerProps, [
35    "class",
36    "variant",
37  ]);
38  return (
39    <Polymorphic
40      as="div"
41      data-slot="marker"
42      data-variant={local.variant ?? "default"}
43      class={cn(
44        markerVariants({ variant: local.variant, class: local.class }),
45      )}
46      {...others}
47    />
48  );
49};
50 
51const MarkerIcon: Component<ComponentProps<"span">> = (props) => {
52  const [local, others] = splitProps(props, ["class"]);
53  return (
54    <span
55      data-slot="marker-icon"
56      aria-hidden="true"
57      class={cn("size-4 [&_svg:not([class*='size-'])]:size-4 shrink-0", local.class)}
58      {...others}
59    />
60  );
61};
62 
63const MarkerContent: Component<ComponentProps<"span">> = (props) => {
64  const [local, others] = splitProps(props, ["class"]);
65  return (
66    <span
67      data-slot="marker-content"
68      class={cn("group-data-[variant=separator]/marker:flex-none group-data-[variant=separator]/marker:text-center *:[a]:underline *:[a]:underline-offset-3 *:[a]:hover:text-foreground wrap-break-word min-w-0", local.class)}
69      {...others}
70    />
71  );
72};
73 
74export type { MarkerProps };
75export { Marker, MarkerContent, MarkerIcon, markerVariants };