@umituz/react-native-design-system 4.28.21 → 4.28.23

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/dist/uuid/index.d.ts

@@ -0,0 +1,8 @@
+/**
+ * React Native UUID
+ *
+ * Cross-platform UUID generation for React Native apps
+ */
+export { generateUUID, generateUUID as uuidv4, generateUUID as generateCreationId, isValidUUID, getUUIDVersion, } from "./infrastructure/utils/UUIDUtils";
+export type { UUID } from "./types/UUID";
+export { UUIDVersion, UUID_CONSTANTS } from "./types/UUID";

package/dist/uuid/infrastructure/utils/UUIDUtils.d.ts

@@ -0,0 +1,20 @@
+/**
+ * UUID Generation Utility
+ *
+ * Provides cross-platform UUID generation.
+ * Uses expo-crypto when available, falls back to Math.random-based v4 UUID.
+ */
+import type { UUID } from '../../types/UUID';
+/**
+ * Generate a v4 UUID
+ * Uses expo-crypto's randomUUID() when available, otherwise Math.random fallback
+ */
+export declare const generateUUID: () => UUID;
+/**
+ * Validate UUID format
+ */
+export declare const isValidUUID: (value: string) => value is UUID;
+/**
+ * Get version from UUID string
+ */
+export declare const getUUIDVersion: (value: string) => number | null;

package/dist/uuid/types/UUID.d.ts

