@coinbase/cds-mcp-server 8.66.2 → 9.0.0-rc.2
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/AccordionItem.txt +4 -4
- package/mcp-docs/mobile/components/Alert.txt +2 -1
- package/mcp-docs/mobile/components/AreaChart.txt +40 -40
- package/mcp-docs/mobile/components/Avatar.txt +33 -33
- package/mcp-docs/mobile/components/AvatarButton.txt +35 -35
- package/mcp-docs/mobile/components/Banner.txt +55 -40
- package/mcp-docs/mobile/components/BarChart.txt +40 -40
- package/mcp-docs/mobile/components/Box.txt +34 -34
- package/mcp-docs/mobile/components/BrowserBar.txt +35 -35
- package/mcp-docs/mobile/components/Button.txt +52 -42
- package/mcp-docs/mobile/components/Calendar.txt +34 -34
- package/mcp-docs/mobile/components/Carousel.txt +48 -58
- package/mcp-docs/mobile/components/CartesianChart.txt +40 -40
- package/mcp-docs/mobile/components/CellMedia.txt +1 -1
- package/mcp-docs/mobile/components/Checkbox.txt +3 -3
- package/mcp-docs/mobile/components/CheckboxCell.txt +37 -37
- package/mcp-docs/mobile/components/CheckboxGroup.txt +4 -4
- package/mcp-docs/mobile/components/Chip.txt +39 -39
- package/mcp-docs/mobile/components/Coachmark.txt +39 -39
- package/mcp-docs/mobile/components/Collapsible.txt +2 -2
- package/mcp-docs/mobile/components/Combobox.txt +10 -10
- package/mcp-docs/mobile/components/ContainedAssetCard.txt +7 -7
- package/mcp-docs/mobile/components/ContentCard.txt +37 -37
- package/mcp-docs/mobile/components/ContentCardBody.txt +42 -42
- package/mcp-docs/mobile/components/ContentCardFooter.txt +34 -34
- package/mcp-docs/mobile/components/ContentCardHeader.txt +41 -41
- package/mcp-docs/mobile/components/ContentCell.txt +49 -49
- package/mcp-docs/mobile/components/ControlGroup.txt +36 -36
- package/mcp-docs/mobile/components/DataCard.txt +47 -47
- package/mcp-docs/mobile/components/DateInput.txt +25 -22
- package/mcp-docs/mobile/components/DatePicker.txt +25 -22
- package/mcp-docs/mobile/components/Divider.txt +33 -33
- package/mcp-docs/mobile/components/DotCount.txt +4 -2
- package/mcp-docs/mobile/components/DotStatusColor.txt +1 -1
- package/mcp-docs/mobile/components/DotSymbol.txt +6 -6
- package/mcp-docs/mobile/components/Fallback.txt +32 -32
- package/mcp-docs/mobile/components/FloatingAssetCard.txt +4 -4
- package/mcp-docs/mobile/components/HStack.txt +34 -34
- package/mcp-docs/mobile/components/HeroSquare.txt +1 -1
- package/mcp-docs/mobile/components/Icon.txt +3 -3
- package/mcp-docs/mobile/components/IconButton.txt +38 -58
- package/mcp-docs/mobile/components/InputChip.txt +39 -39
- package/mcp-docs/mobile/components/Interactable.txt +34 -34
- package/mcp-docs/mobile/components/Legend.txt +43 -41
- package/mcp-docs/mobile/components/LineChart.txt +40 -40
- package/mcp-docs/mobile/components/Link.txt +41 -38
- package/mcp-docs/mobile/components/ListCell.txt +52 -52
- package/mcp-docs/mobile/components/Lottie.txt +34 -34
- package/mcp-docs/mobile/components/LottieStatusAnimation.txt +2 -2
- package/mcp-docs/mobile/components/MediaCard.txt +41 -41
- package/mcp-docs/mobile/components/MediaChip.txt +39 -39
- package/mcp-docs/mobile/components/MessagingCard.txt +42 -42
- package/mcp-docs/mobile/components/Modal.txt +6 -2
- package/mcp-docs/mobile/components/ModalBody.txt +8 -8
- package/mcp-docs/mobile/components/ModalFooter.txt +33 -33
- package/mcp-docs/mobile/components/ModalHeader.txt +34 -34
- package/mcp-docs/mobile/components/MultiContentModule.txt +40 -40
- package/mcp-docs/mobile/components/NavigationTitle.txt +38 -36
- package/mcp-docs/mobile/components/NavigationTitleSelect.txt +38 -36
- package/mcp-docs/mobile/components/NudgeCard.txt +6 -6
- package/mcp-docs/mobile/components/Numpad.txt +37 -37
- package/mcp-docs/mobile/components/Overlay.txt +33 -33
- package/mcp-docs/mobile/components/PageFooter.txt +36 -30
- package/mcp-docs/mobile/components/PageHeader.txt +38 -32
- package/mcp-docs/mobile/components/PercentageBarChart.txt +40 -40
- package/mcp-docs/mobile/components/PeriodSelector.txt +39 -39
- package/mcp-docs/mobile/components/Pictogram.txt +1 -1
- package/mcp-docs/mobile/components/Point.txt +2 -2
- package/mcp-docs/mobile/components/PortalProvider.txt +2 -2
- package/mcp-docs/mobile/components/Pressable.txt +36 -36
- package/mcp-docs/mobile/components/ProgressBar.txt +2 -2
- package/mcp-docs/mobile/components/ProgressBarWithFixedLabels.txt +1 -1
- package/mcp-docs/mobile/components/ProgressBarWithFloatLabel.txt +1 -1
- package/mcp-docs/mobile/components/ProgressCircle.txt +3 -3
- package/mcp-docs/mobile/components/Radio.txt +3 -3
- package/mcp-docs/mobile/components/RadioCell.txt +37 -37
- package/mcp-docs/mobile/components/RadioGroup.txt +3 -3
- package/mcp-docs/mobile/components/ReferenceLine.txt +1 -1
- package/mcp-docs/mobile/components/RemoteImage.txt +6 -6
- package/mcp-docs/mobile/components/RemoteImageGroup.txt +1 -1
- package/mcp-docs/mobile/components/RollingNumber.txt +41 -39
- package/mcp-docs/mobile/components/Scrubber.txt +2 -2
- package/mcp-docs/mobile/components/SearchInput.txt +25 -22
- package/mcp-docs/mobile/components/SectionHeader.txt +7 -7
- package/mcp-docs/mobile/components/SegmentedTabs.txt +34 -34
- package/mcp-docs/mobile/components/Select.txt +3 -3
- package/mcp-docs/mobile/components/SelectAlpha.txt +10 -10
- package/mcp-docs/mobile/components/SelectChip.txt +42 -40
- package/mcp-docs/mobile/components/SelectChipAlpha.txt +11 -11
- package/mcp-docs/mobile/components/SelectOption.txt +10 -10
- package/mcp-docs/mobile/components/SlideButton.txt +40 -40
- package/mcp-docs/mobile/components/Spacer.txt +7 -7
- package/mcp-docs/mobile/components/Sparkline.txt +3 -3
- package/mcp-docs/mobile/components/SparklineGradient.txt +3 -3
- package/mcp-docs/mobile/components/SparklineInteractive.txt +6 -6
- package/mcp-docs/mobile/components/SparklineInteractiveHeader.txt +5 -5
- package/mcp-docs/mobile/components/Spinner.txt +2 -2
- package/mcp-docs/mobile/components/SpotIcon.txt +1 -1
- package/mcp-docs/mobile/components/SpotRectangle.txt +1 -1
- package/mcp-docs/mobile/components/SpotSquare.txt +1 -1
- package/mcp-docs/mobile/components/Stepper.txt +37 -36
- package/mcp-docs/mobile/components/Switch.txt +13 -3
- package/mcp-docs/mobile/components/TabIndicator.txt +1 -1
- package/mcp-docs/mobile/components/TabLabel.txt +39 -37
- package/mcp-docs/mobile/components/TabNavigation.txt +34 -34
- package/mcp-docs/mobile/components/TabbedChips.txt +34 -34
- package/mcp-docs/mobile/components/TabbedChipsAlpha.txt +34 -34
- package/mcp-docs/mobile/components/Tabs.txt +34 -34
- package/mcp-docs/mobile/components/Tag.txt +41 -41
- package/mcp-docs/mobile/components/Text.txt +51 -58
- package/mcp-docs/mobile/components/TextInput.txt +25 -22
- package/mcp-docs/mobile/components/ThemeProvider.txt +3 -1
- package/mcp-docs/mobile/components/Toast.txt +34 -34
- package/mcp-docs/mobile/components/Tooltip.txt +2 -2
- package/mcp-docs/mobile/components/TopNavBar.txt +9 -9
- package/mcp-docs/mobile/components/Tray.txt +5 -3
- package/mcp-docs/mobile/components/UpsellCard.txt +15 -14
- package/mcp-docs/mobile/components/VStack.txt +34 -34
- package/mcp-docs/mobile/components/XAxis.txt +1 -1
- package/mcp-docs/mobile/components/YAxis.txt +1 -1
- package/mcp-docs/mobile/getting-started/installation.txt +9 -3
- package/mcp-docs/mobile/hooks/useMergeRefs.txt +5 -5
- package/mcp-docs/mobile/routes.txt +1 -1
- package/mcp-docs/web/components/AccordionItem.txt +4 -4
- package/mcp-docs/web/components/Alert.txt +3 -2
- package/mcp-docs/web/components/AreaChart.txt +63 -63
- package/mcp-docs/web/components/Avatar.txt +49 -49
- package/mcp-docs/web/components/AvatarButton.txt +54 -324
- package/mcp-docs/web/components/Banner.txt +71 -55
- package/mcp-docs/web/components/BarChart.txt +58 -58
- package/mcp-docs/web/components/Box.txt +49 -312
- package/mcp-docs/web/components/Button.txt +62 -324
- package/mcp-docs/web/components/Calendar.txt +49 -49
- package/mcp-docs/web/components/Carousel.txt +65 -72
- package/mcp-docs/web/components/CartesianChart.txt +63 -63
- package/mcp-docs/web/components/CellMedia.txt +1 -1
- package/mcp-docs/web/components/Checkbox.txt +9 -7
- package/mcp-docs/web/components/CheckboxCell.txt +52 -52
- package/mcp-docs/web/components/CheckboxGroup.txt +3 -3
- package/mcp-docs/web/components/Chip.txt +51 -51
- package/mcp-docs/web/components/Coachmark.txt +55 -55
- package/mcp-docs/web/components/Collapsible.txt +2 -2
- package/mcp-docs/web/components/Combobox.txt +8 -8
- package/mcp-docs/web/components/ContainedAssetCard.txt +60 -55
- package/mcp-docs/web/components/ContentCard.txt +54 -317
- package/mcp-docs/web/components/ContentCardBody.txt +57 -318
- package/mcp-docs/web/components/ContentCardFooter.txt +49 -312
- package/mcp-docs/web/components/ContentCardHeader.txt +56 -318
- package/mcp-docs/web/components/ContentCell.txt +63 -322
- package/mcp-docs/web/components/ControlGroup.txt +50 -50
- package/mcp-docs/web/components/DataCard.txt +60 -60
- package/mcp-docs/web/components/DateInput.txt +54 -54
- package/mcp-docs/web/components/DatePicker.txt +54 -54
- package/mcp-docs/web/components/Divider.txt +49 -49
- package/mcp-docs/web/components/DotCount.txt +3 -1
- package/mcp-docs/web/components/DotStatusColor.txt +1 -1
- package/mcp-docs/web/components/DotSymbol.txt +6 -6
- package/mcp-docs/web/components/Dropdown.txt +3 -3
- package/mcp-docs/web/components/Fallback.txt +49 -312
- package/mcp-docs/web/components/FloatingAssetCard.txt +53 -53
- package/mcp-docs/web/components/FullscreenAlert.txt +1 -1
- package/mcp-docs/web/components/FullscreenModal.txt +5 -4
- package/mcp-docs/web/components/FullscreenModalLayout.txt +3 -2
- package/mcp-docs/web/components/Grid.txt +51 -314
- package/mcp-docs/web/components/GridColumn.txt +48 -311
- package/mcp-docs/web/components/HStack.txt +49 -312
- package/mcp-docs/web/components/HeroSquare.txt +1 -1
- package/mcp-docs/web/components/Icon.txt +51 -51
- package/mcp-docs/web/components/IconButton.txt +51 -341
- package/mcp-docs/web/components/InputChip.txt +51 -51
- package/mcp-docs/web/components/Interactable.txt +48 -319
- package/mcp-docs/web/components/Legend.txt +62 -62
- package/mcp-docs/web/components/LineChart.txt +63 -63
- package/mcp-docs/web/components/Link.txt +48 -318
- package/mcp-docs/web/components/ListCell.txt +66 -325
- package/mcp-docs/web/components/Lottie.txt +49 -49
- package/mcp-docs/web/components/LottieStatusAnimation.txt +2 -2
- package/mcp-docs/web/components/MediaCard.txt +53 -53
- package/mcp-docs/web/components/MediaChip.txt +51 -51
- package/mcp-docs/web/components/MessagingCard.txt +54 -54
- package/mcp-docs/web/components/Modal.txt +51 -50
- package/mcp-docs/web/components/ModalBody.txt +49 -49
- package/mcp-docs/web/components/ModalFooter.txt +49 -49
- package/mcp-docs/web/components/ModalHeader.txt +50 -50
- package/mcp-docs/web/components/MultiContentModule.txt +55 -316
- package/mcp-docs/web/components/NavigationBar.txt +53 -53
- package/mcp-docs/web/components/NavigationTitle.txt +103 -0
- package/mcp-docs/web/components/NavigationTitleSelect.txt +48 -48
- package/mcp-docs/web/components/NudgeCard.txt +53 -53
- package/mcp-docs/web/components/Overlay.txt +49 -49
- package/mcp-docs/web/components/PageFooter.txt +54 -48
- package/mcp-docs/web/components/PageHeader.txt +58 -52
- package/mcp-docs/web/components/Pagination.txt +49 -49
- package/mcp-docs/web/components/PercentageBarChart.txt +58 -58
- package/mcp-docs/web/components/PeriodSelector.txt +62 -62
- package/mcp-docs/web/components/Pictogram.txt +1 -1
- package/mcp-docs/web/components/Point.txt +5 -14
- package/mcp-docs/web/components/PopoverPanel.txt +1 -1
- package/mcp-docs/web/components/PortalProvider.txt +2 -2
- package/mcp-docs/web/components/Pressable.txt +48 -319
- package/mcp-docs/web/components/ProgressBar.txt +1 -1
- package/mcp-docs/web/components/ProgressCircle.txt +2 -2
- package/mcp-docs/web/components/Radio.txt +9 -7
- package/mcp-docs/web/components/RadioCell.txt +52 -52
- package/mcp-docs/web/components/RadioGroup.txt +3 -3
- package/mcp-docs/web/components/ReferenceLine.txt +2 -2
- package/mcp-docs/web/components/RemoteImage.txt +48 -48
- package/mcp-docs/web/components/RemoteImageGroup.txt +3 -3
- package/mcp-docs/web/components/RollingNumber.txt +51 -313
- package/mcp-docs/web/components/Scrubber.txt +2 -2
- package/mcp-docs/web/components/SearchInput.txt +56 -56
- package/mcp-docs/web/components/SectionHeader.txt +55 -55
- package/mcp-docs/web/components/SegmentedControl.txt +1 -1
- package/mcp-docs/web/components/SegmentedTabs.txt +49 -49
- package/mcp-docs/web/components/Select.txt +3 -3
- package/mcp-docs/web/components/SelectAlpha.txt +8 -8
- package/mcp-docs/web/components/SelectChip.txt +55 -55
- package/mcp-docs/web/components/SelectChipAlpha.txt +8 -8
- package/mcp-docs/web/components/SelectOption.txt +56 -56
- package/mcp-docs/web/components/Sidebar.txt +66 -56
- package/mcp-docs/web/components/SidebarItem.txt +10 -111
- package/mcp-docs/web/components/SidebarMoreMenu.txt +2 -2
- package/mcp-docs/web/components/Spacer.txt +55 -318
- package/mcp-docs/web/components/Sparkline.txt +3 -3
- package/mcp-docs/web/components/SparklineGradient.txt +3 -3
- package/mcp-docs/web/components/SparklineInteractive.txt +4 -4
- package/mcp-docs/web/components/SparklineInteractiveHeader.txt +4 -4
- package/mcp-docs/web/components/Spinner.txt +49 -49
- package/mcp-docs/web/components/SpotIcon.txt +1 -1
- package/mcp-docs/web/components/SpotRectangle.txt +1 -1
- package/mcp-docs/web/components/SpotSquare.txt +1 -1
- package/mcp-docs/web/components/Stepper.txt +53 -53
- package/mcp-docs/web/components/Switch.txt +21 -7
- package/mcp-docs/web/components/TabIndicator.txt +1 -1
- package/mcp-docs/web/components/TabLabel.txt +50 -50
- package/mcp-docs/web/components/TabNavigation.txt +48 -48
- package/mcp-docs/web/components/TabbedChips.txt +49 -49
- package/mcp-docs/web/components/TabbedChipsAlpha.txt +49 -49
- package/mcp-docs/web/components/Table.txt +4 -4
- package/mcp-docs/web/components/TableCaption.txt +1 -1
- package/mcp-docs/web/components/TableCell.txt +2 -2
- package/mcp-docs/web/components/TableRow.txt +1 -1
- package/mcp-docs/web/components/Tabs.txt +49 -49
- package/mcp-docs/web/components/Tag.txt +52 -52
- package/mcp-docs/web/components/Text.txt +49 -312
- package/mcp-docs/web/components/TextInput.txt +56 -56
- package/mcp-docs/web/components/ThemeProvider.txt +24 -4
- package/mcp-docs/web/components/TileButton.txt +48 -318
- package/mcp-docs/web/components/Toast.txt +51 -51
- package/mcp-docs/web/components/Tooltip.txt +3 -3
- package/mcp-docs/web/components/Tray.txt +2 -2
- package/mcp-docs/web/components/UpsellCard.txt +15 -14
- package/mcp-docs/web/components/VStack.txt +49 -312
- package/mcp-docs/web/components/XAxis.txt +1 -1
- package/mcp-docs/web/components/YAxis.txt +1 -1
- package/mcp-docs/web/getting-started/installation.txt +13 -5
- package/mcp-docs/web/hooks/useMergeRefs.txt +5 -5
- package/mcp-docs/web/routes.txt +1 -1
- package/package.json +1 -1
|
@@ -122,15 +122,15 @@ function Example() {
|
|
|
122
122
|
|
|
123
123
|
| Prop | Type | Required | Default | Description |
|
|
124
124
|
| --- | --- | --- | --- | --- |
|
|
125
|
-
| `header` | `null \| string \| number \| false \| true \| ReactElement<
|
|
126
|
-
| `title` | `null \| string \| number \| false \| true \| ReactElement<
|
|
127
|
-
| `children` | `null \| string \| number \| false \| true \| ReactElement<
|
|
128
|
-
| `description` | `null \| string \| number \| false \| true \| ReactElement<
|
|
129
|
-
| `maxWidth` | `
|
|
130
|
-
| `minWidth` | `
|
|
125
|
+
| `header` | `null \| string \| number \| bigint \| false \| true \| ReactElement<unknown, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal \| Promise<AwaitedReactNode>` | Yes | `-` | Header to display Remote Image or other content. |
|
|
126
|
+
| `title` | `null \| string \| number \| bigint \| false \| true \| ReactElement<unknown, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal \| Promise<AwaitedReactNode>` | Yes | `-` | Text or ReactNode to be displayed in TextHeadline |
|
|
127
|
+
| `children` | `null \| string \| number \| bigint \| false \| true \| ReactElement<unknown, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal \| Promise<AwaitedReactNode>` | No | `-` | Children to be rendered in the card |
|
|
128
|
+
| `description` | `null \| string \| number \| bigint \| false \| true \| ReactElement<unknown, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal \| Promise<AwaitedReactNode>` | No | `-` | Content to be displayed below the title |
|
|
129
|
+
| `maxWidth` | `null \| number \| AnimatedNode \| auto \| ${number}%` | No | `-` | - |
|
|
130
|
+
| `minWidth` | `null \| number \| AnimatedNode \| auto \| ${number}%` | No | `-` | - |
|
|
131
131
|
| `onPress` | `((event: GestureResponderEvent) => void) \| null` | No | `-` | Called when a single tap gesture is detected. |
|
|
132
132
|
| `size` | `s \| l` | No | `'s'` | Variant for card size. Can be small or large. |
|
|
133
|
-
| `subtitle` | `null \| string \| number \| false \| true \| ReactElement<
|
|
133
|
+
| `subtitle` | `null \| string \| number \| bigint \| false \| true \| ReactElement<unknown, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal \| Promise<AwaitedReactNode>` | No | `-` | Text or ReactNode to be displayed above Title |
|
|
134
134
|
| `testID` | `string` | No | `-` | Used to locate this element in unit and end-to-end tests. Under the hood, testID translates to data-testid on Web. On Mobile, testID stays the same - testID |
|
|
135
135
|
|
|
136
136
|
|
|
@@ -140,7 +140,7 @@ function Example() {
|
|
|
140
140
|
|
|
141
141
|
### With Background
|
|
142
142
|
|
|
143
|
-
Apply a background color to the card using the `background` prop. When using a background, consider using `variant="
|
|
143
|
+
Apply a background color to the card using the `background` prop. When using a background, consider using `variant="inverse"` on buttons.
|
|
144
144
|
|
|
145
145
|
```jsx
|
|
146
146
|
function Example() {
|
|
@@ -167,7 +167,7 @@ function Example() {
|
|
|
167
167
|
<RemoteImage source={{ uri: assets.eth.imageUrl }} />
|
|
168
168
|
<RemoteImage source={{ uri: assets.polygon.imageUrl }} />
|
|
169
169
|
</RemoteImageGroup>
|
|
170
|
-
<Button compact variant="
|
|
170
|
+
<Button compact variant="inverse">
|
|
171
171
|
Share
|
|
172
172
|
</Button>
|
|
173
173
|
</ContentCardFooter>
|
|
@@ -289,7 +289,7 @@ function AccessibleCard() {
|
|
|
289
289
|
</Text>
|
|
290
290
|
<Button
|
|
291
291
|
compact
|
|
292
|
-
variant="
|
|
292
|
+
variant="inverse"
|
|
293
293
|
onPress={() => console.log('Button pressed - navigating...')}
|
|
294
294
|
>
|
|
295
295
|
View Details
|
|
@@ -342,13 +342,13 @@ When customizing card backgrounds, ensure sufficient color contrast between text
|
|
|
342
342
|
| `borderedStart` | `boolean` | No | `-` | Add a border to the leading side of the box. |
|
|
343
343
|
| `borderedTop` | `boolean` | No | `-` | Add a border to the top side of the box. |
|
|
344
344
|
| `borderedVertical` | `boolean` | No | `-` | Add a border to the top and bottom sides of the box. |
|
|
345
|
-
| `bottom` | `
|
|
345
|
+
| `bottom` | `null \| number \| AnimatedNode \| auto \| ${number}%` | No | `-` | - |
|
|
346
346
|
| `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 | `-` | - |
|
|
347
|
-
| `columnGap` | `0 \| 1 \| 2 \|
|
|
347
|
+
| `columnGap` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
|
|
348
348
|
| `dangerouslySetBackground` | `string` | No | `-` | - |
|
|
349
|
-
| `display` | `flex \| none` | No | `-` | - |
|
|
349
|
+
| `display` | `flex \| none \| contents` | No | `-` | - |
|
|
350
350
|
| `elevation` | `0 \| 1 \| 2` | No | `-` | Determines box shadow styles. Parent should have overflow set to visible to ensure styles are not clipped. |
|
|
351
|
-
| `flexBasis` | `
|
|
351
|
+
| `flexBasis` | `null \| number \| AnimatedNode \| auto \| ${number}%` | No | `-` | - |
|
|
352
352
|
| `flexDirection` | `row \| column \| row-reverse \| column-reverse` | No | `-` | - |
|
|
353
353
|
| `flexGrow` | `number` | No | `-` | - |
|
|
354
354
|
| `flexShrink` | `number` | No | `-` | - |
|
|
@@ -357,23 +357,23 @@ When customizing card backgrounds, ensure sufficient color contrast between text
|
|
|
357
357
|
| `fontFamily` | `inherit \| FontFamily` | No | `-` | - |
|
|
358
358
|
| `fontSize` | `inherit \| FontSize` | No | `-` | - |
|
|
359
359
|
| `fontWeight` | `inherit \| FontWeight` | No | `-` | - |
|
|
360
|
-
| `gap` | `0 \| 1 \| 2 \|
|
|
361
|
-
| `height` | `
|
|
360
|
+
| `gap` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
|
|
361
|
+
| `height` | `null \| number \| AnimatedNode \| auto \| ${number}%` | No | `-` | - |
|
|
362
362
|
| `justifyContent` | `flex-start \| flex-end \| center \| space-between \| space-around \| space-evenly` | No | `-` | - |
|
|
363
363
|
| `key` | `Key \| null` | No | `-` | - |
|
|
364
|
-
| `left` | `
|
|
364
|
+
| `left` | `null \| number \| AnimatedNode \| auto \| ${number}%` | No | `-` | - |
|
|
365
365
|
| `lineHeight` | `inherit \| LineHeight` | No | `-` | - |
|
|
366
|
-
| `margin` | `0 \| -1 \| -2 \| -
|
|
367
|
-
| `marginBottom` | `0 \| -1 \| -2 \| -
|
|
368
|
-
| `marginEnd` | `0 \| -1 \| -2 \| -
|
|
369
|
-
| `marginStart` | `0 \| -1 \| -2 \| -
|
|
370
|
-
| `marginTop` | `0 \| -1 \| -2 \| -
|
|
371
|
-
| `marginX` | `0 \| -1 \| -2 \| -
|
|
372
|
-
| `marginY` | `0 \| -1 \| -2 \| -
|
|
373
|
-
| `maxHeight` | `
|
|
374
|
-
| `maxWidth` | `
|
|
375
|
-
| `minHeight` | `
|
|
376
|
-
| `minWidth` | `
|
|
366
|
+
| `margin` | `0 \| -1 \| -2 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1.5` | No | `-` | - |
|
|
367
|
+
| `marginBottom` | `0 \| -1 \| -2 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1.5` | No | `-` | - |
|
|
368
|
+
| `marginEnd` | `0 \| -1 \| -2 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1.5` | No | `-` | - |
|
|
369
|
+
| `marginStart` | `0 \| -1 \| -2 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1.5` | No | `-` | - |
|
|
370
|
+
| `marginTop` | `0 \| -1 \| -2 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1.5` | No | `-` | - |
|
|
371
|
+
| `marginX` | `0 \| -1 \| -2 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1.5` | No | `-` | - |
|
|
372
|
+
| `marginY` | `0 \| -1 \| -2 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1.5` | No | `-` | - |
|
|
373
|
+
| `maxHeight` | `null \| number \| AnimatedNode \| auto \| ${number}%` | No | `-` | - |
|
|
374
|
+
| `maxWidth` | `null \| number \| AnimatedNode \| auto \| ${number}%` | No | `-` | - |
|
|
375
|
+
| `minHeight` | `null \| number \| AnimatedNode \| auto \| ${number}%` | No | `-` | - |
|
|
376
|
+
| `minWidth` | `null \| number \| AnimatedNode \| auto \| ${number}%` | No | `-` | - |
|
|
377
377
|
| `onPointerCancel` | `((event: PointerEvent) => void)` | No | `-` | - |
|
|
378
378
|
| `onPointerCancelCapture` | `((event: PointerEvent) => void)` | No | `-` | - |
|
|
379
379
|
| `onPointerDown` | `((event: PointerEvent) => void)` | No | `-` | - |
|
|
@@ -388,28 +388,28 @@ When customizing card backgrounds, ensure sufficient color contrast between text
|
|
|
388
388
|
| `onPointerUpCapture` | `((event: PointerEvent) => void)` | No | `-` | - |
|
|
389
389
|
| `opacity` | `number \| AnimatedNode` | No | `-` | - |
|
|
390
390
|
| `overflow` | `visible \| hidden \| scroll` | No | `-` | - |
|
|
391
|
-
| `padding` | `0 \| 1 \| 2 \|
|
|
392
|
-
| `paddingBottom` | `0 \| 1 \| 2 \|
|
|
393
|
-
| `paddingEnd` | `0 \| 1 \| 2 \|
|
|
394
|
-
| `paddingStart` | `0 \| 1 \| 2 \|
|
|
395
|
-
| `paddingTop` | `0 \| 1 \| 2 \|
|
|
396
|
-
| `paddingX` | `0 \| 1 \| 2 \|
|
|
397
|
-
| `paddingY` | `0 \| 1 \| 2 \|
|
|
391
|
+
| `padding` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
|
|
392
|
+
| `paddingBottom` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
|
|
393
|
+
| `paddingEnd` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
|
|
394
|
+
| `paddingStart` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
|
|
395
|
+
| `paddingTop` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
|
|
396
|
+
| `paddingX` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
|
|
397
|
+
| `paddingY` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
|
|
398
398
|
| `pin` | `top \| bottom \| left \| right \| all` | No | `-` | Direction in which to absolutely pin the box. |
|
|
399
|
-
| `position` | `
|
|
400
|
-
| `ref` | `(
|
|
401
|
-
| `right` | `
|
|
402
|
-
| `rowGap` | `0 \| 1 \| 2 \|
|
|
403
|
-
| `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 | `-` | - |
|
|
404
|
-
| `testID` | `string` | No | `-` | Used to locate this element in unit and end-to-end tests. Used to locate this view in end-to-end tests. |
|
|
399
|
+
| `position` | `absolute \| relative \| static` | No | `-` | - |
|
|
400
|
+
| `ref` | `null \| RefObject<View \| null> \| (instance: View \| null) => void \| (() => VoidOrUndefinedOnly)` | No | `-` | Allows getting a ref to the component instance. Once the component unmounts, React will set ref.current to null (or call the ref with null if you passed a callback ref). |
|
|
401
|
+
| `right` | `null \| number \| AnimatedNode \| auto \| ${number}%` | No | `-` | - |
|
|
402
|
+
| `rowGap` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
|
|
403
|
+
| `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 | `-` | - |
|
|
404
|
+
| `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. |
|
|
405
405
|
| `textAlign` | `left \| right \| auto \| center \| justify` | No | `-` | - |
|
|
406
406
|
| `textDecorationLine` | `none \| underline \| line-through \| underline line-through` | No | `-` | - |
|
|
407
407
|
| `textDecorationStyle` | `solid \| dotted \| dashed \| double` | No | `-` | - |
|
|
408
408
|
| `textTransform` | `none \| capitalize \| uppercase \| lowercase` | No | `-` | - |
|
|
409
|
-
| `top` | `
|
|
410
|
-
| `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 | `-` | - |
|
|
409
|
+
| `top` | `null \| number \| AnimatedNode \| auto \| ${number}%` | No | `-` | - |
|
|
410
|
+
| `transform` | `string \| readonly (({ 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 | `-` | - |
|
|
411
411
|
| `userSelect` | `none \| auto \| text \| contain \| all` | No | `-` | - |
|
|
412
|
-
| `width` | `
|
|
412
|
+
| `width` | `null \| number \| AnimatedNode \| auto \| ${number}%` | No | `-` | - |
|
|
413
413
|
| `zIndex` | `number` | No | `-` | - |
|
|
414
414
|
|
|
415
415
|
|
|
@@ -33,7 +33,7 @@ function Example() {
|
|
|
33
33
|
font="label2"
|
|
34
34
|
accessibilityLabel="Up 5.12%"
|
|
35
35
|
as="p"
|
|
36
|
-
|
|
36
|
+
style={{ color: `rgb(${spectrum.green70})` }}
|
|
37
37
|
>
|
|
38
38
|
↗ 5.12%
|
|
39
39
|
</Text>
|
|
@@ -124,7 +124,7 @@ function Example() {
|
|
|
124
124
|
<Text font="legal" color="fgMuted">
|
|
125
125
|
P&L
|
|
126
126
|
</Text>
|
|
127
|
-
<Text font="title3"
|
|
127
|
+
<Text font="title3" style={{ color: `rgb(${spectrum.green70})` }}>
|
|
128
128
|
+$890
|
|
129
129
|
</Text>
|
|
130
130
|
</VStack>
|
|
@@ -145,7 +145,7 @@ function Example() {
|
|
|
145
145
|
| `animated` | `boolean` | No | `-` | - |
|
|
146
146
|
| `aspectRatio` | `string \| number` | No | `-` | - |
|
|
147
147
|
| `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 | `-` | - |
|
|
148
|
-
| `body` | `null \| string \| number \| false \| true \| ReactElement<
|
|
148
|
+
| `body` | `null \| string \| number \| bigint \| false \| true \| ReactElement<unknown, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal \| Promise<AwaitedReactNode>` | No | `-` | - |
|
|
149
149
|
| `borderBottomLeftRadius` | `0 \| 100 \| 200 \| 300 \| 400 \| 500 \| 600 \| 700 \| 800 \| 900 \| 1000` | No | `-` | - |
|
|
150
150
|
| `borderBottomRightRadius` | `0 \| 100 \| 200 \| 300 \| 400 \| 500 \| 600 \| 700 \| 800 \| 900 \| 1000` | No | `-` | - |
|
|
151
151
|
| `borderBottomWidth` | `0 \| 100 \| 200 \| 300 \| 400 \| 500` | No | `-` | - |
|
|
@@ -164,15 +164,15 @@ function Example() {
|
|
|
164
164
|
| `borderedStart` | `boolean` | No | `-` | Add a border to the leading side of the box. |
|
|
165
165
|
| `borderedTop` | `boolean` | No | `-` | Add a border to the top side of the box. |
|
|
166
166
|
| `borderedVertical` | `boolean` | No | `-` | Add a border to the top and bottom sides of the box. |
|
|
167
|
-
| `bottom` | `
|
|
168
|
-
| `children` | `null \| string \| number \| false \| true \| ReactElement<
|
|
167
|
+
| `bottom` | `null \| number \| AnimatedNode \| auto \| ${number}%` | No | `-` | - |
|
|
168
|
+
| `children` | `null \| string \| number \| bigint \| false \| true \| ReactElement<unknown, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal \| Promise<AwaitedReactNode>` | No | `-` | Custom content to display below the main content box (title/description/media). Use this when you need to render custom content that doesnt fit the standard media/title/description layout. |
|
|
169
169
|
| `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 | `-` | - |
|
|
170
|
-
| `columnGap` | `0 \| 1 \| 2 \|
|
|
170
|
+
| `columnGap` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
|
|
171
171
|
| `dangerouslySetBackground` | `string` | No | `-` | - |
|
|
172
|
-
| `description` | `null \| string \| number \| false \| true \| ReactElement<
|
|
173
|
-
| `display` | `flex \| none` | No | `-` | - |
|
|
172
|
+
| `description` | `null \| string \| number \| bigint \| false \| true \| ReactElement<unknown, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal \| Promise<AwaitedReactNode>` | No | `-` | Text or React node to display as the card description. Use a Text component to override default color and font. |
|
|
173
|
+
| `display` | `flex \| none \| contents` | No | `-` | - |
|
|
174
174
|
| `elevation` | `0 \| 1 \| 2` | No | `-` | Determines box shadow styles. Parent should have overflow set to visible to ensure styles are not clipped. |
|
|
175
|
-
| `flexBasis` | `
|
|
175
|
+
| `flexBasis` | `null \| number \| AnimatedNode \| auto \| ${number}%` | No | `-` | - |
|
|
176
176
|
| `flexDirection` | `row \| column \| row-reverse \| column-reverse` | No | `-` | - |
|
|
177
177
|
| `flexGrow` | `number` | No | `-` | - |
|
|
178
178
|
| `flexShrink` | `number` | No | `-` | - |
|
|
@@ -181,27 +181,27 @@ function Example() {
|
|
|
181
181
|
| `fontFamily` | `inherit \| FontFamily` | No | `-` | - |
|
|
182
182
|
| `fontSize` | `inherit \| FontSize` | No | `-` | - |
|
|
183
183
|
| `fontWeight` | `inherit \| FontWeight` | No | `-` | - |
|
|
184
|
-
| `gap` | `0 \| 1 \| 2 \|
|
|
185
|
-
| `height` | `
|
|
184
|
+
| `gap` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
|
|
185
|
+
| `height` | `null \| number \| AnimatedNode \| auto \| ${number}%` | No | `-` | - |
|
|
186
186
|
| `justifyContent` | `flex-start \| flex-end \| center \| space-between \| space-around \| space-evenly` | No | `-` | - |
|
|
187
187
|
| `key` | `Key \| null` | No | `-` | - |
|
|
188
|
-
| `label` | `null \| string \| number \| false \| true \| ReactElement<
|
|
189
|
-
| `left` | `
|
|
188
|
+
| `label` | `null \| string \| number \| bigint \| false \| true \| ReactElement<unknown, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal \| Promise<AwaitedReactNode>` | No | `-` | - |
|
|
189
|
+
| `left` | `null \| number \| AnimatedNode \| auto \| ${number}%` | No | `-` | - |
|
|
190
190
|
| `lineHeight` | `inherit \| LineHeight` | No | `-` | - |
|
|
191
|
-
| `margin` | `0 \| -1 \| -2 \| -
|
|
192
|
-
| `marginBottom` | `0 \| -1 \| -2 \| -
|
|
193
|
-
| `marginEnd` | `0 \| -1 \| -2 \| -
|
|
194
|
-
| `marginStart` | `0 \| -1 \| -2 \| -
|
|
195
|
-
| `marginTop` | `0 \| -1 \| -2 \| -
|
|
196
|
-
| `marginX` | `0 \| -1 \| -2 \| -
|
|
197
|
-
| `marginY` | `0 \| -1 \| -2 \| -
|
|
198
|
-
| `maxHeight` | `
|
|
199
|
-
| `maxWidth` | `
|
|
200
|
-
| `media` | `null \| string \| number \| false \| true \| ReactElement<
|
|
191
|
+
| `margin` | `0 \| -1 \| -2 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1.5` | No | `-` | - |
|
|
192
|
+
| `marginBottom` | `0 \| -1 \| -2 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1.5` | No | `-` | - |
|
|
193
|
+
| `marginEnd` | `0 \| -1 \| -2 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1.5` | No | `-` | - |
|
|
194
|
+
| `marginStart` | `0 \| -1 \| -2 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1.5` | No | `-` | - |
|
|
195
|
+
| `marginTop` | `0 \| -1 \| -2 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1.5` | No | `-` | - |
|
|
196
|
+
| `marginX` | `0 \| -1 \| -2 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1.5` | No | `-` | - |
|
|
197
|
+
| `marginY` | `0 \| -1 \| -2 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1.5` | No | `-` | - |
|
|
198
|
+
| `maxHeight` | `null \| number \| AnimatedNode \| auto \| ${number}%` | No | `-` | - |
|
|
199
|
+
| `maxWidth` | `null \| number \| AnimatedNode \| auto \| ${number}%` | No | `-` | - |
|
|
200
|
+
| `media` | `null \| string \| number \| bigint \| false \| true \| ReactElement<unknown, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal \| Promise<AwaitedReactNode>` | No | `-` | React node to display as media content (e.g., Image or RemoteImage). |
|
|
201
201
|
| `mediaPlacement` | `top \| bottom \| end \| start` | No | `'top'` | Placement of the media content relative to the text content. |
|
|
202
202
|
| `mediaPosition` | `top \| bottom \| left \| right` | No | `-` | - |
|
|
203
|
-
| `minHeight` | `
|
|
204
|
-
| `minWidth` | `
|
|
203
|
+
| `minHeight` | `null \| number \| AnimatedNode \| auto \| ${number}%` | No | `-` | - |
|
|
204
|
+
| `minWidth` | `null \| number \| AnimatedNode \| auto \| ${number}%` | No | `-` | - |
|
|
205
205
|
| `onPointerCancel` | `((event: PointerEvent) => void)` | No | `-` | - |
|
|
206
206
|
| `onPointerCancelCapture` | `((event: PointerEvent) => void)` | No | `-` | - |
|
|
207
207
|
| `onPointerDown` | `((event: PointerEvent) => void)` | No | `-` | - |
|
|
@@ -216,30 +216,30 @@ function Example() {
|
|
|
216
216
|
| `onPointerUpCapture` | `((event: PointerEvent) => void)` | No | `-` | - |
|
|
217
217
|
| `opacity` | `number \| AnimatedNode` | No | `-` | - |
|
|
218
218
|
| `overflow` | `visible \| hidden \| scroll` | No | `-` | - |
|
|
219
|
-
| `padding` | `0 \| 1 \| 2 \|
|
|
220
|
-
| `paddingBottom` | `0 \| 1 \| 2 \|
|
|
221
|
-
| `paddingEnd` | `0 \| 1 \| 2 \|
|
|
222
|
-
| `paddingStart` | `0 \| 1 \| 2 \|
|
|
223
|
-
| `paddingTop` | `0 \| 1 \| 2 \|
|
|
224
|
-
| `paddingX` | `0 \| 1 \| 2 \|
|
|
225
|
-
| `paddingY` | `0 \| 1 \| 2 \|
|
|
219
|
+
| `padding` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
|
|
220
|
+
| `paddingBottom` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
|
|
221
|
+
| `paddingEnd` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
|
|
222
|
+
| `paddingStart` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
|
|
223
|
+
| `paddingTop` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
|
|
224
|
+
| `paddingX` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
|
|
225
|
+
| `paddingY` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
|
|
226
226
|
| `pin` | `top \| bottom \| left \| right \| all` | No | `-` | Direction in which to absolutely pin the box. |
|
|
227
|
-
| `position` | `
|
|
228
|
-
| `ref` | `(
|
|
229
|
-
| `right` | `
|
|
230
|
-
| `rowGap` | `0 \| 1 \| 2 \|
|
|
231
|
-
| `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 | `-` | - |
|
|
227
|
+
| `position` | `absolute \| relative \| static` | No | `-` | - |
|
|
228
|
+
| `ref` | `null \| RefObject<View \| null> \| (instance: View \| null) => void \| (() => VoidOrUndefinedOnly)` | No | `-` | Allows getting a ref to the component instance. Once the component unmounts, React will set ref.current to null (or call the ref with null if you passed a callback ref). |
|
|
229
|
+
| `right` | `null \| number \| AnimatedNode \| auto \| ${number}%` | No | `-` | - |
|
|
230
|
+
| `rowGap` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
|
|
231
|
+
| `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 | `-` | - |
|
|
232
232
|
| `styles` | `{ root?: StyleProp<ViewStyle>; contentContainer?: StyleProp<ViewStyle>; textContainer?: StyleProp<ViewStyle>; mediaContainer?: StyleProp<ViewStyle>; }` | No | `-` | - |
|
|
233
|
-
| `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
|
|
233
|
+
| `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. |
|
|
234
234
|
| `textAlign` | `left \| right \| auto \| center \| justify` | No | `-` | - |
|
|
235
235
|
| `textDecorationLine` | `none \| underline \| line-through \| underline line-through` | No | `-` | - |
|
|
236
236
|
| `textDecorationStyle` | `solid \| dotted \| dashed \| double` | No | `-` | - |
|
|
237
237
|
| `textTransform` | `none \| capitalize \| uppercase \| lowercase` | No | `-` | - |
|
|
238
|
-
| `title` | `null \| string \| number \| false \| true \| ReactElement<
|
|
239
|
-
| `top` | `
|
|
240
|
-
| `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 | `-` | - |
|
|
238
|
+
| `title` | `null \| string \| number \| bigint \| false \| true \| ReactElement<unknown, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal \| Promise<AwaitedReactNode>` | No | `-` | Text or React node to display as the card title. Use a Text component to override default color and font. |
|
|
239
|
+
| `top` | `null \| number \| AnimatedNode \| auto \| ${number}%` | No | `-` | - |
|
|
240
|
+
| `transform` | `string \| readonly (({ 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 | `-` | - |
|
|
241
241
|
| `userSelect` | `none \| auto \| text \| contain \| all` | No | `-` | - |
|
|
242
|
-
| `width` | `
|
|
242
|
+
| `width` | `null \| number \| AnimatedNode \| auto \| ${number}%` | No | `-` | - |
|
|
243
243
|
| `zIndex` | `number` | No | `-` | - |
|
|
244
244
|
|
|
245
245
|
|
|
@@ -118,13 +118,13 @@ function Example() {
|
|
|
118
118
|
| `borderedStart` | `boolean` | No | `-` | Add a border to the leading side of the box. |
|
|
119
119
|
| `borderedTop` | `boolean` | No | `-` | Add a border to the top side of the box. |
|
|
120
120
|
| `borderedVertical` | `boolean` | No | `-` | Add a border to the top and bottom sides of the box. |
|
|
121
|
-
| `bottom` | `
|
|
121
|
+
| `bottom` | `null \| number \| AnimatedNode \| auto \| ${number}%` | No | `-` | - |
|
|
122
122
|
| `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 | `-` | - |
|
|
123
|
-
| `columnGap` | `0 \| 1 \| 2 \|
|
|
123
|
+
| `columnGap` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
|
|
124
124
|
| `dangerouslySetBackground` | `string` | No | `-` | - |
|
|
125
|
-
| `display` | `flex \| none` | No | `-` | - |
|
|
125
|
+
| `display` | `flex \| none \| contents` | No | `-` | - |
|
|
126
126
|
| `elevation` | `0 \| 1 \| 2` | No | `-` | Determines box shadow styles. Parent should have overflow set to visible to ensure styles are not clipped. |
|
|
127
|
-
| `flexBasis` | `
|
|
127
|
+
| `flexBasis` | `null \| number \| AnimatedNode \| auto \| ${number}%` | No | `-` | - |
|
|
128
128
|
| `flexDirection` | `row \| column \| row-reverse \| column-reverse` | No | `-` | - |
|
|
129
129
|
| `flexGrow` | `number` | No | `-` | - |
|
|
130
130
|
| `flexShrink` | `number` | No | `-` | - |
|
|
@@ -133,23 +133,23 @@ function Example() {
|
|
|
133
133
|
| `fontFamily` | `inherit \| FontFamily` | No | `-` | - |
|
|
134
134
|
| `fontSize` | `inherit \| FontSize` | No | `-` | - |
|
|
135
135
|
| `fontWeight` | `inherit \| FontWeight` | No | `-` | - |
|
|
136
|
-
| `gap` | `0 \| 1 \| 2 \|
|
|
137
|
-
| `height` | `
|
|
136
|
+
| `gap` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
|
|
137
|
+
| `height` | `null \| number \| AnimatedNode \| auto \| ${number}%` | No | `-` | - |
|
|
138
138
|
| `justifyContent` | `flex-start \| flex-end \| center \| space-between \| space-around \| space-evenly` | No | `-` | - |
|
|
139
139
|
| `key` | `Key \| null` | No | `-` | - |
|
|
140
|
-
| `left` | `
|
|
140
|
+
| `left` | `null \| number \| AnimatedNode \| auto \| ${number}%` | No | `-` | - |
|
|
141
141
|
| `lineHeight` | `inherit \| LineHeight` | No | `-` | - |
|
|
142
|
-
| `margin` | `0 \| -1 \| -2 \| -
|
|
143
|
-
| `marginBottom` | `0 \| -1 \| -2 \| -
|
|
144
|
-
| `marginEnd` | `0 \| -1 \| -2 \| -
|
|
145
|
-
| `marginStart` | `0 \| -1 \| -2 \| -
|
|
146
|
-
| `marginTop` | `0 \| -1 \| -2 \| -
|
|
147
|
-
| `marginX` | `0 \| -1 \| -2 \| -
|
|
148
|
-
| `marginY` | `0 \| -1 \| -2 \| -
|
|
149
|
-
| `maxHeight` | `
|
|
150
|
-
| `maxWidth` | `
|
|
151
|
-
| `minHeight` | `
|
|
152
|
-
| `minWidth` | `
|
|
142
|
+
| `margin` | `0 \| -1 \| -2 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1.5` | No | `-` | - |
|
|
143
|
+
| `marginBottom` | `0 \| -1 \| -2 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1.5` | No | `-` | - |
|
|
144
|
+
| `marginEnd` | `0 \| -1 \| -2 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1.5` | No | `-` | - |
|
|
145
|
+
| `marginStart` | `0 \| -1 \| -2 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1.5` | No | `-` | - |
|
|
146
|
+
| `marginTop` | `0 \| -1 \| -2 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1.5` | No | `-` | - |
|
|
147
|
+
| `marginX` | `0 \| -1 \| -2 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1.5` | No | `-` | - |
|
|
148
|
+
| `marginY` | `0 \| -1 \| -2 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1.5` | No | `-` | - |
|
|
149
|
+
| `maxHeight` | `null \| number \| AnimatedNode \| auto \| ${number}%` | No | `-` | - |
|
|
150
|
+
| `maxWidth` | `null \| number \| AnimatedNode \| auto \| ${number}%` | No | `-` | - |
|
|
151
|
+
| `minHeight` | `null \| number \| AnimatedNode \| auto \| ${number}%` | No | `-` | - |
|
|
152
|
+
| `minWidth` | `null \| number \| AnimatedNode \| auto \| ${number}%` | No | `-` | - |
|
|
153
153
|
| `onPointerCancel` | `((event: PointerEvent) => void)` | No | `-` | - |
|
|
154
154
|
| `onPointerCancelCapture` | `((event: PointerEvent) => void)` | No | `-` | - |
|
|
155
155
|
| `onPointerDown` | `((event: PointerEvent) => void)` | No | `-` | - |
|
|
@@ -164,28 +164,28 @@ function Example() {
|
|
|
164
164
|
| `onPointerUpCapture` | `((event: PointerEvent) => void)` | No | `-` | - |
|
|
165
165
|
| `opacity` | `number \| AnimatedNode` | No | `-` | - |
|
|
166
166
|
| `overflow` | `visible \| hidden \| scroll` | No | `-` | - |
|
|
167
|
-
| `padding` | `0 \| 1 \| 2 \|
|
|
168
|
-
| `paddingBottom` | `0 \| 1 \| 2 \|
|
|
169
|
-
| `paddingEnd` | `0 \| 1 \| 2 \|
|
|
170
|
-
| `paddingStart` | `0 \| 1 \| 2 \|
|
|
171
|
-
| `paddingTop` | `0 \| 1 \| 2 \|
|
|
172
|
-
| `paddingX` | `0 \| 1 \| 2 \|
|
|
173
|
-
| `paddingY` | `0 \| 1 \| 2 \|
|
|
167
|
+
| `padding` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
|
|
168
|
+
| `paddingBottom` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
|
|
169
|
+
| `paddingEnd` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
|
|
170
|
+
| `paddingStart` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
|
|
171
|
+
| `paddingTop` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
|
|
172
|
+
| `paddingX` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
|
|
173
|
+
| `paddingY` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
|
|
174
174
|
| `pin` | `top \| bottom \| left \| right \| all` | No | `-` | Direction in which to absolutely pin the box. |
|
|
175
|
-
| `position` | `
|
|
176
|
-
| `ref` | `(
|
|
177
|
-
| `right` | `
|
|
178
|
-
| `rowGap` | `0 \| 1 \| 2 \|
|
|
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
|
-
| `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
|
|
175
|
+
| `position` | `absolute \| relative \| static` | No | `-` | - |
|
|
176
|
+
| `ref` | `null \| RefObject<View \| null> \| (instance: View \| null) => void \| (() => VoidOrUndefinedOnly)` | No | `-` | Allows getting a ref to the component instance. Once the component unmounts, React will set ref.current to null (or call the ref with null if you passed a callback ref). |
|
|
177
|
+
| `right` | `null \| number \| AnimatedNode \| auto \| ${number}%` | No | `-` | - |
|
|
178
|
+
| `rowGap` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
|
|
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
|
+
| `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. |
|
|
181
181
|
| `textAlign` | `left \| right \| auto \| center \| justify` | No | `-` | - |
|
|
182
182
|
| `textDecorationLine` | `none \| underline \| line-through \| underline line-through` | No | `-` | - |
|
|
183
183
|
| `textDecorationStyle` | `solid \| dotted \| dashed \| double` | No | `-` | - |
|
|
184
184
|
| `textTransform` | `none \| capitalize \| uppercase \| lowercase` | No | `-` | - |
|
|
185
|
-
| `top` | `
|
|
186
|
-
| `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 | `-` | - |
|
|
185
|
+
| `top` | `null \| number \| AnimatedNode \| auto \| ${number}%` | No | `-` | - |
|
|
186
|
+
| `transform` | `string \| readonly (({ 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 | `-` | - |
|
|
187
187
|
| `userSelect` | `none \| auto \| text \| contain \| all` | No | `-` | - |
|
|
188
|
-
| `width` | `
|
|
188
|
+
| `width` | `null \| number \| AnimatedNode \| auto \| ${number}%` | No | `-` | - |
|
|
189
189
|
| `zIndex` | `number` | No | `-` | - |
|
|
190
190
|
|
|
191
191
|
|