@vygruppen/spor-react 9.10.0 → 9.11.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 (30) hide show
  1. package/.turbo/turbo-build.log +10 -10
  2. package/CHANGELOG.md +12 -0
  3. package/dist/{CountryCodeSelect-FVCL47RT.mjs → CountryCodeSelect-633P6ZEW.mjs} +1 -1
  4. package/dist/{chunk-WZYWSOJB.mjs → chunk-RR7HZ3VH.mjs} +2825 -2603
  5. package/dist/index.d.mts +58 -27
  6. package/dist/index.d.ts +58 -27
  7. package/dist/index.js +4118 -3869
  8. package/dist/index.mjs +1 -1
  9. package/package.json +1 -1
  10. package/src/index.tsx +1 -0
  11. package/src/loader/ColorInlineLoader.tsx +10 -1
  12. package/src/loader/ColorSpinner.tsx +12 -2
  13. package/src/loader/ContentLoader.tsx +13 -2
  14. package/src/loader/DarkInlineLoader.tsx +13 -2
  15. package/src/loader/LightFullScreenLoader.tsx +10 -1
  16. package/src/loader/LightInlineLoader.tsx +13 -2
  17. package/src/logo/VyLogo.tsx +7 -0
  18. package/src/logo/VyLogoPride.tsx +164 -0
  19. package/src/logo/index.tsx +1 -0
  20. package/src/media-controller/JumpButton.tsx +6 -3
  21. package/src/media-controller/PlayPauseButton.tsx +6 -3
  22. package/src/media-controller/SkipButton.tsx +6 -3
  23. package/src/pride/PrideProvider.tsx +58 -0
  24. package/src/pride/TogglePride.tsx +23 -0
  25. package/src/pride/index.tsx +2 -0
  26. package/src/provider/SporProvider.tsx +7 -4
  27. package/src/provider/index.tsx +1 -0
  28. package/src/theme/components/media-controller-button.ts +20 -11
  29. package/src/theme/components/static-card.ts +4 -2
  30. package/src/media-controller/icons.tsx +0 -80
package/src/theme/components/media-controller-button.ts CHANGED
@@ -1,7 +1,7 @@
1
1
  import { createMultiStyleConfigHelpers } from "@chakra-ui/react";
2
- import { anatomy } from "@chakra-ui/theme-tools";
2
+ import { anatomy, mode } from "@chakra-ui/theme-tools";
3
3
  import { baseText } from "../utils/base-utils";
4
- import { brandBackground } from "../utils/brand-utils";
4
+ import { brandBackground, brandText } from "../utils/brand-utils";
5
5
  import { focusVisibleStyles } from "../utils/focus-utils";
6
6
  import { ghostBackground } from "../utils/ghost-utils";
7
7
  import { surface } from "../utils/surface-utils";
@@ -38,16 +38,21 @@ const config = helpers.defineMultiStyleConfig({
38
38
  play: (props) => ({
39
39
  container: {
40
40
  padding: 0,
41
+ ...brandText("default", props),
42
+ ...brandBackground("default", props),
41
43
  _hover: {
42
- color: brandBackground("hover", props).backgroundColor,
44
+ ...brandText("default", props),
45
+ ...brandBackground("hover", props),
43
46
  },
44
47
  _active: {
45
- color: brandBackground("active", props).backgroundColor,
48
+ ...brandText("default", props),
49
+ ...brandBackground("active", props),
46
50
  },
47
51
 
48
52
  _disabled: {
49
53
  pointerEvents: "none",
50
- color: surface("disabled", props).backgroundColor,
54
+ color: mode("icon.disabled.light", "icon.disabled.dark")(props),
55
+ ...surface("disabled", props),
51
56
  },
52
57
  },
53
58
  }),
@@ -72,16 +77,20 @@ const config = helpers.defineMultiStyleConfig({
72
77
  }),
73
78
  },
74
79
  sizes: {
75
- sm: {
80
+ sm: (props) => ({
76
81
  container: {
77
- fontSize: 42,
82
+ fontSize: props.variant === "play" ? 24 : 42,
83
+ width: props.variant === "play" ? "2.625rem" : undefined,
84
+ height: props.variant === "play" ? "2.625rem" : undefined,
78
85
  },
79
- },
80
- lg: {
86
+ }),
87
+ lg: (props) => ({
81
88
  container: {
82
- fontSize: 60,
89
+ fontSize: props.variant === "play" ? 38 : 60,
90
+ width: props.variant === "play" ? "3.75rem" : undefined,
91
+ height: props.variant === "play" ? "3.75rem" : undefined,
83
92
  },
84
- },
93
+ }),
85
94
  },
86
95
  });
87
96
 
