@umituz/react-native-design-system 2.5.2 → 2.5.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-design-system",
-  "version": "2.5.2",
+  "version": "2.5.4",
   "description": "Universal design system for React Native apps - Consolidated package with atoms, molecules, organisms, theme, typography, responsive and safe area utilities",
   "main": "./src/index.ts",
   "types": "./src/index.ts",

package/src/atoms/AtomicIcon.tsx

@@ -10,7 +10,6 @@ import { View, StyleSheet, StyleProp, ViewStyle } from "react-native";
 import { Ionicons } from "@expo/vector-icons";
 import { useAppDesignTokens } from '../theme';
 import {
-  getIconSize,
   type IconSize as BaseIconSize
 } from "./AtomicIcon.types";
 

package/src/molecules/ListItem.tsx

@@ -18,7 +18,7 @@ export const ListItem: React.FC<ListItemProps> = ({
     <Component style={[listItemStyles.container, disabled ? listItemStyles.disabled : undefined, style]} onPress={onPress} disabled={disabled} activeOpacity={0.7}>
       {leftIcon && (
         <View style={listItemStyles.iconContainer}>
-          <AtomicIcon name={leftIcon} color={disabled ? 'surfaceVariant' : 'primary'} />
+          <AtomicIcon name={leftIcon} color={disabled ? 'surfaceVariant' : 'primary'} size="md" />
         </View>
       )}
       <View style={listItemStyles.content}>
@@ -27,7 +27,7 @@ export const ListItem: React.FC<ListItemProps> = ({
       </View>
       {rightIcon && onPress && (
         <View style={listItemStyles.iconContainer}>
-          <AtomicIcon name={rightIcon} color="surfaceVariant" />
+          <AtomicIcon name={rightIcon} color="surfaceVariant" size="sm" />
         </View>
       )}
     </Component>

package/src/molecules/SearchBar/SearchBar.tsx

@@ -1,4 +1,4 @@
-import React, { forwardRef } from 'react';
+import React, { forwardRef, type Ref } from 'react';
 import {
     View,
     TextInput,
@@ -10,7 +10,9 @@ import { useAppDesignTokens } from '../../theme';
 import { AtomicIcon } from '../../atoms/AtomicIcon';
 import type { SearchBarProps } from './types';
 
-export const SearchBar = forwardRef<React.ComponentRef<typeof TextInput>, SearchBarProps>(({
+type TextInputRef = React.ComponentRef<typeof TextInput>;
+
+export const SearchBar = forwardRef<TextInputRef, SearchBarProps>(({
     value,
     onChangeText,
     onSubmit,
@@ -41,6 +43,9 @@ export const SearchBar = forwardRef<React.ComponentRef<typeof TextInput>, Search
                 {
                     backgroundColor: tokens.colors.surfaceVariant,
                     borderColor: tokens.colors.border,
+                    height: 48 * tokens.spacingMultiplier,
+                    paddingHorizontal: 12 * tokens.spacingMultiplier,
+                    borderRadius: 24 * tokens.spacingMultiplier,
                 },
                 containerStyle,
             ]}
@@ -72,7 +77,7 @@ export const SearchBar = forwardRef<React.ComponentRef<typeof TextInput>, Search
                     styles.input,
                     {
                         color: tokens.colors.textPrimary,
-                        fontSize: 16, // Body medium usually
+                        fontSize: tokens.typography.bodyMedium.responsiveFontSize,
                     },
                     inputStyle,
                 ]}
@@ -115,9 +120,9 @@ const styles = StyleSheet.create({
     container: {
         flexDirection: 'row',
         alignItems: 'center',
-        paddingHorizontal: 12,
-        height: 48,
-        borderRadius: 24, // Pill shape
+        paddingHorizontal: 12, // Will be scaled by parent if needed, or we rely on token usage elsewhere
+        height: 48, // Should be dynamic ideally, but keeping simple for now
+        borderRadius: 24,
         borderWidth: 1,
     },
     iconContainer: {
@@ -126,7 +131,7 @@ const styles = StyleSheet.create({
     input: {
         flex: 1,
         height: '100%',
-        paddingVertical: 0, // Reset default padding
+        paddingVertical: 0,
     },
     rightActions: {
         flexDirection: 'row',