# Accordion

A collapsible content container that allows users to expand and collapse sections.

---

## Installation

```bash
npm install @cleartrip/ct-design-accordion
# or
pnpm add @cleartrip/ct-design-accordion
```

### Peer dependencies

```bash
# Required for all targets
npm install react

# Web only
npm install react-dom

# React Native only
npm install react-native
```

---

## Usage

### Basic

```tsx
import { Accordion } from '@cleartrip/ct-design-accordion';

function Example() {
  return (
    <Accordion>
      {/* Basic usage */}
    </Accordion>
  );
}
```

---

## Props

| Prop | Type | Default | Required | Description |
|------|------|---------|----------|-------------|
| `disabled` | `boolean` | `false` | No | Disables interaction with the accordion. |
| `expanded` | `boolean` | `false` | No | Whether the accordion is currently expanded. |
| `label` | `ReactNode` | — | ✅ Yes | The accordion header/label content (always visible). |
| `onClick` | `() => void` | — | No | Click handler fired when the label row is tapped. On web it receives the |
| `children` | `ReactNode` | — | ✅ Yes | Collapsible content that is revealed when `expanded` is true. |
| `expandIcon` | `ReactNode` | — | No | Optional indicative icon rendered next to the label; rotated 180° when |
| `styleConfig` | `IAccordionStyleConfig` | — | No | Style configuration overrides for each internal container. |
| `isWrappedInAccordionGroup` | `boolean` | `false` | No | Internal flag used by AccordionGroup — should not be set by consumers. |
| `onAccordionGroupClick` | `() => void` | — | No | Internal callback used by AccordionGroup when an item is toggled — should |

---

## Accessibility

- The component follows accessibility best practices
- Ensure proper ARIA attributes are provided where needed
- Test with screen readers to ensure usability

---

## Migration

If migrating from a previous version:

```diff
- import { Accordion } from 'yagami/core/components';
+ import { Accordion } from '@cleartrip/ct-design-accordion';
```