@coinbase/cds-mobile 8.66.2 → 9.0.0-rc.2

package/esm/stepper/DefaultStepperProgressVertical.js

@@ -1,13 +1,12 @@
-const _excluded = ["step", "parentStep", "activeStepId", "progress", "depth", "active", "visited", "flatStepIds", "complete", "isDescendentActive", "style", "activeStepLabelElement", "progressSpringConfig", "animate", "disableAnimateOnMount", "background", "defaultFill", "activeFill", "descendentActiveFill", "visitedFill", "completeFill", "minHeight", "width"];
+const _excluded = ["step", "parentStep", "activeStepId", "progress", "depth", "active", "visited", "flatStepIds", "complete", "isDescendentActive", "style", "activeStepLabelElement", "progressTimingConfig", "background", "defaultFill", "activeFill", "descendentActiveFill", "visitedFill", "completeFill", "minHeight", "width"];
 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); }
 function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
-import { memo, useCallback, useMemo } from 'react';
-import { useHasMounted } from '@coinbase/cds-common/hooks/useHasMounted';
+import { memo, useCallback, useEffect, useMemo } from 'react';
+import Animated, { useAnimatedStyle, useSharedValue, withTiming } from 'react-native-reanimated';
 import { flattenSteps } from '@coinbase/cds-common/stepper/utils';
-import { animated, to, useSpring } from '@react-spring/native';
 import { Box } from '../layout/Box';
 import { jsx as _jsx } from "react/jsx-runtime";
-const AnimatedBox = animated(Box);
+const AnimatedBox = Animated.createAnimatedComponent(Box);
 export const DefaultStepperProgressVertical = /*#__PURE__*/memo(function DefaultStepperProgressVertical(_ref) {
   let {
       step,
@@ -20,9 +19,7 @@ export const DefaultStepperProgressVertical = /*#__PURE__*/memo(function Default
       complete,
       isDescendentActive,
       style,
-      progressSpringConfig,
-      animate = true,
-      disableAnimateOnMount,
+      progressTimingConfig,
       background = 'bgLine',
       defaultFill = 'bgLinePrimarySubtle',
       activeFill = 'bgLinePrimarySubtle',
@@ -33,7 +30,6 @@ export const DefaultStepperProgressVertical = /*#__PURE__*/memo(function Default
       width = 2
     } = _ref,
     props = _objectWithoutPropertiesLoose(_ref, _excluded);
-  const hasMounted = useHasMounted();
   const isLastStep = flatStepIds[flatStepIds.length - 1] === step.id;
 
   // Count the total number of sub-steps in the current step's tree
@@ -49,38 +45,46 @@ export const DefaultStepperProgressVertical = /*#__PURE__*/memo(function Default
     const stepIndex = flatSteps.findIndex(step => step.id === targetId);
     return stepIndex + 1;
   }, []);
+
+  // Fractional fill for steps with sub-steps. For all other cases, return 1
+  // and let the cascade's `progress` prop control whether the bar is filled.
   const progressHeight = useMemo(() => {
     var _step$subSteps;
     const totalSubSteps = countAllSubSteps((_step$subSteps = step.subSteps) != null ? _step$subSteps : []);
-    if (complete) return 1;
-    if (active && totalSubSteps === 0) return 1;
-    if (active && !isDescendentActive) return 0;
-    if (isDescendentActive) {
+    if (active && totalSubSteps > 0 && !isDescendentActive) return 0;
+    if (isDescendentActive && totalSubSteps > 0) {
       var _step$subSteps2;
       const activePosition = findSubStepPosition((_step$subSteps2 = step.subSteps) != null ? _step$subSteps2 : [], activeStepId);
       return activePosition / totalSubSteps;
     }
-    if (visited) return 1;
-    return 0;
-  }, [countAllSubSteps, step.subSteps, complete, active, isDescendentActive, visited, findSubStepPosition, activeStepId]);
-  const fillHeightSpring = useSpring({
-    height: progressHeight,
-    immediate: !animate || disableAnimateOnMount && !hasMounted,
-    config: progressSpringConfig
-  });
+    return 1;
+  }, [countAllSubSteps, step.subSteps, active, isDescendentActive, findSubStepPosition, activeStepId]);
+  const containerHeight = useSharedValue(0);
+  const targetHeight = progress * progressHeight;
+  const animatedHeight = useSharedValue(targetHeight);
+  const handleLayout = useCallback(event => {
+    containerHeight.value = event.nativeEvent.layout.height;
+  }, [containerHeight]);
+  useEffect(() => {
+    animatedHeight.value = withTiming(targetHeight, progressTimingConfig);
+  }, [targetHeight, progressTimingConfig, animatedHeight]);
+  const animatedStyle = useAnimatedStyle(() => ({
+    height: animatedHeight.value * containerHeight.value
+  }));
   if (depth > 0 || isLastStep) return null;
   return /*#__PURE__*/_jsx(Box, _extends({
     background: background,
     flexGrow: 1,
     minHeight: minHeight,
+    onLayout: handleLayout,
     position: "relative",
     style: style,
     width: width
   }, props, {
     children: /*#__PURE__*/_jsx(AnimatedBox, {
       background: complete ? completeFill : active ? activeFill : isDescendentActive ? descendentActiveFill : visited ? visitedFill : defaultFill,
-      height: to([progress, fillHeightSpring.height], (p, h) => p * h * 100 + "%"),
       position: "absolute",
+      style: animatedStyle,
       width: "100%"
     })
   }));

package/esm/stepper/DefaultStepperStepHorizontal.js

@@ -1,4 +1,4 @@
-const _excluded = ["step", "parentStep", "activeStepId", "depth", "active", "visited", "flatStepIds", "complete", "isDescendentActive", "progress", "style", "completedStepAccessibilityLabel", "styles", "activeStepLabelElement", "setActiveStepLabelElement", "progressSpringConfig", "animate", "disableAnimateOnMount", "StepperStepComponent", "StepperSubstepContainerComponent", "StepperLabelComponent", "StepperProgressComponent", "StepperIconComponent"];
+const _excluded = ["step", "parentStep", "activeStepId", "depth", "active", "visited", "flatStepIds", "complete", "isDescendentActive", "progress", "style", "completedStepAccessibilityLabel", "styles", "activeStepLabelElement", "setActiveStepLabelElement", "progressTimingConfig", "animate", "disableAnimateOnMount", "StepperStepComponent", "StepperSubstepContainerComponent", "StepperLabelComponent", "StepperProgressComponent", "StepperIconComponent"];
 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); }
 function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
 import { memo, useMemo } from 'react';
