@coinbase/cds-mcp-server 8.23.0 → 8.24.0

package/CHANGELOG.md

@@ -8,6 +8,10 @@ All notable changes to this project will be documented in this file.
 
 <!-- template-start -->
 
+## 8.24.0 ((12/1/2025, 06:51 AM PST))
+
+This is an artificial version bump with no new change.
+
 ## 8.23.0 ((12/1/2025, 06:33 AM PST))
 
 This is an artificial version bump with no new change.

package/mcp-docs/mobile/components/DatePicker.txt

@@ -36,6 +36,40 @@ function Example() {
 }
 ```
 
+### Custom Label
+
+If you need to render a custom label (e.g. a label with a tooltip), you can use the `labelNode` prop.
+
+```jsx
+function Example() {
+  const [date, setDate] = useState(null);
+  const [error, setError] = useState(null);
+
+  return (
+    <DatePicker
+      date={date}
+      error={error}
+      onChangeDate={setDate}
+      onErrorDate={setError}
+      label="Birthdate"
+      labelNode={
+        <HStack alignItems="center" gap={1}>
+          <InputLabel>Birthdate</InputLabel>
+          <Tooltip content="This will be visible to other users.">
+            <Icon color="fgMuted" name="info" size="xs" />
+          </Tooltip>
+        </HStack>
+      }
+      calendarIconButtonAccessibilityLabel="Birthdate calendar"
+      nextArrowAccessibilityLabel="Next month"
+      previousArrowAccessibilityLabel="Previous month"
+      helperTextErrorIconAccessibilityLabel="Error"
+      invalidDateError="Please enter a valid date"
+    />
+  );
+}
+```
+
 ### Invalid dates
 
 Always provide the `invalidDateError` prop for when users type an impossible date like 99/99/2000.
@@ -420,6 +454,7 @@ function Example() {
 | `keyboardAppearance` | `light \| default \| dark` | No | `-` | Determines the color of the keyboard. |
 | `keyboardType` | `default \| url \| number-pad \| decimal-pad \| numeric \| email-address \| phone-pad \| visible-password \| ascii-capable \| numbers-and-punctuation \| name-phone-pad \| twitter \| web-search` | No | `-` | enum(default, numeric, email-address, ascii-capable, numbers-and-punctuation, url, number-pad, phone-pad, name-phone-pad, decimal-pad, twitter, web-search, visible-password) Determines which keyboard to open, e.g.numeric. The following values work across platforms: - default - numeric - email-address - phone-pad The following values work on iOS: - ascii-capable - numbers-and-punctuation - url - number-pad - name-phone-pad - decimal-pad - twitter - web-search The following values work on Android: - visible-password |
 | `label` | `string` | No | `-` | Short messageArea indicating purpose of input |
+| `labelNode` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | React node to render label. Takes precedence over label. |
 | `labelVariant` | `inside \| outside` | No | `'outside'` | The variant of the label. Only used when compact is not true. |
 | `lineBreakStrategyIOS` | `none \| standard \| hangul-word \| push-out` | No | `-` | Set line break strategy on iOS. |
 | `maxDate` | `Date` | No | `-` | Maximum date allowed to be selected, inclusive. Dates after the maxDate are disabled. All navigation to months after the maxDate is disabled. |

package/mcp-docs/mobile/components/SelectAlpha.txt

@@ -1131,6 +1131,39 @@ function CustomClassNamesExamples() {
 }
 ```
 
+### Custom Label
+
+If you need to render a custom label (e.g. a label with a tooltip), you can pass a React Node to the `label` prop.
+
+```jsx
+function CustomLabelExample() {
+  const [value, setValue] = useState('1');
+
+  const options = [
+    { value: '1', label: 'Option 1' },
+    { value: '2', label: 'Option 2' },
+    { value: '3', label: 'Option 3' },
+  ];
+
+  return (
+    <Select
+      label={
+        <HStack alignItems="center" gap={1}>
+          Custom Label
+          <Tooltip content="This will be visible to other users.">
+            <Icon color="fgMuted" name="info" size="xs" />
+          </Tooltip>
+        </HStack>
+      }
+      value={value}
+      onChange={setValue}
+      options={options}
+      placeholder="Select an option"
+    />
+  );
+}
+```
+
 ### Custom components
 
 Select is highly customizable. Use the _Component_ props to customize the various subcomponents in Select.

package/mcp-docs/mobile/components/TextInput.txt

