@umituz/react-native-design-system 4.28.10 → 4.28.11

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-design-system",
-  "version": "4.28.10",
+  "version": "4.28.11",
   "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",
@@ -162,6 +162,11 @@
       "react-native": "./src/presentation/utils/variants.ts",
       "default": "./src/presentation/utils/variants.ts"
     },
+    "./core": {
+      "types": "./dist/core/index.d.ts",
+      "react-native": "./src/core/index.ts",
+      "default": "./src/core/index.ts"
+    },
     "./package.json": "./package.json"
   },
   "scripts": {

package/src/atoms/EmptyState.tsx

@@ -12,7 +12,7 @@ import { View, StyleSheet, TouchableOpacity, ViewStyle } from 'react-native';
 import { AtomicIcon } from './icon';
 import { AtomicText } from './AtomicText';
 import { useAppDesignTokens } from '../theme';
-import { calculateResponsiveSize } from '../utils/responsiveUtils';
+import { calculateResponsiveSize } from '../responsive';
 import { EMPTY_STATE_ICON } from '../constants';
 
 export interface EmptyStateProps {

package/src/atoms/fab/styles/fabStyles.ts

@@ -8,7 +8,7 @@
 import type { ViewStyle } from 'react-native';
 import type { FabSizeConfig, FabVariantConfig } from '../types';
 import { FAB_SIZES as BASE_FAB_SIZES } from '../../../constants';
-import { calculateResponsiveSize } from '../../../utils/responsiveUtils';
+import { calculateResponsiveSize } from '../../../responsive';
 
 /**
  * Get responsive FAB sizes based on spacing multiplier

package/src/molecules/Divider/types.ts

@@ -8,7 +8,7 @@
  * @layer domain/entities
  */
 
-import { calculateResponsiveSize } from '../../utils/responsiveUtils';
+import { calculateResponsiveSize } from '../../responsive';
 
 /**
  * Divider orientation

package/src/molecules/SearchBar/SearchBar.tsx

@@ -9,7 +9,7 @@ import { useAppDesignTokens } from '../../theme';
 import { AtomicIcon, useIconName } from '../../atoms';
 import { AtomicSpinner } from '../../atoms/AtomicSpinner';
 import type { SearchBarProps } from './types';
-import { calculateResponsiveSize } from '../../utils/responsiveUtils';
+import { calculateResponsiveSize } from '../../responsive';
 import { MISC_SIZES } from '../../constants';
 
 export const SearchBar: React.FC<SearchBarProps> = ({

package/src/molecules/StepHeader/StepHeader.tsx

@@ -12,7 +12,7 @@ import { useAppDesignTokens } from "../../theme/hooks/useAppDesignTokens";
 import {
   calculateResponsiveSize,
   calculateLineHeight,
-} from "../../utils/responsiveUtils";
+} from "../../responsive";
 import { SPACING, STEP_INDICATOR } from "../../constants";
 import { createMappedArray } from "../../utils";
 

package/src/molecules/StepProgress/StepProgress.tsx

@@ -1,7 +1,7 @@
 import React, { useMemo } from "react";
 import { View, StyleSheet, ViewStyle } from "react-native";
 import { useAppDesignTokens } from '../../theme/hooks/useAppDesignTokens';
-import { calculateResponsiveSize } from '../../utils/responsiveUtils';
+import { calculateResponsiveSize } from '../../responsive';
 import { STEP_INDICATOR } from '../../constants';
 import { createMappedArray } from '../../utils/arrayUtils';
 

package/src/molecules/action-footer/ActionFooter.tsx

@@ -5,7 +5,7 @@ import { AtomicText } from '../../atoms/AtomicText';
 import { AtomicIcon } from '../../atoms';
 import { useAppDesignTokens } from '../../theme';
 import type { ActionFooterProps } from './types';
-import { calculateResponsiveSize } from '../../utils/responsiveUtils';
+import { calculateResponsiveSize } from '../../responsive';
 import { NAVIGATION } from '../../constants';
 
 const createStyles = (spacingMultiplier: number) => StyleSheet.create({

package/src/molecules/alerts/AlertModal.tsx

@@ -9,7 +9,7 @@ import { useAppDesignTokens } from '../../theme';
 import { Alert, AlertType } from './AlertTypes';
 import { getAlertBackgroundColor } from './utils/alertUtils';
 import { useAlertDismissHandler } from './hooks';
-import { calculateResponsiveSize } from '../../utils/responsiveUtils';
+import { calculateResponsiveSize } from '../../responsive';
 import { MODAL_SIZES, ALERT_MODAL_ICON } from '../../constants';
 
 interface AlertModalProps {
@@ -82,6 +82,36 @@ export const AlertModal: React.FC<AlertModalProps> = ({ alert }) => {
         },
     }), [spacingMultiplier, tokens]);
 
+    const modalStyle = useMemo(() => [
+        styles.modal,
+        {
+            backgroundColor: tokens.colors.backgroundPrimary,
+            borderRadius: tokens.borders.radius.xl ?? 20,
+            borderWidth: 1,
+            borderColor: tokens.colors.border,
+        }
+    ], [styles.modal, tokens.colors.backgroundPrimary, tokens.borders.radius.xl, tokens.colors.border]);
+
+    const iconCircleStyle = useMemo(() => [
+        styles.iconCircle,
+        { backgroundColor: accentColor + '22' }
+    ], [styles.iconCircle, accentColor]);
+
+    const titleStyle = useMemo(() => [
+        styles.title,
+        { color: tokens.colors.textPrimary }
+    ], [styles.title, tokens.colors.textPrimary]);
+
+    const messageStyle = useMemo(() => [
+        styles.message,
+        { color: tokens.colors.textSecondary }
+    ], [styles.message, tokens.colors.textSecondary]);
+
+    const actionsContainerStyle = useMemo(() => [
+        hasTwoActions ? styles.actionsRow : styles.actionsColumn,
+        { marginTop: tokens.spacing.lg, gap: tokens.spacing.sm }
+    ], [hasTwoActions, styles.actionsRow, styles.actionsColumn, tokens.spacing.lg, tokens.spacing.sm]);
+
     return (
         <Modal
             visible
@@ -94,20 +124,9 @@ export const AlertModal: React.FC<AlertModalProps> = ({ alert }) => {
                     style={styles.backdrop}
                     onPress={alert.dismissible ? handleClose : undefined}
                 />
-                <View style={[
-                    styles.modal,
-                    {
-                        backgroundColor: tokens.colors.backgroundPrimary,
-                        borderRadius: tokens.borders.radius.xl ?? 20,
-                        borderWidth: 1,
-                        borderColor: tokens.colors.border,
-                    }
-                ]}>
+                <View style={modalStyle}>
                     {/* Icon circle */}
-                    <View style={[
-                        styles.iconCircle,
-                        { backgroundColor: accentColor + '22' }
-                    ]}>
+                    <View style={iconCircleStyle}>
                         <AtomicIcon
                             name={iconName}
                             customSize={calculateResponsiveSize(36, spacingMultiplier)}
@@ -118,7 +137,7 @@ export const AlertModal: React.FC<AlertModalProps> = ({ alert }) => {
                     {/* Title */}
                     <AtomicText
                         type="titleLarge"
-                        style={[styles.title, { color: tokens.colors.textPrimary }]}
+                        style={titleStyle}
                     >
                         {alert.title}
                     </AtomicText>
@@ -127,17 +146,14 @@ export const AlertModal: React.FC<AlertModalProps> = ({ alert }) => {
                     {!!alert.message && (
                         <AtomicText
                             type="bodyMedium"
-                            style={[styles.message, { color: tokens.colors.textSecondary }]}
+                            style={messageStyle}
                         >
                             {alert.message}
                         </AtomicText>
                     )}
 
                     {/* Actions */}
-                    <View style={[
-                        hasTwoActions ? styles.actionsRow : styles.actionsColumn,
-                        { marginTop: tokens.spacing.lg, gap: tokens.spacing.sm }
-                    ]}>
+                    <View style={actionsContainerStyle}>
                         {alert.actions.length === 0 ? (
                             <AtomicButton
                                 title="Close"

package/src/molecules/avatar/Avatar.tsx

@@ -12,7 +12,7 @@ import { AtomicText, AtomicIcon } from '../../atoms';
 import type { AvatarSize, AvatarShape } from './Avatar.types';
 import type { SizeConfig } from './Avatar.types';
 import { AVATAR_SIZES } from '../../constants';
-import { calculateResponsiveSize } from '../../utils/responsiveUtils';
+import { calculateResponsiveSize } from '../../responsive';
 import { AvatarUtils } from './Avatar.utils';
 
 export interface AvatarProps {
@@ -52,19 +52,29 @@ const AvatarContent: React.FC<AvatarContentProps> = React.memo(({
 }) => {
   const tokens = useAppDesignTokens();
 
+  const imageStyle = useMemo(() => [
+    styles.image,
+    {
+      width: config.size,
+      height: config.size,
+      borderRadius,
+    },
+    imageStyle,
+  ], [config.size, borderRadius, imageStyle]);
+
+  const initialsStyle = useMemo(() => [
+    styles.initials,
+    {
+      fontSize: config.fontSize,
+      color: tokens.colors.textInverse,
+    },
+  ], [config.fontSize, tokens.colors.textInverse]);
+
   if (hasImage) {
     return (
       <Image
         source={{ uri }}
-        style={[
-          styles.image,
-          {
-            width: config.size,
-            height: config.size,
-            borderRadius,
-          },
-          imageStyle,
-        ]}
+        style={imageStyle}
       />
     );
   }
@@ -73,13 +83,7 @@ const AvatarContent: React.FC<AvatarContentProps> = React.memo(({
     return (
       <AtomicText
         type="bodyMedium"
-        style={[
-          styles.initials,
-          {
-            fontSize: config.fontSize,
-            color: tokens.colors.textInverse,
-          },
-        ]}
+        style={initialsStyle}
       >
         {initials}
       </AtomicText>
@@ -154,20 +158,35 @@ export const Avatar: React.FC<AvatarProps> = ({
     right: 0,
   }), []);
 
+  const containerStyle = useMemo(() => [
+    styles.container,
+    {
+      width: config.size,
+      height: config.size,
+      borderRadius,
+      backgroundColor: bgColor,
+    },
+    style,
+  ], [config.size, borderRadius, bgColor, style]);
+
+  const statusStyle = useMemo(() => [
+    styles.statusIndicator,
+    {
+      width: config.statusSize,
+      height: config.statusSize,
+      borderRadius: config.statusSize / 2,
+      backgroundColor: AvatarUtils.getStatusColor(status),
+      borderWidth: config.borderWidth,
+      borderColor: tokens.colors.onBackground,
+      ...statusPosition,
+    },
+  ], [config.statusSize, config.borderWidth, status, tokens.colors.onBackground, statusPosition]);
+
   const AvatarWrapper = onPress ? TouchableOpacity : View;
 
   return (
     <AvatarWrapper
-      style={[
-        styles.container,
-        {
-          width: config.size,
-          height: config.size,
-          borderRadius,
-          backgroundColor: bgColor,
-        },
-        style,
-      ]}
+      style={containerStyle}
       onPress={onPress}
       disabled={!onPress}
       accessibilityRole={onPress ? 'button' : 'image'}
@@ -187,18 +206,7 @@ export const Avatar: React.FC<AvatarProps> = ({
 
       {showStatus && (
         <View
-          style={[
-            styles.statusIndicator,
-            {
-              width: config.statusSize,
-              height: config.statusSize,
-              borderRadius: config.statusSize / 2,
-              backgroundColor: AvatarUtils.getStatusColor(status),
-              borderWidth: config.borderWidth,
-              borderColor: tokens.colors.onBackground,
-              ...statusPosition,
-            },
-          ]}
+          style={statusStyle}
           accessibilityLabel={`Status: ${status}`}
           accessibilityRole="none"
         />

package/src/molecules/avatar/AvatarGroup.tsx

@@ -12,7 +12,7 @@ import { AtomicText } from '../../atoms';
 import { Avatar } from './Avatar';
 import type { AvatarSize, AvatarShape } from './Avatar.types';
 import { AVATAR_SIZES } from '../../constants';
-import { calculateResponsiveSize } from '../../utils/responsiveUtils';
+import { calculateResponsiveSize } from '../../responsive';
 import type { SizeConfig } from './Avatar.types';
 
 const AVATAR_CONSTANTS = {

package/src/molecules/bottom-sheet/components/BottomSheet.tsx

@@ -3,7 +3,7 @@ import { Modal, View, StyleSheet, Pressable } from 'react-native';
 import { useAppDesignTokens } from '../../../theme';
 import { useSafeAreaInsets } from '../../../safe-area';
 import { getResponsiveBottomSheetLayout } from '../../../responsive';
-import { calculateResponsiveSize } from '../../../utils/responsiveUtils';
+import { calculateResponsiveSize } from '../../../responsive';
 import { BOTTOM_SHEET_HANDLE } from '../../../constants';
 import type {
   BottomSheetRef,

package/src/molecules/bottom-sheet/components/BottomSheetModal.tsx

@@ -3,7 +3,7 @@ import { Modal, View, StyleSheet, Pressable } from 'react-native';
 import { useAppDesignTokens } from '../../../theme';
 import { useSafeAreaInsets } from '../../../safe-area';
 import { getResponsiveBottomSheetLayout } from '../../../responsive';
-import { calculateResponsiveSize } from '../../../utils/responsiveUtils';
+import { calculateResponsiveSize } from '../../../responsive';
 import { BOTTOM_SHEET_HANDLE } from '../../../constants';
 import type { BottomSheetModalRef, BottomSheetModalProps } from '../types/BottomSheet';
 

package/src/molecules/bottom-sheet/components/filter/FilterSheet.tsx

@@ -3,7 +3,7 @@ import { View, StyleSheet, ScrollView, Modal, Pressable, GestureResponderEvent }
 import { useSafeAreaInsets } from "../../../../safe-area";
 import { AtomicButton } from '../../../../atoms';
 import { useAppDesignTokens } from '../../../../theme';
-import { calculateResponsiveSize } from '../../../../utils/responsiveUtils';
+import { calculateResponsiveSize } from '../../../../responsive';
 import { BOTTOM_SHEET_HANDLE } from '../../../../constants';
 import type { FilterOption } from "../../types/Filter";
 import { FilterUtils } from "../../types/Filter";

package/src/molecules/circular-menu/CircularMenuItem.tsx

@@ -4,7 +4,7 @@ import { AtomicIcon } from "../../atoms";
 import { AtomicText } from "../../atoms";
 import { useAppDesignTokens } from "../../theme";
 import { LAYOUT } from "./constants";
-import { calculateResponsiveSize } from "../../utils/responsiveUtils";
+import { calculateResponsiveSize } from "../../responsive";
 
 export interface CircularMenuItemProps {
   icon: string;

package/src/molecules/countdown/components/CountdownHeader.tsx

@@ -3,7 +3,7 @@ import { View, StyleSheet, TouchableOpacity } from 'react-native';
 import { AtomicText, AtomicIcon, useIconName } from '../../../atoms';
 import { useAppDesignTokens } from '../../../theme';
 import type { IconName } from '../../../atoms';
-import { calculateResponsiveSize } from '../../../utils/responsiveUtils';
+import { calculateResponsiveSize } from '../../../responsive';
 import { COUNTDOWN_TOGGLE } from '../../../constants';
 
 export interface CountdownHeaderProps {

package/src/molecules/countdown/components/TimeUnit.tsx

@@ -2,7 +2,7 @@ import React, { useMemo } from 'react';
 import { View, StyleSheet } from 'react-native';
 import { AtomicText } from '../../../atoms';
 import { useAppDesignTokens } from '../../../theme';
-import { calculateResponsiveSize } from '../../../utils/responsiveUtils';
+import { calculateResponsiveSize } from '../../../responsive';
 import { COUNTDOWN_SIZES } from '../../../constants';
 
 export interface TimeUnitProps {

package/src/molecules/hero-section/HeroSection.tsx

@@ -3,7 +3,7 @@ import React, { useMemo } from 'react';
 import { View, StyleSheet, Text, Image } from 'react-native';
 import { useAppDesignTokens } from '../../theme';
 import type { HeroSectionProps } from './types';
-import { calculateResponsiveSize } from '../../utils/responsiveUtils';
+import { calculateResponsiveSize } from '../../responsive';
 import { HERO_ICON } from '../../constants';
 
 export const HeroSection: React.FC<HeroSectionProps> = ({

package/src/molecules/icon-grid/IconGrid.tsx

@@ -21,7 +21,7 @@ import { AtomicIcon } from '../../atoms';
 import { AtomicText } from '../../atoms';
 import type { IconName } from '../../atoms';
 import { calculateGridItemWidth } from '../../utils/math';
-import { calculateResponsiveSize } from '../../utils/responsiveUtils';
+import { calculateResponsiveSize } from '../../responsive';
 import { ICON_GRID } from '../../constants';
 
 export interface IconGridItem {

package/src/molecules/info-grid/InfoGrid.tsx

@@ -5,7 +5,7 @@ import { AtomicText } from '../../atoms/AtomicText';
 import { AtomicIcon } from '../../atoms';
 import { useAppDesignTokens } from '../../theme';
 import type { InfoGridProps } from './types';
-import { calculateResponsiveSize } from '../../utils/responsiveUtils';
+import { calculateResponsiveSize } from '../../responsive';
 import { INFO_GRID_ICONS } from '../../constants';
 
 export const InfoGrid: React.FC<InfoGridProps> = ({

package/src/molecules/navigation/TabsNavigator.tsx

@@ -6,7 +6,7 @@ import type { TabNavigatorConfig, TabScreen } from "./types";
 import { NavigationValidator } from "./utils/NavigationValidator";
 import { createTabScreen } from "./utils/ScreenFactory";
 import { useAppDesignTokens } from "../../theme";
-import { calculateResponsiveSize } from "../../utils/responsiveUtils";
+import { calculateResponsiveSize } from "../../responsive";
 import { NAVIGATION } from "../../constants";
 
 // Create the navigator instance ONCE outside the component

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

@@ -4,7 +4,7 @@ import { AtomicText } from '../../../atoms';
 import { AtomicIcon, useIconName } from '../../../atoms';
 import { useAppDesignTokens } from '../../../theme';
 import { useSafeAreaInsets } from '../../../safe-area';
-import { calculateResponsiveSize } from '../../../utils/responsiveUtils';
+import { calculateResponsiveSize } from '../../../responsive';
 import { NAVIGATION } from '../../../constants';
 
 export interface NavigationHeaderProps {

package/src/utils/index.ts

@@ -2,11 +2,149 @@
  * Utils Module
  *
  * Centralized utility functions for the design system.
+ *
+ * Usage:
+ *   import { createMappedArray, retryWithBackoff, formatFileSize, clamp, Logger, DesignSystemError } from '@umituz/react-native-design-system/utils';
  */
 
+// =============================================================================
+// ARRAY UTILITIES
+// =============================================================================
+
 export {
   createMappedArray,
   safeSlice,
   filterById,
   findById,
 } from './arrayUtils';
+
+// =============================================================================
+// TIME CONSTANTS
+// =============================================================================
+
+export {
+  MILLISECONDS_PER_SECOND,
+  MILLISECONDS_PER_MINUTE,
+  MILLISECONDS_PER_HOUR,
+  MILLISECONDS_PER_DAY,
+  SECONDS_PER_MINUTE,
+  SECONDS_PER_HOUR,
+  SECONDS_PER_DAY,
+  MINUTES_PER_HOUR,
+  MINUTES_PER_DAY,
+  ONE_SECOND_MS,
+  FIVE_SECONDS_MS,
+  TEN_SECONDS_MS,
+  THIRTY_SECONDS_MS,
+  ONE_MINUTE_MS,
+  FIVE_MINUTES_MS,
+  TEN_MINUTES_MS,
+  THIRTY_MINUTES_MS,
+  ONE_HOUR_MS,
+  ONE_DAY_MS,
+  DEFAULT_TIMEOUT_MS,
+  DEFAULT_LONG_TIMEOUT_MS,
+  DEFAULT_CACHE_TTL_MS,
+} from './constants/TimeConstants';
+
+// =============================================================================
+// ASYNC UTILITIES
+// =============================================================================
+
+export {
+  retryWithBackoff,
+  retryWithTimeout,
+  isNetworkError,
+  isRetryableHttpStatus,
+  type RetryOptions,
+} from './async';
+
+// =============================================================================
+// FORMATTER UTILITIES
+// =============================================================================
+
+export {
+  formatFileSize,
+  formatDuration,
+  formatPhone,
+  truncateText,
+  capitalize,
+  toTitleCase,
+  toSlug,
+  type FileSizeFormatOptions,
+  type DurationFormatOptions,
+  type PhoneFormatOptions,
+} from './formatters/stringFormatter';
+
+// =============================================================================
+// MATH UTILITIES
+// =============================================================================
+
+export {
+  clamp,
+  calculatePercentage,
+  roundTo,
+  calculateGridItemWidth,
+  isInRange,
+  lerp,
+  mapRange,
+  normalizeProgress,
+  formatPercentage,
+  calculateStepProgress,
+  isComplete,
+  hasStarted,
+  intensityToOpacity,
+  createRgbaColor,
+  ratioToOpacity,
+} from './math';
+
+// =============================================================================
+// LOGGER
+// =============================================================================
+
+export {
+  Logger,
+  logger,
+  type LoggerConfig,
+} from './logger';
+
+// =============================================================================
+// HOOKS
+// =============================================================================
+
+export {
+  useAsyncOperation,
+  type AsyncOperationOptions,
+  type AsyncOperationState,
+  type AsyncOperationActions,
+  type AsyncOperationReturn,
+} from './hooks';
+
+export type { ErrorHandler as AsyncErrorHandler } from './hooks';
+
+// =============================================================================
+// ERROR HANDLING
+// =============================================================================
+
+export {
+  DesignSystemError,
+  ErrorCodes,
+  ErrorCategory,
+  type ErrorCode,
+  type ErrorMetadata,
+} from './errors';
+
+export { ErrorHandler } from './errors/ErrorHandler';
+
+export type {
+  Result,
+} from './errors/types/Result';
+
+export {
+  ok,
+  err,
+  unwrap,
+  unwrapOr,
+  map,
+  mapError,
+} from './errors';