@clyrex-digital/clyrex-controls-dev 0.8.1-dev.20260905093435 → 0.8.1-dev.20260905121428

package/dist/{Slider-BSUOIWP6.mjs → Slider-IVPJBPE5.mjs}

@@ -7,7 +7,9 @@ import React, { useState, useEffect, Children, cloneElement } from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 var Slider = ({
   children,
+  columns,
   slidesToShow = 4,
+  lastColPercentage,
   infinite_scroll = false,
   autoplay = false,
   autoplay_speed = 3e3,
@@ -25,25 +27,29 @@ var Slider = ({
 }) => {
   const [currentSlide, setCurrentSlide] = useState(0);
   const [transition, setTransition] = useState(true);
+  const initialSlidesToShow = slidesToShow ?? columns ?? 4;
   const [slidesToShowState, setSlidesToShowState] = useState(
-    typeof slidesToShow === "number" ? slidesToShow : slidesToShow.large
+    typeof initialSlidesToShow === "number" ? initialSlidesToShow : initialSlidesToShow.large
   );
   const [isPlaying, setIsPlaying] = useState(autoplay);
   useEffect(() => {
-    if (typeof slidesToShow === "number") return;
+    if (typeof initialSlidesToShow === "number") {
+      setSlidesToShowState(initialSlidesToShow);
+      return;
+    }
     const handleResize = () => {
       if (window.innerWidth >= 1024) {
-        setSlidesToShowState(slidesToShow.large);
+        setSlidesToShowState(initialSlidesToShow.large);
       } else if (window.innerWidth >= 768) {
-        setSlidesToShowState(slidesToShow.medium);
+        setSlidesToShowState(initialSlidesToShow.medium);
       } else {
-        setSlidesToShowState(slidesToShow.small);
+        setSlidesToShowState(initialSlidesToShow.small);
       }
     };
     handleResize();
     window.addEventListener("resize", handleResize);
     return () => window.removeEventListener("resize", handleResize);
-  }, [slidesToShow]);
+  }, [initialSlidesToShow]);
   useEffect(() => {
     if (!autoplay) return;
     const timer = setInterval(() => {
@@ -54,8 +60,20 @@ var Slider = ({
     return () => clearInterval(timer);
   }, [autoplay, autoplay_speed, currentSlide, isPlaying]);
   const totalSlides = Children.count(children);
-  const maxSlide = Math.max(0, totalSlides - slidesToShowState);
-  const step = scrollByColumns ? typeof slidesToShowState === "number" && slidesToShowState > 0 ? Math.floor(slidesToShowState) : 1 : 1;
+  const numColumns = columns ?? slidesToShowState;
+  const slideWidthPercentage = (() => {
+    if (typeof lastColPercentage !== "number") {
+      return numColumns > 0 ? 100 / numColumns : 100;
+    }
+    const pct = Math.max(0, Math.min(100, lastColPercentage));
+    if (pct === 0 || numColumns <= 1) {
+      return numColumns > 0 ? 100 / numColumns : 100;
+    }
+    return 100 / (numColumns - 1 + pct / 100);
+  })();
+  const effectiveSlidesToShow = 100 / slideWidthPercentage;
+  const maxSlide = Math.max(0, Math.ceil(totalSlides - effectiveSlidesToShow));
+  const step = scrollByColumns ? Math.max(1, Math.floor(effectiveSlidesToShow)) : 1;
   const nextSlide = () => {
     if (currentSlide >= maxSlide) {
       if (infinite_scroll) {
@@ -82,7 +100,7 @@ var Slider = ({
   };
   const goToSlide = (index) => {
     setTransition(true);
-    setCurrentSlide(index);
+    setCurrentSlide(Math.min(Math.max(0, index), maxSlide));
   };
   const handlePillClick = (index) => {
     goToSlide(index);
@@ -100,7 +118,7 @@ var Slider = ({
       setIsPlaying(true);
     }
   };
-  const translateX = -currentSlide * (100 / slidesToShowState);
+  const translateX = -currentSlide * slideWidthPercentage;
   const slides = Children.map(children, (child, index) => {
     if (!React.isValidElement(child)) return null;
     const childProps = child.props;
@@ -109,7 +127,7 @@ var Slider = ({
       "div",
       {
         className: `flex-none ${scaleOnHover ? "group hover:z-50" : ""} relative`,
-        style: { width: `calc(${100 / slidesToShowState}%)`, paddingRight: gap },
+        style: { width: `calc(${slideWidthPercentage}%)`, paddingRight: gap },
         children: cloneElement(child, {
           className: mergedClassName
         })

package/dist/{Slider-F4OIS46A.mjs → Slider-QIGKP6AE.mjs}

@@ -5,7 +5,9 @@ import React, { useState, useEffect, Children, cloneElement } from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 var Slider = ({
   children,
+  columns,
   slidesToShow = 4,
+  lastColPercentage,
   infinite_scroll = false,
   autoplay = false,
   autoplay_speed = 3e3,
@@ -23,25 +25,29 @@ var Slider = ({
 }) => {
   const [currentSlide, setCurrentSlide] = useState(0);
   const [transition, setTransition] = useState(true);
+  const initialSlidesToShow = slidesToShow ?? columns ?? 4;
   const [slidesToShowState, setSlidesToShowState] = useState(
-    typeof slidesToShow === "number" ? slidesToShow : slidesToShow.large
+    typeof initialSlidesToShow === "number" ? initialSlidesToShow : initialSlidesToShow.large
   );
   const [isPlaying, setIsPlaying] = useState(autoplay);
   useEffect(() => {
-    if (typeof slidesToShow === "number") return;
+    if (typeof initialSlidesToShow === "number") {
+      setSlidesToShowState(initialSlidesToShow);
+      return;
+    }
     const handleResize = () => {
       if (window.innerWidth >= 1024) {
-        setSlidesToShowState(slidesToShow.large);
+        setSlidesToShowState(initialSlidesToShow.large);
       } else if (window.innerWidth >= 768) {
-        setSlidesToShowState(slidesToShow.medium);
+        setSlidesToShowState(initialSlidesToShow.medium);
       } else {
-        setSlidesToShowState(slidesToShow.small);
+        setSlidesToShowState(initialSlidesToShow.small);
       }
     };
     handleResize();
     window.addEventListener("resize", handleResize);
     return () => window.removeEventListener("resize", handleResize);
-  }, [slidesToShow]);
+  }, [initialSlidesToShow]);
   useEffect(() => {
     if (!autoplay) return;
     const timer = setInterval(() => {
@@ -52,8 +58,20 @@ var Slider = ({
     return () => clearInterval(timer);
   }, [autoplay, autoplay_speed, currentSlide, isPlaying]);
   const totalSlides = Children.count(children);
-  const maxSlide = Math.max(0, totalSlides - slidesToShowState);
-  const step = scrollByColumns ? typeof slidesToShowState === "number" && slidesToShowState > 0 ? Math.floor(slidesToShowState) : 1 : 1;
+  const numColumns = columns ?? slidesToShowState;
+  const slideWidthPercentage = (() => {
+    if (typeof lastColPercentage !== "number") {
+      return numColumns > 0 ? 100 / numColumns : 100;
+    }
+    const pct = Math.max(0, Math.min(100, lastColPercentage));
+    if (pct === 0 || numColumns <= 1) {
+      return numColumns > 0 ? 100 / numColumns : 100;
+    }
+    return 100 / (numColumns - 1 + pct / 100);
+  })();
+  const effectiveSlidesToShow = 100 / slideWidthPercentage;
+  const maxSlide = Math.max(0, Math.ceil(totalSlides - effectiveSlidesToShow));
+  const step = scrollByColumns ? Math.max(1, Math.floor(effectiveSlidesToShow)) : 1;
   const nextSlide = () => {
     if (currentSlide >= maxSlide) {
       if (infinite_scroll) {
@@ -80,7 +98,7 @@ var Slider = ({
   };
   const goToSlide = (index) => {
     setTransition(true);
-    setCurrentSlide(index);
+    setCurrentSlide(Math.min(Math.max(0, index), maxSlide));
   };
   const handlePillClick = (index) => {
     goToSlide(index);
@@ -98,7 +116,7 @@ var Slider = ({
       setIsPlaying(true);
     }
   };
-  const translateX = -currentSlide * (100 / slidesToShowState);
+  const translateX = -currentSlide * slideWidthPercentage;
   const slides = Children.map(children, (child, index) => {
     if (!React.isValidElement(child)) return null;
     const childProps = child.props;
@@ -107,7 +125,7 @@ var Slider = ({
       "div",
       {
         className: `flex-none ${scaleOnHover ? "group hover:z-50" : ""} relative`,
-        style: { width: `calc(${100 / slidesToShowState}%)`, paddingRight: gap },
+        style: { width: `calc(${slideWidthPercentage}%)`, paddingRight: gap },
         children: cloneElement(child, {
           className: mergedClassName
         })

package/dist/index.js

@@ -5843,7 +5843,9 @@ var init_Slider = __esm({
     import_jsx_runtime86 = require("react/jsx-runtime");
     Slider = ({
       children,
+      columns,
       slidesToShow = 4,
+      lastColPercentage,
       infinite_scroll = false,
       autoplay = false,
       autoplay_speed = 3e3,
@@ -5861,25 +5863,29 @@ var init_Slider = __esm({
     }) => {
       const [currentSlide, setCurrentSlide] = (0, import_react60.useState)(0);
       const [transition, setTransition] = (0, import_react60.useState)(true);
+      const initialSlidesToShow = slidesToShow ?? columns ?? 4;
       const [slidesToShowState, setSlidesToShowState] = (0, import_react60.useState)(
-        typeof slidesToShow === "number" ? slidesToShow : slidesToShow.large
+        typeof initialSlidesToShow === "number" ? initialSlidesToShow : initialSlidesToShow.large
       );
       const [isPlaying, setIsPlaying] = (0, import_react60.useState)(autoplay);
       (0, import_react60.useEffect)(() => {
-        if (typeof slidesToShow === "number") return;
+        if (typeof initialSlidesToShow === "number") {
+          setSlidesToShowState(initialSlidesToShow);
+          return;
+        }
         const handleResize = () => {
           if (window.innerWidth >= 1024) {
-            setSlidesToShowState(slidesToShow.large);
+            setSlidesToShowState(initialSlidesToShow.large);
           } else if (window.innerWidth >= 768) {
-            setSlidesToShowState(slidesToShow.medium);
+            setSlidesToShowState(initialSlidesToShow.medium);
           } else {
-            setSlidesToShowState(slidesToShow.small);
+            setSlidesToShowState(initialSlidesToShow.small);
           }
         };
         handleResize();
         window.addEventListener("resize", handleResize);
         return () => window.removeEventListener("resize", handleResize);
-      }, [slidesToShow]);
+      }, [initialSlidesToShow]);
       (0, import_react60.useEffect)(() => {
         if (!autoplay) return;
         const timer = setInterval(() => {
@@ -5890,8 +5896,20 @@ var init_Slider = __esm({
         return () => clearInterval(timer);
       }, [autoplay, autoplay_speed, currentSlide, isPlaying]);
       const totalSlides = import_react60.Children.count(children);
-      const maxSlide = Math.max(0, totalSlides - slidesToShowState);
-      const step = scrollByColumns ? typeof slidesToShowState === "number" && slidesToShowState > 0 ? Math.floor(slidesToShowState) : 1 : 1;
+      const numColumns = columns ?? slidesToShowState;
+      const slideWidthPercentage = (() => {
+        if (typeof lastColPercentage !== "number") {
+          return numColumns > 0 ? 100 / numColumns : 100;
+        }
+        const pct = Math.max(0, Math.min(100, lastColPercentage));
+        if (pct === 0 || numColumns <= 1) {
+          return numColumns > 0 ? 100 / numColumns : 100;
+        }
+        return 100 / (numColumns - 1 + pct / 100);
+      })();
+      const effectiveSlidesToShow = 100 / slideWidthPercentage;
+      const maxSlide = Math.max(0, Math.ceil(totalSlides - effectiveSlidesToShow));
+      const step = scrollByColumns ? Math.max(1, Math.floor(effectiveSlidesToShow)) : 1;
       const nextSlide = () => {
         if (currentSlide >= maxSlide) {
           if (infinite_scroll) {
@@ -5918,7 +5936,7 @@ var init_Slider = __esm({
       };
       const goToSlide = (index) => {
         setTransition(true);
-        setCurrentSlide(index);
+        setCurrentSlide(Math.min(Math.max(0, index), maxSlide));
       };
       const handlePillClick = (index) => {
         goToSlide(index);
@@ -5936,7 +5954,7 @@ var init_Slider = __esm({
           setIsPlaying(true);
         }
       };
-      const translateX = -currentSlide * (100 / slidesToShowState);
+      const translateX = -currentSlide * slideWidthPercentage;
       const slides = import_react60.Children.map(children, (child, index) => {
         if (!import_react60.default.isValidElement(child)) return null;
         const childProps = child.props;
@@ -5945,7 +5963,7 @@ var init_Slider = __esm({
           "div",
           {
             className: `flex-none ${scaleOnHover ? "group hover:z-50" : ""} relative`,
-            style: { width: `calc(${100 / slidesToShowState}%)`, paddingRight: gap },
+            style: { width: `calc(${slideWidthPercentage}%)`, paddingRight: gap },
             children: (0, import_react60.cloneElement)(child, {
               className: mergedClassName
             })

package/dist/index.mjs

@@ -2349,7 +2349,7 @@ var Pagination = dynamic13(() => import("./Pagination-CQKMBXXJ.mjs"), { ssr: tru
 var DataBindingControls = dynamic13(() => import("./DataBindingControls-UUDERFAD.mjs"), {
   ssr: true
 });
-var Slider = dynamic13(() => import("./Slider-BSUOIWP6.mjs"), {
+var Slider = dynamic13(() => import("./Slider-IVPJBPE5.mjs"), {
   ssr: false
 });
 function toCamelCase(str) {

package/dist/server.js

@@ -5841,7 +5841,9 @@ var init_Slider = __esm({
     import_jsx_runtime86 = require("react/jsx-runtime");
     Slider = ({
       children,
+      columns,
       slidesToShow = 4,
+      lastColPercentage,
       infinite_scroll = false,
       autoplay = false,
       autoplay_speed = 3e3,
@@ -5859,25 +5861,29 @@ var init_Slider = __esm({
     }) => {
       const [currentSlide, setCurrentSlide] = (0, import_react60.useState)(0);
       const [transition, setTransition] = (0, import_react60.useState)(true);
+      const initialSlidesToShow = slidesToShow ?? columns ?? 4;
       const [slidesToShowState, setSlidesToShowState] = (0, import_react60.useState)(
-        typeof slidesToShow === "number" ? slidesToShow : slidesToShow.large
+        typeof initialSlidesToShow === "number" ? initialSlidesToShow : initialSlidesToShow.large
       );
       const [isPlaying, setIsPlaying] = (0, import_react60.useState)(autoplay);
       (0, import_react60.useEffect)(() => {
-        if (typeof slidesToShow === "number") return;
+        if (typeof initialSlidesToShow === "number") {
+          setSlidesToShowState(initialSlidesToShow);
+          return;
+        }
         const handleResize = () => {
           if (window.innerWidth >= 1024) {
-            setSlidesToShowState(slidesToShow.large);
+            setSlidesToShowState(initialSlidesToShow.large);
           } else if (window.innerWidth >= 768) {
-            setSlidesToShowState(slidesToShow.medium);
+            setSlidesToShowState(initialSlidesToShow.medium);
           } else {
-            setSlidesToShowState(slidesToShow.small);
+            setSlidesToShowState(initialSlidesToShow.small);
           }
         };
         handleResize();
         window.addEventListener("resize", handleResize);
         return () => window.removeEventListener("resize", handleResize);
-      }, [slidesToShow]);
+      }, [initialSlidesToShow]);
       (0, import_react60.useEffect)(() => {
         if (!autoplay) return;
         const timer = setInterval(() => {
@@ -5888,8 +5894,20 @@ var init_Slider = __esm({
         return () => clearInterval(timer);
       }, [autoplay, autoplay_speed, currentSlide, isPlaying]);
       const totalSlides = import_react60.Children.count(children);
-      const maxSlide = Math.max(0, totalSlides - slidesToShowState);
-      const step = scrollByColumns ? typeof slidesToShowState === "number" && slidesToShowState > 0 ? Math.floor(slidesToShowState) : 1 : 1;
+      const numColumns = columns ?? slidesToShowState;
+      const slideWidthPercentage = (() => {
+        if (typeof lastColPercentage !== "number") {
+          return numColumns > 0 ? 100 / numColumns : 100;
+        }
+        const pct = Math.max(0, Math.min(100, lastColPercentage));
+        if (pct === 0 || numColumns <= 1) {
+          return numColumns > 0 ? 100 / numColumns : 100;
+        }
+        return 100 / (numColumns - 1 + pct / 100);
+      })();
+      const effectiveSlidesToShow = 100 / slideWidthPercentage;
+      const maxSlide = Math.max(0, Math.ceil(totalSlides - effectiveSlidesToShow));
+      const step = scrollByColumns ? Math.max(1, Math.floor(effectiveSlidesToShow)) : 1;
       const nextSlide = () => {
         if (currentSlide >= maxSlide) {
           if (infinite_scroll) {
@@ -5916,7 +5934,7 @@ var init_Slider = __esm({
       };
       const goToSlide = (index) => {
         setTransition(true);
-        setCurrentSlide(index);
+        setCurrentSlide(Math.min(Math.max(0, index), maxSlide));
       };
       const handlePillClick = (index) => {
         goToSlide(index);
@@ -5934,7 +5952,7 @@ var init_Slider = __esm({
           setIsPlaying(true);
         }
       };
-      const translateX = -currentSlide * (100 / slidesToShowState);
+      const translateX = -currentSlide * slideWidthPercentage;
       const slides = import_react60.Children.map(children, (child, index) => {
         if (!import_react60.default.isValidElement(child)) return null;
         const childProps = child.props;
@@ -5943,7 +5961,7 @@ var init_Slider = __esm({
           "div",
           {
             className: `flex-none ${scaleOnHover ? "group hover:z-50" : ""} relative`,
-            style: { width: `calc(${100 / slidesToShowState}%)`, paddingRight: gap },
+            style: { width: `calc(${slideWidthPercentage}%)`, paddingRight: gap },
             children: (0, import_react60.cloneElement)(child, {
               className: mergedClassName
             })

package/dist/server.mjs

@@ -2317,7 +2317,7 @@ var Pagination = dynamic13(() => import("./Pagination-M3VZKKXY.mjs"), { ssr: tru
 var DataBindingControls = dynamic13(() => import("./DataBindingControls-WC3HBVVQ.mjs"), {
   ssr: true
 });
-var Slider = dynamic13(() => import("./Slider-F4OIS46A.mjs"), {
+var Slider = dynamic13(() => import("./Slider-QIGKP6AE.mjs"), {
   ssr: false
 });
 function toCamelCase(str) {

package/package.json

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