quirk-ui 0.0.28 → 0.0.30

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 (3) hide show
  1. package/dist/components/Carousel/index.js +63 -62
  2. package/dist/components/Grid/index.js +22 -22
  3. package/package.json +1 -1
package/dist/components/Carousel/index.js CHANGED
@@ -1,91 +1,92 @@
1
- import { jsxs as _, jsx as r } from "react/jsx-runtime";
2
- import { useState as m, useRef as W, useCallback as C, useEffect as f } from "react";
3
- import { A as I } from "../../arrow-left-BIJvHwNQ.js";
4
- import { A as M } from "../../arrow-right-QEwnX3Sk.js";
5
- import '../../assets/index31.css';const S = "_carousel_1h8mt_5", E = "_track_1h8mt_12", L = "_slide_1h8mt_18", R = "_controls_1h8mt_30", j = "_indicators_1h8mt_47", z = "_indicator_1h8mt_47", G = "_active_1h8mt_62", T = "_buttons_1h8mt_66", V = "_prev_1h8mt_71", X = "_disabled_1h8mt_71", q = "_next_1h8mt_72", e = {
6
- carousel: S,
7
- track: E,
8
- slide: L,
9
- controls: R,
10
- indicators: j,
11
- indicator: z,
12
- active: G,
13
- buttons: T,
14
- prev: V,
15
- disabled: X,
16
- next: q
1
+ import { jsxs as h, jsx as o } from "react/jsx-runtime";
2
+ import { useState as _, useRef as A, useEffect as b } from "react";
3
+ import { A as C } from "../../arrow-left-BIJvHwNQ.js";
4
+ import { A as I } from "../../arrow-right-QEwnX3Sk.js";
5
+ import '../../assets/index31.css';const M = "_carousel_1h8mt_5", S = "_track_1h8mt_12", W = "_slide_1h8mt_18", E = "_controls_1h8mt_30", L = "_indicators_1h8mt_47", R = "_indicator_1h8mt_47", j = "_active_1h8mt_62", z = "_buttons_1h8mt_66", G = "_prev_1h8mt_71", T = "_disabled_1h8mt_71", V = "_next_1h8mt_72", e = {
6
+ carousel: M,
7
+ track: S,
8
+ slide: W,
9
+ controls: E,
10
+ indicators: L,
11
+ indicator: R,
12
+ active: j,
13
+ buttons: z,
14
+ prev: G,
15
+ disabled: T,
16
+ next: V
17
17
  };
18
- function K({
18
+ function H({
19
19
  items: c,
20
- autoPlay: i = !1,
21
- autoPlayInterval: b = 3e3,
20
+ autoPlay: r = !1,
21
+ autoPlayInterval: m = 3e3,
22
22
  className: u
23
23
  }) {
24
- const [s, l] = m(0), [n, v] = m(
25
- window.innerWidth < 768 ? 1 : 3
26
- ), [w, N] = m(window.innerWidth < 768), a = W(null), $ = s === 0, p = s === c.length - 1, g = Math.ceil(c.length / n), d = C(() => {
27
- l(0);
28
- const t = window.innerWidth < 768;
29
- N(t), v(t ? 1 : 3);
24
+ const [n, l] = _(0), [i, v] = _(1), [N, $] = _(!1), a = A(null), p = n === 0, g = n === c.length - 1, f = Math.ceil(c.length / i);
25
+ b(() => {
26
+ const t = () => {
27
+ l(0);
28
+ const s = window.innerWidth < 768;
29
+ $(s), v(s ? 1 : 3);
30
+ };
31
+ return t(), window.addEventListener("resize", t), () => window.removeEventListener("resize", t);
30
32
  }, []);
31
- f(() => (d(), window.addEventListener("resize", d), () => window.removeEventListener("resize", d)), [d]);
32
- const h = () => {
33
- (i || !p) && l(
34
- (t) => t < c.length - n ? t + n : t
33
+ const d = () => {
34
+ (r || !g) && l(
35
+ (t) => t < c.length - i ? t + i : t
35
36
  );
36
- }, x = () => {
37
- (i || !$) && l((t) => t > 0 ? t - n : 0);
38
- }, k = (t) => {
39
- l(t * n);
37
+ }, w = () => {
38
+ (r || !p) && l((t) => t > 0 ? t - i : 0);
39
+ }, x = (t) => {
40
+ l(t * i);
40
41
  };
41
- f(() => (i && (a.current = setInterval(h, b)), () => {
42
+ b(() => (r && (a.current = setInterval(d, m)), () => {
42
43
  a.current && clearInterval(a.current);
43
- }), [i, b, h]);
44
- const A = () => {
45
- if (w)
46
- return `translateX(calc(-${s * 80}% + 10%))`;
47
- const t = 100 / n;
48
- return `translateX(-${s * t}%)`;
44
+ }), [r, m, d]);
45
+ const k = () => {
46
+ if (N)
47
+ return `translateX(calc(-${n * 80}% + 10%))`;
48
+ const t = 100 / i;
49
+ return `translateX(-${n * t}%)`;
49
50
  };
50
- return /* @__PURE__ */ _("div", { className: `${u ?? ""} ${e.carousel}`, children: [
51
- /* @__PURE__ */ r(
51
+ return /* @__PURE__ */ h("div", { className: `${u ?? ""} ${e.carousel}`, children: [
52
+ /* @__PURE__ */ o(
52
53
  "div",
53
54
  {
54
55
  className: e.track,
55
- style: { transform: A() },
56
+ style: { transform: k() },
56
57
  role: "list",
57
- children: c.map((t, o) => /* @__PURE__ */ r("div", { className: e.slide, children: t }, o))
58
+ children: c.map((t, s) => /* @__PURE__ */ o("div", { className: e.slide, children: t }, s))
58
59
  }
59
60
  ),
60
- /* @__PURE__ */ _("div", { className: e.controls, children: [
61
- /* @__PURE__ */ r("div", { className: e.indicators, children: Array.from({ length: g }).map((t, o) => /* @__PURE__ */ r(
61
+ f > 1 && /* @__PURE__ */ h("div", { className: e.controls, children: [
62
+ /* @__PURE__ */ o("div", { className: e.indicators, children: Array.from({ length: f }).map((t, s) => /* @__PURE__ */ o(
62
63
  "button",
63
64
  {
64
- className: `${e.indicator} ${o === Math.floor(s / n) ? e.active : ""}`,
65
- onClick: () => k(o),
66
- "aria-label": `Go to group ${o + 1}`
65
+ className: `${e.indicator} ${s === Math.floor(n / i) ? e.active : ""}`,
66
+ onClick: () => x(s),
67
+ "aria-label": `Go to group ${s + 1}`
67
68
  },
68
- o
69
+ s
69
70
  )) }),
70
- /* @__PURE__ */ _("div", { className: e.buttons, children: [
71
- /* @__PURE__ */ r(
71
+ /* @__PURE__ */ h("div", { className: e.buttons, children: [
72
+ /* @__PURE__ */ o(
72
73
  "button",
73
74
  {
74
- className: `${e.prev} ${!i && s === 0 ? e.disabled : ""}`,
75
- onClick: x,
75
+ className: `${e.prev} ${!r && n === 0 ? e.disabled : ""}`,
76
+ onClick: w,
76
77
  "aria-label": "Previous slide",
77
- disabled: !i && s === 0,
78
- children: /* @__PURE__ */ r(I, {})
78
+ disabled: !r && n === 0,
79
+ children: /* @__PURE__ */ o(C, {})
79
80
  }
80
81
  ),
81
- /* @__PURE__ */ r(
82
+ /* @__PURE__ */ o(
82
83
  "button",
83
84
  {
84
- className: `${e.next} ${!i && s >= c.length - n ? e.disabled : ""}`,
85
- onClick: h,
85
+ className: `${e.next} ${!r && n >= c.length - i ? e.disabled : ""}`,
86
+ onClick: d,
86
87
  "aria-label": "Next slide",
87
- disabled: !i && s >= c.length - n,
88
- children: /* @__PURE__ */ r(M, {})
88
+ disabled: !r && n >= c.length - i,
89
+ children: /* @__PURE__ */ o(I, {})
89
90
  }
90
91
  )
91
92
  ] })
@@ -93,5 +94,5 @@ function K({
93
94
  ] });
94
95
  }
95
96
  export {
96
- K as Carousel
97
+ H as Carousel
97
98
  };
package/dist/components/Grid/index.js CHANGED
@@ -1,28 +1,28 @@
1
- import { jsx as u } from "react/jsx-runtime";
1
+ import { jsx as c } from "react/jsx-runtime";
2
2
  import '../../assets/index17.css';const y = "_grid_1pzcn_1", $ = {
3
3
  grid: y
4
4
  };
5
5
  function v({
6
- columns: r = 1,
7
- gap: a = "1rem",
8
- areas: o,
9
- autoFitMinMax: l,
10
- className: s,
11
- children: p,
6
+ columns: e = 1,
7
+ gap: l = "1rem",
8
+ areas: a,
9
+ autoFitMinMax: o,
10
+ className: p,
11
+ children: s,
12
12
  style: n,
13
13
  ...m
14
14
  }) {
15
- const e = {
15
+ const r = {
16
16
  ...n,
17
17
  display: "grid",
18
- gap: a
18
+ gap: l
19
19
  };
20
- if (o)
21
- e.gridTemplateAreas = o.map((t) => `"${t.join(" ")}"`).join(" ");
22
- else if (l)
23
- e.gridTemplateColumns = `repeat(auto-fit, minmax(${l}, 1fr))`;
24
- else if (typeof r == "object") {
25
- const { xs: t, sm: d, md: f, lg: g, xl: x, "2xl": b } = r;
20
+ if (a)
21
+ r.gridTemplateAreas = a.map((t) => `"${t.join(" ")}"`).join(" ");
22
+ else if (o)
23
+ r.gridTemplateColumns = `repeat(auto-fit, minmax(${o}, 1fr))`;
24
+ else if (typeof e == "object") {
25
+ const { xs: t, sm: d, md: f, lg: g, xl: x, "2xl": b } = e;
26
26
  [
27
27
  {
28
28
  breakpoint: "xs",
@@ -48,18 +48,18 @@ function v({
48
48
  breakpoint: "2xl",
49
49
  value: b
50
50
  }
51
- ].forEach(({ breakpoint: c, value: i }) => {
52
- i && (e[`--${c}-columns`] = typeof i == "number" ? `repeat(${i}, 1fr)` : i);
51
+ ].forEach(({ breakpoint: u, value: i }) => {
52
+ i && (r[`--${u}-columns`] = typeof i == "number" ? `repeat(${i}, 1fr)` : i);
53
53
  });
54
54
  } else
55
- e.gridTemplateColumns = typeof r == "number" ? `repeat(${r}, 1fr)` : r;
56
- return console.log(e), /* @__PURE__ */ u(
55
+ r.gridTemplateColumns = typeof e == "number" ? `repeat(${e}, 1fr)` : e;
56
+ return /* @__PURE__ */ c(
57
57
  "div",
58
58
  {
59
- className: `${s ?? ""} ${$.grid}`,
60
- style: e,
59
+ className: `${p ?? ""} ${$.grid}`,
60
+ style: r,
61
61
  ...m,
62
- children: p
62
+ children: s
63
63
  }
64
64
  );
65
65
  }
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "quirk-ui",
3
3
  "private": false,
4
- "version": "0.0.28",
4
+ "version": "0.0.30",
5
5
  "type": "module",
6
6
  "exports": {
7
7
  ".": {