quirk-ui 0.0.31 → 0.0.33

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 (6) hide show
  1. package/dist/assets/index31.css +1 -1
  2. package/dist/components/Carousel/index.js +30 -30
  3. package/dist/components/Grid/index.js +20 -26
  4. package/dist/lib/components/Grid/index.d.ts +0 -1
  5. package/dist/styles.css +1 -1
  6. package/package.json +1 -1
package/dist/assets/index31.css CHANGED
@@ -1 +1 @@
1
- :root{--card-width: 80%}._carousel_1h8mt_5{position:relative;width:100%;overflow:hidden;box-sizing:border-box}._track_1h8mt_12{display:flex;transition:transform .5s ease;will-change:transform}._slide_1h8mt_18{flex:0 0 var(--card-width);padding:0 10px}@media (min-width: 768px){._slide_1h8mt_18{flex:0 0 calc(100% / 3)}}._controls_1h8mt_30{display:flex;justify-content:space-between;align-items:center;margin-top:var(--spacing-md);padding:0 var(--spacing-md);width:100%}@media (max-width: 767px){._controls_1h8mt_30{width:var(--card-width);margin-left:auto;margin-right:auto}}._indicators_1h8mt_47{display:flex;gap:var(--spacing-sm)}._indicator_1h8mt_47{width:10px;height:10px;border-radius:50%;background-color:#e0e0e0;border:none;cursor:pointer;transition:background-color .3s}._indicator_1h8mt_47._active_1h8mt_62{background-color:var(--color-primary)}._buttons_1h8mt_66{display:flex;gap:var(--spacing-md)}._prev_1h8mt_71._disabled_1h8mt_71,._next_1h8mt_72._disabled_1h8mt_71{opacity:.5;pointer-events:none}._buttons_1h8mt_66 button:not(._disabled_1h8mt_71):hover{background-color:var(--color-primary);color:#fff}._prev_1h8mt_71,._next_1h8mt_72{background-color:#e0e0e0;color:var(--color-text-primary);border:none;padding:var(--spacing-sm);cursor:pointer;transition:background-color .3s,color .3s;border-radius:50%;width:40px;height:40px}
1
+ :root{--card-width: 80%}._carousel_18d0u_5{position:relative;width:100%;overflow:hidden;box-sizing:border-box}._track_18d0u_12{display:flex;transition:transform .5s ease;will-change:transform}._slide_18d0u_18{flex:0 0 var(--card-width);padding:0 10px;transition:flex .3s ease,flex-basis .3s ease}@media (min-width: 768px){._slide_18d0u_18{flex:0 0 calc(100% / 3)}}._controls_18d0u_31{display:flex;justify-content:space-between;align-items:center;margin-top:var(--spacing-md);padding:0 var(--spacing-md);width:100%}@media (max-width: 767px){._controls_18d0u_31{width:var(--card-width);margin-left:auto;margin-right:auto}}._indicators_18d0u_48{display:flex;gap:var(--spacing-sm)}._indicator_18d0u_48{width:10px;height:10px;border-radius:50%;background-color:#e0e0e0;border:none;cursor:pointer;transition:background-color .3s}._indicator_18d0u_48._active_18d0u_63{background-color:var(--color-primary)}._buttons_18d0u_67{display:flex;gap:var(--spacing-md)}._prev_18d0u_72._disabled_18d0u_72,._next_18d0u_73._disabled_18d0u_72{opacity:.5;pointer-events:none}._buttons_18d0u_67 button:not(._disabled_18d0u_72):hover{background-color:var(--color-primary);color:#fff}._prev_18d0u_72,._next_18d0u_73{background-color:#e0e0e0;color:var(--color-text-primary);border:none;padding:var(--spacing-sm);cursor:pointer;transition:background-color .3s,color .3s;border-radius:50%;width:40px;height:40px}
package/dist/components/Carousel/index.js CHANGED
@@ -1,8 +1,8 @@
1
- import { jsxs as h, jsx as o } from "react/jsx-runtime";
2
- import { useState as _, useRef as A, useEffect as f } from "react";
1
+ import { jsxs as u, jsx as o } from "react/jsx-runtime";
2
+ import { useState as _, useRef as A, useEffect as h } from "react";
3
3
  import { A as C } from "../../arrow-left-BIJvHwNQ.js";
4
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 = {
5
+ import '../../assets/index31.css';const M = "_carousel_18d0u_5", S = "_track_18d0u_12", W = "_slide_18d0u_18", E = "_controls_18d0u_31", L = "_indicators_18d0u_48", R = "_indicator_18d0u_48", j = "_active_18d0u_63", z = "_buttons_18d0u_67", G = "_prev_18d0u_72", T = "_disabled_18d0u_72", V = "_next_18d0u_73", t = {
6
6
  carousel: M,
7
7
  track: S,
8
8
  slide: W,
@@ -18,61 +18,61 @@ import '../../assets/index31.css';const M = "_carousel_1h8mt_5", S = "_track_1h8
18
18
  function H({
19
19
  items: c,
20
20
  autoPlay: r = !1,
21
- autoPlayInterval: m = 3e3,
21
+ autoPlayInterval: f = 3e3,
22
22
  className: b
23
23
  }) {
24
- const [i, l] = _(0), [s, u] = _(3), [v, N] = _(!1), a = A(null), $ = i === 0, g = i === c.length - 1, p = Math.ceil(c.length / s);
25
- f(() => {
26
- const t = () => {
24
+ const [i, l] = _(0), [s, v] = _(3), [m, N] = _(!1), d = A(null), $ = i === 0, g = i === c.length - 1, p = Math.ceil(c.length / s);
25
+ h(() => {
26
+ const e = () => {
27
27
  l(0);
28
28
  const n = window.innerWidth < 768;
29
- N(n), u(n ? 1 : 3);
29
+ N(n), v(n ? 1 : 3);
30
30
  };
31
- return t(), window.addEventListener("resize", t), () => window.removeEventListener("resize", t);
31
+ return e(), window.addEventListener("resize", e), () => window.removeEventListener("resize", e);
32
32
  }, []);
33
- const d = () => {
33
+ const a = () => {
34
34
  (r || !g) && l(
35
- (t) => t < c.length - s ? t + s : t
35
+ (e) => e < c.length - s ? e + s : e
36
36
  );
37
37
  }, w = () => {
38
- (r || !$) && l((t) => t > 0 ? t - s : 0);
39
- }, x = (t) => {
40
- l(t * s);
38
+ (r || !$) && l((e) => e > 0 ? e - s : 0);
39
+ }, x = (e) => {
40
+ l(e * s);
41
41
  };
42
- f(() => (r && (a.current = setInterval(d, m)), () => {
43
- a.current && clearInterval(a.current);
44
- }), [r, m, d]);
42
+ h(() => (r && (d.current = setInterval(a, f)), () => {
43
+ d.current && clearInterval(d.current);
44
+ }), [r, f, a]);
45
45
  const k = () => {
46
- if (v)
46
+ if (m)
47
47
  return `translateX(calc(-${i * 80}% + 10%))`;
48
- const t = 100 / s;
49
- return `translateX(-${i * t}%)`;
48
+ const e = 100 / s;
49
+ return `translateX(-${i * e}%)`;
50
50
  };
51
- return /* @__PURE__ */ h("div", { className: `${b ?? ""} ${e.carousel}`, children: [
51
+ return /* @__PURE__ */ u("div", { className: `${b ?? ""} ${t.carousel}`, children: [
52
52
  /* @__PURE__ */ o(
53
53
  "div",
54
54
  {
55
- className: e.track,
55
+ className: t.track,
56
56
  style: { transform: k() },
57
57
  role: "list",
58
- children: c.map((t, n) => /* @__PURE__ */ o("div", { className: e.slide, children: t }, n))
58
+ children: c.map((e, n) => /* @__PURE__ */ o("div", { className: t.slide, children: e }, n))
59
59
  }
60
60
  ),
61
- c.length > s && /* @__PURE__ */ h("div", { className: e.controls, children: [
62
- /* @__PURE__ */ o("div", { className: e.indicators, children: Array.from({ length: p }).map((t, n) => /* @__PURE__ */ o(
61
+ c.length > s && /* @__PURE__ */ u("div", { className: t.controls, children: [
62
+ /* @__PURE__ */ o("div", { className: t.indicators, children: Array.from({ length: p }).map((e, n) => /* @__PURE__ */ o(
63
63
  "button",
64
64
  {
65
- className: `${e.indicator} ${n === Math.floor(i / s) ? e.active : ""}`,
65
+ className: `${t.indicator} ${n === Math.floor(i / s) ? t.active : ""}`,
66
66
  onClick: () => x(n),
67
67
  "aria-label": `Go to group ${n + 1}`
68
68
  },
69
69
  n
70
70
  )) }),
71
- /* @__PURE__ */ h("div", { className: e.buttons, children: [
71
+ /* @__PURE__ */ u("div", { className: t.buttons, children: [
72
72
  /* @__PURE__ */ o(
73
73
  "button",
74
74
  {
75
- className: `${e.prev} ${!r && i === 0 ? e.disabled : ""}`,
75
+ className: `${t.prev} ${!r && i === 0 ? t.disabled : ""}`,
76
76
  onClick: w,
77
77
  "aria-label": "Previous slide",
78
78
  disabled: !r && i === 0,
@@ -82,8 +82,8 @@ function H({
82
82
  /* @__PURE__ */ o(
83
83
  "button",
84
84
  {
85
- className: `${e.next} ${!r && i >= c.length - s ? e.disabled : ""}`,
86
- onClick: d,
85
+ className: `${t.next} ${!r && i >= c.length - s ? t.disabled : ""}`,
86
+ onClick: a,
87
87
  "aria-label": "Next slide",
88
88
  disabled: !r && i >= c.length - s,
89
89
  children: /* @__PURE__ */ o(I, {})
package/dist/components/Grid/index.js CHANGED
@@ -1,28 +1,26 @@
1
- import { jsx as c } from "react/jsx-runtime";
1
+ import { jsx as u } from "react/jsx-runtime";
2
2
  import '../../assets/index17.css';const y = "_grid_1pzcn_1", $ = {
3
3
  grid: y
4
4
  };
5
- function v({
5
+ function j({
6
6
  columns: e = 1,
7
- gap: l = "1rem",
8
- areas: a,
9
- autoFitMinMax: o,
10
- className: p,
11
- children: s,
7
+ gap: p = "1rem",
8
+ areas: o,
9
+ autoFitMinMax: a,
10
+ className: s,
11
+ children: m,
12
12
  style: n,
13
- ...m
13
+ ...d
14
14
  }) {
15
15
  const r = {
16
16
  ...n,
17
17
  display: "grid",
18
- gap: l
18
+ gap: p
19
19
  };
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))`;
20
+ if (o && (r.gridTemplateAreas = o.map((t) => `"${t.join(" ")}"`).join(" ")), a)
21
+ r.gridTemplateColumns = `repeat(auto-fit, minmax(${a}, 1fr))`;
24
22
  else if (typeof e == "object") {
25
- const { xs: t, sm: d, md: f, lg: g, xl: x, "2xl": b } = e;
23
+ const { xs: t, sm: l, md: f, lg: g, xl: b } = e;
26
24
  [
27
25
  {
28
26
  breakpoint: "xs",
@@ -30,7 +28,7 @@ function v({
30
28
  },
31
29
  {
32
30
  breakpoint: "sm",
33
- value: d
31
+ value: l
34
32
  },
35
33
  {
36
34
  breakpoint: "md",
@@ -42,27 +40,23 @@ function v({
42
40
  },
43
41
  {
44
42
  breakpoint: "xl",
45
- value: x
46
- },
47
- {
48
- breakpoint: "2xl",
49
43
  value: b
50
44
  }
51
- ].forEach(({ breakpoint: u, value: i }) => {
52
- i && (r[`--${u}-columns`] = typeof i == "number" ? `repeat(${i}, 1fr)` : i);
45
+ ].forEach(({ breakpoint: c, value: i }) => {
46
+ i && (r[`--${c}-columns`] = typeof i == "number" ? `repeat(${i}, 1fr)` : i);
53
47
  });
54
48
  } else
55
49
  r.gridTemplateColumns = typeof e == "number" ? `repeat(${e}, 1fr)` : e;
56
- return /* @__PURE__ */ c(
50
+ return /* @__PURE__ */ u(
57
51
  "div",
58
52
  {
59
- className: `${p ?? ""} ${$.grid}`,
53
+ className: `${s ?? ""} ${$.grid}`,
60
54
  style: r,
61
- ...m,
62
- children: s
55
+ ...d,
56
+ children: m
63
57
  }
64
58
  );
65
59
  }
66
60
  export {
67
- v as Grid
61
+ j as Grid
68
62
  };
package/dist/lib/components/Grid/index.d.ts CHANGED
@@ -5,7 +5,6 @@ type BreakpointColumns = {
5
5
  md?: number | string;
6
6
  lg?: number | string;
7
7
  xl?: number | string;
8
- "2xl"?: number | string;
9
8
  };
10
9
  type GridProps = {
11
10
  columns?: number | string | BreakpointColumns;
package/dist/styles.css CHANGED
@@ -28,7 +28,7 @@ ul._list_4w9h5_1{list-style-type:none;padding:0;margin:0}ol._list_4w9h5_1{list-s
28
28
  ._notification_1txoc_1{display:flex;align-items:center;padding:var(--spacing-md);background-color:var(--color-secondary);color:var(--color-text-primaray);box-shadow:0 4px 8px #0000001a;border-radius:var(--radius-md);font-size:var(--font-size-md);font-weight:var(--font-weight-semibold);gap:var(--spacing-sm);animation:_slideIn_1txoc_1 .3s ease forwards;opacity:1;transform-origin:right center;width:fit-content}._enter_1txoc_18{opacity:1;transform:translate(0)}._exiting_1txoc_23{animation:_slideOut_1txoc_1 .3s ease forwards}._info_1txoc_27{background-color:var(--color-info-bg);color:var(--color-info-text)}._success_1txoc_32{background-color:var(--color-success-bg);color:var(--color-success-text)}._warning_1txoc_37{background-color:var(--color-warning-bg);color:var(--color-warning-text)}._error_1txoc_42{background-color:var(--color-error-bg);color:var(--color-error-text)}._closeButton_1txoc_47{background:none;border:none;cursor:pointer;color:#fff;padding:0;margin-left:auto;display:flex;align-items:center}@keyframes _slideIn_1txoc_1{0%{transform:translate(100%);opacity:0}to{transform:translate(0);opacity:1}}@keyframes _slideOut_1txoc_1{0%{transform:translate(0);opacity:1}to{transform:translate(100%);opacity:0}}
29
29
  ._container_61msx_1{position:fixed;bottom:1rem;right:1rem;display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-end;gap:.5rem;z-index:1000}
30
30
  ._progressBarContainer_a1m8u_1{display:flex;align-items:center;justify-content:center;gap:.25rem;width:100%}._progressBar_a1m8u_1{flex:1;height:12px;background-color:#f0f0f0;border-radius:4px;overflow:hidden;position:relative}._fill_a1m8u_18{height:100%;transition:width .3s ease;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;border-radius:4px}._primary_a1m8u_29 ._fill_a1m8u_18{background-color:var(--color-primary)}._success_a1m8u_33 ._fill_a1m8u_18{background-color:var(--color-success)}._warning_a1m8u_37 ._fill_a1m8u_18{background-color:var(--color-warning)}._danger_a1m8u_41 ._fill_a1m8u_18{background-color:var(--color-error)}._label_a1m8u_45{flex:.1;position:relative;width:auto;text-align:center;color:var(--color-text-primary);font-size:var(--font-size-xs);font-weight:var(--font-weight-semibold)}
31
- :root{--card-width: 80%}._carousel_1h8mt_5{position:relative;width:100%;overflow:hidden;box-sizing:border-box}._track_1h8mt_12{display:flex;transition:transform .5s ease;will-change:transform}._slide_1h8mt_18{flex:0 0 var(--card-width);padding:0 10px}@media (min-width: 768px){._slide_1h8mt_18{flex:0 0 calc(100% / 3)}}._controls_1h8mt_30{display:flex;justify-content:space-between;align-items:center;margin-top:var(--spacing-md);padding:0 var(--spacing-md);width:100%}@media (max-width: 767px){._controls_1h8mt_30{width:var(--card-width);margin-left:auto;margin-right:auto}}._indicators_1h8mt_47{display:flex;gap:var(--spacing-sm)}._indicator_1h8mt_47{width:10px;height:10px;border-radius:50%;background-color:#e0e0e0;border:none;cursor:pointer;transition:background-color .3s}._indicator_1h8mt_47._active_1h8mt_62{background-color:var(--color-primary)}._buttons_1h8mt_66{display:flex;gap:var(--spacing-md)}._prev_1h8mt_71._disabled_1h8mt_71,._next_1h8mt_72._disabled_1h8mt_71{opacity:.5;pointer-events:none}._buttons_1h8mt_66 button:not(._disabled_1h8mt_71):hover{background-color:var(--color-primary);color:#fff}._prev_1h8mt_71,._next_1h8mt_72{background-color:#e0e0e0;color:var(--color-text-primary);border:none;padding:var(--spacing-sm);cursor:pointer;transition:background-color .3s,color .3s;border-radius:50%;width:40px;height:40px}
31
+ :root{--card-width: 80%}._carousel_18d0u_5{position:relative;width:100%;overflow:hidden;box-sizing:border-box}._track_18d0u_12{display:flex;transition:transform .5s ease;will-change:transform}._slide_18d0u_18{flex:0 0 var(--card-width);padding:0 10px;transition:flex .3s ease,flex-basis .3s ease}@media (min-width: 768px){._slide_18d0u_18{flex:0 0 calc(100% / 3)}}._controls_18d0u_31{display:flex;justify-content:space-between;align-items:center;margin-top:var(--spacing-md);padding:0 var(--spacing-md);width:100%}@media (max-width: 767px){._controls_18d0u_31{width:var(--card-width);margin-left:auto;margin-right:auto}}._indicators_18d0u_48{display:flex;gap:var(--spacing-sm)}._indicator_18d0u_48{width:10px;height:10px;border-radius:50%;background-color:#e0e0e0;border:none;cursor:pointer;transition:background-color .3s}._indicator_18d0u_48._active_18d0u_63{background-color:var(--color-primary)}._buttons_18d0u_67{display:flex;gap:var(--spacing-md)}._prev_18d0u_72._disabled_18d0u_72,._next_18d0u_73._disabled_18d0u_72{opacity:.5;pointer-events:none}._buttons_18d0u_67 button:not(._disabled_18d0u_72):hover{background-color:var(--color-primary);color:#fff}._prev_18d0u_72,._next_18d0u_73{background-color:#e0e0e0;color:var(--color-text-primary);border:none;padding:var(--spacing-sm);cursor:pointer;transition:background-color .3s,color .3s;border-radius:50%;width:40px;height:40px}
32
32
  ._drawer_55xty_1{position:fixed;background-color:var(--color-background);transition:transform .3s ease-in-out;z-index:1000;width:300px;height:100%;box-shadow:0 0 10px #00000026;padding:var(--spacing-md)}._right_55xty_12{top:0;right:0;transform:translate(100%)}._left_55xty_18{top:0;left:0;transform:translate(-100%)}._top_55xty_24{top:0;left:0;width:100%;height:auto;transform:translateY(-100%)}._bottom_55xty_32{bottom:0;left:0;width:100%;height:auto;transform:translateY(100%)}._open_55xty_40._right_55xty_12,._open_55xty_40._left_55xty_18{transform:translate(0)}._open_55xty_40._top_55xty_24,._open_55xty_40._bottom_55xty_32{transform:translateY(0)}._overlay_55xty_50{position:fixed;top:0;right:0;bottom:0;left:0;background-color:#0000004d;opacity:0;pointer-events:none;transition:opacity .3s ease-in-out;z-index:999}._overlay_55xty_50._show_55xty_60{opacity:1;pointer-events:all}
33
33
  ._tabs_f06du_1{display:flex;flex-direction:column;width:100%}._tabsList_f06du_7{display:flex;border-bottom:2px solid var(--color-border)}._left_f06du_12{justify-content:flex-start}._center_f06du_16{justify-content:center}._right_f06du_20{justify-content:flex-end}._tabsTrigger_f06du_24{padding:var(--spacing-md);border:none;border-bottom:2px solid transparent;background:none;cursor:pointer;color:var(--color-muted);font-weight:var(--font-weight-semibold);font-size:var(--font-size-md);transition:color .3s ease,border-color .3s ease;position:relative;top:2px}._tabsTrigger_f06du_24._active_f06du_38{border-color:var(--color-primary);color:var(--color-primary)}._tabsPanelWrapper_f06du_43{position:relative;min-height:100px}._tabsPanel_f06du_43{animation:_fadeSlide_f06du_1 .3s ease both;position:absolute;width:100%;top:0;left:0;padding:var(--spacing-md);color:var(--color-text-primary)}@keyframes _fadeSlide_f06du_1{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
34
34
  ._breadcrumbs_1nbgu_1{display:block;font-size:var(--font-size-sm);line-height:1.5}._list_1nbgu_7{display:flex;flex-wrap:wrap;list-style:none;padding:0;margin:0}._item_1nbgu_15{display:flex;align-items:center}._separator_1nbgu_20{margin:0 var(--spacing-xs);color:var(--color-muted)}._link_1nbgu_25{color:var(--color-muted);text-decoration:none;transition:color .3s ease}._link_1nbgu_25:hover{color:var(--color-primary)}._label_1nbgu_35{color:var(--color-muted)}._active_1nbgu_39{font-weight:var(--font-weight-bold);color:var(--color-primary)}
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "quirk-ui",
3
3
  "private": false,
4
- "version": "0.0.31",
4
+ "version": "0.0.33",
5
5
  "type": "module",
6
6
  "exports": {
7
7
  ".": {