@momo-kits/native-kits 0.111.1-rc.2 → 0.112.1-rc.1

package/compose/src/commonMain/kotlin/vn/momo/kits/const/Typography.kt

@@ -39,15 +39,15 @@ fun getFont(font: String): FontFamily {
 fun getFontFamily(fontFamily: String, fontWeight: FontWeight? = FontWeight.Normal): FontFamily {
     val key = "$fontFamily-${fontWeight?.weight}"
     val fontMap = mapOf(
-        "SFProText-100" to "sfprotext_thin.ttf",
-        "SFProText-200" to "sfprotext_ultralight.ttf",
+        "SFProText-100" to "sfprotext_thin.otf",
+        "SFProText-200" to "sfprotext_ultralight.otf",
         "SFProText-300" to "sfprotext_light.ttf",
         "SFProText-400" to "sfprotext_regular.ttf",
         "SFProText-500" to "sfprotext_medium.ttf",
-        "SFProText-600" to "sfprotext_medium.ttf",
-        "SFProText-700" to "sfprotext_semibold.ttf",
-        "SFProText-800" to "sfprotext_bold.ttf",
-        "SFProText-900" to "sfprotext_heavy.ttf",
+        "SFProText-600" to "sfprotext_semibold.ttf",
+        "SFProText-700" to "sfprotext_bold.ttf",
+        "SFProText-800" to "sfprotext_heavy.ttf",
+        "SFProText-900" to "sfprotext_black.otf",
 
         "MoMoSignature-100" to "momosignature.otf",
         "MoMoSignature-200" to "momosignature.otf",

package/ios/Application/Components.swift

@@ -0,0 +1,223 @@
+//
+//  Components.swift
+//  Pods
+//
+//  Created by sophia on 24/1/25.
+//
+
+import SwiftUI
+
+public enum TitlePosition {
+    case left, center
+}
+
+public enum HeaderType {
+    case `default`, extended, none
+}
+
+
+public struct AnimatedHeader {
+    public var type: HeaderType = .default
+    public var composable: (_ scrollState: Int) -> AnyView = { _ in AnyView(EmptyView()) }
+    
+    public init(
+        type: HeaderType = .default,
+        composable: @escaping (_ scrollState: Int) -> AnyView = { _ in AnyView(EmptyView()) }
+    ) {
+        self.type = type
+        self.composable = composable
+    }
+}
+
+func safeAreaTopInset() -> CGFloat {
+    if #available(iOS 15.0, *) {
+        return UIApplication.shared.connectedScenes
+            .compactMap { ($0 as? UIWindowScene)?.keyWindow?.safeAreaInsets.top }
+            .first ?? 0
+    } else {
+        return UIApplication.shared.connectedScenes
+            .compactMap { ($0 as? UIWindowScene)?.windows.first?.safeAreaInsets.top }
+            .first ?? 0
+    }
+}
+
+
+public struct HeaderBackground: View {
+    var headerType: HeaderType = .default
+    var scrollState: CGFloat
+    
+    public var body: some View {
+        
+        let statusBarHeight = safeAreaTopInset()
+        
+        let opacity = 1 - CGFloat(scrollState) / 200
+        let backgroundColor = scrollState == 0 ? Color.clear : Colors.black01
+        
+        Group {
+            if headerType == .default {
+                let height = statusBarHeight + 52
+                ZStack {
+                    
+                    Rectangle()
+                        .fill(backgroundColor)
+                        .frame(height: height)
+                        .shadow(color: Colors.black20.opacity(0.2), radius: 10, x: 0, y: -2)
+                        .overlay(Rectangle()
+                            .fill(LinearGradient(
+                                gradient: Gradient(colors: [
+                                    Color(red: 1, green: 0.8, blue: 0.87),
+                                    Color(red: 1, green: 0.8, blue: 0.87).opacity(0.5)
+                                ]),
+                                startPoint: .top,
+                                endPoint: .bottom))
+                                .opacity(opacity)
+                                .frame(height: height))
+                        .overlay(Rectangle()
+                            .fill(Colors.black04)
+                            .frame(height: 1)
+                            .frame(maxWidth: .infinity)
+                            .alignmentGuide(.bottom) { _ in 0 }, alignment: .bottom
+                        )
+                }
+                .frame(maxWidth: .infinity)
+                
+            } else if headerType == .extended {
+                ZStack {
+                    Rectangle()
+                        .fill(LinearGradient(
+                            gradient: Gradient(colors: [
+                                Color(red: 1, green: 0.8, blue: 0.87),
+                                Color(red: 1, green: 0.8, blue: 0.87).opacity(0)
+                            ]),
+                            startPoint: .top,
+                            endPoint: .bottom))
+                        .opacity(opacity)
+                        .frame(height: 154)
+                    
+                }
+            }
+        }
+    }
+    
+}
+
+public struct Header: View {
+    var headerType: HeaderType = .default
+    var titlePosition: TitlePosition
+    var title: String
+    var headerRight: (() -> AnyView)?
+    var goBack: (() -> Void)?
+    var opacity: CGFloat? = nil
+    var animatedHeader: AnimatedHeader? = nil
+    var scrollState: CGFloat = 0
+    var inputSearchProps: InputSearchProps? = nil
+    
+    @State private var colorFraction: CGFloat = 0
+    
+    public init(
+        headerType: HeaderType = .default,
+        titlePosition: TitlePosition,
+        title: String,
+        headerRight: (() -> AnyView)? = nil,
+        goBack: (() -> Void)? = nil,
+        opacity: CGFloat? = nil,
+        animatedHeader: AnimatedHeader? = nil,
+        scrollState: CGFloat = 0,
+        inputSearchProps: InputSearchProps? = nil
+    ) {
+        self.headerType = headerType
+        self.titlePosition = titlePosition
+        self.title = title
+        self.headerRight = headerRight
+        self.goBack = goBack
+        self.opacity = opacity
+        self.animatedHeader = animatedHeader
+        self.scrollState = scrollState
+        self.inputSearchProps = inputSearchProps
+    }
+    
+    public var body: some View {
+        
+        let statusBarHeight = safeAreaTopInset()
+        let tintIconColor = Colors.black17
+        let backgroundButton = Colors.black01.opacity(0.6)
+
+        if headerType != .none {
+                VStack(spacing: 0) {
+                    ZStack {
+                        HStack {
+                            if let goBack = goBack {
+                                SwiftUI.Button(action: goBack) {
+                                    Circle()
+                                        .stroke(Color.black.opacity(0.2), lineWidth: 0.2)
+                                        .background(Circle().fill(backgroundButton))
+                                        .frame(width: 28, height: 28)
+                                        .overlay(
+                                            Image(systemName: "arrow.backward")
+                                                .foregroundColor(.black)
+                                        )
+                                }
+                                
+                            }
+                            
+                            Spacer() // Pushes headerRight to the right
+                            
+                            if let headerRight = headerRight {
+                                headerRight()
+                            }
+                        }
+                        .frame(height: 52)
+                        .padding(.horizontal)
+                        
+                        
+                        
+                        HStack {
+                            if titlePosition == .left, goBack != nil {
+                                Spacer().frame(width: 40)
+                            }
+                            
+                            if inputSearchProps != nil {
+                                if let inputProps = inputSearchProps {
+                                    InputSearch(
+                                        text: inputProps.$text,
+                                        buttonText: inputProps.buttonText,
+                                        showButtonText: inputProps.showButtonText,
+                                        showBorder: inputProps.showBorder,
+                                        placeholder: inputProps.placeholder,
+                                        onChangeText: inputProps.onChangeText,
+                                        onPressButtonText: inputProps.onPressButtonText,
+                                        error: inputProps.error,
+                                        disabled: inputProps.disabled,
+                                        icon: inputProps.icon,
+                                        iconColor: inputProps.iconColor,
+                                        onRightIconPressed: inputProps.onRightIconPressed,
+                                        onFocus: inputProps.onFocus,
+                                        onBlur: inputProps.onBlur,
+                                        loading: inputProps.loading,
+                                        fontWeight: inputProps.fontWeight,
+                                        keyboardType: inputProps.keyboardType
+                                    )
+                                }
+                            } else {
+                                Text(title)
+                                    .font(.headline)
+                                    .foregroundColor(tintIconColor)
+                                    .frame(maxWidth: titlePosition == .center ? .infinity : nil, alignment: titlePosition == .center ? .center : .leading)
+                            }
+                            
+                            Spacer()
+                        }
+                        .frame(height: 52)
+                        .padding(.horizontal)
+                        
+                    }
+                    .background(Color.clear)
+                }
+            }
+        }
+    
+}
+
+
+
+

package/ios/Application/FloatingButton.swift

@@ -0,0 +1,148 @@
+//
+//  FloatingButton.swift
+//  Pods
+//
+//  Created by sophia on 6/2/25.
+//
+
+import SwiftUI
+import Combine
+
+public enum FABSize {
+    case small
+    case `default`
+}
+
+public enum FABPosition {
+    case end
+    case center
+}
+
+public struct FabProps {
+    let icon: String
+    let iconColor: Color?
+    let label: String?
+    let onClick: () -> Void
+    let size: FABSize
+    let bottom: CGFloat?
+    let scrollOffset: CGFloat?
+    let position: FABPosition?
+    
+    public init(
+            icon: String,
+            iconColor: Color? = nil,
+            label: String? = nil,
+            onClick: @escaping () -> Void,
+            size: FABSize = .default,
+            bottom: CGFloat? = nil,
+            scrollOffset: CGFloat? = nil,
+            position: FABPosition? = .end
+        ) {
+            self.icon = icon
+            self.iconColor = iconColor
+            self.label = label
+            self.onClick = onClick
+            self.size = size
+            self.bottom = bottom
+            self.scrollOffset = scrollOffset
+            self.position = position
+        }
+}
+
+public struct FloatingButton: View {
+    @State private var lastScrollOffset: CGFloat = 0
+    @State private var isExpanded: Bool = false
+    let scrollOffset: CGFloat
+    let bottomPadding: CGFloat
+    let onClick: () -> Void
+    let containerColor: Color
+    let contentColor: Color
+    let icon: String
+    let iconColor: Color?
+    let text: String?
+    let size: FABSize
+    let position: FABPosition
+    let keyboardOffset: CGFloat
+    
+    public init(
+            scrollOffset: CGFloat = 0,
+            bottomPadding: CGFloat = 0,
+            onClick: @escaping () -> Void,
+            containerColor: Color = .blue,
+            contentColor: Color = .white,
+            icon: String,
+            iconColor: Color? = nil,
+            text: String? = nil,
+            size: FABSize = .default,
+            position: FABPosition = .end,
+            keyboardOffset: CGFloat = 0
+        ) {
+            self.scrollOffset = scrollOffset
+            self.bottomPadding = bottomPadding
+            self.onClick = onClick
+            self.containerColor = containerColor
+            self.contentColor = contentColor
+            self.icon = icon
+            self.iconColor = iconColor
+            self.text = text
+            self.size = size
+            self.position = position
+            self.keyboardOffset = keyboardOffset
+        }
+
+    public var body: some View {
+        VStack {
+            Spacer()
+            HStack {
+                if position == .center {
+                    Spacer()
+                }
+                FloatingButtonContent()
+                    .padding(.trailing, position == .end ? 12 : 0)
+                    .padding(.bottom, bottomPadding)
+                    .offset(y: -keyboardOffset)
+                if position == .end {
+                    Spacer()
+                }
+            }
+        }
+        .onReceive(Just(scrollOffset)) { newValue in
+            withAnimation(.easeInOut(duration: 0.3)) {
+                isExpanded = newValue > lastScrollOffset
+                lastScrollOffset = newValue
+            }
+        }
+    }
+
+    @ViewBuilder
+    private func FloatingButtonContent() -> some View {
+        SwiftUI.Button(action: onClick) {
+            HStack {
+                Image(systemName: icon)
+                    .foregroundColor(iconColor ?? .white)
+                    .font(size == .small ? .system(size: 12) : .system(size: 24))
+
+                if isExpanded, let text = text {
+                    Text(text)
+                        .foregroundColor(.white)
+                        .transition(.asymmetric(insertion: expandAnimation, removal: collapseAnimation))
+                }
+            }
+            .padding(.horizontal, isExpanded ? 12 : 0)
+            .frame(width: isExpanded ? 80 : (size == .small ? 36 : 48), height: size == .small ? 36 : 48)
+            .background(containerColor)
+            .cornerRadius(24)
+            .shadow(radius: 4)
+        }
+    }
+
+    private var expandAnimation: AnyTransition {
+        AnyTransition.opacity.animation(.easeIn(duration: 0.2))
+            .combined(with: .move(edge: .leading))
+    }
+
+    private var collapseAnimation: AnyTransition {
+        AnyTransition.opacity.animation(.easeOut(duration: 0.5))
+            .combined(with: .move(edge: .trailing))
+    }
+}

package/ios/Application/Screen.swift

@@ -0,0 +1,175 @@
+//
+//  Screen.swift
+//  Pods
+//
+//  Created by sophia on 5/2/25.
+//
+
+import SwiftUI
+
+public struct Screen<Content: View>: View {
+    var backgroundColor: Color?
+    var isBack: Bool
+    var headerType: HeaderType
+    var verticalAlignment: VerticalAlignment
+    var horizontalAlignment: HorizontalAlignment
+    var title: String
+    var titlePosition: TitlePosition
+    var goBack: (() -> Void)?
+    var scrollable: Bool
+    var onContentLayout: ((CGRect) -> Void)?
+    var useAvoidKeyboard: Bool
+    var footer: (() -> AnyView)?
+    var headerRight: (() -> AnyView)?
+    var animatedHeader: AnimatedHeader? = nil
+    var layoutOffset: CGFloat
+    var inputSearchProps: InputSearchProps? = nil
+    var fabProps: FabProps? = nil
+    var content: () -> Content
+    
+    public init(
+        backgroundColor: Color? = nil,
+        isBack: Bool = true,
+        headerType: HeaderType = .default,
+        verticalAlignment: VerticalAlignment = .top,
+        horizontalAlignment: HorizontalAlignment = .leading,
+        title: String = "Stack",
+        titlePosition: TitlePosition = .center,
+        goBack: (() -> Void)? = nil,
+        scrollable: Bool = true,
+        onContentLayout: ((CGRect) -> Void)? = nil,
+        useAvoidKeyboard: Bool = true,
+        footer: (() -> AnyView)? = nil,
+        headerRight: (() -> AnyView)? = nil,
+        animatedHeader: AnimatedHeader? = nil,
+        layoutOffset: CGFloat = 56,
+        inputSearchProps: InputSearchProps? = nil,
+        fabProps: FabProps? = nil,
+        @ViewBuilder content: @escaping () -> Content
+    ) {
+        self.backgroundColor = backgroundColor
+        self.isBack = isBack
+        self.headerType = headerType
+        self.verticalAlignment = verticalAlignment
+        self.horizontalAlignment = horizontalAlignment
+        self.title = title
+        self.titlePosition = titlePosition
+        self.goBack = goBack
+        self.scrollable = scrollable
+        self.onContentLayout = onContentLayout
+        self.useAvoidKeyboard = useAvoidKeyboard
+        self.footer = footer
+        self.headerRight = headerRight
+        self.animatedHeader = animatedHeader
+        self.layoutOffset = layoutOffset
+        self.inputSearchProps = inputSearchProps
+        self.fabProps = fabProps
+        self.content = content
+    }
+    
+    @State private var scrollOffset: CGFloat = 0
+    
+    public var body: some View {
+        GeometryReader { geometry in
+            let safeAreaInsets = geometry.safeAreaInsets
+            let statusBarHeight = safeAreaInsets.top
+            let keyboardHeight: CGFloat = 0
+            let keyboardSize: CGFloat = useAvoidKeyboard ? max(keyboardHeight, 0) : 0
+            
+            ZStack {
+                (backgroundColor ?? Color.white).edgesIgnoringSafeArea(.all)
+                
+                VStack(spacing: 0) {
+                    ZStack {
+                        if animatedHeader == nil {
+                            HeaderBackground(headerType: headerType, scrollState: scrollOffset)
+                        } else {
+                            Color.white.opacity(Double(min(scrollOffset / 114, 1)))
+                                .overlay(HeaderBackground(headerType: headerType, scrollState: scrollOffset))
+                            
+                        }
+                        
+                        Header(
+                            headerType: headerType,
+                            titlePosition: titlePosition,
+                            title: title,
+                            headerRight: headerRight,
+                            goBack: goBack,
+                            opacity: min(scrollOffset / 114, 1),
+                            animatedHeader: animatedHeader,
+                            scrollState: scrollOffset,
+                            inputSearchProps: inputSearchProps
+                        ).padding(.bottom, headerType == .extended ? 0 : -safeAreaTopInset())
+                    }.padding(.top, -safeAreaTopInset())
+                    
+                    
+                    VStack(alignment: horizontalAlignment, spacing: 0) {
+                        if animatedHeader != nil {
+                            Spacer().frame(height: statusBarHeight + 52 + layoutOffset)
+                        }
+                        
+                        if scrollable {
+                            ScrollView(.vertical, showsIndicators: false) {
+                                VStack {
+                                    content()
+                                }
+                                .background(GeometryReader { geo -> Color in
+                                    DispatchQueue.main.async {
+                                        self.scrollOffset = -geo.frame(in: .global).origin.y
+                                    }
+                                    return Color.clear
+                                })
+                            }
+                        } else {
+                            content()
+                        }
+                    }
+                    .padding(.bottom, keyboardSize)
+                    
+                    
+                    if let footerView = footer?() {
+                        ZStack(alignment: .top) {
+                            Rectangle()
+                                .fill(Colors.black20)
+                                .frame(height: 4)
+                                .shadow(color: Colors.black20.opacity(0.2), radius: 10, x: 0, y: -2)
+                            
+                            Footer(footerView: footerView, keyboardSize: keyboardSize)
+                        }
+                    }
+                    
+                    if let fabProps = fabProps {
+                        FloatingButton(
+                            scrollOffset: scrollOffset,
+                            bottomPadding: fabProps.bottom ?? 16,
+                            onClick: fabProps.onClick,
+                            containerColor: .blue,
+                            contentColor: .white,
+                            icon: fabProps.icon,
+                            iconColor: fabProps.iconColor,
+                            text: fabProps.label,
+                            size: fabProps.size,
+                            position: fabProps.position ?? .end,
+                            keyboardOffset: keyboardSize
+                        )
+                    }
+                }
+                
+            }
+        }
+    }
+}
+
+struct Footer: View {
+    var footerView: AnyView
+    var keyboardSize: CGFloat
+    
+    var body: some View {
+        VStack {
+            footerView
+        }
+        .padding(.bottom, keyboardSize)
+        .background(Colors.black01)
+    }
+}
+

package/ios/Checkbox/Checkbox.swift

@@ -41,7 +41,7 @@ public struct Checkbox: View{
                         .resizable()
                         .foregroundColor(backgroundColor)
                         .background(Colors.black01)
-                        .frame(width: 24, height: 24)
+                        .frame(width: 20, height: 20)
                 }
             }
 

package/ios/Input/InputSearch.swift

@@ -37,6 +37,62 @@ struct RenderRightIconSearch: View {
     }
 }
 
+public struct InputSearchProps {
+    @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
+    
+    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
+        }
+}
+
 // MARK: - InputSearch
 
 public struct InputSearch: View {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@momo-kits/native-kits",
-  "version": "0.111.1-rc.2",
+  "version": "0.112.1-rc.1",
   "private": false,
   "dependencies": {},
   "devDependencies": {},