@umituz/react-native-design-system 2.4.11 → 2.5.0

package/package.json

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

@@ -1,66 +1,72 @@
 import React from 'react';
-import { Text, StyleProp, TextStyle } from 'react-native';
-import { useAppDesignTokens, useResponsiveDesignTokens } from '../theme';
-import type { TextStyleVariant, ColorVariant } from '../typography';
-import { getTextColor } from '../typography';
+import { Text, type StyleProp, type TextStyle, type TextProps } from 'react-native';
+import { useAppDesignTokens } from '../theme';
+import { getTextColor, type TextStyleVariant, type ColorVariant } from '../typography';
 
-export interface AtomicTextProps {
-  children: React.ReactNode;
+export interface AtomicTextProps extends TextProps {
+  /** Typographic style variant from tokens */
   type?: TextStyleVariant;
+  
+  /** Color variant from tokens or custom hex color */
   color?: ColorVariant | string;
-  numberOfLines?: number;
-  ellipsizeMode?: 'head' | 'middle' | 'tail' | 'clip';
-  textAlign?: 'auto' | 'left' | 'right' | 'center' | 'justify';
+  
+  /** Text alignment */
+  align?: TextStyle['textAlign'];
+  
+  /** Content to render */
+  children: React.ReactNode;
+  
+  /** Custom text style */
   style?: StyleProp<TextStyle>;
+  
+  /** Test ID for automation */
   testID?: string;
-  /** Enable responsive font sizing (scales based on device) */
-  responsive?: boolean;
 }
 
-export const AtomicText: React.FC<AtomicTextProps> = ({
-  children,
+/**
+ * AtomicText - Primitive Text Component
+ * 
+ * ✅ Responsive by default
+ * ✅ Theme-aware
+ * ✅ SOLID, DRY, KISS
+ */
+export const AtomicText = ({
   type = 'bodyMedium',
-  color,
-  numberOfLines,
-  ellipsizeMode,
-  textAlign,
+  color = 'textPrimary',
+  align,
+  children,
   style,
   testID,
-  responsive = false,
-}) => {
-  const staticTokens = useAppDesignTokens();
-  const responsiveTokens = useResponsiveDesignTokens();
-
-  // Use responsive tokens if enabled, otherwise use static
-  const tokens = responsive ? responsiveTokens : staticTokens;
+  ...props
+}: AtomicTextProps) => {
+  const tokens = useAppDesignTokens();
 
   // Get typography style from tokens
   const typographyStyle = (tokens.typography as Record<string, any>)[type];
+  
+  // Use responsive font size if available
+  const fontSize = typographyStyle?.responsiveFontSize || typographyStyle?.fontSize;
 
-  // Get color from tokens or use custom color using utility function
-  const resolvedColor = getTextColor(color, tokens);
-
-  // Use responsive font size if enabled and available
-  const fontSize = responsive && typographyStyle.responsiveFontSize
-    ? typographyStyle.responsiveFontSize
-    : typographyStyle.fontSize;
+  // Resolve color
+  const resolvedColor = typeof color === 'string' && !color.includes('.') 
+    ? getTextColor(color as ColorVariant, tokens) 
+    : color;
 
   const textStyle: StyleProp<TextStyle> = [
     typographyStyle,
     {
-      color: resolvedColor,
+      color: resolvedColor as string,
       ...(fontSize && { fontSize }),
-      ...(textAlign && { textAlign }),
+      ...(align && { textAlign: align }),
     },
     style,
   ];
 
   return (
     <Text
-      numberOfLines={numberOfLines}
-      ellipsizeMode={ellipsizeMode}
       style={textStyle}
       testID={testID}
+      {...props}
     >
       {children}
     </Text>

package/src/index.ts

@@ -18,7 +18,6 @@
 
 export {
   useAppDesignTokens,
-  useResponsiveDesignTokens,
   useCommonStyles,
   useDesignSystemTheme,
   useTheme,
@@ -34,7 +33,6 @@ export {
   typography,
   borders,
   createDesignTokens,
-  createResponsiveDesignTokens,
   lightTheme,
   darkTheme,
   createResponsiveValue,
@@ -53,10 +51,8 @@ export {
   type AvatarSizes,
   type ComponentSizes,
   type DesignTokens,
-  type ResponsiveDesignTokens,
   type ResponsiveSpacing,
   type ResponsiveTypography,
-  type ResponsiveBorderRadius,
   type Theme,
   type ExtendedColorPalette,
   type NavigationTheme,
@@ -414,14 +410,6 @@ export {
   type CountdownTarget,
   type CountdownFormatOptions,
   type CountdownDisplayConfig,
-  // Photo Upload
-  PhotoUploadCard,
-  type PhotoUploadCardProps,
-  type PhotoUploadCardConfig,
-  // Image Picker
-  ImagePickerBox,
-  type ImagePickerBoxProps,
-  type ImagePickerBoxConfig,
   // Step Header
   StepHeader,
   type StepHeaderProps,

package/src/layouts/Container/Container.tsx

@@ -8,7 +8,7 @@
 import React, { useMemo } from 'react';
 import { View, StyleSheet, type StyleProp, type ViewStyle } from 'react-native';
 import { useResponsive } from '../../responsive';
-import { useResponsiveDesignTokens } from '../../theme';
+import { useAppDesignTokens } from '../../theme';
 
 export interface ContainerProps {
   /** Container content */
@@ -49,7 +49,7 @@ export const Container: React.FC<ContainerProps> = ({
   testID,
 }) => {
   const { maxContentWidth } = useResponsive();
-  const tokens = useResponsiveDesignTokens();
+  const tokens = useAppDesignTokens();
 
   const containerWidth = maxWidth || maxContentWidth;
 

package/src/layouts/FormLayout/FormLayout.tsx

@@ -7,7 +7,7 @@
 
 import React, { useMemo } from 'react';
 import { View, ScrollView, KeyboardAvoidingView, StyleSheet, type StyleProp, type ViewStyle } from 'react-native';
-import { useResponsiveDesignTokens } from '../../theme';
+import { useAppDesignTokens } from '../../theme';
 import { useResponsive } from '../../responsive';
 
 export interface FormLayoutProps {
@@ -51,7 +51,7 @@ export const FormLayout: React.FC<FormLayoutProps> = ({
   disableScroll = false,
   testID,
 }) => {
-  const tokens = useResponsiveDesignTokens();
+  const tokens = useAppDesignTokens();
   const { insets } = useResponsive();
 
   const styles = useMemo(

package/src/layouts/Grid/Grid.tsx

@@ -8,7 +8,7 @@
 import React, { useMemo } from 'react';
 import { View, StyleSheet, type StyleProp, type ViewStyle } from 'react-native';
 import { useResponsive } from '../../responsive';
-import { useResponsiveDesignTokens } from '../../theme';
+import { useAppDesignTokens } from '../../theme';
 
 export interface GridProps {
   /** Grid items to render */
@@ -51,7 +51,7 @@ export const Grid: React.FC<GridProps> = ({
   testID,
 }) => {
   const { gridColumns, spacingMultiplier } = useResponsive();
-  const tokens = useResponsiveDesignTokens();
+  const tokens = useAppDesignTokens();
 
   // Calculate responsive columns
   const columns = gridColumns || (mobileColumns && tabletColumns

package/src/molecules/List/List.tsx

@@ -7,7 +7,7 @@
 
 import React from 'react';
 import { FlatList, RefreshControl, type FlatListProps, type ListRenderItem } from 'react-native';
-import { useResponsiveDesignTokens } from '../../theme';
+import { useAppDesignTokens } from '../../theme';
 
 export interface ListProps<T> extends Omit<FlatListProps<T>, 'renderItem'> {
   /** Data array */
@@ -53,7 +53,7 @@ export const List = <T,>({
   contentPadding = false,
   ...rest
 }: ListProps<T>) => {
-  const tokens = useResponsiveDesignTokens();
+  const tokens = useAppDesignTokens();
 
   return (
     <FlatList

package/src/molecules/index.ts

@@ -48,12 +48,6 @@ export * from './animation';
 // Long Press Menu
 export * from './long-press-menu';
 
-// Photo Upload
-export * from './PhotoUploadCard';
-
-// Image Picker
-export * from './ImagePickerBox';
-
 // Step Header
 export * from './StepHeader';
 

package/src/theme/core/TokenFactory.ts

@@ -1,89 +1,68 @@
-/**
- * TOKEN FACTORY - THEME INJECTION LOGIC
- *
- * ✅ Factory Pattern for creating complete design tokens
- * ✅ Combines static tokens (BaseTokens) + dynamic colors (ColorPalette)
- * ✅ Type-safe token generation
- * ✅ Zero duplication - SINGLE SOURCE OF TRUTH
- *
- * @module TokenFactory
- */
-
 import { BASE_TOKENS } from './BaseTokens';
 import { getColorPalette, withAlpha, type ThemeMode, type ColorPalette } from './ColorPalette';
 import { applyCustomColors, type CustomThemeColors } from './CustomColors';
-
-// =============================================================================
-// DESIGN TOKENS TYPE
-// =============================================================================
-
-/**
- * Complete design tokens shape
- * Combines static tokens (spacing, typography, borders) + dynamic colors
- */
-export type DesignTokens = {
-  colors: ColorPalette;
-  spacing: typeof BASE_TOKENS.spacing;
-  typography: typeof BASE_TOKENS.typography;
-  iconSizes: typeof BASE_TOKENS.iconSizes;
-  opacity: typeof BASE_TOKENS.opacity;
-  avatarSizes: typeof BASE_TOKENS.avatarSizes;
-  borderRadius: typeof BASE_TOKENS.borders.radius;
-  borders: typeof BASE_TOKENS.borders & {
-    card: typeof BASE_TOKENS.borders.card & { borderColor: string };
-    input: typeof BASE_TOKENS.borders.input & { borderColor: string };
-  };
-};
-
-// =============================================================================
-// TOKEN FACTORY FUNCTION
-// =============================================================================
+import { type DesignTokens, type ResponsiveTypography } from '../types/ThemeTypes';
 
 /**
  * Create complete design tokens for a specific theme mode
+ * 
+ * ✅ Responsive by default
+ * ✅ SINGLE SOURCE OF TRUTH
  *
  * @param mode - Theme mode ('light' or 'dark')
  * @param customColors - Optional custom colors to override default colors
- * @returns Complete design tokens object
- *
- * @example
- * ```typescript
- * const lightTokens = createDesignTokens('light');
- * const darkTokens = createDesignTokens('dark');
- * const customTokens = createDesignTokens('dark', { primary: '#FF6B35' });
- *
- * // Use in components
- * <View style={{ backgroundColor: lightTokens.colors.primary }}>
- *   <Text style={lightTokens.typography.bodyLarge}>Hello!</Text>
- * </View>
- * ```
+ * @param multiplier - Device-based spacing multiplier
+ * @param getFontSize - Function to get responsive font size
+ * @returns Complete responsive design tokens object
  */
 export const createDesignTokens = (
   mode: ThemeMode,
   customColors?: CustomThemeColors,
+  multiplier: number = 1,
+  getFontSize: (size: number) => number = (s) => s,
 ): DesignTokens => {
-  // Get color palette for theme mode
   const baseColors = getColorPalette(mode);
-
-  // Apply custom colors if provided
   const colors = applyCustomColors(baseColors, customColors);
 
-  // Combine static tokens + dynamic colors
+  // Responsive Spacing
+  const spacing = Object.keys(BASE_TOKENS.spacing).reduce((acc, key) => {
+    const value = BASE_TOKENS.spacing[key as keyof typeof BASE_TOKENS.spacing];
+    acc[key as keyof typeof BASE_TOKENS.spacing] = typeof value === 'number' ? value * multiplier : value;
+    return acc;
+  }, {} as any);
+
+  // Responsive Typography
+  const typography = Object.keys(BASE_TOKENS.typography).reduce((acc, key) => {
+    const style = BASE_TOKENS.typography[key as keyof typeof BASE_TOKENS.typography];
+    if (typeof style === 'object' && style.fontSize) {
+      acc[key as keyof typeof BASE_TOKENS.typography] = {
+        ...(style as any),
+        responsiveFontSize: getFontSize(style.fontSize as number),
+      };
+    } else {
+      acc[key as keyof typeof BASE_TOKENS.typography] = style as any;
+    }
+    return acc;
+  }, {} as any) as ResponsiveTypography;
+
+  // Responsive Borders
+  const borderRadius = Object.keys(BASE_TOKENS.borders.radius).reduce((acc, key) => {
+    const value = BASE_TOKENS.borders.radius[key as keyof typeof BASE_TOKENS.borders.radius];
+    acc[key as keyof typeof BASE_TOKENS.borders.radius] = value === 0 || key === 'full' ? value : Math.round(value * multiplier);
+    return acc;
+  }, {} as any);
+
   return {
-    // ✅ DYNAMIC: Colors from theme mode + custom overrides
     colors,
-
-    // ✅ STATIC: These don't change with theme
-    spacing: BASE_TOKENS.spacing,
-    typography: BASE_TOKENS.typography,
+    spacing,
+    typography,
     iconSizes: BASE_TOKENS.iconSizes,
     opacity: BASE_TOKENS.opacity,
     avatarSizes: BASE_TOKENS.avatarSizes,
-    borderRadius: BASE_TOKENS.borders.radius,
-
-    // ✅ BORDERS: Static + injected border colors from theme
+    borderRadius,
     borders: {
       ...BASE_TOKENS.borders,
+      radius: borderRadius,
       card: {
         ...BASE_TOKENS.borders.card,
         borderColor: colors.border,
@@ -93,13 +72,13 @@ export const createDesignTokens = (
         borderColor: colors.border,
       },
     },
+    spacingMultiplier: multiplier,
+    baseSpacing: BASE_TOKENS.spacing,
+    baseTypography: BASE_TOKENS.typography,
+    baseBorderRadius: BASE_TOKENS.borders.radius,
   };
 };
 
-// =============================================================================
-// UTILITY EXPORTS
-// =============================================================================
-
 export { withAlpha };
 export type { ThemeMode, ColorPalette };
 

package/src/theme/hooks/useAppDesignTokens.ts

@@ -1,27 +1,35 @@
 import { useMemo } from 'react';
 import { useDesignSystemTheme } from '../infrastructure/globalThemeStore';
-import { createDesignTokens, type DesignTokens } from '../core/TokenFactory';
+import { createDesignTokens } from '../core/TokenFactory';
+import { useResponsive } from '../../responsive/useResponsive';
+import { type DesignTokens } from '../types/ThemeTypes';
 
 /**
  * Hook to access current design tokens (colors, spacing, typography, etc.)
  * 
- * This hook is the primary way for components to access theme tokens.
- * It automatically updates when the theme mode or custom colors change
- * in the design system global store.
+ * ✅ Responsive by default - Scales based on device type
+ * ✅ Theme-aware - Automatically updates on light/dark mode changes
+ * ✅ Dynamic - Supports custom color overrides
  * 
- * @returns {DesignTokens} The current design tokens
+ * @returns {DesignTokens} The current responsive design tokens
  * 
  * @example
  * ```tsx
  * const tokens = useAppDesignTokens();
- * return <View style={{ backgroundColor: tokens.colors.backgroundPrimary }} />;
+ * return (
+ *   <View style={{ 
+ *     padding: tokens.spacing.md, 
+ *     backgroundColor: tokens.colors.backgroundPrimary 
+ *   }} />
+ * );
  * ```
  */
 export const useAppDesignTokens = (): DesignTokens => {
     const { themeMode, customColors } = useDesignSystemTheme();
+    const { spacingMultiplier, getFontSize } = useResponsive();
 
     return useMemo(
-        () => createDesignTokens(themeMode, customColors),
-        [themeMode, customColors]
+        () => createDesignTokens(themeMode, customColors, spacingMultiplier, getFontSize),
+        [themeMode, customColors, spacingMultiplier, getFontSize]
     );
 };

package/src/theme/index.ts

@@ -52,27 +52,20 @@ export {
 
 export {
   createDesignTokens,
-  type DesignTokens,
 } from './core/TokenFactory';
 
-// =============================================================================
-// RESPONSIVE TOKEN FACTORY
-// =============================================================================
-
-export {
-  createResponsiveDesignTokens,
-  type ResponsiveDesignTokens,
-  type ResponsiveSpacing,
-  type ResponsiveTypography,
-  type ResponsiveBorderRadius,
-} from './core/ResponsiveTokenFactory';
+export type {
+  DesignTokens,
+  ResponsiveSpacing,
+  ResponsiveTypography,
+  ResponsiveBorderRadius,
+} from './types/ThemeTypes';
 
 // =============================================================================
 // HOOKS
 // =============================================================================
 
 export { useAppDesignTokens } from './hooks/useAppDesignTokens';
-export { useResponsiveDesignTokens } from './hooks/useResponsiveDesignTokens';
 export { useDesignSystemTheme } from './infrastructure/globalThemeStore';
 export { useTheme } from './infrastructure/stores/themeStore';
 export { useThemedStyles, useThemedStyleSheet } from './hooks/useThemedStyles';

package/src/theme/types/ThemeTypes.ts

@@ -0,0 +1,62 @@
+import { type TextStyle } from 'react-native';
+import { type ColorPalette, type ThemeMode } from '../core/ColorPalette';
+import { type BaseTokens, type Spacing, type Typography, type Borders } from '../core/tokens/BaseTokens';
+
+/**
+ * Responsive Spacing Type
+ */
+export type ResponsiveSpacing = Spacing;
+
+/**
+ * Responsive Border Radius Type
+ */
+export type ResponsiveBorderRadius = Borders['radius'];
+
+/**
+ * Responsive Typography Type
+ */
+export type ResponsiveTypography = Typography & {
+  displayLarge: TextStyle & { responsiveFontSize: number };
+  displayMedium: TextStyle & { responsiveFontSize: number };
+  displaySmall: TextStyle & { responsiveFontSize: number };
+  headlineLarge: TextStyle & { responsiveFontSize: number };
+  headlineMedium: TextStyle & { responsiveFontSize: number };
+  headlineSmall: TextStyle & { responsiveFontSize: number };
+  titleLarge: TextStyle & { responsiveFontSize: number };
+  titleMedium: TextStyle & { responsiveFontSize: number };
+  titleSmall: TextStyle & { responsiveFontSize: number };
+  bodyLarge: TextStyle & { responsiveFontSize: number };
+  bodyMedium: TextStyle & { responsiveFontSize: number };
+  bodySmall: TextStyle & { responsiveFontSize: number };
+  labelLarge: TextStyle & { responsiveFontSize: number };
+  labelMedium: TextStyle & { responsiveFontSize: number };
+  labelSmall: TextStyle & { responsiveFontSize: number };
+};
+
+/**
+ * Combined Design Tokens Type
+ * Now responsive by default
+ */
+export type DesignTokens = {
+  colors: ColorPalette;
+  spacing: ResponsiveSpacing;
+  typography: ResponsiveTypography;
+  iconSizes: BaseTokens['iconSizes'];
+  opacity: BaseTokens['opacity'];
+  avatarSizes: BaseTokens['avatarSizes'];
+  borderRadius: ResponsiveBorderRadius;
+  borders: Borders & {
+    card: Borders['card'] & { borderColor: string };
+    input: Borders['input'] & { borderColor: string };
+  };
+  
+  // Responsive metadata
+  spacingMultiplier: number;
+  
+  // Base tokens for reference if needed
+  baseSpacing: Spacing;
+  baseTypography: Typography;
+  baseBorderRadius: Borders['radius'];
+};
+
+export type { ThemeMode };

package/src/types/jsx.d.ts

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-empty-object-type */
 /**
  * React 19 JSX Compatibility for React Native
  * Fixes JSX namespace issues between React 19 and react-native

package/src/molecules/ImagePickerBox/ImagePickerBox.tsx

@@ -1,171 +0,0 @@
-/**
- * ImagePickerBox Component
- * Generic image picker box with gradient design
- * Props-driven for 100+ apps compatibility
- *
- * @package @umituz/react-native-design-system
- */
-
-import React, { useMemo } from "react";
-import {
-  View,
-  StyleSheet,
-  TouchableOpacity,
-  Image,
-  type ViewStyle,
-} from "react-native";
-import { LinearGradient } from "expo-linear-gradient";
-import { AtomicText } from "../../atoms/AtomicText";
-import { AtomicIcon } from "../../atoms/AtomicIcon";
-import { useAppDesignTokens } from "../../theme/hooks/useAppDesignTokens";
-
-export interface ImagePickerBoxConfig {
-  readonly variant?: "portrait" | "square" | "landscape";
-  readonly size?: "sm" | "md" | "lg";
-  readonly uploadIcon?: string;
-  readonly editIcon?: string;
-}
-
-export interface ImagePickerBoxProps {
-  readonly imageUri: string | null;
-  readonly isDisabled?: boolean;
-  readonly onPress: () => void;
-  readonly placeholderText: string;
-  readonly gradientColors?: readonly [string, string, ...string[]];
-  readonly config?: ImagePickerBoxConfig;
-}
-
-const VARIANT_STYLES: Record<string, ViewStyle> = {
-  portrait: { width: 200, height: 280, borderRadius: 20 },
-  square: { width: "100%" as unknown as number, aspectRatio: 1, borderRadius: 24 },
-  landscape: { width: "100%" as unknown as number, aspectRatio: 16 / 9, borderRadius: 16 },
-};
-
-const SIZE_MULTIPLIERS = { sm: 0.7, md: 1, lg: 1.3 };
-
-const DEFAULT_CONFIG: ImagePickerBoxConfig = {
-  variant: "portrait",
-  size: "md",
-  uploadIcon: "cloud-upload-outline",
-  editIcon: "image-outline",
-};
-
-export const ImagePickerBox: React.FC<ImagePickerBoxProps> = ({
-  imageUri,
-  isDisabled = false,
-  onPress,
-  placeholderText,
-  gradientColors = ["#667eea", "#764ba2"],
-  config = DEFAULT_CONFIG,
-}) => {
-  const tokens = useAppDesignTokens();
-  const cfg = useMemo(() => ({ ...DEFAULT_CONFIG, ...config }), [config]);
-
-  const multiplier = SIZE_MULTIPLIERS[cfg.size || "md"];
-  const baseStyle = VARIANT_STYLES[cfg.variant || "portrait"];
-  const iconSize = Math.round(32 * multiplier);
-
-  const styles = useMemo(
-    () =>
-      StyleSheet.create({
-        container: {
-          marginVertical: 16,
-          alignItems: "center",
-        },
-        box: {
-          overflow: "hidden",
-          ...baseStyle,
-          backgroundColor: tokens.colors.backgroundSecondary,
-        },
-        imageContainer: {
-          flex: 1,
-          position: "relative",
-        },
-        image: {
-          width: "100%",
-          height: "100%",
-        },
-        imageOverlay: {
-          position: "absolute",
-          bottom: 0,
-          left: 0,
-          right: 0,
-          height: "30%",
-          justifyContent: "flex-end",
-          alignItems: "flex-end",
-          padding: 12,
-        },
-        editBadge: {
-          borderRadius: 20,
-          padding: 8,
-          backgroundColor: `${gradientColors[1]}E6`,
-        },
-        placeholder: {
-          flex: 1,
-          justifyContent: "center",
-          alignItems: "center",
-        },
-        placeholderContent: {
-          alignItems: "center",
-          justifyContent: "center",
-          paddingHorizontal: 16,
-        },
-        uploadIconContainer: {
-          backgroundColor: "rgba(255,255,255,0.2)",
-          borderRadius: 40,
-          padding: 16,
-          marginBottom: 12,
-        },
-        placeholderText: {
-          textAlign: "center",
-          fontWeight: "600",
-          color: "#FFFFFF",
-        },
-      }),
-    [tokens, baseStyle, gradientColors]
-  );
-
-  return (
-    <View style={styles.container}>
-      <TouchableOpacity
-        style={styles.box}
-        onPress={onPress}
-        disabled={isDisabled}
-        activeOpacity={0.8}
-      >
-        {imageUri ? (
-          <View style={styles.imageContainer}>
-            <Image source={{ uri: imageUri }} style={styles.image} />
-            <LinearGradient
-              colors={["transparent", "rgba(0,0,0,0.3)"]}
-              style={styles.imageOverlay}
-            >
-              <View style={styles.editBadge}>
-                <AtomicIcon
-                  name={cfg.editIcon || "image-outline"}
-                  customSize={Math.round(16 * multiplier)}
-                  customColor="#FFFFFF"
-                />
-              </View>
-            </LinearGradient>
-          </View>
-        ) : (
-          <LinearGradient colors={gradientColors} style={styles.placeholder}>
-            <View style={styles.placeholderContent}>
-              <View style={styles.uploadIconContainer}>
-                <AtomicIcon
-                  name={cfg.uploadIcon || "cloud-upload-outline"}
-                  customSize={iconSize}
-                  customColor="#FFFFFF"
-                />
-              </View>
-              <AtomicText type="bodyMedium" style={styles.placeholderText}>
-                {placeholderText}
-              </AtomicText>
-            </View>
-          </LinearGradient>
-        )}
-      </TouchableOpacity>
-    </View>
-  );
-};

package/src/molecules/ImagePickerBox/index.ts

@@ -1,2 +0,0 @@
-export { ImagePickerBox } from "./ImagePickerBox";
-export type { ImagePickerBoxProps, ImagePickerBoxConfig } from "./ImagePickerBox";

package/src/molecules/PhotoUploadCard/PhotoUploadCard.tsx

@@ -1,241 +0,0 @@
-/**
- * PhotoUploadCard Component
- * Beautiful photo upload card with validation status and responsive design
- *
- * @package @umituz/react-native-design-system
- */
-
-import React, { useMemo } from "react";
-import {
-  View,
-  Image,
-  StyleSheet,
-  Pressable,
-  TouchableOpacity,
-  ActivityIndicator,
-  type ViewStyle,
-  type StyleProp,
-} from "react-native";
-import { LinearGradient } from "expo-linear-gradient";
-import { AtomicText } from "../../atoms/AtomicText";
-import { AtomicIcon } from "../../atoms/AtomicIcon";
-import { useAppDesignTokens } from "../../theme/hooks/useAppDesignTokens";
-
-export interface PhotoUploadCardConfig {
-  aspectRatio?: number;
-  borderRadius?: number;
-  iconSize?: number;
-  showValidationStatus?: boolean;
-  allowChange?: boolean;
-  borderStyle?: "solid" | "dashed";
-}
-
-export interface PhotoUploadCardProps {
-  imageUri: string | null;
-  onPress: () => void;
-  isValidating?: boolean;
-  isValid?: boolean | null;
-  disabled?: boolean;
-  config?: PhotoUploadCardConfig;
-  translations: {
-    tapToUpload: string;
-    selectPhoto: string;
-    change: string;
-    analyzing?: string;
-  };
-  style?: StyleProp<ViewStyle>;
-}
-
-const DEFAULT_CONFIG: PhotoUploadCardConfig = {
-  aspectRatio: 1,
-  borderRadius: 28,
-  iconSize: 40,
-  showValidationStatus: true,
-  allowChange: true,
-  borderStyle: "dashed",
-};
-
-export const PhotoUploadCard: React.FC<PhotoUploadCardProps> = ({
-  imageUri,
-  onPress,
-  isValidating = false,
-  isValid = null,
-  disabled = false,
-  config = DEFAULT_CONFIG,
-  translations,
-  style,
-}) => {
-  const tokens = useAppDesignTokens();
-  const cfg = { ...DEFAULT_CONFIG, ...config };
-
-  const borderColor = useMemo(() => {
-    if (!cfg.showValidationStatus) {
-      return `${tokens.colors.primary}40`;
-    }
-    if (isValidating) return tokens.colors.primary;
-    if (isValid === true) return tokens.colors.success;
-    if (isValid === false) return tokens.colors.error;
-    return `${tokens.colors.primary}40`;
-  }, [isValidating, isValid, tokens, cfg.showValidationStatus]);
-
-  const styles = useMemo(
-    () =>
-      StyleSheet.create({
-        container: {
-          marginHorizontal: 24,
-          marginBottom: 24,
-        },
-        card: {
-          aspectRatio: cfg.aspectRatio,
-          backgroundColor: tokens.colors.surfaceSecondary,
-          borderRadius: cfg.borderRadius,
-          justifyContent: "center",
-          alignItems: "center",
-          overflow: "hidden",
-          borderWidth: 2,
-          borderStyle: imageUri ? "solid" : cfg.borderStyle,
-        },
-        placeholder: {
-          alignItems: "center",
-          padding: 32,
-        },
-        iconCircle: {
-          width: 88,
-          height: 88,
-          borderRadius: 44,
-          justifyContent: "center",
-          alignItems: "center",
-          marginBottom: 20,
-          borderWidth: 2,
-          borderColor: `${tokens.colors.primary}30`,
-        },
-        iconGradient: {
-          width: 88,
-          height: 88,
-          borderRadius: 44,
-          justifyContent: "center",
-          alignItems: "center",
-        },
-        title: {
-          fontSize: 20,
-          fontWeight: "700",
-          color: tokens.colors.textPrimary,
-          marginBottom: 8,
-          letterSpacing: 0.3,
-        },
-        subtitle: {
-          fontSize: 14,
-          color: tokens.colors.textSecondary,
-          textAlign: "center",
-          lineHeight: 20,
-          maxWidth: 240,
-        },
-        image: {
-          width: "100%",
-          height: "100%",
-          resizeMode: "cover",
-        },
-        imageOverlay: {
-          ...StyleSheet.absoluteFillObject,
-          backgroundColor: "rgba(0,0,0,0.15)",
-        },
-        changeButton: {
-          position: "absolute",
-          bottom: 20,
-          right: 20,
-          backgroundColor: tokens.colors.surface,
-          paddingHorizontal: 18,
-          paddingVertical: 12,
-          borderRadius: 28,
-          flexDirection: "row",
-          alignItems: "center",
-          gap: 8,
-        },
-        changeText: {
-          fontSize: 14,
-          fontWeight: "700",
-          color: tokens.colors.primary,
-        },
-        validatingContainer: {
-          alignItems: "center",
-          padding: 32,
-        },
-        validatingText: {
-          fontSize: 16,
-          fontWeight: "600",
-          color: tokens.colors.primary,
-          marginTop: 20,
-        },
-        pulseRing: {
-          position: "absolute",
-          width: 100,
-          height: 100,
-          borderRadius: 50,
-          borderWidth: 2,
-          borderColor: `${tokens.colors.primary}30`,
-        },
-      }),
-    [tokens, imageUri, cfg],
-  );
-
-  return (
-    <View style={[styles.container, style]}>
-      <Pressable
-        style={[styles.card, { borderColor }]}
-        onPress={onPress}
-        disabled={disabled || isValidating}
-      >
-        {isValidating ? (
-          <View style={styles.validatingContainer}>
-            <View style={styles.pulseRing} />
-            <ActivityIndicator size="large" color={tokens.colors.primary} />
-            <AtomicText style={styles.validatingText}>
-              {translations.analyzing || "Analyzing..."}
-            </AtomicText>
-          </View>
-        ) : imageUri ? (
-          <>
-            <Image source={{ uri: imageUri }} style={styles.image} />
-            <View style={styles.imageOverlay} />
-            {cfg.allowChange && (
-              <TouchableOpacity style={styles.changeButton} onPress={onPress}>
-                <AtomicIcon
-                  name="camera"
-                  size={18}
-                  customColor={tokens.colors.primary}
-                />
-                <AtomicText style={styles.changeText}>
-                  {translations.change}
-                </AtomicText>
-              </TouchableOpacity>
-            )}
-          </>
-        ) : (
-          <View style={styles.placeholder}>
-            <View style={styles.iconCircle}>
-              <LinearGradient
-                colors={[
-                  `${tokens.colors.primary}20`,
-                  `${tokens.colors.primary}10`,
-                ]}
-                style={styles.iconGradient}
-              >
-                <AtomicIcon
-                  name="camera"
-                  size={cfg.iconSize}
-                  customColor={tokens.colors.primary}
-                />
-              </LinearGradient>
-            </View>
-            <AtomicText style={styles.title}>
-              {translations.tapToUpload}
-            </AtomicText>
-            <AtomicText style={styles.subtitle}>
-              {translations.selectPhoto}
-            </AtomicText>
-          </View>
-        )}
-      </Pressable>
-    </View>
-  );
-};

package/src/molecules/PhotoUploadCard/index.ts

@@ -1,5 +0,0 @@
-export { PhotoUploadCard } from "./PhotoUploadCard";
-export type {
-  PhotoUploadCardProps,
-  PhotoUploadCardConfig,
-} from "./PhotoUploadCard";

package/src/theme/core/ResponsiveTokenFactory.ts

@@ -1,266 +0,0 @@
-/**
- * RESPONSIVE TOKEN FACTORY
- *
- * ✅ Extends base TokenFactory with responsive capabilities
- * ✅ Device-aware spacing, typography, and sizing
- * ✅ Automatically scales all tokens based on device type
- * ✅ Backward compatible with existing token system
- *
- * @module ResponsiveTokenFactory
- */
-
-import { BASE_TOKENS } from './BaseTokens';
-import { createDesignTokens, type DesignTokens, type ThemeMode } from './TokenFactory';
-import { type CustomThemeColors } from './CustomColors';
-
-// =============================================================================
-// RESPONSIVE DESIGN TOKENS TYPE
-// =============================================================================
-
-/**
- * Responsive spacing tokens that scale based on device
- */
-export type ResponsiveSpacing = {
-  // Base Spacing Scale (scales with spacingMultiplier)
-  xs: number;
-  sm: number;
-  md: number;
-  lg: number;
-  xl: number;
-  xxl: number;
-  xxxl: number;
-
-  // Semantic Spacing (scales with device)
-  screenPadding: number;
-  cardPadding: number;
-  buttonPadding: number;
-  inputPadding: number;
-  sectionSpacing: number;
-
-  // Icon Sizes (scales with device)
-  iconSizeSmall: number;
-  iconSizeMedium: number;
-  iconSizeLarge: number;
-  iconSizeXLarge: number;
-  iconSizeHero: number;
-
-  // Component Heights (scales with device)
-  buttonHeight: number;
-  inputHeight: number;
-  appBarHeight: number;
-  tabBarHeight: number;
-};
-
-/**
- * Responsive typography tokens that scale based on device
- */
-export type ResponsiveTypography = typeof BASE_TOKENS.typography & {
-  // Each typography level gets responsive fontSize
-  displayLarge: typeof BASE_TOKENS.typography.displayLarge & { responsiveFontSize: number };
-  displayMedium: typeof BASE_TOKENS.typography.displayMedium & { responsiveFontSize: number };
-  displaySmall: typeof BASE_TOKENS.typography.displaySmall & { responsiveFontSize: number };
-  headlineLarge: typeof BASE_TOKENS.typography.headlineLarge & { responsiveFontSize: number };
-  headlineMedium: typeof BASE_TOKENS.typography.headlineMedium & { responsiveFontSize: number };
-  headlineSmall: typeof BASE_TOKENS.typography.headlineSmall & { responsiveFontSize: number };
-  titleLarge: typeof BASE_TOKENS.typography.titleLarge & { responsiveFontSize: number };
-  titleMedium: typeof BASE_TOKENS.typography.titleMedium & { responsiveFontSize: number };
-  titleSmall: typeof BASE_TOKENS.typography.titleSmall & { responsiveFontSize: number };
-  bodyLarge: typeof BASE_TOKENS.typography.bodyLarge & { responsiveFontSize: number };
-  bodyMedium: typeof BASE_TOKENS.typography.bodyMedium & { responsiveFontSize: number };
-  bodySmall: typeof BASE_TOKENS.typography.bodySmall & { responsiveFontSize: number };
-  labelLarge: typeof BASE_TOKENS.typography.labelLarge & { responsiveFontSize: number };
-  labelMedium: typeof BASE_TOKENS.typography.labelMedium & { responsiveFontSize: number };
-  labelSmall: typeof BASE_TOKENS.typography.labelSmall & { responsiveFontSize: number };
-};
-
-/**
- * Responsive border radius tokens that scale based on device
- */
-export type ResponsiveBorderRadius = {
-  none: number;
-  xs: number;
-  sm: number;
-  md: number;
-  lg: number;
-  xl: number;
-  xxl: number;
-  full: number;
-};
-
-/**
- * Complete responsive design tokens
- * Extends base DesignTokens with responsive capabilities
- */
-export type ResponsiveDesignTokens = Omit<DesignTokens, 'spacing' | 'typography' | 'borderRadius'> & {
-  spacing: ResponsiveSpacing;
-  typography: ResponsiveTypography;
-  borderRadius: ResponsiveBorderRadius;
-
-  // Original base tokens (for backward compatibility)
-  baseSpacing: typeof BASE_TOKENS.spacing;
-  baseTypography: typeof BASE_TOKENS.typography;
-  baseBorderRadius: typeof BASE_TOKENS.borders.radius;
-
-  // Responsive multiplier value
-  spacingMultiplier: number;
-};
-
-// =============================================================================
-// RESPONSIVE TOKEN FACTORY FUNCTION
-// =============================================================================
-
-/**
- * Create responsive design tokens for a specific theme mode
- *
- * @param mode - Theme mode ('light' or 'dark')
- * @param spacingMultiplier - Device-based spacing multiplier (from useResponsive)
- * @param getFontSize - Function to get responsive font size (from useResponsive)
- * @param customColors - Optional custom colors to override default colors
- * @returns Complete responsive design tokens object
- *
- * @example
- * ```typescript
- * const { spacingMultiplier, getFontSize } = useResponsive();
- * const tokens = createResponsiveDesignTokens('light', spacingMultiplier, getFontSize);
- *
- * // Use in components
- * <View style={{ padding: tokens.spacing.md }}>  // Auto-scales: 16px * 1.2 = 19.2px on tablet
- *   <Text style={{ fontSize: tokens.typography.bodyLarge.responsiveFontSize }}>
- *     Hello!
- *   </Text>
- * </View>
- * ```
- */
-export const createResponsiveDesignTokens = (
-  mode: ThemeMode,
-  spacingMultiplier: number,
-  getFontSize: (baseFontSize: number) => number,
-  customColors?: CustomThemeColors,
-): ResponsiveDesignTokens => {
-  // Get base tokens from existing factory
-  const baseTokens = createDesignTokens(mode, customColors);
-
-  // Create responsive spacing (multiply all base spacing values)
-  const responsiveSpacing: ResponsiveSpacing = {
-    // Base Spacing Scale
-    xs: BASE_TOKENS.spacing.xs * spacingMultiplier,
-    sm: BASE_TOKENS.spacing.sm * spacingMultiplier,
-    md: BASE_TOKENS.spacing.md * spacingMultiplier,
-    lg: BASE_TOKENS.spacing.lg * spacingMultiplier,
-    xl: BASE_TOKENS.spacing.xl * spacingMultiplier,
-    xxl: BASE_TOKENS.spacing.xxl * spacingMultiplier,
-    xxxl: BASE_TOKENS.spacing.xxxl * spacingMultiplier,
-
-    // Semantic Spacing
-    screenPadding: BASE_TOKENS.spacing.screenPadding * spacingMultiplier,
-    cardPadding: BASE_TOKENS.spacing.cardPadding * spacingMultiplier,
-    buttonPadding: BASE_TOKENS.spacing.buttonPadding * spacingMultiplier,
-    inputPadding: BASE_TOKENS.spacing.inputPadding * spacingMultiplier,
-    sectionSpacing: BASE_TOKENS.spacing.sectionSpacing * spacingMultiplier,
-
-    // Icon Sizes
-    iconSizeSmall: Math.round(BASE_TOKENS.spacing.iconSizeSmall * spacingMultiplier),
-    iconSizeMedium: Math.round(BASE_TOKENS.spacing.iconSizeMedium * spacingMultiplier),
-    iconSizeLarge: Math.round(BASE_TOKENS.spacing.iconSizeLarge * spacingMultiplier),
-    iconSizeXLarge: Math.round(BASE_TOKENS.spacing.iconSizeXLarge * spacingMultiplier),
-    iconSizeHero: Math.round(BASE_TOKENS.spacing.iconSizeHero * spacingMultiplier),
-
-    // Component Heights
-    buttonHeight: Math.round(BASE_TOKENS.spacing.buttonHeight * spacingMultiplier),
-    inputHeight: Math.round(BASE_TOKENS.spacing.inputHeight * spacingMultiplier),
-    appBarHeight: Math.round(BASE_TOKENS.spacing.appBarHeight * spacingMultiplier),
-    tabBarHeight: Math.round(BASE_TOKENS.spacing.tabBarHeight * spacingMultiplier),
-  };
-
-  // Create responsive typography (add responsiveFontSize to each level)
-  const responsiveTypography: ResponsiveTypography = {
-    displayLarge: {
-      ...BASE_TOKENS.typography.displayLarge,
-      responsiveFontSize: getFontSize(BASE_TOKENS.typography.displayLarge.fontSize!),
-    },
-    displayMedium: {
-      ...BASE_TOKENS.typography.displayMedium,
-      responsiveFontSize: getFontSize(BASE_TOKENS.typography.displayMedium.fontSize!),
-    },
-    displaySmall: {
-      ...BASE_TOKENS.typography.displaySmall,
-      responsiveFontSize: getFontSize(BASE_TOKENS.typography.displaySmall.fontSize!),
-    },
-    headlineLarge: {
-      ...BASE_TOKENS.typography.headlineLarge,
-      responsiveFontSize: getFontSize(BASE_TOKENS.typography.headlineLarge.fontSize!),
-    },
-    headlineMedium: {
-      ...BASE_TOKENS.typography.headlineMedium,
-      responsiveFontSize: getFontSize(BASE_TOKENS.typography.headlineMedium.fontSize!),
-    },
-    headlineSmall: {
-      ...BASE_TOKENS.typography.headlineSmall,
-      responsiveFontSize: getFontSize(BASE_TOKENS.typography.headlineSmall.fontSize!),
-    },
-    titleLarge: {
-      ...BASE_TOKENS.typography.titleLarge,
-      responsiveFontSize: getFontSize(BASE_TOKENS.typography.titleLarge.fontSize!),
-    },
-    titleMedium: {
-      ...BASE_TOKENS.typography.titleMedium,
-      responsiveFontSize: getFontSize(BASE_TOKENS.typography.titleMedium.fontSize!),
-    },
-    titleSmall: {
-      ...BASE_TOKENS.typography.titleSmall,
-      responsiveFontSize: getFontSize(BASE_TOKENS.typography.titleSmall.fontSize!),
-    },
-    bodyLarge: {
-      ...BASE_TOKENS.typography.bodyLarge,
-      responsiveFontSize: getFontSize(BASE_TOKENS.typography.bodyLarge.fontSize!),
-    },
-    bodyMedium: {
-      ...BASE_TOKENS.typography.bodyMedium,
-      responsiveFontSize: getFontSize(BASE_TOKENS.typography.bodyMedium.fontSize!),
-    },
-    bodySmall: {
-      ...BASE_TOKENS.typography.bodySmall,
-      responsiveFontSize: getFontSize(BASE_TOKENS.typography.bodySmall.fontSize!),
-    },
-    labelLarge: {
-      ...BASE_TOKENS.typography.labelLarge,
-      responsiveFontSize: getFontSize(BASE_TOKENS.typography.labelLarge.fontSize!),
-    },
-    labelMedium: {
-      ...BASE_TOKENS.typography.labelMedium,
-      responsiveFontSize: getFontSize(BASE_TOKENS.typography.labelMedium.fontSize!),
-    },
-    labelSmall: {
-      ...BASE_TOKENS.typography.labelSmall,
-      responsiveFontSize: getFontSize(BASE_TOKENS.typography.labelSmall.fontSize!),
-    },
-  } as ResponsiveTypography;
-
-  // Create responsive border radius
-  const responsiveBorderRadius: ResponsiveBorderRadius = {
-    none: 0,
-    xs: Math.round(BASE_TOKENS.borders.radius.xs * spacingMultiplier),
-    sm: Math.round(BASE_TOKENS.borders.radius.sm * spacingMultiplier),
-    md: Math.round(BASE_TOKENS.borders.radius.md * spacingMultiplier),
-    lg: Math.round(BASE_TOKENS.borders.radius.lg * spacingMultiplier),
-    xl: Math.round(BASE_TOKENS.borders.radius.xl * spacingMultiplier),
-    xxl: Math.round(BASE_TOKENS.borders.radius.xxl * spacingMultiplier),
-    full: 9999, // Always full circle
-  };
-
-  // Return complete responsive tokens
-  return {
-    ...baseTokens,
-    spacing: responsiveSpacing,
-    typography: responsiveTypography,
-    borderRadius: responsiveBorderRadius,
-
-    // Keep original base tokens for backward compatibility
-    baseSpacing: BASE_TOKENS.spacing,
-    baseTypography: BASE_TOKENS.typography,
-    baseBorderRadius: BASE_TOKENS.borders.radius,
-
-    // Store multiplier for reference
-    spacingMultiplier,
-  };
-};

package/src/theme/hooks/useResponsiveDesignTokens.ts

@@ -1,82 +0,0 @@
-/**
- * useResponsiveDesignTokens Hook
- *
- * ✅ Combines theme system + responsive utilities
- * ✅ Returns device-aware design tokens
- * ✅ Auto-updates on theme changes, orientation changes, screen resize
- * ✅ Drop-in replacement for useAppDesignTokens with responsive capabilities
- *
- * @module useResponsiveDesignTokens
- */
-
-import { useMemo } from 'react';
-import { useDesignSystemTheme } from '../infrastructure/globalThemeStore';
-import { createResponsiveDesignTokens, type ResponsiveDesignTokens } from '../core/ResponsiveTokenFactory';
-import { useResponsive } from '../../responsive/useResponsive';
-
-/**
- * Hook for responsive design tokens
- *
- * Returns complete design tokens with automatic responsive scaling based on device type.
- * All spacing, typography, and border radius values automatically scale for tablets and large phones.
- *
- * @returns ResponsiveDesignTokens - Complete tokens with responsive spacing, typography, borders
- *
- * @example
- * ```typescript
- * import { useResponsiveDesignTokens } from '../../index';
- *
- * const MyComponent = () => {
- *   const tokens = useResponsiveDesignTokens();
- *
- *   return (
- *     <View style={{
- *       padding: tokens.spacing.md,  // Auto-scales: 16px on phone, 19.2px on tablet
- *       borderRadius: tokens.borderRadius.lg,  // Auto-scales based on device
- *     }}>
- *       <Text style={{
- *         fontSize: tokens.typography.bodyLarge.responsiveFontSize,  // Responsive font
- *         color: tokens.colors.textPrimary,  // Theme-aware color
- *       }}>
- *         Hello World!
- *       </Text>
- *     </View>
- *   );
- * };
- * ```
- *
- * @example Using backward-compatible base tokens
- * ```typescript
- * const tokens = useResponsiveDesignTokens();
- *
- * // Use responsive tokens (recommended)
- * const padding = tokens.spacing.md;  // 16px * spacingMultiplier
- *
- * // Use original base tokens (backward compatibility)
- * const basePadding = tokens.baseSpacing.md;  // Always 16px
- * ```
- *
- * @example Manual responsive calculation
- * ```typescript
- * const tokens = useResponsiveDesignTokens();
- *
- * // Custom responsive value
- * const customPadding = 20 * tokens.spacingMultiplier;  // 20px * 1.2 = 24px on tablet
- * ```
- */
-export const useResponsiveDesignTokens = (): ResponsiveDesignTokens => {
-  // Get current theme mode and custom colors from theme store
-  const { themeMode, customColors } = useDesignSystemTheme();
-
-  // Get responsive utilities
-  const { spacingMultiplier, getFontSize } = useResponsive();
-
-  // Create and memoize responsive tokens
-  // Recalculates when: theme changes, screen size changes, orientation changes
-  const responsiveTokens = useMemo(
-    () => createResponsiveDesignTokens(themeMode, spacingMultiplier, getFontSize, customColors),
-    [themeMode, spacingMultiplier, getFontSize, customColors]
-  );
-
-  return responsiveTokens;
-};