@coinbase/cds-mcp-server 8.17.3 → 8.17.5

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

@@ -4,45 +4,10 @@ A control for toggling between on and off.
 
 ## Import
 
-```jsx
+```tsx
 import { Switch } from '@coinbase/cds-mobile/controls/Switch'
 ```
 
-## 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 | `checked ? 'bgPrimary' : 'bgTertiary'` | 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 | `-` | - |
-| `borderRadius` | `0 \| 100 \| 200 \| 300 \| 400 \| 500 \| 600 \| 700 \| 800 \| 900 \| 1000` | No | `1000` | - |
-| `borderWidth` | `0 \| 100 \| 200 \| 300 \| 400 \| 500` | No | `0` | - |
-| `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 | `-` | - |
-| `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. |
-| `key` | `Key \| null` | No | `-` | - |
-| `onChange` | `((value: string, 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` | `((instance: View \| null) => void) \| RefObject<View> \| null` | 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
 
 ```jsx
@@ -95,4 +60,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 | `checked ? 'bgPrimary' : 'bgTertiary'` | 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 | `-` | - |
+| `borderRadius` | `0 \| 100 \| 200 \| 300 \| 400 \| 500 \| 600 \| 700 \| 800 \| 900 \| 1000` | No | `1000` | - |
+| `borderWidth` | `0 \| 100 \| 200 \| 300 \| 400 \| 500` | No | `0` | - |
+| `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 | `-` | - |
+| `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. |
+| `key` | `Key \| null` | No | `-` | - |
+| `onChange` | `((value: string, 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` | `((instance: View \| null) => void) \| RefObject<View> \| null` | 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/TabIndicator.txt

@@ -4,22 +4,10 @@ A visual indicator that shows the active tab position.
 
 ## Import
 
-```jsx
+```tsx
 import { TabIndicator } from '@coinbase/cds-mobile/tabs/TabIndicator'
 ```
 
-## Props
-
-| Prop | Type | Required | Default | Description |
-| --- | --- | --- | --- | --- |
-| `width` | `number` | Yes | `-` | The width of the active TabLabel. |
-| `x` | `number` | Yes | `-` | The xPosition of the active TabLabel. |
-| `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'` | This should always match the background color of the parent container |
-| `key` | `Key \| null` | No | `-` | - |
-| `ref` | `((instance: View \| null) => void) \| RefObject<View> \| null` | No | `-` | - |
-| `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
 
 ### Basic Example
@@ -46,4 +34,15 @@ function TabIndicatorExample() {
 }
 ```
 
+## Props
+
+| Prop | Type | Required | Default | Description |
+| --- | --- | --- | --- | --- |
+| `width` | `number` | Yes | `-` | The width of the active TabLabel. |
+| `x` | `number` | Yes | `-` | The xPosition of the active TabLabel. |
+| `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'` | This should always match the background color of the parent container |
+| `key` | `Key \| null` | No | `-` | - |
+| `ref` | `((instance: View \| null) => void) \| RefObject<View> \| null` | No | `-` | - |
+| `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/TabLabel.txt

@@ -4,10 +4,37 @@ A text label component used within tab navigation.
 
 ## Import
 
-```jsx
+```tsx
 import { TabLabel } from '@coinbase/cds-mobile/tabs/TabLabel'
 ```
 
+## Examples
+
+### Basic Example
+
+```jsx
+<VStack gap={2}>
+  <HStack gap={2}>
+    <TabLabel>Primary tab</TabLabel>
+    <TabLabel count={1}>Primary tab</TabLabel>
+    <TabLabel count={10}>Primary tab</TabLabel>
+    <TabLabel count={100}>Primary tab</TabLabel>
+  </HStack>
+  <HStack gap={2}>
+    <TabLabel variant="secondary">Secondary tab</TabLabel>
+    <TabLabel variant="secondary" count={1}>
+      Secondary tab
+    </TabLabel>
+    <TabLabel variant="secondary" count={10}>
+      Secondary tab
+    </TabLabel>
+    <TabLabel variant="secondary" count={100}>
+      Secondary tab
+    </TabLabel>
+  </HStack>
+</VStack>
+```
+
 ## Props
 
 | Prop | Type | Required | Default | Description |
@@ -124,31 +151,3 @@ import { TabLabel } from '@coinbase/cds-mobile/tabs/TabLabel'
 | `zIndex` | `number` | No | `-` | - |
 
 
-## Examples
-
-### Basic Example
-
-```jsx
-<VStack gap={2}>
-  <HStack gap={2}>
-    <TabLabel>Primary tab</TabLabel>
-    <TabLabel count={1}>Primary tab</TabLabel>
-    <TabLabel count={10}>Primary tab</TabLabel>
-    <TabLabel count={100}>Primary tab</TabLabel>
-  </HStack>
-  <HStack gap={2}>
-    <TabLabel variant="secondary">Secondary tab</TabLabel>
-    <TabLabel variant="secondary" count={1}>
-      Secondary tab
-    </TabLabel>
-    <TabLabel variant="secondary" count={10}>
-      Secondary tab
-    </TabLabel>
-    <TabLabel variant="secondary" count={100}>
-      Secondary tab
-    </TabLabel>
-  </HStack>
-</VStack>
-```
-
-

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

@@ -4,10 +4,50 @@ Organizes content across different screens or data sets.
 
 ## Import
 
-```jsx
+```tsx
 import { TabNavigation } from '@coinbase/cds-mobile/navigation/TabNavigation'
 ```
 
+## Examples
+
+### Basic Example
+
+```jsx
+function TabNavigationExample() {
+  // TAB MOCK DATA
+  const tabs = useMemo(() => [
+    { id: 'first_primary_tab', label: 'Tab one' },
+    { id: 'second_primary_tab', label: 'Tab two' },
+    { id: 'third_primary_tab', label: 'Tab three' },
+    { id: 'fourth_primary_tab', label: 'Tab four' },
+    { id: 'fifth_primary_tab', label: 'Tab five' },
+  ]);
+  const secondaryTabs = useMemo(() => [
+    { id: 'first_secondary_tab', label: 'Tab one' },
+    { id: 'second_secondary_tab', label: 'Tab two' },
+  ]);
+
+  const [primary, setPrimary] = useState();
+  const [secondary, setSecondary] = useState();
+
+  return (
+    <VStack gap={2}>
+      <TabNavigation value={primary} tabs={tabs} onChange={setPrimary} />
+      <TabNavigation
+        variant="secondary"
+        value={secondary}
+        tabs={secondaryTabs}
+        onChange={setSecondary}
+      />
+    </VStack>
+  );
+}
+```
+
+import A11y from './a11y.mdx';
+
+<A11y />
+
 ## Props
 
 | Prop | Type | Required | Default | Description |
@@ -104,44 +144,3 @@ import { TabNavigation } from '@coinbase/cds-mobile/navigation/TabNavigation'
 | `zIndex` | `number` | No | `-` | - |
 
 
-## Examples
-
-### Basic Example
-
-```jsx
-function TabNavigationExample() {
-  // TAB MOCK DATA
-  const tabs = useMemo(() => [
-    { id: 'first_primary_tab', label: 'Tab one' },
-    { id: 'second_primary_tab', label: 'Tab two' },
-    { id: 'third_primary_tab', label: 'Tab three' },
-    { id: 'fourth_primary_tab', label: 'Tab four' },
-    { id: 'fifth_primary_tab', label: 'Tab five' },
-  ]);
-  const secondaryTabs = useMemo(() => [
-    { id: 'first_secondary_tab', label: 'Tab one' },
-    { id: 'second_secondary_tab', label: 'Tab two' },
-  ]);
-
-  const [primary, setPrimary] = useState();
-  const [secondary, setSecondary] = useState();
-
-  return (
-    <VStack gap={2}>
-      <TabNavigation value={primary} tabs={tabs} onChange={setPrimary} />
-      <TabNavigation
-        variant="secondary"
-        value={secondary}
-        tabs={secondaryTabs}
-        onChange={setSecondary}
-      />
-    </VStack>
-  );
-}
-```
-
-import A11y from './a11y.mdx';
-
-<A11y />
-
-

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

@@ -4,10 +4,47 @@ Tab chips are to be used in a filter setting where the user is given the ability
 
 ## Import
 
-```jsx
+```tsx
 import { TabbedChips } from '@coinbase/cds-mobile/chips/TabbedChips'
 ```
 
+## Examples
+
+### Basic Example
+
+```jsx
+function TabbedChipsExample() {
+  const tabs = [
+    {
+      id: 'all_tab',
+      label: 'All',
+    },
+    {
+      id: 'swap_',
+      label: 'Swap',
+    },
+    {
+      id: 'collect_tab',
+      label: 'Collect',
+    },
+    {
+      id: 'bridge_tab',
+      label: 'Bridge',
+    },
+  ];
+  const [value, setValue] = useState(tabs[0].id);
+  return (
+    <VStack maxWidth={375} borderRadius={400} bordered paddingX={2} gap={2} paddingY={2}>
+      <VStack paddingTop={1}>
+        <TextTitle3 as="p">Popular assets</TextTitle3>
+      </VStack>
+      <SearchInput compact placeholder="Search by name" />
+      <TabbedChips value={value} onChange={setValue} tabs={tabs} />
+    </VStack>
+  );
+}
+```
+
 ## Props
 
 | Prop | Type | Required | Default | Description |
@@ -103,41 +140,3 @@ import { TabbedChips } from '@coinbase/cds-mobile/chips/TabbedChips'
 | `zIndex` | `number` | No | `-` | - |
 
 
-## Examples
-
-### Basic Example
-
-```jsx
-function TabbedChipsExample() {
-  const tabs = [
-    {
-      id: 'all_tab',
-      label: 'All',
-    },
-    {
-      id: 'swap_',
-      label: 'Swap',
-    },
-    {
-      id: 'collect_tab',
-      label: 'Collect',
-    },
-    {
-      id: 'bridge_tab',
-      label: 'Bridge',
-    },
-  ];
-  const [value, setValue] = useState(tabs[0].id);
-  return (
-    <VStack maxWidth={375} borderRadius={400} bordered paddingX={2} gap={2} paddingY={2}>
-      <VStack paddingTop={1}>
-        <TextTitle3 as="p">Popular assets</TextTitle3>
-      </VStack>
-      <SearchInput compact placeholder="Search by name" />
-      <TabbedChips value={value} onChange={setValue} tabs={tabs} />
-    </VStack>
-  );
-}
-```
-
-

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

@@ -4,10 +4,85 @@ Tabs is a flexible, accessible tab navigation component for React Native, suppor
 
 ## Import
 
-```jsx
+```tsx
 import { Tabs } from '@coinbase/cds-mobile/tabs/Tabs'
 ```
 
+## Examples
+
+### Basic usage
+
+```tsx
+const tabs = [
+  { id: 'tab1', label: 'Tab 1' },
+  { id: 'tab2', label: 'Tab 2' },
+  { id: 'tab3', label: 'Tab 3' },
+];
+
+const TabComponent = ({ id, label, disabled }) => {
+  const { activeTab, updateActiveTab } = useTabsContext();
+  const isActive = activeTab?.id === id;
+  return (
+    <Pressable
+      onPress={() => updateActiveTab(id)}
+      disabled={disabled}
+      accessibilityLabel={label}
+      accessibilityRole="tab"
+      accessibilityState={{ selected: isActive, disabled }}
+    >
+      <TabLabel id={id} active={isActive}>
+        {label}
+      </TabLabel>
+    </Pressable>
+  );
+};
+
+<Tabs
+  tabs={tabs}
+  activeTab={tabs[0]}
+  onChange={() => {}}
+  TabComponent={TabComponent}
+  TabsActiveIndicatorComponent={TabsIndicator}
+/>;
+```
+
+### Custom Tab Component
+
+```tsx
+const tabs = [
+  { id: 'home', label: 'Home', icon: '🏠' },
+  { id: 'profile', label: 'Profile', icon: '👤' },
+  { id: 'settings', label: 'Settings', icon: '⚙️' },
+];
+
+const CustomTab = ({ id, label, icon, disabled }) => {
+  const { activeTab, updateActiveTab } = useTabsContext();
+  const isActive = activeTab?.id === id;
+  return (
+    <Pressable
+      onPress={() => updateActiveTab(id)}
+      disabled={disabled}
+      accessibilityLabel={label}
+      accessibilityRole="tab"
+      accessibilityState={{ selected: isActive, disabled }}
+    >
+      <TabLabel id={id} active={isActive}>
+        {label}
+        {icon}
+      </TabLabel>
+    </Pressable>
+  );
+};
+
+<Tabs
+  tabs={tabs}
+  activeTab={tabs[0]}
+  onChange={() => {}}
+  TabComponent={CustomTab}
+  TabsActiveIndicatorComponent={TabsIndicator}
+/>;
+```
+
 ## Props
 
 | Prop | Type | Required | Default | Description |
@@ -113,79 +188,3 @@ import { Tabs } from '@coinbase/cds-mobile/tabs/Tabs'
 | `zIndex` | `number` | No | `-` | - |
 
 
-## Examples
-
-### Basic usage
-
-```tsx
-const tabs = [
-  { id: 'tab1', label: 'Tab 1' },
-  { id: 'tab2', label: 'Tab 2' },
-  { id: 'tab3', label: 'Tab 3' },
-];
-
-const TabComponent = ({ id, label, disabled }) => {
-  const { activeTab, updateActiveTab } = useTabsContext();
-  const isActive = activeTab?.id === id;
-  return (
-    <Pressable
-      onPress={() => updateActiveTab(id)}
-      disabled={disabled}
-      accessibilityLabel={label}
-      accessibilityRole="tab"
-      accessibilityState={{ selected: isActive, disabled }}
-    >
-      <TabLabel id={id} active={isActive}>
-        {label}
-      </TabLabel>
-    </Pressable>
-  );
-};
-
-<Tabs
-  tabs={tabs}
-  activeTab={tabs[0]}
-  onChange={() => {}}
-  TabComponent={TabComponent}
-  TabsActiveIndicatorComponent={TabsIndicator}
-/>;
-```
-
-### Custom Tab Component
-
-```tsx
-const tabs = [
-  { id: 'home', label: 'Home', icon: '🏠' },
-  { id: 'profile', label: 'Profile', icon: '👤' },
-  { id: 'settings', label: 'Settings', icon: '⚙️' },
-];
-
-const CustomTab = ({ id, label, icon, disabled }) => {
-  const { activeTab, updateActiveTab } = useTabsContext();
-  const isActive = activeTab?.id === id;
-  return (
-    <Pressable
-      onPress={() => updateActiveTab(id)}
-      disabled={disabled}
-      accessibilityLabel={label}
-      accessibilityRole="tab"
-      accessibilityState={{ selected: isActive, disabled }}
-    >
-      <TabLabel id={id} active={isActive}>
-        {label}
-        {icon}
-      </TabLabel>
-    </Pressable>
-  );
-};
-
-<Tabs
-  tabs={tabs}
-  activeTab={tabs[0]}
-  onChange={() => {}}
-  TabComponent={CustomTab}
-  TabsActiveIndicatorComponent={TabsIndicator}
-/>;
-```
-
-