quirk-ui 0.0.45 → 0.0.47

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 +60 -61
  3. package/dist/styles.css +1 -1
  4. package/package.json +1 -1
package/dist/assets/index31.css CHANGED
@@ -1 +1 @@
1
- ._carousel_okw4o_1{width:100%}._trackContainer_okw4o_5{overflow:hidden;width:100%}._track_okw4o_5{display:flex;transition:transform .3s ease;will-change:transform}._page_okw4o_16{display:flex;gap:var(--spacing-md);padding:0 var(--spacing-sm)}._slide_okw4o_22{background-color:red}._controls_okw4o_26{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_okw4o_26{width:var(--card-width);margin-left:auto;margin-right:auto}}._indicators_okw4o_43{display:flex;flex-wrap:wrap;max-width:125px;gap:var(--spacing-sm)}._indicator_okw4o_43{width:10px;height:10px;border-radius:50%;background-color:#e0e0e0;border:none;cursor:pointer;transition:background-color .3s}._indicator_okw4o_43._active_okw4o_60{background-color:var(--color-primary)}._buttons_okw4o_64{display:flex;gap:var(--spacing-md)}._prev_okw4o_69._disabled_okw4o_69,._next_okw4o_70._disabled_okw4o_69{opacity:.5;pointer-events:none}._buttons_okw4o_64 button:not(._disabled_okw4o_69):hover{background-color:var(--color-primary);color:#fff}._prev_okw4o_69,._next_okw4o_70{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;display:flex;justify-content:center;align-items:center}
1
+ ._carousel_pk3a7_1{width:100%}@media (max-width: 767px){._carousel_pk3a7_1{padding:0 3rem}}._trackContainer_pk3a7_9{overflow:hidden;width:100%}@media (max-width: 767px){._trackContainer_pk3a7_9{overflow:visible}}._track_pk3a7_9{display:flex;transition:transform .3s ease;will-change:transform}._page_pk3a7_24{display:flex;gap:var(--spacing-md);padding:0 var(--spacing-sm)}._controls_pk3a7_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_pk3a7_30{width:var(--card-width);margin-left:auto;margin-right:auto}}._indicators_pk3a7_47{display:flex;flex-wrap:wrap;max-width:125px;gap:var(--spacing-sm)}._indicator_pk3a7_47{width:10px;height:10px;border-radius:50%;background-color:#e0e0e0;border:none;cursor:pointer;transition:background-color .3s}._indicator_pk3a7_47._active_pk3a7_64{background-color:var(--color-primary)}._buttons_pk3a7_68{display:flex;gap:var(--spacing-md)}._prev_pk3a7_73._disabled_pk3a7_73,._next_pk3a7_74._disabled_pk3a7_73{opacity:.5;pointer-events:none}._buttons_pk3a7_68 button:not(._disabled_pk3a7_73):hover{background-color:var(--color-primary);color:#fff}._prev_pk3a7_73,._next_pk3a7_74{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;display:flex;justify-content:center;align-items:center}
package/dist/components/Carousel/index.js CHANGED
@@ -1,93 +1,92 @@
1
- import { jsxs as f, jsx as s } from "react/jsx-runtime";
2
- import { useState as v, useRef as $, useEffect as k } from "react";
1
+ import { jsxs as v, jsx as r } from "react/jsx-runtime";
2
+ import { useState as k, useRef as w, useEffect as b } from "react";
3
3
  import { A as T } from "../../arrow-left-BIJvHwNQ.js";
4
4
  import { A as W } from "../../arrow-right-QEwnX3Sk.js";
5
- import '../../assets/index31.css';const E = "_carousel_okw4o_1", L = "_trackContainer_okw4o_5", j = "_track_okw4o_5", X = "_page_okw4o_16", D = "_slide_okw4o_22", G = "_controls_okw4o_26", O = "_indicators_okw4o_43", S = "_indicator_okw4o_43", q = "_active_okw4o_60", B = "_buttons_okw4o_64", F = "_prev_okw4o_69", H = "_disabled_okw4o_69", J = "_next_okw4o_70", t = {
5
+ import '../../assets/index31.css';const E = "_carousel_pk3a7_1", L = "_trackContainer_pk3a7_9", j = "_track_pk3a7_9", X = "_page_pk3a7_24", D = "_controls_pk3a7_30", G = "_indicators_pk3a7_47", O = "_indicator_pk3a7_47", S = "_active_pk3a7_64", q = "_buttons_pk3a7_68", B = "_prev_pk3a7_73", F = "_disabled_pk3a7_73", H = "_next_pk3a7_74", t = {
6
6
  carousel: E,
7
7
  trackContainer: L,
8
8
  track: j,
9
9
  page: X,
10
- slide: D,
11
- controls: G,
12
- indicators: O,
13
- indicator: S,
14
- active: q,
15
- buttons: B,
16
- prev: F,
17
- disabled: H,
18
- next: J
10
+ controls: D,
11
+ indicators: G,
12
+ indicator: O,
13
+ active: S,
14
+ buttons: q,
15
+ prev: B,
16
+ disabled: F,
17
+ next: H
19
18
  };
20
- function Y({
21
- items: b,
19
+ function V({
20
+ items: g,
22
21
  itemsPerPage: m = 3,
23
22
  itemsPerRow: N = 3,
24
- autoPlay: r = !1,
25
- autoPlayInterval: g = 3e3,
23
+ autoPlay: a = !1,
24
+ autoPlayInterval: x = 3e3,
26
25
  className: C
27
26
  }) {
28
- const [c, d] = v(0), [l, R] = v(0), [i, I] = v(m), u = $(null), p = $(null), M = (e, n) => {
29
- const o = [];
30
- for (let a = 0; a < e.length; a += n)
31
- o.push(e.slice(a, a + n));
32
- return o;
27
+ const [c, d] = k(0), [i, R] = k(0), [p, I] = k(m), u = w(null), h = w(null), z = (e, n) => {
28
+ const s = [];
29
+ for (let o = 0; o < e.length; o += n)
30
+ s.push(e.slice(o, o + n));
31
+ return s;
33
32
  };
34
- k(() => {
33
+ b(() => {
35
34
  const e = () => {
36
35
  const n = window.innerWidth < 768;
37
36
  I(n ? 1 : m);
38
37
  };
39
38
  return e(), window.addEventListener("resize", e), () => window.removeEventListener("resize", e);
40
39
  }, [m]);
41
- const _ = Math.ceil(i / N), x = M(b, i), h = x.length;
42
- k(() => {
40
+ const _ = Math.ceil(p / N), $ = z(g, p), l = $.length;
41
+ b(() => {
43
42
  const e = new ResizeObserver((n) => {
44
- for (let o of n)
45
- o.contentRect && (R(o.contentRect.width), d(0));
43
+ for (let s of n)
44
+ s.contentRect && (R(s.contentRect.width), d(0));
46
45
  });
47
46
  return u.current && e.observe(u.current), () => e.disconnect();
48
47
  }, []);
49
- const w = () => {
50
- d((e) => Math.min(e + 1, h - 1));
51
- }, z = () => {
48
+ const f = () => {
49
+ d((e) => Math.min(e + 1, l - 1));
50
+ }, A = () => {
52
51
  d((e) => Math.max(e - 1, 0));
53
- }, A = (e) => {
52
+ }, M = (e) => {
54
53
  d(e);
55
- }, y = () => l ? `translateX(-${c * l}px)` : "translateX(0px)";
56
- return k(() => (r && (p.current = setInterval(w, g)), () => {
57
- p.current && clearInterval(p.current);
58
- }), [r, g, w]), /* @__PURE__ */ f("div", { className: `${C ?? ""} ${t.carousel}`, ref: u, children: [
59
- /* @__PURE__ */ s(
54
+ }, y = () => i ? `translateX(-${c * i}px)` : "translateX(0px)";
55
+ return b(() => (a && (h.current = setInterval(f, x)), () => {
56
+ h.current && clearInterval(h.current);
57
+ }), [a, x, f]), /* @__PURE__ */ v("div", { className: `${C ?? ""} ${t.carousel}`, ref: u, children: [
58
+ /* @__PURE__ */ r(
60
59
  "div",
61
60
  {
62
61
  className: t.trackContainer,
63
- style: { maxWidth: `${l}px` },
64
- children: /* @__PURE__ */ s(
62
+ style: { maxWidth: `${i}px` },
63
+ children: /* @__PURE__ */ r(
65
64
  "div",
66
65
  {
67
66
  className: t.track,
68
- style: { width: `${h * 100}%`, transform: y() },
69
- children: x.map((e, n) => /* @__PURE__ */ s(
67
+ style: { width: `${l * 100}%`, transform: y() },
68
+ children: $.map((e, n) => /* @__PURE__ */ r(
70
69
  "div",
71
70
  {
72
71
  className: t.page,
73
72
  style: {
74
- display: Math.ceil(i / _) > 1 ? "grid" : "flex",
73
+ display: _ > 1 ? "grid" : "flex",
75
74
  gridTemplateColumns: `repeat(${Math.ceil(
76
- i / _
75
+ p / _
77
76
  )}, 1fr)`,
78
77
  gridTemplateRows: `repeat(${_}, auto)`,
79
- width: `${l}px`
78
+ width: `${i}px`
80
79
  },
81
- children: e.map((o, a) => /* @__PURE__ */ s(
80
+ children: e.map((s, o) => /* @__PURE__ */ r(
82
81
  "div",
83
82
  {
84
83
  className: t.slide,
85
84
  style: {
86
- width: `${l / Math.ceil(i / _) - 16}px`
85
+ width: `${i / _ - 16}px`
87
86
  },
88
- children: o
87
+ children: s
89
88
  },
90
- a
89
+ o
91
90
  ))
92
91
  },
93
92
  n
@@ -96,35 +95,35 @@ function Y({
96
95
  )
97
96
  }
98
97
  ),
99
- /* @__PURE__ */ f("div", { className: t.controls, children: [
100
- /* @__PURE__ */ s("div", { className: t.indicators, children: Array.from({ length: h }).map((e, n) => /* @__PURE__ */ s(
98
+ l > 1 && /* @__PURE__ */ v("div", { className: t.controls, children: [
99
+ /* @__PURE__ */ r("div", { className: t.indicators, children: Array.from({ length: l }).map((e, n) => /* @__PURE__ */ r(
101
100
  "button",
102
101
  {
103
102
  className: `${t.indicator} ${n === c ? t.active : ""}`,
104
- onClick: () => A(n),
103
+ onClick: () => M(n),
105
104
  "aria-label": `Go to group ${n + 1}`
106
105
  },
107
106
  n
108
107
  )) }),
109
- /* @__PURE__ */ f("div", { className: t.buttons, children: [
110
- /* @__PURE__ */ s(
108
+ /* @__PURE__ */ v("div", { className: t.buttons, children: [
109
+ /* @__PURE__ */ r(
111
110
  "button",
112
111
  {
113
112
  "aria-label": "Previous slide",
114
- className: `${t.prev} ${!r && c === 0 ? t.disabled : ""}`,
115
- onClick: z,
116
- disabled: !r && c === 0,
117
- children: /* @__PURE__ */ s(T, { size: 36 })
113
+ className: `${t.prev} ${!a && c === 0 ? t.disabled : ""}`,
114
+ onClick: A,
115
+ disabled: !a && c === 0,
116
+ children: /* @__PURE__ */ r(T, { size: 36 })
118
117
  }
119
118
  ),
120
- /* @__PURE__ */ s(
119
+ /* @__PURE__ */ r(
121
120
  "button",
122
121
  {
123
122
  "aria-label": "Next slide",
124
- className: `${t.next} ${!r && c >= h - 1 ? t.disabled : ""}`,
125
- onClick: w,
126
- disabled: !r && c >= b.length - i,
127
- children: /* @__PURE__ */ s(W, { size: 36 })
123
+ className: `${t.next} ${!a && c >= l - 1 ? t.disabled : ""}`,
124
+ onClick: f,
125
+ disabled: !a && c >= g.length - p,
126
+ children: /* @__PURE__ */ r(W, { size: 36 })
128
127
  }
129
128
  )
130
129
  ] })
@@ -132,5 +131,5 @@ function Y({
132
131
  ] });
133
132
  }
134
133
  export {
135
- Y as Carousel
134
+ V as Carousel
136
135
  };
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
- ._carousel_okw4o_1{width:100%}._trackContainer_okw4o_5{overflow:hidden;width:100%}._track_okw4o_5{display:flex;transition:transform .3s ease;will-change:transform}._page_okw4o_16{display:flex;gap:var(--spacing-md);padding:0 var(--spacing-sm)}._slide_okw4o_22{background-color:red}._controls_okw4o_26{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_okw4o_26{width:var(--card-width);margin-left:auto;margin-right:auto}}._indicators_okw4o_43{display:flex;flex-wrap:wrap;max-width:125px;gap:var(--spacing-sm)}._indicator_okw4o_43{width:10px;height:10px;border-radius:50%;background-color:#e0e0e0;border:none;cursor:pointer;transition:background-color .3s}._indicator_okw4o_43._active_okw4o_60{background-color:var(--color-primary)}._buttons_okw4o_64{display:flex;gap:var(--spacing-md)}._prev_okw4o_69._disabled_okw4o_69,._next_okw4o_70._disabled_okw4o_69{opacity:.5;pointer-events:none}._buttons_okw4o_64 button:not(._disabled_okw4o_69):hover{background-color:var(--color-primary);color:#fff}._prev_okw4o_69,._next_okw4o_70{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;display:flex;justify-content:center;align-items:center}
31
+ ._carousel_pk3a7_1{width:100%}@media (max-width: 767px){._carousel_pk3a7_1{padding:0 3rem}}._trackContainer_pk3a7_9{overflow:hidden;width:100%}@media (max-width: 767px){._trackContainer_pk3a7_9{overflow:visible}}._track_pk3a7_9{display:flex;transition:transform .3s ease;will-change:transform}._page_pk3a7_24{display:flex;gap:var(--spacing-md);padding:0 var(--spacing-sm)}._controls_pk3a7_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_pk3a7_30{width:var(--card-width);margin-left:auto;margin-right:auto}}._indicators_pk3a7_47{display:flex;flex-wrap:wrap;max-width:125px;gap:var(--spacing-sm)}._indicator_pk3a7_47{width:10px;height:10px;border-radius:50%;background-color:#e0e0e0;border:none;cursor:pointer;transition:background-color .3s}._indicator_pk3a7_47._active_pk3a7_64{background-color:var(--color-primary)}._buttons_pk3a7_68{display:flex;gap:var(--spacing-md)}._prev_pk3a7_73._disabled_pk3a7_73,._next_pk3a7_74._disabled_pk3a7_73{opacity:.5;pointer-events:none}._buttons_pk3a7_68 button:not(._disabled_pk3a7_73):hover{background-color:var(--color-primary);color:#fff}._prev_pk3a7_73,._next_pk3a7_74{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;display:flex;justify-content:center;align-items:center}
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.45",
4
+ "version": "0.0.47",
5
5
  "type": "module",
6
6
  "exports": {
7
7
  ".": {