@momo-kits/native-kits 0.167.1-duo.2-debug → 0.167.1-duo.20

package/ios/Input/InputPhoneNumber.swift

@@ -76,16 +76,15 @@ public struct InputPhoneNumber: View {
             }
         )
         
-        VStack(alignment: .leading, spacing: 4) {
+        VStack(alignment: .leading, spacing: 0) {
             HStack(spacing: 0) {
                 // 🇻🇳 Flag
                 ImageView("https://static.momocdn.net/app/img/icon/ic-qrcode-package/ic_vn_flag.png")
                     .frame(width: 24, height: 24)
                     .padding(.trailing, Spacing.XS)
-                
-                MomoText("+84", typography: size == .small ? .headerSSemibold : .headerMBold)
-                    .foregroundColor(theme.colors.text.default)
-                
+
+                MomoText("+84", typography: size == .small ? .headerSSemibold : .headerMBold, color: theme.colors.text.default)
+
                 Rectangle()
                     .fill(theme.colors.border.default)
                     .frame(width: 1, height: size == .small ? 24 : 32)
@@ -105,7 +104,9 @@ public struct InputPhoneNumber: View {
                         handleFocusChange(focused)
                     })
                     .keyboardType(.numberPad)
-                    .font(size == .small ? .header_s_semibold : .header_m_bold)
+                    .font(size == .small
+                          ? fontScale.font(size: 14, weight: .semibold)
+                          : fontScale.font(size: 18, weight: .bold))
                     .ignoreBoldTextSetting()
                     .foregroundColor(theme.colors.text.default)
                     .applyCursorColor(theme.colors.primary)
@@ -125,13 +126,14 @@ public struct InputPhoneNumber: View {
                         onChangeText?("")
                     }) {
                         Icon(source: "24_navigation_close_circle_full", size: 16, color: theme.colors.text.hint)
-                            .padding(.leading, Spacing.S).accessibility(identifier: "ic_clear")
+                            .padding(.horizontal, Spacing.S)
                     }
+                    .accessibilityIdentifier("ic_clear")
                 }
-                
+
                 // Loading indicator
                 if loading {
-                    ActivityIndicator(isAnimating: .constant(true), style: .medium)
+                    ActivityIndicator(isAnimating: .constant(true), style: .medium, color: rightIconColor ?? theme.colors.text.default)
                         .frame(width: 16, height: 16)
                 }
                 
