@vygruppen/spor-react 10.3.0 → 10.4.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.
@@ -24,6 +24,7 @@ type PhoneNumberInputProps = Omit<BoxProps, "onChange"> & {
24
24
  onChange?: (change: CountryCodeAndPhoneNumber) => void;
25
25
  /** The optional value of the country code and phone number */
26
26
  value?: CountryCodeAndPhoneNumber;
27
+ variant?: "base" | "floating";
27
28
  };
28
29
  /**
29
30
  * A component for entering phone numbers.
@@ -49,6 +50,7 @@ export const PhoneNumberInput = forwardRef<PhoneNumberInputProps, As>(
49
50
  name,
50
51
  value: externalValue,
51
52
  onChange: externalOnChange,
53
+ variant,
52
54
  ...boxProps
53
55
  },
54
56
  ref,
@@ -73,6 +75,7 @@ export const PhoneNumberInput = forwardRef<PhoneNumberInputProps, As>(
73
75
  width="6.25rem"
74
76
  height="100%"
75
77
  value="+47"
78
+ variant={variant}
76
79
  >
77
80
  <Item key="+47">+47</Item>
78
81
  </InfoSelect>
@@ -89,6 +92,7 @@ export const PhoneNumberInput = forwardRef<PhoneNumberInputProps, As>(
89
92
  name={name ? `${name}-country-code` : "country-code"}
90
93
  height="100%"
91
94
  width="6.25rem"
95
+ variant={variant}
92
96
  />
93
97
  </Suspense>
94
98
  <Input
@@ -107,6 +111,7 @@ export const PhoneNumberInput = forwardRef<PhoneNumberInputProps, As>(
107
111
  }}
108
112
  position="relative"
109
113
  left="1px" // Makes the borders overlap
114
+ variant={variant}
110
115
  />
111
116
  </AttachedInputs>
112
117
  );
@@ -1,4 +1,5 @@
1
1
  import {
2
+ As,
2
3
  Switch as ChakraSwitch,
3
4
  SwitchProps as ChakraSwitchProps,
4
5
  forwardRef,
@@ -7,6 +8,7 @@ import React from "react";
7
8
 
8
9
  export type SwitchProps = Omit<ChakraSwitchProps, "colorScheme" | "variant"> & {
9
10
  size?: "sm" | "md" | "lg";
11
+ as?: As;
10
12
  };
11
13
 
12
14
  /**
@@ -31,7 +33,7 @@ export type SwitchProps = Omit<ChakraSwitchProps, "colorScheme" | "variant"> & {
31
33
  * ```
32
34
  */