@@ -323,6 +323,25 @@ When using the `inside` label variant, you should always include a `placeholder`
 />
 ```
 
+#### Custom Label
+
+If you need to render a custom label (e.g. a label with a tooltip), you can use the `labelNode` prop.
+
+```jsx
+<TextInput
+  label="Display name"
+  labelNode={
+    <HStack alignItems="center" gap={1}>
+      <InputLabel>Display name</InputLabel>
+      <Tooltip content="This will be visible to other users.">
+        <Icon active color="fg" name="info" size="xs" />
+      </Tooltip>
+    </HStack>
+  }
+  placeholder="Satoshi Nakamoto"
+/>
+```
+
 ### Example of Input Objects placed at the End
 
 Here are some examples and best practices when using end content in a TextField.
@@ -648,6 +667,7 @@ function TextInputKeyboardExample() {
 | `keyboardAppearance` | `light \| default \| dark` | No | `-` | Determines the color of the keyboard. |
 | `keyboardType` | `default \| url \| number-pad \| decimal-pad \| numeric \| email-address \| phone-pad \| visible-password \| ascii-capable \| numbers-and-punctuation \| name-phone-pad \| twitter \| web-search` | No | `-` | enum(default, numeric, email-address, ascii-capable, numbers-and-punctuation, url, number-pad, phone-pad, name-phone-pad, decimal-pad, twitter, web-search, visible-password) Determines which keyboard to open, e.g.numeric. The following values work across platforms: - default - numeric - email-address - phone-pad The following values work on iOS: - ascii-capable - numbers-and-punctuation - url - number-pad - name-phone-pad - decimal-pad - twitter - web-search The following values work on Android: - visible-password |
 | `label` | `string` | No | `-` | Short messageArea indicating purpose of input |
+| `labelNode` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | React node to render label. Takes precedence over label. |
 | `labelVariant` | `inside \| outside` | No | `'outside'` | The variant of the label. Only used when compact is not true. |
 | `lineBreakStrategyIOS` | `none \| standard \| hangul-word \| push-out` | No | `-` | Set line break strategy on iOS. |
 | `maxFontSizeMultiplier` | `number \| null` | No | `-` | Specifies largest possible scale a font can reach when allowFontScaling is enabled. Possible values: - null/undefined (default): inherit from the parent node or the global default (0) - 0: no max, ignore parent/global default - >= 1: sets the maxFontSizeMultiplier of this node to this value |

package/mcp-docs/web/components/DatePicker.txt

@@ -36,6 +36,40 @@ function Example() {
 }
 ```
 
+### Custom Label
+
+If you need to render a custom label (e.g. a label with a tooltip), you can use the `labelNode` prop.
+
+```jsx live
+function Example() {
+  const [date, setDate] = useState(null);
+  const [error, setError] = useState(null);
+
+  return (
+    <DatePicker
+      date={date}
+      error={error}
+      onChangeDate={setDate}
+      onErrorDate={setError}
+      label="Birthdate"
+      labelNode={
+        <HStack alignItems="center" gap={1}>
+          <InputLabel>Birthdate</InputLabel>
+          <Tooltip content="This will be visible to other users.">
+            <Icon active color="fg" name="info" size="xs" tabIndex={0} />
+          </Tooltip>
+        </HStack>
+      }
+      calendarIconButtonAccessibilityLabel="Birthdate calendar"
+      nextArrowAccessibilityLabel="Next month"
+      previousArrowAccessibilityLabel="Previous month"
+      helperTextErrorIconAccessibilityLabel="Error"
+      invalidDateError="Please enter a valid date"
+    />
+  );
+}
+```
+
 ### Invalid dates
 
 Always provide the `invalidDateError` prop for when users type an impossible date like 99/99/2000.