@@ -166,6 +168,7 @@ public struct InputPhoneNumber: View {
     // MARK: - Helpers
     
     private func handleFocusChange(_ focused: Bool) {
+        guard focused != isFocused else { return }
         isFocused = focused
         if focused {
             onFocus?()

package/ios/Input/InputSearch.swift

@@ -18,16 +18,17 @@ struct RenderRightIconSearch: View {
     var body: some View {
         HStack(spacing: 0) {
             if loading {
-                ActivityIndicator(isAnimating: .constant(true), style: .medium)
+                ActivityIndicator(isAnimating: .constant(true), style: .medium, color: color)
                     .frame(width: 16, height: 16)
                     .padding(.horizontal, Spacing.S)
             }
             if !icon.isEmpty {
-                Divider()
-                    .frame(width: 1)
-                    .background(theme.colors.primary)
+                // Compose: a 1pt rule inset S from the top and bottom of the 36pt bar.
+                Rectangle()
+                    .fill(theme.colors.primary)
+                    .frame(width: 1, height: 36 - Spacing.S * 2)
                     .padding(.leading, Spacing.S)
-                
+
                 Icon(source: icon, size: 24, color: color)
                     .padding(.leading, Spacing.S)
                     .onTapGesture(perform: onClick)
@@ -58,6 +59,10 @@ public struct InputSearchProps {
     var searchIcon: (() -> AnyView)? = nil
     // Mirrors Compose's InputSearchProps.placeholderCustomRender — a custom placeholder view.
     var placeholderCustomRender: (() -> AnyView)? = nil
+    var backgroundColor: Color? = nil
+    var clearCondition: (() -> Bool)? = nil
+    var onClearPress: () -> Void = {}
+    var onSubmit: () -> Void = {}
 
     public init(text: Binding<String>,
                 buttonText: String = "",
@@ -77,7 +82,11 @@ public struct InputSearchProps {
                 fontWeight: Font.Weight = .regular,
                 keyboardType: UIKeyboardType = .default,
                 searchIcon: (() -> AnyView)? = nil,
-                placeholderCustomRender: (() -> AnyView)? = nil) {
+                placeholderCustomRender: (() -> AnyView)? = nil,
+                backgroundColor: Color? = nil,
+                clearCondition: (() -> Bool)? = nil,
+                onClearPress: @escaping () -> Void = {},
+                onSubmit: @escaping () -> Void = {}) {
         self._text = text
         self.buttonText = buttonText
         self.showButtonText = showButtonText
@@ -97,6 +106,10 @@ public struct InputSearchProps {
         self.keyboardType = keyboardType
         self.searchIcon = searchIcon
         self.placeholderCustomRender = placeholderCustomRender
+        self.backgroundColor = backgroundColor
+        self.clearCondition = clearCondition
+        self.onClearPress = onClearPress
+        self.onSubmit = onSubmit
         }
 }
 
@@ -124,6 +137,10 @@ public struct InputSearch: View {
     var keyboardType: UIKeyboardType = .default
     var searchIcon: (() -> AnyView)? = nil
     var placeholderCustomRender: (() -> AnyView)? = nil
+    var backgroundColor: Color? = nil
+    var clearCondition: (() -> Bool)? = nil
+    var onClearPress: () -> Void = {}
+    var onSubmit: () -> Void = {}
 
     @State private var isFocused = false
     @State private var isBlurred = false
@@ -146,7 +163,11 @@ public struct InputSearch: View {
                 fontWeight: Font.Weight = .regular,
                 keyboardType: UIKeyboardType = .default,
                 searchIcon: (() -> AnyView)? = nil,
-                placeholderCustomRender: (() -> AnyView)? = nil) {
+                placeholderCustomRender: (() -> AnyView)? = nil,
+                backgroundColor: Color? = nil,
+                clearCondition: (() -> Bool)? = nil,
+                onClearPress: @escaping () -> Void = {},
+                onSubmit: @escaping () -> Void = {}) {
         self._text = text
         self.buttonText = buttonText
         self.showButtonText = showButtonText
@@ -166,6 +187,10 @@ public struct InputSearch: View {
         self.keyboardType = keyboardType
         self.searchIcon = searchIcon
         self.placeholderCustomRender = placeholderCustomRender
+        self.backgroundColor = backgroundColor
+        self.clearCondition = clearCondition
+        self.onClearPress = onClearPress
+        self.onSubmit = onSubmit
         }
 
     /// Convenience initializer mirroring Compose's `InputSearch(inputSearchProps)`.
@@ -189,88 +214,90 @@ public struct InputSearch: View {
             fontWeight: props.fontWeight,
             keyboardType: props.keyboardType,
             searchIcon: props.searchIcon,
-            placeholderCustomRender: props.placeholderCustomRender
+            placeholderCustomRender: props.placeholderCustomRender,
+            backgroundColor: props.backgroundColor,
+            clearCondition: props.clearCondition,
+            onClearPress: props.onClearPress,
+            onSubmit: props.onSubmit
         )
     }
 
 
     public var body: some View {
         let iconColor: Color = disabled ? theme.colors.text.disable : (self.iconColor ?? theme.colors.text.default)
-        VStack(alignment: .leading, spacing: 0) {
+        HStack(spacing: 0) {
             HStack(spacing: 0) {
-                HStack {
-                    if let searchIcon = searchIcon {
-                        searchIcon()
-                    } else {
-                        Image(systemName: "magnifyingglass")
-                            .foregroundColor(theme.colors.text.hint)
-                            .frame(width: 24, height: 24)
-                            .padding(.trailing, Spacing.XS)
-                    }
+                if let searchIcon = searchIcon {
+                    searchIcon()
+                } else {
+                    Icon(source: "navigation_search", size: 24, color: theme.colors.text.hint)
+                        .padding(.trailing, Spacing.XS)
+                }
 
-                    ZStack(alignment: .leading) {
-                        if text.isEmpty {
-                            if let placeholderCustomRender = placeholderCustomRender {
-                                placeholderCustomRender()
-                            } else {
-                                Text(placeholder)
-                                    .foregroundColor(disabled ? theme.colors.text.disable : theme.colors.text.hint)
-                                    .font(.system(size: fontScale(14), weight: fontWeight))
-                                    .ignoreBoldTextSetting()
-                            }
+                ZStack(alignment: .leading) {
+                    if text.isEmpty {
+                        if let placeholderCustomRender = placeholderCustomRender {
+                            placeholderCustomRender()
+                        } else {
+                            MomoText(
+                                placeholder,
+                                typography: fontWeight == .bold ? .actionSBold : .bodyDefaultRegular,
+                                color: disabled ? theme.colors.text.disable : theme.colors.text.hint,
+                                maxLines: 1
+                            )
                         }
-                        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 ? theme.colors.text.disable : theme.colors.text.default)
-                        .font(.system(size: fontScale(14), weight: fontWeight))
-                        .ignoreBoldTextSetting()
-                        .keyboardType(keyboardType)
-                        .applyCursorColor(theme.colors.primary)
                     }
-                    
-                    if isFocused && !text.isEmpty {
-                        SwiftButton(action: {
-                            text = ""
-                            // Kotlin's clear icon fires a callback distinct from
-                            // onChangeText (`onClearPress`, not ported here); route
-                            // through onChangeText so clearing isn't a silent no-op.
-                            onChangeText("")
-                        }) {
-                            Image(systemName: "xmark.circle.fill")
-                                .foregroundColor(theme.colors.text.hint)
-                                .frame(width: 16, height: 16)
+                    TextField("", text: $text, onEditingChanged: { editing in
+                        isFocused = editing
+                        if editing {
+                            onFocus()
+                        } else if isBlurred {
+                            onBlur()
                         }
-                        .padding(.leading, Spacing.S)
-                    }
-                    
-                    RenderRightIconSearch(loading: loading, icon: icon, color: iconColor, onClick: onRightIconPressed)
+                        if editing && !isBlurred {
+                            isBlurred = true
+                        }
+                    }, onCommit: onSubmit)
+                    .disabled(disabled)
+                    .foregroundColor(disabled ? theme.colors.text.disable : theme.colors.text.default)
+                    .font(.system(size: fontScale(14), weight: fontWeight))
+                    .ignoreBoldTextSetting()
+                    .keyboardType(keyboardType)
+                    .applyCursorColor(theme.colors.primary)
                 }
-                .padding(.horizontal, Spacing.M)
-                .padding(.vertical, Spacing.S)
-                .background(theme.colors.background.surface)
-                .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) {
-                        MomoText(buttonText, typography: .actionDefaultBold, color: theme.colors.text.default)
+
+                if clearCondition?() == true || (isFocused && !text.isEmpty) {
+                    SwiftButton(action: {
+                        text = ""
+                        // Compose only fires onClearPress; onChangeText("") is kept so existing
+                        // SwiftUI callers that filter on it still see the clear.
+                        onChangeText("")
+                        onClearPress()
+                    }) {
+                        Icon(source: "24_navigation_close_circle_full", size: 16, color: theme.colors.text.hint)
                     }
-                    .padding(.leading, Spacing.L)
+                    .padding(.leading, Spacing.XS)
+                }
+
+                RenderRightIconSearch(loading: loading, icon: icon, color: iconColor, onClick: onRightIconPressed)
+            }
+            .padding(.horizontal, Spacing.M)
+            .frame(maxWidth: .infinity, alignment: .leading)
+            .frame(height: 36)
+            .background(
+                RoundedRectangle(cornerRadius: Radius.XL)
+                    .fill(backgroundColor ?? theme.colors.background.surface)
+            )
+            .overlay(
+                RoundedRectangle(cornerRadius: Radius.XL)
+                    .stroke(showBorder ? getBorderColor(isFocused: isFocused, error: error, disabled: disabled) : .clear, lineWidth: 1)
+            )
+
+            if showButtonText {
+                SwiftButton(action: onPressButtonText) {
+                    MomoText(buttonText, typography: .actionDefaultBold, color: theme.colors.text.default)
                 }
+                .padding(.leading, Spacing.L)
             }
         }
     }

package/ios/Input/InputTextArea.swift

@@ -16,22 +16,24 @@ struct UITextViewWrapper: UIViewRepresentable {
     var textColor: Color
     var cursorColor: Color
     var fontWeight: Font.Weight
+    var keyboardType: UIKeyboardType = .default
     var disabled: Bool
     var onChangeText: (String) -> Void
-    var onDone: (() -> Void)?
     var onFocus: (() -> Void)?
     var onBlur: (() -> Void)?
-    
+
     func makeUIView(context: Context) -> UITextView {
         let textView = UITextView()
         textView.delegate = context.coordinator
         textView.backgroundColor = .clear
         textView.textContainerInset = .zero
         textView.textContainer.lineFragmentPadding = 0
+        textView.keyboardType = keyboardType
         return textView
     }
-    
+
     func updateUIView(_ uiView: UITextView, context: Context) {
+        context.coordinator.parent = self
         if uiView.text != text {
             uiView.text = text
         }
@@ -44,19 +46,23 @@ struct UITextViewWrapper: UIViewRepresentable {
             weight: fontWeight == .bold ? .bold : .regular
         )
         uiView.isEditable = !disabled
+        if uiView.keyboardType != keyboardType {
+            uiView.keyboardType = keyboardType
+            uiView.reloadInputViews()
+        }
     }
-    
+
     func makeCoordinator() -> Coordinator {
         Coordinator(self)
     }
-    
+
     class Coordinator: NSObject, UITextViewDelegate {
         var parent: UITextViewWrapper
-        
+
         init(_ parent: UITextViewWrapper) {
             self.parent = parent
         }
-        
+
         func textViewDidChange(_ textView: UITextView) {
             let limited = String(textView.text.prefix(parent.maxLength))
             if textView.text != limited {
@@ -65,20 +71,17 @@ struct UITextViewWrapper: UIViewRepresentable {
             parent.text = limited
             parent.onChangeText(limited)
         }
-        
+
         func textViewDidBeginEditing(_ textView: UITextView) {
             parent.onFocus?()
         }
-        
+
         func textViewDidEndEditing(_ textView: UITextView) {
             parent.onBlur?()
         }
-        
+
+        // Like Compose's `onValueChange`, an edit that would exceed maxLength is rejected whole.
         func textView(_ textView: UITextView, shouldChangeTextIn range: NSRange, replacementText text: String) -> Bool {
-            if text == "\n" {
-                parent.onDone?()
-                return false
-            }
             let current = textView.text ?? ""
             guard let range = Range(range, in: current) else { return false }
             let proposed = current.replacingCharacters(in: range, with: text)
@@ -90,6 +93,7 @@ struct UITextViewWrapper: UIViewRepresentable {
 // Make the struct public
 public struct InputTextArea: View {
     @Environment(\.appTheme) private var theme
+    @Environment(\.momoFontScale) private var fontScale
     @Binding var text: String
     var maxLength: Int = MAX_LENGTH
     var height: CGFloat = DEFAULT_HEIGHT
@@ -111,11 +115,9 @@ public struct InputTextArea: View {
     var required: Bool = false
     var fontWeight: Font.Weight = .regular
     var keyboardType: UIKeyboardType = .default
-    
+
     @State private var isFocused = false
-    @State private var isBlurred = false
-    @State private var floatingLabelHeight: CGFloat = 16
-    
+
     // Make the initializer public
     public init(
         text: Binding<String>,
@@ -162,147 +164,128 @@ public struct InputTextArea: View {
         self.fontWeight = fontWeight
         self.keyboardType = keyboardType
     }
-    
+
     public var body: some View {
         VStack(alignment: .leading, spacing: 0) {
+            // Compose: `height` is the whole box (text, counter and paddings), scaled.
+            VStack(spacing: 0) {
+                HStack(alignment: .top, spacing: 0) {
                     ZStack(alignment: .topLeading) {
-                        if !floatingValue.isEmpty || !floatingIcon.isEmpty {
-                            HStack(spacing: 4) {
-                                MomoText(
-                                    floatingValue,
-                                    typography: .labelSMedium,
-                                    color: disabled ? theme.colors.text.disable : (floatingValueColor ?? theme.colors.text.hint)
-                                )
-                                
-                                if required {
-                                    MomoText("*", typography: .labelSMedium, color: theme.colors.error.primary)
-                                }
-                                
-                                if !floatingIcon.isEmpty {
-                                    Icon(
-                                        source: floatingIcon,
-                                        size: 16,
-                                        color: disabled ? theme.colors.text.disable : (floatingIconColor ?? theme.colors.text.default)
-                                    )
-                                    .padding(.leading, Spacing.XS)
-                                }
-                            }
-                            .padding(.horizontal, Spacing.S)
-                            .background(
-                                GeometryReader { geo in
-                                    Color.clear.onAppear { floatingLabelHeight = geo.size.height }
-                                }
+                        if text.isEmpty {
+                            MomoText(
+                                placeholder,
+                                typography: fontWeight == .bold ? .actionSBold : .bodyDefaultRegular,
+                                color: disabled ? theme.colors.text.disable : theme.colors.text.hint
                             )
-                            .background(theme.colors.background.surface)
-                            // Kotlin centers the label within the box-height-tall decorationBox
-                            // by default, then applies `offsetY = -scaleHeight / 2` — net effect:
-                            // the label ends up centered exactly on the box's top border. Our
-                            // ZStack anchors top-leading instead, so matching that requires
-                            // offsetting by half the label's OWN measured height, not half the
-                            // (104pt-tall) text-area box height.
-                            .offset(x: Spacing.S, y: -floatingLabelHeight / 2)
-                            .zIndex(10)
+                            .fontSize(16, lineHeight: 24)
                         }
 
-                        VStack {
-                            HStack(alignment: .top, spacing: 0) {
-                                ZStack(alignment: .topLeading) {
-                                    if text.isEmpty {
-                                        Text(placeholder)
-                                            .foregroundColor(disabled ? theme.colors.text.disable : theme.colors.text.hint)
-                                            .font(.system(size: 16, weight: fontWeight))
-                                            .padding(.horizontal, 16)
-                                            .padding(.vertical, 12)
-                                    }
-
-                                    UITextViewWrapper(
-                                        text: $text,
-                                        maxLength: maxLength,
-                                        textColor: disabled ? theme.colors.text.disable : theme.colors.text.default,
-                                        cursorColor: theme.colors.primary,
-                                        fontWeight: fontWeight,
-                                        disabled: disabled,
-                                        onChangeText: onChangeText,
-                                        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)
-                                }
-                                .frame(maxWidth: .infinity)
-
-                                // Clear button (mirrors Compose: focused + non-empty).
-                                if isFocused && !text.isEmpty {
-                                    SwiftUI.Button(action: {
-                                        text = ""
-                                        onChangeText("")
-                                    }) {
-                                        Icon(source: "24_navigation_close_circle_full", size: 16, color: theme.colors.text.hint)
-                                    }
-                                    .padding(.leading, Spacing.XS)
-                                    .padding(.top, 12)
-                                }
-
-                                // Loading indicator and right icon (independent, mirrors
-                                // Compose's RenderRightIcon: both can render at once).
-                                if loading {
-                                    ActivityIndicator(isAnimating: .constant(true), style: .medium)
-                                        .frame(width: 16, height: 16)
-                                        .padding(.leading, Spacing.XS)
-                                        .padding(.top, 12)
-                                }
-                                if !icon.isEmpty {
-                                    SwiftUI.Button(action: onRightIconPressed) {
-                                        Icon(source: icon, size: 24, color: disabled ? theme.colors.text.disable : (iconColor ?? theme.colors.text.default))
-                                    }
-                                    .padding(.leading, Spacing.XS)
-                                    .padding(.top, 12)
-                                }
+                        UITextViewWrapper(
+                            text: $text,
+                            maxLength: maxLength,
+                            textColor: disabled ? theme.colors.text.disable : theme.colors.text.default,
+                            cursorColor: theme.colors.primary,
+                            fontWeight: fontWeight,
+                            keyboardType: keyboardType,
+                            disabled: disabled,
+                            onChangeText: onChangeText,
+                            onFocus: {
+                                isFocused = true
+                                onFocus()
+                            },
+                            onBlur: {
+                                isFocused = false
+                                onBlur()
                             }
+                        )
+                        .disabled(disabled)
+                    }
+                    .frame(maxWidth: .infinity, maxHeight: .infinity, alignment: .topLeading)
 
-                            HStack {
-                                Spacer()
-                                MomoText("\(text.count)/\(maxLength)", typography: .descriptionXsRegular, color: theme.colors.text.hint)
-                            }
-                            .padding(.horizontal, 16)
-                            .padding(.bottom, 12)
+                    // Clear button (mirrors Compose: focused + non-empty).
+                    if isFocused && !text.isEmpty {
+                        SwiftUI.Button(action: {
+                            text = ""
+                            onChangeText("")
+                        }) {
+                            Icon(source: "24_navigation_close_circle_full", size: 16, color: theme.colors.text.hint)
                         }
-                        .background(theme.colors.background.surface)
-                        .cornerRadius(Radius.S)
-                        .overlay(
-                            RoundedRectangle(cornerRadius: Radius.S)
-                                .stroke(borderColor, lineWidth: 1)
-                        )
+                        .padding(.leading, Spacing.XS)
                     }
-                    
-                    ErrorView(errorMessage: error, errorSpacing: errorSpacing, hintText: "")
-                }
-                .onReceive(NotificationCenter.default.publisher(for: UIResponder.keyboardWillShowNotification)) { _ in
-                    if !isBlurred {
-                        isFocused = true
-                        onFocus()
+
+                    // Loading indicator and right icon (independent, mirrors
+                    // Compose's RenderRightIcon: both can render at once).
+                    if loading {
+                        ActivityIndicator(isAnimating: .constant(true), style: .medium, color: iconTintColor)
+                            .frame(width: 16, height: 16)
+                            .padding(.leading, Spacing.XS)
                     }
-                }
-                .onReceive(NotificationCenter.default.publisher(for: UIResponder.keyboardWillHideNotification)) { _ in
-                    if isFocused {
-                        isFocused = false
-                        isBlurred = true
-                        onBlur()
+                    if !icon.isEmpty {
+                        SwiftUI.Button(action: onRightIconPressed) {
+                            Icon(source: icon, size: 24, color: iconTintColor)
+                        }
+                        .padding(.leading, Spacing.XS)
                     }
                 }
-                .ignoreBoldTextSetting()
+                .padding([.horizontal, .top], Spacing.M)
+                .frame(maxHeight: .infinity, alignment: .top)
+
+                MomoText("\(text.count)/\(maxLength)", typography: .descriptionXsRegular, color: theme.colors.text.hint)
+                    .frame(maxWidth: .infinity, alignment: .trailing)
+                    .padding(.trailing, Spacing.M)
+                    .padding(.bottom, Spacing.M)
+            }
+            .frame(height: fontScale(height))
+            .background(
+                RoundedRectangle(cornerRadius: Radius.S)
+                    .fill(theme.colors.background.surface)
+            )
+            .overlay(
+                RoundedRectangle(cornerRadius: Radius.S)
+                    .stroke(borderColor, lineWidth: 1)
+            )
+            .overlay(alignment: .topLeading) { floatingLabel }
+
+            ErrorView(errorMessage: error, errorSpacing: errorSpacing, hintText: "")
+        }
+        .ignoreBoldTextSetting()
     }
-    
+
+    /// Centered on the box's top border, like Compose's `FloatingLabel` (offset by -height / 2).
+    @ViewBuilder
+    private var floatingLabel: some View {
+        if !floatingValue.isEmpty || !floatingIcon.isEmpty {
+            HStack(spacing: 0) {
+                MomoText(
+                    floatingValue,
+                    typography: .labelSMedium,
+                    color: disabled ? theme.colors.text.disable : (floatingValueColor ?? theme.colors.text.hint)
+                )
+
+                if required {
+                    MomoText("*", typography: .labelSMedium, color: theme.colors.error.primary)
+                }
+
+                if !floatingIcon.isEmpty {
+                    Icon(
+                        source: floatingIcon,
+                        size: 16,
+                        color: disabled ? theme.colors.text.disable : (floatingIconColor ?? theme.colors.text.default)
+                    )
+                    .padding(.leading, Spacing.XS)
+                }
+            }
+            .padding(.horizontal, Spacing.S)
+            .background(theme.colors.background.surface)
+            .alignmentGuide(.top) { $0[VerticalAlignment.center] }
+            .offset(x: Spacing.S)
+        }
+    }
+
+    private var iconTintColor: Color {
+        disabled ? theme.colors.text.disable : (iconColor ?? theme.colors.text.default)
+    }
+
     private var borderColor: Color {
         if disabled {
             return theme.colors.border.disable