@coinbase/cds-mcp-server 9.0.0-rc.1 → 9.0.0-rc.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +4 -0
- package/mcp-docs/mobile/components/Alert.txt +1 -1
- package/mcp-docs/mobile/components/AreaChart.txt +13 -13
- package/mcp-docs/mobile/components/Avatar.txt +13 -13
- package/mcp-docs/mobile/components/AvatarButton.txt +14 -14
- package/mcp-docs/mobile/components/Banner.txt +14 -14
- package/mcp-docs/mobile/components/BarChart.txt +13 -13
- package/mcp-docs/mobile/components/Box.txt +13 -13
- package/mcp-docs/mobile/components/BrowserBar.txt +13 -13
- package/mcp-docs/mobile/components/Button.txt +16 -16
- package/mcp-docs/mobile/components/Calendar.txt +13 -13
- package/mcp-docs/mobile/components/Carousel.txt +13 -13
- package/mcp-docs/mobile/components/CartesianChart.txt +13 -13
- package/mcp-docs/mobile/components/CellMedia.txt +2 -2
- package/mcp-docs/mobile/components/CheckboxCell.txt +14 -14
- package/mcp-docs/mobile/components/Chip.txt +14 -14
- package/mcp-docs/mobile/components/Coachmark.txt +13 -13
- package/mcp-docs/mobile/components/ContainedAssetCard.txt +2 -2
- package/mcp-docs/mobile/components/ContentCard.txt +13 -13
- package/mcp-docs/mobile/components/ContentCardBody.txt +13 -13
- package/mcp-docs/mobile/components/ContentCardFooter.txt +13 -13
- package/mcp-docs/mobile/components/ContentCardHeader.txt +13 -13
- package/mcp-docs/mobile/components/ContentCell.txt +14 -14
- package/mcp-docs/mobile/components/ControlGroup.txt +13 -13
- package/mcp-docs/mobile/components/DataCard.txt +14 -14
- package/mcp-docs/mobile/components/DateInput.txt +6 -6
- package/mcp-docs/mobile/components/DatePicker.txt +6 -6
- package/mcp-docs/mobile/components/Divider.txt +13 -13
- package/mcp-docs/mobile/components/DotSymbol.txt +1 -1
- package/mcp-docs/mobile/components/Fallback.txt +12 -12
- package/mcp-docs/mobile/components/HStack.txt +13 -13
- package/mcp-docs/mobile/components/HeroSquare.txt +1 -1
- package/mcp-docs/mobile/components/Icon.txt +1 -1
- package/mcp-docs/mobile/components/IconButton.txt +15 -15
- package/mcp-docs/mobile/components/InputChip.txt +14 -14
- package/mcp-docs/mobile/components/Interactable.txt +13 -13
- package/mcp-docs/mobile/components/Legend.txt +13 -13
- package/mcp-docs/mobile/components/LineChart.txt +13 -13
- package/mcp-docs/mobile/components/Link.txt +15 -15
- package/mcp-docs/mobile/components/ListCell.txt +14 -14
- package/mcp-docs/mobile/components/Lottie.txt +13 -13
- package/mcp-docs/mobile/components/LottieStatusAnimation.txt +2 -2
- package/mcp-docs/mobile/components/MediaCard.txt +14 -14
- package/mcp-docs/mobile/components/MediaChip.txt +14 -14
- package/mcp-docs/mobile/components/MessagingCard.txt +14 -14
- package/mcp-docs/mobile/components/ModalFooter.txt +13 -13
- package/mcp-docs/mobile/components/ModalHeader.txt +13 -13
- package/mcp-docs/mobile/components/MultiContentModule.txt +13 -13
- package/mcp-docs/mobile/components/NavigationTitle.txt +15 -15
- package/mcp-docs/mobile/components/NavigationTitleSelect.txt +15 -15
- package/mcp-docs/mobile/components/NudgeCard.txt +3 -3
- package/mcp-docs/mobile/components/Numpad.txt +14 -14
- package/mcp-docs/mobile/components/Overlay.txt +13 -13
- package/mcp-docs/mobile/components/PageFooter.txt +13 -13
- package/mcp-docs/mobile/components/PageHeader.txt +13 -13
- package/mcp-docs/mobile/components/PercentageBarChart.txt +13 -13
- package/mcp-docs/mobile/components/PeriodSelector.txt +13 -13
- package/mcp-docs/mobile/components/Pictogram.txt +1 -1
- package/mcp-docs/mobile/components/Pressable.txt +14 -14
- package/mcp-docs/mobile/components/RadioCell.txt +14 -14
- package/mcp-docs/mobile/components/RemoteImage.txt +1 -1
- package/mcp-docs/mobile/components/RollingNumber.txt +15 -15
- package/mcp-docs/mobile/components/SearchInput.txt +6 -6
- package/mcp-docs/mobile/components/SegmentedTabs.txt +13 -13
- package/mcp-docs/mobile/components/SelectChip.txt +14 -14
- package/mcp-docs/mobile/components/SelectChipAlpha.txt +1 -1
- package/mcp-docs/mobile/components/SelectOption.txt +1 -1
- package/mcp-docs/mobile/components/SlideButton.txt +13 -13
- package/mcp-docs/mobile/components/SpotIcon.txt +1 -1
- package/mcp-docs/mobile/components/Stepper.txt +13 -13
- package/mcp-docs/mobile/components/TabLabel.txt +15 -15
- package/mcp-docs/mobile/components/TabNavigation.txt +13 -13
- package/mcp-docs/mobile/components/TabbedChips.txt +13 -13
- package/mcp-docs/mobile/components/TabbedChipsAlpha.txt +13 -13
- package/mcp-docs/mobile/components/Tabs.txt +13 -13
- package/mcp-docs/mobile/components/Tag.txt +17 -17
- package/mcp-docs/mobile/components/Text.txt +15 -15
- package/mcp-docs/mobile/components/TextInput.txt +6 -6
- package/mcp-docs/mobile/components/Toast.txt +13 -13
- package/mcp-docs/mobile/components/VStack.txt +13 -13
- package/mcp-docs/web/components/Alert.txt +1 -1
- package/mcp-docs/web/components/Banner.txt +1 -1
- package/mcp-docs/web/components/Button.txt +2 -2
- package/mcp-docs/web/components/CellMedia.txt +1 -1
- package/mcp-docs/web/components/DotSymbol.txt +1 -1
- package/mcp-docs/web/components/FullscreenAlert.txt +1 -1
- package/mcp-docs/web/components/HeroSquare.txt +1 -1
- package/mcp-docs/web/components/Icon.txt +1 -1
- package/mcp-docs/web/components/IconButton.txt +1 -1
- package/mcp-docs/web/components/NudgeCard.txt +1 -1
- package/mcp-docs/web/components/Pictogram.txt +1 -1
- package/mcp-docs/web/components/SpotIcon.txt +1 -1
- package/mcp-docs/web/components/TableCellFallback.txt +2 -2
- package/mcp-docs/web/components/Tag.txt +2 -2
- package/mcp-docs/web/components/TileButton.txt +1 -1
- package/package.json +1 -1
|
@@ -124,15 +124,15 @@ function Example() {
|
|
|
124
124
|
| `borderedStart` | `boolean` | No | `-` | Add a border to the leading side of the box. |
|
|
125
125
|
| `borderedTop` | `boolean` | No | `-` | Add a border to the top side of the box. |
|
|
126
126
|
| `borderedVertical` | `boolean` | No | `-` | Add a border to the top and bottom sides of the box. |
|
|
127
|
-
| `bottom` | `null \| number \|
|
|
127
|
+
| `bottom` | `null \| number \| AnimatedNode \| auto \| ${number}%` | No | `-` | - |
|
|
128
128
|
| `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 | `-` | - |
|
|
129
129
|
| `columnGap` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
|
|
130
130
|
| `dangerouslySetBackground` | `string` | No | `-` | - |
|
|
131
131
|
| `display` | `flex \| none \| contents` | No | `-` | - |
|
|
132
132
|
| `elevation` | `0 \| 1 \| 2` | No | `-` | Determines box shadow styles. Parent should have overflow set to visible to ensure styles are not clipped. |
|
|
133
133
|
| `end` | `null \| string \| number \| bigint \| false \| true \| ReactElement<unknown, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal \| Promise<AwaitedReactNode>` | No | `-` | - |
|
|
134
|
-
| `flexBasis` | `null \| number \|
|
|
135
|
-
| `flexDirection` | `
|
|
134
|
+
| `flexBasis` | `null \| number \| AnimatedNode \| auto \| ${number}%` | No | `-` | - |
|
|
135
|
+
| `flexDirection` | `row \| column \| row-reverse \| column-reverse` | No | `-` | - |
|
|
136
136
|
| `flexGrow` | `number` | No | `-` | - |
|
|
137
137
|
| `flexShrink` | `number` | No | `-` | - |
|
|
138
138
|
| `flexWrap` | `wrap \| nowrap \| wrap-reverse` | No | `-` | - |
|
|
@@ -141,10 +141,10 @@ function Example() {
|
|
|
141
141
|
| `fontSize` | `inherit \| FontSize` | No | `-` | - |
|
|
142
142
|
| `fontWeight` | `inherit \| FontWeight` | No | `-` | - |
|
|
143
143
|
| `gap` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
|
|
144
|
-
| `height` | `null \| number \|
|
|
144
|
+
| `height` | `null \| number \| AnimatedNode \| auto \| ${number}%` | No | `-` | - |
|
|
145
145
|
| `justifyContent` | `flex-start \| flex-end \| center \| space-between \| space-around \| space-evenly` | No | `-` | - |
|
|
146
146
|
| `key` | `Key \| null` | No | `-` | - |
|
|
147
|
-
| `left` | `null \| number \|
|
|
147
|
+
| `left` | `null \| number \| AnimatedNode \| auto \| ${number}%` | No | `-` | - |
|
|
148
148
|
| `lineHeight` | `inherit \| LineHeight` | No | `-` | - |
|
|
149
149
|
| `margin` | `0 \| -1 \| -2 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1.5` | No | `-` | - |
|
|
150
150
|
| `marginBottom` | `0 \| -1 \| -2 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1.5` | No | `-` | - |
|
|
@@ -153,11 +153,11 @@ function Example() {
|
|
|
153
153
|
| `marginTop` | `0 \| -1 \| -2 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1.5` | No | `-` | - |
|
|
154
154
|
| `marginX` | `0 \| -1 \| -2 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1.5` | No | `-` | - |
|
|
155
155
|
| `marginY` | `0 \| -1 \| -2 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1.5` | No | `-` | - |
|
|
156
|
-
| `maxHeight` | `null \| number \|
|
|
157
|
-
| `maxWidth` | `null \| number \|
|
|
156
|
+
| `maxHeight` | `null \| number \| AnimatedNode \| auto \| ${number}%` | No | `-` | - |
|
|
157
|
+
| `maxWidth` | `null \| number \| AnimatedNode \| auto \| ${number}%` | No | `-` | - |
|
|
158
158
|
| `meta` | `null \| string \| number \| bigint \| false \| true \| ReactElement<unknown, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal \| Promise<AwaitedReactNode>` | No | `-` | - |
|
|
159
|
-
| `minHeight` | `null \| number \|
|
|
160
|
-
| `minWidth` | `null \| number \|
|
|
159
|
+
| `minHeight` | `null \| number \| AnimatedNode \| auto \| ${number}%` | No | `-` | - |
|
|
160
|
+
| `minWidth` | `null \| number \| AnimatedNode \| auto \| ${number}%` | No | `-` | - |
|
|
161
161
|
| `onPointerCancel` | `((event: PointerEvent) => void)` | No | `-` | - |
|
|
162
162
|
| `onPointerCancelCapture` | `((event: PointerEvent) => void)` | No | `-` | - |
|
|
163
163
|
| `onPointerDown` | `((event: PointerEvent) => void)` | No | `-` | - |
|
|
@@ -182,7 +182,7 @@ function Example() {
|
|
|
182
182
|
| `pin` | `top \| bottom \| left \| right \| all` | No | `-` | Direction in which to absolutely pin the box. |
|
|
183
183
|
| `position` | `absolute \| relative \| static` | No | `-` | - |
|
|
184
184
|
| `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). |
|
|
185
|
-
| `right` | `null \| number \|
|
|
185
|
+
| `right` | `null \| number \| AnimatedNode \| auto \| ${number}%` | No | `-` | - |
|
|
186
186
|
| `rowGap` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
|
|
187
187
|
| `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 | `-` | - |
|
|
188
188
|
| `styles` | `{ root?: StyleProp<ViewStyle>; textContainer?: StyleProp<ViewStyle>; contentContainer?: StyleProp<ViewStyle>; }` | No | `-` | - |
|
|
@@ -193,10 +193,10 @@ function Example() {
|
|
|
193
193
|
| `textDecorationStyle` | `solid \| dotted \| dashed \| double` | No | `-` | - |
|
|
194
194
|
| `textTransform` | `none \| capitalize \| uppercase \| lowercase` | No | `-` | - |
|
|
195
195
|
| `thumbnail` | `null \| string \| number \| bigint \| false \| true \| ReactElement<unknown, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal \| Promise<AwaitedReactNode>` | No | `-` | A media object like an image, avatar, illustration, or cryptocurrency asset. |
|
|
196
|
-
| `top` | `null \| number \|
|
|
196
|
+
| `top` | `null \| number \| AnimatedNode \| auto \| ${number}%` | No | `-` | - |
|
|
197
197
|
| `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 | `-` | - |
|
|
198
|
-
| `userSelect` | `
|
|
199
|
-
| `width` | `null \| number \|
|
|
198
|
+
| `userSelect` | `none \| auto \| text \| contain \| all` | No | `-` | - |
|
|
199
|
+
| `width` | `null \| number \| AnimatedNode \| auto \| ${number}%` | No | `-` | - |
|
|
200
200
|
| `zIndex` | `number` | No | `-` | - |
|
|
201
201
|
|
|
202
202
|
|
|
@@ -194,7 +194,7 @@ The `ContentCellFallback` component provides loading state representations of `C
|
|
|
194
194
|
| `borderedStart` | `boolean` | No | `-` | Add a border to the leading side of the box. |
|
|
195
195
|
| `borderedTop` | `boolean` | No | `-` | Add a border to the top side of the box. |
|
|
196
196
|
| `borderedVertical` | `boolean` | No | `-` | Add a border to the top and bottom sides of the box. |
|
|
197
|
-
| `bottom` | `null \| number \|
|
|
197
|
+
| `bottom` | `null \| number \| AnimatedNode \| auto \| ${number}%` | No | `-` | - |
|
|
198
198
|
| `bottomContent` | `null \| string \| number \| bigint \| false \| true \| ReactElement<unknown, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal \| Promise<AwaitedReactNode>` | No | `-` | The content to display below the main cell content. |
|
|
199
199
|
| `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 | `-` | - |
|
|
200
200
|
| `columnGap` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
|
|
@@ -203,13 +203,13 @@ The `ContentCellFallback` component provides loading state representations of `C
|
|
|
203
203
|
| `description` | `null \| string \| number \| bigint \| false \| true \| ReactElement<unknown, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal \| Promise<AwaitedReactNode>` | No | `-` | Description of content. Content will wrap accordingly. |
|
|
204
204
|
| `descriptionNode` | `null \| string \| number \| bigint \| false \| true \| ReactElement<unknown, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal \| Promise<AwaitedReactNode>` | No | `-` | React node to render description. Takes precedence over description. When provided, styles.description is not applied. |
|
|
205
205
|
| `detail` | `null \| string \| number \| bigint \| false \| true \| ReactElement<unknown, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal \| Promise<AwaitedReactNode>` | No | `-` | - |
|
|
206
|
-
| `detailWidth` | `null \| number \|
|
|
206
|
+
| `detailWidth` | `null \| number \| AnimatedNode \| auto \| ${number}%` | No | `-` | - |
|
|
207
207
|
| `disabled` | `boolean` | No | `-` | Is the cell disabled? Will apply opacity and disable interaction. |
|
|
208
208
|
| `display` | `flex \| none \| contents` | No | `-` | - |
|
|
209
209
|
| `elevation` | `0 \| 1 \| 2` | No | `-` | Determines box shadow styles. Parent should have overflow set to visible to ensure styles are not clipped. |
|
|
210
210
|
| `end` | `null \| string \| number \| bigint \| false \| true \| ReactElement<unknown, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal \| Promise<AwaitedReactNode>` | No | `-` | End-aligned content (e.g., value, status). Replaces the deprecated detail prop. |
|
|
211
|
-
| `flexBasis` | `null \| number \|
|
|
212
|
-
| `flexDirection` | `
|
|
211
|
+
| `flexBasis` | `null \| number \| AnimatedNode \| auto \| ${number}%` | No | `-` | - |
|
|
212
|
+
| `flexDirection` | `row \| column \| row-reverse \| column-reverse` | No | `-` | - |
|
|
213
213
|
| `flexGrow` | `number` | No | `-` | - |
|
|
214
214
|
| `flexShrink` | `number` | No | `-` | - |
|
|
215
215
|
| `flexWrap` | `wrap \| nowrap \| wrap-reverse` | No | `-` | - |
|
|
@@ -218,11 +218,11 @@ The `ContentCellFallback` component provides loading state representations of `C
|
|
|
218
218
|
| `fontSize` | `inherit \| FontSize` | No | `-` | - |
|
|
219
219
|
| `fontWeight` | `inherit \| FontWeight` | No | `-` | - |
|
|
220
220
|
| `gap` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
|
|
221
|
-
| `height` | `null \| number \|
|
|
221
|
+
| `height` | `null \| number \| AnimatedNode \| auto \| ${number}%` | No | `-` | - |
|
|
222
222
|
| `innerSpacing` | `CellSpacing` | No | `-` | The spacing to use on the inner content of Cell |
|
|
223
223
|
| `intermediary` | `null \| string \| number \| bigint \| false \| true \| ReactElement<unknown, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal \| Promise<AwaitedReactNode>` | No | `-` | Middle content between main content and detail. |
|
|
224
224
|
| `justifyContent` | `flex-start \| flex-end \| center \| space-between \| space-around \| space-evenly` | No | `-` | - |
|
|
225
|
-
| `left` | `null \| number \|
|
|
225
|
+
| `left` | `null \| number \| AnimatedNode \| auto \| ${number}%` | No | `-` | - |
|
|
226
226
|
| `lineHeight` | `inherit \| LineHeight` | No | `-` | - |
|
|
227
227
|
| `margin` | `0 \| -1 \| -2 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1.5` | No | `-` | - |
|
|
228
228
|
| `marginBottom` | `0 \| -1 \| -2 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1.5` | No | `-` | - |
|
|
@@ -231,13 +231,13 @@ The `ContentCellFallback` component provides loading state representations of `C
|
|
|
231
231
|
| `marginTop` | `0 \| -1 \| -2 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1.5` | No | `-` | - |
|
|
232
232
|
| `marginX` | `0 \| -1 \| -2 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1.5` | No | `-` | - |
|
|
233
233
|
| `marginY` | `0 \| -1 \| -2 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1.5` | No | `-` | - |
|
|
234
|
-
| `maxHeight` | `null \| number \|
|
|
235
|
-
| `maxWidth` | `null \| number \|
|
|
234
|
+
| `maxHeight` | `null \| number \| AnimatedNode \| auto \| ${number}%` | No | `-` | - |
|
|
235
|
+
| `maxWidth` | `null \| number \| AnimatedNode \| auto \| ${number}%` | No | `-` | - |
|
|
236
236
|
| `media` | `ReactElement<unknown, string \| JSXElementConstructor<any>>` | No | `-` | Media rendered at the start of the cell (icon, avatar, image, etc). Media (icon, asset, image, etc) to display at the start of the cell. |
|
|
237
237
|
| `meta` | `null \| string \| number \| bigint \| false \| true \| ReactElement<unknown, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal \| Promise<AwaitedReactNode>` | No | `-` | Meta information to display at the end of the title. |
|
|
238
238
|
| `metaNode` | `null \| string \| number \| bigint \| false \| true \| ReactElement<unknown, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal \| Promise<AwaitedReactNode>` | No | `-` | React node to render meta. Takes precedence over meta. When provided, styles.meta and styles.metaContainer are not applied. |
|
|
239
|
-
| `minHeight` | `null \| number \|
|
|
240
|
-
| `minWidth` | `null \| number \|
|
|
239
|
+
| `minHeight` | `null \| number \| AnimatedNode \| auto \| ${number}%` | No | `-` | - |
|
|
240
|
+
| `minWidth` | `null \| number \| AnimatedNode \| auto \| ${number}%` | No | `-` | - |
|
|
241
241
|
| `onPointerCancel` | `((event: PointerEvent) => void)` | No | `-` | - |
|
|
242
242
|
| `onPointerCancelCapture` | `((event: PointerEvent) => void)` | No | `-` | - |
|
|
243
243
|
| `onPointerDown` | `((event: PointerEvent) => void)` | No | `-` | - |
|
|
@@ -264,7 +264,7 @@ The `ContentCellFallback` component provides loading state representations of `C
|
|
|
264
264
|
| `pin` | `top \| bottom \| left \| right \| all` | No | `-` | Direction in which to absolutely pin the box. |
|
|
265
265
|
| `position` | `absolute \| relative \| static` | No | `-` | - |
|
|
266
266
|
| `priority` | `end \| start \| middle \| (end \| start \| middle)[]` | No | `-` | Which piece of content has the highest priority in regards to text truncation, growing, and shrinking. |
|
|
267
|
-
| `right` | `null \| number \|
|
|
267
|
+
| `right` | `null \| number \| AnimatedNode \| auto \| ${number}%` | No | `-` | - |
|
|
268
268
|
| `rowGap` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
|
|
269
269
|
| `selected` | `boolean` | No | `-` | Is the cell selected? Will apply a background and selected accessory. |
|
|
270
270
|
| `spacingVariant` | `normal \| compact \| condensed` | No | `'normal'` | Spacing variant configuration. Deprecated value: compact. Prefer condensed. When spacingVariant=normal: 1. min-height is 80px 2. padding is var(--space-2) var(--space-3) 3. border-radius is var(--borderRadius-200) When spacingVariant=compact: 1. same as spacingVariant=normal, except min-height is 40px When spacingVariant=condensed: 1. min-height is undefined 2. padding is var(--space-1) var(--space-2) 3. border-radius is var(--borderRadius-0) 4. subtitle uses label1 5. title wraps to 2 lines regardless of description content |
|
|
@@ -279,10 +279,10 @@ The `ContentCellFallback` component provides loading state representations of `C
|
|
|
279
279
|
| `textTransform` | `none \| capitalize \| uppercase \| lowercase` | No | `-` | - |
|
|
280
280
|
| `title` | `null \| string \| number \| bigint \| false \| true \| ReactElement<unknown, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal \| Promise<AwaitedReactNode>` | No | `-` | Title of content. Up to 2 lines depending on spacing variant. |
|
|
281
281
|
| `titleNode` | `null \| string \| number \| bigint \| false \| true \| ReactElement<unknown, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal \| Promise<AwaitedReactNode>` | No | `-` | React node to render title. Takes precedence over title. When provided, styles.title is not applied. |
|
|
282
|
-
| `top` | `null \| number \|
|
|
282
|
+
| `top` | `null \| number \| AnimatedNode \| auto \| ${number}%` | No | `-` | - |
|
|
283
283
|
| `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 | `-` | - |
|
|
284
|
-
| `userSelect` | `
|
|
285
|
-
| `width` | `null \| number \|
|
|
284
|
+
| `userSelect` | `none \| auto \| text \| contain \| all` | No | `-` | - |
|
|
285
|
+
| `width` | `null \| number \| AnimatedNode \| auto \| ${number}%` | No | `-` | - |
|
|
286
286
|
| `zIndex` | `number` | No | `-` | - |
|
|
287
287
|
|
|
288
288
|
|
|
@@ -369,7 +369,7 @@ function CustomRadioButtonExample() {
|
|
|
369
369
|
| `borderedStart` | `boolean` | No | `-` | Add a border to the leading side of the box. |
|
|
370
370
|
| `borderedTop` | `boolean` | No | `-` | Add a border to the top side of the box. |
|
|
371
371
|
| `borderedVertical` | `boolean` | No | `-` | Add a border to the top and bottom sides of the box. |
|
|
372
|
-
| `bottom` | `null \| number \|
|
|
372
|
+
| `bottom` | `null \| number \| AnimatedNode \| auto \| ${number}%` | No | `-` | - |
|
|
373
373
|
| `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 | `-` | - |
|
|
374
374
|
| `columnGap` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
|
|
375
375
|
| `dangerouslySetBackground` | `string` | No | `-` | - |
|
|
@@ -377,8 +377,8 @@ function CustomRadioButtonExample() {
|
|
|
377
377
|
| `display` | `flex \| none \| contents` | No | `-` | - |
|
|
378
378
|
| `divider` | `ComponentType<{ children?: ReactNode; }> \| null` | No | `-` | Divider Component to include between each item in a group. |
|
|
379
379
|
| `elevation` | `0 \| 1 \| 2` | No | `-` | Determines box shadow styles. Parent should have overflow set to visible to ensure styles are not clipped. |
|
|
380
|
-
| `flexBasis` | `null \| number \|
|
|
381
|
-
| `flexDirection` | `
|
|
380
|
+
| `flexBasis` | `null \| number \| AnimatedNode \| auto \| ${number}%` | No | `-` | - |
|
|
381
|
+
| `flexDirection` | `row \| column \| row-reverse \| column-reverse` | No | `-` | - |
|
|
382
382
|
| `flexGrow` | `number` | No | `-` | - |
|
|
383
383
|
| `flexShrink` | `number` | No | `-` | - |
|
|
384
384
|
| `flexWrap` | `wrap \| nowrap \| wrap-reverse` | No | `-` | - |
|
|
@@ -387,10 +387,10 @@ function CustomRadioButtonExample() {
|
|
|
387
387
|
| `fontSize` | `inherit \| FontSize` | No | `-` | - |
|
|
388
388
|
| `fontWeight` | `inherit \| FontWeight` | No | `-` | - |
|
|
389
389
|
| `gap` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | Gap to insert between siblings. |
|
|
390
|
-
| `height` | `null \| number \|
|
|
390
|
+
| `height` | `null \| number \| AnimatedNode \| auto \| ${number}%` | No | `-` | - |
|
|
391
391
|
| `justifyContent` | `flex-start \| flex-end \| center \| space-between \| space-around \| space-evenly` | No | `-` | - |
|
|
392
392
|
| `label` | `null \| string \| number \| bigint \| false \| true \| ReactElement<unknown, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal \| Promise<AwaitedReactNode>` | No | `-` | Set a label for the group. |
|
|
393
|
-
| `left` | `null \| number \|
|
|
393
|
+
| `left` | `null \| number \| AnimatedNode \| auto \| ${number}%` | No | `-` | - |
|
|
394
394
|
| `lineHeight` | `inherit \| LineHeight` | No | `-` | - |
|
|
395
395
|
| `margin` | `0 \| -1 \| -2 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1.5` | No | `-` | - |
|
|
396
396
|
| `marginBottom` | `0 \| -1 \| -2 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1.5` | No | `-` | - |
|
|
@@ -399,10 +399,10 @@ function CustomRadioButtonExample() {
|
|
|
399
399
|
| `marginTop` | `0 \| -1 \| -2 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1.5` | No | `-` | - |
|
|
400
400
|
| `marginX` | `0 \| -1 \| -2 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1.5` | No | `-` | - |
|
|
401
401
|
| `marginY` | `0 \| -1 \| -2 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1.5` | No | `-` | - |
|
|
402
|
-
| `maxHeight` | `null \| number \|
|
|
403
|
-
| `maxWidth` | `null \| number \|
|
|
404
|
-
| `minHeight` | `null \| number \|
|
|
405
|
-
| `minWidth` | `null \| number \|
|
|
402
|
+
| `maxHeight` | `null \| number \| AnimatedNode \| auto \| ${number}%` | No | `-` | - |
|
|
403
|
+
| `maxWidth` | `null \| number \| AnimatedNode \| auto \| ${number}%` | No | `-` | - |
|
|
404
|
+
| `minHeight` | `null \| number \| AnimatedNode \| auto \| ${number}%` | No | `-` | - |
|
|
405
|
+
| `minWidth` | `null \| number \| AnimatedNode \| auto \| ${number}%` | No | `-` | - |
|
|
406
406
|
| `onChange` | `((value: ControlValue, checked?: boolean \| undefined) => void) \| undefined` | No | `-` | Handle change events. |
|
|
407
407
|
| `onPointerCancel` | `((event: PointerEvent) => void)` | No | `-` | - |
|
|
408
408
|
| `onPointerCancelCapture` | `((event: PointerEvent) => void)` | No | `-` | - |
|
|
@@ -429,7 +429,7 @@ function CustomRadioButtonExample() {
|
|
|
429
429
|
| `position` | `absolute \| relative \| static` | No | `-` | - |
|
|
430
430
|
| `ref` | `null \| RefObject<View \| null> \| (instance: View \| null) => void \| (() => VoidOrUndefinedOnly)` | No | `-` | - |
|
|
431
431
|
| `renderItem` | `(((info: { Wrapper: ComponentType<PropsWithChildren<BoxBaseProps>>; item: string \| number \| ReactElement<unknown, string \| JSXElementConstructor<any>>; index: number; isFirst: boolean; isLast: boolean; }) => string \| number \| ReactElement<unknown, string \| JSXElementConstructor<any>>) & ((info: { Wrapper: ComponentType<PropsWithChildren<BoxProps>>; item: string \| number \| ReactElement<unknown, string \| JSXElementConstructor<any>>; index: number; isFirst: boolean; isLast: boolean; }) => string \| number \| ReactElement<unknown, string \| JSXElementConstructor<any>>))` | No | `Box component for given platform` | Control the layout of each item in a group. |
|
|
432
|
-
| `right` | `null \| number \|
|
|
432
|
+
| `right` | `null \| number \| AnimatedNode \| auto \| ${number}%` | No | `-` | - |
|
|
433
433
|
| `rowGap` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
|
|
434
434
|
| `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 | `-` | - |
|
|
435
435
|
| `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. |
|
|
@@ -437,10 +437,10 @@ function CustomRadioButtonExample() {
|
|
|
437
437
|
| `textDecorationLine` | `none \| underline \| line-through \| underline line-through` | No | `-` | - |
|
|
438
438
|
| `textDecorationStyle` | `solid \| dotted \| dashed \| double` | No | `-` | - |
|
|
439
439
|
| `textTransform` | `none \| capitalize \| uppercase \| lowercase` | No | `-` | - |
|
|
440
|
-
| `top` | `null \| number \|
|
|
440
|
+
| `top` | `null \| number \| AnimatedNode \| auto \| ${number}%` | No | `-` | - |
|
|
441
441
|
| `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 | `-` | - |
|
|
442
|
-
| `userSelect` | `
|
|
443
|
-
| `width` | `null \| number \|
|
|
442
|
+
| `userSelect` | `none \| auto \| text \| contain \| all` | No | `-` | - |
|
|
443
|
+
| `width` | `null \| number \| AnimatedNode \| auto \| ${number}%` | No | `-` | - |
|
|
444
444
|
| `zIndex` | `number` | No | `-` | - |
|
|
445
445
|
|
|
446
446
|
|
|
@@ -687,7 +687,7 @@ import { DataCard } from '@coinbase/cds-mobile/alpha/data-card';
|
|
|
687
687
|
| `borderedStart` | `boolean` | No | `-` | Add a border to the leading side of the box. |
|
|
688
688
|
| `borderedTop` | `boolean` | No | `-` | Add a border to the top side of the box. |
|
|
689
689
|
| `borderedVertical` | `boolean` | No | `-` | Add a border to the top and bottom sides of the box. |
|
|
690
|
-
| `bottom` | `null \| number \|
|
|
690
|
+
| `bottom` | `null \| number \| AnimatedNode \| auto \| ${number}%` | No | `-` | - |
|
|
691
691
|
| `children` | `null \| string \| number \| bigint \| false \| true \| ReactElement<unknown, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal \| Promise<AwaitedReactNode>` | No | `-` | Child node to display as the visualization (e.g., ProgressBar or ProgressCircle). |
|
|
692
692
|
| `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 | `-` | - |
|
|
693
693
|
| `columnGap` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
|
|
@@ -698,9 +698,9 @@ import { DataCard } from '@coinbase/cds-mobile/alpha/data-card';
|
|
|
698
698
|
| `disabled` | `boolean` | No | `-` | Is the element currently disabled. Whether the press behavior is disabled. |
|
|
699
699
|
| `display` | `flex \| none \| contents` | No | `-` | - |
|
|
700
700
|
| `elevation` | `0 \| 1 \| 2` | No | `-` | Determines box shadow styles. Parent should have overflow set to visible to ensure styles are not clipped. Is the element elevated. |
|
|
701
|
-
| `feedback` | `
|
|
702
|
-
| `flexBasis` | `null \| number \|
|
|
703
|
-
| `flexDirection` | `
|
|
701
|
+
| `feedback` | `none \| normal \| light \| heavy` | No | `none` | Haptic feedback to trigger when being pressed. |
|
|
702
|
+
| `flexBasis` | `null \| number \| AnimatedNode \| auto \| ${number}%` | No | `-` | - |
|
|
703
|
+
| `flexDirection` | `row \| column \| row-reverse \| column-reverse` | No | `-` | - |
|
|
704
704
|
| `flexGrow` | `number` | No | `-` | - |
|
|
705
705
|
| `flexShrink` | `number` | No | `-` | - |
|
|
706
706
|
| `flexWrap` | `wrap \| nowrap \| wrap-reverse` | No | `-` | - |
|
|
@@ -709,10 +709,10 @@ import { DataCard } from '@coinbase/cds-mobile/alpha/data-card';
|
|
|
709
709
|
| `fontSize` | `inherit \| FontSize` | No | `-` | - |
|
|
710
710
|
| `fontWeight` | `inherit \| FontWeight` | No | `-` | - |
|
|
711
711
|
| `gap` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
|
|
712
|
-
| `height` | `null \| number \|
|
|
712
|
+
| `height` | `null \| number \| AnimatedNode \| auto \| ${number}%` | No | `-` | - |
|
|
713
713
|
| `justifyContent` | `flex-start \| flex-end \| center \| space-between \| space-around \| space-evenly` | No | `-` | - |
|
|
714
714
|
| `key` | `Key \| null` | No | `-` | - |
|
|
715
|
-
| `left` | `null \| number \|
|
|
715
|
+
| `left` | `null \| number \| AnimatedNode \| auto \| ${number}%` | No | `-` | - |
|
|
716
716
|
| `lineHeight` | `inherit \| LineHeight` | No | `-` | - |
|
|
717
717
|
| `loading` | `boolean` | No | `-` | Is the element currenty loading. When set to true, will disable element from press and keyboard events Is the element currenty loading. |
|
|
718
718
|
| `margin` | `0 \| -1 \| -2 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1.5` | No | `-` | - |
|
|
@@ -722,10 +722,10 @@ import { DataCard } from '@coinbase/cds-mobile/alpha/data-card';
|
|
|
722
722
|
| `marginTop` | `0 \| -1 \| -2 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1.5` | No | `-` | - |
|
|
723
723
|
| `marginX` | `0 \| -1 \| -2 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1.5` | No | `-` | - |
|
|
724
724
|
| `marginY` | `0 \| -1 \| -2 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1.5` | No | `-` | - |
|
|
725
|
-
| `maxHeight` | `null \| number \|
|
|
726
|
-
| `maxWidth` | `null \| number \|
|
|
727
|
-
| `minHeight` | `null \| number \|
|
|
728
|
-
| `minWidth` | `null \| number \|
|
|
725
|
+
| `maxHeight` | `null \| number \| AnimatedNode \| auto \| ${number}%` | No | `-` | - |
|
|
726
|
+
| `maxWidth` | `null \| number \| AnimatedNode \| auto \| ${number}%` | No | `-` | - |
|
|
727
|
+
| `minHeight` | `null \| number \| AnimatedNode \| auto \| ${number}%` | No | `-` | - |
|
|
728
|
+
| `minWidth` | `null \| number \| AnimatedNode \| auto \| ${number}%` | No | `-` | - |
|
|
729
729
|
| `noScaleOnPress` | `boolean` | No | `-` | Dont scale element on press. |
|
|
730
730
|
| `onPointerCancel` | `((event: PointerEvent) => void)` | No | `-` | - |
|
|
731
731
|
| `onPointerCancelCapture` | `((event: PointerEvent) => void)` | No | `-` | - |
|
|
@@ -755,7 +755,7 @@ import { DataCard } from '@coinbase/cds-mobile/alpha/data-card';
|
|
|
755
755
|
| `position` | `absolute \| relative \| static` | No | `-` | - |
|
|
756
756
|
| `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). |
|
|
757
757
|
| `renderAsPressable` | `boolean` | No | `false` | If true, the CardRoot will be rendered as a Pressable component. When false, renders as an HStack for layout purposes. |
|
|
758
|
-
| `right` | `null \| number \|
|
|
758
|
+
| `right` | `null \| number \| AnimatedNode \| auto \| ${number}%` | No | `-` | - |
|
|
759
759
|
| `rowGap` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
|
|
760
760
|
| `style` | `null \| false \| \| ViewStyle \| RegisteredStyle<ViewStyle> \| RecursiveArray<Falsy \| ViewStyle \| RegisteredStyle<ViewStyle>>` | No | `-` | - |
|
|
761
761
|
| `styles` | `({ layoutContainer?: StyleProp<ViewStyle>; headerContainer?: StyleProp<ViewStyle>; textContainer?: StyleProp<ViewStyle>; titleContainer?: StyleProp<ViewStyle>; } & { root?: StyleProp<ViewStyle>; })` | No | `-` | - |
|
|
@@ -767,12 +767,12 @@ import { DataCard } from '@coinbase/cds-mobile/alpha/data-card';
|
|
|
767
767
|
| `textTransform` | `none \| capitalize \| uppercase \| lowercase` | No | `-` | - |
|
|
768
768
|
| `thumbnail` | `null \| string \| number \| bigint \| false \| true \| ReactElement<unknown, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal \| Promise<AwaitedReactNode>` | No | `-` | React node to display as a thumbnail in the header area. |
|
|
769
769
|
| `titleAccessory` | `null \| string \| number \| bigint \| false \| true \| ReactElement<unknown, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal \| Promise<AwaitedReactNode>` | No | `-` | React node to display as a title accessory. |
|
|
770
|
-
| `top` | `null \| number \|
|
|
770
|
+
| `top` | `null \| number \| AnimatedNode \| auto \| ${number}%` | No | `-` | - |
|
|
771
771
|
| `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 | `-` | - |
|
|
772
772
|
| `transparentWhileInactive` | `boolean` | No | `-` | Mark the background and border as transparent until the element is interacted with (hovered, pressed, etc). Must be used in conjunction with the pressed prop |
|
|
773
773
|
| `transparentWhilePressed` | `boolean` | No | `-` | Mark the background and border as transparent even while element is interacted with (elevation underlay issue). Must be used in conjunction with the pressed prop |
|
|
774
|
-
| `userSelect` | `
|
|
775
|
-
| `width` | `null \| number \|
|
|
774
|
+
| `userSelect` | `none \| auto \| text \| contain \| all` | No | `-` | - |
|
|
775
|
+
| `width` | `null \| number \| AnimatedNode \| auto \| ${number}%` | No | `-` | - |
|
|
776
776
|
| `wrapperStyles` | `{ base?: StyleProp<ViewStyle>; pressed?: StyleProp<ViewStyle>; disabled?: StyleProp<ViewStyle>; }` | No | `-` | Apply styles to the outer container. |
|
|
777
777
|
| `zIndex` | `number` | No | `-` | - |
|
|
778
778
|
|
|
@@ -494,7 +494,7 @@ The DateInput fires events in a specific order:
|
|
|
494
494
|
| `align` | `end \| start \| center \| justify` | No | `start` | Aligns text inside input and helperText |
|
|
495
495
|
| `allowFontScaling` | `boolean` | No | `-` | Specifies whether fonts should scale to respect Text Size accessibility settings. The default is true. |
|
|
496
496
|
| `autoCapitalize` | `none \| sentences \| words \| characters` | No | `-` | Can tell TextInput to automatically capitalize certain characters. characters: all characters, words: first letter of each word sentences: first letter of each sentence (default) none: dont auto capitalize anything https://reactnative.dev/docs/textinput#autocapitalize |
|
|
497
|
-
| `autoComplete` | `
|
|
497
|
+
| `autoComplete` | `off \| email \| name \| additional-name \| address-line1 \| address-line2 \| birthdate-day \| birthdate-full \| birthdate-month \| birthdate-year \| cc-csc \| cc-exp \| cc-exp-day \| cc-exp-month \| cc-exp-year \| cc-number \| cc-name \| cc-given-name \| cc-middle-name \| cc-family-name \| cc-type \| country \| current-password \| family-name \| gender \| given-name \| honorific-prefix \| honorific-suffix \| name-family \| name-given \| name-middle \| name-middle-initial \| name-prefix \| name-suffix \| new-password \| nickname \| one-time-code \| organization \| organization-title \| password \| password-new \| postal-address \| postal-address-country \| postal-address-extended \| postal-address-extended-postal-code \| postal-address-locality \| postal-address-region \| postal-code \| street-address \| sms-otp \| tel \| tel-country-code \| tel-national \| tel-device \| url \| username \| username-new` | No | `-` | Specifies autocomplete hints for the system, so it can provide autofill. On Android, the system will always attempt to offer autofill by using heuristics to identify the type of content. To disable autocomplete, set autoComplete to off. The following values work across platforms: - additional-name - address-line1 - address-line2 - cc-number - country - current-password - email - family-name - given-name - honorific-prefix - honorific-suffix - name - new-password - off - one-time-code - postal-code - street-address - tel - username The following values work on iOS only: - nickname - organization - organization-title - url The following values work on Android only: - birthdate-day - birthdate-full - birthdate-month - birthdate-year - cc-csc - cc-exp - cc-exp-day - cc-exp-month - cc-exp-year - gender - name-family - name-given - name-middle - name-middle-initial - name-prefix - name-suffix - password - password-new - postal-address - postal-address-country - postal-address-extended - postal-address-extended-postal-code - postal-address-locality - postal-address-region - sms-otp - tel-country-code - tel-national - tel-device - username-new |
|
|
498
498
|
| `autoCorrect` | `boolean` | No | `-` | If false, disables auto-correct. The default value is true. |
|
|
499
499
|
| `autoFocus` | `boolean` | No | `-` | If true, focuses the input on componentDidMount. The default value is false. |
|
|
500
500
|
| `blurOnSubmit` | `boolean` | No | `-` | If true, the text field will blur when submitted. The default value is true for single-line fields and false for multiline fields. Note that for multiline fields, setting blurOnSubmit to true means that pressing return will blur the field and trigger the onSubmitEditing event instead of inserting a newline into the field. |
|
|
@@ -519,7 +519,7 @@ The DateInput fires events in a specific order:
|
|
|
519
519
|
| `enterKeyHint` | `search \| done \| go \| next \| send \| previous \| enter` | No | `-` | Determines what text should be shown to the return key on virtual keyboards. Has precedence over the returnKeyType prop. |
|
|
520
520
|
| `focusedBorderWidth` | `0 \| 100 \| 200 \| 300 \| 400 \| 500` | No | `borderWidth` | Additional border width when focused. |
|
|
521
521
|
| `font` | `display1 \| display2 \| display3 \| title1 \| title2 \| title3 \| title4 \| headline \| body \| label1 \| label2 \| caption \| legal` | No | `body` | Typography font token for the field (passed through to NativeInput as font), same token family as align. |
|
|
522
|
-
| `height` | `null \| number \|
|
|
522
|
+
| `height` | `null \| number \| AnimatedNode \| auto \| ${number}%` | No | `-` | Height of input |
|
|
523
523
|
| `helperText` | `null \| string \| number \| bigint \| false \| true \| ReactElement<unknown, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal \| Promise<AwaitedReactNode>` | No | `-` | For cases where label is not enough information to describe what the text input is for. Can also be used for showing positive/negative messages |
|
|
524
524
|
| `helperTextErrorIconAccessibilityLabel` | `string` | No | `'error'` | Accessibility label for helper text error icon when variant=negative |
|
|
525
525
|
| `importantForAutofill` | `auto \| yes \| no \| noExcludeDescendants \| yesExcludeDescendants` | No | `-` | Determines whether the individual fields in your app should be included in a view structure for autofill purposes on Android API Level 26+. Defaults to auto. To disable auto complete, use off. *Android Only* The following values work on Android only: - auto - let Android decide - no - not important for autofill - noExcludeDescendants - this view and its children arent important for autofill - yes - is important for autofill - yesExcludeDescendants - this view is important for autofill but its children arent |
|
|
@@ -528,7 +528,7 @@ The DateInput fires events in a specific order:
|
|
|
528
528
|
| `inputAccessoryViewButtonLabel` | `string` | No | `-` | An optional label that overrides the default input accessory view button label. |
|
|
529
529
|
| `inputAccessoryViewID` | `string` | No | `-` | Used to connect to an InputAccessoryView. Not part of react-natives documentation, but present in examples and code. See https://reactnative.dev/docs/inputaccessoryview for more information. |
|
|
530
530
|
| `inputBackground` | `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 | `'bg'` | Background color of the input |
|
|
531
|
-
| `inputMode` | `search \|
|
|
531
|
+
| `inputMode` | `search \| none \| text \| email \| tel \| url \| numeric \| decimal` | No | `-` | Works like the inputmode attribute in HTML, it determines which keyboard to open, e.g. numeric and has precedence over keyboardType. |
|
|
532
532
|
| `invalidDateError` | `string` | No | `'Please enter a valid date'` | Error text to display when an impossible date is selected, e.g. 99/99/2000. This should always be defined for accessibility. Also displays when a date is selected that is more than 100 years before the minDate, or more than 100 years after the maxDate. |
|
|
533
533
|
| `key` | `Key \| null` | No | `-` | - |
|
|
534
534
|
| `keyboardAppearance` | `light \| default \| dark` | No | `-` | Determines the color of the keyboard. |
|
|
@@ -542,7 +542,7 @@ The DateInput fires events in a specific order:
|
|
|
542
542
|
| `maxFontSizeMultiplier` | `number \| null` | No | `-` | Specifies largest possible scale a font can reach when allowFontScaling is enabled. Possible values: - null/undefined (default): inherit from the parent node or the global default (0) - 0: no max, ignore parent/global default - >= 1: sets the maxFontSizeMultiplier of this node to this value |
|
|
543
543
|
| `maxLength` | `number` | No | `-` | Limits the maximum number of characters that can be entered. Use this instead of implementing the logic in JS to avoid flicker. |
|
|
544
544
|
| `minDate` | `Date` | No | `-` | Minimum date allowed to be selected, inclusive. Dates before the minDate are disabled. Make sure to set disabledDateError as well. |
|
|
545
|
-
| `minHeight` | `null \| number \|
|
|
545
|
+
| `minHeight` | `null \| number \| AnimatedNode \| auto \| ${number}%` | No | `auto` | minimum height of input |
|
|
546
546
|
| `multiline` | `boolean` | No | `-` | If true, the text input can be multiple lines. The default value is false. |
|
|
547
547
|
| `numberOfLines` | `number` | No | `-` | Sets the number of lines for a TextInput. Use it with multiline set to true to be able to fill the lines. |
|
|
548
548
|
| `onBlur` | `((e: BlurEvent) => void)` | No | `-` | Callback that is called when the text input is blurred Note: If you are trying to find the last value of TextInput, you can use the onEndEditing event, which is fired upon completion of editing. |
|
|
@@ -600,10 +600,10 @@ The DateInput fires events in a specific order:
|
|
|
600
600
|
| `textAlign` | `left \| right \| center \| unset` | No | `-` | Native TextInput textAlign with the extra unset option to remove the textAlign style. Use this to workaround the issue where long text does not ellipsis in TextInput |
|
|
601
601
|
| `textAlignVertical` | `top \| bottom \| auto \| center` | No | `-` | Vertically align text when multiline is set to true |
|
|
602
602
|
| `textBreakStrategy` | `simple \| highQuality \| balanced` | No | `-` | Set text break strategy on Android API Level 23+, possible values are simple, highQuality, balanced The default value is simple. |
|
|
603
|
-
| `textContentType` | `
|
|
603
|
+
| `textContentType` | `none \| location \| name \| nickname \| password \| username \| flightNumber \| URL \| addressCity \| addressCityAndState \| addressState \| countryName \| creditCardNumber \| creditCardExpiration \| creditCardExpirationMonth \| creditCardExpirationYear \| creditCardSecurityCode \| creditCardType \| creditCardName \| creditCardGivenName \| creditCardMiddleName \| creditCardFamilyName \| emailAddress \| familyName \| fullStreetAddress \| givenName \| jobTitle \| middleName \| namePrefix \| nameSuffix \| organizationName \| postalCode \| streetAddressLine1 \| streetAddressLine2 \| sublocality \| telephoneNumber \| newPassword \| oneTimeCode \| birthdate \| birthdateDay \| birthdateMonth \| birthdateYear \| cellularEID \| cellularIMEI \| dateTime \| shipmentTrackingNumber` | No | `-` | Give the keyboard and the system information about the expected semantic meaning for the content that users enter. To disable autofill, set textContentType to none. Possible values for textContentType are: - none - URL - addressCity - addressCityAndState - addressState - countryName - creditCardNumber - creditCardExpiration (iOS 17+) - creditCardExpirationMonth (iOS 17+) - creditCardExpirationYear (iOS 17+) - creditCardSecurityCode (iOS 17+) - creditCardType (iOS 17+) - creditCardName (iOS 17+) - creditCardGivenName (iOS 17+) - creditCardMiddleName (iOS 17+) - creditCardFamilyName (iOS 17+) - emailAddress - familyName - fullStreetAddress - givenName - jobTitle - location - middleName - name - namePrefix - nameSuffix - nickname - organizationName - postalCode - streetAddressLine1 - streetAddressLine2 - sublocality - telephoneNumber - username - password - newPassword - oneTimeCode - birthdate (iOS 17+) - birthdateDay (iOS 17+) - birthdateMonth (iOS 17+) - birthdateYear (iOS 17+) - cellularEID (iOS 17.4+) - cellularIMEI (iOS 17.4+) - dateTime (iOS 15+) - flightNumber (iOS 15+) - shipmentTrackingNumber (iOS 15+) |
|
|
604
604
|
| `underlineColorAndroid` | `string \| OpaqueColorValue` | No | `-` | The color of the textInput underline. |
|
|
605
605
|
| `variant` | `primary \| secondary \| positive \| negative \| foregroundMuted \| foreground` | No | `-` | Determines the sentiment of the input. Because we allow startContent and endContent to be custom ReactNode, the content placed inside these slots will not change colors according to the variant. You will have to add that yourself |
|
|
606
606
|
| `verticalAlign` | `top \| bottom \| auto \| middle` | No | `-` | Vertically align text when multiline is set to true |
|
|
607
|
-
| `width` | `null \| number \|
|
|
607
|
+
| `width` | `null \| number \| AnimatedNode \| auto \| ${number}%` | No | `100%` | Width of input as a percentage string. |
|
|
608
608
|
|
|
609
609
|
|
|
@@ -706,7 +706,7 @@ function Example() {
|
|
|
706
706
|
| `align` | `end \| start \| center \| justify` | No | `start` | Aligns text inside input and helperText |
|
|
707
707
|
| `allowFontScaling` | `boolean` | No | `-` | Specifies whether fonts should scale to respect Text Size accessibility settings. The default is true. |
|
|
708
708
|
| `autoCapitalize` | `none \| sentences \| words \| characters` | No | `-` | Can tell TextInput to automatically capitalize certain characters. characters: all characters, words: first letter of each word sentences: first letter of each sentence (default) none: dont auto capitalize anything https://reactnative.dev/docs/textinput#autocapitalize |
|
|
709
|
-
| `autoComplete` | `
|
|
709
|
+
| `autoComplete` | `off \| email \| name \| additional-name \| address-line1 \| address-line2 \| birthdate-day \| birthdate-full \| birthdate-month \| birthdate-year \| cc-csc \| cc-exp \| cc-exp-day \| cc-exp-month \| cc-exp-year \| cc-number \| cc-name \| cc-given-name \| cc-middle-name \| cc-family-name \| cc-type \| country \| current-password \| family-name \| gender \| given-name \| honorific-prefix \| honorific-suffix \| name-family \| name-given \| name-middle \| name-middle-initial \| name-prefix \| name-suffix \| new-password \| nickname \| one-time-code \| organization \| organization-title \| password \| password-new \| postal-address \| postal-address-country \| postal-address-extended \| postal-address-extended-postal-code \| postal-address-locality \| postal-address-region \| postal-code \| street-address \| sms-otp \| tel \| tel-country-code \| tel-national \| tel-device \| url \| username \| username-new` | No | `-` | Specifies autocomplete hints for the system, so it can provide autofill. On Android, the system will always attempt to offer autofill by using heuristics to identify the type of content. To disable autocomplete, set autoComplete to off. The following values work across platforms: - additional-name - address-line1 - address-line2 - cc-number - country - current-password - email - family-name - given-name - honorific-prefix - honorific-suffix - name - new-password - off - one-time-code - postal-code - street-address - tel - username The following values work on iOS only: - nickname - organization - organization-title - url The following values work on Android only: - birthdate-day - birthdate-full - birthdate-month - birthdate-year - cc-csc - cc-exp - cc-exp-day - cc-exp-month - cc-exp-year - gender - name-family - name-given - name-middle - name-middle-initial - name-prefix - name-suffix - password - password-new - postal-address - postal-address-country - postal-address-extended - postal-address-extended-postal-code - postal-address-locality - postal-address-region - sms-otp - tel-country-code - tel-national - tel-device - username-new |
|
|
710
710
|
| `autoCorrect` | `boolean` | No | `-` | If false, disables auto-correct. The default value is true. |
|
|
711
711
|
| `autoFocus` | `boolean` | No | `-` | If true, focuses the input on componentDidMount. The default value is false. |
|
|
712
712
|
| `blurOnSubmit` | `boolean` | No | `-` | If true, the text field will blur when submitted. The default value is true for single-line fields and false for multiline fields. Note that for multiline fields, setting blurOnSubmit to true means that pressing return will blur the field and trigger the onSubmitEditing event instead of inserting a newline into the field. |
|
|
@@ -736,7 +736,7 @@ function Example() {
|
|
|
736
736
|
| `enterKeyHint` | `search \| done \| go \| next \| send \| previous \| enter` | No | `-` | Determines what text should be shown to the return key on virtual keyboards. Has precedence over the returnKeyType prop. |
|
|
737
737
|
| `focusedBorderWidth` | `0 \| 100 \| 200 \| 300 \| 400 \| 500` | No | `borderWidth` | Additional border width when focused. |
|
|
738
738
|
| `font` | `display1 \| display2 \| display3 \| title1 \| title2 \| title3 \| title4 \| headline \| body \| label1 \| label2 \| caption \| legal` | No | `body` | Typography font token for the field (passed through to NativeInput as font), same token family as align. |
|
|
739
|
-
| `height` | `null \| number \|
|
|
739
|
+
| `height` | `null \| number \| AnimatedNode \| auto \| ${number}%` | No | `-` | Height of input |
|
|
740
740
|
| `helperText` | `null \| string \| number \| bigint \| false \| true \| ReactElement<unknown, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal \| Promise<AwaitedReactNode>` | No | `-` | For cases where label is not enough information to describe what the text input is for. Can also be used for showing positive/negative messages |
|
|
741
741
|
| `helperTextErrorIconAccessibilityLabel` | `string` | No | `'error'` | Accessibility label for helper text error icon when variant=negative |
|
|
742
742
|
| `highlightedDateAccessibilityHint` | `string` | No | `'Highlighted'` | Accessibility hint announced for highlighted dates. Applied to all highlighted dates. |
|
|
@@ -747,7 +747,7 @@ function Example() {
|
|
|
747
747
|
| `inputAccessoryViewButtonLabel` | `string` | No | `-` | An optional label that overrides the default input accessory view button label. |
|
|
748
748
|
| `inputAccessoryViewID` | `string` | No | `-` | Used to connect to an InputAccessoryView. Not part of react-natives documentation, but present in examples and code. See https://reactnative.dev/docs/inputaccessoryview for more information. |
|
|
749
749
|
| `inputBackground` | `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 | `'bg'` | Background color of the input |
|
|
750
|
-
| `inputMode` | `search \|
|
|
750
|
+
| `inputMode` | `search \| none \| text \| email \| tel \| url \| numeric \| decimal` | No | `-` | Works like the inputmode attribute in HTML, it determines which keyboard to open, e.g. numeric and has precedence over keyboardType. |
|
|
751
751
|
| `invalidDateError` | `string` | No | `'Please enter a valid date'` | Error text to display when an impossible date is selected, e.g. 99/99/2000. This should always be defined for accessibility. Also displays when a date is selected that is more than 100 years before the minDate, or more than 100 years after the maxDate. |
|
|
752
752
|
| `key` | `Key \| null` | No | `-` | - |
|
|
753
753
|
| `keyboardAppearance` | `light \| default \| dark` | No | `-` | Determines the color of the keyboard. |
|
|
@@ -761,7 +761,7 @@ function Example() {
|
|
|
761
761
|
| `maxFontSizeMultiplier` | `number \| null` | No | `-` | Specifies largest possible scale a font can reach when allowFontScaling is enabled. Possible values: - null/undefined (default): inherit from the parent node or the global default (0) - 0: no max, ignore parent/global default - >= 1: sets the maxFontSizeMultiplier of this node to this value |
|
|
762
762
|
| `maxLength` | `number` | No | `-` | Limits the maximum number of characters that can be entered. Use this instead of implementing the logic in JS to avoid flicker. |
|
|
763
763
|
| `minDate` | `Date` | No | `-` | Minimum date allowed to be selected, inclusive. Dates before the minDate are disabled. All navigation to months before the minDate is disabled. |
|
|
764
|
-
| `minHeight` | `null \| number \|
|
|
764
|
+
| `minHeight` | `null \| number \| AnimatedNode \| auto \| ${number}%` | No | `auto` | minimum height of input |
|
|
765
765
|
| `multiline` | `boolean` | No | `-` | If true, the text input can be multiple lines. The default value is false. |
|
|
766
766
|
| `nextArrowAccessibilityLabel` | `string` | No | `'Go to next month'` | Accessibility label describing the Calendar next month arrow. |
|
|
767
767
|
| `numberOfLines` | `number` | No | `-` | Sets the number of lines for a TextInput. Use it with multiline set to true to be able to fill the lines. |
|
|
@@ -826,10 +826,10 @@ function Example() {
|
|
|
826
826
|
| `textAlign` | `left \| right \| center \| unset` | No | `-` | Native TextInput textAlign with the extra unset option to remove the textAlign style. Use this to workaround the issue where long text does not ellipsis in TextInput |
|
|
827
827
|
| `textAlignVertical` | `top \| bottom \| auto \| center` | No | `-` | Vertically align text when multiline is set to true |
|
|
828
828
|
| `textBreakStrategy` | `simple \| highQuality \| balanced` | No | `-` | Set text break strategy on Android API Level 23+, possible values are simple, highQuality, balanced The default value is simple. |
|
|
829
|
-
| `textContentType` | `
|
|
829
|
+
| `textContentType` | `none \| location \| name \| nickname \| password \| username \| flightNumber \| URL \| addressCity \| addressCityAndState \| addressState \| countryName \| creditCardNumber \| creditCardExpiration \| creditCardExpirationMonth \| creditCardExpirationYear \| creditCardSecurityCode \| creditCardType \| creditCardName \| creditCardGivenName \| creditCardMiddleName \| creditCardFamilyName \| emailAddress \| familyName \| fullStreetAddress \| givenName \| jobTitle \| middleName \| namePrefix \| nameSuffix \| organizationName \| postalCode \| streetAddressLine1 \| streetAddressLine2 \| sublocality \| telephoneNumber \| newPassword \| oneTimeCode \| birthdate \| birthdateDay \| birthdateMonth \| birthdateYear \| cellularEID \| cellularIMEI \| dateTime \| shipmentTrackingNumber` | No | `-` | Give the keyboard and the system information about the expected semantic meaning for the content that users enter. To disable autofill, set textContentType to none. Possible values for textContentType are: - none - URL - addressCity - addressCityAndState - addressState - countryName - creditCardNumber - creditCardExpiration (iOS 17+) - creditCardExpirationMonth (iOS 17+) - creditCardExpirationYear (iOS 17+) - creditCardSecurityCode (iOS 17+) - creditCardType (iOS 17+) - creditCardName (iOS 17+) - creditCardGivenName (iOS 17+) - creditCardMiddleName (iOS 17+) - creditCardFamilyName (iOS 17+) - emailAddress - familyName - fullStreetAddress - givenName - jobTitle - location - middleName - name - namePrefix - nameSuffix - nickname - organizationName - postalCode - streetAddressLine1 - streetAddressLine2 - sublocality - telephoneNumber - username - password - newPassword - oneTimeCode - birthdate (iOS 17+) - birthdateDay (iOS 17+) - birthdateMonth (iOS 17+) - birthdateYear (iOS 17+) - cellularEID (iOS 17.4+) - cellularIMEI (iOS 17.4+) - dateTime (iOS 15+) - flightNumber (iOS 15+) - shipmentTrackingNumber (iOS 15+) |
|
|
830
830
|
| `underlineColorAndroid` | `string \| OpaqueColorValue` | No | `-` | The color of the textInput underline. |
|
|
831
831
|
| `variant` | `primary \| secondary \| positive \| negative \| foregroundMuted \| foreground` | No | `-` | Determines the sentiment of the input. Because we allow startContent and endContent to be custom ReactNode, the content placed inside these slots will not change colors according to the variant. You will have to add that yourself |
|
|
832
832
|
| `verticalAlign` | `top \| bottom \| auto \| middle` | No | `-` | Vertically align text when multiline is set to true |
|
|
833
|
-
| `width` | `null \| number \|
|
|
833
|
+
| `width` | `null \| number \| AnimatedNode \| auto \| ${number}%` | No | `100%` | Width of input as a percentage string. |
|
|
834
834
|
|
|
835
835
|
|
|
@@ -68,15 +68,15 @@ import { Divider } from '@coinbase/cds-mobile/layout/Divider'
|
|
|
68
68
|
| `borderedStart` | `boolean` | No | `-` | Add a border to the leading side of the box. |
|
|
69
69
|
| `borderedTop` | `boolean` | No | `-` | Add a border to the top side of the box. |
|
|
70
70
|
| `borderedVertical` | `boolean` | No | `-` | Add a border to the top and bottom sides of the box. |
|
|
71
|
-
| `bottom` | `null \| number \|
|
|
71
|
+
| `bottom` | `null \| number \| AnimatedNode \| auto \| ${number}%` | No | `-` | - |
|
|
72
72
|
| `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 | `bgLine` | Color of the divider line. |
|
|
73
73
|
| `columnGap` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
|
|
74
74
|
| `dangerouslySetBackground` | `string` | No | `-` | - |
|
|
75
75
|
| `direction` | `horizontal \| vertical` | No | `horizontal` | The direction to render the divider line. |
|
|
76
76
|
| `display` | `flex \| none \| contents` | No | `-` | - |
|
|
77
77
|
| `elevation` | `0 \| 1 \| 2` | No | `-` | Determines box shadow styles. Parent should have overflow set to visible to ensure styles are not clipped. |
|
|
78
|
-
| `flexBasis` | `null \| number \|
|
|
79
|
-
| `flexDirection` | `
|
|
78
|
+
| `flexBasis` | `null \| number \| AnimatedNode \| auto \| ${number}%` | No | `-` | - |
|
|
79
|
+
| `flexDirection` | `row \| column \| row-reverse \| column-reverse` | No | `-` | - |
|
|
80
80
|
| `flexGrow` | `number` | No | `-` | - |
|
|
81
81
|
| `flexShrink` | `number` | No | `-` | - |
|
|
82
82
|
| `flexWrap` | `wrap \| nowrap \| wrap-reverse` | No | `-` | - |
|
|
@@ -85,9 +85,9 @@ import { Divider } from '@coinbase/cds-mobile/layout/Divider'
|
|
|
85
85
|
| `fontSize` | `inherit \| FontSize` | No | `-` | - |
|
|
86
86
|
| `fontWeight` | `inherit \| FontWeight` | No | `-` | - |
|
|
87
87
|
| `gap` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
|
|
88
|
-
| `height` | `null \| number \|
|
|
88
|
+
| `height` | `null \| number \| AnimatedNode \| auto \| ${number}%` | No | `-` | - |
|
|
89
89
|
| `justifyContent` | `flex-start \| flex-end \| center \| space-between \| space-around \| space-evenly` | No | `-` | - |
|
|
90
|
-
| `left` | `null \| number \|
|
|
90
|
+
| `left` | `null \| number \| AnimatedNode \| auto \| ${number}%` | No | `-` | - |
|
|
91
91
|
| `lineHeight` | `inherit \| LineHeight` | No | `-` | - |
|
|
92
92
|
| `margin` | `0 \| -1 \| -2 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1.5` | No | `-` | - |
|
|
93
93
|
| `marginBottom` | `0 \| -1 \| -2 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1.5` | No | `-` | - |
|
|
@@ -96,10 +96,10 @@ import { Divider } from '@coinbase/cds-mobile/layout/Divider'
|
|
|
96
96
|
| `marginTop` | `0 \| -1 \| -2 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1.5` | No | `-` | - |
|
|
97
97
|
| `marginX` | `0 \| -1 \| -2 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1.5` | No | `-` | - |
|
|
98
98
|
| `marginY` | `0 \| -1 \| -2 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1.5` | No | `-` | - |
|
|
99
|
-
| `maxHeight` | `null \| number \|
|
|
100
|
-
| `maxWidth` | `null \| number \|
|
|
101
|
-
| `minHeight` | `null \| number \|
|
|
102
|
-
| `minWidth` | `null \| number \|
|
|
99
|
+
| `maxHeight` | `null \| number \| AnimatedNode \| auto \| ${number}%` | No | `-` | - |
|
|
100
|
+
| `maxWidth` | `null \| number \| AnimatedNode \| auto \| ${number}%` | No | `-` | - |
|
|
101
|
+
| `minHeight` | `null \| number \| AnimatedNode \| auto \| ${number}%` | No | `-` | - |
|
|
102
|
+
| `minWidth` | `null \| number \| AnimatedNode \| auto \| ${number}%` | No | `-` | - |
|
|
103
103
|
| `onPointerCancel` | `((event: PointerEvent) => void)` | No | `-` | - |
|
|
104
104
|
| `onPointerCancelCapture` | `((event: PointerEvent) => void)` | No | `-` | - |
|
|
105
105
|
| `onPointerDown` | `((event: PointerEvent) => void)` | No | `-` | - |
|
|
@@ -123,7 +123,7 @@ import { Divider } from '@coinbase/cds-mobile/layout/Divider'
|
|
|
123
123
|
| `paddingY` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
|
|
124
124
|
| `pin` | `top \| bottom \| left \| right \| all` | No | `-` | Direction in which to absolutely pin the box. |
|
|
125
125
|
| `position` | `absolute \| relative \| static` | No | `-` | - |
|
|
126
|
-
| `right` | `null \| number \|
|
|
126
|
+
| `right` | `null \| number \| AnimatedNode \| auto \| ${number}%` | No | `-` | - |
|
|
127
127
|
| `rowGap` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
|
|
128
128
|
| `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 | `-` | - |
|
|
129
129
|
| `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. |
|
|
@@ -131,10 +131,10 @@ import { Divider } from '@coinbase/cds-mobile/layout/Divider'
|
|
|
131
131
|
| `textDecorationLine` | `none \| underline \| line-through \| underline line-through` | No | `-` | - |
|
|
132
132
|
| `textDecorationStyle` | `solid \| dotted \| dashed \| double` | No | `-` | - |
|
|
133
133
|
| `textTransform` | `none \| capitalize \| uppercase \| lowercase` | No | `-` | - |
|
|
134
|
-
| `top` | `null \| number \|
|
|
134
|
+
| `top` | `null \| number \| AnimatedNode \| auto \| ${number}%` | No | `-` | - |
|
|
135
135
|
| `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 | `-` | - |
|
|
136
|
-
| `userSelect` | `
|
|
137
|
-
| `width` | `null \| number \|
|
|
136
|
+
| `userSelect` | `none \| auto \| text \| contain \| all` | No | `-` | - |
|
|
137
|
+
| `width` | `null \| number \| AnimatedNode \| auto \| ${number}%` | No | `-` | - |
|
|
138
138
|
| `zIndex` | `number` | No | `-` | - |
|
|
139
139
|
|
|
140
140
|
|