quirk-ui 0.0.256 → 0.0.257

package/dist/components/Carousel/index.js

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

package/package.json

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