@bug-on/m3-expressive 1.2.4 → 1.2.6

package/dist/layout.mjs

@@ -515,24 +515,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;
-  }
-  const yEnd = Math.sin((endX + phase) / wl * 2 * Math.PI) * amp;
-  d += ` L ${endX.toFixed(2)} ${yEnd.toFixed(2)}`;
+  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;
+  }
   return d;
 }
 var CircularProgress = React18.forwardRef(
@@ -687,16 +699,13 @@ var CircularProgress = React18.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__ */ jsx(
@@ -709,17 +718,16 @@ var CircularProgress = React18.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: {
@@ -737,10 +745,9 @@ var CircularProgress = React18.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),
@@ -758,10 +765,9 @@ var CircularProgress = React18.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),
@@ -934,6 +940,12 @@ var WavyLinearTrack = React18.memo(function WavyLinearTrack2({
         duration: 0.5
       });
       animate(fractionMV, fraction, { duration: 0.4, ease: [0.2, 0, 0, 1] });
+    } else {
+      animate(amplitudeMV, amplitude, {
+        type: "spring",
+        bounce: 0,
+        duration: 0.5
+      });
     }
   }, [
     clampedValue,
@@ -947,10 +959,10 @@ var WavyLinearTrack = React18.memo(function WavyLinearTrack2({
     1,
     isDeterminate ? wavelength : indeterminateWavelength
   );
-  const trackAmp = trackShape === "wavy" ? amplitude : 0;
   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 = "";
@@ -1051,7 +1063,7 @@ var WavyLinearTrack = React18.memo(function WavyLinearTrack2({
     "div",
     {
       ref: containerRef,
-      className: "relative w-full overflow-hidden",
+      className: "relative w-full",
       style: { height: svgHeight },
       children: width > 0 && /* @__PURE__ */ jsxs(
         "svg",
@@ -1105,7 +1117,7 @@ var LinearProgress = React18.forwardRef(
       waveSpeed = 1,
       crawlerSpeed = 1,
       determinateAnimation = "md3",
-      indeterminateAnimation = "continuous",
+      indeterminateAnimation = "md3",
       gapSize = 4,
       showStopIndicator = "auto",
       color,
@@ -1142,15 +1154,15 @@ var LinearProgress = React18.forwardRef(
         setIsRtl(dir === "rtl");
       }
     }, []);
-    const isWavy = shape === "wavy";
     const resolvedTrackShape = trackShape != null ? trackShape : shape;
+    const isWavy = shape === "wavy" || resolvedTrackShape === "wavy";
     const effectiveAmplitude = React18.useMemo(() => amplitude != null ? amplitude : 3, [amplitude]);
     const svgHeight = React18.useMemo(
       () => isWavy ? trackHeight + effectiveAmplitude * 2 : trackHeight,
       [isWavy, trackHeight, effectiveAmplitude]
     );
     const shouldShowStop = React18.useMemo(
-      () => isDeterminate && resolvedTrackShape === "flat" && (showStopIndicator === true || showStopIndicator === "auto" && isDeterminate),
+      () => isDeterminate && resolvedTrackShape === "flat" && showStopIndicator !== false,
       [isDeterminate, resolvedTrackShape, showStopIndicator]
     );
     const stopSize = React18.useMemo(
@@ -1160,6 +1172,8 @@ var LinearProgress = React18.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__ */ jsx(LazyMotion, { features: domMax, strict: true, children: /* @__PURE__ */ jsxs(
       "div",
       __spreadProps(__spreadValues({
@@ -1176,12 +1190,12 @@ var LinearProgress = React18.forwardRef(
         style: { height: svgHeight }
       }, restProps), {
         children: [
-          isWavy ? /* @__PURE__ */ jsx(
+          useWavyTrack ? /* @__PURE__ */ jsx(
             WavyLinearTrack,
             {
               trackHeight,
               svgHeight,
-              amplitude: effectiveAmplitude,
+              amplitude: trackAmp,
               wavelength,
               indeterminateWavelength,
               activeColor,
@@ -1265,6 +1279,7 @@ function TouchTarget() {
 }
 var BUTTON_SHAPE_MORPH_SPRING = FAST_SPATIAL_SPRING;
 var BUTTON_RADIUS_SPRING = FAST_EFFECTS_SPRING;
+var ROUND_SHAPE_RADIUS = 9999;
 var BUTTON_SIZE_TOKENS = {
   xs: {
     height: "2rem",
@@ -1283,7 +1298,7 @@ var BUTTON_SIZE_TOKENS = {
     // 12dp
     pressedShapeRadius: cornerRadius.small,
     // 8dp
-    roundShapeRadius: 16
+    roundShapeRadius: ROUND_SHAPE_RADIUS
   },
   sm: {
     height: "2.5rem",
@@ -1302,7 +1317,7 @@ var BUTTON_SIZE_TOKENS = {
     // 12dp
     pressedShapeRadius: cornerRadius.small,
     // 8dp
-    roundShapeRadius: 20
+    roundShapeRadius: ROUND_SHAPE_RADIUS
   },
   md: {
     height: "3.5rem",
@@ -1321,7 +1336,7 @@ var BUTTON_SIZE_TOKENS = {
     // 16dp
     pressedShapeRadius: cornerRadius.medium,
     // 12dp
-    roundShapeRadius: 28
+    roundShapeRadius: ROUND_SHAPE_RADIUS
   },
   lg: {
     height: "6rem",
@@ -1340,7 +1355,7 @@ var BUTTON_SIZE_TOKENS = {
     // 28dp
     pressedShapeRadius: cornerRadius.large,
     // 16dp
-    roundShapeRadius: 48
+    roundShapeRadius: ROUND_SHAPE_RADIUS
   },
   xl: {
     height: "8.5rem",
@@ -1359,7 +1374,7 @@ var BUTTON_SIZE_TOKENS = {
     // 28dp
     pressedShapeRadius: cornerRadius.large,
     // 16dp
-    roundShapeRadius: 68
+    roundShapeRadius: ROUND_SHAPE_RADIUS
   }
 };
 var BUTTON_TYPOGRAPHY_TOKENS = {
@@ -1711,7 +1726,6 @@ var ButtonComponent = React18.forwardRef(
       m.button,
       __spreadProps(__spreadValues({
         ref,
-        layout: true,
         type: "button",
         "aria-pressed": isToggle ? isSelected : void 0,
         "aria-label": computedAriaLabel,