@vygruppen/spor-react 3.7.2 → 3.7.4

package/.turbo/turbo-build.log

@@ -1,5 +1,5 @@
 
-> @vygruppen/spor-react@3.7.2 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-YVEFEGE4.mjs".
-CJS dist/index.js 534.04 KB
-CJS ⚡️ Build success in 4013ms
 ESM dist/index.mjs                      2.09 KB
-ESM dist/CountryCodeSelect-LFJGSTTV.mjs 1.19 KB
-ESM dist/chunk-YVEFEGE4.mjs             426.82 KB
-ESM ⚡️ Build success in 4013ms
-DTS ⚡️ Build success in 18729ms
-DTS dist/index.d.ts  254.99 KB
-DTS dist/index.d.mts 254.99 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,27 @@
 # @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
+
+- 05f55861: Updated styles for TextLink, and added dark mode support.
+  Variant `tertiary` is now deprecated as we are updating our visual structure
+  with a more minimalistic selection; please use `secondary` instead.
+- 6cef81ca: Add font family to list and accordion button
+
 ## 3.7.2
 
 ### Patch Changes

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

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

package/dist/{chunk-YVEFEGE4.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-LFJGSTTV.mjs'));
+var LazyCountryCodeSelect = React50__default.lazy(() => import('./CountryCodeSelect-FLRREZ6C.mjs'));
 var Radio = forwardRef((props, ref) => {
   return /* @__PURE__ */ React50__default.createElement(Radio$1, { ...props, ref });
 });
@@ -10806,6 +10810,7 @@ __export(components_exports, {
   Input: () => input_default,
   LineIcon: () => line_icon_default,
   Link: () => link_default,
+  List: () => list_default,
   ListBox: () => listbox_default,
   MediaControllerButton: () => media_controller_button_default,
   Modal: () => modal_default,
@@ -11055,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"
@@ -11071,8 +11074,9 @@ var config3 = helpers.defineMultiStyleConfig({
       borderRadius: "sm",
       display: "flex",
       justifyContent: "space-between",
-      color: "darkGrey",
+      color: mode("darkGrey", "white")(props),
       textAlign: "left",
+      fontFamily: "body",
       fontWeight: "bold",
       ...focusVisible({
         notFocus: {
@@ -11082,7 +11086,7 @@ var config3 = helpers.defineMultiStyleConfig({
         },
         focus: {
           boxShadow: getBoxShadowString({
-            borderColor: "greenHaze",
+            borderColor: mode("greenHaze", "azure")(props),
             borderWidth: 2
           })
         }
@@ -11099,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: {
@@ -11124,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: {
@@ -11148,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"],
@@ -11172,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"],
@@ -11183,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"],
@@ -11341,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",
@@ -11357,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
 });
@@ -11405,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" }
       }),
@@ -11436,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",
@@ -11483,7 +11551,7 @@ var config6 = defineStyleConfig$1({
       ...focusVisible({
         focus: {
           boxShadow: getBoxShadowString({
-            borderWidth: 3,
+            borderWidth: 2,
             borderColor: "greenHaze"
           })
         },
@@ -11990,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: {
@@ -13231,80 +13310,79 @@ var config23 = defineStyleConfig$1({
     }
   },
   variants: {
-    primary: {
-      color: "pine",
+    primary: (props) => ({
+      color: mode("pine", "seaMist")(props),
       ...focusVisible({
         focus: {
-          color: "white",
-          backgroundColor: "pine",
+          backgroundColor: "transparent",
           boxShadow: getBoxShadowString({
-            borderColor: "pine",
-            borderWidth: 3,
+            borderColor: "azure",
+            borderWidth: 2,
             isInset: false
           })
         },
         notFocus: {
           color: "pine",
-          boxShadow: "none",
-          backgroundColor: "transparent"
+          backgroundColor: "transparent",
+          boxShadow: "none"
         }
       }),
       _hover: {
-        backgroundColor: "coralGreen",
-        color: "darkTeal",
+        color: "white",
+        backgroundColor: "pine",
         boxShadow: getBoxShadowString({
-          borderColor: "coralGreen",
-          borderWidth: 3,
+          borderColor: "pine",
+          borderWidth: 2,
           isInset: false
         })
       },
       _active: {
-        backgroundColor: "mint",
+        color: "white",
+        backgroundColor: "azure",
         boxShadow: getBoxShadowString({
-          borderColor: "mint",
-          borderWidth: 3,
+          borderColor: "azure",
+          borderWidth: 2,
           isInset: false
-        }),
-        color: "pine"
+        })
       }
-    },
+    }),
     secondary: (props) => ({
-      color: "darkGrey",
+      color: mode("darkGrey", "white")(props),
       ...focusVisible({
         focus: {
-          color: "white",
-          backgroundColor: "darkGrey",
+          backgroundColor: "transparent",
           boxShadow: getBoxShadowString({
-            borderColor: "darkGrey",
-            borderWidth: 3,
+            borderColor: "azure",
+            borderWidth: 2,
             isInset: false
           })
         },
         notFocus: {
-          color: "darkGrey",
           boxShadow: "none",
           backgroundColor: "transparent"
         }
       }),
       _hover: {
-        color: "darkGrey",
-        backgroundColor: "blackAlpha.100",
+        backgroundColor: mode("seaMist", "pine")(props),
         boxShadow: getBoxShadowString({
-          borderColor: props.theme.colors.blackAlpha[100],
-          borderWidth: 3,
+          borderColor: mode("seaMist", "pine")(props),
+          borderWidth: 2,
           isInset: false
         })
       },
       _active: {
-        color: "darkTeal",
-        backgroundColor: "mint",
+        backgroundColor: mode("mint", "whiteAlpha.200")(props),
         boxShadow: getBoxShadowString({
-          borderColor: "mint",
-          borderWidth: 3,
+          borderColor: mode("mint", "whiteAlpha.200")(props),
+          borderWidth: 2,
           isInset: false
         })
       }
     }),
+    /**
+     * @deprecated tertiary style will be deprecated in the future.
+     * Please use the secondary style instead.
+     */
     tertiary: (props) => ({
       color: "white",
       ...focusVisible({
@@ -13348,6 +13426,21 @@ var config23 = defineStyleConfig$1({
   }
 });
 var link_default = config23;
+
+// src/theme/components/list.ts
+var { defineMultiStyleConfig: defineMultiStyleConfig28, definePartsStyle: definePartsStyle28 } = createMultiStyleConfigHelpers(listAnatomy.keys);
+var baseStyleIcon8 = defineStyle({
+  marginEnd: "2",
+  display: "inline",
+  verticalAlign: "text-bottom",
+  fontFamily: "body"
+});
+var baseStyle45 = definePartsStyle28({
+  icon: baseStyleIcon8
+});
+var list_default = defineMultiStyleConfig28({
+  baseStyle: baseStyle45
+});
 var parts10 = anatomy("ListBox").parts(
   "container",
   "item",