@umituz/react-native-design-system 1.5.36 → 1.5.38

package/README.md

@@ -133,10 +133,10 @@ responsive.horizontalPadding
 
 ## 🌓 Theme Integration
 
-This package works seamlessly with `@umituz/react-native-theme`:
+This package works seamlessly with `@umituz/react-native-design-system-theme`:
 
 ```typescript
-import { ThemeProvider } from '@umituz/react-native-theme';
+import { ThemeProvider } from '@umituz/react-native-design-system-theme';
 import { ScreenLayout } from '@umituz/react-native-design-system';
 
 const App = () => (

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-design-system",
-  "version": "1.5.36",
+  "version": "1.5.38",
   "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",
@@ -41,7 +41,6 @@
     "@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",
@@ -73,7 +72,6 @@
     "@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",
     "eslint-plugin-react-hooks": "^4.6.0",
@@ -99,7 +97,11 @@
   ],
   "dependencies": {
     "@react-native-async-storage/async-storage": "^2.2.0",
-    "@umituz/react-native-theme": "^1.2.5",
-    "@umituz/react-native-typography": "^1.1.0"
+    "@umituz/react-native-design-system-atoms": "latest",
+    "@umituz/react-native-design-system-molecules": "latest",
+    "@umituz/react-native-design-system-organisms": "latest",
+    "@umituz/react-native-design-system-responsive": "latest",
+    "@umituz/react-native-design-system-theme": "latest",
+    "@umituz/react-native-design-system-typography": "latest"
   }
 }

package/src/index.ts

@@ -8,9 +8,9 @@
  * 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)
+ * - @umituz/react-native-design-system-atoms: Primitive UI components (AtomicButton, AtomicText, etc.)
+ * - @umituz/react-native-design-system-molecules: Composite components (SearchBar, ListItem, etc.)
+ * - @umituz/react-native-design-system-organisms: Complex patterns (ScreenLayout, AppHeader, FormContainer)
  * - presentation/tokens: Design tokens (colors, typography, spacing, etc.)
  * - presentation/utils: Utility functions and helpers
  *
@@ -20,221 +20,38 @@
 
 // =============================================================================
 // ATOMS - Primitive UI Components
+// Re-exported from @umituz/react-native-design-system-atoms
 // =============================================================================
 
-export {
-  AtomicButton,
-  type AtomicButtonProps,
-  type ButtonVariant,
-  type ButtonSize,
-} from './presentation/atoms/AtomicButton';
-
-export {
-  AtomicText,
-  type AtomicTextProps,
-} from './presentation/atoms/AtomicText';
+export * from '@umituz/react-native-design-system-atoms';
 
-// Re-export typography types for convenience (from @umituz/react-native-typography)
+// Re-export typography types for convenience (from @umituz/react-native-design-system-typography)
 export type {
   TextStyleVariant,
   ColorVariant,
-} from '@umituz/react-native-typography';
-
-export {
-  AtomicCard,
-  type AtomicCardProps,
-  type AtomicCardVariant,
-  type AtomicCardPadding,
-} from './presentation/atoms/AtomicCard';
-
-export {
-  AtomicInput,
-  type AtomicInputProps,
-  type AtomicInputVariant,
-  type AtomicInputState,
-  type AtomicInputSize,
-} from './presentation/atoms/AtomicInput';
-
-export {
-  AtomicNumberInput,
-  type AtomicNumberInputProps,
-} from './presentation/atoms/AtomicNumberInput';
-
-export {
-  AtomicSwitch,
-  type AtomicSwitchProps,
-} from './presentation/atoms/AtomicSwitch';
-
-export {
-  AtomicIcon,
-  type AtomicIconProps,
-  type AtomicIconSize,
-  type AtomicIconColor,
-  type AtomicIconName,
-} from './presentation/atoms/AtomicIcon';
-
-export {
-  AtomicFormError,
-  type AtomicFormErrorProps,
-} from './presentation/atoms/AtomicFormError';
-
-export {
-  AtomicDatePicker,
-  type AtomicDatePickerProps,
-} from './presentation/atoms/AtomicDatePicker';
-
-export {
-  AtomicPicker,
-  type AtomicPickerProps,
-  type PickerOption,
-  type PickerSize,
-} from './presentation/atoms/AtomicPicker';
-
-export {
-  AtomicTextArea,
-  type AtomicTextAreaProps,
-} from './presentation/atoms/AtomicTextArea';
-
-export {
-  AtomicBadge,
-  type AtomicBadgeProps,
-} from './presentation/atoms/AtomicBadge';
-
-export {
-  AtomicProgress,
-  type AtomicProgressProps,
-} from './presentation/atoms/AtomicProgress';
-
-export {
-  AtomicDivider,
-  type AtomicDividerProps,
-} from './presentation/atoms/AtomicDivider';
-
-export {
-  AtomicFab,
-  type AtomicFabProps,
-  type FabSize,
-  type FabVariant,
-  getFabVariants,
-} from './presentation/atoms/AtomicFab';
-
-export {
-  AtomicFilter,
-  type AtomicFilterProps,
-  type FilterOption,
-  getFilterContainerStyle,
-  getClearAllContainerStyle,
-  getScrollContentContainerStyle,
-} from './presentation/atoms/AtomicFilter';
-
-export {
-  AtomicTouchable,
-  type AtomicTouchableProps,
-  type TouchableFeedback,
-  type FeedbackStrength,
-  type HitSlop,
-  TouchablePresets,
-  getOpacityValue,
-  normalizeHitSlop,
-} from './presentation/atoms/AtomicTouchable';
-
-export {
-  AtomicSearchBar,
-  type AtomicSearchBarProps,
-} from './presentation/atoms/AtomicSearchBar';
-
-export {
-  AtomicSort,
-  type AtomicSortProps,
-  type SortOption,
-  type SortDirection,
-} from './presentation/atoms/AtomicSort';
+} from '@umituz/react-native-design-system-typography';
 
 // =============================================================================
 // MOLECULES - Composite Components
+// Re-exported from @umituz/react-native-design-system-molecules
 // =============================================================================
 
-export {
-  FormField,
-  type FormFieldProps,
-} from './presentation/molecules/FormField';
-
-export {
-  ListItem,
-  type ListItemProps,
-} from './presentation/molecules/ListItem';
-
-export {
-  SearchBar,
-  type SearchBarProps,
-} 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,
-  type ScreenHeaderProps,
-} from './presentation/molecules/ScreenHeader';
-
-export {
-  AtomicConfirmationModal,
-  useConfirmationModal,
-  type AtomicConfirmationModalProps,
-  type ConfirmationModalVariant,
-} from './presentation/molecules/AtomicConfirmationModal';
+export * from '@umituz/react-native-design-system-molecules';
 
 // =============================================================================
 // ORGANISMS - Complex Patterns
+// Re-exported from @umituz/react-native-design-system-organisms
 // =============================================================================
 
-export {
-  ScreenLayout,
-  type ScreenLayoutProps,
-} from './presentation/organisms/ScreenLayout';
-
-export {
-  AppHeader,
-  type AppHeaderProps,
-} from './presentation/organisms/AppHeader';
-
-export {
-  FormContainer,
-  type FormContainerProps,
-} from './presentation/organisms/FormContainer';
+export * from '@umituz/react-native-design-system-organisms';
 
 // 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
+// THEME-RELATED EXPORTS - Re-exported from @umituz/react-native-design-system-theme
 // =============================================================================
-// All tokens, colors, and theme utilities come from @umituz/react-native-theme
+// All tokens, colors, and theme utilities come from @umituz/react-native-design-system-theme
 // Design system does NOT define any tokens - it only uses them from theme package
 
 export {
@@ -258,17 +75,18 @@ export {
   type Spacing,
   type Typography,
   type Borders,
-} from '@umituz/react-native-theme';
+} from '@umituz/react-native-design-system-theme';
 
 // Hook for dynamic theme-aware tokens (re-exported from theme package)
-export { useAppDesignTokens } from '@umituz/react-native-theme';
+export { useAppDesignTokens } from '@umituz/react-native-design-system-theme';
 
 export {
   useCommonStyles,
 } from './presentation/tokens/commonStyles';
 
 // =============================================================================
-// UTILITIES - Helper Functions
+// UTILITIES - Helper Functions & Responsive Utilities
+// Re-exported from @umituz/react-native-design-system-responsive
 // =============================================================================
 
 export {
@@ -277,20 +95,10 @@ export {
   PLATFORM_CONSTANTS,
   isValidTouchTarget,
   getMinTouchTarget,
-} from './presentation/utils/platformConstants';
-
-// =============================================================================
-// RESPONSIVE UTILITIES - Centralized Responsive Management
-// =============================================================================
-
-export {
   useResponsive,
   useResponsiveSizes,
   useDeviceType,
   type UseResponsiveReturn,
-} from './presentation/hooks/useResponsive';
-
-export {
   getScreenDimensions,
   isSmallPhone,
   isTablet,
@@ -316,28 +124,28 @@ export {
   getOnboardingTextPadding,
   getOnboardingDescriptionMarginTop,
   DeviceType,
-} from './presentation/utils/responsive';
+} from '@umituz/react-native-design-system-responsive';
 
 // =============================================================================
 // THEME MANAGEMENT - Global Theme Store
 // =============================================================================
 
-// Theme management moved to @umituz/react-native-theme
+// Theme management moved to @umituz/react-native-design-system-theme
 export {
   useDesignSystemTheme,
-} from '@umituz/react-native-theme';
+} from '@umituz/react-native-design-system-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';
+// Icon components are now part of @umituz/react-native-design-system-atoms
+// Import directly: import { AtomicIcon, IconName, IconSize, IconColor } from '@umituz/react-native-design-system-atoms';
 
-// Re-export for backward compatibility (deprecated - use @umituz/react-native-icon directly)
+// Re-export for backward compatibility
 export {
-  Icon,
-  type IconProps,
-  type IconSize,
-  type IconColor,
-  type IconName,
-} from '@umituz/react-native-icon';
+  AtomicIcon as Icon,
+  type AtomicIconProps as IconProps,
+  type AtomicIconSize as IconSize,
+  type AtomicIconColor as IconColor,
+  type AtomicIconName as IconName,
+} from '@umituz/react-native-design-system-atoms';

package/src/presentation/organisms/AppHeader.tsx

@@ -10,11 +10,9 @@
 
 import React from 'react';
 import { View, ViewStyle, SafeAreaView } from 'react-native';
-import { useAppDesignTokens } from '@umituz/react-native-theme';
-import { AtomicText } from '../atoms/AtomicText';
-import { AtomicButton } from '../atoms/AtomicButton';
-import { AtomicIcon } from '../atoms/AtomicIcon';
-import type { IconName } from '@umituz/react-native-icon';
+import { useAppDesignTokens } from '@umituz/react-native-design-system-theme';
+import { AtomicText, AtomicButton, AtomicIcon } from '@umituz/react-native-design-system-atoms';
+import type { IconName } from '@umituz/react-native-design-system-atoms';
 
 // =============================================================================
 // TYPE DEFINITIONS

package/src/presentation/tokens/commonStyles.ts

@@ -16,7 +16,7 @@
  */
 
 import { ViewStyle, TextStyle } from 'react-native';
-import { useAppDesignTokens } from '@umituz/react-native-theme';
+import { useAppDesignTokens } from '@umituz/react-native-design-system-theme';
 
 /**
  * Hook to get common styles with dynamic theme support

package/src/presentation/atoms/AtomicAvatar.tsx

@@ -1,157 +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, ViewStyle, ImageStyle } from 'react-native';
-import { AtomicImage } from './AtomicImage';
-import { AtomicText } from './AtomicText';
-import { useAppDesignTokens } from '@umituz/react-native-theme';
-
-// =============================================================================
-// TYPE DEFINITIONS
-// =============================================================================
-
-export interface AtomicAvatarProps {
-  /** Image source (URI or require) */
-  source?: { uri: string } | number;
-  /** User's name for fallback initials */
-  name?: string;
-  /** Size of the avatar */
-  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl';
-  /** Custom size in pixels */
-  customSize?: number;
-  /** Background color for fallback */
-  backgroundColor?: string;
-  /** Text color for initials */
-  textColor?: string;
-  /** Border radius (default: circular) */
-  borderRadius?: number;
-  /** Border width */
-  borderWidth?: number;
-  /** Border color */
-  borderColor?: string;
-  /** Style overrides */
-  style?: ViewStyle | ViewStyle[];
-  /** Image style overrides */
-  imageStyle?: ImageStyle | ImageStyle[];
-  /** Test ID for testing */
-  testID?: string;
-}
-
-// =============================================================================
-// COMPONENT IMPLEMENTATION
-// =============================================================================
-
-export const AtomicAvatar: React.FC<AtomicAvatarProps> = ({
-  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: string): string => {
-    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: ViewStyle = {
-    width: avatarSize,
-    height: avatarSize,
-    borderRadius: avatarRadius,
-    backgroundColor: defaultBackgroundColor,
-    borderWidth,
-    borderColor: defaultBorderColor,
-    alignItems: 'center',
-    justifyContent: 'center',
-    overflow: 'hidden',
-  };
-
-  const imageStyleFinal: ImageStyle = {
-    width: avatarSize,
-    height: avatarSize,
-    borderRadius: avatarRadius,
-  };
-
-  // Font size based on avatar size
-  const getFontSize = (size: number): number => {
-    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;