virtual-ui-lib 1.0.72 → 1.0.74

package/dist/index.js

@@ -44,8 +44,10 @@ __export(index_exports, {
   OTPInput: () => OTPInput,
   PageLoader: () => PageLoader,
   PricingCard: () => PricingCard,
+  ProgressBar: () => ProgressBar,
   RatingStars: () => RatingStars,
-  Sidebar: () => Sidebar
+  Sidebar: () => Sidebar,
+  StatCard: () => StatCard
 });
 module.exports = __toCommonJS(index_exports);
 
@@ -3110,6 +3112,469 @@ var RatingStars = ({
     ));
   })), reviewCount > 0 && /* @__PURE__ */ import_react17.default.createElement("span", { style: { fontSize: "11px", color: "rgba(255,255,255,0.3)" } }, reviewCount.toLocaleString(), " reviews"))), !readOnly && rating === 0 && /* @__PURE__ */ import_react17.default.createElement("p", { style: { fontSize: "11px", color: "rgba(255,255,255,0.2)", margin: 0 } }, allowHalf ? "Hover to rate \u2022 Half stars supported" : "Click to rate"));
 };
+
+// src/components/StatCard/StatCard.jsx
+var import_react18 = __toESM(require("react"));
+var StatCard = ({
+  title = "Active Users",
+  value = "128K",
+  numericValue = 128e3,
+  change = "+12.4%",
+  isPositive = true,
+  icon = "\u{1F465}",
+  bg = "#ffffff",
+  accent = "#3b82f6",
+  radius = "16px",
+  showBadge = true,
+  showIcon = true,
+  barPercent = 68
+}) => {
+  const [count, setCount] = (0, import_react18.useState)(0);
+  const [barWidth, setBarWidth] = (0, import_react18.useState)(0);
+  const [visible, setVisible] = (0, import_react18.useState)(false);
+  const [entered, setEntered] = (0, import_react18.useState)(false);
+  const ref = (0, import_react18.useRef)(null);
+  (0, import_react18.useEffect)(() => {
+    const observer = new IntersectionObserver(
+      ([entry]) => {
+        if (entry.isIntersecting) {
+          setVisible(true);
+          observer.disconnect();
+        }
+      },
+      { threshold: 0.3 }
+    );
+    if (ref.current) observer.observe(ref.current);
+    return () => observer.disconnect();
+  }, []);
+  (0, import_react18.useEffect)(() => {
+    if (!visible) return;
+    setEntered(true);
+    const duration = 1400;
+    const start = performance.now();
+    const step = (now) => {
+      const p = Math.min((now - start) / duration, 1);
+      const eased = 1 - Math.pow(1 - p, 3);
+      setCount(Math.floor(eased * numericValue));
+      if (p < 1) requestAnimationFrame(step);
+    };
+    requestAnimationFrame(step);
+  }, [visible, numericValue]);
+  (0, import_react18.useEffect)(() => {
+    if (!visible) return;
+    const t = setTimeout(() => setBarWidth(barPercent), 200);
+    return () => clearTimeout(t);
+  }, [visible, barPercent]);
+  const formatCount = (n) => {
+    if (numericValue >= 1e6) return (n / 1e6).toFixed(1) + "M";
+    if (numericValue >= 1e3) return (n / 1e3).toFixed(1) + "K";
+    return n.toLocaleString();
+  };
+  const alpha = (hex, op) => {
+    const r = parseInt(hex.slice(1, 3), 16);
+    const g = parseInt(hex.slice(3, 5), 16);
+    const b = parseInt(hex.slice(5, 7), 16);
+    return `rgba(${r},${g},${b},${op})`;
+  };
+  const uid = accent.replace("#", "sc");
+  return /* @__PURE__ */ import_react18.default.createElement(import_react18.default.Fragment, null, /* @__PURE__ */ import_react18.default.createElement("style", null, `
+        @import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;600;700;800&display=swap');
+
+        .sc-${uid} {
+          font-family: 'Sora', sans-serif;
+          background: ${bg};
+          border-radius: ${radius};
+          padding: 24px;
+          display: inline-flex;
+          flex-direction: column;
+          gap: 14px;
+          border: 1px solid rgba(0,0,0,0.07);
+          box-shadow: 0 2px 16px rgba(0,0,0,0.06);
+          min-width: 200px;
+          position: relative;
+          overflow: hidden;
+          opacity: 0;
+          transform: translateY(24px);
+          transition: opacity 0.5s ease, transform 0.5s ease, box-shadow 0.25s ease;
+        }
+
+        .sc-${uid}.entered {
+          opacity: 1;
+          transform: translateY(0);
+        }
+
+        .sc-${uid}:hover {
+          transform: translateY(-5px) !important;
+          box-shadow: 0 16px 40px ${alpha(accent, 0.18)};
+        }
+
+        /* Shimmer sweep on mount */
+        .sc-${uid}::before {
+          content: '';
+          position: absolute;
+          inset: 0;
+          background: linear-gradient(105deg, transparent 40%, ${alpha(accent, 0.08)} 50%, transparent 60%);
+          transform: translateX(-100%);
+          transition: transform 0s;
+        }
+        .sc-${uid}.entered::before {
+          animation: sc-shimmer-${uid} 0.9s ease 0.3s forwards;
+        }
+        @keyframes sc-shimmer-${uid} {
+          to { transform: translateX(200%); }
+        }
+
+        /* Pulse ring on icon */
+        .sc-icon-${uid} {
+          font-size: 1.3rem;
+          background: ${alpha(accent, 0.1)};
+          width: 42px;
+          height: 42px;
+          border-radius: 10px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          position: relative;
+        }
+        .sc-icon-${uid}::after {
+          content: '';
+          position: absolute;
+          inset: -4px;
+          border-radius: 14px;
+          border: 2px solid ${alpha(accent, 0.25)};
+          animation: sc-pulse-${uid} 2s ease-in-out infinite;
+        }
+        @keyframes sc-pulse-${uid} {
+          0%, 100% { transform: scale(1); opacity: 0.6; }
+          50%       { transform: scale(1.12); opacity: 0; }
+        }
+
+        .sc-top-${uid} {
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+        }
+
+        .sc-badge-up-${uid} {
+          font-size: 0.72rem;
+          font-weight: 700;
+          color: #16a34a;
+          background: #dcfce7;
+          padding: 3px 10px;
+          border-radius: 999px;
+          letter-spacing: 0.02em;
+          animation: sc-badgepop-${uid} 0.4s cubic-bezier(.34,1.56,.64,1) 0.6s both;
+        }
+        .sc-badge-down-${uid} {
+          font-size: 0.72rem;
+          font-weight: 700;
+          color: #dc2626;
+          background: #fee2e2;
+          padding: 3px 10px;
+          border-radius: 999px;
+          letter-spacing: 0.02em;
+          animation: sc-badgepop-${uid} 0.4s cubic-bezier(.34,1.56,.64,1) 0.6s both;
+        }
+        @keyframes sc-badgepop-${uid} {
+          from { transform: scale(0.5); opacity: 0; }
+          to   { transform: scale(1);   opacity: 1; }
+        }
+
+        .sc-value-${uid} {
+          font-size: 2rem;
+          font-weight: 800;
+          color: #0f172a;
+          line-height: 1;
+          font-variant-numeric: tabular-nums;
+        }
+
+        .sc-label-${uid} {
+          font-size: 0.78rem;
+          font-weight: 600;
+          color: #94a3b8;
+          text-transform: uppercase;
+          letter-spacing: 0.07em;
+        }
+
+        .sc-track-${uid} {
+          height: 5px;
+          border-radius: 999px;
+          background: rgba(0,0,0,0.06);
+          overflow: hidden;
+        }
+        .sc-fill-${uid} {
+          height: 100%;
+          border-radius: 999px;
+          background: linear-gradient(90deg, ${alpha(accent, 0.5)}, ${accent});
+          width: 0%;
+          transition: width 1.2s cubic-bezier(0.22, 1, 0.36, 1) 0.4s;
+          box-shadow: 0 0 8px ${alpha(accent, 0.5)};
+        }
+      `), /* @__PURE__ */ import_react18.default.createElement(
+    "div",
+    {
+      ref,
+      className: `sc-${uid}${entered ? " entered" : ""}`
+    },
+    /* @__PURE__ */ import_react18.default.createElement("div", { className: `sc-top-${uid}` }, showIcon && /* @__PURE__ */ import_react18.default.createElement("div", { className: `sc-icon-${uid}` }, icon), showBadge && /* @__PURE__ */ import_react18.default.createElement("span", { className: isPositive ? `sc-badge-up-${uid}` : `sc-badge-down-${uid}` }, isPositive ? "\u25B2" : "\u25BC", " ", change)),
+    /* @__PURE__ */ import_react18.default.createElement("div", { className: `sc-value-${uid}` }, visible ? formatCount(count) : "0"),
+    /* @__PURE__ */ import_react18.default.createElement("div", { className: `sc-label-${uid}` }, title),
+    /* @__PURE__ */ import_react18.default.createElement("div", { className: `sc-track-${uid}` }, /* @__PURE__ */ import_react18.default.createElement(
+      "div",
+      {
+        className: `sc-fill-${uid}`,
+        style: { width: `${barWidth}%` }
+      }
+    ))
+  ));
+};
+
+// src/components/ProgressBar/ProgressBar.jsx
+var import_react19 = __toESM(require("react"));
+var ProgressBar = ({
+  label = "Progress",
+  percentage = 75,
+  accent = "#6366f1",
+  bg = "#ffffff",
+  height = 12,
+  showLabel = true,
+  showPercent = true,
+  type = "default",
+  // "default" | "striped" | "circular" | "gradient" | "steps"
+  steps = 5
+  // only for type="steps"
+}) => {
+  const [filled, setFilled] = (0, import_react19.useState)(0);
+  const [visible, setVisible] = (0, import_react19.useState)(false);
+  const ref = (0, import_react19.useRef)(null);
+  (0, import_react19.useEffect)(() => {
+    const obs = new IntersectionObserver(
+      ([e]) => {
+        if (e.isIntersecting) {
+          setVisible(true);
+          obs.disconnect();
+        }
+      },
+      { threshold: 0.3 }
+    );
+    if (ref.current) obs.observe(ref.current);
+    return () => obs.disconnect();
+  }, []);
+  (0, import_react19.useEffect)(() => {
+    if (!visible) return;
+    const duration = 1200;
+    const start = performance.now();
+    const target = Math.min(100, Math.max(0, percentage));
+    const tick = (now) => {
+      const p = Math.min((now - start) / duration, 1);
+      const eased = 1 - Math.pow(1 - p, 4);
+      setFilled(Math.round(eased * target));
+      if (p < 1) requestAnimationFrame(tick);
+    };
+    requestAnimationFrame(tick);
+  }, [visible, percentage]);
+  const alpha = (hex, op) => {
+    const r = parseInt(hex.slice(1, 3), 16);
+    const g = parseInt(hex.slice(3, 5), 16);
+    const b = parseInt(hex.slice(5, 7), 16);
+    return `rgba(${r},${g},${b},${op})`;
+  };
+  const uid = (accent + label + type).replace(/[^a-z0-9]/gi, "x");
+  const badgeColor = filled >= 80 ? "#16a34a" : filled >= 50 ? "#d97706" : "#dc2626";
+  const badgeBg = filled >= 80 ? "#dcfce7" : filled >= 50 ? "#fef3c7" : "#fee2e2";
+  const wrapStyle = {
+    fontFamily: "'Sora', sans-serif",
+    background: bg,
+    borderRadius: "14px",
+    padding: "20px 22px",
+    display: "flex",
+    flexDirection: "column",
+    gap: "10px",
+    border: "1px solid rgba(0,0,0,0.07)",
+    boxShadow: "0 2px 12px rgba(0,0,0,0.05)",
+    opacity: visible ? 1 : 0,
+    transform: visible ? "translateY(0)" : "translateY(16px)",
+    transition: "opacity 0.45s ease, transform 0.45s ease"
+  };
+  const rowStyle = { display: "flex", justifyContent: "space-between", alignItems: "center" };
+  const labelEl = showLabel && /* @__PURE__ */ import_react19.default.createElement("span", { style: { fontSize: "0.85rem", fontWeight: 600, color: "#334155" } }, label);
+  const badgeEl = showPercent && /* @__PURE__ */ import_react19.default.createElement("span", { style: {
+    fontSize: "0.72rem",
+    fontWeight: 700,
+    color: badgeColor,
+    background: badgeBg,
+    padding: "3px 10px",
+    borderRadius: "999px",
+    transition: "color 0.4s,background 0.4s",
+    fontVariantNumeric: "tabular-nums"
+  } }, filled, "%");
+  if (type === "default") return /* @__PURE__ */ import_react19.default.createElement(import_react19.default.Fragment, null, /* @__PURE__ */ import_react19.default.createElement("style", null, `
+        @import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;600;700&display=swap');
+        @keyframes pb-pulse-${uid} {
+          0%,100%{opacity:.9;transform:translateY(-50%) scale(1)}
+          50%{opacity:.4;transform:translateY(-50%) scale(1.5)}
+        }
+      `), /* @__PURE__ */ import_react19.default.createElement("div", { ref, style: wrapStyle }, /* @__PURE__ */ import_react19.default.createElement("div", { style: rowStyle }, labelEl, badgeEl), /* @__PURE__ */ import_react19.default.createElement("div", { style: { width: "100%", height, borderRadius: "999px", background: "#f1f5f9", overflow: "hidden", position: "relative" } }, /* @__PURE__ */ import_react19.default.createElement("div", { style: {
+    height: "100%",
+    width: `${filled}%`,
+    borderRadius: "999px",
+    background: `linear-gradient(90deg,${alpha(accent, 0.7)},${accent})`,
+    boxShadow: `0 0 10px ${alpha(accent, 0.35)}`,
+    position: "relative",
+    transition: "width 0.05s linear"
+  } }, /* @__PURE__ */ import_react19.default.createElement("div", { style: {
+    position: "absolute",
+    right: 0,
+    top: "50%",
+    width: height + 4,
+    height: height + 4,
+    borderRadius: "50%",
+    background: accent,
+    boxShadow: `0 0 8px 2px ${alpha(accent, 0.5)}`,
+    animation: `pb-pulse-${uid} 1.5s ease-in-out infinite`
+  } }))), /* @__PURE__ */ import_react19.default.createElement("div", { style: rowStyle }, /* @__PURE__ */ import_react19.default.createElement("span", { style: { fontSize: "0.7rem", color: "#94a3b8" } }, filled < 100 ? `${filled} of 100 completed` : "Completed \u2713"), /* @__PURE__ */ import_react19.default.createElement("span", { style: { fontSize: "0.7rem", color: "#94a3b8" } }, filled >= 80 ? "Almost there!" : filled >= 50 ? "Halfway done" : "Just started"))));
+  if (type === "striped") return /* @__PURE__ */ import_react19.default.createElement(import_react19.default.Fragment, null, /* @__PURE__ */ import_react19.default.createElement("style", null, `
+        @import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;600;700&display=swap');
+        @keyframes pb-stripe-${uid} { from{background-position:0 0} to{background-position:32px 0} }
+        @keyframes pb-pulse-${uid} {
+          0%,100%{opacity:.9;transform:translateY(-50%) scale(1)}
+          50%{opacity:.4;transform:translateY(-50%) scale(1.5)}
+        }
+      `), /* @__PURE__ */ import_react19.default.createElement("div", { ref, style: wrapStyle }, /* @__PURE__ */ import_react19.default.createElement("div", { style: rowStyle }, labelEl, badgeEl), /* @__PURE__ */ import_react19.default.createElement("div", { style: { width: "100%", height, borderRadius: "999px", background: "#f1f5f9", overflow: "hidden", position: "relative" } }, /* @__PURE__ */ import_react19.default.createElement("div", { style: {
+    height: "100%",
+    width: `${filled}%`,
+    borderRadius: "999px",
+    background: `linear-gradient(90deg,${alpha(accent, 0.7)},${accent})`,
+    boxShadow: `0 0 10px ${alpha(accent, 0.35)}`,
+    position: "relative",
+    transition: "width 0.05s linear"
+  } }, /* @__PURE__ */ import_react19.default.createElement("div", { style: {
+    position: "absolute",
+    inset: 0,
+    borderRadius: "999px",
+    background: "repeating-linear-gradient(45deg,transparent,transparent 8px,rgba(255,255,255,0.18) 8px,rgba(255,255,255,0.18) 16px)",
+    animation: `pb-stripe-${uid} 0.7s linear infinite`
+  } }), /* @__PURE__ */ import_react19.default.createElement("div", { style: {
+    position: "absolute",
+    right: 0,
+    top: "50%",
+    width: height + 4,
+    height: height + 4,
+    borderRadius: "50%",
+    background: accent,
+    boxShadow: `0 0 8px 2px ${alpha(accent, 0.5)}`,
+    animation: `pb-pulse-${uid} 1.5s ease-in-out infinite`
+  } }))), /* @__PURE__ */ import_react19.default.createElement("div", { style: rowStyle }, /* @__PURE__ */ import_react19.default.createElement("span", { style: { fontSize: "0.7rem", color: "#94a3b8" } }, filled < 100 ? `${filled} of 100 completed` : "Completed \u2713"), /* @__PURE__ */ import_react19.default.createElement("span", { style: { fontSize: "0.7rem", color: "#94a3b8" } }, filled >= 80 ? "Almost there!" : filled >= 50 ? "Halfway done" : "Just started"))));
+  if (type === "circular") {
+    const r = 54;
+    const cx = 70;
+    const cy = 70;
+    const circ = 2 * Math.PI * r;
+    const offset = circ - filled / 100 * circ;
+    return /* @__PURE__ */ import_react19.default.createElement(import_react19.default.Fragment, null, /* @__PURE__ */ import_react19.default.createElement("style", null, `
+          @import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;600;700;800&display=swap');
+          @keyframes pb-spin-${uid} { from{stroke-dashoffset:${circ}} to{stroke-dashoffset:${offset}} }
+        `), /* @__PURE__ */ import_react19.default.createElement("div", { ref, style: { ...wrapStyle, alignItems: "center", gap: 16 } }, /* @__PURE__ */ import_react19.default.createElement("svg", { width: "140", height: "140", viewBox: "0 0 140 140" }, /* @__PURE__ */ import_react19.default.createElement("circle", { cx, cy, r, fill: "none", stroke: "#f1f5f9", strokeWidth: "10" }), /* @__PURE__ */ import_react19.default.createElement(
+      "circle",
+      {
+        cx,
+        cy,
+        r,
+        fill: "none",
+        stroke: accent,
+        strokeWidth: "10",
+        strokeLinecap: "round",
+        strokeDasharray: circ,
+        strokeDashoffset: offset,
+        transform: `rotate(-90 ${cx} ${cy})`,
+        style: { transition: "stroke-dashoffset 0.05s linear", filter: `drop-shadow(0 0 6px ${alpha(accent, 0.5)})` }
+      }
+    ), /* @__PURE__ */ import_react19.default.createElement(
+      "text",
+      {
+        x: cx,
+        y: cy - 8,
+        textAnchor: "middle",
+        dominantBaseline: "middle",
+        style: { fontFamily: "'Sora',sans-serif", fontSize: "1.5rem", fontWeight: 800, fill: "#0f172a" }
+      },
+      filled,
+      "%"
+    ), /* @__PURE__ */ import_react19.default.createElement(
+      "text",
+      {
+        x: cx,
+        y: cy + 14,
+        textAnchor: "middle",
+        dominantBaseline: "middle",
+        style: { fontFamily: "'Sora',sans-serif", fontSize: "0.68rem", fontWeight: 600, fill: "#94a3b8", letterSpacing: "0.05em" }
+      },
+      filled >= 80 ? "GREAT" : filled >= 50 ? "GOOD" : "LOW"
+    )), showLabel && /* @__PURE__ */ import_react19.default.createElement("span", { style: { fontSize: "0.85rem", fontWeight: 600, color: "#334155" } }, label)));
+  }
+  if (type === "gradient") {
+    const colors = ["#ef4444", "#f97316", "#eab308", "#22c55e", "#6366f1"];
+    const gradStr = colors.map((c, i) => `${c} ${i * 25}%`).join(",");
+    return /* @__PURE__ */ import_react19.default.createElement(import_react19.default.Fragment, null, /* @__PURE__ */ import_react19.default.createElement("style", null, `
+          @import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;600;700&display=swap');
+          @keyframes pb-pulse-${uid} {
+            0%,100%{opacity:.9;transform:translateY(-50%) scale(1)}
+            50%{opacity:.4;transform:translateY(-50%) scale(1.5)}
+          }
+        `), /* @__PURE__ */ import_react19.default.createElement("div", { ref, style: wrapStyle }, /* @__PURE__ */ import_react19.default.createElement("div", { style: rowStyle }, labelEl, badgeEl), /* @__PURE__ */ import_react19.default.createElement("div", { style: { width: "100%", height, borderRadius: "999px", background: "#f1f5f9", overflow: "hidden", position: "relative" } }, /* @__PURE__ */ import_react19.default.createElement("div", { style: { position: "absolute", inset: 0, background: `linear-gradient(90deg,${gradStr})`, opacity: 0.15 } }), /* @__PURE__ */ import_react19.default.createElement("div", { style: {
+      height: "100%",
+      width: `${filled}%`,
+      borderRadius: "999px",
+      background: `linear-gradient(90deg,${gradStr})`,
+      transition: "width 0.05s linear",
+      position: "relative"
+    } }, /* @__PURE__ */ import_react19.default.createElement("div", { style: {
+      position: "absolute",
+      right: 0,
+      top: "50%",
+      width: height + 4,
+      height: height + 4,
+      borderRadius: "50%",
+      background: "#fff",
+      border: `2px solid ${accent}`,
+      animation: `pb-pulse-${uid} 1.5s ease-in-out infinite`
+    } }))), /* @__PURE__ */ import_react19.default.createElement("div", { style: rowStyle }, /* @__PURE__ */ import_react19.default.createElement("span", { style: { fontSize: "0.7rem", color: "#94a3b8" } }, filled < 100 ? `${filled} of 100` : "Completed \u2713"), /* @__PURE__ */ import_react19.default.createElement("span", { style: { fontSize: "0.7rem", color: "#94a3b8" } }, filled >= 80 ? "Almost there!" : filled >= 50 ? "Halfway done" : "Just started"))));
+  }
+  if (type === "steps") {
+    const completedSteps = Math.round(filled / 100 * steps);
+    return /* @__PURE__ */ import_react19.default.createElement(import_react19.default.Fragment, null, /* @__PURE__ */ import_react19.default.createElement("style", null, `
+          @import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;600;700&display=swap');
+          @keyframes pb-popin-${uid} {
+            from{transform:scale(0.5);opacity:0}
+            to{transform:scale(1);opacity:1}
+          }
+        `), /* @__PURE__ */ import_react19.default.createElement("div", { ref, style: wrapStyle }, /* @__PURE__ */ import_react19.default.createElement("div", { style: rowStyle }, labelEl, badgeEl), /* @__PURE__ */ import_react19.default.createElement("div", { style: { display: "flex", alignItems: "center", gap: 0 } }, Array.from({ length: steps }, (_, i) => {
+      const done = i < completedSteps;
+      const active = i === completedSteps - 1;
+      return /* @__PURE__ */ import_react19.default.createElement(import_react19.default.Fragment, { key: i }, /* @__PURE__ */ import_react19.default.createElement("div", { style: {
+        width: 32,
+        height: 32,
+        borderRadius: "50%",
+        background: done ? accent : "#f1f5f9",
+        border: active ? `2px solid ${accent}` : done ? "none" : "2px solid #e2e8f0",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        flexShrink: 0,
+        boxShadow: active ? `0 0 12px ${alpha(accent, 0.4)}` : "none",
+        transition: "background 0.3s,box-shadow 0.3s",
+        animation: done ? `pb-popin-${uid} 0.3s ease ${i * 0.08}s both` : "none"
+      } }, done ? /* @__PURE__ */ import_react19.default.createElement("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "none" }, /* @__PURE__ */ import_react19.default.createElement("path", { d: "M2.5 7l3.5 3.5 5.5-6", stroke: "#fff", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" })) : /* @__PURE__ */ import_react19.default.createElement("span", { style: { fontSize: "0.7rem", fontWeight: 700, color: "#cbd5e1" } }, i + 1)), i < steps - 1 && /* @__PURE__ */ import_react19.default.createElement("div", { style: {
+        flex: 1,
+        height: 3,
+        borderRadius: "999px",
+        background: i < completedSteps - 1 ? accent : "#f1f5f9",
+        transition: "background 0.3s"
+      } }));
+    })), /* @__PURE__ */ import_react19.default.createElement("div", { style: rowStyle }, /* @__PURE__ */ import_react19.default.createElement("span", { style: { fontSize: "0.7rem", color: "#94a3b8" } }, "Step ", completedSteps, " of ", steps), /* @__PURE__ */ import_react19.default.createElement("span", { style: { fontSize: "0.7rem", color: "#94a3b8" } }, filled >= 80 ? "Almost there!" : filled >= 50 ? "Halfway done" : "Just started"))));
+  }
+  return null;
+};
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   AvatarCard,
@@ -3127,6 +3592,8 @@ var RatingStars = ({
   OTPInput,
   PageLoader,
   PricingCard,
+  ProgressBar,
   RatingStars,
-  Sidebar
+  Sidebar,
+  StatCard
 });