chore: update

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

@@ -32,6 +32,24 @@ Available sizes:
 <AvatarBase size={AvatarBaseSize.Lg}>Large Avatar</AvatarBase>
 ```
 
+### `shape`
+
+Optional prop to control the shape of the `AvatarBase`.
+
+| TYPE              | REQUIRED | DEFAULT                  |
+| :---------------- | :------- | :----------------------- |
+| `AvatarBaseShape` | No       | `AvatarBaseShape.Circle` |
+
+Available shapes:
+
+- `AvatarBaseShape.Circle`
+- `AvatarBaseShape.Square`
+
+```tsx
+<AvatarBase shape={AvatarBaseShape.Circle}>AB</AvatarBase>
+<AvatarBase shape={AvatarBaseShape.Square}>CD</AvatarBase>
+```
+
 ### `children`
 
 The content of the AvatarBase component.
@@ -46,6 +64,40 @@ import { AvatarBase } from '@metamask/design-system-react-native';
 <AvatarBase>Custom avatar content</AvatarBase>;
 ```
 
+### `fallbackText`
+
+Optional text to be displayed when the avatar content fails to render.
+
+| TYPE     | REQUIRED | DEFAULT |
+| :------- | :------- | :------ |
+| `string` | No       | `null`  |
+
+```tsx
+<AvatarBase fallbackText="FB">
+  {/* Content that might fail to render */}
+</AvatarBase>
+```
+
+### `fallbackTextProps`
+
+Optional props to customize the fallback text.
+
+| TYPE                          | REQUIRED | DEFAULT |
+| :---------------------------- | :------- | :------ |
+| `Omit<TextProps, 'children'>` | No       | `{}`    |
+
+```tsx
+<AvatarBase
+  fallbackText="FB"
+  fallbackTextProps={{
+    variant: TextVariant.BodySm,
+    color: TextColor.TextMuted,
+  }}
+>
+  {/* Content that might fail to render */}
+</AvatarBase>
+```
+
 ### `backgroundColor`
 
 Background color of the avatar.

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

@@ -1,40 +1,118 @@
 # AvatarGroup
 
-AvatarGroup is a stacked avatars to represent a group of avatars.
+AvatarGroup is a stacked avatars component to represent a group of avatars.
 
 ```tsx
-import { AvatarGroup } from '@metamask/design-system-react-native';
+import {
+  AvatarGroup,
+  AvatarGroupVariant,
+} from '@metamask/design-system-react-native';
 
-<AvatarGroup>
-  <AvatarAccount address="0x123..." />
-  <AvatarAccount address="0x456..." />
-</AvatarGroup>;
+<AvatarGroup
+  variant={AvatarGroupVariant.Account}
+  avatarPropsArr={[
+    { address: '0x1234567890abcdef1234567890abcdef12345678' },
+    { address: '0xabcdef1234567890abcdef1234567890abcdef12' },
+    { address: '0x567890abcdef1234567890abcdef1234567890ab' },
+  ]}
+/>;
 ```
 
 ## Props
 
-### `children`
+### `variant`
 
-The avatar components to display in the group.
+The type of avatars to display in the group.
 
-| TYPE        | REQUIRED | DEFAULT     |
-| ----------- | -------- | ----------- |
-| `ReactNode` | Yes      | `undefined` |
+| TYPE                 | REQUIRED | DEFAULT     |
+| -------------------- | -------- | ----------- |
+| `AvatarGroupVariant` | Yes      | `undefined` |
+
+Available variants:
+
+- `AvatarGroupVariant.Account`
+- `AvatarGroupVariant.Favicon`
+- `AvatarGroupVariant.Network`
+- `AvatarGroupVariant.Token`
 
 ```tsx
-import {
-  AvatarGroup,
-  AvatarAccount,
-} from '@metamask/design-system-react-native';
+<AvatarGroup
+  variant={AvatarGroupVariant.Account}
+  avatarPropsArr={[{ address: '0x1234...' }, { address: '0x5678...' }]}
+/>
+```
+
+### `avatarPropsArr`
+
+Array of props for the individual avatar components. The type depends on the variant.
+
+| TYPE                                                                                               | REQUIRED | DEFAULT     |
+| -------------------------------------------------------------------------------------------------- | -------- | ----------- |
+| `AvatarAccountProps[]` \| `AvatarFaviconProps[]` \| `AvatarNetworkProps[]` \| `AvatarTokenProps[]` | Yes      | `undefined` |
+
+```tsx
+// Account variant
+<AvatarGroup
+  variant={AvatarGroupVariant.Account}
+  avatarPropsArr={[
+    { address: '0x1234567890abcdef1234567890abcdef12345678' },
+    { address: '0xabcdef1234567890abcdef1234567890abcdef12' },
+  ]}
+/>
+
+// Favicon variant
+<AvatarGroup
+  variant={AvatarGroupVariant.Favicon}
+  avatarPropsArr={[
+    { src: { uri: 'https://metamask.io/favicon.ico' } },
+    { src: { uri: 'https://uniswap.org/favicon.ico' } },
+  ]}
+/>
+
+// Network variant
+<AvatarGroup
+  variant={AvatarGroupVariant.Network}
+  avatarPropsArr={[
+    { src: { uri: 'https://example.com/ethereum.png' }, name: 'Ethereum' },
+    { src: { uri: 'https://example.com/polygon.png' }, name: 'Polygon' },
+  ]}
+/>
+
+// Token variant
+<AvatarGroup
+  variant={AvatarGroupVariant.Token}
+  avatarPropsArr={[
+    { src: { uri: 'https://example.com/eth.png' }, name: 'ETH' },
+    { src: { uri: 'https://example.com/usdc.png' }, name: 'USDC' },
+  ]}
+/>
+```
+
+### `size`
+
+The size of the avatars in the group.
+
+| TYPE              | REQUIRED | DEFAULT              |
+| ----------------- | -------- | -------------------- |
+| `AvatarGroupSize` | No       | `AvatarGroupSize.Md` |
 
