@coinbase/cds-mcp-server 8.17.2 → 8.17.4

package/mcp-docs/mobile/components/SlideButton.txt

@@ -0,0 +1,330 @@
+# SlideButton
+
+A button that slides to confirm an action.
+
+## Import
+
+```tsx
+import { SlideButton } from '@coinbase/cds-mobile/buttons/SlideButton'
+```
+
+## Examples
+
+import useBaseUrl from '@docusaurus/useBaseUrl';
+import ThemedImage from '@theme/ThemedImage';
+
+### SlideButton
+
+Use the `onChange` prop to listen and make changes to the `checked` state.
+
+<ThemedImage
+  sources={{
+    light: useBaseUrl('/img/docs/slideButton/default.gif'),
+    dark: useBaseUrl('/img/docs/slideButton/default_dark.gif'),
+  }}
+  style={{
+    borderRadius: 'var(--borderRadius-400)',
+    border: '1.5px solid var(--color-bgLine)',
+  }}
+  alt="Slide button"
+/>
+
+```jsx
+function Example() {
+  const [checked, setChecked] = useState(false);
+
+  return (
+    <SlideButton
+      checked={checked}
+      onChange={setChecked}
+      onSlideComplete={() => console.log('Completed')}
+      uncheckedLabel="Swipe to confirm"
+      checkedLabel="Confirming..."
+    />
+  );
+}
+```
+
+### Negative SlideButton
+
+You can use the `variant` prop to change the color of the button.
+
+<ThemedImage
+  sources={{
+    light: useBaseUrl('/img/docs/slideButton/negative_variant.jpg'),
+    dark: useBaseUrl('/img/docs/slideButton/negative_variant_dark.jpg'),
+  }}
+  style={{
+    borderRadius: 'var(--borderRadius-400)',
+    border: '1.5px solid var(--color-bgLine)',
+  }}
+  alt="Negative variant slide button"
+/>
+
+```jsx
+function Example() {
+  const [checked, setChecked] = useState(false);
+
+  return (
+    <SlideButton
+      checked={checked}
+      onChange={setChecked}
+      onSlideComplete={() => console.log('Completed')}
+      uncheckedLabel="Swipe to confirm"
+      checkedLabel="Confirming..."
+      variant="negative"
+    />
+  );
+}
+```
+
+### Auto Complete on Threshold
+
+You can set the button to automatically complete when the slide reaches the threshold:
+
+```jsx
+function Example() {
+  const [checked, setChecked] = useState(false);
+
+  return (
+    <SlideButton
+      checked={checked}
+      onChange={setChecked}
+      onSlideComplete={() => console.log('Completed')}
+      uncheckedLabel="Swipe to confirm"
+      checkedLabel="Confirming..."
+      autoCompleteSlideOnThresholdMet
+    />
+  );
+}
+```
+
+### Custom Nodes on SlideButton
+
+You can also use SlideButton with custom nodes.
+
+<ThemedImage
+  sources={{
+    light: useBaseUrl('/img/docs/slideButton/custom_nodes.jpg'),
+    dark: useBaseUrl('/img/docs/slideButton/custom_nodes_dark.jpg'),
+  }}
+  style={{
+    borderRadius: 'var(--borderRadius-400)',
+    border: '1.5px solid var(--color-bgLine)',
+  }}
+  alt="Custom nodes on slide button"
+/>
+
+```jsx
+function Example() {
+  const [checked, setChecked] = useState(false);
+
+  return (
+    <SlideButton
+      checked={checked}
+      onChange={setChecked}
+      onSlideComplete={() => console.log('Completed')}
+      uncheckedLabel="Swipe to enable notifications"
+      checkedLabel="Enabling..."
+      startUncheckedNode={<Icon color="fgInverse" name="bellCheck" size="m" />}
+      endCheckedNode={<Icon color="fgInverse" name="bellInactive" size="m" />}
+    />
+  );
+}
+```
+
+### Custom Background and Handle Components
+
+You can customize the background and handle components of the SlideButton.
+
+<ThemedImage
+  sources={{
+    light: useBaseUrl('/img/docs/slideButton/custom_components.jpg'),
+    dark: useBaseUrl('/img/docs/slideButton/custom_components_dark.jpg'),
+  }}
+  style={{
+    borderRadius: 'var(--borderRadius-400)',
+    border: '1.5px solid var(--color-bgLine)',
+  }}
+  alt="Custom background and handle components"
+/>
+
+```jsx
+function Example() {
+  const [checked, setChecked] = useState(false);
+
+  const CustomHandle = ({ checked, ...props }: SlideButtonHandleProps) => (
+    <Pressable
+      {...props}
+      accessibilityLabel="Demo button"
+      accessibilityRole="button"
+      background={checked ? 'bgPositive' : 'bgNegative'}
+      borderRadius={300}
+      width="100%"
+    >
+      <HStack alignItems="center" height="100%" justifyContent="center" width="100%">
+        <HStack height="100%" pin="right" alignItems="center" padding={2}>
+          <TextLabel1>➡️</TextLabel1>
+        </HStack>
+      </HStack>
+    </Pressable>
+  );
+
+  const CustomBackground = ({ checked, ...props }: SlideButtonBackgroundProps) => (
+    <HStack
+      {...props}
+      bordered
+      alignItems="center"
+      background="bgSecondary"
+      borderColor={checked ? 'fgPositive' : 'fgNegative'}
+      borderRadius={300}
+      height="100%"
+      justifyContent="center"
+      width="100%"
+    >
+      <TextHeadline>Slide me</TextHeadline>
+    </HStack>
+  );
+
+  return (
+    <SlideButton
+      uncheckedLabel="Swipe to confirm"
+      checkedLabel="Confirming..."
+      checked={checked}
+      onChange={setChecked}
+      SlideButtonBackgroundComponent={CustomBackground}
+      SlideButtonHandleComponent={CustomHandle}
+      height={50}
+    />
+  );
+}
+```
+
+## Props
+
+| Prop | Type | Required | Default | Description |
+| --- | --- | --- | --- | --- |
+| `checked` | `boolean` | Yes | `-` | Control whether the button is in a checked state. |
+| `SlideButtonBackgroundComponent` | `SlideButtonBackgroundComponent` | No | `DefaultSlideButtonBackground` | Custom component to render as the container behind the sliding handle. |
+| `SlideButtonHandleComponent` | `SlideButtonHandleComponent` | No | `DefaultSlideButtonHandle` | Custom component to render as the sliding handle. |
+| `alignContent` | `flex-start \| flex-end \| center \| stretch \| space-between \| space-around \| space-evenly` | No | `-` | - |
+| `alignItems` | `flex-start \| flex-end \| center \| stretch \| baseline` | No | `-` | - |
+| `alignSelf` | `auto \| FlexAlignType` | No | `-` | - |
+| `aspectRatio` | `string \| number` | No | `-` | - |
+| `autoCompleteSlideOnThresholdMet` | `boolean` | No | `-` | If true, the slide button will automatically complete the slide when the threshold is met. If false, the user must release to complete the action. |
+| `background` | `currentColor \| fg \| fgMuted \| fgInverse \| fgPrimary \| fgWarning \| fgPositive \| fgNegative \| bg \| bgAlternate \| bgInverse \| bgOverlay \| bgElevation1 \| bgElevation2 \| bgPrimary \| bgPrimaryWash \| bgSecondary \| bgTertiary \| bgSecondaryWash \| bgNegative \| bgNegativeWash \| bgPositive \| bgPositiveWash \| bgWarning \| bgWarningWash \| bgLine \| bgLineHeavy \| bgLineInverse \| bgLinePrimary \| bgLinePrimarySubtle \| accentSubtleRed \| accentBoldRed \| accentSubtleGreen \| accentBoldGreen \| accentSubtleBlue \| accentBoldBlue \| accentSubtlePurple \| accentBoldPurple \| accentSubtleYellow \| accentBoldYellow \| accentSubtleGray \| accentBoldGray \| transparent` | No | `-` | Background color of the overlay (element being interacted with). |
+| `blendStyles` | `{ background?: string; pressedBackground?: string \| undefined; disabledBackground?: string \| undefined; borderColor?: string \| undefined; pressedBorderColor?: string \| undefined; disabledBorderColor?: string \| undefined; } \| undefined` | No | `-` | Custom color overrides for different interaction states. Base colors (background, borderColor) are used directly, while interaction state colors (pressed, disabled) are used as alternative base colors for blending calculations with blend strength and color scheme considerations. |
+| `block` | `boolean` | No | `-` | Set element to block and expand to 100% width. |
+| `borderBottomLeftRadius` | `0 \| 100 \| 200 \| 300 \| 400 \| 500 \| 600 \| 700 \| 800 \| 900 \| 1000` | No | `-` | - |
+| `borderBottomRightRadius` | `0 \| 100 \| 200 \| 300 \| 400 \| 500 \| 600 \| 700 \| 800 \| 900 \| 1000` | No | `-` | - |
+| `borderBottomWidth` | `0 \| 100 \| 200 \| 300 \| 400 \| 500` | No | `-` | - |
+| `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 | `-` | - |
+| `borderEndWidth` | `0 \| 100 \| 200 \| 300 \| 400 \| 500` | No | `-` | - |
+| `borderRadius` | `0 \| 100 \| 200 \| 300 \| 400 \| 500 \| 600 \| 700 \| 800 \| 900 \| 1000` | No | `-` | - |
+| `borderStartWidth` | `0 \| 100 \| 200 \| 300 \| 400 \| 500` | No | `-` | - |
+| `borderTopLeftRadius` | `0 \| 100 \| 200 \| 300 \| 400 \| 500 \| 600 \| 700 \| 800 \| 900 \| 1000` | No | `-` | - |
+| `borderTopRightRadius` | `0 \| 100 \| 200 \| 300 \| 400 \| 500 \| 600 \| 700 \| 800 \| 900 \| 1000` | No | `-` | - |
+| `borderTopWidth` | `0 \| 100 \| 200 \| 300 \| 400 \| 500` | No | `-` | - |
+| `borderWidth` | `0 \| 100 \| 200 \| 300 \| 400 \| 500` | No | `-` | - |
+| `bordered` | `boolean` | No | `-` | Add a border around all sides of the box. |
+| `borderedBottom` | `boolean` | No | `-` | Add a border to the bottom side of the box. |
+| `borderedEnd` | `boolean` | No | `-` | Add a border to the trailing side of the box. |
+| `borderedHorizontal` | `boolean` | No | `-` | Add a border to the leading and trailing sides of the box. |
+| `borderedStart` | `boolean` | No | `-` | Add a border to the leading side of the box. |
+| `borderedTop` | `boolean` | No | `-` | Add a border to the top side of the box. |
+| `borderedVertical` | `boolean` | No | `-` | Add a border to the top and bottom sides of the box. |
+| `bottom` | `string \| number` | No | `-` | - |
+| `checkThreshold` | `number` | No | `0.7` | Threshold (as a percentage from 0 to 1) at which a slide gesture will complete. A value of 0.7 means the user must slide 70% of the way across to trigger completion. |
+| `checkedLabel` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | Label or content shown when button is in checked state. |
+| `children` | `((string \| number \| boolean \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal) & (string \| number \| boolean \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal \| ((state: PressableStateCallbackType) => ReactNode))) \| null` | No | `-` | Either children or a render prop that receives a boolean reflecting whether the component is currently pressed. |
+| `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 | `-` | - |
+| `columnGap` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
+| `contentStyle` | `null \| false \| ViewStyle \| RegisteredStyle<ViewStyle> \| RecursiveArray<Falsy \| ViewStyle \| RegisteredStyle<ViewStyle>>` | No | `-` | Apply animated styles to the inner container. |
+| `dangerouslySetBackground` | `string` | No | `-` | - |
+| `debounceTime` | `number` | No | `500` | The amount of time to wait (in milliseconds) before invoking the debounced function. This prop is used in conjunction with the disableDebounce prop. The debounce function is configured to be invoked as soon as its called, but subsequent calls within the debounceTime period will be ignored. |
+| `disableDebounce` | `boolean` | No | `-` | React Native is historically trash at debouncing touch events. This can cause a lot of unwanted behavior such as double navigations where we push a screen onto the stack 2 times. Debouncing the event 500 miliseconds, but taking the leading event prevents this effect and the accidental double-tap. |
+| `disabled` | `boolean` | No | `-` | Is the element currently disabled. Whether the press behavior is disabled. Disables user interaction with the slide button. When true, prevents gesture events from firing. |
+| `display` | `flex \| none` | No | `-` | - |
+| `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. |
+| `endCheckedNode` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | Custom end node to render for the checked state of the handle, to replace the default loading indicator. |
+| `feedback` | `none \| light \| normal \| heavy` | No | `none` | Haptic feedback to trigger when being pressed. |
+| `flexBasis` | `string \| number` | No | `-` | - |
+| `flexDirection` | `row \| column \| row-reverse \| column-reverse` | No | `-` | - |
+| `flexGrow` | `number` | No | `-` | - |
+| `flexShrink` | `number` | No | `-` | - |
+| `flexWrap` | `wrap \| nowrap \| wrap-reverse` | No | `-` | - |
+| `font` | `inherit \| FontFamily` | No | `-` | - |
+| `fontFamily` | `inherit \| FontFamily` | No | `-` | - |
+| `fontSize` | `inherit \| FontSize` | No | `-` | - |
+| `fontWeight` | `inherit \| FontWeight` | No | `-` | - |
+| `gap` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
+| `height` | `number` | No | `-` | Height of the entire button component (background and handle). If you pass a custom SlideButtonBackgroundComponent or SlideButtonHandleComponent, this property will be applied to both. |
+| `justifyContent` | `flex-start \| flex-end \| center \| space-between \| space-around \| space-evenly` | No | `-` | - |
+| `key` | `Key \| null` | No | `-` | - |
+| `left` | `string \| number` | No | `-` | - |
+| `lineHeight` | `inherit \| LineHeight` | No | `-` | - |
+| `margin` | `0 \| -1 \| -2 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1.5` | No | `-` | - |
+| `marginBottom` | `0 \| -1 \| -2 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1.5` | No | `-` | - |
+| `marginEnd` | `0 \| -1 \| -2 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1.5` | No | `-` | - |
+| `marginStart` | `0 \| -1 \| -2 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1.5` | No | `-` | - |
+| `marginTop` | `0 \| -1 \| -2 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1.5` | No | `-` | - |
+| `marginX` | `0 \| -1 \| -2 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1.5` | No | `-` | - |
+| `marginY` | `0 \| -1 \| -2 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1.5` | No | `-` | - |
+| `maxHeight` | `string \| number` | No | `-` | - |
+| `maxWidth` | `string \| number` | No | `-` | - |
+| `minHeight` | `string \| number` | No | `-` | - |
+| `minWidth` | `string \| number` | No | `-` | - |
+| `noScaleOnPress` | `boolean` | No | `-` | Dont scale element on press. |
+| `onChange` | `((checked: boolean) => void)` | No | `-` | Callback function fired when slide button state changes. Will always be called after onSlideComplete and before onSlideEnd. |
+| `onPointerCancel` | `((event: PointerEvent) => void)` | No | `-` | - |
+| `onPointerCancelCapture` | `((event: PointerEvent) => void)` | No | `-` | - |
+| `onPointerDown` | `((event: PointerEvent) => void)` | No | `-` | - |
+| `onPointerDownCapture` | `((event: PointerEvent) => void)` | No | `-` | - |
+| `onPointerEnter` | `((event: PointerEvent) => void)` | No | `-` | - |
+| `onPointerEnterCapture` | `((event: PointerEvent) => void)` | No | `-` | - |
+| `onPointerLeave` | `((event: PointerEvent) => void)` | No | `-` | - |
+| `onPointerLeaveCapture` | `((event: PointerEvent) => void)` | No | `-` | - |
+| `onPointerMove` | `((event: PointerEvent) => void)` | No | `-` | - |
+| `onPointerMoveCapture` | `((event: PointerEvent) => void)` | No | `-` | - |
+| `onPointerUp` | `((event: PointerEvent) => void)` | No | `-` | - |
+| `onPointerUpCapture` | `((event: PointerEvent) => void)` | No | `-` | - |
+| `onPress` | `((event: GestureResponderEvent) => void) \| null` | No | `-` | Called when a single tap gesture is detected. |
+| `onPressIn` | `(((event: GestureResponderEvent) => void) & ((event: GestureResponderEvent) => void))` | No | `-` | Callback fired before onPress when button is pressed. Called when a touch is engaged before onPress. |
+| `onPressOut` | `(((event: GestureResponderEvent) => void) & ((event: GestureResponderEvent) => void))` | No | `-` | Callback fired before onPress when button is released. Called when a touch is released before onPress. |
+| `onSlideCancel` | `(() => void)` | No | `-` | Callback function fired when the slide gesture is cancelled. This occurs when a user slides less than the threshold required to complete the action. Will always be called before onSlideEnd. |
+| `onSlideComplete` | `(() => void)` | No | `-` | Callback function fired when the slide gesture ends successfully. This is called when the user has slid past the threshold to complete the action. Will always be called before onSlideEnd and after onChange. |
+| `onSlideEnd` | `(() => void)` | No | `-` | Callback function fired when the slide gesture ends. Will always be called last in the slide sequence. |
+| `onSlideStart` | `(() => void)` | No | `-` | Callback function fired when the slide gesture begins. |
+| `opacity` | `number \| AnimatedNode` | No | `-` | - |
+| `overflow` | `visible \| hidden \| scroll` | No | `-` | - |
+| `padding` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
+| `paddingBottom` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
+| `paddingEnd` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
+| `paddingStart` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
+| `paddingTop` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
+| `paddingX` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
+| `paddingY` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
+| `pin` | `top \| bottom \| left \| right \| all` | No | `-` | Direction in which to absolutely pin the box. |
+| `position` | `absolute \| relative \| static \| fixed \| sticky` | No | `-` | - |
+| `ref` | `((instance: View \| null) => void) \| RefObject<View> \| null` | No | `-` | - |
+| `right` | `string \| number` | No | `-` | - |
+| `rowGap` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
+| `startUncheckedNode` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | Custom start node to render for the unchecked state of the handle, to replace the default arrow icon. |
+| `styles` | `{ container?: StyleProp<ViewStyle>; background?: StyleProp<ViewStyle>; handle?: StyleProp<ViewStyle>; }` | No | `-` | Custom styles for the slide button. |
+| `testID` | `string` | No | `-` | Used to locate this element in unit and end-to-end tests. Used to locate this view in end-to-end tests. |
+| `textAlign` | `left \| right \| auto \| center \| justify` | No | `-` | - |
+| `textDecorationLine` | `none \| underline \| line-through \| underline line-through` | No | `-` | - |
+| `textDecorationStyle` | `solid \| dotted \| dashed \| double` | No | `-` | - |
+| `textTransform` | `none \| capitalize \| uppercase \| lowercase` | No | `-` | - |
+| `top` | `string \| number` | No | `-` | - |
+| `transform` | `string \| (({ scaleX: AnimatableNumericValue; } & { scaleY?: undefined; translateX?: undefined; translateY?: undefined; perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ scaleY: AnimatableNumericValue; } & { scaleX?: undefined; translateX?: undefined; translateY?: undefined; perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ translateX: AnimatableNumericValue \| ${number}%; } & { scaleX?: undefined; scaleY?: undefined; translateY?: undefined; perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ translateY: AnimatableNumericValue \| ${number}%; } & { scaleX?: undefined; scaleY?: undefined; translateX?: undefined; perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ perspective: AnimatableNumericValue; } & { scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ rotate: AnimatableStringValue; } & { scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; perspective?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ rotateX: AnimatableStringValue; } & { scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; perspective?: undefined; rotate?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ rotateY: AnimatableStringValue; } & { scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateZ?: undefined; scale?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ rotateZ: AnimatableStringValue; } & { scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; scale?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ scale: AnimatableNumericValue; } & { scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ skewX: AnimatableStringValue; } & { scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ skewY: AnimatableStringValue; } & { scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; skewX?: undefined; matrix?: undefined; }) \| ({ matrix: AnimatableNumericValue[]; } & { scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; skewX?: undefined; skewY?: undefined; }))[]` | No | `-` | - |
+| `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 |
+| `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 |
+| `uncheckedLabel` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | Label or content shown when button is in unchecked state. |
+| `userSelect` | `none \| auto \| contain \| text \| all` | No | `-` | - |
+| `variant` | `primary \| positive \| negative` | No | `'primary'` | Toggle design and visual variants of the slide button. |
+| `width` | `string \| number` | No | `-` | - |
+| `wrapperStyles` | `{ base?: StyleProp<ViewStyle>; pressed?: StyleProp<ViewStyle>; disabled?: StyleProp<ViewStyle>; }` | No | `-` | Apply styles to the outer container. |
+| `zIndex` | `number` | No | `-` | - |
+
+

package/mcp-docs/mobile/components/Spacer.txt

@@ -0,0 +1,83 @@
+# Spacer
+
+Creates space between elements.
+
+## Import
+
+```tsx
+import { Spacer } from '@coinbase/cds-mobile/layout/Spacer'
+```
+
+## Examples
+
+### Vertical Spacer
+
+```tsx
+<VStack>
+  <Box padding={2} background="bgAlternate" borderRadius="300">
+    Box 1
+  </Box>
+  <Spacer vertical={2} />
+  <Box padding={2} background="bgAlternate" borderRadius="300">
+    Box 2
+  </Box>
+  <Spacer vertical={4} />
+  <Box padding={2} background="bgAlternate" borderRadius="300">
+    Box 3
+  </Box>
+  <Spacer vertical={6} />
+  <Box padding={2} background="bgAlternate" borderRadius="300">
+    Box 4
+  </Box>
+</VStack>
+```
+
+### Horizontal Spacer
+
+```tsx
+<HStack>
+  <Box padding={2} background="bgAlternate" borderRadius="300">
+    Box 1
+  </Box>
+  <Spacer horizontal={2} />
+  <Box padding={2} background="bgAlternate" borderRadius="300">
+    Box 2
+  </Box>
+  <Spacer horizontal={4} />
+  <Box padding={2} background="bgAlternate" borderRadius="300">
+    Box 3
+  </Box>
+  <Spacer horizontal={6} />
+  <Box padding={2} background="bgAlternate" borderRadius="300">
+    Box 4
+  </Box>
+</HStack>
+```
+
+## Props
+
+| Prop | Type | Required | Default | Description |
+| --- | --- | --- | --- | --- |
+| `animated` | `boolean` | No | `-` | - |
+| `horizontal` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | Padding in the horizontal direction |
+| `maxHorizontal` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | Max padding in the horizontal direction |
+| `maxVertical` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | Max padding in the vertical direction |
+| `minHorizontal` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | Min padding in the horizontal direction |
+| `minVertical` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | Min padding in the vertical direction |
+| `onPointerCancel` | `((event: PointerEvent) => void)` | No | `-` | - |
+| `onPointerCancelCapture` | `((event: PointerEvent) => void)` | No | `-` | - |
+| `onPointerDown` | `((event: PointerEvent) => void)` | No | `-` | - |
+| `onPointerDownCapture` | `((event: PointerEvent) => void)` | No | `-` | - |
+| `onPointerEnter` | `((event: PointerEvent) => void)` | No | `-` | - |
+| `onPointerEnterCapture` | `((event: PointerEvent) => void)` | No | `-` | - |
+| `onPointerLeave` | `((event: PointerEvent) => void)` | No | `-` | - |
+| `onPointerLeaveCapture` | `((event: PointerEvent) => void)` | No | `-` | - |
+| `onPointerMove` | `((event: PointerEvent) => void)` | No | `-` | - |
+| `onPointerMoveCapture` | `((event: PointerEvent) => void)` | No | `-` | - |
+| `onPointerUp` | `((event: PointerEvent) => void)` | No | `-` | - |
+| `onPointerUpCapture` | `((event: PointerEvent) => void)` | No | `-` | - |
+| `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 | `-` | - |
+| `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. |
+| `vertical` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | Padding in the vertical direction |
+
+

package/mcp-docs/mobile/components/Sparkline.txt

@@ -0,0 +1,122 @@
+# Sparkline
+
+A small line chart component for displaying data trends.
+
+## Import
+
+```tsx
+import { Sparkline } from '@coinbase/cds-mobile-visualization'
+```
+
+## Examples
+
+### Basic Example
+
+The global warning banner is used to communicate important alerts or warnings to users across the entire platform, ensuring universal visibility and building trust.
+
+```jsx
+function Example() {
+  const dimensions = { width: 64, height: 20 };
+  const path = useSparklinePath({ ...dimensions, data: prices });
+  return (
+    <ListCell
+      media={<CellMedia type="image" source={assets.btc.imageUrl} title="BTC" />}
+      intermediary={<Sparkline {...dimensions} path={path} color={assets.btc.color} />}
+      title={assets.btc.name}
+      description={assets.btc.symbol}
+      detail={prices[0]}
+      subdetail="+4.55%"
+      variant="positive"
+      onClick={() => console.log('clicked')}
+    />
+  );
+}
+```
+
+### Dynamic path colors
+
+```jsx
+function Example() {
+  const dimensions = { width: 400, height: 200 };
+  const path = useSparklinePath({ ...dimensions, data: prices });
+  return (
+    <VStack gap={2}>
+      {assetColors.map((color) => (
+        <Sparkline key={color} {...dimensions} path={path} color={color} />
+      ))}
+    </VStack>
+  );
+}
+```
+
+### Dynamic background colors
+
+```jsx
+function Example() {
+  const dimensions = { width: 400, height: 200 };
+  const path = useSparklinePath({ ...dimensions, data: prices });
+  return (
+    <VStack gap={2}>
+      {assetColors.map((background) => (
+        <VStack key={background} dangerouslySetBackground={background}>
+          <Sparkline {...dimensions} path={path} background={background} color="auto" />
+        </VStack>
+      ))}
+    </VStack>
+  );
+}
+```
+
+### y axis scaling
+
+```jsx
+function Example() {
+  const yAxisScalingFactor = 0.2;
+  const dimensions = { width: 400, height: 200 };
+  const path = useSparklinePath({ ...dimensions, data: prices, yAxisScalingFactor });
+  return (
+    <VStack gap={2}>
+      <TextLabel1 as="p">Scale {yAxisScalingFactor}</TextLabel1>
+      <Sparkline {...dimensions} path={path} color="auto" yAxisScalingFactor={yAxisScalingFactor} />
+    </VStack>
+  );
+}
+```
+
+### Sparkline fill
+
+```jsx
+function Example() {
+  const dimensions = { width: 400, height: 200 };
+  const path = useSparklinePath({ ...dimensions, data: prices });
+  const area = useSparklineArea({ ...dimensions, data: prices });
+  return (
+    <VStack gap={2}>
+      {assetColors.map((color) => (
+        <Sparkline key={color} {...dimensions} path={path} color={color}>
+          <SparklineArea area={area} />
+        </Sparkline>
+      ))}
+    </VStack>
+  );
+}
+```
+
+## Props
+
+| Prop | Type | Required | Default | Description |
+| --- | --- | --- | --- | --- |
+| `color` | `string` | Yes | `-` | The color of the Sparkline graphs line. Accepts any raw color value (hex, rgba, hsl, etc) or auto. Using auto dynamically selects black or white for optimal accessibility. Does not work with CDS theme color names like fgPrimary or CSS variables. |
+| `height` | `number` | Yes | `-` | Height of the Sparkline |
+| `width` | `number` | Yes | `-` | Width of the Sparkline |
+| `background` | `string` | No | `-` | - |
+| `children` | `null \| false \| ReactElement<SparklineAreaBaseProps, string \| JSXElementConstructor<any>> \| OptionalElement<SparklineAreaBaseProps>[]` | No | `-` | an optional SparklineArea that can be used to fill in the Sparkline |
+| `fillType` | `dotted \| gradient \| gradientDotted` | No | `'dotted'` | Type of fill to use for the area |
+| `key` | `Key \| null` | No | `-` | - |
+| `path` | `string` | No | `-` | Svg path as string. CDS offers a useSparklinePath which is useful to generate this string. This is accessible via import { useSparklinePath } from @coinbase/cds-common/visualizations/useSparklinePath;. Alternatively, you can use product tailored tooling to generate the SVG path. This component only requires a valid path string is provided. |
+| `ref` | `((instance: Path \| null) => void) \| RefObject<Path \| null> \| null` | No | `-` | - |
+| `strokeType` | `solid \| gradient` | No | `'solid'` | Type of stroke to use for the line - gradient: Gradient colored stroke line - solid: Solid colored stroke line |
+| `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 |
+| `yAxisScalingFactor` | `number` | No | `-` | Scales the sparkline to show more or less variance. Use a number less than 1 for less variance and a number greater than 1 for more variance. If you use a number greater than 1 it may clip the boundaries of the sparkline. |
+
+

