Dropdown Menu

1import { DropdownMenu as KobalteDropdownMenu } from "@kobalte/core/dropdown-menu";
2import { Check, ChevronRight, Circle } from "lucide-solid";
3import type { Component, ComponentProps, JSX } from "solid-js";
4import { splitProps } from "solid-js";
5import { cn } from "~/lib/utils";
6 
7const DropdownMenu = KobalteDropdownMenu;
8const DropdownMenuTrigger = KobalteDropdownMenu.Trigger;
9const DropdownMenuPortal = KobalteDropdownMenu.Portal;
10const DropdownMenuSub = KobalteDropdownMenu.Sub;
11const DropdownMenuRadioGroup = KobalteDropdownMenu.RadioGroup;
12 
13const DropdownMenuSubTrigger: Component<
14  ComponentProps<typeof KobalteDropdownMenu.SubTrigger> & { inset?: boolean }
15> = (props) => {
16  const [local, rest] = splitProps(props, ["class", "inset", "children"]);
17  return (
18    <KobalteDropdownMenu.SubTrigger
19      class={cn(
20        "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none",
21        "focus:bg-accent data-[expanded]:bg-accent",
22        local.inset && "pl-8",
23        local.class,
24      )}
25      {...rest}
26    >
27      {local.children}
28      <ChevronRight class="ml-auto h-4 w-4" />
29    </KobalteDropdownMenu.SubTrigger>
30  );
31};
32 
33const DropdownMenuSubContent: Component<ComponentProps<typeof KobalteDropdownMenu.SubContent>> = (
34  props,
35) => {
36  const [local, rest] = splitProps(props, ["class"]);
37  return (
38    <KobalteDropdownMenu.SubContent
39      class={cn(
40        "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg",
41        "data-[expanded]:animate-in data-[closed]:animate-out",
42        "data-[closed]:fade-out-0 data-[expanded]:fade-in-0",
43        "data-[closed]:zoom-out-95 data-[expanded]:zoom-in-95",
44        local.class,
45      )}
46      {...rest}
47    />
48  );
49};
50 
51const DropdownMenuContent: Component<ComponentProps<typeof KobalteDropdownMenu.Content>> = (
52  props,
53) => {
54  const [local, rest] = splitProps(props, ["class"]);
55  return (
56    <KobalteDropdownMenu.Portal>
57      <KobalteDropdownMenu.Content
58        class={cn(
59          "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md",
60          "data-[expanded]:animate-in data-[closed]:animate-out",
61          "data-[closed]:fade-out-0 data-[expanded]:fade-in-0",
62          "data-[closed]:zoom-out-95 data-[expanded]:zoom-in-95",
63          local.class,
64        )}
65        {...rest}
66      />
67    </KobalteDropdownMenu.Portal>
68  );
69};
70 
71const DropdownMenuItem: Component<
72// … truncated