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

<Meta of={Stories} />

# TeamInviteField

A dynamic form for inviting team members with email and role selection.

## Usage

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

<TeamInviteField
  roles={[
    { value: 'admin', label: 'Admin' },
    { value: 'editor', label: 'Editor' },
    { value: 'viewer', label: 'Viewer' },
  ]}
  members={members}
  onChange={setMembers}
  onAdd={() => setMembers([...members, { email: '', role: 'viewer' }])}
  onRemove={(index) => setMembers(members.filter((_, i) => i !== index))}
  maxInvites={10}
/>
```

## Examples

### Default

<Canvas of={Stories.Default} />

### With Members

<Canvas of={Stories.WithMembers} />

### With Errors

<Canvas of={Stories.WithErrors} />

### Disabled

<Canvas of={Stories.Disabled} />