# Component Specifications

Detailed specs for core components with states and variants.

## Button

### Variants

| Variant     | Background  | Text       | Border | Use Case          |
| ----------- | ----------- | ---------- | ------ | ----------------- |
| default     | primary     | white      | none   | Primary actions   |
| secondary   | gray-100    | gray-900   | none   | Secondary actions |
| outline     | transparent | foreground | border | Tertiary actions  |
| ghost       | transparent | foreground | none   | Subtle actions    |
| link        | transparent | primary    | none   | Navigation        |
| destructive | red-600     | white      | none   | Dangerous actions |

### Sizes

| Size    | Height | Padding X | Padding Y | Font Size | Icon Size |
| ------- | ------ | --------- | --------- | --------- | --------- |
| sm      | 32px   | 12px      | 6px       | 14px      | 16px      |
| default | 40px   | 16px      | 8px       | 14px      | 18px      |
| lg      | 48px   | 24px      | 12px      | 16px      | 20px      |
| icon    | 40px   | 0         | 0         | -         | 18px      |

### States

| State    | Background | Text     | Opacity | Cursor      |
| -------- | ---------- | -------- | ------- | ----------- |
| default  | token      | token    | 1       | pointer     |
| hover    | darker     | token    | 1       | pointer     |
| active   | darkest    | token    | 1       | pointer     |
| focus    | token      | token    | 1       | pointer     |
| disabled | muted      | muted-fg | 0.5     | not-allowed |
| loading  | token      | token    | 0.7     | wait        |

### Anatomy

```
┌─────────────────────────────────────┐
│  [icon]  Label Text  [icon]         │
└─────────────────────────────────────┘
     ↑                      ↑
  leading icon         trailing icon
```

---

## Input

### Variants

| Variant  | Description         |
| -------- | ------------------- |
| default  | Standard text input |
| textarea | Multi-line text     |
| select   | Dropdown selection  |
| checkbox | Boolean toggle      |
| radio    | Single selection    |
| switch   | Toggle switch       |

### Sizes

| Size    | Height | Padding   | Font Size |
| ------- | ------ | --------- | --------- |
| sm      | 32px   | 8px 12px  | 14px      |
| default | 40px   | 8px 12px  | 14px      |
| lg      | 48px   | 12px 16px | 16px      |

### States

| State    | Border   | Background | Ring        |
| -------- | -------- | ---------- | ----------- |
| default  | gray-300 | white      | none        |
| hover    | gray-400 | white      | none        |
| focus    | primary  | white      | primary/20% |
| error    | red-500  | white      | red/20%     |
| disabled | gray-200 | gray-100   | none        |

### Anatomy

```
Label (optional)
┌─────────────────────────────────────┐
│ [icon] Placeholder/Value   [action] │
└─────────────────────────────────────┘
Helper text or error message
```

---

## Card

### Variants

| Variant     | Shadow | Border | Use Case          |
| ----------- | ------ | ------ | ----------------- |
| default     | sm     | 1px    | Standard card     |
| elevated    | lg     | none   | Prominent content |
| outline     | none   | 1px    | Subtle container  |
| interactive | sm→md  | 1px    | Clickable card    |

### Anatomy

```
┌─────────────────────────────────────┐
│ Card Header                         │
│   Title                             │
│   Description                       │
├─────────────────────────────────────┤
│ Card Content                        │
│   Main content area                 │
│                                     │
├─────────────────────────────────────┤
│ Card Footer                         │
│   Actions                           │
└─────────────────────────────────────┘
```

### Spacing

| Area    | Padding     |
| ------- | ----------- |
| header  | 24px 24px 0 |
| content | 24px        |
| footer  | 0 24px 24px |
| gap     | 16px        |

---

## Badge

### Variants

| Variant     | Background  | Text       |
| ----------- | ----------- | ---------- |
| default     | primary     | white      |
| secondary   | gray-100    | gray-900   |
| outline     | transparent | foreground |
| destructive | red-600     | white      |
| success     | green-600   | white      |
| warning     | yellow-500  | gray-900   |

### Sizes

| Size    | Padding  | Font Size | Height |
| ------- | -------- | --------- | ------ |
| sm      | 4px 8px  | 11px      | 20px   |
| default | 4px 10px | 12px      | 24px   |
| lg      | 6px 12px | 14px      | 28px   |

---

## Alert

### Variants

| Variant     | Icon    | Background | Border     |
| ----------- | ------- | ---------- | ---------- |
| default     | info    | gray-50    | gray-200   |
| destructive | alert   | red-50     | red-200    |
| success     | check   | green-50   | green-200  |
| warning     | warning | yellow-50  | yellow-200 |

### Anatomy

```
┌─────────────────────────────────────┐
│ [icon]  Title                    [×]│
│         Description text            │
└─────────────────────────────────────┘
```

---

## Dialog

### Sizes

| Size    | Max Width   | Use Case              |
| ------- | ----------- | --------------------- |
| sm      | 384px       | Simple confirmations  |
| default | 512px       | Standard dialogs      |
| lg      | 640px       | Complex forms         |
| xl      | 768px       | Data-heavy dialogs    |
| full    | 100% - 32px | Full-screen on mobile |

### Anatomy

```
┌───────────────────────────────────────┐
│ Dialog Header                      [×]│
│   Title                               │
│   Description                         │
├───────────────────────────────────────┤
│ Dialog Content                        │
│   Scrollable if needed                │
│                                       │
├───────────────────────────────────────┤
│ Dialog Footer                         │
│                     [Cancel] [Confirm]│
└───────────────────────────────────────┘
```

---

## Table

### Row States

| State    | Background    | Use Case     |
| -------- | ------------- | ------------ |
| default  | white         | Normal row   |
| hover    | gray-50       | Mouse over   |
| selected | primary/10%   | Selected row |
| striped  | gray-50/white | Alternating  |

### Cell Alignment

| Content Type | Alignment |
| ------------ | --------- |
| Text         | Left      |
| Numbers      | Right     |
| Status/Badge | Center    |
| Actions      | Right     |

### Spacing

| Element                  | Value     |
| ------------------------ | --------- |
| cell padding             | 12px 16px |
| header padding           | 12px 16px |
| row height (compact)     | 40px      |
| row height (default)     | 48px      |
| row height (comfortable) | 56px      |