package/mcp-docs/mobile/components/SparklineGradient.txt

@@ -0,0 +1,106 @@
+# SparklineGradient
+
+A small line chart component with gradient fill below the line.
+
+## Import
+
+```tsx
+import { SparklineGradient } from '@coinbase/cds-mobile-visualization'
+```
+
+## Examples
+
+Expands upon the [Sparkline](/components/graphs/Sparkline) component to provide a gradient stroke. However, for dark mode we disable the gradient effect. These are typically used at a larger size for portfolio charts or on detail Asset pages.
+
+### Dynamic path colors
+
+```jsx
+function Example() {
+  const dimensions = { width: 400, height: 200 };
+  const path = useSparklinePath({ ...dimensions, data: prices });
+  return (
+    <VStack gap={2}>
+      {assetColors.map((color) => (
+        <SparklineGradient key={color} {...dimensions} path={path} color={color} />
+      ))}
+    </VStack>
+  );
+}
+```
+
+### Dynamic background colors
+
+```jsx
+function Example() {
+  const dimensions = { width: 400, height: 200 };
+  const path = useSparklinePath({ ...dimensions, data: prices });
+  return (
+    <VStack gap={2}>
+      {assetColors.map((background) => (
+        <VStack key={background} dangerouslySetBackground={background}>
+          <SparklineGradient {...dimensions} path={path} background={background} color="auto" />
+        </VStack>
+      ))}
+    </VStack>
+  );
+}
+```
+
+### y axis scaling
+
+```jsx
+function Example() {
+  const yAxisScalingFactor = 0.2;
+  const dimensions = { width: 400, height: 200 };
+  const path = useSparklinePath({ ...dimensions, data: prices, yAxisScalingFactor });
+  return (
+    <VStack gap={2}>
+      <TextLabel1 as="p">Scale {yAxisScalingFactor}</TextLabel1>
+      <SparklineGradient
+        {...dimensions}
+        path={path}
+        color="auto"
+        yAxisScalingFactor={yAxisScalingFactor}
+      />
+    </VStack>
+  );
+}
+```
+
+### Sparkline fill
+
+```jsx
+function Example() {
+  const dimensions = { width: 400, height: 200 };
+  const path = useSparklinePath({ ...dimensions, data: prices });
+  const area = useSparklineArea({ ...dimensions, data: prices });
+  return (
+    <VStack gap={2}>
+      {assetColors.map((color) => (
+        <SparklineGradient key={color} {...dimensions} path={path} color={color}>
+          <SparklineArea area={area} />
+        </SparklineGradient>
+      ))}
+    </VStack>
+  );
+}
+```
+
+## Props
+
+| Prop | Type | Required | Default | Description |
+| --- | --- | --- | --- | --- |
+| `color` | `string` | Yes | `-` | The color of the Sparkline graphs line. Accepts any raw color value (hex, rgba, hsl, etc) or auto. Using auto dynamically selects black or white for optimal accessibility. Does not work with CDS theme color names like fgPrimary or CSS variables. |
+| `height` | `number` | Yes | `-` | Height of the Sparkline |
+| `width` | `number` | Yes | `-` | Width of the Sparkline |
+| `background` | `string` | No | `-` | - |
+| `children` | `null \| false \| ReactElement<SparklineAreaBaseProps, string \| JSXElementConstructor<any>> \| OptionalElement<SparklineAreaBaseProps>[]` | No | `-` | an optional SparklineArea that can be used to fill in the Sparkline |
+| `fillType` | `dotted \| gradient \| gradientDotted` | No | `'dotted'` | Type of fill to use for the area |
+| `key` | `Key \| null` | No | `-` | - |
+| `path` | `string` | No | `-` | Svg path as string. CDS offers a useSparklinePath which is useful to generate this string. This is accessible via import { useSparklinePath } from @coinbase/cds-common/visualizations/useSparklinePath;. Alternatively, you can use product tailored tooling to generate the SVG path. This component only requires a valid path string is provided. |
+| `ref` | `((instance: Path \| null) => void) \| RefObject<Path \| null> \| null` | No | `-` | - |
+| `strokeType` | `solid \| gradient` | No | `'solid'` | Type of stroke to use for the line - gradient: Gradient colored stroke line - solid: Solid colored stroke line |
+| `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 |
+| `yAxisScalingFactor` | `number` | No | `-` | Scales the sparkline to show more or less variance. Use a number less than 1 for less variance and a number greater than 1 for more variance. If you use a number greater than 1 it may clip the boundaries of the sparkline. |
+
+