@xsolla/xui-typography 0.134.0 → 0.136.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.d.mts +1 -1
- package/native/index.d.ts +1 -1
- package/native/index.js +208 -45
- package/native/index.js.map +1 -1
- package/native/index.mjs +211 -46
- package/native/index.mjs.map +1 -1
- package/package.json +3 -3
- package/web/index.d.mts +1 -1
- package/web/index.d.ts +1 -1
- package/web/index.js +208 -45
- package/web/index.js.map +1 -1
- package/web/index.mjs +211 -46
- package/web/index.mjs.map +1 -1
package/native/index.d.mts
CHANGED
|
@@ -3,7 +3,7 @@ import { ReactNode, ElementType } from 'react';
|
|
|
3
3
|
import { ThemeOverrideProps } from '@xsolla/xui-core';
|
|
4
4
|
|
|
5
5
|
type AlignType = "center" | "inherit" | "justify" | "left" | "right";
|
|
6
|
-
type VariantType = "h1" | "h2" | "h3" | "h4" | "h5" | "display" | "bodyLg" | "bodyLgAccent" | "bodyLgParagraph" | "bodyMd" | "bodyMdAccent" | "bodyMdParagraph" | "bodySm" | "bodySmAccent" | "bodySmParagraph" | "bodyXs" | "bodyXsAccent" | "bodyXsParagraph";
|
|
6
|
+
type VariantType = "h1" | "h2" | "h3" | "h4" | "h5" | "display" | "bodyLg" | "bodyLgAccent" | "bodyLgParagraph" | "bodyMd" | "bodyMdAccent" | "bodyMdParagraph" | "bodySm" | "bodySmAccent" | "bodySmParagraph" | "bodyXs" | "bodyXsAccent" | "bodyXsParagraph" | "bodyXxs" | "bodyXxsAccent" | "bodyXxsParagraph";
|
|
7
7
|
type ThemeColorType = "primary" | "secondary" | "tertiary" | "brand" | "brandSecondary" | "success" | "warning" | "alert" | "neutral";
|
|
8
8
|
type ColorType = ThemeColorType | "inherit";
|
|
9
9
|
type ProductContext = "b2c" | "b2b" | "paystation" | "presentation";
|
package/native/index.d.ts
CHANGED
|
@@ -3,7 +3,7 @@ import { ReactNode, ElementType } from 'react';
|
|
|
3
3
|
import { ThemeOverrideProps } from '@xsolla/xui-core';
|
|
4
4
|
|
|
5
5
|
type AlignType = "center" | "inherit" | "justify" | "left" | "right";
|
|
6
|
-
type VariantType = "h1" | "h2" | "h3" | "h4" | "h5" | "display" | "bodyLg" | "bodyLgAccent" | "bodyLgParagraph" | "bodyMd" | "bodyMdAccent" | "bodyMdParagraph" | "bodySm" | "bodySmAccent" | "bodySmParagraph" | "bodyXs" | "bodyXsAccent" | "bodyXsParagraph";
|
|
6
|
+
type VariantType = "h1" | "h2" | "h3" | "h4" | "h5" | "display" | "bodyLg" | "bodyLgAccent" | "bodyLgParagraph" | "bodyMd" | "bodyMdAccent" | "bodyMdParagraph" | "bodySm" | "bodySmAccent" | "bodySmParagraph" | "bodyXs" | "bodyXsAccent" | "bodyXsParagraph" | "bodyXxs" | "bodyXxsAccent" | "bodyXxsParagraph";
|
|
7
7
|
type ThemeColorType = "primary" | "secondary" | "tertiary" | "brand" | "brandSecondary" | "success" | "warning" | "alert" | "neutral";
|
|
8
8
|
type ColorType = ThemeColorType | "inherit";
|
|
9
9
|
type ProductContext = "b2c" | "b2b" | "paystation" | "presentation";
|
package/native/index.js
CHANGED
|
@@ -111,22 +111,41 @@ var getColor = (color, theme) => {
|
|
|
111
111
|
return colorMap[color] || color;
|
|
112
112
|
};
|
|
113
113
|
var isHeadingVariant = (variant) => variant === "h1" || variant === "h2" || variant === "h3" || variant === "h4" || variant === "h5" || variant === "display";
|
|
114
|
+
var bodyMap = {
|
|
115
|
+
bodyLg: "body-lg",
|
|
116
|
+
bodyLgAccent: "body-lg",
|
|
117
|
+
bodyLgParagraph: "body-lg",
|
|
118
|
+
bodyMd: "body-md",
|
|
119
|
+
bodyMdAccent: "body-md",
|
|
120
|
+
bodyMdParagraph: "body-md",
|
|
121
|
+
bodySm: "body-sm",
|
|
122
|
+
bodySmAccent: "body-sm",
|
|
123
|
+
bodySmParagraph: "body-sm",
|
|
124
|
+
bodyXs: "body-xs",
|
|
125
|
+
bodyXsAccent: "body-xs",
|
|
126
|
+
bodyXsParagraph: "body-xs",
|
|
127
|
+
bodyXxs: "body-xxs",
|
|
128
|
+
bodyXxsAccent: "body-xxs",
|
|
129
|
+
bodyXxsParagraph: "body-xxs"
|
|
130
|
+
};
|
|
131
|
+
var headingMap = {
|
|
132
|
+
h1: "h1",
|
|
133
|
+
h2: "h2",
|
|
134
|
+
h3: "h3",
|
|
135
|
+
h4: "h4",
|
|
136
|
+
h5: "h5"
|
|
137
|
+
};
|
|
114
138
|
var getVariantStyles = (variant, typographyTokens) => {
|
|
115
139
|
if (typographyTokens) {
|
|
116
|
-
const headingMap = {
|
|
117
|
-
h1: "h1",
|
|
118
|
-
h2: "h2",
|
|
119
|
-
h3: "h3",
|
|
120
|
-
h4: "h4",
|
|
121
|
-
h5: "h5"
|
|
122
|
-
};
|
|
123
140
|
if (headingMap[variant]) {
|
|
124
141
|
const token = typographyTokens.heading[headingMap[variant]];
|
|
125
142
|
if (token) {
|
|
126
143
|
return {
|
|
127
144
|
fontSize: token.fontSize,
|
|
128
145
|
fontWeight: String(token.fontWeight),
|
|
129
|
-
lineHeight: token.lineHeight
|
|
146
|
+
lineHeight: token.lineHeight,
|
|
147
|
+
scaleStep: token.scaleStep,
|
|
148
|
+
lineHeightCategory: token.lineHeightCategory
|
|
130
149
|
};
|
|
131
150
|
}
|
|
132
151
|
}
|
|
@@ -135,82 +154,223 @@ var getVariantStyles = (variant, typographyTokens) => {
|
|
|
135
154
|
return {
|
|
136
155
|
fontSize: token.fontSize,
|
|
137
156
|
fontWeight: String(token.fontWeight),
|
|
138
|
-
lineHeight: token.lineHeight
|
|
157
|
+
lineHeight: token.lineHeight,
|
|
158
|
+
scaleStep: token.scaleStep,
|
|
159
|
+
lineHeightCategory: token.lineHeightCategory
|
|
139
160
|
};
|
|
140
161
|
}
|
|
141
|
-
const bodyMap = {
|
|
142
|
-
bodyLg: "body-lg",
|
|
143
|
-
bodyLgAccent: "body-lg",
|
|
144
|
-
bodyLgParagraph: "body-lg",
|
|
145
|
-
bodyMd: "body-md",
|
|
146
|
-
bodyMdAccent: "body-md",
|
|
147
|
-
bodyMdParagraph: "body-md",
|
|
148
|
-
bodySm: "body-sm",
|
|
149
|
-
bodySmAccent: "body-sm",
|
|
150
|
-
bodySmParagraph: "body-sm",
|
|
151
|
-
bodyXs: "body-xs",
|
|
152
|
-
bodyXsAccent: "body-xs",
|
|
153
|
-
bodyXsParagraph: "body-xs"
|
|
154
|
-
};
|
|
155
162
|
const bodyKey = bodyMap[variant];
|
|
156
163
|
if (bodyKey && typographyTokens.basic?.[bodyKey]) {
|
|
157
164
|
const token = typographyTokens.basic[bodyKey];
|
|
158
165
|
let fontWeight = token.fontWeight;
|
|
159
166
|
let lineHeight = token.lineHeight;
|
|
167
|
+
let lineHeightCategory = token.lineHeightCategory;
|
|
168
|
+
let lineHeightScaleStep;
|
|
160
169
|
if (variant.includes("Accent") && token.accent) {
|
|
161
170
|
fontWeight = token.accent.fontWeight;
|
|
162
171
|
}
|
|
163
172
|
if (variant.includes("Paragraph") && token.paragraph) {
|
|
164
173
|
lineHeight = token.paragraph.lineHeight;
|
|
174
|
+
lineHeightCategory = "text";
|
|
175
|
+
lineHeightScaleStep = token.paragraph.lineHeightScaleStep;
|
|
165
176
|
}
|
|
166
177
|
return {
|
|
167
178
|
fontSize: token.fontSize,
|
|
168
179
|
fontWeight: String(fontWeight),
|
|
169
|
-
lineHeight
|
|
180
|
+
lineHeight,
|
|
181
|
+
scaleStep: token.scaleStep,
|
|
182
|
+
lineHeightCategory,
|
|
183
|
+
lineHeightScaleStep
|
|
170
184
|
};
|
|
171
185
|
}
|
|
172
186
|
}
|
|
173
187
|
switch (variant) {
|
|
174
188
|
case "h1":
|
|
175
|
-
return {
|
|
189
|
+
return {
|
|
190
|
+
fontSize: 56,
|
|
191
|
+
fontWeight: "400",
|
|
192
|
+
lineHeight: "56px",
|
|
193
|
+
scaleStep: "650",
|
|
194
|
+
lineHeightCategory: "display"
|
|
195
|
+
};
|
|
176
196
|
case "h2":
|
|
177
|
-
return {
|
|
197
|
+
return {
|
|
198
|
+
fontSize: 48,
|
|
199
|
+
fontWeight: "400",
|
|
200
|
+
lineHeight: "48px",
|
|
201
|
+
scaleStep: "550",
|
|
202
|
+
lineHeightCategory: "display"
|
|
203
|
+
};
|
|
178
204
|
case "h3":
|
|
179
|
-
return {
|
|
205
|
+
return {
|
|
206
|
+
fontSize: 32,
|
|
207
|
+
fontWeight: "400",
|
|
208
|
+
lineHeight: "32px",
|
|
209
|
+
scaleStep: "350",
|
|
210
|
+
lineHeightCategory: "display"
|
|
211
|
+
};
|
|
180
212
|
case "h4":
|
|
181
|
-
return {
|
|
213
|
+
return {
|
|
214
|
+
fontSize: 24,
|
|
215
|
+
fontWeight: "400",
|
|
216
|
+
lineHeight: "24px",
|
|
217
|
+
scaleStep: "250",
|
|
218
|
+
lineHeightCategory: "display"
|
|
219
|
+
};
|
|
182
220
|
case "h5":
|
|
183
|
-
return {
|
|
221
|
+
return {
|
|
222
|
+
fontSize: 20,
|
|
223
|
+
fontWeight: "600",
|
|
224
|
+
lineHeight: "20px",
|
|
225
|
+
scaleStep: "200",
|
|
226
|
+
lineHeightCategory: "display"
|
|
227
|
+
};
|
|
184
228
|
case "display":
|
|
185
|
-
return {
|
|
229
|
+
return {
|
|
230
|
+
fontSize: 64,
|
|
231
|
+
fontWeight: "400",
|
|
232
|
+
lineHeight: "64px",
|
|
233
|
+
scaleStep: "750",
|
|
234
|
+
lineHeightCategory: "display"
|
|
235
|
+
};
|
|
186
236
|
case "bodyLg":
|
|
187
|
-
return {
|
|
237
|
+
return {
|
|
238
|
+
fontSize: 18,
|
|
239
|
+
fontWeight: "400",
|
|
240
|
+
lineHeight: "24px",
|
|
241
|
+
scaleStep: "175",
|
|
242
|
+
lineHeightCategory: "compact"
|
|
243
|
+
};
|
|
188
244
|
case "bodyLgAccent":
|
|
189
|
-
return {
|
|
245
|
+
return {
|
|
246
|
+
fontSize: 18,
|
|
247
|
+
fontWeight: "500",
|
|
248
|
+
lineHeight: "24px",
|
|
249
|
+
scaleStep: "175",
|
|
250
|
+
lineHeightCategory: "compact"
|
|
251
|
+
};
|
|
190
252
|
case "bodyLgParagraph":
|
|
191
|
-
return {
|
|
253
|
+
return {
|
|
254
|
+
fontSize: 18,
|
|
255
|
+
fontWeight: "400",
|
|
256
|
+
lineHeight: "26px",
|
|
257
|
+
scaleStep: "175",
|
|
258
|
+
lineHeightCategory: "text"
|
|
259
|
+
};
|
|
192
260
|
case "bodyMd":
|
|
193
|
-
return {
|
|
261
|
+
return {
|
|
262
|
+
fontSize: 16,
|
|
263
|
+
fontWeight: "400",
|
|
264
|
+
lineHeight: "20px",
|
|
265
|
+
scaleStep: "150",
|
|
266
|
+
lineHeightCategory: "compact"
|
|
267
|
+
};
|
|
194
268
|
case "bodyMdAccent":
|
|
195
|
-
return {
|
|
269
|
+
return {
|
|
270
|
+
fontSize: 16,
|
|
271
|
+
fontWeight: "500",
|
|
272
|
+
lineHeight: "20px",
|
|
273
|
+
scaleStep: "150",
|
|
274
|
+
lineHeightCategory: "compact"
|
|
275
|
+
};
|
|
196
276
|
case "bodyMdParagraph":
|
|
197
|
-
return {
|
|
277
|
+
return {
|
|
278
|
+
fontSize: 16,
|
|
279
|
+
fontWeight: "400",
|
|
280
|
+
lineHeight: "22px",
|
|
281
|
+
scaleStep: "150",
|
|
282
|
+
lineHeightCategory: "text"
|
|
283
|
+
};
|
|
198
284
|
case "bodySm":
|
|
199
|
-
return {
|
|
285
|
+
return {
|
|
286
|
+
fontSize: 14,
|
|
287
|
+
fontWeight: "400",
|
|
288
|
+
lineHeight: "18px",
|
|
289
|
+
scaleStep: "125",
|
|
290
|
+
lineHeightCategory: "compact"
|
|
291
|
+
};
|
|
200
292
|
case "bodySmAccent":
|
|
201
|
-
return {
|
|
293
|
+
return {
|
|
294
|
+
fontSize: 14,
|
|
295
|
+
fontWeight: "500",
|
|
296
|
+
lineHeight: "18px",
|
|
297
|
+
scaleStep: "125",
|
|
298
|
+
lineHeightCategory: "compact"
|
|
299
|
+
};
|
|
202
300
|
case "bodySmParagraph":
|
|
203
|
-
return {
|
|
301
|
+
return {
|
|
302
|
+
fontSize: 14,
|
|
303
|
+
fontWeight: "400",
|
|
304
|
+
lineHeight: "20px",
|
|
305
|
+
scaleStep: "125",
|
|
306
|
+
lineHeightCategory: "text"
|
|
307
|
+
};
|
|
204
308
|
case "bodyXs":
|
|
205
|
-
return {
|
|
309
|
+
return {
|
|
310
|
+
fontSize: 12,
|
|
311
|
+
fontWeight: "400",
|
|
312
|
+
lineHeight: "16px",
|
|
313
|
+
scaleStep: "100",
|
|
314
|
+
lineHeightCategory: "compact"
|
|
315
|
+
};
|
|
206
316
|
case "bodyXsAccent":
|
|
207
|
-
return {
|
|
317
|
+
return {
|
|
318
|
+
fontSize: 12,
|
|
319
|
+
fontWeight: "500",
|
|
320
|
+
lineHeight: "16px",
|
|
321
|
+
scaleStep: "100",
|
|
322
|
+
lineHeightCategory: "compact"
|
|
323
|
+
};
|
|
208
324
|
case "bodyXsParagraph":
|
|
209
|
-
return {
|
|
325
|
+
return {
|
|
326
|
+
fontSize: 12,
|
|
327
|
+
fontWeight: "400",
|
|
328
|
+
lineHeight: "18px",
|
|
329
|
+
scaleStep: "100",
|
|
330
|
+
lineHeightCategory: "text"
|
|
331
|
+
};
|
|
332
|
+
case "bodyXxs":
|
|
333
|
+
return {
|
|
334
|
+
fontSize: 10,
|
|
335
|
+
fontWeight: "400",
|
|
336
|
+
lineHeight: "14px",
|
|
337
|
+
scaleStep: "75",
|
|
338
|
+
lineHeightCategory: "compact"
|
|
339
|
+
};
|
|
340
|
+
case "bodyXxsAccent":
|
|
341
|
+
return {
|
|
342
|
+
fontSize: 10,
|
|
343
|
+
fontWeight: "500",
|
|
344
|
+
lineHeight: "14px",
|
|
345
|
+
scaleStep: "75",
|
|
346
|
+
lineHeightCategory: "compact"
|
|
347
|
+
};
|
|
348
|
+
case "bodyXxsParagraph":
|
|
349
|
+
return {
|
|
350
|
+
fontSize: 10,
|
|
351
|
+
fontWeight: "400",
|
|
352
|
+
lineHeight: "14px",
|
|
353
|
+
scaleStep: "75",
|
|
354
|
+
lineHeightCategory: "text"
|
|
355
|
+
};
|
|
210
356
|
default:
|
|
211
|
-
return {
|
|
357
|
+
return {
|
|
358
|
+
fontSize: 16,
|
|
359
|
+
fontWeight: "400",
|
|
360
|
+
lineHeight: "20px",
|
|
361
|
+
scaleStep: "150",
|
|
362
|
+
lineHeightCategory: "compact"
|
|
363
|
+
};
|
|
212
364
|
}
|
|
213
365
|
};
|
|
366
|
+
function getResponsiveLineHeight(styles) {
|
|
367
|
+
const step = styles.lineHeightScaleStep || styles.scaleStep;
|
|
368
|
+
if (!step) return void 0;
|
|
369
|
+
const cat = styles.lineHeightCategory;
|
|
370
|
+
if (cat === "display") return import_xui_core.cssVar.lhDisplay(step);
|
|
371
|
+
if (cat === "text") return import_xui_core.cssVar.lhText(step);
|
|
372
|
+
return import_xui_core.cssVar.lhCompact(step);
|
|
373
|
+
}
|
|
214
374
|
var Typography = (0, import_react.forwardRef)(
|
|
215
375
|
({
|
|
216
376
|
children,
|
|
@@ -232,6 +392,9 @@ var Typography = (0, import_react.forwardRef)(
|
|
|
232
392
|
const colorValue = getColor(color, theme);
|
|
233
393
|
const contextFonts = productContext ? (0, import_xui_core.getFonts)(productContext) : theme.fonts;
|
|
234
394
|
const fontFamily = isHeadingVariant(variant) ? contextFonts?.heading : contextFonts?.body;
|
|
395
|
+
const useResponsiveCSS = import_xui_core.isWeb && variantStyles.scaleStep;
|
|
396
|
+
const responsiveFontSize = useResponsiveCSS ? import_xui_core.cssVar.fontSize(variantStyles.scaleStep) : void 0;
|
|
397
|
+
const responsiveLineHeight = useResponsiveCSS ? getResponsiveLineHeight(variantStyles) : void 0;
|
|
235
398
|
return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
|
|
236
399
|
Text,
|
|
237
400
|
{
|
|
@@ -239,7 +402,7 @@ var Typography = (0, import_react.forwardRef)(
|
|
|
239
402
|
ref,
|
|
240
403
|
as,
|
|
241
404
|
color: colorValue,
|
|
242
|
-
fontSize: variantStyles.fontSize,
|
|
405
|
+
fontSize: useResponsiveCSS ? void 0 : variantStyles.fontSize,
|
|
243
406
|
fontWeight: variantStyles.fontWeight,
|
|
244
407
|
fontFamily,
|
|
245
408
|
numberOfLines: noWrap ? 1 : void 0,
|
|
@@ -247,7 +410,7 @@ var Typography = (0, import_react.forwardRef)(
|
|
|
247
410
|
marginTop,
|
|
248
411
|
marginBottom,
|
|
249
412
|
textAlign: align === "inherit" ? void 0 : align,
|
|
250
|
-
lineHeight: variantStyles.lineHeight,
|
|
413
|
+
...useResponsiveCSS ? { fontSize: responsiveFontSize, lineHeight: responsiveLineHeight } : { lineHeight: variantStyles.lineHeight },
|
|
251
414
|
...noWrap && {
|
|
252
415
|
overflow: "hidden",
|
|
253
416
|
textOverflow: "ellipsis",
|
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 {\n useResolvedTheme,\n getTypographyTokens,\n getFonts,\n isNative,\n} 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\") {\n return isNative ? theme?.colors?.content?.primary : undefined;\n }\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 === \"h5\" ||\n variant === \"display\";\n\nconst getVariantStyles = (variant: VariantType, typographyTokens?: any) => {\n // If typography tokens are provided from theme, use them\n if (typographyTokens) {\n const headingMap: Record<string, keyof typeof typographyTokens.heading> = {\n h1: \"h1\",\n h2: \"h2\",\n h3: \"h3\",\n h4: \"h4\",\n h5: \"h5\",\n };\n\n if (headingMap[variant]) {\n const token = typographyTokens.heading[headingMap[variant]];\n if (token) {\n return {\n fontSize: token.fontSize,\n fontWeight: String(token.fontWeight),\n lineHeight: token.lineHeight,\n };\n }\n }\n\n if (variant === \"display\" && typographyTokens.basic?.display) {\n const token = typographyTokens.basic.display;\n return {\n fontSize: token.fontSize,\n fontWeight: String(token.fontWeight),\n lineHeight: token.lineHeight,\n };\n }\n\n // Body variants\n const bodyMap: Record<string, string> = {\n bodyLg: \"body-lg\",\n bodyLgAccent: \"body-lg\",\n bodyLgParagraph: \"body-lg\",\n bodyMd: \"body-md\",\n bodyMdAccent: \"body-md\",\n bodyMdParagraph: \"body-md\",\n bodySm: \"body-sm\",\n bodySmAccent: \"body-sm\",\n bodySmParagraph: \"body-sm\",\n bodyXs: \"body-xs\",\n bodyXsAccent: \"body-xs\",\n bodyXsParagraph: \"body-xs\",\n };\n\n const bodyKey = bodyMap[variant];\n if (bodyKey && typographyTokens.basic?.[bodyKey]) {\n const token = typographyTokens.basic[bodyKey];\n let fontWeight = token.fontWeight;\n let lineHeight = token.lineHeight;\n\n if (variant.includes(\"Accent\") && token.accent) {\n fontWeight = token.accent.fontWeight;\n }\n\n if (variant.includes(\"Paragraph\") && token.paragraph) {\n lineHeight = token.paragraph.lineHeight;\n }\n\n return {\n fontSize: token.fontSize,\n fontWeight: String(fontWeight),\n lineHeight: lineHeight,\n };\n }\n }\n\n // Fallback to default styles (B2B mode for backwards compatibility)\n switch (variant) {\n case \"h1\":\n return { fontSize: 56, fontWeight: \"400\", lineHeight: \"68px\" };\n case \"h2\":\n return { fontSize: 48, fontWeight: \"400\", lineHeight: \"58px\" };\n case \"h3\":\n return { fontSize: 32, fontWeight: \"400\", lineHeight: \"38px\" };\n case \"h4\":\n return { fontSize: 24, fontWeight: \"400\", lineHeight: \"28px\" };\n case \"h5\":\n return { fontSize: 20, fontWeight: \"600\", lineHeight: \"24px\" };\n case \"display\":\n return { fontSize: 64, fontWeight: \"400\", lineHeight: \"78px\" };\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 productContext,\n themeMode,\n themeProductContext,\n ...rest\n },\n ref\n ) => {\n const { theme } = useResolvedTheme({ themeMode, themeProductContext });\n // If productContext is provided, use tokens for that specific context\n // Otherwise, use the tokens from the theme (context)\n const typographyTokens = productContext\n ? getTypographyTokens(productContext)\n : (theme as any).typographyTokens;\n const variantStyles = getVariantStyles(variant, typographyTokens);\n const colorValue = getColor(color, theme);\n const contextFonts = productContext\n ? getFonts(productContext)\n : (theme.fonts as Record<string, string>);\n const fontFamily = isHeadingVariant(variant)\n ? contextFonts?.heading\n : contextFonts?.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: color ?? incomingStyle?.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"]}
|
|
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 {\n useResolvedTheme,\n getTypographyTokens,\n getFonts,\n isWeb,\n isNative,\n cssVar,\n} 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\") {\n return isNative ? theme?.colors?.content?.primary : undefined;\n }\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 === \"h5\" ||\n variant === \"display\";\n\nconst bodyMap: Record<string, string> = {\n bodyLg: \"body-lg\",\n bodyLgAccent: \"body-lg\",\n bodyLgParagraph: \"body-lg\",\n bodyMd: \"body-md\",\n bodyMdAccent: \"body-md\",\n bodyMdParagraph: \"body-md\",\n bodySm: \"body-sm\",\n bodySmAccent: \"body-sm\",\n bodySmParagraph: \"body-sm\",\n bodyXs: \"body-xs\",\n bodyXsAccent: \"body-xs\",\n bodyXsParagraph: \"body-xs\",\n bodyXxs: \"body-xxs\",\n bodyXxsAccent: \"body-xxs\",\n bodyXxsParagraph: \"body-xxs\",\n};\n\nconst headingMap: Record<string, string> = {\n h1: \"h1\",\n h2: \"h2\",\n h3: \"h3\",\n h4: \"h4\",\n h5: \"h5\",\n};\n\nconst getVariantStyles = (variant: VariantType, typographyTokens?: any) => {\n if (typographyTokens) {\n if (headingMap[variant]) {\n const token = typographyTokens.heading[headingMap[variant]];\n if (token) {\n return {\n fontSize: token.fontSize,\n fontWeight: String(token.fontWeight),\n lineHeight: token.lineHeight,\n scaleStep: token.scaleStep,\n lineHeightCategory: token.lineHeightCategory,\n };\n }\n }\n\n if (variant === \"display\" && typographyTokens.basic?.display) {\n const token = typographyTokens.basic.display;\n return {\n fontSize: token.fontSize,\n fontWeight: String(token.fontWeight),\n lineHeight: token.lineHeight,\n scaleStep: token.scaleStep,\n lineHeightCategory: token.lineHeightCategory,\n };\n }\n\n const bodyKey = bodyMap[variant];\n if (bodyKey && typographyTokens.basic?.[bodyKey]) {\n const token = typographyTokens.basic[bodyKey];\n let fontWeight = token.fontWeight;\n let lineHeight = token.lineHeight;\n let lineHeightCategory = token.lineHeightCategory;\n let lineHeightScaleStep: string | undefined;\n\n if (variant.includes(\"Accent\") && token.accent) {\n fontWeight = token.accent.fontWeight;\n }\n\n if (variant.includes(\"Paragraph\") && token.paragraph) {\n lineHeight = token.paragraph.lineHeight;\n lineHeightCategory = \"text\";\n lineHeightScaleStep = token.paragraph.lineHeightScaleStep;\n }\n\n return {\n fontSize: token.fontSize,\n fontWeight: String(fontWeight),\n lineHeight,\n scaleStep: token.scaleStep,\n lineHeightCategory,\n lineHeightScaleStep,\n };\n }\n }\n\n switch (variant) {\n case \"h1\":\n return {\n fontSize: 56,\n fontWeight: \"400\",\n lineHeight: \"56px\",\n scaleStep: \"650\",\n lineHeightCategory: \"display\" as const,\n };\n case \"h2\":\n return {\n fontSize: 48,\n fontWeight: \"400\",\n lineHeight: \"48px\",\n scaleStep: \"550\",\n lineHeightCategory: \"display\" as const,\n };\n case \"h3\":\n return {\n fontSize: 32,\n fontWeight: \"400\",\n lineHeight: \"32px\",\n scaleStep: \"350\",\n lineHeightCategory: \"display\" as const,\n };\n case \"h4\":\n return {\n fontSize: 24,\n fontWeight: \"400\",\n lineHeight: \"24px\",\n scaleStep: \"250\",\n lineHeightCategory: \"display\" as const,\n };\n case \"h5\":\n return {\n fontSize: 20,\n fontWeight: \"600\",\n lineHeight: \"20px\",\n scaleStep: \"200\",\n lineHeightCategory: \"display\" as const,\n };\n case \"display\":\n return {\n fontSize: 64,\n fontWeight: \"400\",\n lineHeight: \"64px\",\n scaleStep: \"750\",\n lineHeightCategory: \"display\" as const,\n };\n case \"bodyLg\":\n return {\n fontSize: 18,\n fontWeight: \"400\",\n lineHeight: \"24px\",\n scaleStep: \"175\",\n lineHeightCategory: \"compact\" as const,\n };\n case \"bodyLgAccent\":\n return {\n fontSize: 18,\n fontWeight: \"500\",\n lineHeight: \"24px\",\n scaleStep: \"175\",\n lineHeightCategory: \"compact\" as const,\n };\n case \"bodyLgParagraph\":\n return {\n fontSize: 18,\n fontWeight: \"400\",\n lineHeight: \"26px\",\n scaleStep: \"175\",\n lineHeightCategory: \"text\" as const,\n };\n case \"bodyMd\":\n return {\n fontSize: 16,\n fontWeight: \"400\",\n lineHeight: \"20px\",\n scaleStep: \"150\",\n lineHeightCategory: \"compact\" as const,\n };\n case \"bodyMdAccent\":\n return {\n fontSize: 16,\n fontWeight: \"500\",\n lineHeight: \"20px\",\n scaleStep: \"150\",\n lineHeightCategory: \"compact\" as const,\n };\n case \"bodyMdParagraph\":\n return {\n fontSize: 16,\n fontWeight: \"400\",\n lineHeight: \"22px\",\n scaleStep: \"150\",\n lineHeightCategory: \"text\" as const,\n };\n case \"bodySm\":\n return {\n fontSize: 14,\n fontWeight: \"400\",\n lineHeight: \"18px\",\n scaleStep: \"125\",\n lineHeightCategory: \"compact\" as const,\n };\n case \"bodySmAccent\":\n return {\n fontSize: 14,\n fontWeight: \"500\",\n lineHeight: \"18px\",\n scaleStep: \"125\",\n lineHeightCategory: \"compact\" as const,\n };\n case \"bodySmParagraph\":\n return {\n fontSize: 14,\n fontWeight: \"400\",\n lineHeight: \"20px\",\n scaleStep: \"125\",\n lineHeightCategory: \"text\" as const,\n };\n case \"bodyXs\":\n return {\n fontSize: 12,\n fontWeight: \"400\",\n lineHeight: \"16px\",\n scaleStep: \"100\",\n lineHeightCategory: \"compact\" as const,\n };\n case \"bodyXsAccent\":\n return {\n fontSize: 12,\n fontWeight: \"500\",\n lineHeight: \"16px\",\n scaleStep: \"100\",\n lineHeightCategory: \"compact\" as const,\n };\n case \"bodyXsParagraph\":\n return {\n fontSize: 12,\n fontWeight: \"400\",\n lineHeight: \"18px\",\n scaleStep: \"100\",\n lineHeightCategory: \"text\" as const,\n };\n case \"bodyXxs\":\n return {\n fontSize: 10,\n fontWeight: \"400\",\n lineHeight: \"14px\",\n scaleStep: \"75\",\n lineHeightCategory: \"compact\" as const,\n };\n case \"bodyXxsAccent\":\n return {\n fontSize: 10,\n fontWeight: \"500\",\n lineHeight: \"14px\",\n scaleStep: \"75\",\n lineHeightCategory: \"compact\" as const,\n };\n case \"bodyXxsParagraph\":\n return {\n fontSize: 10,\n fontWeight: \"400\",\n lineHeight: \"14px\",\n scaleStep: \"75\",\n lineHeightCategory: \"text\" as const,\n };\n default:\n return {\n fontSize: 16,\n fontWeight: \"400\",\n lineHeight: \"20px\",\n scaleStep: \"150\",\n lineHeightCategory: \"compact\" as const,\n };\n }\n};\n\nfunction getResponsiveLineHeight(\n styles: ReturnType<typeof getVariantStyles>\n): string | undefined {\n const step = styles.lineHeightScaleStep || styles.scaleStep;\n if (!step) return undefined;\n\n const cat = styles.lineHeightCategory;\n if (cat === \"display\") return cssVar.lhDisplay(step);\n if (cat === \"text\") return cssVar.lhText(step);\n return cssVar.lhCompact(step);\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 productContext,\n themeMode,\n themeProductContext,\n ...rest\n },\n ref\n ) => {\n const { theme } = useResolvedTheme({ themeMode, themeProductContext });\n const typographyTokens = productContext\n ? getTypographyTokens(productContext)\n : (theme as any).typographyTokens;\n const variantStyles = getVariantStyles(variant, typographyTokens);\n const colorValue = getColor(color, theme);\n const contextFonts = productContext\n ? getFonts(productContext)\n : (theme.fonts as Record<string, string>);\n const fontFamily = isHeadingVariant(variant)\n ? contextFonts?.heading\n : contextFonts?.body;\n\n const useResponsiveCSS = isWeb && variantStyles.scaleStep;\n\n const responsiveFontSize = useResponsiveCSS\n ? cssVar.fontSize(variantStyles.scaleStep!)\n : undefined;\n const responsiveLineHeight = useResponsiveCSS\n ? getResponsiveLineHeight(variantStyles)\n : undefined;\n\n return (\n <Text\n {...rest}\n ref={ref}\n as={as}\n color={colorValue}\n fontSize={useResponsiveCSS ? undefined : 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 ...(useResponsiveCSS\n ? { fontSize: responsiveFontSize, lineHeight: responsiveLineHeight }\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: color ?? incomingStyle?.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"]}
|