@vygruppen/spor-react 1.3.4 → 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 (196) hide show
  1. package/.turbo/turbo-build.log +12 -10
  2. package/CHANGELOG.md +25 -0
  3. package/dist/index.d.ts +6718 -27
  4. package/dist/index.js +14139 -140
  5. package/dist/index.mjs +13818 -27
  6. package/package.json +19 -31
  7. package/src/accordion/Accordion.test.tsx +20 -0
  8. package/src/accordion/Accordion.tsx +62 -0
  9. package/src/accordion/AccordionContext.tsx +27 -0
  10. package/src/accordion/Expandable.tsx +157 -0
  11. package/src/accordion/index.tsx +2 -0
  12. package/src/alert/AlertIcon.tsx +75 -0
  13. package/src/alert/BaseAlert.test.tsx +37 -0
  14. package/src/alert/BaseAlert.tsx +21 -0
  15. package/src/alert/ClosableAlert.test.tsx +37 -0
  16. package/src/alert/ClosableAlert.tsx +75 -0
  17. package/src/alert/ExpandableAlert.test.tsx +84 -0
  18. package/src/alert/ExpandableAlert.tsx +84 -0
  19. package/src/alert/StaticAlert.tsx +25 -0
  20. package/src/alert/index.tsx +3 -0
  21. package/src/button/Button.test.tsx +23 -0
  22. package/src/button/Button.tsx +162 -0
  23. package/src/button/ButtonGroup.tsx +43 -0
  24. package/src/button/CloseButton.tsx +63 -0
  25. package/src/button/FloatingActionButton.tsx +113 -0
  26. package/src/button/IconButton.tsx +63 -0
  27. package/src/button/index.tsx +5 -0
  28. package/src/card/Card.tsx +59 -0
  29. package/src/card/index.tsx +1 -0
  30. package/src/datepicker/Calendar.tsx +32 -0
  31. package/src/datepicker/CalendarCell.tsx +74 -0
  32. package/src/datepicker/CalendarGrid.tsx +76 -0
  33. package/src/datepicker/CalendarHeader.tsx +153 -0
  34. package/src/datepicker/CalendarNavigationButton.tsx +26 -0
  35. package/src/datepicker/CalendarTriggerButton.tsx +36 -0
  36. package/src/datepicker/DateField.tsx +51 -0
  37. package/src/datepicker/DatePicker.tsx +153 -0
  38. package/src/datepicker/DateRangePicker.tsx +165 -0
  39. package/src/datepicker/DateTimeSegment.tsx +56 -0
  40. package/src/datepicker/RangeCalendar.tsx +35 -0
  41. package/src/datepicker/StyledField.tsx +31 -0
  42. package/src/datepicker/TimeField.tsx +46 -0
  43. package/src/datepicker/TimePicker.test.tsx +74 -0
  44. package/src/datepicker/TimePicker.tsx +196 -0
  45. package/src/datepicker/index.tsx +4 -0
  46. package/src/datepicker/utils.ts +33 -0
  47. package/src/i18n/index.tsx +38 -0
  48. package/src/image/index.tsx +2 -0
  49. package/src/index.tsx +25 -26
  50. package/src/input/CardSelect.tsx +165 -0
  51. package/src/input/Checkbox.tsx +24 -0
  52. package/src/input/CheckboxGroup.tsx +43 -0
  53. package/src/input/ChoiceChip.tsx +102 -0
  54. package/src/input/Dialog.tsx +29 -0
  55. package/src/input/FormControl.tsx +11 -0
  56. package/src/input/FormErrorMessage.tsx +91 -0
  57. package/src/input/FormLabel.tsx +11 -0
  58. package/src/input/InfoSelect.tsx +209 -0
  59. package/src/input/Input.tsx +59 -0
  60. package/src/input/InputElement.tsx +45 -0
  61. package/src/input/ListBox.tsx +123 -0
  62. package/src/input/NativeSelect.tsx +38 -0
  63. package/src/input/PasswordInput.tsx +70 -0
  64. package/src/input/Popover.tsx +70 -0
  65. package/src/input/Radio.tsx +34 -0
  66. package/src/input/RadioGroup.tsx +47 -0
  67. package/src/input/SearchInput.tsx +89 -0
  68. package/src/input/Switch.tsx +40 -0
  69. package/src/input/Textarea.tsx +98 -0
  70. package/src/input/index.tsx +20 -0
  71. package/src/layout/Divider.tsx +26 -0
  72. package/src/layout/Stack.tsx +42 -0
  73. package/src/layout/index.tsx +28 -0
  74. package/src/linjetag/InfoTag.tsx +54 -0
  75. package/src/linjetag/LineIcon.tsx +44 -0
  76. package/src/linjetag/TravelTag.tsx +121 -0
  77. package/src/linjetag/icons.tsx +80 -0
  78. package/src/linjetag/index.tsx +3 -0
  79. package/src/linjetag/types.d.ts +24 -0
  80. package/src/link/TextLink.tsx +45 -0
  81. package/src/link/index.tsx +1 -0
  82. package/src/loader/ClientOnly.tsx +29 -0
  83. package/src/loader/ColorInlineLoader.tsx +27 -0
  84. package/src/loader/ColorSpinner.tsx +44 -0
  85. package/src/loader/ContentLoader.tsx +27 -0
  86. package/src/loader/DarkFullScreenLoader.tsx +23 -0
  87. package/src/loader/DarkInlineLoader.tsx +25 -0
  88. package/src/loader/DarkSpinner.tsx +43 -0
  89. package/src/loader/LightFullScreenLoader.tsx +23 -0
  90. package/src/loader/LightInlineLoader.tsx +25 -0
  91. package/src/loader/LightSpinner.tsx +41 -0
  92. package/src/loader/Lottie.tsx +10 -0
  93. package/src/loader/ProgressBar.tsx +128 -0
  94. package/src/loader/ProgressLoader.tsx +140 -0
  95. package/src/loader/Skeleton.tsx +16 -0
  96. package/src/loader/SkeletonCircle.tsx +13 -0
  97. package/src/loader/SkeletonText.tsx +10 -0
  98. package/src/loader/index.tsx +14 -0
  99. package/src/loader/useHydrated.tsx +34 -0
  100. package/src/loader/useRotatingLabel.tsx +22 -0
  101. package/src/logo/VyLogo.tsx +101 -0
  102. package/src/logo/index.tsx +1 -0
  103. package/src/media-controller/JumpButton.tsx +69 -0
  104. package/src/media-controller/PlayPauseButton.tsx +67 -0
  105. package/src/media-controller/SkipButton.tsx +66 -0
  106. package/src/media-controller/icons.tsx +80 -0
  107. package/src/media-controller/index.test.tsx +59 -0
  108. package/src/media-controller/index.tsx +3 -0
  109. package/src/modal/Drawer.tsx +122 -0
  110. package/src/modal/Modal.tsx +15 -0
  111. package/src/modal/ModalHeader.tsx +31 -0
  112. package/src/modal/SimpleDrawer.tsx +44 -0
  113. package/src/modal/index.tsx +4 -0
  114. package/src/popover/PopoverWizardBody.tsx +91 -0
  115. package/src/popover/SimplePopover.tsx +75 -0
  116. package/src/popover/WizardPopover.tsx +61 -0
  117. package/src/popover/index.tsx +23 -0
  118. package/src/provider/SporProvider.tsx +67 -0
  119. package/src/provider/index.tsx +1 -0
  120. package/src/stepper/Stepper.tsx +115 -0
  121. package/src/stepper/StepperContext.tsx +55 -0
  122. package/src/stepper/StepperStep.tsx +48 -0
  123. package/src/stepper/index.tsx +2 -0
  124. package/src/tab/Tabs.tsx +20 -0
  125. package/src/tab/index.tsx +9 -0
  126. package/src/table/Table.tsx +58 -0
  127. package/src/table/index.tsx +19 -0
  128. package/src/theme/components/accordion.ts +143 -0
  129. package/src/theme/components/alert.ts +59 -0
  130. package/src/theme/components/badge.ts +109 -0
  131. package/src/theme/components/button.ts +217 -0
  132. package/src/theme/components/card-select.ts +158 -0
  133. package/src/theme/components/card.ts +174 -0
  134. package/src/theme/components/checkbox.ts +90 -0
  135. package/src/theme/components/choice-chip.ts +79 -0
  136. package/src/theme/components/close-button.ts +56 -0
  137. package/src/theme/components/code.ts +17 -0
  138. package/src/theme/components/datepicker.ts +194 -0
  139. package/src/theme/components/drawer.ts +92 -0
  140. package/src/theme/components/fab.ts +111 -0
  141. package/src/theme/components/form-label.ts +17 -0
  142. package/src/theme/components/form.ts +27 -0
  143. package/src/theme/components/index.ts +34 -0
  144. package/src/theme/components/info-select.ts +91 -0
  145. package/src/theme/components/info-tag.ts +49 -0
  146. package/src/theme/components/input.ts +97 -0
  147. package/src/theme/components/line-icon.ts +121 -0
  148. package/src/theme/components/link.ts +155 -0
  149. package/src/theme/components/listbox.ts +52 -0
  150. package/src/theme/components/media-controller-button.ts +134 -0
  151. package/src/theme/components/modal.ts +93 -0
  152. package/src/theme/components/popover.ts +63 -0
  153. package/src/theme/components/radio.ts +64 -0
  154. package/src/theme/components/select.ts +52 -0
  155. package/src/theme/components/skeleton.ts +40 -0
  156. package/src/theme/components/stepper.ts +230 -0
  157. package/src/theme/components/switch.ts +227 -0
  158. package/src/theme/components/table.ts +163 -0
  159. package/src/theme/components/tabs.ts +282 -0
  160. package/src/theme/components/textarea.ts +14 -0
  161. package/src/theme/components/toast.ts +28 -0
  162. package/src/theme/components/travel-tag.ts +267 -0
  163. package/src/theme/font-faces.ts +66 -0
  164. package/src/theme/foundations/borders.ts +11 -0
  165. package/src/theme/foundations/breakpoints.ts +9 -0
  166. package/src/theme/foundations/colors.ts +10 -0
  167. package/src/theme/foundations/config.ts +5 -0
  168. package/src/theme/foundations/fontSizes.ts +29 -0
  169. package/src/theme/foundations/fontWeights.ts +5 -0
  170. package/src/theme/foundations/fonts.ts +7 -0
  171. package/src/theme/foundations/index.ts +14 -0
  172. package/src/theme/foundations/lineHeights.ts +5 -0
  173. package/src/theme/foundations/radii.ts +12 -0
  174. package/src/theme/foundations/shadows.ts +8 -0
  175. package/src/theme/foundations/sizes.ts +34 -0
  176. package/src/theme/foundations/spacing.ts +30 -0
  177. package/src/theme/foundations/textStyles.ts +60 -0
  178. package/src/theme/foundations/zIndices.ts +17 -0
  179. package/src/theme/index.ts +14 -0
  180. package/src/theme/utils/box-shadow-utils.ts +44 -0
  181. package/src/theme/utils/focus-utils.ts +16 -0
  182. package/src/toast/ActionToast.test.tsx +22 -0
  183. package/src/toast/ActionToast.tsx +28 -0
  184. package/src/toast/BaseToast.test.tsx +27 -0
  185. package/src/toast/BaseToast.tsx +75 -0
  186. package/src/toast/ClosableToast.test.tsx +17 -0
  187. package/src/toast/ClosableToast.tsx +40 -0
  188. package/src/toast/index.tsx +1 -0
  189. package/src/toast/useToast.tsx +99 -0
  190. package/src/typography/Badge.tsx +68 -0
  191. package/src/typography/Code.tsx +32 -0
  192. package/src/typography/Heading.tsx +32 -0
  193. package/src/typography/Text.tsx +26 -0
  194. package/src/typography/index.tsx +4 -0
  195. package/src/util/externals.tsx +23 -0
  196. package/src/util/index.tsx +1 -0
