Menubar

1import type { Component, ComponentProps, JSX, ValidComponent } from "solid-js"
2import { splitProps } from "solid-js"
3 
4import * as MenubarPrimitive from "@kobalte/core/menubar"
5import type { PolymorphicProps } from "@kobalte/core/polymorphic"
6 
7import { cn } from "~/lib/utils"
8 
9const MenubarGroup = MenubarPrimitive.Group
10const MenubarPortal = MenubarPrimitive.Portal
11const MenubarSub = MenubarPrimitive.Sub
12const MenubarRadioGroup = MenubarPrimitive.RadioGroup
13 
14type MenubarRootProps<T extends ValidComponent = "div"> = MenubarPrimitive.MenubarRootProps<T> & {
15  class?: string | undefined
16}
17 
18const Menubar = <T extends ValidComponent = "div">(
19  props: PolymorphicProps<T, MenubarRootProps<T>>
20) => {
21  const [local, others] = splitProps(props as MenubarRootProps, ["class"])
22  return (
23    <MenubarPrimitive.Root
24      class={cn(
25        "flex h-10 items-center space-x-1 rounded-md border bg-background p-1",
26        local.class
27      )}
28      {...others}
29    />
30  )
31}
32 
33const MenubarMenu: Component<MenubarPrimitive.MenubarMenuProps> = (props) => {
34  return <MenubarPrimitive.Menu gutter={8} {...props} />
35}
36 
37type MenubarTriggerProps<T extends ValidComponent = "button"> =
38  MenubarPrimitive.MenubarTriggerProps<T> & { class?: string | undefined }
39 
40const MenubarTrigger = <T extends ValidComponent = "button">(
41  props: PolymorphicProps<T, MenubarTriggerProps<T>>
42) => {
43  const [local, others] = splitProps(props as MenubarTriggerProps, ["class"])
44  return (
45    <MenubarPrimitive.Trigger
46      class={cn(
47        "flex cursor-default select-none items-center rounded-sm px-3 py-1.5 text-sm font-medium outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground",
48        local.class
49      )}
50      {...others}
51    />
52  )
53}
54 
55type MenubarContentProps<T extends ValidComponent = "div"> =
56  MenubarPrimitive.MenubarContentProps<T> & { class?: string | undefined }
57 
58const MenubarContent = <T extends ValidComponent = "div">(
59  props: PolymorphicProps<T, MenubarContentProps<T>>
60) => {
61  const [local, others] = splitProps(props as MenubarContentProps, ["class"])
62  return (
63    <MenubarPrimitive.Portal>
64      <MenubarPrimitive.Content
65        class={cn(
66          "z-50 min-w-48 origin-[var(--kb-menu-content-transform-origin)] animate-content-hide overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[expanded]:animate-content-show",
67          local.class
68        )}
69        {...others}
70// … truncated