quirk-ui 0.0.255 → 0.0.256

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 +110 -114
  2. package/package.json +1 -1
package/dist/components/Carousel/index.js CHANGED
@@ -1,150 +1,146 @@
1
- import { jsxs as W, jsx as r } from "react/jsx-runtime";
2
- import { useState as c, useRef as C, useEffect as E, useLayoutEffect as wt } from "react";
3
- import { A as Mt } from "../../arrow-left-BIJvHwNQ.js";
4
- import { A as bt } from "../../arrow-right-QEwnX3Sk.js";
5
- import '../../assets/index30.css';const xt = "_carousel_ifeug_1", $t = "_noPointerEvents_ifeug_10", Ct = "_trackContainer_ifeug_14", Et = "_track_ifeug_14", Xt = "_page_ifeug_29", yt = "_controls_ifeug_39", It = "_indicators_ifeug_50", Nt = "_indicator_ifeug_50", Tt = "_active_ifeug_67", kt = "_buttons_ifeug_71", At = "_prev_ifeug_76", Wt = "_disabled_ifeug_76", St = "_next_ifeug_77", o = {
6
- carousel: xt,
7
- noPointerEvents: $t,
8
- trackContainer: Ct,
9
- track: Et,
10
- page: Xt,
11
- controls: yt,
12
- indicators: It,
13
- indicator: Nt,
1
+ import { jsxs as A, jsx as r } from "react/jsx-runtime";
2
+ import { useState as c, useRef as E, useEffect as D, useLayoutEffect as Mt } from "react";
3
+ import { A as bt } from "../../arrow-left-BIJvHwNQ.js";
4
+ import { A as xt } from "../../arrow-right-QEwnX3Sk.js";
5
+ import '../../assets/index30.css';const $t = "_carousel_ifeug_1", Ct = "_noPointerEvents_ifeug_10", Et = "_trackContainer_ifeug_14", Xt = "_track_ifeug_14", yt = "_page_ifeug_29", It = "_controls_ifeug_39", Nt = "_indicators_ifeug_50", kt = "_indicator_ifeug_50", Tt = "_active_ifeug_67", Wt = "_buttons_ifeug_71", At = "_prev_ifeug_76", Dt = "_disabled_ifeug_76", Lt = "_next_ifeug_77", o = {
6
+ carousel: $t,
7
+ noPointerEvents: Ct,
8
+ trackContainer: Et,
9
+ track: Xt,
10
+ page: yt,
11
+ controls: It,
12
+ indicators: Nt,
13
+ indicator: kt,
14
14
  active: Tt,
15
- buttons: kt,
15
+ buttons: Wt,
16
16
  prev: At,
17
- disabled: Wt,
18
- next: St
17
+ disabled: Dt,
18
+ next: Lt
19
19
  };
20
- function Yt({
20
+ function Bt({
21
21
  items: M,
22
- itemsPerPage: l = 9,
22
+ itemsPerPage: i = 9,
23
23
  itemsPerRow: K = 3,
24
24
  autoplay: Q = !1,
25
- autoplayInterval: S = 3,
25
+ autoplayInterval: L = 3,
26
26
  className: V,
27
27
  externalRef: Z,
28
- siblingRef: u,
29
- isSplit: D = !1
28
+ siblingRef: l,
29
+ isSplit: S = !1
30
30
  }) {
31
- const [d, h] = c(0), [_, b] = c(0), [L, P] = c(0), [f, tt] = c(l), [p, et] = c(!1), [z, nt] = c(Q), ot = C(null), a = C(null), g = C(null), x = Z, [m, X] = c(!1), [Y, B] = c(null), [$, R] = c(null), [j, U] = c(null), [st, F] = c(!1), [w, G] = c(null), [y, O] = c(null), ct = (t) => {
32
- Math.abs((y ?? 0) - (w ?? 0)) > 25 && (t.stopPropagation(), t.preventDefault());
33
- }, rt = (t) => {
34
- G(t.clientX);
31
+ const [u, d] = c(0), [v, b] = c(0), [P, tt] = c(0), [h, et] = c(i), [f, nt] = c(!1), [z, ot] = c(Q), st = E(null), a = E(null), _ = E(null), x = Z, [g, X] = c(!1), [Y, B] = c(null), [$, j] = c(null), [R, U] = c(null), [ct, G] = c(!1), [m, O] = c(null), [y, q] = c(null), rt = (t) => {
32
+ Math.abs((y ?? 0) - (m ?? 0)) > 25 && (t.stopPropagation(), t.preventDefault());
35
33
  }, at = (t) => {
36
- w !== null && Math.abs(t.clientX - w) > 5 && (F(!0), O(t.clientX));
37
- }, it = () => {
38
- if (!w || !y) {
34
+ O(t.clientX);
35
+ }, it = (t) => {
36
+ m !== null && Math.abs(t.clientX - m) > 5 && (G(!0), q(t.clientX));
37
+ }, lt = () => {
38
+ if (!m || !y) {
39
39
  I();
40
40
  return;
41
41
  }
42
- const t = w - y;
43
- Math.abs(t) > 50 && (t > 0 ? k() : A()), I();
44
- }, lt = () => {
42
+ const t = m - y;
43
+ Math.abs(t) > 50 && (t > 0 ? T() : W()), I();
44
+ }, ut = () => {
45
45
  I();
46
46
  }, I = () => {
47
- F(!1), G(null), O(null);
48
- }, ut = (t) => {
49
- R(t.touches[0].clientX), B(t.touches[0].clientY), X(!1);
50
- }, q = C(null);
51
- E(() => {
52
- const t = q.current;
47
+ G(!1), O(null), q(null);
48
+ }, dt = (t) => {
49
+ j(t.touches[0].clientX), B(t.touches[0].clientY), X(!1);
50
+ }, F = E(null);
51
+ D(() => {
52
+ const t = F.current;
53
53
  if (!t) return;
54
54
  const e = (n) => {
55
- const s = n.touches[0].clientX - ($ ?? 0), i = n.touches[0].clientY - (Y ?? 0);
56
- !m && Math.abs(s) > Math.abs(i) && X(!0), m && (n.preventDefault(), U(n.touches[0].clientX));
55
+ const s = n.touches[0].clientX - ($ ?? 0), C = n.touches[0].clientY - (Y ?? 0);
56
+ !g && Math.abs(s) > Math.abs(C) && X(!0), g && (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
- }, [m, $, Y]);
62
- const dt = () => {
63
- if ($ === null || j === null) return;
64
- const t = $ - j;
65
- Math.abs(t) > 50 && (t > 0 ? k() : A()), R(null), U(null), B(null), X(!1);
66
- }, ht = (t, e) => {
61
+ }, [g, $, Y]);
62
+ const ht = () => {
63
+ if ($ === null || R === null) return;
64
+ const t = $ - R;
65
+ Math.abs(t) > 50 && (t > 0 ? T() : W()), j(null), U(null), B(null), X(!1);
66
+ }, ft = (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
- wt(() => {
73
- var e;
74
- const t = (e = a == null ? void 0 : a.current) == null ? void 0 : e.children[0].children[0].children[0];
75
- if (t) {
76
- const n = t.getBoundingClientRect().width;
77
- console.log("FIRST", n), n && P(n);
78
- }
79
- }, []), E(() => {
72
+ Mt(() => {
80
73
  if (typeof window < "u") {
81
74
  const t = () => {
82
- const e = window.innerWidth < 768, n = e ? 1 : l;
83
- et(e), tt(e ? 1 : l), h(
75
+ const e = window.innerWidth < 768, n = e ? 1 : i;
76
+ nt(e), et(e ? 1 : i), d(
84
77
  (s) => Math.min(s, Math.ceil(M.length / n) - 1)
85
78
  );
86
79
  };
87
80
  return t(), window.addEventListener("resize", t), () => window.removeEventListener("resize", t);
88
81
  }
89
- }, [l]);
90
- const N = Math.ceil(f / K), H = ht(M, f), v = H.length, ft = 3 * 16, pt = 3 * 16;
91
- E(() => {
82
+ }, [i]);
83
+ const N = Math.ceil(h / K), H = ft(M, h), p = H.length, pt = 3 * 16, vt = 3 * 16;
84
+ D(() => {
92
85
  const t = new ResizeObserver((e) => {
93
- var n, s;
94
- for (let i of e)
95
- if (i.contentRect) {
96
- p ? b(i.contentRect.width - pt) : D ? u != null && u.current ? b(
97
- i.contentRect.width - ((n = u == null ? void 0 : u.current) == null ? void 0 : n.offsetWidth) - ft
98
- ) : b(i.contentRect.width) : (b(i.contentRect.width), P(
99
- ((s = a == null ? void 0 : a.current) == null ? void 0 : s.children[0].children[0].children[0].getBoundingClientRect().width) ?? 0
86
+ var n, s, C;
87
+ for (let w of e)
88
+ if (w.contentRect) {
89
+ f ? b(w.contentRect.width - vt) : S ? l != null && l.current ? b(
90
+ w.contentRect.width - ((n = l == null ? void 0 : l.current) == null ? void 0 : n.offsetWidth) - pt
91
+ ) : b(w.contentRect.width) : (b(w.contentRect.width), console.log(
92
+ "W",
93
+ (s = a == null ? void 0 : a.current) == null ? void 0 : s.children[0].children[0].children[0].getBoundingClientRect().width
94
+ ), tt(
95
+ ((C = a == null ? void 0 : a.current) == null ? void 0 : C.children[0].children[0].children[0].getBoundingClientRect().width) ?? 0
100
96
  ));
101
- const gt = p ? 1 : l;
102
- h(
103
- (mt) => Math.min(mt, Math.ceil(M.length / gt) - 1)
97
+ const mt = f ? 1 : i;
98
+ d(
99
+ (wt) => Math.min(wt, Math.ceil(M.length / mt) - 1)
104
100
  );
105
101
  }
106
102
  });
107
103
  return x != null && x.current && t.observe(x.current), () => t.disconnect();
108
- }, [p, D]);
109
- const T = () => {
110
- g.current && clearInterval(g.current), nt(!1);
111
- }, k = () => {
112
- T(), h((t) => Math.min(t + 1, v - 1));
113
- }, A = () => {
114
- T(), h((t) => Math.max(t - 1, 0));
115
- }, vt = (t) => {
116
- T(), h(t);
117
- }, _t = () => _ ? `translateX(-${d * _}px)` : "translateX(0px)", J = () => {
118
- h((t) => t >= v - 1 ? 0 : t + 1);
104
+ }, [f, S]);
105
+ const k = () => {
106
+ _.current && clearInterval(_.current), ot(!1);
107
+ }, T = () => {
108
+ k(), d((t) => Math.min(t + 1, p - 1));
109
+ }, W = () => {
110
+ k(), d((t) => Math.max(t - 1, 0));
111
+ }, _t = (t) => {
112
+ k(), d(t);
113
+ }, gt = () => v ? `translateX(-${u * v}px)` : "translateX(0px)", J = () => {
114
+ d((t) => t >= p - 1 ? 0 : t + 1);
119
115
  };
120
- return E(() => (z && (g.current = setInterval(
116
+ return D(() => (z && (_.current = setInterval(
121
117
  J,
122
- S * 1e3
118
+ L * 1e3
123
119
  )), () => {
124
- g.current && clearInterval(g.current);
125
- }), [z, S, J]), /* @__PURE__ */ W("div", { className: `${V ?? ""} ${o.carousel}`, ref: ot, children: [
120
+ _.current && clearInterval(_.current);
121
+ }), [z, L, J]), /* @__PURE__ */ A("div", { className: `${V ?? ""} ${o.carousel}`, ref: st, children: [
126
122
  /* @__PURE__ */ r(
127
123
  "div",
128
124
  {
129
- ref: q,
130
- className: `${o.trackContainer} ${st || m ? o.noPointerEvents : ""}
125
+ ref: F,
126
+ className: `${o.trackContainer} ${ct || g ? o.noPointerEvents : ""}
131
127
  `,
132
128
  style: {
133
- maxWidth: `${_}px`,
134
- touchAction: m ? "none" : "pan-y"
129
+ maxWidth: `${v}px`,
130
+ touchAction: g ? "none" : "pan-y"
135
131
  },
136
- onTouchStart: ut,
137
- onTouchEnd: dt,
138
- onMouseDown: rt,
139
- onMouseMove: at,
140
- onMouseUp: it,
141
- onMouseLeave: lt,
132
+ onTouchStart: dt,
133
+ onTouchEnd: ht,
134
+ onMouseDown: at,
135
+ onMouseMove: it,
136
+ onMouseUp: lt,
137
+ onMouseLeave: ut,
142
138
  children: /* @__PURE__ */ r(
143
139
  "div",
144
140
  {
145
141
  ref: a,
146
142
  className: o.track,
147
- style: { width: `${v * 100}%`, transform: _t() },
143
+ style: { width: `${p * 100}%`, transform: gt() },
148
144
  children: H.map((t, e) => /* @__PURE__ */ r(
149
145
  "div",
150
146
  {
@@ -152,18 +148,18 @@ function Yt({
152
148
  style: {
153
149
  display: N > 1 ? "grid" : "flex",
154
150
  gridTemplateColumns: `repeat(${Math.ceil(
155
- f / N
151
+ h / N
156
152
  )}, 1fr)`,
157
153
  gridTemplateRows: `repeat(${N}, auto)`,
158
- width: `${_}px`
154
+ width: `${v}px`
159
155
  },
160
156
  children: t.map((n, s) => /* @__PURE__ */ r(
161
157
  "div",
162
158
  {
163
- onClickCapture: ct,
159
+ onClickCapture: rt,
164
160
  style: {
165
- flexBasis: p ? "100%" : `${100 / f}%`,
166
- width: p ? `${_ / f - 16}px` : "unset"
161
+ flexBasis: f ? "100%" : `${100 / h}%`,
162
+ width: f ? `${v / h - 16}px` : "unset"
167
163
  },
168
164
  children: n
169
165
  },
@@ -176,42 +172,42 @@ function Yt({
176
172
  )
177
173
  }
178
174
  ),
179
- v > 1 && /* @__PURE__ */ W(
175
+ p > 1 && /* @__PURE__ */ A(
180
176
  "div",
181
177
  {
182
178
  className: o.controls,
183
179
  style: {
184
- maxWidth: L > 0 && l === 1 && !p ? `${L}px` : "unset"
180
+ maxWidth: P > 0 && i === 1 && !f ? `${P}px` : "unset"
185
181
  },
186
182
  children: [
187
- /* @__PURE__ */ r("div", { className: o.indicators, children: Array.from({ length: v }).map((t, e) => /* @__PURE__ */ r(
183
+ /* @__PURE__ */ r("div", { className: o.indicators, children: Array.from({ length: p }).map((t, e) => /* @__PURE__ */ r(
188
184
  "button",
189
185
  {
190
- className: `${o.indicator} ${e === d ? o.active : ""}`,
191
- onClick: () => vt(e),
186
+ className: `${o.indicator} ${e === u ? o.active : ""}`,
187
+ onClick: () => _t(e),
192
188
  "aria-label": `Go to group ${e + 1}`
193
189
  },
194
190
  e
195
191
  )) }),
196
- /* @__PURE__ */ W("div", { className: o.buttons, children: [
192
+ /* @__PURE__ */ A("div", { className: o.buttons, children: [
197
193
  /* @__PURE__ */ r(
198
194
  "button",
199
195
  {
200
196
  "aria-label": "Previous slide",
201
- className: `${o.prev} ${d === 0 ? o.disabled : ""}`,
202
- onClick: A,
203
- disabled: d === 0,
204
- children: /* @__PURE__ */ r(Mt, { size: 36 })
197
+ className: `${o.prev} ${u === 0 ? o.disabled : ""}`,
198
+ onClick: W,
199
+ disabled: u === 0,
200
+ children: /* @__PURE__ */ r(bt, { size: 36 })
205
201
  }
206
202
  ),
207
203
  /* @__PURE__ */ r(
208
204
  "button",
209
205
  {
210
206
  "aria-label": "Next slide",
211
- className: `${o.next} ${d >= v - 1 ? o.disabled : ""}`,
212
- onClick: k,
213
- disabled: d >= M.length - f,
214
- children: /* @__PURE__ */ r(bt, { size: 36 })
207
+ className: `${o.next} ${u >= p - 1 ? o.disabled : ""}`,
208
+ onClick: T,
209
+ disabled: u >= M.length - h,
210
+ children: /* @__PURE__ */ r(xt, { size: 36 })
215
211
  }
216
212
  )
217
213
  ] })
@@ -221,5 +217,5 @@ function Yt({
221
217
  ] });
222
218
  }
223
219
  export {
224
- Yt as Carousel
220
+ Bt as Carousel
225
221
  };
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "quirk-ui",
3
3
  "private": false,
4
- "version": "0.0.255",
4
+ "version": "0.0.256",
5
5
  "type": "module",
6
6
  "exports": {
7
7
  ".": {