@@ -0,0 +1,163 @@
1
+ import { tableAnatomy as parts } from "@chakra-ui/anatomy";
2
+ import { createMultiStyleConfigHelpers } from "@chakra-ui/react";
3
+ import { mode } from "@chakra-ui/theme-tools";
4
+ import { getBoxShadowString } from "../utils/box-shadow-utils";
5
+
6
+ const helpers = createMultiStyleConfigHelpers(parts.keys);
7
+
8
+ const numericStyles = {
9
+ "&[data-is-numeric=true]": {
10
+ textAlign: "end",
11
+ },
12
+ };
13
+
14
+ const config = helpers.defineMultiStyleConfig({
15
+ baseStyle: {
16
+ table: {
17
+ borderCollapse: "collapse",
18
+ width: "100%",
19
+ },
20
+ th: {
21
+ fontWeight: "bold",
22
+ textAlign: "start",
23
+ },
24
+ td: {
25
+ textAlign: "start",
26
+ },
27
+ tfoot: {
28
+ tr: {
29
+ "&:last-of-type": {
30
+ th: { borderBottomWidth: 0 },
31
+ },
32
+ },
33
+ },
34
+ caption: {
35
+ mt: 4,
36
+ fontFamily: "heading",
37
+ textAlign: "center",
38
+ fontWeight: "bold",
39
+ color: "currentColor",
40
+ },
41
+ },
42
+ variants: {
43
+ simple: (props) => ({
44
+ table: {
45
+ color: mode("darkGrey", "white")(props),
46
+ },
47
+ th: {
48
+ borderBottom: "sm",
49
+ borderColor: mode(`blackAlpha.200`, `whiteAlpha.300`)(props),
50
+ ...numericStyles,
51
+ },
52
+ td: {
53
+ borderBottom: "sm",
54
+ borderColor: mode(`blackAlpha.200`, `whiteAlpha.300`)(props),
55
+ ...numericStyles,
56
+ },
57
+ }),
58
+ outline: (props) => ({
59
+ tbody: {
60
+ tr: {
61
+ transitionDuration: "fast",
62
+ transitionProperty: "background-color, box-shadow",
63
+ _hover: {
64
+ boxShadow: mode(
65
+ getBoxShadowString({ borderColor: "darkTeal", borderWidth: 3 }),
66
+ getBoxShadowString({ borderColor: "blueGreen", borderWidth: 3 })
67
+ )(props),
68
+ backgroundColor: mode(
69
+ props.colorScheme === "grey" ? "mint" : "coralGreen",
70
+ "whiteAlpha.200"
71
+ )(props),
72
+ },
73
+ },
74
+ },
75
+ th: {
76
+ color: mode("darkGrey", "white")(props),
77
+ border: mode("none", "md"),
78
+ borderColor: mode("transparent", `whiteAlpha.200`)(props),
79
+ backgroundColor: mode(`${props.colorScheme}.100`, "darkTeal")(props),
80
+ ...numericStyles,
81
+ },
82
+ td: {
83
+ border: mode("sm", "md"),
84
+ borderColor: mode(
85
+ props.colorScheme === "grey" ? "silver" : "blackAlpha.200",
86
+ "whiteAlpha.200"
87
+ )(props),
88
+ ...numericStyles,
89
+ _first: {
90
+ borderLeft: "none",
91
+ },
92
+ },
93
+ tr: {
94
+ _last: {
95
+ td: {
96
+ borderBottom: "none",
97
+ },
98
+ },
99
+ },
100
+ }),
101
+ unstyled: {},
102
+ },
103
+ sizes: {
104
+ sm: {
105
+ table: {
106
+ fontSize: ["mobile.xs", "desktop.xs"],
107
+ },
108
+ th: {
109
+ px: 3,
110
+ py: 1.5,
111
+ },
112
+ td: {
113
+ px: 3,
114
+ py: 1.5,
115
+ },
116
+ caption: {
117
+ px: 3,
118
+ py: 1.5,
119
+ },
120
+ },
121
+ md: {
122
+ table: {
123
+ fontSize: ["mobile.sm", "desktop.sm"],
124
+ },
125
+ th: {
126
+ px: 3,
127
+ py: 1.5,
128
+ },
129
+ td: {
130
+ px: 3,
131
+ py: 1.5,
132
+ },
133
+ caption: {
134
+ px: 3,
135
+ py: 1.5,
136
+ },
137
+ },
138
+ lg: {
139
+ table: {
140
+ fontSize: ["mobile.sm", "desktop.sm"],
141
+ },
142
+ th: {
143
+ px: 3,
144
+ py: "15px",
145
+ },
146
+ td: {
147
+ px: 3,
148
+ py: "15px",
149
+ },
150
+ caption: {
151
+ px: 3,
152
+ py: "15px",
153
+ },
154
+ },
155
+ },
156
+ defaultProps: {
157
+ variant: "simple",
158
+ size: "md",
159
+ colorScheme: "grey",
160
+ },
161
+ });
162
+
163
+ export default config;
@@ -0,0 +1,282 @@
1
+ import { tabsAnatomy as parts } from "@chakra-ui/anatomy";
2
+ import { createMultiStyleConfigHelpers } from "@chakra-ui/react";
3
+ import type { StyleFunctionProps } from "@chakra-ui/theme-tools";
4
+
5
+ const helpers = createMultiStyleConfigHelpers(parts.keys);
6
+
7
+ const config = helpers.defineMultiStyleConfig({
8
+ baseStyle: (props) => ({
9
+ root: {
10
+ display: "flex",
11
+ flexDirection: "column",
12
+ },
13
+ tablist: {
14
+ display: "flex",
15
+ alignItems: "center",
16
+ gap: 0.5,
17
+ width: props.isFitted ? "fit-content" : "100%",
18
+ ...getTablistColorSchemeProps(props),
19
+ },
20
+ tab: {
21
+ display: "flex",
22
+ justifyContent: "center",
23
+ alignItems: "center",
24
+ transitionProperty: "common",
25
+ transitionDuration: "normal",
26
+ width: props.isFitted ? "fit-content" : "100%",
27
+ height: "100%",
28
+ ...getTabColorSchemeProps(props),
29
+
30
+ _selected: {
31
+ boxShadow: "md",
32
+ pointerEvents: "none",
33
+ ...getTabColorSchemeSelectedProps(props),
34
+ },
35
+ _focus: getTabColorSchemeFocusProps(props),
36
+ ":focus:not(:focus-visible)": {
37
+ boxShadow: "none",
38
+ },
39
+ _focusVisible: getTabColorSchemeFocusProps(props),
40
+ _hover: getTabColorSchemeHoverProps(props),
41
+ _active: getTabColorSchemeActiveProps(props),
42
+ _disabled: getTabColorSchemeDisabledProps(props),
43
+ },
44
+ tabpanel: {},
45
+ }),
46
+ variants: {
47
+ round: {
48
+ tablist: {
49
+ borderRadius: "42px",
50
+ },
51
+ tab: {
52
+ borderRadius: "xl",
53
+ },
54
+ },
55
+ square: {
56
+ tablist: {
57
+ borderRadius: "sm",
58
+ },
59
+ tab: {
60
+ borderRadius: "9px",
61
+ },
62
+ },
63
+ },
64
+ sizes: {
65
+ sm: {
66
+ tablist: {
67
+ height: "30px",
68
+ p: "2px",
69
+ },
70
+ tab: {
71
+ px: 2,
72
+ py: 0,
73
+ },
74
+ },
75
+ md: {
76
+ tablist: {
77
+ height: "36px",
78
+ p: 0.5,
79
+ },
80
+ tab: {
81
+ px: 2,
82
+ },
83
+ },
84
+ lg: {
85
+ tablist: {
86
+ height: "42px",
87
+ p: 0.5,
88
+ },
89
+ tab: {
90
+ fontWeight: "bold",
91
+ px: 2,
92
+ },
93
+ },
94
+ xl: {
95
+ tablist: {
96
+ height: "54px",
97
+ p: "4px",
98
+ },
99
+ tab: {
100
+ fontWeight: "bold",
101
+ px: 3,
102
+ },
103
+ },
104
+ },
105
+ defaultProps: {
106
+ size: "md",
107
+ variant: "round",
108
+ },
109
+ });
110
+
111
+ export default config;
112
+
113
+ const getTabColorSchemeProps = (props: StyleFunctionProps) => {
114
+ switch (props.colorScheme) {
115
+ case "dark":
116
+ return {
117
+ color: "white",
118
+ };
119
+ case "light":
120
+ return {
121
+ color: "darkGrey",
122
+ };
123
+ case "green":
124
+ return {
125
+ color: "darkTeal",
126
+ };
127
+ case "grey":
128
+ return {
129
+ color: "darkGrey",
130
+ };
131
+ default:
132
+ return {};
133
+ }
134
+ };
135
+
136
+ const getTabColorSchemeSelectedProps = (props: StyleFunctionProps) => {
137
+ switch (props.colorScheme) {
138
+ case "dark":
139
+ return {
140
+ backgroundColor: "white",
141
+ color: "darkTeal",
142
+ _focus: {
143
+ boxShadow: `inset 0 0 0 2px ${props.theme.colors.greenHaze}`,
144
+ },
145
+ "&:focus:not(:focus-visible)": {
146
+ boxShadow: "none",
147
+ },
148
+ _focusVisible: {
149
+ boxShadow: `inset 0 0 0 2px ${props.theme.colors.greenHaze}`,
150
+ },
151
+ _hover: {
152
+ backgroundColor: "white",
153
+ color: "darkTeal",
154
+ },
155
+ _active: {
156
+ backgroundColor: "white",
157
+ color: "darkTeal",
158
+ },
159
+ };
160
+ default:
161
+ return {
162
+ backgroundColor: "darkTeal",
163
+ color: "white",
164
+ _hover: {
165
+ backgroundColor: "darkTeal",
166
+ color: "white",
167
+ },
168
+ _active: {
169
+ backgroundColor: "darkTeal",
170
+ color: "white",
171
+ },
172
+ };
173
+ }
174
+ };
175
+
176
+ const getTabColorSchemeFocusProps = (props: StyleFunctionProps) => {
177
+ switch (props.colorScheme) {
178
+ case "dark":
179
+ return {
180
+ boxShadow: `inset 0 0 0 2px ${props.theme.colors.white}`,
181
+ };
182
+ default:
183
+ return {
184
+ boxShadow: `inset 0 0 0 2px ${props.theme.colors.greenHaze}`,
185
+ };
186
+ }
187
+ };
188
+
189
+ const getTabColorSchemeHoverProps = (props: StyleFunctionProps) => {
190
+ switch (props.colorScheme) {
191
+ case "dark":
192
+ return {
193
+ backgroundColor: "pine",
194
+ };
195
+ case "light":
196
+ return {
197
+ backgroundColor: "silver",
198
+ };
199
+ case "green":
200
+ return {
201
+ backgroundColor: "coralGreen",
202
+ };
203
+ case "grey":
204
+ return {
205
+ backgroundColor: "silver",
206
+ };
207
+ default:
208
+ return {};
209
+ }
210
+ };
211
+
212
+ const getTabColorSchemeActiveProps = (props: StyleFunctionProps) => {
213
+ switch (props.colorScheme) {
214
+ case "dark":
215
+ return {
216
+ backgroundColor: "celadon",
217
+ color: "white",
218
+ };
219
+ case "light":
220
+ return {
221
+ backgroundColor: "mint",
222
+ color: "darkGrey",
223
+ };
224
+ case "green":
225
+ return {
226
+ backgroundColor: "seaMist",
227
+ color: "darkTeal",
228
+ };
229
+ case "grey":
230
+ return {
231
+ backgroundColor: "lightGrey",
232
+ color: "darkGrey",
233
+ };
234
+ default:
235
+ return {};
236
+ }
237
+ };
238
+
239
+ const getTabColorSchemeDisabledProps = (props: StyleFunctionProps) => {
240
+ switch (props.colorScheme) {
241
+ case "dark":
242
+ return {
243
+ color: "lightAlpha.200",
244
+ };
245
+ case "light":
246
+ return {
247
+ color: "silver",
248
+ };
249
+ case "green":
250
+ return {
251
+ color: "coralGreen",
252
+ };
253
+ case "grey":
254
+ return {
255
+ color: "steel",
256
+ };
257
+ default:
258
+ return {};
259
+ }
260
+ };
261
+
262
+ const getTablistColorSchemeProps = (props: StyleFunctionProps) => {
263
+ switch (props.colorScheme) {
264
+ case "dark":
265
+ return { backgroundColor: "darkTeal", color: "white" };
266
+ case "light":
267
+ return {
268
+ backgroundColor: "white",
269
+ color: "darkGrey",
270
+ boxShadow: `inset 0 0 0 1px ${props.theme.colors.blackAlpha["400"]}`,
271
+ };
272
+ case "green":
273
+ return { backgroundColor: "mint", color: "darkTeal" };
274
+ case "grey":
275
+ return {
276
+ backgroundColor: "platinum",
277
+ color: "darkGrey",
278
+ };
279
+ default:
280
+ return {};
281
+ }
282
+ };
@@ -0,0 +1,14 @@
1
+ import { defineStyleConfig } from "@chakra-ui/react";
2
+ import Input from "./input";
3
+
4
+ const config = defineStyleConfig({
5
+ baseStyle: (props) => ({
6
+ ...Input.baseStyle!(props).field,
7
+ minHeight: "5rem",
8
+ py: 3,
9
+ verticalAlign: "top",
10
+ appearance: "none",
11
+ }),
12
+ });
13
+
14
+ export default config;
@@ -0,0 +1,28 @@
1
+ import { defineStyleConfig } from "@chakra-ui/react";
2
+
3
+ const config = defineStyleConfig({
4
+ baseStyle: {
5
+ display: "flex",
6
+ alignItems: "center",
7
+ width: "fit-content",
8
+ maxWidth: "60ch",
9
+ minWidth: "40ch",
10
+ paddingX: 2,
11
+ paddingY: 1.5,
12
+ boxShadow: "sm",
13
+ borderRadius: "sm",
14
+ },
15
+ variants: {
16
+ success: {
17
+ backgroundColor: "seaMist",
18
+ },
19
+ info: {
20
+ backgroundColor: "lightBlue",
21
+ },
22
+ error: {
23
+ backgroundColor: "lightRed",
24
+ },
25
+ },
26
+ });
27
+
28
+ export default config;