@momo-kits/native-kits 0.125.1-securityCustom.0 → 0.127.0-rc.1

package/compose/src/commonMain/kotlin/vn/momo/kits/application/useHeaderSearchAnimation.kt

@@ -1,9 +1,13 @@
 package vn.momo.kits.application
 
 import androidx.compose.animation.animateColorAsState
+import androidx.compose.animation.core.AnimationSpec
 import androidx.compose.animation.core.animateFloatAsState
+import androidx.compose.animation.core.tween
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.derivedStateOf
 import androidx.compose.runtime.getValue
+import androidx.compose.runtime.remember
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.dp
@@ -21,6 +25,23 @@ data class HeaderAnimations(
 
 private const val SCREEN_PADDING = 12
 private const val BACK_WIDTH = 28
+private const val HEADER_HEIGHT_CONST = 100f
+
+// Optimized animation spec for better performance
+private val defaultAnimationSpec: AnimationSpec<Float> = tween(
+    durationMillis = 300,
+    delayMillis = 0
+)
+
+// Helper function for color interpolation - moved outside composable for better performance
+private fun interpolateColor(from: Color, to: Color, progress: Float): Color {
+    return Color(
+        red = from.red + (to.red - from.red) * progress,
+        green = from.green + (to.green - from.green) * progress,
+        blue = from.blue + (to.blue - from.blue) * progress,
+        alpha = from.alpha + (to.alpha - from.alpha) * progress
+    )
+}
 
 @Composable
 fun useHeaderSearchAnimation(
@@ -29,40 +50,73 @@ fun useHeaderSearchAnimation(
     headerRightWidth: Dp,
     isBack: Boolean
 ): HeaderAnimations {
-    val screenWidth = getScreenDimensions().width
-    val leftPosition = if (isBack) (BACK_WIDTH + 20).dp else 12.dp
-    val searchWidth = screenWidth - (SCREEN_PADDING * 2)
+    // Cache screen calculations - call getScreenDimensions directly in composable context
+    val screenDimensions = getScreenDimensions()
+    val screenWidth = remember(screenDimensions) { screenDimensions.width }
+
+    // Pre-calculate static values
+    val leftPosition = remember(isBack) {
+        if (isBack) (BACK_WIDTH + 20).dp else 12.dp
+    }
 
+    val searchWidth = remember(screenWidth) {
+        screenWidth - (SCREEN_PADDING * 2)
+    }
+
+    // Use derivedStateOf for computed scroll progress to avoid unnecessary recompositions
+    val scrollProgress by remember {
+        derivedStateOf {
+            (scrollState / HEADER_HEIGHT_CONST).coerceIn(0f, 1f)
+        }
+    }
+
+    // Optimize color animation with remember
+    val theme = AppTheme.current
     val backgroundSearch by animateColorAsState(
-        targetValue = animateColor(
-            Colors.black_01,
-            AppTheme.current.colors.background.default,
-            opacityAni
-        ),
+        targetValue = remember(opacityAni, theme) {
+            interpolateColor(
+                Colors.black_01,
+                theme.colors.background.default,
+                opacityAni
+            )
+        },
+        animationSpec = tween(durationMillis = 200),
+        label = "backgroundSearch"
     )
 
+    // Consolidate translation and width calculations
     val animatedTranslateX by animateFloatAsState(
-        targetValue = (scrollState / HEADER_HEIGHT * 1f).coerceIn(
-            0f,
-            1f
-        ) * (leftPosition.value - 12) + 12,
+        targetValue = remember(scrollProgress, leftPosition) {
+            scrollProgress * (leftPosition.value - 12) + 12
+        },
+        animationSpec = defaultAnimationSpec,
+        label = "translateX"
     )
 
     val animatedWidth by animateFloatAsState(
-        targetValue = (scrollState / HEADER_HEIGHT * 1f).coerceIn(
-            0f,
-            1f
-        ) * ((searchWidth - leftPosition.value - headerRightWidth.value + 12) - searchWidth) + searchWidth,
+        targetValue = remember(scrollProgress, searchWidth, leftPosition, headerRightWidth) {
+            val targetWidth = searchWidth - leftPosition.value - headerRightWidth.value + 12
+            scrollProgress * (targetWidth - searchWidth) + searchWidth
+        },
+        animationSpec = defaultAnimationSpec,
+        label = "width"
     )
 
     val animatedTranslateY by animateFloatAsState(
-        targetValue = (1 - (scrollState / HEADER_HEIGHT * 1f).coerceIn(0f, 1f)) * HEADER_HEIGHT
+        targetValue = remember(scrollProgress) {
+            (1 - scrollProgress) * HEADER_HEIGHT_CONST
+        },
+        animationSpec = defaultAnimationSpec,
+        label = "translateY"
     )
-    return HeaderAnimations(
-        opacity = opacityAni,
-        backgroundSearch = backgroundSearch,
-        translateX = animatedTranslateX,
-        width = animatedWidth,
-        translateY = animatedTranslateY
-    )
-}
+
+    return remember(opacityAni, backgroundSearch, animatedTranslateX, animatedWidth, animatedTranslateY) {
+        HeaderAnimations(
+            opacity = opacityAni,
+            backgroundSearch = backgroundSearch,
+            translateX = animatedTranslateX,
+            width = animatedWidth,
+            translateY = animatedTranslateY
+        )
+    }
+}

package/compose/src/commonMain/kotlin/vn/momo/kits/components/Button.kt

@@ -2,7 +2,6 @@ package vn.momo.kits.components
 
 import androidx.compose.foundation.background
 import androidx.compose.foundation.border
-import androidx.compose.foundation.clickable
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Row
@@ -14,6 +13,7 @@ import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.material3.CircularProgressIndicator
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.remember
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.clip
@@ -73,47 +73,56 @@ enum class Size(val value: ButtonSpecs) {
     )
 }
 
