@coinbase/cds-mobile 8.41.0 → 8.43.0

package/esm/cards/ContentCard/ContentCardBody.js

@@ -1,47 +1,102 @@
-const _excluded = ["body", "label", "media", "mediaPosition", "children", "testID"];
+const _excluded = ["body", "label", "media", "mediaPosition", "mediaPlacement", "title", "description", "children", "gap", "testID", "style", "styles"];
 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 } from 'react';
+import React, { forwardRef, memo, useMemo } from 'react';
 import { Box, VStack } from '../../layout';
 import { Text } from '../../typography/Text';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const mapMediaPositionToMediaPlacement = {
+  top: 'top',
+  bottom: 'bottom',
+  right: 'end',
+  left: 'start'
+};
 export const ContentCardBody = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(function ContentCardBody(_ref, ref) {
   let {
       body,
       label,
       media,
       mediaPosition = 'top',
+      mediaPlacement = mapMediaPositionToMediaPlacement[mediaPosition],
+      title,
+      description = body,
       children,
-      testID
+      gap = 1,
+      testID,
+      style,
+      styles
     } = _ref,
     props = _objectWithoutPropertiesLoose(_ref, _excluded);
-  const isHorizontal = mediaPosition === 'right' || mediaPosition === 'left';
+  const hasMedia = !!media;
+  const isHorizontal = mediaPlacement === 'start' || mediaPlacement === 'end';
+  const isMediaFirst = hasMedia && (mediaPlacement === 'top' || mediaPlacement === 'start');
+  const isMediaLast = hasMedia && (mediaPlacement === 'bottom' || mediaPlacement === 'end');
+  const titleNode = useMemo(() => {
+    if (typeof title === 'string') {
+      return /*#__PURE__*/_jsx(Text, {
+        font: "headline",
+        numberOfLines: 2,
+        children: title
+      });
+    }
+    return title;
+  }, [title]);
+  const descriptionNode = useMemo(() => {
+    if (typeof description === 'string') {
+      return /*#__PURE__*/_jsx(Text, {
+        color: "fgMuted",
+        font: "label2",
+        numberOfLines: 3,
+        children: description
+      });
+    }
+    return description;
+  }, [description]);
+  const labelNode = useMemo(() => {
+    if (typeof label === 'string') {
+      return /*#__PURE__*/_jsx(Text, {
+        font: "label2",
+        children: label
+      });
+    }
+    return label;
+  }, [label]);
+  const textNode = useMemo(() => {
+    if (!titleNode && !descriptionNode && !labelNode) {
+      return null;
+    }
+    return /*#__PURE__*/_jsxs(VStack, {
+      flexShrink: 1,
+      gap: isHorizontal ? 1 : 0,
+      style: styles == null ? void 0 : styles.textContainer,
+      children: [titleNode, descriptionNode, labelNode]
+    });
+  }, [titleNode, descriptionNode, labelNode, isHorizontal, styles == null ? void 0 : styles.textContainer]);
   const mediaBox = isHorizontal ? /*#__PURE__*/_jsx(Box, {
+    borderRadius: 500,
     flexShrink: 0,
     height: 96,
+    overflow: "hidden",
+    style: styles == null ? void 0 : styles.mediaContainer,
     width: 96,
     children: media
-  }) : media;
+  }) : /*#__PURE__*/_jsx(Box, {
+    borderRadius: 500,
+    overflow: "hidden",
+    children: media
+  });
   return /*#__PURE__*/_jsxs(VStack, _extends({
     ref: ref,
-    gap: 1,
+    gap: gap,
+    style: [styles == null ? void 0 : styles.root, style],
     testID: testID
   }, props, {
-    children: [/*#__PURE__*/_jsxs(Box, {
+    children: [(mediaBox || textNode) && /*#__PURE__*/_jsxs(Box, {
       flexDirection: isHorizontal ? 'row' : 'column',
       gap: isHorizontal ? 2 : 1,
-      justifyContent: mediaPosition === 'right' ? 'space-between' : 'flex-start',
-      children: [(mediaPosition === 'top' || mediaPosition === 'left') && mediaBox, /*#__PURE__*/_jsxs(VStack, {
-        gap: 1,
-        maxWidth: isHorizontal ? '70%' : '100%',
-        children: [typeof body === 'string' ? /*#__PURE__*/_jsx(Text, {
-          font: "body",
-          children: body
-        }) : body, typeof label === 'string' ? /*#__PURE__*/_jsx(Text, {
-          font: "label2",
-          children: label
-        }) : label]
-      }), (mediaPosition === 'bottom' || mediaPosition === 'right') && mediaBox]
+      justifyContent: mediaPlacement === 'end' ? 'space-between' : 'flex-start',
+      style: styles == null ? void 0 : styles.contentContainer,
+      children: [isMediaFirst && mediaBox, textNode, isMediaLast && mediaBox]
     }), children]
   }));
 }));

