tasks ready

specs/013-unify-frontend-css/contracts/ui-components.md

@@ -0,0 +1,50 @@
+# 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. |