@pareto-engineering/design-system 5.11.15 → 5.11.16
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/dist/assets/Tooltip.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
:export{base:ds;elementcontent:content;elementheading:heading;elementitem:item;elementsection:section;elementsubtitle:subtitle;modifieractive:active;modifieranimated:animated;modifierattached:attached;modifierblur:blur;modifierclear:clear;modifiercompact:compact;modifierdisabled:disabled;modifierimage:image;modifierghost:ghost;modifieropen:open;modifiersimple:simple;modifierspaced:spaced;modifierunderlined:underlined;wrappergroup:group}.ds.tooltip{display:inline-block;position:relative}.ds.tooltip>.tooltip-content{background:var(--x);border:var(--theme-default-border-style) var(--ui-lines);border-radius:calc(var(--theme-default-border-radius) / 2);min-width:var(--tooltip-width, 20rem);opacity:0;overflow:hidden;padding:calc(var(--theme-default-padding) / 2) var(--theme-default-padding);position:absolute;transform:translate(var(--horizontal, 0)) translateY(var(--vertical, 0));transition:opacity .2s ease,transform .2s ease;visibility:hidden;z-index:10}.ds.tooltip>.tooltip-content.floating.top{left:var(--mouse-x);position:fixed;top:calc(var(--mouse-y) - var(--theme-default-padding) / 2);transform:translate(-50%,-100%)}.ds.tooltip>.tooltip-content.floating.right{left:calc(var(--mouse-x) + var(--theme-default-padding));position:fixed;top:var(--mouse-y);transform:translateY(-50%)}.ds.tooltip>.tooltip-content.floating.bottom{left:var(--mouse-x);position:fixed;top:calc(var(--mouse-y) + var(--theme-default-padding) / 2);transform:translate(-50%)}.ds.tooltip>.tooltip-content.floating.left{left:calc(var(--mouse-x) - var(--theme-default-padding));position:fixed;top:var(--mouse-y);transform:translate(-100%,-50%)}.ds.tooltip>.tooltip-content:not(.floating).top{--horizontal: -50%;bottom:calc(100% + var(--theme-default-padding) / 2);left:50%}.ds.tooltip>.tooltip-content:not(.floating).right{--vertical: 50%;bottom:50%;left:calc(100% + var(--theme-default-padding))}.ds.tooltip>.tooltip-content:not(.floating).bottom{--horizontal: -50%;left:50%;top:calc(100% + var(--theme-default-padding) / 2)}.ds.tooltip>.tooltip-content:not(.floating).left{--vertical: 50%;bottom:50%;right:calc(100% + var(--theme-default-padding))}.ds.tooltip>.tooltip-trigger-wrapper{cursor:pointer}.ds.tooltip>.tooltip-trigger-wrapper:is(:hover,:focus-visible,:active)+.tooltip-content{opacity:1;transition-delay:.2s;visibility:visible}
|
|
1
|
+
:export{base:ds;elementcontent:content;elementheading:heading;elementitem:item;elementsection:section;elementsubtitle:subtitle;modifieractive:active;modifieranimated:animated;modifierattached:attached;modifierblur:blur;modifierclear:clear;modifiercompact:compact;modifierdisabled:disabled;modifierimage:image;modifierghost:ghost;modifieropen:open;modifiersimple:simple;modifierspaced:spaced;modifierunderlined:underlined;wrappergroup:group}.ds.tooltip{display:inline-block;position:relative}.ds.tooltip>.tooltip-content{background:var(--x);border:var(--theme-default-border-style) var(--ui-lines);border-radius:calc(var(--theme-default-border-radius) / 2);min-width:var(--tooltip-width, 20rem);opacity:0;overflow:hidden;padding:calc(var(--theme-default-padding) / 2) var(--theme-default-padding);position:absolute;transform:translate(var(--horizontal, 0)) translateY(var(--vertical, 0));transition:opacity .2s ease,transform .2s ease;visibility:hidden;z-index:10}.ds.tooltip>.tooltip-content.floating.top{left:var(--mouse-x);position:fixed;top:calc(var(--mouse-y) - var(--theme-default-padding) / 2);transform:translate(-50%,-100%)}.ds.tooltip>.tooltip-content.floating.right{left:calc(var(--mouse-x) + var(--theme-default-padding));position:fixed;top:var(--mouse-y);transform:translateY(-50%)}.ds.tooltip>.tooltip-content.floating.bottom{left:var(--mouse-x);position:fixed;top:calc(var(--mouse-y) + var(--theme-default-padding) / 2);transform:translate(-50%)}.ds.tooltip>.tooltip-content.floating.left{left:calc(var(--mouse-x) - var(--theme-default-padding));position:fixed;top:var(--mouse-y);transform:translate(-100%,-50%)}.ds.tooltip>.tooltip-content:not(.floating).top{--horizontal: -50%;bottom:calc(100% + var(--theme-default-padding) / 2);left:50%}.ds.tooltip>.tooltip-content:not(.floating).right{--vertical: 50%;bottom:50%;left:calc(100% + var(--theme-default-padding))}.ds.tooltip>.tooltip-content:not(.floating).bottom{--horizontal: -50%;left:50%;top:calc(100% + var(--theme-default-padding) / 2)}.ds.tooltip>.tooltip-content:not(.floating).left{--vertical: 50%;bottom:50%;right:calc(100% + var(--theme-default-padding))}.ds.tooltip.tooltip-info>.tooltip-content{font-size:calc(var(--s0) * .75rem);max-width:var(--tooltip-content-width, 30rem);white-space:normal}.ds.tooltip.tooltip-info>.tooltip-content pre{white-space:pre-wrap}.ds.tooltip.tooltip-info>.tooltip-content.bottom{--horizontal: 0;left:0;right:auto}.ds.tooltip.tooltip-info-right>.tooltip-content{font-size:calc(var(--s0) * .75rem);max-width:var(--tooltip-content-width, 30rem);white-space:normal}.ds.tooltip.tooltip-info-right>.tooltip-content pre{white-space:pre-wrap}.ds.tooltip.tooltip-info-right>.tooltip-content.bottom{--horizontal: -50%;left:100%;right:auto}.ds.tooltip>.tooltip-trigger-wrapper{cursor:pointer}.ds.tooltip>.tooltip-trigger-wrapper:is(:hover,:focus-visible,:active)+.tooltip-content{opacity:1;transition-delay:.2s;visibility:visible}
|
|
@@ -1,18 +1,18 @@
|
|
|
1
1
|
import { jsxs as o, jsx as t } from "react/jsx-runtime";
|
|
2
2
|
import "react";
|
|
3
3
|
import { P as s } from "../../../../../index-CxkFVI6N.js";
|
|
4
|
-
import { s as
|
|
5
|
-
const
|
|
4
|
+
import { s as f } from "../../../../../exports.module-DmUnHWIJ.js";
|
|
5
|
+
const N = f.base, u = "person", l = ({
|
|
6
6
|
id: i,
|
|
7
7
|
className: n,
|
|
8
8
|
style: c,
|
|
9
9
|
name: a,
|
|
10
10
|
image: m,
|
|
11
11
|
role: e,
|
|
12
|
-
color: g
|
|
13
|
-
|
|
12
|
+
color: g,
|
|
13
|
+
children: d
|
|
14
14
|
}) => {
|
|
15
|
-
const
|
|
15
|
+
const p = (r) => {
|
|
16
16
|
r.target.onerror = null, r.target.src = "/default-avatar.svg";
|
|
17
17
|
};
|
|
18
18
|
return /* @__PURE__ */ o(
|
|
@@ -20,8 +20,8 @@ const f = p.base, N = "person", l = ({
|
|
|
20
20
|
{
|
|
21
21
|
id: i,
|
|
22
22
|
className: [
|
|
23
|
-
f,
|
|
24
23
|
N,
|
|
24
|
+
u,
|
|
25
25
|
n,
|
|
26
26
|
`y-${g}`
|
|
27
27
|
].filter((r) => r).join(" "),
|
|
@@ -33,12 +33,13 @@ const f = p.base, N = "person", l = ({
|
|
|
33
33
|
className: "image v50 mr-v",
|
|
34
34
|
src: m || "/default-avatar.svg",
|
|
35
35
|
alt: `${a}, ${e}`,
|
|
36
|
-
onError:
|
|
36
|
+
onError: p
|
|
37
37
|
}
|
|
38
38
|
),
|
|
39
39
|
/* @__PURE__ */ o("div", { className: "details", children: [
|
|
40
40
|
a && /* @__PURE__ */ t("p", { className: "name", children: a }),
|
|
41
|
-
e && /* @__PURE__ */ t("p", { className: "role", children: e })
|
|
41
|
+
e && /* @__PURE__ */ t("p", { className: "role", children: e }),
|
|
42
|
+
d
|
|
42
43
|
] })
|
|
43
44
|
]
|
|
44
45
|
}
|
|
@@ -1,36 +1,38 @@
|
|
|
1
|
-
import { jsxs as
|
|
2
|
-
import { useEffect as
|
|
1
|
+
import { jsxs as v, jsx as r } from "react/jsx-runtime";
|
|
2
|
+
import { useEffect as y } from "react";
|
|
3
3
|
import { P as e } from "../../../index-CxkFVI6N.js";
|
|
4
|
-
import { s as
|
|
5
|
-
import '../../../assets/Tooltip.css';const b =
|
|
6
|
-
id:
|
|
7
|
-
className:
|
|
8
|
-
style:
|
|
9
|
-
position:
|
|
4
|
+
import { s as g } from "../../../exports.module-DmUnHWIJ.js";
|
|
5
|
+
import '../../../assets/Tooltip.css';const b = g.base, N = "tooltip", n = ({
|
|
6
|
+
id: l,
|
|
7
|
+
className: m,
|
|
8
|
+
style: a,
|
|
9
|
+
position: d,
|
|
10
10
|
isFloating: t,
|
|
11
11
|
color: c,
|
|
12
12
|
description: s,
|
|
13
13
|
content: p,
|
|
14
|
-
children: u
|
|
14
|
+
children: u,
|
|
15
|
+
styleVariant: f
|
|
15
16
|
// ...otherProps
|
|
16
|
-
}) => (
|
|
17
|
-
const o = (
|
|
18
|
-
document.documentElement.style.setProperty("--mouse-x", `${
|
|
17
|
+
}) => (y(() => {
|
|
18
|
+
const o = (i) => {
|
|
19
|
+
document.documentElement.style.setProperty("--mouse-x", `${i.clientX}px`), document.documentElement.style.setProperty("--mouse-y", `${i.clientY}px`);
|
|
19
20
|
};
|
|
20
21
|
return t ? (window.addEventListener("mousemove", o), () => window.removeEventListener("mousemove", o)) : () => window.removeEventListener("mousemove", o);
|
|
21
|
-
}, [t]), /* @__PURE__ */
|
|
22
|
+
}, [t]), /* @__PURE__ */ v(
|
|
22
23
|
"div",
|
|
23
24
|
{
|
|
24
|
-
id:
|
|
25
|
+
id: l,
|
|
25
26
|
className: [
|
|
26
27
|
b,
|
|
27
|
-
|
|
28
|
-
|
|
28
|
+
N,
|
|
29
|
+
m,
|
|
30
|
+
f,
|
|
29
31
|
`x-${c}`
|
|
30
32
|
].filter((o) => o).join(" "),
|
|
31
|
-
style:
|
|
33
|
+
style: a,
|
|
32
34
|
children: [
|
|
33
|
-
/* @__PURE__ */
|
|
35
|
+
/* @__PURE__ */ r(
|
|
34
36
|
"div",
|
|
35
37
|
{
|
|
36
38
|
className: "tooltip-trigger-wrapper",
|
|
@@ -38,12 +40,12 @@ import '../../../assets/Tooltip.css';const b = y.base, g = "tooltip", n = ({
|
|
|
38
40
|
children: u
|
|
39
41
|
}
|
|
40
42
|
),
|
|
41
|
-
/* @__PURE__ */
|
|
43
|
+
/* @__PURE__ */ r(
|
|
42
44
|
"div",
|
|
43
45
|
{
|
|
44
46
|
className: [
|
|
45
47
|
"tooltip-content",
|
|
46
|
-
|
|
48
|
+
d,
|
|
47
49
|
t ? "floating" : ""
|
|
48
50
|
].filter((o) => o).join(" "),
|
|
49
51
|
role: "tooltip",
|
|
@@ -90,7 +92,20 @@ n.propTypes = {
|
|
|
90
92
|
/**
|
|
91
93
|
* The base color of the tooltip
|
|
92
94
|
*/
|
|
93
|
-
color: e.string
|
|
95
|
+
color: e.string,
|
|
96
|
+
/**
|
|
97
|
+
* Style variant for predefined tooltip styles
|
|
98
|
+
*
|
|
99
|
+
* Available variants:
|
|
100
|
+
* - 'tooltip-info': Left-aligned, 30rem max-width, small text
|
|
101
|
+
* - 'tooltip-info-right': Centered on right edge, 30rem max-width
|
|
102
|
+
*
|
|
103
|
+
* See styles.scss for full variant definitions
|
|
104
|
+
*/
|
|
105
|
+
styleVariant: e.oneOf([
|
|
106
|
+
"tooltip-info",
|
|
107
|
+
"tooltip-info-right"
|
|
108
|
+
])
|
|
94
109
|
};
|
|
95
110
|
n.defaultProps = {
|
|
96
111
|
position: "bottom",
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@pareto-engineering/design-system",
|
|
3
|
-
"version": "5.11.
|
|
3
|
+
"version": "5.11.16",
|
|
4
4
|
"description": "",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "./dist/index.js",
|
|
@@ -72,7 +72,7 @@
|
|
|
72
72
|
"@lexical/selection": "0.12.2",
|
|
73
73
|
"@lexical/table": "0.12.2",
|
|
74
74
|
"@lexical/utils": "0.12.2",
|
|
75
|
-
"@pareto-engineering/assets": "^5.11.
|
|
75
|
+
"@pareto-engineering/assets": "^5.11.16",
|
|
76
76
|
"@pareto-engineering/bem": "^5.11.5",
|
|
77
77
|
"@pareto-engineering/styles": "^5.11.5",
|
|
78
78
|
"@types/node": "^22.14.1",
|
|
@@ -105,5 +105,5 @@
|
|
|
105
105
|
"vite-plugin-lib-inject-css": "^2.2.2"
|
|
106
106
|
},
|
|
107
107
|
"browserslist": "> 2%",
|
|
108
|
-
"gitHead": "
|
|
108
|
+
"gitHead": "4f7f74e2e37b1acf14cfd95231974d101903f6f7"
|
|
109
109
|
}
|