@coinbase/cds-mcp-server 8.53.0 → 8.54.0

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

@@ -1,6 +1,6 @@
 # DatePicker
 
-Date Picker allows our global users to input past, present, future and important dates into our interface in a simple and intuitive manner. Date Picker offers both manual and calendar entry options - accommodating both internationalization and accessibility needs while being adaptable across screen platforms.
+Date Picker allows our global users to input past, present, future and important dates into our interface in a simple and intuitive manner. Date Picker offers both manual and calendar entry options - accommodating both internationalization and accessibility needs.
 
 ## Import
 
@@ -159,12 +159,16 @@ function Example() {
       error={error}
       onChangeDate={setDate}
       onErrorDate={setError}
-      disabledDates={[new Date()]}
       label="Birthdate"
-      calendarIconButtonAccessibilityLabel="Birthdate calendar"
-      nextArrowAccessibilityLabel="Next month"
-      previousArrowAccessibilityLabel="Previous month"
-      helperTextErrorIconAccessibilityLabel="Error"
+      accessibilityLabel="Birthdate"
+      accessibilityHint="Enter date or select from calendar using the calendar button."
+      openCalendarAccessibilityLabel="Open calendar to select birthdate"
+      closeCalendarAccessibilityLabel="Close calendar without selecting a date"
+      confirmText="Confirm birthdate selection"
+      confirmButtonAccessibilityHint="Confirms the selected birthdate"
+      nextArrowAccessibilityLabel="Go to next month"
+      previousArrowAccessibilityLabel="Go to previous month"
+      highlightedDateAccessibilityHint="Highlighted"
       invalidDateError="Please enter a valid date"
       disabledDateError="Date unavailable"
       requiredError="This field is required"
@@ -199,7 +203,7 @@ function Example() {
 
 ### Styling
 
-DatePicker supports the same styling functionality as [DateInput](/components/other/DateInput/).
+DatePicker supports the same styling functionality as [DateInput](/components/other/DateInput/) and [Calendar](/components/other/Calendar/).
 
 #### Compact
 
@@ -397,7 +401,7 @@ function Example() {
 
 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.
+The `seedDate` prop is used to generate the Calendar month when there is no selected date value.
 
 ```jsx
 function Example() {
@@ -422,6 +426,122 @@ function Example() {
 
 ### Composed Examples
 
+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"
+    />
+  );
+}
+```
+
+#### Highlighted dates
+
+The `highlightedDates` prop is an array of Dates and Date tuples for date ranges. A number is created for every individual date within a tuple range, so do not abuse this with massive ranges.
+
+```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 oneWeekAgo = new Date(today.getFullYear(), today.getMonth(), today.getDate() - 7);
+  const twoDaysAgo = new Date(today.getFullYear(), today.getMonth(), today.getDate() - 2);
+  const oneWeekLater = new Date(today.getFullYear(), today.getMonth(), today.getDate() + 7);
+
+  const highlightedDates = [[oneWeekAgo, twoDaysAgo], oneWeekLater];
+
+  return (
+    <DatePicker
+      date={date}
+      error={error}
+      onChangeDate={setDate}
+      onErrorDate={setError}
+      highlightedDates={highlightedDates}
+      label="Select a date"
+      invalidDateError="Please enter a valid date"
+    />
+  );
+}
+```
+
+#### Minimum and maximum dates
+
+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"
+    />
+  );
+}
+```
+
+#### Disabled dates
+
+The `disabledDates` prop is an array of Dates and Date tuples for date ranges. A number is created for every individual date within a tuple range, so do not abuse this with massive ranges.
+
+Make sure to provide the `disabledDateError` prop when providing `minDate`, `maxDate`, or `disabledDates` props.
+
+```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 tomorrow = new Date(today.getFullYear(), today.getMonth(), today.getDate() + 1);
+  const startOfNextWeek = new Date(today.getFullYear(), today.getMonth(), today.getDate() + 7);
+  const endOfNextWeek = new Date(today.getFullYear(), today.getMonth(), today.getDate() + 13);
+
+  return (
+    <DatePicker
+      date={date}
+      error={error}
+      onChangeDate={setDate}
+      onErrorDate={setError}
+      disabledDates={[
+        today,
+        tomorrow,
+        [startOfNextWeek, endOfNextWeek], // Disable entire range
+      ]}
+      label="Appointment date"
+      invalidDateError="Please enter a valid date"
+      disabledDateError="This date is not available"
+    />
+  );
+}
+```
+
 #### 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.
@@ -437,11 +557,8 @@ function Example() {
 
   const today = new Date(new Date().setHours(0, 0, 0, 0));
   const firstDayThisMonth = new Date(today.getFullYear(), today.getMonth(), 1);
-  const seventhDayThisMonth = new Date(today.getFullYear(), today.getMonth(), 7);
   const lastDayThisMonth = new Date(today.getFullYear(), today.getMonth() + 1, 0);
 
-  const disabledDates = [[firstDayThisMonth, seventhDayThisMonth]];
-
   const updateEndDate = (endDate, startDate) => {
     setEndDate(endDate);
     setEndError(null);
@@ -480,12 +597,10 @@ function Example() {
   };
 
   return (
-    <HStack gap={2}>
+    <VStack gap={2}>
       <DatePicker
         required
         date={startDate}
-        disabledDateError="Date unavailable"
-        disabledDates={disabledDates}
         error={startError}
         highlightedDates={startDate && endDate ? [[startDate, endDate]] : undefined}
         invalidDateError="Please enter a valid date"
@@ -500,8 +615,7 @@ function Example() {
         required
         date={endDate}
         disabled={!startDate}
-        disabledDateError="Date unavailable"
-        disabledDates={startDate ? [...disabledDates, startDate] : disabledDates}
+        disabledDates={startDate ? [startDate] : undefined}
         error={endError}
         highlightedDates={
           startDate && endDate && startDate < endDate
@@ -519,18 +633,18 @@ function Example() {
         requiredError="This field is required"
         variant={endError ? 'negative' : undefined}
       />
-    </HStack>
+    </VStack>
   );
 }
 ```
 
 ### Event Lifecycle
 
