@neynar/ui 0.3.1 → 0.5.0

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

@@ -1,5 +1,7 @@
-import type { Meta, StoryObj } from "@storybook/react-vite";
-import { User, CreditCard, Bell, Shield, Lock } from "lucide-react";
+import type { Meta, StoryObj } from "@storybook/react";
+import { fn } from "storybook/test";
+import { CodeIcon, KeyIcon, ShieldCheckIcon, ZapIcon } from "lucide-react";
+
 import {
   Accordion,
   AccordionItem,
@@ -7,419 +9,681 @@ import {
   AccordionContent,
 } from "../accordion";
 
-const meta = {
-  title: "Layout and Structure/Accordion",
+const meta: Meta<typeof Accordion> = {
+  title: "Components/Layout & Structure/Accordion",
   component: Accordion,
   parameters: {
     layout: "centered",
-    docs: {
-      description: {
-        component:
-          "A vertically stacked set of interactive headings that each reveal a section of content. Built on Radix UI primitives with smooth animations and full accessibility support. Supports both single and multiple expansion modes for flexible content organization.",
-      },
-    },
+  },
+  args: {
+    onValueChange: fn(),
   },
   argTypes: {
-    type: {
-      control: { type: "radio" },
-      options: ["single", "multiple"],
-      description:
-        "Controls whether one or multiple items can be open simultaneously",
-    },
-    collapsible: {
-      control: { type: "boolean" },
-      description: "When type='single', allows closing the open item",
-      if: { arg: "type", eq: "single" },
-    },
     defaultValue: {
-      control: { type: "text" },
-      description: "Initial value for open items",
+      control: "text",
+      description:
+        "Default open item(s) - string for single, array for multiple",
     },
     disabled: {
-      control: { type: "boolean" },
-      description: "Disables all accordion interactions",
-    },
-    orientation: {
-      control: { type: "radio" },
-      options: ["horizontal", "vertical"],
-      description: "Layout orientation",
+      control: "boolean",
+      description: "Disable all accordion items",
     },
   },
-} satisfies Meta<typeof Accordion>;
+};
 
 export default meta;
-type Story = StoryObj<typeof meta>;
+type Story = StoryObj<typeof Accordion>;
 
 /**
- * Interactive playground for testing all accordion props and variants.
- * Use the controls panel to experiment with different configurations.
+ * Neynar Dashboard - A realistic scenario showing accordions in the context
+ * of FAQ sections, API documentation, and feature explanations.
  */
-export const Interactive: Story = {
-  args: {
-    type: "single",
-    collapsible: true,
-    className: "w-96",
+export const InContext: Story = {
+  parameters: {
+    layout: "padded",
+  },
+  render: () => {
+    function DashboardAccordions() {
+      return (
+        <div className="w-full max-w-3xl space-y-12">
+          {/* Developer FAQ */}
+          <section className="space-y-4">
+            <div>
+              <h2 className="text-lg font-semibold">
+                Frequently Asked Questions
+              </h2>
+              <p className="text-muted-foreground text-sm">
+                Common questions about using the Neynar API
+              </p>
+            </div>
+
+            <Accordion className="w-full" defaultValue={["item-1"]}>
+              <AccordionItem value="item-1">
+                <AccordionTrigger>
+                  How do I get started with the Neynar API?
+                </AccordionTrigger>
+                <AccordionContent>
+                  <p>
+                    Getting started is easy! First, sign up for a free account
+                    at <a href="#signup">neynar.com</a>. Once logged in,
+                    navigate to your dashboard to generate your API key. You can
+                    then make your first API call using our REST endpoints or
+                    SDKs available for JavaScript, Python, and Go.
+                  </p>
+                  <p>
+                    Check out our <a href="#quickstart">Quickstart Guide</a> for
+                    a step-by-step tutorial.
+                  </p>
+                </AccordionContent>
+              </AccordionItem>
+
+              <AccordionItem value="item-2">
+                <AccordionTrigger>
+                  What are the rate limits for API requests?
+                </AccordionTrigger>
+                <AccordionContent>
+                  <p>
+                    Rate limits vary by plan tier. The free tier includes 1,000
+                    requests per day, while our Pro plan offers 100,000 requests
+                    per day. Rate limits reset at midnight UTC.
+                  </p>
+                  <p>
+                    You can monitor your current usage in the{" "}
+                    <a href="#usage">Usage Dashboard</a>. If you need higher
+                    limits, consider upgrading to our Enterprise plan with
+                    custom rate limits.
+                  </p>
+                </AccordionContent>
+              </AccordionItem>
+
+              <AccordionItem value="item-3">
+                <AccordionTrigger>
+                  How do I authenticate API requests?
+                </AccordionTrigger>
+                <AccordionContent>
+                  <p>
+                    All API requests require authentication using an API key.
+                    Include your key in the request headers as follows:
+                  </p>
+                  <p className="bg-muted rounded-md p-3 font-mono text-sm">
+                    Authorization: Bearer YOUR_API_KEY
+                  </p>
+                  <p>
+                    Never expose your API key in client-side code. Always make
+                    requests from your backend server to keep your credentials
+                    secure.
+                  </p>
+                </AccordionContent>
+              </AccordionItem>
+
+              <AccordionItem value="item-4">
+                <AccordionTrigger>
+                  Can I use webhooks for real-time notifications?
+                </AccordionTrigger>
+                <AccordionContent>
+                  <p>
+                    Yes! Webhooks are available on all paid plans. Configure
+                    webhook endpoints in your{" "}
+                    <a href="#webhooks">Webhook Settings</a> to receive
+                    real-time notifications for events like new casts,
+                    reactions, follows, and more.
+                  </p>
+                  <p>
+                    Webhooks support custom filters, retry logic, and signature
+                    verification for security. See our{" "}
+                    <a href="#webhook-docs">Webhook Documentation</a> for
+                    implementation details.
+                  </p>
+                </AccordionContent>
+              </AccordionItem>
+
+              <AccordionItem value="item-5">
+                <AccordionTrigger>
+                  What SDKs and libraries are available?
+                </AccordionTrigger>
+                <AccordionContent>
+                  <p>We offer official SDKs for multiple languages:</p>
+                  <ul className="list-disc space-y-1 pl-5">
+                    <li>
+                      <strong>JavaScript/TypeScript</strong> - Full-featured SDK
+                      with React hooks
+                    </li>
+                    <li>
+                      <strong>Python</strong> - Async support and Pandas
+                      integration
+                    </li>
+                    <li>
+                      <strong>Go</strong> - Lightweight and performant
+                    </li>
+                    <li>
+                      <strong>Ruby</strong> - Rails-friendly integration
+                    </li>
+                  </ul>
+                  <p>
+                    All SDKs are open source and available on{" "}
+                    <a href="#github">GitHub</a>. Community SDKs are also
+                    available for other languages.
+                  </p>
+                </AccordionContent>
+              </AccordionItem>
+            </Accordion>
+          </section>
+
+          {/* API Features */}
+          <section className="space-y-4">
+            <div>
+              <h2 className="text-lg font-semibold">API Features</h2>
+              <p className="text-muted-foreground text-sm">
+                Learn about key capabilities of the Neynar API
+              </p>
+            </div>
+
+            <Accordion className="w-full">
+              <AccordionItem value="feature-1">
+                <AccordionTrigger>
+                  <div className="flex items-center gap-3">
+                    <div className="bg-primary/10 text-primary rounded-md p-1.5">
+                      <ZapIcon className="size-4" />
+                    </div>
+                    <span>Real-time Feed Updates</span>
+                  </div>
+                </AccordionTrigger>
+                <AccordionContent>
+                  <p>
+                    Access real-time Farcaster feeds with sub-second latency.
+                    Our infrastructure processes millions of casts daily,
+                    providing instant access to the latest content from any
+                    user, channel, or topic.
+                  </p>
+                  <p>
+                    Use our Feed API endpoints to build dynamic social
+                    experiences with automatic pagination and filtering options.
+                  </p>
+                </AccordionContent>
+              </AccordionItem>
+
+              <AccordionItem value="feature-2">
+                <AccordionTrigger>
+                  <div className="flex items-center gap-3">
+                    <div className="bg-primary/10 text-primary rounded-md p-1.5">
+                      <ShieldCheckIcon className="size-4" />
+                    </div>
+                    <span>Secure Authentication</span>
+                  </div>
+                </AccordionTrigger>
+                <AccordionContent>
+                  <p>
+                    Implement Sign-In with Farcaster (SIWF) to authenticate
+                    users securely. Our authentication flow follows industry
+                    best practices with OAuth 2.0 compatibility.
+                  </p>
+                  <p>
+                    Support for wallet-based authentication, QR code login, and
+                    deep linking for mobile apps. Complete user profile data
+                    included with every authentication.
+                  </p>
+                </AccordionContent>
+              </AccordionItem>
+
+              <AccordionItem value="feature-3">
+                <AccordionTrigger>
+                  <div className="flex items-center gap-3">
+                    <div className="bg-primary/10 text-primary rounded-md p-1.5">
+                      <CodeIcon className="size-4" />
+                    </div>
+                    <span>Developer Tools</span>
+                  </div>
+                </AccordionTrigger>
+                <AccordionContent>
+                  <p>
+                    Access comprehensive developer tools including API
+                    playground, request/response inspector, and interactive
+                    documentation. Test endpoints directly from your browser
+                    without writing code.
+                  </p>
+                  <p>
+                    Integrated debugging tools help you troubleshoot issues
+                    quickly with detailed error messages and request traces.
+                  </p>
+                </AccordionContent>
+              </AccordionItem>
+
+              <AccordionItem value="feature-4">
+                <AccordionTrigger>
+                  <div className="flex items-center gap-3">
+                    <div className="bg-primary/10 text-primary rounded-md p-1.5">
+                      <KeyIcon className="size-4" />
+                    </div>
+                    <span>API Key Management</span>
+                  </div>
+                </AccordionTrigger>
+                <AccordionContent>
+                  <p>
+                    Create multiple API keys for different environments
+                    (development, staging, production). Each key can have custom
+                    rate limits and permissions.
+                  </p>
+                  <p>
+                    Rotate keys without downtime, monitor usage per key, and
+                    revoke access instantly if credentials are compromised.
+                    Audit logs track all key-related activities.
+                  </p>
+                </AccordionContent>
+              </AccordionItem>
+            </Accordion>
+          </section>
+
+          {/* Troubleshooting */}
+          <section className="space-y-4">
+            <div>
+              <h2 className="text-lg font-semibold">Troubleshooting</h2>
+              <p className="text-muted-foreground text-sm">
+                Common issues and how to resolve them
+              </p>
+            </div>
+
+            <Accordion className="w-full">
+              <AccordionItem value="error-1">
+                <AccordionTrigger>
+                  Error: "Invalid API Key" - What does this mean?
+                </AccordionTrigger>
+                <AccordionContent>
+                  <p>
+                    This error occurs when your API key is missing, malformed,
+                    or has been revoked. Common causes include:
+                  </p>
+                  <ul className="list-disc space-y-1 pl-5">
+                    <li>
+                      Forgetting to include the "Bearer" prefix in the header
+                    </li>
+                    <li>Using an expired or regenerated key</li>
+                    <li>Copy-paste errors causing whitespace or truncation</li>
+                  </ul>
+                  <p>
+                    Double-check your API key in the dashboard and ensure it's
+                    correctly formatted in your request headers.
+                  </p>
+                </AccordionContent>
+              </AccordionItem>
+
+              <AccordionItem value="error-2">
+                <AccordionTrigger>
+                  Why am I getting rate limited?
+                </AccordionTrigger>
+                <AccordionContent>
+                  <p>
+                    Rate limiting protects our infrastructure and ensures fair
+                    usage. You'll receive a 429 status code when limits are
+                    exceeded.
+                  </p>
+                  <p>
+                    Solutions: Implement exponential backoff, cache responses
+                    where possible, upgrade to a higher tier plan, or batch
+                    multiple requests into single calls using our bulk
+                    endpoints.
+                  </p>
+                </AccordionContent>
+              </AccordionItem>
+
+              <AccordionItem value="error-3">
+                <AccordionTrigger>
+                  How do I handle webhook failures?
+                </AccordionTrigger>
+                <AccordionContent>
+                  <p>
+                    Our webhook system automatically retries failed deliveries
+                    with exponential backoff. If your endpoint is consistently
+                    failing:
+                  </p>
+                  <ul className="list-disc space-y-1 pl-5">
+                    <li>Verify your endpoint is publicly accessible</li>
+                    <li>Check that you're returning a 200 status code</li>
+                    <li>Ensure response time is under 5 seconds</li>
+                    <li>
+                      Review webhook logs in your dashboard for error details
+                    </li>
+                  </ul>
+                  <p>
+                    Consider implementing a queue system for processing webhook
+                    events asynchronously.
+                  </p>
+                </AccordionContent>
+              </AccordionItem>
+            </Accordion>
+          </section>
+        </div>
+      );
+    }
+
+    return <DashboardAccordions />;
   },
-  render: (args) => (
-    <Accordion {...args}>
-      <AccordionItem value="item-1">
-        <AccordionTrigger>What is your return policy?</AccordionTrigger>
-        <AccordionContent>
-          We offer a 30-day return policy for all items. Items must be in their
-          original condition with tags attached. Returns are free for defective
-          items, and a small fee applies for other returns.
-        </AccordionContent>
-      </AccordionItem>
-      <AccordionItem value="item-2">
-        <AccordionTrigger>How long does shipping take?</AccordionTrigger>
-        <AccordionContent>
-          Standard shipping typically takes 3-5 business days. Express shipping
-          is available for 1-2 business days. Free shipping is available on
-          orders over $50.
-        </AccordionContent>
-      </AccordionItem>
-      <AccordionItem value="item-3">
-        <AccordionTrigger>Do you ship internationally?</AccordionTrigger>
-        <AccordionContent>
-          Yes, we ship to over 100 countries worldwide. International shipping
-          times vary by location, typically 7-14 business days. Customs duties
-          may apply depending on your country.
-        </AccordionContent>
-      </AccordionItem>
-    </Accordion>
-  ),
 };
 
 /**
- * Comprehensive showcase of all accordion variants and configurations.
- * Demonstrates different types, content styles, and use cases.
+ * Complete design system reference showing all accordion variants, states, and compositions.
  */
 export const Variants: Story = {
-  args: {
-    type: "single",
-    collapsible: true,
-    className: "w-96",
-  },
   parameters: {
-    docs: {
-      description: {
-        story:
-          "Shows different accordion configurations: single vs multiple, with icons, default open states, and various content types.",
-      },
-    },
+    layout: "padded",
   },
   render: () => (
-    <div className="space-y-8 w-full max-w-2xl">
-      {/* Single Accordion */}
-      <div>
-        <h3 className="text-lg font-semibold mb-4">
-          Single Accordion (Collapsible)
-        </h3>
-        <Accordion type="single" collapsible className="w-full">
-          <AccordionItem value="basic-1">
-            <AccordionTrigger>Basic Single Item</AccordionTrigger>
+    <div className="w-full max-w-4xl space-y-12">
+      {/* Single Selection (Default) */}
+      <section className="space-y-4">
+        <div>
+          <h3 className="text-lg font-semibold">Single Selection Mode</h3>
+          <p className="text-muted-foreground text-sm">
+            Only one item can be expanded at a time. Opening a new item closes
+            the previous one.
+          </p>
+        </div>
+        <Accordion className="w-full" defaultValue={["option-1"]}>
+          <AccordionItem value="option-1">
+            <AccordionTrigger>First Item</AccordionTrigger>
             <AccordionContent>
-              Only one item can be open at a time. Click another to close this
-              one.
+              This is the content of the first item. Opening another item will
+              automatically close this one.
             </AccordionContent>
           </AccordionItem>
-          <AccordionItem value="basic-2">
-            <AccordionTrigger>Another Single Item</AccordionTrigger>
+
+          <AccordionItem value="option-2">
+            <AccordionTrigger>Second Item</AccordionTrigger>
             <AccordionContent>
-              This will close the previous item when opened.
+              This is the content of the second item. Perfect for FAQs where you
+              want users to focus on one answer at a time.
+            </AccordionContent>
+          </AccordionItem>
+
+          <AccordionItem value="option-3">
+            <AccordionTrigger>Third Item</AccordionTrigger>
+            <AccordionContent>
+              This is the content of the third item. Single selection mode keeps
+              the interface clean and focused.
             </AccordionContent>
           </AccordionItem>
         </Accordion>
-      </div>
+      </section>
 
-      {/* Multiple Accordion */}
-      <div>
-        <h3 className="text-lg font-semibold mb-4">Multiple Accordion</h3>
-        <Accordion type="multiple" className="w-full">
+      {/* Multiple Selection */}
+      <section className="space-y-4">
+        <div>
+          <h3 className="text-lg font-semibold">Multiple Selection Mode</h3>
+          <p className="text-muted-foreground text-sm">
+            Multiple items can be expanded simultaneously. Pass an array to
+            defaultValue.
+          </p>
+        </div>
+        <Accordion className="w-full" defaultValue={["multi-1", "multi-2"]}>
           <AccordionItem value="multi-1">
-            <AccordionTrigger>Multiple Item 1</AccordionTrigger>
+            <AccordionTrigger>First Item (Open by Default)</AccordionTrigger>
             <AccordionContent>
-              Multiple items can be open simultaneously.
+              Multiple items can be open at the same time. This is useful for
+              documentation or settings where users may need to reference
+              multiple sections.
             </AccordionContent>
           </AccordionItem>
+
           <AccordionItem value="multi-2">
-            <AccordionTrigger>Multiple Item 2</AccordionTrigger>
+            <AccordionTrigger>Second Item (Also Open)</AccordionTrigger>
+            <AccordionContent>
+              Both this item and the first item are open by default because we
+              passed an array with both values to defaultValue.
+            </AccordionContent>
+          </AccordionItem>
+
+          <AccordionItem value="multi-3">
+            <AccordionTrigger>Third Item (Closed)</AccordionTrigger>
             <AccordionContent>
-              This can be open at the same time as other items.
+              This item starts closed but can be opened without affecting the
+              other open items.
             </AccordionContent>
           </AccordionItem>
         </Accordion>
-      </div>
-
-      {/* With Icons */}
-      <div>
-        <h3 className="text-lg font-semibold mb-4">With Icons</h3>
-        <Accordion type="single" collapsible className="w-full">
-          <AccordionItem value="icon-1">
-            <AccordionTrigger className="flex items-center gap-3">
-              <User className="size-4" />
-              Profile Settings
+      </section>
+
+      {/* Disabled State */}
+      <section className="space-y-4">
+        <div>
+          <h3 className="text-lg font-semibold">Disabled State</h3>
+          <p className="text-muted-foreground text-sm">
+            Entire accordion or individual items can be disabled.
+          </p>
+        </div>
+        <Accordion className="w-full">
+          <AccordionItem value="active-1">
+            <AccordionTrigger>Active Item</AccordionTrigger>
+            <AccordionContent>
+              This item is active and can be toggled normally.
+            </AccordionContent>
+          </AccordionItem>
+
+          <AccordionItem value="disabled-1" disabled>
+            <AccordionTrigger>Disabled Item</AccordionTrigger>
+            <AccordionContent>
+              This content cannot be accessed because the item is disabled.
+            </AccordionContent>
+          </AccordionItem>
+
+          <AccordionItem value="active-2">
+            <AccordionTrigger>Another Active Item</AccordionTrigger>
+            <AccordionContent>
+              This item is also active and works normally.
+            </AccordionContent>
+          </AccordionItem>
+        </Accordion>
+      </section>
+
+      {/* With Icons and Complex Content */}
+      <section className="space-y-4">
+        <div>
+          <h3 className="text-lg font-semibold">With Icons and Rich Content</h3>
+          <p className="text-muted-foreground text-sm">
+            Triggers can include icons and content can contain formatted text,
+            lists, and links.
+          </p>
+        </div>
+        <Accordion className="w-full">
+          <AccordionItem value="rich-1">
+            <AccordionTrigger>
+              <div className="flex items-center gap-3">
+                <div className="bg-primary/10 text-primary rounded-md p-1.5">
+                  <ZapIcon className="size-4" />
+                </div>
+                <span>Performance Optimization</span>
+              </div>
+            </AccordionTrigger>
+            <AccordionContent>
+              <p>
+                Our API is optimized for high performance with global CDN
+                distribution and intelligent caching.
+              </p>
+              <ul className="list-disc space-y-1 pl-5">
+                <li>Average response time under 100ms</li>
+                <li>99.9% uptime SLA on Enterprise plans</li>
+                <li>Auto-scaling infrastructure</li>
+              </ul>
+            </AccordionContent>
+          </AccordionItem>
+
+          <AccordionItem value="rich-2">
+            <AccordionTrigger>
+              <div className="flex items-center gap-3">
+                <div className="bg-primary/10 text-primary rounded-md p-1.5">
+                  <ShieldCheckIcon className="size-4" />
+                </div>
+                <span>Security Features</span>
+              </div>
             </AccordionTrigger>
             <AccordionContent>
-              Update your personal information and preferences.
+              <p>
+                Enterprise-grade security with SOC 2 compliance and advanced
+                threat protection.
+              </p>
+              <p>
+                Features include: API key rotation, IP allowlisting, webhook
+                signature verification, and comprehensive audit logs. Learn more
+                in our <a href="#security">security documentation</a>.
+              </p>
             </AccordionContent>
           </AccordionItem>
-          <AccordionItem value="icon-2">
-            <AccordionTrigger className="flex items-center gap-3">
-              <Lock className="size-4" />
-              Security
+
+          <AccordionItem value="rich-3">
+            <AccordionTrigger>
+              <div className="flex items-center gap-3">
+                <div className="bg-primary/10 text-primary rounded-md p-1.5">
+                  <CodeIcon className="size-4" />
+                </div>
+                <span>Developer Experience</span>
+              </div>
             </AccordionTrigger>
             <AccordionContent>
-              Manage your security settings and two-factor authentication.
+              <p>
+                Built by developers, for developers. Comprehensive
+                documentation, interactive examples, and dedicated support.
+              </p>
+              <p className="bg-muted rounded-md p-3 font-mono text-sm">
+                npm install @neynar/nodejs-sdk
+              </p>
+              <p>Get started in minutes with our SDKs and starter templates.</p>
+            </AccordionContent>
+          </AccordionItem>
+        </Accordion>
+      </section>
+
+      {/* Nested Accordions */}
+      <section className="space-y-4">
+        <div>
+          <h3 className="text-lg font-semibold">Nested Accordions</h3>
+          <p className="text-muted-foreground text-sm">
+            Accordions can be nested for hierarchical content organization.
+          </p>
+        </div>
+        <Accordion className="w-full">
+          <AccordionItem value="parent-1">
+            <AccordionTrigger>API Endpoints</AccordionTrigger>
+            <AccordionContent>
+              <p className="mb-3">Explore our comprehensive API endpoints:</p>
+              <Accordion className="w-full">
+                <AccordionItem value="child-1-1">
+                  <AccordionTrigger>User Endpoints</AccordionTrigger>
+                  <AccordionContent>
+                    Get user profiles, followers, following lists, and user
+                    activity. Supports batch operations and filtering.
+                  </AccordionContent>
+                </AccordionItem>
+                <AccordionItem value="child-1-2">
+                  <AccordionTrigger>Cast Endpoints</AccordionTrigger>
+                  <AccordionContent>
+                    Fetch, create, and manage casts. Includes reactions,
+                    replies, and thread operations.
+                  </AccordionContent>
+                </AccordionItem>
+                <AccordionItem value="child-1-3">
+                  <AccordionTrigger>Feed Endpoints</AccordionTrigger>
+                  <AccordionContent>
+                    Access personalized feeds, channel feeds, and trending
+                    content with advanced filtering.
+                  </AccordionContent>
+                </AccordionItem>
+              </Accordion>
+            </AccordionContent>
+          </AccordionItem>
+
+          <AccordionItem value="parent-2">
+            <AccordionTrigger>Authentication Methods</AccordionTrigger>
+            <AccordionContent>
+              <p className="mb-3">Multiple authentication options available:</p>
+              <Accordion className="w-full">
+                <AccordionItem value="child-2-1">
+                  <AccordionTrigger>API Key Authentication</AccordionTrigger>
+                  <AccordionContent>
+                    Simple bearer token authentication for server-to-server
+                    communication. Best for backend services.
+                  </AccordionContent>
+                </AccordionItem>
+                <AccordionItem value="child-2-2">
+                  <AccordionTrigger>Sign-In with Farcaster</AccordionTrigger>
+                  <AccordionContent>
+                    OAuth 2.0 compatible authentication for user-facing
+                    applications. Supports QR codes and deep links.
+                  </AccordionContent>
+                </AccordionItem>
+              </Accordion>
             </AccordionContent>
           </AccordionItem>
         </Accordion>
-      </div>
-
-      {/* Default Open */}
-      <div>
-        <h3 className="text-lg font-semibold mb-4">Default Open State</h3>
-        <Accordion
-          type="single"
-          collapsible
-          defaultValue="default-open"
-          className="w-full"
-        >
-          <AccordionItem value="default-closed">
-            <AccordionTrigger>Closed by Default</AccordionTrigger>
-            <AccordionContent>This item starts closed.</AccordionContent>
+      </section>
+
+      {/* No Default Selection */}
+      <section className="space-y-4">
+        <div>
+          <h3 className="text-lg font-semibold">All Items Closed by Default</h3>
+          <p className="text-muted-foreground text-sm">
+            Omit defaultValue to start with all items collapsed.
+          </p>
+        </div>
+        <Accordion className="w-full">
+          <AccordionItem value="closed-1">
+            <AccordionTrigger>First Item</AccordionTrigger>
+            <AccordionContent>
+              All items start closed when no defaultValue is provided.
+            </AccordionContent>
+          </AccordionItem>
+
+          <AccordionItem value="closed-2">
+            <AccordionTrigger>Second Item</AccordionTrigger>
+            <AccordionContent>
+              Users must click to reveal content, keeping the interface compact.
+            </AccordionContent>
           </AccordionItem>
-          <AccordionItem value="default-open">
-            <AccordionTrigger>Open by Default</AccordionTrigger>
+
+          <AccordionItem value="closed-3">
+            <AccordionTrigger>Third Item</AccordionTrigger>
             <AccordionContent>
-              This item is open when the accordion first loads due to the
-              defaultValue prop.
+              Useful for long lists of optional information.
             </AccordionContent>
           </AccordionItem>
         </Accordion>
-      </div>
+      </section>
     </div>
   ),
 };
 
 /**
- * Real-world example showing accordion in a practical application context.
- * Demonstrates how accordions work in complex UI scenarios like settings panels or FAQ sections.
+ * Interactive playground for testing accordion props.
  */
-export const InContext: Story = {
+export const Interactive: Story = {
   args: {
-    type: "single",
-    collapsible: true,
-    className: "w-96",
-  },
-  parameters: {
-    docs: {
-      description: {
-        story:
-          "Shows accordion used in a realistic application context - a comprehensive account settings page with organized sections.",
-      },
-    },
+    defaultValue: ["item-1"],
   },
-  render: () => (
-    <div className="w-full max-w-4xl mx-auto p-6 bg-background">
-      {/* Header */}
-      <div className="mb-8">
-        <h1 className="text-3xl font-bold mb-2">Account Settings</h1>
-        <p className="text-muted-foreground">
-          Manage your account preferences, security settings, and notification
-          options.
-        </p>
-      </div>
-
-      {/* Settings Accordion */}
-      <Accordion type="single" collapsible className="w-full space-y-2">
-        {/* Profile Section */}
-        <AccordionItem value="profile" className="border rounded-lg px-4">
-          <AccordionTrigger className="hover:no-underline py-6">
-            <div className="flex items-center gap-4">
-              <div className="p-2 bg-blue-100 dark:bg-blue-900 rounded-lg">
-                <User className="size-5 text-blue-600 dark:text-blue-400" />
-              </div>
-              <div className="text-left">
-                <h3 className="font-semibold">Profile Information</h3>
-                <p className="text-sm text-muted-foreground">
-                  Update your personal details and preferences
-                </p>
-              </div>
-            </div>
-          </AccordionTrigger>
-          <AccordionContent className="pb-6">
-            <div className="space-y-4 pl-16">
-              <div className="grid grid-cols-2 gap-4">
-                <div>
-                  <label className="text-sm font-medium">Full Name</label>
-                  <div className="mt-1 p-2 border rounded text-sm">
-                    John Doe
-                  </div>
-                </div>
-                <div>
-                  <label className="text-sm font-medium">Email</label>
-                  <div className="mt-1 p-2 border rounded text-sm">
-                    john.doe@example.com
-                  </div>
-                </div>
-              </div>
-              <div>
-                <label className="text-sm font-medium">Bio</label>
-                <div className="mt-1 p-2 border rounded text-sm min-h-[80px]">
-                  Software developer with a passion for creating great user
-                  experiences.
-                </div>
-              </div>
-            </div>
-          </AccordionContent>
-        </AccordionItem>
-
-        {/* Security Section */}
-        <AccordionItem value="security" className="border rounded-lg px-4">
-          <AccordionTrigger className="hover:no-underline py-6">
-            <div className="flex items-center gap-4">
-              <div className="p-2 bg-green-100 dark:bg-green-900 rounded-lg">
-                <Shield className="size-5 text-green-600 dark:text-green-400" />
-              </div>
-              <div className="text-left">
-                <h3 className="font-semibold">Security & Privacy</h3>
-                <p className="text-sm text-muted-foreground">
-                  Manage passwords, 2FA, and privacy settings
-                </p>
-              </div>
-            </div>
-          </AccordionTrigger>
-          <AccordionContent className="pb-6">
-            <div className="space-y-4 pl-16">
-              <div className="flex items-center justify-between p-3 bg-muted rounded-lg">
-                <div>
-                  <div className="font-medium">Two-Factor Authentication</div>
-                  <div className="text-sm text-muted-foreground">
-                    Add an extra layer of security
-                  </div>
-                </div>
-                <div className="px-3 py-1 bg-green-100 text-green-800 rounded-full text-xs font-medium">
-                  Enabled
-                </div>
-              </div>
-              <div className="flex items-center justify-between p-3 bg-muted rounded-lg">
-                <div>
-                  <div className="font-medium">Password</div>
-                  <div className="text-sm text-muted-foreground">
-                    Last changed 30 days ago
-                  </div>
-                </div>
-                <button className="px-3 py-1 bg-primary text-primary-foreground rounded text-sm">
-                  Change
-                </button>
-              </div>
-            </div>
+  render: (args) => (
+    <div className="w-full max-w-xl">
+      <Accordion {...args}>
+        <AccordionItem value="item-1">
+          <AccordionTrigger>What is Neynar?</AccordionTrigger>
+          <AccordionContent>
+            Neynar is the leading infrastructure platform for building on
+            Farcaster. We provide APIs, SDKs, and tools to help developers
+            create amazing social applications.
           </AccordionContent>
         </AccordionItem>
 
-        {/* Billing Section */}
-        <AccordionItem value="billing" className="border rounded-lg px-4">
-          <AccordionTrigger className="hover:no-underline py-6">
-            <div className="flex items-center gap-4">
-              <div className="p-2 bg-purple-100 dark:bg-purple-900 rounded-lg">
-                <CreditCard className="size-5 text-purple-600 dark:text-purple-400" />
-              </div>
-              <div className="text-left">
-                <h3 className="font-semibold">Billing & Subscription</h3>
-                <p className="text-sm text-muted-foreground">
-                  Manage payment methods and billing history
-                </p>
-              </div>
-            </div>
-          </AccordionTrigger>
-          <AccordionContent className="pb-6">
-            <div className="space-y-4 pl-16">
-              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-                <div className="p-4 border rounded-lg">
-                  <div className="flex items-center justify-between mb-2">
-                    <span className="font-medium">Current Plan</span>
-                    <span className="text-sm bg-blue-100 text-blue-800 px-2 py-1 rounded">
-                      Pro
-                    </span>
-                  </div>
-                  <p className="text-sm text-muted-foreground">
-                    $19/month • Billed monthly
-                  </p>
-                </div>
-                <div className="p-4 border rounded-lg">
-                  <div className="font-medium mb-2">Payment Method</div>
-                  <p className="text-sm text-muted-foreground">
-                    •••• •••• •••• 4242
-                  </p>
-                  <p className="text-xs text-muted-foreground">
-                    Expires 12/2027
-                  </p>
-                </div>
-              </div>
-            </div>
+        <AccordionItem value="item-2">
+          <AccordionTrigger>How do I get an API key?</AccordionTrigger>
+          <AccordionContent>
+            Sign up for a free account at neynar.com and navigate to your
+            dashboard. You can generate a new API key from the API Keys section.
           </AccordionContent>
         </AccordionItem>
 
-        {/* Notifications Section */}
-        <AccordionItem value="notifications" className="border rounded-lg px-4">
-          <AccordionTrigger className="hover:no-underline py-6">
-            <div className="flex items-center gap-4">
-              <div className="p-2 bg-orange-100 dark:bg-orange-900 rounded-lg">
-                <Bell className="size-5 text-orange-600 dark:text-orange-400" />
-              </div>
-              <div className="text-left">
-                <h3 className="font-semibold">Notification Preferences</h3>
-                <p className="text-sm text-muted-foreground">
-                  Control how and when you receive notifications
-                </p>
-              </div>
-            </div>
+        <AccordionItem value="item-3">
+          <AccordionTrigger>
+            What support options are available?
           </AccordionTrigger>
-          <AccordionContent className="pb-6">
-            <div className="space-y-3 pl-16">
-              {[
-                {
-                  name: "Email Notifications",
-                  desc: "Receive updates via email",
-                  enabled: true,
-                },
-                {
-                  name: "Push Notifications",
-                  desc: "Browser and mobile notifications",
-                  enabled: false,
-                },
-                {
-                  name: "SMS Notifications",
-                  desc: "Text message alerts for important updates",
-                  enabled: true,
-                },
-                {
-                  name: "Marketing Communications",
-                  desc: "Product updates and special offers",
-                  enabled: false,
-                },
-              ].map((item, index) => (
-                <div
-                  key={index}
-                  className="flex items-center justify-between p-3 bg-muted rounded-lg"
-                >
-                  <div>
-                    <div className="font-medium">{item.name}</div>
-                    <div className="text-sm text-muted-foreground">
-                      {item.desc}
-                    </div>
-                  </div>
-                  <div
-                    className={`w-10 h-6 rounded-full p-1 ${item.enabled ? "bg-blue-600" : "bg-gray-300"}`}
-                  >
-                    <div
-                      className={`w-4 h-4 rounded-full bg-white transition-transform ${item.enabled ? "translate-x-4" : "translate-x-0"}`}
-                    />
-                  </div>
-                </div>
-              ))}
-            </div>
+          <AccordionContent>
+            We offer email support for all users, priority support for Pro
+            users, and dedicated Slack channels for Enterprise customers. Our
+            documentation and community Discord are available to everyone.
           </AccordionContent>
         </AccordionItem>
       </Accordion>