@umituz/react-native-design-system 2.8.36 → 2.8.37

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-design-system",
-  "version": "2.8.36",
+  "version": "2.8.37",
   "description": "Universal design system for React Native apps - Consolidated package with atoms, molecules, organisms, theme, typography, responsive, safe area, exception, infinite scroll, UUID, image, timezone, offline, and onboarding utilities",
   "main": "./src/index.ts",
   "types": "./src/index.ts",

package/src/atoms/AtomicIcon.tsx

@@ -119,28 +119,41 @@ export const AtomicIcon: React.FC<AtomicIconProps> = React.memo(({
     console.warn(`[DesignSystem] Invalid icon name: "${name}". Falling back to "${FALLBACK_ICON}"`);
   }
 
-  const iconElement = svgPath ? (
-    <Svg
-      viewBox={svgViewBox}
-      width={sizeInPixels}
-      height={sizeInPixels}
-      key="custom-svg-icon"
-    >
-      <Path
-        d={svgPath}
-        fill={iconColor}
-      />
-    </Svg>
-  ) : (
+  const iconProps = {
+    testID,
+    accessibilityLabel,
+    style: [
+      !svgPath && {
+        padding: 4, // Prevent font truncation
+        includeFontPadding: false, // Android specific
+      },
+      style,
+    ] as StyleProp<ViewStyle>,
+  };
+
+  if (svgPath) {
+    return (
+      <Svg
+        viewBox={svgViewBox}
+        width={sizeInPixels}
+        height={sizeInPixels}
+        key="custom-svg-icon"
+        {...iconProps}
+      >
+        <Path
+          d={svgPath}
+          fill={iconColor}
+        />
+      </Svg>
+    );
+  }
+
+  const iconElement = (
     <Ionicons
       name={iconName as keyof typeof Ionicons.glyphMap}
       size={sizeInPixels}
       color={iconColor}
-      testID={testID ? `${testID}-icon` : undefined}
-      style={{
-        padding: 4, // Prevent font truncation
-        includeFontPadding: false, // Android specific
-      }}
+      {...iconProps}
     />
   );
 
@@ -168,11 +181,7 @@ export const AtomicIcon: React.FC<AtomicIconProps> = React.memo(({
     );
   }
 
-  return (
-    <View accessibilityLabel={accessibilityLabel} testID={testID} style={style}>
-      {iconElement}
-    </View>
-  );
+  return iconElement;
 });
 
 AtomicIcon.displayName = "AtomicIcon";

package/src/atoms/input/components/InputIcon.tsx

@@ -19,14 +19,24 @@ export const InputIcon: React.FC<InputIconProps> = ({
   onPress,
   testID,
 }) => {
-  const positionStyle = position === 'leading' ? styles.leadingIcon : styles.trailingIcon;
-  const Wrapper = onPress ? Pressable : View;
-  const wrapperProps = onPress ? { onPress, testID } : {};
+  const style = position === 'leading' ? styles.leadingIcon : styles.trailingIcon;
+
+  if (onPress) {
+    return (
+      <Pressable onPress={onPress} style={style} testID={testID}>
+        <AtomicIcon name={name as any} customSize={size} customColor={color} />
+      </Pressable>
+    );
+  }
 
   return (
-    <Wrapper style={positionStyle} {...wrapperProps}>
-      <AtomicIcon name={name} customSize={size} customColor={color} />
-    </Wrapper>
+    <AtomicIcon 
+      name={name as any} 
+      customSize={size} 
+      customColor={color} 
+      style={style}
+      testID={testID}
+    />
   );
 };