@vention/machine-ui 5.17.0 → 5.18.0

package/index.esm.js

@@ -8880,12 +8880,14 @@ $$9({ target: 'Array', proto: true, forced: BROKEN_ON_SPARSE || BROKEN_ON_SPARSE
 addToUnscopables('includes');
 
 const VentionSwitch = props => {
-  var _a, _b;
   const {
     checked,
-    size,
+    size = "medium",
+    variant = "default",
     disabled,
     onChange,
+    labelText,
+    helperText,
     "data-testid": dataTestId = "vention-switch-root"
   } = props;
   const {
@@ -8894,8 +8896,9 @@ const VentionSwitch = props => {
   } = useStyles$k({
     checked,
     size,
-    variant: (_a = props.variant) !== null && _a !== void 0 ? _a : "default",
-    disabled: (_b = props.disabled) !== null && _b !== void 0 ? _b : false
+    variant,
+    disabled,
+    helperText
   });
   const handleOnchange = () => {
     if (disabled) return;
@@ -8903,11 +8906,12 @@ const VentionSwitch = props => {
       onChange(checked === "off" ? "on" : "off");
     }
   };
-  return jsxs("div", {
+  const switchElement = jsxs("div", {
     role: "switch",
     "aria-busy": checked === "loading" ? true : undefined,
     "aria-checked": getAriaChecked(checked),
     "aria-disabled": disabled ? true : undefined,
+    "aria-label": labelText,
     className: classes.root,
     "data-testid": dataTestId,
     onClick: handleOnchange,
@@ -8923,17 +8927,72 @@ const VentionSwitch = props => {
       "data-testid": "vention-switch-thumb"
     })]
   });
+  if (!labelText && !helperText) return switchElement;
+  const typographyNames = getTypographyNames(size);
+  return jsxs("div", {
+    className: classes.container,
+    "data-testid": "vention-switch-container",
+    children: [jsxs("div", {
+      className: classes.text,
+      "data-testid": "vention-switch-text",
+      onClick: handleOnchange,
+      children: [labelText ? jsx(Typography, {
+        variant: typographyNames.labelDiminished,
+        className: classes.labelText,
+        "data-testid": "vention-switch-label",
+        children: labelText
+      }) : null, helperText ? jsx(Typography, {
+        variant: typographyNames.helperText,
+        className: classes.helperText,
+        "data-testid": "vention-switch-helper",
+        children: helperText
+      }) : null]
+    }), jsx("div", {
+      className: classes.box,
+      children: switchElement
+    })]
+  });
 };
 const useStyles$k = tss.withParams().create(({
   theme,
   checked,
   size,
   variant,
-  disabled
+  disabled,
+  helperText
 }) => {
   return {
+    // Text on the left, switch on the right. The switch is centred against a label on its
+    // own, and top-aligned once a helper text is present.
+    container: {
+      display: "flex",
+      gap: theme.spacing(3),
+      alignItems: helperText ? "flex-start" : "center"
+    },
+    text: {
+      cursor: disabled ? "not-allowed" : "pointer",
+      display: "flex",
+      flex: "1 0 0",
+      flexDirection: "column",
+      minWidth: 0
+    },
+    box: {
+      display: "flex",
+      alignItems: "flex-start",
+      flexShrink: 0,
+      paddingTop: helperText ? "2px" : 0
+    },
+    labelText: {
+      color: theme.palette.text.primary,
+      opacity: disabled ? 0.5 : 1
+    },
+    helperText: {
+      color: theme.palette.text.secondary,
+      opacity: disabled ? 0.7 : 1
+    },
     root: Object.assign(Object.assign({
       backgroundColor: getBackgroundColor$1(theme, checked, variant),
+      cursor: disabled ? "not-allowed" : "pointer",
       display: "flex",
       borderRadius: "999px",
       alignItems: "center",
@@ -8969,12 +9028,31 @@ const useStyles$k = tss.withParams().create(({
     }
   };
 });
+/**
+ * Label and helper variants for the text beside the switch. Every size up to `x-large`
+ * follows the shared input map. `xx-large` takes its text from the design system's Toggle
+ * instead, which pairs an 18px SemiBold label with a 16px Regular helper; the shared map
+ * cannot express that, its `xx-large` row being 20px and 18px, and it has no 16px variant
+ * at any size. Only this size's label is SemiBold in the design system, every smaller one
+ * is Regular.
+ *
+ * Text only. The `xx-large` track stays at its own 80x46, not the design system's 64x32,
+ * because `mm-pendant`'s Freedrive toggle renders at this size and shrinking it would
+ * change a touch target.
+ */
+function getTypographyNames(size) {
+  if (size === "xx-large") {
+    return {
+      labelDiminished: "heading18SemiBold",
+      helperText: "paragraph16Regular"
+    };
+  }
+  return typographyNameFromSizeMap[size];
+}
 function getThumbSize(theme, size) {
   switch (size) {
     case "small":
       return theme.spacing(2);
-    case "medium":
-      return theme.spacing(3);
     case "large":
       return theme.spacing(4);
     case "x-large":
@@ -8983,8 +9061,9 @@ function getThumbSize(theme, size) {
     case "xx-large":
       return `calc(${theme.spacing(7)} + 6px)`;
     // 38px
+    case "medium":
     default:
-      return getThumbSize(theme, "medium");
+      return theme.spacing(3);
   }
 }
 function getThumbMarginSize(theme, size) {
@@ -9005,11 +9084,6 @@ function getTrackSize(theme, size) {
         // 22px
         height: theme.spacing(3)
       };
-    case "medium":
-      return {
-        width: theme.spacing(6),
-        height: theme.spacing(4)
-      };
     case "large":
       return {
         width: theme.spacing(7),
@@ -9025,8 +9099,12 @@ function getTrackSize(theme, size) {
         width: theme.spacing(12),
         height: `calc(${theme.spacing(9)} - 2px)`
       };
+    case "medium":
     default:
-      return getTrackSize(theme, "medium");
+      return {
+        width: theme.spacing(6),
+        height: theme.spacing(4)
+      };
   }
 }
 function getBackgroundColor$1(theme, checked, variant) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vention/machine-ui",
-  "version": "5.17.0",
+  "version": "5.18.0",
   "repository": {
     "type": "git",
     "url": "https://github.com/VentionCo/machine-cloud.git"

package/src/lib/components/vention-switch/vention-switch.d.ts

@@ -7,6 +7,8 @@ interface VentionSwitchProps {
     onChange?: (checked: "on" | "off") => void;
     disabled?: SwitchProps["disabled"];
     variant?: Variant;
+    labelText?: string;
+    helperText?: string;
     "data-testid"?: string;
 }
 export declare const VentionSwitch: (props: VentionSwitchProps) => import("react/jsx-runtime").JSX.Element;