Item

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