@vygruppen/spor-react 10.3.0 → 10.4.0

package/.turbo/turbo-build.log

@@ -1,5 +1,5 @@
 
-> @vygruppen/spor-react@10.3.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-KCPHU7A7.mjs 1.19 KB
-ESM dist/chunk-5HRYDWQ5.mjs             417.51 KB
-ESM ⚡️ Build success in 2131ms
-CJS dist/index.js 529.34 KB
-CJS ⚡️ Build success in 2132ms
-DTS ⚡️ Build success in 15282ms
-DTS dist/index.d.ts  315.84 KB
-DTS dist/index.d.mts 315.84 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,17 @@
 # @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

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

@@ -1,4 +1,4 @@
-import { createTexts, useTranslation, InfoSelect, Item } from './chunk-5HRYDWQ5.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-5HRYDWQ5.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
     )
@@ -1747,6 +1754,7 @@ var PhoneNumberInput = forwardRef(
     name,
     value: externalValue,
     onChange: externalOnChange,
+    variant,
     ...boxProps
   }, ref) => {
     const { t: t2 } = useTranslation();
@@ -1769,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")
         )
@@ -1784,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(
@@ -1803,7 +1813,8 @@ var PhoneNumberInput = forwardRef(
           });
         },
         position: "relative",
-        left: "1px"
+        left: "1px",
+        variant
       }
     ));
   }
@@ -1822,7 +1833,7 @@ var texts4 = createTexts({
     sv: "Landskod"
   }
 });
-var LazyCountryCodeSelect = React84__default.lazy(() => import('./CountryCodeSelect-KCPHU7A7.mjs'));
+var LazyCountryCodeSelect = React84__default.lazy(() => import('./CountryCodeSelect-XMQTDWRD.mjs'));
 var Radio = forwardRef((props, ref) => {
   return /* @__PURE__ */ React84__default.createElement(Radio$1, { ...props, ref });
 });
@@ -1884,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) => {
@@ -12105,6 +12116,7 @@ var config18 = helpers11.defineMultiStyleConfig({
     label: {
       position: "relative",
       fontSize: ["mobile.xs", "desktop.sm"],
+      marginTop: props.hasChosenValue ? 2 : 0,
       ...props.isLabelSrOnly ? srOnly2 : {}
     },
     innerButton: {
@@ -12471,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),
@@ -12559,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)
       }
     })
   },
@@ -12812,8 +12864,7 @@ var config24 = helpers16.defineMultiStyleConfig({
       maxHeight: "50vh",
       width: "100%",
       listStyle: "none",
-      borderBottomRadius: "sm",
-      ...baseBorder("default", props)
+      borderBottomRadius: "sm"
     },
     item: {
       paddingX: 2,
@@ -12845,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");
@@ -13465,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",
@@ -13478,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,
@@ -13495,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({
@@ -13991,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",
@@ -14004,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({