aural-ui 2.1.16 → 2.1.18
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/icons/column-wide-add-icon/ColumnWideAddIcon.stories.tsx +968 -0
- package/dist/icons/column-wide-add-icon/index.tsx +38 -0
- package/dist/icons/column-wide-add-icon/meta.ts +8 -0
- package/dist/icons/index.ts +2 -0
- package/dist/icons/pocket-studio-icon/PocketStudioIcon.stories.tsx +892 -0
- package/dist/icons/pocket-studio-icon/index.tsx +51 -0
- package/dist/icons/pocket-studio-icon/meta.ts +8 -0
- package/dist/index.cjs +1 -1
- package/dist/index.js +1 -1
- package/package.json +1 -1
|
@@ -0,0 +1,968 @@
|
|
|
1
|
+
import React from "react"
|
|
2
|
+
import type { Meta, StoryObj } from "@storybook/react-vite"
|
|
3
|
+
|
|
4
|
+
import { ColumnWideAddIcon } from "."
|
|
5
|
+
|
|
6
|
+
const meta: Meta<typeof ColumnWideAddIcon> = {
|
|
7
|
+
title: "Icons/ColumnWideAddIcon",
|
|
8
|
+
component: ColumnWideAddIcon,
|
|
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 !important;
|
|
27
|
+
max-width: none !important;
|
|
28
|
+
background: transparent !important;
|
|
29
|
+
}
|
|
30
|
+
.sbdocs-content {
|
|
31
|
+
max-width: none !important;
|
|
32
|
+
padding: 0 !important;
|
|
33
|
+
margin: 0 !important;
|
|
34
|
+
background: transparent !important;
|
|
35
|
+
}
|
|
36
|
+
.docs-story {
|
|
37
|
+
background: transparent !important;
|
|
38
|
+
}
|
|
39
|
+
.sbdocs {
|
|
40
|
+
background: transparent !important;
|
|
41
|
+
}
|
|
42
|
+
body {
|
|
43
|
+
background: #0a0a0a !important;
|
|
44
|
+
}
|
|
45
|
+
#storybook-docs {
|
|
46
|
+
background: #0a0a0a !important;
|
|
47
|
+
}
|
|
48
|
+
.sbdocs-preview {
|
|
49
|
+
background: transparent !important;
|
|
50
|
+
border: none !important;
|
|
51
|
+
}
|
|
52
|
+
.sbdocs-h1, .sbdocs-h2, .sbdocs-h3, .sbdocs-h4, .sbdocs-h5, .sbdocs-h6 {
|
|
53
|
+
color: white !important;
|
|
54
|
+
}
|
|
55
|
+
.sbdocs-p, .sbdocs-li {
|
|
56
|
+
color: rgba(255, 255, 255, 0.7) !important;
|
|
57
|
+
}
|
|
58
|
+
.sbdocs-code {
|
|
59
|
+
background: rgba(255, 255, 255, 0.1) !important;
|
|
60
|
+
color: rgba(168, 85, 247, 1) !important;
|
|
61
|
+
border: 1px solid rgba(255, 255, 255, 0.1) !important;
|
|
62
|
+
}
|
|
63
|
+
.sbdocs-pre {
|
|
64
|
+
background: rgba(0, 0, 0, 0.4) !important;
|
|
65
|
+
border: 1px solid rgba(255, 255, 255, 0.1) !important;
|
|
66
|
+
}
|
|
67
|
+
.sbdocs-table {
|
|
68
|
+
background: rgba(255, 255, 255, 0.05) !important;
|
|
69
|
+
border: 1px solid rgba(255, 255, 255, 0.1) !important;
|
|
70
|
+
}
|
|
71
|
+
.sbdocs-table th {
|
|
72
|
+
background: rgba(255, 255, 255, 0.05) !important;
|
|
73
|
+
color: white !important;
|
|
74
|
+
border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
|
|
75
|
+
}
|
|
76
|
+
.sbdocs-table td {
|
|
77
|
+
color: rgba(255, 255, 255, 0.7) !important;
|
|
78
|
+
border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
|
|
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-cyan-500/20">
|
|
90
|
+
<ColumnWideAddIcon className="h-12 w-12 text-blue-400" />
|
|
91
|
+
</div>
|
|
92
|
+
<h1 className="!text-fm-primary text-5xl font-bold">
|
|
93
|
+
ColumnWideAddIcon
|
|
94
|
+
</h1>
|
|
95
|
+
<p className="!mx-auto max-w-3xl text-xl leading-relaxed !text-white/70">
|
|
96
|
+
A column-wide add icon for representing column addition
|
|
97
|
+
actions, layout expansion, and content insertion. Perfect
|
|
98
|
+
for table controls, layout management, and UI configuration
|
|
99
|
+
panels. Built with accessibility in mind using Radix UI's
|
|
100
|
+
AccessibleIcon wrapper.
|
|
101
|
+
</p>
|
|
102
|
+
|
|
103
|
+
{/* Stats */}
|
|
104
|
+
<div className="flex items-center justify-center gap-8 pt-8">
|
|
105
|
+
<div className="text-center">
|
|
106
|
+
<div className="text-3xl font-bold text-blue-300">
|
|
107
|
+
Add
|
|
108
|
+
</div>
|
|
109
|
+
<div className="text-sm text-white/60">
|
|
110
|
+
Column insertion
|
|
111
|
+
</div>
|
|
112
|
+
</div>
|
|
113
|
+
<div className="h-8 w-px bg-white/20" />
|
|
114
|
+
<div className="text-center">
|
|
115
|
+
<div className="text-3xl font-bold text-cyan-300">
|
|
116
|
+
Expand
|
|
117
|
+
</div>
|
|
118
|
+
<div className="text-sm text-white/60">Layout growth</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 { ColumnWideAddIcon } from "@icons/column-wide-add-icon"
|
|
149
|
+
|
|
150
|
+
function TableToolbar() {
|
|
151
|
+
return (
|
|
152
|
+
<button className="flex items-center gap-2">
|
|
153
|
+
<ColumnWideAddIcon className="h-5 w-5 text-blue-500" />
|
|
154
|
+
<span>Add Column</span>
|
|
155
|
+
</button>
|
|
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
|
+
<button className="flex items-center gap-3 rounded-lg border border-blue-500/20 bg-blue-500/10 px-4 py-2 transition-colors hover:bg-blue-500/20">
|
|
168
|
+
<ColumnWideAddIcon className="h-5 w-5 text-blue-400" />
|
|
169
|
+
<span className="text-white">Add Column</span>
|
|
170
|
+
</button>
|
|
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
|
+
{" "}
|
|
205
|
+
<tr className="!bg-black/10">
|
|
206
|
+
<td className="px-6 py-4 font-mono text-sm !text-blue-300">
|
|
207
|
+
withAccessibility
|
|
208
|
+
</td>
|
|
209
|
+
<td className="px-6 py-4 text-sm !text-white/70">
|
|
210
|
+
boolean
|
|
211
|
+
</td>
|
|
212
|
+
<td className="px-6 py-4 text-sm !text-white/50">
|
|
213
|
+
true
|
|
214
|
+
</td>
|
|
215
|
+
<td className="px-6 py-4 text-sm !text-white/70">
|
|
216
|
+
Whether to wrap the icon with accessibility feature
|
|
217
|
+
</td>
|
|
218
|
+
</tr>
|
|
219
|
+
<tr className="border-b border-white/5 !bg-black/10">
|
|
220
|
+
<td className="px-6 py-4 font-mono text-sm !text-blue-300">
|
|
221
|
+
height
|
|
222
|
+
</td>
|
|
223
|
+
<td className="px-6 py-4 text-sm !text-white/70">
|
|
224
|
+
number | string
|
|
225
|
+
</td>
|
|
226
|
+
<td className="px-6 py-4 text-sm !text-white/50">56</td>
|
|
227
|
+
<td className="px-6 py-4 text-sm !text-white/70">
|
|
228
|
+
Height of the icon in pixels
|
|
229
|
+
</td>
|
|
230
|
+
</tr>
|
|
231
|
+
<tr className="border-b border-white/5">
|
|
232
|
+
<td className="px-6 py-4 font-mono text-sm !text-blue-300">
|
|
233
|
+
fill
|
|
234
|
+
</td>
|
|
235
|
+
<td className="px-6 py-4 text-sm !text-white/70">
|
|
236
|
+
string
|
|
237
|
+
</td>
|
|
238
|
+
<td className="px-6 py-4 text-sm !text-white/50">
|
|
239
|
+
currentColor
|
|
240
|
+
</td>
|
|
241
|
+
<td className="px-6 py-4 text-sm !text-white/70">
|
|
242
|
+
Fill color of the icon
|
|
243
|
+
</td>
|
|
244
|
+
</tr>
|
|
245
|
+
<tr className="border-b border-white/5 !bg-black/10">
|
|
246
|
+
<td className="px-6 py-4 font-mono text-sm !text-blue-300">
|
|
247
|
+
className
|
|
248
|
+
</td>
|
|
249
|
+
<td className="px-6 py-4 text-sm !text-white/70">
|
|
250
|
+
string
|
|
251
|
+
</td>
|
|
252
|
+
<td className="px-6 py-4 text-sm !text-white/50">-</td>
|
|
253
|
+
<td className="px-6 py-4 text-sm !text-white/70">
|
|
254
|
+
CSS classes for styling
|
|
255
|
+
</td>
|
|
256
|
+
</tr>
|
|
257
|
+
<tr className="!bg-black/10">
|
|
258
|
+
<td className="px-6 py-4 font-mono text-sm !text-blue-300">
|
|
259
|
+
...svgProps
|
|
260
|
+
</td>
|
|
261
|
+
<td className="px-6 py-4 text-sm !text-white/70">
|
|
262
|
+
SVGProps
|
|
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
|
+
All standard SVG element props
|
|
267
|
+
</td>
|
|
268
|
+
</tr>
|
|
269
|
+
</tbody>
|
|
270
|
+
</table>
|
|
271
|
+
</div>
|
|
272
|
+
</div>
|
|
273
|
+
|
|
274
|
+
{/* Size Variations */}
|
|
275
|
+
<div className="!space-y-8">
|
|
276
|
+
<h2 className="text-center text-3xl font-bold !text-white">
|
|
277
|
+
Size Variations
|
|
278
|
+
</h2>
|
|
279
|
+
<div className="rounded-lg border border-white/10 bg-white/5 p-8">
|
|
280
|
+
<div className="!space-y-6">
|
|
281
|
+
<div className="grid grid-cols-1 gap-8 md:grid-cols-2">
|
|
282
|
+
<div className="!space-y-4">
|
|
283
|
+
<h3 className="text-lg font-semibold !text-blue-300">
|
|
284
|
+
Standard Sizes
|
|
285
|
+
</h3>
|
|
286
|
+
<div className="flex items-end gap-6 rounded-lg bg-black/20 p-6">
|
|
287
|
+
<div className="text-center">
|
|
288
|
+
<ColumnWideAddIcon className="!mx-auto mb-2 h-6 w-6 text-blue-400" />
|
|
289
|
+
<span className="text-xs text-white/60">24px</span>
|
|
290
|
+
</div>
|
|
291
|
+
<div className="text-center">
|
|
292
|
+
<ColumnWideAddIcon className="!mx-auto mb-2 h-8 w-8 text-blue-400" />
|
|
293
|
+
<span className="text-xs text-white/60">32px</span>
|
|
294
|
+
</div>
|
|
295
|
+
<div className="text-center">
|
|
296
|
+
<ColumnWideAddIcon className="!mx-auto mb-2 h-12 w-12 text-blue-400" />
|
|
297
|
+
<span className="text-xs text-white/60">48px</span>
|
|
298
|
+
</div>
|
|
299
|
+
<div className="text-center">
|
|
300
|
+
<ColumnWideAddIcon className="!mx-auto mb-2 h-14 w-14 text-blue-400" />
|
|
301
|
+
<span className="text-xs text-white/60">56px</span>
|
|
302
|
+
</div>
|
|
303
|
+
</div>
|
|
304
|
+
</div>
|
|
305
|
+
|
|
306
|
+
<div className="!space-y-4">
|
|
307
|
+
<h3 className="text-lg font-semibold !text-blue-300">
|
|
308
|
+
Code Example
|
|
309
|
+
</h3>
|
|
310
|
+
<div className="rounded-lg bg-black/40 p-4">
|
|
311
|
+
<pre className="overflow-x-auto text-sm !text-cyan-300">
|
|
312
|
+
{`// Small (24px)
|
|
313
|
+
<ColumnWideAddIcon className="h-6 w-6" />
|
|
314
|
+
|
|
315
|
+
// Medium (48px)
|
|
316
|
+
<ColumnWideAddIcon className="h-12 w-12" />
|
|
317
|
+
|
|
318
|
+
// Large (56px)
|
|
319
|
+
<ColumnWideAddIcon className="h-14 w-14" />
|
|
320
|
+
|
|
321
|
+
// Custom size
|
|
322
|
+
<ColumnWideAddIcon width={40} height={40} />`}
|
|
323
|
+
</pre>
|
|
324
|
+
</div>
|
|
325
|
+
</div>
|
|
326
|
+
</div>
|
|
327
|
+
</div>
|
|
328
|
+
</div>
|
|
329
|
+
</div>
|
|
330
|
+
|
|
331
|
+
{/* Color Variations */}
|
|
332
|
+
<div className="!space-y-8">
|
|
333
|
+
<h2 className="text-center text-3xl font-bold !text-white">
|
|
334
|
+
Color Variations
|
|
335
|
+
</h2>
|
|
336
|
+
<div className="grid grid-cols-1 gap-8 lg:grid-cols-2">
|
|
337
|
+
<div className="!space-y-4">
|
|
338
|
+
<h3 className="text-lg font-semibold !text-blue-300">
|
|
339
|
+
Semantic Colors
|
|
340
|
+
</h3>
|
|
341
|
+
<div className="space-y-4! rounded-lg border border-white/10 bg-white/5 p-6">
|
|
342
|
+
<div className="flex items-center gap-4">
|
|
343
|
+
<ColumnWideAddIcon className="h-6 w-6 text-blue-400" />
|
|
344
|
+
<div>
|
|
345
|
+
<div className="text-sm font-medium text-white">
|
|
346
|
+
Primary
|
|
347
|
+
</div>
|
|
348
|
+
<div className="text-xs text-white/60">
|
|
349
|
+
text-blue-400
|
|
350
|
+
</div>
|
|
351
|
+
</div>
|
|
352
|
+
</div>
|
|
353
|
+
<div className="flex items-center gap-4">
|
|
354
|
+
<ColumnWideAddIcon className="h-6 w-6 text-gray-400" />
|
|
355
|
+
<div>
|
|
356
|
+
<div className="text-sm font-medium text-white">
|
|
357
|
+
Secondary
|
|
358
|
+
</div>
|
|
359
|
+
<div className="text-xs text-white/60">
|
|
360
|
+
text-gray-400
|
|
361
|
+
</div>
|
|
362
|
+
</div>
|
|
363
|
+
</div>
|
|
364
|
+
<div className="flex items-center gap-4">
|
|
365
|
+
<ColumnWideAddIcon className="h-6 w-6 text-purple-400" />
|
|
366
|
+
<div>
|
|
367
|
+
<div className="text-sm font-medium text-white">
|
|
368
|
+
Accent
|
|
369
|
+
</div>
|
|
370
|
+
<div className="text-xs text-white/60">
|
|
371
|
+
text-purple-400
|
|
372
|
+
</div>
|
|
373
|
+
</div>
|
|
374
|
+
</div>
|
|
375
|
+
<div className="flex items-center gap-4">
|
|
376
|
+
<ColumnWideAddIcon className="h-6 w-6 text-emerald-400" />
|
|
377
|
+
<div>
|
|
378
|
+
<div className="text-sm font-medium text-white">
|
|
379
|
+
Success
|
|
380
|
+
</div>
|
|
381
|
+
<div className="text-xs text-white/60">
|
|
382
|
+
text-emerald-400
|
|
383
|
+
</div>
|
|
384
|
+
</div>
|
|
385
|
+
</div>
|
|
386
|
+
</div>
|
|
387
|
+
</div>
|
|
388
|
+
|
|
389
|
+
<div className="!space-y-4">
|
|
390
|
+
<h3 className="text-lg font-semibold !text-blue-300">
|
|
391
|
+
Custom Colors
|
|
392
|
+
</h3>
|
|
393
|
+
<div className="rounded-lg bg-black/40 p-4">
|
|
394
|
+
<pre className="overflow-x-auto text-sm !text-green-300">
|
|
395
|
+
{`// Using Tailwind classes
|
|
396
|
+
<ColumnWideAddIcon className="h-6 w-6 text-blue-400" />
|
|
397
|
+
<ColumnWideAddIcon className="h-6 w-6 text-purple-500" />
|
|
398
|
+
|
|
399
|
+
// Using CSS custom properties
|
|
400
|
+
<ColumnWideAddIcon
|
|
401
|
+
className="h-6 w-6"
|
|
402
|
+
style={{ color: 'var(--color-primary)' }}
|
|
403
|
+
/>
|
|
404
|
+
|
|
405
|
+
// Direct fill prop
|
|
406
|
+
<ColumnWideAddIcon
|
|
407
|
+
width={56}
|
|
408
|
+
height={56}
|
|
409
|
+
fill="#3b82f6"
|
|
410
|
+
/>`}
|
|
411
|
+
</pre>
|
|
412
|
+
</div>
|
|
413
|
+
</div>
|
|
414
|
+
</div>
|
|
415
|
+
</div>
|
|
416
|
+
|
|
417
|
+
{/* Usage Examples */}
|
|
418
|
+
<div className="space-y-8!">
|
|
419
|
+
<h2 className="text-center text-3xl font-bold text-white!">
|
|
420
|
+
Usage Examples
|
|
421
|
+
</h2>
|
|
422
|
+
|
|
423
|
+
<div className="grid grid-cols-1 gap-8 lg:grid-cols-2">
|
|
424
|
+
{/* Table Toolbar */}
|
|
425
|
+
<div className="!space-y-4">
|
|
426
|
+
<h3 className="text-lg font-semibold !text-blue-300">
|
|
427
|
+
Table Toolbar
|
|
428
|
+
</h3>
|
|
429
|
+
<div className="!space-y-4">
|
|
430
|
+
<div className="flex items-center gap-2 rounded-lg border border-white/10 bg-white/5 p-4">
|
|
431
|
+
<button className="flex items-center gap-2 rounded border border-blue-500/30 bg-blue-500/20 px-3 py-1.5 text-blue-200">
|
|
432
|
+
<ColumnWideAddIcon className="h-4 w-4" />
|
|
433
|
+
<span className="text-sm">Add Column</span>
|
|
434
|
+
</button>
|
|
435
|
+
<button className="flex items-center gap-2 rounded border border-white/20 bg-white/5 px-3 py-1.5 text-white/60 hover:bg-white/10">
|
|
436
|
+
<span className="text-sm">Delete</span>
|
|
437
|
+
</button>
|
|
438
|
+
</div>
|
|
439
|
+
<div className="rounded-lg bg-black/40 p-4">
|
|
440
|
+
<pre className="overflow-x-auto text-sm !text-green-300">
|
|
441
|
+
{`// Table toolbar with add column button
|
|
442
|
+
<button className="flex items-center gap-2 bg-blue-500/20 border border-blue-500/30 px-3 py-1.5 rounded text-blue-200">
|
|
443
|
+
<ColumnWideAddIcon className="h-4 w-4" />
|
|
444
|
+
<span className="text-sm">Add Column</span>
|
|
445
|
+
</button>`}
|
|
446
|
+
</pre>
|
|
447
|
+
</div>
|
|
448
|
+
</div>
|
|
449
|
+
</div>
|
|
450
|
+
|
|
451
|
+
{/* Spreadsheet Controls */}
|
|
452
|
+
<div className="!space-y-4">
|
|
453
|
+
<h3 className="text-lg font-semibold !text-blue-300">
|
|
454
|
+
Spreadsheet Controls
|
|
455
|
+
</h3>
|
|
456
|
+
<div className="!space-y-4">
|
|
457
|
+
<div className="rounded-lg border border-white/10 bg-white/5 p-4">
|
|
458
|
+
<div className="mb-3 flex items-center justify-between">
|
|
459
|
+
<h4 className="font-medium !text-white">Columns</h4>
|
|
460
|
+
<button className="rounded p-1.5 text-white/60 hover:bg-white/10 hover:text-blue-400">
|
|
461
|
+
<ColumnWideAddIcon className="h-4 w-4" />
|
|
462
|
+
</button>
|
|
463
|
+
</div>
|
|
464
|
+
<div className="!space-y-2">
|
|
465
|
+
<div className="flex items-center gap-2 rounded px-2 py-1 text-white/60">
|
|
466
|
+
<span className="text-xs">A</span>
|
|
467
|
+
<span className="text-sm">Name</span>
|
|
468
|
+
</div>
|
|
469
|
+
<div className="flex items-center gap-2 rounded px-2 py-1 text-white/60">
|
|
470
|
+
<span className="text-xs">B</span>
|
|
471
|
+
<span className="text-sm">Email</span>
|
|
472
|
+
</div>
|
|
473
|
+
</div>
|
|
474
|
+
</div>
|
|
475
|
+
<div className="rounded-lg bg-black/40 p-4">
|
|
476
|
+
<pre className="overflow-x-auto text-sm !text-green-300">
|
|
477
|
+
{`// Column header with add button
|
|
478
|
+
<div className="flex items-center justify-between">
|
|
479
|
+
<h4 className="font-medium text-white">Columns</h4>
|
|
480
|
+
<button className="p-1.5 rounded text-white/60 hover:bg-white/10 hover:text-blue-400">
|
|
481
|
+
<ColumnWideAddIcon className="h-4 w-4" />
|
|
482
|
+
</button>
|
|
483
|
+
</div>`}
|
|
484
|
+
</pre>
|
|
485
|
+
</div>
|
|
486
|
+
</div>
|
|
487
|
+
</div>
|
|
488
|
+
|
|
489
|
+
{/* Layout Configuration */}
|
|
490
|
+
<div className="!space-y-4">
|
|
491
|
+
<h3 className="text-lg font-semibold !text-blue-300">
|
|
492
|
+
Layout Configuration
|
|
493
|
+
</h3>
|
|
494
|
+
<div className="!space-y-4">
|
|
495
|
+
<div className="flex items-center justify-between rounded-lg border border-white/10 bg-white/5 p-4">
|
|
496
|
+
<h4 className="font-medium !text-white">Grid Layout</h4>
|
|
497
|
+
<div className="flex items-center gap-1">
|
|
498
|
+
<button className="rounded bg-blue-500/20 p-1.5 text-blue-400">
|
|
499
|
+
<ColumnWideAddIcon className="h-4 w-4" />
|
|
500
|
+
</button>
|
|
501
|
+
<button className="rounded p-1.5 text-white/60 hover:bg-white/10">
|
|
502
|
+
<span className="text-xs">Remove</span>
|
|
503
|
+
</button>
|
|
504
|
+
</div>
|
|
505
|
+
</div>
|
|
506
|
+
<div className="rounded-lg bg-black/40 p-4">
|
|
507
|
+
<pre className="overflow-x-auto text-sm !text-green-300">
|
|
508
|
+
{`// Layout configuration panel
|
|
509
|
+
<div className="flex items-center justify-between">
|
|
510
|
+
<h4 className="font-medium text-white">Grid Layout</h4>
|
|
511
|
+
<div className="flex items-center gap-1">
|
|
512
|
+
<button className="p-1.5 rounded bg-blue-500/20 text-blue-400">
|
|
513
|
+
<ColumnWideAddIcon className="h-4 w-4" />
|
|
514
|
+
</button>
|
|
515
|
+
</div>
|
|
516
|
+
</div>`}
|
|
517
|
+
</pre>
|
|
518
|
+
</div>
|
|
519
|
+
</div>
|
|
520
|
+
</div>
|
|
521
|
+
|
|
522
|
+
{/* Data Table Header */}
|
|
523
|
+
<div className="!space-y-4">
|
|
524
|
+
<h3 className="text-lg font-semibold !text-blue-300">
|
|
525
|
+
Data Table Header
|
|
526
|
+
</h3>
|
|
527
|
+
<div className="!space-y-4">
|
|
528
|
+
<div className="rounded-lg border border-white/10 bg-white/5 p-4">
|
|
529
|
+
<div className="mb-3 flex items-center justify-between border-b border-white/10 pb-3">
|
|
530
|
+
<h4 className="font-medium !text-white">
|
|
531
|
+
Data Table
|
|
532
|
+
</h4>
|
|
533
|
+
<button className="flex items-center gap-2 rounded border border-blue-500/30 bg-blue-500/20 px-2 py-1 text-blue-200">
|
|
534
|
+
<ColumnWideAddIcon className="h-3 w-3" />
|
|
535
|
+
<span className="text-xs">New Column</span>
|
|
536
|
+
</button>
|
|
537
|
+
</div>
|
|
538
|
+
<div className="grid grid-cols-3 gap-2 text-xs text-white/60">
|
|
539
|
+
<div>Column 1</div>
|
|
540
|
+
<div>Column 2</div>
|
|
541
|
+
<div>Column 3</div>
|
|
542
|
+
</div>
|
|
543
|
+
</div>
|
|
544
|
+
<div className="rounded-lg bg-black/40 p-4">
|
|
545
|
+
<pre className="overflow-x-auto text-sm !text-green-300">
|
|
546
|
+
{`// Table header with add column
|
|
547
|
+
<div className="flex items-center justify-between border-b pb-3 mb-3">
|
|
548
|
+
<h4 className="font-medium text-white">Data Table</h4>
|
|
549
|
+
<button className="flex items-center gap-2 bg-blue-500/20 border border-blue-500/30 px-2 py-1 rounded text-blue-200">
|
|
550
|
+
<ColumnWideAddIcon className="h-3 w-3" />
|
|
551
|
+
<span className="text-xs">New Column</span>
|
|
552
|
+
</button>
|
|
553
|
+
</div>`}
|
|
554
|
+
</pre>
|
|
555
|
+
</div>
|
|
556
|
+
</div>
|
|
557
|
+
</div>
|
|
558
|
+
</div>
|
|
559
|
+
</div>
|
|
560
|
+
|
|
561
|
+
{/* Accessibility */}
|
|
562
|
+
<div className="!space-y-8">
|
|
563
|
+
<h2 className="text-center text-3xl font-bold !text-white">
|
|
564
|
+
Accessibility Features
|
|
565
|
+
</h2>
|
|
566
|
+
<div className="grid grid-cols-1 gap-8 md:grid-cols-2">
|
|
567
|
+
<div className="!space-y-4 rounded-lg border border-white/10 bg-white/5 p-6">
|
|
568
|
+
<h3 className="text-lg font-semibold !text-green-300">
|
|
569
|
+
✅ Built-in Features
|
|
570
|
+
</h3>
|
|
571
|
+
<ul className="!space-y-2 text-sm !text-white/70">
|
|
572
|
+
<li className="!text-white/70">
|
|
573
|
+
Uses Radix UI AccessibleIcon wrapper
|
|
574
|
+
</li>
|
|
575
|
+
<li className="!text-white/70">
|
|
576
|
+
Provides screen reader label "Column Wide Add Icon"
|
|
577
|
+
</li>
|
|
578
|
+
<li className="!text-white/70">
|
|
579
|
+
Supports keyboard navigation when interactive
|
|
580
|
+
</li>
|
|
581
|
+
<li className="!text-white/70">
|
|
582
|
+
Maintains proper color contrast ratios
|
|
583
|
+
</li>
|
|
584
|
+
<li className="!text-white/70">
|
|
585
|
+
Scales with user's font size preferences
|
|
586
|
+
</li>
|
|
587
|
+
</ul>
|
|
588
|
+
</div>
|
|
589
|
+
|
|
590
|
+
<div className="!space-y-4 rounded-lg border border-white/10 bg-white/5 p-6">
|
|
591
|
+
<h3 className="text-lg font-semibold !text-blue-300">
|
|
592
|
+
💡 Best Practices
|
|
593
|
+
</h3>
|
|
594
|
+
<ul className="!space-y-2 text-sm text-white/70">
|
|
595
|
+
<li className="!text-white/70">
|
|
596
|
+
Always pair with descriptive text labels
|
|
597
|
+
</li>
|
|
598
|
+
<li className="!text-white/70">
|
|
599
|
+
Use consistent placement for column actions
|
|
600
|
+
</li>
|
|
601
|
+
<li className="!text-white/70">
|
|
602
|
+
Ensure sufficient click/touch target sizes
|
|
603
|
+
</li>
|
|
604
|
+
<li className="!text-white/70">
|
|
605
|
+
Add focus states for keyboard navigation
|
|
606
|
+
</li>
|
|
607
|
+
<li className="!text-white/70">
|
|
608
|
+
Provide clear feedback on column addition
|
|
609
|
+
</li>
|
|
610
|
+
</ul>
|
|
611
|
+
</div>
|
|
612
|
+
</div>
|
|
613
|
+
|
|
614
|
+
<div className="rounded-lg border border-white/10 bg-white/5 p-6">
|
|
615
|
+
<h3 className="mb-4 text-lg font-semibold !text-purple-300">
|
|
616
|
+
Custom Accessibility Implementation
|
|
617
|
+
</h3>
|
|
618
|
+
<div className="grid grid-cols-1 gap-6 lg:grid-cols-2">
|
|
619
|
+
<div className="rounded-lg bg-black/40 p-4">
|
|
620
|
+
<pre className="overflow-x-auto text-sm !text-cyan-300">
|
|
621
|
+
{`// Add column button with proper ARIA
|
|
622
|
+
<button
|
|
623
|
+
aria-label="Add new column to table"
|
|
624
|
+
className="flex items-center gap-2 p-2"
|
|
625
|
+
>
|
|
626
|
+
<ColumnWideAddIcon className="h-4 w-4" />
|
|
627
|
+
<span className="sr-only">Add Column</span>
|
|
628
|
+
</button>
|
|
629
|
+
|
|
630
|
+
// Toolbar button with context
|
|
631
|
+
<button
|
|
632
|
+
aria-label="Insert new column after current column"
|
|
633
|
+
className="rounded p-2"
|
|
634
|
+
>
|
|
635
|
+
<ColumnWideAddIcon
|
|
636
|
+
className="h-5 w-5"
|
|
637
|
+
aria-hidden="true"
|
|
638
|
+
/>
|
|
639
|
+
</button>
|
|
640
|
+
|
|
641
|
+
// Contextual add action
|
|
642
|
+
<button
|
|
643
|
+
aria-label="Add column to spreadsheet"
|
|
644
|
+
aria-describedby="column-help"
|
|
645
|
+
className="rounded p-2"
|
|
646
|
+
>
|
|
647
|
+
<ColumnWideAddIcon className="h-4 w-4" />
|
|
648
|
+
</button>
|
|
649
|
+
<div id="column-help" className="sr-only">
|
|
650
|
+
Adds a new column to the spreadsheet
|
|
651
|
+
</div>`}
|
|
652
|
+
</pre>
|
|
653
|
+
</div>
|
|
654
|
+
<div className="!space-y-4">
|
|
655
|
+
<p className="text-sm !text-white/70">
|
|
656
|
+
When using ColumnWideAddIcon for column addition,
|
|
657
|
+
provide clear context about where the column will be
|
|
658
|
+
added and any related actions.
|
|
659
|
+
</p>
|
|
660
|
+
<div className="rounded-lg border border-blue-500/20 bg-blue-500/10 p-4">
|
|
661
|
+
<div className="flex items-center gap-2 text-sm text-blue-200">
|
|
662
|
+
<ColumnWideAddIcon className="h-4 w-4" />
|
|
663
|
+
<span>
|
|
664
|
+
This approach gives screen readers clear context
|
|
665
|
+
about column addition actions
|
|
666
|
+
</span>
|
|
667
|
+
</div>
|
|
668
|
+
</div>
|
|
669
|
+
</div>
|
|
670
|
+
</div>
|
|
671
|
+
</div>
|
|
672
|
+
</div>
|
|
673
|
+
|
|
674
|
+
{/* Related Icons */}
|
|
675
|
+
<div className="!space-y-8">
|
|
676
|
+
<h2 className="text-center text-3xl font-bold !text-white">
|
|
677
|
+
Related Icons
|
|
678
|
+
</h2>
|
|
679
|
+
<div className="grid grid-cols-2 gap-6 md:grid-cols-4">
|
|
680
|
+
<div className="!space-y-3 rounded-lg border border-white/10 bg-white/5 p-4 text-center">
|
|
681
|
+
<div className="!mx-auto flex h-12 w-12 items-center justify-center rounded-lg bg-green-500/20">
|
|
682
|
+
<span className="text-2xl">➕</span>
|
|
683
|
+
</div>
|
|
684
|
+
<div>
|
|
685
|
+
<div className="font-medium text-white">PlusIcon</div>
|
|
686
|
+
<div className="text-xs text-white/60">Add items</div>
|
|
687
|
+
</div>
|
|
688
|
+
</div>
|
|
689
|
+
<div className="!space-y-3 rounded-lg border border-white/10 bg-white/5 p-4 text-center">
|
|
690
|
+
<div className="!mx-auto flex h-12 w-12 items-center justify-center rounded-lg bg-blue-500/20">
|
|
691
|
+
<span className="text-2xl">📊</span>
|
|
692
|
+
</div>
|
|
693
|
+
<div>
|
|
694
|
+
<div className="font-medium text-white">
|
|
695
|
+
LayoutColumnIcon
|
|
696
|
+
</div>
|
|
697
|
+
<div className="text-xs text-white/60">
|
|
698
|
+
Column layouts
|
|
699
|
+
</div>
|
|
700
|
+
</div>
|
|
701
|
+
</div>
|
|
702
|
+
<div className="!space-y-3 rounded-lg border border-white/10 bg-white/5 p-4 text-center">
|
|
703
|
+
<div className="!mx-auto flex h-12 w-12 items-center justify-center rounded-lg bg-purple-500/20">
|
|
704
|
+
<span className="text-2xl">📋</span>
|
|
705
|
+
</div>
|
|
706
|
+
<div>
|
|
707
|
+
<div className="font-medium text-white">TableIcon</div>
|
|
708
|
+
<div className="text-xs text-white/60">Table views</div>
|
|
709
|
+
</div>
|
|
710
|
+
</div>
|
|
711
|
+
<div className="!space-y-3 rounded-lg border border-white/10 bg-white/5 p-4 text-center">
|
|
712
|
+
<div className="!mx-auto flex h-12 w-12 items-center justify-center rounded-lg bg-orange-500/20">
|
|
713
|
+
<span className="text-2xl">⚙️</span>
|
|
714
|
+
</div>
|
|
715
|
+
<div>
|
|
716
|
+
<div className="font-medium text-white">SettingIcon</div>
|
|
717
|
+
<div className="text-xs text-white/60">Configuration</div>
|
|
718
|
+
</div>
|
|
719
|
+
</div>
|
|
720
|
+
</div>
|
|
721
|
+
</div>
|
|
722
|
+
</div>
|
|
723
|
+
|
|
724
|
+
{/* Footer */}
|
|
725
|
+
<div className="border-t border-white/10 bg-black/20 backdrop-blur-xl">
|
|
726
|
+
<div className="!mx-auto max-w-7xl px-6 py-8">
|
|
727
|
+
<div className="!space-y-4 text-center">
|
|
728
|
+
<p className="!text-white/60">
|
|
729
|
+
ColumnWideAddIcon is part of the Aural UI icon library,
|
|
730
|
+
built for column addition and layout management.
|
|
731
|
+
</p>
|
|
732
|
+
<p className="text-sm !text-white/40">
|
|
733
|
+
All icons use Radix UI's AccessibleIcon for screen reader
|
|
734
|
+
compatibility and follow WCAG guidelines for interactive
|
|
735
|
+
elements.
|
|
736
|
+
</p>
|
|
737
|
+
</div>
|
|
738
|
+
</div>
|
|
739
|
+
</div>
|
|
740
|
+
</div>
|
|
741
|
+
</>
|
|
742
|
+
),
|
|
743
|
+
},
|
|
744
|
+
},
|
|
745
|
+
tags: ["autodocs"],
|
|
746
|
+
argTypes: {
|
|
747
|
+
width: {
|
|
748
|
+
control: { type: "range", min: 8, max: 96, step: 2 },
|
|
749
|
+
description: "Width of the icon in pixels",
|
|
750
|
+
},
|
|
751
|
+
withAccessibility: {
|
|
752
|
+
control: "boolean",
|
|
753
|
+
description: "Whether to wrap the icon with accessibility features",
|
|
754
|
+
},
|
|
755
|
+
height: {
|
|
756
|
+
control: { type: "range", min: 8, max: 96, step: 2 },
|
|
757
|
+
description: "Height of the icon in pixels",
|
|
758
|
+
},
|
|
759
|
+
fill: {
|
|
760
|
+
control: "color",
|
|
761
|
+
description: "Fill color of the icon",
|
|
762
|
+
},
|
|
763
|
+
className: {
|
|
764
|
+
control: "text",
|
|
765
|
+
description: "CSS classes for styling",
|
|
766
|
+
},
|
|
767
|
+
},
|
|
768
|
+
}
|
|
769
|
+
|
|
770
|
+
export default meta
|
|
771
|
+
type Story = StoryObj<typeof ColumnWideAddIcon>
|
|
772
|
+
|
|
773
|
+
// Story parameters for consistent dark theme
|
|
774
|
+
const storyParameters = {
|
|
775
|
+
backgrounds: {
|
|
776
|
+
default: "dark",
|
|
777
|
+
values: [
|
|
778
|
+
{ name: "dark", value: "#0a0a0a" },
|
|
779
|
+
{ name: "darker", value: "#000000" },
|
|
780
|
+
],
|
|
781
|
+
},
|
|
782
|
+
}
|
|
783
|
+
|
|
784
|
+
export const Default: Story = {
|
|
785
|
+
args: {
|
|
786
|
+
width: 56,
|
|
787
|
+
height: 56,
|
|
788
|
+
className: "text-blue-400",
|
|
789
|
+
withAccessibility: true,
|
|
790
|
+
},
|
|
791
|
+
parameters: storyParameters,
|
|
792
|
+
render: (args) => (
|
|
793
|
+
<div className="flex h-32 min-h-dvh items-center justify-center rounded-lg bg-gradient-to-br from-gray-900 to-gray-800">
|
|
794
|
+
<ColumnWideAddIcon {...args} />
|
|
795
|
+
</div>
|
|
796
|
+
),
|
|
797
|
+
}
|
|
798
|
+
|
|
799
|
+
export const SizeVariations: Story = {
|
|
800
|
+
parameters: {
|
|
801
|
+
...storyParameters,
|
|
802
|
+
docs: {
|
|
803
|
+
description: {
|
|
804
|
+
story:
|
|
805
|
+
"ColumnWideAddIcon in different sizes, from small toolbar buttons to large dashboard controls.",
|
|
806
|
+
},
|
|
807
|
+
},
|
|
808
|
+
},
|
|
809
|
+
render: () => (
|
|
810
|
+
<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">
|
|
811
|
+
<div className="text-center">
|
|
812
|
+
<ColumnWideAddIcon className="!mx-auto mb-2 h-6 w-6 text-blue-400" />
|
|
813
|
+
<span className="text-xs text-white/60">24px</span>
|
|
814
|
+
</div>
|
|
815
|
+
<div className="text-center">
|
|
816
|
+
<ColumnWideAddIcon className="!mx-auto mb-2 h-8 w-8 text-blue-400" />
|
|
817
|
+
<span className="text-xs text-white/60">32px</span>
|
|
818
|
+
</div>
|
|
819
|
+
<div className="text-center">
|
|
820
|
+
<ColumnWideAddIcon className="!mx-auto mb-2 h-12 w-12 text-blue-400" />
|
|
821
|
+
<span className="text-xs text-white/60">48px</span>
|
|
822
|
+
</div>
|
|
823
|
+
<div className="text-center">
|
|
824
|
+
<ColumnWideAddIcon className="!mx-auto mb-2 h-14 w-14 text-blue-400" />
|
|
825
|
+
<span className="text-xs text-white/60">56px</span>
|
|
826
|
+
</div>
|
|
827
|
+
</div>
|
|
828
|
+
),
|
|
829
|
+
}
|
|
830
|
+
|
|
831
|
+
export const ColorVariations: Story = {
|
|
832
|
+
parameters: {
|
|
833
|
+
...storyParameters,
|
|
834
|
+
docs: {
|
|
835
|
+
description: {
|
|
836
|
+
story:
|
|
837
|
+
"ColumnWideAddIcon in different theme colors for various UI contexts.",
|
|
838
|
+
},
|
|
839
|
+
},
|
|
840
|
+
},
|
|
841
|
+
render: () => (
|
|
842
|
+
<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">
|
|
843
|
+
<div className="text-center">
|
|
844
|
+
<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">
|
|
845
|
+
<ColumnWideAddIcon className="h-12 w-12 text-blue-400" />
|
|
846
|
+
</div>
|
|
847
|
+
<div className="text-sm font-medium text-white">Primary</div>
|
|
848
|
+
<div className="text-xs text-blue-400">text-blue-400</div>
|
|
849
|
+
</div>
|
|
850
|
+
<div className="text-center">
|
|
851
|
+
<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">
|
|
852
|
+
<ColumnWideAddIcon className="h-12 w-12 text-gray-400" />
|
|
853
|
+
</div>
|
|
854
|
+
<div className="text-sm font-medium text-white">Secondary</div>
|
|
855
|
+
<div className="text-xs text-gray-400">text-gray-400</div>
|
|
856
|
+
</div>
|
|
857
|
+
<div className="text-center">
|
|
858
|
+
<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">
|
|
859
|
+
<ColumnWideAddIcon className="h-12 w-12 text-purple-400" />
|
|
860
|
+
</div>
|
|
861
|
+
<div className="text-sm font-medium text-white">Accent</div>
|
|
862
|
+
<div className="text-xs text-purple-400">text-purple-400</div>
|
|
863
|
+
</div>
|
|
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-emerald-500/30 bg-emerald-500/20">
|
|
866
|
+
<ColumnWideAddIcon className="h-12 w-12 text-emerald-400" />
|
|
867
|
+
</div>
|
|
868
|
+
<div className="text-sm font-medium text-white">Success</div>
|
|
869
|
+
<div className="text-xs text-emerald-400">text-emerald-400</div>
|
|
870
|
+
</div>
|
|
871
|
+
</div>
|
|
872
|
+
),
|
|
873
|
+
}
|
|
874
|
+
|
|
875
|
+
export const UsageExamples: Story = {
|
|
876
|
+
parameters: {
|
|
877
|
+
...storyParameters,
|
|
878
|
+
docs: {
|
|
879
|
+
description: {
|
|
880
|
+
story:
|
|
881
|
+
"Real-world usage examples showing ColumnWideAddIcon in different UI contexts.",
|
|
882
|
+
},
|
|
883
|
+
},
|
|
884
|
+
},
|
|
885
|
+
render: () => (
|
|
886
|
+
<div className="min-h-dvh !space-y-8 rounded-lg bg-gradient-to-br from-gray-900 to-gray-800 p-8">
|
|
887
|
+
{/* Table Toolbar */}
|
|
888
|
+
<div className="!space-y-2">
|
|
889
|
+
<h3 className="text-sm font-medium text-white">Table Toolbar</h3>
|
|
890
|
+
<div className="flex items-center gap-2 rounded-lg border border-white/10 bg-white/5 p-4">
|
|
891
|
+
<button className="flex items-center gap-2 rounded border border-blue-500/30 bg-blue-500/20 px-3 py-1.5 text-blue-200">
|
|
892
|
+
<ColumnWideAddIcon className="h-4 w-4" />
|
|
893
|
+
<span className="text-sm">Add Column</span>
|
|
894
|
+
</button>
|
|
895
|
+
<button className="flex items-center gap-2 rounded border border-white/20 bg-white/5 px-3 py-1.5 text-white/60 hover:bg-white/10">
|
|
896
|
+
<span className="text-sm">Delete</span>
|
|
897
|
+
</button>
|
|
898
|
+
</div>
|
|
899
|
+
</div>
|
|
900
|
+
|
|
901
|
+
{/* Spreadsheet Controls */}
|
|
902
|
+
<div className="!space-y-2">
|
|
903
|
+
<h3 className="text-sm font-medium text-white">Spreadsheet Controls</h3>
|
|
904
|
+
<div className="rounded-lg border border-white/10 bg-white/5 p-4">
|
|
905
|
+
<div className="mb-3 flex items-center justify-between">
|
|
906
|
+
<h4 className="font-medium text-white">Columns</h4>
|
|
907
|
+
<button className="rounded p-1.5 text-white/60 hover:bg-white/10 hover:text-blue-400">
|
|
908
|
+
<ColumnWideAddIcon className="h-4 w-4" />
|
|
909
|
+
</button>
|
|
910
|
+
</div>
|
|
911
|
+
<div className="!space-y-2">
|
|
912
|
+
<div className="flex items-center gap-2 rounded px-2 py-1 text-white/60">
|
|
913
|
+
<span className="text-xs">A</span>
|
|
914
|
+
<span className="text-sm">Name</span>
|
|
915
|
+
</div>
|
|
916
|
+
<div className="flex items-center gap-2 rounded px-2 py-1 text-white/60">
|
|
917
|
+
<span className="text-xs">B</span>
|
|
918
|
+
<span className="text-sm">Email</span>
|
|
919
|
+
</div>
|
|
920
|
+
</div>
|
|
921
|
+
</div>
|
|
922
|
+
</div>
|
|
923
|
+
|
|
924
|
+
{/* Data Table Header */}
|
|
925
|
+
<div className="!space-y-2">
|
|
926
|
+
<h3 className="text-sm font-medium text-white">Data Table Header</h3>
|
|
927
|
+
<div className="rounded-lg border border-white/10 bg-white/5 p-4">
|
|
928
|
+
<div className="mb-3 flex items-center justify-between border-b border-white/10 pb-3">
|
|
929
|
+
<h4 className="font-medium text-white">Data Table</h4>
|
|
930
|
+
<button className="flex items-center gap-2 rounded border border-blue-500/30 bg-blue-500/20 px-2 py-1 text-blue-200">
|
|
931
|
+
<ColumnWideAddIcon className="h-3 w-3" />
|
|
932
|
+
<span className="text-xs">New Column</span>
|
|
933
|
+
</button>
|
|
934
|
+
</div>
|
|
935
|
+
<div className="grid grid-cols-3 gap-2 text-xs text-white/60">
|
|
936
|
+
<div>Column 1</div>
|
|
937
|
+
<div>Column 2</div>
|
|
938
|
+
<div>Column 3</div>
|
|
939
|
+
</div>
|
|
940
|
+
</div>
|
|
941
|
+
</div>
|
|
942
|
+
</div>
|
|
943
|
+
),
|
|
944
|
+
}
|
|
945
|
+
|
|
946
|
+
export const Playground: Story = {
|
|
947
|
+
parameters: {
|
|
948
|
+
...storyParameters,
|
|
949
|
+
docs: {
|
|
950
|
+
description: {
|
|
951
|
+
story:
|
|
952
|
+
"Interactive playground to experiment with different ColumnWideAddIcon configurations.",
|
|
953
|
+
},
|
|
954
|
+
},
|
|
955
|
+
},
|
|
956
|
+
args: {
|
|
957
|
+
width: 56,
|
|
958
|
+
height: 56,
|
|
959
|
+
className: "text-blue-400",
|
|
960
|
+
},
|
|
961
|
+
render: (args) => (
|
|
962
|
+
<div className="flex h-64 min-h-dvh items-center justify-center rounded-lg bg-gradient-to-br from-gray-900 to-gray-800">
|
|
963
|
+
<div className="rounded-lg border border-white/10 bg-white/5 p-8">
|
|
964
|
+
<ColumnWideAddIcon {...args} />
|
|
965
|
+
</div>
|
|
966
|
+
</div>
|
|
967
|
+
),
|
|
968
|
+
}
|