@acoustte-digital-services/digitalstore-controls-dev 0.8.1-dev.20260704091052 → 0.8.1-dev.20260706110649

package/dist/Slider-554BKC7N.mjs

@@ -0,0 +1,322 @@
+"use client";
+
+"use client";
+
+// src/components/Slider.tsx
+import React, { useState, useEffect, Children, cloneElement } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var Slider = ({
+  children,
+  slidesToShow = 4,
+  infinite_scroll = false,
+  autoplay = false,
+  autoplay_speed = 3e3,
+  show_arrows = false,
+  show_dots = false,
+  scaleOnHover = false,
+  className = "",
+  arrowClassName = "bg-black/50 hover:bg-black/80 text-white rounded-full w-10 h-10 flex items-center justify-center",
+  dotActiveClassName = "bg-gray-300",
+  dotInactiveClassName = "bg-gray-600",
+  gap,
+  pillStyle = "cumulative",
+  progressPosition = "bottom"
+}) => {
+  const [currentSlide, setCurrentSlide] = useState(0);
+  const [transition, setTransition] = useState(true);
+  const [slidesToShowState, setSlidesToShowState] = useState(
+    typeof slidesToShow === "number" ? slidesToShow : slidesToShow.large
+  );
+  const [isPlaying, setIsPlaying] = useState(autoplay);
+  useEffect(() => {
+    if (typeof slidesToShow === "number") return;
+    const handleResize = () => {
+      if (window.innerWidth >= 1024) {
+        setSlidesToShowState(slidesToShow.large);
+      } else if (window.innerWidth >= 768) {
+        setSlidesToShowState(slidesToShow.medium);
+      } else {
+        setSlidesToShowState(slidesToShow.small);
+      }
+    };
+    handleResize();
+    window.addEventListener("resize", handleResize);
+    return () => window.removeEventListener("resize", handleResize);
+  }, [slidesToShow]);
+  useEffect(() => {
+    if (!autoplay) return;
+    const timer = setInterval(() => {
+      if (isPlaying) {
+        nextSlide();
+      }
+    }, autoplay_speed);
+    return () => clearInterval(timer);
+  }, [autoplay, autoplay_speed, currentSlide, isPlaying]);
+  const totalSlides = Children.count(children);
+  const maxSlide = totalSlides - slidesToShowState;
+  const nextSlide = () => {
+    if (currentSlide >= maxSlide) {
+      if (infinite_scroll) {
+        setTransition(true);
+        setCurrentSlide(0);
+      }
+    } else {
+      setTransition(true);
+      setCurrentSlide(currentSlide + 1);
+    }
+  };
+  const prevSlide = () => {
+    if (currentSlide <= 0) {
+      if (infinite_scroll) {
+        setTransition(true);
+        setCurrentSlide(maxSlide);
+      }
+    } else {
+      setTransition(true);
+      setCurrentSlide(currentSlide - 1);
+    }
+  };
+  const goToSlide = (index) => {
+    setTransition(true);
+    setCurrentSlide(index);
+  };
+  const handlePillClick = (index) => {
+    goToSlide(index);
+    if (autoplay) {
+      setIsPlaying(true);
+    }
+  };
+  const handleMouseEnter = () => {
+    if (autoplay) {
+      setIsPlaying(false);
+    }
+  };
+  const handleMouseLeave = () => {
+    if (autoplay) {
+      setIsPlaying(true);
+    }
+  };
+  const translateX = -currentSlide * (100 / slidesToShowState);
+  const slides = Children.map(children, (child, index) => {
+    if (!React.isValidElement(child)) return null;
+    const childProps = child.props;
+    const mergedClassName = `${childProps.className ?? ""} w-full`.trim();
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: `flex-none ${scaleOnHover ? "group hover:z-50" : ""} relative`,
+        style: { width: `calc(${100 / slidesToShowState}%)`, paddingRight: gap },
+        children: cloneElement(child, {
+          className: mergedClassName
+        })
+      },
+      index
+    );
+  });
+  const getProgressPositionClass = () => {
+    switch (progressPosition) {
+      case "top":
+        return "top-4";
+      case "bottom-outside":
+        return "bottom-4 translate-y-full mt-4";
+      case "bottom":
+      default:
+        return "bottom-4";
+    }
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: `relative w-full overflow-hidden ${className}`,
+      onMouseEnter: handleMouseEnter,
+      onMouseLeave: handleMouseLeave,
+      children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "flex h-full",
+            style: {
+              transition: transition ? "transform 0.5s ease" : "none",
+              transform: `translateX(${translateX}%)`
+            },
+            children: slides
+          }
+        ),
+        show_arrows && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(
+            ArrowButton,
+            {
+              direction: "left",
+              onClick: prevSlide,
+              visible: infinite_scroll || currentSlide > 0,
+              className: arrowClassName,
+              children: /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", strokeWidth: 1.5, stroke: "currentColor", className: "w-6 h-6", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M15.75 19.5 8.25 12l7.5-7.5" }) })
+            }
+          ),
+          /* @__PURE__ */ jsxs(
+            ArrowButton,
+            {
+              direction: "right",
+              onClick: nextSlide,
+              visible: infinite_scroll || currentSlide < maxSlide,
+              className: arrowClassName,
+              children: [
+                /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", strokeWidth: 1.5, stroke: "currentColor", className: "w-6 h-6", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "m8.25 4.5 7.5 7.5-7.5 7.5" }) }),
+                "          "
+              ]
+            }
+          )
+        ] }),
+        show_dots && /* @__PURE__ */ jsx("div", { className: `absolute left-1/2 -translate-x-1/2 flex justify-center space-x-1.5 ${getProgressPositionClass()}`, children: Array.from({ length: totalSlides }).map((_, index) => /* @__PURE__ */ jsx(
+          ProgressPill,
+          {
+            active: index === currentSlide,
+            duration: autoplay_speed,
+            index,
+            onClick: () => handlePillClick(index),
+            isPlaying: isPlaying && index === currentSlide && autoplay,
+            style: pillStyle,
+            activeClassName: dotActiveClassName,
+            inactiveClassName: dotInactiveClassName,
+            currentSlide,
+            totalSlides
+          },
+          index
+        )) })
+      ]
+    }
+  );
+};
+var ArrowButton = ({
+  direction,
+  onClick,
+  visible,
+  children,
+  className = ""
+}) => /* @__PURE__ */ jsx(
+  "button",
+  {
+    className: `
+      absolute top-1/2 -translate-y-1/2 z-10
+      ${direction === "left" ? "left-2.5" : "right-2.5"}
+      ${!visible && "hidden"}
+      ${className}
+    `,
+    onClick,
+    "aria-label": direction === "left" ? "Previous slide" : "Next slide",
+    children
+  }
+);
+var ProgressPill = ({
+  active,
+  duration,
+  index,
+  onClick,
+  isPlaying,
+  style = "modern",
+  activeClassName = "",
+  inactiveClassName = "",
+  currentSlide,
+  totalSlides
+}) => {
+  const [progress, setProgress] = useState(0);
+  useEffect(() => {
+    if (active) {
+      setProgress(0);
+    }
+  }, [active, index]);
+  useEffect(() => {
+    if (!active || !isPlaying) {
+      if (!active) {
+        setProgress(0);
+      }
+      return;
+    }
+    const startTime = Date.now();
+    const interval = setInterval(() => {
+      const elapsed = Date.now() - startTime;
+      const newProgress = elapsed / duration * 100;
+      if (newProgress >= 100) {
+        setProgress(100);
+        clearInterval(interval);
+      } else {
+        setProgress(newProgress);
+      }
+    }, 50);
+    return () => clearInterval(interval);
+  }, [active, isPlaying, duration, index]);
+  const isFilled = index < currentSlide;
+  const isActive = index === currentSlide;
+  const shouldShowProgress = isActive || style === "cumulative" && isFilled;
+  const baseClasses = "cursor-pointer transition-all duration-300 ease-out";
+  const getStyleClasses = () => {
+    switch (style) {
+      case "minimal":
+        return `
+          ${isActive ? "w-8" : "w-2"} h-2 rounded-full
+          ${isActive ? activeClassName || "bg-white" : inactiveClassName || "bg-white/50"}
+          hover:scale-110
+        `;
+      case "cumulative":
+        return `
+          w-4 h-1 rounded-full overflow-hidden relative
+          ${isFilled ? activeClassName || "bg-white" : inactiveClassName || "bg-white/30"}
+        `;
+      case "modern":
+        return `
+          w-8 h-1.5 rounded-full overflow-hidden relative
+          ${isActive ? inactiveClassName || "bg-white/30" : inactiveClassName || "bg-white/30"}
+          hover:h-2
+        `;
+      case "default":
+      default:
+        return `
+          w-6 h-1.5 rounded-full
+          ${isActive ? activeClassName || "bg-white" : inactiveClassName || "bg-white/50"}
+          hover:w-8
+        `;
+    }
+  };
+  const renderProgressBar = () => {
+    if (style === "modern" && isActive || style === "cumulative" && shouldShowProgress) {
+      const displayProgress = style === "cumulative" && isFilled ? 100 : 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`,
+          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(
+    "button",
+    {
+      className: `${baseClasses} ${getStyleClasses()}`,
+      onClick,
+      "aria-label": `Go to slide ${index + 1}`,
+      "aria-current": isActive ? "true" : "false",
+      children: [
+        renderProgressBar(),
+        renderCumulativeFill()
+      ]
+    }
+  );
+};
+var Slider_default = Slider;
+export {
+  Slider_default as default
+};

package/dist/Slider-PEIVH6A5.mjs

@@ -0,0 +1,320 @@
+"use client";
+
+// src/components/Slider.tsx
+import React, { useState, useEffect, Children, cloneElement } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var Slider = ({
+  children,
+  slidesToShow = 4,
+  infinite_scroll = false,
+  autoplay = false,
+  autoplay_speed = 3e3,
+  show_arrows = false,
+  show_dots = false,
+  scaleOnHover = false,
+  className = "",
+  arrowClassName = "bg-black/50 hover:bg-black/80 text-white rounded-full w-10 h-10 flex items-center justify-center",
+  dotActiveClassName = "bg-gray-300",
+  dotInactiveClassName = "bg-gray-600",
+  gap,
+  pillStyle = "cumulative",
+  progressPosition = "bottom"
+}) => {
+  const [currentSlide, setCurrentSlide] = useState(0);
+  const [transition, setTransition] = useState(true);
+  const [slidesToShowState, setSlidesToShowState] = useState(
+    typeof slidesToShow === "number" ? slidesToShow : slidesToShow.large
+  );
+  const [isPlaying, setIsPlaying] = useState(autoplay);
+  useEffect(() => {
+    if (typeof slidesToShow === "number") return;
+    const handleResize = () => {
+      if (window.innerWidth >= 1024) {
+        setSlidesToShowState(slidesToShow.large);
+      } else if (window.innerWidth >= 768) {
+        setSlidesToShowState(slidesToShow.medium);
+      } else {
+        setSlidesToShowState(slidesToShow.small);
+      }
+    };
+    handleResize();
+    window.addEventListener("resize", handleResize);
+    return () => window.removeEventListener("resize", handleResize);
+  }, [slidesToShow]);
+  useEffect(() => {
+    if (!autoplay) return;
+    const timer = setInterval(() => {
+      if (isPlaying) {
+        nextSlide();
+      }
+    }, autoplay_speed);
+    return () => clearInterval(timer);
+  }, [autoplay, autoplay_speed, currentSlide, isPlaying]);
+  const totalSlides = Children.count(children);
+  const maxSlide = totalSlides - slidesToShowState;
+  const nextSlide = () => {
+    if (currentSlide >= maxSlide) {
+      if (infinite_scroll) {
+        setTransition(true);
+        setCurrentSlide(0);
+      }
+    } else {
+      setTransition(true);
+      setCurrentSlide(currentSlide + 1);
+    }
+  };
+  const prevSlide = () => {
+    if (currentSlide <= 0) {
+      if (infinite_scroll) {
+        setTransition(true);
+        setCurrentSlide(maxSlide);
+      }
+    } else {
+      setTransition(true);
+      setCurrentSlide(currentSlide - 1);
+    }
+  };
+  const goToSlide = (index) => {
+    setTransition(true);
+    setCurrentSlide(index);
+  };
+  const handlePillClick = (index) => {
+    goToSlide(index);
+    if (autoplay) {
+      setIsPlaying(true);
+    }
+  };
+  const handleMouseEnter = () => {
+    if (autoplay) {
+      setIsPlaying(false);
+    }
+  };
+  const handleMouseLeave = () => {
+    if (autoplay) {
+      setIsPlaying(true);
+    }
+  };
+  const translateX = -currentSlide * (100 / slidesToShowState);
+  const slides = Children.map(children, (child, index) => {
+    if (!React.isValidElement(child)) return null;
+    const childProps = child.props;
+    const mergedClassName = `${childProps.className ?? ""} w-full`.trim();
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: `flex-none ${scaleOnHover ? "group hover:z-50" : ""} relative`,
+        style: { width: `calc(${100 / slidesToShowState}%)`, paddingRight: gap },
+        children: cloneElement(child, {
+          className: mergedClassName
+        })
+      },
+      index
+    );
+  });
+  const getProgressPositionClass = () => {
+    switch (progressPosition) {
+      case "top":
+        return "top-4";
+      case "bottom-outside":
+        return "bottom-4 translate-y-full mt-4";
+      case "bottom":
+      default:
+        return "bottom-4";
+    }
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: `relative w-full overflow-hidden ${className}`,
+      onMouseEnter: handleMouseEnter,
+      onMouseLeave: handleMouseLeave,
+      children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "flex h-full",
+            style: {
+              transition: transition ? "transform 0.5s ease" : "none",
+              transform: `translateX(${translateX}%)`
+            },
+            children: slides
+          }
+        ),
+        show_arrows && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(
+            ArrowButton,
+            {
+              direction: "left",
+              onClick: prevSlide,
+              visible: infinite_scroll || currentSlide > 0,
+              className: arrowClassName,
+              children: /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", strokeWidth: 1.5, stroke: "currentColor", className: "w-6 h-6", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M15.75 19.5 8.25 12l7.5-7.5" }) })
+            }
+          ),
+          /* @__PURE__ */ jsxs(
+            ArrowButton,
+            {
+              direction: "right",
+              onClick: nextSlide,
+              visible: infinite_scroll || currentSlide < maxSlide,
+              className: arrowClassName,
+              children: [
+                /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", strokeWidth: 1.5, stroke: "currentColor", className: "w-6 h-6", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "m8.25 4.5 7.5 7.5-7.5 7.5" }) }),
+                "          "
+              ]
+            }
+          )
+        ] }),
+        show_dots && /* @__PURE__ */ jsx("div", { className: `absolute left-1/2 -translate-x-1/2 flex justify-center space-x-1.5 ${getProgressPositionClass()}`, children: Array.from({ length: totalSlides }).map((_, index) => /* @__PURE__ */ jsx(
+          ProgressPill,
+          {
+            active: index === currentSlide,
+            duration: autoplay_speed,
+            index,
+            onClick: () => handlePillClick(index),
+            isPlaying: isPlaying && index === currentSlide && autoplay,
+            style: pillStyle,
+            activeClassName: dotActiveClassName,
+            inactiveClassName: dotInactiveClassName,
+            currentSlide,
+            totalSlides
+          },
+          index
+        )) })
+      ]
+    }
+  );
+};
+var ArrowButton = ({
+  direction,
+  onClick,
+  visible,
+  children,
+  className = ""
+}) => /* @__PURE__ */ jsx(
+  "button",
+  {
+    className: `
+      absolute top-1/2 -translate-y-1/2 z-10
+      ${direction === "left" ? "left-2.5" : "right-2.5"}
+      ${!visible && "hidden"}
+      ${className}
+    `,
+    onClick,
+    "aria-label": direction === "left" ? "Previous slide" : "Next slide",
+    children
+  }
+);
+var ProgressPill = ({
+  active,
+  duration,
+  index,
+  onClick,
+  isPlaying,
+  style = "modern",
+  activeClassName = "",
+  inactiveClassName = "",
+  currentSlide,
+  totalSlides
+}) => {
+  const [progress, setProgress] = useState(0);
+  useEffect(() => {
+    if (active) {
+      setProgress(0);
+    }
+  }, [active, index]);
+  useEffect(() => {
+    if (!active || !isPlaying) {
+      if (!active) {
+        setProgress(0);
+      }
+      return;
+    }
+    const startTime = Date.now();
+    const interval = setInterval(() => {
+      const elapsed = Date.now() - startTime;
+      const newProgress = elapsed / duration * 100;
+      if (newProgress >= 100) {
+        setProgress(100);
+        clearInterval(interval);
+      } else {
+        setProgress(newProgress);
+      }
+    }, 50);
+    return () => clearInterval(interval);
+  }, [active, isPlaying, duration, index]);
+  const isFilled = index < currentSlide;
+  const isActive = index === currentSlide;
+  const shouldShowProgress = isActive || style === "cumulative" && isFilled;
+  const baseClasses = "cursor-pointer transition-all duration-300 ease-out";
+  const getStyleClasses = () => {
+    switch (style) {
+      case "minimal":
+        return `
+          ${isActive ? "w-8" : "w-2"} h-2 rounded-full
+          ${isActive ? activeClassName || "bg-white" : inactiveClassName || "bg-white/50"}
+          hover:scale-110
+        `;
+      case "cumulative":
+        return `
+          w-4 h-1 rounded-full overflow-hidden relative
+          ${isFilled ? activeClassName || "bg-white" : inactiveClassName || "bg-white/30"}
+        `;
+      case "modern":
+        return `
+          w-8 h-1.5 rounded-full overflow-hidden relative
+          ${isActive ? inactiveClassName || "bg-white/30" : inactiveClassName || "bg-white/30"}
+          hover:h-2
+        `;
+      case "default":
+      default:
+        return `
+          w-6 h-1.5 rounded-full
+          ${isActive ? activeClassName || "bg-white" : inactiveClassName || "bg-white/50"}
+          hover:w-8
+        `;
+    }
+  };
+  const renderProgressBar = () => {
+    if (style === "modern" && isActive || style === "cumulative" && shouldShowProgress) {
+      const displayProgress = style === "cumulative" && isFilled ? 100 : 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`,
+          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(
+    "button",
+    {
+      className: `${baseClasses} ${getStyleClasses()}`,
+      onClick,
+      "aria-label": `Go to slide ${index + 1}`,
+      "aria-current": isActive ? "true" : "false",
+      children: [
+        renderProgressBar(),
+        renderCumulativeFill()
+      ]
+    }
+  );
+};
+var Slider_default = Slider;
+export {
+  Slider_default as default
+};