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

package/package.json

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

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/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/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;
-};