@umituz/react-native-design-system 2.1.7 → 2.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-design-system",
-  "version": "2.1.7",
+  "version": "2.3.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,6 +1,6 @@
 import React from 'react';
 import { Text, StyleProp, TextStyle } from 'react-native';
-import { useAppDesignTokens } from '../theme';
+import { useAppDesignTokens, useResponsiveDesignTokens } from '../theme';
 import type { TextStyleVariant, ColorVariant } from '../typography';
 import { getTextColor } from '../typography';
 
@@ -13,6 +13,8 @@ export interface AtomicTextProps {
   textAlign?: 'auto' | 'left' | 'right' | 'center' | 'justify';
   style?: StyleProp<TextStyle>;
   testID?: string;
+  /** Enable responsive font sizing (scales based on device) */
+  responsive?: boolean;
 }
 
 export const AtomicText: React.FC<AtomicTextProps> = ({
@@ -24,8 +26,13 @@ export const AtomicText: React.FC<AtomicTextProps> = ({
   textAlign,
   style,
   testID,
+  responsive = false,
 }) => {
-  const tokens = useAppDesignTokens();
+  const staticTokens = useAppDesignTokens();
+  const responsiveTokens = useResponsiveDesignTokens();
+
+  // Use responsive tokens if enabled, otherwise use static
+  const tokens = responsive ? responsiveTokens : staticTokens;
 
   // Get typography style from tokens
   const typographyStyle = (tokens.typography as Record<string, any>)[type];
@@ -33,10 +40,16 @@ export const AtomicText: React.FC<AtomicTextProps> = ({
   // 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;
+
   const textStyle: StyleProp<TextStyle> = [
     typographyStyle,
     {
       color: resolvedColor,
+      ...(fontSize && { fontSize }),
       ...(textAlign && { textAlign }),
     },
     style,

package/src/atoms/index.ts

@@ -70,3 +70,12 @@ export {
 
 // DatePicker
 export { AtomicDatePicker, type AtomicDatePickerProps } from './AtomicDatePicker';
+
+// Skeleton
+export {
+    AtomicSkeleton,
+    type AtomicSkeletonProps,
+    type SkeletonPattern,
+    type SkeletonConfig,
+    SKELETON_PATTERNS,
+} from './skeleton';

package/src/atoms/skeleton/AtomicSkeleton.tsx

@@ -0,0 +1,143 @@
+/**
+ * AtomicSkeleton - Skeleton Loader Component
+ *
+ * Skeleton placeholder loader with shimmer animation for loading states.
+ * 
+ * @example
+ * ```tsx
+ * // List skeleton
+ * <AtomicSkeleton pattern="list" count={5} />
+ * 
+ * // Card skeleton
+ * <AtomicSkeleton pattern="card" count={3} />
+ * 
+ * // Custom skeleton
+ * <AtomicSkeleton 
+ *   pattern="custom"
+ *   custom={[
+ *     { width: '100%', height: 200, borderRadius: 12 },
+ *     { width: '80%', height: 20, borderRadius: 4 }
+ *   ]}
+ * />
+ * ```
+ */
+
+import React, { useEffect, useRef } from 'react';
+import { View, StyleSheet, Animated, type StyleProp, type ViewStyle } from 'react-native';
+import { useAppDesignTokens } from '../../theme';
+import type { SkeletonPattern, SkeletonConfig } from './AtomicSkeleton.types';
+import { SKELETON_PATTERNS } from './AtomicSkeleton.types';
+
+const SHIMMER_DURATION = 1200;
+
+export interface AtomicSkeletonProps {
+  /** Skeleton pattern preset */
+  pattern?: SkeletonPattern;
+  /** Custom skeleton configurations */
+  custom?: SkeletonConfig[];
+  /** Number of skeleton items to render */
+  count?: number;
+  /** Custom container style */
+  style?: StyleProp<ViewStyle>;
+  /** Disable shimmer animation */
+  disableAnimation?: boolean;
+  /** Test ID for testing */
+  testID?: string;
+}
+
+/**
+ * Skeleton loader component with shimmer animation
+ * 
+ * Provides visual feedback during content loading with customizable patterns
+ */
+export const AtomicSkeleton: React.FC<AtomicSkeletonProps> = ({
+  pattern = 'list',
+  custom,
+  count = 1,
+  style,
+  disableAnimation = false,
+  testID,
+}) => {
+  const tokens = useAppDesignTokens();
+  const skeletonConfigs = pattern === 'custom' && custom
+    ? custom
+    : SKELETON_PATTERNS[pattern];
+
+  const shimmerAnim = useRef(new Animated.Value(0)).current;
+
+  useEffect(() => {
+    if (disableAnimation) return;
+
+    const shimmerAnimation = Animated.loop(
+      Animated.sequence([
+        Animated.timing(shimmerAnim, {
+          toValue: 1,
+          duration: SHIMMER_DURATION,
+          useNativeDriver: false,
+        }),
+        Animated.timing(shimmerAnim, {
+          toValue: 0,
+          duration: 0,
+          useNativeDriver: false,
+        }),
+      ])
+    );
+
+    shimmerAnimation.start();
+
+    return () => {
+      shimmerAnimation.stop();
+    };
+  }, [shimmerAnim, disableAnimation]);
+
+  const backgroundColor = shimmerAnim.interpolate({
+    inputRange: [0, 0.5, 1],
+    outputRange: [
+      tokens.colors.surfaceSecondary,
+      tokens.colors.border,
+      tokens.colors.surfaceSecondary,
+    ],
+  });
+
+  const renderSkeletonItem = (index: number) => (
+    <View key={`skeleton-group-${index}`} style={styles.skeletonGroup}>
+      {skeletonConfigs.map((config, configIndex) => (
+        <Animated.View
+          key={`skeleton-${index}-${configIndex}`}
+          style={[
+            styles.skeleton,
+            {
+              width: config.width as number | `${number}%` | undefined,
+              height: config.height,
+              borderRadius: config.borderRadius,
+              marginBottom: config.marginBottom,
+              backgroundColor: disableAnimation
+                ? tokens.colors.surfaceSecondary
+                : backgroundColor,
+            } as any,
+          ]}
+        />
+      ))}
+    </View>
+  );
+
+  return (
+    <View style={[styles.container, style]} testID={testID}>
+      {Array.from({ length: count }).map((_, index) => renderSkeletonItem(index))}
+    </View>
+  );
+};
+
+AtomicSkeleton.displayName = 'AtomicSkeleton';
+
+const styles = StyleSheet.create({
+  container: {
+    width: '100%',
+  },
+  skeletonGroup: {
+    width: '100%',
+  },
+  skeleton: {
+    overflow: 'hidden',
+  },
+});

package/src/atoms/skeleton/AtomicSkeleton.types.ts

@@ -0,0 +1,55 @@
+/**
+ * AtomicSkeleton Types
+ *
+ * Type definitions and configurations for skeleton loading states.
+ */
+
+/**
+ * Skeleton loader pattern presets
+ */
+export type SkeletonPattern = 'list' | 'card' | 'profile' | 'text' | 'custom';
+
+/**
+ * Skeleton loader configuration for individual skeleton elements
+ */
+export interface SkeletonConfig {
+  /** Width of skeleton element (number in pixels or percentage string) */
+  width?: number | string;
+  /** Height of skeleton element in pixels */
+  height?: number;
+  /** Border radius in pixels */
+  borderRadius?: number;
+  /** Bottom margin in pixels */
+  marginBottom?: number;
+}
+
+/**
+ * Predefined skeleton pattern configurations
+ * 
+ * - **list**: Single row skeleton for list items
+ * - **card**: Card-style skeleton with image and text placeholders
+ * - **profile**: Profile skeleton with avatar and text
+ * - **text**: Multiple text line skeletons
+ * - **custom**: Use custom configuration
+ */
+export const SKELETON_PATTERNS: Record<SkeletonPattern, SkeletonConfig[]> = {
+  list: [
+    { width: '100%', height: 60, borderRadius: 8, marginBottom: 12 },
+  ],
+  card: [
+    { width: '100%', height: 200, borderRadius: 12, marginBottom: 16 },
+    { width: '80%', height: 20, borderRadius: 4, marginBottom: 8 },
+    { width: '60%', height: 16, borderRadius: 4, marginBottom: 0 },
+  ],
+  profile: [
+    { width: 80, height: 80, borderRadius: 40, marginBottom: 16 },
+    { width: '60%', height: 24, borderRadius: 4, marginBottom: 8 },
+    { width: '40%', height: 16, borderRadius: 4, marginBottom: 0 },
+  ],
+  text: [
+    { width: '100%', height: 16, borderRadius: 4, marginBottom: 8 },
+    { width: '90%', height: 16, borderRadius: 4, marginBottom: 8 },
+    { width: '95%', height: 16, borderRadius: 4, marginBottom: 0 },
+  ],
+  custom: [],
+};

package/src/atoms/skeleton/index.ts

@@ -0,0 +1,9 @@
+/**
+ * AtomicSkeleton - Skeleton Loader
+ * 
+ * Exports skeleton loader component and types
+ */
+
+export { AtomicSkeleton, type AtomicSkeletonProps } from './AtomicSkeleton';
+export type { SkeletonPattern, SkeletonConfig } from './AtomicSkeleton.types';
+export { SKELETON_PATTERNS } from './AtomicSkeleton.types';

package/src/index.ts

@@ -18,6 +18,7 @@
 
 export {
   useAppDesignTokens,
+  useResponsiveDesignTokens,
   useCommonStyles,
   useDesignSystemTheme,
   useTheme,
@@ -33,6 +34,7 @@ export {
   typography,
   borders,
   createDesignTokens,
+  createResponsiveDesignTokens,
   lightTheme,
   darkTheme,
   createResponsiveValue,
@@ -51,6 +53,10 @@ export {
   type AvatarSizes,
   type ComponentSizes,
   type DesignTokens,
+  type ResponsiveDesignTokens,
+  type ResponsiveSpacing,
+  type ResponsiveTypography,
+  type ResponsiveBorderRadius,
   type Theme,
   type ExtendedColorPalette,
   type NavigationTheme,
@@ -136,6 +142,7 @@ export {
   AtomicProgress,
   AtomicPicker,
   AtomicDatePicker,
+  AtomicSkeleton,
   type IconName,
   type IconSize,
   type IconColor,
@@ -161,6 +168,10 @@ export {
   type PickerOption,
   type PickerSize,
   type AtomicDatePickerProps,
+  type AtomicSkeletonProps,
+  type SkeletonPattern,
+  type SkeletonConfig,
+  SKELETON_PATTERNS,
 } from './atoms';
 
 // =============================================================================
@@ -177,7 +188,13 @@ export {
   ConfirmationModal,
   useConfirmationModal,
   StepProgress,
+  Grid,
+  List,
+  Container,
   type BaseModalProps,
+  type GridProps,
+  type ListProps,
+  type ContainerProps,
 } from './molecules';
 
 // =============================================================================
@@ -188,6 +205,8 @@ export {
   ScreenLayout,
   AppHeader,
   FormContainer,
+  FormLayout,
+  type FormLayoutProps,
 } from './organisms';
 
 // =============================================================================

package/src/molecules/Container/Container.tsx

@@ -0,0 +1,76 @@
+/**
+ * Container - Max-Width Content Container (Molecule)
+ *
+ * Centers content with responsive max-width based on device
+ * Prevents content from being too wide on tablets
+ */
+
+import React, { useMemo } from 'react';
+import { View, StyleSheet, type StyleProp, type ViewStyle } from 'react-native';
+import { useResponsive } from '../../responsive';
+import { useResponsiveDesignTokens } from '../../theme';
+
+export interface ContainerProps {
+  /** Container content */
+  children: React.ReactNode;
+
+  /** Maximum width (default: responsive based on device) */
+  maxWidth?: number;
+
+  /** Horizontal padding (uses responsive tokens) */
+  padding?: boolean;
+
+  /** Center content horizontally */
+  center?: boolean;
+
+  /** Container style */
+  style?: StyleProp<ViewStyle>;
+
+  /** Test ID */
+  testID?: string;
+}
+
+/**
+ * Responsive container with max-width
+ *
+ * @example
+ * ```tsx
+ * <Container maxWidth={600} padding center>
+ *   <Text>Centered content with max width</Text>
+ * </Container>
+ * ```
+ */
+export const Container: React.FC<ContainerProps> = ({
+  children,
+  maxWidth,
+  padding = true,
+  center = true,
+  style,
+  testID,
+}) => {
+  const { maxContentWidth } = useResponsive();
+  const tokens = useResponsiveDesignTokens();
+
+  const containerWidth = maxWidth || maxContentWidth;
+
+  const styles = useMemo(
+    () =>
+      StyleSheet.create({
+        container: {
+          width: '100%',
+          maxWidth: containerWidth,
+          ...(center && { alignSelf: 'center' }),
+          ...(padding && {
+            paddingHorizontal: tokens.spacing.screenPadding,
+          }),
+        },
+      }),
+    [containerWidth, center, padding, tokens.spacing.screenPadding]
+  );
+
+  return (
+    <View style={[styles.container, style]} testID={testID}>
+      {children}
+    </View>
+  );
+};

package/src/molecules/Container/index.ts

@@ -0,0 +1 @@
+export { Container, type ContainerProps } from './Container';

package/src/molecules/Grid/Grid.tsx

@@ -0,0 +1,94 @@
+/**
+ * Grid - Responsive Grid Layout (Molecule)
+ *
+ * Automatic responsive grid that adjusts columns based on device
+ * Uses design system responsive utilities
+ */
+
+import React, { useMemo } from 'react';
+import { View, StyleSheet, type StyleProp, type ViewStyle } from 'react-native';
+import { useResponsive } from '../../responsive';
+import { useResponsiveDesignTokens } from '../../theme';
+
+export interface GridProps {
+  /** Grid items to render */
+  children: React.ReactNode;
+
+  /** Number of columns on mobile (default: 2) */
+  mobileColumns?: number;
+
+  /** Number of columns on tablet (default: 4) */
+  tabletColumns?: number;
+
+  /** Gap between grid items (uses design tokens spacing) */
+  gap?: number;
+
+  /** Container style */
+  style?: StyleProp<ViewStyle>;
+
+  /** Test ID for testing */
+  testID?: string;
+}
+
+/**
+ * Responsive grid component
+ *
+ * @example
+ * ```tsx
+ * <Grid mobileColumns={2} tabletColumns={4} gap={16}>
+ *   <Card />
+ *   <Card />
+ *   <Card />
+ * </Grid>
+ * ```
+ */
+export const Grid: React.FC<GridProps> = ({
+  children,
+  mobileColumns = 2,
+  tabletColumns = 4,
+  gap,
+  style,
+  testID,
+}) => {
+  const { gridColumns, spacingMultiplier } = useResponsive();
+  const tokens = useResponsiveDesignTokens();
+
+  // Calculate responsive columns
+  const columns = gridColumns || (mobileColumns && tabletColumns
+    ? undefined
+    : mobileColumns);
+
+  // Use responsive gap or default
+  const responsiveGap = gap ? gap * spacingMultiplier : tokens.spacing.md;
+
+  const styles = useMemo(
+    () =>
+      StyleSheet.create({
+        container: {
+          flexDirection: 'row',
+          flexWrap: 'wrap',
+          gap: responsiveGap,
+        },
+      }),
+    [responsiveGap]
+  );
+
+  // Convert children to array for mapping
+  const childArray = React.Children.toArray(children);
+
+  return (
+    <View style={[styles.container, style]} testID={testID}>
+      {childArray.map((child, index) => (
+        <View
+          key={index}
+          style={{
+            flex: columns ? 1 / columns - 0.01 : undefined,
+            minWidth: columns ? `${100 / columns - 1}%` : undefined,
+          }}
+        >
+          {child}
+        </View>
+      ))}
+    </View>
+  );
+};

package/src/molecules/Grid/index.ts

@@ -0,0 +1 @@
+export { Grid, type GridProps } from './Grid';

package/src/molecules/List/List.tsx

@@ -0,0 +1,85 @@
+/**
+ * List - Responsive List Wrapper (Molecule)
+ *
+ * FlatList wrapper with responsive item sizing and built-in pull-to-refresh
+ * Uses design system responsive utilities
+ */
+
+import React from 'react';
+import { FlatList, RefreshControl, type FlatListProps, type ListRenderItem } from 'react-native';
+import { useResponsiveDesignTokens } from '../../theme';
+
+export interface ListProps<T> extends Omit<FlatListProps<T>, 'renderItem'> {
+  /** Data array */
+  data: readonly T[] | null | undefined;
+
+  /** Render function for each item */
+  renderItem: ListRenderItem<T>;
+
+  /** Pull-to-refresh handler */
+  onRefresh?: () => void;
+
+  /** Refreshing state */
+  refreshing?: boolean;
+
+  /** Key extractor (required for proper list performance) */
+  keyExtractor: (item: T, index: number) => string;
+
+  /** Content container padding (uses responsive tokens) */
+  contentPadding?: boolean;
+}
+
+/**
+ * Responsive list component with pull-to-refresh
+ *
+ * @example
+ * ```tsx
+ * <List
+ *   data={items}
+ *   renderItem={({ item }) => <ItemCard item={item} />}
+ *   keyExtractor={(item) => item.id}
+ *   onRefresh={handleRefresh}
+ *   refreshing={isRefreshing}
+ *   contentPadding
+ * />
+ * ```
+ */
+export const List = <T,>({
+  data,
+  renderItem,
+  onRefresh,
+  refreshing = false,
+  keyExtractor,
+  contentPadding = false,
+  ...rest
+}: ListProps<T>) => {
+  const tokens = useResponsiveDesignTokens();
+
+  return (
+    <FlatList
+      data={data}
+      renderItem={renderItem}
+      keyExtractor={keyExtractor}
+      refreshControl={
+        onRefresh ? (
+          <RefreshControl
+            refreshing={refreshing}
+            onRefresh={onRefresh}
+            tintColor={tokens.colors.primary}
+            colors={[tokens.colors.primary]}
+          />
+        ) : undefined
+      }
+      contentContainerStyle={
+        contentPadding
+          ? {
+              paddingHorizontal: tokens.spacing.screenPadding,
+              paddingBottom: tokens.spacing.lg,
+            }
+          : undefined
+      }
+      showsVerticalScrollIndicator={false}
+      {...rest}
+    />
+  );
+};

package/src/molecules/List/index.ts

@@ -0,0 +1 @@
+export { List, type ListProps } from './List';

package/src/molecules/index.ts

@@ -22,3 +22,8 @@ export type {
 // Divider
 export * from './Divider';
 export * from "./StepProgress";
+
+// Responsive Components
+export { Grid, type GridProps } from './Grid';
+export { List, type ListProps } from './List';
+export { Container, type ContainerProps } from './Container';

package/src/organisms/FormLayout/FormLayout.tsx

@@ -0,0 +1,117 @@
+/**
+ * FormLayout - Responsive Form Container
+ *
+ * Organism for creating responsive forms with consistent spacing
+ * Automatically handles keyboard avoidance and scrolling
+ */
+
+import React, { useMemo } from 'react';
+import { View, ScrollView, KeyboardAvoidingView, StyleSheet, type StyleProp, type ViewStyle } from 'react-native';
+import { useResponsiveDesignTokens } from '../../theme';
+import { useResponsive } from '../../responsive';
+
+export interface FormLayoutProps {
+  /** Form fields and content */
+  children: React.ReactNode;
+
+  /** Footer content (e.g., submit button) */
+  footer?: React.ReactNode;
+
+  /** Form container style */
+  style?: StyleProp<ViewStyle>;
+
+  /** Disable keyboard avoiding behavior */
+  disableKeyboardAvoid?: boolean;
+
+  /** Disable scroll */
+  disableScroll?: boolean;
+
+  /** Test ID */
+  testID?: string;
+}
+
+/**
+ * Responsive form layout with keyboard avoidance
+ *
+ * @example
+ * ```tsx
+ * <FormLayout
+ *   footer={<AtomicButton title="Submit" onPress={handleSubmit} />}
+ * >
+ *   <FormField label="Name" value={name} onChangeText={setName} />
+ *   <FormField label="Email" value={email} onChangeText={setEmail} />
+ * </FormLayout>
+ * ```
+ */
+export const FormLayout: React.FC<FormLayoutProps> = ({
+  children,
+  footer,
+  style,
+  disableKeyboardAvoid = false,
+  disableScroll = false,
+  testID,
+}) => {
+  const tokens = useResponsiveDesignTokens();
+  const { insets } = useResponsive();
+
+  const styles = useMemo(
+    () =>
+      StyleSheet.create({
+        container: {
+          flex: 1,
+        },
+        scrollContent: {
+          flexGrow: 1,
+          paddingHorizontal: tokens.spacing.screenPadding,
+          paddingTop: tokens.spacing.md,
+          paddingBottom: tokens.spacing.xl,
+        },
+        formContent: {
+          gap: tokens.spacing.lg,
+        },
+        footer: {
+          paddingHorizontal: tokens.spacing.screenPadding,
+          paddingBottom: Math.max(insets.bottom, tokens.spacing.md),
+          paddingTop: tokens.spacing.md,
+          backgroundColor: tokens.colors.surface,
+          borderTopWidth: 1,
+          borderTopColor: tokens.colors.border,
+        },
+      }),
+    [tokens, insets.bottom]
+  );
+
+  const content = (
+    <View style={styles.formContent} testID={testID}>
+      {children}
+    </View>
+  );
+
+  const scrollableContent = disableScroll ? (
+    <View style={styles.scrollContent}>{content}</View>
+  ) : (
+    <ScrollView
+      style={styles.container}
+      contentContainerStyle={styles.scrollContent}
+      keyboardShouldPersistTaps="handled"
+      showsVerticalScrollIndicator={false}
+    >
+      {content}
+    </ScrollView>
+  );
+
+  const mainContent = disableKeyboardAvoid ? (
+    scrollableContent
+  ) : (
+    <KeyboardAvoidingView style={styles.container} behavior="padding">
+      {scrollableContent}
+    </KeyboardAvoidingView>
+  );
+
+  return (
+    <View style={[styles.container, style]}>
+      {mainContent}
+      {footer && <View style={styles.footer}>{footer}</View>}
+    </View>
+  );
+};

package/src/organisms/FormLayout/index.ts

@@ -0,0 +1 @@
+export { FormLayout, type FormLayoutProps } from './FormLayout';

package/src/organisms/index.ts

@@ -14,18 +14,22 @@
 export { AppHeader } from './AppHeader';
 export { ScreenLayout } from './ScreenLayout';
 export { FormContainer } from './FormContainer';
+export { FormLayout } from './FormLayout';
 
 // Type exports
 export type { AppHeaderProps } from './AppHeader';
 export type { ScreenLayoutProps } from './ScreenLayout';
 export type { FormContainerProps } from './FormContainer';
+export type { FormLayoutProps } from './FormLayout';
 
 // Union type for all organism props (used for type narrowing)
 import type { AppHeaderProps } from './AppHeader';
 import type { ScreenLayoutProps } from './ScreenLayout';
 import type { FormContainerProps } from './FormContainer';
+import type { FormLayoutProps } from './FormLayout';
 
-export type OrganismComponentProps = 
+export type OrganismComponentProps =
   | { type: 'AppHeader'; props: AppHeaderProps }
   | { type: 'ScreenLayout'; props: ScreenLayoutProps }
-  | { type: 'FormContainer'; props: FormContainerProps };
+  | { type: 'FormContainer'; props: FormContainerProps }
+  | { type: 'FormLayout'; props: FormLayoutProps };

package/src/theme/core/ResponsiveTokenFactory.ts

@@ -0,0 +1,266 @@
+/**
+ * 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

@@ -0,0 +1,82 @@
+/**
+ * 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 '@umituz/react-native-design-system';
+ *
+ * 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;
+};

package/src/theme/index.ts

@@ -55,11 +55,24 @@ export {
   type DesignTokens,
 } from './core/TokenFactory';
 
+// =============================================================================
+// RESPONSIVE TOKEN FACTORY
+// =============================================================================
+
+export {
+  createResponsiveDesignTokens,
+  type ResponsiveDesignTokens,
+  type ResponsiveSpacing,
+  type ResponsiveTypography,
+  type ResponsiveBorderRadius,
+} from './core/ResponsiveTokenFactory';
+
 // =============================================================================
 // 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';