@coinbase/cds-mcp-server 8.37.1 → 8.38.1

package/CHANGELOG.md

@@ -8,6 +8,14 @@ All notable changes to this project will be documented in this file.
 
 <!-- template-start -->
 
+## 8.38.1 ((1/15/2026, 10:22 AM PST))
+
+This is an artificial version bump with no new change.
+
+## 8.38.0 ((1/14/2026, 01:30 PM PST))
+
+This is an artificial version bump with no new change.
+
 ## 8.37.1 ((1/14/2026, 12:37 PM PST))
 
 This is an artificial version bump with no new change.

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

@@ -133,6 +133,57 @@ function HelperTextExample() {
 }
 ```
 
+### Borderless
+
+You can remove the border from the combobox control by setting `bordered` to `false`.
+
+```jsx
+function BorderlessExample() {
+  const singleSelectOptions = [
+    { value: null, label: 'Remove selection' },
+    { value: 'apple', label: 'Apple' },
+    { value: 'banana', label: 'Banana' },
+    { value: 'cherry', label: 'Cherry' },
+    { value: 'date', label: 'Date' },
+  ];
+
+  const fruitOptions = [
+    { value: 'apple', label: 'Apple' },
+    { value: 'banana', label: 'Banana' },
+    { value: 'cherry', label: 'Cherry' },
+    { value: 'date', label: 'Date' },
+    { value: 'elderberry', label: 'Elderberry' },
+  ];
+
+  const [singleValue, setSingleValue] = useState('apple');
+  const { value: multiValue, onChange: multiOnChange } = useMultiSelect({
+    initialValue: ['apple'],
+  });
+
+  return (
+    <VStack gap={4}>
+      <Combobox
+        bordered={false}
+        label="Borderless single select"
+        onChange={setSingleValue}
+        options={singleSelectOptions}
+        placeholder="Search fruits..."
+        value={singleValue}
+      />
+      <Combobox
+        bordered={false}
+        label="Borderless multi select"
+        onChange={multiOnChange}
+        options={fruitOptions}
+        placeholder="Search fruits..."
+        type="multi"
+        value={multiValue}
+      />
+    </VStack>
+  );
+}
+```
+
 ## Props
 
 | Prop | Type | Required | Default | Description |
@@ -150,6 +201,7 @@ function HelperTextExample() {
 | `SelectOptionGroupComponent` | `SelectOptionGroupComponent<Type, SelectOptionValue>` | No | `-` | Custom component to render group headers |
 | `accessibilityRoles` | `{ option?: AccessibilityRole; } \| undefined` | No | `-` | Accessibility roles for dropdown elements |
 | `accessory` | `ReactElement<CellAccessoryProps, string \| JSXElementConstructor<any>>` | No | `-` | - |
+| `bordered` | `boolean` | No | `true` | Add a border around all sides of the box. Determines if the control should have a default border. |
 | `clearAllLabel` | `string` | No | `-` | Label for the Clear All option in multi-select mode |
 | `closeButtonLabel` | `string` | No | `-` | Label for close button when combobox is open (mobile only) |
 | `compact` | `boolean` | No | `-` | Whether to use compact styling for the select |

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

@@ -292,20 +292,20 @@ function Example() {
 
   return (
     <DateInput
+      accessibilityLabel="Birthdate"
       date={date}
       error={error}
-      onChangeDate={setDate}
-      onErrorDate={setError}
-      label="Birthdate"
+      invalidDateError="Please enter a valid date"
       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" />
+            <Icon color="fgMuted" name="info" size="xs" />
           </Tooltip>
         </HStack>
       }
-      invalidDateError="Please enter a valid date"
+      onChangeDate={setDate}
+      onErrorDate={setError}
     />
   );
 }

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

@@ -38,9 +38,11 @@ function Example() {
 }
 ```
 
-#### Custom Label
+#### Validation
 
