quirk-ui 0.0.171 → 0.0.172

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (2) hide show
  1. package/dist/components/Carousel/index.js +47 -44
  2. package/package.json +1 -1
package/dist/components/Carousel/index.js CHANGED
@@ -1,8 +1,8 @@
1
1
  import { jsxs as A, jsx as r } from "react/jsx-runtime";
2
- import { useState as c, useRef as C, useEffect as E } from "react";
2
+ import { useState as c, useRef as E, useEffect as X } from "react";
3
3
  import { A as wt } from "../../arrow-left-BIJvHwNQ.js";
4
4
  import { A as bt } from "../../arrow-right-QEwnX3Sk.js";
5
- import '../../assets/index31.css';const gt = "_carousel_1e9ij_1", xt = "_noPointerEvents_1e9ij_9", $t = "_trackContainer_1e9ij_13", Ct = "_track_1e9ij_13", Et = "_page_1e9ij_28", Xt = "_controls_1e9ij_34", jt = "_indicators_1e9ij_45", It = "_indicator_1e9ij_45", yt = "_active_1e9ij_62", Nt = "_buttons_1e9ij_66", kt = "_prev_1e9ij_71", Tt = "_disabled_1e9ij_71", At = "_next_1e9ij_72", o = {
5
+ import '../../assets/index31.css';const gt = "_carousel_1e9ij_1", xt = "_noPointerEvents_1e9ij_9", $t = "_trackContainer_1e9ij_13", Ct = "_track_1e9ij_13", Et = "_page_1e9ij_28", Xt = "_controls_1e9ij_34", jt = "_indicators_1e9ij_45", yt = "_indicator_1e9ij_45", It = "_active_1e9ij_62", Nt = "_buttons_1e9ij_66", kt = "_prev_1e9ij_71", Tt = "_disabled_1e9ij_71", At = "_next_1e9ij_72", o = {
6
6
  carousel: gt,
7
7
  noPointerEvents: xt,
8
8
  trackContainer: $t,
@@ -10,15 +10,15 @@ import '../../assets/index31.css';const gt = "_carousel_1e9ij_1", xt = "_noPoint
10
10
  page: Et,
11
11
  controls: Xt,
12
12
  indicators: jt,
13
- indicator: It,
14
- active: yt,
13
+ indicator: yt,
14
+ active: It,
15
15
  buttons: Nt,
16
16
  prev: kt,
17
17
  disabled: Tt,
18
18
  next: At
19
19
  };
20
20
  function Pt({
21
- items: _,
21
+ items: M,
22
22
  itemsPerPage: i = 9,
23
23
  itemsPerRow: J = 3,
24
24
  autoplay: K = !1,
@@ -28,103 +28,103 @@ function Pt({
28
28
  siblingRef: l,
29
29
  isSplit: D = !1
30
30
  }) {
31
- const [d, u] = c(0), [m, M] = c(0), [S, Z] = c(0), [w, tt] = c(i), [b, et] = c(!1), [L, nt] = c(K), ot = C(null), g = C(null), f = C(null), x = V, [p, X] = c(!1), [P, z] = c(null), [$, Y] = c(null), [R, U] = c(null), [st, B] = c(!1), [v, G] = c(null), [j, O] = c(null), ct = (t) => {
32
- Math.abs((j ?? 0) - (v ?? 0)) > 25 && (t.stopPropagation(), t.preventDefault());
31
+ const [d, u] = c(0), [p, w] = c(0), [S, Z] = c(0), [b, tt] = c(i), [h, et] = c(!1), [L, nt] = c(K), ot = E(null), g = E(null), v = E(null), x = V, [_, j] = c(!1), [P, z] = c(null), [$, Y] = c(null), [R, U] = c(null), [st, B] = c(!1), [m, G] = c(null), [y, O] = c(null), ct = (t) => {
32
+ Math.abs((y ?? 0) - (m ?? 0)) > 25 && (t.stopPropagation(), t.preventDefault());
33
33
  }, rt = (t) => {
34
34
  G(t.clientX);
35
35
  }, at = (t) => {
36
- v !== null && Math.abs(t.clientX - v) > 5 && (B(!0), O(t.clientX));
36
+ m !== null && Math.abs(t.clientX - m) > 5 && (B(!0), O(t.clientX));
37
37
  }, it = () => {
38
- if (!v || !j) {
38
+ if (!m || !y) {
39
39
  I();
40
40
  return;
41
41
  }
42
- const t = v - j;
42
+ const t = m - y;
43
43
  Math.abs(t) > 50 && (t > 0 ? k() : T()), I();
44
44
  }, lt = () => {
45
45
  I();
46
46
  }, I = () => {
47
47
  B(!1), G(null), O(null);
48
48
  }, dt = (t) => {
49
- Y(t.touches[0].clientX), z(t.touches[0].clientY), X(!1);
50
- }, q = C(null);
51
- E(() => {
49
+ Y(t.touches[0].clientX), z(t.touches[0].clientY), j(!1);
50
+ }, q = E(null);
51
+ X(() => {
52
52
  const t = q.current;
53
53
  if (!t) return;
54
54
  const e = (n) => {
55
55
  const s = n.touches[0].clientX - ($ ?? 0), a = n.touches[0].clientY - (P ?? 0);
56
- !p && Math.abs(s) > Math.abs(a) && X(!0), p && (n.preventDefault(), U(n.touches[0].clientX));
56
+ !_ && Math.abs(s) > Math.abs(a) && j(!0), _ && (n.preventDefault(), U(n.touches[0].clientX));
57
57
  };
58
58
  return t.addEventListener("touchmove", e), () => {
59
59
  t.removeEventListener("touchmove", e);
60
60
  };
61
- }, [p, $, P]);
61
+ }, [_, $, P]);
62
62
  const ut = () => {
63
63
  if ($ === null || R === null) return;
64
64
  const t = $ - R;
65
- Math.abs(t) > 50 && (t > 0 ? k() : T()), Y(null), U(null), z(null), X(!1);
65
+ Math.abs(t) > 50 && (t > 0 ? k() : T()), Y(null), U(null), z(null), j(!1);
66
66
  }, ht = (t, e) => {
67
67
  const n = [];
68
68
  for (let s = 0; s < t.length; s += e)
69
69
  n.push(t.slice(s, s + e));
70
70
  return n;
71
71
  };
72
- E(() => {
72
+ X(() => {
73
73
  if (typeof window < "u") {
74
74
  const t = () => {
75
75
  const e = window.innerWidth < 768, n = e ? 1 : i;
76
76
  et(e), tt(e ? 1 : i), u(
77
- (s) => Math.min(s, Math.ceil(_.length / n) - 1)
77
+ (s) => Math.min(s, Math.ceil(M.length / n) - 1)
78
78
  );
79
79
  };
80
80
  return t(), window.addEventListener("resize", t), () => window.removeEventListener("resize", t);
81
81
  }
82
82
  }, [i]);
83
- const y = Math.ceil(w / J), F = ht(_, w), h = F.length, ft = 3 * 16, pt = 3 * 16;
84
- E(() => {
83
+ const C = Math.ceil(b / J), F = ht(M, b), f = F.length, ft = 3 * 16, pt = 3 * 16;
84
+ X(() => {
85
85
  const t = new ResizeObserver((e) => {
86
86
  var n, s;
87
87
  for (let a of e)
88
88
  if (a.contentRect) {
89
- b ? M(a.contentRect.width - pt) : D ? l != null && l.current ? M(
89
+ h ? w(a.contentRect.width - pt) : D ? l != null && l.current ? w(
90
90
  a.contentRect.width - ((n = l == null ? void 0 : l.current) == null ? void 0 : n.offsetWidth) - ft
91
- ) : M(a.contentRect.width) : (M(a.contentRect.width), Z(
91
+ ) : w(a.contentRect.width) : (w(a.contentRect.width), Z(
92
92
  ((s = g == null ? void 0 : g.current) == null ? void 0 : s.children[0].children[0].children[0].getBoundingClientRect().width) ?? 0
93
93
  ));
94
- const mt = b ? 1 : i;
94
+ const mt = h ? 1 : i;
95
95
  u(
96
- (Mt) => Math.min(Mt, Math.ceil(_.length / mt) - 1)
96
+ (Mt) => Math.min(Mt, Math.ceil(M.length / mt) - 1)
97
97
  );
98
98
  }
99
99
  });
100
100
  return x != null && x.current && t.observe(x.current), () => t.disconnect();
101
- }, [b, D]);
101
+ }, [h, D]);
102
102
  const N = () => {
103
- f.current && clearInterval(f.current), nt(!1);
103
+ v.current && clearInterval(v.current), nt(!1);
104
104
  }, k = () => {
105
- N(), u((t) => Math.min(t + 1, h - 1));
105
+ N(), u((t) => Math.min(t + 1, f - 1));
106
106
  }, T = () => {
107
107
  N(), u((t) => Math.max(t - 1, 0));
108
108
  }, vt = (t) => {
109
109
  N(), u(t);
110
- }, _t = () => m ? `translateX(-${d * m}px)` : "translateX(0px)", H = () => {
111
- u((t) => t >= h - 1 ? 0 : t + 1);
110
+ }, _t = () => p ? `translateX(-${d * p}px)` : "translateX(0px)", H = () => {
111
+ u((t) => t >= f - 1 ? 0 : t + 1);
112
112
  };
113
- return E(() => (L && (f.current = setInterval(
113
+ return X(() => (L && (v.current = setInterval(
114
114
  H,
115
115
  W * 1e3
116
116
  )), () => {
117
- f.current && clearInterval(f.current);
117
+ v.current && clearInterval(v.current);
118
118
  }), [L, W, H]), /* @__PURE__ */ A("div", { className: `${Q ?? ""} ${o.carousel}`, ref: ot, children: [
119
119
  /* @__PURE__ */ r(
120
120
  "div",
121
121
  {
122
122
  ref: q,
123
- className: `${o.trackContainer} ${st || p ? o.noPointerEvents : ""}
123
+ className: `${o.trackContainer} ${st || _ ? o.noPointerEvents : ""}
124
124
  `,
125
125
  style: {
126
- maxWidth: `${m}px`,
127
- touchAction: p ? "none" : "pan-y"
126
+ maxWidth: `${p}px`,
127
+ touchAction: _ ? "none" : "pan-y"
128
128
  },
129
129
  onTouchStart: dt,
130
130
  onTouchEnd: ut,
@@ -137,23 +137,26 @@ function Pt({
137
137
  {
138
138
  ref: g,
139
139
  className: o.track,
140
- style: { width: `${h * 100}%`, transform: _t() },
140
+ style: { width: `${f * 100}%`, transform: _t() },
141
141
  children: F.map((t, e) => /* @__PURE__ */ r(
142
142
  "div",
143
143
  {
144
144
  className: o.page,
145
145
  style: {
146
- display: y > 1 ? "grid" : "flex",
146
+ display: C > 1 ? "grid" : "flex",
147
147
  gridTemplateColumns: `repeat(${Math.ceil(
148
- w / y
148
+ b / C
149
149
  )}, 1fr)`,
150
- gridTemplateRows: `repeat(${y}, auto)`,
151
- width: `${m}px`
150
+ gridTemplateRows: `repeat(${C}, auto)`,
151
+ width: h ? `${p}px` : "unset"
152
152
  },
153
153
  children: t.map((n, s) => /* @__PURE__ */ r(
154
154
  "div",
155
155
  {
156
156
  onClickCapture: ct,
157
+ style: {
158
+ width: h ? `${p / C - 16}px` : "unset"
159
+ },
157
160
  children: n
158
161
  },
159
162
  s
@@ -165,15 +168,15 @@ function Pt({
165
168
  )
166
169
  }
167
170
  ),
168
- h > 1 && /* @__PURE__ */ A(
171
+ f > 1 && /* @__PURE__ */ A(
169
172
  "div",
170
173
  {
171
174
  className: o.controls,
172
175
  style: {
173
- maxWidth: S > 0 && i === 1 && !b ? `${S}px` : "unset"
176
+ maxWidth: S > 0 && i === 1 && !h ? `${S}px` : "unset"
174
177
  },
175
178
  children: [
176
- /* @__PURE__ */ r("div", { className: o.indicators, children: Array.from({ length: h }).map((t, e) => /* @__PURE__ */ r(
179
+ /* @__PURE__ */ r("div", { className: o.indicators, children: Array.from({ length: f }).map((t, e) => /* @__PURE__ */ r(
177
180
  "button",
178
181
  {
179
182
  className: `${o.indicator} ${e === d ? o.active : ""}`,
@@ -197,9 +200,9 @@ function Pt({
197
200
  "button",
198
201
  {
199
202
  "aria-label": "Next slide",
200
- className: `${o.next} ${d >= h - 1 ? o.disabled : ""}`,
203
+ className: `${o.next} ${d >= f - 1 ? o.disabled : ""}`,
201
204
  onClick: k,
202
- disabled: d >= _.length - w,
205
+ disabled: d >= M.length - b,
203
206
  children: /* @__PURE__ */ r(bt, { size: 36 })
204
207
  }
205
208
  )
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "quirk-ui",
3
3
  "private": false,
4
- "version": "0.0.171",
4
+ "version": "0.0.172",
5
5
  "type": "module",
6
6
  "exports": {
7
7
  ".": {