Accordion

import { Accordion } from '@kivora/react';

const items = [
  {
    id: 'item-1',
    trigger: 'What is Kivora?',
    content: <p>A modern React design system.</p>,
  },
  {
    id: 'item-2',
    trigger: 'How do I install it?',
    content: <p>Run: npm install @kivora/react</p>,
  },
];

<Accordion items={items} />

const faqItems = [
  {
    id: 'q1',
    trigger: 'What is Kivora?',
    content: <p>Kivora is a comprehensive React design system.</p>,
  },
  {
    id: 'q2',
    trigger: 'Is it free?',
    content: <p>Yes, Kivora is open source and free to use.</p>,
  },
  {
    id: 'q3',
    trigger: 'What components are included?',
    content: <p>Over 30 components including buttons, forms, modals, and more.</p>,
  },
];

<Accordion items={faqItems} />

<Accordion items={items} multiple />

<Accordion 
  items={items} 
  defaultOpen={['q1', 'q3']}
  multiple
/>

const items = [
  {
    id: 'item-1',
    trigger: 'Active Section',
    content: <p>This section can be toggled.</p>,
  },
  {
    id: 'item-2',
    trigger: 'Disabled Section',
    content: <p>This content is not accessible.</p>,
    disabled: true,
  },
];

<Accordion items={items} />

const items = [
  {
    id: 'features',
    trigger: 'Key Features',
    content: (
      <div className="space-y-2">
        <ul className="list-disc pl-5">
          <li>TypeScript support</li>
          <li>Themeable components</li>
          <li>Accessibility built-in</li>
          <li>Tree-shakeable</li>
        </ul>
      </div>
    ),
  },
  {
    id: 'pricing',
    trigger: 'Pricing Plans',
    content: (
      <div className="grid grid-cols-2 gap-4">
        <Card>
          <h4>Free</h4>
          <p>$0/month</p>
        </Card>
        <Card>
          <h4>Pro</h4>
          <p>$29/month</p>
        </Card>
      </div>
    ),
  },
];

<Accordion items={items} multiple />