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

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

package/src/molecules/bottom-sheet/components/filter/FilterSheet.tsx

@@ -1,8 +1,10 @@
-import React, { useCallback } from "react";
+import React, { useCallback, useMemo } from "react";
 import { View, StyleSheet, ScrollView, Modal, Pressable, GestureResponderEvent } from "react-native";
 import { useSafeAreaInsets } from "../../../../safe-area";
 import { AtomicButton } from '../../../../atoms';
 import { useAppDesignTokens } from '../../../../theme';
+import { calculateResponsiveSize } from '../../../../utils/responsiveUtils';
+import { BOTTOM_SHEET_HANDLE } from '../../../../constants';
 import type { FilterOption } from "../../types/Filter";
 import { FilterUtils } from "../../types/Filter";
 import { FilterSheetHeader } from "./FilterSheetComponents/FilterSheetHeader";
@@ -33,6 +35,37 @@ export const FilterSheet: React.FC<FilterSheetProps> = ({
 }) => {
   const tokens = useAppDesignTokens();
   const insets = useSafeAreaInsets();
+  const spacingMultiplier = tokens.spacingMultiplier;
+
+  const styles = useMemo(() => StyleSheet.create({
+    backdrop: {
+      flex: 1,
+      backgroundColor: "rgba(0, 0, 0, 0.5)",
+      justifyContent: "flex-end",
+    },
+    sheet: {
+      borderTopLeftRadius: tokens.borders.radius.xl,
+      borderTopRightRadius: tokens.borders.radius.xl,
+      maxHeight: "80%",
+    },
+    handle: {
+      width: calculateResponsiveSize(BOTTOM_SHEET_HANDLE.width, spacingMultiplier),
+      height: calculateResponsiveSize(BOTTOM_SHEET_HANDLE.height, spacingMultiplier),
+      borderRadius: calculateResponsiveSize(BOTTOM_SHEET_HANDLE.borderRadius, spacingMultiplier),
+      alignSelf: "center",
+      marginTop: tokens.spacing.sm,
+      marginBottom: tokens.spacing.sm,
+    },
+    optionsList: {
+      maxHeight: 400,
+      paddingVertical: tokens.spacing.sm,
+    },
+    footer: {
+      paddingHorizontal: tokens.spacing.xl,
+      paddingTop: tokens.spacing.lg,
+      paddingBottom: tokens.spacing.sm,
+    },
+  }), [tokens, spacingMultiplier]);
 
   const safeSelectedIds = selectedIds ?? [];
   const hasActiveFilter = FilterUtils.hasActiveFilter(safeSelectedIds, defaultFilterId);
@@ -84,34 +117,4 @@ export const FilterSheet: React.FC<FilterSheetProps> = ({
 
 FilterSheet.displayName = "FilterSheet";
 
-const styles = StyleSheet.create({
-  backdrop: {
-    flex: 1,
-    backgroundColor: "rgba(0, 0, 0, 0.5)",
-    justifyContent: "flex-end",
-  },
-  sheet: {
-    borderTopLeftRadius: 16,
-    borderTopRightRadius: 16,
-    maxHeight: "80%",
-  },
-  handle: {
-    width: 40,
-    height: 4,
-    borderRadius: 2,
-    alignSelf: "center",
-    marginTop: 8,
-    marginBottom: 8,
-  },
-  optionsList: {
-    maxHeight: 400,
-    paddingVertical: 8,
-  },
-  footer: {
-    paddingHorizontal: 20,
-    paddingTop: 16,
-    paddingBottom: 8,
-  },
-});
-
 

package/src/molecules/circular-menu/CircularMenuItem.tsx

@@ -1,9 +1,10 @@
-import React from "react";
+import React, { useMemo } from "react";
 import { View, StyleSheet, TouchableOpacity } from "react-native";
 import { AtomicIcon } from "../../atoms";
 import { AtomicText } from "../../atoms";
 import { useAppDesignTokens } from "../../theme";
 import { LAYOUT } from "./constants";
+import { calculateResponsiveSize } from "../../utils/responsiveUtils";
 
 export interface CircularMenuItemProps {
   icon: string;
@@ -17,6 +18,24 @@ export const CircularMenuItem: React.FC<CircularMenuItemProps> = React.memo(({
   onPress,
 }) => {
   const tokens = useAppDesignTokens();
+  const spacingMultiplier = tokens.spacingMultiplier;
+
+  const styles = useMemo(() => StyleSheet.create({
+    container: {
+      alignItems: "center",
+      gap: 6,
+      width: LAYOUT.ITEM_SIZE,
+    },
+    iconContainer: {
+      justifyContent: "center",
+      alignItems: "center",
+    },
+    label: {
+      fontSize: calculateResponsiveSize(11, spacingMultiplier),
+      fontWeight: "500",
+      textAlign: "center",
+    },
+  }), [spacingMultiplier]);
 
   return (
     <TouchableOpacity
@@ -50,20 +69,3 @@ export const CircularMenuItem: React.FC<CircularMenuItemProps> = React.memo(({
     </TouchableOpacity>
   );
 });
-
-const styles = StyleSheet.create({
-  container: {
-    alignItems: "center",
-    gap: 6,
-    width: LAYOUT.ITEM_SIZE,
-  },
-  iconContainer: {
-    justifyContent: "center",
-    alignItems: "center",
-  },
-  label: {
-    fontSize: 11,
-    fontWeight: "500",
-    textAlign: "center",
-  },
-});

package/src/molecules/countdown/components/CountdownHeader.tsx

@@ -1,8 +1,10 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 import { View, StyleSheet, TouchableOpacity } from 'react-native';
 import { AtomicText, AtomicIcon, useIconName } from '../../../atoms';
 import { useAppDesignTokens } from '../../../theme';
 import type { IconName } from '../../../atoms';
+import { calculateResponsiveSize } from '../../../utils/responsiveUtils';
+import { COUNTDOWN_TOGGLE } from '../../../constants';
 
 export interface CountdownHeaderProps {
     title: string;
@@ -21,6 +23,12 @@ export const CountdownHeader: React.FC<CountdownHeaderProps> = ({
 }) => {
     const tokens = useAppDesignTokens();
     const swapIcon = useIconName('swap');
+    const spacingMultiplier = tokens.spacingMultiplier;
+
+    const toggleButtonSize = useMemo(
+        () => calculateResponsiveSize(COUNTDOWN_TOGGLE.size, spacingMultiplier),
+        [spacingMultiplier]
+    );
 
     return (
         <View style={[styles.container, { marginBottom: tokens.spacing.md }]}>
@@ -47,9 +55,9 @@ export const CountdownHeader: React.FC<CountdownHeaderProps> = ({
                         styles.toggleButton,
                         {
                             backgroundColor: tokens.colors.surfaceSecondary,
-                            width: 36,
-                            height: 36,
-                            borderRadius: 18,
+                            width: toggleButtonSize,
+                            height: toggleButtonSize,
+                            borderRadius: toggleButtonSize / 2,
                         },
                     ]}
                     onPress={onToggle}