-- Selecting a date with the native picker (mobile) or Calendar (web):
+- Selecting a date with the Calendar:
 
   `onOpen -> onConfirm -> onChangeDate -> onErrorDate -> onClose`
 
-- Closing the native picker (mobile) or Calendar (web) without selecting a date:
+- Closing the Calendar without selecting a date:
 
   `onOpen -> onCancel -> onClose`
 
@@ -542,6 +656,10 @@ function Example() {
 
   `onChange -> onChangeDate -> onChange -> onChange -> ... -> onChangeDate -> onErrorDate`
 
+:::note
+The Calendar picker requires pressing the confirm button to select a date.
+:::
+
 ```jsx
 function Example() {
   const [date, setDate] = useState(null);
@@ -592,18 +710,22 @@ function Example() {
 | `blurOnSubmit` | `boolean` | No | `-` | If true, the text field will blur when submitted. The default value is true. |
 | `borderRadius` | `0 \| 100 \| 200 \| 300 \| 400 \| 500 \| 600 \| 700 \| 800 \| 900 \| 1000` | No | `200` | Leverage one of the borderRadius styles we offer to round the corners of the input. |
 | `bordered` | `boolean` | No | `true` | Determines if the input should have a border |
-| `calendarIconButtonAccessibilityLabel` | `string` | No | `'Open calendar' / 'Close calendar'` | Accessibility label describing the calendar IconButton, which opens the calendar when pressed. |
+| `calendarIconButtonAccessibilityLabel` | `string` | No | `-` | Accessibility label describing the calendar IconButton, which opens the calendar when pressed. |
 | `caretHidden` | `boolean` | No | `-` | If true, caret is hidden. The default value is false. |
 | `clearButtonMode` | `never \| while-editing \| unless-editing \| always` | No | `-` | enum(never, while-editing, unless-editing, always) When the clear button should appear on the right side of the text view |
 | `clearTextOnFocus` | `boolean` | No | `-` | If true, clears the text field automatically when editing begins |
+| `closeCalendarAccessibilityLabel` | `string` | No | `'Close calendar without selecting a date'` | Accessibility label for the handle bar that closes the picker. |
 | `compact` | `boolean` | No | `false` | Enables compact variation |
+| `confirmButtonAccessibilityHint` | `string` | No | `-` | Accessibility hint for the confirm button. |
+| `confirmText` | `string` | No | `'Confirm'` | Text to display on the confirm button. |
 | `contextMenuHidden` | `boolean` | No | `-` | If true, context menu is hidden. The default value is false. |
 | `cursorColor` | `ColorValue \| null` | No | `-` | When provided it will set the color of the cursor (or caret) in the component. Unlike the behavior of selectionColor the cursor color will be set independently from the color of the text selection box. |
 | `dataDetectorTypes` | `DataDetectorTypes \| DataDetectorTypes[]` | No | `-` | Determines the types of data converted to clickable URLs in the text input. Only valid if multiline={true} and editable={false}. By default no data types are detected.  You can provide one type or an array of many types.  Possible values for dataDetectorTypes are:  - phoneNumber - link - address - calendarEvent - none - all |
-| `dateInputStyle` | `null \| false \| ViewStyle \| RegisteredStyle<ViewStyle> \| RecursiveArray<ViewStyle \| Falsy \| RegisteredStyle<ViewStyle>>` | No | `-` | - |
+| `dateInputStyle` | `null \| false \| ViewStyle \| RegisteredStyle<ViewStyle> \| RecursiveArray<ViewStyle \| Falsy \| RegisteredStyle<ViewStyle>>` | No | `-` | Custom style to apply to the DateInput. |
 | `disableFullscreenUI` | `boolean` | No | `-` | When false, if there is a small amount of space available around a text input (e.g. landscape orientation on a phone),   the OS may choose to have the user edit the text inside of a full screen text input mode. When true, this feature is disabled and users will always edit the text directly inside of the text input. Defaults to false. |
 | `disabled` | `boolean` | No | `false` | Disables user interaction. Toggles input interactability and opacity |
-| `disabledDateError` | `string` | No | `'Date unavailable'` | Error text to display when a disabled date is selected with the DateInput, including dates before the minDate or after the maxDate. |
+| `disabledDateError` | `string` | No | `'Date unavailable'` | Tooltip content shown when hovering or focusing a disabled date, including dates before the minDate or after the maxDate. |
+| `disabledDates` | `(Date \| [Date, Date])[]` | No | `-` | Array of disabled dates, and date tuples for date ranges. Make sure to set disabledDateError as well. A number is created for every individual date within a tuple range, so do not abuse this with massive ranges. |
 | `editable` | `boolean` | No | `-` | If false, text is not editable. The default value is true. |
 | `enableColorSurge` | `boolean` | No | `-` | Enable Color Surge motion |
 | `enablesReturnKeyAutomatically` | `boolean` | No | `-` | If true, the keyboard disables the return key when there is no text and automatically enables it when there is text. The default value is false. |
@@ -612,6 +734,8 @@ function Example() {
 | `height` | `string \| number` | No | `-` | Height of input |
 | `helperText` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | For cases where label is not enough information to describe what the text input is for. Can also be used for showing positive/negative messages |
 | `helperTextErrorIconAccessibilityLabel` | `string` | No | `'error'` | Accessibility label for helper text error icon when variant=negative |
+| `highlightedDateAccessibilityHint` | `string` | No | `'Highlighted'` | Accessibility hint announced for highlighted dates. Applied to all highlighted dates. |
+| `highlightedDates` | `(Date \| [Date, Date])[]` | No | `-` | Array of highlighted dates, and date tuples for date ranges. A number is created for every individual date within a tuple range, so do not abuse this with massive ranges. |
 | `importantForAutofill` | `auto \| yes \| no \| noExcludeDescendants \| yesExcludeDescendants` | No | `-` | Determines whether the individual fields in your app should be included in a view structure for autofill purposes on Android API Level 26+. Defaults to auto. To disable auto complete, use off.  *Android Only*  The following values work on Android only:  - auto - let Android decide - no - not important for autofill - noExcludeDescendants - this view and its children arent important for autofill - yes - is important for autofill - yesExcludeDescendants - this view is important for autofill but its children arent |
 | `inlineImageLeft` | `string` | No | `-` | If defined, the provided image resource will be rendered on the left. |
 | `inlineImagePadding` | `number` | No | `-` | Padding between the inline image, if any, and the text input itself. |
@@ -632,18 +756,19 @@ function Example() {
 | `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. |
 | `minHeight` | `string \| number` | No | `auto` | minimum height of input |
 | `multiline` | `boolean` | No | `-` | If true, the text input can be multiple lines. The default value is false. |
+| `nextArrowAccessibilityLabel` | `string` | No | `'Go to next month'` | Accessibility label describing the Calendar next month arrow. |
 | `numberOfLines` | `number` | No | `-` | Sets the number of lines for a TextInput. Use it with multiline set to true to be able to fill the lines. |
 | `onBlur` | `((e: NativeSyntheticEvent<TextInputFocusEventData>) => void)` | No | `-` | Callback that is called when the text input is blurred |
-| `onCancel` | `(() => void)` | No | `-` | Callback function fired when the user closes the react-native-date-picker keyboard control without selecting a date. Interacting with the DateInput does not fire this callback. Will always be called before onClose. |
-| `onChange` | `(((event: NativeSyntheticEvent<TextInputChangeEventData>) => void) & ((e: NativeSyntheticEvent<TextInputChangeEventData>) => void))` | No | `-` | Callback function fired when the DateInput text value changes. Prefer to use onChangeDate instead. Will always be called before onChangeDate. This prop should only be used for edge cases, such as custom error handling. |
+| `onCancel` | `(() => void)` | No | `-` | Callback function fired when the user closes the picker without selecting a date. Interacting with the DateInput does not fire this callback. Will always be called before onClose. |
+| `onChange` | `(((e: NativeSyntheticEvent<TextInputChangeEventData>) => void) & ((event: NativeSyntheticEvent<TextInputChangeEventData>) => void))` | No | `-` | Callback function fired when the DateInput text value changes. Prefer to use onChangeDate instead. Will always be called before onChangeDate. This prop should only be used for edge cases, such as custom error handling. |
 | `onChangeText` | `((text: string) => void)` | No | `-` | - |
-| `onClose` | `(() => void)` | No | `-` | Callback function fired when the react-native-date-picker keyboard control is closed. Will always be called after onCancel, onConfirm, and onChangeDate. |
-| `onConfirm` | `(() => void)` | No | `-` | Callback function fired when the user selects a date using the react-native-date-picker keyboard control. Interacting with the DateInput does not fire this callback. Will always be called before onClose. |
+| `onClose` | `(() => void)` | No | `-` | Callback function fired when the picker is closed. Will always be called after onCancel, onConfirm, and onChangeDate. |
+| `onConfirm` | `(() => void)` | No | `-` | Callback function fired when the user selects a date using the picker. Interacting with the DateInput does not fire this callback. Will always be called before onClose. |
 | `onContentSizeChange` | `((e: NativeSyntheticEvent<TextInputContentSizeChangeEventData>) => void)` | No | `-` | Callback that is called when the text inputs content size changes. This will be called with { nativeEvent: { contentSize: { width, height } } }.  Only called for multiline text inputs. |
 | `onEndEditing` | `((e: NativeSyntheticEvent<TextInputEndEditingEventData>) => void)` | No | `-` | Callback that is called when text input ends. |
 | `onFocus` | `((e: NativeSyntheticEvent<TextInputFocusEventData>) => void)` | No | `-` | Callback that is called when the text input is focused |
 | `onKeyPress` | `((e: NativeSyntheticEvent<TextInputKeyPressEventData>) => void)` | No | `-` | Callback that is called when a key is pressed. This will be called with  { nativeEvent: { key: keyValue } } where keyValue is Enter or Backspace for respective keys and the typed-in character otherwise including   for space.  Fires before onChange callbacks. Note: on Android only the inputs from soft keyboard are handled, not the hardware keyboard inputs. |
-| `onOpen` | `(() => void)` | No | `-` | Callback function fired when the react-native-date-picker keyboard control is opened. |
+| `onOpen` | `(() => void)` | No | `-` | Callback function fired when the picker is opened. |
 | `onPointerCancel` | `((event: PointerEvent) => void)` | No | `-` | - |
 | `onPointerCancelCapture` | `((event: PointerEvent) => void)` | No | `-` | - |
 | `onPointerDown` | `((event: PointerEvent) => void)` | No | `-` | - |
@@ -663,9 +788,11 @@ function Example() {
 | `onSelectionChange` | `((e: NativeSyntheticEvent<TextInputSelectionChangeEventData>) => void)` | No | `-` | Callback that is called when the text input selection is changed. |
 | `onSubmitEditing` | `((e: NativeSyntheticEvent<TextInputSubmitEditingEventData>) => void)` | No | `-` | Callback that is called when the text inputs submit button is pressed. |
 | `onTextInput` | `((e: NativeSyntheticEvent<TextInputTextInputEventData>) => void)` | No | `-` | Callback that is called on new text input with the argument  { nativeEvent: { text, previousText, range: { start, end } } }.  This prop requires multiline={true} to be set. |
+| `openCalendarAccessibilityLabel` | `string` | No | `'Open calendar'` | Accessibility label for the calendar IconButton, which opens the calendar when pressed. |
 | `passwordRules` | `string \| null` | No | `-` | Provide rules for your password. For example, say you want to require a password with at least eight characters consisting of a mix of uppercase and lowercase letters, at least one number, and at most two consecutive characters. required: upper; required: lower; required: digit; max-consecutive: 2; minlength: 8; |
 | `placeholder` | `string` | No | `-` | Placeholder text displayed inside of the input. Will be replaced if there is a value. The string that will be rendered before text input has been entered |
 | `placeholderTextColor` | `string \| OpaqueColorValue` | No | `-` | The text color of the placeholder string |
+| `previousArrowAccessibilityLabel` | `string` | No | `'Go to previous month'` | Accessibility label describing the Calendar previous month arrow. |
 | `readOnly` | `boolean` | No | `-` | If true, text is not editable. The default value is false. |
 | `ref` | `((instance: View \| null) => void) \| RefObject<View> \| null` | No | `-` | - |
 | `rejectResponderTermination` | `boolean \| null` | No | `-` | If true, allows TextInput to pass touch events to the parent component. This allows components to be swipeable from the TextInput on iOS, as is the case on Android by default. If false, TextInput always asks to handle the input (except when disabled). |
@@ -675,7 +802,7 @@ function Example() {
 | `returnKeyType` | `search \| join \| done \| none \| default \| go \| next \| send \| previous \| google \| route \| yahoo \| emergency-call` | No | `-` | enum(default, go, google, join, next, route, search, send, yahoo, done, emergency-call) Determines how the return key should look. |
 | `scrollEnabled` | `boolean` | No | `-` | If false, scrolling of the text view will be disabled. The default value is true. Only works with multiline={true} |
 | `secureTextEntry` | `boolean` | No | `-` | If true, the text input obscures the text entered so that sensitive text like passwords stay secure. The default value is false. |
-| `seedDate` | `Date` | No | `-` | Date that the react-native-date-picker keyboard control will open to when there is no value for the date prop, defaults to today. |
+| `seedDate` | `Date` | No | `-` | Date used to generate the Calendar month when there is no value for the selectedDate prop, defaults to today. |
 | `selectTextOnFocus` | `boolean` | No | `-` | If true, all text will automatically be selected on focus |
 | `selection` | `{ start: number; end?: number; } \| undefined` | No | `-` | The start and end of the text inputs selection. Set start and end to the same value to position the cursor. |
 | `selectionColor` | `string \| OpaqueColorValue` | No | `-` | The highlight (and cursor on ios) color of the text input |
@@ -685,6 +812,7 @@ function Example() {
 | `smartInsertDelete` | `boolean` | No | `-` | If false, the iOS system will not insert an extra space after a paste operation neither delete one or two spaces after a cut or delete operation.  The default value is true. |
 | `spellCheck` | `boolean` | No | `-` | If false, disables spell-check style (i.e. red underlines). The default value is inherited from autoCorrect |
 | `start` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | Adds content to the start of the inner input. Refer to diagram for location of startNode in InputStack component |
+| `styles` | `{ dateInput?: StyleProp<ViewStyle>; calendar?: StyleProp<ViewStyle>; calendarHeader?: StyleProp<ViewStyle>; calendarTitle?: StyleProp<TextStyle>; calendarNavigation?: StyleProp<ViewStyle>; calendarContent?: StyleProp<ViewStyle>; calendarDay?: StyleProp<ViewStyle>; }` | No | `-` | Custom styles for the DateInput and Calendar subcomponents. |
 | `suffix` | `string` | No | `-` | Adds suffix text to the end of input |
 | `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 Used to locate this view in end-to-end tests |
 | `testIDMap` | `{ start?: string; end?: string \| undefined; label?: string \| undefined; helperText?: string \| undefined; } \| undefined` | No | `-` | Add ability to test individual parts of the input |

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

@@ -38,7 +38,7 @@ If `dimension` and `scaleMultiplier` are both provided the component will scale
 
 | Prop | Type | Required | Default | Description |
 | --- | --- | --- | --- | --- |
-| `name` | `margin \| success \| pending \| airdrop \| blockchain \| camera \| cloud \| coinbaseOneLogo \| earn \| instantUnstakingClock \| options \| refresh \| rocket \| securityShield \| smartContract \| staking \| test \| baseCreatorCoin \| borrowCoins \| coinbaseOneEarn \| ethStakingRewards \| fiat \| futures \| globalTransactions \| governance \| lightningNetworkSend \| outage \| startToday \| walletWarning \| phoneNumber \| exchange \| accessToAdvancedCharts \| accountUnderReview \| add2Fa \| addBankAccount \| addCreditCard \| addMoreCrypto \| addPhoneNumber \| advancedTrading \| advancedTradingChartsIndicatorsCandles \| advancedTradingUi \| alienDonutSystemError \| anonymous \| appTrackingTransparency \| artFrameEmptyState \| automaticPayments \| backedByUsDollar \| baseChartLarge \| baseCheck \| baseCoinCryptoLarge \| baseCoinNetworkLarge \| baseConnectLarge \| baseCreatorCoinEmpty \| baseDecentralizationLarge \| basedInUsa \| baseEmptyLarge \| baseErrorButterfly \| baseErrorLarge \| baseLoadingLarge \| baseLocationLarge \| baseMintNftLarge \| baseNetworkLarge \| baseNftLarge \| basePaycoinLarge \| basePeopleLarge \| basePiechartLarge \| baseRewardsCalmLarge \| baseSecurityLarge \| baseSendLarge \| baseSocial \| baseTargetLarge \| bigBtc \| bigError \| bigWarning \| bitcoinAndOtherCrypto \| bitcoinGlobe \| borrow \| borrowCoinsBtc \| borrowWallet \| brdGift \| bridge \| browseDecentralizedApps \| browserExtension \| buy \| buyFirstCrypto \| cardAndPhone \| cardBoosted \| cardError \| cardErrorCB1 \| cardReloadFunds \| cashExcitement \| catHoldingWalletEmptyState \| catLostSystemError \| cbada \| cbbtc \| cbdoge \| cbltc \| cbxrp \| chickenFishSystemError \| claimCryptoUsername \| cloudBacking \| coinbaseCard \| coinbaseCardIssue \| coinbaseCardLock \| coinbaseCardPocket \| coinbaseCardSpend \| coinbaseCardSpendCrypto \| coinbaseFees \| coinbaseIsDown \| coinbaseIsDownMobile \| coinbaseOneAirdrop \| coinbaseOneCardWarning \| coinbaseOneDiscountedAmount \| coinbaseOneDocWarning \| coinbaseOneInsufficientWallet \| coinbaseOnePercentOff \| coinbaseOnePhoneLightning \| coinbaseOneProtectedCrypto \| coinbaseOneRewards \| coinbaseOneSavingFunds \| coinbaseOneTokenRewards \| coinbaseOneUSDCBig \| coinbaseOneUSDCIncentives \| coinbaseOneWaitlist \| coinbaseOneWalletWarning \| coinbaseOneWelcome \| coinbaseOneZeroPortal \| coinbaseOneZeroPromotion \| coinbaseRedesigned \| coinbaseWalletToTrade \| coinCheckmark \| coinFifty \| coinsInWallet \| collectableNfts \| collectingNfts \| commerceAccounting \| commerceInvoices \| communication \| completeAQuiz \| congratulationsOnEarningCrypto \| connectPeople \| contactsListWarning \| crossBorderPayments \| cryptoAndMore \| cryptoApps \| cryptoAppsWallet \| cryptoAssets \| cryptoEconomy \| cryptoForBeginners \| cryptoPortfolio \| cryptoWallet \| currencyPairs \| dappsArts \| dappsFinance \| dappsGaming \| dappsGeneral \| dappsL2Support \| dappsMusic \| decentralization \| decentralizedWebWeb3 \| defiDecentralizedBorrowingLending \| defiDecentralizedTradingExchange \| defiEarn \| defiEnrollBoost \| defiHow \| defiRisk \| desktopAuthorized \| desktopUnknown \| developer \| diamondHands \| didDecentralizedIdentity \| digitalCollectibles \| digitalGold \| directDepositPhone \| discardAssets \| docError \| documentCertified \| documentSuccess \| downloadCoinbaseWallet \| earnCryptoCard \| earnCryptoInterest \| earnGlobe \| earnGrowth \| earnIdVerification \| earnInterest \| earnMore \| earnNuxHome \| earnSuccess \| earnToLearn \| emailNotification \| emptyCollection \| emptyStateCheckBackLater \| emptyStateNft404Page \| emptyStateNftSoldOut \| enableBiometrics \| encryptedEverything \| engagement \| ensProfilePic \| error400 \| errorApp500 \| errorMoblie \| errorRefresh \| errorRefreshWeb \| errorWeb \| errorWeb400 \| errorWeb404 \| errorWeb404Mobile \| errorWeb500 \| estimatedAmount \| ethereumToWallet \| ethStakingUpsell \| exchangeEmptyState \| exploreDecentralizedApps \| faceMatchReal \| feeScale \| fileYourCryptoTaxes \| fileYourCryptoTaxesCheck \| focusLimitOrders \| freeBtc \| futuresAndPerps \| futuresExpire \| futuresVsPerps \| gainsAndLosses \| gamer \| gasFeesNetworkFees \| generative \| getStartedInMinutes \| governanceMallet \| graphChartTrading \| hardwareWallets \| hiddenCollection \| holdCrypto \| holdingCrypto \| iceCreamMeltingSystemError \| idAngles \| idBack \| idCard \| idFront \| idIssue \| idVerificationSecure \| indexer \| innovation \| insufficientBalance \| insuranceProtection \| invest \| invite \| japanVerifyId \| keyGeneration \| layeredNetworks \| layerOne \| layerThree \| layerTwo \| ledgerAccess \| ledgerPlugin \| lend \| leverage \| lightningNetwork \| lightningNetworkInvoice \| lightningNetworkTransfer \| limitOrders \| linkingYourWalletToYourCoinbaseAccount \| liquidationBufferGreen \| liquidationBufferRed \| liquidationBufferRedClose \| liquidationBufferYellow \| lowCost \| marginWarning \| mic \| mining \| minting \| moneyDecentralized \| moreGains \| multicoinSupport \| multiPlatformMobileAppBrowserExtension \| multipleAccountsWalletsForOneUser \| multiplePortfolios \| myNameIsSatoshi \| namePortfolio \| networkWarning \| noFees \| noFeesMotion \| noLongAddresses \| notificationsAlt \| notificationsAndUpdates \| offChain \| oilAndGold \| onChain \| onTheList \| openEmail \| optInPushNotificationsEmail \| oracle \| orderBooks \| p2pGifting \| p2pPayments \| paperHands \| payUpFront \| performance \| phoneUnknown \| platform \| polling \| portfolioPerformance \| poweredByEthereum \| powerOfCrypto \| predictionsMarkets \| primeDeFi \| primeEarn \| primeStaking \| private \| privateKey \| processing \| protocol \| public \| quest \| quickAndSimple \| quickBuy \| ratingsAndReviews \| readyToTrade \| realToUSDC \| receivedCard \| receiveGift \| recommendInvest \| recurringReward \| referralsAvatars \| referralsBitcoin \| referralsCoinbaseOne \| referralsGenericCoin \| referralsWalletPhones \| remittances \| requestSent \| restrictedCountry \| retailUSDCRewards \| reviewInfo \| rotatingRewards \| routingAccount \| scalable \| secureAndTrusted \| secureGlobalTransactions \| secureStorage \| selectCorrectCrypto \| selectReward \| selfCustody \| selfCustodyCrypto \| semiCustodial \| sendCryptoFaster \| sendToUsername \| serverCatSystemError \| settlement \| shareOnSocialMedia \| sidechain \| slippageTolerance \| spacedOutSystemError \| squidEmptyState \| stablecoin \| stableValue \| stakingMissedReturns \| stakingMissedReturnsUsdc \| stayInControlSelfHostedWalletsStorage \| stopLimitOrder \| stopLimitOrderDown \| storage \| stressTestedColdStorage \| supportAndMore \| sustainable \| switchAdvancedToSimpleTrading \| taxesDetails \| tools \| tradeGeneral \| tradeHistory \| tradeImmediately \| tradingWithLeverage \| transactionLimit \| trendingHotAssets \| twoIdVerify \| unlockKey \| usdAndUsdc \| usdtToUSDC \| verifyBankTransactions \| verifyCardTransactions \| verifyEmail \| verifyIdDetails \| verifyInfo \| videoRequest \| videoReview \| videoUpload \| vipBadge \| vote \| walletAsset \| walletConfirmation \| walletFlyEmptyState \| walletLoading \| walletNotifications \| walletSecurity \| walletUi \| watchVideos \| web3ActivityError \| web3ActivitySigned \| web3MobileSetupStart \| web3MobileSetupSuccess \| webRAT \| whyNotBoth \| yourContacts` | Yes | `-` | Name of illustration as defined in Figma |
+| `name` | `margin \| success \| pending \| airdrop \| blockchain \| camera \| cloud \| coinbaseOneLogo \| earn \| instantUnstakingClock \| options \| refresh \| rocket \| securityShield \| smartContract \| staking \| test \| baseCreatorCoin \| borrowCoins \| coinbaseOneEarn \| ethStakingRewards \| fiat \| futures \| globalTransactions \| governance \| lightningNetworkSend \| outage \| startToday \| walletWarning \| phoneNumber \| exchange \| accessToAdvancedCharts \| accountUnderReview \| add2Fa \| addBankAccount \| addCreditCard \| addMoreCrypto \| addPhoneNumber \| advancedTrading \| advancedTradingChartsIndicatorsCandles \| advancedTradingUi \| alienDonutSystemError \| anonymous \| appTrackingTransparency \| artFrameEmptyState \| automaticPayments \| backedByUsDollar \| baseChartLarge \| baseCheck \| baseCoinCryptoLarge \| baseCoinNetworkLarge \| baseConnectLarge \| baseCreatorCoinEmpty \| baseDecentralizationLarge \| basedInUsa \| baseEmptyLarge \| baseErrorButterfly \| baseErrorLarge \| baseLoadingLarge \| baseLocationLarge \| baseMintNftLarge \| baseNetworkLarge \| baseNftLarge \| basePaycoinLarge \| basePeopleLarge \| basePiechartLarge \| baseRewardsCalmLarge \| baseSecurityLarge \| baseSendLarge \| baseSocial \| baseTargetLarge \| bigBtc \| bigError \| bigWarning \| bitcoinAndOtherCrypto \| bitcoinGlobe \| borrow \| borrowCoinsBtc \| borrowWallet \| brdGift \| bridge \| browseDecentralizedApps \| browserExtension \| buy \| buyFirstCrypto \| cardAndPhone \| cardBoosted \| cardError \| cardErrorCB1 \| cardReloadFunds \| cashExcitement \| catHoldingWalletEmptyState \| catLostSystemError \| cbada \| cbbtc \| cbdoge \| cbltc \| cbxrp \| chickenFishSystemError \| claimCryptoUsername \| cloudBacking \| coinbaseCard \| coinbaseCardIssue \| coinbaseCardLock \| coinbaseCardPocket \| coinbaseCardSpend \| coinbaseCardSpendCrypto \| coinbaseFees \| coinbaseIsDown \| coinbaseIsDownMobile \| coinbaseOneAirdrop \| coinbaseOneCardWarning \| coinbaseOneDiscountedAmount \| coinbaseOneDocWarning \| coinbaseOneInsufficientWallet \| coinbaseOnePercentOff \| coinbaseOnePhoneLightning \| coinbaseOneProtectedCrypto \| coinbaseOneRewards \| coinbaseOneSavingFunds \| coinbaseOneTokenRewards \| coinbaseOneUSDCBig \| coinbaseOneUSDCIncentives \| coinbaseOneWaitlist \| coinbaseOneWalletWarning \| coinbaseOneWelcome \| coinbaseOneZeroPortal \| coinbaseOneZeroPromotion \| coinbaseRedesigned \| coinbaseWalletToTrade \| coinCheckmark \| coinFifty \| coinsInWallet \| collectableNfts \| collectingNfts \| commerceAccounting \| commerceInvoices \| communication \| completeAQuiz \| congratulationsOnEarningCrypto \| connectPeople \| contactsListWarning \| crossBorderPayments \| cryptoAndMore \| cryptoApps \| cryptoAppsWallet \| cryptoAssets \| cryptoEconomy \| cryptoForBeginners \| cryptoPortfolio \| cryptoPortfolioUsdc \| cryptoWallet \| currencyPairs \| dappsArts \| dappsFinance \| dappsGaming \| dappsGeneral \| dappsL2Support \| dappsMusic \| decentralization \| decentralizedWebWeb3 \| defiDecentralizedBorrowingLending \| defiDecentralizedTradingExchange \| defiEarn \| defiEnrollBoost \| defiHow \| defiRisk \| desktopAuthorized \| desktopUnknown \| developer \| diamondHands \| didDecentralizedIdentity \| digitalCollectibles \| digitalGold \| directDepositPhone \| discardAssets \| docError \| documentCertified \| documentSuccess \| downloadCoinbaseWallet \| earnCryptoCard \| earnCryptoInterest \| earnGlobe \| earnGrowth \| earnIdVerification \| earnInterest \| earnMore \| earnNuxHome \| earnSuccess \| earnToLearn \| emailNotification \| emptyCollection \| emptyStateCheckBackLater \| emptyStateNft404Page \| emptyStateNftSoldOut \| enableBiometrics \| encryptedEverything \| engagement \| ensProfilePic \| error400 \| errorApp500 \| errorMoblie \| errorRefresh \| errorRefreshWeb \| errorWeb \| errorWeb400 \| errorWeb404 \| errorWeb404Mobile \| errorWeb500 \| estimatedAmount \| ethereumToWallet \| ethStakingUpsell \| exchangeEmptyState \| exploreDecentralizedApps \| faceMatchReal \| feeScale \| fileYourCryptoTaxes \| fileYourCryptoTaxesCheck \| focusLimitOrders \| freeBtc \| futuresAndPerps \| futuresExpire \| futuresVsPerps \| gainsAndLosses \| gamer \| gasFeesNetworkFees \| generative \| getStartedInMinutes \| governanceMallet \| graphChartTrading \| hardwareWallets \| hiddenCollection \| holdCrypto \| holdingCrypto \| iceCreamMeltingSystemError \| idAngles \| idBack \| idCard \| idFront \| idIssue \| idVerificationSecure \| indexer \| innovation \| instoAdd2Fa \| instoAddBankAccount \| instoCoinbaseOneProtectedCrypto \| instoDocumentSuccess \| instoEarnGlobe \| instoEnableBiometrics \| instoEthStakingRewards \| instoEthStakingUpsell \| instoGovernance \| instoKeyGenerationComplete \| instoKeyGenerationPending \| instoOnChain \| instoOpenEmail \| instoPhoneUnknown \| instoPrimeStaking \| instoPrivateKey \| instoRequestSent \| instoSecurityKeyAuth \| instoStaking \| instoStakingMissedReturns \| instoWallet \| instoWalletSecurity \| instoWeb3MobileSetupStart \| insufficientBalance \| insuranceProtection \| invest \| invite \| japanVerifyId \| keyGeneration \| layeredNetworks \| layerOne \| layerThree \| layerTwo \| ledgerAccess \| ledgerPlugin \| lend \| leverage \| lightningNetwork \| lightningNetworkInvoice \| lightningNetworkTransfer \| limitOrders \| linkingYourWalletToYourCoinbaseAccount \| liquidationBufferGreen \| liquidationBufferRed \| liquidationBufferRedClose \| liquidationBufferYellow \| lowCost \| marginWarning \| mic \| mining \| minting \| moneyDecentralized \| moreGains \| multicoinSupport \| multiPlatformMobileAppBrowserExtension \| multipleAccountsWalletsForOneUser \| multiplePortfolios \| myNameIsSatoshi \| namePortfolio \| networkWarning \| noFees \| noFeesMotion \| noLongAddresses \| notificationsAlt \| notificationsAndUpdates \| offChain \| oilAndGold \| onChain \| onTheList \| openEmail \| optInPushNotificationsEmail \| oracle \| orderBooks \| p2pGifting \| p2pPayments \| paperHands \| payUpFront \| performance \| phoneUnknown \| platform \| polling \| portfolioPerformance \| poweredByEthereum \| powerOfCrypto \| predictionsMarkets \| primeDeFi \| primeEarn \| primeStaking \| private \| privateKey \| processing \| protocol \| public \| quest \| quickAndSimple \| quickBuy \| ratingsAndReviews \| readyToTrade \| realToUSDC \| receivedCard \| receiveGift \| recommendInvest \| recurringReward \| referralsAvatars \| referralsBitcoin \| referralsCoinbaseOne \| referralsGenericCoin \| referralsWalletPhones \| remittances \| requestSent \| restrictedCountry \| retailUSDCRewards \| reviewInfo \| rotatingRewards \| routingAccount \| scalable \| secureAndTrusted \| secureGlobalTransactions \| secureStorage \| selectCorrectCrypto \| selectReward \| selfCustody \| selfCustodyCrypto \| semiCustodial \| sendCryptoFaster \| sendToUsername \| serverCatSystemError \| settlement \| shareOnSocialMedia \| sidechain \| slippageTolerance \| spacedOutSystemError \| squidEmptyState \| stablecoin \| stableValue \| stakingMissedReturns \| stakingMissedReturnsUsdc \| stayInControlSelfHostedWalletsStorage \| stopLimitOrder \| stopLimitOrderDown \| storage \| stressTestedColdStorage \| supportAndMore \| sustainable \| switchAdvancedToSimpleTrading \| taxesDetails \| tools \| tradeGeneral \| tradeHistory \| tradeImmediately \| tradingPerpetualsUsdc \| tradingWithLeverage \| transactionLimit \| trendingHotAssets \| twoIdVerify \| unlockKey \| usdAndUsdc \| usdtToUSDC \| verifyBankTransactions \| verifyCardTransactions \| verifyEmail \| verifyIdDetails \| verifyInfo \| videoRequest \| videoReview \| videoUpload \| vipBadge \| vote \| walletAsset \| walletConfirmation \| walletFlyEmptyState \| walletLoading \| walletNotifications \| walletSecurity \| walletUi \| watchVideos \| web3ActivityError \| web3ActivitySigned \| web3MobileSetupStart \| web3MobileSetupSuccess \| webRAT \| whyNotBoth \| yourContacts` | Yes | `-` | Name of illustration as defined in Figma |
 | `dimension` | `240x240 \| 200x200` | No | `-` | HeroSquare Default:  240x240 SpotSquare Default: 96x96 Pictogram Default: 48x48 SpotRectangle Default: 240x120 |
 | `fallback` | `ReactElement<any, string \| JSXElementConstructor<any>> \| null` | No | `null` | Fallback element to render if unable to find an illustration with the matching name |
 | `scaleMultiplier` | `number` | No | `-` | Multiply the width & height while maintaining aspect ratio |

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

@@ -296,6 +296,7 @@ An icon button with a badge showing the notification count. Uses `DotCount` to d
 | `height` | `string \| number` | No | `-` | - |
 | `iconSize` | `xs \| s \| m \| l` | No | `compact ? 's' : 'm'` | Size for the icon rendered inside the button. |
 | `justifyContent` | `flex-start \| flex-end \| center \| space-between \| space-around \| space-evenly` | No | `-` | - |
+| `key` | `Key \| null` | No | `-` | - |
 | `left` | `string \| number` | No | `-` | - |
 | `lineHeight` | `inherit \| LineHeight` | No | `-` | - |
 | `loading` | `boolean` | No | `-` | Is the element currenty loading. When set to true, will disable element from press and keyboard events Is the element currenty loading. Mark the button as loading and display a spinner. |
@@ -325,6 +326,7 @@ An icon button with a badge showing the notification count. Uses `DotCount` to d
 | `paddingY` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
 | `pin` | `top \| bottom \| left \| right \| all` | No | `-` | Direction in which to absolutely pin the box. |
 | `position` | `static \| relative \| fixed \| absolute \| sticky` | No | `-` | - |
+| `ref` | `((instance: View \| null) => void) \| RefObject<View> \| null` | No | `-` | - |
 | `right` | `string \| number` | No | `-` | - |
 | `rowGap` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
 | `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 Used to locate this element in unit and end-to-end tests. |

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

@@ -1,6 +1,6 @@
 # InputChip
 
-A Chip used for removable selections.
+A Chip used for removing selected values.
 
 ## Import
 
@@ -10,12 +10,38 @@ import { InputChip } from '@coinbase/cds-mobile/chips/InputChip'
 
 ## Examples
 
-### Basic usage
+InputChip is built for remove actions. For other uses, see [Chip](/components/inputs/Chip/) which supports interaction.
+
+### Basics
+
+Use `onPress` for remove behavior.
+
+```tsx
+function Example() {
+  const [selectedValues, setSelectedValues] = React.useState(['BTC', 'ETH', 'SOL']);
+
+  return (
+    <HStack gap={2} flexWrap="wrap">
+      {selectedValues.map((value) => (
+        <InputChip
+          key={value}
+          onPress={() => setSelectedValues((current) => current.filter((item) => item !== value))}
+          value={value}
+        />
+      ))}
+    </HStack>
+  );
+}
+```
+
+#### Disabled
+
+Use `disabled` when the value should stay visible but not removable.
 
 ```tsx
 function Example() {
   return (
-    <HStack gap={2}>
+    <HStack gap={2} flexWrap="wrap">
       <InputChip onPress={() => console.log('Remove Basic')} value="Basic Chip" />
       <InputChip disabled onPress={() => {}} value="Disabled Chip" />
     </HStack>
@@ -23,20 +49,22 @@ function Example() {
 }
 ```
 
-### With Custom Start Element
+### Styling
+
+#### With start content
 
 ```tsx
 function Example() {
   return (
     <VStack gap={2}>
-      <HStack gap={2}>
+      <HStack gap={2} flexWrap="wrap">
         <InputChip
           onPress={() => console.log('Remove Star')}
           value="With Icon"
           start={<Icon name="star" />}
         />
       </HStack>
-      <HStack gap={2}>
+      <HStack gap={2} flexWrap="wrap">
         <InputChip
           onPress={() => console.log('Remove BTC')}
           value="BTC"
@@ -53,16 +81,54 @@ function Example() {
 }
 ```
 
-### With Custom Accessibility Label
+#### Compact
+
+Use `compact` to reduce chip height and spacing in dense layouts.
+
+```tsx
+function Example() {
+  return (
+    <HStack gap={2} flexWrap="wrap">
+      <InputChip onPress={() => console.log('Remove Default')} value="Default" />
+      <InputChip compact onPress={() => console.log('Remove Compact')} value="Compact" />
+    </HStack>
+  );
+}
+```
+
+#### Invert color scheme
+
+Use `invertColorScheme` to emphasize removable values.
+
+```tsx
+function Example() {
+  return (
+    <HStack gap={2} flexWrap="wrap">
+      <InputChip onPress={() => console.log('Remove Default')} value="Default" />
+      <InputChip
+        invertColorScheme
+        onPress={() => console.log('Remove Inverted')}
+        value="Inverted"
+      />
+    </HStack>
+  );
+}
+```
+
+### Accessibility
+
+InputChip defaults to a remove label (`Remove ${children}` for string content, otherwise `Remove option`).
+Override `accessibilityLabel` when you need more specific wording.
 
 ```tsx
 function Example() {
   return (
-    <HStack gap={2}>
+    <HStack gap={2} flexWrap="wrap">
+      <InputChip onPress={() => console.log('Remove BTC')} value="BTC" />
       <InputChip
         onPress={() => console.log('Remove Custom')}
         value="Custom Label"
-        accessibilityLabel="Custom remove action"
+        accessibilityLabel="Remove custom selection"
       />
     </HStack>
   );