@idds/react 1.4.17 → 1.4.18

package/dist/index.es.js

@@ -1652,13 +1652,6 @@ function ButtonGroup({
     );
   }) });
 }
-const VARIANT_MAP = {
-  primary: "var(--ina-primary-500)",
-  secondary: "var(--ina-secondary-500)",
-  success: "var(--ina-success-500)",
-  warning: "var(--ina-warning-500)",
-  error: "var(--ina-error-500)"
-};
 function CircleProgressBar({
   progress = 0,
   diameter = 20,
@@ -1668,62 +1661,56 @@ function CircleProgressBar({
   className
 }) {
   const normalizedProgress = Math.min(100, Math.max(0, progress));
-  const isHex = variant.startsWith("#");
-  const strokeColor = isHex ? variant : VARIANT_MAP[variant] || VARIANT_MAP.primary;
+  const isCustomColor = variant.startsWith("#");
   const center = diameter / 2;
   const radius = (diameter - strokeWidth) / 2;
   const circumference = 2 * Math.PI * radius;
   const strokeDashoffset = circumference - normalizedProgress / 100 * circumference;
   const containerClasses = clsx(
     "ina-circle-progress-bar",
-    "inline-flex items-center justify-center",
+    !isCustomColor && `ina-circle-progress-bar--${variant}`,
     className
   );
-  return /* @__PURE__ */ jsx(
-    "div",
+  const style = {
+    "--ina-circle-progress-size": `${diameter}px`,
+    ...trackColor && { "--ina-circle-progress-track-color": trackColor },
+    ...isCustomColor && { "--ina-circle-progress-color": variant }
+  };
+  return /* @__PURE__ */ jsx("div", { className: containerClasses, style, children: /* @__PURE__ */ jsxs(
+    "svg",
     {
-      className: containerClasses,
-      style: { width: diameter, height: diameter },
-      children: /* @__PURE__ */ jsxs(
-        "svg",
-        {
-          width: diameter,
-          height: diameter,
-          viewBox: `0 0 ${diameter} ${diameter}`,
-          fill: "none",
-          xmlns: "http://www.w3.org/2000/svg",
-          style: { transform: "rotate(-90deg)" },
-          children: [
-            /* @__PURE__ */ jsx(
-              "circle",
-              {
-                cx: center,
-                cy: center,
-                r: radius,
-                stroke: trackColor,
-                strokeWidth,
-                fill: "none"
-              }
-            ),
-            /* @__PURE__ */ jsx(
-              "circle",
-              {
-                cx: center,
-                cy: center,
-                r: radius,
-                stroke: strokeColor,
-                strokeWidth,
-                fill: "none",
-                strokeLinecap: "round",
-                strokeDasharray: circumference,
-                strokeDashoffset
-              }
-            )
-          ]
-        }
-      )
+      className: "ina-circle-progress-bar__svg",
+      width: "100%",
+      height: "100%",
+      viewBox: `0 0 ${diameter} ${diameter}`,
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      children: [
+        /* @__PURE__ */ jsx(
+          "circle",
+          {
+            className: "ina-circle-progress-bar__track",
+            cx: center,
+            cy: center,
+            r: radius,
+            strokeWidth
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "circle",
+          {
+            className: "ina-circle-progress-bar__progress",
+            cx: center,
+            cy: center,
+            r: radius,
+            strokeWidth,
+            strokeDasharray: circumference,
+            strokeDashoffset
+          }
+        )
+      ]
     }
-  );
+  ) });
 }
 function Checkbox({
   id,