item

1import * as React from "react"
2import { cva, type VariantProps } from "class-variance-authority"
3import { Slot } from "radix-ui"
4 
5import { cn } from "@/registry/bases/radix/lib/utils"
6import { Separator } from "@/registry/bases/radix/ui/separator"
7 
8function ItemGroup({ className, ...props }: React.ComponentProps<"div">) {
9  return (
10    <div
11      role="list"
12      data-slot="item-group"
13      className={cn(
14        "gap-4 has-[[data-size=sm]]:gap-2.5 has-[[data-size=xs]]:gap-2 group/item-group flex w-full flex-col",
15        className
16      )}
17      {...props}
18    />
19  )
20}
21 
22function ItemSeparator({
23  className,
24  ...props
25}: React.ComponentProps<typeof Separator>) {
26  return (
27    <Separator
28      data-slot="item-separator"
29      orientation="horizontal"
30      className={cn("my-2", className)}
31      {...props}
32    />
33  )
34}
35 
36const itemVariants = cva(
37  "[a]:hover:bg-muted rounded-lg border text-sm w-full group/item focus-visible:border-ring focus-visible:ring-ring/50 flex items-center flex-wrap outline-none transition-colors duration-100 focus-visible:ring-[3px] [a]:transition-colors",
38  {
39    variants: {
40      variant: {
41        default: "border-transparent",
42        outline: "border-border",
43        muted: "bg-muted/50 border-transparent",
44      },
45      size: {
46        default: "gap-2.5 px-3 py-2.5",
47        sm: "gap-2.5 px-3 py-2.5",
48        xs: "gap-2 px-2.5 py-2 [[data-slot=dropdown-menu-content]_&]:p-0",
49      },
50    },
51    defaultVariants: {
52      variant: "default",
53      size: "default",
54    },
55  }
56)
57 
58function Item({
59  className,
60  variant = "default",
61  size = "default",
62  asChild = false,
63  ...props
64}: React.ComponentProps<"div"> &
65  VariantProps<typeof itemVariants> & { asChild?: boolean }) {
66  const Comp = asChild ? Slot.Root : "div"
67  return (
68    <Comp
69      data-slot="item"
70      data-variant={variant}
71      data-size={size}
72      className={cn(itemVariants({ variant, size, className }))}
73      {...props}
74    />
75  )
76}
77 
78const itemMediaVariants = cva(
79  "gap-2 group-has-[[data-slot=item-description]]/item:translate-y-0.5 group-has-[[data-slot=item-description]]/item:self-start flex shrink-0 items-center justify-center [&_svg]:pointer-events-none",
80  {
81    variants: {
82      variant: {
83        default: "bg-transparent",
84        icon: "[&_svg:not([class*='size-'])]:size-4",
85        image: "size-10 overflow-hidden rounded-sm group-data-[size=sm]/item:size-8 group-data-[size=xs]/item:size-6 [&_img]:size-full [&_img]:object-cover",
86      },
87    },
88// … truncated