@vygruppen/spor-react 3.7.6 → 3.7.7

package/.turbo/turbo-build.log

@@ -1,5 +1,5 @@
 
-> @vygruppen/spor-react@3.7.6 build
+> @vygruppen/spor-react@3.7.7 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-QJI3YQWW.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-LQEO65MM.mjs".
-CJS dist/index.js 539.15 KB
-CJS ⚡️ Build success in 4394ms
 ESM dist/index.mjs                      2.09 KB
-ESM dist/CountryCodeSelect-IV4VKD4A.mjs 1.19 KB
-ESM dist/chunk-LQEO65MM.mjs             430.76 KB
-ESM ⚡️ Build success in 4394ms
-DTS ⚡️ Build success in 19752ms
-DTS dist/index.d.ts  256.31 KB
-DTS dist/index.d.mts 256.31 KB
+ESM dist/CountryCodeSelect-IAYKP6P5.mjs 1.19 KB
+ESM dist/chunk-QJI3YQWW.mjs             436.49 KB
+ESM ⚡️ Build success in 5119ms
+CJS dist/index.js 546.52 KB
+CJS ⚡️ Build success in 5119ms
+DTS ⚡️ Build success in 20713ms
+DTS dist/index.d.ts  262.65 KB
+DTS dist/index.d.mts 262.65 KB

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @vygruppen/spor-react
 
+## 3.7.7
+
+### Patch Changes
+
+- 2ffdd3b7: Tabs: changed from default to base
+- d12c315d: travelTag: add support for dark mode
+- b6884fa6: Tabs: Update variants and design for tabs
+- fb6605c6: Card: Add dark mode support
+- 4c078f92: Design tokens: Change the color for lokalbuss
+  InfoTag: Add dark mode support
+- eaf12b4b: Link: Add dark mode support
+- e103af4b: Button: Make buttons break on several lines if there isn't space
+- bc846dd5: Fab:Add dark mode support
+- Updated dependencies [4c078f92]
+  - @vygruppen/spor-design-tokens@3.2.1
+
 ## 3.7.6
 
 ### Patch Changes

package/dist/{CountryCodeSelect-IV4VKD4A.mjs → CountryCodeSelect-IAYKP6P5.mjs}

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

package/dist/{chunk-LQEO65MM.mjs → chunk-QJI3YQWW.mjs}

@@ -1203,7 +1203,15 @@ var Button = forwardRef((props, ref) => {
         }
       )
     ),
-    /* @__PURE__ */ React50__default.createElement(Box, { visibility: isLoading ? "hidden" : "visible" }, children)
+    /* @__PURE__ */ React50__default.createElement(
+      Box,
+      {
+        visibility: isLoading ? "hidden" : "visible",
+        whiteSpace: "normal",
+        textAlign: "left"
+      },
+      children
+    )
   );
 });
 function getLoaderWidth(size2) {
@@ -5090,7 +5098,7 @@ var texts14 = createTexts({
     sv: "Telefonnummer"
   }
 });
-var LazyCountryCodeSelect = React50__default.lazy(() => import('./CountryCodeSelect-IV4VKD4A.mjs'));
+var LazyCountryCodeSelect = React50__default.lazy(() => import('./CountryCodeSelect-IAYKP6P5.mjs'));
 var Radio = forwardRef((props, ref) => {
   return /* @__PURE__ */ React50__default.createElement(Radio$1, { ...props, ref });
 });
