@vygruppen/spor-react 3.7.3 → 3.7.4

package/.turbo/turbo-build.log

@@ -1,5 +1,5 @@
 
-> @vygruppen/spor-react@3.7.3 build
+> @vygruppen/spor-react@3.7.4 build
 > tsup src/index.tsx --dts --treeshake --format cjs,esm
 
 CLI Building entry: src/index.tsx
@@ -9,14 +9,14 @@
 CJS Build start
 ESM Build start
 DTS Build start
+"toZoned" and "toTime" are imported from external module "@internationalized/date" but never used in "dist/chunk-TMLJPE4H.mjs".
 "toZoned" and "toTime" are imported from external module "@internationalized/date" but never used in "dist/index.js".
-"toZoned" and "toTime" are imported from external module "@internationalized/date" but never used in "dist/chunk-D2XVZVE6.mjs".
-CJS dist/index.js 534.96 KB
-CJS ⚡️ Build success in 3732ms
 ESM dist/index.mjs                      2.09 KB
-ESM dist/CountryCodeSelect-WGNXQHWO.mjs 1.19 KB
-ESM dist/chunk-D2XVZVE6.mjs             427.44 KB
-ESM ⚡️ Build success in 3733ms
-DTS ⚡️ Build success in 18018ms
-DTS dist/index.d.ts  255.09 KB
-DTS dist/index.d.mts 255.09 KB
+ESM dist/CountryCodeSelect-FLRREZ6C.mjs 1.19 KB
+ESM dist/chunk-TMLJPE4H.mjs             430.62 KB
+ESM ⚡️ Build success in 3863ms
+CJS dist/index.js 538.95 KB
+CJS ⚡️ Build success in 3864ms
+DTS ⚡️ Build success in 18236ms
+DTS dist/index.d.ts  256.42 KB
+DTS dist/index.d.mts 256.42 KB

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @vygruppen/spor-react
 
+## 3.7.4
+
+### Patch Changes
+
+- 637d713b: Accordion, ExpandableItem: Set the correct minimum height
+- 75971916: Dark mode support for Accordion
+- 6854e54a: Updated buttons to support dark mode with some minor touch ups to the current styles.
+  Variant `tertiary`-buttons are now deprecated as we are updating our visual structure
+  with a more minimalistic selection; please use `secondary` instead.
+- 1a88ad5a: Tweaked ChoiceChip colors, and added dark mode
+- e48e91d5: Breadcrumb: Add dark mode support
+- 5012de56: FloatingActionButton: Make the isTextVisible prop work as expected
+
 ## 3.7.3
 
 ### Patch Changes

package/dist/{CountryCodeSelect-WGNXQHWO.mjs → CountryCodeSelect-FLRREZ6C.mjs}

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

package/dist/{chunk-D2XVZVE6.mjs → chunk-TMLJPE4H.mjs}

