@xsolla/xui-typography 0.99.0 → 0.100.0-pr159.1771990165
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +226 -15
- 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/README.md
CHANGED
|
@@ -1,33 +1,244 @@
|
|
|
1
|
-
|
|
1
|
+
---
|
|
2
|
+
title: Typography
|
|
3
|
+
subtitle: A text component with style presets.
|
|
4
|
+
description: A cross-platform React typography component with predefined text styles for headings, body, and display text.
|
|
5
|
+
---
|
|
2
6
|
|
|
3
|
-
|
|
7
|
+
# Typography
|
|
8
|
+
|
|
9
|
+
A cross-platform React typography component that provides predefined text style variants for consistent typography throughout your application.
|
|
4
10
|
|
|
5
11
|
## Installation
|
|
6
12
|
|
|
7
13
|
```bash
|
|
14
|
+
npm install @xsolla/xui-typography
|
|
15
|
+
# or
|
|
8
16
|
yarn add @xsolla/xui-typography
|
|
9
17
|
```
|
|
10
18
|
|
|
11
|
-
##
|
|
19
|
+
## Demo
|
|
20
|
+
|
|
21
|
+
### Headings
|
|
12
22
|
|
|
13
23
|
```tsx
|
|
14
|
-
import
|
|
24
|
+
import * as React from 'react';
|
|
25
|
+
import { Typography } from '@xsolla/xui-typography';
|
|
26
|
+
|
|
27
|
+
export default function Headings() {
|
|
28
|
+
return (
|
|
29
|
+
<div>
|
|
30
|
+
<Typography variant="display">Display Text</Typography>
|
|
31
|
+
<Typography variant="h1">Heading 1</Typography>
|
|
32
|
+
<Typography variant="h2">Heading 2</Typography>
|
|
33
|
+
<Typography variant="h3">Heading 3</Typography>
|
|
34
|
+
<Typography variant="h4">Heading 4</Typography>
|
|
35
|
+
</div>
|
|
36
|
+
);
|
|
37
|
+
}
|
|
38
|
+
```
|
|
39
|
+
|
|
40
|
+
### Body Text
|
|
15
41
|
|
|
16
|
-
|
|
17
|
-
|
|
42
|
+
```tsx
|
|
43
|
+
import * as React from 'react';
|
|
44
|
+
import { Typography } from '@xsolla/xui-typography';
|
|
45
|
+
|
|
46
|
+
export default function BodyText() {
|
|
47
|
+
return (
|
|
48
|
+
<div>
|
|
49
|
+
<Typography variant="bodyLg">Large body text</Typography>
|
|
50
|
+
<Typography variant="bodyMd">Medium body text (default)</Typography>
|
|
51
|
+
<Typography variant="bodySm">Small body text</Typography>
|
|
52
|
+
<Typography variant="bodyXs">Extra small body text</Typography>
|
|
53
|
+
</div>
|
|
54
|
+
);
|
|
55
|
+
}
|
|
56
|
+
```
|
|
57
|
+
|
|
58
|
+
### Colors
|
|
59
|
+
|
|
60
|
+
```tsx
|
|
61
|
+
import * as React from 'react';
|
|
62
|
+
import { Typography } from '@xsolla/xui-typography';
|
|
63
|
+
|
|
64
|
+
export default function ColoredText() {
|
|
65
|
+
return (
|
|
66
|
+
<div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
|
|
67
|
+
<Typography color="primary">Primary color</Typography>
|
|
68
|
+
<Typography color="secondary">Secondary color</Typography>
|
|
69
|
+
<Typography color="tertiary">Tertiary color</Typography>
|
|
70
|
+
<Typography color="brand">Brand color</Typography>
|
|
71
|
+
<Typography color="success">Success color</Typography>
|
|
72
|
+
<Typography color="warning">Warning color</Typography>
|
|
73
|
+
<Typography color="alert">Alert color</Typography>
|
|
74
|
+
</div>
|
|
75
|
+
);
|
|
76
|
+
}
|
|
77
|
+
```
|
|
78
|
+
|
|
79
|
+
## Anatomy
|
|
80
|
+
|
|
81
|
+
```jsx
|
|
82
|
+
import { Typography } from '@xsolla/xui-typography';
|
|
83
|
+
|
|
84
|
+
<Typography
|
|
85
|
+
variant="bodyMd" // Text style variant
|
|
86
|
+
color="primary" // Text color
|
|
87
|
+
align="left" // Text alignment
|
|
88
|
+
noWrap={false} // Truncate with ellipsis
|
|
89
|
+
marginTop={0} // Top margin
|
|
90
|
+
marginBottom={0} // Bottom margin
|
|
91
|
+
as="p" // HTML element to render
|
|
92
|
+
>
|
|
93
|
+
Text content
|
|
18
94
|
</Typography>
|
|
19
95
|
```
|
|
20
96
|
|
|
21
|
-
##
|
|
97
|
+
## Examples
|
|
98
|
+
|
|
99
|
+
### Article Layout
|
|
100
|
+
|
|
101
|
+
```tsx
|
|
102
|
+
import * as React from 'react';
|
|
103
|
+
import { Typography } from '@xsolla/xui-typography';
|
|
104
|
+
|
|
105
|
+
export default function ArticleLayout() {
|
|
106
|
+
return (
|
|
107
|
+
<article style={{ maxWidth: 600 }}>
|
|
108
|
+
<Typography variant="h1" marginBottom={16}>
|
|
109
|
+
Article Title
|
|
110
|
+
</Typography>
|
|
111
|
+
<Typography variant="bodySm" color="secondary" marginBottom={24}>
|
|
112
|
+
Published on January 20, 2026
|
|
113
|
+
</Typography>
|
|
114
|
+
<Typography variant="bodyLgParagraph" marginBottom={16}>
|
|
115
|
+
This is the introduction paragraph. It uses the paragraph variant
|
|
116
|
+
which has increased line height for better readability in long-form
|
|
117
|
+
content.
|
|
118
|
+
</Typography>
|
|
119
|
+
<Typography variant="h3" marginBottom={12}>
|
|
120
|
+
Section Heading
|
|
121
|
+
</Typography>
|
|
122
|
+
<Typography variant="bodyMdParagraph">
|
|
123
|
+
This is a regular paragraph section with medium body text.
|
|
124
|
+
The paragraph variants have larger line heights for improved
|
|
125
|
+
readability.
|
|
126
|
+
</Typography>
|
|
127
|
+
</article>
|
|
128
|
+
);
|
|
129
|
+
}
|
|
130
|
+
```
|
|
131
|
+
|
|
132
|
+
### Text Truncation
|
|
133
|
+
|
|
134
|
+
```tsx
|
|
135
|
+
import * as React from 'react';
|
|
136
|
+
import { Typography } from '@xsolla/xui-typography';
|
|
137
|
+
|
|
138
|
+
export default function TruncatedText() {
|
|
139
|
+
return (
|
|
140
|
+
<div style={{ width: 200 }}>
|
|
141
|
+
<Typography variant="bodyMd" noWrap>
|
|
142
|
+
This is a very long text that will be truncated with an ellipsis
|
|
143
|
+
</Typography>
|
|
144
|
+
</div>
|
|
145
|
+
);
|
|
146
|
+
}
|
|
147
|
+
```
|
|
148
|
+
|
|
149
|
+
### Accent Variants
|
|
150
|
+
|
|
151
|
+
```tsx
|
|
152
|
+
import * as React from 'react';
|
|
153
|
+
import { Typography } from '@xsolla/xui-typography';
|
|
154
|
+
|
|
155
|
+
export default function AccentText() {
|
|
156
|
+
return (
|
|
157
|
+
<div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
|
|
158
|
+
<Typography variant="bodyLg">Regular large text</Typography>
|
|
159
|
+
<Typography variant="bodyLgAccent">Accented large text (500 weight)</Typography>
|
|
160
|
+
<Typography variant="bodyMd">Regular medium text</Typography>
|
|
161
|
+
<Typography variant="bodyMdAccent">Accented medium text (500 weight)</Typography>
|
|
162
|
+
</div>
|
|
163
|
+
);
|
|
164
|
+
}
|
|
165
|
+
```
|
|
166
|
+
|
|
167
|
+
## API Reference
|
|
22
168
|
|
|
23
169
|
### Typography
|
|
24
170
|
|
|
171
|
+
**Typography Props:**
|
|
172
|
+
|
|
25
173
|
| Prop | Type | Default | Description |
|
|
26
|
-
|
|
27
|
-
|
|
|
28
|
-
|
|
|
29
|
-
|
|
|
30
|
-
|
|
|
31
|
-
|
|
|
32
|
-
|
|
|
33
|
-
|
|
|
174
|
+
| :--- | :--- | :------ | :---------- |
|
|
175
|
+
| children | `ReactNode` | - | Text content. |
|
|
176
|
+
| variant | `VariantType` | `"bodyMd"` | Text style variant. |
|
|
177
|
+
| color | `ColorType` | `"inherit"` | Text color. |
|
|
178
|
+
| align | `"left" \| "center" \| "right" \| "inherit"` | `"inherit"` | Text alignment. |
|
|
179
|
+
| noWrap | `boolean` | `false` | Truncate with ellipsis. |
|
|
180
|
+
| marginTop | `number` | `0` | Top margin in pixels. |
|
|
181
|
+
| marginBottom | `number` | `0` | Bottom margin in pixels. |
|
|
182
|
+
| as | `ElementType` | - | HTML element to render. |
|
|
183
|
+
|
|
184
|
+
**VariantType:**
|
|
185
|
+
|
|
186
|
+
```typescript
|
|
187
|
+
type VariantType =
|
|
188
|
+
| "display" // 48px, 800 weight
|
|
189
|
+
| "h1" // 40px, 700 weight
|
|
190
|
+
| "h2" // 32px, 700 weight
|
|
191
|
+
| "h3" // 28px, 700 weight
|
|
192
|
+
| "h4" // 24px, 700 weight
|
|
193
|
+
| "bodyLg" // 18px, 400 weight
|
|
194
|
+
| "bodyLgAccent" // 18px, 500 weight
|
|
195
|
+
| "bodyLgParagraph" // 18px, 400 weight, larger line height
|
|
196
|
+
| "bodyMd" // 16px, 400 weight
|
|
197
|
+
| "bodyMdAccent" // 16px, 500 weight
|
|
198
|
+
| "bodyMdParagraph" // 16px, 400 weight, larger line height
|
|
199
|
+
| "bodySm" // 14px, 400 weight
|
|
200
|
+
| "bodySmAccent" // 14px, 500 weight
|
|
201
|
+
| "bodySmParagraph" // 14px, 400 weight, larger line height
|
|
202
|
+
| "bodyXs" // 12px, 400 weight
|
|
203
|
+
| "bodyXsAccent" // 12px, 500 weight
|
|
204
|
+
| "bodyXsParagraph" // 12px, 400 weight, larger line height
|
|
205
|
+
```
|
|
206
|
+
|
|
207
|
+
**ColorType:**
|
|
208
|
+
|
|
209
|
+
```typescript
|
|
210
|
+
type ColorType =
|
|
211
|
+
| "inherit"
|
|
212
|
+
| "primary"
|
|
213
|
+
| "secondary"
|
|
214
|
+
| "tertiary"
|
|
215
|
+
| "brand"
|
|
216
|
+
| "brandSecondary"
|
|
217
|
+
| "success"
|
|
218
|
+
| "warning"
|
|
219
|
+
| "alert"
|
|
220
|
+
| "neutral"
|
|
221
|
+
| string; // Custom color value
|
|
222
|
+
```
|
|
223
|
+
|
|
224
|
+
## Variant Specifications
|
|
225
|
+
|
|
226
|
+
| Variant | Size | Weight | Line Height |
|
|
227
|
+
| :------ | :--- | :----- | :---------- |
|
|
228
|
+
| display | 48px | 800 | 58px |
|
|
229
|
+
| h1 | 40px | 700 | 48px |
|
|
230
|
+
| h2 | 32px | 700 | 38px |
|
|
231
|
+
| h3 | 28px | 700 | 34px |
|
|
232
|
+
| h4 | 24px | 700 | 28px |
|
|
233
|
+
| bodyLg | 18px | 400 | 24px |
|
|
234
|
+
| bodyLgAccent | 18px | 500 | 24px |
|
|
235
|
+
| bodyLgParagraph | 18px | 400 | 26px |
|
|
236
|
+
| bodyMd | 16px | 400 | 20px |
|
|
237
|
+
| bodyMdAccent | 16px | 500 | 20px |
|
|
238
|
+
| bodyMdParagraph | 16px | 400 | 22px |
|
|
239
|
+
| bodySm | 14px | 400 | 18px |
|
|
240
|
+
| bodySmAccent | 14px | 500 | 18px |
|
|
241
|
+
| bodySmParagraph | 14px | 400 | 20px |
|
|
242
|
+
| bodyXs | 12px | 400 | 16px |
|
|
243
|
+
| bodyXsAccent | 12px | 500 | 16px |
|
|
244
|
+
| bodyXsParagraph | 12px | 400 | 18px |
|
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":"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","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.100.0-pr159.1771990165",
|
|
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.100.0-pr159.1771990165",
|
|
17
|
+
"@xsolla/xui-primitives-core": "0.100.0-pr159.1771990165"
|
|
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"]}
|