50 lines
2.0 KiB
Markdown
50 lines
2.0 KiB
Markdown
# UI Component Contracts
|
|
|
|
This document defines the strict API contracts for the standardized UI components.
|
|
|
|
## Button Component
|
|
|
|
### Description
|
|
A standard interactive button element that triggers an action.
|
|
|
|
### Props
|
|
| Prop | Type | Default | Description |
|
|
|------|------|---------|-------------|
|
|
| `variant` | `'primary' \| 'secondary' \| 'danger' \| 'ghost'` | `'primary'` | Visual style of the button. |
|
|
| `size` | `'sm' \| 'md' \| 'lg'` | `'md'` | Size of the button. |
|
|
| `isLoading` | `boolean` | `false` | If true, shows a spinner and disables interaction. |
|
|
| `disabled` | `boolean` | `false` | If true, prevents interaction. |
|
|
| `type` | `'button' \| 'submit' \| 'reset'` | `'button'` | HTML button type. |
|
|
| `onclick` | `(event: MouseEvent) => void` | `undefined` | Click handler. |
|
|
| `class` | `string` | `''` | Additional CSS classes (use sparingly). |
|
|
|
|
### Slots
|
|
- `default`: The content of the button (text or icon).
|
|
|
|
## Input Component
|
|
|
|
### Description
|
|
A standard text input field with support for labels and error messages.
|
|
|
|
### Props
|
|
| Prop | Type | Default | Description |
|
|
|------|------|---------|-------------|
|
|
| `label` | `string` | `undefined` | Text label displayed above the input. |
|
|
| `value` | `string` | `''` | The current value (bindable). |
|
|
| `placeholder` | `string` | `''` | Placeholder text. |
|
|
| `error` | `string` | `undefined` | Error message displayed below the input. |
|
|
| `disabled` | `boolean` | `false` | If true, prevents interaction. |
|
|
| `type` | `'text' \| 'password' \| 'email' \| 'number'` | `'text'` | HTML input type. |
|
|
|
|
## Select Component
|
|
|
|
### Description
|
|
A standard dropdown selection component.
|
|
|
|
### Props
|
|
| Prop | Type | Default | Description |
|
|
|------|------|---------|-------------|
|
|
| `label` | `string` | `undefined` | Text label displayed above the select. |
|
|
| `value` | `string \| number` | `''` | The selected value (bindable). |
|
|
| `options` | `{ value: string \| number, label: string }[]` | `[]` | List of options to display. |
|
|
| `disabled` | `boolean` | `false` | If true, prevents interaction. | |