@xsolla/xui-typography 0.103.0 → 0.104.0
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/native/index.js +5 -1
- package/native/index.js.map +1 -1
- package/native/index.mjs +5 -1
- package/native/index.mjs.map +1 -1
- package/package.json +3 -3
- package/web/index.js +5 -1
- package/web/index.js.map +1 -1
- package/web/index.mjs +5 -1
- package/web/index.mjs.map +1 -1
package/native/index.js
CHANGED
|
@@ -48,7 +48,7 @@ var Text = ({
|
|
|
48
48
|
...props
|
|
49
49
|
}) => {
|
|
50
50
|
let resolvedFontFamily = fontFamily ? fontFamily.split(",")[0].replace(/['"]/g, "").trim() : void 0;
|
|
51
|
-
if (resolvedFontFamily === "Pilat Wide Bold") {
|
|
51
|
+
if (resolvedFontFamily === "Pilat Wide" || resolvedFontFamily === "Pilat Wide Bold" || resolvedFontFamily === "Aktiv Grotesk") {
|
|
52
52
|
resolvedFontFamily = void 0;
|
|
53
53
|
}
|
|
54
54
|
const style = {
|
|
@@ -80,6 +80,7 @@ var getColor = (color, theme) => {
|
|
|
80
80
|
};
|
|
81
81
|
return colorMap[color] || color;
|
|
82
82
|
};
|
|
83
|
+
var isHeadingVariant = (variant) => variant === "h1" || variant === "h2" || variant === "h3" || variant === "h4" || variant === "display";
|
|
83
84
|
var getVariantStyles = (variant) => {
|
|
84
85
|
switch (variant) {
|
|
85
86
|
case "h1":
|
|
@@ -135,6 +136,8 @@ var Typography = (0, import_react.forwardRef)(
|
|
|
135
136
|
const { theme } = (0, import_xui_core.useDesignSystem)();
|
|
136
137
|
const variantStyles = getVariantStyles(variant);
|
|
137
138
|
const colorValue = getColor(color, theme);
|
|
139
|
+
const themefonts = theme.fonts;
|
|
140
|
+
const fontFamily = isHeadingVariant(variant) ? themefonts?.heading : themefonts?.body;
|
|
138
141
|
return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
|
|
139
142
|
Text,
|
|
140
143
|
{
|
|
@@ -144,6 +147,7 @@ var Typography = (0, import_react.forwardRef)(
|
|
|
144
147
|
color: colorValue,
|
|
145
148
|
fontSize: variantStyles.fontSize,
|
|
146
149
|
fontWeight: variantStyles.fontWeight,
|
|
150
|
+
fontFamily,
|
|
147
151
|
style: {
|
|
148
152
|
marginTop,
|
|
149
153
|
marginBottom,
|
package/native/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/index.tsx","../../src/Typography.tsx","../../../primitives-native/src/Text.tsx"],"sourcesContent":["export * from \"./Typography\";\nexport * from \"./types\";\n","import { forwardRef } from \"react\";\n// @ts-expect-error - this will be resolved at build time\nimport { Text } from \"@xsolla/xui-primitives\";\nimport { useDesignSystem } from \"@xsolla/xui-core\";\nimport type { ColorType, TypographyProps, VariantType } from \"./types\";\n\nconst getColor = (\n color: ColorType | string,\n theme: any\n): string | undefined => {\n if (color === \"inherit\") return undefined;\n\n const colorMap: Record<string, string> = {\n primary: theme?.colors?.content?.primary,\n secondary: theme?.colors?.content?.secondary,\n tertiary: theme?.colors?.content?.tertiary,\n brand: theme?.colors?.content?.brand?.primary,\n brandSecondary: theme?.colors?.content?.brand?.secondary,\n success: theme?.colors?.content?.success?.primary,\n warning: theme?.colors?.content?.warning?.primary,\n alert: theme?.colors?.content?.alert?.primary,\n neutral: theme?.colors?.content?.neutral?.primary,\n };\n\n return colorMap[color] || color;\n};\n\nconst getVariantStyles = (variant: VariantType) => {\n switch (variant) {\n case \"h1\":\n return { fontSize: 40, fontWeight: \"700\", lineHeight: \"48px\" };\n case \"h2\":\n return { fontSize: 32, fontWeight: \"700\", lineHeight: \"38px\" };\n case \"h3\":\n return { fontSize: 28, fontWeight: \"700\", lineHeight: \"34px\" };\n case \"h4\":\n return { fontSize: 24, fontWeight: \"700\", lineHeight: \"28px\" };\n case \"display\":\n return { fontSize: 48, fontWeight: \"800\", lineHeight: \"58px\" };\n case \"bodyLg\":\n return { fontSize: 18, fontWeight: \"400\", lineHeight: \"24px\" };\n case \"bodyLgAccent\":\n return { fontSize: 18, fontWeight: \"500\", lineHeight: \"24px\" };\n case \"bodyLgParagraph\":\n return { fontSize: 18, fontWeight: \"400\", lineHeight: \"26px\" };\n case \"bodyMd\":\n return { fontSize: 16, fontWeight: \"400\", lineHeight: \"20px\" };\n case \"bodyMdAccent\":\n return { fontSize: 16, fontWeight: \"500\", lineHeight: \"20px\" };\n case \"bodyMdParagraph\":\n return { fontSize: 16, fontWeight: \"400\", lineHeight: \"22px\" };\n case \"bodySm\":\n return { fontSize: 14, fontWeight: \"400\", lineHeight: \"18px\" };\n case \"bodySmAccent\":\n return { fontSize: 14, fontWeight: \"500\", lineHeight: \"18px\" };\n case \"bodySmParagraph\":\n return { fontSize: 14, fontWeight: \"400\", lineHeight: \"20px\" };\n case \"bodyXs\":\n return { fontSize: 12, fontWeight: \"400\", lineHeight: \"16px\" };\n case \"bodyXsAccent\":\n return { fontSize: 12, fontWeight: \"500\", lineHeight: \"16px\" };\n case \"bodyXsParagraph\":\n return { fontSize: 12, fontWeight: \"400\", lineHeight: \"18px\" };\n default:\n return { fontSize: 16, fontWeight: \"400\", lineHeight: \"20px\" };\n }\n};\n\nexport const Typography = forwardRef<any, TypographyProps>(\n (\n {\n children,\n align = \"inherit\",\n noWrap = false,\n variant = \"bodyMd\",\n color = \"inherit\",\n marginBottom = 0,\n marginTop = 0,\n as,\n ...rest\n },\n ref\n ) => {\n const { theme } = useDesignSystem();\n const variantStyles = getVariantStyles(variant);\n const colorValue = getColor(color, theme);\n\n return (\n <Text\n {...rest}\n ref={ref}\n as={as}\n color={colorValue}\n fontSize={variantStyles.fontSize}\n fontWeight={variantStyles.fontWeight}\n style={{\n marginTop,\n marginBottom,\n textAlign: align === \"inherit\" ? undefined : align,\n lineHeight: variantStyles.lineHeight,\n ...(noWrap && {\n overflow: \"hidden\",\n textOverflow: \"ellipsis\",\n whiteSpace: \"nowrap\",\n }),\n ...rest.style,\n }}\n >\n {children}\n </Text>\n );\n }\n);\n\nTypography.displayName = \"Typography\";\n","import React from \"react\";\nimport { Text as RNText, TextStyle, AccessibilityRole } from \"react-native\";\nimport { TextProps } from \"@xsolla/xui-primitives-core\";\n\n// Map web roles to React Native accessibility roles\nconst roleMap: Record<string, AccessibilityRole> = {\n alert: \"alert\",\n heading: \"header\",\n button: \"button\",\n link: \"link\",\n text: \"text\",\n};\n\nexport const Text: React.FC<TextProps> = ({\n children,\n color,\n fontSize,\n fontWeight,\n fontFamily,\n id,\n role,\n ...props\n}) => {\n // Extract the first font name from a comma-separated list (e.g. for web-style font stacks)\n let resolvedFontFamily = fontFamily\n ? fontFamily.split(\",\")[0].replace(/['\"]/g, \"\").trim()\n : undefined;\n\n // On native, if we don't have the custom font loaded,
|
|
1
|
+
{"version":3,"sources":["../../src/index.tsx","../../src/Typography.tsx","../../../primitives-native/src/Text.tsx"],"sourcesContent":["export * from \"./Typography\";\nexport * from \"./types\";\n","import { forwardRef } from \"react\";\n// @ts-expect-error - this will be resolved at build time\nimport { Text } from \"@xsolla/xui-primitives\";\nimport { useDesignSystem } from \"@xsolla/xui-core\";\nimport type { ColorType, TypographyProps, VariantType } from \"./types\";\n\nconst getColor = (\n color: ColorType | string,\n theme: any\n): string | undefined => {\n if (color === \"inherit\") return undefined;\n\n const colorMap: Record<string, string> = {\n primary: theme?.colors?.content?.primary,\n secondary: theme?.colors?.content?.secondary,\n tertiary: theme?.colors?.content?.tertiary,\n brand: theme?.colors?.content?.brand?.primary,\n brandSecondary: theme?.colors?.content?.brand?.secondary,\n success: theme?.colors?.content?.success?.primary,\n warning: theme?.colors?.content?.warning?.primary,\n alert: theme?.colors?.content?.alert?.primary,\n neutral: theme?.colors?.content?.neutral?.primary,\n };\n\n return colorMap[color] || color;\n};\n\nconst isHeadingVariant = (variant: VariantType): boolean =>\n variant === \"h1\" ||\n variant === \"h2\" ||\n variant === \"h3\" ||\n variant === \"h4\" ||\n variant === \"display\";\n\nconst getVariantStyles = (variant: VariantType) => {\n switch (variant) {\n case \"h1\":\n return { fontSize: 40, fontWeight: \"700\", lineHeight: \"48px\" };\n case \"h2\":\n return { fontSize: 32, fontWeight: \"700\", lineHeight: \"38px\" };\n case \"h3\":\n return { fontSize: 28, fontWeight: \"700\", lineHeight: \"34px\" };\n case \"h4\":\n return { fontSize: 24, fontWeight: \"700\", lineHeight: \"28px\" };\n case \"display\":\n return { fontSize: 48, fontWeight: \"800\", lineHeight: \"58px\" };\n case \"bodyLg\":\n return { fontSize: 18, fontWeight: \"400\", lineHeight: \"24px\" };\n case \"bodyLgAccent\":\n return { fontSize: 18, fontWeight: \"500\", lineHeight: \"24px\" };\n case \"bodyLgParagraph\":\n return { fontSize: 18, fontWeight: \"400\", lineHeight: \"26px\" };\n case \"bodyMd\":\n return { fontSize: 16, fontWeight: \"400\", lineHeight: \"20px\" };\n case \"bodyMdAccent\":\n return { fontSize: 16, fontWeight: \"500\", lineHeight: \"20px\" };\n case \"bodyMdParagraph\":\n return { fontSize: 16, fontWeight: \"400\", lineHeight: \"22px\" };\n case \"bodySm\":\n return { fontSize: 14, fontWeight: \"400\", lineHeight: \"18px\" };\n case \"bodySmAccent\":\n return { fontSize: 14, fontWeight: \"500\", lineHeight: \"18px\" };\n case \"bodySmParagraph\":\n return { fontSize: 14, fontWeight: \"400\", lineHeight: \"20px\" };\n case \"bodyXs\":\n return { fontSize: 12, fontWeight: \"400\", lineHeight: \"16px\" };\n case \"bodyXsAccent\":\n return { fontSize: 12, fontWeight: \"500\", lineHeight: \"16px\" };\n case \"bodyXsParagraph\":\n return { fontSize: 12, fontWeight: \"400\", lineHeight: \"18px\" };\n default:\n return { fontSize: 16, fontWeight: \"400\", lineHeight: \"20px\" };\n }\n};\n\nexport const Typography = forwardRef<any, TypographyProps>(\n (\n {\n children,\n align = \"inherit\",\n noWrap = false,\n variant = \"bodyMd\",\n color = \"inherit\",\n marginBottom = 0,\n marginTop = 0,\n as,\n ...rest\n },\n ref\n ) => {\n const { theme } = useDesignSystem();\n const variantStyles = getVariantStyles(variant);\n const colorValue = getColor(color, theme);\n const themefonts = theme.fonts as Record<string, string>;\n const fontFamily = isHeadingVariant(variant)\n ? themefonts?.heading\n : themefonts?.body;\n\n return (\n <Text\n {...rest}\n ref={ref}\n as={as}\n color={colorValue}\n fontSize={variantStyles.fontSize}\n fontWeight={variantStyles.fontWeight}\n fontFamily={fontFamily}\n style={{\n marginTop,\n marginBottom,\n textAlign: align === \"inherit\" ? undefined : align,\n lineHeight: variantStyles.lineHeight,\n ...(noWrap && {\n overflow: \"hidden\",\n textOverflow: \"ellipsis\",\n whiteSpace: \"nowrap\",\n }),\n ...rest.style,\n }}\n >\n {children}\n </Text>\n );\n }\n);\n\nTypography.displayName = \"Typography\";\n","import React from \"react\";\nimport { Text as RNText, TextStyle, AccessibilityRole } from \"react-native\";\nimport { TextProps } from \"@xsolla/xui-primitives-core\";\n\n// Map web roles to React Native accessibility roles\nconst roleMap: Record<string, AccessibilityRole> = {\n alert: \"alert\",\n heading: \"header\",\n button: \"button\",\n link: \"link\",\n text: \"text\",\n};\n\nexport const Text: React.FC<TextProps> = ({\n children,\n color,\n fontSize,\n fontWeight,\n fontFamily,\n id,\n role,\n ...props\n}) => {\n // Extract the first font name from a comma-separated list (e.g. for web-style font stacks)\n let resolvedFontFamily = fontFamily\n ? fontFamily.split(\",\")[0].replace(/['\"]/g, \"\").trim()\n : undefined;\n\n // On native, if we don't have the custom font loaded, fall back to the system font\n if (\n resolvedFontFamily === \"Pilat Wide\" ||\n resolvedFontFamily === \"Pilat Wide Bold\" ||\n resolvedFontFamily === \"Aktiv Grotesk\"\n ) {\n resolvedFontFamily = undefined;\n }\n\n const style: TextStyle = {\n color,\n fontSize: typeof fontSize === \"number\" ? fontSize : undefined,\n fontWeight: fontWeight as TextStyle[\"fontWeight\"],\n fontFamily: resolvedFontFamily,\n textDecorationLine: props.textDecoration as TextStyle[\"textDecorationLine\"],\n };\n\n // Map role to React Native accessibilityRole\n const accessibilityRole = role ? roleMap[role] : undefined;\n\n return (\n <RNText style={style} testID={id} accessibilityRole={accessibilityRole}>\n {children}\n </RNText>\n );\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA,mBAA2B;;;ACC3B,0BAA6D;AAgDzD;AA5CJ,IAAM,UAA6C;AAAA,EACjD,OAAO;AAAA,EACP,SAAS;AAAA,EACT,QAAQ;AAAA,EACR,MAAM;AAAA,EACN,MAAM;AACR;AAEO,IAAM,OAA4B,CAAC;AAAA,EACxC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAM;AAEJ,MAAI,qBAAqB,aACrB,WAAW,MAAM,GAAG,EAAE,CAAC,EAAE,QAAQ,SAAS,EAAE,EAAE,KAAK,IACnD;AAGJ,MACE,uBAAuB,gBACvB,uBAAuB,qBACvB,uBAAuB,iBACvB;AACA,yBAAqB;AAAA,EACvB;AAEA,QAAM,QAAmB;AAAA,IACvB;AAAA,IACA,UAAU,OAAO,aAAa,WAAW,WAAW;AAAA,IACpD;AAAA,IACA,YAAY;AAAA,IACZ,oBAAoB,MAAM;AAAA,EAC5B;AAGA,QAAM,oBAAoB,OAAO,QAAQ,IAAI,IAAI;AAEjD,SACE,4CAAC,oBAAAA,MAAA,EAAO,OAAc,QAAQ,IAAI,mBAC/B,UACH;AAEJ;;;ADlDA,sBAAgC;AAgG1B,IAAAC,sBAAA;AA7FN,IAAM,WAAW,CACf,OACA,UACuB;AACvB,MAAI,UAAU,UAAW,QAAO;AAEhC,QAAM,WAAmC;AAAA,IACvC,SAAS,OAAO,QAAQ,SAAS;AAAA,IACjC,WAAW,OAAO,QAAQ,SAAS;AAAA,IACnC,UAAU,OAAO,QAAQ,SAAS;AAAA,IAClC,OAAO,OAAO,QAAQ,SAAS,OAAO;AAAA,IACtC,gBAAgB,OAAO,QAAQ,SAAS,OAAO;AAAA,IAC/C,SAAS,OAAO,QAAQ,SAAS,SAAS;AAAA,IAC1C,SAAS,OAAO,QAAQ,SAAS,SAAS;AAAA,IAC1C,OAAO,OAAO,QAAQ,SAAS,OAAO;AAAA,IACtC,SAAS,OAAO,QAAQ,SAAS,SAAS;AAAA,EAC5C;AAEA,SAAO,SAAS,KAAK,KAAK;AAC5B;AAEA,IAAM,mBAAmB,CAAC,YACxB,YAAY,QACZ,YAAY,QACZ,YAAY,QACZ,YAAY,QACZ,YAAY;AAEd,IAAM,mBAAmB,CAAC,YAAyB;AACjD,UAAQ,SAAS;AAAA,IACf,KAAK;AACH,aAAO,EAAE,UAAU,IAAI,YAAY,OAAO,YAAY,OAAO;AAAA,IAC/D,KAAK;AACH,aAAO,EAAE,UAAU,IAAI,YAAY,OAAO,YAAY,OAAO;AAAA,IAC/D,KAAK;AACH,aAAO,EAAE,UAAU,IAAI,YAAY,OAAO,YAAY,OAAO;AAAA,IAC/D,KAAK;AACH,aAAO,EAAE,UAAU,IAAI,YAAY,OAAO,YAAY,OAAO;AAAA,IAC/D,KAAK;AACH,aAAO,EAAE,UAAU,IAAI,YAAY,OAAO,YAAY,OAAO;AAAA,IAC/D,KAAK;AACH,aAAO,EAAE,UAAU,IAAI,YAAY,OAAO,YAAY,OAAO;AAAA,IAC/D,KAAK;AACH,aAAO,EAAE,UAAU,IAAI,YAAY,OAAO,YAAY,OAAO;AAAA,IAC/D,KAAK;AACH,aAAO,EAAE,UAAU,IAAI,YAAY,OAAO,YAAY,OAAO;AAAA,IAC/D,KAAK;AACH,aAAO,EAAE,UAAU,IAAI,YAAY,OAAO,YAAY,OAAO;AAAA,IAC/D,KAAK;AACH,aAAO,EAAE,UAAU,IAAI,YAAY,OAAO,YAAY,OAAO;AAAA,IAC/D,KAAK;AACH,aAAO,EAAE,UAAU,IAAI,YAAY,OAAO,YAAY,OAAO;AAAA,IAC/D,KAAK;AACH,aAAO,EAAE,UAAU,IAAI,YAAY,OAAO,YAAY,OAAO;AAAA,IAC/D,KAAK;AACH,aAAO,EAAE,UAAU,IAAI,YAAY,OAAO,YAAY,OAAO;AAAA,IAC/D,KAAK;AACH,aAAO,EAAE,UAAU,IAAI,YAAY,OAAO,YAAY,OAAO;AAAA,IAC/D,KAAK;AACH,aAAO,EAAE,UAAU,IAAI,YAAY,OAAO,YAAY,OAAO;AAAA,IAC/D,KAAK;AACH,aAAO,EAAE,UAAU,IAAI,YAAY,OAAO,YAAY,OAAO;AAAA,IAC/D,KAAK;AACH,aAAO,EAAE,UAAU,IAAI,YAAY,OAAO,YAAY,OAAO;AAAA,IAC/D;AACE,aAAO,EAAE,UAAU,IAAI,YAAY,OAAO,YAAY,OAAO;AAAA,EACjE;AACF;AAEO,IAAM,iBAAa;AAAA,EACxB,CACE;AAAA,IACE;AAAA,IACA,QAAQ;AAAA,IACR,SAAS;AAAA,IACT,UAAU;AAAA,IACV,QAAQ;AAAA,IACR,eAAe;AAAA,IACf,YAAY;AAAA,IACZ;AAAA,IACA,GAAG;AAAA,EACL,GACA,QACG;AACH,UAAM,EAAE,MAAM,QAAI,iCAAgB;AAClC,UAAM,gBAAgB,iBAAiB,OAAO;AAC9C,UAAM,aAAa,SAAS,OAAO,KAAK;AACxC,UAAM,aAAa,MAAM;AACzB,UAAM,aAAa,iBAAiB,OAAO,IACvC,YAAY,UACZ,YAAY;AAEhB,WACE;AAAA,MAAC;AAAA;AAAA,QACE,GAAG;AAAA,QACJ;AAAA,QACA;AAAA,QACA,OAAO;AAAA,QACP,UAAU,cAAc;AAAA,QACxB,YAAY,cAAc;AAAA,QAC1B;AAAA,QACA,OAAO;AAAA,UACL;AAAA,UACA;AAAA,UACA,WAAW,UAAU,YAAY,SAAY;AAAA,UAC7C,YAAY,cAAc;AAAA,UAC1B,GAAI,UAAU;AAAA,YACZ,UAAU;AAAA,YACV,cAAc;AAAA,YACd,YAAY;AAAA,UACd;AAAA,UACA,GAAG,KAAK;AAAA,QACV;AAAA,QAEC;AAAA;AAAA,IACH;AAAA,EAEJ;AACF;AAEA,WAAW,cAAc;","names":["RNText","import_jsx_runtime"]}
|
package/native/index.mjs
CHANGED
|
@@ -22,7 +22,7 @@ var Text = ({
|
|
|
22
22
|
...props
|
|
23
23
|
}) => {
|
|
24
24
|
let resolvedFontFamily = fontFamily ? fontFamily.split(",")[0].replace(/['"]/g, "").trim() : void 0;
|
|
25
|
-
if (resolvedFontFamily === "Pilat Wide Bold") {
|
|
25
|
+
if (resolvedFontFamily === "Pilat Wide" || resolvedFontFamily === "Pilat Wide Bold" || resolvedFontFamily === "Aktiv Grotesk") {
|
|
26
26
|
resolvedFontFamily = void 0;
|
|
27
27
|
}
|
|
28
28
|
const style = {
|
|
@@ -54,6 +54,7 @@ var getColor = (color, theme) => {
|
|
|
54
54
|
};
|
|
55
55
|
return colorMap[color] || color;
|
|
56
56
|
};
|
|
57
|
+
var isHeadingVariant = (variant) => variant === "h1" || variant === "h2" || variant === "h3" || variant === "h4" || variant === "display";
|
|
57
58
|
var getVariantStyles = (variant) => {
|
|
58
59
|
switch (variant) {
|
|
59
60
|
case "h1":
|
|
@@ -109,6 +110,8 @@ var Typography = forwardRef(
|
|
|
109
110
|
const { theme } = useDesignSystem();
|
|
110
111
|
const variantStyles = getVariantStyles(variant);
|
|
111
112
|
const colorValue = getColor(color, theme);
|
|
113
|
+
const themefonts = theme.fonts;
|
|
114
|
+
const fontFamily = isHeadingVariant(variant) ? themefonts?.heading : themefonts?.body;
|
|
112
115
|
return /* @__PURE__ */ jsx2(
|
|
113
116
|
Text,
|
|
114
117
|
{
|
|
@@ -118,6 +121,7 @@ var Typography = forwardRef(
|
|
|
118
121
|
color: colorValue,
|
|
119
122
|
fontSize: variantStyles.fontSize,
|
|
120
123
|
fontWeight: variantStyles.fontWeight,
|
|
124
|
+
fontFamily,
|
|
121
125
|
style: {
|
|
122
126
|
marginTop,
|
|
123
127
|
marginBottom,
|
package/native/index.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/Typography.tsx","../../../primitives-native/src/Text.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\n// @ts-expect-error - this will be resolved at build time\nimport { Text } from \"@xsolla/xui-primitives\";\nimport { useDesignSystem } from \"@xsolla/xui-core\";\nimport type { ColorType, TypographyProps, VariantType } from \"./types\";\n\nconst getColor = (\n color: ColorType | string,\n theme: any\n): string | undefined => {\n if (color === \"inherit\") return undefined;\n\n const colorMap: Record<string, string> = {\n primary: theme?.colors?.content?.primary,\n secondary: theme?.colors?.content?.secondary,\n tertiary: theme?.colors?.content?.tertiary,\n brand: theme?.colors?.content?.brand?.primary,\n brandSecondary: theme?.colors?.content?.brand?.secondary,\n success: theme?.colors?.content?.success?.primary,\n warning: theme?.colors?.content?.warning?.primary,\n alert: theme?.colors?.content?.alert?.primary,\n neutral: theme?.colors?.content?.neutral?.primary,\n };\n\n return colorMap[color] || color;\n};\n\nconst getVariantStyles = (variant: VariantType) => {\n switch (variant) {\n case \"h1\":\n return { fontSize: 40, fontWeight: \"700\", lineHeight: \"48px\" };\n case \"h2\":\n return { fontSize: 32, fontWeight: \"700\", lineHeight: \"38px\" };\n case \"h3\":\n return { fontSize: 28, fontWeight: \"700\", lineHeight: \"34px\" };\n case \"h4\":\n return { fontSize: 24, fontWeight: \"700\", lineHeight: \"28px\" };\n case \"display\":\n return { fontSize: 48, fontWeight: \"800\", lineHeight: \"58px\" };\n case \"bodyLg\":\n return { fontSize: 18, fontWeight: \"400\", lineHeight: \"24px\" };\n case \"bodyLgAccent\":\n return { fontSize: 18, fontWeight: \"500\", lineHeight: \"24px\" };\n case \"bodyLgParagraph\":\n return { fontSize: 18, fontWeight: \"400\", lineHeight: \"26px\" };\n case \"bodyMd\":\n return { fontSize: 16, fontWeight: \"400\", lineHeight: \"20px\" };\n case \"bodyMdAccent\":\n return { fontSize: 16, fontWeight: \"500\", lineHeight: \"20px\" };\n case \"bodyMdParagraph\":\n return { fontSize: 16, fontWeight: \"400\", lineHeight: \"22px\" };\n case \"bodySm\":\n return { fontSize: 14, fontWeight: \"400\", lineHeight: \"18px\" };\n case \"bodySmAccent\":\n return { fontSize: 14, fontWeight: \"500\", lineHeight: \"18px\" };\n case \"bodySmParagraph\":\n return { fontSize: 14, fontWeight: \"400\", lineHeight: \"20px\" };\n case \"bodyXs\":\n return { fontSize: 12, fontWeight: \"400\", lineHeight: \"16px\" };\n case \"bodyXsAccent\":\n return { fontSize: 12, fontWeight: \"500\", lineHeight: \"16px\" };\n case \"bodyXsParagraph\":\n return { fontSize: 12, fontWeight: \"400\", lineHeight: \"18px\" };\n default:\n return { fontSize: 16, fontWeight: \"400\", lineHeight: \"20px\" };\n }\n};\n\nexport const Typography = forwardRef<any, TypographyProps>(\n (\n {\n children,\n align = \"inherit\",\n noWrap = false,\n variant = \"bodyMd\",\n color = \"inherit\",\n marginBottom = 0,\n marginTop = 0,\n as,\n ...rest\n },\n ref\n ) => {\n const { theme } = useDesignSystem();\n const variantStyles = getVariantStyles(variant);\n const colorValue = getColor(color, theme);\n\n return (\n <Text\n {...rest}\n ref={ref}\n as={as}\n color={colorValue}\n fontSize={variantStyles.fontSize}\n fontWeight={variantStyles.fontWeight}\n style={{\n marginTop,\n marginBottom,\n textAlign: align === \"inherit\" ? undefined : align,\n lineHeight: variantStyles.lineHeight,\n ...(noWrap && {\n overflow: \"hidden\",\n textOverflow: \"ellipsis\",\n whiteSpace: \"nowrap\",\n }),\n ...rest.style,\n }}\n >\n {children}\n </Text>\n );\n }\n);\n\nTypography.displayName = \"Typography\";\n","import React from \"react\";\nimport { Text as RNText, TextStyle, AccessibilityRole } from \"react-native\";\nimport { TextProps } from \"@xsolla/xui-primitives-core\";\n\n// Map web roles to React Native accessibility roles\nconst roleMap: Record<string, AccessibilityRole> = {\n alert: \"alert\",\n heading: \"header\",\n button: \"button\",\n link: \"link\",\n text: \"text\",\n};\n\nexport const Text: React.FC<TextProps> = ({\n children,\n color,\n fontSize,\n fontWeight,\n fontFamily,\n id,\n role,\n ...props\n}) => {\n // Extract the first font name from a comma-separated list (e.g. for web-style font stacks)\n let resolvedFontFamily = fontFamily\n ? fontFamily.split(\",\")[0].replace(/['\"]/g, \"\").trim()\n : undefined;\n\n // On native, if we don't have the custom font loaded,
|
|
1
|
+
{"version":3,"sources":["../../src/Typography.tsx","../../../primitives-native/src/Text.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\n// @ts-expect-error - this will be resolved at build time\nimport { Text } from \"@xsolla/xui-primitives\";\nimport { useDesignSystem } from \"@xsolla/xui-core\";\nimport type { ColorType, TypographyProps, VariantType } from \"./types\";\n\nconst getColor = (\n color: ColorType | string,\n theme: any\n): string | undefined => {\n if (color === \"inherit\") return undefined;\n\n const colorMap: Record<string, string> = {\n primary: theme?.colors?.content?.primary,\n secondary: theme?.colors?.content?.secondary,\n tertiary: theme?.colors?.content?.tertiary,\n brand: theme?.colors?.content?.brand?.primary,\n brandSecondary: theme?.colors?.content?.brand?.secondary,\n success: theme?.colors?.content?.success?.primary,\n warning: theme?.colors?.content?.warning?.primary,\n alert: theme?.colors?.content?.alert?.primary,\n neutral: theme?.colors?.content?.neutral?.primary,\n };\n\n return colorMap[color] || color;\n};\n\nconst isHeadingVariant = (variant: VariantType): boolean =>\n variant === \"h1\" ||\n variant === \"h2\" ||\n variant === \"h3\" ||\n variant === \"h4\" ||\n variant === \"display\";\n\nconst getVariantStyles = (variant: VariantType) => {\n switch (variant) {\n case \"h1\":\n return { fontSize: 40, fontWeight: \"700\", lineHeight: \"48px\" };\n case \"h2\":\n return { fontSize: 32, fontWeight: \"700\", lineHeight: \"38px\" };\n case \"h3\":\n return { fontSize: 28, fontWeight: \"700\", lineHeight: \"34px\" };\n case \"h4\":\n return { fontSize: 24, fontWeight: \"700\", lineHeight: \"28px\" };\n case \"display\":\n return { fontSize: 48, fontWeight: \"800\", lineHeight: \"58px\" };\n case \"bodyLg\":\n return { fontSize: 18, fontWeight: \"400\", lineHeight: \"24px\" };\n case \"bodyLgAccent\":\n return { fontSize: 18, fontWeight: \"500\", lineHeight: \"24px\" };\n case \"bodyLgParagraph\":\n return { fontSize: 18, fontWeight: \"400\", lineHeight: \"26px\" };\n case \"bodyMd\":\n return { fontSize: 16, fontWeight: \"400\", lineHeight: \"20px\" };\n case \"bodyMdAccent\":\n return { fontSize: 16, fontWeight: \"500\", lineHeight: \"20px\" };\n case \"bodyMdParagraph\":\n return { fontSize: 16, fontWeight: \"400\", lineHeight: \"22px\" };\n case \"bodySm\":\n return { fontSize: 14, fontWeight: \"400\", lineHeight: \"18px\" };\n case \"bodySmAccent\":\n return { fontSize: 14, fontWeight: \"500\", lineHeight: \"18px\" };\n case \"bodySmParagraph\":\n return { fontSize: 14, fontWeight: \"400\", lineHeight: \"20px\" };\n case \"bodyXs\":\n return { fontSize: 12, fontWeight: \"400\", lineHeight: \"16px\" };\n case \"bodyXsAccent\":\n return { fontSize: 12, fontWeight: \"500\", lineHeight: \"16px\" };\n case \"bodyXsParagraph\":\n return { fontSize: 12, fontWeight: \"400\", lineHeight: \"18px\" };\n default:\n return { fontSize: 16, fontWeight: \"400\", lineHeight: \"20px\" };\n }\n};\n\nexport const Typography = forwardRef<any, TypographyProps>(\n (\n {\n children,\n align = \"inherit\",\n noWrap = false,\n variant = \"bodyMd\",\n color = \"inherit\",\n marginBottom = 0,\n marginTop = 0,\n as,\n ...rest\n },\n ref\n ) => {\n const { theme } = useDesignSystem();\n const variantStyles = getVariantStyles(variant);\n const colorValue = getColor(color, theme);\n const themefonts = theme.fonts as Record<string, string>;\n const fontFamily = isHeadingVariant(variant)\n ? themefonts?.heading\n : themefonts?.body;\n\n return (\n <Text\n {...rest}\n ref={ref}\n as={as}\n color={colorValue}\n fontSize={variantStyles.fontSize}\n fontWeight={variantStyles.fontWeight}\n fontFamily={fontFamily}\n style={{\n marginTop,\n marginBottom,\n textAlign: align === \"inherit\" ? undefined : align,\n lineHeight: variantStyles.lineHeight,\n ...(noWrap && {\n overflow: \"hidden\",\n textOverflow: \"ellipsis\",\n whiteSpace: \"nowrap\",\n }),\n ...rest.style,\n }}\n >\n {children}\n </Text>\n );\n }\n);\n\nTypography.displayName = \"Typography\";\n","import React from \"react\";\nimport { Text as RNText, TextStyle, AccessibilityRole } from \"react-native\";\nimport { TextProps } from \"@xsolla/xui-primitives-core\";\n\n// Map web roles to React Native accessibility roles\nconst roleMap: Record<string, AccessibilityRole> = {\n alert: \"alert\",\n heading: \"header\",\n button: \"button\",\n link: \"link\",\n text: \"text\",\n};\n\nexport const Text: React.FC<TextProps> = ({\n children,\n color,\n fontSize,\n fontWeight,\n fontFamily,\n id,\n role,\n ...props\n}) => {\n // Extract the first font name from a comma-separated list (e.g. for web-style font stacks)\n let resolvedFontFamily = fontFamily\n ? fontFamily.split(\",\")[0].replace(/['\"]/g, \"\").trim()\n : undefined;\n\n // On native, if we don't have the custom font loaded, fall back to the system font\n if (\n resolvedFontFamily === \"Pilat Wide\" ||\n resolvedFontFamily === \"Pilat Wide Bold\" ||\n resolvedFontFamily === \"Aktiv Grotesk\"\n ) {\n resolvedFontFamily = undefined;\n }\n\n const style: TextStyle = {\n color,\n fontSize: typeof fontSize === \"number\" ? fontSize : undefined,\n fontWeight: fontWeight as TextStyle[\"fontWeight\"],\n fontFamily: resolvedFontFamily,\n textDecorationLine: props.textDecoration as TextStyle[\"textDecorationLine\"],\n };\n\n // Map role to React Native accessibilityRole\n const accessibilityRole = role ? roleMap[role] : undefined;\n\n return (\n <RNText style={style} testID={id} accessibilityRole={accessibilityRole}>\n {children}\n </RNText>\n );\n};\n"],"mappings":";AAAA,SAAS,kBAAkB;;;ACC3B,SAAS,QAAQ,cAA4C;AAgDzD;AA5CJ,IAAM,UAA6C;AAAA,EACjD,OAAO;AAAA,EACP,SAAS;AAAA,EACT,QAAQ;AAAA,EACR,MAAM;AAAA,EACN,MAAM;AACR;AAEO,IAAM,OAA4B,CAAC;AAAA,EACxC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAM;AAEJ,MAAI,qBAAqB,aACrB,WAAW,MAAM,GAAG,EAAE,CAAC,EAAE,QAAQ,SAAS,EAAE,EAAE,KAAK,IACnD;AAGJ,MACE,uBAAuB,gBACvB,uBAAuB,qBACvB,uBAAuB,iBACvB;AACA,yBAAqB;AAAA,EACvB;AAEA,QAAM,QAAmB;AAAA,IACvB;AAAA,IACA,UAAU,OAAO,aAAa,WAAW,WAAW;AAAA,IACpD;AAAA,IACA,YAAY;AAAA,IACZ,oBAAoB,MAAM;AAAA,EAC5B;AAGA,QAAM,oBAAoB,OAAO,QAAQ,IAAI,IAAI;AAEjD,SACE,oBAAC,UAAO,OAAc,QAAQ,IAAI,mBAC/B,UACH;AAEJ;;;ADlDA,SAAS,uBAAuB;AAgG1B,gBAAAA,YAAA;AA7FN,IAAM,WAAW,CACf,OACA,UACuB;AACvB,MAAI,UAAU,UAAW,QAAO;AAEhC,QAAM,WAAmC;AAAA,IACvC,SAAS,OAAO,QAAQ,SAAS;AAAA,IACjC,WAAW,OAAO,QAAQ,SAAS;AAAA,IACnC,UAAU,OAAO,QAAQ,SAAS;AAAA,IAClC,OAAO,OAAO,QAAQ,SAAS,OAAO;AAAA,IACtC,gBAAgB,OAAO,QAAQ,SAAS,OAAO;AAAA,IAC/C,SAAS,OAAO,QAAQ,SAAS,SAAS;AAAA,IAC1C,SAAS,OAAO,QAAQ,SAAS,SAAS;AAAA,IAC1C,OAAO,OAAO,QAAQ,SAAS,OAAO;AAAA,IACtC,SAAS,OAAO,QAAQ,SAAS,SAAS;AAAA,EAC5C;AAEA,SAAO,SAAS,KAAK,KAAK;AAC5B;AAEA,IAAM,mBAAmB,CAAC,YACxB,YAAY,QACZ,YAAY,QACZ,YAAY,QACZ,YAAY,QACZ,YAAY;AAEd,IAAM,mBAAmB,CAAC,YAAyB;AACjD,UAAQ,SAAS;AAAA,IACf,KAAK;AACH,aAAO,EAAE,UAAU,IAAI,YAAY,OAAO,YAAY,OAAO;AAAA,IAC/D,KAAK;AACH,aAAO,EAAE,UAAU,IAAI,YAAY,OAAO,YAAY,OAAO;AAAA,IAC/D,KAAK;AACH,aAAO,EAAE,UAAU,IAAI,YAAY,OAAO,YAAY,OAAO;AAAA,IAC/D,KAAK;AACH,aAAO,EAAE,UAAU,IAAI,YAAY,OAAO,YAAY,OAAO;AAAA,IAC/D,KAAK;AACH,aAAO,EAAE,UAAU,IAAI,YAAY,OAAO,YAAY,OAAO;AAAA,IAC/D,KAAK;AACH,aAAO,EAAE,UAAU,IAAI,YAAY,OAAO,YAAY,OAAO;AAAA,IAC/D,KAAK;AACH,aAAO,EAAE,UAAU,IAAI,YAAY,OAAO,YAAY,OAAO;AAAA,IAC/D,KAAK;AACH,aAAO,EAAE,UAAU,IAAI,YAAY,OAAO,YAAY,OAAO;AAAA,IAC/D,KAAK;AACH,aAAO,EAAE,UAAU,IAAI,YAAY,OAAO,YAAY,OAAO;AAAA,IAC/D,KAAK;AACH,aAAO,EAAE,UAAU,IAAI,YAAY,OAAO,YAAY,OAAO;AAAA,IAC/D,KAAK;AACH,aAAO,EAAE,UAAU,IAAI,YAAY,OAAO,YAAY,OAAO;AAAA,IAC/D,KAAK;AACH,aAAO,EAAE,UAAU,IAAI,YAAY,OAAO,YAAY,OAAO;AAAA,IAC/D,KAAK;AACH,aAAO,EAAE,UAAU,IAAI,YAAY,OAAO,YAAY,OAAO;AAAA,IAC/D,KAAK;AACH,aAAO,EAAE,UAAU,IAAI,YAAY,OAAO,YAAY,OAAO;AAAA,IAC/D,KAAK;AACH,aAAO,EAAE,UAAU,IAAI,YAAY,OAAO,YAAY,OAAO;AAAA,IAC/D,KAAK;AACH,aAAO,EAAE,UAAU,IAAI,YAAY,OAAO,YAAY,OAAO;AAAA,IAC/D,KAAK;AACH,aAAO,EAAE,UAAU,IAAI,YAAY,OAAO,YAAY,OAAO;AAAA,IAC/D;AACE,aAAO,EAAE,UAAU,IAAI,YAAY,OAAO,YAAY,OAAO;AAAA,EACjE;AACF;AAEO,IAAM,aAAa;AAAA,EACxB,CACE;AAAA,IACE;AAAA,IACA,QAAQ;AAAA,IACR,SAAS;AAAA,IACT,UAAU;AAAA,IACV,QAAQ;AAAA,IACR,eAAe;AAAA,IACf,YAAY;AAAA,IACZ;AAAA,IACA,GAAG;AAAA,EACL,GACA,QACG;AACH,UAAM,EAAE,MAAM,IAAI,gBAAgB;AAClC,UAAM,gBAAgB,iBAAiB,OAAO;AAC9C,UAAM,aAAa,SAAS,OAAO,KAAK;AACxC,UAAM,aAAa,MAAM;AACzB,UAAM,aAAa,iBAAiB,OAAO,IACvC,YAAY,UACZ,YAAY;AAEhB,WACE,gBAAAA;AAAA,MAAC;AAAA;AAAA,QACE,GAAG;AAAA,QACJ;AAAA,QACA;AAAA,QACA,OAAO;AAAA,QACP,UAAU,cAAc;AAAA,QACxB,YAAY,cAAc;AAAA,QAC1B;AAAA,QACA,OAAO;AAAA,UACL;AAAA,UACA;AAAA,UACA,WAAW,UAAU,YAAY,SAAY;AAAA,UAC7C,YAAY,cAAc;AAAA,UAC1B,GAAI,UAAU;AAAA,YACZ,UAAU;AAAA,YACV,cAAc;AAAA,YACd,YAAY;AAAA,UACd;AAAA,UACA,GAAG,KAAK;AAAA,QACV;AAAA,QAEC;AAAA;AAAA,IACH;AAAA,EAEJ;AACF;AAEA,WAAW,cAAc;","names":["jsx"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@xsolla/xui-typography",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.104.0",
|
|
4
4
|
"main": "./web/index.js",
|
|
5
5
|
"module": "./web/index.mjs",
|
|
6
6
|
"types": "./web/index.d.ts",
|
|
@@ -13,8 +13,8 @@
|
|
|
13
13
|
"test:coverage": "vitest run --coverage"
|
|
14
14
|
},
|
|
15
15
|
"dependencies": {
|
|
16
|
-
"@xsolla/xui-core": "0.
|
|
17
|
-
"@xsolla/xui-primitives-core": "0.
|
|
16
|
+
"@xsolla/xui-core": "0.104.0",
|
|
17
|
+
"@xsolla/xui-primitives-core": "0.104.0"
|
|
18
18
|
},
|
|
19
19
|
"peerDependencies": {
|
|
20
20
|
"react": ">=16.8.0",
|
package/web/index.js
CHANGED
|
@@ -44,7 +44,7 @@ var StyledText = import_styled_components.default.span`
|
|
|
44
44
|
color: ${(props) => props.color || "inherit"};
|
|
45
45
|
font-size: ${(props) => typeof props.fontSize === "number" ? `${props.fontSize}px` : props.fontSize || "inherit"};
|
|
46
46
|
font-weight: ${(props) => props.fontWeight || "normal"};
|
|
47
|
-
font-family: ${(props) => props.fontFamily || '"
|
|
47
|
+
font-family: ${(props) => props.fontFamily || '"Aktiv Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif'};
|
|
48
48
|
line-height: ${(props) => typeof props.lineHeight === "number" ? `${props.lineHeight}px` : props.lineHeight || "inherit"};
|
|
49
49
|
white-space: ${(props) => props.whiteSpace || "normal"};
|
|
50
50
|
text-align: ${(props) => props.textAlign || "inherit"};
|
|
@@ -87,6 +87,7 @@ var getColor = (color, theme) => {
|
|
|
87
87
|
};
|
|
88
88
|
return colorMap[color] || color;
|
|
89
89
|
};
|
|
90
|
+
var isHeadingVariant = (variant) => variant === "h1" || variant === "h2" || variant === "h3" || variant === "h4" || variant === "display";
|
|
90
91
|
var getVariantStyles = (variant) => {
|
|
91
92
|
switch (variant) {
|
|
92
93
|
case "h1":
|
|
@@ -142,6 +143,8 @@ var Typography = (0, import_react.forwardRef)(
|
|
|
142
143
|
const { theme } = (0, import_xui_core.useDesignSystem)();
|
|
143
144
|
const variantStyles = getVariantStyles(variant);
|
|
144
145
|
const colorValue = getColor(color, theme);
|
|
146
|
+
const themefonts = theme.fonts;
|
|
147
|
+
const fontFamily = isHeadingVariant(variant) ? themefonts?.heading : themefonts?.body;
|
|
145
148
|
return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
|
|
146
149
|
Text,
|
|
147
150
|
{
|
|
@@ -151,6 +154,7 @@ var Typography = (0, import_react.forwardRef)(
|
|
|
151
154
|
color: colorValue,
|
|
152
155
|
fontSize: variantStyles.fontSize,
|
|
153
156
|
fontWeight: variantStyles.fontWeight,
|
|
157
|
+
fontFamily,
|
|
154
158
|
style: {
|
|
155
159
|
marginTop,
|
|
156
160
|
marginBottom,
|
package/web/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/index.tsx","../../src/Typography.tsx","../../../primitives-web/src/Text.tsx"],"sourcesContent":["export * from \"./Typography\";\nexport * from \"./types\";\n","import { forwardRef } from \"react\";\n// @ts-expect-error - this will be resolved at build time\nimport { Text } from \"@xsolla/xui-primitives\";\nimport { useDesignSystem } from \"@xsolla/xui-core\";\nimport type { ColorType, TypographyProps, VariantType } from \"./types\";\n\nconst getColor = (\n color: ColorType | string,\n theme: any\n): string | undefined => {\n if (color === \"inherit\") return undefined;\n\n const colorMap: Record<string, string> = {\n primary: theme?.colors?.content?.primary,\n secondary: theme?.colors?.content?.secondary,\n tertiary: theme?.colors?.content?.tertiary,\n brand: theme?.colors?.content?.brand?.primary,\n brandSecondary: theme?.colors?.content?.brand?.secondary,\n success: theme?.colors?.content?.success?.primary,\n warning: theme?.colors?.content?.warning?.primary,\n alert: theme?.colors?.content?.alert?.primary,\n neutral: theme?.colors?.content?.neutral?.primary,\n };\n\n return colorMap[color] || color;\n};\n\nconst getVariantStyles = (variant: VariantType) => {\n switch (variant) {\n case \"h1\":\n return { fontSize: 40, fontWeight: \"700\", lineHeight: \"48px\" };\n case \"h2\":\n return { fontSize: 32, fontWeight: \"700\", lineHeight: \"38px\" };\n case \"h3\":\n return { fontSize: 28, fontWeight: \"700\", lineHeight: \"34px\" };\n case \"h4\":\n return { fontSize: 24, fontWeight: \"700\", lineHeight: \"28px\" };\n case \"display\":\n return { fontSize: 48, fontWeight: \"800\", lineHeight: \"58px\" };\n case \"bodyLg\":\n return { fontSize: 18, fontWeight: \"400\", lineHeight: \"24px\" };\n case \"bodyLgAccent\":\n return { fontSize: 18, fontWeight: \"500\", lineHeight: \"24px\" };\n case \"bodyLgParagraph\":\n return { fontSize: 18, fontWeight: \"400\", lineHeight: \"26px\" };\n case \"bodyMd\":\n return { fontSize: 16, fontWeight: \"400\", lineHeight: \"20px\" };\n case \"bodyMdAccent\":\n return { fontSize: 16, fontWeight: \"500\", lineHeight: \"20px\" };\n case \"bodyMdParagraph\":\n return { fontSize: 16, fontWeight: \"400\", lineHeight: \"22px\" };\n case \"bodySm\":\n return { fontSize: 14, fontWeight: \"400\", lineHeight: \"18px\" };\n case \"bodySmAccent\":\n return { fontSize: 14, fontWeight: \"500\", lineHeight: \"18px\" };\n case \"bodySmParagraph\":\n return { fontSize: 14, fontWeight: \"400\", lineHeight: \"20px\" };\n case \"bodyXs\":\n return { fontSize: 12, fontWeight: \"400\", lineHeight: \"16px\" };\n case \"bodyXsAccent\":\n return { fontSize: 12, fontWeight: \"500\", lineHeight: \"16px\" };\n case \"bodyXsParagraph\":\n return { fontSize: 12, fontWeight: \"400\", lineHeight: \"18px\" };\n default:\n return { fontSize: 16, fontWeight: \"400\", lineHeight: \"20px\" };\n }\n};\n\nexport const Typography = forwardRef<any, TypographyProps>(\n (\n {\n children,\n align = \"inherit\",\n noWrap = false,\n variant = \"bodyMd\",\n color = \"inherit\",\n marginBottom = 0,\n marginTop = 0,\n as,\n ...rest\n },\n ref\n ) => {\n const { theme } = useDesignSystem();\n const variantStyles = getVariantStyles(variant);\n const colorValue = getColor(color, theme);\n\n return (\n <Text\n {...rest}\n ref={ref}\n as={as}\n color={colorValue}\n fontSize={variantStyles.fontSize}\n fontWeight={variantStyles.fontWeight}\n style={{\n marginTop,\n marginBottom,\n textAlign: align === \"inherit\" ? undefined : align,\n lineHeight: variantStyles.lineHeight,\n ...(noWrap && {\n overflow: \"hidden\",\n textOverflow: \"ellipsis\",\n whiteSpace: \"nowrap\",\n }),\n ...rest.style,\n }}\n >\n {children}\n </Text>\n );\n }\n);\n\nTypography.displayName = \"Typography\";\n","import React from \"react\";\nimport styled from \"styled-components\";\nimport { TextProps } from \"@xsolla/xui-primitives-core\";\n\nconst StyledText = styled.span<TextProps>`\n color: ${(props) => props.color || \"inherit\"};\n font-size: ${(props) =>\n typeof props.fontSize === \"number\"\n ? `${props.fontSize}px`\n : props.fontSize || \"inherit\"};\n font-weight: ${(props) => props.fontWeight || \"normal\"};\n font-family: ${(props) =>\n props.fontFamily ||\n '\"
|
|
1
|
+
{"version":3,"sources":["../../src/index.tsx","../../src/Typography.tsx","../../../primitives-web/src/Text.tsx"],"sourcesContent":["export * from \"./Typography\";\nexport * from \"./types\";\n","import { forwardRef } from \"react\";\n// @ts-expect-error - this will be resolved at build time\nimport { Text } from \"@xsolla/xui-primitives\";\nimport { useDesignSystem } from \"@xsolla/xui-core\";\nimport type { ColorType, TypographyProps, VariantType } from \"./types\";\n\nconst getColor = (\n color: ColorType | string,\n theme: any\n): string | undefined => {\n if (color === \"inherit\") return undefined;\n\n const colorMap: Record<string, string> = {\n primary: theme?.colors?.content?.primary,\n secondary: theme?.colors?.content?.secondary,\n tertiary: theme?.colors?.content?.tertiary,\n brand: theme?.colors?.content?.brand?.primary,\n brandSecondary: theme?.colors?.content?.brand?.secondary,\n success: theme?.colors?.content?.success?.primary,\n warning: theme?.colors?.content?.warning?.primary,\n alert: theme?.colors?.content?.alert?.primary,\n neutral: theme?.colors?.content?.neutral?.primary,\n };\n\n return colorMap[color] || color;\n};\n\nconst isHeadingVariant = (variant: VariantType): boolean =>\n variant === \"h1\" ||\n variant === \"h2\" ||\n variant === \"h3\" ||\n variant === \"h4\" ||\n variant === \"display\";\n\nconst getVariantStyles = (variant: VariantType) => {\n switch (variant) {\n case \"h1\":\n return { fontSize: 40, fontWeight: \"700\", lineHeight: \"48px\" };\n case \"h2\":\n return { fontSize: 32, fontWeight: \"700\", lineHeight: \"38px\" };\n case \"h3\":\n return { fontSize: 28, fontWeight: \"700\", lineHeight: \"34px\" };\n case \"h4\":\n return { fontSize: 24, fontWeight: \"700\", lineHeight: \"28px\" };\n case \"display\":\n return { fontSize: 48, fontWeight: \"800\", lineHeight: \"58px\" };\n case \"bodyLg\":\n return { fontSize: 18, fontWeight: \"400\", lineHeight: \"24px\" };\n case \"bodyLgAccent\":\n return { fontSize: 18, fontWeight: \"500\", lineHeight: \"24px\" };\n case \"bodyLgParagraph\":\n return { fontSize: 18, fontWeight: \"400\", lineHeight: \"26px\" };\n case \"bodyMd\":\n return { fontSize: 16, fontWeight: \"400\", lineHeight: \"20px\" };\n case \"bodyMdAccent\":\n return { fontSize: 16, fontWeight: \"500\", lineHeight: \"20px\" };\n case \"bodyMdParagraph\":\n return { fontSize: 16, fontWeight: \"400\", lineHeight: \"22px\" };\n case \"bodySm\":\n return { fontSize: 14, fontWeight: \"400\", lineHeight: \"18px\" };\n case \"bodySmAccent\":\n return { fontSize: 14, fontWeight: \"500\", lineHeight: \"18px\" };\n case \"bodySmParagraph\":\n return { fontSize: 14, fontWeight: \"400\", lineHeight: \"20px\" };\n case \"bodyXs\":\n return { fontSize: 12, fontWeight: \"400\", lineHeight: \"16px\" };\n case \"bodyXsAccent\":\n return { fontSize: 12, fontWeight: \"500\", lineHeight: \"16px\" };\n case \"bodyXsParagraph\":\n return { fontSize: 12, fontWeight: \"400\", lineHeight: \"18px\" };\n default:\n return { fontSize: 16, fontWeight: \"400\", lineHeight: \"20px\" };\n }\n};\n\nexport const Typography = forwardRef<any, TypographyProps>(\n (\n {\n children,\n align = \"inherit\",\n noWrap = false,\n variant = \"bodyMd\",\n color = \"inherit\",\n marginBottom = 0,\n marginTop = 0,\n as,\n ...rest\n },\n ref\n ) => {\n const { theme } = useDesignSystem();\n const variantStyles = getVariantStyles(variant);\n const colorValue = getColor(color, theme);\n const themefonts = theme.fonts as Record<string, string>;\n const fontFamily = isHeadingVariant(variant)\n ? themefonts?.heading\n : themefonts?.body;\n\n return (\n <Text\n {...rest}\n ref={ref}\n as={as}\n color={colorValue}\n fontSize={variantStyles.fontSize}\n fontWeight={variantStyles.fontWeight}\n fontFamily={fontFamily}\n style={{\n marginTop,\n marginBottom,\n textAlign: align === \"inherit\" ? undefined : align,\n lineHeight: variantStyles.lineHeight,\n ...(noWrap && {\n overflow: \"hidden\",\n textOverflow: \"ellipsis\",\n whiteSpace: \"nowrap\",\n }),\n ...rest.style,\n }}\n >\n {children}\n </Text>\n );\n }\n);\n\nTypography.displayName = \"Typography\";\n","import React from \"react\";\nimport styled from \"styled-components\";\nimport { TextProps } from \"@xsolla/xui-primitives-core\";\n\nconst StyledText = styled.span<TextProps>`\n color: ${(props) => props.color || \"inherit\"};\n font-size: ${(props) =>\n typeof props.fontSize === \"number\"\n ? `${props.fontSize}px`\n : props.fontSize || \"inherit\"};\n font-weight: ${(props) => props.fontWeight || \"normal\"};\n font-family: ${(props) =>\n props.fontFamily ||\n '\"Aktiv Grotesk\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif'};\n line-height: ${(props) =>\n typeof props.lineHeight === \"number\"\n ? `${props.lineHeight}px`\n : props.lineHeight || \"inherit\"};\n white-space: ${(props) => props.whiteSpace || \"normal\"};\n text-align: ${(props) => props.textAlign || \"inherit\"};\n text-decoration: ${(props) => props.textDecoration || \"none\"};\n`;\n\nexport const Text: React.FC<TextProps> = ({\n style,\n className,\n id,\n role,\n ...props\n}) => {\n return (\n <StyledText\n {...props}\n style={style}\n className={className}\n id={id}\n role={role}\n />\n );\n};\n"],"mappings":"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","names":["styled","import_jsx_runtime"]}
|
package/web/index.mjs
CHANGED
|
@@ -8,7 +8,7 @@ var StyledText = styled.span`
|
|
|
8
8
|
color: ${(props) => props.color || "inherit"};
|
|
9
9
|
font-size: ${(props) => typeof props.fontSize === "number" ? `${props.fontSize}px` : props.fontSize || "inherit"};
|
|
10
10
|
font-weight: ${(props) => props.fontWeight || "normal"};
|
|
11
|
-
font-family: ${(props) => props.fontFamily || '"
|
|
11
|
+
font-family: ${(props) => props.fontFamily || '"Aktiv Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif'};
|
|
12
12
|
line-height: ${(props) => typeof props.lineHeight === "number" ? `${props.lineHeight}px` : props.lineHeight || "inherit"};
|
|
13
13
|
white-space: ${(props) => props.whiteSpace || "normal"};
|
|
14
14
|
text-align: ${(props) => props.textAlign || "inherit"};
|
|
@@ -51,6 +51,7 @@ var getColor = (color, theme) => {
|
|
|
51
51
|
};
|
|
52
52
|
return colorMap[color] || color;
|
|
53
53
|
};
|
|
54
|
+
var isHeadingVariant = (variant) => variant === "h1" || variant === "h2" || variant === "h3" || variant === "h4" || variant === "display";
|
|
54
55
|
var getVariantStyles = (variant) => {
|
|
55
56
|
switch (variant) {
|
|
56
57
|
case "h1":
|
|
@@ -106,6 +107,8 @@ var Typography = forwardRef(
|
|
|
106
107
|
const { theme } = useDesignSystem();
|
|
107
108
|
const variantStyles = getVariantStyles(variant);
|
|
108
109
|
const colorValue = getColor(color, theme);
|
|
110
|
+
const themefonts = theme.fonts;
|
|
111
|
+
const fontFamily = isHeadingVariant(variant) ? themefonts?.heading : themefonts?.body;
|
|
109
112
|
return /* @__PURE__ */ jsx2(
|
|
110
113
|
Text,
|
|
111
114
|
{
|
|
@@ -115,6 +118,7 @@ var Typography = forwardRef(
|
|
|
115
118
|
color: colorValue,
|
|
116
119
|
fontSize: variantStyles.fontSize,
|
|
117
120
|
fontWeight: variantStyles.fontWeight,
|
|
121
|
+
fontFamily,
|
|
118
122
|
style: {
|
|
119
123
|
marginTop,
|
|
120
124
|
marginBottom,
|
package/web/index.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/Typography.tsx","../../../primitives-web/src/Text.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\n// @ts-expect-error - this will be resolved at build time\nimport { Text } from \"@xsolla/xui-primitives\";\nimport { useDesignSystem } from \"@xsolla/xui-core\";\nimport type { ColorType, TypographyProps, VariantType } from \"./types\";\n\nconst getColor = (\n color: ColorType | string,\n theme: any\n): string | undefined => {\n if (color === \"inherit\") return undefined;\n\n const colorMap: Record<string, string> = {\n primary: theme?.colors?.content?.primary,\n secondary: theme?.colors?.content?.secondary,\n tertiary: theme?.colors?.content?.tertiary,\n brand: theme?.colors?.content?.brand?.primary,\n brandSecondary: theme?.colors?.content?.brand?.secondary,\n success: theme?.colors?.content?.success?.primary,\n warning: theme?.colors?.content?.warning?.primary,\n alert: theme?.colors?.content?.alert?.primary,\n neutral: theme?.colors?.content?.neutral?.primary,\n };\n\n return colorMap[color] || color;\n};\n\nconst getVariantStyles = (variant: VariantType) => {\n switch (variant) {\n case \"h1\":\n return { fontSize: 40, fontWeight: \"700\", lineHeight: \"48px\" };\n case \"h2\":\n return { fontSize: 32, fontWeight: \"700\", lineHeight: \"38px\" };\n case \"h3\":\n return { fontSize: 28, fontWeight: \"700\", lineHeight: \"34px\" };\n case \"h4\":\n return { fontSize: 24, fontWeight: \"700\", lineHeight: \"28px\" };\n case \"display\":\n return { fontSize: 48, fontWeight: \"800\", lineHeight: \"58px\" };\n case \"bodyLg\":\n return { fontSize: 18, fontWeight: \"400\", lineHeight: \"24px\" };\n case \"bodyLgAccent\":\n return { fontSize: 18, fontWeight: \"500\", lineHeight: \"24px\" };\n case \"bodyLgParagraph\":\n return { fontSize: 18, fontWeight: \"400\", lineHeight: \"26px\" };\n case \"bodyMd\":\n return { fontSize: 16, fontWeight: \"400\", lineHeight: \"20px\" };\n case \"bodyMdAccent\":\n return { fontSize: 16, fontWeight: \"500\", lineHeight: \"20px\" };\n case \"bodyMdParagraph\":\n return { fontSize: 16, fontWeight: \"400\", lineHeight: \"22px\" };\n case \"bodySm\":\n return { fontSize: 14, fontWeight: \"400\", lineHeight: \"18px\" };\n case \"bodySmAccent\":\n return { fontSize: 14, fontWeight: \"500\", lineHeight: \"18px\" };\n case \"bodySmParagraph\":\n return { fontSize: 14, fontWeight: \"400\", lineHeight: \"20px\" };\n case \"bodyXs\":\n return { fontSize: 12, fontWeight: \"400\", lineHeight: \"16px\" };\n case \"bodyXsAccent\":\n return { fontSize: 12, fontWeight: \"500\", lineHeight: \"16px\" };\n case \"bodyXsParagraph\":\n return { fontSize: 12, fontWeight: \"400\", lineHeight: \"18px\" };\n default:\n return { fontSize: 16, fontWeight: \"400\", lineHeight: \"20px\" };\n }\n};\n\nexport const Typography = forwardRef<any, TypographyProps>(\n (\n {\n children,\n align = \"inherit\",\n noWrap = false,\n variant = \"bodyMd\",\n color = \"inherit\",\n marginBottom = 0,\n marginTop = 0,\n as,\n ...rest\n },\n ref\n ) => {\n const { theme } = useDesignSystem();\n const variantStyles = getVariantStyles(variant);\n const colorValue = getColor(color, theme);\n\n return (\n <Text\n {...rest}\n ref={ref}\n as={as}\n color={colorValue}\n fontSize={variantStyles.fontSize}\n fontWeight={variantStyles.fontWeight}\n style={{\n marginTop,\n marginBottom,\n textAlign: align === \"inherit\" ? undefined : align,\n lineHeight: variantStyles.lineHeight,\n ...(noWrap && {\n overflow: \"hidden\",\n textOverflow: \"ellipsis\",\n whiteSpace: \"nowrap\",\n }),\n ...rest.style,\n }}\n >\n {children}\n </Text>\n );\n }\n);\n\nTypography.displayName = \"Typography\";\n","import React from \"react\";\nimport styled from \"styled-components\";\nimport { TextProps } from \"@xsolla/xui-primitives-core\";\n\nconst StyledText = styled.span<TextProps>`\n color: ${(props) => props.color || \"inherit\"};\n font-size: ${(props) =>\n typeof props.fontSize === \"number\"\n ? `${props.fontSize}px`\n : props.fontSize || \"inherit\"};\n font-weight: ${(props) => props.fontWeight || \"normal\"};\n font-family: ${(props) =>\n props.fontFamily ||\n '\"
|
|
1
|
+
{"version":3,"sources":["../../src/Typography.tsx","../../../primitives-web/src/Text.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\n// @ts-expect-error - this will be resolved at build time\nimport { Text } from \"@xsolla/xui-primitives\";\nimport { useDesignSystem } from \"@xsolla/xui-core\";\nimport type { ColorType, TypographyProps, VariantType } from \"./types\";\n\nconst getColor = (\n color: ColorType | string,\n theme: any\n): string | undefined => {\n if (color === \"inherit\") return undefined;\n\n const colorMap: Record<string, string> = {\n primary: theme?.colors?.content?.primary,\n secondary: theme?.colors?.content?.secondary,\n tertiary: theme?.colors?.content?.tertiary,\n brand: theme?.colors?.content?.brand?.primary,\n brandSecondary: theme?.colors?.content?.brand?.secondary,\n success: theme?.colors?.content?.success?.primary,\n warning: theme?.colors?.content?.warning?.primary,\n alert: theme?.colors?.content?.alert?.primary,\n neutral: theme?.colors?.content?.neutral?.primary,\n };\n\n return colorMap[color] || color;\n};\n\nconst isHeadingVariant = (variant: VariantType): boolean =>\n variant === \"h1\" ||\n variant === \"h2\" ||\n variant === \"h3\" ||\n variant === \"h4\" ||\n variant === \"display\";\n\nconst getVariantStyles = (variant: VariantType) => {\n switch (variant) {\n case \"h1\":\n return { fontSize: 40, fontWeight: \"700\", lineHeight: \"48px\" };\n case \"h2\":\n return { fontSize: 32, fontWeight: \"700\", lineHeight: \"38px\" };\n case \"h3\":\n return { fontSize: 28, fontWeight: \"700\", lineHeight: \"34px\" };\n case \"h4\":\n return { fontSize: 24, fontWeight: \"700\", lineHeight: \"28px\" };\n case \"display\":\n return { fontSize: 48, fontWeight: \"800\", lineHeight: \"58px\" };\n case \"bodyLg\":\n return { fontSize: 18, fontWeight: \"400\", lineHeight: \"24px\" };\n case \"bodyLgAccent\":\n return { fontSize: 18, fontWeight: \"500\", lineHeight: \"24px\" };\n case \"bodyLgParagraph\":\n return { fontSize: 18, fontWeight: \"400\", lineHeight: \"26px\" };\n case \"bodyMd\":\n return { fontSize: 16, fontWeight: \"400\", lineHeight: \"20px\" };\n case \"bodyMdAccent\":\n return { fontSize: 16, fontWeight: \"500\", lineHeight: \"20px\" };\n case \"bodyMdParagraph\":\n return { fontSize: 16, fontWeight: \"400\", lineHeight: \"22px\" };\n case \"bodySm\":\n return { fontSize: 14, fontWeight: \"400\", lineHeight: \"18px\" };\n case \"bodySmAccent\":\n return { fontSize: 14, fontWeight: \"500\", lineHeight: \"18px\" };\n case \"bodySmParagraph\":\n return { fontSize: 14, fontWeight: \"400\", lineHeight: \"20px\" };\n case \"bodyXs\":\n return { fontSize: 12, fontWeight: \"400\", lineHeight: \"16px\" };\n case \"bodyXsAccent\":\n return { fontSize: 12, fontWeight: \"500\", lineHeight: \"16px\" };\n case \"bodyXsParagraph\":\n return { fontSize: 12, fontWeight: \"400\", lineHeight: \"18px\" };\n default:\n return { fontSize: 16, fontWeight: \"400\", lineHeight: \"20px\" };\n }\n};\n\nexport const Typography = forwardRef<any, TypographyProps>(\n (\n {\n children,\n align = \"inherit\",\n noWrap = false,\n variant = \"bodyMd\",\n color = \"inherit\",\n marginBottom = 0,\n marginTop = 0,\n as,\n ...rest\n },\n ref\n ) => {\n const { theme } = useDesignSystem();\n const variantStyles = getVariantStyles(variant);\n const colorValue = getColor(color, theme);\n const themefonts = theme.fonts as Record<string, string>;\n const fontFamily = isHeadingVariant(variant)\n ? themefonts?.heading\n : themefonts?.body;\n\n return (\n <Text\n {...rest}\n ref={ref}\n as={as}\n color={colorValue}\n fontSize={variantStyles.fontSize}\n fontWeight={variantStyles.fontWeight}\n fontFamily={fontFamily}\n style={{\n marginTop,\n marginBottom,\n textAlign: align === \"inherit\" ? undefined : align,\n lineHeight: variantStyles.lineHeight,\n ...(noWrap && {\n overflow: \"hidden\",\n textOverflow: \"ellipsis\",\n whiteSpace: \"nowrap\",\n }),\n ...rest.style,\n }}\n >\n {children}\n </Text>\n );\n }\n);\n\nTypography.displayName = \"Typography\";\n","import React from \"react\";\nimport styled from \"styled-components\";\nimport { TextProps } from \"@xsolla/xui-primitives-core\";\n\nconst StyledText = styled.span<TextProps>`\n color: ${(props) => props.color || \"inherit\"};\n font-size: ${(props) =>\n typeof props.fontSize === \"number\"\n ? `${props.fontSize}px`\n : props.fontSize || \"inherit\"};\n font-weight: ${(props) => props.fontWeight || \"normal\"};\n font-family: ${(props) =>\n props.fontFamily ||\n '\"Aktiv Grotesk\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif'};\n line-height: ${(props) =>\n typeof props.lineHeight === \"number\"\n ? `${props.lineHeight}px`\n : props.lineHeight || \"inherit\"};\n white-space: ${(props) => props.whiteSpace || \"normal\"};\n text-align: ${(props) => props.textAlign || \"inherit\"};\n text-decoration: ${(props) => props.textDecoration || \"none\"};\n`;\n\nexport const Text: React.FC<TextProps> = ({\n style,\n className,\n id,\n role,\n ...props\n}) => {\n return (\n <StyledText\n {...props}\n style={style}\n className={className}\n id={id}\n role={role}\n />\n );\n};\n"],"mappings":"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","names":["jsx"]}
|