Dropdown-menu

1"use client";
2
3import * as React from "react";
4import { Menu as BaseMenu } from "@base-ui/react/menu";
5import { HugeiconsIcon } from "@hugeicons/react";
6import { ArrowRight01Icon, Tick02Icon } from "@hugeicons/core-free-icons";
7
8import { cn } from "@/lib/utils";
9import {
10  solidSurface,
11  type SurfaceLevel,
12} from "@/registry/default/lib/elevated";
13import {
14  SwitchVisual,
15  type SwitchVisualProps,
16} from "@/registry/default/switch/switch";
17
18// Shared shell for checkbox and radio items. Padding matches the plain menu
19// item so labels line up across every item type; the indicator lives in a
20// reserved right-hand column so toggling never shifts the label.
21const toggleItemClasses =
22  "group/switch data-highlighted:bg-surface-hover data-highlighted:text-accent-foreground grid cursor-default items-center rounded-md px-2.5 py-1.5 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-60 data-inset:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4";
23
24// The tick draws itself in on check. `pathLength` restates the path as 1 unit
25// long, so the dash values are fractions of the stroke and survive a HugeIcons
26// reshape. Deriving the icon array is the only way to reach the path.
27const tickIcon = Tick02Icon.map(([tag, attrs]) => [
28  tag,
29  { ...attrs, pathLength: 1 },
30]) as typeof Tick02Icon;
31
32const checkmarkClasses =
33  "[&_path]:ease-out-expo [&_path]:transition-[stroke-dashoffset] [&_path]:duration-150 [&_path]:[stroke-dasharray:1] in-data-checked:[&_path]:[stroke-dashoffset:0] in-data-unchecked:[&_path]:[stroke-dashoffset:1] motion-reduce:[&_path]:transition-none";
34
35function DropdownMenu<Payload = unknown>({
36  ...props
37}: BaseMenu.Root.Props<Payload>) {
38  return <BaseMenu.Root data-slot="dropdown-menu" {...props} />;
39}
40
41function DropdownMenuPortal({
42  ...props
43}: React.ComponentProps<typeof BaseMenu.Portal>) {
44  return <BaseMenu.Portal data-slot="dropdown-menu-portal" {...props} />;
45}
46
47function DropdownMenuTrigger({
48  ...props
49}: React.ComponentProps<typeof BaseMenu.Trigger>) {
50  return <BaseMenu.Trigger data-slot="dropdown-menu-trigger" {...props} />;
51}
52
53function DropdownMenuPositioner({
54  ...props
55}: React.ComponentProps<typeof BaseMenu.Positioner>) {
56  return (
57    <BaseMenu.Positioner data-slot="dropdown-menu-positioner" {...props} />
58  );
59}
60
61function DropdownMenuContent({
62  className,
63  children,
64  sideOffset = 4,
65// … truncated