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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-design-system",
-  "version": "2.5.15",
+  "version": "2.5.16",
   "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/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,105 @@
+/**
+ * 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;
+  disabled?: boolean;
+  style?: ViewStyle;
+  testID?: string;
+}
+
+export const AtomicTextArea: React.FC<AtomicTextAreaProps> = ({
+  label,
+  value,
+  onChangeText,
+  placeholder,
+  helperText,
+  errorText,
+  maxLength,
+  numberOfLines = 4,
+  disabled = false,
+  style,
+  testID,
+}) => {
+  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={numberOfLines}
+        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: numberOfLines * 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/index.ts

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