@coinbase/cds-mcp-server 8.17.2 → 8.17.3

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 (269) hide show
  1. package/CHANGELOG.md +4 -0
  2. package/mcp-docs/mobile/components/Accordion.txt +189 -0
  3. package/mcp-docs/mobile/components/AccordionItem.txt +30 -0
  4. package/mcp-docs/mobile/components/Alert.txt +156 -0
  5. package/mcp-docs/mobile/components/AreaChart.txt +266 -0
  6. package/mcp-docs/mobile/components/Avatar.txt +196 -0
  7. package/mcp-docs/mobile/components/AvatarButton.txt +226 -0
  8. package/mcp-docs/mobile/components/Banner.txt +222 -0
  9. package/mcp-docs/mobile/components/BarChart.txt +816 -0
  10. package/mcp-docs/mobile/components/Box.txt +174 -0
  11. package/mcp-docs/mobile/components/BrowserBar.txt +147 -0
  12. package/mcp-docs/mobile/components/Button.txt +199 -0
  13. package/mcp-docs/mobile/components/ButtonGroup.txt +80 -0
  14. package/mcp-docs/mobile/components/Carousel.txt +1084 -0
  15. package/mcp-docs/mobile/components/CartesianChart.txt +826 -0
  16. package/mcp-docs/mobile/components/CellMedia.txt +71 -0
  17. package/mcp-docs/mobile/components/Checkbox.txt +246 -0
  18. package/mcp-docs/mobile/components/CheckboxCell.txt +202 -0
  19. package/mcp-docs/mobile/components/CheckboxGroup.txt +285 -0
  20. package/mcp-docs/mobile/components/Chip.txt +195 -0
  21. package/mcp-docs/mobile/components/Coachmark.txt +158 -0
  22. package/mcp-docs/mobile/components/Collapsible.txt +105 -0
  23. package/mcp-docs/mobile/components/ContainedAssetCard.txt +135 -0
  24. package/mcp-docs/mobile/components/ContentCard.txt +366 -0
  25. package/mcp-docs/mobile/components/ContentCardBody.txt +136 -0
  26. package/mcp-docs/mobile/components/ContentCardFooter.txt +128 -0
  27. package/mcp-docs/mobile/components/ContentCardHeader.txt +146 -0
  28. package/mcp-docs/mobile/components/ContentCell.txt +227 -0
  29. package/mcp-docs/mobile/components/ControlGroup.txt +444 -0
  30. package/mcp-docs/mobile/components/DatePicker.txt +497 -0
  31. package/mcp-docs/mobile/components/Divider.txt +139 -0
  32. package/mcp-docs/mobile/components/DotCount.txt +146 -0
  33. package/mcp-docs/mobile/components/DotStatusColor.txt +59 -0
  34. package/mcp-docs/mobile/components/DotSymbol.txt +135 -0
  35. package/mcp-docs/mobile/components/Fallback.txt +158 -0
  36. package/mcp-docs/mobile/components/FloatingAssetCard.txt +156 -0
  37. package/mcp-docs/mobile/components/HStack.txt +235 -0
  38. package/mcp-docs/mobile/components/HeroSquare.txt +48 -0
  39. package/mcp-docs/mobile/components/Icon.txt +52 -0
  40. package/mcp-docs/mobile/components/IconButton.txt +269 -0
  41. package/mcp-docs/mobile/components/InputChip.txt +188 -0
  42. package/mcp-docs/mobile/components/Interactable.txt +187 -0
  43. package/mcp-docs/mobile/components/LineChart.txt +1325 -0
  44. package/mcp-docs/mobile/components/Link.txt +292 -0
  45. package/mcp-docs/mobile/components/ListCell.txt +391 -0
  46. package/mcp-docs/mobile/components/LogoMark.txt +85 -0
  47. package/mcp-docs/mobile/components/LogoWordMark.txt +94 -0
  48. package/mcp-docs/mobile/components/Lottie.txt +139 -0
  49. package/mcp-docs/mobile/components/LottieStatusAnimation.txt +47 -0
  50. package/mcp-docs/mobile/components/Modal.txt +84 -0
  51. package/mcp-docs/mobile/components/ModalBody.txt +34 -0
  52. package/mcp-docs/mobile/components/ModalFooter.txt +25 -0
  53. package/mcp-docs/mobile/components/ModalHeader.txt +28 -0
  54. package/mcp-docs/mobile/components/MultiContentModule.txt +380 -0
  55. package/mcp-docs/mobile/components/NavigationTitle.txt +132 -0
  56. package/mcp-docs/mobile/components/NavigationTitleSelect.txt +142 -0
  57. package/mcp-docs/mobile/components/NudgeCard.txt +90 -0
  58. package/mcp-docs/mobile/components/Numpad.txt +341 -0
  59. package/mcp-docs/mobile/components/Overlay.txt +152 -0
  60. package/mcp-docs/mobile/components/PageFooter.txt +161 -0
  61. package/mcp-docs/mobile/components/PageHeader.txt +186 -0
  62. package/mcp-docs/mobile/components/PeriodSelector.txt +408 -0
  63. package/mcp-docs/mobile/components/Pictogram.txt +48 -0
  64. package/mcp-docs/mobile/components/Point.txt +205 -0
  65. package/mcp-docs/mobile/components/PortalProvider.txt +79 -0
  66. package/mcp-docs/mobile/components/Pressable.txt +211 -0
  67. package/mcp-docs/mobile/components/ProgressBar.txt +130 -0
  68. package/mcp-docs/mobile/components/ProgressBarWithFixedLabels.txt +161 -0
  69. package/mcp-docs/mobile/components/ProgressBarWithFloatLabel.txt +138 -0
  70. package/mcp-docs/mobile/components/ProgressCircle.txt +237 -0
  71. package/mcp-docs/mobile/components/Radio.txt +242 -0
  72. package/mcp-docs/mobile/components/RadioCell.txt +202 -0
  73. package/mcp-docs/mobile/components/RadioGroup.txt +282 -0
  74. package/mcp-docs/mobile/components/ReferenceLine.txt +153 -0
  75. package/mcp-docs/mobile/components/RemoteImage.txt +106 -0
  76. package/mcp-docs/mobile/components/RemoteImageGroup.txt +61 -0
  77. package/mcp-docs/mobile/components/RollingNumber.txt +789 -0
  78. package/mcp-docs/mobile/components/Scrubber.txt +204 -0
  79. package/mcp-docs/mobile/components/SearchInput.txt +192 -0
  80. package/mcp-docs/mobile/components/SectionHeader.txt +205 -0
  81. package/mcp-docs/mobile/components/SegmentedTabs.txt +316 -0
  82. package/mcp-docs/mobile/components/Select.txt +212 -0
  83. package/mcp-docs/mobile/components/SelectChip.txt +324 -0
  84. package/mcp-docs/mobile/components/SelectOption.txt +85 -0
  85. package/mcp-docs/mobile/components/SlideButton.txt +331 -0
  86. package/mcp-docs/mobile/components/Spacer.txt +84 -0
  87. package/mcp-docs/mobile/components/Sparkline.txt +123 -0
  88. package/mcp-docs/mobile/components/SparklineGradient.txt +107 -0
  89. package/mcp-docs/mobile/components/SparklineInteractive.txt +157 -0
  90. package/mcp-docs/mobile/components/SparklineInteractiveHeader.txt +73 -0
  91. package/mcp-docs/mobile/components/Spinner.txt +49 -0
  92. package/mcp-docs/mobile/components/SpotIcon.txt +48 -0
  93. package/mcp-docs/mobile/components/SpotRectangle.txt +48 -0
  94. package/mcp-docs/mobile/components/SpotSquare.txt +48 -0
  95. package/mcp-docs/mobile/components/Stepper.txt +528 -0
  96. package/mcp-docs/mobile/components/SubBrandLogoMark.txt +126 -0
  97. package/mcp-docs/mobile/components/SubBrandLogoWordMark.txt +126 -0
  98. package/mcp-docs/mobile/components/Switch.txt +98 -0
  99. package/mcp-docs/mobile/components/TabIndicator.txt +49 -0
  100. package/mcp-docs/mobile/components/TabLabel.txt +154 -0
  101. package/mcp-docs/mobile/components/TabNavigation.txt +147 -0
  102. package/mcp-docs/mobile/components/TabbedChips.txt +143 -0
  103. package/mcp-docs/mobile/components/Tabs.txt +191 -0
  104. package/mcp-docs/mobile/components/Tag.txt +301 -0
  105. package/mcp-docs/mobile/components/Text.txt +212 -0
  106. package/mcp-docs/mobile/components/TextInput.txt +718 -0
  107. package/mcp-docs/mobile/components/ThemeProvider.txt +133 -0
  108. package/mcp-docs/mobile/components/Toast.txt +197 -0
  109. package/mcp-docs/mobile/components/Tooltip.txt +60 -0
  110. package/mcp-docs/mobile/components/TopNavBar.txt +162 -0
  111. package/mcp-docs/mobile/components/Tour.txt +159 -0
  112. package/mcp-docs/mobile/components/Tray.txt +253 -0
  113. package/mcp-docs/mobile/components/UpsellCard.txt +322 -0
  114. package/mcp-docs/mobile/components/VStack.txt +223 -0
  115. package/mcp-docs/mobile/components/XAxis.txt +622 -0
  116. package/mcp-docs/mobile/components/YAxis.txt +568 -0
  117. package/mcp-docs/mobile/getting-started/introduction.txt +99 -0
  118. package/mcp-docs/mobile/getting-started/mcp-server.txt +94 -0
  119. package/mcp-docs/mobile/getting-started/playground.txt +25 -0
  120. package/mcp-docs/mobile/hooks/useDimensions.txt +47 -0
  121. package/mcp-docs/mobile/hooks/useOverlayContentContext.txt +215 -0
  122. package/mcp-docs/mobile/hooks/useTheme.txt +110 -0
  123. package/mcp-docs/mobile/routes.txt +132 -0
  124. package/mcp-docs/web/components/Accordion.txt +190 -0
  125. package/mcp-docs/web/components/AccordionItem.txt +32 -0
  126. package/mcp-docs/web/components/Alert.txt +165 -0
  127. package/mcp-docs/web/components/AreaChart.txt +511 -0
  128. package/mcp-docs/web/components/Avatar.txt +212 -0
  129. package/mcp-docs/web/components/AvatarButton.txt +241 -0
  130. package/mcp-docs/web/components/Banner.txt +227 -0
  131. package/mcp-docs/web/components/BarChart.txt +1268 -0
  132. package/mcp-docs/web/components/Box.txt +176 -0
  133. package/mcp-docs/web/components/Button.txt +213 -0
  134. package/mcp-docs/web/components/ButtonGroup.txt +80 -0
  135. package/mcp-docs/web/components/Calendar.txt +182 -0
  136. package/mcp-docs/web/components/Carousel.txt +1576 -0
  137. package/mcp-docs/web/components/CartesianChart.txt +1045 -0
  138. package/mcp-docs/web/components/CellMedia.txt +57 -0
  139. package/mcp-docs/web/components/Checkbox.txt +189 -0
  140. package/mcp-docs/web/components/CheckboxCell.txt +203 -0
  141. package/mcp-docs/web/components/CheckboxGroup.txt +220 -0
  142. package/mcp-docs/web/components/Chip.txt +197 -0
  143. package/mcp-docs/web/components/Coachmark.txt +189 -0
  144. package/mcp-docs/web/components/Collapsible.txt +120 -0
  145. package/mcp-docs/web/components/ContainedAssetCard.txt +233 -0
  146. package/mcp-docs/web/components/ContentCard.txt +368 -0
  147. package/mcp-docs/web/components/ContentCardBody.txt +138 -0
  148. package/mcp-docs/web/components/ContentCardFooter.txt +130 -0
  149. package/mcp-docs/web/components/ContentCardHeader.txt +148 -0
  150. package/mcp-docs/web/components/ContentCell.txt +220 -0
  151. package/mcp-docs/web/components/ControlGroup.txt +437 -0
  152. package/mcp-docs/web/components/DatePicker.txt +506 -0
  153. package/mcp-docs/web/components/Divider.txt +144 -0
  154. package/mcp-docs/web/components/DotCount.txt +150 -0
  155. package/mcp-docs/web/components/DotStatusColor.txt +59 -0
  156. package/mcp-docs/web/components/DotSymbol.txt +138 -0
  157. package/mcp-docs/web/components/Dropdown.txt +120 -0
  158. package/mcp-docs/web/components/Fallback.txt +164 -0
  159. package/mcp-docs/web/components/FloatingAssetCard.txt +251 -0
  160. package/mcp-docs/web/components/FullscreenAlert.txt +70 -0
  161. package/mcp-docs/web/components/FullscreenModal.txt +146 -0
  162. package/mcp-docs/web/components/FullscreenModalLayout.txt +188 -0
  163. package/mcp-docs/web/components/Grid.txt +237 -0
  164. package/mcp-docs/web/components/GridColumn.txt +210 -0
  165. package/mcp-docs/web/components/HStack.txt +237 -0
  166. package/mcp-docs/web/components/HeroSquare.txt +49 -0
  167. package/mcp-docs/web/components/Icon.txt +146 -0
  168. package/mcp-docs/web/components/IconButton.txt +391 -0
  169. package/mcp-docs/web/components/InputChip.txt +188 -0
  170. package/mcp-docs/web/components/Interactable.txt +194 -0
  171. package/mcp-docs/web/components/LineChart.txt +1577 -0
  172. package/mcp-docs/web/components/Link.txt +244 -0
  173. package/mcp-docs/web/components/ListCell.txt +397 -0
  174. package/mcp-docs/web/components/LogoMark.txt +85 -0
  175. package/mcp-docs/web/components/LogoWordMark.txt +94 -0
  176. package/mcp-docs/web/components/Lottie.txt +158 -0
  177. package/mcp-docs/web/components/LottieStatusAnimation.txt +58 -0
  178. package/mcp-docs/web/components/MediaQueryProvider.txt +109 -0
  179. package/mcp-docs/web/components/Modal.txt +193 -0
  180. package/mcp-docs/web/components/ModalBody.txt +118 -0
  181. package/mcp-docs/web/components/ModalFooter.txt +120 -0
  182. package/mcp-docs/web/components/ModalHeader.txt +124 -0
  183. package/mcp-docs/web/components/MultiContentModule.txt +382 -0
  184. package/mcp-docs/web/components/NavigationBar.txt +103 -0
  185. package/mcp-docs/web/components/NavigationTitle.txt +26 -0
  186. package/mcp-docs/web/components/NavigationTitleSelect.txt +46 -0
  187. package/mcp-docs/web/components/NudgeCard.txt +182 -0
  188. package/mcp-docs/web/components/Overlay.txt +172 -0
  189. package/mcp-docs/web/components/PageFooter.txt +185 -0
  190. package/mcp-docs/web/components/PageHeader.txt +244 -0
  191. package/mcp-docs/web/components/Pagination.txt +500 -0
  192. package/mcp-docs/web/components/PeriodSelector.txt +704 -0
  193. package/mcp-docs/web/components/Pictogram.txt +49 -0
  194. package/mcp-docs/web/components/Point.txt +461 -0
  195. package/mcp-docs/web/components/PortalProvider.txt +77 -0
  196. package/mcp-docs/web/components/Pressable.txt +194 -0
  197. package/mcp-docs/web/components/ProgressBar.txt +164 -0
  198. package/mcp-docs/web/components/ProgressBarWithFixedLabels.txt +213 -0
  199. package/mcp-docs/web/components/ProgressBarWithFloatLabel.txt +182 -0
  200. package/mcp-docs/web/components/ProgressCircle.txt +444 -0
  201. package/mcp-docs/web/components/Radio.txt +220 -0
  202. package/mcp-docs/web/components/RadioCell.txt +216 -0
  203. package/mcp-docs/web/components/RadioGroup.txt +289 -0
  204. package/mcp-docs/web/components/ReferenceLine.txt +452 -0
  205. package/mcp-docs/web/components/RemoteImage.txt +166 -0
  206. package/mcp-docs/web/components/RemoteImageGroup.txt +87 -0
  207. package/mcp-docs/web/components/RollingNumber.txt +1022 -0
  208. package/mcp-docs/web/components/Scrubber.txt +232 -0
  209. package/mcp-docs/web/components/SearchInput.txt +118 -0
  210. package/mcp-docs/web/components/SectionHeader.txt +218 -0
  211. package/mcp-docs/web/components/SegmentedTabs.txt +325 -0
  212. package/mcp-docs/web/components/Select.txt +225 -0
  213. package/mcp-docs/web/components/SelectChip.txt +315 -0
  214. package/mcp-docs/web/components/SelectOption.txt +166 -0
  215. package/mcp-docs/web/components/Sidebar.txt +350 -0
  216. package/mcp-docs/web/components/SidebarItem.txt +132 -0
  217. package/mcp-docs/web/components/SidebarMoreMenu.txt +31 -0
  218. package/mcp-docs/web/components/Spacer.txt +174 -0
  219. package/mcp-docs/web/components/Sparkline.txt +123 -0
  220. package/mcp-docs/web/components/SparklineGradient.txt +107 -0
  221. package/mcp-docs/web/components/SparklineInteractive.txt +154 -0
  222. package/mcp-docs/web/components/SparklineInteractiveHeader.txt +77 -0
  223. package/mcp-docs/web/components/Spinner.txt +129 -0
  224. package/mcp-docs/web/components/SpotIcon.txt +49 -0
  225. package/mcp-docs/web/components/SpotRectangle.txt +49 -0
  226. package/mcp-docs/web/components/SpotSquare.txt +49 -0
  227. package/mcp-docs/web/components/Stepper.txt +683 -0
  228. package/mcp-docs/web/components/SubBrandLogoMark.txt +126 -0
  229. package/mcp-docs/web/components/SubBrandLogoWordMark.txt +126 -0
  230. package/mcp-docs/web/components/Switch.txt +86 -0
  231. package/mcp-docs/web/components/TabIndicator.txt +49 -0
  232. package/mcp-docs/web/components/TabLabel.txt +159 -0
  233. package/mcp-docs/web/components/TabNavigation.txt +160 -0
  234. package/mcp-docs/web/components/TabbedChips.txt +156 -0
  235. package/mcp-docs/web/components/Table.txt +368 -0
  236. package/mcp-docs/web/components/TableBody.txt +84 -0
  237. package/mcp-docs/web/components/TableCaption.txt +103 -0
  238. package/mcp-docs/web/components/TableCell.txt +166 -0
  239. package/mcp-docs/web/components/TableCellFallback.txt +98 -0
  240. package/mcp-docs/web/components/TableFooter.txt +84 -0
  241. package/mcp-docs/web/components/TableHeader.txt +101 -0
  242. package/mcp-docs/web/components/TableRow.txt +141 -0
  243. package/mcp-docs/web/components/Tabs.txt +213 -0
  244. package/mcp-docs/web/components/Tag.txt +305 -0
  245. package/mcp-docs/web/components/Text.txt +233 -0
  246. package/mcp-docs/web/components/TextInput.txt +653 -0
  247. package/mcp-docs/web/components/ThemeProvider.txt +200 -0
  248. package/mcp-docs/web/components/TileButton.txt +159 -0
  249. package/mcp-docs/web/components/Toast.txt +204 -0
  250. package/mcp-docs/web/components/Tooltip.txt +90 -0
  251. package/mcp-docs/web/components/Tour.txt +180 -0
  252. package/mcp-docs/web/components/Tray.txt +289 -0
  253. package/mcp-docs/web/components/UpsellCard.txt +320 -0
  254. package/mcp-docs/web/components/VStack.txt +225 -0
  255. package/mcp-docs/web/components/XAxis.txt +620 -0
  256. package/mcp-docs/web/components/YAxis.txt +549 -0
  257. package/mcp-docs/web/getting-started/introduction.txt +99 -0
  258. package/mcp-docs/web/getting-started/mcp-server.txt +94 -0
  259. package/mcp-docs/web/getting-started/playground.txt +25 -0
  260. package/mcp-docs/web/hooks/useBreakpoints.txt +33 -0
  261. package/mcp-docs/web/hooks/useDimensions.txt +55 -0
  262. package/mcp-docs/web/hooks/useHasMounted.txt +55 -0
  263. package/mcp-docs/web/hooks/useIsoEffect.txt +42 -0
  264. package/mcp-docs/web/hooks/useMediaQuery.txt +94 -0
  265. package/mcp-docs/web/hooks/useOverlayContentContext.txt +217 -0
  266. package/mcp-docs/web/hooks/useScrollBlocker.txt +63 -0
  267. package/mcp-docs/web/hooks/useTheme.txt +105 -0
  268. package/mcp-docs/web/routes.txt +155 -0
  269. package/package.json +1 -1
