@momo-kits/native-kits 0.163.1-beta.2-debug → 0.163.1-beta.20-debug

package/ios-demo/Sources/MoMoUIKitsDemo/SampleDemos/Home.swift

@@ -0,0 +1,279 @@
+//
+//  Home.swift
+//  Example
+//
+//  Created by sophia on 7/2/25.
+//
+
+import SwiftUI
+import MoMoUIKits
+
+public struct ScreenUsage: Hashable, Identifiable {
+    public let id = UUID()
+    public let title: String
+    public let destination: AnyView
+    public let icon: String
+    
+    public init(title: String, destination: AnyView, icon: String) {
+        self.title = title
+        self.destination = destination
+        self.icon = icon
+    }
+    
+    public static func == (lhs: ScreenUsage, rhs: ScreenUsage) -> Bool {
+        lhs.id == rhs.id
+    }
+    
+    public func hash(into hasher: inout Hasher) {
+        hasher.combine(id)
+    }
+}
+
+public func getIcon(icon: String) -> String {
+    return "https://static.momocdn.net/app/img/kits/UIKIT/\(icon).png"
+}
+
+public let ScreenUsages: [ScreenUsage] = [
+//    ScreenUsage(title: "ScreenUsage", destination: AnyView(ContentView()), icon: getIcon(icon: "Layout")),
+    ScreenUsage(title: "Badge", destination: AnyView(BadgeDemo()), icon: getIcon(icon: "Badge")),
+    ScreenUsage(title: "Button", destination: AnyView(ButtonDemo()), icon: getIcon(icon: "Button")),
+    ScreenUsage(title: "CheckBox", destination: AnyView(CheckboxDemo()), icon: getIcon(icon: "Checkbox")),
+    ScreenUsage(title: "Chip", destination: AnyView(ChipDemo()), icon: getIcon(icon: "Chip")),
+//    ScreenUsage(title: "IconButton", destination: AnyView(ContentView()), icon: getIcon(icon: "Button")),
+//    ScreenUsage(title: "Icon", destination: AnyView(ContentView()), icon: getIcon(icon: "Icon")),
+    ScreenUsage(title: "Image", destination: AnyView(ImageDemo()), icon: getIcon(icon: "Layout")),
+    ScreenUsage(title: "Baseline View", destination: AnyView(BaselineViewDemo()), icon: getIcon(icon: "Layout")),
+//    ScreenUsage(title: "InputMoney", destination: AnyView(ContentView()), icon: getIcon(icon: "FormInput")),
+    ScreenUsage(title: "Input", destination: AnyView(InputDemo()), icon: getIcon(icon: "FormInput")),
+    ScreenUsage(title: "Input Phone Number", destination: AnyView(InputPhoneNumberDemo()), icon: getIcon(icon: "FormInput")),
+    ScreenUsage(title: "InputTextArea", destination: AnyView(InputTextAreaDemo()), icon: getIcon(icon: "FormInput")),
+    ScreenUsage(title: "InputSearch", destination: AnyView(InputSearchDemo()), icon: getIcon(icon: "FormInput")),
+//    ScreenUsage(title: "Pagination", destination: AnyView(ContentView()), icon: getIcon(icon: "Badge")),
+//    ScreenUsage(title: "InputDropdown", destination: AnyView(ContentView()), icon: getIcon(icon: "FormInput")),
+    ScreenUsage(title: "PopupNotify", destination: AnyView(PopupNotifyDemo()), icon: getIcon(icon: "Popup")),
+    ScreenUsage(title: "PopupPromotion", destination: AnyView(PopupPromotionDemo()), icon: getIcon(icon: "Popup")),
+    ScreenUsage(title: "SnackBar", destination: AnyView(SnackBarDemo()), icon: getIcon(icon: "Popup")),
+//    ScreenUsage(title: "Radio", destination: AnyView(ContentView()), icon: getIcon(icon: "Radio")),
+//    ScreenUsage(title: "Skeleton", destination: AnyView(ContentView()), icon: getIcon(icon: "Skeleton")),
+    ScreenUsage(title: "Switch", destination: AnyView(SwitchDemo()), icon: getIcon(icon: "Toggle")),
+//    ScreenUsage(title: "Tag", destination: AnyView(ContentView()), icon: getIcon(icon: "Skeleton")),
+    ScreenUsage(title: "Text", destination: AnyView(TypographyDemo()), icon: getIcon(icon: "Typography")),
+//    ScreenUsage(title: "TrustBanner", destination: AnyView(TrustBanner(onPress: {_ in })), icon: getIcon(icon: "Typography")),
+    ScreenUsage(title: "Information", destination: AnyView(InformationDemo()), icon: getIcon(icon: "Typography")),
+    ScreenUsage(title: "Avatar", destination: AnyView(AvatarDemo()), icon: getIcon(icon: "Avatar")),
+    ScreenUsage(title: "Carousel", destination: AnyView(CarouselDemo()), icon: getIcon(icon: "Carousel")),
+    ScreenUsage(title: "Divider", destination: AnyView(DividerDemo()), icon: getIcon(icon: "Divider")),
+    ScreenUsage(title: "IconButton", destination: AnyView(IconButtonDemo()), icon: getIcon(icon: "Button")),
+    ScreenUsage(title: "Loader", destination: AnyView(LoaderDemo()), icon: getIcon(icon: "Loader")),
+    ScreenUsage(title: "Pagination", destination: AnyView(PaginationDemo()), icon: getIcon(icon: "Badge")),
+    ScreenUsage(title: "Radio", destination: AnyView(RadioDemo()), icon: getIcon(icon: "Radio")),
+    ScreenUsage(title: "Rating", destination: AnyView(RatingDemo()), icon: getIcon(icon: "Rating")),
+    ScreenUsage(title: "Skeleton", destination: AnyView(SkeletonDemo()), icon: getIcon(icon: "Skeleton")),
+    ScreenUsage(title: "SuggestAction", destination: AnyView(SuggestActionDemo()), icon: getIcon(icon: "Information")),
+    ScreenUsage(title: "Tag", destination: AnyView(TagDemo()), icon: getIcon(icon: "Tag")),
+    ScreenUsage(title: "Title", destination: AnyView(TitleDemo()), icon: getIcon(icon: "Typography")),
+    ScreenUsage(title: "Collapse", destination: AnyView(CollapseDemo()), icon: getIcon(icon: "Layout")),
+    ScreenUsage(title: "Stepper", destination: AnyView(StepperDemo()), icon: getIcon(icon: "Layout")),
+    ScreenUsage(title: "Uploader", destination: AnyView(UploaderDemo()), icon: getIcon(icon: "FormInput")),
+    ScreenUsage(title: "Swipe", destination: AnyView(SwipeDemo()), icon: getIcon(icon: "Layout")),
+    ScreenUsage(title: "InputDropDown", destination: AnyView(InputDropDownDemo()), icon: getIcon(icon: "FormInput")),
+    ScreenUsage(title: "InputMoney", destination: AnyView(InputMoneyDemo()), icon: getIcon(icon: "FormInput")),
+    ScreenUsage(title: "InputOTP", destination: AnyView(InputOTPDemo()), icon: getIcon(icon: "FormInput")),
+    ScreenUsage(title: "ProgressInfo", destination: AnyView(ProgressInfoDemo()), icon: getIcon(icon: "Layout")),
+    ScreenUsage(title: "Steps", destination: AnyView(StepsDemo()), icon: getIcon(icon: "Layout")),
+    ScreenUsage(title: "Slider", destination: AnyView(SliderDemo()), icon: getIcon(icon: "Layout")),
+    ScreenUsage(title: "TabView", destination: AnyView(TabViewDemo()), icon: getIcon(icon: "Layout")),
+    ScreenUsage(title: "Tooltip", destination: AnyView(TooltipDemo()), icon: getIcon(icon: "Layout")),
+    ScreenUsage(title: "DateTimePicker", destination: AnyView(DateTimePickerDemo()), icon: getIcon(icon: "Layout")),
+    ScreenUsage(title: "Navigation", destination: AnyView(NavigationDemo()), icon: getIcon(icon: "Layout")),
+    ScreenUsage(title: "Bottom Tab", destination: AnyView(BottomTabDemo()), icon: getIcon(icon: "Layout")),
+    ScreenUsage(title: "Animated Header", destination: AnyView(AnimatedHeaderDemo()), icon: getIcon(icon: "Layout")),
+    ScreenUsage(title: "Theme", destination: AnyView(ThemeDemo()), icon: getIcon(icon: "Typography")),
+    ScreenUsage(title: "Localize", destination: AnyView(LocalizeDemo()), icon: getIcon(icon: "Typography")),
+]
+
+@available(iOS 16.0, *)
+public struct HomeView: View {
+    // Mirrors Compose's `inputSearch` state: bound into the header search and
+    // forwarded into the content for filtering.
+    @State private var searchText = ""
+    private let onOpenCompose: () -> Void
+    private let applicationContext: MiniAppContext?
+    private let composeApi: KitComposeApi?
+    private let config: KitConfig?
+
+    public init(
+        onOpenCompose: @escaping () -> Void = {},
+        applicationContext: MiniAppContext? = nil,
+        composeApi: KitComposeApi? = nil,
+        config: KitConfig? = nil
+    ) {
+        self.onOpenCompose = onOpenCompose
+        self.applicationContext = applicationContext
+        self.composeApi = composeApi
+        self.config = config
+    }
+
+    public var body: some View {
+        NavigationContainer(
+            initialScreen: { HomeContentView(searchText: $searchText) },
+            options: NavigationOptions(
+                // headerTitle = HeaderTitle.Default("Design System")
+                title: "Design System",
+                titlePosition: .left,
+                // headerType = HeaderType.Extended(useAnimated = true, ...)
+                headerType: .extended,
+                useAnimated: true,
+                // hiddenBack = false
+                hiddenBack: false,
+                scrollable: true,
+                useAvoidKeyboard: true,
+                // keyboardOptions = KeyboardOptions(keyboardShouldPersistTaps = true)
+                keyboardShouldPersistTaps: true,
+                // headerRight = HeaderRight.Toolkit(useShortcut = true)
+                headerRight: {
+                    HeaderRight(headerRight: HeaderRightData(useShortcut: true))
+                },
+                // footerComponent = { Button("Footer Button") }
+                footer: {
+                    AnyView(
+                        MoMoUIKits.Button(
+                            title: "Footer Button",
+                            action: onOpenCompose,
+                            type: .primary,
+                            size: .large
+                        )
+                    )
+                },
+                // inputSearchProps = InputSearchProps(text = inputSearch, placeholder = "Search input",
+                //   searchIcon = { Image("...search_ai.png") }, placeholderCustomRender = { gradient Text }, ...)
+                inputSearchProps: InputSearchProps(
+                    text: $searchText,
+                    placeholder: "Search input",
+                    onChangeText: { newText in
+                        searchText = newText.replacingOccurrences(of: "\n", with: " ")
+                    },
+                    searchIcon: {
+                        AnyView(
+                            ImageView("https://static.momocdn.net/app/app/appx/search_ai.png")
+                                .frame(width: 24, height: 24)
+                                .padding(.trailing, Spacing.S)
+                        )
+                    },
+                    placeholderCustomRender: {
+                        AnyView(
+                            Text("Search input")
+                                .font(.header_xs_semibold)
+                                .lineLimit(1)
+                                .foregroundStyle(
+                                    LinearGradient(
+                                        colors: [
+                                            Color(hex: 0x18A0FB),
+                                            Color(hex: 0xA851FF),
+                                            Color(hex: 0xFD5FA9),
+                                            Color(hex: 0xFF9040)
+                                        ],
+                                        startPoint: .topLeading,
+                                        endPoint: .bottomTrailing
+                                    )
+                                )
+                        )
+                    }
+                ),
+                // floatingButtonProps = FloatingButtonProps(icon = "ic_warning", iconColor = White,
+                //   label = "Warning", size = DEFAULT, position = END)
+                // Note: "ic_warning" is an Android asset key; the closest rendering iOS icon URL is used here.
+                fabProps: FabProps(
+                    icon: "https://static.momocdn.net/app/img/authentication/floating_helper.png",
+                    iconColor: .white,
+                    label: "Warning",
+                    onClick: { print("Warning") },
+                    containerColor: Colors.primary,
+                    size: .large,
+                    scrollOffset: nil,
+                    position: .right,
+                    bottomPadding: nil
+                )
+            ),
+            applicationContext: applicationContext,
+            composeApi: composeApi,
+            config: config
+        )
+    }
+}
+
+@available(iOS 16.0, *)
+public struct HomeContentView: View {
+    // Search lives in the header (inputSearchProps); the bound value flows here
+    // for filtering, mirroring Compose's `UIKitHome(searchQuery = inputSearch.value)`.
+    @Binding var searchText: String
+
+    public init(searchText: Binding<String>) {
+        self._searchText = searchText
+    }
+
+    private var filteredScreenUsages: [ScreenUsage] {
+        if searchText.isEmpty {
+            return ScreenUsages
+        }
+        return ScreenUsages.filter { $0.title.localizedCaseInsensitiveContains(searchText) }
+    }
+
+    public var body: some View {
+        ScrollView {
+            VStack(alignment: .leading, spacing: 16) {
+                HomeItemView(screenUsages: filteredScreenUsages)
+            }
+        }
+    }
+}
+
+@available(iOS 16.0, *)
+public struct HomeItemView: View {
+    @EnvironmentObject var navigator: Navigator
+    let screenUsages: [ScreenUsage]
+
+    public init(screenUsages: [ScreenUsage]) {
+        self.screenUsages = screenUsages
+    }
+
+    public var body: some View {
+        ForEach(screenUsages) { screenUsage in
+            SwiftUI.Button {
+                let options = screenUsage.title == "Bottom Tab"
+                    ? NavigationOptions(
+                        title: screenUsage.title,
+                        headerType: .none,
+                        scrollable: false
+                    )
+                    : NavigationOptions(title: screenUsage.title)
+                navigator.push(
+                    { screenUsage.destination },
+                    options: options
+                )
+            } label: {
+                itemRow(screenUsage)
+            }
+        }
+    }
+    
+    @ViewBuilder
+    private func itemRow(_ screenUsage: ScreenUsage) -> some View {
+        VStack(alignment: .leading) {
+            HStack {
+                ImageView(screenUsage.icon).frame(width: 26, height: 26)
+                MomoText(screenUsage.title)
+            }
+            Divider()
+        }
+        .padding(.horizontal, 16)
+        .padding(.vertical, 8)
+    }
+}
+
+@available(iOS 16.0, *)
+public struct HomeView_Previews: PreviewProvider {
+    public static var previews: some View {
+        HomeView()
+    }
+}

