@vygruppen/spor-react 5.3.0 → 5.4.0

package/.turbo/turbo-build.log

@@ -1,5 +1,5 @@
 
-> @vygruppen/spor-react@5.3.0 build
+> @vygruppen/spor-react@5.4.0 build
 > tsup src/index.tsx --dts --treeshake --format cjs,esm
 
 CLI Building entry: src/index.tsx
@@ -8,15 +8,15 @@
 CLI Target: node16
 CJS Build start
 ESM Build start
+"Collapse" is imported from external module "@chakra-ui/react" but never used in "dist/chunk-S2IJI3LY.mjs".
 "Collapse" is imported from external module "@chakra-ui/react" but never used in "dist/index.js".
 DTS Build start
-"Collapse" is imported from external module "@chakra-ui/react" but never used in "dist/chunk-55HLEY3T.mjs".
-CJS dist/index.js 507.32 KB
-CJS ⚡️ Build success in 2031ms
 ESM dist/index.mjs                      2.16 KB
-ESM dist/CountryCodeSelect-BITN7VNA.mjs 1.19 KB
-ESM dist/chunk-55HLEY3T.mjs             397.85 KB
-ESM ⚡️ Build success in 2033ms
-DTS ⚡️ Build success in 12838ms
-DTS dist/index.d.ts  265.02 KB
-DTS dist/index.d.mts 265.02 KB
+ESM dist/CountryCodeSelect-HHNSD6TX.mjs 1.19 KB
+ESM dist/chunk-S2IJI3LY.mjs             397.83 KB
+ESM ⚡️ Build success in 2102ms
+CJS dist/index.js 507.24 KB
+CJS ⚡️ Build success in 2103ms
+DTS ⚡️ Build success in 12028ms
+DTS dist/index.d.ts  265.18 KB
+DTS dist/index.d.mts 265.18 KB

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @vygruppen/spor-react
 
+## 5.4.0
+
+### Minor Changes
+
+- 3781bb2: CardSelect: added dark mode update and new prop for background also changed outline to base and card to float in variants
+
 ## 5.3.0
 
 ### Minor Changes

package/dist/{CountryCodeSelect-BITN7VNA.mjs → CountryCodeSelect-HHNSD6TX.mjs}

@@ -1,4 +1,4 @@
-import { createTexts, useTranslation, InfoSelect, Item } from './chunk-55HLEY3T.mjs';
+import { createTexts, useTranslation, InfoSelect, Item } from './chunk-S2IJI3LY.mjs';
 import React from 'react';
 import { getSupportedCallingCodes } from 'awesome-phonenumber';
 

package/dist/{chunk-55HLEY3T.mjs → chunk-S2IJI3LY.mjs}

@@ -2523,7 +2523,10 @@ var CardSelect = forwardRef(
       triggerRef
     );
     const { buttonProps } = useButton(triggerProps, triggerRef);
-    const styles3 = useMultiStyleConfig("CardSelect", { variant, size: size2 });
+    const styles3 = useMultiStyleConfig("CardSelect", {
+      variant,
+      size: size2
+    });
     useForceRerender(state2.isOpen);
     const ChevronIcon = size2 === "sm" ? DropdownDownFill18Icon : DropdownDownFill24Icon;
     return /* @__PURE__ */ React69__default.createElement(Box, { ...props }, /* @__PURE__ */ React69__default.createElement(
@@ -3423,7 +3426,7 @@ var texts14 = createTexts({
     sv: "Telefonnummer"
   }
 });
-var LazyCountryCodeSelect = React69__default.lazy(() => import('./CountryCodeSelect-BITN7VNA.mjs'));
+var LazyCountryCodeSelect = React69__default.lazy(() => import('./CountryCodeSelect-HHNSD6TX.mjs'));
 var Radio = forwardRef((props, ref) => {
   return /* @__PURE__ */ React69__default.createElement(Radio$1, { ...props, ref });
 });
@@ -10470,6 +10473,92 @@ var getColorSchemeActiveProps = (props) => {
       };
   }
 };
