@usevyre/ai-context 0.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/LICENSE +21 -0
- package/dist/claude-context.md +296 -0
- package/dist/copilot-instructions.md +295 -0
- package/dist/cursor-rules.md +296 -0
- package/dist/full-context.md +291 -0
- package/dist/index.js +1476 -0
- package/dist/windsurf-rules.md +293 -0
- package/package.json +29 -0
|
@@ -0,0 +1,296 @@
|
|
|
1
|
+
---
|
|
2
|
+
description: useVyre design system rules — follow these when writing UI code
|
|
3
|
+
alwaysApply: true
|
|
4
|
+
---
|
|
5
|
+
|
|
6
|
+
# useVyre Design System — AI Context
|
|
7
|
+
# Version: 0.1.0
|
|
8
|
+
# Include this file in your AI agent's system prompt, .cursor/rules, or CLAUDE.md
|
|
9
|
+
# Source: https://usevyre.com/ai-context
|
|
10
|
+
|
|
11
|
+
---
|
|
12
|
+
|
|
13
|
+
## What is useVyre?
|
|
14
|
+
|
|
15
|
+
useVyre is an AI-native design system for React and Vue. It uses CSS custom properties
|
|
16
|
+
(variables) as its single source of truth, making it inherently AI-friendly — no magic,
|
|
17
|
+
no runtime transforms, just semantic token names that describe intent.
|
|
18
|
+
|
|
19
|
+
---
|
|
20
|
+
|
|
21
|
+
## Installation
|
|
22
|
+
|
|
23
|
+
```bash
|
|
24
|
+
# Tokens (required by everything)
|
|
25
|
+
pnpm add @usevyre/tokens
|
|
26
|
+
|
|
27
|
+
# React components
|
|
28
|
+
pnpm add @usevyre/react
|
|
29
|
+
|
|
30
|
+
# Vue components
|
|
31
|
+
pnpm add @usevyre/vue
|
|
32
|
+
```
|
|
33
|
+
|
|
34
|
+
## CSS Setup
|
|
35
|
+
|
|
36
|
+
```css
|
|
37
|
+
/* In your global CSS entry point */
|
|
38
|
+
@import "@usevyre/tokens/css"; /* design tokens */
|
|
39
|
+
@import "@usevyre/react/styles"; /* component styles (React) */
|
|
40
|
+
/* or */
|
|
41
|
+
@import "@usevyre/vue/styles"; /* component styles (Vue) */
|
|
42
|
+
```
|
|
43
|
+
|
|
44
|
+
---
|
|
45
|
+
|
|
46
|
+
## Token Naming Convention
|
|
47
|
+
|
|
48
|
+
ALL tokens follow this pattern:
|
|
49
|
+
```
|
|
50
|
+
--vyre-[category]-[subcategory]-[variant]
|
|
51
|
+
```
|
|
52
|
+
|
|
53
|
+
Examples:
|
|
54
|
+
- `--vyre-color-semantic-accent` ✅ Use this
|
|
55
|
+
- `--vyre-color-primitive-amber-400` ❌ Never use primitives in components
|
|
56
|
+
- `--vyre-spacing-4` ✅ 16px spacing
|
|
57
|
+
- `--vyre-typography-font-size-sm` ✅ 13px font size
|
|
58
|
+
|
|
59
|
+
---
|
|
60
|
+
|
|
61
|
+
## Semantic Color Tokens (use these in ALL component styling)
|
|
62
|
+
|
|
63
|
+
### Surface layers (background → foreground)
|
|
64
|
+
- `--vyre-color-semantic-background` Page background. Deepest layer.
|
|
65
|
+
- `--vyre-color-semantic-surface` Cards, panels, sidebars.
|
|
66
|
+
- `--vyre-color-semantic-surface-raised` Dropdowns, inputs, elevated cards.
|
|
67
|
+
- `--vyre-color-semantic-surface-overlay` Modals, tooltips.
|
|
68
|
+
|
|
69
|
+
### Borders
|
|
70
|
+
- `--vyre-color-semantic-border-subtle` Dividers, subtle separators.
|
|
71
|
+
- `--vyre-color-semantic-border` Default card/input borders.
|
|
72
|
+
- `--vyre-color-semantic-border-strong` Focus rings, selected states.
|
|
73
|
+
|
|
74
|
+
### Text hierarchy
|
|
75
|
+
- `--vyre-color-semantic-text-primary` Headings, body text.
|
|
76
|
+
- `--vyre-color-semantic-text-secondary` Subtitles, descriptions.
|
|
77
|
+
- `--vyre-color-semantic-text-muted` Placeholders, helper text.
|
|
78
|
+
- `--vyre-color-semantic-text-disabled` Disabled state text.
|
|
79
|
+
- `--vyre-color-semantic-text-inverse` Text on light/accent backgrounds.
|
|
80
|
+
|
|
81
|
+
### Brand colors
|
|
82
|
+
- `--vyre-color-semantic-accent` Primary CTA, highlights. (amber)
|
|
83
|
+
- `--vyre-color-semantic-accent-hover` Hover for accent elements.
|
|
84
|
+
- `--vyre-color-semantic-accent-subtle` Low-opacity accent backgrounds.
|
|
85
|
+
- `--vyre-color-semantic-teal` Secondary accent. Code, success. (teal)
|
|
86
|
+
- `--vyre-color-semantic-teal-hover` Hover for teal elements.
|
|
87
|
+
- `--vyre-color-semantic-teal-subtle` Low-opacity teal backgrounds.
|
|
88
|
+
|
|
89
|
+
### Semantic status colors
|
|
90
|
+
- `--vyre-color-semantic-success` Confirmations, complete states.
|
|
91
|
+
- `--vyre-color-semantic-success-subtle` Success badge backgrounds.
|
|
92
|
+
- `--vyre-color-semantic-warning` Warnings, beta indicators.
|
|
93
|
+
- `--vyre-color-semantic-warning-subtle` Warning badge backgrounds.
|
|
94
|
+
- `--vyre-color-semantic-danger` Errors, destructive actions.
|
|
95
|
+
- `--vyre-color-semantic-danger-hover` Hover for danger elements.
|
|
96
|
+
- `--vyre-color-semantic-danger-subtle` Error badge backgrounds.
|
|
97
|
+
|
|
98
|
+
---
|
|
99
|
+
|
|
100
|
+
## Typography Tokens
|
|
101
|
+
|
|
102
|
+
### Font families
|
|
103
|
+
- `--vyre-typography-font-family-display` Headlines, hero text (serif)
|
|
104
|
+
- `--vyre-typography-font-family-body` UI text, labels, body copy (sans-serif)
|
|
105
|
+
- `--vyre-typography-font-family-mono` Code, tokens, technical text (monospace)
|
|
106
|
+
|
|
107
|
+
### Font sizes
|
|
108
|
+
- `--vyre-typography-font-size-2xs` 10px — tiny labels
|
|
109
|
+
- `--vyre-typography-font-size-xs` 11px — badge text, captions
|
|
110
|
+
- `--vyre-typography-font-size-sm` 13px — default UI text, buttons
|
|
111
|
+
- `--vyre-typography-font-size-md` 15px — body text
|
|
112
|
+
- `--vyre-typography-font-size-lg` 18px — large body, small headings
|
|
113
|
+
- `--vyre-typography-font-size-xl` 22px — section headings
|
|
114
|
+
- `--vyre-typography-font-size-2xl` 28px — page headings
|
|
115
|
+
- `--vyre-typography-font-size-3xl` 36px — large headings
|
|
116
|
+
- `--vyre-typography-font-size-4xl` 48px — hero headings
|
|
117
|
+
- `--vyre-typography-font-size-5xl` 64px — display headings
|
|
118
|
+
|
|
119
|
+
### Font weights
|
|
120
|
+
- `--vyre-typography-font-weight-light` 300
|
|
121
|
+
- `--vyre-typography-font-weight-regular` 400
|
|
122
|
+
- `--vyre-typography-font-weight-medium` 500
|
|
123
|
+
- `--vyre-typography-font-weight-semibold` 600
|
|
124
|
+
- `--vyre-typography-font-weight-bold` 700
|
|
125
|
+
|
|
126
|
+
---
|
|
127
|
+
|
|
128
|
+
## Spacing Tokens (4px base grid)
|
|
129
|
+
|
|
130
|
+
- `--vyre-spacing-1` 4px
|
|
131
|
+
- `--vyre-spacing-2` 8px
|
|
132
|
+
- `--vyre-spacing-3` 12px
|
|
133
|
+
- `--vyre-spacing-4` 16px
|
|
134
|
+
- `--vyre-spacing-5` 20px
|
|
135
|
+
- `--vyre-spacing-6` 24px
|
|
136
|
+
- `--vyre-spacing-8` 32px
|
|
137
|
+
- `--vyre-spacing-10` 40px
|
|
138
|
+
- `--vyre-spacing-12` 48px
|
|
139
|
+
- `--vyre-spacing-16` 64px
|
|
140
|
+
- `--vyre-spacing-20` 80px
|
|
141
|
+
- `--vyre-spacing-24` 96px
|
|
142
|
+
|
|
143
|
+
---
|
|
144
|
+
|
|
145
|
+
## Border Radius Tokens
|
|
146
|
+
|
|
147
|
+
- `--vyre-border-radius-none` 0
|
|
148
|
+
- `--vyre-border-radius-sm` 4px — tight corners
|
|
149
|
+
- `--vyre-border-radius-md` 8px — default components
|
|
150
|
+
- `--vyre-border-radius-lg` 12px — cards, panels
|
|
151
|
+
- `--vyre-border-radius-xl` 16px — large cards
|
|
152
|
+
- `--vyre-border-radius-2xl` 24px — modals, sheets
|
|
153
|
+
- `--vyre-border-radius-full` 9999px — badges, pills, avatars
|
|
154
|
+
|
|
155
|
+
---
|
|
156
|
+
|
|
157
|
+
## Component API Reference
|
|
158
|
+
|
|
159
|
+
### Button
|
|
160
|
+
|
|
161
|
+
```tsx
|
|
162
|
+
import { Button } from "@usevyre/react"
|
|
163
|
+
|
|
164
|
+
// Props:
|
|
165
|
+
// variant = "primary" | "secondary" | "ghost" | "accent" | "teal" | "danger"
|
|
166
|
+
// size = "sm" | "md" | "lg" | "icon"
|
|
167
|
+
// loading = boolean
|
|
168
|
+
// disabled = boolean
|
|
169
|
+
// as = React.ElementType (default: "button")
|
|
170
|
+
// leftIcon = ReactNode
|
|
171
|
+
// rightIcon = ReactNode
|
|
172
|
+
|
|
173
|
+
// Examples:
|
|
174
|
+
<Button variant="accent" size="lg">Get Started</Button>
|
|
175
|
+
<Button variant="ghost" size="sm">Cancel</Button>
|
|
176
|
+
<Button variant="danger" loading>Deleting...</Button>
|
|
177
|
+
<Button as="a" href="/docs" variant="secondary">Read Docs</Button>
|
|
178
|
+
```
|
|
179
|
+
|
|
180
|
+
### Badge
|
|
181
|
+
|
|
182
|
+
```tsx
|
|
183
|
+
import { Badge } from "@usevyre/react"
|
|
184
|
+
|
|
185
|
+
// Props:
|
|
186
|
+
// variant = "default" | "accent" | "teal" | "success" | "warning" | "danger"
|
|
187
|
+
// dot = boolean (live status indicator dot)
|
|
188
|
+
|
|
189
|
+
// Examples:
|
|
190
|
+
<Badge variant="success" dot>Online</Badge>
|
|
191
|
+
<Badge variant="warning">Beta</Badge>
|
|
192
|
+
<Badge variant="danger">Error</Badge>
|
|
193
|
+
```
|
|
194
|
+
|
|
195
|
+
### Card
|
|
196
|
+
|
|
197
|
+
```tsx
|
|
198
|
+
import { Card, CardHeader, CardBody, CardFooter } from "@usevyre/react"
|
|
199
|
+
|
|
200
|
+
// Card props:
|
|
201
|
+
// variant = "default" | "elevated" | "outlined" | "ghost" | "accent"
|
|
202
|
+
// hoverable = boolean
|
|
203
|
+
// clickable = boolean
|
|
204
|
+
|
|
205
|
+
// Examples:
|
|
206
|
+
<Card variant="elevated">
|
|
207
|
+
<CardHeader>
|
|
208
|
+
<Badge variant="teal">New</Badge>
|
|
209
|
+
</CardHeader>
|
|
210
|
+
<CardBody>
|
|
211
|
+
<h3>Card Title</h3>
|
|
212
|
+
<p>Description text.</p>
|
|
213
|
+
</CardBody>
|
|
214
|
+
<CardFooter>
|
|
215
|
+
<Button variant="ghost" size="sm">Learn more</Button>
|
|
216
|
+
</CardFooter>
|
|
217
|
+
</Card>
|
|
218
|
+
```
|
|
219
|
+
|
|
220
|
+
### Field + Input + Textarea
|
|
221
|
+
|
|
222
|
+
```tsx
|
|
223
|
+
import { Field, Input, Textarea } from "@usevyre/react"
|
|
224
|
+
|
|
225
|
+
// Field props:
|
|
226
|
+
// label = string
|
|
227
|
+
// hint = string
|
|
228
|
+
// state = "idle" | "error" | "success" | "warning"
|
|
229
|
+
// required = boolean
|
|
230
|
+
|
|
231
|
+
// Input props:
|
|
232
|
+
// size = "sm" | "md" | "lg"
|
|
233
|
+
// leftElement = ReactNode
|
|
234
|
+
// rightElement = ReactNode
|
|
235
|
+
// + all native input props
|
|
236
|
+
|
|
237
|
+
// Examples:
|
|
238
|
+
<Field label="Email" state="error" hint="Invalid format">
|
|
239
|
+
<Input type="email" placeholder="you@example.com" />
|
|
240
|
+
</Field>
|
|
241
|
+
|
|
242
|
+
<Field label="Search">
|
|
243
|
+
<Input leftElement={<SearchIcon />} placeholder="Search..." />
|
|
244
|
+
</Field>
|
|
245
|
+
|
|
246
|
+
<Field label="Bio">
|
|
247
|
+
<Textarea rows={4} placeholder="Tell us about yourself..." />
|
|
248
|
+
</Field>
|
|
249
|
+
```
|
|
250
|
+
|
|
251
|
+
---
|
|
252
|
+
|
|
253
|
+
## Styling Rules for AI Agents
|
|
254
|
+
|
|
255
|
+
1. ALWAYS use semantic tokens (`--vyre-color-semantic-*`), never primitive tokens
|
|
256
|
+
2. NEVER hardcode colors — every color decision has a semantic token
|
|
257
|
+
3. Text hierarchy: `text-primary` → `text-secondary` → `text-muted` → `text-disabled`
|
|
258
|
+
4. Interactive hover states: add `-hover` suffix to base token
|
|
259
|
+
5. Low-opacity backgrounds: use `-subtle` suffix tokens
|
|
260
|
+
6. Spacing: always use `--vyre-spacing-*` — never raw px values in component code
|
|
261
|
+
7. Transitions: use `--vyre-transition-duration-*` and `--vyre-transition-easing-*`
|
|
262
|
+
|
|
263
|
+
---
|
|
264
|
+
|
|
265
|
+
## Common Patterns
|
|
266
|
+
|
|
267
|
+
### Page layout with sidebar
|
|
268
|
+
```tsx
|
|
269
|
+
<div style={{ display: "grid", gridTemplateColumns: "260px 1fr", minHeight: "100vh" }}>
|
|
270
|
+
<aside style={{ background: "var(--vyre-color-semantic-surface)", borderRight: "1px solid var(--vyre-color-semantic-border-subtle)" }}>
|
|
271
|
+
{/* sidebar content */}
|
|
272
|
+
</aside>
|
|
273
|
+
<main style={{ padding: "var(--vyre-spacing-12)" }}>
|
|
274
|
+
{/* main content */}
|
|
275
|
+
</main>
|
|
276
|
+
</div>
|
|
277
|
+
```
|
|
278
|
+
|
|
279
|
+
### Form with validation
|
|
280
|
+
```tsx
|
|
281
|
+
<form>
|
|
282
|
+
<Field label="Email" state={errors.email ? "error" : "idle"} hint={errors.email}>
|
|
283
|
+
<Input type="email" value={email} onChange={e => setEmail(e.target.value)} />
|
|
284
|
+
</Field>
|
|
285
|
+
<Button variant="accent" type="submit" loading={isSubmitting}>
|
|
286
|
+
Submit
|
|
287
|
+
</Button>
|
|
288
|
+
</form>
|
|
289
|
+
```
|
|
290
|
+
|
|
291
|
+
### Status badge with live indicator
|
|
292
|
+
```tsx
|
|
293
|
+
<Badge variant="success" dot>Live</Badge>
|
|
294
|
+
<Badge variant="danger" dot>Offline</Badge>
|
|
295
|
+
<Badge variant="warning">Beta</Badge>
|
|
296
|
+
```
|
|
@@ -0,0 +1,291 @@
|
|
|
1
|
+
# useVyre Design System — AI Context
|
|
2
|
+
# Version: 0.1.0
|
|
3
|
+
# Include this file in your AI agent's system prompt, .cursor/rules, or CLAUDE.md
|
|
4
|
+
# Source: https://usevyre.com/ai-context
|
|
5
|
+
|
|
6
|
+
---
|
|
7
|
+
|
|
8
|
+
## What is useVyre?
|
|
9
|
+
|
|
10
|
+
useVyre is an AI-native design system for React and Vue. It uses CSS custom properties
|
|
11
|
+
(variables) as its single source of truth, making it inherently AI-friendly — no magic,
|
|
12
|
+
no runtime transforms, just semantic token names that describe intent.
|
|
13
|
+
|
|
14
|
+
---
|
|
15
|
+
|
|
16
|
+
## Installation
|
|
17
|
+
|
|
18
|
+
```bash
|
|
19
|
+
# Tokens (required by everything)
|
|
20
|
+
pnpm add @usevyre/tokens
|
|
21
|
+
|
|
22
|
+
# React components
|
|
23
|
+
pnpm add @usevyre/react
|
|
24
|
+
|
|
25
|
+
# Vue components
|
|
26
|
+
pnpm add @usevyre/vue
|
|
27
|
+
```
|
|
28
|
+
|
|
29
|
+
## CSS Setup
|
|
30
|
+
|
|
31
|
+
```css
|
|
32
|
+
/* In your global CSS entry point */
|
|
33
|
+
@import "@usevyre/tokens/css"; /* design tokens */
|
|
34
|
+
@import "@usevyre/react/styles"; /* component styles (React) */
|
|
35
|
+
/* or */
|
|
36
|
+
@import "@usevyre/vue/styles"; /* component styles (Vue) */
|
|
37
|
+
```
|
|
38
|
+
|
|
39
|
+
---
|
|
40
|
+
|
|
41
|
+
## Token Naming Convention
|
|
42
|
+
|
|
43
|
+
ALL tokens follow this pattern:
|
|
44
|
+
```
|
|
45
|
+
--vyre-[category]-[subcategory]-[variant]
|
|
46
|
+
```
|
|
47
|
+
|
|
48
|
+
Examples:
|
|
49
|
+
- `--vyre-color-semantic-accent` ✅ Use this
|
|
50
|
+
- `--vyre-color-primitive-amber-400` ❌ Never use primitives in components
|
|
51
|
+
- `--vyre-spacing-4` ✅ 16px spacing
|
|
52
|
+
- `--vyre-typography-font-size-sm` ✅ 13px font size
|
|
53
|
+
|
|
54
|
+
---
|
|
55
|
+
|
|
56
|
+
## Semantic Color Tokens (use these in ALL component styling)
|
|
57
|
+
|
|
58
|
+
### Surface layers (background → foreground)
|
|
59
|
+
- `--vyre-color-semantic-background` Page background. Deepest layer.
|
|
60
|
+
- `--vyre-color-semantic-surface` Cards, panels, sidebars.
|
|
61
|
+
- `--vyre-color-semantic-surface-raised` Dropdowns, inputs, elevated cards.
|
|
62
|
+
- `--vyre-color-semantic-surface-overlay` Modals, tooltips.
|
|
63
|
+
|
|
64
|
+
### Borders
|
|
65
|
+
- `--vyre-color-semantic-border-subtle` Dividers, subtle separators.
|
|
66
|
+
- `--vyre-color-semantic-border` Default card/input borders.
|
|
67
|
+
- `--vyre-color-semantic-border-strong` Focus rings, selected states.
|
|
68
|
+
|
|
69
|
+
### Text hierarchy
|
|
70
|
+
- `--vyre-color-semantic-text-primary` Headings, body text.
|
|
71
|
+
- `--vyre-color-semantic-text-secondary` Subtitles, descriptions.
|
|
72
|
+
- `--vyre-color-semantic-text-muted` Placeholders, helper text.
|
|
73
|
+
- `--vyre-color-semantic-text-disabled` Disabled state text.
|
|
74
|
+
- `--vyre-color-semantic-text-inverse` Text on light/accent backgrounds.
|
|
75
|
+
|
|
76
|
+
### Brand colors
|
|
77
|
+
- `--vyre-color-semantic-accent` Primary CTA, highlights. (amber)
|
|
78
|
+
- `--vyre-color-semantic-accent-hover` Hover for accent elements.
|
|
79
|
+
- `--vyre-color-semantic-accent-subtle` Low-opacity accent backgrounds.
|
|
80
|
+
- `--vyre-color-semantic-teal` Secondary accent. Code, success. (teal)
|
|
81
|
+
- `--vyre-color-semantic-teal-hover` Hover for teal elements.
|
|
82
|
+
- `--vyre-color-semantic-teal-subtle` Low-opacity teal backgrounds.
|
|
83
|
+
|
|
84
|
+
### Semantic status colors
|
|
85
|
+
- `--vyre-color-semantic-success` Confirmations, complete states.
|
|
86
|
+
- `--vyre-color-semantic-success-subtle` Success badge backgrounds.
|
|
87
|
+
- `--vyre-color-semantic-warning` Warnings, beta indicators.
|
|
88
|
+
- `--vyre-color-semantic-warning-subtle` Warning badge backgrounds.
|
|
89
|
+
- `--vyre-color-semantic-danger` Errors, destructive actions.
|
|
90
|
+
- `--vyre-color-semantic-danger-hover` Hover for danger elements.
|
|
91
|
+
- `--vyre-color-semantic-danger-subtle` Error badge backgrounds.
|
|
92
|
+
|
|
93
|
+
---
|
|
94
|
+
|
|
95
|
+
## Typography Tokens
|
|
96
|
+
|
|
97
|
+
### Font families
|
|
98
|
+
- `--vyre-typography-font-family-display` Headlines, hero text (serif)
|
|
99
|
+
- `--vyre-typography-font-family-body` UI text, labels, body copy (sans-serif)
|
|
100
|
+
- `--vyre-typography-font-family-mono` Code, tokens, technical text (monospace)
|
|
101
|
+
|
|
102
|
+
### Font sizes
|
|
103
|
+
- `--vyre-typography-font-size-2xs` 10px — tiny labels
|
|
104
|
+
- `--vyre-typography-font-size-xs` 11px — badge text, captions
|
|
105
|
+
- `--vyre-typography-font-size-sm` 13px — default UI text, buttons
|
|
106
|
+
- `--vyre-typography-font-size-md` 15px — body text
|
|
107
|
+
- `--vyre-typography-font-size-lg` 18px — large body, small headings
|
|
108
|
+
- `--vyre-typography-font-size-xl` 22px — section headings
|
|
109
|
+
- `--vyre-typography-font-size-2xl` 28px — page headings
|
|
110
|
+
- `--vyre-typography-font-size-3xl` 36px — large headings
|
|
111
|
+
- `--vyre-typography-font-size-4xl` 48px — hero headings
|
|
112
|
+
- `--vyre-typography-font-size-5xl` 64px — display headings
|
|
113
|
+
|
|
114
|
+
### Font weights
|
|
115
|
+
- `--vyre-typography-font-weight-light` 300
|
|
116
|
+
- `--vyre-typography-font-weight-regular` 400
|
|
117
|
+
- `--vyre-typography-font-weight-medium` 500
|
|
118
|
+
- `--vyre-typography-font-weight-semibold` 600
|
|
119
|
+
- `--vyre-typography-font-weight-bold` 700
|
|
120
|
+
|
|
121
|
+
---
|
|
122
|
+
|
|
123
|
+
## Spacing Tokens (4px base grid)
|
|
124
|
+
|
|
125
|
+
- `--vyre-spacing-1` 4px
|
|
126
|
+
- `--vyre-spacing-2` 8px
|
|
127
|
+
- `--vyre-spacing-3` 12px
|
|
128
|
+
- `--vyre-spacing-4` 16px
|
|
129
|
+
- `--vyre-spacing-5` 20px
|
|
130
|
+
- `--vyre-spacing-6` 24px
|
|
131
|
+
- `--vyre-spacing-8` 32px
|
|
132
|
+
- `--vyre-spacing-10` 40px
|
|
133
|
+
- `--vyre-spacing-12` 48px
|
|
134
|
+
- `--vyre-spacing-16` 64px
|
|
135
|
+
- `--vyre-spacing-20` 80px
|
|
136
|
+
- `--vyre-spacing-24` 96px
|
|
137
|
+
|
|
138
|
+
---
|
|
139
|
+
|
|
140
|
+
## Border Radius Tokens
|
|
141
|
+
|
|
142
|
+
- `--vyre-border-radius-none` 0
|
|
143
|
+
- `--vyre-border-radius-sm` 4px — tight corners
|
|
144
|
+
- `--vyre-border-radius-md` 8px — default components
|
|
145
|
+
- `--vyre-border-radius-lg` 12px — cards, panels
|
|
146
|
+
- `--vyre-border-radius-xl` 16px — large cards
|
|
147
|
+
- `--vyre-border-radius-2xl` 24px — modals, sheets
|
|
148
|
+
- `--vyre-border-radius-full` 9999px — badges, pills, avatars
|
|
149
|
+
|
|
150
|
+
---
|
|
151
|
+
|
|
152
|
+
## Component API Reference
|
|
153
|
+
|
|
154
|
+
### Button
|
|
155
|
+
|
|
156
|
+
```tsx
|
|
157
|
+
import { Button } from "@usevyre/react"
|
|
158
|
+
|
|
159
|
+
// Props:
|
|
160
|
+
// variant = "primary" | "secondary" | "ghost" | "accent" | "teal" | "danger"
|
|
161
|
+
// size = "sm" | "md" | "lg" | "icon"
|
|
162
|
+
// loading = boolean
|
|
163
|
+
// disabled = boolean
|
|
164
|
+
// as = React.ElementType (default: "button")
|
|
165
|
+
// leftIcon = ReactNode
|
|
166
|
+
// rightIcon = ReactNode
|
|
167
|
+
|
|
168
|
+
// Examples:
|
|
169
|
+
<Button variant="accent" size="lg">Get Started</Button>
|
|
170
|
+
<Button variant="ghost" size="sm">Cancel</Button>
|
|
171
|
+
<Button variant="danger" loading>Deleting...</Button>
|
|
172
|
+
<Button as="a" href="/docs" variant="secondary">Read Docs</Button>
|
|
173
|
+
```
|
|
174
|
+
|
|
175
|
+
### Badge
|
|
176
|
+
|
|
177
|
+
```tsx
|
|
178
|
+
import { Badge } from "@usevyre/react"
|
|
179
|
+
|
|
180
|
+
// Props:
|
|
181
|
+
// variant = "default" | "accent" | "teal" | "success" | "warning" | "danger"
|
|
182
|
+
// dot = boolean (live status indicator dot)
|
|
183
|
+
|
|
184
|
+
// Examples:
|
|
185
|
+
<Badge variant="success" dot>Online</Badge>
|
|
186
|
+
<Badge variant="warning">Beta</Badge>
|
|
187
|
+
<Badge variant="danger">Error</Badge>
|
|
188
|
+
```
|
|
189
|
+
|
|
190
|
+
### Card
|
|
191
|
+
|
|
192
|
+
```tsx
|
|
193
|
+
import { Card, CardHeader, CardBody, CardFooter } from "@usevyre/react"
|
|
194
|
+
|
|
195
|
+
// Card props:
|
|
196
|
+
// variant = "default" | "elevated" | "outlined" | "ghost" | "accent"
|
|
197
|
+
// hoverable = boolean
|
|
198
|
+
// clickable = boolean
|
|
199
|
+
|
|
200
|
+
// Examples:
|
|
201
|
+
<Card variant="elevated">
|
|
202
|
+
<CardHeader>
|
|
203
|
+
<Badge variant="teal">New</Badge>
|
|
204
|
+
</CardHeader>
|
|
205
|
+
<CardBody>
|
|
206
|
+
<h3>Card Title</h3>
|
|
207
|
+
<p>Description text.</p>
|
|
208
|
+
</CardBody>
|
|
209
|
+
<CardFooter>
|
|
210
|
+
<Button variant="ghost" size="sm">Learn more</Button>
|
|
211
|
+
</CardFooter>
|
|
212
|
+
</Card>
|
|
213
|
+
```
|
|
214
|
+
|
|
215
|
+
### Field + Input + Textarea
|
|
216
|
+
|
|
217
|
+
```tsx
|
|
218
|
+
import { Field, Input, Textarea } from "@usevyre/react"
|
|
219
|
+
|
|
220
|
+
// Field props:
|
|
221
|
+
// label = string
|
|
222
|
+
// hint = string
|
|
223
|
+
// state = "idle" | "error" | "success" | "warning"
|
|
224
|
+
// required = boolean
|
|
225
|
+
|
|
226
|
+
// Input props:
|
|
227
|
+
// size = "sm" | "md" | "lg"
|
|
228
|
+
// leftElement = ReactNode
|
|
229
|
+
// rightElement = ReactNode
|
|
230
|
+
// + all native input props
|
|
231
|
+
|
|
232
|
+
// Examples:
|
|
233
|
+
<Field label="Email" state="error" hint="Invalid format">
|
|
234
|
+
<Input type="email" placeholder="you@example.com" />
|
|
235
|
+
</Field>
|
|
236
|
+
|
|
237
|
+
<Field label="Search">
|
|
238
|
+
<Input leftElement={<SearchIcon />} placeholder="Search..." />
|
|
239
|
+
</Field>
|
|
240
|
+
|
|
241
|
+
<Field label="Bio">
|
|
242
|
+
<Textarea rows={4} placeholder="Tell us about yourself..." />
|
|
243
|
+
</Field>
|
|
244
|
+
```
|
|
245
|
+
|
|
246
|
+
---
|
|
247
|
+
|
|
248
|
+
## Styling Rules for AI Agents
|
|
249
|
+
|
|
250
|
+
1. ALWAYS use semantic tokens (`--vyre-color-semantic-*`), never primitive tokens
|
|
251
|
+
2. NEVER hardcode colors — every color decision has a semantic token
|
|
252
|
+
3. Text hierarchy: `text-primary` → `text-secondary` → `text-muted` → `text-disabled`
|
|
253
|
+
4. Interactive hover states: add `-hover` suffix to base token
|
|
254
|
+
5. Low-opacity backgrounds: use `-subtle` suffix tokens
|
|
255
|
+
6. Spacing: always use `--vyre-spacing-*` — never raw px values in component code
|
|
256
|
+
7. Transitions: use `--vyre-transition-duration-*` and `--vyre-transition-easing-*`
|
|
257
|
+
|
|
258
|
+
---
|
|
259
|
+
|
|
260
|
+
## Common Patterns
|
|
261
|
+
|
|
262
|
+
### Page layout with sidebar
|
|
263
|
+
```tsx
|
|
264
|
+
<div style={{ display: "grid", gridTemplateColumns: "260px 1fr", minHeight: "100vh" }}>
|
|
265
|
+
<aside style={{ background: "var(--vyre-color-semantic-surface)", borderRight: "1px solid var(--vyre-color-semantic-border-subtle)" }}>
|
|
266
|
+
{/* sidebar content */}
|
|
267
|
+
</aside>
|
|
268
|
+
<main style={{ padding: "var(--vyre-spacing-12)" }}>
|
|
269
|
+
{/* main content */}
|
|
270
|
+
</main>
|
|
271
|
+
</div>
|
|
272
|
+
```
|
|
273
|
+
|
|
274
|
+
### Form with validation
|
|
275
|
+
```tsx
|
|
276
|
+
<form>
|
|
277
|
+
<Field label="Email" state={errors.email ? "error" : "idle"} hint={errors.email}>
|
|
278
|
+
<Input type="email" value={email} onChange={e => setEmail(e.target.value)} />
|
|
279
|
+
</Field>
|
|
280
|
+
<Button variant="accent" type="submit" loading={isSubmitting}>
|
|
281
|
+
Submit
|
|
282
|
+
</Button>
|
|
283
|
+
</form>
|
|
284
|
+
```
|
|
285
|
+
|
|
286
|
+
### Status badge with live indicator
|
|
287
|
+
```tsx
|
|
288
|
+
<Badge variant="success" dot>Live</Badge>
|
|
289
|
+
<Badge variant="danger" dot>Offline</Badge>
|
|
290
|
+
<Badge variant="warning">Beta</Badge>
|
|
291
|
+
```
|