feat: [DSRN ]Added TitleStandard

.cursor/rules/component-architecture.md

@@ -209,6 +209,17 @@ Both `Input` and `Text` are _consumers_ of `TextVariant` — neither owns it. Im
 - [ ] NO className/twClassName in shared package
 - [ ] NO unified event handlers in shared package
 
+## Optional slot rendering (`ReactNode`)
+
+Optional layout slots (accessories, labels, end nodes) are usually **strings or elements**. Use **standard React conditional rendering** only (`{optionalSlot}`, `condition && <Subtree />`, ternaries). **Do not** add shared `ReactNode` guard helpers.
+
+- **PREFER** `{optionalSlot}` when `null`, `undefined`, and `false` are acceptable and you do not need to skip mounting a subtree.
+- **PREFER** `condition && <Subtree />` when the subtree should not mount unless `condition` is truthy.
+- **PREFER** avoiding redundant patterns such as `x && x` (same expression twice); use `x` or `condition && x` once.
+- **NOTE:** The left-hand side of `&&` must be chosen deliberately if numeric `0` could appear and you mean “hide”; for typical string/element slots, idiomatic React patterns are sufficient.
+
+**Related:** @.cursor/rules/testing.md — how to test optional slots without speculative edge-case suites.
+
 ## Golden Path: BadgeStatus
 
 **BadgeStatus is THE proof-of-concept for ADR-0003 and ADR-0004. Always reference when in doubt.**
@@ -232,6 +243,7 @@ Both `Input` and `Text` are _consumers_ of `TextVariant` — neither owns it. Im
 - @.cursor/rules/component-migration.md - Extension/mobile migration workflow
 - @.cursor/rules/component-enum-union-migration.md - Internal ADR migration
 - @.cursor/rules/styling.md - Design tokens and styling patterns
+- @.cursor/rules/testing.md - Optional `ReactNode` / slot testing conventions
 
 ### MetaMask Standards
 

.cursor/rules/testing.md

@@ -10,6 +10,7 @@ This rule defines testing patterns for design system components to ensure:
 - 100% coverage thresholds are met consistently
 - Style assertions use built-in matchers (not duplicated helpers)
 - Tests remain maintainable as components evolve
+- Optional slot tests stay proportional to the documented API (no speculative edge-case suites)
 
 ## Critical Rules
 
