quirk-ui 0.0.42 → 0.0.44

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 (4) hide show
  1. package/dist/assets/index31.css +1 -1
  2. package/dist/components/Carousel/index.js +47 -47
  3. package/dist/styles.css +1 -1
  4. package/package.json +1 -1
package/dist/assets/index31.css CHANGED
@@ -1 +1 @@
1
- :root{--card-width: 80%}._carousel_1eliz_5{position:relative;width:100%;overflow:hidden;box-sizing:border-box}._track_1eliz_12{display:flex;transition:transform .5s ease;will-change:transform}._page_1eliz_18{flex:0 0 auto;width:100%;padding:0 var(--spacing-md);box-sizing:border-box;padding:var(--spacing-md)}._slide_1eliz_26{flex:0 0 var(--card-width);padding:0 var(--spacing-md)}@media (min-width: 768px){._slide_1eliz_26{flex:0 0 calc(100% / 3)}}._controls_1eliz_38{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_1eliz_38{width:var(--card-width);margin-left:auto;margin-right:auto}}._indicators_1eliz_55{display:flex;flex-wrap:wrap;gap:var(--spacing-sm);max-width:125px}._indicator_1eliz_55{width:10px;height:10px;border-radius:50%;background-color:#e0e0e0;border:none;cursor:pointer;transition:background-color .3s}._indicator_1eliz_55._active_1eliz_72{background-color:var(--color-primary)}._buttons_1eliz_76{display:flex;gap:var(--spacing-md)}._prev_1eliz_81._disabled_1eliz_81,._next_1eliz_82._disabled_1eliz_81{opacity:.5;pointer-events:none}._buttons_1eliz_76 button:not(._disabled_1eliz_81):hover{background-color:var(--color-primary);color:#fff}._prev_1eliz_81,._next_1eliz_82{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_12mjq_5{position:relative;width:100%;overflow:hidden;box-sizing:border-box}._track_12mjq_12{display:flex;transition:transform .5s ease;will-change:transform}._page_12mjq_18{flex:0 0 auto;width:100%;box-sizing:border-box;gap:var(--spacing-md)}@media (max-width: 767px){._page_12mjq_18{padding:0 var(--spacing-sm)}}._slide_12mjq_29{flex:0 0 var(--card-width);padding:0 var(--spacing-sm)}@media (min-width: 768px){._slide_12mjq_29{flex:0 0 calc(100% / 3);padding:0}}._controls_12mjq_41{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_12mjq_41{width:var(--card-width);margin-left:auto;margin-right:auto}}._indicators_12mjq_58{display:flex;flex-wrap:wrap;gap:var(--spacing-sm);max-width:125px}._indicator_12mjq_58{width:10px;height:10px;border-radius:50%;background-color:#e0e0e0;border:none;cursor:pointer;transition:background-color .3s}._indicator_12mjq_58._active_12mjq_75{background-color:var(--color-primary)}._buttons_12mjq_79{display:flex;gap:var(--spacing-md)}._prev_12mjq_84._disabled_12mjq_84,._next_12mjq_85._disabled_12mjq_84{opacity:.5;pointer-events:none}._buttons_12mjq_79 button:not(._disabled_12mjq_84):hover{background-color:var(--color-primary);color:#fff}._prev_12mjq_84,._next_12mjq_85{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,15 +1,15 @@
1
- import { jsxs as m, jsx as n } from "react/jsx-runtime";
2
- import { useState as p, useRef as E, useEffect as $ } from "react";
3
- import { A as T } from "../../arrow-left-BIJvHwNQ.js";
4
- import { A as j } from "../../arrow-right-QEwnX3Sk.js";
5
- import '../../assets/index31.css';const L = "_carousel_1eliz_5", R = "_track_1eliz_12", W = "_page_1eliz_18", V = "_slide_1eliz_26", X = "_controls_1eliz_38", G = "_indicators_1eliz_55", q = "_indicator_1eliz_55", B = "_active_1eliz_72", D = "_buttons_1eliz_76", F = "_prev_1eliz_81", H = "_disabled_1eliz_81", J = "_next_1eliz_82", t = {
1
+ import { jsxs as p, jsx as i } from "react/jsx-runtime";
2
+ import { useState as f, useRef as S, useEffect as $ } from "react";
3
+ import { A as E } from "../../arrow-left-BIJvHwNQ.js";
4
+ import { A as T } from "../../arrow-right-QEwnX3Sk.js";
5
+ import '../../assets/index31.css';const L = "_carousel_12mjq_5", R = "_track_12mjq_12", W = "_page_12mjq_18", V = "_slide_12mjq_29", X = "_controls_12mjq_41", z = "_indicators_12mjq_58", G = "_indicator_12mjq_58", B = "_active_12mjq_75", D = "_buttons_12mjq_79", F = "_prev_12mjq_84", H = "_disabled_12mjq_84", J = "_next_12mjq_85", t = {
6
6
  carousel: L,
7
7
  track: R,
8
8
  page: W,
9
9
  slide: V,
10
10
  controls: X,
11
- indicators: G,
12
- indicator: q,
11
+ indicators: z,
12
+ indicator: G,
13
13
  active: B,
14
14
  buttons: D,
15
15
  prev: F,
@@ -17,97 +17,97 @@ import '../../assets/index31.css';const L = "_carousel_1eliz_5", R = "_track_1el
17
17
  next: J
18
18
  };
19
19
  function Z({
20
- items: _,
21
- itemsPerPage: f = 9,
20
+ items: l,
21
+ itemsPerPage: _ = 9,
22
22
  itemsPerRow: v = 3,
23
23
  autoPlay: r = !1,
24
24
  autoPlayInterval: b = 3e3,
25
- className: w
25
+ className: j
26
26
  }) {
27
- const [i, o] = p(0), [z, N] = p(1), [a, x] = p(!1), h = E(null), k = i === 0, A = i === _.length - 1, C = Math.ceil(f / v), g = ((e, s) => {
28
- const d = [];
29
- for (let c = 0; c < e.length; c += s)
30
- d.push(e.slice(c, c + s));
31
- return d;
32
- })(_, a ? 1 : f), l = g.length;
27
+ const [n, a] = f(0), [w, N] = f(1), [d, q] = f(!1), h = S(null), x = n === 0, k = n === l.length - 1, A = Math.ceil(_ / v), g = ((e, s) => {
28
+ const m = [];
29
+ for (let o = 0; o < e.length; o += s)
30
+ m.push(e.slice(o, o + s));
31
+ return m;
32
+ })(l, d ? 1 : _), c = g.length;
33
33
  $(() => {
34
34
  const e = () => {
35
- o(0);
35
+ a(0);
36
36
  const s = window.innerWidth < 768;
37
- x(s), N(s ? 1 : 3);
37
+ q(s), N(s ? 1 : 3);
38
38
  };
39
39
  return e(), window.addEventListener("resize", e), () => window.removeEventListener("resize", e);
40
40
  }, []);
41
41
  const u = () => {
42
- (r || !A) && o((e) => Math.min(e + 1, l - 1));
43
- }, I = () => {
44
- (r || !k) && o((e) => Math.max(e - 1, 0));
45
- }, M = (e) => {
46
- o(e * z);
42
+ (r || !k) && a((e) => Math.min(e + 1, c - 1));
43
+ }, C = () => {
44
+ (r || !x) && a((e) => Math.max(e - 1, 0));
45
+ }, I = (e) => {
46
+ a(e * w);
47
47
  };
48
48
  $(() => (r && (h.current = setInterval(u, b)), () => {
49
49
  h.current && clearInterval(h.current);
50
50
  }), [r, b, u]);
51
- const S = () => a ? `translateX(calc(-${i * 80}%))` : `translateX(-${i * 100 / l}%)`;
52
- return /* @__PURE__ */ m("div", { className: `${w ?? ""} ${t.carousel}`, children: [
53
- /* @__PURE__ */ n(
51
+ const M = () => d ? `translateX(calc(-${n * 80}%))` : `translateX(-${n * 100 / c}%)`;
52
+ return /* @__PURE__ */ p("div", { className: `${j ?? ""} ${t.carousel}`, children: [
53
+ /* @__PURE__ */ i(
54
54
  "div",
55
55
  {
56
56
  className: t.track,
57
57
  style: {
58
- width: a ? `${_.length * 80}%` : `${l * 100}%`,
59
- transform: S()
58
+ width: d ? `${l.length * 80}%` : `${c * 100}%`,
59
+ transform: M()
60
60
  },
61
61
  role: "list",
62
- children: g.map((e, s) => /* @__PURE__ */ n(
62
+ children: g.map((e, s) => /* @__PURE__ */ i(
63
63
  "div",
64
64
  {
65
65
  className: t.page,
66
- style: a ? {
66
+ style: d ? {
67
67
  width: "var(--card-width)",
68
68
  display: "flex",
69
69
  justifyContent: "center"
70
70
  } : {
71
- width: `${100 / l}%`,
71
+ width: `${100 / c}%`,
72
72
  display: "grid",
73
73
  gridTemplateColumns: `repeat(${v}, 1fr)`,
74
- gridTemplateRows: `repeat(${C}, auto)`
74
+ gridTemplateRows: `repeat(${A}, auto)`
75
75
  },
76
- children: e.map((d, c) => /* @__PURE__ */ n("div", { className: t.slide, children: d }, c))
76
+ children: e.map((m, o) => /* @__PURE__ */ i("div", { className: t.slide, children: m }, o))
77
77
  },
78
78
  s
79
79
  ))
80
80
  }
81
81
  ),
82
- /* @__PURE__ */ m("div", { className: t.controls, children: [
83
- /* @__PURE__ */ n("div", { className: t.indicators, children: Array.from({ length: l }).map((e, s) => /* @__PURE__ */ n(
82
+ l.length > _ && /* @__PURE__ */ p("div", { className: t.controls, children: [
83
+ /* @__PURE__ */ i("div", { className: t.indicators, children: Array.from({ length: c }).map((e, s) => /* @__PURE__ */ i(
84
84
  "button",
85
85
  {
86
- className: `${t.indicator} ${s === i ? t.active : ""}`,
87
- onClick: () => M(s),
86
+ className: `${t.indicator} ${s === n ? t.active : ""}`,
87
+ onClick: () => I(s),
88
88
  "aria-label": `Go to group ${s + 1}`
89
89
  },
90
90
  s
91
91
  )) }),
92
- /* @__PURE__ */ m("div", { className: t.buttons, children: [
93
- /* @__PURE__ */ n(
92
+ /* @__PURE__ */ p("div", { className: t.buttons, children: [
93
+ /* @__PURE__ */ i(
94
94
  "button",
95
95
  {
96
- className: `${t.prev} ${!r && i === 0 ? t.disabled : ""}`,
97
- onClick: I,
96
+ className: `${t.prev} ${!r && n === 0 ? t.disabled : ""}`,
97
+ onClick: C,
98
98
  "aria-label": "Previous slide",
99
- disabled: !r && i === 0,
100
- children: /* @__PURE__ */ n(T, {})
99
+ disabled: !r && n === 0,
100
+ children: /* @__PURE__ */ i(E, {})
101
101
  }
102
102
  ),
103
- /* @__PURE__ */ n(
103
+ /* @__PURE__ */ i(
104
104
  "button",
105
105
  {
106
- className: `${t.next} ${!r && i === l - 1 ? t.disabled : ""}`,
106
+ className: `${t.next} ${!r && n === c - 1 ? t.disabled : ""}`,
107
107
  onClick: u,
108
108
  "aria-label": "Next slide",
109
- disabled: !r && i === l - 1,
110
- children: /* @__PURE__ */ n(j, {})
109
+ disabled: !r && n === c - 1,
110
+ children: /* @__PURE__ */ i(T, {})
111
111
  }
112
112
  )
113
113
  ] })
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_1eliz_5{position:relative;width:100%;overflow:hidden;box-sizing:border-box}._track_1eliz_12{display:flex;transition:transform .5s ease;will-change:transform}._page_1eliz_18{flex:0 0 auto;width:100%;padding:0 var(--spacing-md);box-sizing:border-box;padding:var(--spacing-md)}._slide_1eliz_26{flex:0 0 var(--card-width);padding:0 var(--spacing-md)}@media (min-width: 768px){._slide_1eliz_26{flex:0 0 calc(100% / 3)}}._controls_1eliz_38{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_1eliz_38{width:var(--card-width);margin-left:auto;margin-right:auto}}._indicators_1eliz_55{display:flex;flex-wrap:wrap;gap:var(--spacing-sm);max-width:125px}._indicator_1eliz_55{width:10px;height:10px;border-radius:50%;background-color:#e0e0e0;border:none;cursor:pointer;transition:background-color .3s}._indicator_1eliz_55._active_1eliz_72{background-color:var(--color-primary)}._buttons_1eliz_76{display:flex;gap:var(--spacing-md)}._prev_1eliz_81._disabled_1eliz_81,._next_1eliz_82._disabled_1eliz_81{opacity:.5;pointer-events:none}._buttons_1eliz_76 button:not(._disabled_1eliz_81):hover{background-color:var(--color-primary);color:#fff}._prev_1eliz_81,._next_1eliz_82{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_12mjq_5{position:relative;width:100%;overflow:hidden;box-sizing:border-box}._track_12mjq_12{display:flex;transition:transform .5s ease;will-change:transform}._page_12mjq_18{flex:0 0 auto;width:100%;box-sizing:border-box;gap:var(--spacing-md)}@media (max-width: 767px){._page_12mjq_18{padding:0 var(--spacing-sm)}}._slide_12mjq_29{flex:0 0 var(--card-width);padding:0 var(--spacing-sm)}@media (min-width: 768px){._slide_12mjq_29{flex:0 0 calc(100% / 3);padding:0}}._controls_12mjq_41{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_12mjq_41{width:var(--card-width);margin-left:auto;margin-right:auto}}._indicators_12mjq_58{display:flex;flex-wrap:wrap;gap:var(--spacing-sm);max-width:125px}._indicator_12mjq_58{width:10px;height:10px;border-radius:50%;background-color:#e0e0e0;border:none;cursor:pointer;transition:background-color .3s}._indicator_12mjq_58._active_12mjq_75{background-color:var(--color-primary)}._buttons_12mjq_79{display:flex;gap:var(--spacing-md)}._prev_12mjq_84._disabled_12mjq_84,._next_12mjq_85._disabled_12mjq_84{opacity:.5;pointer-events:none}._buttons_12mjq_79 button:not(._disabled_12mjq_84):hover{background-color:var(--color-primary);color:#fff}._prev_12mjq_84,._next_12mjq_85{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.42",
4
+ "version": "0.0.44",
5
5
  "type": "module",
6
6
  "exports": {
7
7
  ".": {