@coinbase/cds-mcp-server 8.31.3 → 8.31.5

package/CHANGELOG.md

@@ -8,6 +8,14 @@ All notable changes to this project will be documented in this file.
 
 <!-- template-start -->
 
+## 8.31.5 ((12/16/2025, 03:27 PM PST))
+
+This is an artificial version bump with no new change.
+
+## 8.31.4 ((12/16/2025, 10:41 AM PST))
+
+This is an artificial version bump with no new change.
+
 ## 8.31.3 ((12/16/2025, 07:55 AM PST))
 
 This is an artificial version bump with no new change.

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

@@ -0,0 +1,559 @@
+# DateInput
+
+DateInput is a text input field for entering dates by typing. The input automatically formats dates based on the user's locale.
+
+## Import
+
+```tsx
+import { DateInput } from '@coinbase/cds-mobile/dates/DateInput'
+```
+
+## Examples
+
+DateInput uses [TextInput](/components/inputs/TextInput/) for entering dates by typing. Check out [DatePicker](/components/other/DatePicker/) if you would like [Calendar](/components/other/Calendar/) to be shown in a popup as well.
+
+### Basics
+
+DateInput requires controlled state for both the date value and error state. The component automatically formats dates based on the user's locale and validates input on blur.
+
+```jsx
+function Example() {
+  const [date, setDate] = useState(null);
+  const [error, setError] = useState(null);
+
+  return (
+    <DateInput
+      date={date}
+      error={error}
+      onChangeDate={setDate}
+      onErrorDate={setError}
+      label="Birthdate"
+      invalidDateError="Please enter a valid date"
+      requiredError="This field is required"
+      disabledDateError="Date unavailable"
+    />
+  );
+}
+```
+
+#### Validation
+
+##### Minimum and maximum dates
+
+Use `minDate` and `maxDate` props to restrict the date range. Provide the `disabledDateError` prop to show an error when users enter a date outside the allowed range.
+
+```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 oneYearAgo = new Date(today.getFullYear() - 1, today.getMonth(), today.getDate());
+  const oneYearLater = new Date(today.getFullYear() + 1, today.getMonth(), today.getDate());
+
+  return (
+    <DateInput
+      date={date}
+      error={error}
+      onChangeDate={setDate}
+      onErrorDate={setError}
+      minDate={oneYearAgo}
+      maxDate={oneYearLater}
+      label="Date within range"
+      helperText="Date must be within one year of today"
+      invalidDateError="Please enter a valid date"
+      disabledDateError="Date must be within one year of today"
+    />
+  );
+}
+```
+
+##### Disabled dates
+
+The `disabledDates` prop accepts an array of `Date` objects or `[Date, Date]` tuples to disable specific dates or 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 disabledDates = [[oneWeekAgo, twoDaysAgo], oneWeekLater];
+
+  return (
+    <DateInput
+      date={date}
+      error={error}
+      onChangeDate={setDate}
+      onErrorDate={setError}
+      disabledDates={disabledDates}
+      label="Birthdate"
+      invalidDateError="Please enter a valid date"
+      disabledDateError="Date unavailable"
+    />
+  );
+}
+```
+
+##### Custom validation
+
+Use the `DateInputValidationError` class to create custom error states for application-specific validation rules.
+
+```jsx
+function Example() {
+  const [date, setDate] = useState(null);
+  const [error, setError] = useState(null);
+
+  const handleChangeDate = (newDate) => {
+    setDate(newDate);
+    if (newDate && newDate <= new Date()) {
+      setError(new DateInputValidationError('custom', 'Date must be in the future'));
+    } else {
+      setError(null);
+    }
+  };
+
+  return (
+    <DateInput
+      date={date}
+      error={error}
+      onChangeDate={handleChangeDate}
+      onErrorDate={setError}
+      label="Future date only"
+      invalidDateError="Please enter a valid date"
+    />
+  );
+}
+```
+
+### Accessibility
+
+DateInput inherits accessibility props from TextInput. If no `accessibilityLabel` is passed, it will use the `label` as the `accessibilityLabel`. If you want an `accessibilityLabel` that differs from the label, you can set this prop.
+
+Here, since no `accessibilityLabel` is passed, the `accessibilityLabel` will be "Birthdate".
+
+```jsx
+<DateInput label="Birthdate" />
+```
+
+Example of passing an `accessibilityLabel`:
+
+```jsx
+<DateInput accessibilityLabel="Enter your date of birth" label="Birthdate" />
+```
+
+:::tip Accessibility tip
+
+Like any component system, much of the responsibility for building accessible UIs is in your hands as the consumer to properly implement the component composition. We'll do our best to provide sane fallbacks, but here are the biggest gotchas for `DateInput`s you can watch out for.
+
+<br />
+
+##### Error message format
+
+It's advised you always format error messages with `Error: ${errorMessage}`. We'd do that for you, but _i18n_ isn't baked into CDS. DateInput automatically switches to `variant="negative"` when an error is present.
+
+:::
+
+### Localization
+
+The date format automatically adjusts based on the `LocaleContext` provided by `LocaleProvider`.
+
+```jsx
+function Example() {
+  const [usDate, setUsDate] = useState(null);
+  const [usError, setUsError] = useState(null);
+  const [esDate, setEsDate] = useState(null);
+  const [esError, setEsError] = useState(null);
+
+  return (
+    <VStack gap={3}>
+      <VStack>
+        <Text font="label2" color="fgMuted">
+          English (US) - MM/DD/YYYY
+        </Text>
+        <DateInput
+          date={usDate}
+          error={usError}
+          onChangeDate={setUsDate}
+          onErrorDate={setUsError}
+          label="Date"
+          invalidDateError="Please enter a valid date"
+        />
+      </VStack>
+      <LocaleProvider locale="es-ES">
+        <VStack>
+          <Text font="label2" color="fgMuted">
+            Spanish - DD/MM/YYYY
+          </Text>
+          <DateInput
+            date={esDate}
+            error={esError}
+            onChangeDate={setEsDate}
+            onErrorDate={setEsError}
+            label="Fecha"
+            invalidDateError="Ingrese una fecha válida"
+          />
+        </VStack>
+      </LocaleProvider>
+    </VStack>
+  );
+}
+```
+
+### Styling
+
+#### Compact
+
+Use the `compact` prop for a smaller input size.
+
+```jsx
+function Example() {
+  const [date, setDate] = useState(null);
+  const [error, setError] = useState(null);
+
+  return (
+    <VStack gap={3}>
+      <DateInput
+        date={date}
+        error={error}
+        onChangeDate={setDate}
+        onErrorDate={setError}
+        label="Default size"
+        invalidDateError="Please enter a valid date"
+      />
+      <DateInput
+        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 (
+    <DateInput
+      disabled
+      date={date}
+      error={error}
+      onChangeDate={setDate}
+      onErrorDate={setError}
+      label="Disabled input"
+      invalidDateError="Please enter a valid date"
+    />
+  );
+}
+```
+
+#### Helper text
+
+```jsx
+function Example() {
+  const [date, setDate] = useState(null);
+  const [error, setError] = useState(null);
+
+  return (
+    <DateInput
+      date={date}
+      error={error}
+      onChangeDate={setDate}
+      onErrorDate={setError}
+      label="Start date"
+      helperText="Select when you'd like to begin"
+      invalidDateError="Please enter a valid date"
+    />
+  );
+}
+```
+
+#### Label
+
+If you need to render a custom label (e.g. a label with a tooltip), you can use the `labelNode` prop.
+
+```jsx
+function Example() {
+  const [date, setDate] = useState(null);
+  const [error, setError] = useState(null);
+
+  return (
+    <DateInput
+      date={date}
+      error={error}
+      onChangeDate={setDate}
+      onErrorDate={setError}
+      label="Birthdate"
+      labelNode={
+        <HStack alignItems="center" gap={1}>
+          <InputLabel>Birthdate</InputLabel>
+          <Tooltip content="This will be visible to other users.">
+            <Icon active color="fg" name="info" size="xs" />
+          </Tooltip>
+        </HStack>
+      }
+      invalidDateError="Please enter a valid date"
+    />
+  );
+}
+```
+
+#### Required
+
+Use the `required` prop to indicate that the field is mandatory. Provide `requiredError` to display a message if the user blurs the input without a date after typing.
+
+```jsx
+function Example() {
+  const [date, setDate] = useState(null);
+  const [error, setError] = useState(null);
+
+  return (
+    <DateInput
+      required
+      date={date}
+      error={error}
+      onChangeDate={setDate}
+      onErrorDate={setError}
+      label="Birthdate"
+      invalidDateError="Please enter a valid date"
+      requiredError="This field is required"
+    />
+  );
+}
+```
+
+#### Variants
+
+Use the `variant` prop to change the visual style of the input.
+
+```jsx
+function Example() {
+  const [date, setDate] = useState(null);
+  const [error, setError] = useState(null);
+
+  return (
+    <VStack gap={3}>
+      <DateInput
+        date={date}
+        error={error}
+        onChangeDate={setDate}
+        onErrorDate={setError}
+        label="Default variant"
+        invalidDateError="Please enter a valid date"
+      />
+      <DateInput
+        variant="secondary"
+        date={date}
+        error={error}
+        onChangeDate={setDate}
+        onErrorDate={setError}
+        label="Secondary variant"
+        invalidDateError="Please enter a valid date"
+      />
+    </VStack>
+  );
+}
+```
+
+#### Separator
+
+Customize the date format separator using the `separator` prop. Defaults to `/`.
+
+```jsx
+function Example() {
+  const [date1, setDate1] = useState(null);
+  const [error1, setError1] = useState(null);
+  const [date2, setDate2] = useState(null);
+  const [error2, setError2] = useState(null);
+
+  return (
+    <VStack gap={3}>
+      <DateInput
+        date={date1}
+        error={error1}
+        onChangeDate={setDate1}
+        onErrorDate={setError1}
+        separator="/"
+        label="Slash separator"
+        invalidDateError="Please enter a valid date"
+      />
+      <DateInput
+        date={date2}
+        error={error2}
+        onChangeDate={setDate2}
+        onErrorDate={setError2}
+        separator="-"
+        label="Dash separator"
+        invalidDateError="Please enter a valid date"
+      />
+    </VStack>
+  );
+}
+```
+
+#### Start and end adornments
+
+Use the `start` and `end` props to add icons or other elements to the input.
+
+```jsx
+function Example() {
+  const [date, setDate] = useState(null);
+  const [error, setError] = useState(null);
+
+  return (
+    <DateInput
+      date={date}
+      error={error}
+      onChangeDate={setDate}
+      onErrorDate={setError}
+      label="Event date"
+      start={<Icon name="calendarEmpty" size="m" />}
+      invalidDateError="Please enter a valid date"
+    />
+  );
+}
+```
+
+### Event lifecycle
+
+The DateInput fires events in a specific order:
+
+- Typing a date in a blank DateInput:
+
+  `onChange -> onChange -> ... -> onChangeDate -> onErrorDate`
+
+- Typing a date in a DateInput that already had a date:
+
+  `onChange -> onChangeDate -> onChange -> onChange -> ... -> onChangeDate -> onErrorDate`
+
+## Props
+
+| Prop | Type | Required | Default | Description |
+| --- | --- | --- | --- | --- |
+| `date` | `Date \| null` | Yes | `-` | Control the date value of the DateInput. |
+| `error` | `DateInputValidationError \| null` | Yes | `-` | Control the error value of the DateInput. |
+| `onChangeDate` | `(date: Date \| null) => void` | Yes | `-` | Callback function fired when the date changes, e.g. when a valid date is selected or unselected. |
+| `onErrorDate` | `(error: DateInputValidationError \| null) => void` | Yes | `-` | Callback function fired when validation finds an error, e.g. required input fields and impossible or disabled dates. Will always be called after onChangeDate. |
+| `align` | `end \| start \| center \| justify` | No | `start` | Aligns text inside input and helperText |
+| `allowFontScaling` | `boolean` | No | `-` | Specifies whether fonts should scale to respect Text Size accessibility settings. The default is true. |
+| `autoCapitalize` | `none \| sentences \| words \| characters` | No | `-` | Can tell TextInput to automatically capitalize certain characters.      characters: all characters,      words: first letter of each word      sentences: first letter of each sentence (default)      none: dont auto capitalize anything  https://reactnative.dev/docs/textinput#autocapitalize |
+| `autoComplete` | `email \| off \| name \| additional-name \| address-line1 \| address-line2 \| birthdate-day \| birthdate-full \| birthdate-month \| birthdate-year \| cc-csc \| cc-exp \| cc-exp-day \| cc-exp-month \| cc-exp-year \| cc-number \| cc-name \| cc-given-name \| cc-middle-name \| cc-family-name \| cc-type \| country \| current-password \| family-name \| gender \| given-name \| honorific-prefix \| honorific-suffix \| name-family \| name-given \| name-middle \| name-middle-initial \| name-prefix \| name-suffix \| new-password \| nickname \| one-time-code \| organization \| organization-title \| password \| password-new \| postal-address \| postal-address-country \| postal-address-extended \| postal-address-extended-postal-code \| postal-address-locality \| postal-address-region \| postal-code \| street-address \| sms-otp \| tel \| tel-country-code \| tel-national \| tel-device \| url \| username \| username-new` | No | `-` | Specifies autocomplete hints for the system, so it can provide autofill. On Android, the system will always attempt to offer autofill by using heuristics to identify the type of content. To disable autocomplete, set autoComplete to off.  The following values work across platforms:  - additional-name - address-line1 - address-line2 - cc-number - country - current-password - email - family-name - given-name - honorific-prefix - honorific-suffix - name - new-password - off - one-time-code - postal-code - street-address - tel - username  The following values work on iOS only:  - nickname - organization - organization-title - url  The following values work on Android only:  - birthdate-day - birthdate-full - birthdate-month - birthdate-year - cc-csc - cc-exp - cc-exp-day - cc-exp-month - cc-exp-year - gender - name-family - name-given - name-middle - name-middle-initial - name-prefix - name-suffix - password - password-new - postal-address - postal-address-country - postal-address-extended - postal-address-extended-postal-code - postal-address-locality - postal-address-region - sms-otp - tel-country-code - tel-national - tel-device - username-new |
+| `autoCorrect` | `boolean` | No | `-` | If false, disables auto-correct. The default value is true. |
+| `autoFocus` | `boolean` | No | `-` | If true, focuses the input on componentDidMount. The default value is false. |
+| `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 |
+| `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 |
+| `compact` | `boolean` | No | `false` | Enables compact variation |
+| `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 |
+| `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` | Toggles input interactability and opacity |
+| `disabledDateError` | `string` | No | `'Date unavailable'` | Error text to display when a disabled date is selected, including dates before the minDate or after the maxDate. However if the selected date is more than 100 years before the minDate or more than 100 years after the maxDate, the invalidDateError will be displayed instead. |
+| `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. |
+| `end` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | Adds content to the end of the inner input. Refer to diagram for location of endNode in InputStack component |
+| `enterKeyHint` | `search \| done \| go \| next \| send \| previous \| enter` | No | `-` | Determines what text should be shown to the return key on virtual keyboards. Has precedence over the returnKeyType prop. |
+| `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 |
+| `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. |
+| `inputAccessoryViewID` | `string` | No | `-` | Used to connect to an InputAccessoryView. Not part of react-natives documentation, but present in examples and code. See https://reactnative.dev/docs/inputaccessoryview for more information. |
+| `inputBackground` | `currentColor \| fg \| fgMuted \| fgInverse \| fgPrimary \| fgWarning \| fgPositive \| fgNegative \| bg \| bgAlternate \| bgInverse \| bgOverlay \| bgElevation1 \| bgElevation2 \| bgPrimary \| bgPrimaryWash \| bgSecondary \| bgTertiary \| bgSecondaryWash \| bgNegative \| bgNegativeWash \| bgPositive \| bgPositiveWash \| bgWarning \| bgWarningWash \| bgLine \| bgLineHeavy \| bgLineInverse \| bgLinePrimary \| bgLinePrimarySubtle \| accentSubtleRed \| accentBoldRed \| accentSubtleGreen \| accentBoldGreen \| accentSubtleBlue \| accentBoldBlue \| accentSubtlePurple \| accentBoldPurple \| accentSubtleYellow \| accentBoldYellow \| accentSubtleGray \| accentBoldGray \| transparent` | No | `'bg'` | Background color of the input |
+| `inputMode` | `search \| none \| text \| email \| tel \| url \| numeric \| decimal` | No | `-` | Works like the inputmode attribute in HTML, it determines which keyboard to open, e.g. numeric and has precedence over keyboardType. |
+| `invalidDateError` | `string` | No | `'Please enter a valid date'` | Error text to display when an impossible date is selected, e.g. 99/99/2000. This should always be defined for accessibility. Also displays when a date is selected that is more than 100 years before the minDate, or more than 100 years after the maxDate. |
+| `key` | `Key \| null` | No | `-` | - |
+| `keyboardAppearance` | `light \| default \| dark` | No | `-` | Determines the color of the keyboard. |
+| `keyboardType` | `default \| url \| number-pad \| decimal-pad \| numeric \| email-address \| phone-pad \| visible-password \| ascii-capable \| numbers-and-punctuation \| name-phone-pad \| twitter \| web-search` | No | `-` | enum(default, numeric, email-address, ascii-capable, numbers-and-punctuation, url, number-pad, phone-pad, name-phone-pad, decimal-pad, twitter, web-search, visible-password) Determines which keyboard to open, e.g.numeric. The following values work across platforms: - default - numeric - email-address - phone-pad The following values work on iOS: - ascii-capable - numbers-and-punctuation - url - number-pad - name-phone-pad - decimal-pad - twitter - web-search The following values work on Android: - visible-password |
+| `label` | `string` | No | `-` | Short messageArea indicating purpose of input |
+| `labelNode` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | React node to render label. Takes precedence over label. |
+| `labelVariant` | `inside \| outside` | No | `'outside'` | The variant of the label. Only used when compact is not true. |
+| `lineBreakStrategyIOS` | `none \| standard \| hangul-word \| push-out` | No | `-` | Set line break strategy on iOS. |
+| `maxDate` | `Date` | No | `-` | Maximum date allowed to be selected, inclusive. Dates after the maxDate are disabled. Make sure to set disabledDateError as well. |
+| `maxFontSizeMultiplier` | `number \| null` | No | `-` | Specifies largest possible scale a font can reach when allowFontScaling is enabled. Possible values: - null/undefined (default): inherit from the parent node or the global default (0) - 0: no max, ignore parent/global default - >= 1: sets the maxFontSizeMultiplier of this node to this value |
+| `maxLength` | `number` | No | `-` | Limits the maximum number of characters that can be entered. Use this instead of implementing the logic in JS to avoid flicker. |
+| `minDate` | `Date` | No | `-` | Minimum date allowed to be selected, inclusive. Dates before the minDate are disabled. Make sure to set disabledDateError as well. |
+| `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. |
+| `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 |
+| `onChange` | `((e: NativeSyntheticEvent<TextInputChangeEventData>) => void)` | No | `-` | - |
+| `onChangeText` | `((text: string) => void)` | No | `-` | - |
+| `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. |
+| `onPointerCancel` | `((event: PointerEvent) => void)` | No | `-` | - |
+| `onPointerCancelCapture` | `((event: PointerEvent) => void)` | No | `-` | - |
+| `onPointerDown` | `((event: PointerEvent) => void)` | No | `-` | - |
+| `onPointerDownCapture` | `((event: PointerEvent) => void)` | No | `-` | - |
+| `onPointerEnter` | `((event: PointerEvent) => void)` | No | `-` | - |
+| `onPointerEnterCapture` | `((event: PointerEvent) => void)` | No | `-` | - |
+| `onPointerLeave` | `((event: PointerEvent) => void)` | No | `-` | - |
+| `onPointerLeaveCapture` | `((event: PointerEvent) => void)` | No | `-` | - |
+| `onPointerMove` | `((event: PointerEvent) => void)` | No | `-` | - |
+| `onPointerMoveCapture` | `((event: PointerEvent) => void)` | No | `-` | - |
+| `onPointerUp` | `((event: PointerEvent) => void)` | No | `-` | - |
+| `onPointerUpCapture` | `((event: PointerEvent) => void)` | No | `-` | - |
+| `onPress` | `((e: NativeSyntheticEvent<NativeTouchEvent>) => void)` | No | `-` | Called when a single tap gesture is detected. |
+| `onPressIn` | `((e: NativeSyntheticEvent<NativeTouchEvent>) => void)` | No | `-` | Callback that is called when a touch is engaged. |
+| `onPressOut` | `((e: NativeSyntheticEvent<NativeTouchEvent>) => void)` | No | `-` | Callback that is called when a touch is released. |
+| `onScroll` | `((e: NativeSyntheticEvent<TextInputScrollEventData>) => void)` | No | `-` | Invoked on content scroll with  { nativeEvent: { contentOffset: { x, y } } }.  May also contain other properties from ScrollEvent but on Android contentSize is not provided for performance reasons. |
+| `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. |
+| `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 |
+| `readOnly` | `boolean` | No | `-` | If true, text is not editable. The default value is false. |
+| `ref` | `((instance: TextInput \| null) => void) \| RefObject<TextInput> \| 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). |
+| `required` | `boolean` | No | `-` | If required, the requiredError will be displayed if a user blurs the input, without a date selected, after having typed into it. |
+| `requiredError` | `string` | No | `'This field is required'` | Error text to display when required is true and a user blurs the input without a date selected, after having typed into it. |
+| `returnKeyLabel` | `string` | No | `-` | Sets the return key to the label. Use it instead of returnKeyType. |
+| `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. |
+| `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 |
+| `selectionHandleColor` | `ColorValue \| null` | No | `-` | When provided it will set the color of the selection handles when highlighting text. Unlike the behavior of selectionColor the handle color will be set independently from the color of the text selection box. |
+| `selectionState` | `DocumentSelectionState` | No | `-` | See DocumentSelectionState.js, some state that is responsible for maintaining selection information for a document |
+| `separator` | `string` | No | `-` | Date format separator character, e.g. the / in MM/DD/YYYY. Defaults to forward slash (/). |
+| `showSoftInputOnFocus` | `boolean` | No | `-` | When false, it will prevent the soft keyboard from showing when the field is focused. The default value is true |
+| `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 |
+| `style` | `null \| false \| ViewStyle \| RegisteredStyle<ViewStyle> \| RecursiveArray<ViewStyle \| Falsy \| RegisteredStyle<ViewStyle>>` | No | `-` | - |
+| `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 |
+| `textAlign` | `left \| right \| center \| unset` | No | `-` | Native TextInput textAlign with the extra unset option to remove the textAlign style. Use this to workaround the issue where long text does not ellipsis in TextInput |
+| `textAlignVertical` | `top \| bottom \| auto \| center` | No | `-` | Vertically align text when multiline is set to true |
+| `textBreakStrategy` | `simple \| highQuality \| balanced` | No | `-` | Set text break strategy on Android API Level 23+, possible values are simple, highQuality, balanced The default value is simple. |
+| `textContentType` | `none \| location \| name \| nickname \| password \| username \| URL \| addressCity \| addressCityAndState \| addressState \| countryName \| creditCardNumber \| creditCardExpiration \| creditCardExpirationMonth \| creditCardExpirationYear \| creditCardSecurityCode \| creditCardType \| creditCardName \| creditCardGivenName \| creditCardMiddleName \| creditCardFamilyName \| emailAddress \| familyName \| fullStreetAddress \| givenName \| jobTitle \| middleName \| namePrefix \| nameSuffix \| organizationName \| postalCode \| streetAddressLine1 \| streetAddressLine2 \| sublocality \| telephoneNumber \| newPassword \| oneTimeCode \| birthdate \| birthdateDay \| birthdateMonth \| birthdateYear` | No | `-` | Give the keyboard and the system information about the expected semantic meaning for the content that users enter.  To disable autofill, set textContentType to none.  Possible values for textContentType are:   - none  - URL  - addressCity  - addressCityAndState  - addressState  - countryName  - creditCardNumber  - creditCardExpiration (iOS 17+)  - creditCardExpirationMonth (iOS 17+)  - creditCardExpirationYear (iOS 17+)  - creditCardSecurityCode (iOS 17+)  - creditCardType (iOS 17+)  - creditCardName (iOS 17+)  - creditCardGivenName (iOS 17+)  - creditCardMiddleName (iOS 17+)  - creditCardFamilyName (iOS 17+)  - emailAddress  - familyName  - fullStreetAddress  - givenName  - jobTitle  - location  - middleName  - name  - namePrefix  - nameSuffix  - nickname  - organizationName  - postalCode  - streetAddressLine1  - streetAddressLine2  - sublocality  - telephoneNumber  - username  - password  - newPassword  - oneTimeCode  - birthdate (iOS 17+)  - birthdateDay (iOS 17+)  - birthdateMonth (iOS 17+)  - birthdateYear (iOS 17+) |
+| `underlineColorAndroid` | `string \| OpaqueColorValue` | No | `-` | The color of the textInput underline. |
+| `variant` | `primary \| secondary \| positive \| negative \| foregroundMuted \| foreground` | No | `-` | Determines the sentiment of the input. Because we allow startContent and endContent to be custom ReactNode, the content placed inside these slots will not change colors according to the variant. You will have to add that yourself |
+| `verticalAlign` | `top \| bottom \| auto \| middle` | No | `-` | Vertically align text when multiline is set to true |
+| `width` | `string \| number` | No | `100%` | Width of input as a percentage string. |
+
+

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

@@ -10,7 +10,9 @@ import { DatePicker } from '@coinbase/cds-mobile/dates/DatePicker'
 
 ## Examples
 
-### Basic example
+DatePicker combines [DateInput](/components/other/DateInput/) with [Calendar](/components/other/Calendar/) for date selection.
+
+### Basics
 
 A basic DatePicker with the minimum props necessary for correct UX.
 
@@ -36,7 +38,7 @@ function Example() {
 }
 ```
 
-### Custom Label
+#### Custom Label
 
 If you need to render a custom label (e.g. a label with a tooltip), you can use the `labelNode` prop.
 
@@ -70,7 +72,7 @@ function Example() {
 }
 ```
 
-### Invalid dates
+#### Invalid dates
 
 Always provide the `invalidDateError` prop for when users type an impossible date like 99/99/2000.
 
@@ -92,7 +94,7 @@ function Example() {
 }
 ```
 
-### Validation
+#### Validation
 
 The DatePicker handles common error states internally, and calls `onErrorDate` when the validity / error state changes.
 
@@ -120,7 +122,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.
 
@@ -150,7 +152,7 @@ function Example() {
 }
 ```
 
-### Localization
+#### Localization
 
 The date format is automatically adjusted to the `LocaleContext`. Check `LocaleProvider` usage below.
 
@@ -174,7 +176,7 @@ function Example() {
 }
 ```
 
-### Seeding the date
+#### Seeding the date
 
 Defaults to today when undefined.
 
@@ -201,7 +203,7 @@ function Example() {
 }
 ```
 
-### Required field
+#### 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.
 
@@ -225,7 +227,7 @@ function Example() {
 }
 ```
 
-### Minimum and maximum dates
+#### 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.
 
@@ -254,7 +256,7 @@ function Example() {
 }
 ```
 
-### Multiple pickers
+#### Multiple pickers
 
 This is a complex example using many different props. We use multiple DatePickers together to allow a user to select a date range.
 
@@ -356,7 +358,7 @@ function Example() {
 }
 ```
 
-### Event lifecycle
+#### Event lifecycle
 
 - Selecting a date with the native picker (mobile) or Calendar (web):
 

package/mcp-docs/mobile/routes.txt

@@ -30,6 +30,7 @@
 - [DotStatusColor](mobile/components/DotStatusColor.txt): Dots are component adornments, typically used to communicate a numerical value or indicate the status or identity of a component to the end-user.
 - [DotCount](mobile/components/DotCount.txt): Dots are component adornments, typically used to communicate a numerical value or indicate the status or identity of a component to the end-user.
 - [DatePicker](mobile/components/DatePicker.txt): 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.
+- [DateInput](mobile/components/DateInput.txt): DateInput is a text input field for entering dates by typing. The input automatically formats dates based on the user's locale.
 - [RollingNumber](mobile/components/RollingNumber.txt): A numeric display that animates value changes with rolling digits.
 - [Tour](mobile/components/Tour.txt): Creates guided tours of a user interface.
 - [TopNavBar](mobile/components/TopNavBar.txt): A customizable top navigation bar that can contain start, middle, and end content, as well as a bottom section for elements like tabs. It remains sticky at the top of the screen.

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

@@ -0,0 +1,469 @@
+# DateInput
+
+DateInput is a text input field for entering dates by typing. The input automatically formats dates based on the user's locale.
+
+## Import
+
+```tsx
+import { DateInput } from '@coinbase/cds-web/dates/DateInput'
+```
+
+## Examples
+
+DateInput uses [TextInput](/components/inputs/TextInput/) for entering dates by typing. Check out [DatePicker](/components/other/DatePicker/) if you would like [Calendar](/components/other/Calendar/) to be shown in a popup as well.
+
+### Basics
+
+DateInput requires controlled state for both the date value and error state. The component automatically formats dates based on the user's locale and validates input on blur.
+
+```jsx live
+function Example() {
+  const [date, setDate] = useState(null);
+  const [error, setError] = useState(null);
+
+  return (
+    <DateInput
+      date={date}
+      error={error}
+      onChangeDate={setDate}
+      onErrorDate={setError}
+      label="Birthdate"
+      invalidDateError="Please enter a valid date"
+      requiredError="This field is required"
+      disabledDateError="Date unavailable"
+    />
+  );
+}
+```
+
+#### Validation
+
+##### Minimum and maximum dates
+
+Use `minDate` and `maxDate` props to restrict the date range. Provide the `disabledDateError` prop to show an error when users enter a date outside the allowed range.
+
+```jsx live
+function Example() {
+  const [date, setDate] = useState(null);
+  const [error, setError] = useState(null);
+
+  const today = new Date(new Date().setHours(0, 0, 0, 0));
+  const oneYearAgo = new Date(today.getFullYear() - 1, today.getMonth(), today.getDate());
+  const oneYearLater = new Date(today.getFullYear() + 1, today.getMonth(), today.getDate());
+
+  return (
+    <DateInput
+      date={date}
+      error={error}
+      onChangeDate={setDate}
+      onErrorDate={setError}
+      minDate={oneYearAgo}
+      maxDate={oneYearLater}
+      label="Date within range"
+      helperText="Date must be within one year of today"
+      invalidDateError="Please enter a valid date"
+      disabledDateError="Date must be within one year of today"
+    />
+  );
+}
+```
+
+##### Disabled dates
+
+The `disabledDates` prop accepts an array of `Date` objects or `[Date, Date]` tuples to disable specific dates or ranges.
+
+```jsx live
+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 disabledDates = [[oneWeekAgo, twoDaysAgo], oneWeekLater];
+
+  return (
+    <DateInput
+      date={date}
+      error={error}
+      onChangeDate={setDate}
+      onErrorDate={setError}
+      disabledDates={disabledDates}
+      label="Birthdate"
+      invalidDateError="Please enter a valid date"
+      disabledDateError="Date unavailable"
+    />
+  );
+}
+```
+
+##### Custom validation
+
+Use the `DateInputValidationError` class to create custom error states for application-specific validation rules.
+
+```jsx live
+function Example() {
+  const [date, setDate] = useState(null);
+  const [error, setError] = useState(null);
+
+  const handleChangeDate = (newDate) => {
+    setDate(newDate);
+    if (newDate && newDate <= new Date()) {
+      setError(new DateInputValidationError('custom', 'Date must be in the future'));
+    } else {
+      setError(null);
+    }
+  };
+
+  return (
+    <DateInput
+      date={date}
+      error={error}
+      onChangeDate={handleChangeDate}
+      onErrorDate={setError}
+      label="Future date only"
+      invalidDateError="Please enter a valid date"
+    />
+  );
+}
+```
+
+### Accessibility
+
+DateInput inherits accessibility props from TextInput. If no `accessibilityLabel` is passed, it will use the `label` as the `accessibilityLabel`. If you want an `accessibilityLabel` that differs from the label, you can set this prop.
+
+Here, since no `accessibilityLabel` is passed, the `accessibilityLabel` will be "Birthdate".
+
+```jsx
+<DateInput label="Birthdate" />
+```
+
+Example of passing an `accessibilityLabel`. For web, this will set `aria-label="Enter your date of birth"` under the hood.
+
+```jsx
+<DateInput accessibilityLabel="Enter your date of birth" label="Birthdate" />
+```
+
+:::tip Accessibility tip
+
+Like any component system, much of the responsibility for building accessible UIs is in your hands as the consumer to properly implement the component composition. We'll do our best to provide sane fallbacks, but here are the biggest gotchas for `DateInput`s you can watch out for.
+
+<br />
+
+##### Error message format
+
+It's advised you always format error messages with `Error: ${errorMessage}`. We'd do that for you, but _i18n_ isn't baked into CDS. DateInput automatically switches to `variant="negative"` when an error is present.
+
+:::
+
+### Localization
+
+The date format automatically adjusts based on the `LocaleContext` provided by `LocaleProvider`.
+
+```jsx live
+function Example() {
+  const [usDate, setUsDate] = useState(null);
+  const [usError, setUsError] = useState(null);
+  const [esDate, setEsDate] = useState(null);
+  const [esError, setEsError] = useState(null);
+
+  return (
+    <VStack gap={3}>
+      <VStack>
+        <Text font="label2" color="fgMuted">
+          English (US) - MM/DD/YYYY
+        </Text>
+        <DateInput
+          date={usDate}
+          error={usError}
+          onChangeDate={setUsDate}
+          onErrorDate={setUsError}
+          label="Date"
+          invalidDateError="Please enter a valid date"
+        />
+      </VStack>
+      <LocaleProvider locale="es-ES">
+        <VStack>
+          <Text font="label2" color="fgMuted">
+            Spanish - DD/MM/YYYY
+          </Text>
+          <DateInput
+            date={esDate}
+            error={esError}
+            onChangeDate={setEsDate}
+            onErrorDate={setEsError}
+            label="Fecha"
+            invalidDateError="Ingrese una fecha válida"
+          />
+        </VStack>
+      </LocaleProvider>
+    </VStack>
+  );
+}
+```
+
+### Styling
+
+DateInput supports the same styling functionality as [TextInput](/components/inputs/TextInput/).
+
+#### Compact
+
+Use the `compact` prop for a smaller input size.
+
+```jsx live
+function Example() {
+  const [date, setDate] = useState(null);
+  const [error, setError] = useState(null);
+
+  return (
+    <VStack gap={3}>
+      <DateInput
+        date={date}
+        error={error}
+        onChangeDate={setDate}
+        onErrorDate={setError}
+        label="Default size"
+        invalidDateError="Please enter a valid date"
+      />
+      <DateInput
+        compact
+        date={date}
+        error={error}
+        onChangeDate={setDate}
+        onErrorDate={setError}
+        label="Compact size"
+        invalidDateError="Please enter a valid date"
+      />
+    </VStack>
+  );
+}
+```
+
+#### Disabled
+
+```jsx live
+function Example() {
+  const [date, setDate] = useState(new Date());
+  const [error, setError] = useState(null);
+
+  return (
+    <DateInput
+      disabled
+      date={date}
+      error={error}
+      onChangeDate={setDate}
+      onErrorDate={setError}
+      label="Disabled input"
+      invalidDateError="Please enter a valid date"
+    />
+  );
+}
+```
+
+#### Helper text
+
+```jsx live
+function Example() {
+  const [date, setDate] = useState(null);
+  const [error, setError] = useState(null);
+
+  return (
+    <DateInput
+      date={date}
+      error={error}
+      onChangeDate={setDate}
+      onErrorDate={setError}
+      label="Start date"
+      helperText="Select when you'd like to begin"
+      invalidDateError="Please enter a valid date"
+    />
+  );
+}
+```
+
+#### Label
+
+If you need to render a custom label (e.g. a label with a tooltip), you can use the `labelNode` prop.
+
+```jsx live
+function Example() {
+  const [date, setDate] = useState(null);
+  const [error, setError] = useState(null);
+
+  return (
+    <DateInput
+      id="birthdate-tooltip"
+      date={date}
+      error={error}
+      onChangeDate={setDate}
+      onErrorDate={setError}
+      label="Birthdate"
+      labelNode={
+        <InputLabel htmlFor="birthdate-tooltip">
+          <HStack alignItems="center" gap={1}>
+            Birthdate
+            <Tooltip content="This will be visible to other users.">
+              <Icon active color="fg" name="info" size="xs" tabIndex={0} />
+            </Tooltip>
+          </HStack>
+        </InputLabel>
+      }
+      invalidDateError="Please enter a valid date"
+    />
+  );
+}
+```
+
+#### Required
+
+Use the `required` prop to indicate that the field is mandatory. Provide `requiredError` to display a message if the user blurs the input without a date after typing.
+
+```jsx live
+function Example() {
+  const [date, setDate] = useState(null);
+  const [error, setError] = useState(null);
+
+  return (
+    <DateInput
+      required
+      date={date}
+      error={error}
+      onChangeDate={setDate}
+      onErrorDate={setError}
+      label="Birthdate"
+      invalidDateError="Please enter a valid date"
+      requiredError="This field is required"
+    />
+  );
+}
+```
+
+#### Variants
+
+Use the `variant` prop to change the visual style of the input.
+
+```jsx live
+function Example() {
+  const [date, setDate] = useState(null);
+  const [error, setError] = useState(null);
+
+  return (
+    <VStack gap={3}>
+      <DateInput
+        date={date}
+        error={error}
+        onChangeDate={setDate}
+        onErrorDate={setError}
+        label="Default variant"
+        invalidDateError="Please enter a valid date"
+      />
+      <DateInput
+        variant="secondary"
+        date={date}
+        error={error}
+        onChangeDate={setDate}
+        onErrorDate={setError}
+        label="Secondary variant"
+        invalidDateError="Please enter a valid date"
+      />
+    </VStack>
+  );
+}
+```
+
+#### Separator
+
+Customize the date format separator using the `separator` prop. Defaults to `/`.
+
+```jsx live
+function Example() {
+  const [date1, setDate1] = useState(null);
+  const [error1, setError1] = useState(null);
+  const [date2, setDate2] = useState(null);
+  const [error2, setError2] = useState(null);
+
+  return (
+    <VStack gap={3}>
+      <DateInput
+        date={date1}
+        error={error1}
+        onChangeDate={setDate1}
+        onErrorDate={setError1}
+        separator="/"
+        label="Slash separator"
+        invalidDateError="Please enter a valid date"
+      />
+      <DateInput
+        date={date2}
+        error={error2}
+        onChangeDate={setDate2}
+        onErrorDate={setError2}
+        separator="-"
+        label="Dash separator"
+        invalidDateError="Please enter a valid date"
+      />
+    </VStack>
+  );
+}
+```
+
+### Event Lifecycle
+
+The DateInput fires events in a specific order:
+
+- Typing a date in a blank DateInput:
+
+  `onChange -> onChange -> ... -> onChangeDate -> onErrorDate`
+
+- Typing a date in a DateInput that already had a date:
+
+  `onChange -> onChangeDate -> onChange -> onChange -> ... -> onChangeDate -> onErrorDate`
+
+## Props
+
+| Prop | Type | Required | Default | Description |
+| --- | --- | --- | --- | --- |
+| `date` | `Date \| null` | Yes | `-` | Control the date value of the DateInput. |
+| `error` | `DateInputValidationError \| null` | Yes | `-` | Control the error value of the DateInput. |
+| `onChangeDate` | `(date: Date \| null) => void` | Yes | `-` | Callback function fired when the date changes, e.g. when a valid date is selected or unselected. |
+| `onErrorDate` | `(error: DateInputValidationError \| null) => void` | Yes | `-` | Callback function fired when validation finds an error, e.g. required input fields and impossible or disabled dates. Will always be called after onChangeDate. |
+| `align` | `center \| start \| end \| justify` | No | `start` | Aligns text inside input and helperText |
+| `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` | Adds border to input |
+| `className` | `string` | No | `-` | - |
+| `compact` | `boolean` | No | `false` | Enables compact variation |
+| `disabled` | `boolean` | No | `false` | Toggles input interactability and opacity |
+| `disabledDateError` | `string` | No | `'Date unavailable'` | Error text to display when a disabled date is selected, including dates before the minDate or after the maxDate. However if the selected date is more than 100 years before the minDate or more than 100 years after the maxDate, the invalidDateError will be displayed instead. |
+| `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. |
+| `enableColorSurge` | `boolean` | No | `-` | Enable Color Surge motion |
+| `end` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | Adds content to the end of the inner input. Refer to diagram for location of endNode in InputStack component |
+| `height` | `((Height<string \| number> \| { base?: Height<string \| number>; phone?: Height<string \| number> \| undefined; tablet?: Height<string \| number> \| undefined; desktop?: Height<string \| number> \| undefined; }) & (string \| number)) \| undefined` | 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 |
+| `inputBackground` | `currentColor \| fg \| fgMuted \| fgInverse \| fgPrimary \| fgWarning \| fgPositive \| fgNegative \| bg \| bgAlternate \| bgInverse \| bgOverlay \| bgElevation1 \| bgElevation2 \| bgPrimary \| bgPrimaryWash \| bgSecondary \| bgTertiary \| bgSecondaryWash \| bgNegative \| bgNegativeWash \| bgPositive \| bgPositiveWash \| bgWarning \| bgWarningWash \| bgLine \| bgLineHeavy \| bgLineInverse \| bgLinePrimary \| bgLinePrimarySubtle \| accentSubtleRed \| accentBoldRed \| accentSubtleGreen \| accentBoldGreen \| accentSubtleBlue \| accentBoldBlue \| accentSubtlePurple \| accentBoldPurple \| accentSubtleYellow \| accentBoldYellow \| accentSubtleGray \| accentBoldGray \| transparent` | No | `'bg'` | Background color of the input. |
+| `invalidDateError` | `string` | No | `'Please enter a valid date'` | Error text to display when an impossible date is selected, e.g. 99/99/2000. This should always be defined for accessibility. Also displays when a date is selected that is more than 100 years before the minDate, or more than 100 years after the maxDate. |
+| `key` | `Key \| null` | No | `-` | - |
+| `label` | `string` | No | `-` | Short messageArea indicating purpose of input |
+| `labelNode` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | React node to render label. Takes precedence over label. |
+| `labelVariant` | `inside \| outside` | No | `'outside'` | The variant of the label. Only used when compact is not true. |
+| `maxDate` | `Date` | No | `-` | Maximum date allowed to be selected, inclusive. Dates after the maxDate are disabled. Make sure to set disabledDateError as well. |
+| `minDate` | `Date` | No | `-` | Minimum date allowed to be selected, inclusive. Dates before the minDate are disabled. Make sure to set disabledDateError as well. |
+| `onChange` | `ChangeEventHandler<HTMLInputElement>` | No | `-` | - |
+| `onClick` | `(MouseEventHandler<Element> & MouseEventHandler<HTMLInputElement>)` | No | `-` | Callback fired when pressed/clicked |
+| `placeholder` | `string` | No | `-` | Placeholder text displayed inside of the input. Will be replaced if there is a value. |
+| `ref` | `((instance: HTMLInputElement \| null) => void) \| RefObject<HTMLInputElement> \| null` | No | `-` | - |
+| `required` | `boolean` | No | `-` | If required, the requiredError will be displayed if a user blurs the input, without a date selected, after having typed into it. |
+| `requiredError` | `string` | No | `'This field is required'` | Error text to display when required is true and a user blurs the input without a date selected, after having typed into it. |
+| `separator` | `string` | No | `-` | Date format separator character, e.g. the / in MM/DD/YYYY. Defaults to forward slash (/). |
+| `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 |
+| `style` | `CSSProperties` | No | `-` | - |
+| `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 |
+| `testIDMap` | `{ start?: string; end?: string \| undefined; label?: string \| undefined; helperText?: string \| undefined; } \| undefined` | No | `-` | Add ability to test individual parts of the input |
+| `type` | `number \| color \| button \| search \| time \| image \| text \| hidden \| string & {} \| email \| checkbox \| radio \| tel \| url \| date \| submit \| reset \| datetime-local \| file \| month \| password \| range \| week` | No | `-` | - |
+| `variant` | `primary \| secondary \| positive \| negative \| foregroundMuted \| foreground` | No | `foregroundMuted` | Determines the sentiment of the input. Because we allow startContent and endContent to be custom ReactNode, the content placed inside these slots will not change colors according to the variant. You will have to add that yourself |
+| `width` | `ResponsiveProp<Width<string \| number>>` | No | `100%` | Width of input as a percentage string. |
+
+

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

@@ -10,7 +10,9 @@ import { DatePicker } from '@coinbase/cds-web/dates/DatePicker'
 
 ## Examples
 
-### Basic example
+DatePicker combines [DateInput](/components/other/DateInput/) with [Calendar](/components/other/Calendar/) for date selection.
+
+### Basics
 
 A basic DatePicker with the minimum props necessary for correct UX.
 
@@ -36,7 +38,7 @@ function Example() {
 }
 ```
 
-### Custom Label
+#### Custom Label
 
 If you need to render a custom label (e.g. a label with a tooltip), you can use the `labelNode` prop.
 
@@ -70,7 +72,7 @@ function Example() {
 }
 ```
 
-### Invalid dates
+#### Invalid dates
 
 Always provide the `invalidDateError` prop for when users type an impossible date like 99/99/2000.
 
@@ -92,7 +94,7 @@ function Example() {
 }
 ```
 
-### Validation
+#### Validation
 
 The DatePicker handles common error states internally, and calls `onErrorDate` when the validity / error state changes.
 
@@ -120,7 +122,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.
 
@@ -150,7 +152,7 @@ function Example() {
 }
 ```
 
-### Localization
+#### Localization
 
 The date format is automatically adjusted to the `LocaleContext`. Check `LocaleProvider` usage below.
 
@@ -174,7 +176,7 @@ function Example() {
 }
 ```
 
-### Seeding the date
+#### Seeding the date
 
 Defaults to today when undefined.
 
@@ -203,7 +205,7 @@ function Example() {
 }
 ```
 
-### Required field
+#### 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.
 
@@ -227,7 +229,7 @@ function Example() {
 }
 ```
 
-### Highlighted dates
+#### 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.
 
@@ -259,7 +261,7 @@ function Example() {
 }
 ```
 
-### Minimum and maximum dates
+#### 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.
 
@@ -288,7 +290,7 @@ function Example() {
 }
 ```
 
-### Disabled dates
+#### 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.
 
@@ -323,7 +325,7 @@ function Example() {
 }
 ```
 
-### Multiple pickers
+#### Multiple pickers
 
 This is a complex example using many different props. We use multiple DatePickers together to allow a user to select a date range.
 
@@ -427,7 +429,7 @@ function Example() {
 }
 ```
 
-### Event lifecycle
+#### Event lifecycle
 
 - Selecting a date with the native picker (mobile) or Calendar (web):
 

package/mcp-docs/web/routes.txt

@@ -35,6 +35,7 @@
 - [DotStatusColor](web/components/DotStatusColor.txt): Dots are component adornments, typically used to communicate a numerical value or indicate the status or identity of a component to the end-user.
 - [DotCount](web/components/DotCount.txt): Dots are component adornments, typically used to communicate a numerical value or indicate the status or identity of a component to the end-user.
 - [DatePicker](web/components/DatePicker.txt): 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.
+- [DateInput](web/components/DateInput.txt): DateInput is a text input field for entering dates by typing. The input automatically formats dates based on the user's locale.
 - [Calendar](web/components/Calendar.txt): Calendar is a flexible, accessible date grid component for selecting dates, supporting keyboard navigation, disabled/highlighted dates, and custom rendering.
 - [RollingNumber](web/components/RollingNumber.txt): A numeric display that animates value changes with rolling digits.
 - [Tour](web/components/Tour.txt): Creates guided tours of a user interface.

package/package.json

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