Accordion

import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from "@araf-ds/core"

export default function Example() {
  return (
    <Accordion type="single" collapsible defaultValue="item-1">
      <AccordionItem value="item-1">
        <AccordionTrigger>What is A'raf DS?</AccordionTrigger>
        <AccordionContent>
          A'raf DS is a design system built for modern web applications.
        </AccordionContent>
      </AccordionItem>
      <AccordionItem value="item-2">
        <AccordionTrigger>How do I install it?</AccordionTrigger>
        <AccordionContent>
          Install via npm: <code>npm install @araf-ds/core</code>
        </AccordionContent>
      </AccordionItem>
    </Accordion>
  )
}

<Accordion type="single" collapsible defaultValue="item-1">
  <AccordionItem value="item-1">
    <AccordionTrigger>What is A'raf DS?</AccordionTrigger>
    <AccordionContent>A'raf DS is a design system built for modern web applications.</AccordionContent>
  </AccordionItem>
  <AccordionItem value="item-2">
    <AccordionTrigger>How do I install it?</AccordionTrigger>
    <AccordionContent>Install via npm: <code>npm install @araf-ds/core</code></AccordionContent>
  </AccordionItem>
  <AccordionItem value="item-3">
    <AccordionTrigger>Is dark mode supported?</AccordionTrigger>
    <AccordionContent>Yes, all components adapt automatically via semantic tokens.</AccordionContent>
  </AccordionItem>
</Accordion>

<Accordion type="multiple" defaultValue={["item-1", "item-2"]}>
  <AccordionItem value="item-1">
    <AccordionTrigger>Section 1</AccordionTrigger>
    <AccordionContent>Content 1</AccordionContent>
  </AccordionItem>
  <AccordionItem value="item-2">
    <AccordionTrigger>Section 2</AccordionTrigger>
    <AccordionContent>Content 2</AccordionContent>
  </AccordionItem>
</Accordion>