@coinbase/cds-mobile 8.60.0 → 8.62.0

package/esm/tabs/Tabs.js

@@ -12,6 +12,7 @@ import { TabsContext } from '@coinbase/cds-common/tabs/TabsContext';
 import { useTabs } from '@coinbase/cds-common/tabs/useTabs';
 import { accessibleOpacityDisabled } from '@coinbase/cds-common/tokens/interactable';
 import { defaultRect } from '@coinbase/cds-common/types/Rect';
+import { useComponentConfig } from '../hooks/useComponentConfig';
 import { Box, HStack } from '../layout';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const AnimatedBox = Animated.createAnimatedComponent(Box);
@@ -32,8 +33,9 @@ export const tabsSpringConfig = {
   damping: 10,
   overshootClamping: true
 };
-const TabsComponent = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref2, ref) => {
-  let {
+const TabsComponent = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props, ref) => {
+  const mergedProps = useComponentConfig('Tabs', _props);
+  const {
       tabs,
       TabComponent,
       TabsActiveIndicatorComponent,
@@ -53,8 +55,8 @@ const TabsComponent = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref2, ref) =>
       borderTopRightRadius,
       borderBottomLeftRadius,
       borderBottomRightRadius
-    } = _ref2,
-    props = _objectWithoutPropertiesLoose(_ref2, _excluded2);
+    } = mergedProps,
+    props = _objectWithoutPropertiesLoose(mergedProps, _excluded2);
   const tabsContainerRef = useRef(null);
   useImperativeHandle(ref, () => tabsContainerRef.current, []); // merge internal ref to forwarded ref
 
@@ -112,13 +114,13 @@ const TabsComponent = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref2, ref) =>
         borderTopLeftRadius: borderTopLeftRadius,
         borderTopRightRadius: borderTopRightRadius,
         style: styles == null ? void 0 : styles.activeIndicator
-      }), tabs.map(_ref3 => {
+      }), tabs.map(_ref2 => {
         let {
             id,
             Component: CustomTabComponent,
             disabled: tabDisabled
-          } = _ref3,
-          props = _objectWithoutPropertiesLoose(_ref3, _excluded3);
+          } = _ref2,
+          props = _objectWithoutPropertiesLoose(_ref2, _excluded3);
         const RenderedTab = CustomTabComponent != null ? CustomTabComponent : TabComponent;
         return /*#__PURE__*/_jsx(TabContainer, {
           id: id,
@@ -135,13 +137,13 @@ const TabsComponent = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref2, ref) =>
 }));
 TabsComponent.displayName = 'Tabs';
 export const Tabs = TabsComponent;
