@vygruppen/spor-react 9.9.0 → 9.10.1

package/dist/index.d.ts

@@ -65,13 +65,8 @@ type StackProps = Exclude<StackProps$1, "direction"> & {
  */
 declare const Stack: _chakra_ui_system_dist_system_types.ComponentWithAs<"div", StackProps>;
 
-type RadioCardProps = UseRadioProps & BoxProps & {
-    children: React.ReactNode;
-    /** Defaults to "base" */
-    variant: "floating" | "base";
-};
 /**
- * Renders a radio card.
+ * Radio cards are used to present a set of options where only one option can be selected.
  *
  * The most basic version looks like this:
  *
@@ -81,6 +76,14 @@ type RadioCardProps = UseRadioProps & BoxProps & {
  * </RadioCard>
  * ```
  *
+ * In order to use RadioCard outside a RadioCardGroup, you need to pass the `isChecked` and `onChange` props.
+ *
+ * ```tsx
+ * <RadioCard isChecked={true} onChange={(e) => console.log(e.target.value)}>
+ *  Content
+ * </RadioCard>
+ * ```
+ *
  * In order to use RadioCard, you typically want to place these components in a group with several other RadioCards.
  *
  * ```tsx
@@ -112,6 +115,15 @@ type RadioCardProps = UseRadioProps & BoxProps & {
  * </RadioCard>
  * ```
  */
+type RadioCardProps = UseRadioProps & BoxProps & {
+    children: React.ReactNode;
+    /** Defaults to "base" */
+    variant?: "floating" | "base";
+    /** Needs to be defined if RadioCard is used outside RadioCardGroup */
+    isChecked?: boolean;
+    /** Needs to be defined if RadioCard is used outside RadioCardGroup */
+    onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
+};
 declare const RadioCard: _chakra_ui_system_dist_system_types.ComponentWithAs<"div", RadioCardProps>;
 
 type RadioCardGroupProps = RadioGroupProps$1 & {
@@ -5463,31 +5475,40 @@ declare const theme: {
                 };
             }) | undefined;
             sizes?: {
-                sm: {
+                sm: (props: _chakra_ui_styled_system.StyleFunctionProps) => {
                     container: {
                         fontSize: number;
+                        width: string | undefined;
+                        height: string | undefined;
                     };
                 };
-                lg: {
+                lg: (props: _chakra_ui_styled_system.StyleFunctionProps) => {
                     container: {
                         fontSize: number;
+                        width: string | undefined;
+                        height: string | undefined;
                     };
                 };
             } | undefined;
             variants?: {
                 play: (props: _chakra_ui_styled_system.StyleFunctionProps) => {
                     container: {
-                        padding: number;
                         _hover: {
+                            backgroundColor: string;
                             color: string;
                         };
                         _active: {
+                            backgroundColor: string;
                             color: string;
                         };
                         _disabled: {
+                            backgroundColor: string;
                             pointerEvents: string;
                             color: string;
                         };
+                        backgroundColor: string;
+                        color: string;
+                        padding: number;
                     };
                 };
                 jumpSkip: (props: _chakra_ui_styled_system.StyleFunctionProps) => {
@@ -5893,105 +5914,168 @@ declare const theme: {
         };
         RadioCard: {
             baseStyle?: ((props: any) => {
-                _checked: {
-                    _hover: {
-                        backgroundColor: string;
-                    };
-                    backgroundColor: string;
-                    outline: string;
-                    outlineColor: string;
-                };
-                _disabled: {
-                    color: string;
-                    outlineWidth: string;
-                    outlineColor: string;
-                    outlineStyle: string;
-                    outlineOffset: string;
-                    backgroundColor: string;
-                    pointerEvents: string;
-                } | {
-                    color: string;
-                    outline: string;
-                    outlineColor: string;
-                    backgroundColor: string;
-                    pointerEvents: string;
-                };
-                _focusVisible: {
-                    outlineWidth: string;
-                    outlineColor: string;
-                    outlineStyle: string;
-                    outlineOffset: string;
-                };
-                appearance: string;
-                border: string;
-                overflow: string;
-                fontSize: string;
-                display: string;
-                borderRadius: string;
-            }) | undefined;
-            sizes?: {
-                [key: string]: _chakra_ui_styled_system.SystemStyleInterpolation;
-            } | undefined;
-            variants?: {
-                base: (props: _chakra_ui_styled_system.StyleFunctionProps) => {
-                    _hover: {
+                container: {
+                    transitionProperty: string;
+                    transitionDuration: string;
+                    _disabled: {
+                        color: string;
                         outlineWidth: string;
                         outlineColor: string;
                         outlineStyle: string;
                         outlineOffset: string;
                         backgroundColor: string;
+                        pointerEvents: string;
                     } | {
+                        color: string;
                         outline: string;
                         outlineColor: string;
                         backgroundColor: string;
+                        pointerEvents: string;
                     };
-                    _active: {
-                        backgroundColor: string;
+                    _focusVisible: {
+                        outlineWidth: string;
+                        outlineColor: string;
+                        outlineStyle: string;
+                        outlineOffset: string;
                     };
-                    outlineWidth: string;
-                    outlineColor: string;
-                    outlineStyle: string;
-                    outlineOffset: string;
+                    appearance: string;
+                    border: string;
+                    overflow: string;
+                    fontSize: string;
+                    display: string;
+                    cursor: string;
+                    borderRadius: string;
+                };
+                checked: {
                     backgroundColor: string;
-                } | {
-                    _hover: {
+                    outlineColor: string;
+                    outline: string;
+                };
+                radioInput: {
+                    appearance: string;
+                    position: string;
+                    opacity: number;
+                    zIndex: number;
+                };
+            }) | undefined;
+            sizes?: {
+                [key: string]: _chakra_ui_styled_system.PartsStyleInterpolation<{
+                    keys: ("container" | "checked" | "radioInput")[];
+                }>;
+            } | undefined;
+            variants?: {
+                base: (props: _chakra_ui_styled_system.StyleFunctionProps) => {
+                    container: {
+                        _hover: {
+                            outlineWidth: string;
+                            outlineColor: string;
+                            outlineStyle: string;
+                            outlineOffset: string;
+                            backgroundColor: string;
+                        } | {
+                            outline: string;
+                            outlineColor: string;
+                            backgroundColor: string;
+                        };
+                        _active: {
+                            outlineWidth: string;
+                            outlineColor: string;
+                            outlineStyle: string;
+                            outlineOffset: string;
+                            backgroundColor: string;
+                        } | {
+                            outline: string;
+                            outlineColor: string;
+                            backgroundColor: string;
+                        };
                         outlineWidth: string;
                         outlineColor: string;
                         outlineStyle: string;
                         outlineOffset: string;
                         backgroundColor: string;
+                        color: string;
                     } | {
+                        _hover: {
+                            outlineWidth: string;
+                            outlineColor: string;
+                            outlineStyle: string;
+                            outlineOffset: string;
+                            backgroundColor: string;
+                        } | {
+                            outline: string;
+                            outlineColor: string;
+                            backgroundColor: string;
+                        };
+                        _active: {
+                            outlineWidth: string;
+                            outlineColor: string;
+                            outlineStyle: string;
+                            outlineOffset: string;
+                            backgroundColor: string;
+                        } | {
+                            outline: string;
+                            outlineColor: string;
+                            backgroundColor: string;
+                        };
                         outline: string;
                         outlineColor: string;
                         backgroundColor: string;
+                        color: string;
                     };
-                    _active: {
-                        backgroundColor: string;
+                    checked: {
+                        _hover: {
+                            outlineWidth: string;
+                            outlineColor: string;
+                            outlineStyle: string;
+                            outlineOffset: string;
+                        } | {
+                            outline: string;
+                            outlineColor: string;
+                        };
+                        _active: {
+                            outlineWidth: string;
+                            outlineColor: string;
+                            outlineStyle: string;
+                            outlineOffset: string;
+                            backgroundColor: string;
+                        } | {
+                            outline: string;
+                            outlineColor: string;
+                            backgroundColor: string;
+                        };
                     };
-                    outline: string;
-                    outlineColor: string;
-                    backgroundColor: string;
                 };
                 floating: (props: _chakra_ui_styled_system.StyleFunctionProps) => {
-                    boxShadow: string;
-                    _hover: {
+                    container: {
                         boxShadow: string;
+                        _hover: {
+                            boxShadow: string;
+                            outline: string;
+                            outlineColor: string;
+                            backgroundColor: string;
+                        };
+                        _active: {
+                            outline: string;
+                            outlineColor: string;
+                            backgroundColor: string;
+                        };
                         outline: string;
                         outlineColor: string;
                         backgroundColor: string;
+                        color: string;
                     };
-                    _active: {
-                        outline: string;
-                        outlineColor: string;
-                        backgroundColor: string;
-                    };
-                    _checked: {
+                    checked: {
+                        cursor: string;
                         _hover: {
                             outline: string;
                             outlineColor: string;
                         };
+                        _active: {
+                            outline: string;
+                            outlineColor: string;
+                            backgroundColor: string;
+                        };
                     };
-                    backgroundColor: string;
                 };
             } | undefined;
             defaultProps?: {
@@ -5999,6 +6083,7 @@ declare const theme: {
                 variant?: "base" | "floating" | undefined;
                 colorScheme?: string | undefined;
             } | undefined;
+            parts: ("container" | "checked" | "radioInput")[];
         };
         Radio: {
             baseStyle?: ((props: _chakra_ui_styled_system.StyleFunctionProps) => {
@@ -7212,7 +7297,7 @@ declare const theme: {
                 display: string;
                 borderRadius: string;
             } | {
-                backgroundColor: any;
+                backgroundColor: string;
                 _focusVisible: {
                     outlineWidth: string;
                     outlineColor: string;
@@ -7304,6 +7389,7 @@ declare const theme: {
                     outlineColor: string;
                     outlineStyle: string;
                     outlineOffset: string;
+                    cursor: string;
                 } | {
                     _hover: {
                         outlineWidth: string;
@@ -7327,6 +7413,7 @@ declare const theme: {
                     };
                     outline: string;
                     outlineColor: string;
+                    cursor: string;
                 };
                 accent: (props: _chakra_ui_styled_system.StyleFunctionProps) => {
                     boxShadow: string;
@@ -7351,7 +7438,11 @@ declare const theme: {
                     _active: {
                         boxShadow: string;
                         backgroundColor: string;
+                        outline: string;
+                        outlineColor: string;
                     };
+                    outline: string;
+                    outlineColor: string;
                     backgroundColor: string;
                 };
             } | undefined;