[docs][joy-ui] Integrate a count-up feature to the Circular Progress

docs/data/joy/components/circular-progress/CircularProgressCountUp.js

@@ -0,0 +1,66 @@
+import * as React from 'react';
+import Stack from '@mui/joy/Stack';
+import Button from '@mui/joy/Button';
+import Typography from '@mui/joy/Typography';
+import CircularProgress from '@mui/joy/CircularProgress';
+import { useCountUp } from 'use-count-up';
+
+export default function CircularProgressCountUp() {
+  const [isLoading, setIsLoading] = React.useState(false);
+  const [buttonLabel, setButtonLabel] = React.useState('Start'); // Track button label
+
+  const { value: value1, reset: resetValue1 } = useCountUp({
+    isCounting: isLoading,
+    duration: 1,
+    start: 0,
+    end: 25,
+    onEnd: () => {
+      setIsLoading(false);
+      setButtonLabel('Reset'); // Change the button label when loading is complete
+    },
+  });
+
+  const { value: value2, reset } = useCountUp({
+    isCounting: true,
+    duration: 1,
+    start: 0,
+    end: 75,
+  });
+
+  const handleButtonClick = () => {
+    if (isLoading) {
+      setIsLoading(false);
+      setButtonLabel('Start');
+      resetValue1(); // Reset the value
+    } else {
+      setIsLoading(true);
+      setButtonLabel('Reset');
+    }
+  };
+
+  return (
+    <Stack direction="row" alignItems="center" flexWrap="wrap" spacing={8}>
+      <Stack spacing={2}>
+        <CircularProgress size="lg" determinate value={value1}>
+          <Typography>{value1}%</Typography>
+        </CircularProgress>
+        <Button
+          size="sm"
+          variant="outlined"
+          color="neutral"
+          onClick={handleButtonClick} // Use a single click handler
+        >
+          {buttonLabel}
+        </Button>
+      </Stack>
+      <Stack spacing={2}>
+        <CircularProgress size="lg" determinate value={value2}>
+          <Typography>{value2}%</Typography>
+        </CircularProgress>
+        <Button size="sm" variant="outlined" color="neutral" onClick={reset}>
+          Reload
+        </Button>
+      </Stack>
+    </Stack>
+  );
+}

docs/data/joy/components/circular-progress/CircularProgressCountUp.tsx

@@ -0,0 +1,66 @@
+import * as React from 'react';
+import Stack from '@mui/joy/Stack';
+import Button from '@mui/joy/Button';
+import Typography from '@mui/joy/Typography';
+import CircularProgress from '@mui/joy/CircularProgress';
+import { useCountUp } from 'use-count-up';
+
+export default function CircularProgressCountUp() {
+  const [isLoading, setIsLoading] = React.useState(false);
+  const [buttonLabel, setButtonLabel] = React.useState('Start'); // Track button label
+
+  const { value: value1, reset: resetValue1 } = useCountUp({
+    isCounting: isLoading,
+    duration: 1,
+    start: 0,
+    end: 25,
+    onEnd: () => {
+      setIsLoading(false);
+      setButtonLabel('Reset'); // Change the button label when loading is complete
+    },
+  });
+
+  const { value: value2, reset } = useCountUp({
+    isCounting: true,
+    duration: 1,
+    start: 0,
+    end: 75,
+  });
+
+  const handleButtonClick = () => {
+    if (isLoading) {
+      setIsLoading(false);
+      setButtonLabel('Start');
+      resetValue1(); // Reset the value
+    } else {
+      setIsLoading(true);
+      setButtonLabel('Reset');
+    }
+  };
+
+  return (
+    <Stack direction="row" alignItems="center" flexWrap="wrap" spacing={8}>
+      <Stack spacing={2}>
+        <CircularProgress size="lg" determinate value={value1}>
+          <Typography>{value1}%</Typography>
+        </CircularProgress>
+        <Button
+          size="sm"
+          variant="outlined"
+          color="neutral"
+          onClick={handleButtonClick} // Use a single click handler
+        >
+          {buttonLabel}
+        </Button>
+      </Stack>
+      <Stack spacing={2}>
+        <CircularProgress size="lg" determinate value={value2}>
+          <Typography>{value2}%</Typography>
+        </CircularProgress>
+        <Button size="sm" variant="outlined" color="neutral" onClick={reset}>
+          Reload
+        </Button>
+      </Stack>
+    </Stack>
+  );
+}