@@ -25,7 +25,7 @@ export const DefaultStepperStepHorizontal = /*#__PURE__*/memo(function DefaultSt
       styles,
       activeStepLabelElement,
       setActiveStepLabelElement,
-      progressSpringConfig,
+      progressTimingConfig,
       animate,
       disableAnimateOnMount,
       StepperStepComponent = DefaultStepperStepHorizontal,
@@ -76,7 +76,7 @@ export const DefaultStepperStepHorizontal = /*#__PURE__*/memo(function DefaultSt
         isDescendentActive: isDescendentActive,
         parentStep: parentStep,
         progress: progress,
-        progressSpringConfig: progressSpringConfig,
+        progressTimingConfig: progressTimingConfig,
         step: step,
         style: styles == null ? void 0 : styles.progress,
         visited: visited
@@ -105,7 +105,7 @@ export const DefaultStepperStepHorizontal = /*#__PURE__*/memo(function DefaultSt
       step: step,
       style: styles == null ? void 0 : styles.substepContainer,
       visited: visited,
-      children: step.subSteps.map((subStep, index) => {
+      children: step.subSteps.map(subStep => {
         var _subStep$Component;
         const RenderedStepComponent = (_subStep$Component = subStep.Component) != null ? _subStep$Component : StepperStepComponent;
         const isDescendentActive = activeStepId ? containsStep({
@@ -130,7 +130,7 @@ export const DefaultStepperStepHorizontal = /*#__PURE__*/memo(function DefaultSt
           isDescendentActive: isDescendentActive,
           parentStep: step,
           progress: progress,
-          progressSpringConfig: progressSpringConfig,
+          progressTimingConfig: progressTimingConfig,
           setActiveStepLabelElement: setActiveStepLabelElement,
           step: subStep,
           styles: styles,

package/esm/stepper/DefaultStepperStepVertical.js

@@ -1,4 +1,4 @@
-const _excluded = ["step", "parentStep", "activeStepId", "depth", "active", "visited", "flatStepIds", "complete", "isDescendentActive", "progress", "style", "completedStepAccessibilityLabel", "styles", "activeStepLabelElement", "setActiveStepLabelElement", "progressSpringConfig", "animate", "disableAnimateOnMount", "StepperStepComponent", "StepperSubstepContainerComponent", "StepperLabelComponent", "StepperProgressComponent", "StepperIconComponent"];
+const _excluded = ["step", "parentStep", "activeStepId", "depth", "active", "visited", "flatStepIds", "complete", "isDescendentActive", "progress", "style", "completedStepAccessibilityLabel", "styles", "activeStepLabelElement", "setActiveStepLabelElement", "progressTimingConfig", "animate", "disableAnimateOnMount", "StepperStepComponent", "StepperSubstepContainerComponent", "StepperLabelComponent", "StepperProgressComponent", "StepperIconComponent"];
 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); }
 function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
 import { memo, useMemo } from 'react';
@@ -28,7 +28,7 @@ export const DefaultStepperStepVertical = /*#__PURE__*/memo(function DefaultStep
       styles,
       activeStepLabelElement,
       setActiveStepLabelElement,
-      progressSpringConfig,
+      progressTimingConfig,
       animate,
       disableAnimateOnMount,
       StepperStepComponent = DefaultStepperStepVertical,
@@ -79,7 +79,7 @@ export const DefaultStepperStepVertical = /*#__PURE__*/memo(function DefaultStep
           isDescendentActive: isDescendentActive,
           parentStep: parentStep,
           progress: progress,
-          progressSpringConfig: progressSpringConfig,
+          progressTimingConfig: progressTimingConfig,
           step: step,
           style: styles == null ? void 0 : styles.progress,
           visited: visited
@@ -138,7 +138,7 @@ export const DefaultStepperStepVertical = /*#__PURE__*/memo(function DefaultStep
               isDescendentActive: isDescendentActive,
               parentStep: step,
               progress: progress,
-              progressSpringConfig: progressSpringConfig,
+              progressTimingConfig: progressTimingConfig,
               setActiveStepLabelElement: setActiveStepLabelElement,
               step: subStep,
               styles: styles,

package/esm/stepper/Stepper.js

@@ -1,15 +1,14 @@
-const _excluded = ["direction", "activeStepId", "steps", "complete", "style", "completedStepAccessibilityLabel", "styles", "gap", "accessibilityLabel", "StepperStepComponent", "StepperSubstepContainerComponent", "StepperLabelComponent", "StepperProgressComponent", "StepperIconComponent", "StepperHeaderComponent", "progressSpringConfig", "animate", "disableAnimateOnMount"],
+const _excluded = ["direction", "activeStepId", "steps", "complete", "style", "completedStepAccessibilityLabel", "styles", "gap", "accessibilityLabel", "StepperStepComponent", "StepperSubstepContainerComponent", "StepperLabelComponent", "StepperProgressComponent", "StepperIconComponent", "StepperHeaderComponent", "progressTimingConfig", "animate", "disableAnimateOnMount"],
   _excluded2 = ["root"];
 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); }
 function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
-import React, { forwardRef, memo, useEffect, useMemo, useState } from 'react';
-import { useHasMounted } from '@coinbase/cds-common/hooks/useHasMounted';
-import { usePreviousValue } from '@coinbase/cds-common/hooks/usePreviousValue';
+import React, { forwardRef, memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { durations } from '@coinbase/cds-common/motion/tokens';
 import { containsStep, flattenSteps, isStepVisited } from '@coinbase/cds-common/stepper/utils';
-import { useSprings } from '@react-spring/native';
 import { useComponentConfig } from '../hooks/useComponentConfig';
 import { Box } from '../layout/Box';
 import { VStack } from '../layout/VStack';
+import { mobileCurves } from '../motion/convertMotionConfig';
 import { DefaultStepperHeaderHorizontal } from './DefaultStepperHeaderHorizontal';
 import { DefaultStepperIconVertical } from './DefaultStepperIconVertical';
 import { DefaultStepperLabelVertical } from './DefaultStepperLabelVertical';
@@ -30,13 +29,22 @@ import { DefaultStepperSubstepContainerVertical } from './DefaultStepperSubstepC
 // ------------ STEPPER COMPONENT PROPS ------------
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export const horizontalStepGap = 0.5;
+const cascadeStaggerMs = durations.slow2;
+export const defaultProgressTimingConfig = {
+  duration: durations.slow2,
+  easing: mobileCurves.global
+};
+
+/**
+ * @deprecated Use {@link defaultProgressTimingConfig}. Retained for migration only; Stepper no longer uses react-spring for progress. This will be removed in a future major release.
+ * @deprecationExpectedRemoval v10
+ */
 export const defaultProgressSpringConfig = {
   friction: 0,
   tension: 100,
   clamp: true
 };
 const StepperBase = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props, ref) => {
-  var _usePreviousValue, _usePreviousValue2;
   const mergedProps = useComponentConfig('Stepper', _props);
   const {
       direction,
@@ -55,12 +63,11 @@ const StepperBase = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props, ref) => {
       StepperProgressComponent = direction === 'vertical' ? DefaultStepperProgressVertical : DefaultStepperProgressHorizontal,
       StepperIconComponent = direction === 'vertical' ? DefaultStepperIconVertical : null,
       StepperHeaderComponent = direction === 'vertical' ? null : DefaultStepperHeaderHorizontal,
-      progressSpringConfig = defaultProgressSpringConfig,
+      progressTimingConfig = defaultProgressTimingConfig,
       animate = true,
       disableAnimateOnMount
     } = mergedProps,
     props = _objectWithoutPropertiesLoose(mergedProps, _excluded);
-  const hasMounted = useHasMounted();
   const flatStepIds = useMemo(() => flattenSteps(steps).map(step => step.id), [steps]);
 
   // Derive activeStep from activeStepId
@@ -106,69 +113,50 @@ const StepperBase = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props, ref) => {
       targetStepId: activeStepId
     })) : -1;
   }, [activeStepId, steps]);
-  const previousComplete = (_usePreviousValue = usePreviousValue(complete)) != null ? _usePreviousValue : false;
-  const previousActiveStepIndex = (_usePreviousValue2 = usePreviousValue(activeStepIndex)) != null ? _usePreviousValue2 : -1;
-  const [progressSprings, progressSpringsApi] = useSprings(steps.length, index => ({
-    from: {
-      progress: complete ? 1 : 0
-    },
-    config: progressSpringConfig
-  }));
-  useEffect(() => {
-    // update the previous values for next render
-    let stepsToAnimate = [];
-    let isAnimatingForward = false;
 
-    // Case when going from not-complete to complete
-    if (Boolean(complete) !== previousComplete) {
-      if (complete) {
-        // Going to complete: animate remaining steps to filled.
-        // Use previousActiveStepIndex to determine which steps are already filled before the completion state update,
-        const lastFilledIndex = Math.max(activeStepIndex, previousActiveStepIndex);
-        stepsToAnimate = Array.from({
-          length: steps.length - lastFilledIndex - 1
-        }, (_, i) => lastFilledIndex + 1 + i);
-        isAnimatingForward = true;
-      } else {
-        // Going from complete: animate from end down to activeStepIndex+1
-        stepsToAnimate = Array.from({
-          length: steps.length - activeStepIndex - 1
-        }, (_, i) => steps.length - 1 - i);
-        isAnimatingForward = false;
-      }
-    }
+  // The effective cascade target: when complete, fill all steps up to the last one.
+  // Otherwise, fill up to activeStepIndex.
+  const cascadeTarget = complete ? steps.length - 1 : activeStepIndex;
 
-    // Case for normal step navigation (e.g. step 1 => step 2)
-    else if (activeStepIndex !== previousActiveStepIndex) {
-      if (activeStepIndex > previousActiveStepIndex) {
-        // Forward: animate from previousActiveStepIndex+1 to activeStepIndex
-        stepsToAnimate = Array.from({
-          length: activeStepIndex - previousActiveStepIndex
-        }, (_, i) => previousActiveStepIndex + 1 + i);
-        isAnimatingForward = true;
-      } else {
-        // Backward: animate from previousActiveStepIndex down to activeStepIndex+1
-        stepsToAnimate = Array.from({
-          length: previousActiveStepIndex - activeStepIndex
-        }, (_, i) => previousActiveStepIndex - i);
-        isAnimatingForward = false;
-      }
+  // Cascade animation state: advances one step at a time toward cascadeTarget.
+  // When disableAnimateOnMount is false (default), start unfilled (-1) so the
+  // cascade animates bars one-at-a-time up to the target on mount.
+  const [filledStepIndex, setFilledStepIndex] = useState(() => disableAnimateOnMount ? cascadeTarget : -1);
+  const targetStepIndexRef = useRef(cascadeTarget);
+  useEffect(() => {
+    targetStepIndexRef.current = cascadeTarget;
+    if (!animate) {
+      setFilledStepIndex(cascadeTarget);
+      return;
     }
-    const animateNextStep = () => {
-      if (stepsToAnimate.length === 0) return;
-      const stepIndex = stepsToAnimate.shift();
-      if (stepIndex === undefined) return;
-      progressSpringsApi.start(index => index === stepIndex ? {
-        progress: isAnimatingForward ? 1 : 0,
-        config: progressSpringConfig,
-        onRest: animateNextStep,
-        immediate: !animate || disableAnimateOnMount && !hasMounted
-      } : {});
-    };
 
-    // start the animation loop for relevant springs (stepsToAnimate)
-    animateNextStep();
-  }, [progressSpringsApi, complete, steps.length, steps, activeStepIndex, previousActiveStepIndex, previousComplete, progressSpringConfig, animate, disableAnimateOnMount, hasMounted]);
+    // Advance one step immediately to kick off the cascade
+    setFilledStepIndex(prev => {
+      if (prev === cascadeTarget) return prev;
+      return prev < cascadeTarget ? prev + 1 : prev - 1;
+    });
+
+    // Continue advancing on a fixed interval for fluid, overlapping springs
+    const interval = setInterval(() => {
+      setFilledStepIndex(prev => {
+        const target = targetStepIndexRef.current;
+        if (prev === target) return prev;
+        return prev < target ? prev + 1 : prev - 1;
+      });
+    }, cascadeStaggerMs);
+    return () => clearInterval(interval);
+  }, [cascadeTarget, animate]);
+
+  // Compute progress for each step: 1 if filled, 0 if not
+  const getStepProgress = useCallback(index => {
+    if (!animate) {
+      if (complete) return 1;
+      if (activeStepIndex < 0) return 0;
+      return index <= activeStepIndex ? 1 : 0;
+    }
+    if (filledStepIndex < 0) return 0;
+    return index <= filledStepIndex ? 1 : 0;
+  }, [complete, animate, activeStepIndex, filledStepIndex]);
   return /*#__PURE__*/_jsxs(VStack, _extends({
     ref: ref,
     accessibilityLabel: accessibilityLabel,
@@ -178,6 +166,7 @@ const StepperBase = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props, ref) => {
     children: [StepperHeaderComponent && /*#__PURE__*/_jsx(StepperHeaderComponent, {
       activeStep: activeStep,
       complete: complete,
+      disableAnimateOnMount: disableAnimateOnMount,
       flatStepIds: flatStepIds,
       style: styles == null ? void 0 : styles.header
     }), /*#__PURE__*/_jsx(Box, {
@@ -190,7 +179,8 @@ const StepperBase = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props, ref) => {
           targetStepId: activeStepId
         }) : false;
         const RenderedStepComponent = (_step$Component = step.Component) != null ? _step$Component : StepperStepComponent;
-        return RenderedStepComponent && /*#__PURE__*/_jsx(RenderedStepComponent, {
+        if (!RenderedStepComponent) return null;
+        return /*#__PURE__*/_jsx(RenderedStepComponent, {
           StepperIconComponent: StepperIconComponent,
           StepperLabelComponent: StepperLabelComponent,
           StepperProgressComponent: StepperProgressComponent,
@@ -207,8 +197,8 @@ const StepperBase = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props, ref) => {
           flatStepIds: flatStepIds,
           isDescendentActive: isDescendentActive,
           parentStep: null,
-          progress: progressSprings[index].progress,
-          progressSpringConfig: progressSpringConfig,
+          progress: getStepProgress(index),
+          progressTimingConfig: progressTimingConfig,
           setActiveStepLabelElement: setActiveStepLabelElement,
           step: step,
           styles: stepStyles,

package/esm/stepper/__stories__/StepperHorizontal.stories.js

@@ -7,6 +7,7 @@ import { useCallback, useState } from 'react';
 import { loremIpsum } from '@coinbase/cds-common/internal/data/loremIpsum';
 import { useStepper } from '@coinbase/cds-common/stepper/useStepper';
 import { Button } from '../../buttons';
+import { Switch } from '../../controls/Switch';
 import { Example, ExampleScreen } from '../../examples/ExampleScreen';
 import { Icon } from '../../icons/Icon';
 import { HStack, VStack } from '../../layout';
@@ -204,6 +205,25 @@ const NoActiveStep = () => {
   });
 };
 
+// ------------------------------------------------------------
+// Disable Animate on Mount
+// ------------------------------------------------------------
+const DisableAnimateOnMount = () => {
+  const [disableAnimateOnMount, setDisableAnimateOnMount] = useState(false);
+  return /*#__PURE__*/_jsxs(VStack, {
+    gap: 2,
+    children: [/*#__PURE__*/_jsx(Switch, {
+      checked: disableAnimateOnMount,
+      onChange: () => setDisableAnimateOnMount(prev => !prev),
+      children: "disableAnimateOnMount"
+    }), /*#__PURE__*/_jsx(StepperHorizontalExample, {
+      defaultActiveStepId: basicSteps[2].id,
+      disableAnimateOnMount: disableAnimateOnMount,
+      steps: basicSteps
+    })]
+  });
+};
+
 // ------------------------------------------------------------
 // Custom Progress Component
 // ------------------------------------------------------------
@@ -254,6 +274,9 @@ const StepperHorizontalScreen = () => {
         direction: "horizontal",
         steps: basicSteps
       })
+    }), /*#__PURE__*/_jsx(Example, {
+      title: "Disable Animate on Mount",
+      children: /*#__PURE__*/_jsx(DisableAnimateOnMount, {})
     }), /*#__PURE__*/_jsx(Example, {
       title: "No Label Text",
       children: /*#__PURE__*/_jsx(StepperHorizontalExample, {

package/esm/stepper/__stories__/StepperVertical.stories.js

@@ -6,6 +6,7 @@ import { useStepper } from '@coinbase/cds-common/stepper/useStepper';
 import { Button } from '../../buttons';
 import { ListCell } from '../../cells';
 import { Collapsible } from '../../collapsible';
+import { Switch } from '../../controls/Switch';
 import { Example, ExampleScreen } from '../../examples/ExampleScreen';
 import { Icon } from '../../icons/Icon';
 import { HStack, VStack } from '../../layout';
@@ -219,6 +220,38 @@ const InitialActiveStep = () => {
   });
 };
 
+// ------------------------------------------------------------
+// Disable Animate on Mount
+// ------------------------------------------------------------
+const disableAnimateOnMountSteps = [{
+  id: 'first-step',
+  label: 'First step'
+}, {
+  id: 'second-step',
+  label: 'Second step'
+}, {
+  id: 'third-step',
+  label: 'Third step'
+}, {
+  id: 'final-step',
+  label: 'Final step'
+}];
+const DisableAnimateOnMount = () => {
+  const [disableAnimateOnMount, setDisableAnimateOnMount] = useState(false);
+  return /*#__PURE__*/_jsxs(VStack, {
+    gap: 2,
+    children: [/*#__PURE__*/_jsx(Switch, {
+      checked: disableAnimateOnMount,
+      onChange: () => setDisableAnimateOnMount(prev => !prev),
+      children: "disableAnimateOnMount"
+    }), /*#__PURE__*/_jsx(StepperVerticalExample, {
+      defaultActiveStepId: disableAnimateOnMountSteps[2].id,
+      disableAnimateOnMount: disableAnimateOnMount,
+      steps: disableAnimateOnMountSteps
+    })]
+  });
+};
+
 // ------------------------------------------------------------
 // Nested Steps
 // ------------------------------------------------------------
@@ -665,6 +698,9 @@ const StepperVerticalScreen = () => {
     }), /*#__PURE__*/_jsx(Example, {
       title: "Initial Active Step",
       children: /*#__PURE__*/_jsx(InitialActiveStep, {})
+    }), /*#__PURE__*/_jsx(Example, {
+      title: "Disable Animate on Mount",
+      children: /*#__PURE__*/_jsx(DisableAnimateOnMount, {})
     }), /*#__PURE__*/_jsx(Example, {
       title: "Nested Steps",
       children: /*#__PURE__*/_jsx(NestedSteps, {})

package/esm/styles/styleProps.js

@@ -1,3 +1,5 @@
+/** Position-related style props using React Native types. Use this instead of common's PositionStyles for mobile. */
+
 // TO DO: If possible, refactor DimensionValue to ViewStyle['width'] etc
 
 /** StyleProps that get their values from the theme. */
@@ -50,7 +52,7 @@ export const getStyles = (styleProps, theme) => {
   const style = {};
   for (const styleProp in styleProps) {
     const value = styleProps[styleProp];
-    if (typeof value === 'undefined') continue;
+    if (value === undefined) continue;
 
     // If there are no stylePropAliases for this styleProp...
     if (typeof stylePropAliases[styleProp] === 'undefined') {
@@ -59,7 +61,7 @@ export const getStyles = (styleProps, theme) => {
         style[styleProp] = value;
       }
       // If it is themed and it is margin* prop
-      else if (styleProp.startsWith('margin')) {
+      else if (styleProp.startsWith('margin') && value !== null) {
         style[styleProp] = -theme[themedStyleProps[styleProp]][-value];
       }
       // If it is themed...
@@ -73,7 +75,7 @@ export const getStyles = (styleProps, theme) => {
           style[propAlias] = value;
         }
         // If it is themed and it is margin* prop
-        else if (styleProp.startsWith('margin')) {
+        else if (styleProp.startsWith('margin') && value !== null) {
           style[propAlias] = -theme[themedStyleProps[styleProp]][-value];
         }
         // If it is themed...

package/esm/system/AndroidNavigationBar.js

@@ -30,6 +30,24 @@ export const useAndroidNavigationBarUpdater = function (_temp) {
     return undefined;
   }, [bg, statusBarStyle]);
 };
+
+/**
+ * Updates the **Android system navigation bar** (bottom bar) colors to match the active CDS theme.
+ *
+ * This component is **side-effect only** (renders `null`). When mounted, it sets:
+ * - **navigation bar background color** to the theme background (`theme.color.bg`)
+ * - **navigation bar icon brightness** (light/dark) based on the computed status bar style
+ *
+ * ### When to use
+ * - Your app wants the Android navigation bar to visually match the CDS theme (light/dark)
+ * - You intentionally want an opaque navigation bar that matches your app background (non edge-to-edge look).
+ *
+ * ### When NOT to use
+ * - Your app already manages system bars via another library/app-level integration.
+ * - You intentionally want to keep the OS default navigation bar styling.
+ * - You are using Android edge-to-edge defaults (transparent system bars / scrims) and want the platform to
+ *   manage navigation bar transparency + contrast automatically.
+ */
 export const AndroidNavigationBar = /*#__PURE__*/memo(props => {
   const updateAndroidNavigationBar = useAndroidNavigationBarUpdater(props);
   const hasRun = useRef(false);

package/esm/system/PressableOpacity.js

@@ -18,9 +18,10 @@ export const PressableOpacity = _ref => {
       children
     } = _ref,
     props = _objectWithoutPropertiesLoose(_ref, _excluded);
-  return /*#__PURE__*/_jsx(Pressable, _extends({}, props, {
+  return /*#__PURE__*/_jsx(Pressable, _extends({
     background: "transparent",
-    borderColor: "transparent",
+    borderColor: "transparent"
+  }, props, {
     children: children
   }));
 };

package/esm/system/ThemeProvider.js

@@ -1,13 +1,32 @@
 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, { createContext, useContext, useMemo } from 'react';
+import React, { createContext, memo, useContext, useMemo } from 'react';
 import { jsx as _jsx } from "react/jsx-runtime";
 export const ThemeContext = /*#__PURE__*/createContext(undefined);
 
-// export type ThemeProviderProps = SystemProviderProps &
-//   ThemeManagerProps &
-//   FramerMotionProviderProps;
-
-export const ThemeProvider = _ref => {
+// Not used for any theme optimizations in the mobile ThemeProvider, but exported for feature-parity with cds-web
+/**
+ * Diff two themes and return a new partial theme with only the differences.
+ */
+export const diffThemes = (theme, parentTheme) => {
+  if (!parentTheme) return theme;
+  const themeDiff = {
+    id: theme.id,
+    activeColorScheme: theme.activeColorScheme
+  };
+  Object.keys(theme).forEach(key => {
+    var _theme$key;
+    if (key === 'id' || key === 'activeColorScheme') return;
+    themeDiff[key] = {};
+    Object.keys((_theme$key = theme[key]) != null ? _theme$key : {}).forEach(value => {
+      var _theme$key2, _parentTheme$key;
+      if (((_theme$key2 = theme[key]) == null ? void 0 : _theme$key2[value]) !== ((_parentTheme$key = parentTheme[key]) == null ? void 0 : _parentTheme$key[value])) {
+        themeDiff[key][value] = theme[key][value];
+      }
+    });
+  });
+  return themeDiff;
+};
+export const ThemeProvider = /*#__PURE__*/memo(_ref => {
   let {
     theme,
     activeColorScheme,
@@ -18,10 +37,10 @@ export const ThemeProvider = _ref => {
     const activeColorKey = activeColorScheme === 'dark' ? 'darkColor' : 'lightColor';
     const inverseSpectrumKey = activeColorScheme === 'dark' ? 'lightSpectrum' : 'darkSpectrum';
     const inverseColorKey = activeColorScheme === 'dark' ? 'lightColor' : 'darkColor';
-    if (!theme[activeColorKey]) throw Error("ThemeProvider activeColorScheme is " + activeColorScheme + " but no " + activeColorScheme + " colors are defined for the theme. See the docs at https://cds.coinbase.com/getting-started/theming/#creating-a-theme");
-    if (!theme[activeSpectrumKey]) throw Error("ThemeProvider activeColorScheme is " + activeColorScheme + " but no " + activeSpectrumKey + " values are defined for the theme. See the docs at https://cds.coinbase.com/getting-started/theming/#creating-a-theme");
-    if (theme[inverseSpectrumKey] && !theme[inverseColorKey]) throw Error("ThemeProvider theme has " + inverseSpectrumKey + " values defined but no " + inverseColorKey + " colors are defined for the theme. See the docs at https://cds.coinbase.com/getting-started/theming/#creating-a-theme");
-    if (theme[inverseColorKey] && !theme[inverseSpectrumKey]) throw Error("ThemeProvider theme has " + inverseColorKey + " colors defined but no " + inverseSpectrumKey + " values are defined for the theme. See the docs at https://cds.coinbase.com/getting-started/theming/#creating-a-theme");
+    if (!theme[activeColorKey]) throw Error("ThemeProvider activeColorScheme is " + activeColorScheme + " but no " + activeColorScheme + " colors are defined for the theme. See the docs https://cds.coinbase.com/getting-started/theming");
+    if (!theme[activeSpectrumKey]) throw Error("ThemeProvider activeColorScheme is " + activeColorScheme + " but no " + activeSpectrumKey + " values are defined for the theme. See the docs https://cds.coinbase.com/getting-started/theming");
+    if (theme[inverseSpectrumKey] && !theme[inverseColorKey]) throw Error("ThemeProvider theme has " + inverseSpectrumKey + " values defined but no " + inverseColorKey + " colors are defined for the theme. See the docs https://cds.coinbase.com/getting-started/theming");
+    if (theme[inverseColorKey] && !theme[inverseSpectrumKey]) throw Error("ThemeProvider theme has " + inverseColorKey + " colors defined but no " + inverseSpectrumKey + " values are defined for the theme. See the docs https://cds.coinbase.com/getting-started/theming");
     return _extends({}, theme, {
       activeColorScheme: activeColorScheme,
       spectrum: theme[activeSpectrumKey],
@@ -32,9 +51,9 @@ export const ThemeProvider = _ref => {
     value: themeApi,
     children: children
   });
-};
+});
 /** Falls back to the currently active colorScheme if the inverse colors are not defined in the theme.  */
-export const InvertedThemeProvider = _ref2 => {
+export const InvertedThemeProvider = /*#__PURE__*/memo(_ref2 => {
   let {
     children
   } = _ref2;
@@ -48,4 +67,4 @@ export const InvertedThemeProvider = _ref2 => {
     theme: context,
     children: children
   });
-};
+});