@dust-tt/sparkle 0.2.190 → 0.2.192

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 (72) hide show
  1. package/dist/cjs/_index.d.ts +4 -4
  2. package/dist/cjs/components/Hoverable.d.ts +2 -1
  3. package/dist/cjs/components/Tree.d.ts +2 -1
  4. package/dist/cjs/icons/solid/ChatBubbleThought.d.ts +4 -0
  5. package/dist/cjs/icons/solid/Fire.d.ts +4 -0
  6. package/dist/cjs/icons/solid/Tag.d.ts +4 -0
  7. package/dist/cjs/icons/solid/index.d.ts +3 -1
  8. package/dist/cjs/icons/stroke/ChatBubbleThought.d.ts +4 -0
  9. package/dist/cjs/icons/stroke/Fire.d.ts +4 -0
  10. package/dist/cjs/icons/stroke/Tag.d.ts +4 -0
  11. package/dist/cjs/icons/stroke/index.d.ts +3 -1
  12. package/dist/cjs/index.js +57 -27
  13. package/dist/cjs/index.js.map +1 -1
  14. package/dist/esm/_index.d.ts +4 -4
  15. package/dist/esm/components/Hoverable.d.ts +2 -1
  16. package/dist/esm/components/Tree.d.ts +2 -1
  17. package/dist/esm/icons/solid/ChatBubbleThought.d.ts +4 -0
  18. package/dist/esm/icons/solid/Fire.d.ts +4 -0
  19. package/dist/esm/icons/solid/Tag.d.ts +4 -0
  20. package/dist/esm/icons/solid/index.d.ts +3 -1
  21. package/dist/esm/icons/stroke/ChatBubbleThought.d.ts +4 -0
  22. package/dist/esm/icons/stroke/Fire.d.ts +4 -0
  23. package/dist/esm/icons/stroke/Tag.d.ts +4 -0
  24. package/dist/esm/icons/stroke/index.d.ts +3 -1
  25. package/dist/esm/index.js +52 -26
  26. package/dist/esm/index.js.map +1 -1
  27. package/dist/tsconfig.tsbuildinfo +1 -1
  28. package/package.json +1 -1
  29. package/src/_index.ts +12 -4
  30. package/src/components/Checkbox.tsx +5 -5
  31. package/src/components/Hoverable.tsx +10 -4
  32. package/src/components/Input.tsx +2 -2
  33. package/src/components/Modal.tsx +6 -1
  34. package/src/components/TextArea.tsx +1 -1
  35. package/src/components/Tree.tsx +10 -2
  36. package/src/icons/solid/ChatBubbleThought.tsx +20 -0
  37. package/src/icons/solid/ExternalLink.tsx +2 -2
  38. package/src/icons/solid/Fire.tsx +18 -0
  39. package/src/icons/solid/Tag.tsx +20 -0
  40. package/src/icons/solid/index.ts +3 -1
  41. package/src/icons/src/solid/chat-bubble-thought.svg +3 -0
  42. package/src/icons/src/solid/chevron-right.svg +1 -1
  43. package/src/icons/src/solid/external-link.svg +2 -2
  44. package/src/icons/src/solid/fire.svg +3 -0
  45. package/src/icons/src/solid/tag.svg +3 -0
  46. package/src/icons/src/solid/triangle.svg +1 -1
  47. package/src/icons/src/stroke/arrow-left.svg +1 -1
  48. package/src/icons/src/stroke/chat-bubble-thought.svg +6 -0
  49. package/src/icons/src/stroke/chevron-right.svg +1 -1
  50. package/src/icons/src/stroke/external-link.svg +2 -2
  51. package/src/icons/src/stroke/fire.svg +3 -0
  52. package/src/icons/src/stroke/list-check.svg +4 -4
  53. package/src/icons/src/stroke/tag.svg +4 -0
  54. package/src/icons/src/stroke/triangle.svg +1 -1
  55. package/src/icons/stroke/ChatBubbleThought.tsx +24 -0
  56. package/src/icons/stroke/ExternalLink.tsx +2 -2
  57. package/src/icons/stroke/Fire.tsx +18 -0
  58. package/src/icons/stroke/Tag.tsx +21 -0
  59. package/src/icons/stroke/index.ts +3 -1
  60. package/src/logo/platforms/Gpt3.tsx +2 -2
  61. package/src/logo/platforms/Gpt4.tsx +2 -2
  62. package/src/stories/Hoverable.stories.tsx +11 -1
  63. package/src/stories/TextArea.stories.tsx +1 -1
  64. package/src/stories/Tree.stories.tsx +553 -272
  65. package/dist/cjs/icons/solid/HandHeart.d.ts +0 -4
  66. package/dist/cjs/icons/stroke/HandHeart.d.ts +0 -4
  67. package/dist/esm/icons/solid/HandHeart.d.ts +0 -4
  68. package/dist/esm/icons/stroke/HandHeart.d.ts +0 -4
  69. package/src/icons/solid/HandHeart.tsx +0 -18
  70. package/src/icons/src/solid/hand-heart.svg +0 -3
  71. package/src/icons/src/stroke/hand-heart.svg +0 -3
  72. package/src/icons/stroke/HandHeart.tsx +0 -18
