@umituz/react-native-design-system 4.26.12 → 4.27.0

package/dist/molecules/ListItem.d.ts

@@ -1,4 +1,4 @@
 import React from 'react';
 import { ListItemProps } from './listitem/types';
 export type { ListItemProps };
-export declare const ListItem: React.FC<ListItemProps>;
+export declare const ListItem: React.NamedExoticComponent<ListItemProps>;

package/dist/molecules/action-footer/ActionFooter.d.ts

@@ -1,3 +1,3 @@
 import React from 'react';
 import type { ActionFooterProps } from './types';
-export declare const ActionFooter: React.FC<ActionFooterProps>;
+export declare const ActionFooter: React.NamedExoticComponent<ActionFooterProps>;

package/dist/molecules/icon-grid/IconGrid.d.ts

@@ -44,4 +44,4 @@ export interface IconGridProps {
  * />
  * ```
  */
-export declare const IconGrid: React.FC<IconGridProps>;
+export declare const IconGrid: React.NamedExoticComponent<IconGridProps>;

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

@@ -8,14 +8,92 @@ export type { BottomTabScreenProps, BottomTabNavigationOptions, } from "@react-n
 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 * 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/onboarding/presentation/components/OnboardingFooter.d.ts

@@ -9,4 +9,4 @@ export interface OnboardingFooterProps {
     showProgressText?: boolean;
     disabled?: boolean;
 }
-export declare const OnboardingFooter: ({ currentIndex, totalSlides, isLastSlide, onNext, showProgressBar, showDots, showProgressText, disabled, }: OnboardingFooterProps) => React.JSX.Element;
+export declare const OnboardingFooter: React.NamedExoticComponent<OnboardingFooterProps>;

package/dist/onboarding/presentation/components/OnboardingHeader.d.ts

@@ -7,4 +7,4 @@ export interface OnboardingHeaderProps {
     showSkipButton?: boolean;
     skipButtonText?: string;
 }
-export declare const OnboardingHeader: ({ isFirstSlide, onBack, onSkip, showBackButton, showSkipButton, skipButtonText, }: OnboardingHeaderProps) => React.JSX.Element;
+export declare const OnboardingHeader: React.NamedExoticComponent<OnboardingHeaderProps>;

package/dist/utils/math/CalculationUtils.d.ts

@@ -0,0 +1,69 @@
+/**
+ * Calculation Utilities
+ *
+ * Common mathematical calculations used throughout the app
+ */
+/**
+ * Clamps a number between a minimum and maximum value
+ * @param value - The value to clamp
+ * @param min - Minimum allowed value (default: 0)
+ * @param max - Maximum allowed value (default: 100)
+ * @returns Clamped value
+ */
+export declare function clamp(value: number, min?: number, max?: number): number;
+/**
+ * Calculates progress percentage
+ * @param current - Current value
+ * @param total - Total value
+ * @returns Percentage (0-100)
+ */
+export declare function calculatePercentage(current: number, total: number): number;
+/**
+ * Rounds a number to specified decimal places
+ * @param value - The value to round
+ * @param decimals - Number of decimal places (default: 0)
+ * @returns Rounded value
+ */
+export declare function roundTo(value: number, decimals?: number): number;
+/**
+ * Converts intensity (0-100) to opacity (0-1)
+ * @param intensity - Intensity value (0-100)
+ * @param minOpacity - Minimum opacity (default: 0.05)
+ * @param maxOpacity - Maximum opacity (default: 0.95)
+ * @returns Opacity value (0-1)
+ */
+export declare function intensityToOpacity(intensity: number, minOpacity?: number, maxOpacity?: number): number;
+/**
+ * Calculates grid item width based on container width and columns
+ * @param containerWidth - Total container width
+ * @param columns - Number of columns
+ * @param gap - Gap between items in pixels
+ * @returns Item width in pixels
+ */
+export declare function calculateGridItemWidth(containerWidth: number, columns: number, gap: number): number;
+/**
+ * Checks if a value is within a range (inclusive)
+ * @param value - Value to check
+ * @param min - Range minimum
+ * @param max - Range maximum
+ * @returns True if value is in range
+ */
+export declare function isInRange(value: number, min: number, max: number): boolean;
+/**
+ * Linear interpolation between two values
+ * @param start - Start value
+ * @param end - End value
+ * @param progress - Progress (0-1)
+ * @returns Interpolated value
+ */
+export declare function lerp(start: number, end: number, progress: number): number;
+/**
+ * Maps a value from one range to another
+ * @param value - Value to map
+ * @param inMin - Input range minimum
+ * @param inMax - Input range maximum
+ * @param outMin - Output range minimum
+ * @param outMax - Output range maximum
+ * @returns Mapped value
+ */
+export declare function mapRange(value: number, inMin: number, inMax: number, outMin: number, outMax: number): number;

package/dist/utils/math/OpacityUtils.d.ts

@@ -0,0 +1,31 @@
+/**
+ * Opacity Utilities
+ *
+ * Helper functions for opacity-related calculations
+ */
+/**
+ * Converts intensity value to opacity for glassmorphism effects
+ * @param intensity - Intensity value (0-100)
+ * @param options - Configuration options
+ * @returns Opacity value (0-1)
+ */
+export declare function intensityToOpacity(intensity: number, options?: {
+    minOpacity?: number;
+    maxOpacity?: number;
+    invert?: boolean;
+}): number;
+/**
+ * Creates an RGBA color string with specified opacity
+ * @param rgb - RGB color as array [r, g, b]
+ * @param opacity - Opacity value (0-1)
+ * @returns RGBA color string
+ */
+export declare function createRgbaColor(rgb: [number, number, number], opacity: number): string;
+/**
+ * Calculates opacity based on a ratio (0-1)
+ * @param ratio - Ratio value (0-1)
+ * @param minOpacity - Minimum opacity (default: 0.1)
+ * @param maxOpacity - Maximum opacity (default: 1)
+ * @returns Opacity value (0-1)
+ */
+export declare function ratioToOpacity(ratio: number, minOpacity?: number, maxOpacity?: number): number;

package/dist/utils/math/ProgressUtils.d.ts

@@ -0,0 +1,37 @@
+/**
+ * Progress Utilities
+ *
+ * Helper functions for progress-related calculations
+ */
+/**
+ * Validates and clamps a progress value to ensure it's within valid range
+ * @param value - Raw progress value
+ * @returns Clamped progress value (0-100)
+ */
+export declare function normalizeProgress(value: number): number;
+/**
+ * Formats a progress value as a percentage string
+ * @param value - Progress value (0-100)
+ * @param decimals - Number of decimal places (default: 0)
+ * @returns Formatted percentage string
+ */
+export declare function formatPercentage(value: number, decimals?: number): string;
+/**
+ * Calculates the percentage completed of a multi-step process
+ * @param currentStep - Current step (1-indexed)
+ * @param totalSteps - Total number of steps
+ * @returns Percentage (0-100)
+ */
+export declare function calculateStepProgress(currentStep: number, totalSteps: number): number;
+/**
+ * Checks if progress is complete
+ * @param value - Progress value (0-100)
+ * @returns True if progress is 100%
+ */
+export declare function isComplete(value: number): boolean;
+/**
+ * Checks if progress has started
+ * @param value - Progress value (0-100)
+ * @returns True if progress > 0%
+ */
+export declare function hasStarted(value: number): boolean;

package/dist/utils/math/index.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Math Utilities Index
+ */
+export { clamp, calculatePercentage, roundTo, calculateGridItemWidth, isInRange, lerp, mapRange, } from './CalculationUtils';
+export { normalizeProgress, formatPercentage, calculateStepProgress, isComplete, hasStarted, } from './ProgressUtils';
+export { intensityToOpacity, createRgbaColor, ratioToOpacity, } from './OpacityUtils';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-design-system",
-  "version": "4.26.12",
+  "version": "4.27.0",
   "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, onboarding, and loading utilities - TanStack persistence and expo-image-manipulator now lazy loaded",
   "main": "./src/index.ts",
   "types": "./dist/index.d.ts",

package/src/molecules/navigation/index.ts

@@ -31,14 +31,98 @@ export { NavigationCleanupManager } from "./utils/NavigationCleanup";
 export type { NavigationCleanup } from "./utils/NavigationCleanup";
 
 // Navigation Utilities
+
+/**
+ * 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 * 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";
 
 // Screen Options