@shipfox/react-ui 0.25.0 → 0.26.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (53) hide show
  1. package/dist/components/index.d.ts +1 -0
  2. package/dist/components/index.js +1 -0
  3. package/dist/components/slider/index.d.ts +2 -0
  4. package/dist/components/slider/index.js +3 -0
  5. package/dist/components/slider/slider.d.ts +10 -0
  6. package/dist/components/slider/slider.js +38 -0
  7. package/dist/styles.css +1 -1
  8. package/package.json +4 -4
  9. package/dist/colors.stories.js +0 -61
  10. package/dist/components/alert/alert.stories.js +0 -227
  11. package/dist/components/avatar/avatar.stories.js +0 -267
  12. package/dist/components/badge/badge.stories.js +0 -802
  13. package/dist/components/button/button-link.stories.js +0 -127
  14. package/dist/components/button/button.stories.js +0 -187
  15. package/dist/components/button/icon-button.stories.js +0 -344
  16. package/dist/components/button-group/button-group.stories.js +0 -644
  17. package/dist/components/card/card.stories.js +0 -216
  18. package/dist/components/checkbox/checkbox.stories.js +0 -566
  19. package/dist/components/code-block/code-block.stories.js +0 -341
  20. package/dist/components/combobox/combobox.stories.js +0 -191
  21. package/dist/components/command/command.stories.js +0 -228
  22. package/dist/components/confetti/confetti.stories.js +0 -41
  23. package/dist/components/count-up/count-up.stories.js +0 -568
  24. package/dist/components/dashboard/components/charts/bar-chart.stories.js +0 -287
  25. package/dist/components/dashboard/components/charts/line-chart.stories.js +0 -257
  26. package/dist/components/dashboard/dashboard.stories.js +0 -23
  27. package/dist/components/date-picker/date-picker.stories.js +0 -349
  28. package/dist/components/dropdown-input/dropdown-input.stories.js +0 -240
  29. package/dist/components/dropdown-menu/dropdown-menu.stories.js +0 -462
  30. package/dist/components/dynamic-item/dynamic-item.stories.js +0 -385
  31. package/dist/components/empty-state/empty-state.stories.js +0 -74
  32. package/dist/components/form/form.stories.js +0 -587
  33. package/dist/components/icon/icon.stories.js +0 -38
  34. package/dist/components/inline-tips/inline-tips.stories.js +0 -219
  35. package/dist/components/input/input.stories.js +0 -265
  36. package/dist/components/interval-selector/interval-selector.stories.js +0 -232
  37. package/dist/components/item/item.stories.js +0 -239
  38. package/dist/components/kbd/kbd.stories.js +0 -119
  39. package/dist/components/label/label.stories.js +0 -105
  40. package/dist/components/modal/modal.stories.js +0 -566
  41. package/dist/components/search/search.stories.js +0 -630
  42. package/dist/components/select/select.stories.js +0 -393
  43. package/dist/components/sheet/sheet.stories.js +0 -368
  44. package/dist/components/skeleton/skeleton.stories.js +0 -345
  45. package/dist/components/table/table.stories.js +0 -302
  46. package/dist/components/tabs/tabs.stories.js +0 -179
  47. package/dist/components/textarea/textarea.stories.js +0 -339
  48. package/dist/components/toast/toast.stories.js +0 -326
  49. package/dist/components/tooltip/tooltip.stories.js +0 -560
  50. package/dist/components/typography/code.stories.js +0 -54
  51. package/dist/components/typography/header.stories.js +0 -34
  52. package/dist/components/typography/text.stories.js +0 -105
  53. package/dist/onboarding/sign-in.stories.js +0 -101
