premium-react-loaders 3.1.1 → 4.1.0

package/dist/index.js

@@ -33,26 +33,41 @@ import { LoaderOverlay } from "./index33.js";
 import { ButtonSpinner } from "./index34.js";
 import { SuccessCheckmark } from "./index35.js";
 import { ErrorIndicator } from "./index36.js";
-import { LoaderTransition } from "./index37.js";
-import { ShimmerBox } from "./index38.js";
-import { ShimmerText } from "./index39.js";
-import { ShimmerButton } from "./index40.js";
-import { OrbitDots } from "./index41.js";
-import { OrbitRings } from "./index42.js";
-import { AtomLoader } from "./index43.js";
-import { BouncingDots } from "./index44.js";
-import { BouncingBalls } from "./index45.js";
-import { InfinityLoader } from "./index46.js";
-import { MobiusLoader } from "./index47.js";
-import { LoadingText } from "./index48.js";
-import { CubeSpinner } from "./index49.js";
-import { FlipCard } from "./index50.js";
-import { PlaneRotate } from "./index51.js";
-import { Helix } from "./index52.js";
-import { PerspectiveRing } from "./index53.js";
-import { FormFieldLoader } from "./index54.js";
-import { LiveRegion } from "./index55.js";
-const version = "3.1.1";
+import { WarningIndicator } from "./index37.js";
+import { InfoIndicator } from "./index38.js";
+import { LoaderTransition } from "./index39.js";
+import { ShimmerBox } from "./index40.js";
+import { ShimmerText } from "./index41.js";
+import { ShimmerButton } from "./index42.js";
+import { OrbitDots } from "./index43.js";
+import { OrbitRings } from "./index44.js";
+import { AtomLoader } from "./index45.js";
+import { BouncingDots } from "./index46.js";
+import { BouncingBalls } from "./index47.js";
+import { InfinityLoader } from "./index48.js";
+import { MobiusLoader } from "./index49.js";
+import { LoadingText } from "./index50.js";
+import { CubeSpinner } from "./index51.js";
+import { FlipCard } from "./index52.js";
+import { PlaneRotate } from "./index53.js";
+import { Helix } from "./index54.js";
+import { PerspectiveRing } from "./index55.js";
+import { FormFieldLoader } from "./index56.js";
+import { LiveRegion } from "./index57.js";
+import { MorphBlob } from "./index58.js";
+import { LiquidFill } from "./index59.js";
+import { WaveCircle } from "./index60.js";
+import { GradientSpinner } from "./index61.js";
+import { GradientRing } from "./index62.js";
+import { GradientBar } from "./index63.js";
+import { ParticleBurst } from "./index64.js";
+import { ParticleOrbit } from "./index65.js";
+import { ParticleTrail } from "./index66.js";
+import { ParticleField } from "./index67.js";
+import { NeonPulse } from "./index68.js";
+import { NeonSpinner } from "./index69.js";
+import { NeonText } from "./index70.js";
+const version = "4.0.0";
 export {
   AtomLoader,
   BouncingBalls,
@@ -63,15 +78,28 @@ export {
   ErrorIndicator,
   FlipCard,
   FormFieldLoader,
+  GradientBar,
+  GradientRing,
+  GradientSpinner,
   Helix,
   InfinityLoader,
+  InfoIndicator,
+  LiquidFill,
   LiveRegion,
   LoaderOverlay,
   LoaderTransition,
   LoadingText,
   MobiusLoader,
+  MorphBlob,
+  NeonPulse,
+  NeonSpinner,
+  NeonText,
   OrbitDots,
   OrbitRings,
+  ParticleBurst,
+  ParticleField,
+  ParticleOrbit,
+  ParticleTrail,
   PerspectiveRing,
   PlaneRotate,
   ProgressBar,
@@ -104,6 +132,8 @@ export {
   SuccessCheckmark,
   ThemeProvider,
   TypingIndicator,
+  WarningIndicator,
+  WaveCircle,
   cn,
   getAnimationDuration,
   normalizeSize,

package/dist/index10.cjs

@@ -3,7 +3,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
 const react = require("react");
 const Skeleton = require("./index7.cjs");
-const hooks = require("./index56.cjs");
+const hooks = require("./index71.cjs");
 const SkeletonImage = react.forwardRef(
   ({
     width = "100%",

package/dist/index10.js

@@ -1,7 +1,7 @@
 import { jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import { Skeleton } from "./index7.js";
-import { useLoaderVisibility } from "./index56.js";
+import { useLoaderVisibility } from "./index71.js";
 const SkeletonImage = forwardRef(
   ({
     width = "100%",

package/dist/index11.cjs

@@ -4,7 +4,7 @@ const jsxRuntime = require("react/jsx-runtime");
 const react = require("react");
 const Skeleton = require("./index7.cjs");
 const SkeletonAvatar = require("./index9.cjs");
-const hooks = require("./index56.cjs");
+const hooks = require("./index71.cjs");
 const classNames = require("./index3.cjs");
 const SkeletonCard = react.forwardRef(
   ({

package/dist/index11.js

@@ -2,7 +2,7 @@ import { jsxs, jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import { Skeleton } from "./index7.js";
 import { SkeletonAvatar } from "./index9.js";
-import { useLoaderVisibility } from "./index56.js";
+import { useLoaderVisibility } from "./index71.js";
 import { cn } from "./index3.js";
 const SkeletonCard = forwardRef(
   ({

package/dist/index12.cjs

@@ -3,7 +3,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
 const react = require("react");
 const Skeleton = require("./index7.cjs");
-const hooks = require("./index56.cjs");
+const hooks = require("./index71.cjs");
 const colors = require("./index4.cjs");
 const classNames = require("./index3.cjs");
 const SkeletonList = react.forwardRef(

package/dist/index12.js

@@ -1,7 +1,7 @@
 import { jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import { Skeleton } from "./index7.js";
-import { useLoaderVisibility } from "./index56.js";
+import { useLoaderVisibility } from "./index71.js";
 import { normalizeSize } from "./index4.js";
 import { cn } from "./index3.js";
 const SkeletonList = forwardRef(

package/dist/index13.cjs

@@ -3,7 +3,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
 const react = require("react");
 const Skeleton = require("./index7.cjs");
-const hooks = require("./index56.cjs");
+const hooks = require("./index71.cjs");
 const classNames = require("./index3.cjs");
 const SkeletonTable = react.forwardRef(
   ({

package/dist/index13.js

@@ -1,7 +1,7 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import { Skeleton } from "./index7.js";
-import { useLoaderVisibility } from "./index56.js";
+import { useLoaderVisibility } from "./index71.js";
 import { cn } from "./index3.js";
 const SkeletonTable = forwardRef(
   ({

package/dist/index14.cjs

@@ -5,7 +5,7 @@ const react = require("react");
 const Skeleton = require("./index7.cjs");
 const SkeletonText = require("./index8.cjs");
 const SkeletonAvatar = require("./index9.cjs");
-const hooks = require("./index56.cjs");
+const hooks = require("./index71.cjs");
 const classNames = require("./index3.cjs");
 const SkeletonPage = react.forwardRef(
   ({

package/dist/index14.js

@@ -3,7 +3,7 @@ import { forwardRef } from "react";
 import { Skeleton } from "./index7.js";
 import { SkeletonText } from "./index8.js";
 import { SkeletonAvatar } from "./index9.js";
-import { useLoaderVisibility } from "./index56.js";
+import { useLoaderVisibility } from "./index71.js";
 import { cn } from "./index3.js";
 const SkeletonPage = forwardRef(
   ({

package/dist/index15.cjs

@@ -3,7 +3,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
 const react = require("react");
 const Skeleton = require("./index7.cjs");
-const hooks = require("./index56.cjs");
+const hooks = require("./index71.cjs");
 const colors = require("./index4.cjs");
 const classNames = require("./index3.cjs");
 const SkeletonForm = react.forwardRef(

package/dist/index15.js

@@ -1,7 +1,7 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import { Skeleton } from "./index7.js";
-import { useLoaderVisibility } from "./index56.js";
+import { useLoaderVisibility } from "./index71.js";
 import { normalizeSize } from "./index4.js";
 import { cn } from "./index3.js";
 const SkeletonForm = forwardRef(

package/dist/index17.cjs

@@ -3,7 +3,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
 const react = require("react");
 const Skeleton = require("./index7.cjs");
-const hooks = require("./index56.cjs");
+const hooks = require("./index71.cjs");
 const classNames = require("./index3.cjs");
 const DataTableSkeleton = react.forwardRef(
   ({

package/dist/index17.js

@@ -1,7 +1,7 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import { Skeleton } from "./index7.js";
-import { useLoaderVisibility } from "./index56.js";
+import { useLoaderVisibility } from "./index71.js";
 import { cn } from "./index3.js";
 const DataTableSkeleton = forwardRef(
   ({

package/dist/index18.cjs

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
 const react = require("react");
-const hooks = require("./index56.cjs");
+const hooks = require("./index71.cjs");
 const classNames = require("./index3.cjs");
 const colors = require("./index4.cjs");
 const SpinnerCircle = react.forwardRef(

package/dist/index18.js

@@ -1,6 +1,6 @@
 import { jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
-import { useReducedMotion, useLoaderVisibility, getEffectiveDuration } from "./index56.js";
+import { useReducedMotion, useLoaderVisibility, getEffectiveDuration } from "./index71.js";
 import { cn } from "./index3.js";
 import { normalizeSize } from "./index4.js";
 const SpinnerCircle = forwardRef(

package/dist/index19.cjs

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
 const react = require("react");
-const hooks = require("./index56.cjs");
+const hooks = require("./index71.cjs");
 const classNames = require("./index3.cjs");
 const colors = require("./index4.cjs");
 const SpinnerRing = react.forwardRef(

package/dist/index19.js

@@ -1,6 +1,6 @@
 import { jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
-import { useReducedMotion, useLoaderVisibility, getEffectiveDuration } from "./index56.js";
+import { useReducedMotion, useLoaderVisibility, getEffectiveDuration } from "./index71.js";
 import { cn } from "./index3.js";
 import { normalizeSize } from "./index4.js";
 const SpinnerRing = forwardRef(

package/dist/index20.cjs

@@ -3,7 +3,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
 const react = require("react");
 const colors = require("./index4.cjs");
-const hooks = require("./index56.cjs");
+const hooks = require("./index71.cjs");
 const classNames = require("./index3.cjs");
 const SpinnerDots = react.forwardRef(
   ({

package/dist/index20.js

@@ -1,7 +1,7 @@
 import { jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import { normalizeSize, parseSizeToNumber } from "./index4.js";
-import { useReducedMotion, useLoaderVisibility, getEffectiveDuration } from "./index56.js";
+import { useReducedMotion, useLoaderVisibility, getEffectiveDuration } from "./index71.js";
 import { cn } from "./index3.js";
 const SpinnerDots = forwardRef(
   ({

package/dist/index21.cjs

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
 const react = require("react");
-const hooks = require("./index56.cjs");
+const hooks = require("./index71.cjs");
 const colors = require("./index4.cjs");
 const classNames = require("./index3.cjs");
 const SpinnerBars = react.forwardRef(

package/dist/index21.js

@@ -1,6 +1,6 @@
 import { jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
-import { useReducedMotion, useLoaderVisibility, getEffectiveDuration } from "./index56.js";
+import { useReducedMotion, useLoaderVisibility, getEffectiveDuration } from "./index71.js";
 import { normalizeSize, parseSizeToNumber } from "./index4.js";
 import { cn } from "./index3.js";
 const SpinnerBars = forwardRef(

package/dist/index22.cjs

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
 const react = require("react");
-const hooks = require("./index56.cjs");
+const hooks = require("./index71.cjs");
 const classNames = require("./index3.cjs");
 const colors = require("./index4.cjs");
 const SpinnerGrid = react.forwardRef(

package/dist/index22.js

@@ -1,6 +1,6 @@
 import { jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
-import { useReducedMotion, useLoaderVisibility, getEffectiveDuration } from "./index56.js";
+import { useReducedMotion, useLoaderVisibility, getEffectiveDuration } from "./index71.js";
 import { cn } from "./index3.js";
 import { normalizeSize, parseSizeToNumber } from "./index4.js";
 const SpinnerGrid = forwardRef(

package/dist/index23.cjs

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
 const react = require("react");
-const hooks = require("./index56.cjs");
+const hooks = require("./index71.cjs");
 const classNames = require("./index3.cjs");
 const colors = require("./index4.cjs");
 const SpinnerWave = react.forwardRef(

package/dist/index23.js

@@ -1,6 +1,6 @@
 import { jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
-import { useReducedMotion, useLoaderVisibility, getEffectiveDuration } from "./index56.js";
+import { useReducedMotion, useLoaderVisibility, getEffectiveDuration } from "./index71.js";
 import { cn } from "./index3.js";
 import { normalizeSize } from "./index4.js";
 const SpinnerWave = forwardRef(

package/dist/index24.cjs

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
 const react = require("react");
-const hooks = require("./index56.cjs");
+const hooks = require("./index71.cjs");
 const classNames = require("./index3.cjs");
 const colors = require("./index4.cjs");
 const SpinnerPulse = react.forwardRef(

package/dist/index24.js

@@ -1,6 +1,6 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { forwardRef } from "react";
-import { useReducedMotion, useLoaderVisibility, getEffectiveDuration } from "./index56.js";
+import { useReducedMotion, useLoaderVisibility, getEffectiveDuration } from "./index71.js";
 import { cn } from "./index3.js";
 import { normalizeSize } from "./index4.js";
 const SpinnerPulse = forwardRef(

package/dist/index25.cjs

@@ -3,7 +3,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
 const react = require("react");
 const colors = require("./index4.cjs");
-const hooks = require("./index56.cjs");
+const hooks = require("./index71.cjs");
 const classNames = require("./index3.cjs");
 const ProgressBar = react.forwardRef(
   ({
@@ -15,6 +15,7 @@ const ProgressBar = react.forwardRef(
     secondaryColor = "#e0e0e0",
     gradient = false,
     buffer,
+    onComplete,
     speed = "normal",
     reverse = false,
     respectMotionPreference = true,
@@ -37,8 +38,22 @@ const ProgressBar = react.forwardRef(
       minDuration,
       transition
     );
-    if (!shouldRender) return null;
+    const onCompleteRef = react.useRef(onComplete);
+    onCompleteRef.current = onComplete;
+    const hasCompletedRef = react.useRef(false);
     const clampedValue = Math.min(100, Math.max(0, value));
+    react.useEffect(() => {
+      if (clampedValue < 100) {
+        hasCompletedRef.current = false;
+      }
+    }, [clampedValue]);
+    react.useEffect(() => {
+      if (!indeterminate && clampedValue === 100 && !hasCompletedRef.current && onCompleteRef.current) {
+        hasCompletedRef.current = true;
+        onCompleteRef.current();
+      }
+    }, [clampedValue, indeterminate]);
+    if (!shouldRender) return null;
     const clampedBuffer = buffer !== void 0 ? Math.min(100, Math.max(0, buffer)) : void 0;
     const progressLabel = ariaLabel || `Loading ${clampedValue}%`;
     return /* @__PURE__ */ jsxRuntime.jsxs(

package/dist/index25.js

@@ -1,7 +1,7 @@
 import { jsxs, jsx } from "react/jsx-runtime";
-import { forwardRef, useMemo } from "react";
+import { forwardRef, useMemo, useRef, useEffect } from "react";
 import { normalizeSize, getContrastColor } from "./index4.js";
-import { useReducedMotion, useLoaderVisibility, getEffectiveDuration } from "./index56.js";
+import { useReducedMotion, useLoaderVisibility, getEffectiveDuration } from "./index71.js";
 import { cn } from "./index3.js";
 const ProgressBar = forwardRef(
   ({
@@ -13,6 +13,7 @@ const ProgressBar = forwardRef(
     secondaryColor = "#e0e0e0",
     gradient = false,
     buffer,
+    onComplete,
     speed = "normal",
     reverse = false,
     respectMotionPreference = true,
@@ -35,8 +36,22 @@ const ProgressBar = forwardRef(
       minDuration,
       transition
     );
-    if (!shouldRender) return null;
+    const onCompleteRef = useRef(onComplete);
+    onCompleteRef.current = onComplete;
+    const hasCompletedRef = useRef(false);
     const clampedValue = Math.min(100, Math.max(0, value));
+    useEffect(() => {
+      if (clampedValue < 100) {
+        hasCompletedRef.current = false;
+      }
+    }, [clampedValue]);
+    useEffect(() => {
+      if (!indeterminate && clampedValue === 100 && !hasCompletedRef.current && onCompleteRef.current) {
+        hasCompletedRef.current = true;
+        onCompleteRef.current();
+      }
+    }, [clampedValue, indeterminate]);
+    if (!shouldRender) return null;
     const clampedBuffer = buffer !== void 0 ? Math.min(100, Math.max(0, buffer)) : void 0;
     const progressLabel = ariaLabel || `Loading ${clampedValue}%`;
     return /* @__PURE__ */ jsxs(

package/dist/index26.cjs

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
 const react = require("react");
-const hooks = require("./index56.cjs");
+const hooks = require("./index71.cjs");
 const colors = require("./index4.cjs");
 const classNames = require("./index3.cjs");
 const ProgressCircle = react.forwardRef(
@@ -15,6 +15,7 @@ const ProgressCircle = react.forwardRef(
     color = "#3b82f6",
     secondaryColor = "#e0e0e0",
     buffer,
+    onComplete,
     speed = "normal",
     reverse = false,
     respectMotionPreference = true,
@@ -36,8 +37,22 @@ const ProgressCircle = react.forwardRef(
       minDuration,
       transition
     );
-    if (!shouldRender) return null;
+    const onCompleteRef = react.useRef(onComplete);
+    onCompleteRef.current = onComplete;
+    const hasCompletedRef = react.useRef(false);
     const clampedValue = Math.min(100, Math.max(0, value));
+    react.useEffect(() => {
+      if (clampedValue < 100) {
+        hasCompletedRef.current = false;
+      }
+    }, [clampedValue]);
+    react.useEffect(() => {
+      if (!indeterminate && clampedValue === 100 && !hasCompletedRef.current && onCompleteRef.current) {
+        hasCompletedRef.current = true;
+        onCompleteRef.current();
+      }
+    }, [clampedValue, indeterminate]);
+    if (!shouldRender) return null;
     const clampedBuffer = buffer !== void 0 ? Math.min(100, Math.max(0, buffer)) : void 0;
     const sizeValue = colors.parseSizeToNumber(size, 56);
     const thicknessValue = colors.parseSizeToNumber(thickness, 4);

package/dist/index26.js

@@ -1,6 +1,6 @@
 import { jsxs, jsx } from "react/jsx-runtime";
-import { forwardRef } from "react";
-import { useReducedMotion, useLoaderVisibility, getEffectiveDuration } from "./index56.js";
+import { forwardRef, useRef, useEffect } from "react";
+import { useReducedMotion, useLoaderVisibility, getEffectiveDuration } from "./index71.js";
 import { normalizeSize, parseSizeToNumber } from "./index4.js";
 import { cn } from "./index3.js";
 const ProgressCircle = forwardRef(
@@ -13,6 +13,7 @@ const ProgressCircle = forwardRef(
     color = "#3b82f6",
     secondaryColor = "#e0e0e0",
     buffer,
+    onComplete,
     speed = "normal",
     reverse = false,
     respectMotionPreference = true,
@@ -34,8 +35,22 @@ const ProgressCircle = forwardRef(
       minDuration,
       transition
     );
-    if (!shouldRender) return null;
+    const onCompleteRef = useRef(onComplete);
+    onCompleteRef.current = onComplete;
+    const hasCompletedRef = useRef(false);
     const clampedValue = Math.min(100, Math.max(0, value));
+    useEffect(() => {
+      if (clampedValue < 100) {
+        hasCompletedRef.current = false;
+      }
+    }, [clampedValue]);
+    useEffect(() => {
+      if (!indeterminate && clampedValue === 100 && !hasCompletedRef.current && onCompleteRef.current) {
+        hasCompletedRef.current = true;
+        onCompleteRef.current();
+      }
+    }, [clampedValue, indeterminate]);
+    if (!shouldRender) return null;
     const clampedBuffer = buffer !== void 0 ? Math.min(100, Math.max(0, buffer)) : void 0;
     const sizeValue = parseSizeToNumber(size, 56);
     const thicknessValue = parseSizeToNumber(thickness, 4);

package/dist/index27.cjs

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
 const react = require("react");
-const hooks = require("./index56.cjs");
+const hooks = require("./index71.cjs");
 const colors = require("./index4.cjs");
 const classNames = require("./index3.cjs");
 const ProgressRing = react.forwardRef(
@@ -16,6 +16,7 @@ const ProgressRing = react.forwardRef(
     secondaryColor = "#e0e0e0",
     gradient = false,
     buffer,
+    onComplete,
     speed = "normal",
     reverse = false,
     respectMotionPreference = true,
@@ -38,8 +39,22 @@ const ProgressRing = react.forwardRef(
       minDuration,
       transition
     );
-    if (!shouldRender) return null;
+    const onCompleteRef = react.useRef(onComplete);
+    onCompleteRef.current = onComplete;
+    const hasCompletedRef = react.useRef(false);
     const clampedValue = Math.min(100, Math.max(0, value));
+    react.useEffect(() => {
+      if (clampedValue < 100) {
+        hasCompletedRef.current = false;
+      }
+    }, [clampedValue]);
+    react.useEffect(() => {
+      if (!indeterminate && clampedValue === 100 && !hasCompletedRef.current && onCompleteRef.current) {
+        hasCompletedRef.current = true;
+        onCompleteRef.current();
+      }
+    }, [clampedValue, indeterminate]);
+    if (!shouldRender) return null;
     const clampedBuffer = buffer !== void 0 ? Math.min(100, Math.max(0, buffer)) : void 0;
     const sizeValue = colors.parseSizeToNumber(size, 56);
     const thicknessValue = colors.parseSizeToNumber(thickness, 4);

package/dist/index27.js

@@ -1,6 +1,6 @@
 import { jsxs, jsx } from "react/jsx-runtime";
-import { forwardRef, useMemo } from "react";
-import { useReducedMotion, useLoaderVisibility, getEffectiveDuration } from "./index56.js";
+import { forwardRef, useMemo, useRef, useEffect } from "react";
+import { useReducedMotion, useLoaderVisibility, getEffectiveDuration } from "./index71.js";
 import { normalizeSize, parseSizeToNumber } from "./index4.js";
 import { cn } from "./index3.js";
 const ProgressRing = forwardRef(
@@ -14,6 +14,7 @@ const ProgressRing = forwardRef(
     secondaryColor = "#e0e0e0",
     gradient = false,
     buffer,
+    onComplete,
     speed = "normal",
     reverse = false,
     respectMotionPreference = true,
@@ -36,8 +37,22 @@ const ProgressRing = forwardRef(
       minDuration,
       transition
     );
-    if (!shouldRender) return null;
+    const onCompleteRef = useRef(onComplete);
+    onCompleteRef.current = onComplete;
+    const hasCompletedRef = useRef(false);
     const clampedValue = Math.min(100, Math.max(0, value));
+    useEffect(() => {
+      if (clampedValue < 100) {
+        hasCompletedRef.current = false;
+      }
+    }, [clampedValue]);
+    useEffect(() => {
+      if (!indeterminate && clampedValue === 100 && !hasCompletedRef.current && onCompleteRef.current) {
+        hasCompletedRef.current = true;
+        onCompleteRef.current();
+      }
+    }, [clampedValue, indeterminate]);
+    if (!shouldRender) return null;
     const clampedBuffer = buffer !== void 0 ? Math.min(100, Math.max(0, buffer)) : void 0;
     const sizeValue = parseSizeToNumber(size, 56);
     const thicknessValue = parseSizeToNumber(thickness, 4);

package/dist/index28.cjs

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
 const react = require("react");
-const hooks = require("./index56.cjs");
+const hooks = require("./index71.cjs");
 const classNames = require("./index3.cjs");
 const ProgressSteps = react.forwardRef(
   ({

package/dist/index28.js

@@ -1,6 +1,6 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { forwardRef, Fragment } from "react";
-import { useLoaderVisibility } from "./index56.js";
+import { useLoaderVisibility } from "./index71.js";
 import { cn } from "./index3.js";
 const ProgressSteps = forwardRef(
   ({