pentatrion-design 1.2.10 → 1.2.11
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.
package/CHANGELOG.md
CHANGED
|
@@ -21,8 +21,9 @@ interface Props {
|
|
|
21
21
|
className?: string;
|
|
22
22
|
contentClassName?: string;
|
|
23
23
|
listClassName?: string;
|
|
24
|
+
preload?: boolean;
|
|
24
25
|
}
|
|
25
|
-
declare function Tabs({ className, listClassName, contentClassName, tabs, value, onChange, fullWidth, stickyTabs, children }: Props): import("react").JSX.Element;
|
|
26
|
+
declare function Tabs({ className, listClassName, contentClassName, tabs, value, onChange, fullWidth, stickyTabs, preload, children }: Props): import("react").JSX.Element;
|
|
26
27
|
//#endregion
|
|
27
28
|
export { Tabs };
|
|
28
29
|
//# sourceMappingURL=index.d.mts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.mts","names":[],"sources":["../../../src/components/tabs/Tabs.tsx"],"mappings":";;UAKiB;EACf;EACA,OAAO;EACP,UAAU;;UAGF;EACR,OAAO;EACP;;;;EAIA;;;;EAIA;EACA,WAAW;EAEX,WAAW;EAEX;EACA;EACA;;iBAGc,OACd,WACA,eACA,kBACA,MACA,OACA,UACA,WACA,YACA,YACC,wBAAK,IAAA"}
|
|
1
|
+
{"version":3,"file":"index.d.mts","names":[],"sources":["../../../src/components/tabs/Tabs.tsx"],"mappings":";;UAKiB;EACf;EACA,OAAO;EACP,UAAU;;UAGF;EACR,OAAO;EACP;;;;EAIA;;;;EAIA;EACA,WAAW;EAEX,WAAW;EAEX;EACA;EACA;EACA;;iBAGc,OACd,WACA,eACA,kBACA,MACA,OACA,UACA,WACA,YACA,SACA,YACC,wBAAK,IAAA"}
|
|
@@ -1,47 +1,49 @@
|
|
|
1
1
|
import { c } from "react/compiler-runtime";
|
|
2
|
+
import { Activity } from "react";
|
|
2
3
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
3
4
|
import clsx from "clsx";
|
|
4
5
|
//#region src/components/tabs/Tabs.tsx
|
|
5
6
|
function Tabs(t0) {
|
|
6
|
-
const $ = c(
|
|
7
|
-
const { className, listClassName, contentClassName, tabs: t1, value, onChange, fullWidth: t2, stickyTabs: t3, children } = t0;
|
|
8
|
-
let
|
|
7
|
+
const $ = c(39);
|
|
8
|
+
const { className, listClassName, contentClassName, tabs: t1, value, onChange, fullWidth: t2, stickyTabs: t3, preload: t4, children } = t0;
|
|
9
|
+
let t5;
|
|
9
10
|
if ($[0] !== t1) {
|
|
10
|
-
|
|
11
|
+
t5 = t1 === void 0 ? [] : t1;
|
|
11
12
|
$[0] = t1;
|
|
12
|
-
$[1] =
|
|
13
|
-
} else
|
|
14
|
-
const tabs =
|
|
13
|
+
$[1] = t5;
|
|
14
|
+
} else t5 = $[1];
|
|
15
|
+
const tabs = t5;
|
|
15
16
|
const fullWidth = t2 === void 0 ? false : t2;
|
|
16
17
|
const stickyTabs = t3 === void 0 ? false : t3;
|
|
17
|
-
|
|
18
|
+
const preload = t4 === void 0 ? false : t4;
|
|
19
|
+
let t6;
|
|
18
20
|
if ($[2] !== tabs || $[3] !== value) {
|
|
19
|
-
|
|
21
|
+
t6 = tabs.find((t) => t.id === value)?.content;
|
|
20
22
|
$[2] = tabs;
|
|
21
23
|
$[3] = value;
|
|
22
|
-
$[4] =
|
|
23
|
-
} else
|
|
24
|
-
const content =
|
|
25
|
-
let
|
|
24
|
+
$[4] = t6;
|
|
25
|
+
} else t6 = $[4];
|
|
26
|
+
const content = t6;
|
|
27
|
+
let t7;
|
|
26
28
|
if ($[5] !== className) {
|
|
27
|
-
|
|
29
|
+
t7 = clsx("ll-tabs bg-gray-2 overflow-hidden shadow-lg", className);
|
|
28
30
|
$[5] = className;
|
|
29
|
-
$[6] =
|
|
30
|
-
} else
|
|
31
|
-
const
|
|
32
|
-
let t8;
|
|
33
|
-
if ($[7] !== listClassName || $[8] !== t7) {
|
|
34
|
-
t8 = clsx("tabs-list flex", t7, listClassName);
|
|
35
|
-
$[7] = listClassName;
|
|
36
|
-
$[8] = t7;
|
|
37
|
-
$[9] = t8;
|
|
38
|
-
} else t8 = $[9];
|
|
31
|
+
$[6] = t7;
|
|
32
|
+
} else t7 = $[6];
|
|
33
|
+
const t8 = stickyTabs && "sticky top-0 z-1";
|
|
39
34
|
let t9;
|
|
35
|
+
if ($[7] !== listClassName || $[8] !== t8) {
|
|
36
|
+
t9 = clsx("tabs-list flex", t8, listClassName);
|
|
37
|
+
$[7] = listClassName;
|
|
38
|
+
$[8] = t8;
|
|
39
|
+
$[9] = t9;
|
|
40
|
+
} else t9 = $[9];
|
|
41
|
+
let t10;
|
|
40
42
|
if ($[10] !== fullWidth || $[11] !== onChange || $[12] !== tabs || $[13] !== value) {
|
|
41
|
-
let
|
|
43
|
+
let t11;
|
|
42
44
|
if ($[15] !== fullWidth || $[16] !== onChange || $[17] !== value) {
|
|
43
|
-
|
|
44
|
-
const { title, id } =
|
|
45
|
+
t11 = (t12) => {
|
|
46
|
+
const { title, id } = t12;
|
|
45
47
|
return /* @__PURE__ */ jsx("div", {
|
|
46
48
|
role: "tab",
|
|
47
49
|
className: clsx("tabs-list-item hover:text-gray-7 border-t-4", fullWidth && "flex-1 text-center", value === id ? "border-t-yellow-3 bg-gray-0 text-gray-7" : "text-gray-6 border-t-transparent"),
|
|
@@ -59,65 +61,80 @@ function Tabs(t0) {
|
|
|
59
61
|
$[15] = fullWidth;
|
|
60
62
|
$[16] = onChange;
|
|
61
63
|
$[17] = value;
|
|
62
|
-
$[18] =
|
|
63
|
-
} else
|
|
64
|
-
|
|
64
|
+
$[18] = t11;
|
|
65
|
+
} else t11 = $[18];
|
|
66
|
+
t10 = tabs.map(t11);
|
|
65
67
|
$[10] = fullWidth;
|
|
66
68
|
$[11] = onChange;
|
|
67
69
|
$[12] = tabs;
|
|
68
70
|
$[13] = value;
|
|
69
|
-
$[14] =
|
|
70
|
-
} else
|
|
71
|
-
let
|
|
71
|
+
$[14] = t10;
|
|
72
|
+
} else t10 = $[14];
|
|
73
|
+
let t11;
|
|
72
74
|
if ($[19] !== children) {
|
|
73
|
-
|
|
75
|
+
t11 = children && /* @__PURE__ */ jsx("div", {
|
|
74
76
|
className: "extra mr-0.5 ml-auto flex items-center",
|
|
75
77
|
children
|
|
76
78
|
});
|
|
77
79
|
$[19] = children;
|
|
78
|
-
$[20] =
|
|
79
|
-
} else
|
|
80
|
-
let
|
|
81
|
-
if ($[21] !== t10 || $[22] !==
|
|
82
|
-
|
|
80
|
+
$[20] = t11;
|
|
81
|
+
} else t11 = $[20];
|
|
82
|
+
let t12;
|
|
83
|
+
if ($[21] !== t10 || $[22] !== t11 || $[23] !== t9) {
|
|
84
|
+
t12 = /* @__PURE__ */ jsxs("div", {
|
|
83
85
|
role: "tablist",
|
|
84
|
-
className:
|
|
85
|
-
children: [
|
|
86
|
+
className: t9,
|
|
87
|
+
children: [t10, t11]
|
|
86
88
|
});
|
|
87
89
|
$[21] = t10;
|
|
88
|
-
$[22] =
|
|
90
|
+
$[22] = t11;
|
|
89
91
|
$[23] = t9;
|
|
90
|
-
$[24] =
|
|
91
|
-
} else
|
|
92
|
-
let
|
|
92
|
+
$[24] = t12;
|
|
93
|
+
} else t12 = $[24];
|
|
94
|
+
let t13;
|
|
93
95
|
if ($[25] !== contentClassName) {
|
|
94
|
-
|
|
96
|
+
t13 = clsx("bg-gray-0 p-2 shadow-lg", contentClassName);
|
|
95
97
|
$[25] = contentClassName;
|
|
96
|
-
$[26] =
|
|
97
|
-
} else
|
|
98
|
-
let t13;
|
|
99
|
-
if ($[27] !== content || $[28] !== t12) {
|
|
100
|
-
t13 = /* @__PURE__ */ jsx("div", {
|
|
101
|
-
className: t12,
|
|
102
|
-
role: "tabpanel",
|
|
103
|
-
children: content
|
|
104
|
-
});
|
|
105
|
-
$[27] = content;
|
|
106
|
-
$[28] = t12;
|
|
107
|
-
$[29] = t13;
|
|
108
|
-
} else t13 = $[29];
|
|
98
|
+
$[26] = t13;
|
|
99
|
+
} else t13 = $[26];
|
|
109
100
|
let t14;
|
|
110
|
-
if ($[
|
|
111
|
-
t14 =
|
|
112
|
-
|
|
113
|
-
|
|
101
|
+
if ($[27] !== content || $[28] !== preload || $[29] !== tabs || $[30] !== value) {
|
|
102
|
+
t14 = preload ? tabs.map((t15) => {
|
|
103
|
+
const { id: id_0, content: content_0 } = t15;
|
|
104
|
+
return /* @__PURE__ */ jsx(Activity, {
|
|
105
|
+
mode: value === id_0 ? "visible" : "hidden",
|
|
106
|
+
children: content_0
|
|
107
|
+
}, id_0);
|
|
108
|
+
}) : content;
|
|
109
|
+
$[27] = content;
|
|
110
|
+
$[28] = preload;
|
|
111
|
+
$[29] = tabs;
|
|
112
|
+
$[30] = value;
|
|
113
|
+
$[31] = t14;
|
|
114
|
+
} else t14 = $[31];
|
|
115
|
+
let t15;
|
|
116
|
+
if ($[32] !== t13 || $[33] !== t14) {
|
|
117
|
+
t15 = /* @__PURE__ */ jsx("div", {
|
|
118
|
+
className: t13,
|
|
119
|
+
role: "tabpanel",
|
|
120
|
+
children: t14
|
|
114
121
|
});
|
|
115
|
-
$[
|
|
116
|
-
$[31] = t13;
|
|
117
|
-
$[32] = t6;
|
|
122
|
+
$[32] = t13;
|
|
118
123
|
$[33] = t14;
|
|
119
|
-
|
|
120
|
-
|
|
124
|
+
$[34] = t15;
|
|
125
|
+
} else t15 = $[34];
|
|
126
|
+
let t16;
|
|
127
|
+
if ($[35] !== t12 || $[36] !== t15 || $[37] !== t7) {
|
|
128
|
+
t16 = /* @__PURE__ */ jsxs("div", {
|
|
129
|
+
className: t7,
|
|
130
|
+
children: [t12, t15]
|
|
131
|
+
});
|
|
132
|
+
$[35] = t12;
|
|
133
|
+
$[36] = t15;
|
|
134
|
+
$[37] = t7;
|
|
135
|
+
$[38] = t16;
|
|
136
|
+
} else t16 = $[38];
|
|
137
|
+
return t16;
|
|
121
138
|
}
|
|
122
139
|
//#endregion
|
|
123
140
|
export { Tabs };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.mjs","names":["ReactNode","clsx","Tab","id","title","content","Props","tabs","value","stickyTabs","fullWidth","onChange","children","className","contentClassName","listClassName","Tabs","t0","$","_c","t1","t2","t3","t4","undefined","
|
|
1
|
+
{"version":3,"file":"index.mjs","names":["Activity","ReactNode","clsx","Tab","id","title","content","Props","tabs","value","stickyTabs","fullWidth","onChange","children","className","contentClassName","listClassName","preload","Tabs","t0","$","_c","t1","t2","t3","t4","t5","undefined","t6","find","t","t7","t8","t9","t10","t11","t12","event","stopPropagation","preventDefault","map","t13","t14","t15","id_0","content_0","t16"],"sources":["../../../src/components/tabs/Tabs.tsx"],"sourcesContent":["import { Activity, ReactNode } from \"react\";\nimport clsx from \"clsx\";\n\n/* TODO: fix stickyTabs with overflow: hidden */\n\nexport interface Tab {\n id: string | number;\n title: ReactNode;\n content?: ReactNode;\n}\n\ninterface Props {\n tabs?: Tab[];\n value: number | string;\n /**\n * Will make tabs stick to the top of the container when overflowing\n */\n stickyTabs?: boolean;\n /**\n * Tabs will take the maximum width and divide equally\n */\n fullWidth?: boolean;\n onChange: (id: number | string) => void;\n\n children?: ReactNode;\n\n className?: string;\n contentClassName?: string;\n listClassName?: string;\n preload?: boolean;\n}\n\nexport function Tabs({\n className,\n listClassName,\n contentClassName,\n tabs = [],\n value,\n onChange,\n fullWidth = false,\n stickyTabs = false,\n preload = false,\n children,\n}: Props) {\n const content = tabs.find((t) => t.id === value)?.content;\n return (\n <div className={clsx(\"ll-tabs bg-gray-2 overflow-hidden shadow-lg\", className)}>\n <div\n role=\"tablist\"\n className={clsx(\"tabs-list flex\", stickyTabs && \"sticky top-0 z-1\", listClassName)}\n >\n {tabs.map(({ title, id }) => {\n return (\n <div\n key={id}\n role=\"tab\"\n className={clsx(\n \"tabs-list-item hover:text-gray-7 border-t-4\",\n fullWidth && \"flex-1 text-center\",\n value === id\n ? \"border-t-yellow-3 bg-gray-0 text-gray-7\"\n : \"text-gray-6 border-t-transparent\",\n )}\n >\n <button\n className=\"w-full px-2 py-1 focus-visible:outline-offset-0 cursor-pointer\"\n onClick={(event) => {\n event.stopPropagation();\n event.preventDefault();\n onChange(id);\n }}\n >\n {title}\n </button>\n </div>\n );\n })}\n {children && <div className=\"extra mr-0.5 ml-auto flex items-center\">{children}</div>}\n </div>\n <div className={clsx(\"bg-gray-0 p-2 shadow-lg\", contentClassName)} role=\"tabpanel\">\n {preload\n ? tabs.map(({ id, content }) => (\n <Activity key={id} mode={value === id ? \"visible\" : \"hidden\"}>\n {content}\n </Activity>\n ))\n : content}\n </div>\n </div>\n );\n}\n"],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { ReactNode } from "react";
|
|
1
|
+
import { Activity, ReactNode } from "react";
|
|
2
2
|
import clsx from "clsx";
|
|
3
3
|
|
|
4
4
|
/* TODO: fix stickyTabs with overflow: hidden */
|
|
@@ -27,6 +27,7 @@ interface Props {
|
|
|
27
27
|
className?: string;
|
|
28
28
|
contentClassName?: string;
|
|
29
29
|
listClassName?: string;
|
|
30
|
+
preload?: boolean;
|
|
30
31
|
}
|
|
31
32
|
|
|
32
33
|
export function Tabs({
|
|
@@ -38,6 +39,7 @@ export function Tabs({
|
|
|
38
39
|
onChange,
|
|
39
40
|
fullWidth = false,
|
|
40
41
|
stickyTabs = false,
|
|
42
|
+
preload = false,
|
|
41
43
|
children,
|
|
42
44
|
}: Props) {
|
|
43
45
|
const content = tabs.find((t) => t.id === value)?.content;
|
|
@@ -76,7 +78,13 @@ export function Tabs({
|
|
|
76
78
|
{children && <div className="extra mr-0.5 ml-auto flex items-center">{children}</div>}
|
|
77
79
|
</div>
|
|
78
80
|
<div className={clsx("bg-gray-0 p-2 shadow-lg", contentClassName)} role="tabpanel">
|
|
79
|
-
{
|
|
81
|
+
{preload
|
|
82
|
+
? tabs.map(({ id, content }) => (
|
|
83
|
+
<Activity key={id} mode={value === id ? "visible" : "hidden"}>
|
|
84
|
+
{content}
|
|
85
|
+
</Activity>
|
|
86
|
+
))
|
|
87
|
+
: content}
|
|
80
88
|
</div>
|
|
81
89
|
</div>
|
|
82
90
|
);
|