@coinbase/cds-mcp-server 8.17.3 → 8.17.4

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

@@ -4,23 +4,10 @@ A ProgressBar with a floating label that moves with progress.
 
 ## Import
 
-```jsx
+```tsx
 import { ProgressBarWithFloatLabel } from '@coinbase/cds-mobile/visualizations/ProgressBarWithFloatLabel'
 ```
 
-## Props
-
-| Prop | Type | Required | Default | Description |
-| --- | --- | --- | --- | --- |
-| `label` | `number \| { value: number; render: (num: number, disabled?: boolean \| undefined) => ReactNode; }` | Yes | `-` | Label that is floated at the end of the filled in bar. If a number is used then it will format it as a percentage. |
-| `progress` | `number` | Yes | `-` | Number between 0-1 representing the progress percentage |
-| `disabled` | `boolean` | No | `false` | Toggle used to show a disabled progress visualization |
-| `labelPlacement` | `above \| below` | No | `above` | Position of label relative to the bar |
-| `style` | `null \| false \| ViewStyle \| RegisteredStyle<ViewStyle> \| RecursiveArray<Falsy \| ViewStyle \| RegisteredStyle<ViewStyle>>` | No | `-` | Custom styles for the progress bar with float label root. |
-| `styles` | `{ root?: StyleProp<ViewStyle>; labelContainer?: StyleProp<ViewStyle>; label?: StyleProp<TextStyle>; }` | No | `-` | Custom styles for the progress bar with float label. |
-| `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 |
-
-
 ## Examples
 
 ### Label Above
@@ -135,4 +122,16 @@ You can customize the appearance of the progress bar and float label using the `
 </ProgressContainerWithButtons>
 ```
 
+## Props
+
+| Prop | Type | Required | Default | Description |
+| --- | --- | --- | --- | --- |
+| `label` | `number \| { value: number; render: (num: number, disabled?: boolean \| undefined) => ReactNode; }` | Yes | `-` | Label that is floated at the end of the filled in bar. If a number is used then it will format it as a percentage. |
+| `progress` | `number` | Yes | `-` | Number between 0-1 representing the progress percentage |
+| `disabled` | `boolean` | No | `false` | Toggle used to show a disabled progress visualization |
+| `labelPlacement` | `above \| below` | No | `above` | Position of label relative to the bar |
+| `style` | `null \| false \| ViewStyle \| RegisteredStyle<ViewStyle> \| RecursiveArray<Falsy \| ViewStyle \| RegisteredStyle<ViewStyle>>` | No | `-` | Custom styles for the progress bar with float label root. |
+| `styles` | `{ root?: StyleProp<ViewStyle>; labelContainer?: StyleProp<ViewStyle>; label?: StyleProp<TextStyle>; }` | No | `-` | Custom styles for the progress bar with float label. |
+| `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 |
+
 

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

@@ -4,32 +4,10 @@ A circular visual indicator of completion progress.
 
 ## Import
 
-```jsx
+```tsx
 import { ProgressCircle } from '@coinbase/cds-mobile/visualizations/ProgressCircle'
 ```
 
-## Props
-
-| Prop | Type | Required | Default | Description |
-| --- | --- | --- | --- | --- |
-| `progress` | `number` | Yes | `-` | Number between 0-1 representing the progress percentage |
-| `color` | `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 | `primary` | Custom progress color. |
-| `contentNode` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | Optional component to override the default content rendered inside the circle. |
-| `disableAnimateOnMount` | `boolean` | No | `false` | Disable animation on component mount |
-| `disabled` | `boolean` | No | `false` | Toggle used to show a disabled progress visualization |
-| `hideContent` | `boolean` | No | `-` | Toggle used to hide the content node rendered inside the circle. |
-| `hideText` | `boolean` | No | `-` | - |
-| `key` | `Key \| null` | No | `-` | - |
-| `onAnimationEnd` | `(() => void)` | No | `-` | Callback fired when the progress animation ends. |
-| `onAnimationStart` | `(() => void)` | No | `-` | Callback fired when the progress animation starts. |
-| `ref` | `((instance: View \| null) => void) \| RefObject<View> \| null` | No | `-` | - |
-| `size` | `number` | No | `-` | Optional size in px for the visualization. This is useful if the visualization is used in an HStack. If this is omitted the visualization will fill the parent width or height. Since its a circular visualization it will fill the smaller of the parent width or height |
-| `style` | `null \| false \| ViewStyle \| RegisteredStyle<ViewStyle> \| RecursiveArray<Falsy \| ViewStyle \| RegisteredStyle<ViewStyle>>` | No | `-` | Custom styles for the progress circle root. |
-| `styles` | `{ root?: StyleProp<ViewStyle>; svgContainer?: StyleProp<ViewStyle>; svg?: StyleProp<ViewStyle>; textContainer?: StyleProp<ViewStyle>; progress?: Partial<CircleProps>; circle?: Partial<CircleProps> \| undefined; } \| undefined` | No | `-` | Custom styles for the progress circle. |
-| `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 |
-| `weight` | `normal \| heavy \| thin \| semiheavy` | No | `normal` | Toggle used to change thickness of progress visualization |
-
-
 ## Examples
 
 ### Default
