Item

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