@xsolla/xui-core 0.99.0 → 0.100.0-pr159.1771990165
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/index.d.mts +28 -1
- package/index.d.ts +28 -1
- package/index.js +111 -16
- package/index.js.flow +36 -4
- package/index.js.map +1 -1
- package/index.mjs +103 -10
- package/index.mjs.map +1 -1
- package/package.json +1 -1
package/index.d.mts
CHANGED
|
@@ -1040,6 +1040,9 @@ declare const shadow: {
|
|
|
1040
1040
|
};
|
|
1041
1041
|
|
|
1042
1042
|
declare const fonts: {
|
|
1043
|
+
heading: string;
|
|
1044
|
+
body: string;
|
|
1045
|
+
/** @deprecated Use `heading` or `body` instead */
|
|
1043
1046
|
primary: string;
|
|
1044
1047
|
};
|
|
1045
1048
|
declare const typography: {
|
|
@@ -1054,6 +1057,24 @@ declare const isNative: boolean;
|
|
|
1054
1057
|
declare const isIOS: boolean;
|
|
1055
1058
|
declare const isAndroid: boolean;
|
|
1056
1059
|
|
|
1060
|
+
/**
|
|
1061
|
+
* React component that loads the toolkit's font-face declarations.
|
|
1062
|
+
* Drop-in for any framework — works in Next.js, Vite, CRA, etc.
|
|
1063
|
+
*
|
|
1064
|
+
* Renders nothing to the DOM. Injects a single `<style>` tag into `<head>` on mount.
|
|
1065
|
+
*/
|
|
1066
|
+
declare const FontLoader: React.FC;
|
|
1067
|
+
|
|
1068
|
+
/**
|
|
1069
|
+
* @font-face CSS for all toolkit fonts, loaded from Xsolla CDN.
|
|
1070
|
+
*
|
|
1071
|
+
* Pilat Wide — heading/display font, registered at weights 600–800.
|
|
1072
|
+
*
|
|
1073
|
+
* Aktiv Grotesk — body font, mapped from the Sharp Grotesk CDN files
|
|
1074
|
+
* which are the same typeface under a legacy name.
|
|
1075
|
+
*/
|
|
1076
|
+
declare const fontFacesCSS = "\n /* \u2500\u2500 Pilat Wide (headings) \u2500\u2500 */\n\n @font-face {\n font-family: 'Pilat Wide';\n src: url('https://cdn.xsolla.net/strapi-v2-bucket-prod/Pilat_Test_Demi_Bold_bee67c470a/Pilat_Test_Demi_Bold_bee67c470a.ttf') format('truetype');\n font-weight: 600;\n font-style: normal;\n font-display: swap;\n }\n @font-face {\n font-family: 'Pilat Wide';\n src: url('https://cdn.xsolla.net/strapi-v2-bucket-prod/Pilat_Test_Bold_b12b40d234/Pilat_Test_Bold_b12b40d234.ttf') format('truetype');\n font-weight: 700;\n font-style: normal;\n font-display: swap;\n }\n @font-face {\n font-family: 'Pilat Wide';\n src: url('https://cdn.xsolla.net/strapi-v2-bucket-prod/Pilat_Test_Heavy_2885678ca4/Pilat_Test_Heavy_2885678ca4.otf') format('opentype');\n font-weight: 800;\n font-style: normal;\n font-display: swap;\n }\n\n /* \u2500\u2500 Aktiv Grotesk (body) \u2014 served from Sharp Grotesk CDN files \u2500\u2500 */\n\n @font-face {\n font-family: 'Aktiv Grotesk';\n src: url('https://cdn.xsolla.net/strapi-v2-bucket-prod/Pilat_Test_Light_c4650750bb/Pilat_Test_Light_c4650750bb.otf') format('opentype');\n font-weight: 300;\n font-style: normal;\n font-display: swap;\n }\n @font-face {\n font-family: 'Aktiv Grotesk';\n src: url('https://cdn.xsolla.net/strapi-v2-bucket-prod/Pilat_Test_Book_5cb49cd592/Pilat_Test_Book_5cb49cd592.otf') format('opentype');\n font-weight: 400;\n font-style: normal;\n font-display: swap;\n }\n @font-face {\n font-family: 'Aktiv Grotesk';\n src: url('https://cdn.xsolla.net/strapi-v2-bucket-prod/Pilat_Test_Demi_e9bed59107/Pilat_Test_Demi_e9bed59107.otf') format('opentype');\n font-weight: 500;\n font-style: normal;\n font-display: swap;\n }\n @font-face {\n font-family: 'Aktiv Grotesk';\n src: url('https://cdn.xsolla.net/strapi-v2-bucket-prod/Pilat_Test_Bold_195d1b44fa/Pilat_Test_Bold_195d1b44fa.otf') format('opentype');\n font-weight: 700;\n font-style: normal;\n font-display: swap;\n }\n";
|
|
1077
|
+
|
|
1057
1078
|
type ThemeMode = "dark" | "light";
|
|
1058
1079
|
declare const themeConfig: (mode?: ThemeMode) => {
|
|
1059
1080
|
colors: {
|
|
@@ -1748,10 +1769,14 @@ declare const themeConfig: (mode?: ThemeMode) => {
|
|
|
1748
1769
|
modal: string;
|
|
1749
1770
|
};
|
|
1750
1771
|
fonts: {
|
|
1772
|
+
heading: string;
|
|
1773
|
+
body: string;
|
|
1751
1774
|
primary: string;
|
|
1752
1775
|
};
|
|
1753
1776
|
typography: {
|
|
1754
1777
|
primary: string;
|
|
1778
|
+
heading: string;
|
|
1779
|
+
body: string;
|
|
1755
1780
|
};
|
|
1756
1781
|
sizing: {
|
|
1757
1782
|
button: (size: "xl" | "lg" | "md" | "sm" | "xs") => {
|
|
@@ -2607,6 +2632,8 @@ interface DesignSystemContextType {
|
|
|
2607
2632
|
declare const XUIProvider: React.FC<{
|
|
2608
2633
|
children: React.ReactNode;
|
|
2609
2634
|
initialMode?: ThemeMode;
|
|
2635
|
+
/** Load toolkit fonts from the Xsolla CDN. Defaults to true on web, no-ops on native. */
|
|
2636
|
+
loadFonts?: boolean;
|
|
2610
2637
|
}>;
|
|
2611
2638
|
declare const useDesignSystem: () => DesignSystemContextType;
|
|
2612
2639
|
declare const useId: () => string;
|
|
@@ -2623,4 +2650,4 @@ declare const ModalIdContext: React.Context<string | null>;
|
|
|
2623
2650
|
*/
|
|
2624
2651
|
declare const useModalId: () => string | null;
|
|
2625
2652
|
|
|
2626
|
-
export { ModalIdContext, type ThemeColors, type ThemeMode, XUIProvider, colors, fonts, isAndroid, isIOS, isNative, isWeb, radius, shadow, spacing, themeConfig, typography, useDesignSystem, useId, useModalId };
|
|
2653
|
+
export { FontLoader, ModalIdContext, type ThemeColors, type ThemeMode, XUIProvider, colors, fontFacesCSS, fonts, isAndroid, isIOS, isNative, isWeb, radius, shadow, spacing, themeConfig, typography, useDesignSystem, useId, useModalId };
|
package/index.d.ts
CHANGED
|
@@ -1040,6 +1040,9 @@ declare const shadow: {
|
|
|
1040
1040
|
};
|
|
1041
1041
|
|
|
1042
1042
|
declare const fonts: {
|
|
1043
|
+
heading: string;
|
|
1044
|
+
body: string;
|
|
1045
|
+
/** @deprecated Use `heading` or `body` instead */
|
|
1043
1046
|
primary: string;
|
|
1044
1047
|
};
|
|
1045
1048
|
declare const typography: {
|
|
@@ -1054,6 +1057,24 @@ declare const isNative: boolean;
|
|
|
1054
1057
|
declare const isIOS: boolean;
|
|
1055
1058
|
declare const isAndroid: boolean;
|
|
1056
1059
|
|
|
1060
|
+
/**
|
|
1061
|
+
* React component that loads the toolkit's font-face declarations.
|
|
1062
|
+
* Drop-in for any framework — works in Next.js, Vite, CRA, etc.
|
|
1063
|
+
*
|
|
1064
|
+
* Renders nothing to the DOM. Injects a single `<style>` tag into `<head>` on mount.
|
|
1065
|
+
*/
|
|
1066
|
+
declare const FontLoader: React.FC;
|
|
1067
|
+
|
|
1068
|
+
/**
|
|
1069
|
+
* @font-face CSS for all toolkit fonts, loaded from Xsolla CDN.
|
|
1070
|
+
*
|
|
1071
|
+
* Pilat Wide — heading/display font, registered at weights 600–800.
|
|
1072
|
+
*
|
|
1073
|
+
* Aktiv Grotesk — body font, mapped from the Sharp Grotesk CDN files
|
|
1074
|
+
* which are the same typeface under a legacy name.
|
|
1075
|
+
*/
|
|
1076
|
+
declare const fontFacesCSS = "\n /* \u2500\u2500 Pilat Wide (headings) \u2500\u2500 */\n\n @font-face {\n font-family: 'Pilat Wide';\n src: url('https://cdn.xsolla.net/strapi-v2-bucket-prod/Pilat_Test_Demi_Bold_bee67c470a/Pilat_Test_Demi_Bold_bee67c470a.ttf') format('truetype');\n font-weight: 600;\n font-style: normal;\n font-display: swap;\n }\n @font-face {\n font-family: 'Pilat Wide';\n src: url('https://cdn.xsolla.net/strapi-v2-bucket-prod/Pilat_Test_Bold_b12b40d234/Pilat_Test_Bold_b12b40d234.ttf') format('truetype');\n font-weight: 700;\n font-style: normal;\n font-display: swap;\n }\n @font-face {\n font-family: 'Pilat Wide';\n src: url('https://cdn.xsolla.net/strapi-v2-bucket-prod/Pilat_Test_Heavy_2885678ca4/Pilat_Test_Heavy_2885678ca4.otf') format('opentype');\n font-weight: 800;\n font-style: normal;\n font-display: swap;\n }\n\n /* \u2500\u2500 Aktiv Grotesk (body) \u2014 served from Sharp Grotesk CDN files \u2500\u2500 */\n\n @font-face {\n font-family: 'Aktiv Grotesk';\n src: url('https://cdn.xsolla.net/strapi-v2-bucket-prod/Pilat_Test_Light_c4650750bb/Pilat_Test_Light_c4650750bb.otf') format('opentype');\n font-weight: 300;\n font-style: normal;\n font-display: swap;\n }\n @font-face {\n font-family: 'Aktiv Grotesk';\n src: url('https://cdn.xsolla.net/strapi-v2-bucket-prod/Pilat_Test_Book_5cb49cd592/Pilat_Test_Book_5cb49cd592.otf') format('opentype');\n font-weight: 400;\n font-style: normal;\n font-display: swap;\n }\n @font-face {\n font-family: 'Aktiv Grotesk';\n src: url('https://cdn.xsolla.net/strapi-v2-bucket-prod/Pilat_Test_Demi_e9bed59107/Pilat_Test_Demi_e9bed59107.otf') format('opentype');\n font-weight: 500;\n font-style: normal;\n font-display: swap;\n }\n @font-face {\n font-family: 'Aktiv Grotesk';\n src: url('https://cdn.xsolla.net/strapi-v2-bucket-prod/Pilat_Test_Bold_195d1b44fa/Pilat_Test_Bold_195d1b44fa.otf') format('opentype');\n font-weight: 700;\n font-style: normal;\n font-display: swap;\n }\n";
|
|
1077
|
+
|
|
1057
1078
|
type ThemeMode = "dark" | "light";
|
|
1058
1079
|
declare const themeConfig: (mode?: ThemeMode) => {
|
|
1059
1080
|
colors: {
|
|
@@ -1748,10 +1769,14 @@ declare const themeConfig: (mode?: ThemeMode) => {
|
|
|
1748
1769
|
modal: string;
|
|
1749
1770
|
};
|
|
1750
1771
|
fonts: {
|
|
1772
|
+
heading: string;
|
|
1773
|
+
body: string;
|
|
1751
1774
|
primary: string;
|
|
1752
1775
|
};
|
|
1753
1776
|
typography: {
|
|
1754
1777
|
primary: string;
|
|
1778
|
+
heading: string;
|
|
1779
|
+
body: string;
|
|
1755
1780
|
};
|
|
1756
1781
|
sizing: {
|
|
1757
1782
|
button: (size: "xl" | "lg" | "md" | "sm" | "xs") => {
|
|
@@ -2607,6 +2632,8 @@ interface DesignSystemContextType {
|
|
|
2607
2632
|
declare const XUIProvider: React.FC<{
|
|
2608
2633
|
children: React.ReactNode;
|
|
2609
2634
|
initialMode?: ThemeMode;
|
|
2635
|
+
/** Load toolkit fonts from the Xsolla CDN. Defaults to true on web, no-ops on native. */
|
|
2636
|
+
loadFonts?: boolean;
|
|
2610
2637
|
}>;
|
|
2611
2638
|
declare const useDesignSystem: () => DesignSystemContextType;
|
|
2612
2639
|
declare const useId: () => string;
|
|
@@ -2623,4 +2650,4 @@ declare const ModalIdContext: React.Context<string | null>;
|
|
|
2623
2650
|
*/
|
|
2624
2651
|
declare const useModalId: () => string | null;
|
|
2625
2652
|
|
|
2626
|
-
export { ModalIdContext, type ThemeColors, type ThemeMode, XUIProvider, colors, fonts, isAndroid, isIOS, isNative, isWeb, radius, shadow, spacing, themeConfig, typography, useDesignSystem, useId, useModalId };
|
|
2653
|
+
export { FontLoader, ModalIdContext, type ThemeColors, type ThemeMode, XUIProvider, colors, fontFacesCSS, fonts, isAndroid, isIOS, isNative, isWeb, radius, shadow, spacing, themeConfig, typography, useDesignSystem, useId, useModalId };
|
package/index.js
CHANGED
|
@@ -30,9 +30,11 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
|
|
|
30
30
|
// src/index.tsx
|
|
31
31
|
var index_exports = {};
|
|
32
32
|
__export(index_exports, {
|
|
33
|
+
FontLoader: () => FontLoader,
|
|
33
34
|
ModalIdContext: () => ModalIdContext,
|
|
34
35
|
XUIProvider: () => XUIProvider,
|
|
35
36
|
colors: () => colors,
|
|
37
|
+
fontFacesCSS: () => fontFacesCSS,
|
|
36
38
|
fonts: () => fonts,
|
|
37
39
|
isAndroid: () => isAndroid,
|
|
38
40
|
isIOS: () => isIOS,
|
|
@@ -48,7 +50,7 @@ __export(index_exports, {
|
|
|
48
50
|
useModalId: () => useModalId
|
|
49
51
|
});
|
|
50
52
|
module.exports = __toCommonJS(index_exports);
|
|
51
|
-
var
|
|
53
|
+
var import_react2 = __toESM(require("react"));
|
|
52
54
|
|
|
53
55
|
// src/tokens/xsolla-dark.json
|
|
54
56
|
var xsolla_dark_default = {
|
|
@@ -758,22 +760,108 @@ var shadow = {
|
|
|
758
760
|
|
|
759
761
|
// src/tokens/fonts.ts
|
|
760
762
|
var fonts = {
|
|
761
|
-
|
|
762
|
-
|
|
763
|
+
heading: '"Pilat Wide", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif',
|
|
764
|
+
body: '"Aktiv Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif',
|
|
765
|
+
/** @deprecated Use `heading` or `body` instead */
|
|
766
|
+
primary: '"Aktiv Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif'
|
|
763
767
|
};
|
|
764
768
|
var typography = {
|
|
765
769
|
button: {
|
|
766
|
-
fontFamily: fonts.
|
|
770
|
+
fontFamily: fonts.body,
|
|
767
771
|
fontWeight: "bold"
|
|
768
772
|
}
|
|
769
773
|
};
|
|
770
774
|
|
|
775
|
+
// src/fonts/FontLoader.tsx
|
|
776
|
+
var import_react = require("react");
|
|
777
|
+
|
|
771
778
|
// src/platform.ts
|
|
772
779
|
var isWeb = typeof document !== "undefined";
|
|
773
780
|
var isNative = !isWeb;
|
|
774
781
|
var isIOS = isNative && typeof global !== "undefined" && global.Platform?.OS === "ios";
|
|
775
782
|
var isAndroid = isNative && typeof global !== "undefined" && global.Platform?.OS === "android";
|
|
776
783
|
|
|
784
|
+
// src/fonts/fontFaces.ts
|
|
785
|
+
var CDN_BASE = "https://cdn.xsolla.net/strapi-v2-bucket-prod";
|
|
786
|
+
var fontFacesCSS = `
|
|
787
|
+
/* \u2500\u2500 Pilat Wide (headings) \u2500\u2500 */
|
|
788
|
+
|
|
789
|
+
@font-face {
|
|
790
|
+
font-family: 'Pilat Wide';
|
|
791
|
+
src: url('${CDN_BASE}/Pilat_Test_Demi_Bold_bee67c470a/Pilat_Test_Demi_Bold_bee67c470a.ttf') format('truetype');
|
|
792
|
+
font-weight: 600;
|
|
793
|
+
font-style: normal;
|
|
794
|
+
font-display: swap;
|
|
795
|
+
}
|
|
796
|
+
@font-face {
|
|
797
|
+
font-family: 'Pilat Wide';
|
|
798
|
+
src: url('${CDN_BASE}/Pilat_Test_Bold_b12b40d234/Pilat_Test_Bold_b12b40d234.ttf') format('truetype');
|
|
799
|
+
font-weight: 700;
|
|
800
|
+
font-style: normal;
|
|
801
|
+
font-display: swap;
|
|
802
|
+
}
|
|
803
|
+
@font-face {
|
|
804
|
+
font-family: 'Pilat Wide';
|
|
805
|
+
src: url('${CDN_BASE}/Pilat_Test_Heavy_2885678ca4/Pilat_Test_Heavy_2885678ca4.otf') format('opentype');
|
|
806
|
+
font-weight: 800;
|
|
807
|
+
font-style: normal;
|
|
808
|
+
font-display: swap;
|
|
809
|
+
}
|
|
810
|
+
|
|
811
|
+
/* \u2500\u2500 Aktiv Grotesk (body) \u2014 served from Sharp Grotesk CDN files \u2500\u2500 */
|
|
812
|
+
|
|
813
|
+
@font-face {
|
|
814
|
+
font-family: 'Aktiv Grotesk';
|
|
815
|
+
src: url('${CDN_BASE}/Pilat_Test_Light_c4650750bb/Pilat_Test_Light_c4650750bb.otf') format('opentype');
|
|
816
|
+
font-weight: 300;
|
|
817
|
+
font-style: normal;
|
|
818
|
+
font-display: swap;
|
|
819
|
+
}
|
|
820
|
+
@font-face {
|
|
821
|
+
font-family: 'Aktiv Grotesk';
|
|
822
|
+
src: url('${CDN_BASE}/Pilat_Test_Book_5cb49cd592/Pilat_Test_Book_5cb49cd592.otf') format('opentype');
|
|
823
|
+
font-weight: 400;
|
|
824
|
+
font-style: normal;
|
|
825
|
+
font-display: swap;
|
|
826
|
+
}
|
|
827
|
+
@font-face {
|
|
828
|
+
font-family: 'Aktiv Grotesk';
|
|
829
|
+
src: url('${CDN_BASE}/Pilat_Test_Demi_e9bed59107/Pilat_Test_Demi_e9bed59107.otf') format('opentype');
|
|
830
|
+
font-weight: 500;
|
|
831
|
+
font-style: normal;
|
|
832
|
+
font-display: swap;
|
|
833
|
+
}
|
|
834
|
+
@font-face {
|
|
835
|
+
font-family: 'Aktiv Grotesk';
|
|
836
|
+
src: url('${CDN_BASE}/Pilat_Test_Bold_195d1b44fa/Pilat_Test_Bold_195d1b44fa.otf') format('opentype');
|
|
837
|
+
font-weight: 700;
|
|
838
|
+
font-style: normal;
|
|
839
|
+
font-display: swap;
|
|
840
|
+
}
|
|
841
|
+
`;
|
|
842
|
+
|
|
843
|
+
// src/fonts/FontLoader.tsx
|
|
844
|
+
var injected = false;
|
|
845
|
+
function injectFontStyles() {
|
|
846
|
+
if (!isWeb || injected) return;
|
|
847
|
+
const style = document.createElement("style");
|
|
848
|
+
style.setAttribute("data-xui-fonts", "");
|
|
849
|
+
style.textContent = fontFacesCSS;
|
|
850
|
+
document.head.appendChild(style);
|
|
851
|
+
injected = true;
|
|
852
|
+
}
|
|
853
|
+
var FontLoader = () => {
|
|
854
|
+
const mountedRef = (0, import_react.useRef)(false);
|
|
855
|
+
(0, import_react.useEffect)(() => {
|
|
856
|
+
if (!mountedRef.current) {
|
|
857
|
+
injectFontStyles();
|
|
858
|
+
mountedRef.current = true;
|
|
859
|
+
}
|
|
860
|
+
}, []);
|
|
861
|
+
return null;
|
|
862
|
+
};
|
|
863
|
+
FontLoader.displayName = "FontLoader";
|
|
864
|
+
|
|
777
865
|
// src/index.tsx
|
|
778
866
|
var import_jsx_runtime = require("react/jsx-runtime");
|
|
779
867
|
var themeConfig = (mode = "dark") => ({
|
|
@@ -783,7 +871,9 @@ var themeConfig = (mode = "dark") => ({
|
|
|
783
871
|
shadow,
|
|
784
872
|
fonts,
|
|
785
873
|
typography: {
|
|
786
|
-
primary: fonts.
|
|
874
|
+
primary: fonts.body,
|
|
875
|
+
heading: fonts.heading,
|
|
876
|
+
body: fonts.body
|
|
787
877
|
},
|
|
788
878
|
sizing: {
|
|
789
879
|
button: (size) => {
|
|
@@ -1621,12 +1711,12 @@ var themeConfig = (mode = "dark") => ({
|
|
|
1621
1711
|
}
|
|
1622
1712
|
}
|
|
1623
1713
|
});
|
|
1624
|
-
var DesignSystemContext = (0,
|
|
1714
|
+
var DesignSystemContext = (0, import_react2.createContext)(
|
|
1625
1715
|
void 0
|
|
1626
1716
|
);
|
|
1627
|
-
var XUIProvider = ({ children, initialMode = "dark" }) => {
|
|
1628
|
-
const [mode, setMode] = (0,
|
|
1629
|
-
const value = (0,
|
|
1717
|
+
var XUIProvider = ({ children, initialMode = "dark", loadFonts = true }) => {
|
|
1718
|
+
const [mode, setMode] = (0, import_react2.useState)(initialMode);
|
|
1719
|
+
const value = (0, import_react2.useMemo)(
|
|
1630
1720
|
() => ({
|
|
1631
1721
|
mode,
|
|
1632
1722
|
setMode,
|
|
@@ -1634,10 +1724,13 @@ var XUIProvider = ({ children, initialMode = "dark" }) => {
|
|
|
1634
1724
|
}),
|
|
1635
1725
|
[mode]
|
|
1636
1726
|
);
|
|
1637
|
-
return /* @__PURE__ */ (0, import_jsx_runtime.
|
|
1727
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(DesignSystemContext.Provider, { value, children: [
|
|
1728
|
+
loadFonts && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(FontLoader, {}),
|
|
1729
|
+
children
|
|
1730
|
+
] });
|
|
1638
1731
|
};
|
|
1639
1732
|
var useDesignSystem = () => {
|
|
1640
|
-
const context = (0,
|
|
1733
|
+
const context = (0, import_react2.useContext)(DesignSystemContext);
|
|
1641
1734
|
if (!context) {
|
|
1642
1735
|
return {
|
|
1643
1736
|
mode: "dark",
|
|
@@ -1649,19 +1742,21 @@ var useDesignSystem = () => {
|
|
|
1649
1742
|
return context;
|
|
1650
1743
|
};
|
|
1651
1744
|
var idCounter = 0;
|
|
1652
|
-
var hasReactUseId = typeof
|
|
1745
|
+
var hasReactUseId = typeof import_react2.default.useId === "function";
|
|
1653
1746
|
var useIdFallback = () => {
|
|
1654
|
-
const [id] = (0,
|
|
1747
|
+
const [id] = (0, import_react2.useState)(() => `xui-${++idCounter}`);
|
|
1655
1748
|
return id;
|
|
1656
1749
|
};
|
|
1657
|
-
var useId = hasReactUseId ?
|
|
1658
|
-
var ModalIdContext = (0,
|
|
1659
|
-
var useModalId = () => (0,
|
|
1750
|
+
var useId = hasReactUseId ? import_react2.default.useId : useIdFallback;
|
|
1751
|
+
var ModalIdContext = (0, import_react2.createContext)(null);
|
|
1752
|
+
var useModalId = () => (0, import_react2.useContext)(ModalIdContext);
|
|
1660
1753
|
// Annotate the CommonJS export names for ESM import in node:
|
|
1661
1754
|
0 && (module.exports = {
|
|
1755
|
+
FontLoader,
|
|
1662
1756
|
ModalIdContext,
|
|
1663
1757
|
XUIProvider,
|
|
1664
1758
|
colors,
|
|
1759
|
+
fontFacesCSS,
|
|
1665
1760
|
fonts,
|
|
1666
1761
|
isAndroid,
|
|
1667
1762
|
isIOS,
|
package/index.js.flow
CHANGED
|
@@ -706,13 +706,36 @@ surfaceHover: string,
|
|
|
706
706
|
popover: string,
|
|
707
707
|
modal: string,...
|
|
708
708
|
};declare var fonts: {
|
|
709
|
+
heading: string,
|
|
710
|
+
body: string,
|
|
711
|
+
|
|
712
|
+
/**
|
|
713
|
+
* @deprecated Use `heading` or `body` instead
|
|
714
|
+
*/
|
|
709
715
|
primary: string,...
|
|
710
716
|
};declare var typography: {
|
|
711
717
|
button: {
|
|
712
718
|
fontFamily: string,
|
|
713
719
|
fontWeight: string,...
|
|
714
720
|
},...
|
|
715
|
-
};declare var isWeb: boolean;declare var isNative: boolean;declare var isIOS: boolean;declare var isAndroid: boolean;
|
|
721
|
+
};declare var isWeb: boolean;declare var isNative: boolean;declare var isIOS: boolean;declare var isAndroid: boolean;
|
|
722
|
+
/**
|
|
723
|
+
* React component that loads the toolkit's font-face declarations.
|
|
724
|
+
* Drop-in for any framework — works in Next.js, Vite, CRA, etc.
|
|
725
|
+
*
|
|
726
|
+
* Renders nothing to the DOM. Injects a single `<style>` tag into `<head>` on mount.
|
|
727
|
+
*/
|
|
728
|
+
declare var FontLoader: React.FC;
|
|
729
|
+
/**
|
|
730
|
+
* @font-face CSS for all toolkit fonts, loaded from Xsolla CDN.
|
|
731
|
+
*
|
|
732
|
+
* Pilat Wide — heading/display font, registered at weights 600–800.
|
|
733
|
+
*
|
|
734
|
+
* Aktiv Grotesk — body font, mapped from the Sharp Grotesk CDN files
|
|
735
|
+
* which are the same typeface under a legacy name.
|
|
736
|
+
*/
|
|
737
|
+
declare var fontFacesCSS: "\n /* ── Pilat Wide (headings) ── */\n\n @font-face {\n font-family: 'Pilat Wide';\n src: url('https://cdn.xsolla.net/strapi-v2-bucket-prod/Pilat_Test_Demi_Bold_bee67c470a/Pilat_Test_Demi_Bold_bee67c470a.ttf') format('truetype');\n font-weight: 600;\n font-style: normal;\n font-display: swap;\n }\n @font-face {\n font-family: 'Pilat Wide';\n src: url('https://cdn.xsolla.net/strapi-v2-bucket-prod/Pilat_Test_Bold_b12b40d234/Pilat_Test_Bold_b12b40d234.ttf') format('truetype');\n font-weight: 700;\n font-style: normal;\n font-display: swap;\n }\n @font-face {\n font-family: 'Pilat Wide';\n src: url('https://cdn.xsolla.net/strapi-v2-bucket-prod/Pilat_Test_Heavy_2885678ca4/Pilat_Test_Heavy_2885678ca4.otf') format('opentype');\n font-weight: 800;\n font-style: normal;\n font-display: swap;\n }\n\n /* ── Aktiv Grotesk (body) — served from Sharp Grotesk CDN files ── */\n\n @font-face {\n font-family: 'Aktiv Grotesk';\n src: url('https://cdn.xsolla.net/strapi-v2-bucket-prod/Pilat_Test_Light_c4650750bb/Pilat_Test_Light_c4650750bb.otf') format('opentype');\n font-weight: 300;\n font-style: normal;\n font-display: swap;\n }\n @font-face {\n font-family: 'Aktiv Grotesk';\n src: url('https://cdn.xsolla.net/strapi-v2-bucket-prod/Pilat_Test_Book_5cb49cd592/Pilat_Test_Book_5cb49cd592.otf') format('opentype');\n font-weight: 400;\n font-style: normal;\n font-display: swap;\n }\n @font-face {\n font-family: 'Aktiv Grotesk';\n src: url('https://cdn.xsolla.net/strapi-v2-bucket-prod/Pilat_Test_Demi_e9bed59107/Pilat_Test_Demi_e9bed59107.otf') format('opentype');\n font-weight: 500;\n font-style: normal;\n font-display: swap;\n }\n @font-face {\n font-family: 'Aktiv Grotesk';\n src: url('https://cdn.xsolla.net/strapi-v2-bucket-prod/Pilat_Test_Bold_195d1b44fa/Pilat_Test_Bold_195d1b44fa.otf') format('opentype');\n font-weight: 700;\n font-style: normal;\n font-display: swap;\n }\n"
|
|
738
|
+
;declare type ThemeMode = "dark" | "light";declare var themeConfig: (
|
|
716
739
|
mode?: ThemeMode) => {
|
|
717
740
|
colors: {
|
|
718
741
|
background: {
|
|
@@ -1406,10 +1429,14 @@ popover: string,
|
|
|
1406
1429
|
modal: string,...
|
|
1407
1430
|
},
|
|
1408
1431
|
fonts: {
|
|
1432
|
+
heading: string,
|
|
1433
|
+
body: string,
|
|
1409
1434
|
primary: string,...
|
|
1410
1435
|
},
|
|
1411
1436
|
typography: {
|
|
1412
|
-
primary: string
|
|
1437
|
+
primary: string,
|
|
1438
|
+
heading: string,
|
|
1439
|
+
body: string,...
|
|
1413
1440
|
},
|
|
1414
1441
|
sizing: {
|
|
1415
1442
|
button: (
|
|
@@ -2387,7 +2414,12 @@ setMode: (mode: ThemeMode) => void,
|
|
|
2387
2414
|
theme: $Call<<R>((...args: any[]) => R) => R, typeof themeConfig>,
|
|
2388
2415
|
} declare var XUIProvider: React.FC<{
|
|
2389
2416
|
children: React.ReactNode,
|
|
2390
|
-
initialMode?: ThemeMode
|
|
2417
|
+
initialMode?: ThemeMode,
|
|
2418
|
+
|
|
2419
|
+
/**
|
|
2420
|
+
* Load toolkit fonts from the Xsolla CDN. Defaults to true on web, no-ops on native.
|
|
2421
|
+
*/
|
|
2422
|
+
loadFonts?: boolean,...
|
|
2391
2423
|
}>;declare var useDesignSystem: () => DesignSystemContextType;declare var useId: () => string;
|
|
2392
2424
|
/**
|
|
2393
2425
|
* Context for the current modal's ID.
|
|
@@ -2404,5 +2436,5 @@ declare var useModalId: () => string | null;export type {
|
|
|
2404
2436
|
ThemeColors,ThemeMode
|
|
2405
2437
|
}
|
|
2406
2438
|
declare export {
|
|
2407
|
-
ModalIdContext,XUIProvider,colors,fonts,isAndroid,isIOS,isNative,isWeb,radius,shadow,spacing,themeConfig,typography,useDesignSystem,useId,useModalId
|
|
2439
|
+
FontLoader,ModalIdContext,XUIProvider,colors,fontFacesCSS,fonts,isAndroid,isIOS,isNative,isWeb,radius,shadow,spacing,themeConfig,typography,useDesignSystem,useId,useModalId
|
|
2408
2440
|
}
|