@neynar/ui 0.4.0 → 0.5.0

package/src/components/ui/stories/menubar.stories.tsx

@@ -1,763 +1,990 @@
-import type { Meta, StoryObj } from "@storybook/react-vite";
-import React from "react";
+import type { Meta, StoryObj } from "@storybook/react";
 import {
-  FileText,
-  Folder,
-  Save,
-  Download,
-  Upload,
-  Copy,
-  ClipboardPaste,
-  Scissors,
-  Undo,
-  Redo,
-  Bold,
-  Italic,
-  Underline,
-  Settings,
-  HelpCircle,
-  Info,
-  Zap,
-  Search,
-  Plus,
-  Minus,
-  Maximize,
-  Minimize,
-  RotateCcw,
-  RefreshCw,
-  Clock,
-  Filter,
+  FileIcon,
+  FolderOpenIcon,
+  SaveIcon,
+  DownloadIcon,
+  PrinterIcon,
+  ScissorsIcon,
+  CopyIcon,
+  ClipboardIcon,
+  UndoIcon,
+  RedoIcon,
+  SearchIcon,
+  ReplaceIcon,
+  ZoomInIcon,
+  ZoomOutIcon,
+  MaximizeIcon,
+  LayoutIcon,
+  PanelLeftIcon,
+  TerminalIcon,
+  SettingsIcon,
+  BellIcon,
+  HelpCircleIcon,
+  BookOpenIcon,
+  MessageSquareIcon,
+  LogOutIcon,
+  SunIcon,
+  MoonIcon,
+  MonitorIcon,
+  CheckCircle2Icon,
+  AlertTriangleIcon,
+  InfoIcon,
 } from "lucide-react";
+import { useState } from "react";
+
 import {
   Menubar,
+  MenubarMenu,
+  MenubarTrigger,
   MenubarContent,
   MenubarItem,
-  MenubarMenu,
   MenubarSeparator,
   MenubarShortcut,
-  MenubarTrigger,
-  MenubarSub,
-  MenubarSubContent,
-  MenubarSubTrigger,
   MenubarCheckboxItem,
   MenubarRadioGroup,
   MenubarRadioItem,
+  MenubarSub,
+  MenubarSubTrigger,
+  MenubarSubContent,
   MenubarLabel,
+  MenubarGroup,
 } from "../menubar";
 
-const meta = {
-  title: "Navigation & Menus/Menubar",
+/**
+ * Menubar stories for design system documentation.
+ *
+ * Demonstrates application navigation menubars with File, Edit, View, and Help
+ * menus. Shows nested submenus, keyboard shortcuts, checkbox items, radio groups,
+ * and all menu item variants including destructive actions.
+ */
+const meta: Meta<typeof Menubar> = {
+  title: "Components/Navigation & Menus/Menubar",
   component: Menubar,
   parameters: {
     layout: "centered",
     docs: {
       description: {
         component:
-          "A visually persistent menu common in desktop applications that provides access to a consistent set of commands. Built on Radix UI Menubar primitive with full keyboard navigation and accessibility support.",
+          "A horizontal menubar component for application-level navigation and actions. Built on Base UI Menubar primitives with support for nested submenus, keyboard shortcuts, checkboxes, and radio groups.",
       },
     },
   },
   argTypes: {
     className: {
       control: "text",
-      description: "Additional CSS classes to apply to the menubar",
+      description: "Additional CSS classes",
     },
   },
-} satisfies Meta<typeof Menubar>;
+};
 
 export default meta;
 type Story = StoryObj<typeof meta>;
 
 /**
- * Interactive playground for testing all menubar features and configurations.
- * Experiment with different combinations of menu items, shortcuts, and interactions.
+ * Realistic Neynar Dashboard scenario showing a complete application menubar
+ * with File, Edit, View, and Help menus.
  */
