item

1import * as React from "react"
2import { cva, type VariantProps } from "class-variance-authority"
3import { Slot } from "radix-ui"
4 
5import { cn } from "@/registry/radix-sera/lib/utils"
6import { Separator } from "@/registry/radix-sera/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        "group/item-group flex w-full flex-col gap-4 has-data-[size=sm]:gap-2.5 has-data-[size=xs]:gap-2",
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  "group/item flex w-full flex-wrap items-center rounded-none border text-sm transition-colors duration-100 outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 [a]:transition-colors [a]:hover:bg-muted",
38  {
39    variants: {
40      variant: {
41        default: "border-transparent",
42        outline: "border-border",
43        muted: "border-transparent bg-muted/50",
44      },
45      size: {
46        default: "gap-3.5 px-4 py-3.5",
47        sm: "gap-3.5 px-3.5 py-3",
48        xs: "gap-2.5 px-3 py-2.5 in-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  "flex shrink-0 items-center justify-center gap-2 group-has-data-[slot=item-description]/item:translate-y-0.5 group-has-data-[slot=item-description]/item:self-start [&_svg]:pointer-events-none",
80  {
81    variants: {
82      variant: {
83        default: "bg-transparent",
84        icon: "[&_svg:not([class*='size-'])]:size-4",
85        image:
86// … truncated