premium-react-loaders 1.3.0 → 2.1.0

package/dist/index24.js

@@ -1,29 +1,33 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import { forwardRef, Fragment } from "react";
-import { useLoaderVisibility } from "./index31.js";
+import { jsxs, jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { useReducedMotion, useLoaderVisibility, getEffectiveDuration } from "./index32.js";
+import { normalizeSize, parseSizeToNumber } from "./index4.js";
 import { cn } from "./index3.js";
-const ProgressSteps = forwardRef(
+const ProgressCircle = forwardRef(
   ({
-    steps,
-    currentStep,
-    labels,
-    showNumbers = true,
-    orientation = "horizontal",
-    connector = "line",
+    value = 0,
+    indeterminate = false,
+    showValue = false,
+    size = "lg",
+    thickness = 4,
     color = "#3b82f6",
-    completedColor,
-    activeColor,
-    inactiveColor = "#e0e0e0",
+    secondaryColor = "#e0e0e0",
+    buffer,
+    speed = "normal",
+    reverse = false,
+    respectMotionPreference = true,
     delay = 0,
     minDuration = 0,
     transition,
     className,
     style,
-    testId = "progress-steps",
+    testId = "progress-circle",
     visible = true,
-    ariaLabel = "Progress steps",
+    ariaLabel,
     ...rest
   }, ref) => {
+    const prefersReducedMotion = useReducedMotion();
+    const effectiveDuration = getEffectiveDuration(speed, respectMotionPreference, prefersReducedMotion);
     const { shouldRender, opacity, transitionStyle } = useLoaderVisibility(
       visible,
       delay,
@@ -31,115 +35,112 @@ const ProgressSteps = forwardRef(
       transition
     );
     if (!shouldRender) return null;
-    const completed = completedColor || color;
-    const active = activeColor || color;
-    const getStepStatus = (index) => {
-      if (index < currentStep) return "completed";
-      if (index === currentStep) return "active";
-      return "inactive";
-    };
-    const getStepColor = (status) => {
-      if (status === "completed") return completed;
-      if (status === "active") return active;
-      return inactiveColor;
-    };
-    const getConnectorColor = (index) => {
-      return index < currentStep ? completed : inactiveColor;
-    };
-    const isHorizontal = orientation === "horizontal";
-    return /* @__PURE__ */ jsx(
+    const clampedValue = Math.min(100, Math.max(0, value));
+    const clampedBuffer = buffer !== void 0 ? Math.min(100, Math.max(0, buffer)) : void 0;
+    const sizeValue = parseSizeToNumber(size, 56);
+    const thicknessValue = parseSizeToNumber(thickness, 4);
+    const radius = (sizeValue - thicknessValue * 2) / 2;
+    const circumference = 2 * Math.PI * radius;
+    const strokeDashoffset = circumference - clampedValue / 100 * circumference;
+    const bufferDashoffset = clampedBuffer !== void 0 ? circumference - clampedBuffer / 100 * circumference : void 0;
+    const progressLabel = ariaLabel || `Loading ${clampedValue}%`;
+    return /* @__PURE__ */ jsxs(
       "div",
       {
         ref,
         "data-testid": testId,
-        className: cn(
-          "flex",
-          isHorizontal ? "flex-row items-center w-full" : "flex-col items-start",
-          className
-        ),
+        className: cn("inline-flex items-center justify-center relative", className),
         style: {
+          width: normalizeSize(size),
+          height: normalizeSize(size),
           ...style,
           opacity,
           transition: transitionStyle
         },
         role: "progressbar",
-        "aria-label": ariaLabel,
-        "aria-valuenow": currentStep,
+        "aria-label": progressLabel,
+        "aria-valuenow": indeterminate ? void 0 : clampedValue,
         "aria-valuemin": 0,
-        "aria-valuemax": steps - 1,
+        "aria-valuemax": 100,
         ...rest,
-        children: Array.from({ length: steps }).map((_, index) => {
-          const status = getStepStatus(index);
-          const stepColor = getStepColor(status);
-          const showConnector = index < steps - 1 && connector === "line";
-          return /* @__PURE__ */ jsxs(Fragment, { children: [
-            /* @__PURE__ */ jsxs(
-              "div",
-              {
-                className: cn(
-                  "flex items-center",
-                  isHorizontal ? "flex-col" : "flex-row gap-3"
+        children: [
+          /* @__PURE__ */ jsxs(
+            "svg",
+            {
+              className: cn(indeterminate && "animate-spinner-rotate"),
+              width: sizeValue,
+              height: sizeValue,
+              viewBox: `0 0 ${sizeValue} ${sizeValue}`,
+              style: indeterminate ? {
+                animation: `spinner-rotate ${effectiveDuration} linear infinite`,
+                animationDirection: reverse ? "reverse" : "normal"
+              } : void 0,
+              children: [
+                /* @__PURE__ */ jsx(
+                  "circle",
+                  {
+                    cx: sizeValue / 2,
+                    cy: sizeValue / 2,
+                    r: radius,
+                    fill: "none",
+                    stroke: secondaryColor,
+                    strokeWidth: thicknessValue
+                  }
                 ),
-                children: [
-                  /* @__PURE__ */ jsx(
-                    "div",
-                    {
-                      className: "rounded-full flex items-center justify-center font-medium text-sm transition-colors",
-                      style: {
-                        width: "2rem",
-                        height: "2rem",
-                        backgroundColor: stepColor,
-                        color: "#ffffff"
-                      },
-                      children: showNumbers && /* @__PURE__ */ jsx("span", { children: index + 1 })
-                    }
-                  ),
-                  (labels == null ? void 0 : labels[index]) && /* @__PURE__ */ jsx(
-                    "span",
-                    {
-                      className: cn(
-                        "text-xs mt-1 transition-colors",
-                        isHorizontal ? "text-center" : "text-left"
-                      ),
-                      style: {
-                        color: status === "inactive" ? "#9ca3af" : "#374151",
-                        maxWidth: isHorizontal ? "80px" : "none"
-                      },
-                      children: labels[index]
+                bufferDashoffset !== void 0 && !indeterminate && /* @__PURE__ */ jsx(
+                  "circle",
+                  {
+                    cx: sizeValue / 2,
+                    cy: sizeValue / 2,
+                    r: radius,
+                    fill: "none",
+                    stroke: color,
+                    strokeWidth: thicknessValue,
+                    strokeLinecap: "round",
+                    strokeDasharray: circumference,
+                    strokeDashoffset: bufferDashoffset,
+                    transform: `rotate(-90 ${sizeValue / 2} ${sizeValue / 2})`,
+                    opacity: 0.3
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "circle",
+                  {
+                    cx: sizeValue / 2,
+                    cy: sizeValue / 2,
+                    r: radius,
+                    fill: "none",
+                    stroke: color,
+                    strokeWidth: thicknessValue,
+                    strokeLinecap: "round",
+                    strokeDasharray: circumference,
+                    strokeDashoffset: indeterminate ? circumference * 0.75 : strokeDashoffset,
+                    transform: `rotate(-90 ${sizeValue / 2} ${sizeValue / 2})`,
+                    style: {
+                      transition: indeterminate ? "none" : "stroke-dashoffset 0.3s ease-in-out"
                     }
-                  )
-                ]
-              }
-            ),
-            showConnector && /* @__PURE__ */ jsx(
-              "div",
-              {
-                className: "transition-colors",
-                style: {
-                  backgroundColor: getConnectorColor(index),
-                  ...isHorizontal ? {
-                    height: "2px",
-                    flex: 1,
-                    marginLeft: "4px",
-                    marginRight: "4px"
-                  } : {
-                    width: "2px",
-                    height: "32px",
-                    marginLeft: "15px",
-                    marginTop: (labels == null ? void 0 : labels[index]) ? "4px" : "0",
-                    marginBottom: "4px"
                   }
-                }
-              }
-            )
-          ] }, index);
-        })
+                )
+              ]
+            }
+          ),
+          showValue && !indeterminate && /* @__PURE__ */ jsxs(
+            "span",
+            {
+              className: "absolute text-sm font-medium",
+              style: { color },
+              children: [
+                clampedValue,
+                "%"
+              ]
+            }
+          )
+        ]
       }
     );
   }
 );
-ProgressSteps.displayName = "ProgressSteps";
+ProgressCircle.displayName = "ProgressCircle";
 export {
-  ProgressSteps
+  ProgressCircle
 };
-//# sourceMappingURL=index24.js.map

package/dist/index25.cjs

@@ -2,15 +2,20 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
 const react = require("react");
-const hooks = require("./index31.cjs");
+const hooks = require("./index32.cjs");
 const colors = require("./index4.cjs");
 const classNames = require("./index3.cjs");
-const PulseDots = react.forwardRef(
+const ProgressRing = react.forwardRef(
   ({
-    size = "md",
+    value = 0,
+    indeterminate = false,
+    showValue = false,
+    size = "lg",
+    thickness = 4,
     color = "#3b82f6",
-    dotCount = 3,
-    dotSize = 10,
+    secondaryColor = "#e0e0e0",
+    gradient = false,
+    buffer,
     speed = "normal",
     reverse = false,
     respectMotionPreference = true,
@@ -19,13 +24,14 @@ const PulseDots = react.forwardRef(
     transition,
     className,
     style,
-    testId = "pulse-dots",
+    testId = "progress-ring",
     visible = true,
-    ariaLabel = "Loading...",
+    ariaLabel,
     ...rest
   }, ref) => {
     const prefersReducedMotion = hooks.useReducedMotion();
     const effectiveDuration = hooks.getEffectiveDuration(speed, respectMotionPreference, prefersReducedMotion);
+    const gradientId = react.useMemo(() => `progress-gradient-${Math.random().toString(36).substr(2, 9)}`, []);
     const { shouldRender, opacity, transitionStyle } = hooks.useLoaderVisibility(
       visible,
       delay,
@@ -33,40 +39,114 @@ const PulseDots = react.forwardRef(
       transition
     );
     if (!shouldRender) return null;
-    return /* @__PURE__ */ jsxRuntime.jsx(
+    const clampedValue = Math.min(100, Math.max(0, value));
+    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);
+    const radius = (sizeValue - thicknessValue * 2) / 2;
+    const circumference = 2 * Math.PI * radius;
+    const strokeDashoffset = circumference - clampedValue / 100 * circumference;
+    const bufferDashoffset = clampedBuffer !== void 0 ? circumference - clampedBuffer / 100 * circumference : void 0;
+    const progressLabel = ariaLabel || `Loading ${clampedValue}%`;
+    return /* @__PURE__ */ jsxRuntime.jsxs(
       "div",
       {
         ref,
         "data-testid": testId,
-        className: classNames.cn("inline-flex items-center justify-center gap-2", className),
+        className: classNames.cn("inline-flex items-center justify-center relative", className),
         style: {
+          width: colors.normalizeSize(size),
           height: colors.normalizeSize(size),
           ...style,
           opacity,
           transition: transitionStyle
         },
-        role: "status",
-        "aria-label": ariaLabel,
-        "aria-busy": "true",
+        role: "progressbar",
+        "aria-label": progressLabel,
+        "aria-valuenow": indeterminate ? void 0 : clampedValue,
+        "aria-valuemin": 0,
+        "aria-valuemax": 100,
         ...rest,
-        children: Array.from({ length: dotCount }).map((_, index) => /* @__PURE__ */ jsxRuntime.jsx(
-          "div",
-          {
-            className: "rounded-full",
-            style: {
-              width: colors.normalizeSize(dotSize),
-              height: colors.normalizeSize(dotSize),
-              backgroundColor: color,
-              animation: `pulse-bounce ${effectiveDuration} ease-in-out infinite`,
-              animationDelay: reverse ? `${(dotCount - index - 1) * 0.15}s` : `${index * 0.15}s`
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            "svg",
+            {
+              className: classNames.cn(indeterminate && "animate-spinner-rotate"),
+              width: sizeValue,
+              height: sizeValue,
+              viewBox: `0 0 ${sizeValue} ${sizeValue}`,
+              style: indeterminate ? {
+                animation: `spinner-rotate ${effectiveDuration} linear infinite`,
+                animationDirection: reverse ? "reverse" : "normal"
+              } : void 0,
+              children: [
+                gradient && /* @__PURE__ */ jsxRuntime.jsx("defs", { children: /* @__PURE__ */ jsxRuntime.jsxs("linearGradient", { id: gradientId, x1: "0%", y1: "0%", x2: "100%", y2: "100%", children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "0%", stopColor: color }),
+                  /* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "100%", stopColor: secondaryColor === "#e0e0e0" ? "#8b5cf6" : secondaryColor })
+                ] }) }),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "circle",
+                  {
+                    cx: sizeValue / 2,
+                    cy: sizeValue / 2,
+                    r: radius,
+                    fill: "none",
+                    stroke: gradient ? "#e0e0e0" : secondaryColor,
+                    strokeWidth: thicknessValue
+                  }
+                ),
+                bufferDashoffset !== void 0 && !indeterminate && /* @__PURE__ */ jsxRuntime.jsx(
+                  "circle",
+                  {
+                    cx: sizeValue / 2,
+                    cy: sizeValue / 2,
+                    r: radius,
+                    fill: "none",
+                    stroke: gradient ? `url(#${gradientId})` : color,
+                    strokeWidth: thicknessValue,
+                    strokeLinecap: "round",
+                    strokeDasharray: circumference,
+                    strokeDashoffset: bufferDashoffset,
+                    transform: `rotate(-90 ${sizeValue / 2} ${sizeValue / 2})`,
+                    opacity: 0.3
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "circle",
+                  {
+                    cx: sizeValue / 2,
+                    cy: sizeValue / 2,
+                    r: radius,
+                    fill: "none",
+                    stroke: gradient ? `url(#${gradientId})` : color,
+                    strokeWidth: thicknessValue,
+                    strokeLinecap: "round",
+                    strokeDasharray: circumference,
+                    strokeDashoffset: indeterminate ? circumference * 0.75 : strokeDashoffset,
+                    transform: `rotate(-90 ${sizeValue / 2} ${sizeValue / 2})`,
+                    style: {
+                      transition: indeterminate ? "none" : "stroke-dashoffset 0.3s ease-in-out"
+                    }
+                  }
+                )
+              ]
             }
-          },
-          index
-        ))
+          ),
+          showValue && !indeterminate && /* @__PURE__ */ jsxRuntime.jsxs(
+            "span",
+            {
+              className: "absolute text-sm font-semibold",
+              style: { color },
+              children: [
+                clampedValue,
+                "%"
+              ]
+            }
+          )
+        ]
       }
     );
   }
 );
-PulseDots.displayName = "PulseDots";
-exports.PulseDots = PulseDots;
-//# sourceMappingURL=index25.cjs.map
+ProgressRing.displayName = "ProgressRing";
+exports.ProgressRing = ProgressRing;

package/dist/index25.js

@@ -1,14 +1,19 @@
-import { jsx } from "react/jsx-runtime";
-import { forwardRef } from "react";
-import { useReducedMotion, useLoaderVisibility, getEffectiveDuration } from "./index31.js";
-import { normalizeSize } from "./index4.js";
+import { jsxs, jsx } from "react/jsx-runtime";
+import { forwardRef, useMemo } from "react";
+import { useReducedMotion, useLoaderVisibility, getEffectiveDuration } from "./index32.js";
+import { normalizeSize, parseSizeToNumber } from "./index4.js";
 import { cn } from "./index3.js";
-const PulseDots = forwardRef(
+const ProgressRing = forwardRef(
   ({
-    size = "md",
+    value = 0,
+    indeterminate = false,
+    showValue = false,
+    size = "lg",
+    thickness = 4,
     color = "#3b82f6",
-    dotCount = 3,
-    dotSize = 10,
+    secondaryColor = "#e0e0e0",
+    gradient = false,
+    buffer,
     speed = "normal",
     reverse = false,
     respectMotionPreference = true,
@@ -17,13 +22,14 @@ const PulseDots = forwardRef(
     transition,
     className,
     style,
-    testId = "pulse-dots",
+    testId = "progress-ring",
     visible = true,
-    ariaLabel = "Loading...",
+    ariaLabel,
     ...rest
   }, ref) => {
     const prefersReducedMotion = useReducedMotion();
     const effectiveDuration = getEffectiveDuration(speed, respectMotionPreference, prefersReducedMotion);
+    const gradientId = useMemo(() => `progress-gradient-${Math.random().toString(36).substr(2, 9)}`, []);
     const { shouldRender, opacity, transitionStyle } = useLoaderVisibility(
       visible,
       delay,
@@ -31,42 +37,116 @@ const PulseDots = forwardRef(
       transition
     );
     if (!shouldRender) return null;
-    return /* @__PURE__ */ jsx(
+    const clampedValue = Math.min(100, Math.max(0, value));
+    const clampedBuffer = buffer !== void 0 ? Math.min(100, Math.max(0, buffer)) : void 0;
+    const sizeValue = parseSizeToNumber(size, 56);
+    const thicknessValue = parseSizeToNumber(thickness, 4);
+    const radius = (sizeValue - thicknessValue * 2) / 2;
+    const circumference = 2 * Math.PI * radius;
+    const strokeDashoffset = circumference - clampedValue / 100 * circumference;
+    const bufferDashoffset = clampedBuffer !== void 0 ? circumference - clampedBuffer / 100 * circumference : void 0;
+    const progressLabel = ariaLabel || `Loading ${clampedValue}%`;
+    return /* @__PURE__ */ jsxs(
       "div",
       {
         ref,
         "data-testid": testId,
-        className: cn("inline-flex items-center justify-center gap-2", className),
+        className: cn("inline-flex items-center justify-center relative", className),
         style: {
+          width: normalizeSize(size),
           height: normalizeSize(size),
           ...style,
           opacity,
           transition: transitionStyle
         },
-        role: "status",
-        "aria-label": ariaLabel,
-        "aria-busy": "true",
+        role: "progressbar",
+        "aria-label": progressLabel,
+        "aria-valuenow": indeterminate ? void 0 : clampedValue,
+        "aria-valuemin": 0,
+        "aria-valuemax": 100,
         ...rest,
-        children: Array.from({ length: dotCount }).map((_, index) => /* @__PURE__ */ jsx(
-          "div",
-          {
-            className: "rounded-full",
-            style: {
-              width: normalizeSize(dotSize),
-              height: normalizeSize(dotSize),
-              backgroundColor: color,
-              animation: `pulse-bounce ${effectiveDuration} ease-in-out infinite`,
-              animationDelay: reverse ? `${(dotCount - index - 1) * 0.15}s` : `${index * 0.15}s`
+        children: [
+          /* @__PURE__ */ jsxs(
+            "svg",
+            {
+              className: cn(indeterminate && "animate-spinner-rotate"),
+              width: sizeValue,
+              height: sizeValue,
+              viewBox: `0 0 ${sizeValue} ${sizeValue}`,
+              style: indeterminate ? {
+                animation: `spinner-rotate ${effectiveDuration} linear infinite`,
+                animationDirection: reverse ? "reverse" : "normal"
+              } : void 0,
+              children: [
+                gradient && /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsxs("linearGradient", { id: gradientId, x1: "0%", y1: "0%", x2: "100%", y2: "100%", children: [
+                  /* @__PURE__ */ jsx("stop", { offset: "0%", stopColor: color }),
+                  /* @__PURE__ */ jsx("stop", { offset: "100%", stopColor: secondaryColor === "#e0e0e0" ? "#8b5cf6" : secondaryColor })
+                ] }) }),
+                /* @__PURE__ */ jsx(
+                  "circle",
+                  {
+                    cx: sizeValue / 2,
+                    cy: sizeValue / 2,
+                    r: radius,
+                    fill: "none",
+                    stroke: gradient ? "#e0e0e0" : secondaryColor,
+                    strokeWidth: thicknessValue
+                  }
+                ),
+                bufferDashoffset !== void 0 && !indeterminate && /* @__PURE__ */ jsx(
+                  "circle",
+                  {
+                    cx: sizeValue / 2,
+                    cy: sizeValue / 2,
+                    r: radius,
+                    fill: "none",
+                    stroke: gradient ? `url(#${gradientId})` : color,
+                    strokeWidth: thicknessValue,
+                    strokeLinecap: "round",
+                    strokeDasharray: circumference,
+                    strokeDashoffset: bufferDashoffset,
+                    transform: `rotate(-90 ${sizeValue / 2} ${sizeValue / 2})`,
+                    opacity: 0.3
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "circle",
+                  {
+                    cx: sizeValue / 2,
+                    cy: sizeValue / 2,
+                    r: radius,
+                    fill: "none",
+                    stroke: gradient ? `url(#${gradientId})` : color,
+                    strokeWidth: thicknessValue,
+                    strokeLinecap: "round",
+                    strokeDasharray: circumference,
+                    strokeDashoffset: indeterminate ? circumference * 0.75 : strokeDashoffset,
+                    transform: `rotate(-90 ${sizeValue / 2} ${sizeValue / 2})`,
+                    style: {
+                      transition: indeterminate ? "none" : "stroke-dashoffset 0.3s ease-in-out"
+                    }
+                  }
+                )
+              ]
             }
-          },
-          index
-        ))
+          ),
+          showValue && !indeterminate && /* @__PURE__ */ jsxs(
+            "span",
+            {
+              className: "absolute text-sm font-semibold",
+              style: { color },
+              children: [
+                clampedValue,
+                "%"
+              ]
+            }
+          )
+        ]
       }
     );
   }
 );
-PulseDots.displayName = "PulseDots";
+ProgressRing.displayName = "ProgressRing";
 export {
-  PulseDots
+  ProgressRing
 };
-//# sourceMappingURL=index25.js.map