@vygruppen/spor-react 1.3.3 → 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 (197) hide show
  1. package/.turbo/turbo-build.log +12 -10
  2. package/CHANGELOG.md +40 -0
  3. package/README.md +1 -1
  4. package/dist/index.d.ts +6718 -27
  5. package/dist/index.js +14139 -140
  6. package/dist/index.mjs +13818 -27
  7. package/package.json +19 -31
  8. package/src/accordion/Accordion.test.tsx +20 -0
  9. package/src/accordion/Accordion.tsx +62 -0
  10. package/src/accordion/AccordionContext.tsx +27 -0
  11. package/src/accordion/Expandable.tsx +157 -0
  12. package/src/accordion/index.tsx +2 -0
  13. package/src/alert/AlertIcon.tsx +75 -0
  14. package/src/alert/BaseAlert.test.tsx +37 -0
  15. package/src/alert/BaseAlert.tsx +21 -0
  16. package/src/alert/ClosableAlert.test.tsx +37 -0
  17. package/src/alert/ClosableAlert.tsx +75 -0
  18. package/src/alert/ExpandableAlert.test.tsx +84 -0
  19. package/src/alert/ExpandableAlert.tsx +84 -0
  20. package/src/alert/StaticAlert.tsx +25 -0
  21. package/src/alert/index.tsx +3 -0
  22. package/src/button/Button.test.tsx +23 -0
  23. package/src/button/Button.tsx +162 -0
  24. package/src/button/ButtonGroup.tsx +43 -0
  25. package/src/button/CloseButton.tsx +63 -0
  26. package/src/button/FloatingActionButton.tsx +113 -0
  27. package/src/button/IconButton.tsx +63 -0
  28. package/src/button/index.tsx +5 -0
  29. package/src/card/Card.tsx +59 -0
  30. package/src/card/index.tsx +1 -0
  31. package/src/datepicker/Calendar.tsx +32 -0
  32. package/src/datepicker/CalendarCell.tsx +74 -0
  33. package/src/datepicker/CalendarGrid.tsx +76 -0
  34. package/src/datepicker/CalendarHeader.tsx +153 -0
  35. package/src/datepicker/CalendarNavigationButton.tsx +26 -0
  36. package/src/datepicker/CalendarTriggerButton.tsx +36 -0
  37. package/src/datepicker/DateField.tsx +51 -0
  38. package/src/datepicker/DatePicker.tsx +153 -0
  39. package/src/datepicker/DateRangePicker.tsx +165 -0
  40. package/src/datepicker/DateTimeSegment.tsx +56 -0
  41. package/src/datepicker/RangeCalendar.tsx +35 -0
  42. package/src/datepicker/StyledField.tsx +31 -0
  43. package/src/datepicker/TimeField.tsx +46 -0
  44. package/src/datepicker/TimePicker.test.tsx +74 -0
  45. package/src/datepicker/TimePicker.tsx +196 -0
  46. package/src/datepicker/index.tsx +4 -0
  47. package/src/datepicker/utils.ts +33 -0
  48. package/src/i18n/index.tsx +38 -0
  49. package/src/image/index.tsx +2 -0
  50. package/src/index.tsx +25 -26
  51. package/src/input/CardSelect.tsx +165 -0
  52. package/src/input/Checkbox.tsx +24 -0
  53. package/src/input/CheckboxGroup.tsx +43 -0
  54. package/src/input/ChoiceChip.tsx +102 -0
  55. package/src/input/Dialog.tsx +29 -0
  56. package/src/input/FormControl.tsx +11 -0
  57. package/src/input/FormErrorMessage.tsx +91 -0
  58. package/src/input/FormLabel.tsx +11 -0
  59. package/src/input/InfoSelect.tsx +209 -0
  60. package/src/input/Input.tsx +59 -0
  61. package/src/input/InputElement.tsx +45 -0
  62. package/src/input/ListBox.tsx +123 -0
  63. package/src/input/NativeSelect.tsx +38 -0
  64. package/src/input/PasswordInput.tsx +70 -0
  65. package/src/input/Popover.tsx +70 -0
  66. package/src/input/Radio.tsx +34 -0
  67. package/src/input/RadioGroup.tsx +47 -0
  68. package/src/input/SearchInput.tsx +89 -0
  69. package/src/input/Switch.tsx +40 -0
  70. package/src/input/Textarea.tsx +98 -0
  71. package/src/input/index.tsx +20 -0
  72. package/src/layout/Divider.tsx +26 -0
  73. package/src/layout/Stack.tsx +42 -0
  74. package/src/layout/index.tsx +28 -0
  75. package/src/linjetag/InfoTag.tsx +54 -0
  76. package/src/linjetag/LineIcon.tsx +44 -0
  77. package/src/linjetag/TravelTag.tsx +121 -0
  78. package/src/linjetag/icons.tsx +80 -0
  79. package/src/linjetag/index.tsx +3 -0
  80. package/src/linjetag/types.d.ts +24 -0
  81. package/src/link/TextLink.tsx +45 -0
  82. package/src/link/index.tsx +1 -0
  83. package/src/loader/ClientOnly.tsx +29 -0
  84. package/src/loader/ColorInlineLoader.tsx +27 -0
  85. package/src/loader/ColorSpinner.tsx +44 -0
  86. package/src/loader/ContentLoader.tsx +27 -0
  87. package/src/loader/DarkFullScreenLoader.tsx +23 -0
  88. package/src/loader/DarkInlineLoader.tsx +25 -0
  89. package/src/loader/DarkSpinner.tsx +43 -0
  90. package/src/loader/LightFullScreenLoader.tsx +23 -0
  91. package/src/loader/LightInlineLoader.tsx +25 -0
  92. package/src/loader/LightSpinner.tsx +41 -0
  93. package/src/loader/Lottie.tsx +10 -0
  94. package/src/loader/ProgressBar.tsx +128 -0
  95. package/src/loader/ProgressLoader.tsx +140 -0
  96. package/src/loader/Skeleton.tsx +16 -0
  97. package/src/loader/SkeletonCircle.tsx +13 -0
  98. package/src/loader/SkeletonText.tsx +10 -0
  99. package/src/loader/index.tsx +14 -0
  100. package/src/loader/useHydrated.tsx +34 -0
  101. package/src/loader/useRotatingLabel.tsx +22 -0
  102. package/src/logo/VyLogo.tsx +101 -0
  103. package/src/logo/index.tsx +1 -0
  104. package/src/media-controller/JumpButton.tsx +69 -0
  105. package/src/media-controller/PlayPauseButton.tsx +67 -0
  106. package/src/media-controller/SkipButton.tsx +66 -0
  107. package/src/media-controller/icons.tsx +80 -0
  108. package/src/media-controller/index.test.tsx +59 -0
  109. package/src/media-controller/index.tsx +3 -0
  110. package/src/modal/Drawer.tsx +122 -0
  111. package/src/modal/Modal.tsx +15 -0
  112. package/src/modal/ModalHeader.tsx +31 -0
  113. package/src/modal/SimpleDrawer.tsx +44 -0
  114. package/src/modal/index.tsx +4 -0
  115. package/src/popover/PopoverWizardBody.tsx +91 -0
  116. package/src/popover/SimplePopover.tsx +75 -0
  117. package/src/popover/WizardPopover.tsx +61 -0
  118. package/src/popover/index.tsx +23 -0
  119. package/src/provider/SporProvider.tsx +67 -0
  120. package/src/provider/index.tsx +1 -0
  121. package/src/stepper/Stepper.tsx +115 -0
  122. package/src/stepper/StepperContext.tsx +55 -0
  123. package/src/stepper/StepperStep.tsx +48 -0
  124. package/src/stepper/index.tsx +2 -0
  125. package/src/tab/Tabs.tsx +20 -0
  126. package/src/tab/index.tsx +9 -0
  127. package/src/table/Table.tsx +58 -0
  128. package/src/table/index.tsx +19 -0
  129. package/src/theme/components/accordion.ts +143 -0
  130. package/src/theme/components/alert.ts +59 -0
  131. package/src/theme/components/badge.ts +109 -0
  132. package/src/theme/components/button.ts +217 -0
  133. package/src/theme/components/card-select.ts +158 -0
  134. package/src/theme/components/card.ts +174 -0
  135. package/src/theme/components/checkbox.ts +90 -0
  136. package/src/theme/components/choice-chip.ts +79 -0
  137. package/src/theme/components/close-button.ts +56 -0
  138. package/src/theme/components/code.ts +17 -0
  139. package/src/theme/components/datepicker.ts +194 -0
  140. package/src/theme/components/drawer.ts +92 -0
  141. package/src/theme/components/fab.ts +111 -0
  142. package/src/theme/components/form-label.ts +17 -0
  143. package/src/theme/components/form.ts +27 -0
  144. package/src/theme/components/index.ts +34 -0
  145. package/src/theme/components/info-select.ts +91 -0
  146. package/src/theme/components/info-tag.ts +49 -0
  147. package/src/theme/components/input.ts +97 -0
  148. package/src/theme/components/line-icon.ts +121 -0
  149. package/src/theme/components/link.ts +155 -0
  150. package/src/theme/components/listbox.ts +52 -0
  151. package/src/theme/components/media-controller-button.ts +134 -0
  152. package/src/theme/components/modal.ts +93 -0
  153. package/src/theme/components/popover.ts +63 -0
  154. package/src/theme/components/radio.ts +64 -0
  155. package/src/theme/components/select.ts +52 -0
  156. package/src/theme/components/skeleton.ts +40 -0
  157. package/src/theme/components/stepper.ts +230 -0
  158. package/src/theme/components/switch.ts +227 -0
  159. package/src/theme/components/table.ts +163 -0
  160. package/src/theme/components/tabs.ts +282 -0
  161. package/src/theme/components/textarea.ts +14 -0
  162. package/src/theme/components/toast.ts +28 -0
  163. package/src/theme/components/travel-tag.ts +267 -0
  164. package/src/theme/font-faces.ts +66 -0
  165. package/src/theme/foundations/borders.ts +11 -0
  166. package/src/theme/foundations/breakpoints.ts +9 -0
  167. package/src/theme/foundations/colors.ts +10 -0
  168. package/src/theme/foundations/config.ts +5 -0
  169. package/src/theme/foundations/fontSizes.ts +29 -0
  170. package/src/theme/foundations/fontWeights.ts +5 -0
  171. package/src/theme/foundations/fonts.ts +7 -0
  172. package/src/theme/foundations/index.ts +14 -0
  173. package/src/theme/foundations/lineHeights.ts +5 -0
  174. package/src/theme/foundations/radii.ts +12 -0
  175. package/src/theme/foundations/shadows.ts +8 -0
  176. package/src/theme/foundations/sizes.ts +34 -0
  177. package/src/theme/foundations/spacing.ts +30 -0
  178. package/src/theme/foundations/textStyles.ts +60 -0
  179. package/src/theme/foundations/zIndices.ts +17 -0
  180. package/src/theme/index.ts +14 -0
  181. package/src/theme/utils/box-shadow-utils.ts +44 -0
  182. package/src/theme/utils/focus-utils.ts +16 -0
  183. package/src/toast/ActionToast.test.tsx +22 -0
  184. package/src/toast/ActionToast.tsx +28 -0
  185. package/src/toast/BaseToast.test.tsx +27 -0
  186. package/src/toast/BaseToast.tsx +75 -0
  187. package/src/toast/ClosableToast.test.tsx +17 -0
  188. package/src/toast/ClosableToast.tsx +40 -0
  189. package/src/toast/index.tsx +1 -0
  190. package/src/toast/useToast.tsx +99 -0
  191. package/src/typography/Badge.tsx +68 -0
  192. package/src/typography/Code.tsx +32 -0
  193. package/src/typography/Heading.tsx +32 -0
  194. package/src/typography/Text.tsx +26 -0
  195. package/src/typography/index.tsx +4 -0
  196. package/src/util/externals.tsx +23 -0
  197. package/src/util/index.tsx +1 -0
