@neynar/ui 0.3.1 → 0.5.0

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

@@ -1,6 +1,24 @@
-import type { Meta, StoryObj } from "@storybook/react-vite";
-import React from "react";
-import { Settings, User, Bell, Menu, HelpCircle, Check } from "lucide-react";
+import type { Meta, StoryObj } from "@storybook/react";
+import { fn } from "storybook/test";
+import {
+  BellIcon,
+  CheckIcon,
+  FilterIcon,
+  HomeIcon,
+  MenuIcon,
+  SearchIcon,
+  SettingsIcon,
+  TrendingUpIcon,
+  UserIcon,
+  UsersIcon,
+  XIcon,
+} from "lucide-react";
+import { useState } from "react";
+
+import { Button } from "../button";
+import { Input } from "../input";
+import { Label } from "../label";
+import { RadioGroup, RadioGroupItem } from "../radio-group";
 import {
   Sheet,
   SheetClose,
@@ -11,457 +29,585 @@ import {
   SheetTitle,
   SheetTrigger,
 } from "../sheet";
-import { Button } from "../button";
-import { Input } from "../input";
-import { Label } from "../label";
-import { Textarea } from "../textarea";
 import { Switch } from "../switch";
-import { Separator } from "../separator";
 
-const meta = {
-  title: "Overlays/Sheet",
+const meta: Meta<typeof Sheet> = {
+  title: "Components/Overlays & Dialogs/Sheet",
   component: Sheet,
   parameters: {
     layout: "centered",
-    docs: {
-      description: {
-        component:
-          "A slide-out panel that displays supplementary content from any edge of the screen. Built on Radix UI Dialog with smooth animations and comprehensive accessibility support. Perfect for navigation menus, settings panels, and contextual forms.",
-      },
-    },
+  },
+  args: {
+    onOpenChange: fn(),
   },
   argTypes: {
+    defaultOpen: {
+      control: "boolean",
+      description: "Whether the sheet is open by default",
+    },
     open: {
       control: "boolean",
-      description: "Controls the open state of the sheet",
+      description: "Controlled open state",
     },
     onOpenChange: {
-      action: "onOpenChange",
-      description: "Callback fired when the open state changes",
+      description: "Callback when open state changes",
     },
   },
-} satisfies Meta<typeof Sheet>;
+};
 
 export default meta;
-type Story = StoryObj<typeof meta>;
+type Story = StoryObj<typeof Sheet>;
 
 /**
- * Interactive playground for testing all sheet props and configurations.
- * Use the controls panel to experiment with different sides, content, and states.
+ * Mobile Navigation & Filters - Realistic scenarios showing sheets in context
+ * of the Neynar Dashboard for mobile navigation and data filtering.
  */
-export const Interactive: Story = {
-  args: {
-    open: false,
+export const InContext: Story = {
+  parameters: {
+    layout: "padded",
   },
-  render: function InteractiveSheet(args) {
-    const [open, setOpen] = React.useState(args.open);
-    const [side, setSide] = React.useState<"top" | "right" | "bottom" | "left">(
-      "right",
-    );
-    const [hasHeader, setHasHeader] = React.useState(true);
-    const [hasFooter, setHasFooter] = React.useState(true);
-    const [hasForm, setHasForm] = React.useState(false);
+  render: () => {
+    function MobileNavigation() {
+      const [activeNav, setActiveNav] = useState("home");
 
-    React.useEffect(() => {
-      setOpen(args.open);
-    }, [args.open]);
+      return (
+        <div className="w-full max-w-xl space-y-6">
+          {/* Mobile Header */}
+          <div className="bg-card border-border rounded-lg border p-4">
+            <div className="flex items-center justify-between">
+              <div className="flex items-center gap-3">
+                <Sheet>
+                  <SheetTrigger render={<Button variant="ghost" size="icon" />}>
+                    <MenuIcon />
+                  </SheetTrigger>
+                  <SheetContent side="left" className="p-0">
+                    <div className="flex h-full flex-col">
+                      <SheetHeader className="border-b p-6">
+                        <SheetTitle>Neynar Dashboard</SheetTitle>
+                        <SheetDescription>
+                          Navigate your Farcaster analytics and settings
+                        </SheetDescription>
+                      </SheetHeader>
 
-    const handleOpenChange = (newOpen: boolean) => {
-      setOpen(newOpen);
-      args.onOpenChange?.(newOpen);
-    };
+                      <nav className="flex-1 space-y-1 p-4">
+                        {[
+                          { id: "home", label: "Home", icon: HomeIcon },
+                          {
+                            id: "analytics",
+                            label: "Analytics",
+                            icon: TrendingUpIcon,
+                          },
+                          { id: "users", label: "Users", icon: UsersIcon },
+                          {
+                            id: "notifications",
+                            label: "Notifications",
+                            icon: BellIcon,
+                          },
+                          {
+                            id: "settings",
+                            label: "Settings",
+                            icon: SettingsIcon,
+                          },
+                        ].map((item) => (
+                          <button
+                            key={item.id}
+                            onClick={() => setActiveNav(item.id)}
+                            className={`flex w-full items-center gap-3 rounded-lg px-3 py-2 text-sm transition-colors ${
+                              activeNav === item.id
+                                ? "bg-primary/10 text-primary font-medium"
+                                : "text-muted-foreground hover:bg-muted hover:text-foreground"
+                            }`}
+                          >
+                            <item.icon className="size-5" />
+                            {item.label}
+                          </button>
+                        ))}
+                      </nav>
 
-    return (
-      <div className="space-y-4">
-        {/* Controls */}
-        <div className="grid grid-cols-2 gap-4 p-4 border rounded-lg">
-          <div>
-            <Label>Side</Label>
-            <select
-              value={side}
-              // eslint-disable-next-line @typescript-eslint/no-explicit-any
-              onChange={(e) => setSide(e.target.value as any)}
-              className="w-full p-2 border rounded"
-            >
-              <option value="right">Right</option>
-              <option value="left">Left</option>
-              <option value="top">Top</option>
-              <option value="bottom">Bottom</option>
-            </select>
-          </div>
-          <div className="space-y-2">
-            <label className="flex items-center gap-2">
-              <input
-                type="checkbox"
-                checked={hasHeader}
-                onChange={(e) => setHasHeader(e.target.checked)}
-              />
-              Include Header
-            </label>
-            <label className="flex items-center gap-2">
-              <input
-                type="checkbox"
-                checked={hasFooter}
-                onChange={(e) => setHasFooter(e.target.checked)}
-              />
-              Include Footer
-            </label>
-            <label className="flex items-center gap-2">
-              <input
-                type="checkbox"
-                checked={hasForm}
-                onChange={(e) => setHasForm(e.target.checked)}
-              />
-              Form Content
-            </label>
+                      <div className="border-t p-4">
+                        <div className="flex items-center gap-3 rounded-lg p-3 bg-muted">
+                          <div className="bg-primary/10 text-primary flex size-10 items-center justify-center rounded-full">
+                            <UserIcon className="size-5" />
+                          </div>
+                          <div className="flex-1 min-w-0">
+                            <p className="truncate font-medium text-sm">
+                              @dwr.eth
+                            </p>
+                            <p className="text-muted-foreground truncate text-xs">
+                              dan@farcaster.xyz
+                            </p>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </SheetContent>
+                </Sheet>
+                <h1 className="text-lg font-semibold">Dashboard</h1>
+              </div>
+              <Button variant="ghost" size="icon">
+                <BellIcon />
+              </Button>
+            </div>
           </div>
-        </div>
 
-        {/* Sheet Demo */}
-        <Sheet open={open} onOpenChange={handleOpenChange}>
-          <SheetTrigger asChild>
-            <Button>Open Sheet ({side})</Button>
-          </SheetTrigger>
-          <SheetContent
-            side={side}
-            className={
-              side === "top" || side === "bottom" ? "h-[400px]" : undefined
-            }
-          >
-            {hasHeader && (
-              <SheetHeader>
-                <SheetTitle>Interactive Sheet</SheetTitle>
-                <SheetDescription>
-                  This sheet opens from the {side} side. Use the controls above
-                  to customize its behavior.
-                </SheetDescription>
-              </SheetHeader>
-            )}
+          {/* Filter Panel */}
+          <div className="bg-card border-border rounded-lg border p-4">
+            <div className="flex items-center justify-between">
+              <div>
+                <h2 className="font-semibold">User Analytics</h2>
+                <p className="text-muted-foreground text-sm">
+                  1,234 users found
+                </p>
+              </div>
+              <Sheet>
+                <SheetTrigger render={<Button variant="outline" size="sm" />}>
+                  <FilterIcon data-icon="inline-start" />
+                  Filters
+                </SheetTrigger>
+                <SheetContent side="right">
+                  <SheetHeader>
+                    <SheetTitle>Filter Users</SheetTitle>
+                    <SheetDescription>
+                      Refine your user list with advanced filters
+                    </SheetDescription>
+                  </SheetHeader>
 
-            <div className="py-4 flex-1">
-              {hasForm ? (
-                <div className="space-y-4">
-                  <div>
-                    <Label htmlFor="name">Name</Label>
-                    <Input id="name" placeholder="Enter your name" />
-                  </div>
-                  <div>
-                    <Label htmlFor="email">Email</Label>
-                    <Input
-                      id="email"
-                      type="email"
-                      placeholder="Enter your email"
-                    />
-                  </div>
-                  <div>
-                    <Label htmlFor="message">Message</Label>
-                    <Textarea id="message" placeholder="Your message..." />
-                  </div>
-                </div>
-              ) : (
-                <div className="space-y-4">
-                  <p className="text-sm text-muted-foreground">
-                    This is the main content area of the sheet. You can put any
-                    content here.
-                  </p>
-                  <div className="grid grid-cols-1 gap-2">
-                    <Button variant="ghost" className="justify-start">
-                      <User className="mr-2 h-4 w-4" />
-                      Sample Action 1
-                    </Button>
-                    <Button variant="ghost" className="justify-start">
-                      <Settings className="mr-2 h-4 w-4" />
-                      Sample Action 2
-                    </Button>
-                    <Button variant="ghost" className="justify-start">
-                      <Bell className="mr-2 h-4 w-4" />
-                      Sample Action 3
-                    </Button>
-                  </div>
-                </div>
-              )}
-            </div>
+                  <div className="space-y-6 p-4">
+                    {/* Search */}
+                    <div className="space-y-2">
+                      <Label htmlFor="search">Search</Label>
+                      <div className="relative">
+                        <SearchIcon className="text-muted-foreground pointer-events-none absolute left-3 top-1/2 size-4 -translate-y-1/2" />
+                        <Input
+                          id="search"
+                          placeholder="Search by username or FID"
+                          className="pl-9"
+                        />
+                      </div>
+                    </div>
 
-            {hasFooter && (
-              <SheetFooter>
-                <SheetClose asChild>
-                  <Button variant="outline">Cancel</Button>
-                </SheetClose>
-                <Button>{hasForm ? "Submit" : "Done"}</Button>
-              </SheetFooter>
-            )}
-          </SheetContent>
-        </Sheet>
+                    {/* Activity Status */}
+                    <div className="space-y-3">
+                      <Label>Activity Status</Label>
+                      <RadioGroup defaultValue="all">
+                        <div className="flex items-center gap-2">
+                          <RadioGroupItem value="all" id="all" />
+                          <Label htmlFor="all" className="font-normal">
+                            All Users
+                          </Label>
+                        </div>
+                        <div className="flex items-center gap-2">
+                          <RadioGroupItem value="active" id="active" />
+                          <Label htmlFor="active" className="font-normal">
+                            Active (24h)
+                          </Label>
+                        </div>
+                        <div className="flex items-center gap-2">
+                          <RadioGroupItem value="inactive" id="inactive" />
+                          <Label htmlFor="inactive" className="font-normal">
+                            Inactive (7d+)
+                          </Label>
+                        </div>
+                      </RadioGroup>
+                    </div>
 
-        <p className="text-xs text-muted-foreground">
-          Current state: {open ? "Open" : "Closed"}
-        </p>
-      </div>
-    );
-  },
-};
+                    {/* Verification */}
+                    <div className="flex items-center justify-between">
+                      <div className="space-y-0.5">
+                        <Label>Verified Only</Label>
+                        <p className="text-muted-foreground text-xs">
+                          Show only verified accounts
+                        </p>
+                      </div>
+                      <Switch />
+                    </div>
 
-/**
- * Demonstrates all available sheet variants and configurations.
- * Shows sheets from all four sides with different content types.
- */
-export const Variants: Story = {
-  render: () => (
-    <div className="grid grid-cols-2 gap-4">
-      {/* Right Side - Settings */}
-      <Sheet>
-        <SheetTrigger asChild>
-          <Button variant="outline">Settings (Right)</Button>
-        </SheetTrigger>
-        <SheetContent side="right">
-          <SheetHeader>
-            <SheetTitle>Settings</SheetTitle>
-            <SheetDescription>Configure your preferences</SheetDescription>
-          </SheetHeader>
-          <div className="space-y-4 py-4">
-            <div className="flex items-center justify-between">
-              <Label>Notifications</Label>
-              <Switch defaultChecked />
-            </div>
-            <div className="flex items-center justify-between">
-              <Label>Dark Mode</Label>
-              <Switch />
-            </div>
-          </div>
-          <SheetFooter>
-            <SheetClose asChild>
-              <Button>Done</Button>
-            </SheetClose>
-          </SheetFooter>
-        </SheetContent>
-      </Sheet>
+                    {/* Power Badge */}
+                    <div className="flex items-center justify-between">
+                      <div className="space-y-0.5">
+                        <Label>Power Badge</Label>
+                        <p className="text-muted-foreground text-xs">
+                          Filter by power badge holders
+                        </p>
+                      </div>
+                      <Switch />
+                    </div>
+                  </div>
 
-      {/* Left Side - Navigation */}
-      <Sheet>
-        <SheetTrigger asChild>
-          <Button variant="outline">
-            <Menu className="mr-2 h-4 w-4" />
-            Menu (Left)
-          </Button>
-        </SheetTrigger>
-        <SheetContent side="left" className="w-[300px]">
-          <SheetHeader>
-            <SheetTitle>Navigation</SheetTitle>
-            <SheetDescription>Browse app sections</SheetDescription>
-          </SheetHeader>
-          <nav className="space-y-2 py-4">
-            <Button variant="ghost" className="w-full justify-start">
-              <User className="mr-2 h-4 w-4" />
-              Profile
-            </Button>
-            <Button variant="ghost" className="w-full justify-start">
-              <Settings className="mr-2 h-4 w-4" />
-              Settings
-            </Button>
-            <Button variant="ghost" className="w-full justify-start">
-              <HelpCircle className="mr-2 h-4 w-4" />
-              Help
-            </Button>
-          </nav>
-        </SheetContent>
-      </Sheet>
+                  <SheetFooter>
+                    <SheetClose render={<Button variant="outline" />}>
+                      Cancel
+                    </SheetClose>
+                    <Button>Apply Filters</Button>
+                  </SheetFooter>
+                </SheetContent>
+              </Sheet>
+            </div>
 
-      {/* Top Side - Notifications */}
-      <Sheet>
-        <SheetTrigger asChild>
-          <Button variant="outline">Notifications (Top)</Button>
-        </SheetTrigger>
-        <SheetContent side="top" className="h-[250px]">
-          <SheetHeader>
-            <SheetTitle>Recent Notifications</SheetTitle>
-            <SheetDescription>Your latest updates</SheetDescription>
-          </SheetHeader>
-          <div className="py-4">
-            <div className="space-y-2">
-              <div className="flex items-center gap-2 p-2 bg-blue-50 dark:bg-blue-950 rounded">
-                <Check className="h-4 w-4 text-blue-600" />
-                <span className="text-sm">Task completed successfully</span>
-              </div>
-              <div className="flex items-center gap-2 p-2 bg-green-50 dark:bg-green-950 rounded">
-                <Bell className="h-4 w-4 text-green-600" />
-                <span className="text-sm">New message received</span>
-              </div>
+            <div className="mt-4 border-t pt-4">
+              <p className="text-muted-foreground text-sm">
+                Active filters:{" "}
+                <span className="text-foreground font-medium">None</span>
+              </p>
             </div>
           </div>
-        </SheetContent>
-      </Sheet>
+        </div>
+      );
+    }
 
-      {/* Bottom Side - Quick Actions */}
-      <Sheet>
-        <SheetTrigger asChild>
-          <Button variant="outline">Quick Actions (Bottom)</Button>
-        </SheetTrigger>
-        <SheetContent side="bottom" className="h-[300px]">
-          <SheetHeader>
-            <SheetTitle>Quick Actions</SheetTitle>
-            <SheetDescription>Common tasks at your fingertips</SheetDescription>
-          </SheetHeader>
-          <div className="grid grid-cols-2 gap-3 py-4">
-            <Button>Create New</Button>
-            <Button variant="outline">Import</Button>
-            <Button variant="secondary">Export</Button>
-            <Button variant="ghost">Archive</Button>
-          </div>
-        </SheetContent>
-      </Sheet>
-    </div>
-  ),
-  parameters: {
-    docs: {
-      description: {
-        story:
-          "All available sheet sides and common use cases: settings panel (right), navigation menu (left), notifications banner (top), and quick actions panel (bottom).",
-      },
-    },
+    return <MobileNavigation />;
   },
 };
 
 /**
- * Real-world example showing a sheet in a typical application context.
- * Features a mobile-responsive navigation sheet with user profile section.
+ * Complete design system reference showing all sheet variants and positions.
  */
-export const InContext: Story = {
+export const Variants: Story = {
+  parameters: {
+    layout: "padded",
+  },
   render: () => (
-    <div className="min-h-[400px] border rounded-lg bg-background">
-      {/* Mock App Header */}
-      <header className="flex items-center justify-between p-4 border-b">
-        <h1 className="text-lg font-semibold">Dashboard App</h1>
-        <div className="flex items-center gap-2">
-          <Button variant="ghost" size="sm">
-            Profile
-          </Button>
-
-          {/* Navigation Sheet */}
+    <div className="w-full max-w-4xl space-y-10">
+      {/* Side Positions */}
+      <section className="space-y-4">
+        <div>
+          <h3 className="text-lg font-semibold">Side Positions</h3>
+          <p className="text-muted-foreground text-sm">
+            Sheets can slide in from any edge of the screen.
+          </p>
+        </div>
+        <div className="flex flex-wrap gap-3">
           <Sheet>
-            <SheetTrigger asChild>
-              <Button variant="outline" size="sm">
-                <Menu className="h-4 w-4" />
-                <span className="sr-only">Open menu</span>
-              </Button>
+            <SheetTrigger render={<Button variant="outline" />}>
+              Left Side
             </SheetTrigger>
-            <SheetContent side="left" className="w-[280px] sm:w-[350px]">
+            <SheetContent side="left">
               <SheetHeader>
-                <SheetTitle>Navigation</SheetTitle>
+                <SheetTitle>Left Sheet</SheetTitle>
                 <SheetDescription>
-                  Access all sections of the application
+                  This sheet slides in from the left.
                 </SheetDescription>
               </SheetHeader>
+              <div className="py-6">
+                <p className="text-sm">
+                  Perfect for navigation menus and hierarchical content.
+                </p>
+              </div>
+            </SheetContent>
+          </Sheet>
 
-              <div className="py-4">
-                {/* User Section */}
-                <div className="flex items-center gap-3 p-3 rounded-lg bg-muted/50">
-                  <div className="h-10 w-10 rounded-full bg-primary/10 flex items-center justify-center">
-                    <User className="h-5 w-5" />
-                  </div>
-                  <div>
-                    <p className="text-sm font-medium">John Doe</p>
-                    <p className="text-xs text-muted-foreground">
-                      john@example.com
-                    </p>
-                  </div>
-                </div>
-
-                <Separator className="my-4" />
-
-                {/* Navigation Links */}
-                <nav className="space-y-1">
-                  <div className="px-2 py-1.5">
-                    <h4 className="text-xs font-semibold text-muted-foreground uppercase tracking-wider">
-                      Main
-                    </h4>
-                  </div>
-                  <Button variant="ghost" className="w-full justify-start h-9">
-                    📊 Dashboard
-                  </Button>
-                  <Button variant="ghost" className="w-full justify-start h-9">
-                    📝 Projects
-                  </Button>
-                  <Button variant="ghost" className="w-full justify-start h-9">
-                    ✅ Tasks
-                  </Button>
-                  <Button variant="ghost" className="w-full justify-start h-9">
-                    📈 Analytics
-                  </Button>
-
-                  <Separator className="my-3" />
+          <Sheet>
+            <SheetTrigger render={<Button variant="outline" />}>
+              Right Side
+            </SheetTrigger>
+            <SheetContent side="right">
+              <SheetHeader>
+                <SheetTitle>Right Sheet</SheetTitle>
+                <SheetDescription>
+                  This sheet slides in from the right.
+                </SheetDescription>
+              </SheetHeader>
+              <div className="py-6">
+                <p className="text-sm">
+                  Ideal for filters, settings, and contextual panels.
+                </p>
+              </div>
+            </SheetContent>
+          </Sheet>
 
-                  <div className="px-2 py-1.5">
-                    <h4 className="text-xs font-semibold text-muted-foreground uppercase tracking-wider">
-                      Account
-                    </h4>
-                  </div>
-                  <Button variant="ghost" className="w-full justify-start h-9">
-                    <Settings className="mr-2 h-4 w-4" />
-                    Settings
-                  </Button>
-                  <Button variant="ghost" className="w-full justify-start h-9">
-                    <Bell className="mr-2 h-4 w-4" />
-                    Notifications
-                  </Button>
-                  <Button variant="ghost" className="w-full justify-start h-9">
-                    <HelpCircle className="mr-2 h-4 w-4" />
-                    Help & Support
-                  </Button>
-                </nav>
+          <Sheet>
+            <SheetTrigger render={<Button variant="outline" />}>
+              Top Side
+            </SheetTrigger>
+            <SheetContent side="top">
+              <SheetHeader>
+                <SheetTitle>Top Sheet</SheetTitle>
+                <SheetDescription>
+                  This sheet slides in from the top.
+                </SheetDescription>
+              </SheetHeader>
+              <div className="py-6">
+                <p className="text-sm">
+                  Great for notifications and announcements.
+                </p>
               </div>
+            </SheetContent>
+          </Sheet>
 
-              <SheetFooter className="border-t pt-4">
-                <div className="flex w-full justify-between">
-                  <Button variant="ghost" size="sm">
-                    🌙 Dark Mode
-                  </Button>
-                  <SheetClose asChild>
-                    <Button variant="outline" size="sm">
-                      Close
-                    </Button>
-                  </SheetClose>
-                </div>
-              </SheetFooter>
+          <Sheet>
+            <SheetTrigger render={<Button variant="outline" />}>
+              Bottom Side
+            </SheetTrigger>
+            <SheetContent side="bottom">
+              <SheetHeader>
+                <SheetTitle>Bottom Sheet</SheetTitle>
+                <SheetDescription>
+                  This sheet slides in from the bottom.
+                </SheetDescription>
+              </SheetHeader>
+              <div className="py-6">
+                <p className="text-sm">
+                  Popular for mobile action sheets and quick actions.
+                </p>
+              </div>
             </SheetContent>
           </Sheet>
         </div>
-      </header>
+      </section>
 
-      {/* Mock App Content */}
-      <main className="p-6">
-        <div className="space-y-4">
-          <h2 className="text-xl font-semibold">Welcome to your Dashboard</h2>
-          <p className="text-muted-foreground">
-            This is a realistic example of how the Sheet component works in a
-            real application. Click the menu button in the header to see the
-            navigation sheet in action.
+      {/* With Footer */}
+      <section className="space-y-4">
+        <div>
+          <h3 className="text-lg font-semibold">With Footer Actions</h3>
+          <p className="text-muted-foreground text-sm">
+            Sheets with action buttons in the footer for form submissions.
           </p>
+        </div>
+        <Sheet>
+          <SheetTrigger render={<Button variant="outline" />}>
+            Edit Profile
+          </SheetTrigger>
+          <SheetContent>
+            <SheetHeader>
+              <SheetTitle>Edit Profile</SheetTitle>
+              <SheetDescription>
+                Make changes to your profile. Click save when you're done.
+              </SheetDescription>
+            </SheetHeader>
+            <div className="space-y-4 py-6">
+              <div className="space-y-2">
+                <Label htmlFor="name">Display Name</Label>
+                <Input id="name" defaultValue="Dan Romero" />
+              </div>
+              <div className="space-y-2">
+                <Label htmlFor="username">Username</Label>
+                <Input id="username" defaultValue="@dwr.eth" />
+              </div>
+              <div className="space-y-2">
+                <Label htmlFor="bio">Bio</Label>
+                <Input id="bio" defaultValue="Building Farcaster" />
+              </div>
+            </div>
+            <SheetFooter>
+              <SheetClose render={<Button variant="outline" />}>
+                Cancel
+              </SheetClose>
+              <Button>Save Changes</Button>
+            </SheetFooter>
+          </SheetContent>
+        </Sheet>
+      </section>
 
-          <div className="grid grid-cols-1 md:grid-cols-3 gap-4 mt-6">
-            <div className="p-4 border rounded-lg">
-              <h3 className="font-medium">Active Projects</h3>
-              <p className="text-2xl font-bold text-primary">12</p>
+      {/* Without Close Button */}
+      <section className="space-y-4">
+        <div>
+          <h3 className="text-lg font-semibold">Custom Close Handling</h3>
+          <p className="text-muted-foreground text-sm">
+            Sheets can hide the default close button for custom workflows.
+          </p>
+        </div>
+        <Sheet>
+          <SheetTrigger render={<Button variant="outline" />}>
+            Confirmation Required
+          </SheetTrigger>
+          <SheetContent showCloseButton={false}>
+            <SheetHeader>
+              <SheetTitle>Confirm Action</SheetTitle>
+              <SheetDescription>
+                This action requires confirmation. You must choose an option to
+                continue.
+              </SheetDescription>
+            </SheetHeader>
+            <div className="py-6">
+              <div className="bg-muted rounded-lg p-4">
+                <p className="text-sm">
+                  Are you sure you want to delete this item? This action cannot
+                  be undone.
+                </p>
+              </div>
             </div>
-            <div className="p-4 border rounded-lg">
-              <h3 className="font-medium">Completed Tasks</h3>
-              <p className="text-2xl font-bold text-green-600">48</p>
+            <SheetFooter>
+              <SheetClose render={<Button variant="outline" />}>
+                <XIcon data-icon="inline-start" />
+                Cancel
+              </SheetClose>
+              <SheetClose render={<Button variant="destructive" />}>
+                <CheckIcon data-icon="inline-start" />
+                Confirm Delete
+              </SheetClose>
+            </SheetFooter>
+          </SheetContent>
+        </Sheet>
+      </section>
+
+      {/* Nested Content */}
+      <section className="space-y-4">
+        <div>
+          <h3 className="text-lg font-semibold">Rich Content</h3>
+          <p className="text-muted-foreground text-sm">
+            Sheets can contain complex layouts with lists, forms, and mixed
+            content.
+          </p>
+        </div>
+        <Sheet>
+          <SheetTrigger render={<Button variant="outline" />}>
+            Notifications
+          </SheetTrigger>
+          <SheetContent className="p-0">
+            <SheetHeader className="border-b p-6">
+              <SheetTitle>Notifications</SheetTitle>
+              <SheetDescription>
+                You have 3 unread notifications
+              </SheetDescription>
+            </SheetHeader>
+
+            <div className="divide-y">
+              {[
+                {
+                  title: "New follower",
+                  description: "@alice started following you",
+                  time: "2m ago",
+                },
+                {
+                  title: "Cast liked",
+                  description: "@bob liked your cast about Farcaster",
+                  time: "1h ago",
+                },
+                {
+                  title: "Mention",
+                  description: "@charlie mentioned you in a cast",
+                  time: "3h ago",
+                },
+              ].map((notification, index) => (
+                <div
+                  key={index}
+                  className="hover:bg-muted p-4 transition-colors"
+                >
+                  <div className="flex gap-3">
+                    <div className="bg-primary/10 text-primary flex size-10 shrink-0 items-center justify-center rounded-full">
+                      <BellIcon className="size-5" />
+                    </div>
+                    <div className="flex-1 min-w-0">
+                      <p className="font-medium text-sm">
+                        {notification.title}
+                      </p>
+                      <p className="text-muted-foreground truncate text-sm">
+                        {notification.description}
+                      </p>
+                      <p className="text-muted-foreground mt-1 text-xs">
+                        {notification.time}
+                      </p>
+                    </div>
+                  </div>
+                </div>
+              ))}
             </div>
-            <div className="p-4 border rounded-lg">
-              <h3 className="font-medium">Team Members</h3>
-              <p className="text-2xl font-bold text-blue-600">8</p>
+
+            <div className="border-t p-4">
+              <Button variant="outline" className="w-full">
+                Mark All as Read
+              </Button>
             </div>
-          </div>
-        </div>
-      </main>
+          </SheetContent>
+        </Sheet>
+      </section>
     </div>
   ),
+};
+
+/**
+ * Frosted effect demonstration - Sheets use a translucent background (75% opacity)
+ * with backdrop blur (12px) creating a frosted glass effect. This story shows
+ * how the sheet appears over colorful content.
+ */
+export const Frosted: Story = {
   parameters: {
     layout: "fullscreen",
-    docs: {
-      description: {
-        story:
-          "A complete application example showing how the Sheet component integrates into a real dashboard interface. Features responsive design, user profile section, and organized navigation structure.",
-      },
-    },
+  },
+  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 gap-4 p-8">
+        <Sheet>
+          <SheetTrigger render={<Button />}>Open Sheet</SheetTrigger>
+          <SheetContent side="right">
+            <SheetHeader>
+              <SheetTitle>Frosted Sheet</SheetTitle>
+              <SheetDescription>
+                Notice the frosted glass effect - you can see the colorful
+                background blurred through the sheet panel.
+              </SheetDescription>
+            </SheetHeader>
+            <div className="p-4">
+              <p className="text-sm">
+                The sheet uses a translucent background with backdrop blur,
+                creating a modern frosted glass appearance that adapts to
+                whatever content is behind it.
+              </p>
+            </div>
+            <SheetFooter>
+              <SheetClose render={<Button variant="outline" />}>
+                Cancel
+              </SheetClose>
+              <Button>Save Changes</Button>
+            </SheetFooter>
+          </SheetContent>
+        </Sheet>
+      </div>
+    </div>
+  ),
+};
+
+/**
+ * Interactive playground for testing sheet props.
+ */
+export const Interactive: Story = {
+  render: (args) => (
+    <Sheet {...args}>
+      <SheetTrigger render={<Button variant="outline" />}>
+        Open Sheet
+      </SheetTrigger>
+      <SheetContent>
+        <SheetHeader>
+          <SheetTitle>Sheet Title</SheetTitle>
+          <SheetDescription>
+            This is a description of the sheet content. Use sheets for slide-in
+            panels and mobile navigation.
+          </SheetDescription>
+        </SheetHeader>
+        <div className="py-6">
+          <p className="text-sm">
+            Sheet content goes here. This component is perfect for mobile
+            navigation menus, filter panels, and side drawers.
+          </p>
+        </div>
+        <SheetFooter>
+          <SheetClose render={<Button variant="outline" />}>Cancel</SheetClose>
+          <Button>Save Changes</Button>
+        </SheetFooter>
+      </SheetContent>
+    </Sheet>
+  ),
+  args: {
+    defaultOpen: false,
   },
 };