@reshape-biotech/design-system 1.2.5 → 1.2.7

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 (175) hide show
  1. package/README.md +3 -1
  2. package/dist/app.css +97 -97
  3. package/dist/components/activity/Activity.stories.svelte +104 -104
  4. package/dist/components/activity/Activity.svelte +112 -112
  5. package/dist/components/avatar/Avatar.stories.svelte +23 -23
  6. package/dist/components/avatar/Avatar.svelte +54 -54
  7. package/dist/components/banner/Banner.stories.svelte +105 -105
  8. package/dist/components/banner/Banner.svelte +42 -42
  9. package/dist/components/button/Button.stories.svelte +61 -61
  10. package/dist/components/button/Button.svelte +95 -95
  11. package/dist/components/card/Card.stories.svelte +112 -112
  12. package/dist/components/card/Card.svelte +18 -18
  13. package/dist/components/checkbox/Checkbox.stories.svelte +8 -8
  14. package/dist/components/checkbox/Checkbox.svelte +17 -17
  15. package/dist/components/collapsible/Collapsible.stories.svelte +26 -26
  16. package/dist/components/collapsible/components/collapsible-content.svelte +20 -20
  17. package/dist/components/collapsible/components/collapsible-trigger.svelte +12 -12
  18. package/dist/components/combobox/Combobox.stories.svelte +412 -412
  19. package/dist/components/combobox/components/combobox-add.svelte +8 -8
  20. package/dist/components/combobox/components/combobox-content.svelte +39 -39
  21. package/dist/components/combobox/components/combobox-indicator.svelte +1 -1
  22. package/dist/components/datepicker/DatePicker.stories.svelte +196 -196
  23. package/dist/components/datepicker/DatePicker.svelte +173 -173
  24. package/dist/components/divider/Divider.stories.svelte +7 -7
  25. package/dist/components/divider/Divider.svelte +9 -9
  26. package/dist/components/drawer/Drawer.stories.svelte +51 -51
  27. package/dist/components/drawer/Drawer.svelte +33 -33
  28. package/dist/components/drawer/DrawerLabel.svelte +10 -10
  29. package/dist/components/dropdown/Dropdown.stories.svelte +210 -210
  30. package/dist/components/dropdown/Dropdown.svelte +57 -57
  31. package/dist/components/dropdown/components/DropdownContent.svelte +16 -16
  32. package/dist/components/dropdown/components/DropdownMenu.svelte +10 -10
  33. package/dist/components/dropdown/components/DropdownTrigger.svelte +37 -37
  34. package/dist/components/dropdown/components/OutlinedButton.svelte +9 -9
  35. package/dist/components/empty-content/EmptyContent.stories.svelte +38 -38
  36. package/dist/components/empty-content/EmptyContent.svelte +12 -12
  37. package/dist/components/graphs/bar-chart/BarChart.stories.svelte +91 -91
  38. package/dist/components/graphs/bar-chart/BarChart.svelte +147 -147
  39. package/dist/components/graphs/bar-chart/StackedBarChart.stories.svelte +57 -57
  40. package/dist/components/graphs/bar-chart/StackedBarChart.svelte +198 -199
  41. package/dist/components/graphs/chart/Chart.stories.svelte +96 -96
  42. package/dist/components/graphs/chart/Chart.svelte +207 -207
  43. package/dist/components/graphs/line/LineChart.stories.svelte +138 -138
  44. package/dist/components/graphs/line/LineChart.svelte +140 -142
  45. package/dist/components/graphs/matrix/Matrix.stories.svelte +117 -117
  46. package/dist/components/graphs/matrix/Matrix.svelte +141 -141
  47. package/dist/components/graphs/multiline/MultiLineChart.stories.svelte +168 -168
  48. package/dist/components/graphs/multiline/MultiLineChart.svelte +236 -236
  49. package/dist/components/graphs/scatterplot/Scatterplot.stories.svelte +84 -84
  50. package/dist/components/graphs/scatterplot/Scatterplot.svelte +302 -302
  51. package/dist/components/graphs/utils/duration.d.ts +1 -0
  52. package/dist/components/graphs/utils/duration.js +33 -0
  53. package/dist/components/graphs/utils/tooltipFormatter.js +1 -1
  54. package/dist/components/icon-button/IconButton.stories.svelte +64 -64
  55. package/dist/components/icon-button/IconButton.svelte +88 -88
  56. package/dist/components/icons/AnalysisIcon.stories.svelte +18 -18
  57. package/dist/components/icons/AnalysisIcon.svelte +96 -96
  58. package/dist/components/icons/Icon.stories.svelte +111 -111
  59. package/dist/components/icons/Icon.svelte +17 -17
  60. package/dist/components/icons/PrincipalIcon.svelte +59 -59
  61. package/dist/components/icons/custom/Halo.svelte +31 -31
  62. package/dist/components/icons/custom/Well.svelte +27 -27
  63. package/dist/components/icons/index.d.ts +3 -2
  64. package/dist/components/icons/index.js +3 -1
  65. package/dist/components/image/Image.svelte +42 -42
  66. package/dist/components/input/Input.stories.svelte +55 -55
  67. package/dist/components/input/Input.svelte +121 -121
  68. package/dist/components/label/Label.stories.svelte +18 -18
  69. package/dist/components/label/Label.svelte +11 -11
  70. package/dist/components/list/List.stories.svelte +84 -84
  71. package/dist/components/list/List.svelte +20 -20
  72. package/dist/components/logo/Logo.stories.svelte +15 -15
  73. package/dist/components/logo/Logo.svelte +30 -30
  74. package/dist/components/manual-cfu-counter/ManualCFUCounter.stories.svelte +102 -102
  75. package/dist/components/manual-cfu-counter/ManualCFUCounter.svelte +557 -565
  76. package/dist/components/manual-cfu-counter/test/ManualCFUCounterTestWrapper.svelte +11 -11
  77. package/dist/components/markdown/Markdown.stories.svelte +10 -10
  78. package/dist/components/markdown/Markdown.svelte +6 -6
  79. package/dist/components/modal/Modal.stories.svelte +29 -29
  80. package/dist/components/modal/Modal.svelte +71 -71
  81. package/dist/components/multi-cfu-counter/MultiCFUCounter.stories.svelte +215 -0
  82. package/dist/components/multi-cfu-counter/MultiCFUCounter.stories.svelte.d.ts +3 -0
  83. package/dist/components/multi-cfu-counter/MultiCFUCounter.svelte +662 -0
  84. package/dist/components/multi-cfu-counter/MultiCFUCounter.svelte.d.ts +32 -0
  85. package/dist/components/multi-cfu-counter/index.d.ts +1 -0
  86. package/dist/components/multi-cfu-counter/index.js +1 -0
  87. package/dist/components/multi-cfu-counter/test/MultiCFUCounterTestWrapper.svelte +28 -0
  88. package/dist/components/multi-cfu-counter/test/MultiCFUCounterTestWrapper.svelte.d.ts +20 -0
  89. package/dist/components/notification-popup/NotificationPopup.stories.svelte +18 -18
  90. package/dist/components/notification-popup/NotificationPopup.svelte +26 -26
  91. package/dist/components/notifications/Notifications.stories.svelte +101 -101
  92. package/dist/components/notifications/Notifications.svelte +9 -9
  93. package/dist/components/pill/Pill.stories.svelte +8 -8
  94. package/dist/components/pill/Pill.svelte +27 -27
  95. package/dist/components/progress-circle/ProgressCircle.stories.svelte +8 -8
  96. package/dist/components/progress-circle/ProgressCircle.svelte +54 -54
  97. package/dist/components/required-status-indicator/RequiredStatusIndicator.stories.svelte +18 -18
  98. package/dist/components/required-status-indicator/RequiredStatusIndicator.svelte +14 -14
  99. package/dist/components/segmented-control-buttons/ControlButton.svelte +36 -36
  100. package/dist/components/segmented-control-buttons/SegmentedControlButtons.stories.svelte +35 -35
  101. package/dist/components/segmented-control-buttons/SegmentedControlButtons.svelte +13 -13
  102. package/dist/components/select/Select.stories.svelte +77 -77
  103. package/dist/components/select/Select.svelte +114 -114
  104. package/dist/components/select-new/Select.stories.svelte +188 -188
  105. package/dist/components/select-new/components/Group.svelte +17 -17
  106. package/dist/components/select-new/components/MultiSelectTrigger.svelte +57 -57
  107. package/dist/components/select-new/components/SelectContent.svelte +22 -22
  108. package/dist/components/select-new/components/SelectGroupHeading.svelte +10 -10
  109. package/dist/components/select-new/components/SelectItem.svelte +25 -25
  110. package/dist/components/select-new/components/SelectTrigger.svelte +38 -38
  111. package/dist/components/sjsf-wrappers/SjsfNumberInputWrapper.svelte +76 -76
  112. package/dist/components/sjsf-wrappers/SjsfNumberInputWrapper.svelte.d.ts +1 -1
  113. package/dist/components/sjsf-wrappers/SjsfTextInputWrapper.svelte +53 -53
  114. package/dist/components/sjsf-wrappers/SjsfTextInputWrapper.svelte.d.ts +1 -1
  115. package/dist/components/sjsf-wrappers/sjsfCustomTheme.js +1 -1
  116. package/dist/components/skeleton-loader/SkeletonLoader.stories.svelte +32 -32
  117. package/dist/components/skeleton-loader/SkeletonLoader.svelte +10 -10
  118. package/dist/components/skeleton-loader/StatcardSkeleton.svelte +9 -9
  119. package/dist/components/skeleton-loader/components/Skeleton.svelte +7 -7
  120. package/dist/components/skeleton-loader/components/SkeletonImage.svelte +12 -12
  121. package/dist/components/slider/Slider.stories.svelte +23 -23
  122. package/dist/components/slider/Slider.svelte +107 -107
  123. package/dist/components/spinner/Spinner.stories.svelte +8 -8
  124. package/dist/components/spinner/Spinner.svelte +18 -18
  125. package/dist/components/stat-card/StatCard.stories.svelte +26 -26
  126. package/dist/components/stat-card/StatCard.svelte +128 -128
  127. package/dist/components/status-badge/StatusBadge.stories.svelte +365 -365
  128. package/dist/components/status-badge/StatusBadge.svelte +54 -54
  129. package/dist/components/stepper/Stepper.stories.svelte +219 -219
  130. package/dist/components/stepper/components/stepper-root.svelte +12 -12
  131. package/dist/components/stepper/components/stepper-step.svelte +83 -83
  132. package/dist/components/table/Table.stories.svelte +87 -87
  133. package/dist/components/table/Table.svelte +32 -32
  134. package/dist/components/table/components/TBody.svelte +7 -7
  135. package/dist/components/table/components/THead.svelte +7 -7
  136. package/dist/components/table/components/Td.svelte +8 -8
  137. package/dist/components/table/components/Th.svelte +8 -8
  138. package/dist/components/table/components/Tr.svelte +11 -11
  139. package/dist/components/tabs/Tabs.stories.svelte +20 -20
  140. package/dist/components/tabs/Tabs.svelte +8 -8
  141. package/dist/components/tabs/components/Content.svelte +8 -8
  142. package/dist/components/tabs/components/Tab.svelte +14 -14
  143. package/dist/components/tabs/components/Tabs.svelte +7 -7
  144. package/dist/components/tag/Tag.stories.svelte +57 -57
  145. package/dist/components/tag/Tag.svelte +95 -95
  146. package/dist/components/textarea/Textarea.stories.svelte +70 -70
  147. package/dist/components/textarea/Textarea.svelte +76 -76
  148. package/dist/components/toast/Toast.stories.svelte +204 -204
  149. package/dist/components/toast/Toast.svelte +53 -53
  150. package/dist/components/toggle/Toggle.stories.svelte +9 -9
  151. package/dist/components/toggle/Toggle.svelte +53 -53
  152. package/dist/components/toggle-icon-button/ToggleIconButton.stories.svelte +152 -152
  153. package/dist/components/toggle-icon-button/ToggleIconButton.svelte +99 -99
  154. package/dist/components/tooltip/Tooltip.stories.svelte +105 -105
  155. package/dist/components/tooltip/Tooltip.svelte +26 -26
  156. package/dist/fonts/index.js +1 -1
  157. package/dist/index.d.ts +4 -1
  158. package/dist/index.js +5 -1
  159. package/dist/notifications.d.ts +1 -4
  160. package/dist/notifications.js +1 -1
  161. package/dist/styles.d.ts +1 -0
  162. package/dist/styles.js +4 -0
  163. package/dist/tailwind-safelist.js +406 -398
  164. package/dist/tailwind.preset.d.ts +4 -0
  165. package/dist/tailwind.preset.js +10 -10
  166. package/dist/tokens/colors.d.ts +246 -0
  167. package/dist/tokens/colors.js +139 -0
  168. package/dist/tokens/index.d.ts +3 -0
  169. package/dist/tokens/index.js +5 -0
  170. package/dist/tokens/typography.d.ts +48 -0
  171. package/dist/tokens/typography.js +48 -0
  172. package/dist/tokens.d.ts +16 -252
  173. package/dist/tokens.js +33 -164
  174. package/dist/types/fonts.d.ts +2 -2
  175. package/package.json +398 -78
