@vygruppen/spor-react 4.0.0 → 4.0.2

package/.turbo/turbo-build.log

@@ -1,5 +1,5 @@
 
-> @vygruppen/spor-react@4.0.0 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-B77QE6EZ.mjs".
-CJS dist/index.js 547.83 KB
-CJS ⚡️ Build success in 4018ms
+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-7WPJ6BDU.mjs 1.19 KB
-ESM dist/chunk-B77QE6EZ.mjs             437.32 KB
-ESM ⚡️ Build success in 4019ms
-DTS ⚡️ Build success in 17985ms
-DTS dist/index.d.ts  262.81 KB
-DTS dist/index.d.mts 262.81 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,20 @@
 # @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
+
+- 0450ca0a: DatePicker, DateRangePicker: Fix visual regressions
+
 ## 4.0.0
 
 ### Major Changes

package/dist/{CountryCodeSelect-7WPJ6BDU.mjs → CountryCodeSelect-WSPQNU6B.mjs}

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

package/dist/{chunk-B77QE6EZ.mjs → chunk-MGJQOEU2.mjs}

@@ -3777,7 +3777,7 @@ var DatePicker = forwardRef$1(
     const onFieldClick = () => {
       state2.setOpen(true);
     };
-    const popoverContent = /* @__PURE__ */ React69__default.createElement(PopoverContent, { color: "darkGrey", boxShadow: "md", sx: styles3.calendar }, /* @__PURE__ */ React69__default.createElement(PopoverArrow, { sx: styles3.arrow }), /* @__PURE__ */ React69__default.createElement(PopoverBody, null, /* @__PURE__ */ React69__default.createElement(FocusLock, null, /* @__PURE__ */ React69__default.createElement(
+    const popoverContent = /* @__PURE__ */ React69__default.createElement(PopoverContent, { color: "darkGrey", sx: styles3.calendarPopover }, /* @__PURE__ */ React69__default.createElement(PopoverArrow, { sx: styles3.arrow }), /* @__PURE__ */ React69__default.createElement(PopoverBody, null, /* @__PURE__ */ React69__default.createElement(FocusLock, null, /* @__PURE__ */ React69__default.createElement(
       Calendar,
       {
         ...calendarProps,
@@ -3884,7 +3884,7 @@ function DateRangePicker({
   const onFieldClick = () => {
     state2.setOpen(true);
   };
-  const popoverContent = /* @__PURE__ */ React69__default.createElement(PopoverContent, { sx: styles3.calendar, boxShadow: "md", maxWidth: "none" }, /* @__PURE__ */ React69__default.createElement(PopoverArrow, { sx: styles3.arrow }), /* @__PURE__ */ React69__default.createElement(PopoverBody, null, /* @__PURE__ */ React69__default.createElement(FocusLock, null, /* @__PURE__ */ React69__default.createElement(RangeCalendar, { variant: "base", ...calendarProps }))));
+  const popoverContent = /* @__PURE__ */ React69__default.createElement(PopoverContent, { sx: styles3.calendarPopover, maxWidth: "none" }, /* @__PURE__ */ React69__default.createElement(PopoverArrow, { sx: styles3.arrow }), /* @__PURE__ */ React69__default.createElement(PopoverBody, null, /* @__PURE__ */ React69__default.createElement(FocusLock, null, /* @__PURE__ */ React69__default.createElement(RangeCalendar, { variant: "base", ...calendarProps }))));
   return /* @__PURE__ */ React69__default.createElement(I18nProvider, { locale }, /* @__PURE__ */ React69__default.createElement(Box, { position: "relative", display: "inline-flex", flexDirection: "column" }, props.label && /* @__PURE__ */ React69__default.createElement(FormLabel, { ...labelProps, sx: styles3.inputLabel }, props.label), /* @__PURE__ */ React69__default.createElement(
     Popover,
     {
@@ -3903,7 +3903,16 @@ function DateRangePicker({
         onKeyPress: handleEnterClick,
         minHeight
       },
-      variant && /* @__PURE__ */ React69__default.createElement(PopoverTrigger, null, /* @__PURE__ */ React69__default.createElement(CalendarTriggerButton, { paddingLeft: 1, paddingRight: 1, variant, ref, ...buttonProps })),
+      variant && /* @__PURE__ */ React69__default.createElement(PopoverTrigger, null, /* @__PURE__ */ React69__default.createElement(
+        CalendarTriggerButton,
+        {
+          paddingLeft: 1,
+          paddingRight: 1,
+          variant,
+          ref,
+          ...buttonProps
+        }
+      )),
       /* @__PURE__ */ React69__default.createElement(
         DateField,
         {
@@ -5013,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)
     )));
@@ -5101,7 +5111,7 @@ var texts14 = createTexts({
     sv: "Telefonnummer"
   }
 });
-var LazyCountryCodeSelect = React69__default.lazy(() => import('./CountryCodeSelect-7WPJ6BDU.mjs'));
+var LazyCountryCodeSelect = React69__default.lazy(() => import('./CountryCodeSelect-WSPQNU6B.mjs'));
 var Radio = forwardRef((props, ref) => {
   return /* @__PURE__ */ React69__default.createElement(Radio$1, { ...props, ref });
 });
@@ -12210,6 +12220,7 @@ var parts4 = anatomy$1("datepicker").parts(
   "wrapper",
   "calendarTriggerButton",
   "arrow",
+  "calendarPopover",
   "calendar",
   "weekdays",
   "weekend",
@@ -12234,36 +12245,10 @@ var config13 = helpers6.defineMultiStyleConfig({
       paddingY: 0.5,
       alignItems: "center",
       _hover: {
-        boxShadow: getBoxShadowString({
-          borderColor: mode("darkGrey", "white")(props),
-          borderWidth: 2
-        }),
         zIndex: zIndices2.docked
       },
-      _focusWithin: {
-        boxShadow: getBoxShadowString({
-          borderColor: mode("greenHaze", "azure")(props),
-          borderWidth: 2
-        })
-      },
-      _invalid: {
-        boxShadow: getBoxShadowString({
-          borderColor: "brightRed",
-          borderWidth: 2
-        })
-      },
       _disabled: {
-        pointerEvents: "none",
-        boxShadow: getBoxShadowString({
-          borderColor: mode("osloGrey", "whiteAlpha.400")(props),
-          borderWidth: 1
-        }),
-        _focus: {
-          boxShadow: getBoxShadowString({
-            borderColor: mode("osloGrey", "whiteAlpha.400")(props),
-            borderWidth: 1
-          })
-        }
+        pointerEvents: "none"
       }
     },
     inputLabel: {
@@ -12325,12 +12310,13 @@ var config13 = helpers6.defineMultiStyleConfig({
     arrow: {
       [$arrowBackground.variable]: mode("white", colors.night)(props)
     },
-    calendar: {
+    calendarPopover: {
       backgroundColor: mode("white", "night")(props),
       color: mode("darkGrey", "white")(props),
       boxShadow: getBoxShadowString({
         borderWidth: 2,
-        borderColor: mode("blackAlpha.200", "whiteAlpha.200")(props)
+        borderColor: mode("blackAlpha.200", "whiteAlpha.200")(props),
+        baseShadow: "md"
       })
     },
     weekdays: {
@@ -12414,6 +12400,41 @@ var config13 = helpers6.defineMultiStyleConfig({
   }),
   variants: {
     base: (props) => ({
+      wrapper: {
+        boxShadow: getBoxShadowString({
+          borderColor: mode("blackAlpha.400", "whiteAlpha.400")(props)
+        }),
+        _hover: {
+          boxShadow: getBoxShadowString({
+            borderColor: mode("darkGrey", "white")(props),
+            borderWidth: 2
+          })
+        },
+        _focusWithin: {
+          boxShadow: getBoxShadowString({
+            borderColor: mode("greenHaze", "azure")(props),
+            borderWidth: 2
+          })
+        },
+        _invalid: {
+          boxShadow: getBoxShadowString({
+            borderColor: "brightRed",
+            borderWidth: 2
+          })
+        },
+        _disabled: {
+          boxShadow: getBoxShadowString({
+            borderColor: mode("osloGrey", "whiteAlpha.400")(props),
+            borderWidth: 1
+          }),
+          _focus: {
+            boxShadow: getBoxShadowString({
+              borderColor: mode("osloGrey", "whiteAlpha.400")(props),
+              borderWidth: 1
+            })
+          }
+        }
+      },
       calendar: {
         backgroundColor: mode("white", "night")(props),
         color: mode("darkGrey", "white")(props),
@@ -12436,6 +12457,47 @@ var config13 = helpers6.defineMultiStyleConfig({
       }
     }),
     floating: (props) => ({
+      wrapper: {
+        boxShadow: getBoxShadowString({
+          borderColor: mode("blackAlpha.400", "whiteAlpha.400")(props),
+          baseShadow: "sm"
+        }),
+        _hover: {
+          boxShadow: getBoxShadowString({
+            borderColor: mode("darkGrey", "white")(props),
+            borderWidth: 2,
+            baseShadow: "sm"
+          })
+        },
+        _focusWithin: {
+          boxShadow: getBoxShadowString({
+            borderColor: mode("greenHaze", "azure")(props),
+            borderWidth: 2,
+            baseShadow: "sm"
+          })
+        },
+        _invalid: {
+          boxShadow: getBoxShadowString({
+            borderColor: "brightRed",
+            borderWidth: 2,
+            baseShadow: "sm"
+          })
+        },
+        _disabled: {
+          boxShadow: getBoxShadowString({
+            borderColor: mode("osloGrey", "whiteAlpha.400")(props),
+            borderWidth: 1,
+            baseShadow: "sm"
+          }),
+          _focus: {
+            boxShadow: getBoxShadowString({
+              borderColor: mode("osloGrey", "whiteAlpha.400")(props),
+              borderWidth: 1,
+              baseShadow: "sm"
+            })
+          }
+        }
+      },
       calendar: {
         backgroundColor: mode("white", "night")(props),
         color: mode("darkGrey", "white")(props),
@@ -12452,13 +12514,43 @@ var config13 = helpers6.defineMultiStyleConfig({
       }
     }),
     ghost: (props) => ({
+      wrapper: {
+        boxShadow: "none",
+        _hover: {
+          boxShadow: getBoxShadowString({
+            borderColor: mode("darkGrey", "white")(props),
+            borderWidth: 2
+          })
+        },
+        _focusWithin: {
+          boxShadow: getBoxShadowString({
+            borderColor: mode("greenHaze", "azure")(props),
+            borderWidth: 2
+          })
+        },
+        _invalid: {
+          boxShadow: getBoxShadowString({
+            borderColor: "brightRed",
+            borderWidth: 2
+          })
+        },
+        _disabled: {
+          boxShadow: getBoxShadowString({
+            borderColor: mode("osloGrey", "whiteAlpha.400")(props),
+            borderWidth: 1
+          }),
+          _focus: {
+            boxShadow: getBoxShadowString({
+              borderColor: mode("osloGrey", "whiteAlpha.400")(props),
+              borderWidth: 1
+            })
+          }
+        }
+      },
       calendar: {
         backgroundColor: mode("white", "night")(props),
         color: mode("darkGrey", "white")(props),
-        boxShadow: getBoxShadowString({
-          borderWidth: 2,
-          borderColor: mode("", "")(props)
-        })
+        boxShadow: "none"
       },
       dateCell: {
         color: mode("darkGrey", "white")(props),
@@ -12466,7 +12558,7 @@ var config13 = helpers6.defineMultiStyleConfig({
           backgroundColor: mode("seaMist", "pine")(props)
         },
         _selected: {
-          backgroundColor: mode("", "primaryGreen")(props),
+          backgroundColor: mode("transparent", "primaryGreen")(props),
           color: "darkGrey"
         }
       }
@@ -12819,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(
@@ -12845,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)
           }
         })
       }
@@ -13257,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({
@@ -13272,7 +13418,7 @@ var config21 = helpers13.defineMultiStyleConfig({
         }),
         _hover: {
           boxShadow: getBoxShadowString({
-            borderColor: "darkGrey",
+            borderColor: mode("darkGrey", "white")(props),
             borderWidth: 2
           })
         },
@@ -13311,6 +13457,11 @@ var config21 = helpers13.defineMultiStyleConfig({
     },
     element: {
       height: "100%"
+    },
+    group: {
+      ":has(:disabled)": {
+        color: mode("blackAlpha.400", "whiteAlpha.400")(props)
+      }
     }
   })
 });
@@ -13517,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
@@ -13539,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",
@@ -13556,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: {},
@@ -13955,7 +14114,7 @@ var config29 = helpers20.defineMultiStyleConfig({
       strokeLinecap: "round",
       fontSize: "1.125rem",
       _disabled: {
-        opacity: 0.5
+        color: mode("blackAlpha.400", "whiteAlpha.400")(props)
       }
     }
   })