@cfx-dev/ui-components 5.0.4 → 5.0.5
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/css/Text.css +1 -1
- package/dist/assets/general/global.css +1 -1
- package/dist/components/Text/Text.js +63 -60
- package/dist/components/Text/Text.types.d.ts +4 -0
- package/dist/styles-scss/tokens.scss +2 -0
- package/dist/utils/ui/ui.types.d.ts +1 -0
- package/dist/utils/ui/ui.types.js +5 -5
- package/package.json +1 -1
|
@@ -1,107 +1,110 @@
|
|
|
1
|
-
import { jsx as
|
|
2
|
-
import { clsx as
|
|
1
|
+
import { jsx as l } from "react/jsx-runtime";
|
|
2
|
+
import { clsx as H } from "../../utils/clsx.js";
|
|
3
3
|
import { getColor as N } from "../../utils/color.js";
|
|
4
4
|
import { ui as t } from "../../utils/ui/ui.js";
|
|
5
|
-
import { TextSizeEnum as
|
|
6
|
-
const O = "cfxui__Text__root__2fe11", P = "
|
|
5
|
+
import { TextSizeEnum as o } from "../../utils/ui/ui.types.js";
|
|
6
|
+
const O = "cfxui__Text__root__2fe11", P = "cfxui__Text__verticalTrimDisabled__34631", V = "cfxui__Text__centered__4d7bd", $ = "cfxui__Text__underlined__5860e", q = "cfxui__Text__strikethrough__e3ee3", w = "cfxui__Text__truncated__417f4", B = "cfxui__Text__typographic__d8155", I = "cfxui__Text__block__cb1b6", r = {
|
|
7
7
|
root: O,
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
8
|
+
verticalTrimDisabled: P,
|
|
9
|
+
centered: V,
|
|
10
|
+
underlined: $,
|
|
11
|
+
strikethrough: q,
|
|
12
|
+
truncated: w,
|
|
13
|
+
typographic: B,
|
|
14
|
+
block: I
|
|
15
|
+
}, L = (e) => e in o ? t.fontSize(e) : typeof e == "number" ? t.q(e) : e, M = (e) => e in o ? t.lineHeight(e) : typeof e == "number" ? e >= 100 ? (e / 100).toFixed(2) : t.lineHeight(o.small) : e, X = (e) => e in o ? t.paragraphSpacing(e) : typeof e == "number" ? t.q(e) : e, j = {
|
|
15
16
|
0: 0,
|
|
16
17
|
25: "var(--text-opacity-25)",
|
|
17
18
|
50: "var(--text-opacity-50)",
|
|
18
19
|
75: "var(--text-opacity-75)",
|
|
19
20
|
100: 1
|
|
20
|
-
},
|
|
21
|
+
}, G = {
|
|
21
22
|
h1: "h1",
|
|
22
23
|
h2: "h2",
|
|
23
24
|
h3: "h3",
|
|
24
25
|
h4: "h4",
|
|
25
26
|
h5: "h5",
|
|
26
27
|
h6: "h6"
|
|
27
|
-
},
|
|
28
|
-
function
|
|
28
|
+
}, U = (e, i = 1) => typeof e == "number" ? e : typeof e == "string" && j[e] || i, W = "primary";
|
|
29
|
+
function Y(e) {
|
|
29
30
|
const {
|
|
30
|
-
family:
|
|
31
|
-
size:
|
|
32
|
-
lineHeight:
|
|
33
|
-
weight:
|
|
31
|
+
family: i,
|
|
32
|
+
size: n = "small",
|
|
33
|
+
lineHeight: a = n,
|
|
34
|
+
weight: p = "regular",
|
|
34
35
|
letterSpacing: u = "small",
|
|
35
36
|
color: f,
|
|
36
37
|
opacity: _,
|
|
37
38
|
as: s = "span",
|
|
38
|
-
centered:
|
|
39
|
-
truncated:
|
|
40
|
-
typographic:
|
|
39
|
+
centered: m = !1,
|
|
40
|
+
truncated: h = !1,
|
|
41
|
+
typographic: g = !1,
|
|
41
42
|
uppercase: d = !1,
|
|
42
43
|
userSelectable: x = !1,
|
|
43
44
|
underlined: y = !1,
|
|
44
45
|
strikethrough: T = !1,
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
46
|
+
verticalTrimDisabled: b = !1,
|
|
47
|
+
children: S,
|
|
48
|
+
className: k,
|
|
49
|
+
style: R,
|
|
50
|
+
ref: v,
|
|
49
51
|
htmlFor: C,
|
|
50
52
|
id: F
|
|
51
|
-
} = e,
|
|
53
|
+
} = e, D = s === "div", z = H(
|
|
52
54
|
r.root,
|
|
53
|
-
|
|
55
|
+
k,
|
|
54
56
|
// TODO: do we need reposive in text now?
|
|
55
57
|
// all sizes is responsive by default
|
|
56
|
-
t.getResponsiveClassnames("font-size",
|
|
57
|
-
t.getResponsiveClassnames("line-height",
|
|
58
|
-
t.getResponsiveClassnames("paragraph-spacing",
|
|
58
|
+
t.getResponsiveClassnames("font-size", n),
|
|
59
|
+
t.getResponsiveClassnames("line-height", n),
|
|
60
|
+
t.getResponsiveClassnames("paragraph-spacing", n),
|
|
59
61
|
{
|
|
60
|
-
[r.block]:
|
|
61
|
-
[r.centered]:
|
|
62
|
-
[r.truncated]:
|
|
62
|
+
[r.block]: D,
|
|
63
|
+
[r.centered]: m,
|
|
64
|
+
[r.truncated]: h,
|
|
63
65
|
[r.underlined]: y,
|
|
64
66
|
[r.strikethrough]: T,
|
|
65
|
-
[r.typographic]:
|
|
67
|
+
[r.typographic]: g,
|
|
68
|
+
[r.verticalTrimDisabled]: b,
|
|
66
69
|
[t.cls.userSelectableText]: x
|
|
67
70
|
}
|
|
68
|
-
),
|
|
71
|
+
), A = N({
|
|
69
72
|
...e,
|
|
70
|
-
color: f ||
|
|
71
|
-
opacity:
|
|
72
|
-
}),
|
|
73
|
-
color:
|
|
74
|
-
fontFamily: `var(--font-family-${
|
|
73
|
+
color: f || W,
|
|
74
|
+
opacity: U(_)
|
|
75
|
+
}), E = typeof i == "string" ? i : G[s] || "primary", c = {
|
|
76
|
+
color: A,
|
|
77
|
+
fontFamily: `var(--font-family-${E})`,
|
|
75
78
|
letterSpacing: `var(--letter-spacing-${u})`,
|
|
76
|
-
fontWeight: `var(--font-weight-${
|
|
77
|
-
...t.getResponsiveStyles("font-size",
|
|
78
|
-
...t.getResponsiveStyles("line-height",
|
|
79
|
-
...t.getResponsiveStyles("paragraph-spacing",
|
|
80
|
-
...
|
|
79
|
+
fontWeight: `var(--font-weight-${p})`,
|
|
80
|
+
...t.getResponsiveStyles("font-size", n, L),
|
|
81
|
+
...t.getResponsiveStyles("line-height", a, M),
|
|
82
|
+
...t.getResponsiveStyles("paragraph-spacing", a, X),
|
|
83
|
+
...R
|
|
81
84
|
};
|
|
82
|
-
return d && (
|
|
85
|
+
return d && (c.textTransform = "uppercase"), /* @__PURE__ */ l(
|
|
83
86
|
s,
|
|
84
87
|
{
|
|
85
|
-
ref:
|
|
88
|
+
ref: v,
|
|
86
89
|
dir: "auto",
|
|
87
|
-
className:
|
|
88
|
-
style:
|
|
90
|
+
className: z,
|
|
91
|
+
style: c,
|
|
89
92
|
htmlFor: C,
|
|
90
93
|
id: F,
|
|
91
|
-
children:
|
|
94
|
+
children: S
|
|
92
95
|
}
|
|
93
96
|
);
|
|
94
97
|
}
|
|
95
|
-
function
|
|
96
|
-
return /* @__PURE__ */
|
|
98
|
+
function re(e) {
|
|
99
|
+
return /* @__PURE__ */ l(Y, { ...e, as: "div" });
|
|
97
100
|
}
|
|
98
101
|
export {
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
102
|
+
W as DEFAULT_TEXT_COLOR,
|
|
103
|
+
j as TEXT_OPACITY_MAP,
|
|
104
|
+
Y as Text,
|
|
105
|
+
re as TextBlock,
|
|
106
|
+
U as getTextOpacity,
|
|
107
|
+
M as lineHeightResponsiveValueFormatter,
|
|
108
|
+
X as paragraphSpacingResponsiveValueFormatter,
|
|
109
|
+
L as textSizeResponsiveValueFormatter
|
|
107
110
|
};
|
|
@@ -20,6 +20,10 @@ interface TextPropsBase {
|
|
|
20
20
|
* If it'll be a multiline text, use this to add extra spacing between lines
|
|
21
21
|
*/
|
|
22
22
|
typographic?: boolean;
|
|
23
|
+
/**
|
|
24
|
+
* Will remove vertical trim feature based on before and after pseudo elements with negative margins
|
|
25
|
+
*/
|
|
26
|
+
verticalTrimDisabled?: boolean;
|
|
23
27
|
/**
|
|
24
28
|
* Allow users to select text
|
|
25
29
|
*/
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
var a = /* @__PURE__ */ ((l) => (l.accent = "accent", l.primary = "primary", l.secondary = "secondary", l.tertiary = "tertiary", l.green = "green", l.yellow = "yellow", l.red = "red", l.argentum = "argentum", l.aurum = "aurum", l.platinum = "platinum", l.bg = "bg", l["bg-light"] = "bg-light", l["bg-dark"] = "bg-dark", l["bg-dark-grey"] = "bg-dark-grey", l["bg-black"] = "bg-black", l))(a || {}), x = /* @__PURE__ */ ((l) => (l.xxsmall = "xxsmall", l.xsmall = "xsmall", l.small = "small", l.medium = "medium", l.large = "large", l.xlarge = "xlarge", l.xxlarge = "xxlarge", l.xxxlarge = "xxxlarge", l.xxxxlarge = "xxxxlarge", l))(x || {}),
|
|
1
|
+
var a = /* @__PURE__ */ ((l) => (l.accent = "accent", l.primary = "primary", l.secondary = "secondary", l.tertiary = "tertiary", l.green = "green", l.yellow = "yellow", l.red = "red", l.argentum = "argentum", l.aurum = "aurum", l.platinum = "platinum", l.bg = "bg", l["bg-light"] = "bg-light", l["bg-dark"] = "bg-dark", l["bg-dark-grey"] = "bg-dark-grey", l["bg-black"] = "bg-black", l))(a || {}), x = /* @__PURE__ */ ((l) => (l.xxxsmall = "xxxsmall", l.xxsmall = "xxsmall", l.xsmall = "xsmall", l.small = "small", l.medium = "medium", l.large = "large", l.xlarge = "xlarge", l.xxlarge = "xxlarge", l.xxxlarge = "xxxlarge", l.xxxxlarge = "xxxxlarge", l))(x || {}), s = /* @__PURE__ */ ((l) => (l.xsmall = "xsmall", l.small = "small", l.medium = "medium", l.large = "large", l.xlarge = "xlarge", l))(s || {}), r = /* @__PURE__ */ ((l) => (l.none = "none", l.xsmall = "xsmall", l.small = "small", l.medium = "medium", l.large = "large", l.xlarge = "xlarge", l.pill = "pill", l))(r || {}), g = /* @__PURE__ */ ((l) => (l.zero = "zero", l.first = "first", l.second = "second", l.max = "max", l))(g || {}), e = /* @__PURE__ */ ((l) => (l.none = "none", l.hairthin = "hairthin", l.thin = "thin", l.xxsmall = "xxsmall", l.xsmall = "xsmall", l.small = "small", l.normal = "normal", l.medium = "medium", l.large = "large", l.xlarge = "xlarge", l.safezone = "safezone", l))(e || {}), p = /* @__PURE__ */ ((l) => (l.xxsmall = "xxsmall", l.xsmall = "xsmall", l.small = "small", l.medium = "medium", l.large = "large", l.xlarge = "xlarge", l.xxlarge = "xxlarge", l.xxxlarge = "xxxlarge", l.xxxxlarge = "xxxxlarge", l.xxxxxlarge = "xxxxxlarge", l))(p || {}), t = /* @__PURE__ */ ((l) => (l.sp25 = "sp25", l.sp100 = "sp100", l.sp110 = "sp110", l.sp150 = "sp150", l.sp175 = "sp175", l.sp200 = "sp200", l.sp250 = "sp250", l.sp300 = "sp300", l.sp400 = "sp400", l.sp450 = "sp450", l.sp600 = "sp600", l.sp700 = "sp700", l.sp800 = "sp800", l.sp900 = "sp900", l.sp1000 = "sp1000", l.sp1200 = "sp1200", l.sp1600 = "sp1600", l.sp2400 = "sp2400", l))(t || {}), b = /* @__PURE__ */ ((l) => (l.initial = "initial", l.small = "small", l["small-medium"] = "small-medium", l.medium = "medium", l["medium-large"] = "medium-large", l.large = "large", l.xlarge = "xlarge", l))(b || {});
|
|
2
2
|
const d = {
|
|
3
3
|
initial: 0,
|
|
4
4
|
small: 360,
|
|
@@ -9,14 +9,14 @@ const d = {
|
|
|
9
9
|
xlarge: 2560
|
|
10
10
|
};
|
|
11
11
|
export {
|
|
12
|
-
|
|
12
|
+
r as BorderRadiusEnum,
|
|
13
13
|
a as ColorEnum,
|
|
14
|
-
|
|
14
|
+
s as IconSizeEnum,
|
|
15
15
|
b as MediaQueryEnum,
|
|
16
16
|
d as MediaQueryValuesMap,
|
|
17
|
-
|
|
17
|
+
e as OffsetEnum,
|
|
18
18
|
p as SpacerEnum,
|
|
19
19
|
t as SpacingEnum,
|
|
20
20
|
x as TextSizeEnum,
|
|
21
|
-
|
|
21
|
+
g as ZIndexEnum
|
|
22
22
|
};
|