@coinbase/cds-mcp-server 8.17.2 → 8.17.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (284) hide show
  1. package/CHANGELOG.md +8 -0
  2. package/mcp-docs/mobile/components/Accordion.txt +188 -0
  3. package/mcp-docs/mobile/components/AccordionItem.txt +29 -0
  4. package/mcp-docs/mobile/components/Alert.txt +155 -0
  5. package/mcp-docs/mobile/components/AreaChart.txt +265 -0
  6. package/mcp-docs/mobile/components/Avatar.txt +195 -0
  7. package/mcp-docs/mobile/components/AvatarButton.txt +225 -0
  8. package/mcp-docs/mobile/components/Banner.txt +221 -0
  9. package/mcp-docs/mobile/components/BarChart.txt +815 -0
  10. package/mcp-docs/mobile/components/Box.txt +173 -0
  11. package/mcp-docs/mobile/components/BrowserBar.txt +146 -0
  12. package/mcp-docs/mobile/components/Button.txt +198 -0
  13. package/mcp-docs/mobile/components/ButtonGroup.txt +79 -0
  14. package/mcp-docs/mobile/components/Carousel.txt +1083 -0
  15. package/mcp-docs/mobile/components/CartesianChart.txt +825 -0
  16. package/mcp-docs/mobile/components/CellMedia.txt +70 -0
  17. package/mcp-docs/mobile/components/Checkbox.txt +245 -0
  18. package/mcp-docs/mobile/components/CheckboxCell.txt +201 -0
  19. package/mcp-docs/mobile/components/CheckboxGroup.txt +284 -0
  20. package/mcp-docs/mobile/components/Chip.txt +194 -0
  21. package/mcp-docs/mobile/components/Coachmark.txt +157 -0
  22. package/mcp-docs/mobile/components/Collapsible.txt +104 -0
  23. package/mcp-docs/mobile/components/ContainedAssetCard.txt +134 -0
  24. package/mcp-docs/mobile/components/ContentCard.txt +365 -0
  25. package/mcp-docs/mobile/components/ContentCardBody.txt +135 -0
  26. package/mcp-docs/mobile/components/ContentCardFooter.txt +127 -0
  27. package/mcp-docs/mobile/components/ContentCardHeader.txt +145 -0
  28. package/mcp-docs/mobile/components/ContentCell.txt +226 -0
  29. package/mcp-docs/mobile/components/ControlGroup.txt +443 -0
  30. package/mcp-docs/mobile/components/DatePicker.txt +496 -0
  31. package/mcp-docs/mobile/components/Divider.txt +138 -0
  32. package/mcp-docs/mobile/components/DotCount.txt +145 -0
  33. package/mcp-docs/mobile/components/DotStatusColor.txt +58 -0
  34. package/mcp-docs/mobile/components/DotSymbol.txt +134 -0
  35. package/mcp-docs/mobile/components/Fallback.txt +157 -0
  36. package/mcp-docs/mobile/components/FloatingAssetCard.txt +155 -0
  37. package/mcp-docs/mobile/components/HStack.txt +234 -0
  38. package/mcp-docs/mobile/components/HeroSquare.txt +47 -0
  39. package/mcp-docs/mobile/components/Icon.txt +51 -0
  40. package/mcp-docs/mobile/components/IconButton.txt +268 -0
  41. package/mcp-docs/mobile/components/InputChip.txt +187 -0
  42. package/mcp-docs/mobile/components/Interactable.txt +186 -0
  43. package/mcp-docs/mobile/components/LineChart.txt +1324 -0
  44. package/mcp-docs/mobile/components/Link.txt +291 -0
  45. package/mcp-docs/mobile/components/ListCell.txt +412 -0
  46. package/mcp-docs/mobile/components/LogoMark.txt +84 -0
  47. package/mcp-docs/mobile/components/LogoWordMark.txt +93 -0
  48. package/mcp-docs/mobile/components/Lottie.txt +138 -0
  49. package/mcp-docs/mobile/components/LottieStatusAnimation.txt +46 -0
  50. package/mcp-docs/mobile/components/Modal.txt +83 -0
  51. package/mcp-docs/mobile/components/ModalBody.txt +33 -0
  52. package/mcp-docs/mobile/components/ModalFooter.txt +24 -0
  53. package/mcp-docs/mobile/components/ModalHeader.txt +27 -0
  54. package/mcp-docs/mobile/components/MultiContentModule.txt +379 -0
  55. package/mcp-docs/mobile/components/NavigationTitle.txt +131 -0
  56. package/mcp-docs/mobile/components/NavigationTitleSelect.txt +141 -0
  57. package/mcp-docs/mobile/components/NudgeCard.txt +89 -0
  58. package/mcp-docs/mobile/components/Numpad.txt +340 -0
  59. package/mcp-docs/mobile/components/Overlay.txt +151 -0
  60. package/mcp-docs/mobile/components/PageFooter.txt +160 -0
  61. package/mcp-docs/mobile/components/PageHeader.txt +185 -0
  62. package/mcp-docs/mobile/components/PeriodSelector.txt +407 -0
  63. package/mcp-docs/mobile/components/Pictogram.txt +47 -0
  64. package/mcp-docs/mobile/components/Point.txt +204 -0
  65. package/mcp-docs/mobile/components/PortalProvider.txt +78 -0
  66. package/mcp-docs/mobile/components/Pressable.txt +210 -0
  67. package/mcp-docs/mobile/components/ProgressBar.txt +129 -0
  68. package/mcp-docs/mobile/components/ProgressBarWithFixedLabels.txt +160 -0
  69. package/mcp-docs/mobile/components/ProgressBarWithFloatLabel.txt +137 -0
  70. package/mcp-docs/mobile/components/ProgressCircle.txt +236 -0
  71. package/mcp-docs/mobile/components/Radio.txt +241 -0
  72. package/mcp-docs/mobile/components/RadioCell.txt +201 -0
  73. package/mcp-docs/mobile/components/RadioGroup.txt +281 -0
  74. package/mcp-docs/mobile/components/ReferenceLine.txt +152 -0
  75. package/mcp-docs/mobile/components/RemoteImage.txt +105 -0
  76. package/mcp-docs/mobile/components/RemoteImageGroup.txt +60 -0
  77. package/mcp-docs/mobile/components/RollingNumber.txt +788 -0
  78. package/mcp-docs/mobile/components/Scrubber.txt +203 -0
  79. package/mcp-docs/mobile/components/SearchInput.txt +191 -0
  80. package/mcp-docs/mobile/components/SectionHeader.txt +204 -0
  81. package/mcp-docs/mobile/components/SegmentedTabs.txt +315 -0
  82. package/mcp-docs/mobile/components/Select.txt +211 -0
  83. package/mcp-docs/mobile/components/SelectChip.txt +323 -0
  84. package/mcp-docs/mobile/components/SelectOption.txt +84 -0
  85. package/mcp-docs/mobile/components/SlideButton.txt +330 -0
  86. package/mcp-docs/mobile/components/Spacer.txt +83 -0
  87. package/mcp-docs/mobile/components/Sparkline.txt +122 -0
  88. package/mcp-docs/mobile/components/SparklineGradient.txt +106 -0
  89. package/mcp-docs/mobile/components/SparklineInteractive.txt +156 -0
  90. package/mcp-docs/mobile/components/SparklineInteractiveHeader.txt +72 -0
  91. package/mcp-docs/mobile/components/Spinner.txt +48 -0
  92. package/mcp-docs/mobile/components/SpotIcon.txt +47 -0
  93. package/mcp-docs/mobile/components/SpotRectangle.txt +47 -0
  94. package/mcp-docs/mobile/components/SpotSquare.txt +47 -0
  95. package/mcp-docs/mobile/components/Stepper.txt +527 -0
  96. package/mcp-docs/mobile/components/SubBrandLogoMark.txt +125 -0
  97. package/mcp-docs/mobile/components/SubBrandLogoWordMark.txt +125 -0
  98. package/mcp-docs/mobile/components/Switch.txt +97 -0
  99. package/mcp-docs/mobile/components/TabIndicator.txt +48 -0
  100. package/mcp-docs/mobile/components/TabLabel.txt +153 -0
  101. package/mcp-docs/mobile/components/TabNavigation.txt +146 -0
  102. package/mcp-docs/mobile/components/TabbedChips.txt +142 -0
  103. package/mcp-docs/mobile/components/Tabs.txt +190 -0
  104. package/mcp-docs/mobile/components/Tag.txt +300 -0
  105. package/mcp-docs/mobile/components/Text.txt +211 -0
  106. package/mcp-docs/mobile/components/TextInput.txt +717 -0
  107. package/mcp-docs/mobile/components/ThemeProvider.txt +132 -0
  108. package/mcp-docs/mobile/components/Toast.txt +196 -0
  109. package/mcp-docs/mobile/components/Tooltip.txt +59 -0
  110. package/mcp-docs/mobile/components/TopNavBar.txt +161 -0
  111. package/mcp-docs/mobile/components/Tour.txt +158 -0
  112. package/mcp-docs/mobile/components/Tray.txt +252 -0
  113. package/mcp-docs/mobile/components/UpsellCard.txt +321 -0
  114. package/mcp-docs/mobile/components/VStack.txt +222 -0
  115. package/mcp-docs/mobile/components/XAxis.txt +621 -0
  116. package/mcp-docs/mobile/components/YAxis.txt +567 -0
  117. package/mcp-docs/mobile/getting-started/ai-overview.txt +108 -0
  118. package/mcp-docs/mobile/getting-started/installation.txt +57 -0
  119. package/mcp-docs/mobile/getting-started/introduction.txt +102 -0
  120. package/mcp-docs/mobile/getting-started/playground.txt +28 -0
  121. package/mcp-docs/mobile/getting-started/styling.txt +84 -0
  122. package/mcp-docs/mobile/getting-started/theming.txt +286 -0
  123. package/mcp-docs/mobile/hooks/useDimensions.txt +72 -0
  124. package/mcp-docs/mobile/hooks/useEventHandler.txt +120 -0
  125. package/mcp-docs/mobile/hooks/useMergeRefs.txt +116 -0
  126. package/mcp-docs/mobile/hooks/useOverlayContentContext.txt +280 -0
  127. package/mcp-docs/mobile/hooks/usePreviousValue.txt +74 -0
  128. package/mcp-docs/mobile/hooks/useRefMap.txt +178 -0
  129. package/mcp-docs/mobile/hooks/useTheme.txt +321 -0
  130. package/mcp-docs/mobile/routes.txt +139 -0
  131. package/mcp-docs/web/components/Accordion.txt +189 -0
  132. package/mcp-docs/web/components/AccordionItem.txt +31 -0
  133. package/mcp-docs/web/components/Alert.txt +164 -0
  134. package/mcp-docs/web/components/AreaChart.txt +510 -0
  135. package/mcp-docs/web/components/Avatar.txt +211 -0
  136. package/mcp-docs/web/components/AvatarButton.txt +240 -0
  137. package/mcp-docs/web/components/Banner.txt +226 -0
  138. package/mcp-docs/web/components/BarChart.txt +1267 -0
  139. package/mcp-docs/web/components/Box.txt +175 -0
  140. package/mcp-docs/web/components/Button.txt +212 -0
  141. package/mcp-docs/web/components/ButtonGroup.txt +79 -0
  142. package/mcp-docs/web/components/Calendar.txt +181 -0
  143. package/mcp-docs/web/components/Carousel.txt +1575 -0
  144. package/mcp-docs/web/components/CartesianChart.txt +1044 -0
  145. package/mcp-docs/web/components/CellMedia.txt +56 -0
  146. package/mcp-docs/web/components/Checkbox.txt +188 -0
  147. package/mcp-docs/web/components/CheckboxCell.txt +202 -0
  148. package/mcp-docs/web/components/CheckboxGroup.txt +219 -0
  149. package/mcp-docs/web/components/Chip.txt +196 -0
  150. package/mcp-docs/web/components/Coachmark.txt +188 -0
  151. package/mcp-docs/web/components/Collapsible.txt +119 -0
  152. package/mcp-docs/web/components/ContainedAssetCard.txt +232 -0
  153. package/mcp-docs/web/components/ContentCard.txt +367 -0
  154. package/mcp-docs/web/components/ContentCardBody.txt +137 -0
  155. package/mcp-docs/web/components/ContentCardFooter.txt +129 -0
  156. package/mcp-docs/web/components/ContentCardHeader.txt +147 -0
  157. package/mcp-docs/web/components/ContentCell.txt +219 -0
  158. package/mcp-docs/web/components/ControlGroup.txt +436 -0
  159. package/mcp-docs/web/components/DatePicker.txt +505 -0
  160. package/mcp-docs/web/components/Divider.txt +143 -0
  161. package/mcp-docs/web/components/DotCount.txt +149 -0
  162. package/mcp-docs/web/components/DotStatusColor.txt +58 -0
  163. package/mcp-docs/web/components/DotSymbol.txt +137 -0
  164. package/mcp-docs/web/components/Dropdown.txt +119 -0
  165. package/mcp-docs/web/components/Fallback.txt +163 -0
  166. package/mcp-docs/web/components/FloatingAssetCard.txt +250 -0
  167. package/mcp-docs/web/components/FullscreenAlert.txt +69 -0
  168. package/mcp-docs/web/components/FullscreenModal.txt +145 -0
  169. package/mcp-docs/web/components/FullscreenModalLayout.txt +187 -0
  170. package/mcp-docs/web/components/Grid.txt +236 -0
  171. package/mcp-docs/web/components/GridColumn.txt +209 -0
  172. package/mcp-docs/web/components/HStack.txt +236 -0
  173. package/mcp-docs/web/components/HeroSquare.txt +48 -0
  174. package/mcp-docs/web/components/Icon.txt +145 -0
  175. package/mcp-docs/web/components/IconButton.txt +390 -0
  176. package/mcp-docs/web/components/InputChip.txt +187 -0
  177. package/mcp-docs/web/components/Interactable.txt +193 -0
  178. package/mcp-docs/web/components/LineChart.txt +1576 -0
  179. package/mcp-docs/web/components/Link.txt +243 -0
  180. package/mcp-docs/web/components/ListCell.txt +418 -0
  181. package/mcp-docs/web/components/LogoMark.txt +84 -0
  182. package/mcp-docs/web/components/LogoWordMark.txt +93 -0
  183. package/mcp-docs/web/components/Lottie.txt +157 -0
  184. package/mcp-docs/web/components/LottieStatusAnimation.txt +57 -0
  185. package/mcp-docs/web/components/MediaQueryProvider.txt +108 -0
  186. package/mcp-docs/web/components/Modal.txt +196 -0
  187. package/mcp-docs/web/components/ModalBody.txt +117 -0
  188. package/mcp-docs/web/components/ModalFooter.txt +119 -0
  189. package/mcp-docs/web/components/ModalHeader.txt +123 -0
  190. package/mcp-docs/web/components/MultiContentModule.txt +381 -0
  191. package/mcp-docs/web/components/NavigationBar.txt +102 -0
  192. package/mcp-docs/web/components/NavigationTitle.txt +25 -0
  193. package/mcp-docs/web/components/NavigationTitleSelect.txt +45 -0
  194. package/mcp-docs/web/components/NudgeCard.txt +181 -0
  195. package/mcp-docs/web/components/Overlay.txt +171 -0
  196. package/mcp-docs/web/components/PageFooter.txt +184 -0
  197. package/mcp-docs/web/components/PageHeader.txt +243 -0
  198. package/mcp-docs/web/components/Pagination.txt +499 -0
  199. package/mcp-docs/web/components/PeriodSelector.txt +703 -0
  200. package/mcp-docs/web/components/Pictogram.txt +48 -0
  201. package/mcp-docs/web/components/Point.txt +460 -0
  202. package/mcp-docs/web/components/PortalProvider.txt +76 -0
  203. package/mcp-docs/web/components/Pressable.txt +193 -0
  204. package/mcp-docs/web/components/ProgressBar.txt +163 -0
  205. package/mcp-docs/web/components/ProgressBarWithFixedLabels.txt +212 -0
  206. package/mcp-docs/web/components/ProgressBarWithFloatLabel.txt +181 -0
  207. package/mcp-docs/web/components/ProgressCircle.txt +443 -0
  208. package/mcp-docs/web/components/Radio.txt +219 -0
  209. package/mcp-docs/web/components/RadioCell.txt +215 -0
  210. package/mcp-docs/web/components/RadioGroup.txt +288 -0
  211. package/mcp-docs/web/components/ReferenceLine.txt +451 -0
  212. package/mcp-docs/web/components/RemoteImage.txt +165 -0
  213. package/mcp-docs/web/components/RemoteImageGroup.txt +86 -0
  214. package/mcp-docs/web/components/RollingNumber.txt +1021 -0
  215. package/mcp-docs/web/components/Scrubber.txt +231 -0
  216. package/mcp-docs/web/components/SearchInput.txt +117 -0
  217. package/mcp-docs/web/components/SectionHeader.txt +217 -0
  218. package/mcp-docs/web/components/SegmentedTabs.txt +324 -0
  219. package/mcp-docs/web/components/Select.txt +224 -0
  220. package/mcp-docs/web/components/SelectChip.txt +314 -0
  221. package/mcp-docs/web/components/SelectOption.txt +165 -0
  222. package/mcp-docs/web/components/Sidebar.txt +349 -0
  223. package/mcp-docs/web/components/SidebarItem.txt +131 -0
  224. package/mcp-docs/web/components/SidebarMoreMenu.txt +30 -0
  225. package/mcp-docs/web/components/Spacer.txt +173 -0
  226. package/mcp-docs/web/components/Sparkline.txt +122 -0
  227. package/mcp-docs/web/components/SparklineGradient.txt +106 -0
  228. package/mcp-docs/web/components/SparklineInteractive.txt +153 -0
  229. package/mcp-docs/web/components/SparklineInteractiveHeader.txt +76 -0
  230. package/mcp-docs/web/components/Spinner.txt +128 -0
  231. package/mcp-docs/web/components/SpotIcon.txt +48 -0
  232. package/mcp-docs/web/components/SpotRectangle.txt +48 -0
  233. package/mcp-docs/web/components/SpotSquare.txt +48 -0
  234. package/mcp-docs/web/components/Stepper.txt +682 -0
  235. package/mcp-docs/web/components/SubBrandLogoMark.txt +125 -0
  236. package/mcp-docs/web/components/SubBrandLogoWordMark.txt +125 -0
  237. package/mcp-docs/web/components/Switch.txt +85 -0
  238. package/mcp-docs/web/components/TabIndicator.txt +48 -0
  239. package/mcp-docs/web/components/TabLabel.txt +158 -0
  240. package/mcp-docs/web/components/TabNavigation.txt +159 -0
  241. package/mcp-docs/web/components/TabbedChips.txt +155 -0
  242. package/mcp-docs/web/components/Table.txt +367 -0
  243. package/mcp-docs/web/components/TableBody.txt +83 -0
  244. package/mcp-docs/web/components/TableCaption.txt +102 -0
  245. package/mcp-docs/web/components/TableCell.txt +165 -0
  246. package/mcp-docs/web/components/TableCellFallback.txt +97 -0
  247. package/mcp-docs/web/components/TableFooter.txt +83 -0
  248. package/mcp-docs/web/components/TableHeader.txt +100 -0
  249. package/mcp-docs/web/components/TableRow.txt +140 -0
  250. package/mcp-docs/web/components/Tabs.txt +212 -0
  251. package/mcp-docs/web/components/Tag.txt +304 -0
  252. package/mcp-docs/web/components/Text.txt +232 -0
  253. package/mcp-docs/web/components/TextInput.txt +652 -0
  254. package/mcp-docs/web/components/ThemeProvider.txt +199 -0
  255. package/mcp-docs/web/components/TileButton.txt +158 -0
  256. package/mcp-docs/web/components/Toast.txt +203 -0
  257. package/mcp-docs/web/components/Tooltip.txt +89 -0
  258. package/mcp-docs/web/components/Tour.txt +179 -0
  259. package/mcp-docs/web/components/Tray.txt +288 -0
  260. package/mcp-docs/web/components/UpsellCard.txt +319 -0
  261. package/mcp-docs/web/components/VStack.txt +224 -0
  262. package/mcp-docs/web/components/XAxis.txt +619 -0
  263. package/mcp-docs/web/components/YAxis.txt +548 -0
  264. package/mcp-docs/web/getting-started/ai-overview.txt +108 -0
  265. package/mcp-docs/web/getting-started/installation.txt +103 -0
  266. package/mcp-docs/web/getting-started/introduction.txt +102 -0
  267. package/mcp-docs/web/getting-started/playground.txt +28 -0
  268. package/mcp-docs/web/getting-started/styling.txt +161 -0
  269. package/mcp-docs/web/getting-started/templates.txt +121 -0
  270. package/mcp-docs/web/getting-started/theming.txt +426 -0
  271. package/mcp-docs/web/hooks/useBreakpoints.txt +61 -0
  272. package/mcp-docs/web/hooks/useDimensions.txt +114 -0
  273. package/mcp-docs/web/hooks/useEventHandler.txt +120 -0
  274. package/mcp-docs/web/hooks/useHasMounted.txt +75 -0
  275. package/mcp-docs/web/hooks/useIsoEffect.txt +58 -0
  276. package/mcp-docs/web/hooks/useMediaQuery.txt +114 -0
  277. package/mcp-docs/web/hooks/useMergeRefs.txt +116 -0
  278. package/mcp-docs/web/hooks/useOverlayContentContext.txt +279 -0
  279. package/mcp-docs/web/hooks/usePreviousValue.txt +74 -0
  280. package/mcp-docs/web/hooks/useRefMap.txt +178 -0
  281. package/mcp-docs/web/hooks/useScrollBlocker.txt +82 -0
  282. package/mcp-docs/web/hooks/useTheme.txt +364 -0
  283. package/mcp-docs/web/routes.txt +163 -0
  284. package/package.json +1 -1
