@reshape-biotech/design-system 2.7.26 → 2.7.27

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 (8) hide show
  1. package/dist/components/dropdown/Dropdown.stories.svelte +106 -82
  2. package/dist/components/dropdown/components/dropdown-item.svelte +14 -6
  3. package/dist/components/dropdown/components/dropdown-sub-trigger.svelte +20 -12
  4. package/dist/components/dropdown/components/dropdown-trigger.svelte +3 -3
  5. package/dist/components/dropdown/types.d.ts +10 -3
  6. package/dist/components/status-badge/StatusBadge.svelte +5 -0
  7. package/dist/echarts-config.js +2 -1
  8. package/package.json +1 -1
package/dist/components/dropdown/Dropdown.stories.svelte CHANGED
@@ -19,10 +19,10 @@
19
19
  <Dropdown.Trigger>Dropdown</Dropdown.Trigger>
20
20
  <Dropdown.Portal>
21
21
  <Dropdown.Content>
22
- <Dropdown.Item>
22
+ <Dropdown.Item onSelect={() => console.log('Clicked: 1st item')}>
23
23
  <p>1st item</p>
24
24
  </Dropdown.Item>
25
- <Dropdown.Item>
25
+ <Dropdown.Item onSelect={() => console.log('Clicked: 2nd item')}>
26
26
  <p>2nd item</p>
27
27
  </Dropdown.Item>
28
28
  </Dropdown.Content>
@@ -218,9 +218,9 @@
218
218
  </Story>
219
219
 
220
220
  <Story name="Match Trigger Width">
221
- <div class="bg-base flex gap-8 p-12">
221
+ <div class="flex gap-8 bg-base p-12">
222
222
  <div>
223
- <p class="text-secondary mb-2 text-sm">Without matchTriggerWidth</p>
223
+ <p class="mb-2 text-sm text-secondary">Without matchTriggerWidth</p>
224
224
  <Dropdown.Root open>
225
225
  <Dropdown.Trigger class="w-64">Wide Trigger Button</Dropdown.Trigger>
226
226
  <Dropdown.Portal>
@@ -237,7 +237,7 @@
237
237
  </div>
238
238
 
239
239
  <div>
240
- <p class="text-secondary mb-2 text-sm">With matchTriggerWidth</p>
240
+ <p class="mb-2 text-sm text-secondary">With matchTriggerWidth</p>
241
241
  <Dropdown.Root open>
242
242
  <Dropdown.Trigger class="w-64">Wide Trigger Button</Dropdown.Trigger>
243
243
  <Dropdown.Portal>
@@ -259,7 +259,7 @@
259
259
  <div class="py-12">
260
260
  <Dropdown.Root open>
261
261
  <Dropdown.Trigger>
