@coinbase/cds-mcp-server 8.29.0 → 8.30.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.
Files changed (10) hide show
  1. package/CHANGELOG.md +4 -0
  2. package/mcp-docs/mobile/components/SelectChipAlpha.txt +87 -0
  3. package/mcp-docs/mobile/components/TabbedChipsAlpha.txt +30 -0
  4. package/mcp-docs/web/components/Chip.txt +1 -1
  5. package/mcp-docs/web/components/InputChip.txt +1 -1
  6. package/mcp-docs/web/components/MediaChip.txt +1 -1
  7. package/mcp-docs/web/components/SelectChip.txt +1 -1
  8. package/mcp-docs/web/components/SelectChipAlpha.txt +86 -2
  9. package/mcp-docs/web/components/TabbedChipsAlpha.txt +35 -1
  10. package/package.json +1 -1
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.30.0 ((12/12/2025, 02:53 PM PST))
12
+
13
+ This is an artificial version bump with no new change.
14
+
11
15
  ## 8.29.0 ((12/12/2025, 01:12 PM PST))
12
16
 
13
17
  This is an artificial version bump with no new change.
package/mcp-docs/mobile/components/SelectChipAlpha.txt CHANGED
@@ -289,6 +289,91 @@ function ExampleDescriptions() {
289
289
  }
290
290
  ```
291
291
 
292
+ ### With display value
293
+
294
+ Use the `displayValue` prop to override the displayed value and avoid truncation, especially in multi-select scenarios where multiple option labels might be too long to display.
295
+
296
+ ```tsx
297
+ function ExampleDisplayValue() {
298
+ const exampleOptions = [
299
+ { value: '1', label: 'Option 1' },
300
+ { value: '2', label: 'Option 2' },
301
+ { value: '3', label: 'Option 3' },
302
+ { value: '4', label: 'Option 4' },
303
+ { value: '5', label: 'Option 5' },
304
+ ];
305
+ const { value, onChange } = useMultiSelect({ initialValue: [] });
306
+ const displayValue =
307
+ Array.isArray(value) && value.length > 0
308
+ ? `${value.length} ${value.length === 1 ? 'option' : 'options'} selected`
309
+ : undefined;
310
+ return (
311
+ <SelectChip
312
+ accessibilityLabel="Select multiple values"
313
+ displayValue={displayValue}
314
+ onChange={onChange}
315
+ options={exampleOptions}
316
+ placeholder="Choose options"
317
+ type="multi"
318
+ value={value}
319
+ />
320
+ );
321
+ }
322
+ ```
323
+
324
+ ### With max width
325
+
326
+ ```tsx
327
+ function ExampleMaxWidth() {
328
+ const exampleOptions = [
329
+ { value: '1', label: 'Very Long Option Name That Exceeds Default Width' },
330
+ { value: '2', label: 'Another Extremely Long Option Label' },
331
+ { value: '3', label: 'Short' },
332
+ { value: '4', label: 'Medium Length Option' },
333
+ ];
334
+ const [value, setValue] = useState<string | null>(null);
335
+ return (
336
+ <VStack gap={2}>
337
+ <VStack gap={1}>
338
+ <Text>Default maxWidth (200px):</Text>
339
+ <SelectChip
340
+ accessibilityLabel="Select a value"
341
+ label="Select a value"
342
+ onChange={setValue}
343
+ options={exampleOptions}
344
+ placeholder="Choose an option"
345
+ value={value}
346
+ />
347
+ </VStack>
348
+ <VStack gap={1}>
349
+ <Text>Custom maxWidth (150px):</Text>
350
+ <SelectChip
351
+ accessibilityLabel="Select a value"
352
+ label="Select a value"
353
+ maxWidth={150}
354
+ onChange={setValue}
355
+ options={exampleOptions}
356
+ placeholder="Choose an option"
357
+ value={value}
358
+ />
359
+ </VStack>
360
+ <VStack gap={1}>
361
+ <Text>No maxWidth constraint:</Text>
362
+ <SelectChip
363
+ accessibilityLabel="Select a value"
364
+ label="Select a value"
365
+ maxWidth="100%"
366
+ onChange={setValue}
367
+ options={exampleOptions}
368
+ placeholder="Choose an option"
369
+ value={value}
370
+ />
371
+ </VStack>
372
+ </VStack>
373
+ );
374
+ }
375
+ ```
376
+
292
377
  ### Disabled
293
378
 
294
379
  ```tsx
