Dropdown

1'use client';
2 
3import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
4import { Check, ChevronRight, Circle } from 'lucide-react';
5import { ComponentProps } from 'react';
6 
7import { Label2 } from '@/components/ui/typography';
8import { cn } from '@/lib/utils';
9 
10/*
11 * UX4G dropdown: min-width 10rem, border-radius 0.5rem, padding-y 0.5rem,
12 * border 1px solid neutral-200, item padding 0.25rem 1rem,
13 * item hover bg primary-50, active bg primary, header color secondary (neutral-500),
14 * divider: border-top 1px neutral-200, margin-y 0.5rem.
15 */
16 
17/** Dropdown menu root component. */
18function Dropdown(props: ComponentProps<typeof DropdownMenuPrimitive.Root>) {
19  return <DropdownMenuPrimitive.Root {...props} />;
20}
21 
22/** Dropdown menu trigger button. */
23function DropdownTrigger(props: ComponentProps<typeof DropdownMenuPrimitive.Trigger>) {
24  return <DropdownMenuPrimitive.Trigger {...props} />;
25}
26 
27/** Dropdown menu item group. */
28function DropdownGroup(props: ComponentProps<typeof DropdownMenuPrimitive.Group>) {
29  return <DropdownMenuPrimitive.Group {...props} />;
30}
31 
32/** Dropdown menu portal container. */
33function DropdownPortal(props: ComponentProps<typeof DropdownMenuPrimitive.Portal>) {
34  return <DropdownMenuPrimitive.Portal {...props} />;
35}
36 
37/** Dropdown submenu root. */
38function DropdownSub(props: ComponentProps<typeof DropdownMenuPrimitive.Sub>) {
39  return <DropdownMenuPrimitive.Sub {...props} />;
40}
41 
42/** Dropdown radio item group. */
43function DropdownRadioGroup(props: ComponentProps<typeof DropdownMenuPrimitive.RadioGroup>) {
44  return <DropdownMenuPrimitive.RadioGroup {...props} />;
45}
46 
47/** Dropdown submenu trigger item. */
48function DropdownSubTrigger({
49  className,
50  inset,
51  children,
52  ...props
53}: ComponentProps<typeof DropdownMenuPrimitive.SubTrigger> & { inset?: boolean }) {
54  return (
55    <DropdownMenuPrimitive.SubTrigger
56      className={cn(
57        'hover:bg-primary-50 focus:bg-primary-50 data-[state=open]:bg-primary-50 flex cursor-default items-center px-4 py-1 outline-none select-none',
58        inset && 'pl-8',
59        className,
60      )}
61      {...props}
62    >
63      <Label2 className='text-sm'>{children}</Label2>
64      <ChevronRight className='ml-auto size-4' />
65    </DropdownMenuPrimitive.SubTrigger>
66  );
67}
68 
69/** Dropdown submenu content panel. */
70function DropdownSubContent({
71  className,
72  ...props
73}: ComponentProps<typeof DropdownMenuPrimitive.SubContent>) {
74  return (
75    <DropdownMenuPrimitive.SubContent
76      className={cn(
77// … truncated