@umituz/react-native-design-system 4.28.3 → 4.28.4

package/dist/atoms/icon/index.d.ts

@@ -1,8 +1,25 @@
 /**
- * Icon Module
+ * @deprecated This icon system is deprecated. Use @umituz/react-native-icons instead.
  *
- * Zustand-based icon system.
- * App provides iconNames and iconRenderer via DesignSystemProvider.
+ * **Migration Guide:**
+ * ```tsx
+ * // Old way (deprecated)
+ * import { AtomicIcon } from '@umituz/react-native-design-system/atoms';
+ * <AtomicIcon name="User" size={24} color="text" />
+ *
+ * // New way (recommended)
+ * import { Icon } from '@umituz/react-native-icons';
+ * <Icon name="User" size={24} color="text" />
+ * ```
+ *
+ * **Benefits of @umituz/react-native-icons:**
+ * - ✅ Package-agnostic (works with Lucide, Expo, or custom providers)
+ * - ✅ Lazy loading (only configured provider is loaded)
+ * - ✅ Automatic name normalization (kebab ↔ PascalCase ↔ camelCase)
+ * - ✅ Better performance with caching
+ * - ✅ Zero configuration needed in DesignSystemProvider
+ *
+ * This module is kept for backward compatibility only and will be removed in a future version.
  */
 export { AtomicIcon, type AtomicIconProps, type IconSize, type IconName, type IconColor, } from './AtomicIcon';
 export { useIconStore, useIconRenderer, useIconName, useHasIconConfig, type IconNames, type IconRenderer, type IconRenderProps, REQUIRED_ICON_KEYS, } from './iconStore';

package/dist/molecules/navigation/hooks/useAppFocusEffect.d.ts

@@ -1,15 +1,21 @@
 /**
  * useAppFocusEffect Hook
  *
- * Wrapper around React Navigation's useFocusEffect.
- * Pass a useCallback-wrapped effect to avoid re-running on every render.
+ * Safe wrapper around React Navigation's useFocusEffect.
+ * Only runs the effect if navigation is ready.
  *
- * Usage:
- *   useAppFocusEffect(
- *     useCallback(() => {
- *       doSomething();
- *       return () => cleanup();
- *     }, [deps])
- *   );
+ * @param effect - Callback to run when screen is focused
+ *
+ * @example
+ * ```typescript
+ * useAppFocusEffect(
+ *   useCallback(() => {
+ *     // Runs when screen is focused
+ *     return () => {
+ *       // Cleanup when screen is unfocused
+ *     };
+ *   }, [dependency])
+ * );
+ * ```
  */
 export declare function useAppFocusEffect(effect: () => void | (() => void)): void;

package/dist/molecules/navigation/hooks/useAppIsFocused.d.ts

@@ -1,7 +1,15 @@
 /**
  * useAppIsFocused Hook
  *
- * A wrapper around React Navigation's useIsFocused hook.
- * Standardizes API usage across all packages and apps.
+ * Safe wrapper around React Navigation's useIsFocused.
+ * Returns false if called outside NavigationContainer.
+ *
+ * @example
+ * ```typescript
+ * const isFocused = useAppIsFocused();
+ * if (isFocused) {
+ *   // Screen is currently focused
+ * }
+ * ```
  */
 export declare function useAppIsFocused(): boolean;

package/dist/molecules/navigation/hooks/useAppNavigation.d.ts

@@ -13,13 +13,20 @@ export interface AppNavigationResult {
     canGoBack: () => boolean;
     getState: () => ReturnType<NavigationProp<ParamListBase>["getState"]>;
     getParent: () => NavigationProp<ParamListBase> | undefined;
+    /** Whether navigation is available (inside NavigationContainer) */
+    isReady: boolean;
 }
 /**
  * useAppNavigation Hook
  *
  * Clean navigation API without complex type casting.
  * Uses navigation.navigate() directly for proper nested navigator support.
+ *
+ * Safe to use outside NavigationContainer - returns no-op functions.
+ *
  * Use: const navigation = useAppNavigation();
- *      navigation.navigate("ScreenName", { param: value });
+ *      if (navigation.isReady) {
+ *        navigation.navigate("ScreenName", { param: value });
+ *      }
  */
 export declare function useAppNavigation(): AppNavigationResult;

package/dist/molecules/navigation/hooks/useAppRoute.d.ts

@@ -1,9 +1,17 @@
-import type { RouteProp, ParamListBase } from "@react-navigation/native";
+import type { RouteProp } from "@react-navigation/native";
 /**
  * useAppRoute Hook
  *
- * A wrapper around React Navigation's useRoute hook.
- * Standardizes route usage across all packages and apps.
+ * Safe wrapper around React Navigation's useRoute hook.
+ * Returns empty route params if called outside NavigationContainer.
+ *
+ * @example
+ * ```typescript
+ * const route = useAppRoute();
+ * if (route.isReady) {
+ *   const params = route.params;
+ * }
+ * ```
  */
-export declare function useAppRoute<T extends ParamListBase, RouteName extends keyof T = string>(): RouteProp<T, RouteName>;
+export declare function useAppRoute(): any;
 export type { RouteProp };

