@xaui/native 0.9.1-alpha.0 → 0.9.1-alpha.10
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/{chunk-JDS6KGCM.cjs → chunk-2FEDC7U5.cjs} +39 -119
- package/dist/chunk-3QBT3Q65.cjs +125 -0
- package/dist/chunk-3TIDEII6.js +57 -0
- package/dist/chunk-66OVPWF4.js +716 -0
- package/dist/chunk-7D262JCJ.cjs +716 -0
- package/dist/{chunk-T3ZI2PZ6.js → chunk-7XGOXTGT.js} +9 -89
- package/dist/chunk-EQGTD5F6.js +353 -0
- package/dist/chunk-ERCOAOO6.cjs +353 -0
- package/dist/chunk-LMUPNKPH.cjs +57 -0
- package/dist/chunk-X2K2FX3W.js +125 -0
- package/dist/components/button/index.cjs +12 -0
- package/dist/components/button/index.d.cts +192 -0
- package/dist/components/button/index.d.ts +192 -0
- package/dist/components/button/index.js +12 -0
- package/dist/create-recipe-BjSP0zL_.d.cts +210 -0
- package/dist/create-recipe-Dn9kj5Rs.d.ts +210 -0
- package/dist/index.cjs +122 -3
- package/dist/index.d.cts +74 -2
- package/dist/index.d.ts +74 -2
- package/dist/index.js +122 -3
- package/dist/system/index.cjs +53 -0
- package/dist/system/index.d.cts +262 -0
- package/dist/system/index.d.ts +262 -0
- package/dist/system/index.js +53 -0
- package/dist/theme/index.cjs +6 -2
- package/dist/theme/index.d.cts +24 -153
- package/dist/theme/index.d.ts +24 -153
- package/dist/theme/index.js +7 -3
- package/dist/theme.type-C9bFJKFm.d.cts +159 -0
- package/dist/theme.type-C9bFJKFm.d.ts +159 -0
- package/package.json +39 -8
|
@@ -1,4 +1,10 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _nullishCoalesce(lhs, rhsFn) { if (lhs != null) { return lhs; } else { return rhsFn(); } } function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; }
|
|
1
|
+
"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _nullishCoalesce(lhs, rhsFn) { if (lhs != null) { return lhs; } else { return rhsFn(); } } function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; }
|
|
2
|
+
|
|
3
|
+
|
|
4
|
+
|
|
5
|
+
var _chunk3QBT3Q65cjs = require('./chunk-3QBT3Q65.cjs');
|
|
6
|
+
|
|
7
|
+
// src/provider/xaui-provider.tsx
|
|
2
8
|
var _reactnative = require('react-native');
|
|
3
9
|
|
|
4
10
|
// src/utils/stable-hash.ts
|
|
@@ -18,103 +24,41 @@ function stableHash(value) {
|
|
|
18
24
|
return hash.toString(36);
|
|
19
25
|
}
|
|
20
26
|
|
|
21
|
-
// src/utils/colors.ts
|
|
22
|
-
var srgbToLinear = (c) => c <= 0.04045 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4;
|
|
23
|
-
var linearToSrgb = (c) => c <= 31308e-7 ? 12.92 * c : 1.055 * c ** (1 / 2.4) - 0.055;
|
|
24
|
-
var clamp01 = (n) => Math.min(1, Math.max(0, n));
|
|
25
|
-
var HEX = /^#?(?:[0-9a-f]{3}|[0-9a-f]{6})$/i;
|
|
26
|
-
function hexToRgb(hex) {
|
|
27
|
-
if (!HEX.test(hex)) {
|
|
28
|
-
throw new Error(
|
|
29
|
-
`XAUI: "${hex}" is not a hex colour. Tokens that feed mix() and alpha() must be #rgb or #rrggbb \u2014 named colours and rgb()/rgba() values cannot be blended.`
|
|
30
|
-
);
|
|
31
|
-
}
|
|
32
|
-
const raw = hex.replace("#", "");
|
|
33
|
-
const full = raw.length === 3 ? raw.split("").map((c) => c + c).join("") : raw;
|
|
34
|
-
return [
|
|
35
|
-
parseInt(full.slice(0, 2), 16) / 255,
|
|
36
|
-
parseInt(full.slice(2, 4), 16) / 255,
|
|
37
|
-
parseInt(full.slice(4, 6), 16) / 255
|
|
38
|
-
];
|
|
39
|
-
}
|
|
40
|
-
function rgbToHex([r, g, b]) {
|
|
41
|
-
const to = (n) => Math.round(clamp01(n) * 255).toString(16).padStart(2, "0");
|
|
42
|
-
return `#${to(r)}${to(g)}${to(b)}`;
|
|
43
|
-
}
|
|
44
|
-
function rgbToOklab([r, g, b]) {
|
|
45
|
-
const R = srgbToLinear(r);
|
|
46
|
-
const G = srgbToLinear(g);
|
|
47
|
-
const B = srgbToLinear(b);
|
|
48
|
-
const l = Math.cbrt(0.4122214708 * R + 0.5363325363 * G + 0.0514459929 * B);
|
|
49
|
-
const m = Math.cbrt(0.2119034982 * R + 0.6806995451 * G + 0.1073969566 * B);
|
|
50
|
-
const s = Math.cbrt(0.0883024619 * R + 0.2817188376 * G + 0.6299787005 * B);
|
|
51
|
-
return [
|
|
52
|
-
0.2104542553 * l + 0.793617785 * m - 0.0040720468 * s,
|
|
53
|
-
1.9779984951 * l - 2.428592205 * m + 0.4505937099 * s,
|
|
54
|
-
0.0259040371 * l + 0.7827717662 * m - 0.808675766 * s
|
|
55
|
-
];
|
|
56
|
-
}
|
|
57
|
-
function oklabToRgb([L, a, b]) {
|
|
58
|
-
const l = (L + 0.3963377774 * a + 0.2158037573 * b) ** 3;
|
|
59
|
-
const m = (L - 0.1055613458 * a - 0.0638541728 * b) ** 3;
|
|
60
|
-
const s = (L - 0.0894841775 * a - 1.291485548 * b) ** 3;
|
|
61
|
-
return [
|
|
62
|
-
clamp01(linearToSrgb(4.0767416621 * l - 3.3077115913 * m + 0.2309699292 * s)),
|
|
63
|
-
clamp01(linearToSrgb(-1.2684380046 * l + 2.6097574011 * m - 0.3413193965 * s)),
|
|
64
|
-
clamp01(linearToSrgb(-0.0041960863 * l - 0.7034186147 * m + 1.707614701 * s))
|
|
65
|
-
];
|
|
66
|
-
}
|
|
67
|
-
function mix(base, other, amount) {
|
|
68
|
-
const from = rgbToOklab(hexToRgb(base));
|
|
69
|
-
const to = rgbToOklab(hexToRgb(other));
|
|
70
|
-
return rgbToHex(
|
|
71
|
-
oklabToRgb([
|
|
72
|
-
from[0] + (to[0] - from[0]) * amount,
|
|
73
|
-
from[1] + (to[1] - from[1]) * amount,
|
|
74
|
-
from[2] + (to[2] - from[2]) * amount
|
|
75
|
-
])
|
|
76
|
-
);
|
|
77
|
-
}
|
|
78
|
-
function alpha(hex, amount) {
|
|
79
|
-
const [r, g, b] = hexToRgb(hex).map((v) => Math.round(v * 255));
|
|
80
|
-
return `rgba(${r}, ${g}, ${b}, ${amount})`;
|
|
81
|
-
}
|
|
82
|
-
|
|
83
27
|
// src/theme/derive-colors.ts
|
|
84
28
|
function deriveColors(s) {
|
|
85
29
|
return {
|
|
86
|
-
accentPressed: mix(s.accent, s.accentForeground, 0.1),
|
|
87
|
-
successPressed: mix(s.success, s.successForeground, 0.1),
|
|
88
|
-
warningPressed: mix(s.warning, s.warningForeground, 0.1),
|
|
89
|
-
dangerPressed: mix(s.danger, s.dangerForeground, 0.1),
|
|
90
|
-
defaultPressed: mix(s.default, s.defaultForeground, 0.04),
|
|
91
|
-
surfacePressed: mix(s.surface, s.surfaceForeground, 0.08),
|
|
92
|
-
defaultSoft: alpha(s.default, 0.5),
|
|
30
|
+
accentPressed: _chunk3QBT3Q65cjs.mix.call(void 0, s.accent, s.accentForeground, 0.1),
|
|
31
|
+
successPressed: _chunk3QBT3Q65cjs.mix.call(void 0, s.success, s.successForeground, 0.1),
|
|
32
|
+
warningPressed: _chunk3QBT3Q65cjs.mix.call(void 0, s.warning, s.warningForeground, 0.1),
|
|
33
|
+
dangerPressed: _chunk3QBT3Q65cjs.mix.call(void 0, s.danger, s.dangerForeground, 0.1),
|
|
34
|
+
defaultPressed: _chunk3QBT3Q65cjs.mix.call(void 0, s.default, s.defaultForeground, 0.04),
|
|
35
|
+
surfacePressed: _chunk3QBT3Q65cjs.mix.call(void 0, s.surface, s.surfaceForeground, 0.08),
|
|
36
|
+
defaultSoft: _chunk3QBT3Q65cjs.alpha.call(void 0, s.default, 0.5),
|
|
93
37
|
defaultSoftForeground: s.defaultForeground,
|
|
94
|
-
defaultSoftPressed: alpha(s.default, 0.6),
|
|
95
|
-
accentSoft: alpha(s.accent, 0.15),
|
|
96
|
-
accentSoftForeground: mix(s.accent, s.foreground, 0.2),
|
|
97
|
-
accentSoftPressed: alpha(s.accent, 0.2),
|
|
98
|
-
successSoft: alpha(s.success, 0.15),
|
|
99
|
-
successSoftForeground: mix(s.success, s.foreground, 0.3),
|
|
100
|
-
successSoftPressed: alpha(s.success, 0.2),
|
|
101
|
-
warningSoft: alpha(s.warning, 0.15),
|
|
102
|
-
warningSoftForeground: mix(s.warning, s.foreground, 0.35),
|
|
103
|
-
warningSoftPressed: alpha(s.warning, 0.2),
|
|
104
|
-
dangerSoft: alpha(s.danger, 0.15),
|
|
105
|
-
dangerSoftForeground: mix(s.danger, s.foreground, 0.2),
|
|
106
|
-
dangerSoftPressed: alpha(s.danger, 0.2),
|
|
107
|
-
backgroundSecondary: mix(s.background, s.foreground, 0.04),
|
|
108
|
-
backgroundTertiary: mix(s.background, s.foreground, 0.08),
|
|
38
|
+
defaultSoftPressed: _chunk3QBT3Q65cjs.alpha.call(void 0, s.default, 0.6),
|
|
39
|
+
accentSoft: _chunk3QBT3Q65cjs.alpha.call(void 0, s.accent, 0.15),
|
|
40
|
+
accentSoftForeground: _chunk3QBT3Q65cjs.mix.call(void 0, s.accent, s.foreground, 0.2),
|
|
41
|
+
accentSoftPressed: _chunk3QBT3Q65cjs.alpha.call(void 0, s.accent, 0.2),
|
|
42
|
+
successSoft: _chunk3QBT3Q65cjs.alpha.call(void 0, s.success, 0.15),
|
|
43
|
+
successSoftForeground: _chunk3QBT3Q65cjs.mix.call(void 0, s.success, s.foreground, 0.3),
|
|
44
|
+
successSoftPressed: _chunk3QBT3Q65cjs.alpha.call(void 0, s.success, 0.2),
|
|
45
|
+
warningSoft: _chunk3QBT3Q65cjs.alpha.call(void 0, s.warning, 0.15),
|
|
46
|
+
warningSoftForeground: _chunk3QBT3Q65cjs.mix.call(void 0, s.warning, s.foreground, 0.35),
|
|
47
|
+
warningSoftPressed: _chunk3QBT3Q65cjs.alpha.call(void 0, s.warning, 0.2),
|
|
48
|
+
dangerSoft: _chunk3QBT3Q65cjs.alpha.call(void 0, s.danger, 0.15),
|
|
49
|
+
dangerSoftForeground: _chunk3QBT3Q65cjs.mix.call(void 0, s.danger, s.foreground, 0.2),
|
|
50
|
+
dangerSoftPressed: _chunk3QBT3Q65cjs.alpha.call(void 0, s.danger, 0.2),
|
|
51
|
+
backgroundSecondary: _chunk3QBT3Q65cjs.mix.call(void 0, s.background, s.foreground, 0.04),
|
|
52
|
+
backgroundTertiary: _chunk3QBT3Q65cjs.mix.call(void 0, s.background, s.foreground, 0.08),
|
|
109
53
|
backgroundInverse: s.foreground,
|
|
110
|
-
borderSecondary: mix(s.surface, s.surfaceForeground, 0.22),
|
|
111
|
-
borderTertiary: mix(s.surface, s.surfaceForeground, 0.34),
|
|
112
|
-
separatorSecondary: mix(s.surface, s.surfaceForeground, 0.15),
|
|
113
|
-
separatorTertiary: mix(s.surface, s.surfaceForeground, 0.19),
|
|
114
|
-
fieldPressed: mix(s.fieldBackground, s.fieldForeground, 0.1),
|
|
54
|
+
borderSecondary: _chunk3QBT3Q65cjs.mix.call(void 0, s.surface, s.surfaceForeground, 0.22),
|
|
55
|
+
borderTertiary: _chunk3QBT3Q65cjs.mix.call(void 0, s.surface, s.surfaceForeground, 0.34),
|
|
56
|
+
separatorSecondary: _chunk3QBT3Q65cjs.mix.call(void 0, s.surface, s.surfaceForeground, 0.15),
|
|
57
|
+
separatorTertiary: _chunk3QBT3Q65cjs.mix.call(void 0, s.surface, s.surfaceForeground, 0.19),
|
|
58
|
+
fieldPressed: _chunk3QBT3Q65cjs.mix.call(void 0, s.fieldBackground, s.fieldForeground, 0.1),
|
|
115
59
|
fieldFocus: s.fieldBackground,
|
|
116
|
-
fieldBorderPressed: mix(s.fieldBorder, s.fieldForeground, 0.12),
|
|
117
|
-
fieldBorderFocus: mix(s.fieldBorder, s.fieldForeground, 0.26)
|
|
60
|
+
fieldBorderPressed: _chunk3QBT3Q65cjs.mix.call(void 0, s.fieldBorder, s.fieldForeground, 0.12),
|
|
61
|
+
fieldBorderFocus: _chunk3QBT3Q65cjs.mix.call(void 0, s.fieldBorder, s.fieldForeground, 0.26)
|
|
118
62
|
};
|
|
119
63
|
}
|
|
120
64
|
|
|
@@ -442,11 +386,8 @@ function createTheme(config = {}) {
|
|
|
442
386
|
}
|
|
443
387
|
var defaultTheme = createTheme();
|
|
444
388
|
|
|
445
|
-
// src/theme/theme-context.ts
|
|
446
|
-
var _react = require('react');
|
|
447
|
-
var ThemeContext = _react.createContext.call(void 0, null);
|
|
448
|
-
|
|
449
389
|
// src/provider/xaui-provider.tsx
|
|
390
|
+
var _jsxruntime = require('react/jsx-runtime');
|
|
450
391
|
function XAUIProvider({
|
|
451
392
|
children,
|
|
452
393
|
theme = defaultTheme,
|
|
@@ -454,7 +395,7 @@ function XAUIProvider({
|
|
|
454
395
|
}) {
|
|
455
396
|
const scheme = _reactnative.useColorScheme.call(void 0, );
|
|
456
397
|
const resolved = colorMode === "system" ? scheme === "dark" ? "dark" : "light" : colorMode;
|
|
457
|
-
return /* @__PURE__ */
|
|
398
|
+
return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk3QBT3Q65cjs.ThemeContext.Provider, { value: theme[resolved], children });
|
|
458
399
|
}
|
|
459
400
|
|
|
460
401
|
// src/theme/palette.ts
|
|
@@ -756,27 +697,6 @@ var primitives = {
|
|
|
756
697
|
eclipse: "#18181b"
|
|
757
698
|
};
|
|
758
699
|
|
|
759
|
-
// src/theme/theme-hooks.ts
|
|
760
|
-
|
|
761
|
-
function useXAUITheme() {
|
|
762
|
-
const theme = _react.useContext.call(void 0, ThemeContext);
|
|
763
|
-
if (theme === null) {
|
|
764
|
-
throw new Error("XAUI: useXAUITheme must be used within <XAUIProvider>.");
|
|
765
|
-
}
|
|
766
|
-
return theme;
|
|
767
|
-
}
|
|
768
|
-
function useColorMode() {
|
|
769
|
-
return useXAUITheme().mode;
|
|
770
|
-
}
|
|
771
|
-
function useThemeColor(token) {
|
|
772
|
-
const { colors } = useXAUITheme();
|
|
773
|
-
return Array.isArray(token) ? token.map((key) => colors[key]) : colors[token];
|
|
774
|
-
}
|
|
775
|
-
|
|
776
|
-
|
|
777
|
-
|
|
778
|
-
|
|
779
|
-
|
|
780
700
|
|
|
781
701
|
|
|
782
702
|
|
|
@@ -788,4 +708,4 @@ function useThemeColor(token) {
|
|
|
788
708
|
|
|
789
709
|
|
|
790
710
|
|
|
791
|
-
exports.deriveColors = deriveColors; exports.buildRadius = buildRadius; exports.buildShadows = buildShadows; exports.tokens = tokens; exports.sourceKeys = sourceKeys; exports.createTheme = createTheme; exports.defaultTheme = defaultTheme; exports.
|
|
711
|
+
exports.deriveColors = deriveColors; exports.buildRadius = buildRadius; exports.buildShadows = buildShadows; exports.tokens = tokens; exports.sourceKeys = sourceKeys; exports.createTheme = createTheme; exports.defaultTheme = defaultTheme; exports.XAUIProvider = XAUIProvider; exports.palette = palette; exports.primitives = primitives;
|
|
@@ -0,0 +1,125 @@
|
|
|
1
|
+
"use strict";Object.defineProperty(exports, "__esModule", {value: true});// src/theme/theme-context.ts
|
|
2
|
+
var _react = require('react');
|
|
3
|
+
var ThemeContext = _react.createContext.call(void 0, null);
|
|
4
|
+
|
|
5
|
+
// src/theme/theme-hooks.ts
|
|
6
|
+
|
|
7
|
+
function useXAUITheme() {
|
|
8
|
+
const theme = _react.useContext.call(void 0, ThemeContext);
|
|
9
|
+
if (theme === null) {
|
|
10
|
+
throw new Error("XAUI: useXAUITheme must be used within <XAUIProvider>.");
|
|
11
|
+
}
|
|
12
|
+
return theme;
|
|
13
|
+
}
|
|
14
|
+
function useColorMode() {
|
|
15
|
+
return useXAUITheme().mode;
|
|
16
|
+
}
|
|
17
|
+
function useThemeColor(token) {
|
|
18
|
+
const { colors } = useXAUITheme();
|
|
19
|
+
return Array.isArray(token) ? token.map((key) => colors[key]) : colors[token];
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
// src/utils/colors.ts
|
|
23
|
+
var srgbToLinear = (c) => c <= 0.04045 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4;
|
|
24
|
+
var linearToSrgb = (c) => c <= 31308e-7 ? 12.92 * c : 1.055 * c ** (1 / 2.4) - 0.055;
|
|
25
|
+
var clamp01 = (n) => Math.min(1, Math.max(0, n));
|
|
26
|
+
var HEX = /^#?(?:[0-9a-f]{3}|[0-9a-f]{6})$/i;
|
|
27
|
+
function isHex(value) {
|
|
28
|
+
return HEX.test(value);
|
|
29
|
+
}
|
|
30
|
+
function hexToRgb(hex) {
|
|
31
|
+
if (!isHex(hex)) {
|
|
32
|
+
throw new Error(
|
|
33
|
+
`XAUI: "${hex}" is not a hex colour. Tokens that feed mix() and alpha() must be #rgb or #rrggbb \u2014 named colours and rgb()/rgba() values cannot be blended.`
|
|
34
|
+
);
|
|
35
|
+
}
|
|
36
|
+
const raw = hex.replace("#", "");
|
|
37
|
+
const full = raw.length === 3 ? raw.split("").map((c) => c + c).join("") : raw;
|
|
38
|
+
return [
|
|
39
|
+
parseInt(full.slice(0, 2), 16) / 255,
|
|
40
|
+
parseInt(full.slice(2, 4), 16) / 255,
|
|
41
|
+
parseInt(full.slice(4, 6), 16) / 255
|
|
42
|
+
];
|
|
43
|
+
}
|
|
44
|
+
function rgbToHex([r, g, b]) {
|
|
45
|
+
const to = (n) => Math.round(clamp01(n) * 255).toString(16).padStart(2, "0");
|
|
46
|
+
return `#${to(r)}${to(g)}${to(b)}`;
|
|
47
|
+
}
|
|
48
|
+
function rgbToOklab([r, g, b]) {
|
|
49
|
+
const R = srgbToLinear(r);
|
|
50
|
+
const G = srgbToLinear(g);
|
|
51
|
+
const B = srgbToLinear(b);
|
|
52
|
+
const l = Math.cbrt(0.4122214708 * R + 0.5363325363 * G + 0.0514459929 * B);
|
|
53
|
+
const m = Math.cbrt(0.2119034982 * R + 0.6806995451 * G + 0.1073969566 * B);
|
|
54
|
+
const s = Math.cbrt(0.0883024619 * R + 0.2817188376 * G + 0.6299787005 * B);
|
|
55
|
+
return [
|
|
56
|
+
0.2104542553 * l + 0.793617785 * m - 0.0040720468 * s,
|
|
57
|
+
1.9779984951 * l - 2.428592205 * m + 0.4505937099 * s,
|
|
58
|
+
0.0259040371 * l + 0.7827717662 * m - 0.808675766 * s
|
|
59
|
+
];
|
|
60
|
+
}
|
|
61
|
+
function oklabToRgb([L, a, b]) {
|
|
62
|
+
const l = (L + 0.3963377774 * a + 0.2158037573 * b) ** 3;
|
|
63
|
+
const m = (L - 0.1055613458 * a - 0.0638541728 * b) ** 3;
|
|
64
|
+
const s = (L - 0.0894841775 * a - 1.291485548 * b) ** 3;
|
|
65
|
+
return [
|
|
66
|
+
clamp01(linearToSrgb(4.0767416621 * l - 3.3077115913 * m + 0.2309699292 * s)),
|
|
67
|
+
clamp01(linearToSrgb(-1.2684380046 * l + 2.6097574011 * m - 0.3413193965 * s)),
|
|
68
|
+
clamp01(linearToSrgb(-0.0041960863 * l - 0.7034186147 * m + 1.707614701 * s))
|
|
69
|
+
];
|
|
70
|
+
}
|
|
71
|
+
function mix(base, other, amount) {
|
|
72
|
+
const from = rgbToOklab(hexToRgb(base));
|
|
73
|
+
const to = rgbToOklab(hexToRgb(other));
|
|
74
|
+
return rgbToHex(
|
|
75
|
+
oklabToRgb([
|
|
76
|
+
from[0] + (to[0] - from[0]) * amount,
|
|
77
|
+
from[1] + (to[1] - from[1]) * amount,
|
|
78
|
+
from[2] + (to[2] - from[2]) * amount
|
|
79
|
+
])
|
|
80
|
+
);
|
|
81
|
+
}
|
|
82
|
+
function alpha(hex, amount) {
|
|
83
|
+
const [r, g, b] = hexToRgb(hex).map((v) => Math.round(v * 255));
|
|
84
|
+
return `rgba(${r}, ${g}, ${b}, ${amount})`;
|
|
85
|
+
}
|
|
86
|
+
function lightnessOf(hex) {
|
|
87
|
+
return rgbToOklab(hexToRgb(hex))[0];
|
|
88
|
+
}
|
|
89
|
+
function contrastOn(hex, light, dark) {
|
|
90
|
+
return lightnessOf(hex) > 0.62 ? dark : light;
|
|
91
|
+
}
|
|
92
|
+
|
|
93
|
+
// src/theme/derive-tint.ts
|
|
94
|
+
var cache = /* @__PURE__ */ new Map();
|
|
95
|
+
function deriveTint(tint, theme) {
|
|
96
|
+
const key = `${theme.id}|${theme.mode}|${tint}`;
|
|
97
|
+
const hit = cache.get(key);
|
|
98
|
+
if (hit) return hit;
|
|
99
|
+
if (!isHex(tint)) {
|
|
100
|
+
throw new Error(
|
|
101
|
+
`XAUI: color="${tint}" must be a hex value (#rgb or #rrggbb). A tint's contrasted, soft and pressed slices are derived in OKLab, which cannot read rgba() or a named colour. Pass the hex here and put the transparency in \`style\`.`
|
|
102
|
+
);
|
|
103
|
+
}
|
|
104
|
+
const foreground = contrastOn(tint, theme.colors.snow, theme.colors.eclipse);
|
|
105
|
+
const derived = {
|
|
106
|
+
base: tint,
|
|
107
|
+
foreground,
|
|
108
|
+
soft: alpha(tint, 0.15),
|
|
109
|
+
softForeground: mix(tint, theme.colors.foreground, 0.2),
|
|
110
|
+
pressed: mix(tint, foreground, 0.1),
|
|
111
|
+
softPressed: alpha(tint, 0.2)
|
|
112
|
+
};
|
|
113
|
+
cache.set(key, derived);
|
|
114
|
+
return derived;
|
|
115
|
+
}
|
|
116
|
+
|
|
117
|
+
|
|
118
|
+
|
|
119
|
+
|
|
120
|
+
|
|
121
|
+
|
|
122
|
+
|
|
123
|
+
|
|
124
|
+
|
|
125
|
+
exports.ThemeContext = ThemeContext; exports.useXAUITheme = useXAUITheme; exports.useColorMode = useColorMode; exports.useThemeColor = useThemeColor; exports.mix = mix; exports.alpha = alpha; exports.deriveTint = deriveTint;
|
|
@@ -0,0 +1,57 @@
|
|
|
1
|
+
// src/system/portal/portal.tsx
|
|
2
|
+
import { useContext, useId, useLayoutEffect } from "react";
|
|
3
|
+
|
|
4
|
+
// src/system/portal/portal-context.ts
|
|
5
|
+
import { createContext } from "react";
|
|
6
|
+
var PortalContext = createContext(null);
|
|
7
|
+
|
|
8
|
+
// src/system/portal/portal.tsx
|
|
9
|
+
function Portal({ children }) {
|
|
10
|
+
const context = useContext(PortalContext);
|
|
11
|
+
const key = useId();
|
|
12
|
+
useLayoutEffect(() => {
|
|
13
|
+
context?.addPortal(key, children);
|
|
14
|
+
}, [children, context, key]);
|
|
15
|
+
useLayoutEffect(() => {
|
|
16
|
+
return () => context?.removePortal(key);
|
|
17
|
+
}, [context, key]);
|
|
18
|
+
return null;
|
|
19
|
+
}
|
|
20
|
+
Portal.displayName = "XAUI.Portal";
|
|
21
|
+
|
|
22
|
+
// src/system/portal/portal-host.tsx
|
|
23
|
+
import { Fragment, useCallback, useMemo, useState } from "react";
|
|
24
|
+
import { StyleSheet, View } from "react-native";
|
|
25
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
26
|
+
var styles = StyleSheet.create({
|
|
27
|
+
container: { flex: 1 }
|
|
28
|
+
});
|
|
29
|
+
function PortalHost({ children }) {
|
|
30
|
+
const [portals, setPortals] = useState(/* @__PURE__ */ new Map());
|
|
31
|
+
const addPortal = useCallback((key, element) => {
|
|
32
|
+
setPortals((current) => new Map(current).set(key, element));
|
|
33
|
+
}, []);
|
|
34
|
+
const removePortal = useCallback((key) => {
|
|
35
|
+
setPortals((current) => {
|
|
36
|
+
if (!current.has(key)) return current;
|
|
37
|
+
const next = new Map(current);
|
|
38
|
+
next.delete(key);
|
|
39
|
+
return next;
|
|
40
|
+
});
|
|
41
|
+
}, []);
|
|
42
|
+
const methods = useMemo(
|
|
43
|
+
() => ({ addPortal, removePortal }),
|
|
44
|
+
[addPortal, removePortal]
|
|
45
|
+
);
|
|
46
|
+
return /* @__PURE__ */ jsx(PortalContext.Provider, { value: methods, children: /* @__PURE__ */ jsxs(View, { style: styles.container, children: [
|
|
47
|
+
children,
|
|
48
|
+
Array.from(portals, ([key, element]) => /* @__PURE__ */ jsx(Fragment, { children: element }, key))
|
|
49
|
+
] }) });
|
|
50
|
+
}
|
|
51
|
+
PortalHost.displayName = "XAUI.PortalHost";
|
|
52
|
+
|
|
53
|
+
export {
|
|
54
|
+
PortalContext,
|
|
55
|
+
Portal,
|
|
56
|
+
PortalHost
|
|
57
|
+
};
|