meticulous-ui 3.7.11 → 3.7.13

package/components/Carousel/Carousel.js

@@ -1,9 +1,9 @@
-import { jsxs, jsx } from "react/jsx-runtime";
-import { useState, useRef, useEffect } from "react";
-import ChevronLeft from "../Icons/ChevronLeft.js";
-import ChevronRight from "../Icons/ChevronRight.js";
-import styled, { keyframes } from "styled-components";
-const Wrapper = /*@__PURE__*/styled.div`
+import { jsxs as C, jsx as r } from "react/jsx-runtime";
+import { useState as l, useRef as I, useEffect as T } from "react";
+import pe from "../Icons/ChevronLeft.js";
+import be from "../Icons/ChevronRight.js";
+import o, { keyframes as ge } from "styled-components";
+const xe = o.div`
   position: relative;
   display: flex;
   flex-direction: column;
@@ -11,52 +11,36 @@ const Wrapper = /*@__PURE__*/styled.div`
   width: 100%;
   gap: 12px;
   outline: none;
-`;
-const SlideArea = /*@__PURE__*/styled.div`
+`, me = o.div`
   position: relative;
   width: 100%;
-`;
-const SlideViewport = /*@__PURE__*/styled.div`
+`, ve = o.div`
   overflow: hidden;
   width: 100%;
   outline: none;
-  cursor: ${({
-  $draggable
-}) => $draggable ? "grab" : "default"};
+  cursor: ${({ $draggable: t }) => t ? "grab" : "default"};
 
   &:active {
-    cursor: ${({
-  $draggable
-}) => $draggable ? "grabbing" : "default"};
+    cursor: ${({ $draggable: t }) => t ? "grabbing" : "default"};
   }
-`;
-const SlideTrack = /*@__PURE__*/styled.div`
+`, we = o.div`
   display: flex;
   width: 100%;
-  transform: translateX(${({
-  $translateX
-}) => $translateX}%);
-  transition: ${({
-  $dragging
-}) => $dragging ? "none" : "transform 0.35s ease"};
+  transform: translateX(${({ $translateX: t }) => t}%);
+  transition: ${({ $dragging: t }) => t ? "none" : "transform 0.35s ease"};
 
   @media (prefers-reduced-motion: reduce) {
     transition: none;
   }
 
   & > * {
-    flex: 0 0 ${({
-  $visibleSlides
-}) => 100 / $visibleSlides}%;
+    flex: 0 0 ${({ $visibleSlides: t }) => 100 / t}%;
     min-width: 0;
     box-sizing: border-box;
   }
-`;
-const NavButton = /*@__PURE__*/styled.button`
+`, J = o.button`
   position: absolute;
-  top: ${({
-  $arrowTop
-}) => $arrowTop != null ? $arrowTop : "50%"};
+  top: ${({ $arrowTop: t }) => t != null ? t : "50%"};
   transform: translateY(-50%);
   z-index: 1;
   display: flex;
@@ -74,10 +58,7 @@ const NavButton = /*@__PURE__*/styled.button`
     opacity 0.3s;
   padding: 0;
 
