meticulous-ui 3.1.0 → 3.1.2

package/components/Carousel/Carousel.js

@@ -1,129 +1,155 @@
-import { jsxs as b, jsx as t } from "react/jsx-runtime";
-import { useState as x, useRef as k, useEffect as C } from "react";
-import q from "../Icons/ChevronLeft/ChevronLeft.js";
-import G from "../Icons/ChevronRight/ChevronRight.js";
-import { Wrapper as J, SlideArea as Q, NavButton as V, SlideViewport as S, SlideTrack as Z, PauseButton as ee, ProgressBar as te, DotsWrapper as re, Dot as ne } from "./styles.js";
-const $ = 50, E = 2e3, oe = () => /* @__PURE__ */ b("svg", { width: 12, height: 12, viewBox: "0 0 12 12", fill: "currentColor", "aria-hidden": "true", children: [
-  /* @__PURE__ */ t("rect", { x: "2", y: "1", width: "3", height: "10", rx: "1" }),
-  /* @__PURE__ */ t("rect", { x: "7", y: "1", width: "3", height: "10", rx: "1" })
-] }), se = () => /* @__PURE__ */ t("svg", { width: 12, height: 12, viewBox: "0 0 12 12", fill: "currentColor", "aria-hidden": "true", children: /* @__PURE__ */ t("path", { d: "M2 1.5l9 4.5-9 4.5V1.5z" }) }), de = ({
+import { jsxs as X, jsx as r } from "react/jsx-runtime";
+import { useState as a, useRef as T, useEffect as E } from "react";
+import de from "../Icons/ChevronLeft/ChevronLeft.js";
+import he from "../Icons/ChevronRight/ChevronRight.js";
+import { Wrapper as fe, SlideArea as me, NavButton as A, SlideViewport as pe, SlideTrack as ve, PauseButton as we, ProgressBar as ge, DotsWrapper as Me, Dot as be } from "./styles.js";
+const I = 50, R = 2e3, $e = () => /* @__PURE__ */ X("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" })
+] }), xe = () => /* @__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" }) }), Ce = ({
   data: P,
-  renderCarousel: F,
-  visibleSlides: g = 1,
+  renderCarousel: Y,
+  visibleSlides: k = 1,
+  hasArrow: B = !0,
   overlayArrows: o = !1,
-  arrowTop: d,
-  areDotsHidden: W = !1,
-  autoSlide: h = !1,
-  autoSlideSec: M = 3,
-  loop: f = !1,
-  dragToSlide: T = !1,
-  showProgress: _ = !1,
-  defaultIndex: z = 0,
-  onSlideChange: D
+  arrowTop: v,
+  areDotsHidden: G = !1,
+  autoSlide: w = !1,
+  autoSlideSec: C = 3,
+  loop: l = !1,
+  dragToSlide: g = !1,
+  liveDrag: M = !1,
+  liveDragMobile: L = !0,
+  showProgress: J = !1,
+  defaultIndex: Q = 0,
+  onSlideChange: y
 }) => {
-  const [n, p] = x(z), [y, i] = x(!0), [X, L] = x(!1), [a, u] = x(!1), m = k(null), c = k(null), l = k(null), s = P.length - g, v = () => p((e) => f && e === 0 ? s : Math.max(e - 1, 0)), w = () => p((e) => f && e >= s ? 0 : Math.min(e + 1, s));
-  C(() => {
-    D == null || D(n);
+  var q;
+  const [n, b] = a(Q), [V, d] = a(!0), [W, F] = a(!1), [h, f] = a(!1), [Z, m] = a(0), [_, p] = a(!1), [D, z] = a(!1), c = T(null), i = T(null), u = T(null), H = T(null);
+  E(() => {
+    const e = window.matchMedia("(max-width: 1024px)");
+    z(e.matches);
+    const t = (le) => z(le.matches);
+    return e.addEventListener("change", t), () => e.removeEventListener("change", t);
+  }, []);
+  const s = P.length - k, $ = () => b((e) => l && e === 0 ? s : Math.max(e - 1, 0)), x = () => b((e) => l && e >= s ? 0 : Math.min(e + 1, s));
+  E(() => {
+    y == null || y(n);
   }, [n]);
-  const B = () => {
-    o && (clearTimeout(l.current), i(!0), l.current = setTimeout(() => i(!1), E));
-  }, H = () => {
-    u(!0), o && (clearTimeout(l.current), i(!0));
-  }, U = () => {
-    u(!1), o && (l.current = setTimeout(() => i(!1), E));
+  const U = () => {
+    o && (clearTimeout(u.current), d(!0), u.current = setTimeout(() => d(!1), R));
+  }, S = () => {
+    f(!0), o && (clearTimeout(u.current), d(!0));
+  }, ee = () => {
+    f(!1), o && (u.current = setTimeout(() => d(!1), R));
   };
-  C(() => {
+  E(() => {
     if (o)
-      return l.current = setTimeout(() => i(!1), E), () => clearTimeout(l.current);
-  }, [o]), C(() => {
-    if (!h || a) return;
+      return u.current = setTimeout(() => d(!1), R), () => clearTimeout(u.current);
+  }, [o]), E(() => {
+    if (!w || h) return;
     const e = setInterval(() => {
-      p((r) => r >= s ? 0 : r + 1);
-    }, M * 1e3);
+      b((t) => t >= s ? 0 : t + 1);
+    }, C * 1e3);
     return () => clearInterval(e);
-  }, [h, M, a, s]);
-  const j = (e) => {
-    m.current = e.touches[0].clientX, B();
-  }, A = (e) => {
-    if (m.current === null) return;
-    const r = m.current - e.changedTouches[0].clientX;
-    r > $ ? w() : r < -$ && v(), m.current = null;
-  }, K = (e) => {
-    T && (c.current = e.clientX);
-  }, N = (e) => {
-    if (!T || c.current === null) return;
-    const r = c.current - e.clientX;
-    r > $ ? w() : r < -$ && v(), c.current = null;
-  }, O = (e) => {
-    e.key === "ArrowLeft" ? (e.preventDefault(), v()) : e.key === "ArrowRight" && (e.preventDefault(), w());
-  }, Y = -(n * (100 / g)), R = d !== void 0 ? typeof d == "number" ? `${d}px` : d : void 0, I = s + 1;
-  return /* @__PURE__ */ b(
-    J,
+  }, [w, C, h, s]);
+  const j = (e) => l ? e : n === 0 && e > 0 || n === s && e < 0 ? e * 0.3 : e, te = (e) => {
+    c.current = e.touches[0].clientX, L && D && p(!0), U();
+  }, re = (e) => {
+    !L || !D || c.current === null || m(j(e.touches[0].clientX - c.current));
+  }, ne = (e) => {
+    if (L && D && (p(!1), m(0)), c.current === null) return;
+    const t = c.current - e.changedTouches[0].clientX;
+    t > I ? x() : t < -I && $(), c.current = null;
+  }, se = (e) => {
+    g && (i.current = e.clientX, M && p(!0));
+  }, oe = (e) => {
+    !g || !M || i.current === null || m(j(e.clientX - i.current));
+  }, ie = (e) => {
+    if (!g || i.current === null) return;
+    M && (p(!1), m(0));
+    const t = i.current - e.clientX;
+    t > I ? x() : t < -I && $(), i.current = null;
+  }, ae = (e) => {
+    e.key === "ArrowLeft" ? (e.preventDefault(), $()) : e.key === "ArrowRight" && (e.preventDefault(), x());
+  }, K = ((q = H.current) == null ? void 0 : q.clientWidth) ?? 0, ce = K > 0 ? Z / K * 100 : 0, ue = -(n * (100 / k)) + ce, N = v !== void 0 ? typeof v == "number" ? `${v}px` : v : void 0, O = s + 1;
+  return /* @__PURE__ */ X(
+    fe,
     {
-      onClick: B,
-      onMouseEnter: H,
-      onMouseLeave: U,
-      onKeyDown: O,
+      onClick: U,
+      onMouseEnter: S,
+      onMouseLeave: ee,
+      onMouseMove: oe,
+      onMouseUp: ie,
+      onKeyDown: ae,
       role: "region",
       "aria-label": "Carousel",
       children: [
-        /* @__PURE__ */ b(Q, { onTouchStart: j, onTouchEnd: A, children: [
-          /* @__PURE__ */ t(
-            V,
-            {
-              onClick: v,
-              disabled: !f && n === 0,
-              "aria-label": "Previous slide",
-              $overlay: o,
-              $visible: y,
-              $arrowTop: R,
-              $viewportFocused: X,
-              children: /* @__PURE__ */ t(q, { size: 20, "aria-hidden": "true" })
-            }
-          ),
-          /* @__PURE__ */ t(
-            S,
-            {
-              tabIndex: 0,
-              "aria-label": "Carousel slides. Use arrow keys to navigate.",
-              $draggable: T,
-              onFocus: () => {
-                L(!0), u(!0);
-              },
-              onBlur: () => {
-                L(!1), u(!1);
-              },
-              onMouseDown: K,
-              onMouseUp: N,
-              onMouseLeave: () => {
-                c.current = null;
-              },
-              children: /* @__PURE__ */ t(Z, { $translateX: Y, $visibleSlides: g, children: P.map(F) })
-            }
-          ),
-          /* @__PURE__ */ t(
-            V,
-            {
-              onClick: w,
-              disabled: !f && n === s,
-              "aria-label": "Next slide",
-              $overlay: o,
-              $visible: y,
-              $arrowTop: R,
-              $viewportFocused: X,
-              children: /* @__PURE__ */ t(G, { size: 20, "aria-hidden": "true" })
-            }
-          ),
-          h && /* @__PURE__ */ t(
-            ee,
-            {
-              onClick: () => u((e) => !e),
-              "aria-label": a ? "Play slideshow" : "Pause slideshow",
-              children: a ? /* @__PURE__ */ t(se, {}) : /* @__PURE__ */ t(oe, {})
-            }
-          )
-        ] }),
-        /* @__PURE__ */ b(
+        /* @__PURE__ */ X(
+          me,
+          {
+            onTouchStart: te,
+            onTouchMove: re,
+            onTouchEnd: ne,
+            children: [
+              B && /* @__PURE__ */ r(
+                A,
+                {
+                  onClick: $,
+                  disabled: !l && n === 0,
+                  "aria-label": "Previous slide",
+                  $overlay: o,
+                  $visible: V,
+                  $arrowTop: N,
+                  $viewportFocused: W,
+                  children: /* @__PURE__ */ r(de, { size: 20, "aria-hidden": "true" })
+                }
+              ),
+              /* @__PURE__ */ r(
+                pe,
+                {
+                  ref: H,
+                  tabIndex: 0,
+                  "aria-label": "Carousel slides. Use arrow keys to navigate.",
+                  $draggable: g,
+                  onFocus: () => {
+                    F(!0), f(!0);
+                  },
+                  onBlur: () => {
+                    F(!1), f(!1);
+                  },
+                  onMouseDown: se,
+                  onMouseLeave: (e) => {
+                    e.buttons !== 1 && (M && _ && (p(!1), m(0)), i.current = null);
+                  },
+                  children: /* @__PURE__ */ r(ve, { $translateX: ue, $visibleSlides: k, $dragging: _, children: P.map(Y) })
+                }
+              ),
+              B && /* @__PURE__ */ r(
+                A,
+                {
+                  onClick: x,
+                  disabled: !l && n === s,
+                  "aria-label": "Next slide",
+                  $overlay: o,
+                  $visible: V,
+                  $arrowTop: N,
+                  $viewportFocused: W,
+                  children: /* @__PURE__ */ r(he, { size: 20, "aria-hidden": "true" })
+                }
+              ),
+              w && /* @__PURE__ */ r(
+                we,
+                {
+                  onClick: () => f((e) => !e),
+                  "aria-label": h ? "Play slideshow" : "Pause slideshow",
+                  children: h ? /* @__PURE__ */ r(xe, {}) : /* @__PURE__ */ r($e, {})
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ X(
           "div",
           {
             "aria-live": "polite",
@@ -140,25 +166,25 @@ const $ = 50, E = 2e3, oe = () => /* @__PURE__ */ b("svg", { width: 12, height:
               "Slide ",
               n + 1,
               " of ",
-              I
+              O
             ]
           }
         ),
-        h && _ && /* @__PURE__ */ t(te, { $duration: M, $paused: a }, n),
-        !W && /* @__PURE__ */ t(re, { children: Array.from({ length: I }).map((e, r) => /* @__PURE__ */ t(
-          ne,
+        w && J && /* @__PURE__ */ r(ge, { $duration: C, $paused: h }, n),
+        !G && /* @__PURE__ */ r(Me, { children: Array.from({ length: O }).map((e, t) => /* @__PURE__ */ r(
+          be,
           {
-            $active: r === n,
-            onClick: () => p(r),
-            "aria-label": `Slide ${r + 1} of ${I}`,
-            "aria-current": r === n ? "true" : void 0
+            $active: t === n,
+            onClick: () => b(t),
+            "aria-label": `Slide ${t + 1} of ${O}`,
+            "aria-current": t === n ? "true" : void 0
           },
-          r
+          t
         )) })
       ]
     }
   );
 };
 export {
-  de as default
+  Ce as default
 };

package/components/Carousel/styles.js

@@ -23,7 +23,7 @@ const d = o.div`
   display: flex;
   width: 100%;
   transform: translateX(${({ $translateX: e }) => e}%);
-  transition: transform 0.35s ease;
+  transition: ${({ $dragging: e }) => e ? "none" : "transform 0.35s ease"};
 
   @media (prefers-reduced-motion: reduce) {
     transition: none;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "meticulous-ui",
-  "version": "3.1.0",
+  "version": "3.1.2",
   "license": "MIT",
   "description": "A comprehensive React UI component library with a wide range of customizable components, icons, colors, and utilities for building modern web applications.",
   "main": "./index.js",