@vygruppen/spor-react 10.2.0 → 10.4.0

package/.turbo/turbo-build.log

@@ -1,5 +1,5 @@
 
-> @vygruppen/spor-react@10.2.0 build
+> @vygruppen/spor-react@10.4.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 531.29 KB
+CJS ⚡️ Build success in 2167ms
 ESM dist/index.mjs                      2.15 KB
-ESM dist/CountryCodeSelect-UFSVRLDY.mjs 1.19 KB
-ESM dist/chunk-BPDFFQ3U.mjs             416.17 KB
-ESM ⚡️ Build success in 2287ms
-CJS dist/index.js 527.91 KB
-CJS ⚡️ Build success in 2288ms
-DTS ⚡️ Build success in 15575ms
-DTS dist/index.d.ts  315.68 KB
-DTS dist/index.d.mts 315.68 KB
+ESM dist/chunk-T4CLCBB5.mjs             419.22 KB
+ESM dist/CountryCodeSelect-XMQTDWRD.mjs 1.22 KB
+ESM ⚡️ Build success in 2167ms
+DTS ⚡️ Build success in 15490ms
+DTS dist/index.d.ts  335.33 KB
+DTS dist/index.d.mts 335.33 KB

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @vygruppen/spor-react
 
+## 10.4.0
+
+### Minor Changes
+
+- 5c24b42: Add variants to all form components
+
+  Components: Input, Textarea, PasswordInput, PhoneNumberInput, Textarea, NativeSelect, InfoSelect, Combobox
+
+### Patch Changes
+
+- 80669c3: Switch: Update accessibility
+
+## 10.3.0
+
+### Minor Changes
+
+- d3cd54d: Added input field ariaLabelContext to NummericStepper to improve functionality with screen readers.
+
 ## 10.2.0
 
 ### Minor Changes

package/dist/{CountryCodeSelect-UFSVRLDY.mjs → CountryCodeSelect-XMQTDWRD.mjs}

@@ -1,4 +1,4 @@
-import { createTexts, useTranslation, InfoSelect, Item } from './chunk-BPDFFQ3U.mjs';
+import { createTexts, useTranslation, InfoSelect, Item } from './chunk-T4CLCBB5.mjs';
 import React from 'react';
 import { getSupportedCallingCodes } from 'awesome-phonenumber';
 
@@ -22,6 +22,7 @@ var CountryCodeSelect = (props) => {
       label: t(texts.countryCode),
       isLabelSrOnly: true,
       items: callingCodes,
+      variant: props.variant,
       ...props
     },
     (item) => /* @__PURE__ */ React.createElement(Item, { key: item.key }, item.key)

package/dist/{chunk-BPDFFQ3U.mjs → chunk-T4CLCBB5.mjs}

