@bug-on/m3-expressive 1.2.5 → 1.2.6

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @bug-on/m3-expressive
 
+## 1.2.6
+
+### Patch Changes
+
+- 564003a: Improve Progress Indicator component
+
 ## 1.2.5
 
 ### Patch Changes

package/dist/buttons.js

@@ -278,24 +278,36 @@ function generateWavyCircularPath(center, radius, amplitude, wavelength) {
     if (i === 0) d += `M ${xAt(t0).toFixed(2)} ${yAt(t0).toFixed(2)}`;
     d += ` C ${cp1x.toFixed(2)} ${cp1y.toFixed(2)}, ${cp2x.toFixed(2)} ${cp2y.toFixed(2)}, ${xAt(t1).toFixed(2)} ${yAt(t1).toFixed(2)}`;
   }
-  d += " Z";
   return d;
 }
 function getSinePath(startX, endX, phase, wl, amp) {
   if (startX >= endX) return "";
-  let d = "";
-  const step = amp === 0 ? Math.max(10, endX - startX) : 1;
-  const yStart = Math.sin((startX + phase) / wl * 2 * Math.PI) * amp;
-  d += `M ${startX.toFixed(2)} ${yStart.toFixed(2)}`;
-  let nextX = Math.ceil(startX / step) * step;
-  if (nextX === startX) nextX += step;
-  while (nextX < endX) {
-    const y = Math.sin((nextX + phase) / wl * 2 * Math.PI) * amp;
-    d += ` L ${nextX.toFixed(2)} ${y.toFixed(2)}`;
-    nextX += step;
+  if (amp <= 0.01) {
+    return `M ${startX.toFixed(2)} 0 L ${endX.toFixed(2)} 0`;
+  }
+  const safeWl = Math.max(1, wl);
+  const k = 2 * Math.PI / safeWl;
+  const phi = phase / safeWl * 2 * Math.PI;
+  const yAt = (x) => amp * Math.sin(k * x + phi);
+  const dyAt = (x) => amp * k * Math.cos(k * x + phi);
+  const step = safeWl / 4;
+  let d = `M ${startX.toFixed(2)} ${yAt(startX).toFixed(2)}`;
+  let currentX = startX;
+  while (currentX < endX) {
+    const nextX = Math.min(endX, currentX + step);
+    const dx = nextX - currentX;
+    const scale = dx / 3;
+    const y0 = yAt(currentX);
+    const dy0 = dyAt(currentX);
+    const y1 = yAt(nextX);
+    const dy1 = dyAt(nextX);
+    const cp1x = currentX + scale;
+    const cp1y = y0 + scale * dy0;
+    const cp2x = nextX - scale;
+    const cp2y = y1 - scale * dy1;
+    d += ` C ${cp1x.toFixed(2)} ${cp1y.toFixed(2)}, ${cp2x.toFixed(2)} ${cp2y.toFixed(2)}, ${nextX.toFixed(2)} ${y1.toFixed(2)}`;
+    currentX = nextX;
   }
-  const yEnd = Math.sin((endX + phase) / wl * 2 * Math.PI) * amp;
-  d += ` L ${endX.toFixed(2)} ${yEnd.toFixed(2)}`;
   return d;
 }
 var CircularProgress = React16__namespace.forwardRef(
@@ -450,16 +462,13 @@ var CircularProgress = React16__namespace.forwardRef(
                 position: "absolute",
                 inset: 0,
                 overflow: "visible",
-                rotate: "-90deg",
                 transformOrigin: "center"
               },
-              animate: { rotate: ["-90deg", "270deg"] },
+              animate: { rotate: [0, 360] },
               transition: {
-                rotate: {
-                  duration: 2 / Math.max(0.1, crawlerSpeed),
-                  repeat: Number.POSITIVE_INFINITY,
-                  ease: "linear"
-                }
+                duration: 2 / Math.max(0.1, crawlerSpeed),
+                repeat: Number.POSITIVE_INFINITY,
+                ease: "linear"
               },
               children: [
                 /* @__PURE__ */ jsxRuntime.jsx(
@@ -472,17 +481,16 @@ var CircularProgress = React16__namespace.forwardRef(
                     stroke: bgTrackColor,
                     strokeWidth: trackHeight,
                     strokeLinecap: "round",
-                    style: { originX: "50%", originY: "50%" },
                     animate: {
                       pathLength: [
-                        Math.max(1e-3, 1 - 0.1 - 2 * gapForTrack),
-                        Math.max(1e-3, 1 - 0.75 - 2 * gapForTrack),
-                        Math.max(1e-3, 1 - 0.1 - 2 * gapForTrack)
+                        Math.max(1e-3, 0.9 - 2 * gapForTrack),
+                        Math.max(1e-3, 0.25 - 2 * gapForTrack),
+                        Math.max(1e-3, 0.9 - 2 * gapForTrack)
                       ],
-                      rotate: [
-                        `${(0.1 + gapForTrack) * 360}deg`,
-                        `${(1 + gapForTrack) * 360}deg`,
-                        `${(1.1 + gapForTrack) * 360}deg`
+                      pathOffset: [
+                        0.1 + gapForTrack,
+                        0.75 + gapForTrack,
+                        0.1 + gapForTrack
                       ]
                     },
                     transition: {
@@ -500,10 +508,9 @@ var CircularProgress = React16__namespace.forwardRef(
                     stroke: activeColor,
                     strokeWidth: trackHeight,
                     strokeLinecap: "round",
-                    style: { originX: "50%", originY: "50%" },
                     animate: {
                       pathLength: [0.1, 0.75, 0.1],
-                      rotate: ["0deg", "90deg", "360deg"]
+                      pathOffset: [0, 0.65, 1]
                     },
                     transition: {
                       duration: 2 / Math.max(0.1, crawlerSpeed),
@@ -521,10 +528,9 @@ var CircularProgress = React16__namespace.forwardRef(
                     stroke: activeColor,
                     strokeWidth: trackHeight,
                     strokeLinecap: "round",
-                    style: { originX: "50%", originY: "50%" },
                     animate: {
                       pathLength: [0.1, 0.75, 0.1],
-                      rotate: ["0deg", "90deg", "360deg"]
+                      pathOffset: [0, 0.65, 1]
                     },
                     transition: {
                       duration: 2 / Math.max(0.1, crawlerSpeed),
@@ -697,6 +703,12 @@ var WavyLinearTrack = React16__namespace.memo(function WavyLinearTrack2({
         duration: 0.5
       });
       react.animate(fractionMV, fraction, { duration: 0.4, ease: [0.2, 0, 0, 1] });
+    } else {
+      react.animate(amplitudeMV, amplitude, {
+        type: "spring",
+        bounce: 0,
+        duration: 0.5
+      });
     }
   }, [
     clampedValue,
@@ -710,10 +722,10 @@ var WavyLinearTrack = React16__namespace.memo(function WavyLinearTrack2({
     1,
     isDeterminate ? wavelength : indeterminateWavelength
   );
-  const trackAmp = trackShape === "wavy" ? amplitude : 0;
   react.useAnimationFrame((time) => {
     if (width === 0) return;
     const currentAmp = amplitudeMV.get();
+    const trackAmp = trackShape === "wavy" ? amplitude : 0;
     const phase = time / 1e3 * waveSpeed * activeWavelength;
     const capWidth = trackHeight / 2;
     let activePathD = "";
@@ -814,7 +826,7 @@ var WavyLinearTrack = React16__namespace.memo(function WavyLinearTrack2({
     "div",
     {
       ref: containerRef,
-      className: "relative w-full overflow-hidden",
+      className: "relative w-full",
       style: { height: svgHeight },
       children: width > 0 && /* @__PURE__ */ jsxRuntime.jsxs(
         "svg",
@@ -868,7 +880,7 @@ var LinearProgress = React16__namespace.forwardRef(
       waveSpeed = 1,
       crawlerSpeed = 1,
       determinateAnimation = "md3",
-      indeterminateAnimation = "continuous",
+      indeterminateAnimation = "md3",
       gapSize = 4,
       showStopIndicator = "auto",
       color,
@@ -905,15 +917,15 @@ var LinearProgress = React16__namespace.forwardRef(
         setIsRtl(dir === "rtl");
       }
     }, []);
-    const isWavy = shape === "wavy";
     const resolvedTrackShape = trackShape != null ? trackShape : shape;
+    const isWavy = shape === "wavy" || resolvedTrackShape === "wavy";
     const effectiveAmplitude = React16__namespace.useMemo(() => amplitude != null ? amplitude : 3, [amplitude]);
     const svgHeight = React16__namespace.useMemo(
       () => isWavy ? trackHeight + effectiveAmplitude * 2 : trackHeight,
       [isWavy, trackHeight, effectiveAmplitude]
     );
     const shouldShowStop = React16__namespace.useMemo(
-      () => isDeterminate && resolvedTrackShape === "flat" && (showStopIndicator === true || showStopIndicator === "auto" && isDeterminate),
+      () => isDeterminate && resolvedTrackShape === "flat" && showStopIndicator !== false,
       [isDeterminate, resolvedTrackShape, showStopIndicator]
     );
     const stopSize = React16__namespace.useMemo(
@@ -923,6 +935,8 @@ var LinearProgress = React16__namespace.forwardRef(
     const stopOffset = (trackHeight - stopSize) / 2;
     const activeColor = color || "var(--md-sys-color-indicator-active)";
     const bgTrackColor = trackColor || "var(--md-sys-color-indicator-track)";
+    const useWavyTrack = isWavy || !isDeterminate;
+    const trackAmp = isWavy ? effectiveAmplitude : 0;
     return /* @__PURE__ */ jsxRuntime.jsx(react.LazyMotion, { features: react.domMax, strict: true, children: /* @__PURE__ */ jsxRuntime.jsxs(
       "div",
       __spreadProps(__spreadValues({
@@ -939,12 +953,12 @@ var LinearProgress = React16__namespace.forwardRef(
         style: { height: svgHeight }
       }, restProps), {
         children: [
-          isWavy ? /* @__PURE__ */ jsxRuntime.jsx(
+          useWavyTrack ? /* @__PURE__ */ jsxRuntime.jsx(
             WavyLinearTrack,
             {
               trackHeight,
               svgHeight,
-              amplitude: effectiveAmplitude,
+              amplitude: trackAmp,
               wavelength,
               indeterminateWavelength,
               activeColor,