@quilltap/theme-storybook 1.0.21 → 1.0.23
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/dist/{chunk-W3J7BRAL.mjs → chunk-45RKCZL3.mjs} +843 -136
- package/dist/index.css +62 -0
- package/dist/index.d.mts +1 -1
- package/dist/index.d.ts +1 -1
- package/dist/index.js +845 -135
- package/dist/index.mjs +7 -1
- package/dist/stories/index.d.mts +25 -1
- package/dist/stories/index.d.ts +25 -1
- package/dist/stories/index.js +845 -135
- package/dist/stories/index.mjs +7 -1
- package/package.json +3 -3
- package/src/css/qt-components.css +75 -0
- package/src/stories/components/Badges.tsx +90 -0
- package/src/stories/components/Cards.tsx +21 -0
- package/src/stories/components/Chat.tsx +262 -11
- package/src/stories/components/ColorPalette.tsx +10 -0
- package/src/stories/components/Dialogs.tsx +50 -2
- package/src/stories/components/EmptyState.tsx +102 -0
- package/src/stories/components/Inputs.tsx +62 -24
- package/src/stories/components/Loading.tsx +125 -0
- package/src/stories/components/Participant.tsx +187 -0
- package/src/stories/components/Spacing.tsx +169 -67
- package/src/stories/components/Typography.tsx +163 -46
- package/src/stories/index.ts +3 -0
|
@@ -7,129 +7,231 @@
|
|
|
7
7
|
import React from 'react';
|
|
8
8
|
|
|
9
9
|
export const Spacing: React.FC = () => {
|
|
10
|
-
const
|
|
10
|
+
const radiusTokens = [
|
|
11
|
+
{ name: 'None', variable: '0', value: '0' },
|
|
11
12
|
{ name: 'Small', variable: '--radius-sm', value: 'var(--radius-sm)' },
|
|
12
13
|
{ name: 'Medium', variable: '--radius-md', value: 'var(--radius-md)' },
|
|
13
14
|
{ name: 'Large', variable: '--radius-lg', value: 'var(--radius-lg)' },
|
|
15
|
+
{ name: 'Extra Large', variable: '--radius-xl', value: 'var(--radius-xl)' },
|
|
16
|
+
{ name: 'Full', variable: '9999px', value: '9999px' },
|
|
17
|
+
];
|
|
18
|
+
|
|
19
|
+
const componentRadii = [
|
|
20
|
+
{ name: 'Button', variable: '--qt-button-radius' },
|
|
21
|
+
{ name: 'Card', variable: '--qt-card-radius' },
|
|
22
|
+
{ name: 'Input', variable: '--qt-input-radius' },
|
|
23
|
+
{ name: 'Dialog', variable: '--qt-dialog-radius' },
|
|
24
|
+
{ name: 'Badge', variable: '--qt-badge-radius' },
|
|
25
|
+
{ name: 'Avatar', variable: '--qt-avatar-radius' },
|
|
26
|
+
{ name: 'Chat Message', variable: '--qt-chat-message-radius' },
|
|
27
|
+
];
|
|
28
|
+
|
|
29
|
+
const shadowTokens = [
|
|
30
|
+
{ name: 'Card Shadow', variable: '--qt-card-shadow' },
|
|
31
|
+
{ name: 'Card Hover Shadow', variable: '--qt-card-shadow-hover' },
|
|
32
|
+
{ name: 'Panel Shadow', variable: '--qt-panel-shadow' },
|
|
33
|
+
{ name: 'Dialog Shadow', variable: '--qt-dialog-shadow' },
|
|
34
|
+
{ name: 'Popover Shadow', variable: '--qt-popover-shadow' },
|
|
35
|
+
{ name: 'Button Primary Shadow', variable: '--qt-button-primary-shadow' },
|
|
36
|
+
{ name: 'Chat Message Shadow', variable: '--qt-chat-message-shadow' },
|
|
14
37
|
];
|
|
15
38
|
|
|
16
39
|
return (
|
|
17
40
|
<div style={{ padding: '1.5rem' }}>
|
|
18
41
|
<h2 style={{ fontSize: '1.5rem', fontWeight: 700, marginBottom: '1.5rem' }}>Spacing & Borders</h2>
|
|
19
42
|
|
|
20
|
-
{/* Border Radius */}
|
|
43
|
+
{/* Border Radius Scale */}
|
|
21
44
|
<section style={{ marginBottom: '2rem' }}>
|
|
22
45
|
<h3 style={{ fontSize: '1.125rem', fontWeight: 700, marginBottom: '1rem', borderBottom: '1px solid var(--color-border)', paddingBottom: '0.5rem' }}>
|
|
23
|
-
Border Radius
|
|
46
|
+
Border Radius Scale
|
|
24
47
|
</h3>
|
|
25
|
-
<div style={{ display: '
|
|
26
|
-
{
|
|
48
|
+
<div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(6rem, 1fr))', gap: '1.5rem' }}>
|
|
49
|
+
{radiusTokens.map(({ name, variable, value }) => (
|
|
27
50
|
<div key={variable} style={{ textAlign: 'center' }}>
|
|
28
51
|
<div
|
|
29
52
|
style={{
|
|
30
|
-
width: '
|
|
31
|
-
height: '
|
|
53
|
+
width: '5rem',
|
|
54
|
+
height: '5rem',
|
|
32
55
|
backgroundColor: 'var(--color-primary)',
|
|
33
56
|
borderRadius: value,
|
|
57
|
+
margin: '0 auto 0.5rem',
|
|
34
58
|
}}
|
|
35
59
|
/>
|
|
36
|
-
<div style={{
|
|
60
|
+
<div style={{ fontWeight: 500, fontSize: '0.875rem' }}>{name}</div>
|
|
37
61
|
<code style={{ fontSize: '0.75rem', color: 'var(--color-muted-foreground)' }}>{variable}</code>
|
|
38
62
|
</div>
|
|
39
63
|
))}
|
|
40
|
-
<div style={{ textAlign: 'center' }}>
|
|
41
|
-
<div
|
|
42
|
-
style={{
|
|
43
|
-
width: '6rem',
|
|
44
|
-
height: '6rem',
|
|
45
|
-
backgroundColor: 'var(--color-primary)',
|
|
46
|
-
borderRadius: '9999px',
|
|
47
|
-
}}
|
|
48
|
-
/>
|
|
49
|
-
<div style={{ marginTop: '0.5rem', fontWeight: 500 }}>Full / Pill</div>
|
|
50
|
-
<code style={{ fontSize: '0.75rem', color: 'var(--color-muted-foreground)' }}>9999px</code>
|
|
51
|
-
</div>
|
|
52
64
|
</div>
|
|
53
65
|
</section>
|
|
54
66
|
|
|
55
|
-
{/*
|
|
67
|
+
{/* Component Border Radii */}
|
|
56
68
|
<section style={{ marginBottom: '2rem' }}>
|
|
57
69
|
<h3 style={{ fontSize: '1.125rem', fontWeight: 700, marginBottom: '1rem', borderBottom: '1px solid var(--color-border)', paddingBottom: '0.5rem' }}>
|
|
58
|
-
|
|
70
|
+
Component Border Radii
|
|
59
71
|
</h3>
|
|
60
|
-
<div style={{ display: '
|
|
61
|
-
{
|
|
62
|
-
<div key={
|
|
72
|
+
<div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(8rem, 1fr))', gap: '1.5rem' }}>
|
|
73
|
+
{componentRadii.map(({ name, variable }) => (
|
|
74
|
+
<div key={variable} style={{ textAlign: 'center' }}>
|
|
63
75
|
<div
|
|
64
76
|
style={{
|
|
65
|
-
width:
|
|
66
|
-
height: '
|
|
67
|
-
backgroundColor: 'var(--color-
|
|
68
|
-
|
|
77
|
+
width: '6rem',
|
|
78
|
+
height: '4rem',
|
|
79
|
+
backgroundColor: 'var(--color-muted)',
|
|
80
|
+
border: '1px solid var(--color-border)',
|
|
81
|
+
borderRadius: `var(${variable})`,
|
|
82
|
+
margin: '0 auto 0.5rem',
|
|
69
83
|
}}
|
|
70
84
|
/>
|
|
71
|
-
<
|
|
72
|
-
<
|
|
73
|
-
{(px / 16).toFixed(px % 16 === 0 ? 0 : 2)}rem
|
|
74
|
-
</span>
|
|
85
|
+
<div style={{ fontWeight: 500, fontSize: '0.875rem' }}>{name}</div>
|
|
86
|
+
<code style={{ fontSize: '0.75rem', color: 'var(--color-muted-foreground)' }}>{variable}</code>
|
|
75
87
|
</div>
|
|
76
88
|
))}
|
|
77
89
|
</div>
|
|
78
90
|
</section>
|
|
79
91
|
|
|
80
92
|
{/* Shadows */}
|
|
81
|
-
<section>
|
|
93
|
+
<section style={{ marginBottom: '2rem' }}>
|
|
82
94
|
<h3 style={{ fontSize: '1.125rem', fontWeight: 700, marginBottom: '1rem', borderBottom: '1px solid var(--color-border)', paddingBottom: '0.5rem' }}>
|
|
83
95
|
Shadows
|
|
84
96
|
</h3>
|
|
85
|
-
<div style={{ display: '
|
|
86
|
-
|
|
97
|
+
<div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(10rem, 1fr))', gap: '1.5rem' }}>
|
|
98
|
+
{shadowTokens.map(({ name, variable }) => (
|
|
99
|
+
<div key={variable} style={{ padding: '1rem' }}>
|
|
100
|
+
<div
|
|
101
|
+
style={{
|
|
102
|
+
width: '100%',
|
|
103
|
+
height: '6rem',
|
|
104
|
+
backgroundColor: 'var(--color-background)',
|
|
105
|
+
borderRadius: 'var(--radius-lg)',
|
|
106
|
+
boxShadow: `var(${variable})`,
|
|
107
|
+
marginBottom: '0.5rem',
|
|
108
|
+
}}
|
|
109
|
+
/>
|
|
110
|
+
<div style={{ fontWeight: 500, fontSize: '0.875rem' }}>{name}</div>
|
|
111
|
+
<code style={{ fontSize: '0.75rem', color: 'var(--color-muted-foreground)' }}>{variable}</code>
|
|
112
|
+
</div>
|
|
113
|
+
))}
|
|
114
|
+
</div>
|
|
115
|
+
</section>
|
|
116
|
+
|
|
117
|
+
{/* Padding Tokens */}
|
|
118
|
+
<section style={{ marginBottom: '2rem' }}>
|
|
119
|
+
<h3 style={{ fontSize: '1.125rem', fontWeight: 700, marginBottom: '1rem', borderBottom: '1px solid var(--color-border)', paddingBottom: '0.5rem' }}>
|
|
120
|
+
Padding Tokens
|
|
121
|
+
</h3>
|
|
122
|
+
<div style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}>
|
|
123
|
+
<div style={{ display: 'flex', alignItems: 'center', gap: '1rem' }}>
|
|
124
|
+
<div
|
|
125
|
+
style={{
|
|
126
|
+
backgroundColor: 'var(--color-primary)',
|
|
127
|
+
color: 'var(--color-background)',
|
|
128
|
+
padding: 'var(--qt-button-padding-y) var(--qt-button-padding-x)',
|
|
129
|
+
borderRadius: 'var(--radius-md)',
|
|
130
|
+
}}
|
|
131
|
+
>
|
|
132
|
+
Button padding
|
|
133
|
+
</div>
|
|
134
|
+
<code style={{ fontSize: '0.75rem', color: 'var(--color-muted-foreground)' }}>
|
|
135
|
+
--qt-button-padding-x, --qt-button-padding-y
|
|
136
|
+
</code>
|
|
137
|
+
</div>
|
|
138
|
+
<div style={{ display: 'flex', alignItems: 'center', gap: '1rem' }}>
|
|
139
|
+
<div
|
|
140
|
+
style={{
|
|
141
|
+
backgroundColor: 'var(--color-muted)',
|
|
142
|
+
padding: 'var(--qt-card-padding)',
|
|
143
|
+
border: '1px solid var(--color-border)',
|
|
144
|
+
borderRadius: 'var(--radius-md)',
|
|
145
|
+
}}
|
|
146
|
+
>
|
|
147
|
+
Card padding
|
|
148
|
+
</div>
|
|
149
|
+
<code style={{ fontSize: '0.75rem', color: 'var(--color-muted-foreground)' }}>--qt-card-padding</code>
|
|
150
|
+
</div>
|
|
151
|
+
<div style={{ display: 'flex', alignItems: 'center', gap: '1rem' }}>
|
|
152
|
+
<div
|
|
153
|
+
style={{
|
|
154
|
+
backgroundColor: 'var(--color-muted)',
|
|
155
|
+
padding: 'var(--qt-input-padding-y) var(--qt-input-padding-x)',
|
|
156
|
+
border: '1px solid var(--color-border)',
|
|
157
|
+
borderRadius: 'var(--radius-md)',
|
|
158
|
+
}}
|
|
159
|
+
>
|
|
160
|
+
Input padding
|
|
161
|
+
</div>
|
|
162
|
+
<code style={{ fontSize: '0.75rem', color: 'var(--color-muted-foreground)' }}>
|
|
163
|
+
--qt-input-padding-x, --qt-input-padding-y
|
|
164
|
+
</code>
|
|
165
|
+
</div>
|
|
166
|
+
<div style={{ display: 'flex', alignItems: 'center', gap: '1rem' }}>
|
|
87
167
|
<div
|
|
88
168
|
style={{
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
borderRadius: 'var(--radius-
|
|
93
|
-
boxShadow: '0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)',
|
|
169
|
+
backgroundColor: 'var(--color-muted)',
|
|
170
|
+
padding: 'var(--qt-chat-message-padding)',
|
|
171
|
+
border: '1px solid var(--color-border)',
|
|
172
|
+
borderRadius: 'var(--radius-md)',
|
|
94
173
|
}}
|
|
95
|
-
|
|
96
|
-
|
|
174
|
+
>
|
|
175
|
+
Chat message padding
|
|
176
|
+
</div>
|
|
177
|
+
<code style={{ fontSize: '0.75rem', color: 'var(--color-muted-foreground)' }}>--qt-chat-message-padding</code>
|
|
97
178
|
</div>
|
|
98
|
-
|
|
179
|
+
</div>
|
|
180
|
+
</section>
|
|
181
|
+
|
|
182
|
+
{/* Layout Dimensions */}
|
|
183
|
+
<section>
|
|
184
|
+
<h3 style={{ fontSize: '1.125rem', fontWeight: 700, marginBottom: '1rem', borderBottom: '1px solid var(--color-border)', paddingBottom: '0.5rem' }}>
|
|
185
|
+
Layout Dimensions
|
|
186
|
+
</h3>
|
|
187
|
+
<div style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}>
|
|
188
|
+
<div style={{ display: 'flex', alignItems: 'center', gap: '1rem' }}>
|
|
99
189
|
<div
|
|
100
190
|
style={{
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
191
|
+
backgroundColor: 'var(--color-muted)',
|
|
192
|
+
display: 'flex',
|
|
193
|
+
alignItems: 'center',
|
|
194
|
+
justifyContent: 'center',
|
|
195
|
+
height: 'var(--qt-navbar-height)',
|
|
196
|
+
width: '200px',
|
|
197
|
+
border: '1px solid var(--color-border)',
|
|
106
198
|
}}
|
|
107
|
-
|
|
108
|
-
|
|
199
|
+
>
|
|
200
|
+
Navbar height
|
|
201
|
+
</div>
|
|
202
|
+
<code style={{ fontSize: '0.75rem', color: 'var(--color-muted-foreground)' }}>--qt-navbar-height</code>
|
|
109
203
|
</div>
|
|
110
|
-
<div style={{
|
|
204
|
+
<div style={{ display: 'flex', alignItems: 'center', gap: '1rem' }}>
|
|
111
205
|
<div
|
|
112
206
|
style={{
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
207
|
+
backgroundColor: 'var(--color-muted)',
|
|
208
|
+
display: 'flex',
|
|
209
|
+
alignItems: 'center',
|
|
210
|
+
justifyContent: 'center',
|
|
211
|
+
width: 'var(--qt-sidebar-width)',
|
|
212
|
+
height: '100px',
|
|
213
|
+
border: '1px solid var(--color-border)',
|
|
118
214
|
}}
|
|
119
|
-
|
|
120
|
-
|
|
215
|
+
>
|
|
216
|
+
Sidebar width
|
|
217
|
+
</div>
|
|
218
|
+
<code style={{ fontSize: '0.75rem', color: 'var(--color-muted-foreground)' }}>--qt-sidebar-width</code>
|
|
121
219
|
</div>
|
|
122
|
-
<div style={{
|
|
220
|
+
<div style={{ display: 'flex', alignItems: 'center', gap: '1rem' }}>
|
|
123
221
|
<div
|
|
124
222
|
style={{
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
223
|
+
backgroundColor: 'var(--color-muted)',
|
|
224
|
+
display: 'flex',
|
|
225
|
+
alignItems: 'center',
|
|
226
|
+
justifyContent: 'center',
|
|
227
|
+
width: 'var(--qt-chat-sidebar-width)',
|
|
228
|
+
height: '100px',
|
|
229
|
+
border: '1px solid var(--color-border)',
|
|
130
230
|
}}
|
|
131
|
-
|
|
132
|
-
|
|
231
|
+
>
|
|
232
|
+
Chat sidebar width
|
|
233
|
+
</div>
|
|
234
|
+
<code style={{ fontSize: '0.75rem', color: 'var(--color-muted-foreground)' }}>--qt-chat-sidebar-width</code>
|
|
133
235
|
</div>
|
|
134
236
|
</div>
|
|
135
237
|
</section>
|
|
@@ -11,93 +11,210 @@ export const Typography: React.FC = () => {
|
|
|
11
11
|
<div style={{ padding: '1.5rem' }}>
|
|
12
12
|
<h2 style={{ fontSize: '1.5rem', fontWeight: 700, marginBottom: '1.5rem' }}>Typography</h2>
|
|
13
13
|
|
|
14
|
-
{/*
|
|
14
|
+
{/* Headings */}
|
|
15
15
|
<section style={{ marginBottom: '2rem' }}>
|
|
16
16
|
<h3 style={{ fontSize: '1.125rem', fontWeight: 700, marginBottom: '1rem', borderBottom: '1px solid var(--color-border)', paddingBottom: '0.5rem' }}>
|
|
17
|
-
|
|
17
|
+
Headings (qt-heading-*)
|
|
18
18
|
</h3>
|
|
19
|
-
<div style={{ display: 'flex', flexDirection: 'column', gap: '
|
|
19
|
+
<div style={{ display: 'flex', flexDirection: 'column', gap: '0.75rem' }}>
|
|
20
20
|
<div>
|
|
21
|
-
<
|
|
22
|
-
<
|
|
21
|
+
<h1 className="qt-heading-1">Heading 1 - The quick brown fox</h1>
|
|
22
|
+
<code style={{ fontSize: '0.75rem', color: 'var(--color-muted-foreground)' }}>.qt-heading-1</code>
|
|
23
|
+
</div>
|
|
24
|
+
<div>
|
|
25
|
+
<h2 className="qt-heading-2">Heading 2 - The quick brown fox</h2>
|
|
26
|
+
<code style={{ fontSize: '0.75rem', color: 'var(--color-muted-foreground)' }}>.qt-heading-2</code>
|
|
27
|
+
</div>
|
|
28
|
+
<div>
|
|
29
|
+
<h3 className="qt-heading-3">Heading 3 - The quick brown fox</h3>
|
|
30
|
+
<code style={{ fontSize: '0.75rem', color: 'var(--color-muted-foreground)' }}>.qt-heading-3</code>
|
|
31
|
+
</div>
|
|
32
|
+
<div>
|
|
33
|
+
<h4 className="qt-heading-4">Heading 4 - The quick brown fox</h4>
|
|
34
|
+
<code style={{ fontSize: '0.75rem', color: 'var(--color-muted-foreground)' }}>.qt-heading-4</code>
|
|
35
|
+
</div>
|
|
36
|
+
</div>
|
|
37
|
+
</section>
|
|
38
|
+
|
|
39
|
+
{/* Body Text */}
|
|
40
|
+
<section style={{ marginBottom: '2rem' }}>
|
|
41
|
+
<h3 style={{ fontSize: '1.125rem', fontWeight: 700, marginBottom: '1rem', borderBottom: '1px solid var(--color-border)', paddingBottom: '0.5rem' }}>
|
|
42
|
+
Body Text
|
|
43
|
+
</h3>
|
|
44
|
+
<div style={{ display: 'flex', flexDirection: 'column', gap: '1rem', maxWidth: '40rem' }}>
|
|
45
|
+
<div>
|
|
46
|
+
<p className="qt-text-lead">
|
|
47
|
+
Lead text - Used for introductory paragraphs that need more emphasis.
|
|
23
48
|
The quick brown fox jumps over the lazy dog.
|
|
24
49
|
</p>
|
|
50
|
+
<code style={{ fontSize: '0.75rem', color: 'var(--color-muted-foreground)' }}>.qt-text-lead</code>
|
|
25
51
|
</div>
|
|
26
52
|
<div>
|
|
27
|
-
<
|
|
28
|
-
|
|
53
|
+
<p className="qt-text-large">
|
|
54
|
+
Large text - Slightly larger than body text for emphasis.
|
|
29
55
|
The quick brown fox jumps over the lazy dog.
|
|
30
56
|
</p>
|
|
57
|
+
<code style={{ fontSize: '0.75rem', color: 'var(--color-muted-foreground)' }}>.qt-text-large</code>
|
|
31
58
|
</div>
|
|
32
59
|
<div>
|
|
33
|
-
<
|
|
34
|
-
|
|
60
|
+
<p>
|
|
61
|
+
Default body text - The standard text size for most content.
|
|
62
|
+
The quick brown fox jumps over the lazy dog. Pack my box with five dozen liquor jugs.
|
|
63
|
+
</p>
|
|
64
|
+
<code style={{ fontSize: '0.75rem', color: 'var(--color-muted-foreground)' }}>default / no class</code>
|
|
65
|
+
</div>
|
|
66
|
+
<div>
|
|
67
|
+
<p className="qt-text-small">
|
|
68
|
+
Small text - For less important or supplementary information.
|
|
35
69
|
The quick brown fox jumps over the lazy dog.
|
|
36
70
|
</p>
|
|
71
|
+
<code style={{ fontSize: '0.75rem', color: 'var(--color-muted-foreground)' }}>.qt-text-small</code>
|
|
72
|
+
</div>
|
|
73
|
+
<div>
|
|
74
|
+
<p className="qt-text-xs">
|
|
75
|
+
Extra small text - For fine print, captions, or metadata.
|
|
76
|
+
The quick brown fox jumps over the lazy dog.
|
|
77
|
+
</p>
|
|
78
|
+
<code style={{ fontSize: '0.75rem', color: 'var(--color-muted-foreground)' }}>.qt-text-xs</code>
|
|
37
79
|
</div>
|
|
38
80
|
</div>
|
|
39
81
|
</section>
|
|
40
82
|
|
|
41
|
-
{/*
|
|
83
|
+
{/* Text Colors */}
|
|
42
84
|
<section style={{ marginBottom: '2rem' }}>
|
|
43
85
|
<h3 style={{ fontSize: '1.125rem', fontWeight: 700, marginBottom: '1rem', borderBottom: '1px solid var(--color-border)', paddingBottom: '0.5rem' }}>
|
|
44
|
-
|
|
86
|
+
Text Colors
|
|
45
87
|
</h3>
|
|
46
|
-
<div style={{ display: 'flex', flexDirection: 'column', gap: '0.
|
|
47
|
-
<
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
<
|
|
52
|
-
|
|
88
|
+
<div style={{ display: 'flex', flexDirection: 'column', gap: '0.5rem' }}>
|
|
89
|
+
<div>
|
|
90
|
+
<p>Default text color</p>
|
|
91
|
+
<code style={{ fontSize: '0.75rem', color: 'var(--color-muted-foreground)' }}>default</code>
|
|
92
|
+
</div>
|
|
93
|
+
<div>
|
|
94
|
+
<p className="qt-text-muted">Muted text - For secondary content</p>
|
|
95
|
+
<code style={{ fontSize: '0.75rem', color: 'var(--color-muted-foreground)' }}>.qt-text-muted</code>
|
|
96
|
+
</div>
|
|
97
|
+
<div>
|
|
98
|
+
<p className="qt-text-primary">Primary text - For emphasis and links</p>
|
|
99
|
+
<code style={{ fontSize: '0.75rem', color: 'var(--color-muted-foreground)' }}>.qt-text-primary</code>
|
|
100
|
+
</div>
|
|
101
|
+
<div>
|
|
102
|
+
<p className="qt-text-success">Success text - For positive messages</p>
|
|
103
|
+
<code style={{ fontSize: '0.75rem', color: 'var(--color-muted-foreground)' }}>.qt-text-success</code>
|
|
104
|
+
</div>
|
|
105
|
+
<div>
|
|
106
|
+
<p className="qt-text-warning">Warning text - For caution messages</p>
|
|
107
|
+
<code style={{ fontSize: '0.75rem', color: 'var(--color-muted-foreground)' }}>.qt-text-warning</code>
|
|
108
|
+
</div>
|
|
109
|
+
<div>
|
|
110
|
+
<p className="qt-text-destructive">Destructive text - For error messages</p>
|
|
111
|
+
<code style={{ fontSize: '0.75rem', color: 'var(--color-muted-foreground)' }}>.qt-text-destructive</code>
|
|
112
|
+
</div>
|
|
113
|
+
<div>
|
|
114
|
+
<p className="qt-text-info">Info text - For informational messages</p>
|
|
115
|
+
<code style={{ fontSize: '0.75rem', color: 'var(--color-muted-foreground)' }}>.qt-text-info</code>
|
|
116
|
+
</div>
|
|
53
117
|
</div>
|
|
54
118
|
</section>
|
|
55
119
|
|
|
56
|
-
{/*
|
|
120
|
+
{/* Labels & UI Text */}
|
|
57
121
|
<section style={{ marginBottom: '2rem' }}>
|
|
58
122
|
<h3 style={{ fontSize: '1.125rem', fontWeight: 700, marginBottom: '1rem', borderBottom: '1px solid var(--color-border)', paddingBottom: '0.5rem' }}>
|
|
59
|
-
|
|
123
|
+
Labels & UI Text
|
|
60
124
|
</h3>
|
|
61
|
-
<div style={{ display: 'flex', flexDirection: 'column', gap: '
|
|
125
|
+
<div style={{ display: 'flex', flexDirection: 'column', gap: '0.75rem' }}>
|
|
62
126
|
<div>
|
|
63
|
-
<span
|
|
64
|
-
<
|
|
65
|
-
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
|
66
|
-
</p>
|
|
127
|
+
<span className="qt-label">Form Label</span>
|
|
128
|
+
<code style={{ fontSize: '0.75rem', color: 'var(--color-muted-foreground)', marginLeft: '1rem' }}>.qt-label</code>
|
|
67
129
|
</div>
|
|
68
130
|
<div>
|
|
69
|
-
<span
|
|
70
|
-
<
|
|
71
|
-
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
|
72
|
-
</p>
|
|
131
|
+
<span className="qt-hint">Hint text for form fields</span>
|
|
132
|
+
<code style={{ fontSize: '0.75rem', color: 'var(--color-muted-foreground)', marginLeft: '1rem' }}>.qt-hint</code>
|
|
73
133
|
</div>
|
|
74
134
|
<div>
|
|
75
|
-
<span
|
|
76
|
-
<
|
|
77
|
-
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
|
78
|
-
</p>
|
|
135
|
+
<span className="qt-text-label">UI Label Text</span>
|
|
136
|
+
<code style={{ fontSize: '0.75rem', color: 'var(--color-muted-foreground)', marginLeft: '1rem' }}>.qt-text-label</code>
|
|
79
137
|
</div>
|
|
80
138
|
<div>
|
|
81
|
-
<span
|
|
82
|
-
<
|
|
83
|
-
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
|
84
|
-
</p>
|
|
139
|
+
<span className="qt-text-section">Section Header</span>
|
|
140
|
+
<code style={{ fontSize: '0.75rem', color: 'var(--color-muted-foreground)', marginLeft: '1rem' }}>.qt-text-section</code>
|
|
85
141
|
</div>
|
|
86
142
|
</div>
|
|
87
143
|
</section>
|
|
88
144
|
|
|
89
|
-
{/*
|
|
145
|
+
{/* Code & Monospace */}
|
|
90
146
|
<section style={{ marginBottom: '2rem' }}>
|
|
91
147
|
<h3 style={{ fontSize: '1.125rem', fontWeight: 700, marginBottom: '1rem', borderBottom: '1px solid var(--color-border)', paddingBottom: '0.5rem' }}>
|
|
92
|
-
|
|
148
|
+
Code & Monospace
|
|
93
149
|
</h3>
|
|
94
|
-
<div style={{ display: 'flex', flexDirection: 'column', gap: '0.
|
|
95
|
-
<
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
<
|
|
100
|
-
|
|
150
|
+
<div style={{ display: 'flex', flexDirection: 'column', gap: '0.75rem' }}>
|
|
151
|
+
<div>
|
|
152
|
+
<code className="qt-code-inline">inline code example</code>
|
|
153
|
+
<span style={{ fontSize: '0.75rem', color: 'var(--color-muted-foreground)', marginLeft: '1rem' }}>.qt-code-inline</span>
|
|
154
|
+
</div>
|
|
155
|
+
<div>
|
|
156
|
+
<pre className="qt-code-block">
|
|
157
|
+
{`function greet(name: string): string {
|
|
158
|
+
return \`Hello, \${name}!\`;
|
|
159
|
+
}
|
|
160
|
+
|
|
161
|
+
console.log(greet('World'));`}
|
|
162
|
+
</pre>
|
|
163
|
+
<code style={{ fontSize: '0.75rem', color: 'var(--color-muted-foreground)' }}>.qt-code-block</code>
|
|
164
|
+
</div>
|
|
165
|
+
</div>
|
|
166
|
+
</section>
|
|
167
|
+
|
|
168
|
+
{/* Prose */}
|
|
169
|
+
<section style={{ marginBottom: '2rem' }}>
|
|
170
|
+
<h3 style={{ fontSize: '1.125rem', fontWeight: 700, marginBottom: '1rem', borderBottom: '1px solid var(--color-border)', paddingBottom: '0.5rem' }}>
|
|
171
|
+
Prose (Long-form Content)
|
|
172
|
+
</h3>
|
|
173
|
+
<div className="qt-prose" style={{ maxWidth: '40rem' }}>
|
|
174
|
+
<h3>Article Title</h3>
|
|
175
|
+
<p>
|
|
176
|
+
This is an example of the <code>.qt-prose</code> class applied to a container.
|
|
177
|
+
It provides sensible defaults for long-form content like articles, documentation,
|
|
178
|
+
and chat messages.
|
|
179
|
+
</p>
|
|
180
|
+
<p>
|
|
181
|
+
The quick brown fox jumps over the lazy dog. Pack my box with five dozen liquor jugs.
|
|
182
|
+
How vexingly quick daft zebras jump! The five boxing wizards jump quickly.
|
|
183
|
+
</p>
|
|
184
|
+
<h4>Subsection</h4>
|
|
185
|
+
<p>
|
|
186
|
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor
|
|
187
|
+
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
|
|
188
|
+
exercitation ullamco laboris.
|
|
189
|
+
</p>
|
|
190
|
+
</div>
|
|
191
|
+
<code style={{ fontSize: '0.75rem', color: 'var(--color-muted-foreground)' }}>.qt-prose</code>
|
|
192
|
+
</section>
|
|
193
|
+
|
|
194
|
+
{/* Font Families */}
|
|
195
|
+
<section style={{ marginBottom: '2rem' }}>
|
|
196
|
+
<h3 style={{ fontSize: '1.125rem', fontWeight: 700, marginBottom: '1rem', borderBottom: '1px solid var(--color-border)', paddingBottom: '0.5rem' }}>
|
|
197
|
+
Font Families
|
|
198
|
+
</h3>
|
|
199
|
+
<div style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}>
|
|
200
|
+
<div>
|
|
201
|
+
<code style={{ fontSize: '0.75rem', color: 'var(--color-muted-foreground)' }}>--font-sans</code>
|
|
202
|
+
<p style={{ fontFamily: 'var(--font-sans)', fontSize: '1.125rem', marginTop: '0.25rem' }}>
|
|
203
|
+
The quick brown fox jumps over the lazy dog.
|
|
204
|
+
</p>
|
|
205
|
+
</div>
|
|
206
|
+
<div>
|
|
207
|
+
<code style={{ fontSize: '0.75rem', color: 'var(--color-muted-foreground)' }}>--font-serif</code>
|
|
208
|
+
<p style={{ fontFamily: 'var(--font-serif)', fontSize: '1.125rem', marginTop: '0.25rem' }}>
|
|
209
|
+
The quick brown fox jumps over the lazy dog.
|
|
210
|
+
</p>
|
|
211
|
+
</div>
|
|
212
|
+
<div>
|
|
213
|
+
<code style={{ fontSize: '0.75rem', color: 'var(--color-muted-foreground)' }}>--font-mono</code>
|
|
214
|
+
<p style={{ fontFamily: 'var(--font-mono)', fontSize: '1.125rem', marginTop: '0.25rem' }}>
|
|
215
|
+
The quick brown fox jumps over the lazy dog.
|
|
216
|
+
</p>
|
|
217
|
+
</div>
|
|
101
218
|
</div>
|
|
102
219
|
</section>
|
|
103
220
|
</div>
|
package/src/stories/index.ts
CHANGED
|
@@ -19,3 +19,6 @@ export * from './components/Tabs';
|
|
|
19
19
|
export * from './components/Chat';
|
|
20
20
|
export * from './components/FilePreview';
|
|
21
21
|
export * from './components/ThemeComparison';
|
|
22
|
+
export * from './components/EmptyState';
|
|
23
|
+
export * from './components/Loading';
|
|
24
|
+
export * from './components/Participant';
|