package/dist/components/stepper/Stepper.stories.svelte CHANGED
@@ -1,243 +1,243 @@
1
1
  <script module lang="ts">
2
- import { defineMeta } from '@storybook/addon-svelte-csf';
3
- import * as Stepper from './index';
4
- import StepperComponent from './components/stepper-root.svelte';
2
+ import { defineMeta } from '@storybook/addon-svelte-csf';
3
+ import * as Stepper from './index';
4
+ import StepperComponent from './components/stepper-root.svelte';
5
5
 
6
- const { Story } = defineMeta({
7
- title: 'Design System/Stepper',
8
- component: StepperComponent,
9
- tags: ['autodocs'],
10
- argTypes: {
11
- class: { control: 'text', description: 'Additional CSS classes' },
12
- currentStep: { control: 'text', description: 'The currently active step identifier' }
13
- }
14
- });
6
+ const { Story } = defineMeta({
7
+ title: 'Design System/Stepper',
8
+ component: StepperComponent,
9
+ tags: ['autodocs'],
10
+ argTypes: {
11
+ class: { control: 'text', description: 'Additional CSS classes' },
12
+ currentStep: { control: 'text', description: 'The currently active step identifier' },
13
+ },
14
+ });
15
15
  </script>
16
16
 
17
17
  <Story name="Controlled by Root">
