@bug-on/m3-expressive 1.3.0 → 1.3.1

package/dist/feedback.d.mts

@@ -281,6 +281,14 @@ interface CircularProgressProps extends ProgressBaseProps {
      * - `wavy`: Oscillating wavy line pattern.
      */
     shape?: "flat" | "wavy";
+    /**
+     * Shape profile of the background track in Determinate mode.
+     * - `flat`: Smooth circular ring line (default)
+     * - `wavy`: Matching wave line contour as the active indicator
+     *
+     * @default "flat"
+     */
+    trackShape?: "flat" | "wavy";
     /**
      * Wave amplitude profile for `wavy` circular indicators.
      */
@@ -289,6 +297,10 @@ interface CircularProgressProps extends ProgressBaseProps {
     wavelength?: number;
     /** Gap distance separating line ends. */
     gapSize?: number;
+    /**
+     * Speed multiplier for wavy animation ripples. Defaults to `1`.
+     */
+    waveSpeed?: number;
     /**
      * Speed multiplier for Indeterminate circular crawler rotation.
      */
@@ -316,6 +328,14 @@ interface CircularProgressProps extends ProgressBaseProps {
      * @default 0.8 (matching M3 Kotlin)
      */
     maxProgress?: number;
+    /**
+     * Configuration for wave damping near edge thresholds (<= 10% or >= 95%) in Determinate Wavy mode.
+     * - `md3`: Smoothly flattens wave amplitude to zero near edges (Google MD3 standard: Flat → Wavy → Flat).
+     * - `continuous`: Ignores damping, preserving wave motion across all percentages (0–100%).
+     *
+     * @default "md3"
+     */
+    determinateAnimation?: "md3" | "continuous";
     /**
      * Amplitude range for wavy indeterminate mode as `[min, max]`.
      * The amplitude modulates between these values based on the arc length.

package/dist/feedback.d.ts

@@ -281,6 +281,14 @@ interface CircularProgressProps extends ProgressBaseProps {
      * - `wavy`: Oscillating wavy line pattern.
      */
     shape?: "flat" | "wavy";
+    /**
+     * Shape profile of the background track in Determinate mode.
+     * - `flat`: Smooth circular ring line (default)
+     * - `wavy`: Matching wave line contour as the active indicator
+     *
+     * @default "flat"
+     */
+    trackShape?: "flat" | "wavy";
     /**
      * Wave amplitude profile for `wavy` circular indicators.
      */
@@ -289,6 +297,10 @@ interface CircularProgressProps extends ProgressBaseProps {
     wavelength?: number;
     /** Gap distance separating line ends. */
     gapSize?: number;
+    /**
+     * Speed multiplier for wavy animation ripples. Defaults to `1`.
+     */
+    waveSpeed?: number;
     /**
      * Speed multiplier for Indeterminate circular crawler rotation.
      */
@@ -316,6 +328,14 @@ interface CircularProgressProps extends ProgressBaseProps {
      * @default 0.8 (matching M3 Kotlin)
      */
     maxProgress?: number;
+    /**
+     * Configuration for wave damping near edge thresholds (<= 10% or >= 95%) in Determinate Wavy mode.
+     * - `md3`: Smoothly flattens wave amplitude to zero near edges (Google MD3 standard: Flat → Wavy → Flat).
+     * - `continuous`: Ignores damping, preserving wave motion across all percentages (0–100%).
+     *
+     * @default "md3"
+     */
+    determinateAnimation?: "md3" | "continuous";
     /**
      * Amplitude range for wavy indeterminate mode as `[min, max]`.
      * The amplitude modulates between these values based on the arc length.

package/dist/feedback.js

@@ -363,7 +363,7 @@ LoadingIndicator.displayName = "LoadingIndicator";
 function easeInOutCubic(x) {
   return x < 0.5 ? 4 * x * x * x : 1 - (-2 * x + 2) ** 3 / 2;
 }
-function generateWavyCircularPath(center, radius, amplitude, wavelength) {
+function generateWavyCircularPath(center, radius, amplitude, wavelength, phase = 0) {
   const circumference = 2 * Math.PI * radius;
   const numWaves = Math.max(
     3,
@@ -371,8 +371,8 @@ function generateWavyCircularPath(center, radius, amplitude, wavelength) {
   );
   const steps = numWaves * 4;
   const dt = 2 * Math.PI / steps;
-  const rAt = (t) => radius + amplitude * Math.sin(numWaves * t);
-  const drAt = (t) => amplitude * numWaves * Math.cos(numWaves * t);
+  const rAt = (t) => radius + amplitude * Math.sin(numWaves * t + phase);
+  const drAt = (t) => amplitude * numWaves * Math.cos(numWaves * t + phase);
   const xAt = (t) => center + rAt(t) * Math.cos(t);
   const yAt = (t) => center + rAt(t) * Math.sin(t);
   const dxAt = (t) => drAt(t) * Math.cos(t) - rAt(t) * Math.sin(t);
@@ -437,15 +437,18 @@ var CircularProgress = React3__namespace.forwardRef(
       size = 48,
       trackHeight = 4,
       shape = "flat",
+      trackShape = "flat",
       amplitude,
       wavelength,
       gapSize = 4,
+      waveSpeed = 1,
       crawlerSpeed = 1,
       color,
       trackColor,
       showTrack = "auto",
       minProgress = DEFAULT_MIN_PROGRESS,
       maxProgress = DEFAULT_MAX_PROGRESS,
+      determinateAnimation = "md3",
       amplitudeRange,
       className,
       "aria-label": ariaLabel
@@ -454,15 +457,18 @@ var CircularProgress = React3__namespace.forwardRef(
       "size",
       "trackHeight",
       "shape",
+      "trackShape",
       "amplitude",
       "wavelength",
       "gapSize",
+      "waveSpeed",
       "crawlerSpeed",
       "color",
       "trackColor",
       "showTrack",
       "minProgress",
       "maxProgress",
+      "determinateAnimation",
       "amplitudeRange",
       "className",
       "aria-label"
@@ -475,6 +481,7 @@ var CircularProgress = React3__namespace.forwardRef(
     const bgTrackColor = trackColor || "var(--md-sys-color-indicator-track)";
     const isWavy = shape === "wavy";
     const shouldShowIndeterminateTrack = showTrack === "auto" ? isWavy : showTrack;
+    const shouldShowDeterminateTrack = showTrack === "auto" ? true : showTrack;
     const BASELINE_SIZE = 48;
     const scaleFactor = size / BASELINE_SIZE;
     const effectiveAmplitude = React3__namespace.useMemo(
@@ -507,19 +514,50 @@ var CircularProgress = React3__namespace.forwardRef(
     const trackOffset = isDeterminate ? activeAngularFraction + gapForTrack : 0;
     const trackLength = isDeterminate ? Math.max(1e-3, 1 - activeAngularFraction - 2 * gapForTrack) : 1;
     const ActiveCircleElem = react.m.circle;
-    const ActivePathElem = react.m.path;
     const indeterminateSvgRef = React3__namespace.useRef(null);
     const indeterminateTrackRef = React3__namespace.useRef(null);
     const indeterminateActiveRef = React3__namespace.useRef(null);
     const indeterminateWavyTrackPathRef = React3__namespace.useRef(null);
     const indeterminateWavyActivePathRef = React3__namespace.useRef(null);
+    const determinateWavyActivePathRef = React3__namespace.useRef(null);
+    const determinateWavyTrackPathRef = React3__namespace.useRef(null);
     const cachedPathLengthRef = React3__namespace.useRef(0);
+    const fractionMV = react.useMotionValue(isDeterminate ? clampedValue / 100 : 0);
+    const amplitudeMV = react.useMotionValue(isWavy ? effectiveAmplitude : 0);
+    React3__namespace.useEffect(() => {
+      if (isDeterminate) {
+        react.animate(fractionMV, clampedValue / 100, {
+          duration: 0.4,
+          ease: [0.2, 0, 0, 1]
+        });
+      }
+    }, [clampedValue, isDeterminate, fractionMV]);
+    React3__namespace.useEffect(() => {
+      if (!isDeterminate || !isWavy) return;
+      const fraction = clampedValue / 100;
+      let targetAmp = effectiveAmplitude;
+      if (determinateAnimation === "md3") {
+        targetAmp = fraction <= 0.1 || fraction >= 0.95 ? 0 : effectiveAmplitude;
+      }
+      react.animate(amplitudeMV, targetAmp, {
+        type: "spring",
+        bounce: 0,
+        duration: 0.5
+      });
+    }, [
+      clampedValue,
+      isDeterminate,
+      isWavy,
+      effectiveAmplitude,
+      amplitudeMV,
+      determinateAnimation
+    ]);
     React3__namespace.useLayoutEffect(() => {
       if (!isWavy || !wavyActivePath) {
         cachedPathLengthRef.current = circumference;
         return;
       }
-      const el = indeterminateActiveRef.current;
+      const el = indeterminateActiveRef.current || determinateWavyActivePathRef.current;
       if (el && "getTotalLength" in el) {
         try {
           const len = el.getTotalLength();
@@ -533,7 +571,65 @@ var CircularProgress = React3__namespace.forwardRef(
       cachedPathLengthRef.current = circumference;
     }, [isWavy, circumference, wavyActivePath]);
     react.useAnimationFrame((time) => {
-      if (isDeterminate) return;
+      const safeWaveSpeed = Math.max(0.1, waveSpeed);
+      const wavePhase = time / 1e3 * safeWaveSpeed * 2 * Math.PI;
+      if (isDeterminate) {
+        if (isWavy) {
+          const currentAmp = amplitudeMV.get();
+          const dynamicPath = generateWavyCircularPath(
+            center,
+            radius,
+            currentAmp,
+            effectiveWavelength,
+            wavePhase
+          );
+          if (determinateWavyActivePathRef.current) {
+            determinateWavyActivePathRef.current.setAttribute("d", dynamicPath);
+          }
+          if (trackShape === "wavy" && determinateWavyTrackPathRef.current) {
+            determinateWavyTrackPathRef.current.setAttribute("d", dynamicPath);
+          }
+          const pathEl = determinateWavyActivePathRef.current;
+          let totalLen = cachedPathLengthRef.current || circumference;
+          if (pathEl) {
+            try {
+              const len = pathEl.getTotalLength();
+              if (len > 0) totalLen = len;
+            } catch (e) {
+            }
+          }
+          const activeFrac = Math.max(0, Math.min(1, fractionMV.get()));
+          const activeLen = totalLen * activeFrac;
+          if (determinateWavyActivePathRef.current) {
+            determinateWavyActivePathRef.current.setAttribute(
+              "stroke-dasharray",
+              `${activeLen} ${totalLen}`
+            );
+            determinateWavyActivePathRef.current.setAttribute(
+              "stroke-dashoffset",
+              "0"
+            );
+          }
+          if (shouldShowDeterminateTrack && trackShape === "wavy" && determinateWavyTrackPathRef.current) {
+            const gapFrac = (gapSize + trackHeight) / totalLen;
+            const trackStartFrac = activeFrac + gapFrac;
+            const trackLen = Math.max(
+              1e-3,
+              totalLen * (1 - activeFrac - 2 * gapFrac)
+            );
+            const trackOff = -totalLen * trackStartFrac;
+            determinateWavyTrackPathRef.current.setAttribute(
+              "stroke-dasharray",
+              `${trackLen} ${totalLen}`
+            );
+            determinateWavyTrackPathRef.current.setAttribute(
+              "stroke-dashoffset",
+              `${trackOff}`
+            );
+          }
+        }
+        return;
+      }
       const safeCrawlerSpeed = Math.max(0.1, crawlerSpeed);
       const scaledTime = time * safeCrawlerSpeed;
       const globalCycle = scaledTime % GLOBAL_ROTATION_DURATION;
@@ -568,7 +664,8 @@ var CircularProgress = React3__namespace.forwardRef(
           center,
           radius,
           currentAmplitude,
-          effectiveWavelength
+          effectiveWavelength,
+          wavePhase
         );
         if (indeterminateWavyActivePathRef.current) {
           indeterminateWavyActivePathRef.current.setAttribute("d", dynamicPath);
@@ -663,7 +760,7 @@ var CircularProgress = React3__namespace.forwardRef(
         style: { width: size, height: size }
       }, restProps), {
         children: /* @__PURE__ */ jsxRuntime.jsxs(react.LazyMotion, { features: react.domMax, strict: true, children: [
-          /* @__PURE__ */ jsxRuntime.jsxs(
+          /* @__PURE__ */ jsxRuntime.jsx(
             "svg",
             {
               width: size,
@@ -671,8 +768,18 @@ var CircularProgress = React3__namespace.forwardRef(
               viewBox: `0 0 ${size} ${size}`,
               "aria-hidden": "true",
               style: { transform: "rotate(-90deg)", overflow: "visible" },
-              children: [
-                isDeterminate ? /* @__PURE__ */ jsxRuntime.jsx(
+              children: isDeterminate ? isWavy ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                shouldShowDeterminateTrack && (trackShape === "wavy" ? /* @__PURE__ */ jsxRuntime.jsx(
+                  "path",
+                  {
+                    ref: determinateWavyTrackPathRef,
+                    d: wavyActivePath != null ? wavyActivePath : "",
+                    fill: "none",
+                    stroke: bgTrackColor,
+                    strokeWidth: trackHeight,
+                    strokeLinecap: "round"
+                  }
+                ) : /* @__PURE__ */ jsxRuntime.jsx(
                   react.m.circle,
                   {
                     cx: center,
@@ -681,28 +788,52 @@ var CircularProgress = React3__namespace.forwardRef(
                     fill: "none",
                     stroke: bgTrackColor,
                     strokeWidth: trackHeight,
-                    initial: { pathLength: trackLength, pathOffset: trackOffset },
-                    animate: { pathLength: trackLength, pathOffset: trackOffset },
+                    initial: {
+                      pathLength: trackLength,
+                      pathOffset: trackOffset
+                    },
+                    animate: {
+                      pathLength: trackLength,
+                      pathOffset: trackOffset
+                    },
                     transition: { duration: 0.4, ease: [0.2, 0, 0, 1] },
                     strokeLinecap: "round"
                   }
-                ) : null,
-                isDeterminate && (isWavy ? /* @__PURE__ */ jsxRuntime.jsx(
-                  ActivePathElem,
+                )),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "path",
                   {
+                    ref: determinateWavyActivePathRef,
                     d: wavyActivePath != null ? wavyActivePath : "",
                     fill: "none",
                     stroke: activeColor,
                     strokeWidth: trackHeight,
-                    strokeLinecap: "round",
-                    initial: { pathLength: 0 },
-                    animate: { pathLength: clampedValue / 100 },
-                    transition: {
-                      duration: 0.4,
-                      ease: [0.2, 0, 0, 1]
-                    }
+                    strokeLinecap: "round"
                   }
-                ) : /* @__PURE__ */ jsxRuntime.jsx(
+                )
+              ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  react.m.circle,
+                  {
+                    cx: center,
+                    cy: center,
+                    r: radius,
+                    fill: "none",
+                    stroke: bgTrackColor,
+                    strokeWidth: trackHeight,
+                    initial: {
+                      pathLength: trackLength,
+                      pathOffset: trackOffset
+                    },
+                    animate: {
+                      pathLength: trackLength,
+                      pathOffset: trackOffset
+                    },
+                    transition: { duration: 0.4, ease: [0.2, 0, 0, 1] },
+                    strokeLinecap: "round"
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx(
                   ActiveCircleElem,
                   {
                     cx: center,
@@ -719,8 +850,8 @@ var CircularProgress = React3__namespace.forwardRef(
                       ease: [0.2, 0, 0, 1]
                     }
                   }
-                ))
-              ]
+                )
+              ] }) : null
             }
           ),
           !isDeterminate && /* @__PURE__ */ jsxRuntime.jsx(