@bug-on/m3-expressive 1.2.7 → 1.3.1

package/dist/layout.mjs

@@ -1,7 +1,7 @@
 "use client";
 import { Slot } from '@radix-ui/react-slot';
 import { cva } from 'class-variance-authority';
-import { m, LazyMotion, domMax, useAnimationFrame, useMotionValue, animate, AnimatePresence, useReducedMotion } from 'motion/react';
+import { m, LazyMotion, domMax, useMotionValue, animate, useAnimationFrame, AnimatePresence, useReducedMotion } from 'motion/react';
 import * as React18 from 'react';
 import { createContext, useState, useCallback, useMemo, useEffect, useContext, createElement } from 'react';
 import { clsx } from 'clsx';
@@ -488,7 +488,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,
@@ -496,8 +496,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);
@@ -562,15 +562,18 @@ var CircularProgress = React18.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
@@ -579,15 +582,18 @@ var CircularProgress = React18.forwardRef(
       "size",
       "trackHeight",
       "shape",
+      "trackShape",
       "amplitude",
       "wavelength",
       "gapSize",
+      "waveSpeed",
       "crawlerSpeed",
       "color",
       "trackColor",
       "showTrack",
       "minProgress",
       "maxProgress",
+      "determinateAnimation",
       "amplitudeRange",
       "className",
       "aria-label"
@@ -600,6 +606,7 @@ var CircularProgress = React18.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 = React18.useMemo(
@@ -632,19 +639,50 @@ var CircularProgress = React18.forwardRef(
     const trackOffset = isDeterminate ? activeAngularFraction + gapForTrack : 0;
     const trackLength = isDeterminate ? Math.max(1e-3, 1 - activeAngularFraction - 2 * gapForTrack) : 1;
     const ActiveCircleElem = m.circle;
-    const ActivePathElem = m.path;
     const indeterminateSvgRef = React18.useRef(null);
     const indeterminateTrackRef = React18.useRef(null);
     const indeterminateActiveRef = React18.useRef(null);
     const indeterminateWavyTrackPathRef = React18.useRef(null);
     const indeterminateWavyActivePathRef = React18.useRef(null);
+    const determinateWavyActivePathRef = React18.useRef(null);
+    const determinateWavyTrackPathRef = React18.useRef(null);
     const cachedPathLengthRef = React18.useRef(0);
+    const fractionMV = useMotionValue(isDeterminate ? clampedValue / 100 : 0);
+    const amplitudeMV = useMotionValue(isWavy ? effectiveAmplitude : 0);
+    React18.useEffect(() => {
+      if (isDeterminate) {
+        animate(fractionMV, clampedValue / 100, {
+          duration: 0.4,
+          ease: [0.2, 0, 0, 1]
+        });
+      }
+    }, [clampedValue, isDeterminate, fractionMV]);
+    React18.useEffect(() => {
+      if (!isDeterminate || !isWavy) return;
+      const fraction = clampedValue / 100;
+      let targetAmp = effectiveAmplitude;
+      if (determinateAnimation === "md3") {
+        targetAmp = fraction <= 0.1 || fraction >= 0.95 ? 0 : effectiveAmplitude;
+      }
+      animate(amplitudeMV, targetAmp, {
+        type: "spring",
+        bounce: 0,
+        duration: 0.5
+      });
+    }, [
+      clampedValue,
+      isDeterminate,
+      isWavy,
+      effectiveAmplitude,
+      amplitudeMV,
+      determinateAnimation
+    ]);
     React18.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();
@@ -658,7 +696,65 @@ var CircularProgress = React18.forwardRef(
       cachedPathLengthRef.current = circumference;
     }, [isWavy, circumference, wavyActivePath]);
     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;
@@ -693,7 +789,8 @@ var CircularProgress = React18.forwardRef(
           center,
           radius,
           currentAmplitude,
-          effectiveWavelength
+          effectiveWavelength,
+          wavePhase
         );
         if (indeterminateWavyActivePathRef.current) {
           indeterminateWavyActivePathRef.current.setAttribute("d", dynamicPath);
@@ -788,7 +885,7 @@ var CircularProgress = React18.forwardRef(
         style: { width: size, height: size }
       }, restProps), {
         children: /* @__PURE__ */ jsxs(LazyMotion, { features: domMax, strict: true, children: [
-          /* @__PURE__ */ jsxs(
+          /* @__PURE__ */ jsx(
             "svg",
             {
               width: size,
@@ -796,8 +893,18 @@ var CircularProgress = React18.forwardRef(
               viewBox: `0 0 ${size} ${size}`,
               "aria-hidden": "true",
               style: { transform: "rotate(-90deg)", overflow: "visible" },
-              children: [
-                isDeterminate ? /* @__PURE__ */ jsx(
+              children: isDeterminate ? isWavy ? /* @__PURE__ */ jsxs(Fragment, { children: [
+                shouldShowDeterminateTrack && (trackShape === "wavy" ? /* @__PURE__ */ jsx(
+                  "path",
+                  {
+                    ref: determinateWavyTrackPathRef,
+                    d: wavyActivePath != null ? wavyActivePath : "",
+                    fill: "none",
+                    stroke: bgTrackColor,
+                    strokeWidth: trackHeight,
+                    strokeLinecap: "round"
+                  }
+                ) : /* @__PURE__ */ jsx(
                   m.circle,
                   {
                     cx: center,
@@ -806,28 +913,52 @@ var CircularProgress = React18.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__ */ jsx(
-                  ActivePathElem,
+                )),
+                /* @__PURE__ */ 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__ */ jsx(
+                )
+              ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+                /* @__PURE__ */ jsx(
+                  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__ */ jsx(
                   ActiveCircleElem,
                   {
                     cx: center,
@@ -844,8 +975,8 @@ var CircularProgress = React18.forwardRef(
                       ease: [0.2, 0, 0, 1]
                     }
                   }
-                ))
-              ]
+                )
+              ] }) : null
             }
           ),
           !isDeterminate && /* @__PURE__ */ jsx(
@@ -2282,7 +2413,7 @@ var DividerImpl = React18.forwardRef(
       insetStart = "standard",
       waveConfig,
       decorative = false,
-      animate: animate3 = true,
+      animate: animate4 = true,
       className,
       style
     } = _b, props = __objRest(_b, [
@@ -2298,7 +2429,7 @@ var DividerImpl = React18.forwardRef(
     ]);
     var _a2, _b2, _c;
     const reducedMotion = useReducedMotion();
-    const shouldAnimate = animate3 && !reducedMotion;
+    const shouldAnimate = animate4 && !reducedMotion;
     const effectiveShape = shape === "wavy" && orientation === "vertical" ? "flat" : shape;
     if (shape === "wavy" && orientation === "vertical") {
       console.warn(
@@ -4435,39 +4566,7 @@ var typographyVariants = cva("m-0 p-0 text-m3-on-surface", {
       "label-sm": "text-[11px] leading-[16px] font-medium tracking-[0.5px]",
       "body-lg": "text-[16px] leading-[24px] font-normal tracking-[0.5px]",
       "body-md": "text-[14px] leading-[20px] font-normal tracking-[0.25px]",
-      "body-sm": "text-[12px] leading-[16px] font-normal tracking-[0.4px]",
-      // Full hyphenated aliases
-      "display-large": "text-[57px] leading-[64px] font-normal tracking-[-0.25px]",
-      "display-medium": "text-[45px] leading-[52px] font-normal tracking-[0px]",
-      "display-small": "text-[36px] leading-[44px] font-normal tracking-[0px]",
-      "headline-large": "text-[32px] leading-[40px] font-normal tracking-[0px]",
-      "headline-medium": "text-[28px] leading-[36px] font-normal tracking-[0px]",
-      "headline-small": "text-[24px] leading-[32px] font-normal tracking-[0px]",
-      "title-large": "text-[22px] leading-[28px] font-normal tracking-[0px]",
-      "title-medium": "text-[16px] leading-[24px] font-medium tracking-[0.15px]",
-      "title-small": "text-[14px] leading-[20px] font-medium tracking-[0.1px]",
-      "label-large": "text-[14px] leading-[20px] font-medium tracking-[0.1px]",
-      "label-medium": "text-[12px] leading-[16px] font-medium tracking-[0.5px]",
-      "label-small": "text-[11px] leading-[16px] font-medium tracking-[0.5px]",
-      "body-large": "text-[16px] leading-[24px] font-normal tracking-[0.5px]",
-      "body-medium": "text-[14px] leading-[20px] font-normal tracking-[0.25px]",
-      "body-small": "text-[12px] leading-[16px] font-normal tracking-[0.4px]",
-      // CamelCase aliases
-      displayLarge: "text-[57px] leading-[64px] font-normal tracking-[-0.25px]",
-      displayMedium: "text-[45px] leading-[52px] font-normal tracking-[0px]",
-      displaySmall: "text-[36px] leading-[44px] font-normal tracking-[0px]",
-      headlineLarge: "text-[32px] leading-[40px] font-normal tracking-[0px]",
-      headlineMedium: "text-[28px] leading-[36px] font-normal tracking-[0px]",
-      headlineSmall: "text-[24px] leading-[32px] font-normal tracking-[0px]",
-      titleLarge: "text-[22px] leading-[28px] font-normal tracking-[0px]",
-      titleMedium: "text-[16px] leading-[24px] font-medium tracking-[0.15px]",
-      titleSmall: "text-[14px] leading-[20px] font-medium tracking-[0.1px]",
-      labelLarge: "text-[14px] leading-[20px] font-medium tracking-[0.1px]",
-      labelMedium: "text-[12px] leading-[16px] font-medium tracking-[0.5px]",
-      labelSmall: "text-[11px] leading-[16px] font-medium tracking-[0.5px]",
-      bodyLarge: "text-[16px] leading-[24px] font-normal tracking-[0.5px]",
-      bodyMedium: "text-[14px] leading-[20px] font-normal tracking-[0.25px]",
-      bodySmall: "text-[12px] leading-[16px] font-normal tracking-[0.4px]"
+      "body-sm": "text-[12px] leading-[16px] font-normal tracking-[0.4px]"
     }
   },
   defaultVariants: {