quirk-ui 0.0.60 → 0.0.62

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 +66 -61
  2. package/package.json +1 -1
package/dist/components/Carousel/index.js CHANGED
@@ -1,98 +1,103 @@
1
- import { jsxs as x, jsx as s } from "react/jsx-runtime";
2
- import { useState as v, useRef as M, useEffect as $ } from "react";
3
- import { A as O } from "../../arrow-left-BIJvHwNQ.js";
4
- import { A as q } from "../../arrow-right-QEwnX3Sk.js";
5
- import '../../assets/index31.css';const B = "_carousel_u7gup_1", F = "_trackContainer_u7gup_9", H = "_track_u7gup_9", J = "_page_u7gup_24", K = "_controls_u7gup_30", Q = "_indicators_u7gup_47", S = "_indicator_u7gup_47", U = "_active_u7gup_64", V = "_buttons_u7gup_68", Y = "_prev_u7gup_73", Z = "_disabled_u7gup_73", P = "_next_u7gup_74", n = {
6
- carousel: B,
7
- trackContainer: F,
8
- track: H,
9
- page: J,
10
- controls: K,
11
- indicators: Q,
12
- indicator: S,
13
- active: U,
1
+ import { jsxs as w, jsx as r } from "react/jsx-runtime";
2
+ import { useState as v, useRef as A, useEffect as x } from "react";
3
+ import { A as S } from "../../arrow-left-BIJvHwNQ.js";
4
+ import { A as U } from "../../arrow-right-QEwnX3Sk.js";
5
+ import '../../assets/index31.css';const Y = "_carousel_u7gup_1", q = "_trackContainer_u7gup_9", B = "_track_u7gup_9", F = "_page_u7gup_24", H = "_controls_u7gup_30", J = "_indicators_u7gup_47", K = "_indicator_u7gup_47", Q = "_active_u7gup_64", V = "_buttons_u7gup_68", Z = "_prev_u7gup_73", P = "_disabled_u7gup_73", tt = "_next_u7gup_74", n = {
6
+ carousel: Y,
7
+ trackContainer: q,
8
+ track: B,
9
+ page: F,
10
+ controls: H,
11
+ indicators: J,
12
+ indicator: K,
13
+ active: Q,
14
14
  buttons: V,
15
- prev: Y,
16
- disabled: Z,
17
- next: P
15
+ prev: Z,
16
+ disabled: P,
17
+ next: tt
18
18
  };
19
- function st({
20
- items: b,
19
+ function ct({
20
+ items: N,
21
21
  itemsPerPage: f = 9,
22
- itemsPerRow: W = 3,
22
+ itemsPerRow: M = 3,
23
23
  autoPlay: o = !1,
24
- autoPlayInterval: N = 3e3,
25
- className: z,
26
- externalRef: A,
24
+ autoPlayInterval: $ = 3,
25
+ className: W,
26
+ externalRef: z,
27
27
  siblingRef: a,
28
- isSplit: k = !1
28
+ isSplit: b = !1
29
29
  }) {
30
- const [i, l] = v(0), [d, p] = v(0), [h, y] = v(f), [C, T] = v(!1), E = M(null), g = M(null), _ = A, L = (t, e) => {
30
+ const [i, l] = v(0), [u, h] = v(0), [p, T] = v(f), [k, y] = v(!1), L = A(null), g = A(null), _ = z, E = (t, e) => {
31
31
  const c = [];
32
- for (let r = 0; r < t.length; r += e)
33
- c.push(t.slice(r, r + e));
32
+ for (let s = 0; s < t.length; s += e)
33
+ c.push(t.slice(s, s + e));
34
34
  return c;
35
35
  };
36
- $(() => {
36
+ x(() => {
37
37
  const t = () => {
38
38
  const e = window.innerWidth < 768;
39
- T(e), y(e ? 1 : f), l(0);
39
+ y(e), T(e ? 1 : f), l(0);
40
40
  };
41
41
  return t(), window.addEventListener("resize", t), () => window.removeEventListener("resize", t);
42
42
  }, [f]);
43
- const m = Math.ceil(h / W), I = L(b, h), u = I.length, j = 3 * 16, R = 6 * 16;
44
- $(() => {
43
+ const m = Math.ceil(p / M), C = E(N, p), d = C.length, O = 3 * 16, j = 6 * 16;
44
+ x(() => {
45
45
  const t = new ResizeObserver((e) => {
46
46
  var c;
47
- for (let r of e)
48
- r.contentRect && (C ? p(r.contentRect.width - R) : k && a != null && a.current ? p(
49
- r.contentRect.width - ((c = a == null ? void 0 : a.current) == null ? void 0 : c.offsetWidth) - j
50
- ) : p(r.contentRect.width), l(0));
47
+ for (let s of e)
48
+ s.contentRect && (k ? h(s.contentRect.width - j) : b && a != null && a.current ? h(
49
+ s.contentRect.width - ((c = a == null ? void 0 : a.current) == null ? void 0 : c.offsetWidth) - O
50
+ ) : h(s.contentRect.width), l(0));
51
51
  });
52
52
  return _ != null && _.current && t.observe(_.current), () => t.disconnect();
53
- }, [C, k]);
54
- const w = () => {
55
- l((t) => Math.min(t + 1, u - 1));
53
+ }, [k, b]);
54
+ const R = () => {
55
+ l((t) => Math.min(t + 1, d - 1));
56
56
  }, X = () => {
57
57
  l((t) => Math.max(t - 1, 0));
58
58
  }, D = (t) => {
59
59
  l(t);
60
- }, G = () => d ? `translateX(-${i * d}px)` : "translateX(0px)";
61
- return $(() => (o && (g.current = setInterval(w, N)), () => {
60
+ }, G = () => u ? `translateX(-${i * u}px)` : "translateX(0px)", I = () => {
61
+ l((t) => t >= d - 1 ? 0 : t + 1);
62
+ };
63
+ return x(() => (o && (console.log("AUTOPLAY IS ON"), g.current = setInterval(
64
+ I,
65
+ $ * 1e3
66
+ )), () => {
62
67
  g.current && clearInterval(g.current);
63
- }), [o, N, w]), /* @__PURE__ */ x("div", { className: `${z ?? ""} ${n.carousel}`, ref: E, children: [
64
- /* @__PURE__ */ s(
68
+ }), [o, $, I]), /* @__PURE__ */ w("div", { className: `${W ?? ""} ${n.carousel}`, ref: L, children: [
69
+ /* @__PURE__ */ r(
65
70
  "div",
66
71
  {
67
72
  className: n.trackContainer,
68
- style: { maxWidth: `${d}px` },
69
- children: /* @__PURE__ */ s(
73
+ style: { maxWidth: `${u}px` },
74
+ children: /* @__PURE__ */ r(
70
75
  "div",
71
76
  {
72
77
  className: n.track,
73
- style: { width: `${u * 100}%`, transform: G() },
74
- children: I.map((t, e) => /* @__PURE__ */ s(
78
+ style: { width: `${d * 100}%`, transform: G() },
79
+ children: C.map((t, e) => /* @__PURE__ */ r(
75
80
  "div",
76
81
  {
77
82
  className: n.page,
78
83
  style: {
79
84
  display: m > 1 ? "grid" : "flex",
80
85
  gridTemplateColumns: `repeat(${Math.ceil(
81
- h / m
86
+ p / m
82
87
  )}, 1fr)`,
83
88
  gridTemplateRows: `repeat(${m}, auto)`,
84
- width: `${d}px`
89
+ width: `${u}px`
85
90
  },
86
- children: t.map((c, r) => /* @__PURE__ */ s(
91
+ children: t.map((c, s) => /* @__PURE__ */ r(
87
92
  "div",
88
93
  {
89
94
  className: n.slide,
90
95
  style: {
91
- width: `${d / m - 16}px`
96
+ width: `${u / m - 16}px`
92
97
  },
93
98
  children: c
94
99
  },
95
- r
100
+ s
96
101
  ))
97
102
  },
98
103
  e
@@ -101,8 +106,8 @@ function st({
101
106
  )
102
107
  }
103
108
  ),
104
- u > 1 && /* @__PURE__ */ x("div", { className: n.controls, children: [
105
- /* @__PURE__ */ s("div", { className: n.indicators, children: Array.from({ length: u }).map((t, e) => /* @__PURE__ */ s(
109
+ d > 1 && /* @__PURE__ */ w("div", { className: n.controls, children: [
110
+ /* @__PURE__ */ r("div", { className: n.indicators, children: Array.from({ length: d }).map((t, e) => /* @__PURE__ */ r(
106
111
  "button",
107
112
  {
108
113
  className: `${n.indicator} ${e === i ? n.active : ""}`,
@@ -111,25 +116,25 @@ function st({
111
116
  },
112
117
  e
113
118
  )) }),
114
- /* @__PURE__ */ x("div", { className: n.buttons, children: [
115
- /* @__PURE__ */ s(
119
+ /* @__PURE__ */ w("div", { className: n.buttons, children: [
120
+ /* @__PURE__ */ r(
116
121
  "button",
117
122
  {
118
123
  "aria-label": "Previous slide",
119
124
  className: `${n.prev} ${!o && i === 0 ? n.disabled : ""}`,
120
125
  onClick: X,
121
126
  disabled: !o && i === 0,
122
- children: /* @__PURE__ */ s(O, { size: 36 })
127
+ children: /* @__PURE__ */ r(S, { size: 36 })
123
128
  }
124
129
  ),
125
- /* @__PURE__ */ s(
130
+ /* @__PURE__ */ r(
126
131
  "button",
127
132
  {
128
133
  "aria-label": "Next slide",
129
- className: `${n.next} ${!o && i >= u - 1 ? n.disabled : ""}`,
130
- onClick: w,
131
- disabled: !o && i >= b.length - h,
132
- children: /* @__PURE__ */ s(q, { size: 36 })
134
+ className: `${n.next} ${!o && i >= d - 1 ? n.disabled : ""}`,
135
+ onClick: R,
136
+ disabled: !o && i >= N.length - p,
137
+ children: /* @__PURE__ */ r(U, { size: 36 })
133
138
  }
134
139
  )
135
140
  ] })
@@ -137,5 +142,5 @@ function st({
137
142
  ] });
138
143
  }
139
144
  export {
140
- st as Carousel
145
+ ct as Carousel
141
146
  };
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "quirk-ui",
3
3
  "private": false,
4
- "version": "0.0.60",
4
+ "version": "0.0.62",
5
5
  "type": "module",
6
6
  "exports": {
7
7
  ".": {