dropdown-menu

1'use client';
2 
3import * as React from 'react';
4import { Menu as MenuPrimitive } from '@base-ui/react/menu';
5 
6import { cn } from '@/registry/lib/utils';
7import { CheckIcon, CaretRightIcon as ChevronRightIcon } from '@phosphor-icons/react';
8 
9type DropdownVariant = 'soft' | 'solid';
10type DropdownTheme = 'gray' | 'accent';
11 
12interface DropdownMenuContextValue {
13  variant: DropdownVariant;
14  theme: DropdownTheme;
15}
16 
17const DropdownMenuContext = React.createContext<DropdownMenuContextValue>({
18  variant: 'soft',
19  theme: 'gray',
20});
21 
22function DropdownMenu({ ...props }: MenuPrimitive.Root.Props) {
23  return <MenuPrimitive.Root data-slot="dropdown-menu" {...props} />;
24}
25function DropdownMenuPortal({ ...props }: MenuPrimitive.Portal.Props) {
26  return <MenuPrimitive.Portal data-slot="dropdown-menu-portal" {...props} />;
27}
28function DropdownMenuTrigger({ ...props }: MenuPrimitive.Trigger.Props) {
29  return <MenuPrimitive.Trigger data-slot="dropdown-menu-trigger" {...props} />;
30}
31function DropdownMenuContent({
32  align = 'start',
33  alignOffset = 0,
34  side = 'bottom',
35  sideOffset = 4,
36  variant = 'soft',
37  theme = 'gray',
38  className,
39  ...props
40}: MenuPrimitive.Popup.Props &
41  Pick<MenuPrimitive.Positioner.Props, 'align' | 'alignOffset' | 'side' | 'sideOffset'> & {
42    variant?: DropdownVariant;
43    theme?: DropdownTheme;
44  }) {
45  return (
46    <DropdownMenuContext.Provider value={{ variant, theme }}>
47      <MenuPrimitive.Portal>
48        <MenuPrimitive.Positioner
49          className="isolate z-50 outline-none"
50          align={align}
51          alignOffset={alignOffset}
52          side={side}
53          sideOffset={sideOffset}
54        >
55          <MenuPrimitive.Popup
56            data-slot="dropdown-menu-content"
57            data-variant={variant}
58            data-theme={theme !== 'gray' ? theme : undefined}
59            className={cn(menuContentBaseStyles, className)}
60            {...props}
61          />
62        </MenuPrimitive.Positioner>
63      </MenuPrimitive.Portal>
64    </DropdownMenuContext.Provider>
65  );
66}
67function DropdownMenuGroup({ ...props }: MenuPrimitive.Group.Props) {
68  return <MenuPrimitive.Group data-slot="dropdown-menu-group" {...props} />;
69}
70function DropdownMenuLabel({
71  className,
72  inset,
73  ...props
74}: MenuPrimitive.GroupLabel.Props & {
75  inset?: boolean;
76}) {
77  return (
78    <MenuPrimitive.GroupLabel
79      data-slot="dropdown-menu-label"
80      data-inset={inset}
81      className={cn(
82// … truncated