@vygruppen/spor-react 4.0.1 → 4.0.2

package/.turbo/turbo-build.log

@@ -1,5 +1,5 @@
 
-> @vygruppen/spor-react@4.0.1 build
+> @vygruppen/spor-react@4.0.2 build
 > tsup src/index.tsx --dts --treeshake --format cjs,esm
 
 CLI Building entry: src/index.tsx
@@ -8,15 +8,15 @@
 CLI Target: node16
 CJS Build start
 ESM Build start
-DTS Build start
 "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-3SY4N6MP.mjs".
-CJS dist/index.js 550.61 KB
-CJS ⚡️ Build success in 3780ms
+DTS Build start
+"toZoned" and "toTime" are imported from external module "@internationalized/date" but never used in "dist/chunk-MGJQOEU2.mjs".
+CJS dist/index.js 552.34 KB
+CJS ⚡️ Build success in 2656ms
 ESM dist/index.mjs                      2.10 KB
-ESM dist/CountryCodeSelect-HCQZVKWU.mjs 1.19 KB
-ESM dist/chunk-3SY4N6MP.mjs             439.68 KB
-ESM ⚡️ Build success in 3781ms
-DTS ⚡️ Build success in 18223ms
-DTS dist/index.d.ts  264.40 KB
-DTS dist/index.d.mts 264.40 KB
+ESM dist/CountryCodeSelect-WSPQNU6B.mjs 1.19 KB
+ESM dist/chunk-MGJQOEU2.mjs             441.05 KB
+ESM ⚡️ Build success in 2657ms
+DTS ⚡️ Build success in 13491ms
+DTS dist/index.d.ts  265.34 KB
+DTS dist/index.d.mts 265.34 KB

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # @vygruppen/spor-react
 
+## 4.0.2
+
+### Patch Changes
+
+- 0f59ee68: InfoSelect: Added dark mode
+- 573f649a: Input, PasswordInput, SearchInput, InfoSelect, NativeSelect: Tweak disabled state styling.
+- d9c2de51: docs: update links
+- 0cc70e7e: Fix some issues with the styling of lists"
+
 ## 4.0.1
 
 ### Patch Changes

package/dist/{CountryCodeSelect-HCQZVKWU.mjs → CountryCodeSelect-WSPQNU6B.mjs}

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

package/dist/{chunk-3SY4N6MP.mjs → chunk-MGJQOEU2.mjs}

@@ -5022,7 +5022,8 @@ var PasswordInput = forwardRef(
         type: "button",
         onClick: onToggle,
         borderRadius: "sm",
-        marginRight: 1
+        marginRight: 1,
+        isDisabled: props.disabled || props.isDisabled
       },
       isShowingPassword ? t2(texts13.hidePassword) : t2(texts13.showPassword)
     )));
@@ -5110,7 +5111,7 @@ var texts14 = createTexts({
     sv: "Telefonnummer"
   }
 });
-var LazyCountryCodeSelect = React69__default.lazy(() => import('./CountryCodeSelect-HCQZVKWU.mjs'));
+var LazyCountryCodeSelect = React69__default.lazy(() => import('./CountryCodeSelect-WSPQNU6B.mjs'));
 var Radio = forwardRef((props, ref) => {
   return /* @__PURE__ */ React69__default.createElement(Radio$1, { ...props, ref });
 });
@@ -12910,6 +12911,71 @@ var srOnly2 = {
   width: "1px !important",
   whiteSpace: "nowrap !important"
 };
