@vygruppen/spor-react 10.6.2 → 10.7.0

package/.turbo/turbo-build.log

@@ -1,5 +1,5 @@
 
-> @vygruppen/spor-react@10.6.2 build
+> @vygruppen/spor-react@10.7.0 build
 > tsup src/index.tsx --dts --treeshake --format cjs,esm
 
 CLI Building entry: src/index.tsx
@@ -9,12 +9,12 @@
 CJS Build start
 ESM Build start
 DTS Build start
-CJS dist/index.js 538.50 KB
-CJS ⚡️ Build success in 2340ms
+CJS dist/index.js 539.38 KB
+CJS ⚡️ Build success in 2260ms
 ESM dist/index.mjs                      2.16 KB
-ESM dist/CountryCodeSelect-ANPDQEJN.mjs 1.22 KB
-ESM dist/chunk-CILVSJHM.mjs             425.04 KB
-ESM ⚡️ Build success in 2341ms
-DTS ⚡️ Build success in 16295ms
-DTS dist/index.d.ts  339.85 KB
-DTS dist/index.d.mts 339.85 KB
+ESM dist/CountryCodeSelect-NZI7KBTH.mjs 1.22 KB
+ESM dist/chunk-Q3JX25BX.mjs             425.89 KB
+ESM ⚡️ Build success in 2261ms
+DTS ⚡️ Build success in 15580ms
+DTS dist/index.d.ts  340.55 KB
+DTS dist/index.d.mts 340.55 KB

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # @vygruppen/spor-react
 
+## 10.7.0
+
+### Minor Changes
+
+- 13a1c22: ProgressBar: New isActive prop
+
+### Patch Changes
+
+- 4603ee1: Divider: Update styling for dashed variant
+
 ## 10.6.2
 
 ### Patch Changes

package/dist/{CountryCodeSelect-ANPDQEJN.mjs → CountryCodeSelect-NZI7KBTH.mjs}

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

package/dist/{chunk-CILVSJHM.mjs → chunk-Q3JX25BX.mjs}

@@ -1841,7 +1841,7 @@ var texts4 = createTexts({
     sv: "Landskod"
   }
 });
-var LazyCountryCodeSelect = React85__default.lazy(() => import('./CountryCodeSelect-ANPDQEJN.mjs'));
+var LazyCountryCodeSelect = React85__default.lazy(() => import('./CountryCodeSelect-NZI7KBTH.mjs'));
 var Radio = forwardRef((props, ref) => {
   return /* @__PURE__ */ React85__default.createElement(Radio$1, { ...props, ref });
 });
