@umituz/react-native-design-system 1.5.14 → 1.5.15

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-design-system",
-  "version": "1.5.14",
+  "version": "1.5.15",
   "description": "Universal design system for React Native apps - Domain-Driven Design architecture with Material Design 3 components",
   "main": "./src/index.ts",
   "types": "./src/index.ts",
@@ -27,16 +27,17 @@
     "url": "https://github.com/umituz/react-native-design-system"
   },
   "peerDependencies": {
+    "@expo/vector-icons": ">=14.0.0",
+    "@react-native-community/datetimepicker": "^8.5.0",
+    "@react-navigation/native": "^6.0.0",
+    "@umituz/react-native-icon": "*",
+    "expo-linear-gradient": "^15.0.7",
+    "lucide-react-native": ">=0.468.0",
     "react": ">=18.2.0 || ^19.0.0",
     "react-native": ">=0.74.0",
     "react-native-reanimated": "~3.10.1",
     "react-native-svg": ">=13.0.0",
-    "@react-native-community/datetimepicker": "8.0.1",
-    "@expo/vector-icons": ">=14.0.0",
-    "lucide-react-native": ">=0.468.0",
-    "zustand": "^5.0.2",
-    "expo-linear-gradient": "~13.0.2",
-    "@react-navigation/native": "^6.0.0"
+    "zustand": "^5.0.2"
   },
   "peerDependenciesMeta": {
     "expo-linear-gradient": {
@@ -50,20 +51,21 @@
     }
   },
   "devDependencies": {
-    "typescript": "^5.3.3",
+    "@expo/vector-icons": ">=14.0.0",
+    "@react-native-community/datetimepicker": "^8.5.0",
+    "@react-navigation/native": "^6.0.0",
     "@types/react": "^18.2.45",
     "@types/react-native": "^0.73.0",
+    "@umituz/react-native-icon": "^1.0.1",
+    "expo-linear-gradient": "^15.0.7",
+    "lucide-react-native": ">=0.468.0",
     "react": ">=18.2.0 || ^19.0.0",
     "react-native": ">=0.74.0",
     "react-native-reanimated": "~3.10.1",
+    "react-native-safe-area-context": "^5.6.2",
     "react-native-svg": "^15.0.0",
-    "@expo/vector-icons": ">=14.0.0",
-    "lucide-react-native": ">=0.468.0",
-    "zustand": "^5.0.2",
-    "react-native-safe-area-context": "^4.8.0",
-    "@react-native-community/datetimepicker": "8.0.1",
-    "expo-linear-gradient": "~13.0.2",
-    "@react-navigation/native": "^6.0.0"
+    "typescript": "^5.3.3",
+    "zustand": "^5.0.2"
   },
   "publishConfig": {
     "access": "public"
@@ -72,5 +74,9 @@
     "src",
     "README.md",
     "LICENSE"
-  ]
+  ],
+  "dependencies": {
+    "@react-native-async-storage/async-storage": "^2.2.0",
+    "@umituz/react-native-theme": "^1.2.4"
+  }
 }

package/src/presentation/atoms/AtomicInput.tsx

@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { View, TextInput, Pressable, StyleSheet, StyleProp, ViewStyle, TextStyle } from 'react-native';
+import { View, TextInput, Pressable, StyleSheet, StyleProp, ViewStyle, TextStyle, Platform } from 'react-native';
 import { useAppDesignTokens } from '@umituz/react-native-theme';
 import { AtomicIcon } from './AtomicIcon';
 import { AtomicText } from './AtomicText';
@@ -192,9 +192,11 @@ export const AtomicInput: React.FC<AtomicInputProps> = ({
     styles.container,
     getVariantStyle(),
     {
-      paddingVertical: config.paddingVertical,
+      paddingTop: config.paddingVertical,
+      paddingBottom: config.paddingVertical,
       paddingHorizontal: config.paddingHorizontal,
       minHeight: config.minHeight,
+      justifyContent: 'center',
       opacity: isDisabled ? 0.5 : 1,
     },
     style,
@@ -203,8 +205,10 @@ export const AtomicInput: React.FC<AtomicInputProps> = ({
   const textInputStyle: StyleProp<TextStyle> = [
     styles.input,
     {
-      fontSize: config.fontSize,
+      fontSize: config.fontSize || tokens.typography.bodyMedium.fontSize || 16,
+      lineHeight: (config.fontSize || tokens.typography.bodyMedium.fontSize || 16) * 1.5, // Ensure text is fully visible
       color: getTextColor(),
+      paddingVertical: 0, // Remove vertical padding to prevent clipping
     },
     leadingIcon ? { paddingLeft: config.iconSize + 8 } : undefined,
     (trailingIcon || showPasswordToggle) ? { paddingRight: config.iconSize + 8 } : undefined,
@@ -246,6 +250,8 @@ export const AtomicInput: React.FC<AtomicInputProps> = ({
           autoCorrect={autoCorrect}
           editable={!isDisabled}
           style={textInputStyle}
+          textAlignVertical="center"
+          {...(Platform.OS === 'android' && { includeFontPadding: false })}
           onBlur={() => {
             setIsFocused(false);
             onBlur?.();
@@ -320,6 +326,8 @@ const styles = StyleSheet.create({
   },
   input: {
     flex: 1,
+    margin: 0,
+    padding: 0,
   },
   label: {
     marginBottom: 4,

package/src/presentation/molecules/IconContainer.tsx

@@ -70,7 +70,7 @@ export const IconContainer: React.FC<IconContainerProps> = ({
   if (gradient) {
     return (
       <LinearGradient
-        colors={gradient}
+        colors={gradient as unknown as readonly [string, string, ...string[]]}
         style={containerStyle}
         testID={testID}
       >