quirk-ui 0.0.50 → 0.0.52

package/dist/components/Carousel/Carousel.test.js

@@ -1,8 +1,8 @@
 import { jsxs as t, jsx as s } from "react/jsx-runtime";
-import { d as a, a as i, i as o, r as n, g as l, s as c } from "../../vi.ClIskdbk-CZ8iFAMK.js";
+import { d as i, a, i as o, r as n, g as l, s as c } from "../../vi.ClIskdbk-CZ8iFAMK.js";
 import { Carousel as d } from "./index.js";
 import "../../index-BBIdMcpm.js";
-a("Carousel", () => {
+i("Carousel", () => {
   const r = Array.from({ length: 6 }, (m, e) => /* @__PURE__ */ t("div", { "data-testid": "carousel-item", children: [
     "Item ",
     e + 1
@@ -12,7 +12,7 @@ a("Carousel", () => {
       writable: !0,
       configurable: !0,
       value: 1024
-    }), i(() => {
+    }), a(() => {
       window.dispatchEvent(new Event("resize"));
     }), global.ResizeObserver = class {
       observe() {
@@ -23,6 +23,8 @@ a("Carousel", () => {
       }
     };
   }), o("renders without crashing", () => {
-    n(/* @__PURE__ */ s(d, { items: r, itemsPerPage: 3, itemsPerRow: 1 })), l(c.getAllByTestId("carousel-item").length).toBeGreaterThan(0);
+    n(
+      /* @__PURE__ */ s(d, { isSplit: !0, items: r, itemsPerPage: 3, itemsPerRow: 1 })
+    ), l(c.getAllByTestId("carousel-item").length).toBeGreaterThan(0);
   });
 });

package/dist/components/Carousel/index.js

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

package/dist/lib/components/Carousel/index.d.ts

@@ -5,7 +5,10 @@ type CarouselProps = {
     itemsPerRow?: number;
     autoPlay?: boolean;
     autoPlayInterval?: number;
+    externalRef?: React.RefObject<HTMLElement>;
+    siblingRef?: React.RefObject<HTMLElement>;
+    isSplit: boolean;
     className?: string;
 };
-export declare function Carousel({ items, itemsPerPage, itemsPerRow, autoPlay, autoPlayInterval, className, }: CarouselProps): import("react/jsx-runtime").JSX.Element;
+export declare function Carousel({ items, itemsPerPage, itemsPerRow, autoPlay, autoPlayInterval, className, externalRef, siblingRef, isSplit, }: CarouselProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/package.json

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