@telegraph/style-engine 0.3.2 → 0.3.3

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,148 +1,402 @@
1
- import _ from "react";
2
- const I = { transparent: "var(--tgph-transparent)", white: "var(--tgph-white)", black: "var(--tgph-black)", "surface-1": "var(--tgph-surface-1)", "surface-2": "var(--tgph-surface-2)", "surface-3": "var(--tgph-surface-3)", "alpha-white-1": "var(--tgph-alpha-white-1)", "alpha-white-2": "var(--tgph-alpha-white-2)", "alpha-white-3": "var(--tgph-alpha-white-3)", "alpha-white-4": "var(--tgph-alpha-white-4)", "alpha-white-5": "var(--tgph-alpha-white-5)", "alpha-white-6": "var(--tgph-alpha-white-6)", "alpha-white-7": "var(--tgph-alpha-white-7)", "alpha-white-8": "var(--tgph-alpha-white-8)", "alpha-white-9": "var(--tgph-alpha-white-9)", "alpha-white-10": "var(--tgph-alpha-white-10)", "alpha-white-11": "var(--tgph-alpha-white-11)", "alpha-white-12": "var(--tgph-alpha-white-12)", "alpha-black-1": "var(--tgph-alpha-black-1)", "alpha-black-2": "var(--tgph-alpha-black-2)", "alpha-black-3": "var(--tgph-alpha-black-3)", "alpha-black-4": "var(--tgph-alpha-black-4)", "alpha-black-5": "var(--tgph-alpha-black-5)", "alpha-black-6": "var(--tgph-alpha-black-6)", "alpha-black-7": "var(--tgph-alpha-black-7)", "alpha-black-8": "var(--tgph-alpha-black-8)", "alpha-black-9": "var(--tgph-alpha-black-9)", "alpha-black-10": "var(--tgph-alpha-black-10)", "alpha-black-11": "var(--tgph-alpha-black-11)", "alpha-black-12": "var(--tgph-alpha-black-12)", "gray-1": "var(--tgph-gray-1)", "gray-2": "var(--tgph-gray-2)", "gray-3": "var(--tgph-gray-3)", "gray-4": "var(--tgph-gray-4)", "gray-5": "var(--tgph-gray-5)", "gray-6": "var(--tgph-gray-6)", "gray-7": "var(--tgph-gray-7)", "gray-8": "var(--tgph-gray-8)", "gray-9": "var(--tgph-gray-9)", "gray-10": "var(--tgph-gray-10)", "gray-11": "var(--tgph-gray-11)", "gray-12": "var(--tgph-gray-12)", "beige-1": "var(--tgph-beige-1)", "beige-2": "var(--tgph-beige-2)", "beige-3": "var(--tgph-beige-3)", "beige-4": "var(--tgph-beige-4)", "beige-5": "var(--tgph-beige-5)", "beige-6": "var(--tgph-beige-6)", "beige-7": "var(--tgph-beige-7)", "beige-8": "var(--tgph-beige-8)", "beige-9": "var(--tgph-beige-9)", "beige-10": "var(--tgph-beige-10)", "beige-11": "var(--tgph-beige-11)", "beige-12": "var(--tgph-beige-12)", "accent-1": "var(--tgph-accent-1)", "accent-2": "var(--tgph-accent-2)", "accent-3": "var(--tgph-accent-3)", "accent-4": "var(--tgph-accent-4)", "accent-5": "var(--tgph-accent-5)", "accent-6": "var(--tgph-accent-6)", "accent-7": "var(--tgph-accent-7)", "accent-8": "var(--tgph-accent-8)", "accent-9": "var(--tgph-accent-9)", "accent-10": "var(--tgph-accent-10)", "accent-11": "var(--tgph-accent-11)", "accent-12": "var(--tgph-accent-12)", "green-1": "var(--tgph-green-1)", "green-2": "var(--tgph-green-2)", "green-3": "var(--tgph-green-3)", "green-4": "var(--tgph-green-4)", "green-5": "var(--tgph-green-5)", "green-6": "var(--tgph-green-6)", "green-7": "var(--tgph-green-7)", "green-8": "var(--tgph-green-8)", "green-9": "var(--tgph-green-9)", "green-10": "var(--tgph-green-10)", "green-11": "var(--tgph-green-11)", "green-12": "var(--tgph-green-12)", "yellow-1": "var(--tgph-yellow-1)", "yellow-2": "var(--tgph-yellow-2)", "yellow-3": "var(--tgph-yellow-3)", "yellow-4": "var(--tgph-yellow-4)", "yellow-5": "var(--tgph-yellow-5)", "yellow-6": "var(--tgph-yellow-6)", "yellow-7": "var(--tgph-yellow-7)", "yellow-8": "var(--tgph-yellow-8)", "yellow-9": "var(--tgph-yellow-9)", "yellow-10": "var(--tgph-yellow-10)", "yellow-11": "var(--tgph-yellow-11)", "yellow-12": "var(--tgph-yellow-12)", "blue-1": "var(--tgph-blue-1)", "blue-2": "var(--tgph-blue-2)", "blue-3": "var(--tgph-blue-3)", "blue-4": "var(--tgph-blue-4)", "blue-5": "var(--tgph-blue-5)", "blue-6": "var(--tgph-blue-6)", "blue-7": "var(--tgph-blue-7)", "blue-8": "var(--tgph-blue-8)", "blue-9": "var(--tgph-blue-9)", "blue-10": "var(--tgph-blue-10)", "blue-11": "var(--tgph-blue-11)", "blue-12": "var(--tgph-blue-12)", "red-1": "var(--tgph-red-1)", "red-2": "var(--tgph-red-2)", "red-3": "var(--tgph-red-3)", "red-4": "var(--tgph-red-4)", "red-5": "var(--tgph-red-5)", "red-6": "var(--tgph-red-6)", "red-7": "var(--tgph-red-7)", "red-8": "var(--tgph-red-8)", "red-9": "var(--tgph-red-9)", "red-10": "var(--tgph-red-10)", "red-11": "var(--tgph-red-11)", "red-12": "var(--tgph-red-12)", "purple-1": "var(--tgph-purple-1)", "purple-2": "var(--tgph-purple-2)", "purple-3": "var(--tgph-purple-3)", "purple-4": "var(--tgph-purple-4)", "purple-5": "var(--tgph-purple-5)", "purple-6": "var(--tgph-purple-6)", "purple-7": "var(--tgph-purple-7)", "purple-8": "var(--tgph-purple-8)", "purple-9": "var(--tgph-purple-9)", "purple-10": "var(--tgph-purple-10)", "purple-11": "var(--tgph-purple-11)", "purple-12": "var(--tgph-purple-12)" }, O = { 0: "var(--tgph-rounded-0)", 1: "var(--tgph-rounded-1)", 2: "var(--tgph-rounded-2)", 3: "var(--tgph-rounded-3)", 4: "var(--tgph-rounded-4)", 5: "var(--tgph-rounded-5)", 6: "var(--tgph-rounded-6)", full: "var(--tgph-rounded-full)" }, z = { 0: "var(--tgph-shadow-0)", 1: "var(--tgph-shadow-1)", 2: "var(--tgph-shadow-2)", 3: "var(--tgph-shadow-3)", inner: "var(--tgph-shadow-inner)" }, j = { 0: "var(--tgph-spacing-0)", 1: "var(--tgph-spacing-1)", 2: "var(--tgph-spacing-2)", 3: "var(--tgph-spacing-3)", 4: "var(--tgph-spacing-4)", 5: "var(--tgph-spacing-5)", 6: "var(--tgph-spacing-6)", 7: "var(--tgph-spacing-7)", 8: "var(--tgph-spacing-8)", 9: "var(--tgph-spacing-9)", 10: "var(--tgph-spacing-10)", 11: "var(--tgph-spacing-11)", 12: "var(--tgph-spacing-12)", 14: "var(--tgph-spacing-14)", 16: "var(--tgph-spacing-16)", 20: "var(--tgph-spacing-20)", 24: "var(--tgph-spacing-24)", 28: "var(--tgph-spacing-28)", 32: "var(--tgph-spacing-32)", 36: "var(--tgph-spacing-36)", 40: "var(--tgph-spacing-40)", 44: "var(--tgph-spacing-44)", 48: "var(--tgph-spacing-48)", 52: "var(--tgph-spacing-52)", 56: "var(--tgph-spacing-56)", 60: "var(--tgph-spacing-60)", 64: "var(--tgph-spacing-64)", 72: "var(--tgph-spacing-72)", 80: "var(--tgph-spacing-80)", 96: "var(--tgph-spacing-96)", 120: "var(--tgph-spacing-120)", 140: "var(--tgph-spacing-140)", 160: "var(--tgph-spacing-160)", px: "var(--tgph-spacing-px)", "0_5": "var(--tgph-spacing-0_5)", "1_5": "var(--tgph-spacing-1_5)", "2_5": "var(--tgph-spacing-2_5)", "3_5": "var(--tgph-spacing-3_5)", full: "var(--tgph-spacing-full)", auto: "var(--tgph-spacing-auto)" }, S = { sans: "var(--tgph-family-sans)", mono: "var(--tgph-family-mono)" }, E = { 0: "var(--tgph-leading-0)", 1: "var(--tgph-leading-1)", 2: "var(--tgph-leading-2)", 3: "var(--tgph-leading-3)", 4: "var(--tgph-leading-4)", 5: "var(--tgph-leading-5)", 6: "var(--tgph-leading-6)", 7: "var(--tgph-leading-7)", 8: "var(--tgph-leading-8)", 9: "var(--tgph-leading-9)", "code-0": "var(--tgph-leading-code-0)", "code-1": "var(--tgph-leading-code-1)", "code-2": "var(--tgph-leading-code-2)", "code-3": "var(--tgph-leading-code-3)", "code-4": "var(--tgph-leading-code-4)", "code-5": "var(--tgph-leading-code-5)", "code-6": "var(--tgph-leading-code-6)", "code-7": "var(--tgph-leading-code-7)", "code-8": "var(--tgph-leading-code-8)", "code-9": "var(--tgph-leading-code-9)" }, $ = { 0: "var(--tgph-tracking-0)", 1: "var(--tgph-tracking-1)", 2: "var(--tgph-tracking-2)", 3: "var(--tgph-tracking-3)", 4: "var(--tgph-tracking-4)", 5: "var(--tgph-tracking-5)", 6: "var(--tgph-tracking-6)", 7: "var(--tgph-tracking-7)", 8: "var(--tgph-tracking-8)", 9: "var(--tgph-tracking-9)" }, A = { 0: "var(--tgph-text-0)", 1: "var(--tgph-text-1)", 2: "var(--tgph-text-2)", 3: "var(--tgph-text-3)", 4: "var(--tgph-text-4)", 5: "var(--tgph-text-5)", 6: "var(--tgph-text-6)", 7: "var(--tgph-text-7)", 8: "var(--tgph-text-8)", 9: "var(--tgph-text-9)", "code-0": "var(--tgph-text-code-0)", "code-1": "var(--tgph-text-code-1)", "code-2": "var(--tgph-text-code-2)", "code-4": "var(--tgph-text-code-4)", "code-5": "var(--tgph-text-code-5)", "code-6": "var(--tgph-text-code-6)", "code-7": "var(--tgph-text-code-7)", "code-8": "var(--tgph-text-code-8)", "code-9": "var(--tgph-text-code-9)" }, N = { regular: "var(--tgph-weight-regular)", medium: "var(--tgph-weight-medium)", "semi-bold": "var(--tgph-weight-semi-bold)" }, C = { sm: "var(--tgph-breakpoint-sm)", md: "var(--tgph-breakpoint-md)", lg: "var(--tgph-breakpoint-lg)", xl: "var(--tgph-breakpoint-xl)", "2xl": "var(--tgph-breakpoint-2xl)" }, D = { hidden: "var(--tgph-zIndex-hidden)", base: "var(--tgph-zIndex-base)", auto: "var(--tgph-zIndex-auto)", dropdown: "var(--tgph-zIndex-dropdown)", sticky: "var(--tgph-zIndex-sticky)", banner: "var(--tgph-zIndex-banner)", overlay: "var(--tgph-zIndex-overlay)", modal: "var(--tgph-zIndex-modal)", popover: "var(--tgph-zIndex-popover)", skipLink: "var(--tgph-zIndex-skipLink)", toast: "var(--tgph-zIndex-toast)", tooltip: "var(--tgph-zIndex-tooltip)" }, X = {
3
- "border-style": { solid: "var(--tgph-border-style-solid)", dashed: "var(--tgph-border-style-dashed)" },
4
- color: I,
5
- rounded: O,
6
- shadow: z,
7
- spacing: j,
8
- family: S,
9
- leading: E,
10
- tracking: $,
11
- text: A,
12
- weight: N,
13
- breakpoint: C,
14
- zIndex: D
15
- }, L = [
16
- "_hover",
17
- "_focus",
18
- "_active",
19
- "_focusWithin",
20
- "_disabled"
21
- ], R = {
22
- _hover: "hover",
23
- _focus: "focus",
24
- _active: "active",
25
- _focusWithin: "focus-within",
26
- _disabled: "disabled"
27
- }, W = (e) => {
28
- const a = [];
29
- let t = "", g = 0;
30
- for (let p = 0; p < e.length; p++) {
31
- const h = e[p];
32
- h === "(" ? (g++, t += h) : h === ")" ? (g--, t += h) : h === " " && g === 0 ? t && (a.push(t), t = "") : t += h;
33
- }
34
- for (t && a.push(t); a.length < 4; )
35
- a.push("0");
36
- return [
37
- a[0] || "0",
38
- a[1] || "0",
39
- a[2] || "0",
40
- a[3] || "0"
41
- ];
42
- }, B = ({
43
- currentValueOfCssVar: e = "0 0 0 0",
44
- value: a,
45
- direction: t
46
- }) => {
47
- const [g, p, h, c] = W(e), r = {
48
- top: g,
49
- right: p,
50
- bottom: h,
51
- left: c
52
- };
53
- return t === "top" && (r.top = a), t === "right" && (r.right = a), t === "bottom" && (r.bottom = a), t === "left" && (r.left = a), t === "all" && (r.top = a, r.right = a, r.bottom = a, r.left = a), t === "x" && (r.left = a, r.right = a), t === "y" && (r.top = a, r.bottom = a), t === "side-top" && (r.top = a, r.right = a), t === "side-bottom" && (r.bottom = a, r.left = a), t === "side-left" && (r.top = a, r.left = a), t === "side-right" && (r.right = a, r.bottom = a), Object.values(r).join(" ");
54
- }, T = ({
55
- currentValueOfCssVar: e = "visible visible",
56
- value: a,
57
- axis: t
58
- }) => {
59
- const [g, p] = e.split(" ");
60
- return t === "x" ? `${a} ${p}` : t === "y" ? `${g} ${a}` : `${a} ${a}`;
61
- }, u = (e, a) => {
62
- if (typeof a == "string" && a.startsWith("-")) {
63
- const g = a.slice(1);
64
- return `calc(-1 * ${e.value.replace("VARIABLE", g)})`;
65
- }
66
- return e.value.replace("VARIABLE", a);
67
- }, f = (e, a, t, g) => {
68
- const p = g ?? a.cssVar;
69
- if (a.direction) {
70
- const h = e == null ? void 0 : e[p], c = B({
71
- currentValueOfCssVar: h,
72
- value: t,
73
- direction: a.direction
74
- });
75
- return { ...e, [p]: c };
76
- }
77
- if (a.axis) {
78
- const h = e == null ? void 0 : e[p], c = T({
79
- currentValueOfCssVar: h,
80
- value: t,
81
- axis: a.axis
82
- });
83
- return { ...e, [p]: c };
84
- }
85
- return { ...e, [p]: t };
86
- }, U = (e, a) => {
87
- const t = R[a], g = e.replace(/^--/, "");
88
- return `--${t}--${g}`;
89
- }, F = (e) => {
90
- const { cssVars: a } = e;
91
- if (!(e != null && e.props) || Object.keys(e.props).length === 0)
92
- return { styleProp: {}, otherProps: {}, interactive: !1 };
93
- const { style: t = {}, ...g } = e.props;
94
- let p = t;
95
- const h = {};
96
- let c = !1;
97
- return Object.keys(g).forEach((r) => {
98
- const n = r;
99
- if (L.includes(r) && typeof g[n] == "object" && g[n] !== null) {
100
- const k = r, s = g[n], v = {};
101
- if (Object.keys(s).forEach((l) => {
102
- const d = s[l];
103
- if (!d) return;
104
- const x = l, i = a == null ? void 0 : a[x];
105
- if (!i) {
106
- v[l] = d;
107
- return;
108
- }
109
- const m = u(i, d), V = U(
110
- i.cssVar,
111
- k
112
- );
113
- p = f(
114
- p,
115
- i,
116
- m,
117
- V
118
- );
119
- }), Object.keys(v).length > 0) {
120
- const l = h[r] || {};
121
- Object.assign(h, {
122
- [r]: { ...l, ...v }
123
- });
124
- }
125
- Object.keys(s).length > Object.keys(v).length && (c = !0);
126
- return;
127
- }
128
- const w = n, o = a == null ? void 0 : a[w];
129
- if (!o) {
130
- Object.assign(h, { [n]: g[n] });
131
- return;
132
- }
133
- const b = g == null ? void 0 : g[n];
134
- if (!b) {
135
- Object.assign(p, { [n]: g[n] });
136
- return;
137
- }
138
- const y = u(o, b);
139
- p = f(p, o, y);
140
- }), { styleProp: p, otherProps: h, interactive: c };
141
- }, q = (e) => _.useMemo(() => F(e), [e]);
142
- export {
143
- L as PSEUDO_STATES,
144
- F as getStyleProp,
145
- X as tokens,
146
- q as useStyleEngine
147
- };
148
- //# sourceMappingURL=index.mjs.map
1
+ import e from "react";
2
+ var t = {
3
+ "border-style": {
4
+ solid: "var(--tgph-border-style-solid)",
5
+ dashed: "var(--tgph-border-style-dashed)"
6
+ },
7
+ color: {
8
+ transparent: "var(--tgph-transparent)",
9
+ white: "var(--tgph-white)",
10
+ black: "var(--tgph-black)",
11
+ "surface-1": "var(--tgph-surface-1)",
12
+ "surface-2": "var(--tgph-surface-2)",
13
+ "surface-3": "var(--tgph-surface-3)",
14
+ "alpha-white-1": "var(--tgph-alpha-white-1)",
15
+ "alpha-white-2": "var(--tgph-alpha-white-2)",
16
+ "alpha-white-3": "var(--tgph-alpha-white-3)",
17
+ "alpha-white-4": "var(--tgph-alpha-white-4)",
18
+ "alpha-white-5": "var(--tgph-alpha-white-5)",
19
+ "alpha-white-6": "var(--tgph-alpha-white-6)",
20
+ "alpha-white-7": "var(--tgph-alpha-white-7)",
21
+ "alpha-white-8": "var(--tgph-alpha-white-8)",
22
+ "alpha-white-9": "var(--tgph-alpha-white-9)",
23
+ "alpha-white-10": "var(--tgph-alpha-white-10)",
24
+ "alpha-white-11": "var(--tgph-alpha-white-11)",
25
+ "alpha-white-12": "var(--tgph-alpha-white-12)",
26
+ "alpha-black-1": "var(--tgph-alpha-black-1)",
27
+ "alpha-black-2": "var(--tgph-alpha-black-2)",
28
+ "alpha-black-3": "var(--tgph-alpha-black-3)",
29
+ "alpha-black-4": "var(--tgph-alpha-black-4)",
30
+ "alpha-black-5": "var(--tgph-alpha-black-5)",
31
+ "alpha-black-6": "var(--tgph-alpha-black-6)",
32
+ "alpha-black-7": "var(--tgph-alpha-black-7)",
33
+ "alpha-black-8": "var(--tgph-alpha-black-8)",
34
+ "alpha-black-9": "var(--tgph-alpha-black-9)",
35
+ "alpha-black-10": "var(--tgph-alpha-black-10)",
36
+ "alpha-black-11": "var(--tgph-alpha-black-11)",
37
+ "alpha-black-12": "var(--tgph-alpha-black-12)",
38
+ "gray-1": "var(--tgph-gray-1)",
39
+ "gray-2": "var(--tgph-gray-2)",
40
+ "gray-3": "var(--tgph-gray-3)",
41
+ "gray-4": "var(--tgph-gray-4)",
42
+ "gray-5": "var(--tgph-gray-5)",
43
+ "gray-6": "var(--tgph-gray-6)",
44
+ "gray-7": "var(--tgph-gray-7)",
45
+ "gray-8": "var(--tgph-gray-8)",
46
+ "gray-9": "var(--tgph-gray-9)",
47
+ "gray-10": "var(--tgph-gray-10)",
48
+ "gray-11": "var(--tgph-gray-11)",
49
+ "gray-12": "var(--tgph-gray-12)",
50
+ "beige-1": "var(--tgph-beige-1)",
51
+ "beige-2": "var(--tgph-beige-2)",
52
+ "beige-3": "var(--tgph-beige-3)",
53
+ "beige-4": "var(--tgph-beige-4)",
54
+ "beige-5": "var(--tgph-beige-5)",
55
+ "beige-6": "var(--tgph-beige-6)",
56
+ "beige-7": "var(--tgph-beige-7)",
57
+ "beige-8": "var(--tgph-beige-8)",
58
+ "beige-9": "var(--tgph-beige-9)",
59
+ "beige-10": "var(--tgph-beige-10)",
60
+ "beige-11": "var(--tgph-beige-11)",
61
+ "beige-12": "var(--tgph-beige-12)",
62
+ "accent-1": "var(--tgph-accent-1)",
63
+ "accent-2": "var(--tgph-accent-2)",
64
+ "accent-3": "var(--tgph-accent-3)",
65
+ "accent-4": "var(--tgph-accent-4)",
66
+ "accent-5": "var(--tgph-accent-5)",
67
+ "accent-6": "var(--tgph-accent-6)",
68
+ "accent-7": "var(--tgph-accent-7)",
69
+ "accent-8": "var(--tgph-accent-8)",
70
+ "accent-9": "var(--tgph-accent-9)",
71
+ "accent-10": "var(--tgph-accent-10)",
72
+ "accent-11": "var(--tgph-accent-11)",
73
+ "accent-12": "var(--tgph-accent-12)",
74
+ "green-1": "var(--tgph-green-1)",
75
+ "green-2": "var(--tgph-green-2)",
76
+ "green-3": "var(--tgph-green-3)",
77
+ "green-4": "var(--tgph-green-4)",
78
+ "green-5": "var(--tgph-green-5)",
79
+ "green-6": "var(--tgph-green-6)",
80
+ "green-7": "var(--tgph-green-7)",
81
+ "green-8": "var(--tgph-green-8)",
82
+ "green-9": "var(--tgph-green-9)",
83
+ "green-10": "var(--tgph-green-10)",
84
+ "green-11": "var(--tgph-green-11)",
85
+ "green-12": "var(--tgph-green-12)",
86
+ "yellow-1": "var(--tgph-yellow-1)",
87
+ "yellow-2": "var(--tgph-yellow-2)",
88
+ "yellow-3": "var(--tgph-yellow-3)",
89
+ "yellow-4": "var(--tgph-yellow-4)",
90
+ "yellow-5": "var(--tgph-yellow-5)",
91
+ "yellow-6": "var(--tgph-yellow-6)",
92
+ "yellow-7": "var(--tgph-yellow-7)",
93
+ "yellow-8": "var(--tgph-yellow-8)",
94
+ "yellow-9": "var(--tgph-yellow-9)",
95
+ "yellow-10": "var(--tgph-yellow-10)",
96
+ "yellow-11": "var(--tgph-yellow-11)",
97
+ "yellow-12": "var(--tgph-yellow-12)",
98
+ "blue-1": "var(--tgph-blue-1)",
99
+ "blue-2": "var(--tgph-blue-2)",
100
+ "blue-3": "var(--tgph-blue-3)",
101
+ "blue-4": "var(--tgph-blue-4)",
102
+ "blue-5": "var(--tgph-blue-5)",
103
+ "blue-6": "var(--tgph-blue-6)",
104
+ "blue-7": "var(--tgph-blue-7)",
105
+ "blue-8": "var(--tgph-blue-8)",
106
+ "blue-9": "var(--tgph-blue-9)",
107
+ "blue-10": "var(--tgph-blue-10)",
108
+ "blue-11": "var(--tgph-blue-11)",
109
+ "blue-12": "var(--tgph-blue-12)",
110
+ "red-1": "var(--tgph-red-1)",
111
+ "red-2": "var(--tgph-red-2)",
112
+ "red-3": "var(--tgph-red-3)",
113
+ "red-4": "var(--tgph-red-4)",
114
+ "red-5": "var(--tgph-red-5)",
115
+ "red-6": "var(--tgph-red-6)",
116
+ "red-7": "var(--tgph-red-7)",
117
+ "red-8": "var(--tgph-red-8)",
118
+ "red-9": "var(--tgph-red-9)",
119
+ "red-10": "var(--tgph-red-10)",
120
+ "red-11": "var(--tgph-red-11)",
121
+ "red-12": "var(--tgph-red-12)",
122
+ "purple-1": "var(--tgph-purple-1)",
123
+ "purple-2": "var(--tgph-purple-2)",
124
+ "purple-3": "var(--tgph-purple-3)",
125
+ "purple-4": "var(--tgph-purple-4)",
126
+ "purple-5": "var(--tgph-purple-5)",
127
+ "purple-6": "var(--tgph-purple-6)",
128
+ "purple-7": "var(--tgph-purple-7)",
129
+ "purple-8": "var(--tgph-purple-8)",
130
+ "purple-9": "var(--tgph-purple-9)",
131
+ "purple-10": "var(--tgph-purple-10)",
132
+ "purple-11": "var(--tgph-purple-11)",
133
+ "purple-12": "var(--tgph-purple-12)"
134
+ },
135
+ rounded: {
136
+ 0: "var(--tgph-rounded-0)",
137
+ 1: "var(--tgph-rounded-1)",
138
+ 2: "var(--tgph-rounded-2)",
139
+ 3: "var(--tgph-rounded-3)",
140
+ 4: "var(--tgph-rounded-4)",
141
+ 5: "var(--tgph-rounded-5)",
142
+ 6: "var(--tgph-rounded-6)",
143
+ full: "var(--tgph-rounded-full)"
144
+ },
145
+ shadow: {
146
+ 0: "var(--tgph-shadow-0)",
147
+ 1: "var(--tgph-shadow-1)",
148
+ 2: "var(--tgph-shadow-2)",
149
+ 3: "var(--tgph-shadow-3)",
150
+ inner: "var(--tgph-shadow-inner)"
151
+ },
152
+ spacing: {
153
+ 0: "var(--tgph-spacing-0)",
154
+ 1: "var(--tgph-spacing-1)",
155
+ 2: "var(--tgph-spacing-2)",
156
+ 3: "var(--tgph-spacing-3)",
157
+ 4: "var(--tgph-spacing-4)",
158
+ 5: "var(--tgph-spacing-5)",
159
+ 6: "var(--tgph-spacing-6)",
160
+ 7: "var(--tgph-spacing-7)",
161
+ 8: "var(--tgph-spacing-8)",
162
+ 9: "var(--tgph-spacing-9)",
163
+ 10: "var(--tgph-spacing-10)",
164
+ 11: "var(--tgph-spacing-11)",
165
+ 12: "var(--tgph-spacing-12)",
166
+ 14: "var(--tgph-spacing-14)",
167
+ 16: "var(--tgph-spacing-16)",
168
+ 20: "var(--tgph-spacing-20)",
169
+ 24: "var(--tgph-spacing-24)",
170
+ 28: "var(--tgph-spacing-28)",
171
+ 32: "var(--tgph-spacing-32)",
172
+ 36: "var(--tgph-spacing-36)",
173
+ 40: "var(--tgph-spacing-40)",
174
+ 44: "var(--tgph-spacing-44)",
175
+ 48: "var(--tgph-spacing-48)",
176
+ 52: "var(--tgph-spacing-52)",
177
+ 56: "var(--tgph-spacing-56)",
178
+ 60: "var(--tgph-spacing-60)",
179
+ 64: "var(--tgph-spacing-64)",
180
+ 72: "var(--tgph-spacing-72)",
181
+ 80: "var(--tgph-spacing-80)",
182
+ 96: "var(--tgph-spacing-96)",
183
+ 120: "var(--tgph-spacing-120)",
184
+ 140: "var(--tgph-spacing-140)",
185
+ 160: "var(--tgph-spacing-160)",
186
+ px: "var(--tgph-spacing-px)",
187
+ "0_5": "var(--tgph-spacing-0_5)",
188
+ "1_5": "var(--tgph-spacing-1_5)",
189
+ "2_5": "var(--tgph-spacing-2_5)",
190
+ "3_5": "var(--tgph-spacing-3_5)",
191
+ full: "var(--tgph-spacing-full)",
192
+ auto: "var(--tgph-spacing-auto)"
193
+ },
194
+ family: {
195
+ sans: "var(--tgph-family-sans)",
196
+ mono: "var(--tgph-family-mono)"
197
+ },
198
+ leading: {
199
+ 0: "var(--tgph-leading-0)",
200
+ 1: "var(--tgph-leading-1)",
201
+ 2: "var(--tgph-leading-2)",
202
+ 3: "var(--tgph-leading-3)",
203
+ 4: "var(--tgph-leading-4)",
204
+ 5: "var(--tgph-leading-5)",
205
+ 6: "var(--tgph-leading-6)",
206
+ 7: "var(--tgph-leading-7)",
207
+ 8: "var(--tgph-leading-8)",
208
+ 9: "var(--tgph-leading-9)",
209
+ "code-0": "var(--tgph-leading-code-0)",
210
+ "code-1": "var(--tgph-leading-code-1)",
211
+ "code-2": "var(--tgph-leading-code-2)",
212
+ "code-3": "var(--tgph-leading-code-3)",
213
+ "code-4": "var(--tgph-leading-code-4)",
214
+ "code-5": "var(--tgph-leading-code-5)",
215
+ "code-6": "var(--tgph-leading-code-6)",
216
+ "code-7": "var(--tgph-leading-code-7)",
217
+ "code-8": "var(--tgph-leading-code-8)",
218
+ "code-9": "var(--tgph-leading-code-9)"
219
+ },
220
+ tracking: {
221
+ 0: "var(--tgph-tracking-0)",
222
+ 1: "var(--tgph-tracking-1)",
223
+ 2: "var(--tgph-tracking-2)",
224
+ 3: "var(--tgph-tracking-3)",
225
+ 4: "var(--tgph-tracking-4)",
226
+ 5: "var(--tgph-tracking-5)",
227
+ 6: "var(--tgph-tracking-6)",
228
+ 7: "var(--tgph-tracking-7)",
229
+ 8: "var(--tgph-tracking-8)",
230
+ 9: "var(--tgph-tracking-9)"
231
+ },
232
+ text: {
233
+ 0: "var(--tgph-text-0)",
234
+ 1: "var(--tgph-text-1)",
235
+ 2: "var(--tgph-text-2)",
236
+ 3: "var(--tgph-text-3)",
237
+ 4: "var(--tgph-text-4)",
238
+ 5: "var(--tgph-text-5)",
239
+ 6: "var(--tgph-text-6)",
240
+ 7: "var(--tgph-text-7)",
241
+ 8: "var(--tgph-text-8)",
242
+ 9: "var(--tgph-text-9)",
243
+ "code-0": "var(--tgph-text-code-0)",
244
+ "code-1": "var(--tgph-text-code-1)",
245
+ "code-2": "var(--tgph-text-code-2)",
246
+ "code-4": "var(--tgph-text-code-4)",
247
+ "code-5": "var(--tgph-text-code-5)",
248
+ "code-6": "var(--tgph-text-code-6)",
249
+ "code-7": "var(--tgph-text-code-7)",
250
+ "code-8": "var(--tgph-text-code-8)",
251
+ "code-9": "var(--tgph-text-code-9)"
252
+ },
253
+ weight: {
254
+ regular: "var(--tgph-weight-regular)",
255
+ medium: "var(--tgph-weight-medium)",
256
+ "semi-bold": "var(--tgph-weight-semi-bold)"
257
+ },
258
+ breakpoint: {
259
+ sm: "var(--tgph-breakpoint-sm)",
260
+ md: "var(--tgph-breakpoint-md)",
261
+ lg: "var(--tgph-breakpoint-lg)",
262
+ xl: "var(--tgph-breakpoint-xl)",
263
+ "2xl": "var(--tgph-breakpoint-2xl)"
264
+ },
265
+ zIndex: {
266
+ hidden: "var(--tgph-zIndex-hidden)",
267
+ base: "var(--tgph-zIndex-base)",
268
+ auto: "var(--tgph-zIndex-auto)",
269
+ dropdown: "var(--tgph-zIndex-dropdown)",
270
+ sticky: "var(--tgph-zIndex-sticky)",
271
+ banner: "var(--tgph-zIndex-banner)",
272
+ overlay: "var(--tgph-zIndex-overlay)",
273
+ modal: "var(--tgph-zIndex-modal)",
274
+ popover: "var(--tgph-zIndex-popover)",
275
+ skipLink: "var(--tgph-zIndex-skipLink)",
276
+ toast: "var(--tgph-zIndex-toast)",
277
+ tooltip: "var(--tgph-zIndex-tooltip)"
278
+ }
279
+ }, n = [
280
+ "_hover",
281
+ "_focus",
282
+ "_active",
283
+ "_focusWithin",
284
+ "_disabled"
285
+ ], r = {
286
+ _hover: "hover",
287
+ _focus: "focus",
288
+ _active: "active",
289
+ _focusWithin: "focus-within",
290
+ _disabled: "disabled"
291
+ }, i = (e) => {
292
+ let t = [], n = "", r = 0;
293
+ for (let i = 0; i < e.length; i++) {
294
+ let a = e[i];
295
+ a === "(" ? (r++, n += a) : a === ")" ? (r--, n += a) : a === " " && r === 0 ? n &&= (t.push(n), "") : n += a;
296
+ }
297
+ for (n && t.push(n); t.length < 4;) t.push("0");
298
+ return [
299
+ t[0] || "0",
300
+ t[1] || "0",
301
+ t[2] || "0",
302
+ t[3] || "0"
303
+ ];
304
+ }, a = ({ currentValueOfCssVar: e = "0 0 0 0", value: t, direction: n }) => {
305
+ let [r, a, o, s] = i(e), c = {
306
+ top: r,
307
+ right: a,
308
+ bottom: o,
309
+ left: s
310
+ };
311
+ return n === "top" && (c.top = t), n === "right" && (c.right = t), n === "bottom" && (c.bottom = t), n === "left" && (c.left = t), n === "all" && (c.top = t, c.right = t, c.bottom = t, c.left = t), n === "x" && (c.left = t, c.right = t), n === "y" && (c.top = t, c.bottom = t), n === "side-top" && (c.top = t, c.right = t), n === "side-bottom" && (c.bottom = t, c.left = t), n === "side-left" && (c.top = t, c.left = t), n === "side-right" && (c.right = t, c.bottom = t), Object.values(c).join(" ");
312
+ }, o = ({ currentValueOfCssVar: e = "visible visible", value: t, axis: n }) => {
313
+ let [r, i] = e.split(" ");
314
+ return n === "x" ? `${t} ${i}` : n === "y" ? `${r} ${t}` : `${t} ${t}`;
315
+ }, s = (e, t) => {
316
+ if (typeof t == "string" && t.startsWith("-")) {
317
+ let n = t.slice(1);
318
+ return `calc(-1 * ${e.value.replace("VARIABLE", n)})`;
319
+ }
320
+ return e.value.replace("VARIABLE", t);
321
+ }, c = (e, t, n, r) => {
322
+ let i = r ?? t.cssVar;
323
+ if (t.direction) {
324
+ let r = e?.[i], o = a({
325
+ currentValueOfCssVar: r,
326
+ value: n,
327
+ direction: t.direction
328
+ });
329
+ return {
330
+ ...e,
331
+ [i]: o
332
+ };
333
+ }
334
+ if (t.axis) {
335
+ let r = e?.[i], a = o({
336
+ currentValueOfCssVar: r,
337
+ value: n,
338
+ axis: t.axis
339
+ });
340
+ return {
341
+ ...e,
342
+ [i]: a
343
+ };
344
+ }
345
+ return {
346
+ ...e,
347
+ [i]: n
348
+ };
349
+ }, l = (e, t) => `--${r[t]}--${e.replace(/^--/, "")}`, u = (e) => {
350
+ let { cssVars: t } = e;
351
+ if (!e?.props || Object.keys(e.props).length === 0) return {
352
+ styleProp: {},
353
+ otherProps: {},
354
+ interactive: !1
355
+ };
356
+ let { style: r = {}, ...i } = e.props, a = r, o = {}, u = !1;
357
+ return Object.keys(i).forEach((e) => {
358
+ let r = e;
359
+ if (n.includes(e) && typeof i[r] == "object" && i[r] !== null) {
360
+ let n = e, d = i[r], f = {};
361
+ if (Object.keys(d).forEach((e) => {
362
+ let r = d[e];
363
+ if (!r) return;
364
+ let i = t?.[e];
365
+ if (!i) {
366
+ f[e] = r;
367
+ return;
368
+ }
369
+ let o = s(i, r), u = l(i.cssVar, n);
370
+ a = c(a, i, o, u);
371
+ }), Object.keys(f).length > 0) {
372
+ let t = o[e] || {};
373
+ Object.assign(o, { [e]: {
374
+ ...t,
375
+ ...f
376
+ } });
377
+ }
378
+ Object.keys(d).length > Object.keys(f).length && (u = !0);
379
+ return;
380
+ }
381
+ let d = t?.[r];
382
+ if (!d) {
383
+ Object.assign(o, { [r]: i[r] });
384
+ return;
385
+ }
386
+ let f = i?.[r];
387
+ if (!f) {
388
+ Object.assign(a, { [r]: i[r] });
389
+ return;
390
+ }
391
+ let p = s(d, f);
392
+ a = c(a, d, p);
393
+ }), {
394
+ styleProp: a,
395
+ otherProps: o,
396
+ interactive: u
397
+ };
398
+ }, d = (t) => e.useMemo(() => u(t), [t]);
399
+ //#endregion
400
+ export { n as PSEUDO_STATES, u as getStyleProp, t as tokens, d as useStyleEngine };
401
+
402
+ //# sourceMappingURL=index.mjs.map