Menubar

1"use client";2​3import * as React from "react";4import { Menubar as MenubarPrimitive } from "radix-ui";5import { CaretRightIcon, CheckIcon } from "@phosphor-icons/react/ssr";6​7import { usePortalContainer } from "@/lib/surface";8import { cn } from "@/lib/utils";9​10// A menu bar, extrapolated from the console (Figma 427:2715). The bar is the tab track: lilac with 10px corners and a11// 2px inset, its triggers 36px with 8px corners and 14px medium ink, the open one a white key with Shadow/S. Its menus12// are drawn as the dropdown menu (moving between them along the bar is instant: a closing panel that lingered would13// dismiss the next one, and the move is made by keyboard and pointer many times): the panel is a raised white panel (8px corners, the floating14// shadow) with 4px of padding; items are 36px rows with 8px corners like the rail's nav rows, a 20px glyph in the15// action-glyph purple 10px from a 14px ink label, and the lilac under the highlighted row. Section labels are 13px in16// the label purple ("Channels"), separators the rail's hairline, shortcuts 12px muted, destructive items red. The17// panel grows out of its trigger from 96 percent with a fade; highlighting a row is instant (menus are used by keyboard18// and many times a day).19const CONTENT =20  "z-50 max-h-(--radix-menubar-content-available-height) min-w-48 overflow-x-hidden overflow-y-auto rounded-control bg-surface p-1 text-fg shadow-floating outline-none data-[state=open]:animate-pop-in";21const ITEM =22  "relative flex h-9 cursor-default items-center gap-2.5 rounded-control px-2.5 font-sans text-body leading-tight text-fg outline-none select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[highlighted]:bg-subtle data-[inset]:pl-10.5 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-5.5 [&_svg:not([class*='text-'])]:text-icon-secondary";23​24function Menubar({ className, ...props }: React.ComponentProps<typeof MenubarPrimitive.Root>) {25  return <MenubarPrimitive.Root data-slot="menubar" className={cn("flex h-10 w-fit items-center gap-1 rounded-panel bg-subtle p-0.5", className)} {...props} />;26}27​28function MenubarMenu(props: React.ComponentProps<typeof MenubarPrimitive.Menu>) {29  return <MenubarPrimitive.Menu data-slot="menubar-menu" {...props} />;30}31​32function MenubarPortal(props: React.ComponentProps<typeof MenubarPrimitive.Portal>) {33  const container = usePortalContainer();34  return <MenubarPrimitive.Portal data-slot="menubar-portal" container={container} {...props} />;35}36​37function MenubarTrigger({ className, ...props }: React.ComponentProps<typeof MenubarPrimitive.Trigger>) {38  return (39    <MenubarPrimitive.Trigger40      data-slot="menubar-trigger"41      className={cn(42        "flex h-9 items-center gap-2 rounded-control px-2.5 font-sans text-body leading-tight font-medium text-fg outline-none select-none transition-[background-color,box-shadow] duration-150 ease-out hover:bg-subtle-hover focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-focus-ring data-[state=open]:bg-surface data-[state=open]:shadow-s motion-reduce:transition-none",43        className,44      )}45      {...props}46    />47  );48}49​50function MenubarContent({ className, align = "start", alignOffset = -2, sideOffset = 8, ...props }: React.ComponentProps<typeof MenubarPrimitive.Content>) {51  return (52    <MenubarPortal>53      <MenubarPrimitive.Content data-slot="menubar-content" align={align} alignOffset={alignOffset} sideOffset={sideOffset} className={cn(CONTENT, "origin-(--radix-menubar-content-transform-origin)", className)} {...props} />54    </MenubarPortal>55  );56}57​58function MenubarGroup(props: React.ComponentProps<typeof MenubarPrimitive.Group>) {59  return <MenubarPrimitive.Group data-slot="menubar-group" {...props} />;60}61​62function MenubarItem({ className, inset, variant = "default", ...props }: React.ComponentProps<typeof MenubarPrimitive.Item> & { inset?: boolean; variant?: "default" | "destructive" }) {63  return (64    <MenubarPrimitive.Item65      data-slot="menubar-item"66      data-inset={inset || undefined}67      data-variant={variant}68      className={cn(ITEM, "data-[variant=destructive]:text-danger data-[variant=destructive]:[&_svg]:text-danger", className)}69      {...props}70    />71  );72}73​74function MenubarCheckboxItem({ className, children, checked, ...props }: React.ComponentProps<typeof MenubarPrimitive.CheckboxItem>) {75  return (76    <MenubarPrimitive.CheckboxItem data-slot="menubar-checkbox-item" checked={checked} className={cn(ITEM, "pl-10.5", className)} {...props}>77      <span className="pointer-events-none absolute left-2.5 flex size-5.5 items-center justify-center">78        <MenubarPrimitive.ItemIndicator>79          <CheckIcon weight="bold" className="size-4.5 text-fg-brand" />80        </MenubarPrimitive.ItemIndicator>81      </span>82      {children}83    </MenubarPrimitive.CheckboxItem>84  );85}86​87function MenubarRadioGroup(props: React.ComponentProps<typeof MenubarPrimitive.RadioGroup>) {88  return <MenubarPrimitive.RadioGroup data-slot="menubar-radio-group" {...props} />;89}90​91// The selected choice wears the console's radio mark: a pink ring around white.92function MenubarRadioItem({ className, children, ...props }: React.ComponentProps<typeof MenubarPrimitive.RadioItem>) {93  return (94    <MenubarPrimitive.RadioItem data-slot="menubar-radio-item" className={cn(ITEM, "pl-10.5", className)} {...props}>95      <span className="pointer-events-none absolute left-2.5 flex size-5.5 items-center justify-center">96        <MenubarPrimitive.ItemIndicator>97          <span className="block size-3.5 rounded-pill border-[3.5px] border-pink bg-surface" />98        </MenubarPrimitive.ItemIndicator>99      </span>100      {children}101    </MenubarPrimitive.RadioItem>102  );103}104​105function MenubarLabel({ className, inset, ...props }: React.ComponentProps<typeof MenubarPrimitive.Label> & { inset?: boolean }) {106  return <MenubarPrimitive.Label data-slot="menubar-label" data-inset={inset || undefined} className={cn("px-2.5 pt-2 pb-1 font-sans text-body-sm leading-tight text-fg-label data-[inset]:pl-10.5", className)} {...props} />;107}108​109function MenubarSeparator({ className, ...props }: React.ComponentProps<typeof MenubarPrimitive.Separator>) {110  return <MenubarPrimitive.Separator data-slot="menubar-separator" className={cn("-mx-1 my-1 h-px bg-line-subtle", className)} {...props} />;111}112​113function MenubarShortcut({ className, ...props }: React.ComponentProps<"span">) {114  return <span data-slot="menubar-shortcut" className={cn("ml-auto pl-4 font-sans text-caption text-fg-muted", className)} {...props} />;115}116​117function MenubarSub(props: React.ComponentProps<typeof MenubarPrimitive.Sub>) {118  return <MenubarPrimitive.Sub data-slot="menubar-sub" {...props} />;119}120​121function MenubarSubTrigger({ className, inset, children, ...props }: React.ComponentProps<typeof MenubarPrimitive.SubTrigger> & { inset?: boolean }) {122  return (123    <MenubarPrimitive.SubTrigger data-slot="menubar-sub-trigger" data-inset={inset || undefined} className={cn(ITEM, "data-[state=open]:bg-subtle", className)} {...props}>124      {children}125      <CaretRightIcon className="ml-auto size-4.5 text-fg-muted" />126    </MenubarPrimitive.SubTrigger>127  );128}129​130function MenubarSubContent({ className, ...props }: React.ComponentProps<typeof MenubarPrimitive.SubContent>) {131  return (132    <MenubarPortal>133      <MenubarPrimitive.SubContent data-slot="menubar-sub-content" className={cn(CONTENT, "max-h-(--radix-menubar-content-available-height) origin-(--radix-menubar-content-transform-origin)", className)} {...props} />134    </MenubarPortal>135  );136}137​138export {139  Menubar,140  MenubarCheckboxItem,141  MenubarContent,142  MenubarGroup,143  MenubarItem,144  MenubarLabel,145  MenubarMenu,146  MenubarPortal,147  MenubarRadioGroup,148  MenubarRadioItem,149  MenubarSeparator,150  MenubarShortcut,151  MenubarSub,152  MenubarSubContent,153  MenubarSubTrigger,154  MenubarTrigger,155};