Item

1// Base UI base item — class strings from the maintainer-supplied radix source, verbatim. Ten of the
2// eleven parts are plain host elements, and the eleventh (`ItemSeparator`) delegates to this base's
3// own Separator, so it picks up Base UI's `aria-orientation` dialect automatically.
4//
5// NO DIALECT RISK IN THE VARIANTS, which is worth stating because they look like the ones that
6// caught toggle and slider: `data-[size=…]` and `data-[variant=…]` here read attributes THIS
7// component writes itself, not state emitted by a primitive. Nothing underneath emits anything.
8//
9// `Item` SHIPS WITHOUT `asChild`, the same call as badge and breadcrumb in this base. Radix swaps in
10// `Slot`; React Aria takes a `render` function; Base UI has no Slot, and item has no primitive to
11// borrow a `render` prop from, so nothing here settles the spelling upstream uses. Adding it later
12// is additive; shipping the wrong shape is breaking. A consumer needing a different element can
13// apply `itemVariants({ variant, size })` directly, which is what the class export is for.
14import { cva, type VariantProps } from 'class-variance-authority';
15 
16import { cn } from '@/lib/utils';
17import { Separator } from '@/components/ui/separator';
18 
19type DivProps = { className?: string } & Record<string, unknown>;
20 
21export function ItemGroup({ className, ...props }: DivProps) @{
22	<div
23		role="list"
24		data-slot="item-group"
25		className={cn(
26			'group/item-group flex w-full flex-col gap-4 has-data-[size=sm]:gap-2.5 has-data-[size=xs]:gap-2',
27			className,
28		)}
29		{...props}
30	/>
31}
32 
33export function ItemSeparator({ className, ...props }: DivProps) @{
34	<Separator
35		data-slot="item-separator"
36		orientation="horizontal"
37		className={cn('my-2', className)}
38		{...props}
39	/>
40}
41 
42export const itemVariants = cva(
43	'group/item flex w-full flex-wrap items-center rounded-lg 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',
44	{
45		variants: {
46			variant: {
47				default: 'border-transparent',
48				outline: 'border-border',
49				muted: 'border-transparent bg-muted/50',
50			},
51			size: {
52				default: 'gap-2.5 px-3 py-2.5',
53				sm: 'gap-2.5 px-3 py-2.5',
54				xs: 'gap-2 px-2.5 py-2 in-data-[slot=dropdown-menu-content]:p-0',
55			},
56		},
57		defaultVariants: {
58			variant: 'default',
59			size: 'default',
60		},
61	},
62);
63 
64export interface ItemProps extends Record<string, unknown> {
65	className?: string;
66// … truncated