@umituz/react-native-design-system 2.6.23 → 2.6.26
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 +1 -1
- package/package.json +2 -2
- package/src/atoms/AtomicIcon.tsx +6 -3
- package/src/atoms/AtomicInput.tsx +4 -4
- package/src/atoms/AtomicText.tsx +1 -1
- package/src/molecules/long-press-menu/domain/entities/MenuAction.ts +1 -1
- package/src/theme/core/TokenFactory.ts +0 -1
- package/src/theme/types/ThemeTypes.ts +0 -1
package/README.md
CHANGED
|
@@ -68,7 +68,7 @@ const MyScreen = () => {
|
|
|
68
68
|
- `AtomicInput` - Text inputs with validation states (pure RN TextInput)
|
|
69
69
|
- `AtomicTextArea` - Multiline inputs with character counter (pure RN TextInput)
|
|
70
70
|
- `AtomicCard` - Container cards with elevation (pure RN View)
|
|
71
|
-
- `AtomicIcon` -
|
|
71
|
+
- `AtomicIcon` - Ionicons with 1,300+ icons
|
|
72
72
|
- `AtomicSwitch` - Toggle switches
|
|
73
73
|
- `AtomicBadge` - Status badges
|
|
74
74
|
- `AtomicProgress` - Progress indicators
|
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.26",
|
|
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",
|
|
@@ -107,7 +107,7 @@
|
|
|
107
107
|
"@testing-library/react-native": "^13.3.3",
|
|
108
108
|
"@types/jest": "^30.0.0",
|
|
109
109
|
"@types/react": "~19.1.10",
|
|
110
|
-
"@types/react-native": "^0.
|
|
110
|
+
"@types/react-native": "^0.73.0",
|
|
111
111
|
"@typescript-eslint/eslint-plugin": "^8.50.1",
|
|
112
112
|
"@typescript-eslint/parser": "^8.50.1",
|
|
113
113
|
"@umituz/react-native-filesystem": "^2.1.7",
|
package/src/atoms/AtomicIcon.tsx
CHANGED
|
@@ -11,7 +11,8 @@ import { Ionicons } from "@expo/vector-icons";
|
|
|
11
11
|
import Svg, { Path } from "react-native-svg";
|
|
12
12
|
import { useAppDesignTokens } from '../theme';
|
|
13
13
|
import {
|
|
14
|
-
type IconSize as BaseIconSize
|
|
14
|
+
type IconSize as BaseIconSize,
|
|
15
|
+
type IoniconsName
|
|
15
16
|
} from "./AtomicIcon.types";
|
|
16
17
|
|
|
17
18
|
// Re-export IconSize for convenience
|
|
@@ -37,8 +38,10 @@ export type IconColor =
|
|
|
37
38
|
| "textTertiary"
|
|
38
39
|
| "onSurfaceVariant";
|
|
39
40
|
|
|
40
|
-
|
|
41
|
-
|
|
41
|
+
/**
|
|
42
|
+
* IconName can be a valid Ionicons name or any string (for custom SVGs)
|
|
43
|
+
*/
|
|
44
|
+
export type IconName = IoniconsName | string;
|
|
42
45
|
|
|
43
46
|
export interface AtomicIconProps {
|
|
44
47
|
/** Icon name (Ionicons) */
|
|
@@ -28,9 +28,9 @@ export interface AtomicInputProps {
|
|
|
28
28
|
placeholder?: string;
|
|
29
29
|
/** Helper text below input */
|
|
30
30
|
helperText?: string;
|
|
31
|
-
/** Leading icon (
|
|
31
|
+
/** Leading icon (Ionicons name) */
|
|
32
32
|
leadingIcon?: IconName;
|
|
33
|
-
/** Trailing icon (
|
|
33
|
+
/** Trailing icon (Ionicons name) */
|
|
34
34
|
trailingIcon?: IconName;
|
|
35
35
|
/** Callback when trailing icon is pressed */
|
|
36
36
|
onTrailingIconPress?: () => void;
|
|
@@ -71,7 +71,7 @@ export interface AtomicInputProps {
|
|
|
71
71
|
*
|
|
72
72
|
* Features:
|
|
73
73
|
* - Pure React Native implementation (no Paper dependency)
|
|
74
|
-
* -
|
|
74
|
+
* - Ionicons for password toggle and custom icons
|
|
75
75
|
* - Outlined/filled/flat variants
|
|
76
76
|
* - Error, success, disabled states
|
|
77
77
|
* - Character counter
|
|
@@ -228,7 +228,7 @@ export const AtomicInput: React.FC<AtomicInputProps> = ({
|
|
|
228
228
|
style={styles.trailingIcon}
|
|
229
229
|
>
|
|
230
230
|
<AtomicIcon
|
|
231
|
-
name={isPasswordVisible ? "
|
|
231
|
+
name={isPasswordVisible ? "eye-off-outline" : "eye-outline"}
|
|
232
232
|
customSize={sizeConfig.iconSize}
|
|
233
233
|
customColor={iconColor}
|
|
234
234
|
/>
|
package/src/atoms/AtomicText.tsx
CHANGED
|
@@ -49,7 +49,7 @@ export const AtomicText = ({
|
|
|
49
49
|
const textType = variant || type;
|
|
50
50
|
|
|
51
51
|
// Get typography style from tokens
|
|
52
|
-
const typographyStyle =
|
|
52
|
+
const typographyStyle = tokens.typography[textType as keyof typeof tokens.typography] as TextStyle & { responsiveFontSize?: number };
|
|
53
53
|
|
|
54
54
|
// Use responsive font size if available
|
|
55
55
|
const fontSize = typographyStyle?.responsiveFontSize || typographyStyle?.fontSize;
|
|
@@ -65,7 +65,6 @@ export const createDesignTokens = (
|
|
|
65
65
|
acc[key as keyof typeof BASE_TOKENS.avatarSizes] = BASE_TOKENS.avatarSizes[key as keyof typeof BASE_TOKENS.avatarSizes] * multiplier;
|
|
66
66
|
return acc;
|
|
67
67
|
}, {} as any),
|
|
68
|
-
borderRadius,
|
|
69
68
|
radius: borderRadius,
|
|
70
69
|
borders: {
|
|
71
70
|
...BASE_TOKENS.borders,
|
|
@@ -44,7 +44,6 @@ export type DesignTokens = {
|
|
|
44
44
|
iconSizes: BaseTokens['iconSizes'];
|
|
45
45
|
opacity: BaseTokens['opacity'];
|
|
46
46
|
avatarSizes: BaseTokens['avatarSizes'];
|
|
47
|
-
borderRadius: ResponsiveBorderRadius;
|
|
48
47
|
radius: ResponsiveBorderRadius;
|
|
49
48
|
borders: Borders & {
|
|
50
49
|
card: Borders['card'] & { borderColor: string };
|