@coinbase/cds-mcp-server 8.35.1 β 8.36.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.
- package/CHANGELOG.md +10 -0
- package/esm/{cds.mdc β cds.md} +6 -7
- package/esm/setup.js +78 -5
- package/mcp-docs/mobile/components/ListCell.txt +59 -45
- package/mcp-docs/mobile/components/SelectOption.txt +1 -1
- package/mcp-docs/web/components/AreaChart.txt +2 -2
- package/mcp-docs/web/components/BarChart.txt +2 -2
- package/mcp-docs/web/components/LineChart.txt +2 -2
- package/mcp-docs/web/components/ListCell.txt +59 -45
- package/mcp-docs/web/components/SelectOption.txt +2 -2
- package/mcp-docs/web/components/XAxis.txt +1 -0
- package/mcp-docs/web/components/YAxis.txt +1 -0
- package/package.json +1 -6
package/CHANGELOG.md
CHANGED
|
@@ -8,6 +8,16 @@ All notable changes to this project will be documented in this file.
|
|
|
8
8
|
|
|
9
9
|
<!-- template-start -->
|
|
10
10
|
|
|
11
|
+
## 8.36.1 ((1/6/2026, 01:32 PM PST))
|
|
12
|
+
|
|
13
|
+
This is an artificial version bump with no new change.
|
|
14
|
+
|
|
15
|
+
## 8.36.0 (1/6/2026 PST)
|
|
16
|
+
|
|
17
|
+
#### π Updates
|
|
18
|
+
|
|
19
|
+
- Update MCP Serer setup script to follow latest Claude Code and Cursor guidelines.
|
|
20
|
+
|
|
11
21
|
## 8.35.1 ((1/5/2026, 03:28 PM PST))
|
|
12
22
|
|
|
13
23
|
This is an artificial version bump with no new change.
|
package/esm/{cds.mdc β cds.md}
RENAMED
|
@@ -1,13 +1,7 @@
|
|
|
1
|
-
---
|
|
2
|
-
description:
|
|
3
|
-
globs: *.tsx,*.jsx
|
|
4
|
-
alwaysApply: false
|
|
5
|
-
---
|
|
6
|
-
source: https://github.com/coinbase/cds/blob/master/packages/mcp-server/src/cds.mdc
|
|
7
|
-
|
|
8
1
|
# CDS Component Priority Rules
|
|
9
2
|
|
|
10
3
|
## Component Usage Hierarchy
|
|
4
|
+
|
|
11
5
|
- CDS is the primary design system for React and React Native in this project.
|
|
12
6
|
- The JS package is `@coinbase/cds-web` for web React apps and `@coinbase/cds-mobile` for mobile React Native apps.
|
|
13
7
|
- ALWAYS prioritize CDS components over ANY other UI components when a CDS equivalent exists. For React Native this includes React Native built-ins. For web this includes any HTML native elements.
|
|
@@ -15,11 +9,13 @@ source: https://github.com/coinbase/cds/blob/master/packages/mcp-server/src/cds.
|
|
|
15
9
|
- ALWAYS use CDS components even if other local components or screens in the codebase are not currently using them - the goal is to standardize on CDS.
|
|
16
10
|
|
|
17
11
|
## Component Research Order
|
|
12
|
+
|
|
18
13
|
1. FIRST check if there's a CDS component that satisfies the requirement - this is MANDATORY.
|
|
19
14
|
2. ONLY if no suitable CDS component exists, then consider native React Native components.
|
|
20
15
|
3. ONLY if neither CDS nor native components work, suggest custom implementations.
|
|
21
16
|
|
|
22
17
|
## Documentation Location
|
|
18
|
+
|
|
23
19
|
- ALWAYS use the cds mcp server's list-cds-routes mcp tool to list all CDS routes before trying to use a component.
|
|
24
20
|
- ALWAYS inspect the documentation for a component with the get-cds-route mcp tool before using it to understand how to import and how to use it.
|
|
25
21
|
- ALWAYS check examples in the documentation before implementing.
|
|
@@ -27,16 +23,19 @@ source: https://github.com/coinbase/cds/blob/master/packages/mcp-server/src/cds.
|
|
|
27
23
|
- CAREFULLY review the component APIs, props, and usage examples in the documentation.
|
|
28
24
|
|
|
29
25
|
## Implementation Guidelines
|
|
26
|
+
|
|
30
27
|
- MAINTAIN consistent styling and behavior with existing CDS implementations in the codebase.
|
|
31
28
|
- FOLLOW CDS-specific theming and styling patterns.
|
|
32
29
|
- RESPECT CDS component hierarchy and composition patterns.
|
|
33
30
|
- DO NOT mix CDS and non-CDS component styling approaches unless absolutely necessary.
|
|
34
31
|
|
|
35
32
|
## When Suggesting Code
|
|
33
|
+
|
|
36
34
|
- ALWAYS import from @coinbase/cds-mobile for mobile or @coinbase/cds-web for web explicitly.
|
|
37
35
|
- INCLUDE complete imports in your code examples.
|
|
38
36
|
- DEMONSTRATE proper usage of CDS theming and styling.
|
|
39
37
|
- SHOW prop usage according to CDS documentation.
|
|
40
38
|
|
|
41
39
|
## Lint Errors
|
|
40
|
+
|
|
42
41
|
- If there's a lint error, do not discard other components that don't have lint errors.
|
package/esm/setup.js
CHANGED
|
@@ -68,21 +68,61 @@ const findRepoRoot = startPath => {
|
|
|
68
68
|
throw new Error('Could not find repo root');
|
|
69
69
|
}
|
|
70
70
|
};
|
|
71
|
-
const
|
|
71
|
+
const CURSOR_MDC_HEADER = "---\ndescription: Apply when working with React components, UI implementations, or Coinbase Design System usage. This rule ensures proper use of CDS components.\n---\n";
|
|
72
|
+
const installCursorRules = agentRoot => {
|
|
72
73
|
try {
|
|
73
|
-
const sourceFile = path.join(__dirname, 'cds.
|
|
74
|
+
const sourceFile = path.join(__dirname, 'cds.md');
|
|
74
75
|
const outputDirectory = path.join(agentRoot, 'rules');
|
|
75
76
|
const outputFile = path.join(outputDirectory, 'cds.mdc');
|
|
76
77
|
if (!fs.existsSync(outputDirectory)) fs.mkdirSync(outputDirectory, {
|
|
77
78
|
recursive: true
|
|
78
79
|
});
|
|
80
|
+
|
|
81
|
+
// Read the plain markdown source and prepend the Cursor MDC header
|
|
82
|
+
const sourceContent = fs.readFileSync(sourceFile, 'utf8');
|
|
83
|
+
const mdcContent = CURSOR_MDC_HEADER + sourceContent;
|
|
84
|
+
fs.writeFileSync(outputFile, mdcContent);
|
|
85
|
+
console.log("\u2705 Copied CDS rules to ".concat(outputFile));
|
|
86
|
+
} catch (error) {
|
|
87
|
+
console.error('β Failed to copy CDS rules:', error instanceof Error ? error.message : String(error));
|
|
88
|
+
}
|
|
89
|
+
};
|
|
90
|
+
const installClaudeRules = (repoRoot, agentRoot) => {
|
|
91
|
+
try {
|
|
92
|
+
const sourceFile = path.join(__dirname, 'cds.md');
|
|
93
|
+
const outputDirectory = path.join(agentRoot, 'rules');
|
|
94
|
+
const outputFile = path.join(outputDirectory, 'cds.md');
|
|
95
|
+
if (!fs.existsSync(outputDirectory)) fs.mkdirSync(outputDirectory, {
|
|
96
|
+
recursive: true
|
|
97
|
+
});
|
|
98
|
+
|
|
99
|
+
// Simply copy the plain markdown file for Claude Code
|
|
79
100
|
fs.cpSync(sourceFile, outputFile);
|
|
80
101
|
console.log("\u2705 Copied CDS rules to ".concat(outputFile));
|
|
102
|
+
|
|
103
|
+
// Update or create CLAUDE.md with reference to the rules file
|
|
104
|
+
const claudeMdPath = path.join(repoRoot, 'CLAUDE.md');
|
|
105
|
+
const claudeRulesReference = '@.claude/rules/cds.md';
|
|
106
|
+
if (fs.existsSync(claudeMdPath)) {
|
|
107
|
+
const claudeMdContent = fs.readFileSync(claudeMdPath, 'utf8');
|
|
108
|
+
if (!claudeMdContent.includes(claudeRulesReference)) {
|
|
109
|
+
// Add the reference at the beginning of the file
|
|
110
|
+
const updatedContent = "".concat(claudeRulesReference, "\n\n").concat(claudeMdContent);
|
|
111
|
+
fs.writeFileSync(claudeMdPath, updatedContent);
|
|
112
|
+
console.log("\u2705 Added CDS rules reference to ".concat(claudeMdPath));
|
|
113
|
+
} else {
|
|
114
|
+
console.log("\u2705 CDS rules reference already exists in ".concat(claudeMdPath));
|
|
115
|
+
}
|
|
116
|
+
} else {
|
|
117
|
+
// Create CLAUDE.md with the reference
|
|
118
|
+
fs.writeFileSync(claudeMdPath, "".concat(claudeRulesReference, "\n"));
|
|
119
|
+
console.log("\u2705 Created ".concat(claudeMdPath, " with CDS rules reference"));
|
|
120
|
+
}
|
|
81
121
|
} catch (error) {
|
|
82
122
|
console.error('β Failed to copy CDS rules:', error instanceof Error ? error.message : String(error));
|
|
83
123
|
}
|
|
84
124
|
};
|
|
85
|
-
const
|
|
125
|
+
const installCursorMcpServer = (repoRoot, cursorRoot) => {
|
|
86
126
|
const mcpServerConfigPath = path.join(cursorRoot, 'mcp.json');
|
|
87
127
|
let newMcpServerConfig = {
|
|
88
128
|
mcpServers: {}
|
|
@@ -119,6 +159,34 @@ const installMcpServer = (repoRoot, cursorRoot) => {
|
|
|
119
159
|
fs.writeFileSync(mcpServerConfigPath, JSON.stringify(newMcpServerConfig, null, 2));
|
|
120
160
|
console.log("\u2705 Updated MCP server config in ".concat(mcpServerConfigPath));
|
|
121
161
|
};
|
|
162
|
+
const installClaudeMcpServer = repoRoot => {
|
|
163
|
+
const mcpServerConfigPath = path.join(repoRoot, '.mcp.json');
|
|
164
|
+
let newMcpServerConfig = {
|
|
165
|
+
mcpServers: {}
|
|
166
|
+
};
|
|
167
|
+
|
|
168
|
+
// Claude Code doesn't need --prefix args
|
|
169
|
+
const mcpServerArgs = ['-y', '@coinbase/cds-mcp-server'];
|
|
170
|
+
if (args.noTelemetry) mcpServerArgs.unshift('DISABLE_CDS_MCP_TELEMETRY=1');
|
|
171
|
+
const cdsMcpServerConfig = {
|
|
172
|
+
cds: {
|
|
173
|
+
command: 'npx',
|
|
174
|
+
args: mcpServerArgs
|
|
175
|
+
}
|
|
176
|
+
};
|
|
177
|
+
try {
|
|
178
|
+
const currentMcpServerConfig = JSON.parse(fs.readFileSync(mcpServerConfigPath, 'utf8'));
|
|
179
|
+
newMcpServerConfig = _objectSpread(_objectSpread({}, currentMcpServerConfig), {}, {
|
|
180
|
+
mcpServers: _objectSpread(_objectSpread({}, currentMcpServerConfig.mcpServers), cdsMcpServerConfig)
|
|
181
|
+
});
|
|
182
|
+
} catch (_unused3) {
|
|
183
|
+
newMcpServerConfig = {
|
|
184
|
+
mcpServers: cdsMcpServerConfig
|
|
185
|
+
};
|
|
186
|
+
}
|
|
187
|
+
fs.writeFileSync(mcpServerConfigPath, JSON.stringify(newMcpServerConfig, null, 2));
|
|
188
|
+
console.log("\u2705 Updated MCP server config in ".concat(mcpServerConfigPath));
|
|
189
|
+
};
|
|
122
190
|
for (const agentValue of selectedAgents) {
|
|
123
191
|
const agent = agentOptions.find(agent => agent.value === agentValue);
|
|
124
192
|
if (!agent) {
|
|
@@ -130,6 +198,11 @@ for (const agentValue of selectedAgents) {
|
|
|
130
198
|
console.log('You can opt out by running setup with the --no-telemetry flag.');
|
|
131
199
|
const repoRoot = findRepoRoot(process.cwd());
|
|
132
200
|
const agentRoot = path.join(repoRoot, agent.directory);
|
|
133
|
-
|
|
134
|
-
|
|
201
|
+
if (agent.value === 'cursor') {
|
|
202
|
+
installCursorRules(agentRoot);
|
|
203
|
+
installCursorMcpServer(repoRoot, agentRoot);
|
|
204
|
+
} else if (agent.value === 'claude') {
|
|
205
|
+
installClaudeRules(repoRoot, agentRoot);
|
|
206
|
+
installClaudeMcpServer(repoRoot);
|
|
207
|
+
}
|
|
135
208
|
}
|
|
@@ -567,62 +567,76 @@ function PriorityContent() {
|
|
|
567
567
|
Without helper text (top-only layout):
|
|
568
568
|
|
|
569
569
|
```text
|
|
570
|
-
|
|
571
|
-
β root (Box)
|
|
572
|
-
|
|
573
|
-
ββ pressable
|
|
574
|
-
|
|
575
|
-
βββ contentContainer & mainContent (HStack)
|
|
576
|
-
βββ βββββββ
|
|
577
|
-
βββ βmediaβ β
|
|
578
|
-
βββ β β β
|
|
579
|
-
βββ β β β β
|
|
580
|
-
βββ β β β
|
|
581
|
-
βββ β β β
|
|
582
|
-
βββ β β β β
|
|
583
|
-
βββ β β β
|
|
584
|
-
βββ
|
|
585
|
-
|
|
586
|
-
|
|
587
|
-
|
|
570
|
+
βββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ
|
|
571
|
+
β root (Box) β
|
|
572
|
+
βββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ
|
|
573
|
+
ββ pressable ββ
|
|
574
|
+
βββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ
|
|
575
|
+
βββ contentContainer & mainContent (HStack) βββ
|
|
576
|
+
βββ βββββββ ββββββββββββββββββββββββββββββββ ββββββββββββββ ββββββββββββββ βββββββββββ βββ
|
|
577
|
+
βββ βmediaβ β titleStackContainer (Box) β βintermediaryβ β end β βaccessoryβ βββ
|
|
578
|
+
βββ β β β ββββββββββββββββββββββββββββ β β β β (detail β β β βββ
|
|
579
|
+
βββ β β β β titleStack (VStack) β β β β β or β β β βββ
|
|
580
|
+
βββ β β β β ββββββββββββ β β β β β action) β β β βββ
|
|
581
|
+
βββ β β β β β title β β β β β β β β β βββ
|
|
582
|
+
βββ β β β β ββββββββββββ β β β β β β β β βββ
|
|
583
|
+
βββ β β β β ββββββββββββ β β β β β β β β βββ
|
|
584
|
+
βββ β β β β β subtitle β β β β β β β β β βββ
|
|
585
|
+
βββ β β β β ββββββββββββ β β β β β β β β βββ
|
|
586
|
+
βββ β β β β ββββββββββββββ β β β β β β β β βββ
|
|
587
|
+
βββ β β β β β descriptionβ β β β β β β β β βββ
|
|
588
|
+
βββ β β β β ββββββββββββββ β β β β β β β β βββ
|
|
589
|
+
βββ β β β ββββββββββββββββββββββββββββ β β β β β β β βββ
|
|
590
|
+
βββ βββββββ ββββββββββββββββββββββββββββββββ ββββββββββββββ ββββββββββββββ βββββββββββ βββ
|
|
591
|
+
βββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ
|
|
592
|
+
βββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ
|
|
593
|
+
βββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ
|
|
588
594
|
```
|
|
589
595
|
|
|
590
596
|
With helper text (top + bottom layout):
|
|
591
597
|
|
|
592
598
|
```text
|
|
593
|
-
|
|
594
|
-
β root (Box)
|
|
595
|
-
|
|
596
|
-
ββ pressable
|
|
597
|
-
|
|
598
|
-
βββ contentContainer (VStack)
|
|
599
|
-
|
|
600
|
-
ββββ mainContent (HStack)
|
|
601
|
-
ββββ βββββββ
|
|
602
|
-
ββββ βmediaβ β
|
|
603
|
-
ββββ β β β
|
|
604
|
-
ββββ β β β β
|
|
605
|
-
ββββ β β β
|
|
606
|
-
ββββ β β β
|
|
607
|
-
ββββ β β β β
|
|
608
|
-
ββββ β β β
|
|
609
|
-
ββββ
|
|
610
|
-
|
|
611
|
-
|
|
612
|
-
ββββ
|
|
613
|
-
|
|
614
|
-
|
|
615
|
-
|
|
616
|
-
|
|
599
|
+
βββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ
|
|
600
|
+
β root (Box) β
|
|
601
|
+
βββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ
|
|
602
|
+
ββ pressable ββ
|
|
603
|
+
βββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ
|
|
604
|
+
βββ contentContainer (VStack) βββ
|
|
605
|
+
βββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ
|
|
606
|
+
ββββ mainContent (HStack) ββββ
|
|
607
|
+
ββββ βββββββ ββββββββββββββββββββββββββββββββ ββββββββββββββ ββββββββββββββ βββββββββββ ββββ
|
|
608
|
+
ββββ βmediaβ β titleStackContainer (Box) β βintermediaryβ β end β βaccessoryβ ββββ
|
|
609
|
+
ββββ β β β ββββββββββββββββββββββββββββ β β β β (detail β β β ββββ
|
|
610
|
+
ββββ β β β β titleStack (VStack) β β β β β or β β β ββββ
|
|
611
|
+
ββββ β β β β ββββββββββββ β β β β β action) β β β ββββ
|
|
612
|
+
ββββ β β β β β title β β β β β β β β β ββββ
|
|
613
|
+
ββββ β β β β ββββββββββββ β β β β β β β β ββββ
|
|
614
|
+
ββββ β β β β ββββββββββββ β β β β β β β β ββββ
|
|
615
|
+
ββββ β β β β β subtitle β β β β β β β β β ββββ
|
|
616
|
+
ββββ β β β β ββββββββββββ β β β β β β β β ββββ
|
|
617
|
+
ββββ β β β β ββββββββββββββ β β β β β β β β ββββ
|
|
618
|
+
ββββ β β β β β descriptionβ β β β β β β β β ββββ
|
|
619
|
+
ββββ β β β β ββββββββββββββ β β β β β β β β ββββ
|
|
620
|
+
ββββ β β β ββββββββββββββββββββββββββββ β β β β β β β ββββ
|
|
621
|
+
ββββ βββββββ ββββββββββββββββββββββββββββββββ ββββββββββββββ ββββββββββββββ βββββββββββ ββββ
|
|
622
|
+
βββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ
|
|
623
|
+
βββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ
|
|
624
|
+
ββββ helperText ββββ
|
|
625
|
+
βββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ
|
|
626
|
+
βββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ
|
|
627
|
+
βββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ
|
|
628
|
+
βββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ
|
|
617
629
|
```
|
|
618
630
|
|
|
619
|
-
Mapping to `styles`
|
|
631
|
+
Mapping to `styles` keys:
|
|
620
632
|
|
|
621
633
|
- root: outer `Box` wrapping the entire cell
|
|
622
634
|
- pressable: interactive overlay when `href` / `onPress` event handlers are present
|
|
623
635
|
- contentContainer: container around top and optional bottom content
|
|
624
636
|
- mainContent: inner horizontal layout that holds the main pieces
|
|
625
|
-
-
|
|
637
|
+
- titleStackContainer: wrapper around the title stack (controls flex behavior)
|
|
638
|
+
- titleStack: stacked text column (title/subtitle/description)
|
|
639
|
+
- title/subtitle/description: individual text nodes within `titleStack`
|
|
626
640
|
- media: leading media container
|
|
627
641
|
- intermediary: middle container between main and end
|
|
628
642
|
- end: container for `detail` / `subdetail` or `end` prop you pass in
|
|
@@ -741,7 +755,7 @@ Mapping to `styles` / `classNames` keys:
|
|
|
741
755
|
| `selected` | `boolean` | No | `-` | Is the cell selected? Will apply a background and selected accessory. |
|
|
742
756
|
| `spacingVariant` | `compact \| normal \| condensed` | No | `'normal'` | Spacing variant configuration. Deprecated value: compact. Prefer condensed. When spacingVariant=normal: 1. min-height is 80px 2. padding is var(--space-2) var(--space-3) 3. border-radius is var(--borderRadius-200) 4. when there is a description, titles numberOfLines={1} otherwise titles numberOfLines={2} 5. description and subdetail have font body When spacingVariant=compact: 1. same as spacingVariant=normal, except min-height is 40px When spacingVariant=condensed: 1. min-height is undefined 2. padding is var(--space-1) var(--space-2) 3. border-radius is --borderRadius-0 4. titles numberOfLines={2} 5. description and subdetail have font label2 |
|
|
743
757
|
| `style` | `false \| RegisteredStyle<ViewStyle> \| Value \| AnimatedInterpolation<string \| number> \| WithAnimatedObject<ViewStyle> \| WithAnimatedArray<Falsy \| ViewStyle \| RegisteredStyle<ViewStyle> \| RecursiveArray<Falsy \| ViewStyle \| RegisteredStyle<ViewStyle>> \| readonly (Falsy \| ViewStyle \| RegisteredStyle<ViewStyle>)[]> \| null` | No | `-` | - |
|
|
744
|
-
| `styles` | `({ root?: StyleProp<ViewStyle>; contentContainer?: StyleProp<ViewStyle>; topContent?: StyleProp<ViewStyle>; bottomContent?: StyleProp<ViewStyle>; pressable?: StyleProp<ViewStyle>; media?: StyleProp<ViewStyle>; intermediary?: StyleProp<ViewStyle>; end?: StyleProp<ViewStyle>; accessory?: StyleProp<ViewStyle>; } & { root?: StyleProp<ViewStyle>; media?: StyleProp<ViewStyle>; intermediary?: StyleProp<ViewStyle>; end?: StyleProp<ViewStyle>; accessory?: StyleProp<ViewStyle>; contentContainer?: StyleProp<ViewStyle>; pressable?: StyleProp<ViewStyle>; mainContent?: StyleProp<ViewStyle>; helperText?: StyleProp<ViewStyle>; title?: StyleProp<TextStyle>; subtitle?: StyleProp<TextStyle>; description?: StyleProp<TextStyle>; })` | No | `-` | Styles for the components Styles for default subcomponents. Ignored when the corresponding xxNode prop is used. |
|
|
758
|
+
| `styles` | `({ root?: StyleProp<ViewStyle>; contentContainer?: StyleProp<ViewStyle>; topContent?: StyleProp<ViewStyle>; bottomContent?: StyleProp<ViewStyle>; pressable?: StyleProp<ViewStyle>; media?: StyleProp<ViewStyle>; childrenContainer?: StyleProp<ViewStyle>; intermediary?: StyleProp<ViewStyle>; end?: StyleProp<ViewStyle>; accessory?: StyleProp<ViewStyle>; } & { root?: StyleProp<ViewStyle>; media?: StyleProp<ViewStyle>; intermediary?: StyleProp<ViewStyle>; end?: StyleProp<ViewStyle>; accessory?: StyleProp<ViewStyle>; contentContainer?: StyleProp<ViewStyle>; pressable?: StyleProp<ViewStyle>; mainContent?: StyleProp<ViewStyle>; titleStack?: StyleProp<ViewStyle>; titleStackContainer?: StyleProp<ViewStyle>; helperText?: StyleProp<ViewStyle>; title?: StyleProp<TextStyle>; subtitle?: StyleProp<TextStyle>; description?: StyleProp<TextStyle>; })` | No | `-` | Styles for the components Styles for default subcomponents. Ignored when the corresponding xxNode prop is used. |
|
|
745
759
|
| `subdetail` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | Subdetail providing more information. This prop is only intended to accept a string or Text component; other use cases, while allowed, are not supported and may result in unexpected behavior. For arbitrary content, use subdetailNode. |
|
|
746
760
|
| `subdetailFont` | `inherit \| FontFamily` | No | `-` | Font to apply to the subdetail text. |
|
|
747
761
|
| `subdetailNode` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | React node to render subdetail. Takes precedence over subdetail. |
|
|
@@ -79,7 +79,7 @@ const SelectMobile = () => {
|
|
|
79
79
|
| `onPress` | `((event: GestureResponderEvent) => void) \| null` | No | `-` | Called when a single tap gesture is detected. |
|
|
80
80
|
| `outerSpacing` | `CellSpacing` | No | `-` | The spacing to use on the parent wrapper of Cell |
|
|
81
81
|
| `priority` | `end \| start \| middle \| (end \| start \| middle)[]` | No | `-` | Which piece of content has the highest priority in regards to text truncation, growing, and shrinking. |
|
|
82
|
-
| `styles` | `{ root?: StyleProp<ViewStyle>; contentContainer?: StyleProp<ViewStyle>; topContent?: StyleProp<ViewStyle>; bottomContent?: StyleProp<ViewStyle>; pressable?: StyleProp<ViewStyle>; media?: StyleProp<ViewStyle>; intermediary?: StyleProp<ViewStyle>; end?: StyleProp<ViewStyle>; accessory?: StyleProp<ViewStyle>; }` | No | `-` | Styles for the components |
|
|
82
|
+
| `styles` | `{ root?: StyleProp<ViewStyle>; contentContainer?: StyleProp<ViewStyle>; topContent?: StyleProp<ViewStyle>; bottomContent?: StyleProp<ViewStyle>; pressable?: StyleProp<ViewStyle>; media?: StyleProp<ViewStyle>; childrenContainer?: StyleProp<ViewStyle>; intermediary?: StyleProp<ViewStyle>; end?: StyleProp<ViewStyle>; accessory?: StyleProp<ViewStyle>; }` | No | `-` | Styles for the components |
|
|
83
83
|
| `testID` | `string` | No | `-` | Used to locate this element in unit and end-to-end tests. Under the hood, testID translates to data-testid on Web. On Mobile, testID stays the same - testID |
|
|
84
84
|
| `title` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | Title of content. Max 1 line (with description) or 2 lines (without), otherwise will truncate. This prop is only intended to accept a string or Text component; other use cases, while allowed, are not supported and may result in unexpected behavior. For arbitrary content, use titleNode. |
|
|
85
85
|
|
|
@@ -725,8 +725,8 @@ function XAxisGradient() {
|
|
|
725
725
|
| `userSelect` | `ResponsiveProp<text \| none \| all \| auto>` | No | `-` | - |
|
|
726
726
|
| `visibility` | `ResponsiveProp<hidden \| visible>` | No | `-` | - |
|
|
727
727
|
| `width` | `ResponsiveProp<Width<string \| number>>` | No | `-` | - |
|
|
728
|
-
| `xAxis` | `(Partial<AxisConfigProps> &
|
|
729
|
-
| `yAxis` | `(Partial<AxisConfigProps> &
|
|
728
|
+
| `xAxis` | `(Partial<AxisConfigProps> & SharedProps & { label?: string; labelGap?: number \| undefined; minTickLabelGap?: number \| undefined; requestedTickCount?: number \| undefined; showGrid?: boolean \| undefined; showLine?: boolean \| undefined; showTickMarks?: boolean \| undefined; tickMarkSize?: number \| undefined; ticks?: number[] \| ((value: number) => boolean) \| undefined; tickMarkLabelGap?: number \| undefined; tickInterval?: number \| undefined; tickMinStep?: number \| undefined; tickMaxStep?: number \| undefined; } & { className?: string \| undefined; classNames?: { root?: string \| undefined; label?: string \| undefined; tickLabel?: string \| undefined; gridLine?: string \| undefined; line?: string \| undefined; tickMark?: string \| undefined; } \| undefined; style?: CSSProperties \| undefined; styles?: { root?: CSSProperties \| undefined; label?: CSSProperties \| undefined; tickLabel?: CSSProperties \| undefined; gridLine?: CSSProperties \| undefined; line?: CSSProperties \| undefined; tickMark?: CSSProperties \| undefined; } \| undefined; GridLineComponent?: LineComponent \| undefined; LineComponent?: LineComponent \| undefined; TickMarkLineComponent?: LineComponent \| undefined; tickLabelFormatter?: ((value: number) => ChartTextChildren) \| undefined; TickLabelComponent?: AxisTickLabelComponent \| undefined; } & { position?: top \| bottom \| undefined; height?: number \| undefined; }) \| undefined` | No | `-` | Configuration for x-axis. Accepts axis config and axis props. To show the axis, set showXAxis to true. |
|
|
729
|
+
| `yAxis` | `(Partial<AxisConfigProps> & SharedProps & { label?: string; labelGap?: number \| undefined; minTickLabelGap?: number \| undefined; requestedTickCount?: number \| undefined; showGrid?: boolean \| undefined; showLine?: boolean \| undefined; showTickMarks?: boolean \| undefined; tickMarkSize?: number \| undefined; ticks?: number[] \| ((value: number) => boolean) \| undefined; tickMarkLabelGap?: number \| undefined; tickInterval?: number \| undefined; tickMinStep?: number \| undefined; tickMaxStep?: number \| undefined; } & { className?: string \| undefined; classNames?: { root?: string \| undefined; label?: string \| undefined; tickLabel?: string \| undefined; gridLine?: string \| undefined; line?: string \| undefined; tickMark?: string \| undefined; } \| undefined; style?: CSSProperties \| undefined; styles?: { root?: CSSProperties \| undefined; label?: CSSProperties \| undefined; tickLabel?: CSSProperties \| undefined; gridLine?: CSSProperties \| undefined; line?: CSSProperties \| undefined; tickMark?: CSSProperties \| undefined; } \| undefined; GridLineComponent?: LineComponent \| undefined; LineComponent?: LineComponent \| undefined; TickMarkLineComponent?: LineComponent \| undefined; tickLabelFormatter?: ((value: number) => ChartTextChildren) \| undefined; TickLabelComponent?: AxisTickLabelComponent \| undefined; } & { axisId?: string \| undefined; position?: left \| right \| undefined; width?: number \| undefined; }) \| undefined` | No | `-` | Configuration for y-axis. Accepts axis config and axis props. To show the axis, set showYAxis to true. |
|
|
730
730
|
| `zIndex` | `inherit \| auto \| revert \| -moz-initial \| initial \| revert-layer \| unset` | No | `-` | - |
|
|
731
731
|
|
|
732
732
|
|
|
@@ -1129,8 +1129,8 @@ function UpdatingChartValues() {
|
|
|
1129
1129
|
| `userSelect` | `ResponsiveProp<text \| none \| all \| auto>` | No | `-` | - |
|
|
1130
1130
|
| `visibility` | `ResponsiveProp<hidden \| visible>` | No | `-` | - |
|
|
1131
1131
|
| `width` | `ResponsiveProp<Width<string \| number>>` | No | `-` | - |
|
|
1132
|
-
| `xAxis` | `(Partial<AxisConfigProps> &
|
|
1133
|
-
| `yAxis` | `(Partial<AxisConfigProps> &
|
|
1132
|
+
| `xAxis` | `(Partial<AxisConfigProps> & SharedProps & { label?: string; labelGap?: number \| undefined; minTickLabelGap?: number \| undefined; requestedTickCount?: number \| undefined; showGrid?: boolean \| undefined; showLine?: boolean \| undefined; showTickMarks?: boolean \| undefined; tickMarkSize?: number \| undefined; ticks?: number[] \| ((value: number) => boolean) \| undefined; tickMarkLabelGap?: number \| undefined; tickInterval?: number \| undefined; tickMinStep?: number \| undefined; tickMaxStep?: number \| undefined; } & { className?: string \| undefined; classNames?: { root?: string \| undefined; label?: string \| undefined; tickLabel?: string \| undefined; gridLine?: string \| undefined; line?: string \| undefined; tickMark?: string \| undefined; } \| undefined; style?: CSSProperties \| undefined; styles?: { root?: CSSProperties \| undefined; label?: CSSProperties \| undefined; tickLabel?: CSSProperties \| undefined; gridLine?: CSSProperties \| undefined; line?: CSSProperties \| undefined; tickMark?: CSSProperties \| undefined; } \| undefined; GridLineComponent?: LineComponent \| undefined; LineComponent?: LineComponent \| undefined; TickMarkLineComponent?: LineComponent \| undefined; tickLabelFormatter?: ((value: number) => ChartTextChildren) \| undefined; TickLabelComponent?: AxisTickLabelComponent \| undefined; } & { position?: top \| bottom \| undefined; height?: number \| undefined; }) \| undefined` | No | `-` | Configuration for x-axis. Accepts axis config and axis props. To show the axis, set showXAxis to true. |
|
|
1133
|
+
| `yAxis` | `(Partial<AxisConfigProps> & SharedProps & { label?: string; labelGap?: number \| undefined; minTickLabelGap?: number \| undefined; requestedTickCount?: number \| undefined; showGrid?: boolean \| undefined; showLine?: boolean \| undefined; showTickMarks?: boolean \| undefined; tickMarkSize?: number \| undefined; ticks?: number[] \| ((value: number) => boolean) \| undefined; tickMarkLabelGap?: number \| undefined; tickInterval?: number \| undefined; tickMinStep?: number \| undefined; tickMaxStep?: number \| undefined; } & { className?: string \| undefined; classNames?: { root?: string \| undefined; label?: string \| undefined; tickLabel?: string \| undefined; gridLine?: string \| undefined; line?: string \| undefined; tickMark?: string \| undefined; } \| undefined; style?: CSSProperties \| undefined; styles?: { root?: CSSProperties \| undefined; label?: CSSProperties \| undefined; tickLabel?: CSSProperties \| undefined; gridLine?: CSSProperties \| undefined; line?: CSSProperties \| undefined; tickMark?: CSSProperties \| undefined; } \| undefined; GridLineComponent?: LineComponent \| undefined; LineComponent?: LineComponent \| undefined; TickMarkLineComponent?: LineComponent \| undefined; tickLabelFormatter?: ((value: number) => ChartTextChildren) \| undefined; TickLabelComponent?: AxisTickLabelComponent \| undefined; } & { axisId?: string \| undefined; position?: left \| right \| undefined; width?: number \| undefined; }) \| undefined` | No | `-` | Configuration for y-axis. Accepts axis config and axis props. To show the axis, set showYAxis to true. |
|
|
1134
1134
|
| `zIndex` | `inherit \| auto \| revert \| -moz-initial \| initial \| revert-layer \| unset` | No | `-` | - |
|
|
1135
1135
|
|
|
1136
1136
|
|
|
@@ -2052,8 +2052,8 @@ function ForecastAssetPrice() {
|
|
|
2052
2052
|
| `userSelect` | `ResponsiveProp<text \| none \| all \| auto>` | No | `-` | - |
|
|
2053
2053
|
| `visibility` | `ResponsiveProp<hidden \| visible>` | No | `-` | - |
|
|
2054
2054
|
| `width` | `ResponsiveProp<Width<string \| number>>` | No | `-` | - |
|
|
2055
|
-
| `xAxis` | `(Partial<AxisConfigProps> &
|
|
2056
|
-
| `yAxis` | `(Partial<AxisConfigProps> &
|
|
2055
|
+
| `xAxis` | `(Partial<AxisConfigProps> & SharedProps & { label?: string; labelGap?: number \| undefined; minTickLabelGap?: number \| undefined; requestedTickCount?: number \| undefined; showGrid?: boolean \| undefined; showLine?: boolean \| undefined; showTickMarks?: boolean \| undefined; tickMarkSize?: number \| undefined; ticks?: number[] \| ((value: number) => boolean) \| undefined; tickMarkLabelGap?: number \| undefined; tickInterval?: number \| undefined; tickMinStep?: number \| undefined; tickMaxStep?: number \| undefined; } & { className?: string \| undefined; classNames?: { root?: string \| undefined; label?: string \| undefined; tickLabel?: string \| undefined; gridLine?: string \| undefined; line?: string \| undefined; tickMark?: string \| undefined; } \| undefined; style?: CSSProperties \| undefined; styles?: { root?: CSSProperties \| undefined; label?: CSSProperties \| undefined; tickLabel?: CSSProperties \| undefined; gridLine?: CSSProperties \| undefined; line?: CSSProperties \| undefined; tickMark?: CSSProperties \| undefined; } \| undefined; GridLineComponent?: LineComponent \| undefined; LineComponent?: LineComponent \| undefined; TickMarkLineComponent?: LineComponent \| undefined; tickLabelFormatter?: ((value: number) => ChartTextChildren) \| undefined; TickLabelComponent?: AxisTickLabelComponent \| undefined; } & { position?: top \| bottom \| undefined; height?: number \| undefined; }) \| undefined` | No | `-` | Configuration for x-axis. Accepts axis config and axis props. To show the axis, set showXAxis to true. |
|
|
2056
|
+
| `yAxis` | `(Partial<AxisConfigProps> & SharedProps & { label?: string; labelGap?: number \| undefined; minTickLabelGap?: number \| undefined; requestedTickCount?: number \| undefined; showGrid?: boolean \| undefined; showLine?: boolean \| undefined; showTickMarks?: boolean \| undefined; tickMarkSize?: number \| undefined; ticks?: number[] \| ((value: number) => boolean) \| undefined; tickMarkLabelGap?: number \| undefined; tickInterval?: number \| undefined; tickMinStep?: number \| undefined; tickMaxStep?: number \| undefined; } & { className?: string \| undefined; classNames?: { root?: string \| undefined; label?: string \| undefined; tickLabel?: string \| undefined; gridLine?: string \| undefined; line?: string \| undefined; tickMark?: string \| undefined; } \| undefined; style?: CSSProperties \| undefined; styles?: { root?: CSSProperties \| undefined; label?: CSSProperties \| undefined; tickLabel?: CSSProperties \| undefined; gridLine?: CSSProperties \| undefined; line?: CSSProperties \| undefined; tickMark?: CSSProperties \| undefined; } \| undefined; GridLineComponent?: LineComponent \| undefined; LineComponent?: LineComponent \| undefined; TickMarkLineComponent?: LineComponent \| undefined; tickLabelFormatter?: ((value: number) => ChartTextChildren) \| undefined; TickLabelComponent?: AxisTickLabelComponent \| undefined; } & { axisId?: string \| undefined; position?: left \| right \| undefined; width?: number \| undefined; }) \| undefined` | No | `-` | Configuration for y-axis. Accepts axis config and axis props. To show the axis, set showYAxis to true. |
|
|
2057
2057
|
| `zIndex` | `inherit \| auto \| revert \| -moz-initial \| initial \| revert-layer \| unset` | No | `-` | - |
|
|
2058
2058
|
|
|
2059
2059
|
|
|
@@ -567,53 +567,65 @@ function PriorityContent() {
|
|
|
567
567
|
Without helper text (top-only layout):
|
|
568
568
|
|
|
569
569
|
```text
|
|
570
|
-
|
|
571
|
-
β root (Box)
|
|
572
|
-
|
|
573
|
-
ββ pressable
|
|
574
|
-
|
|
575
|
-
βββ contentContainer & mainContent (HStack)
|
|
576
|
-
βββ βββββββ
|
|
577
|
-
βββ βmediaβ β
|
|
578
|
-
βββ β β β
|
|
579
|
-
βββ β β β β
|
|
580
|
-
βββ β β β
|
|
581
|
-
βββ β β β
|
|
582
|
-
βββ β β β β
|
|
583
|
-
βββ β β β
|
|
584
|
-
βββ
|
|
585
|
-
|
|
586
|
-
|
|
587
|
-
|
|
570
|
+
βββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ
|
|
571
|
+
β root (Box) β
|
|
572
|
+
βββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ
|
|
573
|
+
ββ pressable ββ
|
|
574
|
+
βββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ
|
|
575
|
+
βββ contentContainer & mainContent (HStack) βββ
|
|
576
|
+
βββ βββββββ ββββββββββββββββββββββββββββββββ ββββββββββββββ ββββββββββββββ βββββββββββ βββ
|
|
577
|
+
βββ βmediaβ β titleStackContainer (Box) β βintermediaryβ β end β βaccessoryβ βββ
|
|
578
|
+
βββ β β β ββββββββββββββββββββββββββββ β β β β (detail β β β βββ
|
|
579
|
+
βββ β β β β titleStack (VStack) β β β β β or β β β βββ
|
|
580
|
+
βββ β β β β ββββββββββββ β β β β β action) β β β βββ
|
|
581
|
+
βββ β β β β β title β β β β β β β β β βββ
|
|
582
|
+
βββ β β β β ββββββββββββ β β β β β β β β βββ
|
|
583
|
+
βββ β β β β ββββββββββββ β β β β β β β β βββ
|
|
584
|
+
βββ β β β β β subtitle β β β β β β β β β βββ
|
|
585
|
+
βββ β β β β ββββββββββββ β β β β β β β β βββ
|
|
586
|
+
βββ β β β β ββββββββββββββ β β β β β β β β βββ
|
|
587
|
+
βββ β β β β β descriptionβ β β β β β β β β βββ
|
|
588
|
+
βββ β β β β ββββββββββββββ β β β β β β β β βββ
|
|
589
|
+
βββ β β β ββββββββββββββββββββββββββββ β β β β β β β βββ
|
|
590
|
+
βββ βββββββ ββββββββββββββββββββββββββββββββ ββββββββββββββ ββββββββββββββ βββββββββββ βββ
|
|
591
|
+
βββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ
|
|
592
|
+
βββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ
|
|
593
|
+
βββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ
|
|
588
594
|
```
|
|
589
595
|
|
|
590
596
|
With helper text (top + bottom layout):
|
|
591
597
|
|
|
592
598
|
```text
|
|
593
|
-
|
|
594
|
-
β root (Box)
|
|
595
|
-
|
|
596
|
-
ββ pressable
|
|
597
|
-
|
|
598
|
-
βββ contentContainer (VStack)
|
|
599
|
-
|
|
600
|
-
ββββ mainContent (HStack)
|
|
601
|
-
ββββ βββββββ
|
|
602
|
-
ββββ βmediaβ β
|
|
603
|
-
ββββ β β β
|
|
604
|
-
ββββ β β β β
|
|
605
|
-
ββββ β β β
|
|
606
|
-
ββββ β β β
|
|
607
|
-
ββββ β β β β
|
|
608
|
-
ββββ β β β
|
|
609
|
-
ββββ
|
|
610
|
-
|
|
611
|
-
|
|
612
|
-
ββββ
|
|
613
|
-
|
|
614
|
-
|
|
615
|
-
|
|
616
|
-
|
|
599
|
+
βββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ
|
|
600
|
+
β root (Box) β
|
|
601
|
+
βββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ
|
|
602
|
+
ββ pressable ββ
|
|
603
|
+
βββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ
|
|
604
|
+
βββ contentContainer (VStack) βββ
|
|
605
|
+
βββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ
|
|
606
|
+
ββββ mainContent (HStack) ββββ
|
|
607
|
+
ββββ βββββββ ββββββββββββββββββββββββββββββββ ββββββββββββββ ββββββββββββββ βββββββββββ ββββ
|
|
608
|
+
ββββ βmediaβ β titleStackContainer (Box) β βintermediaryβ β end β βaccessoryβ ββββ
|
|
609
|
+
ββββ β β β ββββββββββββββββββββββββββββ β β β β (detail β β β ββββ
|
|
610
|
+
ββββ β β β β titleStack (VStack) β β β β β or β β β ββββ
|
|
611
|
+
ββββ β β β β ββββββββββββ β β β β β action) β β β ββββ
|
|
612
|
+
ββββ β β β β β title β β β β β β β β β ββββ
|
|
613
|
+
ββββ β β β β ββββββββββββ β β β β β β β β ββββ
|
|
614
|
+
ββββ β β β β ββββββββββββ β β β β β β β β ββββ
|
|
615
|
+
ββββ β β β β β subtitle β β β β β β β β β ββββ
|
|
616
|
+
ββββ β β β β ββββββββββββ β β β β β β β β ββββ
|
|
617
|
+
ββββ β β β β ββββββββββββββ β β β β β β β β ββββ
|
|
618
|
+
ββββ β β β β β descriptionβ β β β β β β β β ββββ
|
|
619
|
+
ββββ β β β β ββββββββββββββ β β β β β β β β ββββ
|
|
620
|
+
ββββ β β β ββββββββββββββββββββββββββββ β β β β β β β ββββ
|
|
621
|
+
ββββ βββββββ ββββββββββββββββββββββββββββββββ ββββββββββββββ ββββββββββββββ βββββββββββ ββββ
|
|
622
|
+
βββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ
|
|
623
|
+
βββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ
|
|
624
|
+
ββββ helperText ββββ
|
|
625
|
+
βββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ
|
|
626
|
+
βββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ
|
|
627
|
+
βββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ
|
|
628
|
+
βββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ
|
|
617
629
|
```
|
|
618
630
|
|
|
619
631
|
Mapping to `styles` / `classNames` keys:
|
|
@@ -622,7 +634,9 @@ Mapping to `styles` / `classNames` keys:
|
|
|
622
634
|
- pressable: interactive overlay when `href` / `onClick` keyboard handlers are present
|
|
623
635
|
- contentContainer: container around top and optional bottom content
|
|
624
636
|
- mainContent: inner horizontal layout that holds the main pieces
|
|
625
|
-
-
|
|
637
|
+
- titleStackContainer: wrapper around the title stack (controls flex behavior)
|
|
638
|
+
- titleStack: stacked text column (title/subtitle/description)
|
|
639
|
+
- title/subtitle/description: individual text nodes within `titleStack`
|
|
626
640
|
- media: leading media container
|
|
627
641
|
- intermediary: middle container between main and end
|
|
628
642
|
- end: container for `detail` / `subdetail` or `end` prop you pass in
|
|
@@ -723,7 +737,7 @@ Mapping to `styles` / `classNames` keys:
|
|
|
723
737
|
| `bottomContent` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | The content to display below the main cell content |
|
|
724
738
|
| `children` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | - |
|
|
725
739
|
| `className` | `string \| undefined` | No | `-` | - |
|
|
726
|
-
| `classNames` | `{ root?: string; media?: string \| undefined; intermediary?: string \| undefined; end?: string \| undefined; accessory?: string \| undefined; contentContainer?: string \| undefined; pressable?: string \| undefined; mainContent?: string \| undefined; helperText?: string \| undefined; title?: string \| undefined; subtitle?: string \| undefined; description?: string \| undefined; } \| undefined` | No | `-` | Class names for default subcomponents. Ignored when the corresponding xxNode prop is used. |
|
|
740
|
+
| `classNames` | `{ root?: string; media?: string \| undefined; intermediary?: string \| undefined; end?: string \| undefined; accessory?: string \| undefined; contentContainer?: string \| undefined; pressable?: string \| undefined; titleStack?: string \| undefined; titleStackContainer?: string \| undefined; mainContent?: string \| undefined; helperText?: string \| undefined; title?: string \| undefined; subtitle?: string \| undefined; description?: string \| undefined; } \| undefined` | No | `-` | Class names for default subcomponents. Ignored when the corresponding xxNode prop is used. |
|
|
727
741
|
| `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 | `-` | - |
|
|
728
742
|
| `columnGap` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
|
|
729
743
|
| `compact` | `boolean` | No | `-` | - |
|
|
@@ -1000,7 +1014,7 @@ Mapping to `styles` / `classNames` keys:
|
|
|
1000
1014
|
| `spacingVariant` | `normal \| compact \| condensed` | No | `'normal'` | Spacing variant configuration. Deprecated value: compact. Prefer condensed. When spacingVariant=normal: 1. min-height is 80px 2. padding is var(--space-2) var(--space-3) 3. border-radius is var(--borderRadius-200) 4. when there is a description, titles numberOfLines={1} otherwise titles numberOfLines={2} 5. description and subdetail have font body When spacingVariant=compact: 1. same as spacingVariant=normal, except min-height is 40px When spacingVariant=condensed: 1. min-height is undefined 2. padding is var(--space-1) var(--space-2) 3. border-radius is --borderRadius-0 4. titles numberOfLines={2} 5. description and subdetail have font label2 |
|
|
1001
1015
|
| `spellCheck` | `Booleanish \| undefined` | No | `-` | - |
|
|
1002
1016
|
| `style` | `CSSProperties` | No | `-` | - |
|
|
1003
|
-
| `styles` | `{ root?: CSSProperties; media?: CSSProperties \| undefined; intermediary?: CSSProperties \| undefined; end?: CSSProperties \| undefined; accessory?: CSSProperties \| undefined; contentContainer?: CSSProperties \| undefined; pressable?: CSSProperties \| undefined; mainContent?: CSSProperties \| undefined; helperText?: CSSProperties \| undefined; title?: CSSProperties \| undefined; subtitle?: CSSProperties \| undefined; description?: CSSProperties \| undefined; } \| undefined` | No | `-` | Styles for default subcomponents. Ignored when the corresponding xxNode prop is used. |
|
|
1017
|
+
| `styles` | `{ root?: CSSProperties; media?: CSSProperties \| undefined; intermediary?: CSSProperties \| undefined; end?: CSSProperties \| undefined; accessory?: CSSProperties \| undefined; contentContainer?: CSSProperties \| undefined; pressable?: CSSProperties \| undefined; titleStack?: CSSProperties \| undefined; titleStackContainer?: CSSProperties \| undefined; mainContent?: CSSProperties \| undefined; helperText?: CSSProperties \| undefined; title?: CSSProperties \| undefined; subtitle?: CSSProperties \| undefined; description?: CSSProperties \| undefined; } \| undefined` | No | `-` | Styles for default subcomponents. Ignored when the corresponding xxNode prop is used. |
|
|
1004
1018
|
| `subdetail` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | Subdetail providing more information. This prop is only intended to accept a string or Text component; other use cases, while allowed, are not supported and may result in unexpected behavior. For arbitrary content, use subdetailNode. |
|
|
1005
1019
|
| `subdetailFont` | `ResponsiveProp<FontFamily \| inherit>` | No | `-` | Font to apply to the subdetail text. |
|
|
1006
1020
|
| `subdetailNode` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | React node to render subdetail. Takes precedence over subdetail. |
|
|
@@ -70,7 +70,7 @@ function DefaultSelect() {
|
|
|
70
70
|
| `borderedVertical` | `boolean` | No | `-` | Add a border to the top and bottom sides of the box. |
|
|
71
71
|
| `bottom` | `ResponsiveProp<Bottom<string \| number>>` | No | `-` | - |
|
|
72
72
|
| `bottomContent` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | The content to display below the main cell content |
|
|
73
|
-
| `classNames` | `{ root?: string; contentContainer?: string \| undefined; topContent?: string \| undefined; bottomContent?: string \| undefined; pressable?: string \| undefined; media?: string \| undefined; intermediary?: string \| undefined; end?: string \| undefined; accessory?: string \| undefined; } \| undefined` | No | `-` | Class names for the components |
|
|
73
|
+
| `classNames` | `{ root?: string; contentContainer?: string \| undefined; topContent?: string \| undefined; bottomContent?: string \| undefined; pressable?: string \| undefined; media?: string \| undefined; childrenContainer?: string \| undefined; intermediary?: string \| undefined; end?: string \| undefined; accessory?: string \| undefined; } \| undefined` | No | `-` | Class names for the components |
|
|
74
74
|
| `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 | `-` | - |
|
|
75
75
|
| `columnGap` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
|
|
76
76
|
| `compact` | `boolean` | No | `-` | - |
|
|
@@ -149,7 +149,7 @@ function DefaultSelect() {
|
|
|
149
149
|
| `shouldOverflow` | `boolean` | No | `-` | - |
|
|
150
150
|
| `shouldTruncate` | `boolean` | No | `true` | Controls whether the main content should truncate with an ellipsis. Defaults to true (truncates) when not provided. |
|
|
151
151
|
| `style` | `CSSProperties` | No | `-` | - |
|
|
152
|
-
| `styles` | `{ root?: CSSProperties; contentContainer?: CSSProperties \| undefined; topContent?: CSSProperties \| undefined; bottomContent?: CSSProperties \| undefined; pressable?: CSSProperties \| undefined; media?: CSSProperties \| undefined; intermediary?: CSSProperties \| undefined; end?: CSSProperties \| undefined; accessory?: CSSProperties \| undefined; } \| undefined` | No | `-` | Styles for the components |
|
|
152
|
+
| `styles` | `{ root?: CSSProperties; contentContainer?: CSSProperties \| undefined; topContent?: CSSProperties \| undefined; bottomContent?: CSSProperties \| undefined; pressable?: CSSProperties \| undefined; media?: CSSProperties \| undefined; childrenContainer?: CSSProperties \| undefined; intermediary?: CSSProperties \| undefined; end?: CSSProperties \| undefined; accessory?: CSSProperties \| undefined; } \| undefined` | No | `-` | Styles for the components |
|
|
153
153
|
| `tabIndex` | `number` | No | `-` | Necessary to control roving tabindex for accessibility https://www.w3.org/TR/wai-aria-practices/#kbd_roving_tabindex |
|
|
154
154
|
| `testID` | `string` | No | `-` | Used to locate this element in unit and end-to-end tests. Under the hood, testID translates to data-testid on Web. On Mobile, testID stays the same - testID |
|
|
155
155
|
| `textAlign` | `ResponsiveProp<center \| start \| end \| justify>` | No | `-` | - |
|
|
@@ -672,6 +672,7 @@ function CustomTickLabelExample() {
|
|
|
672
672
|
| `showTickMarks` | `boolean` | No | `-` | Whether to show tick marks on the axis. |
|
|
673
673
|
| `style` | `CSSProperties` | No | `-` | Custom style for the axis. |
|
|
674
674
|
| `styles` | `{ root?: CSSProperties; label?: CSSProperties \| undefined; tickLabel?: CSSProperties \| undefined; gridLine?: CSSProperties \| undefined; line?: CSSProperties \| undefined; tickMark?: CSSProperties \| undefined; } \| undefined` | No | `-` | Custom styles for the axis. |
|
|
675
|
+
| `testID` | `string` | No | `-` | Used to locate this element in unit and end-to-end tests. Under the hood, testID translates to data-testid on Web. On Mobile, testID stays the same - testID |
|
|
675
676
|
| `tickInterval` | `number` | No | `32 (for x-axis)` | Interval at which to show ticks. When provided, calculates tick count based on available space. |
|
|
676
677
|
| `tickLabelFormatter` | `((value: number) => ChartTextChildren)` | No | `-` | Formatter function for axis tick values. Tick values will be wrapped in ChartText component. |
|
|
677
678
|
| `tickMarkLabelGap` | `number` | No | `2 for x-axis, 8 for y-axis` | Space between the axis tick mark and labels. If tick marks are not shown, this is the gap between the axis and the chart. |
|
|
@@ -580,6 +580,7 @@ function CustomTickLabelExample() {
|
|
|
580
580
|
| `showTickMarks` | `boolean` | No | `-` | Whether to show tick marks on the axis. |
|
|
581
581
|
| `style` | `CSSProperties` | No | `-` | Custom style for the axis. |
|
|
582
582
|
| `styles` | `{ root?: CSSProperties; label?: CSSProperties \| undefined; tickLabel?: CSSProperties \| undefined; gridLine?: CSSProperties \| undefined; line?: CSSProperties \| undefined; tickMark?: CSSProperties \| undefined; } \| undefined` | No | `-` | Custom styles for the axis. |
|
|
583
|
+
| `testID` | `string` | No | `-` | Used to locate this element in unit and end-to-end tests. Under the hood, testID translates to data-testid on Web. On Mobile, testID stays the same - testID |
|
|
583
584
|
| `tickInterval` | `number` | No | `32 (for x-axis)` | Interval at which to show ticks. When provided, calculates tick count based on available space. |
|
|
584
585
|
| `tickLabelFormatter` | `((value: number) => ChartTextChildren)` | No | `-` | Formatter function for axis tick values. Tick values will be wrapped in ChartText component. |
|
|
585
586
|
| `tickMarkLabelGap` | `number` | No | `2 for x-axis, 8 for y-axis` | Space between the axis tick mark and labels. If tick marks are not shown, this is the gap between the axis and the chart. |
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@coinbase/cds-mcp-server",
|
|
3
|
-
"version": "8.
|
|
3
|
+
"version": "8.36.1",
|
|
4
4
|
"description": "Coinbase Design System - MCP Server",
|
|
5
5
|
"repository": {
|
|
6
6
|
"type": "git",
|
|
@@ -29,10 +29,6 @@
|
|
|
29
29
|
"mcp-docs",
|
|
30
30
|
"CHANGELOG"
|
|
31
31
|
],
|
|
32
|
-
"peerDependencies": {
|
|
33
|
-
"react": "^18.3.1",
|
|
34
|
-
"react-dom": "^18.3.1"
|
|
35
|
-
},
|
|
36
32
|
"dependencies": {
|
|
37
33
|
"@inquirer/prompts": "^7.5.3",
|
|
38
34
|
"@modelcontextprotocol/sdk": "^1.13.1",
|
|
@@ -41,7 +37,6 @@
|
|
|
41
37
|
"devDependencies": {
|
|
42
38
|
"@babel/core": "^7.28.0",
|
|
43
39
|
"@babel/preset-env": "^7.28.0",
|
|
44
|
-
"@babel/preset-react": "^7.27.1",
|
|
45
40
|
"@babel/preset-typescript": "^7.27.1"
|
|
46
41
|
}
|
|
47
42
|
}
|