@vygruppen/spor-react 9.9.0 → 9.10.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/dist/index.d.mts CHANGED
@@ -65,13 +65,8 @@ type StackProps = Exclude<StackProps$1, "direction"> & {
65
65
  */
66
66
  declare const Stack: _chakra_ui_system_dist_system_types.ComponentWithAs<"div", StackProps>;
67
67
 
68
- type RadioCardProps = UseRadioProps & BoxProps & {
69
- children: React.ReactNode;
70
- /** Defaults to "base" */
71
- variant: "floating" | "base";
72
- };
73
68
  /**
74
- * Renders a radio card.
69
+ * Radio cards are used to present a set of options where only one option can be selected.
75
70
  *
76
71
  * The most basic version looks like this:
77
72
  *
@@ -81,6 +76,14 @@ type RadioCardProps = UseRadioProps & BoxProps & {
81
76
  * </RadioCard>
82
77
  * ```
83
78
  *
79
+ * In order to use RadioCard outside a RadioCardGroup, you need to pass the `isChecked` and `onChange` props.
80
+ *
81
+ * ```tsx
82
+ * <RadioCard isChecked={true} onChange={(e) => console.log(e.target.value)}>
83
+ * Content
84
+ * </RadioCard>
85
+ * ```
86
+ *
84
87
  * In order to use RadioCard, you typically want to place these components in a group with several other RadioCards.
85
88
  *
86
89
  * ```tsx
@@ -112,6 +115,15 @@ type RadioCardProps = UseRadioProps & BoxProps & {
112
115
  * </RadioCard>
113
116
  * ```
114
117
  */
118
+ type RadioCardProps = UseRadioProps & BoxProps & {
119
+ children: React.ReactNode;
120
+ /** Defaults to "base" */
121
+ variant?: "floating" | "base";
122
+ /** Needs to be defined if RadioCard is used outside RadioCardGroup */
123
+ isChecked?: boolean;
124
+ /** Needs to be defined if RadioCard is used outside RadioCardGroup */
125
+ onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
126
+ };
115
127
  declare const RadioCard: _chakra_ui_system_dist_system_types.ComponentWithAs<"div", RadioCardProps>;
116
128
 
117
129
  type RadioCardGroupProps = RadioGroupProps$1 & {
@@ -5893,105 +5905,168 @@ declare const theme: {
5893
5905
  };
5894
5906
  RadioCard: {
5895
5907
  baseStyle?: ((props: any) => {
5896
- _checked: {
5897
- _hover: {
5898
- backgroundColor: string;
5899
- };
5900
- backgroundColor: string;
5901
- outline: string;
5902
- outlineColor: string;
5903
- };
5904
- _disabled: {
5905
- color: string;
5906
- outlineWidth: string;
5907
- outlineColor: string;
5908
- outlineStyle: string;
5909
- outlineOffset: string;
5910
- backgroundColor: string;
5911
- pointerEvents: string;
5912
- } | {
5913
- color: string;
5914
- outline: string;
5915
- outlineColor: string;
5916
- backgroundColor: string;
5917
- pointerEvents: string;
5918
- };
5919
- _focusVisible: {
5920
- outlineWidth: string;
5921
- outlineColor: string;
5922
- outlineStyle: string;
5923
- outlineOffset: string;
5924
- };
5925
- appearance: string;
5926
- border: string;
5927
- overflow: string;
5928
- fontSize: string;
5929
- display: string;
5930
- borderRadius: string;
5931
- }) | undefined;
5932
- sizes?: {
5933
- [key: string]: _chakra_ui_styled_system.SystemStyleInterpolation;
5934
- } | undefined;
5935
- variants?: {
5936
- base: (props: _chakra_ui_styled_system.StyleFunctionProps) => {
5937
- _hover: {
5908
+ container: {
5909
+ transitionProperty: string;
5910
+ transitionDuration: string;
5911
+ _disabled: {
5912
+ color: string;
5938
5913
  outlineWidth: string;
5939
5914
  outlineColor: string;
5940
5915
  outlineStyle: string;
5941
5916
  outlineOffset: string;
5942
5917
  backgroundColor: string;
5918
+ pointerEvents: string;
5943
5919
  } | {
5920
+ color: string;
5944
5921
  outline: string;
5945
5922
  outlineColor: string;
5946
5923
  backgroundColor: string;
5924
+ pointerEvents: string;
5947
5925
  };
5948
- _active: {
5949
- backgroundColor: string;
5926
+ _focusVisible: {
5927
+ outlineWidth: string;
5928
+ outlineColor: string;
5929
+ outlineStyle: string;
5930
+ outlineOffset: string;
5950
5931
  };
5951
- outlineWidth: string;
5952
- outlineColor: string;
5953
- outlineStyle: string;
5954
- outlineOffset: string;
5932
+ appearance: string;
5933
+ border: string;
5934
+ overflow: string;
5935
+ fontSize: string;
5936
+ display: string;
5937
+ cursor: string;
5938
+ borderRadius: string;
5939
+ };
5940
+ checked: {
5955
5941
  backgroundColor: string;
5956
- } | {
5957
- _hover: {
5942
+ outlineColor: string;
5943
+ outline: string;
5944
+ };
5945
+ radioInput: {
5946
+ appearance: string;
5947
+ position: string;
5948
+ opacity: number;
5949
+ zIndex: number;
5950
+ };
5951
+ }) | undefined;
5952
+ sizes?: {
5953
+ [key: string]: _chakra_ui_styled_system.PartsStyleInterpolation<{
5954
+ keys: ("container" | "checked" | "radioInput")[];
5955
+ }>;
5956
+ } | undefined;
5957
+ variants?: {
5958
+ base: (props: _chakra_ui_styled_system.StyleFunctionProps) => {
5959
+ container: {
5960
+ _hover: {
5961
+ outlineWidth: string;
5962
+ outlineColor: string;
5963
+ outlineStyle: string;
5964
+ outlineOffset: string;
5965
+ backgroundColor: string;
5966
+ } | {
5967
+ outline: string;
5968
+ outlineColor: string;
5969
+ backgroundColor: string;
5970
+ };
5971
+ _active: {
5972
+ outlineWidth: string;
5973
+ outlineColor: string;
5974
+ outlineStyle: string;
5975
+ outlineOffset: string;
5976
+ backgroundColor: string;
5977
+ } | {
5978
+ outline: string;
5979
+ outlineColor: string;
5980
+ backgroundColor: string;
5981
+ };
5958
5982
  outlineWidth: string;
5959
5983
  outlineColor: string;
5960
5984
  outlineStyle: string;
5961
5985
  outlineOffset: string;
5962
5986
  backgroundColor: string;
5987
+ color: string;
5963
5988
  } | {
5989
+ _hover: {
5990
+ outlineWidth: string;
5991
+ outlineColor: string;
5992
+ outlineStyle: string;
5993
+ outlineOffset: string;
5994
+ backgroundColor: string;
5995
+ } | {
5996
+ outline: string;
5997
+ outlineColor: string;
5998
+ backgroundColor: string;
5999
+ };
6000
+ _active: {
6001
+ outlineWidth: string;
6002
+ outlineColor: string;
6003
+ outlineStyle: string;
6004
+ outlineOffset: string;
6005
+ backgroundColor: string;
6006
+ } | {
6007
+ outline: string;
6008
+ outlineColor: string;
6009
+ backgroundColor: string;
6010
+ };
5964
6011
  outline: string;
5965
6012
  outlineColor: string;
5966
6013
  backgroundColor: string;
6014
+ color: string;
5967
6015
  };
5968
- _active: {
5969
- backgroundColor: string;
6016
+ checked: {
6017
+ _hover: {
6018
+ outlineWidth: string;
6019
+ outlineColor: string;
6020
+ outlineStyle: string;
6021
+ outlineOffset: string;
6022
+ } | {
6023
+ outline: string;
6024
+ outlineColor: string;
6025
+ };
6026
+ _active: {
6027
+ outlineWidth: string;
6028
+ outlineColor: string;
6029
+ outlineStyle: string;
6030
+ outlineOffset: string;
6031
+ backgroundColor: string;
6032
+ } | {
6033
+ outline: string;
6034
+ outlineColor: string;
6035
+ backgroundColor: string;
6036
+ };
5970
6037
  };
5971
- outline: string;
5972
- outlineColor: string;
5973
- backgroundColor: string;
5974
6038
  };
5975
6039
  floating: (props: _chakra_ui_styled_system.StyleFunctionProps) => {
5976
- boxShadow: string;
5977
- _hover: {
6040
+ container: {
5978
6041
  boxShadow: string;
6042
+ _hover: {
6043
+ boxShadow: string;
6044
+ outline: string;
6045
+ outlineColor: string;
6046
+ backgroundColor: string;
6047
+ };
6048
+ _active: {
6049
+ outline: string;
6050
+ outlineColor: string;
6051
+ backgroundColor: string;
6052
+ };
5979
6053
  outline: string;
5980
6054
  outlineColor: string;
5981
6055
  backgroundColor: string;
6056
+ color: string;
5982
6057
  };
5983
- _active: {
5984
- outline: string;
5985
- outlineColor: string;
5986
- backgroundColor: string;
5987
- };
5988
- _checked: {
6058
+ checked: {
6059
+ cursor: string;
5989
6060
  _hover: {
5990
6061
  outline: string;
5991
6062
  outlineColor: string;
5992
6063
  };
6064
+ _active: {
6065
+ outline: string;
6066
+ outlineColor: string;
6067
+ backgroundColor: string;
6068
+ };
5993
6069
  };
5994
- backgroundColor: string;
5995
6070
  };
5996
6071
  } | undefined;
5997
6072
  defaultProps?: {
@@ -5999,6 +6074,7 @@ declare const theme: {
5999
6074
  variant?: "base" | "floating" | undefined;
6000
6075
  colorScheme?: string | undefined;
6001
6076
  } | undefined;
6077
+ parts: ("container" | "checked" | "radioInput")[];
6002
6078
  };
6003
6079
  Radio: {
6004
6080
  baseStyle?: ((props: _chakra_ui_styled_system.StyleFunctionProps) => {
@@ -7304,6 +7380,7 @@ declare const theme: {
7304
7380
  outlineColor: string;
7305
7381
  outlineStyle: string;
7306
7382
  outlineOffset: string;
7383
+ cursor: string;
7307
7384
  } | {
7308
7385
  _hover: {
7309
7386
  outlineWidth: string;
@@ -7327,6 +7404,7 @@ declare const theme: {
7327
7404
  };
7328
7405
  outline: string;
7329
7406
  outlineColor: string;
7407
+ cursor: string;
7330
7408
  };
7331
7409
  accent: (props: _chakra_ui_styled_system.StyleFunctionProps) => {
7332
7410
  boxShadow: string;
@@ -7351,7 +7429,11 @@ declare const theme: {
7351
7429
  _active: {
7352
7430
  boxShadow: string;
7353
7431
  backgroundColor: string;
7432
+ outline: string;
7433
+ outlineColor: string;
7354
7434
  };
7435
+ outline: string;
7436
+ outlineColor: string;
7355
7437
  backgroundColor: string;
7356
7438
  };
7357
7439
  } | undefined;
package/dist/index.d.ts CHANGED
@@ -65,13 +65,8 @@ type StackProps = Exclude<StackProps$1, "direction"> & {
65
65
  */
66
66
  declare const Stack: _chakra_ui_system_dist_system_types.ComponentWithAs<"div", StackProps>;
67
67
 
68
- type RadioCardProps = UseRadioProps & BoxProps & {
69
- children: React.ReactNode;
70
- /** Defaults to "base" */
71
- variant: "floating" | "base";
72
- };
73
68
  /**
74
- * Renders a radio card.
69
+ * Radio cards are used to present a set of options where only one option can be selected.
75
70
  *
76
71
  * The most basic version looks like this:
77
72
  *
@@ -81,6 +76,14 @@ type RadioCardProps = UseRadioProps & BoxProps & {
81
76
  * </RadioCard>
82
77
  * ```
83
78
  *
79
+ * In order to use RadioCard outside a RadioCardGroup, you need to pass the `isChecked` and `onChange` props.
80
+ *
81
+ * ```tsx
82
+ * <RadioCard isChecked={true} onChange={(e) => console.log(e.target.value)}>
83
+ * Content
84
+ * </RadioCard>
85
+ * ```
86
+ *
84
87
  * In order to use RadioCard, you typically want to place these components in a group with several other RadioCards.
85
88
  *
86
89
  * ```tsx
@@ -112,6 +115,15 @@ type RadioCardProps = UseRadioProps & BoxProps & {
112
115
  * </RadioCard>
113
116
  * ```
114
117
  */
118
+ type RadioCardProps = UseRadioProps & BoxProps & {
119
+ children: React.ReactNode;
120
+ /** Defaults to "base" */
121
+ variant?: "floating" | "base";
122
+ /** Needs to be defined if RadioCard is used outside RadioCardGroup */
123
+ isChecked?: boolean;
124
+ /** Needs to be defined if RadioCard is used outside RadioCardGroup */
125
+ onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
126
+ };
115
127
  declare const RadioCard: _chakra_ui_system_dist_system_types.ComponentWithAs<"div", RadioCardProps>;
116
128
 
117
129
  type RadioCardGroupProps = RadioGroupProps$1 & {
@@ -5893,105 +5905,168 @@ declare const theme: {
5893
5905
  };
5894
5906
  RadioCard: {
5895
5907
  baseStyle?: ((props: any) => {
5896
- _checked: {
5897
- _hover: {
5898
- backgroundColor: string;
5899
- };
5900
- backgroundColor: string;
5901
- outline: string;
5902
- outlineColor: string;
5903
- };
5904
- _disabled: {
5905
- color: string;
5906
- outlineWidth: string;
5907
- outlineColor: string;
5908
- outlineStyle: string;
5909
- outlineOffset: string;
5910
- backgroundColor: string;
5911
- pointerEvents: string;
5912
- } | {
5913
- color: string;
5914
- outline: string;
5915
- outlineColor: string;
5916
- backgroundColor: string;
5917
- pointerEvents: string;
5918
- };
5919
- _focusVisible: {
5920
- outlineWidth: string;
5921
- outlineColor: string;
5922
- outlineStyle: string;
5923
- outlineOffset: string;
5924
- };
5925
- appearance: string;
5926
- border: string;
5927
- overflow: string;
5928
- fontSize: string;
5929
- display: string;
5930
- borderRadius: string;
5931
- }) | undefined;
5932
- sizes?: {
5933
- [key: string]: _chakra_ui_styled_system.SystemStyleInterpolation;
5934
- } | undefined;
5935
- variants?: {
5936
- base: (props: _chakra_ui_styled_system.StyleFunctionProps) => {
5937
- _hover: {
5908
+ container: {
5909
+ transitionProperty: string;
5910
+ transitionDuration: string;
5911
+ _disabled: {
5912
+ color: string;
5938
5913
  outlineWidth: string;
5939
5914
  outlineColor: string;
5940
5915
  outlineStyle: string;
5941
5916
  outlineOffset: string;
5942
5917
  backgroundColor: string;
5918
+ pointerEvents: string;
5943
5919
  } | {
5920
+ color: string;
5944
5921
  outline: string;
5945
5922
  outlineColor: string;
5946
5923
  backgroundColor: string;
5924
+ pointerEvents: string;
5947
5925
  };
5948
- _active: {
5949
- backgroundColor: string;
5926
+ _focusVisible: {
5927
+ outlineWidth: string;
5928
+ outlineColor: string;
5929
+ outlineStyle: string;
5930
+ outlineOffset: string;
5950
5931
  };
5951
- outlineWidth: string;
5952
- outlineColor: string;
5953
- outlineStyle: string;
5954
- outlineOffset: string;
5932
+ appearance: string;
5933
+ border: string;
5934
+ overflow: string;
5935
+ fontSize: string;
5936
+ display: string;
5937
+ cursor: string;
5938
+ borderRadius: string;
5939
+ };
5940
+ checked: {
5955
5941
  backgroundColor: string;
5956
- } | {
5957
- _hover: {
5942
+ outlineColor: string;
5943
+ outline: string;
5944
+ };
5945
+ radioInput: {
5946
+ appearance: string;
5947
+ position: string;
5948
+ opacity: number;
5949
+ zIndex: number;
5950
+ };
5951
+ }) | undefined;
5952
+ sizes?: {
5953
+ [key: string]: _chakra_ui_styled_system.PartsStyleInterpolation<{
5954
+ keys: ("container" | "checked" | "radioInput")[];
5955
+ }>;
5956
+ } | undefined;
5957
+ variants?: {
5958
+ base: (props: _chakra_ui_styled_system.StyleFunctionProps) => {
5959
+ container: {
5960
+ _hover: {
5961
+ outlineWidth: string;
5962
+ outlineColor: string;
5963
+ outlineStyle: string;
5964
+ outlineOffset: string;
5965
+ backgroundColor: string;
5966
+ } | {
5967
+ outline: string;
5968
+ outlineColor: string;
5969
+ backgroundColor: string;
5970
+ };
5971
+ _active: {
5972
+ outlineWidth: string;
5973
+ outlineColor: string;
5974
+ outlineStyle: string;
5975
+ outlineOffset: string;
5976
+ backgroundColor: string;
5977
+ } | {
5978
+ outline: string;
5979
+ outlineColor: string;
5980
+ backgroundColor: string;
5981
+ };
5958
5982
  outlineWidth: string;
5959
5983
  outlineColor: string;
5960
5984
  outlineStyle: string;
5961
5985
  outlineOffset: string;
5962
5986
  backgroundColor: string;
5987
+ color: string;
5963
5988
  } | {
5989
+ _hover: {
5990
+ outlineWidth: string;
5991
+ outlineColor: string;
5992
+ outlineStyle: string;
5993
+ outlineOffset: string;
5994
+ backgroundColor: string;
5995
+ } | {
5996
+ outline: string;
5997
+ outlineColor: string;
5998
+ backgroundColor: string;
5999
+ };
6000
+ _active: {
6001
+ outlineWidth: string;
6002
+ outlineColor: string;
6003
+ outlineStyle: string;
6004
+ outlineOffset: string;
6005
+ backgroundColor: string;
6006
+ } | {
6007
+ outline: string;
6008
+ outlineColor: string;
6009
+ backgroundColor: string;
6010
+ };
5964
6011
  outline: string;
5965
6012
  outlineColor: string;
5966
6013
  backgroundColor: string;
6014
+ color: string;
5967
6015
  };
5968
- _active: {
5969
- backgroundColor: string;
6016
+ checked: {
6017
+ _hover: {
6018
+ outlineWidth: string;
6019
+ outlineColor: string;
6020
+ outlineStyle: string;
6021
+ outlineOffset: string;
6022
+ } | {
6023
+ outline: string;
6024
+ outlineColor: string;
6025
+ };
6026
+ _active: {
6027
+ outlineWidth: string;
6028
+ outlineColor: string;
6029
+ outlineStyle: string;
6030
+ outlineOffset: string;
6031
+ backgroundColor: string;
6032
+ } | {
6033
+ outline: string;
6034
+ outlineColor: string;
6035
+ backgroundColor: string;
6036
+ };
5970
6037
  };
5971
- outline: string;
5972
- outlineColor: string;
5973
- backgroundColor: string;
5974
6038
  };
5975
6039
  floating: (props: _chakra_ui_styled_system.StyleFunctionProps) => {
5976
- boxShadow: string;
5977
- _hover: {
6040
+ container: {
5978
6041
  boxShadow: string;
6042
+ _hover: {
6043
+ boxShadow: string;
6044
+ outline: string;
6045
+ outlineColor: string;
6046
+ backgroundColor: string;
6047
+ };
6048
+ _active: {
6049
+ outline: string;
6050
+ outlineColor: string;
6051
+ backgroundColor: string;
6052
+ };
5979
6053
  outline: string;
5980
6054
  outlineColor: string;
5981
6055
  backgroundColor: string;
6056
+ color: string;
5982
6057
  };
5983
- _active: {
5984
- outline: string;
5985
- outlineColor: string;
5986
- backgroundColor: string;
5987
- };
5988
- _checked: {
6058
+ checked: {
6059
+ cursor: string;
5989
6060
  _hover: {
5990
6061
  outline: string;
5991
6062
  outlineColor: string;
5992
6063
  };
6064
+ _active: {
6065
+ outline: string;
6066
+ outlineColor: string;
6067
+ backgroundColor: string;
6068
+ };
5993
6069
  };
5994
- backgroundColor: string;
5995
6070
  };
5996
6071
  } | undefined;
5997
6072
  defaultProps?: {
@@ -5999,6 +6074,7 @@ declare const theme: {
5999
6074
  variant?: "base" | "floating" | undefined;
6000
6075
  colorScheme?: string | undefined;
6001
6076
  } | undefined;
6077
+ parts: ("container" | "checked" | "radioInput")[];
6002
6078
  };
6003
6079
  Radio: {
6004
6080
  baseStyle?: ((props: _chakra_ui_styled_system.StyleFunctionProps) => {
@@ -7304,6 +7380,7 @@ declare const theme: {
7304
7380
  outlineColor: string;
7305
7381
  outlineStyle: string;
7306
7382
  outlineOffset: string;
7383
+ cursor: string;
7307
7384
  } | {
7308
7385
  _hover: {
7309
7386
  outlineWidth: string;
@@ -7327,6 +7404,7 @@ declare const theme: {
7327
7404
  };
7328
7405
  outline: string;
7329
7406
  outlineColor: string;
7407
+ cursor: string;
7330
7408
  };
7331
7409
  accent: (props: _chakra_ui_styled_system.StyleFunctionProps) => {
7332
7410
  boxShadow: string;
@@ -7351,7 +7429,11 @@ declare const theme: {
7351
7429
  _active: {
7352
7430
  boxShadow: string;
7353
7431
  backgroundColor: string;
7432
+ outline: string;
7433
+ outlineColor: string;
7354
7434
  };
7435
+ outline: string;
7436
+ outlineColor: string;
7355
7437
  backgroundColor: string;
7356
7438
  };
7357
7439
  } | undefined;