quirk-ui 0.0.75 → 0.0.77

package/dist/components/Avatar/index.js

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

package/dist/components/Carousel/index.js

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

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

@@ -2,6 +2,7 @@ declare const sizeClassMap: {
     readonly sm: string;
     readonly md: string;
     readonly lg: string;
+    readonly xl: string;
 };
 declare const statusClassMap: {
     readonly online: string;

package/package.json

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