+function baseBorder(state2, props) {
+  switch (state2) {
+    case "hover":
+      return {
+        boxShadow: getBoxShadowString({
+          borderColor: mode("darkGrey", "white")(props),
+          borderWidth: 2
+        })
+      };
+    case "focus": {
+      return {
+        boxShadow: getBoxShadowString({
+          borderColor: mode("greenHaze", "azure")(props),
+          borderWidth: 2
+        })
+      };
+    }
+    case "disabled": {
+      return {
+        boxShadow: getBoxShadowString({
+          borderColor: mode("platinum", "whiteAlpha.400")(props)
+        })
+      };
+    }
+    case "selected":
+      return {
+        boxShadow: getBoxShadowString({
+          borderColor: mode("greenHaze", "azure")(props)
+        })
+      };
+    case "invalid": {
+      return {
+        boxShadow: getBoxShadowString({
+          borderColor: "brightRed",
+          borderWidth: 2
+        })
+      };
+    }
+    case "default":
+    default:
+      return {
+        boxShadow: getBoxShadowString({
+          borderColor: mode("blackAlpha.400", "whiteAlpha.400")(props)
+        })
+      };
+  }
+}
+function baseBackground(state2, props) {
+  switch (state2) {
+    case "active":
+      return {
+        backgroundColor: mode("mint", "whiteAlpha.100")(props)
+      };
+    case "selected":
+      return {
+        backgroundColor: "pine"
+      };
+    case "disabled":
+      return {
+        backgroundColor: mode("silver", "whiteAlpha.100")(props)
+      };
+    default:
+      return {};
+  }
+}
 
 // src/theme/components/info-select.ts
 var parts6 = anatomy("InfoSelect").parts(
@@ -12936,57 +13002,44 @@ var config18 = helpers10.defineMultiStyleConfig({
       justifyContent: "space-between",
       alignItems: "center",
       fontSize: "mobile.md",
-      boxShadow: getBoxShadowString({
-        borderColor: mode("blackAlpha.400", "whiteAlpha.400")(props)
-      }),
+      ...baseBorder("default", props),
       _hover: {
-        boxShadow: getBoxShadowString({
-          borderColor: mode("darkGrey", "whiteAlpha.600")(props),
-          borderWidth: 2
-        })
+        ...baseBorder("hover", props)
       },
       ...focusVisible({
         focus: {
-          boxShadow: getBoxShadowString({
-            borderColor: "greenHaze",
-            borderWidth: 2
-          }),
+          ...baseBorder("focus", props),
           outline: "none"
         },
         notFocus: {
-          boxShadow: getBoxShadowString({
-            borderColor: mode("blackAlpha.400", "whiteAlpha.400")(props)
-          })
+          ...baseBorder("default", props)
         }
       }),
       _disabled: {
-        boxShadow: getBoxShadowString({ borderColor: "platinum" }),
-        _hover: { boxShadow: getBoxShadowString({ borderColor: "platinum" }) },
-        _focus: { boxShadow: getBoxShadowString({ borderColor: "platinum" }) }
+        color: "whiteAlpha.400",
+        ...baseBackground("disabled", props),
+        _hover: { ...baseBorder("disabled", props) },
+        _focus: { ...baseBorder("disabled", props) }
+      },
+      _active: {
+        ...baseBackground("active", props),
+        ...baseBorder("focus", props)
+      },
+      _expanded: {
+        ...baseBackground("active", props),
+        ...baseBorder("focus", props)
       },
       _invalid: {
-        boxShadow: getBoxShadowString({
-          borderColor: "brightRed",
-          borderWidth: 2
-        }),
+        ...baseBorder("invalid", props),
         _hover: {
-          boxShadow: getBoxShadowString({
-            borderColor: "darkGrey",
-            borderWidth: 2
-          })
+          ...baseBorder("hover", props)
         },
         ...focusVisible({
           focus: {
-            boxShadow: getBoxShadowString({
-              borderColor: "greenHaze",
-              borderWidth: 2
-            })
+            ...baseBorder("focus", props)
           },
           notFocus: {
-            boxShadow: getBoxShadowString({
-              borderColor: "brightRed",
-              borderWidth: 2
-            })
+            ...baseBorder("invalid", props)
           }
         })
       }
@@ -13348,13 +13401,15 @@ var config21 = helpers13.defineMultiStyleConfig({
           })
         },
         notFocus: {
-          boxShadow: getBoxShadowString({ borderColor: "darkGrey" })
+          boxShadow: getBoxShadowString({ borderColor: mode("darkGrey", "white")(props) })
         }
       }),
       _disabled: {
-        boxShadow: getBoxShadowString({ borderColor: "platinum" }),
-        _hover: { boxShadow: getBoxShadowString({ borderColor: "platinum" }) },
-        _focus: { boxShadow: getBoxShadowString({ borderColor: "platinum" }) }
+        backgroundColor: mode("blackAlpha.100", "whiteAlpha.100")(props),
+        boxShadow: getBoxShadowString({
+          borderColor: mode("blackAlpha.200", "whiteAlpha.200")(props)
+        }),
+        cursor: "not-allowed"
       },
       _invalid: {
         boxShadow: getBoxShadowString({
@@ -13363,7 +13418,7 @@ var config21 = helpers13.defineMultiStyleConfig({
         }),
         _hover: {
           boxShadow: getBoxShadowString({
-            borderColor: "darkGrey",
+            borderColor: mode("darkGrey", "white")(props),
             borderWidth: 2
           })
         },
@@ -13402,6 +13457,11 @@ var config21 = helpers13.defineMultiStyleConfig({
     },
     element: {
       height: "100%"
+    },
+    group: {
+      ":has(:disabled)": {
+        color: mode("blackAlpha.400", "whiteAlpha.400")(props)
+      }
     }
   })
 });
