@reshape-biotech/design-system 1.2.6 → 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 (159) 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.js +1 -1
  64. package/dist/components/image/Image.svelte +42 -42
  65. package/dist/components/input/Input.stories.svelte +55 -55
  66. package/dist/components/input/Input.svelte +121 -121
  67. package/dist/components/label/Label.stories.svelte +18 -18
  68. package/dist/components/label/Label.svelte +11 -11
  69. package/dist/components/list/List.stories.svelte +84 -84
  70. package/dist/components/list/List.svelte +20 -20
  71. package/dist/components/logo/Logo.stories.svelte +15 -15
  72. package/dist/components/logo/Logo.svelte +30 -30
  73. package/dist/components/manual-cfu-counter/ManualCFUCounter.stories.svelte +102 -102
  74. package/dist/components/manual-cfu-counter/ManualCFUCounter.svelte +557 -557
  75. package/dist/components/manual-cfu-counter/test/ManualCFUCounterTestWrapper.svelte +11 -11
  76. package/dist/components/markdown/Markdown.stories.svelte +10 -10
  77. package/dist/components/markdown/Markdown.svelte +6 -6
  78. package/dist/components/modal/Modal.stories.svelte +29 -29
  79. package/dist/components/modal/Modal.svelte +71 -71
  80. package/dist/components/multi-cfu-counter/MultiCFUCounter.stories.svelte +201 -201
  81. package/dist/components/multi-cfu-counter/MultiCFUCounter.svelte +606 -606
  82. package/dist/components/multi-cfu-counter/test/MultiCFUCounterTestWrapper.svelte +17 -17
  83. package/dist/components/notification-popup/NotificationPopup.stories.svelte +18 -18
  84. package/dist/components/notification-popup/NotificationPopup.svelte +26 -26
  85. package/dist/components/notifications/Notifications.stories.svelte +101 -101
  86. package/dist/components/notifications/Notifications.svelte +9 -9
  87. package/dist/components/pill/Pill.stories.svelte +8 -8
  88. package/dist/components/pill/Pill.svelte +27 -27
  89. package/dist/components/progress-circle/ProgressCircle.stories.svelte +8 -8
  90. package/dist/components/progress-circle/ProgressCircle.svelte +54 -54
  91. package/dist/components/required-status-indicator/RequiredStatusIndicator.stories.svelte +18 -18
  92. package/dist/components/required-status-indicator/RequiredStatusIndicator.svelte +14 -14
  93. package/dist/components/segmented-control-buttons/ControlButton.svelte +36 -36
  94. package/dist/components/segmented-control-buttons/SegmentedControlButtons.stories.svelte +35 -35
  95. package/dist/components/segmented-control-buttons/SegmentedControlButtons.svelte +13 -13
  96. package/dist/components/select/Select.stories.svelte +77 -77
  97. package/dist/components/select/Select.svelte +114 -114
  98. package/dist/components/select-new/Select.stories.svelte +188 -188
  99. package/dist/components/select-new/components/Group.svelte +17 -17
  100. package/dist/components/select-new/components/MultiSelectTrigger.svelte +57 -57
  101. package/dist/components/select-new/components/SelectContent.svelte +22 -22
  102. package/dist/components/select-new/components/SelectGroupHeading.svelte +10 -10
  103. package/dist/components/select-new/components/SelectItem.svelte +25 -25
  104. package/dist/components/select-new/components/SelectTrigger.svelte +38 -38
  105. package/dist/components/sjsf-wrappers/SjsfNumberInputWrapper.svelte +76 -76
  106. package/dist/components/sjsf-wrappers/SjsfNumberInputWrapper.svelte.d.ts +1 -1
  107. package/dist/components/sjsf-wrappers/SjsfTextInputWrapper.svelte +53 -53
  108. package/dist/components/sjsf-wrappers/SjsfTextInputWrapper.svelte.d.ts +1 -1
  109. package/dist/components/sjsf-wrappers/sjsfCustomTheme.js +1 -1
  110. package/dist/components/skeleton-loader/SkeletonLoader.stories.svelte +32 -32
  111. package/dist/components/skeleton-loader/SkeletonLoader.svelte +10 -10
  112. package/dist/components/skeleton-loader/StatcardSkeleton.svelte +9 -9
  113. package/dist/components/skeleton-loader/components/Skeleton.svelte +7 -7
  114. package/dist/components/skeleton-loader/components/SkeletonImage.svelte +12 -12
  115. package/dist/components/slider/Slider.stories.svelte +23 -23
  116. package/dist/components/slider/Slider.svelte +107 -107
  117. package/dist/components/spinner/Spinner.stories.svelte +8 -8
  118. package/dist/components/spinner/Spinner.svelte +18 -18
  119. package/dist/components/stat-card/StatCard.stories.svelte +26 -26
  120. package/dist/components/stat-card/StatCard.svelte +128 -128
  121. package/dist/components/status-badge/StatusBadge.stories.svelte +365 -365
  122. package/dist/components/status-badge/StatusBadge.svelte +54 -54
  123. package/dist/components/stepper/Stepper.stories.svelte +219 -219
  124. package/dist/components/stepper/components/stepper-root.svelte +12 -12
  125. package/dist/components/stepper/components/stepper-step.svelte +83 -83
  126. package/dist/components/table/Table.stories.svelte +87 -87
  127. package/dist/components/table/Table.svelte +32 -32
  128. package/dist/components/table/components/TBody.svelte +7 -7
  129. package/dist/components/table/components/THead.svelte +7 -7
  130. package/dist/components/table/components/Td.svelte +8 -8
  131. package/dist/components/table/components/Th.svelte +8 -8
  132. package/dist/components/table/components/Tr.svelte +11 -11
  133. package/dist/components/tabs/Tabs.stories.svelte +20 -20
  134. package/dist/components/tabs/Tabs.svelte +8 -8
  135. package/dist/components/tabs/components/Content.svelte +8 -8
  136. package/dist/components/tabs/components/Tab.svelte +14 -14
  137. package/dist/components/tabs/components/Tabs.svelte +7 -7
  138. package/dist/components/tag/Tag.stories.svelte +57 -57
  139. package/dist/components/tag/Tag.svelte +95 -95
  140. package/dist/components/textarea/Textarea.stories.svelte +70 -70
  141. package/dist/components/textarea/Textarea.svelte +76 -76
  142. package/dist/components/toast/Toast.stories.svelte +204 -204
  143. package/dist/components/toast/Toast.svelte +53 -53
  144. package/dist/components/toggle/Toggle.stories.svelte +9 -9
  145. package/dist/components/toggle/Toggle.svelte +53 -53
  146. package/dist/components/toggle-icon-button/ToggleIconButton.stories.svelte +152 -152
  147. package/dist/components/toggle-icon-button/ToggleIconButton.svelte +99 -99
  148. package/dist/components/tooltip/Tooltip.stories.svelte +105 -105
  149. package/dist/components/tooltip/Tooltip.svelte +26 -26
  150. package/dist/fonts/index.js +1 -1
  151. package/dist/notifications.d.ts +1 -4
  152. package/dist/notifications.js +1 -1
  153. package/dist/tailwind-safelist.js +406 -406
  154. package/dist/tailwind.preset.js +10 -10
  155. package/dist/tokens/colors.js +18 -18
  156. package/dist/tokens/typography.js +6 -6
  157. package/dist/tokens.js +19 -19
  158. package/dist/types/fonts.d.ts +2 -2
  159. package/package.json +199 -198
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>