-  ${({
-  $direction,
-  $overlay
-}) => $direction === "prev" ? `left: ${$overlay ? "12px" : "-16px"};` : `right: ${$overlay ? "12px" : "-16px"};`}
+  ${({ $direction: t, $overlay: u }) => t === "prev" ? `left: ${u ? "12px" : "-16px"};` : `right: ${u ? "12px" : "-16px"};`}
 
   &:hover:not(:disabled) {
     background: #f5f5f5;
@@ -94,46 +75,33 @@ const NavButton = /*@__PURE__*/styled.button`
     border-color: #f9a8c0;
   }
 
-  ${({
-  $viewportFocused
-}) => $viewportFocused && `
+  ${({ $viewportFocused: t }) => t && `
     border-color: #bdbdbd;
   `}
 
-  ${({
-  $overlay,
-  $visible
-}) => $overlay && !$visible && `
+  ${({ $overlay: t, $visible: u }) => t && !u && `
     opacity: 0;
     pointer-events: none;
   `}
-`;
-const DotsWrapper = /*@__PURE__*/styled.div`
+`, $e = o.div`
   display: flex;
   gap: 6px;
   align-items: center;
-`;
-const Dot = /*@__PURE__*/styled.button`
-  width: ${({
-  $active
-}) => $active ? "20px" : "8px"};
+`, ke = o.button`
+  width: ${({ $active: t }) => t ? "20px" : "8px"};
   height: 8px;
   border-radius: 4px;
   border: none;
-  background: ${({
-  $active
-}) => $active ? "#333" : "#ccc"};
+  background: ${({ $active: t }) => t ? "#333" : "#ccc"};
   cursor: pointer;
   padding: 0;
   transition:
     width 0.2s ease,
     background 0.2s ease;
-`;
-const fillProgress = keyframes`
+`, ye = ge`
   from { width: 0%; }
   to { width: 100%; }
-`;
-const ProgressBar = /*@__PURE__*/styled.div`
+`, Me = o.div`
   width: 100%;
   height: 3px;
   background: #e0e0e0;
@@ -147,20 +115,15 @@ const ProgressBar = /*@__PURE__*/styled.div`
     inset: 0;
     width: 0%;
     background: #333;
-    animation: ${fillProgress} ${({
-  $duration
-}) => $duration}s linear forwards;
-    animation-play-state: ${({
-  $paused
-}) => $paused ? "paused" : "running"};
+    animation: ${ye} ${({ $duration: t }) => t}s linear forwards;
+    animation-play-state: ${({ $paused: t }) => t ? "paused" : "running"};
 
     @media (prefers-reduced-motion: reduce) {
       animation: none;
       width: 100%;
     }
   }
-`;
-const PauseButton = /*@__PURE__*/styled.button`
+`, Ee = o.button`
   position: absolute;
   bottom: 8px;
   right: 8px;
@@ -187,186 +150,192 @@ const PauseButton = /*@__PURE__*/styled.button`
     outline: 2px solid #fff;
     outline-offset: 2px;
   }
-`;
-const SWIPE_THRESHOLD = 50;
-const ARROW_HIDE_DELAY = 2e3;
-const PauseIcon = () => /* @__PURE__ */ jsxs("svg", { width: 12, height: 12, viewBox: "0 0 12 12", fill: "currentColor", "aria-hidden": "true", children: [
-  /* @__PURE__ */ jsx("rect", { x: "2", y: "1", width: "3", height: "10", rx: "1" }),
-  /* @__PURE__ */ jsx("rect", { x: "7", y: "1", width: "3", height: "10", rx: "1" })
-] });
-const PlayIcon = () => /* @__PURE__ */ jsx("svg", { width: 12, height: 12, viewBox: "0 0 12 12", fill: "currentColor", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { d: "M2 1.5l9 4.5-9 4.5V1.5z" }) });
-const Carousel = ({
-  data,
-  renderCarousel,
-  visibleSlides = 1,
-  hasArrow = true,
-  overlayArrows = false,
-  arrowTop,
-  areDotsHidden = false,
-  autoSlide = false,
-  autoSlideSec = 3,
-  loop = false,
-  dragToSlide = false,
-  liveDrag = false,
-  liveDragMobile = true,
-  showProgress = false,
-  defaultIndex = 0,
-  onSlideChange,
-  ...rest
+`, X = 50, B = 2e3, Ie = () => /* @__PURE__ */ C("svg", { width: 12, height: 12, viewBox: "0 0 12 12", fill: "currentColor", "aria-hidden": "true", children: [
+  /* @__PURE__ */ r("rect", { x: "2", y: "1", width: "3", height: "10", rx: "1" }),
+  /* @__PURE__ */ r("rect", { x: "7", y: "1", width: "3", height: "10", rx: "1" })
+] }), Te = () => /* @__PURE__ */ r("svg", { width: 12, height: 12, viewBox: "0 0 12 12", fill: "currentColor", "aria-hidden": "true", children: /* @__PURE__ */ r("path", { d: "M2 1.5l9 4.5-9 4.5V1.5z" }) }), Pe = ({
+  data: t,
+  renderCarousel: u,
+  visibleSlides: L = 1,
+  hasArrow: V = !0,
+  overlayArrows: a = !1,
+  arrowTop: v,
+  areDotsHidden: Q = !1,
+  autoSlide: w = !1,
+  autoSlideSec: D = 3,
+  loop: h = !1,
+  dragToSlide: $ = !1,
+  liveDrag: k = !1,
+  liveDragMobile: O = !0,
+  showProgress: Z = !1,
+  defaultIndex: S = 0,
+  onSlideChange: P,
+  ...ee
 }) => {
-  var _a, _b;
-  const [currentIndex, setCurrentIndex] = useState(defaultIndex);
-  const [arrowsVisible, setArrowsVisible] = useState(true);
-  const [viewportFocused, setViewportFocused] = useState(false);
-  const [paused, setPaused] = useState(false);
-  const [dragOffsetPx, setDragOffsetPx] = useState(0);
-  const [dragging, setDragging] = useState(false);
-  const [isMobileOrTablet, setIsMobileOrTablet] = useState(false);
-  const touchStartX = useRef(null);
-  const dragStartX = useRef(null);
-  const hideTimer = useRef(null);
-  const viewportRef = useRef(null);
-  useEffect(() => {
-    const mq = window.matchMedia("(max-width: 1024px)");
-    setIsMobileOrTablet(mq.matches);
-    const handler = (e) => setIsMobileOrTablet(e.matches);
-    mq.addEventListener("change", handler);
-    return () => mq.removeEventListener("change", handler);
+  var A, G;
+  const [i, y] = l(S), [W, p] = l(!0), [F, j] = l(!1), [b, g] = l(!1), [te, x] = l(0), [_, m] = l(!1), [R, H] = l(!1), d = I(null), c = I(null), f = I(null), U = I(null);
+  T(() => {
+    const e = window.matchMedia("(max-width: 1024px)");
+    H(e.matches);
+    const n = (he) => H(he.matches);
+    return e.addEventListener("change", n), () => e.removeEventListener("change", n);
   }, []);
-  const maxIndex = data.length - visibleSlides;
-  const prev = () => setCurrentIndex((i) => loop && i === 0 ? maxIndex : Math.max(i - 1, 0));
-  const next = () => setCurrentIndex((i) => loop && i >= maxIndex ? 0 : Math.min(i + 1, maxIndex));
-  useEffect(() => {
-    onSlideChange == null ? void 0 : onSlideChange(currentIndex);
-  }, [currentIndex]);
-  const showArrows = () => {
-    if (!overlayArrows) return;
-    clearTimeout(hideTimer.current);
-    setArrowsVisible(true);
-    hideTimer.current = setTimeout(() => setArrowsVisible(false), ARROW_HIDE_DELAY);
+  const s = t.length - L, M = () => y((e) => h && e === 0 ? s : Math.max(e - 1, 0)), E = () => y((e) => h && e >= s ? 0 : Math.min(e + 1, s));
+  T(() => {
+    P == null || P(i);
+  }, [i]);
+  const K = () => {
+    a && (clearTimeout(f.current), p(!0), f.current = setTimeout(() => p(!1), B));
+  }, ne = () => {
+    g(!0), a && (clearTimeout(f.current), p(!0));
+  }, re = () => {
+    g(!1), a && (f.current = setTimeout(() => p(!1), B));
   };
-  const handleMouseEnter = () => {
-    setPaused(true);
-    if (!overlayArrows) return;
-    clearTimeout(hideTimer.current);
-    setArrowsVisible(true);
-  };
-  const handleMouseLeave = () => {
-    setPaused(false);
-    if (!overlayArrows) return;
-    hideTimer.current = setTimeout(() => setArrowsVisible(false), ARROW_HIDE_DELAY);
-  };
-  useEffect(() => {
-    if (!overlayArrows) return;
-    hideTimer.current = setTimeout(() => setArrowsVisible(false), ARROW_HIDE_DELAY);
-    return () => clearTimeout(hideTimer.current);
-  }, [overlayArrows]);
-  useEffect(() => {
-    if (!autoSlide || paused) return;
-    const id = setInterval(() => {
-      setCurrentIndex((i) => i >= maxIndex ? 0 : i + 1);
-    }, autoSlideSec * 1e3);
-    return () => clearInterval(id);
-  }, [autoSlide, autoSlideSec, paused, maxIndex]);
-  const getResistantOffset = (offsetPx) => {
-    if (loop) return offsetPx;
-    if (currentIndex === 0 && offsetPx > 0) return offsetPx * 0.3;
-    if (currentIndex === maxIndex && offsetPx < 0) return offsetPx * 0.3;
-    return offsetPx;
-  };
-  const handleTouchStart = (e) => {
-    touchStartX.current = e.touches[0].clientX;
-    if (liveDragMobile && isMobileOrTablet) setDragging(true);
-    showArrows();
-  };
-  const handleTouchMove = (e) => {
-    if (!liveDragMobile || !isMobileOrTablet || touchStartX.current === null) return;
-    setDragOffsetPx(getResistantOffset(e.touches[0].clientX - touchStartX.current));
-  };
-  const handleTouchEnd = (e) => {
-    if (liveDragMobile && isMobileOrTablet) {
-      setDragging(false);
-      setDragOffsetPx(0);
-    }
-    if (touchStartX.current === null) return;
-    const delta = touchStartX.current - e.changedTouches[0].clientX;
-    if (delta > SWIPE_THRESHOLD) next();
-    else if (delta < -SWIPE_THRESHOLD) prev();
-    touchStartX.current = null;
-  };
-  const handleMouseDown = (e) => {
-    if (!dragToSlide) return;
-    dragStartX.current = e.clientX;
-    if (liveDrag) setDragging(true);
-  };
-  const handleMouseMove = (e) => {
-    if (!dragToSlide || !liveDrag || dragStartX.current === null) return;
-    setDragOffsetPx(getResistantOffset(e.clientX - dragStartX.current));
-  };
-  const handleMouseUp = (e) => {
-    if (!dragToSlide || dragStartX.current === null) return;
-    if (liveDrag) {
-      setDragging(false);
-      setDragOffsetPx(0);
+  T(() => {
+    if (a)
+      return f.current = setTimeout(() => p(!1), B), () => clearTimeout(f.current);
+  }, [a]), T(() => {
+    if (!w || b) return;
+    const e = setInterval(() => {
+      y((n) => n >= s ? 0 : n + 1);
+    }, D * 1e3);
+    return () => clearInterval(e);
+  }, [w, D, b, s]);
+  const N = (e) => h ? e : i === 0 && e > 0 || i === s && e < 0 ? e * 0.3 : e, ie = (e) => {
+    d.current = e.touches[0].clientX, O && R && m(!0), K();
+  }, oe = (e) => {
+    !O || !R || d.current === null || x(N(e.touches[0].clientX - d.current));
+  }, se = (e) => {
+    if (O && R && (m(!1), x(0)), d.current === null) return;
+    const n = d.current - e.changedTouches[0].clientX;
+    n > X ? E() : n < -X && M(), d.current = null;
+  }, ae = (e) => {
+    $ && (c.current = e.clientX, k && m(!0));
+  }, ce = (e) => {
+    !$ || !k || c.current === null || x(N(e.clientX - c.current));
+  }, le = (e) => {
+    if (!$ || c.current === null) return;
+    k && (m(!1), x(0));
+    const n = c.current - e.clientX;
+    n > X ? E() : n < -X && M(), c.current = null;
+  }, ue = (e) => {
+    e.key === "ArrowLeft" ? (e.preventDefault(), M()) : e.key === "ArrowRight" && (e.preventDefault(), E());
+  }, Y = (G = (A = U.current) == null ? void 0 : A.clientWidth) != null ? G : 0, de = Y > 0 ? te / Y * 100 : 0, fe = -(i * (100 / L)) + de, q = v !== void 0 ? typeof v == "number" ? `${v}px` : v : void 0, z = s + 1;
+  return /* @__PURE__ */ C(
+    xe,
+    {
+      onClick: K,
+      onMouseEnter: ne,
+      onMouseLeave: re,
+      onMouseMove: ce,
+      onMouseUp: le,
+      onKeyDown: ue,
+      role: "region",
+      "aria-label": "Carousel",
+      ...ee,
+      children: [
+        /* @__PURE__ */ C(
+          me,
+          {
+            onTouchStart: ie,
+            onTouchMove: oe,
+            onTouchEnd: se,
+            children: [
+              V && /* @__PURE__ */ r(
+                J,
+                {
+                  onClick: M,
+                  disabled: !h && i === 0,
+                  "aria-label": "Previous slide",
+                  $direction: "prev",
+                  $overlay: a,
+                  $visible: W,
+                  $arrowTop: q,
+                  $viewportFocused: F,
+                  children: /* @__PURE__ */ r(pe, { size: 20, "aria-hidden": "true" })
+                }
+              ),
+              /* @__PURE__ */ r(
+                ve,
+                {
+                  ref: U,
+                  tabIndex: 0,
+                  "aria-label": "Carousel slides. Use arrow keys to navigate.",
+                  $draggable: $,
+                  onFocus: () => {
+                    j(!0), g(!0);
+                  },
+                  onBlur: () => {
+                    j(!1), g(!1);
+                  },
+                  onMouseDown: ae,
+                  onMouseLeave: (e) => {
+                    e.buttons !== 1 && (k && _ && (m(!1), x(0)), c.current = null);
+                  },
+                  children: /* @__PURE__ */ r(we, { $translateX: fe, $visibleSlides: L, $dragging: _, children: t.map(u) })
+                }
+              ),
+              V && /* @__PURE__ */ r(
+                J,
+                {
+                  onClick: E,
+                  disabled: !h && i === s,
+                  "aria-label": "Next slide",
+                  $direction: "next",
+                  $overlay: a,
+                  $visible: W,
+                  $arrowTop: q,
+                  $viewportFocused: F,
+                  children: /* @__PURE__ */ r(be, { size: 20, "aria-hidden": "true" })
+                }
+              ),
+              w && /* @__PURE__ */ r(
+                Ee,
+                {
+                  onClick: () => g((e) => !e),
+                  "aria-label": b ? "Play slideshow" : "Pause slideshow",
+                  children: b ? /* @__PURE__ */ r(Te, {}) : /* @__PURE__ */ r(Ie, {})
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ C(
+          "div",
+          {
+            "aria-live": "polite",
+            "aria-atomic": "true",
+            style: {
+              position: "absolute",
+              width: 1,
+              height: 1,
+              overflow: "hidden",
+              clip: "rect(0,0,0,0)",
+              whiteSpace: "nowrap"
+            },
+            children: [
+              "Slide ",
+              i + 1,
+              " of ",
+              z
+            ]
+          }
+        ),
+        w && Z && /* @__PURE__ */ r(Me, { $duration: D, $paused: b }, i),
+        !Q && /* @__PURE__ */ r($e, { children: Array.from({ length: z }).map((e, n) => /* @__PURE__ */ r(
+          ke,
+          {
+            $active: n === i,
+            onClick: () => y(n),
+            "aria-label": `Slide ${n + 1} of ${z}`,
+            "aria-current": n === i ? "true" : void 0
+          },
+          n
+        )) })
+      ]
     }
-    const delta = dragStartX.current - e.clientX;
-    if (delta > SWIPE_THRESHOLD) next();
-    else if (delta < -SWIPE_THRESHOLD) prev();
-    dragStartX.current = null;
-  };
-  const handleKeyDown = (e) => {
-    if (e.key === "ArrowLeft") {
-      e.preventDefault();
-      prev();
-    } else if (e.key === "ArrowRight") {
-      e.preventDefault();
-      next();
-    }
-  };
-  const containerWidth = (_b = (_a = viewportRef.current) == null ? void 0 : _a.clientWidth) != null ? _b : 0;
-  const dragOffsetPercent = containerWidth > 0 ? dragOffsetPx / containerWidth * 100 : 0;
-  const translateX = -(currentIndex * (100 / visibleSlides)) + dragOffsetPercent;
-  const arrowTopValue = arrowTop !== void 0 ? typeof arrowTop === "number" ? `${arrowTop}px` : arrowTop : void 0;
-  const totalSlides = maxIndex + 1;
-  return /* @__PURE__ */ jsxs(Wrapper, { onClick: showArrows, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, onMouseMove: handleMouseMove, onMouseUp: handleMouseUp, onKeyDown: handleKeyDown, role: "region", "aria-label": "Carousel", ...rest, children: [
-    /* @__PURE__ */ jsxs(SlideArea, { onTouchStart: handleTouchStart, onTouchMove: handleTouchMove, onTouchEnd: handleTouchEnd, children: [
-      hasArrow && /* @__PURE__ */ jsx(NavButton, { onClick: prev, disabled: !loop && currentIndex === 0, "aria-label": "Previous slide", $direction: "prev", $overlay: overlayArrows, $visible: arrowsVisible, $arrowTop: arrowTopValue, $viewportFocused: viewportFocused, children: /* @__PURE__ */ jsx(ChevronLeft, { size: 20, "aria-hidden": "true" }) }),
-      /* @__PURE__ */ jsx(SlideViewport, { ref: viewportRef, tabIndex: 0, "aria-label": "Carousel slides. Use arrow keys to navigate.", $draggable: dragToSlide, onFocus: () => {
-        setViewportFocused(true);
-        setPaused(true);
-      }, onBlur: () => {
-        setViewportFocused(false);
-        setPaused(false);
-      }, onMouseDown: handleMouseDown, onMouseLeave: (e) => {
-        if (e.buttons === 1) return;
-        if (liveDrag && dragging) {
-          setDragging(false);
-          setDragOffsetPx(0);
-        }
-        dragStartX.current = null;
-      }, children: /* @__PURE__ */ jsx(SlideTrack, { $translateX: translateX, $visibleSlides: visibleSlides, $dragging: dragging, children: data.map(renderCarousel) }) }),
-      hasArrow && /* @__PURE__ */ jsx(NavButton, { onClick: next, disabled: !loop && currentIndex === maxIndex, "aria-label": "Next slide", $direction: "next", $overlay: overlayArrows, $visible: arrowsVisible, $arrowTop: arrowTopValue, $viewportFocused: viewportFocused, children: /* @__PURE__ */ jsx(ChevronRight, { size: 20, "aria-hidden": "true" }) }),
-      autoSlide && /* @__PURE__ */ jsx(PauseButton, { onClick: () => setPaused((p) => !p), "aria-label": paused ? "Play slideshow" : "Pause slideshow", children: paused ? /* @__PURE__ */ jsx(PlayIcon, {}) : /* @__PURE__ */ jsx(PauseIcon, {}) })
-    ] }),
-    /* @__PURE__ */ jsxs("div", { "aria-live": "polite", "aria-atomic": "true", style: {
-      position: "absolute",
-      width: 1,
-      height: 1,
-      overflow: "hidden",
-      clip: "rect(0,0,0,0)",
-      whiteSpace: "nowrap"
-    }, children: [
-      "Slide ",
-      currentIndex + 1,
-      " of ",
-      totalSlides
-    ] }),
-    autoSlide && showProgress && /* @__PURE__ */ jsx(ProgressBar, { $duration: autoSlideSec, $paused: paused }, currentIndex),
-    !areDotsHidden && /* @__PURE__ */ jsx(DotsWrapper, { children: Array.from({
-      length: totalSlides
-    }).map((_, i) => /* @__PURE__ */ jsx(Dot, { $active: i === currentIndex, onClick: () => setCurrentIndex(i), "aria-label": `Slide ${i + 1} of ${totalSlides}`, "aria-current": i === currentIndex ? "true" : void 0 }, i)) })
-  ] });
+  );
 };
 export {
-  Carousel as default
+  Pe as default
 };

package/components/Carousel/index.js

@@ -1,4 +1,4 @@
-import Carousel from "./Carousel.js";
+import r from "./Carousel.js";
 export {
-  Carousel as default
+  r as default
 };