@@ -11413,7 +11421,9 @@ var config6 = defineStyleConfig$1({
     fontWeight: "bold",
     transitionProperty: "common",
     transitionDuration: "normal",
-    px: 3,
+    textWrap: "wrap",
+    paddingX: 3,
+    paddingY: 1,
     _focus: {
       boxShadow: 0,
       outline: 0
@@ -11662,7 +11672,7 @@ var config6 = defineStyleConfig$1({
       minHeight: 5,
       minWidth: 5,
       fontSize: "16px",
-      px: 2
+      paddingX: 2
     }
   },
   defaultProps: {
@@ -11689,7 +11699,7 @@ var config7 = defineStyleConfig$1({
       ...focusVisible({
         focus: {
           boxShadow: getBoxShadowString({
-            borderColor: "greenHaze",
+            borderColor: mode("greenHaze", "azure")(props),
             borderWidth: 2,
             isInset: false
           }),
@@ -11714,12 +11724,19 @@ var config7 = defineStyleConfig$1({
   })
 });
 var card_default = config7;
-function getColorSchemeBaseProps({ colorScheme }) {
+var getColorSchemeBaseProps = (props) => {
   var _a6;
+  const { colorScheme, size: size2 } = props;
+  const baseShadow = size2 === "lg" ? "md" : "sm";
   switch (colorScheme) {
     case "white":
       return {
-        backgroundColor: "white"
+        backgroundColor: mode("white", "whiteAlpha.100")(props),
+        boxShadow: getBoxShadowString({
+          baseShadow,
+          borderColor: "silver",
+          isInset: false
+        })
       };
     case "grey":
       return {
@@ -11735,7 +11752,7 @@ function getColorSchemeBaseProps({ colorScheme }) {
         backgroundColor: ((_a6 = colors[colorScheme]) == null ? void 0 : _a6[100]) ?? "platinum"
       };
   }
-}
+};
 function getColorSchemeClickableProps({ colorScheme, size: size2 }) {
   var _a6, _b5;
   const baseShadow = size2 === "lg" ? "md" : "sm";
@@ -11767,12 +11784,14 @@ function getColorSchemeClickableProps({ colorScheme, size: size2 }) {
       };
   }
 }
-function getColorSchemeHoverProps({ colorScheme, size: size2 }) {
+var getColorSchemeHoverProps = (props) => {
   var _a6, _b5;
+  const { colorScheme, size: size2 } = props;
   const baseShadow = size2 === "lg" ? "lg" : "md";
   switch (colorScheme) {
     case "white":
       return {
+        backgroundColor: mode("white", "whiteAlpha.200")(props),
         boxShadow: getBoxShadowString({
           baseShadow,
           borderColor: colors.steel,
@@ -11797,14 +11816,15 @@ function getColorSchemeHoverProps({ colorScheme, size: size2 }) {
         })
       };
   }
-}
-function getColorSchemeActiveProps({ colorScheme, size: size2 }) {
+};
+var getColorSchemeActiveProps = (props) => {
   var _a6, _b5;
+  const { colorScheme, size: size2 } = props;
   const baseShadow = size2 === "lg" ? "sm" : "none";
   switch (colorScheme) {
     case "white":
       return {
-        backgroundColor: "mint",
+        backgroundColor: mode("mint", "teal")(props),
         boxShadow: getBoxShadowString({
           baseShadow,
           borderColor: colors.silver,
@@ -11830,7 +11850,7 @@ function getColorSchemeActiveProps({ colorScheme, size: size2 }) {
         })
       };
   }
-}
+};
 var parts2 = anatomy("card-select").parts("trigger", "card");
 var helpers3 = createMultiStyleConfigHelpers(parts2.keys);
 var config8 = helpers3.defineMultiStyleConfig({
@@ -12620,7 +12640,82 @@ var config15 = helpers8.defineMultiStyleConfig({
         color: "darkTeal",
         _active: { color: "darkTeal", backgroundColor: "lightGrey" }
       }
-    }
+    },
+    brand: (props) => ({
+      container: {
+        backgroundColor: mode("darkTeal", "mint")(props),
+        color: mode("white", "darkTeal")(props),
+        _active: { backgroundColor: mode("pine", "white")(props) },
+        _hover: {
+          backgroundColor: mode("night", "seaMist")(props)
+        },
+        ...focusVisible({
+          focus: {
+            boxShadow: mode(
+              `${props.theme.shadows.md}, inset 0 0 0 4px ${props.theme.colors.darkTeal}, inset 0 0 0 6px ${props.theme.colors.white}`,
+              `${props.theme.shadows.md}, inset 0 0 0 4px ${props.theme.colors.mint}, inset 0 0 0 6px ${props.theme.colors.darkTeal}`
+            )(props),
+            outline: "none"
+          },
+          notFocus: {
+            boxShadow: "md"
+          }
+        })
+      }
+    }),
+    base: (props) => ({
+      container: {
+        backgroundColor: mode("white", "whiteAlpha.100")(props),
+        color: mode("darkGrey", "white")(props),
+        _active: {
+          backgroundColor: mode("mint", "whiteAlpha.100")(props),
+          color: mode("darkGrey", "white")(props)
+        },
+        _hover: {
+          backgroundColor: mode("white", "transparent")(props),
+          boxShadow: mode(`inset 0 0 0 2px ${props.theme.colors.darkGrey}`, `inset 0 0 0 2px ${props.theme.colors.white}`)(props),
+          color: mode("darkGrey", "white")(props)
+        },
+        ...focusVisible({
+          focus: {
+            boxShadow: mode(
+              `${props.theme.shadows.md}, inset 0 0 0 4px ${props.theme.colors.white}, inset 0 0 0 6px ${props.theme.colors.darkGrey}`,
+              `${props.theme.shadows.md}, inset 0 0 0 4px ${props.theme.colors.brightRed}, inset 0 0 0 6px ${props.theme.colors.white}`
+            )(props),
+            outline: "none"
+          },
+          notFocus: {
+            boxShadow: "md"
+          }
+        })
+      }
+    }),
+    accent: (props) => ({
+      container: {
+        backgroundColor: mode("mint", "pine")(props),
+        color: mode("darkTeal", "white")(props),
+        _active: {
+          backgroundColor: mode("seaMist", "whiteAlpha.100")(props),
+          color: mode("darkTeal", "white")(props)
+        },
+        _hover: {
+          backgroundColor: mode("coralGreen", "whiteAlpha.200")(props),
+          color: mode("darkTeal", "white")(props)
+        },
+        ...focusVisible({
+          focus: {
+            boxShadow: mode(
+              `${props.theme.shadows.md}, inset 0 0 0 4px ${props.theme.colors.mint}, inset 0 0 0 6px ${props.theme.colors.azure}`,
+              `${props.theme.shadows.md}, inset 0 0 0 4px ${props.theme.colors.pine}, inset 0 0 0 6px ${props.theme.colors.azure}`
+            )(props),
+            outline: "none"
+          },
+          notFocus: {
+            boxShadow: "md"
+          }
+        })
+      }
+    })
   },
   defaultProps: {
     variant: "dark"
@@ -12906,9 +13001,9 @@ var config19 = helpers11.defineMultiStyleConfig({
         backgroundColor: "linjetag.altTransportLight"
       }
     },
-    walk: {
+    walk: (props) => ({
       container: {
-        backgroundColor: "white",
+        backgroundColor: mode("white", "transparent")(props),
         _disabled: {
           backgroundColor: "white"
         }
@@ -12917,6 +13012,7 @@ var config19 = helpers11.defineMultiStyleConfig({
         border: "none",
         position: "relative",
         left: -1,
+        backgroundColor: mode("white", "transparent")(props),
         "[aria-disabled=true] &": {
           backgroundColor: "transparent",
           color: "osloGrey"
@@ -12932,12 +13028,13 @@ var config19 = helpers11.defineMultiStyleConfig({
       },
       title: {
         fontSize: "mobile.xs",
-        fontWeight: "normal"
+        fontWeight: "normal",
+        color: mode("black", "white")(props)
       },
       description: {
         display: "none"
       }
-    }
+    })
   },
   sizes: {
     sm: {
@@ -13044,6 +13141,9 @@ var config20 = helpers12.defineMultiStyleConfig({
     iconContainer: {
       ...travel_tag_default.baseStyle(props).iconContainer,
       padding: 1
+    },
+    textContainer: {
+      color: mode("darkGrey", "white")(props)
     }
   }),
   sizes: {
@@ -13069,6 +13169,17 @@ var config20 = helpers12.defineMultiStyleConfig({
   },
   defaultProps: {
     size: "md"
+  },
+  variants: {
+    "walk": (props) => ({
+      iconContainer: {
+        backgroundColor: mode("white", "transparent")(props),
+        boxShadow: mode(
+          `${props.theme.shadows.md}, inset 0 0 0 2px ${props.theme.colors.black[200]}`,
+          `${props.theme.shadows.md}, inset 0 0 0 2px ${props.theme.colors.whiteAlpha[400]}`
+        )(props)
+      }
+    })
   }
 });
 var info_tag_default = config20;
@@ -13244,7 +13355,7 @@ var config22 = helpers14.defineMultiStyleConfig({
         }
       }
     },
-    walk: {
+    walk: (props) => ({
       iconContainer: {
         backgroundColor: "white",
         borderWidth: 1,
@@ -13252,12 +13363,12 @@ var config22 = helpers14.defineMultiStyleConfig({
         borderColor: "blackAlpha.200"
       },
       icon: {
-        color: "darkGrey",
+        color: mode("darkGrey", "white")(props),
         "[aria-disabled=true] &": {
           color: "osloGrey"
         }
       }
-    }
+    })
   },
   sizes: {
     sm: {
@@ -13295,7 +13406,7 @@ var config23 = defineStyleConfig$1({
     backgroundPosition: "0 100%",
     backgroundRepeat: "no-repeat",
     borderRadius: "none",
-    pb: "2px",
+    padding: "2px",
     color: "inherit",
     display: "inline",
     position: "relative",
@@ -13316,12 +13427,12 @@ var config23 = defineStyleConfig$1({
   },
   variants: {
     primary: (props) => ({
-      color: mode("pine", "seaMist")(props),
+      color: mode("pine", "coralGreen")(props),
       ...focusVisible({
         focus: {
-          backgroundColor: "transparent",
+          backgroundColor: mode("pine", "white")(props),
+          color: mode("white", "pine")(props),
           boxShadow: getBoxShadowString({
-            borderColor: "azure",
             borderWidth: 2,
             isInset: false
           })
@@ -13333,34 +13444,20 @@ var config23 = defineStyleConfig$1({
         }
       }),
       _hover: {
-        color: "white",
-        backgroundColor: "pine",
-        boxShadow: getBoxShadowString({
-          borderColor: "pine",
-          borderWidth: 2,
-          isInset: false
-        })
+        color: mode("darkTeal", "white")(props),
+        backgroundColor: mode("coralGreen", "whiteAlpha.200")(props)
       },
       _active: {
-        color: "white",
-        backgroundColor: "azure",
-        boxShadow: getBoxShadowString({
-          borderColor: "azure",
-          borderWidth: 2,
-          isInset: false
-        })
+        color: mode("pine", "white")(props),
+        backgroundColor: mode("mint", "whiteAlpha.100")(props)
       }
     }),
     secondary: (props) => ({
       color: mode("darkGrey", "white")(props),
       ...focusVisible({
         focus: {
-          backgroundColor: "transparent",
-          boxShadow: getBoxShadowString({
-            borderColor: "azure",
-            borderWidth: 2,
-            isInset: false
-          })
+          backgroundColor: mode("darkGrey", "white")(props),
+          color: mode("white", "darkTeal")(props)
         },
         notFocus: {
           boxShadow: "none",
@@ -13368,20 +13465,12 @@ var config23 = defineStyleConfig$1({
         }
       }),
       _hover: {
-        backgroundColor: mode("seaMist", "pine")(props),
-        boxShadow: getBoxShadowString({
-          borderColor: mode("seaMist", "pine")(props),
-          borderWidth: 2,
-          isInset: false
-        })
+        backgroundColor: mode("blackAlpha.100", "whiteAlpha.200")(props),
+        color: mode("darkGrey", "white")(props)
       },
       _active: {
-        backgroundColor: mode("mint", "whiteAlpha.200")(props),
-        boxShadow: getBoxShadowString({
-          borderColor: mode("mint", "whiteAlpha.200")(props),
-          borderWidth: 2,
-          isInset: false
-        })
+        backgroundColor: mode("mint", "whiteAlpha.100")(props),
+        color: mode("darkGrey", "white")(props)
       }
     }),
     /**
@@ -14602,6 +14691,14 @@ var getTabColorSchemeProps = (props) => {
       return {
         color: "darkGrey"
       };
+    case "base":
+      return {
+        color: mode("darkGrey", "white")(props)
+      };
+    case "accent":
+      return {
+        color: mode("darkTeal", "white")(props)
+      };
     default:
       return {};
   }
@@ -14630,6 +14727,32 @@ var getTabColorSchemeSelectedProps = (props) => {
           color: "darkTeal"
         }
       };
+    case "base":
+      return {
+        backgroundColor: "pine",
+        color: "white",
+        _hover: {
+          backgroundColor: "darkTeal",
+          color: "white"
+        },
+        _active: {
+          backgroundColor: "darkTeal",
+          color: "white"
+        }
+      };
+    case "accent":
+      return {
+        backgroundColor: "pine",
+        color: "white",
+        _hover: {
+          backgroundColor: "darkTeal",
+          color: "white"
+        },
+        _active: {
+          backgroundColor: "darkTeal",
+          color: "white"
+        }
+      };
     default:
       return {
         backgroundColor: "darkTeal",
@@ -14651,6 +14774,14 @@ var getTabColorSchemeFocusProps = (props) => {
       return {
         boxShadow: `inset 0 0 0 2px ${props.theme.colors.white}`
       };
+    case "base":
+      return {
+        boxShadow: `inset 0 0 0 2px ${props.theme.colors.azure}`
+      };
+    case "accent":
+      return {
+        boxShadow: `inset 0 0 0 2px ${props.theme.colors.azure}`
+      };
     default:
       return {
         boxShadow: `inset 0 0 0 2px ${props.theme.colors.greenHaze}`
@@ -14675,6 +14806,16 @@ var getTabColorSchemeHoverProps = (props) => {
       return {
         backgroundColor: "silver"
       };
+    case "base":
+      return {
+        boxShadow: mode(`inset 0 0 0 2px ${props.theme.colors.darkGrey}`, `inset 0 0 0 2px ${props.theme.colors.white}`)(props),
+        color: mode("darkGrey", "white")(props)
+      };
+    case "accent":
+      return {
+        backgroundColor: mode("seaMist", "whiteAlpha.200")(props),
+        color: mode("darkTeal", "white")(props)
+      };
     default:
       return {};
   }
@@ -14701,6 +14842,16 @@ var getTabColorSchemeActiveProps = (props) => {
         backgroundColor: "lightGrey",
         color: "darkGrey"
       };
+    case "base":
+      return {
+        backgroundColor: mode("mint", "whiteAlpha.100")(props),
+        color: mode("darkGrey", "white")(props)
+      };
+    case "accent":
+      return {
+        backgroundColor: mode("seaMist", "whiteAlpha.100")(props),
+        color: mode("darkTeal", "white")(props)
+      };
     default:
       return {};
   }
@@ -14723,6 +14874,14 @@ var getTabColorSchemeDisabledProps = (props) => {
       return {
         color: "steel"
       };
+    case "base":
+      return {
+        color: mode("blackAlpha.400", "whiteAlpha.400")(props)
+      };
+    case "accent":
+      return {
+        color: mode("blackAlpha.400", "whiteAlpha.400")(props)
+      };
     default:
       return {};
   }
@@ -14744,6 +14903,17 @@ var getTablistColorSchemeProps = (props) => {
         backgroundColor: "platinum",
         color: "darkGrey"
       };
+    case "base":
+      return {
+        backgroundColor: mode("white", "transparent")(props),
+        color: "darkGrey",
+        boxShadow: mode(`inset 0 0 0 1px ${props.theme.colors.blackAlpha["400"]}`, `inset 0 0 0 1px ${props.theme.colors.whiteAlpha["400"]}`)(props)
+      };
+    case "accent":
+      return {
+        backgroundColor: mode("mint", "whiteAlpha.100")(props),
+        color: "darkTeal"
+      };
     default:
       return {};
   }