item

1---
2import type { HTMLAttributes } from "astro/types"
3import { cva, type VariantProps } from "class-variance-authority"
4 
5import { cn } from "@/lib/utils"
6 
7type Props = VariantProps<typeof variants> &
8  HTMLAttributes<"div"> &
9  HTMLAttributes<"a">
10 
11const variants = cva(
12  "[a]:hover:bg-muted group/item focus-visible:border-ring focus-visible:ring-ring/50 flex w-full flex-wrap items-center rounded-md border text-sm transition-colors duration-100 outline-none focus-visible:ring-[3px] [a]:transition-colors",
13  {
14    variants: {
15      variant: {
16        default: "border-transparent",
17        inset: "border-transparent",
18        outline: "border-border",
19        muted: "bg-muted/50 border-transparent",
20      },
21      size: {
22        default: "gap-3.5 px-4 py-3.5",
23        sm: "gap-2.5 px-3 py-2.5",
24        xs: "gap-2 px-2.5 py-2 in-data-[slot=dropdown-menu-content]:p-0",
25      },
26    },
27    compoundVariants: [
28      {
29        variant: "inset",
30        size: "default",
31        class: "-mx-4",
32      },
33      {
34        variant: "inset",
35        size: "sm",
36        class: "-mx-3",
37      },
38      {
39        variant: "inset",
40        size: "xs",
41        class: "-mx-2.5",
42      },
43    ],
44    defaultVariants: {
45      variant: "default",
46      size: "default",
47    },
48  }
49)
50 
51const {
52  class: className,
53  variant = "default",
54  size = "default",
55  href,
56  ...props
57} = Astro.props
58 
59const Comp = href ? "a" : "div"
60---
61 
62<Comp
63  data-slot="item"
64  data-variant={variant}
65  data-size={size}
66  class={cn(variants({ variant, size }), className)}
67  href={href}
68  {...props}
69>
70  <slot />
71</Comp>