laif-ds/dist/agent-docs/components/Accordion.md

Design System di Laif con componenti React basati su principi di Atomic Design

# 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.