@coinbase/cds-mcp-server 8.21.8 → 8.22.2

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

@@ -1,6 +1,6 @@
 # Point
 
-Visual markers that highlight specific data values on a chart. Points can be customized with different colors, sizes, and interactivity.
+Visual markers that highlight specific data values on a chart. Points can be customized with different colors, sizes, and labels.
 
 ## Import
 
@@ -14,29 +14,70 @@ import { Point } from '@coinbase/cds-mobile-visualization'
 
 Points are visual markers that highlight specific data values on a chart. They can be used to emphasize important data points, show discrete values, or provide interactive elements.
 
+You can add points using `points` on Line or [LineChart](/components/graphs/LineChart).
+
 ```jsx
 <LineChart
   enableScrubbing
-  height={{ base: 150, tablet: 200, desktop: 250 }}
+  showArea
+  showYAxis
+  height={200}
+  points
   series={[
     {
       id: 'prices',
       data: [10, 22, 29, 45, 98, 45, 22, 52, 21, 4, 68, 20, 21, 58],
     },
   ]}
-  curve="monotone"
-  showYAxis
-  showArea
+  xAxis={{
+    /* This prevents points close to the right edge from awkward cutoff when scrubbing */
+    range: ({ min, max }) => ({ min, max: max - 8 }),
+  }}
   yAxis={{
     showGrid: true,
   }}
-  renderPoints={() => true}
 >
   <Scrubber />
 </LineChart>
 ```
 
-### Conditional Points
+You can also add Points directly to a chart.
+
+```jsx
+function MyChart() {
+  const prices = [10, 22, 29, 45, 98, 45, 22, 52, 21, 4, 68, 20, 21, 58];
+
+  return (
+    <CartesianChart
+      height={200}
+      series={[
+        {
+          id: 'prices',
+          data: prices,
+        },
+      ]}
+      inset={{
+        // Overriding the right offset gives us more space to place this
+        right: 32,
+      }}
+    >
+      <YAxis showGrid position="left" tickLabelFormatter={(value) => `$${value}`} />
+      {prices.map((price, index) => (
+        <Point
+          seriesId="prices"
+          key={index}
+          dataX={index}
+          dataY={price}
+          label={`$${price}`}
+          labelPosition="right"
+        />
+      ))}
+    </CartesianChart>
+  );
+}
+```
+
+#### Conditional
 
 You can conditionally render points to highlight specific values in your data, such as maximum/minimum values or outliers.
 
