@coinbase/cds-mobile 8.75.2 → 8.75.4

package/CHANGELOG.md

@@ -8,6 +8,18 @@ All notable changes to this project will be documented in this file.
 
 <!-- template-start -->
 
+## 8.75.4 (6/10/2026 PST)
+
+#### 🐞 Fixes
+
+- Fix: custom Switch sizes now center in the background track correctly.
+
+## 8.75.3 (5/22/2026 PST)
+
+#### 🐞 Fixes
+
+- Fix: update tray drag position live on iOS during swipe. [[#719](https://github.com/coinbase/cds/pull/719)]
+
 ## 8.75.2 ((5/19/2026, 01:13 PM PST))
 
 This is an artificial version bump with no new change.

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,EAAc,KAAK,IAAI,EAAE,MAAM,cAAc,CAAC;AAOrD,OAAO,EAAW,KAAK,gBAAgB,EAAyB,MAAM,WAAW,CAAC;AAElF,MAAM,MAAM,eAAe,CAAC,WAAW,SAAS,MAAM,IAAI,IAAI,CAC5D,gBAAgB,CAAC,WAAW,CAAC,EAC7B,OAAO,GAAG,aAAa,GAAG,SAAS,CACpC,CAAC;AAEF,MAAM,MAAM,WAAW,CAAC,WAAW,SAAS,MAAM,IAAI,eAAe,CAAC,WAAW,CAAC,CAAC;AAiHnF,eAAO,MAAM,MAAM,6GAAsB,CAAC"}
+{"version":3,"file":"Switch.d.ts","sourceRoot":"","sources":["../../src/controls/Switch.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoC,MAAM,OAAO,CAAC;AACzD,OAAO,EAAc,KAAK,IAAI,EAAE,MAAM,cAAc,CAAC;AAOrD,OAAO,EAAW,KAAK,gBAAgB,EAAyB,MAAM,WAAW,CAAC;AAElF,MAAM,MAAM,eAAe,CAAC,WAAW,SAAS,MAAM,IAAI,IAAI,CAC5D,gBAAgB,CAAC,WAAW,CAAC,EAC7B,OAAO,GAAG,aAAa,GAAG,SAAS,CACpC,CAAC;AAEF,MAAM,MAAM,WAAW,CAAC,WAAW,SAAS,MAAM,IAAI,eAAe,CAAC,WAAW,CAAC,CAAC;AAqHnF,eAAO,MAAM,MAAM,6GAAsB,CAAC"}

package/dts/overlays/drawer/useDrawerPanResponder.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useDrawerPanResponder.d.ts","sourceRoot":"","sources":["../../../src/overlays/drawer/useDrawerPanResponder.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,QAAQ,EAAmD,MAAM,cAAc,CAAC;AAC9F,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AAgB7D,KAAK,2BAA2B,GAAG;IACjC,eAAe,EAAE,QAAQ,CAAC,KAAK,CAAC;IAChC,eAAe,EAAE,QAAQ,CAAC,kBAAkB,CAAC;IAC7C,GAAG,EAAE,gBAAgB,CAAC;IACtB,iCAAiC,EAAE,OAAO,CAAC;IAC3C,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,kBAAkB,EAAE,MAAM,IAAI,CAAC;IAC/B,gBAAgB,EAAE,QAAQ,CAAC,KAAK,CAAC;IACjC,8BAA8B,EAAE,MAAM,CAAC;CACxC,CAAC;AASF,eAAO,MAAM,qBAAqB,GAAI,6JASnC,2BAA2B,gDAiN7B,CAAC"}
+{"version":3,"file":"useDrawerPanResponder.d.ts","sourceRoot":"","sources":["../../../src/overlays/drawer/useDrawerPanResponder.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,QAAQ,EAAmD,MAAM,cAAc,CAAC;AAC9F,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AAgB7D,KAAK,2BAA2B,GAAG;IACjC,eAAe,EAAE,QAAQ,CAAC,KAAK,CAAC;IAChC,eAAe,EAAE,QAAQ,CAAC,kBAAkB,CAAC;IAC7C,GAAG,EAAE,gBAAgB,CAAC;IACtB,iCAAiC,EAAE,OAAO,CAAC;IAC3C,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,kBAAkB,EAAE,MAAM,IAAI,CAAC;IAC/B,gBAAgB,EAAE,QAAQ,CAAC,KAAK,CAAC;IACjC,8BAA8B,EAAE,MAAM,CAAC;CACxC,CAAC;AASF,eAAO,MAAM,qBAAqB,GAAI,6JASnC,2BAA2B,gDA4N7B,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/esm/overlays/drawer/useDrawerPanResponder.js

@@ -127,11 +127,20 @@ export const useDrawerPanResponder = _ref => {
     }
     return false;
   }, [isTryingToDismiss, parseGestureState, isFlingToDismiss, isSwipeToDismiss]);
+  const initializeDragAnimation = useCallback(() => {
+    // On iOS, setOffset during pan move does not flush to native; capture the current
+    // position as offset via extractOffset() so setValue in onPanResponderMove updates the UI.
+    drawerAnimation.stopAnimation();
+    opacityAnimation.stopAnimation();
+    drawerAnimation.extractOffset();
+    opacityAnimation.extractOffset();
+  }, [drawerAnimation, opacityAnimation]);
   const panGestureHandlers = useMemo(() => {
     return PanResponder.create({
       onStartShouldSetPanResponder: () => true,
       onMoveShouldSetPanResponder: shouldCaptureGestures,
       onMoveShouldSetPanResponderCapture: shouldCaptureGestures,
+      onPanResponderGrant: initializeDragAnimation,
       onPanResponderMove: (_, gestureState) => {
         const {
           isDragging,
@@ -148,20 +157,20 @@ export const useDrawerPanResponder = _ref => {
               outputRange: [0, 0.1],
               clamp: true
             });
-            drawerAnimation.setOffset(calculateDragOffset(normalizedDistance));
+            drawerAnimation.setValue(calculateDragOffset(normalizedDistance));
           } else {
             const normalizedDrawerTransition = modulate(distance, {
               inputRange: [0, isHorizontalDrawer ? horizontalDrawerMaxPanDistance : verticalDrawerMaxPanDistance],
               outputRange: [0, normalizeDrawerPanDistanceMultiplier],
               clamp: false
             });
-            drawerAnimation.setOffset(normalizedDrawerTransition);
+            drawerAnimation.setValue(normalizedDrawerTransition);
             const normalizedOpacityTransition = modulate(distance, {
               inputRange: [0, isHorizontalDrawer ? horizontalDrawerMaxPanDistance : verticalDrawerMaxPanDistance],
               outputRange: [0, 1],
               clamp: false
             });
-            opacityAnimation.setOffset(normalizedOpacityTransition);
+            opacityAnimation.setValue(normalizedOpacityTransition);
           }
         }
       },
@@ -176,6 +185,6 @@ export const useDrawerPanResponder = _ref => {
         }
       }
     });
-  }, [drawerAnimation, animateSnapBack, parseGestureState, shouldCaptureGestures, shouldDismiss, drawerWidth, drawerHeight, pin, isHorizontalDrawer, onBlur, handleSwipeToClose, opacityAnimation]);
+  }, [drawerAnimation, animateSnapBack, initializeDragAnimation, parseGestureState, shouldCaptureGestures, shouldDismiss, drawerWidth, drawerHeight, pin, isHorizontalDrawer, onBlur, handleSwipeToClose, opacityAnimation]);
   return panGestureHandlers;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coinbase/cds-mobile",
-  "version": "8.75.2",
+  "version": "8.75.4",
   "description": "Coinbase Design System - Mobile",
   "repository": {
     "type": "git",
@@ -196,7 +196,7 @@
     "react-native-svg": "^14.1.0"
   },
   "dependencies": {
-    "@coinbase/cds-common": "^8.75.2",
+    "@coinbase/cds-common": "^8.75.4",
     "@coinbase/cds-icons": "^5.16.0",
     "@coinbase/cds-illustrations": "^4.40.1",
     "@coinbase/cds-lottie-files": "^3.3.4",