@dust-tt/sparkle 0.2.224 → 0.2.225

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 (34) hide show
  1. package/dist/cjs/index.js +13 -43
  2. package/dist/cjs/index.js.map +1 -1
  3. package/dist/esm/components/Breadcrumbs.d.ts +7 -6
  4. package/dist/esm/components/Breadcrumbs.d.ts.map +1 -1
  5. package/dist/esm/components/Breadcrumbs.js +3 -2
  6. package/dist/esm/components/Breadcrumbs.js.map +1 -1
  7. package/dist/esm/components/DataTable.d.ts.map +1 -1
  8. package/dist/esm/components/DataTable.js +2 -4
  9. package/dist/esm/components/DataTable.js.map +1 -1
  10. package/dist/esm/components/DropdownMenu.d.ts +10 -10
  11. package/dist/esm/components/DropdownMenu.d.ts.map +1 -1
  12. package/dist/esm/components/DropdownMenu.js +7 -7
  13. package/dist/esm/components/DropdownMenu.js.map +1 -1
  14. package/dist/esm/components/Item.d.ts +18 -15
  15. package/dist/esm/components/Item.d.ts.map +1 -1
  16. package/dist/esm/components/Item.js +2 -1
  17. package/dist/esm/components/Item.js.map +1 -1
  18. package/dist/esm/stories/DataTable.stories.d.ts.map +1 -1
  19. package/dist/esm/stories/DataTable.stories.js +4 -3
  20. package/dist/esm/stories/DataTable.stories.js.map +1 -1
  21. package/dist/esm/stories/DropdownMenu.stories.d.ts.map +1 -1
  22. package/dist/esm/stories/DropdownMenu.stories.js +32 -31
  23. package/dist/esm/stories/DropdownMenu.stories.js.map +1 -1
  24. package/dist/esm/stories/Item.stories.d.ts.map +1 -1
  25. package/dist/esm/stories/Item.stories.js +8 -6
  26. package/dist/esm/stories/Item.stories.js.map +1 -1
  27. package/package.json +1 -1
  28. package/src/components/Breadcrumbs.tsx +11 -10
  29. package/src/components/DataTable.tsx +2 -6
  30. package/src/components/DropdownMenu.tsx +13 -13
  31. package/src/components/Item.tsx +20 -16
  32. package/src/stories/DataTable.stories.tsx +4 -3
  33. package/src/stories/DropdownMenu.stories.tsx +43 -31
  34. package/src/stories/Item.stories.tsx +26 -6