package/ios-demo/Sources/MoMoUIKitsDemo/SampleDemos/IconButtonDemo.swift

@@ -0,0 +1,58 @@
+import MoMoUIKits
+import SwiftUI
+
+// MARK: - IconButtonDemo
+
+struct IconButtonDemo: View {
+    var body: some View {
+        ScrollView {
+            VStack(alignment: .leading, spacing: 24) {
+                Group {
+                    Text("Source")
+                        .font(.headline)
+                    HStack(spacing: 12) {
+                        IconButton(icon: url, onClick: onPress, type: .primary)
+                        IconButton(icon: url2, onClick: onPress, type: .primary)
+                        IconButton(icon: url3, onClick: onPress, type: .primary)
+                        IconButton(icon: url4, onClick: onPress, type: .primary)
+                    }
+                }
+
+                Group {
+                    Text("Type")
+                        .font(.headline)
+                    HStack(spacing: 12) {
+                        IconButton(icon: url, onClick: onPress, type: .primary)
+                        IconButton(icon: url, onClick: onPress, type: .secondary)
+                        IconButton(icon: url, onClick: onPress, type: .tonal)
+                        IconButton(icon: url, onClick: onPress, type: .outline)
+                        IconButton(icon: url, onClick: onPress, type: .disabled)
+                        IconButton(icon: url, onClick: onPress, type: .danger)
+                    }
+                }
+
+                Group {
+                    Text("Size")
+                        .font(.headline)
+                    HStack(spacing: 12) {
+                        IconButton(icon: url, onClick: onPress, type: .primary, size: .large)
+                        IconButton(icon: url, onClick: onPress, type: .primary, size: .small)
+                    }
+                }
+            }
+            .padding(16)
+        }
+        .padding(.top)
+    }
+
+    func onPress() {
+        print("IconButton")
+    }
+
+    // MARK: Private
+
+    private let url = "travel_plane"
+    private let url2 = "shopping_coupon"
+    private let url3 = "shopping_store"
+    private let url4 = "time_alarm_check"
+}

