meticulous-ui 3.1.1 → 3.1.3

package/components/Carousel/Carousel.js

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

package/components/Carousel/styles.js

@@ -54,13 +54,7 @@ const d = o.div`
     opacity 0.3s;
   padding: 0;
 
-  &:first-of-type {
-    left: ${({ $overlay: e }) => e ? "12px" : "-16px"};
-  }
-
-  &:last-of-type {
-    right: ${({ $overlay: e }) => e ? "12px" : "-16px"};
-  }
+  ${({ $direction: e, $overlay: t }) => e === "prev" ? `left: ${t ? "12px" : "-16px"};` : `right: ${t ? "12px" : "-16px"};`}
 
   &:hover:not(:disabled) {
     background: #f5f5f5;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "meticulous-ui",
-  "version": "3.1.1",
+  "version": "3.1.3",
   "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",