quirk-ui 0.0.80 → 0.0.82

package/dist/components/Carousel/index.js

@@ -1,143 +1,165 @@
-import { jsxs as E, jsx as s } from "react/jsx-runtime";
-import { useState as o, useRef as X, useEffect as y } from "react";
-import { A as vt } from "../../arrow-left-BIJvHwNQ.js";
-import { A as bt } from "../../arrow-right-QEwnX3Sk.js";
-import '../../assets/index31.css';const ft = "_carousel_zbb4v_1", _t = "_noPointerEvents_zbb4v_9", pt = "_trackContainer_zbb4v_13", mt = "_track_zbb4v_13", wt = "_page_zbb4v_28", Mt = "_controls_zbb4v_34", gt = "_indicators_zbb4v_45", xt = "_indicator_zbb4v_45", $t = "_active_zbb4v_62", zt = "_buttons_zbb4v_66", Ct = "_prev_zbb4v_71", Et = "_disabled_zbb4v_71", Xt = "_next_zbb4v_72", n = {
-  carousel: ft,
-  noPointerEvents: _t,
-  trackContainer: pt,
-  track: mt,
-  page: wt,
-  controls: Mt,
-  indicators: gt,
-  indicator: xt,
-  active: $t,
-  buttons: zt,
-  prev: Ct,
-  disabled: Et,
-  next: Xt
+import { jsxs as A, jsx as r } from "react/jsx-runtime";
+import { useState as c, useRef as C, useEffect as E } from "react";
+import { A as Mt } from "../../arrow-left-BIJvHwNQ.js";
+import { A as wt } from "../../arrow-right-QEwnX3Sk.js";
+import '../../assets/index31.css';const gt = "_carousel_zbb4v_1", xt = "_noPointerEvents_zbb4v_9", $t = "_trackContainer_zbb4v_13", zt = "_track_zbb4v_13", Ct = "_page_zbb4v_28", Et = "_controls_zbb4v_34", Xt = "_indicators_zbb4v_45", yt = "_indicator_zbb4v_45", It = "_active_zbb4v_62", Nt = "_buttons_zbb4v_66", kt = "_prev_zbb4v_71", Tt = "_disabled_zbb4v_71", At = "_next_zbb4v_72", o = {
+  carousel: gt,
+  noPointerEvents: xt,
+  trackContainer: $t,
+  track: zt,
+  page: Ct,
+  controls: Et,
+  indicators: Xt,
+  indicator: yt,
+  active: It,
+  buttons: Nt,
+  prev: kt,
+  disabled: Tt,
+  next: At
 };
-function It({
-  items: N,
-  itemsPerPage: f = 9,
-  itemsPerRow: O = 3,
-  autoplay: q = !1,
-  autoplayInterval: k = 3,
-  className: F,
-  externalRef: H,
-  siblingRef: a,
-  isSplit: T = !1
+function Pt({
+  items: _,
+  itemsPerPage: l = 9,
+  itemsPerRow: J = 3,
+  autoplay: K = !1,
+  autoplayInterval: W = 3,
+  className: Q,
+  externalRef: V,
+  siblingRef: i,
+  isSplit: D = !1
 }) {
-  const [l, i] = o(0), [h, _] = o(0), [I, J] = o(0), [p, K] = o(f), [W, Q] = o(!1), [A, V] = o(q), Y = X(null), m = X(null), v = X(null), w = H, [D, P] = o(null), [S, L] = o(null), [Z, j] = o(!1), [d, R] = o(null), [M, U] = o(null), tt = (t) => {
-    console.log(Math.abs((M ?? 0) - (d ?? 0))), Math.abs((M ?? 0) - (d ?? 0)) > 25 && (t.stopPropagation(), t.preventDefault());
-  }, et = (t) => {
-    R(t.clientX);
-  }, nt = (t) => {
-    d !== null && Math.abs(t.clientX - d) > 5 && (j(!0), U(t.clientX));
-  }, ot = () => {
-    if (!d || !M) {
-      x();
+  const [d, u] = c(0), [v, m] = c(0), [S, Z] = c(0), [M, tt] = c(l), [w, et] = c(!1), [L, nt] = c(K), ot = C(null), g = C(null), b = C(null), x = V, [f, X] = c(!1), [P, Y] = c(null), [$, R] = c(null), [j, U] = c(null), [st, B] = c(!1), [p, G] = c(null), [y, O] = c(null), ct = (t) => {
+    Math.abs((y ?? 0) - (p ?? 0)) > 25 && (t.stopPropagation(), t.preventDefault());
+  }, rt = (t) => {
+    G(t.clientX);
+  }, at = (t) => {
+    p !== null && Math.abs(t.clientX - p) > 5 && (B(!0), O(t.clientX));
+  }, lt = () => {
+    if (!p || !y) {
+      I();
       return;
     }
-    const t = d - M;
-    Math.abs(t) > 50 && (t > 0 ? z() : C()), x();
-  }, st = () => {
-    x();
-  }, x = () => {
-    j(!1), R(null), U(null);
-  }, ct = (t) => {
-    P(t.touches[0].clientX);
-  }, rt = (t) => {
-    L(t.touches[0].clientX);
-  }, at = () => {
-    if (D === null || S === null) return;
-    const t = D - S;
-    Math.abs(t) > 50 && (t > 0 ? z() : C()), P(null), L(null);
-  }, lt = (t, e) => {
-    const r = [];
-    for (let c = 0; c < t.length; c += e)
-      r.push(t.slice(c, c + e));
-    return r;
+    const t = p - y;
+    Math.abs(t) > 50 && (t > 0 ? k() : T()), I();
+  }, it = () => {
+    I();
+  }, I = () => {
+    B(!1), G(null), O(null);
+  }, dt = (t) => {
+    R(t.touches[0].clientX), Y(t.touches[0].clientY), X(!1);
+  }, q = C(null);
+  E(() => {
+    const t = q.current;
+    if (!t) return;
+    const e = (n) => {
+      const s = n.touches[0].clientX - ($ ?? 0), a = n.touches[0].clientY - (P ?? 0);
+      !f && Math.abs(s) > Math.abs(a) && X(!0), f && (n.preventDefault(), U(n.touches[0].clientX));
+    };
+    return t.addEventListener("touchmove", e), () => {
+      t.removeEventListener("touchmove", e);
+    };
+  }, [f, $, P]);
+  const ut = () => {
+    if ($ === null || j === null) return;
+    const t = $ - j;
+    Math.abs(t) > 50 && (t > 0 ? k() : T()), R(null), U(null), Y(null), X(!1);
+  }, ht = (t, e) => {
+    const n = [];
+    for (let s = 0; s < t.length; s += e)
+      n.push(t.slice(s, s + e));
+    return n;
   };
-  y(() => {
+  E(() => {
     if (typeof window < "u") {
       const t = () => {
-        const e = window.innerWidth < 768;
-        Q(e), K(e ? 1 : f), i(0);
+        const e = window.innerWidth < 768, n = e ? 1 : l;
+        et(e), tt(e ? 1 : l), u(
+          (s) => Math.min(s, Math.ceil(_.length / n) - 1)
+        );
       };
       return t(), window.addEventListener("resize", t), () => window.removeEventListener("resize", t);
     }
-  }, [f]);
-  const g = Math.ceil(p / O), B = lt(N, p), u = B.length, it = 3 * 16, dt = 6 * 16;
-  y(() => {
+  }, [l]);
+  const z = Math.ceil(M / J), F = ht(_, M), h = F.length, vt = 3 * 16, bt = 6 * 16;
+  E(() => {
     const t = new ResizeObserver((e) => {
-      var r, c;
-      for (let b of e)
-        b.contentRect && (W ? _(b.contentRect.width - dt) : T ? a != null && a.current ? _(
-          b.contentRect.width - ((r = a == null ? void 0 : a.current) == null ? void 0 : r.offsetWidth) - it
-        ) : _(b.contentRect.width) : (_(b.contentRect.width), J(
-          ((c = m == null ? void 0 : m.current) == null ? void 0 : c.children[0].children[0].children[0].getBoundingClientRect().width) ?? 0
-        )), i(0));
+      var n, s;
+      for (let a of e)
+        if (a.contentRect) {
+          w ? m(a.contentRect.width - bt) : D ? i != null && i.current ? m(
+            a.contentRect.width - ((n = i == null ? void 0 : i.current) == null ? void 0 : n.offsetWidth) - vt
+          ) : m(a.contentRect.width) : (m(a.contentRect.width), Z(
+            ((s = g == null ? void 0 : g.current) == null ? void 0 : s.children[0].children[0].children[0].getBoundingClientRect().width) ?? 0
+          ));
+          const _t = w ? 1 : l;
+          u(
+            (mt) => Math.min(mt, Math.ceil(_.length / _t) - 1)
+          );
+        }
     });
-    return w != null && w.current && t.observe(w.current), () => t.disconnect();
-  }, [W, T]);
-  const $ = () => {
-    v.current && clearInterval(v.current), V(!1);
-  }, z = () => {
-    $(), i((t) => Math.min(t + 1, u - 1));
-  }, C = () => {
-    $(), i((t) => Math.max(t - 1, 0));
-  }, ut = (t) => {
-    $(), i(t);
-  }, ht = () => h ? `translateX(-${l * h}px)` : "translateX(0px)", G = () => {
-    i((t) => t >= u - 1 ? 0 : t + 1);
+    return x != null && x.current && t.observe(x.current), () => t.disconnect();
+  }, [w, D]);
+  const N = () => {
+    b.current && clearInterval(b.current), nt(!1);
+  }, k = () => {
+    N(), u((t) => Math.min(t + 1, h - 1));
+  }, T = () => {
+    N(), u((t) => Math.max(t - 1, 0));
+  }, ft = (t) => {
+    N(), u(t);
+  }, pt = () => v ? `translateX(-${d * v}px)` : "translateX(0px)", H = () => {
+    u((t) => t >= h - 1 ? 0 : t + 1);
   };
-  return y(() => (A && (v.current = setInterval(
-    G,
-    k * 1e3
+  return E(() => (L && (b.current = setInterval(
+    H,
+    W * 1e3
   )), () => {
-    v.current && clearInterval(v.current);
-  }), [A, k, G]), /* @__PURE__ */ E("div", { className: `${F ?? ""} ${n.carousel}`, ref: Y, children: [
-    /* @__PURE__ */ s(
+    b.current && clearInterval(b.current);
+  }), [L, W, H]), /* @__PURE__ */ A("div", { className: `${Q ?? ""} ${o.carousel}`, ref: ot, children: [
+    /* @__PURE__ */ r(
       "div",
       {
-        className: n.trackContainer,
-        style: { maxWidth: `${h}px` },
-        onTouchStart: ct,
-        onTouchMove: rt,
-        onTouchEnd: at,
-        onMouseDown: et,
-        onMouseMove: nt,
-        onMouseUp: ot,
-        onMouseLeave: st,
-        children: /* @__PURE__ */ s(
+        ref: q,
+        className: `${o.trackContainer} ${st || f ? o.noPointerEvents : ""}
+          `,
+        style: {
+          maxWidth: `${v}px`,
+          touchAction: f ? "none" : "pan-y"
+        },
+        onTouchStart: dt,
+        onTouchEnd: ut,
+        onMouseDown: rt,
+        onMouseMove: at,
+        onMouseUp: lt,
+        onMouseLeave: it,
+        children: /* @__PURE__ */ r(
           "div",
           {
-            ref: m,
-            className: `${n.track} ${Z ? n.noPointerEvents : ""}`,
-            style: { width: `${u * 100}%`, transform: ht() },
-            children: B.map((t, e) => /* @__PURE__ */ s(
+            ref: g,
+            className: o.track,
+            style: { width: `${h * 100}%`, transform: pt() },
+            children: F.map((t, e) => /* @__PURE__ */ r(
               "div",
               {
-                className: n.page,
+                className: o.page,
                 style: {
-                  display: g > 1 ? "grid" : "flex",
+                  display: z > 1 ? "grid" : "flex",
                   gridTemplateColumns: `repeat(${Math.ceil(
-                    p / g
+                    M / z
                   )}, 1fr)`,
-                  gridTemplateRows: `repeat(${g}, auto)`,
-                  width: `${h}px`
+                  gridTemplateRows: `repeat(${z}, auto)`,
+                  width: `${v}px`
                 },
-                children: t.map((r, c) => /* @__PURE__ */ s(
+                children: t.map((n, s) => /* @__PURE__ */ r(
                   "div",
                   {
-                    onClickCapture: tt,
+                    onClickCapture: ct,
                     style: {
-                      width: `${h / g - 16}px`
+                      width: `${v / z - 16}px`
                     },
-                    children: r
+                    children: n
                   },
-                  c
+                  s
                 ))
               },
               e
@@ -146,42 +168,42 @@ function It({
         )
       }
     ),
-    u > 1 && /* @__PURE__ */ E(
+    h > 1 && /* @__PURE__ */ A(
       "div",
       {
-        className: n.controls,
+        className: o.controls,
         style: {
-          maxWidth: I > 0 && f === 1 ? `${I}px` : "unset"
+          maxWidth: S > 0 && l === 1 && !w ? `${S}px` : "unset"
         },
         children: [
-          /* @__PURE__ */ s("div", { className: n.indicators, children: Array.from({ length: u }).map((t, e) => /* @__PURE__ */ s(
+          /* @__PURE__ */ r("div", { className: o.indicators, children: Array.from({ length: h }).map((t, e) => /* @__PURE__ */ r(
             "button",
             {
-              className: `${n.indicator} ${e === l ? n.active : ""}`,
-              onClick: () => ut(e),
+              className: `${o.indicator} ${e === d ? o.active : ""}`,
+              onClick: () => ft(e),
               "aria-label": `Go to group ${e + 1}`
             },
             e
           )) }),
-          /* @__PURE__ */ E("div", { className: n.buttons, children: [
-            /* @__PURE__ */ s(
+          /* @__PURE__ */ A("div", { className: o.buttons, children: [
+            /* @__PURE__ */ r(
               "button",
               {
                 "aria-label": "Previous slide",
-                className: `${n.prev} ${l === 0 ? n.disabled : ""}`,
-                onClick: C,
-                disabled: l === 0,
-                children: /* @__PURE__ */ s(vt, { size: 36 })
+                className: `${o.prev} ${d === 0 ? o.disabled : ""}`,
+                onClick: T,
+                disabled: d === 0,
+                children: /* @__PURE__ */ r(Mt, { size: 36 })
               }
             ),
-            /* @__PURE__ */ s(
+            /* @__PURE__ */ r(
               "button",
               {
                 "aria-label": "Next slide",
-                className: `${n.next} ${l >= u - 1 ? n.disabled : ""}`,
-                onClick: z,
-                disabled: l >= N.length - p,
-                children: /* @__PURE__ */ s(bt, { size: 36 })
+                className: `${o.next} ${d >= h - 1 ? o.disabled : ""}`,
+                onClick: k,
+                disabled: d >= _.length - M,
+                children: /* @__PURE__ */ r(wt, { size: 36 })
               }
             )
           ] })
@@ -191,5 +213,5 @@ function It({
   ] });
 }
 export {
-  It as Carousel
+  Pt as Carousel
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "quirk-ui",
   "private": false,
-  "version": "0.0.80",
+  "version": "0.0.82",
   "type": "module",
   "exports": {
     ".": {