@coinbase/cds-mcp-server 8.53.1 → 8.55.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/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/SelectChip.txt

@@ -219,6 +219,7 @@ function SelectChipExample() {
 | `debounceTime` | `number` | No | `500` | The amount of time to wait (in milliseconds) before invoking the debounced function. This prop is used in conjunction with the disableDebounce prop. The debounce function is configured to be invoked as soon as its called, but subsequent calls within the debounceTime period will be ignored. |
 | `disableCapturePanGestureToDismiss` | `boolean` | No | `false` | Prevents the Drawer from capturing pan gestures on children. Set to true when using a ScrollView as a child |
 | `disableDebounce` | `boolean` | No | `-` | React Native is historically trash at debouncing touch events. This can cause a lot of unwanted behavior such as double navigations where we push a screen onto the stack 2 times. Debouncing the event 500 miliseconds, but taking the leading event prevents this effect and the accidental double-tap. |
+| `disableSafeAreaPaddingBottom` | `boolean` | No | `-` | disable safe area padding for bottom of drawer when true |
 | `disabled` | `boolean` | No | `-` | Is the element currently disabled. Whether the press behavior is disabled. |
 | `display` | `flex \| none` | No | `-` | - |
 | `elevation` | `0 \| 1 \| 2` | No | `-` | Determines box shadow styles. Parent should have overflow set to visible to ensure styles are not clipped. Is the element elevated. |
@@ -265,6 +266,7 @@ function SelectChipExample() {
 | `onBlur` | `(() => void)` | No | `-` | Callback fired when the overlay is pressed, or swipe to close |
 | `onChange` | `((newValue: string) => void) \| Dispatch<SetStateAction<string>>` | No | `-` | Callback that is fired whenever a select option is selected |
 | `onDismiss` | `(() => void)` | No | `-` | The onDismiss prop allows passing a function that will be called once the modal has been dismissed. |
+| `onOpenComplete` | `(() => void)` | No | `-` | Callback fired when the open animation completes. |
 | `onOrientationChange` | `((event: NativeSyntheticEvent<any>) => void)` | No | `-` | The onOrientationChange callback is called when the orientation changes while the modal is being displayed. The orientation provided is only portrait or landscape. This callback is also called on initial render, regardless of the current orientation. |
 | `onPointerCancel` | `((event: PointerEvent) => void)` | No | `-` | - |
 | `onPointerCancelCapture` | `((event: PointerEvent) => void)` | No | `-` | - |

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

@@ -10,25 +10,32 @@ import { Tooltip } from '@coinbase/cds-mobile/overlays/Tooltip'
 
 ## Examples
 
+### Basic usage
+
+A basic Tooltip that displays additional information when the trigger element is pressed.
+
+```jsx
+function Example() {
+  return (
+    <Tooltip content="This is helpful information">
+      <Button>Show tooltip</Button>
+    </Tooltip>
+  );
+}
+```
+
 ### Placement
 
+Control the tooltip position using the `placement` prop. Available options are `top` and `bottom`.
+
 ```jsx
-function DefaultSelect() {
-  const content = 'This is the tooltip Content';
+function Example() {
+  const content = 'This is the tooltip content';
   return (
-    <HStack spacingHorizontal={2} gap={2} justifyContent="space-around">
-      <Tooltip content={content}>
-        <Button>Default</Button>
-      </Tooltip>
+    <HStack gap={2} justifyContent="space-around">
       <Tooltip content={content} placement="top">
         <Button>Top</Button>
       </Tooltip>
-      <Tooltip content={content} placement="left">
-        <Button>Left</Button>
-      </Tooltip>
-      <Tooltip content={content} placement="right">
-        <Button>Right</Button>
-      </Tooltip>
       <Tooltip content={content} placement="bottom">
         <Button>Bottom</Button>
       </Tooltip>
@@ -71,6 +78,37 @@ function TooltipVisibilityDelay() {
         <Button>Open 400 / Close 150</Button>
       </Tooltip>
     </HStack>
+```
+
+### Accessibility
+
+Always provide appropriate accessibility labels when the tooltip trigger is not a simple text string.
+
+```jsx
+function Example() {
+  return (
+    <Tooltip
+      content="Additional information about this icon"
+      accessibilityLabel="Info icon"
+      accessibilityHint="Tap to show more information"
+      accessibilityLabelForContent="Additional information about this icon"
+    >
+      <Icon name="info" size="m" />
+    </Tooltip>
+  );
+}
+```
+
+### Color scheme
+
+By default, tooltips use an inverted color scheme. You can disable this with `invertColorScheme={false}`.
+
+```jsx
+function Example() {
+  return (
+    <Tooltip content="This tooltip uses the regular color scheme" invertColorScheme={false}>
+      <Button>Show tooltip</Button>
+    </Tooltip>
   );
 }
 ```
@@ -84,6 +122,7 @@ function TooltipVisibilityDelay() {
 | `accessibilityHintForContent` | `string` | No | `-` | The accessibilityHint for the content of the tooltip. If content is a string, this is not required as accessibilityHint would be set to the content. Otherwise, this is required |
 | `accessibilityLabel` | `string` | No | `-` | If the children of the trigger is not a string, then you have to set your own accessibilityLabel to ensure that the tooltip is read correctly for voice-overs. |
 | `accessibilityLabelForContent` | `string` | No | `-` | The accessibilityLabel for the content of the tooltip. If content is a string, this is not required as accessibilityHint would be set to the content. Otherwise, this is required |
+| `accessibilityState` | `AccessibilityState` | No | `-` | Accessibility state for the trigger. |
 | `closeDelay` | `number` | No | `-` | Delay (in ms) before hiding the tooltip after dismiss. |
 | `elevation` | `0 \| 1 \| 2` | No | `-` | Determines a components shadow styles. Parent should have overflow set to visible to ensure styles are not clipped. |
 | `gap` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `1` | This value corresponds to how big the gap between the subject and the tooltip is. We do not encourage usage of this prop. But it is enabled for special cases as an escape hatch. |

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

@@ -820,6 +820,7 @@ function Example() {
 | `animationType` | `none \| slide \| fade` | No | `-` | The animationType prop controls how the modal animates.  - slide slides in from the bottom - fade fades into view - none appears without an animation |
 | `children` | `ReactNode \| TrayRenderChildren` | No | `-` | Component to render as the Tray content |
 | `disableCapturePanGestureToDismiss` | `boolean` | No | `false` | Prevents the Drawer from capturing pan gestures on children. Set to true when using a ScrollView as a child |
+| `disableSafeAreaPaddingBottom` | `boolean` | No | `-` | disable safe area padding for bottom of drawer when true |
 | `footer` | `ReactNode \| TrayRenderChildren` | No | `-` | Component to render as the Tray footer |
 | `handleBarAccessibilityLabel` | `string` | No | `-` | Accessibility label for handlebar |
 | `handleBarVariant` | `inside \| outside` | No | `'outside'` | The HandleBar can be rendered inside or outside the drawer, when pinned to bottom. |
@@ -830,6 +831,7 @@ function Example() {
 | `key` | `Key \| null` | No | `-` | - |
 | `onBlur` | `(() => void)` | No | `-` | Callback fired when the overlay is pressed, or swipe to close |
 | `onDismiss` | `(() => void)` | No | `-` | The onDismiss prop allows passing a function that will be called once the modal has been dismissed. |
+| `onOpenComplete` | `(() => void)` | No | `-` | Callback fired when the open animation completes. |
 | `onOrientationChange` | `((event: NativeSyntheticEvent<any>) => void)` | No | `-` | The onOrientationChange callback is called when the orientation changes while the modal is being displayed. The orientation provided is only portrait or landscape. This callback is also called on initial render, regardless of the current orientation. |
 | `onPointerCancel` | `((event: PointerEvent) => void)` | No | `-` | - |
 | `onPointerCancelCapture` | `((event: PointerEvent) => void)` | No | `-` | - |