-If you need to render a custom label (e.g. a label with a tooltip), you can use the `labelNode` prop.
+##### Invalid dates
+
+Always provide the `invalidDateError` prop for when users type an impossible date like 99/99/2000.
 
 ```jsx
 function Example() {
@@ -54,47 +56,66 @@ function Example() {
       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
+##### Minimum and maximum dates
 
-Always provide the `invalidDateError` prop for when users type an impossible date like 99/99/2000.
+Make sure to provide the `disabledDateError` prop when providing `minDate`, `maxDate`, or `disabledDates` props. Navigation to dates before the `minDate` and after the `maxDate` is disabled.
 
 ```jsx
 function Example() {
   const [date, setDate] = useState(null);
   const [error, setError] = useState(null);
 
+  const today = new Date(new Date().setHours(0, 0, 0, 0));
+  const lastMonth15th = new Date(today.getFullYear(), today.getMonth() - 1, 15);
+  const nextMonth15th = new Date(today.getFullYear(), today.getMonth() + 1, 15);
+
   return (
     <DatePicker
       date={date}
       error={error}
       onChangeDate={setDate}
       onErrorDate={setError}
+      minDate={lastMonth15th}
+      maxDate={nextMonth15th}
       label="Birthdate"
       invalidDateError="Please enter a valid date"
+      disabledDateError="Date unavailable"
     />
   );
 }
 ```
 
-#### Validation
+##### Required field
+
+Make sure to provide the `requiredError` prop when setting the `required` prop to true. The `requiredError` will be displayed if a user blurs the input, without a date selected, after having typed into it.
+
+```jsx
+function Example() {
+  const [date, setDate] = useState(null);
+  const [error, setError] = useState(null);
+
+  return (
+    <DatePicker
+      required
+      date={date}
+      error={error}
+      onChangeDate={setDate}
+      onErrorDate={setError}
+      label="Birthdate"
+      invalidDateError="Please enter a valid date"
+      requiredError="This field is required"
+    />
+  );
+}
+```
+
+##### Custom validation
 
 The DatePicker handles common error states internally, and calls `onErrorDate` when the validity / error state changes.
 
@@ -122,7 +143,7 @@ function Example() {
 }
 ```
 
-#### Accessibility
+### Accessibility
 
 Always provide the accessibility label props and all necessary error props. See the Accessibility section under the Guidelines tab at the top of the page for more info.
 
@@ -152,7 +173,7 @@ function Example() {
 }
 ```
 
-#### Localization
+### Localization
 
 The date format is automatically adjusted to the `LocaleContext`. Check `LocaleProvider` usage below.
 
@@ -176,36 +197,67 @@ function Example() {
 }
 ```
 
-#### Seeding the date
+### Styling
 
-Defaults to today when undefined.
+DatePicker supports the same styling functionality as [DateInput](/components/other/DateInput/).
 
-On mobile the `seedDate` prop is the default date that the react-native-date-picker keyboard control will open to when there is no selected date value.
+#### Compact
+
+Use the `compact` prop for a smaller input size.
 
 ```jsx
 function Example() {
   const [date, setDate] = useState(null);
   const [error, setError] = useState(null);
 
-  const seedDate = new Date('11/16/1991');
+  return (
+    <VStack gap={3}>
+      <DatePicker
+        date={date}
+        error={error}
+        onChangeDate={setDate}
+        onErrorDate={setError}
+        label="Default size"
+        invalidDateError="Please enter a valid date"
+      />
+      <DatePicker
+        compact
+        date={date}
+        error={error}
+        onChangeDate={setDate}
+        onErrorDate={setError}
+        label="Compact size"
+        invalidDateError="Please enter a valid date"
+      />
+    </VStack>
+  );
+}
+```
+
+#### Disabled
+
+```jsx
+function Example() {
+  const [date, setDate] = useState(new Date());
+  const [error, setError] = useState(null);
 
   return (
     <DatePicker
+      disabled
       date={date}
       error={error}
       onChangeDate={setDate}
       onErrorDate={setError}
-      seedDate={seedDate}
-      label="Birthdate"
+      label="Disabled picker"
       invalidDateError="Please enter a valid date"
     />
   );
 }
 ```
 
-#### Required field
+#### Helper text
 
-Make sure to provide the `requiredError` prop when setting the `required` prop to true. The `requiredError` will be displayed if a user blurs the input, without a date selected, after having typed into it.
+Use the `helperText` prop to provide additional context below the input.
 
 ```jsx
 function Example() {
@@ -214,31 +266,144 @@ function Example() {
 
   return (
     <DatePicker
-      required
       date={date}
       error={error}
       onChangeDate={setDate}
       onErrorDate={setError}
-      label="Birthdate"
+      label="Start date"
+      helperText="Select when you'd like to begin"
       invalidDateError="Please enter a valid date"
-      requiredError="This field is required"
     />
   );
 }
 ```
 
-#### Minimum and maximum dates
+#### Label
 
-Make sure to provide the `disabledDateError` prop when providing `minDate`, `maxDate`, or `disabledDates` props. Navigation to dates before the `minDate` and after the `maxDate` is disabled.
+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);
 