@@ -234,4 +212,25 @@ function Example() {
 }
 ```
 
+## Props
+
+| Prop | Type | Required | Default | Description |
+| --- | --- | --- | --- | --- |
+| `progress` | `number` | Yes | `-` | Number between 0-1 representing the progress percentage |
+| `color` | `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 | `primary` | Custom progress color. |
+| `contentNode` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | Optional component to override the default content rendered inside the circle. |
+| `disableAnimateOnMount` | `boolean` | No | `false` | Disable animation on component mount |
+| `disabled` | `boolean` | No | `false` | Toggle used to show a disabled progress visualization |
+| `hideContent` | `boolean` | No | `-` | Toggle used to hide the content node rendered inside the circle. |
+| `hideText` | `boolean` | No | `-` | - |
+| `key` | `Key \| null` | No | `-` | - |
+| `onAnimationEnd` | `(() => void)` | No | `-` | Callback fired when the progress animation ends. |
+| `onAnimationStart` | `(() => void)` | No | `-` | Callback fired when the progress animation starts. |
+| `ref` | `((instance: View \| null) => void) \| RefObject<View> \| null` | No | `-` | - |
+| `size` | `number` | No | `-` | Optional size in px for the visualization. This is useful if the visualization is used in an HStack. If this is omitted the visualization will fill the parent width or height. Since its a circular visualization it will fill the smaller of the parent width or height |
+| `style` | `null \| false \| ViewStyle \| RegisteredStyle<ViewStyle> \| RecursiveArray<Falsy \| ViewStyle \| RegisteredStyle<ViewStyle>>` | No | `-` | Custom styles for the progress circle root. |
+| `styles` | `{ root?: StyleProp<ViewStyle>; svgContainer?: StyleProp<ViewStyle>; svg?: StyleProp<ViewStyle>; textContainer?: StyleProp<ViewStyle>; progress?: Partial<CircleProps>; circle?: Partial<CircleProps> \| undefined; } \| undefined` | No | `-` | Custom styles for the progress circle. |
+| `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 |
+| `weight` | `normal \| heavy \| thin \| semiheavy` | No | `normal` | Toggle used to change thickness of progress visualization |
+
 

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

@@ -4,45 +4,10 @@ Radio is a control component that allows users to select one option from a set o
 
 ## Import
 
-```jsx
+```tsx
 import { Radio } from '@coinbase/cds-mobile/controls/Radio'
 ```
 
-## Props
-
-| Prop | Type | Required | Default | Description |
-| --- | --- | --- | --- | --- |
-| `background` | `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 overlay (element being interacted with). |
-| `borderColor` | `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 | `checked ? controlColor : 'bgLineHeavy'` | - |
-| `borderRadius` | `0 \| 100 \| 200 \| 300 \| 400 \| 500 \| 600 \| 700 \| 800 \| 900 \| 1000` | No | `1000` | - |
-| `borderWidth` | `0 \| 100 \| 200 \| 300 \| 400 \| 500` | No | `-` | - |
-| `checked` | `boolean` | No | `-` | Set the control to selected/on. |
-| `children` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | Label for the control option. |
-| `color` | `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 | `black` | - |
-| `controlColor` | `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 | `bgPrimary` | Sets the checked/active color of the control. |
-| `disabled` | `boolean` | No | `-` | Disable user interaction. |
-| `indeterminate` | `boolean` | No | `-` | Enable indeterminate state. Useful when you want to indicate that sub-items of a control are partially filled. |
-| `onChange` | `((value: T, checked?: boolean \| undefined) => void) \| undefined` | No | `-` | Toggle control selected state. |
-| `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` | `((event: GestureResponderEvent) => void) \| null` | No | `-` | Called when a single tap gesture is detected. |
-| `readOnly` | `boolean` | No | `-` | Set the control to ready-only. Similar effect as disabled. |
-| `ref` | `null \| (instance: View \| null) => void \| RefObject<View>` | No | `-` | - |
-| `style` | `ViewStyle` | No | `-` | - |
-| `testID` | `string` | No | `-` | Used to locate this view in end-to-end tests. |
-| `value` | `string` | No | `-` | Value of the option. Useful for multiple choice. |
-
-
 ## Examples
 
 ### Basic Usage
