@dust-tt/sparkle 0.2.266 → 0.2.267

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 (23) hide show
  1. package/dist/cjs/index.js +585 -192
  2. package/dist/cjs/index.js.map +1 -1
  3. package/dist/esm/components/Checkbox.d.ts +20 -9
  4. package/dist/esm/components/Checkbox.d.ts.map +1 -1
  5. package/dist/esm/components/Checkbox.js +43 -56
  6. package/dist/esm/components/Checkbox.js.map +1 -1
  7. package/dist/esm/components/index.d.ts +2 -1
  8. package/dist/esm/components/index.d.ts.map +1 -1
  9. package/dist/esm/components/index.js +1 -1
  10. package/dist/esm/components/index.js.map +1 -1
  11. package/dist/esm/stories/Checkbox.stories.d.ts +4 -10
  12. package/dist/esm/stories/Checkbox.stories.d.ts.map +1 -1
  13. package/dist/esm/stories/Checkbox.stories.js +26 -51
  14. package/dist/esm/stories/Checkbox.stories.js.map +1 -1
  15. package/dist/esm/stories/Tree.stories.d.ts.map +1 -1
  16. package/dist/esm/stories/Tree.stories.js +37 -76
  17. package/dist/esm/stories/Tree.stories.js.map +1 -1
  18. package/dist/sparkle.css +37 -61
  19. package/package.json +3 -1
  20. package/src/components/Checkbox.tsx +87 -103
  21. package/src/components/index.ts +6 -1
  22. package/src/stories/Checkbox.stories.tsx +44 -87
  23. package/src/stories/Tree.stories.tsx +37 -76