@@ -0,0 +1,34 @@
+/**
+ * UUID Type Definition
+ */
+/**
+ * UUID brand type for type safety
+ * Format: xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx
+ */
+export type UUID = string & {
+    readonly __brand: unique symbol;
+};
+/**
+ * UUID Version enum
+ */
+export declare enum UUIDVersion {
+    NIL = "nil",
+    V1 = "v1",
+    V2 = "v2",
+    V3 = "v3",
+    V4 = "v4",
+    V5 = "v5"
+}
+/**
+ * UUID constants
+ */
+export declare const UUID_CONSTANTS: {
+    /**
+     * NIL UUID (00000000-0000-0000-0000-000000000000)
+     */
+    readonly NIL: UUID;
+    /**
+     * UUID v4 regex pattern
+     */
+    readonly PATTERN: RegExp;
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-design-system",
-  "version": "4.28.21",
+  "version": "4.28.23",
   "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/AtomicFab.tsx

@@ -62,11 +62,12 @@ export const AtomicFab: React.FC<AtomicFabProps> = ({
   const iconSize = useMemo(() => getFabIconSize(size as 'sm' | 'md' | 'lg') * tokens.spacingMultiplier, [size, tokens.spacingMultiplier]);
 
   const fabStyle = useMemo(() => {
-    const baseSizeConfig = FAB_SIZES[size as 'sm' | 'md' | 'lg'];
+    const baseSize = FAB_SIZES[size as 'sm' | 'md' | 'lg'];
+    const borderRadius = size === 'sm' ? 12 : size === 'md' ? 16 : 20;
     const sizeConfig = {
-      width: baseSizeConfig.width * tokens.spacingMultiplier,
-      height: baseSizeConfig.height * tokens.spacingMultiplier,
-      borderRadius: baseSizeConfig.borderRadius * tokens.spacingMultiplier,
+      width: baseSize * tokens.spacingMultiplier,
+      height: baseSize * tokens.spacingMultiplier,
+      borderRadius: borderRadius * tokens.spacingMultiplier,
     };
 
     return StyleSheet.flatten([

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

@@ -10,6 +10,9 @@ import type { FabSizeConfig, FabVariantConfig } from '../types';
 import { FAB_SIZES as BASE_FAB_SIZES } from '../../../constants';
 import { calculateResponsiveSize } from '../../../responsive';
 
+// Re-export FAB_SIZES for convenience
+export const FAB_SIZES = BASE_FAB_SIZES;
+
 /**
  * Get responsive FAB sizes based on spacing multiplier
  * @param spacingMultiplier - Spacing multiplier from design tokens

package/src/layouts/FormLayout/FormLayout.tsx

@@ -101,7 +101,6 @@ export const FormLayout: React.FC<FormLayoutProps> = ({
       accessibilityLabel={accessibilityLabel || "Form"}
       accessibilityHint={accessibilityHint}
       accessible={accessible !== false}
-      accessibilityRole="form"
     >
       {children}
     </View>

package/src/layouts/ScreenLayout/ScreenLayout.tsx

@@ -3,12 +3,11 @@
  */
 
 import React, { useMemo } from 'react';
-import { View, ScrollView, KeyboardAvoidingView, Platform, type StyleProp, type ViewStyle } from 'react-native';
+import { View, ScrollView, KeyboardAvoidingView, Platform, type StyleProp, type ViewStyle, type AccessibilityRole, type ScrollViewProps } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { useAppDesignTokens } from '../../theme';
 import { getScreenLayoutConfig } from '../../responsive/responsiveLayout';
 import { getScreenLayoutStyles } from './styles/screenLayoutStyles';
-import type { ScreenLayoutProps } from './types';
 
 export interface ScreenLayoutProps {
   children: React.ReactNode;
@@ -25,9 +24,8 @@ export interface ScreenLayoutProps {
   keyboardVerticalOffset?: number;
   maxWidth?: number;
   fullWidth?: boolean;
-  refreshControl?: React.ReactElement;
+  refreshControl?: any;
   accessibilityLabel?: string;
-  accessibilityRole?: 'window' | 'region' | 'section';
   accessible?: boolean;
 }
 
@@ -62,7 +60,6 @@ export const ScreenLayout: React.FC<ScreenLayoutProps> = (props: ScreenLayoutPro
     fullWidth = false,
     refreshControl,
     accessibilityLabel,
-    accessibilityRole = 'region',
     accessible,
   } = props;
 
@@ -105,7 +102,6 @@ export const ScreenLayout: React.FC<ScreenLayoutProps> = (props: ScreenLayoutPro
         },
       ]}
       accessibilityLabel={accessibilityLabel}
-      accessibilityRole={accessibilityRole}
       accessible={accessible !== false}
     >
       {header}
@@ -140,7 +136,6 @@ export const ScreenLayout: React.FC<ScreenLayoutProps> = (props: ScreenLayoutPro
         style={[styles.container, { backgroundColor: bgColor }, containerStyle]}
         testID={testID}
         accessibilityLabel={accessibilityLabel}
-        accessibilityRole={accessibilityRole}
         accessible={accessible !== false}
       >
         <KAV
@@ -159,12 +154,9 @@ export const ScreenLayout: React.FC<ScreenLayoutProps> = (props: ScreenLayoutPro
       style={[styles.container, { backgroundColor: bgColor }, containerStyle]}
       testID={testID}
       accessibilityLabel={accessibilityLabel}
-      accessibilityRole={accessibilityRole}
       accessible={accessible !== false}
     >
       <View style={styles.keyboardAvoidingView}>{content}</View>
     </View>
   );
 };
-
-export type { ScreenLayoutProps } from './types';

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

@@ -42,7 +42,7 @@ const createStyles = (spacingMultiplier: number) => ({
   },
   actionText: {
     color: '',
-    fontWeight: '800',
+    fontWeight: 800 as const,
   },
 });
 

package/src/molecules/alerts/AlertModal.tsx

@@ -58,7 +58,7 @@ export const AlertModal: React.FC<AlertModalProps> = ({ alert }) => {
             backgroundColor: 'rgba(0,0,0,0.55)',
         },
         modal: {
-            width: '100%',
+            width: '100%' as const,
             maxWidth: calculateResponsiveSize(MODAL_SIZES.maxWidth, spacingMultiplier),
             padding: calculateResponsiveSize(MODAL_SIZES.padding, spacingMultiplier),
             alignItems: 'center' as const,
@@ -83,10 +83,10 @@ export const AlertModal: React.FC<AlertModalProps> = ({ alert }) => {
         },
         actionsRow: {
             flexDirection: 'row' as const,
-            width: '100%',
+            width: '100%' as const,
         },
         actionsColumn: {
-            width: '100%',
+            width: '100%' as const,
         },
         actionButtonHalf: {
             flex: 1,

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

@@ -57,8 +57,8 @@ export const HeroSection: React.FC<HeroSectionProps> = ({
       left: 0,
       right: 0,
       bottom: 0,
-      width: '100%',
-      height: '100%',
+      width: '100%' as const,
+      height: '100%' as const,
     },
     emoji: {
       fontSize: calculateResponsiveSize(64, spacingMultiplier),

package/src/organisms/FormContainer.tsx

@@ -131,7 +131,7 @@ export const FormContainer: React.FC<FormContainerProps> = ({
         paddingBottom: formBottomPadding + insets.bottom,
         maxWidth: formContentWidth,
         alignSelf: 'center' as const,
-        width: '100%',
+        width: '100%' as const,
         gap: formElementSpacing,
       },
     }),
@@ -145,7 +145,6 @@ export const FormContainer: React.FC<FormContainerProps> = ({
       accessibilityLabel={accessibilityLabel}
       accessibilityHint={accessibilityHint}
       accessible={accessible !== false}
-      accessibilityRole="form"
     >
       <View style={styles.surface}>
         <ScrollView

package/src/safe-area/hooks/useSafeAreaInsets.ts

@@ -1,9 +1,34 @@
 /**
  * useSafeAreaInsets Hook
- * Get safe area insets
+ * Get safe area insets with fallback for race conditions
+ *
+ * This wrapper catches the case where the hook is called before
+ * SafeAreaProvider is fully initialized, returning safe default values
+ * instead of throwing an error.
  */
 
 import { useSafeAreaInsets as useNativeSafeAreaInsets } from 'react-native-safe-area-context';
+import type { EdgeInsets } from 'react-native-safe-area-context';
 
-export const useSafeAreaInsets = useNativeSafeAreaInsets;
+const DEFAULT_INSETS: EdgeInsets = {
+  top: 0,
+  right: 0,
+  bottom: 0,
+  left: 0,
+};
+
+export const useSafeAreaInsets = (): EdgeInsets => {
+  try {
+    return useNativeSafeAreaInsets();
+  } catch (error) {
+    // Log in development only to help debugging
+    if (__DEV__) {
+      console.warn(
+        '[useSafeAreaInsets] SafeAreaProvider not available yet. Using default values (all zeros). ' +
+        'This is likely due to a timing issue during initialization and should resolve quickly.'
+      );
+    }
+    return DEFAULT_INSETS;
+  }
+};