@coinbase/cds-mcp-server 8.17.3 → 8.17.5
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/Accordion.txt +11 -12
- package/mcp-docs/mobile/components/AccordionItem.txt +5 -6
- package/mcp-docs/mobile/components/Alert.txt +21 -22
- package/mcp-docs/mobile/components/AreaChart.txt +118 -119
- package/mcp-docs/mobile/components/Avatar.txt +82 -83
- package/mcp-docs/mobile/components/AvatarButton.txt +103 -104
- package/mcp-docs/mobile/components/Banner.txt +100 -101
- package/mcp-docs/mobile/components/BarChart.txt +120 -121
- package/mcp-docs/mobile/components/Box.txt +65 -66
- package/mcp-docs/mobile/components/BrowserBar.txt +38 -39
- package/mcp-docs/mobile/components/Button.txt +78 -79
- package/mcp-docs/mobile/components/ButtonGroup.txt +10 -11
- package/mcp-docs/mobile/components/Carousel.txt +103 -104
- package/mcp-docs/mobile/components/CartesianChart.txt +107 -108
- package/mcp-docs/mobile/components/CellMedia.txt +15 -16
- package/mcp-docs/mobile/components/Checkbox.txt +35 -36
- package/mcp-docs/mobile/components/CheckboxCell.txt +73 -74
- package/mcp-docs/mobile/components/CheckboxGroup.txt +24 -25
- package/mcp-docs/mobile/components/Chip.txt +67 -68
- package/mcp-docs/mobile/components/Coachmark.txt +42 -43
- package/mcp-docs/mobile/components/Collapsible.txt +15 -16
- package/mcp-docs/mobile/components/ContainedAssetCard.txt +16 -17
- package/mcp-docs/mobile/components/ContentCard.txt +99 -100
- package/mcp-docs/mobile/components/ContentCardBody.txt +23 -24
- package/mcp-docs/mobile/components/ContentCardFooter.txt +19 -20
- package/mcp-docs/mobile/components/ContentCardHeader.txt +33 -34
- package/mcp-docs/mobile/components/ContentCell.txt +102 -103
- package/mcp-docs/mobile/components/ControlGroup.txt +106 -107
- package/mcp-docs/mobile/components/DatePicker.txt +121 -122
- package/mcp-docs/mobile/components/Divider.txt +31 -32
- package/mcp-docs/mobile/components/DotCount.txt +15 -16
- package/mcp-docs/mobile/components/DotStatusColor.txt +12 -13
- package/mcp-docs/mobile/components/DotSymbol.txt +21 -22
- package/mcp-docs/mobile/components/Fallback.txt +49 -50
- package/mcp-docs/mobile/components/FloatingAssetCard.txt +13 -14
- package/mcp-docs/mobile/components/HStack.txt +99 -100
- package/mcp-docs/mobile/components/HeroSquare.txt +11 -12
- package/mcp-docs/mobile/components/Icon.txt +16 -17
- package/mcp-docs/mobile/components/IconButton.txt +104 -105
- package/mcp-docs/mobile/components/InputChip.txt +62 -63
- package/mcp-docs/mobile/components/Interactable.txt +72 -73
- package/mcp-docs/mobile/components/LineChart.txt +117 -118
- package/mcp-docs/mobile/components/Link.txt +113 -114
- package/mcp-docs/mobile/components/ListCell.txt +149 -128
- package/mcp-docs/mobile/components/LogoMark.txt +8 -9
- package/mcp-docs/mobile/components/LogoWordMark.txt +7 -8
- package/mcp-docs/mobile/components/Lottie.txt +39 -40
- package/mcp-docs/mobile/components/LottieStatusAnimation.txt +11 -12
- package/mcp-docs/mobile/components/Modal.txt +36 -37
- package/mcp-docs/mobile/components/ModalBody.txt +5 -6
- package/mcp-docs/mobile/components/ModalFooter.txt +5 -6
- package/mcp-docs/mobile/components/ModalHeader.txt +5 -6
- package/mcp-docs/mobile/components/MultiContentModule.txt +107 -108
- package/mcp-docs/mobile/components/NavigationTitle.txt +13 -14
- package/mcp-docs/mobile/components/NavigationTitleSelect.txt +20 -21
- package/mcp-docs/mobile/components/NudgeCard.txt +20 -21
- package/mcp-docs/mobile/components/Numpad.txt +108 -109
- package/mcp-docs/mobile/components/Overlay.txt +45 -46
- package/mcp-docs/mobile/components/PageFooter.txt +57 -58
- package/mcp-docs/mobile/components/PageHeader.txt +79 -80
- package/mcp-docs/mobile/components/PeriodSelector.txt +98 -99
- package/mcp-docs/mobile/components/Pictogram.txt +11 -12
- package/mcp-docs/mobile/components/Point.txt +21 -22
- package/mcp-docs/mobile/components/PortalProvider.txt +7 -8
- package/mcp-docs/mobile/components/Pressable.txt +67 -68
- package/mcp-docs/mobile/components/ProgressBar.txt +18 -19
- package/mcp-docs/mobile/components/ProgressBarWithFixedLabels.txt +13 -14
- package/mcp-docs/mobile/components/ProgressBarWithFloatLabel.txt +13 -14
- package/mcp-docs/mobile/components/ProgressCircle.txt +22 -23
- package/mcp-docs/mobile/components/Radio.txt +35 -36
- package/mcp-docs/mobile/components/RadioCell.txt +73 -74
- package/mcp-docs/mobile/components/RadioGroup.txt +35 -36
- package/mcp-docs/mobile/components/ReferenceLine.txt +15 -16
- package/mcp-docs/mobile/components/RemoteImage.txt +47 -48
- package/mcp-docs/mobile/components/RemoteImageGroup.txt +11 -12
- package/mcp-docs/mobile/components/RollingNumber.txt +130 -131
- package/mcp-docs/mobile/components/Scrubber.txt +19 -20
- package/mcp-docs/mobile/components/SearchInput.txt +77 -78
- package/mcp-docs/mobile/components/SectionHeader.txt +16 -17
- package/mcp-docs/mobile/components/SegmentedTabs.txt +105 -106
- package/mcp-docs/mobile/components/Select.txt +35 -36
- package/mcp-docs/mobile/components/SelectChip.txt +143 -144
- package/mcp-docs/mobile/components/SelectOption.txt +26 -27
- package/mcp-docs/mobile/components/SlideButton.txt +128 -129
- package/mcp-docs/mobile/components/Spacer.txt +27 -28
- package/mcp-docs/mobile/components/Sparkline.txt +18 -19
- package/mcp-docs/mobile/components/SparklineGradient.txt +18 -19
- package/mcp-docs/mobile/components/SparklineInteractive.txt +37 -38
- package/mcp-docs/mobile/components/SparklineInteractiveHeader.txt +12 -13
- package/mcp-docs/mobile/components/Spinner.txt +15 -16
- package/mcp-docs/mobile/components/SpotIcon.txt +11 -12
- package/mcp-docs/mobile/components/SpotRectangle.txt +11 -12
- package/mcp-docs/mobile/components/SpotSquare.txt +11 -12
- package/mcp-docs/mobile/components/Stepper.txt +113 -114
- package/mcp-docs/mobile/components/SubBrandLogoMark.txt +8 -9
- package/mcp-docs/mobile/components/SubBrandLogoWordMark.txt +8 -9
- package/mcp-docs/mobile/components/Switch.txt +35 -36
- package/mcp-docs/mobile/components/TabIndicator.txt +12 -13
- package/mcp-docs/mobile/components/TabLabel.txt +28 -29
- package/mcp-docs/mobile/components/TabNavigation.txt +41 -42
- package/mcp-docs/mobile/components/TabbedChips.txt +38 -39
- package/mcp-docs/mobile/components/Tabs.txt +76 -77
- package/mcp-docs/mobile/components/Tag.txt +102 -103
- package/mcp-docs/mobile/components/Text.txt +91 -92
- package/mcp-docs/mobile/components/TextInput.txt +107 -108
- package/mcp-docs/mobile/components/ThemeProvider.txt +8 -9
- package/mcp-docs/mobile/components/Toast.txt +82 -83
- package/mcp-docs/mobile/components/Tooltip.txt +20 -21
- package/mcp-docs/mobile/components/TopNavBar.txt +55 -56
- package/mcp-docs/mobile/components/Tour.txt +18 -19
- package/mcp-docs/mobile/components/Tray.txt +43 -44
- package/mcp-docs/mobile/components/UpsellCard.txt +16 -17
- package/mcp-docs/mobile/components/VStack.txt +99 -100
- package/mcp-docs/mobile/components/XAxis.txt +25 -26
- package/mcp-docs/mobile/components/YAxis.txt +26 -27
- package/mcp-docs/mobile/getting-started/{mcp-server.txt → ai-overview.txt} +51 -37
- package/mcp-docs/mobile/getting-started/installation.txt +57 -0
- package/mcp-docs/mobile/getting-started/introduction.txt +3 -0
- package/mcp-docs/mobile/getting-started/playground.txt +3 -0
- package/mcp-docs/mobile/getting-started/styling.txt +84 -0
- package/mcp-docs/mobile/getting-started/theming.txt +286 -0
- package/mcp-docs/mobile/hooks/useDimensions.txt +27 -2
- package/mcp-docs/mobile/hooks/useEventHandler.txt +120 -0
- package/mcp-docs/mobile/hooks/useMergeRefs.txt +116 -0
- package/mcp-docs/mobile/hooks/useOverlayContentContext.txt +67 -2
- package/mcp-docs/mobile/hooks/usePreviousValue.txt +74 -0
- package/mcp-docs/mobile/hooks/useRefMap.txt +178 -0
- package/mcp-docs/mobile/hooks/useTheme.txt +213 -2
- package/mcp-docs/mobile/routes.txt +8 -1
- package/mcp-docs/web/components/Accordion.txt +12 -13
- package/mcp-docs/web/components/AccordionItem.txt +5 -6
- package/mcp-docs/web/components/Alert.txt +24 -25
- package/mcp-docs/web/components/AreaChart.txt +137 -138
- package/mcp-docs/web/components/Avatar.txt +91 -92
- package/mcp-docs/web/components/AvatarButton.txt +113 -114
- package/mcp-docs/web/components/Banner.txt +101 -102
- package/mcp-docs/web/components/BarChart.txt +367 -368
- package/mcp-docs/web/components/Box.txt +65 -66
- package/mcp-docs/web/components/Button.txt +81 -82
- package/mcp-docs/web/components/ButtonGroup.txt +10 -11
- package/mcp-docs/web/components/Calendar.txt +56 -57
- package/mcp-docs/web/components/Carousel.txt +116 -117
- package/mcp-docs/web/components/CartesianChart.txt +357 -358
- package/mcp-docs/web/components/CellMedia.txt +14 -15
- package/mcp-docs/web/components/Checkbox.txt +22 -23
- package/mcp-docs/web/components/CheckboxCell.txt +70 -71
- package/mcp-docs/web/components/CheckboxGroup.txt +15 -16
- package/mcp-docs/web/components/Chip.txt +67 -68
- package/mcp-docs/web/components/Coachmark.txt +69 -70
- package/mcp-docs/web/components/Collapsible.txt +15 -16
- package/mcp-docs/web/components/ContainedAssetCard.txt +108 -109
- package/mcp-docs/web/components/ContentCard.txt +101 -102
- package/mcp-docs/web/components/ContentCardBody.txt +23 -24
- package/mcp-docs/web/components/ContentCardFooter.txt +19 -20
- package/mcp-docs/web/components/ContentCardHeader.txt +33 -34
- package/mcp-docs/web/components/ContentCell.txt +85 -86
- package/mcp-docs/web/components/ControlGroup.txt +108 -109
- package/mcp-docs/web/components/DatePicker.txt +59 -60
- package/mcp-docs/web/components/Divider.txt +31 -32
- package/mcp-docs/web/components/DotCount.txt +17 -18
- package/mcp-docs/web/components/DotStatusColor.txt +12 -13
- package/mcp-docs/web/components/DotSymbol.txt +24 -25
- package/mcp-docs/web/components/Dropdown.txt +31 -32
- package/mcp-docs/web/components/Fallback.txt +49 -50
- package/mcp-docs/web/components/FloatingAssetCard.txt +108 -109
- package/mcp-docs/web/components/FullscreenAlert.txt +20 -21
- package/mcp-docs/web/components/FullscreenModal.txt +28 -29
- package/mcp-docs/web/components/FullscreenModalLayout.txt +19 -20
- package/mcp-docs/web/components/Grid.txt +106 -107
- package/mcp-docs/web/components/GridColumn.txt +96 -97
- package/mcp-docs/web/components/HStack.txt +101 -102
- package/mcp-docs/web/components/HeroSquare.txt +12 -13
- package/mcp-docs/web/components/Icon.txt +27 -28
- package/mcp-docs/web/components/IconButton.txt +117 -118
- package/mcp-docs/web/components/InputChip.txt +62 -63
- package/mcp-docs/web/components/Interactable.txt +75 -76
- package/mcp-docs/web/components/LineChart.txt +366 -367
- package/mcp-docs/web/components/Link.txt +114 -115
- package/mcp-docs/web/components/ListCell.txt +157 -136
- package/mcp-docs/web/components/LogoMark.txt +8 -9
- package/mcp-docs/web/components/LogoWordMark.txt +7 -8
- package/mcp-docs/web/components/Lottie.txt +44 -45
- package/mcp-docs/web/components/LottieStatusAnimation.txt +11 -12
- package/mcp-docs/web/components/MediaQueryProvider.txt +7 -8
- package/mcp-docs/web/components/Modal.txt +69 -66
- package/mcp-docs/web/components/ModalBody.txt +5 -6
- package/mcp-docs/web/components/ModalFooter.txt +5 -6
- package/mcp-docs/web/components/ModalHeader.txt +5 -6
- package/mcp-docs/web/components/MultiContentModule.txt +109 -110
- package/mcp-docs/web/components/NavigationBar.txt +18 -19
- package/mcp-docs/web/components/NavigationTitle.txt +7 -8
- package/mcp-docs/web/components/NavigationTitleSelect.txt +9 -10
- package/mcp-docs/web/components/NudgeCard.txt +61 -62
- package/mcp-docs/web/components/Overlay.txt +57 -58
- package/mcp-docs/web/components/PageFooter.txt +77 -78
- package/mcp-docs/web/components/PageHeader.txt +107 -108
- package/mcp-docs/web/components/Pagination.txt +115 -116
- package/mcp-docs/web/components/PeriodSelector.txt +158 -159
- package/mcp-docs/web/components/Pictogram.txt +13 -14
- package/mcp-docs/web/components/Point.txt +169 -170
- package/mcp-docs/web/components/PortalProvider.txt +6 -7
- package/mcp-docs/web/components/Pressable.txt +73 -74
- package/mcp-docs/web/components/ProgressBar.txt +20 -21
- package/mcp-docs/web/components/ProgressBarWithFixedLabels.txt +15 -16
- package/mcp-docs/web/components/ProgressBarWithFloatLabel.txt +15 -16
- package/mcp-docs/web/components/ProgressCircle.txt +24 -25
- package/mcp-docs/web/components/Radio.txt +22 -23
- package/mcp-docs/web/components/RadioCell.txt +83 -84
- package/mcp-docs/web/components/RadioGroup.txt +22 -23
- package/mcp-docs/web/components/ReferenceLine.txt +22 -23
- package/mcp-docs/web/components/RemoteImage.txt +49 -50
- package/mcp-docs/web/components/RemoteImageGroup.txt +11 -12
- package/mcp-docs/web/components/RollingNumber.txt +131 -132
- package/mcp-docs/web/components/Scrubber.txt +22 -23
- package/mcp-docs/web/components/SearchInput.txt +29 -30
- package/mcp-docs/web/components/SectionHeader.txt +98 -99
- package/mcp-docs/web/components/SegmentedTabs.txt +109 -110
- package/mcp-docs/web/components/Select.txt +22 -23
- package/mcp-docs/web/components/SelectChip.txt +134 -135
- package/mcp-docs/web/components/SelectOption.txt +31 -32
- package/mcp-docs/web/components/Sidebar.txt +109 -110
- package/mcp-docs/web/components/SidebarItem.txt +6 -7
- package/mcp-docs/web/components/SidebarMoreMenu.txt +5 -6
- package/mcp-docs/web/components/Spacer.txt +57 -58
- package/mcp-docs/web/components/Sparkline.txt +18 -19
- package/mcp-docs/web/components/SparklineGradient.txt +18 -19
- package/mcp-docs/web/components/SparklineInteractive.txt +34 -35
- package/mcp-docs/web/components/SparklineInteractiveHeader.txt +12 -13
- package/mcp-docs/web/components/Spinner.txt +15 -16
- package/mcp-docs/web/components/SpotIcon.txt +12 -13
- package/mcp-docs/web/components/SpotRectangle.txt +12 -13
- package/mcp-docs/web/components/SpotSquare.txt +12 -13
- package/mcp-docs/web/components/Stepper.txt +119 -120
- package/mcp-docs/web/components/SubBrandLogoMark.txt +8 -9
- package/mcp-docs/web/components/SubBrandLogoWordMark.txt +8 -9
- package/mcp-docs/web/components/Switch.txt +23 -24
- package/mcp-docs/web/components/TabIndicator.txt +12 -13
- package/mcp-docs/web/components/TabLabel.txt +28 -29
- package/mcp-docs/web/components/TabNavigation.txt +41 -42
- package/mcp-docs/web/components/TabbedChips.txt +38 -39
- package/mcp-docs/web/components/Table.txt +17 -18
- package/mcp-docs/web/components/TableBody.txt +9 -10
- package/mcp-docs/web/components/TableCaption.txt +13 -14
- package/mcp-docs/web/components/TableCell.txt +21 -22
- package/mcp-docs/web/components/TableCellFallback.txt +16 -17
- package/mcp-docs/web/components/TableFooter.txt +9 -10
- package/mcp-docs/web/components/TableHeader.txt +10 -11
- package/mcp-docs/web/components/TableRow.txt +13 -14
- package/mcp-docs/web/components/Tabs.txt +94 -95
- package/mcp-docs/web/components/Tag.txt +106 -107
- package/mcp-docs/web/components/Text.txt +110 -111
- package/mcp-docs/web/components/TextInput.txt +32 -33
- package/mcp-docs/web/components/ThemeProvider.txt +27 -28
- package/mcp-docs/web/components/TileButton.txt +37 -38
- package/mcp-docs/web/components/Toast.txt +82 -83
- package/mcp-docs/web/components/Tooltip.txt +22 -23
- package/mcp-docs/web/components/Tour.txt +21 -22
- package/mcp-docs/web/components/Tray.txt +23 -24
- package/mcp-docs/web/components/UpsellCard.txt +16 -17
- package/mcp-docs/web/components/VStack.txt +101 -102
- package/mcp-docs/web/components/XAxis.txt +25 -26
- package/mcp-docs/web/components/YAxis.txt +26 -27
- package/mcp-docs/web/getting-started/{mcp-server.txt → ai-overview.txt} +51 -37
- package/mcp-docs/web/getting-started/installation.txt +103 -0
- package/mcp-docs/web/getting-started/introduction.txt +3 -0
- package/mcp-docs/web/getting-started/playground.txt +3 -0
- package/mcp-docs/web/getting-started/styling.txt +161 -0
- package/mcp-docs/web/getting-started/templates.txt +121 -0
- package/mcp-docs/web/getting-started/theming.txt +426 -0
- package/mcp-docs/web/hooks/useBreakpoints.txt +30 -2
- package/mcp-docs/web/hooks/useDimensions.txt +61 -2
- package/mcp-docs/web/hooks/useEventHandler.txt +120 -0
- package/mcp-docs/web/hooks/useHasMounted.txt +22 -2
- package/mcp-docs/web/hooks/useIsoEffect.txt +18 -2
- package/mcp-docs/web/hooks/useMediaQuery.txt +22 -2
- package/mcp-docs/web/hooks/useMergeRefs.txt +116 -0
- package/mcp-docs/web/hooks/useOverlayContentContext.txt +64 -2
- package/mcp-docs/web/hooks/usePreviousValue.txt +74 -0
- package/mcp-docs/web/hooks/useRefMap.txt +178 -0
- package/mcp-docs/web/hooks/useScrollBlocker.txt +21 -2
- package/mcp-docs/web/hooks/useTheme.txt +261 -2
- package/mcp-docs/web/routes.txt +9 -1
- package/package.json +1 -1
|
@@ -4,21 +4,10 @@ A component to display a group of RemoteImage components in a stack.
|
|
|
4
4
|
|
|
5
5
|
## Import
|
|
6
6
|
|
|
7
|
-
```
|
|
7
|
+
```tsx
|
|
8
8
|
import { RemoteImageGroup } from '@coinbase/cds-web/media/RemoteImageGroup'
|
|
9
9
|
```
|
|
10
10
|
|
|
11
|
-
## Props
|
|
12
|
-
|
|
13
|
-
| Prop | Type | Required | Default | Description |
|
|
14
|
-
| --- | --- | --- | --- | --- |
|
|
15
|
-
| `children` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | Children content |
|
|
16
|
-
| `max` | `number` | No | `4` | Indicates the number of remote image before it collapses |
|
|
17
|
-
| `shape` | `rectangle \| circle \| squircle \| square \| hexagon` | No | `circle` | Shape of all RemoteImage children in the group |
|
|
18
|
-
| `size` | `number \| AvatarSize` | No | `m` | Size of all RemoteImage children in the group. |
|
|
19
|
-
| `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 |
|
|
20
|
-
|
|
21
|
-
|
|
22
11
|
## Examples
|
|
23
12
|
|
|
24
13
|
### Basic Usage
|
|
@@ -84,4 +73,14 @@ function Component() {
|
|
|
84
73
|
}
|
|
85
74
|
```
|
|
86
75
|
|
|
76
|
+
## Props
|
|
77
|
+
|
|
78
|
+
| Prop | Type | Required | Default | Description |
|
|
79
|
+
| --- | --- | --- | --- | --- |
|
|
80
|
+
| `children` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | Children content |
|
|
81
|
+
| `max` | `number` | No | `4` | Indicates the number of remote image before it collapses |
|
|
82
|
+
| `shape` | `rectangle \| circle \| squircle \| square \| hexagon` | No | `circle` | Shape of all RemoteImage children in the group |
|
|
83
|
+
| `size` | `number \| AvatarSize` | No | `m` | Size of all RemoteImage children in the group. |
|
|
84
|
+
| `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 |
|
|
85
|
+
|
|
87
86
|
|
|
@@ -4,141 +4,10 @@ A numeric display that animates value changes with rolling digits.
|
|
|
4
4
|
|
|
5
5
|
## Import
|
|
6
6
|
|
|
7
|
-
```
|
|
7
|
+
```tsx
|
|
8
8
|
import { RollingNumber } from '@coinbase/cds-web/numbers/RollingNumber'
|
|
9
9
|
```
|
|
10
10
|
|
|
11
|
-
## Props
|
|
12
|
-
|
|
13
|
-
| Prop | Type | Required | Default | Description |
|
|
14
|
-
| --- | --- | --- | --- | --- |
|
|
15
|
-
| `value` | `number` | Yes | `-` | Number to display. |
|
|
16
|
-
| `RollingNumberAffixSectionComponent` | `RollingNumberAffixSectionComponent` | No | `-` | Component used to render prefix and suffix sections. |
|
|
17
|
-
| `RollingNumberDigitComponent` | `RollingNumberDigitComponent` | No | `-` | Component used to render individual digits. |
|
|
18
|
-
| `RollingNumberMaskComponent` | `RollingNumberMaskComponent` | No | `-` | Component used to render the mask container. |
|
|
19
|
-
| `RollingNumberSymbolComponent` | `RollingNumberSymbolComponent` | No | `-` | Component used to render separators and other symbols. |
|
|
20
|
-
| `RollingNumberValueSectionComponent` | `RollingNumberValueSectionComponent` | No | `-` | Component used to render the numeric sections. |
|
|
21
|
-
| `accessibilityLabelPrefix` | `string` | No | `-` | Accessibility label prefix announced before the value. |
|
|
22
|
-
| `accessibilityLabelSuffix` | `string` | No | `-` | Accessibility label suffix announced after the value. |
|
|
23
|
-
| `alignContent` | `ResponsiveProp<center \| normal \| start \| end \| flex-start \| flex-end \| stretch \| baseline \| first baseline \| last baseline \| space-between \| space-around \| space-evenly>` | No | `-` | - |
|
|
24
|
-
| `alignItems` | `ResponsiveProp<center \| normal \| start \| end \| flex-start \| flex-end \| self-start \| self-end \| stretch \| baseline \| first baseline \| last baseline>` | No | `-` | - |
|
|
25
|
-
| `alignSelf` | `ResponsiveProp<center \| normal \| auto \| start \| end \| flex-start \| flex-end \| self-start \| self-end \| stretch \| baseline \| first baseline \| last baseline>` | No | `-` | - |
|
|
26
|
-
| `ariaLive` | `off \| assertive \| polite` | No | `-` | aria-live politeness level. Defaults to {@code polite}. |
|
|
27
|
-
| `as` | `symbol \| object \| style \| svg \| a \| abbr \| address \| area \| article \| aside \| audio \| b \| base \| bdi \| bdo \| big \| blockquote \| body \| br \| button \| canvas \| caption \| center \| cite \| code \| col \| colgroup \| data \| datalist \| dd \| del \| details \| dfn \| dialog \| div \| dl \| dt \| em \| embed \| fieldset \| figcaption \| figure \| footer \| form \| h1 \| h2 \| h3 \| h4 \| h5 \| h6 \| head \| header \| hgroup \| hr \| html \| i \| iframe \| img \| input \| ins \| kbd \| keygen \| label \| legend \| li \| link \| main \| map \| mark \| menu \| menuitem \| meta \| meter \| nav \| noindex \| noscript \| ol \| optgroup \| option \| output \| p \| param \| picture \| pre \| progress \| q \| rp \| rt \| ruby \| s \| samp \| search \| slot \| script \| section \| select \| small \| source \| span \| strong \| sub \| summary \| sup \| table \| template \| tbody \| td \| textarea \| tfoot \| th \| thead \| time \| title \| tr \| track \| u \| ul \| var \| video \| wbr \| webview \| animate \| animateMotion \| animateTransform \| circle \| clipPath \| defs \| desc \| ellipse \| feBlend \| feColorMatrix \| feComponentTransfer \| feComposite \| feConvolveMatrix \| feDiffuseLighting \| feDisplacementMap \| feDistantLight \| feDropShadow \| feFlood \| feFuncA \| feFuncB \| feFuncG \| feFuncR \| feGaussianBlur \| feImage \| feMerge \| feMergeNode \| feMorphology \| feOffset \| fePointLight \| feSpecularLighting \| feSpotLight \| feTile \| feTurbulence \| filter \| foreignObject \| g \| image \| line \| linearGradient \| marker \| mask \| metadata \| mpath \| path \| pattern \| polygon \| polyline \| radialGradient \| rect \| set \| stop \| switch \| text \| textPath \| tspan \| use \| view \| ComponentClass<any, any> \| FunctionComponent<any>` | No | `-` | - |
|
|
28
|
-
| `aspectRatio` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset \| auto` | No | `-` | - |
|
|
29
|
-
| `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 | `-` | - |
|
|
30
|
-
| `borderBottomLeftRadius` | `0 \| 100 \| 200 \| 300 \| 400 \| 500 \| 600 \| 700 \| 800 \| 900 \| 1000` | No | `-` | - |
|
|
31
|
-
| `borderBottomRightRadius` | `0 \| 100 \| 200 \| 300 \| 400 \| 500 \| 600 \| 700 \| 800 \| 900 \| 1000` | No | `-` | - |
|
|
32
|
-
| `borderBottomWidth` | `0 \| 100 \| 200 \| 300 \| 400 \| 500` | No | `-` | - |
|
|
33
|
-
| `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` | No | `-` | - |
|
|
34
|
-
| `borderEndWidth` | `0 \| 100 \| 200 \| 300 \| 400 \| 500` | No | `-` | - |
|
|
35
|
-
| `borderRadius` | `0 \| 100 \| 200 \| 300 \| 400 \| 500 \| 600 \| 700 \| 800 \| 900 \| 1000` | No | `-` | - |
|
|
36
|
-
| `borderStartWidth` | `0 \| 100 \| 200 \| 300 \| 400 \| 500` | No | `-` | - |
|
|
37
|
-
| `borderTopLeftRadius` | `0 \| 100 \| 200 \| 300 \| 400 \| 500 \| 600 \| 700 \| 800 \| 900 \| 1000` | No | `-` | - |
|
|
38
|
-
| `borderTopRightRadius` | `0 \| 100 \| 200 \| 300 \| 400 \| 500 \| 600 \| 700 \| 800 \| 900 \| 1000` | No | `-` | - |
|
|
39
|
-
| `borderTopWidth` | `0 \| 100 \| 200 \| 300 \| 400 \| 500` | No | `-` | - |
|
|
40
|
-
| `borderWidth` | `0 \| 100 \| 200 \| 300 \| 400 \| 500` | No | `-` | - |
|
|
41
|
-
| `bordered` | `boolean` | No | `-` | Add a border around all sides of the box. |
|
|
42
|
-
| `borderedBottom` | `boolean` | No | `-` | Add a border to the bottom side of the box. |
|
|
43
|
-
| `borderedEnd` | `boolean` | No | `-` | Add a border to the trailing side of the box. |
|
|
44
|
-
| `borderedHorizontal` | `boolean` | No | `-` | Add a border to the leading and trailing sides of the box. |
|
|
45
|
-
| `borderedStart` | `boolean` | No | `-` | Add a border to the leading side of the box. |
|
|
46
|
-
| `borderedTop` | `boolean` | No | `-` | Add a border to the top side of the box. |
|
|
47
|
-
| `borderedVertical` | `boolean` | No | `-` | Add a border to the top and bottom sides of the box. |
|
|
48
|
-
| `bottom` | `ResponsiveProp<Bottom<string \| number>>` | No | `-` | - |
|
|
49
|
-
| `classNames` | `{ root?: string; visibleContent?: string \| undefined; formattedValueSection?: string \| undefined; prefix?: string \| undefined; suffix?: string \| undefined; i18nPrefix?: string \| undefined; i18nSuffix?: string \| undefined; integer?: string \| undefined; fraction?: string \| undefined; text?: string \| undefined; } \| undefined` | No | `-` | Class name overrides applied to RollingNumber slots. |
|
|
50
|
-
| `color` | `((Color \| { base?: Color; phone?: Color \| undefined; tablet?: Color \| undefined; desktop?: Color \| undefined; }) & Color) \| undefined` | No | `-` | Base text color token. When {@link colorPulseOnUpdate } is true, the color briefly pulses to a positive or negative mid color before returning to this base color. Defaults to {@code fg}. |
|
|
51
|
-
| `colorPulseOnUpdate` | `boolean` | No | `-` | Enables color pulsing on positive or negative changes. Defaults to {@code false}. |
|
|
52
|
-
| `columnGap` | `0 \| 5 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1 \| 1.5 \| 2 \| 3 \| 4 \| 6 \| 7 \| 8 \| 9` | No | `-` | - |
|
|
53
|
-
| `dangerouslySetBackground` | `string` | No | `-` | - |
|
|
54
|
-
| `dangerouslySetColor` | `string` | No | `-` | - |
|
|
55
|
-
| `disabled` | `boolean` | No | `-` | - |
|
|
56
|
-
| `display` | `ResponsiveProp<grid \| revert \| none \| block \| inline \| inline-block \| flex \| inline-flex \| inline-grid \| contents \| flow-root \| list-item>` | No | `-` | - |
|
|
57
|
-
| `elevation` | `0 \| 1 \| 2` | No | `-` | - |
|
|
58
|
-
| `enableSubscriptNotation` | `boolean` | No | `-` | Enables subscript notation for leading zeros in the fractional part (for example, {@code 0.00009 => 0.0₄9}). |
|
|
59
|
-
| `flexBasis` | `ResponsiveProp<FlexBasis<string \| number>>` | No | `-` | - |
|
|
60
|
-
| `flexDirection` | `ResponsiveProp<column \| row \| row-reverse \| column-reverse>` | No | `-` | - |
|
|
61
|
-
| `flexGrow` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset` | No | `-` | - |
|
|
62
|
-
| `flexShrink` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset` | No | `-` | - |
|
|
63
|
-
| `flexWrap` | `ResponsiveProp<nowrap \| wrap \| wrap-reverse>` | No | `-` | - |
|
|
64
|
-
| `font` | `ResponsiveProp<FontFamily \| inherit>` | No | `-` | - |
|
|
65
|
-
| `fontFamily` | `ResponsiveProp<FontFamily \| inherit>` | No | `-` | - |
|
|
66
|
-
| `fontSize` | `ResponsiveProp<FontSize \| inherit>` | No | `-` | - |
|
|
67
|
-
| `fontWeight` | `ResponsiveProp<FontWeight \| inherit>` | No | `-` | - |
|
|
68
|
-
| `format` | `(Omit<NumberFormatOptions, notation> & { notation?: compact \| standard; }) \| undefined` | No | `-` | Intl.NumberFormat options applied when formatting the value. Scientific and engineering notation are not supported. |
|
|
69
|
-
| `formattedValue` | `string` | No | `-` | Preformatted value rendered instead of formatting {@link value }. {@link value } is still used to determine numeric deltas. |
|
|
70
|
-
| `gap` | `0 \| 5 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1 \| 1.5 \| 2 \| 3 \| 4 \| 6 \| 7 \| 8 \| 9` | No | `-` | - |
|
|
71
|
-
| `grid` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset \| none` | No | `-` | - |
|
|
72
|
-
| `gridArea` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset \| auto` | No | `-` | - |
|
|
73
|
-
| `gridAutoColumns` | `ResponsiveProp<GridAutoColumns<string \| number>>` | No | `-` | - |
|
|
74
|
-
| `gridAutoFlow` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset \| row \| column \| dense` | No | `-` | - |
|
|
75
|
-
| `gridAutoRows` | `ResponsiveProp<GridAutoRows<string \| number>>` | No | `-` | - |
|
|
76
|
-
| `gridColumn` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset \| auto` | No | `-` | - |
|
|
77
|
-
| `gridColumnEnd` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset \| auto` | No | `-` | - |
|
|
78
|
-
| `gridColumnStart` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset \| auto` | No | `-` | - |
|
|
79
|
-
| `gridRow` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset \| auto` | No | `-` | - |
|
|
80
|
-
| `gridRowEnd` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset \| auto` | No | `-` | - |
|
|
81
|
-
| `gridRowStart` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset \| auto` | No | `-` | - |
|
|
82
|
-
| `gridTemplate` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset \| none` | No | `-` | - |
|
|
83
|
-
| `gridTemplateAreas` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset \| none` | No | `-` | - |
|
|
84
|
-
| `gridTemplateColumns` | `ResponsiveProp<GridTemplateColumns<string \| number>>` | No | `-` | - |
|
|
85
|
-
| `gridTemplateRows` | `ResponsiveProp<GridTemplateRows<string \| number>>` | No | `-` | - |
|
|
86
|
-
| `height` | `ResponsiveProp<Height<string \| number>>` | No | `-` | - |
|
|
87
|
-
| `justifyContent` | `ResponsiveProp<left \| right \| center \| normal \| start \| end \| flex-start \| flex-end \| stretch \| space-between \| space-around \| space-evenly>` | No | `-` | - |
|
|
88
|
-
| `left` | `ResponsiveProp<Left<string \| number>>` | No | `-` | - |
|
|
89
|
-
| `lineHeight` | `ResponsiveProp<LineHeight \| inherit>` | No | `-` | - |
|
|
90
|
-
| `locale` | `string \| Locale \| readonly (string \| Locale)[]` | No | `-` | Locale used for formatting. Defaults to the locale from {@link LocaleProvider }. |
|
|
91
|
-
| `margin` | `ResponsiveProp<0 \| -5 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1 \| -1.5 \| -2 \| -3 \| -4 \| -6 \| -7 \| -8 \| -9>` | No | `-` | - |
|
|
92
|
-
| `marginBottom` | `ResponsiveProp<0 \| -5 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1 \| -1.5 \| -2 \| -3 \| -4 \| -6 \| -7 \| -8 \| -9>` | No | `-` | - |
|
|
93
|
-
| `marginEnd` | `ResponsiveProp<0 \| -5 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1 \| -1.5 \| -2 \| -3 \| -4 \| -6 \| -7 \| -8 \| -9>` | No | `-` | - |
|
|
94
|
-
| `marginStart` | `ResponsiveProp<0 \| -5 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1 \| -1.5 \| -2 \| -3 \| -4 \| -6 \| -7 \| -8 \| -9>` | No | `-` | - |
|
|
95
|
-
| `marginTop` | `ResponsiveProp<0 \| -5 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1 \| -1.5 \| -2 \| -3 \| -4 \| -6 \| -7 \| -8 \| -9>` | No | `-` | - |
|
|
96
|
-
| `marginX` | `ResponsiveProp<0 \| -5 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1 \| -1.5 \| -2 \| -3 \| -4 \| -6 \| -7 \| -8 \| -9>` | No | `-` | - |
|
|
97
|
-
| `marginY` | `ResponsiveProp<0 \| -5 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1 \| -1.5 \| -2 \| -3 \| -4 \| -6 \| -7 \| -8 \| -9>` | No | `-` | - |
|
|
98
|
-
| `maxHeight` | `ResponsiveProp<MaxHeight<string \| number>>` | No | `-` | - |
|
|
99
|
-
| `maxWidth` | `ResponsiveProp<MaxWidth<string \| number>>` | No | `-` | - |
|
|
100
|
-
| `minHeight` | `ResponsiveProp<MinHeight<string \| number>>` | No | `-` | - |
|
|
101
|
-
| `minWidth` | `ResponsiveProp<MinWidth<string \| number>>` | No | `-` | - |
|
|
102
|
-
| `mono` | `boolean` | No | `-` | Use monospace font family. |
|
|
103
|
-
| `negativePulseColor` | `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 | `-` | Color token used for negative numeric changes. Defaults to {@code fgNegative}. |
|
|
104
|
-
| `noWrap` | `boolean` | No | `false` | Set text to be in a single line. |
|
|
105
|
-
| `numberOfLines` | `number` | No | `-` | - |
|
|
106
|
-
| `opacity` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset` | No | `-` | - |
|
|
107
|
-
| `overflow` | `clip \| wrap \| truncate \| break` | No | `-` | Set overflow behavior. |
|
|
108
|
-
| `padding` | `0 \| 5 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1 \| 1.5 \| 2 \| 3 \| 4 \| 6 \| 7 \| 8 \| 9` | No | `-` | - |
|
|
109
|
-
| `paddingBottom` | `0 \| 5 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1 \| 1.5 \| 2 \| 3 \| 4 \| 6 \| 7 \| 8 \| 9` | No | `-` | - |
|
|
110
|
-
| `paddingEnd` | `0 \| 5 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1 \| 1.5 \| 2 \| 3 \| 4 \| 6 \| 7 \| 8 \| 9` | No | `-` | - |
|
|
111
|
-
| `paddingStart` | `0 \| 5 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1 \| 1.5 \| 2 \| 3 \| 4 \| 6 \| 7 \| 8 \| 9` | No | `-` | - |
|
|
112
|
-
| `paddingTop` | `0 \| 5 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1 \| 1.5 \| 2 \| 3 \| 4 \| 6 \| 7 \| 8 \| 9` | No | `-` | - |
|
|
113
|
-
| `paddingX` | `0 \| 5 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1 \| 1.5 \| 2 \| 3 \| 4 \| 6 \| 7 \| 8 \| 9` | No | `-` | - |
|
|
114
|
-
| `paddingY` | `0 \| 5 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1 \| 1.5 \| 2 \| 3 \| 4 \| 6 \| 7 \| 8 \| 9` | No | `-` | - |
|
|
115
|
-
| `pin` | `top \| bottom \| left \| right \| all` | No | `-` | Direction in which to absolutely pin the box. |
|
|
116
|
-
| `position` | `ResponsiveProp<fixed \| static \| relative \| absolute \| sticky>` | No | `-` | - |
|
|
117
|
-
| `positivePulseColor` | `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 | `-` | Color token used for positive numeric changes. Defaults to {@code fgPositive}. |
|
|
118
|
-
| `prefix` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | Content rendered before the formatted value. |
|
|
119
|
-
| `ref` | `any` | No | `-` | - |
|
|
120
|
-
| `renderEmptyNode` | `boolean` | No | `-` | - |
|
|
121
|
-
| `right` | `ResponsiveProp<Right<string \| number>>` | No | `-` | - |
|
|
122
|
-
| `rowGap` | `0 \| 5 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1 \| 1.5 \| 2 \| 3 \| 4 \| 6 \| 7 \| 8 \| 9` | No | `-` | - |
|
|
123
|
-
| `slashedZero` | `boolean` | No | `false` | Use character for number zero with a slash through it to differentiate it from the letter O. |
|
|
124
|
-
| `style` | `CSSProperties` | No | `-` | - |
|
|
125
|
-
| `styles` | `{ root?: CSSProperties; visibleContent?: CSSProperties \| undefined; formattedValueSection?: CSSProperties \| undefined; prefix?: CSSProperties \| undefined; suffix?: CSSProperties \| undefined; i18nPrefix?: CSSProperties \| undefined; i18nSuffix?: CSSProperties \| undefined; integer?: CSSProperties \| undefined; fraction?: CSSProperties \| undefined; text?: CSSProperties \| undefined; } \| undefined` | No | `-` | Inline style overrides applied to RollingNumber slots. |
|
|
126
|
-
| `suffix` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | Content rendered after the formatted value. |
|
|
127
|
-
| `tabularNumbers` | `boolean` | No | `false` | Activates the set of figures where numbers are all of the same size, allowing them to be easily aligned. Enables tabular figures on the underlying {@link Text}. Defaults to {@code true}. |
|
|
128
|
-
| `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 |
|
|
129
|
-
| `textAlign` | `ResponsiveProp<center \| start \| end \| justify>` | No | `-` | - |
|
|
130
|
-
| `textDecoration` | `ResponsiveProp<none \| underline \| overline \| line-through \| underline overline \| underline double>` | No | `-` | - |
|
|
131
|
-
| `textTransform` | `ResponsiveProp<capitalize \| lowercase \| none \| uppercase>` | No | `-` | - |
|
|
132
|
-
| `top` | `ResponsiveProp<Top<string \| number>>` | No | `-` | - |
|
|
133
|
-
| `transform` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset \| none` | No | `-` | - |
|
|
134
|
-
| `transition` | `RollingNumberTransitionConfig` | No | `-` | Framer Motion transition overrides. Supports per-property overrides for {@code y} and {@code color} only. |
|
|
135
|
-
| `underline` | `boolean` | No | `false` | Set text decoration to underline. |
|
|
136
|
-
| `userSelect` | `ResponsiveProp<text \| none \| auto \| all>` | No | `-` | - |
|
|
137
|
-
| `visibility` | `ResponsiveProp<hidden \| visible>` | No | `-` | - |
|
|
138
|
-
| `width` | `ResponsiveProp<Width<string \| number>>` | No | `-` | - |
|
|
139
|
-
| `zIndex` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset \| auto` | No | `-` | - |
|
|
140
|
-
|
|
141
|
-
|
|
142
11
|
## Examples
|
|
143
12
|
|
|
144
13
|
### Basic Example
|
|
@@ -1019,4 +888,134 @@ ValueSection
|
|
|
1019
888
|
└── non-active digits below (positioned)
|
|
1020
889
|
```
|
|
1021
890
|
|
|
891
|
+
## Props
|
|
892
|
+
|
|
893
|
+
| Prop | Type | Required | Default | Description |
|
|
894
|
+
| --- | --- | --- | --- | --- |
|
|
895
|
+
| `value` | `number` | Yes | `-` | Number to display. |
|
|
896
|
+
| `RollingNumberAffixSectionComponent` | `RollingNumberAffixSectionComponent` | No | `-` | Component used to render prefix and suffix sections. |
|
|
897
|
+
| `RollingNumberDigitComponent` | `RollingNumberDigitComponent` | No | `-` | Component used to render individual digits. |
|
|
898
|
+
| `RollingNumberMaskComponent` | `RollingNumberMaskComponent` | No | `-` | Component used to render the mask container. |
|
|
899
|
+
| `RollingNumberSymbolComponent` | `RollingNumberSymbolComponent` | No | `-` | Component used to render separators and other symbols. |
|
|
900
|
+
| `RollingNumberValueSectionComponent` | `RollingNumberValueSectionComponent` | No | `-` | Component used to render the numeric sections. |
|
|
901
|
+
| `accessibilityLabelPrefix` | `string` | No | `-` | Accessibility label prefix announced before the value. |
|
|
902
|
+
| `accessibilityLabelSuffix` | `string` | No | `-` | Accessibility label suffix announced after the value. |
|
|
903
|
+
| `alignContent` | `ResponsiveProp<center \| normal \| start \| end \| flex-start \| flex-end \| stretch \| baseline \| first baseline \| last baseline \| space-between \| space-around \| space-evenly>` | No | `-` | - |
|
|
904
|
+
| `alignItems` | `ResponsiveProp<center \| normal \| start \| end \| flex-start \| flex-end \| self-start \| self-end \| stretch \| baseline \| first baseline \| last baseline>` | No | `-` | - |
|
|
905
|
+
| `alignSelf` | `ResponsiveProp<center \| normal \| auto \| start \| end \| flex-start \| flex-end \| self-start \| self-end \| stretch \| baseline \| first baseline \| last baseline>` | No | `-` | - |
|
|
906
|
+
| `ariaLive` | `off \| assertive \| polite` | No | `-` | aria-live politeness level. Defaults to {@code polite}. |
|
|
907
|
+
| `as` | `symbol \| object \| style \| svg \| a \| abbr \| address \| area \| article \| aside \| audio \| b \| base \| bdi \| bdo \| big \| blockquote \| body \| br \| button \| canvas \| caption \| center \| cite \| code \| col \| colgroup \| data \| datalist \| dd \| del \| details \| dfn \| dialog \| div \| dl \| dt \| em \| embed \| fieldset \| figcaption \| figure \| footer \| form \| h1 \| h2 \| h3 \| h4 \| h5 \| h6 \| head \| header \| hgroup \| hr \| html \| i \| iframe \| img \| input \| ins \| kbd \| keygen \| label \| legend \| li \| link \| main \| map \| mark \| menu \| menuitem \| meta \| meter \| nav \| noindex \| noscript \| ol \| optgroup \| option \| output \| p \| param \| picture \| pre \| progress \| q \| rp \| rt \| ruby \| s \| samp \| search \| slot \| script \| section \| select \| small \| source \| span \| strong \| sub \| summary \| sup \| table \| template \| tbody \| td \| textarea \| tfoot \| th \| thead \| time \| title \| tr \| track \| u \| ul \| var \| video \| wbr \| webview \| animate \| animateMotion \| animateTransform \| circle \| clipPath \| defs \| desc \| ellipse \| feBlend \| feColorMatrix \| feComponentTransfer \| feComposite \| feConvolveMatrix \| feDiffuseLighting \| feDisplacementMap \| feDistantLight \| feDropShadow \| feFlood \| feFuncA \| feFuncB \| feFuncG \| feFuncR \| feGaussianBlur \| feImage \| feMerge \| feMergeNode \| feMorphology \| feOffset \| fePointLight \| feSpecularLighting \| feSpotLight \| feTile \| feTurbulence \| filter \| foreignObject \| g \| image \| line \| linearGradient \| marker \| mask \| metadata \| mpath \| path \| pattern \| polygon \| polyline \| radialGradient \| rect \| set \| stop \| switch \| text \| textPath \| tspan \| use \| view \| ComponentClass<any, any> \| FunctionComponent<any>` | No | `-` | - |
|
|
908
|
+
| `aspectRatio` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset \| auto` | No | `-` | - |
|
|
909
|
+
| `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 | `-` | - |
|
|
910
|
+
| `borderBottomLeftRadius` | `0 \| 100 \| 200 \| 300 \| 400 \| 500 \| 600 \| 700 \| 800 \| 900 \| 1000` | No | `-` | - |
|
|
911
|
+
| `borderBottomRightRadius` | `0 \| 100 \| 200 \| 300 \| 400 \| 500 \| 600 \| 700 \| 800 \| 900 \| 1000` | No | `-` | - |
|
|
912
|
+
| `borderBottomWidth` | `0 \| 100 \| 200 \| 300 \| 400 \| 500` | No | `-` | - |
|
|
913
|
+
| `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` | No | `-` | - |
|
|
914
|
+
| `borderEndWidth` | `0 \| 100 \| 200 \| 300 \| 400 \| 500` | No | `-` | - |
|
|
915
|
+
| `borderRadius` | `0 \| 100 \| 200 \| 300 \| 400 \| 500 \| 600 \| 700 \| 800 \| 900 \| 1000` | No | `-` | - |
|
|
916
|
+
| `borderStartWidth` | `0 \| 100 \| 200 \| 300 \| 400 \| 500` | No | `-` | - |
|
|
917
|
+
| `borderTopLeftRadius` | `0 \| 100 \| 200 \| 300 \| 400 \| 500 \| 600 \| 700 \| 800 \| 900 \| 1000` | No | `-` | - |
|
|
918
|
+
| `borderTopRightRadius` | `0 \| 100 \| 200 \| 300 \| 400 \| 500 \| 600 \| 700 \| 800 \| 900 \| 1000` | No | `-` | - |
|
|
919
|
+
| `borderTopWidth` | `0 \| 100 \| 200 \| 300 \| 400 \| 500` | No | `-` | - |
|
|
920
|
+
| `borderWidth` | `0 \| 100 \| 200 \| 300 \| 400 \| 500` | No | `-` | - |
|
|
921
|
+
| `bordered` | `boolean` | No | `-` | Add a border around all sides of the box. |
|
|
922
|
+
| `borderedBottom` | `boolean` | No | `-` | Add a border to the bottom side of the box. |
|
|
923
|
+
| `borderedEnd` | `boolean` | No | `-` | Add a border to the trailing side of the box. |
|
|
924
|
+
| `borderedHorizontal` | `boolean` | No | `-` | Add a border to the leading and trailing sides of the box. |
|
|
925
|
+
| `borderedStart` | `boolean` | No | `-` | Add a border to the leading side of the box. |
|
|
926
|
+
| `borderedTop` | `boolean` | No | `-` | Add a border to the top side of the box. |
|
|
927
|
+
| `borderedVertical` | `boolean` | No | `-` | Add a border to the top and bottom sides of the box. |
|
|
928
|
+
| `bottom` | `ResponsiveProp<Bottom<string \| number>>` | No | `-` | - |
|
|
929
|
+
| `classNames` | `{ root?: string; visibleContent?: string \| undefined; formattedValueSection?: string \| undefined; prefix?: string \| undefined; suffix?: string \| undefined; i18nPrefix?: string \| undefined; i18nSuffix?: string \| undefined; integer?: string \| undefined; fraction?: string \| undefined; text?: string \| undefined; } \| undefined` | No | `-` | Class name overrides applied to RollingNumber slots. |
|
|
930
|
+
| `color` | `((Color \| { base?: Color; phone?: Color \| undefined; tablet?: Color \| undefined; desktop?: Color \| undefined; }) & Color) \| undefined` | No | `-` | Base text color token. When {@link colorPulseOnUpdate } is true, the color briefly pulses to a positive or negative mid color before returning to this base color. Defaults to {@code fg}. |
|
|
931
|
+
| `colorPulseOnUpdate` | `boolean` | No | `-` | Enables color pulsing on positive or negative changes. Defaults to {@code false}. |
|
|
932
|
+
| `columnGap` | `0 \| 5 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1 \| 1.5 \| 2 \| 3 \| 4 \| 6 \| 7 \| 8 \| 9` | No | `-` | - |
|
|
933
|
+
| `dangerouslySetBackground` | `string` | No | `-` | - |
|
|
934
|
+
| `dangerouslySetColor` | `string` | No | `-` | - |
|
|
935
|
+
| `disabled` | `boolean` | No | `-` | - |
|
|
936
|
+
| `display` | `ResponsiveProp<grid \| revert \| none \| block \| inline \| inline-block \| flex \| inline-flex \| inline-grid \| contents \| flow-root \| list-item>` | No | `-` | - |
|
|
937
|
+
| `elevation` | `0 \| 1 \| 2` | No | `-` | - |
|
|
938
|
+
| `enableSubscriptNotation` | `boolean` | No | `-` | Enables subscript notation for leading zeros in the fractional part (for example, {@code 0.00009 => 0.0₄9}). |
|
|
939
|
+
| `flexBasis` | `ResponsiveProp<FlexBasis<string \| number>>` | No | `-` | - |
|
|
940
|
+
| `flexDirection` | `ResponsiveProp<column \| row \| row-reverse \| column-reverse>` | No | `-` | - |
|
|
941
|
+
| `flexGrow` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset` | No | `-` | - |
|
|
942
|
+
| `flexShrink` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset` | No | `-` | - |
|
|
943
|
+
| `flexWrap` | `ResponsiveProp<nowrap \| wrap \| wrap-reverse>` | No | `-` | - |
|
|
944
|
+
| `font` | `ResponsiveProp<FontFamily \| inherit>` | No | `-` | - |
|
|
945
|
+
| `fontFamily` | `ResponsiveProp<FontFamily \| inherit>` | No | `-` | - |
|
|
946
|
+
| `fontSize` | `ResponsiveProp<FontSize \| inherit>` | No | `-` | - |
|
|
947
|
+
| `fontWeight` | `ResponsiveProp<FontWeight \| inherit>` | No | `-` | - |
|
|
948
|
+
| `format` | `(Omit<NumberFormatOptions, notation> & { notation?: compact \| standard; }) \| undefined` | No | `-` | Intl.NumberFormat options applied when formatting the value. Scientific and engineering notation are not supported. |
|
|
949
|
+
| `formattedValue` | `string` | No | `-` | Preformatted value rendered instead of formatting {@link value }. {@link value } is still used to determine numeric deltas. |
|
|
950
|
+
| `gap` | `0 \| 5 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1 \| 1.5 \| 2 \| 3 \| 4 \| 6 \| 7 \| 8 \| 9` | No | `-` | - |
|
|
951
|
+
| `grid` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset \| none` | No | `-` | - |
|
|
952
|
+
| `gridArea` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset \| auto` | No | `-` | - |
|
|
953
|
+
| `gridAutoColumns` | `ResponsiveProp<GridAutoColumns<string \| number>>` | No | `-` | - |
|
|
954
|
+
| `gridAutoFlow` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset \| row \| column \| dense` | No | `-` | - |
|
|
955
|
+
| `gridAutoRows` | `ResponsiveProp<GridAutoRows<string \| number>>` | No | `-` | - |
|
|
956
|
+
| `gridColumn` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset \| auto` | No | `-` | - |
|
|
957
|
+
| `gridColumnEnd` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset \| auto` | No | `-` | - |
|
|
958
|
+
| `gridColumnStart` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset \| auto` | No | `-` | - |
|
|
959
|
+
| `gridRow` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset \| auto` | No | `-` | - |
|
|
960
|
+
| `gridRowEnd` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset \| auto` | No | `-` | - |
|
|
961
|
+
| `gridRowStart` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset \| auto` | No | `-` | - |
|
|
962
|
+
| `gridTemplate` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset \| none` | No | `-` | - |
|
|
963
|
+
| `gridTemplateAreas` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset \| none` | No | `-` | - |
|
|
964
|
+
| `gridTemplateColumns` | `ResponsiveProp<GridTemplateColumns<string \| number>>` | No | `-` | - |
|
|
965
|
+
| `gridTemplateRows` | `ResponsiveProp<GridTemplateRows<string \| number>>` | No | `-` | - |
|
|
966
|
+
| `height` | `ResponsiveProp<Height<string \| number>>` | No | `-` | - |
|
|
967
|
+
| `justifyContent` | `ResponsiveProp<left \| right \| center \| normal \| start \| end \| flex-start \| flex-end \| stretch \| space-between \| space-around \| space-evenly>` | No | `-` | - |
|
|
968
|
+
| `left` | `ResponsiveProp<Left<string \| number>>` | No | `-` | - |
|
|
969
|
+
| `lineHeight` | `ResponsiveProp<LineHeight \| inherit>` | No | `-` | - |
|
|
970
|
+
| `locale` | `string \| Locale \| readonly (string \| Locale)[]` | No | `-` | Locale used for formatting. Defaults to the locale from {@link LocaleProvider }. |
|
|
971
|
+
| `margin` | `ResponsiveProp<0 \| -5 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1 \| -1.5 \| -2 \| -3 \| -4 \| -6 \| -7 \| -8 \| -9>` | No | `-` | - |
|
|
972
|
+
| `marginBottom` | `ResponsiveProp<0 \| -5 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1 \| -1.5 \| -2 \| -3 \| -4 \| -6 \| -7 \| -8 \| -9>` | No | `-` | - |
|
|
973
|
+
| `marginEnd` | `ResponsiveProp<0 \| -5 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1 \| -1.5 \| -2 \| -3 \| -4 \| -6 \| -7 \| -8 \| -9>` | No | `-` | - |
|
|
974
|
+
| `marginStart` | `ResponsiveProp<0 \| -5 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1 \| -1.5 \| -2 \| -3 \| -4 \| -6 \| -7 \| -8 \| -9>` | No | `-` | - |
|
|
975
|
+
| `marginTop` | `ResponsiveProp<0 \| -5 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1 \| -1.5 \| -2 \| -3 \| -4 \| -6 \| -7 \| -8 \| -9>` | No | `-` | - |
|
|
976
|
+
| `marginX` | `ResponsiveProp<0 \| -5 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1 \| -1.5 \| -2 \| -3 \| -4 \| -6 \| -7 \| -8 \| -9>` | No | `-` | - |
|
|
977
|
+
| `marginY` | `ResponsiveProp<0 \| -5 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1 \| -1.5 \| -2 \| -3 \| -4 \| -6 \| -7 \| -8 \| -9>` | No | `-` | - |
|
|
978
|
+
| `maxHeight` | `ResponsiveProp<MaxHeight<string \| number>>` | No | `-` | - |
|
|
979
|
+
| `maxWidth` | `ResponsiveProp<MaxWidth<string \| number>>` | No | `-` | - |
|
|
980
|
+
| `minHeight` | `ResponsiveProp<MinHeight<string \| number>>` | No | `-` | - |
|
|
981
|
+
| `minWidth` | `ResponsiveProp<MinWidth<string \| number>>` | No | `-` | - |
|
|
982
|
+
| `mono` | `boolean` | No | `-` | Use monospace font family. |
|
|
983
|
+
| `negativePulseColor` | `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 | `-` | Color token used for negative numeric changes. Defaults to {@code fgNegative}. |
|
|
984
|
+
| `noWrap` | `boolean` | No | `false` | Set text to be in a single line. |
|
|
985
|
+
| `numberOfLines` | `number` | No | `-` | - |
|
|
986
|
+
| `opacity` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset` | No | `-` | - |
|
|
987
|
+
| `overflow` | `clip \| wrap \| truncate \| break` | No | `-` | Set overflow behavior. |
|
|
988
|
+
| `padding` | `0 \| 5 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1 \| 1.5 \| 2 \| 3 \| 4 \| 6 \| 7 \| 8 \| 9` | No | `-` | - |
|
|
989
|
+
| `paddingBottom` | `0 \| 5 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1 \| 1.5 \| 2 \| 3 \| 4 \| 6 \| 7 \| 8 \| 9` | No | `-` | - |
|
|
990
|
+
| `paddingEnd` | `0 \| 5 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1 \| 1.5 \| 2 \| 3 \| 4 \| 6 \| 7 \| 8 \| 9` | No | `-` | - |
|
|
991
|
+
| `paddingStart` | `0 \| 5 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1 \| 1.5 \| 2 \| 3 \| 4 \| 6 \| 7 \| 8 \| 9` | No | `-` | - |
|
|
992
|
+
| `paddingTop` | `0 \| 5 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1 \| 1.5 \| 2 \| 3 \| 4 \| 6 \| 7 \| 8 \| 9` | No | `-` | - |
|
|
993
|
+
| `paddingX` | `0 \| 5 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1 \| 1.5 \| 2 \| 3 \| 4 \| 6 \| 7 \| 8 \| 9` | No | `-` | - |
|
|
994
|
+
| `paddingY` | `0 \| 5 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1 \| 1.5 \| 2 \| 3 \| 4 \| 6 \| 7 \| 8 \| 9` | No | `-` | - |
|
|
995
|
+
| `pin` | `top \| bottom \| left \| right \| all` | No | `-` | Direction in which to absolutely pin the box. |
|
|
996
|
+
| `position` | `ResponsiveProp<fixed \| static \| relative \| absolute \| sticky>` | No | `-` | - |
|
|
997
|
+
| `positivePulseColor` | `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 | `-` | Color token used for positive numeric changes. Defaults to {@code fgPositive}. |
|
|
998
|
+
| `prefix` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | Content rendered before the formatted value. |
|
|
999
|
+
| `ref` | `any` | No | `-` | - |
|
|
1000
|
+
| `renderEmptyNode` | `boolean` | No | `-` | - |
|
|
1001
|
+
| `right` | `ResponsiveProp<Right<string \| number>>` | No | `-` | - |
|
|
1002
|
+
| `rowGap` | `0 \| 5 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1 \| 1.5 \| 2 \| 3 \| 4 \| 6 \| 7 \| 8 \| 9` | No | `-` | - |
|
|
1003
|
+
| `slashedZero` | `boolean` | No | `false` | Use character for number zero with a slash through it to differentiate it from the letter O. |
|
|
1004
|
+
| `style` | `CSSProperties` | No | `-` | - |
|
|
1005
|
+
| `styles` | `{ root?: CSSProperties; visibleContent?: CSSProperties \| undefined; formattedValueSection?: CSSProperties \| undefined; prefix?: CSSProperties \| undefined; suffix?: CSSProperties \| undefined; i18nPrefix?: CSSProperties \| undefined; i18nSuffix?: CSSProperties \| undefined; integer?: CSSProperties \| undefined; fraction?: CSSProperties \| undefined; text?: CSSProperties \| undefined; } \| undefined` | No | `-` | Inline style overrides applied to RollingNumber slots. |
|
|
1006
|
+
| `suffix` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | Content rendered after the formatted value. |
|
|
1007
|
+
| `tabularNumbers` | `boolean` | No | `false` | Activates the set of figures where numbers are all of the same size, allowing them to be easily aligned. Enables tabular figures on the underlying {@link Text}. Defaults to {@code true}. |
|
|
1008
|
+
| `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 |
|
|
1009
|
+
| `textAlign` | `ResponsiveProp<center \| start \| end \| justify>` | No | `-` | - |
|
|
1010
|
+
| `textDecoration` | `ResponsiveProp<none \| underline \| overline \| line-through \| underline overline \| underline double>` | No | `-` | - |
|
|
1011
|
+
| `textTransform` | `ResponsiveProp<capitalize \| lowercase \| none \| uppercase>` | No | `-` | - |
|
|
1012
|
+
| `top` | `ResponsiveProp<Top<string \| number>>` | No | `-` | - |
|
|
1013
|
+
| `transform` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset \| none` | No | `-` | - |
|
|
1014
|
+
| `transition` | `RollingNumberTransitionConfig` | No | `-` | Framer Motion transition overrides. Supports per-property overrides for {@code y} and {@code color} only. |
|
|
1015
|
+
| `underline` | `boolean` | No | `false` | Set text decoration to underline. |
|
|
1016
|
+
| `userSelect` | `ResponsiveProp<text \| none \| auto \| all>` | No | `-` | - |
|
|
1017
|
+
| `visibility` | `ResponsiveProp<hidden \| visible>` | No | `-` | - |
|
|
1018
|
+
| `width` | `ResponsiveProp<Width<string \| number>>` | No | `-` | - |
|
|
1019
|
+
| `zIndex` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset \| auto` | No | `-` | - |
|
|
1020
|
+
|
|
1022
1021
|
|
|
@@ -4,32 +4,10 @@ An interactive scrubber component for exploring individual data points in charts
|
|
|
4
4
|
|
|
5
5
|
## Import
|
|
6
6
|
|
|
7
|
-
```
|
|
7
|
+
```tsx
|
|
8
8
|
import { Scrubber } from '@coinbase/cds-web-visualization'
|
|
9
9
|
```
|
|
10
10
|
|
|
11
|
-
## Props
|
|
12
|
-
|
|
13
|
-
| Prop | Type | Required | Default | Description |
|
|
14
|
-
| --- | --- | --- | --- | --- |
|
|
15
|
-
| `BeaconComponent` | `ComponentClass<ScrubberBeaconProps, any> \| FunctionComponent<ScrubberBeaconProps>` | No | `-` | Custom component for the scrubber beacon. |
|
|
16
|
-
| `BeaconLabelComponent` | `ComponentClass<ChartTextProps, any> \| FunctionComponent<ChartTextProps>` | No | `-` | Custom component for the scrubber beacon label. |
|
|
17
|
-
| `LineComponent` | `FunctionComponent<ReferenceLineProps> \| ComponentClass<ReferenceLineProps, any>` | No | `-` | Custom component for the scrubber line. |
|
|
18
|
-
| `classNames` | `{ overlay?: string; beacon?: string \| undefined; line?: string \| undefined; beaconLabel?: string \| undefined; } \| undefined` | No | `-` | Custom class names for scrubber elements. |
|
|
19
|
-
| `hideLine` | `boolean` | No | `-` | Hides the scrubber line |
|
|
20
|
-
| `hideOverlay` | `boolean` | No | `-` | Whether to hide the overlay rect which obscures future data. |
|
|
21
|
-
| `idlePulse` | `boolean` | No | `-` | Pulse the scrubber beacon while it is at rest. |
|
|
22
|
-
| `key` | `Key \| null` | No | `-` | - |
|
|
23
|
-
| `label` | `ChartTextChildren \| ((dataIndex: number) => ChartTextChildren)` | No | `-` | Label text displayed above the scrubber line. |
|
|
24
|
-
| `labelProps` | `ReferenceLineLabelProps` | No | `-` | Props passed to the scrubber lines label. |
|
|
25
|
-
| `lineStroke` | `string` | No | `-` | Stroke color for the scrubber line. |
|
|
26
|
-
| `overlayOffset` | `number` | No | `2` | Offset of the overlay rect relative to the drawing area. Useful for when scrubbing over lines, where the stroke width would cause part of the line to be visible. |
|
|
27
|
-
| `ref` | `((instance: ScrubberBeaconRef \| null) => void) \| RefObject<ScrubberBeaconRef> \| null` | No | `-` | - |
|
|
28
|
-
| `seriesIds` | `string[]` | No | `-` | An array of series IDs that will receive visual emphasis as the user scrubs through the chart. Use this prop to restrict the scrubbing visual behavior to specific series. By default, all series will be highlighted by the Scrubber. |
|
|
29
|
-
| `styles` | `{ overlay?: CSSProperties; beacon?: CSSProperties \| undefined; line?: CSSProperties \| undefined; beaconLabel?: CSSProperties \| undefined; } \| undefined` | No | `-` | Custom styles for scrubber elements. |
|
|
30
|
-
| `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 |
|
|
31
|
-
|
|
32
|
-
|
|
33
11
|
## Examples
|
|
34
12
|
|
|
35
13
|
### Basic Example
|
|
@@ -229,4 +207,25 @@ By default, the scrubber will show an overlay to de-emphasize future data. You c
|
|
|
229
207
|
</LineChart>
|
|
230
208
|
```
|
|
231
209
|
|
|
210
|
+
## Props
|
|
211
|
+
|
|
212
|
+
| Prop | Type | Required | Default | Description |
|
|
213
|
+
| --- | --- | --- | --- | --- |
|
|
214
|
+
| `BeaconComponent` | `ComponentClass<ScrubberBeaconProps, any> \| FunctionComponent<ScrubberBeaconProps>` | No | `-` | Custom component for the scrubber beacon. |
|
|
215
|
+
| `BeaconLabelComponent` | `ComponentClass<ChartTextProps, any> \| FunctionComponent<ChartTextProps>` | No | `-` | Custom component for the scrubber beacon label. |
|
|
216
|
+
| `LineComponent` | `FunctionComponent<ReferenceLineProps> \| ComponentClass<ReferenceLineProps, any>` | No | `-` | Custom component for the scrubber line. |
|
|
217
|
+
| `classNames` | `{ overlay?: string; beacon?: string \| undefined; line?: string \| undefined; beaconLabel?: string \| undefined; } \| undefined` | No | `-` | Custom class names for scrubber elements. |
|
|
218
|
+
| `hideLine` | `boolean` | No | `-` | Hides the scrubber line |
|
|
219
|
+
| `hideOverlay` | `boolean` | No | `-` | Whether to hide the overlay rect which obscures future data. |
|
|
220
|
+
| `idlePulse` | `boolean` | No | `-` | Pulse the scrubber beacon while it is at rest. |
|
|
221
|
+
| `key` | `Key \| null` | No | `-` | - |
|
|
222
|
+
| `label` | `ChartTextChildren \| ((dataIndex: number) => ChartTextChildren)` | No | `-` | Label text displayed above the scrubber line. |
|
|
223
|
+
| `labelProps` | `ReferenceLineLabelProps` | No | `-` | Props passed to the scrubber lines label. |
|
|
224
|
+
| `lineStroke` | `string` | No | `-` | Stroke color for the scrubber line. |
|
|
225
|
+
| `overlayOffset` | `number` | No | `2` | Offset of the overlay rect relative to the drawing area. Useful for when scrubbing over lines, where the stroke width would cause part of the line to be visible. |
|
|
226
|
+
| `ref` | `((instance: ScrubberBeaconRef \| null) => void) \| RefObject<ScrubberBeaconRef> \| null` | No | `-` | - |
|
|
227
|
+
| `seriesIds` | `string[]` | No | `-` | An array of series IDs that will receive visual emphasis as the user scrubs through the chart. Use this prop to restrict the scrubbing visual behavior to specific series. By default, all series will be highlighted by the Scrubber. |
|
|
228
|
+
| `styles` | `{ overlay?: CSSProperties; beacon?: CSSProperties \| undefined; line?: CSSProperties \| undefined; beaconLabel?: CSSProperties \| undefined; } \| undefined` | No | `-` | Custom styles for scrubber elements. |
|
|
229
|
+
| `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 |
|
|
230
|
+
|
|
232
231
|
|
|
@@ -4,39 +4,10 @@ A control for searching a dataset.
|
|
|
4
4
|
|
|
5
5
|
## Import
|
|
6
6
|
|
|
7
|
-
```
|
|
7
|
+
```tsx
|
|
8
8
|
import { SearchInput } from '@coinbase/cds-web/controls/SearchInput'
|
|
9
9
|
```
|
|
10
10
|
|
|
11
|
-
## Props
|
|
12
|
-
|
|
13
|
-
| Prop | Type | Required | Default | Description |
|
|
14
|
-
| --- | --- | --- | --- | --- |
|
|
15
|
-
| `onChangeText` | `(text: string) => void` | Yes | `-` | - |
|
|
16
|
-
| `bordered` | `boolean` | No | `true` | Adds border to input |
|
|
17
|
-
| `clearIconAccessibilityLabel` | `string` | No | `-` | Set the a11y label for the clear icon |
|
|
18
|
-
| `compact` | `boolean` | No | `false` | Enables compact variation |
|
|
19
|
-
| `disabled` | `boolean` | No | `false` | Toggles input interactability and opacity |
|
|
20
|
-
| `enableColorSurge` | `boolean` | No | `-` | Enable Color Surge motion |
|
|
21
|
-
| `end` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `undefined` | Set the end node |
|
|
22
|
-
| `helperTextErrorIconAccessibilityLabel` | `string` | No | `'error'` | Accessibility label for helper text error icon when variant=negative |
|
|
23
|
-
| `hideEndIcon` | `boolean` | No | `undefined` | hide the end icon |
|
|
24
|
-
| `hideStartIcon` | `boolean` | No | `false` | hide the start icon |
|
|
25
|
-
| `key` | `Key \| null` | No | `-` | - |
|
|
26
|
-
| `onChange` | `ChangeEventHandler<HTMLInputElement>` | No | `-` | - |
|
|
27
|
-
| `onClear` | `MouseEventHandler<Element>` | No | `-` | - |
|
|
28
|
-
| `onSearch` | `((str: string) => void)` | No | `-` | Callback is fired when a user hits enter on the keyboard. Can obtain the query through str parameter |
|
|
29
|
-
| `placeholder` | `string` | No | `-` | Placeholder text displayed inside of the input. Will be replaced if there is a value. |
|
|
30
|
-
| `ref` | `((instance: HTMLInputElement \| null) => void) \| RefObject<HTMLInputElement> \| null` | No | `-` | - |
|
|
31
|
-
| `startIcon` | `search \| backArrow` | No | `search` | Set the start icon. You can only set it to search \| backArrow icon. If you set this, the icon would not toggle between search and backArrow depending on the focus state |
|
|
32
|
-
| `startIconAccessibilityLabel` | `string` | No | `-` | Set the a11y label for the start icon |
|
|
33
|
-
| `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 |
|
|
34
|
-
| `testIDMap` | `{ start?: string; end?: string \| undefined; label?: string \| undefined; helperText?: string \| undefined; } \| undefined` | No | `-` | Add ability to test individual parts of the input |
|
|
35
|
-
| `type` | `number \| color \| button \| search \| time \| image \| text \| hidden \| string & {} \| email \| checkbox \| radio \| tel \| url \| date \| submit \| reset \| datetime-local \| file \| month \| password \| range \| week` | No | `-` | - |
|
|
36
|
-
| `value` | `string \| (readonly string[] & string)` | No | `-` | The **value** property of the HTMLInputElement interface represents the current value of the input element as a string. [MDN Reference](https://developer.mozilla.org/docs/Web/API/HTMLInputElement/value) |
|
|
37
|
-
| `width` | `((Width<string \| number> \| { base?: Width<string \| number>; phone?: Width<string \| number> \| undefined; tablet?: Width<string \| number> \| undefined; desktop?: Width<string \| number> \| undefined; }) & (string \| number)) \| undefined` | No | `100%` | Width of input as a percentage string. |
|
|
38
|
-
|
|
39
|
-
|
|
40
11
|
## Examples
|
|
41
12
|
|
|
42
13
|
### Basic usage
|
|
@@ -115,4 +86,32 @@ function CustomEndSearchInput() {
|
|
|
115
86
|
}
|
|
116
87
|
```
|
|
117
88
|
|
|
89
|
+
## Props
|
|
90
|
+
|
|
91
|
+
| Prop | Type | Required | Default | Description |
|
|
92
|
+
| --- | --- | --- | --- | --- |
|
|
93
|
+
| `onChangeText` | `(text: string) => void` | Yes | `-` | - |
|
|
94
|
+
| `bordered` | `boolean` | No | `true` | Adds border to input |
|
|
95
|
+
| `clearIconAccessibilityLabel` | `string` | No | `-` | Set the a11y label for the clear icon |
|
|
96
|
+
| `compact` | `boolean` | No | `false` | Enables compact variation |
|
|
97
|
+
| `disabled` | `boolean` | No | `false` | Toggles input interactability and opacity |
|
|
98
|
+
| `enableColorSurge` | `boolean` | No | `-` | Enable Color Surge motion |
|
|
99
|
+
| `end` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `undefined` | Set the end node |
|
|
100
|
+
| `helperTextErrorIconAccessibilityLabel` | `string` | No | `'error'` | Accessibility label for helper text error icon when variant=negative |
|
|
101
|
+
| `hideEndIcon` | `boolean` | No | `undefined` | hide the end icon |
|
|
102
|
+
| `hideStartIcon` | `boolean` | No | `false` | hide the start icon |
|
|
103
|
+
| `key` | `Key \| null` | No | `-` | - |
|
|
104
|
+
| `onChange` | `ChangeEventHandler<HTMLInputElement>` | No | `-` | - |
|
|
105
|
+
| `onClear` | `MouseEventHandler<Element>` | No | `-` | - |
|
|
106
|
+
| `onSearch` | `((str: string) => void)` | No | `-` | Callback is fired when a user hits enter on the keyboard. Can obtain the query through str parameter |
|
|
107
|
+
| `placeholder` | `string` | No | `-` | Placeholder text displayed inside of the input. Will be replaced if there is a value. |
|
|
108
|
+
| `ref` | `((instance: HTMLInputElement \| null) => void) \| RefObject<HTMLInputElement> \| null` | No | `-` | - |
|
|
109
|
+
| `startIcon` | `search \| backArrow` | No | `search` | Set the start icon. You can only set it to search \| backArrow icon. If you set this, the icon would not toggle between search and backArrow depending on the focus state |
|
|
110
|
+
| `startIconAccessibilityLabel` | `string` | No | `-` | Set the a11y label for the start icon |
|
|
111
|
+
| `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 |
|
|
112
|
+
| `testIDMap` | `{ start?: string; end?: string \| undefined; label?: string \| undefined; helperText?: string \| undefined; } \| undefined` | No | `-` | Add ability to test individual parts of the input |
|
|
113
|
+
| `type` | `number \| color \| button \| search \| time \| image \| text \| hidden \| string & {} \| email \| checkbox \| radio \| tel \| url \| date \| submit \| reset \| datetime-local \| file \| month \| password \| range \| week` | No | `-` | - |
|
|
114
|
+
| `value` | `string \| (readonly string[] & string)` | No | `-` | The **value** property of the HTMLInputElement interface represents the current value of the input element as a string. [MDN Reference](https://developer.mozilla.org/docs/Web/API/HTMLInputElement/value) |
|
|
115
|
+
| `width` | `((Width<string \| number> \| { base?: Width<string \| number>; phone?: Width<string \| number> \| undefined; tablet?: Width<string \| number> \| undefined; desktop?: Width<string \| number> \| undefined; }) & (string \| number)) \| undefined` | No | `100%` | Width of input as a percentage string. |
|
|
116
|
+
|
|
118
117
|
|