@umituz/react-native-design-system 2.5.23 → 2.5.24

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-design-system",
-  "version": "2.5.23",
+  "version": "2.5.24",
   "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

@@ -8,6 +8,7 @@
 import React from "react";
 import { View, StyleSheet, StyleProp, ViewStyle } from "react-native";
 import { Ionicons } from "@expo/vector-icons";
+import Svg, { Path } from "react-native-svg";
 import { useAppDesignTokens } from '../theme';
 import {
   type IconSize as BaseIconSize
@@ -50,6 +51,10 @@ export interface AtomicIconProps {
   color?: IconColor;
   /** Custom color (overrides color) */
   customColor?: string;
+  /** Custom SVG path for generic icons */
+  svgPath?: string;
+  /** ViewBox for custom SVG (default: 0 0 24 24) */
+  svgViewBox?: string;
   /** Add circular background */
   withBackground?: boolean;
   /** Background color */
@@ -102,6 +107,8 @@ export const AtomicIcon: React.FC<AtomicIconProps> = React.memo(({
   customColor,
   withBackground = false,
   backgroundColor,
+  svgPath,
+  svgViewBox = "0 0 24 24",
   accessibilityLabel,
   testID,
   style,
@@ -123,10 +130,21 @@ export const AtomicIcon: React.FC<AtomicIconProps> = React.memo(({
       : tokens.colors.textPrimary;
 
   // Validate icon - use fallback silently if invalid
-  const isValidIcon = name in Ionicons.glyphMap;
-  const iconName = isValidIcon ? name : FALLBACK_ICON;
-
-  const iconElement = (
+  const iconName = name && name in Ionicons.glyphMap ? name : FALLBACK_ICON;
+
+  const iconElement = svgPath ? (
+    <Svg
+      viewBox={svgViewBox}
+      width={sizeInPixels}
+      height={sizeInPixels}
+      key="custom-svg-icon"
+    >
+      <Path
+        d={svgPath}
+        fill={iconColor}
+      />
+    </Svg>
+  ) : (
     <Ionicons
       name={iconName as keyof typeof Ionicons.glyphMap}
       size={sizeInPixels}

package/src/molecules/celebration/presentation/components/CelebrationModalContent.tsx

@@ -40,11 +40,6 @@ export const CelebrationModalContent: React.FC<CelebrationModalContentProps> = (
                 {
                     backgroundColor: tokens.colors.surface,
                     borderColor: tokens.colors.surfaceVariant,
-                    shadowColor: tokens.colors.onSurface,
-                    shadowOffset: { width: 0, height: 8 },
-                    shadowOpacity: 0.15,
-                    shadowRadius: 24,
-                    elevation: 8,
                 },
             ]}
         >

package/src/molecules/navigation/components/FabButton.tsx

@@ -25,7 +25,6 @@ export const FabButton: React.FC<FabButtonProps> = ({
             {
                 backgroundColor: tokens.colors.primary,
                 borderColor: tokens.colors.onPrimary,
-                shadowColor: tokens.colors.onSurface,
             },
             style
         ]}>