@@ -1052,6 +1052,7 @@ function Combobox({
   emptyContent,
   inputRef: externalInputRef,
   allowsEmptyCollection,
+  variant,
   ...rest
 }) {
   const { contains: contains2 } = useFilter({ sensitivity: "base" });
@@ -1105,6 +1106,7 @@ function Combobox({
       ref: inputRef,
       role: "combobox",
       label,
+      variant,
       "aria-expanded": state2.isOpen,
       "aria-autocomplete": "list",
       "aria-controls": listboxId,
@@ -1146,7 +1148,8 @@ function Combobox({
         id: listboxId,
         listBoxRef,
         emptyContent,
-        maxWidth: inputWidth
+        maxWidth: inputWidth,
+        variant
       },
       rest.children
     )
@@ -1249,10 +1252,11 @@ function ListBox({
   listBoxRef,
   state: state2,
   maxWidth,
+  variant,
   ...props
 }) {
   const { listBoxProps } = useListBox(props, state2, listBoxRef);
-  const styles3 = useMultiStyleConfig("ListBox", {});
+  const styles3 = useMultiStyleConfig("ListBox", { variant });
   return /* @__PURE__ */ React84__default.createElement(
     List,
     {
@@ -1260,7 +1264,8 @@ function ListBox({
       ref: listBoxRef,
       sx: styles3.container,
       "aria-busy": isLoading,
-      maxWidth
+      maxWidth,
+      variant
     },
     state2.collection.size === 0 && props.emptyContent,
     Array.from(state2.collection).map(
@@ -1372,16 +1377,17 @@ function InfoSelect({
     triggerRef
   );
   const stateStyle = "completed";
+  const hasChosenValue = state2.selectedItem !== null;
   const styles3 = useMultiStyleConfig("InfoSelect", {
     isOpen: state2.isOpen,
     isLabelSrOnly,
     variant,
-    stateStyle
+    stateStyle,
+    hasChosenValue
   });
   const { buttonProps } = useButton(triggerProps, triggerRef);
   const { t: t2 } = useTranslation();
   const formControl = useFormControlProps(props);
-  const hasChosenValue = state2.selectedItem !== null;
   return /* @__PURE__ */ React84__default.createElement(Box, { sx: styles3.container }, /* @__PURE__ */ React84__default.createElement(
     HiddenSelect,
     {
@@ -1421,7 +1427,7 @@ function InfoSelect({
         ...valueProps,
         h: isLabelSrOnly ? "" : !hasChosenValue ? "0px" : "18px",
         hidden: !hasChosenValue,
-        transform: isLabelSrOnly ? "" : "scale(1) translateY(-10px)",
+        transform: isLabelSrOnly ? "" : "scale(1) translateY(-12px)",
         transitionProperty: "var(--spor-transition-property-common)",
         transitionDuration: "var(--spor-transition-duration-normal)"
       },
@@ -1441,7 +1447,8 @@ function InfoSelect({
         ...menuProps,
         state: state2,
         listBoxRef: listboxRef,
-        borderBottomRadius: "sm"
+        borderBottomRadius: "sm",
+        variant
       },
       props.children
     )
@@ -1508,8 +1515,10 @@ function NumericStepper({
   withInput = true,
   stepSize = 1,
   showZero = false,
+  ariaLabelContext = { singular: "", plural: "" },
   ...boxProps
 }) {
+  const addButtonRef = useRef(null);
   const { t: t2 } = useTranslation();
   const styles3 = useMultiStyleConfig("NumericStepper", {});
   const [value, onChange] = useControllableState({
@@ -1519,12 +1528,26 @@ function NumericStepper({
   });
   const formControlProps = useFormControl({ id: idProp, isDisabled });
   const clampedStepSize = Math.max(Math.min(stepSize, 10), 1);
+  const focusOnAddButton = () => {
+    var _a6;
+    (_a6 = addButtonRef.current) == null ? void 0 : _a6.focus();
+  };
   return /* @__PURE__ */ React84__default.createElement(Flex, { __css: styles3.container, ...boxProps }, /* @__PURE__ */ React84__default.createElement(
     VerySmallButton,
     {
       icon: /* @__PURE__ */ React84__default.createElement(SubtractIcon, { stepLabel: clampedStepSize }),
-      "aria-label": t2(texts2.decrementButtonAriaLabel(clampedStepSize)),
-      onClick: () => onChange(Math.max(value - clampedStepSize, minValue)),
+      "aria-label": t2(
+        texts2.decrementButtonAriaLabel(
+          clampedStepSize,
+          stepSize == 1 ? ariaLabelContext.singular : ariaLabelContext.plural
+        )
+      ),
+      onClick: () => {
+        onChange(Math.max(value - clampedStepSize, minValue));
+        if (Math.max(value - clampedStepSize, minValue) <= minValue) {
+          focusOnAddButton();
+        }
+      },
       visibility: value <= minValue ? "hidden" : "visible",
       isDisabled: formControlProps.disabled,
       id: value <= minValue ? void 0 : formControlProps.id
@@ -1543,13 +1566,16 @@ function NumericStepper({
       width: `${Math.max(value.toString().length + 1, 3)}ch`,
       visibility: !showZero && value === 0 ? "hidden" : "visible",
       "aria-live": "assertive",
-      "aria-label": value.toString(),
+      "aria-label": ariaLabelContext.plural !== "" ? t2(texts2.currentNumberAriaLabel(ariaLabelContext.plural)) : "",
       onChange: (e) => {
         const numericInput = Number(e.target.value);
         if (Number.isNaN(numericInput)) {
           return;
         }
         onChange(Math.max(Math.min(numericInput, maxValue), minValue));
+        if (!showZero && Math.max(Math.min(numericInput, maxValue), minValue) === 0) {
+          focusOnAddButton();
+        }
       }
     }
   ) : /* @__PURE__ */ React84__default.createElement(
@@ -1557,14 +1583,21 @@ function NumericStepper({
     {
       sx: styles3.text,
       visibility: !showZero && value === 0 ? "hidden" : "visible",
-      "aria-label": value.toString()
+      "aria-live": "assertive",
+      "aria-label": ariaLabelContext.plural !== "" ? t2(texts2.currentNumberAriaLabel(ariaLabelContext.plural)) : ""
     },
     value
   ), /* @__PURE__ */ React84__default.createElement(
     VerySmallButton,
     {
+      ref: addButtonRef,
       icon: /* @__PURE__ */ React84__default.createElement(AddIcon, { stepLabel: clampedStepSize }),
-      "aria-label": t2(texts2.incrementButtonAriaLabel(clampedStepSize)),
+      "aria-label": t2(
+        texts2.incrementButtonAriaLabel(
+          clampedStepSize,
+          stepSize == 1 ? ariaLabelContext.singular : ariaLabelContext.plural
+        )
+      ),
       onClick: () => onChange(Math.min(value + clampedStepSize, maxValue)),
       visibility: value >= maxValue ? "hidden" : "visible",
       isDisabled: formControlProps.disabled,
@@ -1572,10 +1605,19 @@ function NumericStepper({
     }
   ));
 }
-var VerySmallButton = (props) => {
+var VerySmallButton = React84__default.forwardRef((props, ref) => {
   const styles3 = useMultiStyleConfig("NumericStepper", {});
-  return /* @__PURE__ */ React84__default.createElement(IconButton, { variant: "primary", size: "xs", sx: styles3.button, ...props });
-};
+  return /* @__PURE__ */ React84__default.createElement(
+    IconButton,
+    {
+      variant: "primary",
+      size: "xs",
+      sx: styles3.button,
+      ref,
+      ...props
+    }
+  );
+});
 var SubtractIcon = ({ stepLabel, ...props }) => /* @__PURE__ */ React84__default.createElement(React84__default.Fragment, null, /* @__PURE__ */ React84__default.createElement(
   Box,
   {
@@ -1632,20 +1674,28 @@ var AddIcon = ({ stepLabel, ...props }) => /* @__PURE__ */ React84__default.crea
   )
 ), stepLabel > 1 && /* @__PURE__ */ React84__default.createElement(chakra.span, { paddingRight: "1" }, stepLabel.toString()));
 var texts2 = createTexts({
-  decrementButtonAriaLabel(stepSize) {
+  currentNumberAriaLabel(ariaContext) {
     return {
-      nb: `Trekk fra ${stepSize}`,
-      en: `Subtract ${stepSize}`,
-      nn: `Trekk fr\xE5 ${stepSize}`,
-      sv: `Subtrahera ${stepSize}`
+      nb: `Valgt antall ${ariaContext}`,
+      en: `Chosen number of ${ariaContext}`,
+      nn: `Valgt antall ${ariaContext}`,
+      sv: `Valgt antall ${ariaContext}`
     };
   },
-  incrementButtonAriaLabel(stepSize) {
+  decrementButtonAriaLabel(stepSize, ariaContext) {
     return {
-      nb: `Legg til ${stepSize}`,
-      en: `Add ${stepSize}`,
-      nn: `Legg til ${stepSize}`,
-      sv: `L\xE4gg till ${stepSize}`
+      nb: `Trekk fra ${stepSize} ${ariaContext}`,
+      en: `Subtract ${stepSize} ${ariaContext}`,
+      nn: `Trekk fr\xE5 ${stepSize} ${ariaContext}`,
+      sv: `Subtrahera ${stepSize} ${ariaContext}`
+    };
+  },
+  incrementButtonAriaLabel(stepSize, ariaContext) {
+    return {
+      nb: `Legg til ${stepSize} ${ariaContext}`,
+      en: `Add ${stepSize} ${ariaContext}`,
+      nn: `Legg til ${stepSize} ${ariaContext}`,
+      sv: `L\xE4gg till ${stepSize} ${ariaContext}`
     };
   }
 });
@@ -1704,6 +1754,7 @@ var PhoneNumberInput = forwardRef(
     name,
     value: externalValue,
     onChange: externalOnChange,
+    variant,
     ...boxProps
   }, ref) => {
     const { t: t2 } = useTranslation();
@@ -1726,7 +1777,8 @@ var PhoneNumberInput = forwardRef(
             label: t2(texts4.countryCodeLabel),
             width: "6.25rem",
             height: "100%",
-            value: "+47"
+            value: "+47",
+            variant
           },
           /* @__PURE__ */ React84__default.createElement(Item, { key: "+47" }, "+47")
         )
@@ -1741,7 +1793,8 @@ var PhoneNumberInput = forwardRef(
           }),
           name: name ? `${name}-country-code` : "country-code",
           height: "100%",
-          width: "6.25rem"
+          width: "6.25rem",
+          variant
         }
       )
     ), /* @__PURE__ */ React84__default.createElement(
@@ -1760,7 +1813,8 @@ var PhoneNumberInput = forwardRef(
           });
         },
         position: "relative",
-        left: "1px"
+        left: "1px",
+        variant
       }
     ));
   }
@@ -1779,7 +1833,7 @@ var texts4 = createTexts({
     sv: "Landskod"
   }
 });
-var LazyCountryCodeSelect = React84__default.lazy(() => import('./CountryCodeSelect-UFSVRLDY.mjs'));
+var LazyCountryCodeSelect = React84__default.lazy(() => import('./CountryCodeSelect-XMQTDWRD.mjs'));
 var Radio = forwardRef((props, ref) => {
   return /* @__PURE__ */ React84__default.createElement(Radio$1, { ...props, ref });
 });
@@ -1841,8 +1895,8 @@ var texts5 = createTexts({
   }
 });
 var Switch = forwardRef(
-  ({ size: size2 = "md", ...props }, ref) => {
-    return /* @__PURE__ */ React84__default.createElement(Switch$1, { size: size2, ...props, ref });
+  ({ size: size2 = "md", as = "div", ...props }, ref) => {
+    return /* @__PURE__ */ React84__default.createElement(Switch$1, { as, size: size2, ...props, ref });
   }
 );
 var Textarea = forwardRef((props, ref) => {
@@ -12062,6 +12116,7 @@ var config18 = helpers11.defineMultiStyleConfig({
     label: {
       position: "relative",
       fontSize: ["mobile.xs", "desktop.sm"],
+      marginTop: props.hasChosenValue ? 2 : 0,
       ...props.isLabelSrOnly ? srOnly2 : {}
     },
     innerButton: {
@@ -12428,79 +12483,28 @@ var config20 = helpers13.defineMultiStyleConfig({
   }
 });
 var info_tag_default = config20;
-var helpers14 = createMultiStyleConfigHelpers$1(inputAnatomy.keys);
-var config21 = helpers14.defineMultiStyleConfig({
-  baseStyle: (props) => ({
-    field: {
-      appearance: "none",
-      width: "100%",
-      outline: "none",
-      border: 0,
-      borderRadius: "sm",
-      transitionProperty: "common",
-      transitionDuration: "fast",
-      position: "relative",
-      paddingX: 3,
-      height: 8,
-      fontSize: "mobile.md",
-      _hover: {
-        ...baseBorder("hover", props)
-      },
-      _active: {
-        ...baseBackground("active", props),
-        ...baseBorder("default", props)
-      },
-      _focusVisible: {
-        ...focusVisibleStyles(props)._focusVisible,
-        outlineOffset: 0
-      },
-      _disabled: {
-        ...surface("disabled", props),
-        ...baseBorder("disabled", props),
-        pointerEvents: "none"
-      },
-      _invalid: {
-        ...baseBorder("invalid", props),
+
+// src/theme/utils/input-utils.ts
+function inputVariant(state2, props) {
+  switch (state2) {
+    case "base":
+      return {
+        ...baseBackground("default", props),
+        ...baseBorder("default", props),
         _hover: {
           ...baseBorder("hover", props)
+        },
+        _active: {
+          ...baseBackground("active", props),
+          ...baseBorder("default", props)
+        },
+        _selected: {
+          ...baseBackground("selected", props),
+          ...baseBorder("selected", props)
         }
-      },
-      " + label": {
-        fontSize: ["mobile.sm", "desktop.sm"],
-        top: "2px",
-        left: props.paddingLeft || props.pl || 3,
-        zIndex: 2,
-        position: "absolute",
-        marginY: 2,
-        transition: ".1s ease-out",
-        transformOrigin: "top left",
-        cursor: "text"
-      },
-      "&:not(:placeholder-shown)": {
-        paddingTop: "1rem",
-        "& + label": {
-          transform: "scale(0.825) translateY(-10px)"
-        }
-      }
-    },
-    element: {
-      height: "100%"
-    },
-    group: {
-      ":has(:disabled)": {
-        ...baseText("disabled", props)
-      }
-    }
-  }),
-  variants: {
-    base: (props) => ({
-      field: {
-        ...baseBackground("default", props),
-        ...baseBorder("default", props)
-      }
-    }),
-    floating: (props) => ({
-      field: {
+      };
+    case "floating":
+      return {
         boxShadow: "sm",
         ...floatingBackground("default", props),
         ...floatingBorder("default", props),
@@ -12516,6 +12520,97 @@ var config21 = helpers14.defineMultiStyleConfig({
           ...floatingBorder("selected", props),
           ...floatingBackground("selected", props)
         }
+      };
+    case "default":
+    default:
+      return {
+        ...baseBackground("default", props),
+        ...baseBorder("default", props),
+        _hover: {
+          ...baseBorder("hover", props)
+        },
+        _active: {
+          ...baseBackground("active", props),
+          ...baseBorder("default", props)
+        },
+        _selected: {
+          ...baseBackground("selected", props),
+          ...baseBorder("selected", props)
+        }
+      };
+  }
+}
+var inputBaseStyle = (props) => ({
+  field: {
+    appearance: "none",
+    width: "100%",
+    outline: "none",
+    border: 0,
+    borderRadius: "sm",
+    transitionProperty: "common",
+    transitionDuration: "fast",
+    position: "relative",
+    paddingX: 3,
+    height: 8,
+    fontSize: "mobile.md",
+    _focusVisible: {
+      ...focusVisibleStyles(props)._focusVisible,
+      outlineOffset: 0
+    },
+    _disabled: {
+      ...surface("disabled", props),
+      ...baseBorder("disabled", props),
+      pointerEvents: "none"
+    },
+    _invalid: {
+      ...baseBorder("invalid", props),
+      _hover: {
+        ...baseBorder("hover", props)
+      }
+    },
+    " + label": {
+      fontSize: ["mobile.sm", "desktop.sm"],
+      top: "2px",
+      left: props.paddingLeft || props.pl || 3,
+      zIndex: 2,
+      position: "absolute",
+      marginY: 2,
+      transition: ".1s ease-out",
+      transformOrigin: "top left",
+      cursor: "text"
+    },
+    "&:not(:placeholder-shown)": {
+      paddingTop: "1rem",
+      "& + label": {
+        transform: "scale(0.825) translateY(-10px)"
+      }
+    }
+  },
+  element: {
+    height: "100%"
+  },
+  group: {
+    ":has(:disabled)": {
+      ...baseText("disabled", props)
+    }
+  }
+});
+
+// src/theme/components/input.ts
+var helpers14 = createMultiStyleConfigHelpers$1(inputAnatomy.keys);
+var config21 = helpers14.defineMultiStyleConfig({
+  baseStyle: (props) => ({
+    ...inputBaseStyle(props)
+  }),
+  variants: {
+    base: (props) => ({
+      field: {
+        ...inputVariant("base", props)
+      }
+    }),
+    floating: (props) => ({
+      field: {
+        ...inputVariant("floating", props)
       }
     })
   },
@@ -12769,8 +12864,7 @@ var config24 = helpers16.defineMultiStyleConfig({
       maxHeight: "50vh",
       width: "100%",
       listStyle: "none",
-      borderBottomRadius: "sm",
-      ...baseBorder("default", props)
+      borderBottomRadius: "sm"
     },
     item: {
       paddingX: 2,
@@ -12802,7 +12896,22 @@ var config24 = helpers16.defineMultiStyleConfig({
         ...ghostText("selected", props)
       }
     }
-  })
+  }),
+  variants: {
+    base: (props) => ({
+      container: {
+        ...baseBorder("default", props)
+      }
+    }),
+    floating: (props) => ({
+      container: {
+        ...floatingBorder("default", props)
+      }
+    })
+  },
+  defaultProps: {
+    variant: "base"
+  }
 });
 var listbox_default = config24;
 var parts12 = anatomy$1("media-controller-button").parts("container", "icon");
@@ -13422,7 +13531,7 @@ var config34 = helpers26.defineMultiStyleConfig({
       position: "relative",
       "& + label": {
         fontSize: ["mobile.sm", "desktop.sm"],
-        top: "2px",
+        top: "0.2rem",
         left: 3,
         zIndex: 2,
         position: "absolute",
@@ -13435,10 +13544,9 @@ var config34 = helpers26.defineMultiStyleConfig({
       }
     },
     field: {
-      ...input_default.baseStyle(props).field,
+      ...inputBaseStyle(props).field,
       appearance: "none",
-      paddingTop: "1rem",
-      "option, optgroup": {}
+      paddingTop: "1rem"
     },
     icon: {
       width: 5,
@@ -13452,7 +13560,22 @@ var config34 = helpers26.defineMultiStyleConfig({
         ...baseText("disabled", props)
       }
     }
-  })
+  }),
+  variants: {
+    base: (props) => ({
+      field: {
+        ...inputVariant("base", props)
+      }
+    }),
+    floating: (props) => ({
+      field: {
+        ...inputVariant("floating", props)
+      }
+    })
+  },
+  defaultProps: {
+    variant: "base"
+  }
 });
 var select_default = config34;
 var fade = (startColor, endColor) => keyframes({
@@ -13948,7 +14071,7 @@ var config39 = helpers30.defineMultiStyleConfig({
 var tabs_default = config39;
 var config40 = defineStyleConfig$1({
   baseStyle: (props) => ({
-    ...input_default.baseStyle(props).field,
+    ...inputBaseStyle(props).field,
     minHeight: "5rem",
     verticalAlign: "top",
     appearance: "none",
@@ -13961,7 +14084,18 @@ var config40 = defineStyleConfig$1({
         transform: "scale(0.825) translateY(-10px)"
       }
     }
-  })
+  }),
+  variants: {
+    base: (props) => ({
+      ...inputVariant("base", props)
+    }),
+    floating: (props) => ({
+      ...inputVariant("floating", props)
+    })
+  },
+  defaultProps: {
+    variant: "base"
+  }
 });
 var textarea_default = config40;
 var config41 = defineStyleConfig$1({