@umituz/react-native-design-system 2.5.16 → 2.5.18

package/package.json

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { StyleSheet, StyleProp, ViewStyle, TextStyle, TouchableOpacity, View } from 'react-native';
+import { StyleSheet, StyleProp, ViewStyle, TextStyle, TouchableOpacity, View, ActivityIndicator } from 'react-native';
 import { AtomicText } from './AtomicText';
 import { AtomicIcon } from './AtomicIcon';
 import { useAppDesignTokens } from '../theme';
@@ -15,6 +15,7 @@ export interface AtomicButtonProps {
   variant?: ButtonVariant;
   size?: ButtonSize;
   disabled?: boolean;
+  loading?: boolean;
   icon?: IconName;
   fullWidth?: boolean;
   style?: StyleProp<ViewStyle>;
@@ -30,6 +31,7 @@ export const AtomicButton: React.FC<AtomicButtonProps> = React.memo(({
   variant = 'primary',
   size = 'md',
   disabled = false,
+  loading = false,
   icon,
   fullWidth = false,
   style,
@@ -40,11 +42,13 @@ export const AtomicButton: React.FC<AtomicButtonProps> = React.memo(({
   const tokens = useAppDesignTokens();
 
   const handlePress = () => {
-    if (!disabled) {
+    if (!disabled && !loading) {
       onPress();
     }
   };
 
+  const isDisabled = disabled || loading;
+
   // Size configurations
   const sizeConfig = {
     sm: {
@@ -166,7 +170,7 @@ export const AtomicButton: React.FC<AtomicButtonProps> = React.memo(({
     },
     variantStyles.container,
     fullWidth ? styles.fullWidth : undefined,
-    disabled ? styles.disabled : undefined,
+    isDisabled ? styles.disabled : undefined,
     style,
   ];
 
@@ -176,7 +180,7 @@ export const AtomicButton: React.FC<AtomicButtonProps> = React.memo(({
       fontWeight: '600',
     },
     variantStyles.text,
-    disabled ? styles.disabledText : undefined,
+    isDisabled ? styles.disabledText : undefined,
     textStyle,
   ];
 
@@ -189,11 +193,17 @@ export const AtomicButton: React.FC<AtomicButtonProps> = React.memo(({
       style={containerStyle}
       onPress={handlePress}
       activeOpacity={activeOpacity}
-      disabled={disabled}
+      disabled={isDisabled}
       testID={testID}
     >
       <View style={styles.content}>
-        {showIcon ? (
+        {loading ? (
+          <ActivityIndicator
+            size="small"
+            color={iconColor as string}
+            style={styles.icon}
+          />
+        ) : showIcon ? (
           <AtomicIcon
             name={icon}
             customSize={config.iconSize}

package/src/atoms/AtomicText.tsx

@@ -4,21 +4,24 @@ import { useAppDesignTokens } from '../theme';
 import { getTextColor, type TextStyleVariant, type ColorVariant } from '../typography';
 
 export interface AtomicTextProps extends TextProps {
+  /** Typographic style variant from tokens (alias for 'type') */
+  variant?: TextStyleVariant;
+
   /** Typographic style variant from tokens */
   type?: TextStyleVariant;
-  
+
   /** Color variant from tokens or custom hex color */
   color?: ColorVariant | string;
-  
+
   /** Text alignment */
   align?: TextStyle['textAlign'];
-  
+
   /** Content to render */
   children: React.ReactNode;
-  
+
   /** Custom text style */
   style?: StyleProp<TextStyle>;
-  
+
   /** Test ID for automation */
   testID?: string;
 }
@@ -31,6 +34,7 @@ export interface AtomicTextProps extends TextProps {
  * ✅ SOLID, DRY, KISS
  */
 export const AtomicText = ({
+  variant,
   type = 'bodyMedium',
   color = 'textPrimary',
   align,
@@ -41,8 +45,11 @@ export const AtomicText = ({
 }: AtomicTextProps) => {
   const tokens = useAppDesignTokens();
 
+  // Support both 'variant' and 'type' props for backward compatibility
+  const textType = variant || type;
+
   // Get typography style from tokens
-  const typographyStyle = (tokens.typography as Record<string, any>)[type];
+  const typographyStyle = (tokens.typography as Record<string, any>)[textType];
   
   // Use responsive font size if available
   const fontSize = typographyStyle?.responsiveFontSize || typographyStyle?.fontSize;

package/src/atoms/AtomicTextArea.tsx

@@ -19,6 +19,7 @@ export interface AtomicTextAreaProps {
   errorText?: string;
   maxLength?: number;
   numberOfLines?: number;
+  rows?: number;
   disabled?: boolean;
   style?: ViewStyle;
   testID?: string;
@@ -32,11 +33,13 @@ export const AtomicTextArea: React.FC<AtomicTextAreaProps> = ({
   helperText,
   errorText,
   maxLength,
-  numberOfLines = 4,
+  numberOfLines,
+  rows = 4,
   disabled = false,
   style,
   testID,
 }) => {
+  const lineCount = numberOfLines ?? rows;
   const tokens = useAppDesignTokens();
   const hasError = !!errorText;
 
@@ -56,7 +59,7 @@ export const AtomicTextArea: React.FC<AtomicTextAreaProps> = ({
         placeholder={placeholder}
         placeholderTextColor={tokens.colors.textTertiary}
         maxLength={maxLength}
-        numberOfLines={numberOfLines}
+        numberOfLines={lineCount}
         multiline
         editable={!disabled}
         textAlignVertical="top"
@@ -66,7 +69,7 @@ export const AtomicTextArea: React.FC<AtomicTextAreaProps> = ({
             backgroundColor: tokens.colors.surface,
             borderColor: hasError ? tokens.colors.error : tokens.colors.border,
             color: tokens.colors.textPrimary,
-            minHeight: numberOfLines * 24,
+            minHeight: lineCount * 24,
           },
           disabled && { opacity: 0.5 },
         ]}

package/src/atoms/picker/types/index.ts

@@ -30,8 +30,8 @@ export interface AtomicPickerProps {
   onChange: (value: string | string[]) => void;
   options: PickerOption[];
   label?: string;
-  /** Placeholder text - REQUIRED for i18n, pass translated string */
-  placeholder: string;
+  /** Placeholder text - pass translated string for i18n */
+  placeholder?: string;
   error?: string;
   disabled?: boolean;
   multiple?: boolean;
@@ -41,14 +41,14 @@ export interface AtomicPickerProps {
   color?: IconColor;
   size?: PickerSize;
   modalTitle?: string;
-  /** Empty state message - REQUIRED for i18n, pass translated string */
-  emptyMessage: string;
-  /** Search placeholder text - REQUIRED for i18n, pass translated string */
-  searchPlaceholder: string;
-  /** Clear button accessibility label - REQUIRED for i18n, pass translated string */
-  clearAccessibilityLabel: string;
-  /** Close button accessibility label - REQUIRED for i18n, pass translated string */
-  closeAccessibilityLabel: string;
+  /** Empty state message - pass translated string for i18n */
+  emptyMessage?: string;
+  /** Search placeholder text - pass translated string for i18n */
+  searchPlaceholder?: string;
+  /** Clear button accessibility label - pass translated string for i18n */
+  clearAccessibilityLabel?: string;
+  /** Close button accessibility label - pass translated string for i18n */
+  closeAccessibilityLabel?: string;
   style?: ViewStyle | ViewStyle[];
   labelStyle?: TextStyle | TextStyle[];
   testID?: string;