quirk-ui 0.0.51 → 0.0.52

package/dist/components/Carousel/index.js

@@ -1,96 +1,96 @@
 import { jsxs as w, jsx as s } from "react/jsx-runtime";
-import { useState as m, useRef as W, useEffect as x } from "react";
+import { useState as v, useRef as I, useEffect as x } from "react";
 import { A as O } from "../../arrow-left-BIJvHwNQ.js";
-import { A as q } from "../../arrow-right-QEwnX3Sk.js";
-import '../../assets/index31.css';const B = "_carousel_pk3a7_1", F = "_trackContainer_pk3a7_9", H = "_track_pk3a7_9", J = "_page_pk3a7_24", K = "_controls_pk3a7_30", Q = "_indicators_pk3a7_47", R = "_indicator_pk3a7_47", S = "_active_pk3a7_64", U = "_buttons_pk3a7_68", V = "_prev_pk3a7_73", Y = "_disabled_pk3a7_73", Z = "_next_pk3a7_74", n = {
-  carousel: B,
-  trackContainer: F,
-  track: H,
-  page: J,
-  controls: K,
-  indicators: Q,
-  indicator: R,
-  active: S,
+import { A as S } from "../../arrow-right-QEwnX3Sk.js";
+import '../../assets/index31.css';const q = "_carousel_pk3a7_1", B = "_trackContainer_pk3a7_9", F = "_track_pk3a7_9", H = "_page_pk3a7_24", J = "_controls_pk3a7_30", K = "_indicators_pk3a7_47", P = "_indicator_pk3a7_47", Q = "_active_pk3a7_64", U = "_buttons_pk3a7_68", V = "_prev_pk3a7_73", Y = "_disabled_pk3a7_73", Z = "_next_pk3a7_74", n = {
+  carousel: q,
+  trackContainer: B,
+  track: F,
+  page: H,
+  controls: J,
+  indicators: K,
+  indicator: P,
+  active: Q,
   buttons: U,
   prev: V,
   disabled: Y,
   next: Z
 };
-function rt({
+function st({
   items: $,
-  itemsPerPage: v = 3,
-  itemsPerRow: z = 3,
-  autoPlay: c = !1,
+  itemsPerPage: b = 9,
+  itemsPerRow: M = 3,
+  autoPlay: a = !1,
   autoPlayInterval: N = 3e3,
-  className: A,
-  externalRef: y,
+  className: W,
+  externalRef: z,
   siblingRef: o,
-  isSplit: b = !1
+  isSplit: A = !1
 }) {
-  const [i, p] = m(0), [l, C] = m(0), [h, T] = m(v), [g, E] = m(!0), I = W(null), k = W(null), u = b && g ? y : I, L = (t, e) => {
-    const a = [];
+  const [i, l] = v(0), [d, h] = v(0), [_, y] = v(b), [g, T] = v(!1), E = I(null), k = I(null), m = z, L = (t, e) => {
+    const c = [];
     for (let r = 0; r < t.length; r += e)
-      a.push(t.slice(r, r + e));
-    return a;
+      c.push(t.slice(r, r + e));
+    return c;
   };
   x(() => {
     const t = () => {
       const e = window.innerWidth < 768;
-      E(e), T(e ? 1 : v);
+      T(e), y(e ? 1 : b), l(0);
     };
     return t(), window.addEventListener("resize", t), () => window.removeEventListener("resize", t);
-  }, [v]);
-  const _ = Math.ceil(h / z), M = L($, h), d = M.length, j = 3 * 16;
+  }, []);
+  const u = Math.ceil(_ / M), C = L($, _), p = C.length, j = 3 * 16, R = 6 * 16;
   x(() => {
     const t = new ResizeObserver((e) => {
-      var a;
+      var c;
       for (let r of e)
-        r.contentRect && (b && g ? o != null && o.current && C(
-          r.contentRect.width - ((a = o == null ? void 0 : o.current) == null ? void 0 : a.offsetWidth) - j
-        ) : C(r.contentRect.width), p(0));
+        r.contentRect && (g ? h(r.contentRect.width - R) : A && o != null && o.current ? h(
+          r.contentRect.width - ((c = o == null ? void 0 : o.current) == null ? void 0 : c.offsetWidth) - j
+        ) : h(r.contentRect.width), l(0));
     });
-    return u != null && u.current && t.observe(u.current), () => t.disconnect();
-  }, []);
+    return m != null && m.current && t.observe(m.current), () => t.disconnect();
+  }, [g]);
   const f = () => {
-    p((t) => Math.min(t + 1, d - 1));
+    l((t) => Math.min(t + 1, p - 1));
   }, X = () => {
-    p((t) => Math.max(t - 1, 0));
+    l((t) => Math.max(t - 1, 0));
   }, D = (t) => {
-    p(t);
-  }, G = () => l ? `translateX(-${i * l}px)` : "translateX(0px)";
-  return x(() => (c && (k.current = setInterval(f, N)), () => {
+    l(t);
+  }, G = () => d ? `translateX(-${i * d}px)` : "translateX(0px)";
+  return x(() => (a && (k.current = setInterval(f, N)), () => {
     k.current && clearInterval(k.current);
-  }), [c, N, f]), /* @__PURE__ */ w("div", { className: `${A ?? ""} ${n.carousel}`, ref: I, children: [
+  }), [a, N, f]), /* @__PURE__ */ w("div", { className: `${W ?? ""} ${n.carousel}`, ref: E, children: [
     /* @__PURE__ */ s(
       "div",
       {
         className: n.trackContainer,
-        style: { maxWidth: `${l}px` },
+        style: { maxWidth: `${d}px` },
         children: /* @__PURE__ */ s(
           "div",
           {
             className: n.track,
-            style: { width: `${d * 100}%`, transform: G() },
-            children: M.map((t, e) => /* @__PURE__ */ s(
+            style: { width: `${p * 100}%`, transform: G() },
+            children: C.map((t, e) => /* @__PURE__ */ s(
               "div",
               {
                 className: n.page,
                 style: {
-                  display: _ > 1 ? "grid" : "flex",
+                  display: u > 1 ? "grid" : "flex",
                   gridTemplateColumns: `repeat(${Math.ceil(
-                    h / _
+                    _ / u
                   )}, 1fr)`,
-                  gridTemplateRows: `repeat(${_}, auto)`,
-                  width: `${l}px`
+                  gridTemplateRows: `repeat(${u}, auto)`,
+                  width: `${d}px`
                 },
-                children: t.map((a, r) => /* @__PURE__ */ s(
+                children: t.map((c, r) => /* @__PURE__ */ s(
                   "div",
                   {
                     className: n.slide,
                     style: {
-                      width: `${l / _ - 16}px`
+                      width: `${d / u - 16}px`
                     },
-                    children: a
+                    children: c
                   },
                   r
                 ))
@@ -101,8 +101,8 @@ function rt({
         )
       }
     ),
-    d > 1 && /* @__PURE__ */ w("div", { className: n.controls, children: [
-      /* @__PURE__ */ s("div", { className: n.indicators, children: Array.from({ length: d }).map((t, e) => /* @__PURE__ */ s(
+    p > 1 && /* @__PURE__ */ w("div", { className: n.controls, children: [
+      /* @__PURE__ */ s("div", { className: n.indicators, children: Array.from({ length: p }).map((t, e) => /* @__PURE__ */ s(
         "button",
         {
           className: `${n.indicator} ${e === i ? n.active : ""}`,
@@ -116,9 +116,9 @@ function rt({
           "button",
           {
             "aria-label": "Previous slide",
-            className: `${n.prev} ${!c && i === 0 ? n.disabled : ""}`,
+            className: `${n.prev} ${!a && i === 0 ? n.disabled : ""}`,
             onClick: X,
-            disabled: !c && i === 0,
+            disabled: !a && i === 0,
             children: /* @__PURE__ */ s(O, { size: 36 })
           }
         ),
@@ -126,10 +126,10 @@ function rt({
           "button",
           {
             "aria-label": "Next slide",
-            className: `${n.next} ${!c && i >= d - 1 ? n.disabled : ""}`,
+            className: `${n.next} ${!a && i >= p - 1 ? n.disabled : ""}`,
             onClick: f,
-            disabled: !c && i >= $.length - h,
-            children: /* @__PURE__ */ s(q, { size: 36 })
+            disabled: !a && i >= $.length - _,
+            children: /* @__PURE__ */ s(S, { size: 36 })
           }
         )
       ] })
@@ -137,5 +137,5 @@ function rt({
   ] });
 }
 export {
-  rt as Carousel
+  st as Carousel
 };

package/package.json

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