@umituz/react-native-design-system 2.5.15 → 2.5.17

package/package.json

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

@@ -0,0 +1,83 @@
+/**
+ * AtomicSwitch - Toggle Switch Component
+ *
+ * Atomic Design Level: ATOM
+ * Purpose: Boolean toggle across all apps
+ */
+
+import React from 'react';
+import { View, Switch, StyleSheet, ViewStyle } from 'react-native';
+import { useAppDesignTokens } from '../theme';
+import { AtomicText } from './AtomicText';
+
+export interface AtomicSwitchProps {
+  label?: string;
+  value: boolean;
+  onValueChange: (value: boolean) => void;
+  disabled?: boolean;
+  description?: string;
+  style?: ViewStyle;
+  testID?: string;
+}
+
+export const AtomicSwitch: React.FC<AtomicSwitchProps> = ({
+  label,
+  value,
+  onValueChange,
+  disabled = false,
+  description,
+  style,
+  testID,
+}) => {
+  const tokens = useAppDesignTokens();
+
+  return (
+    <View style={[styles.container, style]} testID={testID}>
+      <View style={styles.row}>
+        {label && (
+          <View style={styles.labelContainer}>
+            <AtomicText
+              type="bodyMedium"
+              style={{ color: tokens.colors.textPrimary }}
+            >
+              {label}
+            </AtomicText>
+            {description && (
+              <AtomicText
+                type="bodySmall"
+                style={{ color: tokens.colors.textSecondary, marginTop: 2 }}
+              >
+                {description}
+              </AtomicText>
+            )}
+          </View>
+        )}
+        <Switch
+          value={value}
+          onValueChange={onValueChange}
+          disabled={disabled}
+          trackColor={{
+            false: tokens.colors.border,
+            true: tokens.colors.primary,
+          }}
+          thumbColor={value ? tokens.colors.onPrimary : tokens.colors.surface}
+        />
+      </View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    marginBottom: 16,
+  },
+  row: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+  },
+  labelContainer: {
+    flex: 1,
+    marginRight: 16,
+  },
+});

package/src/atoms/AtomicTextArea.tsx

@@ -0,0 +1,108 @@
+/**
+ * AtomicTextArea - Multiline Text Input Component
+ *
+ * Atomic Design Level: ATOM
+ * Purpose: Multiline text input across all apps
+ */
+
+import React from 'react';
+import { View, TextInput, StyleSheet, ViewStyle } from 'react-native';
+import { useAppDesignTokens } from '../theme';
+import { AtomicText } from './AtomicText';
+
+export interface AtomicTextAreaProps {
+  label?: string;
+  value?: string;
+  onChangeText?: (text: string) => void;
+  placeholder?: string;
+  helperText?: string;
+  errorText?: string;
+  maxLength?: number;
+  numberOfLines?: number;
+  rows?: number;
+  disabled?: boolean;
+  style?: ViewStyle;
+  testID?: string;
+}
+
+export const AtomicTextArea: React.FC<AtomicTextAreaProps> = ({
+  label,
+  value,
+  onChangeText,
+  placeholder,
+  helperText,
+  errorText,
+  maxLength,
+  numberOfLines,
+  rows = 4,
+  disabled = false,
+  style,
+  testID,
+}) => {
+  const lineCount = numberOfLines ?? rows;
+  const tokens = useAppDesignTokens();
+  const hasError = !!errorText;
+
+  return (
+    <View style={[styles.container, style]} testID={testID}>
+      {label && (
+        <AtomicText
+          type="labelMedium"
+          style={[styles.label, { color: tokens.colors.textSecondary }]}
+        >
+          {label}
+        </AtomicText>
+      )}
+      <TextInput
+        value={value}
+        onChangeText={onChangeText}
+        placeholder={placeholder}
+        placeholderTextColor={tokens.colors.textTertiary}
+        maxLength={maxLength}
+        numberOfLines={lineCount}
+        multiline
+        editable={!disabled}
+        textAlignVertical="top"
+        style={[
+          styles.input,
+          {
+            backgroundColor: tokens.colors.surface,
+            borderColor: hasError ? tokens.colors.error : tokens.colors.border,
+            color: tokens.colors.textPrimary,
+            minHeight: lineCount * 24,
+          },
+          disabled && { opacity: 0.5 },
+        ]}
+      />
+      {(helperText || errorText) && (
+        <AtomicText
+          type="bodySmall"
+          style={[
+            styles.helperText,
+            { color: hasError ? tokens.colors.error : tokens.colors.textSecondary },
+          ]}
+        >
+          {errorText || helperText}
+        </AtomicText>
+      )}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    marginBottom: 16,
+  },
+  label: {
+    marginBottom: 8,
+  },
+  input: {
+    borderWidth: 1,
+    borderRadius: 12,
+    padding: 12,
+    fontSize: 16,
+  },
+  helperText: {
+    marginTop: 4,
+  },
+});

package/src/atoms/AtomicTouchable.tsx

@@ -0,0 +1,42 @@
+/**
+ * AtomicTouchable - Touchable Component
+ *
+ * Atomic Design Level: ATOM
+ * Purpose: Touchable wrapper across all apps
+ */
+
+import React from 'react';
+import { TouchableOpacity, ViewStyle, StyleProp } from 'react-native';
+
+export interface AtomicTouchableProps {
+  children: React.ReactNode;
+  onPress?: () => void;
+  onLongPress?: () => void;
+  disabled?: boolean;
+  activeOpacity?: number;
+  style?: StyleProp<ViewStyle>;
+  testID?: string;
+}
+
+export const AtomicTouchable: React.FC<AtomicTouchableProps> = ({
+  children,
+  onPress,
+  onLongPress,
+  disabled = false,
+  activeOpacity = 0.7,
+  style,
+  testID,
+}) => {
+  return (
+    <TouchableOpacity
+      onPress={onPress}
+      onLongPress={onLongPress}
+      disabled={disabled}
+      activeOpacity={activeOpacity}
+      style={style}
+      testID={testID}
+    >
+      {children}
+    </TouchableOpacity>
+  );
+};

package/src/atoms/index.ts

@@ -99,3 +99,12 @@ export {
 
 // Empty State
 export { EmptyState, type EmptyStateProps } from './EmptyState';
+
+// TextArea
+export { AtomicTextArea, type AtomicTextAreaProps } from './AtomicTextArea';
+
+// Switch
+export { AtomicSwitch, type AtomicSwitchProps } from './AtomicSwitch';
+
+// Touchable
+export { AtomicTouchable, type AtomicTouchableProps } from './AtomicTouchable';

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;

package/src/index.ts

@@ -227,6 +227,12 @@ export {
   type SpinnerSize,
   type SpinnerColor,
   type EmptyStateProps,
+  AtomicTextArea,
+  type AtomicTextAreaProps,
+  AtomicSwitch,
+  type AtomicSwitchProps,
+  AtomicTouchable,
+  type AtomicTouchableProps,
 } from './atoms';
 
 // =============================================================================