quirk-ui 0.0.78 → 0.0.79

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