@clyrex-digital/clyrex-controls-dev 0.8.1-dev.20261007072241 → 0.8.1-dev.20261010122158

package/dist/{Slider-UNNVADVP.mjs → Slider-BH5S4XRN.mjs}

@@ -111,36 +111,42 @@ var Slider = ({
   const effectiveSlidesToShow = 100 / slideWidthPercentage;
   const maxSlide = Math.max(0, Math.ceil(totalSlides - effectiveSlidesToShow));
   const step = scrollByColumns ? Math.max(1, Math.floor(effectiveSlidesToShow)) : 1;
+  const slidePositions = Array.from(
+    { length: Math.ceil(maxSlide / step) + 1 },
+    (_, index) => Math.min(index * step, maxSlide)
+  );
+  const currentStepIndex = slidePositions.reduce(
+    (closestIndex, position, index) => Math.abs(position - currentSlide) < Math.abs(slidePositions[closestIndex] - currentSlide) ? index : closestIndex,
+    0
+  );
   const nextSlide = () => {
-    if (currentSlide >= maxSlide) {
+    if (currentStepIndex >= slidePositions.length - 1) {
       if (infinite_scroll) {
         setTransition(true);
         setCurrentSlide(0);
       }
     } else {
       setTransition(true);
-      const nextIndex = currentSlide + step;
-      setCurrentSlide(nextIndex > maxSlide ? maxSlide : nextIndex);
+      setCurrentSlide(slidePositions[currentStepIndex + 1]);
     }
   };
   const prevSlide = () => {
-    if (currentSlide <= 0) {
+    if (currentStepIndex <= 0) {
       if (infinite_scroll) {
         setTransition(true);
-        setCurrentSlide(maxSlide);
+        setCurrentSlide(slidePositions[slidePositions.length - 1]);
       }
     } else {
       setTransition(true);
-      const prevIndex = currentSlide - step;
-      setCurrentSlide(prevIndex < 0 ? 0 : prevIndex);
+      setCurrentSlide(slidePositions[currentStepIndex - 1]);
     }
   };
-  const goToSlide = (index) => {
+  const goToStep = (index) => {
     setTransition(true);
-    setCurrentSlide(Math.min(Math.max(0, index), maxSlide));
+    setCurrentSlide(slidePositions[index]);
   };
   const handlePillClick = (index) => {
-    goToSlide(index);
+    goToStep(index);
     if (autoplay) {
       setIsPlaying(true);
     }
@@ -173,20 +179,19 @@ var Slider = ({
     );
   });
   return /* @__PURE__ */ jsxs("div", { className: "w-full", children: [
-    show_dots && progressPosition === "top" && /* @__PURE__ */ jsx("div", { className: "flex justify-center space-x-1.5 mb-4", children: Array.from({ length: totalSlides }).map((_, index) => /* @__PURE__ */ jsx(
+    show_dots && progressPosition === "top" && /* @__PURE__ */ jsx("div", { className: "flex justify-center space-x-1.5 mb-4", children: slidePositions.map((_, index) => /* @__PURE__ */ jsx(
       ProgressPill,
       {
-        active: index === currentSlide,
+        active: index === currentStepIndex,
         duration: autoplay_speed,
         index,
         onClick: () => handlePillClick(index),
-        isPlaying: isPlaying && index === currentSlide && autoplay,
+        isPlaying: isPlaying && index === currentStepIndex && autoplay,
         style: pillStyle,
         activeClassName: dotActiveClassName,
         inactiveClassName: dotInactiveClassName,
-        currentSlide,
-        totalSlides,
-        customProgress: index === currentSlide ? videoProgress : null
+        currentStep: currentStepIndex,
+        customProgress: index === currentStepIndex ? videoProgress : null
       },
       index
     )) }),
@@ -234,20 +239,19 @@ var Slider = ({
         ]
       }
     ),
-    show_dots && progressPosition !== "top" && /* @__PURE__ */ jsx("div", { className: "flex justify-center space-x-1.5 mt-5", children: Array.from({ length: totalSlides }).map((_, index) => /* @__PURE__ */ jsx(
+    show_dots && progressPosition !== "top" && /* @__PURE__ */ jsx("div", { className: "flex justify-center space-x-1.5 mt-5", children: slidePositions.map((_, index) => /* @__PURE__ */ jsx(
       ProgressPill,
       {
-        active: index === currentSlide,
+        active: index === currentStepIndex,
         duration: autoplay_speed,
         index,
         onClick: () => handlePillClick(index),
-        isPlaying: isPlaying && index === currentSlide && autoplay,
+        isPlaying: isPlaying && index === currentStepIndex && autoplay,
         style: pillStyle,
         activeClassName: dotActiveClassName,
         inactiveClassName: dotInactiveClassName,
-        currentSlide,
-        totalSlides,
-        customProgress: index === currentSlide ? videoProgress : null
+        currentStep: currentStepIndex,
+        customProgress: index === currentStepIndex ? videoProgress : null
       },
       index
     )) })
@@ -282,8 +286,7 @@ var ProgressPill = ({
   style = "modern",
   activeClassName = "",
   inactiveClassName = "",
-  currentSlide,
-  totalSlides,
+  currentStep,
   customProgress = null
 }) => {
   const [progress, setProgress] = useState(0);
@@ -312,9 +315,7 @@ var ProgressPill = ({
     }, 50);
     return () => clearInterval(interval);
   }, [active, isPlaying, duration, index, customProgress]);
-  const isFilled = index < currentSlide;
-  const isActive = index === currentSlide;
-  const shouldShowProgress = isActive || style === "cumulative" && isFilled;
+  const isActive = index === currentStep;
   const baseClasses = "cursor-pointer transition-all duration-300 ease-out";
   const getStyleClasses = () => {
     switch (style) {
@@ -327,7 +328,7 @@ var ProgressPill = ({
       case "cumulative":
         return `
           w-4 h-1 rounded-full overflow-hidden relative
-          ${isFilled ? activeClassName || "bg-white" : inactiveClassName || "bg-white/30"}
+          ${isActive ? activeClassName || "bg-white" : inactiveClassName || "bg-white/30"}
         `;
       case "modern":
         return `
@@ -345,41 +346,26 @@ var ProgressPill = ({
     }
   };
   const renderProgressBar = () => {
-    if (style === "modern" && isActive || style === "cumulative" && shouldShowProgress) {
-      const displayProgress = style === "cumulative" && isFilled ? 100 : customProgress !== null && customProgress !== void 0 ? customProgress : progress;
+    if (style === "modern" && isActive) {
+      const displayProgress = customProgress ?? progress;
       return /* @__PURE__ */ jsx(
         "div",
         {
-          className: `absolute top-0 left-0 h-full rounded-full ${style === "cumulative" && isFilled ? activeClassName || "bg-white" : activeClassName || "bg-white"} transition-all duration-50 ease-linear`,
+          className: `absolute top-0 left-0 h-full rounded-full ${activeClassName || "bg-white"} transition-all duration-50 ease-linear`,
           style: { width: `${displayProgress}%` }
         }
       );
     }
     return null;
   };
-  const renderCumulativeFill = () => {
-    if (style === "cumulative" && isFilled && !isActive) {
-      return /* @__PURE__ */ jsx(
-        "div",
-        {
-          className: `absolute top-0 left-0 h-full rounded-full ${activeClassName || "bg-white"} transition-all duration-300`,
-          style: { width: "100%" }
-        }
-      );
-    }
-    return null;
-  };
-  return /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsx(
     "button",
     {
       className: `${baseClasses} ${getStyleClasses()}`,
       onClick,
-      "aria-label": `Go to slide ${index + 1}`,
+      "aria-label": `Go to step ${index + 1}`,
       "aria-current": isActive ? "true" : "false",
-      children: [
-        renderProgressBar(),
-        renderCumulativeFill()
-      ]
+      children: renderProgressBar()
     }
   );
 };

package/dist/{Slider-42T6THEQ.mjs → Slider-XDYPGJYI.mjs}

@@ -113,36 +113,42 @@ var Slider = ({
   const effectiveSlidesToShow = 100 / slideWidthPercentage;
   const maxSlide = Math.max(0, Math.ceil(totalSlides - effectiveSlidesToShow));
   const step = scrollByColumns ? Math.max(1, Math.floor(effectiveSlidesToShow)) : 1;
+  const slidePositions = Array.from(
+    { length: Math.ceil(maxSlide / step) + 1 },
+    (_, index) => Math.min(index * step, maxSlide)
+  );
+  const currentStepIndex = slidePositions.reduce(
+    (closestIndex, position, index) => Math.abs(position - currentSlide) < Math.abs(slidePositions[closestIndex] - currentSlide) ? index : closestIndex,
+    0
+  );
   const nextSlide = () => {
-    if (currentSlide >= maxSlide) {
+    if (currentStepIndex >= slidePositions.length - 1) {
       if (infinite_scroll) {
         setTransition(true);
         setCurrentSlide(0);
       }
     } else {
       setTransition(true);
-      const nextIndex = currentSlide + step;
-      setCurrentSlide(nextIndex > maxSlide ? maxSlide : nextIndex);
+      setCurrentSlide(slidePositions[currentStepIndex + 1]);
     }
   };
   const prevSlide = () => {
-    if (currentSlide <= 0) {
+    if (currentStepIndex <= 0) {
       if (infinite_scroll) {
         setTransition(true);
-        setCurrentSlide(maxSlide);
+        setCurrentSlide(slidePositions[slidePositions.length - 1]);
       }
     } else {
       setTransition(true);
-      const prevIndex = currentSlide - step;
-      setCurrentSlide(prevIndex < 0 ? 0 : prevIndex);
+      setCurrentSlide(slidePositions[currentStepIndex - 1]);
     }
   };
-  const goToSlide = (index) => {
+  const goToStep = (index) => {
     setTransition(true);
-    setCurrentSlide(Math.min(Math.max(0, index), maxSlide));
+    setCurrentSlide(slidePositions[index]);
   };
   const handlePillClick = (index) => {
-    goToSlide(index);
+    goToStep(index);
     if (autoplay) {
       setIsPlaying(true);
     }
@@ -175,20 +181,19 @@ var Slider = ({
     );
   });
   return /* @__PURE__ */ jsxs("div", { className: "w-full", children: [
-    show_dots && progressPosition === "top" && /* @__PURE__ */ jsx("div", { className: "flex justify-center space-x-1.5 mb-4", children: Array.from({ length: totalSlides }).map((_, index) => /* @__PURE__ */ jsx(
+    show_dots && progressPosition === "top" && /* @__PURE__ */ jsx("div", { className: "flex justify-center space-x-1.5 mb-4", children: slidePositions.map((_, index) => /* @__PURE__ */ jsx(
       ProgressPill,
       {
-        active: index === currentSlide,
+        active: index === currentStepIndex,
         duration: autoplay_speed,
         index,
         onClick: () => handlePillClick(index),
-        isPlaying: isPlaying && index === currentSlide && autoplay,
+        isPlaying: isPlaying && index === currentStepIndex && autoplay,
         style: pillStyle,
         activeClassName: dotActiveClassName,
         inactiveClassName: dotInactiveClassName,
-        currentSlide,
-        totalSlides,
-        customProgress: index === currentSlide ? videoProgress : null
+        currentStep: currentStepIndex,
+        customProgress: index === currentStepIndex ? videoProgress : null
       },
       index
     )) }),
@@ -236,20 +241,19 @@ var Slider = ({
         ]
       }
     ),
-    show_dots && progressPosition !== "top" && /* @__PURE__ */ jsx("div", { className: "flex justify-center space-x-1.5 mt-5", children: Array.from({ length: totalSlides }).map((_, index) => /* @__PURE__ */ jsx(
+    show_dots && progressPosition !== "top" && /* @__PURE__ */ jsx("div", { className: "flex justify-center space-x-1.5 mt-5", children: slidePositions.map((_, index) => /* @__PURE__ */ jsx(
       ProgressPill,
       {
-        active: index === currentSlide,
+        active: index === currentStepIndex,
         duration: autoplay_speed,
         index,
         onClick: () => handlePillClick(index),
-        isPlaying: isPlaying && index === currentSlide && autoplay,
+        isPlaying: isPlaying && index === currentStepIndex && autoplay,
         style: pillStyle,
         activeClassName: dotActiveClassName,
         inactiveClassName: dotInactiveClassName,
-        currentSlide,
-        totalSlides,
-        customProgress: index === currentSlide ? videoProgress : null
+        currentStep: currentStepIndex,
+        customProgress: index === currentStepIndex ? videoProgress : null
       },
       index
     )) })
@@ -284,8 +288,7 @@ var ProgressPill = ({
   style = "modern",
   activeClassName = "",
   inactiveClassName = "",
-  currentSlide,
-  totalSlides,
+  currentStep,
   customProgress = null
 }) => {
   const [progress, setProgress] = useState(0);
@@ -314,9 +317,7 @@ var ProgressPill = ({
     }, 50);
     return () => clearInterval(interval);
   }, [active, isPlaying, duration, index, customProgress]);
-  const isFilled = index < currentSlide;
-  const isActive = index === currentSlide;
-  const shouldShowProgress = isActive || style === "cumulative" && isFilled;
+  const isActive = index === currentStep;
   const baseClasses = "cursor-pointer transition-all duration-300 ease-out";
   const getStyleClasses = () => {
     switch (style) {
@@ -329,7 +330,7 @@ var ProgressPill = ({
       case "cumulative":
         return `
           w-4 h-1 rounded-full overflow-hidden relative
-          ${isFilled ? activeClassName || "bg-white" : inactiveClassName || "bg-white/30"}
+          ${isActive ? activeClassName || "bg-white" : inactiveClassName || "bg-white/30"}
         `;
       case "modern":
         return `
@@ -347,41 +348,26 @@ var ProgressPill = ({
     }
   };
   const renderProgressBar = () => {
-    if (style === "modern" && isActive || style === "cumulative" && shouldShowProgress) {
-      const displayProgress = style === "cumulative" && isFilled ? 100 : customProgress !== null && customProgress !== void 0 ? customProgress : progress;
+    if (style === "modern" && isActive) {
+      const displayProgress = customProgress ?? progress;
       return /* @__PURE__ */ jsx(
         "div",
         {
-          className: `absolute top-0 left-0 h-full rounded-full ${style === "cumulative" && isFilled ? activeClassName || "bg-white" : activeClassName || "bg-white"} transition-all duration-50 ease-linear`,
+          className: `absolute top-0 left-0 h-full rounded-full ${activeClassName || "bg-white"} transition-all duration-50 ease-linear`,
           style: { width: `${displayProgress}%` }
         }
       );
     }
     return null;
   };
-  const renderCumulativeFill = () => {
-    if (style === "cumulative" && isFilled && !isActive) {
-      return /* @__PURE__ */ jsx(
-        "div",
-        {
-          className: `absolute top-0 left-0 h-full rounded-full ${activeClassName || "bg-white"} transition-all duration-300`,
-          style: { width: "100%" }
-        }
-      );
-    }
-    return null;
-  };
-  return /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsx(
     "button",
     {
       className: `${baseClasses} ${getStyleClasses()}`,
       onClick,
-      "aria-label": `Go to slide ${index + 1}`,
+      "aria-label": `Go to step ${index + 1}`,
       "aria-current": isActive ? "true" : "false",
-      children: [
-        renderProgressBar(),
-        renderCumulativeFill()
-      ]
+      children: renderProgressBar()
     }
   );
 };

package/dist/index.js

@@ -7127,36 +7127,42 @@ var init_Slider = __esm({
       const effectiveSlidesToShow = 100 / slideWidthPercentage;
       const maxSlide = Math.max(0, Math.ceil(totalSlides - effectiveSlidesToShow));
       const step = scrollByColumns ? Math.max(1, Math.floor(effectiveSlidesToShow)) : 1;
+      const slidePositions = Array.from(
+        { length: Math.ceil(maxSlide / step) + 1 },
+        (_, index) => Math.min(index * step, maxSlide)
+      );
+      const currentStepIndex = slidePositions.reduce(
+        (closestIndex, position, index) => Math.abs(position - currentSlide) < Math.abs(slidePositions[closestIndex] - currentSlide) ? index : closestIndex,
+        0
+      );
       const nextSlide = () => {
-        if (currentSlide >= maxSlide) {
+        if (currentStepIndex >= slidePositions.length - 1) {
           if (infinite_scroll) {
             setTransition(true);
             setCurrentSlide(0);
           }
         } else {
           setTransition(true);
-          const nextIndex = currentSlide + step;
-          setCurrentSlide(nextIndex > maxSlide ? maxSlide : nextIndex);
+          setCurrentSlide(slidePositions[currentStepIndex + 1]);
         }
       };
       const prevSlide = () => {
-        if (currentSlide <= 0) {
+        if (currentStepIndex <= 0) {
           if (infinite_scroll) {
             setTransition(true);
-            setCurrentSlide(maxSlide);
+            setCurrentSlide(slidePositions[slidePositions.length - 1]);
           }
         } else {
           setTransition(true);
-          const prevIndex = currentSlide - step;
-          setCurrentSlide(prevIndex < 0 ? 0 : prevIndex);
+          setCurrentSlide(slidePositions[currentStepIndex - 1]);
         }
       };
-      const goToSlide = (index) => {
+      const goToStep = (index) => {
         setTransition(true);
-        setCurrentSlide(Math.min(Math.max(0, index), maxSlide));
+        setCurrentSlide(slidePositions[index]);
       };
       const handlePillClick = (index) => {
-        goToSlide(index);
+        goToStep(index);
         if (autoplay) {
           setIsPlaying(true);
         }
@@ -7189,20 +7195,19 @@ var init_Slider = __esm({
         );
       });
       return /* @__PURE__ */ (0, import_jsx_runtime89.jsxs)("div", { className: "w-full", children: [
-        show_dots && progressPosition === "top" && /* @__PURE__ */ (0, import_jsx_runtime89.jsx)("div", { className: "flex justify-center space-x-1.5 mb-4", children: Array.from({ length: totalSlides }).map((_, index) => /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(
+        show_dots && progressPosition === "top" && /* @__PURE__ */ (0, import_jsx_runtime89.jsx)("div", { className: "flex justify-center space-x-1.5 mb-4", children: slidePositions.map((_, index) => /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(
           ProgressPill,
           {
-            active: index === currentSlide,
+            active: index === currentStepIndex,
             duration: autoplay_speed,
             index,
             onClick: () => handlePillClick(index),
-            isPlaying: isPlaying && index === currentSlide && autoplay,
+            isPlaying: isPlaying && index === currentStepIndex && autoplay,
             style: pillStyle,
             activeClassName: dotActiveClassName,
             inactiveClassName: dotInactiveClassName,
-            currentSlide,
-            totalSlides,
-            customProgress: index === currentSlide ? videoProgress : null
+            currentStep: currentStepIndex,
+            customProgress: index === currentStepIndex ? videoProgress : null
           },
           index
         )) }),
@@ -7250,20 +7255,19 @@ var init_Slider = __esm({
             ]
           }
         ),
-        show_dots && progressPosition !== "top" && /* @__PURE__ */ (0, import_jsx_runtime89.jsx)("div", { className: "flex justify-center space-x-1.5 mt-5", children: Array.from({ length: totalSlides }).map((_, index) => /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(
+        show_dots && progressPosition !== "top" && /* @__PURE__ */ (0, import_jsx_runtime89.jsx)("div", { className: "flex justify-center space-x-1.5 mt-5", children: slidePositions.map((_, index) => /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(
           ProgressPill,
           {
-            active: index === currentSlide,
+            active: index === currentStepIndex,
             duration: autoplay_speed,
             index,
             onClick: () => handlePillClick(index),
-            isPlaying: isPlaying && index === currentSlide && autoplay,
+            isPlaying: isPlaying && index === currentStepIndex && autoplay,
             style: pillStyle,
             activeClassName: dotActiveClassName,
             inactiveClassName: dotInactiveClassName,
-            currentSlide,
-            totalSlides,
-            customProgress: index === currentSlide ? videoProgress : null
+            currentStep: currentStepIndex,
+            customProgress: index === currentStepIndex ? videoProgress : null
           },
           index
         )) })
@@ -7298,8 +7302,7 @@ var init_Slider = __esm({
       style = "modern",
       activeClassName = "",
       inactiveClassName = "",
-      currentSlide,
-      totalSlides,
+      currentStep,
       customProgress = null
     }) => {
       const [progress, setProgress] = (0, import_react61.useState)(0);
@@ -7328,9 +7331,7 @@ var init_Slider = __esm({
         }, 50);
         return () => clearInterval(interval);
       }, [active, isPlaying, duration, index, customProgress]);
-      const isFilled = index < currentSlide;
-      const isActive = index === currentSlide;
-      const shouldShowProgress = isActive || style === "cumulative" && isFilled;
+      const isActive = index === currentStep;
       const baseClasses = "cursor-pointer transition-all duration-300 ease-out";
       const getStyleClasses = () => {
         switch (style) {
@@ -7343,7 +7344,7 @@ var init_Slider = __esm({
           case "cumulative":
             return `
           w-4 h-1 rounded-full overflow-hidden relative
-          ${isFilled ? activeClassName || "bg-white" : inactiveClassName || "bg-white/30"}
+          ${isActive ? activeClassName || "bg-white" : inactiveClassName || "bg-white/30"}
         `;
           case "modern":
             return `
@@ -7361,41 +7362,26 @@ var init_Slider = __esm({
         }
       };
       const renderProgressBar = () => {
-        if (style === "modern" && isActive || style === "cumulative" && shouldShowProgress) {
-          const displayProgress = style === "cumulative" && isFilled ? 100 : customProgress !== null && customProgress !== void 0 ? customProgress : progress;
+        if (style === "modern" && isActive) {
+          const displayProgress = customProgress ?? progress;
           return /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(
             "div",
             {
-              className: `absolute top-0 left-0 h-full rounded-full ${style === "cumulative" && isFilled ? activeClassName || "bg-white" : activeClassName || "bg-white"} transition-all duration-50 ease-linear`,
+              className: `absolute top-0 left-0 h-full rounded-full ${activeClassName || "bg-white"} transition-all duration-50 ease-linear`,
               style: { width: `${displayProgress}%` }
             }
           );
         }
         return null;
       };
-      const renderCumulativeFill = () => {
-        if (style === "cumulative" && isFilled && !isActive) {
-          return /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(
-            "div",
-            {
-              className: `absolute top-0 left-0 h-full rounded-full ${activeClassName || "bg-white"} transition-all duration-300`,
-              style: { width: "100%" }
-            }
-          );
-        }
-        return null;
-      };
-      return /* @__PURE__ */ (0, import_jsx_runtime89.jsxs)(
+      return /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(
         "button",
         {
           className: `${baseClasses} ${getStyleClasses()}`,
           onClick,
-          "aria-label": `Go to slide ${index + 1}`,
+          "aria-label": `Go to step ${index + 1}`,
           "aria-current": isActive ? "true" : "false",
-          children: [
-            renderProgressBar(),
-            renderCumulativeFill()
-          ]
+          children: renderProgressBar()
         }
       );
     };
@@ -10074,7 +10060,8 @@ var DivContainer = async (props) => {
   {
   }
   const updatedStyle = { ...updatedStyles };
-  const guid = "css" + crypto.randomUUID().toLocaleLowerCase();
+  const customId = props.node.customId?.trim().replace(/^#/, "");
+  const guid = customId || "css" + crypto.randomUUID().toLocaleLowerCase();
   const animationSelector = `#${guid}`;
   const { enterAnimation, exitAnimation, hoverAnimation } = props.node;
   let animationCSS = "";

package/dist/index.mjs

@@ -2453,7 +2453,7 @@ var Pagination = dynamic15(() => import("./Pagination-6R4XZLF6.mjs"), { ssr: tru
 var DataBindingControls = dynamic15(() => import("./DataBindingControls-VSLL4WV2.mjs"), {
   ssr: true
 });
-var Slider = dynamic15(() => import("./Slider-42T6THEQ.mjs"), {
+var Slider = dynamic15(() => import("./Slider-XDYPGJYI.mjs"), {
   ssr: false
 });
 function toCamelCase(str) {
@@ -2661,7 +2661,8 @@ var DivContainer = async (props) => {
   {
   }
   const updatedStyle = { ...updatedStyles };
-  const guid = "css" + crypto.randomUUID().toLocaleLowerCase();
+  const customId = props.node.customId?.trim().replace(/^#/, "");
+  const guid = customId || "css" + crypto.randomUUID().toLocaleLowerCase();
   const animationSelector = `#${guid}`;
   const { enterAnimation, exitAnimation, hoverAnimation } = props.node;
   let animationCSS = "";

package/dist/server.js

@@ -4762,36 +4762,42 @@ var init_Slider = __esm({
       const effectiveSlidesToShow = 100 / slideWidthPercentage;
       const maxSlide = Math.max(0, Math.ceil(totalSlides - effectiveSlidesToShow));
       const step = scrollByColumns ? Math.max(1, Math.floor(effectiveSlidesToShow)) : 1;
+      const slidePositions = Array.from(
+        { length: Math.ceil(maxSlide / step) + 1 },
+        (_, index) => Math.min(index * step, maxSlide)
+      );
+      const currentStepIndex = slidePositions.reduce(
+        (closestIndex, position, index) => Math.abs(position - currentSlide) < Math.abs(slidePositions[closestIndex] - currentSlide) ? index : closestIndex,
+        0
+      );
       const nextSlide = () => {
-        if (currentSlide >= maxSlide) {
+        if (currentStepIndex >= slidePositions.length - 1) {
           if (infinite_scroll) {
             setTransition(true);
             setCurrentSlide(0);
           }
         } else {
           setTransition(true);
-          const nextIndex = currentSlide + step;
-          setCurrentSlide(nextIndex > maxSlide ? maxSlide : nextIndex);
+          setCurrentSlide(slidePositions[currentStepIndex + 1]);
         }
       };
       const prevSlide = () => {
-        if (currentSlide <= 0) {
+        if (currentStepIndex <= 0) {
           if (infinite_scroll) {
             setTransition(true);
-            setCurrentSlide(maxSlide);
+            setCurrentSlide(slidePositions[slidePositions.length - 1]);
           }
         } else {
           setTransition(true);
-          const prevIndex = currentSlide - step;
-          setCurrentSlide(prevIndex < 0 ? 0 : prevIndex);
+          setCurrentSlide(slidePositions[currentStepIndex - 1]);
         }
       };
-      const goToSlide = (index) => {
+      const goToStep = (index) => {
         setTransition(true);
-        setCurrentSlide(Math.min(Math.max(0, index), maxSlide));
+        setCurrentSlide(slidePositions[index]);
       };
       const handlePillClick = (index) => {
-        goToSlide(index);
+        goToStep(index);
         if (autoplay) {
           setIsPlaying(true);
         }
@@ -4824,20 +4830,19 @@ var init_Slider = __esm({
         );
       });
       return /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)("div", { className: "w-full", children: [
-        show_dots && progressPosition === "top" && /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("div", { className: "flex justify-center space-x-1.5 mb-4", children: Array.from({ length: totalSlides }).map((_, index) => /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(
+        show_dots && progressPosition === "top" && /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("div", { className: "flex justify-center space-x-1.5 mb-4", children: slidePositions.map((_, index) => /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(
           ProgressPill,
           {
-            active: index === currentSlide,
+            active: index === currentStepIndex,
             duration: autoplay_speed,
             index,
             onClick: () => handlePillClick(index),
-            isPlaying: isPlaying && index === currentSlide && autoplay,
+            isPlaying: isPlaying && index === currentStepIndex && autoplay,
             style: pillStyle,
             activeClassName: dotActiveClassName,
             inactiveClassName: dotInactiveClassName,
-            currentSlide,
-            totalSlides,
-            customProgress: index === currentSlide ? videoProgress : null
+            currentStep: currentStepIndex,
+            customProgress: index === currentStepIndex ? videoProgress : null
           },
           index
         )) }),
@@ -4885,20 +4890,19 @@ var init_Slider = __esm({
             ]
           }
         ),
-        show_dots && progressPosition !== "top" && /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("div", { className: "flex justify-center space-x-1.5 mt-5", children: Array.from({ length: totalSlides }).map((_, index) => /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(
+        show_dots && progressPosition !== "top" && /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("div", { className: "flex justify-center space-x-1.5 mt-5", children: slidePositions.map((_, index) => /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(
           ProgressPill,
           {
-            active: index === currentSlide,
+            active: index === currentStepIndex,
             duration: autoplay_speed,
             index,
             onClick: () => handlePillClick(index),
-            isPlaying: isPlaying && index === currentSlide && autoplay,
+            isPlaying: isPlaying && index === currentStepIndex && autoplay,
             style: pillStyle,
             activeClassName: dotActiveClassName,
             inactiveClassName: dotInactiveClassName,
-            currentSlide,
-            totalSlides,
-            customProgress: index === currentSlide ? videoProgress : null
+            currentStep: currentStepIndex,
+            customProgress: index === currentStepIndex ? videoProgress : null
           },
           index
         )) })
@@ -4933,8 +4937,7 @@ var init_Slider = __esm({
       style = "modern",
       activeClassName = "",
       inactiveClassName = "",
-      currentSlide,
-      totalSlides,
+      currentStep,
       customProgress = null
     }) => {
       const [progress, setProgress] = (0, import_react41.useState)(0);
@@ -4963,9 +4966,7 @@ var init_Slider = __esm({
         }, 50);
         return () => clearInterval(interval);
       }, [active, isPlaying, duration, index, customProgress]);
-      const isFilled = index < currentSlide;
-      const isActive = index === currentSlide;
-      const shouldShowProgress = isActive || style === "cumulative" && isFilled;
+      const isActive = index === currentStep;
       const baseClasses = "cursor-pointer transition-all duration-300 ease-out";
       const getStyleClasses = () => {
         switch (style) {
@@ -4978,7 +4979,7 @@ var init_Slider = __esm({
           case "cumulative":
             return `
           w-4 h-1 rounded-full overflow-hidden relative
-          ${isFilled ? activeClassName || "bg-white" : inactiveClassName || "bg-white/30"}
+          ${isActive ? activeClassName || "bg-white" : inactiveClassName || "bg-white/30"}
         `;
           case "modern":
             return `
@@ -4996,41 +4997,26 @@ var init_Slider = __esm({
         }
       };
       const renderProgressBar = () => {
-        if (style === "modern" && isActive || style === "cumulative" && shouldShowProgress) {
-          const displayProgress = style === "cumulative" && isFilled ? 100 : customProgress !== null && customProgress !== void 0 ? customProgress : progress;
+        if (style === "modern" && isActive) {
+          const displayProgress = customProgress ?? progress;
           return /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(
             "div",
             {
-              className: `absolute top-0 left-0 h-full rounded-full ${style === "cumulative" && isFilled ? activeClassName || "bg-white" : activeClassName || "bg-white"} transition-all duration-50 ease-linear`,
+              className: `absolute top-0 left-0 h-full rounded-full ${activeClassName || "bg-white"} transition-all duration-50 ease-linear`,
               style: { width: `${displayProgress}%` }
             }
           );
         }
         return null;
       };
-      const renderCumulativeFill = () => {
-        if (style === "cumulative" && isFilled && !isActive) {
-          return /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(
-            "div",
-            {
-              className: `absolute top-0 left-0 h-full rounded-full ${activeClassName || "bg-white"} transition-all duration-300`,
-              style: { width: "100%" }
-            }
-          );
-        }
-        return null;
-      };
-      return /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)(
+      return /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(
         "button",
         {
           className: `${baseClasses} ${getStyleClasses()}`,
           onClick,
-          "aria-label": `Go to slide ${index + 1}`,
+          "aria-label": `Go to step ${index + 1}`,
           "aria-current": isActive ? "true" : "false",
-          children: [
-            renderProgressBar(),
-            renderCumulativeFill()
-          ]
+          children: renderProgressBar()
         }
       );
     };
@@ -7667,7 +7653,8 @@ var DivContainer = async (props) => {
   {
   }
   const updatedStyle = { ...updatedStyles };
-  const guid = "css" + crypto.randomUUID().toLocaleLowerCase();
+  const customId = props.node.customId?.trim().replace(/^#/, "");
+  const guid = customId || "css" + crypto.randomUUID().toLocaleLowerCase();
   const animationSelector = `#${guid}`;
   const { enterAnimation, exitAnimation, hoverAnimation } = props.node;
   let animationCSS = "";

package/dist/server.mjs

@@ -2409,7 +2409,7 @@ var Pagination = dynamic14(() => import("./Pagination-RMAXCIL7.mjs"), { ssr: tru
 var DataBindingControls = dynamic14(() => import("./DataBindingControls-Z2AHWFYX.mjs"), {
   ssr: true
 });
-var Slider = dynamic14(() => import("./Slider-UNNVADVP.mjs"), {
+var Slider = dynamic14(() => import("./Slider-BH5S4XRN.mjs"), {
   ssr: false
 });
 function toCamelCase(str) {
@@ -2617,7 +2617,8 @@ var DivContainer = async (props) => {
   {
   }
   const updatedStyle = { ...updatedStyles };
-  const guid = "css" + crypto.randomUUID().toLocaleLowerCase();
+  const customId = props.node.customId?.trim().replace(/^#/, "");
+  const guid = customId || "css" + crypto.randomUUID().toLocaleLowerCase();
   const animationSelector = `#${guid}`;
   const { enterAnimation, exitAnimation, hoverAnimation } = props.node;
   let animationCSS = "";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@clyrex-digital/clyrex-controls-dev",
-  "version": "0.8.1-dev.20261007072241",
+  "version": "0.8.1-dev.20261010122158",
   "description": "Reusable React components",
   "main": "dist/index.js",
   "module": "dist/index.mjs",