@reshape-biotech/design-system 1.2.6 → 2.0.0

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 (187) hide show
  1. package/README.md +5 -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/collapsible/index.d.ts +1 -1
  19. package/dist/components/combobox/Combobox.stories.svelte +412 -412
  20. package/dist/components/combobox/components/combobox-add.svelte +8 -8
  21. package/dist/components/combobox/components/combobox-content.svelte +39 -39
  22. package/dist/components/combobox/components/combobox-indicator.svelte +1 -1
  23. package/dist/components/combobox/index.d.ts +1 -1
  24. package/dist/components/datepicker/DatePicker.stories.svelte +196 -196
  25. package/dist/components/datepicker/DatePicker.svelte +173 -173
  26. package/dist/components/divider/Divider.stories.svelte +7 -7
  27. package/dist/components/divider/Divider.svelte +9 -9
  28. package/dist/components/drawer/Drawer.stories.svelte +51 -51
  29. package/dist/components/drawer/Drawer.svelte +33 -33
  30. package/dist/components/drawer/DrawerLabel.svelte +10 -10
  31. package/dist/components/dropdown/Dropdown.stories.svelte +210 -210
  32. package/dist/components/dropdown/Dropdown.svelte +57 -57
  33. package/dist/components/dropdown/components/DropdownContent.svelte +16 -16
  34. package/dist/components/dropdown/components/DropdownMenu.svelte +10 -10
  35. package/dist/components/dropdown/components/DropdownTrigger.svelte +37 -37
  36. package/dist/components/dropdown/components/OutlinedButton.svelte +9 -9
  37. package/dist/components/empty-content/EmptyContent.stories.svelte +38 -38
  38. package/dist/components/empty-content/EmptyContent.svelte +12 -12
  39. package/dist/components/graphs/bar-chart/BarChart.stories.svelte +91 -91
  40. package/dist/components/graphs/bar-chart/BarChart.svelte +147 -147
  41. package/dist/components/graphs/bar-chart/StackedBarChart.stories.svelte +57 -57
  42. package/dist/components/graphs/bar-chart/StackedBarChart.svelte +198 -199
  43. package/dist/components/graphs/chart/Chart.stories.svelte +96 -96
  44. package/dist/components/graphs/chart/Chart.svelte +207 -207
  45. package/dist/components/graphs/line/LineChart.stories.svelte +138 -138
  46. package/dist/components/graphs/line/LineChart.svelte +140 -142
  47. package/dist/components/graphs/matrix/Matrix.stories.svelte +117 -117
  48. package/dist/components/graphs/matrix/Matrix.svelte +141 -141
  49. package/dist/components/graphs/multiline/MultiLineChart.stories.svelte +168 -168
  50. package/dist/components/graphs/multiline/MultiLineChart.svelte +236 -236
  51. package/dist/components/graphs/scatterplot/Scatterplot.stories.svelte +84 -84
  52. package/dist/components/graphs/scatterplot/Scatterplot.svelte +302 -302
  53. package/dist/components/graphs/utils/duration.d.ts +1 -0
  54. package/dist/components/graphs/utils/duration.js +33 -0
  55. package/dist/components/graphs/utils/tooltipFormatter.js +1 -1
  56. package/dist/components/icon-button/IconButton.stories.svelte +64 -64
  57. package/dist/components/icon-button/IconButton.svelte +88 -88
  58. package/dist/components/icons/AnalysisIcon.stories.svelte +18 -18
  59. package/dist/components/icons/AnalysisIcon.svelte +96 -96
  60. package/dist/components/icons/Icon.stories.svelte +111 -111
  61. package/dist/components/icons/Icon.svelte +17 -17
  62. package/dist/components/icons/PrincipalIcon.svelte +59 -59
  63. package/dist/components/icons/custom/Halo.svelte +31 -31
  64. package/dist/components/icons/custom/Well.svelte +27 -27
  65. package/dist/components/icons/index.js +1 -1
  66. package/dist/components/image/Image.svelte +42 -42
  67. package/dist/components/input/Input.stories.svelte +55 -55
  68. package/dist/components/input/Input.svelte +121 -121
  69. package/dist/components/label/Label.stories.svelte +18 -18
  70. package/dist/components/label/Label.svelte +11 -11
  71. package/dist/components/list/List.stories.svelte +84 -84
  72. package/dist/components/list/List.svelte +20 -20
  73. package/dist/components/logo/Logo.stories.svelte +15 -15
  74. package/dist/components/logo/Logo.svelte +30 -30
  75. package/dist/components/manual-cfu-counter/ManualCFUCounter.stories.svelte +102 -102
  76. package/dist/components/manual-cfu-counter/ManualCFUCounter.svelte +557 -557
  77. package/dist/components/manual-cfu-counter/test/ManualCFUCounterTestWrapper.svelte +11 -11
  78. package/dist/components/markdown/Markdown.stories.svelte +10 -10
  79. package/dist/components/markdown/Markdown.svelte +6 -6
  80. package/dist/components/modal/Modal.stories.svelte +29 -29
  81. package/dist/components/modal/Modal.svelte +71 -71
  82. package/dist/components/multi-cfu-counter/MultiCFUCounter.stories.svelte +201 -201
  83. package/dist/components/multi-cfu-counter/MultiCFUCounter.svelte +606 -606
  84. package/dist/components/multi-cfu-counter/test/MultiCFUCounterTestWrapper.svelte +17 -17
  85. package/dist/components/notification-popup/NotificationPopup.stories.svelte +18 -18
  86. package/dist/components/notification-popup/NotificationPopup.svelte +26 -26
  87. package/dist/components/notifications/Notifications.stories.svelte +101 -101
  88. package/dist/components/notifications/Notifications.svelte +9 -9
  89. package/dist/components/pill/Pill.stories.svelte +8 -8
  90. package/dist/components/pill/Pill.svelte +27 -27
  91. package/dist/components/progress-circle/ProgressCircle.stories.svelte +8 -8
  92. package/dist/components/progress-circle/ProgressCircle.svelte +54 -54
  93. package/dist/components/required-status-indicator/RequiredStatusIndicator.stories.svelte +18 -18
  94. package/dist/components/required-status-indicator/RequiredStatusIndicator.svelte +14 -14
  95. package/dist/components/segmented-control-buttons/ControlButton.svelte +36 -36
  96. package/dist/components/segmented-control-buttons/SegmentedControlButtons.stories.svelte +35 -35
  97. package/dist/components/segmented-control-buttons/SegmentedControlButtons.svelte +13 -13
  98. package/dist/components/select/Select.stories.svelte +200 -94
  99. package/dist/components/select/Select.stories.svelte.d.ts +1 -1
  100. package/dist/components/select/components/Group.svelte +24 -0
  101. package/dist/components/select/components/MultiSelectTrigger.svelte +66 -0
  102. package/dist/components/select/components/SelectContent.svelte +33 -0
  103. package/dist/components/select/components/SelectGroupHeading.svelte +19 -0
  104. package/dist/components/select/components/SelectItem.svelte +39 -0
  105. package/dist/components/select/components/SelectTrigger.svelte +48 -0
  106. package/dist/components/select/index.d.ts +10 -7
  107. package/dist/components/select/index.js +12 -1
  108. package/dist/components/sjsf-wrappers/SjsfNumberInputWrapper.svelte +102 -87
  109. package/dist/components/sjsf-wrappers/SjsfNumberInputWrapper.svelte.d.ts +1 -1
  110. package/dist/components/sjsf-wrappers/SjsfTextInputWrapper.svelte +53 -53
  111. package/dist/components/sjsf-wrappers/SjsfTextInputWrapper.svelte.d.ts +1 -1
  112. package/dist/components/sjsf-wrappers/sjsfCustomTheme.js +1 -1
  113. package/dist/components/skeleton-loader/SkeletonLoader.stories.svelte +32 -32
  114. package/dist/components/skeleton-loader/SkeletonLoader.svelte +10 -10
  115. package/dist/components/skeleton-loader/StatcardSkeleton.svelte +9 -9
  116. package/dist/components/skeleton-loader/components/Skeleton.svelte +7 -7
  117. package/dist/components/skeleton-loader/components/SkeletonImage.svelte +12 -12
  118. package/dist/components/slider/Slider.stories.svelte +23 -23
  119. package/dist/components/slider/Slider.svelte +107 -107
  120. package/dist/components/spinner/Spinner.stories.svelte +8 -8
  121. package/dist/components/spinner/Spinner.svelte +18 -18
  122. package/dist/components/stat-card/StatCard.stories.svelte +26 -26
  123. package/dist/components/stat-card/StatCard.svelte +128 -128
  124. package/dist/components/status-badge/StatusBadge.stories.svelte +365 -365
  125. package/dist/components/status-badge/StatusBadge.svelte +54 -54
  126. package/dist/components/stepper/Stepper.stories.svelte +219 -219
  127. package/dist/components/stepper/components/stepper-root.svelte +12 -12
  128. package/dist/components/stepper/components/stepper-step.svelte +83 -83
  129. package/dist/components/table/Table.stories.svelte +87 -87
  130. package/dist/components/table/Table.svelte +32 -32
  131. package/dist/components/table/components/TBody.svelte +7 -7
  132. package/dist/components/table/components/THead.svelte +7 -7
  133. package/dist/components/table/components/Td.svelte +8 -8
  134. package/dist/components/table/components/Th.svelte +8 -8
  135. package/dist/components/table/components/Tr.svelte +11 -11
  136. package/dist/components/tabs/Tabs.stories.svelte +20 -20
  137. package/dist/components/tabs/Tabs.svelte +8 -8
  138. package/dist/components/tabs/components/Content.svelte +8 -8
  139. package/dist/components/tabs/components/Tab.svelte +14 -14
  140. package/dist/components/tabs/components/Tabs.svelte +7 -7
  141. package/dist/components/tag/Tag.stories.svelte +57 -57
  142. package/dist/components/tag/Tag.svelte +95 -95
  143. package/dist/components/textarea/Textarea.stories.svelte +70 -70
  144. package/dist/components/textarea/Textarea.svelte +76 -76
  145. package/dist/components/toast/Toast.stories.svelte +204 -204
  146. package/dist/components/toast/Toast.svelte +53 -53
  147. package/dist/components/toggle/Toggle.stories.svelte +9 -9
  148. package/dist/components/toggle/Toggle.svelte +53 -53
  149. package/dist/components/toggle-icon-button/ToggleIconButton.stories.svelte +152 -152
  150. package/dist/components/toggle-icon-button/ToggleIconButton.svelte +99 -99
  151. package/dist/components/tooltip/Tooltip.stories.svelte +85 -111
  152. package/dist/components/tooltip/Tooltip.svelte +57 -46
  153. package/dist/components/tooltip/Tooltip.svelte.d.ts +1 -1
  154. package/dist/components/tooltip/TooltipTest.svelte +31 -0
  155. package/dist/components/tooltip/TooltipTest.svelte.d.ts +11 -0
  156. package/dist/fonts/index.js +1 -1
  157. package/dist/index.d.ts +0 -1
  158. package/dist/index.js +0 -1
  159. package/dist/notifications.d.ts +1 -4
  160. package/dist/notifications.js +1 -1
  161. package/dist/tailwind-safelist.js +406 -406
  162. package/dist/tailwind.preset.js +10 -10
  163. package/dist/tokens/colors.js +18 -18
  164. package/dist/tokens/typography.js +6 -6
  165. package/dist/tokens.js +19 -19
  166. package/dist/types/fonts.d.ts +2 -2
  167. package/package.json +199 -204
  168. package/dist/components/select/Select.svelte +0 -139
  169. package/dist/components/select/Select.svelte.d.ts +0 -60
  170. package/dist/components/select-new/Select.stories.svelte +0 -219
  171. package/dist/components/select-new/Select.stories.svelte.d.ts +0 -19
  172. package/dist/components/select-new/components/Group.svelte +0 -24
  173. package/dist/components/select-new/components/MultiSelectTrigger.svelte +0 -66
  174. package/dist/components/select-new/components/SelectContent.svelte +0 -33
  175. package/dist/components/select-new/components/SelectGroupHeading.svelte +0 -19
  176. package/dist/components/select-new/components/SelectItem.svelte +0 -39
  177. package/dist/components/select-new/components/SelectTrigger.svelte +0 -48
  178. package/dist/components/select-new/index.d.ts +0 -10
  179. package/dist/components/select-new/index.js +0 -12
  180. /package/dist/components/{select-new → select}/components/Group.svelte.d.ts +0 -0
  181. /package/dist/components/{select-new → select}/components/MultiSelectTrigger.svelte.d.ts +0 -0
  182. /package/dist/components/{select-new → select}/components/SelectContent.svelte.d.ts +0 -0
  183. /package/dist/components/{select-new → select}/components/SelectGroupHeading.svelte.d.ts +0 -0
  184. /package/dist/components/{select-new → select}/components/SelectItem.svelte.d.ts +0 -0
  185. /package/dist/components/{select-new → select}/components/SelectTrigger.svelte.d.ts +0 -0
  186. /package/dist/components/{select-new → select}/types.d.ts +0 -0
  187. /package/dist/components/{select-new → select}/types.js +0 -0
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>