@coinbase/cds-mcp-server 8.34.2 → 8.35.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/CHANGELOG.md CHANGED
@@ -8,6 +8,10 @@ All notable changes to this project will be documented in this file.
8
8
 
9
9
  <!-- template-start -->
10
10
 
11
+ ## 8.35.0 ((1/5/2026, 10:03 AM PST))
12
+
13
+ This is an artificial version bump with no new change.
14
+
11
15
  ## 8.34.2 ((1/2/2026, 09:41 AM PST))
12
16
 
13
17
  This is an artificial version bump with no new change.
@@ -47,10 +47,25 @@ import { RemoteImageGroup } from '@coinbase/cds-mobile/media/RemoteImageGroup'
47
47
  </RemoteImageGroup>
48
48
  ```
49
49
 
50
+ ### Bordered Images
51
+
52
+ Use the `borderWidth` and `borderColor` props to change border style of the images in the group. `borderColor` defaults to `bg` when `borderWidth` is set.
53
+
54
+ ```tsx
55
+ <RemoteImageGroup borderWidth={300} max={3}>
56
+ <RemoteImage source={assets.eth.imageUrl} />
57
+ <RemoteImage source={assets.btc.imageUrl} />
58
+ <RemoteImage source={assets.dai.imageUrl} />
59
+ <RemoteImage source={assets.hbar.imageUrl} />
60
+ </RemoteImageGroup>
61
+ ```
62
+
50
63
  ## Props
51
64
 
52
65
  | Prop | Type | Required | Default | Description |
53
66
  | --- | --- | --- | --- | --- |
67
+ | `borderColor` | `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 | `borderWidth ? 'bg' : undefined` | - |
68
+ | `borderWidth` | `0 \| 100 \| 200 \| 300 \| 400 \| 500` | No | `-` | - |
54
69
  | `children` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | Children content |
55
70
  | `max` | `number` | No | `4` | Indicates the number of remote image before it collapses |
56
71
  | `shape` | `rectangle \| circle \| squircle \| square \| hexagon` | No | `circle` | Shape of all RemoteImage children in the group |
@@ -324,7 +324,7 @@ When using the `inside` label variant, you should always include a `placeholder`
324
324
  label="Password"
325
325
  labelVariant="inside"
326
326
  secureTextEntry
327
- end={<InputIconButton name="visibleInactive" />}
327
+ end={<InputIconButton name="visible" />}
328
328
  placeholder="Enter your password"
329
329
  />
330
330
  ```
@@ -409,6 +409,7 @@ Password Input - Use Icon Buttons at the end for actions like showing a password
409
409
  function PasswordInput() {
410
410
  const [isVisible, setIsVisible] = useState(false);
411
411
  const type = useMemo(() => (isVisible ? 'text' : 'password'), [isVisible]);
412
+ const iconName = useMemo(() => (isVisible ? 'visible' : 'invisible'), [isVisible]);
412
413
 
413
414
  return (
414
415
  <TextInput
@@ -416,8 +417,8 @@ function PasswordInput() {
416
417
  type={type}
417
418
  end={
418
419
  <InputIconButton
419
- name={isVisible ? 'visibleActive' : 'visibleInactive'}
420
- onPress={() => setIsVisible((isVisible) => !setIsVisible)}
420
+ name={iconName}
421
+ onPress={() => setIsVisible((isVisible) => !isVisible)}
421
422
  accessibilityLabel={isVisible ? 'Hide password' : 'Show password'}
422
423
  />
423
424
  }
@@ -77,10 +77,25 @@ function Component() {
77
77
  }
78
78
  ```
79
79
 
80
+ ### Bordered Images
81
+
82
+ Use the `borderWidth` and `borderColor` props to change border style of the images in the group. `borderColor` defaults to `bg` when `borderWidth` is set.
83
+
84
+ ```tsx live
85
+ <RemoteImageGroup borderWidth={300} max={3}>
86
+ <RemoteImage source={assets.eth.imageUrl} />
87
+ <RemoteImage source={assets.btc.imageUrl} />
88
+ <RemoteImage source={assets.dai.imageUrl} />
89
+ <RemoteImage source={assets.hbar.imageUrl} />
90
+ </RemoteImageGroup>
91
+ ```
92
+
80
93
  ## Props
81
94
 
82
95
  | Prop | Type | Required | Default | Description |
83
96
  | --- | --- | --- | --- | --- |
97
+ | `borderColor` | `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 | `borderWidth ? 'bg' : undefined` | - |
98
+ | `borderWidth` | `0 \| 100 \| 200 \| 300 \| 400 \| 500` | No | `-` | - |
84
99
  | `children` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | Children content |
85
100
  | `max` | `number` | No | `4` | Indicates the number of remote image before it collapses |
86
101
  | `shape` | `rectangle \| circle \| squircle \| square \| hexagon` | No | `circle` | Shape of all RemoteImage children in the group |
@@ -265,7 +265,7 @@ When using the `inside` label variant, you should always include a `placeholder`
265
265
  label="Password"
266
266
  labelVariant="inside"
267
267
  type="password"
268
- end={<InputIconButton name="visibleInactive" />}
268
+ end={<InputIconButton name="visible" />}
269
269
  placeholder="Enter your password"
270
270
  />
271
271
  </VStack>
@@ -422,6 +422,7 @@ Password Input - Use Icon Buttons at the end for actions like showing a password
422
422
  function PasswordInput() {
423
423
  const [isVisible, setIsVisible] = useState(false);
424
424
  const type = useMemo(() => (isVisible ? 'text' : 'password'), [isVisible]);
425
+ const iconName = useMemo(() => (isVisible ? 'visible' : 'invisible'), [isVisible]);
425
426
 
426
427
  return (
427
428
  <TextInput
@@ -429,8 +430,8 @@ function PasswordInput() {
429
430
  type={type}
430
431
  end={
431
432
  <InputIconButton
432
- name={isVisible ? 'visibleActive' : 'visibleInactive'}
433
- onClick={() => setIsVisible((isVisible) => !setIsVisible)}
433
+ name={iconName}
434
+ onClick={() => setIsVisible((isVisible) => !isVisible)}
434
435
  accessibilityLabel={isVisible ? 'Hide password' : 'Show password'}
435
436
  />
436
437
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@coinbase/cds-mcp-server",
3
- "version": "8.34.2",
3
+ "version": "8.35.0",
4
4
  "description": "Coinbase Design System - MCP Server",
5
5
  "repository": {
6
6
  "type": "git",