premium-react-loaders 1.0.2 → 1.2.0

package/dist/index23.js

@@ -1,64 +1,142 @@
-import { jsx } from "react/jsx-runtime";
-import { forwardRef } from "react";
-import { normalizeSize, getAnimationDuration, parseSizeToNumber } from "./index4.js";
+import { jsxs, jsx } from "react/jsx-runtime";
+import { forwardRef, useMemo } from "react";
+import { useReducedMotion, getEffectiveDuration } from "./index31.js";
+import { normalizeSize, parseSizeToNumber } from "./index4.js";
 import { cn } from "./index3.js";
-const PulseBars = forwardRef(
+const ProgressRing = forwardRef(
   ({
-    size = 40,
+    value = 0,
+    indeterminate = false,
+    showValue = false,
+    size = "lg",
+    thickness = 4,
     color = "#3b82f6",
-    barCount = 4,
+    secondaryColor = "#e0e0e0",
+    gradient = false,
+    buffer,
     speed = "normal",
+    reverse = false,
+    respectMotionPreference = true,
     className,
     style,
-    testId = "pulse-bars",
+    testId = "progress-ring",
     visible = true,
-    ariaLabel = "Loading...",
+    ariaLabel,
     ...rest
   }, ref) => {
     if (!visible) return null;
-    const sizeValue = parseSizeToNumber(size, 40);
-    const barWidth = Math.floor(sizeValue / (barCount * 2));
-    const animationDuration = getAnimationDuration(speed);
-    return /* @__PURE__ */ jsx(
+    const prefersReducedMotion = useReducedMotion();
+    const effectiveDuration = getEffectiveDuration(speed, respectMotionPreference, prefersReducedMotion);
+    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}%`;
+    const gradientId = useMemo(() => `progress-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-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 delays = [0, 0.2, 0.4, 0.1, 0.3, 0.5];
-          const delay = delays[index % delays.length];
-          return /* @__PURE__ */ jsx(
-            "div",
+        children: [
+          /* @__PURE__ */ jsxs(
+            "svg",
             {
-              className: "rounded-sm",
-              style: {
-                width: `${barWidth}px`,
-                minHeight: "30%",
-                height: "100%",
-                backgroundColor: color,
-                animation: `pulse-wave ${animationDuration} ease-in-out infinite`,
-                animationDelay: `${delay}s`,
-                transformOrigin: "center"
-              }
-            },
-            index
-          );
-        })
+              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"
+                    }
+                  }
+                )
+              ]
+            }
+          ),
+          showValue && !indeterminate && /* @__PURE__ */ jsxs(
+            "span",
+            {
+              className: "absolute text-sm font-semibold",
+              style: { color },
+              children: [
+                clampedValue,
+                "%"
+              ]
+            }
+          )
+        ]
       }
     );
   }
 );
-PulseBars.displayName = "PulseBars";
+ProgressRing.displayName = "ProgressRing";
 export {
-  PulseBars
+  ProgressRing
 };
 //# sourceMappingURL=index23.js.map

package/dist/index23.js.map