-export const Interactive: Story = {
-  render: function InteractiveMenubar() {
-    const [showToolbar, setShowToolbar] = React.useState(true);
-    const [showSidebar, setShowSidebar] = React.useState(false);
-    const [showFooter, setShowFooter] = React.useState(true);
-    const [theme, setTheme] = React.useState("light");
-    const [fontSize, setFontSize] = React.useState("medium");
-    const [recentFiles] = React.useState([
-      "project1.json",
-      "document.pdf", 
-      "spreadsheet.xlsx",
-    ]);
+export const InContext: Story = {
+  parameters: {
+    layout: "padded",
+  },
+  render: () => {
+    function ApplicationMenubar() {
+      const [showSidebar, setShowSidebar] = useState(true);
+      const [showToolbar, setShowToolbar] = useState(true);
+      const [showStatusBar, setShowStatusBar] = useState(false);
+      const [theme, setTheme] = useState("system");
+      const [notifications, setNotifications] = useState(true);
 
-    return (
-      <div className="w-full max-w-4xl">
-        <Menubar>
-          <MenubarMenu>
-            <MenubarTrigger>File</MenubarTrigger>
-            <MenubarContent>
-              <MenubarItem>
-                <FileText className="mr-2 h-4 w-4" />
-                New File
-                <MenubarShortcut>⌘N</MenubarShortcut>
-              </MenubarItem>
-              <MenubarItem>
-                <Folder className="mr-2 h-4 w-4" />
-                Open
-                <MenubarShortcut>⌘O</MenubarShortcut>
-              </MenubarItem>
-              <MenubarSub>
-                <MenubarSubTrigger>
-                  <Clock className="mr-2 h-4 w-4" />
-                  Recent Files
-                </MenubarSubTrigger>
-                <MenubarSubContent className="w-48">
-                  {recentFiles.map((file, index) => (
-                    <MenubarItem key={index}>
-                      <FileText className="mr-2 h-4 w-4" />
-                      {file}
-                    </MenubarItem>
-                  ))}
-                  <MenubarSeparator />
-                  <MenubarItem>Clear Recent Files</MenubarItem>
-                </MenubarSubContent>
-              </MenubarSub>
-              <MenubarSeparator />
-              <MenubarItem>
-                <Save className="mr-2 h-4 w-4" />
-                Save
-                <MenubarShortcut>⌘S</MenubarShortcut>
-              </MenubarItem>
-              <MenubarItem disabled>
-                <Upload className="mr-2 h-4 w-4" />
-                Import (Coming Soon)
-              </MenubarItem>
-              <MenubarSeparator />
-              <MenubarItem variant="destructive">
-                Delete File
-                <MenubarShortcut>⌫</MenubarShortcut>
-              </MenubarItem>
-            </MenubarContent>
-          </MenubarMenu>
-          
-          <MenubarMenu>
-            <MenubarTrigger>Edit</MenubarTrigger>
-            <MenubarContent>
-              <MenubarItem>
-                <Undo className="mr-2 h-4 w-4" />
-                Undo
-                <MenubarShortcut>⌘Z</MenubarShortcut>
-              </MenubarItem>
-              <MenubarItem>
-                <Redo className="mr-2 h-4 w-4" />
-                Redo
-                <MenubarShortcut>⇧⌘Z</MenubarShortcut>
-              </MenubarItem>
-              <MenubarSeparator />
-              <MenubarItem>
-                <Scissors className="mr-2 h-4 w-4" />
-                Cut
-                <MenubarShortcut>⌘X</MenubarShortcut>
-              </MenubarItem>
-              <MenubarItem>
-                <Copy className="mr-2 h-4 w-4" />
-                Copy
-                <MenubarShortcut>⌘C</MenubarShortcut>
-              </MenubarItem>
-              <MenubarItem>
-                <ClipboardPaste className="mr-2 h-4 w-4" />
-                Paste
-                <MenubarShortcut>⌘V</MenubarShortcut>
-              </MenubarItem>
-              <MenubarSeparator />
-              <MenubarSub>
-                <MenubarSubTrigger>Text Style</MenubarSubTrigger>
-                <MenubarSubContent>
+      return (
+        <div className="w-full max-w-4xl space-y-6">
+          {/* Application Header with Menubar */}
+          <div className="border-border bg-background space-y-4 rounded-lg border p-4">
+            <div className="flex items-center justify-between">
+              <div className="flex items-center gap-3">
+                <div className="bg-primary/10 text-primary rounded-md p-2">
+                  <FileIcon className="size-5" />
+                </div>
+                <div>
+                  <h3 className="font-semibold">Neynar Dashboard</h3>
+                  <p className="text-muted-foreground text-xs">
+                    Application workspace
+                  </p>
+                </div>
+              </div>
+              <div className="flex items-center gap-2">
+                <span className="text-muted-foreground text-xs">
+                  Last saved: 2 minutes ago
+                </span>
+              </div>
+            </div>
+
+            <Menubar>
+              {/* File Menu */}
+              <MenubarMenu>
+                <MenubarTrigger>File</MenubarTrigger>
+                <MenubarContent>
                   <MenubarItem>
-                    <Bold className="mr-2 h-4 w-4" />
-                    Bold
-                    <MenubarShortcut>⌘B</MenubarShortcut>
+                    <FileIcon />
+                    New File
+                    <MenubarShortcut>⌘N</MenubarShortcut>
                   </MenubarItem>
                   <MenubarItem>
-                    <Italic className="mr-2 h-4 w-4" />
-                    Italic
-                    <MenubarShortcut>⌘I</MenubarShortcut>
+                    <FolderOpenIcon />
+                    Open
+                    <MenubarShortcut>⌘O</MenubarShortcut>
                   </MenubarItem>
+                  <MenubarSeparator />
                   <MenubarItem>
-                    <Underline className="mr-2 h-4 w-4" />
-                    Underline
-                    <MenubarShortcut>⌘U</MenubarShortcut>
+                    <SaveIcon />
+                    Save
+                    <MenubarShortcut>⌘S</MenubarShortcut>
                   </MenubarItem>
-                </MenubarSubContent>
-              </MenubarSub>
-            </MenubarContent>
-          </MenubarMenu>
-
-          <MenubarMenu>
-            <MenubarTrigger>View</MenubarTrigger>
-            <MenubarContent>
-              <MenubarLabel>Interface</MenubarLabel>
-              <MenubarSeparator />
-              <MenubarCheckboxItem
-                checked={showToolbar}
-                onCheckedChange={setShowToolbar}
-              >
-                Show Toolbar
-                <MenubarShortcut>⌘T</MenubarShortcut>
-              </MenubarCheckboxItem>
-              <MenubarCheckboxItem
-                checked={showSidebar}
-                onCheckedChange={setShowSidebar}
-              >
-                Show Sidebar
-                <MenubarShortcut>⌘B</MenubarShortcut>
-              </MenubarCheckboxItem>
-              <MenubarCheckboxItem
-                checked={showFooter}
-                onCheckedChange={setShowFooter}
-              >
-                Show Footer
-              </MenubarCheckboxItem>
-              <MenubarSeparator />
-              <MenubarItem>
-                <Maximize className="mr-2 h-4 w-4" />
-                Zoom In
-                <MenubarShortcut>⌘+</MenubarShortcut>
-              </MenubarItem>
-              <MenubarItem>
-                <Minimize className="mr-2 h-4 w-4" />
-                Zoom Out
-                <MenubarShortcut>⌘-</MenubarShortcut>
-              </MenubarItem>
-              <MenubarItem>
-                <RefreshCw className="mr-2 h-4 w-4" />
-                Refresh
-                <MenubarShortcut>⌘R</MenubarShortcut>
-              </MenubarItem>
-            </MenubarContent>
-          </MenubarMenu>
-
-          <MenubarMenu>
-            <MenubarTrigger>Preferences</MenubarTrigger>
-            <MenubarContent>
-              <MenubarLabel>Theme</MenubarLabel>
-              <MenubarSeparator />
-              <MenubarRadioGroup value={theme} onValueChange={setTheme}>
-                <MenubarRadioItem value="light">Light</MenubarRadioItem>
-                <MenubarRadioItem value="dark">Dark</MenubarRadioItem>
-                <MenubarRadioItem value="auto">Auto</MenubarRadioItem>
-              </MenubarRadioGroup>
-              <MenubarSeparator />
-              <MenubarLabel>Font Size</MenubarLabel>
-              <MenubarSeparator />
-              <MenubarRadioGroup value={fontSize} onValueChange={setFontSize}>
-                <MenubarRadioItem value="small">Small</MenubarRadioItem>
-                <MenubarRadioItem value="medium">Medium</MenubarRadioItem>
-                <MenubarRadioItem value="large">Large</MenubarRadioItem>
-              </MenubarRadioGroup>
-              <MenubarSeparator />
-              <MenubarItem>
-                <Settings className="mr-2 h-4 w-4" />
-                Advanced Settings
-                <MenubarShortcut>⌘,</MenubarShortcut>
-              </MenubarItem>
-            </MenubarContent>
-          </MenubarMenu>
-
-          <MenubarMenu>
-            <MenubarTrigger>Help</MenubarTrigger>
-            <MenubarContent>
-              <MenubarItem>
-                <HelpCircle className="mr-2 h-4 w-4" />
-                Documentation
-              </MenubarItem>
-              <MenubarItem>
-                Keyboard Shortcuts
-                <MenubarShortcut>⌘/</MenubarShortcut>
-              </MenubarItem>
-              <MenubarSeparator />
-              <MenubarItem>
-                <Info className="mr-2 h-4 w-4" />
-                About
-              </MenubarItem>
-            </MenubarContent>
-          </MenubarMenu>
-        </Menubar>
-        
-        <div className="mt-6 p-4 rounded-md border bg-muted/50">
-          <p className="text-sm text-muted-foreground">
-            State: Toolbar: {showToolbar ? 'On' : 'Off'}, Sidebar: {showSidebar ? 'On' : 'Off'}, 
-            Footer: {showFooter ? 'On' : 'Off'}, Theme: {theme}, Font: {fontSize}
-          </p>
-        </div>
-      </div>
-    );
-  },
-  parameters: {
-    docs: {
-      description: {
-        story:
-          "A comprehensive interactive example showcasing all menubar features including basic items, shortcuts, checkboxes, radio groups, submenus, disabled items, and destructive variants. Use this to test different configurations and interactions.",
-      },
-    },
-  },
-};
-
-/**
- * Systematic showcase of all menubar variants and combinations.
- * Demonstrates different menu types, item styles, and layout patterns.
- */
-export const Variants: Story = {
-  render: () => (
-    <div className="space-y-8">
-      {/* Basic Menubar */}
-      <div>
-        <h3 className="text-sm font-medium mb-2">Basic Application Menu</h3>
-        <Menubar>
-          <MenubarMenu>
-            <MenubarTrigger>File</MenubarTrigger>
-            <MenubarContent>
-              <MenubarItem>
-                <FileText className="mr-2 h-4 w-4" />
-                New
-                <MenubarShortcut>⌘N</MenubarShortcut>
-              </MenubarItem>
-              <MenubarItem>
-                <Folder className="mr-2 h-4 w-4" />
-                Open
-                <MenubarShortcut>⌘O</MenubarShortcut>
-              </MenubarItem>
-              <MenubarSeparator />
-              <MenubarItem>
-                <Save className="mr-2 h-4 w-4" />
-                Save
-                <MenubarShortcut>⌘S</MenubarShortcut>
-              </MenubarItem>
-            </MenubarContent>
-          </MenubarMenu>
-          <MenubarMenu>
-            <MenubarTrigger>Edit</MenubarTrigger>
-            <MenubarContent>
-              <MenubarItem>
-                <Undo className="mr-2 h-4 w-4" />
-                Undo
-                <MenubarShortcut>⌘Z</MenubarShortcut>
-              </MenubarItem>
-              <MenubarItem>
-                <Redo className="mr-2 h-4 w-4" />
-                Redo
-                <MenubarShortcut>⇧⌘Z</MenubarShortcut>
-              </MenubarItem>
-            </MenubarContent>
-          </MenubarMenu>
-        </Menubar>
-      </div>
-
-      {/* Single Menu */}
-      <div>
-        <h3 className="text-sm font-medium mb-2">Single Menu</h3>
-        <Menubar>
-          <MenubarMenu>
-            <MenubarTrigger>Actions</MenubarTrigger>
-            <MenubarContent>
-              <MenubarItem>
-                <Plus className="mr-2 h-4 w-4" />
-                Add Item
-              </MenubarItem>
-              <MenubarItem>
-                <Minus className="mr-2 h-4 w-4" />
-                Remove Item
-              </MenubarItem>
-              <MenubarSeparator />
-              <MenubarItem>
-                <Settings className="mr-2 h-4 w-4" />
-                Settings
-              </MenubarItem>
-            </MenubarContent>
-          </MenubarMenu>
-        </Menubar>
-      </div>
-
-      {/* With Submenus */}
-      <div>
-        <h3 className="text-sm font-medium mb-2">With Nested Submenus</h3>
-        <Menubar>
-          <MenubarMenu>
-            <MenubarTrigger>Tools</MenubarTrigger>
-            <MenubarContent>
-              <MenubarItem>
-                <Search className="mr-2 h-4 w-4" />
-                Quick Search
-                <MenubarShortcut>⌘K</MenubarShortcut>
-              </MenubarItem>
-              <MenubarSub>
-                <MenubarSubTrigger>
-                  <Download className="mr-2 h-4 w-4" />
-                  Export
-                </MenubarSubTrigger>
-                <MenubarSubContent>
-                  <MenubarItem>Export as PDF</MenubarItem>
-                  <MenubarItem>Export as CSV</MenubarItem>
-                  <MenubarItem>Export as JSON</MenubarItem>
-                </MenubarSubContent>
-              </MenubarSub>
-              <MenubarSub>
-                <MenubarSubTrigger>
-                  <Filter className="mr-2 h-4 w-4" />
-                  Filters
-                </MenubarSubTrigger>
-                <MenubarSubContent>
+                  <MenubarItem>
+                    Save As...
+                    <MenubarShortcut>⇧⌘S</MenubarShortcut>
+                  </MenubarItem>
+                  <MenubarSeparator />
                   <MenubarSub>
-                    <MenubarSubTrigger>By Date</MenubarSubTrigger>
+                    <MenubarSubTrigger>
+                      <DownloadIcon />
+                      Export
+                    </MenubarSubTrigger>
                     <MenubarSubContent>
-                      <MenubarItem>Today</MenubarItem>
-                      <MenubarItem>This Week</MenubarItem>
-                      <MenubarItem>This Month</MenubarItem>
+                      <MenubarItem>Export as JSON</MenubarItem>
+                      <MenubarItem>Export as CSV</MenubarItem>
+                      <MenubarItem>Export as PDF</MenubarItem>
+                      <MenubarSeparator />
+                      <MenubarItem>Custom Export...</MenubarItem>
                     </MenubarSubContent>
                   </MenubarSub>
+                  <MenubarItem>
+                    <PrinterIcon />
+                    Print
+                    <MenubarShortcut>⌘P</MenubarShortcut>
+                  </MenubarItem>
+                </MenubarContent>
+              </MenubarMenu>
+
+              {/* Edit Menu */}
+              <MenubarMenu>
+                <MenubarTrigger>Edit</MenubarTrigger>
+                <MenubarContent>
+                  <MenubarItem>
+                    <UndoIcon />
+                    Undo
+                    <MenubarShortcut>⌘Z</MenubarShortcut>
+                  </MenubarItem>
+                  <MenubarItem>
+                    <RedoIcon />
+                    Redo
+                    <MenubarShortcut>⇧⌘Z</MenubarShortcut>
+                  </MenubarItem>
+                  <MenubarSeparator />
+                  <MenubarItem>
+                    <ScissorsIcon />
+                    Cut
+                    <MenubarShortcut>⌘X</MenubarShortcut>
+                  </MenubarItem>
+                  <MenubarItem>
+                    <CopyIcon />
+                    Copy
+                    <MenubarShortcut>⌘C</MenubarShortcut>
+                  </MenubarItem>
+                  <MenubarItem>
+                    <ClipboardIcon />
+                    Paste
+                    <MenubarShortcut>⌘V</MenubarShortcut>
+                  </MenubarItem>
+                  <MenubarSeparator />
+                  <MenubarItem>
+                    <SearchIcon />
+                    Find
+                    <MenubarShortcut>⌘F</MenubarShortcut>
+                  </MenubarItem>
+                  <MenubarItem>
+                    <ReplaceIcon />
+                    Replace
+                    <MenubarShortcut>⌘H</MenubarShortcut>
+                  </MenubarItem>
+                </MenubarContent>
+              </MenubarMenu>
+
+              {/* View Menu */}
+              <MenubarMenu>
+                <MenubarTrigger>View</MenubarTrigger>
+                <MenubarContent>
+                  <MenubarGroup>
+                    <MenubarLabel>Panels</MenubarLabel>
+                    <MenubarCheckboxItem
+                      checked={showSidebar}
+                      onCheckedChange={setShowSidebar}
+                    >
+                      <PanelLeftIcon />
+                      Sidebar
+                    </MenubarCheckboxItem>
+                    <MenubarCheckboxItem
+                      checked={showToolbar}
+                      onCheckedChange={setShowToolbar}
+                    >
+                      <LayoutIcon />
+                      Toolbar
+                    </MenubarCheckboxItem>
+                    <MenubarCheckboxItem
+                      checked={showStatusBar}
+                      onCheckedChange={setShowStatusBar}
+                    >
+                      Status Bar
+                    </MenubarCheckboxItem>
+                  </MenubarGroup>
+                  <MenubarSeparator />
+                  <MenubarGroup>
+                    <MenubarLabel>Zoom</MenubarLabel>
+                  </MenubarGroup>
+                  <MenubarItem>
+                    <ZoomInIcon />
+                    Zoom In
+                    <MenubarShortcut>⌘+</MenubarShortcut>
+                  </MenubarItem>
+                  <MenubarItem>
+                    <ZoomOutIcon />
+                    Zoom Out
+                    <MenubarShortcut>⌘-</MenubarShortcut>
+                  </MenubarItem>
+                  <MenubarItem>
+                    Reset Zoom
+                    <MenubarShortcut>⌘0</MenubarShortcut>
+                  </MenubarItem>
+                  <MenubarSeparator />
+                  <MenubarItem>
+                    <MaximizeIcon />
+                    Full Screen
+                    <MenubarShortcut>⌃⌘F</MenubarShortcut>
+                  </MenubarItem>
+                  <MenubarSeparator />
                   <MenubarSub>
-                    <MenubarSubTrigger>By Type</MenubarSubTrigger>
+                    <MenubarSubTrigger>
+                      <SunIcon />
+                      Theme
+                    </MenubarSubTrigger>
                     <MenubarSubContent>
-                      <MenubarItem>Documents</MenubarItem>
-                      <MenubarItem>Images</MenubarItem>
-                      <MenubarItem>Videos</MenubarItem>
+                      <MenubarRadioGroup value={theme} onValueChange={setTheme}>
+                        <MenubarRadioItem value="light">
+                          <SunIcon />
+                          Light
+                        </MenubarRadioItem>
+                        <MenubarRadioItem value="dark">
+                          <MoonIcon />
+                          Dark
+                        </MenubarRadioItem>
+                        <MenubarRadioItem value="system">
+                          <MonitorIcon />
+                          System
+                        </MenubarRadioItem>
+                      </MenubarRadioGroup>
                     </MenubarSubContent>
                   </MenubarSub>
-                </MenubarSubContent>
-              </MenubarSub>
-            </MenubarContent>
-          </MenubarMenu>
-        </Menubar>
-      </div>
+                </MenubarContent>
+              </MenubarMenu>
 
-      {/* Destructive Variants */}
-      <div>
-        <h3 className="text-sm font-medium mb-2">With Destructive Actions</h3>
-        <Menubar>
-          <MenubarMenu>
-            <MenubarTrigger>Actions</MenubarTrigger>
-            <MenubarContent>
-              <MenubarItem>
-                <Copy className="mr-2 h-4 w-4" />
-                Duplicate
-              </MenubarItem>
-              <MenubarItem>
-                <Settings className="mr-2 h-4 w-4" />
-                Edit Properties
-              </MenubarItem>
-              <MenubarSeparator />
-              <MenubarItem variant="destructive">
-                Delete Item
-                <MenubarShortcut>⌫</MenubarShortcut>
-              </MenubarItem>
-              <MenubarItem variant="destructive">
-                Clear All Data
-                <MenubarShortcut>⇧⌫</MenubarShortcut>
-              </MenubarItem>
-            </MenubarContent>
-          </MenubarMenu>
-        </Menubar>
-      </div>
+              {/* Tools Menu */}
+              <MenubarMenu>
+                <MenubarTrigger>Tools</MenubarTrigger>
+                <MenubarContent>
+                  <MenubarItem>
+                    <TerminalIcon />
+                    Developer Console
+                    <MenubarShortcut>⌥⌘I</MenubarShortcut>
+                  </MenubarItem>
+                  <MenubarItem>
+                    <SettingsIcon />
+                    Settings
+                    <MenubarShortcut>⌘,</MenubarShortcut>
+                  </MenubarItem>
+                  <MenubarSeparator />
+                  <MenubarGroup>
+                    <MenubarCheckboxItem
+                      checked={notifications}
+                      onCheckedChange={setNotifications}
+                    >
+                      <BellIcon />
+                      Enable Notifications
+                    </MenubarCheckboxItem>
+                  </MenubarGroup>
+                </MenubarContent>
+              </MenubarMenu>
 
-      {/* Disabled States */}
-      <div>
-        <h3 className="text-sm font-medium mb-2">With Disabled Items</h3>
-        <Menubar>
-          <MenubarMenu>
-            <MenubarTrigger>File</MenubarTrigger>
-            <MenubarContent>
-              <MenubarItem>
-                <FileText className="mr-2 h-4 w-4" />
-                New File
-                <MenubarShortcut>⌘N</MenubarShortcut>
-              </MenubarItem>
-              <MenubarItem disabled>
-                <Save className="mr-2 h-4 w-4" />
-                Save (No changes)
-                <MenubarShortcut>⌘S</MenubarShortcut>
-              </MenubarItem>
-              <MenubarItem disabled>
-                <Upload className="mr-2 h-4 w-4" />
-                Import (Coming Soon)
-              </MenubarItem>
-            </MenubarContent>
-          </MenubarMenu>
-          <MenubarMenu>
-            <MenubarTrigger disabled>Premium Features</MenubarTrigger>
-          </MenubarMenu>
-        </Menubar>
-      </div>
+              {/* Help Menu */}
+              <MenubarMenu>
+                <MenubarTrigger>Help</MenubarTrigger>
+                <MenubarContent>
+                  <MenubarItem>
+                    <BookOpenIcon />
+                    Documentation
+                  </MenubarItem>
+                  <MenubarItem>
+                    <MessageSquareIcon />
+                    Community
+                  </MenubarItem>
+                  <MenubarItem>
+                    <HelpCircleIcon />
+                    Support
+                  </MenubarItem>
+                  <MenubarSeparator />
+                  <MenubarItem>About Neynar</MenubarItem>
+                </MenubarContent>
+              </MenubarMenu>
+            </Menubar>
 
-      {/* Inset Items */}
-      <div>
-        <h3 className="text-sm font-medium mb-2">With Inset Alignment</h3>
-        <Menubar>
-          <MenubarMenu>
-            <MenubarTrigger>View</MenubarTrigger>
-            <MenubarContent>
-              <MenubarLabel inset>Display Options</MenubarLabel>
-              <MenubarSeparator />
-              <MenubarItem inset>List View</MenubarItem>
-              <MenubarItem>
-                <Settings className="mr-2 h-4 w-4" />
-                Grid View
-              </MenubarItem>
-              <MenubarItem inset>Compact View</MenubarItem>
-            </MenubarContent>
-          </MenubarMenu>
-        </Menubar>
-      </div>
-    </div>
-  ),
-  parameters: {
-    docs: {
-      description: {
-        story:
-          "Comprehensive showcase of all menubar variants including basic menus, single menus, nested submenus, destructive actions, disabled states, and inset alignment patterns.",
-      },
-    },
+            {/* Content Area showing current state */}
+            <div className="border-border bg-card space-y-2 rounded-md border p-4">
+              <h4 className="text-sm font-medium">View Settings</h4>
+              <div className="text-muted-foreground space-y-1 text-xs">
+                <p>Sidebar: {showSidebar ? "Visible" : "Hidden"}</p>
+                <p>Toolbar: {showToolbar ? "Visible" : "Hidden"}</p>
+                <p>Status Bar: {showStatusBar ? "Visible" : "Hidden"}</p>
+                <p>Theme: {theme}</p>
+                <p>Notifications: {notifications ? "Enabled" : "Disabled"}</p>
+              </div>
+            </div>
+          </div>
+
+          {/* Code Editor Menubar Example */}
+          <div className="border-border bg-background space-y-4 rounded-lg border p-4">
+            <div>
+              <h3 className="font-semibold">Code Editor</h3>
+              <p className="text-muted-foreground text-sm">
+                Menubar for developer tools and code editing
+              </p>
+            </div>
+
+            <Menubar>
+              <MenubarMenu>
+                <MenubarTrigger>File</MenubarTrigger>
+                <MenubarContent>
+                  <MenubarItem>New File</MenubarItem>
+                  <MenubarItem>Open Folder...</MenubarItem>
+                  <MenubarSeparator />
+                  <MenubarItem>Save All</MenubarItem>
+                  <MenubarSeparator />
+                  <MenubarItem variant="destructive">Close Editor</MenubarItem>
+                </MenubarContent>
+              </MenubarMenu>
+
+              <MenubarMenu>
+                <MenubarTrigger>Selection</MenubarTrigger>
+                <MenubarContent>
+                  <MenubarItem>Select All</MenubarItem>
+                  <MenubarItem>Expand Selection</MenubarItem>
+                  <MenubarItem>Shrink Selection</MenubarItem>
+                  <MenubarSeparator />
+                  <MenubarItem>Add Cursor Above</MenubarItem>
+                  <MenubarItem>Add Cursor Below</MenubarItem>
+                </MenubarContent>
+              </MenubarMenu>
+
+              <MenubarMenu>
+                <MenubarTrigger>Go</MenubarTrigger>
+                <MenubarContent>
+                  <MenubarItem>Go to Line...</MenubarItem>
+                  <MenubarItem>Go to Symbol...</MenubarItem>
+                  <MenubarSeparator />
+                  <MenubarItem>Back</MenubarItem>
+                  <MenubarItem>Forward</MenubarItem>
+                </MenubarContent>
+              </MenubarMenu>
+
+              <MenubarMenu>
+                <MenubarTrigger>Terminal</MenubarTrigger>
+                <MenubarContent>
+                  <MenubarItem>
+                    <TerminalIcon />
+                    New Terminal
+                  </MenubarItem>
+                  <MenubarItem>Split Terminal</MenubarItem>
+                  <MenubarSeparator />
+                  <MenubarItem>Run Task...</MenubarItem>
+                  <MenubarItem>Run Build Task...</MenubarItem>
+                </MenubarContent>
+              </MenubarMenu>
+            </Menubar>
+          </div>
+        </div>
+      );
+    }
+
+    return <ApplicationMenubar />;
   },
 };
 
 /**
- * Real-world context showing menubar in a typical application interface.
- * Demonstrates how menubar fits within a complete UI layout.
+ * Complete design system reference showing all menubar components, variants,
+ * and composition patterns.
  */
-export const InContext: Story = {
-  render: function ContextualMenubar() {
-    const [currentProject, setCurrentProject] = React.useState("My Project");
-    const [isProjectSaved, setIsProjectSaved] = React.useState(true);
-    
-    const handleSave = () => {
-      setIsProjectSaved(true);
-    };
-    
-    const handleEdit = () => {
-      setIsProjectSaved(false);
-    };
+export const Variants: Story = {
+  parameters: {
+    layout: "padded",
+  },
+  render: () => {
+    const [textSize, setTextSize] = useState("medium");
+    const [showLineNumbers, setShowLineNumbers] = useState(true);
+    const [wordWrap, setWordWrap] = useState(false);
 
     return (
-      <div className="w-full max-w-5xl mx-auto border rounded-lg overflow-hidden bg-background">
-        {/* Application Header with Menubar */}
-        <div className="border-b bg-muted/30 p-2">
+      <div className="w-full max-w-4xl space-y-10">
+        {/* Basic Menubar */}
+        <section className="space-y-4">
+          <div>
+            <h3 className="text-lg font-semibold">Basic Menubar</h3>
+            <p className="text-muted-foreground text-sm">
+              Simple menubar with File, Edit, and View menus
+            </p>
+          </div>
           <Menubar>
             <MenubarMenu>
               <MenubarTrigger>File</MenubarTrigger>
               <MenubarContent>
-                <MenubarItem onClick={() => setCurrentProject("New Project")}>
-                  <FileText className="mr-2 h-4 w-4" />
-                  New Project
+                <MenubarItem>New</MenubarItem>
+                <MenubarItem>Open</MenubarItem>
+                <MenubarItem>Save</MenubarItem>
+              </MenubarContent>
+            </MenubarMenu>
+
+            <MenubarMenu>
+              <MenubarTrigger>Edit</MenubarTrigger>
+              <MenubarContent>
+                <MenubarItem>Undo</MenubarItem>
+                <MenubarItem>Redo</MenubarItem>
+                <MenubarSeparator />
+                <MenubarItem>Cut</MenubarItem>
+                <MenubarItem>Copy</MenubarItem>
+                <MenubarItem>Paste</MenubarItem>
+              </MenubarContent>
+            </MenubarMenu>
+
+            <MenubarMenu>
+              <MenubarTrigger>View</MenubarTrigger>
+              <MenubarContent>
+                <MenubarItem>Zoom In</MenubarItem>
+                <MenubarItem>Zoom Out</MenubarItem>
+                <MenubarItem>Reset Zoom</MenubarItem>
+              </MenubarContent>
+            </MenubarMenu>
+          </Menubar>
+        </section>
+
+        {/* With Icons and Shortcuts */}
+        <section className="space-y-4">
+          <div>
+            <h3 className="text-lg font-semibold">Icons & Shortcuts</h3>
+            <p className="text-muted-foreground text-sm">
+              Menu items with icons and keyboard shortcuts
+            </p>
+          </div>
+          <Menubar>
+            <MenubarMenu>
+              <MenubarTrigger>File</MenubarTrigger>
+              <MenubarContent>
+                <MenubarItem>
+                  <FileIcon />
+                  New File
                   <MenubarShortcut>⌘N</MenubarShortcut>
                 </MenubarItem>
                 <MenubarItem>
-                  <Folder className="mr-2 h-4 w-4" />
-                  Open Project
+                  <FolderOpenIcon />
+                  Open
                   <MenubarShortcut>⌘O</MenubarShortcut>
                 </MenubarItem>
                 <MenubarSeparator />
-                <MenubarItem 
-                  onClick={handleSave}
-                  disabled={isProjectSaved}
-                >
-                  <Save className="mr-2 h-4 w-4" />
-                  Save Project
+                <MenubarItem>
+                  <SaveIcon />
+                  Save
                   <MenubarShortcut>⌘S</MenubarShortcut>
                 </MenubarItem>
+                <MenubarItem>
+                  <PrinterIcon />
+                  Print
+                  <MenubarShortcut>⌘P</MenubarShortcut>
+                </MenubarItem>
+              </MenubarContent>
+            </MenubarMenu>
+          </Menubar>
+        </section>
+
+        {/* Menu Item Variants */}
+        <section className="space-y-4">
+          <div>
+            <h3 className="text-lg font-semibold">Menu Item Variants</h3>
+            <p className="text-muted-foreground text-sm">
+              Semantic variants for different action types and feedback
+            </p>
+          </div>
+          <Menubar>
+            <MenubarMenu>
+              <MenubarTrigger>Actions</MenubarTrigger>
+              <MenubarContent>
+                <MenubarItem>
+                  <SaveIcon />
+                  Save Changes
+                </MenubarItem>
+                <MenubarItem>
+                  <DownloadIcon />
+                  Download
+                </MenubarItem>
+                <MenubarSeparator />
+                <MenubarItem variant="success">
+                  <CheckCircle2Icon />
+                  Approve
+                </MenubarItem>
+                <MenubarItem variant="warning">
+                  <AlertTriangleIcon />
+                  Mark for Review
+                </MenubarItem>
+                <MenubarItem variant="info">
+                  <InfoIcon />
+                  View Details
+                </MenubarItem>
+                <MenubarSeparator />
+                <MenubarItem variant="destructive">
+                  <LogOutIcon />
+                  Sign Out
+                </MenubarItem>
+                <MenubarItem variant="destructive" disabled>
+                  Delete (Disabled)
+                </MenubarItem>
+              </MenubarContent>
+            </MenubarMenu>
+          </Menubar>
+        </section>
+
+        {/* Nested Submenus */}
+        <section className="space-y-4">
+          <div>
+            <h3 className="text-lg font-semibold">Nested Submenus</h3>
+            <p className="text-muted-foreground text-sm">
+              Hierarchical menu structures with multiple levels
+            </p>
+          </div>
+          <Menubar>
+            <MenubarMenu>
+              <MenubarTrigger>File</MenubarTrigger>
+              <MenubarContent>
+                <MenubarItem>
+                  <FileIcon />
+                  New File
+                </MenubarItem>
                 <MenubarSub>
                   <MenubarSubTrigger>
-                    <Download className="mr-2 h-4 w-4" />
+                    <FolderOpenIcon />
+                    Open Recent
+                  </MenubarSubTrigger>
+                  <MenubarSubContent>
+                    <MenubarItem>Project A</MenubarItem>
+                    <MenubarItem>Project B</MenubarItem>
+                    <MenubarItem>Project C</MenubarItem>
+                    <MenubarSeparator />
+                    <MenubarItem>Clear History</MenubarItem>
+                  </MenubarSubContent>
+                </MenubarSub>
+                <MenubarSeparator />
+                <MenubarSub>
+                  <MenubarSubTrigger>
+                    <DownloadIcon />
                     Export
                   </MenubarSubTrigger>
                   <MenubarSubContent>
-                    <MenubarItem>Export as ZIP</MenubarItem>
                     <MenubarItem>Export as JSON</MenubarItem>
-                    <MenubarItem>Export to Cloud</MenubarItem>
+                    <MenubarItem>Export as CSV</MenubarItem>
+                    <MenubarItem>Export as XML</MenubarItem>
+                    <MenubarSeparator />
+                    <MenubarSub>
+                      <MenubarSubTrigger>More Formats</MenubarSubTrigger>
+                      <MenubarSubContent>
+                        <MenubarItem>Export as YAML</MenubarItem>
+                        <MenubarItem>Export as TOML</MenubarItem>
+                        <MenubarItem>Export as Markdown</MenubarItem>
+                      </MenubarSubContent>
+                    </MenubarSub>
                   </MenubarSubContent>
                 </MenubarSub>
+              </MenubarContent>
+            </MenubarMenu>
+          </Menubar>
+        </section>
+
+        {/* Checkbox Items */}
+        <section className="space-y-4">
+          <div>
+            <h3 className="text-lg font-semibold">Checkbox Items</h3>
+            <p className="text-muted-foreground text-sm">
+              Toggle multiple independent view options
+            </p>
+          </div>
+          <Menubar>
+            <MenubarMenu>
+              <MenubarTrigger>View</MenubarTrigger>
+              <MenubarContent>
+                <MenubarGroup>
+                  <MenubarLabel>Editor Options</MenubarLabel>
+                  <MenubarCheckboxItem
+                    checked={showLineNumbers}
+                    onCheckedChange={setShowLineNumbers}
+                  >
+                    Show Line Numbers
+                  </MenubarCheckboxItem>
+                  <MenubarCheckboxItem
+                    checked={wordWrap}
+                    onCheckedChange={setWordWrap}
+                  >
+                    Word Wrap
+                  </MenubarCheckboxItem>
+                </MenubarGroup>
                 <MenubarSeparator />
-                <MenubarItem>
-                  Project Settings
-                  <MenubarShortcut>⌘,</MenubarShortcut>
-                </MenubarItem>
+                <MenubarItem>Toggle Minimap</MenubarItem>
               </MenubarContent>
             </MenubarMenu>
+          </Menubar>
+          <div className="text-muted-foreground text-xs">
+            Line Numbers: {showLineNumbers ? "On" : "Off"}, Word Wrap:{" "}
+            {wordWrap ? "On" : "Off"}
+          </div>
+        </section>
 
+        {/* Radio Groups */}
+        <section className="space-y-4">
+          <div>
+            <h3 className="text-lg font-semibold">Radio Groups</h3>
+            <p className="text-muted-foreground text-sm">
+              Select one option from mutually exclusive choices
+            </p>
+          </div>
+          <Menubar>
+            <MenubarMenu>
+              <MenubarTrigger>Format</MenubarTrigger>
+              <MenubarContent>
+                <MenubarGroup>
+                  <MenubarLabel>Text Size</MenubarLabel>
+                </MenubarGroup>
+                <MenubarRadioGroup value={textSize} onValueChange={setTextSize}>
+                  <MenubarRadioItem value="small">Small</MenubarRadioItem>
+                  <MenubarRadioItem value="medium">Medium</MenubarRadioItem>
+                  <MenubarRadioItem value="large">Large</MenubarRadioItem>
+                  <MenubarRadioItem value="xlarge">
+                    Extra Large
+                  </MenubarRadioItem>
+                </MenubarRadioGroup>
+              </MenubarContent>
+            </MenubarMenu>
+          </Menubar>
+          <div className="text-muted-foreground text-xs">
+            Selected size: {textSize}
+          </div>
+        </section>
+
+        {/* Disabled Items */}
+        <section className="space-y-4">
+          <div>
+            <h3 className="text-lg font-semibold">Disabled Items</h3>
+            <p className="text-muted-foreground text-sm">
+              Menu items can be disabled when actions are unavailable
+            </p>
+          </div>
+          <Menubar>
             <MenubarMenu>
               <MenubarTrigger>Edit</MenubarTrigger>
               <MenubarContent>
-                <MenubarItem onClick={handleEdit}>
-                  <Undo className="mr-2 h-4 w-4" />
+                <MenubarItem>
+                  <UndoIcon />
                   Undo
                   <MenubarShortcut>⌘Z</MenubarShortcut>
                 </MenubarItem>
-                <MenubarItem onClick={handleEdit}>
-                  <Redo className="mr-2 h-4 w-4" />
-                  Redo
+                <MenubarItem disabled>
+                  <RedoIcon />
+                  Redo (Nothing to redo)
                   <MenubarShortcut>⇧⌘Z</MenubarShortcut>
                 </MenubarItem>
                 <MenubarSeparator />
-                <MenubarItem onClick={handleEdit}>
-                  <Copy className="mr-2 h-4 w-4" />
-                  Copy Selection
+                <MenubarItem>
+                  <CopyIcon />
+                  Copy
                   <MenubarShortcut>⌘C</MenubarShortcut>
                 </MenubarItem>
-                <MenubarItem onClick={handleEdit}>
-                  <ClipboardPaste className="mr-2 h-4 w-4" />
-                  Paste
+                <MenubarItem disabled>
+                  <ClipboardIcon />
+                  Paste (Clipboard empty)
                   <MenubarShortcut>⌘V</MenubarShortcut>
                 </MenubarItem>
-                <MenubarSeparator />
-                <MenubarItem>
-                  <Search className="mr-2 h-4 w-4" />
-                  Find in Project
-                  <MenubarShortcut>⌘F</MenubarShortcut>
-                </MenubarItem>
               </MenubarContent>
             </MenubarMenu>
+          </Menubar>
+        </section>
 
+        {/* Complete Application Menubar */}
+        <section className="space-y-4">
+          <div>
+            <h3 className="text-lg font-semibold">
+              Complete Application Menubar
+            </h3>
+            <p className="text-muted-foreground text-sm">
+              Full-featured menubar with all component types
+            </p>
+          </div>
+          <Menubar>
             <MenubarMenu>
-              <MenubarTrigger>View</MenubarTrigger>
+              <MenubarTrigger>File</MenubarTrigger>
               <MenubarContent>
-                <MenubarCheckboxItem checked={true}>
-                  Show Sidebar
-                  <MenubarShortcut>⌘B</MenubarShortcut>
-                </MenubarCheckboxItem>
-                <MenubarCheckboxItem checked={false}>
-                  Show Minimap
-                  <MenubarShortcut>⌘M</MenubarShortcut>
-                </MenubarCheckboxItem>
-                <MenubarSeparator />
                 <MenubarItem>
-                  <Maximize className="mr-2 h-4 w-4" />
-                  Zoom In
-                  <MenubarShortcut>⌘+</MenubarShortcut>
+                  <FileIcon />
+                  New
+                  <MenubarShortcut>⌘N</MenubarShortcut>
                 </MenubarItem>
                 <MenubarItem>
-                  <Minimize className="mr-2 h-4 w-4" />
-                  Zoom Out
-                  <MenubarShortcut>⌘-</MenubarShortcut>
+                  <FolderOpenIcon />
+                  Open
+                  <MenubarShortcut>⌘O</MenubarShortcut>
                 </MenubarItem>
+                <MenubarSeparator />
                 <MenubarItem>
-                  <RotateCcw className="mr-2 h-4 w-4" />
-                  Reset Zoom
-                  <MenubarShortcut>⌘0</MenubarShortcut>
+                  <SaveIcon />
+                  Save
+                  <MenubarShortcut>⌘S</MenubarShortcut>
                 </MenubarItem>
+                <MenubarSub>
+                  <MenubarSubTrigger>Export</MenubarSubTrigger>
+                  <MenubarSubContent>
+                    <MenubarItem>PDF Document</MenubarItem>
+                    <MenubarItem>Text File</MenubarItem>
+                  </MenubarSubContent>
+                </MenubarSub>
               </MenubarContent>
             </MenubarMenu>
 
             <MenubarMenu>
-              <MenubarTrigger>Tools</MenubarTrigger>
+              <MenubarTrigger>Edit</MenubarTrigger>
               <MenubarContent>
-                <MenubarItem>
-                  <Zap className="mr-2 h-4 w-4" />
-                  Quick Actions
-                  <MenubarShortcut>⌘K</MenubarShortcut>
-                </MenubarItem>
-                <MenubarItem>
-                  <Filter className="mr-2 h-4 w-4" />
-                  Filter Results
-                </MenubarItem>
+                <MenubarItem>Undo</MenubarItem>
+                <MenubarItem disabled>Redo</MenubarItem>
                 <MenubarSeparator />
-                <MenubarItem>
-                  <Settings className="mr-2 h-4 w-4" />
-                  Preferences
-                  <MenubarShortcut>⌘,</MenubarShortcut>
-                </MenubarItem>
+                <MenubarItem>Cut</MenubarItem>
+                <MenubarItem>Copy</MenubarItem>
+                <MenubarItem>Paste</MenubarItem>
+              </MenubarContent>
+            </MenubarMenu>
+
+            <MenubarMenu>
+              <MenubarTrigger>View</MenubarTrigger>
+              <MenubarContent>
+                <MenubarGroup>
+                  <MenubarCheckboxItem checked>Toolbar</MenubarCheckboxItem>
+                  <MenubarCheckboxItem>Status Bar</MenubarCheckboxItem>
+                </MenubarGroup>
+                <MenubarSeparator />
+                <MenubarSub>
+                  <MenubarSubTrigger>Theme</MenubarSubTrigger>
+                  <MenubarSubContent>
+                    <MenubarRadioGroup value="system">
+                      <MenubarRadioItem value="light">Light</MenubarRadioItem>
+                      <MenubarRadioItem value="dark">Dark</MenubarRadioItem>
+                      <MenubarRadioItem value="system">System</MenubarRadioItem>
+                    </MenubarRadioGroup>
+                  </MenubarSubContent>
+                </MenubarSub>
               </MenubarContent>
             </MenubarMenu>
 
             <MenubarMenu>
               <MenubarTrigger>Help</MenubarTrigger>
               <MenubarContent>
-                <MenubarItem>
-                  <HelpCircle className="mr-2 h-4 w-4" />
-                  Documentation
-                </MenubarItem>
-                <MenubarItem>
-                  <Info className="mr-2 h-4 w-4" />
-                  Keyboard Shortcuts
-                  <MenubarShortcut>⌘/</MenubarShortcut>
-                </MenubarItem>
+                <MenubarItem>Documentation</MenubarItem>
+                <MenubarItem>Keyboard Shortcuts</MenubarItem>
                 <MenubarSeparator />
-                <MenubarItem>
-                  Contact Support
-                </MenubarItem>
-                <MenubarItem>
-                  <Info className="mr-2 h-4 w-4" />
-                  About
-                </MenubarItem>
+                <MenubarItem>About</MenubarItem>
               </MenubarContent>
             </MenubarMenu>
           </Menubar>
-        </div>
+        </section>
 
-        {/* Application Content */}
-        <div className="flex">
-          {/* Sidebar */}
-          <div className="w-48 border-r bg-muted/20 p-4">
-            <h3 className="font-medium text-sm mb-3">Project Files</h3>
-            <div className="space-y-1 text-sm">
-              <div className="flex items-center gap-2 p-1 rounded hover:bg-muted/50">
-                <FileText className="h-4 w-4 text-muted-foreground" />
-                index.html
-              </div>
-              <div className="flex items-center gap-2 p-1 rounded hover:bg-muted/50">
-                <FileText className="h-4 w-4 text-muted-foreground" />
-                styles.css
-              </div>
-              <div className="flex items-center gap-2 p-1 rounded hover:bg-muted/50">
-                <FileText className="h-4 w-4 text-muted-foreground" />
-                script.js
-              </div>
-            </div>
+        {/* Minimal Menubar */}
+        <section className="space-y-4">
+          <div>
+            <h3 className="text-lg font-semibold">Minimal Menubar</h3>
+            <p className="text-muted-foreground text-sm">
+              Simple menubar without icons or shortcuts
+            </p>
           </div>
+          <Menubar>
+            <MenubarMenu>
+              <MenubarTrigger>File</MenubarTrigger>
+              <MenubarContent>
+                <MenubarItem>New</MenubarItem>
+                <MenubarItem>Open</MenubarItem>
+                <MenubarItem>Save</MenubarItem>
+                <MenubarSeparator />
+                <MenubarItem>Close</MenubarItem>
+              </MenubarContent>
+            </MenubarMenu>
 
-          {/* Main Content */}
-          <div className="flex-1 p-6">
-            <div className="mb-4 flex items-center justify-between">
-              <h1 className="text-xl font-semibold">
-                {currentProject}
-                {!isProjectSaved && <span className="text-muted-foreground ml-2">•</span>}
-              </h1>
-              <div className="text-sm text-muted-foreground">
-                {isProjectSaved ? "All changes saved" : "Unsaved changes"}
-              </div>
-            </div>
-
-            <div className="space-y-4">
-              <div className="border rounded-lg p-4 bg-muted/10">
-                <h3 className="font-medium mb-2">Welcome to your project</h3>
-                <p className="text-sm text-muted-foreground">
-                  Use the menubar above to create, edit, and manage your project files. 
-                  All standard keyboard shortcuts are supported for efficient workflow.
-                </p>
-              </div>
-
-              <div className="border rounded-lg p-4 bg-muted/10">
-                <h3 className="font-medium mb-2">Quick Actions</h3>
-                <div className="text-sm text-muted-foreground space-y-1">
-                  <p>• Press <kbd className="px-1 py-0.5 text-xs bg-muted rounded">⌘N</kbd> to create a new project</p>
-                  <p>• Press <kbd className="px-1 py-0.5 text-xs bg-muted rounded">⌘S</kbd> to save your work</p>
-                  <p>• Press <kbd className="px-1 py-0.5 text-xs bg-muted rounded">⌘K</kbd> for quick actions</p>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
+            <MenubarMenu>
+              <MenubarTrigger>Edit</MenubarTrigger>
+              <MenubarContent>
+                <MenubarItem>Undo</MenubarItem>
+                <MenubarItem>Redo</MenubarItem>
+              </MenubarContent>
+            </MenubarMenu>
 
-        {/* Status Bar */}
-        <div className="border-t bg-muted/30 px-4 py-2 text-xs text-muted-foreground flex items-center justify-between">
-          <div>Ready</div>
-          <div className="flex items-center gap-4">
-            <span>Line 1, Column 1</span>
-            <span>UTF-8</span>
-            <span>JavaScript</span>
-          </div>
-        </div>
+            <MenubarMenu>
+              <MenubarTrigger>Help</MenubarTrigger>
+              <MenubarContent>
+                <MenubarItem>Documentation</MenubarItem>
+                <MenubarItem>About</MenubarItem>
+              </MenubarContent>
+            </MenubarMenu>
+          </Menubar>
+        </section>
       </div>
     );
   },
+};
+
+/**
+ * Frosted effect demonstration - Menubar menus use a translucent background (75% opacity)
+ * with backdrop blur (12px) creating a frosted glass effect.
+ */
+export const Frosted: Story = {
   parameters: {
-    docs: {
-      description: {
-        story:
-          "A complete application interface showing how menubar integrates with other UI elements. This example demonstrates a project management application with file operations, state management, and real-world interactions that designers and business teams would encounter.",
-      },
-    },
+    layout: "fullscreen",
   },
-};
+  render: () => (
+    <div className="relative min-h-screen w-full overflow-hidden">
+      {/* Colorful busy background */}
+      <div className="absolute inset-0 grid grid-cols-4 grid-rows-4 gap-2 p-4">
+        <div className="rounded-lg bg-gradient-to-br from-purple-500 to-pink-500" />
+        <div className="rounded-lg bg-gradient-to-br from-blue-500 to-cyan-500" />
+        <div className="rounded-lg bg-gradient-to-br from-green-500 to-emerald-500" />
+        <div className="rounded-lg bg-gradient-to-br from-yellow-500 to-orange-500" />
+        <div className="rounded-lg bg-gradient-to-br from-red-500 to-rose-500" />
+        <div className="rounded-lg bg-gradient-to-br from-indigo-500 to-violet-500" />
+        <div className="rounded-lg bg-gradient-to-br from-teal-500 to-cyan-500" />
+        <div className="rounded-lg bg-gradient-to-br from-amber-500 to-yellow-500" />
+        <div className="rounded-lg bg-gradient-to-br from-fuchsia-500 to-pink-500" />
+        <div className="rounded-lg bg-gradient-to-br from-lime-500 to-green-500" />
+        <div className="rounded-lg bg-gradient-to-br from-sky-500 to-blue-500" />
+        <div className="rounded-lg bg-gradient-to-br from-orange-500 to-red-500" />
+        <div className="rounded-lg bg-gradient-to-br from-violet-500 to-purple-500" />
+        <div className="rounded-lg bg-gradient-to-br from-cyan-500 to-teal-500" />
+        <div className="rounded-lg bg-gradient-to-br from-rose-500 to-pink-500" />
+        <div className="rounded-lg bg-gradient-to-br from-emerald-500 to-lime-500" />
+      </div>
+
+      <div className="relative z-10 flex min-h-screen items-center justify-center p-8">
+        <Menubar>
+          <MenubarMenu>
+            <MenubarTrigger>File</MenubarTrigger>
+            <MenubarContent>
+              <MenubarItem>
+                <FileIcon />
+                New File
+              </MenubarItem>
+              <MenubarItem>
+                <FolderOpenIcon />
+                Open
+              </MenubarItem>
+              <MenubarSeparator />
+              <MenubarItem>
+                <SaveIcon />
+                Save
+              </MenubarItem>
+            </MenubarContent>
+          </MenubarMenu>
+          <MenubarMenu>
+            <MenubarTrigger>Edit</MenubarTrigger>
+            <MenubarContent>
+              <MenubarItem>
+                <UndoIcon />
+                Undo
+              </MenubarItem>
+              <MenubarItem>
+                <RedoIcon />
+                Redo
+              </MenubarItem>
+            </MenubarContent>
+          </MenubarMenu>
+        </Menubar>
+      </div>
+    </div>
+  ),
+};
+
+/**
+ * Interactive playground for testing menubar props and behavior.
+ */
+export const Interactive: Story = {
+  render: (args) => (
+    <Menubar {...args}>
+      <MenubarMenu>
+        <MenubarTrigger>File</MenubarTrigger>
+        <MenubarContent>
+          <MenubarItem>
+            <FileIcon />
+            New File
+            <MenubarShortcut>⌘N</MenubarShortcut>
+          </MenubarItem>
+          <MenubarItem>
+            <FolderOpenIcon />
+            Open
+            <MenubarShortcut>⌘O</MenubarShortcut>
+          </MenubarItem>
+          <MenubarSeparator />
+          <MenubarItem>
+            <SaveIcon />
+            Save
+            <MenubarShortcut>⌘S</MenubarShortcut>
+          </MenubarItem>
+        </MenubarContent>
+      </MenubarMenu>
+
+      <MenubarMenu>
+        <MenubarTrigger>Edit</MenubarTrigger>
+        <MenubarContent>
+          <MenubarItem>
+            <UndoIcon />
+            Undo
+            <MenubarShortcut>⌘Z</MenubarShortcut>
+          </MenubarItem>
+          <MenubarItem>
+            <RedoIcon />
+            Redo
+            <MenubarShortcut>⇧⌘Z</MenubarShortcut>
+          </MenubarItem>
+          <MenubarSeparator />
+          <MenubarItem>
+            <CopyIcon />
+            Copy
+            <MenubarShortcut>⌘C</MenubarShortcut>
+          </MenubarItem>
+          <MenubarItem>
+            <ClipboardIcon />
+            Paste
+            <MenubarShortcut>⌘V</MenubarShortcut>
+          </MenubarItem>
+        </MenubarContent>
+      </MenubarMenu>
+
+      <MenubarMenu>
+        <MenubarTrigger>Help</MenubarTrigger>
+        <MenubarContent>
+          <MenubarItem>
+            <BookOpenIcon />
+            Documentation
+          </MenubarItem>
+          <MenubarItem>
+            <HelpCircleIcon />
+            Support
+          </MenubarItem>
+        </MenubarContent>
+      </MenubarMenu>
+    </Menubar>
+  ),
+  args: {},
+};