-export const TabsActiveIndicator = _ref4 => {
+export const TabsActiveIndicator = _ref3 => {
   let {
       activeTabRect,
       position = 'absolute',
       style
-    } = _ref4,
-    props = _objectWithoutPropertiesLoose(_ref4, _excluded4);
+    } = _ref3,
+    props = _objectWithoutPropertiesLoose(_ref3, _excluded4);
   const previousActiveTabRect = useRef(activeTabRect);
   const newActiveTabRect = {
     x: activeTabRect.x,

package/esm/tag/Tag.js

@@ -3,13 +3,15 @@ function _extends() { return _extends = Object.assign ? Object.assign.bind() : f
 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 } from 'react';
 import { tagBorderRadiusMap, tagEmphasisColorMap, tagFontMap, tagHorizontalSpacing } from '@coinbase/cds-common/tokens/tags';
+import { useComponentConfig } from '../hooks/useComponentConfig';
 import { useTheme } from '../hooks/useTheme';
 import { Icon } from '../icons/Icon';
 import { Box } from '../layout';
 import { Text } from '../typography/Text';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-export const Tag = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, forwardedRef) => {
-  let {
+export const Tag = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props, forwardedRef) => {
+  const mergedProps = useComponentConfig('Tag', _props);
+  const {
       children,
       intent = 'informational',
       emphasis = intent === 'informational' ? 'low' : 'high',
@@ -28,8 +30,8 @@ export const Tag = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, forwardedRef
       justifyContent = 'center',
       paddingY = 0.25,
       testID = 'cds-tag'
-    } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded);
+    } = mergedProps,
+    props = _objectWithoutPropertiesLoose(mergedProps, _excluded);
   const theme = useTheme();
   const {
     background,

package/esm/tour/Tour.js

@@ -6,6 +6,7 @@ import { TourContext } from '@coinbase/cds-common/tour/TourContext';
 import { useTour } from '@coinbase/cds-common/tour/useTour';
 import { arrow as arrowMiddleware, autoPlacement, offset, shift, useFloating } from '@floating-ui/react-native';
 import { animated, config as springConfig, useSpring } from '@react-spring/native';
+import { useComponentConfig } from '../hooks/useComponentConfig';
 import { useTheme } from '../hooks/useTheme';
 import { DefaultTourMask } from './DefaultTourMask';
 import { DefaultTourStepArrow } from './DefaultTourStepArrow';
@@ -13,9 +14,10 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const overlayContentContextValue = {
   isTour: true
 };
-const TourComponent = _ref => {
+const TourComponent = _props => {
   var _activeTourStep$Arrow, _activeTourStep$hideO, _activeTourStep$tourM, _activeTourStep$tourM2;
-  let {
+  const mergedProps = useComponentConfig('Tour', _props);
+  const {
     steps,
     activeTourStep,
     tourStepOffset = 24,
@@ -31,7 +33,7 @@ const TourComponent = _ref => {
     accessibilityLabelledBy,
     id,
     testID
-  } = _ref;
+  } = mergedProps;
   const theme = useTheme();
   const defaultTourStepOffset = theme.space[3];
   const defaultTourStepShiftPadding = theme.space[4];

package/esm/typography/Link.js

@@ -2,11 +2,13 @@ const _excluded = ["children", "to", "color", "font", "onPress", "forceOpenOutsi
 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, { memo, useCallback } from 'react';
+import { useComponentConfig } from '../hooks/useComponentConfig';
 import { useWebBrowserOpener } from '../hooks/useWebBrowserOpener';
 import { Text } from './Text';
 import { jsx as _jsx } from "react/jsx-runtime";
-export const Link = /*#__PURE__*/memo(_ref => {
-  let {
+export const Link = /*#__PURE__*/memo(_props => {
+  const mergedProps = useComponentConfig('Link', _props);
+  const {
       children,
       to,
       color = 'fgPrimary',
@@ -18,8 +20,8 @@ export const Link = /*#__PURE__*/memo(_ref => {
       underline,
       accessibilityLabel,
       testID
-    } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded);
+    } = mergedProps,
+    props = _objectWithoutPropertiesLoose(mergedProps, _excluded);
   const openUrl = useWebBrowserOpener();
   const openUrlOnPress = useCallback(event => {
     onPress == null || onPress(event);

package/esm/utils/mergeComponentProps.js

@@ -0,0 +1,35 @@
+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); }
+/**
+ * The result of merging two sets of props
+ */
+
+/**
+ * Merges two sets of component props where source overrides target.
+ *
+ * This merge is shallow by design and applies to any BaseProps keys, not only
+ * style-like props. This allows component config defaults such as `compact`,
+ * `variant`, `height`, and `font` to flow through alongside style props.
+ *
+ * @param target - Base set of props (e.g., from component config defaults)
+ * @param source - Overriding set of props (e.g., from local component props)
+ * @returns Merged props with source values taking precedence
+ *
+ * @example
+ * ```tsx
+ * const merged = mergeComponentProps(
+ *   { compact: false, variant: 'secondary', height: 32, font: 'headline' },
+ *   { compact: true, variant: 'primary' }
+ * );
+ * // Result: {
+ * //   compact: true,        // local override
+ * //   variant: 'primary',   // local override
+ * //   height: 32,           // preserved from defaults
+ * //   font: 'headline'      // preserved from defaults
+ * // }
+ * ```
+ */
+export function mergeComponentProps(target, source) {
+  if (!target) return source;
+  if (!source) return target;
+  return _extends({}, target, source);
+}

package/esm/visualizations/ProgressBar.js

@@ -4,11 +4,13 @@ import { Animated, I18nManager } from 'react-native';
 import { animateProgressBaseSpec } from '@coinbase/cds-common/animation/progress';
 import { getProgressSize } from '@coinbase/cds-common/visualizations/getProgressSize';
 import { convertMotionConfig } from '../animation/convertMotionConfig';
+import { useComponentConfig } from '../hooks/useComponentConfig';
 import { useTheme } from '../hooks/useTheme';
 import { Box, HStack } from '../layout';
 import { jsx as _jsx } from "react/jsx-runtime";
-export const ProgressBar = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, forwardedRef) => {
-  let {
+export const ProgressBar = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props, forwardedRef) => {
+  const mergedProps = useComponentConfig('ProgressBar', _props);
+  const {
     weight = 'normal',
     progress = 0,
     color = 'bgPrimary',
@@ -20,7 +22,7 @@ export const ProgressBar = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, forw
     styles,
     onAnimationEnd,
     onAnimationStart
-  } = _ref;
+  } = mergedProps;
   const theme = useTheme();
   const height = getProgressSize(weight);
   const animatedProgress = useRef(new Animated.Value(disableAnimateOnMount ? progress : 0));
@@ -33,10 +35,10 @@ export const ProgressBar = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, forw
         toValue: progress
       }, animateProgressBaseSpec, {
         useNativeDriver: true
-      })))) == null || _Animated$timing.start(_ref2 => {
+      })))) == null || _Animated$timing.start(_ref => {
         let {
           finished
-        } = _ref2;
+        } = _ref;
         if (finished) onAnimationEnd == null || onAnimationEnd();
       });
     }

package/esm/visualizations/ProgressBarWithFixedLabels.js

@@ -1,5 +1,6 @@
 import React, { memo, useMemo } from 'react';
 import { I18nManager, View } from 'react-native';
+import { useComponentConfig } from '../hooks/useComponentConfig';
 import { Box, VStack } from '../layout';
 import { getProgressBarLabelParts } from './getProgressBarLabelParts';
 import { ProgressTextLabel } from './ProgressTextLabel';
@@ -92,8 +93,9 @@ const ProgressBarFixedLabelContainer = /*#__PURE__*/memo(_ref3 => {
     children: nodes
   });
 });