@@ -0,0 +1,49 @@
1
+ # Pictogram
2
+
3
+ Displays elevated product icons.
4
+
5
+ ## Import
6
+
7
+ ```jsx
8
+ import { Pictogram } from '@coinbase/cds-web/illustratations/Pictogram'
9
+ ```
10
+
11
+ ## Props
12
+
13
+ | Prop | Type | Required | Default | Description |
14
+ | --- | --- | --- | --- | --- |
15
+ | `name` | `key \| done \| cardSuccess \| warning \| error \| add \| browser \| calculator \| calendar \| checkmark \| clock \| coinbaseOneLogo \| derivativesProduct \| email \| gasFees \| identityCard \| instantUnstakingClock \| laptop \| learningRewardsProduct \| lock \| passport \| paypal \| phone \| planet \| safe \| securityKey \| settings \| shield \| support \| taxes \| trading \| verifiedPools \| wallet \| 2fa \| accountsNavigation \| accreditedInvestor \| addCard \| addPayment \| addPhone \| addressBook \| addToWatchlist \| addWallet \| advancedTradingDesktop \| advancedTradingNavigation \| advancedTradingRebates \| agent \| alerts \| alertsCoinbaseOne \| analyticsNavigation \| apartOfDropsNft \| applyForHigherLimits \| apyInterest \| assetEncryption \| assetHubNavigation \| assetManagement \| assetManagementNavigation \| assetMeasurements \| assetMovement \| authenticationApp \| authenticator \| authenticatorAlt \| authenticatorProgress \| avatarAa \| avatarAb \| avatarAc \| avatarAd \| avatarAe \| avatarAf \| avatarAg \| avatarAh \| avatarAi \| avatarAj \| avatarBa \| avatarBb \| avatarBc \| avatarBd \| avatarBe \| avatarBf \| avatarBg \| avatarBh \| avatarBi \| avatarBj \| avatarCa \| avatarCb \| avatarCc \| avatarCd \| avatarCe \| avatarCf \| avatarCg \| avatarCh \| avatarCi \| avatarCj \| avatarDa \| avatarDb \| avatarDc \| avatarDd \| avatarDe \| avatarDf \| avatarDg \| avatarDh \| avatarDi \| avatarDj \| avatarEa \| avatarEb \| avatarEc \| avatarEd \| avatarEe \| avatarEf \| avatarEg \| avatarEh \| avatarEi \| avatarEj \| avatarFa \| avatarFb \| avatarFc \| avatarFd \| avatarFe \| avatarFf \| avatarFg \| avatarFh \| avatarFi \| avatarFj \| avatarGa \| avatarGb \| avatarGc \| avatarGd \| avatarGe \| avatarGf \| avatarGg \| avatarGh \| avatarGi \| avatarGj \| avatarHa \| avatarHb \| avatarHc \| avatarHd \| avatarHe \| avatarHf \| avatarHg \| avatarHh \| avatarHi \| avatarHj \| avatarIa \| avatarIb \| avatarIc \| avatarId \| avatarIe \| avatarIf \| avatarIg \| avatarIh \| avatarIi \| avatarIj \| avatarJa \| avatarJb \| avatarJc \| avatarJd \| avatarJe \| avatarJf \| avatarJg \| avatarJh \| avatarJi \| avatarJj \| barChart \| baseChartSmall \| baseCheckSmall \| baseCoinCryptoSmall \| baseCoinNetworkSmall \| baseCoinStack \| baseConnectApps \| baseConnectSmall \| baseDecentralizationSmall \| baseDiamondSmall \| baseDiamondTrophy \| baseEmptySmall \| baseErrorButterflySmall \| baseErrorSmall \| baseLoadingSmall \| baseLocationSmall \| baseLogo \| baseLogoNavigation \| baseMessaging \| baseMintNftSmall \| baseNetworkSmall \| baseNftSmall \| basePaycoinSmall \| basePeopleSmall \| basePiechartSmall \| baseSecuritySmall \| baseSendSmall \| baseSignin \| baseTargetSmall \| bitcoin \| bitcoinPizza \| bitcoinRewards \| bitcoinWhitePaper \| blockchainConnection \| bonusFivePercent \| bonusTwoPercent \| borrowCoins \| borrowingLending \| borrowNavigation \| browserMultiPlatform \| browserTransaction \| bundle \| businessProduct \| calendarCaution \| candleSticksGraph \| cardBlocked \| cardDeclined \| cardNavigation \| cb1BankTransfers \| chart \| chat \| cloudNavigation \| coinbaseLogoAdvancedBrand \| coinbaseLogoNavigation \| coinbaseOneAuthenticator \| coinbaseOneChat \| coinbaseOneEarn \| coinbaseOneEarnCoins \| coinbaseOneEarnCoinsLogo \| coinbaseOneFiat \| coinbaseOneProductIcon \| coinbaseOneProductInvestWeekly \| coinbaseOneRefreshed \| coinbaseOneShield \| coinbaseOneTrade \| coinbaseOneTrusted \| coinbaseOneUnlimitedRewards \| coinbaseUnlockOffers \| coinbaseWalletApp \| coinFocus \| coinShare \| coldStorageCheck \| collectionOfAssets \| commerceCheckout \| commerceInvoice \| commerceNavigation \| completeQuiz \| complianceNavigation \| congratulations \| connectNavigation \| contactInfo \| controlWalletStorage \| creative \| creditCard \| crypto101 \| cryptoCard \| cryptoFolder \| custodialJourney \| custodyNavigation \| dataMarketplaceNavigation \| decentralizationEverything \| decentralizedExchange \| decentralizedIdentity \| decentralizedWeb3 \| defiEarnMoment \| delegate \| delegateNavigation \| derivativesNavigation \| developerPlatformNavigation \| developerSDKNavigation \| directDepositNavigation \| dollarShowcase \| driversLicense \| driversLicenseWheel \| earnCoins \| earnGraph \| earnNavigation \| easyToUse \| economyGlobal \| emailAndMessages \| enableVoting \| envelope \| ethereumFocus \| ethRewards \| ethStaking \| ethStakingChart \| ethStakingRewards \| ethToken \| exchangeNavigation \| explore \| fast \| faucetNavigation \| feesRestriction \| fiat \| finance \| findYourSelection \| formDownload \| futures \| futuresCoinbaseOne \| gem \| genericCountryIDCard \| getStarted \| giftbox \| globalConnections \| globalPayments \| globalTransactions \| googleAuthenticator \| governance \| hardwareWallet \| helpCenterNavigation \| higherLimits \| holdingCoin \| idBlock \| idError \| idVerification \| increaseLimits \| institutionalNavigation \| institutions \| internationalExchangeNavigation \| internet \| investGraph \| laptopCharts \| laptopVideo \| layerNetworks \| leadGraph \| learn \| learningRewardsNavigation \| lightbulbLearn \| lightningNetworkSend \| linkYourAccount \| listingFees \| locationUsa \| lowFees \| manageWeb3SignersAcct \| miningCoins \| mintedNft \| mobileCharts \| mobileError \| mobileNotifcation \| mobileSuccess \| mobileWarning \| moneyEarn \| moneySwift \| monitoringPerformance \| moreThanBitcoin \| multiAccountsAndCards \| multiPlatform \| multipleAssets \| musicAndSounds \| myNumberCard \| newUserChecklistBuyCrypto \| newUserChecklistCompleteAccount \| newUserChecklistVerifyId \| nftAvatar \| nftLibrary \| nftNavigation \| noAnnualFee \| noNftFound \| notificationHubAnalysis \| notificationHubNews \| notificationHubPortfolio \| notificationHubSocial \| notifications \| noVisibility \| noWiFi \| orders \| outage \| partialCoins \| participateNavigation \| passwordWalletLocked \| payNavigation \| peerToPeer \| pieChart \| pizza \| pluginBrowser \| positiveReviews \| predictionMarkets \| premiumInvestor \| priceTracking \| primeMobileApp \| primeNavigation \| privateClientNavigation \| proNavigation \| protectionPlan \| queryTransactNavigation \| receipt \| recurringPurchases \| restaking \| reviewAndAdd \| rewardsNavigation \| riskStaking \| rosettaNavigation \| securedAssets \| security \| securityCoinShield \| seedPhrase \| selectAddNft \| selfCustodyWallet \| selfServe \| sellSendAnytime \| sendPaymentToOthers \| settled \| sideChainSide \| signInNavigation \| smsAuthenticate \| sparkleCoinbaseOne \| ssnCard \| stableCoinMetaphor \| stacking \| stakingGraph \| standWithCryptoLogoNavigation \| startToday \| strongInfo \| strongWarning \| successPhone \| supportChat \| takeQuiz \| target \| taxBeta \| taxCenterNavigation \| taxesArrangement \| taxSeason \| timingCheck \| tokenBaskets \| tokenSales \| transferSend \| transistor \| trendingAssets \| trusted \| tryAgainLater \| twoBonus \| typeScript \| ubiKey \| usaProduct \| usdcEarn \| usdcInterest \| usdcLoan \| usdcLogo \| usdcRewards \| usdcRewardsRibbon \| usdcToken \| venturesNavigation \| videoCalendar \| videoContent \| waiting \| waitingForConsensus \| walletAsServiceNavigation \| walletDeposit \| walletError \| walletExchange \| walletLinkNavigation \| walletLogoNavigation \| walletNavigation \| walletPassword \| walletSuccess \| walletWarning \| winBTC \| worldwide \| wrapEth` | Yes | `-` | Name of illustration as defined in Figma |
16
+ | `alt` | `string` | No | `"" will identify the image as decorative` | Alt tag to apply to the img |
17
+ | `dimension` | `48x48 \| 64x64` | No | `-` | HeroSquare Default: 240x240 SpotSquare Default: 96x96 Pictogram Default: 48x48 SpotRectangle Default: 240x120 |
18
+ | `fallback` | `ReactElement<any, string \| JSXElementConstructor<any>> \| null` | No | `null` | Fallback element to render if unable to find an illustration with the matching name |
19
+ | `scaleMultiplier` | `number` | No | `-` | Multiply the width & height while maintaining aspect ratio |
20
+ | `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 |
21
+
22
+
23
+ ## Examples
24
+
25
+ ### Basic example
26
+
27
+ ```jsx live
28
+ <Pictogram name="shield" dimension="64x64" />
29
+ ```
30
+
31
+ ### `scaleMultiplier` prop
32
+
33
+ If no predefined dimensions fit your use case, you can use the `scaleMultiplier` prop to scale the illustration.
34
+
35
+ Use `scaleMultiplier` sparingly and with caution. We have predefined dimensions to ensure that illustrations scale elegantly.
36
+
37
+ ```jsx live
38
+ <Pictogram name="shield" scaleMultiplier={1.5} />
39
+ ```
40
+
41
+ ### Scaling with dimension
42
+
43
+ If `dimension` and `scaleMultiplier` are both provided the component will scale based on the provided dimension.
44
+
45
+ ```jsx live
46
+ <Pictogram name="shield" dimension="48x48" scaleMultiplier={2.5} />
47
+ ```
48
+
49
+
@@ -0,0 +1,461 @@
1
+ # Point
2
+
3
+ Visual markers that highlight specific data values on a chart. Points can be customized with different colors, sizes, and interactivity.
4
+
5
+ ## Import
6
+
7
+ ```jsx
8
+ import { Point } from '@coinbase/cds-web-visualization'
9
+ ```
10
+
11
+ ## Props
12
+
13
+ | Prop | Type | Required | Default | Description |
14
+ | --- | --- | --- | --- | --- |
15
+ | `dataX` | `number` | Yes | `-` | X coordinate in data space (not pixel coordinates). |
16
+ | `dataY` | `number` | Yes | `-` | Y coordinate in data space (not pixel coordinates). |
17
+ | `accentHeight` | `string \| number` | No | `-` | - |
18
+ | `accessibilityLabel` | `string` | No | `-` | Accessibility label for screen readers to describe the point. If not provided, a default label will be generated using the data coordinates. |
19
+ | `accumulate` | `none \| sum` | No | `-` | - |
20
+ | `additive` | `sum \| replace` | No | `-` | - |
21
+ | `alignmentBaseline` | `alphabetic \| hanging \| ideographic \| mathematical \| inherit \| auto \| baseline \| before-edge \| text-before-edge \| middle \| central \| after-edge \| text-after-edge` | No | `-` | - |
22
+ | `allowReorder` | `no \| yes` | No | `-` | - |
23
+ | `alphabetic` | `string \| number` | No | `-` | - |
24
+ | `amplitude` | `string \| number` | No | `-` | - |
25
+ | `animate` | `boolean` | No | `-` | Override the charts animation setting for this specific point. When undefined, uses the chart contexts animation setting. |
26
+ | `arabicForm` | `initial \| medial \| terminal \| isolated` | No | `-` | - |
27
+ | `ascent` | `string \| number` | No | `-` | - |
28
+ | `attributeName` | `string` | No | `-` | - |
29
+ | `attributeType` | `string` | No | `-` | - |
30
+ | `autoReverse` | `false \| true \| true \| false` | No | `-` | - |
31
+ | `azimuth` | `string \| number` | No | `-` | - |
32
+ | `baseFrequency` | `string \| number` | No | `-` | - |
33
+ | `baseProfile` | `string \| number` | No | `-` | - |
34
+ | `baselineShift` | `string \| number` | No | `-` | - |
35
+ | `bbox` | `string \| number` | No | `-` | - |
36
+ | `begin` | `string \| number` | No | `-` | - |
37
+ | `bias` | `string \| number` | No | `-` | - |
38
+ | `by` | `string \| number` | No | `-` | - |
39
+ | `calcMode` | `string \| number` | No | `-` | - |
40
+ | `capHeight` | `string \| number` | No | `-` | - |
41
+ | `className` | `string` | No | `-` | Custom class name for the point. |
42
+ | `classNames` | `{ container?: string; point?: string \| undefined; } \| undefined` | No | `-` | Custom class names for the component. |
43
+ | `clip` | `string \| number` | No | `-` | - |
44
+ | `clipPath` | `string` | No | `-` | - |
45
+ | `clipPathUnits` | `string \| number` | No | `-` | - |
46
+ | `clipRule` | `string \| number` | No | `-` | - |
47
+ | `color` | `string` | No | `-` | - |
48
+ | `colorInterpolation` | `string \| number` | No | `-` | - |
49
+ | `colorInterpolationFilters` | `inherit \| auto \| sRGB \| linearRGB` | No | `-` | - |
50
+ | `colorProfile` | `string \| number` | No | `-` | - |
51
+ | `colorRendering` | `string \| number` | No | `-` | - |
52
+ | `contentScriptType` | `string \| number` | No | `-` | - |
53
+ | `contentStyleType` | `string \| number` | No | `-` | - |
54
+ | `crossOrigin` | ` \| anonymous \| use-credentials` | No | `-` | - |
55
+ | `cursor` | `string \| number` | No | `-` | - |
56
+ | `cx` | `string \| number` | No | `-` | - |
57
+ | `cy` | `string \| number` | No | `-` | - |
58
+ | `d` | `string` | No | `-` | - |
59
+ | `decelerate` | `string \| number` | No | `-` | - |
60
+ | `descent` | `string \| number` | No | `-` | - |
61
+ | `diffuseConstant` | `string \| number` | No | `-` | - |
62
+ | `direction` | `string \| number` | No | `-` | - |
63
+ | `display` | `string \| number` | No | `-` | - |
64
+ | `divisor` | `string \| number` | No | `-` | - |
65
+ | `dominantBaseline` | `string \| number` | No | `-` | - |
66
+ | `dur` | `string \| number` | No | `-` | - |
67
+ | `dx` | `string \| number` | No | `-` | - |
68
+ | `dy` | `string \| number` | No | `-` | - |
69
+ | `edgeMode` | `string \| number` | No | `-` | - |
70
+ | `elevation` | `string \| number` | No | `-` | - |
71
+ | `enableBackground` | `string \| number` | No | `-` | - |
72
+ | `end` | `string \| number` | No | `-` | - |
73
+ | `exponent` | `string \| number` | No | `-` | - |
74
+ | `externalResourcesRequired` | `false \| true \| true \| false` | No | `-` | - |
75
+ | `fill` | `string` | No | `-` | The fill color of the point. |
76
+ | `fillOpacity` | `string \| number` | No | `-` | - |
77
+ | `fillRule` | `inherit \| nonzero \| evenodd` | No | `-` | - |
78
+ | `filter` | `string` | No | `-` | - |
79
+ | `filterRes` | `string \| number` | No | `-` | - |
80
+ | `filterUnits` | `string \| number` | No | `-` | - |
81
+ | `floodColor` | `string \| number` | No | `-` | - |
82
+ | `floodOpacity` | `string \| number` | No | `-` | - |
83
+ | `focusable` | `auto \| Booleanish` | No | `-` | - |
84
+ | `fontFamily` | `string` | No | `-` | - |
85
+ | `fontSize` | `string \| number` | No | `-` | - |
86
+ | `fontSizeAdjust` | `string \| number` | No | `-` | - |
87
+ | `fontStretch` | `string \| number` | No | `-` | - |
88
+ | `fontStyle` | `string \| number` | No | `-` | - |
89
+ | `fontVariant` | `string \| number` | No | `-` | - |
90
+ | `fontWeight` | `string \| number` | No | `-` | - |
91
+ | `format` | `string \| number` | No | `-` | - |
92
+ | `fr` | `string \| number` | No | `-` | - |
93
+ | `from` | `string \| number` | No | `-` | - |
94
+ | `fx` | `string \| number` | No | `-` | - |
95
+ | `fy` | `string \| number` | No | `-` | - |
96
+ | `g1` | `string \| number` | No | `-` | - |
97
+ | `g2` | `string \| number` | No | `-` | - |
98
+ | `glyphName` | `string \| number` | No | `-` | - |
99
+ | `glyphOrientationHorizontal` | `string \| number` | No | `-` | - |
100
+ | `glyphOrientationVertical` | `string \| number` | No | `-` | - |
101
+ | `glyphRef` | `string \| number` | No | `-` | - |
102
+ | `gradientTransform` | `string` | No | `-` | - |
103
+ | `gradientUnits` | `string` | No | `-` | - |
104
+ | `hanging` | `string \| number` | No | `-` | - |
105
+ | `height` | `string \| number` | No | `-` | - |
106
+ | `horizAdvX` | `string \| number` | No | `-` | - |
107
+ | `horizOriginX` | `string \| number` | No | `-` | - |
108
+ | `href` | `string` | No | `-` | - |
109
+ | `id` | `string` | No | `-` | - |
110
+ | `ideographic` | `string \| number` | No | `-` | - |
111
+ | `imageRendering` | `string \| number` | No | `-` | - |
112
+ | `in` | `string` | No | `-` | - |
113
+ | `in2` | `string \| number` | No | `-` | - |
114
+ | `intercept` | `string \| number` | No | `-` | - |
115
+ | `k` | `string \| number` | No | `-` | - |
116
+ | `k1` | `string \| number` | No | `-` | - |
117
+ | `k2` | `string \| number` | No | `-` | - |
118
+ | `k3` | `string \| number` | No | `-` | - |
119
+ | `k4` | `string \| number` | No | `-` | - |
120
+ | `kernelMatrix` | `string \| number` | No | `-` | - |
121
+ | `kernelUnitLength` | `string \| number` | No | `-` | - |
122
+ | `kerning` | `string \| number` | No | `-` | - |
123
+ | `key` | `Key \| null` | No | `-` | - |
124
+ | `keyPoints` | `string \| number` | No | `-` | - |
125
+ | `keySplines` | `string \| number` | No | `-` | - |
126
+ | `keyTimes` | `string \| number` | No | `-` | - |
127
+ | `label` | `null \| string \| number \| ReactElement<TSpanProps, TSpan> \| ReactElement<TextPathProps, TextPath> \| ValidChartTextChildElements[]` | No | `-` | Simple text label to display at the point position. If provided, a ChartText will be automatically rendered. |
128
+ | `labelProps` | `Omit<ChartTextProps, x \| y \| children>` | No | `-` | Configuration for the automatically rendered label. Only used when label prop is provided. |
129
+ | `lang` | `string` | No | `-` | - |
130
+ | `lengthAdjust` | `string \| number` | No | `-` | - |
131
+ | `letterSpacing` | `string \| number` | No | `-` | - |
132
+ | `lightingColor` | `string \| number` | No | `-` | - |
133
+ | `limitingConeAngle` | `string \| number` | No | `-` | - |
134
+ | `local` | `string \| number` | No | `-` | - |
135
+ | `markerEnd` | `string` | No | `-` | - |
136
+ | `markerHeight` | `string \| number` | No | `-` | - |
137
+ | `markerMid` | `string` | No | `-` | - |
138
+ | `markerStart` | `string` | No | `-` | - |
139
+ | `markerUnits` | `string \| number` | No | `-` | - |
140
+ | `markerWidth` | `string \| number` | No | `-` | - |
141
+ | `mask` | `string` | No | `-` | - |
142
+ | `maskContentUnits` | `string \| number` | No | `-` | - |
143
+ | `maskUnits` | `string \| number` | No | `-` | - |
144
+ | `mathematical` | `string \| number` | No | `-` | - |
145
+ | `max` | `string \| number` | No | `-` | - |
146
+ | `media` | `string` | No | `-` | - |
147
+ | `method` | `string` | No | `-` | - |
148
+ | `min` | `string \| number` | No | `-` | - |
149
+ | `mode` | `string \| number` | No | `-` | - |
150
+ | `name` | `string` | No | `-` | - |
151
+ | `numOctaves` | `string \| number` | No | `-` | - |
152
+ | `offset` | `string \| number` | No | `-` | - |
153
+ | `onChange` | `FormEventHandler<SVGCircleElement>` | No | `-` | - |
154
+ | `onClick` | `((event: MouseEvent<Element, MouseEvent>, point: { x: number; y: number; dataX: number; dataY: number; }) => void)` | No | `-` | Handler for when the point is clicked. |
155
+ | `onScrubberEnter` | `((point: { x: number; y: number; }) => void)` | No | `-` | Handler for when the scrubber enters this point. |
156
+ | `opacity` | `number` | No | `-` | Opacity of the point. |
157
+ | `operator` | `string \| number` | No | `-` | - |
158
+ | `order` | `string \| number` | No | `-` | - |
159
+ | `orient` | `string \| number` | No | `-` | - |
160
+ | `orientation` | `string \| number` | No | `-` | - |
161
+ | `origin` | `string \| number` | No | `-` | - |
162
+ | `overflow` | `string \| number` | No | `-` | - |
163
+ | `overlinePosition` | `string \| number` | No | `-` | - |
164
+ | `overlineThickness` | `string \| number` | No | `-` | - |
165
+ | `paintOrder` | `string \| number` | No | `-` | - |
166
+ | `panose1` | `string \| number` | No | `-` | - |
167
+ | `path` | `string` | No | `-` | - |
168
+ | `pathLength` | `string \| number` | No | `-` | - |
169
+ | `patternContentUnits` | `string` | No | `-` | - |
170
+ | `patternTransform` | `string \| number` | No | `-` | - |
171
+ | `patternUnits` | `string` | No | `-` | - |
172
+ | `pixelCoordinates` | `{ x: number; y: number; }` | No | `-` | Coordinates in SVG pixel space. Overrides dataX and dataY for pixel coordinate calculation. |
173
+ | `pointerEvents` | `string \| number` | No | `-` | - |
174
+ | `points` | `string` | No | `-` | - |
175
+ | `pointsAtX` | `string \| number` | No | `-` | - |
176
+ | `pointsAtY` | `string \| number` | No | `-` | - |
177
+ | `pointsAtZ` | `string \| number` | No | `-` | - |
178
+ | `preserveAlpha` | `false \| true \| true \| false` | No | `-` | - |
179
+ | `preserveAspectRatio` | `string` | No | `-` | - |
180
+ | `primitiveUnits` | `string \| number` | No | `-` | - |
181
+ | `r` | `string \| number` | No | `-` | - |
182
+ | `radius` | `number` | No | `4` | Radius of the point. |
183
+ | `ref` | `null \| string \| (instance: SVGCircleElement \| null) => void \| RefObject<SVGCircleElement>` | No | `-` | Allows getting a ref to the component instance. Once the component unmounts, React will set ref.current to null (or call the ref with null if you passed a callback ref). |
184
+ | `refX` | `string \| number` | No | `-` | - |
185
+ | `refY` | `string \| number` | No | `-` | - |
186
+ | `renderingIntent` | `string \| number` | No | `-` | - |
187
+ | `repeatCount` | `string \| number` | No | `-` | - |
188
+ | `repeatDur` | `string \| number` | No | `-` | - |
189
+ | `requiredExtensions` | `string \| number` | No | `-` | - |
190
+ | `requiredFeatures` | `string \| number` | No | `-` | - |
191
+ | `restart` | `string \| number` | No | `-` | - |
192
+ | `result` | `string` | No | `-` | - |
193
+ | `role` | `grid \| article \| button \| dialog \| figure \| form \| img \| link \| main \| menu \| menuitem \| option \| search \| table \| switch \| string & {} \| none \| row \| alert \| alertdialog \| application \| banner \| cell \| checkbox \| columnheader \| combobox \| complementary \| contentinfo \| definition \| directory \| document \| feed \| gridcell \| group \| heading \| list \| listbox \| listitem \| log \| marquee \| math \| menubar \| menuitemcheckbox \| menuitemradio \| navigation \| note \| presentation \| progressbar \| radio \| radiogroup \| region \| rowgroup \| rowheader \| scrollbar \| searchbox \| separator \| slider \| spinbutton \| status \| tab \| tablist \| tabpanel \| term \| textbox \| timer \| toolbar \| tooltip \| tree \| treegrid \| treeitem` | No | `-` | - |
194
+ | `rotate` | `string \| number` | No | `-` | - |
195
+ | `rx` | `string \| number` | No | `-` | - |
196
+ | `ry` | `string \| number` | No | `-` | - |
197
+ | `scale` | `string \| number` | No | `-` | - |
198
+ | `seed` | `string \| number` | No | `-` | - |
199
+ | `shapeRendering` | `string \| number` | No | `-` | - |
200
+ | `slope` | `string \| number` | No | `-` | - |
201
+ | `spacing` | `string \| number` | No | `-` | - |
202
+ | `specularConstant` | `string \| number` | No | `-` | - |
203
+ | `specularExponent` | `string \| number` | No | `-` | - |
204
+ | `speed` | `string \| number` | No | `-` | - |
205
+ | `spreadMethod` | `string` | No | `-` | - |
206
+ | `startOffset` | `string \| number` | No | `-` | - |
207
+ | `stdDeviation` | `string \| number` | No | `-` | - |
208
+ | `stemh` | `string \| number` | No | `-` | - |
209
+ | `stemv` | `string \| number` | No | `-` | - |
210
+ | `stitchTiles` | `string \| number` | No | `-` | - |
211
+ | `stopColor` | `string` | No | `-` | - |
212
+ | `stopOpacity` | `string \| number` | No | `-` | - |
213
+ | `strikethroughPosition` | `string \| number` | No | `-` | - |
214
+ | `strikethroughThickness` | `string \| number` | No | `-` | - |
215
+ | `string` | `string \| number` | No | `-` | - |
216
+ | `stroke` | `string` | No | `'var(--color-bg)'` | Color of the outer stroke around the point. |
217
+ | `strokeDasharray` | `string \| number` | No | `-` | - |
218
+ | `strokeDashoffset` | `string \| number` | No | `-` | - |
219
+ | `strokeLinecap` | `inherit \| butt \| round \| square` | No | `-` | - |
220
+ | `strokeLinejoin` | `inherit \| round \| miter \| bevel` | No | `-` | - |
221
+ | `strokeMiterlimit` | `string \| number` | No | `-` | - |
222
+ | `strokeOpacity` | `string \| number` | No | `-` | - |
223
+ | `strokeWidth` | `number` | No | `2` | Outer stroke width of the point. Set to 0 to remove the stroke. |
224
+ | `style` | `CSSProperties` | No | `-` | Custom styles for the point. |
225
+ | `styles` | `{ container?: CSSProperties; point?: CSSProperties \| undefined; } \| undefined` | No | `-` | Custom styles for the component. |
226
+ | `suppressHydrationWarning` | `boolean` | No | `-` | - |
227
+ | `surfaceScale` | `string \| number` | No | `-` | - |
228
+ | `systemLanguage` | `string \| number` | No | `-` | - |
229
+ | `tabIndex` | `number` | No | `-` | - |
230
+ | `tableValues` | `string \| number` | No | `-` | - |
231
+ | `target` | `string` | No | `-` | - |
232
+ | `targetX` | `string \| number` | No | `-` | - |
233
+ | `targetY` | `string \| number` | No | `-` | - |
234
+ | `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 |
235
+ | `textAnchor` | `string` | No | `-` | - |
236
+ | `textDecoration` | `string \| number` | No | `-` | - |
237
+ | `textLength` | `string \| number` | No | `-` | - |
238
+ | `textRendering` | `string \| number` | No | `-` | - |
239
+ | `to` | `string \| number` | No | `-` | - |
240
+ | `transform` | `string` | No | `-` | - |
241
+ | `type` | `string` | No | `-` | - |
242
+ | `u1` | `string \| number` | No | `-` | - |
243
+ | `u2` | `string \| number` | No | `-` | - |
244
+ | `underlinePosition` | `string \| number` | No | `-` | - |
245
+ | `underlineThickness` | `string \| number` | No | `-` | - |
246
+ | `unicode` | `string \| number` | No | `-` | - |
247
+ | `unicodeBidi` | `string \| number` | No | `-` | - |
248
+ | `unicodeRange` | `string \| number` | No | `-` | - |
249
+ | `unitsPerEm` | `string \| number` | No | `-` | - |
250
+ | `vAlphabetic` | `string \| number` | No | `-` | - |
251
+ | `vHanging` | `string \| number` | No | `-` | - |
252
+ | `vIdeographic` | `string \| number` | No | `-` | - |
253
+ | `vMathematical` | `string \| number` | No | `-` | - |
254
+ | `values` | `string` | No | `-` | - |
255
+ | `vectorEffect` | `string \| number` | No | `-` | - |
256
+ | `version` | `string` | No | `-` | - |
257
+ | `vertAdvY` | `string \| number` | No | `-` | - |
258
+ | `vertOriginX` | `string \| number` | No | `-` | - |
259
+ | `vertOriginY` | `string \| number` | No | `-` | - |
260
+ | `viewBox` | `string` | No | `-` | - |
261
+ | `viewTarget` | `string \| number` | No | `-` | - |
262
+ | `visibility` | `string \| number` | No | `-` | - |
263
+ | `width` | `string \| number` | No | `-` | - |
264
+ | `widths` | `string \| number` | No | `-` | - |
265
+ | `wordSpacing` | `string \| number` | No | `-` | - |
266
+ | `writingMode` | `string \| number` | No | `-` | - |
267
+ | `x` | `string \| number` | No | `-` | - |
268
+ | `x1` | `string \| number` | No | `-` | - |
269
+ | `x2` | `string \| number` | No | `-` | - |
270
+ | `xChannelSelector` | `string` | No | `-` | - |
271
+ | `xHeight` | `string \| number` | No | `-` | - |
272
+ | `xlinkActuate` | `string` | No | `-` | - |
273
+ | `xlinkArcrole` | `string` | No | `-` | - |
274
+ | `xlinkHref` | `string` | No | `-` | - |
275
+ | `xlinkRole` | `string` | No | `-` | - |
276
+ | `xlinkShow` | `string` | No | `-` | - |
277
+ | `xlinkTitle` | `string` | No | `-` | - |
278
+ | `xlinkType` | `string` | No | `-` | - |
279
+ | `xmlBase` | `string` | No | `-` | - |
280
+ | `xmlLang` | `string` | No | `-` | - |
281
+ | `xmlSpace` | `string` | No | `-` | - |
282
+ | `xmlns` | `string` | No | `-` | - |
283
+ | `xmlnsXlink` | `string` | No | `-` | - |
284
+ | `y` | `string \| number` | No | `-` | - |
285
+ | `y1` | `string \| number` | No | `-` | - |
286
+ | `y2` | `string \| number` | No | `-` | - |
287
+ | `yAxisId` | `string` | No | `-` | Optional Y-axis id to specify which axis to plot along. Defaults to the first y-axis |
288
+ | `yChannelSelector` | `string` | No | `-` | - |
289
+ | `z` | `string \| number` | No | `-` | - |
290
+ | `zoomAndPan` | `string` | No | `-` | - |
291
+
292
+
293
+ ## Examples
294
+
295
+ ### Basic Example
296
+
297
+ Points are visual markers that highlight specific data values on a chart. They can be used to emphasize important data points, show discrete values, or provide interactive elements.
298
+
299
+ ```jsx live
300
+ <LineChart
301
+ enableScrubbing
302
+ height={{ base: 150, tablet: 200, desktop: 250 }}
303
+ series={[
304
+ {
305
+ id: 'prices',
306
+ data: [10, 22, 29, 45, 98, 45, 22, 52, 21, 4, 68, 20, 21, 58],
307
+ },
308
+ ]}
309
+ curve="monotone"
310
+ showYAxis
311
+ showArea
312
+ yAxis={{
313
+ showGrid: true,
314
+ }}
315
+ renderPoints={() => true}
316
+ >
317
+ <Scrubber />
318
+ </LineChart>
319
+ ```
320
+
321
+ ### Conditional Points
322
+
323
+ You can conditionally render points to highlight specific values in your data, such as maximum/minimum values or outliers.
324
+
325
+ ```jsx live
326
+ function AssetPriceWithMinMax() {
327
+ const data = sparklineInteractiveData.hour.map((d) => d.value);
328
+
329
+ const minPrice = Math.min(...data);
330
+ const maxPrice = Math.max(...data);
331
+
332
+ const formatPrice = useCallback((price: number) => {
333
+ return new Intl.NumberFormat('en-US', {
334
+ style: 'currency',
335
+ currency: 'USD',
336
+ }).format(price);
337
+ }, []);
338
+
339
+ return (
340
+ <LineChart
341
+ series={[
342
+ {
343
+ id: 'btc',
344
+ data: data,
345
+ color: assets.btc.color,
346
+ },
347
+ ]}
348
+ showArea
349
+ areaType="dotted"
350
+ height={{ base: 150, tablet: 200, desktop: 250 }}
351
+ style={{ outlineColor: assets.btc.color }}
352
+ renderPoints={({ dataX, dataY }) => {
353
+ const isMin = dataY === minPrice;
354
+ const isMax = dataY === maxPrice;
355
+
356
+ if (isMin) {
357
+ return { label: formatPrice(dataY), labelProps: { dy: 6, verticalAlignment: 'top' } };
358
+ }
359
+
360
+ if (isMax) {
361
+ return { label: formatPrice(dataY), labelProps: { dy: -6, verticalAlignment: 'bottom' } };
362
+ }
363
+ }}
364
+ />
365
+ );
366
+ };
367
+ ```
368
+
369
+ ### Interactive Points
370
+
371
+ Points can be made interactive by adding click handlers, allowing users to explore data in more detail.
372
+
373
+ ```jsx live
374
+ <LineChart
375
+ height={{ base: 150, tablet: 200, desktop: 250 }}
376
+ series={[
377
+ {
378
+ id: 'sales',
379
+ data: [120, 132, 101, 134, 90, 230, 210, 120, 180, 190, 210, 176],
380
+ },
381
+ ]}
382
+ curve="monotone"
383
+ showYAxis
384
+ showArea
385
+ yAxis={{
386
+ showGrid: true,
387
+ label: 'Sales (units)',
388
+ }}
389
+ renderPoints={({ dataX, dataY }) => {
390
+ const months = [
391
+ 'Jan',
392
+ 'Feb',
393
+ 'Mar',
394
+ 'Apr',
395
+ 'May',
396
+ 'Jun',
397
+ 'Jul',
398
+ 'Aug',
399
+ 'Sep',
400
+ 'Oct',
401
+ 'Nov',
402
+ 'Dec',
403
+ ];
404
+ return {
405
+ radius: 4,
406
+ onClick: () => alert(`${months[dataX]}: ${dataY} units sold`),
407
+ accessibilityLabel: `${months[dataX]} sales: ${dataY} units`,
408
+ };
409
+ }}
410
+ />
411
+ ```
412
+
413
+ ### Customization
414
+
415
+ Points support extensive customization through various properties including colors, sizes, animations, and labels.
416
+
417
+ ```jsx live
418
+ <LineChart
419
+ height={{ base: 150, tablet: 200, desktop: 250 }}
420
+ series={[
421
+ {
422
+ id: 'performance',
423
+ data: [65, 70, 72, 85, 88, 92, 78, 82, 90, 95, 91, 94],
424
+ },
425
+ ]}
426
+ curve="monotone"
427
+ showYAxis
428
+ showArea
429
+ yAxis={{
430
+ showGrid: true,
431
+ label: 'Performance Score',
432
+ }}
433
+ renderPoints={({ dataX, dataY }) => {
434
+ const isHighPerformance = dataY >= 90;
435
+ const isLowPerformance = dataY < 75;
436
+
437
+ return {
438
+ fill: isHighPerformance
439
+ ? 'var(--color-bgPositive)'
440
+ : isLowPerformance
441
+ ? 'var(--color-bgNegative)'
442
+ : 'var(--color-fgPrimary)',
443
+ radius: isHighPerformance ? 6 : 4,
444
+ strokeWidth: 2,
445
+ stroke: 'var(--color-bg)',
446
+ label: isHighPerformance || isLowPerformance ? `${dataY}%` : undefined,
447
+ labelProps: {
448
+ verticalAlignment: isHighPerformance ? 'bottom' : 'top',
449
+ dy: isHighPerformance ? -10 : 10,
450
+ color: isHighPerformance
451
+ ? 'var(--color-fgPositive)'
452
+ : isLowPerformance
453
+ ? 'var(--color-fgNegative)'
454
+ : undefined,
455
+ },
456
+ };
457
+ }}
458
+ />
459
+ ```
460
+
461
+
@@ -0,0 +1,77 @@
1
+ # PortalProvider
2
+
3
+ A component that manages the rendering of portals for overlay components.
4
+
5
+ ## Import
6
+
7
+ ```jsx
8
+ import { PortalProvider } from '@coinbase/cds-web/overlays/PortalProvider'
9
+ ```
10
+
11
+ ## Props
12
+
13
+ | Prop | Type | Required | Default | Description |
14
+ | --- | --- | --- | --- | --- |
15
+
16
+
17
+ ## Examples
18
+
19
+ ### Basic usage
20
+
21
+ The PortalProvider component is typically used at the root of your application to manage overlay components:
22
+
23
+ ```tsx live
24
+ function Example() {
25
+ return (
26
+ <PortalProvider>
27
+ <Box padding={4} bordered borderRadius={200}>
28
+ Your app content
29
+ </Box>
30
+ </PortalProvider>
31
+ );
32
+ }
33
+ ```
34
+
35
+ ### Custom Portal Nodes
36
+
37
+ You can disable the default portal rendering and use the PortalNodes component separately:
38
+
39
+ ```tsx live
40
+ function Example() {
41
+ return (
42
+ <PortalProvider renderPortals={false}>
43
+ <Box padding={4} bordered borderRadius={200}>
44
+ Your app content
45
+ </Box>
46
+ <PortalNodes />
47
+ </PortalProvider>
48
+ );
49
+ }
50
+ ```
51
+
52
+ ### Toast Example
53
+
54
+ The PortalProvider's `toastBottomOffset` prop sets the default bottom offset for all toasts:
55
+
56
+ ```tsx live
57
+ function Example() {
58
+ function ToastDemo() {
59
+ const toast = useToast();
60
+ return (
61
+ <Box padding={4} bordered borderRadius={200}>
62
+ <Button onClick={() => toast.show('This toast appears with a custom bottom offset (80px)')}>
63
+ Show Toast
64
+ </Button>
65
+ </Box>
66
+ );
67
+ }
68
+
69
+ return (
70
+ <PortalProvider toastBottomOffset={80}>
71
+ <ToastDemo />
72
+ </PortalProvider>
73
+ );
74
+ }
75
+ ```
76
+
77
+