@@ -0,0 +1,64 @@
1
+ import { radioAnatomy as parts } from "@chakra-ui/anatomy";
2
+ import { createMultiStyleConfigHelpers } from "@chakra-ui/react";
3
+
4
+ const helpers = createMultiStyleConfigHelpers(parts.keys);
5
+
6
+ const config = helpers.defineMultiStyleConfig({
7
+ baseStyle: {
8
+ container: {
9
+ _hover: {
10
+ "input:enabled + .chakra-radio__control": {
11
+ backgroundColor: "white",
12
+ borderColor: "primaryGreen",
13
+ },
14
+ "input:enabled:checked + .chakra-radio__control": {
15
+ color: "darkTeal",
16
+ },
17
+ },
18
+ },
19
+ label: {
20
+ userSelect: "none",
21
+ _disabled: { opacity: 0.4 },
22
+ },
23
+ control: {
24
+ width: 4,
25
+ height: 4,
26
+ backgroundColor: "white",
27
+ border: "2px solid",
28
+ borderColor: "primaryGreen",
29
+ borderRadius: "50%",
30
+
31
+ _focus: {
32
+ backgroundColor: "seaMist",
33
+ borderColor: "azure",
34
+ },
35
+ _disabled: {
36
+ backgroundColor: "lightGrey",
37
+ borderColor: "steel",
38
+ },
39
+ _checked: {
40
+ borderColor: "currentColor",
41
+ color: "primaryGreen",
42
+ _before: {
43
+ content: `""`,
44
+ display: "inline-block",
45
+ position: "relative",
46
+ width: "50%",
47
+ height: "50%",
48
+ borderRadius: "50%",
49
+ background: "currentColor",
50
+ },
51
+
52
+ _focus: {
53
+ backgroundColor: "white",
54
+ color: "azure",
55
+ },
56
+ _disabled: {
57
+ backgroundColor: "lightGrey",
58
+ borderColor: "steel",
59
+ },
60
+ },
61
+ },
62
+ },
63
+ });
64
+ export default config;
@@ -0,0 +1,52 @@
1
+ import { selectAnatomy } from "@chakra-ui/anatomy";
2
+ import { createMultiStyleConfigHelpers } from "@chakra-ui/react";
3
+ import { default as Input } from "./input";
4
+
5
+ const parts = selectAnatomy.extend("root");
6
+
7
+ const helpers = createMultiStyleConfigHelpers(parts.keys);
8
+
9
+ const config = helpers.defineMultiStyleConfig({
10
+ baseStyle: (props) => ({
11
+ root: {
12
+ width: "100%",
13
+ height: "fit-content",
14
+ position: "relative",
15
+ "& + label": {
16
+ fontSize: ["mobile.sm", "desktop.sm"],
17
+ top: "2px",
18
+ left: 3,
19
+ zIndex: 2,
20
+ position: "absolute",
21
+ my: 2,
22
+ transformOrigin: "top left",
23
+ transform: [
24
+ "scale(0.825) translateY(-12px)",
25
+ "scale(0.825) translateY(-14px)",
26
+ ],
27
+ },
28
+ },
29
+ field: {
30
+ ...Input.baseStyle!(props).field,
31
+ appearance: "none",
32
+ pt: "16px",
33
+ "option, optgroup": {
34
+ background: "white",
35
+ },
36
+ },
37
+ icon: {
38
+ width: "30px",
39
+ height: "30px",
40
+ insetEnd: "0.5rem",
41
+ position: "relative",
42
+ color: "currentColor",
43
+ strokeLinecap: "round",
44
+ fontSize: "1.125rem",
45
+ _disabled: {
46
+ opacity: 0.5,
47
+ },
48
+ },
49
+ }),
50
+ });
51
+
52
+ export default config;
@@ -0,0 +1,40 @@
1
+ import { defineStyleConfig } from "@chakra-ui/react";
2
+ import { keyframes } from "@chakra-ui/system";
3
+ import { cssVar, getColor, mode } from "@chakra-ui/theme-tools";
4
+
5
+ const fade = (startColor: string, endColor: string) =>
6
+ keyframes({
7
+ from: { borderColor: startColor, background: startColor },
8
+ to: { borderColor: endColor, background: endColor },
9
+ });
10
+
11
+ const $startColor = cssVar("skeleton-start-color");
12
+ const $endColor = cssVar("skeleton-end-color");
13
+
14
+ const config = defineStyleConfig({
15
+ baseStyle: (props) => {
16
+ const defaultStartColor = mode("blackAlpha.300", "whiteAlpha.300")(props);
17
+ const defaultEndColor = mode("blackAlpha.100", "whiteAlpha.100")(props);
18
+
19
+ const {
20
+ startColor = defaultStartColor,
21
+ endColor = defaultEndColor,
22
+ speed,
23
+ theme,
24
+ } = props;
25
+
26
+ const start = getColor(theme, startColor);
27
+ const end = getColor(theme, endColor);
28
+
29
+ return {
30
+ [$startColor.variable]: start,
31
+ [$endColor.variable]: end,
32
+ opacity: 1,
33
+ borderRadius: "xs",
34
+ borderColor: start,
35
+ background: end,
36
+ animation: `${speed}s linear infinite alternate ${fade(start, end)}`,
37
+ };
38
+ },
39
+ });
40
+ export default config;
@@ -0,0 +1,230 @@
1
+ import { createMultiStyleConfigHelpers } from "@chakra-ui/react";
2
+ import { anatomy, mode, StyleFunctionProps } from "@chakra-ui/theme-tools";
3
+
4
+ const parts = anatomy("stepper").parts(
5
+ "root",
6
+ "container",
7
+ "innerContainer",
8
+ "backButton",
9
+ "title",
10
+ "stepCounter",
11
+ "stepContainer",
12
+ "stepButton",
13
+ "stepNumber",
14
+ "stepTitle",
15
+ "closeButton"
16
+ );
17
+
18
+ const helpers = createMultiStyleConfigHelpers(parts.keys);
19
+
20
+ const config = helpers.defineMultiStyleConfig({
21
+ baseStyle: (props) => ({
22
+ root: {
23
+ backgroundColor: getRootBackgroundColor(props),
24
+ display: "flex",
25
+ alignItems: "center",
26
+ justifyContent: ["space-between", "center"],
27
+ minHeight: ["48px", "60px"],
28
+ overflowX: "auto",
29
+ width: "100%",
30
+ },
31
+ container: {
32
+ px: [2, 2, 0],
33
+ maxWidth: "container.lg",
34
+ mx: "auto",
35
+ width: "100%",
36
+ },
37
+ innerContainer: {
38
+ overflow: "hidden",
39
+ display: ["flex", "none"],
40
+ alignItems: "center",
41
+ justifyContent: "space-between",
42
+ color: getColor(props),
43
+ },
44
+ backButton: {
45
+ borderRadius: "xs",
46
+ px: 0,
47
+ width: "auto",
48
+ minWidth: "auto",
49
+ },
50
+ title: {
51
+ overflow: "hidden",
52
+ fontWeight: "bold",
53
+ WebkitLineClamp: 2,
54
+ display: "-webkit-box",
55
+ WebkitBoxOrient: "vertical",
56
+ ml: 2,
57
+ textAlign: "right",
58
+ },
59
+ stepCounter: {
60
+ whiteSpace: "nowrap",
61
+ textDecoration: "underline",
62
+ },
63
+ stepContainer: {
64
+ display: "flex",
65
+ alignItems: "center",
66
+ },
67
+ stepButton: {
68
+ color: "inherit",
69
+ display: "flex",
70
+ alignItems: "center",
71
+ padding: 1,
72
+ borderRadius: "xs",
73
+ },
74
+ stepNumber: {
75
+ borderRadius: "round",
76
+ border: "sm",
77
+ borderColor: "currentColor",
78
+ width: 4,
79
+ height: 4,
80
+ mr: 1,
81
+ display: "flex",
82
+ alignItems: "center",
83
+ justifyContent: "center",
84
+ fontSize: ["mobile.xs", "desktop.xs"],
85
+ },
86
+ stepTitle: {
87
+ textStyle: "sm",
88
+ whiteSpace: "nowrap",
89
+ },
90
+ }),
91
+ variants: {
92
+ completed: (props) => ({
93
+ stepContainer: {
94
+ color: getColor(props),
95
+ },
96
+ stepButton: {
97
+ _hover: getHoverStyles(props),
98
+ _focus: getFocusStyles(props),
99
+ "&:focus:not(:focus-visible)": {
100
+ boxShadow: "none",
101
+ },
102
+ _focusVisible: getFocusStyles(props),
103
+ _active: getActiveStyles(props),
104
+ },
105
+ }),
106
+ active: (props) => ({
107
+ stepContainer: {
108
+ color: getColor(props),
109
+ },
110
+ stepButton: {
111
+ pointerEvents: "none",
112
+ },
113
+ stepNumber: getStepNumberStyles(props),
114
+ stepTitle: {
115
+ fontWeight: "bold",
116
+ },
117
+ }),
118
+ disabled: (props) => ({
119
+ stepContainer: {
120
+ color: getDisabledColor(props),
121
+ },
122
+ stepButton: {
123
+ pointerEvents: "none",
124
+ },
125
+ }),
126
+ },
127
+ defaultProps: {
128
+ colorScheme: "green",
129
+ },
130
+ });
131
+
132
+ export default config;
133
+
134
+ const getRootBackgroundColor = (props: StyleFunctionProps) => {
135
+ switch (props.colorScheme) {
136
+ case "light":
137
+ return "white";
138
+ case "dark":
139
+ return "darkTeal";
140
+ case "green":
141
+ default:
142
+ return "seaMist";
143
+ }
144
+ };
145
+
146
+ const getColor = (props: StyleFunctionProps) => {
147
+ switch (props.colorScheme) {
148
+ case "light":
149
+ return mode("darkGrey", "white")(props);
150
+ case "dark":
151
+ return "white";
152
+ case "green":
153
+ default:
154
+ return mode("darkTeal", "white")(props);
155
+ }
156
+ };
157
+
158
+ const getStepNumberStyles = (props: StyleFunctionProps) => {
159
+ switch (props.colorScheme) {
160
+ case "dark":
161
+ return {
162
+ backgroundColor: "white",
163
+ color: "darkTeal",
164
+ };
165
+ case "light":
166
+ case "green":
167
+ default:
168
+ return {
169
+ backgroundColor: mode("darkTeal", "white")(props),
170
+ color: mode("white", "darkTeal")(props),
171
+ };
172
+ }
173
+ };
174
+
175
+ const getDisabledColor = (props: StyleFunctionProps) => {
176
+ switch (props.colorScheme) {
177
+ case "dark":
178
+ return "whiteAlpha.400";
179
+ case "green":
180
+ return "dimGrey";
181
+ case "light":
182
+ default:
183
+ return "osloGrey";
184
+ }
185
+ };
186
+
187
+ const getHoverStyles = (props: StyleFunctionProps) => {
188
+ switch (props.colorScheme) {
189
+ case "dark":
190
+ return { backgroundColor: "pine" };
191
+ case "green":
192
+ return {
193
+ backgroundColor: mode("coralGreen", "primaryGreen")(props),
194
+ };
195
+ case "light":
196
+ default:
197
+ return {
198
+ backgroundColor: mode("seaMist", "primaryGreen")(props),
199
+ };
200
+ }
201
+ };
202
+
203
+ const getFocusStyles = (props: StyleFunctionProps) => {
204
+ switch (props.colorScheme) {
205
+ case "dark":
206
+ return {
207
+ outline: "none",
208
+ boxShadow: `inset 0 0 0 2px ${props.theme.colors.white}`,
209
+ };
210
+ case "light":
211
+ case "green":
212
+ default:
213
+ return {
214
+ outline: "none",
215
+ boxShadow: `inset 0 0 0 2px ${props.theme.colors.greenHaze}`,
216
+ };
217
+ }
218
+ };
219
+
220
+ const getActiveStyles = (props: StyleFunctionProps) => {
221
+ switch (props.colorScheme) {
222
+ case "light":
223
+ return { backgroundColor: "mint" };
224
+ case "dark":
225
+ return { backgroundColor: "celadon" };
226
+ case "green":
227
+ default:
228
+ return { color: "azure", backgroundColor: "transparent" };
229
+ }
230
+ };
@@ -0,0 +1,227 @@
1
+ import { switchAnatomy as parts } from "@chakra-ui/anatomy";
2
+ import { createMultiStyleConfigHelpers } from "@chakra-ui/react";
3
+ import { calc, cssVar, mode } from "@chakra-ui/theme-tools";
4
+ import { colors } from "../foundations";
5
+ import { getBoxShadowString } from "../utils/box-shadow-utils";
6
+ import { focusVisible } from "../utils/focus-utils";
7
+
8
+ const $width = cssVar("switch-track-width");
9
+ const $height = cssVar("switch-track-height");
10
+ const $diff = cssVar("switch-track-diff");
11
+ const diffValue = calc.subtract($width, $height);
12
+ const $translateX = cssVar("switch-thumb-x");
13
+
14
+ const helpers = createMultiStyleConfigHelpers(parts.keys);
15
+
16
+ const config = helpers.defineMultiStyleConfig({
17
+ baseStyle: {
18
+ container: {
19
+ [$diff.variable]: diffValue,
20
+ [$translateX.variable]: $diff.reference,
21
+ _rtl: {
22
+ [$translateX.variable]: calc($diff).negate().toString(),
23
+ },
24
+ },
25
+ track: {
26
+ width: [$width.reference],
27
+ height: [$height.reference],
28
+ transitionProperty: "common",
29
+ transitionDuration: "fast",
30
+
31
+ _disabled: {
32
+ pointerEvents: "none",
33
+ },
34
+ },
35
+ thumb: {
36
+ transitionProperty: "transform",
37
+ transitionDuration: "normal",
38
+ borderRadius: "50%",
39
+ width: [$height.reference],
40
+ height: [$height.reference],
41
+ _checked: {
42
+ transform: `translateX(${$translateX.reference})`,
43
+ },
44
+ },
45
+ },
46
+ variants: {
47
+ solid: ({ colorMode }) => ({
48
+ track: {
49
+ backgroundColor: "osloGrey",
50
+ boxShadow: mode(
51
+ "none",
52
+ getBoxShadowString({
53
+ borderColor: colors.whiteAlpha[400],
54
+ })
55
+ )({ colorMode }),
56
+
57
+ ...focusVisible({
58
+ focus: {
59
+ boxShadow: mode(
60
+ getBoxShadowString([
61
+ {
62
+ borderColor: "white",
63
+ borderWidth: 2,
64
+ isInset: false,
65
+ },
66
+ {
67
+ borderColor: "primaryGreen",
68
+ borderWidth: 4,
69
+ isInset: false,
70
+ },
71
+ ]),
72
+ getBoxShadowString({
73
+ borderColor: "coralGreen",
74
+ borderWidth: 2,
75
+ isInset: false,
76
+ })
77
+ )({ colorMode }),
78
+ },
79
+ notFocus: {
80
+ boxShadow: mode(
81
+ "none",
82
+ getBoxShadowString({
83
+ borderColor: colors.whiteAlpha[400],
84
+ })
85
+ )({ colorMode }),
86
+ },
87
+ }),
88
+ _hover: {
89
+ backgroundColor: "steel",
90
+ boxShadow: mode(
91
+ "none",
92
+ getBoxShadowString({ borderColor: colors.white })
93
+ )({ colorMode }),
94
+ },
95
+ _checked: {
96
+ backgroundColor: mode("darkTeal", "celadon")({ colorMode }),
97
+ ...focusVisible({
98
+ focus: {
99
+ boxShadow: mode(
100
+ getBoxShadowString([
101
+ {
102
+ borderColor: "white",
103
+ borderWidth: 2,
104
+ isInset: false,
105
+ },
106
+ {
107
+ borderColor: "primaryGreen",
108
+ borderWidth: 4,
109
+ isInset: false,
110
+ },
111
+ ]),
112
+ getBoxShadowString({
113
+ borderWidth: 2,
114
+ borderColor: "coralGreen",
115
+ isInset: false,
116
+ })
117
+ )({ colorMode }),
118
+ },
119
+ notFocus: {
120
+ boxShadow: mode(
121
+ "none",
122
+ getBoxShadowString({ borderColor: colors.white })
123
+ )({ colorMode }),
124
+ },
125
+ }),
126
+
127
+ _hover: {
128
+ backgroundColor: mode("pine", "river")({ colorMode }),
129
+ boxShadow: mode(
130
+ "none",
131
+ getBoxShadowString({ borderColor: colors.white })
132
+ )({ colorMode }),
133
+ },
134
+ },
135
+ _disabled: {
136
+ backgroundColor: mode("platinum", "dimGrey")({ colorMode }),
137
+ boxShadow: mode(
138
+ "none",
139
+ getBoxShadowString({ borderColor: colors.whiteAlpha[400] })
140
+ )({ colorMode }),
141
+ _checked: {
142
+ backgroundColor: mode("platinum", "dimGrey")({ colorMode }),
143
+ boxShadow: mode(
144
+ "none",
145
+ getBoxShadowString({ borderColor: colors.whiteAlpha[400] })
146
+ )({ colorMode }),
147
+ },
148
+ },
149
+ },
150
+
151
+ thumb: {
152
+ backgroundColor: "white",
153
+ "[data-disabled] &": {
154
+ backgroundColor: "steel",
155
+ },
156
+ },
157
+ }),
158
+ outline: {
159
+ track: {
160
+ backgroundColor: "platinum",
161
+ boxShadow: getBoxShadowString({
162
+ borderColor: colors.blackAlpha["400"],
163
+ }),
164
+ _focus: {
165
+ backgroundColor: "platinum",
166
+ boxShadow: `0 0 0 2px ${colors.greenHaze}`,
167
+ },
168
+ _hover: {
169
+ backgroundColor: "white",
170
+ },
171
+ _checked: {
172
+ backgroundColor: "white",
173
+ _hover: {
174
+ backgroundColor: "mint",
175
+ },
176
+ _focus: {
177
+ backgroundColor: "white",
178
+ boxShadow: `0 0 0 4px ${colors.greenHaze}, 0 0 0 2px ${colors.white}`,
179
+ },
180
+ },
181
+ },
182
+ thumb: {
183
+ backgroundColor: "osloGrey",
184
+
185
+ _checked: {
186
+ backgroundColor: "darkTeal",
187
+ },
188
+ },
189
+ },
190
+ },
191
+ sizes: {
192
+ sm: {
193
+ container: {
194
+ [$width.variable]: "54px",
195
+ [$height.variable]: "24px",
196
+ },
197
+ track: {
198
+ borderRadius: "24px",
199
+ p: "2px",
200
+ },
201
+ },
202
+ md: {
203
+ container: {
204
+ [$width.variable]: "66px",
205
+ [$height.variable]: "30px",
206
+ },
207
+ track: {
208
+ borderRadius: "30px",
209
+ p: "3px",
210
+ },
211
+ },
212
+ lg: {
213
+ container: {
214
+ [$width.variable]: "78px",
215
+ [$height.variable]: "36px",
216
+ },
217
+ track: {
218
+ borderRadius: "36px",
219
+ p: "3px",
220
+ },
221
+ },
222
+ },
223
+ defaultProps: {
224
+ size: "md",
225
+ },
226
+ });
227
+ export default config;