-export const ProgressBarWithFixedLabels = /*#__PURE__*/memo(_ref4 => {
-  let {
+export const ProgressBarWithFixedLabels = /*#__PURE__*/memo(_props => {
+  const mergedProps = useComponentConfig('ProgressBarWithFixedLabels', _props);
+  const {
     startLabel,
     endLabel,
     labelPlacement = 'beside',
@@ -103,7 +105,7 @@ export const ProgressBarWithFixedLabels = /*#__PURE__*/memo(_ref4 => {
     testID,
     style,
     styles
-  } = _ref4;
+  } = mergedProps;
   const rootStyle = useMemo(() => [style, styles == null ? void 0 : styles.root], [style, styles == null ? void 0 : styles.root]);
   const startLabelEl = typeof startLabel !== 'undefined' && /*#__PURE__*/_jsx(Box, {
     flexGrow: 0,

package/esm/visualizations/ProgressBarWithFloatLabel.js

@@ -3,6 +3,7 @@ import React, { memo, useCallback, useEffect, useMemo, useRef, useState } from '
 import { Animated, I18nManager } from 'react-native';
 import { animateProgressBaseSpec } from '@coinbase/cds-common/animation/progress';
 import { convertMotionConfig } from '../animation/convertMotionConfig';
+import { useComponentConfig } from '../hooks/useComponentConfig';
 import { useLayout } from '../hooks/useLayout';
 import { Box, VStack } from '../layout';
 import { getProgressBarLabelParts } from './getProgressBarLabelParts';
@@ -76,8 +77,9 @@ const ProgressBarFloatLabel = /*#__PURE__*/memo(_ref => {
     })
   });
 });
-export const ProgressBarWithFloatLabel = /*#__PURE__*/memo(_ref2 => {
-  let {
+export const ProgressBarWithFloatLabel = /*#__PURE__*/memo(_props => {
+  const mergedProps = useComponentConfig('ProgressBarWithFloatLabel', _props);
+  const {
     label,
     labelPlacement = 'above',
     progress,
@@ -87,7 +89,7 @@ export const ProgressBarWithFloatLabel = /*#__PURE__*/memo(_ref2 => {
     testID,
     style,
     styles
-  } = _ref2;
+  } = mergedProps;
   const rootStyle = useMemo(() => [style, styles == null ? void 0 : styles.root], [style, styles == null ? void 0 : styles.root]);
   const progressBarFloatLabel = /*#__PURE__*/_jsx(ProgressBarFloatLabel, {
     disableAnimateOnMount: disableAnimateOnMount,

package/esm/visualizations/ProgressCircle.js

@@ -8,6 +8,7 @@ import { getProgressCircleParams } from '@coinbase/cds-common/visualizations/get
 import { getProgressSize } from '@coinbase/cds-common/visualizations/getProgressSize';
 import { isTest } from '@coinbase/cds-utils';
 import { convertMotionConfig } from '../animation/convertMotionConfig';
+import { useComponentConfig } from '../hooks/useComponentConfig';
 import { useTheme } from '../hooks/useTheme';
 import { Box } from '../layout';
 import { DefaultProgressCircleContent } from './DefaultProgressCircleContent';
@@ -58,8 +59,9 @@ const ProgressCircleInner = /*#__PURE__*/memo(_ref => {
     stroke: !visuallyDisabled ? theme.color[color] : theme.color.bgLineHeavy
   }), style || {}));
 });
-export const ProgressCircle = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref3, forwardedRef) => {
-  let {
+export const ProgressCircle = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props, forwardedRef) => {
+  const mergedProps = useComponentConfig('ProgressCircle', _props);
+  const {
     indeterminate,
     weight = 'normal',
     progress = indeterminate ? 0.75 : 0,
@@ -78,7 +80,7 @@ export const ProgressCircle = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref3,
     styles,
     onAnimationEnd,
     onAnimationStart
-  } = _ref3;
+  } = mergedProps;
   const theme = useTheme();
   const strokeWidth = getProgressSize(weight);
   const visSize = size != null ? size : '100%';
@@ -102,12 +104,12 @@ export const ProgressCircle = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref3,
   return /*#__PURE__*/_jsx(VisualizationContainer, {
     height: visSize,
     width: visSize,
-    children: _ref4 => {
+    children: _ref3 => {
       let {
         width,
         height,
         circleSize
-      } = _ref4;
+      } = _ref3;
       return /*#__PURE__*/_jsxs(Box, {
         ref: forwardedRef,
         accessible: true,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coinbase/cds-mobile",
-  "version": "8.60.0",
+  "version": "8.62.0",
   "description": "Coinbase Design System - Mobile",
   "repository": {
     "type": "git",
@@ -197,7 +197,7 @@
     "react-native-svg": "^14.1.0"
   },
   "dependencies": {
-    "@coinbase/cds-common": "^8.60.0",
+    "@coinbase/cds-common": "^8.62.0",
     "@coinbase/cds-icons": "^5.13.0",
     "@coinbase/cds-illustrations": "^4.36.0",
     "@coinbase/cds-lottie-files": "^3.3.4",
@@ -206,7 +206,8 @@
     "@react-spring/native": "^9.7.4",
     "fuse.js": "^7.1.0",
     "lodash": "^4.17.21",
-    "type-fest": "^2.19.0"
+    "type-fest": "^2.19.0",
+    "zustand": "^5.0.12"
   },
   "devDependencies": {
     "@babel/core": "^7.28.0",