@umituz/react-native-design-system 2.6.39 → 2.6.41
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/package.json +1 -1
- package/src/atoms/AtomicText.tsx +19 -4
- package/src/index.ts +1 -0
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@umituz/react-native-design-system",
|
|
3
|
-
"version": "2.6.
|
|
3
|
+
"version": "2.6.41",
|
|
4
4
|
"description": "Universal design system for React Native apps - Consolidated package with atoms, molecules, organisms, theme, typography, responsive and safe area utilities",
|
|
5
5
|
"main": "./src/index.ts",
|
|
6
6
|
"types": "./src/index.ts",
|
package/src/atoms/AtomicText.tsx
CHANGED
|
@@ -3,7 +3,7 @@ import { Text, type StyleProp, type TextStyle, type TextProps } from 'react-nati
|
|
|
3
3
|
import { useAppDesignTokens } from '../theme';
|
|
4
4
|
import { getTextColor, type TextStyleVariant, type ColorVariant } from '../typography';
|
|
5
5
|
|
|
6
|
-
export interface AtomicTextProps extends TextProps {
|
|
6
|
+
export interface AtomicTextProps extends Omit<TextProps, 'style'> {
|
|
7
7
|
/** Typographic style variant from tokens (alias for 'type') */
|
|
8
8
|
variant?: TextStyleVariant;
|
|
9
9
|
|
|
@@ -16,6 +16,15 @@ export interface AtomicTextProps extends TextProps {
|
|
|
16
16
|
/** Text alignment */
|
|
17
17
|
align?: TextStyle['textAlign'];
|
|
18
18
|
|
|
19
|
+
/** Font weight - convenience prop */
|
|
20
|
+
fontWeight?: TextStyle['fontWeight'];
|
|
21
|
+
|
|
22
|
+
/** Margin top - convenience prop using spacing tokens */
|
|
23
|
+
marginTop?: keyof ReturnType<typeof import('../theme').useAppDesignTokens>['spacing'];
|
|
24
|
+
|
|
25
|
+
/** Margin bottom - convenience prop using spacing tokens */
|
|
26
|
+
marginBottom?: keyof ReturnType<typeof import('../theme').useAppDesignTokens>['spacing'];
|
|
27
|
+
|
|
19
28
|
/** Content to render */
|
|
20
29
|
children: React.ReactNode;
|
|
21
30
|
|
|
@@ -38,6 +47,9 @@ export const AtomicText = ({
|
|
|
38
47
|
type = 'bodyMedium',
|
|
39
48
|
color = 'textPrimary',
|
|
40
49
|
align,
|
|
50
|
+
fontWeight,
|
|
51
|
+
marginTop,
|
|
52
|
+
marginBottom,
|
|
41
53
|
children,
|
|
42
54
|
style,
|
|
43
55
|
testID,
|
|
@@ -50,13 +62,13 @@ export const AtomicText = ({
|
|
|
50
62
|
|
|
51
63
|
// Get typography style from tokens
|
|
52
64
|
const typographyStyle = tokens.typography[textType as keyof typeof tokens.typography] as TextStyle & { responsiveFontSize?: number };
|
|
53
|
-
|
|
65
|
+
|
|
54
66
|
// Use responsive font size if available
|
|
55
67
|
const fontSize = typographyStyle?.responsiveFontSize || typographyStyle?.fontSize;
|
|
56
68
|
|
|
57
69
|
// Resolve color
|
|
58
|
-
const resolvedColor = typeof color === 'string' && !color.includes('.')
|
|
59
|
-
? getTextColor(color as ColorVariant, tokens)
|
|
70
|
+
const resolvedColor = typeof color === 'string' && !color.includes('.')
|
|
71
|
+
? getTextColor(color as ColorVariant, tokens)
|
|
60
72
|
: color;
|
|
61
73
|
|
|
62
74
|
const textStyle: StyleProp<TextStyle> = [
|
|
@@ -65,6 +77,9 @@ export const AtomicText = ({
|
|
|
65
77
|
color: resolvedColor as string,
|
|
66
78
|
...(fontSize && { fontSize }),
|
|
67
79
|
...(align && { textAlign: align }),
|
|
80
|
+
...(fontWeight && { fontWeight }),
|
|
81
|
+
...(marginTop && { marginTop: tokens.spacing[marginTop] as number }),
|
|
82
|
+
...(marginBottom && { marginBottom: tokens.spacing[marginBottom] as number }),
|
|
68
83
|
},
|
|
69
84
|
style,
|
|
70
85
|
];
|