package/ios-demo/Sources/MoMoUIKitsDemo/SampleDemos/ImageDemo.swift

@@ -0,0 +1,78 @@
+//
+//  ImageDemo.swift
+//  Example
+//
+//  Created by dung.pham2 on 2/12/24.
+//
+
+import SwiftUI
+import MoMoUIKits
+
+struct ImageDemo: View {
+    // MARK: - Properties
+    @State private var time = 1000
+    
+    // MARK: - Body
+    var body: some View {
+        NavigationView {
+            ScrollView {
+                VStack(spacing: 16) { // Equivalent to Spacing.M
+                    HStack {
+                        ImageView("https://source.unsplash.com/random/\(time)")
+                            .frame(width: 100, height: 100)
+                        
+                        Spacer()
+                        
+                        ImageView("https://abc.com")
+                            .frame(width: 100, height: 100)
+                    }
+                    
+                    ImageView("https://source.unsplash.com/random/\(time)")
+                        .frame(maxWidth: .infinity)
+                        .frame(height: 100)
+                        .aspectRatio(contentMode: .fill)
+                        .clipped()
+                    
+                    ImageView("https://images.unsplash.com/photo-1509395062183-67c5ad6faff9")
+                        .frame(maxWidth: .infinity)
+                        .frame(height: 100)
+                        .aspectRatio(contentMode: .fill)
+                        .clipped()
+                    
+                    ImageView("https://source.unsplash.com/random/\(time)")
+                        .frame(maxWidth: .infinity)
+                        .frame(height: 100)
+                        .aspectRatio(contentMode: .fill)
+                        .clipped()
+                    
+                    ImageView("https://source.unsplash.com/random/\(time)")
+                        .frame(maxWidth: .infinity)
+                        .frame(height: 100)
+                        .aspectRatio(contentMode: .fit)
+                    
+                    ImageView("https://source.unsplash.com/random/\(time)")
+                        .frame(maxWidth: .infinity)
+                        .frame(height: 100)
+                        .aspectRatio(contentMode: .fit)
+                    
+                    ImageView("https://source.unsplash.com/random/\(time)")
+                        .frame(maxWidth: .infinity)
+                        .frame(height: 100)
+                        .aspectRatio(contentMode: .fit)
+                }
+                .padding()
+            }
+        }
+        .onAppear {
+            startTimer()
+        }
+    }
+    
+    // MARK: - Methods
+    private func startTimer() {
+        Timer.scheduledTimer(withTimeInterval: 5, repeats: true) { _ in
+            time = Int.random(in: 1...1000)
+        }
+    }
+}
+