@@ -239,4 +204,38 @@ function AccessibleRadio() {
 }
 ```
 
+## Props
+
+| Prop | Type | Required | Default | Description |
+| --- | --- | --- | --- | --- |
+| `background` | `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 overlay (element being interacted with). |
+| `borderColor` | `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 | `checked ? controlColor : 'bgLineHeavy'` | - |
+| `borderRadius` | `0 \| 100 \| 200 \| 300 \| 400 \| 500 \| 600 \| 700 \| 800 \| 900 \| 1000` | No | `1000` | - |
+| `borderWidth` | `0 \| 100 \| 200 \| 300 \| 400 \| 500` | No | `-` | - |
+| `checked` | `boolean` | No | `-` | Set the control to selected/on. |
+| `children` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | Label for the control option. |
+| `color` | `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 | `black` | - |
+| `controlColor` | `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 | `bgPrimary` | Sets the checked/active color of the control. |
+| `disabled` | `boolean` | No | `-` | Disable user interaction. |
+| `indeterminate` | `boolean` | No | `-` | Enable indeterminate state. Useful when you want to indicate that sub-items of a control are partially filled. |
+| `onChange` | `((value: T, checked?: boolean \| undefined) => void) \| undefined` | No | `-` | Toggle control selected state. |
+| `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` | `((event: GestureResponderEvent) => void) \| null` | No | `-` | Called when a single tap gesture is detected. |
+| `readOnly` | `boolean` | No | `-` | Set the control to ready-only. Similar effect as disabled. |
+| `ref` | `null \| (instance: View \| null) => void \| RefObject<View>` | No | `-` | - |
+| `style` | `ViewStyle` | No | `-` | - |
+| `testID` | `string` | No | `-` | Used to locate this view in end-to-end tests. |
+| `value` | `string` | No | `-` | Value of the option. Useful for multiple choice. |
+
 

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

@@ -4,10 +4,82 @@ A selectable cell that pairs a radio button with a title and description for sin
 
 ## Import
 
-```jsx
+```tsx
 import { RadioCell } from '@coinbase/cds-mobile/controls/RadioCell'
 ```
 
+## Examples
+
+### Basic usage
+
+```tsx
+function RadioCellExample() {
+  const [value, setValue] = React.useState('one');
+  return (
+    <VStack gap={2}>
+      <RadioCell
+        title="Option one"
+        description="With a description"
+        checked={value === 'one'}
+        onChange={setValue}
+        value="one"
+      />
+      <RadioCell title="Option two" checked={value === 'two'} onChange={setValue} value="two" />
+      <RadioCell
+        title="Disabled option"
+        checked={false}
+        onChange={() => {}}
+        value="three"
+        disabled
+      />
+    </VStack>
+  );
+}
+```
+
+### With Custom Content and Styling
+
+```tsx
+function CustomRadioCellExample() {
+  const [selectedPlan, setSelectedPlan] = React.useState('pro');
+  return (
+    <VStack gap={2}>
+      <RadioCell
+        checked={selectedPlan === 'basic'}
+        description={
+          <VStack gap={1}>
+            <Text color="fgMuted" font="body">
+              Perfect for individuals getting started
+            </Text>
+            <Text font="label1">$9/month • Up to 5 projects • 1GB storage</Text>
+          </VStack>
+        }
+        onChange={setSelectedPlan}
+        title="Basic Plan"
+        value="basic"
+      />
+      <RadioCell
+        checked={selectedPlan === 'pro'}
+        description={
+          <VStack gap={1}>
+            <Text color="fgMuted" font="body">
+              Great for growing teams and businesses
+            </Text>
+            <Text font="label1">$29/month • Unlimited projects • 10GB storage</Text>
+            <Text color="fgPositive" font="caption">
+              • Most Popular
+            </Text>
+          </VStack>
+        }
+        onChange={setSelectedPlan}
+        title="Pro Plan"
+        value="pro"
+      />
+    </VStack>
+  );
+}
+```
+
 ## Props
 
 | Prop | Type | Required | Default | Description |
@@ -127,76 +199,3 @@ import { RadioCell } from '@coinbase/cds-mobile/controls/RadioCell'
 | `zIndex` | `number` | No | `-` | - |
 
 
