aural-ui 2.1.9 → 2.1.11
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/breadcrumb/Breadcrumb.stories.tsx +302 -0
- package/dist/components/breadcrumb/index.tsx +232 -0
- package/dist/components/breadcrumb/meta.ts +14 -0
- package/dist/components/index.ts +3 -0
- package/dist/components/otp-inputs/index.tsx +39 -4
- package/dist/components/textarea/index.tsx +1 -1
- package/dist/components/typography/meta.ts +1 -0
- package/dist/fonts/Nunito-VariableFont_wght.ttf +0 -0
- package/dist/icons/index.ts +2 -0
- package/dist/icons/phone-icon/PhoneIcon.stories.tsx +1034 -0
- package/dist/icons/phone-icon/index.tsx +26 -0
- package/dist/icons/phone-icon/meta.ts +8 -0
- package/dist/icons/shield-icon/ShieldIcon.stories.tsx +991 -0
- package/dist/icons/shield-icon/index.tsx +21 -0
- package/dist/icons/shield-icon/meta.ts +8 -0
- package/dist/index.js +1 -1
- package/dist/styles/aural-theme.css +1 -0
- package/package.json +1 -1
|
@@ -0,0 +1,1034 @@
|
|
|
1
|
+
import React from "react"
|
|
2
|
+
import type { Meta, StoryObj } from "@storybook/react"
|
|
3
|
+
|
|
4
|
+
import { PhoneIcon } from "."
|
|
5
|
+
|
|
6
|
+
const meta: Meta<typeof PhoneIcon> = {
|
|
7
|
+
title: "Icons/PhoneIcon",
|
|
8
|
+
component: PhoneIcon,
|
|
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-violet-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-purple-500/30 bg-gradient-to-br from-purple-500/20 to-violet-500/20">
|
|
90
|
+
<PhoneIcon className="text-fm-secondary-800 h-12 w-12" />
|
|
91
|
+
</div>
|
|
92
|
+
<h1 className="text-5xl font-bold !text-white">PhoneIcon</h1>
|
|
93
|
+
<p className="!mx-auto max-w-3xl text-xl leading-relaxed !text-white/70">
|
|
94
|
+
A universal phone icon for communication interfaces.
|
|
95
|
+
Features the classic mobile phone design, essential for
|
|
96
|
+
contact lists, call buttons, messaging apps, and any
|
|
97
|
+
interface where users need to initiate or manage phone
|
|
98
|
+
calls.
|
|
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-purple-300">
|
|
105
|
+
Call Action
|
|
106
|
+
</div>
|
|
107
|
+
<div className="text-sm text-white/60">
|
|
108
|
+
Initiate calls
|
|
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-violet-300">
|
|
114
|
+
Accessible
|
|
115
|
+
</div>
|
|
116
|
+
<div className="text-sm text-white/60">
|
|
117
|
+
Screen reader friendly
|
|
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-fuchsia-300">
|
|
123
|
+
Universal
|
|
124
|
+
</div>
|
|
125
|
+
<div className="text-sm text-white/60">
|
|
126
|
+
Standard communication icon
|
|
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-purple-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 { PhoneIcon } from "@icons/phone-icon"
|
|
149
|
+
|
|
150
|
+
function ContactCard() {
|
|
151
|
+
return (
|
|
152
|
+
<button
|
|
153
|
+
onClick={makeCall}
|
|
154
|
+
className="p-2 hover:bg-white/10 rounded-lg"
|
|
155
|
+
>
|
|
156
|
+
<PhoneIcon className="h-6 w-6" />
|
|
157
|
+
</button>
|
|
158
|
+
)
|
|
159
|
+
}`}
|
|
160
|
+
</pre>
|
|
161
|
+
</div>
|
|
162
|
+
</div>
|
|
163
|
+
|
|
164
|
+
<div className="!space-y-4">
|
|
165
|
+
<h3 className="text-xl font-semibold !text-purple-300">
|
|
166
|
+
Live Preview
|
|
167
|
+
</h3>
|
|
168
|
+
<div className="flex h-32 items-center justify-center rounded-lg border border-white/10 bg-white/5">
|
|
169
|
+
<button className="rounded-lg border border-purple-500/20 bg-purple-500/10 p-3 transition-colors hover:bg-purple-500/20">
|
|
170
|
+
<PhoneIcon className="h-6 w-6" />
|
|
171
|
+
</button>
|
|
172
|
+
</div>
|
|
173
|
+
</div>
|
|
174
|
+
</div>
|
|
175
|
+
</div>
|
|
176
|
+
|
|
177
|
+
{/* Props Documentation */}
|
|
178
|
+
<div className="!space-y-8">
|
|
179
|
+
<h2 className="text-center text-3xl font-bold !text-white">
|
|
180
|
+
Props & Configuration
|
|
181
|
+
</h2>
|
|
182
|
+
|
|
183
|
+
<div className="overflow-hidden rounded-lg border border-white/10 bg-white/5">
|
|
184
|
+
<div className="bg-white/5 p-4">
|
|
185
|
+
<h3 className="text-xl font-semibold !text-white">Props</h3>
|
|
186
|
+
</div>
|
|
187
|
+
<table className="!my-0 w-full">
|
|
188
|
+
<thead className="bg-white/5">
|
|
189
|
+
<tr className="border-b border-white/10">
|
|
190
|
+
<th className="px-6 py-4 text-left text-sm font-semibold !text-white">
|
|
191
|
+
Prop
|
|
192
|
+
</th>
|
|
193
|
+
<th className="px-6 py-4 text-left text-sm font-semibold !text-white">
|
|
194
|
+
Type
|
|
195
|
+
</th>
|
|
196
|
+
<th className="px-6 py-4 text-left text-sm font-semibold !text-white">
|
|
197
|
+
Default
|
|
198
|
+
</th>
|
|
199
|
+
<th className="px-6 py-4 text-left text-sm font-semibold !text-white">
|
|
200
|
+
Description
|
|
201
|
+
</th>
|
|
202
|
+
</tr>
|
|
203
|
+
</thead>
|
|
204
|
+
<tbody>
|
|
205
|
+
<tr className="border-b border-white/5">
|
|
206
|
+
<td className="px-6 py-4 font-mono text-sm !text-purple-300">
|
|
207
|
+
width
|
|
208
|
+
</td>
|
|
209
|
+
<td className="px-6 py-4 text-sm !text-white/70">
|
|
210
|
+
number | string
|
|
211
|
+
</td>
|
|
212
|
+
<td className="px-6 py-4 text-sm !text-white/50">14</td>
|
|
213
|
+
<td className="px-6 py-4 text-sm !text-white/70">
|
|
214
|
+
Width of the icon in pixels
|
|
215
|
+
</td>
|
|
216
|
+
</tr>
|
|
217
|
+
<tr className="border-b border-white/5 !bg-black/10">
|
|
218
|
+
<td className="px-6 py-4 font-mono text-sm !text-purple-300">
|
|
219
|
+
height
|
|
220
|
+
</td>
|
|
221
|
+
<td className="px-6 py-4 text-sm !text-white/70">
|
|
222
|
+
number | string
|
|
223
|
+
</td>
|
|
224
|
+
<td className="px-6 py-4 text-sm !text-white/50">14</td>
|
|
225
|
+
<td className="px-6 py-4 text-sm !text-white/70">
|
|
226
|
+
Height of the icon in pixels
|
|
227
|
+
</td>
|
|
228
|
+
</tr>
|
|
229
|
+
<tr className="border-b border-white/5">
|
|
230
|
+
<td className="px-6 py-4 font-mono text-sm !text-purple-300">
|
|
231
|
+
stroke
|
|
232
|
+
</td>
|
|
233
|
+
<td className="px-6 py-4 text-sm !text-white/70">
|
|
234
|
+
string
|
|
235
|
+
</td>
|
|
236
|
+
<td className="px-6 py-4 text-sm !text-white/50">
|
|
237
|
+
#C58AFF
|
|
238
|
+
</td>
|
|
239
|
+
<td className="px-6 py-4 text-sm !text-white/70">
|
|
240
|
+
Stroke color of the icon
|
|
241
|
+
</td>
|
|
242
|
+
</tr>
|
|
243
|
+
<tr className="border-b border-white/5 !bg-black/10">
|
|
244
|
+
<td className="px-6 py-4 font-mono text-sm !text-purple-300">
|
|
245
|
+
strokeWidth
|
|
246
|
+
</td>
|
|
247
|
+
<td className="px-6 py-4 text-sm !text-white/70">
|
|
248
|
+
string | number
|
|
249
|
+
</td>
|
|
250
|
+
<td className="px-6 py-4 text-sm !text-white/50">
|
|
251
|
+
1.2
|
|
252
|
+
</td>
|
|
253
|
+
<td className="px-6 py-4 text-sm !text-white/70">
|
|
254
|
+
Width of the stroke
|
|
255
|
+
</td>
|
|
256
|
+
</tr>
|
|
257
|
+
<tr className="border-b border-white/5">
|
|
258
|
+
<td className="px-6 py-4 font-mono text-sm !text-purple-300">
|
|
259
|
+
className
|
|
260
|
+
</td>
|
|
261
|
+
<td className="px-6 py-4 text-sm !text-white/70">
|
|
262
|
+
string
|
|
263
|
+
</td>
|
|
264
|
+
<td className="px-6 py-4 text-sm !text-white/50">-</td>
|
|
265
|
+
<td className="px-6 py-4 text-sm !text-white/70">
|
|
266
|
+
CSS classes for styling (use for overrides)
|
|
267
|
+
</td>
|
|
268
|
+
</tr>
|
|
269
|
+
<tr className="!bg-black/10">
|
|
270
|
+
<td className="px-6 py-4 font-mono text-sm !text-purple-300">
|
|
271
|
+
...svgProps
|
|
272
|
+
</td>
|
|
273
|
+
<td className="px-6 py-4 text-sm !text-white/70">
|
|
274
|
+
SVGProps
|
|
275
|
+
</td>
|
|
276
|
+
<td className="px-6 py-4 text-sm !text-white/50">-</td>
|
|
277
|
+
<td className="px-6 py-4 text-sm !text-white/70">
|
|
278
|
+
All standard SVG element props
|
|
279
|
+
</td>
|
|
280
|
+
</tr>
|
|
281
|
+
</tbody>
|
|
282
|
+
</table>
|
|
283
|
+
</div>
|
|
284
|
+
</div>
|
|
285
|
+
|
|
286
|
+
{/* Size Variations */}
|
|
287
|
+
<div className="!space-y-8">
|
|
288
|
+
<h2 className="text-center text-3xl font-bold !text-white">
|
|
289
|
+
Size Variations
|
|
290
|
+
</h2>
|
|
291
|
+
<div className="rounded-lg border border-white/10 bg-white/5 p-8">
|
|
292
|
+
<div className="!space-y-6">
|
|
293
|
+
<div className="grid grid-cols-1 gap-8 md:grid-cols-2">
|
|
294
|
+
<div className="!space-y-4">
|
|
295
|
+
<h3 className="text-lg font-semibold !text-purple-300">
|
|
296
|
+
Standard Sizes
|
|
297
|
+
</h3>
|
|
298
|
+
<div className="flex items-end gap-6 rounded-lg bg-black/20 p-6">
|
|
299
|
+
<div className="text-center">
|
|
300
|
+
<PhoneIcon className="!mx-auto mb-2 size-3" />
|
|
301
|
+
<span className="text-xs text-white/60">12px</span>
|
|
302
|
+
</div>
|
|
303
|
+
<div className="text-center">
|
|
304
|
+
<PhoneIcon className="!mx-auto mb-2 size-4" />
|
|
305
|
+
<span className="text-xs text-white/60">16px</span>
|
|
306
|
+
</div>
|
|
307
|
+
<div className="text-center">
|
|
308
|
+
<PhoneIcon className="!mx-auto mb-2 size-5" />
|
|
309
|
+
<span className="text-xs text-white/60">20px</span>
|
|
310
|
+
</div>
|
|
311
|
+
<div className="text-center">
|
|
312
|
+
<PhoneIcon className="!mx-auto mb-2 size-6" />
|
|
313
|
+
<span className="text-xs text-white/60">24px</span>
|
|
314
|
+
</div>
|
|
315
|
+
<div className="text-center">
|
|
316
|
+
<PhoneIcon className="!mx-auto mb-2 size-8" />
|
|
317
|
+
<span className="text-xs text-white/60">32px</span>
|
|
318
|
+
</div>
|
|
319
|
+
<div className="text-center">
|
|
320
|
+
<PhoneIcon className="!mx-auto mb-2 h-12 w-12" />
|
|
321
|
+
<span className="text-xs text-white/60">48px</span>
|
|
322
|
+
</div>
|
|
323
|
+
</div>
|
|
324
|
+
</div>
|
|
325
|
+
|
|
326
|
+
<div className="!space-y-4">
|
|
327
|
+
<h3 className="text-lg font-semibold !text-purple-300">
|
|
328
|
+
Code Example
|
|
329
|
+
</h3>
|
|
330
|
+
<div className="rounded-lg bg-black/40 p-4">
|
|
331
|
+
<pre className="overflow-x-auto text-sm !text-cyan-300">
|
|
332
|
+
{`// Small (16px)
|
|
333
|
+
<PhoneIcon className="size-4" />
|
|
334
|
+
|
|
335
|
+
// Medium (24px)
|
|
336
|
+
<PhoneIcon className="size-6" />
|
|
337
|
+
|
|
338
|
+
// Large (32px)
|
|
339
|
+
<PhoneIcon className="size-8" />
|
|
340
|
+
|
|
341
|
+
// Custom size
|
|
342
|
+
<PhoneIcon width={40} height={40} />`}
|
|
343
|
+
</pre>
|
|
344
|
+
</div>
|
|
345
|
+
</div>
|
|
346
|
+
</div>
|
|
347
|
+
</div>
|
|
348
|
+
</div>
|
|
349
|
+
</div>
|
|
350
|
+
|
|
351
|
+
{/* Color Variations */}
|
|
352
|
+
<div className="!space-y-8">
|
|
353
|
+
<h2 className="text-center text-3xl font-bold !text-white">
|
|
354
|
+
Color Variations
|
|
355
|
+
</h2>
|
|
356
|
+
<div className="grid grid-cols-1 gap-8 lg:grid-cols-2">
|
|
357
|
+
<div className="!space-y-4">
|
|
358
|
+
<h3 className="text-lg font-semibold !text-purple-300">
|
|
359
|
+
Semantic Colors
|
|
360
|
+
</h3>
|
|
361
|
+
<div className="!space-y-4 rounded-lg border border-white/10 bg-white/5 p-6">
|
|
362
|
+
<div className="flex items-center gap-4">
|
|
363
|
+
<PhoneIcon className="h-6 w-6" />
|
|
364
|
+
<div>
|
|
365
|
+
<div className="text-sm font-medium text-white">
|
|
366
|
+
Primary
|
|
367
|
+
</div>
|
|
368
|
+
<div className="text-xs text-white/60"></div>
|
|
369
|
+
</div>
|
|
370
|
+
</div>
|
|
371
|
+
<div className="flex items-center gap-4">
|
|
372
|
+
<PhoneIcon className="h-6 w-6 text-violet-400" />
|
|
373
|
+
<div>
|
|
374
|
+
<div className="text-sm font-medium text-white">
|
|
375
|
+
Secondary
|
|
376
|
+
</div>
|
|
377
|
+
<div className="text-xs text-white/60">
|
|
378
|
+
text-violet-400
|
|
379
|
+
</div>
|
|
380
|
+
</div>
|
|
381
|
+
</div>
|
|
382
|
+
<div className="flex items-center gap-4">
|
|
383
|
+
<PhoneIcon className="h-6 w-6 text-fuchsia-400" />
|
|
384
|
+
<div>
|
|
385
|
+
<div className="text-sm font-medium text-white">
|
|
386
|
+
Accent
|
|
387
|
+
</div>
|
|
388
|
+
<div className="text-xs text-white/60">
|
|
389
|
+
text-fuchsia-400
|
|
390
|
+
</div>
|
|
391
|
+
</div>
|
|
392
|
+
</div>
|
|
393
|
+
<div className="flex items-center gap-4">
|
|
394
|
+
<PhoneIcon className="h-6 w-6 text-white/40" />
|
|
395
|
+
<div>
|
|
396
|
+
<div className="text-sm font-medium text-white">
|
|
397
|
+
Disabled
|
|
398
|
+
</div>
|
|
399
|
+
<div className="text-xs text-white/60">
|
|
400
|
+
text-white/40
|
|
401
|
+
</div>
|
|
402
|
+
</div>
|
|
403
|
+
</div>
|
|
404
|
+
</div>
|
|
405
|
+
</div>
|
|
406
|
+
|
|
407
|
+
<div className="!space-y-4">
|
|
408
|
+
<h3 className="text-lg font-semibold !text-purple-300">
|
|
409
|
+
Custom Colors
|
|
410
|
+
</h3>
|
|
411
|
+
<div className="rounded-lg bg-black/40 p-4">
|
|
412
|
+
<pre className="overflow-x-auto text-sm !text-green-300">
|
|
413
|
+
{`// Using Tailwind classes
|
|
414
|
+
<PhoneIcon className="h-6 w-6" />
|
|
415
|
+
<PhoneIcon className="h-6 w-6 text-violet-500" />
|
|
416
|
+
|
|
417
|
+
// Using CSS custom properties
|
|
418
|
+
<PhoneIcon
|
|
419
|
+
className="h-6 w-6"
|
|
420
|
+
style={{ color: 'var(--color-primary)' }}
|
|
421
|
+
/>
|
|
422
|
+
|
|
423
|
+
// Direct stroke prop
|
|
424
|
+
<PhoneIcon
|
|
425
|
+
width={24}
|
|
426
|
+
height={24}
|
|
427
|
+
stroke="#a855f7"
|
|
428
|
+
/>`}
|
|
429
|
+
</pre>
|
|
430
|
+
</div>
|
|
431
|
+
</div>
|
|
432
|
+
</div>
|
|
433
|
+
</div>
|
|
434
|
+
|
|
435
|
+
{/* Usage Examples */}
|
|
436
|
+
<div className="!space-y-8">
|
|
437
|
+
<h2 className="text-center text-3xl font-bold !text-white">
|
|
438
|
+
Usage Examples
|
|
439
|
+
</h2>
|
|
440
|
+
|
|
441
|
+
<div className="grid grid-cols-1 gap-8 lg:grid-cols-2">
|
|
442
|
+
{/* Contact Card */}
|
|
443
|
+
<div className="!space-y-4">
|
|
444
|
+
<h3 className="text-lg font-semibold !text-purple-300">
|
|
445
|
+
Contact Card
|
|
446
|
+
</h3>
|
|
447
|
+
<div className="!space-y-4">
|
|
448
|
+
<div className="rounded-lg border border-white/10 bg-white/5 p-6">
|
|
449
|
+
<div className="mb-4 flex items-center gap-3">
|
|
450
|
+
<div className="h-12 w-12 rounded-full bg-gradient-to-br from-purple-500/20 to-violet-500/20" />
|
|
451
|
+
<div>
|
|
452
|
+
<div className="text-sm font-medium !text-white">
|
|
453
|
+
John Doe
|
|
454
|
+
</div>
|
|
455
|
+
<div className="text-xs !text-white/60">
|
|
456
|
+
+1 (555) 123-4567
|
|
457
|
+
</div>
|
|
458
|
+
</div>
|
|
459
|
+
</div>
|
|
460
|
+
<div className="flex items-center justify-center gap-4">
|
|
461
|
+
<button className="rounded-lg border border-purple-500/20 bg-purple-500/10 p-3 transition-colors hover:bg-purple-500/20">
|
|
462
|
+
<PhoneIcon className="h-6 w-6" />
|
|
463
|
+
</button>
|
|
464
|
+
</div>
|
|
465
|
+
</div>
|
|
466
|
+
<div className="rounded-lg bg-black/40 p-4">
|
|
467
|
+
<pre className="overflow-x-auto text-sm !text-green-300">
|
|
468
|
+
{`// Contact card with call button
|
|
469
|
+
<div className="contact-card">
|
|
470
|
+
<div className="contact-info">
|
|
471
|
+
<Avatar />
|
|
472
|
+
<div>
|
|
473
|
+
<h3>{name}</h3>
|
|
474
|
+
<p>{phoneNumber}</p>
|
|
475
|
+
</div>
|
|
476
|
+
</div>
|
|
477
|
+
<button
|
|
478
|
+
onClick={() => makeCall(phoneNumber)}
|
|
479
|
+
aria-label={\`Call \${name}\`}
|
|
480
|
+
>
|
|
481
|
+
<PhoneIcon className="h-6 w-6" />
|
|
482
|
+
</button>
|
|
483
|
+
</div>`}
|
|
484
|
+
</pre>
|
|
485
|
+
</div>
|
|
486
|
+
</div>
|
|
487
|
+
</div>
|
|
488
|
+
|
|
489
|
+
{/* Call History */}
|
|
490
|
+
<div className="!space-y-4">
|
|
491
|
+
<h3 className="text-lg font-semibold !text-purple-300">
|
|
492
|
+
Call History
|
|
493
|
+
</h3>
|
|
494
|
+
<div className="!space-y-4">
|
|
495
|
+
<div className="rounded-lg border border-white/10 bg-white/5 p-4">
|
|
496
|
+
<div className="!space-y-3">
|
|
497
|
+
<div className="flex items-center justify-between">
|
|
498
|
+
<div>
|
|
499
|
+
<div className="text-sm font-medium !text-white">
|
|
500
|
+
Jane Smith
|
|
501
|
+
</div>
|
|
502
|
+
<div className="text-xs !text-white/60">
|
|
503
|
+
Today, 2:30 PM
|
|
504
|
+
</div>
|
|
505
|
+
</div>
|
|
506
|
+
<button className="rounded-lg p-2 hover:bg-white/10">
|
|
507
|
+
<PhoneIcon className="h-5 w-5" />
|
|
508
|
+
</button>
|
|
509
|
+
</div>
|
|
510
|
+
<div className="flex items-center justify-between">
|
|
511
|
+
<div>
|
|
512
|
+
<div className="text-sm font-medium !text-white">
|
|
513
|
+
Bob Johnson
|
|
514
|
+
</div>
|
|
515
|
+
<div className="text-xs !text-white/60">
|
|
516
|
+
Yesterday, 4:15 PM
|
|
517
|
+
</div>
|
|
518
|
+
</div>
|
|
519
|
+
<button className="rounded-lg p-2 hover:bg-white/10">
|
|
520
|
+
<PhoneIcon className="h-5 w-5" />
|
|
521
|
+
</button>
|
|
522
|
+
</div>
|
|
523
|
+
</div>
|
|
524
|
+
</div>
|
|
525
|
+
<div className="rounded-lg bg-black/40 p-4">
|
|
526
|
+
<pre className="overflow-x-auto text-sm !text-green-300">
|
|
527
|
+
{`// Call history list
|
|
528
|
+
<div className="call-history">
|
|
529
|
+
{calls.map((call) => (
|
|
530
|
+
<div key={call.id} className="call-item">
|
|
531
|
+
<div>
|
|
532
|
+
<h4>{call.name}</h4>
|
|
533
|
+
<p>{call.timestamp}</p>
|
|
534
|
+
</div>
|
|
535
|
+
<button
|
|
536
|
+
onClick={() => redial(call.number)}
|
|
537
|
+
aria-label={\`Call \${call.name}\`}
|
|
538
|
+
>
|
|
539
|
+
<PhoneIcon className="h-5 w-5" />
|
|
540
|
+
</button>
|
|
541
|
+
</div>
|
|
542
|
+
))}
|
|
543
|
+
</div>`}
|
|
544
|
+
</pre>
|
|
545
|
+
</div>
|
|
546
|
+
</div>
|
|
547
|
+
</div>
|
|
548
|
+
|
|
549
|
+
{/* Quick Dial */}
|
|
550
|
+
<div className="!space-y-4">
|
|
551
|
+
<h3 className="text-lg font-semibold !text-purple-300">
|
|
552
|
+
Quick Dial
|
|
553
|
+
</h3>
|
|
554
|
+
<div className="!space-y-4">
|
|
555
|
+
<div className="rounded-lg border border-white/10 bg-white/5 p-4">
|
|
556
|
+
<div className="mb-4 text-center">
|
|
557
|
+
<div className="text-sm font-medium !text-white">
|
|
558
|
+
Emergency Contact
|
|
559
|
+
</div>
|
|
560
|
+
<div className="text-xs !text-white/60">
|
|
561
|
+
Press to call
|
|
562
|
+
</div>
|
|
563
|
+
</div>
|
|
564
|
+
<div className="flex items-center justify-center">
|
|
565
|
+
<button className="rounded-full border-2 border-purple-500/30 bg-purple-500/10 p-6 transition-colors hover:bg-purple-500/20">
|
|
566
|
+
<PhoneIcon className="h-10 w-10" />
|
|
567
|
+
</button>
|
|
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
|
+
{`// Quick dial button
|
|
573
|
+
<button
|
|
574
|
+
onClick={initiateCall}
|
|
575
|
+
className="quick-dial-button"
|
|
576
|
+
aria-label="Call emergency contact"
|
|
577
|
+
>
|
|
578
|
+
<PhoneIcon className="h-10 w-10" />
|
|
579
|
+
</button>`}
|
|
580
|
+
</pre>
|
|
581
|
+
</div>
|
|
582
|
+
</div>
|
|
583
|
+
</div>
|
|
584
|
+
|
|
585
|
+
{/* Phone Number Input */}
|
|
586
|
+
<div className="!space-y-4">
|
|
587
|
+
<h3 className="text-lg font-semibold !text-purple-300">
|
|
588
|
+
Phone Number Input
|
|
589
|
+
</h3>
|
|
590
|
+
<div className="!space-y-4">
|
|
591
|
+
<div className="rounded-lg border border-white/10 bg-white/5 p-4">
|
|
592
|
+
<div className="mb-4">
|
|
593
|
+
<label className="mb-2 block text-xs text-white/60">
|
|
594
|
+
Phone Number
|
|
595
|
+
</label>
|
|
596
|
+
<div className="flex items-center gap-2 rounded-lg border border-white/10 bg-black/20 px-3 py-2">
|
|
597
|
+
<PhoneIcon className="h-4 w-4" />
|
|
598
|
+
<input
|
|
599
|
+
type="tel"
|
|
600
|
+
placeholder="+1 (555) 123-4567"
|
|
601
|
+
className="flex-1 bg-transparent text-sm text-white placeholder:text-white/40"
|
|
602
|
+
/>
|
|
603
|
+
</div>
|
|
604
|
+
</div>
|
|
605
|
+
<button className="w-full rounded-lg border border-purple-500/20 bg-purple-500/10 px-4 py-2 text-sm transition-colors hover:bg-purple-500/20">
|
|
606
|
+
Call Now
|
|
607
|
+
</button>
|
|
608
|
+
</div>
|
|
609
|
+
<div className="rounded-lg bg-black/40 p-4">
|
|
610
|
+
<pre className="overflow-x-auto text-sm !text-green-300">
|
|
611
|
+
{`// Phone input with icon
|
|
612
|
+
<div className="phone-input">
|
|
613
|
+
<label>Phone Number</label>
|
|
614
|
+
<div className="input-wrapper">
|
|
615
|
+
<PhoneIcon className="h-4 w-4" />
|
|
616
|
+
<input
|
|
617
|
+
type="tel"
|
|
618
|
+
placeholder="Enter phone number"
|
|
619
|
+
value={phoneNumber}
|
|
620
|
+
onChange={(e) => setPhoneNumber(e.target.value)}
|
|
621
|
+
/>
|
|
622
|
+
</div>
|
|
623
|
+
<button onClick={handleCall}>
|
|
624
|
+
Call Now
|
|
625
|
+
</button>
|
|
626
|
+
</div>`}
|
|
627
|
+
</pre>
|
|
628
|
+
</div>
|
|
629
|
+
</div>
|
|
630
|
+
</div>
|
|
631
|
+
</div>
|
|
632
|
+
</div>
|
|
633
|
+
|
|
634
|
+
{/* Accessibility */}
|
|
635
|
+
<div className="!space-y-8">
|
|
636
|
+
<h2 className="text-center text-3xl font-bold !text-white">
|
|
637
|
+
Accessibility Features
|
|
638
|
+
</h2>
|
|
639
|
+
<div className="grid grid-cols-1 gap-8 md:grid-cols-2">
|
|
640
|
+
<div className="!space-y-4 rounded-lg border border-white/10 bg-white/5 p-6">
|
|
641
|
+
<h3 className="text-lg font-semibold !text-green-300">
|
|
642
|
+
✅ Built-in Features
|
|
643
|
+
</h3>
|
|
644
|
+
<ul className="!space-y-2 text-sm !text-white/70">
|
|
645
|
+
<li className="!text-white/70">
|
|
646
|
+
Uses Radix UI AccessibleIcon wrapper
|
|
647
|
+
</li>
|
|
648
|
+
<li className="!text-white/70">
|
|
649
|
+
Provides screen reader label "Phone icon"
|
|
650
|
+
</li>
|
|
651
|
+
<li className="!text-white/70">
|
|
652
|
+
Supports keyboard navigation when interactive
|
|
653
|
+
</li>
|
|
654
|
+
<li className="!text-white/70">
|
|
655
|
+
Maintains proper color contrast ratios
|
|
656
|
+
</li>
|
|
657
|
+
<li className="!text-white/70">
|
|
658
|
+
Scales with user's font size preferences
|
|
659
|
+
</li>
|
|
660
|
+
</ul>
|
|
661
|
+
</div>
|
|
662
|
+
|
|
663
|
+
<div className="!space-y-4 rounded-lg border border-white/10 bg-white/5 p-6">
|
|
664
|
+
<h3 className="text-lg font-semibold !text-purple-300">
|
|
665
|
+
💡 Best Practices
|
|
666
|
+
</h3>
|
|
667
|
+
<ul className="!space-y-2 text-sm text-white/70">
|
|
668
|
+
<li className="!text-white/70">
|
|
669
|
+
Always provide descriptive aria-labels for call buttons
|
|
670
|
+
</li>
|
|
671
|
+
<li className="!text-white/70">
|
|
672
|
+
Include phone number in accessible text when possible
|
|
673
|
+
</li>
|
|
674
|
+
<li className="!text-white/70">
|
|
675
|
+
Ensure sufficient touch target size (44px minimum)
|
|
676
|
+
</li>
|
|
677
|
+
<li className="!text-white/70">
|
|
678
|
+
Provide visible focus states for keyboard users
|
|
679
|
+
</li>
|
|
680
|
+
<li className="!text-white/70">
|
|
681
|
+
Consider voice control compatibility
|
|
682
|
+
</li>
|
|
683
|
+
</ul>
|
|
684
|
+
</div>
|
|
685
|
+
</div>
|
|
686
|
+
|
|
687
|
+
<div className="rounded-lg border border-white/10 bg-white/5 p-6">
|
|
688
|
+
<h3 className="mb-4 text-lg font-semibold !text-violet-300">
|
|
689
|
+
Proper ARIA Implementation
|
|
690
|
+
</h3>
|
|
691
|
+
<div className="grid grid-cols-1 gap-6 lg:grid-cols-2">
|
|
692
|
+
<div className="rounded-lg bg-black/40 p-4">
|
|
693
|
+
<pre className="overflow-x-auto text-sm !text-cyan-300">
|
|
694
|
+
{`// Call button with proper ARIA
|
|
695
|
+
<button
|
|
696
|
+
aria-label={\`Call \${contactName}\`}
|
|
697
|
+
className="p-2 hover:bg-white/10 rounded-lg"
|
|
698
|
+
onClick={() => makeCall(phoneNumber)}
|
|
699
|
+
>
|
|
700
|
+
<PhoneIcon className="h-6 w-6" />
|
|
701
|
+
</button>
|
|
702
|
+
|
|
703
|
+
// Phone number with context
|
|
704
|
+
<button
|
|
705
|
+
aria-label={\`Call \${name} at \${phoneNumber}\`}
|
|
706
|
+
onClick={initiateCall}
|
|
707
|
+
>
|
|
708
|
+
<PhoneIcon className="h-6 w-6" />
|
|
709
|
+
<span className="sr-only">{phoneNumber}</span>
|
|
710
|
+
</button>
|
|
711
|
+
|
|
712
|
+
// Emergency call with state
|
|
713
|
+
<button
|
|
714
|
+
aria-label="Call emergency services"
|
|
715
|
+
onClick={callEmergency}
|
|
716
|
+
aria-pressed={isCalling}
|
|
717
|
+
>
|
|
718
|
+
<PhoneIcon className="h-8 w-8" />
|
|
719
|
+
</button>`}
|
|
720
|
+
</pre>
|
|
721
|
+
</div>
|
|
722
|
+
<div className="!space-y-4">
|
|
723
|
+
<p className="text-sm !text-white/70">
|
|
724
|
+
When using PhoneIcon for interactive elements, always
|
|
725
|
+
provide clear context about who or what will be called,
|
|
726
|
+
and ensure the phone number is accessible to screen
|
|
727
|
+
readers.
|
|
728
|
+
</p>
|
|
729
|
+
<div className="rounded-lg border border-purple-500/20 bg-purple-500/10 p-4">
|
|
730
|
+
<div className="flex items-center gap-2 text-sm text-purple-200">
|
|
731
|
+
<PhoneIcon className="h-4 w-4" />
|
|
732
|
+
<span>
|
|
733
|
+
Screen readers need context about the call
|
|
734
|
+
destination
|
|
735
|
+
</span>
|
|
736
|
+
</div>
|
|
737
|
+
</div>
|
|
738
|
+
</div>
|
|
739
|
+
</div>
|
|
740
|
+
</div>
|
|
741
|
+
</div>
|
|
742
|
+
|
|
743
|
+
{/* Related Icons */}
|
|
744
|
+
<div className="!space-y-8">
|
|
745
|
+
<h2 className="text-center text-3xl font-bold !text-white">
|
|
746
|
+
Related Icons
|
|
747
|
+
</h2>
|
|
748
|
+
<div className="grid grid-cols-2 gap-6 md:grid-cols-4">
|
|
749
|
+
<div className="!space-y-3 rounded-lg border border-white/10 bg-white/5 p-4 text-center">
|
|
750
|
+
<div className="!mx-auto flex h-12 w-12 items-center justify-center rounded-lg bg-green-500/20">
|
|
751
|
+
<span className="!text-2xl !text-white">📧</span>
|
|
752
|
+
</div>
|
|
753
|
+
<div>
|
|
754
|
+
<div className="font-medium text-white">EmailIcon</div>
|
|
755
|
+
<div className="text-xs text-white/60">Send email</div>
|
|
756
|
+
</div>
|
|
757
|
+
</div>
|
|
758
|
+
<div className="!space-y-3 rounded-lg border border-white/10 bg-white/5 p-4 text-center">
|
|
759
|
+
<div className="!mx-auto flex h-12 w-12 items-center justify-center rounded-lg bg-blue-500/20">
|
|
760
|
+
<span className="!text-2xl !text-white">💬</span>
|
|
761
|
+
</div>
|
|
762
|
+
<div>
|
|
763
|
+
<div className="font-medium text-white">MessageIcon</div>
|
|
764
|
+
<div className="text-xs text-white/60">Send message</div>
|
|
765
|
+
</div>
|
|
766
|
+
</div>
|
|
767
|
+
<div className="!space-y-3 rounded-lg border border-white/10 bg-white/5 p-4 text-center">
|
|
768
|
+
<div className="!mx-auto flex h-12 w-12 items-center justify-center rounded-lg bg-purple-500/20">
|
|
769
|
+
<span className="!text-2xl !text-white">📱</span>
|
|
770
|
+
</div>
|
|
771
|
+
<div>
|
|
772
|
+
<div className="font-medium text-white">MobileIcon</div>
|
|
773
|
+
<div className="text-xs text-white/60">Mobile device</div>
|
|
774
|
+
</div>
|
|
775
|
+
</div>
|
|
776
|
+
<div className="!space-y-3 rounded-lg border border-white/10 bg-white/5 p-4 text-center">
|
|
777
|
+
<div className="!mx-auto flex h-12 w-12 items-center justify-center rounded-lg bg-orange-500/20">
|
|
778
|
+
<span className="!text-2xl !text-white">👤</span>
|
|
779
|
+
</div>
|
|
780
|
+
<div>
|
|
781
|
+
<div className="font-medium text-white">UserIcon</div>
|
|
782
|
+
<div className="text-xs text-white/60">
|
|
783
|
+
Contact profile
|
|
784
|
+
</div>
|
|
785
|
+
</div>
|
|
786
|
+
</div>
|
|
787
|
+
</div>
|
|
788
|
+
</div>
|
|
789
|
+
</div>
|
|
790
|
+
|
|
791
|
+
{/* Footer */}
|
|
792
|
+
<div className="border-t border-white/10 bg-black/20 backdrop-blur-xl">
|
|
793
|
+
<div className="!mx-auto max-w-7xl px-6 py-8">
|
|
794
|
+
<div className="!space-y-4 text-center">
|
|
795
|
+
<p className="!text-white/60">
|
|
796
|
+
PhoneIcon is part of the Aural UI icon library, built with
|
|
797
|
+
accessibility and communication best practices in mind.
|
|
798
|
+
</p>
|
|
799
|
+
<p className="text-sm !text-white/40">
|
|
800
|
+
All icons use Radix UI's AccessibleIcon for screen reader
|
|
801
|
+
compatibility and follow WCAG guidelines.
|
|
802
|
+
</p>
|
|
803
|
+
</div>
|
|
804
|
+
</div>
|
|
805
|
+
</div>
|
|
806
|
+
</div>
|
|
807
|
+
</>
|
|
808
|
+
),
|
|
809
|
+
},
|
|
810
|
+
},
|
|
811
|
+
tags: ["autodocs"],
|
|
812
|
+
argTypes: {
|
|
813
|
+
width: {
|
|
814
|
+
control: { type: "range", min: 8, max: 96, step: 2 },
|
|
815
|
+
description: "Width of the icon in pixels",
|
|
816
|
+
},
|
|
817
|
+
height: {
|
|
818
|
+
control: { type: "range", min: 8, max: 96, step: 2 },
|
|
819
|
+
description: "Height of the icon in pixels",
|
|
820
|
+
},
|
|
821
|
+
stroke: {
|
|
822
|
+
control: "color",
|
|
823
|
+
description: "Stroke color of the icon",
|
|
824
|
+
},
|
|
825
|
+
strokeWidth: {
|
|
826
|
+
control: { type: "range", min: 0.5, max: 4, step: 0.5 },
|
|
827
|
+
description: "Width of the stroke",
|
|
828
|
+
},
|
|
829
|
+
className: {
|
|
830
|
+
control: "text",
|
|
831
|
+
description: "CSS classes for styling (use for overrides)",
|
|
832
|
+
},
|
|
833
|
+
onClick: {
|
|
834
|
+
action: "clicked",
|
|
835
|
+
description: "Click handler for interactive use",
|
|
836
|
+
},
|
|
837
|
+
},
|
|
838
|
+
}
|
|
839
|
+
|
|
840
|
+
export default meta
|
|
841
|
+
type Story = StoryObj<typeof PhoneIcon>
|
|
842
|
+
|
|
843
|
+
// Story parameters for consistent dark theme
|
|
844
|
+
const storyParameters = {
|
|
845
|
+
backgrounds: {
|
|
846
|
+
default: "dark",
|
|
847
|
+
values: [
|
|
848
|
+
{ name: "dark", value: "#0a0a0a" },
|
|
849
|
+
{ name: "darker", value: "#000000" },
|
|
850
|
+
],
|
|
851
|
+
},
|
|
852
|
+
}
|
|
853
|
+
|
|
854
|
+
export const Default: Story = {
|
|
855
|
+
args: {
|
|
856
|
+
className: "h-8 w-8",
|
|
857
|
+
},
|
|
858
|
+
parameters: storyParameters,
|
|
859
|
+
render: (args) => (
|
|
860
|
+
<div className="flex h-32 min-h-dvh items-center justify-center rounded-lg bg-gradient-to-br from-gray-900 to-gray-800">
|
|
861
|
+
<PhoneIcon {...args} />
|
|
862
|
+
</div>
|
|
863
|
+
),
|
|
864
|
+
}
|
|
865
|
+
|
|
866
|
+
export const SizeVariations: Story = {
|
|
867
|
+
parameters: {
|
|
868
|
+
...storyParameters,
|
|
869
|
+
docs: {
|
|
870
|
+
description: {
|
|
871
|
+
story:
|
|
872
|
+
"PhoneIcon in different sizes, from small UI elements to large displays.",
|
|
873
|
+
},
|
|
874
|
+
},
|
|
875
|
+
},
|
|
876
|
+
render: () => (
|
|
877
|
+
<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">
|
|
878
|
+
<div className="text-center">
|
|
879
|
+
<PhoneIcon className="!mx-auto mb-2 h-3 w-3" />
|
|
880
|
+
<span className="text-xs text-white/60">12px</span>
|
|
881
|
+
</div>
|
|
882
|
+
<div className="text-center">
|
|
883
|
+
<PhoneIcon className="!mx-auto mb-2 h-4 w-4" />
|
|
884
|
+
<span className="text-xs text-white/60">16px</span>
|
|
885
|
+
</div>
|
|
886
|
+
<div className="text-center">
|
|
887
|
+
<PhoneIcon className="!mx-auto mb-2 h-5 w-5" />
|
|
888
|
+
<span className="text-xs text-white/60">20px</span>
|
|
889
|
+
</div>
|
|
890
|
+
<div className="text-center">
|
|
891
|
+
<PhoneIcon className="!mx-auto mb-2 h-6 w-6" />
|
|
892
|
+
<span className="text-xs text-white/60">24px</span>
|
|
893
|
+
</div>
|
|
894
|
+
<div className="text-center">
|
|
895
|
+
<PhoneIcon className="!mx-auto mb-2 h-8 w-8" />
|
|
896
|
+
<span className="text-xs text-white/60">32px</span>
|
|
897
|
+
</div>
|
|
898
|
+
<div className="text-center">
|
|
899
|
+
<PhoneIcon className="!mx-auto mb-2 h-12 w-12" />
|
|
900
|
+
<span className="text-xs text-white/60">48px</span>
|
|
901
|
+
</div>
|
|
902
|
+
</div>
|
|
903
|
+
),
|
|
904
|
+
}
|
|
905
|
+
|
|
906
|
+
export const ColorVariations: Story = {
|
|
907
|
+
parameters: {
|
|
908
|
+
...storyParameters,
|
|
909
|
+
docs: {
|
|
910
|
+
description: {
|
|
911
|
+
story: "PhoneIcon in different semantic colors for various use cases.",
|
|
912
|
+
},
|
|
913
|
+
},
|
|
914
|
+
},
|
|
915
|
+
render: () => (
|
|
916
|
+
<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">
|
|
917
|
+
<div className="text-center">
|
|
918
|
+
<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">
|
|
919
|
+
<PhoneIcon className="h-8 w-8" />
|
|
920
|
+
</div>
|
|
921
|
+
<div className="text-sm font-medium text-white">Primary</div>
|
|
922
|
+
<div className="text-xs">text-purple-400</div>
|
|
923
|
+
</div>
|
|
924
|
+
<div className="text-center">
|
|
925
|
+
<div className="!mx-auto mb-3 flex h-16 w-16 items-center justify-center rounded-lg border border-violet-500/30 bg-violet-500/20">
|
|
926
|
+
<PhoneIcon className="h-8 w-8 text-violet-400" />
|
|
927
|
+
</div>
|
|
928
|
+
<div className="text-sm font-medium text-white">Secondary</div>
|
|
929
|
+
<div className="text-xs text-violet-400">text-violet-400</div>
|
|
930
|
+
</div>
|
|
931
|
+
<div className="text-center">
|
|
932
|
+
<div className="!mx-auto mb-3 flex h-16 w-16 items-center justify-center rounded-lg border border-fuchsia-500/30 bg-fuchsia-500/20">
|
|
933
|
+
<PhoneIcon className="h-8 w-8 text-fuchsia-400" />
|
|
934
|
+
</div>
|
|
935
|
+
<div className="text-sm font-medium text-white">Accent</div>
|
|
936
|
+
<div className="text-xs text-fuchsia-400">text-fuchsia-400</div>
|
|
937
|
+
</div>
|
|
938
|
+
<div className="text-center">
|
|
939
|
+
<div className="!mx-auto mb-3 flex h-16 w-16 items-center justify-center rounded-lg border border-white/10 bg-white/5">
|
|
940
|
+
<PhoneIcon className="h-8 w-8 text-white/40" />
|
|
941
|
+
</div>
|
|
942
|
+
<div className="text-sm font-medium text-white">Disabled</div>
|
|
943
|
+
<div className="text-xs text-white/40">text-white/40</div>
|
|
944
|
+
</div>
|
|
945
|
+
</div>
|
|
946
|
+
),
|
|
947
|
+
}
|
|
948
|
+
|
|
949
|
+
export const UsageExamples: Story = {
|
|
950
|
+
parameters: {
|
|
951
|
+
...storyParameters,
|
|
952
|
+
docs: {
|
|
953
|
+
description: {
|
|
954
|
+
story:
|
|
955
|
+
"Real-world usage examples showing PhoneIcon in different communication contexts.",
|
|
956
|
+
},
|
|
957
|
+
},
|
|
958
|
+
},
|
|
959
|
+
render: () => (
|
|
960
|
+
<div className="min-h-dvh !space-y-8 rounded-lg bg-gradient-to-br from-gray-900 to-gray-800 p-8">
|
|
961
|
+
{/* Contact Card */}
|
|
962
|
+
<div className="!space-y-2">
|
|
963
|
+
<h3 className="text-sm font-medium text-white">Contact Card</h3>
|
|
964
|
+
<div className="rounded-lg border border-white/10 bg-white/5 p-6">
|
|
965
|
+
<div className="mb-4 flex items-center gap-3">
|
|
966
|
+
<div className="h-12 w-12 rounded-full bg-gradient-to-br from-purple-500/20 to-violet-500/20" />
|
|
967
|
+
<div>
|
|
968
|
+
<div className="text-sm font-medium text-white">John Doe</div>
|
|
969
|
+
<div className="text-xs text-white/60">+1 (555) 123-4567</div>
|
|
970
|
+
</div>
|
|
971
|
+
</div>
|
|
972
|
+
<div className="flex items-center justify-center gap-4">
|
|
973
|
+
<button className="rounded-lg border border-purple-500/20 bg-purple-500/10 p-3 transition-colors hover:bg-purple-500/20">
|
|
974
|
+
<PhoneIcon className="h-6 w-6" />
|
|
975
|
+
</button>
|
|
976
|
+
</div>
|
|
977
|
+
</div>
|
|
978
|
+
</div>
|
|
979
|
+
|
|
980
|
+
{/* Call History */}
|
|
981
|
+
<div className="!space-y-2">
|
|
982
|
+
<h3 className="text-sm font-medium text-white">Call History</h3>
|
|
983
|
+
<div className="rounded-lg border border-white/10 bg-white/5 p-4">
|
|
984
|
+
<div className="!space-y-3">
|
|
985
|
+
<div className="flex items-center justify-between">
|
|
986
|
+
<div>
|
|
987
|
+
<div className="text-sm font-medium text-white">Jane Smith</div>
|
|
988
|
+
<div className="text-xs text-white/60">Today, 2:30 PM</div>
|
|
989
|
+
</div>
|
|
990
|
+
<button className="rounded-lg p-2 hover:bg-white/10">
|
|
991
|
+
<PhoneIcon className="h-5 w-5" />
|
|
992
|
+
</button>
|
|
993
|
+
</div>
|
|
994
|
+
<div className="flex items-center justify-between">
|
|
995
|
+
<div>
|
|
996
|
+
<div className="text-sm font-medium text-white">
|
|
997
|
+
Bob Johnson
|
|
998
|
+
</div>
|
|
999
|
+
<div className="text-xs text-white/60">Yesterday, 4:15 PM</div>
|
|
1000
|
+
</div>
|
|
1001
|
+
<button className="rounded-lg p-2 hover:bg-white/10">
|
|
1002
|
+
<PhoneIcon className="h-5 w-5" />
|
|
1003
|
+
</button>
|
|
1004
|
+
</div>
|
|
1005
|
+
</div>
|
|
1006
|
+
</div>
|
|
1007
|
+
</div>
|
|
1008
|
+
</div>
|
|
1009
|
+
),
|
|
1010
|
+
}
|
|
1011
|
+
|
|
1012
|
+
export const Playground: Story = {
|
|
1013
|
+
parameters: {
|
|
1014
|
+
...storyParameters,
|
|
1015
|
+
docs: {
|
|
1016
|
+
description: {
|
|
1017
|
+
story:
|
|
1018
|
+
"Interactive playground to experiment with different PhoneIcon configurations.",
|
|
1019
|
+
},
|
|
1020
|
+
},
|
|
1021
|
+
},
|
|
1022
|
+
args: {
|
|
1023
|
+
width: 24,
|
|
1024
|
+
height: 24,
|
|
1025
|
+
className: "text-purple-400",
|
|
1026
|
+
},
|
|
1027
|
+
render: (args) => (
|
|
1028
|
+
<div className="flex h-64 min-h-dvh items-center justify-center rounded-lg bg-gradient-to-br from-gray-900 to-gray-800">
|
|
1029
|
+
<div className="rounded-lg border border-white/10 bg-white/5 p-8">
|
|
1030
|
+
<PhoneIcon {...args} />
|
|
1031
|
+
</div>
|
|
1032
|
+
</div>
|
|
1033
|
+
),
|
|
1034
|
+
}
|