@umituz/react-native-design-system 2.6.80 → 2.6.82

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-design-system",
-  "version": "2.6.80",
+  "version": "2.6.82",
   "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

@@ -3,7 +3,6 @@
  */
 
 import { StyleSheet } from 'react-native';
-import type { DesignTokens } from '../../../theme';
 
 export interface ScreenLayoutStylesConfig {
   readonly maxWidth?: number;
@@ -12,7 +11,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/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';