premium-react-loaders 1.0.1 → 1.1.0

package/dist/index21.js

@@ -1,57 +1,103 @@
-import { jsx } from "react/jsx-runtime";
-import { forwardRef } from "react";
-import { normalizeSize, getAnimationDuration } from "./index4.js";
+import { jsxs, jsx } from "react/jsx-runtime";
+import { forwardRef, useMemo } from "react";
+import { normalizeSize, getAnimationDuration, getContrastColor } from "./index4.js";
 import { cn } from "./index3.js";
-const PulseDots = forwardRef(
+const ProgressBar = forwardRef(
   ({
-    size = 40,
+    value = 0,
+    indeterminate = false,
+    showValue = false,
+    height = "0.5rem",
     color = "#3b82f6",
-    dotCount = 3,
-    dotSize = 10,
+    secondaryColor = "#e0e0e0",
+    gradient = false,
+    buffer,
     speed = "normal",
     className,
     style,
-    testId = "pulse-dots",
+    testId = "progress-bar",
     visible = true,
-    ariaLabel = "Loading...",
+    ariaLabel,
     ...rest
   }, ref) => {
     if (!visible) return null;
+    const clampedValue = Math.min(100, Math.max(0, value));
+    const clampedBuffer = buffer !== void 0 ? Math.min(100, Math.max(0, buffer)) : void 0;
+    const progressLabel = ariaLabel || `Loading ${clampedValue}%`;
     const animationDuration = getAnimationDuration(speed);
-    return /* @__PURE__ */ jsx(
+    const gradientId = useMemo(() => `progress-bar-gradient-${Math.random().toString(36).substr(2, 9)}`, []);
+    return /* @__PURE__ */ jsxs(
       "div",
       {
         ref,
         "data-testid": testId,
-        className: cn("inline-flex items-center justify-center gap-2", className),
+        className: cn("relative w-full overflow-hidden rounded-full", className),
         style: {
-          height: normalizeSize(size),
+          height: normalizeSize(height),
+          backgroundColor: secondaryColor,
           ...style
         },
-        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 ${animationDuration} ease-in-out infinite`,
-              animationDelay: `${index * 0.15}s`
+        children: [
+          gradient && !indeterminate && /* @__PURE__ */ jsx("svg", { width: "0", height: "0", style: { position: "absolute" }, children: /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsxs("linearGradient", { id: gradientId, x1: "0%", y1: "0%", x2: "100%", y2: "0%", children: [
+            /* @__PURE__ */ jsx("stop", { offset: "0%", stopColor: color }),
+            /* @__PURE__ */ jsx("stop", { offset: "100%", stopColor: secondaryColor || "#8b5cf6" })
+          ] }) }) }),
+          clampedBuffer !== void 0 && !indeterminate && /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: "absolute h-full rounded-full opacity-30",
+              style: {
+                width: `${clampedBuffer}%`,
+                backgroundColor: color
+              }
             }
-          },
-          index
-        ))
+          ),
+          indeterminate ? /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: "absolute h-full rounded-full",
+              style: {
+                backgroundColor: gradient ? `url(#${gradientId})` : color,
+                animation: `progress-indeterminate ${animationDuration} ease-in-out infinite`,
+                width: "40%"
+              }
+            }
+          ) : /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: "h-full rounded-full transition-all duration-300 ease-in-out",
+              style: {
+                width: `${clampedValue}%`,
+                background: gradient ? `url(#${gradientId})` : color
+              }
+            }
+          ),
+          showValue && !indeterminate && /* @__PURE__ */ jsxs(
+            "span",
+            {
+              className: "absolute inset-0 flex items-center justify-center text-xs font-medium",
+              style: {
+                color: clampedValue > 50 ? getContrastColor(color) : secondaryColor === "#e0e0e0" ? "#000000" : getContrastColor(secondaryColor)
+              },
+              children: [
+                clampedValue,
+                "%"
+              ]
+            }
+          )
+        ]
       }
     );
   }
 );
-PulseDots.displayName = "PulseDots";
+ProgressBar.displayName = "ProgressBar";
 export {
-  PulseDots
+  ProgressBar
 };
 //# sourceMappingURL=index21.js.map

package/dist/index21.js.map

