@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.
@@ -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;
@@ -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;