@coinbase/cds-mcp-server 8.43.0 → 8.44.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.
Files changed (106) hide show
  1. package/CHANGELOG.md +12 -0
  2. package/dts/analytics.d.ts +6 -9
  3. package/dts/index.d.ts +1 -1
  4. package/dts/server.d.ts +1 -1
  5. package/dts/setup.d.ts +1 -1
  6. package/mcp-docs/mobile/components/Alert.txt +1 -0
  7. package/mcp-docs/mobile/components/AvatarButton.txt +2 -0
  8. package/mcp-docs/mobile/components/Button.txt +2 -0
  9. package/mcp-docs/mobile/components/Carousel.txt +12 -0
  10. package/mcp-docs/mobile/components/CheckboxCell.txt +13 -0
  11. package/mcp-docs/mobile/components/Chip.txt +10 -0
  12. package/mcp-docs/mobile/components/Collapsible.txt +7 -0
  13. package/mcp-docs/mobile/components/Combobox.txt +26 -0
  14. package/mcp-docs/mobile/components/ContentCell.txt +17 -0
  15. package/mcp-docs/mobile/components/DataCard.txt +13 -0
  16. package/mcp-docs/mobile/components/DotCount.txt +9 -0
  17. package/mcp-docs/mobile/components/Icon.txt +15 -0
  18. package/mcp-docs/mobile/components/IconButton.txt +2 -0
  19. package/mcp-docs/mobile/components/InputChip.txt +2 -0
  20. package/mcp-docs/mobile/components/ListCell.txt +23 -0
  21. package/mcp-docs/mobile/components/MediaCard.txt +14 -0
  22. package/mcp-docs/mobile/components/MediaChip.txt +2 -0
  23. package/mcp-docs/mobile/components/MessagingCard.txt +14 -0
  24. package/mcp-docs/mobile/components/Modal.txt +1 -0
  25. package/mcp-docs/mobile/components/NudgeCard.txt +5 -0
  26. package/mcp-docs/mobile/components/PageFooter.txt +6 -0
  27. package/mcp-docs/mobile/components/PageHeader.txt +16 -0
  28. package/mcp-docs/mobile/components/Pressable.txt +2 -0
  29. package/mcp-docs/mobile/components/ProgressBar.txt +8 -0
  30. package/mcp-docs/mobile/components/ProgressBarWithFixedLabels.txt +10 -0
  31. package/mcp-docs/mobile/components/ProgressBarWithFloatLabel.txt +9 -0
  32. package/mcp-docs/mobile/components/ProgressCircle.txt +12 -0
  33. package/mcp-docs/mobile/components/RadioCell.txt +13 -0
  34. package/mcp-docs/mobile/components/RollingNumber.txt +16 -0
  35. package/mcp-docs/mobile/components/SectionHeader.txt +7 -0
  36. package/mcp-docs/mobile/components/SelectAlpha.txt +26 -0
  37. package/mcp-docs/mobile/components/SelectChip.txt +9 -5
  38. package/mcp-docs/mobile/components/SelectChipAlpha.txt +26 -0
  39. package/mcp-docs/mobile/components/SlideButton.txt +11 -0
  40. package/mcp-docs/mobile/components/Spacer.txt +3 -0
  41. package/mcp-docs/mobile/components/Stepper.txt +13 -0
  42. package/mcp-docs/mobile/components/TabbedChipsAlpha.txt +8 -0
  43. package/mcp-docs/mobile/components/Tray.txt +717 -133
  44. package/mcp-docs/mobile/components/UpsellCard.txt +1 -0
  45. package/mcp-docs/mobile/getting-started/styling.txt +6 -2
  46. package/mcp-docs/mobile/routes.txt +1 -1
  47. package/mcp-docs/web/components/Alert.txt +1 -0
  48. package/mcp-docs/web/components/AvatarButton.txt +12 -10
  49. package/mcp-docs/web/components/Box.txt +9 -9
  50. package/mcp-docs/web/components/Button.txt +12 -10
  51. package/mcp-docs/web/components/Carousel.txt +12 -0
  52. package/mcp-docs/web/components/CheckboxCell.txt +13 -0
  53. package/mcp-docs/web/components/Chip.txt +10 -0
  54. package/mcp-docs/web/components/Collapsible.txt +7 -0
  55. package/mcp-docs/web/components/Combobox.txt +26 -0
  56. package/mcp-docs/web/components/ContentCard.txt +9 -9
  57. package/mcp-docs/web/components/ContentCardBody.txt +9 -9
  58. package/mcp-docs/web/components/ContentCardFooter.txt +9 -9
  59. package/mcp-docs/web/components/ContentCardHeader.txt +9 -9
  60. package/mcp-docs/web/components/ContentCell.txt +27 -9
  61. package/mcp-docs/web/components/DataCard.txt +13 -0
  62. package/mcp-docs/web/components/DotCount.txt +9 -0
  63. package/mcp-docs/web/components/Fallback.txt +9 -9
  64. package/mcp-docs/web/components/FullscreenModal.txt +1 -0
  65. package/mcp-docs/web/components/FullscreenModalLayout.txt +1 -0
  66. package/mcp-docs/web/components/Grid.txt +9 -9
  67. package/mcp-docs/web/components/GridColumn.txt +9 -9
  68. package/mcp-docs/web/components/HStack.txt +9 -9
  69. package/mcp-docs/web/components/Icon.txt +8 -0
  70. package/mcp-docs/web/components/IconButton.txt +12 -10
  71. package/mcp-docs/web/components/InputChip.txt +2 -0
  72. package/mcp-docs/web/components/Interactable.txt +10 -10
  73. package/mcp-docs/web/components/Link.txt +11 -9
  74. package/mcp-docs/web/components/ListCell.txt +29 -9
  75. package/mcp-docs/web/components/MediaCard.txt +14 -0
  76. package/mcp-docs/web/components/MediaChip.txt +2 -0
  77. package/mcp-docs/web/components/MessagingCard.txt +14 -0
  78. package/mcp-docs/web/components/Modal.txt +1 -0
  79. package/mcp-docs/web/components/MultiContentModule.txt +9 -9
  80. package/mcp-docs/web/components/NavigationBar.txt +271 -45
  81. package/mcp-docs/web/components/PageFooter.txt +6 -0
  82. package/mcp-docs/web/components/PageHeader.txt +16 -0
  83. package/mcp-docs/web/components/Pressable.txt +12 -10
  84. package/mcp-docs/web/components/ProgressBar.txt +8 -0
  85. package/mcp-docs/web/components/ProgressBarWithFixedLabels.txt +10 -0
  86. package/mcp-docs/web/components/ProgressBarWithFloatLabel.txt +9 -0
  87. package/mcp-docs/web/components/ProgressCircle.txt +10 -0
  88. package/mcp-docs/web/components/RadioCell.txt +13 -0
  89. package/mcp-docs/web/components/RollingNumber.txt +25 -9
  90. package/mcp-docs/web/components/Scrubber.txt +10 -0
  91. package/mcp-docs/web/components/SelectAlpha.txt +26 -0
  92. package/mcp-docs/web/components/SelectChip.txt +2 -0
  93. package/mcp-docs/web/components/SelectChipAlpha.txt +26 -0
  94. package/mcp-docs/web/components/Sidebar.txt +10 -0
  95. package/mcp-docs/web/components/SidebarItem.txt +2 -0
  96. package/mcp-docs/web/components/Spacer.txt +9 -9
  97. package/mcp-docs/web/components/Stepper.txt +13 -0
  98. package/mcp-docs/web/components/TabbedChipsAlpha.txt +10 -0
  99. package/mcp-docs/web/components/Text.txt +9 -9
  100. package/mcp-docs/web/components/TileButton.txt +12 -10
  101. package/mcp-docs/web/components/Tray.txt +1032 -155
  102. package/mcp-docs/web/components/UpsellCard.txt +1 -0
  103. package/mcp-docs/web/components/VStack.txt +9 -9
  104. package/mcp-docs/web/getting-started/styling.txt +35 -12
  105. package/mcp-docs/web/routes.txt +1 -1
  106. package/package.json +1 -1
