quirk-ui 0.0.101 → 0.0.103

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/index33.css +1 -1
  2. package/dist/components/Tabs/index.js +39 -41
  3. package/dist/styles.css +1 -1
  4. package/package.json +1 -1
package/dist/assets/index33.css CHANGED
@@ -1 +1 @@
1
- ._tabs_16efz_1{display:flex;flex-direction:column;width:100%}._tabsList_16efz_7{display:flex;border-bottom:2px solid var(--color-border)}._left_16efz_12{justify-content:flex-start}._center_16efz_16{justify-content:center}._right_16efz_20{justify-content:flex-end}._tabsTrigger_16efz_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_16efz_24._active_16efz_38{border-color:var(--color-primary);color:var(--color-primary)}._tabsPanelWrapper_16efz_43{position:relative;overflow:hidden;height:auto;transition:height .3s ease-in-out}._tabsPanel_16efz_43{animation:_fadeSlide_16efz_1 .3s ease both;position:relative;width:100%;padding:var(--spacing-md);color:var(--color-text-primary)}@keyframes _fadeSlide_16efz_1{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
1
+ ._tabs_1wmov_1{display:flex;flex-direction:column;width:100%}._tabsList_1wmov_7{display:flex;width:100%;border-bottom:2px solid var(--color-border)}._left_1wmov_13{justify-content:flex-start}._center_1wmov_17{justify-content:center}._right_1wmov_21{justify-content:flex-end}._tabsTrigger_1wmov_25{flex:1;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_1wmov_25._active_1wmov_40{border-color:var(--color-primary);color:var(--color-primary)}._tabsPanelWrapper_1wmov_45{position:relative;overflow:hidden;height:auto;transition:height .3s ease-in-out}._tabsPanel_1wmov_45{animation:_fadeSlide_1wmov_1 .3s ease both;position:relative;width:100%;padding:var(--spacing-xl);color:var(--color-text-primary)}@keyframes _fadeSlide_1wmov_1{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
package/dist/components/Tabs/index.js CHANGED
@@ -1,17 +1,17 @@
1
1
  import { jsx as b, jsxs as h } from "react/jsx-runtime";
2
- import z, { useState as x, useId as L, useRef as _, useMemo as w, useEffect as I } from "react";
3
- import { TabsContext as A, useTabsContext as g } from "./Context.js";
4
- import '../../assets/index33.css';const R = "_tabs_16efz_1", d = "_tabsList_16efz_7", C = "_left_16efz_12", N = "_center_16efz_16", H = "_right_16efz_20", W = "_tabsTrigger_16efz_24", k = "_active_16efz_38", M = "_tabsPanelWrapper_16efz_43", j = "_tabsPanel_16efz_43", n = {
5
- tabs: R,
6
- tabsList: d,
7
- left: C,
2
+ import T, { useState as x, useId as L, useRef as u, useMemo as I, useEffect as d } from "react";
3
+ import { TabsContext as R, useTabsContext as g } from "./Context.js";
4
+ import '../../assets/index33.css';const A = "_tabs_1wmov_1", C = "_tabsList_1wmov_7", H = "_left_1wmov_13", N = "_center_1wmov_17", W = "_right_1wmov_21", k = "_tabsTrigger_1wmov_25", M = "_active_1wmov_40", j = "_tabsPanelWrapper_1wmov_45", D = "_tabsPanel_1wmov_45", n = {
5
+ tabs: A,
6
+ tabsList: C,
7
+ left: H,
8
8
  center: N,
9
- right: H,
10
- tabsTrigger: W,
11
- active: k,
12
- tabsPanelWrapper: M,
13
- tabsPanel: j
14
- }, D = {
9
+ right: W,
10
+ tabsTrigger: k,
11
+ active: M,
12
+ tabsPanelWrapper: j,
13
+ tabsPanel: D
14
+ }, E = {
15
15
  left: n.left,
16
16
  center: n.center,
17
17
  right: n.right
@@ -21,49 +21,47 @@ function v({
21
21
  defaultIndex: e = 0,
22
22
  align: a = "left"
23
23
  }) {
24
- const [s, f] = x(e), o = L(), p = [], u = [], c = _(null), i = _([]), T = w(
25
- () => ({ activeIndex: s, setActiveIndex: f, idPrefix: o, align: a, panelRefs: i }),
24
+ const [s, l] = x(e), o = L(), p = [], _ = [], f = u(null), i = u([]), y = I(
25
+ () => ({ activeIndex: s, setActiveIndex: l, idPrefix: o, align: a, panelRefs: i }),
26
26
  [s, o, a]
27
27
  );
28
- return z.Children.forEach(r, (t) => {
29
- var l;
30
- (t == null ? void 0 : t.type) === $ ? p.push(t) : ((t == null ? void 0 : t.type) === y || ((l = t == null ? void 0 : t.type) == null ? void 0 : l.name) === "Panel") && u.push(t);
31
- }), I(() => {
32
- const t = c.current, l = i.current[s];
33
- if (t && l) {
34
- const P = t.offsetHeight, m = l.offsetHeight;
35
- P !== m && (t.style.height = `${P}px`, requestAnimationFrame(() => {
36
- t.style.height = `${m}px`;
37
- }));
28
+ return T.Children.forEach(r, (t) => {
29
+ var c;
30
+ (t == null ? void 0 : t.type) === w ? p.push(t) : ((t == null ? void 0 : t.type) === $ || ((c = t == null ? void 0 : t.type) == null ? void 0 : c.name) === "Panel") && _.push(t);
31
+ }), d(() => {
32
+ const t = f.current, c = i.current[s];
33
+ if (console.log({ wrapper: t, currentPanel: c, activeIndex: s }), t && c) {
34
+ const m = t.offsetHeight, P = c.offsetHeight;
35
+ m !== P && (t.style.height = `${m}px`, t.offsetHeight, t.style.height = `${P}px`);
38
36
  }
39
- }, [s]), /* @__PURE__ */ b(A.Provider, { value: T, children: /* @__PURE__ */ h("div", { className: n.tabs, children: [
37
+ }, [s]), /* @__PURE__ */ b(R.Provider, { value: y, children: /* @__PURE__ */ h("div", { className: n.tabs, children: [
40
38
  p,
41
- /* @__PURE__ */ b("div", { ref: c, className: n.tabsPanelWrapper, children: u })
39
+ /* @__PURE__ */ b("div", { ref: f, className: n.tabsPanelWrapper, children: _ })
42
40
  ] }) });
43
41
  }
44
- function $({ children: r }) {
42
+ function w({ children: r }) {
45
43
  const { align: e } = g();
46
44
  return /* @__PURE__ */ b(
47
45
  "div",
48
46
  {
49
- className: `${n.tabsList} ${D[e]}`,
47
+ className: `${n.tabsList} ${E[e]}`,
50
48
  role: "tablist",
51
49
  "aria-label": "Tabs",
52
50
  children: r
53
51
  }
54
52
  );
55
53
  }
56
- function E({ children: r, index: e }) {
57
- const { activeIndex: a, setActiveIndex: s, idPrefix: f } = g(), o = _(null), p = (c) => {
58
- c.key === "ArrowRight" ? s((i) => i + 1) : c.key === "ArrowLeft" && s((i) => Math.max(0, i - 1));
59
- }, u = a === e;
54
+ function K({ children: r, index: e }) {
55
+ const { activeIndex: a, setActiveIndex: s, idPrefix: l } = g(), o = u(null), p = (f) => {
56
+ f.key === "ArrowRight" ? s((i) => i + 1) : f.key === "ArrowLeft" && s((i) => Math.max(0, i - 1));
57
+ }, _ = a === e;
60
58
  return /* @__PURE__ */ b(
61
59
  "button",
62
60
  {
63
- className: `${n.tabsTrigger} ${u ? n.active : ""}`,
61
+ className: `${n.tabsTrigger} ${_ ? n.active : ""}`,
64
62
  role: "tab",
65
63
  ref: o,
66
- id: `${f}-tab-${e}`,
64
+ id: `${l}-tab-${e}`,
67
65
  "aria-selected": a === e,
68
66
  tabIndex: a === e ? 0 : -1,
69
67
  onClick: () => s(e),
@@ -72,13 +70,13 @@ function E({ children: r, index: e }) {
72
70
  }
73
71
  );
74
72
  }
75
- function y({ children: r, index: e }) {
76
- const { activeIndex: a, idPrefix: s, panelRefs: f } = g();
73
+ function $({ children: r, index: e }) {
74
+ const { activeIndex: a, idPrefix: s, panelRefs: l } = g();
77
75
  return e !== a ? null : /* @__PURE__ */ b(
78
76
  "div",
79
77
  {
80
78
  ref: (o) => {
81
- f.current[e] = o;
79
+ l.current[e] = o;
82
80
  },
83
81
  className: n.tabsPanel,
84
82
  role: "tabpanel",
@@ -90,11 +88,11 @@ function y({ children: r, index: e }) {
90
88
  }
91
89
  );
92
90
  }
93
- v.List = $;
94
- v.Trigger = E;
95
- v.Panel = y;
91
+ v.List = w;
92
+ v.Trigger = K;
93
+ v.Panel = $;
96
94
  export {
97
95
  v as Tabs,
98
- D as alignClassMap,
96
+ E as alignClassMap,
99
97
  v as default
100
98
  };
package/dist/styles.css CHANGED
@@ -30,7 +30,7 @@ ul._list_4w9h5_1{list-style-type:none;padding:0;margin:0}ol._list_4w9h5_1{list-s
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
31
  ._carousel_1e9ij_1{width:100%}@media (max-width: 767px){._carousel_1e9ij_1{padding:0 var(--spacing-lg)}}._noPointerEvents_1e9ij_9 *{pointer-events:none!important}._trackContainer_1e9ij_13{overflow:hidden;width:100%}@media (max-width: 767px){._trackContainer_1e9ij_13{overflow:visible}}._track_1e9ij_13{display:flex;transition:transform .3s ease;will-change:transform}._page_1e9ij_28{display:flex;gap:var(--spacing-md);padding:0 var(--spacing-sm)}._controls_1e9ij_34{display:flex;justify-content:space-between;align-items:center;margin-top:var(--spacing-md);margin-left:auto;margin-right:auto;padding:0 var(--spacing-md);width:100%}._indicators_1e9ij_45{display:flex;flex-wrap:wrap;max-width:125px;gap:var(--spacing-xs)}._indicator_1e9ij_45{width:10px;height:10px;border-radius:50%;background-color:#e0e0e0;border:1px solid #fff;cursor:pointer;transition:background-color .3s}._indicator_1e9ij_45._active_1e9ij_62{background-color:var(--color-primary)}._buttons_1e9ij_66{display:flex;gap:var(--spacing-md)}._prev_1e9ij_71._disabled_1e9ij_71,._next_1e9ij_72._disabled_1e9ij_71{opacity:.5;pointer-events:none}._buttons_1e9ij_66 button:not(._disabled_1e9ij_71):hover{background-color:var(--color-primary);color:#fff}._prev_1e9ij_71,._next_1e9ij_72{background-color:#e0e0e0;color:var(--color-text-primary);border:1px solid #fff;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
- ._tabs_16efz_1{display:flex;flex-direction:column;width:100%}._tabsList_16efz_7{display:flex;border-bottom:2px solid var(--color-border)}._left_16efz_12{justify-content:flex-start}._center_16efz_16{justify-content:center}._right_16efz_20{justify-content:flex-end}._tabsTrigger_16efz_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_16efz_24._active_16efz_38{border-color:var(--color-primary);color:var(--color-primary)}._tabsPanelWrapper_16efz_43{position:relative;overflow:hidden;height:auto;transition:height .3s ease-in-out}._tabsPanel_16efz_43{animation:_fadeSlide_16efz_1 .3s ease both;position:relative;width:100%;padding:var(--spacing-md);color:var(--color-text-primary)}@keyframes _fadeSlide_16efz_1{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
33
+ ._tabs_1wmov_1{display:flex;flex-direction:column;width:100%}._tabsList_1wmov_7{display:flex;width:100%;border-bottom:2px solid var(--color-border)}._left_1wmov_13{justify-content:flex-start}._center_1wmov_17{justify-content:center}._right_1wmov_21{justify-content:flex-end}._tabsTrigger_1wmov_25{flex:1;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_1wmov_25._active_1wmov_40{border-color:var(--color-primary);color:var(--color-primary)}._tabsPanelWrapper_1wmov_45{position:relative;overflow:hidden;height:auto;transition:height .3s ease-in-out}._tabsPanel_1wmov_45{animation:_fadeSlide_1wmov_1 .3s ease both;position:relative;width:100%;padding:var(--spacing-xl);color:var(--color-text-primary)}@keyframes _fadeSlide_1wmov_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)}
35
35
  ._footer_gfid4_1{background-color:var(--color-background);padding:var(--spacing-xl) var(--spacing-md);font-size:var(--font-size-sm);color:var(--color-text-primary)}._container_gfid4_8{display:flex;flex-direction:column;gap:var(--spacing-xl)}._logo_gfid4_16{font-size:var(--font-size-lg);font-weight:var(--font-weight-bold);color:var(--color-primary)}._groups_gfid4_22{display:flex;flex-wrap:wrap;gap:var(--spacing-xl)}._group_gfid4_22{min-width:140px}._groupTitle_gfid4_32{font-weight:var(--font-weight-semibold);margin-bottom:var(--spacing-xs)}._sublinks_gfid4_37{position:relative}._linkList_gfid4_41{display:flex;flex-direction:column;gap:var(--spacing-xs);list-style:none;padding:0;margin:0}._link_gfid4_41{color:var(--color-text-primary);text-decoration:none;display:block}._link_gfid4_41:hover{color:var(--color-primary)}._bottom_gfid4_60{margin-top:var(--spacing-xl);text-align:right;font-size:var(--font-size-sm);color:var(--color-muted)}
36
36
  ._form_s0yvj_1{display:flex;flex-direction:column;gap:var(--spacing-md)}
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "quirk-ui",
3
3
  "private": false,
4
- "version": "0.0.101",
4
+ "version": "0.0.103",
5
5
  "type": "module",
6
6
  "exports": {
7
7
  ".": {