@@ -48,6 +49,15 @@ fireEvent.press(getByTestId('button'));
 expect(onPress).toHaveBeenCalledTimes(1);
 ```
 
+### Optional `ReactNode` / slot props
+
+Optional slots (accessories, labels, custom rows) are usually **strings or elements**. Tests should lock in the **public contract**, not every theoretical `ReactNode` value.
+
+- **ALWAYS** cover documented usage: prop **omitted** or `undefined`, meaningful **string** or **element** content, and **`false`** when callers rely on it to hide a slot (common with React conditional patterns).
+- **NEVER** add tests for undocumented exotic values (for example numeric `0`, or empty-string edge cases) unless the component README/types explicitly support them or you are fixing a **documented** regression.
+- **NEVER** add test helpers or micro-test suites to debate conditional rendering mechanics (`&&`, ternaries, `{node}`) versus shared `ReactNode` guard utilities. Those helpers are not part of this design system. Assert **observable** outcomes only. Optional-slot patterns live in @.cursor/rules/component-architecture.md.
+- **PREFER** one high-signal test per branch for mutual exclusion or priority (for example label vs accessory) instead of permuting many falsy types.
+
 ### Query and Assertion Conventions
 
 **React Web:**
@@ -228,6 +238,7 @@ After adding or updating tests, verify:
 - https://github.com/MetaMask/contributor-docs/blob/main/docs/testing/unit-testing.md
 - https://github.com/MetaMask/metamask-extension/tree/main/.cursor/rules/unit-testing-guidelines
 - https://github.com/MetaMask/metamask-mobile/blob/main/.cursor/rules/unit-testing-guidelines.mdc
+- @.cursor/rules/component-architecture.md
 - @.cursor/rules/styling.md
 - @packages/design-system-react-native/jest.config.js
 - @packages/design-system-react-native/jest.setup.js

packages/design-system-react-native/src/components/TitleStandard/README.md

@@ -0,0 +1,241 @@
+# TitleStandard
+
+TitleStandard is used to display a required primary title with optional rows above and below the title, optional inline accessories next to the title and bottom label, and optional bottom label or custom bottom content.
+
+```tsx
+import { TitleStandard } from '@metamask/design-system-react-native';
+
+<TitleStandard title="$4.42" />;
+```
+
+Cross-platform layout props are defined as `TitleStandardPropsShared` in `@metamask/design-system-shared`. This package adds `twClassName`, React Native `View` props, and `titleProps` / `bottomLabelProps` for the platform `Text` component.
+
+## Props
+
+### `title`
+
+The primary title. The title row always renders. When `title` is a string, it is wrapped with heading typography (`TextVariant.HeadingLg` and `titleProps`); other `ReactNode` values render as provided.
+
+| TYPE        | REQUIRED | DEFAULT |
+| ----------- | -------- | ------- |
+| `ReactNode` | Yes      | —       |
+
+```tsx
+<TitleStandard title="$1,234.56" />
+```
+
+### `titleEndAccessory`
+
+Optional node rendered to the right of the title (for example an info icon).
+
+| TYPE        | REQUIRED | DEFAULT     |
+| ----------- | -------- | ----------- |
+| `ReactNode` | No       | `undefined` |
+
+```tsx
+import {
+  TitleStandard,
+  Box,
+  Icon,
+  IconName,
+  IconSize,
+} from '@metamask/design-system-react-native';
+
+<TitleStandard
+  title="$4.42"
+  titleEndAccessory={
+    <Box twClassName="ml-2">
+      <Icon name={IconName.Info} size={IconSize.Md} />
+    </Box>
+  }
+/>;
+```
+
+### `topAccessory`
+
+Optional row above the title (for example secondary label text or a row with icons).
+
+| TYPE        | REQUIRED | DEFAULT     |
+| ----------- | -------- | ----------- |
+| `ReactNode` | No       | `undefined` |
+
+```tsx
+import {
+  TitleStandard,
+  Text,
+  TextVariant,
+  TextColor,
+  FontWeight,
+} from '@metamask/design-system-react-native';
+
+<TitleStandard
+  topAccessory={
+    <Text
+      variant={TextVariant.BodySm}
+      fontWeight={FontWeight.Medium}
+      color={TextColor.TextAlternative}
+    >
+      Send
+    </Text>
+  }
+  title="$4.42"
+  bottomLabel="0.002 ETH"
+/>;
+```
+
+### `bottomLabel`
+
+Optional bottom row with secondary label typography when the value is a string (`BodySm`, medium, `TextColor.TextAlternative`). If `bottomLabel` is renderable, `bottomAccessory` is not shown.
+
+| TYPE        | REQUIRED | DEFAULT     |
+| ----------- | -------- | ----------- |
+| `ReactNode` | No       | `undefined` |
+
+```tsx
+<TitleStandard title="$4.42" bottomLabel="0.002 ETH" />
+```
+
+### `bottomLabelEndAccessory`
+
+Optional node rendered to the right of the bottom label. Only used when `bottomLabel` is renderable (same row as the default bottom label typography).
+
+| TYPE        | REQUIRED | DEFAULT     |
+| ----------- | -------- | ----------- |
+| `ReactNode` | No       | `undefined` |
+
+```tsx
+import {
+  TitleStandard,
+  Box,
+  Icon,
+  IconName,
+  IconSize,
+  IconColor,
+} from '@metamask/design-system-react-native';
+
+<TitleStandard
+  title="$4.42"
+  bottomLabel="0.002 ETH"
+  bottomLabelEndAccessory={
+    <Box twClassName="ml-2">
+      <Icon
+        name={IconName.Info}
+        size={IconSize.Sm}
+        color={IconColor.IconAlternative}
+      />
+    </Box>
+  }
+/>;
+```
+
+### `bottomAccessory`
+
+Optional custom bottom row when `bottomLabel` is not renderable. Renders without default label typography; compose layout inside the node.
+
+| TYPE        | REQUIRED | DEFAULT     |
+| ----------- | -------- | ----------- |
+| `ReactNode` | No       | `undefined` |
+
+```tsx
+import {
+  TitleStandard,
+  Box,
+  BoxFlexDirection,
+  BoxAlignItems,
+  Icon,
+  IconName,
+  IconSize,
+  Text,
+  TextVariant,
+} from '@metamask/design-system-react-native';
+
+<TitleStandard
+  title="$4.42"
+  bottomAccessory={
+    <Box
+      flexDirection={BoxFlexDirection.Row}
+      alignItems={BoxAlignItems.Center}
+      gap={1}
+    >
+      <Icon name={IconName.Gas} size={IconSize.Xs} />
+      <Text variant={TextVariant.BodySm}>~$0.50 fee</Text>
+    </Box>
+  }
+/>;
+```
+
+### `titleProps`
+
+Optional props merged into the heading `Text` when `title` is a string. Use for `testID` or typography overrides.
+
+| TYPE                                   | REQUIRED | DEFAULT     |
+| -------------------------------------- | -------- | ----------- |
+| `Omit<Partial<TextProps>, 'children'>` | No       | `undefined` |
+
+```tsx
+<TitleStandard title="$4.42" titleProps={{ testID: 'title-standard-title' }} />
+```
+
+### `bottomLabelProps`
+
+Optional props merged into the bottom label `Text` when `bottomLabel` is a string.
+
+| TYPE                                   | REQUIRED | DEFAULT     |
+| -------------------------------------- | -------- | ----------- |
+| `Omit<Partial<TextProps>, 'children'>` | No       | `undefined` |
+
+```tsx
+<TitleStandard
+  title="$4.42"
+  bottomLabel="0.002 ETH"
+  bottomLabelProps={{ testID: 'title-standard-bottom' }}
+/>
+```
+
+### `twClassName`
+
+Use the `twClassName` prop to add Tailwind CSS classes to the component. These classes will be merged with the component's default classes using `tw.style()`, allowing you to:
+
+- Add new styles that don't exist in the default component
+- Override the component's default styles when needed
+
+| TYPE     | REQUIRED | DEFAULT     |
+| -------- | -------- | ----------- |
+| `string` | No       | `undefined` |
+
+```tsx
+// Add additional styles
+<TitleStandard twClassName="mt-4" title="$4.42" />
+
+// Override default styles
+<TitleStandard twClassName="px-6" title="$4.42" />
+```
+
+### `style`
+
+Use the `style` prop to customize the component's appearance with React Native styles. For consistent styling, prefer using `twClassName` with Tailwind classes when possible. Use `style` with `tw.style()` for conditionals or dynamic values. Other `View` props (for example `testID` and accessibility fields) are also accepted on the root container.
+
+| TYPE                   | REQUIRED | DEFAULT     |
+| ---------------------- | -------- | ----------- |
+| `StyleProp<ViewStyle>` | No       | `undefined` |
+
+```tsx
+import { useTailwind } from '@metamask/design-system-twrnc-preset';
+
+import { TitleStandard } from '@metamask/design-system-react-native';
+
+export const ConditionalExample = ({ isActive }: { isActive: boolean }) => {
+  const tw = useTailwind();
+
+  return (
+    <TitleStandard
+      title="$4.42"
+      style={tw.style('opacity-90', isActive && 'opacity-100')}
+    />
+  );
+};
+```
+
+## References
+
+[MetaMask Design System Guides](https://www.notion.so/MetaMask-Design-System-Guides-Design-f86ecc914d6b4eb6873a122b83c12940)