@coinbase/cds-mcp-server 8.33.0 → 8.34.0

package/CHANGELOG.md

@@ -8,6 +8,14 @@ All notable changes to this project will be documented in this file.
 
 <!-- template-start -->
 
+## 8.34.0 ((12/19/2025, 02:32 PM PST))
+
+This is an artificial version bump with no new change.
+
+## 8.33.1 ((12/19/2025, 08:09 AM PST))
+
+This is an artificial version bump with no new change.
+
 ## 8.33.0 ((12/18/2025, 11:46 AM PST))
 
 This is an artificial version bump with no new change.

package/mcp-docs/mobile/components/SelectChipAlpha.txt

@@ -190,6 +190,59 @@ function ExampleMultiGroups() {
 }
 ```
 
+### Multi-select with assets
+
+```tsx
+function ExampleMultiAssets() {
+  const assetImageMap: Record<string, string> = {
+    btc: assets.btc.imageUrl,
+    eth: assets.eth.imageUrl,
+    dai: assets.dai.imageUrl,
+    ltc: assets.ltc.imageUrl,
+    xrp: assets.xrp.imageUrl,
+  };
+  const exampleOptions = [
+    { value: 'btc', label: assets.btc.name },
+    { value: 'eth', label: assets.eth.name },
+    { value: 'dai', label: assets.dai.name },
+    { value: 'ltc', label: assets.ltc.name },
+    { value: 'xrp', label: assets.xrp.name },
+  ];
+  const { value, onChange } = useMultiSelect({
+    initialValue: ['eth', 'btc'],
+  });
+
+  // Get startNode based on selected assets
+  const startNode = useMemo(() => {
+    if (value.length === 0) return null;
+
+    // Multiple assets selected - use RemoteImageGroup
+    return (
+      <RemoteImageGroup shape="circle" size={24}>
+        {value.map((assetValue) => {
+          const imageUrl = assetImageMap[assetValue];
+          if (!imageUrl) return null;
+          return <RemoteImage key={assetValue} source={imageUrl} />;
+        })}
+      </RemoteImageGroup>
+    );
+  }, [value]);
+
+  return (
+    <SelectChip
+      accessibilityLabel="Select multiple assets"
+      maxWidth={400}
+      onChange={onChange}
+      options={exampleOptions}
+      placeholder="Choose assets"
+      startNode={startNode}
+      type="multi"
+      value={value}
+    />
+  );
+}
+```
+
 ### Compact
 
 ```tsx

package/mcp-docs/mobile/components/SlideButton.txt