package/src/theme/components/static-card.ts CHANGED
@@ -1,4 +1,4 @@
1
- import { defineStyleConfig } from "@chakra-ui/react";
1
+ import { Theme, defineStyleConfig } from "@chakra-ui/react";
2
2
  import { colors } from "../foundations";
3
3
  import { focusVisibleStyles } from "../utils/focus-utils";
4
4
  import { bg } from "../utils/bg-utils";
@@ -33,9 +33,11 @@ type CardThemeProps = {
33
33
  | "darkBlue"
34
34
  | "darkGreen"
35
35
  | "darkYellow";
36
+ theme: Theme;
37
+ colorMode: "light" | "dark";
36
38
  };
37
39
 
38
- const getColorSchemeBaseProps = (props: any) => {
40
+ const getColorSchemeBaseProps = (props: CardThemeProps) => {
39
41
  switch (props.colorScheme) {
40
42
  case "white":
41
43
  return {
package/src/media-controller/icons.tsx DELETED
@@ -1,80 +0,0 @@
1
- import { Box, BoxProps } from "@chakra-ui/react";
2
- import * as React from "react";
3
-
4
- export const JumpForwardIcon = (props: BoxProps) => (
5
- <Box as="svg" {...props} viewBox="0 0 32 30" fill="none">
6
- <path
7
- fillRule="evenodd"
8
- clipRule="evenodd"
9
- d="M22.388 7.5C20.567 5.967 18.251 5 15.75 5 9.951 5 5.25 9.701 5.25 15.5S9.951 26 15.75 26s10.5-4.701 10.5-10.5a1 1 0 1 1 2 0c0 6.904-5.596 12.5-12.5 12.5s-12.5-5.596-12.5-12.5S8.846 3 15.75 3c3.206 0 6.11 1.31 8.304 3.3l.206-1.441a1 1 0 0 1 1.98.282L25.617 9.5H21.25a1 1 0 1 1 0-2h1.138Z"
10
- fill="currentColor"
11
- />
12
- <path
13
- fillRule="evenodd"
14
- clipRule="evenodd"
15
- d="M19.465 14.568c-.4-.232-.863-.348-1.392-.348-.655 0-1.195.172-1.62.516l.18-2.172h2.989c.256 0 .436-.016.54-.048.111-.032.168-.112.168-.24v-1.02h-.012c-.04.04-.117.064-.229.072a7.65 7.65 0 0 1-.515.012H15.42l-.36 4.464 1.273.12c.175-.16.384-.284.623-.372a2.11 2.11 0 0 1 .768-.144c.48 0 .856.136 1.128.408.28.264.42.624.42 1.08 0 .456-.155.832-.468 1.128-.311.296-.703.444-1.175.444a3.04 3.04 0 0 1-.936-.132 3.802 3.802 0 0 1-.756-.348c-.289-.176-.48-.34-.577-.492l-.636.888a.233.233 0 0 0-.047.12c0 .08.043.16.131.24.089.072.225.168.409.288.712.448 1.547.672 2.508.672.576 0 1.091-.124 1.547-.372a2.743 2.743 0 0 0 1.08-1.056 2.97 2.97 0 0 0 .384-1.5c0-.472-.111-.9-.335-1.284a2.314 2.314 0 0 0-.937-.924ZM13.338 19.224a2.954 2.954 0 0 1-.036-.552V11.34h-1.116a2.07 2.07 0 0 1-.576.768c-.248.208-.576.312-.984.312h-.144c-.136 0-.224-.016-.264-.048v.792c0 .128.052.208.156.24.112.032.296.048.552.048h.912v5.364c0 .248.028.424.084.528.056.104.172.156.348.156h1.248v-.012a.478.478 0 0 1-.18-.264Z"
16
- fill="currentColor"
17
- />
18
- </Box>
19
- );
20
-
21
- export const JumpBackwardIcon = (props: BoxProps) => (
22
- <Box as="svg" {...props} viewBox="0 0 32 30" fill="none">
23
- <path
24
- fillRule="evenodd"
25
- clipRule="evenodd"
26
- d="M9.612 7.5C11.433 5.967 13.749 5 16.25 5c5.799 0 10.5 4.701 10.5 10.5S22.049 26 16.25 26s-10.5-4.701-10.5-10.5a1 1 0 1 0-2 0c0 6.904 5.596 12.5 12.5 12.5s12.5-5.596 12.5-12.5S23.154 3 16.25 3c-3.206 0-6.11 1.31-8.304 3.3L7.74 4.86a1 1 0 0 0-1.98.282L6.383 9.5h4.367a1 1 0 1 0 0-2H9.612Z"
27
- fill="currentColor"
28
- />
29
- <path
30
- fillRule="evenodd"
31
- clipRule="evenodd"
32
- d="M19.965 14.568c-.4-.232-.863-.348-1.392-.348-.655 0-1.195.172-1.62.516l.18-2.172h2.989c.256 0 .436-.016.54-.048.111-.032.168-.112.168-.24v-1.02h-.012c-.04.04-.117.064-.229.072a7.65 7.65 0 0 1-.515.012H15.92l-.36 4.464 1.273.12c.175-.16.384-.284.623-.372a2.11 2.11 0 0 1 .768-.144c.48 0 .856.136 1.128.408.28.264.42.624.42 1.08 0 .456-.155.832-.468 1.128-.311.296-.703.444-1.175.444a3.04 3.04 0 0 1-.936-.132 3.802 3.802 0 0 1-.756-.348c-.288-.176-.48-.34-.576-.492l-.636.888a.233.233 0 0 0-.049.12c0 .08.045.16.133.24.088.072.223.168.407.288.713.448 1.548.672 2.508.672.576 0 1.092-.124 1.548-.372a2.743 2.743 0 0 0 1.08-1.056 2.97 2.97 0 0 0 .384-1.5c0-.472-.111-.9-.335-1.284a2.314 2.314 0 0 0-.937-.924ZM13.838 19.224a2.954 2.954 0 0 1-.036-.552V11.34h-1.116a2.07 2.07 0 0 1-.576.768c-.248.208-.576.312-.984.312h-.144c-.136 0-.224-.016-.264-.048v.792c0 .128.052.208.156.24.112.032.296.048.552.048h.912v5.364c0 .248.028.424.084.528.056.104.172.156.348.156h1.248v-.012a.478.478 0 0 1-.18-.264Z"
33
- fill="currentColor"
34
- />
35
- </Box>
36
- );
37
-
38
- export const PlayIcon = (props: BoxProps) => (
39
- <Box as="svg" {...props} fill="none" viewBox="0 0 60 60">
40
- <path
41
- fillRule="evenodd"
42
- clipRule="evenodd"
43
- d="M30 60c16.569 0 30-13.431 30-30C60 13.431 46.569 0 30 0 13.431 0 0 13.431 0 30c0 16.569 13.431 30 30 30Zm-4.25-45.325c-1.97-1.533-4.84-.128-4.84 2.368v25.914c0 2.496 2.87 3.9 4.84 2.368l16.66-12.957a3 3 0 0 0 0-4.736L25.75 14.675Z"
44
- fill="currentColor"
45
- />
46
- </Box>
47
- );
48
-
49
- export const PauseIcon = (props: BoxProps) => (
50
- <Box as="svg" {...props} viewBox="0 0 60 60" fill="none">
51
- <path
52
- fillRule="evenodd"
53
- clipRule="evenodd"
54
- d="M60 30c0 16.569-13.431 30-30 30C13.431 60 0 46.569 0 30 0 13.431 13.431 0 30 0c16.569 0 30 13.431 30 30Zm-25.5-9.75a2.25 2.25 0 0 1 4.5 0v19.5a2.25 2.25 0 0 1-4.5 0v-19.5ZM23.25 18A2.25 2.25 0 0 0 21 20.25v19.5a2.25 2.25 0 0 0 4.5 0v-19.5A2.25 2.25 0 0 0 23.25 18Z"
55
- fill="currentColor"
56
- />
57
- </Box>
58
- );
59
-
60
- export const SkipNextIcon = (props: BoxProps) => (
61
- <Box as="svg" {...props} viewBox="0 0 30 30" fill="none">
62
- <path
63
- fillRule="evenodd"
64
- clipRule="evenodd"
65
- d="M6.453 4.18A1.695 1.695 0 0 0 4 5.696v18.608c0 1.26 1.326 2.08 2.453 1.516L24 17.047V25a1 1 0 1 0 2 0V5a1 1 0 1 0-2 0v7.952L6.453 4.18ZM23.623 15 6 23.81V6.19l17.623 8.81Z"
66
- fill="currentColor"
67
- />
68
- </Box>
69
- );
70
-
71
- export const SkipPreviousIcon = (props: BoxProps) => (
72
- <Box as="svg" {...props} viewBox="0 0 30 30" fill="none">
73
- <path
74
- fillRule="evenodd"
75
- clipRule="evenodd"
76
- d="M23.547 4.18A1.695 1.695 0 0 1 26 5.696v18.608c0 1.26-1.326 2.08-2.453 1.516L6 17.047V25a1 1 0 1 1-2 0V5a1 1 0 1 1 2 0v7.952L23.547 4.18ZM6.377 15 24 23.81V6.19l-17.623 8.81Z"
77
- fill="currentColor"
78
- />
79
- </Box>
80
- );