@tribepad/themis 1.0.0

package/src/elements/Accordion/Accordion.stories.tsx

@@ -0,0 +1,793 @@
+/**
+ * Accordion Component Storybook Stories
+ *
+ * @see accordion-prd.md FR-001 to FR-011 (Accordion Requirements)
+ * @see plan.md (Implementation Plan)
+ */
+
+import type { Meta, StoryObj } from '@storybook/nextjs';
+import { useState, type Key } from 'react';
+import { Accordion, AccordionItem, AccordionTrigger, AccordionContent } from './Accordion';
+import { Plus, Minus, ChevronRight, Settings, User, Bell, Lock } from 'lucide-react';
+
+const meta = {
+  title: 'Elements/Accordion',
+  component: Accordion,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component:
+          'Accessible accordion/disclosure group component with WCAG 2.2 AAA compliance, React Aria DisclosureGroup primitives, single/multiple expansion modes, controlled and uncontrolled state management, configurable heading levels, custom icon support, and React 19.2 Activity state preservation.',
+      },
+    },
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    type: {
+      control: 'select',
+      options: ['single', 'multiple'],
+      description: 'Expansion mode: single (one at a time) or multiple (any number)',
+    },
+    collapsible: {
+      control: 'boolean',
+      description: 'Allow all items to be collapsed (single mode only)',
+    },
+    isDisabled: {
+      control: 'boolean',
+      description: 'Disable all items',
+    },
+  },
+} satisfies Meta<typeof Accordion>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// ============================================================================
+// Default Stories
+// ============================================================================
+
+/**
+ * Default: Basic FAQ-style accordion
+ */
+export const Default: Story = {
+  render: () => (
+    <Accordion type="single" collapsible className="w-[450px]">
+      <AccordionItem id="item-1">
+        <AccordionTrigger>Is it accessible?</AccordionTrigger>
+        <AccordionContent>
+          Yes. It adheres to the WAI-ARIA design pattern and is WCAG 2.2 AAA compliant.
+        </AccordionContent>
+      </AccordionItem>
+      <AccordionItem id="item-2">
+        <AccordionTrigger>Is it styled?</AccordionTrigger>
+        <AccordionContent>
+          Yes. It comes with default styles that match the Themis design system
+          and can be customized with CSS classes.
+        </AccordionContent>
+      </AccordionItem>
+      <AccordionItem id="item-3">
+        <AccordionTrigger>Is it animated?</AccordionTrigger>
+        <AccordionContent>
+          Yes. It has smooth height animations with reduced motion support
+          for users who prefer reduced motion.
+        </AccordionContent>
+      </AccordionItem>
+    </Accordion>
+  ),
+};
+
+// ============================================================================
+// Expansion Mode Stories
+// ============================================================================
+
+/**
+ * SingleCollapsible: Only one item open at a time, all can be closed
+ */
+export const SingleCollapsible: Story = {
+  render: () => (
+    <Accordion type="single" collapsible className="w-[450px]">
+      <AccordionItem id="item-1">
+        <AccordionTrigger>Section 1</AccordionTrigger>
+        <AccordionContent>
+          Click another section to collapse this one. Click the same trigger to close.
+        </AccordionContent>
+      </AccordionItem>
+      <AccordionItem id="item-2">
+        <AccordionTrigger>Section 2</AccordionTrigger>
+        <AccordionContent>
+          Only one section can be open at a time in single mode.
+        </AccordionContent>
+      </AccordionItem>
+      <AccordionItem id="item-3">
+        <AccordionTrigger>Section 3</AccordionTrigger>
+        <AccordionContent>
+          The collapsible prop allows all sections to be closed.
+        </AccordionContent>
+      </AccordionItem>
+    </Accordion>
+  ),
+};
+
+/**
+ * SingleNotCollapsible: One item always open
+ */
+export const SingleNotCollapsible: Story = {
+  render: () => (
+    <Accordion type="single" collapsible={false} className="w-[450px]">
+      <AccordionItem id="item-1">
+        <AccordionTrigger>Always One Open</AccordionTrigger>
+        <AccordionContent>
+          With collapsible=false, one item is always expanded.
+          The first item auto-expands on mount.
+        </AccordionContent>
+      </AccordionItem>
+      <AccordionItem id="item-2">
+        <AccordionTrigger>Click To Switch</AccordionTrigger>
+        <AccordionContent>
+          Clicking this closes the previous item.
+        </AccordionContent>
+      </AccordionItem>
+      <AccordionItem id="item-3">
+        <AccordionTrigger>Cannot Close All</AccordionTrigger>
+        <AccordionContent>
+          Clicking the open item does nothing - one must stay open.
+        </AccordionContent>
+      </AccordionItem>
+    </Accordion>
+  ),
+};
+
+/**
+ * Multiple: Multiple items can be open simultaneously
+ */
+export const Multiple: Story = {
+  render: () => (
+    <Accordion type="multiple" className="w-[450px]">
+      <AccordionItem id="item-1">
+        <AccordionTrigger>Section 1</AccordionTrigger>
+        <AccordionContent>
+          Open multiple sections at once in multiple mode.
+        </AccordionContent>
+      </AccordionItem>
+      <AccordionItem id="item-2">
+        <AccordionTrigger>Section 2</AccordionTrigger>
+        <AccordionContent>
+          Each section operates independently.
+        </AccordionContent>
+      </AccordionItem>
+      <AccordionItem id="item-3">
+        <AccordionTrigger>Section 3</AccordionTrigger>
+        <AccordionContent>
+          All sections can be open or closed at the same time.
+        </AccordionContent>
+      </AccordionItem>
+    </Accordion>
+  ),
+};
+
+/**
+ * MultipleDefaultExpanded: Multiple mode with some items expanded by default
+ */
+export const MultipleDefaultExpanded: Story = {
+  render: () => (
+    <Accordion type="multiple" defaultExpandedKeys={['item-1', 'item-3']} className="w-[450px]">
+      <AccordionItem id="item-1">
+        <AccordionTrigger>Expanded by Default</AccordionTrigger>
+        <AccordionContent>
+          This section is expanded when the page loads.
+        </AccordionContent>
+      </AccordionItem>
+      <AccordionItem id="item-2">
+        <AccordionTrigger>Collapsed by Default</AccordionTrigger>
+        <AccordionContent>
+          This section starts collapsed.
+        </AccordionContent>
+      </AccordionItem>
+      <AccordionItem id="item-3">
+        <AccordionTrigger>Also Expanded by Default</AccordionTrigger>
+        <AccordionContent>
+          Multiple items can be expanded by default using defaultExpandedKeys.
+        </AccordionContent>
+      </AccordionItem>
+    </Accordion>
+  ),
+};
+
+// ============================================================================
+// Disabled States Stories
+// ============================================================================
+
+/**
+ * Disabled: All items disabled
+ */
+export const Disabled: Story = {
+  render: () => (
+    <Accordion type="single" collapsible isDisabled className="w-[450px]">
+      <AccordionItem id="item-1">
+        <AccordionTrigger>Disabled Item 1</AccordionTrigger>
+        <AccordionContent>
+          Cannot interact with disabled accordion.
+        </AccordionContent>
+      </AccordionItem>
+      <AccordionItem id="item-2">
+        <AccordionTrigger>Disabled Item 2</AccordionTrigger>
+        <AccordionContent>
+          All items are disabled.
+        </AccordionContent>
+      </AccordionItem>
+    </Accordion>
+  ),
+};
+
+/**
+ * DisabledKeys: Specific items disabled
+ */
+export const DisabledKeys: Story = {
+  render: () => (
+    <Accordion type="single" collapsible disabledKeys={['item-2']} className="w-[450px]">
+      <AccordionItem id="item-1">
+        <AccordionTrigger>Free Features</AccordionTrigger>
+        <AccordionContent>
+          Available to all users. Click to expand.
+        </AccordionContent>
+      </AccordionItem>
+      <AccordionItem id="item-2">
+        <AccordionTrigger>Premium Features (Locked)</AccordionTrigger>
+        <AccordionContent>
+          Requires subscription to access.
+        </AccordionContent>
+      </AccordionItem>
+      <AccordionItem id="item-3">
+        <AccordionTrigger>More Free Features</AccordionTrigger>
+        <AccordionContent>
+          Also available to all users.
+        </AccordionContent>
+      </AccordionItem>
+    </Accordion>
+  ),
+};
+
+/**
+ * ItemDisabled: Individual item disabled via prop
+ */
+export const ItemDisabled: Story = {
+  render: () => (
+    <Accordion type="single" collapsible className="w-[450px]">
+      <AccordionItem id="item-1">
+        <AccordionTrigger>Available Section</AccordionTrigger>
+        <AccordionContent>
+          This section works normally.
+        </AccordionContent>
+      </AccordionItem>
+      <AccordionItem id="item-2" isDisabled>
+        <AccordionTrigger>Coming Soon</AccordionTrigger>
+        <AccordionContent>
+          This feature is under development.
+        </AccordionContent>
+      </AccordionItem>
+      <AccordionItem id="item-3">
+        <AccordionTrigger>Another Available Section</AccordionTrigger>
+        <AccordionContent>
+          This section also works normally.
+        </AccordionContent>
+      </AccordionItem>
+    </Accordion>
+  ),
+};
+
+// ============================================================================
+// Custom Icon Stories
+// ============================================================================
+
+/**
+ * CustomIcon: Custom expand/collapse icons
+ */
+export const CustomIcon: Story = {
+  render: () => (
+    <Accordion type="single" collapsible className="w-[450px]">
+      <AccordionItem id="item-1">
+        <AccordionTrigger icon={<ChevronRight className="h-4 w-4 transition-transform duration-200 data-[expanded]:rotate-90" />}>
+          Right Chevron Icon
+        </AccordionTrigger>
+        <AccordionContent>
+          Using a right-pointing chevron that rotates 90 degrees.
+        </AccordionContent>
+      </AccordionItem>
+      <AccordionItem id="item-2">
+        <AccordionTrigger icon={<Plus className="h-4 w-4" />}>
+          Plus Icon
+        </AccordionTrigger>
+        <AccordionContent>
+          Using a plus icon (could animate to minus with CSS).
+        </AccordionContent>
+      </AccordionItem>
+    </Accordion>
+  ),
+};
+
+/**
+ * NoIcon: Trigger without icon
+ */
+export const NoIcon: Story = {
+  render: () => (
+    <Accordion type="single" collapsible className="w-[450px]">
+      <AccordionItem id="item-1">
+        <AccordionTrigger hideIcon>Clean Trigger Style</AccordionTrigger>
+        <AccordionContent>
+          No icon displayed - cleaner look for some use cases.
+        </AccordionContent>
+      </AccordionItem>
+      <AccordionItem id="item-2">
+        <AccordionTrigger hideIcon>Another Clean Trigger</AccordionTrigger>
+        <AccordionContent>
+          The hideIcon prop removes the default chevron.
+        </AccordionContent>
+      </AccordionItem>
+    </Accordion>
+  ),
+};
+
+// ============================================================================
+// Heading Level Stories
+// ============================================================================
+
+/**
+ * HeadingLevels: Different heading levels for document structure
+ */
+export const HeadingLevels: Story = {
+  render: () => (
+    <div className="w-[450px] space-y-8">
+      <div>
+        <h1 className="text-xl font-bold mb-4">Page Title (h1)</h1>
+        <Accordion type="single" collapsible>
+          <AccordionItem id="item-1">
+            <AccordionTrigger as="h2">Section (h2)</AccordionTrigger>
+            <AccordionContent>
+              Uses h2 for main page sections.
+            </AccordionContent>
+          </AccordionItem>
+        </Accordion>
+      </div>
+      <div>
+        <h2 className="text-lg font-bold mb-4">Section Title (h2)</h2>
+        <Accordion type="single" collapsible>
+          <AccordionItem id="item-2">
+            <AccordionTrigger as="h3">Subsection (h3 - default)</AccordionTrigger>
+            <AccordionContent>
+              Default h3 is appropriate for subsections.
+            </AccordionContent>
+          </AccordionItem>
+        </Accordion>
+      </div>
+      <div>
+        <h3 className="text-base font-bold mb-4">Subsection Title (h3)</h3>
+        <Accordion type="single" collapsible>
+          <AccordionItem id="item-3">
+            <AccordionTrigger as="h4">FAQ Item (h4)</AccordionTrigger>
+            <AccordionContent>
+              Uses h4 for deeply nested content.
+            </AccordionContent>
+          </AccordionItem>
+        </Accordion>
+      </div>
+    </div>
+  ),
+};
+
+// ============================================================================
+// Controlled Mode Story
+// ============================================================================
+
+/**
+ * Controlled: Externally controlled expansion state
+ */
+export const Controlled: Story = {
+  render: function ControlledAccordion() {
+    const [expandedKeys, setExpandedKeys] = useState<Set<Key>>(new Set(['item-1']));
+
+    const toggleItem = (key: Key) => {
+      setExpandedKeys((prev) => {
+        const newSet = new Set(prev);
+        if (newSet.has(key)) {
+          newSet.delete(key);
+        } else {
+          newSet.add(key);
+        }
+        return newSet;
+      });
+    };
+
+    return (
+      <div className="w-[450px]">
+        <div className="flex gap-2 mb-4">
+          <button
+            onClick={() => toggleItem('item-1')}
+            className={`px-3 py-1 text-sm rounded-md ${
+              expandedKeys.has('item-1')
+                ? 'bg-[var(--primary)] text-[var(--primary-foreground)]'
+                : 'bg-[var(--muted)] text-[var(--muted-foreground)]'
+            }`}
+          >
+            Toggle 1
+          </button>
+          <button
+            onClick={() => toggleItem('item-2')}
+            className={`px-3 py-1 text-sm rounded-md ${
+              expandedKeys.has('item-2')
+                ? 'bg-[var(--primary)] text-[var(--primary-foreground)]'
+                : 'bg-[var(--muted)] text-[var(--muted-foreground)]'
+            }`}
+          >
+            Toggle 2
+          </button>
+          <button
+            onClick={() => toggleItem('item-3')}
+            className={`px-3 py-1 text-sm rounded-md ${
+              expandedKeys.has('item-3')
+                ? 'bg-[var(--primary)] text-[var(--primary-foreground)]'
+                : 'bg-[var(--muted)] text-[var(--muted-foreground)]'
+            }`}
+          >
+            Toggle 3
+          </button>
+        </div>
+        <Accordion
+          type="multiple"
+          expandedKeys={expandedKeys}
+          onExpandedChange={setExpandedKeys}
+        >
+          <AccordionItem id="item-1">
+            <AccordionTrigger>Section 1</AccordionTrigger>
+            <AccordionContent>
+              Controlled externally via expandedKeys state.
+            </AccordionContent>
+          </AccordionItem>
+          <AccordionItem id="item-2">
+            <AccordionTrigger>Section 2</AccordionTrigger>
+            <AccordionContent>
+              Use the buttons above or click the triggers.
+            </AccordionContent>
+          </AccordionItem>
+          <AccordionItem id="item-3">
+            <AccordionTrigger>Section 3</AccordionTrigger>
+            <AccordionContent>
+              Both methods update the same state.
+            </AccordionContent>
+          </AccordionItem>
+        </Accordion>
+      </div>
+    );
+  },
+};
+
+// ============================================================================
+// Real-World Examples
+// ============================================================================
+
+/**
+ * FAQ: Frequently Asked Questions pattern
+ */
+export const FAQ: Story = {
+  render: () => (
+    <div className="w-[500px]">
+      <h2 className="text-xl font-semibold mb-4">Frequently Asked Questions</h2>
+      <Accordion type="single" collapsible>
+        <AccordionItem id="faq-1">
+          <AccordionTrigger>How do I create an account?</AccordionTrigger>
+          <AccordionContent>
+            Click the "Sign Up" button in the top right corner. Fill in your email
+            address and create a password. You'll receive a verification email
+            to confirm your account.
+          </AccordionContent>
+        </AccordionItem>
+        <AccordionItem id="faq-2">
+          <AccordionTrigger>What payment methods do you accept?</AccordionTrigger>
+          <AccordionContent>
+            We accept all major credit cards (Visa, MasterCard, American Express),
+            PayPal, and bank transfers. Enterprise customers can also pay by invoice.
+          </AccordionContent>
+        </AccordionItem>
+        <AccordionItem id="faq-3">
+          <AccordionTrigger>How do I cancel my subscription?</AccordionTrigger>
+          <AccordionContent>
+            Go to Settings → Billing → Cancel Subscription. Your access will
+            continue until the end of your current billing period. You can
+            reactivate at any time.
+          </AccordionContent>
+        </AccordionItem>
+        <AccordionItem id="faq-4">
+          <AccordionTrigger>Is my data secure?</AccordionTrigger>
+          <AccordionContent>
+            Yes, we use industry-standard encryption (AES-256) for all data at
+            rest and in transit. We're SOC 2 Type II certified and GDPR compliant.
+          </AccordionContent>
+        </AccordionItem>
+      </Accordion>
+    </div>
+  ),
+};
+
+/**
+ * SettingsPanel: Settings page pattern with icons
+ */
+export const SettingsPanel: Story = {
+  render: () => (
+    <div className="w-[500px]">
+      <h2 className="text-xl font-semibold mb-4">Settings</h2>
+      <Accordion type="multiple" defaultExpandedKeys={['settings-account']}>
+        <AccordionItem id="settings-account">
+          <AccordionTrigger>
+            <span className="flex items-center gap-2">
+              <User className="h-4 w-4" />
+              Account Settings
+            </span>
+          </AccordionTrigger>
+          <AccordionContent>
+            <div className="space-y-4">
+              <div>
+                <label className="block text-sm font-medium mb-1">Display Name</label>
+                <input
+                  type="text"
+                  className="w-full px-3 py-2 border border-[var(--border)] rounded-md"
+                  defaultValue="John Doe"
+                />
+              </div>
+              <div>
+                <label className="block text-sm font-medium mb-1">Email</label>
+                <input
+                  type="email"
+                  className="w-full px-3 py-2 border border-[var(--border)] rounded-md"
+                  defaultValue="john@example.com"
+                />
+              </div>
+            </div>
+          </AccordionContent>
+        </AccordionItem>
+        <AccordionItem id="settings-security">
+          <AccordionTrigger>
+            <span className="flex items-center gap-2">
+              <Lock className="h-4 w-4" />
+              Security
+            </span>
+          </AccordionTrigger>
+          <AccordionContent>
+            <div className="space-y-4">
+              <div className="flex items-center justify-between">
+                <span className="text-sm">Two-Factor Authentication</span>
+                <button className="px-3 py-1 text-sm bg-[var(--primary)] text-[var(--primary-foreground)] rounded-md">
+                  Enable
+                </button>
+              </div>
+              <div className="flex items-center justify-between">
+                <span className="text-sm">Active Sessions</span>
+                <button className="px-3 py-1 text-sm border border-[var(--border)] rounded-md">
+                  View All
+                </button>
+              </div>
+            </div>
+          </AccordionContent>
+        </AccordionItem>
+        <AccordionItem id="settings-notifications">
+          <AccordionTrigger>
+            <span className="flex items-center gap-2">
+              <Bell className="h-4 w-4" />
+              Notifications
+            </span>
+          </AccordionTrigger>
+          <AccordionContent>
+            <div className="space-y-3">
+              <label className="flex items-center gap-2">
+                <input type="checkbox" defaultChecked className="rounded" />
+                <span className="text-sm">Email notifications</span>
+              </label>
+              <label className="flex items-center gap-2">
+                <input type="checkbox" defaultChecked className="rounded" />
+                <span className="text-sm">Push notifications</span>
+              </label>
+              <label className="flex items-center gap-2">
+                <input type="checkbox" className="rounded" />
+                <span className="text-sm">SMS notifications</span>
+              </label>
+            </div>
+          </AccordionContent>
+        </AccordionItem>
+      </Accordion>
+    </div>
+  ),
+};
+
+/**
+ * ProductDetails: E-commerce product details pattern
+ */
+export const ProductDetails: Story = {
+  render: () => (
+    <div className="w-[500px]">
+      <Accordion type="single" collapsible defaultExpandedKeys={['description']}>
+        <AccordionItem id="description">
+          <AccordionTrigger as="h2">Product Description</AccordionTrigger>
+          <AccordionContent>
+            <p className="text-sm leading-relaxed">
+              Crafted with premium materials, this product combines style with
+              functionality. Perfect for everyday use, it features durable
+              construction and elegant design that complements any setting.
+            </p>
+          </AccordionContent>
+        </AccordionItem>
+        <AccordionItem id="specifications">
+          <AccordionTrigger as="h2">Specifications</AccordionTrigger>
+          <AccordionContent>
+            <dl className="grid grid-cols-2 gap-2 text-sm">
+              <dt className="text-[var(--muted-foreground)]">Material</dt>
+              <dd>Premium Cotton Blend</dd>
+              <dt className="text-[var(--muted-foreground)]">Dimensions</dt>
+              <dd>10" x 8" x 4"</dd>
+              <dt className="text-[var(--muted-foreground)]">Weight</dt>
+              <dd>1.2 lbs</dd>
+              <dt className="text-[var(--muted-foreground)]">Color</dt>
+              <dd>Charcoal Grey</dd>
+            </dl>
+          </AccordionContent>
+        </AccordionItem>
+        <AccordionItem id="shipping">
+          <AccordionTrigger as="h2">Shipping & Returns</AccordionTrigger>
+          <AccordionContent>
+            <ul className="text-sm space-y-2 list-disc list-inside">
+              <li>Free shipping on orders over $50</li>
+              <li>Standard delivery: 3-5 business days</li>
+              <li>Express delivery: 1-2 business days</li>
+              <li>30-day hassle-free returns</li>
+            </ul>
+          </AccordionContent>
+        </AccordionItem>
+      </Accordion>
+    </div>
+  ),
+};
+
+// ============================================================================
+// State Preservation Story
+// ============================================================================
+
+/**
+ * PreserveState: Form with React Activity state preservation
+ */
+export const PreserveState: Story = {
+  render: () => (
+    <div className="w-[500px]">
+      <p className="text-sm text-[var(--muted-foreground)] mb-4">
+        Type in the form, collapse the section, then expand again - your input is preserved!
+      </p>
+      <Accordion type="single" collapsible>
+        <AccordionItem id="form">
+          <AccordionTrigger>Contact Form (State Preserved)</AccordionTrigger>
+          <AccordionContent preserveState>
+            <div className="space-y-4">
+              <div>
+                <label className="block text-sm font-medium mb-1">Name</label>
+                <input
+                  type="text"
+                  className="w-full px-3 py-2 border border-[var(--border)] rounded-md"
+                  placeholder="Enter your name"
+                />
+              </div>
+              <div>
+                <label className="block text-sm font-medium mb-1">Email</label>
+                <input
+                  type="email"
+                  className="w-full px-3 py-2 border border-[var(--border)] rounded-md"
+                  placeholder="Enter your email"
+                />
+              </div>
+              <div>
+                <label className="block text-sm font-medium mb-1">Message</label>
+                <textarea
+                  className="w-full px-3 py-2 border border-[var(--border)] rounded-md"
+                  rows={3}
+                  placeholder="Enter your message"
+                />
+              </div>
+            </div>
+          </AccordionContent>
+        </AccordionItem>
+        <AccordionItem id="other">
+          <AccordionTrigger>Other Section</AccordionTrigger>
+          <AccordionContent>
+            <p className="text-sm text-[var(--muted-foreground)]">
+              Expand the form section above, fill it in, collapse it, then expand again.
+              Your form data will be preserved thanks to React Activity.
+            </p>
+          </AccordionContent>
+        </AccordionItem>
+      </Accordion>
+    </div>
+  ),
+};
+
+// ============================================================================
+// RTL Story
+// ============================================================================
+
+/**
+ * RTL: Right-to-left layout
+ */
+export const RTL: Story = {
+  render: () => (
+    <div dir="rtl" className="w-[450px]">
+      <Accordion type="single" collapsible>
+        <AccordionItem id="item-1">
+          <AccordionTrigger>هل هو متاح؟</AccordionTrigger>
+          <AccordionContent>
+            نعم. إنه يتوافق مع نمط تصميم WAI-ARIA.
+          </AccordionContent>
+        </AccordionItem>
+        <AccordionItem id="item-2">
+          <AccordionTrigger>هل له أسلوب؟</AccordionTrigger>
+          <AccordionContent>
+            نعم. يأتي مع أنماط افتراضية تطابق نظام التصميم.
+          </AccordionContent>
+        </AccordionItem>
+        <AccordionItem id="item-3">
+          <AccordionTrigger>هل هو متحرك؟</AccordionTrigger>
+          <AccordionContent>
+            نعم. يحتوي على رسوم متحركة سلسة للارتفاع.
+          </AccordionContent>
+        </AccordionItem>
+      </Accordion>
+    </div>
+  ),
+};
+
+// ============================================================================
+// Nested Accordion Story
+// ============================================================================
+
+/**
+ * Nested: Accordion within accordion
+ */
+export const Nested: Story = {
+  render: () => (
+    <div className="w-[500px]">
+      <Accordion type="single" collapsible>
+        <AccordionItem id="parent-1">
+          <AccordionTrigger as="h2">Category 1</AccordionTrigger>
+          <AccordionContent>
+            <Accordion type="single" collapsible className="pl-4 border-l border-[var(--border)]">
+              <AccordionItem id="child-1-1">
+                <AccordionTrigger as="h3">Subcategory 1.1</AccordionTrigger>
+                <AccordionContent>
+                  Content for subcategory 1.1
+                </AccordionContent>
+              </AccordionItem>
+              <AccordionItem id="child-1-2">
+                <AccordionTrigger as="h3">Subcategory 1.2</AccordionTrigger>
+                <AccordionContent>
+                  Content for subcategory 1.2
+                </AccordionContent>
+              </AccordionItem>
+            </Accordion>
+          </AccordionContent>
+        </AccordionItem>
+        <AccordionItem id="parent-2">
+          <AccordionTrigger as="h2">Category 2</AccordionTrigger>
+          <AccordionContent>
+            <Accordion type="single" collapsible className="pl-4 border-l border-[var(--border)]">
+              <AccordionItem id="child-2-1">
+                <AccordionTrigger as="h3">Subcategory 2.1</AccordionTrigger>
+                <AccordionContent>
+                  Content for subcategory 2.1
+                </AccordionContent>
+              </AccordionItem>
+              <AccordionItem id="child-2-2">
+                <AccordionTrigger as="h3">Subcategory 2.2</AccordionTrigger>
+                <AccordionContent>
+                  Content for subcategory 2.2
+                </AccordionContent>
+              </AccordionItem>
+            </Accordion>
+          </AccordionContent>
+        </AccordionItem>
+      </Accordion>
+    </div>
+  ),
+};