Dropdown Menu

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