-## Examples
-
-### Basic usage
-
-```tsx
-function RadioCellExample() {
-  const [value, setValue] = React.useState('one');
-  return (
-    <VStack gap={2}>
-      <RadioCell
-        title="Option one"
-        description="With a description"
-        checked={value === 'one'}
-        onChange={setValue}
-        value="one"
-      />
-      <RadioCell title="Option two" checked={value === 'two'} onChange={setValue} value="two" />
-      <RadioCell
-        title="Disabled option"
-        checked={false}
-        onChange={() => {}}
-        value="three"
-        disabled
-      />
-    </VStack>
-  );
-}
-```
-
-### With Custom Content and Styling
-
-```tsx
-function CustomRadioCellExample() {
-  const [selectedPlan, setSelectedPlan] = React.useState('pro');
-  return (
-    <VStack gap={2}>
-      <RadioCell
-        checked={selectedPlan === 'basic'}
-        description={
-          <VStack gap={1}>
-            <Text color="fgMuted" font="body">
-              Perfect for individuals getting started
-            </Text>
-            <Text font="label1">$9/month • Up to 5 projects • 1GB storage</Text>
-          </VStack>
-        }
-        onChange={setSelectedPlan}
-        title="Basic Plan"
-        value="basic"
-      />
-      <RadioCell
-        checked={selectedPlan === 'pro'}
-        description={
-          <VStack gap={1}>
-            <Text color="fgMuted" font="body">
-              Great for growing teams and businesses
-            </Text>
-            <Text font="label1">$29/month • Unlimited projects • 10GB storage</Text>
-            <Text color="fgPositive" font="caption">
-              • Most Popular
-            </Text>
-          </VStack>
-        }
-        onChange={setSelectedPlan}
-        title="Pro Plan"
-        value="pro"
-      />
-    </VStack>
-  );
-}
-```
-
-

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

@@ -4,45 +4,10 @@ Radio is a control component that allows users to select one option from a set.
 
 ## Import
 
-```jsx
+```tsx
 import { RadioGroup } from '@coinbase/cds-mobile/controls/RadioGroup'
 ```
 
-## Props
-
-| Prop | Type | Required | Default | Description |
-| --- | --- | --- | --- | --- |
-| `background` | `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 overlay (element being interacted with). |
-| `borderColor` | `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 | `checked ? controlColor : 'bgLineHeavy'` | - |
-| `borderRadius` | `0 \| 100 \| 200 \| 300 \| 400 \| 500 \| 600 \| 700 \| 800 \| 900 \| 1000` | No | `1000` | - |
-| `borderWidth` | `0 \| 100 \| 200 \| 300 \| 400 \| 500` | No | `-` | - |
-| `checked` | `boolean` | No | `-` | Set the control to selected/on. |
-| `children` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | Label for the control option. |
-| `color` | `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 | `black` | - |
-| `controlColor` | `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 | `bgPrimary` | Sets the checked/active color of the control. |
-| `disabled` | `boolean` | No | `-` | Disable user interaction. |
-| `indeterminate` | `boolean` | No | `-` | Enable indeterminate state. Useful when you want to indicate that sub-items of a control are partially filled. |
-| `onChange` | `((value: T, checked?: boolean \| undefined) => void) \| undefined` | No | `-` | Toggle control selected state. |
-| `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` | `((event: GestureResponderEvent) => void) \| null` | No | `-` | Called when a single tap gesture is detected. |
-| `readOnly` | `boolean` | No | `-` | Set the control to ready-only. Similar effect as disabled. |
-| `ref` | `null \| (instance: View \| null) => void \| RefObject<View>` | No | `-` | - |
-| `style` | `ViewStyle` | No | `-` | - |
-| `testID` | `string` | No | `-` | Used to locate this view in end-to-end tests. |
-| `value` | `string` | No | `-` | Value of the option. Useful for multiple choice. |
-
-
 ## Examples
 
 ### Deprecation Notice
@@ -279,4 +244,38 @@ function AdvancedCustomColors() {
 }
 ```
 
