@coinbase/cds-mcp-server 8.24.0 → 8.25.1

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.
Files changed (5) hide show
  1. package/CHANGELOG.md +8 -0
  2. package/mcp-docs/mobile/components/Tag.txt +24 -40
  3. package/mcp-docs/web/components/Tabs.txt +4 -4
  4. package/mcp-docs/web/components/Tag.txt +88 -46
  5. package/package.json +1 -1
package/CHANGELOG.md CHANGED
@@ -8,6 +8,14 @@ All notable changes to this project will be documented in this file.
8
8
 
9
9
  <!-- template-start -->
10
10
 
11
+ ## 8.25.1 ((12/1/2025, 11:18 AM PST))
12
+
13
+ This is an artificial version bump with no new change.
14
+
15
+ ## 8.25.0 ((12/1/2025, 07:38 AM PST))
16
+
17
+ This is an artificial version bump with no new change.
18
+
11
19
  ## 8.24.0 ((12/1/2025, 06:51 AM PST))
12
20
 
13
21
  This is an artificial version bump with no new change.
package/mcp-docs/mobile/components/Tag.txt CHANGED
@@ -10,51 +10,43 @@ import { Tag } from '@coinbase/cds-mobile/tag/Tag'
10
10
 
11
11
  ## Examples
12
12
 
13
- ### Informational (Default)
13
+ ### Basics
14
14
 
15
- Informational Tags are used to note a characteristic or state of an object. The relationship between the Tag and the other UI component should be easy to interpret for a user.
15
+ Informational tags (default) are used to note a characteristic or state of an object. Promotional tags for editorial, ephemeral communication.
16
16
 
17
17
  ```jsx
18
- <HStack gap={2} wrap>
19
- <Tag colorScheme="green">Green</Tag>
20
- <Tag colorScheme="blue">Blue</Tag>
21
- <Tag colorScheme="yellow">Yellow</Tag>
22
- <Tag colorScheme="purple">Purple</Tag>
23
- <Tag colorScheme="red">Red</Tag>
24
- <Tag colorScheme="gray">Gray</Tag>
18
+ <HStack>
19
+ <Tag intent="informational" colorScheme="green">
20
+ Green
21
+ </Tag>
22
+ <Tag intent="promotional" colorScheme="green">
23
+ Green
24
+ </Tag>
25
25
  </HStack>
26
26
  ```
27
27
 
28
- ### Promotional
28
+ ### Emphasis
29
29
 
30
- Promotional Tags are for editorial, ephemeral communication. Terms like “New”, “Recommended”, “Beta”, “Hot”, “Trending”, fall into this Promotional Tag category.
30
+ You can control the visual prominence of the Tag using the `emphasis` prop. By default, informational tags are low emphasis and promotional tags are high emphasis.
31
31
 
32
32
  ```jsx
33
- <HStack gap={2} wrap>
34
- <Tag intent="promotional" colorScheme="green">
35
- Green
36
- </Tag>
37
- <Tag intent="promotional" colorScheme="blue">
38
- Blue
39
- </Tag>
40
- <Tag intent="promotional" colorScheme="yellow">
41
- Yellow
33
+ <HStack>
34
+ <Tag emphasis="high" colorScheme="green">
35
+ High Green
42
36
  </Tag>
43
37
  <Tag intent="promotional" colorScheme="purple">
44
- Purple
38
+ High Purple
45
39
  </Tag>
46
- <Tag intent="promotional" colorScheme="red">
47
- Red
48
- </Tag>
49
- <Tag intent="promotional" colorScheme="gray">
50
- Gray
40
+ <Tag colorScheme="green">Low Green</Tag>
41
+ <Tag intent="promotional" emphasis="low" colorScheme="purple">
42
+ Low Purple
51
43
  </Tag>
52
44
  </HStack>
53
45
  ```
54
46
 
55
- ### Working with Tags
47
+ ### Composed Examples
56
48
 
57
- To get a better idea of what it workng with Tags is like, we've created some example UI components that use Tags.
49
+ #### Account Status
58
50
 
