@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.
@@ -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; }// src/provider/xaui-provider.tsx
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__ */ React.createElement(ThemeContext.Provider, { value: theme[resolved] }, children);
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.ThemeContext = ThemeContext; exports.XAUIProvider = XAUIProvider; exports.palette = palette; exports.primitives = primitives; exports.useXAUITheme = useXAUITheme; exports.useColorMode = useColorMode; exports.useThemeColor = useThemeColor;
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
+ };