+## Props
+
+| Prop | Type | Required | Default | Description |
+| --- | --- | --- | --- | --- |
+| `background` | `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 overlay (element being interacted with). |
+| `borderColor` | `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 | `checked ? controlColor : 'bgLineHeavy'` | - |
+| `borderRadius` | `0 \| 100 \| 200 \| 300 \| 400 \| 500 \| 600 \| 700 \| 800 \| 900 \| 1000` | No | `1000` | - |
+| `borderWidth` | `0 \| 100 \| 200 \| 300 \| 400 \| 500` | No | `-` | - |
+| `checked` | `boolean` | No | `-` | Set the control to selected/on. |
+| `children` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | Label for the control option. |
+| `color` | `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 | `black` | - |
+| `controlColor` | `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 | `bgPrimary` | Sets the checked/active color of the control. |
+| `disabled` | `boolean` | No | `-` | Disable user interaction. |
+| `indeterminate` | `boolean` | No | `-` | Enable indeterminate state. Useful when you want to indicate that sub-items of a control are partially filled. |
+| `onChange` | `((value: T, checked?: boolean \| undefined) => void) \| undefined` | No | `-` | Toggle control selected state. |
+| `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` | `((event: GestureResponderEvent) => void) \| null` | No | `-` | Called when a single tap gesture is detected. |
+| `readOnly` | `boolean` | No | `-` | Set the control to ready-only. Similar effect as disabled. |
+| `ref` | `null \| (instance: View \| null) => void \| RefObject<View>` | No | `-` | - |
+| `style` | `ViewStyle` | No | `-` | - |
+| `testID` | `string` | No | `-` | Used to locate this view in end-to-end tests. |
+| `value` | `string` | No | `-` | Value of the option. Useful for multiple choice. |
+
 

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

@@ -4,25 +4,10 @@ A horizontal or vertical reference line to mark important values on a chart, suc
 
 ## Import
 
-```jsx
+```tsx
 import { ReferenceLine } from '@coinbase/cds-mobile-visualization'
 ```
 
-## Props
-
-| Prop | Type | Required | Default | Description |
-| --- | --- | --- | --- | --- |
-| `LineComponent` | `LineComponent` | No | `DottedLine` | Component to render the line. |
-| `dataX` | `number` | No | `-` | X-value for vertical reference line (data index). |
-| `dataY` | `number` | No | `-` | Y-value for horizontal reference line (data value). |
-| `label` | `null \| string \| number \| ReactElement<TSpanProps, TSpan> \| ReactElement<TextPathProps, TextPath> \| ValidChartTextChildElements[]` | No | `-` | Label content to display near the reference line. Can be a string or ReactNode for rich formatting. |
-| `labelPosition` | `TextHorizontalAlignment \| TextVerticalAlignment` | No | `'right' 'top'` | Position of the label along the horizontal line. Position of the label along the vertical line. |
-| `labelProps` | `ReferenceLineLabelProps` | No | `-` | Props for the label rendering. Consolidates styling and positioning options for the ChartText component. Alignment defaults are set based on line orientation and can be overridden here. |
-| `stroke` | `string` | No | `theme.color.bgLine` | The color of the line. |
-| `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 |
-| `yAxisId` | `string` | No | `-` | The ID of the y-axis to use for positioning. Defaults to defaultAxisId if not specified. |
-
-
 ## Examples
 
 ### Basic Example
@@ -150,4 +135,18 @@ function LabelStyleExample() {
 }
 ```
 
+## Props
+
+| Prop | Type | Required | Default | Description |
+| --- | --- | --- | --- | --- |
+| `LineComponent` | `LineComponent` | No | `DottedLine` | Component to render the line. |
+| `dataX` | `number` | No | `-` | X-value for vertical reference line (data index). |
+| `dataY` | `number` | No | `-` | Y-value for horizontal reference line (data value). |
+| `label` | `null \| string \| number \| ReactElement<TSpanProps, TSpan> \| ReactElement<TextPathProps, TextPath> \| ValidChartTextChildElements[]` | No | `-` | Label content to display near the reference line. Can be a string or ReactNode for rich formatting. |
+| `labelPosition` | `TextHorizontalAlignment \| TextVerticalAlignment` | No | `'right' 'top'` | Position of the label along the horizontal line. Position of the label along the vertical line. |
+| `labelProps` | `ReferenceLineLabelProps` | No | `-` | Props for the label rendering. Consolidates styling and positioning options for the ChartText component. Alignment defaults are set based on line orientation and can be overridden here. |
+| `stroke` | `string` | No | `theme.color.bgLine` | The color of the line. |
+| `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 |
+| `yAxisId` | `string` | No | `-` | The ID of the y-axis to use for positioning. Defaults to defaultAxisId if not specified. |
+
 

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

@@ -4,57 +4,10 @@ A React component for displaying different types of images, including network im
 
 ## Import
 
