Item

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 "@/registry/lib/surface"
7import { Separator } from "@/registry/ui/separator"
8 
9function ItemGroup({ className, ...props }: React.ComponentProps<"div">) {
10  return (
11    <div
12      role="list"
13      data-slot="item-group"
14      className={cn(
15        "group/item-group flex w-full flex-col gap-4 has-data-[size=sm]:gap-2.5 has-data-[size=xs]:gap-2",
16        className
17      )}
18      {...props}
19    />
20  )
21}
22 
23function ItemSeparator({
24  className,
25  ...props
26}: React.ComponentProps<typeof Separator>) {
27  return (
28    <Separator
29      data-slot="item-separator"
30      orientation="horizontal"
31      className={cn("my-2", className)}
32      {...props}
33    />
34  )
35}
36 
37const itemVariants = cva(
38  "group/item flex w-full flex-wrap items-center rounded-lg border text-sm outline-none transition-opacity duration-[var(--d-drift)] ease-[var(--ease-drift)] hover:opacity-60 focus-visible:outline focus-visible:outline-offset-2 focus-visible:outline-ring",
39  {
40    variants: {
41      variant: {
42        default: "border-transparent",
43        outline: "border-border",
44        muted: "border-transparent bg-muted/50",
45      },
46      size: {
47        default: "gap-2.5 px-3 py-2.5",
48        sm: "gap-2.5 px-3 py-2.5",
49        xs: "gap-2 px-2.5 py-2 in-data-[slot=dropdown-menu-content]:p-0",
50      },
51    },
52    defaultVariants: {
53      variant: "default",
54      size: "default",
55    },
56  }
57)
58 
59function Item({
60  className,
61  variant = "default",
62  size = "default",
63  render,
64  ...props
65}: useRender.ComponentProps<"div"> & VariantProps<typeof itemVariants>) {
66  return useRender({
67    defaultTagName: "div",
68    props: mergeProps<"div">(
69      {
70        className: cn(itemVariants({ variant, size, className })),
71      },
72      props
73    ),
74    render,
75    state: {
76      slot: "item",
77      variant,
78      size,
79    },
80  })
81}
82 
83const itemMediaVariants = cva(
84  "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",
85  {
86    variants: {
87      variant: {
88        default: "bg-transparent",
89        icon: "[&_svg:not([class*='size-'])]:size-4",
90        image:
91// … truncated