@umituz/react-native-design-system 4.25.99 → 4.25.100

package/dist/molecules/long-press-menu/domain/entities/MenuAction.d.ts

@@ -0,0 +1,30 @@
+import type { IconName } from '../../../../atoms';
+/**
+ * Menu action entity
+ * Represents a single action in the long press menu
+ */
+export interface MenuAction {
+    /** Unique identifier for the action */
+    id: string;
+    /** Icon name (Ionicons) */
+    icon: IconName;
+    /** Display label for the action */
+    label: string;
+    /** Destructive action (uses error color) */
+    destructive?: boolean;
+    /** Disabled state (greyed out, not pressable) */
+    disabled?: boolean;
+}
+/**
+ * Predefined menu action types for common use cases
+ */
+export declare const MenuActionType: {
+    readonly EDIT: "edit";
+    readonly DELETE: "delete";
+    readonly SHARE: "share";
+    readonly COPY: "copy";
+    readonly ARCHIVE: "archive";
+    readonly FAVORITE: "favorite";
+    readonly MORE: "more";
+};
+export type MenuActionTypeValue = typeof MenuActionType[keyof typeof MenuActionType];

package/dist/molecules/long-press-menu/index.d.ts

@@ -0,0 +1,12 @@
+/**
+ * @umituz/react-native-long-press-menu - Public API
+ *
+ * Context menus with long press for React Native
+ * Features:
+ * - iOS/Android-style menus
+ * - Haptic feedback
+ * - Smooth animations
+ * - Customizable actions
+ */
+export type { MenuAction, MenuActionTypeValue } from './domain/entities/MenuAction';
+export { MenuActionType } from './domain/entities/MenuAction';

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

@@ -0,0 +1,13 @@
+import React from "react";
+import type { ParamListBase } from "@react-navigation/native";
+import type { StackNavigatorConfig } from "./types";
+export interface StackNavigatorProps<T extends ParamListBase> {
+    config: StackNavigatorConfig<T>;
+}
+/**
+ * StackNavigator Component
+ *
+ * Reusable Stack Navigator component that handles configuration and rendering.
+ * Integrates with design tokens for consistent themed styling.
+ */
+export declare function StackNavigator<T extends ParamListBase>({ config }: StackNavigatorProps<T>): React.JSX.Element | null;

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

@@ -0,0 +1,13 @@
+import React from "react";
+import type { ParamListBase } from "@react-navigation/native";
+import type { TabNavigatorConfig } from "./types";
+export interface TabsNavigatorProps<T extends ParamListBase> {
+    config: TabNavigatorConfig<T>;
+}
+/**
+ * TabsNavigator Component
+ *
+ * Reusable Bottom Tab Navigator component that handles configuration and rendering.
+ * Integrates with design tokens for consistent themed styling.
+ */
+export declare function TabsNavigator<T extends ParamListBase>({ config, }: TabsNavigatorProps<T>): React.JSX.Element | null;

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,7 @@
+import React from 'react';
+export interface NavigationHeaderProps {
+    title: string;
+    onBackPress?: () => void;
+    rightElement?: React.ReactNode;
+}
+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,15 @@
+/**
+ * useAppFocusEffect Hook
+ *
+ * Wrapper around React Navigation's useFocusEffect.
+ * Pass a useCallback-wrapped effect to avoid re-running on every render.
+ *
+ * Usage:
+ *   useAppFocusEffect(
+ *     useCallback(() => {
+ *       doSomething();
+ *       return () => cleanup();
+ *     }, [deps])
+ *   );
+ */
+export declare function useAppFocusEffect(effect: () => void | (() => void)): void;

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

@@ -0,0 +1,7 @@
+/**
+ * useAppIsFocused Hook
+ *
+ * A wrapper around React Navigation's useIsFocused hook.
+ * Standardizes API usage across all packages and apps.
+ */
+export declare function useAppIsFocused(): boolean;

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

@@ -0,0 +1,25 @@
+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"]>;
+    getParent: () => NavigationProp<ParamListBase> | undefined;
+}
+/**
+ * useAppNavigation Hook
+ *
+ * Clean navigation API without complex type casting.
+ * Uses navigation.navigate() directly for proper nested navigator support.
+ * Use: const navigation = useAppNavigation();
+ *      navigation.navigate("ScreenName", { param: value });
+ */
+export declare function useAppNavigation(): AppNavigationResult;

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

@@ -0,0 +1,9 @@
+import type { RouteProp, ParamListBase } from "@react-navigation/native";
+/**
+ * useAppRoute Hook
+ *
+ * A wrapper around React Navigation's useRoute hook.
+ * Standardizes route usage across all packages and apps.
+ */
+export declare function useAppRoute<T extends ParamListBase, RouteName extends keyof T = string>(): RouteProp<T, RouteName>;
+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,21 @@
+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";
+export { AppNavigation } from "./utils/AppNavigation";
+export { TabLabel, type TabLabelProps } from "./components/TabLabel";
+export * from "./components/NavigationHeader";
+export { useTabBarStyles, type TabBarConfig } from "./hooks/useTabBarStyles";
+export { useTabConfig, type UseTabConfigProps } from "./hooks/useTabConfig";
+export { useAppNavigation } from "./hooks/useAppNavigation";
+export { useAppRoute, type RouteProp } from "./hooks/useAppRoute";
+export { useAppFocusEffect } from "./hooks/useAppFocusEffect";
+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,93 @@
+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<any>;
+    /** Render function for children (alternative to component) */
+    children?: (props: any) => 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';