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

package/src/molecules/SearchBar/SearchSuggestions.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 import {
     View,
     TouchableOpacity,
@@ -19,6 +19,19 @@ export function SearchSuggestions<T>({
 }: SearchSuggestionsProps<T>) {
     const tokens = useAppDesignTokens();
 
+    const styles = useMemo(() => StyleSheet.create({
+        container: {
+            borderRadius: tokens.borders.radius.lg,
+            overflow: 'hidden',
+        },
+        item: {
+            paddingHorizontal: tokens.spacing.lg,
+            paddingVertical: tokens.spacing.md,
+            minHeight: 48,
+            justifyContent: 'center',
+        },
+    }), [tokens]);
+
     if (!query.trim() && !emptyComponent) {
         return null;
     }
@@ -58,19 +71,6 @@ export function SearchSuggestions<T>({
     );
 }
 
-const styles = StyleSheet.create({
-    container: {
-        borderRadius: 12,
-        overflow: 'hidden',
-    },
-    item: {
-        paddingHorizontal: 16,
-        paddingVertical: 12,
-        minHeight: 48,
-        justifyContent: 'center',
-    },
-});
-
 /**
  * Default suggestion renderer (simple text with highlighting)
  */

package/src/molecules/StepHeader/StepHeader.tsx

@@ -13,12 +13,21 @@ import {
   calculateResponsiveSize,
   calculateLineHeight,
 } from "../../utils/responsiveUtils";
-import {
-  BASE_FONT_SIZES,
-  BASE_SPACING,
-  BASE_STEP_DOT_SIZES,
-  DEFAULT_CONFIG,
-} from "./StepHeader.constants";
+import { SPACING, STEP_INDICATOR } from "../../constants";
+import { createMappedArray } from "../../utils";
+
+const DEFAULT_CONFIG: StepHeaderConfig = {
+  showStepIndicator: false,
+  currentStep: 1,
+  totalSteps: 3,
+  titleAlignment: "left",
+  titleFontSize: undefined,
+  subtitleFontSize: undefined,
+  spacing: {
+    marginBottom: 32,
+    paddingHorizontal: 24,
+  },
+};
 
 export interface StepHeaderConfig {
   showStepIndicator?: boolean;
@@ -43,7 +52,7 @@ export interface StepHeaderProps {
 export const StepHeader: React.FC<StepHeaderProps> = ({
   title,
   subtitle,
-  config = DEFAULT_CONFIG,
+  config,
   style,
 }) => {
   const tokens = useAppDesignTokens();
@@ -55,24 +64,24 @@ export const StepHeader: React.FC<StepHeaderProps> = ({
       StyleSheet.create({
         container: {
           paddingHorizontal: calculateResponsiveSize(
-            cfg.spacing?.paddingHorizontal ?? BASE_SPACING.paddingHorizontal,
+            cfg.spacing?.paddingHorizontal ?? SPACING.xl,
             spacingMultiplier
           ),
           marginBottom: calculateResponsiveSize(
-            cfg.spacing?.marginBottom ?? BASE_SPACING.marginBottom,
+            cfg.spacing?.marginBottom ?? 32,
             spacingMultiplier
           ),
         },
         stepIndicator: {
           flexDirection: "row",
           alignItems: "center",
-          marginBottom: calculateResponsiveSize(BASE_SPACING.stepIndicatorMarginBottom, spacingMultiplier),
+          marginBottom: tokens.spacing.md,
         },
         stepDot: {
-          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),
+          width: calculateResponsiveSize(STEP_INDICATOR.dot.width, spacingMultiplier),
+          height: calculateResponsiveSize(STEP_INDICATOR.dot.height, spacingMultiplier),
+          borderRadius: calculateResponsiveSize(STEP_INDICATOR.dot.borderRadius, spacingMultiplier),
+          marginHorizontal: calculateResponsiveSize(STEP_INDICATOR.dot.marginHorizontal, spacingMultiplier),
         },
         activeDot: {
           backgroundColor: tokens.colors.primary,
@@ -81,19 +90,19 @@ export const StepHeader: React.FC<StepHeaderProps> = ({
           backgroundColor: `${tokens.colors.primary}30`,
         },
         title: {
-          fontSize: calculateResponsiveSize(cfg.titleFontSize ?? BASE_FONT_SIZES.title, spacingMultiplier),
+          fontSize: calculateResponsiveSize(cfg.titleFontSize ?? STEP_INDICATOR.title, spacingMultiplier),
           fontWeight: "900",
           color: tokens.colors.textPrimary,
           textAlign: cfg.titleAlignment,
-          marginBottom: subtitle ? calculateResponsiveSize(BASE_SPACING.titleMarginBottom, spacingMultiplier) : 0,
+          marginBottom: subtitle ? calculateResponsiveSize(STEP_INDICATOR.subtitle, spacingMultiplier) : 0,
           letterSpacing: 0.3,
         },
         subtitle: {
-          fontSize: calculateResponsiveSize(cfg.subtitleFontSize ?? BASE_FONT_SIZES.subtitle, spacingMultiplier),
+          fontSize: calculateResponsiveSize(cfg.subtitleFontSize ?? STEP_INDICATOR.subtitle, spacingMultiplier),
           fontWeight: "500",
           color: tokens.colors.textSecondary,
           textAlign: cfg.titleAlignment,
-          lineHeight: calculateLineHeight(cfg.subtitleFontSize ?? BASE_FONT_SIZES.subtitle, spacingMultiplier),
+          lineHeight: calculateLineHeight(cfg.subtitleFontSize ?? STEP_INDICATOR.subtitle, spacingMultiplier),
           opacity: 0.9,
         },
       }),
@@ -106,7 +115,7 @@ export const StepHeader: React.FC<StepHeaderProps> = ({
         cfg.currentStep !== undefined &&
         cfg.totalSteps !== undefined && (
           <View style={styles.stepIndicator}>
-            {Array.from({ length: cfg.totalSteps }, (_, i) => (
+            {createMappedArray(cfg.totalSteps, (i) => (
               <View
                 key={`step-${i}`}
                 style={[

package/src/molecules/StepProgress/StepProgress.tsx

@@ -2,7 +2,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';
+import { STEP_INDICATOR } from '../../constants';
+import { createMappedArray } from '../../utils/arrayUtils';
 
 export interface StepProgressProps {
     currentStep: number;
@@ -23,14 +24,14 @@ export const StepProgress: React.FC<StepProgressProps> = ({
             StyleSheet.create({
                 container: {
                     flexDirection: "row",
-                    gap: calculateResponsiveSize(BASE_SPACING.gap, spacingMultiplier),
-                    paddingHorizontal: calculateResponsiveSize(BASE_SPACING.paddingHorizontal, spacingMultiplier),
-                    paddingVertical: calculateResponsiveSize(BASE_SPACING.paddingVertical, spacingMultiplier),
+                    gap: tokens.spacing.sm,
+                    paddingHorizontal: tokens.spacing.md,
+                    paddingVertical: tokens.spacing.md,
                 },
                 step: {
                     flex: 1,
-                    height: calculateResponsiveSize(BASE_STEP_DIMENSIONS.height, spacingMultiplier),
-                    borderRadius: calculateResponsiveSize(BASE_STEP_DIMENSIONS.borderRadius, spacingMultiplier),
+                    height: calculateResponsiveSize(STEP_INDICATOR.progressBar.height, spacingMultiplier),
+                    borderRadius: calculateResponsiveSize(STEP_INDICATOR.progressBar.borderRadius, spacingMultiplier),
                     backgroundColor: tokens.colors.border,
                 },
                 activeStep: {
@@ -42,7 +43,7 @@ export const StepProgress: React.FC<StepProgressProps> = ({
 
     return (
         <View style={[styles.container, style]}>
-            {Array.from({ length: totalSteps }).map((_, index) => (
+            {createMappedArray(totalSteps, (index) => (
                 <View
                     key={index}
                     style={[styles.step, index < currentStep && styles.activeStep]}

package/src/molecules/action-footer/ActionFooter.tsx

@@ -5,8 +5,10 @@ import { AtomicText } from '../../atoms/AtomicText';
 import { AtomicIcon } from '../../atoms';
 import { useAppDesignTokens } from '../../theme';
 import type { ActionFooterProps } from './types';
+import { calculateResponsiveSize } from '../../utils/responsiveUtils';
+import { NAVIGATION } from '../../constants';
 
-const createStyles = () => StyleSheet.create({
+const createStyles = (spacingMultiplier: number) => StyleSheet.create({
   container: {
     flexDirection: 'row',
     alignItems: 'center',
@@ -14,8 +16,8 @@ const createStyles = () => StyleSheet.create({
     gap: 0,
   },
   backButton: {
-    width: 56,
-    height: 56,
+    width: calculateResponsiveSize(NAVIGATION.backButton.width, spacingMultiplier),
+    height: calculateResponsiveSize(NAVIGATION.backButton.height, spacingMultiplier),
     borderRadius: 0,
     backgroundColor: '',
     justifyContent: 'center',
@@ -25,7 +27,7 @@ const createStyles = () => StyleSheet.create({
   },
   actionButton: {
     flex: 1,
-    height: 56,
+    height: calculateResponsiveSize(NAVIGATION.backButton.height, spacingMultiplier),
     borderRadius: 0,
     overflow: 'hidden',
   },
@@ -41,12 +43,9 @@ const createStyles = () => StyleSheet.create({
   actionText: {
     color: '',
     fontWeight: '800',
-    fontSize: 18,
   },
 });
 
-const baseStyles = createStyles();
-
 export const ActionFooter = React.memo<ActionFooterProps>(({
   onBack,
   onAction,
@@ -57,6 +56,9 @@ export const ActionFooter = React.memo<ActionFooterProps>(({
   loading = false,
 }) => {
   const tokens = useAppDesignTokens();
+  const spacingMultiplier = tokens.spacingMultiplier;
+
+  const baseStyles = createStyles(spacingMultiplier);
 
   const themedStyles = useMemo(
     () => ({
@@ -84,9 +86,10 @@ export const ActionFooter = React.memo<ActionFooterProps>(({
       actionText: {
         ...baseStyles.actionText,
         color: tokens.colors.onPrimary,
+        fontSize: calculateResponsiveSize(18, spacingMultiplier),
       },
     }),
-    [tokens],
+    [baseStyles, tokens, spacingMultiplier],
   );
 
   const handleBackPress = useCallback(() => {

package/src/molecules/alerts/AlertModal.tsx

@@ -2,13 +2,15 @@
  * AlertModal Component
  */
 
-import React from 'react';
+import React, { useMemo } from 'react';
 import { StyleSheet, View, Modal, Pressable } from 'react-native';
 import { AtomicButton, AtomicText, AtomicIcon } from '../../atoms';
 import { useAppDesignTokens } from '../../theme';
 import { Alert, AlertType } from './AlertTypes';
 import { getAlertBackgroundColor } from './utils/alertUtils';
 import { useAlertDismissHandler } from './hooks';
+import { calculateResponsiveSize } from '../../utils/responsiveUtils';
+import { MODAL_SIZES, ALERT_MODAL_ICON } from '../../constants';
 
 interface AlertModalProps {
     alert: Alert;
@@ -27,11 +29,59 @@ const getAlertIconName = (type: AlertType): string => {
 export const AlertModal: React.FC<AlertModalProps> = ({ alert }) => {
     const tokens = useAppDesignTokens();
     const handleClose = useAlertDismissHandler(alert);
+    const spacingMultiplier = tokens.spacingMultiplier;
 
     const accentColor = getAlertBackgroundColor(alert.type, tokens);
     const iconName = getAlertIconName(alert.type);
     const hasTwoActions = alert.actions.length === 2;
 
+    const styles = useMemo(() => StyleSheet.create({
+        overlay: {
+            flex: 1,
+            justifyContent: 'center',
+            alignItems: 'center',
+            padding: calculateResponsiveSize(MODAL_SIZES.overlayPadding, spacingMultiplier),
+        },
+        backdrop: {
+            ...StyleSheet.absoluteFillObject,
+            backgroundColor: 'rgba(0,0,0,0.55)',
+        },
+        modal: {
+            width: '100%',
+            maxWidth: calculateResponsiveSize(MODAL_SIZES.maxWidth, spacingMultiplier),
+            padding: calculateResponsiveSize(MODAL_SIZES.padding, spacingMultiplier),
+            alignItems: 'center',
+        },
+        iconCircle: {
+            width: calculateResponsiveSize(ALERT_MODAL_ICON.width, spacingMultiplier),
+            height: calculateResponsiveSize(ALERT_MODAL_ICON.height, spacingMultiplier),
+            borderRadius: calculateResponsiveSize(ALERT_MODAL_ICON.borderRadius, spacingMultiplier),
+            justifyContent: 'center',
+            alignItems: 'center',
+            marginBottom: calculateResponsiveSize(ALERT_MODAL_ICON.marginBottom, spacingMultiplier),
+        },
+        title: {
+            fontWeight: '700',
+            textAlign: 'center',
+            marginBottom: tokens.spacing.sm,
+        },
+        message: {
+            textAlign: 'center',
+            lineHeight: calculateResponsiveSize(24, spacingMultiplier),
+            opacity: 0.85,
+        },
+        actionsRow: {
+            flexDirection: 'row',
+            width: '100%',
+        },
+        actionsColumn: {
+            width: '100%',
+        },
+        actionButtonHalf: {
+            flex: 1,
+        },
+    }), [spacingMultiplier, tokens]);
+
     return (
         <Modal
             visible
@@ -60,7 +110,7 @@ export const AlertModal: React.FC<AlertModalProps> = ({ alert }) => {
                     ]}>
                         <AtomicIcon
                             name={iconName}
-                            customSize={36}
+                            customSize={calculateResponsiveSize(36, spacingMultiplier)}
                             customColor={accentColor}
                         />
                     </View>
@@ -121,50 +171,3 @@ export const AlertModal: React.FC<AlertModalProps> = ({ alert }) => {
         </Modal>
     );
 };
-
-const styles = StyleSheet.create({
-    overlay: {
-        flex: 1,
-        justifyContent: 'center',
-        alignItems: 'center',
-        padding: 24,
-    },
-    backdrop: {
-        ...StyleSheet.absoluteFillObject,
-        backgroundColor: 'rgba(0,0,0,0.55)',
-    },
-    modal: {
-        width: '100%',
-        maxWidth: 360,
-        padding: 28,
-        alignItems: 'center',
-    },
-    iconCircle: {
-        width: 76,
-        height: 76,
-        borderRadius: 38,
-        justifyContent: 'center',
-        alignItems: 'center',
-        marginBottom: 20,
-    },
-    title: {
-        fontWeight: '700',
-        textAlign: 'center',
-        marginBottom: 8,
-    },
-    message: {
-        textAlign: 'center',
-        lineHeight: 22,
-        opacity: 0.85,
-    },
-    actionsRow: {
-        flexDirection: 'row',
-        width: '100%',
-    },
-    actionsColumn: {
-        width: '100%',
-    },
-    actionButtonHalf: {
-        flex: 1,
-    },
-});

package/src/molecules/avatar/Avatar.tsx

@@ -11,7 +11,8 @@ import { useAppDesignTokens } from '../../theme';
 import { AtomicText, AtomicIcon } from '../../atoms';
 import type { AvatarSize, AvatarShape } from './Avatar.types';
 import type { SizeConfig } from './Avatar.types';
-import { getSizeConfigs, AVATAR_CONSTANTS } from './Avatar.constants';
+import { AVATAR_SIZES } from '../../constants';
+import { calculateResponsiveSize } from '../../utils/responsiveUtils';
 import { AvatarUtils } from './Avatar.utils';
 
 export interface AvatarProps {
@@ -94,6 +95,13 @@ const AvatarContent: React.FC<AvatarContentProps> = React.memo(({
   );
 });
 
+const AVATAR_CONSTANTS = {
+  DEFAULT_ICON: 'person',
+  DEFAULT_SIZE: 'md' as AvatarSize,
+  DEFAULT_SHAPE: 'circle' as AvatarShape,
+  FALLBACK_INITIALS: '?',
+};
+
 export const Avatar: React.FC<AvatarProps> = ({
   uri,
   name,
@@ -108,7 +116,22 @@ export const Avatar: React.FC<AvatarProps> = ({
   onPress,
 }) => {
   const tokens = useAppDesignTokens();
-  const sizeConfigs = useMemo(() => getSizeConfigs(tokens.spacingMultiplier), [tokens.spacingMultiplier]);
+  const spacingMultiplier = tokens.spacingMultiplier;
+
+  const sizeConfigs = useMemo(() => {
+    const baseSizes = AVATAR_SIZES;
+    return Object.entries(baseSizes).reduce((acc, [key, value]) => {
+      acc[key as AvatarSize] = {
+        size: calculateResponsiveSize(value.size, spacingMultiplier),
+        fontSize: calculateResponsiveSize(value.fontSize, spacingMultiplier),
+        iconSize: calculateResponsiveSize(value.iconSize, spacingMultiplier),
+        statusSize: calculateResponsiveSize(value.statusSize, spacingMultiplier),
+        borderWidth: value.borderWidth,
+      };
+      return acc;
+    }, {} as Record<AvatarSize, SizeConfig>);
+  }, [spacingMultiplier]);
+
   const config = useMemo(() => sizeConfigs[size], [size, sizeConfigs]);
 
   const hasImage = !!uri;

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

@@ -4,8 +4,8 @@
  * Supports images, initials, icons with Turkish character support
  */
 
-import type { AvatarSize, AvatarShape, AvatarConfig, SizeConfig } from './Avatar.types';
-import { AVATAR_COLORS, STATUS_COLORS, SHAPE_CONFIGS, BASE_SIZE_CONFIGS } from './Avatar.constants';
+import type { AvatarShape, AvatarConfig } from './Avatar.types';
+import { AVATAR_COLORS, STATUS_COLORS, SHAPE_CONFIGS } from '../../constants';
 
 /**
  * Avatar utility class
@@ -64,17 +64,10 @@ export class AvatarUtils {
    * Same name always returns same color
    */
   static getColorForName(name: string): string {
-    if (!name) return AVATAR_COLORS[0] ?? '#7E57C2';
+    if (!name) return AVATAR_COLORS[0];
 
     const hash = this.hashString(name);
-    return AVATAR_COLORS[hash % AVATAR_COLORS.length] ?? AVATAR_COLORS[0] ?? '#7E57C2';
-  }
-
-  /**
-   * Get base size config (before spacingMultiplier)
-   */
-  static getBaseSizeConfig(size: AvatarSize): SizeConfig {
-    return BASE_SIZE_CONFIGS[size] ?? BASE_SIZE_CONFIGS.md;
+    return AVATAR_COLORS[hash % AVATAR_COLORS.length] ?? AVATAR_COLORS[0];
   }
 
   /**

package/src/molecules/avatar/AvatarGroup.tsx

@@ -11,7 +11,16 @@ import { useAppDesignTokens } from '../../theme';
 import { AtomicText } from '../../atoms';
 import { Avatar } from './Avatar';
 import type { AvatarSize, AvatarShape } from './Avatar.types';
-import { BASE_SIZE_CONFIGS, AVATAR_CONSTANTS } from './Avatar.constants';
+import { AVATAR_SIZES } from '../../constants';
+import { calculateResponsiveSize } from '../../utils/responsiveUtils';
+import type { SizeConfig } from './Avatar.types';
+
+const AVATAR_CONSTANTS = {
+  MAX_GROUP_VISIBLE: 3,
+  DEFAULT_SIZE: 'md' as AvatarSize,
+  DEFAULT_SHAPE: 'circle' as AvatarShape,
+  GROUP_SPACING: -12,
+};
 
 /**
  * Avatar item for group
@@ -75,7 +84,7 @@ const AvatarItem = React.memo<{
 const OverflowBadge = React.memo<{
   count: number;
   spacing: number;
-  config: any;
+  config: SizeConfig;
   shape: AvatarShape;
   surfaceSecondary: string;
   onBackground: string;
@@ -138,7 +147,18 @@ export const AvatarGroup: React.FC<AvatarGroupProps> = React.memo(({
   style,
 }) => {
   const tokens = useAppDesignTokens();
-  const config = BASE_SIZE_CONFIGS[size];
+  const spacingMultiplier = tokens.spacingMultiplier;
+
+  const config = useMemo(() => {
+    const baseConfig = AVATAR_SIZES[size];
+    return {
+      size: calculateResponsiveSize(baseConfig.size, spacingMultiplier),
+      fontSize: calculateResponsiveSize(baseConfig.fontSize, spacingMultiplier),
+      iconSize: calculateResponsiveSize(baseConfig.iconSize, spacingMultiplier),
+      statusSize: calculateResponsiveSize(baseConfig.statusSize, spacingMultiplier),
+      borderWidth: baseConfig.borderWidth,
+    };
+  }, [size, spacingMultiplier]);
 
   // Memoize calculations to prevent recalculation on every render
   const { visibleItems, overflowCount, hasOverflow } = useMemo(() => {

package/src/molecules/avatar/index.ts

@@ -1,5 +1,4 @@
 export { Avatar, type AvatarProps } from './Avatar';
 export { AvatarGroup, type AvatarGroupProps, type AvatarGroupItem } from './AvatarGroup';
 export { AvatarUtils } from './Avatar.utils';
-export { AVATAR_CONSTANTS } from './Avatar.constants';
 export type { AvatarSize, AvatarShape, AvatarConfig, AvatarType } from './Avatar.types';

package/src/molecules/bottom-sheet/components/BottomSheet.tsx

@@ -3,6 +3,8 @@ import { Modal, View, StyleSheet, Pressable } from 'react-native';
 import { useAppDesignTokens } from '../../../theme';
 import { useSafeAreaInsets } from '../../../safe-area';
 import { getResponsiveBottomSheetLayout } from '../../../responsive';
+import { calculateResponsiveSize } from '../../../utils/responsiveUtils';
+import { BOTTOM_SHEET_HANDLE } from '../../../constants';
 import type {
   BottomSheetRef,
   BottomSheetProps,
@@ -65,6 +67,8 @@ export const BottomSheet = forwardRef<BottomSheetRef, BottomSheetProps>((props,
     close: () => dismiss(),
   }));
 
+  const spacingMultiplier = tokens.spacingMultiplier;
+
   const styles = useMemo(() => StyleSheet.create({
     overlay: {
       flex: 1,
@@ -76,21 +80,21 @@ export const BottomSheet = forwardRef<BottomSheetRef, BottomSheetProps>((props,
       backgroundColor: backgroundColor || tokens.colors.surface,
       borderTopLeftRadius: borderRadius,
       borderTopRightRadius: borderRadius,
-      paddingBottom: Math.max(insets.bottom, 8),
+      paddingBottom: Math.max(insets.bottom, tokens.spacing.xs),
     },
     handle: {
-      width: 40,
-      height: 4,
+      width: calculateResponsiveSize(BOTTOM_SHEET_HANDLE.width, spacingMultiplier),
+      height: calculateResponsiveSize(BOTTOM_SHEET_HANDLE.height, spacingMultiplier),
       backgroundColor: tokens.colors.border,
-      borderRadius: 2,
+      borderRadius: calculateResponsiveSize(BOTTOM_SHEET_HANDLE.borderRadius, spacingMultiplier),
       alignSelf: 'center',
-      marginTop: 12,
-      marginBottom: 8,
+      marginTop: tokens.spacing.md,
+      marginBottom: tokens.spacing.sm,
     },
     content: {
       flex: 1,
     }
-  }), [sheetHeight, backgroundColor, tokens.colors.modalOverlay, tokens.colors.surface, tokens.colors.border, borderRadius, insets.bottom]);
+  }), [sheetHeight, backgroundColor, tokens, borderRadius, insets.bottom, spacingMultiplier]);
 
   return (
     <Modal

package/src/molecules/bottom-sheet/components/BottomSheetModal.tsx

@@ -3,6 +3,8 @@ import { Modal, View, StyleSheet, Pressable } from 'react-native';
 import { useAppDesignTokens } from '../../../theme';
 import { useSafeAreaInsets } from '../../../safe-area';
 import { getResponsiveBottomSheetLayout } from '../../../responsive';
+import { calculateResponsiveSize } from '../../../utils/responsiveUtils';
+import { BOTTOM_SHEET_HANDLE } from '../../../constants';
 import type { BottomSheetModalRef, BottomSheetModalProps } from '../types/BottomSheet';
 
 
@@ -51,6 +53,8 @@ export const BottomSheetModal = forwardRef<BottomSheetModalRef, BottomSheetModal
       collapse: () => dismiss(),
     }));
 
+    const spacingMultiplier = tokens.spacingMultiplier;
+
     const styles = useMemo(() => StyleSheet.create({
       overlay: {
         flex: 1,
@@ -62,21 +66,21 @@ export const BottomSheetModal = forwardRef<BottomSheetModalRef, BottomSheetModal
         backgroundColor: backgroundColor || tokens.colors.surface,
         borderTopLeftRadius: borderRadius,
         borderTopRightRadius: borderRadius,
-        paddingBottom: Math.max(insets.bottom, 8),
+        paddingBottom: Math.max(insets.bottom, tokens.spacing.xs),
       },
       handle: {
-        width: 40,
-        height: 4,
+        width: calculateResponsiveSize(BOTTOM_SHEET_HANDLE.width, spacingMultiplier),
+        height: calculateResponsiveSize(BOTTOM_SHEET_HANDLE.height, spacingMultiplier),
         backgroundColor: tokens.colors.border,
-        borderRadius: 2,
+        borderRadius: calculateResponsiveSize(BOTTOM_SHEET_HANDLE.borderRadius, spacingMultiplier),
         alignSelf: 'center',
-        marginTop: 12,
-        marginBottom: 8,
+        marginTop: tokens.spacing.md,
+        marginBottom: tokens.spacing.sm,
       },
       content: {
         flex: 1,
       },
-    }), [sheetHeight, backgroundColor, tokens.colors, borderRadius, insets.bottom]);
+    }), [sheetHeight, backgroundColor, tokens, borderRadius, insets.bottom, spacingMultiplier]);
 
     return (
       <Modal