@neynar/ui 0.3.1 → 0.5.0

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

@@ -1,6 +1,16 @@
-import type { Meta, StoryObj } from "@storybook/react-vite";
-import React from "react";
-import { Copy, Share2, Mail, MessageSquare } from "lucide-react";
+import type { Meta, StoryObj } from "@storybook/react";
+import {
+  AlertTriangleIcon,
+  CopyIcon,
+  KeyIcon,
+  Loader2Icon,
+  MailIcon,
+  PlusIcon,
+  TrashIcon,
+  UserIcon,
+} from "lucide-react";
+import { useState } from "react";
+
 import {
   Dialog,
   DialogClose,
@@ -14,521 +24,668 @@ import {
 import { Button } from "../button";
 import { Input } from "../input";
 import { Label } from "../label";
-import { Textarea } from "../textarea";
 
-const meta = {
-  title: "Overlays/Dialog",
+const meta: Meta<typeof Dialog> = {
+  title: "Components/Overlays & Dialogs/Dialog",
   component: Dialog,
   parameters: {
     layout: "centered",
-    docs: {
-      description: {
-        component:
-          "A modal dialog component built on Radix UI Dialog. Displays content in a layer above the main content, with customizable animations and focus management. Used for critical interactions, confirmations, or detailed information that requires focus.",
-      },
-    },
   },
   argTypes: {
-    // Dialog root props
     open: {
       control: "boolean",
-      description: "The controlled open state of the dialog",
+      description: "Controlled open state",
     },
-    onOpenChange: {
-      action: "onOpenChange",
-      description: "Event handler called when the open state changes",
-    },
-    modal: {
+    defaultOpen: {
       control: "boolean",
-      description: "The modality of the dialog",
-      defaultValue: true,
+      description: "Initial open state (uncontrolled)",
     },
-    // DialogContent props for Interactive story
   },
-} satisfies Meta<typeof Dialog>;
+};
 
 export default meta;
-type Story = StoryObj<typeof meta>;
+type Story = StoryObj<typeof Dialog>;
 
 /**
- * Interactive playground story with all dialog props and controls
- * Allows testing all dialog features and customization options
+ * Neynar Dashboard - Realistic scenarios showing dialogs for API key management,
+ * confirmations, and form submissions.
  */
-export const Interactive: Story = {
-  render: ({ modal, ...args }) => {
-    const [open, setOpen] = React.useState(false);
-
-    return (
-      <Dialog open={open} onOpenChange={setOpen} modal={modal} {...args}>
-        <DialogTrigger asChild>
-          <Button>Open Interactive Dialog</Button>
-        </DialogTrigger>
-        <DialogContent className="sm:max-w-[425px]">
-          <DialogHeader>
-            <DialogTitle>Interactive Dialog</DialogTitle>
-            <DialogDescription>
-              This dialog showcases all available customization options. Use the
-              controls panel to modify its behavior and appearance.
-            </DialogDescription>
-          </DialogHeader>
-          <div className="grid gap-4 py-4">
-            <div className="grid gap-2">
-              <Label htmlFor="example-input">Example Input</Label>
-              <Input id="example-input" placeholder="Try typing here..." />
-            </div>
-            <div className="grid gap-2">
-              <Label htmlFor="example-textarea">Example Textarea</Label>
-              <Textarea
-                id="example-textarea"
-                placeholder="Enter some text..."
-                rows={3}
-              />
-            </div>
-          </div>
-          <DialogFooter>
-            <DialogClose asChild>
-              <Button variant="outline">Cancel</Button>
-            </DialogClose>
-            <Button onClick={() => setOpen(false)}>Save Changes</Button>
-          </DialogFooter>
-        </DialogContent>
-      </Dialog>
-    );
-  },
-  args: {
-    modal: true,
-  },
+export const InContext: Story = {
   parameters: {
-    docs: {
-      description: {
-        story:
-          "Interactive playground allowing you to test all dialog props and customization options. Use the controls to modify behavior and see real-time changes.",
-      },
-    },
+    layout: "padded",
   },
-};
-
-/**
- * Showcase of all dialog variants and common patterns
- * Displays multiple dialog types side by side for comparison
- */
-export const Variants: Story = {
-  render: () => (
-    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
-      {/* Basic Confirmation Dialog */}
-      <Dialog>
-        <DialogTrigger asChild>
-          <Button variant="outline" className="w-full">
-            Basic Confirmation
-          </Button>
-        </DialogTrigger>
-        <DialogContent>
-          <DialogHeader>
-            <DialogTitle>Are you absolutely sure?</DialogTitle>
-            <DialogDescription>
-              This action cannot be undone. This will permanently delete your
-              account and remove your data from our servers.
-            </DialogDescription>
-          </DialogHeader>
-          <DialogFooter>
-            <DialogClose asChild>
-              <Button variant="outline">Cancel</Button>
-            </DialogClose>
-            <Button variant="destructive">Delete Account</Button>
-          </DialogFooter>
-        </DialogContent>
-      </Dialog>
-
-      {/* Form Dialog */}
-      <Dialog>
-        <DialogTrigger asChild>
-          <Button className="w-full">Form Dialog</Button>
-        </DialogTrigger>
-        <DialogContent className="sm:max-w-[425px]">
-          <DialogHeader>
-            <DialogTitle>Edit Profile</DialogTitle>
-            <DialogDescription>
-              Make changes to your profile here. Click save when you&apos;re
-              done.
-            </DialogDescription>
-          </DialogHeader>
-          <div className="grid gap-4 py-4">
-            <div className="grid gap-2">
-              <Label htmlFor="name">Name</Label>
-              <Input id="name" defaultValue="Pedro Duarte" />
-            </div>
-            <div className="grid gap-2">
-              <Label htmlFor="username">Username</Label>
-              <Input id="username" defaultValue="@peduarte" />
-            </div>
-          </div>
-          <DialogFooter>
-            <DialogClose asChild>
-              <Button variant="outline">Cancel</Button>
-            </DialogClose>
-            <Button type="submit">Save Changes</Button>
-          </DialogFooter>
-        </DialogContent>
-      </Dialog>
-
-      {/* Custom Close Button */}
-      <Dialog>
-        <DialogTrigger asChild>
-          <Button variant="secondary" className="w-full">
-            Custom Close
-          </Button>
-        </DialogTrigger>
-        <DialogContent className="sm:max-w-md" showCloseButton={false}>
-          <DialogHeader>
-            <DialogTitle>Share Link</DialogTitle>
-            <DialogDescription>
-              Anyone who has this link will be able to view this.
-            </DialogDescription>
-          </DialogHeader>
-          <div className="flex items-center space-x-2">
-            <Input
-              defaultValue="https://ui.shadcn.com/docs/installation"
-              readOnly
-            />
-            <Button size="sm" className="px-3">
-              <Copy className="h-4 w-4" />
-            </Button>
-          </div>
-          <DialogFooter className="sm:justify-start">
-            <DialogClose asChild>
-              <Button variant="secondary">Close</Button>
-            </DialogClose>
-          </DialogFooter>
-        </DialogContent>
-      </Dialog>
+  render: () => {
+    function DashboardDialogs() {
+      const [deleteOpen, setDeleteOpen] = useState(false);
+      const [createOpen, setCreateOpen] = useState(false);
+      const [inviteOpen, setInviteOpen] = useState(false);
+      const [isDeleting, setIsDeleting] = useState(false);
+      const [isCreating, setIsCreating] = useState(false);
 
-      {/* Long Content Dialog */}
-      <Dialog>
-        <DialogTrigger asChild>
-          <Button variant="outline" className="w-full">
-            Long Content
-          </Button>
-        </DialogTrigger>
-        <DialogContent className="max-h-[80vh] overflow-y-auto">
-          <DialogHeader>
-            <DialogTitle>Terms of Service</DialogTitle>
-            <DialogDescription>Last updated: January 1, 2024</DialogDescription>
-          </DialogHeader>
-          <div className="space-y-4 text-sm">
-            <p>
-              Welcome to our service. By using our service, you agree to these
-              terms.
-            </p>
-            <h3 className="font-medium">1. Terms</h3>
-            <p>
-              By accessing this website, you are agreeing to be bound by these
-              terms.
-            </p>
-            <h3 className="font-medium">2. Use License</h3>
-            <p>
-              Permission is granted for personal, non-commercial viewing only.
-            </p>
-          </div>
-          <DialogFooter>
-            <DialogClose asChild>
-              <Button variant="outline">Decline</Button>
-            </DialogClose>
-            <Button>Accept</Button>
-          </DialogFooter>
-        </DialogContent>
-      </Dialog>
+      function handleDelete() {
+        setIsDeleting(true);
+        setTimeout(() => {
+          setIsDeleting(false);
+          setDeleteOpen(false);
+        }, 1500);
+      }
 
-      {/* Controlled Dialog */}
-      <ControlledDialogVariant />
+      function handleCreate() {
+        setIsCreating(true);
+        setTimeout(() => {
+          setIsCreating(false);
+          setCreateOpen(false);
+        }, 1500);
+      }
 
-      {/* Custom Styled Dialog */}
-      <Dialog>
-        <DialogTrigger asChild>
-          <Button variant="outline" className="w-full">
-            Custom Styled
-          </Button>
-        </DialogTrigger>
-        <DialogContent className="bg-gradient-to-br from-primary/5 to-primary/10 border-primary/20">
-          <DialogHeader>
-            <DialogTitle className="text-primary">Custom Styling</DialogTitle>
-            <DialogDescription>
-              This dialog demonstrates custom styling with gradients.
-            </DialogDescription>
-          </DialogHeader>
-          <div className="py-4">
-            <p className="text-center text-sm">
-              Customize appearance using className props.
+      return (
+        <div className="w-full max-w-2xl space-y-6">
+          {/* Header */}
+          <div>
+            <h2 className="text-lg font-semibold">Dialog Examples</h2>
+            <p className="text-muted-foreground text-sm">
+              Common dialog patterns used in the Neynar Dashboard.
             </p>
           </div>
-          <DialogFooter>
-            <DialogClose asChild>
-              <Button variant="outline">Close</Button>
-            </DialogClose>
-          </DialogFooter>
-        </DialogContent>
-      </Dialog>
-    </div>
-  ),
-  parameters: {
-    docs: {
-      description: {
-        story:
-          "Comprehensive showcase of all dialog variants and common patterns. Demonstrates different use cases including confirmation dialogs, forms, custom close buttons, long content handling, controlled state, and custom styling.",
-      },
-    },
-  },
-};
 
-/**
- * Helper component for controlled dialog variant
- */
-function ControlledDialogVariant() {
-  const [open, setOpen] = React.useState(false);
-
-  return (
-    <div className="space-y-2">
-      <Button
-        variant="outline"
-        className="w-full"
-        onClick={() => setOpen(true)}
-      >
-        Controlled Dialog
-      </Button>
-      <p className="text-xs text-muted-foreground text-center">
-        State: {open ? "open" : "closed"}
-      </p>
-      <Dialog open={open} onOpenChange={setOpen}>
-        <DialogContent>
-          <DialogHeader>
-            <DialogTitle>Controlled Dialog</DialogTitle>
-            <DialogDescription>
-              This dialog&apos;s state is controlled externally.
-            </DialogDescription>
-          </DialogHeader>
-          <DialogFooter>
-            <Button onClick={() => setOpen(false)}>Close</Button>
-          </DialogFooter>
-        </DialogContent>
-      </Dialog>
-    </div>
-  );
-}
-
-/**
- * Real-world context showing dialog in a typical application scenario
- * Demonstrates practical usage for designers and business teams
- */
-export const InContext: Story = {
-  render: () => {
-    const [contactOpen, setContactOpen] = React.useState(false);
-    const [deleteOpen, setDeleteOpen] = React.useState(false);
-    const [shareOpen, setShareOpen] = React.useState(false);
+          {/* API Key Card */}
+          <div className="border-border bg-card rounded-lg border p-4">
+            <div className="flex items-start 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 API Key</p>
+                  <code className="text-muted-foreground font-mono text-sm">
+                    neynar_sk_prod_****_****_8f3d
+                  </code>
+                </div>
+              </div>
+            </div>
 
-    return (
-      <div className="max-w-4xl mx-auto p-6 space-y-8">
-        {/* Application Header */}
-        <div className="border-b pb-4">
-          <h1 className="text-2xl font-bold">Dashboard</h1>
-          <p className="text-muted-foreground">
-            Manage your account and settings
-          </p>
-        </div>
+            <div className="mt-4 flex gap-2">
+              <Button variant="outline" size="sm">
+                <CopyIcon data-icon="inline-start" />
+                Copy
+              </Button>
 
-        {/* Action Cards */}
-        <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
-          {/* Contact Support Card */}
-          <div className="border rounded-lg p-6 space-y-4">
-            <div className="flex items-center gap-3">
-              <Mail className="h-5 w-5 text-blue-500" />
-              <h3 className="font-semibold">Contact Support</h3>
-            </div>
-            <p className="text-sm text-muted-foreground">
-              Need help? Our support team is here to assist you with any
-              questions.
-            </p>
-            <Dialog open={contactOpen} onOpenChange={setContactOpen}>
-              <DialogTrigger asChild>
-                <Button className="w-full">
-                  <Mail className="mr-2 h-4 w-4" />
-                  Contact Us
-                </Button>
-              </DialogTrigger>
-              <DialogContent className="sm:max-w-[525px]">
-                <DialogHeader>
-                  <DialogTitle>Contact Support</DialogTitle>
-                  <DialogDescription>
-                    Send us a message and we&apos;ll get back to you as soon as
-                    possible.
-                  </DialogDescription>
-                </DialogHeader>
-                <form
-                  onSubmit={(e) => {
-                    e.preventDefault();
-                    setContactOpen(false);
-                  }}
+              {/* Destructive Confirmation Dialog */}
+              <Dialog open={deleteOpen} onOpenChange={setDeleteOpen}>
+                <DialogTrigger
+                  render={<Button variant="destructive" size="sm" />}
                 >
-                  <div className="grid gap-4 py-4">
-                    <div className="grid gap-2">
-                      <Label htmlFor="email">Email</Label>
-                      <Input
-                        id="email"
-                        type="email"
-                        placeholder="you@example.com"
-                        required
-                      />
-                    </div>
-                    <div className="grid gap-2">
-                      <Label htmlFor="subject">Subject</Label>
-                      <Input
-                        id="subject"
-                        placeholder="How can we help?"
-                        required
-                      />
-                    </div>
-                    <div className="grid gap-2">
-                      <Label htmlFor="message">Message</Label>
-                      <Textarea
-                        id="message"
-                        placeholder="Tell us more..."
-                        rows={4}
-                        required
-                      />
-                    </div>
-                  </div>
+                  <TrashIcon data-icon="inline-start" />
+                  Revoke
+                </DialogTrigger>
+                <DialogContent>
+                  <DialogHeader>
+                    <DialogTitle>Revoke API Key?</DialogTitle>
+                    <DialogDescription>
+                      This action cannot be undone. Revoking this key will
+                      immediately stop all applications using it from accessing
+                      the Neynar API.
+                    </DialogDescription>
+                  </DialogHeader>
                   <DialogFooter>
-                    <DialogClose asChild>
-                      <Button type="button" variant="outline">
-                        Cancel
-                      </Button>
+                    <DialogClose render={<Button variant="outline" />}>
+                      Cancel
                     </DialogClose>
-                    <Button type="submit">Send Message</Button>
+                    <Button
+                      variant="destructive"
+                      onClick={handleDelete}
+                      disabled={isDeleting}
+                    >
+                      {isDeleting ? (
+                        <>
+                          <Loader2Icon
+                            data-icon="inline-start"
+                            className="animate-spin"
+                          />
+                          Revoking...
+                        </>
+                      ) : (
+                        <>
+                          <TrashIcon data-icon="inline-start" />
+                          Revoke Key
+                        </>
+                      )}
+                    </Button>
                   </DialogFooter>
-                </form>
-              </DialogContent>
-            </Dialog>
+                </DialogContent>
+              </Dialog>
+            </div>
           </div>
 
-          {/* Share Profile Card */}
-          <div className="border rounded-lg p-6 space-y-4">
-            <div className="flex items-center gap-3">
-              <Share2 className="h-5 w-5 text-green-500" />
-              <h3 className="font-semibold">Share Profile</h3>
-            </div>
-            <p className="text-sm text-muted-foreground">
-              Share your profile with colleagues and collaborators.
-            </p>
-            <Dialog open={shareOpen} onOpenChange={setShareOpen}>
-              <DialogTrigger asChild>
-                <Button variant="outline" className="w-full">
-                  <Share2 className="mr-2 h-4 w-4" />
-                  Share Profile
-                </Button>
+          {/* Action Buttons */}
+          <div className="flex gap-2">
+            {/* Create API Key Dialog */}
+            <Dialog open={createOpen} onOpenChange={setCreateOpen}>
+              <DialogTrigger render={<Button />}>
+                <PlusIcon data-icon="inline-start" />
+                Create API Key
               </DialogTrigger>
-              <DialogContent className="sm:max-w-md">
+              <DialogContent>
                 <DialogHeader>
-                  <DialogTitle>Share Your Profile</DialogTitle>
+                  <DialogTitle>Create New API Key</DialogTitle>
                   <DialogDescription>
-                    Share your profile with friends and colleagues.
+                    Create a new API key for your application. You can set
+                    restrictions and permissions after creation.
                   </DialogDescription>
                 </DialogHeader>
                 <div className="space-y-4">
-                  <div className="flex items-center space-x-2">
+                  <div className="space-y-2">
+                    <Label htmlFor="key-name">Key Name</Label>
                     <Input
-                      defaultValue="https://example.com/profile/johndoe"
-                      readOnly
-                      className="flex-1"
+                      id="key-name"
+                      placeholder="Production Key"
+                      defaultValue=""
                     />
-                    <Button size="sm" className="px-3">
-                      <Copy className="h-4 w-4" />
-                    </Button>
                   </div>
-                  <div className="grid grid-cols-2 gap-2">
-                    <Button
-                      variant="outline"
-                      size="sm"
-                      className="justify-start"
-                    >
-                      <Mail className="mr-2 h-4 w-4" />
-                      Email
-                    </Button>
-                    <Button
-                      variant="outline"
-                      size="sm"
-                      className="justify-start"
-                    >
-                      <MessageSquare className="mr-2 h-4 w-4" />
-                      Message
-                    </Button>
+                  <div className="space-y-2">
+                    <Label htmlFor="key-description">
+                      Description (Optional)
+                    </Label>
+                    <Input
+                      id="key-description"
+                      placeholder="Used for production API calls"
+                      defaultValue=""
+                    />
                   </div>
                 </div>
                 <DialogFooter>
-                  <DialogClose asChild>
-                    <Button variant="outline" className="w-full">
-                      Close
-                    </Button>
+                  <DialogClose render={<Button variant="outline" />}>
+                    Cancel
                   </DialogClose>
+                  <Button onClick={handleCreate} disabled={isCreating}>
+                    {isCreating ? (
+                      <>
+                        <Loader2Icon
+                          data-icon="inline-start"
+                          className="animate-spin"
+                        />
+                        Creating...
+                      </>
+                    ) : (
+                      <>
+                        <PlusIcon data-icon="inline-start" />
+                        Create Key
+                      </>
+                    )}
+                  </Button>
                 </DialogFooter>
               </DialogContent>
             </Dialog>
-          </div>
 
-          {/* Danger Zone Card */}
-          <div className="border border-red-200 rounded-lg p-6 space-y-4">
-            <div className="flex items-center gap-3">
-              <div className="h-5 w-5 bg-red-500 rounded-full" />
-              <h3 className="font-semibold text-red-700">Danger Zone</h3>
-            </div>
-            <p className="text-sm text-muted-foreground">
-              Permanently delete your account and all associated data.
-            </p>
-            <Dialog open={deleteOpen} onOpenChange={setDeleteOpen}>
-              <DialogTrigger asChild>
-                <Button variant="destructive" className="w-full">
-                  Delete Account
-                </Button>
+            {/* Invite Team Member Dialog */}
+            <Dialog open={inviteOpen} onOpenChange={setInviteOpen}>
+              <DialogTrigger render={<Button variant="outline" />}>
+                <UserIcon data-icon="inline-start" />
+                Invite Team Member
               </DialogTrigger>
               <DialogContent>
                 <DialogHeader>
-                  <DialogTitle>Are you absolutely sure?</DialogTitle>
+                  <DialogTitle>Invite Team Member</DialogTitle>
                   <DialogDescription>
-                    This action cannot be undone. This will permanently delete
-                    your account and remove your data from our servers.
+                    Send an invitation to join your Neynar team. They'll receive
+                    an email with instructions to get started.
                   </DialogDescription>
                 </DialogHeader>
+                <div className="space-y-4">
+                  <div className="space-y-2">
+                    <Label htmlFor="email">Email Address</Label>
+                    <Input
+                      id="email"
+                      type="email"
+                      placeholder="colleague@example.com"
+                    />
+                  </div>
+                  <div className="space-y-2">
+                    <Label htmlFor="role">Role</Label>
+                    <Input id="role" placeholder="Developer" />
+                  </div>
+                </div>
                 <DialogFooter>
-                  <DialogClose asChild>
-                    <Button variant="outline">Cancel</Button>
+                  <DialogClose render={<Button variant="outline" />}>
+                    Cancel
                   </DialogClose>
-                  <Button
-                    variant="destructive"
-                    onClick={() => setDeleteOpen(false)}
-                  >
-                    Delete Account
+                  <Button>
+                    <MailIcon data-icon="inline-start" />
+                    Send Invitation
                   </Button>
                 </DialogFooter>
               </DialogContent>
             </Dialog>
           </div>
         </div>
+      );
+    }
 
-        {/* Additional Context */}
-        <div className="border-t pt-4">
-          <p className="text-sm text-muted-foreground">
-            This example shows dialogs in a realistic application context,
-            demonstrating how they integrate with typical UI patterns and
-            workflows.
+    return <DashboardDialogs />;
+  },
+};
+
+/**
+ * Complete design system reference showing all dialog variants, compositions,
+ * and usage patterns.
+ */
+export const Variants: Story = {
+  parameters: {
+    layout: "padded",
+  },
+  render: () => (
+    <div className="w-full max-w-3xl space-y-10">
+      {/* Basic Dialog */}
+      <section className="space-y-4">
+        <div>
+          <h3 className="text-lg font-semibold">Basic Dialog</h3>
+          <p className="text-muted-foreground text-sm">
+            Simple dialog with title, description, and actions.
           </p>
         </div>
-      </div>
-    );
-  },
+        <div>
+          <Dialog>
+            <DialogTrigger render={<Button />}>Open Basic Dialog</DialogTrigger>
+            <DialogContent>
+              <DialogHeader>
+                <DialogTitle>Basic Dialog</DialogTitle>
+                <DialogDescription>
+                  A simple dialog with header and footer sections.
+                </DialogDescription>
+              </DialogHeader>
+              <DialogFooter>
+                <DialogClose render={<Button variant="outline" />}>
+                  Close
+                </DialogClose>
+              </DialogFooter>
+            </DialogContent>
+          </Dialog>
+        </div>
+      </section>
+
+      {/* Confirmation Dialog */}
+      <section className="space-y-4">
+        <div>
+          <h3 className="text-lg font-semibold">Confirmation Dialog</h3>
+          <p className="text-muted-foreground text-sm">
+            Dialog for confirming destructive or important actions.
+          </p>
+        </div>
+        <div className="flex gap-2">
+          <Dialog>
+            <DialogTrigger render={<Button variant="destructive" />}>
+              <TrashIcon data-icon="inline-start" />
+              Delete Account
+            </DialogTrigger>
+            <DialogContent>
+              <DialogHeader>
+                <DialogTitle>Are you absolutely sure?</DialogTitle>
+                <DialogDescription>
+                  This action cannot be undone. This will permanently delete
+                  your account and remove your data from our servers.
+                </DialogDescription>
+              </DialogHeader>
+              <DialogFooter>
+                <DialogClose render={<Button variant="outline" />}>
+                  Cancel
+                </DialogClose>
+                <Button variant="destructive">
+                  <TrashIcon data-icon="inline-start" />
+                  Delete Account
+                </Button>
+              </DialogFooter>
+            </DialogContent>
+          </Dialog>
+
+          <Dialog>
+            <DialogTrigger render={<Button variant="outline" />}>
+              <AlertTriangleIcon data-icon="inline-start" />
+              Discard Changes
+            </DialogTrigger>
+            <DialogContent>
+              <DialogHeader>
+                <DialogTitle>Discard unsaved changes?</DialogTitle>
+                <DialogDescription>
+                  You have unsaved changes that will be lost if you continue.
+                  Are you sure you want to discard them?
+                </DialogDescription>
+              </DialogHeader>
+              <DialogFooter>
+                <DialogClose render={<Button variant="outline" />}>
+                  Keep Editing
+                </DialogClose>
+                <Button variant="destructive">Discard Changes</Button>
+              </DialogFooter>
+            </DialogContent>
+          </Dialog>
+        </div>
+      </section>
+
+      {/* Form Dialog */}
+      <section className="space-y-4">
+        <div>
+          <h3 className="text-lg font-semibold">Form Dialog</h3>
+          <p className="text-muted-foreground text-sm">
+            Dialog containing form inputs for data collection.
+          </p>
+        </div>
+        <div>
+          <Dialog>
+            <DialogTrigger render={<Button />}>
+              <PlusIcon data-icon="inline-start" />
+              Create Project
+            </DialogTrigger>
+            <DialogContent>
+              <DialogHeader>
+                <DialogTitle>Create New Project</DialogTitle>
+                <DialogDescription>
+                  Set up a new project to organize your API keys and team
+                  members.
+                </DialogDescription>
+              </DialogHeader>
+              <div className="space-y-4">
+                <div className="space-y-2">
+                  <Label htmlFor="project-name">Project Name</Label>
+                  <Input id="project-name" placeholder="My Awesome Project" />
+                </div>
+                <div className="space-y-2">
+                  <Label htmlFor="project-description">Description</Label>
+                  <Input
+                    id="project-description"
+                    placeholder="A brief description of your project"
+                  />
+                </div>
+              </div>
+              <DialogFooter>
+                <DialogClose render={<Button variant="outline" />}>
+                  Cancel
+                </DialogClose>
+                <Button>
+                  <PlusIcon data-icon="inline-start" />
+                  Create Project
+                </Button>
+              </DialogFooter>
+            </DialogContent>
+          </Dialog>
+        </div>
+      </section>
+
+      {/* Without Close Button */}
+      <section className="space-y-4">
+        <div>
+          <h3 className="text-lg font-semibold">Without Close Button</h3>
+          <p className="text-muted-foreground text-sm">
+            Dialog that requires explicit action to close (no X button).
+          </p>
+        </div>
+        <div>
+          <Dialog>
+            <DialogTrigger render={<Button variant="outline" />}>
+              Forced Action
+            </DialogTrigger>
+            <DialogContent showCloseButton={false}>
+              <DialogHeader>
+                <DialogTitle>Action Required</DialogTitle>
+                <DialogDescription>
+                  Please choose one of the options below. This dialog cannot be
+                  dismissed without making a selection.
+                </DialogDescription>
+              </DialogHeader>
+              <DialogFooter>
+                <DialogClose render={<Button variant="outline" />}>
+                  Option A
+                </DialogClose>
+                <DialogClose render={<Button />}>Option B</DialogClose>
+              </DialogFooter>
+            </DialogContent>
+          </Dialog>
+        </div>
+      </section>
+
+      {/* Information Dialog */}
+      <section className="space-y-4">
+        <div>
+          <h3 className="text-lg font-semibold">Information Dialog</h3>
+          <p className="text-muted-foreground text-sm">
+            Dialog for displaying information or announcements.
+          </p>
+        </div>
+        <div>
+          <Dialog>
+            <DialogTrigger render={<Button variant="outline" />}>
+              View Details
+            </DialogTrigger>
+            <DialogContent>
+              <DialogHeader>
+                <DialogTitle>API Key Details</DialogTitle>
+                <DialogDescription>
+                  Information about your API key and its usage.
+                </DialogDescription>
+              </DialogHeader>
+              <div className="space-y-3 py-4">
+                <div className="flex justify-between text-sm">
+                  <span className="text-muted-foreground">Created:</span>
+                  <span className="font-medium">January 15, 2025</span>
+                </div>
+                <div className="flex justify-between text-sm">
+                  <span className="text-muted-foreground">Last Used:</span>
+                  <span className="font-medium">2 hours ago</span>
+                </div>
+                <div className="flex justify-between text-sm">
+                  <span className="text-muted-foreground">Requests (24h):</span>
+                  <span className="font-medium">1,234</span>
+                </div>
+                <div className="flex justify-between text-sm">
+                  <span className="text-muted-foreground">Rate Limit:</span>
+                  <span className="font-medium">10,000 / day</span>
+                </div>
+              </div>
+              <DialogFooter showCloseButton>
+                <Button>
+                  <CopyIcon data-icon="inline-start" />
+                  Copy Key
+                </Button>
+              </DialogFooter>
+            </DialogContent>
+          </Dialog>
+        </div>
+      </section>
+
+      {/* Controlled Dialog */}
+      <section className="space-y-4">
+        <div>
+          <h3 className="text-lg font-semibold">Controlled Dialog</h3>
+          <p className="text-muted-foreground text-sm">
+            Dialog with controlled open state for programmatic control.
+          </p>
+        </div>
+        <div>
+          {(() => {
+            function ControlledExample() {
+              const [open, setOpen] = useState(false);
+
+              return (
+                <div className="flex gap-2">
+                  <Dialog open={open} onOpenChange={setOpen}>
+                    <DialogTrigger render={<Button />}>
+                      Open Controlled Dialog
+                    </DialogTrigger>
+                    <DialogContent>
+                      <DialogHeader>
+                        <DialogTitle>Controlled Dialog</DialogTitle>
+                        <DialogDescription>
+                          This dialog's open state is controlled by React state.
+                        </DialogDescription>
+                      </DialogHeader>
+                      <DialogFooter>
+                        <Button
+                          variant="outline"
+                          onClick={() => setOpen(false)}
+                        >
+                          Close Programmatically
+                        </Button>
+                      </DialogFooter>
+                    </DialogContent>
+                  </Dialog>
+                  <Button variant="outline" onClick={() => setOpen(true)}>
+                    Open from Outside
+                  </Button>
+                </div>
+              );
+            }
+
+            return <ControlledExample />;
+          })()}
+        </div>
+      </section>
+    </div>
+  ),
+};
+
+/**
+ * Frosted dialog effect with backdrop blur over colorful backgrounds.
+ * Dialogs use 75% opacity and backdrop-blur for a frosted glass appearance.
+ */
+export const Frosted: Story = {
   parameters: {
     layout: "fullscreen",
-    docs: {
-      description: {
-        story:
-          "Real-world application scenario showing dialogs integrated into a typical dashboard interface. Demonstrates practical usage patterns including contact forms, sharing functionality, and confirmation dialogs for destructive actions. Perfect for showing designers and business teams how dialogs fit into complete user workflows.",
-      },
-    },
   },
+  render: () => (
+    <div className="relative min-h-screen w-full overflow-hidden">
+      {/* Busy colorful background with blocks and text */}
+      <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">
+          {/* Color blocks */}
+          <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 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 className="rounded-lg bg-orange-400 p-4 text-orange-900">
+            <p className="font-bold">Orange Block</p>
+            <p className="text-sm">Et dolore magna aliqua</p>
+          </div>
+          <div className="rounded-lg bg-teal-400 p-4 text-teal-900">
+            <p className="font-bold">Teal Block</p>
+            <p className="text-sm">Ut enim ad minim veniam</p>
+          </div>
+          <div className="rounded-lg bg-pink-400 p-4 text-pink-900">
+            <p className="font-bold">Pink Block</p>
+            <p className="text-sm">Quis nostrud exercitation</p>
+          </div>
+          <div className="rounded-lg bg-cyan-400 p-4 text-cyan-900">
+            <p className="font-bold">Cyan Block</p>
+            <p className="text-sm">Ullamco laboris nisi</p>
+          </div>
+        </div>
+        <div className="mt-8 grid grid-cols-3 gap-6 text-white">
+          <div>
+            <h2 className="text-2xl font-bold">Background Content</h2>
+            <p className="mt-2">
+              This text demonstrates how the dialog's frosted glass effect blurs
+              the content behind it while remaining readable.
+            </p>
+          </div>
+          <div>
+            <h2 className="text-2xl font-bold">More Text Here</h2>
+            <p className="mt-2">
+              The backdrop-filter: blur() CSS property creates a nice frosted
+              glass aesthetic that's popular in modern UIs.
+            </p>
+          </div>
+          <div>
+            <h2 className="text-2xl font-bold">Third Column</h2>
+            <p className="mt-2">
+              You can customize the blur intensity with the --surface-blur CSS
+              variable and opacity with --card or --popover tokens.
+            </p>
+          </div>
+        </div>
+      </div>
+
+      {/* Dialog - defaultOpen to show the effect */}
+      <Dialog defaultOpen>
+        <DialogTrigger
+          render={<Button className="absolute top-4 left-4 z-10" />}
+        >
+          Open Dialog
+        </DialogTrigger>
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle>Frosted Glass Dialog</DialogTitle>
+            <DialogDescription>
+              Notice how you can see the colorful background through the dialog,
+              but it's blurred for readability.
+            </DialogDescription>
+          </DialogHeader>
+          <div className="py-4 text-sm">
+            <p>
+              The dialog uses 75% opacity combined with a 12px backdrop blur to
+              create this effect. Customize via CSS tokens:
+            </p>
+            <ul className="mt-2 list-disc pl-4 space-y-1 text-muted-foreground">
+              <li>
+                <code>--surface-blur</code> controls blur intensity
+              </li>
+              <li>
+                <code>--popover</code> controls background opacity
+              </li>
+            </ul>
+          </div>
+          <DialogFooter>
+            <DialogClose render={<Button variant="outline" />}>
+              Close
+            </DialogClose>
+            <Button>Confirm</Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </div>
+  ),
+};
+
+/**
+ * Interactive playground for testing dialog props and composition.
+ */
+export const Interactive: Story = {
+  args: {
+    defaultOpen: false,
+  },
+  render: (args) => (
+    <Dialog {...args}>
+      <DialogTrigger render={<Button />}>Open Dialog</DialogTrigger>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>Dialog Title</DialogTitle>
+          <DialogDescription>
+            This is a description of what this dialog does. It provides context
+            and helps users understand the purpose.
+          </DialogDescription>
+        </DialogHeader>
+        <div className="py-4">
+          <p className="text-sm">
+            Dialog content goes here. You can include forms, information, or any
+            other interactive elements.
+          </p>
+        </div>
+        <DialogFooter>
+          <DialogClose render={<Button variant="outline" />}>
+            Cancel
+          </DialogClose>
+          <Button>Confirm</Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  ),
 };