-```jsx
+```tsx
 import { RemoteImage } from '@coinbase/cds-mobile/media/RemoteImage'
 ```
 
-## Props
-
-| Prop | Type | Required | Default | Description |
-| --- | --- | --- | --- | --- |
-| `alt` | `string` | No | `-` | The text thats read by the screen reader when the user interacts with the image.  See https://reactnative.dev/docs/image#alt |
-| `aspectRatio` | `[number, number] \| readonly [number, number] \| ([number, number] & readonly [number, number]) \| (readonly [number, number] & [number, number])` | No | `-` | Scale image based on this aspect-ratio |
-| `blurRadius` | `number` | No | `-` | blurRadius: the blur radius of the blur filter added to the image |
-| `borderBottomLeftRadius` | `number` | No | `-` | - |
-| `borderBottomRightRadius` | `number` | No | `-` | - |
-| `borderColor` | `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 | `-` | Adds a custom border color |
-| `borderRadius` | `number` | No | `-` | - |
-| `borderTopLeftRadius` | `number` | No | `-` | - |
-| `borderTopRightRadius` | `number` | No | `-` | - |
-| `capInsets` | `Insets` | No | `-` | When the image is resized, the corners of the size specified by capInsets will stay a fixed size, but the center content and borders of the image will be stretched. This is useful for creating resizable rounded buttons, shadows, and other resizable assets. More info on Apple documentation |
-| `crossOrigin` | `anonymous \| use-credentials` | No | `-` | Adds the CORS related header to the request. Similar to crossorigin from HTML.  See https://reactnative.dev/docs/image#crossorigin |
-| `darkModeEnhancementsApplied` | `boolean` | No | `-` | Fill in transparent background with inverted background color and add border. This solves issue of transparent, stamped out asset icons not being visible on dark backgrounds. |
-| `defaultSource` | `number \| ImageURISource` | No | `-` | A static image to display while downloading the final image off the network. |
-| `fadeDuration` | `number` | No | `-` | Duration of fade in animation in ms. Defaults to 300 |
-| `fallbackAccessibilityHint` | `string` | No | `-` | - |
-| `fallbackAccessibilityLabel` | `string` | No | `-` | - |
-| `height` | `string \| number` | No | `-` | Height of RemoteImage. Height takes precedence over size |
-| `id` | `string` | No | `-` | Used to reference react managed images from native code. |
-| `loadingIndicatorSource` | `ImageURISource` | No | `-` | similarly to source, this property represents the resource used to render the loading indicator for the image, displayed until image is ready to be displayed, typically after when it got downloaded from network. |
-| `nativeID` | `string` | No | `-` | Used to reference react managed images from native code. |
-| `onError` | `((error: NativeSyntheticEvent<ImageErrorEventData>) => void)` | No | `-` | Invoked on load error with {nativeEvent: {error}} |
-| `onLayout` | `((event: LayoutChangeEvent) => void)` | No | `-` | onLayout function  Invoked on mount and layout changes with  {nativeEvent: { layout: {x, y, width, height} }}. |
-| `onLoad` | `((event: NativeSyntheticEvent<ImageLoadEventData>) => void)` | No | `-` | Invoked when load completes successfully { source: { uri, height, width } }. |
-| `onLoadEnd` | `(() => void)` | No | `-` | Invoked when load either succeeds or fails |
-| `onLoadStart` | `(() => void)` | No | `-` | Invoked on load start |
-| `onPartialLoad` | `(() => void)` | No | `-` | Invoked when a partial load of the image is complete. The definition of what constitutes a partial load is loader specific though this is meant for progressive JPEG loads. |
-| `onProgress` | `((event: NativeSyntheticEvent<ImageProgressEventDataIOS>) => void)` | No | `-` | Invoked on download progress with {nativeEvent: {loaded, total}} |
-| `progressiveRenderingEnabled` | `boolean` | No | `-` | - |
-| `referrerPolicy` | `no-referrer \| no-referrer-when-downgrade \| origin \| origin-when-cross-origin \| same-origin \| strict-origin \| strict-origin-when-cross-origin \| unsafe-url` | No | `-` | A string indicating which referrer to use when fetching the resource. Similar to referrerpolicy from HTML.  See https://reactnative.dev/docs/image#referrerpolicy |
-| `resizeMethod` | `auto \| scale \| resize` | No | `-` | The mechanism that should be used to resize the image when the images dimensions differ from the image views dimensions. Defaults to auto.  - auto: Use heuristics to pick between resize and scale.  - resize: A software operation which changes the encoded image in memory before it gets decoded. This should be used instead of scale when the image is much larger than the view.  - scale: The image gets drawn downscaled or upscaled. Compared to resize, scale is faster (usually hardware accelerated) and produces higher quality images. This should be used if the image is smaller than the view. It should also be used if the image is slightly bigger than the view.  More details about resize and scale can be found at http://frescolib.org/docs/resizing-rotating.html. |
-| `resizeMode` | `repeat \| center \| stretch \| cover \| contain` | No | `-` | Determines how to resize the image when the frame doesnt match the raw image dimensions.  cover: Scale the image uniformly (maintain the images aspect ratio) so that both dimensions (width and height) of the image will be equal to or larger than the corresponding dimension of the view (minus padding).  contain: Scale the image uniformly (maintain the images aspect ratio) so that both dimensions (width and height) of the image will be equal to or less than the corresponding dimension of the view (minus padding).  stretch: Scale width and height independently, This may change the aspect ratio of the src.  repeat: Repeat the image to cover the frame of the view. The image will keep its size and aspect ratio. (iOS only)  center: Scale the image down so that it is completely visible, if bigger than the area of the view. The image will not be scaled up. |
-| `shape` | `rectangle \| circle \| squircle \| square \| hexagon` | No | `square` | Shape of RemoteImage |
-| `shouldApplyDarkModeEnhacements` | `boolean` | No | `-` | - |
-| `size` | `s \| l \| m \| xl \| xxl \| xxxl` | No | `m` | Size for a given RemoteImage. If width or height is not defined, it will set size = m as default |
-| `source` | `string \| number \| ImageURISource \| ImageURISource[]` | No | `-` | - |
-| `src` | `string` | No | `-` | A string representing the resource identifier for the image. Similar to src from HTML.  See https://reactnative.dev/docs/image#src |
-| `srcSet` | `string` | No | `-` | Similar to srcset from HTML.  See https://reactnative.dev/docs/image#srcset |
-| `style` | `null \| false \| ImageStyle \| RegisteredStyle<ImageStyle> \| RecursiveArray<Falsy \| ImageStyle \| RegisteredStyle<ImageStyle>>` | No | `-` | - |
-| `testID` | `string` | No | `-` | A unique identifier for this element to be used in UI Automation testing scripts. |
-| `tintColor` | `string \| OpaqueColorValue` | No | `-` | Changes the color of all the non-transparent pixels to the tintColor.  See https://reactnative.dev/docs/image#tintcolor |
-| `width` | `string \| number` | No | `-` | Width of RemoteImage. Width takes precedence over size |
-
-
 ## Examples
 
 ### Border Color
