MetaMask · cursor · Apr 6, 2026
@@ -1,7 +1,6 @@
+import { TextVariant } from '@metamask/design-system-shared';
 import { typography } from '@metamask/design-tokens';
 
-import { TextVariant } from '../../types';
-
 /**
  * Typographic metrics for Input: same tokens as `text-*` utilities but **without** `lineHeight`.
  * React Native `TextInput` aligns single-line text more predictably when line height is not set

@@ -1,9 +1,8 @@
+import { TextVariant } from '@metamask/design-system-shared';
 import type { Meta, StoryObj } from '@storybook/react-native';
 import { useEffect, useState } from 'react';
 import { View } from 'react-native';
 
-import { TextVariant } from '../../types';
-
 import { Input } from './Input';
 import type { InputProps } from './Input.types';
 

@@ -1,3 +1,4 @@
+import { TextVariant } from '@metamask/design-system-shared';
 import {
   Theme,
   ThemeProvider,
@@ -11,8 +12,6 @@ import { Platform, TextInput } from 'react-native';
 import type { StyleProp, TextStyle } from 'react-native';
 import { create } from 'react-test-renderer';
 
-import { TextVariant } from '../../types';
-
 import { Input } from './Input';
 
 const TEST_ID = 'input';

@@ -1,3 +1,4 @@
+import { TextVariant } from '@metamask/design-system-shared';
 import {
   Theme,
   useTailwind,
@@ -7,7 +8,7 @@ import { darkTheme, lightTheme } from '@metamask/design-tokens';
 import { forwardRef, useCallback, useMemo, useState } from 'react';
 import { Platform, TextInput } from 'react-native';
 
-import { FontFamily, TextVariant } from '../../types';
+import { FontFamily } from '../../types';
 import {
   MAP_TEXT_VARIANT_FONTWEIGHT,
   TWCLASSMAP_TEXT_FONTWEIGHT,

@@ -1,41 +1,23 @@
+import type { InputPropsShared } from '@metamask/design-system-shared';
 import type { TextInputProps } from 'react-native';
 
-import type { TextVariant } from '../../types';
-
 export type InputProps = Omit<
   TextInputProps,
   'editable' | 'value' | 'defaultValue'
-> & {
-  /**
-   * Controlled value for Input.
-   */
-  value: string;
-  /**
-   * Optional enum to select between Typography variants.
-   *
-   * @default BodyMd
-   */
-  textVariant?: TextVariant;
-  /**
-   * Optional boolean to disable Input.
-   *
-   * @default false
-   */
-  isDisabled?: boolean;
-  /**
-   * Optional boolean to show readonly input.
-   *
-   * @default false
-   */
-  isReadonly?: boolean;
-  /**
-   * Optional boolean to disable state styles.
-   *
-   * @default false
-   */
-  isStateStylesDisabled?: boolean;
-  /**
-   * Optional prop to add twrnc overriding classNames.
-   */
-  twClassName?: string;
-};
+> &
+  InputPropsShared & {
+    /**
+     * Controlled value for Input.
+     */
+    value: string;
+    /**
+     * Optional boolean to disable state styles.
+     *
+     * @default false
+     */
+    isStateStylesDisabled?: boolean;
+    /**
+     * Optional prop to add twrnc overriding classNames.
+     */
+    twClassName?: string;
+  };
@@ -1,6 +1,7 @@
+import { TextVariant } from '@metamask/design-system-shared';
 import { typography } from '@metamask/design-tokens';
 