package/ios-demo/Sources/MoMoUIKitsDemo/SampleDemos/InformationDemo.swift

@@ -0,0 +1,138 @@
+//
+//  InformationDemo.swift
+//  Example
+//
+//  Created by product2 on 6/18/26.
+//
+
+import Foundation
+import MoMoUIKits
+import SwiftUI
+
+// MARK: - InformationDemo
+
+struct InformationDemo: View {
+    @State private var showDismissible = true
+
+    var body: some View {
+        ScrollView {
+            VStack(alignment: .leading, spacing: 24) {
+                // MARK: - States
+
+                section("States") {
+                    Information(
+                        title: "Default",
+                        description: "This is a default information message.",
+                        showIconClose: true,
+                        onPressClose: {}
+                    )
+                    Information(
+                        title: "Warning",
+                        description: "This is a warning information message.",
+                        state: .warning
+                    )
+                    Information(
+                        title: "Error",
+                        description: "This is an error information message.",
+                        state: .error
+                    )
+                }
+
+                // MARK: - Without title
+
+                section("Description only") {
+                    Information(
+                        description: "Information without a title, only a description."
+                    )
+                    Information(
+                        description: "Warning without a title.",
+                        state: .warning
+                    )
+                }
+
+                // MARK: - With action
+
+                section("With action") {
+                    Information(
+                        title: "Update available",
+                        description: "A new version is ready to install.",
+                        onPressAction: { print("Action pressed") },
+                        action: "Update now"
+                    )
+                    Information(
+                        title: "Payment failed",
+                        description: "We couldn't process your payment.",
+                        state: .error,
+                        onPressAction: { print("Retry pressed") },
+                        action: "Retry"
+                    )
+                }
+
+                // MARK: - With close button
+
+                section("Dismissible") {
+                    if showDismissible {
+                        Information(
+                            title: "Dismissible",
+                            description: "Tap the close icon to dismiss this banner.",
+                            onPressClose: { showDismissible = false }
+                        )
+                    } else {
+                        Information(
+                            description: "Banner dismissed. Toggle to show again.",
+                            state: .warning,
+                            onPressAction: { showDismissible = true }, showIcon: true,
+                            action: "Show again"
+                            
+                        )
+                    }
+                }
+
+                // MARK: - With image
+
+                section("With image") {
+                    Information(
+                        title: "Custom image",
+                        description: "Uses a remote image instead of the state icon.",
+                        image: "https://images.unsplash.com/photo-1509395062183-67c5ad6faff9",
+                        onPressClose: { print("Close pressed") }
+                    )
+                }
+
+                // MARK: - Without icon
+
+                section("Without icon") {
+                    Information(
+                        title: "No icon",
+                        description: "showIcon is set to false.",
+                        showIcon: false
+                    )
+                }
+            }
+            .padding(.vertical, 16)
+        }
+    }
+
+    // MARK: - Helpers
+
+    @ViewBuilder
+    private func section<Content: View>(
+        _ title: String,
+        @ViewBuilder content: () -> Content
+    ) -> some View {
+        VStack(alignment: .leading, spacing: 12) {
+            Text(title)
+                .font(.headline)
+            content()
+        }
+        .padding(.horizontal, 16)
+    }
+}
+
+#if DEBUG
+struct InformationDemo_Previews: PreviewProvider {
+    static var previews: some View {
+        InformationDemo()
+    }
+}
+#endif