18
- <div class="space-y-8 p-4">
19
- <div>
20
- <h3 class="mb-4 text-lg font-medium">Stepper controlled by currentStep prop</h3>
21
- <div class="max-w-sm">
22
- <Stepper.Root currentStep="2">
23
- <Stepper.Step stepNumber="1">Configure experiment</Stepper.Step>
24
- <Stepper.Step stepNumber="2">Set run conditions</Stepper.Step>
25
- <Stepper.Step stepNumber="3">Approve plate maps</Stepper.Step>
26
- <Stepper.Step stepNumber="4">Review</Stepper.Step>
27
- </Stepper.Root>
28
- </div>
29
- </div>
30
- </div>
18
+ <div class="space-y-8 p-4">
19
+ <div>
20
+ <h3 class="mb-4 text-lg font-medium">Stepper controlled by currentStep prop</h3>
21
+ <div class="max-w-sm">
22
+ <Stepper.Root currentStep="2">
23
+ <Stepper.Step stepNumber="1">Configure experiment</Stepper.Step>
24
+ <Stepper.Step stepNumber="2">Set run conditions</Stepper.Step>
25
+ <Stepper.Step stepNumber="3">Approve plate maps</Stepper.Step>
26
+ <Stepper.Step stepNumber="4">Review</Stepper.Step>
27
+ </Stepper.Root>
28
+ </div>
29
+ </div>
30
+ </div>
31
31
  </Story>
