import { ArgTypes, Canvas, Meta } from '@storybook/blocks';
import * as CollapsibleStories from './collapsible.stories';
import { RdxCollapsibleRootDirective } from '../src/collapsible-root.directive';
import { RdxCollapsibleTriggerDirective } from '../src/collapsible-trigger.directive';
import { RdxCollapsibleContentDirective } from '../src/collapsible-content.directive';

<Meta title="Primitives/Collapsible" />

# Collapsible

#### An interactive component which expands/collapses a panel.

<Canvas sourceState="hidden" of={CollapsibleStories.Default} />

## Features

- ✅ Full keyboard navigation.
- ✅ Can be controlled or uncontrolled.

## Anatomy

```html
<div rdxCollapsibleRoot [open]="...">
  <button rdxCollapsibleTrigger>Trigger</button>
  <div rdxCollapsibleContent>Content</div>
</div>
```

## Import

Get started with importing the directives:

```typescript
import {
  RdxCollapsibleRootDirective,
  RdxCollapsibleTriggerDirective,
  RdxCollapsibleContentDirective
} from '@radix-ng/primitives/collapsible';
```

## API Reference

## RdxCollapsibleRootDirective

<ArgTypes of={RdxCollapsibleRootDirective} />

## RdxCollapsibleTriggerDirective

<ArgTypes of={RdxCollapsibleTriggerDirective} />

## RdxCollapsibleContentDirective

<ArgTypes of={RdxCollapsibleContentDirective} />