docs/data/joy/components/circular-progress/circular-progress.md

@@ -86,6 +86,14 @@ The size of the Circular Progress is controlled by a button, an icon button, or
 
 {{"demo": "CircularProgressButton.js"}}
 
+## Third-party integrations
+
+### use-count-up
+
+Use the `useCountUp` hook from the [use-count-up](https://www.npmjs.com/package/use-count-up) package to create a counting animation by providing `start`, `end`, and `duration` values.
+
+{{"demo": "CircularProgressCountUp.js"}}
+
 ## CSS variables playground
 
 Play around with all the CSS variables available on the component to see how the design changes.

docs/src/icons/SvgMuiLogomark.tsx

@@ -5,16 +5,16 @@ export default function SvgMuiLogomark(props: RootSvgProps) {
   return (
     <RootSvg
       xmlns="http://www.w3.org/2000/svg"
-      width={36}
+      width={35}
       height={32}
-      viewBox="0 0 36 32"
+      viewBox="0 0 35 32"
       fill="none"
       {...props}
     >
       <path
         fillRule="evenodd"
         clipRule="evenodd"
-        d="M30.343 21.976a1 1 0 00.502-.864l.018-5.787a1 1 0 01.502-.864l3.137-1.802a1 1 0 011.498.867v10.521a1 1 0 01-.502.867l-11.839 6.8a1 1 0 01-.994.001l-9.291-5.314a1 1 0 01-.504-.868v-5.305c0-.006.007-.01.013-.007.005.003.012 0 .012-.007v-.006c0-.004.002-.008.006-.01l7.652-4.396c.007-.004.004-.015-.004-.015a.008.008 0 01-.008-.008l.015-5.201a1 1 0 00-1.5-.87l-5.687 3.277a1 1 0 01-.998 0L6.666 9.7a1 1 0 00-1.499.866v9.4a1 1 0 01-1.496.869l-3.166-1.81a1 1 0 01-.504-.87l.028-16.43A1 1 0 011.527.86l10.845 6.229a1 1 0 00.996 0L24.21.86a1 1 0 011.498.868v16.434a1 1 0 01-.501.867l-5.678 3.27a1 1 0 00.004 1.735l3.132 1.783a1 1 0 00.993-.002l6.685-3.839zM31 7.234a1 1 0 001.514.857l3-1.8A1 1 0 0036 5.434V1.766A1 1 0 0034.486.91l-3 1.8a1 1 0 00-.486.857v3.668z"
+        d="M10.992 6.412 1.504.877A1 1 0 0 0 0 1.741v15.627a2 2 0 0 0 .971 1.715l2.514 1.508A1 1 0 0 0 5 19.734v-9.01a1 1 0 0 1 1.496-.87l4.512 2.579a2 2 0 0 0 1.984 0l4.512-2.578a1 1 0 0 1 1.496.868v4.116a2 2 0 0 1-1.008 1.737l-5.236 2.992A1.5 1.5 0 0 0 12 20.87v4.06a2 2 0 0 0 .89 1.664l7.081 4.72a2 2 0 0 0 2.102.073l12.171-6.955A1.5 1.5 0 0 0 35 23.13V12.265a1 1 0 0 0-1.514-.857l-2.515 1.508A2 2 0 0 0 30 14.632v5.485a1.5 1.5 0 0 1-.771 1.312l-7.43 4.127a1.5 1.5 0 0 1-1.56-.063l-2.424-1.616a1 1 0 0 1 .04-1.69l5.174-3.104A2 2 0 0 0 24 17.368V1.74a1 1 0 0 0-1.504-.864l-9.488 5.535a2 2 0 0 1-2.016 0Z M34.029 7.583 31.514 9.09A1 1 0 0 1 30 8.234V4.132a2 2 0 0 1 .971-1.715L33.486.91A1 1 0 0 1 35 1.766v4.102a2 2 0 0 1-.971 1.715Z"
         fill="#007FFF"
       />
     </RootSvg>