@clyrex-digital/clyrex-controls-dev 0.8.1-dev.20260924080906 → 0.8.1-dev.20260924115534

package/dist/DataBindingControls-G5TRSVEU.mjs

@@ -0,0 +1,481 @@
+"use client";
+import {
+  InputControlType_default
+} from "./chunk-HRDHAIZF.mjs";
+import {
+  Button_default
+} from "./chunk-4WMSS6CE.mjs";
+import "./chunk-56HSDML5.mjs";
+
+// src/components/pageRenderingEngine/nodes/DataBindingControls.tsx
+import { useCallback, useEffect, useMemo, useState } from "react";
+import { useRouter, useSearchParams } from "next/navigation";
+
+// src/components/controls/edit/InputControl.tsx
+import dynamic from "next/dynamic";
+var InputControl = dynamic(() => import("./InputControlClient-NHXG4QBU.mjs"), {
+  ssr: false
+});
+var InputControl_default = InputControl;
+
+// src/components/pageRenderingEngine/nodes/DataBindingControls.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var humanize = (value) => value.replace(/([a-z0-9])([A-Z])/g, "$1 $2").replace(/[_-]+/g, " ").trim();
+var escapeODataString = (value) => value.replace(/'/g, "''");
+var parseFacetSelections = (filter) => {
+  const selections = /* @__PURE__ */ new Map();
+  if (!filter || !filter.trim()) return selections;
+  const expression = /(?:^|[\s()]+(?:and[\s()]+)?)([\w./-]+)\s+eq\s+'((?:''|[^'])*)'/gi;
+  for (const match of filter.matchAll(expression)) {
+    if (match[1] && match[2] !== void 0) {
+      selections.set(match[1].trim(), match[2].replace(/''/g, "'"));
+    }
+  }
+  return selections;
+};
+var buildFacetFilter = (selections) => Array.from(selections.entries()).map(([field, value]) => `${field} eq '${escapeODataString(value)}'`).join(" and ");
+var parseODataSearch = (value) => {
+  if (!value) return "";
+  const trimmedValue = value.trim();
+  if (trimmedValue.startsWith("'") && trimmedValue.endsWith("'")) {
+    return trimmedValue.slice(1, -1).replace(/''/g, "'");
+  }
+  return trimmedValue;
+};
+var SearchIcon = ({ className = "" }) => /* @__PURE__ */ jsxs(
+  "svg",
+  {
+    "aria-hidden": "true",
+    className,
+    fill: "none",
+    viewBox: "0 0 24 24",
+    stroke: "currentColor",
+    strokeWidth: "2",
+    children: [
+      /* @__PURE__ */ jsx("circle", { cx: "11", cy: "11", r: "7" }),
+      /* @__PURE__ */ jsx("path", { strokeLinecap: "round", d: "m20 20-4-4" })
+    ]
+  }
+);
+var ResetIcon = ({ className = "" }) => /* @__PURE__ */ jsxs(
+  "svg",
+  {
+    "aria-hidden": "true",
+    className,
+    fill: "none",
+    viewBox: "0 0 24 24",
+    stroke: "currentColor",
+    strokeWidth: "2",
+    children: [
+      /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M4 4v6h6" }),
+      /* @__PURE__ */ jsx(
+        "path",
+        {
+          strokeLinecap: "round",
+          strokeLinejoin: "round",
+          d: "M5.5 15a8 8 0 1 0 .6-7.8L4 10"
+        }
+      )
+    ]
+  }
+);
+var FilterSlidersIcon = ({ className = "" }) => /* @__PURE__ */ jsxs(
+  "svg",
+  {
+    "aria-hidden": "true",
+    className,
+    fill: "none",
+    viewBox: "0 0 24 24",
+    stroke: "currentColor",
+    strokeWidth: "2",
+    children: [
+      /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M3 4h18M3 12h18M3 20h18" }),
+      /* @__PURE__ */ jsx("circle", { cx: "8", cy: "4", r: "2", fill: "currentColor" }),
+      /* @__PURE__ */ jsx("circle", { cx: "16", cy: "12", r: "2", fill: "currentColor" }),
+      /* @__PURE__ */ jsx("circle", { cx: "10", cy: "20", r: "2", fill: "currentColor" })
+    ]
+  }
+);
+var ChevronDownIcon = ({ className = "" }) => /* @__PURE__ */ jsx(
+  "svg",
+  {
+    "aria-hidden": "true",
+    className,
+    fill: "none",
+    viewBox: "0 0 24 24",
+    stroke: "currentColor",
+    strokeWidth: "2",
+    children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "m19 9-7 7-7-7" })
+  }
+);
+var CheckIcon = ({ className = "" }) => /* @__PURE__ */ jsx(
+  "svg",
+  {
+    "aria-hidden": "true",
+    className,
+    fill: "none",
+    viewBox: "0 0 24 24",
+    stroke: "currentColor",
+    strokeWidth: "2.5",
+    children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M5 13l4 4L19 7" })
+  }
+);
+var CloseIcon = ({ className = "" }) => /* @__PURE__ */ jsx(
+  "svg",
+  {
+    "aria-hidden": "true",
+    className,
+    fill: "none",
+    viewBox: "0 0 24 24",
+    stroke: "currentColor",
+    strokeWidth: "2",
+    children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M6 18L18 6M6 6l12 12" })
+  }
+);
+var normalizeSortOption = (option) => {
+  const direction = option.direction.trim();
+  return {
+    label: option.title || humanize(option.name),
+    value: [option.name, direction].filter(Boolean).join(" ")
+  };
+};
+var DataBindingControls = ({
+  path,
+  query,
+  facets,
+  sortOptions,
+  showFacets,
+  showSortOptions,
+  showSearchBar,
+  mode = "toolbar"
+}) => {
+  const router = useRouter();
+  const searchParams = useSearchParams();
+  const [collapsedCategories, setCollapsedCategories] = useState({});
+  const toggleCategory = (field) => {
+    setCollapsedCategories((prev) => ({
+      ...prev,
+      [field]: !prev[field]
+    }));
+  };
+  const searchParamsFilter = searchParams?.get("$filter") ?? searchParams?.get("filter");
+  const searchParamsSort = searchParams?.get("$orderby") ?? searchParams?.get("orderBy");
+  const searchParamsSearch = searchParams?.get("$search");
+  const currentFilter = searchParamsFilter !== void 0 && searchParamsFilter !== null ? searchParamsFilter : query?.["$filter"] ?? query?.filter ?? "";
+  const currentSort = searchParamsSort !== void 0 && searchParamsSort !== null ? searchParamsSort : query?.["$orderby"] ?? query?.orderBy ?? "";
+  const currentSearch = parseODataSearch(
+    searchParamsSearch !== void 0 && searchParamsSearch !== null ? searchParamsSearch : query?.["$search"]
+  );
+  const [searchText, setSearchText] = useState(currentSearch);
+  useEffect(() => {
+    setSearchText(currentSearch);
+  }, [currentSearch]);
+  const selectedFacetValues = useMemo(
+    () => parseFacetSelections(currentFilter),
+    [currentFilter]
+  );
+  const activeFacets = useMemo(() => {
+    if (!facets) return [];
+    return Object.entries(facets).map(([field, values]) => {
+      if (!Array.isArray(values)) return null;
+      const filteredValues = values.filter(
+        (item) => item.count > 0 || selectedFacetValues.get(field) === item.value
+      );
+      if (filteredValues.length === 0) return null;
+      return [field, filteredValues];
+    }).filter((group) => group !== null);
+  }, [facets, selectedFacetValues]);
+  const normalizedSortOptions = (sortOptions ?? []).filter((option) => option?.name && option?.direction).map(normalizeSortOption).filter((option) => option.value);
+  const getQueryUrl = useCallback(
+    (updates) => {
+      const initialParams = searchParams ? searchParams.toString() : "";
+      const params = new URLSearchParams(initialParams || query || {});
+      Object.entries(updates).forEach(([key, value]) => {
+        if (value) {
+          params.set(key, value);
+        } else {
+          params.delete(key);
+        }
+      });
+      params.delete("$skip");
+      params.delete("skip");
+      const queryString = Array.from(params.entries()).map(
+        ([key, value]) => key === "$filter" || key === "filter" ? `${key}=${encodeURIComponent(value)}` : `${key}=${value}`
+      ).join("&");
+      return queryString ? `${path}?${queryString}` : path;
+    },
+    [path, query, searchParams]
+  );
+  const navigateWithoutReload = useCallback(
+    (url) => {
+      if (typeof window !== "undefined") {
+        const targetUrl = new URL(url, window.location.origin);
+        if (targetUrl.pathname === window.location.pathname && targetUrl.search === window.location.search) {
+          return;
+        }
+      }
+      router.push(url, { scroll: false });
+    },
+    [router]
+  );
+  const getFacetUrl = (field, value) => {
+    const updatedSelections = new Map(selectedFacetValues);
+    if (value) {
+      if (updatedSelections.get(field) === value) {
+        updatedSelections.delete(field);
+      } else {
+        updatedSelections.set(field, value);
+      }
+    } else {
+      updatedSelections.delete(field);
+    }
+    const updatedFilter = buildFacetFilter(updatedSelections);
+    return getQueryUrl({
+      $filter: updatedFilter || void 0,
+      filter: void 0
+    });
+  };
+  const clearFacetField = (field) => {
+    const updatedSelections = new Map(selectedFacetValues);
+    updatedSelections.delete(field);
+    const updatedFilter = buildFacetFilter(updatedSelections);
+    navigateWithoutReload(
+      getQueryUrl({
+        $filter: updatedFilter || void 0,
+        filter: void 0
+      })
+    );
+  };
+  const handleSearch = useCallback(async () => {
+    const trimmedSearchText = searchText.trim();
+    if (trimmedSearchText === currentSearch.trim()) {
+      return { isSuccessful: true };
+    }
+    navigateWithoutReload(
+      getQueryUrl({
+        "$search": trimmedSearchText || void 0
+      })
+    );
+    return { isSuccessful: true };
+  }, [currentSearch, getQueryUrl, navigateWithoutReload, searchText]);
+  const handleClearAll = useCallback(async () => {
+    navigateWithoutReload(
+      getQueryUrl({
+        $filter: void 0,
+        filter: void 0,
+        $orderby: void 0,
+        orderBy: void 0
+      })
+    );
+    return { isSuccessful: true };
+  }, [getQueryUrl, navigateWithoutReload]);
+  const hasFacetControls = showFacets && activeFacets.length > 0;
+  const hasSortControls = showSortOptions && normalizedSortOptions.length > 0;
+  const hasActiveFiltersOrSort = Boolean(
+    currentFilter.trim() || currentSort.trim()
+  );
+  const selectedFacetCount = selectedFacetValues.size;
+  const shouldShowToolbarClearAll = hasActiveFiltersOrSort && !hasFacetControls;
+  const shouldShowToolbar = mode === "toolbar" && (showSearchBar || hasSortControls || shouldShowToolbarClearAll);
+  const shouldShowFacets = mode === "facets" && hasFacetControls;
+  if (!shouldShowToolbar && !shouldShowFacets) {
+    return null;
+  }
+  const renderFacetItems = (field, values) => /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-1 pt-1 pb-1", children: values.map((facet) => {
+    const isSelected = selectedFacetValues.get(field) === facet.value;
+    return /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        onClick: () => navigateWithoutReload(getFacetUrl(field, facet.value)),
+        "aria-pressed": isSelected,
+        className: `group flex w-full cursor-pointer items-center justify-between gap-2.5 rounded-md px-2 py-1.5 text-left text-sm transition-all duration-150 ease-out focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-primary-base ${isSelected ? "bg-neutral-soft font-medium border " : "hover:bg-neutral-weak border border-transparent"}`,
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 items-center gap-2.5", children: [
+            /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: `flex h-4 w-4 shrink-0 items-center justify-center rounded-[3px] border transition-colors duration-150 ${isSelected ? "bg-primary-base border-primary-base" : " group-hover:border-neutral-strong bg-default"}`,
+                children: isSelected && /* @__PURE__ */ jsx(CheckIcon, { className: "h-3 w-3" })
+              }
+            ),
+            /* @__PURE__ */ jsx("span", { className: "leading-snug break-words", children: facet.value })
+          ] }),
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: `shrink-0 rounded px-1.5 py-0.5 text-xs transition-colors ml-2 ${isSelected ? "bg-neutral-weak font-semibold" : "bg-neutral-weak font-normal"}`,
+              children: facet.count
+            }
+          )
+        ]
+      },
+      `${field}-${facet.value}`
+    );
+  }) });
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: mode === "toolbar" ? "my-6" : "flex flex-col rounded-md border  bg-default p-3.5 shadow-sm",
+      children: [
+        shouldShowToolbar && /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-3 md:flex-row md:items-center md:justify-between", children: [
+          showSearchBar && // <form
+          //   role="search"
+          //   className="flex w-full flex-col gap-3 rounded-md border border-info bg-info-soft p-3 sm:flex-row sm:items-center md:min-w-0 md:flex-1"
+          //   onSubmit={(event) => {
+          //     event.preventDefault();
+          //     void handleSearch();
+          //   }}
+          // >
+          /* @__PURE__ */ jsxs(
+            "form",
+            {
+              role: "search",
+              className: "flex w-full flex-col gap-3 rounded-md sm:flex-row sm:items-center md:min-w-0 md:flex-1",
+              onSubmit: (event) => {
+                event.preventDefault();
+                void handleSearch();
+              },
+              children: [
+                /* @__PURE__ */ jsxs("div", { className: "relative bg-default rounded-md min-w-0 flex-1", children: [
+                  /* @__PURE__ */ jsx(SearchIcon, { className: "pointer-events-none absolute left-4 top-1/2 z-10 h-5 w-5 -translate-y-1/2" }),
+                  /* @__PURE__ */ jsx(
+                    InputControl_default,
+                    {
+                      name: "searchText",
+                      controlType: InputControlType_default.lineTextInput,
+                      value: searchText,
+                      callback: (updatedValues) => setSearchText(updatedValues.value),
+                      attributes: {
+                        placeholder: "Search discussions, topics, or keywords..."
+                      },
+                      inputClasses: "!mt-0 !rounded-md !py-3 !pl-11 !pr-4 !shadow-sm"
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ jsxs(
+                  Button_default,
+                  {
+                    ButtonType: "Primary" /* Solid */,
+                    onClick: handleSearch,
+                    className: "!rounded-md !px-6 !py-3 sm:self-stretch",
+                    children: [
+                      /* @__PURE__ */ jsx(SearchIcon, { className: "h-5 w-5" }),
+                      /* @__PURE__ */ jsx("span", { children: "Search" })
+                    ]
+                  }
+                )
+              ]
+            }
+          ),
+          hasSortControls && /* @__PURE__ */ jsxs("div", { className: "flex w-full items-center gap-3 rounded-md border border-info bg-info-soft p-3 text-sm md:ml-auto md:w-auto md:min-w-72 md:self-stretch", children: [
+            /* @__PURE__ */ jsx(
+              "label",
+              {
+                htmlFor: "sortOptions",
+                className: "shrink-0 whitespace-nowrap font-medium",
+                children: "Sort by"
+              }
+            ),
+            /* @__PURE__ */ jsx("div", { className: "min-w-0 flex-1 rounded-md bg-default md:min-w-48", children: /* @__PURE__ */ jsx(
+              InputControl_default,
+              {
+                name: "sortOptions",
+                controlType: InputControlType_default.select,
+                value: currentSort,
+                dataset: normalizedSortOptions,
+                dataKeyFieldName: "value",
+                dataTextFieldName: "label",
+                callback: (updatedValues) => {
+                  const updatedSort = updatedValues.value || "";
+                  navigateWithoutReload(
+                    getQueryUrl({
+                      $orderby: updatedSort || void 0,
+                      orderBy: void 0
+                    })
+                  );
+                },
+                attributes: { placeholder: "Default" },
+                inputClasses: "!mt-0 !rounded-md !border-info !bg-default !px-4 !py-3 !shadow-sm focus:!border-primary focus:!ring-primary-base"
+              }
+            ) })
+          ] })
+        ] }),
+        shouldShowFacets && /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-3", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between border-b  pb-3", children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+              /* @__PURE__ */ jsx(FilterSlidersIcon, { className: "h-4 w-4" }),
+              /* @__PURE__ */ jsx("h2", { className: "text-base font-semibold tracking-tight", children: "Filters" }),
+              selectedFacetCount > 0 && /* @__PURE__ */ jsx("span", { className: "flex h-5 items-center justify-center rounded-full bg-primary-base px-2 text-xs font-semibold", children: selectedFacetCount })
+            ] }),
+            hasActiveFiltersOrSort && /* @__PURE__ */ jsxs(
+              "button",
+              {
+                type: "button",
+                onClick: () => void handleClearAll(),
+                className: "group inline-flex cursor-pointer items-center gap-1.5 rounded-md px-2 py-1 text-xs font-medium transition-colors duration-150 hover:bg-neutral-soft focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-primary-base",
+                "aria-label": "Clear all filters and sorting",
+                children: [
+                  /* @__PURE__ */ jsx(ResetIcon, { className: "h-3.5 w-3.5 transition-transform duration-200 group-hover:-rotate-45" }),
+                  /* @__PURE__ */ jsx("span", { children: "Clear all" })
+                ]
+              }
+            )
+          ] }),
+          selectedFacetCount > 0 && /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-1.5 pb-2.5 border-b ", children: Array.from(selectedFacetValues.entries()).map(([field, value]) => /* @__PURE__ */ jsxs(
+            "button",
+            {
+              type: "button",
+              onClick: () => clearFacetField(field),
+              className: "group inline-flex max-w-full cursor-pointer items-center gap-1.5 rounded-md border bg-neutral-weak px-2.5 py-1 text-xs transition-colors hover:bg-neutral-soft",
+              title: `Remove filter: ${value}`,
+              children: [
+                /* @__PURE__ */ jsx("span", { className: "font-medium truncate max-w-[150px]", children: value }),
+                /* @__PURE__ */ jsx(CloseIcon, { className: "h-3.5 w-3.5 shrink-0 opacity-60 group-hover:opacity-100" })
+              ]
+            },
+            `chip-${field}`
+          )) }),
+          activeFacets.length === 1 && /* @__PURE__ */ jsx("nav", { "aria-label": `${humanize(activeFacets[0][0])} filters`, children: /* @__PURE__ */ jsxs("div", { className: "py-1", children: [
+            /* @__PURE__ */ jsx("div", { className: "px-1 pb-2 font-medium text-sm", children: humanize(activeFacets[0][0]) }),
+            renderFacetItems(activeFacets[0][0], activeFacets[0][1])
+          ] }) }),
+          activeFacets.length > 1 && /* @__PURE__ */ jsx("div", { className: "flex flex-col divide-y divide-neutral-soft", children: activeFacets.map(([field, values]) => {
+            const isOpen = !collapsedCategories[field];
+            return /* @__PURE__ */ jsxs(
+              "div",
+              {
+                className: "py-2 first:pt-0 last:pb-0",
+                children: [
+                  /* @__PURE__ */ jsxs(
+                    "button",
+                    {
+                      type: "button",
+                      onClick: () => toggleCategory(field),
+                      className: "flex w-full cursor-pointer items-center justify-between rounded-md px-1.5 py-1.5 text-sm font-semibold transition-colors duration-150 hover:bg-neutral-weak focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-primary-base",
+                      children: [
+                        /* @__PURE__ */ jsx("span", { children: humanize(field) }),
+                        /* @__PURE__ */ jsx(
+                          ChevronDownIcon,
+                          {
+                            className: `h-4 w-4 transition-transform duration-200 ease-out ${isOpen ? "rotate-180" : ""}`
+                          }
+                        )
+                      ]
+                    }
+                  ),
+                  isOpen && /* @__PURE__ */ jsx("div", { className: "pt-1", children: renderFacetItems(field, values) })
+                ]
+              },
+              field
+            );
+          }) })
+        ] })
+      ]
+    }
+  );
+};
+var DataBindingControls_default = DataBindingControls;
+export {
+  DataBindingControls_default as default
+};

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