@@ -1 +1 @@
-{"version":3,"file":"index21.js","sources":["../src/components/pulse/PulseDots.tsx"],"sourcesContent":["import { forwardRef } from 'react';\nimport { PulseDotsProps } from '../../types';\nimport { cn, normalizeSize, getAnimationDuration } from '../../utils';\n\n/**\n * PulseDots - Bouncing dots loader\n *\n * A loader with bouncing dots that scale and fade in a sequence.\n *\n * @example\n * ```tsx\n * <PulseDots size={40} color=\"#3b82f6\" />\n * <PulseDots size={32} dotCount={5} speed=\"fast\" />\n * ```\n */\nexport const PulseDots = forwardRef<HTMLDivElement, PulseDotsProps>(\n  (\n    {\n      size = 40,\n      color = '#3b82f6',\n      dotCount = 3,\n      dotSize = 10,\n      speed = 'normal',\n      className,\n      style,\n      testId = 'pulse-dots',\n      visible = true,\n      ariaLabel = 'Loading...',\n      ...rest\n    },\n    ref\n  ) => {\n    if (!visible) return null;\n\n    const animationDuration = getAnimationDuration(speed);\n\n    return (\n      <div\n        ref={ref}\n        data-testid={testId}\n        className={cn('inline-flex items-center justify-center gap-2', className)}\n        style={{\n          height: normalizeSize(size),\n          ...style,\n        }}\n        role=\"status\"\n        aria-label={ariaLabel}\n        aria-busy=\"true\"\n        {...rest}\n      >\n        {Array.from({ length: dotCount }).map((_, index) => (\n          <div\n            key={index}\n            className=\"rounded-full\"\n            style={{\n              width: normalizeSize(dotSize),\n              height: normalizeSize(dotSize),\n              backgroundColor: color,\n              animation: `pulse-bounce ${animationDuration} ease-in-out infinite`,\n              animationDelay: `${index * 0.15}s`,\n            }}\n          />\n        ))}\n      </div>\n    );\n  }\n);\n\nPulseDots.displayName = 'PulseDots';\n"],"names":[],"mappings":";;;;AAeO,MAAM,YAAY;AAAA,EACvB,CACE;AAAA,IACE,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,WAAW;AAAA,IACX,UAAU;AAAA,IACV,QAAQ;AAAA,IACR;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT,UAAU;AAAA,IACV,YAAY;AAAA,IACZ,GAAG;AAAA,EAAA,GAEL,QACG;AACH,QAAI,CAAC,QAAS,QAAO;AAErB,UAAM,oBAAoB,qBAAqB,KAAK;AAEpD,WACE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,eAAa;AAAA,QACb,WAAW,GAAG,iDAAiD,SAAS;AAAA,QACxE,OAAO;AAAA,UACL,QAAQ,cAAc,IAAI;AAAA,UAC1B,GAAG;AAAA,QAAA;AAAA,QAEL,MAAK;AAAA,QACL,cAAY;AAAA,QACZ,aAAU;AAAA,QACT,GAAG;AAAA,QAEH,UAAA,MAAM,KAAK,EAAE,QAAQ,UAAU,EAAE,IAAI,CAAC,GAAG,UACxC;AAAA,UAAC;AAAA,UAAA;AAAA,YAEC,WAAU;AAAA,YACV,OAAO;AAAA,cACL,OAAO,cAAc,OAAO;AAAA,cAC5B,QAAQ,cAAc,OAAO;AAAA,cAC7B,iBAAiB;AAAA,cACjB,WAAW,gBAAgB,iBAAiB;AAAA,cAC5C,gBAAgB,GAAG,QAAQ,IAAI;AAAA,YAAA;AAAA,UACjC;AAAA,UARK;AAAA,QAAA,CAUR;AAAA,MAAA;AAAA,IAAA;AAAA,EAGP;AACF;AAEA,UAAU,cAAc;"}
+{"version":3,"file":"index21.js","sources":["../src/components/progress/ProgressBar.tsx"],"sourcesContent":["import { forwardRef, useMemo } from 'react';\nimport { ProgressBarProps } from '../../types';\nimport { cn, normalizeSize, getContrastColor, getAnimationDuration } from '../../utils';\n\n/**\n * ProgressBar - Linear progress bar\n *\n * A horizontal progress bar that can be determinate (showing specific progress) or indeterminate (loading animation).\n *\n * @example\n * ```tsx\n * <ProgressBar value={75} showValue />\n * <ProgressBar indeterminate />\n * <ProgressBar value={50} height={8} color=\"#8b5cf6\" />\n * <ProgressBar value={50} buffer={75} /> // YouTube-style buffering\n * <ProgressBar value={60} gradient /> // Gradient progress\n * ```\n */\nexport const ProgressBar = forwardRef<HTMLDivElement, ProgressBarProps>(\n  (\n    {\n      value = 0,\n      indeterminate = false,\n      showValue = false,\n      height = '0.5rem',\n      color = '#3b82f6',\n      secondaryColor = '#e0e0e0',\n      gradient = false,\n      buffer,\n      speed = 'normal',\n      className,\n      style,\n      testId = 'progress-bar',\n      visible = true,\n      ariaLabel,\n      ...rest\n    },\n    ref\n  ) => {\n    if (!visible) return null;\n\n    const clampedValue = Math.min(100, Math.max(0, value));\n    const clampedBuffer = buffer !== undefined ? Math.min(100, Math.max(0, buffer)) : undefined;\n    const progressLabel = ariaLabel || `Loading ${clampedValue}%`;\n    const animationDuration = getAnimationDuration(speed);\n\n    // Generate gradient ID for SVG-based gradient\n    const gradientId = useMemo(() => `progress-bar-gradient-${Math.random().toString(36).substr(2, 9)}`, []);\n\n    return (\n      <div\n        ref={ref}\n        data-testid={testId}\n        className={cn('relative w-full overflow-hidden rounded-full', className)}\n        style={{\n          height: normalizeSize(height),\n          backgroundColor: secondaryColor,\n          ...style,\n        }}\n        role=\"progressbar\"\n        aria-label={progressLabel}\n        aria-valuenow={indeterminate ? undefined : clampedValue}\n        aria-valuemin={0}\n        aria-valuemax={100}\n        {...rest}\n      >\n        {/* Gradient SVG definition */}\n        {gradient && !indeterminate && (\n          <svg width=\"0\" height=\"0\" style={{ position: 'absolute' }}>\n            <defs>\n              <linearGradient id={gradientId} x1=\"0%\" y1=\"0%\" x2=\"100%\" y2=\"0%\">\n                <stop offset=\"0%\" stopColor={color} />\n                <stop offset=\"100%\" stopColor={secondaryColor || '#8b5cf6'} />\n              </linearGradient>\n            </defs>\n          </svg>\n        )}\n\n        {/* Buffer indicator (shows behind main progress) */}\n        {clampedBuffer !== undefined && !indeterminate && (\n          <div\n            className=\"absolute h-full rounded-full opacity-30\"\n            style={{\n              width: `${clampedBuffer}%`,\n              backgroundColor: color,\n            }}\n          />\n        )}\n\n        {indeterminate ? (\n          <div\n            className=\"absolute h-full rounded-full\"\n            style={{\n              backgroundColor: gradient ? `url(#${gradientId})` : color,\n              animation: `progress-indeterminate ${animationDuration} ease-in-out infinite`,\n              width: '40%',\n            }}\n          />\n        ) : (\n          <div\n            className=\"h-full rounded-full transition-all duration-300 ease-in-out\"\n            style={{\n              width: `${clampedValue}%`,\n              background: gradient ? `url(#${gradientId})` : color,\n            }}\n          />\n        )}\n\n        {showValue && !indeterminate && (\n          <span\n            className=\"absolute inset-0 flex items-center justify-center text-xs font-medium\"\n            style={{\n              color: clampedValue > 50 ? getContrastColor(color) : secondaryColor === '#e0e0e0' ? '#000000' : getContrastColor(secondaryColor)\n            }}\n          >\n            {clampedValue}%\n          </span>\n        )}\n      </div>\n    );\n  }\n);\n\nProgressBar.displayName = 'ProgressBar';\n"],"names":[],"mappings":";;;;AAkBO,MAAM,cAAc;AAAA,EACzB,CACE;AAAA,IACE,QAAQ;AAAA,IACR,gBAAgB;AAAA,IAChB,YAAY;AAAA,IACZ,SAAS;AAAA,IACT,QAAQ;AAAA,IACR,iBAAiB;AAAA,IACjB,WAAW;AAAA,IACX;AAAA,IACA,QAAQ;AAAA,IACR;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT,UAAU;AAAA,IACV;AAAA,IACA,GAAG;AAAA,EAAA,GAEL,QACG;AACH,QAAI,CAAC,QAAS,QAAO;AAErB,UAAM,eAAe,KAAK,IAAI,KAAK,KAAK,IAAI,GAAG,KAAK,CAAC;AACrD,UAAM,gBAAgB,WAAW,SAAY,KAAK,IAAI,KAAK,KAAK,IAAI,GAAG,MAAM,CAAC,IAAI;AAClF,UAAM,gBAAgB,aAAa,WAAW,YAAY;AAC1D,UAAM,oBAAoB,qBAAqB,KAAK;AAGpD,UAAM,aAAa,QAAQ,MAAM,yBAAyB,KAAK,SAAS,SAAS,EAAE,EAAE,OAAO,GAAG,CAAC,CAAC,IAAI,EAAE;AAEvG,WACE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,eAAa;AAAA,QACb,WAAW,GAAG,gDAAgD,SAAS;AAAA,QACvE,OAAO;AAAA,UACL,QAAQ,cAAc,MAAM;AAAA,UAC5B,iBAAiB;AAAA,UACjB,GAAG;AAAA,QAAA;AAAA,QAEL,MAAK;AAAA,QACL,cAAY;AAAA,QACZ,iBAAe,gBAAgB,SAAY;AAAA,QAC3C,iBAAe;AAAA,QACf,iBAAe;AAAA,QACd,GAAG;AAAA,QAGH,UAAA;AAAA,UAAA,YAAY,CAAC,iBACZ,oBAAC,OAAA,EAAI,OAAM,KAAI,QAAO,KAAI,OAAO,EAAE,UAAU,WAAA,GAC3C,8BAAC,QAAA,EACC,UAAA,qBAAC,kBAAA,EAAe,IAAI,YAAY,IAAG,MAAK,IAAG,MAAK,IAAG,QAAO,IAAG,MAC3D,UAAA;AAAA,YAAA,oBAAC,QAAA,EAAK,QAAO,MAAK,WAAW,OAAO;AAAA,gCACnC,QAAA,EAAK,QAAO,QAAO,WAAW,kBAAkB,UAAA,CAAW;AAAA,UAAA,EAAA,CAC9D,GACF,GACF;AAAA,UAID,kBAAkB,UAAa,CAAC,iBAC/B;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAU;AAAA,cACV,OAAO;AAAA,gBACL,OAAO,GAAG,aAAa;AAAA,gBACvB,iBAAiB;AAAA,cAAA;AAAA,YACnB;AAAA,UAAA;AAAA,UAIH,gBACC;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAU;AAAA,cACV,OAAO;AAAA,gBACL,iBAAiB,WAAW,QAAQ,UAAU,MAAM;AAAA,gBACpD,WAAW,0BAA0B,iBAAiB;AAAA,gBACtD,OAAO;AAAA,cAAA;AAAA,YACT;AAAA,UAAA,IAGF;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAU;AAAA,cACV,OAAO;AAAA,gBACL,OAAO,GAAG,YAAY;AAAA,gBACtB,YAAY,WAAW,QAAQ,UAAU,MAAM;AAAA,cAAA;AAAA,YACjD;AAAA,UAAA;AAAA,UAIH,aAAa,CAAC,iBACb;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAU;AAAA,cACV,OAAO;AAAA,gBACL,OAAO,eAAe,KAAK,iBAAiB,KAAK,IAAI,mBAAmB,YAAY,YAAY,iBAAiB,cAAc;AAAA,cAAA;AAAA,cAGhI,UAAA;AAAA,gBAAA;AAAA,gBAAa;AAAA,cAAA;AAAA,YAAA;AAAA,UAAA;AAAA,QAChB;AAAA,MAAA;AAAA,IAAA;AAAA,EAIR;AACF;AAEA,YAAY,cAAc;"}

