@umituz/react-native-design-system 1.5.29 → 1.5.31

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-design-system",
-  "version": "1.5.29",
+  "version": "1.5.31",
   "description": "Universal design system for React Native apps - Domain-Driven Design architecture with Material Design 3 components",
   "main": "./src/index.ts",
   "types": "./dist/index.d.ts",
@@ -37,13 +37,16 @@
   },
   "peerDependencies": {
     "@expo/vector-icons": ">=14.0.0",
+    "@gorhom/bottom-sheet": ">=5.0.0",
     "@react-native-community/datetimepicker": "^8.5.0",
     "@react-navigation/native": "^6.0.0",
+    "@umituz/react-native-bottom-sheet": "*",
     "@umituz/react-native-icon": "*",
     "expo-linear-gradient": "^15.0.7",
     "lucide-react-native": ">=0.468.0",
     "react": ">=18.2.0 || ^19.0.0",
     "react-native": ">=0.74.0",
+    "react-native-gesture-handler": ">=2.16.0",
     "react-native-reanimated": "~3.10.1",
     "react-native-svg": ">=13.0.0",
     "zustand": "^5.0.2"
@@ -93,6 +96,7 @@
   ],
   "dependencies": {
     "@react-native-async-storage/async-storage": "^2.2.0",
-    "@umituz/react-native-theme": "^1.2.5"
+    "@umituz/react-native-theme": "^1.2.5",
+    "@umituz/react-native-typography": "^1.1.0"
   }
 }

package/src/index.ts

@@ -34,6 +34,12 @@ export {
   type AtomicTextProps,
 } from './presentation/atoms/AtomicText';
 
