@coinbase/cds-mobile 8.36.2 → 8.36.3

package/CHANGELOG.md

@@ -8,6 +8,10 @@ All notable changes to this project will be documented in this file.
 
 <!-- template-start -->
 
+## 8.36.3 ((1/9/2026, 01:51 PM PST))
+
+This is an artificial version bump with no new change.
+
 ## 8.36.2 (1/7/2026 PST)
 
 #### 🐞 Fixes

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

@@ -1,7 +1,7 @@
 const _excluded = ["steps", "defaultActiveStepId", "title", "initialComplete", "skipParentSteps", "renderWithApi"];
 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, { useState } from 'react';
+import React, { memo, useState } from 'react';
 import { useStepper } from '@coinbase/cds-common/stepper/useStepper';
 import { Button } from '../../buttons';
 import { ListCell } from '../../cells';
@@ -11,6 +11,9 @@ import { Icon } from '../../icons/Icon';
 import { HStack, VStack } from '../../layout';
 import { Pressable } from '../../system';
 import { Text } from '../../typography/Text';
+import { DefaultStepperIconVertical } from '../DefaultStepperIconVertical';
+import { DefaultStepperLabelVertical } from '../DefaultStepperLabelVertical';
+import { DefaultStepperProgressVertical } from '../DefaultStepperProgressVertical';
 import { Stepper } from '../Stepper';
 
 // A reusable example wrapper that encapsulates useStepper, renders the Stepper and controls,
@@ -573,6 +576,84 @@ const NullComponents = () => {
     steps: steps
   });
 };
+const ErrorStepperIcon = /*#__PURE__*/memo(function ErrorStepperIcon(props) {
+  var _step$metadata;
+  const {
+    step,
+    visited,
+    complete
+  } = props;
+  const showError = ((_step$metadata = step.metadata) == null ? void 0 : _step$metadata.isError) && (visited || complete);
+  if (!showError) {
+    return /*#__PURE__*/_jsx(DefaultStepperIconVertical, _extends({}, props));
+  }
+  return /*#__PURE__*/_jsx(DefaultStepperIconVertical, _extends({}, props, {
+    activeColor: "bgNegative",
+    completeColor: "bgNegative",
+    completeName: "circleCross",
+    visitedColor: "bgNegative",
+    visitedName: "circleCross"
+  }));
+});
+const ErrorStepperLabel = /*#__PURE__*/memo(function ErrorStepperLabel(props) {
+  var _step$metadata2;
+  const {
+    step,
+    visited,
+    complete
+  } = props;
+  const showError = ((_step$metadata2 = step.metadata) == null ? void 0 : _step$metadata2.isError) && (visited || complete);
+  if (!showError) {
+    return /*#__PURE__*/_jsx(DefaultStepperLabelVertical, _extends({}, props));
+  }
+  return /*#__PURE__*/_jsx(DefaultStepperLabelVertical, _extends({}, props, {
+    activeColor: "fgNegative",
+    completeColor: "fgNegative",
+    visitedColor: "fgNegative"
+  }));
+});
+const ErrorStepperProgress = /*#__PURE__*/memo(function ErrorStepperProgress(props) {
+  var _step$metadata3;
+  const {
+    step,
+    visited,
+    complete
+  } = props;
+  const showError = ((_step$metadata3 = step.metadata) == null ? void 0 : _step$metadata3.isError) && (visited || complete);
+  if (!showError) {
+    return /*#__PURE__*/_jsx(DefaultStepperProgressVertical, _extends({}, props));
+  }
+  return /*#__PURE__*/_jsx(DefaultStepperProgressVertical, _extends({}, props, {
+    completeFill: "bgNegative",
+    visitedFill: "bgNegative"
+  }));
+});
+const CustomErrorStep = () => {
+  const steps = [{
+    id: '1',
+    label: 'Account Details'
+  }, {
+    id: '2',
+    label: 'Personal Information'
+  }, {
+    id: '3',
+    label: 'Payment Method',
+    metadata: {
+      isError: true
+    }
+  }, {
+    id: '4',
+    label: 'Review & Submit'
+  }];
+  return /*#__PURE__*/_jsx(StepperVerticalExample, {
+    StepperIconComponent: ErrorStepperIcon,
+    StepperLabelComponent: ErrorStepperLabel,
+    StepperProgressComponent: ErrorStepperProgress,
+    defaultActiveStepId: '1',
+    steps: steps,
+    title: "Custom Error Step (shows error state after step is visited)"
+  });
+};
 const StepperVerticalScreen = () => {
   return /*#__PURE__*/_jsxs(ExampleScreen, {
     children: [/*#__PURE__*/_jsx(Example, {
@@ -596,6 +677,9 @@ const StepperVerticalScreen = () => {
     }), /*#__PURE__*/_jsx(Example, {
       title: "Null Components",
       children: /*#__PURE__*/_jsx(NullComponents, {})
+    }), /*#__PURE__*/_jsx(Example, {
+      title: "Custom Error Step",
+      children: /*#__PURE__*/_jsx(CustomErrorStep, {})
     })]
   });
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coinbase/cds-mobile",
-  "version": "8.36.2",
+  "version": "8.36.3",
   "description": "Coinbase Design System - Mobile",
   "repository": {
     "type": "git",
@@ -198,7 +198,7 @@
     "react-native-svg": "^14.1.0"
   },
   "dependencies": {
-    "@coinbase/cds-common": "^8.36.2",
+    "@coinbase/cds-common": "^8.36.3",
     "@coinbase/cds-icons": "^5.9.0",
     "@coinbase/cds-illustrations": "^4.29.0",
     "@coinbase/cds-lottie-files": "^3.3.4",