package/CHANGELOG.md CHANGED
@@ -8,6 +8,18 @@ All notable changes to this project will be documented in this file.
8
8
 
9
9
  <!-- template-start -->
10
10
 
11
+ ## 8.44.0 ((2/9/2026, 07:07 PM PST))
12
+
13
+ This is an artificial version bump with no new change.
14
+
15
+ ## 8.43.2 ((2/9/2026, 09:05 AM PST))
16
+
17
+ This is an artificial version bump with no new change.
18
+
19
+ ## 8.43.1 ((2/6/2026, 02:15 PM PST))
20
+
21
+ This is an artificial version bump with no new change.
22
+
11
23
  ## 8.43.0 ((2/6/2026, 9:00 AM PST))
12
24
 
13
25
  This is an artificial version bump with no new change.
@@ -4,14 +4,11 @@
4
4
  */
5
5
  type CdsEventType = 'cdsCli' | 'cdsMcp' | 'cdsDocs';
6
6
  type CdsEventData = {
7
- version: string;
8
- command: string;
9
- arguments?: string;
10
- context?: string;
7
+ version: string;
8
+ command: string;
9
+ arguments?: string;
10
+ context?: string;
11
11
  };
12
- export declare function postMetric(
13
- eventType: CdsEventType,
14
- data: Omit<CdsEventData, 'version'>,
15
- ): void;
12
+ export declare function postMetric(eventType: CdsEventType, data: Omit<CdsEventData, 'version'>): void;
16
13
  export {};
17
- //# sourceMappingURL=analytics.d.ts.map
14
+ //# sourceMappingURL=analytics.d.ts.map
package/dts/index.d.ts CHANGED
@@ -1,2 +1,2 @@
1
1
  export {};
2
- //# sourceMappingURL=index.d.ts.map
2
+ //# sourceMappingURL=index.d.ts.map
package/dts/server.d.ts CHANGED
@@ -1,3 +1,3 @@
1
1
  #!/usr/bin/env node
2
2
  export {};
3
- //# sourceMappingURL=server.d.ts.map
3
+ //# sourceMappingURL=server.d.ts.map
package/dts/setup.d.ts CHANGED
@@ -1,3 +1,3 @@
1
1
  #!/usr/bin/env node
2
2
  export {};
