@vygruppen/spor-react 11.3.10 → 12.0.1

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 (322) hide show
  1. package/.turbo/turbo-build.log +33 -11
  2. package/.turbo/turbo-typegen.log +22 -0
  3. package/CHANGELOG.md +247 -0
  4. package/dist/index.d.mts +2589 -8303
  5. package/dist/index.d.ts +2589 -8303
  6. package/dist/index.js +9609 -8608
  7. package/dist/index.js.map +1 -1
  8. package/dist/index.mjs +9487 -8455
  9. package/dist/index.mjs.map +1 -1
  10. package/package.json +23 -15
  11. package/src/accordion/Accordion.tsx +96 -45
  12. package/src/accordion/Expandable.tsx +54 -127
  13. package/src/accordion/helpers.ts +31 -0
  14. package/src/accordion/types.ts +60 -0
  15. package/src/alert/Alert.tsx +101 -0
  16. package/src/alert/AlertIcon.tsx +63 -45
  17. package/src/alert/ExpandableAlert.tsx +96 -64
  18. package/src/alert/ServiceAlert.tsx +127 -125
  19. package/src/alert/{index.tsx → index.ts} +1 -2
  20. package/src/breadcrumb/Breadcrumb.tsx +39 -24
  21. package/src/button/Button.tsx +86 -105
  22. package/src/button/ButtonGroup.tsx +45 -20
  23. package/src/button/Clipboard.tsx +82 -0
  24. package/src/button/CloseButton.tsx +4 -3
  25. package/src/button/FloatingActionButton.tsx +35 -41
  26. package/src/button/IconButton.tsx +34 -30
  27. package/src/button/index.tsx +1 -0
  28. package/src/color-mode/color-mode.tsx +75 -0
  29. package/src/color-mode/index.ts +1 -0
  30. package/src/datepicker/Calendar.tsx +17 -8
  31. package/src/datepicker/CalendarCell.tsx +20 -13
  32. package/src/datepicker/CalendarGrid.tsx +18 -10
  33. package/src/datepicker/CalendarHeader.tsx +2 -0
  34. package/src/datepicker/CalendarNavigationButton.tsx +1 -0
  35. package/src/datepicker/CalendarTriggerButton.tsx +43 -45
  36. package/src/datepicker/DateField.tsx +21 -12
  37. package/src/datepicker/DatePicker.tsx +61 -58
  38. package/src/datepicker/DateRangePicker.tsx +52 -58
  39. package/src/datepicker/DateTimeSegment.tsx +13 -5
  40. package/src/datepicker/RangeCalendar.tsx +13 -7
  41. package/src/datepicker/StyledField.tsx +25 -17
  42. package/src/datepicker/TimeField.tsx +10 -8
  43. package/src/datepicker/TimePicker.tsx +48 -45
  44. package/src/datepicker/types.ts +5 -0
  45. package/src/dialog/Dialog.tsx +56 -0
  46. package/src/dialog/Drawer.tsx +187 -0
  47. package/src/dialog/index.ts +2 -0
  48. package/src/dialog/types.ts +26 -0
  49. package/src/image/index.tsx +2 -2
  50. package/src/index.tsx +5 -3
  51. package/src/input/AttachedInputs.tsx +17 -42
  52. package/src/input/CardSelect.tsx +75 -162
  53. package/src/input/Checkbox.tsx +30 -6
  54. package/src/input/CheckboxGroup.tsx +25 -16
  55. package/src/input/ChoiceChip.tsx +58 -77
  56. package/src/input/Combobox.tsx +172 -172
  57. package/src/input/CountryCodeSelect.tsx +42 -28
  58. package/src/input/Dialog.tsx +1 -0
  59. package/src/input/Field.tsx +71 -0
  60. package/src/input/Fieldset.tsx +7 -0
  61. package/src/input/Input.tsx +68 -73
  62. package/src/input/InputGroup.tsx +66 -0
  63. package/src/input/ListBox.tsx +83 -70
  64. package/src/input/NativeSelect.tsx +70 -33
  65. package/src/input/NumericStepper.tsx +173 -171
  66. package/src/input/PasswordInput.tsx +99 -52
  67. package/src/input/PhoneNumberInput.tsx +69 -72
  68. package/src/input/Popover.tsx +1 -0
  69. package/src/input/Radio.tsx +37 -17
  70. package/src/input/SearchInput.tsx +24 -86
  71. package/src/input/Select.tsx +237 -0
  72. package/src/input/Switch.tsx +60 -18
  73. package/src/input/Textarea.tsx +53 -101
  74. package/src/input/{index.tsx → index.ts} +2 -8
  75. package/src/layout/PressableCard.tsx +12 -21
  76. package/src/layout/RadioCard.tsx +68 -101
  77. package/src/layout/Separator.tsx +32 -0
  78. package/src/layout/StaticCard.tsx +13 -33
  79. package/src/layout/index.tsx +3 -7
  80. package/src/linjetag/InfoTag.tsx +16 -9
  81. package/src/linjetag/LineIcon.tsx +74 -28
  82. package/src/linjetag/TravelTag.tsx +38 -27
  83. package/src/link/TextLink.tsx +25 -16
  84. package/src/list/index.tsx +24 -2
  85. package/src/loader/ClientOnly.tsx +8 -7
  86. package/src/loader/ColorInlineLoader.tsx +4 -3
  87. package/src/loader/ColorSpinner.tsx +5 -4
  88. package/src/loader/ContentLoader.tsx +6 -4
  89. package/src/loader/DarkFullScreenLoader.tsx +11 -3
  90. package/src/loader/DarkInlineLoader.tsx +5 -3
  91. package/src/loader/DarkSpinner.tsx +7 -3
  92. package/src/loader/LightFullScreenLoader.tsx +11 -3
  93. package/src/loader/LightInlineLoader.tsx +11 -3
  94. package/src/loader/LightSpinner.tsx +5 -3
  95. package/src/loader/Lottie.tsx +3 -3
  96. package/src/loader/ProgressBar.tsx +83 -84
  97. package/src/loader/ProgressLoader.tsx +120 -75
  98. package/src/loader/Skeleton.tsx +94 -19
  99. package/src/loader/index.tsx +0 -2
  100. package/src/loader/useHydrated.tsx +1 -0
  101. package/src/loader/useRotatingLabel.tsx +2 -1
  102. package/src/logo/CargonetLogo.tsx +89 -89
  103. package/src/logo/VyLogo.tsx +61 -42
  104. package/src/logo/VyLogoPride.tsx +137 -139
  105. package/src/media-controller/JumpButton.tsx +48 -38
  106. package/src/media-controller/PlayPauseButton.tsx +31 -29
  107. package/src/media-controller/SkipButton.tsx +38 -37
  108. package/src/nudge/Nudge.tsx +195 -123
  109. package/src/nudge/index.tsx +0 -1
  110. package/src/pagination/Pagination.tsx +221 -118
  111. package/src/pagination/types.ts +23 -0
  112. package/src/popover/index.tsx +67 -0
  113. package/src/progress-indicator/ProgressDot.tsx +11 -10
  114. package/src/progress-indicator/ProgressIndicator.tsx +28 -15
  115. package/src/provider/SporProvider.tsx +17 -14
  116. package/src/stepper/Stepper.tsx +88 -85
  117. package/src/stepper/StepperContext.tsx +2 -1
  118. package/src/stepper/StepperStep.tsx +28 -21
  119. package/src/tab/Tabs.tsx +62 -12
  120. package/src/tab/index.tsx +1 -9
  121. package/src/table/Table.tsx +35 -30
  122. package/src/table/index.tsx +11 -7
  123. package/src/theme/brand.ts +7 -0
  124. package/src/theme/index.ts +45 -37
  125. package/src/theme/recipes/attached-inputs.ts +43 -0
  126. package/src/theme/recipes/badge.ts +104 -0
  127. package/src/theme/recipes/button.ts +124 -0
  128. package/src/theme/recipes/choice-chip.ts +144 -0
  129. package/src/theme/recipes/close-button.ts +41 -0
  130. package/src/theme/recipes/code.ts +14 -0
  131. package/src/theme/recipes/group.ts +19 -0
  132. package/src/theme/recipes/index.ts +29 -0
  133. package/src/theme/recipes/input.ts +89 -0
  134. package/src/theme/recipes/link.ts +64 -0
  135. package/src/theme/recipes/nudge.ts +12 -0
  136. package/src/theme/recipes/pressable-card.ts +83 -0
  137. package/src/theme/recipes/progress-loader.ts +14 -0
  138. package/src/theme/recipes/separator.ts +85 -0
  139. package/src/theme/recipes/skeleton.ts +57 -0
  140. package/src/theme/recipes/static-card.ts +39 -0
  141. package/src/theme/recipes/textarea.ts +27 -0
  142. package/src/theme/semantic-tokens/colors.ts +22 -0
  143. package/src/theme/semantic-tokens/index.ts +24 -0
  144. package/src/theme/semantic-tokens/radii.ts +14 -0
  145. package/src/theme/semantic-tokens/shadows.ts +17 -0
  146. package/src/theme/slot-recipes/accordion.ts +131 -0
  147. package/src/theme/slot-recipes/alert-expandable.ts +133 -0
  148. package/src/theme/slot-recipes/alert-service.ts +66 -0
  149. package/src/theme/slot-recipes/alert.ts +72 -0
  150. package/src/theme/slot-recipes/anatomy.ts +269 -0
  151. package/src/theme/slot-recipes/breadcrumb.ts +61 -0
  152. package/src/theme/slot-recipes/checkbox.ts +89 -0
  153. package/src/theme/slot-recipes/datepicker.ts +214 -0
  154. package/src/theme/slot-recipes/dialog.ts +221 -0
  155. package/src/theme/slot-recipes/drawer.ts +205 -0
  156. package/src/theme/slot-recipes/field.ts +79 -0
  157. package/src/theme/slot-recipes/floating-action-button.ts +131 -0
  158. package/src/theme/slot-recipes/index.ts +65 -0
  159. package/src/theme/slot-recipes/info-tag.ts +62 -0
  160. package/src/theme/slot-recipes/line-icon.ts +140 -0
  161. package/src/theme/slot-recipes/list.ts +45 -0
  162. package/src/theme/slot-recipes/listbox.ts +72 -0
  163. package/src/theme/slot-recipes/media-controller-button.ts +131 -0
  164. package/src/theme/slot-recipes/native-select.ts +54 -0
  165. package/src/theme/slot-recipes/numeric-stepper.ts +65 -0
  166. package/src/theme/slot-recipes/pagination.ts +41 -0
  167. package/src/theme/slot-recipes/popover.ts +78 -0
  168. package/src/theme/slot-recipes/progress-bar.ts +39 -0
  169. package/src/theme/slot-recipes/progress-indicator.ts +22 -0
  170. package/src/theme/slot-recipes/radio-card.ts +112 -0
  171. package/src/theme/slot-recipes/radio.ts +80 -0
  172. package/src/theme/slot-recipes/select.ts +243 -0
  173. package/src/theme/slot-recipes/stepper.ts +92 -0
  174. package/src/theme/slot-recipes/switch.ts +147 -0
  175. package/src/theme/slot-recipes/table.ts +200 -0
  176. package/src/theme/slot-recipes/tabs.ts +169 -0
  177. package/src/theme/slot-recipes/toast.ts +56 -0
  178. package/src/theme/slot-recipes/travel-tag.ts +192 -0
  179. package/src/theme/tokens/animation-styles.ts +50 -0
  180. package/src/theme/tokens/animations.ts +22 -0
  181. package/src/theme/tokens/aspect-ratios.ts +22 -0
  182. package/src/theme/tokens/blurs.ts +28 -0
  183. package/src/theme/tokens/borders.ts +26 -0
  184. package/src/theme/{foundations → tokens}/breakpoints.ts +0 -1
  185. package/src/theme/tokens/colors.ts +10 -0
  186. package/src/theme/tokens/config.ts +10 -0
  187. package/src/theme/tokens/cursor.ts +28 -0
  188. package/src/theme/tokens/durations.ts +25 -0
  189. package/src/theme/tokens/easings.ts +16 -0
  190. package/src/theme/tokens/font-sizes.ts +30 -0
  191. package/src/theme/tokens/font-weights.ts +31 -0
  192. package/src/theme/tokens/fonts.ts +8 -0
  193. package/src/theme/tokens/global-css.ts +18 -0
  194. package/src/theme/tokens/index.ts +37 -0
  195. package/src/theme/tokens/keyframes.ts +255 -0
  196. package/src/theme/tokens/letter-spacings.ts +19 -0
  197. package/src/theme/tokens/line-heights.ts +19 -0
  198. package/src/theme/tokens/radii.ts +13 -0
  199. package/src/theme/tokens/sizes.ts +51 -0
  200. package/src/theme/tokens/spacing.ts +20 -0
  201. package/src/theme/tokens/text-styles.ts +89 -0
  202. package/src/theme/tokens/z-index.ts +17 -0
  203. package/src/theme/utils/accent-utils.ts +8 -21
  204. package/src/theme/utils/bg-utils.ts +4 -6
  205. package/src/theme/utils/brand-utils.ts +6 -19
  206. package/src/theme/utils/core-utils.ts +91 -0
  207. package/src/theme/utils/floating-utils.ts +20 -39
  208. package/src/theme/utils/ghost-utils.ts +7 -21
  209. package/src/theme/utils/input-utils.ts +32 -37
  210. package/src/theme/utils/outline-utils.ts +4 -11
  211. package/src/theme/utils/surface-utils.ts +5 -19
  212. package/src/theme/utils/types.ts +1 -0
  213. package/src/toast/index.tsx +1 -1
  214. package/src/toast/toast.tsx +105 -0
  215. package/src/transition/index.ts +2 -8
  216. package/src/typography/Badge.tsx +15 -61
  217. package/src/typography/Code.tsx +16 -28
  218. package/src/typography/Heading.tsx +36 -21
  219. package/src/typography/Text.tsx +9 -6
  220. package/src/typography/{index.tsx → index.ts} +1 -0
  221. package/src/util/externals.tsx +13 -27
  222. package/tsconfig.json +5 -1
  223. package/src/accordion/Accordion.test.tsx +0 -20
  224. package/src/alert/BaseAlert.test.tsx +0 -37
  225. package/src/alert/BaseAlert.tsx +0 -34
  226. package/src/alert/ClosableAlert.test.tsx +0 -37
  227. package/src/alert/ClosableAlert.tsx +0 -85
  228. package/src/alert/ExpandableAlert.test.tsx +0 -84
  229. package/src/alert/StaticAlert.tsx +0 -33
  230. package/src/button/Button.test.tsx +0 -23
  231. package/src/datepicker/TimePicker.test.tsx +0 -74
  232. package/src/input/FormControl.tsx +0 -2
  233. package/src/input/FormErrorMessage.tsx +0 -95
  234. package/src/input/FormLabel.tsx +0 -11
  235. package/src/input/InfoSelect.tsx +0 -274
  236. package/src/input/InputElement.tsx +0 -44
  237. package/src/input/RadioGroup.tsx +0 -47
  238. package/src/layout/Divider.tsx +0 -27
  239. package/src/layout/RadioCardGroup.tsx +0 -79
  240. package/src/layout/Stack.tsx +0 -42
  241. package/src/loader/SkeletonCircle.tsx +0 -13
  242. package/src/loader/SkeletonText.tsx +0 -14
  243. package/src/media-controller/index.test.tsx +0 -59
  244. package/src/modal/Drawer.tsx +0 -120
  245. package/src/modal/FullScreenDrawer.tsx +0 -239
  246. package/src/modal/Modal.tsx +0 -15
  247. package/src/modal/ModalHeader.tsx +0 -31
  248. package/src/modal/SimpleDrawer.tsx +0 -51
  249. package/src/modal/index.tsx +0 -5
  250. package/src/nudge/WizardNudge.tsx +0 -107
  251. package/src/theme/components/accordion.ts +0 -102
  252. package/src/theme/components/alert-expandable.ts +0 -125
  253. package/src/theme/components/alert-service.ts +0 -98
  254. package/src/theme/components/alert.ts +0 -71
  255. package/src/theme/components/badge.ts +0 -109
  256. package/src/theme/components/breadcrumb.ts +0 -60
  257. package/src/theme/components/button.ts +0 -125
  258. package/src/theme/components/card-select.ts +0 -117
  259. package/src/theme/components/checkbox.ts +0 -88
  260. package/src/theme/components/choice-chip.ts +0 -161
  261. package/src/theme/components/close-button.ts +0 -48
  262. package/src/theme/components/code.ts +0 -17
  263. package/src/theme/components/datepicker.ts +0 -198
  264. package/src/theme/components/divider.ts +0 -50
  265. package/src/theme/components/drawer.ts +0 -95
  266. package/src/theme/components/fab.ts +0 -109
  267. package/src/theme/components/form-label.ts +0 -17
  268. package/src/theme/components/form.ts +0 -27
  269. package/src/theme/components/index.ts +0 -45
  270. package/src/theme/components/info-select.ts +0 -85
  271. package/src/theme/components/info-tag.ts +0 -63
  272. package/src/theme/components/input.ts +0 -28
  273. package/src/theme/components/line-icon.ts +0 -129
  274. package/src/theme/components/link.ts +0 -78
  275. package/src/theme/components/list.ts +0 -23
  276. package/src/theme/components/listbox.ts +0 -77
  277. package/src/theme/components/media-controller-button.ts +0 -97
  278. package/src/theme/components/modal.ts +0 -96
  279. package/src/theme/components/numeric-stepper.ts +0 -65
  280. package/src/theme/components/pagination.ts +0 -74
  281. package/src/theme/components/popover.ts +0 -68
  282. package/src/theme/components/pressable-card.ts +0 -72
  283. package/src/theme/components/progress-bar.ts +0 -47
  284. package/src/theme/components/progress-indicator.ts +0 -44
  285. package/src/theme/components/radio-card.ts +0 -134
  286. package/src/theme/components/radio.ts +0 -68
  287. package/src/theme/components/select.ts +0 -74
  288. package/src/theme/components/skeleton.ts +0 -40
  289. package/src/theme/components/static-card.ts +0 -82
  290. package/src/theme/components/stepper.ts +0 -100
  291. package/src/theme/components/switch.ts +0 -112
  292. package/src/theme/components/table.ts +0 -161
  293. package/src/theme/components/tabs.ts +0 -135
  294. package/src/theme/components/textarea.ts +0 -33
  295. package/src/theme/components/toast.ts +0 -28
  296. package/src/theme/components/travel-tag.ts +0 -256
  297. package/src/theme/foundations/borders.ts +0 -11
  298. package/src/theme/foundations/colors.ts +0 -12
  299. package/src/theme/foundations/config.ts +0 -5
  300. package/src/theme/foundations/fontSizes.ts +0 -29
  301. package/src/theme/foundations/fontWeights.ts +0 -5
  302. package/src/theme/foundations/fonts.ts +0 -7
  303. package/src/theme/foundations/index.ts +0 -15
  304. package/src/theme/foundations/lineHeights.ts +0 -6
  305. package/src/theme/foundations/radii.ts +0 -12
  306. package/src/theme/foundations/shadows.ts +0 -8
  307. package/src/theme/foundations/sizes.ts +0 -36
  308. package/src/theme/foundations/spacing.ts +0 -31
  309. package/src/theme/foundations/styles.ts +0 -12
  310. package/src/theme/foundations/textStyles.ts +0 -74
  311. package/src/theme/foundations/zIndices.ts +0 -17
  312. package/src/theme/utils/base-utils.ts +0 -104
  313. package/src/theme/utils/focus-utils.ts +0 -10
  314. package/src/toast/ActionToast.test.tsx +0 -22
  315. package/src/toast/ActionToast.tsx +0 -28
  316. package/src/toast/BaseToast.test.tsx +0 -27
  317. package/src/toast/BaseToast.tsx +0 -75
  318. package/src/toast/ClosableToast.test.tsx +0 -17
  319. package/src/toast/ClosableToast.tsx +0 -40
  320. package/src/toast/useToast.tsx +0 -121
  321. package/src/tooltip/Tooltip.tsx +0 -70
  322. package/src/tooltip/index.tsx +0 -1
