Menu

1"use client";
2 
3import "./menu.css";
4import { Menu as BaseMenu } from "@base-ui/react/menu";
5import type React from "react";
6import { cn } from "tailwind-variants";
7 
8import { MenuContext, useMenuContext } from "./menu.context";
9import { menuVariants, type MenuVariants } from "./menu.variants";
10 
11export type MenuProps = MenuVariants & React.ComponentProps<typeof BaseMenu.Root>;
12 
13export const MenuRoot = ({ children, size, ...props }: MenuProps) => {
14  const slots = menuVariants({ size });
15 
16  return (
17    <MenuContext.Provider value={{ slots }}>
18      <BaseMenu.Root {...props}>{children}</BaseMenu.Root>
19    </MenuContext.Provider>
20  );
21};
22 
23export type MenuTriggerProps = React.ComponentProps<typeof BaseMenu.Trigger>;
24 
25export const MenuTrigger = ({ className, ...props }: MenuTriggerProps) => {
26  const { slots } = useMenuContext();
27  return <BaseMenu.Trigger className={cn(slots.trigger(), className)} {...props} />;
28};
29 
30export type MenuPortalProps = React.ComponentProps<typeof BaseMenu.Portal>;
31 
32export const MenuPortal = (props: MenuPortalProps) => {
33  return <BaseMenu.Portal {...props} />;
34};
35 
36export type MenuPositionerProps = React.ComponentProps<typeof BaseMenu.Positioner>;
37 
38export const MenuPositioner = ({ className, sideOffset = 4, ...props }: MenuPositionerProps) => {
39  const { slots } = useMenuContext();
40  return (
41    <BaseMenu.Positioner
42      className={cn(slots.positioner(), className)}
43      sideOffset={sideOffset}
44      {...props}
45    />
46  );
47};
48 
49export type MenuPopupProps = React.ComponentProps<typeof BaseMenu.Popup>;
50 
51export const MenuPopup = ({ className, ...props }: MenuPopupProps) => {
52  const { slots } = useMenuContext();
53  return <BaseMenu.Popup className={cn(slots.popup(), className)} {...props} />;
54};
55 
56export type MenuItemProps = React.ComponentProps<typeof BaseMenu.Item>;
57 
58export const MenuItem = ({ className, ...props }: MenuItemProps) => {
59  const { slots } = useMenuContext();
60  return <BaseMenu.Item className={cn(slots.item(), className)} {...props} />;
61};
62 
63export type MenuSeparatorProps = React.ComponentProps<typeof BaseMenu.Separator>;
64 
65export const MenuSeparator = ({ className, ...props }: MenuSeparatorProps) => {
66  const { slots } = useMenuContext();
67  return <BaseMenu.Separator className={cn(slots.separator(), className)} {...props} />;
68};
69 
70export type MenuSubmenuRootProps = React.ComponentProps<typeof BaseMenu.SubmenuRoot>;
71 
72export const MenuSubmenuRoot = (props: MenuSubmenuRootProps) => {
73// … truncated