quirk-ui 0.0.133 → 0.0.134

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.
@@ -1 +1 @@
1
- ._tabs_6qx4l_1{display:flex;flex-direction:column;width:100%}._tabsList_6qx4l_7{display:flex;width:100%;background-color:var(--color-tab-background);border-radius:calc(var(--radius-md) + 5px);position:relative;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none}._tabsList_6qx4l_7::-webkit-scrollbar{display:none}._horizontal_6qx4l_24{flex-direction:column}._vertical_6qx4l_28{flex-direction:row;align-items:flex-start;gap:3rem}._vertical_6qx4l_28 ._tabsList_6qx4l_7{flex-direction:column;overflow-x:visible;flex:.25 0 150px}._vertical_6qx4l_28 ._tabsTrigger_6qx4l_39{white-space:normal;text-align:left}._vertical_6qx4l_28 ._tabsPanelWrapper_6qx4l_44{flex:1;width:100%}._left_6qx4l_51{justify-content:flex-start}._center_6qx4l_55{justify-content:center}._right_6qx4l_59{justify-content:flex-end}._indicator_6qx4l_63{position:absolute;left:0;top:0;border-radius:var(--radius-md);transition:transform .3s ease-in-out,width .3s ease-in-out;z-index:0;border:5px solid var(--color-tab-background)}._indicator_6qx4l_63:after{content:"";border-radius:var(--radius-md);background-color:var(--color-primary);display:block;position:absolute;width:100%;height:100%}._tabsTrigger_6qx4l_39{padding:var(--spacing-md);border:none;background:none;cursor:pointer;color:var(--color-muted);font-weight:var(--font-weight-semibold);font-size:var(--font-size-md);transition:color .3s ease;position:relative;z-index:1;white-space:nowrap;text-align:center;width:100%}._tabsTrigger_6qx4l_39._active_6qx4l_110{color:#fff}@media (max-width: 767px){._tabsList_6qx4l_7{flex-direction:column;overflow-x:visible}._tabsTrigger_6qx4l_39{white-space:normal;text-align:left}}._tabsPanelWrapper_6qx4l_44{position:relative;overflow:hidden;height:auto;transition:height .3s ease-in-out}._tabsPanel_6qx4l_44{animation:_fadeSlide_6qx4l_1 .3s ease both;position:relative;width:100%;color:var(--color-text-primary)}@keyframes _fadeSlide_6qx4l_1{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}._default_6qx4l_154,._dark_6qx4l_155{background-color:var(--color-tab-background)}._default_6qx4l_154 ._indicator_6qx4l_63,._dark_6qx4l_155 ._indicator_6qx4l_63{border:5px solid transparent}._default_6qx4l_154 ._tabsTrigger_6qx4l_39,._dark_6qx4l_155 ._tabsTrigger_6qx4l_39{color:var(--color-muted)}._light_6qx4l_167{background-color:#fff}._light_6qx4l_167 ._indicator_6qx4l_63{border:5px solid transparent}._light_6qx4l_167 ._tabsList_6qx4l_7{background-color:#fff}._light_6qx4l_167 ._tabsTrigger_6qx4l_39{color:var(--color-text-primary)}._light_6qx4l_167 ._tabsTrigger_6qx4l_39:hover{color:var(--color-primary)}._light_6qx4l_167 ._tabsTrigger_6qx4l_39._active_6qx4l_110{color:#fff}._transparent_6qx4l_191{background-color:transparent}._transparent_6qx4l_191 ._indicator_6qx4l_63{border:5px solid transparent}._transparent_6qx4l_191 ._tabsList_6qx4l_7{background-color:transparent}._transparent_6qx4l_191 ._tabsTrigger_6qx4l_39{color:var(--color-text-primary)}._transparent_6qx4l_191 ._tabsTrigger_6qx4l_39:hover{color:var(--color-primary)}._transparent_6qx4l_191 ._tabsTrigger_6qx4l_39._active_6qx4l_110{color:#fff}
1
+ ._tabs_k4ojr_1{display:flex;flex-direction:column;width:100%}._tabsList_k4ojr_7{display:flex;width:100%;background-color:var(--color-tab-background);border-radius:calc(var(--radius-md) + 5px);position:relative;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none}._tabsList_k4ojr_7::-webkit-scrollbar{display:none}._horizontal_k4ojr_24{flex-direction:column}._horizontal_k4ojr_24 ._tabsPanel_k4ojr_26{padding:var(--spacing-lg) var(--spacing-md)}._vertical_k4ojr_31{flex-direction:row;align-items:flex-start;gap:3rem}._vertical_k4ojr_31 ._tabsList_k4ojr_7{flex-direction:column;overflow-x:visible;flex:.25 0 150px}._vertical_k4ojr_31 ._tabsTrigger_k4ojr_42{white-space:normal;text-align:left}._vertical_k4ojr_31 ._tabsPanelWrapper_k4ojr_47{flex:1;width:100%}._left_k4ojr_54{justify-content:flex-start}._center_k4ojr_58{justify-content:center}._right_k4ojr_62{justify-content:flex-end}._indicator_k4ojr_66{position:absolute;left:0;top:0;border-radius:var(--radius-md);transition:transform .3s ease-in-out,width .3s ease-in-out;z-index:0;border:5px solid var(--color-tab-background)}._indicator_k4ojr_66:after{content:"";border-radius:var(--radius-md);background-color:var(--color-primary);display:block;position:absolute;width:100%;height:100%}._tabsTrigger_k4ojr_42{padding:var(--spacing-md);border:none;background:none;cursor:pointer;color:var(--color-muted);font-weight:var(--font-weight-semibold);font-size:var(--font-size-md);transition:color .3s ease;position:relative;z-index:1;white-space:nowrap;text-align:center;width:100%}._tabsTrigger_k4ojr_42._active_k4ojr_113{color:#fff}@media (max-width: 767px){._tabsList_k4ojr_7{flex-direction:column;overflow-x:visible}._tabsTrigger_k4ojr_42{white-space:normal;text-align:left}}._tabsPanelWrapper_k4ojr_47{position:relative;overflow:hidden;height:auto;transition:height .3s ease-in-out}._tabsPanel_k4ojr_26{animation:_fadeSlide_k4ojr_1 .3s ease both;position:relative;width:100%;color:var(--color-text-primary)}@keyframes _fadeSlide_k4ojr_1{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}._default_k4ojr_157{background-color:transparent}._dark_k4ojr_161{background-color:var(--color-tab-background)}._dark_k4ojr_161 ._indicator_k4ojr_66{border:5px solid transparent}._dark_k4ojr_161 ._tabsTrigger_k4ojr_42{color:var(--color-muted)}._light_k4ojr_173{background-color:#fff}._light_k4ojr_173 ._indicator_k4ojr_66{border:5px solid transparent}._light_k4ojr_173 ._tabsList_k4ojr_7{background-color:#fff}._light_k4ojr_173 ._tabsTrigger_k4ojr_42{color:var(--color-text-primary)}._light_k4ojr_173 ._tabsTrigger_k4ojr_42:hover{color:var(--color-primary)}._light_k4ojr_173 ._tabsTrigger_k4ojr_42._active_k4ojr_113{color:#fff}._transparent_k4ojr_197{background-color:transparent}._transparent_k4ojr_197 ._indicator_k4ojr_66{border:5px solid transparent}._transparent_k4ojr_197 ._tabsList_k4ojr_7{background-color:transparent}._transparent_k4ojr_197 ._tabsTrigger_k4ojr_42{color:var(--color-text-primary)}._transparent_k4ojr_197 ._tabsTrigger_k4ojr_42:hover{color:var(--color-primary)}._transparent_k4ojr_197 ._tabsTrigger_k4ojr_42._active_k4ojr_113{color:#fff}
@@ -1,112 +1,112 @@
1
- import { jsx as b, jsxs as k } from "react/jsx-runtime";
2
- import M, { useState as C, useId as N, useRef as w, useMemo as W, useCallback as H, useLayoutEffect as I, useEffect as S } from "react";
3
- import { TabsContext as j, useTabsContext as x } from "./Context.js";
4
- import '../../assets/index33.css';const B = "_tabs_6qx4l_1", D = "_tabsList_6qx4l_7", K = "_horizontal_6qx4l_24", O = "_vertical_6qx4l_28", X = "_tabsTrigger_6qx4l_39", Y = "_tabsPanelWrapper_6qx4l_44", F = "_indicator_6qx4l_63", G = "_active_6qx4l_110", J = "_tabsPanel_6qx4l_44", Q = "_dark_6qx4l_155", U = "_light_6qx4l_167", V = "_transparent_6qx4l_191", n = {
5
- tabs: B,
6
- tabsList: D,
7
- horizontal: K,
8
- vertical: O,
9
- tabsTrigger: X,
10
- tabsPanelWrapper: Y,
11
- indicator: F,
12
- active: G,
13
- tabsPanel: J,
14
- default: "_default_6qx4l_154",
1
+ import { jsx as b, jsxs as I } from "react/jsx-runtime";
2
+ import M, { useState as x, useId as N, useRef as w, useMemo as W, useCallback as H, useLayoutEffect as C, useEffect as S } from "react";
3
+ import { TabsContext as B, useTabsContext as k } from "./Context.js";
4
+ import '../../assets/index33.css';const D = "_tabs_k4ojr_1", K = "_tabsList_k4ojr_7", O = "_horizontal_k4ojr_24", X = "_tabsPanel_k4ojr_26", Y = "_vertical_k4ojr_31", q = "_tabsTrigger_k4ojr_42", F = "_tabsPanelWrapper_k4ojr_47", G = "_indicator_k4ojr_66", J = "_active_k4ojr_113", Q = "_dark_k4ojr_161", U = "_light_k4ojr_173", V = "_transparent_k4ojr_197", r = {
5
+ tabs: D,
6
+ tabsList: K,
7
+ horizontal: O,
8
+ tabsPanel: X,
9
+ vertical: Y,
10
+ tabsTrigger: q,
11
+ tabsPanelWrapper: F,
12
+ indicator: G,
13
+ active: J,
14
+ default: "_default_k4ojr_157",
15
15
  dark: Q,
16
16
  light: U,
17
17
  transparent: V
18
18
  }, Z = {
19
- horizontal: n.horizontal,
20
- vertical: n.vertical
19
+ horizontal: r.horizontal,
20
+ vertical: r.vertical
21
21
  }, tt = {
22
- default: n.default,
23
- light: n.light,
24
- dark: n.dark,
25
- transparent: n.transparent
22
+ default: r.default,
23
+ light: r.light,
24
+ dark: r.dark,
25
+ transparent: r.transparent
26
26
  };
27
27
  function m({
28
28
  children: c,
29
29
  defaultIndex: e = 0,
30
- orientation: a = "horizontal",
31
- theme: s = "default"
30
+ orientation: n = "horizontal",
31
+ theme: a = "default"
32
32
  }) {
33
- const [r, d] = C(e), [u, _] = C({
33
+ const [s, d] = x(e), [u, _] = x({
34
34
  width: 0,
35
35
  left: 0,
36
36
  top: 0,
37
37
  height: 0
38
- }), l = typeof window < "u", p = l ? I : S, y = N(), P = [], $ = [], q = w(null), L = w([]), R = w([]), A = W(
38
+ }), l = typeof window < "u", p = l ? C : S, y = N(), P = [], j = [], $ = w(null), L = w([]), R = w([]), A = W(
39
39
  () => ({
40
- activeIndex: r,
40
+ activeIndex: s,
41
41
  setActiveIndex: d,
42
42
  idPrefix: y,
43
- orientation: a,
44
- theme: s,
43
+ orientation: n,
44
+ theme: a,
45
45
  panelRefs: L,
46
46
  triggerRefs: R,
47
47
  indicatorStyle: u
48
48
  }),
49
- [r, y, a, s, u]
49
+ [s, y, n, a, u]
50
50
  );
51
51
  M.Children.forEach(c, (t) => {
52
- var i;
53
- (t == null ? void 0 : t.type) === z ? P.push(t) : ((t == null ? void 0 : t.type) === E || ((i = t == null ? void 0 : t.type) == null ? void 0 : i.name) === "Panel") && $.push(t);
52
+ var o;
53
+ (t == null ? void 0 : t.type) === z ? P.push(t) : ((t == null ? void 0 : t.type) === E || ((o = t == null ? void 0 : t.type) == null ? void 0 : o.name) === "Panel") && j.push(t);
54
54
  });
55
55
  const g = H(() => {
56
- var i;
57
- const t = R.current[r];
56
+ var o;
57
+ const t = R.current[s];
58
58
  if (t) {
59
- const f = t.getBoundingClientRect(), o = (i = t.parentElement) == null ? void 0 : i.getBoundingClientRect();
60
- if (!o) return;
61
- if (window.innerWidth < 768 || a === "vertical") {
62
- const h = f.top - o.top, v = f.height;
63
- _({ top: h, height: v, left: 0, width: o.width });
59
+ const f = t.getBoundingClientRect(), i = (o = t.parentElement) == null ? void 0 : o.getBoundingClientRect();
60
+ if (!i) return;
61
+ if (window.innerWidth < 768 || n === "vertical") {
62
+ const h = f.top - i.top, v = f.height;
63
+ _({ top: h, height: v, left: 0, width: i.width });
64
64
  } else {
65
- const h = f.left - o.left, v = f.width;
65
+ const h = f.left - i.left, v = f.width;
66
66
  _({
67
67
  left: h,
68
68
  width: v,
69
69
  top: 0,
70
- height: o.height
70
+ height: i.height
71
71
  });
72
72
  }
73
73
  }
74
- }, [r, a]);
74
+ }, [s, n]);
75
75
  return p(() => {
76
76
  if (!(typeof window > "u") && l)
77
77
  return g(), window.addEventListener("resize", g), () => {
78
78
  window.removeEventListener("resize", g);
79
79
  };
80
- }, [g]), I(() => {
81
- const t = q.current, i = L.current[r];
82
- if (!t || !i) return;
80
+ }, [g]), C(() => {
81
+ const t = $.current, o = L.current[s];
82
+ if (!t || !o) return;
83
83
  const f = () => {
84
- const T = i.offsetHeight;
84
+ const T = o.offsetHeight;
85
85
  t.offsetHeight, t.style.height = `${T}px`;
86
86
  };
87
87
  f();
88
- const o = new ResizeObserver(f);
89
- return o.observe(i), () => {
90
- o.disconnect();
88
+ const i = new ResizeObserver(f);
89
+ return i.observe(o), () => {
90
+ i.disconnect();
91
91
  };
92
- }, [r]), /* @__PURE__ */ b(j.Provider, { value: A, children: /* @__PURE__ */ k(
92
+ }, [s]), /* @__PURE__ */ b(B.Provider, { value: A, children: /* @__PURE__ */ I(
93
93
  "div",
94
94
  {
95
- className: `${n.tabs} ${Z[a]} ${tt[s]}`,
95
+ className: `${r.tabs} ${Z[n]} ${tt[a]}`,
96
96
  children: [
97
97
  P,
98
- /* @__PURE__ */ b("div", { ref: q, className: n.tabsPanelWrapper, children: $ })
98
+ /* @__PURE__ */ b("div", { ref: $, className: r.tabsPanelWrapper, children: j })
99
99
  ]
100
100
  }
101
101
  ) });
102
102
  }
103
103
  function z({ children: c }) {
104
- const { indicatorStyle: e } = x();
105
- return /* @__PURE__ */ k("div", { className: `${n.tabsList}`, role: "tablist", "aria-label": "Tabs", children: [
104
+ const { indicatorStyle: e } = k();
105
+ return /* @__PURE__ */ I("div", { className: `${r.tabsList}`, role: "tablist", "aria-label": "Tabs", children: [
106
106
  /* @__PURE__ */ b(
107
107
  "div",
108
108
  {
109
- className: n.indicator,
109
+ className: r.indicator,
110
110
  style: {
111
111
  width: e.width,
112
112
  height: e.height,
@@ -118,38 +118,38 @@ function z({ children: c }) {
118
118
  ] });
119
119
  }
120
120
  function et({ children: c, index: e }) {
121
- const { activeIndex: a, setActiveIndex: s, idPrefix: r, triggerRefs: d } = x(), u = (l) => {
122
- l.key === "ArrowRight" ? s((p) => p + 1) : l.key === "ArrowLeft" && s((p) => Math.max(0, p - 1));
123
- }, _ = a === e;
121
+ const { activeIndex: n, setActiveIndex: a, idPrefix: s, triggerRefs: d } = k(), u = (l) => {
122
+ l.key === "ArrowRight" ? a((p) => p + 1) : l.key === "ArrowLeft" && a((p) => Math.max(0, p - 1));
123
+ }, _ = n === e;
124
124
  return /* @__PURE__ */ b(
125
125
  "button",
126
126
  {
127
- className: `${n.tabsTrigger} ${_ ? n.active : ""}`,
127
+ className: `${r.tabsTrigger} ${_ ? r.active : ""}`,
128
128
  role: "tab",
129
129
  ref: (l) => {
130
130
  d.current[e] = l;
131
131
  },
132
- id: `${r}-tab-${e}`,
133
- "aria-selected": a === e,
134
- tabIndex: a === e ? 0 : -1,
135
- onClick: () => s(e),
132
+ id: `${s}-tab-${e}`,
133
+ "aria-selected": n === e,
134
+ tabIndex: n === e ? 0 : -1,
135
+ onClick: () => a(e),
136
136
  onKeyDown: u,
137
137
  children: c
138
138
  }
139
139
  );
140
140
  }
141
141
  function E({ children: c, index: e }) {
142
- const { activeIndex: a, idPrefix: s, panelRefs: r } = x(), d = e === a;
142
+ const { activeIndex: n, idPrefix: a, panelRefs: s } = k(), d = e === n;
143
143
  return /* @__PURE__ */ b(
144
144
  "div",
145
145
  {
146
146
  ref: (u) => {
147
- r.current[e] = u;
147
+ s.current[e] = u;
148
148
  },
149
- className: n.tabsPanel,
149
+ className: r.tabsPanel,
150
150
  role: "tabpanel",
151
- id: `${s}-panel-${e}`,
152
- "aria-labelledby": `${s}-tab-${e}`,
151
+ id: `${a}-panel-${e}`,
152
+ "aria-labelledby": `${a}-tab-${e}`,
153
153
  "aria-hidden": !d,
154
154
  hidden: !d,
155
155
  children: c
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_6qx4l_1{display:flex;flex-direction:column;width:100%}._tabsList_6qx4l_7{display:flex;width:100%;background-color:var(--color-tab-background);border-radius:calc(var(--radius-md) + 5px);position:relative;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none}._tabsList_6qx4l_7::-webkit-scrollbar{display:none}._horizontal_6qx4l_24{flex-direction:column}._vertical_6qx4l_28{flex-direction:row;align-items:flex-start;gap:3rem}._vertical_6qx4l_28 ._tabsList_6qx4l_7{flex-direction:column;overflow-x:visible;flex:.25 0 150px}._vertical_6qx4l_28 ._tabsTrigger_6qx4l_39{white-space:normal;text-align:left}._vertical_6qx4l_28 ._tabsPanelWrapper_6qx4l_44{flex:1;width:100%}._left_6qx4l_51{justify-content:flex-start}._center_6qx4l_55{justify-content:center}._right_6qx4l_59{justify-content:flex-end}._indicator_6qx4l_63{position:absolute;left:0;top:0;border-radius:var(--radius-md);transition:transform .3s ease-in-out,width .3s ease-in-out;z-index:0;border:5px solid var(--color-tab-background)}._indicator_6qx4l_63:after{content:"";border-radius:var(--radius-md);background-color:var(--color-primary);display:block;position:absolute;width:100%;height:100%}._tabsTrigger_6qx4l_39{padding:var(--spacing-md);border:none;background:none;cursor:pointer;color:var(--color-muted);font-weight:var(--font-weight-semibold);font-size:var(--font-size-md);transition:color .3s ease;position:relative;z-index:1;white-space:nowrap;text-align:center;width:100%}._tabsTrigger_6qx4l_39._active_6qx4l_110{color:#fff}@media (max-width: 767px){._tabsList_6qx4l_7{flex-direction:column;overflow-x:visible}._tabsTrigger_6qx4l_39{white-space:normal;text-align:left}}._tabsPanelWrapper_6qx4l_44{position:relative;overflow:hidden;height:auto;transition:height .3s ease-in-out}._tabsPanel_6qx4l_44{animation:_fadeSlide_6qx4l_1 .3s ease both;position:relative;width:100%;color:var(--color-text-primary)}@keyframes _fadeSlide_6qx4l_1{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}._default_6qx4l_154,._dark_6qx4l_155{background-color:var(--color-tab-background)}._default_6qx4l_154 ._indicator_6qx4l_63,._dark_6qx4l_155 ._indicator_6qx4l_63{border:5px solid transparent}._default_6qx4l_154 ._tabsTrigger_6qx4l_39,._dark_6qx4l_155 ._tabsTrigger_6qx4l_39{color:var(--color-muted)}._light_6qx4l_167{background-color:#fff}._light_6qx4l_167 ._indicator_6qx4l_63{border:5px solid transparent}._light_6qx4l_167 ._tabsList_6qx4l_7{background-color:#fff}._light_6qx4l_167 ._tabsTrigger_6qx4l_39{color:var(--color-text-primary)}._light_6qx4l_167 ._tabsTrigger_6qx4l_39:hover{color:var(--color-primary)}._light_6qx4l_167 ._tabsTrigger_6qx4l_39._active_6qx4l_110{color:#fff}._transparent_6qx4l_191{background-color:transparent}._transparent_6qx4l_191 ._indicator_6qx4l_63{border:5px solid transparent}._transparent_6qx4l_191 ._tabsList_6qx4l_7{background-color:transparent}._transparent_6qx4l_191 ._tabsTrigger_6qx4l_39{color:var(--color-text-primary)}._transparent_6qx4l_191 ._tabsTrigger_6qx4l_39:hover{color:var(--color-primary)}._transparent_6qx4l_191 ._tabsTrigger_6qx4l_39._active_6qx4l_110{color:#fff}
33
+ ._tabs_k4ojr_1{display:flex;flex-direction:column;width:100%}._tabsList_k4ojr_7{display:flex;width:100%;background-color:var(--color-tab-background);border-radius:calc(var(--radius-md) + 5px);position:relative;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none}._tabsList_k4ojr_7::-webkit-scrollbar{display:none}._horizontal_k4ojr_24{flex-direction:column}._horizontal_k4ojr_24 ._tabsPanel_k4ojr_26{padding:var(--spacing-lg) var(--spacing-md)}._vertical_k4ojr_31{flex-direction:row;align-items:flex-start;gap:3rem}._vertical_k4ojr_31 ._tabsList_k4ojr_7{flex-direction:column;overflow-x:visible;flex:.25 0 150px}._vertical_k4ojr_31 ._tabsTrigger_k4ojr_42{white-space:normal;text-align:left}._vertical_k4ojr_31 ._tabsPanelWrapper_k4ojr_47{flex:1;width:100%}._left_k4ojr_54{justify-content:flex-start}._center_k4ojr_58{justify-content:center}._right_k4ojr_62{justify-content:flex-end}._indicator_k4ojr_66{position:absolute;left:0;top:0;border-radius:var(--radius-md);transition:transform .3s ease-in-out,width .3s ease-in-out;z-index:0;border:5px solid var(--color-tab-background)}._indicator_k4ojr_66:after{content:"";border-radius:var(--radius-md);background-color:var(--color-primary);display:block;position:absolute;width:100%;height:100%}._tabsTrigger_k4ojr_42{padding:var(--spacing-md);border:none;background:none;cursor:pointer;color:var(--color-muted);font-weight:var(--font-weight-semibold);font-size:var(--font-size-md);transition:color .3s ease;position:relative;z-index:1;white-space:nowrap;text-align:center;width:100%}._tabsTrigger_k4ojr_42._active_k4ojr_113{color:#fff}@media (max-width: 767px){._tabsList_k4ojr_7{flex-direction:column;overflow-x:visible}._tabsTrigger_k4ojr_42{white-space:normal;text-align:left}}._tabsPanelWrapper_k4ojr_47{position:relative;overflow:hidden;height:auto;transition:height .3s ease-in-out}._tabsPanel_k4ojr_26{animation:_fadeSlide_k4ojr_1 .3s ease both;position:relative;width:100%;color:var(--color-text-primary)}@keyframes _fadeSlide_k4ojr_1{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}._default_k4ojr_157{background-color:transparent}._dark_k4ojr_161{background-color:var(--color-tab-background)}._dark_k4ojr_161 ._indicator_k4ojr_66{border:5px solid transparent}._dark_k4ojr_161 ._tabsTrigger_k4ojr_42{color:var(--color-muted)}._light_k4ojr_173{background-color:#fff}._light_k4ojr_173 ._indicator_k4ojr_66{border:5px solid transparent}._light_k4ojr_173 ._tabsList_k4ojr_7{background-color:#fff}._light_k4ojr_173 ._tabsTrigger_k4ojr_42{color:var(--color-text-primary)}._light_k4ojr_173 ._tabsTrigger_k4ojr_42:hover{color:var(--color-primary)}._light_k4ojr_173 ._tabsTrigger_k4ojr_42._active_k4ojr_113{color:#fff}._transparent_k4ojr_197{background-color:transparent}._transparent_k4ojr_197 ._indicator_k4ojr_66{border:5px solid transparent}._transparent_k4ojr_197 ._tabsList_k4ojr_7{background-color:transparent}._transparent_k4ojr_197 ._tabsTrigger_k4ojr_42{color:var(--color-text-primary)}._transparent_k4ojr_197 ._tabsTrigger_k4ojr_42:hover{color:var(--color-primary)}._transparent_k4ojr_197 ._tabsTrigger_k4ojr_42._active_k4ojr_113{color:#fff}
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.133",
4
+ "version": "0.0.134",
5
5
  "type": "module",
6
6
  "exports": {
7
7
  ".": {