package/dist/components/badge/badge.stories.js DELETED
@@ -1,802 +0,0 @@
1
- import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
- import { Code } from '../../components/typography/index.js';
3
- import React from 'react';
4
- import { Badge, IconBadge, StatusBadge, UserBadge } from './index.js';
5
- const meta = {
6
- title: 'Components/Badge',
7
- component: Badge,
8
- parameters: {
9
- layout: 'centered'
10
- },
11
- tags: [
12
- 'autodocs'
13
- ]
14
- };
15
- export default meta;
16
- export const AllVariants = {
17
- render: ()=>/*#__PURE__*/ _jsxs("div", {
18
- className: "flex flex-col gap-32",
19
- children: [
20
- /*#__PURE__*/ _jsxs("div", {
21
- children: [
22
- /*#__PURE__*/ _jsx(Code, {
23
- variant: "label",
24
- className: "mb-16",
25
- children: "Status Badge"
26
- }),
27
- /*#__PURE__*/ _jsxs("div", {
28
- className: "flex gap-16",
29
- children: [
30
- /*#__PURE__*/ _jsx(StatusBadge, {
31
- variant: "neutral",
32
- children: "Badge"
33
- }),
34
- /*#__PURE__*/ _jsx(StatusBadge, {
35
- variant: "info",
36
- children: "Badge"
37
- }),
38
- /*#__PURE__*/ _jsx(StatusBadge, {
39
- variant: "feature",
40
- children: "Badge"
41
- }),
42
- /*#__PURE__*/ _jsx(StatusBadge, {
43
- variant: "success",
44
- dotClassName: "size-5 rounded-full",
45
- children: "Badge"
46
- }),
47
- /*#__PURE__*/ _jsx(StatusBadge, {
48
- variant: "warning",
49
- children: "Badge"
50
- }),
51
- /*#__PURE__*/ _jsx(StatusBadge, {
52
- variant: "error",
53
- children: "Badge"
54
- })
55
- ]
56
- })
57
- ]
58
- }),
59
- /*#__PURE__*/ _jsxs("div", {
60
- children: [
61
- /*#__PURE__*/ _jsx(Code, {
62
- variant: "label",
63
- className: "mb-16",
64
- children: "User Badge"
65
- }),
66
- /*#__PURE__*/ _jsxs("div", {
67
- className: "flex gap-16",
68
- children: [
69
- /*#__PURE__*/ _jsx(UserBadge, {
70
- name: "Thierry Abalea",
71
- avatarSrc: "https://avatars.githubusercontent.com/u/1290899?v=4"
72
- }),
73
- /*#__PURE__*/ _jsx(UserBadge, {
74
- name: "Kyle Nguyen",
75
- avatarSrc: "https://avatars.githubusercontent.com/u/89263955?v=4"
76
- }),
77
- /*#__PURE__*/ _jsx(UserBadge, {
78
- name: "Noe Charmet",
79
- avatarSrc: "https://avatars.githubusercontent.com/u/59678972?v=4"
80
- })
81
- ]
82
- })
83
- ]
84
- }),
85
- /*#__PURE__*/ _jsxs("div", {
86
- children: [
87
- /*#__PURE__*/ _jsx(Code, {
88
- variant: "label",
89
- className: "mb-16",
90
- children: "Icon Badge"
91
- }),
92
- /*#__PURE__*/ _jsxs("div", {
93
- className: "flex gap-16",
94
- children: [
95
- /*#__PURE__*/ _jsx(IconBadge, {
96
- variant: "neutral",
97
- name: "homeSmile"
98
- }),
99
- /*#__PURE__*/ _jsx(IconBadge, {
100
- variant: "info",
101
- name: "homeSmile"
102
- }),
103
- /*#__PURE__*/ _jsx(IconBadge, {
104
- variant: "feature",
105
- name: "homeSmile"
106
- }),
107
- /*#__PURE__*/ _jsx(IconBadge, {
108
- variant: "success",
109
- name: "homeSmile"
110
- }),
111
- /*#__PURE__*/ _jsx(IconBadge, {
112
- variant: "primary",
113
- name: "homeSmile"
114
- }),
115
- /*#__PURE__*/ _jsx(IconBadge, {
116
- variant: "error",
117
- name: "homeSmile"
118
- })
119
- ]
120
- })
121
- ]
122
- }),
123
- /*#__PURE__*/ _jsxs("div", {
124
- children: [
125
- /*#__PURE__*/ _jsx(Code, {
126
- variant: "label",
127
- className: "mb-16",
128
- children: "Badge - 2XS Size"
129
- }),
130
- /*#__PURE__*/ _jsxs("div", {
131
- className: "flex flex-col gap-16",
132
- children: [
133
- /*#__PURE__*/ _jsxs("div", {
134
- className: "flex gap-16",
135
- children: [
136
- /*#__PURE__*/ _jsx(Badge, {
137
- variant: "neutral",
138
- size: "2xs",
139
- children: "Badge"
140
- }),
141
- /*#__PURE__*/ _jsx(Badge, {
142
- variant: "info",
143
- size: "2xs",
144
- children: "Badge"
145
- }),
146
- /*#__PURE__*/ _jsx(Badge, {
147
- variant: "feature",
148
- size: "2xs",
149
- children: "Badge"
150
- }),
151
- /*#__PURE__*/ _jsx(Badge, {
152
- variant: "success",
153
- size: "2xs",
154
- children: "Badge"
155
- }),
156
- /*#__PURE__*/ _jsx(Badge, {
157
- variant: "warning",
158
- size: "2xs",
159
- children: "Badge"
160
- }),
161
- /*#__PURE__*/ _jsx(Badge, {
162
- variant: "error",
163
- size: "2xs",
164
- children: "Badge"
165
- })
166
- ]
167
- }),
168
- /*#__PURE__*/ _jsxs("div", {
169
- className: "flex gap-16",
170
- children: [
171
- /*#__PURE__*/ _jsx(Badge, {
172
- variant: "neutral",
173
- size: "2xs",
174
- iconRight: "close",
175
- children: "Badge"
176
- }),
177
- /*#__PURE__*/ _jsx(Badge, {
178
- variant: "info",
179
- size: "2xs",
180
- iconRight: "close",
181
- children: "Badge"
182
- }),
183
- /*#__PURE__*/ _jsx(Badge, {
184
- variant: "feature",
185
- size: "2xs",
186
- iconRight: "close",
187
- children: "Badge"
188
- }),
189
- /*#__PURE__*/ _jsx(Badge, {
190
- variant: "success",
191
- size: "2xs",
192
- iconRight: "close",
193
- children: "Badge"
194
- }),
195
- /*#__PURE__*/ _jsx(Badge, {
196
- variant: "warning",
197
- size: "2xs",
198
- iconRight: "close",
199
- children: "Badge"
200
- }),
201
- /*#__PURE__*/ _jsx(Badge, {
202
- variant: "error",
203
- size: "2xs",
204
- iconRight: "close",
205
- children: "Badge"
206
- })
207
- ]
208
- }),
209
- /*#__PURE__*/ _jsxs("div", {
210
- className: "flex gap-16",
211
- children: [
212
- /*#__PURE__*/ _jsx(Badge, {
213
- variant: "neutral",
214
- size: "2xs",
215
- iconLeft: "close",
216
- children: "Badge"
217
- }),
218
- /*#__PURE__*/ _jsx(Badge, {
219
- variant: "info",
220
- size: "2xs",
221
- iconLeft: "close",
222
- children: "Badge"
223
- }),
224
- /*#__PURE__*/ _jsx(Badge, {
225
- variant: "feature",
226
- size: "2xs",
227
- iconLeft: "close",
228
- children: "Badge"
229
- }),
230
- /*#__PURE__*/ _jsx(Badge, {
231
- variant: "success",
232
- size: "2xs",
233
- iconLeft: "close",
234
- children: "Badge"
235
- }),
236
- /*#__PURE__*/ _jsx(Badge, {
237
- variant: "warning",
238
- size: "2xs",
239
- iconLeft: "close",
240
- children: "Badge"
241
- }),
242
- /*#__PURE__*/ _jsx(Badge, {
243
- variant: "error",
244
- size: "2xs",
245
- iconLeft: "close",
246
- children: "Badge"
247
- })
248
- ]
249
- })
250
- ]
251
- })
252
- ]
253
- }),
254
- /*#__PURE__*/ _jsxs("div", {
255
- children: [
256
- /*#__PURE__*/ _jsx(Code, {
257
- variant: "label",
258
- className: "mb-16",
259
- children: "Badge - XS Size"
260
- }),
261
- /*#__PURE__*/ _jsxs("div", {
262
- className: "flex flex-col gap-16",
263
- children: [
264
- /*#__PURE__*/ _jsxs("div", {
265
- className: "flex gap-16",
266
- children: [
267
- /*#__PURE__*/ _jsx(Badge, {
268
- variant: "neutral",
269
- size: "xs",
270
- children: "Badge"
271
- }),
272
- /*#__PURE__*/ _jsx(Badge, {
273
- variant: "info",
274
- size: "xs",
275
- children: "Badge"
276
- }),
277
- /*#__PURE__*/ _jsx(Badge, {
278
- variant: "feature",
279
- size: "xs",
280
- children: "Badge"
281
- }),
282
- /*#__PURE__*/ _jsx(Badge, {
283
- variant: "success",
284
- size: "xs",
285
- children: "Badge"
286
- }),
287
- /*#__PURE__*/ _jsx(Badge, {
288
- variant: "warning",
289
- size: "xs",
290
- children: "Badge"
291
- }),
292
- /*#__PURE__*/ _jsx(Badge, {
293
- variant: "error",
294
- size: "xs",
295
- children: "Badge"
296
- })
297
- ]
298
- }),
299
- /*#__PURE__*/ _jsxs("div", {
300
- className: "flex gap-16",
301
- children: [
302
- /*#__PURE__*/ _jsx(Badge, {
303
- variant: "neutral",
304
- size: "xs",
305
- iconRight: "close",
306
- children: "Badge"
307
- }),
308
- /*#__PURE__*/ _jsx(Badge, {
309
- variant: "info",
310
- size: "xs",
311
- iconRight: "close",
312
- children: "Badge"
313
- }),
314
- /*#__PURE__*/ _jsx(Badge, {
315
- variant: "feature",
316
- size: "xs",
317
- iconRight: "close",
318
- children: "Badge"
319
- }),
320
- /*#__PURE__*/ _jsx(Badge, {
321
- variant: "success",
322
- size: "xs",
323
- iconRight: "close",
324
- children: "Badge"
325
- }),
326
- /*#__PURE__*/ _jsx(Badge, {
327
- variant: "warning",
328
- size: "xs",
329
- iconRight: "close",
330
- children: "Badge"
331
- }),
332
- /*#__PURE__*/ _jsx(Badge, {
333
- variant: "error",
334
- size: "xs",
335
- iconRight: "close",
336
- children: "Badge"
337
- })
338
- ]
339
- }),
340
- /*#__PURE__*/ _jsxs("div", {
341
- className: "flex gap-16",
342
- children: [
343
- /*#__PURE__*/ _jsx(Badge, {
344
- variant: "neutral",
345
- size: "xs",
346
- iconLeft: "close",
347
- children: "Badge"
348
- }),
349
- /*#__PURE__*/ _jsx(Badge, {
350
- variant: "info",
351
- size: "xs",
352
- iconLeft: "close",
353
- children: "Badge"
354
- }),
355
- /*#__PURE__*/ _jsx(Badge, {
356
- variant: "feature",
357
- size: "xs",
358
- iconLeft: "close",
359
- children: "Badge"
360
- }),
361
- /*#__PURE__*/ _jsx(Badge, {
362
- variant: "success",
363
- size: "xs",
364
- iconLeft: "close",
365
- children: "Badge"
366
- }),
367
- /*#__PURE__*/ _jsx(Badge, {
368
- variant: "warning",
369
- size: "xs",
370
- iconLeft: "close",
371
- children: "Badge"
372
- }),
373
- /*#__PURE__*/ _jsx(Badge, {
374
- variant: "error",
375
- size: "xs",
376
- iconLeft: "close",
377
- children: "Badge"
378
- })
379
- ]
380
- })
381
- ]
382
- })
383
- ]
384
- }),
385
- /*#__PURE__*/ _jsxs("div", {
386
- children: [
387
- /*#__PURE__*/ _jsx(Code, {
388
- variant: "label",
389
- className: "mb-16",
390
- children: "Badge - Rounded"
391
- }),
392
- /*#__PURE__*/ _jsxs("div", {
393
- className: "flex flex-col gap-16",
394
- children: [
395
- /*#__PURE__*/ _jsxs("div", {
396
- className: "flex gap-16",
397
- children: [
398
- /*#__PURE__*/ _jsx(Badge, {
399
- variant: "neutral",
400
- size: "2xs",
401
- radius: "rounded",
402
- children: "Badge"
403
- }),
404
- /*#__PURE__*/ _jsx(Badge, {
405
- variant: "info",
406
- size: "2xs",
407
- radius: "rounded",
408
- children: "Badge"
409
- }),
410
- /*#__PURE__*/ _jsx(Badge, {
411
- variant: "feature",
412
- size: "2xs",
413
- radius: "rounded",
414
- children: "Badge"
415
- }),
416
- /*#__PURE__*/ _jsx(Badge, {
417
- variant: "success",
418
- size: "2xs",
419
- radius: "rounded",
420
- children: "Badge"
421
- }),
422
- /*#__PURE__*/ _jsx(Badge, {
423
- variant: "warning",
424
- size: "2xs",
425
- radius: "rounded",
426
- children: "Badge"
427
- }),
428
- /*#__PURE__*/ _jsx(Badge, {
429
- variant: "error",
430
- size: "2xs",
431
- radius: "rounded",
432
- children: "Badge"
433
- })
434
- ]
435
- }),
436
- /*#__PURE__*/ _jsxs("div", {
437
- className: "flex gap-16",
438
- children: [
439
- /*#__PURE__*/ _jsx(Badge, {
440
- variant: "neutral",
441
- size: "xs",
442
- radius: "rounded",
443
- children: "Badge"
444
- }),
445
- /*#__PURE__*/ _jsx(Badge, {
446
- variant: "info",
447
- size: "xs",
448
- radius: "rounded",
449
- children: "Badge"
450
- }),
451
- /*#__PURE__*/ _jsx(Badge, {
452
- variant: "feature",
453
- size: "xs",
454
- radius: "rounded",
455
- children: "Badge"
456
- }),
457
- /*#__PURE__*/ _jsx(Badge, {
458
- variant: "success",
459
- size: "xs",
460
- radius: "rounded",
461
- children: "Badge"
462
- }),
463
- /*#__PURE__*/ _jsx(Badge, {
464
- variant: "warning",
465
- size: "xs",
466
- radius: "rounded",
467
- children: "Badge"
468
- }),
469
- /*#__PURE__*/ _jsx(Badge, {
470
- variant: "error",
471
- size: "xs",
472
- radius: "rounded",
473
- children: "Badge"
474
- })
475
- ]
476
- }),
477
- /*#__PURE__*/ _jsxs("div", {
478
- className: "flex gap-16",
479
- children: [
480
- /*#__PURE__*/ _jsx(Badge, {
481
- variant: "neutral",
482
- size: "2xs",
483
- radius: "rounded",
484
- iconRight: "close",
485
- children: "Badge"
486
- }),
487
- /*#__PURE__*/ _jsx(Badge, {
488
- variant: "info",
489
- size: "2xs",
490
- radius: "rounded",
491
- iconRight: "close",
492
- children: "Badge"
493
- }),
494
- /*#__PURE__*/ _jsx(Badge, {
495
- variant: "feature",
496
- size: "2xs",
497
- radius: "rounded",
498
- iconRight: "close",
499
- children: "Badge"
500
- }),
501
- /*#__PURE__*/ _jsx(Badge, {
502
- variant: "success",
503
- size: "2xs",
504
- radius: "rounded",
505
- iconRight: "close",
506
- children: "Badge"
507
- }),
508
- /*#__PURE__*/ _jsx(Badge, {
509
- variant: "warning",
510
- size: "2xs",
511
- radius: "rounded",
512
- iconRight: "close",
513
- children: "Badge"
514
- }),
515
- /*#__PURE__*/ _jsx(Badge, {
516
- variant: "error",
517
- size: "2xs",
518
- radius: "rounded",
519
- iconRight: "close",
520
- children: "Badge"
521
- })
522
- ]
523
- }),
524
- /*#__PURE__*/ _jsxs("div", {
525
- className: "flex gap-16",
526
- children: [
527
- /*#__PURE__*/ _jsx(Badge, {
528
- variant: "neutral",
529
- size: "xs",
530
- radius: "rounded",
531
- iconRight: "close",
532
- children: "Badge"
533
- }),
534
- /*#__PURE__*/ _jsx(Badge, {
535
- variant: "info",
536
- size: "xs",
537
- radius: "rounded",
538
- iconRight: "close",
539
- children: "Badge"
540
- }),
541
- /*#__PURE__*/ _jsx(Badge, {
542
- variant: "feature",
543
- size: "xs",
544
- radius: "rounded",
545
- iconRight: "close",
546
- children: "Badge"
547
- }),
548
- /*#__PURE__*/ _jsx(Badge, {
549
- variant: "success",
550
- size: "xs",
551
- radius: "rounded",
552
- iconRight: "close",
553
- children: "Badge"
554
- }),
555
- /*#__PURE__*/ _jsx(Badge, {
556
- variant: "warning",
557
- size: "xs",
558
- radius: "rounded",
559
- iconRight: "close",
560
- children: "Badge"
561
- }),
562
- /*#__PURE__*/ _jsx(Badge, {
563
- variant: "error",
564
- size: "xs",
565
- radius: "rounded",
566
- iconRight: "close",
567
- children: "Badge"
568
- })
569
- ]
570
- }),
571
- /*#__PURE__*/ _jsxs("div", {
572
- className: "flex gap-16",
573
- children: [
574
- /*#__PURE__*/ _jsx(Badge, {
575
- variant: "neutral",
576
- size: "2xs",
577
- radius: "rounded",
578
- iconLeft: "close",
579
- children: "Badge"
580
- }),
581
- /*#__PURE__*/ _jsx(Badge, {
582
- variant: "info",
583
- size: "2xs",
584
- radius: "rounded",
585
- iconLeft: "close",
586
- children: "Badge"
587
- }),
588
- /*#__PURE__*/ _jsx(Badge, {
589
- variant: "feature",
590
- size: "2xs",
591
- radius: "rounded",
592
- iconLeft: "close",
593
- children: "Badge"
594
- }),
595
- /*#__PURE__*/ _jsx(Badge, {
596
- variant: "success",
597
- size: "2xs",
598
- radius: "rounded",
599
- iconLeft: "close",
600
- children: "Badge"
601
- }),
602
- /*#__PURE__*/ _jsx(Badge, {
603
- variant: "warning",
604
- size: "2xs",
605
- radius: "rounded",
606
- iconLeft: "close",
607
- children: "Badge"
608
- }),
609
- /*#__PURE__*/ _jsx(Badge, {
610
- variant: "error",
611
- size: "2xs",
612
- radius: "rounded",
613
- iconLeft: "close",
614
- children: "Badge"
615
- })
616
- ]
617
- }),
618
- /*#__PURE__*/ _jsxs("div", {
619
- className: "flex gap-16",
620
- children: [
621
- /*#__PURE__*/ _jsx(Badge, {
622
- variant: "neutral",
623
- size: "xs",
624
- radius: "rounded",
625
- iconLeft: "close",
626
- children: "Badge"
627
- }),
628
- /*#__PURE__*/ _jsx(Badge, {
629
- variant: "info",
630
- size: "xs",
631
- radius: "rounded",
632
- iconLeft: "close",
633
- children: "Badge"
634
- }),
635
- /*#__PURE__*/ _jsx(Badge, {
636
- variant: "feature",
637
- size: "xs",
638
- radius: "rounded",
639
- iconLeft: "close",
640
- children: "Badge"
641
- }),
642
- /*#__PURE__*/ _jsx(Badge, {
643
- variant: "success",
644
- size: "xs",
645
- radius: "rounded",
646
- iconLeft: "close",
647
- children: "Badge"
648
- }),
649
- /*#__PURE__*/ _jsx(Badge, {
650
- variant: "warning",
651
- size: "xs",
652
- radius: "rounded",
653
- iconLeft: "close",
654
- children: "Badge"
655
- }),
656
- /*#__PURE__*/ _jsx(Badge, {
657
- variant: "error",
658
- size: "xs",
659
- radius: "rounded",
660
- iconLeft: "close",
661
- children: "Badge"
662
- })
663
- ]
664
- })
665
- ]
666
- })
667
- ]
668
- }),
669
- /*#__PURE__*/ _jsxs("div", {
670
- children: [
671
- /*#__PURE__*/ _jsx(Code, {
672
- variant: "label",
673
- className: "mb-16",
674
- children: "Beta Badge"
675
- }),
676
- /*#__PURE__*/ _jsx("div", {
677
- className: "flex gap-16",
678
- children: /*#__PURE__*/ _jsx(Badge, {
679
- variant: "info",
680
- size: "2xs",
681
- radius: "rounded",
682
- children: "Beta"
683
- })
684
- })
685
- ]
686
- })
687
- ]
688
- })
689
- };
690
- // Interactive badges with click handlers
691
- function InteractiveBadgesComponent() {
692
- const [tags, setTags] = React.useState([
693
- 'React',
694
- 'TypeScript',
695
- 'Next.js',
696
- 'Tailwind'
697
- ]);
698
- const removeTag = (tagToRemove)=>{
699
- setTags(tags.filter((tag)=>tag !== tagToRemove));
700
- };
701
- return /*#__PURE__*/ _jsxs("div", {
702
- className: "flex flex-col gap-32",
703
- children: [
704
- /*#__PURE__*/ _jsxs("div", {
705
- children: [
706
- /*#__PURE__*/ _jsx(Code, {
707
- variant: "label",
708
- className: "mb-16",
709
- children: "Interactive Badges - Removable Tags"
710
- }),
711
- /*#__PURE__*/ _jsx("div", {
712
- className: "flex flex-wrap gap-8",
713
- children: tags.map((tag)=>/*#__PURE__*/ _jsx(Badge, {
714
- variant: "neutral",
715
- size: "xs",
716
- radius: "rounded",
717
- iconRight: "close",
718
- onIconRightClick: ()=>removeTag(tag),
719
- iconRightAriaLabel: `Remove ${tag} tag`,
720
- children: tag
721
- }, tag))
722
- })
723
- ]
724
- }),
725
- /*#__PURE__*/ _jsxs("div", {
726
- children: [
727
- /*#__PURE__*/ _jsx(Code, {
728
- variant: "label",
729
- className: "mb-16",
730
- children: "Interactive Badges - Different Variants"
731
- }),
732
- /*#__PURE__*/ _jsxs("div", {
733
- className: "flex flex-wrap gap-8",
734
- children: [
735
- /*#__PURE__*/ _jsx(Badge, {
736
- variant: "success",
737
- size: "xs",
738
- iconRight: "close",
739
- onIconRightClick: ()=>alert('Success badge clicked!'),
740
- iconRightAriaLabel: "Remove success badge",
741
- children: "Completed"
742
- }),
743
- /*#__PURE__*/ _jsx(Badge, {
744
- variant: "warning",
745
- size: "xs",
746
- iconRight: "close",
747
- onIconRightClick: ()=>alert('Warning badge clicked!'),
748
- iconRightAriaLabel: "Remove warning badge",
749
- children: "Pending"
750
- }),
751
- /*#__PURE__*/ _jsx(Badge, {
752
- variant: "error",
753
- size: "xs",
754
- iconRight: "close",
755
- onIconRightClick: ()=>alert('Error badge clicked!'),
756
- iconRightAriaLabel: "Remove error badge",
757
- children: "Failed"
758
- })
759
- ]
760
- })
761
- ]
762
- }),
763
- /*#__PURE__*/ _jsxs("div", {
764
- children: [
765
- /*#__PURE__*/ _jsx(Code, {
766
- variant: "label",
767
- className: "mb-16",
768
- children: "Static Icons (Non-interactive)"
769
- }),
770
- /*#__PURE__*/ _jsxs("div", {
771
- className: "flex flex-wrap gap-8",
772
- children: [
773
- /*#__PURE__*/ _jsx(Badge, {
774
- variant: "info",
775
- size: "xs",
776
- iconLeft: "info",
777
- children: "Information"
778
- }),
779
- /*#__PURE__*/ _jsx(Badge, {
780
- variant: "success",
781
- size: "xs",
782
- iconLeft: "check",
783
- children: "Verified"
784
- }),
785
- /*#__PURE__*/ _jsx(Badge, {
786
- variant: "feature",
787
- size: "xs",
788
- iconLeft: "money",
789
- children: "Premium"
790
- })
791
- ]
792
- })
793
- ]
794
- })
795
- ]
796
- });
797
- }
798
- export const InteractiveBadges = {
799
- render: ()=>/*#__PURE__*/ _jsx(InteractiveBadgesComponent, {})
800
- };
801
-
802
- //# sourceMappingURL=badge.stories.js.map