@coinbase/cds-mcp-server 8.35.0 → 8.36.0

package/CHANGELOG.md

@@ -8,6 +8,16 @@ All notable changes to this project will be documented in this file.
 
 <!-- template-start -->
 
+## 8.36.0 (1/6/2026 PST)
+
+#### 🚀 Updates
+
+- Update MCP Serer setup script to follow latest Claude Code and Cursor guidelines.
+
+## 8.35.1 ((1/5/2026, 03:28 PM PST))
+
+This is an artificial version bump with no new change.
+
 ## 8.35.0 ((1/5/2026, 10:03 AM PST))
 
 This is an artificial version bump with no new change.

package/esm/{cds.mdc → cds.md}

@@ -1,13 +1,7 @@
----
-description: 
-globs: *.tsx,*.jsx
-alwaysApply: false
----
-source: https://github.com/coinbase/cds/blob/master/packages/mcp-server/src/cds.mdc
-
 # CDS Component Priority Rules
 
 ## Component Usage Hierarchy
+
 - CDS is the primary design system for React and React Native in this project.
 - The JS package is `@coinbase/cds-web` for web React apps and `@coinbase/cds-mobile` for mobile React Native apps.
 - ALWAYS prioritize CDS components over ANY other UI components when a CDS equivalent exists. For React Native this includes React Native built-ins. For web this includes any HTML native elements.
@@ -15,11 +9,13 @@ source: https://github.com/coinbase/cds/blob/master/packages/mcp-server/src/cds.
 - ALWAYS use CDS components even if other local components or screens in the codebase are not currently using them - the goal is to standardize on CDS.
 
 ## Component Research Order
+
 1. FIRST check if there's a CDS component that satisfies the requirement - this is MANDATORY.
 2. ONLY if no suitable CDS component exists, then consider native React Native components.
 3. ONLY if neither CDS nor native components work, suggest custom implementations.
 
 ## Documentation Location
+
 - ALWAYS use the cds mcp server's list-cds-routes mcp tool to list all CDS routes before trying to use a component.
 - ALWAYS inspect the documentation for a component with the get-cds-route mcp tool before using it to understand how to import and how to use it.
 - ALWAYS check examples in the documentation before implementing.
@@ -27,16 +23,19 @@ source: https://github.com/coinbase/cds/blob/master/packages/mcp-server/src/cds.
 - CAREFULLY review the component APIs, props, and usage examples in the documentation.
 
 ## Implementation Guidelines
+
 - MAINTAIN consistent styling and behavior with existing CDS implementations in the codebase.
 - FOLLOW CDS-specific theming and styling patterns.
 - RESPECT CDS component hierarchy and composition patterns.
 - DO NOT mix CDS and non-CDS component styling approaches unless absolutely necessary.
 
 ## When Suggesting Code
+
 - ALWAYS import from @coinbase/cds-mobile for mobile or @coinbase/cds-web for web explicitly.
 - INCLUDE complete imports in your code examples.
 - DEMONSTRATE proper usage of CDS theming and styling.
 - SHOW prop usage according to CDS documentation.
 
 ## Lint Errors
+
 - If there's a lint error, do not discard other components that don't have lint errors.

package/esm/setup.js

@@ -68,21 +68,61 @@ const findRepoRoot = startPath => {
     throw new Error('Could not find repo root');
   }
 };
