quirk-ui 0.0.72 → 0.0.74

package/dist/components/Carousel/index.js

@@ -1,109 +1,107 @@
 import { jsxs as z, jsx as o } from "react/jsx-runtime";
-import { useState as u, useRef as $, useEffect as y } from "react";
-import { A as S } from "../../arrow-left-BIJvHwNQ.js";
-import { A as U } from "../../arrow-right-QEwnX3Sk.js";
-import '../../assets/index31.css';const V = "_carousel_oeqfz_1", Y = "_trackContainer_oeqfz_9", Z = "_track_oeqfz_9", tt = "_page_oeqfz_24", et = "_controls_oeqfz_30", nt = "_indicators_oeqfz_41", ot = "_indicator_oeqfz_41", rt = "_active_oeqfz_58", st = "_buttons_oeqfz_62", ct = "_prev_oeqfz_67", at = "_disabled_oeqfz_67", it = "_next_oeqfz_68", n = {
-  carousel: V,
-  trackContainer: Y,
-  track: Z,
-  page: tt,
-  controls: et,
-  indicators: nt,
-  indicator: ot,
-  active: rt,
-  buttons: st,
-  prev: ct,
-  disabled: at,
-  next: it
+import { useState as d, useRef as $, useEffect as y } from "react";
+import { A as Q } from "../../arrow-left-BIJvHwNQ.js";
+import { A as S } from "../../arrow-right-QEwnX3Sk.js";
+import '../../assets/index31.css';const U = "_carousel_oeqfz_1", V = "_trackContainer_oeqfz_9", Y = "_track_oeqfz_9", Z = "_page_oeqfz_24", tt = "_controls_oeqfz_30", et = "_indicators_oeqfz_41", nt = "_indicator_oeqfz_41", ot = "_active_oeqfz_58", rt = "_buttons_oeqfz_62", st = "_prev_oeqfz_67", ct = "_disabled_oeqfz_67", at = "_next_oeqfz_68", n = {
+  carousel: U,
+  trackContainer: V,
+  track: Y,
+  page: Z,
+  controls: tt,
+  indicators: et,
+  indicator: nt,
+  active: ot,
+  buttons: rt,
+  prev: st,
+  disabled: ct,
+  next: at
 };
-function ft({
+function ht({
   items: N,
-  itemsPerPage: m = 9,
-  itemsPerRow: E = 3,
-  autoplay: T = !1,
+  itemsPerPage: _ = 9,
+  itemsPerRow: M = 3,
+  autoplay: E = !1,
   autoplayInterval: C = 3,
-  className: L,
-  externalRef: j,
-  siblingRef: a,
-  isSplit: g = !1
+  className: T,
+  externalRef: L,
+  siblingRef: c,
+  isSplit: q = !1
 }) {
-  const [i, l] = u(0), [h, p] = u(0), [q, P] = u(0), [v, X] = u(m), [I, B] = u(!1), [W, D] = u(T), G = $(null), s = $(null), f = $(null), w = j, O = (t, e) => {
-    const c = [];
+  const [a, i] = d(0), [u, m] = d(0), [g, j] = d(0), [p, P] = d(_), [k, R] = d(!1), [I, X] = d(E), B = $(null), v = $(null), h = $(null), w = L, D = (t, e) => {
+    const s = [];
     for (let r = 0; r < t.length; r += e)
-      c.push(t.slice(r, r + e));
-    return c;
+      s.push(t.slice(r, r + e));
+    return s;
   };
   y(() => {
     if (typeof window < "u") {
       const t = () => {
         const e = window.innerWidth < 768;
-        B(e), X(e ? 1 : m), l(0);
+        R(e), P(e ? 1 : _), i(0);
       };
       return t(), window.addEventListener("resize", t), () => window.removeEventListener("resize", t);
     }
-  }, [m]);
-  const x = Math.ceil(v / E), k = O(N, v), d = k.length, F = 3 * 16, H = 6 * 16;
+  }, [_]);
+  const x = Math.ceil(p / M), W = D(N, p), l = W.length, G = 3 * 16, O = 6 * 16;
   y(() => {
     const t = new ResizeObserver((e) => {
-      var c, r, M;
-      for (let _ of e)
-        _.contentRect && (I ? p(_.contentRect.width - H) : g ? a != null && a.current ? p(
-          _.contentRect.width - ((c = a == null ? void 0 : a.current) == null ? void 0 : c.offsetWidth) - F
-        ) : p(_.contentRect.width) : (console.log(
-          (r = s == null ? void 0 : s.current) == null ? void 0 : r.children[0].children[0].children[0]
-        ), p(_.contentRect.width), P(
-          ((M = s == null ? void 0 : s.current) == null ? void 0 : M.children[0].children[0].children[0].getBoundingClientRect().width) ?? 0
-        )), l(0));
+      var s, r;
+      for (let f of e)
+        f.contentRect && (k ? m(f.contentRect.width - O) : q ? c != null && c.current ? m(
+          f.contentRect.width - ((s = c == null ? void 0 : c.current) == null ? void 0 : s.offsetWidth) - G
+        ) : m(f.contentRect.width) : (m(f.contentRect.width), j(
+          ((r = v == null ? void 0 : v.current) == null ? void 0 : r.children[0].children[0].children[0].getBoundingClientRect().width) ?? 0
+        )), i(0));
     });
     return w != null && w.current && t.observe(w.current), () => t.disconnect();
-  }, [I, g]);
+  }, [k, q]);
   const b = () => {
-    f.current && clearInterval(f.current), D(!1);
-  }, J = () => {
-    b(), l((t) => Math.min(t + 1, d - 1));
-  }, K = () => {
-    b(), l((t) => Math.max(t - 1, 0));
-  }, Q = (t) => {
-    b(), l(t);
-  }, R = () => h ? `translateX(-${i * h}px)` : "translateX(0px)", A = () => {
-    l((t) => t >= d - 1 ? 0 : t + 1);
+    h.current && clearInterval(h.current), X(!1);
+  }, F = () => {
+    b(), i((t) => Math.min(t + 1, l - 1));
+  }, H = () => {
+    b(), i((t) => Math.max(t - 1, 0));
+  }, J = (t) => {
+    b(), i(t);
+  }, K = () => u ? `translateX(-${a * u}px)` : "translateX(0px)", A = () => {
+    i((t) => t >= l - 1 ? 0 : t + 1);
   };
-  return y(() => (W && (f.current = setInterval(
+  return y(() => (I && (h.current = setInterval(
     A,
     C * 1e3
   )), () => {
-    f.current && clearInterval(f.current);
-  }), [W, C, A]), /* @__PURE__ */ z("div", { className: `${L ?? ""} ${n.carousel}`, ref: G, children: [
+    h.current && clearInterval(h.current);
+  }), [I, C, A]), /* @__PURE__ */ z("div", { className: `${T ?? ""} ${n.carousel}`, ref: B, children: [
     /* @__PURE__ */ o(
       "div",
       {
         className: n.trackContainer,
-        style: { maxWidth: `${h}px` },
+        style: { maxWidth: `${u}px` },
         children: /* @__PURE__ */ o(
           "div",
           {
-            ref: s,
+            ref: v,
             className: n.track,
-            style: { width: `${d * 100}%`, transform: R() },
-            children: k.map((t, e) => /* @__PURE__ */ o(
+            style: { width: `${l * 100}%`, transform: K() },
+            children: W.map((t, e) => /* @__PURE__ */ o(
               "div",
               {
                 className: n.page,
                 style: {
                   display: x > 1 ? "grid" : "flex",
                   gridTemplateColumns: `repeat(${Math.ceil(
-                    v / x
+                    p / x
                   )}, 1fr)`,
                   gridTemplateRows: `repeat(${x}, auto)`,
-                  width: `${h}px`
+                  width: `${u}px`
                 },
-                children: t.map((c, r) => /* @__PURE__ */ o(
+                children: t.map((s, r) => /* @__PURE__ */ o(
                   "div",
                   {
                     style: {
-                      width: `${h / x - 16}px`
+                      width: `${u / x - 16}px`
                     },
-                    children: c
+                    children: s
                   },
                   r
                 ))
@@ -114,19 +112,19 @@ function ft({
         )
       }
     ),
-    d > 1 && /* @__PURE__ */ z(
+    l > 1 && /* @__PURE__ */ z(
       "div",
       {
         className: n.controls,
         style: {
-          maxWidth: q > 0 && m === 1 ? `${q}px` : "unset"
+          maxWidth: g > 0 && _ === 1 ? `${g}px` : "unset"
         },
         children: [
-          /* @__PURE__ */ o("div", { className: n.indicators, children: Array.from({ length: d }).map((t, e) => /* @__PURE__ */ o(
+          /* @__PURE__ */ o("div", { className: n.indicators, children: Array.from({ length: l }).map((t, e) => /* @__PURE__ */ o(
             "button",
             {
-              className: `${n.indicator} ${e === i ? n.active : ""}`,
-              onClick: () => Q(e),
+              className: `${n.indicator} ${e === a ? n.active : ""}`,
+              onClick: () => J(e),
               "aria-label": `Go to group ${e + 1}`
             },
             e
@@ -136,20 +134,20 @@ function ft({
               "button",
               {
                 "aria-label": "Previous slide",
-                className: `${n.prev} ${i === 0 ? n.disabled : ""}`,
-                onClick: K,
-                disabled: i === 0,
-                children: /* @__PURE__ */ o(S, { size: 36 })
+                className: `${n.prev} ${a === 0 ? n.disabled : ""}`,
+                onClick: H,
+                disabled: a === 0,
+                children: /* @__PURE__ */ o(Q, { size: 36 })
               }
             ),
             /* @__PURE__ */ o(
               "button",
               {
                 "aria-label": "Next slide",
-                className: `${n.next} ${i >= d - 1 ? n.disabled : ""}`,
-                onClick: J,
-                disabled: i >= N.length - v,
-                children: /* @__PURE__ */ o(U, { size: 36 })
+                className: `${n.next} ${a >= l - 1 ? n.disabled : ""}`,
+                onClick: F,
+                disabled: a >= N.length - p,
+                children: /* @__PURE__ */ o(S, { size: 36 })
               }
             )
           ] })
@@ -159,5 +157,5 @@ function ft({
   ] });
 }
 export {
-  ft as Carousel
+  ht as Carousel
 };

package/package.json

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