@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="
|
|
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={
|
|
420
|
-
onPress={() => setIsVisible((isVisible) => !
|
|
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="
|
|
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={
|
|
433
|
-
onClick={() => setIsVisible((isVisible) => !
|
|
433
|
+
name={iconName}
|
|
434
|
+
onClick={() => setIsVisible((isVisible) => !isVisible)}
|
|
434
435
|
accessibilityLabel={isVisible ? 'Hide password' : 'Show password'}
|
|
435
436
|
/>
|
|
436
437
|
}
|