@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/checkbox/checkbox.stories.js DELETED
@@ -1,566 +0,0 @@
1
- import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
- import { Code, Header } from '../../components/typography/index.js';
3
- import { Checkbox, CheckboxLabel, CheckboxLinks } from './index.js';
4
- const meta = {
5
- title: 'Components/Checkbox',
6
- component: Checkbox,
7
- tags: [
8
- 'autodocs'
9
- ],
10
- argTypes: {
11
- size: {
12
- control: 'select',
13
- options: [
14
- 'sm',
15
- 'md',
16
- 'lg'
17
- ]
18
- },
19
- disabled: {
20
- control: 'boolean'
21
- },
22
- checked: {
23
- control: 'boolean'
24
- }
25
- },
26
- args: {
27
- size: 'md',
28
- disabled: false
29
- }
30
- };
31
- export default meta;
32
- export const Default = {
33
- render: (args)=>/*#__PURE__*/ _jsxs("div", {
34
- className: "flex flex-col gap-32",
35
- children: [
36
- /*#__PURE__*/ _jsxs("div", {
37
- className: "flex flex-col gap-16",
38
- children: [
39
- /*#__PURE__*/ _jsx(Header, {
40
- variant: "h4",
41
- children: "Controlled Checkbox"
42
- }),
43
- /*#__PURE__*/ _jsx(Code, {
44
- variant: "label",
45
- className: "text-foreground-neutral-subtle",
46
- children: "Use the controls below to change the checkbox state"
47
- }),
48
- /*#__PURE__*/ _jsx(Checkbox, {
49
- ...args
50
- })
51
- ]
52
- }),
53
- /*#__PURE__*/ _jsxs("div", {
54
- className: "flex flex-col gap-32",
55
- children: [
56
- /*#__PURE__*/ _jsx(Header, {
57
- variant: "h4",
58
- children: "All States"
59
- }),
60
- [
61
- 'sm',
62
- 'md',
63
- 'lg'
64
- ].map((size)=>/*#__PURE__*/ _jsxs("div", {
65
- className: "flex flex-wrap gap-16",
66
- children: [
67
- /*#__PURE__*/ _jsxs(Header, {
68
- variant: "h4",
69
- children: [
70
- "Size: ",
71
- size
72
- ]
73
- }),
74
- /*#__PURE__*/ _jsxs("div", {
75
- className: "flex flex-col gap-8",
76
- children: [
77
- /*#__PURE__*/ _jsx(Code, {
78
- variant: "label",
79
- className: "text-foreground-neutral-subtle",
80
- children: "Unchecked"
81
- }),
82
- /*#__PURE__*/ _jsx(Checkbox, {
83
- size: size
84
- })
85
- ]
86
- }),
87
- /*#__PURE__*/ _jsxs("div", {
88
- className: "flex flex-col gap-8",
89
- children: [
90
- /*#__PURE__*/ _jsx(Code, {
91
- variant: "label",
92
- className: "text-foreground-neutral-subtle",
93
- children: "Checked"
94
- }),
95
- /*#__PURE__*/ _jsx(Checkbox, {
96
- size: size,
97
- checked: true
98
- })
99
- ]
100
- }),
101
- /*#__PURE__*/ _jsxs("div", {
102
- className: "flex flex-col gap-8",
103
- children: [
104
- /*#__PURE__*/ _jsx(Code, {
105
- variant: "label",
106
- className: "text-foreground-neutral-subtle",
107
- children: "Indeterminate"
108
- }),
109
- /*#__PURE__*/ _jsx(Checkbox, {
110
- size: size,
111
- checked: "indeterminate"
112
- })
113
- ]
114
- }),
115
- /*#__PURE__*/ _jsxs("div", {
116
- className: "flex flex-col gap-8",
117
- children: [
118
- /*#__PURE__*/ _jsx(Code, {
119
- variant: "label",
120
- className: "text-foreground-neutral-subtle",
121
- children: "Disabled (Unchecked)"
122
- }),
123
- /*#__PURE__*/ _jsx(Checkbox, {
124
- size: size,
125
- disabled: true
126
- })
127
- ]
128
- }),
129
- /*#__PURE__*/ _jsxs("div", {
130
- className: "flex flex-col gap-8",
131
- children: [
132
- /*#__PURE__*/ _jsx(Code, {
133
- variant: "label",
134
- className: "text-foreground-neutral-subtle",
135
- children: "Disabled (Checked)"
136
- }),
137
- /*#__PURE__*/ _jsx(Checkbox, {
138
- size: size,
139
- checked: true,
140
- disabled: true
141
- })
142
- ]
143
- }),
144
- /*#__PURE__*/ _jsxs("div", {
145
- className: "flex flex-col gap-8",
146
- children: [
147
- /*#__PURE__*/ _jsx(Code, {
148
- variant: "label",
149
- className: "text-foreground-neutral-subtle",
150
- children: "Focus"
151
- }),
152
- /*#__PURE__*/ _jsx(Checkbox, {
153
- size: size,
154
- className: "focus"
155
- })
156
- ]
157
- })
158
- ]
159
- }, size))
160
- ]
161
- })
162
- ]
163
- }),
164
- parameters: {
165
- pseudo: {
166
- focusVisible: '.focus'
167
- }
168
- }
169
- };
170
- export const CheckboxLabelStory = {
171
- render: ()=>/*#__PURE__*/ _jsxs("div", {
172
- className: "flex flex-col gap-32 pb-64 pt-32 px-32 bg-background-neutral-base",
173
- children: [
174
- /*#__PURE__*/ _jsx(Code, {
175
- variant: "label",
176
- className: "text-foreground-neutral-subtle",
177
- children: "CHECKBOX LABEL - WITHOUT BORDER"
178
- }),
179
- /*#__PURE__*/ _jsxs("div", {
180
- className: "flex flex-col gap-16",
181
- children: [
182
- /*#__PURE__*/ _jsxs("div", {
183
- className: "flex flex-col gap-8",
184
- children: [
185
- /*#__PURE__*/ _jsx(Code, {
186
- variant: "label",
187
- className: "text-foreground-neutral-subtle text-xs",
188
- children: "Default - Unchecked"
189
- }),
190
- /*#__PURE__*/ _jsx(CheckboxLabel, {
191
- label: "Label",
192
- optional: true,
193
- showInfoIcon: true,
194
- description: "The quick brown fox jumps over a lazy dog."
195
- })
196
- ]
197
- }),
198
- /*#__PURE__*/ _jsxs("div", {
199
- className: "flex flex-col gap-8",
200
- children: [
201
- /*#__PURE__*/ _jsx(Code, {
202
- variant: "label",
203
- className: "text-foreground-neutral-subtle text-xs",
204
- children: "Hover - Unchecked"
205
- }),
206
- /*#__PURE__*/ _jsx(CheckboxLabel, {
207
- label: "Label",
208
- optional: true,
209
- showInfoIcon: true,
210
- description: "The quick brown fox jumps over a lazy dog.",
211
- className: "hover"
212
- })
213
- ]
214
- }),
215
- /*#__PURE__*/ _jsxs("div", {
216
- className: "flex flex-col gap-8",
217
- children: [
218
- /*#__PURE__*/ _jsx(Code, {
219
- variant: "label",
220
- className: "text-foreground-neutral-subtle text-xs",
221
- children: "Default - Checked"
222
- }),
223
- /*#__PURE__*/ _jsx(CheckboxLabel, {
224
- label: "Label",
225
- optional: true,
226
- showInfoIcon: true,
227
- description: "The quick brown fox jumps over a lazy dog.",
228
- checked: true
229
- })
230
- ]
231
- }),
232
- /*#__PURE__*/ _jsxs("div", {
233
- className: "flex flex-col gap-8",
234
- children: [
235
- /*#__PURE__*/ _jsx(Code, {
236
- variant: "label",
237
- className: "text-foreground-neutral-subtle text-xs",
238
- children: "Hover - Checked"
239
- }),
240
- /*#__PURE__*/ _jsx(CheckboxLabel, {
241
- label: "Label",
242
- optional: true,
243
- showInfoIcon: true,
244
- description: "The quick brown fox jumps over a lazy dog.",
245
- checked: true,
246
- className: "hover"
247
- })
248
- ]
249
- }),
250
- /*#__PURE__*/ _jsxs("div", {
251
- className: "flex flex-col gap-8",
252
- children: [
253
- /*#__PURE__*/ _jsx(Code, {
254
- variant: "label",
255
- className: "text-foreground-neutral-subtle text-xs",
256
- children: "Default - Indeterminate"
257
- }),
258
- /*#__PURE__*/ _jsx(CheckboxLabel, {
259
- label: "Label",
260
- optional: true,
261
- showInfoIcon: true,
262
- description: "The quick brown fox jumps over a lazy dog.",
263
- checked: "indeterminate"
264
- })
265
- ]
266
- }),
267
- /*#__PURE__*/ _jsxs("div", {
268
- className: "flex flex-col gap-8",
269
- children: [
270
- /*#__PURE__*/ _jsx(Code, {
271
- variant: "label",
272
- className: "text-foreground-neutral-subtle text-xs",
273
- children: "Disabled - Checked"
274
- }),
275
- /*#__PURE__*/ _jsx(CheckboxLabel, {
276
- label: "Label",
277
- checked: true,
278
- optional: true,
279
- showInfoIcon: true,
280
- description: "The quick brown fox jumps over a lazy dog.",
281
- disabled: true
282
- })
283
- ]
284
- }),
285
- /*#__PURE__*/ _jsxs("div", {
286
- className: "flex flex-col gap-8",
287
- children: [
288
- /*#__PURE__*/ _jsx(Code, {
289
- variant: "label",
290
- className: "text-foreground-neutral-subtle text-xs",
291
- children: "Disabled - Unchecked"
292
- }),
293
- /*#__PURE__*/ _jsx(CheckboxLabel, {
294
- label: "Label",
295
- optional: true,
296
- showInfoIcon: true,
297
- description: "The quick brown fox jumps over a lazy dog.",
298
- disabled: true
299
- })
300
- ]
301
- })
302
- ]
303
- }),
304
- /*#__PURE__*/ _jsx(Code, {
305
- variant: "label",
306
- className: "text-foreground-neutral-subtle mt-32",
307
- children: "CHECKBOX LABEL - WITH BORDER"
308
- }),
309
- /*#__PURE__*/ _jsxs("div", {
310
- className: "flex flex-col gap-16",
311
- children: [
312
- /*#__PURE__*/ _jsxs("div", {
313
- className: "flex flex-col gap-8",
314
- children: [
315
- /*#__PURE__*/ _jsx(Code, {
316
- variant: "label",
317
- className: "text-foreground-neutral-subtle text-xs",
318
- children: "Default - Unchecked"
319
- }),
320
- /*#__PURE__*/ _jsx(CheckboxLabel, {
321
- id: "checkbox-border-default-unchecked",
322
- label: "Label",
323
- optional: true,
324
- showInfoIcon: true,
325
- description: "The quick brown fox jumps over a lazy dog.",
326
- border: true
327
- })
328
- ]
329
- }),
330
- /*#__PURE__*/ _jsxs("div", {
331
- className: "flex flex-col gap-8",
332
- children: [
333
- /*#__PURE__*/ _jsx(Code, {
334
- variant: "label",
335
- className: "text-foreground-neutral-subtle text-xs",
336
- children: "Hover - Unchecked"
337
- }),
338
- /*#__PURE__*/ _jsx(CheckboxLabel, {
339
- id: "checkbox-border-hover-unchecked",
340
- label: "Label",
341
- optional: true,
342
- showInfoIcon: true,
343
- description: "The quick brown fox jumps over a lazy dog.",
344
- border: true,
345
- className: "hover"
346
- })
347
- ]
348
- }),
349
- /*#__PURE__*/ _jsxs("div", {
350
- className: "flex flex-col gap-8",
351
- children: [
352
- /*#__PURE__*/ _jsx(Code, {
353
- variant: "label",
354
- className: "text-foreground-neutral-subtle text-xs",
355
- children: "Focus - Unchecked"
356
- }),
357
- /*#__PURE__*/ _jsx(CheckboxLabel, {
358
- id: "checkbox-border-focus-unchecked",
359
- label: "Label",
360
- optional: true,
361
- showInfoIcon: true,
362
- description: "The quick brown fox jumps over a lazy dog.",
363
- border: true,
364
- className: "focus"
365
- })
366
- ]
367
- }),
368
- /*#__PURE__*/ _jsxs("div", {
369
- className: "flex flex-col gap-8",
370
- children: [
371
- /*#__PURE__*/ _jsx(Code, {
372
- variant: "label",
373
- className: "text-foreground-neutral-subtle text-xs",
374
- children: "Default - Checked"
375
- }),
376
- /*#__PURE__*/ _jsx(CheckboxLabel, {
377
- id: "checkbox-border-default-checked",
378
- label: "Label",
379
- optional: true,
380
- showInfoIcon: true,
381
- description: "The quick brown fox jumps over a lazy dog.",
382
- checked: true,
383
- border: true
384
- })
385
- ]
386
- }),
387
- /*#__PURE__*/ _jsxs("div", {
388
- className: "flex flex-col gap-8",
389
- children: [
390
- /*#__PURE__*/ _jsx(Code, {
391
- variant: "label",
392
- className: "text-foreground-neutral-subtle text-xs",
393
- children: "Hover - Checked"
394
- }),
395
- /*#__PURE__*/ _jsx(CheckboxLabel, {
396
- id: "checkbox-border-hover-checked",
397
- label: "Label",
398
- optional: true,
399
- showInfoIcon: true,
400
- description: "The quick brown fox jumps over a lazy dog.",
401
- checked: true,
402
- border: true,
403
- className: "hover"
404
- })
405
- ]
406
- }),
407
- /*#__PURE__*/ _jsxs("div", {
408
- className: "flex flex-col gap-8",
409
- children: [
410
- /*#__PURE__*/ _jsx(Code, {
411
- variant: "label",
412
- className: "text-foreground-neutral-subtle text-xs",
413
- children: "Focus - Checked"
414
- }),
415
- /*#__PURE__*/ _jsx(CheckboxLabel, {
416
- id: "checkbox-border-focus-checked",
417
- label: "Label",
418
- optional: true,
419
- showInfoIcon: true,
420
- description: "The quick brown fox jumps over a lazy dog.",
421
- checked: true,
422
- border: true,
423
- className: "focus"
424
- })
425
- ]
426
- }),
427
- /*#__PURE__*/ _jsxs("div", {
428
- className: "flex flex-col gap-8",
429
- children: [
430
- /*#__PURE__*/ _jsx(Code, {
431
- variant: "label",
432
- className: "text-foreground-neutral-subtle text-xs",
433
- children: "Default - Indeterminate"
434
- }),
435
- /*#__PURE__*/ _jsx(CheckboxLabel, {
436
- id: "checkbox-border-default-indeterminate",
437
- label: "Label",
438
- optional: true,
439
- showInfoIcon: true,
440
- description: "The quick brown fox jumps over a lazy dog.",
441
- checked: "indeterminate",
442
- border: true
443
- })
444
- ]
445
- }),
446
- /*#__PURE__*/ _jsxs("div", {
447
- className: "flex flex-col gap-8",
448
- children: [
449
- /*#__PURE__*/ _jsx(Code, {
450
- variant: "label",
451
- className: "text-foreground-neutral-subtle text-xs",
452
- children: "Disabled - Unchecked"
453
- }),
454
- /*#__PURE__*/ _jsx(CheckboxLabel, {
455
- id: "checkbox-border-disabled-unchecked",
456
- label: "Label",
457
- optional: true,
458
- showInfoIcon: true,
459
- description: "The quick brown fox jumps over a lazy dog.",
460
- disabled: true,
461
- border: true
462
- })
463
- ]
464
- }),
465
- /*#__PURE__*/ _jsxs("div", {
466
- className: "flex flex-col gap-8",
467
- children: [
468
- /*#__PURE__*/ _jsx(Code, {
469
- variant: "label",
470
- className: "text-foreground-neutral-subtle text-xs",
471
- children: "Disabled - Checked"
472
- }),
473
- /*#__PURE__*/ _jsx(CheckboxLabel, {
474
- id: "checkbox-border-disabled-checked",
475
- label: "Label",
476
- optional: true,
477
- showInfoIcon: true,
478
- description: "The quick brown fox jumps over a lazy dog.",
479
- checked: true,
480
- disabled: true,
481
- border: true
482
- })
483
- ]
484
- }),
485
- /*#__PURE__*/ _jsxs("div", {
486
- className: "flex flex-col gap-8",
487
- children: [
488
- /*#__PURE__*/ _jsx(Code, {
489
- variant: "label",
490
- className: "text-foreground-neutral-subtle text-xs",
491
- children: "Disabled - Indeterminate"
492
- }),
493
- /*#__PURE__*/ _jsx(CheckboxLabel, {
494
- id: "checkbox-border-disabled-indeterminate",
495
- label: "Label",
496
- optional: true,
497
- showInfoIcon: true,
498
- description: "The quick brown fox jumps over a lazy dog.",
499
- checked: "indeterminate",
500
- disabled: true,
501
- border: true
502
- })
503
- ]
504
- })
505
- ]
506
- })
507
- ]
508
- })
509
- };
510
- CheckboxLabelStory.parameters = {
511
- pseudo: {
512
- hover: '.hover',
513
- focusVisible: '.focus'
514
- }
515
- };
516
- export const CheckboxLinksStory = {
517
- args: {
518
- disabled: true
519
- },
520
- render: ()=>/*#__PURE__*/ _jsxs("div", {
521
- className: "flex flex-col gap-32 pb-64 pt-32 px-32 bg-background-neutral-base",
522
- children: [
523
- /*#__PURE__*/ _jsx(Code, {
524
- variant: "label",
525
- className: "text-foreground-neutral-subtle",
526
- children: "CHECKBOX LINKS"
527
- }),
528
- /*#__PURE__*/ _jsxs("div", {
529
- className: "flex flex-col gap-16",
530
- children: [
531
- /*#__PURE__*/ _jsx(CheckboxLinks, {
532
- id: "checkbox-links-default",
533
- label: "Accept policies",
534
- links: [
535
- {
536
- label: 'Terms of use',
537
- href: 'https://www.shipfox.io/legal/terms-of-service'
538
- },
539
- {
540
- label: 'Privacy Policy',
541
- onClick: ()=>window.open('https://www.shipfox.io/legal/privacy-policy', '_blank', 'noopener,noreferrer')
542
- }
543
- ]
544
- }),
545
- /*#__PURE__*/ _jsx(CheckboxLinks, {
546
- id: "checkbox-links-checked",
547
- label: "Accept policies",
548
- links: [
549
- {
550
- label: 'Terms of use',
551
- href: 'https://www.shipfox.io/legal/terms-of-service'
552
- },
553
- {
554
- label: 'Privacy Policy',
555
- onClick: ()=>window.open('https://www.shipfox.io/legal/privacy-policy', '_blank', 'noopener,noreferrer')
556
- }
557
- ],
558
- checked: true
559
- })
560
- ]
561
- })
562
- ]
563
- })
564
- };
565
-
566
- //# sourceMappingURL=checkbox.stories.js.map