32
32
 
33
33
  <Story name="Non-Numeric Steps">
34
- <div class="space-y-8 p-4">
35
- <div>
36
- <h3 class="mb-4 text-lg font-medium">Stepper with Letter-based Steps</h3>
37
- <div class="max-w-sm">
38
- <Stepper.Root currentStep="B">
39
- <Stepper.Step stepNumber="A">Configure</Stepper.Step>
40
- <Stepper.Step stepNumber="B">Process</Stepper.Step>
41
- <Stepper.Step stepNumber="C">Complete</Stepper.Step>
42
- </Stepper.Root>
43
- </div>
44
- </div>
45
- </div>
34
+ <div class="space-y-8 p-4">
35
+ <div>
36
+ <h3 class="mb-4 text-lg font-medium">Stepper with Letter-based Steps</h3>
37
+ <div class="max-w-sm">
38
+ <Stepper.Root currentStep="B">
39
+ <Stepper.Step stepNumber="A">Configure</Stepper.Step>
40
+ <Stepper.Step stepNumber="B">Process</Stepper.Step>
41
+ <Stepper.Step stepNumber="C">Complete</Stepper.Step>
42
+ </Stepper.Root>
43
+ </div>
44
+ </div>
45
+ </div>
46
46
  </Story>
47
47
 
48
48
  <Story name="All States (Individually set)">