@@ -1 +1 @@
-{"version":3,"file":"index23.js","sources":["../src/components/pulse/PulseBars.tsx"],"sourcesContent":["import { forwardRef } from 'react';\nimport { PulseBarsProps } from '../../types';\nimport { cn, normalizeSize, getAnimationDuration, parseSizeToNumber } from '../../utils';\n\n/**\n * PulseBars - Equalizer-style bars loader\n *\n * A loader with bars that pulse like an audio equalizer.\n *\n * @example\n * ```tsx\n * <PulseBars size={40} color=\"#3b82f6\" />\n * <PulseBars size={48} barCount={6} speed=\"fast\" />\n * ```\n */\nexport const PulseBars = forwardRef<HTMLDivElement, PulseBarsProps>(\n  (\n    {\n      size = 40,\n      color = '#3b82f6',\n      barCount = 4,\n      speed = 'normal',\n      className,\n      style,\n      testId = 'pulse-bars',\n      visible = true,\n      ariaLabel = 'Loading...',\n      ...rest\n    },\n    ref\n  ) => {\n    if (!visible) return null;\n\n    const sizeValue = parseSizeToNumber(size, 40);\n    const barWidth = Math.floor(sizeValue / (barCount * 2));\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-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          // Random-looking delays for equalizer effect\n          const delays = [0, 0.2, 0.4, 0.1, 0.3, 0.5];\n          const delay = delays[index % delays.length];\n\n          return (\n            <div\n              key={index}\n              className=\"rounded-sm\"\n              style={{\n                width: `${barWidth}px`,\n                minHeight: '30%',\n                height: '100%',\n                backgroundColor: color,\n                animation: `pulse-wave ${animationDuration} ease-in-out infinite`,\n                animationDelay: `${delay}s`,\n                transformOrigin: 'center',\n              }}\n            />\n          );\n        })}\n      </div>\n    );\n  }\n);\n\nPulseBars.displayName = 'PulseBars';\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,kBAAkB,MAAM,EAAE;AAC5C,UAAM,WAAW,KAAK,MAAM,aAAa,WAAW,EAAE;AACtD,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,SAAA,CAAU,EAAE,IAAI,CAAC,GAAG,UAAU;AAElD,gBAAM,SAAS,CAAC,GAAG,KAAK,KAAK,KAAK,KAAK,GAAG;AAC1C,gBAAM,QAAQ,OAAO,QAAQ,OAAO,MAAM;AAE1C,iBACE;AAAA,YAAC;AAAA,YAAA;AAAA,cAEC,WAAU;AAAA,cACV,OAAO;AAAA,gBACL,OAAO,GAAG,QAAQ;AAAA,gBAClB,WAAW;AAAA,gBACX,QAAQ;AAAA,gBACR,iBAAiB;AAAA,gBACjB,WAAW,cAAc,iBAAiB;AAAA,gBAC1C,gBAAgB,GAAG,KAAK;AAAA,gBACxB,iBAAiB;AAAA,cAAA;AAAA,YACnB;AAAA,YAVK;AAAA,UAAA;AAAA,QAaX,CAAC;AAAA,MAAA;AAAA,IAAA;AAAA,EAGP;AACF;AAEA,UAAU,cAAc;"}
+{"version":3,"file":"index23.js","sources":["../src/components/progress/ProgressRing.tsx"],"sourcesContent":["import { forwardRef, useMemo } from 'react';\nimport { ProgressRingProps } from '../../types';\nimport { cn, normalizeSize, parseSizeToNumber, useReducedMotion, getEffectiveDuration } from '../../utils';\n\n/**\n * ProgressRing - Ring-style progress with gradient option\n *\n * A circular progress ring with optional gradient colors.\n *\n * @example\n * ```tsx\n * <ProgressRing value={75} showValue />\n * <ProgressRing value={60} gradient secondaryColor=\"#8b5cf6\" />\n * <ProgressRing indeterminate speed=\"fast\" />\n * <ProgressRing value={50} buffer={75} />\n * ```\n */\nexport const ProgressRing = forwardRef<HTMLDivElement, ProgressRingProps>(\n  (\n    {\n      value = 0,\n      indeterminate = false,\n      showValue = false,\n      size = 'lg',\n      thickness = 4,\n      color = '#3b82f6',\n      secondaryColor = '#e0e0e0',\n      gradient = false,\n      buffer,\n      speed = 'normal',\n      reverse = false,\n      respectMotionPreference = true,\n      className,\n      style,\n      testId = 'progress-ring',\n      visible = true,\n      ariaLabel,\n      ...rest\n    },\n    ref\n  ) => {\n    if (!visible) return null;\n\n    const prefersReducedMotion = useReducedMotion();\n    const effectiveDuration = getEffectiveDuration(speed, respectMotionPreference, prefersReducedMotion);\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, 56);\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 gradientId = useMemo(() => `progress-gradient-${Math.random().toString(36).substr(2, 9)}`, []);\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 ? {\n            animation: `spinner-rotate ${effectiveDuration} linear infinite`,\n            animationDirection: reverse ? 'reverse' : 'normal',\n          } : undefined}\n        >\n          {gradient && (\n            <defs>\n              <linearGradient id={gradientId} x1=\"0%\" y1=\"0%\" x2=\"100%\" y2=\"100%\">\n                <stop offset=\"0%\" stopColor={color} />\n                <stop offset=\"100%\" stopColor={secondaryColor === '#e0e0e0' ? '#8b5cf6' : secondaryColor} />\n              </linearGradient>\n            </defs>\n          )}\n          {/* Background circle */}\n          <circle\n            cx={sizeValue / 2}\n            cy={sizeValue / 2}\n            r={radius}\n            fill=\"none\"\n            stroke={gradient ? '#e0e0e0' : 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={gradient ? `url(#${gradientId})` : 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={gradient ? `url(#${gradientId})` : 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-semibold\"\n            style={{ color }}\n          >\n            {clampedValue}%\n          </span>\n        )}\n      </div>\n    );\n  }\n);\n\nProgressRing.displayName = 'ProgressRing';\n"],"names":[],"mappings":"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"}

package/dist/index24.cjs

@@ -3,69 +3,129 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
 const react = require("react");
 const classNames = require("./index3.cjs");
-const LoaderOverlay = react.forwardRef(
+const ProgressSteps = react.forwardRef(
   ({
-    loading = false,
-    loader,
-    children,
-    position = "fixed",
-    backdropOpacity = 0.5,
-    backdropColor = "#000000",
-    blur = false,
+    steps,
+    currentStep,
+    labels,
+    showNumbers = true,
+    orientation = "horizontal",
+    connector = "line",
+    color = "#3b82f6",
+    completedColor,
+    activeColor,
+    inactiveColor = "#e0e0e0",
     className,
     style,
-    testId = "loader-overlay",
-    ariaLabel = "Loading content...",
-    zIndex = 9999,
+    testId = "progress-steps",
+    visible = true,
+    ariaLabel = "Progress steps",
     ...rest
   }, ref) => {
-    const backdropStyles = {
-      backgroundColor: backdropColor,
-      opacity: backdropOpacity,
-      backdropFilter: blur ? "blur(4px)" : void 0,
-      WebkitBackdropFilter: blur ? "blur(4px)" : void 0
+    if (!visible) 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";
     };
-    return /* @__PURE__ */ jsxRuntime.jsxs(
+    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__ */ jsxRuntime.jsx(
       "div",
       {
         ref,
         "data-testid": testId,
-        className: classNames.cn("relative", className),
+        className: classNames.cn(
+          "flex",
+          isHorizontal ? "flex-row items-center w-full" : "flex-col items-start",
+          className
+        ),
         style,
+        role: "progressbar",
+        "aria-label": ariaLabel,
+        "aria-valuenow": currentStep,
+        "aria-valuemin": 0,
+        "aria-valuemax": steps - 1,
         ...rest,
-        children: [
-          children,
-          loading && /* @__PURE__ */ jsxRuntime.jsxs(
-            "div",
-            {
-              className: classNames.cn(
-                "inset-0 flex items-center justify-center",
-                position === "fixed" ? "fixed" : "absolute"
-              ),
-              style: {
-                zIndex
-              },
-              role: "status",
-              "aria-label": ariaLabel,
-              "aria-busy": "true",
-              children: [
-                /* @__PURE__ */ jsxRuntime.jsx(
-                  "div",
-                  {
-                    className: "absolute inset-0",
-                    style: backdropStyles,
-                    "aria-hidden": "true"
-                  }
+        children: Array.from({ length: steps }).map((_, index) => {
+          const status = getStepStatus(index);
+          const stepColor = getStepColor(status);
+          const showConnector = index < steps - 1 && connector === "line";
+          return /* @__PURE__ */ jsxRuntime.jsxs(react.Fragment, { children: [
+            /* @__PURE__ */ jsxRuntime.jsxs(
+              "div",
+              {
+                className: classNames.cn(
+                  "flex items-center",
+                  isHorizontal ? "flex-col" : "flex-row gap-3"
                 ),
-                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative z-10", children: loader })
-              ]
-            }
-          )
-        ]
+                children: [
+                  /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("span", { children: index + 1 })
+                    }
+                  ),
+                  (labels == null ? void 0 : labels[index]) && /* @__PURE__ */ jsxRuntime.jsx(
+                    "span",
+                    {
+                      className: classNames.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]
+                    }
+                  )
+                ]
+              }
+            ),
+            showConnector && /* @__PURE__ */ jsxRuntime.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);
+        })
       }
     );
   }
 );
-LoaderOverlay.displayName = "LoaderOverlay";
-exports.LoaderOverlay = LoaderOverlay;
+ProgressSteps.displayName = "ProgressSteps";
+exports.ProgressSteps = ProgressSteps;
 //# sourceMappingURL=index24.cjs.map

package/dist/index24.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index24.cjs","sources":["../src/components/overlay/LoaderOverlay.tsx"],"sourcesContent":["import { forwardRef } from 'react';\nimport { LoaderOverlayProps } from '../../types';\nimport { cn } from '../../utils';\n\n/**\n * LoaderOverlay - Overlay wrapper for displaying loaders over content\n *\n * A flexible overlay component that displays a loader over content during loading states.\n * Supports both full-screen and container-relative positioning.\n *\n * @example\n * ```tsx\n * // Full screen overlay\n * <LoaderOverlay loading={isLoading} loader={<SpinnerCircle />}>\n *   <YourContent />\n * </LoaderOverlay>\n *\n * // Container overlay with custom backdrop\n * <LoaderOverlay\n *   loading={isLoading}\n *   loader={<SpinnerRing />}\n *   position=\"absolute\"\n *   backdropOpacity={0.7}\n *   blur\n * >\n *   <YourContent />\n * </LoaderOverlay>\n * ```\n */\nexport const LoaderOverlay = forwardRef<HTMLDivElement, LoaderOverlayProps>(\n  (\n    {\n      loading = false,\n      loader,\n      children,\n      position = 'fixed',\n      backdropOpacity = 0.5,\n      backdropColor = '#000000',\n      blur = false,\n      className,\n      style,\n      testId = 'loader-overlay',\n      ariaLabel = 'Loading content...',\n      zIndex = 9999,\n      ...rest\n    },\n    ref\n  ) => {\n    const backdropStyles = {\n      backgroundColor: backdropColor,\n      opacity: backdropOpacity,\n      backdropFilter: blur ? 'blur(4px)' : undefined,\n      WebkitBackdropFilter: blur ? 'blur(4px)' : undefined,\n    };\n\n    return (\n      <div\n        ref={ref}\n        data-testid={testId}\n        className={cn('relative', className)}\n        style={style}\n        {...rest}\n      >\n        {children}\n\n        {loading && (\n          <div\n            className={cn(\n              'inset-0 flex items-center justify-center',\n              position === 'fixed' ? 'fixed' : 'absolute'\n            )}\n            style={{\n              zIndex,\n            }}\n            role=\"status\"\n            aria-label={ariaLabel}\n            aria-busy=\"true\"\n          >\n            {/* Backdrop */}\n            <div\n              className=\"absolute inset-0\"\n              style={backdropStyles}\n              aria-hidden=\"true\"\n            />\n\n            {/* Loader */}\n            <div className=\"relative z-10\">{loader}</div>\n          </div>\n        )}\n      </div>\n    );\n  }\n);\n\nLoaderOverlay.displayName = 'LoaderOverlay';\n"],"names":["forwardRef","jsxs","cn","jsx"],"mappings":";;;;;AA6BO,MAAM,gBAAgBA,MAAAA;AAAAA,EAC3B,CACE;AAAA,IACE,UAAU;AAAA,IACV;AAAA,IACA;AAAA,IACA,WAAW;AAAA,IACX,kBAAkB;AAAA,IAClB,gBAAgB;AAAA,IAChB,OAAO;AAAA,IACP;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,SAAS;AAAA,IACT,GAAG;AAAA,EAAA,GAEL,QACG;AACH,UAAM,iBAAiB;AAAA,MACrB,iBAAiB;AAAA,MACjB,SAAS;AAAA,MACT,gBAAgB,OAAO,cAAc;AAAA,MACrC,sBAAsB,OAAO,cAAc;AAAA,IAAA;AAG7C,WACEC,2BAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,eAAa;AAAA,QACb,WAAWC,WAAAA,GAAG,YAAY,SAAS;AAAA,QACnC;AAAA,QACC,GAAG;AAAA,QAEH,UAAA;AAAA,UAAA;AAAA,UAEA,WACCD,2BAAAA;AAAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAWC,WAAAA;AAAAA,gBACT;AAAA,gBACA,aAAa,UAAU,UAAU;AAAA,cAAA;AAAA,cAEnC,OAAO;AAAA,gBACL;AAAA,cAAA;AAAA,cAEF,MAAK;AAAA,cACL,cAAY;AAAA,cACZ,aAAU;AAAA,cAGV,UAAA;AAAA,gBAAAC,2BAAAA;AAAAA,kBAAC;AAAA,kBAAA;AAAA,oBACC,WAAU;AAAA,oBACV,OAAO;AAAA,oBACP,eAAY;AAAA,kBAAA;AAAA,gBAAA;AAAA,gBAIdA,2BAAAA,IAAC,OAAA,EAAI,WAAU,iBAAiB,UAAA,OAAA,CAAO;AAAA,cAAA;AAAA,YAAA;AAAA,UAAA;AAAA,QACzC;AAAA,MAAA;AAAA,IAAA;AAAA,EAIR;AACF;AAEA,cAAc,cAAc;;"}
+{"version":3,"file":"index24.cjs","sources":["../src/components/progress/ProgressSteps.tsx"],"sourcesContent":["import { forwardRef, Fragment } from 'react';\nimport { ProgressStepsProps } from '../../types';\nimport { cn } from '../../utils';\n\n/**\n * ProgressSteps - Multi-step progress indicator\n *\n * A step-by-step progress indicator for wizards, forms, and workflows.\n *\n * @example\n * ```tsx\n * <ProgressSteps steps={4} currentStep={1} />\n * <ProgressSteps steps={5} currentStep={2} labels={['Info', 'Review', 'Payment', 'Confirm', 'Done']} />\n * <ProgressSteps steps={3} currentStep={1} orientation=\"vertical\" />\n * <ProgressSteps steps={4} currentStep={2} connector=\"none\" />\n * ```\n */\nexport const ProgressSteps = forwardRef<HTMLDivElement, ProgressStepsProps>(\n  (\n    {\n      steps,\n      currentStep,\n      labels,\n      showNumbers = true,\n      orientation = 'horizontal',\n      connector = 'line',\n      color = '#3b82f6',\n      completedColor,\n      activeColor,\n      inactiveColor = '#e0e0e0',\n      className,\n      style,\n      testId = 'progress-steps',\n      visible = true,\n      ariaLabel = 'Progress steps',\n      ...rest\n    },\n    ref\n  ) => {\n    if (!visible) return null;\n\n    const completed = completedColor || color;\n    const active = activeColor || color;\n\n    const getStepStatus = (index: number): 'completed' | 'active' | 'inactive' => {\n      if (index < currentStep) return 'completed';\n      if (index === currentStep) return 'active';\n      return 'inactive';\n    };\n\n    const getStepColor = (status: 'completed' | 'active' | 'inactive'): string => {\n      if (status === 'completed') return completed;\n      if (status === 'active') return active;\n      return inactiveColor;\n    };\n\n    const getConnectorColor = (index: number): string => {\n      return index < currentStep ? completed : inactiveColor;\n    };\n\n    const isHorizontal = orientation === 'horizontal';\n\n    return (\n      <div\n        ref={ref}\n        data-testid={testId}\n        className={cn(\n          'flex',\n          isHorizontal ? 'flex-row items-center w-full' : 'flex-col items-start',\n          className\n        )}\n        style={style}\n        role=\"progressbar\"\n        aria-label={ariaLabel}\n        aria-valuenow={currentStep}\n        aria-valuemin={0}\n        aria-valuemax={steps - 1}\n        {...rest}\n      >\n        {Array.from({ length: steps }).map((_, index) => {\n          const status = getStepStatus(index);\n          const stepColor = getStepColor(status);\n          const showConnector = index < steps - 1 && connector === 'line';\n\n          return (\n            <Fragment key={index}>\n              {/* Step */}\n              <div\n                className={cn(\n                  'flex items-center',\n                  isHorizontal ? 'flex-col' : 'flex-row gap-3'\n                )}\n              >\n                {/* Step Circle */}\n                <div\n                  className=\"rounded-full flex items-center justify-center font-medium text-sm transition-colors\"\n                  style={{\n                    width: '2rem',\n                    height: '2rem',\n                    backgroundColor: stepColor,\n                    color: '#ffffff',\n                  }}\n                >\n                  {showNumbers && <span>{index + 1}</span>}\n                </div>\n\n                {/* Step Label */}\n                {labels?.[index] && (\n                  <span\n                    className={cn(\n                      'text-xs mt-1 transition-colors',\n                      isHorizontal ? 'text-center' : 'text-left'\n                    )}\n                    style={{\n                      color: status === 'inactive' ? '#9ca3af' : '#374151',\n                      maxWidth: isHorizontal ? '80px' : 'none',\n                    }}\n                  >\n                    {labels[index]}\n                  </span>\n                )}\n              </div>\n\n              {/* Connector */}\n              {showConnector && (\n                <div\n                  className=\"transition-colors\"\n                  style={{\n                    backgroundColor: getConnectorColor(index),\n                    ...(isHorizontal\n                      ? {\n                          height: '2px',\n                          flex: 1,\n                          marginLeft: '4px',\n                          marginRight: '4px',\n                        }\n                      : {\n                          width: '2px',\n                          height: '32px',\n                          marginLeft: '15px',\n                          marginTop: labels?.[index] ? '4px' : '0',\n                          marginBottom: '4px',\n                        }),\n                  }}\n                />\n              )}\n            </Fragment>\n          );\n        })}\n      </div>\n    );\n  }\n);\n\nProgressSteps.displayName = 'ProgressSteps';\n"],"names":["forwardRef","jsx","cn","Fragment","jsxs"],"mappings":";;;;;AAiBO,MAAM,gBAAgBA,MAAAA;AAAAA,EAC3B,CACE;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA,cAAc;AAAA,IACd,cAAc;AAAA,IACd,YAAY;AAAA,IACZ,QAAQ;AAAA,IACR;AAAA,IACA;AAAA,IACA,gBAAgB;AAAA,IAChB;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,kBAAkB;AACpC,UAAM,SAAS,eAAe;AAE9B,UAAM,gBAAgB,CAAC,UAAuD;AAC5E,UAAI,QAAQ,YAAa,QAAO;AAChC,UAAI,UAAU,YAAa,QAAO;AAClC,aAAO;AAAA,IACT;AAEA,UAAM,eAAe,CAAC,WAAwD;AAC5E,UAAI,WAAW,YAAa,QAAO;AACnC,UAAI,WAAW,SAAU,QAAO;AAChC,aAAO;AAAA,IACT;AAEA,UAAM,oBAAoB,CAAC,UAA0B;AACnD,aAAO,QAAQ,cAAc,YAAY;AAAA,IAC3C;AAEA,UAAM,eAAe,gBAAgB;AAErC,WACEC,2BAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,eAAa;AAAA,QACb,WAAWC,WAAAA;AAAAA,UACT;AAAA,UACA,eAAe,iCAAiC;AAAA,UAChD;AAAA,QAAA;AAAA,QAEF;AAAA,QACA,MAAK;AAAA,QACL,cAAY;AAAA,QACZ,iBAAe;AAAA,QACf,iBAAe;AAAA,QACf,iBAAe,QAAQ;AAAA,QACtB,GAAG;AAAA,QAEH,UAAA,MAAM,KAAK,EAAE,QAAQ,MAAA,CAAO,EAAE,IAAI,CAAC,GAAG,UAAU;AAC/C,gBAAM,SAAS,cAAc,KAAK;AAClC,gBAAM,YAAY,aAAa,MAAM;AACrC,gBAAM,gBAAgB,QAAQ,QAAQ,KAAK,cAAc;AAEzD,iDACGC,gBAAA,EAEC,UAAA;AAAA,YAAAC,2BAAAA;AAAAA,cAAC;AAAA,cAAA;AAAA,gBACC,WAAWF,WAAAA;AAAAA,kBACT;AAAA,kBACA,eAAe,aAAa;AAAA,gBAAA;AAAA,gBAI9B,UAAA;AAAA,kBAAAD,2BAAAA;AAAAA,oBAAC;AAAA,oBAAA;AAAA,sBACC,WAAU;AAAA,sBACV,OAAO;AAAA,wBACL,OAAO;AAAA,wBACP,QAAQ;AAAA,wBACR,iBAAiB;AAAA,wBACjB,OAAO;AAAA,sBAAA;AAAA,sBAGR,UAAA,eAAeA,+BAAC,QAAA,EAAM,UAAA,QAAQ,EAAA,CAAE;AAAA,oBAAA;AAAA,kBAAA;AAAA,mBAIlC,iCAAS,WACRA,2BAAAA;AAAAA,oBAAC;AAAA,oBAAA;AAAA,sBACC,WAAWC,WAAAA;AAAAA,wBACT;AAAA,wBACA,eAAe,gBAAgB;AAAA,sBAAA;AAAA,sBAEjC,OAAO;AAAA,wBACL,OAAO,WAAW,aAAa,YAAY;AAAA,wBAC3C,UAAU,eAAe,SAAS;AAAA,sBAAA;AAAA,sBAGnC,iBAAO,KAAK;AAAA,oBAAA;AAAA,kBAAA;AAAA,gBACf;AAAA,cAAA;AAAA,YAAA;AAAA,YAKH,iBACCD,2BAAAA;AAAAA,cAAC;AAAA,cAAA;AAAA,gBACC,WAAU;AAAA,gBACV,OAAO;AAAA,kBACL,iBAAiB,kBAAkB,KAAK;AAAA,kBACxC,GAAI,eACA;AAAA,oBACE,QAAQ;AAAA,oBACR,MAAM;AAAA,oBACN,YAAY;AAAA,oBACZ,aAAa;AAAA,kBAAA,IAEf;AAAA,oBACE,OAAO;AAAA,oBACP,QAAQ;AAAA,oBACR,YAAY;AAAA,oBACZ,YAAW,iCAAS,UAAS,QAAQ;AAAA,oBACrC,cAAc;AAAA,kBAAA;AAAA,gBAChB;AAAA,cACN;AAAA,YAAA;AAAA,UACF,EAAA,GA3DW,KA6Df;AAAA,QAEJ,CAAC;AAAA,MAAA;AAAA,IAAA;AAAA,EAGP;AACF;AAEA,cAAc,cAAc;;"}

package/dist/index24.js

@@ -1,71 +1,131 @@
-import { jsxs, jsx } from "react/jsx-runtime";
-import { forwardRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { forwardRef, Fragment } from "react";
 import { cn } from "./index3.js";
-const LoaderOverlay = forwardRef(
+const ProgressSteps = forwardRef(
   ({
-    loading = false,
-    loader,
-    children,
-    position = "fixed",
-    backdropOpacity = 0.5,
-    backdropColor = "#000000",
-    blur = false,
+    steps,
+    currentStep,
+    labels,
+    showNumbers = true,
+    orientation = "horizontal",
+    connector = "line",
+    color = "#3b82f6",
+    completedColor,
+    activeColor,
+    inactiveColor = "#e0e0e0",
     className,
     style,
-    testId = "loader-overlay",
-    ariaLabel = "Loading content...",
-    zIndex = 9999,
+    testId = "progress-steps",
+    visible = true,
+    ariaLabel = "Progress steps",
     ...rest
   }, ref) => {
-    const backdropStyles = {
-      backgroundColor: backdropColor,
-      opacity: backdropOpacity,
-      backdropFilter: blur ? "blur(4px)" : void 0,
-      WebkitBackdropFilter: blur ? "blur(4px)" : void 0
+    if (!visible) 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";
     };
-    return /* @__PURE__ */ jsxs(
+    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(
       "div",
       {
         ref,
         "data-testid": testId,
-        className: cn("relative", className),
+        className: cn(
+          "flex",
+          isHorizontal ? "flex-row items-center w-full" : "flex-col items-start",
+          className
+        ),
         style,
+        role: "progressbar",
+        "aria-label": ariaLabel,
+        "aria-valuenow": currentStep,
+        "aria-valuemin": 0,
+        "aria-valuemax": steps - 1,
         ...rest,
-        children: [
-          children,
-          loading && /* @__PURE__ */ jsxs(
-            "div",
-            {
-              className: cn(
-                "inset-0 flex items-center justify-center",
-                position === "fixed" ? "fixed" : "absolute"
-              ),
-              style: {
-                zIndex
-              },
-              role: "status",
-              "aria-label": ariaLabel,
-              "aria-busy": "true",
-              children: [
-                /* @__PURE__ */ jsx(
-                  "div",
-                  {
-                    className: "absolute inset-0",
-                    style: backdropStyles,
-                    "aria-hidden": "true"
-                  }
+        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"
                 ),
-                /* @__PURE__ */ jsx("div", { className: "relative z-10", children: loader })
-              ]
-            }
-          )
-        ]
+                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]
+                    }
+                  )
+                ]
+              }
+            ),
+            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);
+        })
       }
     );
   }
 );
-LoaderOverlay.displayName = "LoaderOverlay";
+ProgressSteps.displayName = "ProgressSteps";
 export {
-  LoaderOverlay
+  ProgressSteps
 };
 //# sourceMappingURL=index24.js.map