quirk-ui 0.0.76 → 0.0.77

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