@@ -56,102 +97,46 @@ function AssetPriceWithMinMax() {
 
   return (
     <LineChart
-      series={[
-        {
-          id: 'btc',
-          data: data,
-          color: assets.btc.color,
-        },
-      ]}
       showArea
       areaType="dotted"
-      height={{ base: 150, tablet: 200, desktop: 250 }}
-      style={{ outlineColor: assets.btc.color }}
-      renderPoints={({ dataX, dataY }) => {
+      height={200}
+      points={({ dataX, dataY }: PointBaseProps) => {
         const isMin = dataY === minPrice;
         const isMax = dataY === maxPrice;
 
         if (isMin) {
-          return { label: formatPrice(dataY), labelProps: {  dy: 6, verticalAlignment: 'top' } };
+          return { label: formatPrice(dataY), labelPosition: 'bottom' };
         }
 
         if (isMax) {
-          return { label: formatPrice(dataY), labelProps: { dy: -6, verticalAlignment: 'bottom' } };
+          return { label: formatPrice(dataY), labelPosition: 'top' };
         }
       }}
+      series={[
+        {
+          id: 'btc',
+          data: data,
+          color: assets.btc.color,
+        },
+      ]}
     />
   );
 };
 ```
 
-### Interactive Points
-
-Points can be made interactive by adding click handlers, allowing users to explore data in more detail.
-
-```jsx
-<LineChart
-  height={{ base: 150, tablet: 200, desktop: 250 }}
-  series={[
-    {
-      id: 'sales',
-      data: [120, 132, 101, 134, 90, 230, 210, 120, 180, 190, 210, 176],
-    },
-  ]}
-  curve="monotone"
-  showYAxis
-  showArea
-  yAxis={{
-    showGrid: true,
-    label: 'Sales (units)',
-  }}
-  renderPoints={({ dataX, dataY }) => {
-    const months = [
-      'Jan',
-      'Feb',
-      'Mar',
-      'Apr',
-      'May',
-      'Jun',
-      'Jul',
-      'Aug',
-      'Sep',
-      'Oct',
-      'Nov',
-      'Dec',
-    ];
-    return {
-      radius: 4,
-      onClick: () => alert(`${months[dataX]}: ${dataY} units sold`),
-      accessibilityLabel: `${months[dataX]} sales: ${dataY} units`,
-    };
-  }}
-/>
-```
-
-### Customization
+### Styling
 
-Points support extensive customization through various properties including colors, sizes, animations, and labels.
+Points support customization through various properties including colors, sizes, and labels.
 
 ```jsx
 function CustomizedPoints() {
   const theme = useTheme();
   return (
     <LineChart
-      height={{ base: 150, tablet: 200, desktop: 250 }}
-      series={[
-        {
-          id: 'performance',
-          data: [65, 70, 72, 85, 88, 92, 78, 82, 90, 95, 91, 94],
-        },
-      ]}
-      curve="monotone"
-      showYAxis
       showArea
-      yAxis={{
-        showGrid: true,
-        label: 'Performance Score',
-      }}
-      renderPoints={({ dataX, dataY }) => {
+      showYAxis
+      height={200}
+      points={({ dataX, dataY }) => {
         const isHighPerformance = dataY >= 90;
         const isLowPerformance = dataY < 75;
 
@@ -165,40 +150,160 @@ function CustomizedPoints() {
           strokeWidth: 2,
           stroke: theme.color.bg,
           label: isHighPerformance || isLowPerformance ? `${dataY}%` : undefined,
-          labelProps: {
-            verticalAlignment: isHighPerformance ? 'bottom' : 'top',
-            dy: isHighPerformance ? -10 : 10,
-            color: isHighPerformance
-              ? theme.color.fgPositive
-              : isLowPerformance
-                ? theme.color.fgNegative
-                : undefined,
-          },
+          labelPosition: isHighPerformance ? 'top' : 'bottom',
         };
       }}
+      series={[
+        {
+          id: 'performance',
+          data: [65, 70, 72, 85, 88, 92, 78, 82, 90, 95, 91, 94],
+        },
+      ]}
+      yAxis={{
+        showGrid: true,
+        label: 'Performance Score',
+      }}
     />
   );
 }
 ```
 
+#### Labels
+
+You can use `labelPosition`, `labelOffset`, and `labelFont` to adjust Point's label.
+
+```jsx
+function Scatterplot() {
+  const dataPoints = [
+    { x: 20, y: 30, label: 'A' },
+    { x: 40, y: 65, label: 'B' },
+    { x: 60, y: 45, label: 'C' },
+    { x: 75, y: 80, label: 'D' },
+  ];
+
+  return (
+    <CartesianChart
+      height={250}
+      xAxis={{
+        domain: { min: 0, max: 100 },
+      }}
+      yAxis={{
+        domain: { min: 0, max: 100 },
+      }}
+    >
+      <XAxis showLine showTickMarks showGrid />
+      <YAxis position="left" showLine showTickMarks showGrid />
+      {dataPoints.map((point, index) => (
+        <Point
+          key={index}
+          dataX={point.x}
+          dataY={point.y}
+          label={point.label}
+          labelPosition="top"
+          labelOffset={6}
+          labelFont="title3"
+        />
+      ))}
+    </CartesianChart>
+  );
+}
+```
+
+#### Custom Label Position
+
+You can also use `LabelComponent` to create custom label components.
+
+```jsx
+function ScatterplotWithCustomLabels() {
+  const theme = useTheme();
+  const dataPoints = [
+    { x: 12, y: 34, label: 'A', color: theme.color.fgAccent },
+    { x: 28, y: 67, label: 'B', color: theme.color.fgAccent },
+    { x: 45, y: 23, label: 'C', color: theme.color.fgAccent },
+    { x: 67, y: 89, label: 'D', color: theme.color.bgPositive },
+    { x: 82, y: 76, label: 'E', color: theme.color.bgPositive },
+    { x: 34, y: 91, label: 'F', color: theme.color.bgPositive },
+    { x: 56, y: 45, label: 'G', color: theme.color.bgPositive },
+    { x: 19, y: 12, label: 'H', color: theme.color.fgWarning },
+    { x: 73, y: 28, label: 'I', color: theme.color.fgWarning },
+    { x: 91, y: 54, label: 'J', color: theme.color.fgWarning },
+    { x: 15, y: 58, label: 'K', color: theme.color.fgPrimary },
+    { x: 39, y: 72, label: 'L', color: theme.color.fgPrimary },
+    { x: 88, y: 15, label: 'M', color: theme.color.fgPrimary },
+    { x: 52, y: 82, label: 'N', color: theme.color.fgPrimary },
+  ];
+
+  // Calculate domain based on data
+  const xValues = dataPoints.map((p) => p.x);
+  const yValues = dataPoints.map((p) => p.y);
+  const xMin = Math.min(...xValues);
+  const xMax = Math.max(...xValues);
+  const yMin = Math.min(...yValues);
+  const yMax = Math.max(...yValues);
+
+  // Custom label component that places labels to the top-right
+  const TopRightPointLabel = ({ x, y, offset = 0, children }) => {
+    return (
+      <ChartText
+        horizontalAlignment="left"
+        verticalAlignment="bottom"
+        x={x + offset}
+        y={y - offset}
+      >
+        {children}
+      </ChartText>
+    );
+  };
+
+  return (
+    <CartesianChart
+      height={300}
+      xAxis={{
+        domain: { min: xMin, max: xMax },
+        domainLimit: 'nice',
+      }}
+      yAxis={{
+        domain: { min: yMin, max: yMax },
+        domainLimit: 'nice',
+      }}
+    >
+      <XAxis showLine showTickMarks showGrid />
+      <YAxis position="left" showLine showTickMarks showGrid />
+      {dataPoints.map((point, index) => (
+        <Point
+          key={index}
+          dataX={point.x}
+          dataY={point.y}
+          label={point.label}
+          labelOffset={8}
+          fill={point.color}
+          radius={5}
+          LabelComponent={TopRightPointLabel}
+        />
+      ))}
+    </CartesianChart>
+  );
+}
+```
+
 ## Props
 
 | Prop | Type | Required | Default | Description |
 | --- | --- | --- | --- | --- |
 | `dataX` | `number` | Yes | `-` | X coordinate in data space (not pixel coordinates). |
 | `dataY` | `number` | Yes | `-` | Y coordinate in data space (not pixel coordinates). |
-| `accessibilityLabel` | `string` | No | `-` | Accessibility label for screen readers to describe the point. If not provided, a default label will be generated using the data coordinates. |
-| `fill` | `string` | No | `-` | The fill color of the point. |
-| `label` | `null \| string \| number \| ReactElement<TSpanProps, TSpan> \| ReactElement<TextPathProps, TextPath> \| ValidChartTextChildElements[]` | No | `-` | Simple text label to display at the point position. If provided, a ChartText will be automatically rendered. |
-| `labelProps` | `Omit<ChartTextProps, children \| x \| y>` | No | `-` | Configuration for the automatically rendered label. Only used when label prop is provided. |
-| `onPress` | `((point: { x: number; y: number; dataX: number; dataY: number; }) => void)` | No | `-` | Handler for when the point is clicked. |
-| `onScrubberEnter` | `((point: { x: number; y: number; }) => void)` | No | `-` | Handler for when the scrubber enters this point. |
+| `LabelComponent` | `ComponentClass<PointLabelProps, any> \| FunctionComponent<PointLabelProps>` | No | `DefaultPointLabel` | Custom component to render the label. |
+| `animate` | `boolean` | No | `-` | When set, overrides the charts animation setting for this specific point. |
+| `fill` | `string` | No | `theme.color.fgPrimary` | The fill color of the point. |
+| `label` | `string \| SkParagraph \| { value: string \| SkParagraph; }` | No | `-` | Simple text label to display at the point position. If provided, a label component will be automatically rendered. |
+| `labelFont` | `display1 \| display2 \| display3 \| title1 \| title2 \| title3 \| title4 \| headline \| body \| label1 \| label2 \| caption \| legal` | No | `-` | Font style for the label text. |
+| `labelOffset` | `number` | No | `2 * radius` | Distance in pixels to offset the label from the point. |
+| `labelPosition` | `top \| bottom \| left \| right \| center` | No | `'center'` | Position of the label relative to the point. |
 | `opacity` | `number` | No | `-` | Opacity of the point. |
-| `pixelCoordinates` | `{ x: number; y: number; }` | No | `-` | Optional pixel coordinates to use instead of calculating from dataX/dataY. Useful for performance when coordinates are already calculated. |
-| `radius` | `number` | No | `4` | Radius of the point. |
+| `radius` | `number` | No | `5` | Radius of the point. |
 | `stroke` | `string` | No | `theme.color.bg` | Color of the outer stroke around the point. |
 | `strokeWidth` | `number` | No | `2` | Outer stroke width of the point. Set to  0 to remove the stroke. |
-| `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 |
-| `yAxisId` | `string` | No | `-` | Optional Y-axis id to specify which axis to plot along. Defaults to the first y-axis |
+| `transition` | `{ type: timing; } & TimingConfig \| { type: spring; } & { stiffness?: number \| undefined; overshootClamping?: boolean \| undefined; restDisplacementThreshold?: number \| undefined; restSpeedThreshold?: number \| undefined; velocity?: number \| undefined; reduceMotion?: ReduceMotion \| undefined; } & { mass?: number \| undefined; damping?: number \| undefined; duration?: undefined; dampingRatio?: undefined; clamp?: undefined; } \| { type: spring; } & { stiffness?: number \| undefined; overshootClamping?: boolean \| undefined; restDisplacementThreshold?: number \| undefined; restSpeedThreshold?: number \| undefined; velocity?: number \| undefined; reduceMotion?: ReduceMotion \| undefined; } & { mass?: undefined; damping?: undefined; duration?: number \| undefined; dampingRatio?: number \| undefined; clamp?: { min?: number \| undefined; max?: number \| undefined; } \| undefined; }` | No | `-` | Transition configuration for point animations. Defines how the point transitions when position or color changes. |
+| `yAxisId` | `string` | No | `first y-axis defined in chart props.` | Optional Y-axis id to specify which axis to plot along. |
 
 

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

@@ -109,8 +109,8 @@ On web, all [ARIA attributes](https://developer.mozilla.org/en-US/docs/Web/Acces
 | `cancelable` | `boolean \| null` | No | `-` | Whether a press gesture can be interrupted by a parent gesture such as a scroll event. Defaults to true. |
 | `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. |
+| `columnGap` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
+| `contentStyle` | `null \| false \| ViewStyle \| RegisteredStyle<ViewStyle> \| RecursiveArray<ViewStyle \| Falsy \| 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. |
 | `delayHoverIn` | `number \| null` | No | `-` | Duration to wait after hover in before calling onHoverIn. |
@@ -130,7 +130,7 @@ On web, all [ARIA attributes](https://developer.mozilla.org/en-US/docs/Web/Acces
 | `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 | `-` | - |
+| `gap` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
 | `height` | `string \| number` | No | `-` | - |
 | `hitSlop` | `number \| Insets \| null` | No | `-` | Additional distance outside of this view in which a press is detected. |
 | `justifyContent` | `flex-start \| flex-end \| center \| space-between \| space-around \| space-evenly` | No | `-` | - |
@@ -138,13 +138,13 @@ On web, all [ARIA attributes](https://developer.mozilla.org/en-US/docs/Web/Acces
 | `left` | `string \| number` | No | `-` | - |
 | `lineHeight` | `inherit \| LineHeight` | No | `-` | - |
 | `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. |
-| `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 | `-` | - |
+| `margin` | `0 \| -1 \| -2 \| -0.25 \| -0.5 \| -0.75 \| -1.5 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10` | No | `-` | - |
+| `marginBottom` | `0 \| -1 \| -2 \| -0.25 \| -0.5 \| -0.75 \| -1.5 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10` | No | `-` | - |
+| `marginEnd` | `0 \| -1 \| -2 \| -0.25 \| -0.5 \| -0.75 \| -1.5 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10` | No | `-` | - |
+| `marginStart` | `0 \| -1 \| -2 \| -0.25 \| -0.5 \| -0.75 \| -1.5 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10` | No | `-` | - |
+| `marginTop` | `0 \| -1 \| -2 \| -0.25 \| -0.5 \| -0.75 \| -1.5 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10` | No | `-` | - |
+| `marginX` | `0 \| -1 \| -2 \| -0.25 \| -0.5 \| -0.75 \| -1.5 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10` | No | `-` | - |
+| `marginY` | `0 \| -1 \| -2 \| -0.25 \| -0.5 \| -0.75 \| -1.5 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10` | No | `-` | - |
 | `maxHeight` | `string \| number` | No | `-` | - |
 | `maxWidth` | `string \| number` | No | `-` | - |
 | `minHeight` | `string \| number` | No | `-` | - |
@@ -177,19 +177,19 @@ On web, all [ARIA attributes](https://developer.mozilla.org/en-US/docs/Web/Acces
 | `onTouchStart` | `((event: GestureResponderEvent) => void)` | No | `-` | - |
 | `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 | `-` | - |
+| `padding` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
+| `paddingBottom` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
+| `paddingEnd` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
+| `paddingStart` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
+| `paddingTop` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
+| `paddingX` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
+| `paddingY` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
 | `pin` | `top \| bottom \| left \| right \| all` | No | `-` | Direction in which to absolutely pin the box. |
-| `position` | `absolute \| relative \| static \| fixed \| sticky` | No | `-` | - |
+| `position` | `static \| relative \| fixed \| absolute \| sticky` | No | `-` | - |
 | `pressRetentionOffset` | `number \| Insets \| null` | No | `-` | Additional distance outside of this view in which a touch is considered a press before onPressOut is triggered. |
 | `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 | `-` | - |
+| `rowGap` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
 | `style` | `StyleProp<ViewStyle> \| ((state: PressableStateCallbackType) => StyleProp<ViewStyle>)` | No | `-` | Either view styles or a function that receives a boolean reflecting whether the component is currently pressed and returns view styles. |
 | `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. |
 | `testOnly_pressed` | `boolean \| null` | No | `-` | Used only for documentation or testing (e.g. snapshot testing). |

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

@@ -121,7 +121,7 @@ function Example() {
 | `onAnimationEnd` | `(() => void)` | No | `-` | Callback fired when the progress animation ends. |
 | `onAnimationStart` | `(() => void)` | No | `-` | Callback fired when the progress animation starts. |
 | `ref` | `((instance: View \| null) => void) \| RefObject<View> \| null` | No | `-` | - |
-| `style` | `null \| false \| ViewStyle \| RegisteredStyle<ViewStyle> \| RecursiveArray<Falsy \| ViewStyle \| RegisteredStyle<ViewStyle>>` | No | `-` | Custom styles for the progress bar root. |
+| `style` | `null \| false \| ViewStyle \| RegisteredStyle<ViewStyle> \| RecursiveArray<ViewStyle \| Falsy \| RegisteredStyle<ViewStyle>>` | No | `-` | Custom styles for the progress bar root. |
 | `styles` | `{ root?: StyleProp<ViewStyle>; progress?: StyleProp<ViewStyle>; }` | No | `-` | Custom styles for the progress bar. |
 | `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 |
 | `weight` | `normal \| heavy \| thin \| semiheavy` | No | `normal` | Toggle used to change thickness of progress visualization |

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

@@ -153,7 +153,7 @@ You can customize the appearance of the progress bar and labels using the `style
 | `endLabel` | `number \| { value: number; render: (num: number, disabled?: boolean \| undefined) => ReactNode; }` | No | `-` | Label that is pinned to the end of the container. If a number is used then it will format it as a percentage. |
 | `labelPlacement` | `above \| below \| beside` | No | `beside` | Position of label relative to the bar |
 | `startLabel` | `number \| { value: number; render: (num: number, disabled?: boolean \| undefined) => ReactNode; }` | No | `-` | Label that is pinned to the start of the container. If a number is used then it will format it as a percentage. |
-| `style` | `null \| false \| ViewStyle \| RegisteredStyle<ViewStyle> \| RecursiveArray<Falsy \| ViewStyle \| RegisteredStyle<ViewStyle>>` | No | `-` | Custom styles for the progress bar with fixed labels root. |
+| `style` | `null \| false \| ViewStyle \| RegisteredStyle<ViewStyle> \| RecursiveArray<ViewStyle \| Falsy \| RegisteredStyle<ViewStyle>>` | No | `-` | Custom styles for the progress bar with fixed labels root. |
 | `styles` | `{ root?: StyleProp<ViewStyle>; labelContainer?: StyleProp<ViewStyle>; startLabel?: StyleProp<TextStyle>; endLabel?: StyleProp<TextStyle>; }` | No | `-` | Custom styles for the progress bar with fixed labels. |
 | `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 |
 

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

@@ -130,7 +130,7 @@ You can customize the appearance of the progress bar and float label using the `
 | `progress` | `number` | Yes | `-` | Number between 0-1 representing the progress percentage |
 | `disabled` | `boolean` | No | `false` | Toggle used to show a disabled progress visualization |
 | `labelPlacement` | `above \| below` | No | `above` | Position of label relative to the bar |
-| `style` | `null \| false \| ViewStyle \| RegisteredStyle<ViewStyle> \| RecursiveArray<Falsy \| ViewStyle \| RegisteredStyle<ViewStyle>>` | No | `-` | Custom styles for the progress bar with float label root. |
+| `style` | `null \| false \| ViewStyle \| RegisteredStyle<ViewStyle> \| RecursiveArray<ViewStyle \| Falsy \| RegisteredStyle<ViewStyle>>` | No | `-` | Custom styles for the progress bar with float label root. |
 | `styles` | `{ root?: StyleProp<ViewStyle>; labelContainer?: StyleProp<ViewStyle>; label?: StyleProp<TextStyle>; }` | No | `-` | Custom styles for the progress bar with float label. |
 | `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 |
 

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

@@ -228,7 +228,7 @@ function Example() {
 | `onAnimationStart` | `(() => void)` | No | `-` | Callback fired when the progress animation starts. |
 | `ref` | `((instance: View \| null) => void) \| RefObject<View> \| null` | No | `-` | - |
 | `size` | `number` | No | `-` | Optional size in px for the visualization. This is useful if the visualization is used in an HStack. If this is omitted the visualization will fill the parent width or height. Since its a circular visualization it will fill the smaller of the parent width or height |
-| `style` | `null \| false \| ViewStyle \| RegisteredStyle<ViewStyle> \| RecursiveArray<Falsy \| ViewStyle \| RegisteredStyle<ViewStyle>>` | No | `-` | Custom styles for the progress circle root. |
+| `style` | `null \| false \| ViewStyle \| RegisteredStyle<ViewStyle> \| RecursiveArray<ViewStyle \| Falsy \| RegisteredStyle<ViewStyle>>` | No | `-` | Custom styles for the progress circle root. |
 | `styles` | `{ root?: StyleProp<ViewStyle>; svgContainer?: StyleProp<ViewStyle>; svg?: StyleProp<ViewStyle>; textContainer?: StyleProp<ViewStyle>; progress?: Partial<CircleProps>; circle?: Partial<CircleProps> \| undefined; } \| undefined` | No | `-` | Custom styles for the progress circle. |
 | `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 |
 | `weight` | `normal \| heavy \| thin \| semiheavy` | No | `normal` | Toggle used to change thickness of progress visualization |

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

@@ -113,8 +113,8 @@ function CustomRadioCellExample() {
 | `bottom` | `string \| number` | No | `-` | - |
 | `checked` | `boolean` | No | `-` | Set the control to selected/on. |
 | `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. |
+| `columnGap` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
+| `contentStyle` | `null \| false \| ViewStyle \| RegisteredStyle<ViewStyle> \| RecursiveArray<ViewStyle \| Falsy \| RegisteredStyle<ViewStyle>>` | No | `-` | Apply animated styles to the inner container. |
 | `controlColor` | `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 | `bgPrimary` | Sets the checked/active color of the control. |
 | `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. |
@@ -133,20 +133,20 @@ function CustomRadioCellExample() {
 | `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 | `-` | - |
+| `gap` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
 | `height` | `string \| number` | No | `-` | - |
 | `indeterminate` | `boolean` | No | `-` | Enable indeterminate state. Useful when you want to indicate that sub-items of a control are partially filled. |
 | `justifyContent` | `flex-start \| flex-end \| center \| space-between \| space-around \| space-evenly` | No | `-` | - |
 | `left` | `string \| number` | No | `-` | - |
 | `lineHeight` | `inherit \| LineHeight` | No | `-` | - |
 | `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. |
-| `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 | `-` | - |
+| `margin` | `0 \| -1 \| -2 \| -0.25 \| -0.5 \| -0.75 \| -1.5 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10` | No | `-` | - |
+| `marginBottom` | `0 \| -1 \| -2 \| -0.25 \| -0.5 \| -0.75 \| -1.5 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10` | No | `-` | - |
+| `marginEnd` | `0 \| -1 \| -2 \| -0.25 \| -0.5 \| -0.75 \| -1.5 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10` | No | `-` | - |
+| `marginStart` | `0 \| -1 \| -2 \| -0.25 \| -0.5 \| -0.75 \| -1.5 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10` | No | `-` | - |
+| `marginTop` | `0 \| -1 \| -2 \| -0.25 \| -0.5 \| -0.75 \| -1.5 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10` | No | `-` | - |
+| `marginX` | `0 \| -1 \| -2 \| -0.25 \| -0.5 \| -0.75 \| -1.5 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10` | No | `-` | - |
+| `marginY` | `0 \| -1 \| -2 \| -0.25 \| -0.5 \| -0.75 \| -1.5 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10` | No | `-` | - |
 | `maxHeight` | `string \| number` | No | `-` | - |
 | `maxWidth` | `string \| number` | No | `-` | - |
 | `minHeight` | `string \| number` | No | `-` | - |
@@ -167,21 +167,21 @@ function CustomRadioCellExample() {
 | `onPress` | `((event: GestureResponderEvent) => void) \| null` | No | `-` | Called when a single tap gesture is detected. |
 | `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 | `-` | - |
+| `padding` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
+| `paddingBottom` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
+| `paddingEnd` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
+| `paddingStart` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
+| `paddingTop` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
+| `paddingX` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
+| `paddingY` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
 | `pin` | `top \| bottom \| left \| right \| all` | No | `-` | Direction in which to absolutely pin the box. |
-| `position` | `absolute \| relative \| static \| fixed \| sticky` | No | `-` | - |
+| `position` | `static \| relative \| fixed \| absolute \| sticky` | No | `-` | - |
 | `pressedBorderColor` | `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 | `-` | - |
 | `pressedBorderWidth` | `0 \| 100 \| 200 \| 300 \| 400 \| 500` | No | `-` | - |
 | `readOnly` | `boolean` | No | `-` | Set the control to ready-only. Similar effect as disabled. |
 | `ref` | `null \| (instance: View \| null) => void \| MutableRefObject<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 | `-` | - |
+| `rowGap` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
 | `styles` | `{ root?: StyleProp<ViewStyle>; radioContainer?: StyleProp<ViewStyle>; contentContainer?: StyleProp<ViewStyle>; title?: StyleProp<TextStyle>; description?: StyleProp<TextStyle>; }` | No | `-` | - |
 | `testID` | `string` | No | `-` | Used to locate this view in end-to-end tests. Used to locate this element in unit and end-to-end tests. |
 | `textAlign` | `left \| right \| auto \| center \| justify` | No | `-` | - |