@xsolla/xui-typography 0.112.0 → 0.113.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 +32 -3
- package/native/index.js.map +1 -1
- package/native/index.mjs +36 -4
- package/native/index.mjs.map +1 -1
- package/package.json +3 -3
- package/web/index.js +2 -0
- package/web/index.js.map +1 -1
- package/web/index.mjs +2 -0
- package/web/index.mjs.map +1 -1
package/native/index.js
CHANGED
|
@@ -37,29 +37,57 @@ var roleMap = {
|
|
|
37
37
|
link: "link",
|
|
38
38
|
text: "text"
|
|
39
39
|
};
|
|
40
|
+
var parseNumericValue = (value) => {
|
|
41
|
+
if (value === void 0) return void 0;
|
|
42
|
+
if (typeof value === "number") return value;
|
|
43
|
+
const parsed = parseFloat(value);
|
|
44
|
+
return isNaN(parsed) ? void 0 : parsed;
|
|
45
|
+
};
|
|
40
46
|
var Text = ({
|
|
41
47
|
children,
|
|
42
48
|
color,
|
|
43
49
|
fontSize,
|
|
44
50
|
fontWeight,
|
|
45
51
|
fontFamily,
|
|
52
|
+
textAlign,
|
|
53
|
+
lineHeight,
|
|
54
|
+
numberOfLines,
|
|
46
55
|
id,
|
|
47
56
|
role,
|
|
57
|
+
style: styleProp,
|
|
48
58
|
...props
|
|
49
59
|
}) => {
|
|
50
60
|
let resolvedFontFamily = fontFamily ? fontFamily.split(",")[0].replace(/['"]/g, "").trim() : void 0;
|
|
51
61
|
if (resolvedFontFamily === "Pilat Wide" || resolvedFontFamily === "Pilat Wide Bold" || resolvedFontFamily === "Aktiv Grotesk") {
|
|
52
62
|
resolvedFontFamily = void 0;
|
|
53
63
|
}
|
|
54
|
-
const
|
|
64
|
+
const incomingStyle = import_react_native.StyleSheet.flatten(styleProp);
|
|
65
|
+
const baseStyle = {
|
|
55
66
|
color,
|
|
56
67
|
fontSize: typeof fontSize === "number" ? fontSize : void 0,
|
|
57
68
|
fontWeight,
|
|
58
69
|
fontFamily: resolvedFontFamily,
|
|
59
|
-
textDecorationLine: props.textDecoration
|
|
70
|
+
textDecorationLine: props.textDecoration,
|
|
71
|
+
textAlign: textAlign ?? incomingStyle?.textAlign,
|
|
72
|
+
lineHeight: parseNumericValue(lineHeight ?? incomingStyle?.lineHeight),
|
|
73
|
+
marginTop: parseNumericValue(
|
|
74
|
+
incomingStyle?.marginTop
|
|
75
|
+
),
|
|
76
|
+
marginBottom: parseNumericValue(
|
|
77
|
+
incomingStyle?.marginBottom
|
|
78
|
+
)
|
|
60
79
|
};
|
|
61
80
|
const accessibilityRole = role ? roleMap[role] : void 0;
|
|
62
|
-
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
81
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
82
|
+
import_react_native.Text,
|
|
83
|
+
{
|
|
84
|
+
style: baseStyle,
|
|
85
|
+
numberOfLines,
|
|
86
|
+
testID: id,
|
|
87
|
+
accessibilityRole,
|
|
88
|
+
children
|
|
89
|
+
}
|
|
90
|
+
);
|
|
63
91
|
};
|
|
64
92
|
|
|
65
93
|
// src/Typography.tsx
|
|
@@ -148,6 +176,7 @@ var Typography = (0, import_react.forwardRef)(
|
|
|
148
176
|
fontSize: variantStyles.fontSize,
|
|
149
177
|
fontWeight: variantStyles.fontWeight,
|
|
150
178
|
fontFamily,
|
|
179
|
+
numberOfLines: noWrap ? 1 : void 0,
|
|
151
180
|
style: {
|
|
152
181
|
marginTop,
|
|
153
182
|
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 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":"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","names":["RNText","import_jsx_runtime"]}
|
|
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 numberOfLines={noWrap ? 1 : undefined}\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 {\n Text as RNText,\n TextStyle,\n AccessibilityRole,\n StyleSheet,\n} from \"react-native\";\nimport { TextProps } from \"@xsolla/xui-primitives-core\";\n\nconst roleMap: Record<string, AccessibilityRole> = {\n alert: \"alert\",\n heading: \"header\",\n button: \"button\",\n link: \"link\",\n text: \"text\",\n};\n\nconst parseNumericValue = (\n value: string | number | undefined\n): number | undefined => {\n if (value === undefined) return undefined;\n if (typeof value === \"number\") return value;\n const parsed = parseFloat(value);\n return isNaN(parsed) ? undefined : parsed;\n};\n\nexport const Text: React.FC<TextProps> = ({\n children,\n color,\n fontSize,\n fontWeight,\n fontFamily,\n textAlign,\n lineHeight,\n numberOfLines,\n id,\n role,\n style: styleProp,\n ...props\n}) => {\n let resolvedFontFamily = fontFamily\n ? fontFamily.split(\",\")[0].replace(/['\"]/g, \"\").trim()\n : undefined;\n\n if (\n resolvedFontFamily === \"Pilat Wide\" ||\n resolvedFontFamily === \"Pilat Wide Bold\" ||\n resolvedFontFamily === \"Aktiv Grotesk\"\n ) {\n resolvedFontFamily = undefined;\n }\n\n const incomingStyle = StyleSheet.flatten(styleProp) as TextStyle | undefined;\n\n const baseStyle: 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 textAlign: textAlign ?? incomingStyle?.textAlign,\n lineHeight: parseNumericValue(lineHeight ?? incomingStyle?.lineHeight),\n marginTop: parseNumericValue(\n incomingStyle?.marginTop as number | string | undefined\n ),\n marginBottom: parseNumericValue(\n incomingStyle?.marginBottom as number | string | undefined\n ),\n };\n\n const accessibilityRole = role ? roleMap[role] : undefined;\n\n return (\n <RNText\n style={baseStyle}\n numberOfLines={numberOfLines}\n testID={id}\n accessibilityRole={accessibilityRole}\n >\n {children}\n </RNText>\n );\n};\n"],"mappings":"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","names":["RNText","import_jsx_runtime"]}
|
package/native/index.mjs
CHANGED
|
@@ -2,7 +2,10 @@
|
|
|
2
2
|
import { forwardRef } from "react";
|
|
3
3
|
|
|
4
4
|
// ../primitives-native/src/Text.tsx
|
|
5
|
-
import {
|
|
5
|
+
import {
|
|
6
|
+
Text as RNText,
|
|
7
|
+
StyleSheet
|
|
8
|
+
} from "react-native";
|
|
6
9
|
import { jsx } from "react/jsx-runtime";
|
|
7
10
|
var roleMap = {
|
|
8
11
|
alert: "alert",
|
|
@@ -11,29 +14,57 @@ var roleMap = {
|
|
|
11
14
|
link: "link",
|
|
12
15
|
text: "text"
|
|
13
16
|
};
|
|
17
|
+
var parseNumericValue = (value) => {
|
|
18
|
+
if (value === void 0) return void 0;
|
|
19
|
+
if (typeof value === "number") return value;
|
|
20
|
+
const parsed = parseFloat(value);
|
|
21
|
+
return isNaN(parsed) ? void 0 : parsed;
|
|
22
|
+
};
|
|
14
23
|
var Text = ({
|
|
15
24
|
children,
|
|
16
25
|
color,
|
|
17
26
|
fontSize,
|
|
18
27
|
fontWeight,
|
|
19
28
|
fontFamily,
|
|
29
|
+
textAlign,
|
|
30
|
+
lineHeight,
|
|
31
|
+
numberOfLines,
|
|
20
32
|
id,
|
|
21
33
|
role,
|
|
34
|
+
style: styleProp,
|
|
22
35
|
...props
|
|
23
36
|
}) => {
|
|
24
37
|
let resolvedFontFamily = fontFamily ? fontFamily.split(",")[0].replace(/['"]/g, "").trim() : void 0;
|
|
25
38
|
if (resolvedFontFamily === "Pilat Wide" || resolvedFontFamily === "Pilat Wide Bold" || resolvedFontFamily === "Aktiv Grotesk") {
|
|
26
39
|
resolvedFontFamily = void 0;
|
|
27
40
|
}
|
|
28
|
-
const
|
|
41
|
+
const incomingStyle = StyleSheet.flatten(styleProp);
|
|
42
|
+
const baseStyle = {
|
|
29
43
|
color,
|
|
30
44
|
fontSize: typeof fontSize === "number" ? fontSize : void 0,
|
|
31
45
|
fontWeight,
|
|
32
46
|
fontFamily: resolvedFontFamily,
|
|
33
|
-
textDecorationLine: props.textDecoration
|
|
47
|
+
textDecorationLine: props.textDecoration,
|
|
48
|
+
textAlign: textAlign ?? incomingStyle?.textAlign,
|
|
49
|
+
lineHeight: parseNumericValue(lineHeight ?? incomingStyle?.lineHeight),
|
|
50
|
+
marginTop: parseNumericValue(
|
|
51
|
+
incomingStyle?.marginTop
|
|
52
|
+
),
|
|
53
|
+
marginBottom: parseNumericValue(
|
|
54
|
+
incomingStyle?.marginBottom
|
|
55
|
+
)
|
|
34
56
|
};
|
|
35
57
|
const accessibilityRole = role ? roleMap[role] : void 0;
|
|
36
|
-
return /* @__PURE__ */ jsx(
|
|
58
|
+
return /* @__PURE__ */ jsx(
|
|
59
|
+
RNText,
|
|
60
|
+
{
|
|
61
|
+
style: baseStyle,
|
|
62
|
+
numberOfLines,
|
|
63
|
+
testID: id,
|
|
64
|
+
accessibilityRole,
|
|
65
|
+
children
|
|
66
|
+
}
|
|
67
|
+
);
|
|
37
68
|
};
|
|
38
69
|
|
|
39
70
|
// src/Typography.tsx
|
|
@@ -122,6 +153,7 @@ var Typography = forwardRef(
|
|
|
122
153
|
fontSize: variantStyles.fontSize,
|
|
123
154
|
fontWeight: variantStyles.fontWeight,
|
|
124
155
|
fontFamily,
|
|
156
|
+
numberOfLines: noWrap ? 1 : void 0,
|
|
125
157
|
style: {
|
|
126
158
|
marginTop,
|
|
127
159
|
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 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":"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","names":["jsx"]}
|
|
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 numberOfLines={noWrap ? 1 : undefined}\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 {\n Text as RNText,\n TextStyle,\n AccessibilityRole,\n StyleSheet,\n} from \"react-native\";\nimport { TextProps } from \"@xsolla/xui-primitives-core\";\n\nconst roleMap: Record<string, AccessibilityRole> = {\n alert: \"alert\",\n heading: \"header\",\n button: \"button\",\n link: \"link\",\n text: \"text\",\n};\n\nconst parseNumericValue = (\n value: string | number | undefined\n): number | undefined => {\n if (value === undefined) return undefined;\n if (typeof value === \"number\") return value;\n const parsed = parseFloat(value);\n return isNaN(parsed) ? undefined : parsed;\n};\n\nexport const Text: React.FC<TextProps> = ({\n children,\n color,\n fontSize,\n fontWeight,\n fontFamily,\n textAlign,\n lineHeight,\n numberOfLines,\n id,\n role,\n style: styleProp,\n ...props\n}) => {\n let resolvedFontFamily = fontFamily\n ? fontFamily.split(\",\")[0].replace(/['\"]/g, \"\").trim()\n : undefined;\n\n if (\n resolvedFontFamily === \"Pilat Wide\" ||\n resolvedFontFamily === \"Pilat Wide Bold\" ||\n resolvedFontFamily === \"Aktiv Grotesk\"\n ) {\n resolvedFontFamily = undefined;\n }\n\n const incomingStyle = StyleSheet.flatten(styleProp) as TextStyle | undefined;\n\n const baseStyle: 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 textAlign: textAlign ?? incomingStyle?.textAlign,\n lineHeight: parseNumericValue(lineHeight ?? incomingStyle?.lineHeight),\n marginTop: parseNumericValue(\n incomingStyle?.marginTop as number | string | undefined\n ),\n marginBottom: parseNumericValue(\n incomingStyle?.marginBottom as number | string | undefined\n ),\n };\n\n const accessibilityRole = role ? roleMap[role] : undefined;\n\n return (\n <RNText\n style={baseStyle}\n numberOfLines={numberOfLines}\n testID={id}\n accessibilityRole={accessibilityRole}\n >\n {children}\n </RNText>\n );\n};\n"],"mappings":"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","names":["jsx"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@xsolla/xui-typography",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.113.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.113.0",
|
|
17
|
+
"@xsolla/xui-primitives-core": "0.113.0"
|
|
18
18
|
},
|
|
19
19
|
"peerDependencies": {
|
|
20
20
|
"react": ">=16.8.0",
|
package/web/index.js
CHANGED
|
@@ -55,6 +55,7 @@ var Text = ({
|
|
|
55
55
|
className,
|
|
56
56
|
id,
|
|
57
57
|
role,
|
|
58
|
+
numberOfLines: _numberOfLines,
|
|
58
59
|
...props
|
|
59
60
|
}) => {
|
|
60
61
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
@@ -155,6 +156,7 @@ var Typography = (0, import_react.forwardRef)(
|
|
|
155
156
|
fontSize: variantStyles.fontSize,
|
|
156
157
|
fontWeight: variantStyles.fontWeight,
|
|
157
158
|
fontFamily,
|
|
159
|
+
numberOfLines: noWrap ? 1 : void 0,
|
|
158
160
|
style: {
|
|
159
161
|
marginTop,
|
|
160
162
|
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 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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA,mBAA2B;;;ACC3B,+BAAmB;
|
|
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 numberOfLines={noWrap ? 1 : undefined}\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 numberOfLines: _numberOfLines,\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
|
@@ -19,6 +19,7 @@ var Text = ({
|
|
|
19
19
|
className,
|
|
20
20
|
id,
|
|
21
21
|
role,
|
|
22
|
+
numberOfLines: _numberOfLines,
|
|
22
23
|
...props
|
|
23
24
|
}) => {
|
|
24
25
|
return /* @__PURE__ */ jsx(
|
|
@@ -119,6 +120,7 @@ var Typography = forwardRef(
|
|
|
119
120
|
fontSize: variantStyles.fontSize,
|
|
120
121
|
fontWeight: variantStyles.fontWeight,
|
|
121
122
|
fontFamily,
|
|
123
|
+
numberOfLines: noWrap ? 1 : void 0,
|
|
122
124
|
style: {
|
|
123
125
|
marginTop,
|
|
124
126
|
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 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":";AAAA,SAAS,kBAAkB;;;ACC3B,OAAO,YAAY;
|
|
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 numberOfLines={noWrap ? 1 : undefined}\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 numberOfLines: _numberOfLines,\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"]}
|