@clyrex-digital/clyrex-controls-dev 0.8.1-dev.20260923125229 → 0.8.1-dev.20260924103055

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

@@ -3,7 +3,7 @@
 "use client";
 
 // src/components/Slider.tsx
-import React, { useState, useEffect, Children, cloneElement } from "react";
+import React, { useState, useEffect, Children, cloneElement, useRef } from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 var Slider = ({
   children,
@@ -32,6 +32,9 @@ var Slider = ({
     typeof initialSlidesToShow === "number" ? initialSlidesToShow : initialSlidesToShow.large
   );
   const [isPlaying, setIsPlaying] = useState(autoplay);
+  const trackRef = useRef(null);
+  console.log("trackRef:", trackRef);
+  const [videoProgress, setVideoProgress] = useState(null);
   useEffect(() => {
     if (typeof initialSlidesToShow === "number") {
       setSlidesToShowState(initialSlidesToShow);
@@ -52,6 +55,42 @@ var Slider = ({
   }, [initialSlidesToShow]);
   useEffect(() => {
     if (!autoplay) return;
+    const activeSlideElement = trackRef.current?.children[currentSlide];
+    const videoElement = activeSlideElement?.querySelector("video");
+    if (videoElement) {
+      videoElement.loop = false;
+      setVideoProgress(0);
+      if (videoElement.ended) {
+        videoElement.currentTime = 0;
+      }
+      videoElement.play().catch(() => {
+      });
+      const handleTimeUpdate = () => {
+        if (videoElement.duration && !isNaN(videoElement.duration) && videoElement.duration > 0) {
+          const pct = videoElement.currentTime / videoElement.duration * 100;
+          setVideoProgress(pct);
+        }
+      };
+      const handleVideoEnded = () => {
+        setVideoProgress(100);
+        nextSlide();
+      };
+      const handleVideoError = () => {
+        nextSlide();
+      };
+      videoElement.addEventListener("timeupdate", handleTimeUpdate);
+      videoElement.addEventListener("loadedmetadata", handleTimeUpdate);
+      videoElement.addEventListener("ended", handleVideoEnded, { once: true });
+      videoElement.addEventListener("error", handleVideoError, { once: true });
+      return () => {
+        videoElement.removeEventListener("timeupdate", handleTimeUpdate);
+        videoElement.removeEventListener("loadedmetadata", handleTimeUpdate);
+        videoElement.removeEventListener("ended", handleVideoEnded);
+        videoElement.removeEventListener("error", handleVideoError);
+        videoElement.pause();
+        setVideoProgress(null);
+      };
+    }
     const timer = setInterval(() => {
       if (isPlaying) {
         nextSlide();
@@ -148,7 +187,8 @@ var Slider = ({
         activeClassName: dotActiveClassName,
         inactiveClassName: dotInactiveClassName,
         currentSlide,
-        totalSlides
+        totalSlides,
+        customProgress: index === currentSlide ? videoProgress : null
       },
       index
     )) }),
@@ -162,6 +202,7 @@ var Slider = ({
           /* @__PURE__ */ jsx(
             "div",
             {
+              ref: trackRef,
               className: "flex h-full",
               style: {
                 transition: transition ? "transform 0.5s ease" : "none",
@@ -207,7 +248,8 @@ var Slider = ({
         activeClassName: dotActiveClassName,
         inactiveClassName: dotInactiveClassName,
         currentSlide,
-        totalSlides
+        totalSlides,
+        customProgress: index === currentSlide ? videoProgress : null
       },
       index
     )) })
@@ -243,7 +285,8 @@ var ProgressPill = ({
   activeClassName = "",
   inactiveClassName = "",
   currentSlide,
-  totalSlides
+  totalSlides,
+  customProgress = null
 }) => {
   const [progress, setProgress] = useState(0);
   useEffect(() => {
@@ -252,7 +295,7 @@ var ProgressPill = ({
     }
   }, [active, index]);
   useEffect(() => {
-    if (!active || !isPlaying) {
+    if (!active || !isPlaying || customProgress !== null) {
       if (!active) {
         setProgress(0);
       }
@@ -270,7 +313,7 @@ var ProgressPill = ({
       }
     }, 50);
     return () => clearInterval(interval);
-  }, [active, isPlaying, duration, index]);
+  }, [active, isPlaying, duration, index, customProgress]);
   const isFilled = index < currentSlide;
   const isActive = index === currentSlide;
   const shouldShowProgress = isActive || style === "cumulative" && isFilled;
@@ -305,7 +348,7 @@ var ProgressPill = ({
   };
   const renderProgressBar = () => {
     if (style === "modern" && isActive || style === "cumulative" && shouldShowProgress) {
-      const displayProgress = style === "cumulative" && isFilled ? 100 : progress;
+      const displayProgress = style === "cumulative" && isFilled ? 100 : customProgress !== null && customProgress !== void 0 ? customProgress : progress;
       return /* @__PURE__ */ jsx(
         "div",
         {

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

@@ -1,7 +1,7 @@
 "use client";
 
 // src/components/Slider.tsx
-import React, { useState, useEffect, Children, cloneElement } from "react";
+import React, { useState, useEffect, Children, cloneElement, useRef } from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 var Slider = ({
   children,
@@ -30,6 +30,9 @@ var Slider = ({
     typeof initialSlidesToShow === "number" ? initialSlidesToShow : initialSlidesToShow.large
   );
   const [isPlaying, setIsPlaying] = useState(autoplay);
+  const trackRef = useRef(null);
+  console.log("trackRef:", trackRef);
+  const [videoProgress, setVideoProgress] = useState(null);
   useEffect(() => {
     if (typeof initialSlidesToShow === "number") {
       setSlidesToShowState(initialSlidesToShow);
@@ -50,6 +53,42 @@ var Slider = ({
   }, [initialSlidesToShow]);
   useEffect(() => {
     if (!autoplay) return;
+    const activeSlideElement = trackRef.current?.children[currentSlide];
+    const videoElement = activeSlideElement?.querySelector("video");
+    if (videoElement) {
+      videoElement.loop = false;
+      setVideoProgress(0);
+      if (videoElement.ended) {
+        videoElement.currentTime = 0;
+      }
+      videoElement.play().catch(() => {
+      });
+      const handleTimeUpdate = () => {
+        if (videoElement.duration && !isNaN(videoElement.duration) && videoElement.duration > 0) {
+          const pct = videoElement.currentTime / videoElement.duration * 100;
+          setVideoProgress(pct);
+        }
+      };
+      const handleVideoEnded = () => {
+        setVideoProgress(100);
+        nextSlide();
+      };
+      const handleVideoError = () => {
+        nextSlide();
+      };
+      videoElement.addEventListener("timeupdate", handleTimeUpdate);
+      videoElement.addEventListener("loadedmetadata", handleTimeUpdate);
+      videoElement.addEventListener("ended", handleVideoEnded, { once: true });
+      videoElement.addEventListener("error", handleVideoError, { once: true });
+      return () => {
+        videoElement.removeEventListener("timeupdate", handleTimeUpdate);
+        videoElement.removeEventListener("loadedmetadata", handleTimeUpdate);
+        videoElement.removeEventListener("ended", handleVideoEnded);
+        videoElement.removeEventListener("error", handleVideoError);
+        videoElement.pause();
+        setVideoProgress(null);
+      };
+    }
     const timer = setInterval(() => {
       if (isPlaying) {
         nextSlide();
@@ -146,7 +185,8 @@ var Slider = ({
         activeClassName: dotActiveClassName,
         inactiveClassName: dotInactiveClassName,
         currentSlide,
-        totalSlides
+        totalSlides,
+        customProgress: index === currentSlide ? videoProgress : null
       },
       index
     )) }),
@@ -160,6 +200,7 @@ var Slider = ({
           /* @__PURE__ */ jsx(
             "div",
             {
+              ref: trackRef,
               className: "flex h-full",
               style: {
                 transition: transition ? "transform 0.5s ease" : "none",
@@ -205,7 +246,8 @@ var Slider = ({
         activeClassName: dotActiveClassName,
         inactiveClassName: dotInactiveClassName,
         currentSlide,
-        totalSlides
+        totalSlides,
+        customProgress: index === currentSlide ? videoProgress : null
       },
       index
     )) })
@@ -241,7 +283,8 @@ var ProgressPill = ({
   activeClassName = "",
   inactiveClassName = "",
   currentSlide,
-  totalSlides
+  totalSlides,
+  customProgress = null
 }) => {
   const [progress, setProgress] = useState(0);
   useEffect(() => {
@@ -250,7 +293,7 @@ var ProgressPill = ({
     }
   }, [active, index]);
   useEffect(() => {
-    if (!active || !isPlaying) {
+    if (!active || !isPlaying || customProgress !== null) {
       if (!active) {
         setProgress(0);
       }
@@ -268,7 +311,7 @@ var ProgressPill = ({
       }
     }, 50);
     return () => clearInterval(interval);
-  }, [active, isPlaying, duration, index]);
+  }, [active, isPlaying, duration, index, customProgress]);
   const isFilled = index < currentSlide;
   const isActive = index === currentSlide;
   const shouldShowProgress = isActive || style === "cumulative" && isFilled;
@@ -303,7 +346,7 @@ var ProgressPill = ({
   };
   const renderProgressBar = () => {
     if (style === "modern" && isActive || style === "cumulative" && shouldShowProgress) {
-      const displayProgress = style === "cumulative" && isFilled ? 100 : progress;
+      const displayProgress = style === "cumulative" && isFilled ? 100 : customProgress !== null && customProgress !== void 0 ? customProgress : progress;
       return /* @__PURE__ */ jsx(
         "div",
         {

package/dist/index.js

@@ -6096,6 +6096,9 @@ var init_Slider = __esm({
         typeof initialSlidesToShow === "number" ? initialSlidesToShow : initialSlidesToShow.large
       );
       const [isPlaying, setIsPlaying] = (0, import_react60.useState)(autoplay);
+      const trackRef = (0, import_react60.useRef)(null);
+      console.log("trackRef:", trackRef);
+      const [videoProgress, setVideoProgress] = (0, import_react60.useState)(null);
       (0, import_react60.useEffect)(() => {
         if (typeof initialSlidesToShow === "number") {
           setSlidesToShowState(initialSlidesToShow);
@@ -6116,6 +6119,42 @@ var init_Slider = __esm({
       }, [initialSlidesToShow]);
       (0, import_react60.useEffect)(() => {
         if (!autoplay) return;
+        const activeSlideElement = trackRef.current?.children[currentSlide];
+        const videoElement = activeSlideElement?.querySelector("video");
+        if (videoElement) {
+          videoElement.loop = false;
+          setVideoProgress(0);
+          if (videoElement.ended) {
+            videoElement.currentTime = 0;
+          }
+          videoElement.play().catch(() => {
+          });
+          const handleTimeUpdate = () => {
+            if (videoElement.duration && !isNaN(videoElement.duration) && videoElement.duration > 0) {
+              const pct = videoElement.currentTime / videoElement.duration * 100;
+              setVideoProgress(pct);
+            }
+          };
+          const handleVideoEnded = () => {
+            setVideoProgress(100);
+            nextSlide();
+          };
+          const handleVideoError = () => {
+            nextSlide();
+          };
+          videoElement.addEventListener("timeupdate", handleTimeUpdate);
+          videoElement.addEventListener("loadedmetadata", handleTimeUpdate);
+          videoElement.addEventListener("ended", handleVideoEnded, { once: true });
+          videoElement.addEventListener("error", handleVideoError, { once: true });
+          return () => {
+            videoElement.removeEventListener("timeupdate", handleTimeUpdate);
+            videoElement.removeEventListener("loadedmetadata", handleTimeUpdate);
+            videoElement.removeEventListener("ended", handleVideoEnded);
+            videoElement.removeEventListener("error", handleVideoError);
+            videoElement.pause();
+            setVideoProgress(null);
+          };
+        }
         const timer = setInterval(() => {
           if (isPlaying) {
             nextSlide();
@@ -6212,7 +6251,8 @@ var init_Slider = __esm({
             activeClassName: dotActiveClassName,
             inactiveClassName: dotInactiveClassName,
             currentSlide,
-            totalSlides
+            totalSlides,
+            customProgress: index === currentSlide ? videoProgress : null
           },
           index
         )) }),
@@ -6226,6 +6266,7 @@ var init_Slider = __esm({
               /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(
                 "div",
                 {
+                  ref: trackRef,
                   className: "flex h-full",
                   style: {
                     transition: transition ? "transform 0.5s ease" : "none",
@@ -6271,7 +6312,8 @@ var init_Slider = __esm({
             activeClassName: dotActiveClassName,
             inactiveClassName: dotInactiveClassName,
             currentSlide,
-            totalSlides
+            totalSlides,
+            customProgress: index === currentSlide ? videoProgress : null
           },
           index
         )) })
@@ -6307,7 +6349,8 @@ var init_Slider = __esm({
       activeClassName = "",
       inactiveClassName = "",
       currentSlide,
-      totalSlides
+      totalSlides,
+      customProgress = null
     }) => {
       const [progress, setProgress] = (0, import_react60.useState)(0);
       (0, import_react60.useEffect)(() => {
@@ -6316,7 +6359,7 @@ var init_Slider = __esm({
         }
       }, [active, index]);
       (0, import_react60.useEffect)(() => {
-        if (!active || !isPlaying) {
+        if (!active || !isPlaying || customProgress !== null) {
           if (!active) {
             setProgress(0);
           }
@@ -6334,7 +6377,7 @@ var init_Slider = __esm({
           }
         }, 50);
         return () => clearInterval(interval);
-      }, [active, isPlaying, duration, index]);
+      }, [active, isPlaying, duration, index, customProgress]);
       const isFilled = index < currentSlide;
       const isActive = index === currentSlide;
       const shouldShowProgress = isActive || style === "cumulative" && isFilled;
@@ -6369,7 +6412,7 @@ var init_Slider = __esm({
       };
       const renderProgressBar = () => {
         if (style === "modern" && isActive || style === "cumulative" && shouldShowProgress) {
-          const displayProgress = style === "cumulative" && isFilled ? 100 : progress;
+          const displayProgress = style === "cumulative" && isFilled ? 100 : customProgress !== null && customProgress !== void 0 ? customProgress : progress;
           return /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(
             "div",
             {

package/dist/index.mjs

@@ -2423,7 +2423,7 @@ var Pagination = dynamic13(() => import("./Pagination-STOHS3LO.mjs"), { ssr: tru
 var DataBindingControls = dynamic13(() => import("./DataBindingControls-SLNZLI3I.mjs"), {
   ssr: true
 });
-var Slider = dynamic13(() => import("./Slider-IVPJBPE5.mjs"), {
+var Slider = dynamic13(() => import("./Slider-42T6THEQ.mjs"), {
   ssr: false
 });
 function toCamelCase(str) {

package/dist/server.js

@@ -6094,6 +6094,9 @@ var init_Slider = __esm({
         typeof initialSlidesToShow === "number" ? initialSlidesToShow : initialSlidesToShow.large
       );
       const [isPlaying, setIsPlaying] = (0, import_react60.useState)(autoplay);
+      const trackRef = (0, import_react60.useRef)(null);
+      console.log("trackRef:", trackRef);
+      const [videoProgress, setVideoProgress] = (0, import_react60.useState)(null);
       (0, import_react60.useEffect)(() => {
         if (typeof initialSlidesToShow === "number") {
           setSlidesToShowState(initialSlidesToShow);
@@ -6114,6 +6117,42 @@ var init_Slider = __esm({
       }, [initialSlidesToShow]);
       (0, import_react60.useEffect)(() => {
         if (!autoplay) return;
+        const activeSlideElement = trackRef.current?.children[currentSlide];
+        const videoElement = activeSlideElement?.querySelector("video");
+        if (videoElement) {
+          videoElement.loop = false;
+          setVideoProgress(0);
+          if (videoElement.ended) {
+            videoElement.currentTime = 0;
+          }
+          videoElement.play().catch(() => {
+          });
+          const handleTimeUpdate = () => {
+            if (videoElement.duration && !isNaN(videoElement.duration) && videoElement.duration > 0) {
+              const pct = videoElement.currentTime / videoElement.duration * 100;
+              setVideoProgress(pct);
+            }
+          };
+          const handleVideoEnded = () => {
+            setVideoProgress(100);
+            nextSlide();
+          };
+          const handleVideoError = () => {
+            nextSlide();
+          };
+          videoElement.addEventListener("timeupdate", handleTimeUpdate);
+          videoElement.addEventListener("loadedmetadata", handleTimeUpdate);
+          videoElement.addEventListener("ended", handleVideoEnded, { once: true });
+          videoElement.addEventListener("error", handleVideoError, { once: true });
+          return () => {
+            videoElement.removeEventListener("timeupdate", handleTimeUpdate);
+            videoElement.removeEventListener("loadedmetadata", handleTimeUpdate);
+            videoElement.removeEventListener("ended", handleVideoEnded);
+            videoElement.removeEventListener("error", handleVideoError);
+            videoElement.pause();
+            setVideoProgress(null);
+          };
+        }
         const timer = setInterval(() => {
           if (isPlaying) {
             nextSlide();
@@ -6210,7 +6249,8 @@ var init_Slider = __esm({
             activeClassName: dotActiveClassName,
             inactiveClassName: dotInactiveClassName,
             currentSlide,
-            totalSlides
+            totalSlides,
+            customProgress: index === currentSlide ? videoProgress : null
           },
           index
         )) }),
@@ -6224,6 +6264,7 @@ var init_Slider = __esm({
               /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(
                 "div",
                 {
+                  ref: trackRef,
                   className: "flex h-full",
                   style: {
                     transition: transition ? "transform 0.5s ease" : "none",
@@ -6269,7 +6310,8 @@ var init_Slider = __esm({
             activeClassName: dotActiveClassName,
             inactiveClassName: dotInactiveClassName,
             currentSlide,
-            totalSlides
+            totalSlides,
+            customProgress: index === currentSlide ? videoProgress : null
           },
           index
         )) })
@@ -6305,7 +6347,8 @@ var init_Slider = __esm({
       activeClassName = "",
       inactiveClassName = "",
       currentSlide,
-      totalSlides
+      totalSlides,
+      customProgress = null
     }) => {
       const [progress, setProgress] = (0, import_react60.useState)(0);
       (0, import_react60.useEffect)(() => {
@@ -6314,7 +6357,7 @@ var init_Slider = __esm({
         }
       }, [active, index]);
       (0, import_react60.useEffect)(() => {
-        if (!active || !isPlaying) {
+        if (!active || !isPlaying || customProgress !== null) {
           if (!active) {
             setProgress(0);
           }
@@ -6332,7 +6375,7 @@ var init_Slider = __esm({
           }
         }, 50);
         return () => clearInterval(interval);
-      }, [active, isPlaying, duration, index]);
+      }, [active, isPlaying, duration, index, customProgress]);
       const isFilled = index < currentSlide;
       const isActive = index === currentSlide;
       const shouldShowProgress = isActive || style === "cumulative" && isFilled;
@@ -6367,7 +6410,7 @@ var init_Slider = __esm({
       };
       const renderProgressBar = () => {
         if (style === "modern" && isActive || style === "cumulative" && shouldShowProgress) {
-          const displayProgress = style === "cumulative" && isFilled ? 100 : progress;
+          const displayProgress = style === "cumulative" && isFilled ? 100 : customProgress !== null && customProgress !== void 0 ? customProgress : progress;
           return /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(
             "div",
             {

package/dist/server.mjs

@@ -2391,7 +2391,7 @@ var Pagination = dynamic13(() => import("./Pagination-V53JCR6P.mjs"), { ssr: tru
 var DataBindingControls = dynamic13(() => import("./DataBindingControls-UDRT7JFF.mjs"), {
   ssr: true
 });
-var Slider = dynamic13(() => import("./Slider-QIGKP6AE.mjs"), {
+var Slider = dynamic13(() => import("./Slider-UNNVADVP.mjs"), {
   ssr: false
 });
 function toCamelCase(str) {

package/package.json

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