package/src/stories/Tree.stories.tsx CHANGED
@@ -47,8 +47,7 @@ export const TreeExample = () => {
47
47
  type="leaf"
48
48
  label="Item 1"
49
49
  checkbox={{
50
- variant: "checkable",
51
- checked: "unchecked",
50
+ checked: false,
52
51
  onChange: () => {
53
52
  return;
54
53
  },
@@ -58,8 +57,7 @@ export const TreeExample = () => {
58
57
  label="Item 2"
59
58
  type="leaf"
60
59
  checkbox={{
61
- variant: "checkable",
62
- checked: "unchecked",
60
+ checked: false,
63
61
  onChange: () => {
64
62
  return;
65
63
  },
@@ -69,8 +67,7 @@ export const TreeExample = () => {
69
67
  label="Item 3"
70
68
  type="leaf"
71
69
  checkbox={{
72
- variant: "checkable",
73
- checked: "unchecked",
70
+ checked: false,
74
71
  onChange: () => {
75
72
  return;
76
73
  },
@@ -160,8 +157,7 @@ export const TreeExample = () => {
160
157
  type="item"
161
158
  visual={FolderIcon}
162
159
  checkbox={{
163
- variant: "checkable",
164
- checked: "checked",
160
+ checked: true,
165
161
  onChange: () => {
166
162
  return;
167
163
  },
@@ -172,8 +168,7 @@ export const TreeExample = () => {
172
168
  type="item"
173
169
  visual={FolderIcon}
174
170
  checkbox={{
175
- variant: "checkable",
176
- checked: "checked",
171
+ checked: true,
177
172
  onChange: () => {
178
173
  return;
179
174
  },
@@ -184,8 +179,7 @@ export const TreeExample = () => {
184
179
  type="item"
185
180
  visual={FolderIcon}
186
181
  checkbox={{
187
- variant: "checkable",
188
- checked: "unchecked",
182
+ checked: false,
189
183
  onChange: () => {
190
184
  return;
191
185
  },
@@ -196,8 +190,7 @@ export const TreeExample = () => {
196
190
  type="item"
197
191
  visual={FolderIcon}
198
192
  checkbox={{
199
- variant: "checkable",
200
- checked: "unchecked",
193
+ checked: false,
201
194
  onChange: () => {
202
195
  return;
203
196
  },
@@ -208,8 +201,7 @@ export const TreeExample = () => {
208
201
  type="item"
209
202
  visual={FolderIcon}
210
203
  checkbox={{
211
- variant: "checkable",
212
- checked: "unchecked",
204
+ checked: false,
213
205
  onChange: () => {
214
206
  return;
215
207
  },
@@ -227,8 +219,7 @@ export const TreeExample = () => {
227
219
  visual={IntercomLogo}
228
220
  type="item"
229
221
  checkbox={{
230
- variant: "checkable",
231
- checked: "unchecked",
222
+ checked: false,
232
223
  onChange: () => {
233
224
  return;
234
225
  },
@@ -239,8 +230,7 @@ export const TreeExample = () => {
239
230
  type="item"
240
231
  visual={NotionLogo}
241
232
  checkbox={{
242
- variant: "checkable",
243
- checked: "unchecked",
233
+ checked: false,
244
234
  onChange: () => {
245
235
  return;
246
236
  },
@@ -251,8 +241,7 @@ export const TreeExample = () => {
251
241
  type="item"
252
242
  visual={SlackLogo}
253
243
  checkbox={{
254
- variant: "checkable",
255
- checked: "unchecked",
244
+ checked: false,
256
245
  onChange: () => {
257
246
  return;
258
247
  },
@@ -263,8 +252,7 @@ export const TreeExample = () => {
263
252
  type="item"
264
253
  visual={DustIcon}
265
254
  checkbox={{
266
- variant: "checkable",
267
- checked: "unchecked",
255
+ checked: false,
268
256
  onChange: () => {
269
257
  return;
270
258
  },
@@ -346,8 +334,7 @@ export const TreeExample = () => {
346
334
  type="leaf"
347
335
  label="Item 1"
348
336
  checkbox={{
349
- variant: "checkable",
350
- checked: "unchecked",
337
+ checked: false,
351
338
  onChange: () => {
352
339
  return;
353
340
  },
@@ -357,8 +344,7 @@ export const TreeExample = () => {
357
344
  label="Item 2"
358
345
  type="leaf"
359
346
  checkbox={{
360
- variant: "checkable",
361
- checked: "unchecked",
347
+ checked: false,
362
348
  onChange: () => {
363
349
  return;
364
350
  },
@@ -368,8 +354,7 @@ export const TreeExample = () => {
368
354
  label="Item 3"
369
355
  type="leaf"
370
356
  checkbox={{
371
- variant: "checkable",
372
- checked: "unchecked",
357
+ checked: false,
373
358
  onChange: () => {
374
359
  return;
375
360
  },
@@ -408,7 +393,6 @@ export const TreeExample = () => {
408
393
  <Tree.Item
409
394
  label="Item 1"
410
395
  checkbox={{
411
- variant: "checkable",
412
396
  checked: "partial",
413
397
  onChange: () => {
414
398
  return;
@@ -418,8 +402,7 @@ export const TreeExample = () => {
418
402
  <Tree.Item
419
403
  label="Item 2"
420
404
  checkbox={{
421
- variant: "checkable",
422
- checked: "checked",
405
+ checked: true,
423
406
  onChange: () => {
424
407
  return;
425
408
  },
@@ -428,8 +411,7 @@ export const TreeExample = () => {
428
411
  <Tree.Item
429
412
  label="Item 3"
430
413
  checkbox={{
431
- variant: "checkable",
432
- checked: "unchecked",
414
+ checked: false,
433
415
  onChange: () => {
434
416
  return;
435
417
  },
@@ -438,8 +420,7 @@ export const TreeExample = () => {
438
420
  <Tree.Item
439
421
  label="Item 4"
440
422
  checkbox={{
441
- variant: "checkable",
442
- checked: "unchecked",
423
+ checked: false,
443
424
  onChange: () => {
444
425
  return;
445
426
  },
@@ -448,8 +429,7 @@ export const TreeExample = () => {
448
429
  <Tree.Item
449
430
  label="Item 5"
450
431
  checkbox={{
451
- variant: "checkable",
452
- checked: "unchecked",
432
+ checked: false,
453
433
  onChange: () => {
454
434
  return;
455
435
  },
@@ -467,7 +447,6 @@ export const TreeExample = () => {
467
447
  <Tree.Item
468
448
  label="Item 1"
469
449
  checkbox={{
470
- variant: "checkable",
471
450
  checked: "partial",
472
451
  onChange: () => {
473
452
  return;
@@ -477,8 +456,7 @@ export const TreeExample = () => {
477
456
  <Tree.Item
478
457
  label="Item 2"
479
458
  checkbox={{
480
- variant: "checkable",
481
- checked: "checked",
459
+ checked: true,
482
460
  onChange: () => {
483
461
  return;
484
462
  },
@@ -498,8 +476,7 @@ export const TreeExample = () => {
498
476
  type="item"
499
477
  visual={FolderIcon}
500
478
  checkbox={{
501
- variant: "checkable",
502
- checked: "checked",
479
+ checked: true,
503
480
  onChange: () => {
504
481
  return;
505
482
  },
@@ -510,8 +487,7 @@ export const TreeExample = () => {
510
487
  type="item"
511
488
  visual={FolderIcon}
512
489
  checkbox={{
513
- variant: "checkable",
514
- checked: "checked",
490
+ checked: true,
515
491
  onChange: () => {
516
492
  return;
517
493
  },
@@ -522,8 +498,7 @@ export const TreeExample = () => {
522
498
  type="item"
523
499
  visual={FolderIcon}
524
500
  checkbox={{
525
- variant: "checkable",
526
- checked: "unchecked",
501
+ checked: false,
527
502
  onChange: () => {
528
503
  return;
529
504
  },
@@ -534,8 +509,7 @@ export const TreeExample = () => {
534
509
  type="item"
535
510
  visual={FolderIcon}
536
511
  checkbox={{
537
- variant: "checkable",
538
- checked: "unchecked",
512
+ checked: false,
539
513
  onChange: () => {
540
514
  return;
541
515
  },
@@ -546,8 +520,7 @@ export const TreeExample = () => {
546
520
  type="item"
547
521
  visual={FolderIcon}
548
522
  checkbox={{
549
- variant: "checkable",
550
- checked: "unchecked",
523
+ checked: false,
551
524
  onChange: () => {
552
525
  return;
553
526
  },
@@ -565,8 +538,7 @@ export const TreeExample = () => {
565
538
  type="item"
566
539
  visual={IntercomLogo}
567
540
  checkbox={{
568
- variant: "checkable",
569
- checked: "unchecked",
541
+ checked: false,
570
542
  onChange: () => {
571
543
  return;
572
544
  },
@@ -577,8 +549,7 @@ export const TreeExample = () => {
577
549
  type="item"
578
550
  visual={NotionLogo}
579
551
  checkbox={{
580
- variant: "checkable",
581
- checked: "unchecked",
552
+ checked: false,
582
553
  onChange: () => {
583
554
  return;
584
555
  },
@@ -589,8 +560,7 @@ export const TreeExample = () => {
589
560
  type="item"
590
561
  visual={SlackLogo}
591
562
  checkbox={{
592
- variant: "checkable",
593
- checked: "unchecked",
563
+ checked: false,
594
564
  onChange: () => {
595
565
  return;
596
566
  },
@@ -601,8 +571,7 @@ export const TreeExample = () => {
601
571
  type="item"
602
572
  visual={DustIcon}
603
573
  checkbox={{
604
- variant: "checkable",
605
- checked: "unchecked",
574
+ checked: false,
606
575
  onChange: () => {
607
576
  return;
608
577
  },
@@ -772,8 +741,7 @@ export const SelectDataSourceExample = () => {
772
741
  visual={IntercomLogo}
773
742
  size="md"
774
743
  checkbox={{
775
- variant: "checkable",
776
- checked: "unchecked",
744
+ checked: false,
777
745
  onChange: () => {
778
746
  return;
779
747
  },
@@ -785,8 +753,7 @@ export const SelectDataSourceExample = () => {
785
753
  visual={SlackLogo}
786
754
  size="md"
787
755
  checkbox={{
788
- variant: "checkable",
789
- checked: "unchecked",
756
+ checked: false,
790
757
  onChange: () => {
791
758
  return;
792
759
  },
@@ -797,8 +764,7 @@ export const SelectDataSourceExample = () => {
797
764
  visual={NotionLogo}
798
765
  size="md"
799
766
  checkbox={{
800
- variant: "checkable",
801
- checked: "unchecked",
767
+ checked: false,
802
768
  onChange: () => {
803
769
  return;
804
770
  },
@@ -809,8 +775,7 @@ export const SelectDataSourceExample = () => {
809
775
  <Tree.Item
810
776
  label="Item 1"
811
777
  checkbox={{
812
- variant: "checkable",
813
- checked: "unchecked",
778
+ checked: false,
814
779
  onChange: () => {
815
780
  return;
816
781
  },
@@ -819,8 +784,7 @@ export const SelectDataSourceExample = () => {
819
784
  <Tree.Item
820
785
  label="Item 2"
821
786
  checkbox={{
822
- variant: "checkable",
823
- checked: "unchecked",
787
+ checked: false,
824
788
  onChange: () => {
825
789
  return;
826
790
  },
@@ -829,8 +793,7 @@ export const SelectDataSourceExample = () => {
829
793
  <Tree.Item
830
794
  label="Item 3"
831
795
  checkbox={{
832
- variant: "checkable",
833
- checked: "unchecked",
796
+ checked: false,
834
797
  onChange: () => {
835
798
  return;
836
799
  },
@@ -839,8 +802,7 @@ export const SelectDataSourceExample = () => {
839
802
  <Tree.Item
840
803
  label="Item 4"
841
804
  checkbox={{
842
- variant: "checkable",
843
- checked: "unchecked",
805
+ checked: false,
844
806
  onChange: () => {
845
807
  return;
846
808
  },
@@ -853,8 +815,7 @@ export const SelectDataSourceExample = () => {
853
815
  visual={DriveLogo}
854
816
  size="md"
855
817
  checkbox={{
856
- variant: "checkable",
857
- checked: "unchecked",
818
+ checked: false,
858
819
  onChange: () => {
859
820
  return;
860
821
  },