@neynar/ui 0.4.0 → 0.5.0

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

@@ -1,22 +1,22 @@
-import type { Meta, StoryObj } from "@storybook/react-vite";
-import React from "react";
+import { action } from "@storybook/addon-actions";
+import type { Meta, StoryObj } from "@storybook/react";
 import {
-  Calculator,
-  Calendar,
-  CreditCard,
-  Settings,
-  Smile,
-  User,
-  Search,
-  FileText,
-  Mail,
-  Plus,
-  Star,
-  Edit,
-  Copy,
-  Download,
-  Share,
+  BarChart3Icon,
+  BookOpenIcon,
+  CalendarIcon,
+  CreditCardIcon,
+  FileTextIcon,
+  LayoutDashboardIcon,
+  Loader2Icon,
+  MessagesSquareIcon,
+  SettingsIcon,
+  SmileIcon,
+  UserIcon,
+  UsersIcon,
+  ZapIcon,
 } from "lucide-react";
+import { useState } from "react";
+
 import {
   Command,
   CommandDialog,
@@ -30,602 +30,512 @@ import {
 } from "../command";
 import { Button } from "../button";
 
-const meta = {
-  title: "Interactive Controls/Command",
+const meta: Meta<typeof Command> = {
+  title: "Components/Advanced & Specialized/Command",
   component: Command,
   parameters: {
     layout: "centered",
-    docs: {
-      description: {
-        component:
-          "A fast, composable command menu built on cmdk that provides powerful search interfaces, command palettes, and autocomplete functionality with full keyboard navigation and accessibility support.",
-      },
-    },
   },
   argTypes: {
     className: {
       control: "text",
-      description: "Additional CSS classes to apply to the command menu",
-    },
-    value: {
-      control: "text",
-      description: "The current search value (controlled)",
-    },
-    onValueChange: {
-      action: "valueChanged",
-      description: "Called when the search value changes",
+      description: "Additional CSS classes",
     },
     filter: {
-      control: "boolean",
-      description: "Whether to enable filtering",
-      table: { defaultValue: { summary: "true" } },
+      table: { disable: true },
     },
-    shouldFilter: {
-      control: "boolean",
-      description: "Whether the built-in filter should be applied",
-    },
-    loop: {
-      control: "boolean",
-      description: "Whether to loop keyboard navigation",
-      table: { defaultValue: { summary: "false" } },
+    children: {
+      table: { disable: true },
     },
   },
-} satisfies Meta<typeof Command>;
+};
 
 export default meta;
-type Story = StoryObj<typeof meta>;
+type Story = StoryObj<typeof Command>;
 
 /**
- * Interactive playground to test all Command component features and props.
- * Experiment with different configurations, search functionality, and keyboard navigation.
+ * Quick Actions Palette (⌘K) - A realistic command palette for the Neynar Dashboard.
+ * This demonstrates the primary use case: a searchable command palette for quick navigation
+ * and actions across the dashboard.
  */
-export const Interactive: Story = {
-  render: function InteractiveCommand(args) {
-    const [value, setValue] = React.useState("");
-    const [selected, setSelected] = React.useState<string | null>(null);
-    const [dialogOpen, setDialogOpen] = React.useState(false);
+export const InContext: Story = {
+  parameters: {
+    layout: "padded",
+  },
+  render: () => {
+    function CommandPaletteDemo() {
+      const [open, setOpen] = useState(false);
+      const [loading, setLoading] = useState(false);
+      const [selectedCommand, setSelectedCommand] = useState<string | null>(
+        null,
+      );
 
-    React.useEffect(() => {
-      const down = (e: KeyboardEvent) => {
-        if (e.key === "k" && (e.metaKey || e.ctrlKey)) {
-          e.preventDefault();
-          setDialogOpen((open) => !open);
-        }
+      const handleSelect = (value: string) => {
+        setSelectedCommand(value);
+        setLoading(true);
+        setTimeout(() => {
+          setLoading(false);
+          setOpen(false);
+          setSelectedCommand(null);
+        }, 1000);
       };
-      document.addEventListener("keydown", down);
-      return () => document.removeEventListener("keydown", down);
-    }, []);
 
-    const handleSelect = (currentValue: string) => {
-      setSelected(currentValue);
-      setValue("");
-      console.log("Selected:", currentValue);
-    };
+      return (
+        <div className="w-full max-w-2xl space-y-6">
+          {/* Demo Instructions */}
+          <div className="rounded-lg border p-4">
+            <h3 className="font-semibold">Command Palette Demo</h3>
+            <p className="text-muted-foreground mt-2 text-sm">
+              Click the button below to open the command palette. This is
+              typically triggered with ⌘K (Mac) or Ctrl+K (Windows) keyboard
+              shortcuts in production applications.
+            </p>
+            <div className="mt-4">
+              <Button onClick={() => setOpen(true)}>
+                Open Command Palette
+                <kbd className="bg-muted text-muted-foreground ml-2 rounded border px-1.5 py-0.5 text-xs font-mono">
+                  ⌘K
+                </kbd>
+              </Button>
+            </div>
+          </div>
 
-    return (
-      <div className="space-y-4">
-        <div className="flex gap-2">
-          <Button onClick={() => setDialogOpen(true)}>
-            Open Command Dialog
-          </Button>
-          <p className="text-sm text-muted-foreground flex items-center">
-            Or press{" "}
-            <kbd className="ml-1 pointer-events-none inline-flex h-5 select-none items-center gap-1 rounded border bg-muted px-1.5 font-mono text-[10px] font-medium text-muted-foreground">
-              <span className="text-xs">⌘</span>K
-            </kbd>
-          </p>
-        </div>
+          {/* Command Dialog */}
+          <CommandDialog
+            open={open}
+            onOpenChange={setOpen}
+            title="Quick Actions"
+            description="Search for commands and navigate the dashboard"
+          >
+            <Command>
+              <CommandInput placeholder="Type a command or search..." />
+              <CommandList>
+                <CommandEmpty>No results found.</CommandEmpty>
 
-        {selected && (
-          <div className="text-sm p-2 bg-muted rounded">
-            <strong>Last selected:</strong> {selected}
-          </div>
-        )}
+                <CommandGroup heading="Navigation">
+                  <CommandItem
+                    onSelect={() => handleSelect("dashboard")}
+                    disabled={loading && selectedCommand === "dashboard"}
+                  >
+                    {loading && selectedCommand === "dashboard" ? (
+                      <Loader2Icon className="animate-spin" />
+                    ) : (
+                      <LayoutDashboardIcon />
+                    )}
+                    Dashboard
+                    <CommandShortcut>⌘D</CommandShortcut>
+                  </CommandItem>
+                  <CommandItem
+                    onSelect={() => handleSelect("analytics")}
+                    disabled={loading && selectedCommand === "analytics"}
+                  >
+                    {loading && selectedCommand === "analytics" ? (
+                      <Loader2Icon className="animate-spin" />
+                    ) : (
+                      <BarChart3Icon />
+                    )}
+                    Analytics
+                    <CommandShortcut>⌘A</CommandShortcut>
+                  </CommandItem>
+                  <CommandItem
+                    onSelect={() => handleSelect("users")}
+                    disabled={loading && selectedCommand === "users"}
+                  >
+                    {loading && selectedCommand === "users" ? (
+                      <Loader2Icon className="animate-spin" />
+                    ) : (
+                      <UsersIcon />
+                    )}
+                    Users
+                    <CommandShortcut>⌘U</CommandShortcut>
+                  </CommandItem>
+                  <CommandItem
+                    onSelect={() => handleSelect("messages")}
+                    disabled={loading && selectedCommand === "messages"}
+                  >
+                    {loading && selectedCommand === "messages" ? (
+                      <Loader2Icon className="animate-spin" />
+                    ) : (
+                      <MessagesSquareIcon />
+                    )}
+                    Messages
+                    <CommandShortcut>⌘M</CommandShortcut>
+                  </CommandItem>
+                </CommandGroup>
 
-        <Command
-          {...args}
-          className="rounded-lg border shadow-md max-w-[450px]"
-          value={value}
-          onValueChange={setValue}
-        >
-          <CommandInput placeholder="Type to search commands..." />
-          <CommandList>
-            <CommandEmpty>
-              No results found for &quot;{value}&quot;
-            </CommandEmpty>
-            <CommandGroup heading="Actions">
-              <CommandItem
-                value="create-new-document"
-                onSelect={() => handleSelect("Create New Document")}
-              >
-                <FileText className="mr-2 h-4 w-4" />
-                <span>Create New Document</span>
-                <CommandShortcut>⌘N</CommandShortcut>
-              </CommandItem>
-              <CommandItem
-                value="send-message"
-                onSelect={() => handleSelect("Send Message")}
-              >
-                <Mail className="mr-2 h-4 w-4" />
-                <span>Send Message</span>
-                <CommandShortcut>⌘M</CommandShortcut>
-              </CommandItem>
-              <CommandItem
-                value="schedule-meeting"
-                onSelect={() => handleSelect("Schedule Meeting")}
-              >
-                <Calendar className="mr-2 h-4 w-4" />
-                <span>Schedule Meeting</span>
-                <CommandShortcut>⌘E</CommandShortcut>
-              </CommandItem>
-            </CommandGroup>
-            <CommandSeparator />
-            <CommandGroup heading="Tools">
-              <CommandItem
-                value="open-calculator"
-                onSelect={() => handleSelect("Open Calculator")}
-              >
-                <Calculator className="mr-2 h-4 w-4" />
-                <span>Open Calculator</span>
-              </CommandItem>
-              <CommandItem
-                value="search-emojis"
-                onSelect={() => handleSelect("Search Emojis")}
-              >
-                <Smile className="mr-2 h-4 w-4" />
-                <span>Search Emojis</span>
-              </CommandItem>
-              <CommandItem
-                value="add-to-favorites"
-                onSelect={() => handleSelect("Add to Favorites")}
-              >
-                <Star className="mr-2 h-4 w-4" />
-                <span>Add to Favorites</span>
-              </CommandItem>
-            </CommandGroup>
-            <CommandSeparator />
-            <CommandGroup heading="Settings">
-              <CommandItem
-                value="user-profile"
-                onSelect={() => handleSelect("User Profile")}
-              >
-                <User className="mr-2 h-4 w-4" />
-                <span>Profile</span>
-                <CommandShortcut>⌘P</CommandShortcut>
-              </CommandItem>
-              <CommandItem
-                value="billing"
-                onSelect={() => handleSelect("Billing")}
-              >
-                <CreditCard className="mr-2 h-4 w-4" />
-                <span>Billing</span>
-                <CommandShortcut>⌘B</CommandShortcut>
-              </CommandItem>
-              <CommandItem
-                value="settings"
-                onSelect={() => handleSelect("Settings")}
-              >
-                <Settings className="mr-2 h-4 w-4" />
-                <span>Settings</span>
-                <CommandShortcut>⌘S</CommandShortcut>
-              </CommandItem>
-            </CommandGroup>
-          </CommandList>
-        </Command>
+                <CommandSeparator />
 
-        <CommandDialog open={dialogOpen} onOpenChange={setDialogOpen}>
-          <CommandInput placeholder="Type a command or search..." />
-          <CommandList>
-            <CommandEmpty>No results found.</CommandEmpty>
-            <CommandGroup heading="Quick Actions">
-              <CommandItem
-                onSelect={() => {
-                  console.log("Calendar");
-                  setDialogOpen(false);
-                }}
-              >
-                <Calendar className="mr-2 h-4 w-4" />
-                <span>Calendar</span>
-              </CommandItem>
-              <CommandItem
-                onSelect={() => {
-                  console.log("Calculator");
-                  setDialogOpen(false);
-                }}
-              >
-                <Calculator className="mr-2 h-4 w-4" />
-                <span>Calculator</span>
-              </CommandItem>
-              <CommandItem
-                onSelect={() => {
-                  console.log("Search Emoji");
-                  setDialogOpen(false);
-                }}
-              >
-                <Smile className="mr-2 h-4 w-4" />
-                <span>Search Emoji</span>
-              </CommandItem>
-            </CommandGroup>
-          </CommandList>
-        </CommandDialog>
-      </div>
-    );
-  },
-  args: {
-    loop: false,
-  },
-  parameters: {
-    docs: {
-      description: {
-        story:
-          "Interactive playground to test all Command features. Try searching, selecting items, keyboard navigation (arrow keys, Enter, Escape), and the dialog mode with ⌘K. Check the Actions panel to see selection events.",
-      },
-    },
+                <CommandGroup heading="Actions">
+                  <CommandItem
+                    onSelect={() => handleSelect("new-api-key")}
+                    disabled={loading && selectedCommand === "new-api-key"}
+                  >
+                    {loading && selectedCommand === "new-api-key" ? (
+                      <Loader2Icon className="animate-spin" />
+                    ) : (
+                      <ZapIcon />
+                    )}
+                    Create API Key
+                    <CommandShortcut>⌘N</CommandShortcut>
+                  </CommandItem>
+                  <CommandItem
+                    onSelect={() => handleSelect("billing")}
+                    disabled={loading && selectedCommand === "billing"}
+                  >
+                    {loading && selectedCommand === "billing" ? (
+                      <Loader2Icon className="animate-spin" />
+                    ) : (
+                      <CreditCardIcon />
+                    )}
+                    Billing & Usage
+                    <CommandShortcut>⌘B</CommandShortcut>
+                  </CommandItem>
+                  <CommandItem
+                    onSelect={() => handleSelect("docs")}
+                    disabled={loading && selectedCommand === "docs"}
+                  >
+                    {loading && selectedCommand === "docs" ? (
+                      <Loader2Icon className="animate-spin" />
+                    ) : (
+                      <BookOpenIcon />
+                    )}
+                    Documentation
+                    <CommandShortcut>⌘?</CommandShortcut>
+                  </CommandItem>
+                </CommandGroup>
+
+                <CommandSeparator />
+
+                <CommandGroup heading="Settings">
+                  <CommandItem
+                    onSelect={() => handleSelect("profile")}
+                    disabled={loading && selectedCommand === "profile"}
+                  >
+                    {loading && selectedCommand === "profile" ? (
+                      <Loader2Icon className="animate-spin" />
+                    ) : (
+                      <UserIcon />
+                    )}
+                    Profile Settings
+                    <CommandShortcut>⌘P</CommandShortcut>
+                  </CommandItem>
+                  <CommandItem
+                    onSelect={() => handleSelect("settings")}
+                    disabled={loading && selectedCommand === "settings"}
+                  >
+                    {loading && selectedCommand === "settings" ? (
+                      <Loader2Icon className="animate-spin" />
+                    ) : (
+                      <SettingsIcon />
+                    )}
+                    General Settings
+                    <CommandShortcut>⌘,</CommandShortcut>
+                  </CommandItem>
+                </CommandGroup>
+              </CommandList>
+            </Command>
+          </CommandDialog>
+
+          {/* Recent Actions Display */}
+          <div className="rounded-lg border p-4">
+            <h4 className="text-sm font-medium">Recent Actions</h4>
+            <p className="text-muted-foreground mt-1 text-xs">
+              {selectedCommand
+                ? `Loading ${selectedCommand}...`
+                : "No recent actions"}
+            </p>
+          </div>
+        </div>
+      );
+    }
+
+    return <CommandPaletteDemo />;
   },
 };
 
 /**
- * Showcase of all available component variants and configurations.
- * Demonstrates different layouts, groupings, and feature combinations.
+ * Complete design system reference showing all Command component features,
+ * sub-components, and interaction patterns.
  */
 export const Variants: Story = {
+  parameters: {
+    layout: "padded",
+  },
   render: () => (
-    <div className="grid grid-cols-1 lg:grid-cols-2 gap-6 w-full max-w-5xl">
-      {/* Basic Command Menu */}
-      <div className="space-y-2">
-        <h3 className="text-sm font-medium">Basic Command Menu</h3>
-        <Command className="rounded-lg border shadow-md">
-          <CommandInput placeholder="Type a command or search..." />
+    <div className="w-full max-w-4xl space-y-10">
+      {/* Basic Command */}
+      <section className="space-y-4">
+        <div>
+          <h3 className="text-lg font-semibold">Basic Command</h3>
+          <p className="text-muted-foreground text-sm">
+            Simple command menu with search input and grouped items.
+          </p>
+        </div>
+        <Command className="w-full max-w-md">
+          <CommandInput placeholder="Search commands..." />
           <CommandList>
             <CommandEmpty>No results found.</CommandEmpty>
-            <CommandGroup heading="Suggestions">
+            <CommandGroup heading="Actions">
               <CommandItem>
-                <Calendar className="mr-2 h-4 w-4" />
-                <span>Calendar</span>
+                <FileTextIcon />
+                New File
               </CommandItem>
               <CommandItem>
-                <Smile className="mr-2 h-4 w-4" />
-                <span>Search Emoji</span>
+                <UserIcon />
+                New User
               </CommandItem>
               <CommandItem>
-                <Calculator className="mr-2 h-4 w-4" />
-                <span>Calculator</span>
+                <SettingsIcon />
+                Settings
               </CommandItem>
             </CommandGroup>
           </CommandList>
         </Command>
-      </div>
+      </section>
 
-      {/* With Shortcuts */}
-      <div className="space-y-2">
-        <h3 className="text-sm font-medium">With Keyboard Shortcuts</h3>
-        <Command className="rounded-lg border shadow-md">
-          <CommandInput placeholder="All commands have shortcuts..." />
+      {/* With Groups and Separators */}
+      <section className="space-y-4">
+        <div>
+          <h3 className="text-lg font-semibold">
+            Multiple Groups with Separators
+          </h3>
+          <p className="text-muted-foreground text-sm">
+            Organize commands into logical groups separated by visual dividers.
+          </p>
+        </div>
+        <Command className="w-full max-w-md">
+          <CommandInput placeholder="Search..." />
           <CommandList>
             <CommandEmpty>No results found.</CommandEmpty>
-            <CommandGroup heading="File">
+            <CommandGroup heading="Navigation">
               <CommandItem>
-                <FileText className="mr-2 h-4 w-4" />
-                <span>New File</span>
-                <CommandShortcut>⌘N</CommandShortcut>
+                <LayoutDashboardIcon />
+                Dashboard
               </CommandItem>
               <CommandItem>
-                <Download className="mr-2 h-4 w-4" />
-                <span>Save</span>
-                <CommandShortcut>⌘S</CommandShortcut>
+                <BarChart3Icon />
+                Analytics
               </CommandItem>
             </CommandGroup>
             <CommandSeparator />
-            <CommandGroup heading="Edit">
+            <CommandGroup heading="Settings">
               <CommandItem>
-                <Copy className="mr-2 h-4 w-4" />
-                <span>Copy</span>
-                <CommandShortcut>⌘C</CommandShortcut>
+                <UserIcon />
+                Profile
               </CommandItem>
               <CommandItem>
-                <Edit className="mr-2 h-4 w-4" />
-                <span>Paste</span>
-                <CommandShortcut>⌘V</CommandShortcut>
+                <SettingsIcon />
+                Preferences
               </CommandItem>
             </CommandGroup>
           </CommandList>
         </Command>
-      </div>
+      </section>
 
-      {/* Without Input */}
-      <div className="space-y-2">
-        <h3 className="text-sm font-medium">Menu Without Search</h3>
-        <Command className="rounded-lg border shadow-md">
+      {/* With Keyboard Shortcuts */}
+      <section className="space-y-4">
+        <div>
+          <h3 className="text-lg font-semibold">With Keyboard Shortcuts</h3>
+          <p className="text-muted-foreground text-sm">
+            Display keyboard shortcuts to help users learn and navigate faster.
+          </p>
+        </div>
+        <Command className="w-full max-w-md">
+          <CommandInput placeholder="Type a command..." />
           <CommandList>
+            <CommandEmpty>No results found.</CommandEmpty>
             <CommandGroup heading="Quick Actions">
               <CommandItem>
-                <Mail className="mr-2 h-4 w-4" />
-                <span>Send Email</span>
-                <CommandShortcut>⌘E</CommandShortcut>
+                <ZapIcon />
+                Quick Action
+                <CommandShortcut>⌘K</CommandShortcut>
               </CommandItem>
               <CommandItem>
-                <Calendar className="mr-2 h-4 w-4" />
-                <span>Schedule Meeting</span>
-                <CommandShortcut>⌘M</CommandShortcut>
+                <FileTextIcon />
+                New Document
+                <CommandShortcut>⌘N</CommandShortcut>
               </CommandItem>
               <CommandItem>
-                <Star className="mr-2 h-4 w-4" />
-                <span>Add to Favorites</span>
-                <CommandShortcut>⌘F</CommandShortcut>
+                <SettingsIcon />
+                Settings
+                <CommandShortcut>⌘,</CommandShortcut>
+              </CommandItem>
+              <CommandItem>
+                <BookOpenIcon />
+                Help
+                <CommandShortcut>⌘?</CommandShortcut>
               </CommandItem>
             </CommandGroup>
           </CommandList>
         </Command>
-      </div>
+      </section>
 
-      {/* Custom Empty State */}
-      <div className="space-y-2">
-        <h3 className="text-sm font-medium">Custom Empty State</h3>
-        <Command className="rounded-lg border shadow-md">
-          <CommandInput placeholder="Search for something that doesn't exist..." />
+      {/* Empty State */}
+      <section className="space-y-4">
+        <div>
+          <h3 className="text-lg font-semibold">Empty State</h3>
+          <p className="text-muted-foreground text-sm">
+            Displayed when search returns no results.
+          </p>
+        </div>
+        <Command className="w-full max-w-md">
+          <CommandInput placeholder="Try searching for 'xyz'..." />
           <CommandList>
             <CommandEmpty>
               <div className="py-6 text-center">
-                <Search className="mx-auto h-10 w-10 text-muted-foreground/50" />
-                <h3 className="mt-2 text-sm font-medium">No results found</h3>
-                <p className="mt-1 text-sm text-muted-foreground">
-                  Try adjusting your search terms.
+                <p className="text-sm">No results found.</p>
+                <p className="text-muted-foreground mt-1 text-xs">
+                  Try a different search term.
                 </p>
               </div>
             </CommandEmpty>
           </CommandList>
         </Command>
-      </div>
-    </div>
-  ),
-  parameters: {
-    layout: "centered",
-    docs: {
-      description: {
-        story:
-          "Comprehensive showcase of different Command component configurations including basic menus, keyboard shortcuts, menus without search input, and custom empty states.",
-      },
-    },
-  },
-};
-
-/**
- * Real-world usage example showing Command in a practical application context.
- * Perfect for demonstrating to designers and business teams how the component works in production.
- */
-export const InContext: Story = {
-  render: function CommandInApp() {
-    const [searchOpen, setSearchOpen] = React.useState(false);
-    const [quickActionsOpen, setQuickActionsOpen] = React.useState(false);
-
-    React.useEffect(() => {
-      const down = (e: KeyboardEvent) => {
-        if (e.key === "k" && (e.metaKey || e.ctrlKey)) {
-          e.preventDefault();
-          setSearchOpen(true);
-        }
-        if (e.key === "j" && (e.metaKey || e.ctrlKey)) {
-          e.preventDefault();
-          setQuickActionsOpen(true);
-        }
-      };
-      document.addEventListener("keydown", down);
-      return () => document.removeEventListener("keydown", down);
-    }, []);
+      </section>
 
-    return (
-      <div className="w-full max-w-4xl mx-auto">
-        {/* App Header */}
-        <div className="border-b bg-background px-6 py-4">
-          <div className="flex items-center justify-between">
-            <h1 className="text-xl font-semibold">Project Dashboard</h1>
-            <div className="flex items-center gap-3">
-              <Button
-                variant="outline"
-                size="sm"
-                onClick={() => setSearchOpen(true)}
-                className="relative"
-              >
-                <Search className="mr-2 h-4 w-4" />
-                Search...
-                <kbd className="pointer-events-none absolute right-2 top-2 hidden h-5 select-none items-center gap-1 rounded border bg-muted px-1.5 font-mono text-[10px] font-medium text-muted-foreground opacity-100 sm:flex">
-                  <span className="text-xs">⌘</span>K
-                </kbd>
-              </Button>
-              <Button
-                variant="outline"
-                size="sm"
-                onClick={() => setQuickActionsOpen(true)}
-              >
-                <Plus className="mr-2 h-4 w-4" />
-                Quick Actions
-                <kbd className="pointer-events-none ml-2 hidden h-5 select-none items-center gap-1 rounded border bg-muted px-1.5 font-mono text-[10px] font-medium text-muted-foreground opacity-100 sm:flex">
-                  <span className="text-xs">⌘</span>J
-                </kbd>
-              </Button>
-            </div>
-          </div>
-        </div>
-
-        {/* App Content */}
-        <div className="p-6">
-          <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
-            <div className="space-y-3">
-              <h2 className="font-medium">Recent Files</h2>
-              <div className="space-y-2">
-                {["project-plan.md", "meeting-notes.md", "budget.xlsx"].map(
-                  (file) => (
-                    <div key={file} className="p-3 border rounded-lg">
-                      <div className="flex items-center gap-2">
-                        <FileText className="h-4 w-4" />
-                        <span className="text-sm">{file}</span>
-                      </div>
-                    </div>
-                  ),
-                )}
-              </div>
-            </div>
-            <div className="space-y-3">
-              <h2 className="font-medium">Quick Stats</h2>
-              <div className="space-y-2">
-                <div className="p-3 border rounded-lg">
-                  <div className="text-2xl font-bold">24</div>
-                  <div className="text-sm text-muted-foreground">
-                    Active Projects
-                  </div>
-                </div>
-                <div className="p-3 border rounded-lg">
-                  <div className="text-2xl font-bold">156</div>
-                  <div className="text-sm text-muted-foreground">
-                    Tasks Completed
-                  </div>
-                </div>
-              </div>
-            </div>
-            <div className="space-y-3">
-              <h2 className="font-medium">Team Activity</h2>
-              <div className="space-y-2">
-                <div className="p-3 border rounded-lg text-sm">
-                  <div className="font-medium">Sarah updated design files</div>
-                  <div className="text-muted-foreground">2 hours ago</div>
-                </div>
-                <div className="p-3 border rounded-lg text-sm">
-                  <div className="font-medium">Mike completed code review</div>
-                  <div className="text-muted-foreground">4 hours ago</div>
-                </div>
-              </div>
-            </div>
-          </div>
+      {/* Complex Command with Multiple Features */}
+      <section className="space-y-4">
+        <div>
+          <h3 className="text-lg font-semibold">Full-Featured Command</h3>
+          <p className="text-muted-foreground text-sm">
+            Complete example with groups, separators, shortcuts, and icons.
+          </p>
         </div>
-
-        {/* Global Search Command Dialog */}
-        <CommandDialog open={searchOpen} onOpenChange={setSearchOpen}>
-          <CommandInput placeholder="Search files, projects, people..." />
+        <Command className="w-full max-w-md">
+          <CommandInput placeholder="Search everything..." />
           <CommandList>
             <CommandEmpty>No results found.</CommandEmpty>
-            <CommandGroup heading="Recent Files">
-              <CommandItem onSelect={() => setSearchOpen(false)}>
-                <FileText className="mr-2 h-4 w-4" />
-                <span>project-plan.md</span>
-                <span className="ml-auto text-xs text-muted-foreground">
-                  Project Alpha
-                </span>
-              </CommandItem>
-              <CommandItem onSelect={() => setSearchOpen(false)}>
-                <FileText className="mr-2 h-4 w-4" />
-                <span>meeting-notes.md</span>
-                <span className="ml-auto text-xs text-muted-foreground">
-                  Today
-                </span>
+
+            <CommandGroup heading="Pages">
+              <CommandItem>
+                <LayoutDashboardIcon />
+                Dashboard
+                <CommandShortcut>⌘D</CommandShortcut>
               </CommandItem>
-            </CommandGroup>
-            <CommandSeparator />
-            <CommandGroup heading="Projects">
-              <CommandItem onSelect={() => setSearchOpen(false)}>
-                <Star className="mr-2 h-4 w-4" />
-                <span>Project Alpha</span>
-                <span className="ml-auto text-xs text-muted-foreground">
-                  24 tasks
-                </span>
+              <CommandItem>
+                <BarChart3Icon />
+                Analytics
+                <CommandShortcut>⌘A</CommandShortcut>
               </CommandItem>
-              <CommandItem onSelect={() => setSearchOpen(false)}>
-                <Star className="mr-2 h-4 w-4" />
-                <span>Beta Launch</span>
-                <span className="ml-auto text-xs text-muted-foreground">
-                  12 tasks
-                </span>
+              <CommandItem>
+                <UsersIcon />
+                Team
+                <CommandShortcut>⌘T</CommandShortcut>
               </CommandItem>
             </CommandGroup>
+
             <CommandSeparator />
-            <CommandGroup heading="Team Members">
-              <CommandItem onSelect={() => setSearchOpen(false)}>
-                <User className="mr-2 h-4 w-4" />
-                <span>Sarah Johnson</span>
-                <span className="ml-auto text-xs text-muted-foreground">
-                  Designer
-                </span>
-              </CommandItem>
-              <CommandItem onSelect={() => setSearchOpen(false)}>
-                <User className="mr-2 h-4 w-4" />
-                <span>Mike Chen</span>
-                <span className="ml-auto text-xs text-muted-foreground">
-                  Developer
-                </span>
-              </CommandItem>
-            </CommandGroup>
-          </CommandList>
-        </CommandDialog>
 
-        {/* Quick Actions Command Dialog */}
-        <CommandDialog
-          open={quickActionsOpen}
-          onOpenChange={setQuickActionsOpen}
-        >
-          <CommandInput placeholder="What would you like to do?" />
-          <CommandList>
-            <CommandEmpty>No actions found.</CommandEmpty>
-            <CommandGroup heading="Create">
-              <CommandItem onSelect={() => setQuickActionsOpen(false)}>
-                <Plus className="mr-2 h-4 w-4" />
-                <span>New Project</span>
+            <CommandGroup heading="Actions">
+              <CommandItem>
+                <FileTextIcon />
+                Create Document
                 <CommandShortcut>⌘N</CommandShortcut>
               </CommandItem>
-              <CommandItem onSelect={() => setQuickActionsOpen(false)}>
-                <FileText className="mr-2 h-4 w-4" />
-                <span>New Document</span>
-                <CommandShortcut>⌘⇧N</CommandShortcut>
-              </CommandItem>
-              <CommandItem onSelect={() => setQuickActionsOpen(false)}>
-                <Calendar className="mr-2 h-4 w-4" />
-                <span>Schedule Meeting</span>
-                <CommandShortcut>⌘M</CommandShortcut>
-              </CommandItem>
-            </CommandGroup>
-            <CommandSeparator />
-            <CommandGroup heading="Navigate">
-              <CommandItem onSelect={() => setQuickActionsOpen(false)}>
-                <Settings className="mr-2 h-4 w-4" />
-                <span>Project Settings</span>
-                <CommandShortcut>⌘,</CommandShortcut>
-              </CommandItem>
-              <CommandItem onSelect={() => setQuickActionsOpen(false)}>
-                <User className="mr-2 h-4 w-4" />
-                <span>Team Members</span>
-                <CommandShortcut>⌘T</CommandShortcut>
+              <CommandItem>
+                <ZapIcon />
+                Quick Action
+                <CommandShortcut>⌘K</CommandShortcut>
               </CommandItem>
-              <CommandItem onSelect={() => setQuickActionsOpen(false)}>
-                <Mail className="mr-2 h-4 w-4" />
-                <span>Messages</span>
-                <CommandShortcut>⌘I</CommandShortcut>
+              <CommandItem>
+                <CreditCardIcon />
+                Billing
+                <CommandShortcut>⌘B</CommandShortcut>
               </CommandItem>
             </CommandGroup>
+
             <CommandSeparator />
-            <CommandGroup heading="Tools">
-              <CommandItem onSelect={() => setQuickActionsOpen(false)}>
-                <Calculator className="mr-2 h-4 w-4" />
-                <span>Calculator</span>
-              </CommandItem>
-              <CommandItem onSelect={() => setQuickActionsOpen(false)}>
-                <Download className="mr-2 h-4 w-4" />
-                <span>Export Data</span>
+
+            <CommandGroup heading="Help">
+              <CommandItem>
+                <BookOpenIcon />
+                Documentation
+                <CommandShortcut>⌘?</CommandShortcut>
               </CommandItem>
-              <CommandItem onSelect={() => setQuickActionsOpen(false)}>
-                <Share className="mr-2 h-4 w-4" />
-                <span>Share Project</span>
+              <CommandItem>
+                <MessagesSquareIcon />
+                Support
               </CommandItem>
             </CommandGroup>
           </CommandList>
-        </CommandDialog>
-      </div>
-    );
-  },
+        </Command>
+      </section>
+
+      {/* Different Sizes */}
+      <section className="space-y-4">
+        <div>
+          <h3 className="text-lg font-semibold">Different Widths</h3>
+          <p className="text-muted-foreground text-sm">
+            Command components adapt to different container widths.
+          </p>
+        </div>
+        <div className="space-y-4">
+          <Command className="w-64">
+            <CommandInput placeholder="Small..." />
+            <CommandList>
+              <CommandGroup>
+                <CommandItem>
+                  <FileTextIcon />
+                  Item
+                </CommandItem>
+              </CommandGroup>
+            </CommandList>
+          </Command>
+          <Command className="w-96">
+            <CommandInput placeholder="Medium..." />
+            <CommandList>
+              <CommandGroup>
+                <CommandItem>
+                  <FileTextIcon />
+                  Item
+                </CommandItem>
+              </CommandGroup>
+            </CommandList>
+          </Command>
+          <Command className="w-full max-w-2xl">
+            <CommandInput placeholder="Large..." />
+            <CommandList>
+              <CommandGroup>
+                <CommandItem>
+                  <FileTextIcon />
+                  Item
+                </CommandItem>
+              </CommandGroup>
+            </CommandList>
+          </Command>
+        </div>
+      </section>
+    </div>
+  ),
+};
+
+/**
+ * Interactive playground for testing Command component props.
+ */
+export const Interactive: Story = {
   parameters: {
-    layout: "fullscreen",
-    docs: {
-      description: {
-        story:
-          "Real-world example of Command components in a project dashboard application. Shows global search (⌘K) and quick actions (⌘J) command palettes that provide powerful navigation and action capabilities. This demonstrates how command palettes enhance user productivity in modern applications.",
-      },
-    },
+    layout: "centered",
   },
+  render: (args) => (
+    <Command {...args} className="w-[450px]">
+      <CommandInput placeholder="Type a command or search..." />
+      <CommandList>
+        <CommandEmpty>No results found.</CommandEmpty>
+        <CommandGroup heading="Suggestions">
+          <CommandItem onSelect={action("onSelect: calendar")}>
+            <CalendarIcon />
+            Calendar
+          </CommandItem>
+          <CommandItem onSelect={action("onSelect: search-emoji")}>
+            <SmileIcon />
+            Search Emoji
+          </CommandItem>
+          <CommandItem onSelect={action("onSelect: documents")}>
+            <FileTextIcon />
+            Documents
+          </CommandItem>
+        </CommandGroup>
+      </CommandList>
+    </Command>
+  ),
 };