-import { FontWeight, TextVariant } from '../../types';
+import { FontWeight } from '../../types';
 
 // Mappings
 export const TWCLASSMAP_TEXT_FONTWEIGHT: {

@@ -1,8 +1,9 @@
+import { TextVariant } from '@metamask/design-system-shared';
 import { useTailwind } from '@metamask/design-system-twrnc-preset';
 import React, { useMemo } from 'react';
 import { Text as RNText } from 'react-native';
 
-import { FontFamily, FontStyle, TextVariant, TextColor } from '../../types';
+import { FontFamily, FontStyle, TextColor } from '../../types';
 
 import {
   MAP_TEXT_VARIANT_FONTWEIGHT,

@@ -1,13 +1,7 @@
-// Third party dependencies.
+import type { TextVariant } from '@metamask/design-system-shared';
 import type { TextProps as RNTextProps } from 'react-native';
 
-import type {
-  TextVariant,
-  TextColor,
-  FontWeight,
-  FontFamily,
-  FontStyle,
-} from '../../types';
+import type { TextColor, FontWeight, FontFamily, FontStyle } from '../../types';
 
 /**
  * Text component props.

@@ -1,9 +1,4 @@
-export {
-  TextVariant,
-  TextColor,
-  FontWeight,
-  FontFamily,
-  FontStyle,
-} from '../../types';
+export { TextVariant } from '@metamask/design-system-shared';
+export { TextColor, FontWeight, FontFamily, FontStyle } from '../../types';
 export { Text } from './Text';
 export type { TextProps } from './Text.types';
@@ -285,29 +285,7 @@ export enum ButtonIconVariant {
 /**
  * Text - variant
  */
-export enum TextVariant {
-  // Display Sizes
-  DisplayLg = 'display-lg',
-  DisplayMd = 'display-md',
-
-  // Heading Sizes
-  HeadingLg = 'heading-lg',
-  HeadingMd = 'heading-md',
-  HeadingSm = 'heading-sm',
-
-  // Body Sizes
-  BodyLg = 'body-lg',
-  BodyMd = 'body-md',
-  BodySm = 'body-sm',
-  BodyXs = 'body-xs',
-
-  // Special Typography Variants
-  PageHeading = 'page-heading',
-  SectionHeading = 'section-heading',
-  ButtonLabelMd = 'button-label-md',
-  ButtonLabelLg = 'button-label-lg',
-  AmountDisplayLg = 'amount-display-lg',
-}
+export { TextVariant } from '@metamask/design-system-shared';
 
 /**
  * Text - color

@@ -1,8 +1,7 @@
+import { TextVariant } from '@metamask/design-system-shared';
 import type { Meta, StoryObj } from '@storybook/react-vite';
 import React from 'react';
 
-import { TextVariant } from '../../types';
-
 import { Input } from './Input';
 import type { InputProps } from './Input.types';
 import README from './README.mdx';

@@ -1,8 +1,7 @@
+import { TextVariant } from '@metamask/design-system-shared';
 import { render, screen, fireEvent } from '@testing-library/react';
 import React, { createRef } from 'react';
 
-import { TextVariant } from '../../types';
-
 import { Input } from './Input';
 
 const TEST_ID = 'input';

@@ -1,6 +1,6 @@
+import { TextVariant } from '@metamask/design-system-shared';
 import React, { forwardRef } from 'react';
 
-import { TextVariant } from '../../types';
 import { twMerge } from '../../utils/tw-merge';
 import {
   CLASSMAP_TEXT_VARIANT_FONTSTYLE,

@@ -1,35 +1,17 @@
+import type { InputPropsShared } from '@metamask/design-system-shared';
 import type { ComponentPropsWithoutRef } from 'react';
 
-import type { TextVariant } from '../../types';
-
 export type InputProps = Omit<
   ComponentPropsWithoutRef<'input'>,
   'disabled' | 'readOnly'
-> & {
-  /**
-   * Optional enum to select between Typography variants.
-   *
-   * @default TextVariant.BodyMd
-   */
-  textVariant?: TextVariant;
-  /**
-   * Optional boolean to disable Input.
-   *
-   * @default false
-   */
-  isDisabled?: boolean;
-  /**
-   * Optional boolean to show readonly input.
-   *
-   * @default false
-   */
-  isReadonly?: boolean;
-  /**
-   * Optional prop for additional CSS classes.
-   */
-  className?: string;
-  /**
-   * Optional inline styles.
-   */
-  style?: React.CSSProperties;
-};
+> &
+  InputPropsShared & {
+    /**
+     * Optional prop for additional CSS classes.
+     */
+    className?: string;
+    /**
+     * Optional inline styles.
+     */
+    style?: React.CSSProperties;
+  };
@@ -1,4 +1,4 @@
-import { TextVariant } from '../../types';
+import { TextVariant } from '@metamask/design-system-shared';
 
 export const CLASSMAP_TEXT_VARIANT_FONTSTYLE: Record<TextVariant, string> = {
   [TextVariant.DisplayLg]:

@@ -1,7 +1,8 @@
+import { TextVariant } from '@metamask/design-system-shared';
 import { Slot } from '@radix-ui/react-slot';
 import React from 'react';
 
-import { FontFamily, TextColor, TextVariant } from '../../types';
+import { FontFamily, TextColor } from '../../types';
 import { twMerge } from '../../utils/tw-merge';
 
 import {

@@ -1,10 +1,11 @@
+import type { TextVariant } from '@metamask/design-system-shared';
+
 import type {
   FontFamily,
   FontStyle,
   FontWeight,
   OverflowWrap,
   TextAlign,
-  TextVariant,
   TextTransform,
   TextColor,
 } from '../../types';

@@ -1,10 +1,10 @@
+export { TextVariant } from '@metamask/design-system-shared';
 export {
   FontFamily,
   FontStyle,
   FontWeight,
   OverflowWrap,
   TextAlign,
-  TextVariant,
   TextTransform,
   TextColor,
 } from '../../types';

@@ -294,29 +294,7 @@ export enum ButtonIconVariant {
 /**
  * Text - variant
  */
-export enum TextVariant {
-  // Display Sizes
-  DisplayLg = 'display-lg',
-  DisplayMd = 'display-md',
-
-  // Heading Sizes
-  HeadingLg = 'heading-lg',
-  HeadingMd = 'heading-md',
-  HeadingSm = 'heading-sm',
-
-  // Font Sizes
-  BodyLg = 'body-lg',
-  BodyMd = 'body-md',
-  BodySm = 'body-sm',
-  BodyXs = 'body-xs',
-
-  // Special Typography Variants
-  PageHeading = 'page-heading',
-  SectionHeading = 'section-heading',
-  ButtonLabelMd = 'button-label-md',
-  ButtonLabelLg = 'button-label-lg',
-  AmountDisplayLg = 'amount-display-lg',
-}
+export { TextVariant } from '@metamask/design-system-shared';
 
 /**
  * Text - color

@@ -56,3 +56,9 @@ export {
   type BadgeWrapperCustomPosition,
   type BadgeWrapperPropsShared,
 } from './types/BadgeWrapper';
+
+// Text types (ADR-0003)
+export { TextVariant } from './types/Text';
+
+// Input types (ADR-0004)
+export { type InputPropsShared } from './types/Input';
@@ -0,0 +1,26 @@
+import type { TextVariant } from '../Text/Text.types';
+
+/**
+ * Input component shared props (ADR-0004)
+ * Platform-independent properties shared across React and React Native
+ */
+export type InputPropsShared = {
+  /**
+   * Optional prop to select between Typography variants.
+   *
+   * @default TextVariant.BodyMd
+   */
+  textVariant?: TextVariant;
+  /**
+   * Optional boolean to disable Input.
+   *
+   * @default false
+   */
+  isDisabled?: boolean;
+  /**
+   * Optional boolean to show readonly input.
+   *
+   * @default false
+   */
+  isReadonly?: boolean;
+};
@@ -0,0 +1 @@
+export { type InputPropsShared } from './Input.types';
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		export { type InputPropsShared } from './Input.types';