262
- {#snippet customChild({ props })}
262
+ {#snippet child({ props }: { props: Record<string, any> })}
263
263
  <button
264
264
  {...props}
265
265
  class="flex items-center gap-2 rounded-full bg-gradient-to-r from-purple-500 to-pink-500 px-6 py-3 text-white hover:from-purple-600 hover:to-pink-600"
@@ -271,10 +271,10 @@
271
271
  </Dropdown.Trigger>
272
272
  <Dropdown.Portal>
273
273
  <Dropdown.Content>
274
- <Dropdown.Item>
274
+ <Dropdown.Item onSelect={() => console.log('Clicked: 1st item (custom trigger)')}>
275
275
  <p>1st item</p>
276
276
  </Dropdown.Item>
277
- <Dropdown.Item>
277
+ <Dropdown.Item onSelect={() => console.log('Clicked: 2nd item (custom trigger)')}>
278
278
  <p>2nd item</p>
279
279
  </Dropdown.Item>
280
280
  </Dropdown.Content>
@@ -289,28 +289,26 @@
289
289
  <Dropdown.Trigger>Menu with Submenu</Dropdown.Trigger>
290
290
  <Dropdown.Portal>
291
291
  <Dropdown.Content matchTriggerWidth>
292
- <Dropdown.Item>
292
+ <Dropdown.Item onSelect={() => console.log('Clicked: First item')}>
293
293
  <p>First item</p>
294
294
  </Dropdown.Item>
295
- <Dropdown.Sub>
295
+ <Dropdown.Sub open>
296
296
  <Dropdown.SubTrigger side="right">
297
297
  <p>More options</p>
298
298
  </Dropdown.SubTrigger>
299
- <Dropdown.Portal>
300
- <Dropdown.SubContent side="right">
301
- <Dropdown.Item>
302
- <p>Sub item 1</p>
303
- </Dropdown.Item>
304
- <Dropdown.Item>
305
- <p>Sub item 2</p>
306
- </Dropdown.Item>
307
- <Dropdown.Item>
308
- <p>Sub item 3</p>
309
- </Dropdown.Item>
310
- </Dropdown.SubContent>
311
- </Dropdown.Portal>
299
+ <Dropdown.SubContent side="right">
300
+ <Dropdown.Item onSelect={() => console.log('Clicked: Sub item 1')}>
301
+ <p>Sub item 1</p>
302
+ </Dropdown.Item>
303
+ <Dropdown.Item onSelect={() => console.log('Clicked: Sub item 2')}>
304
+ <p>Sub item 2</p>
305
+ </Dropdown.Item>
306
+ <Dropdown.Item onSelect={() => console.log('Clicked: Sub item 3')}>
307
+ <p>Sub item 3</p>
308
+ </Dropdown.Item>
309
+ </Dropdown.SubContent>
312
310
  </Dropdown.Sub>
313
- <Dropdown.Item>
311
+ <Dropdown.Item onSelect={() => console.log('Clicked: Last item')}>
314
312
  <p>Last item</p>
315
313
  </Dropdown.Item>
316
314
  </Dropdown.Content>
@@ -325,28 +323,26 @@
325
323
  <Dropdown.Trigger>Menu with Left Submenu</Dropdown.Trigger>
326
324
  <Dropdown.Portal>
327
325
  <Dropdown.Content>
328
- <Dropdown.Item>
326
+ <Dropdown.Item onSelect={() => console.log('Clicked: First item (left menu)')}>
329
327
  <p>First item</p>
330
328
  </Dropdown.Item>
331
- <Dropdown.Sub>
329
+ <Dropdown.Sub open>
332
330
  <Dropdown.SubTrigger side="left">
333
331
  <p>More options</p>
334
332
  </Dropdown.SubTrigger>
335
- <Dropdown.Portal>
336
- <Dropdown.SubContent side="left">
337
- <Dropdown.Item>
338
- <p>Sub item 1</p>
339
- </Dropdown.Item>
340
- <Dropdown.Item>
341
- <p>Sub item 2</p>
342
- </Dropdown.Item>
343
- <Dropdown.Item>
344
- <p>Sub item 3</p>
345
- </Dropdown.Item>
346
- </Dropdown.SubContent>
347
- </Dropdown.Portal>
333
+ <Dropdown.SubContent side="left">
334
+ <Dropdown.Item onSelect={() => console.log('Clicked: Sub item 1 (left submenu)')}>
335
+ <p>Sub item 1</p>
336
+ </Dropdown.Item>
337
+ <Dropdown.Item onSelect={() => console.log('Clicked: Sub item 2 (left submenu)')}>
338
+ <p>Sub item 2</p>
339
+ </Dropdown.Item>
340
+ <Dropdown.Item onSelect={() => console.log('Clicked: Sub item 3 (left submenu)')}>
341
+ <p>Sub item 3</p>
342
+ </Dropdown.Item>
343
+ </Dropdown.SubContent>
348
344
  </Dropdown.Sub>
349
- <Dropdown.Item>
345
+ <Dropdown.Item onSelect={() => console.log('Clicked: Last item (left menu)')}>
350
346
  <p>Last item</p>
351
347
  </Dropdown.Item>
352
348
  </Dropdown.Content>
@@ -368,34 +364,30 @@
368
364
  <Dropdown.SubTrigger>
369
365
  <p>Settings</p>
370
366
  </Dropdown.SubTrigger>
371
- <Dropdown.Portal>
372
- <Dropdown.SubContent>
373
- <Dropdown.Item>
374
- <p>Profile</p>
375
- </Dropdown.Item>
376
- <Dropdown.Sub>
377
- <Dropdown.SubTrigger>
378
- <p>Preferences</p>
379
- </Dropdown.SubTrigger>
380
- <Dropdown.Portal>
381
- <Dropdown.SubContent>
382
- <Dropdown.Item>
383
- <p>Theme</p>
384
- </Dropdown.Item>
385
- <Dropdown.Item>
386
- <p>Language</p>
387
- </Dropdown.Item>
388
- <Dropdown.Item>
389
- <p>Notifications</p>
390
- </Dropdown.Item>
391
- </Dropdown.SubContent>
392
- </Dropdown.Portal>
393
- </Dropdown.Sub>
394
- <Dropdown.Item>
395
- <p>Security</p>
396
- </Dropdown.Item>
397
- </Dropdown.SubContent>
398
- </Dropdown.Portal>
367
+ <Dropdown.SubContent>
368
+ <Dropdown.Item>
369
+ <p>Profile</p>
370
+ </Dropdown.Item>
371
+ <Dropdown.Sub>
372
+ <Dropdown.SubTrigger>
373
+ <p>Preferences</p>
374
+ </Dropdown.SubTrigger>
375
+ <Dropdown.SubContent>
376
+ <Dropdown.Item>
377
+ <p>Theme</p>
378
+ </Dropdown.Item>
379
+ <Dropdown.Item>
380
+ <p>Language</p>
381
+ </Dropdown.Item>
382
+ <Dropdown.Item>
383
+ <p>Notifications</p>
384
+ </Dropdown.Item>
385
+ </Dropdown.SubContent>
386
+ </Dropdown.Sub>
387
+ <Dropdown.Item>
388
+ <p>Security</p>
389
+ </Dropdown.Item>
390
+ </Dropdown.SubContent>
399
391
  </Dropdown.Sub>
400
392
  <Dropdown.Item>
401
393
  <p>Help</p>
@@ -419,16 +411,48 @@
419
411
  <Dropdown.SubTrigger>
420
412
  <p>More options</p>
421
413
  </Dropdown.SubTrigger>
422
- <Dropdown.Portal>
423
- <Dropdown.SubContent variant="secondary">
424
- <Dropdown.Item>
425
- <p>Sub item 1</p>
426
- </Dropdown.Item>
427
- <Dropdown.Item>
428
- <p>Sub item 2</p>
429
- </Dropdown.Item>
430
- </Dropdown.SubContent>
431
- </Dropdown.Portal>
414
+ <Dropdown.SubContent variant="secondary">
415
+ <Dropdown.Item>
416
+ <p>Sub item 1</p>
417
+ </Dropdown.Item>
418
+ <Dropdown.Item>
419
+ <p>Sub item 2</p>
420
+ </Dropdown.Item>
421
+ </Dropdown.SubContent>
422
+ </Dropdown.Sub>
423
+ <Dropdown.Item>
424
+ <p>Last item</p>
425
+ </Dropdown.Item>
426
+ </Dropdown.Content>
427
+ </Dropdown.Portal>
428
+ </Dropdown.Root>
429
+ </div>
430
+ </Story>
431
+
432
+ <Story name="Submenu without Chevron">
433
+ <div class="py-12">
434
+ <Dropdown.Root open>
435
+ <Dropdown.Trigger>Menu without Chevron</Dropdown.Trigger>
436
+ <Dropdown.Portal>
437
+ <Dropdown.Content>
438
+ <Dropdown.Item>
439
+ <p>First item</p>
440
+ </Dropdown.Item>
441
+ <Dropdown.Sub open>
442
+ <Dropdown.SubTrigger hideChevron>
443
+ <p>More options (no chevron)</p>
444
+ </Dropdown.SubTrigger>
445
+ <Dropdown.SubContent>
446
+ <Dropdown.Item>
447
+ <p>Sub item 1</p>
448
+ </Dropdown.Item>
449
+ <Dropdown.Item>
450
+ <p>Sub item 2</p>
451
+ </Dropdown.Item>
452
+ <Dropdown.Item>
453
+ <p>Sub item 3</p>
454
+ </Dropdown.Item>
455
+ </Dropdown.SubContent>
432
456
  </Dropdown.Sub>
433
457
  <Dropdown.Item>
434
458
  <p>Last item</p>
@@ -472,21 +496,21 @@
472
496
  <Dropdown.Portal>
473
497
  <Dropdown.Content>
474
498
  <Dropdown.Item
475
- onclick={() => {
499
+ onSelect={() => {
476
500
  selectedOption = 'Option 1';
477
501
  }}
478
502
  >
479
503
  <p>Option 1</p>
480
504
  </Dropdown.Item>
481
505
  <Dropdown.Item
482
- onclick={() => {
506
+ onSelect={() => {
483
507
  selectedOption = 'Option 2';
484
508
  }}
485
509
  >
486
510
  <p>Option 2</p>
487
511
  </Dropdown.Item>
488
512
  <Dropdown.Item
489
- onclick={() => {
513
+ onSelect={() => {
490
514
  selectedOption = 'Option 3';
491
515
  }}
492
516
  >
@@ -497,7 +521,7 @@
497
521
  </Dropdown.Root>
498
522
 
499
523
  {#if selectedOption}
500
- <div class="bg-neutral mt-4 rounded p-2">
524
+ <div class="mt-4 rounded bg-neutral p-2">
501
525
  <p>You selected: <strong>{selectedOption}</strong></p>
502
526
  </div>
503
527
  {/if}
package/dist/components/dropdown/components/dropdown-item.svelte CHANGED
@@ -2,12 +2,20 @@
2
2
  import { DropdownMenu } from 'bits-ui';
3
3
  import type { DropdownItemProps } from '../types';
4
4
 
5
- let { children, class: className = '', ...restProps }: DropdownItemProps = $props();
5
+ let { children, child: userChild, class: className = '', onSelect, ...restProps }: DropdownItemProps = $props();
6
6
  </script>
7
7
 
8
- <DropdownMenu.Item
9
- class="cursor-pointer rounded-lg px-2 py-1.5 text-sm outline-none transition-colors hover:bg-neutral-hover focus:bg-neutral-hover data-[disabled]:pointer-events-none data-[disabled]:opacity-50 {className}"
10
- {...restProps}
11
- >
12
- {@render children()}
8
+ <DropdownMenu.Item onSelect={onSelect} {...restProps}>
9
+ {#snippet child({ props }: { props: Record<string, any> })}
10
+ {#if userChild}
11
+ {@render userChild({ props })}
12
+ {:else}
13
+ <div
14
+ {...props}
15
+ class="h-8 cursor-pointer rounded-lg px-2 py-1.5 text-sm outline-none transition-colors hover:bg-neutral-hover focus:bg-neutral-hover data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_a]:no-underline {className}"
16
+ >
17
+ {@render children?.()}
18
+ </div>
19
+ {/if}
20
+ {/snippet}
13
21
  </DropdownMenu.Item>
package/dist/components/dropdown/components/dropdown-sub-trigger.svelte CHANGED
@@ -5,20 +5,28 @@
5
5
  import { Icon } from '../../icons/index.js';
6
6
  import type { DropdownSubTriggerProps } from '../types';
7
7
 
8
- let { children, class: className = '', side = 'right', ...restProps }: DropdownSubTriggerProps = $props();
8
+ let { children, child: userChild, class: className = '', side = 'right', hideChevron = false, ...restProps }: DropdownSubTriggerProps = $props();
9
9
 
10
10
  let chevronIcon = $derived(side === 'left' ? CaretLeft : CaretRight);
11
11
  </script>
12
12
 
13
- <DropdownMenu.SubTrigger
14
- class="flex cursor-pointer items-center justify-between gap-2 rounded-lg px-2 py-1.5 text-sm outline-none transition-colors hover:bg-neutral-hover focus:bg-neutral-hover data-[disabled]:pointer-events-none data-[disabled]:opacity-50 {className}"
15
- {...restProps}
16
- >
17
- {#if side === 'left'}
18
- <Icon color="tertiary" icon={chevronIcon} size={16} />
19
- {/if}
20
- {@render children()}
21
- {#if side === 'right'}
22
- <Icon color="tertiary" icon={chevronIcon} size={16} />
23
- {/if}
13
+ <DropdownMenu.SubTrigger {...restProps}>
14
+ {#snippet child({ props }: { props: Record<string, any> })}
15
+ {#if userChild}
16
+ {@render userChild({ props })}
17
+ {:else}
18
+ <div
19
+ {...props}
20
+ class="flex h-8 cursor-pointer items-center justify-between gap-2 rounded-lg px-2 py-1.5 text-sm outline-none transition-colors hover:bg-neutral-hover focus:bg-neutral-hover data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_a]:no-underline {className}"
21
+ >
22
+ {#if !hideChevron && side === 'left'}
23
+ <Icon color="tertiary" icon={chevronIcon} size={16} />
24
+ {/if}
25
+ {@render children?.()}
26
+ {#if !hideChevron && side === 'right'}
27
+ <Icon color="tertiary" icon={chevronIcon} size={16} />
28
+ {/if}
29
+ </div>
30
+ {/if}
31
+ {/snippet}
24
32
  </DropdownMenu.SubTrigger>
package/dist/components/dropdown/components/dropdown-trigger.svelte CHANGED
@@ -5,7 +5,7 @@
5
5
 
6
6
  let {
7
7
  children,
8
- customChild,
8
+ child: userChild,
9
9
  class: className = '',
10
10
  variant = 'primary',
11
11
  size = 'md',
@@ -15,8 +15,8 @@
15
15
 
16
16
  <DropdownMenu.Trigger {...restProps}>
17
17
  {#snippet child({ props }: { props: Record<string, any> })}
18
- {#if customChild}
19
- {@render customChild({ props })}
18
+ {#if userChild}
19
+ {@render userChild({ props })}
20
20
  {:else}
21
21
  <Button {...props} {variant} {size} class={className}>
22
22
  {@render children?.()}
package/dist/components/dropdown/types.d.ts CHANGED
@@ -5,7 +5,7 @@ export type DropdownContentVariant = 'primary' | 'secondary';
5
5
  export type DropdownSubMenuSide = 'left' | 'right';
6
6
  export type DropdownTriggerProps = {
7
7
  children?: Snippet;
8
- customChild?: Snippet<[{
8
+ child?: Snippet<[{
9
9
  props: Record<string, any>;
10
10
  }]>;
11
11
  class?: string;
@@ -23,13 +23,20 @@ export type DropdownContentProps = {
23
23
  matchTriggerWidth?: boolean;
24
24
  } & BitsDropdownMenuContentProps;
25
25
  export type DropdownItemProps = {
26
- children: Snippet;
26
+ children?: Snippet;
27
+ child?: Snippet<[{
28
+ props: Record<string, any>;
29
+ }]>;
27
30
  class?: string;
28
31
  } & BitsDropdownMenuItemProps;
29
32
  export type DropdownSubTriggerProps = {
30
- children: Snippet;
33
+ children?: Snippet;
34
+ child?: Snippet<[{
35
+ props: Record<string, any>;
36
+ }]>;
31
37
  class?: string;
32
38
  side?: DropdownSubMenuSide;
39
+ hideChevron?: boolean;
33
40
  } & BitsDropdownMenuSubTriggerProps;
34
41
  export type DropdownSubContentProps = {
35
42
  children: Snippet;
package/dist/components/status-badge/StatusBadge.svelte CHANGED
@@ -41,7 +41,12 @@
41
41
 
42
42
  <style>
43
43
  .badge {
44
+ display: inline-flex;
45
+ flex-direction: row;
46
+ align-items: center;
47
+ justify-content: center;
44
48
  gap: 0.5rem;
49
+ border-radius: 9999px;
45
50
  border-style: none;
46
51
  --tw-text-opacity: 1;
47
52
  color: rgb(18 25 42 / var(--tw-text-opacity, 1))
package/dist/echarts-config.js CHANGED
@@ -3,7 +3,7 @@
3
3
  // Core components (required)
4
4
  import * as echarts from 'echarts/core';
5
5
  // Charts we use
6
- import { CandlestickChart, LineChart } from 'echarts/charts';
6
+ import { BoxplotChart, CandlestickChart, LineChart } from 'echarts/charts';
7
7
  import { BarChart } from 'echarts/charts';
8
8
  import { ScatterChart } from 'echarts/charts';
9
9
  import { CustomChart } from 'echarts/charts';
@@ -19,6 +19,7 @@ echarts.use([
19
19
  ScatterChart,
20
20
  CustomChart,
21
21
  CandlestickChart,
22
+ BoxplotChart,
22
23
  // Components
23
24
  TooltipComponent,
24
25
  GridComponent,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@reshape-biotech/design-system",
3
- "version": "2.7.26",
3
+ "version": "2.7.27",
4
4
  "scripts": {
5
5
  "dev": "vite dev",
6
6
  "build": "vite build",