@@ -34,6 +34,7 @@ var Slider = ({
   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);
@@ -58,28 +59,36 @@ var Slider = ({
     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)) {
+        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(() => {
@@ -178,7 +187,8 @@ var Slider = ({
         activeClassName: dotActiveClassName,
         inactiveClassName: dotInactiveClassName,
         currentSlide,
-        totalSlides
+        totalSlides,
+        customProgress: index === currentSlide ? videoProgress : null
       },
       index
     )) }),
@@ -238,7 +248,8 @@ var Slider = ({
         activeClassName: dotActiveClassName,
         inactiveClassName: dotInactiveClassName,
         currentSlide,
-        totalSlides
+        totalSlides,
+        customProgress: index === currentSlide ? videoProgress : null
       },
       index
     )) })
@@ -274,7 +285,8 @@ var ProgressPill = ({
   activeClassName = "",
   inactiveClassName = "",
   currentSlide,
-  totalSlides
+  totalSlides,
+  customProgress = null
 }) => {
   const [progress, setProgress] = useState(0);
   useEffect(() => {
@@ -283,7 +295,7 @@ var ProgressPill = ({
     }
   }, [active, index]);
   useEffect(() => {
-    if (!active || !isPlaying) {
+    if (!active || !isPlaying || customProgress !== null) {
       if (!active) {
         setProgress(0);
       }
@@ -301,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;
@@ -336,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-3JMZZWGT.mjs → Slider-UNNVADVP.mjs}

@@ -32,6 +32,7 @@ var Slider = ({
   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);
@@ -56,28 +57,36 @@ var Slider = ({
     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)) {
+        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(() => {
@@ -176,7 +185,8 @@ var Slider = ({
         activeClassName: dotActiveClassName,
         inactiveClassName: dotInactiveClassName,
         currentSlide,
-        totalSlides
+        totalSlides,
+        customProgress: index === currentSlide ? videoProgress : null
       },
       index
     )) }),
@@ -236,7 +246,8 @@ var Slider = ({
         activeClassName: dotActiveClassName,
         inactiveClassName: dotInactiveClassName,
         currentSlide,
-        totalSlides
+        totalSlides,
+        customProgress: index === currentSlide ? videoProgress : null
       },
       index
     )) })
@@ -272,7 +283,8 @@ var ProgressPill = ({
   activeClassName = "",
   inactiveClassName = "",
   currentSlide,
-  totalSlides
+  totalSlides,
+  customProgress = null
 }) => {
   const [progress, setProgress] = useState(0);
   useEffect(() => {
@@ -281,7 +293,7 @@ var ProgressPill = ({
     }
   }, [active, index]);
   useEffect(() => {
-    if (!active || !isPlaying) {
+    if (!active || !isPlaying || customProgress !== null) {
       if (!active) {
         setProgress(0);
       }
@@ -299,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;
@@ -334,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",
         {