59
51
  ```jsx
60
52
  <HStack justifyContent="space-between" gap="2" alignItems="center">
@@ -69,18 +61,7 @@ To get a better idea of what it workng with Tags is like, we've created some exa
69
61
  </HStack>
70
62
  ```
71
63
 
72
- ```jsx
73
- <HStack justifyContent="space-between" gap="2" alignItems="center">
74
- <VStack gap={0.5}>
75
- <HStack gap={1}>
76
- <TextHeadline as="p">Tax account status</TextHeadline>
77
- <Tag colorScheme="red">Not verified</Tag>
78
- </HStack>
79
- <TextBody as="p">Verify your info for tax reporting purposes.</TextBody>
80
- </VStack>
81
- <Button>Get started</Button>
82
- </HStack>
83
- ```
64
+ #### Margin Ratio
84
65
 
85
66
  ```jsx
86
67
  function MarginExample() {
@@ -155,6 +136,8 @@ function MarginExample() {
155
136
  }
156
137
  ```
157
138
 
139
+ #### List Cell Integration
140
+
158
141
  ```jsx
159
142
  <Box justifyContent="center">
160
143
  <Group divider={Divider} width="420px" bordered borderRadius={300} background elevation={1}>
@@ -232,6 +215,7 @@ function MarginExample() {
232
215
  | `dangerouslySetBackground` | `string` | No | `-` | - |
233
216
  | `display` | `flex \| none` | No | `-` | - |
234
217
  | `elevation` | `0 \| 1 \| 2` | No | `-` | Determines box shadow styles. Parent should have overflow set to visible to ensure styles are not clipped. |
218
+ | `emphasis` | `low \| high` | No | `'low' when informational intent, 'high' when promotional intent` | Specify the emphasis of the Tag. |
235
219
  | `flexBasis` | `string \| number` | No | `-` | - |
236
220
  | `flexDirection` | `row \| column \| row-reverse \| column-reverse` | No | `-` | - |
237
221
  | `flexGrow` | `number` | No | `-` | - |
package/mcp-docs/web/components/Tabs.txt CHANGED
@@ -20,7 +20,7 @@ import { Tabs } from '@coinbase/cds-web/tabs/Tabs'
20
20
  { id: 'tab3', label: 'Tab 3' },
21
21
  ];
22
22
  // TabComponent that uses context and TabLabel, wrapped in Pressable
23
- const TabComponent = ({ id, label, disabled }) => {
23
+ const TabComponent = ({ id, label, disabled, ...props }) => {
24
24
  const api = useTabsContext();
25
25
  const isActive = api.activeTab?.id === id;
26
26
  return (
@@ -28,7 +28,7 @@ import { Tabs } from '@coinbase/cds-web/tabs/Tabs'
28
28
  onClick={() => api.updateActiveTab(id)}
29
29
  disabled={disabled}
30
30
  aria-pressed={isActive}
31
- tabIndex={0}
31
+ {...props}
32
32
  >
33
33
  <TabLabel id={id} active={isActive}>
34
34
  {label}
@@ -70,7 +70,7 @@ import { Tabs } from '@coinbase/cds-web/tabs/Tabs'
70
70
  return <TabsActiveIndicator {...props} background="bgPrimary" bottom={0} height={2} />;
71
71
  }, []);
72
72
  // CustomTab uses context and TabLabel, wrapped in Pressable
73
- const CustomTab = ({ id, label, icon, disabled }) => {
73
+ const CustomTab = ({ id, label, icon, disabled, ...props }) => {
74
74
  const { activeTab, updateActiveTab } = useTabsContext();
75
75
  const isActive = activeTab?.id === id;
76
76
  return (
@@ -78,7 +78,7 @@ import { Tabs } from '@coinbase/cds-web/tabs/Tabs'
78
78
  onClick={() => updateActiveTab(id)}
79
79
  disabled={disabled}
80
80
  aria-pressed={isActive}
81
- tabIndex={0}
81
+ {...props}
82
82
  >
83
83
  <TabLabel id={id} active={isActive}>
84
84
  {label}
package/mcp-docs/web/components/Tag.txt CHANGED
@@ -10,51 +10,101 @@ import { Tag } from '@coinbase/cds-web/tag/Tag'
10
10
 
11
11
  ## Examples
12
12
 
13
- ### Informational (Default)
13
+ ### Basics
14
14
 
15
- Informational Tags are used to note a characteristic or state of an object. The relationship between the Tag and the other UI component should be easy to interpret for a user.
15
+ Informational tags (default) are used to note a characteristic or state of an object. Promotional tags for editorial, ephemeral communication.
16
16
 
17
17
  ```jsx live
