@umituz/react-native-design-system 4.28.22 → 4.29.0

package/dist/molecules/navigation/components/FabButton.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import { type ViewStyle } from 'react-native';
+export interface FabButtonProps {
+    /** Content to render inside the FAB */
+    children: React.ReactNode;
+    /** Container style overrides */
+    style?: ViewStyle;
+}
+/**
+ * Standard FAB container component.
+ * Provides a centered, elevated circular container using design tokens.
+ */
+export declare const FabButton: React.FC<FabButtonProps>;

package/dist/molecules/navigation/components/NavigationContainer.d.ts

@@ -0,0 +1,10 @@
+import React from "react";
+/**
+ * NavigationContainer Component
+ *
+ * Wrapper around React Navigation's NavigationContainer
+ * Provides navigation support to applications.
+ */
+export declare const NavigationContainer: React.FC<{
+    children: React.ReactNode;
+}>;

package/dist/molecules/navigation/components/NavigationHeader.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+export interface NavigationHeaderProps {
+    title: string;
+    onBackPress?: () => void;
+    rightElement?: React.ReactNode;
+    centerTitle?: boolean;
+}
+export declare const NavigationHeader: React.FC<NavigationHeaderProps>;

package/dist/molecules/navigation/components/TabLabel.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+export interface TabLabelProps {
+    label: string;
+    focused: boolean;
+    color?: string;
+    focusedColor?: string;
+    unfocusedColor?: string;
+    fontSize?: number;
+    focusedWeight?: '400' | '500' | '600' | '700' | '800' | '900';
+    unfocusedWeight?: '400' | '500' | '600' | '700' | '800' | '900';
+    textStyle?: import('react-native').TextStyle;
+    textType?: 'labelSmall' | 'labelMedium' | 'labelLarge' | 'bodySmall';
+}
+export declare const TabLabel: React.FC<TabLabelProps>;

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

