@bug-on/m3-expressive 1.2.4 → 1.2.6

package/dist/buttons.mjs

@@ -256,24 +256,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.forwardRef(
@@ -428,16 +440,13 @@ var CircularProgress = React16.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(
@@ -450,17 +459,16 @@ var CircularProgress = React16.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: {
@@ -478,10 +486,9 @@ var CircularProgress = React16.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),
@@ -499,10 +506,9 @@ var CircularProgress = React16.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),
@@ -675,6 +681,12 @@ var WavyLinearTrack = React16.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,
@@ -688,10 +700,10 @@ var WavyLinearTrack = React16.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 = "";
@@ -792,7 +804,7 @@ var WavyLinearTrack = React16.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",
@@ -846,7 +858,7 @@ var LinearProgress = React16.forwardRef(
       waveSpeed = 1,
       crawlerSpeed = 1,
       determinateAnimation = "md3",
-      indeterminateAnimation = "continuous",
+      indeterminateAnimation = "md3",
       gapSize = 4,
       showStopIndicator = "auto",
       color,
@@ -883,15 +895,15 @@ var LinearProgress = React16.forwardRef(
         setIsRtl(dir === "rtl");
       }
     }, []);
-    const isWavy = shape === "wavy";
     const resolvedTrackShape = trackShape != null ? trackShape : shape;
+    const isWavy = shape === "wavy" || resolvedTrackShape === "wavy";
     const effectiveAmplitude = React16.useMemo(() => amplitude != null ? amplitude : 3, [amplitude]);
     const svgHeight = React16.useMemo(
       () => isWavy ? trackHeight + effectiveAmplitude * 2 : trackHeight,
       [isWavy, trackHeight, effectiveAmplitude]
     );
     const shouldShowStop = React16.useMemo(
-      () => isDeterminate && resolvedTrackShape === "flat" && (showStopIndicator === true || showStopIndicator === "auto" && isDeterminate),
+      () => isDeterminate && resolvedTrackShape === "flat" && showStopIndicator !== false,
       [isDeterminate, resolvedTrackShape, showStopIndicator]
     );
     const stopSize = React16.useMemo(
@@ -901,6 +913,8 @@ var LinearProgress = React16.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({
@@ -917,12 +931,12 @@ var LinearProgress = React16.forwardRef(
         style: { height: svgHeight }
       }, restProps), {
         children: [
-          isWavy ? /* @__PURE__ */ jsx(
+          useWavyTrack ? /* @__PURE__ */ jsx(
             WavyLinearTrack,
             {
               trackHeight,
               svgHeight,
-              amplitude: effectiveAmplitude,
+              amplitude: trackAmp,
               wavelength,
               indeterminateWavelength,
               activeColor,
@@ -1078,6 +1092,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",
@@ -1096,7 +1111,7 @@ var BUTTON_SIZE_TOKENS = {
     // 12dp
     pressedShapeRadius: cornerRadius.small,
     // 8dp
-    roundShapeRadius: 16
+    roundShapeRadius: ROUND_SHAPE_RADIUS
   },
   sm: {
     height: "2.5rem",
@@ -1115,7 +1130,7 @@ var BUTTON_SIZE_TOKENS = {
     // 12dp
     pressedShapeRadius: cornerRadius.small,
     // 8dp
-    roundShapeRadius: 20
+    roundShapeRadius: ROUND_SHAPE_RADIUS
   },
   md: {
     height: "3.5rem",
@@ -1134,7 +1149,7 @@ var BUTTON_SIZE_TOKENS = {
     // 16dp
     pressedShapeRadius: cornerRadius.medium,
     // 12dp
-    roundShapeRadius: 28
+    roundShapeRadius: ROUND_SHAPE_RADIUS
   },
   lg: {
     height: "6rem",
@@ -1153,7 +1168,7 @@ var BUTTON_SIZE_TOKENS = {
     // 28dp
     pressedShapeRadius: cornerRadius.large,
     // 16dp
-    roundShapeRadius: 48
+    roundShapeRadius: ROUND_SHAPE_RADIUS
   },
   xl: {
     height: "8.5rem",
@@ -1172,7 +1187,7 @@ var BUTTON_SIZE_TOKENS = {
     // 28dp
     pressedShapeRadius: cornerRadius.large,
     // 16dp
-    roundShapeRadius: 68
+    roundShapeRadius: ROUND_SHAPE_RADIUS
   }
 };
 var BUTTON_TYPOGRAPHY_TOKENS = {
@@ -1524,7 +1539,6 @@ var ButtonComponent = React16.forwardRef(
       m.button,
       __spreadProps(__spreadValues({
         ref,
-        layout: true,
         type: "button",
         "aria-pressed": isToggle ? isSelected : void 0,
         "aria-label": computedAriaLabel,