@@ -342,6 +427,7 @@ function ExampleDisabled() {
342
427
  | `defaultOpen` | `boolean` | No | `-` | Initial open state when component mounts (uncontrolled mode) |
343
428
  | `disableClickOutsideClose` | `boolean` | No | `-` | Whether clicking outside the dropdown should close it |
344
429
  | `disabled` | `boolean` | No | `false` | Toggles input interactability and opacity |
430
+ | `displayValue` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | Override the displayed value in the chip control. Useful for avoiding truncation, especially in multi-select scenarios where multiple option labels might be too long to display. When provided, this value takes precedence over the default label generation. |
345
431
  | `emptyOptionsLabel` | `string` | No | `-` | Label displayed when there are no options available |
346
432
  | `end` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | End-aligned content (e.g., value, status). Replaces the deprecated detail prop. |
347
433
  | `endNode` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | Adds content to the end of the inner input. Refer to diagram for location of endNode in InputStack component |
@@ -350,6 +436,7 @@ function ExampleDisabled() {
350
436
  | `invertColorScheme` | `boolean` | No | `false` | Invert the foreground and background colors to emphasize the Chip. Depending on your theme, it may be dangerous to use this prop in conjunction with transparentWhileInactive. |
351
437
  | `label` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | Label displayed above the control |
352
438
  | `maxSelectedOptionsToShow` | `number` | No | `-` | Maximum number of selected options to show before truncating |
439
+ | `maxWidth` | `string \| number` | No | `200` | If text content overflows, it will get truncated with an ellipsis. |
353
440
  | `media` | `ReactElement` | No | `-` | Media rendered at the start of the cell (icon, avatar, image, etc). |
354
441
  | `numberOfLines` | `number` | No | `1` | How many lines the text in the chip will be broken into. |
355
442
  | `open` | `boolean` | No | `-` | Controlled open state of the dropdown |
package/mcp-docs/mobile/components/TabbedChipsAlpha.txt CHANGED
@@ -57,6 +57,35 @@ function ExampleManyTabs() {
57
57
  }
58
58
  ```
59
59
 
60
+ ### With autoScrollOffset
61
+
62
+ :::tip Auto-scroll offset
63
+ The `autoScrollOffset` prop controls the X position offset when auto-scrolling to the active tab. This prevents the active tab from being covered by the overflow gradient on the left side. Try clicking tabs near the edges to see the difference.
64
+ :::
65
+
66
+ ```tsx
67
+ function ExampleAutoScrollOffset() {
68
+ const tabs = Array.from({ length: 25 }).map((_, i) => ({
69
+ id: `tab_${i + 1}`,
70
+ label: `Tab ${i + 1}`,
71
+ }));
72
+ const [activeTab, setActiveTab] = useState(tabs[0]);
73
+ return (
74
+ <VStack gap={2}>
75
+ <Text>Default offset (30px)</Text>
76
+ <TabbedChips activeTab={activeTab} onChange={setActiveTab} tabs={tabs} />
77
+ <Text>Custom offset (60px)</Text>
78
+ <TabbedChips
79
+ activeTab={activeTab}
80
+ onChange={setActiveTab}
81
+ tabs={tabs}
82
+ autoScrollOffset={60}
83
+ />
84
+ </VStack>
85
+ );
86
+ }
87
+ ```
88
+
60
89
  ### Long text tabs
61
90
 
62
91
  ```tsx
@@ -163,6 +192,7 @@ render(<Example />);
163
192
  | `tabs` | `TabbedChipProps<T>[]` | Yes | `-` | - |
164
193
  | `TabComponent` | `FC<TabbedChipProps<T>>` | No | `-` | - |
165
194
  | `TabsActiveIndicatorComponent` | `TabsActiveIndicatorComponent` | No | `-` | - |
195
+ | `autoScrollOffset` | `number` | No | `30` | X position offset when auto-scrolling to active tab (to avoid active tab being covered by the overflow gradient on the left side, default: 30px) |
166
196
  | `compact` | `boolean` | No | `false` | Turn on to use a compact Chip component for each tab. |
167
197
  | `disabled` | `boolean` | No | `-` | Disable interactions on all the tabs. |
168
198
  | `gap` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `1` | The spacing between Tabs |
package/mcp-docs/web/components/Chip.txt CHANGED
@@ -158,7 +158,7 @@ function Example() {
158
158
  | `marginX` | `ResponsiveProp<0 \| -5 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1 \| -1.5 \| -2 \| -3 \| -4 \| -6 \| -7 \| -8 \| -9>` | No | `-` | - |
159
159
  | `marginY` | `ResponsiveProp<0 \| -5 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1 \| -1.5 \| -2 \| -3 \| -4 \| -6 \| -7 \| -8 \| -9>` | No | `-` | - |
160
160
  | `maxHeight` | `ResponsiveProp<MaxHeight<string \| number>>` | No | `-` | - |
161
- | `maxWidth` | `((MaxWidth<string \| number> \| { base?: MaxWidth<string \| number>; phone?: MaxWidth<string \| number> \| undefined; tablet?: MaxWidth<string \| number> \| undefined; desktop?: MaxWidth<string \| number> \| undefined; }) & DimensionValue) \| undefined` | No | `200` | If text content overflows, it will get truncated with an ellipsis. |
161
+ | `maxWidth` | `ResponsiveProp<MaxWidth<string \| number>>` | No | `200` | If text content overflows, it will get truncated with an ellipsis. |
162
162
  | `minHeight` | `ResponsiveProp<MinHeight<string \| number>>` | No | `-` | - |
163
163
  | `minWidth` | `ResponsiveProp<MinWidth<string \| number>>` | No | `-` | - |
164
164
  | `noScaleOnPress` | `boolean` | No | `-` | Dont scale element on press. |
package/mcp-docs/web/components/InputChip.txt CHANGED
@@ -153,7 +153,7 @@ function Example() {
153
153
  | `marginX` | `ResponsiveProp<0 \| -5 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1 \| -1.5 \| -2 \| -3 \| -4 \| -6 \| -7 \| -8 \| -9>` | No | `-` | - |
154
154
  | `marginY` | `ResponsiveProp<0 \| -5 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1 \| -1.5 \| -2 \| -3 \| -4 \| -6 \| -7 \| -8 \| -9>` | No | `-` | - |
155
155
  | `maxHeight` | `ResponsiveProp<MaxHeight<string \| number>>` | No | `-` | - |
156
- | `maxWidth` | `((MaxWidth<string \| number> \| { base?: MaxWidth<string \| number>; phone?: MaxWidth<string \| number> \| undefined; tablet?: MaxWidth<string \| number> \| undefined; desktop?: MaxWidth<string \| number> \| undefined; }) & DimensionValue) \| undefined` | No | `200` | If text content overflows, it will get truncated with an ellipsis. |
156
+ | `maxWidth` | `ResponsiveProp<MaxWidth<string \| number>>` | No | `200` | If text content overflows, it will get truncated with an ellipsis. |
157
157
  | `minHeight` | `ResponsiveProp<MinHeight<string \| number>>` | No | `-` | - |
158
158
  | `minWidth` | `ResponsiveProp<MinWidth<string \| number>>` | No | `-` | - |
159
159
  | `noScaleOnPress` | `boolean` | No | `-` | Dont scale element on press. |
package/mcp-docs/web/components/MediaChip.txt CHANGED
@@ -234,7 +234,7 @@ You can override the automatic spacing with custom values if needed.
234
234
  | `marginX` | `ResponsiveProp<0 \| -5 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1 \| -1.5 \| -2 \| -3 \| -4 \| -6 \| -7 \| -8 \| -9>` | No | `-` | - |
235
235
  | `marginY` | `ResponsiveProp<0 \| -5 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1 \| -1.5 \| -2 \| -3 \| -4 \| -6 \| -7 \| -8 \| -9>` | No | `-` | - |
236
236
  | `maxHeight` | `ResponsiveProp<MaxHeight<string \| number>>` | No | `-` | - |
237
- | `maxWidth` | `((MaxWidth<string \| number> \| { base?: MaxWidth<string \| number>; phone?: MaxWidth<string \| number> \| undefined; tablet?: MaxWidth<string \| number> \| undefined; desktop?: MaxWidth<string \| number> \| undefined; }) & DimensionValue) \| undefined` | No | `200` | If text content overflows, it will get truncated with an ellipsis. |
237
+ | `maxWidth` | `ResponsiveProp<MaxWidth<string \| number>>` | No | `200` | If text content overflows, it will get truncated with an ellipsis. |
238
238
  | `minHeight` | `ResponsiveProp<MinHeight<string \| number>>` | No | `-` | - |
239
239
  | `minWidth` | `ResponsiveProp<MinWidth<string \| number>>` | No | `-` | - |
240
240
  | `noScaleOnPress` | `boolean` | No | `-` | Dont scale element on press. |
package/mcp-docs/web/components/SelectChip.txt CHANGED
@@ -268,7 +268,7 @@ function SelectChipExample() {
268
268
  | `marginX` | `ResponsiveProp<0 \| -5 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1 \| -1.5 \| -2 \| -3 \| -4 \| -6 \| -7 \| -8 \| -9>` | No | `-` | - |
269
269
  | `marginY` | `ResponsiveProp<0 \| -5 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1 \| -1.5 \| -2 \| -3 \| -4 \| -6 \| -7 \| -8 \| -9>` | No | `-` | - |
270
270
  | `maxHeight` | `((MaxHeight<string \| number> \| { base?: MaxHeight<string \| number>; phone?: MaxHeight<string \| number> \| undefined; tablet?: MaxHeight<string \| number> \| undefined; desktop?: MaxHeight<string \| number> \| undefined; }) & MaxHeight<string \| number>) \| undefined` | No | `300` | Can optionally pass a maxHeight. |
271
- | `maxWidth` | `(((MaxWidth<string \| number> \| { base?: MaxWidth<string \| number>; phone?: MaxWidth<string \| number> \| undefined; tablet?: MaxWidth<string \| number> \| undefined; desktop?: MaxWidth<string \| number> \| undefined; }) & DimensionValue) & MaxWidth<string \| number>) \| undefined` | No | `200` | If text content overflows, it will get truncated with an ellipsis. Maximum width of input as a percentage string or number converted to pixels. |
271
+ | `maxWidth` | `((MaxWidth<string \| number> \| { base?: MaxWidth<string \| number>; phone?: MaxWidth<string \| number> \| undefined; tablet?: MaxWidth<string \| number> \| undefined; desktop?: MaxWidth<string \| number> \| undefined; }) & MaxWidth<string \| number>) \| undefined` | No | `200` | If text content overflows, it will get truncated with an ellipsis. Maximum width of input as a percentage string or number converted to pixels. |
272
272
  | `minHeight` | `ResponsiveProp<MinHeight<string \| number>>` | No | `-` | - |
273
273
  | `minWidth` | `((MinWidth<string \| number> \| { base?: MinWidth<string \| number>; phone?: MinWidth<string \| number> \| undefined; tablet?: MinWidth<string \| number> \| undefined; desktop?: MinWidth<string \| number> \| undefined; }) & MinWidth<string \| number>) \| undefined` | No | `-` | Minimum width of input as a percentage string or number converted to pixels. |
274
274
  | `numberOfLines` | `number` | No | `1` | How many lines the text in the chip will be broken into. |
package/mcp-docs/web/components/SelectChipAlpha.txt CHANGED
@@ -273,6 +273,88 @@ function ExampleDescriptions() {
273
273
  }
274
274
  ```
275
275
 
276
+ ### With display value
277
+
278
+ Use the `displayValue` prop to override the displayed value and avoid truncation, especially in multi-select scenarios where multiple option labels might be too long to display.
279
+
280
+ ```jsx live
281
+ function ExampleDisplayValue() {
282
+ const exampleOptions = [
283
+ { value: '1', label: 'Option 1' },
284
+ { value: '2', label: 'Option 2' },
285
+ { value: '3', label: 'Option 3' },
286
+ { value: '4', label: 'Option 4' },
287
+ { value: '5', label: 'Option 5' },
288
+ ];
289
+ const { value, onChange } = useMultiSelect({ initialValue: [] });
290
+ const displayValue =
291
+ Array.isArray(value) && value.length > 0
292
+ ? `${value.length} ${value.length === 1 ? 'option' : 'options'} selected`
293
+ : undefined;
294
+ return (
295
+ <SelectChip
296
+ controlAccessibilityLabel="Select multiple values"
297
+ displayValue={displayValue}
298
+ onChange={onChange}
299
+ options={exampleOptions}
300
+ placeholder="Choose options"
301
+ type="multi"
302
+ value={value}
303
+ />
304
+ );
305
+ }
306
+ ```
307
+
308
+ ### With max width
309
+
310
+ ```jsx live
311
+ function ExampleMaxWidth() {
312
+ const exampleOptions = [
313
+ { value: '1', label: 'Very Long Option Name That Exceeds Default Width' },
314
+ { value: '2', label: 'Another Extremely Long Option Label' },
315
+ { value: '3', label: 'Short' },
316
+ { value: '4', label: 'Medium Length Option' },
317
+ ];
318
+ const [value, setValue] = useState(null);
319
+ return (
320
+ <VStack gap={2}>
321
+ <VStack gap={1}>
322
+ <Text>Default maxWidth (200px):</Text>
323
+ <SelectChip
324
+ accessibilityLabel="Select a value"
325
+ onChange={setValue}
326
+ options={exampleOptions}
327
+ placeholder="Choose an option"
328
+ value={value}
329
+ />
330
+ </VStack>
331
+ <VStack gap={1}>
332
+ <Text>Custom maxWidth (150px):</Text>
333
+ <SelectChip
334
+ accessibilityLabel="Select a value"
335
+ maxWidth={150}
336
+ onChange={setValue}
337
+ options={exampleOptions}
338
+ placeholder="Choose an option"
339
+ value={value}
340
+ />
341
+ </VStack>
342
+ <VStack gap={1}>
343
+ <Text>No maxWidth constraint:</Text>
344
+ <SelectChip
345
+ accessibilityLabel="Select a value"
346
+ maxWidth="100%"
347
+ onChange={setValue}
348
+ options={exampleOptions}
349
+ placeholder="Choose an option"
350
+ value={value}
351
+ />
352
+ </VStack>
353
+ </VStack>
354
+ );
355
+ }
356
+ ```
357
+
276
358
  ### Disabled
277
359
 
278
360
  ```jsx live
@@ -285,7 +367,7 @@ function ExampleDisabled() {
285
367
  ];
286
368
  const [value, setValue] = useState('1');
287
369
  return (
288
- <div style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
370
+ <VStack gap={2}>
289
371
  <SelectChip
290
372
  disabled
291
373
  accessibilityLabel="Select a value"
@@ -302,7 +384,7 @@ function ExampleDisabled() {
302
384
  placeholder="Choose an option"
303
385
  value={value}
304
386
  />
305
- </div>
387
+ </VStack>
306
388
  );
307
389
  }
308
390
  ```
@@ -329,6 +411,7 @@ function ExampleDisabled() {
329
411
  | `defaultOpen` | `boolean` | No | `-` | Initial open state when component mounts (uncontrolled mode) |
330
412
  | `disableClickOutsideClose` | `boolean` | No | `-` | Whether clicking outside the dropdown should close it |
331
413
  | `disabled` | `boolean` | No | `false` | Toggles input interactability and opacity |
414
+ | `displayValue` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | Override the displayed value in the chip control. Useful for avoiding truncation, especially in multi-select scenarios where multiple option labels might be too long to display. When provided, this value takes precedence over the default label generation. |
332
415
  | `emptyOptionsLabel` | `string` | No | `-` | Label displayed when there are no options available |
333
416
  | `end` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | End-aligned content (e.g., value, status). Replaces the deprecated detail prop. |
334
417
  | `endNode` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | Adds content to the end of the inner input. Refer to diagram for location of endNode in InputStack component |
@@ -337,6 +420,7 @@ function ExampleDisabled() {
337
420
  | `invertColorScheme` | `boolean` | No | `false` | Invert the foreground and background colors to emphasize the Chip. Depending on your theme, it may be dangerous to use this prop in conjunction with transparentWhileInactive. |
338
421
  | `label` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | Label displayed above the control |
339
422
  | `maxSelectedOptionsToShow` | `number` | No | `-` | Maximum number of selected options to show before truncating |
423
+ | `maxWidth` | `ResponsiveProp<MaxWidth<string \| number>>` | No | `200` | If text content overflows, it will get truncated with an ellipsis. |
340
424
  | `media` | `ReactElement` | No | `-` | Media rendered at the start of the cell (icon, avatar, image, etc). |
341
425
  | `numberOfLines` | `number` | No | `1` | How many lines the text in the chip will be broken into. |
342
426
  | `open` | `boolean` | No | `-` | Controlled open state of the dropdown |
package/mcp-docs/web/components/TabbedChipsAlpha.txt CHANGED
@@ -27,7 +27,7 @@ function ExampleDefault() {
27
27
 
28
28
  ### Compact
29
29
 
30
- ```jsx live
30
+ ```jsx lived
31
31
  function ExampleCompactNoStart() {
32
32
  const tabs = [
33
33
  { id: 'all', label: 'All' },
@@ -57,6 +57,39 @@ function ExampleWithPaddles() {
57
57
  }
58
58
  ```
59
59
 
60
+ ### With autoScrollOffset
61
+
62
+ :::tip Auto-scroll offset
63
+ The `autoScrollOffset` prop controls the X position offset when auto-scrolling to the active tab. This prevents the active tab from being covered by the paddle on the left side. Try clicking tabs near the edges to see the difference.
64
+ :::
65
+
66
+ ```jsx live
67
+ function ExampleAutoScrollOffset() {
68
+ const tabs = Array.from({ length: 25 }).map((_, i) => ({
69
+ id: `tab_${i + 1}`,
70
+ label: `Tab ${i + 1}`,
71
+ }));
72
+ const [activeTab, setActiveTab] = useState(tabs[0]);
73
+ return (
74
+ <VStack gap={2}>
75
+ <Text as="p" font="body">
76
+ Default offset (50px)
77
+ </Text>
78
+ <TabbedChips activeTab={activeTab} onChange={setActiveTab} tabs={tabs} />
79
+ <Text as="p" font="body">
80
+ Custom offset (100px)
81
+ </Text>
82
+ <TabbedChips
83
+ activeTab={activeTab}
84
+ onChange={setActiveTab}
85
+ tabs={tabs}
86
+ autoScrollOffset={100}
87
+ />
88
+ </VStack>
89
+ );
90
+ }
91
+ ```
92
+
60
93
  ### With custom sized paddles
61
94
 
62
95
  :::tip Paddle styling
@@ -187,6 +220,7 @@ render(<Example />);
187
220
  | `tabs` | `TabbedChipProps<T>[]` | Yes | `-` | - |
188
221
  | `TabComponent` | `FC<TabbedChipProps<T>>` | No | `-` | - |
189
222
  | `TabsActiveIndicatorComponent` | `TabsActiveIndicatorComponent` | No | `-` | - |
223
+ | `autoScrollOffset` | `number` | No | `50` | X position offset when auto-scrolling to active tab (to avoid active tab being covered by the paddle on the left side, default: 50px) |
190
224
  | `background` | `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 | `-` | - |
191
225
  | `classNames` | `{ root?: string; scrollContainer?: string \| undefined; tabs?: string \| undefined; } \| undefined` | No | `-` | - |
192
226
  | `compact` | `boolean` | No | `false` | Turn on to use a compact Chip component for each tab. |
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@coinbase/cds-mcp-server",
3
- "version": "8.29.0",
3
+ "version": "8.30.0",
4
4
  "description": "Coinbase Design System - MCP Server",
5
5
  "repository": {
6
6
  "type": "git",