18
- <HStack gap={2} wrap>
19
- <Tag colorScheme="green">Green</Tag>
20
- <Tag colorScheme="blue">Blue</Tag>
21
- <Tag colorScheme="yellow">Yellow</Tag>
22
- <Tag colorScheme="purple">Purple</Tag>
23
- <Tag colorScheme="red">Red</Tag>
24
- <Tag colorScheme="gray">Gray</Tag>
25
- </HStack>
18
+ <VStack gap={2}>
19
+ <HStack gap={2} wrap>
20
+ <Tag intent="informational" colorScheme="green">
21
+ Green
22
+ </Tag>
23
+ <Tag intent="informational" colorScheme="blue">
24
+ Blue
25
+ </Tag>
26
+ <Tag intent="informational" colorScheme="yellow">
27
+ Yellow
28
+ </Tag>
29
+ <Tag intent="informational" colorScheme="purple">
30
+ Purple
31
+ </Tag>
32
+ <Tag intent="informational" colorScheme="red">
33
+ Red
34
+ </Tag>
35
+ <Tag intent="informational" colorScheme="gray">
36
+ Gray
37
+ </Tag>
38
+ </HStack>
39
+ <HStack gap={2} wrap>
40
+ <Tag intent="promotional" colorScheme="green">
41
+ Green
42
+ </Tag>
43
+ <Tag intent="promotional" colorScheme="blue">
44
+ Blue
45
+ </Tag>
46
+ <Tag intent="promotional" colorScheme="yellow">
47
+ Yellow
48
+ </Tag>
49
+ <Tag intent="promotional" colorScheme="purple">
50
+ Purple
51
+ </Tag>
52
+ <Tag intent="promotional" colorScheme="red">
53
+ Red
54
+ </Tag>
55
+ <Tag intent="promotional" colorScheme="gray">
56
+ Gray
57
+ </Tag>
58
+ </HStack>
59
+ </VStack>
26
60
  ```
27
61
 
28
- ### Promotional
62
+ ### Emphasis
29
63
 
30
- Promotional Tags are for editorial, ephemeral communication. Terms like “New”, “Recommended”, “Beta”, “Hot”, “Trending”, fall into this Promotional Tag category.
64
+ You can control the visual prominence of the Tag using the `emphasis` prop. By default, informational tags are low emphasis and promotional tags are high emphasis.
31
65
 
32
66
  ```jsx live
