@vygruppen/spor-react 12.10.0 → 12.10.2

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 (44) hide show
  1. package/.turbo/turbo-build.log +10 -10
  2. package/.turbo/turbo-postinstall.log +1 -1
  3. package/CHANGELOG.md +20 -29
  4. package/dist/index.cjs +185 -231
  5. package/dist/index.cjs.map +1 -1
  6. package/dist/index.d.cts +10 -41
  7. package/dist/index.d.ts +10 -41
  8. package/dist/index.mjs +185 -231
  9. package/dist/index.mjs.map +1 -1
  10. package/package.json +5 -4
  11. package/src/alert/ServiceAlert.tsx +2 -2
  12. package/src/datepicker/DateField.tsx +6 -2
  13. package/src/datepicker/TimeField.tsx +2 -6
  14. package/src/dialog/Drawer.tsx +2 -2
  15. package/src/input/ListBox.tsx +16 -3
  16. package/src/input/PhoneNumberInput.tsx +31 -40
  17. package/src/input/Switch.tsx +1 -1
  18. package/src/linjetag/LineIcon.tsx +4 -2
  19. package/src/linjetag/TravelTag.tsx +2 -1
  20. package/src/loader/DarkFullScreenLoader.tsx +2 -1
  21. package/src/loader/LightFullScreenLoader.tsx +1 -7
  22. package/src/loader/LightInlineLoader.tsx +1 -7
  23. package/src/theme/recipes/badge.ts +1 -1
  24. package/src/theme/recipes/close-button.ts +2 -2
  25. package/src/theme/recipes/link.ts +3 -3
  26. package/src/theme/recipes/pressable-card.ts +0 -1
  27. package/src/theme/recipes/skeleton.ts +1 -1
  28. package/src/theme/slot-recipes/alert-service.ts +3 -3
  29. package/src/theme/slot-recipes/checkbox.ts +2 -3
  30. package/src/theme/slot-recipes/choice-chip.ts +7 -7
  31. package/src/theme/slot-recipes/datepicker.ts +1 -2
  32. package/src/theme/slot-recipes/dialog.ts +1 -0
  33. package/src/theme/slot-recipes/drawer.ts +1 -0
  34. package/src/theme/slot-recipes/field.ts +4 -3
  35. package/src/theme/slot-recipes/floating-action-button.ts +1 -1
  36. package/src/theme/slot-recipes/line-icon.ts +3 -36
  37. package/src/theme/slot-recipes/radio-card.ts +0 -1
  38. package/src/theme/slot-recipes/select.ts +8 -18
  39. package/src/theme/slot-recipes/switch.ts +3 -5
  40. package/src/theme/slot-recipes/table.ts +0 -1
  41. package/src/theme/slot-recipes/tabs.ts +3 -4
  42. package/src/theme/slot-recipes/toast.ts +0 -9
  43. package/src/theme/slot-recipes/travel-tag.ts +11 -9
  44. package/src/toast/toast.tsx +1 -1
