{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "menu-bar", "title": "Menu Bar", "description": "A desktop-style menu bar built on Radix Menubar, with menus, submenus, checkbox items, shortcuts, status icons and a clock.", "dependencies": [ "lucide-react", "@radix-ui/react-menubar" ], "files": [ { "path": "registry/tealmac/menu-bar.tsx", "content": "// Adapted from Ballmac UI (https://github.com/vamsiy78/ballmac-ui), MIT License, Copyright (c) 2026 Ballmac.\n\"use client\"\n\nimport * as React from \"react\"\nimport * as MenubarPrimitive from \"@radix-ui/react-menubar\"\nimport { CheckIcon, ChevronRightIcon } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype MenuBarProps = React.ComponentProps\n\n/**\n * A desktop-style menu bar built on Radix Menubar: arrow keys move between menus and items, typeahead,\n * Escape closes. Put MenuBarMenu children first and a MenuBarStatus area last. The status area is\n * rendered beside the ARIA menubar (not inside it), since a menubar may only contain menu items.\n */\nfunction MenuBar({ className, children, style, ...props }: MenuBarProps) {\n const all = React.Children.toArray(children)\n const isStatus = (c: React.ReactNode) =>\n React.isValidElement(c) && c.type === MenuBarStatus\n return (\n \n \n {all.filter((c) => !isStatus(c))}\n \n {all.filter(isStatus)}\n \n )\n}\n\nfunction MenuBarMenu(\n props: React.ComponentProps\n) {\n return \n}\n\nfunction MenuBarGroup(\n props: React.ComponentProps\n) {\n return \n}\n\nfunction MenuBarSub(props: React.ComponentProps) {\n return \n}\n\ntype MenuBarTriggerProps = React.ComponentProps<\n typeof MenubarPrimitive.Trigger\n> & {\n /** \"app\" sets the trigger in bold, like the application menu next to the logo. */\n variant?: \"default\" | \"app\"\n}\n\nfunction MenuBarTrigger({\n variant = \"default\",\n className,\n ...props\n}: MenuBarTriggerProps) {\n return (\n \n )\n}\n\nconst menuSurface =\n \"z-50 min-w-[14rem] overflow-hidden rounded-[10px] border border-foreground/10 bg-popover/80 p-[5px] text-[13px] text-popover-foreground shadow-[0_0_0_0.5px_rgb(0_0_0/0.12),0_12px_32px_-8px_rgb(0_0_0/0.35)] backdrop-blur-2xl backdrop-saturate-150 outline-none dark:bg-popover/75 dark:shadow-[0_0_0_0.5px_rgb(0_0_0/0.8),0_12px_32px_-8px_rgb(0_0_0/0.7)] data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:duration-150 motion-reduce:animate-none\"\n\ntype MenuBarContentProps = React.ComponentProps<\n typeof MenubarPrimitive.Content\n> & {\n /** Render into a portal on document.body (default). Set false to keep the menu inside its container, e.g. in a mockup. */\n portal?: boolean\n}\n\nfunction MenuBarContent({\n portal = true,\n className,\n align = \"start\",\n alignOffset = -4,\n sideOffset = 4,\n ...props\n}: MenuBarContentProps) {\n const content = (\n \n )\n return portal ? (\n {content}\n ) : (\n content\n )\n}\n\nconst itemClasses =\n \"relative flex h-[22px] cursor-default items-center gap-2 rounded-[5px] px-2 outline-none select-none data-[disabled]:pointer-events-none data-[disabled]:text-foreground/35 data-[highlighted]:bg-primary data-[highlighted]:text-primary-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-3.5\"\n\ntype MenuBarItemProps = React.ComponentProps & {\n /** Indent the label to line up with checkbox items. */\n inset?: boolean\n /** Red text for destructive actions. */\n variant?: \"default\" | \"destructive\"\n}\n\nfunction MenuBarItem({\n inset,\n variant = \"default\",\n className,\n ...props\n}: MenuBarItemProps) {\n return (\n \n )\n}\n\nfunction MenuBarCheckboxItem({\n className,\n children,\n ...props\n}: React.ComponentProps) {\n return (\n \n \n \n \n \n \n {children}\n \n )\n}\n\nfunction MenuBarLabel({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n )\n}\n\nfunction MenuBarSeparator({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n )\n}\n\ntype MenuBarShortcutProps = React.ComponentProps<\"span\">\n\n/** Right-aligned key equivalent, e.g. \"⇧⌘N\". Plain text, so it is part of the item's accessible name. */\nfunction MenuBarShortcut({ className, ...props }: MenuBarShortcutProps) {\n return (\n \n )\n}\n\nfunction MenuBarSubTrigger({\n className,\n children,\n ...props\n}: React.ComponentProps) {\n return (\n \n {children}\n \n \n )\n}\n\ntype MenuBarSubContentProps = React.ComponentProps<\n typeof MenubarPrimitive.SubContent\n> & {\n /** Render into a portal on document.body (default). */\n portal?: boolean\n}\n\nfunction MenuBarSubContent({\n portal = true,\n className,\n sideOffset = 2,\n ...props\n}: MenuBarSubContentProps) {\n const content = (\n \n )\n return portal ? (\n {content}\n ) : (\n content\n )\n}\n\ntype MenuBarStatusProps = React.ComponentProps<\"div\">\n\n/** The right side of the bar: status icons and the clock. */\nfunction MenuBarStatus({ className, ...props }: MenuBarStatusProps) {\n return (\n \n )\n}\n\ntype MenuBarStatusItemProps = React.ComponentProps<\"button\">\n\n/** An icon button in the status area. Give it an aria-label. */\nfunction MenuBarStatusItem({\n className,\n type = \"button\",\n ...props\n}: MenuBarStatusItemProps) {\n return (\n \n )\n}\n\ntype MenuBarClockProps = Omit, \"children\"> & {\n /** BCP 47 locale for formatting. Fixed by default so server and browser agree. */\n locale?: string\n /** Intl options. Default: short weekday, month, day, and hour:minute. */\n format?: Intl.DateTimeFormatOptions\n /** Show a fixed time instead of the live clock (useful for mockups and screenshots). */\n value?: Date\n}\n\nconst defaultClockFormat: Intl.DateTimeFormatOptions = {\n weekday: \"short\",\n month: \"short\",\n day: \"numeric\",\n hour: \"numeric\",\n minute: \"2-digit\",\n}\n\n/**\n * A live clock that ticks each minute. It renders nothing time-specific on the server and fills in after\n * mount, so it never causes a hydration mismatch.\n */\nfunction MenuBarClock({\n locale = \"en-US\",\n format = defaultClockFormat,\n value,\n className,\n ...props\n}: MenuBarClockProps) {\n const fixed = value?.getTime()\n const [now, setNow] = React.useState(value ?? null)\n\n React.useEffect(() => {\n if (fixed !== undefined) {\n setNow(new Date(fixed))\n return\n }\n setNow(new Date())\n let interval: number | undefined\n const timeout = window.setTimeout(\n () => {\n setNow(new Date())\n interval = window.setInterval(() => setNow(new Date()), 60_000)\n },\n 60_000 - (Date.now() % 60_000)\n )\n return () => {\n window.clearTimeout(timeout)\n window.clearInterval(interval)\n }\n }, [fixed])\n\n const text = now\n ? new Intl.DateTimeFormat(locale, format).format(now).replace(/,/g, \"\")\n : \"\"\n return (\n \n {text}\n \n )\n}\n\nexport {\n MenuBar,\n MenuBarCheckboxItem,\n MenuBarClock,\n MenuBarContent,\n MenuBarGroup,\n MenuBarItem,\n MenuBarLabel,\n MenuBarMenu,\n MenuBarSeparator,\n MenuBarShortcut,\n MenuBarStatus,\n MenuBarStatusItem,\n MenuBarSub,\n MenuBarSubContent,\n MenuBarSubTrigger,\n MenuBarTrigger,\n type MenuBarClockProps,\n type MenuBarContentProps,\n type MenuBarItemProps,\n type MenuBarProps,\n type MenuBarShortcutProps,\n type MenuBarStatusItemProps,\n type MenuBarStatusProps,\n type MenuBarSubContentProps,\n type MenuBarTriggerProps,\n}\n", "type": "registry:ui" } ], "type": "registry:ui" }