aural-ui 2.0.1 → 2.0.2
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/dropdown/index.tsx +2 -7
- package/dist/components/sheet/index.tsx +5 -2
- package/dist/icons/all-icons.tsx +155 -79
- package/dist/icons/capital-a-letter-icon/CapitalALetterIcon.stories.tsx +992 -0
- package/dist/icons/capital-a-letter-icon/index.tsx +32 -0
- package/dist/icons/capital-a-letter-icon/meta.ts +8 -0
- package/dist/icons/head-icon/HeadIcon.stories.tsx +981 -0
- package/dist/icons/head-icon/index.tsx +26 -0
- package/dist/icons/head-icon/meta.ts +8 -0
- package/dist/icons/index.ts +40 -25
- package/dist/icons/musical-note-icon/MusicalNoteIcon.stories.tsx +1032 -0
- package/dist/icons/musical-note-icon/index.tsx +25 -0
- package/dist/icons/musical-note-icon/meta.ts +8 -0
- package/dist/icons/setting-icon/SettingIcon.stories.tsx +1024 -0
- package/dist/icons/setting-icon/index.tsx +30 -0
- package/dist/icons/setting-icon/meta.ts +8 -0
- package/dist/index.js +1 -1
- package/package.json +1 -1
|
@@ -0,0 +1,992 @@
|
|
|
1
|
+
import React from "react"
|
|
2
|
+
import type { Meta, StoryObj } from "@storybook/react"
|
|
3
|
+
|
|
4
|
+
import { CapitalALetterIcon } from "."
|
|
5
|
+
|
|
6
|
+
const meta: Meta<typeof CapitalALetterIcon> = {
|
|
7
|
+
title: "Icons/CapitalALetterIcon",
|
|
8
|
+
component: CapitalALetterIcon,
|
|
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-purple-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-purple-500/10 via-transparent to-blue-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
|
+
<CapitalALetterIcon className="h-12 w-12 text-blue-400" />
|
|
91
|
+
</div>
|
|
92
|
+
<h1 className="!text-fm-primary text-5xl font-bold">
|
|
93
|
+
CapitalALetterIcon
|
|
94
|
+
</h1>
|
|
95
|
+
<p className="!mx-auto max-w-3xl text-xl leading-relaxed !text-white/70">
|
|
96
|
+
A clean, minimalist capital letter 'A' icon perfect for
|
|
97
|
+
typography-focused designs, text formatting tools, and
|
|
98
|
+
alphabetical navigation. Built with accessibility in mind.
|
|
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
|
+
Typography
|
|
106
|
+
</div>
|
|
107
|
+
<div className="text-sm text-white/60">
|
|
108
|
+
Font & text tools
|
|
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
|
+
Clean
|
|
115
|
+
</div>
|
|
116
|
+
<div className="text-sm text-white/60">
|
|
117
|
+
Minimal design
|
|
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-cyan-300">
|
|
123
|
+
Scalable
|
|
124
|
+
</div>
|
|
125
|
+
<div className="text-sm text-white/60">Vector based</div>
|
|
126
|
+
</div>
|
|
127
|
+
</div>
|
|
128
|
+
</div>
|
|
129
|
+
</div>
|
|
130
|
+
</div>
|
|
131
|
+
|
|
132
|
+
{/* Content */}
|
|
133
|
+
<div className="!mx-auto max-w-7xl !space-y-16 px-6 py-12">
|
|
134
|
+
{/* Quick Usage */}
|
|
135
|
+
<div className="!space-y-8">
|
|
136
|
+
<h2 className="text-center text-3xl font-bold !text-white">
|
|
137
|
+
Quick Start
|
|
138
|
+
</h2>
|
|
139
|
+
<div className="grid grid-cols-1 gap-8 lg:grid-cols-2">
|
|
140
|
+
<div className="!space-y-4">
|
|
141
|
+
<h3 className="text-xl font-semibold !text-blue-300">
|
|
142
|
+
Basic Usage
|
|
143
|
+
</h3>
|
|
144
|
+
<div className="rounded-lg bg-black/40 p-4">
|
|
145
|
+
<pre className="overflow-x-auto text-sm !text-green-300">
|
|
146
|
+
{`import { CapitalALetterIcon } from "@icons/capital-a-letter-icon"
|
|
147
|
+
|
|
148
|
+
function MyComponent() {
|
|
149
|
+
return (
|
|
150
|
+
<div className="flex items-center gap-2">
|
|
151
|
+
<CapitalALetterIcon className="h-5 w-5 text-blue-500" />
|
|
152
|
+
<span>Text Formatting</span>
|
|
153
|
+
</div>
|
|
154
|
+
)
|
|
155
|
+
}`}
|
|
156
|
+
</pre>
|
|
157
|
+
</div>
|
|
158
|
+
</div>
|
|
159
|
+
|
|
160
|
+
<div className="!space-y-4">
|
|
161
|
+
<h3 className="text-xl font-semibold !text-blue-300">
|
|
162
|
+
Live Preview
|
|
163
|
+
</h3>
|
|
164
|
+
<div className="flex h-32 items-center justify-center rounded-lg border border-white/10 bg-white/5">
|
|
165
|
+
<div className="flex items-center gap-3 rounded-lg border border-blue-500/20 bg-blue-500/10 px-4 py-2">
|
|
166
|
+
<CapitalALetterIcon className="h-5 w-5 text-blue-400" />
|
|
167
|
+
<span className="text-white">Text Formatting</span>
|
|
168
|
+
</div>
|
|
169
|
+
</div>
|
|
170
|
+
</div>
|
|
171
|
+
</div>
|
|
172
|
+
</div>
|
|
173
|
+
|
|
174
|
+
{/* Props Documentation */}
|
|
175
|
+
<div className="!space-y-8">
|
|
176
|
+
<h2 className="text-center text-3xl font-bold !text-white">
|
|
177
|
+
Props & Configuration
|
|
178
|
+
</h2>
|
|
179
|
+
|
|
180
|
+
<div className="overflow-hidden rounded-lg border border-white/10 bg-white/5">
|
|
181
|
+
<div className="bg-white/5 p-4">
|
|
182
|
+
<h3 className="text-xl font-semibold !text-white">Props</h3>
|
|
183
|
+
</div>
|
|
184
|
+
<table className="!my-0 w-full">
|
|
185
|
+
<thead className="bg-white/5">
|
|
186
|
+
<tr className="border-b border-white/10">
|
|
187
|
+
<th className="px-6 py-4 text-left text-sm font-semibold !text-white">
|
|
188
|
+
Prop
|
|
189
|
+
</th>
|
|
190
|
+
<th className="px-6 py-4 text-left text-sm font-semibold !text-white">
|
|
191
|
+
Type
|
|
192
|
+
</th>
|
|
193
|
+
<th className="px-6 py-4 text-left text-sm font-semibold !text-white">
|
|
194
|
+
Default
|
|
195
|
+
</th>
|
|
196
|
+
<th className="px-6 py-4 text-left text-sm font-semibold !text-white">
|
|
197
|
+
Description
|
|
198
|
+
</th>
|
|
199
|
+
</tr>
|
|
200
|
+
</thead>
|
|
201
|
+
<tbody>
|
|
202
|
+
<tr className="border-b border-white/5">
|
|
203
|
+
<td className="px-6 py-4 font-mono text-sm !text-blue-300">
|
|
204
|
+
width
|
|
205
|
+
</td>
|
|
206
|
+
<td className="px-6 py-4 text-sm !text-white/70">
|
|
207
|
+
number | string
|
|
208
|
+
</td>
|
|
209
|
+
<td className="px-6 py-4 text-sm !text-white/50">16</td>
|
|
210
|
+
<td className="px-6 py-4 text-sm !text-white/70">
|
|
211
|
+
Width of the icon in pixels
|
|
212
|
+
</td>
|
|
213
|
+
</tr>
|
|
214
|
+
<tr className="border-b border-white/5 !bg-black/10">
|
|
215
|
+
<td className="px-6 py-4 font-mono text-sm !text-blue-300">
|
|
216
|
+
height
|
|
217
|
+
</td>
|
|
218
|
+
<td className="px-6 py-4 text-sm !text-white/70">
|
|
219
|
+
number | string
|
|
220
|
+
</td>
|
|
221
|
+
<td className="px-6 py-4 text-sm !text-white/50">16</td>
|
|
222
|
+
<td className="px-6 py-4 text-sm !text-white/70">
|
|
223
|
+
Height of the icon in pixels
|
|
224
|
+
</td>
|
|
225
|
+
</tr>
|
|
226
|
+
<tr className="border-b border-white/5">
|
|
227
|
+
<td className="px-6 py-4 font-mono text-sm !text-blue-300">
|
|
228
|
+
stroke
|
|
229
|
+
</td>
|
|
230
|
+
<td className="px-6 py-4 text-sm !text-white/70">
|
|
231
|
+
string
|
|
232
|
+
</td>
|
|
233
|
+
<td className="px-6 py-4 text-sm !text-white/50">
|
|
234
|
+
currentColor
|
|
235
|
+
</td>
|
|
236
|
+
<td className="px-6 py-4 text-sm !text-white/70">
|
|
237
|
+
Stroke color of the icon
|
|
238
|
+
</td>
|
|
239
|
+
</tr>
|
|
240
|
+
<tr className="border-b border-white/5 !bg-black/10">
|
|
241
|
+
<td className="px-6 py-4 font-mono text-sm !text-blue-300">
|
|
242
|
+
strokeWidth
|
|
243
|
+
</td>
|
|
244
|
+
<td className="px-6 py-4 text-sm !text-white/70">
|
|
245
|
+
number
|
|
246
|
+
</td>
|
|
247
|
+
<td className="px-6 py-4 text-sm !text-white/50">
|
|
248
|
+
1.5
|
|
249
|
+
</td>
|
|
250
|
+
<td className="px-6 py-4 text-sm !text-white/70">
|
|
251
|
+
Thickness of the stroke
|
|
252
|
+
</td>
|
|
253
|
+
</tr>
|
|
254
|
+
<tr className="border-b border-white/5">
|
|
255
|
+
<td className="px-6 py-4 font-mono text-sm !text-blue-300">
|
|
256
|
+
className
|
|
257
|
+
</td>
|
|
258
|
+
<td className="px-6 py-4 text-sm !text-white/70">
|
|
259
|
+
string
|
|
260
|
+
</td>
|
|
261
|
+
<td className="px-6 py-4 text-sm !text-white/50">-</td>
|
|
262
|
+
<td className="px-6 py-4 text-sm !text-white/70">
|
|
263
|
+
CSS classes for styling
|
|
264
|
+
</td>
|
|
265
|
+
</tr>
|
|
266
|
+
<tr className="!bg-black/10">
|
|
267
|
+
<td className="px-6 py-4 font-mono text-sm !text-blue-300">
|
|
268
|
+
...svgProps
|
|
269
|
+
</td>
|
|
270
|
+
<td className="px-6 py-4 text-sm !text-white/70">
|
|
271
|
+
SVGProps
|
|
272
|
+
</td>
|
|
273
|
+
<td className="px-6 py-4 text-sm !text-white/50">-</td>
|
|
274
|
+
<td className="px-6 py-4 text-sm !text-white/70">
|
|
275
|
+
All standard SVG element props
|
|
276
|
+
</td>
|
|
277
|
+
</tr>
|
|
278
|
+
</tbody>
|
|
279
|
+
</table>
|
|
280
|
+
</div>
|
|
281
|
+
</div>
|
|
282
|
+
|
|
283
|
+
{/* Size Variations */}
|
|
284
|
+
<div className="!space-y-8">
|
|
285
|
+
<h2 className="text-center text-3xl font-bold !text-white">
|
|
286
|
+
Size Variations
|
|
287
|
+
</h2>
|
|
288
|
+
<div className="rounded-lg border border-white/10 bg-white/5 p-8">
|
|
289
|
+
<div className="!space-y-6">
|
|
290
|
+
<div className="grid grid-cols-1 gap-8 md:grid-cols-2">
|
|
291
|
+
<div className="!space-y-4">
|
|
292
|
+
<h3 className="text-lg font-semibold !text-blue-300">
|
|
293
|
+
Standard Sizes
|
|
294
|
+
</h3>
|
|
295
|
+
<div className="flex items-end gap-6 rounded-lg bg-black/20 p-6">
|
|
296
|
+
<div className="text-center">
|
|
297
|
+
<CapitalALetterIcon className="!mx-auto mb-2 h-3 w-3 text-blue-400" />
|
|
298
|
+
<span className="text-xs text-white/60">12px</span>
|
|
299
|
+
</div>
|
|
300
|
+
<div className="text-center">
|
|
301
|
+
<CapitalALetterIcon 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
|
+
<CapitalALetterIcon 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
|
+
<CapitalALetterIcon 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
|
+
<CapitalALetterIcon 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 className="text-center">
|
|
317
|
+
<CapitalALetterIcon className="!mx-auto mb-2 h-12 w-12 text-blue-400" />
|
|
318
|
+
<span className="text-xs text-white/60">48px</span>
|
|
319
|
+
</div>
|
|
320
|
+
</div>
|
|
321
|
+
</div>
|
|
322
|
+
|
|
323
|
+
<div className="!space-y-4">
|
|
324
|
+
<h3 className="text-lg font-semibold !text-blue-300">
|
|
325
|
+
Code Example
|
|
326
|
+
</h3>
|
|
327
|
+
<div className="rounded-lg bg-black/40 p-4">
|
|
328
|
+
<pre className="overflow-x-auto text-sm !text-cyan-300">
|
|
329
|
+
{`// Small (16px)
|
|
330
|
+
<CapitalALetterIcon className="h-4 w-4" />
|
|
331
|
+
|
|
332
|
+
// Medium (24px)
|
|
333
|
+
<CapitalALetterIcon className="h-6 w-6" />
|
|
334
|
+
|
|
335
|
+
// Large (32px)
|
|
336
|
+
<CapitalALetterIcon className="h-8 w-8" />
|
|
337
|
+
|
|
338
|
+
// Custom size
|
|
339
|
+
<CapitalALetterIcon width={40} height={40} />`}
|
|
340
|
+
</pre>
|
|
341
|
+
</div>
|
|
342
|
+
</div>
|
|
343
|
+
</div>
|
|
344
|
+
</div>
|
|
345
|
+
</div>
|
|
346
|
+
</div>
|
|
347
|
+
|
|
348
|
+
{/* Color Variations */}
|
|
349
|
+
<div className="!space-y-8">
|
|
350
|
+
<h2 className="text-center text-3xl font-bold !text-white">
|
|
351
|
+
Color Variations
|
|
352
|
+
</h2>
|
|
353
|
+
<div className="grid grid-cols-1 gap-8 lg:grid-cols-2">
|
|
354
|
+
<div className="!space-y-4">
|
|
355
|
+
<h3 className="text-lg font-semibold !text-blue-300">
|
|
356
|
+
Theme Colors
|
|
357
|
+
</h3>
|
|
358
|
+
<div className="!space-y-4 rounded-lg border border-white/10 bg-white/5 p-6">
|
|
359
|
+
<div className="flex items-center gap-4">
|
|
360
|
+
<CapitalALetterIcon className="h-6 w-6 text-blue-400" />
|
|
361
|
+
<div>
|
|
362
|
+
<div className="text-sm font-medium text-white">
|
|
363
|
+
Primary
|
|
364
|
+
</div>
|
|
365
|
+
<div className="text-xs text-white/60">
|
|
366
|
+
text-blue-400
|
|
367
|
+
</div>
|
|
368
|
+
</div>
|
|
369
|
+
</div>
|
|
370
|
+
<div className="flex items-center gap-4">
|
|
371
|
+
<CapitalALetterIcon className="h-6 w-6 text-purple-400" />
|
|
372
|
+
<div>
|
|
373
|
+
<div className="text-sm font-medium text-white">
|
|
374
|
+
Secondary
|
|
375
|
+
</div>
|
|
376
|
+
<div className="text-xs text-white/60">
|
|
377
|
+
text-purple-400
|
|
378
|
+
</div>
|
|
379
|
+
</div>
|
|
380
|
+
</div>
|
|
381
|
+
<div className="flex items-center gap-4">
|
|
382
|
+
<CapitalALetterIcon className="h-6 w-6 text-cyan-400" />
|
|
383
|
+
<div>
|
|
384
|
+
<div className="text-sm font-medium text-white">
|
|
385
|
+
Accent
|
|
386
|
+
</div>
|
|
387
|
+
<div className="text-xs text-white/60">
|
|
388
|
+
text-cyan-400
|
|
389
|
+
</div>
|
|
390
|
+
</div>
|
|
391
|
+
</div>
|
|
392
|
+
<div className="flex items-center gap-4">
|
|
393
|
+
<CapitalALetterIcon className="h-6 w-6 text-gray-400" />
|
|
394
|
+
<div>
|
|
395
|
+
<div className="text-sm font-medium text-white">
|
|
396
|
+
Muted
|
|
397
|
+
</div>
|
|
398
|
+
<div className="text-xs text-white/60">
|
|
399
|
+
text-gray-400
|
|
400
|
+
</div>
|
|
401
|
+
</div>
|
|
402
|
+
</div>
|
|
403
|
+
</div>
|
|
404
|
+
</div>
|
|
405
|
+
|
|
406
|
+
<div className="!space-y-4">
|
|
407
|
+
<h3 className="text-lg font-semibold !text-blue-300">
|
|
408
|
+
Custom Colors
|
|
409
|
+
</h3>
|
|
410
|
+
<div className="rounded-lg bg-black/40 p-4">
|
|
411
|
+
<pre className="overflow-x-auto text-sm !text-green-300">
|
|
412
|
+
{`// Using Tailwind classes
|
|
413
|
+
<CapitalALetterIcon className="h-6 w-6 text-blue-400" />
|
|
414
|
+
<CapitalALetterIcon className="h-6 w-6 text-purple-500" />
|
|
415
|
+
|
|
416
|
+
// Using CSS custom properties
|
|
417
|
+
<CapitalALetterIcon
|
|
418
|
+
className="h-6 w-6"
|
|
419
|
+
style={{ color: 'var(--color-primary)' }}
|
|
420
|
+
/>
|
|
421
|
+
|
|
422
|
+
// Direct stroke prop
|
|
423
|
+
<CapitalALetterIcon
|
|
424
|
+
width={24}
|
|
425
|
+
height={24}
|
|
426
|
+
stroke="#3b82f6"
|
|
427
|
+
/>`}
|
|
428
|
+
</pre>
|
|
429
|
+
</div>
|
|
430
|
+
</div>
|
|
431
|
+
</div>
|
|
432
|
+
</div>
|
|
433
|
+
|
|
434
|
+
{/* Usage Examples */}
|
|
435
|
+
<div className="!space-y-8">
|
|
436
|
+
<h2 className="text-center text-3xl font-bold !text-white">
|
|
437
|
+
Usage Examples
|
|
438
|
+
</h2>
|
|
439
|
+
|
|
440
|
+
<div className="grid grid-cols-1 gap-8 lg:grid-cols-2">
|
|
441
|
+
{/* Text Editor Toolbar */}
|
|
442
|
+
<div className="!space-y-4">
|
|
443
|
+
<h3 className="text-lg font-semibold !text-blue-300">
|
|
444
|
+
Text Editor Toolbar
|
|
445
|
+
</h3>
|
|
446
|
+
<div className="!space-y-4">
|
|
447
|
+
<div className="flex items-center gap-2 rounded-lg border border-white/10 bg-white/5 p-3">
|
|
448
|
+
<button className="flex h-8 w-8 items-center justify-center rounded text-blue-400 hover:bg-blue-500/20">
|
|
449
|
+
<CapitalALetterIcon className="h-4 w-4" />
|
|
450
|
+
</button>
|
|
451
|
+
<button className="flex h-8 w-8 items-center justify-center rounded text-gray-400 hover:bg-gray-500/20">
|
|
452
|
+
<span className="text-sm font-bold">B</span>
|
|
453
|
+
</button>
|
|
454
|
+
<button className="flex h-8 w-8 items-center justify-center rounded text-gray-400 hover:bg-gray-500/20">
|
|
455
|
+
<span className="text-sm font-bold italic">I</span>
|
|
456
|
+
</button>
|
|
457
|
+
<button className="flex h-8 w-8 items-center justify-center rounded text-gray-400 hover:bg-gray-500/20">
|
|
458
|
+
<span className="text-sm font-bold underline">U</span>
|
|
459
|
+
</button>
|
|
460
|
+
</div>
|
|
461
|
+
<div className="rounded-lg bg-black/40 p-4">
|
|
462
|
+
<pre className="overflow-x-auto text-sm !text-green-300">
|
|
463
|
+
{`<div className="flex items-center gap-2 bg-white/5 border border-white/10 p-3 rounded-lg">
|
|
464
|
+
<button className="flex items-center justify-center h-8 w-8 rounded text-blue-400 hover:bg-blue-500/20">
|
|
465
|
+
<CapitalALetterIcon className="h-4 w-4" />
|
|
466
|
+
</button>
|
|
467
|
+
{/* Other formatting buttons */}
|
|
468
|
+
</div>`}
|
|
469
|
+
</pre>
|
|
470
|
+
</div>
|
|
471
|
+
</div>
|
|
472
|
+
</div>
|
|
473
|
+
|
|
474
|
+
{/* Font Size Selector */}
|
|
475
|
+
<div className="!space-y-4">
|
|
476
|
+
<h3 className="text-lg font-semibold !text-blue-300">
|
|
477
|
+
Font Size Selector
|
|
478
|
+
</h3>
|
|
479
|
+
<div className="!space-y-4">
|
|
480
|
+
<div className="rounded-lg border border-white/10 bg-white/5 p-4">
|
|
481
|
+
<div className="flex items-center gap-3">
|
|
482
|
+
<CapitalALetterIcon className="h-4 w-4 text-blue-400" />
|
|
483
|
+
<span className="text-sm text-white/70">
|
|
484
|
+
Font Size
|
|
485
|
+
</span>
|
|
486
|
+
<select className="rounded border border-white/20 bg-white/10 px-3 py-1 text-sm text-white">
|
|
487
|
+
<option>12px</option>
|
|
488
|
+
<option>14px</option>
|
|
489
|
+
<option>16px</option>
|
|
490
|
+
<option>18px</option>
|
|
491
|
+
<option>24px</option>
|
|
492
|
+
</select>
|
|
493
|
+
</div>
|
|
494
|
+
</div>
|
|
495
|
+
<div className="rounded-lg bg-black/40 p-4">
|
|
496
|
+
<pre className="overflow-x-auto text-sm !text-green-300">
|
|
497
|
+
{`<div className="flex items-center gap-3">
|
|
498
|
+
<CapitalALetterIcon className="h-4 w-4 text-blue-400" />
|
|
499
|
+
<span className="text-sm text-white/70">Font Size</span>
|
|
500
|
+
<select className="rounded border border-white/20 bg-white/10 px-3 py-1 text-sm text-white">
|
|
501
|
+
<option>12px</option>
|
|
502
|
+
<option>14px</option>
|
|
503
|
+
<option>16px</option>
|
|
504
|
+
</select>
|
|
505
|
+
</div>`}
|
|
506
|
+
</pre>
|
|
507
|
+
</div>
|
|
508
|
+
</div>
|
|
509
|
+
</div>
|
|
510
|
+
|
|
511
|
+
{/* Alphabetical Navigation */}
|
|
512
|
+
<div className="!space-y-4">
|
|
513
|
+
<h3 className="text-lg font-semibold !text-blue-300">
|
|
514
|
+
Alphabetical Navigation
|
|
515
|
+
</h3>
|
|
516
|
+
<div className="!space-y-4">
|
|
517
|
+
<div className="rounded-lg border border-white/10 bg-white/5 p-4">
|
|
518
|
+
<div className="flex items-center gap-2">
|
|
519
|
+
<button className="flex h-8 w-8 items-center justify-center rounded-full border border-blue-500/30 bg-blue-500/20 text-blue-400">
|
|
520
|
+
<CapitalALetterIcon className="h-4 w-4" />
|
|
521
|
+
</button>
|
|
522
|
+
<button className="flex h-8 w-8 items-center justify-center rounded-full border border-white/20 bg-white/5 text-gray-400">
|
|
523
|
+
<span className="text-sm font-bold">B</span>
|
|
524
|
+
</button>
|
|
525
|
+
<button className="flex h-8 w-8 items-center justify-center rounded-full border border-white/20 bg-white/5 text-gray-400">
|
|
526
|
+
<span className="text-sm font-bold">C</span>
|
|
527
|
+
</button>
|
|
528
|
+
<span className="text-white/40">...</span>
|
|
529
|
+
</div>
|
|
530
|
+
</div>
|
|
531
|
+
<div className="rounded-lg bg-black/40 p-4">
|
|
532
|
+
<pre className="overflow-x-auto text-sm !text-green-300">
|
|
533
|
+
{`<div className="flex items-center gap-2">
|
|
534
|
+
<button className="flex items-center justify-center h-8 w-8 rounded-full border border-blue-500/30 bg-blue-500/20 text-blue-400">
|
|
535
|
+
<CapitalALetterIcon className="h-4 w-4" />
|
|
536
|
+
</button>
|
|
537
|
+
<button className="flex items-center justify-center h-8 w-8 rounded-full border border-white/20 bg-white/5 text-gray-400">
|
|
538
|
+
<span className="text-sm font-bold">B</span>
|
|
539
|
+
</button>
|
|
540
|
+
</div>`}
|
|
541
|
+
</pre>
|
|
542
|
+
</div>
|
|
543
|
+
</div>
|
|
544
|
+
</div>
|
|
545
|
+
|
|
546
|
+
{/* Typography Settings */}
|
|
547
|
+
<div className="!space-y-4">
|
|
548
|
+
<h3 className="text-lg font-semibold !text-blue-300">
|
|
549
|
+
Typography Settings
|
|
550
|
+
</h3>
|
|
551
|
+
<div className="!space-y-4">
|
|
552
|
+
<div className="rounded-lg border border-white/10 bg-white/5 p-4">
|
|
553
|
+
<div className="!space-y-3">
|
|
554
|
+
<div className="flex items-center justify-between">
|
|
555
|
+
<div className="flex items-center gap-3">
|
|
556
|
+
<CapitalALetterIcon className="h-5 w-5 text-blue-400" />
|
|
557
|
+
<span className="text-white">Typography</span>
|
|
558
|
+
</div>
|
|
559
|
+
<button className="text-xs text-blue-400 hover:text-blue-300">
|
|
560
|
+
Edit
|
|
561
|
+
</button>
|
|
562
|
+
</div>
|
|
563
|
+
<div className="ml-8 text-sm text-white/60">
|
|
564
|
+
<div>Font Family: Inter</div>
|
|
565
|
+
<div>Font Size: 16px</div>
|
|
566
|
+
<div>Line Height: 1.5</div>
|
|
567
|
+
</div>
|
|
568
|
+
</div>
|
|
569
|
+
</div>
|
|
570
|
+
<div className="rounded-lg bg-black/40 p-4">
|
|
571
|
+
<pre className="overflow-x-auto text-sm !text-green-300">
|
|
572
|
+
{`<div className="flex items-center justify-between">
|
|
573
|
+
<div className="flex items-center gap-3">
|
|
574
|
+
<CapitalALetterIcon className="h-5 w-5 text-blue-400" />
|
|
575
|
+
<span className="text-white">Typography</span>
|
|
576
|
+
</div>
|
|
577
|
+
<button className="text-xs text-blue-400 hover:text-blue-300">
|
|
578
|
+
Edit
|
|
579
|
+
</button>
|
|
580
|
+
</div>`}
|
|
581
|
+
</pre>
|
|
582
|
+
</div>
|
|
583
|
+
</div>
|
|
584
|
+
</div>
|
|
585
|
+
</div>
|
|
586
|
+
</div>
|
|
587
|
+
|
|
588
|
+
{/* Accessibility */}
|
|
589
|
+
<div className="!space-y-8">
|
|
590
|
+
<h2 className="text-center text-3xl font-bold !text-white">
|
|
591
|
+
Accessibility Features
|
|
592
|
+
</h2>
|
|
593
|
+
<div className="grid grid-cols-1 gap-8 md:grid-cols-2">
|
|
594
|
+
<div className="!space-y-4 rounded-lg border border-white/10 bg-white/5 p-6">
|
|
595
|
+
<h3 className="text-lg font-semibold !text-green-300">
|
|
596
|
+
✅ Built-in Features
|
|
597
|
+
</h3>
|
|
598
|
+
<ul className="!space-y-2 text-sm !text-white/70">
|
|
599
|
+
<li className="!text-white/70">
|
|
600
|
+
Uses Radix UI AccessibleIcon wrapper
|
|
601
|
+
</li>
|
|
602
|
+
<li className="!text-white/70">
|
|
603
|
+
Provides screen reader label "Capital A Letter Icon"
|
|
604
|
+
</li>
|
|
605
|
+
<li className="!text-white/70">
|
|
606
|
+
Supports keyboard navigation when interactive
|
|
607
|
+
</li>
|
|
608
|
+
<li className="!text-white/70">
|
|
609
|
+
Maintains proper color contrast ratios
|
|
610
|
+
</li>
|
|
611
|
+
<li className="!text-white/70">
|
|
612
|
+
Scales with user's font size preferences
|
|
613
|
+
</li>
|
|
614
|
+
</ul>
|
|
615
|
+
</div>
|
|
616
|
+
|
|
617
|
+
<div className="!space-y-4 rounded-lg border border-white/10 bg-white/5 p-6">
|
|
618
|
+
<h3 className="text-lg font-semibold !text-blue-300">
|
|
619
|
+
💡 Best Practices
|
|
620
|
+
</h3>
|
|
621
|
+
<ul className="!space-y-2 text-sm text-white/70">
|
|
622
|
+
<li className="!text-white/70">
|
|
623
|
+
Use in typography-related contexts
|
|
624
|
+
</li>
|
|
625
|
+
<li className="!text-white/70">
|
|
626
|
+
Pair with descriptive labels or tooltips
|
|
627
|
+
</li>
|
|
628
|
+
<li className="!text-white/70">
|
|
629
|
+
Ensure sufficient color contrast
|
|
630
|
+
</li>
|
|
631
|
+
<li className="!text-white/70">
|
|
632
|
+
Add focus states for interactive elements
|
|
633
|
+
</li>
|
|
634
|
+
<li className="!text-white/70">
|
|
635
|
+
Consider context when choosing colors
|
|
636
|
+
</li>
|
|
637
|
+
</ul>
|
|
638
|
+
</div>
|
|
639
|
+
</div>
|
|
640
|
+
|
|
641
|
+
<div className="rounded-lg border border-white/10 bg-white/5 p-6">
|
|
642
|
+
<h3 className="mb-4 text-lg font-semibold !text-purple-300">
|
|
643
|
+
Custom Accessibility Label
|
|
644
|
+
</h3>
|
|
645
|
+
<div className="grid grid-cols-1 gap-6 lg:grid-cols-2">
|
|
646
|
+
<div className="rounded-lg bg-black/40 p-4">
|
|
647
|
+
<pre className="overflow-x-auto text-sm !text-cyan-300">
|
|
648
|
+
{`// Custom implementation with specific label
|
|
649
|
+
import { AccessibleIcon } from "@radix-ui/react-accessible-icon"
|
|
650
|
+
|
|
651
|
+
function CustomCapitalAIcon({ label = "Font size", ...props }) {
|
|
652
|
+
return (
|
|
653
|
+
<AccessibleIcon label={label}>
|
|
654
|
+
<svg {...props}>
|
|
655
|
+
{/* SVG content */}
|
|
656
|
+
</svg>
|
|
657
|
+
</AccessibleIcon>
|
|
658
|
+
)
|
|
659
|
+
}
|
|
660
|
+
|
|
661
|
+
// Usage with specific context
|
|
662
|
+
<CustomCapitalAIcon
|
|
663
|
+
label="Increase font size"
|
|
664
|
+
className="h-4 w-4 text-blue-400"
|
|
665
|
+
/>`}
|
|
666
|
+
</pre>
|
|
667
|
+
</div>
|
|
668
|
+
<div className="!space-y-4">
|
|
669
|
+
<p className="text-sm !text-white/70">
|
|
670
|
+
For specific typography contexts, you can provide more
|
|
671
|
+
descriptive labels that give screen readers better
|
|
672
|
+
context about the icon's purpose.
|
|
673
|
+
</p>
|
|
674
|
+
<div className="rounded-lg border border-blue-500/20 bg-blue-500/10 p-4">
|
|
675
|
+
<div className="flex items-center gap-2 text-sm text-blue-200">
|
|
676
|
+
<CapitalALetterIcon className="h-4 w-4" />
|
|
677
|
+
<span>
|
|
678
|
+
This helps users understand the icon's function
|
|
679
|
+
</span>
|
|
680
|
+
</div>
|
|
681
|
+
</div>
|
|
682
|
+
</div>
|
|
683
|
+
</div>
|
|
684
|
+
</div>
|
|
685
|
+
</div>
|
|
686
|
+
|
|
687
|
+
{/* Related Icons */}
|
|
688
|
+
<div className="!space-y-8">
|
|
689
|
+
<h2 className="text-center text-3xl font-bold !text-white">
|
|
690
|
+
Related Icons
|
|
691
|
+
</h2>
|
|
692
|
+
<div className="grid grid-cols-2 gap-6 md:grid-cols-4">
|
|
693
|
+
<div className="!space-y-3 rounded-lg border border-white/10 bg-white/5 p-4 text-center">
|
|
694
|
+
<div className="!mx-auto flex h-12 w-12 items-center justify-center rounded-lg bg-green-500/20">
|
|
695
|
+
<span className="!text-2xl font-bold !text-white">B</span>
|
|
696
|
+
</div>
|
|
697
|
+
<div>
|
|
698
|
+
<div className="font-medium text-white">Bold</div>
|
|
699
|
+
<div className="text-xs text-white/60">
|
|
700
|
+
Text formatting
|
|
701
|
+
</div>
|
|
702
|
+
</div>
|
|
703
|
+
</div>
|
|
704
|
+
<div className="!space-y-3 rounded-lg border border-white/10 bg-white/5 p-4 text-center">
|
|
705
|
+
<div className="!mx-auto flex h-12 w-12 items-center justify-center rounded-lg bg-purple-500/20">
|
|
706
|
+
<span className="!text-2xl font-bold !text-white italic">
|
|
707
|
+
I
|
|
708
|
+
</span>
|
|
709
|
+
</div>
|
|
710
|
+
<div>
|
|
711
|
+
<div className="font-medium text-white">Italic</div>
|
|
712
|
+
<div className="text-xs text-white/60">Text styling</div>
|
|
713
|
+
</div>
|
|
714
|
+
</div>
|
|
715
|
+
<div className="!space-y-3 rounded-lg border border-white/10 bg-white/5 p-4 text-center">
|
|
716
|
+
<div className="!mx-auto flex h-12 w-12 items-center justify-center rounded-lg bg-orange-500/20">
|
|
717
|
+
<span className="text-2xl">🔤</span>
|
|
718
|
+
</div>
|
|
719
|
+
<div>
|
|
720
|
+
<div className="font-medium text-white">TextIcon</div>
|
|
721
|
+
<div className="text-xs text-white/60">Text tools</div>
|
|
722
|
+
</div>
|
|
723
|
+
</div>
|
|
724
|
+
<div className="!space-y-3 rounded-lg border border-white/10 bg-white/5 p-4 text-center">
|
|
725
|
+
<div className="!mx-auto flex h-12 w-12 items-center justify-center rounded-lg bg-cyan-500/20">
|
|
726
|
+
<span className="text-2xl">📝</span>
|
|
727
|
+
</div>
|
|
728
|
+
<div>
|
|
729
|
+
<div className="font-medium text-white">EditIcon</div>
|
|
730
|
+
<div className="text-xs text-white/60">
|
|
731
|
+
Content editing
|
|
732
|
+
</div>
|
|
733
|
+
</div>
|
|
734
|
+
</div>
|
|
735
|
+
</div>
|
|
736
|
+
</div>
|
|
737
|
+
</div>
|
|
738
|
+
|
|
739
|
+
{/* Footer */}
|
|
740
|
+
<div className="border-t border-white/10 bg-black/20 backdrop-blur-xl">
|
|
741
|
+
<div className="!mx-auto max-w-7xl px-6 py-8">
|
|
742
|
+
<div className="!space-y-4 text-center">
|
|
743
|
+
<p className="!text-white/60">
|
|
744
|
+
CapitalALetterIcon is part of the Aural UI icon library,
|
|
745
|
+
designed for typography and text formatting interfaces.
|
|
746
|
+
</p>
|
|
747
|
+
<p className="text-sm !text-white/40">
|
|
748
|
+
All icons use Radix UI's AccessibleIcon for screen reader
|
|
749
|
+
compatibility and follow WCAG guidelines.
|
|
750
|
+
</p>
|
|
751
|
+
</div>
|
|
752
|
+
</div>
|
|
753
|
+
</div>
|
|
754
|
+
</div>
|
|
755
|
+
</>
|
|
756
|
+
),
|
|
757
|
+
},
|
|
758
|
+
},
|
|
759
|
+
tags: ["autodocs"],
|
|
760
|
+
argTypes: {
|
|
761
|
+
width: {
|
|
762
|
+
control: { type: "range", min: 8, max: 96, step: 2 },
|
|
763
|
+
description: "Width of the icon in pixels",
|
|
764
|
+
},
|
|
765
|
+
height: {
|
|
766
|
+
control: { type: "range", min: 8, max: 96, step: 2 },
|
|
767
|
+
description: "Height of the icon in pixels",
|
|
768
|
+
},
|
|
769
|
+
stroke: {
|
|
770
|
+
control: "color",
|
|
771
|
+
description: "Stroke color of the icon",
|
|
772
|
+
},
|
|
773
|
+
strokeWidth: {
|
|
774
|
+
control: { type: "range", min: 0.5, max: 3, step: 0.1 },
|
|
775
|
+
description: "Thickness of the stroke",
|
|
776
|
+
},
|
|
777
|
+
className: {
|
|
778
|
+
control: "text",
|
|
779
|
+
description: "CSS classes for styling",
|
|
780
|
+
},
|
|
781
|
+
},
|
|
782
|
+
}
|
|
783
|
+
|
|
784
|
+
export default meta
|
|
785
|
+
type Story = StoryObj<typeof CapitalALetterIcon>
|
|
786
|
+
|
|
787
|
+
// Story parameters for consistent dark theme
|
|
788
|
+
const storyParameters = {
|
|
789
|
+
backgrounds: {
|
|
790
|
+
default: "dark",
|
|
791
|
+
values: [
|
|
792
|
+
{ name: "dark", value: "#0a0a0a" },
|
|
793
|
+
{ name: "darker", value: "#000000" },
|
|
794
|
+
],
|
|
795
|
+
},
|
|
796
|
+
}
|
|
797
|
+
|
|
798
|
+
export const Default: Story = {
|
|
799
|
+
args: {
|
|
800
|
+
width: 24,
|
|
801
|
+
height: 24,
|
|
802
|
+
className: "text-blue-400",
|
|
803
|
+
},
|
|
804
|
+
parameters: storyParameters,
|
|
805
|
+
render: (args) => (
|
|
806
|
+
<div className="flex h-32 min-h-dvh items-center justify-center rounded-lg bg-gradient-to-br from-gray-900 to-gray-800">
|
|
807
|
+
<CapitalALetterIcon {...args} />
|
|
808
|
+
</div>
|
|
809
|
+
),
|
|
810
|
+
}
|
|
811
|
+
|
|
812
|
+
export const SizeVariations: Story = {
|
|
813
|
+
parameters: {
|
|
814
|
+
...storyParameters,
|
|
815
|
+
docs: {
|
|
816
|
+
description: {
|
|
817
|
+
story:
|
|
818
|
+
"CapitalALetterIcon in different sizes, from small UI elements to large displays.",
|
|
819
|
+
},
|
|
820
|
+
},
|
|
821
|
+
},
|
|
822
|
+
render: () => (
|
|
823
|
+
<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">
|
|
824
|
+
<div className="text-center">
|
|
825
|
+
<CapitalALetterIcon className="!mx-auto mb-2 h-3 w-3 text-blue-400" />
|
|
826
|
+
<span className="text-xs text-white/60">12px</span>
|
|
827
|
+
</div>
|
|
828
|
+
<div className="text-center">
|
|
829
|
+
<CapitalALetterIcon className="!mx-auto mb-2 h-4 w-4 text-blue-400" />
|
|
830
|
+
<span className="text-xs text-white/60">16px</span>
|
|
831
|
+
</div>
|
|
832
|
+
<div className="text-center">
|
|
833
|
+
<CapitalALetterIcon className="!mx-auto mb-2 h-5 w-5 text-blue-400" />
|
|
834
|
+
<span className="text-xs text-white/60">20px</span>
|
|
835
|
+
</div>
|
|
836
|
+
<div className="text-center">
|
|
837
|
+
<CapitalALetterIcon className="!mx-auto mb-2 h-6 w-6 text-blue-400" />
|
|
838
|
+
<span className="text-xs text-white/60">24px</span>
|
|
839
|
+
</div>
|
|
840
|
+
<div className="text-center">
|
|
841
|
+
<CapitalALetterIcon className="!mx-auto mb-2 h-8 w-8 text-blue-400" />
|
|
842
|
+
<span className="text-xs text-white/60">32px</span>
|
|
843
|
+
</div>
|
|
844
|
+
<div className="text-center">
|
|
845
|
+
<CapitalALetterIcon className="!mx-auto mb-2 h-12 w-12 text-blue-400" />
|
|
846
|
+
<span className="text-xs text-white/60">48px</span>
|
|
847
|
+
</div>
|
|
848
|
+
</div>
|
|
849
|
+
),
|
|
850
|
+
}
|
|
851
|
+
|
|
852
|
+
export const ColorVariations: Story = {
|
|
853
|
+
parameters: {
|
|
854
|
+
...storyParameters,
|
|
855
|
+
docs: {
|
|
856
|
+
description: {
|
|
857
|
+
story:
|
|
858
|
+
"CapitalALetterIcon in different theme colors for various UI contexts.",
|
|
859
|
+
},
|
|
860
|
+
},
|
|
861
|
+
},
|
|
862
|
+
render: () => (
|
|
863
|
+
<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">
|
|
864
|
+
<div className="text-center">
|
|
865
|
+
<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">
|
|
866
|
+
<CapitalALetterIcon className="h-8 w-8 text-blue-400" />
|
|
867
|
+
</div>
|
|
868
|
+
<div className="text-sm font-medium text-white">Primary</div>
|
|
869
|
+
<div className="text-xs text-blue-400">text-blue-400</div>
|
|
870
|
+
</div>
|
|
871
|
+
<div className="text-center">
|
|
872
|
+
<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">
|
|
873
|
+
<CapitalALetterIcon className="h-8 w-8 text-purple-400" />
|
|
874
|
+
</div>
|
|
875
|
+
<div className="text-sm font-medium text-white">Secondary</div>
|
|
876
|
+
<div className="text-xs text-purple-400">text-purple-400</div>
|
|
877
|
+
</div>
|
|
878
|
+
<div className="text-center">
|
|
879
|
+
<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">
|
|
880
|
+
<CapitalALetterIcon className="h-8 w-8 text-cyan-400" />
|
|
881
|
+
</div>
|
|
882
|
+
<div className="text-sm font-medium text-white">Accent</div>
|
|
883
|
+
<div className="text-xs text-cyan-400">text-cyan-400</div>
|
|
884
|
+
</div>
|
|
885
|
+
<div className="text-center">
|
|
886
|
+
<div className="!mx-auto mb-3 flex h-16 w-16 items-center justify-center rounded-lg border border-gray-500/30 bg-gray-500/20">
|
|
887
|
+
<CapitalALetterIcon className="h-8 w-8 text-gray-400" />
|
|
888
|
+
</div>
|
|
889
|
+
<div className="text-sm font-medium text-white">Muted</div>
|
|
890
|
+
<div className="text-xs text-gray-400">text-gray-400</div>
|
|
891
|
+
</div>
|
|
892
|
+
</div>
|
|
893
|
+
),
|
|
894
|
+
}
|
|
895
|
+
|
|
896
|
+
export const UsageExamples: Story = {
|
|
897
|
+
parameters: {
|
|
898
|
+
...storyParameters,
|
|
899
|
+
docs: {
|
|
900
|
+
description: {
|
|
901
|
+
story:
|
|
902
|
+
"Real-world usage examples showing CapitalALetterIcon in different typography contexts.",
|
|
903
|
+
},
|
|
904
|
+
},
|
|
905
|
+
},
|
|
906
|
+
render: () => (
|
|
907
|
+
<div className="min-h-dvh !space-y-8 rounded-lg bg-gradient-to-br from-gray-900 to-gray-800 p-8">
|
|
908
|
+
{/* Text Editor Toolbar */}
|
|
909
|
+
<div className="!space-y-2">
|
|
910
|
+
<h3 className="text-sm font-medium text-white">Text Editor Toolbar</h3>
|
|
911
|
+
<div className="flex items-center gap-2 rounded-lg border border-white/10 bg-white/5 p-3">
|
|
912
|
+
<button className="flex h-8 w-8 items-center justify-center rounded text-blue-400 hover:bg-blue-500/20">
|
|
913
|
+
<CapitalALetterIcon className="h-4 w-4" />
|
|
914
|
+
</button>
|
|
915
|
+
<button className="flex h-8 w-8 items-center justify-center rounded text-gray-400 hover:bg-gray-500/20">
|
|
916
|
+
<span className="text-sm font-bold">B</span>
|
|
917
|
+
</button>
|
|
918
|
+
<button className="flex h-8 w-8 items-center justify-center rounded text-gray-400 hover:bg-gray-500/20">
|
|
919
|
+
<span className="text-sm font-bold italic">I</span>
|
|
920
|
+
</button>
|
|
921
|
+
<button className="flex h-8 w-8 items-center justify-center rounded text-gray-400 hover:bg-gray-500/20">
|
|
922
|
+
<span className="text-sm font-bold underline">U</span>
|
|
923
|
+
</button>
|
|
924
|
+
</div>
|
|
925
|
+
</div>
|
|
926
|
+
|
|
927
|
+
{/* Font Size Selector */}
|
|
928
|
+
<div className="!space-y-2">
|
|
929
|
+
<h3 className="text-sm font-medium text-white">Font Size Selector</h3>
|
|
930
|
+
<div className="rounded-lg border border-white/10 bg-white/5 p-4">
|
|
931
|
+
<div className="flex items-center gap-3">
|
|
932
|
+
<CapitalALetterIcon className="h-4 w-4 text-blue-400" />
|
|
933
|
+
<span className="text-sm text-white/70">Font Size</span>
|
|
934
|
+
<select className="rounded border border-white/20 bg-white/10 px-3 py-1 text-sm text-white">
|
|
935
|
+
<option>12px</option>
|
|
936
|
+
<option>14px</option>
|
|
937
|
+
<option>16px</option>
|
|
938
|
+
<option>18px</option>
|
|
939
|
+
<option>24px</option>
|
|
940
|
+
</select>
|
|
941
|
+
</div>
|
|
942
|
+
</div>
|
|
943
|
+
</div>
|
|
944
|
+
|
|
945
|
+
{/* Alphabetical Navigation */}
|
|
946
|
+
<div className="!space-y-2">
|
|
947
|
+
<h3 className="text-sm font-medium text-white">
|
|
948
|
+
Alphabetical Navigation
|
|
949
|
+
</h3>
|
|
950
|
+
<div className="rounded-lg border border-white/10 bg-white/5 p-4">
|
|
951
|
+
<div className="flex items-center gap-2">
|
|
952
|
+
<button className="flex h-8 w-8 items-center justify-center rounded-full border border-blue-500/30 bg-blue-500/20 text-blue-400">
|
|
953
|
+
<CapitalALetterIcon className="h-4 w-4" />
|
|
954
|
+
</button>
|
|
955
|
+
<button className="flex h-8 w-8 items-center justify-center rounded-full border border-white/20 bg-white/5 text-gray-400">
|
|
956
|
+
<span className="text-sm font-bold">B</span>
|
|
957
|
+
</button>
|
|
958
|
+
<button className="flex h-8 w-8 items-center justify-center rounded-full border border-white/20 bg-white/5 text-gray-400">
|
|
959
|
+
<span className="text-sm font-bold">C</span>
|
|
960
|
+
</button>
|
|
961
|
+
<span className="text-white/40">...</span>
|
|
962
|
+
</div>
|
|
963
|
+
</div>
|
|
964
|
+
</div>
|
|
965
|
+
</div>
|
|
966
|
+
),
|
|
967
|
+
}
|
|
968
|
+
|
|
969
|
+
export const Playground: Story = {
|
|
970
|
+
parameters: {
|
|
971
|
+
...storyParameters,
|
|
972
|
+
docs: {
|
|
973
|
+
description: {
|
|
974
|
+
story:
|
|
975
|
+
"Interactive playground to experiment with different CapitalALetterIcon configurations.",
|
|
976
|
+
},
|
|
977
|
+
},
|
|
978
|
+
},
|
|
979
|
+
args: {
|
|
980
|
+
width: 32,
|
|
981
|
+
height: 32,
|
|
982
|
+
className: "text-blue-400",
|
|
983
|
+
strokeWidth: 1.5,
|
|
984
|
+
},
|
|
985
|
+
render: (args) => (
|
|
986
|
+
<div className="flex h-64 min-h-dvh items-center justify-center rounded-lg bg-gradient-to-br from-gray-900 to-gray-800">
|
|
987
|
+
<div className="rounded-lg border border-white/10 bg-white/5 p-8">
|
|
988
|
+
<CapitalALetterIcon {...args} />
|
|
989
|
+
</div>
|
|
990
|
+
</div>
|
|
991
|
+
),
|
|
992
|
+
}
|