@umituz/react-native-design-system 4.28.4 → 4.28.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-design-system",
-  "version": "4.28.4",
+  "version": "4.28.6",
   "description": "Universal design system for React Native apps with safe navigation hooks - updated SKILL.md with navigation documentation",
   "main": "./src/index.ts",
   "types": "./dist/index.d.ts",

package/src/atoms/AtomicInput.tsx

@@ -92,12 +92,12 @@ export const AtomicInput = React.forwardRef<React.ElementRef<typeof TextInput>,
       fontSize: sizeConfig.fontSize,
       lineHeight: (sizeConfig.fontSize || 16) * 1.2,
       color: textColor,
-      paddingVertical: 4,
+      paddingVertical: Math.floor(4 * tokens.spacingMultiplier),
       paddingLeft: leadingIcon ? iconPadding : undefined,
       paddingRight: (trailingIcon || showPasswordToggle) ? iconPadding : undefined,
     },
     inputStyle,
-  ], [sizeConfig, textColor, leadingIcon, trailingIcon, showPasswordToggle, iconPadding, inputStyle]);
+  ], [sizeConfig, textColor, leadingIcon, trailingIcon, showPasswordToggle, iconPadding, inputStyle, tokens.spacingMultiplier]);
 
   return (
     <View testID={testID}>

package/src/index.ts

@@ -31,7 +31,7 @@
  *   /tanstack     - TanstackProvider
  *   /loading      - LoadingProvider, useGlobalLoading
  *   /haptics      - HapticService, useHaptics
- *   /onboarding   - OnboardingScreen
+ *   /onboarding   - OnboardingScreen, ChatOnboardingScreen (chat-based)
  *   /gallery      - gallerySaveService
  *   /carousel     - Carousel components
  *   /init         - createAppInitializer, createEnvConfig

package/src/molecules/Divider/Divider.tsx

@@ -75,7 +75,7 @@ export const Divider: React.FC<DividerProps> = ({
     style,
 }) => {
     const tokens = useAppDesignTokens();
-    const spacingValue = DividerUtils.getSpacing(spacing);
+    const spacingValue = DividerUtils.getSpacing(spacing, tokens.spacingMultiplier);
     const borderColor = color || tokens.colors.border;
 
     // Determine border style based on lineStyle
@@ -144,7 +144,7 @@ export const Divider: React.FC<DividerProps> = ({
                 <AtomicText
                     type="bodySmall"
                     color="secondary"
-                    style={styles.textLabel}
+                    style={[styles.textLabel, { marginHorizontal: Math.floor(12 * tokens.spacingMultiplier) }]}
                 >
                     {text}
                 </AtomicText>
@@ -181,7 +181,6 @@ const styles = StyleSheet.create({
         flex: 1,
     },
     textLabel: {
-        marginHorizontal: 12,
         fontWeight: '500',
     },
 });

package/src/molecules/Divider/types.ts

@@ -42,24 +42,41 @@ export interface DividerConfig {
 }
 
 /**
- * Spacing configurations (px)
+ * Base spacing configurations (px) - will be multiplied by spacingMultiplier
  */
-export const SPACING_CONFIGS: Record<DividerSpacing, number> = {
+const BASE_SPACING_CONFIGS: Record<DividerSpacing, number> = {
     none: 0,
     small: 8,
     medium: 16,
     large: 24,
 };
 
+/**
+ * Get responsive spacing value
+ * Multiplies base spacing by spacingMultiplier for tablet/small device support
+ */
+export const getSpacingConfigs = (spacingMultiplier: number): Record<DividerSpacing, number> => {
+    return Object.entries(BASE_SPACING_CONFIGS).reduce((acc, [key, value]) => {
+        acc[key as DividerSpacing] = Math.floor(value * spacingMultiplier);
+        return acc;
+    }, {} as Record<DividerSpacing, number>);
+};
+
+/**
+ * @deprecated Use getSpacingConfigs(spacingMultiplier) instead
+ * Kept for backward compatibility
+ */
+export const SPACING_CONFIGS = BASE_SPACING_CONFIGS;
+
 /**
  * Divider utility class
  */
 export class DividerUtils {
     /**
-     * Get spacing value
+     * Get spacing value (responsive)
      */
-    static getSpacing(spacing: DividerSpacing): number {
-        return SPACING_CONFIGS[spacing];
+    static getSpacing(spacing: DividerSpacing, spacingMultiplier: number = 1): number {
+        return Math.floor(BASE_SPACING_CONFIGS[spacing] * spacingMultiplier);
     }
 
     /**

package/src/molecules/StepHeader/StepHeader.constants.ts

@@ -0,0 +1,48 @@
+/**
+ * StepHeader Constants
+ *
+ * Base size configurations for StepHeader component.
+ * All sizes will be multiplied by spacingMultiplier at runtime.
+ */
+
+/**
+ * Base font sizes (px) - before spacingMultiplier
+ */
+export const BASE_FONT_SIZES = {
+  title: 28,
+  subtitle: 16,
+} as const;
+
+/**
+ * Base spacing (px) - before spacingMultiplier
+ */
+export const BASE_SPACING = {
+  marginBottom: 32,
+  paddingHorizontal: 24,
+  stepIndicatorMarginBottom: 12,
+  titleMarginBottom: 12,
+} as const;
+
+/**
+ * Base step dot sizes (px) - before spacingMultiplier
+ */
+export const BASE_STEP_DOT_SIZES = {
+  width: 8,
+  height: 8,
+  borderRadius: 4,
+  marginHorizontal: 4,
+} as const;
+
+/**
+ * Default configuration
+ */
+export const DEFAULT_CONFIG = {
+  showStepIndicator: false,
+  titleAlignment: "left" as const,
+  titleFontSize: BASE_FONT_SIZES.title,
+  subtitleFontSize: BASE_FONT_SIZES.subtitle,
+  spacing: {
+    marginBottom: BASE_SPACING.marginBottom,
+    paddingHorizontal: BASE_SPACING.paddingHorizontal,
+  },
+} as const;

package/src/molecules/StepHeader/StepHeader.tsx

@@ -9,6 +9,16 @@ import React, { useMemo } from "react";
 import { View, StyleSheet, type ViewStyle, type StyleProp } from "react-native";
 import { AtomicText } from "../../atoms/AtomicText";
 import { useAppDesignTokens } from "../../theme/hooks/useAppDesignTokens";
+import {
+  calculateResponsiveSize,
+  calculateLineHeight,
+} from "../../utils/responsiveUtils";
+import {
+  BASE_FONT_SIZES,
+  BASE_SPACING,
+  BASE_STEP_DOT_SIZES,
+  DEFAULT_CONFIG,
+} from "./StepHeader.constants";
 
 export interface StepHeaderConfig {
   showStepIndicator?: boolean;
@@ -30,17 +40,6 @@ export interface StepHeaderProps {
   style?: StyleProp<ViewStyle>;
 }
 
-const DEFAULT_CONFIG: StepHeaderConfig = {
-  showStepIndicator: false,
-  titleAlignment: "left",
-  titleFontSize: 28,
-  subtitleFontSize: 16,
-  spacing: {
-    marginBottom: 32,
-    paddingHorizontal: 24,
-  },
-};
-
 export const StepHeader: React.FC<StepHeaderProps> = ({
   title,
   subtitle,
@@ -49,24 +48,31 @@ export const StepHeader: React.FC<StepHeaderProps> = ({
 }) => {
   const tokens = useAppDesignTokens();
   const cfg = useMemo(() => ({ ...DEFAULT_CONFIG, ...config }), [config]);
+  const spacingMultiplier = tokens.spacingMultiplier;
 
   const styles = useMemo(
     () =>
       StyleSheet.create({
         container: {
-          paddingHorizontal: cfg.spacing?.paddingHorizontal ?? 24,
-          marginBottom: cfg.spacing?.marginBottom ?? 32,
+          paddingHorizontal: calculateResponsiveSize(
+            cfg.spacing?.paddingHorizontal ?? BASE_SPACING.paddingHorizontal,
+            spacingMultiplier
+          ),
+          marginBottom: calculateResponsiveSize(
+            cfg.spacing?.marginBottom ?? BASE_SPACING.marginBottom,
+            spacingMultiplier
+          ),
         },
         stepIndicator: {
           flexDirection: "row",
           alignItems: "center",
-          marginBottom: 12,
+          marginBottom: calculateResponsiveSize(BASE_SPACING.stepIndicatorMarginBottom, spacingMultiplier),
         },
         stepDot: {
-          width: 8,
-          height: 8,
-          borderRadius: 4,
-          marginHorizontal: 4,
+          width: calculateResponsiveSize(BASE_STEP_DOT_SIZES.width, spacingMultiplier),
+          height: calculateResponsiveSize(BASE_STEP_DOT_SIZES.height, spacingMultiplier),
+          borderRadius: calculateResponsiveSize(BASE_STEP_DOT_SIZES.borderRadius, spacingMultiplier),
+          marginHorizontal: calculateResponsiveSize(BASE_STEP_DOT_SIZES.marginHorizontal, spacingMultiplier),
         },
         activeDot: {
           backgroundColor: tokens.colors.primary,
@@ -75,23 +81,23 @@ export const StepHeader: React.FC<StepHeaderProps> = ({
           backgroundColor: `${tokens.colors.primary}30`,
         },
         title: {
-          fontSize: cfg.titleFontSize,
+          fontSize: calculateResponsiveSize(cfg.titleFontSize ?? BASE_FONT_SIZES.title, spacingMultiplier),
           fontWeight: "900",
           color: tokens.colors.textPrimary,
           textAlign: cfg.titleAlignment,
-          marginBottom: subtitle ? 12 : 0,
+          marginBottom: subtitle ? calculateResponsiveSize(BASE_SPACING.titleMarginBottom, spacingMultiplier) : 0,
           letterSpacing: 0.3,
         },
         subtitle: {
-          fontSize: cfg.subtitleFontSize,
+          fontSize: calculateResponsiveSize(cfg.subtitleFontSize ?? BASE_FONT_SIZES.subtitle, spacingMultiplier),
           fontWeight: "500",
           color: tokens.colors.textSecondary,
           textAlign: cfg.titleAlignment,
-          lineHeight: (cfg.subtitleFontSize ?? 16) * 1.5,
+          lineHeight: calculateLineHeight(cfg.subtitleFontSize ?? BASE_FONT_SIZES.subtitle, spacingMultiplier),
           opacity: 0.9,
         },
       }),
-    [tokens, cfg, subtitle],
+    [tokens, cfg, subtitle, spacingMultiplier],
   );
 
   return (

package/src/molecules/StepProgress/StepProgress.constants.ts

@@ -0,0 +1,23 @@
+/**
+ * StepProgress Constants
+ *
+ * Base size configurations for StepProgress component.
+ * All sizes will be multiplied by spacingMultiplier at runtime.
+ */
+
+/**
+ * Base spacing (px) - before spacingMultiplier
+ */
+export const BASE_SPACING = {
+  gap: 8,
+  paddingHorizontal: 24,
+  paddingVertical: 16,
+} as const;
+
+/**
+ * Base step dimensions (px) - before spacingMultiplier
+ */
+export const BASE_STEP_DIMENSIONS = {
+  height: 4,
+  borderRadius: 2,
+} as const;

package/src/molecules/StepProgress/StepProgress.tsx

@@ -1,6 +1,8 @@
 import React, { useMemo } from "react";
 import { View, StyleSheet, ViewStyle } from "react-native";
 import { useAppDesignTokens } from '../../theme/hooks/useAppDesignTokens';
+import { calculateResponsiveSize } from '../../utils/responsiveUtils';
+import { BASE_SPACING, BASE_STEP_DIMENSIONS } from './StepProgress.constants';
 
 export interface StepProgressProps {
     currentStep: number;
@@ -14,27 +16,28 @@ export const StepProgress: React.FC<StepProgressProps> = ({
     style,
 }) => {
     const tokens = useAppDesignTokens();
+    const spacingMultiplier = tokens.spacingMultiplier;
 
     const styles = useMemo(
         () =>
             StyleSheet.create({
                 container: {
                     flexDirection: "row",
-                    gap: 8,
-                    paddingHorizontal: 24,
-                    paddingVertical: 16,
+                    gap: calculateResponsiveSize(BASE_SPACING.gap, spacingMultiplier),
+                    paddingHorizontal: calculateResponsiveSize(BASE_SPACING.paddingHorizontal, spacingMultiplier),
+                    paddingVertical: calculateResponsiveSize(BASE_SPACING.paddingVertical, spacingMultiplier),
                 },
                 step: {
                     flex: 1,
-                    height: 4,
-                    borderRadius: 2,
+                    height: calculateResponsiveSize(BASE_STEP_DIMENSIONS.height, spacingMultiplier),
+                    borderRadius: calculateResponsiveSize(BASE_STEP_DIMENSIONS.borderRadius, spacingMultiplier),
                     backgroundColor: tokens.colors.border,
                 },
                 activeStep: {
                     backgroundColor: tokens.colors.primary,
                 },
             }),
-        [tokens],
+        [tokens, spacingMultiplier],
     );
 
     return (

package/src/molecules/avatar/Avatar.constants.ts

@@ -4,11 +4,12 @@
  */
 
 import type { AvatarSize, AvatarShape, AvatarType, SizeConfig } from './Avatar.types';
+import { calculateResponsiveSize, calculateResponsiveSizeSubtle } from '../../utils/responsiveUtils';
 
 /**
- * Size configurations (px)
+ * Base size configurations (px) - will be multiplied by spacingMultiplier
  */
-export const SIZE_CONFIGS: Record<AvatarSize, SizeConfig> = {
+export const BASE_SIZE_CONFIGS: Record<AvatarSize, SizeConfig> = {
   xs: {
     size: 24,
     fontSize: 10,
@@ -53,6 +54,23 @@ export const SIZE_CONFIGS: Record<AvatarSize, SizeConfig> = {
   },
 };
 
+/**
+ * Get responsive size configurations
+ * Multiplies base sizes by spacingMultiplier for tablet/small device support
+ */
+export const getSizeConfigs = (spacingMultiplier: number): Record<AvatarSize, SizeConfig> => {
+  return Object.entries(BASE_SIZE_CONFIGS).reduce((acc, [key, config]) => {
+    acc[key as AvatarSize] = {
+      size: calculateResponsiveSize(config.size, spacingMultiplier),
+      fontSize: calculateResponsiveSize(config.fontSize, spacingMultiplier),
+      iconSize: calculateResponsiveSize(config.iconSize, spacingMultiplier),
+      statusSize: calculateResponsiveSize(config.statusSize, spacingMultiplier),
+      borderWidth: calculateResponsiveSizeSubtle(config.borderWidth, spacingMultiplier),
+    };
+    return acc;
+  }, {} as Record<AvatarSize, SizeConfig>);
+};
+
 /**
  * Avatar background colors
  * Vibrant, accessible colors with good contrast

package/src/molecules/avatar/Avatar.tsx

@@ -10,7 +10,8 @@ import { View, Image, StyleSheet, TouchableOpacity, type StyleProp, type ViewSty
 import { useAppDesignTokens } from '../../theme';
 import { AtomicText, AtomicIcon } from '../../atoms';
 import type { AvatarSize, AvatarShape } from './Avatar.types';
-import { SIZE_CONFIGS, AVATAR_CONSTANTS } from './Avatar.constants';
+import type { SizeConfig } from './Avatar.types';
+import { getSizeConfigs, AVATAR_CONSTANTS } from './Avatar.constants';
 import { AvatarUtils } from './Avatar.utils';
 
 export interface AvatarProps {
@@ -33,7 +34,7 @@ interface AvatarContentProps {
   uri?: string;
   initials: string;
   icon: string;
-  config: typeof SIZE_CONFIGS[AvatarSize];
+  config: SizeConfig;
   borderRadius: number;
   imageStyle?: StyleProp<ImageStyle>;
 }
@@ -107,7 +108,8 @@ export const Avatar: React.FC<AvatarProps> = ({
   onPress,
 }) => {
   const tokens = useAppDesignTokens();
-  const config = useMemo(() => SIZE_CONFIGS[size], [size]);
+  const sizeConfigs = useMemo(() => getSizeConfigs(tokens.spacingMultiplier), [tokens.spacingMultiplier]);
+  const config = useMemo(() => sizeConfigs[size], [size, sizeConfigs]);
 
   const hasImage = !!uri;
   const hasName = !!name;

package/src/molecules/avatar/Avatar.utils.ts

@@ -5,7 +5,7 @@
  */
 
 import type { AvatarSize, AvatarShape, AvatarConfig, SizeConfig } from './Avatar.types';
-import { AVATAR_COLORS, STATUS_COLORS, SHAPE_CONFIGS, SIZE_CONFIGS } from './Avatar.constants';
+import { AVATAR_COLORS, STATUS_COLORS, SHAPE_CONFIGS, BASE_SIZE_CONFIGS } from './Avatar.constants';
 
 /**
  * Avatar utility class
@@ -71,10 +71,10 @@ export class AvatarUtils {
   }
 
   /**
-   * Get size config
+   * Get base size config (before spacingMultiplier)
    */
-  static getSizeConfig(size: AvatarSize): SizeConfig {
-    return SIZE_CONFIGS[size] ?? SIZE_CONFIGS.md;
+  static getBaseSizeConfig(size: AvatarSize): SizeConfig {
+    return BASE_SIZE_CONFIGS[size] ?? BASE_SIZE_CONFIGS.md;
   }
 
   /**

package/src/molecules/avatar/AvatarGroup.tsx

@@ -11,7 +11,7 @@ import { useAppDesignTokens } from '../../theme';
 import { AtomicText } from '../../atoms';
 import { Avatar } from './Avatar';
 import type { AvatarSize, AvatarShape } from './Avatar.types';
-import { SIZE_CONFIGS, AVATAR_CONSTANTS } from './Avatar.constants';
+import { BASE_SIZE_CONFIGS, AVATAR_CONSTANTS } from './Avatar.constants';
 
 /**
  * Avatar item for group
@@ -138,7 +138,7 @@ export const AvatarGroup: React.FC<AvatarGroupProps> = React.memo(({
   style,
 }) => {
   const tokens = useAppDesignTokens();
-  const config = SIZE_CONFIGS[size];
+  const config = BASE_SIZE_CONFIGS[size];
 
   // Memoize calculations to prevent recalculation on every render
   const { visibleItems, overflowCount, hasOverflow } = useMemo(() => {

package/src/molecules/listitem/styles/listItemStyles.ts

@@ -3,7 +3,6 @@
  */
 import type { ViewStyle, TextStyle } from 'react-native';
 import type { DesignTokens } from '../../../theme';
-import { isTablet } from '../../../device/detection';
 
 export interface ListItemStyles {
     container: ViewStyle;
@@ -14,8 +13,8 @@ export interface ListItemStyles {
 }
 
 export const getListItemStyles = (tokens: DesignTokens): ListItemStyles => {
-    // Responsive minHeight: 56px on phone, 64px on tablet for better ergonomics
-    const minHeight = isTablet() ? 64 : 56;
+    // Responsive minHeight: uses base height (56) multiplied by spacingMultiplier
+    const minHeight = Math.floor(56 * tokens.spacingMultiplier);
 
     return {
         container: {

package/src/molecules/navigation/hooks/useAppFocusEffect.ts

@@ -22,21 +22,24 @@ import { useEffect } from "react";
  * ```
  */
 export function useAppFocusEffect(effect: () => void | (() => void)): void {
+  // Always run the effect - if navigation is ready, useFocusEffect will handle it
+  // Otherwise, useEffect will run it once
+  useEffect(() => {
+    const cleanup = effect();
+    return () => {
+      if (typeof cleanup === 'function') {
+        cleanup();
+      }
+    };
+  }, [effect]);
+
+  // Try to use React Navigation's useFocusEffect if available
   try {
-    // Try to use React Navigation's useFocusEffect
     useRNFocusEffect(effect);
-  } catch (error) {
-    // Navigation not ready - run effect once and cleanup
+  } catch (_error) {
+    // Navigation not ready - useEffect above handles it
     if (__DEV__) {
       console.warn('[useAppFocusEffect] Navigation not ready. Running effect once instead.');
     }
-    useEffect(() => {
-      const cleanup = effect();
-      return () => {
-        if (typeof cleanup === 'function') {
-          cleanup();
-        }
-      };
-    }, [effect]);
   }
 }

package/src/molecules/navigation/hooks/useAppIsFocused.ts

@@ -1,5 +1,4 @@
 import { useIsFocused as useRNIsFocused } from "@react-navigation/native";
-import { useMemo } from "react";
 
 /**
  * useAppIsFocused Hook
@@ -18,7 +17,7 @@ import { useMemo } from "react";
 export function useAppIsFocused(): boolean {
   try {
     return useRNIsFocused();
-  } catch (error) {
+  } catch (_error) {
     // Navigation not ready - return false
     if (__DEV__) {
       console.warn('[useAppIsFocused] Navigation not ready. Returning false.');