@coinbase/cds-mcp-server 8.66.1 → 9.0.0-rc.1
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 +3 -2
- package/mcp-docs/mobile/components/AreaChart.txt +42 -42
- package/mcp-docs/mobile/components/Avatar.txt +35 -35
- package/mcp-docs/mobile/components/AvatarButton.txt +37 -37
- package/mcp-docs/mobile/components/Banner.txt +57 -42
- package/mcp-docs/mobile/components/BarChart.txt +42 -42
- package/mcp-docs/mobile/components/Box.txt +36 -36
- package/mcp-docs/mobile/components/BrowserBar.txt +37 -37
- package/mcp-docs/mobile/components/Button.txt +54 -44
- package/mcp-docs/mobile/components/Calendar.txt +36 -36
- package/mcp-docs/mobile/components/Carousel.txt +50 -60
- package/mcp-docs/mobile/components/CartesianChart.txt +42 -42
- package/mcp-docs/mobile/components/CellMedia.txt +2 -2
- package/mcp-docs/mobile/components/Checkbox.txt +3 -3
- package/mcp-docs/mobile/components/CheckboxCell.txt +39 -39
- package/mcp-docs/mobile/components/CheckboxGroup.txt +4 -4
- package/mcp-docs/mobile/components/Chip.txt +41 -41
- package/mcp-docs/mobile/components/Coachmark.txt +41 -41
- 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 +39 -39
- package/mcp-docs/mobile/components/ContentCardBody.txt +44 -44
- package/mcp-docs/mobile/components/ContentCardFooter.txt +36 -36
- package/mcp-docs/mobile/components/ContentCardHeader.txt +43 -43
- package/mcp-docs/mobile/components/ContentCell.txt +51 -51
- package/mcp-docs/mobile/components/ControlGroup.txt +38 -38
- package/mcp-docs/mobile/components/DataCard.txt +49 -49
- package/mcp-docs/mobile/components/DateInput.txt +27 -24
- package/mcp-docs/mobile/components/DatePicker.txt +27 -24
- package/mcp-docs/mobile/components/Divider.txt +35 -35
- 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 +34 -34
- package/mcp-docs/mobile/components/FloatingAssetCard.txt +4 -4
- package/mcp-docs/mobile/components/HStack.txt +36 -36
- package/mcp-docs/mobile/components/HeroSquare.txt +2 -2
- package/mcp-docs/mobile/components/Icon.txt +3 -3
- package/mcp-docs/mobile/components/IconButton.txt +40 -60
- package/mcp-docs/mobile/components/InputChip.txt +41 -41
- package/mcp-docs/mobile/components/Interactable.txt +36 -36
- package/mcp-docs/mobile/components/Legend.txt +45 -43
- package/mcp-docs/mobile/components/LineChart.txt +42 -42
- package/mcp-docs/mobile/components/Link.txt +44 -41
- package/mcp-docs/mobile/components/ListCell.txt +54 -54
- package/mcp-docs/mobile/components/Lottie.txt +36 -36
- package/mcp-docs/mobile/components/LottieStatusAnimation.txt +2 -2
- package/mcp-docs/mobile/components/MediaCard.txt +43 -43
- package/mcp-docs/mobile/components/MediaChip.txt +41 -41
- package/mcp-docs/mobile/components/MessagingCard.txt +44 -44
- 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 +35 -35
- package/mcp-docs/mobile/components/ModalHeader.txt +36 -36
- package/mcp-docs/mobile/components/MultiContentModule.txt +42 -42
- package/mcp-docs/mobile/components/NavigationTitle.txt +41 -39
- package/mcp-docs/mobile/components/NavigationTitleSelect.txt +41 -39
- package/mcp-docs/mobile/components/NudgeCard.txt +7 -7
- package/mcp-docs/mobile/components/Numpad.txt +39 -39
- package/mcp-docs/mobile/components/Overlay.txt +35 -35
- package/mcp-docs/mobile/components/PageFooter.txt +38 -32
- package/mcp-docs/mobile/components/PageHeader.txt +40 -34
- package/mcp-docs/mobile/components/PercentageBarChart.txt +42 -42
- package/mcp-docs/mobile/components/PeriodSelector.txt +41 -41
- package/mcp-docs/mobile/components/Pictogram.txt +2 -2
- 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 +38 -38
- 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 +39 -39
- 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 +44 -42
- package/mcp-docs/mobile/components/Scrubber.txt +2 -2
- package/mcp-docs/mobile/components/SearchInput.txt +27 -24
- package/mcp-docs/mobile/components/SectionHeader.txt +7 -7
- package/mcp-docs/mobile/components/SegmentedTabs.txt +36 -36
- 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 +44 -42
- 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 +42 -42
- 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 +2 -2
- 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 +39 -38
- 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 +42 -40
- package/mcp-docs/mobile/components/TabNavigation.txt +36 -36
- package/mcp-docs/mobile/components/TabbedChips.txt +36 -36
- package/mcp-docs/mobile/components/TabbedChipsAlpha.txt +36 -36
- package/mcp-docs/mobile/components/Tabs.txt +36 -36
- package/mcp-docs/mobile/components/Tag.txt +43 -43
- package/mcp-docs/mobile/components/Text.txt +54 -61
- package/mcp-docs/mobile/components/TextInput.txt +27 -24
- package/mcp-docs/mobile/components/ThemeProvider.txt +3 -1
- package/mcp-docs/mobile/components/Toast.txt +36 -36
- 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 +36 -36
- package/mcp-docs/mobile/components/XAxis.txt +1 -1
- package/mcp-docs/mobile/components/YAxis.txt +1 -1
- package/mcp-docs/mobile/getting-started/ai-overview.txt +33 -0
- 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 +4 -3
- 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 +2 -2
- 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 +2 -2
- 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 +54 -54
- 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 +2 -2
- 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 +2 -2
- 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/TableCellFallback.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 +49 -319
- 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/ai-overview.txt +33 -0
- 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
|
@@ -151,14 +151,14 @@ function ResponsiveVStack() {
|
|
|
151
151
|
| `borderedStart` | `boolean` | No | `-` | Add a border to the leading side of the box. |
|
|
152
152
|
| `borderedTop` | `boolean` | No | `-` | Add a border to the top side of the box. |
|
|
153
153
|
| `borderedVertical` | `boolean` | No | `-` | Add a border to the top and bottom sides of the box. |
|
|
154
|
-
| `bottom` | `
|
|
154
|
+
| `bottom` | `null \| number \| auto \| AnimatedNode \| ${number}%` | No | `-` | - |
|
|
155
155
|
| `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 | `-` | - |
|
|
156
|
-
| `columnGap` | `0 \| 1 \| 2 \|
|
|
156
|
+
| `columnGap` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
|
|
157
157
|
| `dangerouslySetBackground` | `string` | No | `-` | - |
|
|
158
|
-
| `display` | `flex \| none` | No | `-` | - |
|
|
158
|
+
| `display` | `flex \| none \| contents` | No | `-` | - |
|
|
159
159
|
| `elevation` | `0 \| 1 \| 2` | No | `-` | Determines box shadow styles. Parent should have overflow set to visible to ensure styles are not clipped. |
|
|
160
|
-
| `flexBasis` | `
|
|
161
|
-
| `flexDirection` | `
|
|
160
|
+
| `flexBasis` | `null \| number \| auto \| AnimatedNode \| ${number}%` | No | `-` | - |
|
|
161
|
+
| `flexDirection` | `column \| row \| row-reverse \| column-reverse` | No | `-` | - |
|
|
162
162
|
| `flexGrow` | `number` | No | `-` | - |
|
|
163
163
|
| `flexShrink` | `number` | No | `-` | - |
|
|
164
164
|
| `flexWrap` | `wrap \| nowrap \| wrap-reverse` | No | `-` | - |
|
|
@@ -166,23 +166,23 @@ function ResponsiveVStack() {
|
|
|
166
166
|
| `fontFamily` | `inherit \| FontFamily` | No | `-` | - |
|
|
167
167
|
| `fontSize` | `inherit \| FontSize` | No | `-` | - |
|
|
168
168
|
| `fontWeight` | `inherit \| FontWeight` | No | `-` | - |
|
|
169
|
-
| `gap` | `0 \| 1 \| 2 \|
|
|
170
|
-
| `height` | `
|
|
169
|
+
| `gap` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
|
|
170
|
+
| `height` | `null \| number \| auto \| AnimatedNode \| ${number}%` | No | `-` | - |
|
|
171
171
|
| `justifyContent` | `flex-start \| flex-end \| center \| space-between \| space-around \| space-evenly` | No | `-` | - |
|
|
172
172
|
| `key` | `Key \| null` | No | `-` | - |
|
|
173
|
-
| `left` | `
|
|
173
|
+
| `left` | `null \| number \| auto \| AnimatedNode \| ${number}%` | No | `-` | - |
|
|
174
174
|
| `lineHeight` | `inherit \| LineHeight` | No | `-` | - |
|
|
175
|
-
| `margin` | `0 \| -1 \| -2 \| -
|
|
176
|
-
| `marginBottom` | `0 \| -1 \| -2 \| -
|
|
177
|
-
| `marginEnd` | `0 \| -1 \| -2 \| -
|
|
178
|
-
| `marginStart` | `0 \| -1 \| -2 \| -
|
|
179
|
-
| `marginTop` | `0 \| -1 \| -2 \| -
|
|
180
|
-
| `marginX` | `0 \| -1 \| -2 \| -
|
|
181
|
-
| `marginY` | `0 \| -1 \| -2 \| -
|
|
182
|
-
| `maxHeight` | `
|
|
183
|
-
| `maxWidth` | `
|
|
184
|
-
| `minHeight` | `
|
|
185
|
-
| `minWidth` | `
|
|
175
|
+
| `margin` | `0 \| -1 \| -2 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1.5` | No | `-` | - |
|
|
176
|
+
| `marginBottom` | `0 \| -1 \| -2 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1.5` | No | `-` | - |
|
|
177
|
+
| `marginEnd` | `0 \| -1 \| -2 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1.5` | No | `-` | - |
|
|
178
|
+
| `marginStart` | `0 \| -1 \| -2 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1.5` | No | `-` | - |
|
|
179
|
+
| `marginTop` | `0 \| -1 \| -2 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1.5` | No | `-` | - |
|
|
180
|
+
| `marginX` | `0 \| -1 \| -2 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1.5` | No | `-` | - |
|
|
181
|
+
| `marginY` | `0 \| -1 \| -2 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1.5` | No | `-` | - |
|
|
182
|
+
| `maxHeight` | `null \| number \| auto \| AnimatedNode \| ${number}%` | No | `-` | - |
|
|
183
|
+
| `maxWidth` | `null \| number \| auto \| AnimatedNode \| ${number}%` | No | `-` | - |
|
|
184
|
+
| `minHeight` | `null \| number \| auto \| AnimatedNode \| ${number}%` | No | `-` | - |
|
|
185
|
+
| `minWidth` | `null \| number \| auto \| AnimatedNode \| ${number}%` | No | `-` | - |
|
|
186
186
|
| `onPointerCancel` | `((event: PointerEvent) => void)` | No | `-` | - |
|
|
187
187
|
| `onPointerCancelCapture` | `((event: PointerEvent) => void)` | No | `-` | - |
|
|
188
188
|
| `onPointerDown` | `((event: PointerEvent) => void)` | No | `-` | - |
|
|
@@ -197,28 +197,28 @@ function ResponsiveVStack() {
|
|
|
197
197
|
| `onPointerUpCapture` | `((event: PointerEvent) => void)` | No | `-` | - |
|
|
198
198
|
| `opacity` | `number \| AnimatedNode` | No | `-` | - |
|
|
199
199
|
| `overflow` | `visible \| hidden \| scroll` | No | `-` | - |
|
|
200
|
-
| `padding` | `0 \| 1 \| 2 \|
|
|
201
|
-
| `paddingBottom` | `0 \| 1 \| 2 \|
|
|
202
|
-
| `paddingEnd` | `0 \| 1 \| 2 \|
|
|
203
|
-
| `paddingStart` | `0 \| 1 \| 2 \|
|
|
204
|
-
| `paddingTop` | `0 \| 1 \| 2 \|
|
|
205
|
-
| `paddingX` | `0 \| 1 \| 2 \|
|
|
206
|
-
| `paddingY` | `0 \| 1 \| 2 \|
|
|
200
|
+
| `padding` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
|
|
201
|
+
| `paddingBottom` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
|
|
202
|
+
| `paddingEnd` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
|
|
203
|
+
| `paddingStart` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
|
|
204
|
+
| `paddingTop` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
|
|
205
|
+
| `paddingX` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
|
|
206
|
+
| `paddingY` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
|
|
207
207
|
| `pin` | `top \| bottom \| left \| right \| all` | No | `-` | Direction in which to absolutely pin the box. |
|
|
208
|
-
| `position` | `
|
|
209
|
-
| `ref` | `(
|
|
210
|
-
| `right` | `
|
|
211
|
-
| `rowGap` | `0 \| 1 \| 2 \|
|
|
212
|
-
| `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 | `-` | - |
|
|
213
|
-
| `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. |
|
|
208
|
+
| `position` | `absolute \| relative \| static` | No | `-` | - |
|
|
209
|
+
| `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). |
|
|
210
|
+
| `right` | `null \| number \| auto \| AnimatedNode \| ${number}%` | No | `-` | - |
|
|
211
|
+
| `rowGap` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
|
|
212
|
+
| `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 | `-` | - |
|
|
213
|
+
| `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. |
|
|
214
214
|
| `textAlign` | `left \| right \| auto \| center \| justify` | No | `-` | - |
|
|
215
215
|
| `textDecorationLine` | `none \| underline \| line-through \| underline line-through` | No | `-` | - |
|
|
216
216
|
| `textDecorationStyle` | `solid \| dotted \| dashed \| double` | No | `-` | - |
|
|
217
217
|
| `textTransform` | `none \| capitalize \| uppercase \| lowercase` | No | `-` | - |
|
|
218
|
-
| `top` | `
|
|
219
|
-
| `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 | `-` | - |
|
|
220
|
-
| `userSelect` | `
|
|
221
|
-
| `width` | `
|
|
218
|
+
| `top` | `null \| number \| auto \| AnimatedNode \| ${number}%` | No | `-` | - |
|
|
219
|
+
| `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 | `-` | - |
|
|
220
|
+
| `userSelect` | `auto \| none \| text \| contain \| all` | No | `-` | - |
|
|
221
|
+
| `width` | `null \| number \| auto \| AnimatedNode \| ${number}%` | No | `-` | - |
|
|
222
222
|
| `zIndex` | `number` | No | `-` | - |
|
|
223
223
|
|
|
224
224
|
|
|
@@ -20,6 +20,39 @@ import { ContentHeader } from '@site/src/components/page/ContentHeader';
|
|
|
20
20
|
<MDXSection>
|
|
21
21
|
<MDXArticle>
|
|
22
22
|
|
|
23
|
+
## Agent Skills
|
|
24
|
+
|
|
25
|
+
Agent skills are portable instruction sets that teach AI coding agents how to work with specific tools, frameworks, and libraries. CDS provides official agent skills that can be installed into any project to give your AI agent deep knowledge of CDS components, patterns, and best practices.
|
|
26
|
+
|
|
27
|
+
### `cds-code`
|
|
28
|
+
|
|
29
|
+
The `cds-code` skill teaches AI agents to produce high-quality CDS code for React and React Native projects. When activated, the agent will:
|
|
30
|
+
|
|
31
|
+
- **Detect your environment** — Automatically determine whether your project uses React (web) or React Native (mobile) and discover installed CDS packages and their valid import paths.
|
|
32
|
+
- **Select the right components** — Use a built-in component selection guide to choose the appropriate CDS components for any UI task, from layout primitives like `Box` and `VStack` to complex components like `Modal`, `Table`, and `Select`.
|
|
33
|
+
- **Follow CDS best practices** — Prefer CDS style props and design tokens over raw CSS values and use semantic design tokens where possible
|
|
34
|
+
- **Discover icons and illustrations** — Search and select from the full set of CDS icons and illustrations available in your installed version.
|
|
35
|
+
|
|
36
|
+
#### Installation
|
|
37
|
+
|
|
38
|
+
Install the `cds-code` skill with the following command:
|
|
39
|
+
|
|
40
|
+
```bash
|
|
41
|
+
npx skills add https://github.com/coinbase/cds --skill cds-code
|
|
42
|
+
```
|
|
43
|
+
|
|
44
|
+
For even better results, also install the `cds-docs` skill to give your agent access to full CDS documentation:
|
|
45
|
+
|
|
46
|
+
```bash
|
|
47
|
+
npx skills add https://github.com/coinbase/cds --skill cds-docs
|
|
48
|
+
```
|
|
49
|
+
|
|
50
|
+
</MDXArticle>
|
|
51
|
+
</MDXSection>
|
|
52
|
+
|
|
53
|
+
<MDXSection>
|
|
54
|
+
<MDXArticle>
|
|
55
|
+
|
|
23
56
|
## MCP Server
|
|
24
57
|
|
|
25
58
|
The CDS MCP Server provides direct CDS context to LLMs, allowing AI models to understand and work with CDS APIs and components.
|
|
@@ -27,18 +27,24 @@ For React Native projects, ensure you have set up your environment for React Nat
|
|
|
27
27
|
:::
|
|
28
28
|
|
|
29
29
|
### Getting started
|
|
30
|
-
#### 1. Render
|
|
30
|
+
#### 1. Render providers
|
|
31
31
|
|
|
32
|
-
Render
|
|
32
|
+
Render the following providers at the root of your application:
|
|
33
|
+
|
|
34
|
+
- **ThemeProvider** — applies the CDS theme and color scheme
|
|
35
|
+
- **PortalProvider** — manages the registry of active overlay components (Modal, Toast, Alert, Tooltip, Tray). ([read more →](/components/overlay/PortalProvider))
|
|
33
36
|
|
|
34
37
|
```tsx
|
|
35
38
|
import { ThemeProvider } from '@coinbase/cds-mobile/system';
|
|
39
|
+
import { PortalProvider } from '@coinbase/cds-mobile/overlays/PortalProvider';
|
|
36
40
|
import { defaultTheme } from '@coinbase/cds-mobile/themes/defaultTheme';
|
|
37
41
|
import App from './App';
|
|
38
42
|
|
|
39
43
|
const Index = () => (
|
|
40
44
|
<ThemeProvider theme={defaultTheme} activeColorScheme="light">
|
|
41
|
-
<
|
|
45
|
+
<PortalProvider>
|
|
46
|
+
<App />
|
|
47
|
+
</PortalProvider>
|
|
42
48
|
</ThemeProvider>
|
|
43
49
|
);
|
|
44
50
|
|
|
@@ -7,7 +7,7 @@ Combines multiple refs into a single ref callback, allowing a component to work
|
|
|
7
7
|
## Import
|
|
8
8
|
|
|
9
9
|
```tsx
|
|
10
|
-
import { useMergeRefs } from '@coinbase/cds-common/
|
|
10
|
+
import { useMergeRefs } from '@coinbase/cds-common/utils/mergeRefs'
|
|
11
11
|
```
|
|
12
12
|
|
|
13
13
|
## API
|
|
@@ -16,10 +16,10 @@ import { useMergeRefs } from '@coinbase/cds-common/hooks/useMergeRefs'
|
|
|
16
16
|
|
|
17
17
|
The `useMergeRefs` hook accepts a spread of refs as its parameter:
|
|
18
18
|
|
|
19
|
-
- `...refs: (React.
|
|
20
|
-
- `
|
|
21
|
-
- `
|
|
22
|
-
- `undefined`
|
|
19
|
+
- `...refs: (React.Ref<T> | undefined)[]` - An array of refs to merge. Can include:
|
|
20
|
+
- `RefObject` - Object-based refs created with `useRef` / `createRef`
|
|
21
|
+
- `RefCallback` - Function refs
|
|
22
|
+
- `undefined` - Optional refs that might not be provided
|
|
23
23
|
|
|
24
24
|
### Returns
|
|
25
25
|
|
|
@@ -20,7 +20,7 @@
|
|
|
20
20
|
- [Tray](mobile/components/Tray.txt): An elevated overlay container.
|
|
21
21
|
- [Tooltip](mobile/components/Tooltip.txt): A component that displays additional information on press.
|
|
22
22
|
- [Toast](mobile/components/Toast.txt): A temporary notification that appears at the bottom of the screen.
|
|
23
|
-
- [PortalProvider](mobile/components/PortalProvider.txt): A
|
|
23
|
+
- [PortalProvider](mobile/components/PortalProvider.txt): A required root-level provider that manages the registry of active CDS overlay components (Modal, Toast, Alert, Tooltip, Tray).
|
|
24
24
|
- [Overlay](mobile/components/Overlay.txt): A semi-transparent layer that covers content.
|
|
25
25
|
- [ModalHeader](mobile/components/ModalHeader.txt): A component that provides a consistent header section for Modal.
|
|
26
26
|
- [ModalFooter](mobile/components/ModalFooter.txt): A footer component for Modal.
|
|
@@ -256,14 +256,14 @@ function RefExample() {
|
|
|
256
256
|
|
|
257
257
|
| Prop | Type | Required | Default | Description |
|
|
258
258
|
| --- | --- | --- | --- | --- |
|
|
259
|
-
| `children` | `null \| string \| number \| false \| true \| ReactElement<
|
|
259
|
+
| `children` | `null \| string \| number \| bigint \| false \| true \| ReactElement<unknown, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal \| Promise<AwaitedReactNode>` | Yes | `-` | Collapsible content |
|
|
260
260
|
| `itemKey` | `string` | Yes | `-` | Key of the accordion item. This should be unique inside the same Accordion unless you want multiple items to be controlled at the same time. |
|
|
261
261
|
| `title` | `string` | Yes | `-` | Title of the accordion item |
|
|
262
|
-
| `headerRef` | `RefObject<HTMLButtonElement>` | No | `-` | - |
|
|
262
|
+
| `headerRef` | `RefObject<HTMLButtonElement \| null>` | No | `-` | - |
|
|
263
263
|
| `maxHeight` | `ResponsiveProp<MaxHeight<string \| number>>` | No | `-` | - |
|
|
264
|
-
| `media` | `null \| string \| number \| false \| true \| ReactElement<
|
|
264
|
+
| `media` | `null \| string \| number \| bigint \| false \| true \| ReactElement<unknown, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal \| Promise<AwaitedReactNode>` | No | `-` | - |
|
|
265
265
|
| `onClick` | `((key: string) => void)` | No | `-` | Callback function fired when the accordion item is clicked |
|
|
266
|
-
| `panelRef` | `RefObject<HTMLDivElement>` | No | `-` | - |
|
|
266
|
+
| `panelRef` | `RefObject<HTMLDivElement \| null>` | No | `-` | - |
|
|
267
267
|
| `style` | `CSSProperties` | No | `-` | - |
|
|
268
268
|
| `subtitle` | `string` | No | `-` | Subtitle of the accordion item |
|
|
269
269
|
| `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 |
|
|
@@ -153,16 +153,17 @@ function AlertOnModalExample() {
|
|
|
153
153
|
| `visible` | `boolean` | Yes | `false false` | Controls visibility of the Modal |
|
|
154
154
|
| `accessibilityLabelledBy` | `string` | No | `-` | On web, maps to aria-labelledby and lists the id(s) of the element(s) that label the element on which the attribute is set. On mobile (Android only), a reference to another element nativeID used to build complex forms. |
|
|
155
155
|
| `actionLayout` | `horizontal \| vertical` | No | `horizontal` | Layout of the actions |
|
|
156
|
-
| `disablePortal` | `boolean` | No | `-` |
|
|
156
|
+
| `disablePortal` | `boolean` | No | `-` | When true, renders children in place without creating a React portal. |
|
|
157
157
|
| `dismissActionLabel` | `string` | No | `-` | Label of the dismiss action |
|
|
158
158
|
| `key` | `Key \| null` | No | `-` | - |
|
|
159
159
|
| `onDidClose` | `((() => void) & (() => void))` | No | `-` | Callback fired after the component is closed. |
|
|
160
160
|
| `onDismissActionPress` | `(() => void)` | No | `-` | Callback function fired when the dismiss action is pressed |
|
|
161
161
|
| `onPreferredActionPress` | `(() => void)` | No | `-` | Callback function fired when the preferred action is pressed |
|
|
162
|
-
| `pictogram` | `key \|
|
|
162
|
+
| `pictogram` | `key \| warning \| error \| add \| arrowsUpDown \| browser \| calculator \| calendar \| checkmark \| clock \| coinbaseOneLogo \| crystalBallInsight \| derivativesProduct \| download \| email \| gasFees \| identityCard \| instantUnstakingClock \| laptop \| learningRewardsProduct \| lock \| loop \| passport \| paypal \| phone \| pieChartData \| pieChartWithArrow \| planet \| robot \| safe \| securityKey \| settings \| shield \| support \| taxes \| tokenSales \| trading \| verifiedPools \| wallet \| done \| cardSuccess \| 2fa \| accountsNavigation \| accreditedInvestor \| addCard \| addPayment \| addPhone \| addressBook \| addToWatchlist \| addWallet \| advancedTradingDesktop \| advancedTradingNavigation \| advancedTradingRebates \| agent \| alerts \| alertsCoinbaseOne \| analyticsNavigation \| apartOfDropsNft \| applyForHigherLimits \| apyInterest \| assetEncryption \| assetHubNavigation \| assetManagement \| assetManagementNavigation \| assetMeasurements \| assetMovement \| authenticationApp \| authenticator \| authenticatorAlt \| authenticatorProgress \| avatarAa \| avatarAb \| avatarAc \| avatarAd \| avatarAe \| avatarAf \| avatarAg \| avatarAh \| avatarAi \| avatarAj \| avatarBa \| avatarBb \| avatarBc \| avatarBd \| avatarBe \| avatarBf \| avatarBg \| avatarBh \| avatarBi \| avatarBj \| avatarCa \| avatarCb \| avatarCc \| avatarCd \| avatarCe \| avatarCf \| avatarCg \| avatarCh \| avatarCi \| avatarCj \| avatarDa \| avatarDb \| avatarDc \| avatarDd \| avatarDe \| avatarDf \| avatarDg \| avatarDh \| avatarDi \| avatarDj \| avatarEa \| avatarEb \| avatarEc \| avatarEd \| avatarEe \| avatarEf \| avatarEg \| avatarEh \| avatarEi \| avatarEj \| avatarFa \| avatarFb \| avatarFc \| avatarFd \| avatarFe \| avatarFf \| avatarFg \| avatarFh \| avatarFi \| avatarFj \| avatarGa \| avatarGb \| avatarGc \| avatarGd \| avatarGe \| avatarGf \| avatarGg \| avatarGh \| avatarGi \| avatarGj \| avatarHa \| avatarHb \| avatarHc \| avatarHd \| avatarHe \| avatarHf \| avatarHg \| avatarHh \| avatarHi \| avatarHj \| avatarIa \| avatarIb \| avatarIc \| avatarId \| avatarIe \| avatarIf \| avatarIg \| avatarIh \| avatarIi \| avatarIj \| avatarJa \| avatarJb \| avatarJc \| avatarJd \| avatarJe \| avatarJf \| avatarJg \| avatarJh \| avatarJi \| avatarJj \| barChart \| baseAscend \| baseCertificateStar \| baseChartSmall \| baseChatBubbleHeart \| baseCheckSmall \| baseCoinCryptoSmall \| baseCoinNetworkSmall \| baseCoinStack \| baseCoinStar \| baseComet \| baseComputer \| baseConfetti \| baseConnectApps \| baseConnectSmall \| baseCreatorCoin \| baseDecentralizationSmall \| baseDiamondSmall \| baseDiamondTrophy \| baseDoor \| baseEarnedBadge \| baseEmptySmall \| baseErrorButterflySmall \| baseErrorSmall \| baseExchange \| baseFire \| baseGem \| baseGlobe \| baseHandStar \| baseLayout \| baseLightningbolt \| baseLoadingSmall \| baseLocationSmall \| baseLogo \| baseLogoNavigation \| baseMedal \| baseMessaging \| baseMintNftSmall \| baseNetworkSmall \| baseNftSmall \| basePaycoinSmall \| basePeopleSmall \| basePiechartSmall \| basePlant \| basePower \| baseRibbon \| baseRocket \| baseRockon \| baseSaved \| baseSecuritySmall \| baseSendSmall \| baseSignin \| baseSmile \| baseStack \| baseStar \| baseTargetSmall \| baseTile \| bigBtcSend \| bitcoin \| bitcoinPizza \| bitcoinRewards \| bitcoinWhitePaper \| blockchainConnection \| bonusFivePercent \| bonusTwoPercent \| borrowCoins \| borrowingLending \| borrowNavigation \| browserMultiPlatform \| browserTransaction \| btcOneHundred \| bundle \| businessProduct \| calendarCaution \| calendarHighlight \| candleSticksGraph \| cardBlocked \| cardDeclined \| cardNavigation \| cb1BankTransfers \| chart \| chat \| cloudNavigation \| coinbaseLogoAdvancedBrand \| coinbaseLogoNavigation \| coinbaseOneAuthenticator \| coinbaseOneChat \| coinbaseOneEarn \| coinbaseOneEarnCoins \| coinbaseOneEarnCoinsLogo \| coinbaseOneFiat \| coinbaseOneProductIcon \| coinbaseOneProductInvestWeekly \| coinbaseOneRefreshed \| coinbaseOneShield \| coinbaseOneTrade \| coinbaseOneTrusted \| coinbaseOneUnlimitedRewards \| coinbaseUnlockOffers \| coinbaseWalletApp \| coinFocus \| coinShare \| coldStorageCheck \| collectionOfAssets \| commerceCheckout \| commerceInvoice \| commerceNavigation \| commodities \| completeQuiz \| complianceNavigation \| congratulations \| connectNavigation \| contactInfo \| controlWalletStorage \| creative \| creditCard \| crypto101 \| cryptoCard \| cryptoCoins \| cryptoFolder \| custodialJourney \| custodyNavigation \| dataMarketplaceNavigation \| decentralizationEverything \| decentralizedExchange \| decentralizedIdentity \| decentralizedWeb3 \| defiEarnMoment \| delegate \| delegateNavigation \| derivativesNavigation \| developerPlatformNavigation \| developerSDKNavigation \| directDepositNavigation \| dollarShowcase \| driversLicense \| driversLicenseWheel \| earnCoins \| earnGraph \| earnNavigation \| easyToUse \| economyGlobal \| emailAndMessages \| enableVoting \| envelope \| ethereumFocus \| ethRewards \| ethStaking \| ethStakingChart \| ethStakingRewards \| ethToken \| exchangeNavigation \| explore \| fast \| faucetNavigation \| feesRestriction \| fiat \| finance \| findYourSelection \| formDownload \| futures \| futuresCoinbaseOne \| gem \| genericCountryIDCard \| getStarted \| giftbox \| globalConnections \| globalPayments \| globalTransactions \| googleAuthenticator \| governance \| hardwareWallet \| helpCenterNavigation \| higherLimits \| holdingCoin \| idBlock \| idError \| idVerification \| increaseLimits \| inrTrade \| institutionalNavigation \| institutions \| instoAccount \| instoAddressBook \| instoAdvancedTradingRebates \| instoApyInterest \| instoAuthenticatorProgress \| instoBorrowCoins \| instoBorrowingLending \| instoCoinbaseOneShield \| instoCoinFocus \| instoCrypto101 \| instoDecentralizationEverything \| instoDecentralizedExchange \| instoDecentralizedWeb3 \| instoDelegate \| instoEarnCoins \| instoEarnGraph \| instoEasyToUse \| instoEth \| instoEthRewards \| instoEthStakingChart \| instoFiat \| instoGem \| instoGlobalConnections \| instoKey \| instoMonitoringPerformance \| instoNftLibrary \| instoPasswordWalletLocked \| instoprimeMobileApp \| instoRestaking \| instoRiskStaking \| instoSecuredAssets \| instoSelfCustodyWallet \| instoStakingGraph \| instoTrading \| instoWalletWarning \| internationalExchangeNavigation \| internet \| investGraph \| laptopCharts \| laptopVideo \| layerNetworks \| leadGraph \| learn \| learningRewardsNavigation \| lightbulbLearn \| lightningNetworkSend \| linkYourAccount \| listingFees \| locationUsa \| lowFees \| manageWeb3SignersAcct \| miningCoins \| mintedNft \| mobileCharts \| mobileError \| mobileNotifcation \| mobileSuccess \| mobileWarning \| moneyCrypto \| moneyEarn \| moneySwift \| monitoringPerformance \| moreThanBitcoin \| multiAccountsAndCards \| multiPlatform \| multipleAssets \| musicAndSounds \| myNumberCard \| newUserChecklistBuyCrypto \| newUserChecklistCompleteAccount \| newUserChecklistVerifyId \| nftAvatar \| nftLibrary \| nftNavigation \| noAnnualFee \| noNftFound \| notificationHubAnalysis \| notificationHubNews \| notificationHubPortfolio \| notificationHubSocial \| notifications \| noVisibility \| noWiFi \| orders \| outage \| partialCoins \| participateNavigation \| passwordWalletLocked \| payNavigation \| peerToPeer \| pieChart \| pieChartWithArrowBlue \| pizza \| pluginBrowser \| podium \| positiveReviews \| predictionMarkets \| premiumInvestor \| priceTracking \| primeMobileApp \| primeNavigation \| privateClientNavigation \| proNavigation \| protectionPlan \| queryTransactNavigation \| receipt \| recurringPurchases \| restaking \| reviewAndAdd \| rewardsNavigation \| riskStaking \| rosettaNavigation \| securedAssets \| security \| securityCoinShield \| seedPhrase \| selectAddNft \| selfCustodyWallet \| selfServe \| sellSendAnytime \| sendPaymentToOthers \| settled \| sideChainSide \| signInNavigation \| smsAuthenticate \| sparkleCoinbaseOne \| ssnCard \| stableCoinMetaphor \| stacking \| stakingGraph \| standWithCryptoLogoNavigation \| startToday \| strongInfo \| strongWarning \| successPhone \| supportChat \| takeQuiz \| target \| taxBeta \| taxCenterNavigation \| taxesArrangement \| taxSeason \| timingCheck \| tokenBaskets \| transferSend \| transistor \| trendingAssets \| trusted \| tryAgainLater \| twoBonus \| typeScript \| ubiKey \| usaProduct \| usdcEarn \| usdcInterest \| usdcLoan \| usdcLogo \| usdcRewards \| usdcRewardsRibbon \| usdcToken \| venturesNavigation \| videoCalendar \| videoContent \| waiting \| waitingForConsensus \| walletAsServiceNavigation \| walletDeposit \| walletError \| walletExchange \| walletLinkNavigation \| walletLogoNavigation \| walletNavigation \| walletPassword \| walletSuccess \| walletWarning \| winBTC \| worldwide \| wrapEth` | No | `-` | Illustration pictogram name for alert |
|
|
163
163
|
| `preferredActionVariant` | `primary \| negative` | No | `primary` | Button variant of the preferred action |
|
|
164
|
-
| `ref` | `(
|
|
164
|
+
| `ref` | `null \| RefObject<HTMLButtonElement \| null> \| (instance: HTMLButtonElement \| 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). |
|
|
165
165
|
| `stacked` | `boolean` | No | `-` | Indicating if Alert is stacked on top of Modal |
|
|
166
166
|
| `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 |
|
|
167
|
+
| `zIndex` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset \| auto \| ResponsiveValue<ZIndex \| undefined>` | No | `-` | - |
|
|
167
168
|
|
|
168
169
|
|
|
@@ -7,7 +7,7 @@ A chart component that displays data as filled areas beneath lines. Ideal for sh
|
|
|
7
7
|
## Import
|
|
8
8
|
|
|
9
9
|
```tsx
|
|
10
|
-
import { AreaChart } from '@coinbase/cds-web
|
|
10
|
+
import { AreaChart } from '@coinbase/cds-web/visualizations/chart'
|
|
11
11
|
```
|
|
12
12
|
|
|
13
13
|
## Examples
|
|
@@ -370,24 +370,24 @@ function CustomBaseline() {
|
|
|
370
370
|
| --- | --- | --- | --- | --- |
|
|
371
371
|
| `AreaComponent` | `AreaComponent` | No | `-` | Component to render the area. Takes precedence over the type prop if provided. |
|
|
372
372
|
| `LineComponent` | `LineComponent` | No | `-` | Component to render the line. Takes precedence over the type prop if provided. |
|
|
373
|
-
| `alignContent` | `ResponsiveProp<center \| normal \| start \| end \| flex-start \| flex-end \|
|
|
374
|
-
| `alignItems` | `ResponsiveProp<center \| normal \| start \| end \| flex-start \| flex-end \| stretch \| baseline \| first baseline \| last baseline
|
|
375
|
-
| `alignSelf` | `ResponsiveProp<center \|
|
|
373
|
+
| `alignContent` | `ResponsiveProp<center \| normal \| start \| end \| flex-start \| flex-end \| stretch \| baseline \| first baseline \| last baseline \| space-between \| space-around \| space-evenly>` | No | `-` | - |
|
|
374
|
+
| `alignItems` | `ResponsiveProp<center \| normal \| start \| end \| flex-start \| flex-end \| self-start \| self-end \| stretch \| baseline \| first baseline \| last baseline>` | No | `-` | - |
|
|
375
|
+
| `alignSelf` | `ResponsiveProp<center \| normal \| auto \| start \| end \| flex-start \| flex-end \| self-start \| self-end \| stretch \| baseline \| first baseline \| last baseline>` | No | `-` | - |
|
|
376
376
|
| `animate` | `boolean` | No | `true` | Whether to animate the chart. |
|
|
377
377
|
| `as` | `div` | No | `-` | The underlying element or component the polymorphic component will render. Changing as also changes the inherited native props (e.g. href for as=a) and the expected ref type. |
|
|
378
|
-
| `aspectRatio` |
|
|
379
|
-
| `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
|
|
380
|
-
| `borderBottomLeftRadius` | `0 \| 100 \| 200 \| 300 \| 400 \| 500 \| 600 \| 700 \| 800 \| 900 \| 1000
|
|
381
|
-
| `borderBottomRightRadius` | `0 \| 100 \| 200 \| 300 \| 400 \| 500 \| 600 \| 700 \| 800 \| 900 \| 1000
|
|
382
|
-
| `borderBottomWidth` | `0 \| 100 \| 200 \| 300 \| 400 \| 500
|
|
383
|
-
| `borderColor` | `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
|
|
384
|
-
| `borderEndWidth` | `0 \| 100 \| 200 \| 300 \| 400 \| 500
|
|
385
|
-
| `borderRadius` | `0 \| 100 \| 200 \| 300 \| 400 \| 500 \| 600 \| 700 \| 800 \| 900 \| 1000
|
|
386
|
-
| `borderStartWidth` | `0 \| 100 \| 200 \| 300 \| 400 \| 500
|
|
387
|
-
| `borderTopLeftRadius` | `0 \| 100 \| 200 \| 300 \| 400 \| 500 \| 600 \| 700 \| 800 \| 900 \| 1000
|
|
388
|
-
| `borderTopRightRadius` | `0 \| 100 \| 200 \| 300 \| 400 \| 500 \| 600 \| 700 \| 800 \| 900 \| 1000
|
|
389
|
-
| `borderTopWidth` | `0 \| 100 \| 200 \| 300 \| 400 \| 500
|
|
390
|
-
| `borderWidth` | `0 \| 100 \| 200 \| 300 \| 400 \| 500
|
|
378
|
+
| `aspectRatio` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset \| auto \| ResponsiveValue<AspectRatio \| undefined>` | No | `-` | - |
|
|
379
|
+
| `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 \| ResponsiveValue<Color \| undefined>` | No | `-` | - |
|
|
380
|
+
| `borderBottomLeftRadius` | `0 \| 100 \| 200 \| 300 \| 400 \| 500 \| 600 \| 700 \| 800 \| 900 \| 1000 \| ResponsiveValue<BorderRadius \| undefined>` | No | `-` | - |
|
|
381
|
+
| `borderBottomRightRadius` | `0 \| 100 \| 200 \| 300 \| 400 \| 500 \| 600 \| 700 \| 800 \| 900 \| 1000 \| ResponsiveValue<BorderRadius \| undefined>` | No | `-` | - |
|
|
382
|
+
| `borderBottomWidth` | `0 \| 100 \| 200 \| 300 \| 400 \| 500 \| ResponsiveValue<BorderWidth \| undefined>` | No | `-` | - |
|
|
383
|
+
| `borderColor` | `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 \| ResponsiveValue<Color \| undefined>` | No | `-` | - |
|
|
384
|
+
| `borderEndWidth` | `0 \| 100 \| 200 \| 300 \| 400 \| 500 \| ResponsiveValue<BorderWidth \| undefined>` | No | `-` | - |
|
|
385
|
+
| `borderRadius` | `0 \| 100 \| 200 \| 300 \| 400 \| 500 \| 600 \| 700 \| 800 \| 900 \| 1000 \| ResponsiveValue<BorderRadius \| undefined>` | No | `-` | - |
|
|
386
|
+
| `borderStartWidth` | `0 \| 100 \| 200 \| 300 \| 400 \| 500 \| ResponsiveValue<BorderWidth \| undefined>` | No | `-` | - |
|
|
387
|
+
| `borderTopLeftRadius` | `0 \| 100 \| 200 \| 300 \| 400 \| 500 \| 600 \| 700 \| 800 \| 900 \| 1000 \| ResponsiveValue<BorderRadius \| undefined>` | No | `-` | - |
|
|
388
|
+
| `borderTopRightRadius` | `0 \| 100 \| 200 \| 300 \| 400 \| 500 \| 600 \| 700 \| 800 \| 900 \| 1000 \| ResponsiveValue<BorderRadius \| undefined>` | No | `-` | - |
|
|
389
|
+
| `borderTopWidth` | `0 \| 100 \| 200 \| 300 \| 400 \| 500 \| ResponsiveValue<BorderWidth \| undefined>` | No | `-` | - |
|
|
390
|
+
| `borderWidth` | `0 \| 100 \| 200 \| 300 \| 400 \| 500 \| ResponsiveValue<BorderWidth \| undefined>` | No | `-` | - |
|
|
391
391
|
| `bordered` | `boolean` | No | `-` | Add a border around all sides of the box. |
|
|
392
392
|
| `borderedBottom` | `boolean` | No | `-` | Add a border to the bottom side of the box. |
|
|
393
393
|
| `borderedEnd` | `boolean` | No | `-` | Add a border to the trailing side of the box. |
|
|
@@ -397,78 +397,78 @@ function CustomBaseline() {
|
|
|
397
397
|
| `borderedVertical` | `boolean` | No | `-` | Add a border to the top and bottom sides of the box. |
|
|
398
398
|
| `bottom` | `ResponsiveProp<Bottom<string \| number>>` | No | `-` | - |
|
|
399
399
|
| `classNames` | `{ root?: string; chart?: string \| undefined; } \| undefined` | No | `-` | Custom class names for the component. |
|
|
400
|
-
| `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
|
|
401
|
-
| `columnGap` | `0 \| 1 \|
|
|
400
|
+
| `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 \| ResponsiveValue<Color \| undefined>` | No | `-` | - |
|
|
401
|
+
| `columnGap` | `0 \| 1 \| 5 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 2 \| 3 \| 4 \| 6 \| 7 \| 8 \| 9 \| ResponsiveValue<Space \| undefined>` | No | `-` | - |
|
|
402
402
|
| `connectNulls` | `boolean` | No | `-` | When true, the area is connected across null values. |
|
|
403
403
|
| `curve` | `bump \| catmullRom \| linear \| linearClosed \| monotone \| natural \| step \| stepBefore \| stepAfter` | No | `'bump'` | The curve interpolation method to use for the line. |
|
|
404
404
|
| `dangerouslySetBackground` | `string` | No | `-` | - |
|
|
405
|
-
| `display` | `ResponsiveProp<grid \| none \| block \| inline \| inline-block \| flex \| inline-flex \| inline-grid \| contents \| flow-root \|
|
|
406
|
-
| `elevation` | `0 \| 1 \| 2
|
|
405
|
+
| `display` | `ResponsiveProp<grid \| revert \| none \| block \| inline \| inline-block \| flex \| inline-flex \| inline-grid \| contents \| flow-root \| list-item>` | No | `-` | - |
|
|
406
|
+
| `elevation` | `0 \| 1 \| 2 \| ResponsiveValue<Elevation \| undefined>` | No | `-` | - |
|
|
407
407
|
| `enableScrubbing` | `boolean` | No | `-` | Enables scrubbing interactions. When true, allows scrubbing and makes scrubber components interactive. |
|
|
408
408
|
| `fillOpacity` | `number` | No | `1` | Opacity of the area |
|
|
409
409
|
| `flexBasis` | `ResponsiveProp<FlexBasis<string \| number>>` | No | `-` | - |
|
|
410
|
-
| `flexDirection` | `ResponsiveProp<row \| row-reverse \| column
|
|
411
|
-
| `flexGrow` |
|
|
412
|
-
| `flexShrink` |
|
|
410
|
+
| `flexDirection` | `ResponsiveProp<column \| row \| row-reverse \| column-reverse>` | No | `-` | - |
|
|
411
|
+
| `flexGrow` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset \| ResponsiveValue<FlexGrow \| undefined>` | No | `-` | - |
|
|
412
|
+
| `flexShrink` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset \| ResponsiveValue<FlexShrink \| undefined>` | No | `-` | - |
|
|
413
413
|
| `flexWrap` | `ResponsiveProp<nowrap \| wrap \| wrap-reverse>` | No | `-` | - |
|
|
414
414
|
| `font` | `ResponsiveProp<FontFamily \| inherit>` | No | `-` | - |
|
|
415
415
|
| `fontFamily` | `ResponsiveProp<FontFamily \| inherit>` | No | `-` | - |
|
|
416
|
-
| `fontSize` | `ResponsiveProp<
|
|
417
|
-
| `fontWeight` | `ResponsiveProp<
|
|
418
|
-
| `gap` | `0 \| 1 \|
|
|
419
|
-
| `grid` |
|
|
420
|
-
| `gridArea` |
|
|
416
|
+
| `fontSize` | `ResponsiveProp<FontSize \| inherit>` | No | `-` | - |
|
|
417
|
+
| `fontWeight` | `ResponsiveProp<FontWeight \| inherit>` | No | `-` | - |
|
|
418
|
+
| `gap` | `0 \| 1 \| 5 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 2 \| 3 \| 4 \| 6 \| 7 \| 8 \| 9 \| ResponsiveValue<Space \| undefined>` | No | `-` | - |
|
|
419
|
+
| `grid` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset \| none \| ResponsiveValue<Grid \| undefined>` | No | `-` | - |
|
|
420
|
+
| `gridArea` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset \| auto \| ResponsiveValue<GridArea \| undefined>` | No | `-` | - |
|
|
421
421
|
| `gridAutoColumns` | `ResponsiveProp<GridAutoColumns<string \| number>>` | No | `-` | - |
|
|
422
|
-
| `gridAutoFlow` |
|
|
422
|
+
| `gridAutoFlow` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset \| column \| dense \| row \| ResponsiveValue<GridAutoFlow \| undefined>` | No | `-` | - |
|
|
423
423
|
| `gridAutoRows` | `ResponsiveProp<GridAutoRows<string \| number>>` | No | `-` | - |
|
|
424
|
-
| `gridColumn` |
|
|
425
|
-
| `gridColumnEnd` |
|
|
426
|
-
| `gridColumnStart` |
|
|
427
|
-
| `gridRow` |
|
|
428
|
-
| `gridRowEnd` |
|
|
429
|
-
| `gridRowStart` |
|
|
430
|
-
| `gridTemplate` |
|
|
431
|
-
| `gridTemplateAreas` |
|
|
424
|
+
| `gridColumn` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset \| auto \| ResponsiveValue<GridColumn \| undefined>` | No | `-` | - |
|
|
425
|
+
| `gridColumnEnd` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset \| auto \| ResponsiveValue<GridColumnEnd \| undefined>` | No | `-` | - |
|
|
426
|
+
| `gridColumnStart` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset \| auto \| ResponsiveValue<GridColumnStart \| undefined>` | No | `-` | - |
|
|
427
|
+
| `gridRow` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset \| auto \| ResponsiveValue<GridRow \| undefined>` | No | `-` | - |
|
|
428
|
+
| `gridRowEnd` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset \| auto \| ResponsiveValue<GridRowEnd \| undefined>` | No | `-` | - |
|
|
429
|
+
| `gridRowStart` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset \| auto \| ResponsiveValue<GridRowStart \| undefined>` | No | `-` | - |
|
|
430
|
+
| `gridTemplate` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset \| none \| ResponsiveValue<GridTemplate \| undefined>` | No | `-` | - |
|
|
431
|
+
| `gridTemplateAreas` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset \| none \| ResponsiveValue<GridTemplateAreas \| undefined>` | No | `-` | - |
|
|
432
432
|
| `gridTemplateColumns` | `ResponsiveProp<GridTemplateColumns<string \| number>>` | No | `-` | - |
|
|
433
433
|
| `gridTemplateRows` | `ResponsiveProp<GridTemplateRows<string \| number>>` | No | `-` | - |
|
|
434
434
|
| `height` | `ResponsiveProp<Height<string \| number>>` | No | `-` | - |
|
|
435
435
|
| `inset` | `number \| Partial<ChartInset>` | No | `-` | Inset around the entire chart (outside the axes). |
|
|
436
|
-
| `justifyContent` | `ResponsiveProp<left \| right \| center \| normal \| start \| end \| flex-start \| flex-end \| space-between \| space-around \| space-evenly
|
|
436
|
+
| `justifyContent` | `ResponsiveProp<left \| right \| center \| normal \| start \| end \| flex-start \| flex-end \| stretch \| space-between \| space-around \| space-evenly>` | No | `-` | - |
|
|
437
437
|
| `key` | `Key \| null` | No | `-` | - |
|
|
438
438
|
| `layout` | `horizontal \| vertical` | No | `'vertical'` | Chart layout - describes the direction bars/areas grow. - vertical (default): Bars grow vertically. X is category axis, Y is value axis. - horizontal: Bars grow horizontally. Y is category axis, X is value axis. |
|
|
439
439
|
| `left` | `ResponsiveProp<Left<string \| number>>` | No | `-` | - |
|
|
440
|
-
| `legend` | `null \| string \| number \| false \| true \| ReactElement<
|
|
440
|
+
| `legend` | `null \| string \| number \| bigint \| false \| true \| ReactElement<unknown, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal \| Promise<AwaitedReactNode>` | No | `-` | Whether to show the legend or a custom legend element. - true renders the default Legend component - A React element renders that element as the legend - false or omitted hides the legend |
|
|
441
441
|
| `legendAccessibilityLabel` | `string` | No | `'Legend'` | Accessibility label for the legend group. |
|
|
442
442
|
| `legendPosition` | `top \| bottom \| left \| right` | No | `'bottom'` | Position of the legend relative to the chart. |
|
|
443
|
-
| `lineHeight` | `ResponsiveProp<
|
|
443
|
+
| `lineHeight` | `ResponsiveProp<LineHeight \| inherit>` | No | `-` | - |
|
|
444
444
|
| `lineType` | `dotted \| solid` | No | `'solid'` | The type of line to render. |
|
|
445
|
-
| `margin` | `ResponsiveProp<0 \| -1 \| -
|
|
446
|
-
| `marginBottom` | `ResponsiveProp<0 \| -1 \| -
|
|
447
|
-
| `marginEnd` | `ResponsiveProp<0 \| -1 \| -
|
|
448
|
-
| `marginStart` | `ResponsiveProp<0 \| -1 \| -
|
|
449
|
-
| `marginTop` | `ResponsiveProp<0 \| -1 \| -
|
|
450
|
-
| `marginX` | `ResponsiveProp<0 \| -1 \| -
|
|
451
|
-
| `marginY` | `ResponsiveProp<0 \| -1 \| -
|
|
445
|
+
| `margin` | `ResponsiveProp<0 \| -1 \| -5 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1.5 \| -2 \| -3 \| -4 \| -6 \| -7 \| -8 \| -9>` | No | `-` | - |
|
|
446
|
+
| `marginBottom` | `ResponsiveProp<0 \| -1 \| -5 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1.5 \| -2 \| -3 \| -4 \| -6 \| -7 \| -8 \| -9>` | No | `-` | - |
|
|
447
|
+
| `marginEnd` | `ResponsiveProp<0 \| -1 \| -5 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1.5 \| -2 \| -3 \| -4 \| -6 \| -7 \| -8 \| -9>` | No | `-` | - |
|
|
448
|
+
| `marginStart` | `ResponsiveProp<0 \| -1 \| -5 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1.5 \| -2 \| -3 \| -4 \| -6 \| -7 \| -8 \| -9>` | No | `-` | - |
|
|
449
|
+
| `marginTop` | `ResponsiveProp<0 \| -1 \| -5 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1.5 \| -2 \| -3 \| -4 \| -6 \| -7 \| -8 \| -9>` | No | `-` | - |
|
|
450
|
+
| `marginX` | `ResponsiveProp<0 \| -1 \| -5 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1.5 \| -2 \| -3 \| -4 \| -6 \| -7 \| -8 \| -9>` | No | `-` | - |
|
|
451
|
+
| `marginY` | `ResponsiveProp<0 \| -1 \| -5 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1.5 \| -2 \| -3 \| -4 \| -6 \| -7 \| -8 \| -9>` | No | `-` | - |
|
|
452
452
|
| `maxHeight` | `ResponsiveProp<MaxHeight<string \| number>>` | No | `-` | - |
|
|
453
453
|
| `maxWidth` | `ResponsiveProp<MaxWidth<string \| number>>` | No | `-` | - |
|
|
454
454
|
| `minHeight` | `ResponsiveProp<MinHeight<string \| number>>` | No | `-` | - |
|
|
455
455
|
| `minWidth` | `ResponsiveProp<MinWidth<string \| number>>` | No | `-` | - |
|
|
456
456
|
| `onChange` | `FormEventHandler<HTMLDivElement>` | No | `-` | - |
|
|
457
457
|
| `onScrubberPositionChange` | `((index: number) => void) \| undefined` | No | `-` | Callback fired when the scrubber position changes. Receives the dataIndex of the scrubber or undefined when not scrubbing. |
|
|
458
|
-
| `opacity` |
|
|
458
|
+
| `opacity` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset \| ResponsiveValue<Opacity \| undefined>` | No | `-` | - |
|
|
459
459
|
| `overflow` | `ResponsiveProp<hidden \| auto \| visible \| clip \| scroll>` | No | `-` | - |
|
|
460
|
-
| `padding` | `0 \| 1 \|
|
|
461
|
-
| `paddingBottom` | `0 \| 1 \|
|
|
462
|
-
| `paddingEnd` | `0 \| 1 \|
|
|
463
|
-
| `paddingStart` | `0 \| 1 \|
|
|
464
|
-
| `paddingTop` | `0 \| 1 \|
|
|
465
|
-
| `paddingX` | `0 \| 1 \|
|
|
466
|
-
| `paddingY` | `0 \| 1 \|
|
|
460
|
+
| `padding` | `0 \| 1 \| 5 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 2 \| 3 \| 4 \| 6 \| 7 \| 8 \| 9 \| ResponsiveValue<Space \| undefined>` | No | `-` | - |
|
|
461
|
+
| `paddingBottom` | `0 \| 1 \| 5 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 2 \| 3 \| 4 \| 6 \| 7 \| 8 \| 9 \| ResponsiveValue<Space \| undefined>` | No | `-` | - |
|
|
462
|
+
| `paddingEnd` | `0 \| 1 \| 5 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 2 \| 3 \| 4 \| 6 \| 7 \| 8 \| 9 \| ResponsiveValue<Space \| undefined>` | No | `-` | - |
|
|
463
|
+
| `paddingStart` | `0 \| 1 \| 5 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 2 \| 3 \| 4 \| 6 \| 7 \| 8 \| 9 \| ResponsiveValue<Space \| undefined>` | No | `-` | - |
|
|
464
|
+
| `paddingTop` | `0 \| 1 \| 5 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 2 \| 3 \| 4 \| 6 \| 7 \| 8 \| 9 \| ResponsiveValue<Space \| undefined>` | No | `-` | - |
|
|
465
|
+
| `paddingX` | `0 \| 1 \| 5 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 2 \| 3 \| 4 \| 6 \| 7 \| 8 \| 9 \| ResponsiveValue<Space \| undefined>` | No | `-` | - |
|
|
466
|
+
| `paddingY` | `0 \| 1 \| 5 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 2 \| 3 \| 4 \| 6 \| 7 \| 8 \| 9 \| ResponsiveValue<Space \| undefined>` | No | `-` | - |
|
|
467
467
|
| `pin` | `top \| bottom \| left \| right \| all` | No | `-` | Direction in which to absolutely pin the box. |
|
|
468
|
-
| `position` | `ResponsiveProp<static \| relative \| absolute \|
|
|
469
|
-
| `ref` | `(
|
|
468
|
+
| `position` | `ResponsiveProp<fixed \| static \| relative \| absolute \| sticky>` | No | `-` | - |
|
|
469
|
+
| `ref` | `null \| RefObject<HTMLButtonElement \| null> \| (instance: HTMLButtonElement \| 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). |
|
|
470
470
|
| `right` | `ResponsiveProp<Right<string \| number>>` | No | `-` | - |
|
|
471
|
-
| `rowGap` | `0 \| 1 \|
|
|
471
|
+
| `rowGap` | `0 \| 1 \| 5 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 2 \| 3 \| 4 \| 6 \| 7 \| 8 \| 9 \| ResponsiveValue<Space \| undefined>` | No | `-` | - |
|
|
472
472
|
| `series` | `AreaSeries[]` | No | `-` | Configuration objects that define how to visualize the data. Each series supports Area and Line component props for individual customization. |
|
|
473
473
|
| `showLines` | `boolean` | No | `-` | Whether to show lines on top of the areas. Useful for stacked contexts to show the outline of each area. |
|
|
474
474
|
| `showXAxis` | `boolean` | No | `-` | Whether to show the X axis. |
|
|
@@ -480,17 +480,17 @@ function CustomBaseline() {
|
|
|
480
480
|
| `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 |
|
|
481
481
|
| `textAlign` | `ResponsiveProp<center \| start \| end \| justify>` | No | `-` | - |
|
|
482
482
|
| `textDecoration` | `ResponsiveProp<none \| underline \| overline \| line-through \| underline overline \| underline double>` | No | `-` | - |
|
|
483
|
-
| `textTransform` | `ResponsiveProp<
|
|
483
|
+
| `textTransform` | `ResponsiveProp<capitalize \| lowercase \| none \| uppercase>` | No | `-` | - |
|
|
484
484
|
| `top` | `ResponsiveProp<Top<string \| number>>` | No | `-` | - |
|
|
485
|
-
| `transform` |
|
|
485
|
+
| `transform` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset \| none \| ResponsiveValue<Transform \| undefined>` | No | `-` | - |
|
|
486
486
|
| `transition` | `Orchestration & Repeat & Tween \| Orchestration & Repeat & Spring \| Orchestration & Repeat & Keyframes \| Orchestration & Repeat & Inertia \| Orchestration & Repeat & Just \| Orchestration & Repeat & None \| Orchestration & Repeat & PermissiveTransitionDefinition \| Orchestration & Repeat & Tween & { [key: string]: TransitionDefinition; } \| Orchestration & Repeat & Spring & { [key: string]: TransitionDefinition; } \| Orchestration & Repeat & Keyframes & { [key: string]: TransitionDefinition; } \| Orchestration & Repeat & Inertia & { [key: string]: TransitionDefinition; } \| Orchestration & Repeat & Just & { [key: string]: TransitionDefinition; } \| Orchestration & Repeat & None & { [key: string]: TransitionDefinition; } \| Orchestration & Repeat & PermissiveTransitionDefinition & { [key: string]: TransitionDefinition; }` | No | `-` | Transition for updates. |
|
|
487
487
|
| `transitions` | `{ enter?: Transition$1 \| null; enterOpacity?: Transition$1 \| null \| undefined; update?: Transition$1 \| null \| undefined; } \| undefined` | No | `transitions = {{ enter: { type: 'tween', duration: 0.5 }, enterOpacity: undefined, update: { type: 'spring', stiffness: 900, damping: 120, mass: 4 } }}` | Transition configuration for enter and update animations. |
|
|
488
488
|
| `type` | `dotted \| solid \| gradient` | No | `'solid'` | The type of area to render. |
|
|
489
|
-
| `userSelect` | `ResponsiveProp<text \| none \|
|
|
489
|
+
| `userSelect` | `ResponsiveProp<text \| none \| auto \| all>` | No | `-` | - |
|
|
490
490
|
| `visibility` | `ResponsiveProp<hidden \| visible>` | No | `-` | - |
|
|
491
491
|
| `width` | `ResponsiveProp<Width<string \| number>>` | No | `-` | - |
|
|
492
492
|
| `xAxis` | `(Partial<CartesianAxisConfigProps> & SharedProps & { bandGridLinePlacement?: AxisBandPlacement; bandTickMarkPlacement?: AxisBandPlacement \| undefined; label?: string \| undefined; labelGap?: number \| undefined; minTickLabelGap?: number \| undefined; requestedTickCount?: number \| undefined; showGrid?: boolean \| undefined; showLine?: boolean \| undefined; showTickMarks?: boolean \| undefined; tickMarkSize?: number \| undefined; ticks?: number[] \| ((value: number) => boolean) \| undefined; tickMarkLabelGap?: number \| undefined; tickInterval?: number \| undefined; tickMinStep?: number \| undefined; tickMaxStep?: number \| undefined; } & { className?: string \| undefined; classNames?: { root?: string \| undefined; label?: string \| undefined; tickLabel?: string \| undefined; gridLine?: string \| undefined; line?: string \| undefined; tickMark?: string \| undefined; } \| undefined; style?: CSSProperties \| undefined; styles?: { root?: CSSProperties \| undefined; label?: CSSProperties \| undefined; tickLabel?: CSSProperties \| undefined; gridLine?: CSSProperties \| undefined; line?: CSSProperties \| undefined; tickMark?: CSSProperties \| undefined; } \| undefined; GridLineComponent?: LineComponent \| undefined; LineComponent?: LineComponent \| undefined; TickMarkLineComponent?: LineComponent \| undefined; tickLabelFormatter?: ((value: number) => ChartTextChildren) \| undefined; TickLabelComponent?: AxisTickLabelComponent \| undefined; } & { axisId?: string \| undefined; position?: top \| bottom \| undefined; height?: number \| undefined; }) \| undefined` | No | `-` | Configuration for x-axis. Accepts axis config and axis props. To show the axis, set showXAxis to true. |
|
|
493
493
|
| `yAxis` | `(Partial<CartesianAxisConfigProps> & SharedProps & { bandGridLinePlacement?: AxisBandPlacement; bandTickMarkPlacement?: AxisBandPlacement \| undefined; label?: string \| undefined; labelGap?: number \| undefined; minTickLabelGap?: number \| undefined; requestedTickCount?: number \| undefined; showGrid?: boolean \| undefined; showLine?: boolean \| undefined; showTickMarks?: boolean \| undefined; tickMarkSize?: number \| undefined; ticks?: number[] \| ((value: number) => boolean) \| undefined; tickMarkLabelGap?: number \| undefined; tickInterval?: number \| undefined; tickMinStep?: number \| undefined; tickMaxStep?: number \| undefined; } & { className?: string \| undefined; classNames?: { root?: string \| undefined; label?: string \| undefined; tickLabel?: string \| undefined; gridLine?: string \| undefined; line?: string \| undefined; tickMark?: string \| undefined; } \| undefined; style?: CSSProperties \| undefined; styles?: { root?: CSSProperties \| undefined; label?: CSSProperties \| undefined; tickLabel?: CSSProperties \| undefined; gridLine?: CSSProperties \| undefined; line?: CSSProperties \| undefined; tickMark?: CSSProperties \| undefined; } \| undefined; GridLineComponent?: LineComponent \| undefined; LineComponent?: LineComponent \| undefined; TickMarkLineComponent?: LineComponent \| undefined; tickLabelFormatter?: ((value: number) => ChartTextChildren) \| undefined; TickLabelComponent?: AxisTickLabelComponent \| undefined; } & { axisId?: string \| undefined; position?: left \| right \| undefined; width?: number \| undefined; }) \| undefined` | No | `-` | Configuration for y-axis. Accepts axis config and axis props. To show the axis, set showYAxis to true. |
|
|
494
|
-
| `zIndex` |
|
|
494
|
+
| `zIndex` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset \| auto \| ResponsiveValue<ZIndex \| undefined>` | No | `-` | - |
|
|
495
495
|
|
|
496
496
|
|