package/ios-demo/Sources/MoMoUIKitsDemo/SampleDemos/InputDemo.swift

@@ -0,0 +1,111 @@
+//
+//  InputDemo.swift
+//  Example
+//
+//  Created by dung.pham2 on 29/11/24.
+//
+
+import SwiftUI
+import MoMoUIKits
+
+struct InputDemo: View {
+    @State private var textValue1 = ""
+    @State private var textValue2 = ""
+    @State private var textValue3 = ""
+    @State private var textValue4 = ""
+    @State private var textValue5 = ""
+    @State private var textValue6 = ""
+    @State private var textValue7 = ""
+    @State private var textValue8 = ""
+    @State private var textValue9 = ""
+    
+    var body: some View {
+        ScrollView {
+            VStack(alignment: .leading, spacing: 20) {
+                Text("Input Demo")
+                    .font(.title1)
+                
+                Group {
+                    Text("Size")
+                        .font(.headerText1)
+                    
+                    Input(text: $textValue1, placeholder: "Small", size: .small, autofocus: true)
+                    Input(text: $textValue1, placeholder: "Large", size: .large)
+                }
+                
+                Group {
+                    Text("Secure Text Entry")
+                        .font(.headerText1)
+                    
+                    Input(text: $textValue2, placeholder: "Enter here", floatingValue: "Momo", floatingIcon: "01.MoMo", secureTextEntry: true,  autofocus: true)
+                    Input(text: $textValue2, placeholder: "Enter here", floatingValue: "Momo", floatingIcon: "01.MoMo", size: .large, secureTextEntry: true)
+                }
+                
+                Group {
+                    Text("Floating Value")
+                        .font(.headerText1)
+                    
+                    Input(text: $textValue3, placeholder: "Enter here", floatingValue: "Momo", floatingIcon: "01.MoMo")
+                        
+                }
+                
+                Group {
+                    Text("Hint")
+                        .font(.headerText1)
+                    
+                    Input(text: $textValue4, placeholder: "Enter here", hintText: textValue4.isEmpty ? "Hint text" : textValue4 )
+                }
+                
+                Group {
+                    Text("Error")
+                        .font(.headerText1)
+                    
+                    Input(text: $textValue4, placeholder: "Enter here", error: textValue4.isEmpty ? "Error" : textValue4 )
+                }
+                
+                Group {
+                    Text("Disabled")
+                        .font(.headerText1)
+                    
+                    Input(text: $textValue5, placeholder: "Enter here", disabled: true, leadingIcon: "01.MoMo"
+                    )
+                }
+                
+                Group {
+                    Text("Leading Icon")
+                        .font(.headerText1)
+                    
+                    Input(text: $textValue6, placeholder: "Leading Icon", floatingValue: "Small Input", leadingIcon: "01.MoMo"
+                    )
+                    
+                    Input(text: $textValue7, placeholder: "Leading Icon", floatingValue: "Large Input", size: .large, leadingIcon: "01.MoMo"
+                    )
+                }
+                
+                Group {
+                    Text("Trailing Icon")
+                        .font(.headerText1)
+                    
+                    Input(text: $textValue8, placeholder: "Trailing Icon", floatingValue: "Trailing", rightIcon: "01.MoMo")
+                }
+                
+                Group {
+                    Text("Loading")
+                        .font(.headerText1)
+                    
+                    Input(text: $textValue8, placeholder: "Loading", floatingValue: "Loading", loading: true, required: true)
+                }
+                
+                Group {
+                    Text("Font Weight")
+                        .font(.headerText1)
+                    
+                    Input(text: $textValue9, placeholder: "Font Weight", floatingValue: "Regular Font Weight", required: true, fontWeight: .regular)
+                    
+                    Input(text: $textValue9, placeholder: "Font Weight", floatingValue: "Bold Font Weight", required: true, fontWeight: .bold)
+                }
+            }
+            .padding()
+        }
+    }
+}