49
- <div class="space-y-8 p-4">
50
- <div>
51
- <h3 class="mb-4 text-lg font-medium">Individual Step States</h3>
52
- <div class="grid grid-cols-1 gap-6 md:grid-cols-3">
53
- <div>
54
- <h4 class="mb-2 text-sm font-medium text-secondary">Completed State</h4>
55
- <div class="max-w-sm">
56
- <Stepper.Root>
57
- <Stepper.Step state="completed" stepNumber="1">Configure experiment</Stepper.Step>
58
- </Stepper.Root>
59
- </div>
60
- </div>
61
- <div>
62
- <h4 class="mb-2 text-sm font-medium text-secondary">Active State</h4>
63
- <div class="max-w-sm">
64
- <Stepper.Root>
65
- <Stepper.Step state="active" stepNumber="2">Set run conditions</Stepper.Step>
66
- </Stepper.Root>
67
- </div>
68
- </div>
69
- <div>
70
- <h4 class="mb-2 text-sm font-medium text-secondary">Future State</h4>
71
- <div class="max-w-sm">
72
- <Stepper.Root>
73
- <Stepper.Step state="future" stepNumber="3">Approve plate maps</Stepper.Step>
74
- </Stepper.Root>
75
- </div>
76
- </div>
77
- </div>
78
- </div>
79
- </div>
49
+ <div class="space-y-8 p-4">
50
+ <div>
51
+ <h3 class="mb-4 text-lg font-medium">Individual Step States</h3>
52
+ <div class="grid grid-cols-1 gap-6 md:grid-cols-3">
53
+ <div>
54
+ <h4 class="mb-2 text-sm font-medium text-secondary">Completed State</h4>
55
+ <div class="max-w-sm">
56
+ <Stepper.Root>
57
+ <Stepper.Step state="completed" stepNumber="1">Configure experiment</Stepper.Step>
58
+ </Stepper.Root>
59
+ </div>
60
+ </div>
61
+ <div>
62
+ <h4 class="mb-2 text-sm font-medium text-secondary">Active State</h4>
63
+ <div class="max-w-sm">
64
+ <Stepper.Root>
65
+ <Stepper.Step state="active" stepNumber="2">Set run conditions</Stepper.Step>
66
+ </Stepper.Root>
67
+ </div>
68
+ </div>
69
+ <div>
70
+ <h4 class="mb-2 text-sm font-medium text-secondary">Future State</h4>
71
+ <div class="max-w-sm">
72
+ <Stepper.Root>
73
+ <Stepper.Step state="future" stepNumber="3">Approve plate maps</Stepper.Step>
74
+ </Stepper.Root>
75
+ </div>
76
+ </div>
77
+ </div>
78
+ </div>
79
+ </div>
80
80
  </Story>
81
81
 
82
82
  <Story name="Progress Examples">
83
- <div class="space-y-8 p-4">
84
- <div>
85
- <h3 class="mb-4 text-lg font-medium">Progress States</h3>
86
- <div class="grid grid-cols-1 gap-8 lg:grid-cols-2">
87
- <div>
88
- <h4 class="mb-2 text-sm font-medium text-secondary">Start State</h4>
89
- <div class="max-w-sm">
90
- <Stepper.Root currentStep="1">
91
- <Stepper.Step stepNumber="1">Configure experiment</Stepper.Step>
92
- <Stepper.Step stepNumber="2">Set run conditions</Stepper.Step>
93
- <Stepper.Step stepNumber="3">Approve plate maps</Stepper.Step>
94
- <Stepper.Step stepNumber="4">Review</Stepper.Step>
95
- </Stepper.Root>
96
- </div>
97
- </div>
98
- <div>
99
- <h4 class="mb-2 text-sm font-medium text-secondary">Mid Progress</h4>
100
- <div class="max-w-sm">
101
- <Stepper.Root currentStep="3">
102
- <Stepper.Step stepNumber="1">Configure experiment</Stepper.Step>
103
- <Stepper.Step stepNumber="2">Set run conditions</Stepper.Step>
104
- <Stepper.Step stepNumber="3">Approve plate maps</Stepper.Step>
105
- <Stepper.Step stepNumber="4">Review</Stepper.Step>
106
- </Stepper.Root>
107
- </div>
108
- </div>
109
- <div>
110
- <h4 class="mb-2 text-sm font-medium text-secondary">Almost Complete</h4>
111
- <div class="max-w-sm">
112
- <Stepper.Root currentStep="4">
113
- <Stepper.Step stepNumber="1">Configure experiment</Stepper.Step>
114
- <Stepper.Step stepNumber="2">Set run conditions</Stepper.Step>
115
- <Stepper.Step stepNumber="3">Approve plate maps</Stepper.Step>
116
- <Stepper.Step stepNumber="4">Review</Stepper.Step>
117
- </Stepper.Root>
118
- </div>
119
- </div>
120
- <div>
121
- <h4 class="mb-2 text-sm font-medium text-secondary">All Complete</h4>
122
- <div class="max-w-sm">
123
- <!-- To show all as complete, set currentStep to a non-existent step after the last one -->
124
- <Stepper.Root currentStep="5">
125
- <Stepper.Step stepNumber="1">Configure experiment</Stepper.Step>
126
- <Stepper.Step stepNumber="2">Set run conditions</Stepper.Step>
127
- <Stepper.Step stepNumber="3">Approve plate maps</Stepper.Step>
128
- <Stepper.Step stepNumber="4">Review</Stepper.Step>
129
- </Stepper.Root>
130
- </div>
131
- </div>
132
- </div>
133
- </div>
134
- </div>
83
+ <div class="space-y-8 p-4">
84
+ <div>
85
+ <h3 class="mb-4 text-lg font-medium">Progress States</h3>
86
+ <div class="grid grid-cols-1 gap-8 lg:grid-cols-2">
87
+ <div>
88
+ <h4 class="mb-2 text-sm font-medium text-secondary">Start State</h4>
89
+ <div class="max-w-sm">
90
+ <Stepper.Root currentStep="1">
91
+ <Stepper.Step stepNumber="1">Configure experiment</Stepper.Step>
92
+ <Stepper.Step stepNumber="2">Set run conditions</Stepper.Step>
93
+ <Stepper.Step stepNumber="3">Approve plate maps</Stepper.Step>
94
+ <Stepper.Step stepNumber="4">Review</Stepper.Step>
95
+ </Stepper.Root>
96
+ </div>
97
+ </div>
98
+ <div>
99
+ <h4 class="mb-2 text-sm font-medium text-secondary">Mid Progress</h4>
100
+ <div class="max-w-sm">
101
+ <Stepper.Root currentStep="3">
102
+ <Stepper.Step stepNumber="1">Configure experiment</Stepper.Step>
103
+ <Stepper.Step stepNumber="2">Set run conditions</Stepper.Step>
104
+ <Stepper.Step stepNumber="3">Approve plate maps</Stepper.Step>
105
+ <Stepper.Step stepNumber="4">Review</Stepper.Step>
106
+ </Stepper.Root>
107
+ </div>
108
+ </div>
109
+ <div>
110
+ <h4 class="mb-2 text-sm font-medium text-secondary">Almost Complete</h4>
111
+ <div class="max-w-sm">
112
+ <Stepper.Root currentStep="4">
113
+ <Stepper.Step stepNumber="1">Configure experiment</Stepper.Step>
114
+ <Stepper.Step stepNumber="2">Set run conditions</Stepper.Step>
115
+ <Stepper.Step stepNumber="3">Approve plate maps</Stepper.Step>
116
+ <Stepper.Step stepNumber="4">Review</Stepper.Step>
117
+ </Stepper.Root>
118
+ </div>
119
+ </div>
120
+ <div>
121
+ <h4 class="mb-2 text-sm font-medium text-secondary">All Complete</h4>
122
+ <div class="max-w-sm">
123
+ <!-- To show all as complete, set currentStep to a non-existent step after the last one -->
124
+ <Stepper.Root currentStep="5">
125
+ <Stepper.Step stepNumber="1">Configure experiment</Stepper.Step>
126
+ <Stepper.Step stepNumber="2">Set run conditions</Stepper.Step>
127
+ <Stepper.Step stepNumber="3">Approve plate maps</Stepper.Step>
128
+ <Stepper.Step stepNumber="4">Review</Stepper.Step>
129
+ </Stepper.Root>
130
+ </div>
131
+ </div>
132
+ </div>
133
+ </div>
134
+ </div>
135
135
  </Story>