3
- //# sourceMappingURL=setup.d.ts.map
3
+ //# sourceMappingURL=setup.d.ts.map
@@ -153,5 +153,6 @@ function AlertOnModalExample() {
153
153
  | `preferredActionVariant` | `primary \| negative` | No | `primary` | Button variant of the preferred action |
154
154
  | `ref` | `((instance: ModalRefBaseProps \| null) => void) \| RefObject<ModalRefBaseProps> \| null` | No | `-` | - |
155
155
  | `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 |
156
+ | `zIndex` | `number` | No | `-` | Adjust the z-index positioning layer. |
156
157
 
157
158
 
@@ -127,6 +127,7 @@ AvatarButton can use fallback colors with names when no image source is provided
127
127
  | `alignContent` | `flex-start \| flex-end \| center \| stretch \| space-between \| space-around \| space-evenly` | No | `-` | - |
128
128
  | `alignItems` | `flex-start \| flex-end \| center \| stretch \| baseline` | No | `-` | - |
129
129
  | `alignSelf` | `auto \| FlexAlignType` | No | `-` | - |
130
+ | `analyticsId` | `string` | No | `-` | - |
130
131
  | `aspectRatio` | `string \| number` | No | `-` | - |
131
132
  | `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 | `-` | Background color of the overlay (element being interacted with). |
132
133
  | `blendStyles` | `InteractableBlendStyles` | No | `-` | - |
@@ -161,6 +162,7 @@ AvatarButton can use fallback colors with names when no image source is provided
161
162
  | `disabled` | `boolean` | No | `-` | Is the element currently disabled. |
162
163
  | `display` | `flex \| none` | No | `-` | - |
163
164
  | `elevation` | `0 \| 1 \| 2` | No | `-` | Determines box shadow styles. Parent should have overflow set to visible to ensure styles are not clipped. Is the element elevated. |
165
+ | `eventConfig` | `EventHandlerCustomConfig` | No | `-` | - |
164
166
  | `feedback` | `none \| light \| normal \| heavy` | No | `none` | Haptic feedback to trigger when being pressed. |
165
167
  | `flexBasis` | `string \| number` | No | `-` | - |
166
168
  | `flexDirection` | `row \| column \| row-reverse \| column-reverse` | No | `-` | - |
@@ -233,6 +233,7 @@ A full-width primary action with a compact secondary option.
233
233
  | `alignContent` | `flex-start \| flex-end \| center \| stretch \| space-between \| space-around \| space-evenly` | No | `-` | - |
234
234
  | `alignItems` | `flex-start \| flex-end \| center \| stretch \| baseline` | No | `-` | - |
235
235
  | `alignSelf` | `auto \| FlexAlignType` | No | `-` | - |
236
+ | `analyticsId` | `string` | No | `-` | - |
236
237
  | `aspectRatio` | `string \| number` | No | `-` | - |
237
238
  | `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 | `-` | Background color of the overlay (element being interacted with). |
238
239
  | `blendStyles` | `InteractableBlendStyles` | No | `-` | - |
@@ -270,6 +271,7 @@ A full-width primary action with a compact secondary option.
270
271
  | `end` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | Set the end node |
271
272
  | `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 \| application \| 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 \| document \| 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 \| 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 \| grid \| group \| hamburger \| hammer \| heart \| helpCenterProduct \| helpCenterQuestionMark \| hiddenEye \| hockey \| home \| horizontalLine \| hospital \| hospitalCross \| hurricane \| ideal \| identityCard \| image \| info \| initiator \| instagramLogo \| instantUnstakingClock \| institute \| institutionalProduct \| interest \| invisible \| invoice \| keyboard \| laptop \| leadChart \| leadCoin \| learningRewardsProduct \| light \| lightbulb \| lightning \| lightningBolt \| lineChartCrypto \| list \| location \| lock \| login \| logout \| magnifyingGlass \| marketCap \| medal \| megaphone \| menu \| 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 \| 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 \| 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 button. |
272
273
  | `endIconActive` | `boolean` | No | `-` | Whether the end icon is active |
274
+ | `eventConfig` | `EventHandlerCustomConfig` | No | `-` | - |
273
275
  | `feedback` | `none \| light \| normal \| heavy` | No | `none` | Haptic feedback to trigger when being pressed. |
274
276
  | `flexBasis` | `string \| number` | No | `-` | - |
275
277
  | `flexDirection` | `row \| column \| row-reverse \| column-reverse` | No | `-` | - |
@@ -1463,3 +1463,15 @@ You can use the `onChangePage`, `onDragStart`, and `onDragEnd` callbacks to list
1463
1463
  | `zIndex` | `number` | No | `-` | - |
1464
1464
 
1465
1465
 
1466
+ ## Styles
1467
+
1468
+ | Selector | Static class name | Description |
1469
+ | --- | --- | --- |
1470
+ | `root` | `-` | root element. |
1471
+ | `title` | `-` | title element. |
1472
+ | `navigation` | `-` | navigation element. |
1473
+ | `pagination` | `-` | pagination element. |
1474
+ | `carousel` | `-` | main carousel element. |
1475
+ | `carouselContainer` | `-` | outer carousel container element. |
1476
+
1477
+
@@ -88,6 +88,7 @@ function CustomCheckboxCellExample() {
88
88
  | `alignContent` | `flex-start \| flex-end \| center \| stretch \| space-between \| space-around \| space-evenly` | No | `-` | - |
89
89
  | `alignItems` | `flex-start \| flex-end \| center \| stretch \| baseline` | No | `-` | - |
90
90
  | `alignSelf` | `auto \| FlexAlignType` | No | `-` | - |
91
+ | `analyticsId` | `string` | No | `-` | - |
91
92
  | `aspectRatio` | `string \| number` | No | `-` | - |
92
93
  | `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 | `-` | Background color of the overlay (element being interacted with). |
93
94
  | `blendStyles` | `InteractableBlendStyles` | No | `-` | - |
@@ -123,6 +124,7 @@ function CustomCheckboxCellExample() {
123
124
  | `disabled` | `boolean` | No | `-` | Disable user interaction. Is the element currently disabled. |
124
125
  | `display` | `flex \| none` | No | `-` | - |
125
126
  | `elevation` | `0 \| 1 \| 2` | No | `-` | Sets the elevation/drop shadow of the control. Determines box shadow styles. Parent should have overflow set to visible to ensure styles are not clipped. Is the element elevated. |
127
+ | `eventConfig` | `EventHandlerCustomConfig` | No | `-` | - |
126
128
  | `feedback` | `none \| light \| normal \| heavy` | No | `none` | Haptic feedback to trigger when being pressed. |
127
129
  | `flexBasis` | `string \| number` | No | `-` | - |
128
130
  | `flexDirection` | `row \| column \| row-reverse \| column-reverse` | No | `-` | - |
@@ -199,3 +201,14 @@ function CustomCheckboxCellExample() {
199
201
  | `zIndex` | `number` | No | `-` | - |
200
202
 
201
203
 
204
+ ## Styles
205
+
206
+ | Selector | Static class name | Description |
207
+ | --- | --- | --- |
208
+ | `root` | `-` | - |
209
+ | `checkboxContainer` | `-` | - |
210
+ | `contentContainer` | `-` | - |
211
+ | `title` | `-` | - |
212
+ | `description` | `-` | - |
213
+
214
+
@@ -81,6 +81,7 @@ function Example() {
81
81
  | `alignContent` | `flex-start \| flex-end \| center \| stretch \| space-between \| space-around \| space-evenly` | No | `-` | - |
82
82
  | `alignItems` | `flex-start \| flex-end \| center \| stretch \| baseline` | No | `-` | - |
83
83
  | `alignSelf` | `auto \| FlexAlignType` | No | `-` | - |
84
+ | `analyticsId` | `string` | No | `-` | - |
84
85
  | `aspectRatio` | `string \| number` | No | `-` | - |
85
86
  | `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 | `-` | Background color of the overlay (element being interacted with). |
86
87
  | `blendStyles` | `InteractableBlendStyles` | No | `-` | - |
@@ -116,6 +117,7 @@ function Example() {
116
117
  | `display` | `flex \| none` | No | `-` | - |
117
118
  | `elevation` | `0 \| 1 \| 2` | No | `-` | Determines box shadow styles. Parent should have overflow set to visible to ensure styles are not clipped. Is the element elevated. |
118
119
  | `end` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | ReactNode placed after the value |
120
+ | `eventConfig` | `EventHandlerCustomConfig` | No | `-` | - |
119
121
  | `feedback` | `none \| light \| normal \| heavy` | No | `none` | Haptic feedback to trigger when being pressed. |
120
122
  | `flexBasis` | `string \| number` | No | `-` | - |
121
123
  | `flexDirection` | `row \| column \| row-reverse \| column-reverse` | No | `-` | - |
@@ -195,3 +197,11 @@ function Example() {
195
197
  | `zIndex` | `number` | No | `-` | - |
196
198
 
197
199
 
200
+ ## Styles
201
+
202
+ | Selector | Static class name | Description |
203
+ | --- | --- | --- |
204
+ | `root` | `-` | - |
205
+ | `content` | `-` | - |
206
+
207
+
@@ -97,6 +97,13 @@ function Horizontal() {
97
97
  | `key` | `Key \| null` | No | `-` | - |
98
98
  | `maxHeight` | `number` | No | `-` | Max height of the content. Overflow content will be scrollable. |
99
99
  | `maxWidth` | `number` | No | `-` | Max width of the content. Overflow content will be scrollable. |
100
+ | `padding` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | Apply padding on all sides. |
101
+ | `paddingBottom` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | Apply padding on the bottom side. |
102
+ | `paddingEnd` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | Apply padding on the end side. |
103
+ | `paddingStart` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | Apply padding on the start side. |
104
+ | `paddingTop` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | Apply padding on the top side. |
105
+ | `paddingX` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | Apply padding on the start and end sides. |
106
+ | `paddingY` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | Apply padding on the top and bottom sides. |
100
107
  | `ref` | `((instance: View \| null) => void) \| RefObject<View> \| null` | No | `-` | - |
101
108
  | `scrollViewProps` | `ScrollViewProps` | No | `-` | RN ScrollView props. Use with caution as it might break default settings. |
102
109
  | `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 |
@@ -282,3 +282,29 @@ function BorderlessExample() {
282
282
  | `variant` | `primary \| secondary \| positive \| negative \| foregroundMuted \| foreground` | No | `-` | Determines the sentiment of the input. Because we allow startContent and endContent to be custom ReactNode, the content placed inside these slots will not change colors according to the variant. You will have to add that yourself |
283
283
 
284
284
 
285
+ ## Styles
286
+
287
+ | Selector | Static class name | Description |
288
+ | --- | --- | --- |
289
+ | `root` | `-` | root element |
290
+ | `control` | `-` | control element |
291
+ | `controlStartNode` | `-` | start node element |
292
+ | `controlInputNode` | `-` | input node element |
293
+ | `controlValueNode` | `-` | value node element |
294
+ | `controlLabelNode` | `-` | label node element |
295
+ | `controlHelperTextNode` | `-` | helper text node element |
296
+ | `controlEndNode` | `-` | end node element |
297
+ | `controlBlendStyles` | `-` | Blend styles for control interactivity |
298
+ | `dropdown` | `-` | dropdown container |
299
+ | `option` | `-` | individual options |
300
+ | `optionCell` | `-` | option cell element |
301
+ | `optionContent` | `-` | option content wrapper |
302
+ | `optionLabel` | `-` | option label element |
303
+ | `optionDescription` | `-` | option description element |
304
+ | `optionBlendStyles` | `-` | Blend styles for option interactivity |
305
+ | `selectAllDivider` | `-` | select all divider element |
306
+ | `emptyContentsContainer` | `-` | empty contents container element |
307
+ | `emptyContentsText` | `-` | empty contents text element |
308
+ | `optionGroup` | `-` | option group element |
309
+
310
+
@@ -284,3 +284,20 @@ The `ContentCellFallback` component provides loading state representations of `C
284
284
  | `zIndex` | `number` | No | `-` | - |
285
285
 
286
286
 
287
+ ## Styles
288
+
289
+ | Selector | Static class name | Description |
290
+ | --- | --- | --- |
291
+ | `root` | `-` | - |
292
+ | `media` | `-` | - |
293
+ | `accessory` | `-` | - |
294
+ | `contentContainer` | `-` | - |
295
+ | `pressable` | `-` | - |
296
+ | `mainContent` | `-` | - |
297
+ | `title` | `-` | - |
298
+ | `subtitle` | `-` | - |
299
+ | `metaContainer` | `-` | - |
300
+ | `meta` | `-` | - |
301
+ | `description` | `-` | - |
302
+
303
+
@@ -609,6 +609,7 @@ import { DataCard } from '@coinbase/cds-mobile/alpha/data-card';
609
609
  | `alignContent` | `flex-start \| flex-end \| center \| stretch \| space-between \| space-around \| space-evenly` | No | `-` | - |
610
610
  | `alignItems` | `flex-start \| flex-end \| center \| stretch \| baseline` | No | `-` | - |
611
611
  | `alignSelf` | `auto \| FlexAlignType` | No | `-` | - |
612
+ | `analyticsId` | `string` | No | `-` | - |
612
613
  | `aspectRatio` | `string \| number` | No | `-` | - |
613
614
  | `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 | `-` | Background color of the overlay (element being interacted with). |
614
615
  | `blendStyles` | `InteractableBlendStyles` | No | `-` | - |
@@ -642,6 +643,7 @@ import { DataCard } from '@coinbase/cds-mobile/alpha/data-card';
642
643
  | `disabled` | `boolean` | No | `-` | Is the element currently disabled. Whether the press behavior is disabled. |
643
644
  | `display` | `flex \| none` | No | `-` | - |
644
645
  | `elevation` | `0 \| 1 \| 2` | No | `-` | Determines box shadow styles. Parent should have overflow set to visible to ensure styles are not clipped. Is the element elevated. |
646
+ | `eventConfig` | `EventHandlerCustomConfig` | No | `-` | - |
645
647
  | `feedback` | `none \| light \| normal \| heavy` | No | `none` | Haptic feedback to trigger when being pressed. |
646
648
  | `flexBasis` | `string \| number` | No | `-` | - |
647
649
  | `flexDirection` | `row \| column \| row-reverse \| column-reverse` | No | `-` | - |
@@ -721,3 +723,14 @@ import { DataCard } from '@coinbase/cds-mobile/alpha/data-card';
721
723
  | `zIndex` | `number` | No | `-` | - |
722
724
 
723
725
 
726
+ ## Styles
727
+
728
+ | Selector | Static class name | Description |
729
+ | --- | --- | --- |
730
+ | `layoutContainer` | `-` | - |
731
+ | `headerContainer` | `-` | - |
732
+ | `textContainer` | `-` | - |
733
+ | `titleContainer` | `-` | - |
734
+ | `root` | `-` | - |
735
+
736
+
@@ -143,3 +143,12 @@ function CustomizeStyle() {
143
143
  | `variant` | `negative` | No | `negative` | Background color of dot |
144
144
 
145
145
 
146
+ ## Styles
147
+
148
+ | Selector | Static class name | Description |
149
+ | --- | --- | --- |
150
+ | `root` | `-` | root element. |
151
+ | `container` | `-` | container element. |
152
+ | `text` | `-` | text element. |
153
+
154
+
@@ -49,9 +49,24 @@ Mobile apps cache font files in the native build, so you must rebuild your app a
49
49
  | `color` | `currentColor \| fg \| fgMuted \| fgInverse \| fgPrimary \| fgWarning \| fgPositive \| fgNegative \| bg \| bgAlternate \| bgInverse \| bgOverlay \| bgElevation1 \| bgElevation2 \| bgPrimary \| bgPrimaryWash \| bgSecondary \| bgTertiary \| bgSecondaryWash \| bgNegative \| bgNegativeWash \| bgPositive \| bgPositiveWash \| bgWarning \| bgWarningWash \| bgLine \| bgLineHeavy \| bgLineInverse \| bgLinePrimary \| bgLinePrimarySubtle \| accentSubtleRed \| accentBoldRed \| accentSubtleGreen \| accentBoldGreen \| accentSubtleBlue \| accentBoldBlue \| accentSubtlePurple \| accentBoldPurple \| accentSubtleYellow \| accentBoldYellow \| accentSubtleGray \| accentBoldGray \| transparent` | No | `primary` | Color of the icon when used as a foreground. |
50
50
  | `dangerouslySetColor` | `string \| AnimatedInterpolation<string>` | No | `-` | - |
51
51
  | `fallback` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `null` | Fallback element to render if unable to find an icon with matching name |
52
+ | `padding` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | Apply padding on all sides. |
53
+ | `paddingBottom` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | Apply padding on the bottom side. |
54
+ | `paddingEnd` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | Apply padding on the end side. |
55
+ | `paddingStart` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | Apply padding on the start side. |
56
+ | `paddingTop` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | Apply padding on the top side. |
57
+ | `paddingX` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | Apply padding on the start and end sides. |
58
+ | `paddingY` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | Apply padding on the top and bottom sides. |
52
59
  | `size` | `s \| l \| xs \| m` | No | `m` | Size for a given icon. |
53
60
  | `style` | `false \| Value \| AnimatedInterpolation<string \| number> \| RegisteredStyle<TextStyle> \| WithAnimatedObject<TextStyle> \| WithAnimatedArray<Falsy \| TextStyle \| RegisteredStyle<TextStyle> \| RecursiveArray<Falsy \| TextStyle \| RegisteredStyle<TextStyle>> \| readonly (Falsy \| TextStyle \| RegisteredStyle<TextStyle>)[]> \| null` | No | `-` | - |
54
61
  | `styles` | `{ root?: StyleProp<ViewStyle>; icon?: StyleProp<TextStyle>; }` | No | `-` | - |
55
62
  | `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 |
56
63
 
57
64
 
65
+ ## Styles
66
+
67
+ | Selector | Static class name | Description |
68
+ | --- | --- | --- |
69
+ | `root` | `-` | - |
70
+ | `icon` | `-` | - |
71
+
72
+
@@ -246,6 +246,7 @@ An icon button with a badge showing the notification count. Uses `DotCount` to d
246
246
  | `alignContent` | `flex-start \| flex-end \| center \| stretch \| space-between \| space-around \| space-evenly` | No | `-` | - |
247
247
  | `alignItems` | `flex-start \| flex-end \| center \| stretch \| baseline` | No | `-` | - |
248
248
  | `alignSelf` | `auto \| FlexAlignType` | No | `-` | - |
249
+ | `analyticsId` | `string` | No | `-` | - |
249
250
  | `aspectRatio` | `string \| number` | No | `-` | - |
250
251
  | `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 | `-` | Background color of the overlay (element being interacted with). |
251
252
  | `blendStyles` | `InteractableBlendStyles` | No | `-` | - |
@@ -279,6 +280,7 @@ An icon button with a badge showing the notification count. Uses `DotCount` to d
279
280
  | `disabled` | `boolean` | No | `-` | Is the element currently disabled. Mark the button as disabled. |
280
281
  | `display` | `flex \| none` | No | `-` | - |
281
282
  | `elevation` | `0 \| 1 \| 2` | No | `-` | Determines box shadow styles. Parent should have overflow set to visible to ensure styles are not clipped. Is the element elevated. |
283
+ | `eventConfig` | `EventHandlerCustomConfig` | No | `-` | - |
282
284
  | `feedback` | `none \| light \| normal \| heavy` | No | `none` | Haptic feedback to trigger when being pressed. |
283
285
  | `flexBasis` | `string \| number` | No | `-` | - |
284
286
  | `flexDirection` | `row \| column \| row-reverse \| column-reverse` | No | `-` | - |
@@ -76,6 +76,7 @@ function Example() {
76
76
  | `alignContent` | `flex-start \| flex-end \| center \| stretch \| space-between \| space-around \| space-evenly` | No | `-` | - |
77
77
  | `alignItems` | `flex-start \| flex-end \| center \| stretch \| baseline` | No | `-` | - |
78
78
  | `alignSelf` | `auto \| FlexAlignType` | No | `-` | - |
79
+ | `analyticsId` | `string` | No | `-` | - |
79
80
  | `aspectRatio` | `string \| number` | No | `-` | - |
80
81
  | `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 | `-` | Background color of the overlay (element being interacted with). |
81
82
  | `blendStyles` | `InteractableBlendStyles` | No | `-` | - |
@@ -111,6 +112,7 @@ function Example() {
111
112
  | `display` | `flex \| none` | No | `-` | - |
112
113
  | `elevation` | `0 \| 1 \| 2` | No | `-` | Determines box shadow styles. Parent should have overflow set to visible to ensure styles are not clipped. Is the element elevated. |
113
114
  | `end` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | ReactNode placed after the value |
115
+ | `eventConfig` | `EventHandlerCustomConfig` | No | `-` | - |
114
116
  | `feedback` | `none \| light \| normal \| heavy` | No | `none` | Haptic feedback to trigger when being pressed. |
115
117
  | `flexBasis` | `string \| number` | No | `-` | - |
116
118
  | `flexDirection` | `row \| column \| row-reverse \| column-reverse` | No | `-` | - |
@@ -776,3 +776,26 @@ Mapping to `styles` keys:
776
776
  | `zIndex` | `number` | No | `-` | - |
777
777
 
778
778
 
779
+ ## Styles
780
+
781
+ | Selector | Static class name | Description |
782
+ | --- | --- | --- |
783
+ | `root` | `-` | - |
784
+ | `contentContainer` | `-` | - |
785
+ | `topContent` | `-` | - |
786
+ | `bottomContent` | `-` | - |
787
+ | `pressable` | `-` | - |
788
+ | `media` | `-` | - |
789
+ | `childrenContainer` | `-` | Wrapper around children inside the top content row (controls flex behavior). |
790
+ | `intermediary` | `-` | - |
791
+ | `end` | `-` | Applied to the container of detail or action |
792
+ | `accessory` | `-` | - |
793
+ | `mainContent` | `-` | - |
794
+ | `titleStack` | `-` | Applied to the VStack of title/subtitle/description. |
795
+ | `titleStackContainer` | `-` | Applied to the Box that wraps around titleStack (controls flex behavior). |
796
+ | `helperText` | `-` | - |
797
+ | `title` | `-` | - |
798
+ | `subtitle` | `-` | - |
799
+ | `description` | `-` | - |
800
+
801
+
@@ -411,6 +411,7 @@ Replace `FloatingAssetCard` with `MediaCard`. Note that the floating variation (
411
411
  | `alignContent` | `flex-start \| flex-end \| center \| stretch \| space-between \| space-around \| space-evenly` | No | `-` | - |
412
412
  | `alignItems` | `flex-start \| flex-end \| center \| stretch \| baseline` | No | `-` | - |
413
413
  | `alignSelf` | `auto \| FlexAlignType` | No | `-` | - |
414
+ | `analyticsId` | `string` | No | `-` | - |
414
415
  | `aspectRatio` | `string \| number` | No | `-` | - |
415
416
  | `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 | `-` | Background color of the overlay (element being interacted with). |
416
417
  | `blendStyles` | `InteractableBlendStyles` | No | `-` | - |
@@ -444,6 +445,7 @@ Replace `FloatingAssetCard` with `MediaCard`. Note that the floating variation (
444
445
  | `disabled` | `boolean` | No | `-` | Is the element currently disabled. Whether the press behavior is disabled. |
445
446
  | `display` | `flex \| none` | No | `-` | - |
446
447
  | `elevation` | `0 \| 1 \| 2` | No | `-` | Determines box shadow styles. Parent should have overflow set to visible to ensure styles are not clipped. Is the element elevated. |
448
+ | `eventConfig` | `EventHandlerCustomConfig` | No | `-` | - |
447
449
  | `feedback` | `none \| light \| normal \| heavy` | No | `none` | Haptic feedback to trigger when being pressed. |
448
450
  | `flexBasis` | `string \| number` | No | `-` | - |
449
451
  | `flexDirection` | `row \| column \| row-reverse \| column-reverse` | No | `-` | - |
@@ -524,3 +526,15 @@ Replace `FloatingAssetCard` with `MediaCard`. Note that the floating variation (
524
526
  | `zIndex` | `number` | No | `-` | - |
525
527
 
526
528
 
529
+ ## Styles
530
+
531
+ | Selector | Static class name | Description |
532
+ | --- | --- | --- |
533
+ | `layoutContainer` | `-` | - |
534
+ | `contentContainer` | `-` | - |
535
+ | `textContainer` | `-` | - |
536
+ | `headerContainer` | `-` | - |
537
+ | `mediaContainer` | `-` | - |
538
+ | `root` | `-` | - |
539
+
540
+
@@ -157,6 +157,7 @@ You can override the automatic spacing with custom values if needed.
157
157
  | `alignContent` | `flex-start \| flex-end \| center \| stretch \| space-between \| space-around \| space-evenly` | No | `-` | - |
158
158
  | `alignItems` | `flex-start \| flex-end \| center \| stretch \| baseline` | No | `-` | - |
159
159
  | `alignSelf` | `auto \| FlexAlignType` | No | `-` | - |
160
+ | `analyticsId` | `string` | No | `-` | - |
160
161
  | `aspectRatio` | `string \| number` | No | `-` | - |
161
162
  | `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 | `-` | Background color of the overlay (element being interacted with). |
162
163
  | `blendStyles` | `InteractableBlendStyles` | No | `-` | - |
@@ -192,6 +193,7 @@ You can override the automatic spacing with custom values if needed.
192
193
  | `display` | `flex \| none` | No | `-` | - |
193
194
  | `elevation` | `0 \| 1 \| 2` | No | `-` | Determines box shadow styles. Parent should have overflow set to visible to ensure styles are not clipped. Is the element elevated. |
194
195
  | `end` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | ReactNode placed after the value |
196
+ | `eventConfig` | `EventHandlerCustomConfig` | No | `-` | - |
195
197
  | `feedback` | `none \| light \| normal \| heavy` | No | `none` | Haptic feedback to trigger when being pressed. |
196
198
  | `flexBasis` | `string \| number` | No | `-` | - |
197
199
  | `flexDirection` | `row \| column \| row-reverse \| column-reverse` | No | `-` | - |
@@ -907,6 +907,7 @@ Replace `UpsellCard` with `MessagingCard` using `type="upsell"`.
907
907
  | `alignContent` | `flex-start \| flex-end \| center \| stretch \| space-between \| space-around \| space-evenly` | No | `-` | - |
908
908
  | `alignItems` | `flex-start \| flex-end \| center \| stretch \| baseline` | No | `-` | - |
909
909
  | `alignSelf` | `auto \| FlexAlignType` | No | `-` | - |
910
+ | `analyticsId` | `string` | No | `-` | - |
910
911
  | `aspectRatio` | `string \| number` | No | `-` | - |
911
912
  | `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 | `-` | Background color of the overlay (element being interacted with). |
912
913
  | `blendStyles` | `InteractableBlendStyles` | No | `-` | - |
@@ -942,6 +943,7 @@ Replace `UpsellCard` with `MessagingCard` using `type="upsell"`.
942
943
  | `dismissButtonAccessibilityLabel` | `string` | No | `'Dismiss {title}' when title is a string, otherwise 'Dismiss card'` | Accessibility label for the dismiss button. |
943
944
  | `display` | `flex \| none` | No | `-` | - |
944
945
  | `elevation` | `0 \| 1 \| 2` | No | `-` | Determines box shadow styles. Parent should have overflow set to visible to ensure styles are not clipped. Is the element elevated. |
946
+ | `eventConfig` | `EventHandlerCustomConfig` | No | `-` | - |
945
947
  | `feedback` | `none \| light \| normal \| heavy` | No | `none` | Haptic feedback to trigger when being pressed. |
946
948
  | `flexBasis` | `string \| number` | No | `-` | - |
947
949
  | `flexDirection` | `row \| column \| row-reverse \| column-reverse` | No | `-` | - |
@@ -1023,3 +1025,15 @@ Replace `UpsellCard` with `MessagingCard` using `type="upsell"`.
1023
1025
  | `zIndex` | `number` | No | `-` | - |
1024
1026
 
1025
1027
 
1028
+ ## Styles
1029
+
1030
+ | Selector | Static class name | Description |
1031
+ | --- | --- | --- |
1032
+ | `layoutContainer` | `-` | - |
1033
+ | `contentContainer` | `-` | - |
1034
+ | `textContainer` | `-` | - |
1035
+ | `mediaContainer` | `-` | - |
1036
+ | `dismissButtonContainer` | `-` | - |
1037
+ | `root` | `-` | - |
1038
+
1039
+
@@ -79,5 +79,6 @@ function Example() {
79
79
  | `testID` | `string` | No | `-` | Used to locate this element in unit and end-to-end tests. Under the hood, testID translates to data-testid on Web. On Mobile, testID stays the same - testID Used to locate this view in end-to-end tests. |
80
80
  | `transparent` | `boolean` | No | `-` | The transparent prop determines whether your modal will fill the entire view. Setting this to true will render the modal over a transparent background. |
81
81
  | `width` | `number` | No | `-` | - |
82
+ | `zIndex` | `number` | No | `-` | Adjust the z-index positioning layer. |
82
83
 
83
84
 
@@ -72,11 +72,16 @@ function Example() {
72
72
  | Prop | Type | Required | Default | Description |
73
73
  | --- | --- | --- | --- | --- |
74
74
  | `action` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | Text or ReactNode to display as the call to action |
75
+ | `aspectRatio` | `auto \| inherit \| string & {} \| -moz-initial \| initial \| revert \| revert-layer \| unset \| number & {}` | No | `-` | The aspect-ratio CSS property allows you to define the desired width-to-height ratio of an elements box |
75
76
  | `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 | `bgAlternate` | Background color for the card. |
76
77
  | `description` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | Text or ReactNode to be displayed below the title in a TextBody |
78
+ | `height` | `string \| number` | No | `-` | Set a fixed height. |
79
+ | `maxHeight` | `string \| number` | No | `-` | Set a maximum height. |
80
+ | `maxWidth` | `string \| number` | No | `-` | Set a maximum width. |
77
81
  | `media` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | Pass any node to be rendered to the right of the text content |
78
82
  | `mediaPosition` | `left \| right` | No | `right` | Set the media position for the pictogram or media. |
79
83
  | `minHeight` | `string \| number` | No | `160` | - |
84
+ | `minWidth` | `string \| number` | No | `-` | Set a minimum width. |
80
85
  | `numberOfLines` | `number` | No | `3` | Maximum number of lines shown for the title and description text. Text that exceeds will be truncated. |
81
86
  | `onActionPress` | `((event: GestureResponderEvent) => void) \| null` | No | `-` | - |
82
87
  | `onDismissPress` | `((event: GestureResponderEvent) => void) \| null` | No | `-` | - |
@@ -93,6 +93,7 @@ function StyledFooter() {
93
93
  | `borderedStart` | `boolean` | No | `-` | Add a border to the leading side of the box. |
94
94
  | `borderedTop` | `boolean` | No | `-` | Add a border to the top side of the box. |
95
95
  | `borderedVertical` | `boolean` | No | `-` | Add a border to the top and bottom sides of the box. |
96
+ | `bottom` | `string \| number` | No | `-` | Position the box to the bottom edge. |
96
97
  | `color` | `currentColor \| fg \| fgMuted \| fgInverse \| fgPrimary \| fgWarning \| fgPositive \| fgNegative \| bg \| bgAlternate \| bgInverse \| bgOverlay \| bgElevation1 \| bgElevation2 \| bgPrimary \| bgPrimaryWash \| bgSecondary \| bgTertiary \| bgSecondaryWash \| bgNegative \| bgNegativeWash \| bgPositive \| bgPositiveWash \| bgWarning \| bgWarningWash \| bgLine \| bgLineHeavy \| bgLineInverse \| bgLinePrimary \| bgLinePrimarySubtle \| accentSubtleRed \| accentBoldRed \| accentSubtleGreen \| accentBoldGreen \| accentSubtleBlue \| accentBoldBlue \| accentSubtlePurple \| accentBoldPurple \| accentSubtleYellow \| accentBoldYellow \| accentSubtleGray \| accentBoldGray \| transparent` | No | `-` | - |
97
98
  | `columnGap` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
98
99
  | `dangerouslySetBackground` | `string` | No | `-` | - |
@@ -111,6 +112,7 @@ function StyledFooter() {
111
112
  | `height` | `string \| number` | No | `-` | - |
112
113
  | `justifyContent` | `flex-start \| flex-end \| center \| space-between \| space-around \| space-evenly` | No | `-` | - |
113
114
  | `key` | `Key \| null` | No | `-` | - |
115
+ | `left` | `string \| number` | No | `-` | Position the box to the left edge. |
114
116
  | `lineHeight` | `inherit \| LineHeight` | No | `-` | - |
115
117
  | `margin` | `0 \| -1 \| -2 \| -0.25 \| -0.5 \| -0.75 \| -1.5 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10` | No | `-` | - |
116
118
  | `marginBottom` | `0 \| -1 \| -2 \| -0.25 \| -0.5 \| -0.75 \| -1.5 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10` | No | `-` | - |
@@ -145,7 +147,9 @@ function StyledFooter() {
145
147
  | `paddingX` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
146
148
  | `paddingY` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
147
149
  | `pin` | `top \| bottom \| left \| right \| all` | No | `-` | Direction in which to absolutely pin the box. |
150
+ | `position` | `static \| relative \| fixed \| absolute \| sticky` | No | `-` | How to position the box within its parent. |
148
151
  | `ref` | `((instance: View \| null) => void) \| RefObject<View> \| null` | No | `-` | - |
152
+ | `right` | `string \| number` | No | `-` | Position the box to the right edge. |
149
153
  | `rowGap` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
150
154
  | `style` | `false \| RegisteredStyle<ViewStyle> \| Value \| AnimatedInterpolation<string \| number> \| WithAnimatedObject<ViewStyle> \| WithAnimatedArray<Falsy \| ViewStyle \| RegisteredStyle<ViewStyle> \| RecursiveArray<Falsy \| ViewStyle \| RegisteredStyle<ViewStyle>> \| readonly (Falsy \| ViewStyle \| RegisteredStyle<ViewStyle>)[]> \| null` | No | `-` | - |
151
155
  | `testID` | `string` | No | `-` | Used to locate this element in unit and end-to-end tests. Under the hood, testID translates to data-testid on Web. On Mobile, testID stays the same - testID Used to locate this element in unit and end-to-end tests. Used to locate this view in end-to-end tests. |
@@ -153,8 +157,10 @@ function StyledFooter() {
153
157
  | `textDecorationLine` | `none \| underline \| line-through \| underline line-through` | No | `-` | - |
154
158
  | `textDecorationStyle` | `solid \| dotted \| dashed \| double` | No | `-` | - |
155
159
  | `textTransform` | `none \| capitalize \| uppercase \| lowercase` | No | `-` | - |
160
+ | `top` | `string \| number` | No | `-` | Position the box to the top edge. |
156
161
  | `transform` | `string \| (({ scaleX: AnimatableNumericValue; } & { scaleY?: undefined; translateX?: undefined; translateY?: undefined; perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ scaleY: AnimatableNumericValue; } & { scaleX?: undefined; translateX?: undefined; translateY?: undefined; perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ translateX: AnimatableNumericValue \| ${number}%; } & { scaleX?: undefined; scaleY?: undefined; translateY?: undefined; perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ translateY: AnimatableNumericValue \| ${number}%; } & { scaleX?: undefined; scaleY?: undefined; translateX?: undefined; perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ perspective: AnimatableNumericValue; } & { scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ rotate: AnimatableStringValue; } & { scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; perspective?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ rotateX: AnimatableStringValue; } & { scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; perspective?: undefined; rotate?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ rotateY: AnimatableStringValue; } & { scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateZ?: undefined; scale?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ rotateZ: AnimatableStringValue; } & { scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; scale?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ scale: AnimatableNumericValue; } & { scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ skewX: AnimatableStringValue; } & { scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ skewY: AnimatableStringValue; } & { scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; skewX?: undefined; matrix?: undefined; }) \| ({ matrix: AnimatableNumericValue[]; } & { scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; skewX?: undefined; skewY?: undefined; }))[]` | No | `-` | - |
157
162
  | `userSelect` | `none \| auto \| contain \| text \| all` | No | `-` | - |
158
163
  | `width` | `string \| number` | No | `-` | - |
164
+ | `zIndex` | `number` | No | `-` | Adjust the z-index positioning layer. |
159
165
 
160
166
 
@@ -116,6 +116,7 @@ function Example() {
116
116
  | `borderedStart` | `boolean` | No | `-` | Add a border to the leading side of the box. |
117
117
  | `borderedTop` | `boolean` | No | `-` | Add a border to the top side of the box. |
118
118
  | `borderedVertical` | `boolean` | No | `-` | Add a border to the top and bottom sides of the box. |
119
+ | `bottom` | `string \| number` | No | `-` | Position the box to the bottom edge. |
119
120
  | `color` | `currentColor \| fg \| fgMuted \| fgInverse \| fgPrimary \| fgWarning \| fgPositive \| fgNegative \| bg \| bgAlternate \| bgInverse \| bgOverlay \| bgElevation1 \| bgElevation2 \| bgPrimary \| bgPrimaryWash \| bgSecondary \| bgTertiary \| bgSecondaryWash \| bgNegative \| bgNegativeWash \| bgPositive \| bgPositiveWash \| bgWarning \| bgWarningWash \| bgLine \| bgLineHeavy \| bgLineInverse \| bgLinePrimary \| bgLinePrimarySubtle \| accentSubtleRed \| accentBoldRed \| accentSubtleGreen \| accentBoldGreen \| accentSubtleBlue \| accentBoldBlue \| accentSubtlePurple \| accentBoldPurple \| accentSubtleYellow \| accentBoldYellow \| accentSubtleGray \| accentBoldGray \| transparent` | No | `-` | - |
120
121
  | `columnGap` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
121
122
  | `dangerouslySetBackground` | `string` | No | `-` | - |
@@ -135,6 +136,7 @@ function Example() {
135
136
  | `height` | `string \| number` | No | `-` | - |
136
137
  | `justifyContent` | `flex-start \| flex-end \| center \| space-between \| space-around \| space-evenly` | No | `-` | - |
137
138
  | `key` | `Key \| null` | No | `-` | - |
139
+ | `left` | `string \| number` | No | `-` | Position the box to the left edge. |
138
140
  | `lineHeight` | `inherit \| LineHeight` | No | `-` | - |
139
141
  | `margin` | `0 \| -1 \| -2 \| -0.25 \| -0.5 \| -0.75 \| -1.5 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10` | No | `-` | - |
140
142
  | `marginBottom` | `0 \| -1 \| -2 \| -0.25 \| -0.5 \| -0.75 \| -1.5 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10` | No | `-` | - |
@@ -169,7 +171,9 @@ function Example() {
169
171
  | `paddingX` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
170
172
  | `paddingY` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
171
173
  | `pin` | `top \| bottom \| left \| right \| all` | No | `-` | Direction in which to absolutely pin the box. |
174
+ | `position` | `static \| relative \| fixed \| absolute \| sticky` | No | `-` | How to position the box within its parent. |
172
175
  | `ref` | `((instance: View \| null) => void) \| RefObject<View> \| null` | No | `-` | - |
176
+ | `right` | `string \| number` | No | `-` | Position the box to the right edge. |
173
177
  | `rowGap` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
174
178
  | `start` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | Optional. Accepts a ReactNode. Used for placing primary content on the left side of the page header, such as a header title, logo, or icon button. |
175
179
  | `style` | `false \| RegisteredStyle<ViewStyle> \| Value \| AnimatedInterpolation<string \| number> \| WithAnimatedObject<ViewStyle> \| WithAnimatedArray<Falsy \| ViewStyle \| RegisteredStyle<ViewStyle> \| RecursiveArray<Falsy \| ViewStyle \| RegisteredStyle<ViewStyle>> \| readonly (Falsy \| ViewStyle \| RegisteredStyle<ViewStyle>)[]> \| null` | No | `-` | - |
@@ -180,8 +184,20 @@ function Example() {
180
184
  | `textDecorationStyle` | `solid \| dotted \| dashed \| double` | No | `-` | - |
181
185
  | `textTransform` | `none \| capitalize \| uppercase \| lowercase` | No | `-` | - |
182
186
  | `title` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | Optional. Accepts a ReactNode. Intended for main title within the Page Header or for secondary content in the center of the header, like a navigation stepper or search bar. |
187
+ | `top` | `string \| number` | No | `-` | Position the box to the top edge. |
183
188
  | `transform` | `string \| (({ scaleX: AnimatableNumericValue; } & { scaleY?: undefined; translateX?: undefined; translateY?: undefined; perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ scaleY: AnimatableNumericValue; } & { scaleX?: undefined; translateX?: undefined; translateY?: undefined; perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ translateX: AnimatableNumericValue \| ${number}%; } & { scaleX?: undefined; scaleY?: undefined; translateY?: undefined; perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ translateY: AnimatableNumericValue \| ${number}%; } & { scaleX?: undefined; scaleY?: undefined; translateX?: undefined; perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ perspective: AnimatableNumericValue; } & { scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ rotate: AnimatableStringValue; } & { scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; perspective?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ rotateX: AnimatableStringValue; } & { scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; perspective?: undefined; rotate?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ rotateY: AnimatableStringValue; } & { scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateZ?: undefined; scale?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ rotateZ: AnimatableStringValue; } & { scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; scale?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ scale: AnimatableNumericValue; } & { scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ skewX: AnimatableStringValue; } & { scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ skewY: AnimatableStringValue; } & { scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; skewX?: undefined; matrix?: undefined; }) \| ({ matrix: AnimatableNumericValue[]; } & { scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; skewX?: undefined; skewY?: undefined; }))[]` | No | `-` | - |
184
189
  | `userSelect` | `none \| auto \| contain \| text \| all` | No | `-` | - |
185
190
  | `width` | `string \| number` | No | `-` | - |
191
+ | `zIndex` | `number` | No | `-` | Adjust the z-index positioning layer. |
192
+
193
+
194
+ ## Styles
195
+
196
+ | Selector | Static class name | Description |
197
+ | --- | --- | --- |
198
+ | `root` | `-` | root element. |
199
+ | `start` | `-` | start element. |
200
+ | `end` | `-` | end element. |
201
+ | `title` | `-` | title element. |
186
202
 
187
203