@@ -103,4 +56,50 @@ If no images are shown, RemoteImage will show a default Fallback. Be aware that
 </VStack>
 ```
 
+## Props
+
+| Prop | Type | Required | Default | Description |
+| --- | --- | --- | --- | --- |
+| `alt` | `string` | No | `-` | The text thats read by the screen reader when the user interacts with the image.  See https://reactnative.dev/docs/image#alt |
+| `aspectRatio` | `[number, number] \| readonly [number, number] \| ([number, number] & readonly [number, number]) \| (readonly [number, number] & [number, number])` | No | `-` | Scale image based on this aspect-ratio |
+| `blurRadius` | `number` | No | `-` | blurRadius: the blur radius of the blur filter added to the image |
+| `borderBottomLeftRadius` | `number` | No | `-` | - |
+| `borderBottomRightRadius` | `number` | No | `-` | - |
+| `borderColor` | `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 | `-` | Adds a custom border color |
+| `borderRadius` | `number` | No | `-` | - |
+| `borderTopLeftRadius` | `number` | No | `-` | - |
+| `borderTopRightRadius` | `number` | No | `-` | - |
+| `capInsets` | `Insets` | No | `-` | When the image is resized, the corners of the size specified by capInsets will stay a fixed size, but the center content and borders of the image will be stretched. This is useful for creating resizable rounded buttons, shadows, and other resizable assets. More info on Apple documentation |
+| `crossOrigin` | `anonymous \| use-credentials` | No | `-` | Adds the CORS related header to the request. Similar to crossorigin from HTML.  See https://reactnative.dev/docs/image#crossorigin |
+| `darkModeEnhancementsApplied` | `boolean` | No | `-` | Fill in transparent background with inverted background color and add border. This solves issue of transparent, stamped out asset icons not being visible on dark backgrounds. |
+| `defaultSource` | `number \| ImageURISource` | No | `-` | A static image to display while downloading the final image off the network. |
+| `fadeDuration` | `number` | No | `-` | Duration of fade in animation in ms. Defaults to 300 |
+| `fallbackAccessibilityHint` | `string` | No | `-` | - |
+| `fallbackAccessibilityLabel` | `string` | No | `-` | - |
+| `height` | `string \| number` | No | `-` | Height of RemoteImage. Height takes precedence over size |
+| `id` | `string` | No | `-` | Used to reference react managed images from native code. |
+| `loadingIndicatorSource` | `ImageURISource` | No | `-` | similarly to source, this property represents the resource used to render the loading indicator for the image, displayed until image is ready to be displayed, typically after when it got downloaded from network. |
+| `nativeID` | `string` | No | `-` | Used to reference react managed images from native code. |
+| `onError` | `((error: NativeSyntheticEvent<ImageErrorEventData>) => void)` | No | `-` | Invoked on load error with {nativeEvent: {error}} |
+| `onLayout` | `((event: LayoutChangeEvent) => void)` | No | `-` | onLayout function  Invoked on mount and layout changes with  {nativeEvent: { layout: {x, y, width, height} }}. |
+| `onLoad` | `((event: NativeSyntheticEvent<ImageLoadEventData>) => void)` | No | `-` | Invoked when load completes successfully { source: { uri, height, width } }. |
+| `onLoadEnd` | `(() => void)` | No | `-` | Invoked when load either succeeds or fails |
+| `onLoadStart` | `(() => void)` | No | `-` | Invoked on load start |
+| `onPartialLoad` | `(() => void)` | No | `-` | Invoked when a partial load of the image is complete. The definition of what constitutes a partial load is loader specific though this is meant for progressive JPEG loads. |
+| `onProgress` | `((event: NativeSyntheticEvent<ImageProgressEventDataIOS>) => void)` | No | `-` | Invoked on download progress with {nativeEvent: {loaded, total}} |
+| `progressiveRenderingEnabled` | `boolean` | No | `-` | - |
+| `referrerPolicy` | `no-referrer \| no-referrer-when-downgrade \| origin \| origin-when-cross-origin \| same-origin \| strict-origin \| strict-origin-when-cross-origin \| unsafe-url` | No | `-` | A string indicating which referrer to use when fetching the resource. Similar to referrerpolicy from HTML.  See https://reactnative.dev/docs/image#referrerpolicy |
+| `resizeMethod` | `auto \| scale \| resize` | No | `-` | The mechanism that should be used to resize the image when the images dimensions differ from the image views dimensions. Defaults to auto.  - auto: Use heuristics to pick between resize and scale.  - resize: A software operation which changes the encoded image in memory before it gets decoded. This should be used instead of scale when the image is much larger than the view.  - scale: The image gets drawn downscaled or upscaled. Compared to resize, scale is faster (usually hardware accelerated) and produces higher quality images. This should be used if the image is smaller than the view. It should also be used if the image is slightly bigger than the view.  More details about resize and scale can be found at http://frescolib.org/docs/resizing-rotating.html. |
+| `resizeMode` | `repeat \| center \| stretch \| cover \| contain` | No | `-` | Determines how to resize the image when the frame doesnt match the raw image dimensions.  cover: Scale the image uniformly (maintain the images aspect ratio) so that both dimensions (width and height) of the image will be equal to or larger than the corresponding dimension of the view (minus padding).  contain: Scale the image uniformly (maintain the images aspect ratio) so that both dimensions (width and height) of the image will be equal to or less than the corresponding dimension of the view (minus padding).  stretch: Scale width and height independently, This may change the aspect ratio of the src.  repeat: Repeat the image to cover the frame of the view. The image will keep its size and aspect ratio. (iOS only)  center: Scale the image down so that it is completely visible, if bigger than the area of the view. The image will not be scaled up. |
+| `shape` | `rectangle \| circle \| squircle \| square \| hexagon` | No | `square` | Shape of RemoteImage |
+| `shouldApplyDarkModeEnhacements` | `boolean` | No | `-` | - |
+| `size` | `s \| l \| m \| xl \| xxl \| xxxl` | No | `m` | Size for a given RemoteImage. If width or height is not defined, it will set size = m as default |
+| `source` | `string \| number \| ImageURISource \| ImageURISource[]` | No | `-` | - |
+| `src` | `string` | No | `-` | A string representing the resource identifier for the image. Similar to src from HTML.  See https://reactnative.dev/docs/image#src |
+| `srcSet` | `string` | No | `-` | Similar to srcset from HTML.  See https://reactnative.dev/docs/image#srcset |
+| `style` | `null \| false \| ImageStyle \| RegisteredStyle<ImageStyle> \| RecursiveArray<Falsy \| ImageStyle \| RegisteredStyle<ImageStyle>>` | No | `-` | - |
+| `testID` | `string` | No | `-` | A unique identifier for this element to be used in UI Automation testing scripts. |
+| `tintColor` | `string \| OpaqueColorValue` | No | `-` | Changes the color of all the non-transparent pixels to the tintColor.  See https://reactnative.dev/docs/image#tintcolor |
+| `width` | `string \| number` | No | `-` | Width of RemoteImage. Width takes precedence over size |
+