136
136
 
137
137
  <Story name="Different Step Counts">
138
- <div class="space-y-8 p-4">
139
- <div>
140
- <h3 class="mb-4 text-lg font-medium">Various Step Configurations</h3>
141
- <div class="grid grid-cols-1 gap-8 lg:grid-cols-2">
142
- <div>
143
- <h4 class="mb-2 text-sm font-medium text-secondary">Two Steps</h4>
144
- <div class="max-w-sm">
145
- <Stepper.Root currentStep="1">
146
- <Stepper.Step stepNumber="1">Setup</Stepper.Step>
147
- <Stepper.Step stepNumber="2">Review</Stepper.Step>
148
- </Stepper.Root>
149
- </div>
150
- </div>
151
- <div>
152
- <h4 class="mb-2 text-sm font-medium text-secondary">Three Steps</h4>
153
- <div class="max-w-sm">
154
- <Stepper.Root currentStep="2">
155
- <Stepper.Step stepNumber="1">Configure</Stepper.Step>
156
- <Stepper.Step stepNumber="2">Process</Stepper.Step>
157
- <Stepper.Step stepNumber="3">Complete</Stepper.Step>
158
- </Stepper.Root>
159
- </div>
160
- </div>
161
- <div>
162
- <h4 class="mb-2 text-sm font-medium text-secondary">Five Steps</h4>
163
- <div class="max-w-sm">
164
- <Stepper.Root currentStep="3">
165
- <Stepper.Step stepNumber="1">Initialize</Stepper.Step>
166
- <Stepper.Step stepNumber="2">Configure</Stepper.Step>
167
- <Stepper.Step stepNumber="3">Process</Stepper.Step>
168
- <Stepper.Step stepNumber="4">Validate</Stepper.Step>
169
- <Stepper.Step stepNumber="5">Complete</Stepper.Step>
170
- </Stepper.Root>
171
- </div>
172
- </div>
173
- <div>
174
- <h4 class="mb-2 text-sm font-medium text-secondary">Single Step</h4>
175
- <div class="max-w-sm">
176
- <Stepper.Root currentStep="1">
177
- <Stepper.Step stepNumber="1">Single action step</Stepper.Step>
178
- </Stepper.Root>
179
- </div>
180
- </div>
181
- </div>
182
- </div>
183
- </div>
138
+ <div class="space-y-8 p-4">
139
+ <div>
140
+ <h3 class="mb-4 text-lg font-medium">Various Step Configurations</h3>
141
+ <div class="grid grid-cols-1 gap-8 lg:grid-cols-2">
142
+ <div>
143
+ <h4 class="mb-2 text-sm font-medium text-secondary">Two Steps</h4>
144
+ <div class="max-w-sm">
145
+ <Stepper.Root currentStep="1">
146
+ <Stepper.Step stepNumber="1">Setup</Stepper.Step>
147
+ <Stepper.Step stepNumber="2">Review</Stepper.Step>
148
+ </Stepper.Root>
149
+ </div>
150
+ </div>
151
+ <div>
152
+ <h4 class="mb-2 text-sm font-medium text-secondary">Three Steps</h4>
153
+ <div class="max-w-sm">
154
+ <Stepper.Root currentStep="2">
155
+ <Stepper.Step stepNumber="1">Configure</Stepper.Step>
156
+ <Stepper.Step stepNumber="2">Process</Stepper.Step>
157
+ <Stepper.Step stepNumber="3">Complete</Stepper.Step>
158
+ </Stepper.Root>
159
+ </div>
160
+ </div>
161
+ <div>
162
+ <h4 class="mb-2 text-sm font-medium text-secondary">Five Steps</h4>
163
+ <div class="max-w-sm">
164
+ <Stepper.Root currentStep="3">
165
+ <Stepper.Step stepNumber="1">Initialize</Stepper.Step>
166
+ <Stepper.Step stepNumber="2">Configure</Stepper.Step>
167
+ <Stepper.Step stepNumber="3">Process</Stepper.Step>
168
+ <Stepper.Step stepNumber="4">Validate</Stepper.Step>
169
+ <Stepper.Step stepNumber="5">Complete</Stepper.Step>
170
+ </Stepper.Root>
171
+ </div>
172
+ </div>
173
+ <div>
174
+ <h4 class="mb-2 text-sm font-medium text-secondary">Single Step</h4>
175
+ <div class="max-w-sm">
176
+ <Stepper.Root currentStep="1">
177
+ <Stepper.Step stepNumber="1">Single action step</Stepper.Step>
178
+ </Stepper.Root>
179
+ </div>
180
+ </div>
181
+ </div>
182
+ </div>
183
+ </div>
184
184
  </Story>