package/src/stories/DropdownMenu.stories.tsx CHANGED
@@ -51,44 +51,53 @@ export const DropdownExample = () => {
51
51
  <DropdownMenu.Button label="Action" />
52
52
  <DropdownMenu.Items width={220}>
53
53
  <DropdownMenu.SectionHeader label="Edition" />
54
- <DropdownMenu.Item label="Edit" href="#" icon={PencilSquareIcon} />
54
+ <DropdownMenu.Item
55
+ label="Edit"
56
+ link={{ href: "#" }}
57
+ icon={PencilSquareIcon}
58
+ />
55
59
  <DropdownMenu.Item
56
60
  label="Duplicate (New)"
57
- href="#"
61
+ link={{ href: "#" }}
58
62
  icon={ClipboardIcon}
59
63
  />
60
64
  <DropdownMenu.Item
61
65
  label="Archive"
62
- href="#"
66
+ link={{ href: "#" }}
63
67
  icon={TrashIcon}
64
68
  variant="warning"
65
69
  />
70
+ <DropdownMenu.Item
71
+ label="Dust site"
72
+ link={{ href: "https://dust.tt", target: "_blank" }}
73
+ icon={EyeIcon}
74
+ />
66
75
  <DropdownMenu.SectionHeader label="Sharing" />
67
76
  <DropdownMenu.Item
68
77
  label="Company Assistant"
69
- href="#"
78
+ link={{ href: "#" }}
70
79
  icon={PlanetIcon}
71
80
  />
72
81
  <DropdownMenu.Item
73
82
  label="Shared Assistant"
74
- href="#"
83
+ link={{ href: "#" }}
75
84
  selected
76
85
  icon={UserGroupIcon}
77
86
  />
78
87
  <DropdownMenu.Item
79
88
  label="Personal Assistant"
80
- href="#"
89
+ link={{ href: "#" }}
81
90
  icon={LockIcon}
82
91
  />
83
92
  <DropdownMenu.SectionHeader label="My Assistants" />
84
93
  <DropdownMenu.Item
85
94
  label="Add to my list"
86
- href="#"
95
+ link={{ href: "#" }}
87
96
  icon={ListAddIcon}
88
97
  />
89
98
  <DropdownMenu.Item
90
99
  label="Remove from my list"
91
- href="#"
100
+ link={{ href: "#" }}
92
101
  icon={ListRemoveIcon}
93
102
  />
94
103
  </DropdownMenu.Items>
@@ -305,11 +314,14 @@ export const DropdownExample = () => {
305
314
  tooltipPosition="below"
306
315
  />
307
316
  <DropdownMenu.Items origin="topLeft" width={120}>
308
- <DropdownMenu.Item label="item 1 is longish" href="#" />
309
- <DropdownMenu.Item label="item 2 is also longer" href="#" />
317
+ <DropdownMenu.Item label="item 1 is longish" link={{ href: "#" }} />
318
+ <DropdownMenu.Item
319
+ label="item 2 is also longer"
320
+ link={{ href: "#" }}
321
+ />
310
322
  <DropdownMenu.Item
311
323
  label="item with a long title because it is long"
312
- href="#"
324
+ link={{ href: "#" }}
313
325
  />
314
326
  </DropdownMenu.Items>
315
327
  </DropdownMenu>
@@ -320,8 +332,8 @@ export const DropdownExample = () => {
320
332
  <DropdownMenu>
321
333
  <DropdownMenu.Button label="Moonlab" icon={PlanetIcon} />
322
334
  <DropdownMenu.Items>
323
- <DropdownMenu.Item label="item 1" href="#" />
324
- <DropdownMenu.Item label="item 2" href="#" />
335
+ <DropdownMenu.Item label="item 1" link={{ href: "#" }} />
336
+ <DropdownMenu.Item label="item 2" link={{ href: "#" }} />
325
337
  </DropdownMenu.Items>
326
338
  </DropdownMenu>
327
339
  </div>
@@ -331,8 +343,8 @@ export const DropdownExample = () => {
331
343
  <DropdownMenu>
332
344
  <DropdownMenu.Button label="Moonlab" icon={PlanetIcon} size="md" />
333
345
  <DropdownMenu.Items>
334
- <DropdownMenu.Item label="item 1" href="#" />
335
- <DropdownMenu.Item label="item 2" href="#" />
346
+ <DropdownMenu.Item label="item 1" link={{ href: "#" }} />
347
+ <DropdownMenu.Item label="item 2" link={{ href: "#" }} />
336
348
  </DropdownMenu.Items>
337
349
  </DropdownMenu>
338
350
  </div>
@@ -346,11 +358,11 @@ export const DropdownExample = () => {
346
358
  tooltipPosition="below"
347
359
  />
348
360
  <DropdownMenu.Items origin="topLeft">
349
- <DropdownMenu.Item label="item 1" href="#" />
350
- <DropdownMenu.Item label="item 2" href="#" />
361
+ <DropdownMenu.Item label="item 1" link={{ href: "#" }} />
362
+ <DropdownMenu.Item label="item 2" link={{ href: "#" }} />
351
363
  <DropdownMenu.Item
352
364
  label="item 2 with a long title because it is long"
353
- href="#"
365
+ link={{ href: "#" }}
354
366
  />
355
367
  </DropdownMenu.Items>
356
368
  </DropdownMenu>
@@ -361,8 +373,8 @@ export const DropdownExample = () => {
361
373
  <DropdownMenu>
362
374
  <DropdownMenu.Button icon={ChatBubbleBottomCenterTextIcon} />
363
375
  <DropdownMenu.Items origin="bottomLeft">
364
- <DropdownMenu.Item label="item 1" href="#" />
365
- <DropdownMenu.Item label="item 2" href="#" />
376
+ <DropdownMenu.Item label="item 1" link={{ href: "#" }} />
377
+ <DropdownMenu.Item label="item 2" link={{ href: "#" }} />
366
378
  </DropdownMenu.Items>
367
379
  </DropdownMenu>
368
380
  </div>
@@ -372,8 +384,8 @@ export const DropdownExample = () => {
372
384
  <DropdownMenu>
373
385
  <DropdownMenu.Button icon={ChatBubbleBottomCenterTextIcon} />
374
386
  <DropdownMenu.Items origin="bottomRight">
375
- <DropdownMenu.Item label="item 1" href="#" />
376
- <DropdownMenu.Item label="item 2" href="#" />
387
+ <DropdownMenu.Item label="item 1" link={{ href: "#" }} />
388
+ <DropdownMenu.Item label="item 2" link={{ href: "#" }} />
377
389
  </DropdownMenu.Items>
378
390
  </DropdownMenu>
379
391
  </div>
@@ -387,8 +399,8 @@ export const DropdownExample = () => {
387
399
  disabled
388
400
  />
389
401
  <DropdownMenu.Items>
390
- <DropdownMenu.Item label="item 1" href="#" />
391
- <DropdownMenu.Item label="item 2" href="#" />
402
+ <DropdownMenu.Item label="item 1" link={{ href: "#" }} />
403
+ <DropdownMenu.Item label="item 2" link={{ href: "#" }} />
392
404
  </DropdownMenu.Items>
393
405
  </DropdownMenu>
394
406
  </div>
@@ -398,8 +410,8 @@ export const DropdownExample = () => {
398
410
  <DropdownMenu>
399
411
  <DropdownMenu.Button type="select" label="Every 6 months" />
400
412
  <DropdownMenu.Items origin="topRight">
401
- <DropdownMenu.Item label="item 1" href="#" />
402
- <DropdownMenu.Item label="item 2" href="#" />
413
+ <DropdownMenu.Item label="item 1" link={{ href: "#" }} />
414
+ <DropdownMenu.Item label="item 2" link={{ href: "#" }} />
403
415
  </DropdownMenu.Items>
404
416
  </DropdownMenu>
405
417
  </div>
@@ -413,7 +425,7 @@ export const DropdownExample = () => {
413
425
  </DropdownMenu.Button>
414
426
  <DropdownMenu.Items origin="topRight">
415
427
  {["item 1", "item 2", "item 3"].map((item) => (
416
- <DropdownMenu.Item label={item} href="#" key={item} />
428
+ <DropdownMenu.Item label={item} link={{ href: "#" }} key={item} />
417
429
  ))}
418
430
  </DropdownMenu.Items>
419
431
  </DropdownMenu>
@@ -486,8 +498,8 @@ export const DropdownExample = () => {
486
498
  <DropdownMenu>
487
499
  <DropdownMenu.Button label="Nested" />
488
500
  <DropdownMenu.Items origin="topRight">
489
- <DropdownMenu.Item label="item 1" href="#" />
490
- <DropdownMenu.Item label="item 2" href="#" />
501
+ <DropdownMenu.Item label="item 1" link={{ href: "#" }} />
502
+ <DropdownMenu.Item label="item 2" link={{ href: "#" }} />
491
503
  </DropdownMenu.Items>
492
504
  </DropdownMenu>
493
505
  </DropdownMenu.Items>
@@ -498,8 +510,8 @@ export const DropdownExample = () => {
498
510
  <DropdownMenu>
499
511
  <DropdownMenu.Button label="Moonlab" icon={PlanetIcon} />
500
512
  <DropdownMenu.Items origin="auto">
501
- <DropdownMenu.Item label="item 1" href="#" />
502
- <DropdownMenu.Item label="item 2" href="#" />
513
+ <DropdownMenu.Item label="item 1" link={{ href: "#" }} />
514
+ <DropdownMenu.Item label="item 2" link={{ href: "#" }} />
503
515
  </DropdownMenu.Items>
504
516
  </DropdownMenu>
505
517
  </div>
package/src/stories/Item.stories.tsx CHANGED
@@ -82,8 +82,8 @@ export const ListItemExample = () => (
82
82
  <DropdownMenu>
83
83
  <DropdownMenu.Button label="Dust" />
84
84
  <DropdownMenu.Items>
85
- <DropdownMenu.Item label="item 1" href="#" />
86
- <DropdownMenu.Item label="item 2" href="#" />
85
+ <DropdownMenu.Item label="item 1" link={{ href: "#" }} />
86
+ <DropdownMenu.Item label="item 2" link={{ href: "#" }} />
87
87
  </DropdownMenu.Items>
88
88
  </DropdownMenu>
89
89
  </div>
@@ -91,8 +91,16 @@ export const ListItemExample = () => (
91
91
  <DropdownMenu>
92
92
  <DropdownMenu.Button label="Dust" />
93
93
  <DropdownMenu.Items>
94
- <DropdownMenu.Item label="item 1" href="#" icon={Cog6ToothIcon} />
95
- <DropdownMenu.Item label="item 2" href="#" icon={Cog6ToothIcon} />
94
+ <DropdownMenu.Item
95
+ label="item 1"
96
+ link={{ href: "#" }}
97
+ icon={Cog6ToothIcon}
98
+ />
99
+ <DropdownMenu.Item
100
+ label="item 2"
101
+ link={{ href: "#" }}
102
+ icon={Cog6ToothIcon}
103
+ />
96
104
  </DropdownMenu.Items>
97
105
  </DropdownMenu>
98
106
  </div>
@@ -102,13 +110,25 @@ export const ListItemExample = () => (
102
110
  <DropdownMenu.Items>
103
111
  <DropdownMenu.Item
104
112
  label="item 1"
105
- href="#"
113
+ link={{ href: "#" }}
114
+ icon={Cog6ToothIcon}
115
+ description="Desciption of the item"
116
+ />
117
+ <DropdownMenu.Item
118
+ label="Dust site"
119
+ link={{ href: "https://dust.tt", target: "_blank" }}
120
+ icon={Cog6ToothIcon}
121
+ description="Desciption of the item"
122
+ />
123
+ <DropdownMenu.Item
124
+ label="item 1"
125
+ link={{ href: "#" }}
106
126
  icon={Cog6ToothIcon}
107
127
  description="Desciption of the item"
108
128
  />
109
129
  <DropdownMenu.Item
110
130
  label="item 2"
111
- href="#"
131
+ link={{ href: "#" }}
112
132
  icon={Cog6ToothIcon}
113
133
  description="Desciption of the item"
114
134
  />