@vygruppen/spor-react 10.3.0 → 10.4.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.
- package/.turbo/turbo-build.log +9 -9
- package/CHANGELOG.md +12 -0
- package/dist/{CountryCodeSelect-KCPHU7A7.mjs → CountryCodeSelect-XMQTDWRD.mjs} +2 -1
- package/dist/{chunk-5HRYDWQ5.mjs → chunk-T4CLCBB5.mjs} +184 -93
- package/dist/index.d.mts +577 -107
- package/dist/index.d.ts +577 -107
- package/dist/index.js +199 -102
- package/dist/index.mjs +1 -1
- package/package.json +1 -1
- package/src/input/Combobox.tsx +4 -0
- package/src/input/CountryCodeSelect.tsx +2 -0
- package/src/input/InfoSelect.tsx +5 -3
- package/src/input/ListBox.tsx +4 -1
- package/src/input/PhoneNumberInput.tsx +5 -0
- package/src/input/Switch.tsx +4 -2
- package/src/input/Textarea.tsx +1 -2
- package/src/theme/components/card-select.ts +1 -1
- package/src/theme/components/info-select.ts +1 -0
- package/src/theme/components/input.ts +4 -83
- package/src/theme/components/listbox.ts +16 -2
- package/src/theme/components/select.ts +18 -3
- package/src/theme/components/textarea.ts +13 -2
- package/src/theme/utils/focus-utils.ts +2 -2
- package/src/theme/utils/input-utils.ts +119 -0
- package/src/theme/utils/types.ts +2 -0
package/src/input/Switch.tsx
CHANGED
@@ -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
|
);
|
package/src/input/Textarea.tsx
CHANGED
@@ -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, "
|
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
|
|
@@ -1,101 +1,22 @@
|
|
1
1
|
import { inputAnatomy as parts } from "@chakra-ui/anatomy";
|
2
2
|
import { createMultiStyleConfigHelpers } from "@chakra-ui/react";
|
3
|
-
import {
|
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
|
-
|
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
|
-
...
|
78
|
-
...baseBorder("default", props),
|
14
|
+
...inputVariant("base", props),
|
79
15
|
},
|
80
16
|
}),
|
81
17
|
floating: (props) => ({
|
82
18
|
field: {
|
83
|
-
|
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: "
|
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
|
-
...
|
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
|
2
|
+
import { inputBaseStyle, inputVariant } from "../utils/input-utils";
|
3
3
|
|
4
4
|
const config = defineStyleConfig({
|
5
5
|
baseStyle: (props) => ({
|
6
|
-
...
|
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;
|
@@ -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:
|
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
|
+
});
|
package/src/theme/utils/types.ts
CHANGED