185
185
 
186
186
  <Story name="Custom Styling">
187
- <div class="space-y-8 p-4">
188
- <div>
189
- <h3 class="mb-4 text-lg font-medium">Custom Classes</h3>
190
- <div class="max-w-sm">
191
- <Stepper.Root currentStep="2" class="rounded-lg border bg-surface p-4">
192
- <Stepper.Step stepNumber="1" class="font-bold">Configure experiment</Stepper.Step>
193
- <Stepper.Step stepNumber="2" class="font-bold">Set run conditions</Stepper.Step>
194
- <Stepper.Step stepNumber="3" class="font-bold">Approve plate maps</Stepper.Step>
195
- </Stepper.Root>
196
- </div>
197
- </div>
198
- </div>
187
+ <div class="space-y-8 p-4">
188
+ <div>
189
+ <h3 class="mb-4 text-lg font-medium">Custom Classes</h3>
190
+ <div class="max-w-sm">
191
+ <Stepper.Root currentStep="2" class="rounded-lg border bg-surface p-4">
192
+ <Stepper.Step stepNumber="1" class="font-bold">Configure experiment</Stepper.Step>
193
+ <Stepper.Step stepNumber="2" class="font-bold">Set run conditions</Stepper.Step>
194
+ <Stepper.Step stepNumber="3" class="font-bold">Approve plate maps</Stepper.Step>
195
+ </Stepper.Root>
196
+ </div>
197
+ </div>
198
+ </div>
199
199
  </Story>
200
200
 
201
201
  <Story name="Responsive Behavior">
