quirk-ui 0.1.125 → 0.1.126
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
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('../../../index33.css');const
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('../../../index33.css');const _=require("react/jsx-runtime"),o=require("react"),R=require("./Context.cjs"),B="_tabs_1g6a3_1",K="_tabsList_1g6a3_7",O="_horizontal_1g6a3_24",U="_tabsPanel_1g6a3_26",X="_vertical_1g6a3_31",Y="_tabsTrigger_1g6a3_42",F="_tabsPanelWrapper_1g6a3_47",G="_indicator_1g6a3_70",J="_active_1g6a3_119",Q="_disabled_1g6a3_123",V="_dark_1g6a3_177",Z="_light_1g6a3_189",tt="_transparent_1g6a3_213",n={tabs:B,tabsList:K,horizontal:O,tabsPanel:U,vertical:X,tabsTrigger:Y,tabsPanelWrapper:F,indicator:G,active:J,disabled:Q,default:"_default_1g6a3_173",dark:V,light:Z,transparent:tt},D={horizontal:n.horizontal,vertical:n.vertical},N={default:n.default,light:n.light,dark:n.dark,transparent:n.transparent};function L({children:g,defaultIndex:a=0,activeIndex:r,onIndexChange:l,orientation:c="horizontal",theme:f="default",className:h,style:v}){const[p,x]=o.useState(a),y=r!==void 0,s=y?r:p,[i,$]=o.useState({width:0,left:0,top:0,height:0}),w=typeof window<"u",T=w?o.useLayoutEffect:o.useEffect,m=o.useId(),P=[],t=[],I=new Set,j=o.useRef(null),A=o.useRef([]),M=o.useRef([]),S=o.useCallback(e=>{I.has(e)||(y||x(e),l==null||l(e))},[y,l,I]),q=o.useMemo(()=>({activeIndex:s,setActiveIndex:S,idPrefix:m,orientation:c,theme:f,panelRefs:A,triggerRefs:M,indicatorStyle:i,disabledIndices:I}),[s,S,m,c,f,i]);o.Children.forEach(g,e=>{var u;(e==null?void 0:e.type)===H?P.push(e):((e==null?void 0:e.type)===W||((u=e==null?void 0:e.type)==null?void 0:u.name)==="Panel")&&t.push(e)});const k=o.useCallback(()=>{var u;const e=M.current[s];if(e){const b=e.getBoundingClientRect(),d=(u=e.parentElement)==null?void 0:u.getBoundingClientRect();if(!d)return;if(window.innerWidth<768||c==="vertical"){const z=b.top-d.top,E=b.height;$({top:z,height:E,left:0,width:d.width})}else{const z=b.left-d.left,E=b.width;$({left:z,width:E,top:0,height:d.height})}}},[s,c]);return T(()=>{if(!(typeof window>"u")&&w)return k(),window.addEventListener("resize",k),()=>{window.removeEventListener("resize",k)}},[k,w]),o.useLayoutEffect(()=>{const e=j.current,u=A.current[s];if(!e||!u)return;const b=()=>{const C=u.offsetHeight;e.offsetHeight,e.style.height=`${C}px`};b();const d=new ResizeObserver(b);return d.observe(u),()=>{d.disconnect()}},[s]),_.jsx(R.TabsContext.Provider,{value:q,children:_.jsxs("div",{className:`${n.tabs} ${D[c]} ${N[f]} ${h??""}`.trim(),style:v,children:[P,_.jsx("div",{ref:j,className:n.tabsPanelWrapper,children:t})]})})}function H({children:g,className:a}){const{indicatorStyle:r}=R.useTabsContext();return _.jsxs("div",{className:`${n.tabsList} ${a??""}`.trim(),role:"tablist","aria-label":"Tabs",children:[_.jsx("div",{className:n.indicator,style:{width:r.width,height:r.height,transform:`translateX(${r.left}px) translateY(${r.top}px)`}}),g]})}function et({children:g,index:a,disabled:r=!1,className:l}){const{activeIndex:c,setActiveIndex:f,idPrefix:h,triggerRefs:v,disabledIndices:p}=R.useTabsContext();r&&p.add(a);const x=s=>{var w,T,m,P;const i=v.current.filter(Boolean),$=i.findIndex(t=>t===s.currentTarget);if(s.key==="ArrowRight"||s.key==="ArrowDown"){s.preventDefault();let t=$+1;for(;t<i.length&&p.has(t);)t++;t<i.length&&(f(t),(w=i[t])==null||w.focus())}else if(s.key==="ArrowLeft"||s.key==="ArrowUp"){s.preventDefault();let t=$-1;for(;t>=0&&p.has(t);)t--;t>=0&&(f(t),(T=i[t])==null||T.focus())}else if(s.key==="Home"){s.preventDefault();let t=0;for(;t<i.length&&p.has(t);)t++;t<i.length&&(f(t),(m=i[t])==null||m.focus())}else if(s.key==="End"){s.preventDefault();let t=i.length-1;for(;t>=0&&p.has(t);)t--;t>=0&&(f(t),(P=i[t])==null||P.focus())}},y=c===a;return _.jsx("button",{className:`${n.tabsTrigger} ${y?n.active:""} ${r?n.disabled:""} ${l??""}`.trim(),role:"tab",ref:s=>{v.current[a]=s},id:`${h}-tab-${a}`,"aria-selected":c===a,"aria-disabled":r,tabIndex:c===a?0:-1,onClick:()=>!r&&f(a),onKeyDown:x,disabled:r,children:g})}function W({children:g,index:a,className:r}){const{activeIndex:l,idPrefix:c,panelRefs:f}=R.useTabsContext(),h=a===l;return _.jsx("div",{ref:v=>{f.current[a]=v},className:`${n.tabsPanel} ${r??""}`.trim(),role:"tabpanel",id:`${c}-panel-${a}`,"aria-labelledby":`${c}-tab-${a}`,"aria-hidden":!h,hidden:!h,children:g})}L.List=H;L.Trigger=et;L.Panel=W;exports.Tabs=L;exports.orientationClassMap=D;exports.themeClassMap=N;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { jsx as $, jsxs as j } from "react/jsx-runtime";
|
|
2
2
|
import U, { useState as W, useId as X, useRef as z, useCallback as x, useMemo as Y, useLayoutEffect as B, useEffect as q } from "react";
|
|
3
3
|
import { TabsContext as F, useTabsContext as A } from "./Context.mjs";
|
|
4
|
-
import '../../../index33.css';const G = "
|
|
4
|
+
import '../../../index33.css';const G = "_tabs_1g6a3_1", J = "_tabsList_1g6a3_7", Q = "_horizontal_1g6a3_24", V = "_tabsPanel_1g6a3_26", Z = "_vertical_1g6a3_31", tt = "_tabsTrigger_1g6a3_42", et = "_tabsPanelWrapper_1g6a3_47", st = "_indicator_1g6a3_70", rt = "_active_1g6a3_119", at = "_disabled_1g6a3_123", nt = "_dark_1g6a3_177", it = "_light_1g6a3_189", ot = "_transparent_1g6a3_213", n = {
|
|
5
5
|
tabs: G,
|
|
6
6
|
tabsList: J,
|
|
7
7
|
horizontal: Q,
|
|
@@ -12,7 +12,7 @@ import '../../../index33.css';const G = "_tabs_1evwt_1", J = "_tabsList_1evwt_7"
|
|
|
12
12
|
indicator: st,
|
|
13
13
|
active: rt,
|
|
14
14
|
disabled: at,
|
|
15
|
-
default: "
|
|
15
|
+
default: "_default_1g6a3_173",
|
|
16
16
|
dark: nt,
|
|
17
17
|
light: it,
|
|
18
18
|
transparent: ot
|
|
@@ -32,19 +32,19 @@ function E({
|
|
|
32
32
|
onIndexChange: c,
|
|
33
33
|
orientation: o = "horizontal",
|
|
34
34
|
theme: l = "default",
|
|
35
|
-
className:
|
|
36
|
-
style:
|
|
35
|
+
className: b,
|
|
36
|
+
style: _
|
|
37
37
|
}) {
|
|
38
|
-
const [p, L] = W(r),
|
|
38
|
+
const [p, L] = W(r), v = a !== void 0, s = v ? a : p, [i, w] = W({
|
|
39
39
|
width: 0,
|
|
40
40
|
left: 0,
|
|
41
41
|
top: 0,
|
|
42
42
|
height: 0
|
|
43
|
-
}),
|
|
43
|
+
}), h = typeof window < "u", P = h ? B : q, m = X(), y = [], t = [], R = /* @__PURE__ */ new Set(), D = z(null), N = z([]), H = z([]), M = x(
|
|
44
44
|
(e) => {
|
|
45
|
-
R.has(e) || (
|
|
45
|
+
R.has(e) || (v || L(e), c == null || c(e));
|
|
46
46
|
},
|
|
47
|
-
[
|
|
47
|
+
[v, c, R]
|
|
48
48
|
), O = Y(
|
|
49
49
|
() => ({
|
|
50
50
|
activeIndex: s,
|
|
@@ -67,14 +67,14 @@ function E({
|
|
|
67
67
|
var f;
|
|
68
68
|
const e = H.current[s];
|
|
69
69
|
if (e) {
|
|
70
|
-
const
|
|
70
|
+
const g = e.getBoundingClientRect(), u = (f = e.parentElement) == null ? void 0 : f.getBoundingClientRect();
|
|
71
71
|
if (!u) return;
|
|
72
72
|
if (window.innerWidth < 768 || o === "vertical") {
|
|
73
|
-
const T =
|
|
74
|
-
|
|
73
|
+
const T = g.top - u.top, I = g.height;
|
|
74
|
+
w({ top: T, height: I, left: 0, width: u.width });
|
|
75
75
|
} else {
|
|
76
|
-
const T =
|
|
77
|
-
|
|
76
|
+
const T = g.left - u.left, I = g.width;
|
|
77
|
+
w({
|
|
78
78
|
left: T,
|
|
79
79
|
width: I,
|
|
80
80
|
top: 0,
|
|
@@ -84,27 +84,27 @@ function E({
|
|
|
84
84
|
}
|
|
85
85
|
}, [s, o]);
|
|
86
86
|
return P(() => {
|
|
87
|
-
if (!(typeof window > "u") &&
|
|
87
|
+
if (!(typeof window > "u") && h)
|
|
88
88
|
return k(), window.addEventListener("resize", k), () => {
|
|
89
89
|
window.removeEventListener("resize", k);
|
|
90
90
|
};
|
|
91
|
-
}, [k,
|
|
91
|
+
}, [k, h]), B(() => {
|
|
92
92
|
const e = D.current, f = N.current[s];
|
|
93
93
|
if (!e || !f) return;
|
|
94
|
-
const
|
|
94
|
+
const g = () => {
|
|
95
95
|
const S = f.offsetHeight;
|
|
96
96
|
e.offsetHeight, e.style.height = `${S}px`;
|
|
97
97
|
};
|
|
98
|
-
|
|
99
|
-
const u = new ResizeObserver(
|
|
98
|
+
g();
|
|
99
|
+
const u = new ResizeObserver(g);
|
|
100
100
|
return u.observe(f), () => {
|
|
101
101
|
u.disconnect();
|
|
102
102
|
};
|
|
103
103
|
}, [s]), /* @__PURE__ */ $(F.Provider, { value: O, children: /* @__PURE__ */ j(
|
|
104
104
|
"div",
|
|
105
105
|
{
|
|
106
|
-
className: `${n.tabs} ${ct[o]} ${lt[l]} ${
|
|
107
|
-
style:
|
|
106
|
+
className: `${n.tabs} ${ct[o]} ${lt[l]} ${b ?? ""}`.trim(),
|
|
107
|
+
style: _,
|
|
108
108
|
children: [
|
|
109
109
|
y,
|
|
110
110
|
/* @__PURE__ */ $("div", { ref: D, className: n.tabsPanelWrapper, children: t })
|
|
@@ -146,25 +146,25 @@ function ft({
|
|
|
146
146
|
const {
|
|
147
147
|
activeIndex: o,
|
|
148
148
|
setActiveIndex: l,
|
|
149
|
-
idPrefix:
|
|
150
|
-
triggerRefs:
|
|
149
|
+
idPrefix: b,
|
|
150
|
+
triggerRefs: _,
|
|
151
151
|
disabledIndices: p
|
|
152
152
|
} = A();
|
|
153
153
|
a && p.add(r);
|
|
154
154
|
const L = (s) => {
|
|
155
|
-
var
|
|
156
|
-
const i =
|
|
155
|
+
var h, P, m, y;
|
|
156
|
+
const i = _.current.filter(Boolean), w = i.findIndex(
|
|
157
157
|
(t) => t === s.currentTarget
|
|
158
158
|
);
|
|
159
159
|
if (s.key === "ArrowRight" || s.key === "ArrowDown") {
|
|
160
160
|
s.preventDefault();
|
|
161
|
-
let t =
|
|
161
|
+
let t = w + 1;
|
|
162
162
|
for (; t < i.length && p.has(t); )
|
|
163
163
|
t++;
|
|
164
|
-
t < i.length && (l(t), (
|
|
164
|
+
t < i.length && (l(t), (h = i[t]) == null || h.focus());
|
|
165
165
|
} else if (s.key === "ArrowLeft" || s.key === "ArrowUp") {
|
|
166
166
|
s.preventDefault();
|
|
167
|
-
let t =
|
|
167
|
+
let t = w - 1;
|
|
168
168
|
for (; t >= 0 && p.has(t); )
|
|
169
169
|
t--;
|
|
170
170
|
t >= 0 && (l(t), (P = i[t]) == null || P.focus());
|
|
@@ -181,16 +181,16 @@ function ft({
|
|
|
181
181
|
t--;
|
|
182
182
|
t >= 0 && (l(t), (y = i[t]) == null || y.focus());
|
|
183
183
|
}
|
|
184
|
-
},
|
|
184
|
+
}, v = o === r;
|
|
185
185
|
return /* @__PURE__ */ $(
|
|
186
186
|
"button",
|
|
187
187
|
{
|
|
188
|
-
className: `${n.tabsTrigger} ${
|
|
188
|
+
className: `${n.tabsTrigger} ${v ? n.active : ""} ${a ? n.disabled : ""} ${c ?? ""}`.trim(),
|
|
189
189
|
role: "tab",
|
|
190
190
|
ref: (s) => {
|
|
191
|
-
|
|
191
|
+
_.current[r] = s;
|
|
192
192
|
},
|
|
193
|
-
id: `${
|
|
193
|
+
id: `${b}-tab-${r}`,
|
|
194
194
|
"aria-selected": o === r,
|
|
195
195
|
"aria-disabled": a,
|
|
196
196
|
tabIndex: o === r ? 0 : -1,
|
|
@@ -202,19 +202,19 @@ function ft({
|
|
|
202
202
|
);
|
|
203
203
|
}
|
|
204
204
|
function C({ children: d, index: r, className: a }) {
|
|
205
|
-
const { activeIndex: c, idPrefix: o, panelRefs: l } = A(),
|
|
205
|
+
const { activeIndex: c, idPrefix: o, panelRefs: l } = A(), b = r === c;
|
|
206
206
|
return /* @__PURE__ */ $(
|
|
207
207
|
"div",
|
|
208
208
|
{
|
|
209
|
-
ref: (
|
|
210
|
-
l.current[r] =
|
|
209
|
+
ref: (_) => {
|
|
210
|
+
l.current[r] = _;
|
|
211
211
|
},
|
|
212
212
|
className: `${n.tabsPanel} ${a ?? ""}`.trim(),
|
|
213
213
|
role: "tabpanel",
|
|
214
214
|
id: `${o}-panel-${r}`,
|
|
215
215
|
"aria-labelledby": `${o}-tab-${r}`,
|
|
216
|
-
"aria-hidden": !
|
|
217
|
-
hidden: !
|
|
216
|
+
"aria-hidden": !b,
|
|
217
|
+
hidden: !b,
|
|
218
218
|
children: d
|
|
219
219
|
}
|
|
220
220
|
);
|
package/dist/index33.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.
|
|
1
|
+
._tabs_1g6a3_1{display:flex;flex-direction:column;width:100%}._tabsList_1g6a3_7{display:flex;width:100%;background-color:var(--color-secondary-10);border-radius:calc(var(--radius-md) + 5px);position:relative;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none}._tabsList_1g6a3_7::-webkit-scrollbar{display:none}._horizontal_1g6a3_24{flex-direction:column}._horizontal_1g6a3_24 ._tabsPanel_1g6a3_26{padding:var(--spacing-lg) var(--spacing-md)}._vertical_1g6a3_31{flex-direction:column;align-items:flex-start;gap:3rem}._vertical_1g6a3_31 ._tabsList_1g6a3_7{flex-direction:column;overflow-x:visible;flex:.25 0 150px}._vertical_1g6a3_31 ._tabsTrigger_1g6a3_42{white-space:normal;text-align:left}._vertical_1g6a3_31 ._tabsPanelWrapper_1g6a3_47{flex:1;width:100%}@media (max-width: 767px){._vertical_1g6a3_31{flex-direction:column}}._left_1g6a3_58{justify-content:flex-start}._center_1g6a3_62{justify-content:center}._right_1g6a3_66{justify-content:flex-end}._indicator_1g6a3_70{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-secondary-10)}._indicator_1g6a3_70:after{content:"";border-radius:var(--radius-md);background-color:var(--color-secondary-100);display:block;position:absolute;width:100%;height:100%}._tabsTrigger_1g6a3_42{padding:var(--spacing-md);border:none;background:none;cursor:pointer;color:var(--color-text-primary);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_1g6a3_42._active_1g6a3_119{color:var(--color-tab-text)}._tabsTrigger_1g6a3_42._disabled_1g6a3_123{opacity:.5;cursor:not-allowed}._tabsTrigger_1g6a3_42:disabled{opacity:.5;cursor:not-allowed}@media (max-width: 767px){._tabsList_1g6a3_7{flex-direction:column;overflow-x:visible}._tabsTrigger_1g6a3_42{white-space:normal;text-align:left}}._tabsPanelWrapper_1g6a3_47{position:relative;overflow:hidden;height:auto;transition:height .3s ease-in-out}._tabsPanel_1g6a3_26{animation:_fadeSlide_1g6a3_1 .3s ease both;position:relative;width:100%;color:var(--color-text-primary)}@keyframes _fadeSlide_1g6a3_1{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}._default_1g6a3_173{background-color:transparent}._dark_1g6a3_177{background-color:var(--color-tab-background)}._dark_1g6a3_177 ._indicator_1g6a3_70{border:5px solid transparent}._dark_1g6a3_177 ._tabsTrigger_1g6a3_42{color:var(--color-primary-25)}._light_1g6a3_189{background-color:#fff}._light_1g6a3_189 ._indicator_1g6a3_70{border:5px solid transparent}._light_1g6a3_189 ._tabsList_1g6a3_7{background-color:#fff}._light_1g6a3_189 ._tabsTrigger_1g6a3_42{color:var(--color-text-primary)}._light_1g6a3_189 ._tabsTrigger_1g6a3_42:hover{color:var(--color-primary-100)}._light_1g6a3_189 ._tabsTrigger_1g6a3_42._active_1g6a3_119{color:#fff}._transparent_1g6a3_213{background-color:transparent}._transparent_1g6a3_213 ._indicator_1g6a3_70{border:5px solid transparent}._transparent_1g6a3_213 ._tabsList_1g6a3_7{background-color:transparent}._transparent_1g6a3_213 ._tabsTrigger_1g6a3_42{color:var(--color-text-primary)}._transparent_1g6a3_213 ._tabsTrigger_1g6a3_42:hover{color:var(--color-primary-100)}._transparent_1g6a3_213 ._tabsTrigger_1g6a3_42._active_1g6a3_119{color:#fff}
|