package/src/stories/Tree.stories.tsx CHANGED
@@ -23,282 +23,563 @@ export default meta;
23
23
 
24
24
  export const TreeExample = () => {
25
25
  return (
26
- <div className="s-flex s-gap-10">
27
- <div className="s-flex s-flex-col s-gap-3">
28
- <div className="s-text-xl">Tree</div>
29
- <div>
30
- <Tree>
31
- <Tree.Item label="item 1 (no children)" variant="folder" />
32
- <Tree.Item label="item 2 (loading)" variant="folder">
33
- <Tree isLoading />
34
- </Tree.Item>
35
- <Tree.Item label="item 3" variant="folder">
36
- <Tree>
37
- <Tree.Item
38
- type="leaf"
39
- label="item 1"
40
- checkbox={{
41
- variant: "checkable",
42
- checked: false,
43
- onChange: () => {
44
- return;
45
- },
46
- }}
47
- />
48
- <Tree.Item
49
- label="item 2"
50
- type="leaf"
51
- checkbox={{
52
- variant: "checkable",
53
- checked: false,
54
- onChange: () => {
55
- return;
56
- },
57
- }}
58
- />
59
- <Tree.Item
60
- label="item 3"
61
- type="leaf"
62
- checkbox={{
63
- variant: "checkable",
64
- checked: false,
65
- onChange: () => {
66
- return;
67
- },
68
- }}
69
- />
70
- </Tree>
71
- </Tree.Item>
72
- <Tree.Item
73
- label="item 4 (forced collapsed)"
74
- variant="folder"
75
- collapsed={true}
76
- >
77
- <Tree>
78
- <Tree.Item label="item 1" />
79
- </Tree>
80
- </Tree.Item>
81
- <Tree.Item
82
- label="item 5 (forced expanded)"
83
- variant="folder"
84
- collapsed={false}
85
- >
86
- <Tree>
87
- <Tree.Item label="item 1" />
88
- </Tree>
89
- </Tree.Item>
90
- <Tree.Item
91
- label="item 6 (default collapsed)"
92
- variant="folder"
93
- defaultCollapsed={true}
94
- >
95
- <Tree>
96
- <Tree.Item
97
- label="item 1"
98
- checkbox={{
99
- variant: "checkable",
100
- checked: true,
101
- partialChecked: true,
102
- onChange: () => {
103
- return;
104
- },
105
- }}
106
- />
107
- <Tree.Item
108
- label="item 2"
109
- checkbox={{
110
- variant: "checkable",
111
- checked: true,
112
- onChange: () => {
113
- return;
114
- },
115
- }}
116
- />
117
- <Tree.Item
118
- label="item 3"
119
- checkbox={{
120
- variant: "checkable",
121
- checked: false,
122
- onChange: () => {
123
- return;
124
- },
125
- }}
126
- />
127
- <Tree.Item
128
- label="item 4"
129
- checkbox={{
130
- variant: "checkable",
131
- checked: false,
132
- onChange: () => {
133
- return;
134
- },
135
- }}
136
- />
137
- <Tree.Item
138
- label="item 5"
139
- checkbox={{
140
- variant: "checkable",
141
- checked: false,
142
- onChange: () => {
143
- return;
144
- },
145
- }}
146
- />
147
- </Tree>
148
- </Tree.Item>
26
+ <div className="s-flex s-flex-col s-gap-10">
27
+ <div className="s-flex s-gap-10">
28
+ <div className="s-flex s-flex-col s-gap-3">
29
+ <div className="s-text-xl">Tree</div>
30
+ <div>
31
+ <Tree isBoxed>
32
+ <Tree.Item label="item 1 (no children)" variant="folder" />
33
+ <Tree.Item label="item 2 (loading)" variant="folder">
34
+ <Tree isLoading />
35
+ </Tree.Item>
36
+ <Tree.Item label="item 3" variant="folder">
37
+ <Tree>
38
+ <Tree.Item
39
+ type="leaf"
40
+ label="item 1"
41
+ checkbox={{
42
+ variant: "checkable",
43
+ checked: false,
44
+ onChange: () => {
45
+ return;
46
+ },
47
+ }}
48
+ />
49
+ <Tree.Item
50
+ label="item 2"
51
+ type="leaf"
52
+ checkbox={{
53
+ variant: "checkable",
54
+ checked: false,
55
+ onChange: () => {
56
+ return;
57
+ },
58
+ }}
59
+ />
60
+ <Tree.Item
61
+ label="item 3"
62
+ type="leaf"
63
+ checkbox={{
64
+ variant: "checkable",
65
+ checked: false,
66
+ onChange: () => {
67
+ return;
68
+ },
69
+ }}
70
+ />
71
+ </Tree>
72
+ </Tree.Item>
73
+ <Tree.Item
74
+ label="item 4 (forced collapsed)"
75
+ variant="folder"
76
+ collapsed={true}
77
+ >
78
+ <Tree>
79
+ <Tree.Item label="item 1" />
80
+ </Tree>
81
+ </Tree.Item>
82
+ <Tree.Item
83
+ label="item 5 (forced expanded)"
84
+ variant="folder"
85
+ collapsed={false}
86
+ >
87
+ <Tree>
88
+ <Tree.Item label="item 1" />
89
+ </Tree>
90
+ </Tree.Item>
91
+ <Tree.Item
92
+ label="item 6 (default collapsed)"
93
+ variant="folder"
94
+ defaultCollapsed={true}
95
+ >
96
+ <Tree>
97
+ <Tree.Item
98
+ label="item 1"
99
+ checkbox={{
100
+ variant: "checkable",
101
+ checked: true,
102
+ partialChecked: true,
103
+ onChange: () => {
104
+ return;
105
+ },
106
+ }}
107
+ />
108
+ <Tree.Item
109
+ label="item 2"
110
+ checkbox={{
111
+ variant: "checkable",
112
+ checked: true,
113
+ onChange: () => {
114
+ return;
115
+ },
116
+ }}
117
+ />
118
+ <Tree.Item
119
+ label="item 3"
120
+ checkbox={{
121
+ variant: "checkable",
122
+ checked: false,
123
+ onChange: () => {
124
+ return;
125
+ },
126
+ }}
127
+ />
128
+ <Tree.Item
129
+ label="item 4"
130
+ checkbox={{
131
+ variant: "checkable",
132
+ checked: false,
133
+ onChange: () => {
134
+ return;
135
+ },
136
+ }}
137
+ />
138
+ <Tree.Item
139
+ label="item 5"
140
+ checkbox={{
141
+ variant: "checkable",
142
+ checked: false,
143
+ onChange: () => {
144
+ return;
145
+ },
146
+ }}
147
+ />
148
+ </Tree>
149
+ </Tree.Item>
149
150
 
150
- <Tree.Item
151
- label="item 7 (default expanded)"
152
- variant="folder"
153
- defaultCollapsed={false}
154
- >
155
- <Tree>
156
- <Tree.Item
157
- label="item 1"
158
- checkbox={{
159
- variant: "checkable",
160
- checked: true,
161
- partialChecked: true,
162
- onChange: () => {
163
- return;
164
- },
165
- }}
166
- />
167
- <Tree.Item
168
- label="item 2"
169
- checkbox={{
170
- variant: "checkable",
171
- checked: true,
172
- onChange: () => {
173
- return;
174
- },
175
- }}
176
- />
177
- </Tree>
178
- </Tree.Item>
179
- </Tree>
151
+ <Tree.Item
152
+ label="item 7 (default expanded)"
153
+ variant="folder"
154
+ defaultCollapsed={false}
155
+ >
156
+ <Tree>
157
+ <Tree.Item
158
+ label="item 1"
159
+ checkbox={{
160
+ variant: "checkable",
161
+ checked: true,
162
+ partialChecked: true,
163
+ onChange: () => {
164
+ return;
165
+ },
166
+ }}
167
+ />
168
+ <Tree.Item
169
+ label="item 2"
170
+ checkbox={{
171
+ variant: "checkable",
172
+ checked: true,
173
+ onChange: () => {
174
+ return;
175
+ },
176
+ }}
177
+ />
178
+ </Tree>
179
+ </Tree.Item>
180
+ </Tree>
181
+ </div>
180
182
  </div>
181
- </div>
182
- <div className="s-flex s-flex-col s-gap-3">
183
- <div className="s-text-xl">Flat</div>
184
- <div>
185
- <Tree>
186
- <Tree.Item
187
- label="item 1"
188
- type="item"
189
- variant="channel"
190
- checkbox={{
191
- variant: "checkable",
192
- checked: true,
193
- onChange: () => {
194
- return;
195
- },
196
- }}
197
- />
198
- <Tree.Item
199
- label="item 2"
200
- type="item"
201
- variant="channel"
202
- checkbox={{
203
- variant: "checkable",
204
- checked: true,
205
- onChange: () => {
206
- return;
207
- },
208
- }}
209
- />
210
- <Tree.Item
211
- label="item 3"
212
- type="item"
213
- variant="channel"
214
- checkbox={{
215
- variant: "checkable",
216
- checked: false,
217
- onChange: () => {
218
- return;
219
- },
220
- }}
221
- />
222
- <Tree.Item
223
- label="item 4"
224
- type="item"
225
- variant="channel"
226
- checkbox={{
227
- variant: "checkable",
228
- checked: false,
229
- onChange: () => {
230
- return;
231
- },
232
- }}
233
- />
234
- <Tree.Item
235
- label="item 5"
236
- type="item"
237
- variant="channel"
238
- checkbox={{
239
- variant: "checkable",
240
- checked: false,
241
- onChange: () => {
242
- return;
243
- },
244
- }}
245
- />
246
- </Tree>
183
+ <div className="s-flex s-flex-col s-gap-3">
184
+ <div className="s-text-xl">Flat</div>
185
+ <div>
186
+ <Tree isBoxed>
187
+ <Tree.Item
188
+ label="item 1"
189
+ type="item"
190
+ variant="channel"
191
+ checkbox={{
192
+ variant: "checkable",
193
+ checked: true,
194
+ onChange: () => {
195
+ return;
196
+ },
197
+ }}
198
+ />
199
+ <Tree.Item
200
+ label="item 2"
201
+ type="item"
202
+ variant="channel"
203
+ checkbox={{
204
+ variant: "checkable",
205
+ checked: true,
206
+ onChange: () => {
207
+ return;
208
+ },
209
+ }}
210
+ />
211
+ <Tree.Item
212
+ label="item 3"
213
+ type="item"
214
+ variant="channel"
215
+ checkbox={{
216
+ variant: "checkable",
217
+ checked: false,
218
+ onChange: () => {
219
+ return;
220
+ },
221
+ }}
222
+ />
223
+ <Tree.Item
224
+ label="item 4"
225
+ type="item"
226
+ variant="channel"
227
+ checkbox={{
228
+ variant: "checkable",
229
+ checked: false,
230
+ onChange: () => {
231
+ return;
232
+ },
233
+ }}
234
+ />
235
+ <Tree.Item
236
+ label="item 5"
237
+ type="item"
238
+ variant="channel"
239
+ checkbox={{
240
+ variant: "checkable",
241
+ checked: false,
242
+ onChange: () => {
243
+ return;
244
+ },
245
+ }}
246
+ />
247
+ </Tree>
248
+ </div>
249
+ </div>
250
+ <div className="s-flex s-flex-col s-gap-3">
251
+ <div className="s-text-xl">With custom visual</div>
252
+ <div>
253
+ <Tree isBoxed>
254
+ <Tree.Item
255
+ label="Intercom"
256
+ type="item"
257
+ visual={<IntercomLogo className="s-h-5 s-w-5" />}
258
+ checkbox={{
259
+ variant: "checkable",
260
+ checked: false,
261
+ onChange: () => {
262
+ return;
263
+ },
264
+ }}
265
+ />
266
+ <Tree.Item
267
+ label="Notion"
268
+ type="item"
269
+ visual={<NotionLogo className="s-h-5 s-w-5" />}
270
+ checkbox={{
271
+ variant: "checkable",
272
+ checked: false,
273
+ onChange: () => {
274
+ return;
275
+ },
276
+ }}
277
+ />
278
+ <Tree.Item
279
+ label="Slack"
280
+ type="item"
281
+ visual={<SlackLogo className="s-h-5 s-w-5" />}
282
+ checkbox={{
283
+ variant: "checkable",
284
+ checked: false,
285
+ onChange: () => {
286
+ return;
287
+ },
288
+ }}
289
+ />
290
+ <Tree.Item
291
+ label="Dust"
292
+ type="item"
293
+ visual={<Dust color="pink" className="s-h-5 s-w-5" />}
294
+ checkbox={{
295
+ variant: "checkable",
296
+ checked: false,
297
+ onChange: () => {
298
+ return;
299
+ },
300
+ }}
301
+ />
302
+ </Tree>
303
+ </div>
247
304
  </div>
248
305
  </div>
249
- <div className="s-flex s-flex-col s-gap-3">
250
- <div className="s-text-xl">With custom visual</div>
251
- <div>
252
- <Tree>
253
- <Tree.Item
254
- label="Intercom"
255
- type="item"
256
- visual={<IntercomLogo className="s-h-5 s-w-5" />}
257
- checkbox={{
258
- variant: "checkable",
259
- checked: false,
260
- onChange: () => {
261
- return;
262
- },
263
- }}
264
- />
265
- <Tree.Item
266
- label="Notion"
267
- type="item"
268
- visual={<NotionLogo className="s-h-5 s-w-5" />}
269
- checkbox={{
270
- variant: "checkable",
271
- checked: false,
272
- onChange: () => {
273
- return;
274
- },
275
- }}
276
- />
277
- <Tree.Item
278
- label="Slack"
279
- type="item"
280
- visual={<SlackLogo className="s-h-5 s-w-5" />}
281
- checkbox={{
282
- variant: "checkable",
283
- checked: false,
284
- onChange: () => {
285
- return;
286
- },
287
- }}
288
- />
289
- <Tree.Item
290
- label="Dust"
291
- type="item"
292
- visual={<Dust color="pink" className="s-h-5 s-w-5" />}
293
- checkbox={{
294
- variant: "checkable",
295
- checked: false,
296
- onChange: () => {
297
- return;
298
- },
299
- }}
300
- />
301
- </Tree>
306
+ <div className="s-flex s-gap-10">
307
+ <div className="s-flex s-flex-col s-gap-3">
308
+ <div className="s-text-xl">Tree</div>
309
+ <div>
310
+ <Tree>
311
+ <Tree.Item label="item 1 (no children)" variant="folder" />
312
+ <Tree.Item label="item 2 (loading)" variant="folder">
313
+ <Tree isLoading />
314
+ </Tree.Item>
315
+ <Tree.Item label="item 3" variant="folder">
316
+ <Tree>
317
+ <Tree.Item
318
+ type="leaf"
319
+ label="item 1"
320
+ checkbox={{
321
+ variant: "checkable",
322
+ checked: false,
323
+ onChange: () => {
324
+ return;
325
+ },
326
+ }}
327
+ />
328
+ <Tree.Item
329
+ label="item 2"
330
+ type="leaf"
331
+ checkbox={{
332
+ variant: "checkable",
333
+ checked: false,
334
+ onChange: () => {
335
+ return;
336
+ },
337
+ }}
338
+ />
339
+ <Tree.Item
340
+ label="item 3"
341
+ type="leaf"
342
+ checkbox={{
343
+ variant: "checkable",
344
+ checked: false,
345
+ onChange: () => {
346
+ return;
347
+ },
348
+ }}
349
+ />
350
+ </Tree>
351
+ </Tree.Item>
352
+ <Tree.Item
353
+ label="item 4 (forced collapsed)"
354
+ variant="folder"
355
+ collapsed={true}
356
+ >
357
+ <Tree>
358
+ <Tree.Item label="item 1" />
359
+ </Tree>
360
+ </Tree.Item>
361
+ <Tree.Item
362
+ label="item 5 (forced expanded)"
363
+ variant="folder"
364
+ collapsed={false}
365
+ >
366
+ <Tree>
367
+ <Tree.Item label="item 1" />
368
+ </Tree>
369
+ </Tree.Item>
370
+ <Tree.Item
371
+ label="item 6 (default collapsed)"
372
+ variant="folder"
373
+ defaultCollapsed={true}
374
+ >
375
+ <Tree>
376
+ <Tree.Item
377
+ label="item 1"
378
+ checkbox={{
379
+ variant: "checkable",
380
+ checked: true,
381
+ partialChecked: true,
382
+ onChange: () => {
383
+ return;
384
+ },
385
+ }}
386
+ />
387
+ <Tree.Item
388
+ label="item 2"
389
+ checkbox={{
390
+ variant: "checkable",
391
+ checked: true,
392
+ onChange: () => {
393
+ return;
394
+ },
395
+ }}
396
+ />
397
+ <Tree.Item
398
+ label="item 3"
399
+ checkbox={{
400
+ variant: "checkable",
401
+ checked: false,
402
+ onChange: () => {
403
+ return;
404
+ },
405
+ }}
406
+ />
407
+ <Tree.Item
408
+ label="item 4"
409
+ checkbox={{
410
+ variant: "checkable",
411
+ checked: false,
412
+ onChange: () => {
413
+ return;
414
+ },
415
+ }}
416
+ />
417
+ <Tree.Item
418
+ label="item 5"
419
+ checkbox={{
420
+ variant: "checkable",
421
+ checked: false,
422
+ onChange: () => {
423
+ return;
424
+ },
425
+ }}
426
+ />
427
+ </Tree>
428
+ </Tree.Item>
429
+
430
+ <Tree.Item
431
+ label="item 7 (default expanded)"
432
+ variant="folder"
433
+ defaultCollapsed={false}
434
+ >
435
+ <Tree>
436
+ <Tree.Item
437
+ label="item 1"
438
+ checkbox={{
439
+ variant: "checkable",
440
+ checked: true,
441
+ partialChecked: true,
442
+ onChange: () => {
443
+ return;
444
+ },
445
+ }}
446
+ />
447
+ <Tree.Item
448
+ label="item 2"
449
+ checkbox={{
450
+ variant: "checkable",
451
+ checked: true,
452
+ onChange: () => {
453
+ return;
454
+ },
455
+ }}
456
+ />
457
+ </Tree>
458
+ </Tree.Item>
459
+ </Tree>
460
+ </div>
461
+ </div>
462
+ <div className="s-flex s-flex-col s-gap-3">
463
+ <div className="s-text-xl">Flat</div>
464
+ <div>
465
+ <Tree>
466
+ <Tree.Item
467
+ label="item 1"
468
+ type="item"
469
+ variant="channel"
470
+ checkbox={{
471
+ variant: "checkable",
472
+ checked: true,
473
+ onChange: () => {
474
+ return;
475
+ },
476
+ }}
477
+ />
478
+ <Tree.Item
479
+ label="item 2"
480
+ type="item"
481
+ variant="channel"
482
+ checkbox={{
483
+ variant: "checkable",
484
+ checked: true,
485
+ onChange: () => {
486
+ return;
487
+ },
488
+ }}
489
+ />
490
+ <Tree.Item
491
+ label="item 3"
492
+ type="item"
493
+ variant="channel"
494
+ checkbox={{
495
+ variant: "checkable",
496
+ checked: false,
497
+ onChange: () => {
498
+ return;
499
+ },
500
+ }}
501
+ />
502
+ <Tree.Item
503
+ label="item 4"
504
+ type="item"
505
+ variant="channel"
506
+ checkbox={{
507
+ variant: "checkable",
508
+ checked: false,
509
+ onChange: () => {
510
+ return;
511
+ },
512
+ }}
513
+ />
514
+ <Tree.Item
515
+ label="item 5"
516
+ type="item"
517
+ variant="channel"
518
+ checkbox={{
519
+ variant: "checkable",
520
+ checked: false,
521
+ onChange: () => {
522
+ return;
523
+ },
524
+ }}
525
+ />
526
+ </Tree>
527
+ </div>
528
+ </div>
529
+ <div className="s-flex s-flex-col s-gap-3">
530
+ <div className="s-text-xl">With custom visual</div>
531
+ <div>
532
+ <Tree>
533
+ <Tree.Item
534
+ label="Intercom"
535
+ type="item"
536
+ visual={<IntercomLogo className="s-h-5 s-w-5" />}
537
+ checkbox={{
538
+ variant: "checkable",
539
+ checked: false,
540
+ onChange: () => {
541
+ return;
542
+ },
543
+ }}
544
+ />
545
+ <Tree.Item
546
+ label="Notion"
547
+ type="item"
548
+ visual={<NotionLogo className="s-h-5 s-w-5" />}
549
+ checkbox={{
550
+ variant: "checkable",
551
+ checked: false,
552
+ onChange: () => {
553
+ return;
554
+ },
555
+ }}
556
+ />
557
+ <Tree.Item
558
+ label="Slack"
559
+ type="item"
560
+ visual={<SlackLogo className="s-h-5 s-w-5" />}
561
+ checkbox={{
562
+ variant: "checkable",
563
+ checked: false,
564
+ onChange: () => {
565
+ return;
566
+ },
567
+ }}
568
+ />
569
+ <Tree.Item
570
+ label="Dust"
571
+ type="item"
572
+ visual={<Dust color="pink" className="s-h-5 s-w-5" />}
573
+ checkbox={{
574
+ variant: "checkable",
575
+ checked: false,
576
+ onChange: () => {
577
+ return;
578
+ },
579
+ }}
580
+ />
581
+ </Tree>
582
+ </div>
302
583
  </div>
303
584
  </div>
304
585
  </div>