@oxyhq/services 6.9.21 → 6.9.22
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/lib/commonjs/assets/assets/fonts/Inter/InterVariable.ttf +0 -0
- package/lib/commonjs/assets/fonts/Inter/InterVariable.ttf +0 -0
- package/lib/commonjs/ui/components/FontLoader.js +26 -101
- package/lib/commonjs/ui/components/FontLoader.js.map +1 -1
- package/lib/module/assets/assets/fonts/Inter/InterVariable.ttf +0 -0
- package/lib/module/assets/fonts/Inter/InterVariable.ttf +0 -0
- package/lib/module/ui/components/FontLoader.js +25 -101
- package/lib/module/ui/components/FontLoader.js.map +1 -1
- package/lib/typescript/commonjs/ui/components/FontLoader.d.ts +3 -5
- package/lib/typescript/commonjs/ui/components/FontLoader.d.ts.map +1 -1
- package/lib/typescript/module/ui/components/FontLoader.d.ts +3 -5
- package/lib/typescript/module/ui/components/FontLoader.d.ts.map +1 -1
- package/package.json +1 -1
- package/src/assets/fonts/Inter/InterVariable.ttf +0 -0
- package/src/ui/components/FontLoader.tsx +29 -105
|
Binary file
|
|
Binary file
|
|
@@ -9,150 +9,75 @@ var _reactNative = require("react-native");
|
|
|
9
9
|
var Font = _interopRequireWildcard(require("expo-font"));
|
|
10
10
|
var _jsxRuntime = require("react/jsx-runtime");
|
|
11
11
|
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
|
|
12
|
+
// Single variable font file that covers all weights (100–900)
|
|
13
|
+
const InterVariable = require('../../assets/fonts/Inter/InterVariable.ttf');
|
|
14
|
+
const WEIGHT_NAMES = ['Light', 'Regular', 'Medium', 'SemiBold', 'Bold', 'ExtraBold', 'Black'];
|
|
15
|
+
|
|
12
16
|
/**
|
|
13
|
-
*
|
|
14
|
-
*
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
'Inter-Medium': require('../../assets/fonts/Inter/Inter_18pt-Medium.ttf'),
|
|
23
|
-
'Inter-SemiBold': require('../../assets/fonts/Inter/Inter_18pt-SemiBold.ttf'),
|
|
24
|
-
'Inter-Bold': require('../../assets/fonts/Inter/Inter_18pt-Bold.ttf'),
|
|
25
|
-
'Inter-ExtraBold': require('../../assets/fonts/Inter/Inter_18pt-ExtraBold.ttf'),
|
|
26
|
-
'Inter-Black': require('../../assets/fonts/Inter/Inter_18pt-Black.ttf')
|
|
27
|
-
};
|
|
28
|
-
} catch (error) {
|
|
29
|
-
if (__DEV__) {
|
|
30
|
-
console.warn('Failed to load Inter fonts:', error);
|
|
31
|
-
}
|
|
32
|
-
return null;
|
|
17
|
+
* Build a font map using the single InterVariable.ttf for all weight aliases.
|
|
18
|
+
* A variable font contains every weight in one file, so we register it once
|
|
19
|
+
* per alias (e.g. Inter-Regular, Inter-Bold) to keep fontFamily references working.
|
|
20
|
+
*/
|
|
21
|
+
const getInterFonts = () => {
|
|
22
|
+
const fontMap = {};
|
|
23
|
+
fontMap['Inter'] = InterVariable;
|
|
24
|
+
for (const weight of WEIGHT_NAMES) {
|
|
25
|
+
fontMap[`Inter-${weight}`] = InterVariable;
|
|
33
26
|
}
|
|
27
|
+
return fontMap;
|
|
34
28
|
};
|
|
35
29
|
|
|
36
30
|
/**
|
|
37
|
-
* FontLoader component that loads custom fonts in the background while rendering children immediately
|
|
38
|
-
*
|
|
39
|
-
* Children render immediately with system fonts as fallback until custom fonts are loaded
|
|
31
|
+
* FontLoader component that loads custom fonts in the background while rendering children immediately.
|
|
32
|
+
* Children render immediately with system fonts as fallback until custom fonts are loaded.
|
|
40
33
|
*/
|
|
41
34
|
const FontLoader = ({
|
|
42
35
|
children
|
|
43
36
|
}) => {
|
|
44
37
|
const [fontState, setFontState] = (0, _react.useState)('loading');
|
|
45
38
|
(0, _react.useEffect)(() => {
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
const interFonts = getInterFonts();
|
|
50
|
-
if (!interFonts) {
|
|
51
|
-
throw new Error('Inter font files not found');
|
|
52
|
-
}
|
|
53
|
-
|
|
54
|
-
// Load all the static Inter fonts with their respective weights
|
|
55
|
-
await Font.loadAsync(interFonts);
|
|
56
|
-
setFontState('loaded');
|
|
57
|
-
} catch (error) {
|
|
58
|
-
if (__DEV__) {
|
|
59
|
-
console.error('Error loading fonts:', error);
|
|
60
|
-
}
|
|
61
|
-
setFontState('error');
|
|
39
|
+
Font.loadAsync(getInterFonts()).then(() => setFontState('loaded')).catch(error => {
|
|
40
|
+
if (__DEV__) {
|
|
41
|
+
console.error('Error loading fonts:', error);
|
|
62
42
|
}
|
|
63
|
-
|
|
64
|
-
|
|
43
|
+
setFontState('error');
|
|
44
|
+
});
|
|
65
45
|
}, []);
|
|
66
|
-
|
|
67
|
-
// Always render children immediately - fonts will load in background
|
|
68
|
-
// If fonts aren't loaded yet, the app will use system fonts as fallback
|
|
69
46
|
if (fontState === 'error' && __DEV__) {
|
|
70
47
|
console.warn('Fonts failed to load. Using system fonts instead.');
|
|
71
48
|
}
|
|
72
|
-
|
|
73
|
-
// Render children immediately, even while fonts are loading
|
|
74
|
-
// Fonts will apply when they're ready, otherwise system fonts are used
|
|
75
49
|
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
|
|
76
50
|
children: children
|
|
77
51
|
});
|
|
78
52
|
};
|
|
79
53
|
|
|
80
54
|
/**
|
|
81
|
-
* Setup fonts for applications consuming this package
|
|
82
|
-
* This should be called by applications using your package
|
|
55
|
+
* Setup fonts for applications consuming this package.
|
|
83
56
|
*/
|
|
84
57
|
exports.FontLoader = FontLoader;
|
|
85
58
|
const setupFonts = async () => {
|
|
86
59
|
try {
|
|
87
60
|
const interFonts = getInterFonts();
|
|
88
|
-
if (!interFonts) {
|
|
89
|
-
throw new Error('Inter font files not found');
|
|
90
|
-
}
|
|
91
61
|
if (_reactNative.Platform.OS === 'web') {
|
|
92
|
-
// For web platform, dynamically inject CSS to load the fonts
|
|
93
62
|
if (typeof document !== 'undefined') {
|
|
94
|
-
// Create a style element
|
|
95
63
|
const style = document.createElement('style');
|
|
96
|
-
|
|
97
|
-
// Define @font-face rules for each font weight
|
|
98
|
-
const fontFaceRules = `
|
|
99
|
-
@font-face {
|
|
100
|
-
font-family: 'Inter';
|
|
101
|
-
src: url(${interFonts['Inter-Light']}) format('truetype');
|
|
102
|
-
font-weight: 300;
|
|
103
|
-
font-style: normal;
|
|
104
|
-
}
|
|
105
|
-
@font-face {
|
|
106
|
-
font-family: 'Inter';
|
|
107
|
-
src: url(${interFonts['Inter-Regular']}) format('truetype');
|
|
108
|
-
font-weight: 400;
|
|
109
|
-
font-style: normal;
|
|
110
|
-
}
|
|
111
|
-
@font-face {
|
|
112
|
-
font-family: 'Inter';
|
|
113
|
-
src: url(${interFonts['Inter-Medium']}) format('truetype');
|
|
114
|
-
font-weight: 500;
|
|
115
|
-
font-style: normal;
|
|
116
|
-
}
|
|
117
|
-
@font-face {
|
|
118
|
-
font-family: 'Inter';
|
|
119
|
-
src: url(${interFonts['Inter-SemiBold']}) format('truetype');
|
|
120
|
-
font-weight: 600;
|
|
121
|
-
font-style: normal;
|
|
122
|
-
}
|
|
123
|
-
@font-face {
|
|
124
|
-
font-family: 'Inter';
|
|
125
|
-
src: url(${interFonts['Inter-Bold']}) format('truetype');
|
|
126
|
-
font-weight: 700;
|
|
127
|
-
font-style: normal;
|
|
128
|
-
}
|
|
129
|
-
@font-face {
|
|
130
|
-
font-family: 'Inter';
|
|
131
|
-
src: url(${interFonts['Inter-ExtraBold']}) format('truetype');
|
|
132
|
-
font-weight: 800;
|
|
133
|
-
font-style: normal;
|
|
134
|
-
}
|
|
64
|
+
style.textContent = `
|
|
135
65
|
@font-face {
|
|
136
66
|
font-family: 'Inter';
|
|
137
|
-
src: url(${
|
|
138
|
-
font-weight: 900;
|
|
67
|
+
src: url(${InterVariable}) format('truetype');
|
|
68
|
+
font-weight: 100 900;
|
|
139
69
|
font-style: normal;
|
|
140
70
|
}
|
|
141
71
|
`;
|
|
142
|
-
style.textContent = fontFaceRules;
|
|
143
72
|
document.head.appendChild(style);
|
|
144
|
-
if (__DEV__) {
|
|
145
|
-
console.info('All Inter web fonts have been dynamically loaded');
|
|
146
|
-
}
|
|
147
73
|
}
|
|
148
74
|
} else {
|
|
149
|
-
// Attempt to load the fonts anyway (this works if the consumer has linked the assets)
|
|
150
75
|
await Font.loadAsync(interFonts);
|
|
151
76
|
}
|
|
152
77
|
return true;
|
|
153
78
|
} catch (error) {
|
|
154
79
|
if (__DEV__) {
|
|
155
|
-
const errorMessage = error instanceof Error ? error
|
|
80
|
+
const errorMessage = error instanceof Error ? error.message : String(error);
|
|
156
81
|
console.warn('Error setting up fonts:', errorMessage);
|
|
157
82
|
}
|
|
158
83
|
return false;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["_react","require","_reactNative","Font","_interopRequireWildcard","_jsxRuntime","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","
|
|
1
|
+
{"version":3,"names":["_react","require","_reactNative","Font","_interopRequireWildcard","_jsxRuntime","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","InterVariable","WEIGHT_NAMES","getInterFonts","fontMap","weight","FontLoader","children","fontState","setFontState","useState","useEffect","loadAsync","then","catch","error","__DEV__","console","warn","jsx","Fragment","exports","setupFonts","interFonts","Platform","OS","document","style","createElement","textContent","head","appendChild","errorMessage","Error","message","String"],"sourceRoot":"../../../../src","sources":["ui/components/FontLoader.tsx"],"mappings":"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","ignoreList":[]}
|
|
Binary file
|
|
Binary file
|
|
@@ -4,151 +4,75 @@ import { useState, useEffect } from 'react';
|
|
|
4
4
|
import { Platform } from 'react-native';
|
|
5
5
|
import * as Font from 'expo-font';
|
|
6
6
|
|
|
7
|
+
// Single variable font file that covers all weights (100–900)
|
|
8
|
+
import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
|
|
9
|
+
const InterVariable = require('../../assets/fonts/Inter/InterVariable.ttf');
|
|
10
|
+
const WEIGHT_NAMES = ['Light', 'Regular', 'Medium', 'SemiBold', 'Bold', 'ExtraBold', 'Black'];
|
|
11
|
+
|
|
7
12
|
/**
|
|
8
|
-
*
|
|
9
|
-
*
|
|
13
|
+
* Build a font map using the single InterVariable.ttf for all weight aliases.
|
|
14
|
+
* A variable font contains every weight in one file, so we register it once
|
|
15
|
+
* per alias (e.g. Inter-Regular, Inter-Bold) to keep fontFamily references working.
|
|
10
16
|
*/
|
|
11
|
-
import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
|
|
12
17
|
const getInterFonts = () => {
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
'Inter-Light': require('../../assets/fonts/Inter/Inter_18pt-Light.ttf'),
|
|
18
|
-
'Inter-Regular': require('../../assets/fonts/Inter/Inter_18pt-Regular.ttf'),
|
|
19
|
-
'Inter-Medium': require('../../assets/fonts/Inter/Inter_18pt-Medium.ttf'),
|
|
20
|
-
'Inter-SemiBold': require('../../assets/fonts/Inter/Inter_18pt-SemiBold.ttf'),
|
|
21
|
-
'Inter-Bold': require('../../assets/fonts/Inter/Inter_18pt-Bold.ttf'),
|
|
22
|
-
'Inter-ExtraBold': require('../../assets/fonts/Inter/Inter_18pt-ExtraBold.ttf'),
|
|
23
|
-
'Inter-Black': require('../../assets/fonts/Inter/Inter_18pt-Black.ttf')
|
|
24
|
-
};
|
|
25
|
-
} catch (error) {
|
|
26
|
-
if (__DEV__) {
|
|
27
|
-
console.warn('Failed to load Inter fonts:', error);
|
|
28
|
-
}
|
|
29
|
-
return null;
|
|
18
|
+
const fontMap = {};
|
|
19
|
+
fontMap['Inter'] = InterVariable;
|
|
20
|
+
for (const weight of WEIGHT_NAMES) {
|
|
21
|
+
fontMap[`Inter-${weight}`] = InterVariable;
|
|
30
22
|
}
|
|
23
|
+
return fontMap;
|
|
31
24
|
};
|
|
32
25
|
|
|
33
26
|
/**
|
|
34
|
-
* FontLoader component that loads custom fonts in the background while rendering children immediately
|
|
35
|
-
*
|
|
36
|
-
* Children render immediately with system fonts as fallback until custom fonts are loaded
|
|
27
|
+
* FontLoader component that loads custom fonts in the background while rendering children immediately.
|
|
28
|
+
* Children render immediately with system fonts as fallback until custom fonts are loaded.
|
|
37
29
|
*/
|
|
38
30
|
export const FontLoader = ({
|
|
39
31
|
children
|
|
40
32
|
}) => {
|
|
41
33
|
const [fontState, setFontState] = useState('loading');
|
|
42
34
|
useEffect(() => {
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
const interFonts = getInterFonts();
|
|
47
|
-
if (!interFonts) {
|
|
48
|
-
throw new Error('Inter font files not found');
|
|
49
|
-
}
|
|
50
|
-
|
|
51
|
-
// Load all the static Inter fonts with their respective weights
|
|
52
|
-
await Font.loadAsync(interFonts);
|
|
53
|
-
setFontState('loaded');
|
|
54
|
-
} catch (error) {
|
|
55
|
-
if (__DEV__) {
|
|
56
|
-
console.error('Error loading fonts:', error);
|
|
57
|
-
}
|
|
58
|
-
setFontState('error');
|
|
35
|
+
Font.loadAsync(getInterFonts()).then(() => setFontState('loaded')).catch(error => {
|
|
36
|
+
if (__DEV__) {
|
|
37
|
+
console.error('Error loading fonts:', error);
|
|
59
38
|
}
|
|
60
|
-
|
|
61
|
-
|
|
39
|
+
setFontState('error');
|
|
40
|
+
});
|
|
62
41
|
}, []);
|
|
63
|
-
|
|
64
|
-
// Always render children immediately - fonts will load in background
|
|
65
|
-
// If fonts aren't loaded yet, the app will use system fonts as fallback
|
|
66
42
|
if (fontState === 'error' && __DEV__) {
|
|
67
43
|
console.warn('Fonts failed to load. Using system fonts instead.');
|
|
68
44
|
}
|
|
69
|
-
|
|
70
|
-
// Render children immediately, even while fonts are loading
|
|
71
|
-
// Fonts will apply when they're ready, otherwise system fonts are used
|
|
72
45
|
return /*#__PURE__*/_jsx(_Fragment, {
|
|
73
46
|
children: children
|
|
74
47
|
});
|
|
75
48
|
};
|
|
76
49
|
|
|
77
50
|
/**
|
|
78
|
-
* Setup fonts for applications consuming this package
|
|
79
|
-
* This should be called by applications using your package
|
|
51
|
+
* Setup fonts for applications consuming this package.
|
|
80
52
|
*/
|
|
81
53
|
export const setupFonts = async () => {
|
|
82
54
|
try {
|
|
83
55
|
const interFonts = getInterFonts();
|
|
84
|
-
if (!interFonts) {
|
|
85
|
-
throw new Error('Inter font files not found');
|
|
86
|
-
}
|
|
87
56
|
if (Platform.OS === 'web') {
|
|
88
|
-
// For web platform, dynamically inject CSS to load the fonts
|
|
89
57
|
if (typeof document !== 'undefined') {
|
|
90
|
-
// Create a style element
|
|
91
58
|
const style = document.createElement('style');
|
|
92
|
-
|
|
93
|
-
// Define @font-face rules for each font weight
|
|
94
|
-
const fontFaceRules = `
|
|
95
|
-
@font-face {
|
|
96
|
-
font-family: 'Inter';
|
|
97
|
-
src: url(${interFonts['Inter-Light']}) format('truetype');
|
|
98
|
-
font-weight: 300;
|
|
99
|
-
font-style: normal;
|
|
100
|
-
}
|
|
101
|
-
@font-face {
|
|
102
|
-
font-family: 'Inter';
|
|
103
|
-
src: url(${interFonts['Inter-Regular']}) format('truetype');
|
|
104
|
-
font-weight: 400;
|
|
105
|
-
font-style: normal;
|
|
106
|
-
}
|
|
107
|
-
@font-face {
|
|
108
|
-
font-family: 'Inter';
|
|
109
|
-
src: url(${interFonts['Inter-Medium']}) format('truetype');
|
|
110
|
-
font-weight: 500;
|
|
111
|
-
font-style: normal;
|
|
112
|
-
}
|
|
113
|
-
@font-face {
|
|
114
|
-
font-family: 'Inter';
|
|
115
|
-
src: url(${interFonts['Inter-SemiBold']}) format('truetype');
|
|
116
|
-
font-weight: 600;
|
|
117
|
-
font-style: normal;
|
|
118
|
-
}
|
|
119
|
-
@font-face {
|
|
120
|
-
font-family: 'Inter';
|
|
121
|
-
src: url(${interFonts['Inter-Bold']}) format('truetype');
|
|
122
|
-
font-weight: 700;
|
|
123
|
-
font-style: normal;
|
|
124
|
-
}
|
|
125
|
-
@font-face {
|
|
126
|
-
font-family: 'Inter';
|
|
127
|
-
src: url(${interFonts['Inter-ExtraBold']}) format('truetype');
|
|
128
|
-
font-weight: 800;
|
|
129
|
-
font-style: normal;
|
|
130
|
-
}
|
|
59
|
+
style.textContent = `
|
|
131
60
|
@font-face {
|
|
132
61
|
font-family: 'Inter';
|
|
133
|
-
src: url(${
|
|
134
|
-
font-weight: 900;
|
|
62
|
+
src: url(${InterVariable}) format('truetype');
|
|
63
|
+
font-weight: 100 900;
|
|
135
64
|
font-style: normal;
|
|
136
65
|
}
|
|
137
66
|
`;
|
|
138
|
-
style.textContent = fontFaceRules;
|
|
139
67
|
document.head.appendChild(style);
|
|
140
|
-
if (__DEV__) {
|
|
141
|
-
console.info('All Inter web fonts have been dynamically loaded');
|
|
142
|
-
}
|
|
143
68
|
}
|
|
144
69
|
} else {
|
|
145
|
-
// Attempt to load the fonts anyway (this works if the consumer has linked the assets)
|
|
146
70
|
await Font.loadAsync(interFonts);
|
|
147
71
|
}
|
|
148
72
|
return true;
|
|
149
73
|
} catch (error) {
|
|
150
74
|
if (__DEV__) {
|
|
151
|
-
const errorMessage = error instanceof Error ? error
|
|
75
|
+
const errorMessage = error instanceof Error ? error.message : String(error);
|
|
152
76
|
console.warn('Error setting up fonts:', errorMessage);
|
|
153
77
|
}
|
|
154
78
|
return false;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["useState","useEffect","Platform","Font","Fragment","_Fragment","jsx","_jsx","
|
|
1
|
+
{"version":3,"names":["useState","useEffect","Platform","Font","Fragment","_Fragment","jsx","_jsx","InterVariable","require","WEIGHT_NAMES","getInterFonts","fontMap","weight","FontLoader","children","fontState","setFontState","loadAsync","then","catch","error","__DEV__","console","warn","setupFonts","interFonts","OS","document","style","createElement","textContent","head","appendChild","errorMessage","Error","message","String"],"sourceRoot":"../../../../src","sources":["ui/components/FontLoader.tsx"],"mappings":";;AACA,SAASA,QAAQ,EAAEC,SAAS,QAAQ,OAAO;AAC3C,SAASC,QAAQ,QAAQ,cAAc;AACvC,OAAO,KAAKC,IAAI,MAAM,WAAW;;AAEjC;AAAA,SAAAC,QAAA,IAAAC,SAAA,EAAAC,GAAA,IAAAC,IAAA;AACA,MAAMC,aAAa,GAAGC,OAAO,CAAC,4CAA4C,CAAC;AAE3E,MAAMC,YAAY,GAAG,CAAC,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,UAAU,EAAE,MAAM,EAAE,WAAW,EAAE,OAAO,CAAU;;AAEtG;AACA;AACA;AACA;AACA;AACA,MAAMC,aAAa,GAAGA,CAAA,KAA2B;EAC7C,MAAMC,OAA4B,GAAG,CAAC,CAAC;EACvCA,OAAO,CAAC,OAAO,CAAC,GAAGJ,aAAa;EAChC,KAAK,MAAMK,MAAM,IAAIH,YAAY,EAAE;IAC/BE,OAAO,CAAC,SAASC,MAAM,EAAE,CAAC,GAAGL,aAAa;EAC9C;EACA,OAAOI,OAAO;AAClB,CAAC;;AAED;AACA;AACA;AACA;AACA,OAAO,MAAME,UAAU,GAAGA,CAAC;EACvBC;AAGJ,CAAC,KAAK;EACF,MAAM,CAACC,SAAS,EAAEC,YAAY,CAAC,GAAGjB,QAAQ,CAAiC,SAAS,CAAC;EAErFC,SAAS,CAAC,MAAM;IACZE,IAAI,CAACe,SAAS,CAACP,aAAa,CAAC,CAAC,CAAC,CAC1BQ,IAAI,CAAC,MAAMF,YAAY,CAAC,QAAQ,CAAC,CAAC,CAClCG,KAAK,CAAEC,KAAK,IAAK;MACd,IAAIC,OAAO,EAAE;QACTC,OAAO,CAACF,KAAK,CAAC,sBAAsB,EAAEA,KAAK,CAAC;MAChD;MACAJ,YAAY,CAAC,OAAO,CAAC;IACzB,CAAC,CAAC;EACV,CAAC,EAAE,EAAE,CAAC;EAEN,IAAID,SAAS,KAAK,OAAO,IAAIM,OAAO,EAAE;IAClCC,OAAO,CAACC,IAAI,CAAC,mDAAmD,CAAC;EACrE;EAEA,oBAAOjB,IAAA,CAAAF,SAAA;IAAAU,QAAA,EAAGA;EAAQ,CAAG,CAAC;AAC1B,CAAC;;AAED;AACA;AACA;AACA,OAAO,MAAMU,UAAU,GAAG,MAAAA,CAAA,KAA8B;EACpD,IAAI;IACA,MAAMC,UAAU,GAAGf,aAAa,CAAC,CAAC;IAElC,IAAIT,QAAQ,CAACyB,EAAE,KAAK,KAAK,EAAE;MACvB,IAAI,OAAOC,QAAQ,KAAK,WAAW,EAAE;QACjC,MAAMC,KAAK,GAAGD,QAAQ,CAACE,aAAa,CAAC,OAAO,CAAC;QAC7CD,KAAK,CAACE,WAAW,GAAG;AACpC;AACA;AACA,mCAAmCvB,aAAa;AAChD;AACA;AACA;AACA,iBAAiB;QACDoB,QAAQ,CAACI,IAAI,CAACC,WAAW,CAACJ,KAAK,CAAC;MACpC;IACJ,CAAC,MAAM;MACH,MAAM1B,IAAI,CAACe,SAAS,CAACQ,UAAU,CAAC;IACpC;IAEA,OAAO,IAAI;EACf,CAAC,CAAC,OAAOL,KAAc,EAAE;IACrB,IAAIC,OAAO,EAAE;MACT,MAAMY,YAAY,GAAGb,KAAK,YAAYc,KAAK,GAAGd,KAAK,CAACe,OAAO,GAAGC,MAAM,CAAChB,KAAK,CAAC;MAC3EE,OAAO,CAACC,IAAI,CAAC,yBAAyB,EAAEU,YAAY,CAAC;IACzD;IACA,OAAO,KAAK;EAChB;AACJ,CAAC","ignoreList":[]}
|
|
@@ -1,15 +1,13 @@
|
|
|
1
1
|
import type React from 'react';
|
|
2
2
|
/**
|
|
3
|
-
* FontLoader component that loads custom fonts in the background while rendering children immediately
|
|
4
|
-
*
|
|
5
|
-
* Children render immediately with system fonts as fallback until custom fonts are loaded
|
|
3
|
+
* FontLoader component that loads custom fonts in the background while rendering children immediately.
|
|
4
|
+
* Children render immediately with system fonts as fallback until custom fonts are loaded.
|
|
6
5
|
*/
|
|
7
6
|
export declare const FontLoader: ({ children, }: {
|
|
8
7
|
children: React.ReactNode;
|
|
9
8
|
}) => import("react/jsx-runtime").JSX.Element;
|
|
10
9
|
/**
|
|
11
|
-
* Setup fonts for applications consuming this package
|
|
12
|
-
* This should be called by applications using your package
|
|
10
|
+
* Setup fonts for applications consuming this package.
|
|
13
11
|
*/
|
|
14
12
|
export declare const setupFonts: () => Promise<boolean>;
|
|
15
13
|
//# sourceMappingURL=FontLoader.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FontLoader.d.ts","sourceRoot":"","sources":["../../../../../src/ui/components/FontLoader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"FontLoader.d.ts","sourceRoot":"","sources":["../../../../../src/ui/components/FontLoader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAwB/B;;;GAGG;AACH,eAAO,MAAM,UAAU,GAAI,eAExB;IACC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC7B,4CAmBA,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,UAAU,QAAa,OAAO,CAAC,OAAO,CA6BlD,CAAC"}
|
|
@@ -1,15 +1,13 @@
|
|
|
1
1
|
import type React from 'react';
|
|
2
2
|
/**
|
|
3
|
-
* FontLoader component that loads custom fonts in the background while rendering children immediately
|
|
4
|
-
*
|
|
5
|
-
* Children render immediately with system fonts as fallback until custom fonts are loaded
|
|
3
|
+
* FontLoader component that loads custom fonts in the background while rendering children immediately.
|
|
4
|
+
* Children render immediately with system fonts as fallback until custom fonts are loaded.
|
|
6
5
|
*/
|
|
7
6
|
export declare const FontLoader: ({ children, }: {
|
|
8
7
|
children: React.ReactNode;
|
|
9
8
|
}) => import("react/jsx-runtime").JSX.Element;
|
|
10
9
|
/**
|
|
11
|
-
* Setup fonts for applications consuming this package
|
|
12
|
-
* This should be called by applications using your package
|
|
10
|
+
* Setup fonts for applications consuming this package.
|
|
13
11
|
*/
|
|
14
12
|
export declare const setupFonts: () => Promise<boolean>;
|
|
15
13
|
//# sourceMappingURL=FontLoader.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FontLoader.d.ts","sourceRoot":"","sources":["../../../../../src/ui/components/FontLoader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"FontLoader.d.ts","sourceRoot":"","sources":["../../../../../src/ui/components/FontLoader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAwB/B;;;GAGG;AACH,eAAO,MAAM,UAAU,GAAI,eAExB;IACC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC7B,4CAmBA,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,UAAU,QAAa,OAAO,CAAC,OAAO,CA6BlD,CAAC"}
|
package/package.json
CHANGED
|
Binary file
|
|
@@ -3,35 +3,28 @@ import { useState, useEffect } from 'react';
|
|
|
3
3
|
import { Platform } from 'react-native';
|
|
4
4
|
import * as Font from 'expo-font';
|
|
5
5
|
|
|
6
|
+
// Single variable font file that covers all weights (100–900)
|
|
7
|
+
const InterVariable = require('../../assets/fonts/Inter/InterVariable.ttf');
|
|
8
|
+
|
|
9
|
+
const WEIGHT_NAMES = ['Light', 'Regular', 'Medium', 'SemiBold', 'Bold', 'ExtraBold', 'Black'] as const;
|
|
10
|
+
|
|
6
11
|
/**
|
|
7
|
-
*
|
|
8
|
-
*
|
|
12
|
+
* Build a font map using the single InterVariable.ttf for all weight aliases.
|
|
13
|
+
* A variable font contains every weight in one file, so we register it once
|
|
14
|
+
* per alias (e.g. Inter-Regular, Inter-Bold) to keep fontFamily references working.
|
|
9
15
|
*/
|
|
10
|
-
const getInterFonts = () => {
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
'Inter-Light': require('../../assets/fonts/Inter/Inter_18pt-Light.ttf'),
|
|
16
|
-
'Inter-Regular': require('../../assets/fonts/Inter/Inter_18pt-Regular.ttf'),
|
|
17
|
-
'Inter-Medium': require('../../assets/fonts/Inter/Inter_18pt-Medium.ttf'),
|
|
18
|
-
'Inter-SemiBold': require('../../assets/fonts/Inter/Inter_18pt-SemiBold.ttf'),
|
|
19
|
-
'Inter-Bold': require('../../assets/fonts/Inter/Inter_18pt-Bold.ttf'),
|
|
20
|
-
'Inter-ExtraBold': require('../../assets/fonts/Inter/Inter_18pt-ExtraBold.ttf'),
|
|
21
|
-
'Inter-Black': require('../../assets/fonts/Inter/Inter_18pt-Black.ttf'),
|
|
22
|
-
};
|
|
23
|
-
} catch (error) {
|
|
24
|
-
if (__DEV__) {
|
|
25
|
-
console.warn('Failed to load Inter fonts:', error);
|
|
26
|
-
}
|
|
27
|
-
return null;
|
|
16
|
+
const getInterFonts = (): Record<string, any> => {
|
|
17
|
+
const fontMap: Record<string, any> = {};
|
|
18
|
+
fontMap['Inter'] = InterVariable;
|
|
19
|
+
for (const weight of WEIGHT_NAMES) {
|
|
20
|
+
fontMap[`Inter-${weight}`] = InterVariable;
|
|
28
21
|
}
|
|
22
|
+
return fontMap;
|
|
29
23
|
};
|
|
30
24
|
|
|
31
25
|
/**
|
|
32
|
-
* FontLoader component that loads custom fonts in the background while rendering children immediately
|
|
33
|
-
*
|
|
34
|
-
* Children render immediately with system fonts as fallback until custom fonts are loaded
|
|
26
|
+
* FontLoader component that loads custom fonts in the background while rendering children immediately.
|
|
27
|
+
* Children render immediately with system fonts as fallback until custom fonts are loaded.
|
|
35
28
|
*/
|
|
36
29
|
export const FontLoader = ({
|
|
37
30
|
children,
|
|
@@ -41,122 +34,53 @@ export const FontLoader = ({
|
|
|
41
34
|
const [fontState, setFontState] = useState<'loading' | 'loaded' | 'error'>('loading');
|
|
42
35
|
|
|
43
36
|
useEffect(() => {
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
const interFonts = getInterFonts();
|
|
48
|
-
|
|
49
|
-
if (!interFonts) {
|
|
50
|
-
throw new Error('Inter font files not found');
|
|
51
|
-
}
|
|
52
|
-
|
|
53
|
-
// Load all the static Inter fonts with their respective weights
|
|
54
|
-
await Font.loadAsync(interFonts);
|
|
55
|
-
|
|
56
|
-
setFontState('loaded');
|
|
57
|
-
} catch (error) {
|
|
37
|
+
Font.loadAsync(getInterFonts())
|
|
38
|
+
.then(() => setFontState('loaded'))
|
|
39
|
+
.catch((error) => {
|
|
58
40
|
if (__DEV__) {
|
|
59
|
-
|
|
41
|
+
console.error('Error loading fonts:', error);
|
|
60
42
|
}
|
|
61
43
|
setFontState('error');
|
|
62
|
-
}
|
|
63
|
-
};
|
|
64
|
-
|
|
65
|
-
loadFonts();
|
|
44
|
+
});
|
|
66
45
|
}, []);
|
|
67
46
|
|
|
68
|
-
// Always render children immediately - fonts will load in background
|
|
69
|
-
// If fonts aren't loaded yet, the app will use system fonts as fallback
|
|
70
47
|
if (fontState === 'error' && __DEV__) {
|
|
71
48
|
console.warn('Fonts failed to load. Using system fonts instead.');
|
|
72
49
|
}
|
|
73
50
|
|
|
74
|
-
// Render children immediately, even while fonts are loading
|
|
75
|
-
// Fonts will apply when they're ready, otherwise system fonts are used
|
|
76
51
|
return <>{children}</>;
|
|
77
52
|
};
|
|
78
53
|
|
|
79
54
|
/**
|
|
80
|
-
* Setup fonts for applications consuming this package
|
|
81
|
-
* This should be called by applications using your package
|
|
55
|
+
* Setup fonts for applications consuming this package.
|
|
82
56
|
*/
|
|
83
|
-
export const setupFonts = async () => {
|
|
57
|
+
export const setupFonts = async (): Promise<boolean> => {
|
|
84
58
|
try {
|
|
85
59
|
const interFonts = getInterFonts();
|
|
86
60
|
|
|
87
|
-
if (!interFonts) {
|
|
88
|
-
throw new Error('Inter font files not found');
|
|
89
|
-
}
|
|
90
|
-
|
|
91
61
|
if (Platform.OS === 'web') {
|
|
92
|
-
// For web platform, dynamically inject CSS to load the fonts
|
|
93
62
|
if (typeof document !== 'undefined') {
|
|
94
|
-
// Create a style element
|
|
95
63
|
const style = document.createElement('style');
|
|
96
|
-
|
|
97
|
-
// Define @font-face rules for each font weight
|
|
98
|
-
const fontFaceRules = `
|
|
99
|
-
@font-face {
|
|
100
|
-
font-family: 'Inter';
|
|
101
|
-
src: url(${interFonts['Inter-Light']}) format('truetype');
|
|
102
|
-
font-weight: 300;
|
|
103
|
-
font-style: normal;
|
|
104
|
-
}
|
|
105
|
-
@font-face {
|
|
106
|
-
font-family: 'Inter';
|
|
107
|
-
src: url(${interFonts['Inter-Regular']}) format('truetype');
|
|
108
|
-
font-weight: 400;
|
|
109
|
-
font-style: normal;
|
|
110
|
-
}
|
|
111
|
-
@font-face {
|
|
112
|
-
font-family: 'Inter';
|
|
113
|
-
src: url(${interFonts['Inter-Medium']}) format('truetype');
|
|
114
|
-
font-weight: 500;
|
|
115
|
-
font-style: normal;
|
|
116
|
-
}
|
|
64
|
+
style.textContent = `
|
|
117
65
|
@font-face {
|
|
118
66
|
font-family: 'Inter';
|
|
119
|
-
src: url(${
|
|
120
|
-
font-weight:
|
|
121
|
-
font-style: normal;
|
|
122
|
-
}
|
|
123
|
-
@font-face {
|
|
124
|
-
font-family: 'Inter';
|
|
125
|
-
src: url(${interFonts['Inter-Bold']}) format('truetype');
|
|
126
|
-
font-weight: 700;
|
|
127
|
-
font-style: normal;
|
|
128
|
-
}
|
|
129
|
-
@font-face {
|
|
130
|
-
font-family: 'Inter';
|
|
131
|
-
src: url(${interFonts['Inter-ExtraBold']}) format('truetype');
|
|
132
|
-
font-weight: 800;
|
|
133
|
-
font-style: normal;
|
|
134
|
-
}
|
|
135
|
-
@font-face {
|
|
136
|
-
font-family: 'Inter';
|
|
137
|
-
src: url(${interFonts['Inter-Black']}) format('truetype');
|
|
138
|
-
font-weight: 900;
|
|
67
|
+
src: url(${InterVariable}) format('truetype');
|
|
68
|
+
font-weight: 100 900;
|
|
139
69
|
font-style: normal;
|
|
140
70
|
}
|
|
141
71
|
`;
|
|
142
|
-
|
|
143
|
-
style.textContent = fontFaceRules;
|
|
144
72
|
document.head.appendChild(style);
|
|
145
|
-
if (__DEV__) {
|
|
146
|
-
console.info('All Inter web fonts have been dynamically loaded');
|
|
147
|
-
}
|
|
148
73
|
}
|
|
149
74
|
} else {
|
|
150
|
-
// Attempt to load the fonts anyway (this works if the consumer has linked the assets)
|
|
151
75
|
await Font.loadAsync(interFonts);
|
|
152
76
|
}
|
|
153
77
|
|
|
154
78
|
return true;
|
|
155
79
|
} catch (error: unknown) {
|
|
156
80
|
if (__DEV__) {
|
|
157
|
-
|
|
158
|
-
|
|
81
|
+
const errorMessage = error instanceof Error ? error.message : String(error);
|
|
82
|
+
console.warn('Error setting up fonts:', errorMessage);
|
|
159
83
|
}
|
|
160
84
|
return false;
|
|
161
85
|
}
|
|
162
|
-
};
|
|
86
|
+
};
|