Menu Bar

1"use client";
2 
3import { cva, type VariantProps } from "class-variance-authority";
4import * as React from "react";
5import { type HoverEffect, hoverEffects } from "@/lib/hover-effects";
6import { type MaterialAxisProps, materialSurface, splitAxisProps } from "@/lib/material";
7import { cn } from "@/lib/utils";
8import { Button } from "./button";
9 
10/* Variant classes carry BEHAVIOR only; the surface comes from materialSurface. */
11const menuBarVariants = cva("", {
12  variants: {
13    variant: {
14      default: "bg-card text-card-foreground border shadow-sm",
15      glass: "text-foreground",
16    },
17  },
18  defaultVariants: {
19    variant: "glass",
20  },
21});
22 
23/* Role: borderless adaptive glass. */
24const ROLE = {};
25 
26export interface MenuBarProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof menuBarVariants>, MaterialAxisProps {
27  effect?: HoverEffect;
28}
29 
30const MenuBar = React.forwardRef<HTMLDivElement, MenuBarProps>(({ className, variant = "glass", effect, children, ...props }, ref) => {
31  const [axes, rest] = splitAxisProps(props);
32  const m = materialSurface(variant === "default" ? null : ROLE, axes);
33 
34  return (
35    <div
36      ref={ref}
37      role="menubar"
38      data-material={m?.["data-material"]}
39      className={cn(
40        m?.className,
41        "inline-flex items-center gap-1 rounded-md p-1",
42        menuBarVariants({
43          variant,
44        }),
45        effect &&
46          hoverEffects({
47            hover: effect,
48          }),
49        className,
50      )}
51      {...rest}
52    >
53      {children}
54    </div>
55  );
56});
57MenuBar.displayName = "MenuBar";
58 
59export interface MenuBarItemProps extends React.ComponentProps<typeof Button> {
60  active?: boolean;
61}
62 
63const MenuBarItem = React.forwardRef<HTMLButtonElement, MenuBarItemProps>(({ className, active, variant = "ghost", ...props }, ref) => {
64  return (
65    <Button
66      ref={ref}
67      variant={variant}
68      className={cn("h-8 px-3 text-sm", active && "bg-foreground/10 text-accent-foreground", className)}
69      {...props}
70    />
71  );
72});
73MenuBarItem.displayName = "MenuBarItem";
74 
75export { MenuBar, MenuBarItem };