-const installRules = agentRoot => {
+const CURSOR_MDC_HEADER = "---\ndescription: Apply when working with React components, UI implementations, or Coinbase Design System usage. This rule ensures proper use of CDS components.\n---\n";
+const installCursorRules = agentRoot => {
   try {
-    const sourceFile = path.join(__dirname, 'cds.mdc');
+    const sourceFile = path.join(__dirname, 'cds.md');
     const outputDirectory = path.join(agentRoot, 'rules');
     const outputFile = path.join(outputDirectory, 'cds.mdc');
     if (!fs.existsSync(outputDirectory)) fs.mkdirSync(outputDirectory, {
       recursive: true
     });
+
+    // Read the plain markdown source and prepend the Cursor MDC header
+    const sourceContent = fs.readFileSync(sourceFile, 'utf8');
+    const mdcContent = CURSOR_MDC_HEADER + sourceContent;
+    fs.writeFileSync(outputFile, mdcContent);
+    console.log("\u2705 Copied CDS rules to ".concat(outputFile));
+  } catch (error) {
+    console.error('❌ Failed to copy CDS rules:', error instanceof Error ? error.message : String(error));
+  }
+};
+const installClaudeRules = (repoRoot, agentRoot) => {
+  try {
+    const sourceFile = path.join(__dirname, 'cds.md');
+    const outputDirectory = path.join(agentRoot, 'rules');
+    const outputFile = path.join(outputDirectory, 'cds.md');
+    if (!fs.existsSync(outputDirectory)) fs.mkdirSync(outputDirectory, {
+      recursive: true
+    });
+
+    // Simply copy the plain markdown file for Claude Code
     fs.cpSync(sourceFile, outputFile);
     console.log("\u2705 Copied CDS rules to ".concat(outputFile));
+
+    // Update or create CLAUDE.md with reference to the rules file
+    const claudeMdPath = path.join(repoRoot, 'CLAUDE.md');
+    const claudeRulesReference = '@.claude/rules/cds.md';
+    if (fs.existsSync(claudeMdPath)) {
+      const claudeMdContent = fs.readFileSync(claudeMdPath, 'utf8');
+      if (!claudeMdContent.includes(claudeRulesReference)) {
+        // Add the reference at the beginning of the file
+        const updatedContent = "".concat(claudeRulesReference, "\n\n").concat(claudeMdContent);
+        fs.writeFileSync(claudeMdPath, updatedContent);
+        console.log("\u2705 Added CDS rules reference to ".concat(claudeMdPath));
+      } else {
+        console.log("\u2705 CDS rules reference already exists in ".concat(claudeMdPath));
+      }
+    } else {
+      // Create CLAUDE.md with the reference
+      fs.writeFileSync(claudeMdPath, "".concat(claudeRulesReference, "\n"));
+      console.log("\u2705 Created ".concat(claudeMdPath, " with CDS rules reference"));
+    }
   } catch (error) {
     console.error('❌ Failed to copy CDS rules:', error instanceof Error ? error.message : String(error));
   }
 };
-const installMcpServer = (repoRoot, cursorRoot) => {
+const installCursorMcpServer = (repoRoot, cursorRoot) => {
   const mcpServerConfigPath = path.join(cursorRoot, 'mcp.json');
   let newMcpServerConfig = {
     mcpServers: {}
@@ -119,6 +159,34 @@ const installMcpServer = (repoRoot, cursorRoot) => {
   fs.writeFileSync(mcpServerConfigPath, JSON.stringify(newMcpServerConfig, null, 2));
   console.log("\u2705 Updated MCP server config in ".concat(mcpServerConfigPath));
 };
+const installClaudeMcpServer = repoRoot => {
+  const mcpServerConfigPath = path.join(repoRoot, '.mcp.json');
+  let newMcpServerConfig = {
+    mcpServers: {}
+  };
+
+  // Claude Code doesn't need --prefix args
+  const mcpServerArgs = ['-y', '@coinbase/cds-mcp-server'];
+  if (args.noTelemetry) mcpServerArgs.unshift('DISABLE_CDS_MCP_TELEMETRY=1');
+  const cdsMcpServerConfig = {
+    cds: {
+      command: 'npx',
+      args: mcpServerArgs
+    }
+  };
+  try {
+    const currentMcpServerConfig = JSON.parse(fs.readFileSync(mcpServerConfigPath, 'utf8'));
+    newMcpServerConfig = _objectSpread(_objectSpread({}, currentMcpServerConfig), {}, {
+      mcpServers: _objectSpread(_objectSpread({}, currentMcpServerConfig.mcpServers), cdsMcpServerConfig)
+    });
+  } catch (_unused3) {
+    newMcpServerConfig = {
+      mcpServers: cdsMcpServerConfig
+    };
+  }
+  fs.writeFileSync(mcpServerConfigPath, JSON.stringify(newMcpServerConfig, null, 2));
+  console.log("\u2705 Updated MCP server config in ".concat(mcpServerConfigPath));
+};
 for (const agentValue of selectedAgents) {
   const agent = agentOptions.find(agent => agent.value === agentValue);
   if (!agent) {
@@ -130,6 +198,11 @@ for (const agentValue of selectedAgents) {
   console.log('You can opt out by running setup with the --no-telemetry flag.');
   const repoRoot = findRepoRoot(process.cwd());
   const agentRoot = path.join(repoRoot, agent.directory);
-  installRules(agentRoot);
-  installMcpServer(repoRoot, agentRoot);
+  if (agent.value === 'cursor') {
+    installCursorRules(agentRoot);
+    installCursorMcpServer(repoRoot, agentRoot);
+  } else if (agent.value === 'claude') {
+    installClaudeRules(repoRoot, agentRoot);
+    installClaudeMcpServer(repoRoot);
+  }
 }

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

@@ -10,7 +10,7 @@ import { ProgressBar } from '@coinbase/cds-mobile/visualizations/ProgressBar'
 
 ## Examples
 
-### Default
+#### Default
 
 ```tsx
 <VStack gap={2}>
@@ -20,7 +20,7 @@ import { ProgressBar } from '@coinbase/cds-mobile/visualizations/ProgressBar'
 </VStack>
 ```
 
-### Weights
+#### Weights
 
 ```tsx
 <VStack gap={2}>
@@ -31,7 +31,7 @@ import { ProgressBar } from '@coinbase/cds-mobile/visualizations/ProgressBar'
 </VStack>
 ```
 
-### Disabled
+#### Disabled
 
 ```tsx
 <VStack gap={2}>
@@ -41,7 +41,7 @@ import { ProgressBar } from '@coinbase/cds-mobile/visualizations/ProgressBar'
 </VStack>
 ```
 
-### Colors
+#### Colors
 
 ```tsx
 <VStack gap={2}>
@@ -54,11 +54,11 @@ import { ProgressBar } from '@coinbase/cds-mobile/visualizations/ProgressBar'
 </VStack>
 ```
 
-### Custom Styles
+#### Custom Styles
 
 You can customize the appearance of the progress bar using the `styles` prop. The `root` style controls the container, and `progress` controls the fill bar.
 
-```tsx live
+```tsx
 <ProgressContainerWithButtons>
   {({ calculateProgress }) => (
     <VStack gap={2}>
@@ -80,7 +80,21 @@ You can customize the appearance of the progress bar using the `styles` prop. Th
 </ProgressContainerWithButtons>
 ```
 
-### Animation Callbacks
+### Animation
+
+By default, ProgressBar animates progress changes. Use `disableAnimateOnMount` to skip the initial animation while still animating subsequent changes.
+
+```tsx
+<VStack gap={2}>
+  <Text variant="label2">Normal animation</Text>
+  <ProgressBar progress={0.5} />
+
+  <Text variant="label2">Disable animation on mount</Text>
+  <ProgressBar disableAnimateOnMount progress={0.5} />
+</VStack>
+```
+
+#### Callbacks
 
 You can use the `onAnimationStart` and `onAnimationEnd` callbacks to track the progress of the animation.
 
@@ -102,7 +116,7 @@ function Example() {
       <ProgressBar
         onAnimationEnd={handleAnimationEnd}
         onAnimationStart={handleAnimationStart}
-        progress={calculateProgress(0.2)}
+        progress={0.2}
       />
     </VStack>
   );
@@ -116,7 +130,7 @@ function Example() {
 | `progress` | `number` | Yes | `-` | Number between 0-1 representing the progress percentage |
 | `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 | `primary` | Custom progress color. |
 | `disableAnimateOnMount` | `boolean` | No | `false` | Disable animation on component mount |
-| `disabled` | `boolean` | No | `false` | Toggle used to show a disabled progress visualization |
+| `disabled` | `boolean` | No | `-` | Toggle used to show a disabled progress visualization |
 | `key` | `Key \| null` | No | `-` | - |
 | `onAnimationEnd` | `(() => void)` | No | `-` | Callback fired when the progress animation ends. |
 | `onAnimationStart` | `(() => void)` | No | `-` | Callback fired when the progress animation starts. |

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

@@ -12,7 +12,7 @@ import { ProgressBarWithFixedLabels } from '@coinbase/cds-mobile/visualizations/
 
 ### Label Below
 
-```jsx live
+```jsx
 <VStack gap={2}>
   <ProgressBarWithFixedLabels startLabel={0} endLabel={20} labelPlacement="below">
     <ProgressBar progress={0.2} />
@@ -25,7 +25,7 @@ import { ProgressBarWithFixedLabels } from '@coinbase/cds-mobile/visualizations/
 
 ### Label Beside
 
-```jsx live
+```jsx
 <VStack gap={2}>
   <ProgressBarWithFixedLabels startLabel={0} endLabel={20} labelPlacement="beside">
     <ProgressBar progress={0.2} />
@@ -38,7 +38,7 @@ import { ProgressBarWithFixedLabels } from '@coinbase/cds-mobile/visualizations/
 
 ### Disabled
 
-```jsx live
+```jsx
 <VStack gap={2}>
   <ProgressBarWithFixedLabels startLabel={0} endLabel={20} disabled labelPlacement="beside">
     <ProgressBar disabled progress={0.2} />
@@ -51,7 +51,7 @@ import { ProgressBarWithFixedLabels } from '@coinbase/cds-mobile/visualizations/
 
 ### Custom Labels
 
-```jsx live
+```jsx
 function Example() {
   const renderStartLabelNumStr = useCallback((num) => {
     return `$${num.toLocaleString()}`;
@@ -119,7 +119,7 @@ function Example() {
 
 You can customize the appearance of the progress bar and labels using the `styles` prop.
 
-```tsx live
+```tsx
 <ProgressContainerWithButtons>
   {({ calculateProgress }) => (
     <VStack gap={2}>
@@ -145,11 +145,66 @@ You can customize the appearance of the progress bar and labels using the `style
 </ProgressContainerWithButtons>
 ```
 
+### Animation
+
+By default, ProgressBar animates progress changes. Use `disableAnimateOnMount` to skip the initial animation while still animating subsequent changes.
+
+```tsx
+<VStack gap={2}>
+  <Text variant="label2">Normal animation</Text>
+  <ProgressBarWithFixedLabels startLabel={0} endLabel={50} labelPlacement="above">
+    <ProgressBar progress={0.5} />
+  </ProgressBarWithFixedLabels>
+
+  <Text variant="label2">Disable animation on mount</Text>
+  <ProgressBarWithFixedLabels
+    disableAnimateOnMount
+    startLabel={0}
+    endLabel={50}
+    labelPlacement="above"
+  >
+    <ProgressBar disableAnimateOnMount progress={0.5} />
+  </ProgressBarWithFixedLabels>
+</VStack>
+```
+
+#### Callbacks
+
+You can use the `onAnimationStart` and `onAnimationEnd` callbacks to track the progress of the animation.
+
+```jsx
+function Example() {
+  const [animationStatus, setAnimationStatus] = React.useState('Ready');
+
+  const handleAnimationStart = useCallback(() => {
+    setAnimationStatus('Animating...');
+  }, []);
+
+  const handleAnimationEnd = useCallback(() => {
+    setAnimationStatus('Animation Ended');
+  }, []);
+
+  return (
+    <VStack gap={2}>
+      <Text>Animation Status: {animationStatus}</Text>
+      <ProgressBarWithFixedLabels startLabel={0} endLabel={20} labelPlacement="above">
+        <ProgressBar
+          onAnimationEnd={handleAnimationEnd}
+          onAnimationStart={handleAnimationStart}
+          progress={0.2}
+        />
+      </ProgressBarWithFixedLabels>
+    </VStack>
+  );
+}
+```
+
 ## Props
 
 | Prop | Type | Required | Default | Description |
 | --- | --- | --- | --- | --- |
-| `disabled` | `boolean` | No | `false` | Toggle used to show a disabled progress visualization |
+| `disableAnimateOnMount` | `boolean` | No | `false` | Disable animation on component mount |
+| `disabled` | `boolean` | No | `-` | Toggle used to show a disabled progress visualization |
 | `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. |

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

@@ -12,7 +12,7 @@ import { ProgressBarWithFloatLabel } from '@coinbase/cds-mobile/visualizations/P
 
 ### Label Above
 
-```jsx live
+```jsx
 <VStack gap={2}>
   <ProgressBarWithFloatLabel label={0} progress={0} labelPlacement="above">
     <ProgressBar progress={0} />
@@ -25,7 +25,7 @@ import { ProgressBarWithFloatLabel } from '@coinbase/cds-mobile/visualizations/P
 
 ### Label Below
 
-```jsx live
+```jsx
 <VStack gap={2}>
   <ProgressBarWithFloatLabel label={0} progress={0} labelPlacement="below">
     <ProgressBar progress={0} />
@@ -38,7 +38,7 @@ import { ProgressBarWithFloatLabel } from '@coinbase/cds-mobile/visualizations/P
 
 ### Disabled
 
-```jsx live
+```jsx
 <VStack gap={2}>
   <ProgressBarWithFloatLabel label={70} progress={0.7} disabled>
     <ProgressBar progress={0.7} disabled />
@@ -48,7 +48,7 @@ import { ProgressBarWithFloatLabel } from '@coinbase/cds-mobile/visualizations/P
 
 ### Custom Labels
 
-```jsx live
+```jsx
 function Example() {
   const renderLabelNumStr = useCallback((num) => {
     return `$${num.toLocaleString()}`;
@@ -103,7 +103,7 @@ function Example() {
 
 You can customize the appearance of the progress bar and float label using the `styles` prop.
 
-```tsx live
+```tsx
 <ProgressContainerWithButtons>
   {({ calculateProgress }) => (
     <VStack gap={2}>
@@ -122,13 +122,63 @@ You can customize the appearance of the progress bar and float label using the `
 </ProgressContainerWithButtons>
 ```
 
+### Animation
+
+By default, ProgressBar animates progress changes. Use `disableAnimateOnMount` to skip the initial animation while still animating subsequent changes.
+
+```tsx
+<VStack gap={2}>
+  <Text variant="label2">Normal animation</Text>
+  <ProgressBarWithFloatLabel label={50} progress={0.5} labelPlacement="above">
+    <ProgressBar progress={0.5} />
+  </ProgressBarWithFloatLabel>
+
+  <Text variant="label2">Disable animation on mount</Text>
+  <ProgressBarWithFloatLabel disableAnimateOnMount label={50} progress={0.5} labelPlacement="above">
+    <ProgressBar disableAnimateOnMount progress={0.5} />
+  </ProgressBarWithFloatLabel>
+</VStack>
+```
+
+#### Callbacks
+
+You can use the `onAnimationStart` and `onAnimationEnd` callbacks to track the progress of the animation.
+
+```jsx
+function Example() {
+  const [animationStatus, setAnimationStatus] = React.useState('Ready');
+
+  const handleAnimationStart = useCallback(() => {
+    setAnimationStatus('Animating...');
+  }, []);
+
+  const handleAnimationEnd = useCallback(() => {
+    setAnimationStatus('Animation Ended');
+  }, []);
+
+  return (
+    <VStack gap={2}>
+      <Text>Animation Status: {animationStatus}</Text>
+      <ProgressBarWithFloatLabel label={20} progress={0.2} labelPlacement="above">
+        <ProgressBar
+          onAnimationEnd={handleAnimationEnd}
+          onAnimationStart={handleAnimationStart}
+          progress={0.2}
+        />
+      </ProgressBarWithFloatLabel>
+    </VStack>
+  );
+}
+```
+
 ## Props
 
 | Prop | Type | Required | Default | Description |
 | --- | --- | --- | --- | --- |
 | `label` | `number \| { value: number; render: (num: number, disabled?: boolean \| undefined) => ReactNode; }` | Yes | `-` | Label that is floated at the end of the filled in bar. If a number is used then it will format it as a percentage. |
 | `progress` | `number` | Yes | `-` | Number between 0-1 representing the progress percentage |
-| `disabled` | `boolean` | No | `false` | Toggle used to show a disabled progress visualization |
+| `disableAnimateOnMount` | `boolean` | No | `false` | Disable animation on component mount |
+| `disabled` | `boolean` | No | `-` | 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<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. |

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

@@ -186,7 +186,25 @@ The progress circle can be customized with styles.
 </HStack>
 ```
 
-#### Animation Callbacks
+### Animation
+
+By default, ProgressCircle animates progress changes. Use `disableAnimateOnMount` to skip the initial animation while still animating subsequent changes.
+
+```tsx
+<HStack gap={2}>
+  <VStack gap={1} alignItems="center">
+    <Text variant="label2">Normal animation</Text>
+    <ProgressCircle progress={0.5} size={100} />
+  </VStack>
+
+  <VStack gap={1} alignItems="center">
+    <Text variant="label2">Disable animation on mount</Text>
+    <ProgressCircle disableAnimateOnMount progress={0.5} size={100} />
+  </VStack>
+</HStack>
+```
+
+#### Callbacks
 
 You can use the `onAnimationStart` and `onAnimationEnd` callbacks to track the progress of the animation.
 
@@ -208,7 +226,7 @@ function Example() {
       <ProgressCircle
         onAnimationEnd={handleAnimationEnd}
         onAnimationStart={handleAnimationStart}
-        progress={calculateProgress(0.2)}
+        progress={0.2}
         size={100}
       />
     </VStack>
@@ -224,7 +242,7 @@ function Example() {
 | `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 | `primary` | Custom progress color. |
 | `contentNode` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | Optional component to override the default content rendered inside the circle. |
 | `disableAnimateOnMount` | `boolean` | No | `false` | Disable animation on component mount |
-| `disabled` | `boolean` | No | `false` | Toggle used to show a disabled progress visualization |
+| `disabled` | `boolean` | No | `-` | Toggle used to show a disabled progress visualization |
 | `hideContent` | `boolean` | No | `-` | Toggle used to hide the content node rendered inside the circle. |
 | `hideText` | `boolean` | No | `-` | - |
 | `key` | `Key \| null` | No | `-` | - |

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

@@ -383,7 +383,7 @@ function CustomBeaconLabel() {
 
 Using `labelElevated` will elevate the Scrubber's reference line label with a shadow.
 
-```jsx live
+```jsx
 <LineChart
   enableScrubbing
   height={200}

package/mcp-docs/web/components/AreaChart.txt

@@ -725,8 +725,8 @@ function XAxisGradient() {
 | `userSelect` | `ResponsiveProp<text \| none \| all \| auto>` | No | `-` | - |
 | `visibility` | `ResponsiveProp<hidden \| visible>` | No | `-` | - |
 | `width` | `ResponsiveProp<Width<string \| number>>` | No | `-` | - |
-| `xAxis` | `(Partial<AxisConfigProps> & AxisBaseProps & { className?: string; classNames?: { root?: string \| undefined; label?: string \| undefined; tickLabel?: string \| undefined; gridLine?: string \| undefined; line?: string \| undefined; tickMark?: string \| undefined; } \| undefined; style?: CSSProperties \| undefined; styles?: { root?: CSSProperties \| undefined; label?: CSSProperties \| undefined; tickLabel?: CSSProperties \| undefined; gridLine?: CSSProperties \| undefined; line?: CSSProperties \| undefined; tickMark?: CSSProperties \| undefined; } \| undefined; GridLineComponent?: LineComponent \| undefined; LineComponent?: LineComponent \| undefined; TickMarkLineComponent?: LineComponent \| undefined; tickLabelFormatter?: ((value: number) => ChartTextChildren) \| undefined; TickLabelComponent?: AxisTickLabelComponent \| undefined; } & { position?: top \| bottom \| undefined; height?: number \| undefined; }) \| undefined` | No | `-` | Configuration for x-axis. Accepts axis config and axis props. To show the axis, set showXAxis to true. |
-| `yAxis` | `(Partial<AxisConfigProps> & AxisBaseProps & { className?: string; classNames?: { root?: string \| undefined; label?: string \| undefined; tickLabel?: string \| undefined; gridLine?: string \| undefined; line?: string \| undefined; tickMark?: string \| undefined; } \| undefined; style?: CSSProperties \| undefined; styles?: { root?: CSSProperties \| undefined; label?: CSSProperties \| undefined; tickLabel?: CSSProperties \| undefined; gridLine?: CSSProperties \| undefined; line?: CSSProperties \| undefined; tickMark?: CSSProperties \| undefined; } \| undefined; GridLineComponent?: LineComponent \| undefined; LineComponent?: LineComponent \| undefined; TickMarkLineComponent?: LineComponent \| undefined; tickLabelFormatter?: ((value: number) => ChartTextChildren) \| undefined; TickLabelComponent?: AxisTickLabelComponent \| undefined; } & { axisId?: string \| undefined; position?: left \| right \| undefined; width?: number \| undefined; }) \| undefined` | No | `-` | Configuration for y-axis. Accepts axis config and axis props. To show the axis, set showYAxis to true. |
+| `xAxis` | `(Partial<AxisConfigProps> & SharedProps & { label?: string; labelGap?: number \| undefined; minTickLabelGap?: number \| undefined; requestedTickCount?: number \| undefined; showGrid?: boolean \| undefined; showLine?: boolean \| undefined; showTickMarks?: boolean \| undefined; tickMarkSize?: number \| undefined; ticks?: number[] \| ((value: number) => boolean) \| undefined; tickMarkLabelGap?: number \| undefined; tickInterval?: number \| undefined; tickMinStep?: number \| undefined; tickMaxStep?: number \| undefined; } & { className?: string \| undefined; classNames?: { root?: string \| undefined; label?: string \| undefined; tickLabel?: string \| undefined; gridLine?: string \| undefined; line?: string \| undefined; tickMark?: string \| undefined; } \| undefined; style?: CSSProperties \| undefined; styles?: { root?: CSSProperties \| undefined; label?: CSSProperties \| undefined; tickLabel?: CSSProperties \| undefined; gridLine?: CSSProperties \| undefined; line?: CSSProperties \| undefined; tickMark?: CSSProperties \| undefined; } \| undefined; GridLineComponent?: LineComponent \| undefined; LineComponent?: LineComponent \| undefined; TickMarkLineComponent?: LineComponent \| undefined; tickLabelFormatter?: ((value: number) => ChartTextChildren) \| undefined; TickLabelComponent?: AxisTickLabelComponent \| undefined; } & { position?: top \| bottom \| undefined; height?: number \| undefined; }) \| undefined` | No | `-` | Configuration for x-axis. Accepts axis config and axis props. To show the axis, set showXAxis to true. |
+| `yAxis` | `(Partial<AxisConfigProps> & SharedProps & { label?: string; labelGap?: number \| undefined; minTickLabelGap?: number \| undefined; requestedTickCount?: number \| undefined; showGrid?: boolean \| undefined; showLine?: boolean \| undefined; showTickMarks?: boolean \| undefined; tickMarkSize?: number \| undefined; ticks?: number[] \| ((value: number) => boolean) \| undefined; tickMarkLabelGap?: number \| undefined; tickInterval?: number \| undefined; tickMinStep?: number \| undefined; tickMaxStep?: number \| undefined; } & { className?: string \| undefined; classNames?: { root?: string \| undefined; label?: string \| undefined; tickLabel?: string \| undefined; gridLine?: string \| undefined; line?: string \| undefined; tickMark?: string \| undefined; } \| undefined; style?: CSSProperties \| undefined; styles?: { root?: CSSProperties \| undefined; label?: CSSProperties \| undefined; tickLabel?: CSSProperties \| undefined; gridLine?: CSSProperties \| undefined; line?: CSSProperties \| undefined; tickMark?: CSSProperties \| undefined; } \| undefined; GridLineComponent?: LineComponent \| undefined; LineComponent?: LineComponent \| undefined; TickMarkLineComponent?: LineComponent \| undefined; tickLabelFormatter?: ((value: number) => ChartTextChildren) \| undefined; TickLabelComponent?: AxisTickLabelComponent \| undefined; } & { axisId?: string \| undefined; position?: left \| right \| undefined; width?: number \| undefined; }) \| undefined` | No | `-` | Configuration for y-axis. Accepts axis config and axis props. To show the axis, set showYAxis to true. |
 | `zIndex` | `inherit \| auto \| revert \| -moz-initial \| initial \| revert-layer \| unset` | No | `-` | - |
 
 

package/mcp-docs/web/components/BarChart.txt

@@ -1129,8 +1129,8 @@ function UpdatingChartValues() {
 | `userSelect` | `ResponsiveProp<text \| none \| all \| auto>` | No | `-` | - |
 | `visibility` | `ResponsiveProp<hidden \| visible>` | No | `-` | - |
 | `width` | `ResponsiveProp<Width<string \| number>>` | No | `-` | - |
-| `xAxis` | `(Partial<AxisConfigProps> & AxisBaseProps & { className?: string; classNames?: { root?: string \| undefined; label?: string \| undefined; tickLabel?: string \| undefined; gridLine?: string \| undefined; line?: string \| undefined; tickMark?: string \| undefined; } \| undefined; style?: CSSProperties \| undefined; styles?: { root?: CSSProperties \| undefined; label?: CSSProperties \| undefined; tickLabel?: CSSProperties \| undefined; gridLine?: CSSProperties \| undefined; line?: CSSProperties \| undefined; tickMark?: CSSProperties \| undefined; } \| undefined; GridLineComponent?: LineComponent \| undefined; LineComponent?: LineComponent \| undefined; TickMarkLineComponent?: LineComponent \| undefined; tickLabelFormatter?: ((value: number) => ChartTextChildren) \| undefined; TickLabelComponent?: AxisTickLabelComponent \| undefined; } & { position?: top \| bottom \| undefined; height?: number \| undefined; }) \| undefined` | No | `-` | Configuration for x-axis. Accepts axis config and axis props. To show the axis, set showXAxis to true. |
-| `yAxis` | `(Partial<AxisConfigProps> & AxisBaseProps & { className?: string; classNames?: { root?: string \| undefined; label?: string \| undefined; tickLabel?: string \| undefined; gridLine?: string \| undefined; line?: string \| undefined; tickMark?: string \| undefined; } \| undefined; style?: CSSProperties \| undefined; styles?: { root?: CSSProperties \| undefined; label?: CSSProperties \| undefined; tickLabel?: CSSProperties \| undefined; gridLine?: CSSProperties \| undefined; line?: CSSProperties \| undefined; tickMark?: CSSProperties \| undefined; } \| undefined; GridLineComponent?: LineComponent \| undefined; LineComponent?: LineComponent \| undefined; TickMarkLineComponent?: LineComponent \| undefined; tickLabelFormatter?: ((value: number) => ChartTextChildren) \| undefined; TickLabelComponent?: AxisTickLabelComponent \| undefined; } & { axisId?: string \| undefined; position?: left \| right \| undefined; width?: number \| undefined; }) \| undefined` | No | `-` | Configuration for y-axis. Accepts axis config and axis props. To show the axis, set showYAxis to true. |
+| `xAxis` | `(Partial<AxisConfigProps> & SharedProps & { label?: string; labelGap?: number \| undefined; minTickLabelGap?: number \| undefined; requestedTickCount?: number \| undefined; showGrid?: boolean \| undefined; showLine?: boolean \| undefined; showTickMarks?: boolean \| undefined; tickMarkSize?: number \| undefined; ticks?: number[] \| ((value: number) => boolean) \| undefined; tickMarkLabelGap?: number \| undefined; tickInterval?: number \| undefined; tickMinStep?: number \| undefined; tickMaxStep?: number \| undefined; } & { className?: string \| undefined; classNames?: { root?: string \| undefined; label?: string \| undefined; tickLabel?: string \| undefined; gridLine?: string \| undefined; line?: string \| undefined; tickMark?: string \| undefined; } \| undefined; style?: CSSProperties \| undefined; styles?: { root?: CSSProperties \| undefined; label?: CSSProperties \| undefined; tickLabel?: CSSProperties \| undefined; gridLine?: CSSProperties \| undefined; line?: CSSProperties \| undefined; tickMark?: CSSProperties \| undefined; } \| undefined; GridLineComponent?: LineComponent \| undefined; LineComponent?: LineComponent \| undefined; TickMarkLineComponent?: LineComponent \| undefined; tickLabelFormatter?: ((value: number) => ChartTextChildren) \| undefined; TickLabelComponent?: AxisTickLabelComponent \| undefined; } & { position?: top \| bottom \| undefined; height?: number \| undefined; }) \| undefined` | No | `-` | Configuration for x-axis. Accepts axis config and axis props. To show the axis, set showXAxis to true. |
+| `yAxis` | `(Partial<AxisConfigProps> & SharedProps & { label?: string; labelGap?: number \| undefined; minTickLabelGap?: number \| undefined; requestedTickCount?: number \| undefined; showGrid?: boolean \| undefined; showLine?: boolean \| undefined; showTickMarks?: boolean \| undefined; tickMarkSize?: number \| undefined; ticks?: number[] \| ((value: number) => boolean) \| undefined; tickMarkLabelGap?: number \| undefined; tickInterval?: number \| undefined; tickMinStep?: number \| undefined; tickMaxStep?: number \| undefined; } & { className?: string \| undefined; classNames?: { root?: string \| undefined; label?: string \| undefined; tickLabel?: string \| undefined; gridLine?: string \| undefined; line?: string \| undefined; tickMark?: string \| undefined; } \| undefined; style?: CSSProperties \| undefined; styles?: { root?: CSSProperties \| undefined; label?: CSSProperties \| undefined; tickLabel?: CSSProperties \| undefined; gridLine?: CSSProperties \| undefined; line?: CSSProperties \| undefined; tickMark?: CSSProperties \| undefined; } \| undefined; GridLineComponent?: LineComponent \| undefined; LineComponent?: LineComponent \| undefined; TickMarkLineComponent?: LineComponent \| undefined; tickLabelFormatter?: ((value: number) => ChartTextChildren) \| undefined; TickLabelComponent?: AxisTickLabelComponent \| undefined; } & { axisId?: string \| undefined; position?: left \| right \| undefined; width?: number \| undefined; }) \| undefined` | No | `-` | Configuration for y-axis. Accepts axis config and axis props. To show the axis, set showYAxis to true. |
 | `zIndex` | `inherit \| auto \| revert \| -moz-initial \| initial \| revert-layer \| unset` | No | `-` | - |
 
 

package/mcp-docs/web/components/LineChart.txt

@@ -2052,8 +2052,8 @@ function ForecastAssetPrice() {
 | `userSelect` | `ResponsiveProp<text \| none \| all \| auto>` | No | `-` | - |
 | `visibility` | `ResponsiveProp<hidden \| visible>` | No | `-` | - |
 | `width` | `ResponsiveProp<Width<string \| number>>` | No | `-` | - |
-| `xAxis` | `(Partial<AxisConfigProps> & AxisBaseProps & { className?: string; classNames?: { root?: string \| undefined; label?: string \| undefined; tickLabel?: string \| undefined; gridLine?: string \| undefined; line?: string \| undefined; tickMark?: string \| undefined; } \| undefined; style?: CSSProperties \| undefined; styles?: { root?: CSSProperties \| undefined; label?: CSSProperties \| undefined; tickLabel?: CSSProperties \| undefined; gridLine?: CSSProperties \| undefined; line?: CSSProperties \| undefined; tickMark?: CSSProperties \| undefined; } \| undefined; GridLineComponent?: LineComponent \| undefined; LineComponent?: LineComponent \| undefined; TickMarkLineComponent?: LineComponent \| undefined; tickLabelFormatter?: ((value: number) => ChartTextChildren) \| undefined; TickLabelComponent?: AxisTickLabelComponent \| undefined; } & { position?: top \| bottom \| undefined; height?: number \| undefined; }) \| undefined` | No | `-` | Configuration for x-axis. Accepts axis config and axis props. To show the axis, set showXAxis to true. |
-| `yAxis` | `(Partial<AxisConfigProps> & AxisBaseProps & { className?: string; classNames?: { root?: string \| undefined; label?: string \| undefined; tickLabel?: string \| undefined; gridLine?: string \| undefined; line?: string \| undefined; tickMark?: string \| undefined; } \| undefined; style?: CSSProperties \| undefined; styles?: { root?: CSSProperties \| undefined; label?: CSSProperties \| undefined; tickLabel?: CSSProperties \| undefined; gridLine?: CSSProperties \| undefined; line?: CSSProperties \| undefined; tickMark?: CSSProperties \| undefined; } \| undefined; GridLineComponent?: LineComponent \| undefined; LineComponent?: LineComponent \| undefined; TickMarkLineComponent?: LineComponent \| undefined; tickLabelFormatter?: ((value: number) => ChartTextChildren) \| undefined; TickLabelComponent?: AxisTickLabelComponent \| undefined; } & { axisId?: string \| undefined; position?: left \| right \| undefined; width?: number \| undefined; }) \| undefined` | No | `-` | Configuration for y-axis. Accepts axis config and axis props. To show the axis, set showYAxis to true. |
+| `xAxis` | `(Partial<AxisConfigProps> & SharedProps & { label?: string; labelGap?: number \| undefined; minTickLabelGap?: number \| undefined; requestedTickCount?: number \| undefined; showGrid?: boolean \| undefined; showLine?: boolean \| undefined; showTickMarks?: boolean \| undefined; tickMarkSize?: number \| undefined; ticks?: number[] \| ((value: number) => boolean) \| undefined; tickMarkLabelGap?: number \| undefined; tickInterval?: number \| undefined; tickMinStep?: number \| undefined; tickMaxStep?: number \| undefined; } & { className?: string \| undefined; classNames?: { root?: string \| undefined; label?: string \| undefined; tickLabel?: string \| undefined; gridLine?: string \| undefined; line?: string \| undefined; tickMark?: string \| undefined; } \| undefined; style?: CSSProperties \| undefined; styles?: { root?: CSSProperties \| undefined; label?: CSSProperties \| undefined; tickLabel?: CSSProperties \| undefined; gridLine?: CSSProperties \| undefined; line?: CSSProperties \| undefined; tickMark?: CSSProperties \| undefined; } \| undefined; GridLineComponent?: LineComponent \| undefined; LineComponent?: LineComponent \| undefined; TickMarkLineComponent?: LineComponent \| undefined; tickLabelFormatter?: ((value: number) => ChartTextChildren) \| undefined; TickLabelComponent?: AxisTickLabelComponent \| undefined; } & { position?: top \| bottom \| undefined; height?: number \| undefined; }) \| undefined` | No | `-` | Configuration for x-axis. Accepts axis config and axis props. To show the axis, set showXAxis to true. |
+| `yAxis` | `(Partial<AxisConfigProps> & SharedProps & { label?: string; labelGap?: number \| undefined; minTickLabelGap?: number \| undefined; requestedTickCount?: number \| undefined; showGrid?: boolean \| undefined; showLine?: boolean \| undefined; showTickMarks?: boolean \| undefined; tickMarkSize?: number \| undefined; ticks?: number[] \| ((value: number) => boolean) \| undefined; tickMarkLabelGap?: number \| undefined; tickInterval?: number \| undefined; tickMinStep?: number \| undefined; tickMaxStep?: number \| undefined; } & { className?: string \| undefined; classNames?: { root?: string \| undefined; label?: string \| undefined; tickLabel?: string \| undefined; gridLine?: string \| undefined; line?: string \| undefined; tickMark?: string \| undefined; } \| undefined; style?: CSSProperties \| undefined; styles?: { root?: CSSProperties \| undefined; label?: CSSProperties \| undefined; tickLabel?: CSSProperties \| undefined; gridLine?: CSSProperties \| undefined; line?: CSSProperties \| undefined; tickMark?: CSSProperties \| undefined; } \| undefined; GridLineComponent?: LineComponent \| undefined; LineComponent?: LineComponent \| undefined; TickMarkLineComponent?: LineComponent \| undefined; tickLabelFormatter?: ((value: number) => ChartTextChildren) \| undefined; TickLabelComponent?: AxisTickLabelComponent \| undefined; } & { axisId?: string \| undefined; position?: left \| right \| undefined; width?: number \| undefined; }) \| undefined` | No | `-` | Configuration for y-axis. Accepts axis config and axis props. To show the axis, set showYAxis to true. |
 | `zIndex` | `inherit \| auto \| revert \| -moz-initial \| initial \| revert-layer \| unset` | No | `-` | - |
 
 

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

@@ -108,7 +108,25 @@ This is for demo purposes. ProgressContainerWithButtons isn't designed for produ
 </ProgressContainerWithButtons>
 ```
 
-### Animation Callbacks
+### Animation
+
+By default, ProgressBar animates progress changes. Use `disableAnimateOnMount` to skip the initial animation while still animating subsequent changes.
+
+```tsx live
+<ProgressContainerWithButtons>
+  {({ calculateProgress }) => (
+    <VStack gap={2}>
+      <Text variant="label2">Normal animation</Text>
+      <ProgressBar progress={calculateProgress(0)} />
+
+      <Text variant="label2">Disable animation on mount</Text>
+      <ProgressBar disableAnimateOnMount progress={calculateProgress(0.3)} />
+    </VStack>
+  )}
+</ProgressContainerWithButtons>
+```
+
+#### Callbacks
 
 You can use the `onAnimationStart` and `onAnimationEnd` callbacks to track the progress of the animation.
 
@@ -150,7 +168,7 @@ function Example() {
 | `classNames` | `{ root?: string; progress?: string \| undefined; } \| undefined` | No | `-` | Custom class names for the progress bar. |
 | `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 | `primary` | Custom progress color. |
 | `disableAnimateOnMount` | `boolean` | No | `false` | Disable animation on component mount |
-| `disabled` | `boolean` | No | `false` | Toggle used to show a disabled progress visualization |
+| `disabled` | `boolean` | No | `-` | Toggle used to show a disabled progress visualization |
 | `key` | `Key \| null` | No | `-` | - |
 | `onAnimationEnd` | `(() => void)` | No | `-` | Callback fired when the progress animation ends. |
 | `onAnimationStart` | `(() => void)` | No | `-` | Callback fired when the progress animation starts. |

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

@@ -195,13 +195,84 @@ This is for demo purposes. ProgressContainerWithButtons isn't designed for produ
 </ProgressContainerWithButtons>
 ```
 
+### Animation
+
+By default, ProgressBar animates progress changes. Use `disableAnimateOnMount` to skip the initial animation while still animating subsequent changes.
+
+```tsx live
+<ProgressContainerWithButtons>
+  {({ calculateProgress }) => (
+    <VStack gap={2}>
+      <Text variant="label2">Normal animation</Text>
+      <ProgressBarWithFixedLabels
+        startLabel={0}
+        endLabel={Math.round(calculateProgress(0) * 100)}
+        labelPlacement="above"
+      >
+        <ProgressBar progress={calculateProgress(0)} />
+      </ProgressBarWithFixedLabels>
+
+      <Text variant="label2">Disable animation on mount</Text>
+      <ProgressBarWithFixedLabels
+        disableAnimateOnMount
+        startLabel={0}
+        endLabel={Math.round(calculateProgress(0.3) * 100)}
+        labelPlacement="above"
+      >
+        <ProgressBar disableAnimateOnMount progress={calculateProgress(0.3)} />
+      </ProgressBarWithFixedLabels>
+    </VStack>
+  )}
+</ProgressContainerWithButtons>
+```
+
+#### Callbacks
+
+You can use the `onAnimationStart` and `onAnimationEnd` callbacks to track the progress of the animation.
+
+```jsx live
+function Example() {
+  const [animationStatus, setAnimationStatus] = React.useState('Ready');
+
+  const handleAnimationStart = useCallback(() => {
+    setAnimationStatus('Animating...');
+  }, []);
+
+  const handleAnimationEnd = useCallback(() => {
+    setAnimationStatus('Animation Ended');
+  }, []);
+
+  return (
+    <ProgressContainerWithButtons>
+      {({ calculateProgress }) => (
+        <VStack gap={2}>
+          <Text>Animation Status: {animationStatus}</Text>
+          <ProgressBarWithFixedLabels
+            startLabel={0}
+            endLabel={Math.round(calculateProgress(0.2) * 100)}
+            labelPlacement="above"
+          >
+            <ProgressBar
+              onAnimationEnd={handleAnimationEnd}
+              onAnimationStart={handleAnimationStart}
+              progress={calculateProgress(0.2)}
+            />
+          </ProgressBarWithFixedLabels>
+        </VStack>
+      )}
+    </ProgressContainerWithButtons>
+  );
+}
+```
+
 ## Props
 
 | Prop | Type | Required | Default | Description |
 | --- | --- | --- | --- | --- |
 | `className` | `string` | No | `-` | Custom class name for the progress bar with fixed labels root. |
 | `classNames` | `{ root?: string; labelContainer?: string \| undefined; startLabel?: string \| undefined; endLabel?: string \| undefined; } \| undefined` | No | `-` | Custom class names for the progress bar with fixed labels. |
-| `disabled` | `boolean` | No | `false` | Toggle used to show a disabled progress visualization |
+| `disableAnimateOnMount` | `boolean` | No | `false` | Disable animation on component mount |
+| `disabled` | `boolean` | No | `-` | Toggle used to show a disabled progress visualization |
 | `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. |

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

@@ -164,6 +164,76 @@ This is for demo purposes. ProgressContainerWithButtons isn't designed for produ
 </ProgressContainerWithButtons>
 ```
 
+### Animation
+
+By default, ProgressBar animates progress changes. Use `disableAnimateOnMount` to skip the initial animation while still animating subsequent changes.
+
+```tsx live
+<ProgressContainerWithButtons>
+  {({ calculateProgress }) => (
+    <VStack gap={2}>
+      <Text variant="label2">Normal animation</Text>
+      <ProgressBarWithFloatLabel
+        label={Math.round(calculateProgress(0) * 100)}
+        progress={calculateProgress(0)}
+        labelPlacement="above"
+      >
+        <ProgressBar progress={calculateProgress(0)} />
+      </ProgressBarWithFloatLabel>
+
+      <Text variant="label2">Disable animation on mount</Text>
+      <ProgressBarWithFloatLabel
+        disableAnimateOnMount
+        label={Math.round(calculateProgress(0.3) * 100)}
+        progress={calculateProgress(0.3)}
+        labelPlacement="above"
+      >
+        <ProgressBar disableAnimateOnMount progress={calculateProgress(0.3)} />
+      </ProgressBarWithFloatLabel>
+    </VStack>
+  )}
+</ProgressContainerWithButtons>
+```
+
+#### Callbacks
+
+You can use the `onAnimationStart` and `onAnimationEnd` callbacks to track the progress of the animation.
+
+```jsx live
+function Example() {
+  const [animationStatus, setAnimationStatus] = React.useState('Ready');
+
+  const handleAnimationStart = useCallback(() => {
+    setAnimationStatus('Animating...');
+  }, []);
+
+  const handleAnimationEnd = useCallback(() => {
+    setAnimationStatus('Animation Ended');
+  }, []);
+
+  return (
+    <ProgressContainerWithButtons>
+      {({ calculateProgress }) => (
+        <VStack gap={2}>
+          <Text>Animation Status: {animationStatus}</Text>
+          <ProgressBarWithFloatLabel
+            label={Math.round(calculateProgress(0.2) * 100)}
+            progress={calculateProgress(0.2)}
+            labelPlacement="above"
+          >
+            <ProgressBar
+              onAnimationEnd={handleAnimationEnd}
+              onAnimationStart={handleAnimationStart}
+              progress={calculateProgress(0.2)}
+            />
+          </ProgressBarWithFloatLabel>
+        </VStack>
+      )}
+    </ProgressContainerWithButtons>
+  );
+}
+```
+
 ## Props
 
 | Prop | Type | Required | Default | Description |
@@ -172,7 +242,8 @@ This is for demo purposes. ProgressContainerWithButtons isn't designed for produ
 | `progress` | `number` | Yes | `-` | Number between 0-1 representing the progress percentage |
 | `className` | `string` | No | `-` | Custom class name for the progress bar with float label root. |
 | `classNames` | `{ root?: string; labelContainer?: string \| undefined; label?: string \| undefined; } \| undefined` | No | `-` | Custom class names for the progress bar with float label. |
-| `disabled` | `boolean` | No | `false` | Toggle used to show a disabled progress visualization |
+| `disableAnimateOnMount` | `boolean` | No | `false` | Disable animation on component mount |
+| `disabled` | `boolean` | No | `-` | Toggle used to show a disabled progress visualization |
 | `labelPlacement` | `above \| below` | No | `above` | Position of label relative to the bar |
 | `style` | `CSSProperties` | No | `-` | Custom styles for the progress bar with float label root. |
 | `styles` | `{ root?: CSSProperties; labelContainer?: CSSProperties \| undefined; label?: CSSProperties \| undefined; } \| undefined` | No | `-` | Custom styles for the progress bar with float label. |

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

@@ -13,7 +13,7 @@ import { ProgressCircle } from '@coinbase/cds-web/visualizations/ProgressCircle'
 ### Default
 
 ```jsx live
-<HStack gap={2}>
+<HStack gap={2} flexWrap="wrap">
   <ProgressCircle progress={0} size={100} />
   <ProgressCircle progress={0.5} size={100} />
   <ProgressCircle progress={1} size={100} />
@@ -23,7 +23,7 @@ import { ProgressCircle } from '@coinbase/cds-web/visualizations/ProgressCircle'
 ### Thin
 
 ```jsx live
-<HStack gap={2}>
+<HStack gap={2} flexWrap="wrap">
   <ProgressCircle progress={0} weight="thin" size={100} />
   <ProgressCircle progress={0.5} weight="thin" size={100} />
   <ProgressCircle progress={1} weight="thin" size={100} />
@@ -33,7 +33,7 @@ import { ProgressCircle } from '@coinbase/cds-web/visualizations/ProgressCircle'
 ### Semiheavy
 
 ```jsx live
-<HStack gap={2}>
+<HStack gap={2} flexWrap="wrap">
   <ProgressCircle progress={0} weight="semiheavy" size={100} />
   <ProgressCircle progress={0.5} weight="semiheavy" size={100} />
   <ProgressCircle progress={1} weight="semiheavy" size={100} />
@@ -43,7 +43,7 @@ import { ProgressCircle } from '@coinbase/cds-web/visualizations/ProgressCircle'
 ### Heavy
 
 ```jsx live
-<HStack gap={2}>
+<HStack gap={2} flexWrap="wrap">
   <ProgressCircle progress={0} weight="heavy" size={100} />
   <ProgressCircle progress={0.5} weight="heavy" size={100} />
   <ProgressCircle progress={1} weight="heavy" size={100} />
@@ -53,7 +53,7 @@ import { ProgressCircle } from '@coinbase/cds-web/visualizations/ProgressCircle'
 ### No Text
 
 ```jsx live
-<HStack gap={2}>
+<HStack gap={2} flexWrap="wrap">
   <ProgressCircle progress={0} hideContent size={25} />
   <ProgressCircle progress={0.5} hideContent size={25} />
   <ProgressCircle progress={1} hideContent size={25} />
@@ -63,7 +63,7 @@ import { ProgressCircle } from '@coinbase/cds-web/visualizations/ProgressCircle'
 ### Disabled
 
 ```jsx live
-<HStack gap={2}>
+<HStack gap={2} flexWrap="wrap">
   <ProgressCircle progress={0} disabled size={100} />
   <ProgressCircle progress={0.5} disabled size={100} />
   <ProgressCircle progress={1} disabled size={100} />
@@ -73,7 +73,7 @@ import { ProgressCircle } from '@coinbase/cds-web/visualizations/ProgressCircle'
 ### Colors
 
 ```jsx live
-<HStack gap={2}>
+<HStack gap={2} flexWrap="wrap">
   <ProgressCircle progress={0.5} color="bgPositive" size={100} />
   <ProgressCircle progress={0.5} color="bgNegative" size={100} />
   <ProgressCircle progress={0.5} color="bgPrimary" size={100} />
@@ -109,7 +109,7 @@ You can provide an image, such as an asset, as the content node.
 
 ```jsx live
 <VStack gap={2}>
-  <HStack gap={2}>
+  <HStack gap={2} flexWrap="wrap">
     <ProgressCircle
       progress={1}
       size={56}
@@ -211,7 +211,7 @@ You can provide an image, such as an asset, as the content node.
       weight="thin"
     />
   </HStack>
-  <HStack gap={2}>
+  <HStack gap={2} flexWrap="wrap">
     <ProgressCircle
       styles={{
         progress: {
@@ -387,7 +387,29 @@ This is for demo purposes. ProgressContainerWithButtons isn't designed for produ
 </ProgressContainerWithButtons>
 ```
 
-### Animation Callbacks
+### Animation
+
+By default, ProgressCircle animates progress changes. Use `disableAnimateOnMount` to skip the initial animation while still animating subsequent changes.
+
+```tsx live
+<ProgressContainerWithButtons>
+  {({ calculateProgress }) => (
+    <HStack gap={2}>
+      <VStack gap={1} alignItems="center">
+        <Text variant="label2">Normal animation</Text>
+        <ProgressCircle progress={calculateProgress(0)} size={100} />
+      </VStack>
+
+      <VStack gap={1} alignItems="center">
+        <Text variant="label2">Disable animation on mount</Text>
+        <ProgressCircle disableAnimateOnMount progress={calculateProgress(0.3)} size={100} />
+      </VStack>
+    </HStack>
+  )}
+</ProgressContainerWithButtons>
+```
+
+#### Callbacks
 
 You can use the `onAnimationStart` and `onAnimationEnd` callbacks to track the progress of the animation.
 
@@ -431,7 +453,7 @@ function Example() {
 | `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 | `primary` | Custom progress color. |
 | `contentNode` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | Optional component to override the default content rendered inside the circle. |
 | `disableAnimateOnMount` | `boolean` | No | `false` | Disable animation on component mount |
-| `disabled` | `boolean` | No | `false` | Toggle used to show a disabled progress visualization |
+| `disabled` | `boolean` | No | `-` | Toggle used to show a disabled progress visualization |
 | `hideContent` | `boolean` | No | `-` | Toggle used to hide the content node rendered inside the circle. |
 | `hideText` | `boolean` | No | `-` | - |
 | `key` | `Key \| null` | No | `-` | - |

package/mcp-docs/web/components/XAxis.txt

@@ -672,6 +672,7 @@ function CustomTickLabelExample() {
 | `showTickMarks` | `boolean` | No | `-` | Whether to show tick marks on the axis. |
 | `style` | `CSSProperties` | No | `-` | Custom style for the axis. |
 | `styles` | `{ root?: CSSProperties; label?: CSSProperties \| undefined; tickLabel?: CSSProperties \| undefined; gridLine?: CSSProperties \| undefined; line?: CSSProperties \| undefined; tickMark?: CSSProperties \| undefined; } \| undefined` | No | `-` | Custom styles for the axis. |
+| `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 |
 | `tickInterval` | `number` | No | `32 (for x-axis)` | Interval at which to show ticks. When provided, calculates tick count based on available space. |
 | `tickLabelFormatter` | `((value: number) => ChartTextChildren)` | No | `-` | Formatter function for axis tick values. Tick values will be wrapped in ChartText component. |
 | `tickMarkLabelGap` | `number` | No | `2 for x-axis, 8 for y-axis` | Space between the axis tick mark and labels. If tick marks are not shown, this is the gap between the axis and the chart. |

package/mcp-docs/web/components/YAxis.txt

@@ -580,6 +580,7 @@ function CustomTickLabelExample() {
 | `showTickMarks` | `boolean` | No | `-` | Whether to show tick marks on the axis. |
 | `style` | `CSSProperties` | No | `-` | Custom style for the axis. |
 | `styles` | `{ root?: CSSProperties; label?: CSSProperties \| undefined; tickLabel?: CSSProperties \| undefined; gridLine?: CSSProperties \| undefined; line?: CSSProperties \| undefined; tickMark?: CSSProperties \| undefined; } \| undefined` | No | `-` | Custom styles for the axis. |
+| `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 |
 | `tickInterval` | `number` | No | `32 (for x-axis)` | Interval at which to show ticks. When provided, calculates tick count based on available space. |
 | `tickLabelFormatter` | `((value: number) => ChartTextChildren)` | No | `-` | Formatter function for axis tick values. Tick values will be wrapped in ChartText component. |
 | `tickMarkLabelGap` | `number` | No | `2 for x-axis, 8 for y-axis` | Space between the axis tick mark and labels. If tick marks are not shown, this is the gap between the axis and the chart. |

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coinbase/cds-mcp-server",
-  "version": "8.35.0",
+  "version": "8.36.0",
   "description": "Coinbase Design System - MCP Server",
   "repository": {
     "type": "git",
@@ -29,10 +29,6 @@
     "mcp-docs",
     "CHANGELOG"
   ],
-  "peerDependencies": {
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1"
-  },
   "dependencies": {
     "@inquirer/prompts": "^7.5.3",
     "@modelcontextprotocol/sdk": "^1.13.1",
@@ -41,7 +37,6 @@
   "devDependencies": {
     "@babel/core": "^7.28.0",
     "@babel/preset-env": "^7.28.0",
-    "@babel/preset-react": "^7.27.1",
     "@babel/preset-typescript": "^7.27.1"
   }
 }