package/dist/index22.cjs

@@ -4,59 +4,126 @@ const jsxRuntime = require("react/jsx-runtime");
 const react = require("react");
 const colors = require("./index4.cjs");
 const classNames = require("./index3.cjs");
-const PulseWave = react.forwardRef(
+const ProgressCircle = react.forwardRef(
   ({
-    size = 40,
+    value = 0,
+    indeterminate = false,
+    showValue = false,
+    size = 60,
+    thickness = 4,
     color = "#3b82f6",
-    barCount = 5,
+    secondaryColor = "#e0e0e0",
+    buffer,
     speed = "normal",
     className,
     style,
-    testId = "pulse-wave",
+    testId = "progress-circle",
     visible = true,
-    ariaLabel = "Loading...",
+    ariaLabel,
     ...rest
   }, ref) => {
     if (!visible) return null;
-    const sizeValue = typeof size === "number" ? size : parseInt(String(size), 10);
-    const barWidth = Math.floor(sizeValue / (barCount * 2.5));
+    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, 60);
+    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}%`;
     const animationDuration = colors.getAnimationDuration(speed);
-    return /* @__PURE__ */ jsxRuntime.jsx(
+    return /* @__PURE__ */ jsxRuntime.jsxs(
       "div",
       {
         ref,
         "data-testid": testId,
-        className: classNames.cn("inline-flex items-end justify-center gap-1", className),
+        className: classNames.cn("inline-flex items-center justify-center relative", className),
         style: {
+          width: colors.normalizeSize(size),
           height: colors.normalizeSize(size),
           ...style
         },
-        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: barCount }).map((_, index) => {
-          const delay = index / barCount * 0.5;
-          return /* @__PURE__ */ jsxRuntime.jsx(
-            "div",
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            "svg",
             {
-              className: "rounded-sm",
-              style: {
-                width: `${barWidth}px`,
-                height: "100%",
-                backgroundColor: color,
-                animation: `pulse-wave ${animationDuration} ease-in-out infinite`,
-                animationDelay: `${delay}s`,
-                transformOrigin: "bottom"
-              }
-            },
-            index
-          );
-        })
+              className: classNames.cn(indeterminate && "animate-spinner-rotate"),
+              width: sizeValue,
+              height: sizeValue,
+              viewBox: `0 0 ${sizeValue} ${sizeValue}`,
+              style: indeterminate ? { animation: `spinner-rotate ${animationDuration} linear infinite` } : void 0,
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "circle",
+                  {
+                    cx: sizeValue / 2,
+                    cy: sizeValue / 2,
+                    r: radius,
+                    fill: "none",
+                    stroke: secondaryColor,
+                    strokeWidth: thicknessValue
+                  }
+                ),
+                bufferDashoffset !== void 0 && !indeterminate && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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"
+                    }
+                  }
+                )
+              ]
+            }
+          ),
+          showValue && !indeterminate && /* @__PURE__ */ jsxRuntime.jsxs(
+            "span",
+            {
+              className: "absolute text-sm font-medium",
+              style: { color },
+              children: [
+                clampedValue,
+                "%"
+              ]
+            }
+          )
+        ]
       }
     );
   }
 );
-PulseWave.displayName = "PulseWave";
-exports.PulseWave = PulseWave;
+ProgressCircle.displayName = "ProgressCircle";
+exports.ProgressCircle = ProgressCircle;
 //# sourceMappingURL=index22.cjs.map

package/dist/index22.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index22.cjs","sources":["../src/components/pulse/PulseWave.tsx"],"sourcesContent":["import { forwardRef } from 'react';\nimport { PulseWaveProps } from '../../types';\nimport { cn, normalizeSize, getAnimationDuration } from '../../utils';\n\n/**\n * PulseWave - Wave pattern loader\n *\n * A loader with bars that animate in a wave pattern.\n *\n * @example\n * ```tsx\n * <PulseWave size={40} color=\"#3b82f6\" />\n * <PulseWave size={32} barCount={7} speed=\"slow\" />\n * ```\n */\nexport const PulseWave = forwardRef<HTMLDivElement, PulseWaveProps>(\n  (\n    {\n      size = 40,\n      color = '#3b82f6',\n      barCount = 5,\n      speed = 'normal',\n      className,\n      style,\n      testId = 'pulse-wave',\n      visible = true,\n      ariaLabel = 'Loading...',\n      ...rest\n    },\n    ref\n  ) => {\n    if (!visible) return null;\n\n    const sizeValue = typeof size === 'number' ? size : parseInt(String(size), 10);\n    const barWidth = Math.floor(sizeValue / (barCount * 2.5));\n    const animationDuration = getAnimationDuration(speed);\n\n    return (\n      <div\n        ref={ref}\n        data-testid={testId}\n        className={cn('inline-flex items-end justify-center gap-1', className)}\n        style={{\n          height: normalizeSize(size),\n          ...style,\n        }}\n        role=\"status\"\n        aria-label={ariaLabel}\n        aria-busy=\"true\"\n        {...rest}\n      >\n        {Array.from({ length: barCount }).map((_, index) => {\n          const delay = (index / barCount) * 0.5;\n\n          return (\n            <div\n              key={index}\n              className=\"rounded-sm\"\n              style={{\n                width: `${barWidth}px`,\n                height: '100%',\n                backgroundColor: color,\n                animation: `pulse-wave ${animationDuration} ease-in-out infinite`,\n                animationDelay: `${delay}s`,\n                transformOrigin: 'bottom',\n              }}\n            />\n          );\n        })}\n      </div>\n    );\n  }\n);\n\nPulseWave.displayName = 'PulseWave';\n"],"names":["forwardRef","getAnimationDuration","jsx","cn","normalizeSize"],"mappings":";;;;;;AAeO,MAAM,YAAYA,MAAAA;AAAAA,EACvB,CACE;AAAA,IACE,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,WAAW;AAAA,IACX,QAAQ;AAAA,IACR;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT,UAAU;AAAA,IACV,YAAY;AAAA,IACZ,GAAG;AAAA,EAAA,GAEL,QACG;AACH,QAAI,CAAC,QAAS,QAAO;AAErB,UAAM,YAAY,OAAO,SAAS,WAAW,OAAO,SAAS,OAAO,IAAI,GAAG,EAAE;AAC7E,UAAM,WAAW,KAAK,MAAM,aAAa,WAAW,IAAI;AACxD,UAAM,oBAAoBC,OAAAA,qBAAqB,KAAK;AAEpD,WACEC,2BAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,eAAa;AAAA,QACb,WAAWC,WAAAA,GAAG,8CAA8C,SAAS;AAAA,QACrE,OAAO;AAAA,UACL,QAAQC,OAAAA,cAAc,IAAI;AAAA,UAC1B,GAAG;AAAA,QAAA;AAAA,QAEL,MAAK;AAAA,QACL,cAAY;AAAA,QACZ,aAAU;AAAA,QACT,GAAG;AAAA,QAEH,UAAA,MAAM,KAAK,EAAE,QAAQ,SAAA,CAAU,EAAE,IAAI,CAAC,GAAG,UAAU;AAClD,gBAAM,QAAS,QAAQ,WAAY;AAEnC,iBACEF,2BAAAA;AAAAA,YAAC;AAAA,YAAA;AAAA,cAEC,WAAU;AAAA,cACV,OAAO;AAAA,gBACL,OAAO,GAAG,QAAQ;AAAA,gBAClB,QAAQ;AAAA,gBACR,iBAAiB;AAAA,gBACjB,WAAW,cAAc,iBAAiB;AAAA,gBAC1C,gBAAgB,GAAG,KAAK;AAAA,gBACxB,iBAAiB;AAAA,cAAA;AAAA,YACnB;AAAA,YATK;AAAA,UAAA;AAAA,QAYX,CAAC;AAAA,MAAA;AAAA,IAAA;AAAA,EAGP;AACF;AAEA,UAAU,cAAc;;"}
+{"version":3,"file":"index22.cjs","sources":["../src/components/progress/ProgressCircle.tsx"],"sourcesContent":["import { forwardRef } from 'react';\nimport { ProgressCircleProps } from '../../types';\nimport { cn, normalizeSize, parseSizeToNumber, getAnimationDuration } from '../../utils';\n\n/**\n * ProgressCircle - SVG-based circular progress indicator\n *\n * A circular progress indicator that shows progress as a partial circle.\n *\n * @example\n * ```tsx\n * <ProgressCircle value={75} showValue />\n * <ProgressCircle value={50} size={80} thickness={6} />\n * <ProgressCircle indeterminate speed=\"fast\" />\n * <ProgressCircle value={50} buffer={75} />\n * ```\n */\nexport const ProgressCircle = forwardRef<HTMLDivElement, ProgressCircleProps>(\n  (\n    {\n      value = 0,\n      indeterminate = false,\n      showValue = false,\n      size = 60,\n      thickness = 4,\n      color = '#3b82f6',\n      secondaryColor = '#e0e0e0',\n      buffer,\n      speed = 'normal',\n      className,\n      style,\n      testId = 'progress-circle',\n      visible = true,\n      ariaLabel,\n      ...rest\n    },\n    ref\n  ) => {\n    if (!visible) return null;\n\n    const clampedValue = Math.min(100, Math.max(0, value));\n    const clampedBuffer = buffer !== undefined ? Math.min(100, Math.max(0, buffer)) : undefined;\n    const sizeValue = parseSizeToNumber(size, 60);\n    const thicknessValue = parseSizeToNumber(thickness, 4);\n    const radius = (sizeValue - thicknessValue * 2) / 2;\n    const circumference = 2 * Math.PI * radius;\n    const strokeDashoffset = circumference - (clampedValue / 100) * circumference;\n    const bufferDashoffset = clampedBuffer !== undefined ? circumference - (clampedBuffer / 100) * circumference : undefined;\n    const progressLabel = ariaLabel || `Loading ${clampedValue}%`;\n    const animationDuration = getAnimationDuration(speed);\n\n    return (\n      <div\n        ref={ref}\n        data-testid={testId}\n        className={cn('inline-flex items-center justify-center relative', className)}\n        style={{\n          width: normalizeSize(size),\n          height: normalizeSize(size),\n          ...style,\n        }}\n        role=\"progressbar\"\n        aria-label={progressLabel}\n        aria-valuenow={indeterminate ? undefined : clampedValue}\n        aria-valuemin={0}\n        aria-valuemax={100}\n        {...rest}\n      >\n        <svg\n          className={cn(indeterminate && 'animate-spinner-rotate')}\n          width={sizeValue}\n          height={sizeValue}\n          viewBox={`0 0 ${sizeValue} ${sizeValue}`}\n          style={indeterminate ? { animation: `spinner-rotate ${animationDuration} linear infinite` } : undefined}\n        >\n          {/* Background circle */}\n          <circle\n            cx={sizeValue / 2}\n            cy={sizeValue / 2}\n            r={radius}\n            fill=\"none\"\n            stroke={secondaryColor}\n            strokeWidth={thicknessValue}\n          />\n          {/* Buffer circle (behind progress) */}\n          {bufferDashoffset !== undefined && !indeterminate && (\n            <circle\n              cx={sizeValue / 2}\n              cy={sizeValue / 2}\n              r={radius}\n              fill=\"none\"\n              stroke={color}\n              strokeWidth={thicknessValue}\n              strokeLinecap=\"round\"\n              strokeDasharray={circumference}\n              strokeDashoffset={bufferDashoffset}\n              transform={`rotate(-90 ${sizeValue / 2} ${sizeValue / 2})`}\n              opacity={0.3}\n            />\n          )}\n          {/* Progress circle */}\n          <circle\n            cx={sizeValue / 2}\n            cy={sizeValue / 2}\n            r={radius}\n            fill=\"none\"\n            stroke={color}\n            strokeWidth={thicknessValue}\n            strokeLinecap=\"round\"\n            strokeDasharray={circumference}\n            strokeDashoffset={indeterminate ? circumference * 0.75 : strokeDashoffset}\n            transform={`rotate(-90 ${sizeValue / 2} ${sizeValue / 2})`}\n            style={{\n              transition: indeterminate ? 'none' : 'stroke-dashoffset 0.3s ease-in-out',\n            }}\n          />\n        </svg>\n        {showValue && !indeterminate && (\n          <span\n            className=\"absolute text-sm font-medium\"\n            style={{ color }}\n          >\n            {clampedValue}%\n          </span>\n        )}\n      </div>\n    );\n  }\n);\n\nProgressCircle.displayName = 'ProgressCircle';\n"],"names":["forwardRef","parseSizeToNumber","getAnimationDuration","jsxs","cn","normalizeSize","jsx"],"mappings":"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"}