+// Re-export typography types for convenience (from @umituz/react-native-typography)
+export type {
+  TextStyleVariant,
+  ColorVariant,
+} from '@umituz/react-native-typography';
+
 export {
   AtomicCard,
   type AtomicCardProps,

package/src/presentation/atoms/AtomicDatePicker.tsx

@@ -30,26 +30,27 @@
  * ```
  *
  * Platform Behavior:
- * - iOS: Opens modal with spinner wheel, requires "Done" button
- * - Android: Opens native dialog, auto-closes on selection
+ * - Opens bottom sheet from bottom with spinner wheel
+ * - Requires "Done" button to confirm selection
+ * - Can be dismissed by swiping down or tapping backdrop
  *
  * @module AtomicDatePicker
  */
 
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import {
   View,
   Text,
   TouchableOpacity,
   StyleSheet,
-  Modal,
   useWindowDimensions,
 } from 'react-native';
 import DateTimePicker, { DateTimePickerEvent } from '@react-native-community/datetimepicker';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { useAppDesignTokens } from '@umituz/react-native-theme';
-import { useResponsive } from '../hooks/useResponsive';
 import { AtomicIcon, type AtomicIconColor } from './AtomicIcon';
+import { BottomSheet, useBottomSheet } from '@umituz/react-native-bottom-sheet';
+import { AtomicButton } from './AtomicButton';
 
 /**
  * Props for AtomicDatePicker component
@@ -102,28 +103,42 @@ export const AtomicDatePicker: React.FC<AtomicDatePickerProps> = ({
   const tokens = useAppDesignTokens();
   const { height } = useWindowDimensions();
   const insets = useSafeAreaInsets();
-  const { isTabletDevice } = useResponsive();
-  const [show, setShow] = useState(false);
+  const { sheetRef, open, close } = useBottomSheet();
+  const [tempDate, setTempDate] = useState<Date>(value || new Date());
+
+  // Update tempDate when value prop changes
+  useEffect(() => {
+    if (value) {
+      setTempDate(value);
+    }
+  }, [value]);
 
   /**
-   * Handle date/time change
-   * Universal handler that works across all platforms
-   * Note: event.type can be 'set', 'dismissed', or 'neutralButtonPressed'
+   * Handle date/time change in picker
+   * Updates temporary date state (not final until Done is pressed)
    */
   const handleChange = (event: DateTimePickerEvent, selectedDate?: Date) => {
-    // Close picker when user confirms or dismisses
-    // iOS: Stays open until "Done" button (handled separately)
-    // Android/Web: Auto-closes on selection
-    if (event.type === 'set' || event.type === 'dismissed') {
-      setShow(false);
-    }
-
-    // Update value only if date was selected (not dismissed)
     if (event.type === 'set' && selectedDate) {
-      onChange(selectedDate);
+      setTempDate(selectedDate);
     }
   };
 
+  /**
+   * Handle Done button - apply selected date and close sheet
+   */
+  const handleDone = () => {
+    onChange(tempDate);
+    close();
+  };
+
+  /**
+   * Handle open - reset temp date to current value
+   */
+  const handleOpen = () => {
+    setTempDate(value || new Date());
+    open();
+  };
+
   /**
    * Format date based on mode
    * Uses native Date formatting (locale-aware)
@@ -182,7 +197,7 @@ export const AtomicDatePicker: React.FC<AtomicDatePickerProps> = ({
           error ? styles.buttonError : undefined,
           disabled ? styles.buttonDisabled : undefined,
         ]}
-        onPress={() => !disabled && setShow(true)}
+        onPress={handleOpen}
         disabled={disabled}
         testID={testID ? `${testID}-button` : undefined}
         accessibilityLabel={label || placeholder}
@@ -211,49 +226,39 @@ export const AtomicDatePicker: React.FC<AtomicDatePickerProps> = ({
         </Text>
       )}
 
-      {/* Universal DatePicker - Works across iOS, Android, Web */}
-      {show && (
-        <Modal
-          transparent
-          animationType={isTabletDevice ? 'fade' : 'slide'}
-          visible={show}
-          onRequestClose={() => setShow(false)}
-        >
-          <TouchableOpacity
-            style={styles.modalOverlay}
-            activeOpacity={1}
-            onPress={() => setShow(false)}
-            accessibilityLabel="Close date picker"
-            accessibilityRole="button"
-          >
-            <View
-              style={styles.pickerContainer}
-              onStartShouldSetResponder={() => true}
-            >
-              <DateTimePicker
-                value={value || new Date()}
-                mode={mode}
-                display="spinner"
-                onChange={handleChange}
-                minimumDate={minimumDate}
-                maximumDate={maximumDate}
-                testID={testID ? `${testID}-picker` : undefined}
-              />
-              <View style={styles.buttonContainer}>
-                <TouchableOpacity
-                  style={styles.doneButton}
-                  onPress={() => setShow(false)}
-                  testID={testID ? `${testID}-done` : undefined}
-                  accessibilityLabel="Done"
-                  accessibilityRole="button"
-                >
-                  <Text style={styles.doneText}>Done</Text>
-                </TouchableOpacity>
-              </View>
-            </View>
-          </TouchableOpacity>
-        </Modal>
-      )}
+      {/* Bottom Sheet DatePicker */}
+      <BottomSheet
+        ref={sheetRef}
+        preset="medium"
+        enableBackdrop
+        enablePanDownToClose
+        enableHandleIndicator
+        onClose={() => {
+          // Reset temp date when closed without saving
+          setTempDate(value || new Date());
+        }}
+      >
+        <View style={styles.bottomSheetContent}>
+          <DateTimePicker
+            value={tempDate}
+            mode={mode}
+            display="spinner"
+            onChange={handleChange}
+            minimumDate={minimumDate}
+            maximumDate={maximumDate}
+            testID={testID ? `${testID}-picker` : undefined}
+          />
+          <View style={styles.buttonContainer}>
+            <AtomicButton
+              label="Done"
+              onPress={handleDone}
+              variant="primary"
+              style={styles.doneButton}
+              testID={testID ? `${testID}-done` : undefined}
+            />
+          </View>
+        </View>
+      </BottomSheet>
     </View>
   );
 };
@@ -316,16 +321,9 @@ const getStyles = (
       marginTop: tokens.spacing.xs,
       marginLeft: tokens.spacing.xs,
     },
-    modalOverlay: {
-      flex: 1,
-      backgroundColor: 'rgba(0, 0, 0, 0.5)',
-      justifyContent: 'flex-start',
-    },
-    pickerContainer: {
-      backgroundColor: tokens.colors.surface,
-      borderTopLeftRadius: tokens.borders.radius.xl,
-      borderTopRightRadius: tokens.borders.radius.xl,
-      paddingTop: tokens.spacing.lg,
+    bottomSheetContent: {
+      paddingHorizontal: tokens.spacing.lg,
+      paddingTop: tokens.spacing.md,
       paddingBottom: Math.max(
         insets.bottom + tokens.spacing.md,
         tokens.spacing.xl,
@@ -333,22 +331,11 @@ const getStyles = (
     },
     buttonContainer: {
       alignItems: 'center',
-      marginTop: tokens.spacing.md,
-      paddingHorizontal: tokens.spacing.lg,
+      marginTop: tokens.spacing.lg,
+      paddingHorizontal: tokens.spacing.md,
     },
     doneButton: {
-      backgroundColor: tokens.colors.primary,
-      paddingHorizontal: tokens.spacing.xl,
-      paddingVertical: tokens.spacing.sm,
-      borderRadius: tokens.borders.radius.lg,
       minWidth: buttonMinWidth,
-      alignItems: 'center',
-      minHeight: 44, // Apple HIG minimum touch target
-    },
-    doneText: {
-      color: tokens.colors.onPrimary,
-      fontSize: tokens.typography.bodyLarge.fontSize,
-      fontWeight: tokens.typography.semibold,
     },
   });
 };

package/src/presentation/atoms/AtomicText.js

@@ -1,53 +1,17 @@
 import React from 'react';
 import { Text } from 'react-native';
 import { useAppDesignTokens } from '@umituz/react-native-theme';
+import { getTextColor } from '@umituz/react-native-typography';
 export const AtomicText = ({ children, type = 'bodyMedium', color, numberOfLines, ellipsizeMode, textAlign, style, testID, }) => {
     const tokens = useAppDesignTokens();
     // Get typography style from tokens
     const typographyStyle = tokens.typography[type];
-    // Get color from tokens or use custom color
-    const getTextColor = () => {
-        if (!color) {
-            return tokens.colors.textPrimary;
-        }
-        // Material Design 3 text color mapping
-        const colorMap = {
-            // General text colors (Material Design 3)
-            textPrimary: tokens.colors.textPrimary,
-            textSecondary: tokens.colors.textSecondary,
-            textTertiary: tokens.colors.textTertiary,
-            textDisabled: tokens.colors.textDisabled,
-            textInverse: tokens.colors.textInverse,
-            // Text on surfaces (Material Design 3)
-            onSurface: tokens.colors.onSurface,
-            onBackground: tokens.colors.onBackground,
-            // Text on colored backgrounds (Material Design 3)
-            onPrimary: tokens.colors.onPrimary,
-            onSecondary: tokens.colors.onSecondary,
-            onSuccess: tokens.colors.onSuccess,
-            onError: tokens.colors.onError,
-            onWarning: tokens.colors.onWarning,
-            onInfo: tokens.colors.onInfo,
-            // Semantic colors (can be used as text)
-            success: tokens.colors.success,
-            error: tokens.colors.error,
-            warning: tokens.colors.warning,
-            info: tokens.colors.info,
-            // Legacy support (deprecated - maps to new names)
-            primary: tokens.colors.textPrimary, // Legacy: use textPrimary or onPrimary
-            secondary: tokens.colors.textSecondary, // Legacy: use textSecondary or onSecondary
-            tertiary: tokens.colors.textTertiary, // Legacy: use textTertiary
-            disabled: tokens.colors.textDisabled, // Legacy: use textDisabled
-            inverse: tokens.colors.textInverse, // Legacy: use textInverse
-            // Legacy: surfaceVariant is a background color, but used as text - map to textSecondary
-            surfaceVariant: tokens.colors.textSecondary, // Legacy: use textSecondary instead
-        };
-        return colorMap[color] || color;
-    };
+    // Get color from tokens or use custom color using utility function
+    const resolvedColor = getTextColor(color, tokens);
     const textStyle = [
         typographyStyle,
         {
-            color: getTextColor(),
+            color: resolvedColor,
             ...(textAlign && { textAlign }),
         },
         style,

package/src/presentation/atoms/AtomicText.tsx

@@ -1,62 +1,8 @@
 import React from 'react';
 import { Text, StyleProp, TextStyle } from 'react-native';
 import { useAppDesignTokens } from '@umituz/react-native-theme';
-
-export type TextStyleVariant =
-  | 'displayLarge' | 'displayMedium' | 'displaySmall'
-  | 'headlineLarge' | 'headlineMedium' | 'headlineSmall'
-  | 'titleLarge' | 'titleMedium' | 'titleSmall'
-  | 'bodyLarge' | 'bodyMedium' | 'bodySmall'
-  | 'labelLarge' | 'labelMedium' | 'labelSmall';
-
-/**
- * Material Design 3 Text Color Variants
- * 
- * TEXT COLORS (for text on surfaces):
- * - textPrimary, textSecondary, textTertiary: General text colors
- * - onSurface, onBackground: Text on surface/background
- * 
- * ON COLORS (for text on colored backgrounds):
- * - onPrimary, onSecondary: Text on primary/secondary colored backgrounds
- * - onSuccess, onError, onWarning, onInfo: Text on semantic colored backgrounds
- * 
- * SEMANTIC COLORS (can be used as text colors):
- * - success, error, warning, info: Semantic colors (can be text or background)
- * 
- * NOTE: 'primary' and 'secondary' are BACKGROUND colors, not text colors.
- * Use 'onPrimary'/'onSecondary' for text on colored backgrounds, or
- * 'textPrimary'/'textSecondary' for general text.
- */
-export type ColorVariant =
-  // General text colors (Material Design 3)
-  | 'textPrimary'
-  | 'textSecondary'
-  | 'textTertiary'
-  | 'textDisabled'
-  | 'textInverse'
-  // Text on surfaces (Material Design 3)
-  | 'onSurface'
-  | 'onBackground'
-  // Text on colored backgrounds (Material Design 3)
-  | 'onPrimary'
-  | 'onSecondary'
-  | 'onSuccess'
-  | 'onError'
-  | 'onWarning'
-  | 'onInfo'
-  // Semantic colors (can be used as text)
-  | 'success'
-  | 'error'
-  | 'warning'
-  | 'info'
-  // Legacy support (deprecated - use textPrimary/textSecondary instead)
-  | 'primary'
-  | 'secondary'
-  | 'tertiary'
-  | 'disabled'
-  | 'inverse'
-  // Legacy: surfaceVariant is a background color, maps to textSecondary
-  | 'surfaceVariant';
+import type { TextStyleVariant, ColorVariant } from '@umituz/react-native-typography';
+import { getTextColor } from '@umituz/react-native-typography';
 
 export interface AtomicTextProps {
   children: React.ReactNode;
@@ -84,56 +30,13 @@ export const AtomicText: React.FC<AtomicTextProps> = ({
   // Get typography style from tokens
   const typographyStyle = tokens.typography[type];
 
-  // Get color from tokens or use custom color
-  const getTextColor = (): string => {
-    if (!color) {
-      return tokens.colors.textPrimary;
-    }
-
-    // Material Design 3 text color mapping
-    const colorMap: Partial<Record<ColorVariant, string>> = {
-      // General text colors (Material Design 3)
-      textPrimary: tokens.colors.textPrimary,
-      textSecondary: tokens.colors.textSecondary,
-      textTertiary: tokens.colors.textTertiary,
-      textDisabled: tokens.colors.textDisabled,
-      textInverse: tokens.colors.textInverse,
-      
-      // Text on surfaces (Material Design 3)
-      onSurface: tokens.colors.onSurface,
-      onBackground: tokens.colors.onBackground,
-      
-      // Text on colored backgrounds (Material Design 3)
-      onPrimary: tokens.colors.onPrimary,
-      onSecondary: tokens.colors.onSecondary,
-      onSuccess: tokens.colors.onSuccess,
-      onError: tokens.colors.onError,
-      onWarning: tokens.colors.onWarning,
-      onInfo: tokens.colors.onInfo,
-      
-      // Semantic colors (can be used as text)
-      success: tokens.colors.success,
-      error: tokens.colors.error,
-      warning: tokens.colors.warning,
-      info: tokens.colors.info,
-      
-      // Legacy support (deprecated - maps to new names)
-      primary: tokens.colors.textPrimary, // Legacy: use textPrimary or onPrimary
-      secondary: tokens.colors.textSecondary, // Legacy: use textSecondary or onSecondary
-      tertiary: tokens.colors.textTertiary, // Legacy: use textTertiary
-      disabled: tokens.colors.textDisabled, // Legacy: use textDisabled
-      inverse: tokens.colors.textInverse, // Legacy: use textInverse
-      // Legacy: surfaceVariant is a background color, but used as text - map to textSecondary
-      surfaceVariant: tokens.colors.textSecondary, // Legacy: use textSecondary instead
-    };
-
-    return colorMap[color as ColorVariant] || color;
-  };
+  // Get color from tokens or use custom color using utility function
+  const resolvedColor = getTextColor(color, tokens);
 
   const textStyle: StyleProp<TextStyle> = [
     typographyStyle,
     { 
-      color: getTextColor(),
+      color: resolvedColor,
       ...(textAlign && { textAlign }),
     },
     style,