@coinbase/cds-mcp-server 8.50.0 → 8.52.0
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.
- package/CHANGELOG.md +8 -0
- package/mcp-docs/mobile/components/Avatar.txt +1 -1
- package/mcp-docs/mobile/components/AvatarButton.txt +1 -1
- package/mcp-docs/mobile/components/Banner.txt +2 -2
- package/mcp-docs/mobile/components/Box.txt +1 -1
- package/mcp-docs/mobile/components/BrowserBar.txt +1 -1
- package/mcp-docs/mobile/components/Button.txt +3 -3
- package/mcp-docs/mobile/components/Carousel.txt +1 -1
- package/mcp-docs/mobile/components/CellMedia.txt +2 -2
- package/mcp-docs/mobile/components/CheckboxCell.txt +1 -1
- package/mcp-docs/mobile/components/Chip.txt +1 -1
- package/mcp-docs/mobile/components/Coachmark.txt +1 -1
- package/mcp-docs/mobile/components/ContentCard.txt +1 -1
- package/mcp-docs/mobile/components/ContentCardBody.txt +1 -1
- package/mcp-docs/mobile/components/ContentCardFooter.txt +1 -1
- package/mcp-docs/mobile/components/ContentCardHeader.txt +1 -1
- package/mcp-docs/mobile/components/ContentCell.txt +1 -1
- package/mcp-docs/mobile/components/ControlGroup.txt +1 -1
- package/mcp-docs/mobile/components/DataCard.txt +1 -1
- package/mcp-docs/mobile/components/DateInput.txt +1 -1
- package/mcp-docs/mobile/components/DatePicker.txt +1 -1
- package/mcp-docs/mobile/components/Divider.txt +1 -1
- package/mcp-docs/mobile/components/DotSymbol.txt +1 -1
- package/mcp-docs/mobile/components/Fallback.txt +62 -9
- package/mcp-docs/mobile/components/HStack.txt +1 -1
- package/mcp-docs/mobile/components/Icon.txt +1 -1
- package/mcp-docs/mobile/components/IconButton.txt +2 -2
- package/mcp-docs/mobile/components/InputChip.txt +1 -1
- package/mcp-docs/mobile/components/Interactable.txt +1 -1
- package/mcp-docs/mobile/components/Link.txt +1 -1
- package/mcp-docs/mobile/components/ListCell.txt +1 -1
- package/mcp-docs/mobile/components/Lottie.txt +21 -5
- package/mcp-docs/mobile/components/LottieStatusAnimation.txt +3 -3
- package/mcp-docs/mobile/components/MediaCard.txt +1 -1
- package/mcp-docs/mobile/components/MediaChip.txt +1 -1
- package/mcp-docs/mobile/components/MessagingCard.txt +1 -1
- package/mcp-docs/mobile/components/MultiContentModule.txt +1 -1
- package/mcp-docs/mobile/components/NavigationTitle.txt +1 -1
- package/mcp-docs/mobile/components/NavigationTitleSelect.txt +1 -1
- package/mcp-docs/mobile/components/Numpad.txt +1 -1
- package/mcp-docs/mobile/components/Overlay.txt +1 -1
- package/mcp-docs/mobile/components/PageFooter.txt +1 -1
- package/mcp-docs/mobile/components/PageHeader.txt +1 -1
- package/mcp-docs/mobile/components/Pressable.txt +1 -1
- package/mcp-docs/mobile/components/RadioCell.txt +1 -1
- package/mcp-docs/mobile/components/RemoteImage.txt +1 -1
- package/mcp-docs/mobile/components/RollingNumber.txt +1 -1
- package/mcp-docs/mobile/components/Scrubber.txt +142 -0
- package/mcp-docs/mobile/components/SearchInput.txt +1 -1
- package/mcp-docs/mobile/components/SegmentedTabs.txt +1 -1
- package/mcp-docs/mobile/components/SelectChip.txt +1 -1
- package/mcp-docs/mobile/components/SlideButton.txt +1 -1
- package/mcp-docs/mobile/components/Stepper.txt +1 -1
- package/mcp-docs/mobile/components/TabLabel.txt +1 -1
- package/mcp-docs/mobile/components/TabNavigation.txt +1 -1
- package/mcp-docs/mobile/components/TabbedChips.txt +1 -1
- package/mcp-docs/mobile/components/Tabs.txt +1 -1
- package/mcp-docs/mobile/components/Tag.txt +3 -3
- package/mcp-docs/mobile/components/Text.txt +1 -1
- package/mcp-docs/mobile/components/TextInput.txt +1 -1
- package/mcp-docs/mobile/components/Toast.txt +1 -1
- package/mcp-docs/mobile/components/VStack.txt +1 -1
- package/mcp-docs/web/components/AvatarButton.txt +2 -2
- package/mcp-docs/web/components/Banner.txt +1 -1
- package/mcp-docs/web/components/Box.txt +2 -2
- package/mcp-docs/web/components/Button.txt +4 -4
- package/mcp-docs/web/components/CellMedia.txt +1 -1
- package/mcp-docs/web/components/ContentCard.txt +2 -2
- package/mcp-docs/web/components/ContentCardBody.txt +2 -2
- package/mcp-docs/web/components/ContentCardFooter.txt +2 -2
- package/mcp-docs/web/components/ContentCardHeader.txt +2 -2
- package/mcp-docs/web/components/ContentCell.txt +2 -2
- package/mcp-docs/web/components/DotSymbol.txt +1 -1
- package/mcp-docs/web/components/Fallback.txt +67 -10
- package/mcp-docs/web/components/Grid.txt +2 -2
- package/mcp-docs/web/components/GridColumn.txt +2 -2
- package/mcp-docs/web/components/HStack.txt +2 -2
- package/mcp-docs/web/components/Icon.txt +1 -1
- package/mcp-docs/web/components/IconButton.txt +3 -3
- package/mcp-docs/web/components/Interactable.txt +2 -2
- package/mcp-docs/web/components/Link.txt +2 -2
- package/mcp-docs/web/components/ListCell.txt +2 -2
- package/mcp-docs/web/components/Lottie.txt +8 -2
- package/mcp-docs/web/components/LottieStatusAnimation.txt +2 -2
- package/mcp-docs/web/components/MultiContentModule.txt +2 -2
- package/mcp-docs/web/components/Pressable.txt +2 -2
- package/mcp-docs/web/components/RollingNumber.txt +2 -2
- package/mcp-docs/web/components/Scrubber.txt +182 -0
- package/mcp-docs/web/components/SidebarItem.txt +1 -1
- package/mcp-docs/web/components/Spacer.txt +2 -2
- package/mcp-docs/web/components/TableCellFallback.txt +2 -2
- package/mcp-docs/web/components/Tag.txt +2 -2
- package/mcp-docs/web/components/Text.txt +2 -2
- package/mcp-docs/web/components/TileButton.txt +2 -2
- package/mcp-docs/web/components/Tooltip.txt +88 -1
- package/mcp-docs/web/components/VStack.txt +2 -2
- package/package.json +1 -1
|
@@ -252,7 +252,7 @@ An icon button with a badge showing the notification count. Uses `DotCount` to d
|
|
|
252
252
|
|
|
253
253
|
| Prop | Type | Required | Default | Description |
|
|
254
254
|
| --- | --- | --- | --- | --- |
|
|
255
|
-
| `name` | `key \| search \| pin \| filter \| visible \| continuous \| auto \| loop \| warning \| error \| account \| activity \| add \| addPeople \| advancedMarketSelector \| advancedTradeProduct \| affiliates \| airdrop \| airdropAlt \| airdropCoins \| airdropParachute \| alien \| allTimeHigh \| allocation \| annotation \| api \| apiPlug \| apothecary \| appSwitcher \| apple \| appleLogo \|
|
|
255
|
+
| `name` | `key \| search \| pin \| filter \| visible \| continuous \| auto \| loop \| image \| menu \| list \| application \| document \| grid \| group \| warning \| error \| account \| activity \| add \| addPeople \| advancedMarketSelector \| advancedTradeProduct \| affiliates \| airdrop \| airdropAlt \| airdropCoins \| airdropParachute \| alien \| allTimeHigh \| allocation \| annotation \| api \| apiPlug \| apothecary \| appSwitcher \| apple \| appleLogo \| arrowDown \| arrowLeft \| arrowRight \| arrowUp \| arrowsHorizontal \| arrowsUpDown \| arrowsVertical \| artwork \| assetHubProduct \| assetManagementProduct \| astronautHelmet \| atSign \| atomScience \| autoCar \| avatar \| average \| backArrow \| ballot \| ballotbox \| bandage \| bank \| barChartSimple \| barChartWindow \| base \| baseApps \| baseFeed \| baseNotification \| baseQuickBuy \| baseSquare \| baseTransact \| baseVerification \| baseWallet \| baseball \| basketball \| beaker \| beginningArrow \| bell \| bellCheck \| bellPlus \| birthcertificate \| block \| blockchain \| blog \| book \| bookmark \| borrowProduct \| boxing \| bridging \| briefcase \| briefcaseAlt \| browser \| bug \| building \| calculator \| calendar \| calendarBlank \| calendarDates \| calendarEmpty \| calendarHeart \| calendarMoney \| calendarStar \| camera \| candlesticks \| car \| card \| caret \| caretDown \| caretLeft \| caretRight \| caretUp \| cash \| cashAustralianDollar \| cashBrazilianReal \| cashBrazillianReal \| cashCanadianDollar \| cashCoins \| cashEUR \| cashGBP \| cashIndonesianRupiah \| cashJPY \| cashPhilippinePeso \| cashPolishZloty \| cashRupee \| cashSingaporeDollar \| cashSwissFranc \| cashThaiBaht \| cashTurkishLira \| cashUSD \| cashUaeDirham \| cashVietnameseDong \| chainLink \| chartBar \| chartCandles \| chartLine \| chartPie \| chartPieCircle \| chartVolume \| chatBotAgent \| chatBubble \| chatRequests \| checkboxChecked \| checkboxEmpty \| checkmark \| chess \| circleCheckmark \| circleCross \| circulatingSupply \| city \| clipboard \| clock \| clockOutline \| close \| closeCaption \| clothing \| cloud \| cloudPartial \| cloudProduct \| cluster \| coinbase \| coinbaseCardProduct \| coinbaseOne \| coinbaseOneCard \| coinbaseOneLogo \| coinbaseRewards \| coinsCrypto \| collapse \| collectibles \| collection \| comment \| commentPlus \| commerceProduct \| compass \| complianceProduct \| compose \| computerChip \| concierge \| conciergeBell \| config \| convert \| copy \| corporation \| creatorCoin \| cricket \| cross \| crossTrade \| crypto \| cryptobasics \| crystalBall \| crystalBallInsight \| currencies \| custodyProduct \| dashboard \| dataMarketplaceProduct \| dataStack \| defi \| delegateProduct \| deposit \| derivatives \| derivativesProduct \| derivativesProductNew \| developerAPIProduct \| developerPlatformProduct \| dex \| diagonalDownArrow \| diagonalRightArrow \| diagonalUpArrow \| diamond \| diamondIncentives \| dinnerPlate \| directDeposit \| directDepositIcon \| disabledPhone \| discordLogo \| distribution \| documentation \| dot \| doubleChevronRight \| downArrow \| download \| drag \| drops \| earn \| earnProduct \| earnRewards \| earthquake \| educationBook \| educationPencil \| email \| endArrow \| entertainment \| ethereum \| eventContracts \| exchangeProduct \| exclamationMark \| expand \| expandAddress \| expandAll \| externalLink \| eye \| faceScan \| faces \| factory \| faucet \| fib \| filmStrip \| filterLineStack \| fingerprint \| flame \| folder \| folderArrow \| folderOpen \| followAdd \| following \| football \| fork \| forwardArrow \| fscsProtection \| gab \| games \| gaming \| gasFees \| gasFeesAlt \| gauge \| gaugeEmpty \| gaugeHigh \| gaugeHighLow \| gaugeHighMid \| gaugeLow \| gaugeLowHigh \| gaugeLowMid \| gaugeMedium \| gavel \| gear \| generalCharacter \| ghost \| gif \| giftBox \| giftCard \| gitHubLogo \| globe \| golf \| googleLogo \| greenEnergy \| hamburger \| hammer \| heart \| helpCenterProduct \| helpCenterQuestionMark \| hiddenEye \| hockey \| home \| horizontalLine \| hospital \| hospitalCross \| hurricane \| ideal \| identityCard \| info \| initiator \| instagramLogo \| instantUnstakingClock \| institute \| institutionalProduct \| interest \| invisible \| invoice \| keyboard \| laptop \| leadChart \| leadCoin \| learningRewardsProduct \| light \| lightbulb \| lightning \| lightningBolt \| lineChartCrypto \| location \| lock \| login \| logout \| magnifyingGlass \| marketCap \| medal \| megaphone \| metaverse \| microphone \| microphoneCordless \| microscope \| mint \| minus \| mma \| moneyCardCoin \| moon \| more \| moreVertical \| motorsport \| music \| musicArticles \| needle \| newsFeed \| newsletter \| nft \| nftBuy \| nftOffer \| nftProduct \| nftSale \| noRocket \| noWifi \| nodeProduct \| oil \| options \| orderBook \| orderHistory \| outline \| pFPS \| paperAirplane \| paperclip \| participate \| participateProduct \| passKey \| passport \| pause \| pay \| payProduct \| paymentCard \| payments \| payouts \| paypal \| pencil \| peopleGroup \| peopleStar \| percentage \| perpetualSwap \| phone \| pieChartData \| pieChartWithArrow \| pillBottle \| pillCapsule \| plane \| planet \| play \| playbutton \| plusMinus \| podiumStar \| politicsBuilding \| politicsCandidate \| politicsFlag \| politicsGavel \| politicsPodium \| politicsStar \| powerTool \| priceAlerts \| priceAlertsCheck \| primePoduct \| privateClientProduct \| proProduct \| profile \| protection \| pulse \| pyramid \| qrCode \| qrCodeAlt \| queryTransact \| questionMark \| quotation \| rain \| ratingsCheck \| ratingsChecks \| ratingsStar \| reCenter \| rectangle \| recurring \| refresh \| regulated \| regulatedFutures \| report \| rewardsProduct \| ribbon \| robot \| rocket \| rocketShip \| rollingSpot \| rosettaProduct \| rottenTomato \| royalty \| safe \| save \| savingsBank \| scanQrCode \| scienceAtom \| scienceBeaker \| scienceMoon \| securityKey \| securityShield \| seen \| sendReceive \| setPinCode \| settings \| share \| shield \| shieldOutline \| shoe \| shoppingCart \| signinProduct \| singleCoin \| singleNote \| singlecloud \| smartContract \| snow \| soccer \| socialChat \| socialReshare \| socialShare \| sofort \| sortDoubleArrow \| sortDown \| sortDownCenter \| sortUp \| sortUpCenter \| soundOff \| soundOn \| sparkle \| speaker \| speechBubble \| stableCoin \| stablecoinStack \| staggeredList \| stake \| staking \| star \| starAward \| starBubble \| starTrophy \| statusDot \| step0 \| step1 \| step2 \| step3 \| step4 \| step5 \| step6 \| step7 \| step8 \| step9 \| strategy \| sun \| support \| tag \| taxes \| taxesReceipt \| telephone \| tennis \| test \| thermometer \| thumbsDown \| thumbsDownOutline \| thumbsUp \| thumbsUpOutline \| tokenLaunchCoin \| tokenLaunchRocket \| tokenSales \| tornado \| trading \| transactions \| trashCan \| trophy \| trophyCup \| tshirt \| tv \| tvStand \| twitterLogo \| ultility \| umbrella \| undo \| unfollowPeople \| unknown \| unlock \| upArrow \| upload \| usdc \| venturesProduct \| verifiedBadge \| verifiedPools \| verticalLine \| virus \| waasProduct \| wallet \| walletLogo \| walletProduct \| webhooks \| wellness \| wifi \| wind \| wireTransfer \| withdraw \| wrapToken \| xLogo` | Yes | `-` | Name of the icon, as defined in Figma. |
|
|
256
256
|
| `about` | `string \| undefined` | No | `-` | - |
|
|
257
257
|
| `accessKey` | `string \| undefined` | No | `-` | - |
|
|
258
258
|
| `active` | `boolean` | No | `-` | Whether the icon is active |
|
|
@@ -271,7 +271,7 @@ An icon button with a badge showing the notification count. Uses `DotCount` to d
|
|
|
271
271
|
| `aria-colindextext` | `string \| undefined` | No | `-` | Defines a human readable text alternative of aria-colindex. |
|
|
272
272
|
| `aria-colspan` | `number \| undefined` | No | `-` | Defines the number of columns spanned by a cell or gridcell within a table, grid, or treegrid. |
|
|
273
273
|
| `aria-controls` | `string \| undefined` | No | `-` | Identifies the element (or elements) whose contents or presence are controlled by the current element. |
|
|
274
|
-
| `aria-current` | `boolean \| time \|
|
|
274
|
+
| `aria-current` | `boolean \| time \| true \| false \| page \| step \| location \| date \| undefined` | No | `-` | Indicates the element that represents the current item within a container or set of related elements. |
|
|
275
275
|
| `aria-describedby` | `string \| undefined` | No | `-` | Identifies the element (or elements) that describes the object. |
|
|
276
276
|
| `aria-description` | `string \| undefined` | No | `-` | Defines a string value that describes or annotates the current element. |
|
|
277
277
|
| `aria-details` | `string \| undefined` | No | `-` | Identifies the element that provides a detailed, extended description for the object. |
|
|
@@ -397,7 +397,7 @@ An icon button with a badge showing the notification count. Uses `DotCount` to d
|
|
|
397
397
|
| `iconSize` | `xs \| s \| m \| l` | No | `compact ? 's' : 'm'` | Size for the icon rendered inside the button. |
|
|
398
398
|
| `id` | `string \| undefined` | No | `-` | - |
|
|
399
399
|
| `inlist` | `any` | No | `-` | - |
|
|
400
|
-
| `inputMode` | `search \| text \| none \|
|
|
400
|
+
| `inputMode` | `search \| text \| none \| tel \| url \| email \| numeric \| decimal \| undefined` | No | `-` | Hints at the type of data that might be entered by the user while editing the element or its contents |
|
|
401
401
|
| `is` | `string \| undefined` | No | `-` | Specify that a standard HTML element should behave like a defined custom built-in element |
|
|
402
402
|
| `itemID` | `string \| undefined` | No | `-` | - |
|
|
403
403
|
| `itemProp` | `string \| undefined` | No | `-` | - |
|
|
@@ -103,7 +103,7 @@ Since this component is low-level, it doesn't require much accessibility out of
|
|
|
103
103
|
| `aria-colindextext` | `string \| undefined` | No | `-` | Defines a human readable text alternative of aria-colindex. |
|
|
104
104
|
| `aria-colspan` | `number \| undefined` | No | `-` | Defines the number of columns spanned by a cell or gridcell within a table, grid, or treegrid. |
|
|
105
105
|
| `aria-controls` | `string \| undefined` | No | `-` | Identifies the element (or elements) whose contents or presence are controlled by the current element. |
|
|
106
|
-
| `aria-current` | `boolean \| time \|
|
|
106
|
+
| `aria-current` | `boolean \| time \| true \| false \| page \| step \| location \| date \| undefined` | No | `-` | Indicates the element that represents the current item within a container or set of related elements. |
|
|
107
107
|
| `aria-describedby` | `string \| undefined` | No | `-` | Identifies the element (or elements) that describes the object. |
|
|
108
108
|
| `aria-description` | `string \| undefined` | No | `-` | Defines a string value that describes or annotates the current element. |
|
|
109
109
|
| `aria-details` | `string \| undefined` | No | `-` | Identifies the element that provides a detailed, extended description for the object. |
|
|
@@ -225,7 +225,7 @@ Since this component is low-level, it doesn't require much accessibility out of
|
|
|
225
225
|
| `hidden` | `boolean \| undefined` | No | `-` | - |
|
|
226
226
|
| `id` | `string \| undefined` | No | `-` | - |
|
|
227
227
|
| `inlist` | `any` | No | `-` | - |
|
|
228
|
-
| `inputMode` | `search \| text \| none \|
|
|
228
|
+
| `inputMode` | `search \| text \| none \| tel \| url \| email \| numeric \| decimal \| undefined` | No | `-` | Hints at the type of data that might be entered by the user while editing the element or its contents |
|
|
229
229
|
| `is` | `string \| undefined` | No | `-` | Specify that a standard HTML element should behave like a defined custom built-in element |
|
|
230
230
|
| `itemID` | `string \| undefined` | No | `-` | - |
|
|
231
231
|
| `itemProp` | `string \| undefined` | No | `-` | - |
|
|
@@ -235,7 +235,7 @@ Use the `underline` prop on inline links within body text to ensure they are dis
|
|
|
235
235
|
| `aria-colindextext` | `string \| undefined` | No | `-` | Defines a human readable text alternative of aria-colindex. |
|
|
236
236
|
| `aria-colspan` | `number \| undefined` | No | `-` | Defines the number of columns spanned by a cell or gridcell within a table, grid, or treegrid. |
|
|
237
237
|
| `aria-controls` | `string \| undefined` | No | `-` | Identifies the element (or elements) whose contents or presence are controlled by the current element. |
|
|
238
|
-
| `aria-current` | `boolean \| time \|
|
|
238
|
+
| `aria-current` | `boolean \| time \| true \| false \| page \| step \| location \| date \| undefined` | No | `-` | Indicates the element that represents the current item within a container or set of related elements. |
|
|
239
239
|
| `aria-describedby` | `string \| undefined` | No | `-` | Identifies the element (or elements) that describes the object. |
|
|
240
240
|
| `aria-description` | `string \| undefined` | No | `-` | Defines a string value that describes or annotates the current element. |
|
|
241
241
|
| `aria-details` | `string \| undefined` | No | `-` | Identifies the element that provides a detailed, extended description for the object. |
|
|
@@ -355,7 +355,7 @@ Use the `underline` prop on inline links within body text to ensure they are dis
|
|
|
355
355
|
| `hrefLang` | `string \| undefined` | No | `-` | - |
|
|
356
356
|
| `id` | `string \| undefined` | No | `-` | - |
|
|
357
357
|
| `inlist` | `any` | No | `-` | - |
|
|
358
|
-
| `inputMode` | `search \| text \| none \|
|
|
358
|
+
| `inputMode` | `search \| text \| none \| tel \| url \| email \| numeric \| decimal \| undefined` | No | `-` | Hints at the type of data that might be entered by the user while editing the element or its contents |
|
|
359
359
|
| `is` | `string \| undefined` | No | `-` | Specify that a standard HTML element should behave like a defined custom built-in element |
|
|
360
360
|
| `itemID` | `string \| undefined` | No | `-` | - |
|
|
361
361
|
| `itemProp` | `string \| undefined` | No | `-` | - |
|
|
@@ -667,7 +667,7 @@ Mapping to `styles` / `classNames` keys:
|
|
|
667
667
|
| `aria-colindextext` | `string \| undefined` | No | `-` | Defines a human readable text alternative of aria-colindex. |
|
|
668
668
|
| `aria-colspan` | `number \| undefined` | No | `-` | Defines the number of columns spanned by a cell or gridcell within a table, grid, or treegrid. |
|
|
669
669
|
| `aria-controls` | `string \| undefined` | No | `-` | Identifies the element (or elements) whose contents or presence are controlled by the current element. |
|
|
670
|
-
| `aria-current` | `boolean \| time \|
|
|
670
|
+
| `aria-current` | `boolean \| time \| true \| false \| page \| step \| location \| date \| undefined` | No | `-` | Indicates the element that represents the current item within a container or set of related elements. |
|
|
671
671
|
| `aria-describedby` | `string \| undefined` | No | `-` | Identifies the element (or elements) that describes the object. |
|
|
672
672
|
| `aria-description` | `string \| undefined` | No | `-` | Defines a string value that describes or annotates the current element. |
|
|
673
673
|
| `aria-details` | `string \| undefined` | No | `-` | Identifies the element that provides a detailed, extended description for the object. |
|
|
@@ -795,7 +795,7 @@ Mapping to `styles` / `classNames` keys:
|
|
|
795
795
|
| `id` | `string \| undefined` | No | `-` | - |
|
|
796
796
|
| `inlist` | `any` | No | `-` | - |
|
|
797
797
|
| `innerSpacing` | `CellSpacing` | No | `-` | The spacing to use on the inner content of Cell |
|
|
798
|
-
| `inputMode` | `search \| text \| none \|
|
|
798
|
+
| `inputMode` | `search \| text \| none \| tel \| url \| email \| numeric \| decimal \| undefined` | No | `-` | Hints at the type of data that might be entered by the user while editing the element or its contents |
|
|
799
799
|
| `intermediary` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | For internal use only. |
|
|
800
800
|
| `is` | `string \| undefined` | No | `-` | Specify that a standard HTML element should behave like a defined custom built-in element |
|
|
801
801
|
| `itemID` | `string \| undefined` | No | `-` | - |
|
|
@@ -56,10 +56,12 @@ function BasicExample() {
|
|
|
56
56
|
| Prop | Type | Required | Default | Description |
|
|
57
57
|
| --- | --- | --- | --- | --- |
|
|
58
58
|
| `source` | `LottieSource<string>` | Yes | `-` | The source of animation. Should be pulled from |
|
|
59
|
+
| `alignContent` | `ResponsiveProp<center \| normal \| start \| end \| flex-start \| flex-end \| stretch \| baseline \| first baseline \| last baseline \| space-between \| space-around \| space-evenly>` | No | `-` | - |
|
|
59
60
|
| `alignItems` | `ResponsiveProp<center \| normal \| start \| end \| flex-start \| flex-end \| self-start \| self-end \| stretch \| baseline \| first baseline \| last baseline>` | No | `-` | - |
|
|
60
61
|
| `alignSelf` | `ResponsiveProp<center \| normal \| auto \| start \| end \| flex-start \| flex-end \| self-start \| self-end \| stretch \| baseline \| first baseline \| last baseline>` | No | `-` | - |
|
|
62
|
+
| `as` | `div` | No | `-` | The underlying element or component the polymorphic component will render. Changing as also changes the inherited native props (e.g. href for as=a) and the expected ref type. |
|
|
61
63
|
| `aspectRatio` | `inherit \| auto \| revert \| -moz-initial \| initial \| revert-layer \| unset` | No | `-` | - |
|
|
62
|
-
| `autoplay` | `boolean` | No |
|
|
64
|
+
| `autoplay` | `boolean` | No | `-` | A boolean flag indicating whether or not the animation should start automatically when mounted. This only affects the imperative API. |
|
|
63
65
|
| `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 | `-` | - |
|
|
64
66
|
| `borderBottomLeftRadius` | `0 \| 100 \| 200 \| 300 \| 400 \| 500 \| 600 \| 700 \| 800 \| 900 \| 1000` | No | `-` | - |
|
|
65
67
|
| `borderBottomRightRadius` | `0 \| 100 \| 200 \| 300 \| 400 \| 500 \| 600 \| 700 \| 800 \| 900 \| 1000` | No | `-` | - |
|
|
@@ -87,8 +89,10 @@ function BasicExample() {
|
|
|
87
89
|
| `elevation` | `0 \| 1 \| 2` | No | `-` | - |
|
|
88
90
|
| `filterSize` | `FilterSizeConfig` | No | `-` | In order to render drop shadows, the filter size needs to be set to increase the render surface of the element. You can set the x, y, width and height of filters manually. |
|
|
89
91
|
| `flexBasis` | `ResponsiveProp<FlexBasis<string \| number>>` | No | `-` | - |
|
|
92
|
+
| `flexDirection` | `ResponsiveProp<column \| row \| row-reverse \| column-reverse>` | No | `-` | - |
|
|
90
93
|
| `flexGrow` | `inherit \| revert \| -moz-initial \| initial \| revert-layer \| unset` | No | `-` | - |
|
|
91
94
|
| `flexShrink` | `inherit \| revert \| -moz-initial \| initial \| revert-layer \| unset` | No | `-` | - |
|
|
95
|
+
| `flexWrap` | `ResponsiveProp<nowrap \| wrap \| wrap-reverse>` | No | `-` | - |
|
|
92
96
|
| `font` | `ResponsiveProp<FontFamily \| inherit>` | No | `-` | - |
|
|
93
97
|
| `fontFamily` | `ResponsiveProp<FontFamily \| inherit>` | No | `-` | - |
|
|
94
98
|
| `fontSize` | `ResponsiveProp<FontSize \| inherit>` | No | `-` | - |
|
|
@@ -111,10 +115,11 @@ function BasicExample() {
|
|
|
111
115
|
| `gridTemplateRows` | `ResponsiveProp<GridTemplateRows<string \| number>>` | No | `-` | - |
|
|
112
116
|
| `handlers` | `LottieEventHandlersMap` | No | `-` | - |
|
|
113
117
|
| `height` | `ResponsiveProp<Height<string \| number>>` | No | `-` | - |
|
|
118
|
+
| `justifyContent` | `ResponsiveProp<left \| right \| center \| normal \| start \| end \| flex-start \| flex-end \| stretch \| space-between \| space-around \| space-evenly>` | No | `-` | - |
|
|
114
119
|
| `key` | `Key \| null` | No | `-` | - |
|
|
115
120
|
| `left` | `ResponsiveProp<Left<string \| number>>` | No | `-` | - |
|
|
116
121
|
| `lineHeight` | `ResponsiveProp<LineHeight \| inherit>` | No | `-` | - |
|
|
117
|
-
| `loop` | `boolean` | No |
|
|
122
|
+
| `loop` | `boolean` | No | `-` | A boolean flag indicating whether or not the animation should loop. |
|
|
118
123
|
| `margin` | `ResponsiveProp<0 \| -5 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1 \| -1.5 \| -2 \| -3 \| -4 \| -6 \| -7 \| -8 \| -9>` | No | `-` | - |
|
|
119
124
|
| `marginBottom` | `ResponsiveProp<0 \| -5 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1 \| -1.5 \| -2 \| -3 \| -4 \| -6 \| -7 \| -8 \| -9>` | No | `-` | - |
|
|
120
125
|
| `marginEnd` | `ResponsiveProp<0 \| -5 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1 \| -1.5 \| -2 \| -3 \| -4 \| -6 \| -7 \| -8 \| -9>` | No | `-` | - |
|
|
@@ -127,6 +132,7 @@ function BasicExample() {
|
|
|
127
132
|
| `minHeight` | `ResponsiveProp<MinHeight<string \| number>>` | No | `-` | - |
|
|
128
133
|
| `minWidth` | `ResponsiveProp<MinWidth<string \| number>>` | No | `-` | - |
|
|
129
134
|
| `onAnimationFinish` | `(() => void)` | No | `-` | A callback function which will be called when animation is finished. Note that on mobile, this callback will be called only when loop is set to false. |
|
|
135
|
+
| `onChange` | `FormEventHandler<HTMLDivElement>` | No | `-` | - |
|
|
130
136
|
| `opacity` | `inherit \| revert \| -moz-initial \| initial \| revert-layer \| unset` | No | `-` | - |
|
|
131
137
|
| `overflow` | `ResponsiveProp<hidden \| auto \| visible \| clip \| scroll>` | No | `-` | - |
|
|
132
138
|
| `padding` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
|
|
@@ -48,8 +48,8 @@ function Example() {
|
|
|
48
48
|
|
|
49
49
|
| Prop | Type | Required | Default | Description |
|
|
50
50
|
| --- | --- | --- | --- | --- |
|
|
51
|
-
| `height` | `string \| number` | Yes | `-` |
|
|
52
|
-
| `width` | `string \| number` | Yes | `-` |
|
|
51
|
+
| `height` | `string \| number` | Yes | `-` | - |
|
|
52
|
+
| `width` | `string \| number` | Yes | `-` | - |
|
|
53
53
|
| `onFinish` | `(() => void)` | No | `-` | - |
|
|
54
54
|
| `status` | `loading \| success \| cardSuccess \| failure \| pending` | No | `-` | - |
|
|
55
55
|
| `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 |
|
|
@@ -294,7 +294,7 @@ function Example() {
|
|
|
294
294
|
| `aria-colindextext` | `string \| undefined` | No | `-` | Defines a human readable text alternative of aria-colindex. |
|
|
295
295
|
| `aria-colspan` | `number \| undefined` | No | `-` | Defines the number of columns spanned by a cell or gridcell within a table, grid, or treegrid. |
|
|
296
296
|
| `aria-controls` | `string \| undefined` | No | `-` | Identifies the element (or elements) whose contents or presence are controlled by the current element. |
|
|
297
|
-
| `aria-current` | `boolean \| time \|
|
|
297
|
+
| `aria-current` | `boolean \| time \| true \| false \| page \| step \| location \| date \| undefined` | No | `-` | Indicates the element that represents the current item within a container or set of related elements. |
|
|
298
298
|
| `aria-describedby` | `string \| undefined` | No | `-` | Identifies the element (or elements) that describes the object. |
|
|
299
299
|
| `aria-description` | `string \| undefined` | No | `-` | Defines a string value that describes or annotates the current element. |
|
|
300
300
|
| `aria-details` | `string \| undefined` | No | `-` | Identifies the element that provides a detailed, extended description for the object. |
|
|
@@ -409,7 +409,7 @@ function Example() {
|
|
|
409
409
|
| `hidden` | `boolean \| undefined` | No | `-` | - |
|
|
410
410
|
| `id` | `string \| undefined` | No | `-` | - |
|
|
411
411
|
| `inlist` | `any` | No | `-` | - |
|
|
412
|
-
| `inputMode` | `search \| text \| none \|
|
|
412
|
+
| `inputMode` | `search \| text \| none \| tel \| url \| email \| numeric \| decimal \| undefined` | No | `-` | Hints at the type of data that might be entered by the user while editing the element or its contents |
|
|
413
413
|
| `is` | `string \| undefined` | No | `-` | Specify that a standard HTML element should behave like a defined custom built-in element |
|
|
414
414
|
| `itemID` | `string \| undefined` | No | `-` | - |
|
|
415
415
|
| `itemProp` | `string \| undefined` | No | `-` | - |
|
|
@@ -101,7 +101,7 @@ On web, all [ARIA attributes](https://developer.mozilla.org/en-US/docs/Web/Acces
|
|
|
101
101
|
| `aria-colindextext` | `string \| undefined` | No | `-` | Defines a human readable text alternative of aria-colindex. |
|
|
102
102
|
| `aria-colspan` | `number \| undefined` | No | `-` | Defines the number of columns spanned by a cell or gridcell within a table, grid, or treegrid. |
|
|
103
103
|
| `aria-controls` | `string \| undefined` | No | `-` | Identifies the element (or elements) whose contents or presence are controlled by the current element. |
|
|
104
|
-
| `aria-current` | `boolean \| time \|
|
|
104
|
+
| `aria-current` | `boolean \| time \| true \| false \| page \| step \| location \| date \| undefined` | No | `-` | Indicates the element that represents the current item within a container or set of related elements. |
|
|
105
105
|
| `aria-describedby` | `string \| undefined` | No | `-` | Identifies the element (or elements) that describes the object. |
|
|
106
106
|
| `aria-description` | `string \| undefined` | No | `-` | Defines a string value that describes or annotates the current element. |
|
|
107
107
|
| `aria-details` | `string \| undefined` | No | `-` | Identifies the element that provides a detailed, extended description for the object. |
|
|
@@ -224,7 +224,7 @@ On web, all [ARIA attributes](https://developer.mozilla.org/en-US/docs/Web/Acces
|
|
|
224
224
|
| `hidden` | `boolean \| undefined` | No | `-` | - |
|
|
225
225
|
| `id` | `string \| undefined` | No | `-` | - |
|
|
226
226
|
| `inlist` | `any` | No | `-` | - |
|
|
227
|
-
| `inputMode` | `search \| text \| none \|
|
|
227
|
+
| `inputMode` | `search \| text \| none \| tel \| url \| email \| numeric \| decimal \| undefined` | No | `-` | Hints at the type of data that might be entered by the user while editing the element or its contents |
|
|
228
228
|
| `is` | `string \| undefined` | No | `-` | Specify that a standard HTML element should behave like a defined custom built-in element |
|
|
229
229
|
| `itemID` | `string \| undefined` | No | `-` | - |
|
|
230
230
|
| `itemProp` | `string \| undefined` | No | `-` | - |
|
|
@@ -1024,7 +1024,7 @@ ValueSection
|
|
|
1024
1024
|
| `aria-colindextext` | `string \| undefined` | No | `-` | Defines a human readable text alternative of aria-colindex. |
|
|
1025
1025
|
| `aria-colspan` | `number \| undefined` | No | `-` | Defines the number of columns spanned by a cell or gridcell within a table, grid, or treegrid. |
|
|
1026
1026
|
| `aria-controls` | `string \| undefined` | No | `-` | Identifies the element (or elements) whose contents or presence are controlled by the current element. |
|
|
1027
|
-
| `aria-current` | `boolean \| time \|
|
|
1027
|
+
| `aria-current` | `boolean \| time \| true \| false \| page \| step \| location \| date \| undefined` | No | `-` | Indicates the element that represents the current item within a container or set of related elements. |
|
|
1028
1028
|
| `aria-describedby` | `string \| undefined` | No | `-` | Identifies the element (or elements) that describes the object. |
|
|
1029
1029
|
| `aria-description` | `string \| undefined` | No | `-` | Defines a string value that describes or annotates the current element. |
|
|
1030
1030
|
| `aria-details` | `string \| undefined` | No | `-` | Identifies the element that provides a detailed, extended description for the object. |
|
|
@@ -1146,7 +1146,7 @@ ValueSection
|
|
|
1146
1146
|
| `hidden` | `boolean \| undefined` | No | `-` | - |
|
|
1147
1147
|
| `id` | `string \| undefined` | No | `-` | - |
|
|
1148
1148
|
| `inlist` | `any` | No | `-` | - |
|
|
1149
|
-
| `inputMode` | `search \| text \| none \|
|
|
1149
|
+
| `inputMode` | `search \| text \| none \| tel \| url \| email \| numeric \| decimal \| undefined` | No | `-` | Hints at the type of data that might be entered by the user while editing the element or its contents |
|
|
1150
1150
|
| `is` | `string \| undefined` | No | `-` | Specify that a standard HTML element should behave like a defined custom built-in element |
|
|
1151
1151
|
| `itemID` | `string \| undefined` | No | `-` | - |
|
|
1152
1152
|
| `itemProp` | `string \| undefined` | No | `-` | - |
|
|
@@ -724,6 +724,188 @@ function PercentageBeaconLabels() {
|
|
|
724
724
|
}
|
|
725
725
|
```
|
|
726
726
|
|
|
727
|
+
#### Multi Line Beacon Label
|
|
728
|
+
|
|
729
|
+
You can use a custom `BeaconLabelComponent` to render each beacon label as two lines (team name + percentage).
|
|
730
|
+
|
|
731
|
+
```jsx live
|
|
732
|
+
function MatchupBeaconLabels() {
|
|
733
|
+
const matchupBlueData = [
|
|
734
|
+
47, 50, 51, 52, 53, 53, 53, 53, 52, 51, 51, 52, 53, 55, 57, 58, 59, 61, 63, 65, 64, 64, 64, 64,
|
|
735
|
+
64, 63, 63, 63, 64, 66, 68, 70, 71, 72, 74, 76, 76, 75, 74, 73, 74, 75, 75, 78,
|
|
736
|
+
];
|
|
737
|
+
const matchupRedData = matchupBlueData.map((value) => 100 - value);
|
|
738
|
+
const matchupTeamLabels = {
|
|
739
|
+
blue: 'BLUE',
|
|
740
|
+
red: 'RED',
|
|
741
|
+
};
|
|
742
|
+
|
|
743
|
+
const TeamBeaconLabel = memo(
|
|
744
|
+
({
|
|
745
|
+
color = 'var(--color-fgPrimary)',
|
|
746
|
+
teamLabel,
|
|
747
|
+
percentageLabel,
|
|
748
|
+
transition,
|
|
749
|
+
x,
|
|
750
|
+
y,
|
|
751
|
+
dx,
|
|
752
|
+
horizontalAlignment,
|
|
753
|
+
onDimensionsChange,
|
|
754
|
+
...chartTextProps
|
|
755
|
+
}) => {
|
|
756
|
+
const teamLabelDimensionsRef = useRef(null);
|
|
757
|
+
const percentageLabelDimensionsRef = useRef(null);
|
|
758
|
+
|
|
759
|
+
const emitCombinedDimensions = useCallback(() => {
|
|
760
|
+
if (!onDimensionsChange) {
|
|
761
|
+
return;
|
|
762
|
+
}
|
|
763
|
+
|
|
764
|
+
const teamRect = teamLabelDimensionsRef.current;
|
|
765
|
+
const percentageRect = percentageLabelDimensionsRef.current;
|
|
766
|
+
|
|
767
|
+
if (!teamRect || !percentageRect) {
|
|
768
|
+
return;
|
|
769
|
+
}
|
|
770
|
+
|
|
771
|
+
const minX = Math.min(teamRect.x, percentageRect.x);
|
|
772
|
+
const minY = Math.min(teamRect.y, percentageRect.y);
|
|
773
|
+
const maxX = Math.max(teamRect.x + teamRect.width, percentageRect.x + percentageRect.width);
|
|
774
|
+
const maxY = Math.max(
|
|
775
|
+
teamRect.y + teamRect.height,
|
|
776
|
+
percentageRect.y + percentageRect.height,
|
|
777
|
+
);
|
|
778
|
+
|
|
779
|
+
onDimensionsChange({
|
|
780
|
+
x: minX,
|
|
781
|
+
y: minY,
|
|
782
|
+
width: maxX - minX,
|
|
783
|
+
height: maxY - minY,
|
|
784
|
+
});
|
|
785
|
+
}, [onDimensionsChange]);
|
|
786
|
+
|
|
787
|
+
const handleTeamLabelDimensionsChange = useCallback(
|
|
788
|
+
(rect) => {
|
|
789
|
+
teamLabelDimensionsRef.current = rect;
|
|
790
|
+
emitCombinedDimensions();
|
|
791
|
+
},
|
|
792
|
+
[emitCombinedDimensions],
|
|
793
|
+
);
|
|
794
|
+
|
|
795
|
+
const handlePercentageLabelDimensionsChange = useCallback(
|
|
796
|
+
(rect) => {
|
|
797
|
+
percentageLabelDimensionsRef.current = rect;
|
|
798
|
+
emitCombinedDimensions();
|
|
799
|
+
},
|
|
800
|
+
[emitCombinedDimensions],
|
|
801
|
+
);
|
|
802
|
+
|
|
803
|
+
return (
|
|
804
|
+
<m.g animate={{ y }} initial={false} transition={transition}>
|
|
805
|
+
<ChartText
|
|
806
|
+
disableRepositioning
|
|
807
|
+
color={color}
|
|
808
|
+
dx={dx}
|
|
809
|
+
font="legal"
|
|
810
|
+
horizontalAlignment={horizontalAlignment}
|
|
811
|
+
onDimensionsChange={handleTeamLabelDimensionsChange}
|
|
812
|
+
verticalAlignment="bottom"
|
|
813
|
+
x={x}
|
|
814
|
+
y={transition ? 0 : y}
|
|
815
|
+
{...chartTextProps}
|
|
816
|
+
>
|
|
817
|
+
{teamLabel}
|
|
818
|
+
</ChartText>
|
|
819
|
+
<ChartText
|
|
820
|
+
disableRepositioning
|
|
821
|
+
color={color}
|
|
822
|
+
dx={dx}
|
|
823
|
+
font="title3"
|
|
824
|
+
horizontalAlignment={horizontalAlignment}
|
|
825
|
+
onDimensionsChange={handlePercentageLabelDimensionsChange}
|
|
826
|
+
verticalAlignment="top"
|
|
827
|
+
x={x}
|
|
828
|
+
y={transition ? 0 : y}
|
|
829
|
+
>
|
|
830
|
+
{percentageLabel}
|
|
831
|
+
</ChartText>
|
|
832
|
+
</m.g>
|
|
833
|
+
);
|
|
834
|
+
},
|
|
835
|
+
);
|
|
836
|
+
|
|
837
|
+
const MatchupScrubberBeaconLabel = memo(({ seriesId, color, ...props }) => {
|
|
838
|
+
const { getSeriesData, dataLength } = useCartesianChartContext();
|
|
839
|
+
const { scrubberPosition } = useScrubberContext();
|
|
840
|
+
|
|
841
|
+
const seriesData = useMemo(
|
|
842
|
+
() => getLineData(getSeriesData(seriesId)),
|
|
843
|
+
[getSeriesData, seriesId],
|
|
844
|
+
);
|
|
845
|
+
|
|
846
|
+
const dataIndex = useMemo(() => {
|
|
847
|
+
return scrubberPosition ?? Math.max(0, dataLength - 1);
|
|
848
|
+
}, [scrubberPosition, dataLength]);
|
|
849
|
+
|
|
850
|
+
const teamLabel = matchupTeamLabels[seriesId] ?? String(seriesId).toUpperCase();
|
|
851
|
+
|
|
852
|
+
const value = useMemo(() => {
|
|
853
|
+
if (seriesData === undefined) {
|
|
854
|
+
return null;
|
|
855
|
+
}
|
|
856
|
+
|
|
857
|
+
return seriesData[dataIndex];
|
|
858
|
+
}, [dataIndex, seriesData]);
|
|
859
|
+
|
|
860
|
+
return (
|
|
861
|
+
<TeamBeaconLabel
|
|
862
|
+
{...props}
|
|
863
|
+
color={color}
|
|
864
|
+
percentageLabel={`${value ?? 0}%`}
|
|
865
|
+
seriesId={seriesId}
|
|
866
|
+
teamLabel={teamLabel}
|
|
867
|
+
/>
|
|
868
|
+
);
|
|
869
|
+
});
|
|
870
|
+
|
|
871
|
+
return (
|
|
872
|
+
<LineChart
|
|
873
|
+
enableScrubbing
|
|
874
|
+
showArea
|
|
875
|
+
areaType="dotted"
|
|
876
|
+
height={250}
|
|
877
|
+
series={[
|
|
878
|
+
{
|
|
879
|
+
id: 'blue',
|
|
880
|
+
data: matchupBlueData,
|
|
881
|
+
color: 'rgb(var(--blue50))',
|
|
882
|
+
label: 'BLUE',
|
|
883
|
+
},
|
|
884
|
+
{
|
|
885
|
+
id: 'red',
|
|
886
|
+
data: matchupRedData,
|
|
887
|
+
color: 'rgb(var(--red50))',
|
|
888
|
+
label: 'RED',
|
|
889
|
+
},
|
|
890
|
+
]}
|
|
891
|
+
xAxis={{
|
|
892
|
+
range: ({ min, max }) => ({ min, max: max - 64 }),
|
|
893
|
+
}}
|
|
894
|
+
yAxis={{
|
|
895
|
+
domain: { min: 0, max: 100 },
|
|
896
|
+
}}
|
|
897
|
+
>
|
|
898
|
+
<Scrubber
|
|
899
|
+
idlePulse
|
|
900
|
+
BeaconLabelComponent={MatchupScrubberBeaconLabel}
|
|
901
|
+
beaconLabelHorizontalOffset={16}
|
|
902
|
+
beaconLabelPreferredSide="right"
|
|
903
|
+
/>
|
|
904
|
+
</LineChart>
|
|
905
|
+
);
|
|
906
|
+
}
|
|
907
|
+
```
|
|
908
|
+
|
|
727
909
|
## Props
|
|
728
910
|
|
|
729
911
|
| Prop | Type | Required | Default | Description |
|
|
@@ -230,7 +230,7 @@ function Accessibility() {
|
|
|
230
230
|
|
|
231
231
|
| Prop | Type | Required | Default | Description |
|
|
232
232
|
| --- | --- | --- | --- | --- |
|
|
233
|
-
| `icon` | `key \| search \| pin \| filter \| visible \| continuous \| auto \| loop \| warning \| error \| account \| activity \| add \| addPeople \| advancedMarketSelector \| advancedTradeProduct \| affiliates \| airdrop \| airdropAlt \| airdropCoins \| airdropParachute \| alien \| allTimeHigh \| allocation \| annotation \| api \| apiPlug \| apothecary \| appSwitcher \| apple \| appleLogo \|
|
|
233
|
+
| `icon` | `key \| search \| pin \| filter \| visible \| continuous \| auto \| loop \| image \| menu \| list \| application \| document \| grid \| group \| warning \| error \| account \| activity \| add \| addPeople \| advancedMarketSelector \| advancedTradeProduct \| affiliates \| airdrop \| airdropAlt \| airdropCoins \| airdropParachute \| alien \| allTimeHigh \| allocation \| annotation \| api \| apiPlug \| apothecary \| appSwitcher \| apple \| appleLogo \| arrowDown \| arrowLeft \| arrowRight \| arrowUp \| arrowsHorizontal \| arrowsUpDown \| arrowsVertical \| artwork \| assetHubProduct \| assetManagementProduct \| astronautHelmet \| atSign \| atomScience \| autoCar \| avatar \| average \| backArrow \| ballot \| ballotbox \| bandage \| bank \| barChartSimple \| barChartWindow \| base \| baseApps \| baseFeed \| baseNotification \| baseQuickBuy \| baseSquare \| baseTransact \| baseVerification \| baseWallet \| baseball \| basketball \| beaker \| beginningArrow \| bell \| bellCheck \| bellPlus \| birthcertificate \| block \| blockchain \| blog \| book \| bookmark \| borrowProduct \| boxing \| bridging \| briefcase \| briefcaseAlt \| browser \| bug \| building \| calculator \| calendar \| calendarBlank \| calendarDates \| calendarEmpty \| calendarHeart \| calendarMoney \| calendarStar \| camera \| candlesticks \| car \| card \| caret \| caretDown \| caretLeft \| caretRight \| caretUp \| cash \| cashAustralianDollar \| cashBrazilianReal \| cashBrazillianReal \| cashCanadianDollar \| cashCoins \| cashEUR \| cashGBP \| cashIndonesianRupiah \| cashJPY \| cashPhilippinePeso \| cashPolishZloty \| cashRupee \| cashSingaporeDollar \| cashSwissFranc \| cashThaiBaht \| cashTurkishLira \| cashUSD \| cashUaeDirham \| cashVietnameseDong \| chainLink \| chartBar \| chartCandles \| chartLine \| chartPie \| chartPieCircle \| chartVolume \| chatBotAgent \| chatBubble \| chatRequests \| checkboxChecked \| checkboxEmpty \| checkmark \| chess \| circleCheckmark \| circleCross \| circulatingSupply \| city \| clipboard \| clock \| clockOutline \| close \| closeCaption \| clothing \| cloud \| cloudPartial \| cloudProduct \| cluster \| coinbase \| coinbaseCardProduct \| coinbaseOne \| coinbaseOneCard \| coinbaseOneLogo \| coinbaseRewards \| coinsCrypto \| collapse \| collectibles \| collection \| comment \| commentPlus \| commerceProduct \| compass \| complianceProduct \| compose \| computerChip \| concierge \| conciergeBell \| config \| convert \| copy \| corporation \| creatorCoin \| cricket \| cross \| crossTrade \| crypto \| cryptobasics \| crystalBall \| crystalBallInsight \| currencies \| custodyProduct \| dashboard \| dataMarketplaceProduct \| dataStack \| defi \| delegateProduct \| deposit \| derivatives \| derivativesProduct \| derivativesProductNew \| developerAPIProduct \| developerPlatformProduct \| dex \| diagonalDownArrow \| diagonalRightArrow \| diagonalUpArrow \| diamond \| diamondIncentives \| dinnerPlate \| directDeposit \| directDepositIcon \| disabledPhone \| discordLogo \| distribution \| documentation \| dot \| doubleChevronRight \| downArrow \| download \| drag \| drops \| earn \| earnProduct \| earnRewards \| earthquake \| educationBook \| educationPencil \| email \| endArrow \| entertainment \| ethereum \| eventContracts \| exchangeProduct \| exclamationMark \| expand \| expandAddress \| expandAll \| externalLink \| eye \| faceScan \| faces \| factory \| faucet \| fib \| filmStrip \| filterLineStack \| fingerprint \| flame \| folder \| folderArrow \| folderOpen \| followAdd \| following \| football \| fork \| forwardArrow \| fscsProtection \| gab \| games \| gaming \| gasFees \| gasFeesAlt \| gauge \| gaugeEmpty \| gaugeHigh \| gaugeHighLow \| gaugeHighMid \| gaugeLow \| gaugeLowHigh \| gaugeLowMid \| gaugeMedium \| gavel \| gear \| generalCharacter \| ghost \| gif \| giftBox \| giftCard \| gitHubLogo \| globe \| golf \| googleLogo \| greenEnergy \| hamburger \| hammer \| heart \| helpCenterProduct \| helpCenterQuestionMark \| hiddenEye \| hockey \| home \| horizontalLine \| hospital \| hospitalCross \| hurricane \| ideal \| identityCard \| info \| initiator \| instagramLogo \| instantUnstakingClock \| institute \| institutionalProduct \| interest \| invisible \| invoice \| keyboard \| laptop \| leadChart \| leadCoin \| learningRewardsProduct \| light \| lightbulb \| lightning \| lightningBolt \| lineChartCrypto \| location \| lock \| login \| logout \| magnifyingGlass \| marketCap \| medal \| megaphone \| metaverse \| microphone \| microphoneCordless \| microscope \| mint \| minus \| mma \| moneyCardCoin \| moon \| more \| moreVertical \| motorsport \| music \| musicArticles \| needle \| newsFeed \| newsletter \| nft \| nftBuy \| nftOffer \| nftProduct \| nftSale \| noRocket \| noWifi \| nodeProduct \| oil \| options \| orderBook \| orderHistory \| outline \| pFPS \| paperAirplane \| paperclip \| participate \| participateProduct \| passKey \| passport \| pause \| pay \| payProduct \| paymentCard \| payments \| payouts \| paypal \| pencil \| peopleGroup \| peopleStar \| percentage \| perpetualSwap \| phone \| pieChartData \| pieChartWithArrow \| pillBottle \| pillCapsule \| plane \| planet \| play \| playbutton \| plusMinus \| podiumStar \| politicsBuilding \| politicsCandidate \| politicsFlag \| politicsGavel \| politicsPodium \| politicsStar \| powerTool \| priceAlerts \| priceAlertsCheck \| primePoduct \| privateClientProduct \| proProduct \| profile \| protection \| pulse \| pyramid \| qrCode \| qrCodeAlt \| queryTransact \| questionMark \| quotation \| rain \| ratingsCheck \| ratingsChecks \| ratingsStar \| reCenter \| rectangle \| recurring \| refresh \| regulated \| regulatedFutures \| report \| rewardsProduct \| ribbon \| robot \| rocket \| rocketShip \| rollingSpot \| rosettaProduct \| rottenTomato \| royalty \| safe \| save \| savingsBank \| scanQrCode \| scienceAtom \| scienceBeaker \| scienceMoon \| securityKey \| securityShield \| seen \| sendReceive \| setPinCode \| settings \| share \| shield \| shieldOutline \| shoe \| shoppingCart \| signinProduct \| singleCoin \| singleNote \| singlecloud \| smartContract \| snow \| soccer \| socialChat \| socialReshare \| socialShare \| sofort \| sortDoubleArrow \| sortDown \| sortDownCenter \| sortUp \| sortUpCenter \| soundOff \| soundOn \| sparkle \| speaker \| speechBubble \| stableCoin \| stablecoinStack \| staggeredList \| stake \| staking \| star \| starAward \| starBubble \| starTrophy \| statusDot \| step0 \| step1 \| step2 \| step3 \| step4 \| step5 \| step6 \| step7 \| step8 \| step9 \| strategy \| sun \| support \| tag \| taxes \| taxesReceipt \| telephone \| tennis \| test \| thermometer \| thumbsDown \| thumbsDownOutline \| thumbsUp \| thumbsUpOutline \| tokenLaunchCoin \| tokenLaunchRocket \| tokenSales \| tornado \| trading \| transactions \| trashCan \| trophy \| trophyCup \| tshirt \| tv \| tvStand \| twitterLogo \| ultility \| umbrella \| undo \| unfollowPeople \| unknown \| unlock \| upArrow \| upload \| usdc \| venturesProduct \| verifiedBadge \| verifiedPools \| verticalLine \| virus \| waasProduct \| wallet \| walletLogo \| walletProduct \| webhooks \| wellness \| wifi \| wind \| wireTransfer \| withdraw \| wrapToken \| xLogo` | Yes | `undefined` | The Navigation Icon this item represents |
|
|
234
234
|
| `Component` | `symbol \| object \| style \| title \| div \| a \| abbr \| address \| area \| article \| aside \| audio \| b \| base \| bdi \| bdo \| big \| blockquote \| body \| br \| button \| canvas \| caption \| center \| cite \| code \| col \| colgroup \| data \| datalist \| dd \| del \| details \| dfn \| dialog \| dl \| dt \| em \| embed \| fieldset \| figcaption \| figure \| footer \| form \| h1 \| h2 \| h3 \| h4 \| h5 \| h6 \| head \| header \| hgroup \| hr \| html \| i \| iframe \| img \| input \| ins \| kbd \| keygen \| label \| legend \| li \| link \| main \| map \| mark \| menu \| menuitem \| meta \| meter \| nav \| noindex \| noscript \| ol \| optgroup \| option \| output \| p \| param \| picture \| pre \| progress \| q \| rp \| rt \| ruby \| s \| samp \| search \| slot \| script \| section \| select \| small \| source \| span \| strong \| sub \| summary \| sup \| table \| template \| tbody \| td \| textarea \| tfoot \| th \| thead \| time \| tr \| track \| u \| ul \| var \| video \| wbr \| webview \| svg \| animate \| animateMotion \| animateTransform \| circle \| clipPath \| defs \| desc \| ellipse \| feBlend \| feColorMatrix \| feComponentTransfer \| feComposite \| feConvolveMatrix \| feDiffuseLighting \| feDisplacementMap \| feDistantLight \| feDropShadow \| feFlood \| feFuncA \| feFuncB \| feFuncG \| feFuncR \| feGaussianBlur \| feImage \| feMerge \| feMergeNode \| feMorphology \| feOffset \| fePointLight \| feSpecularLighting \| feSpotLight \| feTile \| feTurbulence \| filter \| foreignObject \| g \| image \| line \| linearGradient \| marker \| mask \| metadata \| mpath \| path \| pattern \| polygon \| polyline \| radialGradient \| rect \| set \| stop \| switch \| text \| textPath \| tspan \| use \| view \| ComponentClass<CustomSidebarItemProps, any> \| FunctionComponent<CustomSidebarItemProps>` | No | `-` | Optional presentational component to render for the SidebarItem. By default, the SidebarItem will render as a row with an Icon and Headline Text element The component must implement the CustomSidebarItemProps props interface |
|
|
235
235
|
| `active` | `boolean` | No | `false` | Use the active prop to identify the current page |
|
|
236
236
|
| `alignContent` | `ResponsiveProp<center \| normal \| start \| end \| flex-start \| flex-end \| stretch \| baseline \| first baseline \| last baseline \| space-between \| space-around \| space-evenly>` | No | `-` | - |
|
|
@@ -85,7 +85,7 @@ import { Spacer } from '@coinbase/cds-web/layout/Spacer'
|
|
|
85
85
|
| `aria-colindextext` | `string \| undefined` | No | `-` | Defines a human readable text alternative of aria-colindex. |
|
|
86
86
|
| `aria-colspan` | `number \| undefined` | No | `-` | Defines the number of columns spanned by a cell or gridcell within a table, grid, or treegrid. |
|
|
87
87
|
| `aria-controls` | `string \| undefined` | No | `-` | Identifies the element (or elements) whose contents or presence are controlled by the current element. |
|
|
88
|
-
| `aria-current` | `boolean \| time \|
|
|
88
|
+
| `aria-current` | `boolean \| time \| true \| false \| page \| step \| location \| date \| undefined` | No | `-` | Indicates the element that represents the current item within a container or set of related elements. |
|
|
89
89
|
| `aria-describedby` | `string \| undefined` | No | `-` | Identifies the element (or elements) that describes the object. |
|
|
90
90
|
| `aria-description` | `string \| undefined` | No | `-` | Defines a string value that describes or annotates the current element. |
|
|
91
91
|
| `aria-details` | `string \| undefined` | No | `-` | Identifies the element that provides a detailed, extended description for the object. |
|
|
@@ -199,7 +199,7 @@ import { Spacer } from '@coinbase/cds-web/layout/Spacer'
|
|
|
199
199
|
| `horizontal` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | Space in the horizontal direction |
|
|
200
200
|
| `id` | `string \| undefined` | No | `-` | - |
|
|
201
201
|
| `inlist` | `any` | No | `-` | - |
|
|
202
|
-
| `inputMode` | `search \| text \| none \|
|
|
202
|
+
| `inputMode` | `search \| text \| none \| tel \| url \| email \| numeric \| decimal \| undefined` | No | `-` | Hints at the type of data that might be entered by the user while editing the element or its contents |
|
|
203
203
|
| `is` | `string \| undefined` | No | `-` | Specify that a standard HTML element should behave like a defined custom built-in element |
|
|
204
204
|
| `itemID` | `string \| undefined` | No | `-` | - |
|
|
205
205
|
| `itemProp` | `string \| undefined` | No | `-` | - |
|
|
@@ -85,11 +85,11 @@ Alternatively, you may create a variant with different rectangle widths by setti
|
|
|
85
85
|
| --- | --- | --- | --- | --- |
|
|
86
86
|
| `as` | `td \| th` | No | ``th` when rendered inside a TableHeader, `td` when rendered inside a TableBody or TableFooter` | Use as=th to mark this cell as a header for screen readers |
|
|
87
87
|
| `disableRandomRectWidth` | `boolean` | No | `-` | Disables randomization of rectangle fallback width. |
|
|
88
|
-
| `end` | `
|
|
88
|
+
| `end` | `image \| avatar \| icon \| pictogram \| asset` | No | `-` | Display end shimmer with a shape according to type. |
|
|
89
89
|
| `innerSpacing` | `CellSpacing` | No | `{ spacingHorizontal: 0 }` | The spacing to use on the inner content of Cell |
|
|
90
90
|
| `outerSpacing` | `CellSpacing` | No | `-` | The spacing to use on the parent wrapper of Cell |
|
|
91
91
|
| `rectWidthVariant` | `number` | No | `-` | Creates a variant that contains rectangle fallbacks of deterministic width. Variants map to a predetermined set of width values, which are cycled through repeatedly when the set is exhausted. |
|
|
92
|
-
| `start` | `
|
|
92
|
+
| `start` | `image \| avatar \| icon \| pictogram \| asset` | No | `-` | Display start shimmer with a shape according to type. |
|
|
93
93
|
| `subtitle` | `boolean` | No | `-` | Display subtitle shimmer. |
|
|
94
94
|
| `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 |
|
|
95
95
|
| `title` | `boolean` | No | `-` | Display title shimmer. |
|
|
@@ -328,7 +328,7 @@ function MarginExample() {
|
|
|
328
328
|
| `elevation` | `0 \| 1 \| 2` | No | `-` | - |
|
|
329
329
|
| `emphasis` | `low \| high` | No | `'low' when informational intent, 'high' when promotional intent` | Specify the emphasis of the Tag. |
|
|
330
330
|
| `end` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | Set the end node |
|
|
331
|
-
| `endIcon` | `key \| search \| pin \| filter \| visible \| continuous \| auto \| loop \| warning \| error \| account \| activity \| add \| addPeople \| advancedMarketSelector \| advancedTradeProduct \| affiliates \| airdrop \| airdropAlt \| airdropCoins \| airdropParachute \| alien \| allTimeHigh \| allocation \| annotation \| api \| apiPlug \| apothecary \| appSwitcher \| apple \| appleLogo \|
|
|
331
|
+
| `endIcon` | `key \| search \| pin \| filter \| visible \| continuous \| auto \| loop \| image \| menu \| list \| application \| document \| grid \| group \| warning \| error \| account \| activity \| add \| addPeople \| advancedMarketSelector \| advancedTradeProduct \| affiliates \| airdrop \| airdropAlt \| airdropCoins \| airdropParachute \| alien \| allTimeHigh \| allocation \| annotation \| api \| apiPlug \| apothecary \| appSwitcher \| apple \| appleLogo \| arrowDown \| arrowLeft \| arrowRight \| arrowUp \| arrowsHorizontal \| arrowsUpDown \| arrowsVertical \| artwork \| assetHubProduct \| assetManagementProduct \| astronautHelmet \| atSign \| atomScience \| autoCar \| avatar \| average \| backArrow \| ballot \| ballotbox \| bandage \| bank \| barChartSimple \| barChartWindow \| base \| baseApps \| baseFeed \| baseNotification \| baseQuickBuy \| baseSquare \| baseTransact \| baseVerification \| baseWallet \| baseball \| basketball \| beaker \| beginningArrow \| bell \| bellCheck \| bellPlus \| birthcertificate \| block \| blockchain \| blog \| book \| bookmark \| borrowProduct \| boxing \| bridging \| briefcase \| briefcaseAlt \| browser \| bug \| building \| calculator \| calendar \| calendarBlank \| calendarDates \| calendarEmpty \| calendarHeart \| calendarMoney \| calendarStar \| camera \| candlesticks \| car \| card \| caret \| caretDown \| caretLeft \| caretRight \| caretUp \| cash \| cashAustralianDollar \| cashBrazilianReal \| cashBrazillianReal \| cashCanadianDollar \| cashCoins \| cashEUR \| cashGBP \| cashIndonesianRupiah \| cashJPY \| cashPhilippinePeso \| cashPolishZloty \| cashRupee \| cashSingaporeDollar \| cashSwissFranc \| cashThaiBaht \| cashTurkishLira \| cashUSD \| cashUaeDirham \| cashVietnameseDong \| chainLink \| chartBar \| chartCandles \| chartLine \| chartPie \| chartPieCircle \| chartVolume \| chatBotAgent \| chatBubble \| chatRequests \| checkboxChecked \| checkboxEmpty \| checkmark \| chess \| circleCheckmark \| circleCross \| circulatingSupply \| city \| clipboard \| clock \| clockOutline \| close \| closeCaption \| clothing \| cloud \| cloudPartial \| cloudProduct \| cluster \| coinbase \| coinbaseCardProduct \| coinbaseOne \| coinbaseOneCard \| coinbaseOneLogo \| coinbaseRewards \| coinsCrypto \| collapse \| collectibles \| collection \| comment \| commentPlus \| commerceProduct \| compass \| complianceProduct \| compose \| computerChip \| concierge \| conciergeBell \| config \| convert \| copy \| corporation \| creatorCoin \| cricket \| cross \| crossTrade \| crypto \| cryptobasics \| crystalBall \| crystalBallInsight \| currencies \| custodyProduct \| dashboard \| dataMarketplaceProduct \| dataStack \| defi \| delegateProduct \| deposit \| derivatives \| derivativesProduct \| derivativesProductNew \| developerAPIProduct \| developerPlatformProduct \| dex \| diagonalDownArrow \| diagonalRightArrow \| diagonalUpArrow \| diamond \| diamondIncentives \| dinnerPlate \| directDeposit \| directDepositIcon \| disabledPhone \| discordLogo \| distribution \| documentation \| dot \| doubleChevronRight \| downArrow \| download \| drag \| drops \| earn \| earnProduct \| earnRewards \| earthquake \| educationBook \| educationPencil \| email \| endArrow \| entertainment \| ethereum \| eventContracts \| exchangeProduct \| exclamationMark \| expand \| expandAddress \| expandAll \| externalLink \| eye \| faceScan \| faces \| factory \| faucet \| fib \| filmStrip \| filterLineStack \| fingerprint \| flame \| folder \| folderArrow \| folderOpen \| followAdd \| following \| football \| fork \| forwardArrow \| fscsProtection \| gab \| games \| gaming \| gasFees \| gasFeesAlt \| gauge \| gaugeEmpty \| gaugeHigh \| gaugeHighLow \| gaugeHighMid \| gaugeLow \| gaugeLowHigh \| gaugeLowMid \| gaugeMedium \| gavel \| gear \| generalCharacter \| ghost \| gif \| giftBox \| giftCard \| gitHubLogo \| globe \| golf \| googleLogo \| greenEnergy \| hamburger \| hammer \| heart \| helpCenterProduct \| helpCenterQuestionMark \| hiddenEye \| hockey \| home \| horizontalLine \| hospital \| hospitalCross \| hurricane \| ideal \| identityCard \| info \| initiator \| instagramLogo \| instantUnstakingClock \| institute \| institutionalProduct \| interest \| invisible \| invoice \| keyboard \| laptop \| leadChart \| leadCoin \| learningRewardsProduct \| light \| lightbulb \| lightning \| lightningBolt \| lineChartCrypto \| location \| lock \| login \| logout \| magnifyingGlass \| marketCap \| medal \| megaphone \| metaverse \| microphone \| microphoneCordless \| microscope \| mint \| minus \| mma \| moneyCardCoin \| moon \| more \| moreVertical \| motorsport \| music \| musicArticles \| needle \| newsFeed \| newsletter \| nft \| nftBuy \| nftOffer \| nftProduct \| nftSale \| noRocket \| noWifi \| nodeProduct \| oil \| options \| orderBook \| orderHistory \| outline \| pFPS \| paperAirplane \| paperclip \| participate \| participateProduct \| passKey \| passport \| pause \| pay \| payProduct \| paymentCard \| payments \| payouts \| paypal \| pencil \| peopleGroup \| peopleStar \| percentage \| perpetualSwap \| phone \| pieChartData \| pieChartWithArrow \| pillBottle \| pillCapsule \| plane \| planet \| play \| playbutton \| plusMinus \| podiumStar \| politicsBuilding \| politicsCandidate \| politicsFlag \| politicsGavel \| politicsPodium \| politicsStar \| powerTool \| priceAlerts \| priceAlertsCheck \| primePoduct \| privateClientProduct \| proProduct \| profile \| protection \| pulse \| pyramid \| qrCode \| qrCodeAlt \| queryTransact \| questionMark \| quotation \| rain \| ratingsCheck \| ratingsChecks \| ratingsStar \| reCenter \| rectangle \| recurring \| refresh \| regulated \| regulatedFutures \| report \| rewardsProduct \| ribbon \| robot \| rocket \| rocketShip \| rollingSpot \| rosettaProduct \| rottenTomato \| royalty \| safe \| save \| savingsBank \| scanQrCode \| scienceAtom \| scienceBeaker \| scienceMoon \| securityKey \| securityShield \| seen \| sendReceive \| setPinCode \| settings \| share \| shield \| shieldOutline \| shoe \| shoppingCart \| signinProduct \| singleCoin \| singleNote \| singlecloud \| smartContract \| snow \| soccer \| socialChat \| socialReshare \| socialShare \| sofort \| sortDoubleArrow \| sortDown \| sortDownCenter \| sortUp \| sortUpCenter \| soundOff \| soundOn \| sparkle \| speaker \| speechBubble \| stableCoin \| stablecoinStack \| staggeredList \| stake \| staking \| star \| starAward \| starBubble \| starTrophy \| statusDot \| step0 \| step1 \| step2 \| step3 \| step4 \| step5 \| step6 \| step7 \| step8 \| step9 \| strategy \| sun \| support \| tag \| taxes \| taxesReceipt \| telephone \| tennis \| test \| thermometer \| thumbsDown \| thumbsDownOutline \| thumbsUp \| thumbsUpOutline \| tokenLaunchCoin \| tokenLaunchRocket \| tokenSales \| tornado \| trading \| transactions \| trashCan \| trophy \| trophyCup \| tshirt \| tv \| tvStand \| twitterLogo \| ultility \| umbrella \| undo \| unfollowPeople \| unknown \| unlock \| upArrow \| upload \| usdc \| venturesProduct \| verifiedBadge \| verifiedPools \| verticalLine \| virus \| waasProduct \| wallet \| walletLogo \| walletProduct \| webhooks \| wellness \| wifi \| wind \| wireTransfer \| withdraw \| wrapToken \| xLogo` | No | `-` | Icon to render at the end of the tag. |
|
|
332
332
|
| `endIconActive` | `boolean` | No | `-` | Whether the end icon is active |
|
|
333
333
|
| `flexBasis` | `ResponsiveProp<FlexBasis<string \| number>>` | No | `-` | - |
|
|
334
334
|
| `flexDirection` | `ResponsiveProp<column \| row \| row-reverse \| column-reverse>` | No | `-` | - |
|
|
@@ -388,7 +388,7 @@ function MarginExample() {
|
|
|
388
388
|
| `right` | `ResponsiveProp<Right<string \| number>>` | No | `-` | - |
|
|
389
389
|
| `rowGap` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
|
|
390
390
|
| `start` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | Set the start node |
|
|
391
|
-
| `startIcon` | `key \| search \| pin \| filter \| visible \| continuous \| auto \| loop \| warning \| error \| account \| activity \| add \| addPeople \| advancedMarketSelector \| advancedTradeProduct \| affiliates \| airdrop \| airdropAlt \| airdropCoins \| airdropParachute \| alien \| allTimeHigh \| allocation \| annotation \| api \| apiPlug \| apothecary \| appSwitcher \| apple \| appleLogo \|
|
|
391
|
+
| `startIcon` | `key \| search \| pin \| filter \| visible \| continuous \| auto \| loop \| image \| menu \| list \| application \| document \| grid \| group \| warning \| error \| account \| activity \| add \| addPeople \| advancedMarketSelector \| advancedTradeProduct \| affiliates \| airdrop \| airdropAlt \| airdropCoins \| airdropParachute \| alien \| allTimeHigh \| allocation \| annotation \| api \| apiPlug \| apothecary \| appSwitcher \| apple \| appleLogo \| arrowDown \| arrowLeft \| arrowRight \| arrowUp \| arrowsHorizontal \| arrowsUpDown \| arrowsVertical \| artwork \| assetHubProduct \| assetManagementProduct \| astronautHelmet \| atSign \| atomScience \| autoCar \| avatar \| average \| backArrow \| ballot \| ballotbox \| bandage \| bank \| barChartSimple \| barChartWindow \| base \| baseApps \| baseFeed \| baseNotification \| baseQuickBuy \| baseSquare \| baseTransact \| baseVerification \| baseWallet \| baseball \| basketball \| beaker \| beginningArrow \| bell \| bellCheck \| bellPlus \| birthcertificate \| block \| blockchain \| blog \| book \| bookmark \| borrowProduct \| boxing \| bridging \| briefcase \| briefcaseAlt \| browser \| bug \| building \| calculator \| calendar \| calendarBlank \| calendarDates \| calendarEmpty \| calendarHeart \| calendarMoney \| calendarStar \| camera \| candlesticks \| car \| card \| caret \| caretDown \| caretLeft \| caretRight \| caretUp \| cash \| cashAustralianDollar \| cashBrazilianReal \| cashBrazillianReal \| cashCanadianDollar \| cashCoins \| cashEUR \| cashGBP \| cashIndonesianRupiah \| cashJPY \| cashPhilippinePeso \| cashPolishZloty \| cashRupee \| cashSingaporeDollar \| cashSwissFranc \| cashThaiBaht \| cashTurkishLira \| cashUSD \| cashUaeDirham \| cashVietnameseDong \| chainLink \| chartBar \| chartCandles \| chartLine \| chartPie \| chartPieCircle \| chartVolume \| chatBotAgent \| chatBubble \| chatRequests \| checkboxChecked \| checkboxEmpty \| checkmark \| chess \| circleCheckmark \| circleCross \| circulatingSupply \| city \| clipboard \| clock \| clockOutline \| close \| closeCaption \| clothing \| cloud \| cloudPartial \| cloudProduct \| cluster \| coinbase \| coinbaseCardProduct \| coinbaseOne \| coinbaseOneCard \| coinbaseOneLogo \| coinbaseRewards \| coinsCrypto \| collapse \| collectibles \| collection \| comment \| commentPlus \| commerceProduct \| compass \| complianceProduct \| compose \| computerChip \| concierge \| conciergeBell \| config \| convert \| copy \| corporation \| creatorCoin \| cricket \| cross \| crossTrade \| crypto \| cryptobasics \| crystalBall \| crystalBallInsight \| currencies \| custodyProduct \| dashboard \| dataMarketplaceProduct \| dataStack \| defi \| delegateProduct \| deposit \| derivatives \| derivativesProduct \| derivativesProductNew \| developerAPIProduct \| developerPlatformProduct \| dex \| diagonalDownArrow \| diagonalRightArrow \| diagonalUpArrow \| diamond \| diamondIncentives \| dinnerPlate \| directDeposit \| directDepositIcon \| disabledPhone \| discordLogo \| distribution \| documentation \| dot \| doubleChevronRight \| downArrow \| download \| drag \| drops \| earn \| earnProduct \| earnRewards \| earthquake \| educationBook \| educationPencil \| email \| endArrow \| entertainment \| ethereum \| eventContracts \| exchangeProduct \| exclamationMark \| expand \| expandAddress \| expandAll \| externalLink \| eye \| faceScan \| faces \| factory \| faucet \| fib \| filmStrip \| filterLineStack \| fingerprint \| flame \| folder \| folderArrow \| folderOpen \| followAdd \| following \| football \| fork \| forwardArrow \| fscsProtection \| gab \| games \| gaming \| gasFees \| gasFeesAlt \| gauge \| gaugeEmpty \| gaugeHigh \| gaugeHighLow \| gaugeHighMid \| gaugeLow \| gaugeLowHigh \| gaugeLowMid \| gaugeMedium \| gavel \| gear \| generalCharacter \| ghost \| gif \| giftBox \| giftCard \| gitHubLogo \| globe \| golf \| googleLogo \| greenEnergy \| hamburger \| hammer \| heart \| helpCenterProduct \| helpCenterQuestionMark \| hiddenEye \| hockey \| home \| horizontalLine \| hospital \| hospitalCross \| hurricane \| ideal \| identityCard \| info \| initiator \| instagramLogo \| instantUnstakingClock \| institute \| institutionalProduct \| interest \| invisible \| invoice \| keyboard \| laptop \| leadChart \| leadCoin \| learningRewardsProduct \| light \| lightbulb \| lightning \| lightningBolt \| lineChartCrypto \| location \| lock \| login \| logout \| magnifyingGlass \| marketCap \| medal \| megaphone \| metaverse \| microphone \| microphoneCordless \| microscope \| mint \| minus \| mma \| moneyCardCoin \| moon \| more \| moreVertical \| motorsport \| music \| musicArticles \| needle \| newsFeed \| newsletter \| nft \| nftBuy \| nftOffer \| nftProduct \| nftSale \| noRocket \| noWifi \| nodeProduct \| oil \| options \| orderBook \| orderHistory \| outline \| pFPS \| paperAirplane \| paperclip \| participate \| participateProduct \| passKey \| passport \| pause \| pay \| payProduct \| paymentCard \| payments \| payouts \| paypal \| pencil \| peopleGroup \| peopleStar \| percentage \| perpetualSwap \| phone \| pieChartData \| pieChartWithArrow \| pillBottle \| pillCapsule \| plane \| planet \| play \| playbutton \| plusMinus \| podiumStar \| politicsBuilding \| politicsCandidate \| politicsFlag \| politicsGavel \| politicsPodium \| politicsStar \| powerTool \| priceAlerts \| priceAlertsCheck \| primePoduct \| privateClientProduct \| proProduct \| profile \| protection \| pulse \| pyramid \| qrCode \| qrCodeAlt \| queryTransact \| questionMark \| quotation \| rain \| ratingsCheck \| ratingsChecks \| ratingsStar \| reCenter \| rectangle \| recurring \| refresh \| regulated \| regulatedFutures \| report \| rewardsProduct \| ribbon \| robot \| rocket \| rocketShip \| rollingSpot \| rosettaProduct \| rottenTomato \| royalty \| safe \| save \| savingsBank \| scanQrCode \| scienceAtom \| scienceBeaker \| scienceMoon \| securityKey \| securityShield \| seen \| sendReceive \| setPinCode \| settings \| share \| shield \| shieldOutline \| shoe \| shoppingCart \| signinProduct \| singleCoin \| singleNote \| singlecloud \| smartContract \| snow \| soccer \| socialChat \| socialReshare \| socialShare \| sofort \| sortDoubleArrow \| sortDown \| sortDownCenter \| sortUp \| sortUpCenter \| soundOff \| soundOn \| sparkle \| speaker \| speechBubble \| stableCoin \| stablecoinStack \| staggeredList \| stake \| staking \| star \| starAward \| starBubble \| starTrophy \| statusDot \| step0 \| step1 \| step2 \| step3 \| step4 \| step5 \| step6 \| step7 \| step8 \| step9 \| strategy \| sun \| support \| tag \| taxes \| taxesReceipt \| telephone \| tennis \| test \| thermometer \| thumbsDown \| thumbsDownOutline \| thumbsUp \| thumbsUpOutline \| tokenLaunchCoin \| tokenLaunchRocket \| tokenSales \| tornado \| trading \| transactions \| trashCan \| trophy \| trophyCup \| tshirt \| tv \| tvStand \| twitterLogo \| ultility \| umbrella \| undo \| unfollowPeople \| unknown \| unlock \| upArrow \| upload \| usdc \| venturesProduct \| verifiedBadge \| verifiedPools \| verticalLine \| virus \| waasProduct \| wallet \| walletLogo \| walletProduct \| webhooks \| wellness \| wifi \| wind \| wireTransfer \| withdraw \| wrapToken \| xLogo` | No | `-` | Icon to render at the start of the tag. |
|
|
392
392
|
| `startIconActive` | `boolean` | No | `-` | Whether the start icon is active |
|
|
393
393
|
| `style` | `CSSProperties` | No | `-` | - |
|
|
394
394
|
| `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 |
|
|
@@ -141,7 +141,7 @@ In a nutshell, you can reference the following for the most common text semantic
|
|
|
141
141
|
| `aria-colindextext` | `string \| undefined` | No | `-` | Defines a human readable text alternative of aria-colindex. |
|
|
142
142
|
| `aria-colspan` | `number \| undefined` | No | `-` | Defines the number of columns spanned by a cell or gridcell within a table, grid, or treegrid. |
|
|
143
143
|
| `aria-controls` | `string \| undefined` | No | `-` | Identifies the element (or elements) whose contents or presence are controlled by the current element. |
|
|
144
|
-
| `aria-current` | `boolean \| time \|
|
|
144
|
+
| `aria-current` | `boolean \| time \| true \| false \| page \| step \| location \| date \| undefined` | No | `-` | Indicates the element that represents the current item within a container or set of related elements. |
|
|
145
145
|
| `aria-describedby` | `string \| undefined` | No | `-` | Identifies the element (or elements) that describes the object. |
|
|
146
146
|
| `aria-description` | `string \| undefined` | No | `-` | Defines a string value that describes or annotates the current element. |
|
|
147
147
|
| `aria-details` | `string \| undefined` | No | `-` | Identifies the element that provides a detailed, extended description for the object. |
|
|
@@ -256,7 +256,7 @@ In a nutshell, you can reference the following for the most common text semantic
|
|
|
256
256
|
| `hidden` | `boolean \| undefined` | No | `-` | - |
|
|
257
257
|
| `id` | `string \| undefined` | No | `-` | - |
|
|
258
258
|
| `inlist` | `any` | No | `-` | - |
|
|
259
|
-
| `inputMode` | `search \| text \| none \|
|
|
259
|
+
| `inputMode` | `search \| text \| none \| tel \| url \| email \| numeric \| decimal \| undefined` | No | `-` | Hints at the type of data that might be entered by the user while editing the element or its contents |
|
|
260
260
|
| `is` | `string \| undefined` | No | `-` | Specify that a standard HTML element should behave like a defined custom built-in element |
|
|
261
261
|
| `itemID` | `string \| undefined` | No | `-` | - |
|
|
262
262
|
| `itemProp` | `string \| undefined` | No | `-` | - |
|