@umituz/react-native-design-system 2.6.79 → 2.6.81

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-design-system",
-  "version": "2.6.79",
+  "version": "2.6.81",
   "description": "Universal design system for React Native apps - Consolidated package with atoms, molecules, organisms, theme, typography, responsive and safe area utilities",
   "main": "./src/index.ts",
   "types": "./src/index.ts",

package/src/device/infrastructure/services/DeviceExtrasCollector.ts

@@ -53,7 +53,7 @@ function getDeviceLocale(): string | undefined {
     const locales = Localization.getLocales();
     if (locales && locales.length > 0) {
       const locale = locales[0];
-      return locale.languageTag || undefined;
+      return locale?.languageTag || undefined;
     }
     return undefined;
   } catch {

package/src/layouts/ScreenLayout/ScreenLayout.tsx

@@ -43,8 +43,8 @@ export const ScreenLayout: React.FC<ScreenLayoutProps> = ({
 
   // Pre-compute styles
   const styles = useMemo(
-    () => getScreenLayoutStyles(tokens, { maxWidth: finalMaxWidth, horizontalPadding, verticalPadding }),
-    [tokens, finalMaxWidth, horizontalPadding, verticalPadding]
+    () => getScreenLayoutStyles({ maxWidth: finalMaxWidth, horizontalPadding, verticalPadding }),
+    [finalMaxWidth, horizontalPadding, verticalPadding]
   );
 
   const bgColor = backgroundColor || tokens.colors.backgroundPrimary;

package/src/layouts/ScreenLayout/styles/screenLayoutStyles.ts

@@ -12,7 +12,6 @@ export interface ScreenLayoutStylesConfig {
 }
 
 export const getScreenLayoutStyles = (
-  tokens: DesignTokens,
   config: ScreenLayoutStylesConfig,
 ) => {
   const { maxWidth, horizontalPadding, verticalPadding } = config;

package/src/molecules/avatar/Avatar.tsx

@@ -9,12 +9,9 @@ import React from 'react';
 import { View, Image, StyleSheet, type StyleProp, type ViewStyle, type ImageStyle } from 'react-native';
 import { useAppDesignTokens } from '../../theme';
 import { AtomicText, AtomicIcon } from '../../atoms';
-import type { AvatarSize, AvatarShape } from './Avatar.utils';
-import {
-  SIZE_CONFIGS,
-  AvatarUtils,
-  AVATAR_CONSTANTS,
-} from './Avatar.utils';
+import type { AvatarSize, AvatarShape } from './Avatar.types';
+import { SIZE_CONFIGS, AVATAR_CONSTANTS } from './Avatar.constants';
+import { AvatarUtils } from './Avatar.utils';
 
 /**
  * Avatar component props

package/src/molecules/avatar/Avatar.utils.ts

@@ -64,17 +64,17 @@ export class AvatarUtils {
    * Same name always returns same color
    */
   static getColorForName(name: string): string {
-    if (!name) return AVATAR_COLORS[0];
+    if (!name) return AVATAR_COLORS[0] ?? '#7E57C2';
 
     const hash = this.hashString(name);
-    return AVATAR_COLORS[hash % AVATAR_COLORS.length];
+    return AVATAR_COLORS[hash % AVATAR_COLORS.length] ?? AVATAR_COLORS[0] ?? '#7E57C2';
   }
 
   /**
    * Get size config
    */
   static getSizeConfig(size: AvatarSize): SizeConfig {
-    return SIZE_CONFIGS[size];
+    return SIZE_CONFIGS[size] ?? SIZE_CONFIGS.md;
   }
 
   /**
@@ -84,14 +84,14 @@ export class AvatarUtils {
     if (shape === 'circle') {
       return size / 2;
     }
-    return SHAPE_CONFIGS[shape];
+    return SHAPE_CONFIGS[shape] ?? 0;
   }
 
   /**
    * Get status color
    */
   static getStatusColor(status: 'online' | 'offline' | 'away' | 'busy'): string {
-    return STATUS_COLORS[status];
+    return STATUS_COLORS[status] ?? STATUS_COLORS.offline;
   }
 
   /**
@@ -132,7 +132,3 @@ export class AvatarUtils {
     return config.type === 'icon' && !!config.icon;
   }
 }
-
-// Re-export types and constants for convenience
-export type { AvatarSize, AvatarShape, AvatarType, AvatarConfig, SizeConfig } from './Avatar.types';
-export { AVATAR_COLORS, STATUS_COLORS, SHAPE_CONFIGS, SIZE_CONFIGS, AVATAR_CONSTANTS } from './Avatar.constants';

package/src/molecules/avatar/AvatarGroup.tsx

@@ -10,11 +10,8 @@ import { View, StyleSheet, type StyleProp, type ViewStyle } from 'react-native';
 import { useAppDesignTokens } from '../../theme';
 import { AtomicText } from '../../atoms';
 import { Avatar } from './Avatar';
-import type { AvatarSize, AvatarShape } from './Avatar.utils';
-import {
-  SIZE_CONFIGS,
-  AVATAR_CONSTANTS,
-} from './Avatar.utils';
+import type { AvatarSize, AvatarShape } from './Avatar.types';
+import { SIZE_CONFIGS, AVATAR_CONSTANTS } from './Avatar.constants';
 
 /**
  * Avatar item for group
@@ -43,32 +40,6 @@ export interface AvatarGroupProps {
   style?: StyleProp<ViewStyle>;
 }
 
-/**
- * AvatarGroup Component
- *
- * Displays multiple avatars in a horizontal stack.
- * Shows "+N" indicator when exceeding max visible count.
- *
- * USAGE:
- * ```typescript
- * const users = [
- *   { name: 'Ümit Uz', uri: 'https://...' },
- *   { name: 'John Doe', uri: 'https://...' },
- *   { name: 'Jane Smith' },
- *   { name: 'Bob Johnson' },
- *   { name: 'Alice Brown' },
- * ];
- *
- * // Show 3 avatars + overflow
- * <AvatarGroup items={users} maxVisible={3} />
- *
- * // Custom spacing
- * <AvatarGroup items={users} spacing={-12} />
- *
- * // Different size
- * <AvatarGroup items={users} size="lg" />
- * ```
- */
 export const AvatarGroup: React.FC<AvatarGroupProps> = ({
   items,
   maxVisible = AVATAR_CONSTANTS.MAX_GROUP_VISIBLE,
@@ -87,7 +58,6 @@ export const AvatarGroup: React.FC<AvatarGroupProps> = ({
 
   return (
     <View style={[styles.container, style]}>
-      {/* Render visible avatars */}
       {visibleItems.map((item, index) => (
         <View
           key={index}
@@ -113,7 +83,6 @@ export const AvatarGroup: React.FC<AvatarGroupProps> = ({
         </View>
       ))}
 
-      {/* Overflow indicator */}
       {hasOverflow && (
         <View
           style={[
@@ -158,12 +127,8 @@ const styles = StyleSheet.create({
     flexDirection: 'row',
     alignItems: 'center',
   },
-  avatarWrapper: {
-    // Wrapper for easier spacing control
-  },
-  avatar: {
-    // Avatar styles
-  },
+  avatarWrapper: {},
+  avatar: {},
   overflow: {
     justifyContent: 'center',
     alignItems: 'center',

package/src/molecules/avatar/index.ts

@@ -1,10 +1,5 @@
 export { Avatar, type AvatarProps } from './Avatar';
 export { AvatarGroup, type AvatarGroupProps, type AvatarGroupItem } from './AvatarGroup';
-export {
-    AvatarUtils,
-    AVATAR_CONSTANTS,
-    type AvatarSize,
-    type AvatarShape,
-    type AvatarConfig,
-    type AvatarType
-} from './Avatar.utils';
+export { AvatarUtils } from './Avatar.utils';
+export { AVATAR_CONSTANTS } from './Avatar.constants';
+export type { AvatarSize, AvatarShape, AvatarConfig, AvatarType } from './Avatar.types';

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

@@ -42,7 +42,7 @@ export const Countdown: React.FC<CountdownProps> = ({
         () => [target, ...alternateTargets],
         [target, alternateTargets]
     );
-    const currentTarget = allTargets[currentTargetIndex];
+    const currentTarget = allTargets[currentTargetIndex] ?? target;
 
     const { timeRemaining, setTarget: updateTarget } = useCountdown(currentTarget, {
         interval,
@@ -50,25 +50,28 @@ export const Countdown: React.FC<CountdownProps> = ({
     });
 
     React.useEffect(() => {
-        updateTarget(currentTarget);
+        if (currentTarget) {
+            updateTarget(currentTarget);
+        }
     }, [currentTarget, updateTarget]);
 
     const handleToggle = () => {
         const nextIndex = (currentTargetIndex + 1) % allTargets.length;
-        setCurrentTargetIndex(nextIndex);
-        if (onTargetChange) {
-            onTargetChange(allTargets[nextIndex]);
+        const nextTarget = allTargets[nextIndex];
+        if (nextTarget) {
+            setCurrentTargetIndex(nextIndex);
+            onTargetChange?.(nextTarget);
         }
     };
 
     const defaultFormatLabel = (unit: 'days' | 'hours' | 'minutes' | 'seconds') => {
-        const labels = {
-            days: 'DAYS',
-            hours: 'HOURS',
-            minutes: 'MINUTES',
-            seconds: 'SECONDS',
+        const labels: Record<string, string> = {
+            days: '',
+            hours: '',
+            minutes: '',
+            seconds: '',
         };
-        return labels[unit];
+        return labels[unit] ?? '';
     };
 
     const labelFormatter = formatLabel || defaultFormatLabel;
@@ -112,9 +115,9 @@ export const Countdown: React.FC<CountdownProps> = ({
 
     return (
         <View style={styles.container}>
-            {showLabel && (
+            {showLabel && currentTarget && (
                 <CountdownHeader
-                    title={currentTarget.label || 'Countdown'}
+                    title={currentTarget.label || ''}
                     icon={currentTarget.icon as IconName}
                     showToggle={showToggle}
                     onToggle={handleToggle}