@@ -78,6 +78,27 @@ function Example() {
 }
 ```
 
+### Compact SlideButton
+
+Use the `compact` prop to reduce the height, border-radius and padding of the button:
+
+```jsx
+function Example() {
+  const [checked, setChecked] = useState(false);
+
+  return (
+    <SlideButton
+      checked={checked}
+      onChange={setChecked}
+      onSlideComplete={() => console.log('Completed')}
+      uncheckedLabel="Swipe to confirm"
+      checkedLabel="Confirming..."
+      compact
+    />
+  );
+}
+```
+
 ### Auto Complete on Threshold
 
 You can set the button to automatically complete when the slide reaches the threshold:
@@ -239,6 +260,7 @@ function Example() {
 | `children` | `((string \| number \| boolean \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal) & (string \| number \| boolean \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal \| ((state: PressableStateCallbackType) => ReactNode))) \| null` | No | `-` | Either children or a render prop that receives a boolean reflecting whether the component is currently pressed. |
 | `color` | `currentColor \| fg \| fgMuted \| fgInverse \| fgPrimary \| fgWarning \| fgPositive \| fgNegative \| bg \| bgAlternate \| bgInverse \| bgOverlay \| bgElevation1 \| bgElevation2 \| bgPrimary \| bgPrimaryWash \| bgSecondary \| bgTertiary \| bgSecondaryWash \| bgNegative \| bgNegativeWash \| bgPositive \| bgPositiveWash \| bgWarning \| bgWarningWash \| bgLine \| bgLineHeavy \| bgLineInverse \| bgLinePrimary \| bgLinePrimarySubtle \| accentSubtleRed \| accentBoldRed \| accentSubtleGreen \| accentBoldGreen \| accentSubtleBlue \| accentBoldBlue \| accentSubtlePurple \| accentBoldPurple \| accentSubtleYellow \| accentBoldYellow \| accentSubtleGray \| accentBoldGray \| transparent` | No | `-` | - |
 | `columnGap` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
+| `compact` | `boolean` | No | `-` | Reduces the height, borderRadius and inner padding within the button. |
 | `contentStyle` | `null \| false \| ViewStyle \| RegisteredStyle<ViewStyle> \| RecursiveArray<ViewStyle \| Falsy \| RegisteredStyle<ViewStyle>>` | No | `-` | Apply animated styles to the inner container. |
 | `dangerouslySetBackground` | `string` | No | `-` | - |
 | `debounceTime` | `number` | No | `500` | The amount of time to wait (in milliseconds) before invoking the debounced function. This prop is used in conjunction with the disableDebounce prop. The debounce function is configured to be invoked as soon as its called, but subsequent calls within the debounceTime period will be ignored. |

package/mcp-docs/web/components/Carousel.txt

@@ -43,7 +43,7 @@ function MyCarousel() {
     );
   }
   return (
-    <Box style={{ marginInline: 'calc(-1 * var(--space-3))' }}>
+    <Box marginX={-3}>
       <Carousel
         hidePagination
         title="Explore Assets"
@@ -122,7 +122,7 @@ function DynamicSizingCarousel() {
           tabs={itemsPerPage}
         />
       </HStack>
-      <Box style={{ marginInline: 'calc(-1 * var(--space-3))' }}>
+      <Box marginX={-3}>
         <Carousel
           hidePagination
           title="Learn more"
@@ -310,7 +310,7 @@ function ResponsiveSizingCarousel() {
     );
   }
   return (
-    <Box style={{ marginInline: 'calc(-1 * var(--space-3))' }}>
+    <Box marginX={-3}>
       <Carousel
         hidePagination
         title="Learn more"
@@ -403,7 +403,7 @@ function VariedSizingCarousel() {
     desktop: 'calc((100% - var(--space-1)) / 2)',
   };
   return (
-    <Box style={{ marginInline: 'calc(-1 * var(--space-3))' }}>
+    <Box marginX={-3}>
       <Carousel
         hidePagination
         title="Varied Sizing"
@@ -495,7 +495,7 @@ function DragCarousel() {
         </Text>
         <SegmentedTabs activeTab={drag} onChange={setDrag} tabs={dragOptions} />
       </HStack>
-      <Box style={{ marginInline: 'calc(-1 * var(--space-3))' }}>
+      <Box marginX={-3}>
         <Carousel
           title="Explore Assets"
           hidePagination
@@ -554,7 +554,7 @@ function SnapModeCarousel() {
         </Text>
         <SegmentedTabs activeTab={snapMode} onChange={setSnapMode} tabs={snapModeOptions} />
       </HStack>
-      <Box style={{ marginInline: 'calc(-1 * var(--space-3))' }}>
+      <Box marginX={-3}>
         <Carousel
           title="Explore Assets"
           styles={{
@@ -609,7 +609,7 @@ function OverflowCarousel() {
     );
   }
   return (
-    <Box style={{ marginInline: 'calc(-1 * var(--space-3))' }}>
+    <Box marginX={-3}>
       <Carousel
         title="Explore Assets"
         snapMode="item"
@@ -770,7 +770,7 @@ function CustomComponentsCarousel() {
     desktop: 'round(down, calc((100% - var(--space-1)) / 2), 1px)',
   };
   return (
-    <Box style={{ marginInline: 'calc(-1 * var(--space-3))' }}>
+    <Box marginX={-3}>
       <Carousel
         NavigationComponent={SeeAllComponent}
         PaginationComponent={PaginationComponent}
@@ -913,7 +913,7 @@ You can use the `classNames` and `styles` props to customize different parts of
 ```jsx live
 function CustomStylesCarousel() {
   return (
-    <Box style={{ marginInline: 'calc(-1 * var(--space-3))' }}>
+    <Box marginX={-3}>
       <Carousel
         styles={{
           root: { position: 'relative', paddingInline: 'var(--space-6)' },
@@ -1033,7 +1033,7 @@ function DynamicContentCarousel() {
           Remove Last
         </Button>
       </HStack>
-      <Box style={{ marginInline: 'calc(-1 * var(--space-3))' }}>
+      <Box marginX={-3}>
         <Carousel
           title="Explore Assets"
           styles={{
@@ -1087,7 +1087,7 @@ function AnimatedCarousel() {
     );
   }
   return (
-    <Box style={{ marginInline: 'calc(-1 * var(--space-3))' }}>
+    <Box marginX={-3}>
       <Carousel
         title="Explore Assets"
         styles={{
@@ -1171,7 +1171,7 @@ function AnimatedSelectionCarousel() {
     );
   });
   return (
-    <Box style={{ marginInline: 'calc(-1 * var(--space-3))' }}>
+    <Box marginX={-3}>
       <Carousel
         title="Explore Assets"
         styles={{
@@ -1222,7 +1222,7 @@ function HideNavigationAndPaginationCarousel() {
     );
   }
   return (
-    <Box style={{ marginInline: 'calc(-1 * var(--space-3))' }}>
+    <Box marginX={-3}>
       <Carousel
         title="Explore Assets"
         hidePagination
@@ -1300,7 +1300,7 @@ function AnimatedPaginationCarousel() {
   }
 
   return (
-    <Box style={{ marginInline: 'calc(-1 * var(--space-3))' }}>
+    <Box marginX={-3}>
       <Carousel
         PaginationComponent={AnimatedPagination}
         drag="snap"
@@ -1424,7 +1424,7 @@ function ImperativeApiCarousel() {
           />
         </HStack>
       </HStack>
-      <Box style={{ marginInline: 'calc(-1 * var(--space-3))' }}>
+      <Box marginX={-3}>
         <Carousel
           ref={carouselRef}
           hidePagination

package/mcp-docs/web/components/LineChart.txt

@@ -1103,11 +1103,11 @@ function DynamicChartSizing() {
         borderBottomLeftRadius={300}
         borderTopLeftRadius={300}
         flexGrow={1}
+        marginTop={-3}
+        marginStart={-3}
+        marginBottom={-3}
         style={{
           background: 'linear-gradient(0deg, #D07609 0%, #F7931A 100%)',
-          marginTop: 'calc(-1 * var(--space-3))',
-          marginLeft: 'calc(-1 * var(--space-3))',
-          marginBottom: 'calc(-1 * var(--space-3))',
         }}
       >
         {/* LineChart fills to take up available width and height */}
@@ -1688,12 +1688,7 @@ function AssetPriceWidget() {
           </Text>
         </VStack>
       </HStack>
-      <div
-        style={{
-          marginLeft: 'calc(-1 * var(--space-2))',
-          marginRight: 'calc(-1 * var(--space-2))',
-        }}
-      >
+      <Box marginX={-2}>
         <LineChart
           showArea
           accessibilityLabel={chartAccessibilityLabel}
@@ -1714,7 +1709,7 @@ function AssetPriceWidget() {
             styles={{ beacon: { stroke: 'white' } }}
           />
         </LineChart>
-      </div>
+      </Box>
     </VStack>
   );
 }

package/mcp-docs/web/components/ReferenceLine.txt

@@ -148,7 +148,7 @@ You can customize label appearance using `labelFont`, `labelDx`, `labelDy`, `lab
 Use `labelBoundsInset` to prevent labels from getting too close to chart edges.
 
 ```jsx live
-<Box style={{ marginLeft: 'calc(-1 * var(--space-3))', marginRight: 'calc(-1 * var(--space-3))' }}>
+<Box marginX={-3}>
   <LineChart
     height={{ base: 150, tablet: 200, desktop: 250 }}
     inset={{ left: 0, right: 0 }}

package/mcp-docs/web/components/Scrubber.txt

@@ -480,7 +480,7 @@ You can use `labelFont` to customize the font of the scrubber line label and `be
 Use `labelBoundsInset` to prevent the scrubber line label from getting too close to chart edges.
 
 ```jsx live
-<Box style={{ marginLeft: 'calc(-1 * var(--space-3))', marginRight: 'calc(-1 * var(--space-3))' }}>
+<Box marginX={-3}>
   <LineChart
     enableScrubbing
     showArea
@@ -499,7 +499,7 @@ Use `labelBoundsInset` to prevent the scrubber line label from getting too close
 ```
 
 ```jsx live
-<Box style={{ marginLeft: 'calc(-1 * var(--space-3))', marginRight: 'calc(-1 * var(--space-3))' }}>
+<Box marginX={-3}>
   <LineChart
     enableScrubbing
     showArea

package/mcp-docs/web/components/SelectChipAlpha.txt

@@ -185,6 +185,60 @@ function ExampleMultiGroups() {
 }
 ```
 
+### Multi-select with assets
+
+```jsx live
+function ExampleMultiAssets() {
+  const assetImageMap: Record<string, string> = {
+    btc: assets.btc.imageUrl,
+    eth: assets.eth.imageUrl,
+    dai: assets.dai.imageUrl,
+    ltc: assets.ltc.imageUrl,
+    xrp: assets.xrp.imageUrl,
+  };
+
+  const exampleOptions = [
+    { value: 'btc', label: assets.btc.name },
+    { value: 'eth', label: assets.eth.name },
+    { value: 'dai', label: assets.dai.name },
+    { value: 'ltc', label: assets.ltc.name },
+    { value: 'xrp', label: assets.xrp.name },
+  ];
+  const { value, onChange } = useMultiSelect({
+    initialValue: ['eth', 'btc'],
+  });
+
+  // Get startNode based on selected assets
+  const startNode = useMemo(() => {
+    if (value.length === 0) return null;
+
+    // Multiple assets selected - use RemoteImageGroup
+    return (
+      <RemoteImageGroup shape="circle" size={24}>
+        {value.map((assetValue) => {
+          const imageUrl = assetImageMap[assetValue];
+          if (!imageUrl) return null;
+          return <RemoteImage key={assetValue} source={imageUrl} />;
+        })}
+      </RemoteImageGroup>
+    );
+  }, [value]);
+
+  return (
+    <SelectChip
+      controlAccessibilityLabel="Select multiple assets"
+      maxWidth={400}
+      onChange={onChange}
+      options={exampleOptions}
+      placeholder="Choose assets"
+      startNode={startNode}
+      type="multi"
+      value={value}
+    />
+  );
+}
+```
+
 ### Compact
 
 ```jsx live

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coinbase/cds-mcp-server",
-  "version": "8.33.0",
+  "version": "8.34.0",
   "description": "Coinbase Design System - MCP Server",
   "repository": {
     "type": "git",