@umituz/react-native-design-system 2.6.76 → 2.6.78

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-design-system",
-  "version": "2.6.76",
+  "version": "2.6.78",
   "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/atoms/AtomicIcon.tsx

@@ -13,32 +13,15 @@ import { useAppDesignTokens } from '../theme';
 import {
   type IconSize as BaseIconSize,
   type IconName,
+  type IconColor,
 } from "./AtomicIcon.types";
 
 // Re-export IconSize for convenience
 export type IconSize = BaseIconSize;
-export type { IconName };
+export type { IconName, IconColor };
 
 const FALLBACK_ICON = "help-circle-outline";
 
-// Semantic color names that map to theme tokens
-export type IconColor =
-  | "primary"
-  | "secondary"
-  | "success"
-  | "warning"
-  | "error"
-  | "info"
-  | "onSurface"
-  | "surfaceVariant"
-  | "onPrimary"
-  | "onSecondary"
-  | "textInverse"
-  | "textPrimary"
-  | "textSecondary"
-  | "textTertiary"
-  | "onSurfaceVariant";
-
 export interface AtomicIconProps {
   /** Icon name (Ionicons) */
   name?: IconName;

package/src/atoms/AtomicIcon.types.ts

@@ -20,11 +20,32 @@ export type IconName = IoniconsName | string;
  */
 export type IconSizePreset = "xs" | "sm" | "md" | "lg" | "xl" | "xxl";
 
+
 /**
  * Icon size - preset name or custom number in pixels
  */
 export type IconSize = IconSizePreset | number;
 
+/**
+ * Semantic color names that map to theme tokens
+ */
+export type IconColor =
+  | "primary"
+  | "secondary"
+  | "success"
+  | "warning"
+  | "error"
+  | "info"
+  | "onSurface"
+  | "surfaceVariant"
+  | "onPrimary"
+  | "onSecondary"
+  | "textInverse"
+  | "textPrimary"
+  | "textSecondary"
+  | "textTertiary"
+  | "onSurfaceVariant";
+
 /**
  * Icon size mapping to pixels
  */

package/src/molecules/alerts/AlertToast.tsx

@@ -28,48 +28,32 @@ export function AlertToast({ alert }: AlertToastProps) {
     };
 
     const getBackgroundColor = (type: AlertType): string => {
-        switch (type) {
-            case AlertType.SUCCESS:
-                return tokens.colors.success;
-            case AlertType.ERROR:
-                return tokens.colors.error;
-            case AlertType.WARNING:
-                return tokens.colors.warning;
-            case AlertType.INFO:
-                return tokens.colors.info;
-            default:
-                return tokens.colors.backgroundSecondary;
-        }
+        const colors = {
+            [AlertType.SUCCESS]: tokens.colors.success,
+            [AlertType.ERROR]: tokens.colors.error,
+            [AlertType.WARNING]: tokens.colors.warning,
+            [AlertType.INFO]: tokens.colors.info,
+        };
+        return colors[type] || tokens.colors.backgroundSecondary;
     };
 
-    const getActionButtonStyle = (style: 'primary' | 'secondary' | 'destructive' | undefined): StyleProp<ViewStyle> => {
-        switch (style) {
-            case 'primary':
-                return { backgroundColor: tokens.colors.backgroundPrimary };
-            case 'secondary':
-                return {
-                    backgroundColor: undefined,
-                    borderWidth: 1,
-                    borderColor: tokens.colors.textInverse,
-                };
-            case 'destructive':
-                return { backgroundColor: tokens.colors.error };
-            default:
-                return { backgroundColor: tokens.colors.backgroundSecondary };
+    const getActionButtonStyle = (style?: 'primary' | 'secondary' | 'destructive'): StyleProp<ViewStyle> => {
+        if (style === 'secondary') {
+            return {
+                backgroundColor: undefined,
+                borderWidth: 1,
+                borderColor: tokens.colors.textInverse,
+            };
         }
+        const colors = {
+            primary: tokens.colors.backgroundPrimary,
+            destructive: tokens.colors.error,
+        };
+        return { backgroundColor: colors[style as keyof typeof colors] || tokens.colors.backgroundSecondary };
     };
 
-    const getActionTextColor = (style: 'primary' | 'secondary' | 'destructive' | undefined): string => {
-        switch (style) {
-            case 'primary':
-                return tokens.colors.textPrimary;
-            case 'secondary':
-                return tokens.colors.textInverse;
-            case 'destructive':
-                return tokens.colors.textInverse;
-            default:
-                return tokens.colors.textPrimary;
-        }
+    const getActionTextColor = (style?: 'primary' | 'secondary' | 'destructive'): string => {
+        return style === 'primary' ? tokens.colors.textPrimary : tokens.colors.textInverse;
     };
 
     const backgroundColor = getBackgroundColor(alert.type);

package/src/molecules/avatar/Avatar.tsx

@@ -46,33 +46,10 @@ export interface AvatarProps {
 
 /**
  * Avatar Component
- *
  * Displays user avatars with automatic fallback hierarchy:
  * 1. Image (if uri provided)
  * 2. Initials (if name provided)
  * 3. Icon (fallback)
- *
- * USAGE:
- * ```typescript
- * // Image avatar
- * <Avatar uri="https://..." name="Ümit Uz" size="lg" />
- *
- * // Initials avatar (no image)
- * <Avatar name="Ümit Uz" size="md" />
- *
- * // Icon avatar (fallback)
- * <Avatar size="sm" />
- *
- * // With status indicator
- * <Avatar
- *   name="Ümit Uz"
- *   showStatus
- *   status="online"
- * />
- *
- * // Custom shape
- * <Avatar name="John Doe" shape="rounded" />
- * ```
  */
 export const Avatar: React.FC<AvatarProps> = ({
   uri,