33
- <HStack gap={2} wrap>
34
- <Tag intent="promotional" colorScheme="green">
35
- Green
36
- </Tag>
37
- <Tag intent="promotional" colorScheme="blue">
38
- Blue
39
- </Tag>
40
- <Tag intent="promotional" colorScheme="yellow">
41
- Yellow
42
- </Tag>
43
- <Tag intent="promotional" colorScheme="purple">
44
- Purple
45
- </Tag>
46
- <Tag intent="promotional" colorScheme="red">
47
- Red
48
- </Tag>
49
- <Tag intent="promotional" colorScheme="gray">
50
- Gray
51
- </Tag>
52
- </HStack>
67
+ <VStack gap={2}>
68
+ <HStack gap={2} wrap>
69
+ <Tag emphasis="high" colorScheme="green">
70
+ High Green
71
+ </Tag>
72
+ <Tag emphasis="high" colorScheme="blue">
73
+ High Blue
74
+ </Tag>
75
+ <Tag emphasis="high" colorScheme="yellow">
76
+ High Yellow
77
+ </Tag>
78
+ <Tag intent="promotional" colorScheme="purple">
79
+ High Purple
80
+ </Tag>
81
+ <Tag intent="promotional" colorScheme="red">
82
+ High Red
83
+ </Tag>
84
+ <Tag intent="promotional" colorScheme="gray">
85
+ High Gray
86
+ </Tag>
87
+ </HStack>
88
+ <HStack gap={2} wrap>
89
+ <Tag colorScheme="green">Low Green</Tag>
90
+ <Tag colorScheme="blue">Low Blue</Tag>
91
+ <Tag colorScheme="yellow">Low Yellow</Tag>
92
+ <Tag intent="promotional" emphasis="low" colorScheme="purple">
93
+ Low Purple
94
+ </Tag>
95
+ <Tag intent="promotional" emphasis="low" colorScheme="red">
96
+ Low Red
97
+ </Tag>
98
+ <Tag intent="promotional" emphasis="low" colorScheme="gray">
99
+ Low Gray
100
+ </Tag>
101
+ </HStack>
102
+ </VStack>
53
103
  ```
54
104
 
55
- ### Working with Tags
105
+ ### Composed Examples
56
106
 
57
- To get a better idea of what it workng with Tags is like, we've created some example UI components that use Tags.
107
+ #### Account Status
58
108
 
59
109
  ```jsx live
60
110
  <HStack justifyContent="space-between" gap="2" alignItems="center">
@@ -69,18 +119,7 @@ To get a better idea of what it workng with Tags is like, we've created some exa
69
119
  </HStack>
70
120
  ```
71
121
 
72
- ```jsx live
73
- <HStack justifyContent="space-between" gap="2" alignItems="center">
74
- <VStack gap={0.5}>
75
- <HStack gap={1}>
76
- <TextHeadline as="p">Tax account status</TextHeadline>
77
- <Tag colorScheme="red">Not verified</Tag>
78
- </HStack>
79
- <TextBody as="p">Verify your info for tax reporting purposes.</TextBody>
80
- </VStack>
81
- <Button>Get started</Button>
82
- </HStack>
83
- ```
122
+ #### Margin Ratio
84
123
 
85
124
  ```jsx live
86
125
  function MarginExample() {
@@ -155,6 +194,8 @@ function MarginExample() {
155
194
  }
156
195
  ```
157
196
 
197
+ #### List Cell Integration
198
+
158
199
  ```jsx live
159
200
  <Box justifyContent="center">
160
201
  <Group divider={Divider} width="420px" bordered borderRadius={300} background elevation={1}>
@@ -232,6 +273,7 @@ function MarginExample() {
232
273
  | `dangerouslySetBackground` | `string` | No | `-` | - |
233
274
  | `display` | `ResponsiveProp<grid \| revert \| none \| block \| inline \| inline-block \| flex \| inline-flex \| inline-grid \| contents \| flow-root \| list-item>` | No | `-` | - |
234
275
  | `elevation` | `0 \| 1 \| 2` | No | `-` | - |
276
+ | `emphasis` | `low \| high` | No | `'low' when informational intent, 'high' when promotional intent` | Specify the emphasis of the Tag. |
235
277
  | `flexBasis` | `ResponsiveProp<FlexBasis<string \| number>>` | No | `-` | - |
236
278
  | `flexDirection` | `ResponsiveProp<column \| row \| row-reverse \| column-reverse>` | No | `-` | - |
237
279
  | `flexGrow` | `inherit \| revert \| -moz-initial \| initial \| revert-layer \| unset` | No | `-` | - |
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@coinbase/cds-mcp-server",
3
- "version": "8.24.0",
3
+ "version": "8.25.1",
4
4
  "description": "Coinbase Design System - MCP Server",
5
5
  "repository": {
6
6
  "type": "git",