ProgressDonut: properly fix the render AND hydration issue (#454)

Author: cody-dot-js

.changeset/gentle-beds-push.md

@@ -0,0 +1,5 @@
+---
+"@ngrok/mantle": patch
+---
+
+ProgressDonut: properly fix the render AND hydration issue

apps/www/package.json

@@ -21,7 +21,7 @@
     "@react-router/fs-routes": "7.2.0",
     "@react-router/node": "7.2.0",
     "@react-router/serve": "7.2.0",
-    "@vercel/react-router": "1.0.2",
+    "@vercel/react-router": "1.1.0",
     "isbot": "5.1.23",
     "prismjs": "1.29.0",
     "react": "18.3.1",
@@ -34,16 +34,16 @@
     "@cfg/tsconfig": "workspace:*",
     "@commander-js/extra-typings": "13.1.0",
     "@react-router/dev": "7.2.0",
-    "@types/node": "22.13.4",
+    "@types/node": "22.13.9",
     "@types/prismjs": "1.26.5",
     "@types/react": "18.3.18",
     "@types/react-dom": "18.3.5",
     "commander": "13.1.0",
     "postcss": "8.5.3",
-    "react-router-devtools": "1.1.5",
+    "react-router-devtools": "1.1.6",
     "tailwindcss": "3.4.17",
-    "typescript": "5.7.3",
-    "vite": "6.1.1",
+    "typescript": "5.8.2",
+    "vite": "6.2.0",
     "vite-tsconfig-paths": "5.1.4"
   }
 }

config/tsconfig/tsconfig.base.json

@@ -3,19 +3,20 @@
   "display": "Default",
   "compilerOptions": {
     /* Base Options: */
+    "allowJs": true,
+    "erasableSyntaxOnly": true,
     "esModuleInterop": true,
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "resolveJsonModule": true,
     "skipLibCheck": true,
     "target": "ES2022",
-    "allowJs": true,
-    "resolveJsonModule": true,
-    "moduleDetection": "force",
-    "isolatedModules": true,
     "verbatimModuleSyntax": true,
 
     /* Strictness */
     "strict": true,
-    "noUncheckedIndexedAccess": true,
     "noImplicitOverride": true,
+    "noUncheckedIndexedAccess": true,
     "noUncheckedSideEffectImports": true,
   }
 }

package.json

@@ -2,7 +2,7 @@
   "private": true,
   "name": "mantle",
   "license": "MIT",
-  "packageManager": "pnpm@10.4.1",
+  "packageManager": "pnpm@10.5.2",
   "type": "module",
   "engines": {
     "node": "^22.0.0"
@@ -31,9 +31,9 @@
   "devDependencies": {
     "@biomejs/biome": "1.9.4",
     "@changesets/changelog-github": "0.5.1",
-    "@changesets/cli": "2.28.0",
-    "turbo": "2.4.2",
-    "vitest": "3.0.6"
+    "@changesets/cli": "2.28.1",
+    "turbo": "2.4.4",
+    "vitest": "3.0.7"
   },
   "pnpm": {
     "overrides": {

packages/mantle/package.json

@@ -52,7 +52,7 @@
     "clsx": "2.1.1",
     "prismjs": "1.29.0",
     "react-day-picker": "8.10.1",
-    "sonner": "2.0.0",
+    "sonner": "2.0.1",
     "tailwind-merge": "2.6.0",
     "tailwindcss-animate": "1.0.7",
     "tiny-invariant": "1.3.3"
@@ -64,7 +64,7 @@
     "@testing-library/jest-dom": "6.6.3",
     "@testing-library/react": "16.2.0",
     "@testing-library/user-event": "14.6.1",
-    "@types/node": "22.13.4",
+    "@types/node": "22.13.9",
     "@types/prismjs": "1.26.5",
     "@types/react": "18.3.18",
     "@types/react-dom": "18.3.5",
@@ -78,8 +78,8 @@
     "react-dom": "18.3.1",
     "react-router": "7.2.0",
     "tailwindcss": "3.4.17",
-    "tsup": "8.3.6",
-    "typescript": "5.7.3",
+    "tsup": "8.4.0",
+    "typescript": "5.8.2",
     "zod": "3.24.2"
   },
   "peerDependencies": {

packages/mantle/src/components/progress/progress-donut.tsx

@@ -180,7 +180,10 @@ const ProgressDonutIndicator = ({
 				</defs>
 			)}
 			<circle
-				className="[r:var(--radius)]"
+				className={clsx(
+					"[r:var(--radius)]", // set the circle radius to be the value of the calc'd CSS variable set on the style
+					"origin-center",
+				)}
 				cx="50%"
 				cy="50%"
 				fill="transparent"
@@ -193,7 +196,6 @@ const ProgressDonutIndicator = ({
 				strokeLinecap="round"
 				strokeWidth={strokeWidthPx}
 				style={{ "--radius": radius } as CSSProperties}
-				{...{ transformOrigin: "center" as const }}
 				transform="rotate(-90)" // rotate -90 degrees so it starts from the top
 			/>
 		</g>