@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,97 @@
1
+ import { inputAnatomy as parts } from "@chakra-ui/anatomy";
2
+ import { createMultiStyleConfigHelpers } from "@chakra-ui/react";
3
+ import { colors } from "../foundations";
4
+ import { getBoxShadowString } from "../utils/box-shadow-utils";
5
+ import { focusVisible } from "../utils/focus-utils";
6
+
7
+ const helpers = createMultiStyleConfigHelpers(parts.keys);
8
+
9
+ const config = helpers.defineMultiStyleConfig({
10
+ baseStyle: (props) => ({
11
+ field: {
12
+ appearance: "none",
13
+ width: "100%",
14
+ outline: "none",
15
+ border: 0,
16
+ backgroundColor: "white",
17
+ borderRadius: "sm",
18
+ transitionProperty: "common",
19
+ transitionDuration: "fast",
20
+ position: "relative",
21
+ px: 3,
22
+ height: "54px",
23
+ fontSize: "18px",
24
+
25
+ boxShadow: getBoxShadowString({ borderColor: colors.blackAlpha[400] }),
26
+ _hover: {
27
+ boxShadow: getBoxShadowString({
28
+ borderColor: "darkGrey",
29
+ borderWidth: 2,
30
+ }),
31
+ },
32
+ ...focusVisible({
33
+ focus: {
34
+ boxShadow: getBoxShadowString({
35
+ borderColor: "greenHaze",
36
+ borderWidth: 2,
37
+ }),
38
+ },
39
+ notFocus: {
40
+ boxShadow: getBoxShadowString({ borderColor: "darkGrey" }),
41
+ },
42
+ }),
43
+ _disabled: {
44
+ boxShadow: getBoxShadowString({ borderColor: "platinum" }),
45
+ _hover: { boxShadow: getBoxShadowString({ borderColor: "platinum" }) },
46
+ _focus: { boxShadow: getBoxShadowString({ borderColor: "platinum" }) },
47
+ },
48
+ _invalid: {
49
+ boxShadow: getBoxShadowString({
50
+ borderColor: "brightRed",
51
+ borderWidth: 2,
52
+ }),
53
+ _hover: {
54
+ boxShadow: getBoxShadowString({
55
+ borderColor: "darkGrey",
56
+ borderWidth: 2,
57
+ }),
58
+ },
59
+ ...focusVisible({
60
+ focus: {
61
+ boxShadow: getBoxShadowString({
62
+ borderColor: "greenHaze",
63
+ borderWidth: 2,
64
+ }),
65
+ },
66
+ notFocus: {
67
+ boxShadow: getBoxShadowString({
68
+ borderColor: "brightRed",
69
+ borderWidth: 2,
70
+ }),
71
+ },
72
+ }),
73
+ },
74
+ " + label": {
75
+ fontSize: ["mobile.sm", "desktop.sm"],
76
+ top: "2px",
77
+ left: props.paddingLeft || props.pl || 3,
78
+ zIndex: 2,
79
+ position: "absolute",
80
+ my: 2,
81
+ transition: ".1s ease-out",
82
+ transformOrigin: "top left",
83
+ },
84
+ "&:not(:placeholder-shown)": {
85
+ pt: "16px",
86
+ "& + label": {
87
+ transform: "scale(0.825) translateY(-10px)",
88
+ },
89
+ },
90
+ },
91
+ element: {
92
+ height: "100%",
93
+ },
94
+ }),
95
+ });
96
+
97
+ export default config;
@@ -0,0 +1,121 @@
1
+ import { createMultiStyleConfigHelpers } from "@chakra-ui/react";
2
+ import { anatomy } from "@chakra-ui/theme-tools";
3
+
4
+ const parts = anatomy("line-tag").parts("iconContainer", "icon");
5
+ const helpers = createMultiStyleConfigHelpers(parts.keys);
6
+
7
+ const config = helpers.defineMultiStyleConfig({
8
+ baseStyle: {
9
+ iconContainer: {
10
+ display: "flex",
11
+ justifyContent: "center",
12
+ alignItems: "center",
13
+ },
14
+ icon: {
15
+ color: "white",
16
+ },
17
+ },
18
+ variants: {
19
+ "local-train": {
20
+ iconContainer: {
21
+ backgroundColor: "linjetag.lokaltog",
22
+ },
23
+ },
24
+ "region-train": {
25
+ iconContainer: {
26
+ backgroundColor: "linjetag.regiontog",
27
+ },
28
+ },
29
+ "region-express-train": {
30
+ iconContainer: {
31
+ backgroundColor: "linjetag.regionEkspress",
32
+ },
33
+ },
34
+ "long-distance-train": {
35
+ iconContainer: {
36
+ backgroundColor: "linjetag.fjerntog",
37
+ },
38
+ },
39
+ "airport-express-train": {
40
+ iconContainer: {
41
+ backgroundColor: "linjetag.flytog",
42
+ },
43
+ },
44
+ "vy-bus": {
45
+ iconContainer: {
46
+ backgroundColor: "linjetag.vyBuss",
47
+ },
48
+ },
49
+ "local-bus": {
50
+ iconContainer: {
51
+ backgroundColor: "linjetag.lokalbuss",
52
+ },
53
+ },
54
+ ferry: {
55
+ iconContainer: {
56
+ backgroundColor: "linjetag.ferge",
57
+ },
58
+ },
59
+ subway: {
60
+ iconContainer: {
61
+ backgroundColor: "linjetag.tbane",
62
+ },
63
+ },
64
+ tram: {
65
+ iconContainer: {
66
+ backgroundColor: "linjetag.trikk",
67
+ },
68
+ },
69
+ "alt-transport": {
70
+ iconContainer: {
71
+ backgroundColor: "linjetag.altTransport",
72
+ },
73
+ icon: {
74
+ color: "darkGrey",
75
+ "[aria-disabled=true] &": {
76
+ color: "white",
77
+ },
78
+ },
79
+ },
80
+
81
+ walk: {
82
+ iconContainer: {
83
+ backgroundColor: "white",
84
+ borderWidth: 1,
85
+ borderStyle: "solid",
86
+ borderColor: "blackAlpha.200",
87
+ },
88
+ icon: {
89
+ color: "darkGrey",
90
+ "[aria-disabled=true] &": {
91
+ color: "osloGrey",
92
+ },
93
+ },
94
+ },
95
+ },
96
+ sizes: {
97
+ sm: {
98
+ iconContainer: {
99
+ borderRadius: "0.5625rem",
100
+ padding: 1,
101
+ },
102
+ },
103
+ md: {
104
+ iconContainer: {
105
+ borderRadius: "0.5625rem",
106
+ padding: 1,
107
+ },
108
+ },
109
+ lg: {
110
+ iconContainer: {
111
+ borderRadius: "sm",
112
+ padding: 1,
113
+ },
114
+ },
115
+ },
116
+ defaultProps: {
117
+ size: "md",
118
+ },
119
+ });
120
+
121
+ export default config;
@@ -0,0 +1,155 @@
1
+ import { defineStyleConfig } from "@chakra-ui/react";
2
+ import { getBoxShadowString } from "../utils/box-shadow-utils";
3
+ import { focusVisible } from "../utils/focus-utils";
4
+
5
+ const config = defineStyleConfig({
6
+ baseStyle: {
7
+ transitionProperty: "common",
8
+ transitionDuration: "fast",
9
+ transitionTimingFunction: "ease-out",
10
+ cursor: "pointer",
11
+ backgroundImage: "linear-gradient(currentColor, currentColor)",
12
+ backgroundSize: "100% 1px",
13
+ backgroundPosition: "0 100%",
14
+ backgroundRepeat: "no-repeat",
15
+ borderRadius: "none",
16
+ pb: "2px",
17
+ color: "inherit",
18
+ display: "inline",
19
+ position: "relative",
20
+ boxDecorationBreak: "clone",
21
+
22
+ "&:focus, &:focus-visible, &:active, &:hover": {
23
+ backgroundImage: "none",
24
+ backgroundSize: "100%",
25
+ outline: "none",
26
+ borderRadius: "xs",
27
+ },
28
+
29
+ svg: {
30
+ display: "inline-block",
31
+ width: "1.125em",
32
+ height: "1.125em",
33
+ position: "relative",
34
+ bottom: "-0.2em",
35
+ },
36
+ },
37
+ variants: {
38
+ primary: {
39
+ color: "pine",
40
+ ...focusVisible({
41
+ focus: {
42
+ color: "white",
43
+ backgroundColor: "pine",
44
+ boxShadow: getBoxShadowString({
45
+ borderColor: "pine",
46
+ borderWidth: 3,
47
+ isInset: false,
48
+ }),
49
+ },
50
+ notFocus: {
51
+ color: "pine",
52
+ boxShadow: "none",
53
+ backgroundColor: "transparent",
54
+ },
55
+ }),
56
+ _hover: {
57
+ backgroundColor: "coralGreen",
58
+ color: "darkTeal",
59
+ boxShadow: getBoxShadowString({
60
+ borderColor: "coralGreen",
61
+ borderWidth: 3,
62
+ isInset: false,
63
+ }),
64
+ },
65
+ _active: {
66
+ backgroundColor: "mint",
67
+ boxShadow: getBoxShadowString({
68
+ borderColor: "mint",
69
+ borderWidth: 3,
70
+ isInset: false,
71
+ }),
72
+ color: "pine",
73
+ },
74
+ },
75
+ secondary: (props) => ({
76
+ color: "darkGrey",
77
+ ...focusVisible({
78
+ focus: {
79
+ color: "white",
80
+ backgroundColor: "darkGrey",
81
+ boxShadow: getBoxShadowString({
82
+ borderColor: "darkGrey",
83
+ borderWidth: 3,
84
+ isInset: false,
85
+ }),
86
+ },
87
+ notFocus: {
88
+ color: "darkGrey",
89
+ boxShadow: "none",
90
+ backgroundColor: "transparent",
91
+ },
92
+ }),
93
+ _hover: {
94
+ color: "darkGrey",
95
+ backgroundColor: "blackAlpha.100",
96
+ boxShadow: getBoxShadowString({
97
+ borderColor: props.theme.colors.blackAlpha[100],
98
+ borderWidth: 3,
99
+ isInset: false,
100
+ }),
101
+ },
102
+ _active: {
103
+ color: "darkTeal",
104
+ backgroundColor: "mint",
105
+ boxShadow: getBoxShadowString({
106
+ borderColor: "mint",
107
+ borderWidth: 3,
108
+ isInset: false,
109
+ }),
110
+ },
111
+ }),
112
+ tertiary: (props) => ({
113
+ color: "white",
114
+ ...focusVisible({
115
+ focus: {
116
+ color: "pine",
117
+ backgroundColor: "white",
118
+ boxShadow: getBoxShadowString({
119
+ borderColor: "white",
120
+ borderWidth: 3,
121
+ isInset: false,
122
+ }),
123
+ },
124
+ notFocus: {
125
+ color: "white",
126
+ boxShadow: "none",
127
+ backgroundColor: "transparent",
128
+ },
129
+ }),
130
+ _hover: {
131
+ color: "white",
132
+ backgroundColor: "whiteAlpha.200",
133
+ boxShadow: getBoxShadowString({
134
+ borderColor: props.theme.colors.whiteAlpha[200],
135
+ borderWidth: 3,
136
+ isInset: false,
137
+ }),
138
+ },
139
+ _active: {
140
+ color: "white",
141
+ backgroundColor: "whiteAlpha.400",
142
+ boxShadow: getBoxShadowString({
143
+ borderColor: props.theme.colors.whiteAlpha[400],
144
+ borderWidth: 3,
145
+ isInset: false,
146
+ }),
147
+ },
148
+ }),
149
+ },
150
+ defaultProps: {
151
+ variant: "primary",
152
+ },
153
+ });
154
+
155
+ export default config;
@@ -0,0 +1,52 @@
1
+ import { anatomy } from "@chakra-ui/anatomy";
2
+ import { createMultiStyleConfigHelpers } from "@chakra-ui/react";
3
+ import { mode } from "@chakra-ui/theme-tools";
4
+
5
+ const parts = anatomy("ListBox").parts(
6
+ "container",
7
+ "item",
8
+ "label",
9
+ "description"
10
+ );
11
+
12
+ const helpers = createMultiStyleConfigHelpers(parts.keys);
13
+
14
+ const config = helpers.defineMultiStyleConfig({
15
+ baseStyle: (props) => ({
16
+ container: {
17
+ background: mode("white", "darkGrey")(props),
18
+ boxShadow: "sm",
19
+ overflowY: "auto",
20
+ maxHeight: "50vh",
21
+ width: "100%",
22
+ listStyle: "none",
23
+ },
24
+ item: {
25
+ paddingX: 3,
26
+ paddingY: 2,
27
+ color: mode("darkGrey", "white")(props),
28
+ _hover: {
29
+ background: mode("mint", "darkTeal")(props),
30
+ outline: "none",
31
+ },
32
+ _focus: {
33
+ outline: "none",
34
+ background: mode("mint", "darkTeal")(props),
35
+ },
36
+ _selected: {
37
+ background: mode("pine", "pine")(props),
38
+ color: mode("white", "white")(props),
39
+ },
40
+ },
41
+ label: {},
42
+ description: {
43
+ fontSize: ["mobile.xs", "desktop.xs"],
44
+ color: "dimGrey",
45
+ "[aria-selected='true'] &": {
46
+ color: "lightGrey",
47
+ },
48
+ },
49
+ }),
50
+ });
51
+
52
+ export default config;
@@ -0,0 +1,134 @@
1
+ import { createMultiStyleConfigHelpers } from "@chakra-ui/react";
2
+ import { anatomy } 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("media-controller-button").parts("container", "icon");
7
+ const helpers = createMultiStyleConfigHelpers(parts.keys);
8
+
9
+ const config = helpers.defineMultiStyleConfig({
10
+ baseStyle: {
11
+ container: {
12
+ fontSize: 30,
13
+ transitionProperty: "common",
14
+ transitionDuration: "fast",
15
+ borderRadius: "round",
16
+ appearance: "none",
17
+ background: "transparent",
18
+ border: "none",
19
+ cursor: "pointer",
20
+ display: "flex",
21
+ padding: 1,
22
+ alignSelf: "center",
23
+ color: "primaryGreen",
24
+ },
25
+ icon: {
26
+ flex: "0 0 auto",
27
+ display: "block",
28
+ width: "1em",
29
+ height: "1em",
30
+ },
31
+ },
32
+ variants: {
33
+ play: {
34
+ container: {
35
+ padding: 0,
36
+ _hover: {
37
+ color: "pine",
38
+ },
39
+ _active: {
40
+ color: "greenHaze",
41
+ },
42
+ ...focusVisible({
43
+ focus: {
44
+ position: "relative",
45
+ outline: "none",
46
+ _after: {
47
+ content: '""',
48
+ display: "block",
49
+ zIndex: 2,
50
+ margin: 0.5,
51
+ borderRadius: "round",
52
+ borderWidth: 2,
53
+ borderColor: "white",
54
+ borderStyle: "solid",
55
+ pointerEvents: "none",
56
+ position: "absolute",
57
+ top: 0,
58
+ right: 0,
59
+ bottom: 0,
60
+ left: 0,
61
+ outline: "none",
62
+ },
63
+ },
64
+ notFocus: {
65
+ _after: {
66
+ display: "none",
67
+ },
68
+ },
69
+ }),
70
+ _disabled: {
71
+ color: "silver",
72
+ _hover: {
73
+ color: "silver",
74
+ },
75
+ _active: {
76
+ color: "silver",
77
+ },
78
+ },
79
+ },
80
+ },
81
+ jumpSkip: {
82
+ container: {
83
+ ...focusVisible({
84
+ focus: {
85
+ boxShadow: getBoxShadowString({
86
+ borderColor: "greenHaze",
87
+ borderWidth: 2,
88
+ }),
89
+ outline: "none",
90
+ },
91
+ notFocus: {
92
+ boxShadow: "none",
93
+ },
94
+ }),
95
+ _hover: {
96
+ backgroundColor: "seaMist",
97
+ },
98
+ _active: {
99
+ backgroundColor: "mint",
100
+ },
101
+ _disabled: {
102
+ backgroundColor: "platinum",
103
+ color: "steel",
104
+ _hover: {
105
+ backgroundColor: "platinum",
106
+ },
107
+ _active: {
108
+ backgroundColor: "platinum",
109
+ },
110
+ },
111
+ },
112
+ icon: {
113
+ width: "0.71em",
114
+ height: "0.71em",
115
+ },
116
+ },
117
+ },
118
+ sizes: {
119
+ sm: {
120
+ container: {
121
+ fontSize: 42,
122
+ },
123
+ },
124
+ lg: {
125
+ container: {
126
+ fontSize: 60,
127
+ },
128
+ },
129
+ },
130
+ });
131
+
132
+ export default config;
133
+
134
+ // 3341 minus hund
@@ -0,0 +1,93 @@
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
+ borderRadius: "md",
22
+ background: "white",
23
+ color: "inherit",
24
+ my: "3.75rem",
25
+ zIndex: "modal",
26
+ maxHeight:
27
+ props.scrollBehavior === "inside" ? "calc(100% - 7.5rem)" : undefined,
28
+ boxShadow: "md",
29
+ },
30
+ header: {
31
+ px: 5,
32
+ pt: 6,
33
+ pb: 2,
34
+ fontWeight: "bold",
35
+ fontFamily: "body",
36
+ },
37
+ closeButton: {
38
+ position: "absolute",
39
+ top: 3,
40
+ insetEnd: 3,
41
+ },
42
+ body: {
43
+ px: 5,
44
+ pb: 6,
45
+ flex: 1,
46
+ overflow: props.scrollBehavior === "inside" ? "auto" : undefined,
47
+ },
48
+ footer: {
49
+ px: 3,
50
+ pb: 3,
51
+ },
52
+ }),
53
+ sizes: {
54
+ xs: getSize("xs"),
55
+ sm: getSize("sm"),
56
+ md: getSize("md"),
57
+ lg: getSize("lg"),
58
+ xl: getSize("xl"),
59
+ "2xl": getSize("2xl"),
60
+ "3xl": getSize("3xl"),
61
+ "4xl": getSize("4xl"),
62
+ "5xl": getSize("5xl"),
63
+ "6xl": getSize("6xl"),
64
+ full: getSize("full"),
65
+ },
66
+ defaultProps: {
67
+ size: "md",
68
+ },
69
+ });
70
+
71
+ export default config;
72
+
73
+ /**
74
+ * Since the `maxWidth` prop references theme.sizes internally,
75
+ * we can leverage that to size our modals.
76
+ */
77
+ function getSize(value: string): PartsStyleObject<typeof parts> {
78
+ if (value === "full") {
79
+ return {
80
+ dialog: {
81
+ maxWidth: "100vw",
82
+ minHeight: "100vh",
83
+ "@supports(min-height: -webkit-fill-available)": {
84
+ minHeight: "-webkit-fill-available",
85
+ },
86
+ my: 0,
87
+ },
88
+ };
89
+ }
90
+ return {
91
+ dialog: { maxW: value },
92
+ };
93
+ }
@@ -0,0 +1,63 @@
1
+ import { popoverAnatomy as parts } from "@chakra-ui/anatomy";
2
+ import { createMultiStyleConfigHelpers } from "@chakra-ui/react";
3
+ import { cssVar } from "@chakra-ui/theme-tools";
4
+
5
+ const $popperBg = cssVar("popper-bg");
6
+ const $arrowBg = cssVar("popper-arrow-bg");
7
+ const $arrowShadowColor = cssVar("popper-arrow-shadow-color");
8
+
9
+ const helpers = createMultiStyleConfigHelpers(parts.keys);
10
+
11
+ const config = helpers.defineMultiStyleConfig({
12
+ baseStyle: {
13
+ popper: {
14
+ zIndex: "popover",
15
+ },
16
+ content: {
17
+ [$popperBg.variable]: `colors.darkTeal`,
18
+ backgroundColor: $popperBg.reference,
19
+ [$arrowBg.variable]: $popperBg.reference,
20
+ [$arrowShadowColor.variable]: `colors.blackAlpha.300`,
21
+ color: "white",
22
+ borderRadius: "sm",
23
+ p: 1.5,
24
+ zIndex: "inherit",
25
+ maxWidth: "20em",
26
+ _focus: {
27
+ outline: 0,
28
+ boxShadow: "outline",
29
+ },
30
+ },
31
+ arrow: {
32
+ backgroundColor: "transparent",
33
+ boxShadow: "none",
34
+ clipPath:
35
+ "path('M 0 0 Q 2.4 6 0 12 Q 6 9.6 12 12 Q 9.6 6 12 0 Q 6 2.4 0 0 z')",
36
+ },
37
+ closeButton: {
38
+ position: "absolute",
39
+ borderRadius: "xs",
40
+ top: 1,
41
+ insetEnd: 1,
42
+ width: 2,
43
+ height: 2,
44
+ padding: 1,
45
+ },
46
+ },
47
+ sizes: {
48
+ sm: {
49
+ content: {
50
+ px: 1.5,
51
+ py: 1,
52
+ },
53
+ },
54
+ lg: {
55
+ content: {
56
+ px: 3,
57
+ py: 2,
58
+ },
59
+ },
60
+ },
61
+ });
62
+
63
+ export default config;