package/dist/index22.js

@@ -1,62 +1,129 @@
-import { jsx } from "react/jsx-runtime";
+import { jsxs, jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
-import { normalizeSize, getAnimationDuration } from "./index4.js";
+import { normalizeSize, getAnimationDuration, parseSizeToNumber } from "./index4.js";
 import { cn } from "./index3.js";
-const PulseWave = forwardRef(
+const ProgressCircle = forwardRef(
   ({
-    size = 40,
+    value = 0,
+    indeterminate = false,
+    showValue = false,
+    size = 60,
+    thickness = 4,
     color = "#3b82f6",
-    barCount = 5,
+    secondaryColor = "#e0e0e0",
+    buffer,
     speed = "normal",
     className,
     style,
-    testId = "pulse-wave",
+    testId = "progress-circle",
     visible = true,
-    ariaLabel = "Loading...",
+    ariaLabel,
     ...rest
   }, ref) => {
     if (!visible) return null;
-    const sizeValue = typeof size === "number" ? size : parseInt(String(size), 10);
-    const barWidth = Math.floor(sizeValue / (barCount * 2.5));
+    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, 60);
+    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}%`;
     const animationDuration = getAnimationDuration(speed);
-    return /* @__PURE__ */ jsx(
+    return /* @__PURE__ */ jsxs(
       "div",
       {
         ref,
         "data-testid": testId,
-        className: cn("inline-flex items-end justify-center gap-1", className),
+        className: cn("inline-flex items-center justify-center relative", className),
         style: {
+          width: normalizeSize(size),
           height: normalizeSize(size),
           ...style
         },
-        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: barCount }).map((_, index) => {
-          const delay = index / barCount * 0.5;
-          return /* @__PURE__ */ jsx(
-            "div",
+        children: [
+          /* @__PURE__ */ jsxs(
+            "svg",
             {
-              className: "rounded-sm",
-              style: {
-                width: `${barWidth}px`,
-                height: "100%",
-                backgroundColor: color,
-                animation: `pulse-wave ${animationDuration} ease-in-out infinite`,
-                animationDelay: `${delay}s`,
-                transformOrigin: "bottom"
-              }
-            },
-            index
-          );
-        })
+              className: cn(indeterminate && "animate-spinner-rotate"),
+              width: sizeValue,
+              height: sizeValue,
+              viewBox: `0 0 ${sizeValue} ${sizeValue}`,
+              style: indeterminate ? { animation: `spinner-rotate ${animationDuration} linear infinite` } : void 0,
+              children: [
+                /* @__PURE__ */ jsx(
+                  "circle",
+                  {
+                    cx: sizeValue / 2,
+                    cy: sizeValue / 2,
+                    r: radius,
+                    fill: "none",
+                    stroke: secondaryColor,
+                    strokeWidth: thicknessValue
+                  }
+                ),
+                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"
+                    }
+                  }
+                )
+              ]
+            }
+          ),
+          showValue && !indeterminate && /* @__PURE__ */ jsxs(
+            "span",
+            {
+              className: "absolute text-sm font-medium",
+              style: { color },
+              children: [
+                clampedValue,
+                "%"
+              ]
+            }
+          )
+        ]
       }
     );
   }
 );
-PulseWave.displayName = "PulseWave";
+ProgressCircle.displayName = "ProgressCircle";
 export {
-  PulseWave
+  ProgressCircle
 };
 //# sourceMappingURL=index22.js.map

package/dist/index22.js.map

@@ -1 +1 @@
-{"version":3,"file":"index22.js","sources":["../src/components/pulse/PulseWave.tsx"],"sourcesContent":["import { forwardRef } from 'react';\nimport { PulseWaveProps } from '../../types';\nimport { cn, normalizeSize, getAnimationDuration } from '../../utils';\n\n/**\n * PulseWave - Wave pattern loader\n *\n * A loader with bars that animate in a wave pattern.\n *\n * @example\n * ```tsx\n * <PulseWave size={40} color=\"#3b82f6\" />\n * <PulseWave size={32} barCount={7} speed=\"slow\" />\n * ```\n */\nexport const PulseWave = forwardRef<HTMLDivElement, PulseWaveProps>(\n  (\n    {\n      size = 40,\n      color = '#3b82f6',\n      barCount = 5,\n      speed = 'normal',\n      className,\n      style,\n      testId = 'pulse-wave',\n      visible = true,\n      ariaLabel = 'Loading...',\n      ...rest\n    },\n    ref\n  ) => {\n    if (!visible) return null;\n\n    const sizeValue = typeof size === 'number' ? size : parseInt(String(size), 10);\n    const barWidth = Math.floor(sizeValue / (barCount * 2.5));\n    const animationDuration = getAnimationDuration(speed);\n\n    return (\n      <div\n        ref={ref}\n        data-testid={testId}\n        className={cn('inline-flex items-end justify-center gap-1', className)}\n        style={{\n          height: normalizeSize(size),\n          ...style,\n        }}\n        role=\"status\"\n        aria-label={ariaLabel}\n        aria-busy=\"true\"\n        {...rest}\n      >\n        {Array.from({ length: barCount }).map((_, index) => {\n          const delay = (index / barCount) * 0.5;\n\n          return (\n            <div\n              key={index}\n              className=\"rounded-sm\"\n              style={{\n                width: `${barWidth}px`,\n                height: '100%',\n                backgroundColor: color,\n                animation: `pulse-wave ${animationDuration} ease-in-out infinite`,\n                animationDelay: `${delay}s`,\n                transformOrigin: 'bottom',\n              }}\n            />\n          );\n        })}\n      </div>\n    );\n  }\n);\n\nPulseWave.displayName = 'PulseWave';\n"],"names":[],"mappings":";;;;AAeO,MAAM,YAAY;AAAA,EACvB,CACE;AAAA,IACE,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,WAAW;AAAA,IACX,QAAQ;AAAA,IACR;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT,UAAU;AAAA,IACV,YAAY;AAAA,IACZ,GAAG;AAAA,EAAA,GAEL,QACG;AACH,QAAI,CAAC,QAAS,QAAO;AAErB,UAAM,YAAY,OAAO,SAAS,WAAW,OAAO,SAAS,OAAO,IAAI,GAAG,EAAE;AAC7E,UAAM,WAAW,KAAK,MAAM,aAAa,WAAW,IAAI;AACxD,UAAM,oBAAoB,qBAAqB,KAAK;AAEpD,WACE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,eAAa;AAAA,QACb,WAAW,GAAG,8CAA8C,SAAS;AAAA,QACrE,OAAO;AAAA,UACL,QAAQ,cAAc,IAAI;AAAA,UAC1B,GAAG;AAAA,QAAA;AAAA,QAEL,MAAK;AAAA,QACL,cAAY;AAAA,QACZ,aAAU;AAAA,QACT,GAAG;AAAA,QAEH,UAAA,MAAM,KAAK,EAAE,QAAQ,SAAA,CAAU,EAAE,IAAI,CAAC,GAAG,UAAU;AAClD,gBAAM,QAAS,QAAQ,WAAY;AAEnC,iBACE;AAAA,YAAC;AAAA,YAAA;AAAA,cAEC,WAAU;AAAA,cACV,OAAO;AAAA,gBACL,OAAO,GAAG,QAAQ;AAAA,gBAClB,QAAQ;AAAA,gBACR,iBAAiB;AAAA,gBACjB,WAAW,cAAc,iBAAiB;AAAA,gBAC1C,gBAAgB,GAAG,KAAK;AAAA,gBACxB,iBAAiB;AAAA,cAAA;AAAA,YACnB;AAAA,YATK;AAAA,UAAA;AAAA,QAYX,CAAC;AAAA,MAAA;AAAA,IAAA;AAAA,EAGP;AACF;AAEA,UAAU,cAAc;"}
+{"version":3,"file":"index22.js","sources":["../src/components/progress/ProgressCircle.tsx"],"sourcesContent":["import { forwardRef } from 'react';\nimport { ProgressCircleProps } from '../../types';\nimport { cn, normalizeSize, parseSizeToNumber, getAnimationDuration } from '../../utils';\n\n/**\n * ProgressCircle - SVG-based circular progress indicator\n *\n * A circular progress indicator that shows progress as a partial circle.\n *\n * @example\n * ```tsx\n * <ProgressCircle value={75} showValue />\n * <ProgressCircle value={50} size={80} thickness={6} />\n * <ProgressCircle indeterminate speed=\"fast\" />\n * <ProgressCircle value={50} buffer={75} />\n * ```\n */\nexport const ProgressCircle = forwardRef<HTMLDivElement, ProgressCircleProps>(\n  (\n    {\n      value = 0,\n      indeterminate = false,\n      showValue = false,\n      size = 60,\n      thickness = 4,\n      color = '#3b82f6',\n      secondaryColor = '#e0e0e0',\n      buffer,\n      speed = 'normal',\n      className,\n      style,\n      testId = 'progress-circle',\n      visible = true,\n      ariaLabel,\n      ...rest\n    },\n    ref\n  ) => {\n    if (!visible) return null;\n\n    const clampedValue = Math.min(100, Math.max(0, value));\n    const clampedBuffer = buffer !== undefined ? Math.min(100, Math.max(0, buffer)) : undefined;\n    const sizeValue = parseSizeToNumber(size, 60);\n    const thicknessValue = parseSizeToNumber(thickness, 4);\n    const radius = (sizeValue - thicknessValue * 2) / 2;\n    const circumference = 2 * Math.PI * radius;\n    const strokeDashoffset = circumference - (clampedValue / 100) * circumference;\n    const bufferDashoffset = clampedBuffer !== undefined ? circumference - (clampedBuffer / 100) * circumference : undefined;\n    const progressLabel = ariaLabel || `Loading ${clampedValue}%`;\n    const animationDuration = getAnimationDuration(speed);\n\n    return (\n      <div\n        ref={ref}\n        data-testid={testId}\n        className={cn('inline-flex items-center justify-center relative', className)}\n        style={{\n          width: normalizeSize(size),\n          height: normalizeSize(size),\n          ...style,\n        }}\n        role=\"progressbar\"\n        aria-label={progressLabel}\n        aria-valuenow={indeterminate ? undefined : clampedValue}\n        aria-valuemin={0}\n        aria-valuemax={100}\n        {...rest}\n      >\n        <svg\n          className={cn(indeterminate && 'animate-spinner-rotate')}\n          width={sizeValue}\n          height={sizeValue}\n          viewBox={`0 0 ${sizeValue} ${sizeValue}`}\n          style={indeterminate ? { animation: `spinner-rotate ${animationDuration} linear infinite` } : undefined}\n        >\n          {/* Background circle */}\n          <circle\n            cx={sizeValue / 2}\n            cy={sizeValue / 2}\n            r={radius}\n            fill=\"none\"\n            stroke={secondaryColor}\n            strokeWidth={thicknessValue}\n          />\n          {/* Buffer circle (behind progress) */}\n          {bufferDashoffset !== undefined && !indeterminate && (\n            <circle\n              cx={sizeValue / 2}\n              cy={sizeValue / 2}\n              r={radius}\n              fill=\"none\"\n              stroke={color}\n              strokeWidth={thicknessValue}\n              strokeLinecap=\"round\"\n              strokeDasharray={circumference}\n              strokeDashoffset={bufferDashoffset}\n              transform={`rotate(-90 ${sizeValue / 2} ${sizeValue / 2})`}\n              opacity={0.3}\n            />\n          )}\n          {/* Progress circle */}\n          <circle\n            cx={sizeValue / 2}\n            cy={sizeValue / 2}\n            r={radius}\n            fill=\"none\"\n            stroke={color}\n            strokeWidth={thicknessValue}\n            strokeLinecap=\"round\"\n            strokeDasharray={circumference}\n            strokeDashoffset={indeterminate ? circumference * 0.75 : strokeDashoffset}\n            transform={`rotate(-90 ${sizeValue / 2} ${sizeValue / 2})`}\n            style={{\n              transition: indeterminate ? 'none' : 'stroke-dashoffset 0.3s ease-in-out',\n            }}\n          />\n        </svg>\n        {showValue && !indeterminate && (\n          <span\n            className=\"absolute text-sm font-medium\"\n            style={{ color }}\n          >\n            {clampedValue}%\n          </span>\n        )}\n      </div>\n    );\n  }\n);\n\nProgressCircle.displayName = 'ProgressCircle';\n"],"names":[],"mappings":"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"}