@coinbase/cds-mcp-server 8.17.2 → 8.17.4

package/mcp-docs/web/components/Pictogram.txt

@@ -0,0 +1,48 @@
+# Pictogram
+
+Displays elevated product icons.
+
+## Import
+
+```tsx
+import { Pictogram } from '@coinbase/cds-web/illustrations/Pictogram'
+```
+
+## Examples
+
+### Basic example
+
+```jsx live
+<Pictogram name="shield" dimension="64x64" />
+```
+
+### `scaleMultiplier` prop
+
+If no predefined dimensions fit your use case, you can use the `scaleMultiplier` prop to scale the illustration.
+
+Use `scaleMultiplier` sparingly and with caution. We have predefined dimensions to ensure that illustrations scale elegantly.
+
+```jsx live
+<Pictogram name="shield" scaleMultiplier={1.5} />
+```
+
+### Scaling with dimension
+
+If `dimension` and `scaleMultiplier` are both provided the component will scale based on the provided dimension.
+
+```jsx live
+<Pictogram name="shield" dimension="48x48" scaleMultiplier={2.5} />
+```
+
+## Props
+
+| Prop | Type | Required | Default | Description |
+| --- | --- | --- | --- | --- |
+| `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 \| tokenSales \| 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 \| 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 |
+| `alt` | `string` | No | `"" will identify the image as decorative` | Alt tag to apply to the img |
+| `dimension` | `48x48 \| 64x64` | No | `-` | HeroSquare Default:  240x240 SpotSquare Default: 96x96 Pictogram Default: 48x48 SpotRectangle Default: 240x120 |
+| `fallback` | `ReactElement<any, string \| JSXElementConstructor<any>> \| null` | No | `null` | Fallback element to render if unable to find an illustration with the matching name |
+| `scaleMultiplier` | `number` | No | `-` | Multiply the width & height while maintaining aspect ratio |
+| `testID` | `string` | No | `-` | Used to locate this element in unit and end-to-end tests. Under the hood, testID translates to data-testid on Web. On Mobile, testID stays the same - testID |
+
+

package/mcp-docs/web/components/Point.txt

@@ -0,0 +1,460 @@
+# Point
+
+Visual markers that highlight specific data values on a chart. Points can be customized with different colors, sizes, and interactivity.
+
+## Import
+
+```tsx
+import { Point } from '@coinbase/cds-web-visualization'
+```
+
+## Examples
+
+### Basic Example
+
+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.
+
+```jsx live
+<LineChart
+  enableScrubbing
+  height={{ base: 150, tablet: 200, desktop: 250 }}
+  series={[
+    {
+      id: 'prices',
+      data: [10, 22, 29, 45, 98, 45, 22, 52, 21, 4, 68, 20, 21, 58],
+    },
+  ]}
+  curve="monotone"
+  showYAxis
+  showArea
+  yAxis={{
+    showGrid: true,
+  }}
+  renderPoints={() => true}
+>
+  <Scrubber />
+</LineChart>
+```
+
+### Conditional Points
+
+You can conditionally render points to highlight specific values in your data, such as maximum/minimum values or outliers.
+
+```jsx live
+function AssetPriceWithMinMax() {
+  const data = sparklineInteractiveData.hour.map((d) => d.value);
+
+  const minPrice = Math.min(...data);
+  const maxPrice = Math.max(...data);
+
+  const formatPrice = useCallback((price: number) => {
+    return new Intl.NumberFormat('en-US', {
+      style: 'currency',
+      currency: 'USD',
+    }).format(price);
+  }, []);
+
+  return (
+    <LineChart
+      series={[
+        {
+          id: 'btc',
+          data: data,
+          color: assets.btc.color,
+        },
+      ]}
+      showArea
+      areaType="dotted"
+      height={{ base: 150, tablet: 200, desktop: 250 }}
+      style={{ outlineColor: assets.btc.color }}
+      renderPoints={({ dataX, dataY }) => {
+        const isMin = dataY === minPrice;
+        const isMax = dataY === maxPrice;
+
+        if (isMin) {
+          return { label: formatPrice(dataY), labelProps: {  dy: 6, verticalAlignment: 'top' } };
+        }
+
+        if (isMax) {
+          return { label: formatPrice(dataY), labelProps: { dy: -6, verticalAlignment: 'bottom' } };
+        }
+      }}
+    />
+  );
+};
+```
+
+### Interactive Points
+
+Points can be made interactive by adding click handlers, allowing users to explore data in more detail.
+
+```jsx live
+<LineChart
+  height={{ base: 150, tablet: 200, desktop: 250 }}
+  series={[
+    {
+      id: 'sales',
+      data: [120, 132, 101, 134, 90, 230, 210, 120, 180, 190, 210, 176],
+    },
+  ]}
+  curve="monotone"
+  showYAxis
+  showArea
+  yAxis={{
+    showGrid: true,
+    label: 'Sales (units)',
+  }}
+  renderPoints={({ dataX, dataY }) => {
+    const months = [
+      'Jan',
+      'Feb',
+      'Mar',
+      'Apr',
+      'May',
+      'Jun',
+      'Jul',
+      'Aug',
+      'Sep',
+      'Oct',
+      'Nov',
+      'Dec',
+    ];
+    return {
+      radius: 4,
+      onClick: () => alert(`${months[dataX]}: ${dataY} units sold`),
+      accessibilityLabel: `${months[dataX]} sales: ${dataY} units`,
+    };
+  }}
+/>
+```
+
+### Customization
+
+Points support extensive customization through various properties including colors, sizes, animations, and labels.
+
+```jsx live
+<LineChart
+  height={{ base: 150, tablet: 200, desktop: 250 }}
+  series={[
+    {
+      id: 'performance',
+      data: [65, 70, 72, 85, 88, 92, 78, 82, 90, 95, 91, 94],
+    },
+  ]}
+  curve="monotone"
+  showYAxis
+  showArea
+  yAxis={{
+    showGrid: true,
+    label: 'Performance Score',
+  }}
+  renderPoints={({ dataX, dataY }) => {
+    const isHighPerformance = dataY >= 90;
+    const isLowPerformance = dataY < 75;
+
+    return {
+      fill: isHighPerformance
+        ? 'var(--color-bgPositive)'
+        : isLowPerformance
+          ? 'var(--color-bgNegative)'
+          : 'var(--color-fgPrimary)',
+      radius: isHighPerformance ? 6 : 4,
+      strokeWidth: 2,
+      stroke: 'var(--color-bg)',
+      label: isHighPerformance || isLowPerformance ? `${dataY}%` : undefined,
+      labelProps: {
+        verticalAlignment: isHighPerformance ? 'bottom' : 'top',
+        dy: isHighPerformance ? -10 : 10,
+        color: isHighPerformance
+          ? 'var(--color-fgPositive)'
+          : isLowPerformance
+            ? 'var(--color-fgNegative)'
+            : undefined,
+      },
+    };
+  }}
+/>
+```
+
+## Props
+
+| Prop | Type | Required | Default | Description |
+| --- | --- | --- | --- | --- |
+| `dataX` | `number` | Yes | `-` | X coordinate in data space (not pixel coordinates). |
+| `dataY` | `number` | Yes | `-` | Y coordinate in data space (not pixel coordinates). |
+| `accentHeight` | `string \| number` | No | `-` | - |
+| `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. |
+| `accumulate` | `none \| sum` | No | `-` | - |
+| `additive` | `sum \| replace` | No | `-` | - |
+| `alignmentBaseline` | `alphabetic \| hanging \| ideographic \| mathematical \| inherit \| auto \| baseline \| before-edge \| text-before-edge \| middle \| central \| after-edge \| text-after-edge` | No | `-` | - |
+| `allowReorder` | `no \| yes` | No | `-` | - |
+| `alphabetic` | `string \| number` | No | `-` | - |
+| `amplitude` | `string \| number` | No | `-` | - |
+| `animate` | `boolean` | No | `-` | Override the charts animation setting for this specific point. When undefined, uses the chart contexts animation setting. |
+| `arabicForm` | `initial \| medial \| terminal \| isolated` | No | `-` | - |
+| `ascent` | `string \| number` | No | `-` | - |
+| `attributeName` | `string` | No | `-` | - |
+| `attributeType` | `string` | No | `-` | - |
+| `autoReverse` | `false \| true \| true \| false` | No | `-` | - |
+| `azimuth` | `string \| number` | No | `-` | - |
+| `baseFrequency` | `string \| number` | No | `-` | - |
+| `baseProfile` | `string \| number` | No | `-` | - |
+| `baselineShift` | `string \| number` | No | `-` | - |
+| `bbox` | `string \| number` | No | `-` | - |
+| `begin` | `string \| number` | No | `-` | - |
+| `bias` | `string \| number` | No | `-` | - |
+| `by` | `string \| number` | No | `-` | - |
+| `calcMode` | `string \| number` | No | `-` | - |
+| `capHeight` | `string \| number` | No | `-` | - |
+| `className` | `string` | No | `-` | Custom class name for the point. |
+| `classNames` | `{ container?: string; point?: string \| undefined; } \| undefined` | No | `-` | Custom class names for the component. |
+| `clip` | `string \| number` | No | `-` | - |
+| `clipPath` | `string` | No | `-` | - |
+| `clipPathUnits` | `string \| number` | No | `-` | - |
+| `clipRule` | `string \| number` | No | `-` | - |
+| `color` | `string` | No | `-` | - |
+| `colorInterpolation` | `string \| number` | No | `-` | - |
+| `colorInterpolationFilters` | `inherit \| auto \| sRGB \| linearRGB` | No | `-` | - |
+| `colorProfile` | `string \| number` | No | `-` | - |
+| `colorRendering` | `string \| number` | No | `-` | - |
+| `contentScriptType` | `string \| number` | No | `-` | - |
+| `contentStyleType` | `string \| number` | No | `-` | - |
+| `crossOrigin` | ` \| anonymous \| use-credentials` | No | `-` | - |
+| `cursor` | `string \| number` | No | `-` | - |
+| `cx` | `string \| number` | No | `-` | - |
+| `cy` | `string \| number` | No | `-` | - |
+| `d` | `string` | No | `-` | - |
+| `decelerate` | `string \| number` | No | `-` | - |
+| `descent` | `string \| number` | No | `-` | - |
+| `diffuseConstant` | `string \| number` | No | `-` | - |
+| `direction` | `string \| number` | No | `-` | - |
+| `display` | `string \| number` | No | `-` | - |
+| `divisor` | `string \| number` | No | `-` | - |
+| `dominantBaseline` | `string \| number` | No | `-` | - |
+| `dur` | `string \| number` | No | `-` | - |
+| `dx` | `string \| number` | No | `-` | - |
+| `dy` | `string \| number` | No | `-` | - |
+| `edgeMode` | `string \| number` | No | `-` | - |
+| `elevation` | `string \| number` | No | `-` | - |
+| `enableBackground` | `string \| number` | No | `-` | - |
+| `end` | `string \| number` | No | `-` | - |
+| `exponent` | `string \| number` | No | `-` | - |
+| `externalResourcesRequired` | `false \| true \| true \| false` | No | `-` | - |
+| `fill` | `string` | No | `-` | The fill color of the point. |
+| `fillOpacity` | `string \| number` | No | `-` | - |
+| `fillRule` | `inherit \| nonzero \| evenodd` | No | `-` | - |
+| `filter` | `string` | No | `-` | - |
+| `filterRes` | `string \| number` | No | `-` | - |
+| `filterUnits` | `string \| number` | No | `-` | - |
+| `floodColor` | `string \| number` | No | `-` | - |
+| `floodOpacity` | `string \| number` | No | `-` | - |
+| `focusable` | `auto \| Booleanish` | No | `-` | - |
+| `fontFamily` | `string` | No | `-` | - |
+| `fontSize` | `string \| number` | No | `-` | - |
+| `fontSizeAdjust` | `string \| number` | No | `-` | - |
+| `fontStretch` | `string \| number` | No | `-` | - |
+| `fontStyle` | `string \| number` | No | `-` | - |
+| `fontVariant` | `string \| number` | No | `-` | - |
+| `fontWeight` | `string \| number` | No | `-` | - |
+| `format` | `string \| number` | No | `-` | - |
+| `fr` | `string \| number` | No | `-` | - |
+| `from` | `string \| number` | No | `-` | - |
+| `fx` | `string \| number` | No | `-` | - |
+| `fy` | `string \| number` | No | `-` | - |
+| `g1` | `string \| number` | No | `-` | - |
+| `g2` | `string \| number` | No | `-` | - |
+| `glyphName` | `string \| number` | No | `-` | - |
+| `glyphOrientationHorizontal` | `string \| number` | No | `-` | - |
+| `glyphOrientationVertical` | `string \| number` | No | `-` | - |
+| `glyphRef` | `string \| number` | No | `-` | - |
+| `gradientTransform` | `string` | No | `-` | - |
+| `gradientUnits` | `string` | No | `-` | - |
+| `hanging` | `string \| number` | No | `-` | - |
+| `height` | `string \| number` | No | `-` | - |
+| `horizAdvX` | `string \| number` | No | `-` | - |
+| `horizOriginX` | `string \| number` | No | `-` | - |
+| `href` | `string` | No | `-` | - |
+| `id` | `string` | No | `-` | - |
+| `ideographic` | `string \| number` | No | `-` | - |
+| `imageRendering` | `string \| number` | No | `-` | - |
+| `in` | `string` | No | `-` | - |
+| `in2` | `string \| number` | No | `-` | - |
+| `intercept` | `string \| number` | No | `-` | - |
+| `k` | `string \| number` | No | `-` | - |
+| `k1` | `string \| number` | No | `-` | - |
+| `k2` | `string \| number` | No | `-` | - |
+| `k3` | `string \| number` | No | `-` | - |
+| `k4` | `string \| number` | No | `-` | - |
+| `kernelMatrix` | `string \| number` | No | `-` | - |
+| `kernelUnitLength` | `string \| number` | No | `-` | - |
+| `kerning` | `string \| number` | No | `-` | - |
+| `key` | `Key \| null` | No | `-` | - |
+| `keyPoints` | `string \| number` | No | `-` | - |
+| `keySplines` | `string \| number` | No | `-` | - |
+| `keyTimes` | `string \| number` | No | `-` | - |
+| `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. |
+| `labelProps` | `Omit<ChartTextProps, x \| y \| children>` | No | `-` | Configuration for the automatically rendered label. Only used when label prop is provided. |
+| `lang` | `string` | No | `-` | - |
+| `lengthAdjust` | `string \| number` | No | `-` | - |
+| `letterSpacing` | `string \| number` | No | `-` | - |
+| `lightingColor` | `string \| number` | No | `-` | - |
+| `limitingConeAngle` | `string \| number` | No | `-` | - |
+| `local` | `string \| number` | No | `-` | - |
+| `markerEnd` | `string` | No | `-` | - |
+| `markerHeight` | `string \| number` | No | `-` | - |
+| `markerMid` | `string` | No | `-` | - |
+| `markerStart` | `string` | No | `-` | - |
+| `markerUnits` | `string \| number` | No | `-` | - |
+| `markerWidth` | `string \| number` | No | `-` | - |
+| `mask` | `string` | No | `-` | - |
+| `maskContentUnits` | `string \| number` | No | `-` | - |
+| `maskUnits` | `string \| number` | No | `-` | - |
+| `mathematical` | `string \| number` | No | `-` | - |
+| `max` | `string \| number` | No | `-` | - |
+| `media` | `string` | No | `-` | - |
+| `method` | `string` | No | `-` | - |
+| `min` | `string \| number` | No | `-` | - |
+| `mode` | `string \| number` | No | `-` | - |
+| `name` | `string` | No | `-` | - |
+| `numOctaves` | `string \| number` | No | `-` | - |
+| `offset` | `string \| number` | No | `-` | - |
+| `onChange` | `FormEventHandler<SVGCircleElement>` | No | `-` | - |
+| `onClick` | `((event: MouseEvent<Element, MouseEvent>, point: { x: number; y: number; dataX: number; dataY: number; }) => void)` | No | `-` | Handler for when the point is clicked. |
+| `onScrubberEnter` | `((point: { x: number; y: number; }) => void)` | No | `-` | Handler for when the scrubber enters this point. |
+| `opacity` | `number` | No | `-` | Opacity of the point. |
+| `operator` | `string \| number` | No | `-` | - |
+| `order` | `string \| number` | No | `-` | - |
+| `orient` | `string \| number` | No | `-` | - |
+| `orientation` | `string \| number` | No | `-` | - |
+| `origin` | `string \| number` | No | `-` | - |
+| `overflow` | `string \| number` | No | `-` | - |
+| `overlinePosition` | `string \| number` | No | `-` | - |
+| `overlineThickness` | `string \| number` | No | `-` | - |
+| `paintOrder` | `string \| number` | No | `-` | - |
+| `panose1` | `string \| number` | No | `-` | - |
+| `path` | `string` | No | `-` | - |
+| `pathLength` | `string \| number` | No | `-` | - |
+| `patternContentUnits` | `string` | No | `-` | - |
+| `patternTransform` | `string \| number` | No | `-` | - |
+| `patternUnits` | `string` | No | `-` | - |
+| `pixelCoordinates` | `{ x: number; y: number; }` | No | `-` | Coordinates in SVG pixel space. Overrides dataX and dataY for pixel coordinate calculation. |
+| `pointerEvents` | `string \| number` | No | `-` | - |
+| `points` | `string` | No | `-` | - |
+| `pointsAtX` | `string \| number` | No | `-` | - |
+| `pointsAtY` | `string \| number` | No | `-` | - |
+| `pointsAtZ` | `string \| number` | No | `-` | - |
+| `preserveAlpha` | `false \| true \| true \| false` | No | `-` | - |
+| `preserveAspectRatio` | `string` | No | `-` | - |
+| `primitiveUnits` | `string \| number` | No | `-` | - |
+| `r` | `string \| number` | No | `-` | - |
+| `radius` | `number` | No | `4` | Radius of the point. |
+| `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). |
+| `refX` | `string \| number` | No | `-` | - |
+| `refY` | `string \| number` | No | `-` | - |
+| `renderingIntent` | `string \| number` | No | `-` | - |
+| `repeatCount` | `string \| number` | No | `-` | - |
+| `repeatDur` | `string \| number` | No | `-` | - |
+| `requiredExtensions` | `string \| number` | No | `-` | - |
+| `requiredFeatures` | `string \| number` | No | `-` | - |
+| `restart` | `string \| number` | No | `-` | - |
+| `result` | `string` | No | `-` | - |
+| `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 | `-` | - |
+| `rotate` | `string \| number` | No | `-` | - |
+| `rx` | `string \| number` | No | `-` | - |
+| `ry` | `string \| number` | No | `-` | - |
+| `scale` | `string \| number` | No | `-` | - |
+| `seed` | `string \| number` | No | `-` | - |
+| `shapeRendering` | `string \| number` | No | `-` | - |
+| `slope` | `string \| number` | No | `-` | - |
+| `spacing` | `string \| number` | No | `-` | - |
+| `specularConstant` | `string \| number` | No | `-` | - |
+| `specularExponent` | `string \| number` | No | `-` | - |
+| `speed` | `string \| number` | No | `-` | - |
+| `spreadMethod` | `string` | No | `-` | - |
+| `startOffset` | `string \| number` | No | `-` | - |
+| `stdDeviation` | `string \| number` | No | `-` | - |
+| `stemh` | `string \| number` | No | `-` | - |
+| `stemv` | `string \| number` | No | `-` | - |
+| `stitchTiles` | `string \| number` | No | `-` | - |
+| `stopColor` | `string` | No | `-` | - |
+| `stopOpacity` | `string \| number` | No | `-` | - |
+| `strikethroughPosition` | `string \| number` | No | `-` | - |
+| `strikethroughThickness` | `string \| number` | No | `-` | - |
+| `string` | `string \| number` | No | `-` | - |
+| `stroke` | `string` | No | `'var(--color-bg)'` | Color of the outer stroke around the point. |
+| `strokeDasharray` | `string \| number` | No | `-` | - |
+| `strokeDashoffset` | `string \| number` | No | `-` | - |
+| `strokeLinecap` | `inherit \| butt \| round \| square` | No | `-` | - |
+| `strokeLinejoin` | `inherit \| round \| miter \| bevel` | No | `-` | - |
+| `strokeMiterlimit` | `string \| number` | No | `-` | - |
+| `strokeOpacity` | `string \| number` | No | `-` | - |
+| `strokeWidth` | `number` | No | `2` | Outer stroke width of the point. Set to  0 to remove the stroke. |
+| `style` | `CSSProperties` | No | `-` | Custom styles for the point. |
+| `styles` | `{ container?: CSSProperties; point?: CSSProperties \| undefined; } \| undefined` | No | `-` | Custom styles for the component. |
+| `suppressHydrationWarning` | `boolean` | No | `-` | - |
+| `surfaceScale` | `string \| number` | No | `-` | - |
+| `systemLanguage` | `string \| number` | No | `-` | - |
+| `tabIndex` | `number` | No | `-` | - |
+| `tableValues` | `string \| number` | No | `-` | - |
+| `target` | `string` | No | `-` | - |
+| `targetX` | `string \| number` | No | `-` | - |
+| `targetY` | `string \| number` | No | `-` | - |
+| `testID` | `string` | No | `-` | Used to locate this element in unit and end-to-end tests. Under the hood, testID translates to data-testid on Web. On Mobile, testID stays the same - testID |
+| `textAnchor` | `string` | No | `-` | - |
+| `textDecoration` | `string \| number` | No | `-` | - |
+| `textLength` | `string \| number` | No | `-` | - |
+| `textRendering` | `string \| number` | No | `-` | - |
+| `to` | `string \| number` | No | `-` | - |
+| `transform` | `string` | No | `-` | - |
+| `type` | `string` | No | `-` | - |
+| `u1` | `string \| number` | No | `-` | - |
+| `u2` | `string \| number` | No | `-` | - |
+| `underlinePosition` | `string \| number` | No | `-` | - |
+| `underlineThickness` | `string \| number` | No | `-` | - |
+| `unicode` | `string \| number` | No | `-` | - |
+| `unicodeBidi` | `string \| number` | No | `-` | - |
+| `unicodeRange` | `string \| number` | No | `-` | - |
+| `unitsPerEm` | `string \| number` | No | `-` | - |
+| `vAlphabetic` | `string \| number` | No | `-` | - |
+| `vHanging` | `string \| number` | No | `-` | - |
+| `vIdeographic` | `string \| number` | No | `-` | - |
+| `vMathematical` | `string \| number` | No | `-` | - |
+| `values` | `string` | No | `-` | - |
+| `vectorEffect` | `string \| number` | No | `-` | - |
+| `version` | `string` | No | `-` | - |
+| `vertAdvY` | `string \| number` | No | `-` | - |
+| `vertOriginX` | `string \| number` | No | `-` | - |
+| `vertOriginY` | `string \| number` | No | `-` | - |
+| `viewBox` | `string` | No | `-` | - |
+| `viewTarget` | `string \| number` | No | `-` | - |
+| `visibility` | `string \| number` | No | `-` | - |
+| `width` | `string \| number` | No | `-` | - |
+| `widths` | `string \| number` | No | `-` | - |
+| `wordSpacing` | `string \| number` | No | `-` | - |
+| `writingMode` | `string \| number` | No | `-` | - |
+| `x` | `string \| number` | No | `-` | - |
+| `x1` | `string \| number` | No | `-` | - |
+| `x2` | `string \| number` | No | `-` | - |
+| `xChannelSelector` | `string` | No | `-` | - |
+| `xHeight` | `string \| number` | No | `-` | - |
+| `xlinkActuate` | `string` | No | `-` | - |
+| `xlinkArcrole` | `string` | No | `-` | - |
+| `xlinkHref` | `string` | No | `-` | - |
+| `xlinkRole` | `string` | No | `-` | - |
+| `xlinkShow` | `string` | No | `-` | - |
+| `xlinkTitle` | `string` | No | `-` | - |
+| `xlinkType` | `string` | No | `-` | - |
+| `xmlBase` | `string` | No | `-` | - |
+| `xmlLang` | `string` | No | `-` | - |
+| `xmlSpace` | `string` | No | `-` | - |
+| `xmlns` | `string` | No | `-` | - |
+| `xmlnsXlink` | `string` | No | `-` | - |
+| `y` | `string \| number` | No | `-` | - |
+| `y1` | `string \| number` | No | `-` | - |
+| `y2` | `string \| number` | No | `-` | - |
+| `yAxisId` | `string` | No | `-` | Optional Y-axis id to specify which axis to plot along. Defaults to the first y-axis |
+| `yChannelSelector` | `string` | No | `-` | - |
+| `z` | `string \| number` | No | `-` | - |
+| `zoomAndPan` | `string` | No | `-` | - |
+
+

package/mcp-docs/web/components/PortalProvider.txt

@@ -0,0 +1,76 @@
+# PortalProvider
+
+A component that manages the rendering of portals for overlay components.
+
+## Import
+
+```tsx
+import { PortalProvider } from '@coinbase/cds-web/overlays/PortalProvider'
+```
+
+## Examples
+
+### Basic usage
+
+The PortalProvider component is typically used at the root of your application to manage overlay components:
+
+```tsx live
+function Example() {
+  return (
+    <PortalProvider>
+      <Box padding={4} bordered borderRadius={200}>
+        Your app content
+      </Box>
+    </PortalProvider>
+  );
+}
+```
+
+### Custom Portal Nodes
+
+You can disable the default portal rendering and use the PortalNodes component separately:
+
+```tsx live
+function Example() {
+  return (
+    <PortalProvider renderPortals={false}>
+      <Box padding={4} bordered borderRadius={200}>
+        Your app content
+      </Box>
+      <PortalNodes />
+    </PortalProvider>
+  );
+}
+```
+
+### Toast Example
+
+The PortalProvider's `toastBottomOffset` prop sets the default bottom offset for all toasts:
+
+```tsx live
+function Example() {
+  function ToastDemo() {
+    const toast = useToast();
+    return (
+      <Box padding={4} bordered borderRadius={200}>
+        <Button onClick={() => toast.show('This toast appears with a custom bottom offset (80px)')}>
+          Show Toast
+        </Button>
+      </Box>
+    );
+  }
+
+  return (
+    <PortalProvider toastBottomOffset={80}>
+      <ToastDemo />
+    </PortalProvider>
+  );
+}
+```
+
+## Props
+
+| Prop | Type | Required | Default | Description |
+| --- | --- | --- | --- | --- |
+
+