1# Component Specifications
2 
3Detailed specs for core components with states and variants.
4 
5## Button
6 
7### Variants
8 
9| Variant | Background | Text | Border | Use Case |
10|---------|------------|------|--------|----------|
11| default | primary | white | none | Primary actions |
12| secondary | gray-100 | gray-900 | none | Secondary actions |
13| outline | transparent | foreground | border | Tertiary actions |
14| ghost | transparent | foreground | none | Subtle actions |
15| link | transparent | primary | none | Navigation |
16| destructive | red-600 | white | none | Dangerous actions |
17 
18### Sizes
19 
20| Size | Height | Padding X | Padding Y | Font Size | Icon Size |
21|------|--------|-----------|-----------|-----------|-----------|
22| sm | 32px | 12px | 6px | 14px | 16px |
23| default | 40px | 16px | 8px | 14px | 18px |
24| lg | 48px | 24px | 12px | 16px | 20px |
25| icon | 40px | 0 | 0 | - | 18px |
26 
27### States
28 
29| State | Background | Text | Opacity | Cursor |
30|-------|------------|------|---------|--------|
31| default | token | token | 1 | pointer |
32| hover | darker | token | 1 | pointer |
33| active | darkest | token | 1 | pointer |
34| focus | token | token | 1 | pointer |
35| disabled | muted | muted-fg | 0.5 | not-allowed |
36| loading | token | token | 0.7 | wait |
37 
38### Anatomy
39 
40```
41┌─────────────────────────────────────┐
42│  [icon]  Label Text  [icon]         │
43└─────────────────────────────────────┘
44     ↑                      ↑
45  leading icon         trailing icon
46```
47 
48---
49 
50## Input
51 
52### Variants
53 
54| Variant | Description |
55|---------|-------------|
56| default | Standard text input |
57| textarea | Multi-line text |
58| select | Dropdown selection |
59| checkbox | Boolean toggle |
60| radio | Single selection |
61| switch | Toggle switch |
62 
63### Sizes
64 
65| Size | Height | Padding | Font Size |
66|------|--------|---------|-----------|
67| sm | 32px | 8px 12px | 14px |
68| default | 40px | 8px 12px | 14px |
69| lg | 48px | 12px 16px | 16px |
70 
71### States
72 
73| State | Border | Background | Ring |
74|-------|--------|------------|------|
75| default | gray-300 | white | none |
76| hover | gray-400 | white | none |
77| focus | primary | white | primary/20% |
78| error | red-500 | white | red/20% |
79| disabled | gray-200 | gray-100 | none |
80 
81### Anatomy
82 
83```
84Label (optional)
85┌─────────────────────────────────────┐
86│ [icon] Placeholder/Value   [action] │
87└─────────────────────────────────────┘
88Helper text or error message
89```
90 
91---
92 
93## Card
94 
95### Variants
96 
97| Variant | Shadow | Border | Use Case |
98|---------|--------|--------|----------|
99| default | sm | 1px | Standard card |
100| elevated | lg | none | Prominent content |
101| outline | none | 1px | Subtle container |
102| interactive | sm→md | 1px | Clickable card |
103 
104### Anatomy
105 
106```
107┌─────────────────────────────────────┐
108│ Card Header                         │
109│   Title                             │
110│   Description                       │
111├─────────────────────────────────────┤
112│ Card Content                        │
113│   Main content area                 │
114│                                     │
115├─────────────────────────────────────┤
116│ Card Footer                         │
117│   Actions                           │
118└─────────────────────────────────────┘
119```
120 
121### Spacing
122 
123| Area | Padding |
124|------|---------|
125| header | 24px 24px 0 |
126| content | 24px |
127| footer | 0 24px 24px |
128| gap | 16px |
129 
130---
131 
132## Badge
133 
134### Variants
135 
136| Variant | Background | Text |
137|---------|------------|------|
138| default | primary | white |
139| secondary | gray-100 | gray-900 |
140| outline | transparent | foreground |
141| destructive | red-600 | white |
142| success | green-600 | white |
143| warning | yellow-500 | gray-900 |
144 
145### Sizes
146 
147| Size | Padding | Font Size | Height |
148|------|---------|-----------|--------|
149| sm | 4px 8px | 11px | 20px |
150| default | 4px 10px | 12px | 24px |
151| lg | 6px 12px | 14px | 28px |
152 
153---
154 
155## Alert
156 
157### Variants
158 
159| Variant | Icon | Background | Border |
160|---------|------|------------|--------|
161| default | info | gray-50 | gray-200 |
162| destructive | alert | red-50 | red-200 |
163| success | check | green-50 | green-200 |
164| warning | warning | yellow-50 | yellow-200 |
165 
166### Anatomy
167 
168```
169┌─────────────────────────────────────┐
170│ [icon]  Title                    [×]│
171│         Description text            │
172└─────────────────────────────────────┘
173```
174 
175---
176 
177## Dialog
178 
179### Sizes
180 
181| Size | Max Width | Use Case |
182|------|-----------|----------|
183| sm | 384px | Simple confirmations |
184| default | 512px | Standard dialogs |
185| lg | 640px | Complex forms |
186| xl | 768px | Data-heavy dialogs |
187| full | 100% - 32px | Full-screen on mobile |
188 
189### Anatomy
190 
191```
192┌───────────────────────────────────────┐
193│ Dialog Header                      [×]│
194│   Title                               │
195│   Description                         │
196├───────────────────────────────────────┤
197│ Dialog Content                        │
198│   Scrollable if needed                │
199│                                       │
200├───────────────────────────────────────┤
201│ Dialog Footer                         │
202│                     [Cancel] [Confirm]│
203└───────────────────────────────────────┘
204```
205 
206---
207 
208## Table
209 
210### Row States
211 
212| State | Background | Use Case |
213|-------|------------|----------|
214| default | white | Normal row |
215| hover | gray-50 | Mouse over |
216| selected | primary/10% | Selected row |
217| striped | gray-50/white | Alternating |
218 
219### Cell Alignment
220 
221| Content Type | Alignment |
222|--------------|-----------|
223| Text | Left |
224| Numbers | Right |
225| Status/Badge | Center |
226| Actions | Right |
227 
228### Spacing
229 
230| Element | Value |
231|---------|-------|
232| cell padding | 12px 16px |
233| header padding | 12px 16px |
234| row height (compact) | 40px |
235| row height (default) | 48px |
236| row height (comfortable) | 56px |
237