quirk-ui 0.0.170 → 0.0.171

package/dist/components/Carousel/index.js

@@ -1,8 +1,8 @@
 import { jsxs as A, jsx as r } from "react/jsx-runtime";
-import { useState as c, useRef as E, useEffect as X } from "react";
+import { useState as c, useRef as C, useEffect as E } from "react";
 import { A as wt } from "../../arrow-left-BIJvHwNQ.js";
 import { A as bt } from "../../arrow-right-QEwnX3Sk.js";
-import '../../assets/index31.css';const gt = "_carousel_1e9ij_1", xt = "_noPointerEvents_1e9ij_9", $t = "_trackContainer_1e9ij_13", Ct = "_track_1e9ij_13", Et = "_page_1e9ij_28", Xt = "_controls_1e9ij_34", jt = "_indicators_1e9ij_45", yt = "_indicator_1e9ij_45", It = "_active_1e9ij_62", Nt = "_buttons_1e9ij_66", kt = "_prev_1e9ij_71", Tt = "_disabled_1e9ij_71", At = "_next_1e9ij_72", o = {
+import '../../assets/index31.css';const gt = "_carousel_1e9ij_1", xt = "_noPointerEvents_1e9ij_9", $t = "_trackContainer_1e9ij_13", Ct = "_track_1e9ij_13", Et = "_page_1e9ij_28", Xt = "_controls_1e9ij_34", jt = "_indicators_1e9ij_45", It = "_indicator_1e9ij_45", yt = "_active_1e9ij_62", Nt = "_buttons_1e9ij_66", kt = "_prev_1e9ij_71", Tt = "_disabled_1e9ij_71", At = "_next_1e9ij_72", o = {
   carousel: gt,
   noPointerEvents: xt,
   trackContainer: $t,
@@ -10,15 +10,15 @@ import '../../assets/index31.css';const gt = "_carousel_1e9ij_1", xt = "_noPoint
   page: Et,
   controls: Xt,
   indicators: jt,
-  indicator: yt,
-  active: It,
+  indicator: It,
+  active: yt,
   buttons: Nt,
   prev: kt,
   disabled: Tt,
   next: At
 };
 function Pt({
-  items: m,
+  items: _,
   itemsPerPage: i = 9,
   itemsPerRow: J = 3,
   autoplay: K = !1,
@@ -28,60 +28,60 @@ function Pt({
   siblingRef: l,
   isSplit: D = !1
 }) {
-  const [d, u] = c(0), [f, M] = c(0), [S, Z] = c(0), [w, tt] = c(i), [b, et] = c(!1), [L, nt] = c(K), ot = E(null), g = E(null), p = E(null), x = V, [v, j] = c(!1), [P, z] = c(null), [$, Y] = c(null), [R, U] = c(null), [st, B] = c(!1), [_, G] = c(null), [y, O] = c(null), ct = (t) => {
-    Math.abs((y ?? 0) - (_ ?? 0)) > 25 && (t.stopPropagation(), t.preventDefault());
+  const [d, u] = c(0), [m, M] = c(0), [S, Z] = c(0), [w, tt] = c(i), [b, et] = c(!1), [L, nt] = c(K), ot = C(null), g = C(null), f = C(null), x = V, [p, X] = c(!1), [P, z] = c(null), [$, Y] = c(null), [R, U] = c(null), [st, B] = c(!1), [v, G] = c(null), [j, O] = c(null), ct = (t) => {
+    Math.abs((j ?? 0) - (v ?? 0)) > 25 && (t.stopPropagation(), t.preventDefault());
   }, rt = (t) => {
     G(t.clientX);
   }, at = (t) => {
-    _ !== null && Math.abs(t.clientX - _) > 5 && (B(!0), O(t.clientX));
+    v !== null && Math.abs(t.clientX - v) > 5 && (B(!0), O(t.clientX));
   }, it = () => {
-    if (!_ || !y) {
+    if (!v || !j) {
       I();
       return;
     }
-    const t = _ - y;
+    const t = v - j;
     Math.abs(t) > 50 && (t > 0 ? k() : T()), I();
   }, lt = () => {
     I();
   }, I = () => {
     B(!1), G(null), O(null);
   }, dt = (t) => {
-    Y(t.touches[0].clientX), z(t.touches[0].clientY), j(!1);
-  }, q = E(null);
-  X(() => {
+    Y(t.touches[0].clientX), z(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);
-      !v && Math.abs(s) > Math.abs(a) && j(!0), v && (n.preventDefault(), U(n.touches[0].clientX));
+      !p && Math.abs(s) > Math.abs(a) && X(!0), p && (n.preventDefault(), U(n.touches[0].clientX));
     };
     return t.addEventListener("touchmove", e), () => {
       t.removeEventListener("touchmove", e);
     };
-  }, [v, $, P]);
+  }, [p, $, P]);
   const ut = () => {
     if ($ === null || R === null) return;
     const t = $ - R;
-    Math.abs(t) > 50 && (t > 0 ? k() : T()), Y(null), U(null), z(null), j(!1);
+    Math.abs(t) > 50 && (t > 0 ? k() : T()), Y(null), U(null), z(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;
   };
-  X(() => {
+  E(() => {
     if (typeof window < "u") {
       const t = () => {
         const e = window.innerWidth < 768, n = e ? 1 : i;
         et(e), tt(e ? 1 : i), u(
-          (s) => Math.min(s, Math.ceil(m.length / n) - 1)
+          (s) => Math.min(s, Math.ceil(_.length / n) - 1)
         );
       };
       return t(), window.addEventListener("resize", t), () => window.removeEventListener("resize", t);
     }
   }, [i]);
-  const C = Math.ceil(w / J), F = ht(m, w), h = F.length, ft = 3 * 16, pt = 3 * 16;
-  X(() => {
+  const y = Math.ceil(w / J), F = ht(_, w), h = F.length, ft = 3 * 16, pt = 3 * 16;
+  E(() => {
     const t = new ResizeObserver((e) => {
       var n, s;
       for (let a of e)
@@ -93,38 +93,38 @@ function Pt({
           ));
           const mt = b ? 1 : i;
           u(
-            (Mt) => Math.min(Mt, Math.ceil(m.length / mt) - 1)
+            (Mt) => Math.min(Mt, Math.ceil(_.length / mt) - 1)
           );
         }
     });
     return x != null && x.current && t.observe(x.current), () => t.disconnect();
   }, [b, D]);
   const N = () => {
-    p.current && clearInterval(p.current), nt(!1);
+    f.current && clearInterval(f.current), nt(!1);
   }, k = () => {
     N(), u((t) => Math.min(t + 1, h - 1));
   }, T = () => {
     N(), u((t) => Math.max(t - 1, 0));
   }, vt = (t) => {
     N(), u(t);
-  }, _t = () => f ? `translateX(-${d * f}px)` : "translateX(0px)", H = () => {
+  }, _t = () => m ? `translateX(-${d * m}px)` : "translateX(0px)", H = () => {
     u((t) => t >= h - 1 ? 0 : t + 1);
   };
-  return X(() => (L && (p.current = setInterval(
+  return E(() => (L && (f.current = setInterval(
     H,
     W * 1e3
   )), () => {
-    p.current && clearInterval(p.current);
+    f.current && clearInterval(f.current);
   }), [L, W, H]), /* @__PURE__ */ A("div", { className: `${Q ?? ""} ${o.carousel}`, ref: ot, children: [
     /* @__PURE__ */ r(
       "div",
       {
         ref: q,
-        className: `${o.trackContainer} ${st || v ? o.noPointerEvents : ""}
+        className: `${o.trackContainer} ${st || p ? o.noPointerEvents : ""}
           `,
         style: {
-          maxWidth: `${f}px`,
-          touchAction: v ? "none" : "pan-y"
+          maxWidth: `${m}px`,
+          touchAction: p ? "none" : "pan-y"
         },
         onTouchStart: dt,
         onTouchEnd: ut,
@@ -143,20 +143,17 @@ function Pt({
               {
                 className: o.page,
                 style: {
-                  display: C > 1 ? "grid" : "flex",
+                  display: y > 1 ? "grid" : "flex",
                   gridTemplateColumns: `repeat(${Math.ceil(
-                    w / C
+                    w / y
                   )}, 1fr)`,
-                  gridTemplateRows: `repeat(${C}, auto)`,
-                  width: `${f}px`
+                  gridTemplateRows: `repeat(${y}, auto)`,
+                  width: `${m}px`
                 },
                 children: t.map((n, s) => /* @__PURE__ */ r(
                   "div",
                   {
                     onClickCapture: ct,
-                    style: {
-                      width: `${f / C - 16}px`
-                    },
                     children: n
                   },
                   s
@@ -202,7 +199,7 @@ function Pt({
                 "aria-label": "Next slide",
                 className: `${o.next} ${d >= h - 1 ? o.disabled : ""}`,
                 onClick: k,
-                disabled: d >= m.length - w,
+                disabled: d >= _.length - w,
                 children: /* @__PURE__ */ r(bt, { size: 36 })
               }
             )

package/package.json

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