@neynar/ui 0.3.1 → 0.5.0

package/src/components/ui/stories/dropdown-menu.stories.tsx

@@ -1,373 +1,829 @@
-import type { Meta, StoryObj } from "@storybook/react-vite";
-import React from "react";
+import type { Meta, StoryObj } from "@storybook/react";
 import {
-  Settings,
-  User,
-  Users,
-  MoreHorizontal,
-  Edit,
-  Copy,
-  Trash2,
-  Mail,
-  MessageSquare,
-  PlusCircle,
-  CreditCard,
-  LogOut,
-  UserPlus,
+  UserIcon,
+  SettingsIcon,
+  LogOutIcon,
+  PlusIcon,
+  CopyIcon,
+  TrashIcon,
+  MailIcon,
+  BellIcon,
+  SunIcon,
+  MoonIcon,
+  MonitorIcon,
+  ChevronDownIcon,
+  FileTextIcon,
+  DownloadIcon,
+  ShareIcon,
+  EditIcon,
+  ArchiveIcon,
+  StarIcon,
+  CheckCircle2Icon,
+  AlertTriangleIcon,
+  InfoIcon,
 } from "lucide-react";
+import { useState } from "react";
+
+import { Button } from "../button";
 import {
   DropdownMenu,
+  DropdownMenuTrigger,
   DropdownMenuContent,
   DropdownMenuGroup,
-  DropdownMenuItem,
   DropdownMenuLabel,
-  DropdownMenuPortal,
+  DropdownMenuItem,
   DropdownMenuSeparator,
   DropdownMenuShortcut,
   DropdownMenuSub,
-  DropdownMenuSubContent,
   DropdownMenuSubTrigger,
-  DropdownMenuTrigger,
+  DropdownMenuSubContent,
   DropdownMenuCheckboxItem,
   DropdownMenuRadioGroup,
   DropdownMenuRadioItem,
 } from "../dropdown-menu";
-import { Button } from "../button";
 
-const meta = {
-  title: "Navigation & Menus/DropdownMenu",
+/**
+ * DropdownMenu stories for design system documentation.
+ *
+ * Demonstrates user menus, action menus, nested submenus, checkbox items,
+ * radio groups, keyboard shortcuts, and all menu item variants including
+ * destructive actions.
+ */
+const meta: Meta<typeof DropdownMenu> = {
+  title: "Components/Navigation & Menus/DropdownMenu",
   component: DropdownMenu,
   parameters: {
     layout: "centered",
     docs: {
       description: {
         component:
-          "A versatile dropdown menu component built on Radix UI primitives. Displays a list of actions or options when triggered by a button. Supports sub-menus, checkboxes, radio groups, keyboard shortcuts, and full keyboard navigation. Perfect for context menus, action lists, and complex menu hierarchies.",
+          "A versatile dropdown menu component built on Base UI Menu primitives. Supports nested submenus, checkboxes, radio groups, keyboard shortcuts, and destructive actions.",
       },
     },
   },
   argTypes: {
-    // These would be controlled at the individual component level
-    // since DropdownMenu itself is just a wrapper
+    defaultOpen: {
+      control: "boolean",
+      description: "Whether the menu is open by default (uncontrolled)",
+    },
+    open: {
+      control: "boolean",
+      description: "Controlled open state",
+    },
   },
-} satisfies Meta<typeof DropdownMenu>;
+};
 
 export default meta;
 type Story = StoryObj<typeof meta>;
 
 /**
- * Interactive playground for testing all dropdown menu features
+ * Realistic Neynar Dashboard scenarios showing user menus, action menus,
+ * and content management patterns.
  */
