Dropdown Menu

1"use client";
2 
3import * as React from "react";
4import { Menu as MenuPrimitive } from "@base-ui/react/menu";
5 
6import { cn } from "@/lib/utils";
7import { ChevronRightIcon, CheckIcon } from "lucide-react";
8 
9function DropdownMenu({ ...props } = {}) {
10	return <MenuPrimitive.Root data-slot="dropdown-menu" {...props} />;
11}
12 
13function DropdownMenuPortal({ ...props } = {}) {
14	return <MenuPrimitive.Portal data-slot="dropdown-menu-portal" {...props} />;
15}
16 
17function DropdownMenuTrigger({ ...props } = {}) {
18	return <MenuPrimitive.Trigger data-slot="dropdown-menu-trigger" {...props} />;
19}
20 
21function DropdownMenuContent({
22	align = "start",
23	alignOffset = 0,
24	side = "bottom",
25	sideOffset = 4,
26	className = "",
27	...props
28}) {
29	return (
30		<MenuPrimitive.Portal>
31			<MenuPrimitive.Positioner
32				className="isolate z-50 outline-none"
33				align={align}
34				alignOffset={alignOffset}
35				side={side}
36				sideOffset={sideOffset}
37			>
38				<MenuPrimitive.Popup
39					data-slot="dropdown-menu-content"
40					className={cn(
41						"data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 bg-popover text-popover-foreground min-w-32 rounded-lg p-1 shadow-md ring-1 duration-100 z-50 max-h-(--available-height) w-(--anchor-width) origin-(--transform-origin) overflow-x-hidden overflow-y-auto outline-none data-closed:overflow-hidden",
42						className,
43					)}
44					{...props}
45				/>
46			</MenuPrimitive.Positioner>
47		</MenuPrimitive.Portal>
48	);
49}
50 
51function DropdownMenuGroup({ ...props } = {}) {
52	return <MenuPrimitive.Group data-slot="dropdown-menu-group" {...props} />;
53}
54 
55function DropdownMenuLabel({ className = "", inset = false, ...props }) {
56	return (
57		<MenuPrimitive.Group data-slot="dropdown-menu-group">
58			<MenuPrimitive.GroupLabel
59				data-slot="dropdown-menu-label"
60				data-inset={inset}
61				className={cn(
62					"text-muted-foreground px-2 py-1.5 text-xs data-[inset]:pl-8",
63					className,
64				)}
65				{...props}
66			/>
67		</MenuPrimitive.Group>
68	);
69}
70 
71function DropdownMenuItem({
72	className = "",
73	inset = false,
74	variant = "default",
75	...props
76}) {
77	return (
78		<MenuPrimitive.Item
79			data-slot="dropdown-menu-item"
80			data-inset={inset}
81			data-variant={variant}
82			className={cn(
83// … truncated