@@ -2323,6 +2323,7 @@ var ProgressBar = ({
   height = "0.5rem",
   width = "100%",
   "aria-label": ariaLabel,
+  isActive = true,
   ...rest
 }) => {
   const { t: t2 } = useTranslation();
@@ -2335,7 +2336,7 @@ var ProgressBar = ({
     value,
     "aria-label": ariaLabel || t2(texts6.label(value))
   });
-  const styles3 = useMultiStyleConfig("ProgressBar", {});
+  const styles3 = useMultiStyleConfig("ProgressBar", { isActive });
   return /* @__PURE__ */ React85__default.createElement(React85__default.Fragment, null, /* @__PURE__ */ React85__default.createElement(
     Box,
     {
@@ -2344,7 +2345,14 @@ var ProgressBar = ({
       __css: styles3.container,
       ...rest
     },
-    /* @__PURE__ */ React85__default.createElement(Box, { width, __css: styles3.background }, /* @__PURE__ */ React85__default.createElement(Box, { __css: styles3.progress, height, width: `${value}%` })),
+    /* @__PURE__ */ React85__default.createElement(Box, { width, __css: styles3.background }, /* @__PURE__ */ React85__default.createElement(
+      Box,
+      {
+        __css: styles3.progress,
+        height,
+        width: isActive ? `${value}%` : "100%"
+      }
+    )),
     currentLoadingText && /* @__PURE__ */ React85__default.createElement(Text, { sx: styles3.description, ...labelProps }, currentLoadingText)
   ));
 };
@@ -12025,37 +12033,41 @@ var config14 = helpers8.defineMultiStyleConfig({
   }
 });
 var datepicker_default = config14;
-var baseStyle43 = defineStyle((props) => ({
-  borderColor: mode("blackAlpha.300", "whiteAlpha.300")(props)
-}));
-var variantSolid5 = defineStyle({
-  borderStyle: "solid"
-});
-var variantDashed2 = defineStyle({
-  borderStyle: "dashed"
-});
-var variants14 = {
-  solid: variantSolid5,
-  dashed: variantDashed2
-};
-var sizes25 = {
-  sm: {
-    borderWidth: "1px",
-    borderRadius: "0.5px"
+var isSolid = (props) => props.variant === "solid";
+var isDashed = (props) => props.variant === "dashed";
+var divider_default = defineStyleConfig({
+  baseStyle: (props) => ({
+    borderColor: mode("blackAlpha.300", "whiteAlpha.300")(props)
+  }),
+  variants: {
+    solid: {
+      borderStyle: "solid"
+    },
+    dashed: (props) => ({
+      backgroundImage: `repeating-linear-gradient(90deg, ${mode("blackAlpha.300", "whiteAlpha.300")(props)}, ${mode("blackAlpha.300", "whiteAlpha.300")(props)} 4px, transparent 4px, transparent 10px)`,
+      backgroundPosition: "left bottom",
+      backgroundRepeat: "repeat-x",
+      backgroundSize: "100% 3px",
+      borderRadius: props.size === "sm" ? "0.5px" : props.size === "md" ? "1px" : "1.5px"
+    })
   },
-  md: {
-    borderWidth: "2px",
-    borderRadius: "1px"
+  sizes: {
+    sm: (props) => ({
+      borderWidth: isSolid(props) ? "1px" : void 0,
+      borderRadius: isSolid(props) ? "0.5px" : void 0,
+      height: isDashed(props) ? "1px" : void 0
+    }),
+    md: (props) => ({
+      borderWidth: isSolid(props) ? "2px" : void 0,
+      borderRadius: isSolid(props) ? "1px" : "10px",
+      height: isDashed(props) ? "2px" : void 0
+    }),
+    lg: (props) => ({
+      borderWidth: isSolid(props) ? "3px" : void 0,
+      borderRadius: isSolid(props) ? "1.5px" : void 0,
+      height: isDashed(props) ? "3px" : void 0
+    })
   },
-  lg: {
-    borderWidth: "3px",
-    borderRadius: "1.5px"
-  }
-};
-var divider_default = defineStyleConfig({
-  baseStyle: baseStyle43,
-  variants: variants14,
-  sizes: sizes25,
   defaultProps: {
     variant: "solid",
     size: "md"
@@ -13014,7 +13026,7 @@ var link_default = config24;
 
 // src/theme/components/list.ts
 var { defineMultiStyleConfig: defineMultiStyleConfig28, definePartsStyle: definePartsStyle28 } = createMultiStyleConfigHelpers(listAnatomy.keys);
-var baseStyle44 = definePartsStyle28({
+var baseStyle43 = definePartsStyle28({
   container: {
     fontSize: ["mobile.sm", "desktop.sm"]
   },
@@ -13028,7 +13040,7 @@ var baseStyle44 = definePartsStyle28({
   }
 });
 var list_default = defineMultiStyleConfig28({
-  baseStyle: baseStyle44
+  baseStyle: baseStyle43
 });
 function outlineBorder(state2, props) {
   switch (state2) {
@@ -13477,19 +13489,16 @@ var config31 = helpers23.defineMultiStyleConfig({
     },
     background: {
       display: "flex",
-      backgroundColor: mode(
+      backgroundColor: props.isActive ? mode(
         "brand.surface.default.dark",
         "brand.surface.default.light"
-      )(props),
+      )(props) : void 0,
       borderRadius: "sm",
       justifyContent: "flex-start",
       marginX: "auto"
     },
     progress: {
-      backgroundColor: mode(
-        "brand.surface.active.light",
-        "brand.surface.active.dark"
-      )(props),
+      backgroundColor: props.isActive ? mode("brand.surface.active.light", "brand.surface.active.dark")(props) : mode("icon.disabled.light", "icon.disabled.dark")(props),
       borderRadius: "sm",
       maxWidth: "100%",
       transition: "width .2s ease-out"
@@ -14756,17 +14765,17 @@ function useSizes({
   getNodes,
   observeMutation = true
 }) {
-  const [sizes26, setSizes] = useState([]);
+  const [sizes25, setSizes] = useState([]);
   const [count, setCount] = useState(0);
   useSafeLayoutEffect(() => {
     const elements = getNodes();
     const cleanups = elements.map(
       (element, index) => trackElementSize(element, (size2) => {
-        setSizes((sizes27) => {
+        setSizes((sizes26) => {
           return [
-            ...sizes27.slice(0, index),
+            ...sizes26.slice(0, index),
             size2,
-            ...sizes27.slice(index + 1)
+            ...sizes26.slice(index + 1)
           ];
         });
       })
@@ -14785,7 +14794,7 @@ function useSizes({
       });
     };
   }, [count]);
-  return sizes26;
+  return sizes25;
 }
 function isRef(ref) {
   return typeof ref === "object" && ref !== null && "current" in ref;

package/dist/index.d.mts

@@ -1760,6 +1760,8 @@ type ProgressBarProps = BoxProps & {
      * Defaults to 5000 (5 seconds).
      */
     labelRotationDelay?: number;
+    /** Pass to disable the color of the component */
+    isActive?: boolean;
 };
 /**
  * Shows the progress of a loading process.
@@ -1788,7 +1790,7 @@ type ProgressBarProps = BoxProps & {
  * <ProgressBar value={50} aria-label="Loading..." />
  * ```
  */
-declare const ProgressBar: ({ value, label, labelRotationDelay, height, width, "aria-label": ariaLabel, ...rest }: ProgressBarProps) => React.JSX.Element;
+declare const ProgressBar: ({ value, label, labelRotationDelay, height, width, "aria-label": ariaLabel, isActive, ...rest }: ProgressBarProps) => React.JSX.Element;
 
 type ProgressLoaderProps = BoxProps & {
     /** The percentage of progress made.
@@ -3759,25 +3761,32 @@ declare const theme: {
                 borderColor: string;
             }) | undefined;
             sizes?: {
-                sm: {
-                    borderWidth: string;
-                    borderRadius: string;
+                sm: (props: _chakra_ui_styled_system.StyleFunctionProps) => {
+                    borderWidth: string | undefined;
+                    borderRadius: string | undefined;
+                    height: string | undefined;
                 };
-                md: {
-                    borderWidth: string;
+                md: (props: _chakra_ui_styled_system.StyleFunctionProps) => {
+                    borderWidth: string | undefined;
                     borderRadius: string;
+                    height: string | undefined;
                 };
-                lg: {
-                    borderWidth: string;
-                    borderRadius: string;
+                lg: (props: _chakra_ui_styled_system.StyleFunctionProps) => {
+                    borderWidth: string | undefined;
+                    borderRadius: string | undefined;
+                    height: string | undefined;
                 };
             } | undefined;
             variants?: {
                 solid: {
                     borderStyle: string;
                 };
-                dashed: {
-                    borderStyle: string;
+                dashed: (props: _chakra_ui_styled_system.StyleFunctionProps) => {
+                    backgroundImage: string;
+                    backgroundPosition: string;
+                    backgroundRepeat: string;
+                    backgroundSize: string;
+                    borderRadius: string;
                 };
             } | undefined;
             defaultProps?: {
@@ -5453,7 +5462,7 @@ declare const theme: {
                 };
                 background: {
                     display: string;
-                    backgroundColor: string;
+                    backgroundColor: string | undefined;
                     borderRadius: string;
                     justifyContent: string;
                     marginX: string;

package/dist/index.d.ts

@@ -1760,6 +1760,8 @@ type ProgressBarProps = BoxProps & {
      * Defaults to 5000 (5 seconds).
      */
     labelRotationDelay?: number;
+    /** Pass to disable the color of the component */
+    isActive?: boolean;
 };
 /**
  * Shows the progress of a loading process.
@@ -1788,7 +1790,7 @@ type ProgressBarProps = BoxProps & {
  * <ProgressBar value={50} aria-label="Loading..." />
  * ```
  */
-declare const ProgressBar: ({ value, label, labelRotationDelay, height, width, "aria-label": ariaLabel, ...rest }: ProgressBarProps) => React.JSX.Element;
+declare const ProgressBar: ({ value, label, labelRotationDelay, height, width, "aria-label": ariaLabel, isActive, ...rest }: ProgressBarProps) => React.JSX.Element;
 
 type ProgressLoaderProps = BoxProps & {
     /** The percentage of progress made.
@@ -3759,25 +3761,32 @@ declare const theme: {
                 borderColor: string;
             }) | undefined;
             sizes?: {
-                sm: {
-                    borderWidth: string;
-                    borderRadius: string;
+                sm: (props: _chakra_ui_styled_system.StyleFunctionProps) => {
+                    borderWidth: string | undefined;
+                    borderRadius: string | undefined;
+                    height: string | undefined;
                 };
-                md: {
-                    borderWidth: string;
+                md: (props: _chakra_ui_styled_system.StyleFunctionProps) => {
+                    borderWidth: string | undefined;
                     borderRadius: string;
+                    height: string | undefined;
                 };
-                lg: {
-                    borderWidth: string;
-                    borderRadius: string;
+                lg: (props: _chakra_ui_styled_system.StyleFunctionProps) => {
+                    borderWidth: string | undefined;
+                    borderRadius: string | undefined;
+                    height: string | undefined;
                 };
             } | undefined;
             variants?: {
                 solid: {
                     borderStyle: string;
                 };
-                dashed: {
-                    borderStyle: string;
+                dashed: (props: _chakra_ui_styled_system.StyleFunctionProps) => {
+                    backgroundImage: string;
+                    backgroundPosition: string;
+                    backgroundRepeat: string;
+                    backgroundSize: string;
+                    borderRadius: string;
                 };
             } | undefined;
             defaultProps?: {
@@ -5453,7 +5462,7 @@ declare const theme: {
                 };
                 background: {
                     display: string;
-                    backgroundColor: string;
+                    backgroundColor: string | undefined;
                     borderRadius: string;
                     justifyContent: string;
                     marginX: string;

package/dist/index.js

@@ -2726,6 +2726,7 @@ var init_ProgressBar = __esm({
       height = "0.5rem",
       width = "100%",
       "aria-label": ariaLabel,
+      isActive = true,
       ...rest
     }) => {
       const { t: t2 } = useTranslation();
@@ -2738,7 +2739,7 @@ var init_ProgressBar = __esm({
         value,
         "aria-label": ariaLabel || t2(texts7.label(value))
       });
-      const styles3 = react.useMultiStyleConfig("ProgressBar", {});
+      const styles3 = react.useMultiStyleConfig("ProgressBar", { isActive });
       return /* @__PURE__ */ React86__namespace.default.createElement(React86__namespace.default.Fragment, null, /* @__PURE__ */ React86__namespace.default.createElement(
         react.Box,
         {
@@ -2747,7 +2748,14 @@ var init_ProgressBar = __esm({
           __css: styles3.container,
           ...rest
         },
-        /* @__PURE__ */ React86__namespace.default.createElement(react.Box, { width, __css: styles3.background }, /* @__PURE__ */ React86__namespace.default.createElement(react.Box, { __css: styles3.progress, height, width: `${value}%` })),
+        /* @__PURE__ */ React86__namespace.default.createElement(react.Box, { width, __css: styles3.background }, /* @__PURE__ */ React86__namespace.default.createElement(
+          react.Box,
+          {
+            __css: styles3.progress,
+            height,
+            width: isActive ? `${value}%` : "100%"
+          }
+        )),
         currentLoadingText && /* @__PURE__ */ React86__namespace.default.createElement(react.Text, { sx: styles3.description, ...labelProps }, currentLoadingText)
       ));
     };
@@ -13595,41 +13603,45 @@ var init_datepicker2 = __esm({
     datepicker_default = config14;
   }
 });
-var baseStyle43, variantSolid5, variantDashed2, variants14, sizes25, divider_default;
+var isSolid, isDashed, divider_default;
 var init_divider = __esm({
   "src/theme/components/divider.ts"() {
     init_dist3();
-    baseStyle43 = defineStyle((props) => ({
-      borderColor: themeTools.mode("blackAlpha.300", "whiteAlpha.300")(props)
-    }));
-    variantSolid5 = defineStyle({
-      borderStyle: "solid"
-    });
-    variantDashed2 = defineStyle({
-      borderStyle: "dashed"
-    });
-    variants14 = {
-      solid: variantSolid5,
-      dashed: variantDashed2
-    };
-    sizes25 = {
-      sm: {
-        borderWidth: "1px",
-        borderRadius: "0.5px"
+    isSolid = (props) => props.variant === "solid";
+    isDashed = (props) => props.variant === "dashed";
+    divider_default = defineStyleConfig({
+      baseStyle: (props) => ({
+        borderColor: themeTools.mode("blackAlpha.300", "whiteAlpha.300")(props)
+      }),
+      variants: {
+        solid: {
+          borderStyle: "solid"
+        },
+        dashed: (props) => ({
+          backgroundImage: `repeating-linear-gradient(90deg, ${themeTools.mode("blackAlpha.300", "whiteAlpha.300")(props)}, ${themeTools.mode("blackAlpha.300", "whiteAlpha.300")(props)} 4px, transparent 4px, transparent 10px)`,
+          backgroundPosition: "left bottom",
+          backgroundRepeat: "repeat-x",
+          backgroundSize: "100% 3px",
+          borderRadius: props.size === "sm" ? "0.5px" : props.size === "md" ? "1px" : "1.5px"
+        })
       },
-      md: {
-        borderWidth: "2px",
-        borderRadius: "1px"
+      sizes: {
+        sm: (props) => ({
+          borderWidth: isSolid(props) ? "1px" : void 0,
+          borderRadius: isSolid(props) ? "0.5px" : void 0,
+          height: isDashed(props) ? "1px" : void 0
+        }),
+        md: (props) => ({
+          borderWidth: isSolid(props) ? "2px" : void 0,
+          borderRadius: isSolid(props) ? "1px" : "10px",
+          height: isDashed(props) ? "2px" : void 0
+        }),
+        lg: (props) => ({
+          borderWidth: isSolid(props) ? "3px" : void 0,
+          borderRadius: isSolid(props) ? "1.5px" : void 0,
+          height: isDashed(props) ? "3px" : void 0
+        })
       },
-      lg: {
-        borderWidth: "3px",
-        borderRadius: "1.5px"
-      }
-    };
-    divider_default = defineStyleConfig({
-      baseStyle: baseStyle43,
-      variants: variants14,
-      sizes: sizes25,
       defaultProps: {
         variant: "solid",
         size: "md"
@@ -14671,13 +14683,13 @@ var init_link2 = __esm({
 });
 
 // src/theme/components/list.ts
-var defineMultiStyleConfig28, definePartsStyle28, baseStyle44, list_default;
+var defineMultiStyleConfig28, definePartsStyle28, baseStyle43, list_default;
 var init_list2 = __esm({
   "src/theme/components/list.ts"() {
     init_dist4();
     init_dist3();
     ({ defineMultiStyleConfig: defineMultiStyleConfig28, definePartsStyle: definePartsStyle28 } = createMultiStyleConfigHelpers(listAnatomy.keys));
-    baseStyle44 = definePartsStyle28({
+    baseStyle43 = definePartsStyle28({
       container: {
         fontSize: ["mobile.sm", "desktop.sm"]
       },
@@ -14691,7 +14703,7 @@ var init_list2 = __esm({
       }
     });
     list_default = defineMultiStyleConfig28({
-      baseStyle: baseStyle44
+      baseStyle: baseStyle43
     });
   }
 });
@@ -15200,19 +15212,16 @@ var init_progress_bar = __esm({
         },
         background: {
           display: "flex",
-          backgroundColor: themeTools.mode(
+          backgroundColor: props.isActive ? themeTools.mode(
             "brand.surface.default.dark",
             "brand.surface.default.light"
-          )(props),
+          )(props) : void 0,
           borderRadius: "sm",
           justifyContent: "flex-start",
           marginX: "auto"
         },
         progress: {
-          backgroundColor: themeTools.mode(
-            "brand.surface.active.light",
-            "brand.surface.active.dark"
-          )(props),
+          backgroundColor: props.isActive ? themeTools.mode("brand.surface.active.light", "brand.surface.active.dark")(props) : themeTools.mode("icon.disabled.light", "icon.disabled.dark")(props),
           borderRadius: "sm",
           maxWidth: "100%",
           transition: "width .2s ease-out"
@@ -16760,17 +16769,17 @@ function useSizes({
   getNodes,
   observeMutation = true
 }) {
-  const [sizes26, setSizes] = React86.useState([]);
+  const [sizes25, setSizes] = React86.useState([]);
   const [count, setCount] = React86.useState(0);
   useSafeLayoutEffect(() => {
     const elements = getNodes();
     const cleanups = elements.map(
       (element, index) => trackElementSize(element, (size2) => {
-        setSizes((sizes27) => {
+        setSizes((sizes26) => {
           return [
-            ...sizes27.slice(0, index),
+            ...sizes26.slice(0, index),
             size2,
-            ...sizes27.slice(index + 1)
+            ...sizes26.slice(index + 1)
           ];
         });
       })
@@ -16789,7 +16798,7 @@ function useSizes({
       });
     };
   }, [count]);
-  return sizes26;
+  return sizes25;
 }
 function isRef(ref) {
   return typeof ref === "object" && ref !== null && "current" in ref;

package/dist/index.mjs

@@ -1 +1 @@
-export { Accordion, AccordionButton, AccordionIcon, AccordionItem, AccordionPanel, AttachedInputs, Badge, Box, Brand, Breadcrumb, BreadcrumbItem, BreadcrumbLink, Button, ButtonGroup, CardSelect, CargonetLogo, Center, Checkbox, CheckboxGroup, ChoiceChip, ClosableAlert, CloseButton, Code, Collapse, 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, FullScreenDrawer, 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, Nudge, NumericStepper, OrderedList, Pagination, PasswordInput, PhoneNumberInput, PlayPauseButton, Portal, PressableCard, ProgressBar, ProgressIndicator, ProgressLoader, Radio, RadioCard, RadioCardGroup, RadioCardGroupContext, RadioGroup, ScaleFade, SearchInput, Section, ServiceAlert, SimpleDrawer, SimpleGrid, Skeleton, SkeletonCircle, SkeletonText, SkipButton, Slide, SlideFade, Spacer, SporProvider, Stack, StaticAlert, StaticCard, Stepper, StepperStep, Switch, Tab, TabList, TabPanel, TabPanels, Table, TableCaption, Tabs, Tbody, Td, Text, TextLink, Textarea, Tfoot, Th, Thead, Time, TimePicker, Tooltip, Tr, TravelTag, UnorderedList, VStack, VyLogo, VyLogoPride, WizardNudge, Wrap, WrapItem, brandTheme, createTexts, defineStyleConfig, extendTheme, fontFaces, slugify, theme, tokens, useBreakpointValue, useClipboard, useColorMode, useColorModePreference, useColorModeValue, useControllableProp, useDisclosure, useMediaQuery, useMergeRefs, useOutsideClick, usePrefersReducedMotion, useSize, useTheme, useToast, useToken, useTranslation } from './chunk-CILVSJHM.mjs';
+export { Accordion, AccordionButton, AccordionIcon, AccordionItem, AccordionPanel, AttachedInputs, Badge, Box, Brand, Breadcrumb, BreadcrumbItem, BreadcrumbLink, Button, ButtonGroup, CardSelect, CargonetLogo, Center, Checkbox, CheckboxGroup, ChoiceChip, ClosableAlert, CloseButton, Code, Collapse, 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, FullScreenDrawer, 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, Nudge, NumericStepper, OrderedList, Pagination, PasswordInput, PhoneNumberInput, PlayPauseButton, Portal, PressableCard, ProgressBar, ProgressIndicator, ProgressLoader, Radio, RadioCard, RadioCardGroup, RadioCardGroupContext, RadioGroup, ScaleFade, SearchInput, Section, ServiceAlert, SimpleDrawer, SimpleGrid, Skeleton, SkeletonCircle, SkeletonText, SkipButton, Slide, SlideFade, Spacer, SporProvider, Stack, StaticAlert, StaticCard, Stepper, StepperStep, Switch, Tab, TabList, TabPanel, TabPanels, Table, TableCaption, Tabs, Tbody, Td, Text, TextLink, Textarea, Tfoot, Th, Thead, Time, TimePicker, Tooltip, Tr, TravelTag, UnorderedList, VStack, VyLogo, VyLogoPride, WizardNudge, Wrap, WrapItem, brandTheme, createTexts, defineStyleConfig, extendTheme, fontFaces, slugify, theme, tokens, useBreakpointValue, useClipboard, useColorMode, useColorModePreference, useColorModeValue, useControllableProp, useDisclosure, useMediaQuery, useMergeRefs, useOutsideClick, usePrefersReducedMotion, useSize, useTheme, useToast, useToken, useTranslation } from './chunk-Q3JX25BX.mjs';

package/package.json

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

package/src/loader/ProgressBar.tsx

@@ -31,6 +31,9 @@ type ProgressBarProps = BoxProps & {
    * Defaults to 5000 (5 seconds).
    */
   labelRotationDelay?: number;
+
+  /** Pass to disable the color of the component */
+  isActive?: boolean;
 };
 
 /**
@@ -67,6 +70,7 @@ export const ProgressBar = ({
   height = "0.5rem",
   width = "100%",
   "aria-label": ariaLabel,
+  isActive = true,
   ...rest
 }: ProgressBarProps) => {
   const { t } = useTranslation();
@@ -79,7 +83,7 @@ export const ProgressBar = ({
     value,
     "aria-label": ariaLabel || t(texts.label(value)),
   });
-  const styles = useMultiStyleConfig("ProgressBar", {});
+  const styles = useMultiStyleConfig("ProgressBar", { isActive });
   return (
     <>
       <Box
@@ -89,7 +93,11 @@ export const ProgressBar = ({
         {...rest}
       >
         <Box width={width} __css={styles.background}>
-          <Box __css={styles.progress} height={height} width={`${value}%`} />
+          <Box
+            __css={styles.progress}
+            height={height}
+            width={isActive ? `${value}%` : "100%"}
+          />
         </Box>
         {currentLoadingText && (
           <Text sx={styles.description} {...labelProps}>

package/src/theme/components/divider.ts

@@ -1,42 +1,43 @@
-import { defineStyle, defineStyleConfig } from "@chakra-ui/styled-system";
-import { mode } from "@chakra-ui/theme-tools";
+import { defineStyleConfig } from "@chakra-ui/styled-system";
+import { mode, StyleFunctionProps } from "@chakra-ui/theme-tools";
 
-const baseStyle = defineStyle((props) => ({
-  borderColor: mode("blackAlpha.300", "whiteAlpha.300")(props),
-}));
+const isSolid = (props: StyleFunctionProps) => props.variant === "solid";
+const isDashed = (props: StyleFunctionProps) => props.variant === "dashed";
 
-const variantSolid = defineStyle({
-  borderStyle: "solid",
-});
-
-const variantDashed = defineStyle({
-  borderStyle: "dashed",
-});
-
-const variants = {
-  solid: variantSolid,
-  dashed: variantDashed,
-};
-
-const sizes = {
-  sm: {
-    borderWidth: "1px",
-    borderRadius: "0.5px",
-  },
-  md: {
-    borderWidth: "2px",
-    borderRadius: "1px",
+export default defineStyleConfig({
+  baseStyle: (props) => ({
+    borderColor: mode("blackAlpha.300", "whiteAlpha.300")(props),
+  }),
+  variants: {
+    solid: {
+      borderStyle: "solid",
+    },
+    dashed: (props) => ({
+      backgroundImage: `repeating-linear-gradient(90deg, ${mode("blackAlpha.300", "whiteAlpha.300")(props)}, ${mode("blackAlpha.300", "whiteAlpha.300")(props)} 4px, transparent 4px, transparent 10px)`,
+      backgroundPosition: "left bottom",
+      backgroundRepeat: "repeat-x",
+      backgroundSize: "100% 3px",
+      borderRadius:
+        props.size === "sm" ? "0.5px" : props.size === "md" ? "1px" : "1.5px",
+    }),
   },
-  lg: {
-    borderWidth: "3px",
-    borderRadius: "1.5px",
+  sizes: {
+    sm: (props) => ({
+      borderWidth: isSolid(props) ? "1px" : undefined,
+      borderRadius: isSolid(props) ? "0.5px" : undefined,
+      height: isDashed(props) ? "1px" : undefined,
+    }),
+    md: (props) => ({
+      borderWidth: isSolid(props) ? "2px" : undefined,
+      borderRadius: isSolid(props) ? "1px" : "10px",
+      height: isDashed(props) ? "2px" : undefined,
+    }),
+    lg: (props) => ({
+      borderWidth: isSolid(props) ? "3px" : undefined,
+      borderRadius: isSolid(props) ? "1.5px" : undefined,
+      height: isDashed(props) ? "3px" : undefined,
+    }),
   },
-};
-
-export default defineStyleConfig({
-  baseStyle,
-  variants,
-  sizes,
   defaultProps: {
     variant: "solid",
     size: "md",

package/src/theme/components/progress-bar.ts

@@ -17,19 +17,20 @@ const config = helpers.defineMultiStyleConfig({
     },
     background: {
       display: "flex",
-      backgroundColor: mode(
-        "brand.surface.default.dark",
-        "brand.surface.default.light",
-      )(props),
+      backgroundColor: props.isActive
+        ? mode(
+            "brand.surface.default.dark",
+            "brand.surface.default.light",
+          )(props)
+        : undefined,
       borderRadius: "sm",
       justifyContent: "flex-start",
       marginX: "auto",
     },
     progress: {
-      backgroundColor: mode(
-        "brand.surface.active.light",
-        "brand.surface.active.dark",
-      )(props),
+      backgroundColor: props.isActive
+        ? mode("brand.surface.active.light", "brand.surface.active.dark")(props)
+        : mode("icon.disabled.light", "icon.disabled.dark")(props),
       borderRadius: "sm",
       maxWidth: "100%",
       transition: "width .2s ease-out",