-export const Interactive: Story = {
-  render: function InteractiveDropdownMenu() {
-    const [showStatusBar, setShowStatusBar] = React.useState(true);
-    const [showActivityBar, setShowActivityBar] = React.useState(false);
-    const [position, setPosition] = React.useState("bottom");
-
-    return (
-      <DropdownMenu>
-        <DropdownMenuTrigger asChild>
-          <Button variant="outline">Interactive Menu</Button>
-        </DropdownMenuTrigger>
-        <DropdownMenuContent className="w-56">
-          <DropdownMenuLabel>My Account</DropdownMenuLabel>
-          <DropdownMenuSeparator />
-          <DropdownMenuGroup>
-            <DropdownMenuItem>
-              <User className="mr-2 h-4 w-4" />
-              <span>Profile</span>
-              <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>
-            </DropdownMenuItem>
-            <DropdownMenuItem>
-              <Settings className="mr-2 h-4 w-4" />
-              <span>Settings</span>
-              <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>
-            </DropdownMenuItem>
-          </DropdownMenuGroup>
-          <DropdownMenuSeparator />
-          <DropdownMenuLabel>View Options</DropdownMenuLabel>
-          <DropdownMenuCheckboxItem
-            checked={showStatusBar}
-            onCheckedChange={setShowStatusBar}
-          >
-            Status Bar
-          </DropdownMenuCheckboxItem>
-          <DropdownMenuCheckboxItem
-            checked={showActivityBar}
-            onCheckedChange={setShowActivityBar}
-          >
-            Activity Bar
-          </DropdownMenuCheckboxItem>
-          <DropdownMenuSeparator />
-          <DropdownMenuLabel>Position</DropdownMenuLabel>
-          <DropdownMenuRadioGroup value={position} onValueChange={setPosition}>
-            <DropdownMenuRadioItem value="top">Top</DropdownMenuRadioItem>
-            <DropdownMenuRadioItem value="bottom">Bottom</DropdownMenuRadioItem>
-            <DropdownMenuRadioItem value="right">Right</DropdownMenuRadioItem>
-          </DropdownMenuRadioGroup>
-          <DropdownMenuSeparator />
-          <DropdownMenuSub>
-            <DropdownMenuSubTrigger>
-              <UserPlus className="mr-2 h-4 w-4" />
-              <span>Invite users</span>
-            </DropdownMenuSubTrigger>
-            <DropdownMenuPortal>
-              <DropdownMenuSubContent>
-                <DropdownMenuItem>
-                  <Mail className="mr-2 h-4 w-4" />
-                  <span>Email</span>
-                </DropdownMenuItem>
-                <DropdownMenuItem>
-                  <MessageSquare className="mr-2 h-4 w-4" />
-                  <span>Message</span>
-                </DropdownMenuItem>
-              </DropdownMenuSubContent>
-            </DropdownMenuPortal>
-          </DropdownMenuSub>
-          <DropdownMenuSeparator />
-          <DropdownMenuItem disabled>
-            Disabled Item
-          </DropdownMenuItem>
-          <DropdownMenuItem variant="destructive">
-            <Trash2 className="mr-2 h-4 w-4" />
-            Delete Account
-          </DropdownMenuItem>
-        </DropdownMenuContent>
-      </DropdownMenu>
-    );
-  },
+export const InContext: Story = {
   parameters: {
-    docs: {
-      description: {
-        story:
-          "Interactive dropdown menu showcasing all available features: basic items, checkboxes, radio groups, submenus, shortcuts, disabled items, and destructive variants. Use this to test all component functionality.",
-      },
-    },
+    layout: "padded",
   },
-};
+  render: () => {
+    function UserMenu() {
+      const [notifications, setNotifications] = useState(true);
+      const [marketing, setMarketing] = useState(false);
 
-/**
- * Showcase of all dropdown menu variants and item types
- */
-export const Variants: Story = {
-  render: () => (
-    <div className="grid grid-cols-2 gap-8">
-      {/* Basic Menu */}
-      <div className="space-y-2">
-        <h3 className="text-sm font-medium">Basic Menu</h3>
+      return (
         <DropdownMenu>
-          <DropdownMenuTrigger asChild>
-            <Button variant="outline">Basic Menu</Button>
+          <DropdownMenuTrigger>
+            <Button variant="ghost" size="icon">
+              <UserIcon />
+            </Button>
           </DropdownMenuTrigger>
-          <DropdownMenuContent className="w-48">
-            <DropdownMenuLabel>Actions</DropdownMenuLabel>
+          <DropdownMenuContent align="end" className="w-56">
+            <DropdownMenuGroup>
+              <DropdownMenuLabel>My Account</DropdownMenuLabel>
+            </DropdownMenuGroup>
             <DropdownMenuSeparator />
-            <DropdownMenuItem>
-              <Edit className="mr-2 h-4 w-4" />
-              Edit
-            </DropdownMenuItem>
-            <DropdownMenuItem>
-              <Copy className="mr-2 h-4 w-4" />
-              Copy
-            </DropdownMenuItem>
-            <DropdownMenuItem disabled>
-              Disabled Item
-            </DropdownMenuItem>
+            <DropdownMenuGroup>
+              <DropdownMenuItem>
+                <UserIcon />
+                Profile
+                <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>
+              </DropdownMenuItem>
+              <DropdownMenuItem>
+                <SettingsIcon />
+                Settings
+                <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>
+              </DropdownMenuItem>
+            </DropdownMenuGroup>
+            <DropdownMenuSeparator />
+            <DropdownMenuGroup>
+              <DropdownMenuLabel>Notifications</DropdownMenuLabel>
+              <DropdownMenuCheckboxItem
+                checked={notifications}
+                onCheckedChange={setNotifications}
+              >
+                <BellIcon />
+                Push Notifications
+              </DropdownMenuCheckboxItem>
+              <DropdownMenuCheckboxItem
+                checked={marketing}
+                onCheckedChange={setMarketing}
+              >
+                <MailIcon />
+                Marketing Emails
+              </DropdownMenuCheckboxItem>
+            </DropdownMenuGroup>
             <DropdownMenuSeparator />
             <DropdownMenuItem variant="destructive">
-              <Trash2 className="mr-2 h-4 w-4" />
-              Delete
+              <LogOutIcon />
+              Log Out
             </DropdownMenuItem>
           </DropdownMenuContent>
         </DropdownMenu>
-      </div>
+      );
+    }
 
-      {/* Menu with Sub-items */}
-      <div className="space-y-2">
-        <h3 className="text-sm font-medium">With Submenus</h3>
+    function ContentActionsMenu() {
+      return (
         <DropdownMenu>
-          <DropdownMenuTrigger asChild>
-            <Button variant="outline">Submenu Example</Button>
+          <DropdownMenuTrigger>
+            <Button variant="outline">
+              Actions
+              <ChevronDownIcon className="ml-2" />
+            </Button>
           </DropdownMenuTrigger>
           <DropdownMenuContent className="w-48">
-            <DropdownMenuItem>Simple Item</DropdownMenuItem>
+            <DropdownMenuItem>
+              <EditIcon />
+              Edit
+            </DropdownMenuItem>
+            <DropdownMenuItem>
+              <CopyIcon />
+              Duplicate
+            </DropdownMenuItem>
+            <DropdownMenuSeparator />
             <DropdownMenuSub>
               <DropdownMenuSubTrigger>
-                <UserPlus className="mr-2 h-4 w-4" />
-                <span>Share</span>
+                <ShareIcon />
+                Share
               </DropdownMenuSubTrigger>
-              <DropdownMenuPortal>
-                <DropdownMenuSubContent>
-                  <DropdownMenuItem>
-                    <Mail className="mr-2 h-4 w-4" />
-                    <span>Email</span>
-                  </DropdownMenuItem>
-                  <DropdownMenuItem>
-                    <MessageSquare className="mr-2 h-4 w-4" />
-                    <span>Message</span>
-                  </DropdownMenuItem>
-                  <DropdownMenuItem>
-                    <PlusCircle className="mr-2 h-4 w-4" />
-                    <span>More...</span>
-                  </DropdownMenuItem>
-                </DropdownMenuSubContent>
-              </DropdownMenuPortal>
+              <DropdownMenuSubContent>
+                <DropdownMenuItem>
+                  <MailIcon />
+                  Email
+                </DropdownMenuItem>
+                <DropdownMenuItem>
+                  <CopyIcon />
+                  Copy Link
+                </DropdownMenuItem>
+                <DropdownMenuItem>
+                  <DownloadIcon />
+                  Export
+                </DropdownMenuItem>
+              </DropdownMenuSubContent>
             </DropdownMenuSub>
-          </DropdownMenuContent>
-        </DropdownMenu>
-      </div>
-
-      {/* Menu with Checkboxes */}
-      <div className="space-y-2">
-        <h3 className="text-sm font-medium">Checkbox Items</h3>
-        <DropdownMenu>
-          <DropdownMenuTrigger asChild>
-            <Button variant="outline">View Options</Button>
-          </DropdownMenuTrigger>
-          <DropdownMenuContent className="w-48">
-            <DropdownMenuLabel>Display</DropdownMenuLabel>
+            <DropdownMenuItem>
+              <ArchiveIcon />
+              Archive
+            </DropdownMenuItem>
             <DropdownMenuSeparator />
-            <DropdownMenuCheckboxItem checked={true}>
-              Status Bar
-            </DropdownMenuCheckboxItem>
-            <DropdownMenuCheckboxItem checked={false}>
-              Activity Bar
-            </DropdownMenuCheckboxItem>
-            <DropdownMenuCheckboxItem checked={true} disabled>
-              Panel (disabled)
-            </DropdownMenuCheckboxItem>
+            <DropdownMenuItem variant="destructive">
+              <TrashIcon />
+              Delete
+            </DropdownMenuItem>
           </DropdownMenuContent>
         </DropdownMenu>
-      </div>
+      );
+    }
 
-      {/* Menu with Radio Group */}
-      <div className="space-y-2">
-        <h3 className="text-sm font-medium">Radio Group</h3>
+    function ThemeMenu() {
+      const [theme, setTheme] = useState("system");
+
+      return (
         <DropdownMenu>
-          <DropdownMenuTrigger asChild>
-            <Button variant="outline">Position</Button>
+          <DropdownMenuTrigger>
+            <Button variant="outline" size="icon">
+              <SunIcon className="size-5 rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
+              <MoonIcon className="absolute size-5 rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
+              <span className="sr-only">Toggle theme</span>
+            </Button>
           </DropdownMenuTrigger>
-          <DropdownMenuContent className="w-48">
-            <DropdownMenuLabel>Panel Position</DropdownMenuLabel>
+          <DropdownMenuContent align="end">
+            <DropdownMenuGroup>
+              <DropdownMenuLabel>Theme</DropdownMenuLabel>
+            </DropdownMenuGroup>
             <DropdownMenuSeparator />
-            <DropdownMenuRadioGroup value="bottom">
-              <DropdownMenuRadioItem value="top">Top</DropdownMenuRadioItem>
-              <DropdownMenuRadioItem value="bottom">Bottom</DropdownMenuRadioItem>
-              <DropdownMenuRadioItem value="right">Right</DropdownMenuRadioItem>
+            <DropdownMenuRadioGroup value={theme} onValueChange={setTheme}>
+              <DropdownMenuRadioItem value="light">
+                <SunIcon />
+                Light
+              </DropdownMenuRadioItem>
+              <DropdownMenuRadioItem value="dark">
+                <MoonIcon />
+                Dark
+              </DropdownMenuRadioItem>
+              <DropdownMenuRadioItem value="system">
+                <MonitorIcon />
+                System
+              </DropdownMenuRadioItem>
             </DropdownMenuRadioGroup>
           </DropdownMenuContent>
         </DropdownMenu>
+      );
+    }
+
+    return (
+      <div className="w-full max-w-4xl space-y-12">
+        {/* User Menu Example */}
+        <section className="space-y-4">
+          <div>
+            <h3 className="text-lg font-semibold">User Account Menu</h3>
+            <p className="text-muted-foreground text-sm">
+              Account settings, preferences, and sign out actions
+            </p>
+          </div>
+          <div className="flex items-center gap-4">
+            <UserMenu />
+            <span className="text-muted-foreground text-sm">
+              Click the user icon to open the menu
+            </span>
+          </div>
+        </section>
+
+        {/* Content Actions Example */}
+        <section className="space-y-4">
+          <div>
+            <h3 className="text-lg font-semibold">Content Actions</h3>
+            <p className="text-muted-foreground text-sm">
+              Manage content with nested submenus and destructive actions
+            </p>
+          </div>
+          <div className="flex items-center gap-4">
+            <ContentActionsMenu />
+            <span className="text-muted-foreground text-sm">
+              Features nested share submenu
+            </span>
+          </div>
+        </section>
+
+        {/* Theme Selector Example */}
+        <section className="space-y-4">
+          <div>
+            <h3 className="text-lg font-semibold">Theme Selector</h3>
+            <p className="text-muted-foreground text-sm">
+              Radio group for exclusive selection (light/dark/system theme)
+            </p>
+          </div>
+          <div className="flex items-center gap-4">
+            <ThemeMenu />
+            <span className="text-muted-foreground text-sm">
+              Click to select theme preference
+            </span>
+          </div>
+        </section>
+
+        {/* Context Menu Card */}
+        <section className="space-y-4">
+          <div>
+            <h3 className="text-lg font-semibold">Cast Actions</h3>
+            <p className="text-muted-foreground text-sm">
+              Actions menu for Farcaster cast management
+            </p>
+          </div>
+          <div className="border-border bg-card rounded-lg border p-4">
+            <div className="flex items-start justify-between">
+              <div className="space-y-1">
+                <p className="font-medium">Latest Cast</p>
+                <p className="text-muted-foreground text-sm">
+                  Building with Neynar is amazing! The APIs make Farcaster
+                  development so much easier.
+                </p>
+              </div>
+              <DropdownMenu>
+                <DropdownMenuTrigger>
+                  <Button variant="ghost" size="icon-sm">
+                    <ChevronDownIcon />
+                  </Button>
+                </DropdownMenuTrigger>
+                <DropdownMenuContent align="end" className="w-48">
+                  <DropdownMenuItem>
+                    <StarIcon />
+                    Add to Favorites
+                  </DropdownMenuItem>
+                  <DropdownMenuItem>
+                    <CopyIcon />
+                    Copy Link
+                  </DropdownMenuItem>
+                  <DropdownMenuItem>
+                    <ShareIcon />
+                    Share Cast
+                  </DropdownMenuItem>
+                  <DropdownMenuSeparator />
+                  <DropdownMenuItem>
+                    <EditIcon />
+                    Edit
+                  </DropdownMenuItem>
+                  <DropdownMenuItem variant="destructive">
+                    <TrashIcon />
+                    Delete Cast
+                  </DropdownMenuItem>
+                </DropdownMenuContent>
+              </DropdownMenu>
+            </div>
+          </div>
+        </section>
       </div>
-    </div>
-  ),
-  parameters: {
-    docs: {
-      description: {
-        story:
-          "Comprehensive showcase of all dropdown menu variants: basic menus, submenus, checkbox items, radio groups, disabled states, and destructive actions.",
-      },
-    },
+    );
   },
 };
 
 /**
- * Real-world usage example in a user profile context
+ * Complete design system reference showing all menu components, variants,
+ * and composition patterns.
  */
-export const InContext: Story = {
-  render: () => (
-    <div className="max-w-md mx-auto p-6 bg-card rounded-lg border">
-      {/* User Profile Header */}
-      <div className="flex items-center justify-between mb-4">
-        <div className="flex items-center space-x-3">
-          <div className="w-10 h-10 bg-gradient-to-br from-blue-500 to-purple-600 rounded-full flex items-center justify-center text-white font-semibold">
-            JD
+export const Variants: Story = {
+  parameters: {
+    layout: "padded",
+  },
+  render: () => {
+    const [showIcons, setShowIcons] = useState(true);
+    const [showShortcuts, setShowShortcuts] = useState(true);
+    const [position, setPosition] = useState("bottom");
+
+    return (
+      <div className="w-full max-w-4xl space-y-10">
+        {/* Basic Menu Items */}
+        <section className="space-y-4">
+          <div>
+            <h3 className="text-lg font-semibold">Basic Menu Items</h3>
+            <p className="text-muted-foreground text-sm">
+              Standard menu items with optional icons and shortcuts
+            </p>
           </div>
+          <DropdownMenu>
+            <DropdownMenuTrigger>
+              <Button variant="outline">Basic Menu</Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent className="w-56">
+              <DropdownMenuGroup>
+                <DropdownMenuLabel>Actions</DropdownMenuLabel>
+              </DropdownMenuGroup>
+              <DropdownMenuSeparator />
+              <DropdownMenuItem>
+                <PlusIcon />
+                New Item
+              </DropdownMenuItem>
+              <DropdownMenuItem>
+                <FileTextIcon />
+                View Details
+              </DropdownMenuItem>
+              <DropdownMenuItem>
+                <CopyIcon />
+                Duplicate
+              </DropdownMenuItem>
+              <DropdownMenuItem disabled>
+                <ArchiveIcon />
+                Archive (Disabled)
+              </DropdownMenuItem>
+            </DropdownMenuContent>
+          </DropdownMenu>
+        </section>
+
+        {/* Menu Item Variants */}
+        <section className="space-y-4">
           <div>
-            <h3 className="font-semibold">John Doe</h3>
-            <p className="text-sm text-muted-foreground">john@example.com</p>
+            <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>
-        </div>
-        
-        {/* Profile Actions Menu */}
-        <DropdownMenu>
-          <DropdownMenuTrigger asChild>
-            <Button variant="ghost" size="icon" className="h-8 w-8">
-              <MoreHorizontal className="h-4 w-4" />
-              <span className="sr-only">Open profile menu</span>
-            </Button>
-          </DropdownMenuTrigger>
-          <DropdownMenuContent align="end" className="w-56">
-            <DropdownMenuLabel>Profile Actions</DropdownMenuLabel>
-            <DropdownMenuSeparator />
-            <DropdownMenuGroup>
+          <DropdownMenu>
+            <DropdownMenuTrigger>
+              <Button variant="outline">Item Variants</Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent className="w-56">
               <DropdownMenuItem>
-                <User className="mr-2 h-4 w-4" />
-                <span>View Profile</span>
-                <DropdownMenuShortcut>⌘P</DropdownMenuShortcut>
+                <EditIcon />
+                Default Item
               </DropdownMenuItem>
               <DropdownMenuItem>
-                <Settings className="mr-2 h-4 w-4" />
-                <span>Account Settings</span>
+                <CopyIcon />
+                Another Default
+              </DropdownMenuItem>
+              <DropdownMenuSeparator />
+              <DropdownMenuItem variant="success">
+                <CheckCircle2Icon />
+                Success Action
+              </DropdownMenuItem>
+              <DropdownMenuItem variant="warning">
+                <AlertTriangleIcon />
+                Warning Action
+              </DropdownMenuItem>
+              <DropdownMenuItem variant="info">
+                <InfoIcon />
+                Info Action
+              </DropdownMenuItem>
+              <DropdownMenuSeparator />
+              <DropdownMenuItem variant="destructive">
+                <TrashIcon />
+                Destructive Action
               </DropdownMenuItem>
+              <DropdownMenuItem variant="destructive">
+                <LogOutIcon />
+                Sign Out
+              </DropdownMenuItem>
+            </DropdownMenuContent>
+          </DropdownMenu>
+        </section>
+
+        {/* Keyboard Shortcuts */}
+        <section className="space-y-4">
+          <div>
+            <h3 className="text-lg font-semibold">Keyboard Shortcuts</h3>
+            <p className="text-muted-foreground text-sm">
+              Display keyboard shortcuts for quick actions
+            </p>
+          </div>
+          <DropdownMenu>
+            <DropdownMenuTrigger>
+              <Button variant="outline">With Shortcuts</Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent className="w-56">
               <DropdownMenuItem>
-                <CreditCard className="mr-2 h-4 w-4" />
-                <span>Billing</span>
+                <PlusIcon />
+                New File
+                <DropdownMenuShortcut>⌘N</DropdownMenuShortcut>
+              </DropdownMenuItem>
+              <DropdownMenuItem>
+                <FileTextIcon />
+                Open
+                <DropdownMenuShortcut>⌘O</DropdownMenuShortcut>
+              </DropdownMenuItem>
+              <DropdownMenuItem>
+                <CopyIcon />
+                Copy
+                <DropdownMenuShortcut>⌘C</DropdownMenuShortcut>
+              </DropdownMenuItem>
+              <DropdownMenuSeparator />
+              <DropdownMenuItem>
+                <SettingsIcon />
+                Preferences
+                <DropdownMenuShortcut>⌘,</DropdownMenuShortcut>
+              </DropdownMenuItem>
+            </DropdownMenuContent>
+          </DropdownMenu>
+        </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 options
+            </p>
+          </div>
+          <DropdownMenu>
+            <DropdownMenuTrigger>
+              <Button variant="outline">View Options</Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent className="w-56">
+              <DropdownMenuGroup>
+                <DropdownMenuLabel>Display Settings</DropdownMenuLabel>
+              </DropdownMenuGroup>
+              <DropdownMenuSeparator />
+              <DropdownMenuGroup>
+                <DropdownMenuCheckboxItem
+                  checked={showIcons}
+                  onCheckedChange={setShowIcons}
+                >
+                  Show Icons
+                </DropdownMenuCheckboxItem>
+                <DropdownMenuCheckboxItem
+                  checked={showShortcuts}
+                  onCheckedChange={setShowShortcuts}
+                >
+                  Show Shortcuts
+                </DropdownMenuCheckboxItem>
+              </DropdownMenuGroup>
+            </DropdownMenuContent>
+          </DropdownMenu>
+        </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 a mutually exclusive group
+            </p>
+          </div>
+          <DropdownMenu>
+            <DropdownMenuTrigger>
+              <Button variant="outline">Position: {position}</Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent className="w-56">
+              <DropdownMenuGroup>
+                <DropdownMenuLabel>Menu Position</DropdownMenuLabel>
+              </DropdownMenuGroup>
+              <DropdownMenuSeparator />
+              <DropdownMenuRadioGroup
+                value={position}
+                onValueChange={setPosition}
+              >
+                <DropdownMenuRadioItem value="top">Top</DropdownMenuRadioItem>
+                <DropdownMenuRadioItem value="bottom">
+                  Bottom
+                </DropdownMenuRadioItem>
+                <DropdownMenuRadioItem value="left">Left</DropdownMenuRadioItem>
+                <DropdownMenuRadioItem value="right">
+                  Right
+                </DropdownMenuRadioItem>
+              </DropdownMenuRadioGroup>
+            </DropdownMenuContent>
+          </DropdownMenu>
+        </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">
+              Create hierarchical menu structures with submenus
+            </p>
+          </div>
+          <DropdownMenu>
+            <DropdownMenuTrigger>
+              <Button variant="outline">File Menu</Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent className="w-56">
+              <DropdownMenuItem>
+                <PlusIcon />
+                New File
               </DropdownMenuItem>
-            </DropdownMenuGroup>
-            <DropdownMenuSeparator />
-            <DropdownMenuGroup>
               <DropdownMenuSub>
                 <DropdownMenuSubTrigger>
-                  <Users className="mr-2 h-4 w-4" />
-                  <span>Team</span>
+                  <FileTextIcon />
+                  Open Recent
                 </DropdownMenuSubTrigger>
-                <DropdownMenuPortal>
-                  <DropdownMenuSubContent>
-                    <DropdownMenuItem>
-                      <UserPlus className="mr-2 h-4 w-4" />
-                      <span>Invite Members</span>
-                    </DropdownMenuItem>
-                    <DropdownMenuItem>
-                      <Settings className="mr-2 h-4 w-4" />
-                      <span>Team Settings</span>
-                    </DropdownMenuItem>
-                  </DropdownMenuSubContent>
-                </DropdownMenuPortal>
+                <DropdownMenuSubContent>
+                  <DropdownMenuItem>Project A</DropdownMenuItem>
+                  <DropdownMenuItem>Project B</DropdownMenuItem>
+                  <DropdownMenuItem>Project C</DropdownMenuItem>
+                  <DropdownMenuSeparator />
+                  <DropdownMenuItem>Clear History</DropdownMenuItem>
+                </DropdownMenuSubContent>
               </DropdownMenuSub>
+              <DropdownMenuSub>
+                <DropdownMenuSubTrigger>
+                  <ShareIcon />
+                  Share
+                </DropdownMenuSubTrigger>
+                <DropdownMenuSubContent>
+                  <DropdownMenuItem>
+                    <MailIcon />
+                    Email
+                  </DropdownMenuItem>
+                  <DropdownMenuItem>
+                    <CopyIcon />
+                    Copy Link
+                  </DropdownMenuItem>
+                  <DropdownMenuItem>
+                    <DownloadIcon />
+                    Download
+                  </DropdownMenuItem>
+                </DropdownMenuSubContent>
+              </DropdownMenuSub>
+              <DropdownMenuSeparator />
+              <DropdownMenuItem variant="destructive">
+                <TrashIcon />
+                Delete
+              </DropdownMenuItem>
+            </DropdownMenuContent>
+          </DropdownMenu>
+        </section>
+
+        {/* Grouped Items */}
+        <section className="space-y-4">
+          <div>
+            <h3 className="text-lg font-semibold">Grouped Items</h3>
+            <p className="text-muted-foreground text-sm">
+              Organize menu items into logical groups with labels
+            </p>
+          </div>
+          <DropdownMenu>
+            <DropdownMenuTrigger>
+              <Button variant="outline">Organized Menu</Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent className="w-56">
+              <DropdownMenuGroup>
+                <DropdownMenuLabel>My Account</DropdownMenuLabel>
+              </DropdownMenuGroup>
+              <DropdownMenuSeparator />
+              <DropdownMenuGroup>
+                <DropdownMenuItem>
+                  <UserIcon />
+                  Profile
+                </DropdownMenuItem>
+                <DropdownMenuItem>
+                  <SettingsIcon />
+                  Settings
+                </DropdownMenuItem>
+              </DropdownMenuGroup>
+              <DropdownMenuSeparator />
+              <DropdownMenuGroup>
+                <DropdownMenuLabel>Team</DropdownMenuLabel>
+              </DropdownMenuGroup>
+              <DropdownMenuGroup>
+                <DropdownMenuItem>
+                  <PlusIcon />
+                  Invite Members
+                </DropdownMenuItem>
+                <DropdownMenuItem>
+                  <MailIcon />
+                  Team Settings
+                </DropdownMenuItem>
+              </DropdownMenuGroup>
+              <DropdownMenuSeparator />
+              <DropdownMenuItem variant="destructive">
+                <LogOutIcon />
+                Log Out
+              </DropdownMenuItem>
+            </DropdownMenuContent>
+          </DropdownMenu>
+        </section>
+
+        {/* Inset Items */}
+        <section className="space-y-4">
+          <div>
+            <h3 className="text-lg font-semibold">Inset Items</h3>
+            <p className="text-muted-foreground text-sm">
+              Align items with extra padding when mixing with icon items
+            </p>
+          </div>
+          <DropdownMenu>
+            <DropdownMenuTrigger>
+              <Button variant="outline">Mixed Alignment</Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent className="w-56">
+              <DropdownMenuGroup>
+                <DropdownMenuLabel>Navigation</DropdownMenuLabel>
+              </DropdownMenuGroup>
+              <DropdownMenuSeparator />
+              <DropdownMenuItem>
+                <UserIcon />
+                Profile
+              </DropdownMenuItem>
+              <DropdownMenuItem inset>Account Settings</DropdownMenuItem>
+              <DropdownMenuItem inset>Privacy Settings</DropdownMenuItem>
+              <DropdownMenuSeparator />
+              <DropdownMenuGroup>
+                <DropdownMenuLabel inset>Preferences</DropdownMenuLabel>
+              </DropdownMenuGroup>
+              <DropdownMenuItem inset>General</DropdownMenuItem>
+              <DropdownMenuItem inset>Appearance</DropdownMenuItem>
+            </DropdownMenuContent>
+          </DropdownMenu>
+        </section>
+
+        {/* Content Alignment */}
+        <section className="space-y-4">
+          <div>
+            <h3 className="text-lg font-semibold">Content Alignment</h3>
+            <p className="text-muted-foreground text-sm">
+              Control menu alignment relative to trigger (start, center, end)
+            </p>
+          </div>
+          <div className="flex gap-4">
+            <DropdownMenu>
+              <DropdownMenuTrigger>
+                <Button variant="outline">Align Start</Button>
+              </DropdownMenuTrigger>
+              <DropdownMenuContent align="start" className="w-56">
+                <DropdownMenuItem>Action 1</DropdownMenuItem>
+                <DropdownMenuItem>Action 2</DropdownMenuItem>
+                <DropdownMenuItem>Action 3</DropdownMenuItem>
+              </DropdownMenuContent>
+            </DropdownMenu>
+
+            <DropdownMenu>
+              <DropdownMenuTrigger>
+                <Button variant="outline">Align Center</Button>
+              </DropdownMenuTrigger>
+              <DropdownMenuContent align="center" className="w-56">
+                <DropdownMenuItem>Action 1</DropdownMenuItem>
+                <DropdownMenuItem>Action 2</DropdownMenuItem>
+                <DropdownMenuItem>Action 3</DropdownMenuItem>
+              </DropdownMenuContent>
+            </DropdownMenu>
+
+            <DropdownMenu>
+              <DropdownMenuTrigger>
+                <Button variant="outline">Align End</Button>
+              </DropdownMenuTrigger>
+              <DropdownMenuContent align="end" className="w-56">
+                <DropdownMenuItem>Action 1</DropdownMenuItem>
+                <DropdownMenuItem>Action 2</DropdownMenuItem>
+                <DropdownMenuItem>Action 3</DropdownMenuItem>
+              </DropdownMenuContent>
+            </DropdownMenu>
+          </div>
+        </section>
+      </div>
+    );
+  },
+};
+
+/**
+ * Frosted effect demonstration - DropdownMenus use a translucent background (75% opacity)
+ * with backdrop blur (12px) creating a frosted glass effect.
+ */
+export const Frosted: Story = {
+  parameters: {
+    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">
+        <DropdownMenu>
+          <DropdownMenuTrigger>
+            <Button>Open Menu</Button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent className="w-56">
+            <DropdownMenuGroup>
+              <DropdownMenuLabel>Frosted Menu</DropdownMenuLabel>
             </DropdownMenuGroup>
             <DropdownMenuSeparator />
             <DropdownMenuItem>
-              <LogOut className="mr-2 h-4 w-4" />
-              <span>Log out</span>
-              <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>
+              <UserIcon />
+              Profile
+            </DropdownMenuItem>
+            <DropdownMenuItem>
+              <SettingsIcon />
+              Settings
+            </DropdownMenuItem>
+            <DropdownMenuSeparator />
+            <DropdownMenuItem variant="destructive">
+              <LogOutIcon />
+              Log Out
             </DropdownMenuItem>
           </DropdownMenuContent>
         </DropdownMenu>
       </div>
-      
-      {/* Profile Content */}
-      <div className="space-y-2 text-sm">
-        <div className="flex justify-between">
-          <span className="text-muted-foreground">Role:</span>
-          <span>Product Manager</span>
-        </div>
-        <div className="flex justify-between">
-          <span className="text-muted-foreground">Team:</span>
-          <span>Engineering</span>
-        </div>
-        <div className="flex justify-between">
-          <span className="text-muted-foreground">Last active:</span>
-          <span>2 minutes ago</span>
-        </div>
-      </div>
     </div>
   ),
-  parameters: {
-    docs: {
-      description: {
-        story:
-          "Real-world example showing a dropdown menu in a user profile context. Demonstrates how the component integrates naturally into application interfaces with proper spacing, alignment, and visual hierarchy.",
-      },
-    },
+};
+
+/**
+ * Interactive playground for testing dropdown menu props and behavior.
+ */
+export const Interactive: Story = {
+  render: (args) => (
+    <DropdownMenu {...args}>
+      <DropdownMenuTrigger>
+        <Button variant="outline">Open Menu</Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent className="w-56">
+        <DropdownMenuGroup>
+          <DropdownMenuLabel>My Account</DropdownMenuLabel>
+        </DropdownMenuGroup>
+        <DropdownMenuSeparator />
+        <DropdownMenuItem>
+          <UserIcon />
+          Profile
+          <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>
+        </DropdownMenuItem>
+        <DropdownMenuItem>
+          <SettingsIcon />
+          Settings
+          <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>
+        </DropdownMenuItem>
+        <DropdownMenuSeparator />
+        <DropdownMenuItem variant="destructive">
+          <LogOutIcon />
+          Log Out
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  ),
+  args: {
+    defaultOpen: false,
   },
-};
+};