@coinbase/cds-mobile 9.2.1 → 9.2.2

package/CHANGELOG.md

@@ -8,6 +8,12 @@ All notable changes to this project will be documented in this file.
 
 <!-- template-start -->
 
+## 9.2.2 (6/10/2026 PST)
+
+#### 🐞 Fixes
+
+- Fix: custom Switch sizes now center in the background track correctly. [[#750](https://github.com/coinbase/cds/pull/750)]
+
 ## 9.2.1 (6/9/2026 PST)
 
 #### 🐞 Fixes

package/dts/controls/Switch.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Switch.d.ts","sourceRoot":"","sources":["../../src/controls/Switch.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoC,MAAM,OAAO,CAAC;AACzD,OAAO,EAAE,KAAK,SAAS,EAAc,KAAK,IAAI,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAOrF,OAAO,EAAW,KAAK,gBAAgB,EAAyB,MAAM,WAAW,CAAC;AAElF,MAAM,MAAM,eAAe,CAAC,WAAW,SAAS,MAAM,IAAI,IAAI,CAC5D,gBAAgB,CAAC,WAAW,CAAC,EAC7B,aAAa,GAAG,SAAS,CAC1B,CAAC;AAEF,MAAM,MAAM,WAAW,CAAC,WAAW,SAAS,MAAM,IAAI,eAAe,CAAC,WAAW,CAAC,GAAG;IACnF;;;;;;;OAOG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,oCAAoC;IACpC,MAAM,CAAC,EAAE;QACP,oDAAoD;QACpD,IAAI,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;QAC5B;;;WAGG;QACH,OAAO,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;KAChC,CAAC;CACH,CAAC;AAyHF,eAAO,MAAM,MAAM;IA5IjB;;;;;;;OAOG;eACQ,KAAK,CAAC,SAAS;IAC1B,oCAAoC;aAC3B;QACP,oDAAoD;QACpD,IAAI,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;QAC5B;;;WAGG;QACH,OAAO,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;KAChC;8BA0HsC,CAAC"}
+{"version":3,"file":"Switch.d.ts","sourceRoot":"","sources":["../../src/controls/Switch.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoC,MAAM,OAAO,CAAC;AACzD,OAAO,EAAE,KAAK,SAAS,EAAc,KAAK,IAAI,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAOrF,OAAO,EAAW,KAAK,gBAAgB,EAAyB,MAAM,WAAW,CAAC;AAElF,MAAM,MAAM,eAAe,CAAC,WAAW,SAAS,MAAM,IAAI,IAAI,CAC5D,gBAAgB,CAAC,WAAW,CAAC,EAC7B,aAAa,GAAG,SAAS,CAC1B,CAAC;AAEF,MAAM,MAAM,WAAW,CAAC,WAAW,SAAS,MAAM,IAAI,eAAe,CAAC,WAAW,CAAC,GAAG;IACnF;;;;;;;OAOG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,oCAAoC;IACpC,MAAM,CAAC,EAAE;QACP,oDAAoD;QACpD,IAAI,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;QAC5B;;;WAGG;QACH,OAAO,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;KAChC,CAAC;CACH,CAAC;AA6HF,eAAO,MAAM,MAAM;IAhJjB;;;;;;;OAOG;eACQ,KAAK,CAAC,SAAS;IAC1B,oCAAoC;aAC3B;QACP,oDAAoD;QACpD,IAAI,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;QAC5B;;;WAGG;QACH,OAAO,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;KAChC;8BA8HsC,CAAC"}

package/esm/controls/Switch.js

@@ -31,6 +31,10 @@ const SwitchIcon = _ref => {
     switchHeight,
     switchThumbSize
   } = theme.controlSize;
+
+  // Inset that keeps the thumb centered within the track regardless of the
+  // configured track/thumb sizes (built-in themes use a 1px inset).
+  const thumbInset = (switchHeight - switchThumbSize) / 2;
   const trackStyle = useMemo(() => [{
     width: switchWidth,
     height: switchHeight
@@ -39,16 +43,16 @@ const SwitchIcon = _ref => {
     width: switchThumbSize,
     height: switchThumbSize,
     position: 'absolute',
-    top: 1 - borderSize,
-    left: 1 - borderSize
+    top: thumbInset - borderSize,
+    left: thumbInset - borderSize
   }, {
     transform: [{
       translateX: animatedScaleValue.interpolate({
         inputRange: [0.9, 1],
-        outputRange: [0, switchWidth - switchThumbSize - 2]
+        outputRange: [0, switchWidth - switchThumbSize - thumbInset * 2]
       })
     }]
-  }], [animatedScaleValue, borderSize, switchThumbSize, switchWidth]);
+  }], [animatedScaleValue, borderSize, thumbInset, switchThumbSize, switchWidth]);
   return /*#__PURE__*/_jsx(Interactable, {
     background: background,
     borderColor: borderColor,

package/esm/controls/__stories__/Switch.stories.js

@@ -1,12 +1,16 @@
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 import React, { useState } from 'react';
 import { Example, ExampleScreen } from '../../examples/ExampleScreen';
 import { VStack } from '../../layout';
+import { ThemeProvider } from '../../system/ThemeProvider';
+import { defaultTheme } from '../../themes/defaultTheme';
 import { Switch } from '../Switch';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const SwitchScreen = () => {
   const [isChecked, setIsChecked] = useState(false);
   const [isChecked2, setIsChecked2] = useState(true);
   const [isChecked3, setIsChecked3] = useState(false);
+  const [isChecked4, setIsChecked4] = useState(false);
   return /*#__PURE__*/_jsxs(ExampleScreen, {
     children: [/*#__PURE__*/_jsx(Example, {
       inline: true,
@@ -64,6 +68,37 @@ const SwitchScreen = () => {
           })]
         });
       }
+    }), /*#__PURE__*/_jsx(Example, {
+      inline: true,
+      title: "Custom Theme",
+      children: () => {
+        const toggleChecked = () => setIsChecked4(prevChecked => !prevChecked);
+        const customTheme = _extends({}, defaultTheme, {
+          controlSize: _extends({}, defaultTheme.controlSize, {
+            switchHeight: 24,
+            switchThumbSize: 20,
+            switchWidth: 44
+          })
+        });
+        return /*#__PURE__*/_jsx(ThemeProvider, {
+          activeColorScheme: "light",
+          theme: customTheme,
+          children: /*#__PURE__*/_jsxs(VStack, {
+            gap: 2,
+            children: [/*#__PURE__*/_jsx(Switch, {
+              checked: isChecked4,
+              onChange: toggleChecked,
+              children: "Interactive"
+            }), /*#__PURE__*/_jsx(Switch, {
+              checked: false,
+              children: "Off"
+            }), /*#__PURE__*/_jsx(Switch, {
+              checked: true,
+              children: "On"
+            })]
+          })
+        });
+      }
     }), /*#__PURE__*/_jsx(Example, {
       inline: true,
       title: "Elevation",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coinbase/cds-mobile",
-  "version": "9.2.1",
+  "version": "9.2.2",
   "description": "Coinbase Design System - Mobile",
   "repository": {
     "type": "git",
@@ -206,9 +206,9 @@
     "react-native-worklets": "0.5.2"
   },
   "dependencies": {
-    "@coinbase/cds-common": "^9.2.1",
-    "@coinbase/cds-icons": "^5.18.0",
-    "@coinbase/cds-illustrations": "^4.40.1",
+    "@coinbase/cds-common": "^9.2.2",
+    "@coinbase/cds-icons": "^5.19.0",
+    "@coinbase/cds-illustrations": "^4.41.0",
     "@coinbase/cds-lottie-files": "^3.3.4",
     "@coinbase/cds-utils": "^2.3.5",
     "@floating-ui/react-native": "^0.10.5",