aural-ui 2.0.8 → 2.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/dist/components/switch/Switch.stories.tsx +18 -0
- package/dist/components/switch/index.tsx +32 -12
- package/dist/icons/index.ts +2 -0
- package/dist/icons/moon-icon/MoonIcon.stories.tsx +591 -0
- package/dist/icons/moon-icon/index.tsx +21 -0
- package/dist/icons/moon-icon/meta.ts +8 -0
- package/dist/icons/sun-icon/SunIcon.stories.tsx +886 -0
- package/dist/icons/sun-icon/index.tsx +34 -0
- package/dist/icons/sun-icon/meta.ts +8 -0
- package/dist/index.js +102 -111
- package/package.json +4 -2
|
@@ -0,0 +1,886 @@
|
|
|
1
|
+
import React from "react"
|
|
2
|
+
import type { Meta, StoryObj } from "@storybook/react"
|
|
3
|
+
|
|
4
|
+
import { SunIcon } from "."
|
|
5
|
+
|
|
6
|
+
const meta: Meta<typeof SunIcon> = {
|
|
7
|
+
title: "Icons/SunIcon",
|
|
8
|
+
component: SunIcon,
|
|
9
|
+
parameters: {
|
|
10
|
+
layout: "fullscreen",
|
|
11
|
+
backgrounds: {
|
|
12
|
+
default: "dark",
|
|
13
|
+
values: [
|
|
14
|
+
{ name: "dark", value: "#0a0a0a" },
|
|
15
|
+
{ name: "darker", value: "#000000" },
|
|
16
|
+
{ name: "light", value: "#ffffff" },
|
|
17
|
+
],
|
|
18
|
+
},
|
|
19
|
+
docs: {
|
|
20
|
+
page: () => (
|
|
21
|
+
<>
|
|
22
|
+
{/* Override default docs styling */}
|
|
23
|
+
<style>
|
|
24
|
+
{`
|
|
25
|
+
.sbdocs-wrapper {
|
|
26
|
+
padding: 0 ;
|
|
27
|
+
max-width: none ;
|
|
28
|
+
background: transparent ;
|
|
29
|
+
}
|
|
30
|
+
.sbdocs-content {
|
|
31
|
+
max-width: none ;
|
|
32
|
+
padding: 0 ;
|
|
33
|
+
margin: 0 ;
|
|
34
|
+
background: transparent ;
|
|
35
|
+
}
|
|
36
|
+
.docs-story {
|
|
37
|
+
background: transparent ;
|
|
38
|
+
}
|
|
39
|
+
.sbdocs {
|
|
40
|
+
background: transparent ;
|
|
41
|
+
}
|
|
42
|
+
body {
|
|
43
|
+
background: #0a0a0a ;
|
|
44
|
+
}
|
|
45
|
+
#storybook-docs {
|
|
46
|
+
background: #0a0a0a ;
|
|
47
|
+
}
|
|
48
|
+
.sbdocs-preview {
|
|
49
|
+
background: transparent ;
|
|
50
|
+
border: none ;
|
|
51
|
+
}
|
|
52
|
+
.sbdocs-h1, .sbdocs-h2, .sbdocs-h3, .sbdocs-h4, .sbdocs-h5, .sbdocs-h6 {
|
|
53
|
+
color: white ;
|
|
54
|
+
}
|
|
55
|
+
.sbdocs-p, .sbdocs-li {
|
|
56
|
+
color: rgba(255, 255, 255, 0.7) ;
|
|
57
|
+
}
|
|
58
|
+
.sbdocs-code {
|
|
59
|
+
background: rgba(255, 255, 255, 0.1) ;
|
|
60
|
+
color: rgba(168, 85, 247, 1) ;
|
|
61
|
+
border: 1px solid rgba(255, 255, 255, 0.1) ;
|
|
62
|
+
}
|
|
63
|
+
.sbdocs-pre {
|
|
64
|
+
background: rgba(0, 0, 0, 0.4) ;
|
|
65
|
+
border: 1px solid rgba(255, 255, 255, 0.1) ;
|
|
66
|
+
}
|
|
67
|
+
.sbdocs-table {
|
|
68
|
+
background: rgba(255, 255, 255, 0.05) ;
|
|
69
|
+
border: 1px solid rgba(255, 255, 255, 0.1) ;
|
|
70
|
+
}
|
|
71
|
+
.sbdocs-table th {
|
|
72
|
+
background: rgba(255, 255, 255, 0.05) ;
|
|
73
|
+
color: white ;
|
|
74
|
+
border-bottom: 1px solid rgba(255, 255, 255, 0.1) ;
|
|
75
|
+
}
|
|
76
|
+
.sbdocs-table td {
|
|
77
|
+
color: rgba(255, 255, 255, 0.7) ;
|
|
78
|
+
border-bottom: 1px solid rgba(255, 255, 255, 0.05) ;
|
|
79
|
+
}
|
|
80
|
+
`}
|
|
81
|
+
</style>
|
|
82
|
+
|
|
83
|
+
<div className="min-h-screen bg-gradient-to-br from-gray-900 via-blue-900/20 to-gray-900">
|
|
84
|
+
{/* Header */}
|
|
85
|
+
<div className="relative overflow-hidden border-b border-white/10 bg-black/20 backdrop-blur-xl">
|
|
86
|
+
<div className="absolute inset-0 bg-gradient-to-r from-blue-500/10 via-transparent to-purple-500/10" />
|
|
87
|
+
<div className="relative !mx-auto max-w-7xl px-6 py-16">
|
|
88
|
+
<div className="!space-y-6 text-center">
|
|
89
|
+
<div className="!mx-auto flex h-24 w-24 items-center justify-center rounded-2xl border border-blue-500/30 bg-gradient-to-br from-blue-500/20 to-purple-500/20">
|
|
90
|
+
<SunIcon className="h-12 w-12 text-blue-400" />
|
|
91
|
+
</div>
|
|
92
|
+
<h1 className="!text-fm-primary text-5xl font-bold">
|
|
93
|
+
SunIcon
|
|
94
|
+
</h1>
|
|
95
|
+
<p className="!mx-auto max-w-3xl text-xl leading-relaxed !text-white/70">
|
|
96
|
+
A versatile suggestion icon for hints, recommendations, and
|
|
97
|
+
guidance elements. Built with accessibility in mind using
|
|
98
|
+
Radix UI's AccessibleIcon wrapper.
|
|
99
|
+
</p>
|
|
100
|
+
|
|
101
|
+
{/* Stats */}
|
|
102
|
+
<div className="flex items-center justify-center gap-8 pt-8">
|
|
103
|
+
<div className="text-center">
|
|
104
|
+
<div className="text-3xl font-bold text-blue-300">
|
|
105
|
+
Accessible
|
|
106
|
+
</div>
|
|
107
|
+
<div className="text-sm text-white/60">
|
|
108
|
+
Screen reader friendly
|
|
109
|
+
</div>
|
|
110
|
+
</div>
|
|
111
|
+
<div className="h-8 w-px bg-white/20" />
|
|
112
|
+
<div className="text-center">
|
|
113
|
+
<div className="text-3xl font-bold text-purple-300">
|
|
114
|
+
Scalable
|
|
115
|
+
</div>
|
|
116
|
+
<div className="text-sm text-white/60">
|
|
117
|
+
Any size needed
|
|
118
|
+
</div>
|
|
119
|
+
</div>
|
|
120
|
+
<div className="h-8 w-px bg-white/20" />
|
|
121
|
+
<div className="text-center">
|
|
122
|
+
<div className="text-3xl font-bold text-indigo-300">
|
|
123
|
+
Flexible
|
|
124
|
+
</div>
|
|
125
|
+
<div className="text-sm text-white/60">
|
|
126
|
+
Customizable styling
|
|
127
|
+
</div>
|
|
128
|
+
</div>
|
|
129
|
+
</div>
|
|
130
|
+
</div>
|
|
131
|
+
</div>
|
|
132
|
+
</div>
|
|
133
|
+
|
|
134
|
+
{/* Content */}
|
|
135
|
+
<div className="!mx-auto max-w-7xl !space-y-16 px-6 py-12">
|
|
136
|
+
{/* Quick Usage */}
|
|
137
|
+
<div className="!space-y-8">
|
|
138
|
+
<h2 className="text-center text-3xl font-bold !text-white">
|
|
139
|
+
Quick Start
|
|
140
|
+
</h2>
|
|
141
|
+
<div className="grid grid-cols-1 gap-8 lg:grid-cols-2">
|
|
142
|
+
<div className="!space-y-4">
|
|
143
|
+
<h3 className="text-xl font-semibold !text-blue-300">
|
|
144
|
+
Basic Usage
|
|
145
|
+
</h3>
|
|
146
|
+
<div className="rounded-lg bg-black/40 p-4">
|
|
147
|
+
<pre className="overflow-x-auto text-sm !text-green-300">
|
|
148
|
+
{`import { SunIcon } from "@icons/suggestion-icon"
|
|
149
|
+
|
|
150
|
+
function MyComponent() {
|
|
151
|
+
return (
|
|
152
|
+
<div className="flex items-center gap-2">
|
|
153
|
+
<SunIcon className="h-5 w-5 text-blue-500" />
|
|
154
|
+
<span>Try this suggestion</span>
|
|
155
|
+
</div>
|
|
156
|
+
)
|
|
157
|
+
}`}
|
|
158
|
+
</pre>
|
|
159
|
+
</div>
|
|
160
|
+
</div>
|
|
161
|
+
|
|
162
|
+
<div className="!space-y-4">
|
|
163
|
+
<h3 className="text-xl font-semibold !text-blue-300">
|
|
164
|
+
Live Preview
|
|
165
|
+
</h3>
|
|
166
|
+
<div className="flex h-32 items-center justify-center rounded-lg border border-white/10 bg-white/5">
|
|
167
|
+
<div className="flex items-center gap-3 rounded-lg border border-blue-500/20 bg-blue-500/10 px-4 py-2">
|
|
168
|
+
<SunIcon className="h-5 w-5 text-blue-400" />
|
|
169
|
+
<span className="text-white">Try this suggestion</span>
|
|
170
|
+
</div>
|
|
171
|
+
</div>
|
|
172
|
+
</div>
|
|
173
|
+
</div>
|
|
174
|
+
</div>
|
|
175
|
+
|
|
176
|
+
{/* Props Documentation */}
|
|
177
|
+
<div className="!space-y-8">
|
|
178
|
+
<h2 className="text-center text-3xl font-bold !text-white">
|
|
179
|
+
Props & Configuration
|
|
180
|
+
</h2>
|
|
181
|
+
|
|
182
|
+
<div className="overflow-hidden rounded-lg border border-white/10 bg-white/5">
|
|
183
|
+
<div className="bg-white/5 p-4">
|
|
184
|
+
<h3 className="text-xl font-semibold !text-white">Props</h3>
|
|
185
|
+
</div>
|
|
186
|
+
<table className="!my-0 w-full">
|
|
187
|
+
<thead className="bg-white/5">
|
|
188
|
+
<tr className="border-b border-white/10">
|
|
189
|
+
<th className="px-6 py-4 text-left text-sm font-semibold !text-white">
|
|
190
|
+
Prop
|
|
191
|
+
</th>
|
|
192
|
+
<th className="px-6 py-4 text-left text-sm font-semibold !text-white">
|
|
193
|
+
Type
|
|
194
|
+
</th>
|
|
195
|
+
<th className="px-6 py-4 text-left text-sm font-semibold !text-white">
|
|
196
|
+
Default
|
|
197
|
+
</th>
|
|
198
|
+
<th className="px-6 py-4 text-left text-sm font-semibold !text-white">
|
|
199
|
+
Description
|
|
200
|
+
</th>
|
|
201
|
+
</tr>
|
|
202
|
+
</thead>
|
|
203
|
+
<tbody>
|
|
204
|
+
<tr className="border-b border-white/5">
|
|
205
|
+
<td className="px-6 py-4 font-mono text-sm !text-blue-300">
|
|
206
|
+
width
|
|
207
|
+
</td>
|
|
208
|
+
<td className="px-6 py-4 text-sm !text-white/70">
|
|
209
|
+
number | string
|
|
210
|
+
</td>
|
|
211
|
+
<td className="px-6 py-4 text-sm !text-white/50">24</td>
|
|
212
|
+
<td className="px-6 py-4 text-sm !text-white/70">
|
|
213
|
+
Width of the icon in pixels
|
|
214
|
+
</td>
|
|
215
|
+
</tr>
|
|
216
|
+
<tr className="border-b border-white/5 !bg-black/10">
|
|
217
|
+
<td className="px-6 py-4 font-mono text-sm !text-blue-300">
|
|
218
|
+
height
|
|
219
|
+
</td>
|
|
220
|
+
<td className="px-6 py-4 text-sm !text-white/70">
|
|
221
|
+
number | string
|
|
222
|
+
</td>
|
|
223
|
+
<td className="px-6 py-4 text-sm !text-white/50">24</td>
|
|
224
|
+
<td className="px-6 py-4 text-sm !text-white/70">
|
|
225
|
+
Height of the icon in pixels
|
|
226
|
+
</td>
|
|
227
|
+
</tr>
|
|
228
|
+
<tr className="border-b border-white/5">
|
|
229
|
+
<td className="px-6 py-4 font-mono text-sm !text-blue-300">
|
|
230
|
+
fill
|
|
231
|
+
</td>
|
|
232
|
+
<td className="px-6 py-4 text-sm !text-white/70">
|
|
233
|
+
string
|
|
234
|
+
</td>
|
|
235
|
+
<td className="px-6 py-4 text-sm !text-white/50">
|
|
236
|
+
currentColor
|
|
237
|
+
</td>
|
|
238
|
+
<td className="px-6 py-4 text-sm !text-white/70">
|
|
239
|
+
Fill color of the icon
|
|
240
|
+
</td>
|
|
241
|
+
</tr>
|
|
242
|
+
<tr className="border-b border-white/5 !bg-black/10">
|
|
243
|
+
<td className="px-6 py-4 font-mono text-sm !text-blue-300">
|
|
244
|
+
className
|
|
245
|
+
</td>
|
|
246
|
+
<td className="px-6 py-4 text-sm !text-white/70">
|
|
247
|
+
string
|
|
248
|
+
</td>
|
|
249
|
+
<td className="px-6 py-4 text-sm !text-white/50">
|
|
250
|
+
undefined
|
|
251
|
+
</td>
|
|
252
|
+
<td className="px-6 py-4 text-sm !text-white/70">
|
|
253
|
+
CSS classes for styling
|
|
254
|
+
</td>
|
|
255
|
+
</tr>
|
|
256
|
+
<tr className="border-b border-white/5">
|
|
257
|
+
<td className="px-6 py-4 font-mono text-sm !text-blue-300">
|
|
258
|
+
stroke
|
|
259
|
+
</td>
|
|
260
|
+
<td className="px-6 py-4 text-sm !text-white/70">
|
|
261
|
+
string
|
|
262
|
+
</td>
|
|
263
|
+
<td className="px-6 py-4 text-sm !text-white/50">
|
|
264
|
+
currentColor
|
|
265
|
+
</td>
|
|
266
|
+
<td className="px-6 py-4 text-sm !text-white/70">
|
|
267
|
+
Stroke color of the icon
|
|
268
|
+
</td>
|
|
269
|
+
</tr>
|
|
270
|
+
<tr className="!bg-black/10">
|
|
271
|
+
<td className="px-6 py-4 font-mono text-sm !text-blue-300">
|
|
272
|
+
strokeWidth
|
|
273
|
+
</td>
|
|
274
|
+
<td className="px-6 py-4 text-sm !text-white/70">
|
|
275
|
+
number | string
|
|
276
|
+
</td>
|
|
277
|
+
<td className="px-6 py-4 text-sm !text-white/50">1</td>
|
|
278
|
+
<td className="px-6 py-4 text-sm !text-white/70">
|
|
279
|
+
Width of the stroke
|
|
280
|
+
</td>
|
|
281
|
+
</tr>
|
|
282
|
+
</tbody>
|
|
283
|
+
</table>
|
|
284
|
+
</div>
|
|
285
|
+
</div>
|
|
286
|
+
|
|
287
|
+
{/* Size Variations */}
|
|
288
|
+
<div className="!space-y-8">
|
|
289
|
+
<h2 className="text-center text-3xl font-bold !text-white">
|
|
290
|
+
Size Variations
|
|
291
|
+
</h2>
|
|
292
|
+
<div className="rounded-lg border border-white/10 bg-white/5 p-8">
|
|
293
|
+
<div className="!space-y-6">
|
|
294
|
+
<div className="grid grid-cols-1 gap-8 md:grid-cols-2">
|
|
295
|
+
<div className="!space-y-4">
|
|
296
|
+
<h3 className="text-lg font-semibold !text-blue-300">
|
|
297
|
+
Common Sizes
|
|
298
|
+
</h3>
|
|
299
|
+
<div className="flex items-center gap-6">
|
|
300
|
+
<div className="text-center">
|
|
301
|
+
<SunIcon className="!mx-auto mb-2 h-4 w-4 text-blue-400" />
|
|
302
|
+
<span className="text-xs text-white/60">16px</span>
|
|
303
|
+
</div>
|
|
304
|
+
<div className="text-center">
|
|
305
|
+
<SunIcon className="!mx-auto mb-2 h-5 w-5 text-blue-400" />
|
|
306
|
+
<span className="text-xs text-white/60">20px</span>
|
|
307
|
+
</div>
|
|
308
|
+
<div className="text-center">
|
|
309
|
+
<SunIcon className="!mx-auto mb-2 h-6 w-6 text-blue-400" />
|
|
310
|
+
<span className="text-xs text-white/60">24px</span>
|
|
311
|
+
</div>
|
|
312
|
+
<div className="text-center">
|
|
313
|
+
<SunIcon className="!mx-auto mb-2 h-8 w-8 text-blue-400" />
|
|
314
|
+
<span className="text-xs text-white/60">32px</span>
|
|
315
|
+
</div>
|
|
316
|
+
</div>
|
|
317
|
+
</div>
|
|
318
|
+
|
|
319
|
+
<div className="!space-y-4">
|
|
320
|
+
<h3 className="text-lg font-semibold !text-blue-300">
|
|
321
|
+
Large Displays
|
|
322
|
+
</h3>
|
|
323
|
+
<div className="flex items-center gap-6">
|
|
324
|
+
<div className="text-center">
|
|
325
|
+
<SunIcon className="!mx-auto mb-2 h-12 w-12 text-blue-400" />
|
|
326
|
+
<span className="text-xs text-white/60">48px</span>
|
|
327
|
+
</div>
|
|
328
|
+
<div className="text-center">
|
|
329
|
+
<SunIcon className="!mx-auto mb-2 h-16 w-16 text-blue-400" />
|
|
330
|
+
<span className="text-xs text-white/60">64px</span>
|
|
331
|
+
</div>
|
|
332
|
+
</div>
|
|
333
|
+
</div>
|
|
334
|
+
</div>
|
|
335
|
+
</div>
|
|
336
|
+
</div>
|
|
337
|
+
</div>
|
|
338
|
+
|
|
339
|
+
{/* Color Variations */}
|
|
340
|
+
<div className="!space-y-8">
|
|
341
|
+
<h2 className="text-center text-3xl font-bold !text-white">
|
|
342
|
+
Color Variations
|
|
343
|
+
</h2>
|
|
344
|
+
<div className="grid grid-cols-1 gap-8 lg:grid-cols-2">
|
|
345
|
+
<div className="!space-y-4">
|
|
346
|
+
<h3 className="text-lg font-semibold !text-blue-300">
|
|
347
|
+
Semantic Colors
|
|
348
|
+
</h3>
|
|
349
|
+
<div className="!space-y-4 rounded-lg border border-white/10 bg-white/5 p-6">
|
|
350
|
+
<div className="flex items-center gap-4">
|
|
351
|
+
<SunIcon className="h-6 w-6 text-blue-400" />
|
|
352
|
+
<span className="text-blue-300">
|
|
353
|
+
Primary suggestion
|
|
354
|
+
</span>
|
|
355
|
+
</div>
|
|
356
|
+
<div className="flex items-center gap-4">
|
|
357
|
+
<SunIcon className="h-6 w-6 text-purple-400" />
|
|
358
|
+
<span className="text-purple-300">Hint</span>
|
|
359
|
+
</div>
|
|
360
|
+
<div className="flex items-center gap-4">
|
|
361
|
+
<SunIcon className="h-6 w-6 text-indigo-400" />
|
|
362
|
+
<span className="text-indigo-300">Recommendation</span>
|
|
363
|
+
</div>
|
|
364
|
+
<div className="flex items-center gap-4">
|
|
365
|
+
<SunIcon className="h-6 w-6 text-cyan-400" />
|
|
366
|
+
<span className="text-cyan-300">Tip</span>
|
|
367
|
+
</div>
|
|
368
|
+
</div>
|
|
369
|
+
</div>
|
|
370
|
+
|
|
371
|
+
<div className="!space-y-4">
|
|
372
|
+
<h3 className="text-lg font-semibold !text-blue-300">
|
|
373
|
+
Custom Colors
|
|
374
|
+
</h3>
|
|
375
|
+
<div className="rounded-lg bg-black/40 p-4">
|
|
376
|
+
<pre className="overflow-x-auto text-sm !text-green-300">
|
|
377
|
+
{`// Using Tailwind classes
|
|
378
|
+
<SunIcon className="h-6 w-6 text-blue-500" />
|
|
379
|
+
<SunIcon className="h-6 w-6 text-purple-500" />
|
|
380
|
+
<SunIcon className="h-6 w-6 text-indigo-500" />
|
|
381
|
+
|
|
382
|
+
// Using custom colors
|
|
383
|
+
<SunIcon
|
|
384
|
+
className="h-6 w-6"
|
|
385
|
+
style={{ color: '#3B82F6' }}
|
|
386
|
+
/>`}
|
|
387
|
+
</pre>
|
|
388
|
+
</div>
|
|
389
|
+
</div>
|
|
390
|
+
</div>
|
|
391
|
+
</div>
|
|
392
|
+
|
|
393
|
+
{/* Usage Examples */}
|
|
394
|
+
<div className="!space-y-8">
|
|
395
|
+
<h2 className="text-center text-3xl font-bold !text-white">
|
|
396
|
+
Usage Examples
|
|
397
|
+
</h2>
|
|
398
|
+
|
|
399
|
+
<div className="grid grid-cols-1 gap-8 lg:grid-cols-2">
|
|
400
|
+
{/* Suggestion Card */}
|
|
401
|
+
<div className="!space-y-4">
|
|
402
|
+
<h3 className="text-lg font-semibold !text-blue-300">
|
|
403
|
+
Suggestion Card
|
|
404
|
+
</h3>
|
|
405
|
+
<div className="!space-y-4">
|
|
406
|
+
<div className="rounded-lg border border-blue-500/20 bg-blue-500/10 p-4">
|
|
407
|
+
<div className="flex items-start gap-3">
|
|
408
|
+
<SunIcon className="mt-0.5 h-5 w-5 flex-shrink-0 text-blue-400" />
|
|
409
|
+
<div>
|
|
410
|
+
<h4 className="font-medium !text-blue-200">
|
|
411
|
+
Pro Tip
|
|
412
|
+
</h4>
|
|
413
|
+
<p className="text-sm !text-blue-300/80">
|
|
414
|
+
Use keyboard shortcuts to speed up your workflow.
|
|
415
|
+
</p>
|
|
416
|
+
</div>
|
|
417
|
+
</div>
|
|
418
|
+
</div>
|
|
419
|
+
<div className="rounded-lg bg-black/40 p-4">
|
|
420
|
+
<pre className="overflow-x-auto text-sm !text-green-300">
|
|
421
|
+
{`<div className="border border-blue-500/20 bg-blue-500/10 p-4">
|
|
422
|
+
<div className="flex items-start gap-3">
|
|
423
|
+
<SunIcon className="h-5 w-5 text-blue-400" />
|
|
424
|
+
<div>
|
|
425
|
+
<h4>Pro Tip</h4>
|
|
426
|
+
<p>Use keyboard shortcuts...</p>
|
|
427
|
+
</div>
|
|
428
|
+
</div>
|
|
429
|
+
</div>`}
|
|
430
|
+
</pre>
|
|
431
|
+
</div>
|
|
432
|
+
</div>
|
|
433
|
+
</div>
|
|
434
|
+
|
|
435
|
+
{/* Help Text */}
|
|
436
|
+
<div className="!space-y-4">
|
|
437
|
+
<h3 className="text-lg font-semibold !text-blue-300">
|
|
438
|
+
Help Text
|
|
439
|
+
</h3>
|
|
440
|
+
<div className="!space-y-4">
|
|
441
|
+
<div className="!space-y-2">
|
|
442
|
+
<label className="block text-sm font-medium text-white">
|
|
443
|
+
Username
|
|
444
|
+
</label>
|
|
445
|
+
<input
|
|
446
|
+
type="text"
|
|
447
|
+
className="w-full rounded-lg border border-white/20 bg-white/5 px-3 py-2 text-white placeholder-white/50"
|
|
448
|
+
placeholder="Enter username"
|
|
449
|
+
/>
|
|
450
|
+
<div className="flex items-center gap-2 text-sm text-blue-400">
|
|
451
|
+
<SunIcon className="h-4 w-4" />
|
|
452
|
+
<span>Use at least 3 characters</span>
|
|
453
|
+
</div>
|
|
454
|
+
</div>
|
|
455
|
+
<div className="rounded-lg bg-black/40 p-4">
|
|
456
|
+
<pre className="overflow-x-auto text-sm !text-green-300">
|
|
457
|
+
{`<div className="flex items-center gap-2 text-blue-400">
|
|
458
|
+
<SunIcon className="h-4 w-4" />
|
|
459
|
+
<span>Use at least 3 characters</span>
|
|
460
|
+
</div>`}
|
|
461
|
+
</pre>
|
|
462
|
+
</div>
|
|
463
|
+
</div>
|
|
464
|
+
</div>
|
|
465
|
+
|
|
466
|
+
{/* Button Integration */}
|
|
467
|
+
<div className="!space-y-4">
|
|
468
|
+
<h3 className="text-lg font-semibold !text-blue-300">
|
|
469
|
+
Button Integration
|
|
470
|
+
</h3>
|
|
471
|
+
<div className="!space-y-4">
|
|
472
|
+
<div className="flex gap-4">
|
|
473
|
+
<button className="flex items-center gap-2 rounded-lg border border-blue-500/30 bg-blue-500/20 px-4 py-2 text-blue-200 transition-colors hover:bg-blue-500/30">
|
|
474
|
+
<SunIcon className="h-4 w-4" />
|
|
475
|
+
Show Hints
|
|
476
|
+
</button>
|
|
477
|
+
<button className="flex items-center gap-2 rounded-lg border border-purple-500/30 bg-purple-500/20 px-4 py-2 text-purple-200 transition-colors hover:bg-purple-500/30">
|
|
478
|
+
<SunIcon className="h-4 w-4" />
|
|
479
|
+
Get Suggestions
|
|
480
|
+
</button>
|
|
481
|
+
</div>
|
|
482
|
+
<div className="rounded-lg bg-black/40 p-4">
|
|
483
|
+
<pre className="overflow-x-auto text-sm !text-green-300">
|
|
484
|
+
{`<button className="flex items-center gap-2">
|
|
485
|
+
<SunIcon className="h-4 w-4" />
|
|
486
|
+
Show Hints
|
|
487
|
+
</button>`}
|
|
488
|
+
</pre>
|
|
489
|
+
</div>
|
|
490
|
+
</div>
|
|
491
|
+
</div>
|
|
492
|
+
|
|
493
|
+
{/* Tooltip */}
|
|
494
|
+
<div className="!space-y-4">
|
|
495
|
+
<h3 className="text-lg font-semibold !text-blue-300">
|
|
496
|
+
Interactive Tooltip
|
|
497
|
+
</h3>
|
|
498
|
+
<div className="!space-y-4">
|
|
499
|
+
<div className="flex items-center gap-2">
|
|
500
|
+
<span className="text-white">Need help?</span>
|
|
501
|
+
<div className="group relative">
|
|
502
|
+
<SunIcon className="h-4 w-4 cursor-help text-blue-400" />
|
|
503
|
+
<div className="invisible absolute bottom-full left-1/2 mb-2 -translate-x-1/2 transform rounded bg-black px-2 py-1 text-xs text-white opacity-0 transition-all group-hover:visible group-hover:opacity-100">
|
|
504
|
+
Click for suggestions
|
|
505
|
+
</div>
|
|
506
|
+
</div>
|
|
507
|
+
</div>
|
|
508
|
+
<div className="rounded-lg bg-black/40 p-4">
|
|
509
|
+
<pre className="overflow-x-auto text-sm !text-green-300">
|
|
510
|
+
{`<div className="group relative">
|
|
511
|
+
<SunIcon className="h-4 w-4 cursor-help text-blue-400" />
|
|
512
|
+
<div className="tooltip">Click for suggestions</div>
|
|
513
|
+
</div>`}
|
|
514
|
+
</pre>
|
|
515
|
+
</div>
|
|
516
|
+
</div>
|
|
517
|
+
</div>
|
|
518
|
+
</div>
|
|
519
|
+
</div>
|
|
520
|
+
|
|
521
|
+
{/* Accessibility */}
|
|
522
|
+
<div className="!space-y-8">
|
|
523
|
+
<h2 className="text-center text-3xl font-bold !text-white">
|
|
524
|
+
Accessibility Features
|
|
525
|
+
</h2>
|
|
526
|
+
<div className="grid grid-cols-1 gap-8 md:grid-cols-2">
|
|
527
|
+
<div className="!space-y-4 rounded-lg border border-white/10 bg-white/5 p-6">
|
|
528
|
+
<h3 className="text-lg font-semibold !text-green-300">
|
|
529
|
+
✅ Built-in Features
|
|
530
|
+
</h3>
|
|
531
|
+
<ul className="!space-y-2 text-sm !text-white/70">
|
|
532
|
+
<li className="!text-white/70">
|
|
533
|
+
Uses Radix UI AccessibleIcon wrapper
|
|
534
|
+
</li>
|
|
535
|
+
<li className="!text-white/70">
|
|
536
|
+
Provides screen reader label "Suggestion icon"
|
|
537
|
+
</li>
|
|
538
|
+
<li className="!text-white/70">
|
|
539
|
+
Supports keyboard navigation when interactive
|
|
540
|
+
</li>
|
|
541
|
+
<li className="!text-white/70">
|
|
542
|
+
Maintains proper color contrast ratios
|
|
543
|
+
</li>
|
|
544
|
+
<li className="!text-white/70">
|
|
545
|
+
Scales with user's font size preferences
|
|
546
|
+
</li>
|
|
547
|
+
</ul>
|
|
548
|
+
</div>
|
|
549
|
+
|
|
550
|
+
<div className="!space-y-4 rounded-lg border border-white/10 bg-white/5 p-6">
|
|
551
|
+
<h3 className="text-lg font-semibold !text-blue-300">
|
|
552
|
+
💡 Best Practices
|
|
553
|
+
</h3>
|
|
554
|
+
<ul className="!space-y-2 text-sm text-white/70">
|
|
555
|
+
<li className="!text-white/70">
|
|
556
|
+
Always pair with descriptive text
|
|
557
|
+
</li>
|
|
558
|
+
<li className="!text-white/70">
|
|
559
|
+
Use consistent colors for suggestion types
|
|
560
|
+
</li>
|
|
561
|
+
<li className="!text-white/70">
|
|
562
|
+
Ensure sufficient color contrast
|
|
563
|
+
</li>
|
|
564
|
+
<li className="!text-white/70">
|
|
565
|
+
Add focus states for interactive elements
|
|
566
|
+
</li>
|
|
567
|
+
<li className="!text-white/70">
|
|
568
|
+
Provide alternative text for screen readers
|
|
569
|
+
</li>
|
|
570
|
+
</ul>
|
|
571
|
+
</div>
|
|
572
|
+
</div>
|
|
573
|
+
|
|
574
|
+
<div className="rounded-lg border border-white/10 bg-white/5 p-6">
|
|
575
|
+
<h3 className="mb-4 text-lg font-semibold !text-purple-300">
|
|
576
|
+
Custom Accessibility Label
|
|
577
|
+
</h3>
|
|
578
|
+
<div className="grid grid-cols-1 gap-6 lg:grid-cols-2">
|
|
579
|
+
<div className="rounded-lg bg-black/40 p-4">
|
|
580
|
+
<pre className="overflow-x-auto text-sm !text-blue-300">
|
|
581
|
+
{`import { AccessibleIcon } from "@radix-ui/react-accessible-icon"
|
|
582
|
+
import { SunIcon } from "@icons/suggestion-icon"
|
|
583
|
+
|
|
584
|
+
<AccessibleIcon label="Helpful tip available">
|
|
585
|
+
<SunIcon className="h-4 w-4 text-blue-500" />
|
|
586
|
+
</AccessibleIcon>`}
|
|
587
|
+
</pre>
|
|
588
|
+
</div>
|
|
589
|
+
<div className="!space-y-4">
|
|
590
|
+
<p className="text-sm !text-white/70">
|
|
591
|
+
For specific contexts, you can wrap the SunIcon with a
|
|
592
|
+
custom AccessibleIcon component that provides more
|
|
593
|
+
descriptive labels.
|
|
594
|
+
</p>
|
|
595
|
+
<div className="rounded-lg border border-blue-500/20 bg-blue-500/10 p-4">
|
|
596
|
+
<div className="flex items-center gap-2 text-blue-200">
|
|
597
|
+
<SunIcon className="h-4 w-4" />
|
|
598
|
+
<span>Helpful tip available</span>
|
|
599
|
+
</div>
|
|
600
|
+
</div>
|
|
601
|
+
</div>
|
|
602
|
+
</div>
|
|
603
|
+
</div>
|
|
604
|
+
</div>
|
|
605
|
+
|
|
606
|
+
{/* Related Icons */}
|
|
607
|
+
<div className="!space-y-8">
|
|
608
|
+
<h2 className="text-center text-3xl font-bold !text-white">
|
|
609
|
+
Related Icons
|
|
610
|
+
</h2>
|
|
611
|
+
<div className="grid grid-cols-2 gap-6 md:grid-cols-4">
|
|
612
|
+
<div className="!space-y-3 rounded-lg border border-white/10 bg-white/5 p-4 text-center">
|
|
613
|
+
<div className="!mx-auto flex h-12 w-12 items-center justify-center rounded-lg bg-blue-500/20">
|
|
614
|
+
<span className="text-2xl">ℹ️</span>
|
|
615
|
+
</div>
|
|
616
|
+
<div>
|
|
617
|
+
<div className="font-medium text-white">InfoIcon</div>
|
|
618
|
+
<div className="text-xs text-white/60">
|
|
619
|
+
Information states
|
|
620
|
+
</div>
|
|
621
|
+
</div>
|
|
622
|
+
</div>
|
|
623
|
+
<div className="!space-y-3 rounded-lg border border-white/10 bg-white/5 p-4 text-center">
|
|
624
|
+
<div className="!mx-auto flex h-12 w-12 items-center justify-center rounded-lg bg-yellow-500/20">
|
|
625
|
+
<span className="text-2xl">💡</span>
|
|
626
|
+
</div>
|
|
627
|
+
<div>
|
|
628
|
+
<div className="font-medium text-white">
|
|
629
|
+
LightbulbIcon
|
|
630
|
+
</div>
|
|
631
|
+
<div className="text-xs text-white/60">Ideas & tips</div>
|
|
632
|
+
</div>
|
|
633
|
+
</div>
|
|
634
|
+
<div className="!space-y-3 rounded-lg border border-white/10 bg-white/5 p-4 text-center">
|
|
635
|
+
<div className="!mx-auto flex h-12 w-12 items-center justify-center rounded-lg bg-purple-500/20">
|
|
636
|
+
<span className="text-2xl">❓</span>
|
|
637
|
+
</div>
|
|
638
|
+
<div>
|
|
639
|
+
<div className="font-medium text-white">HelpIcon</div>
|
|
640
|
+
<div className="text-xs text-white/60">
|
|
641
|
+
Help & guidance
|
|
642
|
+
</div>
|
|
643
|
+
</div>
|
|
644
|
+
</div>
|
|
645
|
+
<div className="!space-y-3 rounded-lg border border-white/10 bg-white/5 p-4 text-center">
|
|
646
|
+
<div className="!mx-auto flex h-12 w-12 items-center justify-center rounded-lg bg-green-500/20">
|
|
647
|
+
<span className="text-2xl">✨</span>
|
|
648
|
+
</div>
|
|
649
|
+
<div>
|
|
650
|
+
<div className="font-medium text-white">SparkleIcon</div>
|
|
651
|
+
<div className="text-xs text-white/60">Enhancement</div>
|
|
652
|
+
</div>
|
|
653
|
+
</div>
|
|
654
|
+
</div>
|
|
655
|
+
</div>
|
|
656
|
+
</div>
|
|
657
|
+
|
|
658
|
+
{/* Footer */}
|
|
659
|
+
<div className="border-t border-white/10 bg-black/20 backdrop-blur-xl">
|
|
660
|
+
<div className="!mx-auto max-w-7xl px-6 py-8">
|
|
661
|
+
<div className="!space-y-4 text-center">
|
|
662
|
+
<p className="!text-white/60">
|
|
663
|
+
SunIcon is part of the Aural UI icon library, built with
|
|
664
|
+
accessibility and consistency in mind.
|
|
665
|
+
</p>
|
|
666
|
+
<p className="text-sm !text-white/40">
|
|
667
|
+
All icons use Radix UI's AccessibleIcon for screen reader
|
|
668
|
+
compatibility and follow WCAG guidelines.
|
|
669
|
+
</p>
|
|
670
|
+
</div>
|
|
671
|
+
</div>
|
|
672
|
+
</div>
|
|
673
|
+
</div>
|
|
674
|
+
</>
|
|
675
|
+
),
|
|
676
|
+
},
|
|
677
|
+
},
|
|
678
|
+
tags: ["autodocs"],
|
|
679
|
+
argTypes: {
|
|
680
|
+
width: {
|
|
681
|
+
control: { type: "range", min: 8, max: 96, step: 2 },
|
|
682
|
+
description: "Width of the icon in pixels",
|
|
683
|
+
},
|
|
684
|
+
height: {
|
|
685
|
+
control: { type: "range", min: 8, max: 96, step: 2 },
|
|
686
|
+
description: "Height of the icon in pixels",
|
|
687
|
+
},
|
|
688
|
+
fill: {
|
|
689
|
+
control: "color",
|
|
690
|
+
description: "Fill color of the icon",
|
|
691
|
+
},
|
|
692
|
+
className: {
|
|
693
|
+
control: "text",
|
|
694
|
+
description: "CSS classes for styling",
|
|
695
|
+
},
|
|
696
|
+
stroke: {
|
|
697
|
+
control: "color",
|
|
698
|
+
description: "Stroke color of the icon",
|
|
699
|
+
},
|
|
700
|
+
strokeWidth: {
|
|
701
|
+
control: { type: "range", min: 0.5, max: 3, step: 0.1 },
|
|
702
|
+
description: "Width of the stroke",
|
|
703
|
+
},
|
|
704
|
+
},
|
|
705
|
+
}
|
|
706
|
+
|
|
707
|
+
export default meta
|
|
708
|
+
type Story = StoryObj<typeof SunIcon>
|
|
709
|
+
|
|
710
|
+
// Story parameters for consistent dark theme
|
|
711
|
+
const storyParameters = {
|
|
712
|
+
backgrounds: {
|
|
713
|
+
default: "dark",
|
|
714
|
+
values: [
|
|
715
|
+
{ name: "dark", value: "#0a0a0a" },
|
|
716
|
+
{ name: "darker", value: "#000000" },
|
|
717
|
+
],
|
|
718
|
+
},
|
|
719
|
+
}
|
|
720
|
+
|
|
721
|
+
export const Default: Story = {
|
|
722
|
+
args: {
|
|
723
|
+
width: 24,
|
|
724
|
+
height: 24,
|
|
725
|
+
className: "text-blue-400",
|
|
726
|
+
},
|
|
727
|
+
parameters: storyParameters,
|
|
728
|
+
render: (args) => (
|
|
729
|
+
<div className="flex h-32 min-h-dvh items-center justify-center rounded-lg bg-gradient-to-br from-gray-900 to-gray-800">
|
|
730
|
+
<SunIcon {...args} />
|
|
731
|
+
</div>
|
|
732
|
+
),
|
|
733
|
+
}
|
|
734
|
+
|
|
735
|
+
export const SizeVariations: Story = {
|
|
736
|
+
parameters: {
|
|
737
|
+
...storyParameters,
|
|
738
|
+
docs: {
|
|
739
|
+
description: {
|
|
740
|
+
story:
|
|
741
|
+
"SunIcon in different sizes, from small UI elements to large displays.",
|
|
742
|
+
},
|
|
743
|
+
},
|
|
744
|
+
},
|
|
745
|
+
render: () => (
|
|
746
|
+
<div className="flex h-64 min-h-dvh items-center justify-center gap-8 rounded-lg bg-gradient-to-br from-gray-900 to-gray-800 p-8">
|
|
747
|
+
<div className="text-center">
|
|
748
|
+
<SunIcon className="!mx-auto mb-2 h-3 w-3 text-blue-400" />
|
|
749
|
+
<span className="text-xs text-white/60">12px</span>
|
|
750
|
+
</div>
|
|
751
|
+
<div className="text-center">
|
|
752
|
+
<SunIcon className="!mx-auto mb-2 h-4 w-4 text-blue-400" />
|
|
753
|
+
<span className="text-xs text-white/60">16px</span>
|
|
754
|
+
</div>
|
|
755
|
+
<div className="text-center">
|
|
756
|
+
<SunIcon className="!mx-auto mb-2 h-5 w-5 text-blue-400" />
|
|
757
|
+
<span className="text-xs text-white/60">20px</span>
|
|
758
|
+
</div>
|
|
759
|
+
<div className="text-center">
|
|
760
|
+
<SunIcon className="!mx-auto mb-2 h-6 w-6 text-blue-400" />
|
|
761
|
+
<span className="text-xs text-white/60">24px</span>
|
|
762
|
+
</div>
|
|
763
|
+
<div className="text-center">
|
|
764
|
+
<SunIcon className="!mx-auto mb-2 h-8 w-8 text-blue-400" />
|
|
765
|
+
<span className="text-xs text-white/60">32px</span>
|
|
766
|
+
</div>
|
|
767
|
+
<div className="text-center">
|
|
768
|
+
<SunIcon className="!mx-auto mb-2 h-12 w-12 text-blue-400" />
|
|
769
|
+
<span className="text-xs text-white/60">48px</span>
|
|
770
|
+
</div>
|
|
771
|
+
</div>
|
|
772
|
+
),
|
|
773
|
+
}
|
|
774
|
+
|
|
775
|
+
export const ColorVariations: Story = {
|
|
776
|
+
parameters: {
|
|
777
|
+
...storyParameters,
|
|
778
|
+
docs: {
|
|
779
|
+
description: {
|
|
780
|
+
story:
|
|
781
|
+
"SunIcon in different semantic colors for various suggestion types.",
|
|
782
|
+
},
|
|
783
|
+
},
|
|
784
|
+
},
|
|
785
|
+
render: () => (
|
|
786
|
+
<div className="grid min-h-dvh grid-cols-2 items-center justify-center gap-6 rounded-lg bg-gradient-to-br from-gray-900 to-gray-800 p-8 md:grid-cols-4">
|
|
787
|
+
<div className="text-center">
|
|
788
|
+
<div className="!mx-auto mb-3 flex h-16 w-16 items-center justify-center rounded-lg border border-blue-500/30 bg-blue-500/20">
|
|
789
|
+
<SunIcon className="h-8 w-8 text-blue-400" />
|
|
790
|
+
</div>
|
|
791
|
+
<div className="text-sm font-medium text-white">Primary</div>
|
|
792
|
+
<div className="text-xs text-blue-400">text-blue-400</div>
|
|
793
|
+
</div>
|
|
794
|
+
<div className="text-center">
|
|
795
|
+
<div className="!mx-auto mb-3 flex h-16 w-16 items-center justify-center rounded-lg border border-purple-500/30 bg-purple-500/20">
|
|
796
|
+
<SunIcon className="h-8 w-8 text-purple-400" />
|
|
797
|
+
</div>
|
|
798
|
+
<div className="text-sm font-medium text-white">Hint</div>
|
|
799
|
+
<div className="text-xs text-purple-400">text-purple-400</div>
|
|
800
|
+
</div>
|
|
801
|
+
<div className="text-center">
|
|
802
|
+
<div className="!mx-auto mb-3 flex h-16 w-16 items-center justify-center rounded-lg border border-indigo-500/30 bg-indigo-500/20">
|
|
803
|
+
<SunIcon className="h-8 w-8 text-indigo-400" />
|
|
804
|
+
</div>
|
|
805
|
+
<div className="text-sm font-medium text-white">Recommendation</div>
|
|
806
|
+
<div className="text-xs text-indigo-400">text-indigo-400</div>
|
|
807
|
+
</div>
|
|
808
|
+
<div className="text-center">
|
|
809
|
+
<div className="!mx-auto mb-3 flex h-16 w-16 items-center justify-center rounded-lg border border-cyan-500/30 bg-cyan-500/20">
|
|
810
|
+
<SunIcon className="h-8 w-8 text-cyan-400" />
|
|
811
|
+
</div>
|
|
812
|
+
<div className="text-sm font-medium text-white">Tip</div>
|
|
813
|
+
<div className="text-xs text-cyan-400">text-cyan-400</div>
|
|
814
|
+
</div>
|
|
815
|
+
</div>
|
|
816
|
+
),
|
|
817
|
+
}
|
|
818
|
+
|
|
819
|
+
export const UsageExamples: Story = {
|
|
820
|
+
parameters: {
|
|
821
|
+
...storyParameters,
|
|
822
|
+
docs: {
|
|
823
|
+
description: {
|
|
824
|
+
story:
|
|
825
|
+
"Practical examples showing SunIcon used for theme toggles, weather widgets, and status indicators.",
|
|
826
|
+
},
|
|
827
|
+
},
|
|
828
|
+
},
|
|
829
|
+
render: () => (
|
|
830
|
+
<div className="min-h-dvh !space-y-8 rounded-lg bg-gradient-to-br from-gray-900 to-gray-800 p-8 text-white">
|
|
831
|
+
<div className="!space-y-2">
|
|
832
|
+
<h3 className="text-sm font-medium">Theme Toggle Button</h3>
|
|
833
|
+
<button className="flex items-center gap-2 rounded-lg border border-yellow-400/30 bg-yellow-400/20 px-4 py-2 text-yellow-300 transition-colors hover:bg-yellow-400/30">
|
|
834
|
+
<SunIcon className="h-5 w-5" />
|
|
835
|
+
Light Mode
|
|
836
|
+
</button>
|
|
837
|
+
</div>
|
|
838
|
+
|
|
839
|
+
<div className="!space-y-2">
|
|
840
|
+
<h3 className="text-sm font-medium">Weather Widget</h3>
|
|
841
|
+
<div className="flex items-center gap-3 rounded-lg border border-yellow-400/20 bg-yellow-400/10 p-4">
|
|
842
|
+
<SunIcon className="h-6 w-6 text-yellow-300" />
|
|
843
|
+
<div>
|
|
844
|
+
<p className="font-medium">Sunny</p>
|
|
845
|
+
<span className="text-sm text-yellow-200/80">27°C / 81°F</span>
|
|
846
|
+
</div>
|
|
847
|
+
</div>
|
|
848
|
+
</div>
|
|
849
|
+
|
|
850
|
+
<div className="!space-y-2">
|
|
851
|
+
<h3 className="text-sm font-medium">System Status</h3>
|
|
852
|
+
<div className="flex items-center gap-2 rounded-lg border border-green-400/20 bg-green-400/10 px-4 py-2">
|
|
853
|
+
<SunIcon className="h-4 w-4 text-green-300" />
|
|
854
|
+
<span className="text-green-200">
|
|
855
|
+
System running at optimal performance
|
|
856
|
+
</span>
|
|
857
|
+
</div>
|
|
858
|
+
</div>
|
|
859
|
+
</div>
|
|
860
|
+
),
|
|
861
|
+
}
|
|
862
|
+
|
|
863
|
+
export const Playground: Story = {
|
|
864
|
+
parameters: {
|
|
865
|
+
...storyParameters,
|
|
866
|
+
docs: {
|
|
867
|
+
description: {
|
|
868
|
+
story:
|
|
869
|
+
"Interactive playground to experiment with different SunIcon configurations.",
|
|
870
|
+
},
|
|
871
|
+
},
|
|
872
|
+
},
|
|
873
|
+
args: {
|
|
874
|
+
width: 32,
|
|
875
|
+
height: 32,
|
|
876
|
+
className: "text-blue-400",
|
|
877
|
+
strokeWidth: 1,
|
|
878
|
+
},
|
|
879
|
+
render: (args) => (
|
|
880
|
+
<div className="flex h-64 min-h-dvh items-center justify-center rounded-lg bg-gradient-to-br from-gray-900 to-gray-800">
|
|
881
|
+
<div className="rounded-lg border border-white/10 bg-white/5 p-8">
|
|
882
|
+
<SunIcon {...args} />
|
|
883
|
+
</div>
|
|
884
|
+
</div>
|
|
885
|
+
),
|
|
886
|
+
}
|