package/src/theme/slot-recipes/select.ts CHANGED
@@ -126,7 +126,6 @@ export const selectSlotRecipe = defineSlotRecipe({
126
126
  },
127
127
  _active: {
128
128
  backgroundColor: "ghost.surface.active",
129
- color: "green",
130
129
  },
131
130
  _highlighted: {
132
131
  _active: {
@@ -202,29 +201,20 @@ export const selectSlotRecipe = defineSlotRecipe({
202
201
  },
203
202
  floating: {
204
203
  control: {
205
- backgroundColor: {
206
- _light: "bg",
207
- _dark: `color-mix(in srgb, white 10%, var(--spor-colors-bg))`,
208
- },
209
204
  outline: "1px solid",
210
205
  outlineColor: "floating.outline",
211
206
  _hover: {
212
- outline: "1px solid",
213
- outlineColor: "floating.outline.hover",
214
- backgroundColor: {
215
- _light: "floating.surface.hover",
216
- _dark: `color-mix(in srgb, white 10%, var(--spor-colors-bg))`,
217
- },
207
+ outline: "2px solid",
208
+ outlineColor: "floating.outline",
218
209
  },
219
210
  _active: {
220
- outline: "1px solid",
221
- outlineColor: "floating.outline.active",
222
- backgroundColor: "floating.surface.active",
211
+ backgroundColor: "brand.surface.active",
212
+ },
213
+ _disabled: {
214
+ pointerEvents: "none",
215
+ color: "text.disabled",
216
+ backgroundColor: "surface.disabled",
223
217
  },
224
- },
225
- selectContent: {
226
- outline: "1px solid",
227
- outlineColor: "floating.outline",
228
218
  },
229
219
  },
230
220
  },
package/src/theme/slot-recipes/switch.ts CHANGED
@@ -9,7 +9,7 @@ export const switchSlotRecipe = defineSlotRecipe({
9
9
  base: {
10
10
  root: {
11
11
  display: "inline-flex",
12
- gap: "2.5",
12
+ gap: "2",
13
13
  alignItems: "center",
14
14
  position: "relative",
15
15
  verticalAlign: "middle",
@@ -69,9 +69,8 @@ export const switchSlotRecipe = defineSlotRecipe({
69
69
  height: "var(--switch-height)",
70
70
  transitionProperty: "common",
71
71
  transitionDuration: "fast",
72
- outline: "1px solid",
73
- outlineColor: "core.outline.default",
74
- backgroundColor: "core.background",
72
+ outline: "2px solid",
73
+ outlineColor: "core.outline",
75
74
  _hover: {
76
75
  outline: "2px solid",
77
76
  outlineColor: "core.outline.hover",
@@ -96,7 +95,6 @@ export const switchSlotRecipe = defineSlotRecipe({
96
95
  },
97
96
  _disabled: {
98
97
  pointerEvents: "none",
99
- backgroundColor: "core.disabled",
100
98
  outlineColor: "outline.disabled",
101
99
 
102
100
  _checked: {
package/src/theme/slot-recipes/table.ts CHANGED
@@ -59,7 +59,6 @@ export const tableSlotRecipe = defineSlotRecipe({
59
59
  backgroundColor: "bg",
60
60
  },
61
61
  columnHeader: {
62
- color: "brand.text.inverted",
63
62
  backgroundColor: "surface.disabled",
64
63
  _hover: {
65
64
  backgroundColor: "surface.disabled",
package/src/theme/slot-recipes/tabs.ts CHANGED
@@ -63,7 +63,6 @@ export const tabsSlotRecipe = defineSlotRecipe({
63
63
  variant: {
64
64
  core: {
65
65
  list: {
66
- backgroundColor: "core.surface",
67
66
  color: "core.text",
68
67
  border: "sm",
69
68
  },
@@ -73,7 +72,7 @@ export const tabsSlotRecipe = defineSlotRecipe({
73
72
  borderColor: "transparent",
74
73
  _hover: {
75
74
  outline: "2px solid",
76
- outlineColor: "core.surface.hover",
75
+ outlineColor: "core.outline.hover",
77
76
  outlineOffset: "-2px",
78
77
  },
79
78
  _active: {
@@ -90,7 +89,7 @@ export const tabsSlotRecipe = defineSlotRecipe({
90
89
  },
91
90
  _disabled: {
92
91
  backgroundColor: "surface.disabled",
93
- color: "brand.text.disabled",
92
+ color: "surface.disabled",
94
93
  },
95
94
  },
96
95
  },
@@ -104,7 +103,7 @@ export const tabsSlotRecipe = defineSlotRecipe({
104
103
 
105
104
  _disabled: {
106
105
  backgroundColor: "surface.disabled",
107
- color: "accent.text.disabled",
106
+ color: "icon.disabled",
108
107
  },
109
108
  _hover: {
110
109
  backgroundColor: "accent.surface.hover",
package/src/theme/slot-recipes/toast.ts CHANGED
@@ -30,22 +30,13 @@ export const toastSlotRecipe = defineSlotRecipe({
30
30
  color: "text",
31
31
  "&[data-type=success]": {
32
32
  backgroundColor: "alert.success.surface",
33
- "& svg": {
34
- color: "primaryGreen",
35
- },
36
33
  },
37
34
  "&[data-type=error]": {
38
35
  backgroundColor: "alert.error.surface",
39
- "& svg": {
40
- color: "brightRed",
41
- },
42
36
  },
43
37
 
44
38
  "&[data-type=info]": {
45
39
  backgroundColor: "alert.info.surface",
46
- "& svg": {
47
- color: "darkBlue",
48
- },
49
40
  },
50
41
  },
51
42
 
package/src/theme/slot-recipes/travel-tag.ts CHANGED
@@ -11,6 +11,11 @@ export const travelTagSlotRecipe = defineSlotRecipe({
11
11
  display: "flex",
12
12
  alignItems: "center",
13
13
  padding: 0.5,
14
+
15
+ _disabled: {
16
+ background: "surface.disabled",
17
+ },
18
+
14
19
  width: "fit-content",
15
20
  transitionDuration: "fast",
16
21
  transitionProperty: "common",
@@ -26,13 +31,13 @@ export const travelTagSlotRecipe = defineSlotRecipe({
26
31
  },
27
32
  },
28
33
  textContainer: {
29
- color: "darkGrey",
34
+ color: "text",
30
35
  paddingRight: 0.5,
31
36
  whiteSpace: "nowrap",
32
37
  },
33
38
  title: {
34
39
  fontWeight: "bold",
35
- color: "brand.text.inverted",
40
+ color: "text",
36
41
  "[aria-disabled=true] &": {
37
42
  color: "text.disabled",
38
43
  },
@@ -56,24 +61,21 @@ export const travelTagSlotRecipe = defineSlotRecipe({
56
61
  critical: {
57
62
  container: {
58
63
  border: "1px solid",
59
- borderColor: "error.text",
64
+ borderColor: "outline.error",
60
65
  },
61
66
  deviationIcon: {
62
- color: "brightRed",
67
+ color: "outline.error",
63
68
  },
64
69
  },
65
70
  major: {
66
71
  container: {
67
72
  border: "1px solid",
73
+ // eslint-disable-next-line spor/use-semantic-tokens
68
74
  borderColor: "golden",
69
75
  },
70
76
  },
71
77
  minor: {},
72
- info: {
73
- deviationIcon: {
74
- color: "ocean",
75
- },
76
- },
78
+ info: {},
77
79
  none: {},
78
80
  },
79
81
  variant: {
package/src/toast/toast.tsx CHANGED
@@ -34,7 +34,7 @@ export const createToast = ({
34
34
  text,
35
35
  variant,
36
36
  id,
37
- duration = 6000,
37
+ duration = 600_000,
38
38
  }: ToastProps) =>
39
39
  toaster.create({
40
40
  description: text,