package/dist/theme/infrastructure/providers/DesignSystemProvider.d.ts

@@ -2,7 +2,6 @@ import React, { ReactNode } from 'react';
 import { type ThemeMode } from '../globalThemeStore';
 import type { CustomThemeColors } from '../../core/CustomColors';
 import type { SplashScreenProps } from '../../../molecules/splash/types';
-import type { IconRenderer, IconNames } from '../../../atoms/icon/iconStore';
 interface DesignSystemProviderProps {
     children: ReactNode;
     customColors?: CustomThemeColors;
@@ -13,10 +12,6 @@ interface DesignSystemProviderProps {
     loadingComponent?: ReactNode;
     onInitialized?: () => void;
     onError?: (error: unknown) => void;
-    /** Icon renderer - REQUIRED */
-    iconRenderer: IconRenderer;
-    /** Icon names mapping - REQUIRED */
-    iconNames: IconNames;
 }
 export declare const DesignSystemProvider: React.FC<DesignSystemProviderProps>;
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-design-system",
-  "version": "4.28.3",
+  "version": "4.28.4",
   "description": "Universal design system for React Native apps with safe navigation hooks - updated SKILL.md with navigation documentation",
   "main": "./src/index.ts",
   "types": "./dist/index.d.ts",

package/src/atoms/icon/index.ts

@@ -1,8 +1,25 @@
 /**
- * Icon Module
+ * @deprecated This icon system is deprecated. Use @umituz/react-native-icons instead.
  *
- * Zustand-based icon system.
- * App provides iconNames and iconRenderer via DesignSystemProvider.
+ * **Migration Guide:**
+ * ```tsx
+ * // Old way (deprecated)
+ * import { AtomicIcon } from '@umituz/react-native-design-system/atoms';
+ * <AtomicIcon name="User" size={24} color="text" />
+ *
+ * // New way (recommended)
+ * import { Icon } from '@umituz/react-native-icons';
+ * <Icon name="User" size={24} color="text" />
+ * ```
+ *
+ * **Benefits of @umituz/react-native-icons:**
+ * - ✅ Package-agnostic (works with Lucide, Expo, or custom providers)
+ * - ✅ Lazy loading (only configured provider is loaded)
+ * - ✅ Automatic name normalization (kebab ↔ PascalCase ↔ camelCase)
+ * - ✅ Better performance with caching
+ * - ✅ Zero configuration needed in DesignSystemProvider
+ *
+ * This module is kept for backward compatibility only and will be removed in a future version.
  */
 
 // Main Component

package/src/theme/infrastructure/providers/DesignSystemProvider.tsx

@@ -7,8 +7,6 @@ import { useTheme } from '../stores/themeStore';
 import { useDesignSystemTheme, type ThemeMode } from '../globalThemeStore';
 import type { CustomThemeColors } from '../../core/CustomColors';
 import type { SplashScreenProps } from '../../../molecules/splash/types';
-import { useIconStore } from '../../../atoms/icon/iconStore';
-import type { IconRenderer, IconNames } from '../../../atoms/icon/iconStore';
 import { FIVE_SECONDS_MS } from '../../../utils/constants/TimeConstants';
 
 // Lazy load SplashScreen to avoid circular dependency
@@ -27,10 +25,6 @@ interface DesignSystemProviderProps {
   loadingComponent?: ReactNode;
   onInitialized?: () => void;
   onError?: (error: unknown) => void;
-  /** Icon renderer - REQUIRED */
-  iconRenderer: IconRenderer;
-  /** Icon names mapping - REQUIRED */
-  iconNames: IconNames;
 }
 
 export const DesignSystemProvider: React.FC<DesignSystemProviderProps> = ({
@@ -43,8 +37,6 @@ export const DesignSystemProvider: React.FC<DesignSystemProviderProps> = ({
   loadingComponent,
   onInitialized,
   onError,
-  iconRenderer,
-  iconNames,
 }) => {
   const [isInitialized, setIsInitialized] = useState(false);
   const hasCustomFonts = fonts != null && Object.keys(fonts).length > 0;
@@ -57,24 +49,6 @@ export const DesignSystemProvider: React.FC<DesignSystemProviderProps> = ({
   const setGlobalCustomColors = useDesignSystemTheme((state) => state.setCustomColors);
   const setGlobalThemeMode = useDesignSystemTheme((state) => state.setThemeMode);
 
-  // Set icon config SYNCHRONOUSLY before first render
-  if (iconRenderer && iconNames) {
-    const store = useIconStore.getState();
-    if (!store.isConfigured) {
-      if (__DEV__) {
-        console.log('[DesignSystemProvider] ✅ Registering iconRenderer and iconNames');
-      }
-      useIconStore.getState().setConfig(iconNames, iconRenderer);
-    } else if (__DEV__) {
-      console.log('[DesignSystemProvider] ℹ️ Icon config already configured, skipping');
-    }
-  } else if (__DEV__) {
-    console.warn('[DesignSystemProvider] ❌ iconRenderer or iconNames missing!', {
-      hasIconRenderer: !!iconRenderer,
-      hasIconNames: !!iconNames,
-    });
-  }
-
   useEffect(() => {
     // Register app's default colors for reset feature
     if (customColors) {