import { ArgTypes, Canvas, Markdown, Meta } from '@storybook/blocks';
import * as ToggleGroupDirectiveStories from './toggle-group.stories';
import { RdxToggleGroupDirective } from '../src/toggle-group.directive';
import { RdxToggleGroupItemDirective } from '../src/toggle-group-item.directive';

<Meta title="Primitives/Toggle Group" />

# Toggle Group

#### A set of two-\_state buttons that can be toggled on or off.

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

## Features

- ✅ Full keyboard navigation.
- ✅ Supports horizontal/vertical orientation.
- ✅ Support single and multiple pressed buttons.
- ✅ Can be controlled or uncontrolled.

## Import

Get started with importing the directives:

```typescript
import {
  RdxToggleGroupDirective,
  RdxToggleGroupItemDirective,
  RdxToggleGroupMultipleDirective
} from '@radix-ng/primitives/toggle-group';
```

## Examples

```html
<div class="ToggleGroup" rdxToggleGroup value="center" aria-label="Text alignment">
  <button class="ToggleGroupItem" rdxToggleGroupItem value="left" aria-label="Left aligned">
    <lucide-icon name="align-left" size="16"></lucide-icon>
  </button>
  <button class="ToggleGroupItem" rdxToggleGroupItem value="center" aria-label="Center aligned">
    <lucide-icon name="align-center" size="16"></lucide-icon>
  </button>
  <button class="ToggleGroupItem" rdxToggleGroupItem value="right" aria-label="Right aligned">
    <lucide-icon name="align-right" size="16"></lucide-icon>
  </button>
</div>
```

## API Reference

### RdxToggleGroupDirective

<ArgTypes of={RdxToggleGroupDirective} />

<Markdown>
  {`
  | Data Attribute | Value |
  | ----------- | --------- |
  | [data-orientation]       | "vertical" or "horizontal"   |
  `}
</Markdown>

### RdxToggleGroupItemDirective

<ArgTypes of={RdxToggleGroupItemDirective} />

## Accessibility

Uses [roving tabindex](https://www.w3.org/TR/wai-aria-practices-1.2/examples/radio/radio.html) to manage focus movement among items.

### Keyboard Interactions

<Markdown>
  {`
  | Key | Description |
  | ----------- | --------- |
  | Tab         | Moves focus to either the pressed item or the first item in the group. |
  | Space       | Activates/deactivates the item.       |
  | Enter       | Activates/deactivates the item.  |
  | ArrowDown   |    Moves focus to the next item in the group. |
  | ArrowRight  | Moves focus to the next item in the group. |
  | ArrowUp     | Moves focus to the previous item in the group. |
  | ArrowLeft   | Moves focus to the previous item in the group.  |
  | Home        | Moves focus to the first item. |
  | End         | Moves focus to the last item.  |
  `}
</Markdown>
