quirk-ui 0.0.78 → 0.0.80

package/dist/components/Avatar/index.js

@@ -1,10 +1,10 @@
-import { jsxs as d, jsx as a } from "react/jsx-runtime";
-import '../../assets/index23.css';const h = "_avatar_1ihs2_1", u = "_sm_1ihs2_17", f = "_md_1ihs2_23", v = "_lg_1ihs2_29", g = "_xl_1ihs2_35", b = "_image_1ihs2_41", x = "_initials_1ihs2_48", y = "_status_1ihs2_53", p = "_online_1ihs2_65", $ = "_offline_1ihs2_69", N = "_busy_1ihs2_73", s = {
-  avatar: h,
-  sm: u,
-  md: f,
-  lg: v,
-  xl: g,
+import { jsxs as h, jsx as i } from "react/jsx-runtime";
+import '../../assets/index23.css';const u = "_avatar_1ihs2_1", f = "_sm_1ihs2_17", d = "_md_1ihs2_23", g = "_lg_1ihs2_29", v = "_xl_1ihs2_35", b = "_image_1ihs2_41", x = "_initials_1ihs2_48", y = "_status_1ihs2_53", p = "_online_1ihs2_65", $ = "_offline_1ihs2_69", N = "_busy_1ihs2_73", s = {
+  avatar: u,
+  sm: f,
+  md: d,
+  lg: g,
+  xl: v,
   image: b,
   initials: x,
   status: y,
@@ -22,31 +22,31 @@ import '../../assets/index23.css';const h = "_avatar_1ihs2_1", u = "_sm_1ihs2_17
   busy: s.busy
 };
 function z({
-  src: i,
-  alt: n = "User avatar",
+  src: a,
+  alt: t = "User avatar",
   size: _ = "md",
   initials: e,
-  status: t,
-  borderColor: c = "var(--color-border)",
-  backgroundColor: r = "var(--color-secondary)",
+  status: n,
+  borderColor: m,
+  backgroundColor: c,
   onClick: l,
-  className: m
+  className: r
 }) {
   const o = !!l;
-  return /* @__PURE__ */ d(
+  return /* @__PURE__ */ h(
     "div",
     {
-      className: `${m ?? ""} ${s.avatar} ${j[_]}`,
-      style: { borderColor: c, backgroundColor: r },
+      className: `${r ?? ""} ${s.avatar} ${j[_]}`,
+      style: { borderColor: m, backgroundColor: c },
       onClick: l,
       role: o ? "button" : void 0,
-      "aria-label": o ? n : void 0,
+      "aria-label": o ? t : void 0,
       children: [
-        i ? /* @__PURE__ */ a("img", { src: i, alt: n, className: s.image }) : /* @__PURE__ */ a("span", { className: s.initials, children: e }),
-        t && /* @__PURE__ */ a(
+        a ? /* @__PURE__ */ i("img", { src: a, alt: t, className: s.image }) : /* @__PURE__ */ i("span", { className: s.initials, children: e }),
+        n && /* @__PURE__ */ i(
           "span",
           {
-            className: `${s.status} ${C[t]}`,
+            className: `${s.status} ${C[n]}`,
             role: "status"
           }
         )

package/dist/components/Carousel/index.js

@@ -1,134 +1,139 @@
-import { jsxs as X, jsx as s } from "react/jsx-runtime";
-import { useState as o, useRef as k, useEffect as T } from "react";
-import { A as ht } from "../../arrow-left-BIJvHwNQ.js";
-import { A as vt } from "../../arrow-right-QEwnX3Sk.js";
-import '../../assets/index31.css';const bt = "_carousel_zbb4v_1", ft = "_noPointerEvents_zbb4v_9", _t = "_trackContainer_zbb4v_13", pt = "_track_zbb4v_13", mt = "_page_zbb4v_28", wt = "_controls_zbb4v_34", Mt = "_indicators_zbb4v_45", xt = "_indicator_zbb4v_45", $t = "_active_zbb4v_62", gt = "_buttons_zbb4v_66", zt = "_prev_zbb4v_71", Ct = "_disabled_zbb4v_71", Et = "_next_zbb4v_72", n = {
-  carousel: bt,
-  noPointerEvents: ft,
-  trackContainer: _t,
-  track: pt,
-  page: mt,
-  controls: wt,
-  indicators: Mt,
+import { jsxs as E, jsx as s } from "react/jsx-runtime";
+import { useState as o, useRef as X, useEffect as y } from "react";
+import { A as vt } from "../../arrow-left-BIJvHwNQ.js";
+import { A as bt } from "../../arrow-right-QEwnX3Sk.js";
+import '../../assets/index31.css';const ft = "_carousel_zbb4v_1", _t = "_noPointerEvents_zbb4v_9", pt = "_trackContainer_zbb4v_13", mt = "_track_zbb4v_13", wt = "_page_zbb4v_28", Mt = "_controls_zbb4v_34", gt = "_indicators_zbb4v_45", xt = "_indicator_zbb4v_45", $t = "_active_zbb4v_62", zt = "_buttons_zbb4v_66", Ct = "_prev_zbb4v_71", Et = "_disabled_zbb4v_71", Xt = "_next_zbb4v_72", n = {
+  carousel: ft,
+  noPointerEvents: _t,
+  trackContainer: pt,
+  track: mt,
+  page: wt,
+  controls: Mt,
+  indicators: gt,
   indicator: xt,
   active: $t,
-  buttons: gt,
-  prev: zt,
-  disabled: Ct,
-  next: Et
+  buttons: zt,
+  prev: Ct,
+  disabled: Et,
+  next: Xt
 };
-function Tt({
-  items: I,
-  itemsPerPage: b = 9,
+function It({
+  items: N,
+  itemsPerPage: f = 9,
   itemsPerRow: O = 3,
   autoplay: q = !1,
-  autoplayInterval: W = 3,
+  autoplayInterval: k = 3,
   className: F,
   externalRef: H,
   siblingRef: a,
-  isSplit: A = !1
+  isSplit: T = !1
 }) {
-  const [l, i] = o(0), [u, f] = o(0), [P, J] = o(0), [_, K] = o(b), [D, Q] = o(!1), [S, V] = o(q), Y = k(null), p = k(null), h = k(null), m = H, [L, j] = o(null), [R, U] = o(null), [w, x] = o(!1), [$, g] = o(null), [z, C] = o(null), Z = (t) => {
-    Math.abs((z ?? 0) - ($ ?? 0)) > 5 && (t.stopPropagation(), t.preventDefault());
-  }, tt = (t) => {
-    x(!0), g(t.clientX);
+  const [l, i] = o(0), [h, _] = o(0), [I, J] = o(0), [p, K] = o(f), [W, Q] = o(!1), [A, V] = o(q), Y = X(null), m = X(null), v = X(null), w = H, [D, P] = o(null), [S, L] = o(null), [Z, j] = o(!1), [d, R] = o(null), [M, U] = o(null), tt = (t) => {
+    console.log(Math.abs((M ?? 0) - (d ?? 0))), Math.abs((M ?? 0) - (d ?? 0)) > 25 && (t.stopPropagation(), t.preventDefault());
   }, et = (t) => {
-    w && C(t.clientX);
-  }, nt = () => {
-    if (!w || $ === null || z === null) return;
-    const t = $ - z;
-    Math.abs(t) > 50 && (t > 0 ? y() : N()), x(!1), g(null), C(null);
+    R(t.clientX);
+  }, nt = (t) => {
+    d !== null && Math.abs(t.clientX - d) > 5 && (j(!0), U(t.clientX));
   }, ot = () => {
-    w && (x(!1), g(null), C(null));
-  }, st = (t) => {
-    j(t.touches[0].clientX);
+    if (!d || !M) {
+      x();
+      return;
+    }
+    const t = d - M;
+    Math.abs(t) > 50 && (t > 0 ? z() : C()), x();
+  }, st = () => {
+    x();
+  }, x = () => {
+    j(!1), R(null), U(null);
   }, ct = (t) => {
-    U(t.touches[0].clientX);
-  }, rt = () => {
-    if (L === null || R === null) return;
-    const t = L - R;
-    Math.abs(t) > 50 && (t > 0 ? y() : N()), j(null), U(null);
-  }, at = (t, e) => {
+    P(t.touches[0].clientX);
+  }, rt = (t) => {
+    L(t.touches[0].clientX);
+  }, at = () => {
+    if (D === null || S === null) return;
+    const t = D - S;
+    Math.abs(t) > 50 && (t > 0 ? z() : C()), P(null), L(null);
+  }, lt = (t, e) => {
     const r = [];
     for (let c = 0; c < t.length; c += e)
       r.push(t.slice(c, c + e));
     return r;
   };
-  T(() => {
+  y(() => {
     if (typeof window < "u") {
       const t = () => {
         const e = window.innerWidth < 768;
-        Q(e), K(e ? 1 : b), i(0);
+        Q(e), K(e ? 1 : f), i(0);
       };
       return t(), window.addEventListener("resize", t), () => window.removeEventListener("resize", t);
     }
-  }, [b]);
-  const M = Math.ceil(_ / O), B = at(I, _), d = B.length, lt = 3 * 16, it = 6 * 16;
-  T(() => {
+  }, [f]);
+  const g = Math.ceil(p / O), B = lt(N, p), u = B.length, it = 3 * 16, dt = 6 * 16;
+  y(() => {
     const t = new ResizeObserver((e) => {
       var r, c;
-      for (let v of e)
-        v.contentRect && (D ? f(v.contentRect.width - it) : A ? a != null && a.current ? f(
-          v.contentRect.width - ((r = a == null ? void 0 : a.current) == null ? void 0 : r.offsetWidth) - lt
-        ) : f(v.contentRect.width) : (f(v.contentRect.width), J(
-          ((c = p == null ? void 0 : p.current) == null ? void 0 : c.children[0].children[0].children[0].getBoundingClientRect().width) ?? 0
+      for (let b of e)
+        b.contentRect && (W ? _(b.contentRect.width - dt) : T ? a != null && a.current ? _(
+          b.contentRect.width - ((r = a == null ? void 0 : a.current) == null ? void 0 : r.offsetWidth) - it
+        ) : _(b.contentRect.width) : (_(b.contentRect.width), J(
+          ((c = m == null ? void 0 : m.current) == null ? void 0 : c.children[0].children[0].children[0].getBoundingClientRect().width) ?? 0
         )), i(0));
     });
-    return m != null && m.current && t.observe(m.current), () => t.disconnect();
-  }, [D, A]);
-  const E = () => {
-    h.current && clearInterval(h.current), V(!1);
-  }, y = () => {
-    E(), i((t) => Math.min(t + 1, d - 1));
-  }, N = () => {
-    E(), i((t) => Math.max(t - 1, 0));
-  }, dt = (t) => {
-    E(), i(t);
-  }, ut = () => u ? `translateX(-${l * u}px)` : "translateX(0px)", G = () => {
-    i((t) => t >= d - 1 ? 0 : t + 1);
+    return w != null && w.current && t.observe(w.current), () => t.disconnect();
+  }, [W, T]);
+  const $ = () => {
+    v.current && clearInterval(v.current), V(!1);
+  }, z = () => {
+    $(), i((t) => Math.min(t + 1, u - 1));
+  }, C = () => {
+    $(), i((t) => Math.max(t - 1, 0));
+  }, ut = (t) => {
+    $(), i(t);
+  }, ht = () => h ? `translateX(-${l * h}px)` : "translateX(0px)", G = () => {
+    i((t) => t >= u - 1 ? 0 : t + 1);
   };
-  return T(() => (S && (h.current = setInterval(
+  return y(() => (A && (v.current = setInterval(
     G,
-    W * 1e3
+    k * 1e3
   )), () => {
-    h.current && clearInterval(h.current);
-  }), [S, W, G]), /* @__PURE__ */ X("div", { className: `${F ?? ""} ${n.carousel}`, ref: Y, children: [
+    v.current && clearInterval(v.current);
+  }), [A, k, G]), /* @__PURE__ */ E("div", { className: `${F ?? ""} ${n.carousel}`, ref: Y, children: [
     /* @__PURE__ */ s(
       "div",
       {
         className: n.trackContainer,
-        style: { maxWidth: `${u}px` },
-        onTouchStart: st,
-        onTouchMove: ct,
-        onTouchEnd: rt,
-        onMouseDown: tt,
-        onMouseMove: et,
-        onMouseUp: nt,
-        onMouseLeave: ot,
+        style: { maxWidth: `${h}px` },
+        onTouchStart: ct,
+        onTouchMove: rt,
+        onTouchEnd: at,
+        onMouseDown: et,
+        onMouseMove: nt,
+        onMouseUp: ot,
+        onMouseLeave: st,
         children: /* @__PURE__ */ s(
           "div",
           {
-            ref: p,
-            className: `${n.track} ${w ? n.noPointerEvents : ""}`,
-            style: { width: `${d * 100}%`, transform: ut() },
+            ref: m,
+            className: `${n.track} ${Z ? n.noPointerEvents : ""}`,
+            style: { width: `${u * 100}%`, transform: ht() },
             children: B.map((t, e) => /* @__PURE__ */ s(
               "div",
               {
                 className: n.page,
                 style: {
-                  display: M > 1 ? "grid" : "flex",
+                  display: g > 1 ? "grid" : "flex",
                   gridTemplateColumns: `repeat(${Math.ceil(
-                    _ / M
+                    p / g
                   )}, 1fr)`,
-                  gridTemplateRows: `repeat(${M}, auto)`,
-                  width: `${u}px`
+                  gridTemplateRows: `repeat(${g}, auto)`,
+                  width: `${h}px`
                 },
                 children: t.map((r, c) => /* @__PURE__ */ s(
                   "div",
                   {
-                    onClickCapture: Z,
+                    onClickCapture: tt,
                     style: {
-                      width: `${u / M - 16}px`
+                      width: `${h / g - 16}px`
                     },
                     children: r
                   },
@@ -141,42 +146,42 @@ function Tt({
         )
       }
     ),
-    d > 1 && /* @__PURE__ */ X(
+    u > 1 && /* @__PURE__ */ E(
       "div",
       {
         className: n.controls,
         style: {
-          maxWidth: P > 0 && b === 1 ? `${P}px` : "unset"
+          maxWidth: I > 0 && f === 1 ? `${I}px` : "unset"
         },
         children: [
-          /* @__PURE__ */ s("div", { className: n.indicators, children: Array.from({ length: d }).map((t, e) => /* @__PURE__ */ s(
+          /* @__PURE__ */ s("div", { className: n.indicators, children: Array.from({ length: u }).map((t, e) => /* @__PURE__ */ s(
             "button",
             {
               className: `${n.indicator} ${e === l ? n.active : ""}`,
-              onClick: () => dt(e),
+              onClick: () => ut(e),
               "aria-label": `Go to group ${e + 1}`
             },
             e
           )) }),
-          /* @__PURE__ */ X("div", { className: n.buttons, children: [
+          /* @__PURE__ */ E("div", { className: n.buttons, children: [
             /* @__PURE__ */ s(
               "button",
               {
                 "aria-label": "Previous slide",
                 className: `${n.prev} ${l === 0 ? n.disabled : ""}`,
-                onClick: N,
+                onClick: C,
                 disabled: l === 0,
-                children: /* @__PURE__ */ s(ht, { size: 36 })
+                children: /* @__PURE__ */ s(vt, { size: 36 })
               }
             ),
             /* @__PURE__ */ s(
               "button",
               {
                 "aria-label": "Next slide",
-                className: `${n.next} ${l >= d - 1 ? n.disabled : ""}`,
-                onClick: y,
-                disabled: l >= I.length - _,
-                children: /* @__PURE__ */ s(vt, { size: 36 })
+                className: `${n.next} ${l >= u - 1 ? n.disabled : ""}`,
+                onClick: z,
+                disabled: l >= N.length - p,
+                children: /* @__PURE__ */ s(bt, { size: 36 })
               }
             )
           ] })
@@ -186,5 +191,5 @@ function Tt({
   ] });
 }
 export {
-  Tt as Carousel
+  It as Carousel
 };

package/package.json

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