@@ -0,0 +1,21 @@
+/**
+ * useAppFocusEffect Hook
+ *
+ * Safe wrapper around React Navigation's useFocusEffect.
+ * Only runs the effect if navigation is ready.
+ *
+ * @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

@@ -0,0 +1,15 @@
+/**
+ * useAppIsFocused Hook
+ *
+ * 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

@@ -0,0 +1,32 @@
+import type { NavigationProp, ParamListBase } from "@react-navigation/native";
+/**
+ * Navigation result type - clean and simple
+ */
+export interface AppNavigationResult {
+    navigate: (screen: string, params?: Record<string, unknown>) => void;
+    push: (screen: string, params?: Record<string, unknown>) => void;
+    goBack: () => void;
+    reset: (screen: string, params?: Record<string, unknown>) => void;
+    replace: (screen: string, params?: Record<string, unknown>) => void;
+    pop: (count?: number) => void;
+    popToTop: () => void;
+    canGoBack: () => boolean;
+    getState: () => ReturnType<NavigationProp<ParamListBase>["getState"]> | null;
+    getParent: () => NavigationProp<ParamListBase> | null | 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();
+ *      if (navigation.isReady) {
+ *        navigation.navigate("ScreenName", { param: value });
+ *      }
+ */
+export declare function useAppNavigation(): AppNavigationResult;

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

@@ -0,0 +1,24 @@
+import type { RouteProp } from "@react-navigation/native";
+/**
+ * useAppRoute Hook
+ *
+ * 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 interface AppRouteResult<T = unknown> {
+    key: string;
+    name: string;
+    params: T | undefined;
+    path: string | undefined;
+    isReady: boolean;
+}
+export declare function useAppRoute<T = unknown>(): AppRouteResult<T>;
+export type { RouteProp };

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

@@ -0,0 +1,44 @@
+export interface TabBarConfig {
+    backgroundColor?: string;
+    borderTopColor?: string;
+    borderTopWidth?: number;
+    paddingTop?: number;
+    paddingBottom?: number;
+    minHeight?: number;
+    activeTintColor?: string;
+    inactiveTintColor?: string;
+    labelFontSize?: number;
+    labelFontWeight?: string;
+    labelMarginTop?: number;
+    labelMarginBottom?: number;
+}
+export declare function useTabBarStyles(config?: TabBarConfig): {
+    tokens: import("../../../theme").DesignTokens;
+    screenOptions: {
+        headerShown: boolean;
+        tabBarLabelStyle: {
+            fontSize: number;
+            fontWeight: "100" | "200" | "300" | "400" | "500" | "600" | "700" | "800" | "900" | "normal" | "bold";
+            marginTop: number;
+            marginBottom: number;
+        };
+        tabBarActiveTintColor: string;
+        tabBarInactiveTintColor: string;
+        tabBarStyle: {
+            backgroundColor: string;
+            borderTopColor: string;
+            borderTopWidth: number;
+            paddingTop: number;
+            paddingBottom: number;
+            minHeight: number;
+        };
+    };
+    tabBarStyle: {
+        backgroundColor: string;
+        borderTopColor: string;
+        borderTopWidth: number;
+        paddingTop: number;
+        paddingBottom: number;
+        minHeight: number;
+    };
+};

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

@@ -0,0 +1,6 @@
+import type { ParamListBase } from "@react-navigation/native";
+import type { TabNavigatorConfig } from "../types";
+export interface UseTabConfigProps<T extends ParamListBase> {
+    config: TabNavigatorConfig<T>;
+}
+export declare function useTabConfig<T extends ParamListBase>(props: UseTabConfigProps<T>): TabNavigatorConfig<T>;

package/dist/molecules/navigation/index.d.ts

@@ -0,0 +1,99 @@
+export { TabsNavigator, type TabsNavigatorProps } from "./TabsNavigator";
+export { StackNavigator, type StackNavigatorProps } from "./StackNavigator";
+export { FabButton, type FabButtonProps } from "./components/FabButton";
+export { NavigationContainer } from "./components/NavigationContainer";
+export type { TabScreen, TabNavigatorConfig, StackScreen, StackNavigatorConfig, BaseScreen, BaseNavigatorConfig, IconRendererProps, LabelProcessorProps, FabConfig, } from "./types";
+export type { StackScreenProps, StackNavigationOptions, } from "@react-navigation/stack";
+export type { BottomTabScreenProps, BottomTabNavigationOptions, } from "@react-navigation/bottom-tabs";
+export { DEFAULT_FAB_CONFIG } from "./types";
+export { NavigationCleanupManager } from "./utils/NavigationCleanup";
+export type { NavigationCleanup } from "./utils/NavigationCleanup";
+/**
+ * AppNavigation - Global navigation utility for programmatic navigation outside React components.
+ *
+ * @example
+ * ```typescript
+ * import { AppNavigation } from '@umituz/react-native-design-system/molecules';
+ *
+ * // Navigate from a non-React context
+ * AppNavigation.navigate('ScreenName', { param: 'value' });
+ * ```
+ */
+export { AppNavigation } from "./utils/AppNavigation";
+export { TabLabel, type TabLabelProps } from "./components/TabLabel";
+export { NavigationHeader, type NavigationHeaderProps } from "./components/NavigationHeader";
+export { useTabBarStyles, type TabBarConfig } from "./hooks/useTabBarStyles";
+export { useTabConfig, type UseTabConfigProps } from "./hooks/useTabConfig";
+/**
+ * useAppNavigation - Standard navigation hook for all React Native packages.
+ *
+ * Provides a clean, type-safe navigation API that wraps React Navigation.
+ * Use this hook instead of @react-navigation/native's useNavigation for consistency.
+ *
+ * @example
+ * ```typescript
+ * import { useAppNavigation } from '@umituz/react-native-design-system/molecules';
+ *
+ * function MyScreen() {
+ *   const navigation = useAppNavigation();
+ *
+ *   return (
+ *     <Button onPress={() => navigation.navigate('Details', { id: 123 })}>
+ *       Go to Details
+ *     </Button>
+ *   );
+ * }
+ * ```
+ */
+export { useAppNavigation } from "./hooks/useAppNavigation";
+export type { AppNavigationResult } from "./hooks/useAppNavigation";
+/**
+ * useAppRoute - Hook to access current route parameters.
+ *
+ * @example
+ * ```typescript
+ * import { useAppRoute } from '@umituz/react-native-design-system/molecules';
+ *
+ * function DetailsScreen() {
+ *   const route = useAppRoute<{ id: number }>();
+ *   const id = route.params?.id;
+ * }
+ * ```
+ */
+export { useAppRoute, type RouteProp } from "./hooks/useAppRoute";
+/**
+ * useAppFocusEffect - Run effects when screen comes into focus.
+ *
+ * @example
+ * ```typescript
+ * import { useAppFocusEffect } from '@umituz/react-native-design-system/molecules';
+ * import { useCallback } from 'react';
+ *
+ * function ProfileScreen() {
+ *   useAppFocusEffect(
+ *     useCallback(() => {
+ *       console.log('Screen focused');
+ *       return () => console.log('Screen unfocused');
+ *     }, [])
+ *   );
+ * }
+ * ```
+ */
+export { useAppFocusEffect } from "./hooks/useAppFocusEffect";
+/**
+ * useAppIsFocused - Check if current screen is focused.
+ *
+ * @example
+ * ```typescript
+ * import { useAppIsFocused } from '@umituz/react-native-design-system/molecules';
+ *
+ * function VideoPlayer() {
+ *   const isFocused = useAppIsFocused();
+ *
+ *   return <Video playing={isFocused} />;
+ * }
+ * ```
+ */
+export { useAppIsFocused } from "./hooks/useAppIsFocused";
+export { createScreenOptions } from "./utils/createScreenOptions";
+export type { ScreenOptionsParams } from "./utils/createScreenOptions";

package/dist/molecules/navigation/types.d.ts

@@ -0,0 +1,99 @@
+import type { ParamListBase } from "@react-navigation/native";
+import type { BottomTabNavigationOptions, BottomTabScreenProps } from "@react-navigation/bottom-tabs";
+import type { StackNavigationOptions } from "@react-navigation/stack";
+import type { IconName } from "../../atoms";
+export type NavigationParams = Record<string, unknown>;
+/**
+ * FAB (Floating Action Button) configuration for center tab
+ */
+export interface FabConfig {
+    /** FAB button size (default: 56) */
+    size?: number;
+    /** Vertical offset from tab bar (default: -20) */
+    offsetY?: number;
+    /** Border radius (default: size / 2) */
+    borderRadius?: number;
+    /** Border width when inactive (default: 3) */
+    borderWidth?: number;
+}
+/**
+ * Base interface for all screen configurations
+ * @template T - Type of navigation parameters for the screen
+ */
+export interface BaseScreen<T extends ParamListBase = ParamListBase> {
+    /** Unique name identifier for the screen */
+    name: Extract<keyof T, string>;
+    /** React component to render for this screen */
+    component?: React.ComponentType<{
+        navigation: unknown;
+        route: unknown;
+    }>;
+    /** Render function for children (alternative to component) */
+    children?: (props: {
+        navigation: unknown;
+        route: unknown;
+    }) => React.ReactNode;
+}
+/**
+ * Configuration for a tab navigation screen
+ * @template T - Type of navigation parameters for the screen
+ */
+export interface TabScreen<T extends ParamListBase = ParamListBase> extends BaseScreen<T> {
+    /** Display label for the tab */
+    label: string;
+    /** Icon identifier for the tab */
+    icon?: IconName;
+    /** Mark this tab as a FAB (center floating button) */
+    isFab?: boolean;
+    /** Additional navigation options for the tab */
+    options?: BottomTabNavigationOptions | ((props: BottomTabScreenProps<T>) => BottomTabNavigationOptions);
+    /** Custom SVG path for the icon */
+    svgPath?: string;
+    /** Whether the tab should be visible */
+    visible?: boolean;
+}
+/**
+ * Configuration for a stack navigation screen
+ * @template T - Type of navigation parameters for the screen
+ */
+export interface StackScreen<T extends ParamListBase = ParamListBase> extends BaseScreen<T> {
+    /** Additional navigation options for the stack screen */
+    options?: StackNavigationOptions | ((props: {
+        navigation: unknown;
+        route: unknown;
+    }) => StackNavigationOptions);
+}
+export interface BaseNavigatorConfig<T extends ParamListBase = ParamListBase> {
+    /** Unique identifier for the navigator (required for React Navigation v7+) */
+    id?: string;
+    screens: TabScreen[] | StackScreen[];
+    initialRouteName?: Extract<keyof T, string>;
+    getLabel?: (label: string) => string;
+}
+export interface TabNavigatorConfig<T extends ParamListBase = ParamListBase> extends BaseNavigatorConfig<T> {
+    screens: TabScreen[];
+    /** Custom icon renderer function */
+    renderIcon?: (iconName: IconName, focused: boolean, routeName: string, isFab: boolean) => React.ReactElement;
+    /** Get icon name for a tab */
+    getTabIcon?: (routeName: string, focused: boolean) => IconName;
+    /** Screen options for all tabs */
+    screenOptions?: BottomTabNavigationOptions | ((props: BottomTabScreenProps<T>) => BottomTabNavigationOptions);
+    /** FAB configuration for center button styling */
+    fabConfig?: FabConfig;
+}
+export interface StackNavigatorConfig<T extends ParamListBase = ParamListBase> extends BaseNavigatorConfig<T> {
+    screens: StackScreen[];
+    screenOptions?: StackNavigationOptions;
+}
+export interface IconRendererProps {
+    iconName: IconName;
+    focused: boolean;
+    routeName: string;
+    isFab: boolean;
+}
+export interface LabelProcessorProps {
+    label: string;
+    getLabel?: (label: string) => string;
+}
+/** Default FAB configuration values */
+export declare const DEFAULT_FAB_CONFIG: Required<FabConfig>;

package/dist/molecules/navigation/utils/AppNavigation.d.ts

@@ -0,0 +1,76 @@
+import { NavigationContainerRef } from '@react-navigation/native';
+/**
+ * Set the global navigation reference.
+ * Should be called in the root NavigationContainer.
+ */
+export declare const setRef: (ref: NavigationContainerRef<any> | null) => void;
+/**
+ * Get the current navigation reference.
+ */
+export declare const getRef: () => NavigationContainerRef<any> | null;
+/**
+ * Check if the navigator is ready.
+ */
+export declare const isReady: () => boolean;
+/**
+ * Check if the navigator can go back.
+ */
+export declare const canGoBack: () => boolean;
+/**
+ * Navigate to a specific route.
+ * Supports both simple and nested navigation.
+ */
+export declare const navigate: (name: string, params?: object) => void;
+/**
+ * Navigate to a nested screen in a specific navigator.
+ * @param navigatorName - The name of the parent navigator
+ * @param screenName - The name of the screen within that navigator
+ * @param params - Optional parameters to pass to the screen
+ */
+export declare const navigateNested: (navigatorName: string, screenName: string, params?: object) => void;
+/**
+ * Push a new route onto the stack.
+ */
+export declare const push: (name: string, params?: object) => void;
+/**
+ * Go back to the previous screen.
+ */
+export declare const goBack: () => void;
+/**
+ * Reset the navigation state.
+ */
+export declare const reset: (name: string, params?: object) => void;
+/**
+ * Replace the current route.
+ */
+export declare const replace: (name: string, params?: object) => void;
+/**
+ * Pop to the top of the stack.
+ */
+export declare const popToTop: () => void;
+/**
+ * Pop specific number of screens.
+ */
+export declare const pop: (count?: number) => void;
+/**
+ * Get the current route name.
+ */
+export declare const getCurrentRoute: () => string | undefined;
+/**
+ * Unified AppNavigation Object for both static and hook-based usage.
+ */
+export declare const AppNavigation: {
+    setRef: (ref: NavigationContainerRef<any> | null) => void;
+    getRef: () => NavigationContainerRef<any> | null;
+    isReady: () => boolean;
+    canGoBack: () => boolean;
+    navigate: (name: string, params?: object) => void;
+    navigateNested: (navigatorName: string, screenName: string, params?: object) => void;
+    push: (name: string, params?: object) => void;
+    goBack: () => void;
+    reset: (name: string, params?: object) => void;
+    replace: (name: string, params?: object) => void;
+    popToTop: () => void;
+    pop: (count?: number) => void;
+    getCurrentRoute: () => string | undefined;
+};

package/dist/molecules/navigation/utils/IconRenderer.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+import type { IconRendererProps } from "../types";
+import { type IconName } from "../../../atoms";
+type RenderIconFn = (iconName: IconName, focused: boolean, routeName: string, isFab: boolean) => React.ReactElement;
+export declare class IconRenderer {
+    static renderIcon(props: IconRendererProps, renderIcon?: RenderIconFn): React.ReactElement | null;
+    static getIconName(routeName: string, focused: boolean, icon: IconName, getTabIcon?: (routeName: string, focused: boolean) => IconName): IconName;
+}
+export {};

package/dist/molecules/navigation/utils/LabelProcessor.d.ts

@@ -0,0 +1,10 @@
+import type { LabelProcessorProps } from "../types";
+export declare class LabelProcessor {
+    private static labelCache;
+    private static maxCacheSize;
+    private static cacheHits;
+    private static cacheMisses;
+    static processLabel(props: LabelProcessorProps): string;
+    static clearCache(): void;
+    static processTitle(title: string | undefined, getLabel?: (label: string) => string): string | undefined;
+}

package/dist/molecules/navigation/utils/NavigationCleanup.d.ts

@@ -0,0 +1,37 @@
+/**
+ * Navigation Event Cleanup Utilities
+ *
+ * This file provides patterns for proper cleanup of navigation event listeners
+ * to prevent memory leaks in React Native applications.
+ *
+ * Example usage:
+ * ```tsx
+ * useEffect(() => {
+ *   const unsubscribe = navigation.addListener('focus', handleFocus);
+ *   return unsubscribe; // Automatic cleanup on unmount
+ * }, [navigation, handleFocus]);
+ *
+ * // For multiple listeners:
+ * useEffect(() => {
+ *   const unsubscribers = [
+ *     navigation.addListener('focus', handleFocus),
+ *     navigation.addListener('blur', handleBlur),
+ *   ];
+ *
+ *   return () => unsubscribers.forEach(unsubscribe => unsubscribe());
+ * }, [navigation, handleFocus, handleBlur]);
+ * ```
+ */
+export interface NavigationCleanup {
+    unsubscribe: () => void;
+}
+export declare class NavigationCleanupManager {
+    /**
+     * Creates a cleanup function for multiple navigation listeners
+     */
+    static createMultiCleanup(unsubscribers: (() => void)[]): () => void;
+    /**
+     * Safe cleanup wrapper that handles errors gracefully
+     */
+    static safeCleanup(unsubscribe: () => void): () => void;
+}

package/dist/molecules/navigation/utils/NavigationValidator.d.ts

@@ -0,0 +1,5 @@
+import type { TabScreen, StackScreen } from "../types";
+export declare class NavigationValidator {
+    static validateScreens(screens: TabScreen[] | StackScreen[], type: "tab" | "stack"): void;
+    static validateInitialRoute(initialRouteName: string | undefined, screens: TabScreen[] | StackScreen[]): void;
+}

package/dist/molecules/navigation/utils/ScreenFactory.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+import type { ParamListBase } from "@react-navigation/native";
+import type { TabScreen, StackScreen, TabNavigatorConfig, StackNavigatorConfig } from "../types";
+export declare function createTabScreen<T extends ParamListBase = ParamListBase>(screen: TabScreen<T>, config: TabNavigatorConfig<T>, Tab: {
+    Screen: React.ElementType;
+}): React.ReactElement;
+export declare function createStackScreen<T extends ParamListBase = ParamListBase>(screen: StackScreen<T>, config: StackNavigatorConfig<T>, Stack: {
+    Screen: React.ElementType;
+}): React.ReactElement;

package/dist/molecules/navigation/utils/createScreenOptions.d.ts

@@ -0,0 +1,20 @@
+/**
+ * Screen Options Creator
+ * Creates React Navigation screen options with design tokens
+ * Used by all packages for consistent navigation headers
+ */
+import type { StackNavigationOptions } from '@react-navigation/stack';
+export interface ScreenOptionsParams {
+    colors: {
+        surface: string;
+        textPrimary: string;
+        borderLight: string;
+    };
+    backTitle?: string;
+}
+/**
+ * Creates standard screen options for React Navigation
+ * @param params - Design tokens and back title
+ * @returns React Navigation screen options
+ */
+export declare const createScreenOptions: (params: ScreenOptionsParams) => StackNavigationOptions;

package/dist/molecules/splash/components/SplashScreen.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+import type { SplashScreenProps } from "../types";
+export declare const SplashScreen: React.FC<SplashScreenProps>;

package/dist/molecules/splash/constants.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Splash Screen Constants
+ */
+export declare const SPLASH_CONSTANTS: {
+    readonly ICON_SIZE: 120;
+    readonly ICON_PLACEHOLDER_SIZE: 100;
+    readonly CONTENT_PADDING: 24;
+};

package/dist/molecules/splash/hooks/useSplashFlow.d.ts

@@ -0,0 +1,22 @@
+/**
+ * Splash Flow Hook
+ * Manages splash screen initialization state
+ *
+ * IMPORTANT: Use isAppReady prop instead of duration for real initialization tracking.
+ * Artificial delays cause poor UX - the splash should transition as soon as app is ready.
+ */
+export interface UseSplashFlowOptions {
+    /**
+     * External readiness signal from app initialization
+     * When true, splash will transition to main content
+     */
+    isAppReady?: boolean;
+    /**
+     * Splash duration in ms. Use isAppReady for real initialization tracking.
+     */
+    duration?: number;
+}
+export interface UseSplashFlowResult {
+    isInitialized: boolean;
+}
+export declare const useSplashFlow: (options?: UseSplashFlowOptions) => UseSplashFlowResult;

package/dist/molecules/splash/index.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Splash Module
+ * Provides splash screen component for app initialization
+ */
+export { SplashScreen } from './components/SplashScreen';
+export type { SplashScreenProps, SplashColors, } from './types';
+export { useSplashFlow } from './hooks/useSplashFlow';
+export type { UseSplashFlowOptions, UseSplashFlowResult } from './hooks/useSplashFlow';