@tinybigui/react 0.15.0 → 0.16.0

package/dist/index.js

@@ -5159,9 +5159,6 @@ var DrawerItem = forwardRef(
 DrawerItem.displayName = "DrawerItem";
 var progressContainerVariants = cva(["inline-flex", "flex-col", "gap-1"], {
   variants: {
-    /**
-     * The visual type of the indicator.
-     */
     type: {
       linear: "w-full",
       circular: "items-center justify-center w-auto"
@@ -5171,41 +5168,60 @@ var progressContainerVariants = cva(["inline-flex", "flex-col", "gap-1"], {
     type: "linear"
   }
 });
-var progressTrackVariants = cva([
-  "relative",
-  "w-full",
-  "h-1",
-  // MD3: 4dp track height
-  "rounded-full",
-  // MD3: full corner radius
-  "overflow-hidden",
-  "bg-surface-container-highest"
-  // MD3: inactive track color
-]);
-var progressIndicatorVariants = cva([
+var progressLabelVariants = cva(["text-body-small", "text-on-surface", "select-none"]);
+var progressTrackVariants = cva(
+  [
+    "relative",
+    "w-full",
+    "overflow-visible",
+    // gap segments extend beyond clipping bounds
+    "rounded-full"
+  ],
+  {
+    variants: {
+      thickness: {
+        default: "h-1",
+        thick: "h-2"
+      }
+    },
+    defaultVariants: {
+      thickness: "default"
+    }
+  }
+);
+var progressActiveIndicatorVariants = cva([
   "absolute",
   "left-0",
   "top-0",
   "h-full",
   "rounded-full",
   "bg-primary",
-  // MD3: active track color
+  // Spatial spring — width changes are spatial (bar growing)
   "transition-[width]",
-  "duration-medium4",
-  // MD3: 400ms for value transitions
-  "ease-standard"
-  // MD3: cubic-bezier(0.2, 0, 0, 1)
+  "duration-spring-standard-default-spatial",
+  "ease-spring-standard-default-spatial"
+]);
+var progressInactiveSegmentVariants = cva([
+  "absolute",
+  "top-0",
+  "right-0",
+  "h-full",
+  "rounded-full",
+  "bg-primary-container",
+  // Spatial spring on left position (gap moves as progress moves)
+  "transition-[left]",
+  "duration-spring-standard-default-spatial",
+  "ease-spring-standard-default-spatial"
 ]);
 var progressStopIndicatorVariants = cva([
   "absolute",
   "right-0",
   "top-1/2",
   "-translate-y-1/2",
-  "w-1",
-  "h-1",
+  "size-1",
+  // 4dp
   "rounded-full",
   "bg-primary"
-  // MD3: stop indicator uses primary color
 ]);
 var progressCircularSizeVariants = cva(
   ["relative", "flex", "items-center", "justify-center", "flex-shrink-0"],
@@ -5213,11 +5229,8 @@ var progressCircularSizeVariants = cva(
     variants: {
       size: {
         small: "h-6 w-6",
-        // MD3: 24dp
         medium: "h-12 w-12",
-        // MD3: 48dp (default)
         large: "h-16 w-16"
-        // MD3: 64dp
       }
     },
     defaultVariants: {
@@ -5225,33 +5238,85 @@ var progressCircularSizeVariants = cva(
     }
   }
 );
-var progressLabelVariants = cva([
-  "text-body-small",
-  // MD3: body-small type scale (12px)
-  "text-on-surface",
-  // MD3: on-surface color role
-  "select-none"
-]);
-var STROKE_WIDTH = 4;
+function useReducedMotion2() {
+  const [reduced, setReduced] = useState(() => {
+    if (typeof window === "undefined") return false;
+    return window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+  });
+  useEffect(() => {
+    if (typeof window === "undefined") return;
+    const mql = window.matchMedia("(prefers-reduced-motion: reduce)");
+    const handler = (e) => setReduced(e.matches);
+    mql.addEventListener("change", handler);
+    return () => mql.removeEventListener("change", handler);
+  }, []);
+  return reduced;
+}
+var STROKE_WIDTH_DEFAULT = 4;
+var STROKE_WIDTH_THICK = 8;
+var INDICATOR_TRACK_GAP = 4;
 var CIRCULAR_SIZE_PX = {
   small: 24,
   medium: 48,
   large: 64
 };
-function getCircularGeometry(size) {
+var WAVE_AMPLITUDE_DEFAULT = 3;
+var WAVE_AMPLITUDE_THICK = 5;
+var LINEAR_WAVE_COUNT = 14;
+var VB_W = 100;
+var WAVE_WAVELENGTH_CIRCULAR = 30;
+function getStrokeWidth(thickness) {
+  return thickness === "thick" ? STROKE_WIDTH_THICK : STROKE_WIDTH_DEFAULT;
+}
+function getCircularGeometry(size, thickness) {
+  const strokeWidth = getStrokeWidth(thickness);
   const diameter = CIRCULAR_SIZE_PX[size];
-  const radius = (diameter - STROKE_WIDTH) / 2;
+  const radius = (diameter - strokeWidth) / 2;
   const circumference = 2 * Math.PI * radius;
   const viewBox = `0 0 ${diameter} ${diameter}`;
   const cx = diameter / 2;
   const cy = diameter / 2;
-  return { diameter, radius, circumference, viewBox, cx, cy };
+  return { diameter, radius, circumference, viewBox, cx, cy, strokeWidth };
+}
+function buildLinearWavePath(vbWidth, waveCount, amplitude, midY, padCycles = 0) {
+  const wavelength = vbWidth / waveCount;
+  const totalCycles = waveCount + padCycles;
+  const cp = wavelength / 4;
+  const segments = [`M 0 ${midY}`];
+  for (let i = 0; i < totalCycles; i++) {
+    const x = i * wavelength;
+    segments.push(
+      `C ${x + cp} ${midY - amplitude} ${x + wavelength / 2 - cp} ${midY - amplitude} ${x + wavelength / 2} ${midY}`
+    );
+    segments.push(
+      `C ${x + wavelength / 2 + cp} ${midY + amplitude} ${x + wavelength - cp} ${midY + amplitude} ${x + wavelength} ${midY}`
+    );
+  }
+  return segments.join(" ");
+}
+function buildCircularWavePath(cx, cy, radius, amplitude, waveCount, steps) {
+  const actualSteps = waveCount * 12;
+  const points = [];
+  for (let i = 0; i <= actualSteps; i++) {
+    const t = i / actualSteps;
+    const angle = t * 2 * Math.PI;
+    const radialOffset = amplitude * Math.sin(2 * Math.PI * waveCount * t);
+    const r = radius + radialOffset;
+    const x = cx + r * Math.cos(angle);
+    const y = cy + r * Math.sin(angle);
+    points.push(
+      i === 0 ? `M ${x.toFixed(2)} ${y.toFixed(2)}` : `L ${x.toFixed(2)} ${y.toFixed(2)}`
+    );
+  }
+  return points.join(" ") + " Z";
 }
 var Progress = forwardRef(
   ({
     type = "linear",
     indeterminate = false,
     size = "medium",
+    shape = "flat",
+    thickness = "default",
     className,
     label,
     value = 0,
@@ -5261,6 +5326,7 @@ var Progress = forwardRef(
   }, forwardedRef) => {
     const internalRef = useRef(null);
     const ref = forwardedRef ?? internalRef;
+    const reducedMotion = useReducedMotion2();
     const { progressBarProps, labelProps } = useProgressBar({
       label,
       value,
@@ -5270,6 +5336,7 @@ var Progress = forwardRef(
       ...restProps
     });
     const percentage = indeterminate ? 0 : Math.min(100, Math.max(0, (value - minValue) / (maxValue - minValue) * 100));
+    const effectiveShape = reducedMotion ? "flat" : shape;
     if (process.env.NODE_ENV !== "production") {
       const ariaProps = restProps;
       if (!label && !ariaProps["aria-label"] && !ariaProps["aria-labelledby"]) {
@@ -5286,52 +5353,72 @@ var Progress = forwardRef(
         className: cn(progressContainerVariants({ type }), className),
         children: [
           label && /* @__PURE__ */ jsx("span", { ...labelProps, className: cn(progressLabelVariants()), children: label }),
-          type === "linear" ? /* @__PURE__ */ jsx(LinearProgress, { percentage, indeterminate }) : /* @__PURE__ */ jsx(CircularProgress, { percentage, indeterminate, size })
-        ]
-      }
-    );
-  }
-);
-Progress.displayName = "Progress";
-function LinearProgress({ percentage, indeterminate }) {
-  if (indeterminate) {
-    return /* @__PURE__ */ jsx("div", { "data-progress-track": "", className: cn(progressTrackVariants()), children: /* @__PURE__ */ jsxs(
-      "div",
-      {
-        "data-progress-indeterminate": "",
-        className: "absolute inset-0 overflow-hidden rounded-full",
-        children: [
-          /* @__PURE__ */ jsx(
-            "div",
+          type === "linear" ? /* @__PURE__ */ jsx(
+            LinearProgress,
             {
-              className: cn(
-                "bg-primary absolute top-0 h-full rounded-full",
-                "animate-progress-linear-indeterminate-1"
-              )
+              percentage,
+              indeterminate,
+              shape: effectiveShape,
+              thickness,
+              reducedMotion
             }
-          ),
-          /* @__PURE__ */ jsx(
-            "div",
+          ) : /* @__PURE__ */ jsx(
+            CircularProgress,
             {
-              className: cn(
-                "bg-primary absolute top-0 h-full rounded-full",
-                "animate-progress-linear-indeterminate-2"
-              )
+              percentage,
+              indeterminate,
+              size,
+              shape: effectiveShape,
+              thickness,
+              reducedMotion
             }
           )
         ]
       }
-    ) });
+    );
+  }
+);
+Progress.displayName = "Progress";
+function LinearProgress({
+  percentage,
+  indeterminate,
+  shape,
+  thickness,
+  reducedMotion
+}) {
+  if (indeterminate) {
+    return shape === "wavy" ? /* @__PURE__ */ jsx(LinearWavyIndeterminate, { thickness }) : /* @__PURE__ */ jsx(LinearFlatIndeterminate, { thickness });
   }
-  return /* @__PURE__ */ jsxs("div", { "data-progress-track": "", className: cn(progressTrackVariants()), children: [
+  return shape === "wavy" ? /* @__PURE__ */ jsx(
+    LinearWavyDeterminate,
+    {
+      percentage,
+      thickness,
+      reducedMotion
+    }
+  ) : /* @__PURE__ */ jsx(LinearFlatDeterminate, { percentage, thickness });
+}
+function LinearFlatDeterminate({
+  percentage,
+  thickness
+}) {
+  return /* @__PURE__ */ jsxs("div", { "data-progress-track": "", className: cn(progressTrackVariants({ thickness })), children: [
     /* @__PURE__ */ jsx(
       "div",
       {
         "data-progress-indicator": "",
-        className: cn(progressIndicatorVariants()),
+        className: cn(progressActiveIndicatorVariants()),
         style: { width: `${percentage}%` }
       }
     ),
+    percentage < 100 && /* @__PURE__ */ jsx(
+      "div",
+      {
+        "data-progress-inactive-segment": "",
+        className: cn(progressInactiveSegmentVariants()),
+        style: { left: `calc(${percentage}% + ${INDICATOR_TRACK_GAP}px)` }
+      }
+    ),
     /* @__PURE__ */ jsx(
       "div",
       {
@@ -5342,14 +5429,211 @@ function LinearProgress({ percentage, indeterminate }) {
     )
   ] });
 }
+function LinearFlatIndeterminate({
+  thickness
+}) {
+  return /* @__PURE__ */ jsx("div", { "data-progress-track": "", className: cn(progressTrackVariants({ thickness })), children: /* @__PURE__ */ jsxs("div", { "data-progress-indeterminate": "", className: "absolute inset-0 overflow-hidden rounded-full", children: [
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: cn(
+          "bg-primary absolute top-0 h-full rounded-full",
+          "animate-progress-linear-indeterminate-1"
+        )
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: cn(
+          "bg-primary absolute top-0 h-full rounded-full",
+          "animate-progress-linear-indeterminate-2"
+        )
+      }
+    )
+  ] }) });
+}
+function LinearWavyDeterminate({
+  percentage,
+  thickness,
+  reducedMotion
+}) {
+  const amplitude = thickness === "thick" ? WAVE_AMPLITUDE_THICK : WAVE_AMPLITUDE_DEFAULT;
+  const containerHeight = (thickness === "thick" ? 8 : 4) + 2 * amplitude + 4;
+  const midY = amplitude + 2;
+  const trackHeightClass = thickness === "thick" ? "h-2" : "h-1";
+  const trackPx = getStrokeWidth(thickness);
+  const rampedAmplitude = reducedMotion || percentage <= 0 || percentage >= 100 ? 0 : amplitude * Math.min(
+    (percentage - 10) / 10,
+    // ramp up  10%→20%
+    (90 - percentage) / 10,
+    // ramp down 80%→90%
+    1
+  );
+  const wavePath = buildLinearWavePath(VB_W, LINEAR_WAVE_COUNT, rampedAmplitude, midY);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-progress-track": "",
+      className: cn("relative w-full overflow-hidden", trackHeightClass),
+      style: { height: containerHeight },
+      children: [
+        /* @__PURE__ */ jsx(
+          "svg",
+          {
+            viewBox: `0 0 ${VB_W} ${containerHeight}`,
+            preserveAspectRatio: "none",
+            className: cn(
+              "absolute inset-0 w-full",
+              "transition-[clip-path]",
+              "duration-spring-standard-default-spatial",
+              "ease-spring-standard-default-spatial"
+            ),
+            style: {
+              height: containerHeight,
+              // clip-path applied in rendered-element space: keeps left `percentage`%
+              clipPath: `inset(0 ${100 - percentage}% 0 0)`
+            },
+            "aria-hidden": "true",
+            children: /* @__PURE__ */ jsx(
+              "path",
+              {
+                "data-progress-indicator": "",
+                d: wavePath,
+                fill: "none",
+                stroke: "currentColor",
+                strokeWidth: getStrokeWidth(thickness),
+                strokeLinecap: "round",
+                vectorEffect: "non-scaling-stroke",
+                className: "text-primary"
+              }
+            )
+          }
+        ),
+        percentage < 100 && /* @__PURE__ */ jsx(
+          "div",
+          {
+            "data-progress-inactive-segment": "",
+            className: cn(progressInactiveSegmentVariants()),
+            style: {
+              left: `calc(${percentage}% + ${INDICATOR_TRACK_GAP}px)`,
+              height: trackPx,
+              top: midY - trackPx / 2
+            }
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            "data-stop-indicator": "",
+            className: cn(progressStopIndicatorVariants()),
+            style: { top: midY },
+            "aria-hidden": "true"
+          }
+        )
+      ]
+    }
+  );
+}
+function LinearWavyIndeterminate({
+  thickness
+}) {
+  const amplitude = thickness === "thick" ? WAVE_AMPLITUDE_THICK : WAVE_AMPLITUDE_DEFAULT;
+  const containerHeight = (thickness === "thick" ? 8 : 4) + 2 * amplitude + 4;
+  const midY = amplitude + 2;
+  const trackHeightClass = thickness === "thick" ? "h-2" : "h-1";
+  const trackPx = getStrokeWidth(thickness);
+  const wavePath = buildLinearWavePath(VB_W, LINEAR_WAVE_COUNT, amplitude, midY);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-progress-track": "",
+      className: cn("relative w-full overflow-hidden", trackHeightClass),
+      style: { height: containerHeight },
+      children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "bg-primary-container absolute right-0 left-0 rounded-full",
+            style: { height: trackPx, top: midY - trackPx / 2 }
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { "data-progress-indeterminate": "", className: "absolute inset-0", children: [
+          /* @__PURE__ */ jsx(
+            "svg",
+            {
+              viewBox: `0 0 ${VB_W} ${containerHeight}`,
+              preserveAspectRatio: "none",
+              className: "animate-progress-linear-indeterminate-1 absolute top-0 h-full",
+              "aria-hidden": "true",
+              children: /* @__PURE__ */ jsx(
+                "path",
+                {
+                  d: wavePath,
+                  fill: "none",
+                  stroke: "currentColor",
+                  strokeWidth: getStrokeWidth(thickness),
+                  strokeLinecap: "round",
+                  vectorEffect: "non-scaling-stroke",
+                  className: "text-primary"
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "svg",
+            {
+              viewBox: `0 0 ${VB_W} ${containerHeight}`,
+              preserveAspectRatio: "none",
+              className: "animate-progress-linear-indeterminate-2 absolute top-0 h-full",
+              "aria-hidden": "true",
+              children: /* @__PURE__ */ jsx(
+                "path",
+                {
+                  d: wavePath,
+                  fill: "none",
+                  stroke: "currentColor",
+                  strokeWidth: getStrokeWidth(thickness),
+                  strokeLinecap: "round",
+                  vectorEffect: "non-scaling-stroke",
+                  className: "text-primary"
+                }
+              )
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
 function CircularProgress({
   percentage,
   indeterminate,
-  size
+  size,
+  shape,
+  thickness,
+  reducedMotion
 }) {
-  const { radius, circumference, viewBox, cx, cy } = getCircularGeometry(size);
-  const strokeDashoffset = (1 - percentage / 100) * circumference;
+  const { radius, circumference, viewBox, cx, cy, strokeWidth, diameter } = getCircularGeometry(
+    size,
+    thickness
+  );
   if (indeterminate) {
+    if (shape === "wavy") {
+      return /* @__PURE__ */ jsx(
+        CircularWavyIndeterminate,
+        {
+          size,
+          cx,
+          cy,
+          radius,
+          circumference,
+          viewBox,
+          strokeWidth,
+          diameter
+        }
+      );
+    }
     return /* @__PURE__ */ jsx(
       "div",
       {
@@ -5371,8 +5655,8 @@ function CircularProgress({
                   r: radius,
                   fill: "none",
                   stroke: "currentColor",
-                  strokeWidth: STROKE_WIDTH,
-                  className: "text-surface-container-highest"
+                  strokeWidth,
+                  className: "text-primary-container"
                 }
               ),
               /* @__PURE__ */ jsx(
@@ -5383,7 +5667,7 @@ function CircularProgress({
                   r: radius,
                   fill: "none",
                   stroke: "currentColor",
-                  strokeWidth: STROKE_WIDTH,
+                  strokeWidth,
                   className: "animate-progress-circular-dash text-primary",
                   strokeLinecap: "round"
                 }
@@ -5394,41 +5678,211 @@ function CircularProgress({
       }
     );
   }
-  return /* @__PURE__ */ jsx("div", { "data-progress-size": size, className: cn(progressCircularSizeVariants({ size })), children: /* @__PURE__ */ jsxs("svg", { viewBox, className: "h-full w-full -rotate-90", "aria-hidden": "true", children: [
-    /* @__PURE__ */ jsx(
-      "circle",
-      {
-        cx,
-        cy,
-        r: radius,
-        fill: "none",
-        stroke: "currentColor",
-        strokeWidth: STROKE_WIDTH,
-        className: "text-surface-container-highest"
-      }
-    ),
-    /* @__PURE__ */ jsx(
-      "circle",
+  if (shape === "wavy") {
+    return /* @__PURE__ */ jsx(
+      CircularWavyDeterminate,
       {
+        size,
+        percentage,
         cx,
         cy,
-        r: radius,
-        fill: "none",
-        stroke: "currentColor",
-        strokeWidth: STROKE_WIDTH,
-        strokeLinecap: "round",
-        className: "text-primary duration-medium4 ease-standard transition-[stroke-dashoffset]",
-        strokeDasharray: circumference,
-        strokeDashoffset
+        radius,
+        circumference,
+        viewBox,
+        strokeWidth,
+        diameter,
+        reducedMotion
       }
-    )
-  ] }) });
+    );
+  }
+  const activeArc = percentage / 100 * circumference;
+  const activeArcGapped = Math.max(0, activeArc - INDICATOR_TRACK_GAP);
+  const inactiveArcGapped = Math.max(0, circumference - activeArc - INDICATOR_TRACK_GAP);
+  const activeOffset = 0;
+  const inactiveOffset = -(activeArcGapped + INDICATOR_TRACK_GAP);
+  return /* @__PURE__ */ jsxs("div", { "data-progress-size": size, className: cn(progressCircularSizeVariants({ size })), children: [
+    /* @__PURE__ */ jsxs("svg", { viewBox, className: "h-full w-full -rotate-90", "aria-hidden": "true", children: [
+      percentage < 100 && /* @__PURE__ */ jsx(
+        "circle",
+        {
+          cx,
+          cy,
+          r: radius,
+          fill: "none",
+          stroke: "currentColor",
+          strokeWidth,
+          strokeLinecap: "round",
+          strokeDasharray: `${inactiveArcGapped} ${circumference - inactiveArcGapped}`,
+          strokeDashoffset: inactiveOffset,
+          className: "text-primary-container duration-spring-standard-default-spatial ease-spring-standard-default-spatial transition-[stroke-dasharray,stroke-dashoffset]"
+        }
+      ),
+      percentage > 0 && /* @__PURE__ */ jsx(
+        "circle",
+        {
+          cx,
+          cy,
+          r: radius,
+          fill: "none",
+          stroke: "currentColor",
+          strokeWidth,
+          strokeLinecap: "round",
+          strokeDasharray: `${activeArcGapped} ${circumference - activeArcGapped}`,
+          strokeDashoffset: activeOffset,
+          className: "text-primary duration-spring-standard-default-spatial ease-spring-standard-default-spatial transition-[stroke-dasharray,stroke-dashoffset]"
+        }
+      ),
+      percentage === 0 && /* @__PURE__ */ jsx(
+        "circle",
+        {
+          cx,
+          cy,
+          r: radius,
+          fill: "none",
+          stroke: "currentColor",
+          strokeWidth,
+          className: "text-primary-container"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx("span", { className: "sr-only", "data-progress-diameter": diameter })
+  ] });
+}
+function CircularWavyIndeterminate({
+  size,
+  cx,
+  cy,
+  radius,
+  circumference: _circumference,
+  viewBox,
+  strokeWidth
+}) {
+  const circAmp = Math.min(WAVE_AMPLITUDE_DEFAULT, radius * 0.35);
+  const meanRadius = radius - circAmp;
+  const meanCircumference = 2 * Math.PI * meanRadius;
+  const waveCount = Math.max(4, Math.round(meanCircumference / WAVE_WAVELENGTH_CIRCULAR));
+  const wavePath = buildCircularWavePath(cx, cy, meanRadius, circAmp, waveCount);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-progress-size": size,
+      "data-progress-indeterminate": "",
+      className: cn(progressCircularSizeVariants({ size })),
+      children: /* @__PURE__ */ jsxs(
+        "svg",
+        {
+          viewBox,
+          className: "animate-progress-circular-rotate h-full w-full",
+          "aria-hidden": "true",
+          children: [
+            /* @__PURE__ */ jsx(
+              "circle",
+              {
+                cx,
+                cy,
+                r: meanRadius,
+                fill: "none",
+                stroke: "currentColor",
+                strokeWidth,
+                className: "text-primary-container"
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "path",
+              {
+                d: wavePath,
+                fill: "none",
+                stroke: "currentColor",
+                strokeWidth,
+                strokeLinecap: "round",
+                pathLength: 100,
+                strokeDasharray: "28 72",
+                className: "text-primary"
+              }
+            )
+          ]
+        }
+      )
+    }
+  );
+}
+function CircularWavyDeterminate({
+  size,
+  percentage,
+  cx,
+  cy,
+  radius,
+  circumference: _circumference,
+  viewBox,
+  strokeWidth,
+  diameter,
+  reducedMotion
+}) {
+  const circAmp = reducedMotion ? 0 : Math.min(WAVE_AMPLITUDE_DEFAULT, radius * 0.35);
+  const meanRadius = radius - circAmp;
+  const meanCircumference = 2 * Math.PI * meanRadius;
+  const waveCount = Math.max(4, Math.round(meanCircumference / WAVE_WAVELENGTH_CIRCULAR));
+  const wavePath = buildCircularWavePath(cx, cy, meanRadius, circAmp, waveCount);
+  const gapPct = INDICATOR_TRACK_GAP / meanCircumference * 100;
+  const activeLen = Math.max(0, percentage - gapPct);
+  const inactiveLen = Math.max(0, 100 - percentage - gapPct);
+  const inactiveOffset = -(activeLen + gapPct);
+  return /* @__PURE__ */ jsxs("div", { "data-progress-size": size, className: cn(progressCircularSizeVariants({ size })), children: [
+    /* @__PURE__ */ jsxs("svg", { viewBox, className: "h-full w-full -rotate-90", "aria-hidden": "true", children: [
+      percentage === 0 && /* @__PURE__ */ jsx(
+        "circle",
+        {
+          cx,
+          cy,
+          r: meanRadius,
+          fill: "none",
+          stroke: "currentColor",
+          strokeWidth,
+          className: "text-primary-container"
+        }
+      ),
+      percentage > 0 && percentage < 100 && /* @__PURE__ */ jsx(
+        "circle",
+        {
+          cx,
+          cy,
+          r: meanRadius,
+          fill: "none",
+          stroke: "currentColor",
+          strokeWidth,
+          strokeLinecap: "round",
+          pathLength: 100,
+          strokeDasharray: `${inactiveLen} ${100 - inactiveLen}`,
+          strokeDashoffset: inactiveOffset,
+          className: "text-primary-container duration-spring-standard-default-spatial ease-spring-standard-default-spatial transition-[stroke-dasharray,stroke-dashoffset]"
+        }
+      ),
+      percentage > 0 && /* @__PURE__ */ jsx(
+        "path",
+        {
+          "data-progress-indicator": "",
+          d: wavePath,
+          fill: "none",
+          stroke: "currentColor",
+          strokeWidth,
+          strokeLinecap: "round",
+          pathLength: 100,
+          strokeDasharray: percentage < 100 ? `${activeLen} ${100 - activeLen}` : void 0,
+          strokeDashoffset: 0,
+          className: "text-primary duration-spring-standard-default-spatial ease-spring-standard-default-spatial transition-[stroke-dasharray]"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx("span", { className: "sr-only", "data-progress-diameter": diameter })
+  ] });
 }
 var ProgressHeadless = forwardRef(
   ({
     type = "linear",
     indeterminate = false,
     size = "medium",
+    shape = "flat",
+    thickness = "default",
     className,
     children,
     renderProgress,
@@ -5455,7 +5909,9 @@ var ProgressHeadless = forwardRef(
         percentage,
         isIndeterminate: indeterminate,
         type,
-        size
+        size,
+        shape,
+        thickness
       }),
       children
     ] });