import { Canvas, Meta } from '@storybook/blocks'
import * as Stories from './IconSelectField.stories'

<Meta of={Stories} />

# IconSelectField

A selection field with icons, images, or logos. Supports single or multiple selection.

## Usage

```tsx
import { IconSelectField } from '@/components/onboarding'

<IconSelectField
  options={[
    { id: 'aws', name: 'AWS', icon: <AwsIcon /> },
    { id: 'azure', name: 'Azure', icon: <AzureIcon /> },
  ]}
  selectedIds={selected}
  onChange={setSelected}
  selectionMode="single"
  iconStyle="boxed"
/>
```

## Props

- `iconStyle`: `'boxed'` (default) or `'plain'` - boxed adds a border container
- `iconSize`: `'sm'`, `'md'` (default), or `'lg'`
- `selectionMode`: `'single'` or `'multiple'`

## Examples

### Default (Icons)

<Canvas of={Stories.Default} />

### Single Selection

<Canvas of={Stories.SingleSelection} />

### With Descriptions

<Canvas of={Stories.WithDescriptions} />

### Disabled

<Canvas of={Stories.Disabled} />