-<AvatarGroup>
-  <AvatarAccount address="0x1234567890abcdef1234567890abcdef12345678" />
-  <AvatarAccount address="0xabcdef1234567890abcdef1234567890abcdef12" />
-  <AvatarAccount address="0x567890abcdef1234567890abcdef1234567890ab" />
-</AvatarGroup>;
+Available sizes:
+
+- `AvatarGroupSize.Xs` (16px)
+- `AvatarGroupSize.Sm` (24px)
+- `AvatarGroupSize.Md` (32px)
+- `AvatarGroupSize.Lg` (40px)
+- `AvatarGroupSize.Xl` (48px)
+
+```tsx
+<AvatarGroup
+  variant={AvatarGroupVariant.Account}
+  size={AvatarGroupSize.Lg}
+  avatarPropsArr={[{ address: '0x1234...' }, { address: '0x5678...' }]}
+/>
 ```
 
-### `maxAvatars`
+### `max`
 
 Maximum number of avatars to display before showing overflow indicator.
 
@@ -43,27 +121,56 @@ Maximum number of avatars to display before showing overflow indicator.
 | `number` | No       | `4`     |
 
 ```tsx
-<AvatarGroup maxAvatars={3}>
-  <AvatarAccount address="0x123..." />
-  <AvatarAccount address="0x456..." />
-  <AvatarAccount address="0x789..." />
-  <AvatarAccount address="0xabc..." />
-</AvatarGroup>
+<AvatarGroup
+  variant={AvatarGroupVariant.Account}
+  max={3}
+  avatarPropsArr={[
+    { address: '0x1234...' },
+    { address: '0x5678...' },
+    { address: '0x9abc...' },
+    { address: '0xdef0...' }, // This will show as "+1" overflow
+  ]}
+/>
 ```
 
-### `spacing`
+### `isReverse`
 
-Spacing between avatars in the group.
+Optional prop to reverse the order of avatar stacking.
 
-| TYPE     | REQUIRED | DEFAULT |
-| -------- | -------- | ------- |
-| `number` | No       | `-8`    |
+| TYPE      | REQUIRED | DEFAULT |
+| :-------- | :------- | :------ |
+| `boolean` | No       | `false` |
+
+```tsx
+<AvatarGroup
+  variant={AvatarGroupVariant.Account}
+  isReverse
+  avatarPropsArr={[{ address: '0x1234...' }, { address: '0x5678...' }]}
+/>
+```
+
+### `overflowTextProps`
+
+Additional AvatarBase props to pass to the overflow text element.
+
+| TYPE              | REQUIRED | DEFAULT     |
+| ----------------- | -------- | ----------- |
+| `AvatarBaseProps` | No       | `undefined` |
 
 ```tsx
-<AvatarGroup spacing={-12}>
-  <AvatarAccount address="0x123..." />
-  <AvatarAccount address="0x456..." />
-</AvatarGroup>
+<AvatarGroup
+  variant={AvatarGroupVariant.Account}
+  max={2}
+  overflowTextProps={{
+    backgroundColor: BackgroundColor.BackgroundError,
+    textProps: { color: TextColor.TextDefault },
+  }}
+  avatarPropsArr={[
+    { address: '0x1234...' },
+    { address: '0x5678...' },
+    { address: '0x9abc...' }, // "+1" will use custom styling
+  ]}
+/>
 ```
 
 ### `twClassName`
@@ -81,14 +188,18 @@ Use the `twClassName` prop to add Tailwind CSS classes to the component. These c
 import { AvatarGroup } from '@metamask/design-system-react-native';
 
 // Add additional styles
-<AvatarGroup twClassName="bg-primary-100">
-  Custom Background
-</AvatarGroup>
+<AvatarGroup
+  variant={AvatarGroupVariant.Account}
+  avatarPropsArr={[{ address: '0x1234...' }]}
+  twClassName="bg-primary-100"
+/>
 
 // Override default styles
-<AvatarGroup twClassName="!flex-col">
-  Override Layout
-</AvatarGroup>
+<AvatarGroup
+  variant={AvatarGroupVariant.Account}
+  avatarPropsArr={[{ address: '0x1234...' }]}
+  twClassName="!flex-col"
+/>
 ```
 
 ### `style`
@@ -108,10 +219,11 @@ const styles = StyleSheet.create({
 });
 
 export const StyleExample = () => (
-  <AvatarGroup style={styles.custom}>
-    <AvatarAccount address="0x123..." />
-    <AvatarAccount address="0x456..." />
-  </AvatarGroup>
+  <AvatarGroup
+    variant={AvatarGroupVariant.Account}
+    avatarPropsArr={[{ address: '0x1234...' }, { address: '0x5678...' }]}
+    style={styles.custom}
+  />
 );
 ```