+// Cache for style calculations to avoid repeated computations
+private val styleCache = mapOf(
+    Size.LARGE to Typography.actionDefaultBold,
+    Size.MEDIUM to Typography.actionSBold,
+    Size.SMALL to Typography.actionXsBold
+)
+
+private val iconSizeCache = mapOf(
+    Size.LARGE to 24.dp,
+    Size.MEDIUM to 16.dp,
+    Size.SMALL to 16.dp
+)
+
+private val iconSpaceCache = mapOf(
+    Size.SMALL to Spacing.XS,
+    Size.MEDIUM to Spacing.S,
+    Size.LARGE to Spacing.S
+)
+
 fun getStyle(size: Size): TextStyle {
-    return when (size.name) {
-        Size.LARGE.name -> Typography.actionDefaultBold
-        Size.MEDIUM.name -> Typography.actionSBold
-        Size.SMALL.name -> Typography.actionXsBold
-        else -> Typography.actionDefaultBold
-    }
+    return styleCache[size] ?: Typography.actionDefaultBold
 }
 
 fun getIconSize(size: Size): Dp {
-    return when (size.name) {
-        Size.LARGE.name -> 24.dp
-        Size.MEDIUM.name -> 16.dp
-        Size.SMALL.name -> 16.dp
-        else -> 24.dp
-    }
+    return iconSizeCache[size] ?: 24.dp
 }
 
 fun getIconSpace(size: Size): Dp {
-    return when (size.name) {
-        Size.SMALL.name -> Spacing.XS
-        else -> Spacing.S
-    }
+    return iconSpaceCache[size] ?: Spacing.S
 }
 
 @Composable
 fun getTextColor(type: ButtonType): Color {
-    return when (type) {
-        ButtonType.DISABLED -> AppTheme.current.colors.text.disable
-        ButtonType.PRIMARY -> Colors.black_01
-        ButtonType.SECONDARY -> AppTheme.current.colors.text.default
-        ButtonType.OUTLINE -> AppTheme.current.colors.primary
-        ButtonType.TONAL -> AppTheme.current.colors.primary
-        ButtonType.DANGER -> Colors.black_01
-        ButtonType.TEXT -> AppTheme.current.colors.primary
+    val theme = AppTheme.current
+    return remember(type, theme) {
+        when (type) {
+            ButtonType.DISABLED -> theme.colors.text.disable
+            ButtonType.PRIMARY -> Colors.black_01
+            ButtonType.SECONDARY -> theme.colors.text.default
+            ButtonType.OUTLINE -> theme.colors.primary
+            ButtonType.TONAL -> theme.colors.primary
+            ButtonType.DANGER -> Colors.black_01
+            ButtonType.TEXT -> theme.colors.primary
+        }
     }
 }
 
 @Composable
 fun RenderTitle(size: Size, title: String = "", type: ButtonType) {
-    val style = getStyle(size)
+    val style = remember(size) { getStyle(size) }
     val color = getTextColor(type)
     Text(style = style, text = title, color = color, overflow = TextOverflow.Ellipsis, maxLines = 1)
 }
@@ -126,9 +135,10 @@ fun RenderLeading(
     type: ButtonType,
     iconLeft: String = "",
 ) {
-    val iconSize = getIconSize(size)
-    val marginRight = getIconSpace(size)
+    val iconSize = remember(size) { getIconSize(size) }
+    val marginRight = remember(size) { getIconSpace(size) }
     val color = if (useTintColor) getTextColor(type) else Color.Unspecified
+
     Row(
         verticalAlignment = Alignment.CenterVertically,
         horizontalArrangement = Arrangement.Center
@@ -142,7 +152,6 @@ fun RenderLeading(
                     strokeWidth = 2.dp
                 )
             }
-
         }
         if (iconLeft.isNotEmpty()) {
             Icon(
@@ -163,9 +172,10 @@ fun RenderTrailing(
     type: ButtonType,
 ) {
     val color = if (useTintColor) getTextColor(type) else Color.Unspecified
-    val marginLeft = getIconSpace(size)
+    val marginLeft = remember(size) { getIconSpace(size) }
+
     if (iconRight.isNotEmpty()) {
-        val iconSize = getIconSize(size)
+        val iconSize = remember(size) { getIconSize(size) }
         Icon(
             source = iconRight,
             color = color,
@@ -182,33 +192,36 @@ fun getTypeStyle(
     size: Size,
 ): Modifier {
     val theme = AppTheme.current
+    val radius = remember(size) { size.value.radius }
 
-    return when (type) {
-        ButtonType.DISABLED -> Modifier.background(theme.colors.background.disable)
-            .border(0.dp, Color.Unspecified, RoundedCornerShape(size.value.radius))
+    return remember(type, color, theme, radius) {
+        when (type) {
+            ButtonType.DISABLED -> Modifier.background(theme.colors.background.disable)
+                .border(0.dp, Color.Unspecified, RoundedCornerShape(radius))
 
-        ButtonType.PRIMARY -> Modifier.background(theme.colors.primary)
-            .border(0.dp, Color.Unspecified, RoundedCornerShape(size.value.radius))
+            ButtonType.PRIMARY -> Modifier.background(theme.colors.primary)
+                .border(0.dp, Color.Unspecified, RoundedCornerShape(radius))
 
-        ButtonType.SECONDARY -> Modifier
-            .background(theme.colors.background.surface)
-            .border(1.dp, theme.colors.border.default, RoundedCornerShape(size.value.radius))
+            ButtonType.SECONDARY -> Modifier
+                .background(theme.colors.background.surface)
+                .border(1.dp, theme.colors.border.default, RoundedCornerShape(radius))
 
-        ButtonType.OUTLINE -> Modifier
-            .background(theme.colors.background.surface)
-            .border(
-                1.dp,
-                color ?: theme.colors.primary,
-                RoundedCornerShape(size.value.radius)
-            )
+            ButtonType.OUTLINE -> Modifier
+                .background(theme.colors.background.surface)
+                .border(
+                    1.dp,
+                    color ?: theme.colors.primary,
+                    RoundedCornerShape(radius)
+                )
 
-        ButtonType.TONAL -> Modifier.background(theme.colors.background.tonal)
-            .border(0.dp, Color.Unspecified, RoundedCornerShape(size.value.radius))
+            ButtonType.TONAL -> Modifier.background(theme.colors.background.tonal)
+                .border(0.dp, Color.Unspecified, RoundedCornerShape(radius))
 
-        ButtonType.DANGER -> Modifier.background(theme.colors.error.primary)
-            .border(0.dp, Color.Unspecified, RoundedCornerShape(size.value.radius))
+            ButtonType.DANGER -> Modifier.background(theme.colors.error.primary)
+                .border(0.dp, Color.Unspecified, RoundedCornerShape(radius))
 
-        ButtonType.TEXT -> Modifier
+            ButtonType.TEXT -> Modifier
+        }
     }
 }
 
@@ -234,30 +247,32 @@ fun Button(
     isFull: Boolean = true,
     modifier: Modifier = Modifier,
 ) {
-    val customModifier = if (isFull) {
-        modifier
-            .fillMaxWidth()
-            .clip(RoundedCornerShape(size.value.radius)).activeOpacityClickable(
-                activeOpacity = 0.5f,
-                enabled = type != ButtonType.DISABLED,
-                onClick = onClick
-            )
+    val radius = remember(size) { size.value.radius }
+    val isEnabled = remember(type) { type != ButtonType.DISABLED }
 
-    } else {
-        modifier
-            .clip(RoundedCornerShape(size.value.radius)).activeOpacityClickable(
-                activeOpacity = 0.5f,
-                enabled = type != ButtonType.DISABLED,
-                onClick = onClick
-            )
-    }
+    val customModifier = remember(isFull, radius, isEnabled, modifier) {
+        if (isFull) {
+            modifier
+                .fillMaxWidth()
+                .clip(RoundedCornerShape(radius))
+        } else {
+            modifier
+                .clip(RoundedCornerShape(radius))
+        }
+    }.activeOpacityClickable(
+        activeOpacity = 0.5f,
+        enabled = isEnabled,
+        onClick = onClick
+    )
+
+    val sizeSpecs = remember(size) { size.value }
 
     Row(
-        modifier = customModifier.then(getTypeStyle(type, size = size))
-            .padding(horizontal = size.value.padding)
-            .defaultMinSize(
-                minWidth = size.value.width
-            ).height(size.value.height),
+        modifier = customModifier
+            .then(getTypeStyle(type, size = size))
+            .padding(horizontal = sizeSpecs.padding)
+            .defaultMinSize(minWidth = sizeSpecs.width)
+            .height(sizeSpecs.height),
         horizontalArrangement = Arrangement.Center,
         verticalAlignment = Alignment.CenterVertically,
     ) {

package/compose/src/commonMain/kotlin/vn/momo/kits/components/CheckBox.kt

@@ -9,6 +9,7 @@ import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.remember
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
@@ -20,6 +21,9 @@ import vn.momo.kits.const.Spacing
 import vn.momo.kits.const.Typography
 import vn.momo.kits.modifier.activeOpacityClickable
 
+// Pre-computed shape for performance
+private val checkboxShape = RoundedCornerShape(Radius.XS)
+
 @Composable
 fun CheckBox(
     disabled: Boolean = false,
@@ -28,32 +32,40 @@ fun CheckBox(
     indeterminate: Boolean = false,
     title: String = "",
 ) {
-    var borderColor = AppTheme.current.colors.text.default
-    var backgroundColor = Color.Transparent
-    val iconSource = if (indeterminate) "navigation_minus" else "ic_checked"
+    // Cache theme access
+    val theme = AppTheme.current
 
-    if (checked) {
-        borderColor = AppTheme.current.colors.primary
-        backgroundColor = AppTheme.current.colors.primary
-    }
-    if (disabled) {
-        borderColor = AppTheme.current.colors.border.disable
-        backgroundColor = Color.Transparent
-        if (checked) {
-            borderColor = AppTheme.current.colors.background.tonal
-            backgroundColor = AppTheme.current.colors.background.tonal
+    // Memoize color calculations to avoid repeated conditional logic
+    val colors = remember(checked, disabled, theme) {
+        when {
+            disabled && checked -> Pair(theme.colors.background.tonal, theme.colors.background.tonal)
+            disabled -> Pair(theme.colors.border.disable, Color.Transparent)
+            checked -> Pair(theme.colors.primary, theme.colors.primary)
+            else -> Pair(theme.colors.text.default, Color.Transparent)
         }
     }
-    Row(
-        verticalAlignment = Alignment.CenterVertically,
-    ) {
+
+    val (borderColor, backgroundColor) = colors
+
+    // Memoize icon source to avoid repeated conditional check
+    val iconSource = remember(indeterminate) {
+        if (indeterminate) "navigation_minus" else "ic_checked"
+    }
+
+    // Memoize click handler to avoid lambda recreation
+    val onClickHandler = remember(onCheckedChange, checked) {
+        { onCheckedChange(!checked) }
+    }
+
+    Row(verticalAlignment = Alignment.CenterVertically) {
         Box(
-            modifier = Modifier.size(20.dp)
-                .background(backgroundColor, RoundedCornerShape(Radius.XS))
-                .border(Spacing.XXS, borderColor, RoundedCornerShape(Radius.XS))
+            modifier = Modifier
+                .size(20.dp)
+                .background(backgroundColor, checkboxShape)
+                .border(Spacing.XXS, borderColor, checkboxShape)
                 .activeOpacityClickable(
                     activeOpacity = 0.8f,
-                    onClick = { onCheckedChange(!checked) },
+                    onClick = onClickHandler,
                     enabled = !disabled,
                 ),
         ) {
@@ -65,6 +77,7 @@ fun CheckBox(
                 )
             }
         }
+
         if (title.isNotEmpty()) {
             Spacer(Modifier.size(Spacing.S))
             Text(

package/compose/src/commonMain/kotlin/vn/momo/kits/components/Icon.kt

@@ -3,6 +3,7 @@ package vn.momo.kits.components
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.size
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.remember
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.graphics.ColorFilter
@@ -19,22 +20,45 @@ import vn.momo.kits.utils.Icons
 fun Icon(
     source: String,
     size: Dp = 24.dp,
-    color: Color? = AppTheme.current.colors.text.default,
+    color: Color? = null,
     modifier: Modifier = Modifier,
 ) {
-    val icon = if (source.contains("https")) {
-        source
-    } else {
-        Icons[source] ?: ""
+    // Cache theme access
+    val theme = AppTheme.current
+
+    // Memoize icon resolution to avoid repeated string operations and map lookups
+    val iconUrl = remember(source) {
+        if (source.contains("https")) {
+            source
+        } else {
+            Icons[source] ?: ""
+        }
+    }
+
+    // Memoize color calculation
+    val iconColor = remember(color, theme) {
+        color ?: theme.colors.text.default
+    }
+
+    // Memoize ColorFilter creation
+    val colorFilter = remember(iconColor) {
+        ColorFilter.tint(iconColor)
     }
-    Box(modifier = modifier.size(size).semantics { contentDescription = "img|$icon" }) {
+
+    // Memoize content description
+    val contentDesc = remember(iconUrl) { "img|$iconUrl" }
+
+    Box(
+        modifier = modifier
+            .size(size)
+            .semantics { contentDescription = contentDesc }
+    ) {
         AsyncImage(
             modifier = Modifier.matchParentSize(),
-            model = icon,
+            model = iconUrl,
             contentDescription = null,
             contentScale = ContentScale.Fit,
-            colorFilter = color?.let { ColorFilter.tint(it) },
+            colorFilter = colorFilter,
         )
     }
 }
-

package/compose/src/commonMain/kotlin/vn/momo/kits/components/IconButton.kt

@@ -7,6 +7,7 @@ import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.remember
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.clip
@@ -43,53 +44,63 @@ enum class IconSize(val value: IconSpecs) {
     )
 }
 
+// Pre-computed shape to avoid repeated creation
+private val iconButtonShape = RoundedCornerShape(Radius.XL)
+
+// Cache for icon sizes to avoid repeated calculations
+private val iconSizeMap = mapOf(
+    IconSize.SMALL to 16.dp,
+    IconSize.LARGE to 24.dp
+)
+
 @Composable
-fun getIconStyle(type: ButtonType, color: Color? = AppTheme.current.colors.primary): Modifier {
+fun getIconStyle(type: ButtonType, color: Color? = null): Modifier {
     val theme = AppTheme.current
 
-    return when (type) {
-        ButtonType.DISABLED -> Modifier.background(
-            theme.colors.background.disable,
-            RoundedCornerShape(Radius.XL)
-        ).border(0.dp, Color.Unspecified, RoundedCornerShape(Radius.XL))
+    return remember(type, color, theme) {
+        when (type) {
+            ButtonType.DISABLED -> Modifier
+                .background(theme.colors.background.disable, iconButtonShape)
+                .border(0.dp, Color.Unspecified, iconButtonShape)
 
-        ButtonType.PRIMARY -> Modifier.background(
-            theme.colors.primary,
-            RoundedCornerShape(Radius.XL)
-        ).border(0.dp, Color.Unspecified, RoundedCornerShape(Radius.XL))
+            ButtonType.PRIMARY -> Modifier
+                .background(theme.colors.primary, iconButtonShape)
+                .border(0.dp, Color.Unspecified, iconButtonShape)
 
-        ButtonType.SECONDARY -> Modifier
-            .background(theme.colors.background.surface, RoundedCornerShape(Radius.XL))
-            .border(1.dp, theme.colors.border.default, RoundedCornerShape(Radius.XL))
+            ButtonType.SECONDARY -> Modifier
+                .background(theme.colors.background.surface, iconButtonShape)
+                .border(1.dp, theme.colors.border.default, iconButtonShape)
 
-        ButtonType.OUTLINE -> Modifier
-            .background(theme.colors.background.surface, RoundedCornerShape(Radius.XL))
-            .border(1.dp, color ?: theme.colors.primary, RoundedCornerShape(Radius.XL))
+            ButtonType.OUTLINE -> Modifier
+                .background(theme.colors.background.surface, iconButtonShape)
+                .border(1.dp, color ?: theme.colors.primary, iconButtonShape)
 
-        ButtonType.TONAL -> Modifier.background(
-            theme.colors.background.tonal,
-            RoundedCornerShape(Radius.XL)
-        ).border(0.dp, Color.Unspecified, RoundedCornerShape(Radius.XL))
+            ButtonType.TONAL -> Modifier
+                .background(theme.colors.background.tonal, iconButtonShape)
+                .border(0.dp, Color.Unspecified, iconButtonShape)
 
-        ButtonType.DANGER -> Modifier.background(
-            theme.colors.error.primary,
-            RoundedCornerShape(Radius.XL)
-        ).border(0.dp, Color.Unspecified, RoundedCornerShape(Radius.XL))
+            ButtonType.DANGER -> Modifier
+                .background(theme.colors.error.primary, iconButtonShape)
+                .border(0.dp, Color.Unspecified, iconButtonShape)
 
-        ButtonType.TEXT -> Modifier
+            ButtonType.TEXT -> Modifier
+        }
     }
 }
 
 @Composable
 fun getIconColor(type: ButtonType): Color {
-    return when (type) {
-        ButtonType.DISABLED -> AppTheme.current.colors.text.disable
-        ButtonType.PRIMARY -> Colors.black_01
-        ButtonType.SECONDARY -> AppTheme.current.colors.text.default
-        ButtonType.OUTLINE -> AppTheme.current.colors.primary
-        ButtonType.TONAL -> AppTheme.current.colors.primary
-        ButtonType.DANGER -> Colors.black_01
-        ButtonType.TEXT -> AppTheme.current.colors.primary
+    val theme = AppTheme.current
+    return remember(type, theme) {
+        when (type) {
+            ButtonType.DISABLED -> theme.colors.text.disable
+            ButtonType.PRIMARY -> Colors.black_01
+            ButtonType.SECONDARY -> theme.colors.text.default
+            ButtonType.OUTLINE -> theme.colors.primary
+            ButtonType.TONAL -> theme.colors.primary
+            ButtonType.DANGER -> Colors.black_01
+            ButtonType.TEXT -> theme.colors.primary
+        }
     }
 }
 
@@ -100,16 +111,27 @@ fun IconButton(
     size: IconSize = IconSize.SMALL,
     icon: String = "",
 ) {
-    val iconSize = if (size.name == IconSize.SMALL.name) 16.dp else 24.dp
+    // Memoize icon size calculation
+    val iconSize = remember(size) {
+        iconSizeMap[size] ?: 16.dp
+    }
+
+    // Memoize enabled state
+    val isEnabled = remember(type) {
+        type != ButtonType.DISABLED
+    }
+
+    // Memoize radius for clipping
+    val radius = remember(size) {
+        size.value.radius
+    }
+
     Box(
         modifier = Modifier
             .size(size.value.size)
             .then(getIconStyle(type))
-            .clip(RoundedCornerShape(size.value.radius))
-            .clickable(
-                enabled = type != ButtonType.DISABLED,
-                onClick = onClick
-            ),
+            .clip(RoundedCornerShape(radius))
+            .clickable(enabled = isEnabled, onClick = onClick),
         contentAlignment = Alignment.Center
     ) {
         Icon(