@@ -475,6 +509,7 @@ function Example() {
 | `invalidDateError` | `string` | No | `'Please enter a valid date'` | Error text to display when an impossible date is selected, e.g. 99/99/2000. This should always be defined for accessibility. Also displays when a date is selected that is more than 100 years before the minDate, or more than 100 years after the maxDate. |
 | `key` | `Key \| null` | No | `-` | - |
 | `label` | `string` | No | `-` | Short messageArea indicating purpose of input |
+| `labelNode` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | React node to render label. Takes precedence over label. |
 | `labelVariant` | `inside \| outside` | No | `'outside'` | The variant of the label. Only used when compact is not true. |
 | `maxDate` | `Date` | No | `-` | Maximum date allowed to be selected, inclusive. Dates after the maxDate are disabled. All navigation to months after the maxDate is disabled. |
 | `minDate` | `Date` | No | `-` | Minimum date allowed to be selected, inclusive. Dates before the minDate are disabled. All navigation to months before the minDate is disabled. |

package/mcp-docs/web/components/SelectAlpha.txt

@@ -1037,6 +1037,39 @@ function CustomClassNamesExamples() {
 }
 ```
 
+### Custom Label
+
+If you need to render a custom label (e.g. a label with a tooltip), you can pass a React Node to the `label` prop.
+
+```jsx live
+function CustomLabelExample() {
+  const [value, setValue] = useState('1');
+
+  const options = [
+    { value: '1', label: 'Option 1' },
+    { value: '2', label: 'Option 2' },
+    { value: '3', label: 'Option 3' },
+  ];
+
+  return (
+    <Select
+      label={
+        <HStack alignItems="center" gap={1}>
+          Custom Label
+          <Tooltip content="This will be visible to other users.">
+            <Icon active color="fg" name="info" size="xs" tabIndex={0} />
+          </Tooltip>
+        </HStack>
+      }
+      value={value}
+      onChange={setValue}
+      options={options}
+      placeholder="Select an option"
+    />
+  );
+}
+```
+
 ### Custom components
 
 Select is highly customizable. Use the _Component_ props to customize the various subcomponents in Select.

package/mcp-docs/web/components/TextInput.txt

@@ -266,6 +266,28 @@ When using the `inside` label variant, you should always include a `placeholder`
 </VStack>
 ```
 
+#### Custom Label
+
+If you need to render a custom label (e.g. a label with a tooltip), you can use the `labelNode` prop.
+
+```jsx live
+<TextInput
+  id="display-name-tooltip"
+  label="Display name"
+  labelNode={
+    <InputLabel htmlFor="display-name-tooltip">
+      <HStack alignItems="center" gap={1}>
+        Display name
+        <Tooltip content="This will be visible to other users.">
+          <Icon active color="fg" name="info" size="xs" tabIndex={0} />
+        </Tooltip>
+      </HStack>
+    </InputLabel>
+  }
+  placeholder="Satoshi Nakamoto"
+/>
+```
+
 #### StartContent & EndContent
 
 ##### Examples of Input Objects placed at the Start
@@ -635,6 +657,7 @@ function TextInputKeyboardExample() {
 | `inputNode` | `ReactElement` | No | `-` | Customize the element which the input area will be rendered as. Adds ability to render the input area as a <textarea />, <input /> etc... By default, the input area will be rendered as an <input />. |
 | `key` | `Key \| null` | No | `-` | - |
 | `label` | `string` | No | `-` | Short messageArea indicating purpose of input |
+| `labelNode` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | React node to render label. Takes precedence over label. |
 | `labelVariant` | `inside \| outside` | No | `'outside'` | The variant of the label. Only used when compact is not true. |
 | `onChange` | `ChangeEventHandler<HTMLInputElement>` | No | `-` | - |
 | `onClick` | `(MouseEventHandler<Element> & MouseEventHandler<HTMLInputElement>)` | No | `-` | Callback fired when pressed/clicked |

package/mcp-docs/web/components/Tooltip.txt

@@ -51,13 +51,13 @@ function TooltipPosition() {
       <Box position="relative">
         Set your default display currency.
         <Tooltip content="I am not centered horizontally">
-          <Icon active color="fg" name="info" paddingStart={1} position="absolute" />
+          <Icon active color="fg" name="info" paddingStart={1} position="absolute" tabIndex={0} />
         </Tooltip>
       </Box>
       <Box position="relative">
         Set your default display currency.
         <Tooltip content="I am centered horizontally" position="absolute">
-          <Icon active color="fg" name="info" paddingStart={1} />
+          <Icon active color="fg" name="info" paddingStart={1} tabIndex={0} />
         </Tooltip>
       </Box>
     </VStack>
@@ -81,6 +81,28 @@ function TooltipColorSchemeOptOut() {
 }
 ```
 
+### Tooltip in TextInput
+
+You can use tooltips within `TextInput` to provide more context.
+
+```jsx live
+<TextInput
+  id="tooltip-input-example"
+  label="Display name"
+  labelNode={
+    <InputLabel htmlFor="tooltip-input-example">
+      <HStack alignItems="center" gap={1}>
+        Display name
+        <Tooltip content="This will be visible to other users.">
+          <Icon active color="fg" name="info" size="xs" tabIndex={0} />
+        </Tooltip>
+      </HStack>
+    </InputLabel>
+  }
+  placeholder="Satoshi Nakamoto"
+/>
+```
+
 ## Props
 
 | Prop | Type | Required | Default | Description |

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coinbase/cds-mcp-server",
-  "version": "8.23.0",
+  "version": "8.24.0",
   "description": "Coinbase Design System - MCP Server",
   "repository": {
     "type": "git",