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