Menubar

1import { Menubar as KobalteMenubar } from "@kobalte/core/menubar";
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 Menubar: Component<ComponentProps<typeof KobalteMenubar> & { class?: string }> = (props) => {
8  const [local, rest] = splitProps(props, ["class"]);
9  return (
10    <KobalteMenubar
11      class={cn(
12        "flex h-10 items-center space-x-1 rounded-md border bg-background p-1",
13        local.class,
14      )}
15      {...rest}
16    />
17  );
18};
19 
20const MenubarMenu = KobalteMenubar.Menu;
21 
22const MenubarTrigger: Component<ComponentProps<typeof KobalteMenubar.Trigger>> = (props) => {
23  const [local, rest] = splitProps(props, ["class"]);
24  return (
25    <KobalteMenubar.Trigger
26      class={cn(
27        "flex cursor-default select-none items-center rounded-sm px-3 py-1.5 text-sm font-medium outline-none",
28        "focus:bg-accent focus:text-accent-foreground",
29        "data-[expanded]:bg-accent data-[expanded]:text-accent-foreground",
30        local.class,
31      )}
32      {...rest}
33    />
34  );
35};
36 
37const MenubarContent: Component<ComponentProps<typeof KobalteMenubar.Content>> = (props) => {
38  const [local, rest] = splitProps(props, ["class"]);
39  return (
40    <KobalteMenubar.Portal>
41      <KobalteMenubar.Content
42        class={cn(
43          "z-50 min-w-[12rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md",
44          "data-[expanded]:animate-in data-[closed]:animate-out",
45          "data-[closed]:fade-out-0 data-[expanded]:fade-in-0",
46          "data-[closed]:zoom-out-95 data-[expanded]:zoom-in-95",
47          local.class,
48        )}
49        {...rest}
50      />
51    </KobalteMenubar.Portal>
52  );
53};
54 
55const MenubarItem: Component<ComponentProps<typeof KobalteMenubar.Item> & { inset?: boolean }> = (
56  props,
57) => {
58  const [local, rest] = splitProps(props, ["class", "inset"]);
59  return (
60    <KobalteMenubar.Item
61      class={cn(
62        "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none",
63        "focus:bg-accent focus:text-accent-foreground",
64        "data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
65        local.inset && "pl-8",
66        local.class,
67      )}
68      {...rest}
69    />
70  );
71};
72 
73const MenubarSub = KobalteMenubar.Sub;
74 
75const MenubarSubTrigger: Component<
76// … truncated