quirk-ui 0.0.255 → 0.0.257

package/dist/components/Carousel/index.js

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

package/package.json

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