@@ -1293,10 +1293,10 @@ var FloatingActionButton = ({
   ...props
 }) => {
   const [isTextVisible, setIsTextVisible] = React50__default.useState(
-    externalIsTextVisible !== void 0 ? externalIsTextVisible : true
+    externalIsTextVisible !== void 0 ? externalIsTextVisible : false
   );
   const scrollDirection = useScrollDirection();
-  React50__default.useEffect(() => {
+  useEffect(() => {
     if (externalIsTextVisible !== void 0) {
       return;
     }
@@ -1306,7 +1306,7 @@ var FloatingActionButton = ({
     );
     return () => window.clearTimeout(id);
   }, [scrollDirection, externalIsTextVisible]);
-  React50__default.useEffect(() => {
+  useEffect(() => {
     setIsTextVisible(!!externalIsTextVisible);
   }, [externalIsTextVisible]);
   const style = useMultiStyleConfig("FloatingActionButton", {
@@ -1327,7 +1327,7 @@ var FloatingActionButton = ({
       MotionBox,
       {
         animate: isTextVisible ? "show" : "hide",
-        initial: "show",
+        initial: externalIsTextVisible ? "show" : "hide",
         variants: {
           show: {
             opacity: 1,
@@ -1348,7 +1348,9 @@ var FloatingActionButton = ({
 };
 var useScrollDirection = () => {
   const [scrollDirection, setScrollDirection] = React50__default.useState(null);
-  const lastScrollPosition = React50__default.useRef(typeof window !== "undefined" ? window.scrollY : 0);
+  const lastScrollPosition = React50__default.useRef(
+    typeof window !== "undefined" ? window.scrollY : 0
+  );
   React50__default.useEffect(() => {
     const onScroll = () => {
       const delta = window.scrollY - lastScrollPosition.current;
@@ -4298,7 +4300,9 @@ var ChoiceChip = forwardRef((props, ref) => {
         __css: styles3.container,
         "data-checked": dataAttr(state2.isChecked),
         "data-hover": dataAttr(state2.isHovered),
-        "data-focus": dataAttr(state2.isFocused)
+        "data-focus": dataAttr(state2.isFocused),
+        "data-active": dataAttr(state2.isActive),
+        "data-disabled": dataAttr(state2.isDisabled)
       },
       icon && /* @__PURE__ */ React50__default.createElement(chakra.span, { __css: styles3.icon }, state2.isChecked ? icon.checked : icon.default),
       /* @__PURE__ */ React50__default.createElement(chakra.span, { __css: styles3.label, ...getCheckboxProps() }, variant !== "icon" && children),
@@ -5083,7 +5087,7 @@ var texts14 = createTexts({
     sv: "Telefonnummer"
   }
 });
-var LazyCountryCodeSelect = React50__default.lazy(() => import('./CountryCodeSelect-WGNXQHWO.mjs'));
+var LazyCountryCodeSelect = React50__default.lazy(() => import('./CountryCodeSelect-FLRREZ6C.mjs'));
 var Radio = forwardRef((props, ref) => {
   return /* @__PURE__ */ React50__default.createElement(Radio$1, { ...props, ref });
 });
@@ -11056,11 +11060,9 @@ var styles2 = {
     }
   })
 };
-
-// src/theme/components/accordion.ts
 var helpers = createMultiStyleConfigHelpers(accordionAnatomy.keys);
 var config3 = helpers.defineMultiStyleConfig({
-  baseStyle: {
+  baseStyle: (props) => ({
     container: {
       border: "none",
       borderRadius: "sm"
@@ -11072,7 +11074,7 @@ var config3 = helpers.defineMultiStyleConfig({
       borderRadius: "sm",
       display: "flex",
       justifyContent: "space-between",
-      color: "darkGrey",
+      color: mode("darkGrey", "white")(props),
       textAlign: "left",
       fontFamily: "body",
       fontWeight: "bold",
@@ -11084,7 +11086,7 @@ var config3 = helpers.defineMultiStyleConfig({
         },
         focus: {
           boxShadow: getBoxShadowString({
-            borderColor: "greenHaze",
+            borderColor: mode("greenHaze", "azure")(props),
             borderWidth: 2
           })
         }
@@ -11101,23 +11103,26 @@ var config3 = helpers.defineMultiStyleConfig({
     icon: {
       fontSize: "1.25em"
     }
-  },
+  }),
   variants: {
-    list: {
+    list: (props) => ({
       button: {
         boxShadow: "none",
         _hover: {
-          backgroundColor: "seaMist"
+          backgroundColor: mode("seaMist", "pine")(props)
         },
         _active: {
-          backgroundColor: "mint"
+          backgroundColor: mode("mint", "whiteAlpha.200")(props)
         }
       }
-    },
-    outline: {
+    }),
+    outline: (props) => ({
       container: {
         boxShadow: getBoxShadowString({
-          borderColor: colors.blackAlpha["400"]
+          borderColor: mode(
+            colors.blackAlpha["400"],
+            colors.whiteAlpha["400"]
+          )(props)
         })
       },
       button: {
@@ -11126,23 +11131,24 @@ var config3 = helpers.defineMultiStyleConfig({
         },
         _hover: {
           boxShadow: getBoxShadowString({
-            borderColor: "darkGrey",
+            borderColor: mode("darkGrey", "white")(props),
             borderWidth: 2
           })
         },
         _active: {
-          backgroundColor: "mint",
+          backgroundColor: mode("mint", "whiteAlpha.100")(props),
           boxShadow: getBoxShadowString({
-            borderColor: "darkGrey"
+            borderColor: mode("darkGrey", colors.whiteAlpha[400])(props)
           })
         }
       }
-    },
-    card: {
+    }),
+    card: (props) => ({
       container: {
+        backgroundColor: mode("white", "whiteAlpha.100")(props),
         boxShadow: getBoxShadowString({
-          baseShadow: "sm",
-          borderColor: "silver"
+          baseShadow: mode("sm", "none")(props),
+          borderColor: mode("silver", "whiteAlpha.400")(props)
         })
       },
       button: {
@@ -11150,20 +11156,30 @@ var config3 = helpers.defineMultiStyleConfig({
           borderBottomRadius: "none"
         },
         _hover: {
-          backgroundColor: "seaMist"
+          backgroundColor: mode("seaMist", "whiteAlpha.200")(props),
+          boxShadow: getBoxShadowString({
+            borderColor: mode("darkGrey", "white")(props),
+            borderWidth: 1
+          })
         },
         _active: {
-          backgroundColor: "mint"
+          backgroundColor: mode("mint", "inherit")(props),
+          boxShadow: getBoxShadowString({
+            baseShadow: "none",
+            borderWidth: 1,
+            borderColor: mode("darkGrey", "whiteAlpha.400")(props)
+          })
         }
       }
-    }
+    })
   },
   sizes: {
     sm: {
       button: {
         fontSize: ["mobile.xs", null, "desktop.xs"],
         paddingX: 2,
-        paddingY: 1
+        paddingY: 1,
+        minHeight: 6
       },
       panel: {
         fontSize: ["mobile.xs", null, "desktop.xs"],
@@ -11174,7 +11190,8 @@ var config3 = helpers.defineMultiStyleConfig({
       button: {
         fontSize: ["mobile.sm", null, "desktop.sm"],
         paddingX: 3,
-        paddingY: 1
+        paddingY: 1,
+        minHeight: 7
       },
       panel: {
         fontSize: ["mobile.sm", null, "desktop.sm"],
@@ -11185,7 +11202,8 @@ var config3 = helpers.defineMultiStyleConfig({
       button: {
         fontSize: ["mobile.sm", null, "desktop.sm"],
         paddingX: 3,
-        paddingY: 2
+        paddingY: 2,
+        minHeight: 8
       },
       panel: {
         fontSize: ["mobile.sm", null, "desktop.sm"],
@@ -11343,10 +11361,8 @@ var colorCombinations = {
     color: "darkGrey"
   }
 };
-
-// src/theme/components/breadcrumb.ts
 var { defineMultiStyleConfig: defineMultiStyleConfig27, definePartsStyle: definePartsStyle27 } = createMultiStyleConfigHelpers(breadcrumbAnatomy.keys);
-var baseStyleLink2 = defineStyle({
+var baseStyleLink2 = defineStyle((props) => ({
   transitionProperty: "common",
   transitionDuration: "fast",
   transitionTimingFunction: "ease-out",
@@ -11359,26 +11375,29 @@ var baseStyleLink2 = defineStyle({
     paddingX: 0.5,
     borderRadius: "xs",
     _hover: {
-      backgroundColor: "coralGreen"
+      backgroundColor: mode("seaMist", "pine")(props)
     },
     _focusVisible: {
       boxShadow: getBoxShadowString({
-        borderColor: "greenHaze",
+        borderColor: mode("greenHaze", "azure")(props),
         borderWidth: 2
-      })
+      }),
+      notFocus: {
+        notFocus: { boxShadow: "none" }
+      }
     },
     _active: {
-      backgroundColor: "mint"
+      backgroundColor: mode("mint", "whiteAlpha.200")(props)
     }
   }
-});
-var baseStyle43 = definePartsStyle27({
-  link: baseStyleLink2,
+}));
+var baseStyle43 = definePartsStyle27((props) => ({
+  link: baseStyleLink2(props),
   list: {
     flexWrap: "wrap",
     alignItems: "flex-start"
   }
-});
+}));
 var breadcrumb_default = defineMultiStyleConfig27({
   baseStyle: baseStyle43
 });
@@ -11407,28 +11426,39 @@ var config6 = defineStyleConfig$1({
     }
   },
   variants: {
-    control: {
-      backgroundColor: "darkTeal",
-      color: "white",
+    control: (props) => ({
+      backgroundColor: mode("darkTeal", "mint")(props),
+      color: mode("white", "darkTeal")(props),
       ...focusVisible({
         focus: {
-          boxShadow: `inset 0 0 0 4px ${colors.darkTeal}, inset 0 0 0 6px currentColor`
+          boxShadow: `inset 0 0 0 4px ${mode(
+            colors.darkTeal,
+            colors.seaMist
+          )(props)}, inset 0 0 0 6px currentColor`
         },
         notFocus: { boxShadow: "none" }
       }),
       _hover: {
-        backgroundColor: "night"
+        backgroundColor: mode("night", "coralGreen")(props)
       },
       _active: {
-        backgroundColor: "pine"
+        backgroundColor: mode("pine", "white")(props)
       }
-    },
-    primary: {
+    }),
+    primary: (props) => ({
+      // FIXME: Update to use a global defined background color for darkMode whenever it is available.
+      // hardcoded background color as alpha-"hack" below is not feasible for dark mode with solid background color
       backgroundColor: "primaryGreen",
       color: "white",
       ...focusVisible({
         focus: {
-          boxShadow: `inset 0 0 0 4px ${colors.primaryGreen}, inset 0 0 0 4px ${colors.primaryGreen}, inset 0 0 0 6px currentColor`
+          boxShadow: `inset 0 0 0 2px ${mode(
+            colors.greenHaze,
+            colors.azure
+          )(props)}, inset 0 0 0 4px ${mode(
+            colors.white,
+            colors.darkGrey
+          )(props)}`
         },
         notFocus: { boxShadow: "none" }
       }),
@@ -11438,25 +11468,61 @@ var config6 = defineStyleConfig$1({
       _active: {
         backgroundColor: "azure"
       }
-    },
-    secondary: {
-      backgroundColor: "coralGreen",
-      color: "darkTeal",
+    }),
+    secondary: (props) => ({
+      // FIXME: Update to use global defined background color for darkMode whenever it is available instead of alpha
+      backgroundColor: mode("seaMist", "whiteAlpha.100")(props),
+      color: mode("darkTeal", "white")(props),
+      // order is important here for now while we do not have global defined background color for darkMode
+      _hover: {
+        backgroundColor: mode("coralGreen", "whiteAlpha.200")(props)
+      },
       ...focusVisible({
         focus: {
-          boxShadow: `inset 0 0 0 4px ${colors.coralGreen}, inset 0 0 0 4px ${colors.coralGreen}, inset 0 0 0 6px currentColor`
+          boxShadow: `inset 0 0 0 2px ${mode(
+            colors.greenHaze,
+            colors.azure
+          )(props)}, inset 0 0 0 4px ${mode(
+            colors.white,
+            colors.blackAlpha[300]
+          )(props)}`,
+          _hover: {
+            boxShadow: `inset 0 0 0 2px ${mode(
+              colors.greenHaze,
+              colors.azure
+            )(props)}, inset 0 0 0 4px ${mode(
+              colors.white,
+              colors.blackAlpha[500]
+            )(props)}`
+          }
         },
         notFocus: {
           boxShadow: "none"
         }
       }),
-      _hover: {
-        backgroundColor: "blueGreen"
-      },
       _active: {
-        backgroundColor: "mint"
+        backgroundColor: mode("mint", "whiteAlpha.300")(props),
+        boxShadow: `inset 0 0 0 2px ${mode(
+          colors.greenHaze,
+          colors.azure
+        )(props)}, inset 0 0 0 4px ${mode(
+          colors.white,
+          colors.blackAlpha[600]
+        )(props)}`,
+        _hover: {
+          boxShadow: `inset 0 0 0 2px ${mode(
+            colors.greenHaze,
+            colors.azure
+          )(props)}, inset 0 0 0 4px ${mode(
+            colors.white,
+            colors.blackAlpha[600]
+          )(props)}`
+        }
       }
-    },
+    }),
+    /**
+     * @deprecated use `secondary` instead.
+     */
     tertiary: {
       backgroundColor: "mint",
       color: "darkGrey",
@@ -11485,7 +11551,7 @@ var config6 = defineStyleConfig$1({
       ...focusVisible({
         focus: {
           boxShadow: getBoxShadowString({
-            borderWidth: 3,
+            borderWidth: 2,
             borderColor: "greenHaze"
           })
         },
@@ -11992,32 +12058,43 @@ var helpers5 = createMultiStyleConfigHelpers$1(parts3.keys);
 var config10 = helpers5.defineMultiStyleConfig({
   baseStyle: (props) => ({
     container: {
-      backgroundColor: "white",
+      backgroundColor: mode("white", "transparent")(props),
       boxShadow: getBoxShadowString({ borderColor: "celadon" }),
-      color: "darkTeal",
+      color: mode("darkTeal", "white")(props),
       display: "inline-flex",
       alignItems: "center",
       fontSize: "16px",
       px: 1,
       _checked: {
-        background: "seaMist",
+        color: "white",
+        background: "pine",
         boxShadow: getBoxShadowString({ borderColor: "celadon" })
       },
       "input:focus-visible + &": {
-        boxShadow: getBoxShadowString({
-          borderColor: "greenHaze",
-          borderWidth: 2
-        })
+        boxShadow: `inset 0 0 0 2px ${mode(
+          colors.greenHaze,
+          colors.azure
+        )(props)}, inset 0 0 0 4px ${mode(
+          colors.white,
+          colors.darkGrey
+        )(props)}`
       },
       "@media (hover:hover)": {
         _hover: {
+          color: mode("darkTeal", "white")(props),
           boxShadow: getBoxShadowString({
             borderColor: "greenHaze",
             borderWidth: 2
           }),
-          background: "mint",
+          background: mode("coralGreen", "whiteAlpha.200")(props),
           cursor: "pointer"
         }
+      },
+      _active: {
+        backgroundColor: mode("mint", "whiteAlpha.300")(props),
+        boxShadow: getBoxShadowString({
+          borderColor: "pine"
+        })
       }
     },
     icon: {

package/dist/index.d.mts

@@ -266,7 +266,9 @@ type ButtonProps = Exclude<ButtonProps$1, "colorScheme" | "loadingText" | "size"
      *
      * Defaults to "primary"
      */
-    variant?: "control" | "primary" | "secondary" | "tertiary" | "additional" | "ghost" | "floating";
+    variant?: "control" | "primary" | "secondary"
+    /** @deprecated Use `secondary` instead */
+     | "tertiary" | "additional" | "ghost" | "floating";
 };
 /**
  * Buttons are used to trigger actions.
@@ -1963,7 +1965,7 @@ declare const fontFaces: string;
 declare const theme: {
     components: {
         Accordion: {
-            baseStyle?: {
+            baseStyle?: ((props: _chakra_ui_styled_system.StyleFunctionProps) => {
                 container: {
                     border: string;
                     borderRadius: string;
@@ -1994,13 +1996,14 @@ declare const theme: {
                 icon: {
                     fontSize: string;
                 };
-            } | undefined;
+            }) | undefined;
             sizes?: {
                 sm: {
                     button: {
                         fontSize: ("mobile.xs" | "desktop.xs" | null)[];
                         paddingX: number;
                         paddingY: number;
+                        minHeight: number;
                     };
                     panel: {
                         fontSize: ("mobile.xs" | "desktop.xs" | null)[];
@@ -2012,6 +2015,7 @@ declare const theme: {
                         fontSize: ("mobile.sm" | "desktop.sm" | null)[];
                         paddingX: number;
                         paddingY: number;
+                        minHeight: number;
                     };
                     panel: {
                         fontSize: ("mobile.sm" | "desktop.sm" | null)[];
@@ -2023,6 +2027,7 @@ declare const theme: {
                         fontSize: ("mobile.sm" | "desktop.sm" | null)[];
                         paddingX: number;
                         paddingY: number;
+                        minHeight: number;
                     };
                     panel: {
                         fontSize: ("mobile.sm" | "desktop.sm" | null)[];
@@ -2031,7 +2036,7 @@ declare const theme: {
                 };
             } | undefined;
             variants?: {
-                list: {
+                list: (props: _chakra_ui_styled_system.StyleFunctionProps) => {
                     button: {
                         boxShadow: string;
                         _hover: {
@@ -2042,7 +2047,7 @@ declare const theme: {
                         };
                     };
                 };
-                outline: {
+                outline: (props: _chakra_ui_styled_system.StyleFunctionProps) => {
                     container: {
                         boxShadow: string;
                     };
@@ -2059,8 +2064,9 @@ declare const theme: {
                         };
                     };
                 };
-                card: {
+                card: (props: _chakra_ui_styled_system.StyleFunctionProps) => {
                     container: {
+                        backgroundColor: string;
                         boxShadow: string;
                     };
                     button: {
@@ -2069,9 +2075,11 @@ declare const theme: {
                         };
                         _hover: {
                             backgroundColor: string;
+                            boxShadow: string;
                         };
                         _active: {
                             backgroundColor: string;
+                            boxShadow: string;
                         };
                     };
                 };
@@ -2176,7 +2184,7 @@ declare const theme: {
             } | undefined;
         };
         Breadcrumb: {
-            baseStyle?: {
+            baseStyle?: ((props: _chakra_ui_styled_system.StyleFunctionProps) => {
                 link: {
                     transitionProperty: string;
                     transitionDuration: string;
@@ -2194,6 +2202,11 @@ declare const theme: {
                         };
                         _focusVisible: {
                             boxShadow: string;
+                            notFocus: {
+                                notFocus: {
+                                    boxShadow: string;
+                                };
+                            };
                         };
                         _active: {
                             backgroundColor: string;
@@ -2204,7 +2217,7 @@ declare const theme: {
                     flexWrap: string;
                     alignItems: string;
                 };
-            } | undefined;
+            }) | undefined;
             sizes?: {
                 [key: string]: _chakra_ui_styled_system.PartsStyleInterpolation<{
                     keys: ("link" | "container" | "separator" | "item")[];
@@ -2270,7 +2283,7 @@ declare const theme: {
                 };
             } | undefined;
             variants?: {
-                control: {
+                control: (props: _chakra_ui_styled_system.StyleFunctionProps) => {
                     _hover: {
                         backgroundColor: string;
                     };
@@ -2283,7 +2296,7 @@ declare const theme: {
                     backgroundColor: string;
                     color: string;
                 };
-                primary: {
+                primary: (props: _chakra_ui_styled_system.StyleFunctionProps) => {
                     _hover: {
                         backgroundColor: string;
                     };
@@ -2296,18 +2309,22 @@ declare const theme: {
                     backgroundColor: string;
                     color: string;
                 };
-                secondary: {
-                    _hover: {
-                        backgroundColor: string;
-                    };
+                secondary: (props: _chakra_ui_styled_system.StyleFunctionProps) => {
                     _active: {
                         backgroundColor: string;
+                        boxShadow: string;
+                        _hover: {
+                            boxShadow: string;
+                        };
                     };
                     _focus: _chakra_ui_styled_system.SystemStyleObject;
                     _focusVisible: _chakra_ui_styled_system.SystemStyleObject;
                     "&[data-focus]:not([data-focus-visible])": _chakra_ui_styled_system.SystemStyleObject;
                     backgroundColor: string;
                     color: string;
+                    _hover: {
+                        backgroundColor: string;
+                    };
                 };
                 tertiary: {
                     _hover: {
@@ -2668,6 +2685,7 @@ declare const theme: {
                     fontSize: string;
                     px: number;
                     _checked: {
+                        color: string;
                         background: string;
                         boxShadow: string;
                     };
@@ -2676,11 +2694,16 @@ declare const theme: {
                     };
                     "@media (hover:hover)": {
                         _hover: {
+                            color: string;
                             boxShadow: string;
                             background: string;
                             cursor: string;
                         };
                     };
+                    _active: {
+                        backgroundColor: string;
+                        boxShadow: string;
+                    };
                 };
                 icon: {
                     mr: number;