+function baseBackground(state2, props) {
+  switch (state2) {
+    case "active":
+      return {
+        backgroundColor: mode("mint", "whiteAlpha.100")(props)
+      };
+    case "selected":
+      return {
+        backgroundColor: mode("pine", "coralGreen")(props)
+      };
+    case "disabled":
+      return {
+        backgroundColor: mode("silver", "whiteAlpha.100")(props)
+      };
+    default:
+      return {
+        backgroundColor: "transparent"
+      };
+  }
+}
+function ghostBackground(state2, props) {
+  switch (state2) {
+    case "hover": {
+      return {
+        backgroundColor: mode("seaMist", "whiteAlpha.100")(props)
+      };
+    }
+    case "active":
+      return {
+        backgroundColor: mode("seaMist", "whiteAlpha.200")(props)
+      };
+    case "focus":
+      return {
+        backgroundColor: "transparent"
+      };
+    case "selected": {
+      return {
+        backgroundColor: mode("mint", "whiteAlpha.200")(props)
+      };
+    }
+    case "default":
+    default:
+      return {
+        backgroundColor: "transparent"
+      };
+  }
+}
+function floatingBackground(state2, props) {
+  switch (state2) {
+    case "selected":
+      return {
+        backgroundColor: mode("mint", "pine")(props)
+      };
+    case "active":
+      return {
+        backgroundColor: mode(
+          "mint",
+          `color-mix(in srgb, ${props.theme.colors.accent}, ${colors.white} 30%)`
+        )(props)
+      };
+    case "hover":
+      return {
+        backgroundColor: mode(
+          "white",
+          `color-mix(in srgb, ${props.theme.colors.accent}, ${colors.white} 20%)`
+        )(props)
+      };
+    case "focus":
+      return {
+        backgroundColor: mode(
+          "white",
+          `color-mix(in srgb, ${props.theme.colors.accent}, ${colors.white} 40%)`
+        )(props)
+      };
+    case "default":
+    default:
+      return {
+        backgroundColor: mode(
+          "white",
+          `color-mix(in srgb, ${props.theme.colors.accent}, ${colors.white} 10%)`
+        )(props)
+      };
+  }
+}
+
+// src/theme/components/card-select.ts
 var parts2 = anatomy("card-select").parts("trigger", "card");
 var helpers3 = createMultiStyleConfigHelpers(parts2.keys);
 var config8 = helpers3.defineMultiStyleConfig({
@@ -10478,9 +10567,6 @@ var config8 = helpers3.defineMultiStyleConfig({
       appearance: "none",
       display: "flex",
       alignItems: "center",
-      _expanded: {
-        backgroundColor: mode("mint", "night")(props)
-      },
       ...focusVisible({
         notFocus: {},
         focus: {
@@ -10495,21 +10581,12 @@ var config8 = helpers3.defineMultiStyleConfig({
     card: {
       borderRadius: "sm",
       boxShadow: "md",
-      padding: 3
+      padding: 3,
+      color: mode("darkGrey", "white")(props)
     }
   }),
   variants: {
-    ghost: (props) => ({
-      trigger: {
-        _hover: {
-          backgroundColor: mode("seaMist", "pine")(props)
-        },
-        _active: {
-          backgroundColor: mode("mint", "whiteAlpha.200")(props)
-        }
-      }
-    }),
-    outline: (props) => ({
+    base: (props) => ({
       trigger: {
         boxShadow: getBoxShadowString({
           borderColor: mode("blackAlpha.400", "whiteAlpha.400")(props)
@@ -10531,19 +10608,20 @@ var config8 = helpers3.defineMultiStyleConfig({
           })
         },
         _active: {
-          backgroundColor: mode("mint", "whiteAlpha.200")(props),
+          ...baseBackground("active", props),
           boxShadow: getBoxShadowString({
             borderColor: mode("darkGrey", "whiteAlpha.400")(props),
             borderWidth: 1
           })
         },
         _expanded: {
+          ...baseBackground("active", props),
           _hover: {
-            backgroundColor: mode("seaMist", "todo")(props),
+            ...baseBackground("active", props),
             boxShadow: "none"
           },
           _active: {
-            backgroundColor: mode("mint", "todo")(props),
+            ...baseBackground("active", props),
             boxShadow: getBoxShadowString({
               borderColor: mode("blackAlpha.400", "whiteAlpha.400")(props),
               borderWidth: 1
@@ -10552,13 +10630,26 @@ var config8 = helpers3.defineMultiStyleConfig({
         }
       }
     }),
-    card: (props) => ({
+    ghost: (props) => ({
+      trigger: {
+        _hover: {
+          ...ghostBackground("hover", props)
+        },
+        _active: {
+          ...ghostBackground("active", props)
+        },
+        _expanded: {
+          ...ghostBackground("selected", props)
+        }
+      }
+    }),
+    floating: (props) => ({
       trigger: {
-        backgroundColor: mode("transparent", "whiteAlpha.100")(props),
+        ...floatingBackground("default", props),
         boxShadow: "sm",
         transition: "all .1s ease-out",
         _hover: {
-          backgroundColor: mode("seaMist", "pine")(props),
+          ...floatingBackground("hover", props),
           boxShadow: getBoxShadowString({
             borderColor: mode("silver", "whiteAlpha.400")(props),
             borderWidth: 1,
@@ -10566,7 +10657,7 @@ var config8 = helpers3.defineMultiStyleConfig({
           })
         },
         _active: {
-          backgroundColor: mode("mint", "whiteAlpha.100")(props),
+          ...floatingBackground("active", props),
           boxShadow: getBoxShadowString({
             borderColor: mode("silver", "whiteAlpha.400")(props),
             borderWidth: mode(0, 1)(props),
@@ -10574,6 +10665,7 @@ var config8 = helpers3.defineMultiStyleConfig({
           })
         },
         _expanded: {
+          ...floatingBackground("active", props),
           _hover: {
             boxShadow: getBoxShadowString({
               borderColor: "darkGrey",
@@ -10581,7 +10673,7 @@ var config8 = helpers3.defineMultiStyleConfig({
             })
           },
           _active: {
-            backgroundColor: mode("mint", "whiteAlpha.200")(props),
+            ...floatingBackground("active", props),
             boxShadow: "none"
           }
         }
@@ -11615,90 +11707,6 @@ function floatingBorder(state2, props) {
       };
   }
 }
-function baseBackground(state2, props) {
-  switch (state2) {
-    case "active":
-      return {
-        backgroundColor: mode("mint", "whiteAlpha.100")(props)
-      };
-    case "selected":
-      return {
-        backgroundColor: "pine"
-      };
-    case "disabled":
-      return {
-        backgroundColor: mode("silver", "whiteAlpha.100")(props)
-      };
-    default:
-      return {
-        backgroundColor: "transparent"
-      };
-  }
-}
-function ghostBackground(state2, props) {
-  switch (state2) {
-    case "hover": {
-      return {
-        backgroundColor: mode("seaMist", "whiteAlpha.100")(props)
-      };
-    }
-    case "active":
-      return {
-        backgroundColor: mode("seaMist", "whiteAlpha.200")(props)
-      };
-    case "focus":
-      return {
-        backgroundColor: "transparent"
-      };
-    case "selected": {
-      return {
-        backgroundColor: mode("mint", "whiteAlpha.200")(props)
-      };
-    }
-    case "default":
-    default:
-      return {
-        backgroundColor: "transparent"
-      };
-  }
-}
-function floatingBackground(state2, props) {
-  switch (state2) {
-    case "selected":
-      return {
-        backgroundColor: mode("mint", "pine")(props)
-      };
-    case "active":
-      return {
-        backgroundColor: mode(
-          "mint",
-          `color-mix(in srgb, ${props.theme.darkBackgroundColor ?? colors.darkGrey}, ${colors.white} 30%)`
-        )(props)
-      };
-    case "hover":
-      return {
-        backgroundColor: mode(
-          "white",
-          `color-mix(in srgb, ${props.theme.darkBackgroundColor ?? colors.darkGrey}, ${colors.white} 20%)`
-        )(props)
-      };
-    case "focus":
-      return {
-        backgroundColor: mode(
-          "white",
-          `color-mix(in srgb, ${props.theme.darkBackgroundColor ?? colors.darkGrey}, ${colors.white} 40%)`
-        )(props)
-      };
-    case "default":
-    default:
-      return {
-        backgroundColor: mode(
-          "white",
-          `color-mix(in srgb, ${props.theme.darkBackgroundColor ?? colors.darkGrey}, ${colors.white} 10%)`
-        )(props)
-      };
-  }
-}
 
 // src/theme/components/info-select.ts
 var parts6 = anatomy("InfoSelect").parts(

package/dist/index.d.mts

@@ -686,6 +686,7 @@ type CardSelectProps = BoxProps & {
  * ```
  *
  * @see https://spor.vy.no/components/card-select
+ *
  */
 declare const CardSelect: _chakra_ui_system_dist_system_types.ComponentWithAs<"button", CardSelectProps>;
 
@@ -2538,14 +2539,12 @@ declare const theme: {
                     appearance: string;
                     display: string;
                     alignItems: string;
-                    _expanded: {
-                        backgroundColor: string;
-                    };
                 };
                 card: {
                     borderRadius: string;
                     boxShadow: string;
                     padding: number;
+                    color: string;
                 };
             }) | undefined;
             sizes?: {
@@ -2578,34 +2577,25 @@ declare const theme: {
                 };
             } | undefined;
             variants?: {
-                ghost: (props: _chakra_ui_styled_system.StyleFunctionProps) => {
-                    trigger: {
-                        _hover: {
-                            backgroundColor: string;
-                        };
-                        _active: {
-                            backgroundColor: string;
-                        };
-                    };
-                };
-                outline: (props: _chakra_ui_styled_system.StyleFunctionProps) => {
+                base: (props: _chakra_ui_styled_system.StyleFunctionProps) => {
                     trigger: {
                         _hover: {
                             boxShadow: string;
                         };
                         _active: {
-                            backgroundColor: string;
                             boxShadow: string;
+                            backgroundColor: string;
                         };
                         _expanded: {
                             _hover: {
-                                backgroundColor: string;
                                 boxShadow: string;
+                                backgroundColor: string;
                             };
                             _active: {
-                                backgroundColor: string;
                                 boxShadow: string;
+                                backgroundColor: string;
                             };
+                            backgroundColor: string;
                         };
                         _focus: _chakra_ui_styled_system.SystemStyleObject;
                         _focusVisible: _chakra_ui_styled_system.SystemStyleObject;
@@ -2613,34 +2603,48 @@ declare const theme: {
                         boxShadow: string;
                     };
                 };
-                card: (props: _chakra_ui_styled_system.StyleFunctionProps) => {
+                ghost: (props: _chakra_ui_styled_system.StyleFunctionProps) => {
+                    trigger: {
+                        _hover: {
+                            backgroundColor: string;
+                        };
+                        _active: {
+                            backgroundColor: string;
+                        };
+                        _expanded: {
+                            backgroundColor: string;
+                        };
+                    };
+                };
+                floating: (props: _chakra_ui_styled_system.StyleFunctionProps) => {
                     trigger: {
-                        backgroundColor: string;
                         boxShadow: string;
                         transition: string;
                         _hover: {
-                            backgroundColor: string;
                             boxShadow: string;
+                            backgroundColor: string;
                         };
                         _active: {
-                            backgroundColor: string;
                             boxShadow: string;
+                            backgroundColor: string;
                         };
                         _expanded: {
                             _hover: {
                                 boxShadow: string;
                             };
                             _active: {
-                                backgroundColor: string;
                                 boxShadow: string;
+                                backgroundColor: string;
                             };
+                            backgroundColor: string;
                         };
+                        backgroundColor: string;
                     };
                 };
             } | undefined;
             defaultProps?: {
                 size?: "sm" | "md" | "lg" | undefined;
-                variant?: "outline" | "card" | "ghost" | undefined;
+                variant?: "base" | "ghost" | "floating" | undefined;
                 colorScheme?: string | undefined;
             } | undefined;
             parts: ("card" | "trigger")[];

package/dist/index.d.ts

@@ -686,6 +686,7 @@ type CardSelectProps = BoxProps & {
  * ```
  *
  * @see https://spor.vy.no/components/card-select
+ *
  */
 declare const CardSelect: _chakra_ui_system_dist_system_types.ComponentWithAs<"button", CardSelectProps>;
 
@@ -2538,14 +2539,12 @@ declare const theme: {
                     appearance: string;
                     display: string;
                     alignItems: string;
-                    _expanded: {
-                        backgroundColor: string;
-                    };
                 };
                 card: {
                     borderRadius: string;
                     boxShadow: string;
                     padding: number;
+                    color: string;
                 };
             }) | undefined;
             sizes?: {
@@ -2578,34 +2577,25 @@ declare const theme: {
                 };
             } | undefined;
             variants?: {
-                ghost: (props: _chakra_ui_styled_system.StyleFunctionProps) => {
-                    trigger: {
-                        _hover: {
-                            backgroundColor: string;
-                        };
-                        _active: {
-                            backgroundColor: string;
-                        };
-                    };
-                };
-                outline: (props: _chakra_ui_styled_system.StyleFunctionProps) => {
+                base: (props: _chakra_ui_styled_system.StyleFunctionProps) => {
                     trigger: {
                         _hover: {
                             boxShadow: string;
                         };
                         _active: {
-                            backgroundColor: string;
                             boxShadow: string;
+                            backgroundColor: string;
                         };
                         _expanded: {
                             _hover: {
-                                backgroundColor: string;
                                 boxShadow: string;
+                                backgroundColor: string;
                             };
                             _active: {
-                                backgroundColor: string;
                                 boxShadow: string;
+                                backgroundColor: string;
                             };
+                            backgroundColor: string;
                         };
                         _focus: _chakra_ui_styled_system.SystemStyleObject;
                         _focusVisible: _chakra_ui_styled_system.SystemStyleObject;
@@ -2613,34 +2603,48 @@ declare const theme: {
                         boxShadow: string;
                     };
                 };
-                card: (props: _chakra_ui_styled_system.StyleFunctionProps) => {
+                ghost: (props: _chakra_ui_styled_system.StyleFunctionProps) => {
+                    trigger: {
+                        _hover: {
+                            backgroundColor: string;
+                        };
+                        _active: {
+                            backgroundColor: string;
+                        };
+                        _expanded: {
+                            backgroundColor: string;
+                        };
+                    };
+                };
+                floating: (props: _chakra_ui_styled_system.StyleFunctionProps) => {
                     trigger: {
-                        backgroundColor: string;
                         boxShadow: string;
                         transition: string;
                         _hover: {
-                            backgroundColor: string;
                             boxShadow: string;
+                            backgroundColor: string;
                         };
                         _active: {
-                            backgroundColor: string;
                             boxShadow: string;
+                            backgroundColor: string;
                         };
                         _expanded: {
                             _hover: {
                                 boxShadow: string;
                             };
                             _active: {
-                                backgroundColor: string;
                                 boxShadow: string;
+                                backgroundColor: string;
                             };
+                            backgroundColor: string;
                         };
+                        backgroundColor: string;
                     };
                 };
             } | undefined;
             defaultProps?: {
                 size?: "sm" | "md" | "lg" | undefined;
-                variant?: "outline" | "card" | "ghost" | undefined;
+                variant?: "base" | "ghost" | "floating" | undefined;
                 colorScheme?: string | undefined;
             } | undefined;
             parts: ("card" | "trigger")[];

package/dist/index.js

@@ -2269,7 +2269,10 @@ var init_CardSelect = __esm({
           triggerRef
         );
         const { buttonProps } = reactAria.useButton(triggerProps, triggerRef);
-        const styles3 = react.useMultiStyleConfig("CardSelect", { variant, size: size2 });
+        const styles3 = react.useMultiStyleConfig("CardSelect", {
+          variant,
+          size: size2
+        });
         useForceRerender(state2.isOpen);
         const ChevronIcon = size2 === "sm" ? sporIconReact.DropdownDownFill18Icon : sporIconReact.DropdownDownFill24Icon;
         return /* @__PURE__ */ React69__namespace.default.createElement(react.Box, { ...props }, /* @__PURE__ */ React69__namespace.default.createElement(
@@ -11925,6 +11928,95 @@ var init_card2 = __esm({
     };
   }
 });
+function baseBackground(state2, props) {
+  switch (state2) {
+    case "active":
+      return {
+        backgroundColor: themeTools.mode("mint", "whiteAlpha.100")(props)
+      };
+    case "selected":
+      return {
+        backgroundColor: themeTools.mode("pine", "coralGreen")(props)
+      };
+    case "disabled":
+      return {
+        backgroundColor: themeTools.mode("silver", "whiteAlpha.100")(props)
+      };
+    default:
+      return {
+        backgroundColor: "transparent"
+      };
+  }
+}
+function ghostBackground(state2, props) {
+  switch (state2) {
+    case "hover": {
+      return {
+        backgroundColor: themeTools.mode("seaMist", "whiteAlpha.100")(props)
+      };
+    }
+    case "active":
+      return {
+        backgroundColor: themeTools.mode("seaMist", "whiteAlpha.200")(props)
+      };
+    case "focus":
+      return {
+        backgroundColor: "transparent"
+      };
+    case "selected": {
+      return {
+        backgroundColor: themeTools.mode("mint", "whiteAlpha.200")(props)
+      };
+    }
+    case "default":
+    default:
+      return {
+        backgroundColor: "transparent"
+      };
+  }
+}
+function floatingBackground(state2, props) {
+  switch (state2) {
+    case "selected":
+      return {
+        backgroundColor: themeTools.mode("mint", "pine")(props)
+      };
+    case "active":
+      return {
+        backgroundColor: themeTools.mode(
+          "mint",
+          `color-mix(in srgb, ${props.theme.colors.accent}, ${colors.white} 30%)`
+        )(props)
+      };
+    case "hover":
+      return {
+        backgroundColor: themeTools.mode(
+          "white",
+          `color-mix(in srgb, ${props.theme.colors.accent}, ${colors.white} 20%)`
+        )(props)
+      };
+    case "focus":
+      return {
+        backgroundColor: themeTools.mode(
+          "white",
+          `color-mix(in srgb, ${props.theme.colors.accent}, ${colors.white} 40%)`
+        )(props)
+      };
+    case "default":
+    default:
+      return {
+        backgroundColor: themeTools.mode(
+          "white",
+          `color-mix(in srgb, ${props.theme.colors.accent}, ${colors.white} 10%)`
+        )(props)
+      };
+  }
+}
+var init_background_utils = __esm({
+  "src/theme/utils/background-utils.ts"() {
+    init_foundations();
+  }
+});
 var parts2, helpers3, config8, card_select_default;
 var init_card_select = __esm({
   "src/theme/components/card-select.ts"() {
@@ -11932,6 +12024,7 @@ var init_card_select = __esm({
     init_dist3();
     init_box_shadow_utils();
     init_focus_utils();
+    init_background_utils();
     parts2 = anatomy("card-select").parts("trigger", "card");
     helpers3 = createMultiStyleConfigHelpers(parts2.keys);
     config8 = helpers3.defineMultiStyleConfig({
@@ -11940,9 +12033,6 @@ var init_card_select = __esm({
           appearance: "none",
           display: "flex",
           alignItems: "center",
-          _expanded: {
-            backgroundColor: themeTools.mode("mint", "night")(props)
-          },
           ...focusVisible({
             notFocus: {},
             focus: {
@@ -11957,21 +12047,12 @@ var init_card_select = __esm({
         card: {
           borderRadius: "sm",
           boxShadow: "md",
-          padding: 3
+          padding: 3,
+          color: themeTools.mode("darkGrey", "white")(props)
         }
       }),
       variants: {
-        ghost: (props) => ({
-          trigger: {
-            _hover: {
-              backgroundColor: themeTools.mode("seaMist", "pine")(props)
-            },
-            _active: {
-              backgroundColor: themeTools.mode("mint", "whiteAlpha.200")(props)
-            }
-          }
-        }),
-        outline: (props) => ({
+        base: (props) => ({
           trigger: {
             boxShadow: getBoxShadowString({
               borderColor: themeTools.mode("blackAlpha.400", "whiteAlpha.400")(props)
@@ -11993,19 +12074,20 @@ var init_card_select = __esm({
               })
             },
             _active: {
-              backgroundColor: themeTools.mode("mint", "whiteAlpha.200")(props),
+              ...baseBackground("active", props),
               boxShadow: getBoxShadowString({
                 borderColor: themeTools.mode("darkGrey", "whiteAlpha.400")(props),
                 borderWidth: 1
               })
             },
             _expanded: {
+              ...baseBackground("active", props),
               _hover: {
-                backgroundColor: themeTools.mode("seaMist", "todo")(props),
+                ...baseBackground("active", props),
                 boxShadow: "none"
               },
               _active: {
-                backgroundColor: themeTools.mode("mint", "todo")(props),
+                ...baseBackground("active", props),
                 boxShadow: getBoxShadowString({
                   borderColor: themeTools.mode("blackAlpha.400", "whiteAlpha.400")(props),
                   borderWidth: 1
@@ -12014,13 +12096,26 @@ var init_card_select = __esm({
             }
           }
         }),
-        card: (props) => ({
+        ghost: (props) => ({
           trigger: {
-            backgroundColor: themeTools.mode("transparent", "whiteAlpha.100")(props),
+            _hover: {
+              ...ghostBackground("hover", props)
+            },
+            _active: {
+              ...ghostBackground("active", props)
+            },
+            _expanded: {
+              ...ghostBackground("selected", props)
+            }
+          }
+        }),
+        floating: (props) => ({
+          trigger: {
+            ...floatingBackground("default", props),
             boxShadow: "sm",
             transition: "all .1s ease-out",
             _hover: {
-              backgroundColor: themeTools.mode("seaMist", "pine")(props),
+              ...floatingBackground("hover", props),
               boxShadow: getBoxShadowString({
                 borderColor: themeTools.mode("silver", "whiteAlpha.400")(props),
                 borderWidth: 1,
@@ -12028,7 +12123,7 @@ var init_card_select = __esm({
               })
             },
             _active: {
-              backgroundColor: themeTools.mode("mint", "whiteAlpha.100")(props),
+              ...floatingBackground("active", props),
               boxShadow: getBoxShadowString({
                 borderColor: themeTools.mode("silver", "whiteAlpha.400")(props),
                 borderWidth: themeTools.mode(0, 1)(props),
@@ -12036,6 +12131,7 @@ var init_card_select = __esm({
               })
             },
             _expanded: {
+              ...floatingBackground("active", props),
               _hover: {
                 boxShadow: getBoxShadowString({
                   borderColor: "darkGrey",
@@ -12043,7 +12139,7 @@ var init_card_select = __esm({
                 })
               },
               _active: {
-                backgroundColor: themeTools.mode("mint", "whiteAlpha.200")(props),
+                ...floatingBackground("active", props),
                 boxShadow: "none"
               }
             }
@@ -13153,95 +13249,6 @@ var init_border_utils = __esm({
     init_box_shadow_utils();
   }
 });
-function baseBackground(state2, props) {
-  switch (state2) {
-    case "active":
-      return {
-        backgroundColor: themeTools.mode("mint", "whiteAlpha.100")(props)
-      };
-    case "selected":
-      return {
-        backgroundColor: "pine"
-      };
-    case "disabled":
-      return {
-        backgroundColor: themeTools.mode("silver", "whiteAlpha.100")(props)
-      };
-    default:
-      return {
-        backgroundColor: "transparent"
-      };
-  }
-}
-function ghostBackground(state2, props) {
-  switch (state2) {
-    case "hover": {
-      return {
-        backgroundColor: themeTools.mode("seaMist", "whiteAlpha.100")(props)
-      };
-    }
-    case "active":
-      return {
-        backgroundColor: themeTools.mode("seaMist", "whiteAlpha.200")(props)
-      };
-    case "focus":
-      return {
-        backgroundColor: "transparent"
-      };
-    case "selected": {
-      return {
-        backgroundColor: themeTools.mode("mint", "whiteAlpha.200")(props)
-      };
-    }
-    case "default":
-    default:
-      return {
-        backgroundColor: "transparent"
-      };
-  }
-}
-function floatingBackground(state2, props) {
-  switch (state2) {
-    case "selected":
-      return {
-        backgroundColor: themeTools.mode("mint", "pine")(props)
-      };
-    case "active":
-      return {
-        backgroundColor: themeTools.mode(
-          "mint",
-          `color-mix(in srgb, ${props.theme.darkBackgroundColor ?? colors.darkGrey}, ${colors.white} 30%)`
-        )(props)
-      };
-    case "hover":
-      return {
-        backgroundColor: themeTools.mode(
-          "white",
-          `color-mix(in srgb, ${props.theme.darkBackgroundColor ?? colors.darkGrey}, ${colors.white} 20%)`
-        )(props)
-      };
-    case "focus":
-      return {
-        backgroundColor: themeTools.mode(
-          "white",
-          `color-mix(in srgb, ${props.theme.darkBackgroundColor ?? colors.darkGrey}, ${colors.white} 40%)`
-        )(props)
-      };
-    case "default":
-    default:
-      return {
-        backgroundColor: themeTools.mode(
-          "white",
-          `color-mix(in srgb, ${props.theme.darkBackgroundColor ?? colors.darkGrey}, ${colors.white} 10%)`
-        )(props)
-      };
-  }
-}
-var init_background_utils = __esm({
-  "src/theme/utils/background-utils.ts"() {
-    init_foundations();
-  }
-});
 var parts6, helpers10, config18, info_select_default;
 var init_info_select = __esm({
   "src/theme/components/info-select.ts"() {

package/dist/index.mjs

@@ -1 +1 @@
-export { Accordion, AccordionButton, AccordionIcon, AccordionItem, AccordionPanel, AttachedInputs, Badge, Box, Brand, Breadcrumb, BreadcrumbItem, BreadcrumbLink, Button, ButtonGroup, Card, CardSelect, Center, Checkbox, CheckboxGroup, ChoiceChip, ClosableAlert, CloseButton, Code, ColorInlineLoader, ColorSpinner, Combobox, Container, ContentLoader, DarkFullScreenLoader, DarkInlineLoader, DarkMode, DarkSpinner, DatePicker, DateRangePicker, Divider, Drawer, DrawerBody, DrawerCloseButton, DrawerContent, DrawerFooter, ModalHeader as DrawerHeader, DrawerOverlay, Expandable, ExpandableAlert, ExpandableItem, Fade, Flex, FloatingActionButton, FormControl, FormErrorMessage, FormHelperText, FormLabel, Grid, GridItem, HStack, Heading, IconButton, Image, Img, InfoSelect, InfoTag, Input, InputGroup, InputLeftElement, InputRightElement, Item, ItemDescription, ItemLabel, JumpButton, Language, LanguageProvider, LightFullScreenLoader, LightInlineLoader, LightMode, LightSpinner, LineIcon, ListBox, ListItem, Modal, ModalBody, ModalCloseButton, ModalContent, ModalFooter, ModalHeader, ModalOverlay, NativeSelect, NumericStepper, OrderedList, PasswordInput, PhoneNumberInput, PlayPauseButton, Popover, PopoverAnchor, PopoverArrow, PopoverBody, PopoverCloseButton, PopoverContent, PopoverFooter, PopoverHeader, PopoverTrigger, PopoverWizardBody, Portal, ProgressBar, ProgressIndicator, ProgressLoader, Radio, RadioGroup, ScaleFade, SearchInput, Section, SimpleDrawer, SimpleGrid, SimplePopover, Skeleton, SkeletonCircle, SkeletonText, SkipButton, Slide, SlideFade, Spacer, SporProvider, Stack, StaticAlert, Stepper, StepperStep, Switch, Tab, TabList, TabPanel, TabPanels, Table, TableCaption, Tabs, Tbody, Td, Text, TextLink, Textarea, Tfoot, Th, Thead, Time, TimePicker, Tr, TravelTag, UnorderedList, VStack, VyLogo, WizardPopover, Wrap, WrapItem, brandTheme, createTexts, defineStyleConfig, extendTheme, fontFaces, theme, tokens, useBreakpointValue, useClipboard, useColorMode, useColorModePreference, useColorModeValue, useControllableProp, useDisclosure, useMediaQuery, useMergeRefs, useOutsideClick, usePrefersReducedMotion, useSize, useTheme, useToast, useToken, useTranslation } from './chunk-55HLEY3T.mjs';
+export { Accordion, AccordionButton, AccordionIcon, AccordionItem, AccordionPanel, AttachedInputs, Badge, Box, Brand, Breadcrumb, BreadcrumbItem, BreadcrumbLink, Button, ButtonGroup, Card, CardSelect, Center, Checkbox, CheckboxGroup, ChoiceChip, ClosableAlert, CloseButton, Code, ColorInlineLoader, ColorSpinner, Combobox, Container, ContentLoader, DarkFullScreenLoader, DarkInlineLoader, DarkMode, DarkSpinner, DatePicker, DateRangePicker, Divider, Drawer, DrawerBody, DrawerCloseButton, DrawerContent, DrawerFooter, ModalHeader as DrawerHeader, DrawerOverlay, Expandable, ExpandableAlert, ExpandableItem, Fade, Flex, FloatingActionButton, FormControl, FormErrorMessage, FormHelperText, FormLabel, Grid, GridItem, HStack, Heading, IconButton, Image, Img, InfoSelect, InfoTag, Input, InputGroup, InputLeftElement, InputRightElement, Item, ItemDescription, ItemLabel, JumpButton, Language, LanguageProvider, LightFullScreenLoader, LightInlineLoader, LightMode, LightSpinner, LineIcon, ListBox, ListItem, Modal, ModalBody, ModalCloseButton, ModalContent, ModalFooter, ModalHeader, ModalOverlay, NativeSelect, NumericStepper, OrderedList, PasswordInput, PhoneNumberInput, PlayPauseButton, Popover, PopoverAnchor, PopoverArrow, PopoverBody, PopoverCloseButton, PopoverContent, PopoverFooter, PopoverHeader, PopoverTrigger, PopoverWizardBody, Portal, ProgressBar, ProgressIndicator, ProgressLoader, Radio, RadioGroup, ScaleFade, SearchInput, Section, SimpleDrawer, SimpleGrid, SimplePopover, Skeleton, SkeletonCircle, SkeletonText, SkipButton, Slide, SlideFade, Spacer, SporProvider, Stack, StaticAlert, Stepper, StepperStep, Switch, Tab, TabList, TabPanel, TabPanels, Table, TableCaption, Tabs, Tbody, Td, Text, TextLink, Textarea, Tfoot, Th, Thead, Time, TimePicker, Tr, TravelTag, UnorderedList, VStack, VyLogo, WizardPopover, Wrap, WrapItem, brandTheme, createTexts, defineStyleConfig, extendTheme, fontFaces, theme, tokens, useBreakpointValue, useClipboard, useColorMode, useColorModePreference, useColorModeValue, useControllableProp, useDisclosure, useMediaQuery, useMergeRefs, useOutsideClick, usePrefersReducedMotion, useSize, useTheme, useToast, useToken, useTranslation } from './chunk-S2IJI3LY.mjs';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vygruppen/spor-react",
-  "version": "5.3.0",
+  "version": "5.4.0",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",

package/src/input/CardSelect.tsx

@@ -59,6 +59,7 @@ type CardSelectProps = BoxProps & {
  * ```
  *
  * @see https://spor.vy.no/components/card-select
+ *
  */
 export const CardSelect = forwardRef<CardSelectProps, "button">(
   (
@@ -96,7 +97,10 @@ export const CardSelect = forwardRef<CardSelectProps, "button">(
 
     const { buttonProps } = useButton(triggerProps, triggerRef);
 
-    const styles = useMultiStyleConfig("CardSelect", { variant, size });
+    const styles = useMultiStyleConfig("CardSelect", {
+      variant,
+      size,
+    });
     useForceRerender(state.isOpen);
 
     const ChevronIcon =

package/src/theme/components/card-select.ts

@@ -1,8 +1,13 @@
 import { anatomy } from "@chakra-ui/anatomy";
 import { createMultiStyleConfigHelpers } from "@chakra-ui/styled-system";
-import { mode } from "@chakra-ui/theme-tools";
+import { StyleFunctionProps, mode } from "@chakra-ui/theme-tools";
 import { getBoxShadowString } from "../utils/box-shadow-utils";
 import { focusVisible } from "../utils/focus-utils";
+import {
+  baseBackground,
+  floatingBackground,
+  ghostBackground,
+} from "../utils/background-utils";
 
 const parts = anatomy("card-select").parts("trigger", "card");
 
@@ -13,9 +18,6 @@ const config = helpers.defineMultiStyleConfig({
       appearance: "none",
       display: "flex",
       alignItems: "center",
-      _expanded: {
-        backgroundColor: mode("mint", "night")(props),
-      },
       ...focusVisible({
         notFocus: {},
         focus: {
@@ -31,20 +33,11 @@ const config = helpers.defineMultiStyleConfig({
       borderRadius: "sm",
       boxShadow: "md",
       padding: 3,
+      color: mode("darkGrey", "white")(props),
     },
   }),
   variants: {
-    ghost: (props) => ({
-      trigger: {
-        _hover: {
-          backgroundColor: mode("seaMist", "pine")(props),
-        },
-        _active: {
-          backgroundColor: mode("mint", "whiteAlpha.200")(props),
-        },
-      },
-    }),
-    outline: (props) => ({
+    base: (props) => ({
       trigger: {
         boxShadow: getBoxShadowString({
           borderColor: mode("blackAlpha.400", "whiteAlpha.400")(props),
@@ -66,20 +59,20 @@ const config = helpers.defineMultiStyleConfig({
           }),
         },
         _active: {
-          backgroundColor: mode("mint", "whiteAlpha.200")(props),
+          ...baseBackground("active", props),
           boxShadow: getBoxShadowString({
             borderColor: mode("darkGrey", "whiteAlpha.400")(props),
             borderWidth: 1,
           }),
         },
-
         _expanded: {
+          ...baseBackground("active", props),
           _hover: {
-            backgroundColor: mode("seaMist", "todo")(props),
+            ...baseBackground("active", props),
             boxShadow: "none",
           },
           _active: {
-            backgroundColor: mode("mint", "todo")(props),
+            ...baseBackground("active", props),
             boxShadow: getBoxShadowString({
               borderColor: mode("blackAlpha.400", "whiteAlpha.400")(props),
               borderWidth: 1,
@@ -88,13 +81,26 @@ const config = helpers.defineMultiStyleConfig({
         },
       },
     }),
-    card: (props) => ({
+    ghost: (props) => ({
+      trigger: {
+        _hover: {
+          ...ghostBackground("hover", props),
+        },
+        _active: {
+          ...ghostBackground("active", props),
+        },
+        _expanded: {
+          ...ghostBackground("selected", props),
+        },
+      },
+    }),
+    floating: (props) => ({
       trigger: {
-        backgroundColor: mode("transparent", "whiteAlpha.100")(props),
+        ...floatingBackground("default", props),
         boxShadow: "sm",
         transition: "all .1s ease-out",
         _hover: {
-          backgroundColor: mode("seaMist", "pine")(props),
+          ...floatingBackground("hover", props),
           boxShadow: getBoxShadowString({
             borderColor: mode("silver", "whiteAlpha.400")(props),
             borderWidth: 1,
@@ -102,7 +108,7 @@ const config = helpers.defineMultiStyleConfig({
           }),
         },
         _active: {
-          backgroundColor: mode("mint", "whiteAlpha.100")(props),
+          ...floatingBackground("active", props),
           boxShadow: getBoxShadowString({
             borderColor: mode("silver", "whiteAlpha.400")(props),
             borderWidth: mode(0, 1)(props),
@@ -110,6 +116,7 @@ const config = helpers.defineMultiStyleConfig({
           }),
         },
         _expanded: {
+          ...floatingBackground("active", props),
           _hover: {
             boxShadow: getBoxShadowString({
               borderColor: "darkGrey",
@@ -117,7 +124,7 @@ const config = helpers.defineMultiStyleConfig({
             }),
           },
           _active: {
-            backgroundColor: mode("mint", "whiteAlpha.200")(props),
+            ...floatingBackground("active", props),
             boxShadow: "none",
           },
         },

package/src/theme/utils/background-utils.ts

@@ -17,7 +17,7 @@ export function baseBackground(
       };
     case "selected":
       return {
-        backgroundColor: "pine",
+        backgroundColor: mode("pine", "coralGreen")(props),
       };
     case "disabled":
       return {
@@ -84,27 +84,21 @@ export function floatingBackground(
       return {
         backgroundColor: mode(
           "mint",
-          `color-mix(in srgb, ${
-            props.theme.darkBackgroundColor ?? colors.darkGrey
-          }, ${colors.white} 30%)`,
+          `color-mix(in srgb, ${props.theme.colors.accent}, ${colors.white} 30%)`,
         )(props),
       };
     case "hover":
       return {
         backgroundColor: mode(
           "white",
-          `color-mix(in srgb, ${
-            props.theme.darkBackgroundColor ?? colors.darkGrey
-          }, ${colors.white} 20%)`,
+          `color-mix(in srgb, ${props.theme.colors.accent}, ${colors.white} 20%)`,
         )(props),
       };
     case "focus":
       return {
         backgroundColor: mode(
           "white",
-          `color-mix(in srgb, ${
-            props.theme.darkBackgroundColor ?? colors.darkGrey
-          }, ${colors.white} 40%)`,
+          `color-mix(in srgb, ${props.theme.colors.accent}, ${colors.white} 40%)`,
         )(props),
       };
     case "default":
@@ -112,9 +106,7 @@ export function floatingBackground(
       return {
         backgroundColor: mode(
           "white",
-          `color-mix(in srgb, ${
-            props.theme.darkBackgroundColor ?? colors.darkGrey
-          }, ${colors.white} 10%)`,
+          `color-mix(in srgb, ${props.theme.colors.accent}, ${colors.white} 10%)`,
         )(props),
       };
   }