33
35
  export const Switch = forwardRef<SwitchProps, "input">(
34
- ({ size = "md", ...props }: SwitchProps, ref) => {
35
- return <ChakraSwitch size={size} {...props} ref={ref} />;
36
+ ({ size = "md", as = "div", ...props }: SwitchProps, ref) => {
37
+ return <ChakraSwitch as={as} size={size} {...props} ref={ref} />;
36
38
  },
37
39
  );
@@ -1,5 +1,4 @@
1
1
  import {
2
- Box,
3
2
  FormLabel,
4
3
  forwardRef,
5
4
  Textarea as ChakraTextarea,
@@ -9,7 +8,7 @@ import {
9
8
  } from "@chakra-ui/react";
10
9
  import React, { useId } from "react";
11
10
 
12
- export type TextareaProps = Exclude<ChakraTextareaProps, "variant" | "size"> & {
11
+ export type TextareaProps = Exclude<ChakraTextareaProps, "size"> & {
13
12
  label?: string;
14
13
  };
15
14
  /**
@@ -4,7 +4,7 @@ import { mode } from "@chakra-ui/theme-tools";
4
4
  import { baseBackground, baseBorder, baseText } from "../utils/base-utils";
5
5
  import { floatingBackground, floatingBorder } from "../utils/floating-utils";
6
6
  import { focusVisibleStyles } from "../utils/focus-utils";
7
- import { ghostBackground } from "../utils/ghost-utils";
7
+ import { ghostBackground, ghostText } from "../utils/ghost-utils";
8
8
 
9
9
  const parts = anatomy("card-select").parts("trigger", "card");
10
10
 
@@ -20,6 +20,7 @@ const config = helpers.defineMultiStyleConfig({
20
20
  label: {
21
21
  position: "relative",
22
22
  fontSize: ["mobile.xs", "desktop.sm"],
23
+ marginTop: props.hasChosenValue ? 2 : 0,
23
24
  ...(props.isLabelSrOnly ? srOnly : {}),
24
25
  },
25
26
  innerButton: {
@@ -1,101 +1,22 @@
1
1
  import { inputAnatomy as parts } from "@chakra-ui/anatomy";
2
2
  import { createMultiStyleConfigHelpers } from "@chakra-ui/react";
3
- import { baseBackground, baseBorder, baseText } from "../utils/base-utils";
4
- import { focusVisibleStyles } from "../utils/focus-utils";
5
- import { surface } from "../utils/surface-utils";
6
- import { floatingBackground, floatingBorder } from "../utils/floating-utils";
3
+ import { inputBaseStyle, inputVariant } from "../utils/input-utils";
7
4
 
8
5
  const helpers = createMultiStyleConfigHelpers(parts.keys);
9
6
 
10
7
  const config = helpers.defineMultiStyleConfig({
11
8
  baseStyle: (props) => ({
12
- field: {
13
- appearance: "none",
14
- width: "100%",
15
- outline: "none",
16
- border: 0,
17
- borderRadius: "sm",
18
- transitionProperty: "common",
19
- transitionDuration: "fast",
20
- position: "relative",
21
- paddingX: 3,
22
- height: 8,
23
- fontSize: "mobile.md",
24
- _hover: {
25
- ...baseBorder("hover", props),
26
- },
27
- _active: {
28
- ...baseBackground("active", props),
29
- ...baseBorder("default", props),
30
- },
31
- _focusVisible: {
32
- ...focusVisibleStyles(props)._focusVisible,
33
- outlineOffset: 0,
34
- },
35
-
36
- _disabled: {
37
- ...surface("disabled", props),
38
- ...baseBorder("disabled", props),
39
- pointerEvents: "none",
40
- },
41
- _invalid: {
42
- ...baseBorder("invalid", props),
43
- _hover: {
44
- ...baseBorder("hover", props),
45
- },
46
- },
47
- " + label": {
48
- fontSize: ["mobile.sm", "desktop.sm"],
49
- top: "2px",
50
- left: props.paddingLeft || props.pl || 3,
51
- zIndex: 2,
52
- position: "absolute",
53
- marginY: 2,
54
- transition: ".1s ease-out",
55
- transformOrigin: "top left",
56
- cursor: "text",
57
- },
58
- "&:not(:placeholder-shown)": {
59
- paddingTop: "1rem",
60
- "& + label": {
61
- transform: "scale(0.825) translateY(-10px)",
62
- },
63
- },
64
- },
65
- element: {
66
- height: "100%",
67
- },
68
- group: {
69
- ":has(:disabled)": {
70
- ...baseText("disabled", props),
71
- },
72
- },
9
+ ...inputBaseStyle(props),
73
10
  }),
74
11
  variants: {
75
12
  base: (props) => ({
76
13
  field: {
77
- ...baseBackground("default", props),
78
- ...baseBorder("default", props),
14
+ ...inputVariant("base", props),
79
15
  },
80
16
  }),
81
17
  floating: (props) => ({
82
18
  field: {
83
- boxShadow: "sm",
84
- ...floatingBackground("default", props),
85
- ...floatingBorder("default", props),
86
-
87
- _hover: {
88
- ...floatingBorder("hover", props),
89
- ...floatingBackground("hover", props),
90
- },
91
- _active: {
92
- ...floatingBorder("active", props),
93
- ...floatingBackground("active", props),
94
- },
95
- _selected: {
96
- ...floatingBorder("selected", props),
97
- ...floatingBackground("selected", props),
98
- },
19
+ ...inputVariant("floating", props),
99
20
  },
100
21
  }),
101
22
  },
@@ -1,10 +1,10 @@
1
1
  import { anatomy } from "@chakra-ui/anatomy";
2
2
  import { createMultiStyleConfigHelpers } from "@chakra-ui/react";
3
- import { mode } from "@chakra-ui/theme-tools";
4
3
  import { baseBorder } from "../utils/base-utils";
5
4
  import { ghostBackground, ghostText } from "../utils/ghost-utils";
6
5
  import { surface } from "../utils/surface-utils";
7
6
  import { outlineBorder } from "../utils/outline-utils";
7
+ import { floatingBorder } from "../utils/floating-utils";
8
8
 
9
9
  const parts = anatomy("ListBox").parts(
10
10
  "container",
@@ -25,7 +25,6 @@ const config = helpers.defineMultiStyleConfig({
25
25
  width: "100%",
26
26
  listStyle: "none",
27
27
  borderBottomRadius: "sm",
28
- ...baseBorder("default", props),
29
28
  },
30
29
  item: {
31
30
  paddingX: 2,
@@ -58,6 +57,21 @@ const config = helpers.defineMultiStyleConfig({
58
57
  },
59
58
  },
60
59
  }),
60
+ variants: {
61
+ base: (props) => ({
62
+ container: {
63
+ ...baseBorder("default", props),
64
+ },
65
+ }),
66
+ floating: (props) => ({
67
+ container: {
68
+ ...floatingBorder("default", props),
69
+ },
70
+ }),
71
+ },
72
+ defaultProps: {
73
+ variant: "base",
74
+ },
61
75
  });
62
76
 
63
77
  export default config;
@@ -2,6 +2,7 @@ import { selectAnatomy } from "@chakra-ui/anatomy";
2
2
  import { createMultiStyleConfigHelpers } from "@chakra-ui/react";
3
3
  import { baseText } from "../utils/base-utils";
4
4
  import { default as Input } from "./input";
5
+ import { inputBaseStyle, inputVariant } from "../utils/input-utils";
5
6
 
6
7
  const parts = selectAnatomy.extend("root");
7
8
 
@@ -15,7 +16,7 @@ const config = helpers.defineMultiStyleConfig({
15
16
  position: "relative",
16
17
  "& + label": {
17
18
  fontSize: ["mobile.sm", "desktop.sm"],
18
- top: "2px",
19
+ top: "0.2rem",
19
20
  left: 3,
20
21
  zIndex: 2,
21
22
  position: "absolute",
@@ -28,10 +29,9 @@ const config = helpers.defineMultiStyleConfig({
28
29
  },
29
30
  },
30
31
  field: {
31
- ...Input.baseStyle!(props).field,
32
+ ...inputBaseStyle(props).field,
32
33
  appearance: "none",
33
34
  paddingTop: "1rem",
34
- "option, optgroup": {},
35
35
  },
36
36
  icon: {
37
37
  width: 5,
@@ -46,6 +46,21 @@ const config = helpers.defineMultiStyleConfig({
46
46
  },
47
47
  },
48
48
  }),
49
+ variants: {
50
+ base: (props) => ({
51
+ field: {
52
+ ...inputVariant("base", props),
53
+ },
54
+ }),
55
+ floating: (props) => ({
56
+ field: {
57
+ ...inputVariant("floating", props),
58
+ },
59
+ }),
60
+ },
61
+ defaultProps: {
62
+ variant: "base",
63
+ },
49
64
  });
50
65
 
51
66
  export default config;
@@ -1,9 +1,9 @@
1
1
  import { defineStyleConfig } from "@chakra-ui/react";
2
- import Input from "./input";
2
+ import { inputBaseStyle, inputVariant } from "../utils/input-utils";
3
3
 
4
4
  const config = defineStyleConfig({
5
5
  baseStyle: (props) => ({
6
- ...Input.baseStyle!(props).field,
6
+ ...inputBaseStyle(props).field,
7
7
  minHeight: "5rem",
8
8
  verticalAlign: "top",
9
9
  appearance: "none",
@@ -17,6 +17,17 @@ const config = defineStyleConfig({
17
17
  },
18
18
  },
19
19
  }),
20
+ variants: {
21
+ base: (props) => ({
22
+ ...inputVariant("base", props),
23
+ }),
24
+ floating: (props) => ({
25
+ ...inputVariant("floating", props),
26
+ }),
27
+ },
28
+ defaultProps: {
29
+ variant: "base",
30
+ },
20
31
  });
21
32
 
22
33
  export default config;
@@ -241,8 +241,7 @@ const getDeviationIconStyle = (props: StyleFunctionProps) => {
241
241
  top: "0",
242
242
  right: "0",
243
243
  transform: "translate(50%, -50%)",
244
- zIndex: "banner",
245
- stroke: "white",
244
+ zIndex: "docked",
246
245
  color:
247
246
  deviationIconColor[
248
247
  props.deviationLevel as keyof typeof deviationIconColor
@@ -252,7 +251,5 @@ const getDeviationIconStyle = (props: StyleFunctionProps) => {
252
251
 
253
252
  const deviationIconColor = {
254
253
  critical: "brightRed",
255
- major: "golden",
256
- minor: "golden",
257
254
  info: "ocean",
258
255
  } as const;
@@ -1,6 +1,6 @@
1
- import { mode } from "@chakra-ui/theme-tools";
1
+ import { mode, StyleFunctionProps } from "@chakra-ui/theme-tools";
2
2
 
3
- export const focusVisibleStyles = (props: any) => ({
3
+ export const focusVisibleStyles = (props: StyleFunctionProps) => ({
4
4
  _focusVisible: {
5
5
  outlineWidth: "2px",
6
6
  outlineColor: mode("outline.focus.light", "outline.focus.dark")(props),
@@ -0,0 +1,119 @@
1
+ import { StyleFunctionProps } from "@chakra-ui/theme-tools";
2
+ import { baseBackground, baseBorder, baseText } from "./base-utils";
3
+ import { floatingBackground, floatingBorder } from "./floating-utils";
4
+ import { InputState } from "./types";
5
+ import { focusVisibleStyles } from "./focus-utils";
6
+ import { surface } from "./surface-utils";
7
+
8
+ export function inputVariant(state: InputState, props: StyleFunctionProps) {
9
+ switch (state) {
10
+ case "base":
11
+ return {
12
+ ...baseBackground("default", props),
13
+ ...baseBorder("default", props),
14
+ _hover: {
15
+ ...baseBorder("hover", props),
16
+ },
17
+ _active: {
18
+ ...baseBackground("active", props),
19
+ ...baseBorder("default", props),
20
+ },
21
+ _selected: {
22
+ ...baseBackground("selected", props),
23
+ ...baseBorder("selected", props),
24
+ },
25
+ };
26
+ case "floating":
27
+ return {
28
+ boxShadow: "sm",
29
+ ...floatingBackground("default", props),
30
+ ...floatingBorder("default", props),
31
+
32
+ _hover: {
33
+ ...floatingBorder("hover", props),
34
+ ...floatingBackground("hover", props),
35
+ },
36
+ _active: {
37
+ ...floatingBorder("active", props),
38
+ ...floatingBackground("active", props),
39
+ },
40
+ _selected: {
41
+ ...floatingBorder("selected", props),
42
+ ...floatingBackground("selected", props),
43
+ },
44
+ };
45
+ case "default":
46
+ default:
47
+ return {
48
+ ...baseBackground("default", props),
49
+ ...baseBorder("default", props),
50
+ _hover: {
51
+ ...baseBorder("hover", props),
52
+ },
53
+ _active: {
54
+ ...baseBackground("active", props),
55
+ ...baseBorder("default", props),
56
+ },
57
+ _selected: {
58
+ ...baseBackground("selected", props),
59
+ ...baseBorder("selected", props),
60
+ },
61
+ };
62
+ }
63
+ }
64
+
65
+ export const inputBaseStyle = (props: StyleFunctionProps) => ({
66
+ field: {
67
+ appearance: "none",
68
+ width: "100%",
69
+ outline: "none",
70
+ border: 0,
71
+ borderRadius: "sm",
72
+ transitionProperty: "common",
73
+ transitionDuration: "fast",
74
+ position: "relative",
75
+ paddingX: 3,
76
+ height: 8,
77
+ fontSize: "mobile.md",
78
+ _focusVisible: {
79
+ ...focusVisibleStyles(props)._focusVisible,
80
+ outlineOffset: 0,
81
+ },
82
+ _disabled: {
83
+ ...surface("disabled", props),
84
+ ...baseBorder("disabled", props),
85
+ pointerEvents: "none",
86
+ },
87
+ _invalid: {
88
+ ...baseBorder("invalid", props),
89
+ _hover: {
90
+ ...baseBorder("hover", props),
91
+ },
92
+ },
93
+ " + label": {
94
+ fontSize: ["mobile.sm", "desktop.sm"],
95
+ top: "2px",
96
+ left: props.paddingLeft || props.pl || 3,
97
+ zIndex: 2,
98
+ position: "absolute",
99
+ marginY: 2,
100
+ transition: ".1s ease-out",
101
+ transformOrigin: "top left",
102
+ cursor: "text",
103
+ },
104
+ "&:not(:placeholder-shown)": {
105
+ paddingTop: "1rem",
106
+ "& + label": {
107
+ transform: "scale(0.825) translateY(-10px)",
108
+ },
109
+ },
110
+ },
111
+ element: {
112
+ height: "100%",
113
+ },
114
+ group: {
115
+ ":has(:disabled)": {
116
+ ...baseText("disabled", props),
117
+ },
118
+ },
119
+ });
@@ -9,5 +9,7 @@ export type State =
9
9
  | "error"
10
10
  | "focus";
11
11
 
12
+ export type InputState = "base" | "floating" | "default";
13
+
12
14
  // Helper type to extract subset of union types
13
15
  export type Subset<T, U extends T> = T extends U ? T : never;