package/esm/cards/ContentCard/ContentCardFooter.js

@@ -1,4 +1,4 @@
-const _excluded = ["testID", "children"];
+const _excluded = ["children", "justifyContent"];
 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 } from 'react';
@@ -6,14 +6,13 @@ import { HStack } from '../../layout';
 import { jsx as _jsx } from "react/jsx-runtime";
 export const ContentCardFooter = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) => {
   let {
-      testID,
-      children
+      children,
+      justifyContent = 'space-between'
     } = _ref,
     props = _objectWithoutPropertiesLoose(_ref, _excluded);
   return /*#__PURE__*/_jsx(HStack, _extends({
     ref: ref,
-    justifyContent: "space-between",
-    testID: testID
+    justifyContent: justifyContent
   }, props, {
     children: children
   }));

package/esm/cards/ContentCard/ContentCardHeader.js

@@ -1,8 +1,8 @@
-const _excluded = ["avatar", "title", "meta", "end", "testID"];
+const _excluded = ["avatar", "title", "meta", "end", "subtitle", "actions", "thumbnail", "gap", "testID", "styles", "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 React, { forwardRef, memo } from 'react';
-import { HStack } from '../../layout';
+import React, { forwardRef, memo, useMemo } from 'react';
+import { HStack, VStack } from '../../layout';
 import { Avatar } from '../../media';
 import { Text } from '../../typography/Text';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
@@ -12,35 +12,72 @@ export const ContentCardHeader = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(funct
       title,
       meta,
       end,
-      testID
+      subtitle = meta,
+      actions = end,
+      thumbnail,
+      gap = 1.5,
+      testID,
+      styles,
+      style
     } = _ref,
     props = _objectWithoutPropertiesLoose(_ref, _excluded);
+  const titleNode = useMemo(() => {
+    if (typeof title === 'string') {
+      return /*#__PURE__*/_jsx(Text, {
+        font: "label1",
+        numberOfLines: 1,
+        children: title
+      });
+    }
+    return title;
+  }, [title]);
+  const subtitleNode = useMemo(() => {
+    if (typeof subtitle === 'string') {
+      return /*#__PURE__*/_jsx(Text, {
+        color: "fgMuted",
+        font: "legal",
+        numberOfLines: 1,
+        children: subtitle
+      });
+    }
+    return subtitle;
+  }, [subtitle]);
+  const thumbnailNode = useMemo(() => {
+    // Use new thumbnail prop if provided
+    if (thumbnail) return thumbnail;
+    // Fallback to deprecated avatar prop (supports string for backward compatibility)
+    if (typeof avatar === 'string') {
+      return /*#__PURE__*/_jsx(Avatar, {
+        accessibilityLabel: typeof title === 'string' ? title : undefined,
+        name: typeof title === 'string' ? title : undefined,
+        shape: "circle",
+        size: "l",
+        src: avatar
+      });
+    }
+    return avatar;
+  }, [thumbnail, avatar, title]);
   return /*#__PURE__*/_jsxs(HStack, _extends({
     ref: ref,
     alignItems: "center",
+    gap: gap,
     justifyContent: "space-between",
-    marginEnd: -1,
+    style: [styles == null ? void 0 : styles.root, style],
     testID: testID
   }, props, {
     children: [/*#__PURE__*/_jsxs(HStack, {
       alignItems: "center",
-      gap: 1,
-      children: [typeof avatar === 'string' ? /*#__PURE__*/_jsx(Avatar, {
-        accessibilityLabel: title,
-        name: title,
-        shape: "circle",
-        size: "l",
-        src: avatar
-      }) : avatar, typeof title === 'string' ? /*#__PURE__*/_jsx(Text, {
-        font: "label1",
-        numberOfLines: 1,
-        children: title
-      }) : title, typeof meta === 'string' ? /*#__PURE__*/_jsx(Text, {
-        color: "fgMuted",
-        font: "label2",
-        numberOfLines: 1,
-        children: meta
-      }) : meta]
-    }), end]
+      flexGrow: 1,
+      flexShrink: 1,
+      gap: 1.5,
+      style: styles == null ? void 0 : styles.contentContainer,
+      children: [thumbnailNode, /*#__PURE__*/_jsxs(VStack, {
+        flexGrow: 1,
+        flexShrink: 1,
+        justifyContent: "flex-start",
+        style: styles == null ? void 0 : styles.textContainer,
+        children: [titleNode, subtitleNode]
+      })]
+    }), actions]
   }));
 }));

