# Accordion

## Overview

An accessible, animated accordion to organize content in collapsible sections. Supports single or multiple open items, keyboard navigation, and flexible styling.

---

## Props

Props are passed through to the underlying Radix Accordion primitives. The most relevant props for `Accordion` (root) are listed below.

### Accordion (Root)

| Prop            | Type                                | Default     | Description                                                                 |
| --------------- | ----------------------------------- | ----------- | --------------------------------------------------------------------------- |
| `type`          | `"single" \| "multiple"`            | `"single"` | Single allows one item open at a time. Multiple allows many open items.     |
| `collapsible`   | `boolean`                           | `false`     | Only for `type="single"`. If true, allows closing the last open item.      |
| `value`         | `string \| string[]`                | `undefined` | Controlled value of the open item(s).                                       |
| `defaultValue`  | `string \| string[]`                | `undefined` | Uncontrolled default open item(s).                                          |
| `onValueChange` | `(value: string \| string[]) => any` | `undefined` | Callback fired when open item(s) change.                                    |
| `className`     | `string`                             | `""`        | Additional classes applied to the root.                                     |

### Subcomponents

- `AccordionItem`: Container for a single section. Requires a unique `value` prop.
- `AccordionTrigger`: The clickable header that toggles the item.
- `AccordionContent`: The collapsible content area with open/close animations.

---

## Behavior

- **Single mode**: Only one `AccordionItem` can be open at a time. If `collapsible` is `false`, one item must remain open.
- **Multiple mode**: Any number of items can be open simultaneously.
- **Keyboard navigation**: Fully accessible trigger buttons with ARIA attributes.
- **Animations**: Smooth open/close transitions for content.

---

## Examples

### Basic (Single)

```tsx
import { Accordion, AccordionItem, AccordionTrigger, AccordionContent } from "laif-ds";

export function BasicAccordion() {
  return (
    <Accordion type="single" className="w-96">
      <AccordionItem value="item-1">
        <AccordionTrigger>Is it accessible?</AccordionTrigger>
        <AccordionContent>
          Yes. It adheres to the WAI-ARIA design pattern.
        </AccordionContent>
      </AccordionItem>
      <AccordionItem value="item-2">
        <AccordionTrigger>Is it styled?</AccordionTrigger>
        <AccordionContent>
          Yes. It comes with default styles that match the other components.
        </AccordionContent>
      </AccordionItem>
      <AccordionItem value="item-3">
        <AccordionTrigger>Is it animated?</AccordionTrigger>
        <AccordionContent>
          Yes. It's animated by default, but you can disable it if you prefer.
        </AccordionContent>
      </AccordionItem>
    </Accordion>
  );
}
```

### With Default Open (Single, collapsible)

```tsx
import { Accordion, AccordionItem, AccordionTrigger, AccordionContent } from "laif-ds";

export function AccordionWithDefaultOpen() {
  return (
    <Accordion type="single" collapsible defaultValue="item-2" className="w-96">
      <AccordionItem value="item-1">
        <AccordionTrigger>First section</AccordionTrigger>
        <AccordionContent>This is the first section content.</AccordionContent>
      </AccordionItem>
      <AccordionItem value="item-2">
        <AccordionTrigger>Second section (default open)</AccordionTrigger>
        <AccordionContent>
          This section is open by default because we set defaultValue="item-2".
        </AccordionContent>
      </AccordionItem>
      <AccordionItem value="item-3">
        <AccordionTrigger>Third section</AccordionTrigger>
        <AccordionContent>This is the third section content.</AccordionContent>
      </AccordionItem>
    </Accordion>
  );
}
```

### Multiple Mode with Multiple Default Open

```tsx
import { Accordion, AccordionItem, AccordionTrigger, AccordionContent } from "laif-ds";

export function MultipleModeAccordion() {
  return (
    <Accordion type="multiple" defaultValue={["item-1", "item-3"]} className="w-96">
      <AccordionItem value="item-1">
        <AccordionTrigger>First section (default open)</AccordionTrigger>
        <AccordionContent>This section is open by default.</AccordionContent>
      </AccordionItem>
      <AccordionItem value="item-2">
        <AccordionTrigger>Second section</AccordionTrigger>
        <AccordionContent>This section is closed by default.</AccordionContent>
      </AccordionItem>
      <AccordionItem value="item-3">
        <AccordionTrigger>Third section (default open)</AccordionTrigger>
        <AccordionContent>This section is also open by default.</AccordionContent>
      </AccordionItem>
    </Accordion>
  );
}
```

### Controlled Single Mode

```tsx
import { useState } from "react";
import { Accordion, AccordionItem, AccordionTrigger, AccordionContent } from "laif-ds";

export function ControlledAccordion() {
  const [open, setOpen] = useState<string>("item-1");

  return (
    <Accordion type="single" value={open} onValueChange={(v) => setOpen(v as string)} className="w-96">
      <AccordionItem value="item-1">
        <AccordionTrigger>First</AccordionTrigger>
        <AccordionContent>First content</AccordionContent>
      </AccordionItem>
      <AccordionItem value="item-2">
        <AccordionTrigger>Second</AccordionTrigger>
        <AccordionContent>Second content</AccordionContent>
      </AccordionItem>
    </Accordion>
  );
}
```

---

## Notes

- **Accessibility**: Uses proper ARIA roles/attributes and keyboard navigation.
- **Animations**: `AccordionContent` has built-in open/close animations.
- **Styling**: Customize with `className` on root/items/triggers/contents.