@@ -1,6 +1,28 @@
1
1
 
2
- > @vygruppen/spor-react@11.3.10 build /home/runner/work/spor/spor/packages/spor-react
3
- > tsup
2
+ > @vygruppen/spor-react@12.0.1 build /home/runner/work/spor/spor/packages/spor-react
3
+ > pnpm typegen && tsup
4
+
5
+
6
+ > @vygruppen/spor-react@12.0.1 typegen /home/runner/work/spor/spor/packages/spor-react
7
+ > npx @chakra-ui/cli typegen src/theme/index.ts
8
+
9
+ ┌ Chakra CLI ⚡️
10
+ [?25l│
11
+ ◒ Generating conditions types...
12
+ ◇ ✅ Generated conditions typings
13
+ [?25h[?25l│
14
+ ◒ Generating recipe types...
15
+ ◇ ✅ Generated recipe typings
16
+ [?25h[?25l│
17
+ ◇ ✅ Generated utility typings
18
+ [?25h[?25l│
19
+ ◒ Generating token types...
20
+ ◇ ✅ Generated token typings
21
+ [?25h[?25l│
22
+ ◒ Generating system types...
23
+ ◇ ✅ Generated system types
24
+ [?25h│
25
+ └ 🎉 Done!
4
26
 
5
27
  CLI Building entry: src/index.tsx
6
28
  CLI Using tsconfig: tsconfig.json
@@ -10,12 +32,12 @@ CLI Target: node16
10
32
  CJS Build start
11
33
  ESM Build start
12
34
  DTS Build start
13
- CJS dist/index.js 288.32 KB
14
- CJS dist/index.js.map 592.61 KB
15
- CJS ⚡️ Build success in 2340ms
16
- ESM dist/index.mjs 269.43 KB
17
- ESM dist/index.mjs.map 592.61 KB
18
- ESM ⚡️ Build success in 2342ms
19
- DTS ⚡️ Build success in 16835ms
20
- DTS dist/index.d.ts 342.21 KB
21
- DTS dist/index.d.mts 342.21 KB
35
+ ESM dist/index.mjs 292.29 KB
36
+ ESM dist/index.mjs.map 619.66 KB
37
+ ESM ⚡️ Build success in 1885ms
38
+ CJS dist/index.js 311.52 KB
39
+ CJS dist/index.js.map 619.66 KB
40
+ CJS ⚡️ Build success in 1887ms
41
+ DTS ⚡️ Build success in 22227ms
42
+ DTS dist/index.d.ts 133.66 KB
43
+ DTS dist/index.d.mts 133.66 KB
@@ -0,0 +1,22 @@
1
+
2
+ > @vygruppen/spor-react@12.0.1 typegen /home/runner/work/spor/spor/packages/spor-react
3
+ > npx @chakra-ui/cli typegen src/theme/index.ts
4
+
5
+ ┌ Chakra CLI ⚡️
6
+ [?25l│
7
+ ◒ Generating conditions types...
8
+ ◇ ✅ Generated conditions typings
9
+ [?25h[?25l│
10
+ ◒ Generating recipe types...
11
+ ◇ ✅ Generated recipe typings
12
+ [?25h[?25l│
13
+ ◇ ✅ Generated utility typings
14
+ [?25h[?25l│
15
+ ◒ Generating token types...
16
+ ◇ ✅ Generated token typings
17
+ [?25h[?25l│
18
+ ◒ Generating system types...
19
+ ◇ ✅ Generated system types
20
+ [?25h│
21
+ └ 🎉 Done!
22
+
package/CHANGELOG.md CHANGED
@@ -1,5 +1,252 @@
1
1
  # @vygruppen/spor-react
2
2
 
3
+ ## 12.0.1
4
+
5
+ ### Patch Changes
6
+
7
+ - 14720c4: Update peer dependencies to support all versions of react 18. Fix type errors with NativeSelect and Heading
8
+ - Updated dependencies [14720c4]
9
+ - @vygruppen/spor-icon-react@4.0.1
10
+
11
+ ## 12.0.0
12
+
13
+ ### Major Changes
14
+
15
+ - fcd6f80: Checkbox:
16
+
17
+ - Updated props, `onChange` is now `onCheckedChange`
18
+ - "`is`" removed from props names. `invalid`, `disabled` and `checked`
19
+
20
+ CheckboxGroup:
21
+
22
+ - `defaultChecked` > `defaultValue`
23
+
24
+ - fcd6f80: Separator: Changed name from Divider to Separator. Fixed styling on separators to match Figma styling
25
+ - fcd6f80: Line Tag: isDisabled prop is now disabled
26
+ - fcd6f80: Line Icon: added label prop to enable aria-label for voice-over
27
+ - fcd6f80: useDisclosure hooks has changed prop from isOpen to open
28
+ - fcd6f80: Name update: "base" is now "core" on all platforms. Colors and variants.
29
+ - fcd6f80: Lists: UnorderedList is removed, use List with prop as="ul"; OrderedList is removed, use List with prop as="ol"
30
+ - fcd6f80: Table:
31
+
32
+ - Thead is now TableHeader,
33
+ - Tbody is now TableBody,
34
+ - Tr is now TableRow,
35
+ - Th is now TableCell,
36
+ - isNumeric is now textAlign="end"
37
+ - "line" > "ghost"
38
+ - "outline" > "core"
39
+
40
+ - fcd6f80: Breadcrumb: isCurrentPage prop is deprecated. Use BreadcrumbCurrentLink instead. BreadcrumbLink is deprecated. BreadcrumbItem will act as link and item.
41
+ - fcd6f80: Stepper: isDisabled is now disabled, variants are now `core` and `accent`
42
+ - fcd6f80: **Pagination:**
43
+ Pagination has changed and been converted to composition pattern. Please see docs for info.
44
+
45
+ Prop changes:
46
+
47
+ - `totalPages` > `count`
48
+ - `selectedPage` > `page`
49
+
50
+ New props: `pageSize`, `siblingsCount`, `defaultPage`, `onPageChange`, `onPageSizeChage`, `page`
51
+ See docs for more info
52
+
53
+ - fcd6f80: Media controller: isDisabled is deprecated, use disabled, isPlaying is deprecated, use now playing
54
+ - fcd6f80: ## Migrate to Chakra 3
55
+
56
+ Spor is getting a major update with Chakra 3.
57
+
58
+ ## Updated variants
59
+
60
+ - `base` is now `core`
61
+
62
+ ### Update props
63
+
64
+ - `isDisabled` is now `disabled`
65
+ - `isLoading` is now `loading`
66
+ - `sx` and `__css` is gone, use `css` or `style` instead
67
+ - `colorScheme` is now `colorPalette`
68
+ - `onClose` is now `close`
69
+ - `isOpen` is now `open`
70
+ - `isFitted` is now `fitted`
71
+ - `isPlaying` is now `playing`
72
+ - `isAttached` is now `attached`
73
+
74
+ ### Updated components
75
+
76
+ - `Dialog` replaces `Modal` - And all sizes and placements are now available from the same component
77
+ - `Accordion`, `Pagination`, `Tabs`, `RadioCard` and `RadioCardGroup` now have a different syntax. Please consult the documentation for name changes.
78
+ - `Table` components has many changes. Instead of the generic HTML names (Td, Tr etc.), it will now work with full names. Please see docs. Variant `simple` is now `line`.
79
+ - `Toast` prop `isClosable` is now `closable`. `useToast` is now `createToaster`.
80
+ - `FormControl`, `FormLabel` and `FormErrorMessage` are removed and replaced by `Field`. `Field` supports the necessary props to support this.
81
+ - `Separator` replaces `Divider`.
82
+ - `UnorderedList` and `OrderedList` is deprecated. Use `List` and `as` prop instead.
83
+ - `Tab` is now `TabsTrigger`, `TabList` is now `TabsList`, `TabsPanel` and `TabPanel` are now `TabsContent`.
84
+ - `ClosableAlert` and `StaticAlert` are deprecated. Use component `Alert` and prop `closable` instead
85
+ - `InfoSelect` is now `Select` and has two more variants `rightSideSquare` and `leftSideSquare`
86
+ - `AttachedInputs` has deprecate FlexDirection prop which is now `orientation`
87
+ - `PhoneNumberInputs`an `invalid` prop is send for validation purpose, and `errorText` prop is send to give feedback on error
88
+ - `CardSelect` has new variant: `core`, `ghost` and `floating`
89
+ - `NumericStepper`isDisabled prop is deprecated, use disabled
90
+ - `createToast` replaces `useToast`. Now does not support closable toasts or toasts with actions.
91
+ - `Popover`replaces `ToolTip`. Props are different.
92
+ - `MediaController`isPlaying prop is now playing
93
+ - `Nudge` has different props. `WizardNudge`is no longer its own component, but can be easily built with `Nudge`and `NudgeWizardStep`s
94
+ - `ButtonGroup` has deprecate variant and size since the reference component in Chakra is now Group, variant and size is sent as children
95
+ - `Alert`: The `indicator` prop has been renamed to `showIndicator`.
96
+ - New variants: `important`, `alt`, `neutral`, `error-secondary`, and `service`.
97
+ - Removed variants: `warning` and `alt-transport`.
98
+ - Unchanged variants: `success`, `info`, and `error`.
99
+ - `CardSelect` new implementation. Uses same setup as `Popover`. See docs
100
+
101
+ ### Darkmode
102
+
103
+ `DarkMode` and `LightMode` has been removed. Use `className="dark"` instead.
104
+
105
+ The `useColorMode` hook exports the state (`colorMode`) and toggle (`toggleColorMode`).
106
+
107
+ ### Externals from Chakra:
108
+
109
+ Removed (as they have been removed from Chakra): `DarkMode, LightMode, defineStyleConfig, useColorModePreference, useMergeRefs, usePreferReducedMotion, CSSWithMultiValues, ComponentStyleConfig, UseClipboardOptions, UseOutsideClickProps, useSize`
110
+
111
+ Added: `defineRecipe, defineStyle, For, FormatNumber, FormatByte, LocaleProvider, Show, VisuallyHidden, useMap, useOnClickOutside, useIsClient`
112
+
113
+ - fcd6f80: Combobox: default variant is no longer base but core
114
+ - fcd6f80: Dialog: previous Modal component, and props, is removed and Dialog replace it
115
+ - fcd6f80: Accordion: Update syntax and props.
116
+
117
+ Changes for component:
118
+
119
+ - `AccordionButton` > `AccordionItemTrigger`
120
+ - `AccordionPanel` > `AccordionItemContent`
121
+ - `AccordionIcon` is deprecated and used in all Accordions
122
+ - `leftIcon` > `startElement`
123
+ - `defaultIndex` > `defaultValue`
124
+
125
+ - fcd6f80: Radio: can no longer be used without RadioGroup, for accessibility reasons.
126
+ - fcd6f80: Button Group: variant and size are no longer props of ButtonGroup, these props are passed from children. isAttached is now attached
127
+ - fcd6f80: RadioCardGroup and RadioCard:
128
+
129
+ - Updated props: `onChange` is now `onValueChange`
130
+ - Deleted props: `name`, `groupLabel` is replaced by `<RadioCardLabel />`
131
+ - `core` replaces the `base` variant
132
+
133
+ - fcd6f80: Numeric stepper: isDisabled is deprecated use now disabled
134
+ - fcd6f80: Tabs: Tab is now TabsTrigger, TabList is now TabsList, TabsPanel and TabPanel are now TabsContent, isFitted is now fitted, colorScheme is now variant
135
+ - fcd6f80: TimePicker: isInvalid and isDisabled is deprecated - use invalid and disabled instead
136
+ - fcd6f80: Popover component
137
+ - fcd6f80: Drawer: mainly component and some sub component has changed including their props
138
+
139
+ SimpleDrawer is deprecated
140
+ FullPageDrawer is deprecated and replaced by a prop customVariant="full" in DrawerContent
141
+
142
+ - fcd6f80: NativeSelect: isDisabled and isInvalid is now disabled and invalid. It is no longer necessary to define true or false.
143
+ - fcd6f80: Alert & ExpandableAlert
144
+
145
+ - `Alert`: `ClosableAlert` and `StaticAlert` are deprecated. Use component `Alert` and prop `closable` instead
146
+ - `ExpandableAlert`: New colorscheme and styling
147
+ - `Accordion`: Some styling updates
148
+ - variant `warning` is now `important` for Alert and ExpandableAlert
149
+ - `onToggle` is now `onValueChange`
150
+ - `onFocusChange` is added as prop
151
+
152
+ - fcd6f80: Switch: FormLabel is depricated, use label prop. isDisabled, isChecked and isInvalid is now disabled, checked and invalid.
153
+ - fcd6f80: **spor-design-tokens: major**
154
+
155
+ - teal has been removed from the palette. Use the green palette instead
156
+ - Some aliases are removed to make way for new ones
157
+
158
+ **spor-design-tokens: minor**
159
+
160
+ - The palette has been extended from 50-600 to 50-1100 with new values
161
+ - New aliases has been added to support the extended color palette
162
+ - New tokens has been added to themes; detail.color, surface.color and alert
163
+ - Some values for tokens has changed to support the new palette
164
+
165
+ **spor-react: patch**
166
+
167
+ - Updated darkGreen Badge with new alias
168
+
169
+ - fcd6f80: CardSelect: the variant are now: core, ghost and floating
170
+ - fcd6f80: ChoiceChip: isChecked and isDisabled is now checked and disabled
171
+ - fcd6f80: Floating Action button: isDisabled is now disabled
172
+ - fcd6f80: AttachedInputs: FlexDirection is deprecated and it is now orientation
173
+ Select: previously InfoSelect now just Select, disabledKeys is deprecated, onChange is now onValueChange,
174
+ placeholder is deprecated use label instead, ItemLabel and ItemDescription are deprecated, two more variants are added:
175
+ rightSideSquare and leftSideSquare to better use Select in AttachedInputs
176
+ PhoneNumberInputs: invalid prop is send for validation, default is false, and errorText is send to give feedback on error
177
+ - fcd6f80: TextLink: isExternal prop is now external
178
+
179
+ ### Minor Changes
180
+
181
+ - fcd6f80: Change lottie package
182
+ - fcd6f80: Textarea: New props `label`, `invalid`, `errorText` and `helperText`
183
+ - fcd6f80: New alert variants and tokens.
184
+ - fcd6f80: remove support for elm
185
+ - fcd6f80: ProgressBar: You can now use showValueText to show the percentage done
186
+ - fcd6f80: ### Changed
187
+
188
+ - Changed the way the theme is switched to work with Chakra 3.
189
+ - Removed the `theme` prop and its value from `SporProvider`. Specifying brand should be sufficient.
190
+
191
+ - fcd6f80: ### Skeleton Component Updates
192
+
193
+ - **Skeleton**: Introduced new props. The `isLoaded` prop has been replaced with `loading`, which is its opposite.
194
+ - **SkeletonCircle**: The `boxSize` prop has been replaced with `size`.
195
+
196
+ - fcd6f80: New toast chakra 3
197
+ - fcd6f80: DatePicker: FormControl is depricated, you may use form
198
+ - fcd6f80: Update badge and add new borderradius, xxs
199
+ - fcd6f80: Upgrade to pnpm
200
+
201
+ ### Patch Changes
202
+
203
+ - fcd6f80: ProgressLoader: No big changes
204
+ - fcd6f80: Button: fix outline width to align with design
205
+ - fcd6f80: Watch mode for packages
206
+ - fcd6f80: Update style and code quality in breadcrumbs
207
+ - fcd6f80: PhoneNumberInput: Fix styling
208
+ - fcd6f80: Field: fix helper text color
209
+ - fcd6f80: Simplify styling button
210
+ - fcd6f80: **Color tokens**: Update structure for alias and themes
211
+ **scripts**: Add typegen, typegen:watch and typegen:strict as run commands
212
+ **tokens**: Update structure for import to support colors
213
+ - fcd6f80: New setup CardSelect.
214
+ - fcd6f80: Button: fix tertiary styling
215
+ - fcd6f80: Separator: changed separator to use color token to fix darkmode
216
+ - fcd6f80: Rename props in alert from `indicator` to `showIndicator`
217
+ - fcd6f80: NativeSelect: Fix innvalid and disabled
218
+ - fcd6f80: Datepicker: added active state
219
+ - fcd6f80: ProgressIndicator: No big changes
220
+ - fcd6f80: PressableCard: moved \_active inside \_hover. Defaults to core now
221
+ - fcd6f80: Button: no big changes
222
+ - fcd6f80: Stepper: update design for active step
223
+ - fcd6f80: Checkbox: fix outline stroke for focus state
224
+ - fcd6f80: ServiceAlert: Updated styling with correct tokens
225
+ - fcd6f80: StaticCard: Changed color values of grey, red, yellow and orange to reflect Figma design.
226
+ - fcd6f80: Floating Action Button: fix problems with outline stroke
227
+ - fcd6f80: Update button colors
228
+ - fcd6f80: Merge main
229
+ - Updated dependencies [fcd6f80]
230
+ - Updated dependencies [fcd6f80]
231
+ - Updated dependencies [fcd6f80]
232
+ - Updated dependencies [fcd6f80]
233
+ - Updated dependencies [fcd6f80]
234
+ - Updated dependencies [fcd6f80]
235
+ - Updated dependencies [fcd6f80]
236
+ - Updated dependencies [fcd6f80]
237
+ - Updated dependencies [fcd6f80]
238
+ - Updated dependencies [fcd6f80]
239
+ - Updated dependencies [fcd6f80]
240
+ - Updated dependencies [fcd6f80]
241
+ - Updated dependencies [fcd6f80]
242
+ - Updated dependencies [fcd6f80]
243
+ - Updated dependencies [fcd6f80]
244
+ - Updated dependencies [fcd6f80]
245
+ - Updated dependencies [fcd6f80]
246
+ - @vygruppen/spor-design-tokens@4.0.0
247
+ - @vygruppen/spor-icon-react@4.0.0
248
+ - @vygruppen/spor-loader@0.6.0
249
+
3
250
  ## 11.3.10
4
251
 
5
252
  ### Patch Changes