202
- <div class="space-y-8 p-4">
203
- <div>
204
- <h3 class="mb-4 text-lg font-medium">Text Truncation</h3>
205
- <div class="space-y-6">
206
- <div>
207
- <h4 class="mb-2 text-sm font-medium text-secondary">Normal Width (224px - Figma spec)</h4>
208
- <div class="w-56">
209
- <Stepper.Root currentStep="2">
210
- <Stepper.Step stepNumber="1">Configure experiment</Stepper.Step>
211
- <Stepper.Step stepNumber="2">Set run conditions</Stepper.Step>
212
- <Stepper.Step stepNumber="3">Approve plate maps</Stepper.Step>
213
- </Stepper.Root>
214
- </div>
215
- </div>
216
- <div>
217
- <h4 class="mb-2 text-sm font-medium text-secondary">Narrow Width (160px)</h4>
218
- <div class="w-40">
219
- <Stepper.Root currentStep="2">
220
- <Stepper.Step stepNumber="1">Configure experiment parameters</Stepper.Step>
221
- <Stepper.Step stepNumber="2">Set run conditions and parameters</Stepper.Step>
222
- <Stepper.Step stepNumber="3">Approve all plate maps and configurations</Stepper.Step>
223
- </Stepper.Root>
224
- </div>
225
- </div>
226
- <div>
227
- <h4 class="mb-2 text-sm font-medium text-secondary">Very Narrow Width (120px)</h4>
228
- <div class="w-30">
229
- <Stepper.Root currentStep="2">
230
- <Stepper.Step stepNumber="1"
231
- >Configure experiment parameters and settings</Stepper.Step
232
- >
233
- <Stepper.Step stepNumber="2">Set detailed run conditions and parameters</Stepper.Step>
234
- <Stepper.Step stepNumber="3"
235
- >Approve all plate maps and final configurations</Stepper.Step
236
- >
237
- </Stepper.Root>
238
- </div>
239
- </div>
240
- </div>
241
- </div>
242
- </div>
202
+ <div class="space-y-8 p-4">
203
+ <div>
204
+ <h3 class="mb-4 text-lg font-medium">Text Truncation</h3>
205
+ <div class="space-y-6">
206
+ <div>
207
+ <h4 class="mb-2 text-sm font-medium text-secondary">Normal Width (224px - Figma spec)</h4>
208
+ <div class="w-56">
209
+ <Stepper.Root currentStep="2">
210
+ <Stepper.Step stepNumber="1">Configure experiment</Stepper.Step>
211
+ <Stepper.Step stepNumber="2">Set run conditions</Stepper.Step>
212
+ <Stepper.Step stepNumber="3">Approve plate maps</Stepper.Step>
213
+ </Stepper.Root>
214
+ </div>
215
+ </div>
216
+ <div>
217
+ <h4 class="mb-2 text-sm font-medium text-secondary">Narrow Width (160px)</h4>
218
+ <div class="w-40">
219
+ <Stepper.Root currentStep="2">
220
+ <Stepper.Step stepNumber="1">Configure experiment parameters</Stepper.Step>
221
+ <Stepper.Step stepNumber="2">Set run conditions and parameters</Stepper.Step>
222
+ <Stepper.Step stepNumber="3">Approve all plate maps and configurations</Stepper.Step>
223
+ </Stepper.Root>
224
+ </div>
225
+ </div>
226
+ <div>
227
+ <h4 class="mb-2 text-sm font-medium text-secondary">Very Narrow Width (120px)</h4>
228
+ <div class="w-30">
229
+ <Stepper.Root currentStep="2">
230
+ <Stepper.Step stepNumber="1"
231
+ >Configure experiment parameters and settings</Stepper.Step
232
+ >
233
+ <Stepper.Step stepNumber="2">Set detailed run conditions and parameters</Stepper.Step>
234
+ <Stepper.Step stepNumber="3"
235
+ >Approve all plate maps and final configurations</Stepper.Step
236
+ >
237
+ </Stepper.Root>
238
+ </div>
239
+ </div>
240
+ </div>
241
+ </div>
242
+ </div>
243
243
  </Story>
package/dist/components/stepper/components/stepper-root.svelte CHANGED
@@ -1,20 +1,20 @@
1
1
  <script lang="ts">
2
- import type { Snippet } from 'svelte';
3
- import { setContext } from 'svelte';
2
+ import type { Snippet } from 'svelte';
3
+ import { setContext } from 'svelte';
4
4
 
5
- interface Props {
6
- children: Snippet;
7
- class?: string;
8
- currentStep?: string;
9
- }
5
+ interface Props {
6
+ children: Snippet;
7
+ class?: string;
8
+ currentStep?: string;
9
+ }
10
10
 
11
- let { children, class: className = '', currentStep }: Props = $props();
11
+ let { children, class: className = '', currentStep }: Props = $props();
12
12
 
13
- setContext('STEPPER_CONTEXT', {
14
- currentStep
15
- });
13
+ setContext('STEPPER_CONTEXT', {
14
+ currentStep,
15
+ });
16
16
  </script>
17
17
 
18
18
  <div class="flex w-full flex-col gap-3 {className}" role="progressbar">
19
- {@render children()}
19
+ {@render children()}
20
20
  </div>