-  const today = new Date(new Date().setHours(0, 0, 0, 0));
-  const lastMonth15th = new Date(today.getFullYear(), today.getMonth() - 1, 15);
-  const nextMonth15th = new Date(today.getFullYear(), today.getMonth() + 1, 15);
+  return (
+    <VStack gap={2}>
+      <DatePicker
+        accessibilityLabel="Birthdate"
+        calendarIconButtonAccessibilityLabel="Birthdate calendar"
+        date={date}
+        error={error}
+        helperTextErrorIconAccessibilityLabel="Error"
+        invalidDateError="Please enter a valid date"
+        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>
+        }
+        nextArrowAccessibilityLabel="Next month"
+        onChangeDate={setDate}
+        onErrorDate={setError}
+        previousArrowAccessibilityLabel="Previous month"
+      />
+      <DatePicker
+        required
+        accessibilityLabel="Event date"
+        date={date}
+        error={error}
+        invalidDateError="Please enter a valid date"
+        labelNode={
+          <HStack alignItems="center" gap={0.5}>
+            <InputLabel>Event date</InputLabel>
+            <Text color="fgNegative" font="label1">
+              *
+            </Text>
+          </HStack>
+        }
+        onChangeDate={setDate}
+        onErrorDate={setError}
+        requiredError="This field is required"
+      />
+    </VStack>
+  );
+}
+```
+
+##### Label Variant
+
+Use the `labelVariant` prop to position the label inside the input.
+
+```jsx
+function Example() {
+  const [date, setDate] = useState(null);
+  const [error, setError] = useState(null);
+
+  return (
+    <VStack gap={3}>
+      <DatePicker
+        date={date}
+        error={error}
+        onChangeDate={setDate}
+        onErrorDate={setError}
+        label="Default label"
+        invalidDateError="Please enter a valid date"
+      />
+      <DatePicker
+        date={date}
+        error={error}
+        onChangeDate={setDate}
+        onErrorDate={setError}
+        label="Inside label"
+        labelVariant="inside"
+        invalidDateError="Please enter a valid date"
+      />
+      <DatePicker
+        compact
+        date={date}
+        error={error}
+        onChangeDate={setDate}
+        onErrorDate={setError}
+        label="Compact inside label"
+        labelVariant="inside"
+        invalidDateError="Please enter a valid date"
+      />
+      <DatePicker
+        accessibilityLabel="Event date"
+        date={date}
+        error={error}
+        invalidDateError="Please enter a valid date"
+        labelVariant="inside"
+        labelNode={
+          <HStack alignItems="center" gap={1}>
+            <InputLabel paddingY={0}>Event date</InputLabel>
+            <Text color="fgMuted" font="legal">
+              (optional)
+            </Text>
+          </HStack>
+        }
+        onChangeDate={setDate}
+        onErrorDate={setError}
+      />
+    </VStack>
+  );
+}
+```
+
+#### Seeding the date
+
+Defaults to today when undefined.
+
+On mobile the `seedDate` prop is the default date that the react-native-date-picker keyboard control will open to when there is no selected date value.
+
+```jsx
+function Example() {
+  const [date, setDate] = useState(null);
+  const [error, setError] = useState(null);
+
+  const seedDate = new Date('11/16/1991');
 
   return (
     <DatePicker
@@ -246,17 +411,17 @@ function Example() {
       error={error}
       onChangeDate={setDate}
       onErrorDate={setError}
-      minDate={lastMonth15th}
-      maxDate={nextMonth15th}
+      seedDate={seedDate}
       label="Birthdate"
       invalidDateError="Please enter a valid date"
-      disabledDateError="Date unavailable"
     />
   );
 }
 ```
 
-#### Multiple pickers
+### Composed Examples
+
+#### Date range selector
 
 This is a complex example using many different props. We use multiple DatePickers together to allow a user to select a date range.
 
@@ -358,7 +523,7 @@ function Example() {
 }
 ```
 
-#### Event lifecycle
+### Event Lifecycle
 
 - Selecting a date with the native picker (mobile) or Calendar (web):
 

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

@@ -1206,6 +1206,49 @@ function StressTestExample() {
 }
 ```
 
+### Borderless
+
+You can remove the border from the select control by setting `bordered` to `false`. Now Select will only show a border when focused.
+
+```jsx
+function BorderlessExample() {
+  const [singleValue, setSingleValue] = useState('1');
+  const { value: multiValue, onChange: multiOnChange } = useMultiSelect({
+    initialValue: ['1', '2'],
+  });
+
+  const options = [
+    { value: '1', label: 'Option 1' },
+    { value: '2', label: 'Option 2' },
+    { value: '3', label: 'Option 3' },
+    { value: '4', label: 'Option 4' },
+  ];
+
+  return (
+    <VStack gap={4}>
+      <Select
+        bordered={false}
+        label="Borderless single select"
+        value={singleValue}
+        onChange={setSingleValue}
+        options={options}
+        placeholder="Select an option"
+      />
+
+      <Select
+        bordered={false}
+        type="multi"
+        label="Borderless multi select"
+        value={multiValue}
+        onChange={multiOnChange}
+        options={options}
+        placeholder="Select options"
+      />
+    </VStack>
+  );
+}
+```
+
 ### Custom styles
 
 You can use custom styles on the various subcomponents in Select.
@@ -1390,6 +1433,7 @@ function CustomComponentExamples() {
 | `SelectOptionGroupComponent` | `SelectOptionGroupComponent<Type, SelectOptionValue>` | No | `-` | Custom component to render group headers |
 | `accessibilityRoles` | `{ option?: AccessibilityRole; } \| undefined` | No | `-` | Accessibility roles for dropdown elements |
 | `accessory` | `ReactElement<CellAccessoryProps, string \| JSXElementConstructor<any>>` | No | `-` | - |
+| `bordered` | `boolean` | No | `true` | Add a border around all sides of the box. Determines if the control should have a default border. |
 | `clearAllLabel` | `string` | No | `-` | Label for the Clear All option in multi-select mode |
 | `compact` | `boolean` | No | `-` | Whether to use compact styling for the select |
 | `defaultOpen` | `boolean` | No | `-` | Initial open state when component mounts (uncontrolled mode) |

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

@@ -475,6 +475,7 @@ function ExampleDisabled() {
 | `SelectOptionGroupComponent` | `SelectOptionGroupComponent<Type, SelectOptionValue>` | No | `-` | Custom component to render group headers |
 | `accessibilityRoles` | `{ option?: AccessibilityRole; } \| undefined` | No | `-` | Accessibility roles for dropdown elements |
 | `accessory` | `ReactElement<CellAccessoryProps, string \| JSXElementConstructor<any>>` | No | `-` | - |
+| `bordered` | `boolean` | No | `true` | Add a border around all sides of the box. Determines if the control should have a default border. |
 | `clearAllLabel` | `string` | No | `-` | Label for the Clear All option in multi-select mode |
 | `compact` | `boolean` | No | `-` | Whether to use compact styling for the select |
 | `defaultOpen` | `boolean` | No | `-` | Initial open state when component mounts (uncontrolled mode) |

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

@@ -103,10 +103,11 @@ It's also advised you always format `helperText` with `Error: ${errorMessage}`.
 <TextInput label="Label" placeholder="Placeholder" />
 ```
 
-#### Borderless TextInput (web)
+#### Borderless
 
-A borderless TextInput SHOULD NOT be used alone. It should be used
-with a TypeAhead component.
+:::warning
+You should not use a borderless TextInput alone. It should be used with a TypeAhead component.
+:::
 
 ```jsx
 <HStack padding={2}>
@@ -334,18 +335,54 @@ When using the `inside` label variant, you should always include a `placeholder`
 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"
-/>
+<VStack gap={2}>
+  <TextInput
+    accessibilityLabel="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"
+  />
+  <TextInput
+    accessibilityLabel="Amount"
+    compact
+    labelNode={
+      <HStack alignItems="center" gap={0.5}>
+        <InputLabel>Amount</InputLabel>
+        <Text color="fgNegative" font="label1">
+          *
+        </Text>
+      </HStack>
+    }
+    placeholder="0.00"
+    suffix="USD"
+  />
+  <TextInput
+    accessibilityLabel="Bio"
+    labelVariant="inside"
+    labelNode={
+      <HStack alignItems="center" gap={1}>
+        <InputLabel paddingY={0}>Bio</InputLabel>
+        <Text color="fgMuted" font="legal">
+          (optional)
+        </Text>
+      </HStack>
+    }
+    placeholder="Tell us about yourself"
+  />
+  <TextInput
+    accessibilityLabel="Notes"
+    labelVariant="inside"
+    labelNode={<InputLabel paddingY={0}>Notes</InputLabel>}
+    placeholder="Add a note"
+    start={<InputIcon name="pencil" />}
+  />
+</VStack>
 ```
 
 ### Example of Input Objects placed at the End
@@ -608,16 +645,6 @@ function testExample() {
 }
 ```
 
-### Date Picker Example
-
-You can construct a DatePicker using TextInput
-
-```jsx
-function DatePicker() {
-  return <TextInput label="Pick a date" type="date" />;
-}
-```
-
 ### TextInput While Keyboard Is Open (mobile)
 
 If you have the keyboard open, then closing the keyboard and interacting with the text input requires 2 taps, which isn't a great user experience.