@tinybigui/react 0.15.0 → 0.17.0

package/dist/index.js

@@ -3139,224 +3139,102 @@ var RadioGroupHeadless = forwardRef(
   }
 );
 RadioGroupHeadless.displayName = "RadioGroupHeadless";
+var radioRootVariants = cva([
+  "relative inline-flex items-center cursor-pointer select-none",
+  // Disabled state — self-targeting so children inherit via group
+  "data-[disabled]:cursor-not-allowed data-[disabled]:pointer-events-none",
+  "data-[disabled]:opacity-38"
+]);
+var radioControlVariants = cva([
+  "relative flex items-center justify-center flex-shrink-0",
+  "size-10"
+  // 40dp touch target (MD3 spec)
+]);
+var radioFocusRingVariants = cva([
+  "pointer-events-none absolute inset-0 rounded-full",
+  "outline outline-2 outline-offset-2 outline-secondary",
+  // Effects transition for opacity
+  "transition-opacity duration-spring-standard-fast-effects ease-spring-standard-fast-effects",
+  "opacity-0",
+  "group-data-[focus-visible]/radio:opacity-100"
+]);
+var radioTargetVariants = cva([
+  "absolute inset-0 rounded-full overflow-hidden",
+  "flex items-center justify-center"
+]);
+var radioStateLayerVariants = cva([
+  "absolute inset-0 rounded-full pointer-events-none opacity-0",
+  // Base state-layer color (unselected)
+  "bg-on-surface",
+  // Effects transition for opacity + color
+  "transition-[opacity,background-color] duration-spring-standard-fast-effects ease-spring-standard-fast-effects",
+  // Selected state-layer color
+  "group-data-[selected]/radio:bg-primary",
+  // Error state-layer color (overrides selected via cascade position)
+  "group-data-[invalid]/radio:bg-error",
+  // Interaction opacities (MD3: hover 8%, focus/pressed 10%)
+  "group-data-[hovered]/radio:opacity-8",
+  "group-data-[focus-visible]/radio:opacity-10",
+  "group-data-[pressed]/radio:opacity-10",
+  // No state layer when disabled
+  "group-data-[disabled]/radio:hidden"
+]);
+var radioRingVariants = cva([
+  "relative z-10 size-5 rounded-full border-2 flex items-center justify-center flex-shrink-0",
+  // Base (unselected, enabled)
+  "border-on-surface-variant",
+  // Effects transition for border-color
+  "transition-colors duration-spring-standard-fast-effects ease-spring-standard-fast-effects",
+  // Selected — border becomes primary
+  "group-data-[selected]/radio:border-primary",
+  // Error — placed after selected so it overrides by cascade order
+  "group-data-[invalid]/radio:border-error",
+  // Disabled — on-surface/38 opacity value
+  "group-data-[disabled]/radio:border-on-surface/38"
+]);
+var radioDotVariants = cva([
+  "size-2.5 rounded-full origin-center",
+  // Spatial transition for scale — springs may overshoot (intentional)
+  "transition-transform duration-spring-standard-fast-spatial ease-spring-standard-fast-spatial",
+  // Base fill color (shown when selected)
+  "bg-primary",
+  // Hidden when unselected
+  "scale-0",
+  // Visible when selected
+  "group-data-[selected]/radio:scale-100",
+  // Error — error fill color (placed after selected by cascade)
+  "group-data-[invalid]/radio:bg-error",
+  // Disabled — use on-surface/38 opacity
+  "group-data-[disabled]/radio:bg-on-surface/38"
+]);
+var radioLabelVariants = cva(["text-body-medium text-on-surface select-none ml-4"]);
 var radioGroupVariants = cva(
-  [
-    // Base classes (always applied to group wrapper)
-    "flex",
-    "gap-4"
-    // 16px spacing between radios (MD3 standard)
-  ],
+  ["flex", "gap-1"],
+  // 4dp gap — padding around each 40dp control handles visual spacing
   {
     variants: {
       /**
        * Layout orientation
+       * @default "vertical"
        */
       orientation: {
         vertical: "flex-col",
         horizontal: "flex-row flex-wrap"
-      },
-      /**
-       * Disabled state
-       */
-      disabled: {
-        true: "",
-        false: ""
-      }
-    },
-    defaultVariants: {
-      orientation: "vertical",
-      disabled: false
-    }
-  }
-);
-var radioGroupLabelVariants = cva(
-  [
-    "text-sm font-medium",
-    // MD3: Body Medium
-    "text-on-surface",
-    "mb-3"
-    // Spacing below label (12px)
-  ],
-  {
-    variants: {
-      disabled: {
-        true: "opacity-38",
-        false: ""
-      }
-    },
-    defaultVariants: {
-      disabled: false
-    }
-  }
-);
-var radioVariants = cva(
-  [
-    // Base classes (always applied to label wrapper)
-    "relative inline-flex items-center cursor-pointer select-none",
-    "transition-opacity duration-200"
-  ],
-  {
-    variants: {
-      /**
-       * Disabled state
-       */
-      disabled: {
-        true: "opacity-38 cursor-not-allowed pointer-events-none",
-        false: ""
-      }
-    },
-    defaultVariants: {
-      disabled: false
-    }
-  }
-);
-var radioContainerVariants = cva(
-  [
-    // Base classes for radio visual container
-    "relative inline-flex items-center justify-center",
-    "w-10 h-10",
-    // 40x40dp touch target (MD3 spec)
-    "flex-shrink-0",
-    "transition-all duration-200",
-    "m-1",
-    // 4px margin around radio for spacing (total 8px gap between radios)
-    // State layer (hover, focus, active) - MD3 spec: 8%/12%/12% opacity
-    "before:absolute before:inset-0 before:rounded-full before:transition-opacity before:duration-200",
-    "before:bg-current before:opacity-0",
-    "hover:before:opacity-8",
-    "active:before:opacity-12"
-  ],
-  {
-    variants: {
-      /**
-       * Radio state (determines visual appearance)
-       */
-      state: {
-        unselected: "text-on-surface-variant",
-        selected: "text-primary"
-      },
-      /**
-       * Error/invalid state
-       */
-      isInvalid: {
-        true: "text-error",
-        false: ""
-      },
-      /**
-       * Disabled state
-       */
-      disabled: {
-        true: "text-on-surface pointer-events-none",
-        false: ""
-      }
-    },
-    compoundVariants: [
-      // Error state overrides normal colors for all states
-      {
-        state: "unselected",
-        isInvalid: true,
-        disabled: false,
-        className: "text-error"
-      },
-      {
-        state: "selected",
-        isInvalid: true,
-        disabled: false,
-        className: "text-error"
-      }
-    ],
-    defaultVariants: {
-      state: "unselected",
-      isInvalid: false,
-      disabled: false
-    }
-  }
-);
-var radioIconOuterVariants = cva(
-  [
-    // Base classes for the radio outer circle
-    "transition-all duration-200 stroke-current stroke-2 fill-transparent"
-  ],
-  {
-    variants: {
-      /**
-       * Radio state
-       */
-      state: {
-        unselected: [],
-        selected: []
-      },
-      /**
-       * Disabled state
-       */
-      disabled: {
-        true: ["fill-transparent", "stroke-current", "stroke-2"],
-        false: ""
-      }
-    },
-    compoundVariants: [
-      // Disabled + selected state overrides fill
-      {
-        state: "selected",
-        disabled: true,
-        className: "fill-current stroke-none"
-      }
-    ],
-    defaultVariants: {
-      state: "unselected",
-      disabled: false
-    }
-  }
-);
-var radioIconInnerVariants = cva(["transition-all origin-center duration-200"], {
-  variants: {
-    /**
-     * Visibility based on state
-     */
-    state: {
-      selected: ["fill-current"],
-      unselected: ["fill-transparent"]
-    },
-    visible: {
-      true: "opacity-100 scale-100 fill-current",
-      false: "opacity-0 scale-0"
-    }
-  },
-  defaultVariants: {
-    visible: false
-  }
-});
-var radioLabelVariants = cva(
-  [
-    "text-sm",
-    // MD3: Body Medium (14px)
-    "text-on-surface",
-    "select-none"
-  ],
-  {
-    variants: {
-      disabled: {
-        true: "",
-        false: ""
       }
     },
     defaultVariants: {
-      disabled: false
+      orientation: "vertical"
     }
   }
 );
