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

<Meta of={Stories} />

# CardGridField

A grid of selectable cards with optional icons, badges, and dropdowns.

## Usage

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

<CardGridField
  options={[
    { id: 'basic', name: 'Basic', description: 'For small teams' },
    { id: 'pro', name: 'Pro', badge: 'Popular' },
  ]}
  selectedId={selected}
  dropdownValues={dropdowns}
  onChange={({ selectedId, dropdownValues }) => {
    setSelected(selectedId)
    setDropdowns(dropdownValues)
  }}
  columns={2}
/>
```

## Examples

### Default

<Canvas of={Stories.Default} />

### With Selection

<Canvas of={Stories.WithSelection} />

### With Icons

<Canvas of={Stories.WithIcons} />

### With Dropdowns

<Canvas of={Stories.WithDropdowns} />

### Disabled

<Canvas of={Stories.Disabled} />