quirk-ui 0.0.128 → 0.0.129

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 (6) hide show
  1. package/dist/assets/index33.css +1 -1
  2. package/dist/components/Tabs/index.js +117 -91
  3. package/dist/lib/components/Tabs/Context.d.ts +2 -1
  4. package/dist/lib/components/Tabs/index.d.ts +15 -1
  5. package/dist/styles.css +1 -1
  6. package/package.json +1 -1
package/dist/assets/index33.css CHANGED
@@ -1 +1 @@
1
- ._tabs_ggq3y_1{display:flex;flex-direction:column;width:100%}._tabsList_ggq3y_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_ggq3y_7::-webkit-scrollbar{display:none}._left_ggq3y_23{justify-content:flex-start}._center_ggq3y_27{justify-content:center}._right_ggq3y_31{justify-content:flex-end}._indicator_ggq3y_35{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_ggq3y_35:after{content:"";border-radius:var(--radius-md);background-color:var(--color-primary);display:block;position:absolute;width:100%;height:100%}._tabsTrigger_ggq3y_57{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_ggq3y_57._active_ggq3y_82{color:#fff}@media (max-width: 767px){._tabsList_ggq3y_7{flex-direction:column;overflow-x:visible}._tabsTrigger_ggq3y_57{white-space:normal;text-align:left}}._tabsPanelWrapper_ggq3y_98{position:relative;overflow:hidden;height:auto;transition:height .3s ease-in-out}._tabsPanel_ggq3y_98{animation:_fadeSlide_ggq3y_1 .3s ease both;position:relative;width:100%;padding:var(--spacing-xl) var(--spacing-sm);color:var(--color-text-primary)}@keyframes _fadeSlide_ggq3y_1{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
1
+ ._tabs_sttik_1{display:flex;flex-direction:column;width:100%}._tabsList_sttik_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_sttik_7::-webkit-scrollbar{display:none}._horizontal_sttik_24{flex-direction:column}._vertical_sttik_28{flex-direction:row;gap:var(--spacing-lg)}._vertical_sttik_28 ._tabsList_sttik_7{flex-direction:column;overflow-x:visible;flex:.4 0 150px}._vertical_sttik_28 ._tabsTrigger_sttik_38{white-space:normal;text-align:left}._vertical_sttik_28 ._tabsPanelWrapper_sttik_43{flex:1;width:100%}._left_sttik_50{justify-content:flex-start}._center_sttik_54{justify-content:center}._right_sttik_58{justify-content:flex-end}._indicator_sttik_62{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_sttik_62:after{content:"";border-radius:var(--radius-md);background-color:var(--color-primary);display:block;position:absolute;width:100%;height:100%}._tabsTrigger_sttik_38{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_sttik_38._active_sttik_109{color:#fff}@media (max-width: 767px){._tabsList_sttik_7{flex-direction:column;overflow-x:visible}._tabsTrigger_sttik_38{white-space:normal;text-align:left}}._tabsPanelWrapper_sttik_43{position:relative;overflow:hidden;height:auto;transition:height .3s ease-in-out}._tabsPanel_sttik_43{animation:_fadeSlide_sttik_1 .3s ease both;position:relative;width:100%;padding:var(--spacing-xl) var(--spacing-sm);color:var(--color-text-primary)}@keyframes _fadeSlide_sttik_1{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}._default_sttik_153,._dark_sttik_154{background-color:var(--color-tab-background)}._default_sttik_153 ._indicator_sttik_62,._dark_sttik_154 ._indicator_sttik_62{border:5px solid transparent}._default_sttik_153 ._tabsTrigger_sttik_38,._dark_sttik_154 ._tabsTrigger_sttik_38{color:var(--color-muted)}._light_sttik_166{background-color:#fff}._light_sttik_166 ._indicator_sttik_62{border:5px solid transparent}._light_sttik_166 ._tabsList_sttik_7{background-color:#fff}._light_sttik_166 ._tabsTrigger_sttik_38{color:var(--color-text-primary)}._light_sttik_166 ._tabsTrigger_sttik_38:hover{color:var(--color-primary)}._light_sttik_166 ._tabsTrigger_sttik_38._active_sttik_109{color:#fff}._transparent_sttik_190{background-color:transparent}._transparent_sttik_190 ._indicator_sttik_62{border:5px solid transparent}._transparent_sttik_190 ._tabsList_sttik_7{background-color:transparent}._transparent_sttik_190 ._tabsTrigger_sttik_38{color:var(--color-text-primary)}._transparent_sttik_190 ._tabsTrigger_sttik_38:hover{color:var(--color-primary)}._transparent_sttik_190 ._tabsTrigger_sttik_38._active_sttik_109{color:#fff}
package/dist/components/Tabs/index.js CHANGED
@@ -1,102 +1,126 @@
1
- import { jsx as d, jsxs as I } from "react/jsx-runtime";
2
- import N, { useState as q, useId as M, useRef as v, useMemo as W, useLayoutEffect as x, useEffect as H } from "react";
3
- import { TabsContext as S, useTabsContext as w } from "./Context.js";
4
- import '../../assets/index33.css';const k = "_tabs_ggq3y_1", z = "_tabsList_ggq3y_7", j = "_left_ggq3y_23", B = "_center_ggq3y_27", D = "_right_ggq3y_31", K = "_indicator_ggq3y_35", O = "_tabsTrigger_ggq3y_57", X = "_active_ggq3y_82", Y = "_tabsPanelWrapper_ggq3y_98", F = "_tabsPanel_ggq3y_98", a = {
5
- tabs: k,
6
- tabsList: z,
7
- left: j,
8
- center: B,
9
- right: D,
10
- indicator: K,
11
- tabsTrigger: O,
12
- active: X,
1
+ import { jsx as u, jsxs as I } from "react/jsx-runtime";
2
+ import N, { useState as x, useId as W, useRef as k, useMemo as H, useLayoutEffect as C, useEffect as S } from "react";
3
+ import { TabsContext as j, useTabsContext as w } from "./Context.js";
4
+ import '../../assets/index33.css';const B = "_tabs_sttik_1", D = "_tabsList_sttik_7", K = "_horizontal_sttik_24", O = "_vertical_sttik_28", X = "_tabsTrigger_sttik_38", Y = "_tabsPanelWrapper_sttik_43", q = "_left_sttik_50", F = "_center_sttik_54", G = "_right_sttik_58", J = "_indicator_sttik_62", Q = "_active_sttik_109", U = "_tabsPanel_sttik_43", V = "_dark_sttik_154", Z = "_light_sttik_166", tt = "_transparent_sttik_190", e = {
5
+ tabs: B,
6
+ tabsList: D,
7
+ horizontal: K,
8
+ vertical: O,
9
+ tabsTrigger: X,
13
10
  tabsPanelWrapper: Y,
14
- tabsPanel: F
15
- }, G = {
16
- left: a.left,
17
- center: a.center,
18
- right: a.right
11
+ left: q,
12
+ center: F,
13
+ right: G,
14
+ indicator: J,
15
+ active: Q,
16
+ tabsPanel: U,
17
+ default: "_default_sttik_153",
18
+ dark: V,
19
+ light: Z,
20
+ transparent: tt
21
+ }, et = {
22
+ left: e.left,
23
+ center: e.center,
24
+ right: e.right
25
+ }, st = {
26
+ horizontal: e.horizontal,
27
+ vertical: e.vertical
28
+ }, nt = {
29
+ default: e.default,
30
+ light: e.light,
31
+ dark: e.dark,
32
+ transparent: e.transparent
19
33
  };
20
34
  function m({
21
- children: i,
22
- defaultIndex: e = 0,
23
- align: n = "left"
35
+ children: o,
36
+ defaultIndex: s = 0,
37
+ align: n = "left",
38
+ orientation: r = "horizontal",
39
+ theme: c = "default"
24
40
  }) {
25
- const [s, p] = q(e), [o, l] = q({
41
+ const [a, p] = x(s), [b, l] = x({
26
42
  width: 0,
27
43
  left: 0,
28
44
  top: 0,
29
45
  height: 0
30
- }), _ = typeof window < "u", f = _ ? x : H, b = M(), P = [], $ = [], L = v(null), R = v([]), T = v([]), A = W(
46
+ }), d = typeof window < "u", M = d ? C : S, y = W(), P = [], $ = [], L = k(null), R = k([]), T = k([]), A = H(
31
47
  () => ({
32
- activeIndex: s,
48
+ activeIndex: a,
33
49
  setActiveIndex: p,
34
- idPrefix: b,
50
+ idPrefix: y,
35
51
  align: n,
52
+ orientation: r,
53
+ theme: c,
36
54
  panelRefs: R,
37
55
  triggerRefs: T,
38
- indicatorStyle: o
56
+ indicatorStyle: b
39
57
  }),
40
- [s, b, n, o]
58
+ [a, y, n, r, c, b]
41
59
  );
42
- return N.Children.forEach(i, (t) => {
43
- var r;
44
- (t == null ? void 0 : t.type) === C ? P.push(t) : ((t == null ? void 0 : t.type) === E || ((r = t == null ? void 0 : t.type) == null ? void 0 : r.name) === "Panel") && $.push(t);
45
- }), f(() => {
60
+ return N.Children.forEach(o, (t) => {
61
+ var i;
62
+ (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);
63
+ }), M(() => {
46
64
  const t = () => {
47
- var u;
48
- const r = T.current[s];
49
- if (r) {
50
- const c = r.getBoundingClientRect(), g = (u = r.parentElement) == null ? void 0 : u.getBoundingClientRect();
51
- if (!g) return;
52
- if (window.innerWidth < 768) {
53
- const h = c.top - g.top, y = c.height;
54
- l({ top: h, height: y, left: 0, width: g.width });
65
+ var g;
66
+ const i = T.current[a];
67
+ if (i) {
68
+ const f = i.getBoundingClientRect(), _ = (g = i.parentElement) == null ? void 0 : g.getBoundingClientRect();
69
+ if (!_) return;
70
+ if (window.innerWidth < 768 || r === "vertical") {
71
+ const h = f.top - _.top, v = f.height;
72
+ l({ top: h, height: v, left: 0, width: _.width });
55
73
  } else {
56
- const h = c.left - g.left, y = c.width;
74
+ const h = f.left - _.left, v = f.width;
57
75
  l({
58
76
  left: h,
59
- width: y,
77
+ width: v,
60
78
  top: 0,
61
- height: g.height
79
+ height: _.height
62
80
  });
63
81
  }
64
82
  }
65
83
  };
66
- if (_)
84
+ if (d)
67
85
  return t(), window.addEventListener("resize", t), () => {
68
86
  window.removeEventListener("resize", t);
69
87
  };
70
- }, [s]), x(() => {
71
- const t = L.current, r = R.current[s];
72
- if (!t || !r) return;
73
- const u = () => {
74
- const g = r.offsetHeight;
75
- t.offsetHeight, t.style.height = `${g}px`;
88
+ }, [a]), C(() => {
89
+ const t = L.current, i = R.current[a];
90
+ if (!t || !i) return;
91
+ const g = () => {
92
+ const _ = i.offsetHeight;
93
+ t.offsetHeight, t.style.height = `${_}px`;
76
94
  };
77
- u();
78
- const c = new ResizeObserver(u);
79
- return c.observe(r), () => {
80
- c.disconnect();
95
+ g();
96
+ const f = new ResizeObserver(g);
97
+ return f.observe(i), () => {
98
+ f.disconnect();
81
99
  };
82
- }, [s]), /* @__PURE__ */ d(S.Provider, { value: A, children: /* @__PURE__ */ I("div", { className: a.tabs, children: [
83
- P,
84
- /* @__PURE__ */ d("div", { ref: L, className: a.tabsPanelWrapper, children: $ })
85
- ] }) });
100
+ }, [a]), /* @__PURE__ */ u(j.Provider, { value: A, children: /* @__PURE__ */ I(
101
+ "div",
102
+ {
103
+ className: `${e.tabs} ${st[r]} ${nt[c]}`,
104
+ children: [
105
+ P,
106
+ /* @__PURE__ */ u("div", { ref: L, className: e.tabsPanelWrapper, children: $ })
107
+ ]
108
+ }
109
+ ) });
86
110
  }
87
- function C({ children: i }) {
88
- const { align: e, indicatorStyle: n } = w();
111
+ function z({ children: o }) {
112
+ const { align: s, indicatorStyle: n } = w();
89
113
  return /* @__PURE__ */ I(
90
114
  "div",
91
115
  {
92
- className: `${a.tabsList} ${G[e]}`,
116
+ className: `${e.tabsList} ${et[s]}`,
93
117
  role: "tablist",
94
118
  "aria-label": "Tabs",
95
119
  children: [
96
- /* @__PURE__ */ d(
120
+ /* @__PURE__ */ u(
97
121
  "div",
98
122
  {
99
- className: a.indicator,
123
+ className: e.indicator,
100
124
  style: {
101
125
  width: n.width,
102
126
  height: n.height,
@@ -104,55 +128,57 @@ function C({ children: i }) {
104
128
  }
105
129
  }
106
130
  ),
107
- i
131
+ o
108
132
  ]
109
133
  }
110
134
  );
111
135
  }
112
- function J({ children: i, index: e }) {
113
- const { activeIndex: n, setActiveIndex: s, idPrefix: p, triggerRefs: o } = w(), l = (f) => {
114
- f.key === "ArrowRight" ? s((b) => b + 1) : f.key === "ArrowLeft" && s((b) => Math.max(0, b - 1));
115
- }, _ = n === e;
116
- return /* @__PURE__ */ d(
136
+ function rt({ children: o, index: s }) {
137
+ const { activeIndex: n, setActiveIndex: r, idPrefix: c, triggerRefs: a } = w(), p = (l) => {
138
+ l.key === "ArrowRight" ? r((d) => d + 1) : l.key === "ArrowLeft" && r((d) => Math.max(0, d - 1));
139
+ }, b = n === s;
140
+ return /* @__PURE__ */ u(
117
141
  "button",
118
142
  {
119
- className: `${a.tabsTrigger} ${_ ? a.active : ""}`,
143
+ className: `${e.tabsTrigger} ${b ? e.active : ""}`,
120
144
  role: "tab",
121
- ref: (f) => {
122
- o.current[e] = f;
145
+ ref: (l) => {
146
+ a.current[s] = l;
123
147
  },
124
- id: `${p}-tab-${e}`,
125
- "aria-selected": n === e,
126
- tabIndex: n === e ? 0 : -1,
127
- onClick: () => s(e),
128
- onKeyDown: l,
129
- children: i
148
+ id: `${c}-tab-${s}`,
149
+ "aria-selected": n === s,
150
+ tabIndex: n === s ? 0 : -1,
151
+ onClick: () => r(s),
152
+ onKeyDown: p,
153
+ children: o
130
154
  }
131
155
  );
132
156
  }
133
- function E({ children: i, index: e }) {
134
- const { activeIndex: n, idPrefix: s, panelRefs: p } = w(), o = e === n;
135
- return /* @__PURE__ */ d(
157
+ function E({ children: o, index: s }) {
158
+ const { activeIndex: n, idPrefix: r, panelRefs: c } = w(), a = s === n;
159
+ return /* @__PURE__ */ u(
136
160
  "div",
137
161
  {
138
- ref: (l) => {
139
- p.current[e] = l;
162
+ ref: (p) => {
163
+ c.current[s] = p;
140
164
  },
141
- className: a.tabsPanel,
165
+ className: e.tabsPanel,
142
166
  role: "tabpanel",
143
- id: `${s}-panel-${e}`,
144
- "aria-labelledby": `${s}-tab-${e}`,
145
- "aria-hidden": !o,
146
- hidden: !o,
147
- children: i
167
+ id: `${r}-panel-${s}`,
168
+ "aria-labelledby": `${r}-tab-${s}`,
169
+ "aria-hidden": !a,
170
+ hidden: !a,
171
+ children: o
148
172
  }
149
173
  );
150
174
  }
151
- m.List = C;
152
- m.Trigger = J;
175
+ m.List = z;
176
+ m.Trigger = rt;
153
177
  m.Panel = E;
154
178
  export {
155
179
  m as Tabs,
156
- G as alignClassMap,
157
- m as default
180
+ et as alignClassMap,
181
+ m as default,
182
+ st as orientationClassMap,
183
+ nt as themeClassMap
158
184
  };
package/dist/lib/components/Tabs/Context.d.ts CHANGED
@@ -1,5 +1,5 @@
1
1
  import { default as React } from 'react';
2
- import { Align } from '.';
2
+ import { Align, Orientation } from '.';
3
3
  export type IndicatorStyle = {
4
4
  width: number;
5
5
  left: number;
@@ -11,6 +11,7 @@ export type TabsContextType = {
11
11
  setActiveIndex: React.Dispatch<React.SetStateAction<number>>;
12
12
  idPrefix: string;
13
13
  align: Align;
14
+ orientation: Orientation;
14
15
  panelRefs: React.RefObject<(HTMLDivElement | null)[]>;
15
16
  setWrapperHeight?: () => void;
16
17
  triggerRefs: React.RefObject<(HTMLButtonElement | null)[]>;
package/dist/lib/components/Tabs/index.d.ts CHANGED
@@ -5,12 +5,26 @@ export declare const alignClassMap: {
5
5
  right: string;
6
6
  };
7
7
  export type Align = keyof typeof alignClassMap;
8
+ export declare const orientationClassMap: {
9
+ horizontal: string;
10
+ vertical: string;
11
+ };
12
+ export type Orientation = keyof typeof orientationClassMap;
13
+ export declare const themeClassMap: {
14
+ default: string;
15
+ light: string;
16
+ dark: string;
17
+ transparent: string;
18
+ };
19
+ export type Theme = keyof typeof themeClassMap;
8
20
  type TabsProps = {
9
21
  children: ReactNode;
10
22
  defaultIndex?: number;
11
23
  align?: Align;
24
+ orientation?: Orientation;
25
+ theme?: Theme;
12
26
  };
13
- export declare function Tabs({ children, defaultIndex, align, }: TabsProps): import("react/jsx-runtime").JSX.Element;
27
+ export declare function Tabs({ children, defaultIndex, align, orientation, theme, }: TabsProps): import("react/jsx-runtime").JSX.Element;
14
28
  export declare namespace Tabs {
15
29
  var List: ({ children }: {
16
30
  children: ReactNode;
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_ggq3y_1{display:flex;flex-direction:column;width:100%}._tabsList_ggq3y_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_ggq3y_7::-webkit-scrollbar{display:none}._left_ggq3y_23{justify-content:flex-start}._center_ggq3y_27{justify-content:center}._right_ggq3y_31{justify-content:flex-end}._indicator_ggq3y_35{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_ggq3y_35:after{content:"";border-radius:var(--radius-md);background-color:var(--color-primary);display:block;position:absolute;width:100%;height:100%}._tabsTrigger_ggq3y_57{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_ggq3y_57._active_ggq3y_82{color:#fff}@media (max-width: 767px){._tabsList_ggq3y_7{flex-direction:column;overflow-x:visible}._tabsTrigger_ggq3y_57{white-space:normal;text-align:left}}._tabsPanelWrapper_ggq3y_98{position:relative;overflow:hidden;height:auto;transition:height .3s ease-in-out}._tabsPanel_ggq3y_98{animation:_fadeSlide_ggq3y_1 .3s ease both;position:relative;width:100%;padding:var(--spacing-xl) var(--spacing-sm);color:var(--color-text-primary)}@keyframes _fadeSlide_ggq3y_1{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
33
+ ._tabs_sttik_1{display:flex;flex-direction:column;width:100%}._tabsList_sttik_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_sttik_7::-webkit-scrollbar{display:none}._horizontal_sttik_24{flex-direction:column}._vertical_sttik_28{flex-direction:row;gap:var(--spacing-lg)}._vertical_sttik_28 ._tabsList_sttik_7{flex-direction:column;overflow-x:visible;flex:.4 0 150px}._vertical_sttik_28 ._tabsTrigger_sttik_38{white-space:normal;text-align:left}._vertical_sttik_28 ._tabsPanelWrapper_sttik_43{flex:1;width:100%}._left_sttik_50{justify-content:flex-start}._center_sttik_54{justify-content:center}._right_sttik_58{justify-content:flex-end}._indicator_sttik_62{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_sttik_62:after{content:"";border-radius:var(--radius-md);background-color:var(--color-primary);display:block;position:absolute;width:100%;height:100%}._tabsTrigger_sttik_38{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_sttik_38._active_sttik_109{color:#fff}@media (max-width: 767px){._tabsList_sttik_7{flex-direction:column;overflow-x:visible}._tabsTrigger_sttik_38{white-space:normal;text-align:left}}._tabsPanelWrapper_sttik_43{position:relative;overflow:hidden;height:auto;transition:height .3s ease-in-out}._tabsPanel_sttik_43{animation:_fadeSlide_sttik_1 .3s ease both;position:relative;width:100%;padding:var(--spacing-xl) var(--spacing-sm);color:var(--color-text-primary)}@keyframes _fadeSlide_sttik_1{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}._default_sttik_153,._dark_sttik_154{background-color:var(--color-tab-background)}._default_sttik_153 ._indicator_sttik_62,._dark_sttik_154 ._indicator_sttik_62{border:5px solid transparent}._default_sttik_153 ._tabsTrigger_sttik_38,._dark_sttik_154 ._tabsTrigger_sttik_38{color:var(--color-muted)}._light_sttik_166{background-color:#fff}._light_sttik_166 ._indicator_sttik_62{border:5px solid transparent}._light_sttik_166 ._tabsList_sttik_7{background-color:#fff}._light_sttik_166 ._tabsTrigger_sttik_38{color:var(--color-text-primary)}._light_sttik_166 ._tabsTrigger_sttik_38:hover{color:var(--color-primary)}._light_sttik_166 ._tabsTrigger_sttik_38._active_sttik_109{color:#fff}._transparent_sttik_190{background-color:transparent}._transparent_sttik_190 ._indicator_sttik_62{border:5px solid transparent}._transparent_sttik_190 ._tabsList_sttik_7{background-color:transparent}._transparent_sttik_190 ._tabsTrigger_sttik_38{color:var(--color-text-primary)}._transparent_sttik_190 ._tabsTrigger_sttik_38:hover{color:var(--color-primary)}._transparent_sttik_190 ._tabsTrigger_sttik_38._active_sttik_109{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.128",
4
+ "version": "0.0.129",
5
5
  "type": "module",
6
6
  "exports": {
7
7
  ".": {