+var radioGroupLabelVariants = cva([
+  "text-body-medium font-medium",
+  "text-on-surface",
+  "mb-3",
+  "data-[disabled]:opacity-38"
+]);
 var Radio = forwardRef(
-  ({
-    // Content props
-    children,
-    // State props
-    disableRipple = false,
-    isDisabled = false,
-    // Styling
-    className,
-    // Other props
-    ...props
-  }, forwardedRef) => {
+  ({ children, disableRipple = false, isDisabled = false, className, ...props }, forwardedRef) => {
     const state = useContext(RadioGroupContext);
     if (!state) {
       throw new Error("Radio must be used within a RadioGroup");
@@ -3371,127 +3249,57 @@ var Radio = forwardRef(
       "data-testid": _dataTestId,
       id: _htmlId,
       title: _htmlTitle,
-      ...restPropsWithoutHtmlAttrs
+      ...ariaProps
     } = props;
     const {
       inputProps,
       isSelected,
-      isDisabled: radioIsDisabled
+      isDisabled: radioIsDisabled,
+      isPressed
     } = useRadio(
-      {
-        ...restPropsWithoutHtmlAttrs,
-        value: props.value
-      },
+      { ...ariaProps, value: props.value },
       state,
       ref
     );
     const { isFocusVisible, focusProps } = useFocusRing();
     const finalIsDisabled = isDisabled || radioIsDisabled;
-    const visualState = isSelected ? "selected" : "unselected";
+    const { isHovered, hoverProps } = useHover({ isDisabled: finalIsDisabled });
+    const isInvalid = state.validationState === "invalid";
     const { onMouseDown: handleRipple, ripples } = useRipple({
       disabled: finalIsDisabled || disableRipple
     });
     if (process.env.NODE_ENV === "development") {
-      const ariaProps = restPropsWithoutHtmlAttrs;
-      if (!children && !ariaProps["aria-label"] && !ariaProps["aria-labelledby"]) {
-        console.warn(
-          "[Radio] Radio should have a label (children) or aria-label for accessibility."
-        );
+      const a = ariaProps;
+      if (!children && !a["aria-label"] && !a["aria-labelledby"]) {
+        console.warn("[Radio] Provide a label via children or aria-label for accessibility.");
       }
     }
-    const isInvalid = state.validationState === "invalid";
     return /* @__PURE__ */ jsxs(
       "label",
       {
-        className: cn(
-          radioVariants({
-            disabled: finalIsDisabled
-          }),
-          className
-        ),
+        ...mergeProps$1(hoverProps),
+        className: cn(radioRootVariants(), "group/radio", className),
         "data-testid": dataTestId,
         title: htmlTitle,
+        ...getInteractionDataAttributes({
+          isHovered,
+          isFocusVisible,
+          isPressed,
+          isSelected,
+          isDisabled: finalIsDisabled,
+          isInvalid
+        }),
         children: [
           /* @__PURE__ */ jsx(VisuallyHidden, { children: /* @__PURE__ */ jsx("input", { ...mergeProps$1(inputProps, focusProps), ref, id: htmlId }) }),
-          /* @__PURE__ */ jsxs(
-            "div",
-            {
-              role: "presentation",
-              className: cn(
-                radioContainerVariants({
-                  state: visualState,
-                  isInvalid,
-                  disabled: finalIsDisabled
-                })
-              ),
-              onMouseDown: handleRipple,
-              children: [
-                ripples,
-                /* @__PURE__ */ jsxs(
-                  "svg",
-                  {
-                    width: "20",
-                    height: "20",
-                    viewBox: "0 0 20 20",
-                    "aria-hidden": "true",
-                    className: "relative z-10",
-                    children: [
-                      /* @__PURE__ */ jsx(
-                        "circle",
-                        {
-                          cx: "10",
-                          cy: "10",
-                          r: "9",
-                          className: cn(
-                            radioIconOuterVariants({
-                              state: visualState,
-                              disabled: finalIsDisabled
-                            })
-                          )
-                        }
-                      ),
-                      /* @__PURE__ */ jsx(
-                        "circle",
-                        {
-                          cx: "10",
-                          cy: "10",
-                          r: "5",
-                          className: cn(
-                            radioIconInnerVariants({
-                              visible: isSelected
-                            })
-                          )
-                        }
-                      ),
-                      isFocusVisible && /* @__PURE__ */ jsx(
-                        "circle",
-                        {
-                          cx: "10",
-                          cy: "10",
-                          r: "13",
-                          fill: "none",
-                          stroke: "currentColor",
-                          strokeWidth: "2",
-                          className: "animate-pulse"
-                        }
-                      )
-                    ]
-                  }
-                )
-              ]
-            }
-          ),
-          children && /* @__PURE__ */ jsx(
-            "span",
-            {
-              className: cn(
-                radioLabelVariants({
-                  disabled: finalIsDisabled
-                })
-              ),
-              children
-            }
-          )
+          /* @__PURE__ */ jsxs("div", { role: "presentation", className: cn(radioControlVariants()), children: [
+            /* @__PURE__ */ jsx("div", { className: cn(radioFocusRingVariants()), "aria-hidden": "true" }),
+            /* @__PURE__ */ jsxs("div", { role: "presentation", className: cn(radioTargetVariants()), onMouseDown: handleRipple, children: [
+              ripples,
+              /* @__PURE__ */ jsx("span", { className: cn(radioStateLayerVariants()), "aria-hidden": "true" }),
+              /* @__PURE__ */ jsx("div", { className: cn(radioRingVariants()), "aria-hidden": "true", children: /* @__PURE__ */ jsx("div", { className: cn(radioDotVariants()), "aria-hidden": "true" }) })
+            ] })
+          ] }),
+          children && /* @__PURE__ */ jsx("span", { className: cn(radioLabelVariants()), children })
         ]
       }
     );
@@ -3504,7 +3312,7 @@ var RadioGroup = forwardRef(
     children,
     // State props
     orientation = "vertical",
-    isInvalid: _isInvalid = false,
+    isInvalid = false,
     isDisabled = false,
     // Styling
     className,
@@ -3527,6 +3335,7 @@ var RadioGroup = forwardRef(
       {
         ...restPropsWithoutHtmlAttrs,
         isDisabled,
+        isInvalid,
         ref,
         className: cn("flex flex-col", className),
         "data-testid": dataTestId,
@@ -3534,11 +3343,8 @@ var RadioGroup = forwardRef(
           "div",
           {
             ...labelProps,
-            className: cn(
-              radioGroupLabelVariants({
-                disabled: isDisabled
-              })
-            ),
+            "data-disabled": isDisabled ? "" : void 0,
+            className: cn(radioGroupLabelVariants()),
             children: props.label
           }
         ),
@@ -3547,8 +3353,7 @@ var RadioGroup = forwardRef(
           {
             className: cn(
               radioGroupVariants({
-                orientation,
-                disabled: isDisabled
+                orientation
               })
             ),
             children
@@ -5159,9 +4964,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 +4973,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 +5034,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 +5043,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 +5131,7 @@ var Progress = forwardRef(
   }, forwardedRef) => {
     const internalRef = useRef(null);
     const ref = forwardedRef ?? internalRef;
+    const reducedMotion = useReducedMotion2();
     const { progressBarProps, labelProps } = useProgressBar({
       label,
       value,
@@ -5270,6 +5141,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 +5158,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 +5234,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 +5460,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 +5472,7 @@ function CircularProgress({
                   r: radius,
                   fill: "none",
                   stroke: "currentColor",
-                  strokeWidth: STROKE_WIDTH,
+                  strokeWidth,
                   className: "animate-progress-circular-dash text-primary",
                   strokeLinecap: "round"
                 }
@@ -5394,41 +5483,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 +5714,9 @@ var ProgressHeadless = forwardRef(
         percentage,
         isIndeterminate: indeterminate,
         type,
-        size
+        size,
+        shape,
+        thickness
       }),
       children
     ] });