dropdown-menu

1"use client"
2 
3import * as React from "react"
4import { Menu as BaseMenu } from "@base-ui/react/menu"
5import { CheckIcon, ChevronRightIcon, CircleIcon } from "lucide-react"
6 
7import { cn } from "@/lib/utils"
8 
9function DropdownMenu({
10	...props
11}: React.ComponentProps<typeof BaseMenu.Root>) {
12	return <BaseMenu.Root data-slot="dropdown-menu" {...props} />
13}
14 
15function DropdownMenuPortal({
16	...props
17}: React.ComponentProps<typeof BaseMenu.Portal>) {
18	return <BaseMenu.Portal data-slot="dropdown-menu-portal" {...props} />
19}
20 
21function DropdownMenuTrigger({
22	...props
23}: React.ComponentProps<typeof BaseMenu.Trigger>) {
24	return <BaseMenu.Trigger data-slot="dropdown-menu-trigger" {...props} />
25}
26 
27function DropdownMenuPositioner({
28	...props
29}: React.ComponentProps<typeof BaseMenu.Positioner>) {
30	return <BaseMenu.Positioner data-slot="dropdown-menu-positioner" {...props} />
31}
32 
33function DropdownMenuContent({
34	className,
35	sideOffset = 4,
36	align = "center",
37	side = "bottom",
38	...props
39}: React.ComponentProps<typeof BaseMenu.Popup> & {
40	align?: BaseMenu.Positioner.Props["align"]
41	sideOffset?: BaseMenu.Positioner.Props["sideOffset"]
42	side?: BaseMenu.Positioner.Props["side"]
43}) {
44	return (
45		<DropdownMenuPortal>
46			<DropdownMenuPositioner
47				className="max-h-(--available-height)"
48				sideOffset={sideOffset}
49				side={side}
50				align={align}
51			>
52				<BaseMenu.Popup
53					data-slot="dropdown-menu-content"
54					className={cn(
55						"bg-popover text-popover-foreground z-50 min-w-48 origin-(--transform-origin) overflow-hidden rounded-md border p-1 shadow-md transition-all data-ending-style:scale-98 data-ending-style:opacity-0 data-starting-style:scale-98 data-starting-style:opacity-0",
56						className
57					)}
58					{...props}
59				/>
60			</DropdownMenuPositioner>
61		</DropdownMenuPortal>
62	)
63}
64 
65function DropdownMenuGroup({
66	...props
67}: React.ComponentProps<typeof BaseMenu.Group>) {
68	return <BaseMenu.Group data-slot="dropdown-menu-group" {...props} />
69}
70 
71function DropdownMenuItem({
72	className,
73	inset,
74	variant = "default",
75	...props
76}: React.ComponentProps<typeof BaseMenu.Item> & {
77	inset?: boolean
78	variant?: "default" | "destructive"
79}) {
80	return (
81		<BaseMenu.Item
82			data-slot="dropdown-menu-item"
83			data-inset={inset}
84			data-variant={variant}
85			className={cn(
86// … truncated