@neynar/ui 0.3.1 → 0.5.0

package/src/components/ui/stories/alert-dialog.stories.tsx

@@ -1,12 +1,15 @@
-import type { Meta, StoryObj } from "@storybook/react-vite";
+import type { Meta, StoryObj } from "@storybook/react";
+import { fn } from "storybook/test";
 import {
-  AlertTriangle,
-  Trash2,
-  LogOut,
-  Download,
-  Settings,
-  FileText,
+  AlertTriangleIcon,
+  KeyIcon,
+  ShieldAlertIcon,
+  TrashIcon,
+  UserXIcon,
+  XCircleIcon,
 } from "lucide-react";
+import { useState } from "react";
+
 import {
   AlertDialog,
   AlertDialogAction,
@@ -15,504 +18,775 @@ import {
   AlertDialogDescription,
   AlertDialogFooter,
   AlertDialogHeader,
+  AlertDialogMedia,
   AlertDialogTitle,
   AlertDialogTrigger,
 } from "../alert-dialog";
 import { Button } from "../button";
 
-const meta = {
-  title: "Overlays/AlertDialog",
+const meta: Meta<typeof AlertDialog> = {
+  title: "Components/Overlays & Dialogs/AlertDialog",
   component: AlertDialog,
   parameters: {
     layout: "centered",
-    docs: {
-      description: {
-        component:
-          "A specialized modal dialog for critical confirmations and destructive actions. Unlike regular dialogs, alert dialogs cannot be dismissed by clicking outside and focus the action button by default. Built with Radix UI Alert Dialog primitives and styled with Tailwind CSS.",
-      },
+  },
+  args: {
+    onOpenChange: fn(),
+  },
+  argTypes: {
+    open: {
+      control: "boolean",
+      description: "Controlled open state",
+    },
+    defaultOpen: {
+      control: "boolean",
+      description: "Default open state (uncontrolled)",
     },
   },
-} satisfies Meta<typeof AlertDialog>;
+};
 
 export default meta;
-type Story = StoryObj<typeof meta>;
+type Story = StoryObj<typeof AlertDialog>;
 
 /**
- * Interactive playground for testing all AlertDialog features
- *
- * This story provides controls for testing different configurations and
- * interaction patterns with the AlertDialog component.
+ * Destructive Action Confirmations - Realistic scenarios showing AlertDialog
+ * in the context of the Neynar Dashboard with various destructive actions
+ * that require user confirmation.
  */
-export const Interactive: Story = {
-  render: () => (
-    <div className="flex gap-4 flex-wrap">
-      {/* Basic confirmation */}
-      <AlertDialog>
-        <AlertDialogTrigger asChild>
-          <Button variant="outline">Basic Dialog</Button>
-        </AlertDialogTrigger>
-        <AlertDialogContent>
-          <AlertDialogHeader>
-            <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
-            <AlertDialogDescription>
-              This action cannot be undone. This will permanently delete your
-              account and remove your data from our servers.
-            </AlertDialogDescription>
-          </AlertDialogHeader>
-          <AlertDialogFooter>
-            <AlertDialogCancel onClick={() => console.log("Dialog cancelled")}>
-              Cancel
-            </AlertDialogCancel>
-            <AlertDialogAction onClick={() => console.log("Dialog confirmed")}>
-              Continue
-            </AlertDialogAction>
-          </AlertDialogFooter>
-        </AlertDialogContent>
-      </AlertDialog>
+export const InContext: Story = {
+  parameters: {
+    layout: "padded",
+  },
+  render: () => {
+    function DestructiveActionsShowcase() {
+      const [deletedItems, setDeletedItems] = useState<string[]>([]);
+      const [revokedKeys, setRevokedKeys] = useState<string[]>([]);
 
-      {/* Destructive action */}
-      <AlertDialog>
-        <AlertDialogTrigger asChild>
-          <Button variant="destructive">
-            <Trash2 className="size-4" />
-            Delete
-          </Button>
-        </AlertDialogTrigger>
-        <AlertDialogContent>
-          <AlertDialogHeader>
-            <AlertDialogTitle className="flex items-center gap-2">
-              <AlertTriangle className="size-5 text-red-500" />
-              Delete Account
-            </AlertDialogTitle>
-            <AlertDialogDescription>
-              This action cannot be undone. This will permanently delete your
-              account, remove your data from our servers, and cancel any active
-              subscriptions.
-            </AlertDialogDescription>
-          </AlertDialogHeader>
-          <AlertDialogFooter>
-            <AlertDialogCancel>Cancel</AlertDialogCancel>
-            <AlertDialogAction className="bg-red-600 hover:bg-red-700 focus:ring-red-600">
-              Delete Account
-            </AlertDialogAction>
-          </AlertDialogFooter>
-        </AlertDialogContent>
-      </AlertDialog>
+      return (
+        <div className="w-full max-w-2xl space-y-8">
+          {/* Header */}
+          <div>
+            <h2 className="text-lg font-semibold">Alert Dialog Examples</h2>
+            <p className="text-muted-foreground text-sm">
+              Confirmation dialogs for destructive actions in the Neynar
+              Dashboard.
+            </p>
+          </div>
 
-      {/* Simple confirmation */}
-      <AlertDialog>
-        <AlertDialogTrigger asChild>
-          <Button variant="outline">
-            <LogOut className="size-4" />
-            Sign Out
-          </Button>
-        </AlertDialogTrigger>
-        <AlertDialogContent>
-          <AlertDialogHeader>
-            <AlertDialogTitle>Sign Out</AlertDialogTitle>
-            <AlertDialogDescription>
-              Are you sure you want to sign out of your account?
-            </AlertDialogDescription>
-          </AlertDialogHeader>
-          <AlertDialogFooter>
-            <AlertDialogCancel>Cancel</AlertDialogCancel>
-            <AlertDialogAction>Sign Out</AlertDialogAction>
-          </AlertDialogFooter>
-        </AlertDialogContent>
-      </AlertDialog>
-    </div>
-  ),
-  parameters: {
-    docs: {
-      description: {
-        story:
-          "Interactive examples showing common AlertDialog patterns. Check the Actions panel to see onClick events for the basic dialog.",
-      },
-    },
+          {/* API Key Management */}
+          <section className="space-y-4">
+            <h3 className="font-medium">API Key Management</h3>
+            <div className="border-border bg-card rounded-lg border p-4">
+              <div className="flex items-center justify-between">
+                <div className="flex items-center gap-3">
+                  <div className="bg-primary/10 text-primary rounded-md p-2">
+                    <KeyIcon className="size-5" />
+                  </div>
+                  <div>
+                    <p className="font-medium">Production Key</p>
+                    <code className="text-muted-foreground font-mono text-sm">
+                      neynar_sk_prod_****_****_8f3d
+                    </code>
+                    {revokedKeys.includes("prod-key") && (
+                      <p className="text-destructive text-xs mt-1">Revoked</p>
+                    )}
+                  </div>
+                </div>
+                <AlertDialog>
+                  <AlertDialogTrigger
+                    render={<Button variant="destructive" size="sm" />}
+                    disabled={revokedKeys.includes("prod-key")}
+                  >
+                    <TrashIcon data-icon="inline-start" />
+                    Revoke
+                  </AlertDialogTrigger>
+                  <AlertDialogContent size="default">
+                    <AlertDialogHeader>
+                      <AlertDialogMedia>
+                        <ShieldAlertIcon className="text-destructive" />
+                      </AlertDialogMedia>
+                      <AlertDialogTitle>Revoke API Key?</AlertDialogTitle>
+                      <AlertDialogDescription>
+                        This will immediately invalidate the API key. Any
+                        applications using this key will stop working. This
+                        action cannot be undone.
+                      </AlertDialogDescription>
+                    </AlertDialogHeader>
+                    <AlertDialogFooter>
+                      <AlertDialogCancel>Cancel</AlertDialogCancel>
+                      <AlertDialogAction
+                        variant="destructive"
+                        onClick={() =>
+                          setRevokedKeys([...revokedKeys, "prod-key"])
+                        }
+                      >
+                        Revoke Key
+                      </AlertDialogAction>
+                    </AlertDialogFooter>
+                  </AlertDialogContent>
+                </AlertDialog>
+              </div>
+            </div>
+          </section>
+
+          {/* Webhook Management */}
+          <section className="space-y-4">
+            <h3 className="font-medium">Webhook Management</h3>
+            <div className="border-border bg-card rounded-lg border p-4">
+              <div className="flex items-center justify-between">
+                <div>
+                  <p className="font-medium">Production Webhook</p>
+                  <code className="text-muted-foreground text-sm">
+                    https://api.example.com/webhooks/farcaster
+                  </code>
+                  {deletedItems.includes("webhook-1") && (
+                    <p className="text-destructive text-xs mt-1">Deleted</p>
+                  )}
+                </div>
+                <AlertDialog>
+                  <AlertDialogTrigger
+                    render={<Button variant="destructive" size="sm" />}
+                    disabled={deletedItems.includes("webhook-1")}
+                  >
+                    <TrashIcon data-icon="inline-start" />
+                    Delete
+                  </AlertDialogTrigger>
+                  <AlertDialogContent size="sm">
+                    <AlertDialogHeader>
+                      <AlertDialogMedia>
+                        <AlertTriangleIcon className="text-destructive" />
+                      </AlertDialogMedia>
+                      <AlertDialogTitle>Delete webhook?</AlertDialogTitle>
+                      <AlertDialogDescription>
+                        You will no longer receive events at this endpoint.
+                      </AlertDialogDescription>
+                    </AlertDialogHeader>
+                    <AlertDialogFooter>
+                      <AlertDialogCancel>Cancel</AlertDialogCancel>
+                      <AlertDialogAction
+                        variant="destructive"
+                        onClick={() =>
+                          setDeletedItems([...deletedItems, "webhook-1"])
+                        }
+                      >
+                        Delete
+                      </AlertDialogAction>
+                    </AlertDialogFooter>
+                  </AlertDialogContent>
+                </AlertDialog>
+              </div>
+            </div>
+          </section>
+
+          {/* Team Member Management */}
+          <section className="space-y-4">
+            <h3 className="font-medium">Team Member Management</h3>
+            <div className="border-border bg-card rounded-lg border p-4">
+              <div className="flex items-center justify-between">
+                <div className="flex items-center gap-3">
+                  <div className="bg-secondary flex size-10 items-center justify-center rounded-full font-medium">
+                    JD
+                  </div>
+                  <div>
+                    <p className="font-medium">Jane Developer</p>
+                    <p className="text-muted-foreground text-sm">
+                      jane@example.com
+                    </p>
+                    {deletedItems.includes("member-1") && (
+                      <p className="text-destructive text-xs mt-1">Removed</p>
+                    )}
+                  </div>
+                </div>
+                <AlertDialog>
+                  <AlertDialogTrigger
+                    render={<Button variant="destructive" size="sm" />}
+                    disabled={deletedItems.includes("member-1")}
+                  >
+                    <UserXIcon data-icon="inline-start" />
+                    Remove
+                  </AlertDialogTrigger>
+                  <AlertDialogContent>
+                    <AlertDialogHeader>
+                      <AlertDialogTitle>Remove team member?</AlertDialogTitle>
+                      <AlertDialogDescription>
+                        Jane Developer will immediately lose access to this
+                        workspace and all associated resources. They will be
+                        notified by email.
+                      </AlertDialogDescription>
+                    </AlertDialogHeader>
+                    <AlertDialogFooter>
+                      <AlertDialogCancel>Cancel</AlertDialogCancel>
+                      <AlertDialogAction
+                        variant="destructive"
+                        onClick={() =>
+                          setDeletedItems([...deletedItems, "member-1"])
+                        }
+                      >
+                        Remove Member
+                      </AlertDialogAction>
+                    </AlertDialogFooter>
+                  </AlertDialogContent>
+                </AlertDialog>
+              </div>
+            </div>
+          </section>
+
+          {/* Account Deletion */}
+          <section className="space-y-4">
+            <h3 className="font-medium">Account Management</h3>
+            <div className="border-destructive/50 bg-destructive/5 rounded-lg border p-4">
+              <div className="flex items-center justify-between">
+                <div>
+                  <p className="font-medium">Delete Account</p>
+                  <p className="text-muted-foreground text-sm">
+                    Permanently delete your Neynar account and all data
+                  </p>
+                </div>
+                <AlertDialog>
+                  <AlertDialogTrigger
+                    render={<Button variant="destructive" size="sm" />}
+                  >
+                    <XCircleIcon data-icon="inline-start" />
+                    Delete Account
+                  </AlertDialogTrigger>
+                  <AlertDialogContent size="default">
+                    <AlertDialogHeader>
+                      <AlertDialogMedia>
+                        <XCircleIcon className="text-destructive" />
+                      </AlertDialogMedia>
+                      <AlertDialogTitle>Delete your account?</AlertDialogTitle>
+                      <AlertDialogDescription>
+                        This will permanently delete your account, all API keys,
+                        webhooks, usage data, and team workspaces. This action
+                        cannot be undone and you will not be able to recover any
+                        data.
+                      </AlertDialogDescription>
+                    </AlertDialogHeader>
+                    <AlertDialogFooter>
+                      <AlertDialogCancel>Cancel</AlertDialogCancel>
+                      <AlertDialogAction variant="destructive">
+                        Delete Account
+                      </AlertDialogAction>
+                    </AlertDialogFooter>
+                  </AlertDialogContent>
+                </AlertDialog>
+              </div>
+            </div>
+          </section>
+        </div>
+      );
+    }
+
+    return <DestructiveActionsShowcase />;
   },
 };
 
 /**
- * Showcase of different AlertDialog variants and styling options
- *
- * Demonstrates various visual treatments and content patterns for different
- * use cases including destructive actions, confirmations, and custom styling.
+ * Complete design system reference showing all AlertDialog variants,
+ * sizes, compositions, and usage patterns.
  */
 export const Variants: Story = {
+  parameters: {
+    layout: "padded",
+  },
   render: () => (
-    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
-      {/* Standard confirmation */}
-      <div className="space-y-2">
-        <h3 className="text-sm font-medium">Standard Confirmation</h3>
-        <AlertDialog>
-          <AlertDialogTrigger asChild>
-            <Button variant="outline" className="w-full">
-              Show Dialog
-            </Button>
-          </AlertDialogTrigger>
-          <AlertDialogContent>
-            <AlertDialogHeader>
-              <AlertDialogTitle>Confirm Action</AlertDialogTitle>
-              <AlertDialogDescription>
-                Are you sure you want to proceed with this action?
-              </AlertDialogDescription>
-            </AlertDialogHeader>
-            <AlertDialogFooter>
-              <AlertDialogCancel>Cancel</AlertDialogCancel>
-              <AlertDialogAction>Continue</AlertDialogAction>
-            </AlertDialogFooter>
-          </AlertDialogContent>
-        </AlertDialog>
-      </div>
+    <div className="w-full max-w-4xl space-y-10">
+      {/* Basic Variants */}
+      <section className="space-y-4">
+        <div>
+          <h3 className="text-lg font-semibold">Basic Variants</h3>
+          <p className="text-muted-foreground text-sm">
+            Alert dialogs with different action types and purposes.
+          </p>
+        </div>
+        <div className="flex flex-wrap gap-3">
+          <AlertDialog>
+            <AlertDialogTrigger render={<Button variant="destructive" />}>
+              Destructive Action
+            </AlertDialogTrigger>
+            <AlertDialogContent>
+              <AlertDialogHeader>
+                <AlertDialogTitle>Delete this item?</AlertDialogTitle>
+                <AlertDialogDescription>
+                  This action cannot be undone. The item will be permanently
+                  removed.
+                </AlertDialogDescription>
+              </AlertDialogHeader>
+              <AlertDialogFooter>
+                <AlertDialogCancel>Cancel</AlertDialogCancel>
+                <AlertDialogAction variant="destructive">
+                  Delete
+                </AlertDialogAction>
+              </AlertDialogFooter>
+            </AlertDialogContent>
+          </AlertDialog>
 
-      {/* Destructive action */}
-      <div className="space-y-2">
-        <h3 className="text-sm font-medium">Destructive Action</h3>
-        <AlertDialog>
-          <AlertDialogTrigger asChild>
-            <Button variant="destructive" className="w-full">
-              <Trash2 className="size-4" />
-              Delete
-            </Button>
-          </AlertDialogTrigger>
-          <AlertDialogContent>
-            <AlertDialogHeader>
-              <AlertDialogTitle className="flex items-center gap-2">
-                <AlertTriangle className="size-5 text-red-500" />
-                Delete Item
-              </AlertDialogTitle>
-              <AlertDialogDescription>
-                This action cannot be undone. The item will be permanently
-                removed.
-              </AlertDialogDescription>
-            </AlertDialogHeader>
-            <AlertDialogFooter>
-              <AlertDialogCancel>Cancel</AlertDialogCancel>
-              <AlertDialogAction className="bg-red-600 hover:bg-red-700">
-                Delete
-              </AlertDialogAction>
-            </AlertDialogFooter>
-          </AlertDialogContent>
-        </AlertDialog>
-      </div>
+          <AlertDialog>
+            <AlertDialogTrigger render={<Button />}>
+              Confirm Action
+            </AlertDialogTrigger>
+            <AlertDialogContent>
+              <AlertDialogHeader>
+                <AlertDialogTitle>Confirm your choice</AlertDialogTitle>
+                <AlertDialogDescription>
+                  Please confirm you want to proceed with this action.
+                </AlertDialogDescription>
+              </AlertDialogHeader>
+              <AlertDialogFooter>
+                <AlertDialogCancel>Cancel</AlertDialogCancel>
+                <AlertDialogAction>Continue</AlertDialogAction>
+              </AlertDialogFooter>
+            </AlertDialogContent>
+          </AlertDialog>
 
-      {/* Without description */}
-      <div className="space-y-2">
-        <h3 className="text-sm font-medium">Title Only</h3>
-        <AlertDialog>
-          <AlertDialogTrigger asChild>
-            <Button variant="outline" className="w-full">
-              Quick Confirm
-            </Button>
-          </AlertDialogTrigger>
-          <AlertDialogContent>
-            <AlertDialogHeader>
-              <AlertDialogTitle>Quick Confirmation</AlertDialogTitle>
-            </AlertDialogHeader>
-            <AlertDialogFooter>
-              <AlertDialogCancel>Cancel</AlertDialogCancel>
-              <AlertDialogAction>Confirm</AlertDialogAction>
-            </AlertDialogFooter>
-          </AlertDialogContent>
-        </AlertDialog>
-      </div>
+          <AlertDialog>
+            <AlertDialogTrigger render={<Button variant="outline" />}>
+              Warning Dialog
+            </AlertDialogTrigger>
+            <AlertDialogContent>
+              <AlertDialogHeader>
+                <AlertDialogTitle>Are you sure?</AlertDialogTitle>
+                <AlertDialogDescription>
+                  This action may have unintended consequences. Please review
+                  before continuing.
+                </AlertDialogDescription>
+              </AlertDialogHeader>
+              <AlertDialogFooter>
+                <AlertDialogCancel>Go Back</AlertDialogCancel>
+                <AlertDialogAction>I Understand</AlertDialogAction>
+              </AlertDialogFooter>
+            </AlertDialogContent>
+          </AlertDialog>
+        </div>
+      </section>
 
-      {/* Custom button styling */}
-      <div className="space-y-2">
-        <h3 className="text-sm font-medium">Custom Styling</h3>
-        <AlertDialog>
-          <AlertDialogTrigger asChild>
-            <Button variant="outline" className="w-full">
-              Save Changes
-            </Button>
-          </AlertDialogTrigger>
-          <AlertDialogContent>
-            <AlertDialogHeader>
-              <AlertDialogTitle>Save Changes?</AlertDialogTitle>
-              <AlertDialogDescription>
-                You have unsaved changes. Save before leaving?
-              </AlertDialogDescription>
-            </AlertDialogHeader>
-            <AlertDialogFooter>
-              <AlertDialogCancel>Don&apos;t Save</AlertDialogCancel>
-              <AlertDialogAction className="bg-blue-600 hover:bg-blue-700">
-                Save Changes
-              </AlertDialogAction>
-            </AlertDialogFooter>
-          </AlertDialogContent>
-        </AlertDialog>
-      </div>
+      {/* Sizes */}
+      <section className="space-y-4">
+        <div>
+          <h3 className="text-lg font-semibold">Sizes</h3>
+          <p className="text-muted-foreground text-sm">
+            Different sizes for different content lengths and contexts.
+          </p>
+        </div>
+        <div className="flex flex-wrap gap-3">
+          <AlertDialog>
+            <AlertDialogTrigger render={<Button variant="outline" />}>
+              Small Dialog
+            </AlertDialogTrigger>
+            <AlertDialogContent size="sm">
+              <AlertDialogHeader>
+                <AlertDialogTitle>Quick confirmation</AlertDialogTitle>
+                <AlertDialogDescription>
+                  Are you sure you want to do this?
+                </AlertDialogDescription>
+              </AlertDialogHeader>
+              <AlertDialogFooter>
+                <AlertDialogCancel>No</AlertDialogCancel>
+                <AlertDialogAction>Yes</AlertDialogAction>
+              </AlertDialogFooter>
+            </AlertDialogContent>
+          </AlertDialog>
 
-      {/* Long content */}
-      <div className="space-y-2">
-        <h3 className="text-sm font-medium">Detailed Explanation</h3>
-        <AlertDialog>
-          <AlertDialogTrigger asChild>
-            <Button variant="outline" className="w-full">
-              <Settings className="size-4" />
-              Reset Settings
-            </Button>
-          </AlertDialogTrigger>
-          <AlertDialogContent>
-            <AlertDialogHeader>
-              <AlertDialogTitle>Reset All Settings</AlertDialogTitle>
-              <AlertDialogDescription>
-                This will reset all application settings to defaults including:
-                • Theme preferences • Notification settings • Privacy
-                preferences • Display options Your data will not be affected.
-              </AlertDialogDescription>
-            </AlertDialogHeader>
-            <AlertDialogFooter>
-              <AlertDialogCancel>Cancel</AlertDialogCancel>
-              <AlertDialogAction>Reset Settings</AlertDialogAction>
-            </AlertDialogFooter>
-          </AlertDialogContent>
-        </AlertDialog>
-      </div>
+          <AlertDialog>
+            <AlertDialogTrigger render={<Button variant="outline" />}>
+              Default Dialog
+            </AlertDialogTrigger>
+            <AlertDialogContent size="default">
+              <AlertDialogHeader>
+                <AlertDialogTitle>
+                  Standard confirmation dialog
+                </AlertDialogTitle>
+                <AlertDialogDescription>
+                  This is the default size alert dialog with room for more
+                  detailed descriptions and content. It works well for most use
+                  cases.
+                </AlertDialogDescription>
+              </AlertDialogHeader>
+              <AlertDialogFooter>
+                <AlertDialogCancel>Cancel</AlertDialogCancel>
+                <AlertDialogAction>Continue</AlertDialogAction>
+              </AlertDialogFooter>
+            </AlertDialogContent>
+          </AlertDialog>
+        </div>
+      </section>
 
-      {/* Information/Download */}
-      <div className="space-y-2">
-        <h3 className="text-sm font-medium">Information Action</h3>
-        <AlertDialog>
-          <AlertDialogTrigger asChild>
-            <Button className="w-full">
-              <Download className="size-4" />
-              Download
-            </Button>
-          </AlertDialogTrigger>
-          <AlertDialogContent>
-            <AlertDialogHeader>
-              <AlertDialogTitle>Download Your Data</AlertDialogTitle>
-              <AlertDialogDescription>
-                This will prepare a ZIP file with all your data. You&apos;ll
-                receive an email when it&apos;s ready.
-              </AlertDialogDescription>
-            </AlertDialogHeader>
-            <AlertDialogFooter>
-              <AlertDialogCancel>Cancel</AlertDialogCancel>
-              <AlertDialogAction>Start Download</AlertDialogAction>
-            </AlertDialogFooter>
-          </AlertDialogContent>
-        </AlertDialog>
-      </div>
+      {/* With Media Icons */}
+      <section className="space-y-4">
+        <div>
+          <h3 className="text-lg font-semibold">With Media Icons</h3>
+          <p className="text-muted-foreground text-sm">
+            Alert dialogs with visual indicators for different types of alerts.
+          </p>
+        </div>
+        <div className="flex flex-wrap gap-3">
+          <AlertDialog>
+            <AlertDialogTrigger render={<Button variant="destructive" />}>
+              Destructive with Icon
+            </AlertDialogTrigger>
+            <AlertDialogContent>
+              <AlertDialogHeader>
+                <AlertDialogMedia>
+                  <TrashIcon className="text-destructive" />
+                </AlertDialogMedia>
+                <AlertDialogTitle>Delete permanently?</AlertDialogTitle>
+                <AlertDialogDescription>
+                  This item will be permanently deleted and cannot be recovered.
+                </AlertDialogDescription>
+              </AlertDialogHeader>
+              <AlertDialogFooter>
+                <AlertDialogCancel>Cancel</AlertDialogCancel>
+                <AlertDialogAction variant="destructive">
+                  Delete
+                </AlertDialogAction>
+              </AlertDialogFooter>
+            </AlertDialogContent>
+          </AlertDialog>
+
+          <AlertDialog>
+            <AlertDialogTrigger render={<Button variant="outline" />}>
+              Warning with Icon
+            </AlertDialogTrigger>
+            <AlertDialogContent>
+              <AlertDialogHeader>
+                <AlertDialogMedia>
+                  <AlertTriangleIcon className="text-yellow-500" />
+                </AlertDialogMedia>
+                <AlertDialogTitle>Warning: Potential issues</AlertDialogTitle>
+                <AlertDialogDescription>
+                  This action may cause problems with your configuration.
+                  Proceed with caution.
+                </AlertDialogDescription>
+              </AlertDialogHeader>
+              <AlertDialogFooter>
+                <AlertDialogCancel>Cancel</AlertDialogCancel>
+                <AlertDialogAction>Proceed Anyway</AlertDialogAction>
+              </AlertDialogFooter>
+            </AlertDialogContent>
+          </AlertDialog>
+
+          <AlertDialog>
+            <AlertDialogTrigger render={<Button variant="outline" />}>
+              Security Alert
+            </AlertDialogTrigger>
+            <AlertDialogContent>
+              <AlertDialogHeader>
+                <AlertDialogMedia>
+                  <ShieldAlertIcon className="text-destructive" />
+                </AlertDialogMedia>
+                <AlertDialogTitle>
+                  Security confirmation required
+                </AlertDialogTitle>
+                <AlertDialogDescription>
+                  This is a sensitive operation that affects your account
+                  security. Please confirm you want to continue.
+                </AlertDialogDescription>
+              </AlertDialogHeader>
+              <AlertDialogFooter>
+                <AlertDialogCancel>Cancel</AlertDialogCancel>
+                <AlertDialogAction variant="destructive">
+                  Confirm
+                </AlertDialogAction>
+              </AlertDialogFooter>
+            </AlertDialogContent>
+          </AlertDialog>
+        </div>
+      </section>
+
+      {/* Button Variants */}
+      <section className="space-y-4">
+        <div>
+          <h3 className="text-lg font-semibold">Action Button Variants</h3>
+          <p className="text-muted-foreground text-sm">
+            Different button styles for actions and cancel buttons.
+          </p>
+        </div>
+        <div className="flex flex-wrap gap-3">
+          <AlertDialog>
+            <AlertDialogTrigger render={<Button variant="destructive" />}>
+              Destructive Action
+            </AlertDialogTrigger>
+            <AlertDialogContent>
+              <AlertDialogHeader>
+                <AlertDialogTitle>Destructive action</AlertDialogTitle>
+                <AlertDialogDescription>
+                  This uses a destructive button variant for the action.
+                </AlertDialogDescription>
+              </AlertDialogHeader>
+              <AlertDialogFooter>
+                <AlertDialogCancel>Cancel</AlertDialogCancel>
+                <AlertDialogAction variant="destructive">
+                  Delete
+                </AlertDialogAction>
+              </AlertDialogFooter>
+            </AlertDialogContent>
+          </AlertDialog>
+
+          <AlertDialog>
+            <AlertDialogTrigger render={<Button />}>
+              Primary Action
+            </AlertDialogTrigger>
+            <AlertDialogContent>
+              <AlertDialogHeader>
+                <AlertDialogTitle>Primary action</AlertDialogTitle>
+                <AlertDialogDescription>
+                  This uses the default button variant for the action.
+                </AlertDialogDescription>
+              </AlertDialogHeader>
+              <AlertDialogFooter>
+                <AlertDialogCancel>Cancel</AlertDialogCancel>
+                <AlertDialogAction>Continue</AlertDialogAction>
+              </AlertDialogFooter>
+            </AlertDialogContent>
+          </AlertDialog>
+
+          <AlertDialog>
+            <AlertDialogTrigger render={<Button variant="outline" />}>
+              Secondary Action
+            </AlertDialogTrigger>
+            <AlertDialogContent>
+              <AlertDialogHeader>
+                <AlertDialogTitle>Secondary action</AlertDialogTitle>
+                <AlertDialogDescription>
+                  This uses a secondary button variant for the action.
+                </AlertDialogDescription>
+              </AlertDialogHeader>
+              <AlertDialogFooter>
+                <AlertDialogCancel>Cancel</AlertDialogCancel>
+                <AlertDialogAction variant="secondary">
+                  Confirm
+                </AlertDialogAction>
+              </AlertDialogFooter>
+            </AlertDialogContent>
+          </AlertDialog>
+        </div>
+      </section>
+
+      {/* Complex Content */}
+      <section className="space-y-4">
+        <div>
+          <h3 className="text-lg font-semibold">Complex Content</h3>
+          <p className="text-muted-foreground text-sm">
+            Alert dialogs with lists, formatted text, and detailed content.
+          </p>
+        </div>
+        <div className="flex flex-wrap gap-3">
+          <AlertDialog>
+            <AlertDialogTrigger render={<Button variant="destructive" />}>
+              Delete Multiple Items
+            </AlertDialogTrigger>
+            <AlertDialogContent>
+              <AlertDialogHeader>
+                <AlertDialogMedia>
+                  <TrashIcon className="text-destructive" />
+                </AlertDialogMedia>
+                <AlertDialogTitle>Delete 3 items?</AlertDialogTitle>
+                <AlertDialogDescription>
+                  The following items will be permanently deleted:
+                  <ul className="mt-2 list-inside list-disc space-y-1">
+                    <li>API Key: prod_****_8f3d</li>
+                    <li>Webhook: https://api.example.com/hook</li>
+                    <li>Team Member: jane@example.com</li>
+                  </ul>
+                  <p className="mt-2">This action cannot be undone.</p>
+                </AlertDialogDescription>
+              </AlertDialogHeader>
+              <AlertDialogFooter>
+                <AlertDialogCancel>Cancel</AlertDialogCancel>
+                <AlertDialogAction variant="destructive">
+                  Delete All
+                </AlertDialogAction>
+              </AlertDialogFooter>
+            </AlertDialogContent>
+          </AlertDialog>
+
+          <AlertDialog>
+            <AlertDialogTrigger render={<Button variant="outline" />}>
+              Terms & Conditions
+            </AlertDialogTrigger>
+            <AlertDialogContent>
+              <AlertDialogHeader>
+                <AlertDialogTitle>Accept terms and conditions</AlertDialogTitle>
+                <AlertDialogDescription>
+                  By continuing, you agree to:
+                  <ul className="mt-2 list-inside list-disc space-y-1">
+                    <li>Our Terms of Service</li>
+                    <li>Privacy Policy</li>
+                    <li>Data Processing Agreement</li>
+                  </ul>
+                  <p className="mt-2">
+                    You can review these documents in your{" "}
+                    <a href="#" className="underline">
+                      account settings
+                    </a>
+                    .
+                  </p>
+                </AlertDialogDescription>
+              </AlertDialogHeader>
+              <AlertDialogFooter>
+                <AlertDialogCancel>Decline</AlertDialogCancel>
+                <AlertDialogAction>Accept</AlertDialogAction>
+              </AlertDialogFooter>
+            </AlertDialogContent>
+          </AlertDialog>
+        </div>
+      </section>
+
+      {/* Controlled State */}
+      <section className="space-y-4">
+        <div>
+          <h3 className="text-lg font-semibold">Controlled State</h3>
+          <p className="text-muted-foreground text-sm">
+            Alert dialog with controlled open state for programmatic control.
+          </p>
+        </div>
+        <ControlledAlertDialog />
+      </section>
     </div>
   ),
-  parameters: {
-    docs: {
-      description: {
-        story:
-          "Collection of AlertDialog variants showing different styling patterns, content lengths, and use cases for various scenarios.",
-      },
-    },
-  },
 };
 
 /**
- * Real-world usage example in a realistic application context
- *
- * Shows how AlertDialog integrates within a typical application interface
- * with realistic content and multiple interaction points.
+ * Frosted alert dialog effect with backdrop blur over colorful backgrounds.
+ * AlertDialogs use 75% opacity and backdrop-blur for a frosted glass appearance.
  */
-export const InContext: Story = {
+export const Frosted: Story = {
+  parameters: {
+    layout: "fullscreen",
+  },
   render: () => (
-    <div className="max-w-2xl mx-auto p-6 space-y-6">
-      {/* Simulated application header */}
-      <div className="border-b pb-4">
-        <h1 className="text-2xl font-bold">Account Settings</h1>
-        <p className="text-muted-foreground">
-          Manage your account preferences and data
-        </p>
-      </div>
-
-      {/* Simulated settings sections */}
-      <div className="space-y-6">
-        {/* Profile section */}
-        <div className="border rounded-lg p-4">
-          <h2 className="text-lg font-semibold mb-3">Profile Information</h2>
-          <div className="space-y-3">
-            <div className="flex items-center justify-between">
-              <div>
-                <p className="font-medium">Export Account Data</p>
-                <p className="text-sm text-muted-foreground">
-                  Download all your account information
-                </p>
-              </div>
-              <AlertDialog>
-                <AlertDialogTrigger asChild>
-                  <Button variant="outline">
-                    <Download className="size-4" />
-                    Export Data
-                  </Button>
-                </AlertDialogTrigger>
-                <AlertDialogContent>
-                  <AlertDialogHeader>
-                    <AlertDialogTitle>Export Account Data</AlertDialogTitle>
-                    <AlertDialogDescription>
-                      We&apos;ll prepare a comprehensive export of your account
-                      data including profile information, preferences, and
-                      activity history. This may take a few minutes to process.
-                      You&apos;ll receive an email notification when your export
-                      is ready for download.
-                    </AlertDialogDescription>
-                  </AlertDialogHeader>
-                  <AlertDialogFooter>
-                    <AlertDialogCancel>Cancel</AlertDialogCancel>
-                    <AlertDialogAction>Start Export</AlertDialogAction>
-                  </AlertDialogFooter>
-                </AlertDialogContent>
-              </AlertDialog>
-            </div>
+    <div className="relative min-h-screen w-full overflow-hidden">
+      {/* Busy colorful background */}
+      <div className="absolute inset-0 bg-gradient-to-br from-indigo-500 via-purple-500 to-pink-500 p-8">
+        <div className="grid grid-cols-4 gap-4">
+          <div className="rounded-lg bg-yellow-400 p-4 text-yellow-900">
+            <p className="font-bold">Yellow Block</p>
+            <p className="text-sm">Lorem ipsum dolor sit amet</p>
           </div>
-        </div>
-
-        {/* Danger zone */}
-        <div className="bg-card text-card-foreground border border-destructive/20 rounded-lg p-4">
-          <h2 className="text-lg font-semibold mb-3 text-destructive">
-            Danger Zone
-          </h2>
-          <div className="space-y-4">
-            <div className="flex items-center justify-between">
-              <div>
-                <p className="font-medium text-destructive">
-                  Reset All Settings
-                </p>
-                <p className="text-sm text-muted-foreground">
-                  Return all preferences to default values
-                </p>
-              </div>
-              <AlertDialog>
-                <AlertDialogTrigger asChild>
-                  <Button
-                    variant="outline"
-                    className="border-destructive/30 text-destructive hover:bg-destructive/10"
-                  >
-                    <Settings className="size-4" />
-                    Reset Settings
-                  </Button>
-                </AlertDialogTrigger>
-                <AlertDialogContent>
-                  <AlertDialogHeader>
-                    <AlertDialogTitle>Reset All Settings</AlertDialogTitle>
-                    <AlertDialogDescription>
-                      This will reset all your application settings to their
-                      default values, including: • Theme and display preferences
-                      • Notification settings • Privacy and security preferences
-                      • Language and region settings Your account data, saved
-                      content, and personal information will not be affected.
-                      You can reconfigure these settings at any time.
-                    </AlertDialogDescription>
-                  </AlertDialogHeader>
-                  <AlertDialogFooter>
-                    <AlertDialogCancel>Keep Current Settings</AlertDialogCancel>
-                    <AlertDialogAction className="bg-orange-600 hover:bg-orange-700">
-                      Reset All Settings
-                    </AlertDialogAction>
-                  </AlertDialogFooter>
-                </AlertDialogContent>
-              </AlertDialog>
-            </div>
-
-            <div className="flex items-center justify-between pt-4 border-t border-border">
-              <div>
-                <p className="font-medium text-destructive">Delete Account</p>
-                <p className="text-sm text-muted-foreground">
-                  Permanently delete your account and all data
-                </p>
-              </div>
-              <AlertDialog>
-                <AlertDialogTrigger asChild>
-                  <Button variant="destructive">
-                    <Trash2 className="size-4" />
-                    Delete Account
-                  </Button>
-                </AlertDialogTrigger>
-                <AlertDialogContent>
-                  <AlertDialogHeader>
-                    <AlertDialogTitle className="flex items-center gap-2">
-                      <AlertTriangle className="size-5 text-red-500" />
-                      Delete Account Permanently
-                    </AlertDialogTitle>
-                    <AlertDialogDescription>
-                      This action cannot be undone. This will permanently delete
-                      your account, remove all your data from our servers, and
-                      cancel any active subscriptions. All of your projects,
-                      files, and account information will be permanently lost.
-                      If you&apos;re sure you want to proceed, type
-                      &quot;DELETE&quot; in the confirmation field that will
-                      appear.
-                    </AlertDialogDescription>
-                  </AlertDialogHeader>
-                  <AlertDialogFooter>
-                    <AlertDialogCancel>Keep My Account</AlertDialogCancel>
-                    <AlertDialogAction className="bg-red-600 hover:bg-red-700 focus:ring-red-600">
-                      Yes, Delete My Account
-                    </AlertDialogAction>
-                  </AlertDialogFooter>
-                </AlertDialogContent>
-              </AlertDialog>
-            </div>
+          <div className="rounded-lg bg-green-400 p-4 text-green-900">
+            <p className="font-bold">Green Block</p>
+            <p className="text-sm">Consectetur adipiscing elit</p>
+          </div>
+          <div className="rounded-lg bg-blue-400 p-4 text-blue-900">
+            <p className="font-bold">Blue Block</p>
+            <p className="text-sm">Sed do eiusmod tempor</p>
+          </div>
+          <div className="rounded-lg bg-red-400 p-4 text-red-900">
+            <p className="font-bold">Red Block</p>
+            <p className="text-sm">Incididunt ut labore</p>
           </div>
         </div>
-
-        {/* Quick actions */}
-        <div className="border rounded-lg p-4">
-          <h2 className="text-lg font-semibold mb-3">Quick Actions</h2>
-          <div className="flex gap-3 flex-wrap">
-            <AlertDialog>
-              <AlertDialogTrigger asChild>
-                <Button variant="outline">
-                  <LogOut className="size-4" />
-                  Sign Out
-                </Button>
-              </AlertDialogTrigger>
-              <AlertDialogContent>
-                <AlertDialogHeader>
-                  <AlertDialogTitle>Sign Out</AlertDialogTitle>
-                  <AlertDialogDescription>
-                    Are you sure you want to sign out of your account?
-                    You&apos;ll need to sign in again to access your data.
-                  </AlertDialogDescription>
-                </AlertDialogHeader>
-                <AlertDialogFooter>
-                  <AlertDialogCancel>Stay Signed In</AlertDialogCancel>
-                  <AlertDialogAction>Sign Out</AlertDialogAction>
-                </AlertDialogFooter>
-              </AlertDialogContent>
-            </AlertDialog>
-
-            <AlertDialog>
-              <AlertDialogTrigger asChild>
-                <Button variant="outline">
-                  <FileText className="size-4" />
-                  Clear Cache
-                </Button>
-              </AlertDialogTrigger>
-              <AlertDialogContent>
-                <AlertDialogHeader>
-                  <AlertDialogTitle>Clear Application Cache</AlertDialogTitle>
-                  <AlertDialogDescription>
-                    This will clear all cached data and temporary files. You may
-                    need to reload some content, but this can help resolve
-                    performance issues.
-                  </AlertDialogDescription>
-                </AlertDialogHeader>
-                <AlertDialogFooter>
-                  <AlertDialogCancel>Cancel</AlertDialogCancel>
-                  <AlertDialogAction>Clear Cache</AlertDialogAction>
-                </AlertDialogFooter>
-              </AlertDialogContent>
-            </AlertDialog>
+        <div className="mt-8 grid grid-cols-2 gap-6 text-white">
+          <div>
+            <h2 className="text-2xl font-bold">Background Content</h2>
+            <p className="mt-2">
+              This content is behind the alert dialog. The frosted glass effect
+              blurs it while keeping it visible.
+            </p>
+          </div>
+          <div>
+            <h2 className="text-2xl font-bold">More Content</h2>
+            <p className="mt-2">
+              Customize the blur with --surface-blur and opacity with --popover
+              tokens.
+            </p>
           </div>
         </div>
       </div>
+
+      {/* Alert Dialog - defaultOpen */}
+      <AlertDialog defaultOpen>
+        <AlertDialogTrigger
+          render={<Button className="absolute top-4 left-4 z-10" />}
+        >
+          Open Alert
+        </AlertDialogTrigger>
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogMedia>
+              <ShieldAlertIcon className="text-destructive" />
+            </AlertDialogMedia>
+            <AlertDialogTitle>Frosted Glass Alert</AlertDialogTitle>
+            <AlertDialogDescription>
+              Notice how you can see the colorful background through the alert
+              dialog. The 75% opacity + 12px blur creates a beautiful frosted
+              glass effect.
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel>Cancel</AlertDialogCancel>
+            <AlertDialogAction>Continue</AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
     </div>
   ),
-  parameters: {
-    docs: {
-      description: {
-        story:
-          "Realistic application context showing AlertDialog integration within a settings page. Demonstrates proper usage patterns for different types of confirmations including data exports, settings resets, account deletion, and quick actions.",
-      },
-    },
-  },
 };
+
+/**
+ * Interactive playground for testing AlertDialog props.
+ */
+export const Interactive: Story = {
+  render: (args) => (
+    <AlertDialog {...args}>
+      <AlertDialogTrigger render={<Button variant="destructive" />}>
+        Delete Item
+      </AlertDialogTrigger>
+      <AlertDialogContent>
+        <AlertDialogHeader>
+          <AlertDialogTitle>Are you sure?</AlertDialogTitle>
+          <AlertDialogDescription>
+            This action cannot be undone. This will permanently delete the item.
+          </AlertDialogDescription>
+        </AlertDialogHeader>
+        <AlertDialogFooter>
+          <AlertDialogCancel>Cancel</AlertDialogCancel>
+          <AlertDialogAction variant="destructive">Delete</AlertDialogAction>
+        </AlertDialogFooter>
+      </AlertDialogContent>
+    </AlertDialog>
+  ),
+};
+
+function ControlledAlertDialog() {
+  const [open, setOpen] = useState(false);
+  const [confirmed, setConfirmed] = useState(false);
+
+  return (
+    <div className="space-y-4">
+      <div className="flex gap-2">
+        <Button onClick={() => setOpen(true)}>Open Alert Dialog</Button>
+        {confirmed && (
+          <p className="text-muted-foreground flex items-center text-sm">
+            Action confirmed!
+          </p>
+        )}
+      </div>
+      <AlertDialog open={open} onOpenChange={setOpen}>
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>Controlled alert dialog</AlertDialogTitle>
+            <AlertDialogDescription>
+              This dialog's open state is controlled externally. The parent
+              component manages when it opens and closes.
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel onClick={() => setOpen(false)}>
+              Cancel
+            </AlertDialogCancel>
+            <AlertDialogAction
+              onClick={() => {
+                setConfirmed(true);
+                setOpen(false);
+                setTimeout(() => setConfirmed(false), 3000);
+              }}
+            >
+              Confirm
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+    </div>
+  );
+}