menu

1import * as React from "react"
2import { Slot } from "@radix-ui/react-slot"
3import { cva, type VariantProps } from "class-variance-authority"
4 
5import { cn } from "@/lib/utils"
6import "./menu.css"
7 
8/* ------------------------------------------------------------------ */
9/*  CVA                                                                */
10/* ------------------------------------------------------------------ */
11 
12const menuItemVariants = cva(
13  "menu-item flex items-center rounded-[var(--layout-radius-lg)] text-content-note font-accent",
14  {
15    variants: {
16      variant: {
17        default: "",
18        accent: "menu-item-accent",
19      },
20      size: {
21        sm: "h-[var(--layout-size-lg)] gap-[var(--layout-gap-sm)] py-[var(--layout-padding-sm)] px-[var(--layout-padding-md)] [&_.menu-item-icon]:h-[var(--layout-size-xs)] [&_.menu-item-icon]:w-[var(--layout-size-xs)] [&_.menu-item-icon>svg]:h-[var(--layout-size-xs)] [&_.menu-item-icon>svg]:w-[var(--layout-size-xs)]",
22        md: "h-9 gap-[var(--layout-gap-md)] p-[var(--layout-padding-md)] [&_.menu-item-icon]:h-[var(--layout-size-xs)] [&_.menu-item-icon]:w-[var(--layout-size-xs)] [&_.menu-item-icon>svg]:h-[var(--layout-size-xs)] [&_.menu-item-icon>svg]:w-[var(--layout-size-xs)]",
23      },
24    },
25    defaultVariants: {
26      variant: "default",
27      size: "md",
28    },
29  }
30)
31 
32/* ------------------------------------------------------------------ */
33/*  Menu                                                               */
34/* ------------------------------------------------------------------ */
35 
36function Menu({
37  className,
38  children,
39  ref,
40  ...props
41}: React.ComponentProps<"nav">) {
42  return (
43    <nav
44      ref={ref}
45      data-slot="menu"
46      className={cn("flex flex-col gap-[var(--layout-gap-xl)]", className)}
47      {...props}
48    >
49      {children}
50    </nav>
51  )
52}
53 
54/* ------------------------------------------------------------------ */
55/*  MenuGroup                                                          */
56/* ------------------------------------------------------------------ */
57 
58function MenuGroup({
59  className,
60  label,
61  children,
62  ref,
63  ...props
64}: React.ComponentProps<"div"> & { label?: string }) {
65  return (
66    <div
67      ref={ref}
68      data-slot="menu-group"
69      role="group"
70      aria-label={label || undefined}
71      className={cn("flex flex-col gap-[var(--layout-gap-md)]", className)}
72      {...props}
73    >
74      {label && (
75        <span
76          aria-hidden="true"
77// … truncated