@momo-kits/native-kits 0.89.33 → 0.110.1-beta.5

package/compose/build.gradle.kts

@@ -3,6 +3,7 @@ plugins {
     alias(libs.plugins.jetbrains.kotlin.multiplatform)
     alias(libs.plugins.compose)
     alias(libs.plugins.kotlin.compose.compiler)
+    kotlin("plugin.serialization")
     id("maven-publish")
 }
 
@@ -39,6 +40,7 @@ kotlin {
                 implementation(libs.coil.multiplatform.compose)
                 implementation(libs.coil.multiplatform.core)
                 implementation(libs.coil.multiplatform.network.ktor)
+                implementation(libs.jetbrains.serialization.json)
             }
         }
         val androidMain by getting {

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

@@ -50,7 +50,6 @@ import vn.momo.kits.const.AppTheme
 import vn.momo.kits.const.Colors
 import vn.momo.kits.const.Spacing
 import vn.momo.kits.const.Typography
-import vn.momo.kits.modifier.shadow
 import vn.momo.kits.platform.getStatusBarHeight
 import vn.momo.kits.utils.bottomBorder
 
@@ -67,7 +66,6 @@ data class AnimatedHeader(
 @Composable
 fun HeaderBackground(
     headerType: HeaderType = HeaderType.DEFAULT,
-    useShadow: Boolean? = true,
     scrollState: Int
 ) {
     val statusBarHeight = AppStatusBar.current ?: getStatusBarHeight()
@@ -75,11 +73,19 @@ fun HeaderBackground(
         targetValue = (1 - (scrollState / 200f)).coerceIn(0f, 1f),
     )
 
+    val backgroundColor = if (scrollState == 0) {
+        Color.Transparent
+    } else {
+        AppTheme.current.colors.background.surface
+    }
+
+
     when (headerType) {
         HeaderType.DEFAULT -> {
             val height = statusBarHeight + 52.dp
             Box(
                 modifier = Modifier.fillMaxWidth().height(height)
+                    .background(backgroundColor)
                     .bottomBorder(
                         strokeWidth = 1.dp,
                         color = AppTheme.current.colors.border.default
@@ -103,6 +109,7 @@ fun HeaderBackground(
                 )
                 if (AppTheme.current.assets.headerBackground != null) {
                     Image(
+                        loading = false,
                         source = AppTheme.current.assets.headerBackground!!,
                         modifier = Modifier.fillMaxWidth().height(height),
                         options = Options(
@@ -115,6 +122,7 @@ fun HeaderBackground(
         }
 
         HeaderType.EXTENDED -> {
+
             Box(
                 modifier = Modifier.fillMaxWidth().height(154.dp)
                     .alpha(opacityAni)
@@ -130,31 +138,28 @@ fun HeaderBackground(
                     )
             ) {
                 if (AppTheme.current.assets.headerBackground != null) {
-                    Image(
-                        source = AppTheme.current.assets.headerBackground!!,
-                        modifier = Modifier.fillMaxWidth().height(154.dp),
-                        options = Options(
-                            contentScale = ContentScale.FillWidth
+                    Box(
+                        modifier = Modifier.fillMaxWidth()
+                            .background(backgroundColor)
+                    ) {
+                        Image(
+                            loading = false,
+                            source = AppTheme.current.assets.headerBackground!!,
+                            modifier = Modifier.fillMaxWidth().height(154.dp),
+                            options = Options(
+                                contentScale = ContentScale.FillWidth
+                            )
                         )
-                    )
+                    }
                 }
             }
         }
+
         else -> {
             Box(modifier = Modifier.fillMaxWidth())
         }
     }
-    Box(
-        modifier = Modifier.fillMaxWidth().height(statusBarHeight + 52.dp)
-            .alpha(1 - opacityAni)
-            .background(Colors.black_01)
-            .then(
-                if (useShadow == true) Modifier.shadow() else Modifier.bottomBorder(
-                    1.dp,
-                    Colors.black_04
-                )
-            )
-    )
+
 }
 
 @Composable
@@ -163,10 +168,9 @@ fun Header(
     titlePosition: TitlePosition,
     title: String,
     headerRight: @Composable (() -> Unit)? = null,
-    goBack: (() -> Unit)?,
+    goBack: (() -> Unit)? = null,
     opacity: Float? = null,
     animatedHeader: AnimatedHeader? = null,
-    useSearchInput: Boolean? = false,
     scrollState: Int = 0,
     inputSearchProps: InputSearchProps?
 ) {
@@ -206,7 +210,7 @@ fun Header(
                 horizontalArrangement = Arrangement.SpaceBetween
             ) {
                 Box {
-                    if (goBack !== null) {
+                    if (goBack != null) {
                         Box(
                             modifier = Modifier
                                 .size(28.dp)
@@ -238,12 +242,11 @@ fun Header(
                         }
                     }
                 }
-                if (useSearchInput == false) {
-                    Box(Modifier.graphicsLayer {
-                        alpha = if (animatedHeader !== null) opacity ?: 1f else 1f
-                    }) {
-                        headerRight?.invoke()
-                    }
+
+                Box(Modifier.graphicsLayer {
+                    alpha = if (animatedHeader !== null) opacity ?: 1f else 1f
+                }) {
+                    headerRight?.invoke()
                 }
             }
 
@@ -254,13 +257,12 @@ fun Header(
                     .padding(horizontal = Spacing.M),
                 verticalAlignment = Alignment.CenterVertically,
             ) {
-                if (goBack !== null) {
+                if (goBack != null && titlePosition == TitlePosition.LEFT) {
                     Spacer(Modifier.width(40.dp))
                 }
-                if (useSearchInput == true && inputSearchProps != null) {
+                if (inputSearchProps != null) {
                     InputSearch(inputSearchProps = inputSearchProps.copy(backgroundColor = backgroundSearch))
-                }
-                else{
+                } else {
                     Box(
                         Modifier.weight(1f).graphicsLayer {
                             alpha = if (animatedHeader !== null) opacity ?: 1f else 1f
@@ -292,7 +294,7 @@ fun HeaderTitle(
         modifier = Modifier.then(modifier).zIndex(1f),
         text = title,
         textAlign = textAlign,
-        style = Typography.headerDefault,
+        style = Typography.actionS,
         color = color,
         maxLines = 1
     )

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

@@ -1,64 +1,77 @@
 package vn.momo.kits.application
 
-import androidx.compose.foundation.layout.WindowInsets
-import androidx.compose.foundation.layout.asPaddingValues
-import androidx.compose.foundation.layout.systemBars
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.CompositionLocalProvider
+import androidx.compose.runtime.LaunchedEffect
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.rememberCoroutineScope
+import androidx.compose.runtime.setValue
 import androidx.compose.runtime.staticCompositionLocalOf
+import androidx.compose.ui.unit.Dp
+import kotlinx.coroutines.launch
+import kotlinx.serialization.json.Json
+import kotlinx.serialization.json.jsonObject
+import kotlinx.serialization.json.jsonPrimitive
 import vn.momo.kits.const.AppStatusBar
 import vn.momo.kits.const.AppTheme
 import vn.momo.kits.const.Theme
+import vn.momo.kits.const.ThemeAssets
 import vn.momo.kits.const.defaultTheme
 import vn.momo.kits.platform.disableOverscroll
 import vn.momo.kits.platform.getStatusBarHeight
 
-val AppNavigator = staticCompositionLocalOf<Navigator> {
-    error("no navigator provided!")
-}
-
-class Navigator {
-    fun push(content: @Composable () -> Unit) {
-    }
-
-    fun present(content: @Composable () -> Unit) {
-
-    }
-
-    fun reset(content: @Composable () -> Unit) {
-
-    }
-
-    fun pop() {
-    }
+val PlatformApi = staticCompositionLocalOf<Any?> { null }
 
-    fun replace(content: @Composable () -> Unit) {
-    }
-
-    fun popToTop() {
-    }
-
-    fun showModal(
-        onClose: () -> Unit = {},
-        canBackgroundClose: Boolean = true,
-        content: @Composable () -> Unit,
-    ) {
-    }
-
-    fun showBottomSheet(content: @Composable () -> Unit) {
-    }
+interface ComposeApi {
+    fun request(funcName: String, params: String?): String
+    fun request(funcName: String, params: String?, onResponse: ((String) -> Unit)?): String
+    fun requestCallback(funcName: String, params: String?, onResponse: ((String) -> Unit)?)
+    fun removeCallback(id: String)
 }
 
 @Composable
 fun ApplicationContainer(
     theme: Theme = defaultTheme,
-    content: @Composable () -> Unit,
+    composeApi: ComposeApi? = null,
+    statusBarHeight: Dp? = AppStatusBar.current ?: getStatusBarHeight(),
+    content: @Composable () -> Unit
 ) {
+    var appTheme by remember { mutableStateOf(theme) }
+    val coroutineScope = rememberCoroutineScope()
+
+    LaunchedEffect(Unit) {
+        try {
+            composeApi?.request("getConfig", "DESIGN_SYSTEM") {
+                val json = Json { ignoreUnknownKeys = true }
+                val response = json.parseToJsonElement(it).jsonObject["response"]
+                val headerBar = response
+                    ?.jsonObject
+                    ?.get("headerBar")
+                    ?.jsonPrimitive
+                    ?.content
+                if (headerBar != null && appTheme.assets.headerBackground == null) {
+                    coroutineScope.launch {
+                        appTheme = appTheme.copy(
+                            assets = ThemeAssets(
+                                headerBackground = headerBar
+                            )
+                        )
+                    }
+                }
+            }
+        }
+        catch (e: Exception) {
+            print("@@ == NavigationContainer fetch config error $e")
+        }
+    }
+
     disableOverscroll()
     CompositionLocalProvider(
-        AppTheme provides theme,
-        AppNavigator provides Navigator(),
-        AppStatusBar provides getStatusBarHeight(),
+        AppTheme provides appTheme,
+        PlatformApi provides composeApi,
+        AppStatusBar provides statusBarHeight,
     ) {
         content()
     }

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

@@ -56,7 +56,7 @@ fun Screen(
     horizontalAlignment: Alignment.Horizontal = Alignment.Start,
     title: String = "Stack",
     titlePosition: TitlePosition = TitlePosition.LEFT,
-    goBack: (() -> Unit) = { },
+    goBack: (() -> Unit)? = null,
     scrollable: Boolean = true,
     scrollState: ScrollState = rememberScrollState(),
     onContentLayout: ((LayoutCoordinates) -> Unit)? = null,
@@ -66,8 +66,6 @@ fun Screen(
     fabProps: FabProps? = null,
     animatedHeader: AnimatedHeader? = null,
     layoutOffset: Dp = 56.dp,
-    useShadow: Boolean? = true,
-    useSearchInput: Boolean? = false,
     inputSearchProps: InputSearchProps? = null,
     content: @Composable () -> Unit,
 ) {
@@ -89,7 +87,9 @@ fun Screen(
     )
 
     val headerAnimated =
-        @Composable { animatedHeader?.composable?.invoke(scrollState.value) }
+        @Composable {
+            animatedHeader?.composable?.invoke(scrollState.value)
+        }
 
     Box(
         Modifier.fillMaxSize()
@@ -97,17 +97,19 @@ fun Screen(
     ) {
 
         if (animatedHeader === null) {
-            HeaderBackground(headerType = headerType, scrollState = scrollState.value)
+            HeaderBackground(
+                headerType = headerType,
+                scrollState = scrollState.value,
+            )
         } else {
             Box(
-                Modifier.zIndex(5f)
+                Modifier.zIndex(2f)
                     .background(Color.White.copy(alpha = opacity))
                     .graphicsLayer { alpha = opacity }
             ) {
                 HeaderBackground(
                     headerType = headerType,
-                    useShadow = useShadow,
-                    scrollState = scrollState.value
+                    scrollState = scrollState.value,
                 )
             }
         }
@@ -120,7 +122,6 @@ fun Screen(
             goBack = goBack,
             opacity = opacity,
             animatedHeader = animatedHeader,
-            useSearchInput = useSearchInput,
             inputSearchProps = inputSearchProps,
             scrollState = scrollState.value
         )

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

@@ -1,13 +1,17 @@
 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.ui.Modifier
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.graphics.ColorFilter
 import androidx.compose.ui.layout.ContentScale
+import androidx.compose.ui.semantics.contentDescription
+import androidx.compose.ui.semantics.semantics
 import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.dp
+import coil3.compose.AsyncImage
 import vn.momo.kits.const.AppTheme
 import vn.momo.kits.utils.Icons
 
@@ -23,14 +27,14 @@ fun Icon(
     } else {
         Icons[source] ?: ""
     }
-    Image(
-        modifier = modifier.size(size),
-        source = icon,
-        loading = false,
-        options = Options(
+    Box(modifier = modifier.size(size).semantics {contentDescription = "img|$icon"}) {
+        AsyncImage(
+            modifier = Modifier.matchParentSize(),
+            model = icon,
+            contentDescription = null,
             contentScale = ContentScale.Fit,
-            colorFilter = color?.let { ColorFilter.tint(it) }
-        ),
-    )
+            colorFilter = color?.let { ColorFilter.tint(it) },
+        )
+    }
 }
 

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

@@ -15,6 +15,7 @@ import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.layout.width
 import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.foundation.text.BasicTextField
+import androidx.compose.foundation.text.KeyboardActions
 import androidx.compose.foundation.text.KeyboardOptions
 import androidx.compose.material3.CircularProgressIndicator
 import androidx.compose.runtime.Composable
@@ -29,6 +30,7 @@ import androidx.compose.ui.focus.onFocusChanged
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.text.TextStyle
 import androidx.compose.ui.text.input.KeyboardType
+import androidx.compose.ui.text.style.TextOverflow
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
 import vn.momo.kits.const.AppTheme
@@ -44,6 +46,7 @@ fun RenderRightIconSearch(
     icon: String,
     color: Color,
     onClick: () -> Unit,
+    iconModifier: Modifier = Modifier
 ) {
     if (loading) {
         Box(Modifier.padding(horizontal = Spacing.S)) {
@@ -64,7 +67,7 @@ fun RenderRightIconSearch(
             source = icon,
             color = color,
             size = 24.dp,
-            modifier = Modifier.padding(start = Spacing.S, end = 0.dp).clickable(
+            modifier = iconModifier.padding(start = Spacing.S, end = 0.dp).clickable(
                 onClick = onClick,
                 interactionSource = remember { MutableInteractionSource() },
                 indication = null
@@ -90,6 +93,12 @@ data class InputSearchProps(
     val fontWeight: InputFontWeight = InputFontWeight.REGULAR,
     val keyboardType: KeyboardType = KeyboardType.Text,
     val backgroundColor: Color = Colors.black_01,
+    val clearCondition: (() -> Boolean)? = null,
+    val keyboardOptions: KeyboardOptions = KeyboardOptions.Default,
+    val keyboardActions: KeyboardActions = KeyboardActions.Default,
+    val modifier: Modifier = Modifier,
+    val iconModifier: Modifier = Modifier,
+    val onClearPress: () -> Unit = {}
 )
 
 @Composable
@@ -98,7 +107,6 @@ fun InputSearch(
         text = remember { mutableStateOf("") },
         iconColor = AppTheme.current.colors.text.default
     ),
-
 ) {
     var isFocused by remember { mutableStateOf(false) }
     var isBlurred = false
@@ -124,8 +132,9 @@ fun InputSearch(
                 lineHeight = 20.sp,
                 fontWeight = inputSearchProps.fontWeight.value
             ),
-            keyboardOptions = KeyboardOptions.Default.copy(keyboardType = inputSearchProps.keyboardType),
-            modifier = Modifier.height(36.dp).onFocusChanged {
+            keyboardOptions = inputSearchProps.keyboardOptions.copy(keyboardType = inputSearchProps.keyboardType),
+            keyboardActions = inputSearchProps.keyboardActions,
+            modifier = inputSearchProps.modifier.height(36.dp).onFocusChanged {
                 isFocused = it.isFocused
                 if (it.isFocused) {
                     inputSearchProps.onFocus()
@@ -137,7 +146,12 @@ fun InputSearch(
             decorationBox = { innerTextField ->
                 Row(verticalAlignment = Alignment.CenterVertically) {
                     Row(
-                        modifier = Modifier.weight(inputSearchProps.showButtonText.ifTrue(8f, 1f))
+                        modifier = Modifier.weight(
+                            inputSearchProps.showButtonText.ifTrue(
+                                8f,
+                                1f
+                            )
+                        )
                             .background(
                                 inputSearchProps.backgroundColor,
                                 RoundedCornerShape(Radius.XL)
@@ -152,7 +166,6 @@ fun InputSearch(
                             ),
                             verticalAlignment = Alignment.CenterVertically
                         ) {
-                            //leading icon
                             Icon(
                                 source = "navigation_search",
                                 modifier = Modifier.padding(end = Spacing.XS),
@@ -168,12 +181,14 @@ fun InputSearch(
                                             lineHeight = 24.sp,
                                             fontWeight = inputSearchProps.fontWeight.value
                                         ),
-                                        color = placeholderColor
+                                        maxLines = 1,
+                                        color = placeholderColor,
+                                        overflow = TextOverflow.Ellipsis
                                     )
                                 }
                                 innerTextField()
                             }
-                            if (isFocused && inputSearchProps.text.value.isNotEmpty()) {
+                            if (inputSearchProps.clearCondition?.invoke() == true || (isFocused && inputSearchProps.text.value.isNotEmpty())) {
                                 Row {
                                     Spacer(Modifier.width(Spacing.XS))
                                     Icon(
@@ -181,7 +196,10 @@ fun InputSearch(
                                         size = 16.dp,
                                         color = AppTheme.current.colors.text.hint,
                                         modifier = Modifier.clickable(
-                                            onClick = { inputSearchProps.text.value = "" },
+                                            onClick = {
+                                                inputSearchProps.text.value = ""
+                                                inputSearchProps.onClearPress.invoke()
+                                            },
                                             interactionSource = remember { MutableInteractionSource() },
                                             indication = null
                                         )
@@ -192,7 +210,8 @@ fun InputSearch(
                                 inputSearchProps.loading,
                                 inputSearchProps.icon,
                                 iconTintColor,
-                                inputSearchProps.onRightIconPressed
+                                inputSearchProps.onRightIconPressed,
+                                iconModifier = inputSearchProps.iconModifier
                             )
                         }
                     }

package/ios/Checkbox/Checkbox.swift

@@ -5,34 +5,77 @@ public struct Checkbox: View{
     @Binding var checked: Bool
     var disabled: Bool
     var onChange: ((Bool)->Void)?
-    
-    public init(_ checked: Binding<Bool>,disabled: Bool = false, onChange: ((Bool)->Void)? = nil){
+    var indeterminate: Bool
+    var title: String
+
+
+    public init(_ checked: Binding<Bool>,disabled: Bool = false, onChange: ( (Bool) -> Void)?,
+                indeterminate: Bool = false,
+                title: String = ""){
         self._checked = checked
-        self.onChange = onChange
         self.disabled = disabled
+        self.onChange = onChange
+        self.indeterminate = indeterminate
+        self.title = title
     }
-    
+
     func onCheck(){
         checked.toggle()
         onChange?(checked)
     }
-    
-    public var body: some View{
-        return SwiftUI.Button(action: onCheck) {
-            HStack {
-                if (checked) {
-                    Image(systemName: "checkmark.square.fill")
+
+    public var body: some View {
+        HStack(spacing: Spacing.S) {
+            // Checkbox
+            ZStack {
+                RoundedRectangle(cornerRadius: Radius.XS)
+                    .fill(backgroundColor)
+                    .frame(width: 20, height: 20)
+                    .overlay(
+                        RoundedRectangle(cornerRadius: Radius.XS)
+                            .stroke(borderColor, lineWidth: Spacing.XXS)
+                    )
+
+                if checked {
+                    Image(systemName: indeterminate ? "minus" : "checkmark")
                         .resizable()
-                        .foregroundColor(disabled ? Colors.black07 : Colors.primary)
-                        .frame(width: 24, height: 24)
+                        .foregroundColor(Colors.black01)
+                        .frame(width: 12, height: 12)
                 }
-            }.frame(width: 24, height: 24)
-                .overlay(RoundedRectangle(cornerRadius: 4).stroke(Colors.black20,lineWidth: checked ? 0 : 1))
-            .background(Colors.black01)
-                
+            }
+            .onTapGesture {
+                if !disabled {
+                    onChange?(checked)
+                }
+            }
+
+            // Title
+            if !title.isEmpty {
+                Text(title)
+                    .font(.description1)
+            }
         }
-        .opacity(disabled ? 0.4 : 1)
-        .disabled(disabled)
     }
-    
+
+    private var borderColor: Color {
+        if disabled {
+            return Colors.black03
+        } else if checked {
+            return Colors.primary
+        } else {
+            return Colors.text
+        }
+    }
+
+    private var backgroundColor: Color {
+        if disabled && checked {
+            return Colors.pink08
+        } else if checked {
+            return Colors.primary
+        } else {
+            return Colors.black01
+        }
+    }
+
+
 }

package/ios/Icon/Icon.swift

@@ -0,0 +1,53 @@
+import SwiftUI
+
+struct IconSource: Codable {
+    let uri: String
+}
+
+func loadIconSources() -> [String: IconSource] {
+    guard let url = Bundle.main.url(forResource: "icon", withExtension: "json") else {
+        print("Error: icon.json not found")
+        return [:]
+    }
+    
+    do {
+        let data = try Data(contentsOf: url)
+        let decoded = try JSONDecoder().decode([String: IconSource].self, from: data)
+        return decoded
+    } catch {
+        print("Error decoding icon.json: \(error)")
+        return [:]
+    }
+}
+
+// Load the JSON data into a global variable
+let iconSources: [String: IconSource] = loadIconSources()
+
+// Icon ViewModel
+public struct Icon: View {
+    var source: String
+    var size: CGFloat
+    var color: Color?
+    var accessibilityLabel: String?
+    
+    public init(
+            source: String,
+            size: CGFloat = 24,
+            color: Color? = nil,
+            accessibilityLabel: String? = nil
+        ) {
+            self.source = source
+            self.size = size
+            self.color = color
+            self.accessibilityLabel = accessibilityLabel
+        }
+
+    public var body: some View {
+        if let uri = iconSources[source]?.uri {
+            ImageView(uri)
+                .frame(width: size, height: size)
+                .foregroundColor(color)
+        }
+    }
+}
+

package/ios/Input/Input.swift

@@ -71,12 +71,22 @@ public struct Input: View {
     var rightIcon: AnyView?
     var onChange: ((String) -> Void)?
     var onBlur: (() -> Void)?
+    var floatingIconURL: String?
+    var floatingIconColor: Color?
+    var size: InputSize
+    var fontWeight: InputFontWeight
+    var disabled: Bool
+    var leadingIcon: String?
+    var leadingIconColor: Color?
+    var loading: Bool
+    var required: Bool
+    var hintText: String?
     
     func onCancel(){
         self.value.removeAll()
     }
     
-    public init(_ value: Binding<String>, placeholder: String  = "", floatingValue: String = "", multilines: Bool  = false, errorMessage: String = "", isSecure: Bool = false, keyboardType: UIKeyboardType = .default, floatingIcon:  AnyView? = nil, rightIcon:  AnyView? = nil, onChange: ((String)->Void)? = nil, onBlur: (()->Void)? = nil){
+    public init(_ value: Binding<String>, placeholder: String  = "", floatingValue: String = "", multilines: Bool  = false, errorMessage: String = "", isSecure: Bool = false, keyboardType: UIKeyboardType = .default, floatingIcon:  AnyView? = nil, rightIcon:  AnyView? = nil, onChange: ((String)->Void)? = nil, onBlur: (()->Void)? = nil, floatingIconURL: String? = nil, floatingIconColor: Color? = Colors.pink03, size: InputSize = .small, fontWeight: InputFontWeight = .regular, disabled: Bool = false, leadingIcon: String? = nil, leadingIconColor: Color? = Colors.pink03, loading: Bool = false, required: Bool = false, hintText: String? = nil){
         self.placeholder = placeholder
         self.floatingValue = floatingValue
         self.errorMessage = errorMessage
@@ -86,6 +96,16 @@ public struct Input: View {
         self.rightIcon = rightIcon
         self.floatingIcon = floatingIcon
         self.onChange = onChange
+        self.floatingIconURL = floatingIconURL
+        self.floatingIconColor = floatingIconColor
+        self.size = size
+        self.fontWeight = fontWeight
+        self.disabled = disabled
+        self.leadingIcon = leadingIcon
+        self.leadingIconColor = leadingIconColor
+        self.loading = loading
+        self.required = required
+        self.hintText = hintText
     }
     
     func onChangeText(value: String){
@@ -93,57 +113,95 @@ public struct Input: View {
     }
     
     public var body: some View {
-        return ZStack (alignment: .topLeading){
-            HStack(alignment: .center){
-                if (!isSecure){
-                    TextField("",text: $value, onEditingChanged:{ isChange in
-                        self.focused = isChange
-                    })
-                    .font(.paragraph)
-                    .padding(.horizontal, 12)
-                    .accentColor(Colors.pink03)
-                    .keyboardType(keyboardType)
-                    .valueChanged(value: value, onChange: onChangeText)
-                    
-                    HStack{
-                        SwiftButton(action: onCancel){
-                            Image(systemName: "x.circle.fill")
-                                .foregroundColor(Colors.text)
-                                .frame(width: 16, height: 16)
-                                .padding(.leading, -4)
-                                .padding(.trailing, 8)
+            VStack(alignment: .leading, spacing: 4) {
+                ZStack(alignment: .topLeading) {
+                    HStack(alignment: .center) {
+                        if let leadingIcon = leadingIcon {
+                            Icon(source: leadingIcon, size: 16, color: leadingIconColor)
                         }
                         
-                        rightIcon
+                        if !isSecure {
+                            TextField("", text: $value, onEditingChanged: { isChange in
+                                self.focused = isChange
+                            })
+                            .disabled(disabled)
+                            .font(fontWeight == .bold ? .headline : .body)
+                        } else {
+                            DotTextField(value: $value)
+                                .disabled(disabled)
+                        }
                         
+                        if loading {
+                            ActivityIndicator(isAnimating: .constant(true), style: .medium)
+                                .frame(width: 20, height: 20)
+                        } else if !value.isEmpty {
+                            SwiftButton(action: onCancel){
+                                Image(systemName: "x.circle.fill")
+                                    .foregroundColor(Colors.text)
+                                    .frame(width: 16, height: 16)
+                                    .padding(.leading, -4)
+                                    .padding(.trailing, 8)
+                            }
+                        }
+
+                        rightIcon
                     }
-                }else{
-                    DotTextField(value: $value)
-                        .padding(.horizontal, 12)
-                        .accentColor(Colors.pink03)
-                    SwiftButton(action: onCancel){
-                        Image(systemName: "x.circle.fill")
-                            .foregroundColor(Colors.text)
-                            .frame(width: 16, height: 16)
-                            .padding(.leading, -4)
-                            .padding(.trailing, 8)
+                    .padding(.horizontal, 12)
+                    .frame(height: size == .small ? 40 : 48)
+                    .background(disabled ? Colors.black01 : Color.white)
+                    .overlay(RoundedRectangle(cornerRadius: 8).stroke(focused ? Colors.pink03 : Colors.border, lineWidth: 1))
+                    
+                    if value.isEmpty {
+                        Text(placeholder + (required ? " *" : ""))
+                            .foregroundColor(Colors.black09)
+                            .padding(.horizontal, leadingIcon == nil ? 12 : 32)
+                            .padding(.top, 12)
+                            .allowsHitTesting(false)
+                    }
+                    
+                    if !floatingValue.isEmpty {
+                        FloatingComponent(floatingValue, floatingIcon: floatingIconURL.map { url in
+                            AnyView(
+                                Icon(source: url, size: 16, color: floatingIconColor)
+                                )
+                        })
+                            
                     }
                 }
+                
+                if !errorMessage.isEmpty {
+                    Text(errorMessage)
+                        .foregroundColor(.red)
+                        .font(.caption)
+                } else if let hint = hintText {
+                    Text(hint)
+                        .foregroundColor(Colors.black09)
+                        .font(.caption)
+                }
             }
-            .frame(maxWidth: .infinity, minHeight: 48)
-            .overlay(RoundedRectangle(cornerRadius: 8).stroke(focused == true ? Colors.pink03 : Colors.border, lineWidth: 1))
-            .padding(.horizontal, 1)
-            if (value.isEmpty){
-                Text(placeholder)
-                    .font(.paragraph)
-                    .font(.system(size: 16))
-                    .foregroundColor(Colors.black09)
-                    .padding(.leading, 12)
-                    .padding(.top, 16)
-                    .allowsHitTesting(false)
-            }
-            if (!floatingValue.isEmpty) {FloatingComponent(floatingValue, floatingIcon: floatingIcon)}
-        }.padding(.bottom, 8)
+        }
+}
+
+
+struct ActivityIndicator: UIViewRepresentable {
+    @Binding var isAnimating: Bool
+    let style: UIActivityIndicatorView.Style
+
+    func makeUIView(context: UIViewRepresentableContext<ActivityIndicator>) -> UIActivityIndicatorView {
+        return UIActivityIndicatorView(style: style)
     }
-    
+
+    func updateUIView(_ uiView: UIActivityIndicatorView, context: UIViewRepresentableContext<ActivityIndicator>) {
+        isAnimating ? uiView.startAnimating() : uiView.stopAnimating()
+    }
+}
+
+public enum InputSize {
+    case small
+    case large
+}
+
+public enum InputFontWeight {
+    case regular
+    case bold
 }

package/ios/Input/InputSearch.swift

@@ -0,0 +1,182 @@
+//
+//  InputSearch.swift
+//  Pods
+//
+//  Created by dung.pham2 on 3/12/24.
+//
+import SwiftUI
+
+// MARK: - RenderRightIconSearch
+
+struct RenderRightIconSearch: View {
+    let loading: Bool
+    let icon: String
+    let color: Color
+    let onClick: () -> Void
+    
+    var body: some View {
+        HStack(spacing: 0) {
+            if loading {
+                ActivityIndicator(isAnimating: .constant(true), style: .medium)
+                    .frame(width: 16, height: 16)
+                    .padding(.horizontal, Spacing.S)
+            }
+            if !icon.isEmpty {
+                Divider()
+                    .frame(width: 1)
+                    .background(Colors.primary)
+                    .padding(.leading, Spacing.S)
+                
+                Image(systemName: icon)
+                    .foregroundColor(color)
+                    .frame(width: 24, height: 24)
+                    .padding(.leading, Spacing.S)
+                    .onTapGesture(perform: onClick)
+            }
+        }
+    }
+}
+
+// MARK: - InputSearch
+
+public struct InputSearch: View {
+    @Binding var text: String
+    var buttonText: String = ""
+    var showButtonText: Bool = false
+    var showBorder: Bool = true
+    var placeholder: String = ""
+    var onChangeText: (String) -> Void = { _ in }
+    var onPressButtonText: () -> Void = {}
+    var error: String = ""
+    var disabled: Bool = false
+    var icon: String = ""
+    var iconColor: Color = Colors.text
+    var onRightIconPressed: () -> Void = {}
+    var onFocus: () -> Void = {}
+    var onBlur: () -> Void = {}
+    var loading: Bool = false
+    var fontWeight: Font.Weight = .regular
+    var keyboardType: UIKeyboardType = .default
+    
+    @State private var isFocused = false
+    @State private var isBlurred = false
+    
+    public init(text: Binding<String>,
+                buttonText: String = "",
+                showButtonText: Bool = false,
+                showBorder: Bool = true,
+                placeholder: String = "",
+                onChangeText: @escaping (String) -> Void = { _ in },
+                onPressButtonText: @escaping () -> Void = {},
+                error: String = "",
+                disabled: Bool = false,
+                icon: String = "",
+                iconColor: Color = Colors.text,
+                onRightIconPressed: @escaping () -> Void = {},
+                onFocus: @escaping () -> Void = {},
+                onBlur: @escaping () -> Void = {},
+                loading: Bool = false,
+                fontWeight: Font.Weight = .regular,
+                keyboardType: UIKeyboardType = .default) {
+        self._text = text
+        self.buttonText = buttonText
+        self.showButtonText = showButtonText
+        self.showBorder = showBorder
+        self.placeholder = placeholder
+        self.onChangeText = onChangeText
+        self.onPressButtonText = onPressButtonText
+        self.error = error
+        self.disabled = disabled
+        self.icon = icon
+        self.iconColor = iconColor
+        self.onRightIconPressed = onRightIconPressed
+        self.onFocus = onFocus
+        self.onBlur = onBlur
+        self.loading = loading
+        self.fontWeight = fontWeight
+        self.keyboardType = keyboardType
+        }
+
+    
+    public var body: some View {
+        VStack(alignment: .leading, spacing: 0) {
+            HStack(spacing: 0) {
+                HStack {
+                    Image(systemName: "magnifyingglass")
+                        .foregroundColor(Colors.black12)
+                        .frame(width: 24, height: 24)
+                        .padding(.trailing, Spacing.XS)
+                    
+                    ZStack(alignment: .leading) {
+                        if text.isEmpty {
+                            Text(placeholder)
+                                .foregroundColor(disabled ? Colors.black08 : Colors.black12)
+                                .font(.system(size: 16, weight: fontWeight))
+                        }
+                        TextField("", text: $text, onEditingChanged: { editing in
+                            isFocused = editing
+                            if editing {
+                                onFocus()
+                            } else if isBlurred {
+                                onBlur()
+                            }
+                            if editing && !isBlurred {
+                                isBlurred = true
+                            }
+                        }, onCommit: {})
+                        .disabled(disabled)
+                        .foregroundColor(disabled ? Colors.black08 : Colors.black17)
+                        .font(.system(size: 15, weight: fontWeight))
+                        .keyboardType(keyboardType)
+                    }
+                    
+                    if isFocused && !text.isEmpty {
+                        SwiftButton(action: { text = "" }) {
+                            Image(systemName: "xmark.circle.fill")
+                                .foregroundColor(Colors.black12)
+                                .frame(width: 16, height: 16)
+                        }
+                        .padding(.leading, Spacing.S)
+                    }
+                    
+                    RenderRightIconSearch(loading: loading, icon: icon, color: disabled ? Colors.black08 : iconColor, onClick: onRightIconPressed)
+                }
+                .padding(.horizontal, Spacing.M)
+                .padding(.vertical, Spacing.S)
+                .background(Colors.black01)
+                .cornerRadius(Radius.XL)
+                .overlay(
+                    RoundedRectangle(cornerRadius: Radius.XL)
+                        .stroke(getBorderColor(isFocused: isFocused, error: error, disabled: disabled), lineWidth: showBorder ? 1 : 0)
+                )
+                .frame(maxWidth: showButtonText ? .infinity : nil, alignment: .leading)
+                
+                if showButtonText {
+                    SwiftButton(action: onPressButtonText) {
+                        Text(buttonText)
+                            .foregroundColor(Colors.black17)
+                            .font(.system(size: 14, weight: .medium))
+                    }
+                    .padding(.leading, Spacing.L)
+                }
+            }
+        }
+    }
+}
+
+// MARK: - Helper Functions
+
+func getBorderColor(isFocused: Bool, error: String, disabled: Bool) -> Color {
+    if disabled {
+        return Colors.black08
+    } else if !error.isEmpty {
+        return Colors.red03
+    } else if isFocused {
+        return Colors.primary
+    } else {
+        return Colors.black04
+    }
+}
+
+
+

package/ios/Input/InputTextArea.swift

@@ -0,0 +1,242 @@
+//
+//  InputTextArea.swift
+//  Pods
+//
+//  Created by dung.pham2 on 2/12/24.
+//
+import SwiftUI
+
+// Make these constants public
+public let MAX_LENGTH = 300
+public let DEFAULT_HEIGHT: CGFloat = 104
+
+struct UITextViewWrapper: UIViewRepresentable {
+    @Binding var text: String
+    var onDone: (() -> Void)?
+    var onFocus: (() -> Void)?
+    var onBlur: (() -> Void)?
+    
+    func makeUIView(context: Context) -> UITextView {
+        let textView = UITextView()
+        textView.delegate = context.coordinator
+        return textView
+    }
+    
+    func updateUIView(_ uiView: UITextView, context: Context) {
+        uiView.text = text
+    }
+    
+    func makeCoordinator() -> Coordinator {
+        Coordinator(self)
+    }
+    
+    class Coordinator: NSObject, UITextViewDelegate {
+        var parent: UITextViewWrapper
+        
+        init(_ parent: UITextViewWrapper) {
+            self.parent = parent
+        }
+        
+        func textViewDidChange(_ textView: UITextView) {
+            parent.text = textView.text
+        }
+        
+        func textViewDidBeginEditing(_ textView: UITextView) {
+            parent.onFocus?()
+        }
+        
+        func textViewDidEndEditing(_ textView: UITextView) {
+            parent.onBlur?()
+        }
+        
+        func textView(_ textView: UITextView, shouldChangeTextIn range: NSRange, replacementText text: String) -> Bool {
+            if text == "\n" {
+                parent.onDone?()
+                return false
+            }
+            return true
+        }
+    }
+}
+
+// Make the struct public
+public struct InputTextArea: View {
+    @Binding var text: String
+    var maxLength: Int = MAX_LENGTH
+    var height: CGFloat = DEFAULT_HEIGHT
+    var floatingValue: String = ""
+    var floatingValueColor: Color = .gray
+    var floatingIcon: String = ""
+    var floatingIconColor: Color = .black
+    var placeholder: String = ""
+    var onChangeText: (String) -> Void = { _ in }
+    var error: String = ""
+    var errorSpacing: Bool = false
+    var disabled: Bool = false
+    var icon: String = ""
+    var iconColor: Color = .black
+    var onRightIconPressed: () -> Void = {}
+    var onFocus: () -> Void = {}
+    var onBlur: () -> Void = {}
+    var loading: Bool = false
+    var required: Bool = false
+    var fontWeight: Font.Weight = .regular
+    var keyboardType: UIKeyboardType = .default
+    
+    @State private var isFocused = false
+    @State private var isBlurred = false
+    
+    // Make the initializer public
+    public init(
+        text: Binding<String>,
+        maxLength: Int = MAX_LENGTH,
+        height: CGFloat = DEFAULT_HEIGHT,
+        floatingValue: String = "",
+        floatingValueColor: Color = .gray,
+        floatingIcon: String = "",
+        floatingIconColor: Color = .black,
+        placeholder: String = "",
+        onChangeText: @escaping (String) -> Void = { _ in },
+        error: String = "",
+        errorSpacing: Bool = false,
+        disabled: Bool = false,
+        icon: String = "",
+        iconColor: Color = Colors.pink03,
+        onRightIconPressed: @escaping () -> Void = {},
+        onFocus: @escaping () -> Void = {},
+        onBlur: @escaping () -> Void = {},
+        loading: Bool = false,
+        required: Bool = false,
+        fontWeight: Font.Weight = .regular,
+        keyboardType: UIKeyboardType = .default
+    ) {
+        self._text = text
+        self.maxLength = maxLength
+        self.height = height
+        self.floatingValue = floatingValue
+        self.floatingValueColor = floatingValueColor
+        self.floatingIcon = floatingIcon
+        self.floatingIconColor = floatingIconColor
+        self.placeholder = placeholder
+        self.onChangeText = onChangeText
+        self.error = error
+        self.errorSpacing = errorSpacing
+        self.disabled = disabled
+        self.icon = icon
+        self.iconColor = iconColor
+        self.onRightIconPressed = onRightIconPressed
+        self.onFocus = onFocus
+        self.onBlur = onBlur
+        self.loading = loading
+        self.required = required
+        self.fontWeight = fontWeight
+        self.keyboardType = keyboardType
+    }
+    
+    public var body: some View {
+        VStack(alignment: .leading, spacing: 0) {
+                    ZStack(alignment: .topLeading) {
+                        if !floatingValue.isEmpty || !floatingIcon.isEmpty {
+                            HStack(spacing: 4) {
+                                Text(floatingValue)
+                                    .font(.caption)
+                                    .foregroundColor(disabled ? .gray : floatingValueColor)
+                                
+                                if required {
+                                    Text("*")
+                                        .font(.caption)
+                                        .foregroundColor(.red)
+                                }
+                                
+                                if !floatingIcon.isEmpty {
+                                    Image(systemName: floatingIcon)
+                                        .font(.caption)
+                                        .foregroundColor(disabled ? .gray : floatingIconColor)
+                                }
+                            }
+                            .padding(.horizontal, 8)
+                            .background(Colors.black01)
+                            .offset(x: Spacing.S, y: -height / 10)
+                            .zIndex(10)
+                        }
+                        
+                        VStack {
+                            ZStack(alignment: .topLeading) {
+                                if text.isEmpty {
+                                    Text(placeholder)
+                                        .foregroundColor(disabled ? .gray : .gray)
+                                        .font(.system(size: 16, weight: fontWeight))
+                                        .padding(.horizontal, 16)
+                                        .padding(.vertical, 12)
+                                }
+                                
+                                UITextViewWrapper(text: $text, onDone: {
+                                    // Handle done action if needed
+                                },
+                                onFocus: {
+                                    isFocused = true
+                                    onFocus()
+                                }, onBlur: {
+                                    isFocused = false
+                                    isBlurred = true
+                                    onBlur()
+                                })
+                                .frame(height: height)
+                                .padding(.horizontal, 12)
+                                .padding(.vertical, 8)
+                                .disabled(disabled)                            }
+                            
+                            HStack {
+                                Spacer()
+                                Text("\(text.count)/\(maxLength)")
+                                    .font(.caption)
+                                    .foregroundColor(.gray)
+                            }
+                            .padding(.horizontal, 16)
+                            .padding(.bottom, 12)
+                        }
+                        .background(Color.white)
+                        .cornerRadius(8)
+                        .overlay(
+                            RoundedRectangle(cornerRadius: 8)
+                                .stroke(borderColor, lineWidth: 1)
+                        )
+                    }
+                    
+                    if !error.isEmpty {
+                        Text(error)
+                            .font(.caption)
+                            .foregroundColor(.red)
+                            .padding(.top, errorSpacing ? 8 : 4)
+                    }
+                }
+                .onReceive(NotificationCenter.default.publisher(for: UIResponder.keyboardWillShowNotification)) { _ in
+                    if !isBlurred {
+                        isFocused = true
+                        onFocus()
+                    }
+                }
+                .onReceive(NotificationCenter.default.publisher(for: UIResponder.keyboardWillHideNotification)) { _ in
+                    if isFocused {
+                        isFocused = false
+                        isBlurred = true
+                        onBlur()
+                    }
+                }
+    }
+    
+    private var borderColor: Color {
+        if disabled {
+            return Colors.black03
+        } else if !error.isEmpty {
+            return .red
+        } else if isFocused {
+            return Colors.pink03
+        } else {
+            return Colors.border
+        }
+
+    }
+}
+
+

package/ios/Typography/Typography.swift

@@ -4,18 +4,61 @@ public extension Font {
     static func appFont(size: CGFloat) -> Font {
         return Font.custom("SFProText", size: size)
     }
-
-    static let h1 = appFont(size: 36).weight(.semibold)
+    
+    // New supported typography styles
+    static let headline_default_bold = appFont(size: 24).weight(.bold)
+    static let header_m_bold = appFont(size: 18).weight(.bold)
+    static let header_default_bold = appFont(size: 16).weight(.bold)
+    static let header_s_semibold = appFont(size: 14).weight(.semibold)
+    static let header_xs_semibold = appFont(size: 12).weight(.semibold)
+    static let body_default_regular = appFont(size: 14).weight(.regular)
+    static let description_default_regular = appFont(size: 12).weight(.regular)
+    static let description_xs_regular = appFont(size: 10).weight(.regular)
+    static let label_default_medium = appFont(size: 14).weight(.medium)
+    static let label_s_medium = appFont(size: 12).weight(.medium)
+    static let label_xs_medium = appFont(size: 10).weight(.medium)
+    static let action_default_bold = appFont(size: 16).weight(.bold)
+    static let action_s_bold = appFont(size: 14).weight(.bold)
+    static let action_xs_bold = appFont(size: 12).weight(.bold)
+    static let action_xxs_bold = appFont(size: 10).weight(.bold)
+    
+    // Legacy styles
+    static let headline_default = appFont(size: 28).weight(.semibold)
+    static let headline_s = appFont(size: 24).weight(.semibold)
+    static let headline_l = appFont(size: 32).weight(.semibold)
+    static let headline_xl = appFont(size: 36).weight(.semibold)
+    static let title_default = appFont(size: 20).weight(.bold)
+    static let title_xs = appFont(size: 16).weight(.bold)
+    static let title_s = appFont(size: 18).weight(.bold)
+    static let header_default = appFont(size: 15).weight(.semibold)
+    static let header_xs = appFont(size: 12).weight(.semibold)
+    static let header_s = appFont(size: 14).weight(.semibold)
+    static let paragraph_default = appFont(size: 15).weight(.regular)
+    static let paragraph_bold = appFont(size: 15).weight(.bold)
+    static let description_default = appFont(size: 14).weight(.regular)
+    static let description_xs = appFont(size: 10).weight(.regular)
+    static let description_s = appFont(size: 12).weight(.regular)
+    static let label_default = appFont(size: 14).weight(.medium)
+    static let label_xxs = appFont(size: 8).weight(.medium)
+    static let label_xs = appFont(size: 10).weight(.medium)
+    static let label_s = appFont(size: 12).weight(.medium)
+    static let action_default = appFont(size: 16).weight(.bold)
+    static let action_xxs = appFont(size: 10).weight(.bold)
+    static let action_xs = appFont(size: 12).weight(.bold)
+    static let action_s = appFont(size: 15).weight(.bold)
+    
+    // deprecated
+    static let h1 = appFont(size: 36).weight(.semibold) //headline_xl
     static let h2 = appFont(size: 32).weight(.semibold)
     static let h3 = appFont(size: 28).weight(.semibold)
     static let h4 = appFont(size: 24).weight(.semibold)
     static let title1 = appFont(size: 20).weight(.bold)
     static let title2 = appFont(size: 18).weight(.bold)
     static let title3 = appFont(size: 16).weight(.bold)
-    static let headerText1 = appFont(size: 15).weight(.semibold)
+    static let headerText1 = appFont(size: 15).weight(.semibold) //header_default
     static let headerText2 = appFont(size: 14).weight(.semibold)
     static let headerText3 = appFont(size: 12).weight(.semibold)
-    static let paragraph = appFont(size: 15).weight(.regular)
+    static let paragraph = appFont(size: 15).weight(.regular) //paragraph_default
     static let description1 = appFont(size: 14).weight(.regular)
     static let description2 = appFont(size: 12).weight(.regular)
     static let description3 = appFont(size: 10).weight(.regular)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@momo-kits/native-kits",
-  "version": "0.89.33",
+  "version": "0.110.1-beta.5",
   "private": false,
   "dependencies": {},
   "devDependencies": {},