@@ -0,0 +1,135 @@
1
+ # ContentCardBody
2
+
3
+ ContentCardBody is a subcomponent of ContentCard that provides the main content area of the card.
4
+
5
+ ## Import
6
+
7
+ ```tsx
8
+ import { ContentCardBody } from '@coinbase/cds-mobile/cards/ContentCard'
9
+ ```
10
+
11
+ ## Examples
12
+
13
+ ### Basic Example
14
+
15
+ ```jsx
16
+ <VStack bordered borderRadius="400" maxWidth={375} padding={2}>
17
+ <ContentCardBody
18
+ body="Bitcoin Network Shatters Records With Hashrate Climbing to 464 EH/s"
19
+ label={
20
+ <HStack alignItems="flex-end" flexWrap="wrap" gap={0.5}>
21
+ <TextLabel2 as="p" color="fgMuted" numberOfLines={1}>
22
+ BTC
23
+ </TextLabel2>
24
+ <TextLabel2 accessibilityLabel="Up 5.12%" as="p" color="fgPositive">
25
+ ↗ 5.12%
26
+ </TextLabel2>
27
+ </HStack>
28
+ }
29
+ />
30
+ </VStack>
31
+ ```
32
+
33
+ ## Props
34
+
35
+ | Prop | Type | Required | Default | Description |
36
+ | --- | --- | --- | --- | --- |
37
+ | `alignContent` | `flex-start \| flex-end \| center \| stretch \| space-between \| space-around \| space-evenly` | No | `-` | - |
38
+ | `alignItems` | `flex-start \| flex-end \| center \| stretch \| baseline` | No | `-` | - |
39
+ | `alignSelf` | `auto \| FlexAlignType` | No | `-` | - |
40
+ | `animated` | `boolean` | No | `-` | - |
41
+ | `aspectRatio` | `string \| number` | No | `-` | - |
42
+ | `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 | `-` | - |
43
+ | `body` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | Main body copy |
44
+ | `borderBottomLeftRadius` | `0 \| 100 \| 200 \| 300 \| 400 \| 500 \| 600 \| 700 \| 800 \| 900 \| 1000` | No | `-` | - |
45
+ | `borderBottomRightRadius` | `0 \| 100 \| 200 \| 300 \| 400 \| 500 \| 600 \| 700 \| 800 \| 900 \| 1000` | No | `-` | - |
46
+ | `borderBottomWidth` | `0 \| 100 \| 200 \| 300 \| 400 \| 500` | No | `-` | - |
47
+ | `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 | `-` | - |
48
+ | `borderEndWidth` | `0 \| 100 \| 200 \| 300 \| 400 \| 500` | No | `-` | - |
49
+ | `borderRadius` | `0 \| 100 \| 200 \| 300 \| 400 \| 500 \| 600 \| 700 \| 800 \| 900 \| 1000` | No | `-` | - |
50
+ | `borderStartWidth` | `0 \| 100 \| 200 \| 300 \| 400 \| 500` | No | `-` | - |
51
+ | `borderTopLeftRadius` | `0 \| 100 \| 200 \| 300 \| 400 \| 500 \| 600 \| 700 \| 800 \| 900 \| 1000` | No | `-` | - |
52
+ | `borderTopRightRadius` | `0 \| 100 \| 200 \| 300 \| 400 \| 500 \| 600 \| 700 \| 800 \| 900 \| 1000` | No | `-` | - |
53
+ | `borderTopWidth` | `0 \| 100 \| 200 \| 300 \| 400 \| 500` | No | `-` | - |
54
+ | `borderWidth` | `0 \| 100 \| 200 \| 300 \| 400 \| 500` | No | `-` | - |
55
+ | `bordered` | `boolean` | No | `-` | Add a border around all sides of the box. |
56
+ | `borderedBottom` | `boolean` | No | `-` | Add a border to the bottom side of the box. |
57
+ | `borderedEnd` | `boolean` | No | `-` | Add a border to the trailing side of the box. |
58
+ | `borderedHorizontal` | `boolean` | No | `-` | Add a border to the leading and trailing sides of the box. |
59
+ | `borderedStart` | `boolean` | No | `-` | Add a border to the leading side of the box. |
60
+ | `borderedTop` | `boolean` | No | `-` | Add a border to the top side of the box. |
61
+ | `borderedVertical` | `boolean` | No | `-` | Add a border to the top and bottom sides of the box. |
62
+ | `bottom` | `string \| number` | No | `-` | - |
63
+ | `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 | `-` | - |
64
+ | `columnGap` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
65
+ | `dangerouslySetBackground` | `string` | No | `-` | - |
66
+ | `display` | `flex \| none` | No | `-` | - |
67
+ | `elevation` | `0 \| 1 \| 2` | No | `-` | Determines box shadow styles. Parent should have overflow set to visible to ensure styles are not clipped. |
68
+ | `flexBasis` | `string \| number` | No | `-` | - |
69
+ | `flexDirection` | `row \| column \| row-reverse \| column-reverse` | No | `-` | - |
70
+ | `flexGrow` | `number` | No | `-` | - |
71
+ | `flexShrink` | `number` | No | `-` | - |
72
+ | `flexWrap` | `wrap \| nowrap \| wrap-reverse` | No | `-` | - |
73
+ | `font` | `inherit \| FontFamily` | No | `-` | - |
74
+ | `fontFamily` | `inherit \| FontFamily` | No | `-` | - |
75
+ | `fontSize` | `inherit \| FontSize` | No | `-` | - |
76
+ | `fontWeight` | `inherit \| FontWeight` | No | `-` | - |
77
+ | `gap` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
78
+ | `height` | `string \| number` | No | `-` | - |
79
+ | `justifyContent` | `flex-start \| flex-end \| center \| space-between \| space-around \| space-evenly` | No | `-` | - |
80
+ | `key` | `Key \| null` | No | `-` | - |
81
+ | `label` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | Use for supplemental data |
82
+ | `left` | `string \| number` | No | `-` | - |
83
+ | `lineHeight` | `inherit \| LineHeight` | No | `-` | - |
84
+ | `margin` | `0 \| -1 \| -2 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1.5` | No | `-` | - |
85
+ | `marginBottom` | `0 \| -1 \| -2 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1.5` | No | `-` | - |
86
+ | `marginEnd` | `0 \| -1 \| -2 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1.5` | No | `-` | - |
87
+ | `marginStart` | `0 \| -1 \| -2 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1.5` | No | `-` | - |
88
+ | `marginTop` | `0 \| -1 \| -2 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1.5` | No | `-` | - |
89
+ | `marginX` | `0 \| -1 \| -2 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1.5` | No | `-` | - |
90
+ | `marginY` | `0 \| -1 \| -2 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1.5` | No | `-` | - |
91
+ | `maxHeight` | `string \| number` | No | `-` | - |
92
+ | `maxWidth` | `string \| number` | No | `-` | - |
93
+ | `media` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | Media, image or video to show |
94
+ | `mediaPosition` | `top \| bottom \| left \| right` | No | `-` | The position of the media within the card. Can be one of: top, bottom, right or left. |
95
+ | `minHeight` | `string \| number` | No | `-` | - |
96
+ | `minWidth` | `string \| number` | No | `-` | - |
97
+ | `onPointerCancel` | `((event: PointerEvent) => void)` | No | `-` | - |
98
+ | `onPointerCancelCapture` | `((event: PointerEvent) => void)` | No | `-` | - |
99
+ | `onPointerDown` | `((event: PointerEvent) => void)` | No | `-` | - |
100
+ | `onPointerDownCapture` | `((event: PointerEvent) => void)` | No | `-` | - |
101
+ | `onPointerEnter` | `((event: PointerEvent) => void)` | No | `-` | - |
102
+ | `onPointerEnterCapture` | `((event: PointerEvent) => void)` | No | `-` | - |
103
+ | `onPointerLeave` | `((event: PointerEvent) => void)` | No | `-` | - |
104
+ | `onPointerLeaveCapture` | `((event: PointerEvent) => void)` | No | `-` | - |
105
+ | `onPointerMove` | `((event: PointerEvent) => void)` | No | `-` | - |
106
+ | `onPointerMoveCapture` | `((event: PointerEvent) => void)` | No | `-` | - |
107
+ | `onPointerUp` | `((event: PointerEvent) => void)` | No | `-` | - |
108
+ | `onPointerUpCapture` | `((event: PointerEvent) => void)` | No | `-` | - |
109
+ | `opacity` | `number \| AnimatedNode` | No | `-` | - |
110
+ | `overflow` | `visible \| hidden \| scroll` | No | `-` | - |
111
+ | `padding` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
112
+ | `paddingBottom` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
113
+ | `paddingEnd` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
114
+ | `paddingStart` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
115
+ | `paddingTop` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
116
+ | `paddingX` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
117
+ | `paddingY` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
118
+ | `pin` | `top \| bottom \| left \| right \| all` | No | `-` | Direction in which to absolutely pin the box. |
119
+ | `position` | `absolute \| relative \| static \| fixed \| sticky` | No | `-` | - |
120
+ | `ref` | `((instance: View \| null) => void) \| RefObject<View> \| null` | No | `-` | - |
121
+ | `right` | `string \| number` | No | `-` | - |
122
+ | `rowGap` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
123
+ | `style` | `false \| RegisteredStyle<ViewStyle> \| Value \| AnimatedInterpolation<string \| number> \| WithAnimatedObject<ViewStyle> \| WithAnimatedArray<Falsy \| ViewStyle \| RegisteredStyle<ViewStyle> \| RecursiveArray<Falsy \| ViewStyle \| RegisteredStyle<ViewStyle>> \| readonly (Falsy \| ViewStyle \| RegisteredStyle<ViewStyle>)[]> \| null` | No | `-` | - |
124
+ | `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 Used to locate this element in unit and end-to-end tests. Used to locate this view in end-to-end tests. |
125
+ | `textAlign` | `left \| right \| auto \| center \| justify` | No | `-` | - |
126
+ | `textDecorationLine` | `none \| underline \| line-through \| underline line-through` | No | `-` | - |
127
+ | `textDecorationStyle` | `solid \| dotted \| dashed \| double` | No | `-` | - |
128
+ | `textTransform` | `none \| capitalize \| uppercase \| lowercase` | No | `-` | - |
129
+ | `top` | `string \| number` | No | `-` | - |
130
+ | `transform` | `string \| (({ scaleX: AnimatableNumericValue; } & { scaleY?: undefined; translateX?: undefined; translateY?: undefined; perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ scaleY: AnimatableNumericValue; } & { scaleX?: undefined; translateX?: undefined; translateY?: undefined; perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ translateX: AnimatableNumericValue \| ${number}%; } & { scaleX?: undefined; scaleY?: undefined; translateY?: undefined; perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ translateY: AnimatableNumericValue \| ${number}%; } & { scaleX?: undefined; scaleY?: undefined; translateX?: undefined; perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ perspective: AnimatableNumericValue; } & { scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ rotate: AnimatableStringValue; } & { scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; perspective?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ rotateX: AnimatableStringValue; } & { scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; perspective?: undefined; rotate?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ rotateY: AnimatableStringValue; } & { scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateZ?: undefined; scale?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ rotateZ: AnimatableStringValue; } & { scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; scale?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ scale: AnimatableNumericValue; } & { scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ skewX: AnimatableStringValue; } & { scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ skewY: AnimatableStringValue; } & { scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; skewX?: undefined; matrix?: undefined; }) \| ({ matrix: AnimatableNumericValue[]; } & { scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; skewX?: undefined; skewY?: undefined; }))[]` | No | `-` | - |
131
+ | `userSelect` | `none \| auto \| contain \| text \| all` | No | `-` | - |
132
+ | `width` | `string \| number` | No | `-` | - |
133
+ | `zIndex` | `number` | No | `-` | - |
134
+
135
+
@@ -0,0 +1,127 @@
1
+ # ContentCardFooter
2
+
3
+ ContentCardFooter is a subcomponent of ContentCard that provides the footer section of the card, typically used for actions or additional information.
4
+
5
+ ## Import
6
+
7
+ ```tsx
8
+ import { ContentCardFooter } from '@coinbase/cds-mobile/cards/ContentCard'
9
+ ```
10
+
11
+ ## Examples
12
+
13
+ ### Basic Example
14
+
15
+ ```jsx
16
+ function Example() {
17
+ return (
18
+ <VStack bordered borderRadius="400" maxWidth={375} padding={2}>
19
+ <ContentCardFooter>
20
+ <IconCounterButton count={20} icon="heart" />
21
+ <IconCounterButton count={40} icon="comment" />
22
+ <IconCounterButton count={32} icon="wireTransfer" />
23
+ </ContentCardFooter>
24
+ </VStack>
25
+ );
26
+ }
27
+ ```
28
+
29
+ ## Props
30
+
31
+ | Prop | Type | Required | Default | Description |
32
+ | --- | --- | --- | --- | --- |
33
+ | `alignContent` | `flex-start \| flex-end \| center \| stretch \| space-between \| space-around \| space-evenly` | No | `-` | - |
34
+ | `alignItems` | `flex-start \| flex-end \| center \| stretch \| baseline` | No | `-` | - |
35
+ | `alignSelf` | `auto \| FlexAlignType` | No | `-` | - |
36
+ | `animated` | `boolean` | No | `-` | - |
37
+ | `aspectRatio` | `string \| number` | No | `-` | - |
38
+ | `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 | `-` | - |
39
+ | `borderBottomLeftRadius` | `0 \| 100 \| 200 \| 300 \| 400 \| 500 \| 600 \| 700 \| 800 \| 900 \| 1000` | No | `-` | - |
40
+ | `borderBottomRightRadius` | `0 \| 100 \| 200 \| 300 \| 400 \| 500 \| 600 \| 700 \| 800 \| 900 \| 1000` | No | `-` | - |
41
+ | `borderBottomWidth` | `0 \| 100 \| 200 \| 300 \| 400 \| 500` | No | `-` | - |
42
+ | `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 | `-` | - |
43
+ | `borderEndWidth` | `0 \| 100 \| 200 \| 300 \| 400 \| 500` | No | `-` | - |
44
+ | `borderRadius` | `0 \| 100 \| 200 \| 300 \| 400 \| 500 \| 600 \| 700 \| 800 \| 900 \| 1000` | No | `-` | - |
45
+ | `borderStartWidth` | `0 \| 100 \| 200 \| 300 \| 400 \| 500` | No | `-` | - |
46
+ | `borderTopLeftRadius` | `0 \| 100 \| 200 \| 300 \| 400 \| 500 \| 600 \| 700 \| 800 \| 900 \| 1000` | No | `-` | - |
47
+ | `borderTopRightRadius` | `0 \| 100 \| 200 \| 300 \| 400 \| 500 \| 600 \| 700 \| 800 \| 900 \| 1000` | No | `-` | - |
48
+ | `borderTopWidth` | `0 \| 100 \| 200 \| 300 \| 400 \| 500` | No | `-` | - |
49
+ | `borderWidth` | `0 \| 100 \| 200 \| 300 \| 400 \| 500` | No | `-` | - |
50
+ | `bordered` | `boolean` | No | `-` | Add a border around all sides of the box. |
51
+ | `borderedBottom` | `boolean` | No | `-` | Add a border to the bottom side of the box. |
52
+ | `borderedEnd` | `boolean` | No | `-` | Add a border to the trailing side of the box. |
53
+ | `borderedHorizontal` | `boolean` | No | `-` | Add a border to the leading and trailing sides of the box. |
54
+ | `borderedStart` | `boolean` | No | `-` | Add a border to the leading side of the box. |
55
+ | `borderedTop` | `boolean` | No | `-` | Add a border to the top side of the box. |
56
+ | `borderedVertical` | `boolean` | No | `-` | Add a border to the top and bottom sides of the box. |
57
+ | `bottom` | `string \| number` | No | `-` | - |
58
+ | `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 | `-` | - |
59
+ | `columnGap` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
60
+ | `dangerouslySetBackground` | `string` | No | `-` | - |
61
+ | `display` | `flex \| none` | No | `-` | - |
62
+ | `elevation` | `0 \| 1 \| 2` | No | `-` | Determines box shadow styles. Parent should have overflow set to visible to ensure styles are not clipped. |
63
+ | `flexBasis` | `string \| number` | No | `-` | - |
64
+ | `flexDirection` | `row \| column \| row-reverse \| column-reverse` | No | `-` | - |
65
+ | `flexGrow` | `number` | No | `-` | - |
66
+ | `flexShrink` | `number` | No | `-` | - |
67
+ | `flexWrap` | `wrap \| nowrap \| wrap-reverse` | No | `-` | - |
68
+ | `font` | `inherit \| FontFamily` | No | `-` | - |
69
+ | `fontFamily` | `inherit \| FontFamily` | No | `-` | - |
70
+ | `fontSize` | `inherit \| FontSize` | No | `-` | - |
71
+ | `fontWeight` | `inherit \| FontWeight` | No | `-` | - |
72
+ | `gap` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
73
+ | `height` | `string \| number` | No | `-` | - |
74
+ | `justifyContent` | `flex-start \| flex-end \| center \| space-between \| space-around \| space-evenly` | No | `-` | - |
75
+ | `key` | `Key \| null` | No | `-` | - |
76
+ | `left` | `string \| number` | No | `-` | - |
77
+ | `lineHeight` | `inherit \| LineHeight` | No | `-` | - |
78
+ | `margin` | `0 \| -1 \| -2 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1.5` | No | `-` | - |
79
+ | `marginBottom` | `0 \| -1 \| -2 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1.5` | No | `-` | - |
80
+ | `marginEnd` | `0 \| -1 \| -2 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1.5` | No | `-` | - |
81
+ | `marginStart` | `0 \| -1 \| -2 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1.5` | No | `-` | - |
82
+ | `marginTop` | `0 \| -1 \| -2 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1.5` | No | `-` | - |
83
+ | `marginX` | `0 \| -1 \| -2 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1.5` | No | `-` | - |
84
+ | `marginY` | `0 \| -1 \| -2 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1.5` | No | `-` | - |
85
+ | `maxHeight` | `string \| number` | No | `-` | - |
86
+ | `maxWidth` | `string \| number` | No | `-` | - |
87
+ | `minHeight` | `string \| number` | No | `-` | - |
88
+ | `minWidth` | `string \| number` | No | `-` | - |
89
+ | `onPointerCancel` | `((event: PointerEvent) => void)` | No | `-` | - |
90
+ | `onPointerCancelCapture` | `((event: PointerEvent) => void)` | No | `-` | - |
91
+ | `onPointerDown` | `((event: PointerEvent) => void)` | No | `-` | - |
92
+ | `onPointerDownCapture` | `((event: PointerEvent) => void)` | No | `-` | - |
93
+ | `onPointerEnter` | `((event: PointerEvent) => void)` | No | `-` | - |
94
+ | `onPointerEnterCapture` | `((event: PointerEvent) => void)` | No | `-` | - |
95
+ | `onPointerLeave` | `((event: PointerEvent) => void)` | No | `-` | - |
96
+ | `onPointerLeaveCapture` | `((event: PointerEvent) => void)` | No | `-` | - |
97
+ | `onPointerMove` | `((event: PointerEvent) => void)` | No | `-` | - |
98
+ | `onPointerMoveCapture` | `((event: PointerEvent) => void)` | No | `-` | - |
99
+ | `onPointerUp` | `((event: PointerEvent) => void)` | No | `-` | - |
100
+ | `onPointerUpCapture` | `((event: PointerEvent) => void)` | No | `-` | - |
101
+ | `opacity` | `number \| AnimatedNode` | No | `-` | - |
102
+ | `overflow` | `visible \| hidden \| scroll` | No | `-` | - |
103
+ | `padding` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
104
+ | `paddingBottom` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
105
+ | `paddingEnd` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
106
+ | `paddingStart` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
107
+ | `paddingTop` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
108
+ | `paddingX` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
109
+ | `paddingY` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
110
+ | `pin` | `top \| bottom \| left \| right \| all` | No | `-` | Direction in which to absolutely pin the box. |
111
+ | `position` | `absolute \| relative \| static \| fixed \| sticky` | No | `-` | - |
112
+ | `ref` | `((instance: View \| null) => void) \| RefObject<View> \| null` | No | `-` | - |
113
+ | `right` | `string \| number` | No | `-` | - |
114
+ | `rowGap` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
115
+ | `style` | `false \| RegisteredStyle<ViewStyle> \| Value \| AnimatedInterpolation<string \| number> \| WithAnimatedObject<ViewStyle> \| WithAnimatedArray<Falsy \| ViewStyle \| RegisteredStyle<ViewStyle> \| RecursiveArray<Falsy \| ViewStyle \| RegisteredStyle<ViewStyle>> \| readonly (Falsy \| ViewStyle \| RegisteredStyle<ViewStyle>)[]> \| null` | No | `-` | - |
116
+ | `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 Used to locate this element in unit and end-to-end tests. Used to locate this view in end-to-end tests. |
117
+ | `textAlign` | `left \| right \| auto \| center \| justify` | No | `-` | - |
118
+ | `textDecorationLine` | `none \| underline \| line-through \| underline line-through` | No | `-` | - |
119
+ | `textDecorationStyle` | `solid \| dotted \| dashed \| double` | No | `-` | - |
120
+ | `textTransform` | `none \| capitalize \| uppercase \| lowercase` | No | `-` | - |
121
+ | `top` | `string \| number` | No | `-` | - |
122
+ | `transform` | `string \| (({ scaleX: AnimatableNumericValue; } & { scaleY?: undefined; translateX?: undefined; translateY?: undefined; perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ scaleY: AnimatableNumericValue; } & { scaleX?: undefined; translateX?: undefined; translateY?: undefined; perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ translateX: AnimatableNumericValue \| ${number}%; } & { scaleX?: undefined; scaleY?: undefined; translateY?: undefined; perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ translateY: AnimatableNumericValue \| ${number}%; } & { scaleX?: undefined; scaleY?: undefined; translateX?: undefined; perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ perspective: AnimatableNumericValue; } & { scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ rotate: AnimatableStringValue; } & { scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; perspective?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ rotateX: AnimatableStringValue; } & { scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; perspective?: undefined; rotate?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ rotateY: AnimatableStringValue; } & { scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateZ?: undefined; scale?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ rotateZ: AnimatableStringValue; } & { scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; scale?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ scale: AnimatableNumericValue; } & { scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ skewX: AnimatableStringValue; } & { scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ skewY: AnimatableStringValue; } & { scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; skewX?: undefined; matrix?: undefined; }) \| ({ matrix: AnimatableNumericValue[]; } & { scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; skewX?: undefined; skewY?: undefined; }))[]` | No | `-` | - |
123
+ | `userSelect` | `none \| auto \| contain \| text \| all` | No | `-` | - |
124
+ | `width` | `string \| number` | No | `-` | - |
125
+ | `zIndex` | `number` | No | `-` | - |
126
+
127
+
@@ -0,0 +1,145 @@
1
+ # ContentCardHeader
2
+
3
+ ContentCardHeader is a subcomponent of ContentCard that provides the header section of the card, typically used for the title and subtitle.
4
+
5
+ ## Import
6
+
7
+ ```tsx
8
+ import { ContentCardHeader } from '@coinbase/cds-mobile/cards/ContentCard'
9
+ ```
10
+
11
+ ## Examples
12
+
13
+ ### Basic Example
14
+
15
+ ```jsx
16
+ function Example() {
17
+ return (
18
+ <VStack bordered borderRadius="400" maxWidth={375} padding={1}>
19
+ <ContentCardHeader
20
+ avatar="/img/card/content_card_custom_avatar_1.png"
21
+ meta={
22
+ <Box marginLeft={-1}>
23
+ <TextLabel2 as="span" color="fgMuted" numberOfLines={1}>
24
+ ・News・5 hrs
25
+ </TextLabel2>
26
+ </Box>
27
+ }
28
+ title="Description"
29
+ end={
30
+ <IconButton
31
+ transparent
32
+ accessibilityLabel="More information about coinDesk card news"
33
+ name="more"
34
+ variant="secondary"
35
+ />
36
+ }
37
+ />
38
+ </VStack>
39
+ );
40
+ }
41
+ ```
42
+
43
+ ## Props
44
+
45
+ | Prop | Type | Required | Default | Description |
46
+ | --- | --- | --- | --- | --- |
47
+ | `title` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | Yes | `-` | Name of the publisher |
48
+ | `alignContent` | `flex-start \| flex-end \| center \| stretch \| space-between \| space-around \| space-evenly` | No | `-` | - |
49
+ | `alignItems` | `flex-start \| flex-end \| center \| stretch \| baseline` | No | `-` | - |
50
+ | `alignSelf` | `auto \| FlexAlignType` | No | `-` | - |
51
+ | `animated` | `boolean` | No | `-` | - |
52
+ | `aspectRatio` | `string \| number` | No | `-` | - |
53
+ | `avatar` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | A media object like an image, avatar, illustration, or cryptocurrency asset. |
54
+ | `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 | `-` | - |
55
+ | `borderBottomLeftRadius` | `0 \| 100 \| 200 \| 300 \| 400 \| 500 \| 600 \| 700 \| 800 \| 900 \| 1000` | No | `-` | - |
56
+ | `borderBottomRightRadius` | `0 \| 100 \| 200 \| 300 \| 400 \| 500 \| 600 \| 700 \| 800 \| 900 \| 1000` | No | `-` | - |
57
+ | `borderBottomWidth` | `0 \| 100 \| 200 \| 300 \| 400 \| 500` | No | `-` | - |
58
+ | `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 | `-` | - |
59
+ | `borderEndWidth` | `0 \| 100 \| 200 \| 300 \| 400 \| 500` | No | `-` | - |
60
+ | `borderRadius` | `0 \| 100 \| 200 \| 300 \| 400 \| 500 \| 600 \| 700 \| 800 \| 900 \| 1000` | No | `-` | - |
61
+ | `borderStartWidth` | `0 \| 100 \| 200 \| 300 \| 400 \| 500` | No | `-` | - |
62
+ | `borderTopLeftRadius` | `0 \| 100 \| 200 \| 300 \| 400 \| 500 \| 600 \| 700 \| 800 \| 900 \| 1000` | No | `-` | - |
63
+ | `borderTopRightRadius` | `0 \| 100 \| 200 \| 300 \| 400 \| 500 \| 600 \| 700 \| 800 \| 900 \| 1000` | No | `-` | - |
64
+ | `borderTopWidth` | `0 \| 100 \| 200 \| 300 \| 400 \| 500` | No | `-` | - |
65
+ | `borderWidth` | `0 \| 100 \| 200 \| 300 \| 400 \| 500` | No | `-` | - |
66
+ | `bordered` | `boolean` | No | `-` | Add a border around all sides of the box. |
67
+ | `borderedBottom` | `boolean` | No | `-` | Add a border to the bottom side of the box. |
68
+ | `borderedEnd` | `boolean` | No | `-` | Add a border to the trailing side of the box. |
69
+ | `borderedHorizontal` | `boolean` | No | `-` | Add a border to the leading and trailing sides of the box. |
70
+ | `borderedStart` | `boolean` | No | `-` | Add a border to the leading side of the box. |
71
+ | `borderedTop` | `boolean` | No | `-` | Add a border to the top side of the box. |
72
+ | `borderedVertical` | `boolean` | No | `-` | Add a border to the top and bottom sides of the box. |
73
+ | `bottom` | `string \| number` | No | `-` | - |
74
+ | `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 | `-` | - |
75
+ | `columnGap` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
76
+ | `dangerouslySetBackground` | `string` | No | `-` | - |
77
+ | `display` | `flex \| none` | No | `-` | - |
78
+ | `elevation` | `0 \| 1 \| 2` | No | `-` | Determines box shadow styles. Parent should have overflow set to visible to ensure styles are not clipped. |
79
+ | `end` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | Typically an Icon Button or Tag |
80
+ | `flexBasis` | `string \| number` | No | `-` | - |
81
+ | `flexDirection` | `row \| column \| row-reverse \| column-reverse` | No | `-` | - |
82
+ | `flexGrow` | `number` | No | `-` | - |
83
+ | `flexShrink` | `number` | No | `-` | - |
84
+ | `flexWrap` | `wrap \| nowrap \| wrap-reverse` | No | `-` | - |
85
+ | `font` | `inherit \| FontFamily` | No | `-` | - |
86
+ | `fontFamily` | `inherit \| FontFamily` | No | `-` | - |
87
+ | `fontSize` | `inherit \| FontSize` | No | `-` | - |
88
+ | `fontWeight` | `inherit \| FontWeight` | No | `-` | - |
89
+ | `gap` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
90
+ | `height` | `string \| number` | No | `-` | - |
91
+ | `justifyContent` | `flex-start \| flex-end \| center \| space-between \| space-around \| space-evenly` | No | `-` | - |
92
+ | `key` | `Key \| null` | No | `-` | - |
93
+ | `left` | `string \| number` | No | `-` | - |
94
+ | `lineHeight` | `inherit \| LineHeight` | No | `-` | - |
95
+ | `margin` | `0 \| -1 \| -2 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1.5` | No | `-` | - |
96
+ | `marginBottom` | `0 \| -1 \| -2 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1.5` | No | `-` | - |
97
+ | `marginEnd` | `0 \| -1 \| -2 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1.5` | No | `-` | - |
98
+ | `marginStart` | `0 \| -1 \| -2 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1.5` | No | `-` | - |
99
+ | `marginTop` | `0 \| -1 \| -2 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1.5` | No | `-` | - |
100
+ | `marginX` | `0 \| -1 \| -2 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1.5` | No | `-` | - |
101
+ | `marginY` | `0 \| -1 \| -2 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1.5` | No | `-` | - |
102
+ | `maxHeight` | `string \| number` | No | `-` | - |
103
+ | `maxWidth` | `string \| number` | No | `-` | - |
104
+ | `meta` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | Includes data like content category type and time |
105
+ | `minHeight` | `string \| number` | No | `-` | - |
106
+ | `minWidth` | `string \| number` | No | `-` | - |
107
+ | `onPointerCancel` | `((event: PointerEvent) => void)` | No | `-` | - |
108
+ | `onPointerCancelCapture` | `((event: PointerEvent) => void)` | No | `-` | - |
109
+ | `onPointerDown` | `((event: PointerEvent) => void)` | No | `-` | - |
110
+ | `onPointerDownCapture` | `((event: PointerEvent) => void)` | No | `-` | - |
111
+ | `onPointerEnter` | `((event: PointerEvent) => void)` | No | `-` | - |
112
+ | `onPointerEnterCapture` | `((event: PointerEvent) => void)` | No | `-` | - |
113
+ | `onPointerLeave` | `((event: PointerEvent) => void)` | No | `-` | - |
114
+ | `onPointerLeaveCapture` | `((event: PointerEvent) => void)` | No | `-` | - |
115
+ | `onPointerMove` | `((event: PointerEvent) => void)` | No | `-` | - |
116
+ | `onPointerMoveCapture` | `((event: PointerEvent) => void)` | No | `-` | - |
117
+ | `onPointerUp` | `((event: PointerEvent) => void)` | No | `-` | - |
118
+ | `onPointerUpCapture` | `((event: PointerEvent) => void)` | No | `-` | - |
119
+ | `opacity` | `number \| AnimatedNode` | No | `-` | - |
120
+ | `overflow` | `visible \| hidden \| scroll` | No | `-` | - |
121
+ | `padding` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
122
+ | `paddingBottom` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
123
+ | `paddingEnd` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
124
+ | `paddingStart` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
125
+ | `paddingTop` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
126
+ | `paddingX` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
127
+ | `paddingY` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
128
+ | `pin` | `top \| bottom \| left \| right \| all` | No | `-` | Direction in which to absolutely pin the box. |
129
+ | `position` | `absolute \| relative \| static \| fixed \| sticky` | No | `-` | - |
130
+ | `ref` | `((instance: View \| null) => void) \| RefObject<View> \| null` | No | `-` | - |
131
+ | `right` | `string \| number` | No | `-` | - |
132
+ | `rowGap` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
133
+ | `style` | `false \| RegisteredStyle<ViewStyle> \| Value \| AnimatedInterpolation<string \| number> \| WithAnimatedObject<ViewStyle> \| WithAnimatedArray<Falsy \| ViewStyle \| RegisteredStyle<ViewStyle> \| RecursiveArray<Falsy \| ViewStyle \| RegisteredStyle<ViewStyle>> \| readonly (Falsy \| ViewStyle \| RegisteredStyle<ViewStyle>)[]> \| null` | No | `-` | - |
134
+ | `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 Used to locate this element in unit and end-to-end tests. Used to locate this view in end-to-end tests. |
135
+ | `textAlign` | `left \| right \| auto \| center \| justify` | No | `-` | - |
136
+ | `textDecorationLine` | `none \| underline \| line-through \| underline line-through` | No | `-` | - |
137
+ | `textDecorationStyle` | `solid \| dotted \| dashed \| double` | No | `-` | - |
138
+ | `textTransform` | `none \| capitalize \| uppercase \| lowercase` | No | `-` | - |
139
+ | `top` | `string \| number` | No | `-` | - |
140
+ | `transform` | `string \| (({ scaleX: AnimatableNumericValue; } & { scaleY?: undefined; translateX?: undefined; translateY?: undefined; perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ scaleY: AnimatableNumericValue; } & { scaleX?: undefined; translateX?: undefined; translateY?: undefined; perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ translateX: AnimatableNumericValue \| ${number}%; } & { scaleX?: undefined; scaleY?: undefined; translateY?: undefined; perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ translateY: AnimatableNumericValue \| ${number}%; } & { scaleX?: undefined; scaleY?: undefined; translateX?: undefined; perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ perspective: AnimatableNumericValue; } & { scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ rotate: AnimatableStringValue; } & { scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; perspective?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ rotateX: AnimatableStringValue; } & { scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; perspective?: undefined; rotate?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ rotateY: AnimatableStringValue; } & { scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateZ?: undefined; scale?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ rotateZ: AnimatableStringValue; } & { scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; scale?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ scale: AnimatableNumericValue; } & { scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ skewX: AnimatableStringValue; } & { scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ skewY: AnimatableStringValue; } & { scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; skewX?: undefined; matrix?: undefined; }) \| ({ matrix: AnimatableNumericValue[]; } & { scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; skewX?: undefined; skewY?: undefined; }))[]` | No | `-` | - |
141
+ | `userSelect` | `none \| auto \| contain \| text \| all` | No | `-` | - |
142
+ | `width` | `string \| number` | No | `-` | - |
143
+ | `zIndex` | `number` | No | `-` | - |
144
+
145
+