menubar

1import * as MenubarPrimitive from "@kobalte/core/menubar";
2import type { PolymorphicProps } from "@kobalte/core/polymorphic";
3 
4import { cn } from "~/lib/utils.ts";
5import IconCheck from "~icons/lucide/check";
6import IconChevronRight from "~icons/lucide/chevron-right";
7 
8import type { Component, ComponentProps, JSX, ValidComponent } from "solid-js";
9import { splitProps } from "solid-js";
10 
11// Kobalte's Portal and Sub render no DOM node, so unlike upstream there is
12// no element to stamp a data-slot attribute on.
13const MenubarPortal = MenubarPrimitive.Portal;
14const MenubarSub = MenubarPrimitive.Sub;
15 
16type MenubarRootProps<T extends ValidComponent = "div"> =
17  & MenubarPrimitive.MenubarRootProps<T>
18  & {
19    class?: string | undefined;
20  };
21 
22const Menubar = <T extends ValidComponent = "div">(
23  props: PolymorphicProps<T, MenubarRootProps<T>>,
24) => {
25  const [local, others] = splitProps(props as MenubarRootProps, ["class"]);
26  return (
27    <MenubarPrimitive.Root
28      data-slot="menubar"
29      class={cn("h-8 gap-0.5 rounded-lg border p-[3px] flex items-center", local.class)}
30      {...others}
31    />
32  );
33};
34 
35// Kobalte's MenubarMenu renders no DOM node either; the popper offsets live
36// here instead of on the content, matching upstream's sideOffset={8} and
37// alignOffset={-4} (Kobalte's popper defaults to gutter 0, shift 0).
38const MenubarMenu: Component<MenubarPrimitive.MenubarMenuProps> = (props) => {
39  return <MenubarPrimitive.Menu gutter={8} shift={-4} {...props} />;
40};
41 
42type MenubarGroupProps<T extends ValidComponent = "div"> =
43  MenubarPrimitive.MenubarGroupProps<T>;
44 
45const MenubarGroup = <T extends ValidComponent = "div">(
46  props: PolymorphicProps<T, MenubarGroupProps<T>>,
47) => {
48  return <MenubarPrimitive.Group data-slot="menubar-group" {...props} />;
49};
50 
51type MenubarRadioGroupProps<T extends ValidComponent = "div"> =
52  MenubarPrimitive.MenubarRadioGroupProps<T>;
53 
54const MenubarRadioGroup = <T extends ValidComponent = "div">(
55  props: PolymorphicProps<T, MenubarRadioGroupProps<T>>,
56) => {
57  return (
58    <MenubarPrimitive.RadioGroup
59      data-slot="menubar-radio-group"
60      {...(props as MenubarRadioGroupProps)}
61    />
62  );
63};
64 
65type MenubarTriggerProps<T extends ValidComponent = "button"> =
66  & MenubarPrimitive.MenubarTriggerProps<T>
67  & {
68    class?: string | undefined;
69  };
70 
71const MenubarTrigger = <T extends ValidComponent = "button">(
72  props: PolymorphicProps<T, MenubarTriggerProps<T>>,
73) => {
74// … truncated