@@ -13608,14 +13668,18 @@ 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
+  container: {
+    fontSize: ["mobile.sm", "desktop.sm"]
+  },
+  item: {
+    fontFamily: "body"
+  },
+  icon: {
+    marginEnd: "2",
+    display: "inline",
+    verticalAlign: "text-bottom"
+  }
 });
 var list_default = defineMultiStyleConfig28({
   baseStyle: baseStyle45
@@ -13630,7 +13694,11 @@ var helpers15 = createMultiStyleConfigHelpers$1(parts10.keys);
 var config24 = helpers15.defineMultiStyleConfig({
   baseStyle: (props) => ({
     container: {
-      background: mode("white", "darkGrey")(props),
+      // avoiding extra div by blending a transparent color into darkGrey for dark mode
+      backgroundColor: mode(
+        "mint",
+        `color-mix(in srgb, ${colors.darkGrey}, ${colors.white} 10%)`
+      )(props),
       boxShadow: "sm",
       overflowY: "auto",
       maxHeight: "50vh",
@@ -13647,20 +13715,20 @@ var config24 = helpers15.defineMultiStyleConfig({
       color: mode("darkGrey", "white")(props),
       cursor: "pointer",
       _hover: {
-        backgroundColor: mode("seaMist", "darkTeal")(props),
+        backgroundColor: mode("seaMist", "pine")(props),
         outline: "none"
       },
       _active: {
-        backgroundColor: mode("mint", "darkTeal")(props),
+        backgroundColor: mode("mint", "pine")(props),
         outline: "none"
       },
       _focus: {
         outline: "none",
-        backgroundColor: mode("seaMist", "darkTeal")(props)
+        backgroundColor: mode("seaMist", "pine")(props)
       },
       _selected: {
-        backgroundColor: mode("pine", "pine")(props),
-        color: mode("white", "white")(props)
+        ...baseBackground("selected", props),
+        color: "white"
       }
     },
     label: {},
@@ -14046,7 +14114,7 @@ var config29 = helpers20.defineMultiStyleConfig({
       strokeLinecap: "round",
       fontSize: "1.125rem",
       _disabled: {
-        opacity: 0.5
+        color: mode("blackAlpha.400", "whiteAlpha.400")(props)
       }
     }
   })

package/dist/index.d.mts

@@ -294,7 +294,7 @@ type ButtonProps = Exclude<ButtonProps$1, "colorScheme" | "loadingText" | "size"
  * </Button>
  * ```
  *
- * @see https://spor.vy.no/komponenter/button
+ * @see https://spor.vy.no/components/button
  */
 declare const Button: _chakra_ui_system_dist_system_types.ComponentWithAs<"button", ButtonProps>;
 
@@ -524,7 +524,7 @@ type TimePickerProps = Omit<BoxProps, "defaultValue" | "onChange"> & {
  *
  * Note that the TimePicker uses the `Time` class to represent the time. This is a class that is part of the `@internationalized/date` package.
  *
- * @see https://spor.vy.no/komponenter/timepicker
+ * @see https://spor.vy.no/komponents/timepicker
  */
 declare const TimePicker: ({ label: externalLabel, value, defaultValue, onChange, minuteInterval, isDisabled: isDisabledExternally, name, ...boxProps }: TimePickerProps) => React__default.JSX.Element;
 
@@ -676,7 +676,7 @@ type CardSelectProps = BoxProps & {
  * </CardSelect>
  * ```
  *
- * @see https://spor.vy.no/komponenter/card-select
+ * @see https://spor.vy.no/components/card-select
  */
 declare const CardSelect: _chakra_ui_system_dist_system_types.ComponentWithAs<"button", CardSelectProps>;
 
@@ -831,7 +831,7 @@ type FormErrorMessageProps = BoxProps & {
  * </FormControl>
  * ```
  *
- * @see https://spor.vy.no/komponenter/skjemaelementer
+ * @see https://spor.vy.no/components/form-control
  */
 declare const FormErrorMessage: ({ children, ...boxProps }: FormErrorMessageProps) => React__default.JSX.Element | null;
 
@@ -969,7 +969,7 @@ type InfoSelectProps<T extends object> = {
  * </InfoSelect>
  * ```
  *
- * @see https://spor.vy.no/komponenter/info-select
+ * @see https://spor.vy.no/components/info-select
  */
 declare function InfoSelect<T extends object>({ placeholder, width, height, onChange, value, isLabelSrOnly, defaultValue, ...props }: InfoSelectProps<T>): React__default.JSX.Element;
 
@@ -1343,7 +1343,7 @@ type InfoTagProps = TagProps;
  * />
  * ```
  *
- * @see https://spor.vy.no/komponenter/linjetags
+ * @see https://spor.vy.no/components/line-tags
  */
 declare const InfoTag: ({ variant, size, title, description, }: InfoTagProps) => React__default.JSX.Element;
 
@@ -1366,7 +1366,7 @@ type LineIconProps = BoxProps & {
  * <LineIcon variant="subway" size="lg" />
  * ```
  *
- * @see https://spor.vy.no/komponenter/linjetags
+ * @see https://spor.vy.no/components/line-tags
  */
 declare const LineIcon: ({ variant, size, sx, ...rest }: LineIconProps) => React__default.JSX.Element | null;
 
@@ -1409,7 +1409,7 @@ type TravelTagProps = TagProps & BoxProps & {
  * />
  * ```
  *
- * @see https://spor.vy.no/komponenter/linjetags
+ * @see https://spor.vy.no/components/line-tags
  */
 declare const TravelTag: _chakra_ui_system_dist_system_types.ComponentWithAs<As, TravelTagProps>;
 
@@ -3527,26 +3527,54 @@ declare const theme: {
                 };
                 button: {
                     _disabled: {
-                        boxShadow: string;
                         _hover: {
                             boxShadow: string;
                         };
                         _focus: {
                             boxShadow: string;
                         };
+                        backgroundColor: string;
+                        color: string;
+                    } | {
+                        _hover: {
+                            boxShadow: string;
+                        };
+                        _focus: {
+                            boxShadow: string;
+                        };
+                        backgroundColor?: undefined;
+                        color: string;
+                    };
+                    _active: {
+                        boxShadow: string;
+                        backgroundColor: string;
+                    } | {
+                        boxShadow: string;
+                        backgroundColor?: undefined;
+                    };
+                    _expanded: {
+                        boxShadow: string;
+                        backgroundColor: string;
+                    } | {
+                        boxShadow: string;
+                        backgroundColor?: undefined;
                     };
                     _invalid: {
                         _focus: _chakra_ui_styled_system.SystemStyleObject;
                         _focusVisible: _chakra_ui_styled_system.SystemStyleObject;
                         "&[data-focus]:not([data-focus-visible])": _chakra_ui_styled_system.SystemStyleObject;
-                        boxShadow: string;
                         _hover: {
                             boxShadow: string;
                         };
+                        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;
+                    _hover: {
+                        boxShadow: string;
+                    };
+                    boxShadow: string;
                     appearance: string;
                     borderTopRadius: string;
                     borderBottomRadius: string | number;
@@ -3556,10 +3584,6 @@ declare const theme: {
                     justifyContent: string;
                     alignItems: string;
                     fontSize: string;
-                    boxShadow: string;
-                    _hover: {
-                        boxShadow: string;
-                    };
                 };
                 arrowIcon: {};
             }) | undefined;
@@ -3716,13 +3740,9 @@ declare const theme: {
             baseStyle?: ((props: _chakra_ui_styled_system.StyleFunctionProps) => {
                 field: {
                     _disabled: {
+                        backgroundColor: string;
                         boxShadow: string;
-                        _hover: {
-                            boxShadow: string;
-                        };
-                        _focus: {
-                            boxShadow: string;
-                        };
+                        cursor: string;
                     };
                     _invalid: {
                         _focus: _chakra_ui_styled_system.SystemStyleObject;
@@ -3777,6 +3797,11 @@ declare const theme: {
                 element: {
                     height: string;
                 };
+                group: {
+                    ":has(:disabled)": {
+                        color: string;
+                    };
+                };
             }) | undefined;
             sizes?: {
                 [key: string]: _chakra_ui_styled_system.PartsStyleInterpolation<{
@@ -3981,11 +4006,16 @@ declare const theme: {
         };
         List: {
             baseStyle?: {
+                container: {
+                    fontSize: ("mobile.sm" | "desktop.sm")[];
+                };
+                item: {
+                    fontFamily: string;
+                };
                 icon: {
                     marginEnd: string;
                     display: string;
                     verticalAlign: string;
-                    fontFamily: string;
                 };
             } | undefined;
             sizes?: {
@@ -4008,7 +4038,7 @@ declare const theme: {
         ListBox: {
             baseStyle?: ((props: _chakra_ui_styled_system.StyleFunctionProps) => {
                 container: {
-                    background: string;
+                    backgroundColor: string;
                     boxShadow: string;
                     overflowY: string;
                     maxHeight: string;
@@ -4037,8 +4067,11 @@ declare const theme: {
                         backgroundColor: string;
                     };
                     _selected: {
+                        color: string;
                         backgroundColor: string;
+                    } | {
                         color: string;
+                        backgroundColor?: undefined;
                     };
                 };
                 label: {};
@@ -4400,13 +4433,9 @@ declare const theme: {
                         background: string;
                     };
                     _disabled: {
+                        backgroundColor: string;
                         boxShadow: string;
-                        _hover: {
-                            boxShadow: string;
-                        };
-                        _focus: {
-                            boxShadow: string;
-                        };
+                        cursor: string;
                     };
                     _invalid: {
                         _focus: _chakra_ui_styled_system.SystemStyleObject;
@@ -4466,7 +4495,7 @@ declare const theme: {
                     strokeLinecap: string;
                     fontSize: string;
                     _disabled: {
-                        opacity: number;
+                        color: string;
                     };
                 };
             }) | undefined;
@@ -5217,13 +5246,9 @@ declare const theme: {
                     };
                 };
                 _disabled: {
+                    backgroundColor: string;
                     boxShadow: string;
-                    _hover: {
-                        boxShadow: string;
-                    };
-                    _focus: {
-                        boxShadow: string;
-                    };
+                    cursor: string;
                 };
                 _invalid: {
                     _focus: _chakra_ui_styled_system.SystemStyleObject;