@coinbase/cds-mobile 9.5.0 → 9.6.1

package/CHANGELOG.md

@@ -8,6 +8,18 @@ All notable changes to this project will be documented in this file.
 
 <!-- template-start -->
 
+## 9.6.1 (7/7/2026 PST)
+
+#### 🐞 Fixes
+
+- Fix: memoize fallback styles. [[#782](https://github.com/coinbase/cds/pull/782)]
+
+## 9.6.0 (7/6/2026 PST)
+
+#### 🚀 Updates
+
+- Feat: add TextFallback. [[#780](https://github.com/coinbase/cds/pull/780)]
+
 ## 9.5.0 (6/25/2026 PST)
 
 #### 🚀 Updates

package/dts/cells/ListCellFallback.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ListCellFallback.d.ts","sourceRoot":"","sources":["../../src/cells/ListCellFallback.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAQ,KAAK,SAAS,EAAW,MAAM,OAAO,CAAC;AACtD,OAAO,EAAE,KAAK,SAAS,EAAoB,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAChF,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,8CAA8C,CAAC;AAC3F,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,qDAAqD,CAAC;AACpG,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,wCAAwC,CAAC;AAS1E,OAAO,EAAiB,KAAK,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;AACxE,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AACjD,OAAO,EAAgD,KAAK,iBAAiB,EAAE,MAAM,YAAY,CAAC;AAGlG,MAAM,MAAM,yBAAyB,GAAG,WAAW,GACjD,sBAAsB,GACtB,IAAI,CAAC,wBAAwB,EAAE,oBAAoB,CAAC,GACpD,IAAI,CAAC,iBAAiB,EAAE,SAAS,GAAG,cAAc,GAAG,cAAc,GAAG,gBAAgB,CAAC,GAAG;IACxF,mDAAmD;IACnD,SAAS,CAAC,EAAE,iBAAiB,CAAC;IAC9B,2FAA2F;IAC3F,aAAa,CAAC,EAAE,SAAS,CAAC;IAC1B,mCAAmC;IACnC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,8BAA8B;IAC9B,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,mCAAmC;IACnC,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,4DAA4D;IAC5D,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,iCAAiC;IACjC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,gCAAgC;IAChC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,6BAA6B;IAC7B,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB,CAAC;AAEJ,MAAM,MAAM,qBAAqB,GAAG,yBAAyB,GAAG;IAC9D,+DAA+D;IAC/D,MAAM,CAAC,EAAE;QACP,kEAAkE;QAClE,UAAU,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;QAClC,4CAA4C;QAC5C,MAAM,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;QAC9B,+CAA+C;QAC/C,SAAS,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;QACjC,2CAA2C;QAC3C,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;QAC7B,iDAAiD;QACjD,WAAW,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;QACnC,8CAA8C;QAC9C,QAAQ,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;QAChC,iDAAiD;QACjD,SAAS,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;KAClC,CAAC;CACH,CAAC;AAEF,eAAO,MAAM,gBAAgB,6DAkM3B,CAAC"}
+{"version":3,"file":"ListCellFallback.d.ts","sourceRoot":"","sources":["../../src/cells/ListCellFallback.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAQ,KAAK,SAAS,EAAW,MAAM,OAAO,CAAC;AACtD,OAAO,EAAE,KAAK,SAAS,EAAoB,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAChF,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,8CAA8C,CAAC;AAC3F,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,qDAAqD,CAAC;AACpG,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,wCAAwC,CAAC;AAQ1E,OAAO,EAAiB,KAAK,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;AACxE,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AACjD,OAAO,EAAgD,KAAK,iBAAiB,EAAE,MAAM,YAAY,CAAC;AAGlG,MAAM,MAAM,yBAAyB,GAAG,WAAW,GACjD,sBAAsB,GACtB,IAAI,CAAC,wBAAwB,EAAE,oBAAoB,CAAC,GACpD,IAAI,CAAC,iBAAiB,EAAE,SAAS,GAAG,cAAc,GAAG,cAAc,GAAG,gBAAgB,CAAC,GAAG;IACxF,mDAAmD;IACnD,SAAS,CAAC,EAAE,iBAAiB,CAAC;IAC9B,2FAA2F;IAC3F,aAAa,CAAC,EAAE,SAAS,CAAC;IAC1B,mCAAmC;IACnC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,8BAA8B;IAC9B,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,mCAAmC;IACnC,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,4DAA4D;IAC5D,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,iCAAiC;IACjC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,gCAAgC;IAChC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,6BAA6B;IAC7B,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB,CAAC;AAEJ,MAAM,MAAM,qBAAqB,GAAG,yBAAyB,GAAG;IAC9D,+DAA+D;IAC/D,MAAM,CAAC,EAAE;QACP,kEAAkE;QAClE,UAAU,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;QAClC,4CAA4C;QAC5C,MAAM,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;QAC9B,+CAA+C;QAC/C,SAAS,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;QACjC,2CAA2C;QAC3C,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;QAC7B,iDAAiD;QACjD,WAAW,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;QACnC,8CAA8C;QAC9C,QAAQ,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;QAChC,iDAAiD;QACjD,SAAS,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;KAClC,CAAC;CACH,CAAC;AAEF,eAAO,MAAM,gBAAgB,6DAwK3B,CAAC"}

package/dts/typography/TextFallback.d.ts

@@ -0,0 +1,12 @@
+import type { ThemeVars } from '@coinbase/cds-common/core/theme';
+import { type FallbackBaseProps, type FallbackProps } from '../layout/Fallback';
+export type TextFallbackBaseProps = Omit<FallbackBaseProps, 'height'> & {
+  /** Font token used to size the fallback to match text line height. */
+  font: ThemeVars.FontSize;
+};
+export type TextFallbackProps = Omit<FallbackProps, 'height'> & Pick<TextFallbackBaseProps, 'font'>;
+/**
+ * Loading placeholder sized to match a typography font token's line height.
+ */
+export declare const TextFallback: import('react').NamedExoticComponent<TextFallbackProps>;
+//# sourceMappingURL=TextFallback.d.ts.map

package/dts/typography/TextFallback.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextFallback.d.ts","sourceRoot":"","sources":["../../src/typography/TextFallback.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,iCAAiC,CAAC;AAGjE,OAAO,EAAY,KAAK,iBAAiB,EAAE,KAAK,aAAa,EAAE,MAAM,oBAAoB,CAAC;AAE1F,MAAM,MAAM,qBAAqB,GAAG,IAAI,CAAC,iBAAiB,EAAE,QAAQ,CAAC,GAAG;IACtE,sEAAsE;IACtE,IAAI,EAAE,SAAS,CAAC,QAAQ,CAAC;CAC1B,CAAC;AAEF,MAAM,MAAM,iBAAiB,GAAG,IAAI,CAAC,aAAa,EAAE,QAAQ,CAAC,GAAG,IAAI,CAAC,qBAAqB,EAAE,MAAM,CAAC,CAAC;AAEpG;;GAEG;AACH,eAAO,MAAM,YAAY,yDAyBvB,CAAC"}

package/dts/typography/index.d.ts

@@ -1,6 +1,7 @@
 export * from './Link';
 export * from './Text';
 export * from './TextBody';
+export * from './TextFallback';
 export * from './TextCaption';
 export * from './TextDisplay1';
 export * from './TextDisplay2';

package/dts/typography/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/typography/index.ts"],"names":[],"mappings":"AAAA,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC;AAC3B,cAAc,eAAe,CAAC;AAC9B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,cAAc,CAAC;AAC7B,cAAc,cAAc,CAAC;AAC7B,cAAc,aAAa,CAAC;AAC5B,cAAc,cAAc,CAAC;AAC7B,cAAc,cAAc,CAAC;AAC7B,cAAc,cAAc,CAAC;AAC7B,cAAc,cAAc,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/typography/index.ts"],"names":[],"mappings":"AAAA,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC;AAC3B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,eAAe,CAAC;AAC9B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,cAAc,CAAC;AAC7B,cAAc,cAAc,CAAC;AAC7B,cAAc,aAAa,CAAC;AAC5B,cAAc,cAAc,CAAC;AAC7B,cAAc,cAAc,CAAC;AAC7B,cAAc,cAAc,CAAC;AAC7B,cAAc,cAAc,CAAC"}

package/esm/cells/ListCellFallback.js

@@ -5,9 +5,8 @@ import { memo, useMemo } from 'react';
 import { StyleSheet, Text } from 'react-native';
 import { getRectWidthVariant } from '@coinbase/cds-common/utils/getRectWidthVariant';
 import { useComponentConfig } from '../hooks/useComponentConfig';
-import { useTheme } from '../hooks/useTheme';
-import { Fallback } from '../layout/Fallback';
 import { VStack } from '../layout/VStack';
+import { TextFallback } from '../typography/TextFallback';
 import { Cell } from './Cell';
 import { CellAccessory } from './CellAccessory';
 import { condensedInnerSpacing, condensedOuterSpacing } from './ListCell';
@@ -35,21 +34,20 @@ export const ListCellFallback = /*#__PURE__*/memo(function ListCellFallback(_pro
       accessibilityLabel = 'Loading'
     } = mergedProps,
     props = _objectWithoutPropertiesLoose(mergedProps, _excluded);
-  const theme = useTheme();
   const descriptionFallback = useMemo(() => {
     if (!description) {
       return null;
     }
-    return /*#__PURE__*/_jsx(Fallback, {
+    return /*#__PURE__*/_jsx(TextFallback, {
       "aria-hidden": true,
       disableRandomRectWidth: disableRandomRectWidth,
-      height: spacingVariant === 'condensed' ? theme.lineHeight.label2 : theme.lineHeight.body,
+      font: spacingVariant === 'condensed' ? 'label2' : 'body',
       rectWidthVariant: getRectWidthVariant(rectWidthVariant, 0),
       style: styles == null ? void 0 : styles.description,
       testID: "list-cell-fallback-description",
       width: 110
     });
-  }, [description, disableRandomRectWidth, rectWidthVariant, spacingVariant, styles == null ? void 0 : styles.description, theme.lineHeight.body, theme.lineHeight.label2]);
+  }, [description, disableRandomRectWidth, rectWidthVariant, spacingVariant, styles == null ? void 0 : styles.description]);
   const detailFallback = useMemo(() => {
     if (!detail && !subdetail) {
       return null;
@@ -57,58 +55,57 @@ export const ListCellFallback = /*#__PURE__*/memo(function ListCellFallback(_pro
     return /*#__PURE__*/_jsxs(VStack, {
       alignContent: "flex-end",
       alignItems: "flex-end",
-      gap: 0.5,
       justifyContent: "center",
-      children: [!!detail && /*#__PURE__*/_jsx(Fallback, {
+      children: [!!detail && /*#__PURE__*/_jsx(TextFallback, {
         "aria-hidden": true,
         disableRandomRectWidth: disableRandomRectWidth,
-        height: theme.lineHeight.body,
+        font: "body",
         rectWidthVariant: getRectWidthVariant(rectWidthVariant, 1),
         style: styles == null ? void 0 : styles.detail,
         testID: "list-cell-fallback-detail",
         width: 60
-      }), !!subdetail && /*#__PURE__*/_jsx(Fallback, {
+      }), !!subdetail && /*#__PURE__*/_jsx(TextFallback, {
         "aria-hidden": true,
         disableRandomRectWidth: disableRandomRectWidth,
-        height: spacingVariant === 'condensed' ? theme.lineHeight.label2 : theme.lineHeight.body,
+        font: spacingVariant === 'condensed' ? 'label2' : 'body',
         rectWidthVariant: getRectWidthVariant(rectWidthVariant, 1),
         style: styles == null ? void 0 : styles.subdetail,
         testID: "list-cell-fallback-subdetail",
         width: 60
       })]
     });
-  }, [detail, disableRandomRectWidth, rectWidthVariant, spacingVariant, styles == null ? void 0 : styles.detail, styles == null ? void 0 : styles.subdetail, subdetail, theme.lineHeight.body, theme.lineHeight.label2]);
+  }, [detail, disableRandomRectWidth, rectWidthVariant, spacingVariant, styles == null ? void 0 : styles.detail, styles == null ? void 0 : styles.subdetail, subdetail]);
   const helperTextFallback = useMemo(() => {
     if (!helperText) {
       return null;
     }
-    return /*#__PURE__*/_jsx(Fallback, {
+    return /*#__PURE__*/_jsx(TextFallback, {
       "aria-hidden": true,
       disableRandomRectWidth: disableRandomRectWidth,
-      height: theme.lineHeight.body,
+      font: "body",
       rectWidthVariant: getRectWidthVariant(rectWidthVariant, 4),
       style: styles == null ? void 0 : styles.helperText,
       testID: "list-cell-fallback-helper-text",
       width: "85%"
     });
-  }, [disableRandomRectWidth, helperText, rectWidthVariant, styles == null ? void 0 : styles.helperText, theme.lineHeight.body]);
+  }, [disableRandomRectWidth, helperText, rectWidthVariant, styles == null ? void 0 : styles.helperText]);
   const subtitleFallback = useMemo(() => {
     if (!subtitle) {
       return null;
     }
-    return /*#__PURE__*/_jsx(Fallback, {
+    return /*#__PURE__*/_jsx(TextFallback, {
       "aria-hidden": true,
       disableRandomRectWidth: disableRandomRectWidth,
-      height: theme.lineHeight.label1,
+      font: "label1",
       rectWidthVariant: getRectWidthVariant(rectWidthVariant, 2),
       style: styles == null ? void 0 : styles.subtitle,
       testID: "list-cell-fallback-subtitle",
       width: 80
     });
-  }, [disableRandomRectWidth, rectWidthVariant, styles == null ? void 0 : styles.subtitle, subtitle, theme.lineHeight.label1]);
+  }, [disableRandomRectWidth, rectWidthVariant, styles == null ? void 0 : styles.subtitle, subtitle]);
   const mediaFallback = useMemo(() => {
     if (!media) {
-      return;
+      return undefined;
     }
     return /*#__PURE__*/_jsx(MediaFallback, {
       "aria-hidden": true,
@@ -120,16 +117,16 @@ export const ListCellFallback = /*#__PURE__*/memo(function ListCellFallback(_pro
     if (!title) {
       return null;
     }
-    return /*#__PURE__*/_jsx(Fallback, {
+    return /*#__PURE__*/_jsx(TextFallback, {
       "aria-hidden": true,
       disableRandomRectWidth: disableRandomRectWidth,
-      height: theme.lineHeight.headline,
+      font: "headline",
       rectWidthVariant: getRectWidthVariant(rectWidthVariant, 3),
       style: styles == null ? void 0 : styles.title,
       testID: "list-cell-fallback-title",
       width: 90
     });
-  }, [disableRandomRectWidth, rectWidthVariant, styles == null ? void 0 : styles.title, theme.lineHeight.headline, title]);
+  }, [disableRandomRectWidth, rectWidthVariant, styles == null ? void 0 : styles.title, title]);
   return /*#__PURE__*/_jsxs(Cell, _extends({
     accessory: accessory ? /*#__PURE__*/_jsx(CellAccessory, {
       type: accessory
@@ -149,7 +146,6 @@ export const ListCellFallback = /*#__PURE__*/memo(function ListCellFallback(_pro
       style: localStyles.visuallyHidden,
       children: accessibilityLabel
     }), /*#__PURE__*/_jsxs(VStack, {
-      gap: 0.5,
       children: [titleFallback, subtitleFallback, descriptionFallback]
     })]
   }));

package/esm/typography/TextFallback.js

@@ -0,0 +1,42 @@
+const _excluded = ["font", "style"];
+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';
+import { useWindowDimensions } from 'react-native';
+import { useTheme } from '../hooks/useTheme';
+import { Fallback } from '../layout/Fallback';
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * Loading placeholder sized to match a typography font token's line height.
+ */
+export const TextFallback = /*#__PURE__*/memo(function TextFallback(_ref) {
+  let {
+      font,
+      style
+    } = _ref,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded);
+  const theme = useTheme();
+  const {
+    fontScale
+  } = useWindowDimensions();
+  const {
+    height,
+    paddingVertical
+  } = useMemo(() => {
+    const fontSize = theme.fontSize[font] * fontScale;
+    const lineHeight = theme.lineHeight[font] * fontScale;
+    const lineHeightOffset = lineHeight - fontSize;
+    return {
+      height: fontSize,
+      paddingVertical: Math.max(lineHeightOffset, 0) / 2
+    };
+  }, [font, fontScale, theme]);
+  const fallbackStyle = useMemo(() => [{
+    paddingTop: paddingVertical,
+    paddingBottom: paddingVertical
+  }, style], [paddingVertical, style]);
+  return /*#__PURE__*/_jsx(Fallback, _extends({
+    height: height,
+    style: fallbackStyle
+  }, props));
+});

package/esm/typography/index.js

@@ -1,6 +1,7 @@
 export * from './Link';
 export * from './Text';
 export * from './TextBody';
+export * from './TextFallback';
 export * from './TextCaption';
 export * from './TextDisplay1';
 export * from './TextDisplay2';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coinbase/cds-mobile",
-  "version": "9.5.0",
+  "version": "9.6.1",
   "description": "Coinbase Design System - Mobile",
   "repository": {
     "type": "git",
@@ -206,9 +206,9 @@
     "react-native-worklets": "0.5.2"
   },
   "dependencies": {
-    "@coinbase/cds-common": "^9.5.0",
+    "@coinbase/cds-common": "^9.6.1",
     "@coinbase/cds-icons": "^5.20.0",
-    "@coinbase/cds-illustrations": "^4.43.0",
+    "@coinbase/cds-illustrations": "^4.44.0",
     "@coinbase/cds-lottie-files": "^3.3.4",
     "@coinbase/cds-utils": "^2.3.5",
     "@floating-ui/react-native": "^0.10.5",