{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "retro-menu-bar",
  "title": "RetroMenuBar",
  "description": "A Mac OS 9 styled menu bar with horizontal strip, bevel highlights, azul active state, and dropdown menus with classic drop shadow.",
  "dependencies": [
    "@radix-ui/react-menubar"
  ],
  "registryDependencies": [
    "https://nostalgia-ui.com/r/nostalgia-theme.json"
  ],
  "files": [
    {
      "path": "registry/new-york/ui/retro-menu-bar.tsx",
      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as MenubarPrimitive from \"@radix-ui/react-menubar\"\n\nimport { cn } from \"@/lib/utils\"\n\n/* ------------------------------------------------------------------ */\n/*  RetroMenuBar (root)                                                */\n/* ------------------------------------------------------------------ */\n\nfunction RetroMenuBar(\n  {\n    className,\n    ...props\n  }: React.ComponentProps<typeof MenubarPrimitive.Root>,\n  ref: React.ForwardedRef<HTMLDivElement>\n) {\n  return (\n    <MenubarPrimitive.Root\n      ref={ref}\n      className={cn(\n        \"flex h-[20px] items-center gap-[6px] px-[8px]\",\n        \"bg-os9-gray-300\",\n        \"border-b border-os9-black\",\n        /* Inner bevel: white highlight top, dark shadow bottom */\n        \"shadow-[inset_0_1px_0_var(--os9-white),inset_0_-1px_0_var(--os9-gray-700)]\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nconst ForwardedRetroMenuBar = React.forwardRef(RetroMenuBar)\nForwardedRetroMenuBar.displayName = \"RetroMenuBar\"\n\n/* ------------------------------------------------------------------ */\n/*  RetroMenuBarMenu                                                   */\n/* ------------------------------------------------------------------ */\n\nfunction RetroMenuBarMenu(\n  props: React.ComponentProps<typeof MenubarPrimitive.Menu>\n) {\n  return <MenubarPrimitive.Menu {...props} />\n}\n\nRetroMenuBarMenu.displayName = \"RetroMenuBarMenu\"\n\n/* ------------------------------------------------------------------ */\n/*  RetroMenuBarTrigger                                                */\n/* ------------------------------------------------------------------ */\n\nfunction RetroMenuBarTrigger(\n  {\n    className,\n    ...props\n  }: React.ComponentProps<typeof MenubarPrimitive.Trigger>,\n  ref: React.ForwardedRef<HTMLButtonElement>\n) {\n  return (\n    <MenubarPrimitive.Trigger\n      ref={ref}\n      className={cn(\n        \"flex items-center cursor-pointer select-none whitespace-nowrap\",\n        \"h-[20px] px-[8px] pt-[2px]\",\n        \"font-[family-name:var(--os9-font-heading)] text-[12px] tracking-[0.42px] leading-[0.98]\",\n        \"text-os9-black\",\n        \"outline-none\",\n        /* Active / open state */\n        \"data-[state=open]:bg-os9-azul data-[state=open]:text-os9-white\",\n        /* Keyboard navigation highlight */\n        \"data-[highlighted]:bg-os9-azul data-[highlighted]:text-os9-white\",\n        \"focus-visible:bg-os9-azul focus-visible:text-os9-white\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nconst ForwardedRetroMenuBarTrigger = React.forwardRef(RetroMenuBarTrigger)\nForwardedRetroMenuBarTrigger.displayName = \"RetroMenuBarTrigger\"\n\n/* ------------------------------------------------------------------ */\n/*  RetroMenuBarContent                                                */\n/* ------------------------------------------------------------------ */\n\nfunction RetroMenuBarContent(\n  {\n    className,\n    align = \"start\",\n    alignOffset = -4,\n    sideOffset = 0,\n    ...props\n  }: React.ComponentProps<typeof MenubarPrimitive.Content>,\n  ref: React.ForwardedRef<HTMLDivElement>\n) {\n  return (\n    <MenubarPrimitive.Portal>\n      <MenubarPrimitive.Content\n        ref={ref}\n        align={align}\n        alignOffset={alignOffset}\n        sideOffset={sideOffset}\n        className={cn(\n          \"z-50 min-w-[160px] py-[2px]\",\n          \"bg-os9-white\",\n          \"border border-os9-black\",\n          /* Classic OS 9 drop shadow: 2px offset, no blur */\n          \"shadow-[2px_2px_0_var(--os9-black)]\",\n          /* Animate in */\n          \"data-[state=open]:animate-in data-[state=open]:fade-in-0\",\n          \"data-[state=closed]:animate-out data-[state=closed]:fade-out-0\",\n          className\n        )}\n        {...props}\n      />\n    </MenubarPrimitive.Portal>\n  )\n}\n\nconst ForwardedRetroMenuBarContent = React.forwardRef(RetroMenuBarContent)\nForwardedRetroMenuBarContent.displayName = \"RetroMenuBarContent\"\n\n/* ------------------------------------------------------------------ */\n/*  RetroMenuBarItem                                                   */\n/* ------------------------------------------------------------------ */\n\nfunction RetroMenuBarItem(\n  {\n    className,\n    ...props\n  }: React.ComponentProps<typeof MenubarPrimitive.Item>,\n  ref: React.ForwardedRef<HTMLDivElement>\n) {\n  return (\n    <MenubarPrimitive.Item\n      ref={ref}\n      className={cn(\n        \"group flex items-center cursor-default select-none\",\n        \"h-[18px] px-[16px]\",\n        \"font-[family-name:var(--os9-font-heading)] text-[12px] tracking-[0.42px] leading-[0.98]\",\n        \"text-os9-black\",\n        \"outline-none\",\n        /* Hover / focus highlight */\n        \"data-[highlighted]:bg-os9-azul data-[highlighted]:text-os9-white\",\n        /* Disabled */\n        \"data-[disabled]:text-os9-gray-600 data-[disabled]:pointer-events-none\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nconst ForwardedRetroMenuBarItem = React.forwardRef(RetroMenuBarItem)\nForwardedRetroMenuBarItem.displayName = \"RetroMenuBarItem\"\n\n/* ------------------------------------------------------------------ */\n/*  RetroMenuBarSeparator                                              */\n/* ------------------------------------------------------------------ */\n\nfunction RetroMenuBarSeparator(\n  {\n    className,\n    ...props\n  }: React.ComponentProps<typeof MenubarPrimitive.Separator>,\n  ref: React.ForwardedRef<HTMLDivElement>\n) {\n  return (\n    <MenubarPrimitive.Separator\n      ref={ref}\n      className={cn(\n        \"h-[2px] mx-[4px] my-[2px]\",\n        /* Two-tone bevel line: dark top, white bottom */\n        \"border-t border-os9-gray-700\",\n        \"border-b border-b-os9-white\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nconst ForwardedRetroMenuBarSeparator = React.forwardRef(RetroMenuBarSeparator)\nForwardedRetroMenuBarSeparator.displayName = \"RetroMenuBarSeparator\"\n\n/* ------------------------------------------------------------------ */\n/*  RetroMenuBarGroup                                                  */\n/* ------------------------------------------------------------------ */\n\nconst RetroMenuBarGroup = MenubarPrimitive.Group\n\n/* ------------------------------------------------------------------ */\n/*  RetroMenuBarLabel                                                  */\n/* ------------------------------------------------------------------ */\n\nconst RetroMenuBarLabel = React.forwardRef<\n  React.ComponentRef<typeof MenubarPrimitive.Label>,\n  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Label>\n>(function RetroMenuBarLabel({ className, ...props }, ref) {\n  return (\n    <MenubarPrimitive.Label\n      ref={ref}\n      className={cn(\n        \"px-[16px] py-[2px]\",\n        \"font-[family-name:var(--os9-font-heading)] text-[10px] tracking-[0.42px] leading-[0.98]\",\n        \"text-os9-gray-700\",\n        className\n      )}\n      {...props}\n    />\n  )\n})\nRetroMenuBarLabel.displayName = \"RetroMenuBarLabel\"\n\n/* ------------------------------------------------------------------ */\n/*  RetroMenuBarSub                                                    */\n/* ------------------------------------------------------------------ */\n\nconst RetroMenuBarSub = MenubarPrimitive.Sub\n\n/* ------------------------------------------------------------------ */\n/*  RetroMenuBarSubTrigger                                             */\n/* ------------------------------------------------------------------ */\n\nconst RetroMenuBarSubTrigger = React.forwardRef<\n  React.ComponentRef<typeof MenubarPrimitive.SubTrigger>,\n  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.SubTrigger>\n>(function RetroMenuBarSubTrigger({ className, children, ...props }, ref) {\n  return (\n    <MenubarPrimitive.SubTrigger\n      ref={ref}\n      className={cn(\n        \"flex items-center cursor-default select-none\",\n        \"h-[18px] px-[16px]\",\n        \"font-[family-name:var(--os9-font-heading)] text-[12px] tracking-[0.42px] leading-[0.98]\",\n        \"text-os9-black\",\n        \"outline-none\",\n        /* Hover / focus highlight */\n        \"data-[highlighted]:bg-os9-azul data-[highlighted]:text-os9-white\",\n        /* Keep parent highlighted while its submenu is open */\n        \"data-[state=open]:bg-os9-azul data-[state=open]:text-os9-white\",\n        /* Disabled */\n        \"data-[disabled]:text-os9-gray-600 data-[disabled]:pointer-events-none\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      {/* Right chevron indicator */}\n      <svg\n        width=\"6\"\n        height=\"8\"\n        viewBox=\"0 0 6 8\"\n        fill=\"none\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        className=\"ml-auto\"\n        aria-hidden=\"true\"\n      >\n        <path d=\"M0 0L6 4L0 8V0Z\" fill=\"currentColor\" />\n      </svg>\n    </MenubarPrimitive.SubTrigger>\n  )\n})\nRetroMenuBarSubTrigger.displayName = \"RetroMenuBarSubTrigger\"\n\n/* ------------------------------------------------------------------ */\n/*  RetroMenuBarSubContent                                             */\n/* ------------------------------------------------------------------ */\n\nconst RetroMenuBarSubContent = React.forwardRef<\n  React.ComponentRef<typeof MenubarPrimitive.SubContent>,\n  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.SubContent>\n>(function RetroMenuBarSubContent({ className, ...props }, ref) {\n  return (\n    <MenubarPrimitive.Portal>\n      <MenubarPrimitive.SubContent\n        ref={ref}\n        className={cn(\n          \"z-50 min-w-[160px] p-[2px]\",\n          \"bg-os9-white\",\n          \"border border-os9-black\",\n          \"shadow-[2px_2px_0_var(--os9-black)]\",\n          \"data-[state=open]:animate-in data-[state=open]:fade-in-0\",\n          \"data-[state=closed]:animate-out data-[state=closed]:fade-out-0\",\n          className\n        )}\n        {...props}\n      />\n    </MenubarPrimitive.Portal>\n  )\n})\nRetroMenuBarSubContent.displayName = \"RetroMenuBarSubContent\"\n\n/* ------------------------------------------------------------------ */\n/*  RetroMenuBarCheckboxItem                                           */\n/* ------------------------------------------------------------------ */\n\nconst RetroMenuBarCheckboxItem = React.forwardRef<\n  React.ComponentRef<typeof MenubarPrimitive.CheckboxItem>,\n  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.CheckboxItem>\n>(function RetroMenuBarCheckboxItem(\n  { className, children, checked, ...props },\n  ref\n) {\n  return (\n    <MenubarPrimitive.CheckboxItem\n      ref={ref}\n      checked={checked}\n      className={cn(\n        \"group relative flex items-center cursor-default select-none\",\n        \"h-[18px] pl-[24px] pr-[16px]\",\n        \"font-[family-name:var(--os9-font-heading)] text-[12px] tracking-[0.42px] leading-[0.98]\",\n        \"text-os9-black\",\n        \"outline-none\",\n        \"data-[highlighted]:bg-os9-azul data-[highlighted]:text-os9-white\",\n        \"data-[disabled]:text-os9-gray-600 data-[disabled]:pointer-events-none\",\n        className\n      )}\n      {...props}\n    >\n      <span className=\"absolute left-[6px] flex h-[10px] w-[10px] items-center justify-center\">\n        <MenubarPrimitive.ItemIndicator>\n          {/* Checkmark SVG */}\n          <svg\n            width=\"10\"\n            height=\"10\"\n            viewBox=\"0 0 16 16\"\n            fill=\"none\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            aria-hidden=\"true\"\n          >\n            <path\n              d=\"M3 8.5L6.5 12L13 4\"\n              stroke=\"currentColor\"\n              strokeWidth=\"2.5\"\n              strokeLinecap=\"square\"\n              strokeLinejoin=\"miter\"\n            />\n          </svg>\n        </MenubarPrimitive.ItemIndicator>\n      </span>\n      {children}\n    </MenubarPrimitive.CheckboxItem>\n  )\n})\nRetroMenuBarCheckboxItem.displayName = \"RetroMenuBarCheckboxItem\"\n\n/* ------------------------------------------------------------------ */\n/*  RetroMenuBarRadioGroup                                             */\n/* ------------------------------------------------------------------ */\n\nconst RetroMenuBarRadioGroup = MenubarPrimitive.RadioGroup\n\n/* ------------------------------------------------------------------ */\n/*  RetroMenuBarRadioItem                                              */\n/* ------------------------------------------------------------------ */\n\nconst RetroMenuBarRadioItem = React.forwardRef<\n  React.ComponentRef<typeof MenubarPrimitive.RadioItem>,\n  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.RadioItem>\n>(function RetroMenuBarRadioItem({ className, children, ...props }, ref) {\n  return (\n    <MenubarPrimitive.RadioItem\n      ref={ref}\n      className={cn(\n        \"group relative flex items-center cursor-default select-none\",\n        \"h-[18px] pl-[24px] pr-[16px]\",\n        \"font-[family-name:var(--os9-font-heading)] text-[12px] tracking-[0.42px] leading-[0.98]\",\n        \"text-os9-black\",\n        \"outline-none\",\n        \"data-[highlighted]:bg-os9-azul data-[highlighted]:text-os9-white\",\n        \"data-[disabled]:text-os9-gray-600 data-[disabled]:pointer-events-none\",\n        className\n      )}\n      {...props}\n    >\n      <span className=\"absolute left-[6px] flex h-[10px] w-[10px] items-center justify-center\">\n        <MenubarPrimitive.ItemIndicator>\n          {/* Dot indicator */}\n          <svg\n            width=\"8\"\n            height=\"8\"\n            viewBox=\"0 0 8 8\"\n            fill=\"none\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            aria-hidden=\"true\"\n          >\n            <circle cx=\"4\" cy=\"4\" r=\"3\" fill=\"currentColor\" />\n          </svg>\n        </MenubarPrimitive.ItemIndicator>\n      </span>\n      {children}\n    </MenubarPrimitive.RadioItem>\n  )\n})\nRetroMenuBarRadioItem.displayName = \"RetroMenuBarRadioItem\"\n\n/* ------------------------------------------------------------------ */\n/*  RetroMenuBarShortcut                                               */\n/* ------------------------------------------------------------------ */\n\nfunction RetroMenuBarShortcut({\n  className,\n  ...props\n}: React.HTMLAttributes<HTMLSpanElement>) {\n  return (\n    <span\n      className={cn(\n        \"ml-auto pl-[16px]\",\n        \"font-[family-name:var(--os9-font-heading)] text-[12px] tracking-[0.42px]\",\n        \"text-os9-gray-700\",\n        /* Inherit parent highlight color */\n        \"group-data-[highlighted]:text-os9-white\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\nRetroMenuBarShortcut.displayName = \"RetroMenuBarShortcut\"\n\n/* ------------------------------------------------------------------ */\n/*  Exports                                                            */\n/* ------------------------------------------------------------------ */\n\nexport {\n  ForwardedRetroMenuBar as RetroMenuBar,\n  RetroMenuBarMenu,\n  ForwardedRetroMenuBarTrigger as RetroMenuBarTrigger,\n  ForwardedRetroMenuBarContent as RetroMenuBarContent,\n  ForwardedRetroMenuBarItem as RetroMenuBarItem,\n  ForwardedRetroMenuBarSeparator as RetroMenuBarSeparator,\n  RetroMenuBarGroup,\n  RetroMenuBarLabel,\n  RetroMenuBarSub,\n  RetroMenuBarSubTrigger,\n  RetroMenuBarSubContent,\n  RetroMenuBarCheckboxItem,\n  RetroMenuBarRadioGroup,\n  RetroMenuBarRadioItem,\n  RetroMenuBarShortcut,\n}\n",
      "type": "registry:ui"
    }
  ],
  "type": "registry:ui"
}