@vygruppen/spor-react 1.3.4 → 2.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 (196) hide show
  1. package/.turbo/turbo-build.log +12 -10
  2. package/CHANGELOG.md +31 -0
  3. package/dist/index.d.ts +6720 -27
  4. package/dist/index.js +14143 -140
  5. package/dist/index.mjs +13822 -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 +171 -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,194 @@
1
+ import { createMultiStyleConfigHelpers } from "@chakra-ui/react";
2
+ import { anatomy } from "@chakra-ui/theme-tools";
3
+ import { colors, zIndices } from "../foundations";
4
+ import { getBoxShadowString } from "../utils/box-shadow-utils";
5
+ import { focusVisible } from "../utils/focus-utils";
6
+
7
+ const parts = anatomy("datepicker").parts(
8
+ "wrapper",
9
+ "calendarTriggerButton",
10
+ "dateCell",
11
+ "inputLabel"
12
+ );
13
+
14
+ const helpers = createMultiStyleConfigHelpers(parts.keys);
15
+
16
+ const config = helpers.defineMultiStyleConfig({
17
+ baseStyle: {
18
+ wrapper: {
19
+ backgroundColor: "white",
20
+ boxShadow: getBoxShadowString({
21
+ borderColor: colors.blackAlpha["400"],
22
+ }),
23
+ transitionProperty: "box-shadow",
24
+ transitionDuration: "fast",
25
+ display: "flex",
26
+ flex: 1,
27
+ paddingY: 0.5,
28
+ minHeight: 64,
29
+ alignItems: "center",
30
+ _hover: {
31
+ boxShadow: getBoxShadowString({
32
+ borderColor: "darkGrey",
33
+ borderWidth: 2,
34
+ }),
35
+ zIndex: zIndices.docked,
36
+ },
37
+ _focusWithin: {
38
+ boxShadow: getBoxShadowString({
39
+ borderColor: "greenHaze",
40
+ borderWidth: 2,
41
+ }),
42
+ },
43
+ _invalid: {
44
+ boxShadow: getBoxShadowString({
45
+ borderColor: "brightRed",
46
+ borderWidth: 2,
47
+ }),
48
+ },
49
+ _disabled: {
50
+ pointerEvents: "none",
51
+ boxShadow: getBoxShadowString({
52
+ borderColor: "osloGrey",
53
+ borderWidth: 1,
54
+ }),
55
+ _focus: {
56
+ boxShadow: getBoxShadowString({
57
+ borderColor: "osloGrey",
58
+ borderWidth: 1,
59
+ }),
60
+ },
61
+ },
62
+ },
63
+ inputLabel: {
64
+ fontSize: "mobile.xs",
65
+ color: "darkGrey",
66
+ margin: 0,
67
+ },
68
+ calendarTriggerButton: {
69
+ boxShadow: `${getBoxShadowString({
70
+ borderColor: colors.blackAlpha["400"],
71
+ })}, inset 1px 0 0 1px white`, // to make the shadow colors not multiply
72
+ width: 8,
73
+ display: "flex",
74
+ alignItems: "center",
75
+ justifyContent: "center",
76
+ borderRightRadius: "sm",
77
+ transitionProperty: "box-shadow, background-color",
78
+ transitionSpeed: "fast",
79
+ position: "relative",
80
+ left: "-1px", // To make the box-shadows overlap
81
+
82
+ _hover: {
83
+ boxShadow: `${getBoxShadowString({
84
+ borderColor: "darkGrey",
85
+ borderWidth: 2,
86
+ })}, inset 2px 0 0 2px white`,
87
+ },
88
+ _active: {
89
+ backgroundColor: "mint",
90
+ },
91
+ ...focusVisible({
92
+ focus: {
93
+ outline: "none",
94
+ boxShadow: getBoxShadowString({
95
+ borderColor: "greenHaze",
96
+ borderWidth: 2,
97
+ }),
98
+ },
99
+ notFocus: {
100
+ boxShadow: getBoxShadowString({
101
+ borderColor: "darkGrey",
102
+ borderWidth: 1,
103
+ }),
104
+ },
105
+ }),
106
+ _invalid: {
107
+ boxShadow: getBoxShadowString({
108
+ borderColor: "brightRed",
109
+ borderWidth: 2,
110
+ }),
111
+ },
112
+ },
113
+ dateCell: {
114
+ backgroundColor: "white",
115
+ color: "darkGrey",
116
+ borderRadius: "50%",
117
+ position: "relative",
118
+ transition: ".1s ease-in-out",
119
+ userSelect: "none",
120
+ width: [6, 7],
121
+ height: [6, 7],
122
+ transitionProperty: "common",
123
+ transitionSpeed: "fast",
124
+
125
+ _hover: {
126
+ backgroundColor: "seaMist",
127
+ },
128
+ ...focusVisible({
129
+ focus: {
130
+ outline: "none",
131
+ boxShadow: getBoxShadowString({
132
+ borderWidth: 2,
133
+ borderColor: "greenHaze",
134
+ }),
135
+ },
136
+ notFocus: {
137
+ boxShadow: "none",
138
+ _hover: {
139
+ boxShadow: getBoxShadowString({
140
+ borderWidth: 2,
141
+ borderColor: "osloGrey",
142
+ }),
143
+ },
144
+ _active: {
145
+ color: "darkGrey",
146
+ },
147
+ },
148
+ }),
149
+ _active: {
150
+ backgroundColor: "seaMist",
151
+ boxShadow: "none",
152
+ color: "darkGrey",
153
+ },
154
+ _disabled: {
155
+ color: "osloGrey",
156
+ boxShadow: "none",
157
+ pointerEvents: "none",
158
+ },
159
+ _selected: {
160
+ backgroundColor: "darkTeal",
161
+ color: "white",
162
+ _active: {
163
+ backgroundColor: "seaMist",
164
+ boxShadow: "none",
165
+ color: "darkGrey",
166
+ },
167
+ },
168
+ "&[data-today]": {
169
+ boxShadow: getBoxShadowString({
170
+ borderWidth: 1,
171
+ borderColor: "osloGrey",
172
+ }),
173
+ },
174
+ "&[data-unavailable]": {
175
+ pointerEvents: "none",
176
+ color: "osloGrey",
177
+ },
178
+ },
179
+ },
180
+ variants: {
181
+ simple: {
182
+ wrapper: {
183
+ borderRadius: "sm",
184
+ },
185
+ },
186
+ "with-trigger": {
187
+ wrapper: {
188
+ borderLeftRadius: "sm",
189
+ },
190
+ },
191
+ },
192
+ });
193
+
194
+ export default config;
@@ -0,0 +1,92 @@
1
+ import { modalAnatomy as parts } from "@chakra-ui/anatomy";
2
+ import { createMultiStyleConfigHelpers } from "@chakra-ui/react";
3
+ import type { PartsStyleObject } from "@chakra-ui/theme-tools";
4
+
5
+ const helpers = createMultiStyleConfigHelpers(parts.keys);
6
+
7
+ const config = helpers.defineMultiStyleConfig({
8
+ baseStyle: (props) => ({
9
+ overlay: {
10
+ backgroundColor: "blackAlpha.600",
11
+ zIndex: "modal",
12
+ },
13
+ dialogContainer: {
14
+ display: "flex",
15
+ zIndex: "modal",
16
+ justifyContent: "center",
17
+ alignItems: props.isCentered ? "center" : "flex-start",
18
+ overflow: props.scrollBehavior === "inside" ? "hidden" : "auto",
19
+ },
20
+ dialog: {
21
+ background: "white",
22
+ color: "inherit",
23
+ zIndex: "modal",
24
+ maxHeight:
25
+ props.scrollBehavior === "inside" ? "calc(100% - 7.5rem)" : undefined,
26
+ boxShadow: "md",
27
+ },
28
+ header: {
29
+ px: 3,
30
+ pt: 6,
31
+ pb: 2,
32
+ fontWeight: "bold",
33
+ fontFamily: "body",
34
+ },
35
+ closeButton: {
36
+ position: "absolute",
37
+ top: 3,
38
+ insetEnd: 3,
39
+ zIndex: "modal",
40
+ },
41
+ body: {
42
+ px: 3,
43
+ pb: 6,
44
+ flex: 1,
45
+ overflow: props.scrollBehavior === "inside" ? "auto" : undefined,
46
+ },
47
+ footer: {
48
+ px: 3,
49
+ pb: 3,
50
+ },
51
+ }),
52
+ sizes: {
53
+ xs: getSize("xs"),
54
+ sm: getSize("sm"),
55
+ md: getSize("md"),
56
+ lg: getSize("lg"),
57
+ xl: getSize("xl"),
58
+ "2xl": getSize("2xl"),
59
+ "3xl": getSize("3xl"),
60
+ "4xl": getSize("4xl"),
61
+ "5xl": getSize("5xl"),
62
+ "6xl": getSize("6xl"),
63
+ full: getSize("full"),
64
+ },
65
+ defaultProps: {
66
+ size: "md",
67
+ },
68
+ });
69
+
70
+ /**
71
+ * Since the `maxWidth` prop references theme.sizes internally,
72
+ * we can leverage that to size our modals.
73
+ */
74
+ function getSize(value: string): PartsStyleObject<typeof parts> {
75
+ if (value === "full") {
76
+ return {
77
+ dialog: {
78
+ maxWidth: "100vw",
79
+ minHeight: "100vh",
80
+ "@supports(min-height: -webkit-fill-available)": {
81
+ minHeight: "-webkit-fill-available",
82
+ },
83
+ my: 0,
84
+ },
85
+ };
86
+ }
87
+ return {
88
+ dialog: { maxWidth: value },
89
+ };
90
+ }
91
+
92
+ export default config;
@@ -0,0 +1,111 @@
1
+ import { createMultiStyleConfigHelpers } from "@chakra-ui/react";
2
+ import { anatomy, StyleFunctionProps } from "@chakra-ui/theme-tools";
3
+ import { getBoxShadowString } from "../utils/box-shadow-utils";
4
+ import { focusVisible } from "../utils/focus-utils";
5
+
6
+ const parts = anatomy("fab").parts("container", "icon", "text");
7
+
8
+ const helpers = createMultiStyleConfigHelpers(parts.keys);
9
+ const config = helpers.defineMultiStyleConfig({
10
+ baseStyle: (props) => ({
11
+ container: {
12
+ display: "flex",
13
+ alignItems: "center",
14
+ py: 2,
15
+ pl: 2,
16
+ pr: props.isTextVisible ? 3 : 2,
17
+ cursor: "pointer",
18
+ overflowX: "hidden",
19
+ whiteSpace: "nowrap",
20
+ borderRadius: "xl",
21
+ boxShadow: "md",
22
+ transitionDuration: "fast",
23
+ transitionProperty: "common",
24
+ position: "fixed",
25
+ ...getPositionProps(props),
26
+ _disabled: {
27
+ backgroundColor: "whiteAlpha.400",
28
+ color: "white",
29
+ },
30
+ ...focusVisible({
31
+ focus: {
32
+ boxShadow: getBoxShadowString({
33
+ borderColor: "greenHaze",
34
+ borderWidth: 2,
35
+ baseShadow: "md",
36
+ }),
37
+ },
38
+ notFocus: {
39
+ boxShadow: "md",
40
+ },
41
+ }),
42
+ _hover: {
43
+ backgroundColor: "seaMist",
44
+ },
45
+ zIndex: "sticky",
46
+ },
47
+ icon: {
48
+ mr: props.isTextVisible ? 1 : 0,
49
+ },
50
+ text: {
51
+ display: "flex",
52
+ flex: "none",
53
+ alignItems: "center",
54
+ fontWeight: "bold",
55
+ textStyle: "sm",
56
+ },
57
+ }),
58
+ variants: {
59
+ dark: (props) => ({
60
+ container: {
61
+ backgroundColor: "darkTeal",
62
+ color: "white",
63
+ _active: { backgroundColor: "pine" },
64
+ _hover: {
65
+ backgroundColor: "night",
66
+ },
67
+ ...focusVisible({
68
+ focus: {
69
+ boxShadow: `${props.theme.shadows.md}, inset 0 0 0 4px ${props.theme.colors.darkTeal}, inset 0 0 0 6px ${props.theme.colors.white}`,
70
+ outline: "none",
71
+ },
72
+ notFocus: {
73
+ boxShadow: "md",
74
+ },
75
+ }),
76
+ },
77
+ }),
78
+ light: {
79
+ container: {
80
+ backgroundColor: "white",
81
+ color: "darkGrey",
82
+ _active: { backgroundColor: "mint" },
83
+ },
84
+ },
85
+ green: {
86
+ container: {
87
+ backgroundColor: "mint",
88
+ color: "darkTeal",
89
+ _active: { color: "darkTeal", backgroundColor: "lightGrey" },
90
+ },
91
+ },
92
+ },
93
+ defaultProps: {
94
+ variant: "dark",
95
+ },
96
+ });
97
+
98
+ export default config;
99
+
100
+ const getPositionProps = (props: StyleFunctionProps) => {
101
+ switch (props.placement) {
102
+ case "top left":
103
+ return { top: "1em", left: "1em" };
104
+ case "top right":
105
+ return { top: "1em", right: "1em" };
106
+ case "bottom left":
107
+ return { bottom: "1em", left: "1em" };
108
+ case "bottom right":
109
+ return { bottom: "1em", right: "1em" };
110
+ }
111
+ };
@@ -0,0 +1,17 @@
1
+ import { defineStyleConfig } from "@chakra-ui/react";
2
+
3
+ const config = defineStyleConfig({
4
+ baseStyle: {
5
+ fontSize: "mobile.sm",
6
+ marginEnd: 3,
7
+ mb: 2,
8
+ transitionProperty: "common",
9
+ transitionDuration: "normal",
10
+ opacity: 1,
11
+ _disabled: {
12
+ opacity: 0.4,
13
+ },
14
+ },
15
+ });
16
+
17
+ export default config;
@@ -0,0 +1,27 @@
1
+ import { formAnatomy as parts } from "@chakra-ui/anatomy";
2
+ import { createMultiStyleConfigHelpers } from "@chakra-ui/react";
3
+ import { mode } from "@chakra-ui/theme-tools";
4
+
5
+ const helpers = createMultiStyleConfigHelpers(parts.keys);
6
+
7
+ const config = helpers.defineMultiStyleConfig({
8
+ baseStyle: (props) => ({
9
+ container: {
10
+ width: "100%",
11
+ position: "relative",
12
+ transitionProperty: "common",
13
+ transitionDuration: "fast",
14
+ },
15
+ requiredIndicator: {
16
+ marginStart: 1,
17
+ color: mode("brightRed", "lightRed")(props),
18
+ },
19
+ helperText: {
20
+ mt: 2,
21
+ color: mode("dimGrey", "whiteAlpha.600")(props),
22
+ lineHeight: "normal",
23
+ fontSize: "sm",
24
+ },
25
+ }),
26
+ });
27
+ export default config;
@@ -0,0 +1,34 @@
1
+ export { default as Accordion } from "./accordion";
2
+ export { default as Alert } from "./alert";
3
+ export { default as Badge } from "./badge";
4
+ export { default as Button } from "./button";
5
+ export { default as Card } from "./card";
6
+ export { default as CardSelect } from "./card-select";
7
+ export { default as Checkbox } from "./checkbox";
8
+ export { default as ChoiceChip } from "./choice-chip";
9
+ export { default as CloseButton } from "./close-button";
10
+ export { default as Code } from "./code";
11
+ export { default as Datepicker } from "./datepicker";
12
+ export { default as Drawer } from "./drawer";
13
+ export { default as FloatingActionButton } from "./fab";
14
+ export { default as Form } from "./form";
15
+ export { default as FormLabel } from "./form-label";
16
+ export { default as InfoSelect } from "./info-select";
17
+ export { default as InfoTag } from "./info-tag";
18
+ export { default as Input } from "./input";
19
+ export { default as LineIcon } from "./line-icon";
20
+ export { default as Link } from "./link";
21
+ export { default as ListBox } from "./listbox";
22
+ export { default as MediaControllerButton } from "./media-controller-button";
23
+ export { default as Modal } from "./modal";
24
+ export { default as Popover } from "./popover";
25
+ export { default as Radio } from "./radio";
26
+ export { default as Select } from "./select";
27
+ export { default as Skeleton } from "./skeleton";
28
+ export { default as Stepper } from "./stepper";
29
+ export { default as Switch } from "./switch";
30
+ export { default as Table } from "./table";
31
+ export { default as Tabs } from "./tabs";
32
+ export { default as Textarea } from "./textarea";
33
+ export { default as Toast } from "./toast";
34
+ export { default as TravelTag } from "./travel-tag";
@@ -0,0 +1,91 @@
1
+ import { anatomy } from "@chakra-ui/anatomy";
2
+ import { createMultiStyleConfigHelpers } from "@chakra-ui/react";
3
+ import { 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 parts = anatomy("InfoSelect").parts(
9
+ "container",
10
+ "label",
11
+ "button",
12
+ "arrowIcon"
13
+ );
14
+
15
+ const helpers = createMultiStyleConfigHelpers(parts.keys);
16
+
17
+ const config = helpers.defineMultiStyleConfig({
18
+ baseStyle: (props) => ({
19
+ container: {},
20
+ label: {
21
+ position: "relative",
22
+ },
23
+ button: {
24
+ appearance: "none",
25
+ borderTopRadius: "sm",
26
+ borderBottomRadius: props.isOpen ? 0 : "sm",
27
+ paddingY: 1.5,
28
+ paddingX: 3,
29
+ display: "flex",
30
+ justifyContent: "space-between",
31
+ alignItems: "center",
32
+ boxShadow: getBoxShadowString({
33
+ borderColor: mode(
34
+ colors.blackAlpha[400],
35
+ colors.whiteAlpha[400]
36
+ )(props),
37
+ }),
38
+ _hover: {
39
+ boxShadow: getBoxShadowString({
40
+ borderColor: "darkGrey",
41
+ borderWidth: 2,
42
+ }),
43
+ },
44
+ ...focusVisible({
45
+ focus: {
46
+ boxShadow: getBoxShadowString({
47
+ borderColor: "greenHaze",
48
+ borderWidth: 2,
49
+ }),
50
+ outline: "none",
51
+ },
52
+ notFocus: {
53
+ boxShadow: getBoxShadowString({ borderColor: "darkGrey" }),
54
+ },
55
+ }),
56
+ _disabled: {
57
+ boxShadow: getBoxShadowString({ borderColor: "platinum" }),
58
+ _hover: { boxShadow: getBoxShadowString({ borderColor: "platinum" }) },
59
+ _focus: { boxShadow: getBoxShadowString({ borderColor: "platinum" }) },
60
+ },
61
+ _invalid: {
62
+ boxShadow: getBoxShadowString({
63
+ borderColor: "brightRed",
64
+ borderWidth: 2,
65
+ }),
66
+ _hover: {
67
+ boxShadow: getBoxShadowString({
68
+ borderColor: "darkGrey",
69
+ borderWidth: 2,
70
+ }),
71
+ },
72
+ ...focusVisible({
73
+ focus: {
74
+ boxShadow: getBoxShadowString({
75
+ borderColor: "greenHaze",
76
+ borderWidth: 2,
77
+ }),
78
+ },
79
+ notFocus: {
80
+ boxShadow: getBoxShadowString({
81
+ borderColor: "brightRed",
82
+ borderWidth: 2,
83
+ }),
84
+ },
85
+ }),
86
+ },
87
+ },
88
+ arrowIcon: {},
89
+ }),
90
+ });
91
+ export default config;
@@ -0,0 +1,49 @@
1
+ import { createMultiStyleConfigHelpers } from "@chakra-ui/react";
2
+ import { anatomy } from "@chakra-ui/theme-tools";
3
+ import travelTagStyles from "./travel-tag";
4
+
5
+ const parts = anatomy("info-tag").parts(
6
+ "container",
7
+ "iconContainer",
8
+ "icon",
9
+ "textContainer",
10
+ "title",
11
+ "description"
12
+ );
13
+
14
+ const helpers = createMultiStyleConfigHelpers(parts.keys);
15
+
16
+ const config = helpers.defineMultiStyleConfig({
17
+ baseStyle: (props) => ({
18
+ ...travelTagStyles.baseStyle!(props),
19
+ iconContainer: {
20
+ ...travelTagStyles.baseStyle!(props).iconContainer,
21
+ padding: 1,
22
+ },
23
+ }),
24
+ sizes: {
25
+ ...travelTagStyles.sizes,
26
+ sm: {
27
+ ...travelTagStyles.sizes!.sm,
28
+ iconContainer: {
29
+ borderRadius: "0.375rem",
30
+ },
31
+ },
32
+ md: {
33
+ ...travelTagStyles.sizes!.md,
34
+ iconContainer: {
35
+ borderRadius: "0.375rem",
36
+ },
37
+ },
38
+ lg: {
39
+ ...travelTagStyles.sizes!.lg,
40
+ iconContainer: {
41
+ borderRadius: "sm",
42
+ },
43
+ },
44
+ },
45
+ defaultProps: {
46
+ size: "md",
47
+ },
48
+ });
49
+ export default config;