@umituz/react-native-design-system 1.5.32 → 1.5.34

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-design-system",
-  "version": "1.5.32",
+  "version": "1.5.34",
   "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",
@@ -65,12 +65,14 @@
   "devDependencies": {
     "@eslint/js": "^9.0.0",
     "@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",
     "@types/react": "^18.2.45",
     "@types/react-native": "^0.73.0",
     "@typescript-eslint/eslint-plugin": "^7.0.0",
     "@typescript-eslint/parser": "^7.0.0",
+    "@umituz/react-native-bottom-sheet": "*",
     "@umituz/react-native-icon": "^1.0.1",
     "eslint": "^9.0.0",
     "eslint-plugin-react": "^7.33.0",
@@ -79,6 +81,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-safe-area-context": "^5.6.2",
     "react-native-svg": "^15.0.0",

package/src/presentation/atoms/AtomicDatePicker.tsx

@@ -49,6 +49,7 @@ import DateTimePicker, { DateTimePickerEvent } from '@react-native-community/dat
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { useAppDesignTokens } from '@umituz/react-native-theme';
 import { AtomicIcon, type AtomicIconColor } from './AtomicIcon';
+// @ts-ignore - Peer dependency, types may not be available during typecheck
 import { BottomSheetModal, useBottomSheetModal } from '@umituz/react-native-bottom-sheet';
 import { AtomicButton } from './AtomicButton';
 
@@ -205,7 +206,7 @@ export const AtomicDatePicker: React.FC<AtomicDatePickerProps> = ({
         accessibilityState={{ disabled }}
       >
         <AtomicIcon
-          name="calendar"
+          name="Calendar"
           color={getIconColor()}
           size="md"
         />
@@ -250,7 +251,7 @@ export const AtomicDatePicker: React.FC<AtomicDatePickerProps> = ({
           />
           <View style={styles.buttonContainer}>
             <AtomicButton
-              label="Done"
+              title="Done"
               onPress={handleDone}
               variant="primary"
               style={styles.doneButton}

package/src/presentation/atoms/AtomicInput.tsx

@@ -131,7 +131,14 @@ export const AtomicInput: React.FC<AtomicInputProps> = ({
     },
   };
 
-  const config = sizeConfig[size];
+  const config = sizeConfig[size] ?? sizeConfig.md;
+  
+  // Ensure config is always defined with safe fallbacks
+  const fontSize = config?.fontSize ?? tokens.typography.bodyMedium?.fontSize ?? 16;
+  const iconSize = config?.iconSize ?? 20;
+  const paddingVertical = config?.paddingVertical ?? tokens.spacing?.sm ?? 8;
+  const paddingHorizontal = config?.paddingHorizontal ?? tokens.spacing?.md ?? 12;
+  const minHeight = config?.minHeight ?? 48;
 
   // Get variant styles
   const getVariantStyle = (): ViewStyle => {
@@ -192,10 +199,10 @@ export const AtomicInput: React.FC<AtomicInputProps> = ({
     styles.container,
     getVariantStyle(),
     {
-      paddingTop: config.paddingVertical,
-      paddingBottom: config.paddingVertical,
-      paddingHorizontal: config.paddingHorizontal,
-      minHeight: config.minHeight,
+      paddingTop: paddingVertical,
+      paddingBottom: paddingVertical,
+      paddingHorizontal: paddingHorizontal,
+      minHeight: minHeight,
       justifyContent: 'center',
       opacity: isDisabled ? 0.5 : 1,
     },
@@ -205,13 +212,13 @@ export const AtomicInput: React.FC<AtomicInputProps> = ({
   const textInputStyle: StyleProp<TextStyle> = [
     styles.input,
     {
-      fontSize: config.fontSize,
-      lineHeight: config.fontSize * 1.2, // Tighter lineHeight to prevent text clipping
+      fontSize: fontSize,
+      lineHeight: fontSize * 1.2, // Tighter lineHeight to prevent text clipping
       color: getTextColor(),
       paddingVertical: 0, // Remove vertical padding to prevent clipping
     },
-    leadingIcon ? { paddingLeft: config.iconSize + 8 } : undefined,
-    (trailingIcon || showPasswordToggle) ? { paddingRight: config.iconSize + 8 } : undefined,
+    leadingIcon ? { paddingLeft: iconSize + 8 } : undefined,
+    (trailingIcon || showPasswordToggle) ? { paddingRight: iconSize + 8 } : undefined,
     inputStyle,
   ];
 
@@ -232,7 +239,7 @@ export const AtomicInput: React.FC<AtomicInputProps> = ({
           <View style={styles.leadingIcon}>
             <AtomicIcon
               name={leadingIcon}
-              customSize={config.iconSize}
+              customSize={iconSize}
               customColor={iconColor}
             />
           </View>
@@ -268,7 +275,7 @@ export const AtomicInput: React.FC<AtomicInputProps> = ({
           >
             <AtomicIcon
               name={isPasswordVisible ? "EyeOff" : "Eye"}
-              customSize={config.iconSize}
+              customSize={iconSize}
               customColor={iconColor}
             />
           </Pressable>
@@ -282,7 +289,7 @@ export const AtomicInput: React.FC<AtomicInputProps> = ({
           >
             <AtomicIcon
               name={trailingIcon}
-              customSize={config.iconSize}
+              customSize={iconSize}
               customColor={iconColor}
             />
           </Pressable>

package/src/index.js

@@ -1,100 +0,0 @@
-/**
- * @umituz/react-native-design-system - Public API
- *
- * Universal UI component library for React Native apps
- * Domain-Driven Design (DDD) Architecture
- *
- * This is the SINGLE SOURCE OF TRUTH for all UI components.
- * ALL imports from the design system MUST go through this file.
- *
- * Architecture:
- * - presentation/atoms: Primitive UI components (AtomicButton, AtomicText, etc.)
- * - presentation/molecules: Composite components (SearchBar, ListItem, etc.)
- * - presentation/organisms: Complex patterns (ScreenLayout, AppHeader, FormContainer)
- * - presentation/tokens: Design tokens (colors, typography, spacing, etc.)
- * - presentation/utils: Utility functions and helpers
- *
- * Usage:
- *   import { AtomicButton, AtomicFilter, AtomicTouchable, SearchBar, STATIC_TOKENS } from '@umituz/react-native-design-system';
- */
-// =============================================================================
-// ATOMS - Primitive UI Components
-// =============================================================================
-export { AtomicButton, } from './presentation/atoms/AtomicButton';
-export { AtomicText, } from './presentation/atoms/AtomicText';
-export { AtomicCard, } from './presentation/atoms/AtomicCard';
-export { AtomicInput, } from './presentation/atoms/AtomicInput';
-export { AtomicNumberInput, } from './presentation/atoms/AtomicNumberInput';
-export { AtomicSwitch, } from './presentation/atoms/AtomicSwitch';
-export { AtomicIcon, } from './presentation/atoms/AtomicIcon';
-export { AtomicFormError, } from './presentation/atoms/AtomicFormError';
-export { AtomicDatePicker, } from './presentation/atoms/AtomicDatePicker';
-export { AtomicPicker, } from './presentation/atoms/AtomicPicker';
-export { AtomicTextArea, } from './presentation/atoms/AtomicTextArea';
-export { AtomicBadge, } from './presentation/atoms/AtomicBadge';
-export { AtomicProgress, } from './presentation/atoms/AtomicProgress';
-export { AtomicDivider, } from './presentation/atoms/AtomicDivider';
-export { AtomicFab, getFabVariants, } from './presentation/atoms/AtomicFab';
-export { AtomicFilter, getFilterContainerStyle, getClearAllContainerStyle, getScrollContentContainerStyle, } from './presentation/atoms/AtomicFilter';
-export { AtomicTouchable, TouchablePresets, getOpacityValue, normalizeHitSlop, } from './presentation/atoms/AtomicTouchable';
-export { AtomicSearchBar, } from './presentation/atoms/AtomicSearchBar';
-export { AtomicSort, } from './presentation/atoms/AtomicSort';
-// =============================================================================
-// MOLECULES - Composite Components
-// =============================================================================
-export { FormField, } from './presentation/molecules/FormField';
-export { ListItem, } from './presentation/molecules/ListItem';
-export { SearchBar, } from './presentation/molecules/SearchBar';
-// SettingItem moved to @domains/settings/presentation/components/SettingItem
-// LanguageSwitcher moved to @umituz/react-native-localization
-// Import directly: import { SettingItem } from '@domains/settings/presentation/components/SettingItem';
-export { SectionCard, } from './presentation/molecules/SectionCard';
-export { IconContainer, } from './presentation/molecules/IconContainer';
-export { SectionHeader, } from './presentation/molecules/SectionHeader';
-export { EmptyState, } from './presentation/molecules/EmptyState';
-export { GridContainer, } from './presentation/molecules/GridContainer';
-export { SectionContainer, } from './presentation/molecules/SectionContainer';
-export { ScreenHeader, } from './presentation/molecules/ScreenHeader';
-export { AtomicConfirmationModal, useConfirmationModal, } from './presentation/molecules/AtomicConfirmationModal';
-// =============================================================================
-// ORGANISMS - Complex Patterns
-// =============================================================================
-export { ScreenLayout, } from './presentation/organisms/ScreenLayout';
-export { AppHeader, } from './presentation/organisms/AppHeader';
-export { FormContainer, } from './presentation/organisms/FormContainer';
-// Note: FeedbackModal moved to @domains/feedback
-// Import from feedback domain: import { FeedbackModal } from '@domains/feedback';
-// =============================================================================
-// THEME-RELATED EXPORTS - Re-exported from @umituz/react-native-theme
-// =============================================================================
-// All tokens, colors, and theme utilities come from @umituz/react-native-theme
-// Design system does NOT define any tokens - it only uses them from theme package
-export { 
-// Token factory
-createDesignTokens, STATIC_DESIGN_TOKENS, BASE_TOKENS, STATIC_TOKENS, 
-// Color utilities
-withAlpha, lightColors, darkColors, getColorPalette, } from '@umituz/react-native-theme';
-// Hook for dynamic theme-aware tokens (re-exported from theme package)
-export { useAppDesignTokens } from '@umituz/react-native-theme';
-export { useCommonStyles, } from './presentation/tokens/commonStyles';
-// =============================================================================
-// UTILITIES - Helper Functions
-// =============================================================================
-export { IOS_HIG, ANDROID_MATERIAL, PLATFORM_CONSTANTS, isValidTouchTarget, getMinTouchTarget, } from './presentation/utils/platformConstants';
-// =============================================================================
-// RESPONSIVE UTILITIES - Centralized Responsive Management
-// =============================================================================
-export { useResponsive, useResponsiveSizes, useDeviceType, } from './presentation/hooks/useResponsive';
-export { getScreenDimensions, isSmallPhone, isTablet, getResponsiveLogoSize, getResponsiveInputHeight, getResponsiveHorizontalPadding, getResponsiveBottomPosition, getResponsiveFABPosition, getResponsiveModalMaxHeight, getResponsiveMinModalHeight, getResponsiveIconContainerSize, getResponsiveGridColumns, getResponsiveMaxWidth, getResponsiveFontSize, isLandscape, getKeyboardBehavior, getDeviceType, getMinTouchTargetSize, getSpacingMultiplier, getOnboardingIconMarginTop, getOnboardingIconMarginBottom, getOnboardingTitleMarginBottom, getOnboardingTextPadding, getOnboardingDescriptionMarginTop, DeviceType, } from './presentation/utils/responsive';
-// =============================================================================
-// THEME MANAGEMENT - Global Theme Store
-// =============================================================================
-// Theme management moved to @umituz/react-native-theme
-export { useDesignSystemTheme, } from '@umituz/react-native-theme';
-// =============================================================================
-// ICONS DOMAIN - Universal Icon System
-// =============================================================================
-// Icon components have been moved to @umituz/react-native-icon package.
-// Import directly: import { Icon, IconName, IconSize, IconColor } from '@umituz/react-native-icon';
-// Re-export for backward compatibility (deprecated - use @umituz/react-native-icon directly)
-export { Icon, } from '@umituz/react-native-icon';

package/src/presentation/atoms/AtomicAvatar.js

@@ -1,84 +0,0 @@
-/**
- * AtomicAvatar - Universal Avatar Component
- *
- * Displays user profile images with fallback to initials
- * Theme: {{THEME_NAME}} ({{CATEGORY}} category)
- *
- * Atomic Design Level: ATOM
- * Purpose: User profile image display
- *
- * Usage:
- * - User profile pictures
- * - Contact avatars
- * - Group member avatars
- * - Default user placeholders
- */
-import React from 'react';
-import { View, StyleSheet } from 'react-native';
-import { AtomicImage } from './AtomicImage';
-import { AtomicText } from './AtomicText';
-import { useAppDesignTokens } from '@umituz/react-native-theme';
-// =============================================================================
-// COMPONENT IMPLEMENTATION
-// =============================================================================
-export const AtomicAvatar = ({ source, name, size = 'md', customSize, backgroundColor, textColor, borderRadius, borderWidth = 0, borderColor, style, imageStyle, testID, }) => {
-    const tokens = useAppDesignTokens();
-    const avatarSize = customSize || tokens.avatarSizes[size];
-    const avatarRadius = borderRadius ?? avatarSize / 2;
-    // Generate initials from name
-    const getInitials = (name) => {
-        return name
-            .split(' ')
-            .map(word => word.charAt(0))
-            .join('')
-            .toUpperCase()
-            .slice(0, 2);
-    };
-    // Default colors
-    const defaultBackgroundColor = backgroundColor || tokens.colors.primary;
-    const defaultTextColor = textColor || tokens.colors.onPrimary;
-    const defaultBorderColor = borderColor || tokens.colors.border;
-    const avatarStyle = {
-        width: avatarSize,
-        height: avatarSize,
-        borderRadius: avatarRadius,
-        backgroundColor: defaultBackgroundColor,
-        borderWidth,
-        borderColor: defaultBorderColor,
-        alignItems: 'center',
-        justifyContent: 'center',
-        overflow: 'hidden',
-    };
-    const imageStyleFinal = {
-        width: avatarSize,
-        height: avatarSize,
-        borderRadius: avatarRadius,
-    };
-    // Font size based on avatar size
-    const getFontSize = (size) => {
-        if (size <= 32)
-            return 12;
-        if (size <= 48)
-            return 16;
-        if (size <= 64)
-            return 20;
-        return 24;
-    };
-    return (<View style={[avatarStyle, style]} testID={testID}>
-      {source ? (<AtomicImage source={source} style={StyleSheet.flatten([imageStyleFinal, imageStyle])} resizeMode="cover"/>) : name ? (<AtomicText type="labelLarge" color={defaultTextColor} style={{
-                fontSize: getFontSize(avatarSize),
-                fontWeight: tokens.typography.semibold,
-            }}>
-          {getInitials(name)}
-        </AtomicText>) : (<AtomicText type="labelLarge" color={defaultTextColor} style={{
-                fontSize: getFontSize(avatarSize),
-                fontWeight: tokens.typography.semibold,
-            }}>
-          ?
-        </AtomicText>)}
-    </View>);
-};
-// =============================================================================
-// EXPORTS
-// =============================================================================
-export default AtomicAvatar;

package/src/presentation/atoms/AtomicAvatarGroup.js

@@ -1,82 +0,0 @@
-/**
- * AtomicAvatarGroup - Universal Avatar Group Component
- *
- * Displays multiple avatars in a group with overlap and overflow handling
- * Theme: {{THEME_NAME}} ({{CATEGORY}} category)
- *
- * Atomic Design Level: ATOM
- * Purpose: Multiple avatar display with group behavior
- *
- * Usage:
- * - Team member avatars
- * - Group chat participants
- * - Project collaborators
- * - Event attendees
- * - Social connections
- */
-import React from 'react';
-import { View } from 'react-native';
-import { AtomicAvatar } from './AtomicAvatar';
-import { AtomicText } from './AtomicText';
-import { useAppDesignTokens } from '@umituz/react-native-theme';
-// =============================================================================
-// COMPONENT IMPLEMENTATION
-// =============================================================================
-export const AtomicAvatarGroup = ({ avatars, maxVisible = 3, size = 'md', customSize, spacing = -8, showOverflow = true, overflowBackgroundColor, overflowTextColor, borderWidth = 2, borderColor, style, testID, }) => {
-    const tokens = useAppDesignTokens();
-    // Calculate visible avatars and overflow count
-    const visibleAvatars = avatars.slice(0, maxVisible);
-    const overflowCount = avatars.length - maxVisible;
-    // Size mapping for overflow text
-    const sizeMap = {
-        xs: 10,
-        sm: 12,
-        md: 14,
-        lg: 16,
-        xl: 18,
-        xxl: 20,
-    };
-    const textSize = sizeMap[size];
-    // Default colors for overflow
-    const defaultOverflowBackground = overflowBackgroundColor || tokens.colors.surfaceVariant;
-    const defaultOverflowText = overflowTextColor || tokens.colors.textPrimary;
-    const containerStyle = {
-        flexDirection: 'row',
-        alignItems: 'center',
-    };
-    const avatarStyle = {
-        marginLeft: spacing,
-        borderWidth,
-        borderColor: borderColor || tokens.colors.surface,
-    };
-    return (<View style={[containerStyle, style]} testID={testID}>
-      {visibleAvatars.map((avatar, index) => (<AtomicAvatar key={avatar.id} source={avatar.source} name={avatar.name} size={size} customSize={customSize} backgroundColor={avatar.backgroundColor} textColor={avatar.textColor} borderWidth={borderWidth} borderColor={borderColor} style={[
-                avatarStyle,
-                ...(index === 0 ? [{ marginLeft: 0 }] : []), // First avatar has no left margin
-            ]}/>))}
-      {showOverflow && overflowCount > 0 && (<View style={[
-                {
-                    alignItems: 'center',
-                    justifyContent: 'center',
-                    width: customSize || 40,
-                    height: customSize || 40,
-                    borderRadius: (customSize || 40) / 2,
-                    backgroundColor: defaultOverflowBackground,
-                    borderWidth,
-                    borderColor: borderColor || tokens.colors.surface,
-                    marginLeft: spacing,
-                },
-            ]}>
-          <AtomicText type="labelMedium" color={defaultOverflowText} style={{
-                fontWeight: tokens.typography.semibold,
-                fontSize: textSize,
-            }}>
-            +{overflowCount}
-          </AtomicText>
-        </View>)}
-    </View>);
-};
-// =============================================================================
-// EXPORTS
-// =============================================================================
-export default AtomicAvatarGroup;

package/src/presentation/atoms/AtomicBadge.js

@@ -1,167 +0,0 @@
-/**
- * AtomicBadge - Universal Badge Component
- *
- * Provides consistent badge/notification count display
- * Theme: {{THEME_NAME}} ({{CATEGORY}} category)
- *
- * Atomic Design Level: ATOM
- * Purpose: Display counts, notifications, status indicators
- *
- * Usage:
- * - Notification counts
- * - Cart item counts
- * - Status indicators
- * - Achievement badges
- */
-import React from 'react';
-import { View, StyleSheet } from 'react-native';
-import { AtomicText } from './AtomicText';
-import { useAppDesignTokens } from '@umituz/react-native-theme';
-// =============================================================================
-// SIZE CONFIGURATION
-// =============================================================================
-const getSizeConfig = (tokens) => ({
-    xs: {
-        minHeight: tokens.spacing.sm,
-        paddingHorizontal: tokens.spacing.xs,
-        fontSize: tokens.typography.labelSmall.fontSize,
-        borderRadius: tokens.borders.radius.sm,
-    },
-    sm: {
-        minHeight: tokens.spacing.md,
-        paddingHorizontal: tokens.spacing.sm,
-        fontSize: tokens.typography.bodySmall.fontSize,
-        borderRadius: tokens.borders.radius.md,
-    },
-    md: {
-        minHeight: tokens.spacing.lg,
-        paddingHorizontal: tokens.spacing.sm,
-        fontSize: tokens.typography.bodyMedium.fontSize,
-        borderRadius: tokens.borders.radius.md,
-    },
-    lg: {
-        minHeight: tokens.spacing.xl,
-        paddingHorizontal: tokens.spacing.md,
-        fontSize: tokens.typography.bodyLarge.fontSize,
-        borderRadius: tokens.borders.radius.lg,
-    },
-});
-// =============================================================================
-// COMPONENT IMPLEMENTATION
-// =============================================================================
-export const AtomicBadge = ({ children, size = 'md', variant = 'primary', shape = 'circle', max, showZero = false, style, textStyle, minWidth, maxWidth, }) => {
-    const tokens = useAppDesignTokens();
-    const styles = getStyles(tokens);
-    const sizeConfig = getSizeConfig(tokens)[size];
-    const colors = getVariantColors(tokens, variant);
-    const borderRadius = getBorderRadius(shape, sizeConfig.borderRadius, tokens);
-    // Handle max value display
-    const displayValue = React.useMemo(() => {
-        if (typeof children === 'number') {
-            if (max && children > max) {
-                return `${max}+`;
-            }
-            return children.toString();
-        }
-        return children;
-    }, [children, max]);
-    // Don't render if count is 0 and showZero is false
-    if (typeof children === 'number' && children === 0 && !showZero) {
-        return null;
-    }
-    const containerStyle = [
-        styles.container,
-        {
-            minHeight: sizeConfig.minHeight,
-            paddingHorizontal: sizeConfig.paddingHorizontal,
-            borderRadius,
-            backgroundColor: colors.background,
-            minWidth: minWidth || sizeConfig.minHeight,
-            maxWidth,
-        },
-        style,
-    ];
-    const textStyleFinal = StyleSheet.flatten([
-        styles.text,
-        {
-            fontSize: sizeConfig.fontSize,
-        },
-        textStyle,
-    ]);
-    return (<View style={containerStyle}>
-      <AtomicText type="bodySmall" color={colors.text} style={textStyleFinal} numberOfLines={1}>
-        {displayValue}
-      </AtomicText>
-    </View>);
-};
-// =============================================================================
-// HELPER FUNCTIONS
-// =============================================================================
-const getVariantColors = (tokens, variant) => {
-    switch (variant) {
-        case 'primary':
-            return {
-                background: tokens.colors.primary,
-                text: tokens.colors.textInverse,
-            };
-        case 'secondary':
-            return {
-                background: tokens.colors.secondary,
-                text: tokens.colors.textInverse,
-            };
-        case 'success':
-            return {
-                background: tokens.colors.success,
-                text: tokens.colors.textInverse,
-            };
-        case 'warning':
-            return {
-                background: tokens.colors.warning,
-                text: tokens.colors.textInverse,
-            };
-        case 'error':
-            return {
-                background: tokens.colors.error,
-                text: tokens.colors.textInverse,
-            };
-        case 'info':
-            return {
-                background: tokens.colors.info,
-                text: tokens.colors.textInverse,
-            };
-        default:
-            return {
-                background: tokens.colors.primary,
-                text: tokens.colors.textInverse,
-            };
-    }
-};
-const getBorderRadius = (shape, defaultRadius, tokens) => {
-    switch (shape) {
-        case 'circle':
-            return tokens.borders.radius.full; // Very large radius for circle
-        case 'square':
-            return tokens.borders.radius.sm;
-        case 'rounded':
-        default:
-            return defaultRadius;
-    }
-};
-// =============================================================================
-// STYLES
-// =============================================================================
-const getStyles = (tokens) => StyleSheet.create({
-    container: {
-        justifyContent: 'center',
-        alignItems: 'center',
-        alignSelf: 'flex-start',
-    },
-    text: {
-        fontWeight: tokens.typography.semibold,
-        textAlign: 'center',
-    },
-});
-// =============================================================================
-// EXPORTS
-// =============================================================================
-export default AtomicBadge;