package/esm/cards/ContentCard/__figma__/ContentCard.figma.js

@@ -5,16 +5,19 @@ import React from 'react';
 import { figma } from '@figma/code-connect';
 import { ContentCard } from '../ContentCard';
 import { jsxs as _jsxs } from "react/jsx-runtime";
-figma.connect(ContentCard, 'https://www.figma.com/design/k5CtyJccNQUGMI5bI4lJ2g/✨-CDS-Components?node-id=14705%3A22920', {
+figma.connect(ContentCard, 'https://www.figma.com/design/k5CtyJccNQUGMI5bI4lJ2g/%E2%9C%A8-CDS-Components?node-id=72941-16019&m=dev', {
   imports: ["import { ContentCard } from '@coinbase/cds-mobile/cards/ContentCard/ContentCard'"],
   props: {
-    header: figma.boolean('show card header', {
-      true: figma.children('.📦 ContentCardHeader'),
+    header: figma.boolean('show header', {
+      true: figma.children('.cardHeader'),
       false: undefined
     }),
-    body: figma.children('.📦 ContentCardBody'),
-    footer: figma.boolean('show card footer', {
-      true: figma.children('.📦 ContentCardFooter'),
+    body: figma.boolean('show body', {
+      true: figma.children('.CardBody'),
+      false: undefined
+    }),
+    footer: figma.boolean('show footer', {
+      true: figma.children('.CardFooter'),
       false: undefined
     })
   },

package/esm/cards/DataCard.js

@@ -1,6 +1,41 @@
 const _excluded = ["onPress", "title", "description", "progressVariant", "progress", "progressColor", "startLabel", "endLabel", "testID", "borderRadius", "elevation"];
 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; }
+/**
+ * @deprecated This component is deprecated. Please use the alpha `DataCard` from `@coinbase/cds-mobile/alpha/data-card` instead.
+ *
+ * ### Migration Guide
+ *
+ * The new `DataCard` provides more flexibility with custom layouts and visualization components.
+ *
+ * **Before:**
+ * ```jsx
+ * <DataCard
+ *   title="Progress"
+ *   description="45% complete"
+ *   progress={0.45}
+ *   progressVariant="bar"
+ *   startLabel="0"
+ *   endLabel="45"
+ * />
+ * ```
+ *
+ * **After:**
+ * ```jsx
+ * import { DataCard } from '@coinbase/cds-mobile/alpha/data-card';
+ *
+ * <DataCard
+ *   title="Progress"
+ *   subtitle="45% complete"
+ *   layout="vertical"
+ *   thumbnail={<RemoteImage source={{ uri: assetUrl }} shape="circle" size="l" />}
+ * >
+ *   <ProgressBarWithFixedLabels startLabel={0} endLabel={45} labelPlacement="below">
+ *     <ProgressBar accessibilityLabel="45% complete" progress={0.45} weight="semiheavy" />
+ *   </ProgressBarWithFixedLabels>
+ * </DataCard>
+ * ```
+ */
 import { memo, useMemo } from 'react';
 import { defaultMediaSize } from '@coinbase/cds-common/tokens/card';
 import { gutter } from '@coinbase/cds-common/tokens/sizing';

package/esm/cards/FeatureEntryCard.js

@@ -5,9 +5,9 @@ import React, { memo } from 'react';
 import { Card } from './Card';
 import { CardBody } from './CardBody';
 
-/** @deprecated will be removed in v7.0.0 use NudgeCard or UpsellCard instead */
+/** @deprecated Use MessagingCard instead. FeatureEntryCard will be removed in a future major release. */
 import { jsx as _jsx } from "react/jsx-runtime";
-/** @deprecated will be removed in v7.0.0 use NudgeCard or UpsellCard instead */
+/** @deprecated Use MessagingCard instead. FeatureEntryCard will be removed in a future major release. */
 export const FeatureEntryCard = /*#__PURE__*/memo(function FeatureEntryCard(_ref) {
   let {
       onPress,

package/esm/cards/FeedCard.js

@@ -9,7 +9,12 @@ import { CardBody } from './CardBody';
 import { CardFooter } from './CardFooter';
 import { CardHeader } from './CardHeader';
 import { LikeButton } from './LikeButton';
+
+/** @deprecated Use the ContentCard component instead. */
+
+/** @deprecated Use the ContentCard component instead. */
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/** @deprecated Use the ContentCard component instead. */
 export const FeedCard = /*#__PURE__*/memo(function FeedCard(_ref) {
   let {
       testID = 'feed-card',

package/esm/cards/FloatingAssetCard.js

@@ -4,6 +4,31 @@ import { HStack, VStack } from '../layout';
 import { Pressable } from '../system';
 import { Text } from '../typography/Text';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * @deprecated Use `MediaCard` instead. FloatingAssetCard will be removed in a future major release.
+ *
+ * Migration guide:
+ * ```tsx
+ * // Before
+ * <FloatingAssetCard
+ *   title="Asset Title"
+ *   subtitle="Subtitle"
+ *   description="Description"
+ *   media={<RemoteImage ... />}
+ * />
+ *
+ * // After
+ * <MediaCard
+ *   title="Asset Title"
+ *   subtitle="Subtitle"
+ *   description="Description"
+ *   thumbnail={<RemoteImage ... />}
+ * />
+ * ```
+ *
+ * Note: The floating variation (media outside the card container) is no longer supported.
+ * MediaCard provides a contained layout with media placement options (start/end).
+ */
 export const FloatingAssetCard = /*#__PURE__*/memo(_ref => {
   let {
     title,

package/esm/cards/MediaCard/MediaCardLayout.js

@@ -0,0 +1,68 @@
+import React, { memo, useMemo } from 'react';
+import { HStack } from '../../layout/HStack';
+import { VStack } from '../../layout/VStack';
+import { Text } from '../../typography/Text';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const MediaCardLayout = /*#__PURE__*/memo(_ref => {
+  let {
+    title,
+    subtitle,
+    description,
+    thumbnail,
+    media,
+    mediaPlacement = 'end',
+    styles = {}
+  } = _ref;
+  const titleNode = useMemo(() => {
+    if (typeof title === 'string') {
+      return /*#__PURE__*/_jsx(Text, {
+        font: "headline",
+        numberOfLines: 2,
+        children: title
+      });
+    }
+    return title;
+  }, [title]);
+  const subtitleNode = useMemo(() => typeof subtitle === 'string' ? /*#__PURE__*/_jsx(Text, {
+    color: "fgMuted",
+    font: "legal",
+    numberOfLines: 1,
+    children: subtitle
+  }) : subtitle, [subtitle]);
+  const headerNode = useMemo(() => /*#__PURE__*/_jsxs(VStack, {
+    style: styles == null ? void 0 : styles.headerContainer,
+    children: [subtitleNode, titleNode]
+  }), [subtitleNode, titleNode, styles == null ? void 0 : styles.headerContainer]);
+  const descriptionNode = useMemo(() => typeof description === 'string' ? /*#__PURE__*/_jsx(Text, {
+    color: "fgMuted",
+    font: "label2",
+    numberOfLines: 2,
+    children: description
+  }) : description, [description]);
+  const contentNode = useMemo(() => /*#__PURE__*/_jsxs(VStack, {
+    flexBasis: "50%",
+    gap: 4,
+    justifyContent: "space-between",
+    padding: 2,
+    style: styles == null ? void 0 : styles.contentContainer,
+    children: [thumbnail, /*#__PURE__*/_jsxs(VStack, {
+      style: styles == null ? void 0 : styles.textContainer,
+      children: [headerNode, descriptionNode]
+    })]
+  }), [styles == null ? void 0 : styles.contentContainer, styles == null ? void 0 : styles.textContainer, thumbnail, headerNode, descriptionNode]);
+  const mediaNode = useMemo(() => {
+    if (media) {
+      return /*#__PURE__*/_jsx(HStack, {
+        flexBasis: "50%",
+        style: styles == null ? void 0 : styles.mediaContainer,
+        children: media
+      });
+    }
+  }, [media, styles == null ? void 0 : styles.mediaContainer]);
+  return /*#__PURE__*/_jsxs(HStack, {
+    flexGrow: 1,
+    style: styles == null ? void 0 : styles.layoutContainer,
+    children: [mediaPlacement === 'start' ? mediaNode : contentNode, mediaPlacement === 'end' ? mediaNode : contentNode]
+  });
+});
+export { MediaCardLayout };

package/esm/cards/MediaCard/__figma__/MediaCard.figma.js

@@ -0,0 +1,46 @@
+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 from 'react';
+import { ethBackground } from '@coinbase/cds-common/internal/data/assets';
+import { figma } from '@figma/code-connect';
+import { RemoteImage } from '../../../media';
+import { MediaCard } from '../';
+import { jsx as _jsx } from "react/jsx-runtime";
+figma.connect(MediaCard, 'https://www.figma.com/design/k5CtyJccNQUGMI5bI4lJ2g/%E2%9C%A8-CDS-Components?node-id=72941-18302&m=dev', {
+  imports: ["import { MediaCard } from '@coinbase/cds-mobile/cards/MediaCard'", "import { Avatar } from '@coinbase/cds-mobile/media/Avatar'"],
+  props: {
+    title: figma.string('title'),
+    subtitle: figma.boolean('show subtitle', {
+      true: figma.string('↳ subtitle'),
+      false: undefined
+    }),
+    description: figma.boolean('show subdetail', {
+      true: figma.instance('↳ subdetail'),
+      false: undefined
+    }),
+    thumbnail: figma.boolean('show media', {
+      true: figma.instance('↳ media'),
+      false: undefined
+    }),
+    mediaPlacement: figma.enum('image placement', {
+      left: 'start',
+      right: 'end',
+      none: undefined
+    }),
+    media: figma.enum('image placement', {
+      left: /*#__PURE__*/_jsx(RemoteImage, {
+        alt: "Media",
+        shape: "rectangle",
+        source: ethBackground,
+        width: "100%"
+      }),
+      right: /*#__PURE__*/_jsx(RemoteImage, {
+        alt: "Media",
+        shape: "rectangle",
+        source: ethBackground,
+        width: "100%"
+      }),
+      none: undefined
+    })
+  },
+  example: props => /*#__PURE__*/_jsx(MediaCard, _extends({}, props))
+});

package/esm/cards/MediaCard/index.js

@@ -0,0 +1,45 @@
+const _excluded = ["root"],
+  _excluded2 = ["title", "subtitle", "description", "thumbnail", "media", "mediaPlacement", "style", "styles"];
+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 { forwardRef, memo } from 'react';
+import { CardRoot } from '../CardRoot';
+import { MediaCardLayout } from './MediaCardLayout';
+import { jsx as _jsx } from "react/jsx-runtime";
+const mediaCardContainerProps = {
+  borderRadius: 500,
+  background: 'bgAlternate',
+  overflow: 'hidden'
+};
+export const MediaCard = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) => {
+  let {
+      title,
+      subtitle,
+      description,
+      thumbnail,
+      media,
+      mediaPlacement = 'end',
+      style,
+      styles: {
+        root: rootStyle
+      } = {}
+    } = _ref,
+    layoutStyles = _objectWithoutPropertiesLoose(_ref.styles, _excluded),
+    props = _objectWithoutPropertiesLoose(_ref, _excluded2);
+  return /*#__PURE__*/_jsx(CardRoot, _extends({
+    ref: ref
+  }, mediaCardContainerProps, {
+    style: [style, rootStyle]
+  }, props, {
+    children: /*#__PURE__*/_jsx(MediaCardLayout, {
+      description: description,
+      media: media,
+      mediaPlacement: mediaPlacement,
+      styles: layoutStyles,
+      subtitle: subtitle,
+      thumbnail: thumbnail,
+      title: title
+    })
+  }));
+}));
+MediaCard.displayName = 'MediaCard';