# Collapsible

## Overview

A simple container that can show/hide content. Provides a trigger element and animated content area. Useful for progressive disclosure of details.

---

## Props

### Collapsible (Root)

| Prop           | Type                      | Default     | Description                      |
| -------------- | ------------------------- | ----------- | -------------------------------- |
| `open`         | `boolean`                 | `undefined` | Controlled open state.           |
| `defaultOpen`  | `boolean`                 | `false`     | Uncontrolled initial open state. |
| `onOpenChange` | `(open: boolean) => void` | `undefined` | Called when open state changes.  |
| `className`    | `string`                  | `""`        | Additional classes for the root. |

### Subcomponents

- `CollapsibleTrigger`: The element that toggles visibility (can be used with `asChild`).
- `CollapsibleContent`: The collapsible content region.

---

## Behavior

- **Controlled**: Use `open` + `onOpenChange` to control state.
- **Uncontrolled**: Use `defaultOpen` for initial state.
- **Accessibility**: Works with button triggers and keyboard navigation.

---

## Examples

### Basic

```tsx
import { useState } from "react";
import { Button } from "laif-ds";
import { Collapsible, CollapsibleTrigger, CollapsibleContent } from "laif-ds";

export function BasicCollapsible() {
  const [isOpen, setIsOpen] = useState(false);
  return (
    <Collapsible
      open={isOpen}
      onOpenChange={setIsOpen}
      className="w-[350px] space-y-2"
    >
      <div className="flex items-center justify-between gap-4 px-4">
        <h4 className="text-sm font-semibold">Details</h4>
        <CollapsibleTrigger asChild>
          <Button variant="ghost" size="sm">
            Toggle
          </Button>
        </CollapsibleTrigger>
      </div>
      <CollapsibleContent className="space-y-2">
        <div className="border-d-border rounded-md border px-4 py-3 text-sm">
          Item A
        </div>
        <div className="border-d-border rounded-md border px-4 py-3 text-sm">
          Item B
        </div>
        <div className="border-d-border rounded-md border px-4 py-3 text-sm">
          Item C
        </div>
      </CollapsibleContent>
    </Collapsible>
  );
}
```

### Open by Default

```tsx
import { useState } from "react";
import { Button } from "laif-ds";
import { Collapsible, CollapsibleTrigger, CollapsibleContent } from "laif-ds";

export function OpenByDefault() {
  const [isOpen, setIsOpen] = useState(true);
  return (
    <Collapsible
      open={isOpen}
      onOpenChange={setIsOpen}
      className="w-[350px] space-y-2"
    >
      <div className="flex items-center justify-between gap-4 px-4">
        <h4 className="text-sm font-semibold">Details</h4>
        <CollapsibleTrigger asChild>
          <Button variant="ghost" size="sm">
            Toggle
          </Button>
        </CollapsibleTrigger>
      </div>
      <CollapsibleContent className="space-y-2">
        <div className="rounded-md border px-4 py-3 text-sm">
          This is additional information.
        </div>
      </CollapsibleContent>
    </Collapsible>
  );
}
```

---

## Notes

- **asChild**: Wrap your own button/link as trigger while preserving styles.
- **Styling**: Use `className` on root/content to adjust spacing and borders.