{"id":19153847,"url":"https://github.com/enryun/common_swiftui","last_synced_at":"2025-12-27T13:33:57.813Z","repository":{"id":253566377,"uuid":"840680047","full_name":"Enryun/Common_SwiftUI","owner":"Enryun","description":"comprehensive suite of UI components that enhance the SwiftUI development ","archived":false,"fork":false,"pushed_at":"2024-09-17T10:24:05.000Z","size":4908,"stargazers_count":52,"open_issues_count":0,"forks_count":6,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-08-19T23:25:47.979Z","etag":null,"topics":["app","ios","ios-app","ios-sdk","swift","swiftui"],"latest_commit_sha":null,"homepage":"https://www.linkedin.com/in/jamesthang/","language":"Swift","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Enryun.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-08-10T11:01:05.000Z","updated_at":"2025-06-14T18:07:04.000Z","dependencies_parsed_at":"2024-11-09T08:25:34.654Z","dependency_job_id":"634d2045-0204-4280-9c6f-922ba375ffcb","html_url":"https://github.com/Enryun/Common_SwiftUI","commit_stats":null,"previous_names":["enryun/common_swiftui"],"tags_count":10,"template":false,"template_full_name":null,"purl":"pkg:github/Enryun/Common_SwiftUI","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Enryun%2FCommon_SwiftUI","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Enryun%2FCommon_SwiftUI/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Enryun%2FCommon_SwiftUI/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Enryun%2FCommon_SwiftUI/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Enryun","download_url":"https://codeload.github.com/Enryun/Common_SwiftUI/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Enryun%2FCommon_SwiftUI/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":271500361,"owners_count":24770375,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-08-21T02:00:08.990Z","response_time":74,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["app","ios","ios-app","ios-sdk","swift","swiftui"],"created_at":"2024-11-09T08:24:31.867Z","updated_at":"2025-12-27T13:33:52.756Z","avatar_url":"https://github.com/Enryun.png","language":"Swift","funding_links":[],"categories":[],"sub_categories":[],"readme":"# CommonSwiftUI\n\n![iOS 15.0+](https://img.shields.io/badge/iOS-15.0%2B-blue.svg)\n[![Pod Version](http://img.shields.io/cocoapods/v/SDWebImage.svg?style=flat)](https://cocoapods.org/pods/Tutorials)\n[![Swift Package Manager](https://img.shields.io/badge/Swift%20Package%20Manager-compatible-brightgreen.svg)](https://github.com/apple/swift-package-manager)\n[![License](https://img.shields.io/badge/license-MIT-blue.svg?style=flat)](http://mit-license.org)\n\n## Table of Contents\n1. [Overview](#overview)\n2. [Requirements](#requirements)\n3. [Installation](#installation)\n4. [Components](#components)\n5. [Author](#author)\n\n## Overview\n\nThis SDK provides a comprehensive suite of UI components and utilities that streamline and enhance the development of SwiftUI applications.\n\nFrom customizable alerts, buttons, and progress indicators to specialized text fields, sliders, and advanced animations like shimmer effects, this SDK offers a wide range of tools to create polished, interactive, and visually appealing user interfaces. \n\nEach component is designed with flexibility and ease of use in mind, ensuring seamless integration and consistent performance across various app environments. Whether you need simple alerts or complex loading indicators, this SDK equips you with the resources to build high-quality, feature-rich SwiftUI apps.\n\n## Requirements\n\n| Platform | Minimum Version |\n|----------|-----------------|\n| iOS | 15.0 |\n\n## Installation\nThis project can be installed using `Swift Package Manager` and `CocoaPod`.\n\n### Swift Package Manager\n\n1. Open your project in Xcode.\n2. Navigate to `File` \u003e `Swift Packages` \u003e `Add Package Dependency`.\n3. Paste the repository URL: `https://github.com/Enryun/Common_SwiftUI`\n4. Follow the prompts to add the package to your project.\n\nFor more details on using Swift Package Manager, visit [Apple's Swift Package Manager documentation](https://swift.org/package-manager/).\n\n### CocoaPods\n\n[CocoaPods](http://cocoapods.org/) is a dependency manager for Objective-C, which automates and simplifies the process of using 3rd-party libraries in your projects. See the [Get Started](http://cocoapods.org/#get_started) section for more details.\n\nAdd the following entry to your Podfile:\n\n```rb\npod 'CommonSwiftUI'\n```\n\nThen run `pod install`.\n\n### Importing the Library\n\nTo use any of the components provided by `CommonSwiftUI`, such as `RangeSlider` or `QRScannerView`, you need to import the library at the beginning of your SwiftUI view file. This ensures that all the features and components from the library are accessible in that file. Simply add the following line at the top of your `.swift` file where you plan to use these components:\n\n```swift\nimport CommonSwiftUI\n```\n\n## Components\n\n- [Alert](#alert)\n - [AlertWithTextFields](#alertwithtextFields)\n - [AlertWithErrorBinding](#alertwitherrorbinding)\n - [UniversalAlert](#universalalert)\n- [Button](#button)\n - [CapsuleButtonStyle](#capsulebuttonstyle)\n - [BouncyButtonStyle](#bouncybuttonstyle)\n - [ShapeButtonStyle](#shapebuttonstyle)\n - [GrowingButtonStyle](#growingbuttonstyle)\n - [LoadingButtonStyle](#loadingbuttonstyle)\n- [Dropdown](#dropdown)\n- [FloatingButton](#floatingbutton)\n - [ArcFloatingButton](#arcfloatingbutton)\n - [ExpandFloatButton](#expandfloatbutton)\n- [GlassMorphism](#glassmorphism)\n- [Glow](#glow)\n- [HambugMenu](#hambugmenu)\n- [HoldDownButton](#holddownbutton)\n- [HTMLTextView](#htmltextview)\n- [LoadingIndicator](#loadingindicator)\n - [SimpleLoadingIndicator](#simpleloadingindicator)\n - [FancyLoadingView](#fancyloadingview)\n - [ShimmerView](#shimmerview)\n- [ProgressView](#progressview)\n - [ProgressBar](#progressbar)\n - [RingProgress](#ringprogress)\n - [ArcProgress](#arcprogress)\n- [QRCode](#qrcode)\n - [QRGenerator](#qrgenerator)\n - [QRScanner](#qrscanner)\n- [SegmentControl](#segmentcontrol)\n- [Slider](#slider)\n - [RangeSlider](#rangeslider)\n - [RingSlider](#ringslider)\n- [Text](#text)\n - [CircularText](#circulartext)\n - [HackerText](#hackertext)\n - [TypeWriterText](#typewritertext)\n- [TextField](#textfield)\n - [LimitedTextField](#limitedtextfield)\n - [ValidationTextField](#validationtextfield)\n- [Toast](#toast)\n- [ViewModifier](#viewmodifier)\n - [OnChange](#onchange)\n - [Shimmer](#shimmer)\n - [ViewDidLoad](#viewdidload)\n - [VersionConditioning](#versionconditioning)\n\n## Alert\n\n## AlertWithTextFields:\n\nPresents an alert with customizable text fields and actions.\n\n```swift\nAlertWithTextFields(\n title: \"Login\",\n message: \"Please enter your password\",\n textFields:\n [\n AlertTextField(placeholder: \"username\"),\n AlertTextField(placeholder: \"password\", isSecureTextEntry: true)\n ],\n actions:\n [\n AlertAction(title: \"Cancel\", style: .cancel) { result in\n print(result)\n },\n AlertAction(title: \"Login\", style: .default) { result in\n print(result)\n }\n ]\n)\n```\n\nParameters:\n- `title`: The title of the alert.\n- `message`: The message displayed in the alert.\n- `textFields`: An array of [AlertTextField](#alerttextfield), configuring each text field within the alert.\n- `actions`: An array of [AlertAction](#alertaction), representing the actions that can be taken from the alert.\n\nThis function creates and displays an `UIAlertController` with a specified title and message, incorporating any number of customizable text fields and actions into `SwiftUI`. Each text field can be tailored with specific attributes like placeholders and keyboard types, while actions can define their title, style, and a completion handler that processes the entered text.\n\n#### AlertTextField: \n\nRepresents a configurable text field for use within an alert dialog.\n\n```swift\nAlertTextField(placeholder: \"password\", isSecureTextEntry: true)\n```\n\nParameters:\n- `placeholder`: A `String` that appears in the text field when it's empty, hinting at the expected input.\n- `keyboardType`: The type of keyboard to display. Defaults to `.default`.\n- `isSecureTextEntry`: A `Bool` indicating whether the text field is for secure text entry (e.g., passwords). Defaults to `false`.\n- `autocapitalizationType`: The autocapitalization strategy for the text field. Defaults to `.none`.\n\nThis structure allows for the creation of a text field with customizable properties such as placeholder text, keyboard type, secure text entry for passwords, and text capitalization behavior. It can be used to gather input from users in a variety of contexts, ensuring that the text field is tailored to the specific type of data being requested.\n\n#### AlertAction: \n\nDefines an action for an alert dialog.\n\n```swift\nAlertAction(title: \"Login\", style: .default) { result in\n print(result)\n}\n```\n\nParameters:\n- `title`: The text to display on the action button.\n- `style`: The visual style of the action, defined by `UIAlertAction.Style`.\n- `completion`: A closure that is called when the action is selected, passing an array of `String` as its parameter.\n\nThis structure encapsulates the information needed to present an action within an alert, including the action's title, its visual style, and a completion handler that executes when the action is selected. The completion handler passes back an array of strings, allowing for flexible use cases such as returning input from text fields within the alert.\n\nExample:\n\n```swift\nvar body: some View {\n Button(action: {\n AlertWithTextFields(\n title: \"Login\",\n message: \"Please enter your password\",\n textFields:\n [\n AlertTextField(placeholder: \"username\"),\n AlertTextField(placeholder: \"password\", isSecureTextEntry: true)\n ],\n actions:\n [\n AlertAction(title: \"Cancel\", style: .cancel) { result in\n print(result)\n },\n AlertAction(title: \"Login\", style: .default) { result in\n print(result)\n }\n ]\n )\n }, label: {\n Text(\"Present Alert\")\n })\n}\n```\n\nhttps://github.com/user-attachments/assets/319d44d0-4d6d-4314-a14e-351c9c8014e7\n\nThis setup presents an alert for login, with text fields for username and password and options to cancel or log in.\n\n[Back to Top](#components)\n\n## AlertWithErrorBinding:\n\nThis solution presents a customizable alert whenever the `Binding` error data has value. The error must conform to the provided [CommonAlert](#commonalert) protocol.\n\nAdopting the `CommonAlert` component helps projects by standardizing alert presentations across an application, ensuring a consistent user interface. This consistency can reduce development time and errors by providing a unified method for creating and managing alerts. \n\n#### CommonAlert:\n\n```swift\npublic protocol CommonAlert {\n var title: String { get }\n var subTitle: String? { get }\n var buttons: AnyView { get }\n}\n```\n\nProperties:\n- `title`: The primary text displayed in the alert, typically used for summarizing the alert's purpose.\n- `subTitle`: An optional secondary text providing additional details or context.\n- `buttons`: A view component representing the actionable items or responses available for the alert.\n\nThis `protocol` standardizes the way alerts are created by specifying essential elements that each alert should contain. Conforming to this `protocol` ensures consistency in alert presentation and functionality.\n\nPass a binding of your custom alert conforming to `CommonAlert` to this function to display it:\n\n```swift\npublic func showCustomAlert\u003cT\u003e(alert: Binding\u003cT?\u003e) -\u003e some View where T : CommonSwiftUI.CommonAlert\n```\n\nParameter:\n- `alert`: A binding to an optional `CommonAlert` conforming object that provides the data for the alert.\n\nThis function displays an alert based on the properties defined in an instance of `T`, where `T` conforms to the `CommonAlert` protocol. It allows for dynamic alert content including title, subtitle, and custom button actions.\n\nExample:\n\nDefine Custom Error conforming to `CommonAlert` protocol. This standardizes and concentrates the way alerts are created and managed by specifying essential elements that each alert should contain.\n\n```swift\nenum MyCustomAlert: Error, LocalizedError, CommonAlert {\n case noInternetConnection(onPress: () -\u003e Void)\n case dataNotFound\n case urlError(error: Error)\n \n var errorDescription: String? {\n switch self {\n case .noInternetConnection:\n return \"Please check your Internet connection and try again\"\n case .dataNotFound:\n return \"There is an error loading data. Please try again!\"\n case .urlError(error: let error):\n return \"Error calling \\(error.localizedDescription)\"\n }\n }\n \n var title: String {\n switch self {\n case .noInternetConnection:\n return \"No Internet Connection\"\n case .dataNotFound:\n return \"Data not found\"\n case .urlError(let error):\n return \"Error \\(error.localizedDescription)\"\n }\n }\n \n var subTitle: String? {\n switch self {\n case .noInternetConnection:\n return \"Please check your Internet connection and try again\"\n case .dataNotFound:\n return \"There is an error loading data. Please try again!\"\n case .urlError(error: let error):\n return \"Error calling \\(error.localizedDescription)\"\n }\n }\n \n var buttons: AnyView {\n AnyView(getButtonsForAlert())\n }\n \n @ViewBuilder\n func getButtonsForAlert() -\u003e some View {\n switch self {\n case .noInternetConnection(onPress: let onPress):\n Button(\"OK\") {\n onPress()\n }\n case .dataNotFound:\n Button(\"RETRY\") {\n \n }\n case .urlError(let error):\n Button(\"DELETE\", role: .destructive) {\n print(error.localizedDescription)\n }\n }\n }\n}\n```\n\nNow Alert will show whenever the error is set:\n\n```swift\n@State private var error: MyCustomAlert? = nil\n\nvar body: some View {\n VStack(spacing: 35) {\n Button(\"No Internet Connection\") {\n error = MyCustomAlert.noInternetConnection(onPress: {\n print(\"On Pressed\")\n })\n }\n .buttonStyle(.borderedProminent)\n \n Button(\"Data Not Found\") {\n error = MyCustomAlert.dataNotFound\n }\n .buttonStyle(.borderedProminent)\n \n Button(\"URL Error\") {\n error = MyCustomAlert.urlError(error: URLError(.badURL))\n }\n .buttonStyle(.borderedProminent)\n }\n .showCustomAlert(alert: $error)\n}\n```\n\n```swift\n.showCustomAlert(alert: $error)\n```\n\nhttps://github.com/user-attachments/assets/40021753-997a-40fc-a9a9-3570a5b03492\n\nBy conforming to the `CommonAlert` protocol, developers can customize alert components while maintaining a coherent appearance and functionality. This modularity and consistency in design make the component particularly useful in large projects or those requiring frequent alert updates.\n\n[Back to Top](#components)\n\n## UniversalAlert\n\nThis solution enables the presentation of a customizable alert over the existing view content, using specified configurations and a custom view builder for the alert's content.\n\n```swift\npublic func alert\u003cContent\u003e(alertConfig: Binding\u003cCommonSwiftUI.UniversalAlertConfig\u003e, @ViewBuilder content: @escaping () -\u003e Content) -\u003e some View where Content : View\n```\n\nParameters:\n- `alertConfig`: A binding to the [UniversalAlertConfig](#universalalertconfig) instance which controls the appearance and behavior of the alert.\n- `content`: A view builder that generates the content to be displayed in the alert. This allows for full customization of the alert's appearance and the interactive elements within it.\n\n#### UniversalAlertConfig\n\n`UniversalAlertConfig` configures the presentation and behavior of a customizable alert view in a SwiftUI application.\n\n```swift\nUniversalAlertConfig(\n enableBackgroundBlur: true,\n disableOutsideTap: false,\n transitionType: .slide,\n slideEdge: .bottom\n)\n```\n\nParameters:\n- `enableBackgroundBlur`: A Boolean value that determines whether the background should be blurred when the alert is presented.\n- `disableOutsideTap`: A Boolean value that if set to true, disables dismissing the alert by tapping outside its bounds.\n- `transitionType`: The type of transition animation used when the alert is presented. Can be either `.slide` or `.opacity`.\n- `slideEdge`: The edge from which the alert should slide in if the transition type is `.slide`.\n- `show`: A Boolean value indicating whether the alert is currently presented.\n\nMethods:\n- `present()`: Sets the `show` property to true to present the alert.\n- `dismiss()`: Sets the `show` property to false to dismiss the alert.\n\nThis configuration struct allows you to customize alert presentations with various properties such as background blur, disable interactions outside the alert, and choose from different transition animations.\n\n#### RootView\n\nA view container that serves as the root of a view hierarchy and can display an overlay window.\n\n`RootView` is designed to embed any SwiftUI view and has the capability to present additional content in an overlay window on top of the existing UI. This is particularly useful for displaying elements like toasts or alerts that should float above all other content.\n\n```swift\nRootView {\n ContentView()\n}\n```\n\nParameters:\n- `content`: A closure returning the content of the view.\n\nOn appear, `RootView` automatically checks for an existing overlay window and, if none is found, creates and displays a new one, allowing for content like `Toast` or `Alert` to be shown on top of the primary view hierarchy.\n\nLet's go through some examples. \n\nThe first required step is to wrapped your Application inside [RootView](#rootview):\n\n```swift\n@main\nstruct TestCommonUIApp: App {\n var body: some Scene {\n WindowGroup {\n RootView {\n ContentView()\n }\n }\n }\n}\n``` \n\nThen you need to define the `alertConfig`:\n\n```swift\n@State private var alert: UniversalAlertConfig = .init(enableBackgroundBlur: false, disableOutsideTap: false)\n```\n\nNext is to create the custom alert view:\n\n```swift\nstruct CustomAlertView: View {\n \n var title: String\n var message: String\n var confirmAction: () -\u003e Void\n var cancelAction: () -\u003e Void\n \n var body: some View {\n VStack(spacing: 20) {\n Text(title)\n .font(.headline)\n .padding(.top, 20)\n \n Text(message)\n .font(.subheadline)\n .padding(.horizontal, 20)\n \n Divider()\n \n HStack {\n Button(action: cancelAction) {\n Text(\"Cancel\")\n .foregroundColor(.red)\n .frame(maxWidth: .infinity)\n }\n .padding(.vertical, 10)\n \n Divider()\n \n Button(action: confirmAction) {\n Text(\"OK\")\n .foregroundColor(.blue)\n .frame(maxWidth: .infinity)\n }\n .padding(.vertical, 10)\n }\n .frame(height: 50)\n }\n .background(.white)\n .cornerRadius(15)\n .shadow(radius: 10)\n .padding(.horizontal, 40)\n }\n}\n```\n\nNow using the `alert` to enable the presentation of a customizable alert over the existing view content:\n\n```swift\nvar body: some View {\n VStack {\n Button(\"Show Alert\") {\n alert.present()\n }\n .buttonStyle(.borderedProminent)\n }\n .frame(maxWidth: .infinity, maxHeight: .infinity)\n .background(.yellow)\n .alert(alertConfig: $alert) {\n CustomAlertView(\n title: \"Custom Alert\",\n message: \"This is a custom alert message.\",\n confirmAction: {\n print(\"OK pressed\")\n },\n cancelAction: {\n print(\"Cancel pressed\")\n alert.dismiss()\n }\n )\n .frame(maxWidth: .infinity, maxHeight: .infinity, alignment: .center)\n }\n}\n```\n\nhttps://github.com/user-attachments/assets/edc4264d-289a-4a80-badc-d485a47d318a\n\nWe can enable blur effect with `enableBackgroundBlur`:\n\n```swift\n@State private var alert: UniversalAlertConfig = .init(enableBackgroundBlur: true, disableOutsideTap: false)\n```\n\nLet's make an custom bottom sheet view for this example:\n\n```swift\nstruct BottomSheetView: View {\n \n var icon: String\n var title: String\n var message: String\n var confirmText: String\n var confirmAction: () -\u003e Void\n var cancelText: String\n var cancelAction: () -\u003e Void\n \n var body: some View {\n VStack(spacing: 20) {\n Image(systemName: icon)\n .resizable()\n .aspectRatio(contentMode: .fit)\n .frame(width: 60, height: 60)\n .foregroundColor(.white)\n .background(Circle().fill(.blue))\n \n Text(title)\n .font(.headline)\n .padding(.top, 10)\n \n Text(message)\n .font(.subheadline)\n .padding(.horizontal, 20)\n .multilineTextAlignment(.center)\n \n VStack(spacing: 12) {\n Button(action: confirmAction) {\n Text(confirmText)\n .frame(maxWidth: .infinity)\n .padding()\n .background(Color.blue)\n .foregroundColor(.white)\n .cornerRadius(10)\n }\n \n Button(action: cancelAction) {\n Text(cancelText)\n .frame(maxWidth: .infinity)\n .padding()\n .background(Color.gray.opacity(0.2))\n .foregroundColor(.black)\n .cornerRadius(10)\n }\n }\n .padding(.horizontal, 20)\n .padding(.bottom, 20)\n }\n .background(Color.white)\n .cornerRadius(15)\n .shadow(radius: 10)\n .padding(.horizontal, 30)\n .padding(.bottom, 40)\n }\n}\n```\n\nUse the public method `dismiss()` to dismiss the view when tap outside:\n\n```swift\nvar body: some View {\n VStack {\n Button(\"Show Alert\") {\n alert.present()\n }\n .buttonStyle(.borderedProminent)\n }\n .frame(maxWidth: .infinity, maxHeight: .infinity)\n .background(.yellow)\n .onTapGesture {\n alert.dismiss()\n }\n .alert(alertConfig: $alert) {\n BottomSheetView(\n icon: \"questionmark.circle.fill\",\n title: \"Replace Existing Folder?\",\n message: \"Lorem Ipsum is simply dummy text of the printing and typesetting industry.\",\n confirmText: \"Replace\",\n confirmAction: {\n print(\"Confirm action\")\n },\n cancelText: \"Cancel\",\n cancelAction: {\n print(\"Cancel action\")\n alert.dismiss()\n }\n )\n .frame(maxWidth: .infinity, maxHeight: .infinity, alignment: .bottom)\n .ignoresSafeArea()\n }\n}\n```\n\nhttps://github.com/user-attachments/assets/364dd2eb-321b-4182-a7da-180a97a5c706\n\nUse this solution to seamlessly integrate custom alerts into any SwiftUI view, enhancing user interaction and providing a dynamic and adaptable alerting solution.\n\n[Back to Top](#components)\n\n## Button\n\n## CapsuleButtonStyle:\n\nA `ButtonStyle` for SwiftUI that applies a Capsule Shape with customizable color styles.\n\n```swift\nCapsuleButtonStyle(textColor: Color.white, backgroundColor: gradient)\n```\n\nParameters:\n- `textColor`: The color or style applied to the text inside the button. Defaults to `.white`.\n- `backgroundColor`: The background color or style of the button, conforming to `ShapeStyle`. Defaults to `.blue`.\n- `verticalPadding`: The vertical padding inside the button. Defaults to `10`.\n- `horizontalPadding`: The horizontal padding inside the button. Defaults to `20`.\n\nExample:\n\n```swift\nlet gradient = LinearGradient(gradient: Gradient(colors: [Color.red, Color.orange]), startPoint: .leading, endPoint: .trailing)\n\nvar body: some View {\n VStack(spacing: 25) {\n Button(\"Capsule 1\") { }\n .buttonStyle(CapsuleButtonStyle())\n \n Button(\"Capsule 2\") { }\n .buttonStyle(CapsuleButtonStyle(textColor: .black, backgroundColor: .green))\n \n Button(\"Capsule 3\") { }\n .buttonStyle(CapsuleButtonStyle(textColor: .white, backgroundColor: gradient))\n \n Button(action: {}, label: {\n HStack {\n Image(systemName: \"cloud.sun\")\n Text(\"Capsule 4\")\n }\n })\n .buttonStyle(CapsuleButtonStyle(textColor: Color.white, backgroundColor: gradient))\n }\n}\n```\n\n\u003cimg src=\"https://github.com/user-attachments/assets/89fcae09-da1b-4470-96b1-b01bd75a692f\" width=\"220\"\u003e\n\nThis style gives buttons a modern, rounded look suitable for various UI contexts.\n\n[Back to Top](#components)\n\n## BouncyButtonStyle\n\nA customizable `ButtonStyle` for SwiftUI that simulates a bouncy 3D press effect.\n\n```swift\nBouncyButtonStyle()\n```\n\nParameters:\n- `textColor`: The color of the text when the button is not pressed.\n- `pressedTextColor`: The color of the text when the button is pressed.\n- `backgroundColor`: The background color of the button when it's not pressed.\n- `pressedBackgroundColor`: The background color of the button when pressed.\n- `shape`: The shape of the button, conforming to the `Shape` protocol.\n- `verticalPadding`: The vertical padding inside the button.\n- `horizontalPadding`: The horizontal padding inside the button.\n\nExample:\n\n```swift\nButton(\"Cartoon Button\") { }\n .buttonStyle(BouncyButtonStyle())\n\nButton(\"Cartoon Button\") { }\n .buttonStyle(BouncyButtonStyle(shape: .rect(cornerRadius: 4)))\n\nButton(action: { }, label: {\n Image(systemName: \"heart.fill\")\n .font(.title)\n .padding(5)\n})\n.buttonStyle(BouncyButtonStyle(shape: .circle))\n\nButton(\"Cartoon Button\") { }\n .buttonStyle(BouncyButtonStyle(textColor: .black,\n pressedTextColor: .black,\n backgroundColor: .green,\n pressedBackgroundColor: .orange))\n```\n\n`BouncyButtonStyle` applies a dynamic and interactive visual effect to button presses, enhancing user experience with a noticeable 'pop'. It's ideal for adding a playful and engaging touch to UI components:\n\nhttps://github.com/user-attachments/assets/f4d5dd43-3781-4311-a53d-5a5304d86779\n\nThis style configures the button to exhibit a bouncy animation upon interaction, with adjustable visual properties.\n\n[Back to Top](#components)\n\n## ShapeButtonStyle:\n\nA `ButtonStyle` for SwiftUI that allows customization of the button's shape and color.\n\n```swift\nShapeButtonStyle(textColor: .white, backgroundColor: gradient, shape: .circle)\n```\n\nParameters:\n- `textColor`: The color or style applied to the text inside the button. Default is `.primary`.\n- `backgroundColor`: The background color or style of the button, conforming to `ShapeStyle`. Default is `.secondary`.\n- `shape`: The custom shape for the button, conforming to `Shape`. The default shape is `Capsule()`.\n- `verticalPadding`: The vertical padding inside the button. Defaults to `10`.\n- `horizontalPadding`: The horizontal padding inside the button. Defaults to `20`.\n\nExample:\n\n```swift\nlet gradient = LinearGradient(gradient: Gradient(colors: [Color.red, Color.orange]), startPoint: .leading, endPoint: .trailing)\n\nvar body: some View {\n VStack(spacing: 25) {\n Button(\"ShapeButton 1\") { }\n .buttonStyle(ShapeButtonStyle(textColor: .white, backgroundColor: .blue, shape: .rect))\n \n Button(\"ShapeButton 2\") { }\n .buttonStyle(ShapeButtonStyle(textColor: .primary, backgroundColor: .green, shape: .rect(cornerRadius: 8)))\n \n Button(\"ShapeButton 3\") { }\n .buttonStyle(ShapeButtonStyle(textColor: .white, backgroundColor: .red, shape: .capsule))\n \n Button(\"ShapeButton 4\") { }\n .buttonStyle(ShapeButtonStyle(textColor: .white, backgroundColor: .orange, shape: .ellipse))\n \n Button(action: {}, label: {\n Image(systemName: \"heart.fill\")\n .font(.title)\n .padding(5)\n })\n .buttonStyle(ShapeButtonStyle(textColor: .white, backgroundColor: gradient, shape: .circle))\n }\n}\n```\n\n\u003cimg src=\"https://github.com/user-attachments/assets/bd90bcd0-3510-4796-903e-4f78ac4b12c3\" width=\"220\"\u003e\n\nThis style modifies the appearance of buttons to fit within a specified shape, with customizable foreground, background colors and padding. It is highly flexible, accommodating various shapes and color styles.\n\n[Back to Top](#components)\n\n## GrowingButtonStyle:\n\nA `ButtonStyle` for SwiftUI that scales the button on press, with customizable shape and color styles.\n\n```swift\nGrowingButtonStyle(textColor: .primary, backgroundColor: .green, shape: .rect(cornerRadius: 4))\n```\n\nParameters:\n- `textColor`: The color or style for the text inside the button, defaulting to `.white`.\n- `backgroundColor`: The background color or style of the button, conforming to `ShapeStyle`, with a default of `.blue`.\n- `shape`: The custom shape for the button, conforming to `Shape`. The default shape is `Capsule()`.\n- `verticalPadding`: The vertical padding inside the button. Defaults to `10`.\n- `horizontalPadding`: The horizontal padding inside the button. Defaults to `20`.\n\nExample:\n\n```swift\nlet gradient = LinearGradient(gradient: Gradient(colors: [Color.red, Color.orange]), startPoint: .leading, endPoint: .trailing)\n\nvar body: some View {\n VStack(spacing: 25) {\n Button(\"Growing 1\") { }\n .buttonStyle(GrowingButtonStyle())\n \n Button(\"Growing 2\") { }\n .buttonStyle(GrowingButtonStyle(textColor: .primary, backgroundColor: .green, shape: .rect(cornerRadius: 4)))\n \n Button(\"Growing 3\") { }\n .buttonStyle(GrowingButtonStyle(textColor: .primary, backgroundColor: gradient, shape: .rect(cornerRadius: 4)))\n }\n}\n```\n\nhttps://github.com/user-attachments/assets/9520da94-8b87-4a84-83e9-da7b79dbaeab\n\nThis button style provides an interactive feedback effect by increasing the button's scale when pressed. It allows for customization of the button's foreground and background colors, shape, and padding.\n\n[Back to Top](#components)\n\n## LoadingButtonStyle:\n\nA `ButtonStyle` for SwiftUI that provides a customizable button with a loading indicator.\n\n```swift\nLoadingButtonStyle(isLoading: $isLoading, loadingState: .resize, backgroundColor: .indigo)\n```\n\nParameters:\n- `isLoading`: A binding to a boolean indicating whether the button is in a loading state.\n- `loadingState`: An enum that determines the button's behavior when loading. Defaults to `.center`.\n- `textColor`: The color or style for the text inside the button, defaulting to `.white`.\n- `backgroundColor`: The background color or style of the button, conforming to `ShapeStyle`, with a default of `.blue`.\n- `disabledLoadingColor`: The background color or style of the button when it is loading, conforming to `ShapeStyle`, with a default of `.gray`.\n- `shape`: The custom shape for the button, conforming to `Shape`. The default shape is `Capsule()`.\n- `verticalPadding`: The vertical padding inside the button. Defaults to `10`.\n- `horizontalPadding`: The horizontal padding inside the button. Defaults to `20`.\n\nExample:\n\n```swift\n@State private var isLoading: Bool = false\n\nvar body: some View {\n VStack(spacing: 25) {\n Button(\"Loading Button 1\") {\n isLoading = true\n // Simulate a network request or some action\n DispatchQueue.main.asyncAfter(deadline: .now() + 2) {\n isLoading = false\n }\n }.buttonStyle(LoadingButtonStyle(isLoading: $isLoading))\n \n Button(\"Loading Button 2\") {}\n .buttonStyle(LoadingButtonStyle(isLoading: $isLoading, loadingState: .leading, backgroundColor: .cyan, horizontalPadding: 40))\n \n Button(action: {}, label: {\n Text(\"Loading Button 3\")\n .frame(width: 250, height: 40)\n })\n .buttonStyle(LoadingButtonStyle(isLoading: $isLoading, loadingState: .resize, backgroundColor: .indigo))\n \n Button(action: {}, label: {\n HStack(spacing: 12) {\n Image(systemName: \"person.crop.circle\")\n .font(.title2)\n \n Text(\"Loading Button 4\")\n .font(.title)\n }\n .frame(width: 250, height: 40)\n })\n .buttonStyle(LoadingButtonStyle(isLoading: $isLoading, loadingState: .leading, backgroundColor: .red, disabledLoadingColor: .red.opacity(0.5)))\n \n Button(action: {}, label: {\n Image(systemName: \"heart.fill\")\n .font(.title)\n .padding(5)\n })\n .buttonStyle(LoadingButtonStyle(isLoading: $isLoading, loadingState: .top, backgroundColor: .green, shape: .circle))\n }\n}\n```\n\nhttps://github.com/user-attachments/assets/b6fa0b46-53dc-4f81-bc84-fd467c74e407\n\nThis button style offers interactive feedback by displaying a `ProgressView` when in a loading state. It allows for extensive customization of the button's appearance, including text color, background color, shape, padding, and the position of the loading indicator. When loading, the button can optionally gray out the background and disable user interactions.\n\n[Back to Top](#components)\n\n## Dropdown\n\nA flexible and customizable dropdown component for SwiftUI. This view allows for displaying a list of selectable items with customizable appearance and interactivity.\n\n```swift\nDropDown(options: DropDownOptions.allCases, selection: $selectedOption) { item, isSelected, isPlaceHolderShow, isExpand in\n \n} placeHolder: { isExpand in\n \n}\n```\n\nParameters:\n- `options`: An array of `Item`, representing the content of the dropdown. Conform to `Hashable`.\n- `selection`: A binding to the currently selected item of type `Item`.\n- `rowHeight`: Height of each dropdown row.\n- `displayItem`: A closure that provides a view for each item. It receives four parameters: `item`: The current item to display, `isSelected`: A Boolean that indicates if the item is currently selected, `isPlaceHolderShow`: A Boolean that indicates if the placeholder is currently shown, and `isExpand`: A Boolean that indicates if the dropdown is expanded.\n- `placeHolder`: An optional closure that returns a view used as the dropdown's placeholder. It receives a Boolean parameter indicating if the dropdown is expanded.\n\nThis component offers flexibility in appearance and behavior, supporting dynamic content adjustments based on user selections. It provides customization options for row height, and allows for an optional placeholder view.\n\nExample 1:\n\n```swift\nprivate var options: [String] = [\"Option 1\", \"Option 2\", \"Option 3\", \"Option 4\"]\n@State private var selectedOption: String = \"Option 1\"\n\nvar body: some View {\n VStack {\n DropDown(options: options, selection: $selectedOption) { item, isSelected, isPlaceHolderShow, isExpand in\n Text(item)\n .foregroundStyle(isSelected ? .black : .white)\n .font(.title3)\n .frame(maxWidth: .infinity, maxHeight: .infinity, alignment: .leading)\n .padding(.horizontal)\n .background {\n Rectangle()\n .fill(isSelected ? .green : .gray)\n }\n }\n \n Spacer()\n }\n}\n```\n\nhttps://github.com/user-attachments/assets/286a2aee-e194-405e-abd7-963fe12dbaf6\n\nExample 2:\n\n```swift\nprivate var options: [String] = [\"Option 1\", \"Option 2\", \"Option 3\", \"Option 4\"]\n@State private var selectedOption: String = \"Option 1\"\n\nvar body: some View {\n VStack {\n DropDown(options: options, selection: $selectedOption4, rowHeight: 68) { item, isSelected, isPlaceHolderShow, isExpand in\n Text(item)\n .foregroundStyle(.black)\n .font(.title3)\n .frame(maxWidth: .infinity, maxHeight: .infinity, alignment: .leading)\n .padding(.horizontal)\n .background {\n RoundedRectangle(cornerRadius: 8)\n .stroke(isSelected ? .green : .gray, lineWidth: 2)\n .padding(2)\n }\n .padding(.top, 8)\n }\n \n Spacer()\n }\n}\n```\n\nhttps://github.com/user-attachments/assets/1c3b267c-5fea-45e6-b611-0ab26a763fbc\n\nExample 3:\n\n```swift\nenum DropDownOptions: String, CaseIterable {\n case north = \"North\"\n case south = \"South\"\n case east = \"East\"\n case west = \"West\"\n}\n@State private var selectedOption: DropDownOptions = .east\n\nvar body: some View {\n VStack {\n DropDown(options: DropDownOptions.allCases, selection: $selectedOption, rowHeight: 60) { item, isSelected, isPlaceHolderShow, isExpand in\n Text(item.rawValue)\n .foregroundStyle(isSelected \u0026\u0026 !isPlaceHolderShow ? .blue : .gray)\n .font(.title3)\n } placeHolder: {_ in\n Text(\"Select an option\")\n .foregroundStyle(.gray)\n .font(.title3)\n }\n \n Spacer()\n }\n}\n```\n\nhttps://github.com/user-attachments/assets/7c85934a-fc12-4ab2-8049-68783b2a14ef\n\nExample 4:\n\n```swift\nenum DropDownOptions: String, CaseIterable {\n case north = \"North\"\n case south = \"South\"\n case east = \"East\"\n case west = \"West\"\n}\n@State private var selectedOption: DropDownOptions = .east\n\nvar body: some View {\n VStack {\n DropDown(options: DropDownOptions.allCases, selection: $selectedOption) { item, isSelected, isPlaceHolderShow, isExpand in\n Text(item.rawValue)\n .foregroundStyle(.black)\n .font(.title3)\n .frame(maxWidth: .infinity, maxHeight: .infinity, alignment: .leading)\n .padding(.horizontal)\n .background {\n Rectangle()\n .fill(isSelected \u0026\u0026 !isPlaceHolderShow ? .clear : .gray.opacity(0.5))\n }\n } placeHolder: { isExpand in\n HStack {\n Text(\"Select the Direction\")\n .foregroundStyle(.primary)\n .font(.title3)\n .frame(maxWidth: .infinity, maxHeight: .infinity, alignment: .leading)\n \n Spacer()\n \n Image(systemName: \"chevron.down\")\n .resizable()\n .scaledToFit()\n .frame(width: 20, height: 20)\n .rotationEffect(isExpand ? .degrees(90) : .zero)\n }\n }\n \n Spacer()\n }\n}\n```\n\nhttps://github.com/user-attachments/assets/bba43eb8-1d4f-4d22-98d3-2c950dd0000c\n\nUse multiple DropDowns for complicated form:\n\nhttps://github.com/user-attachments/assets/7f7b988e-8cc7-41f1-84e1-fe08f9f8ce22\n\nThis example demonstrates a `DropDown` menu utilizing an enumeration for options, showcasing custom text styling and a placeholder. Be creative with these options for your style.\n\n[Back to Top](#components)\n\n## FloatingButton\n\n## ArcFloatingButton\n\nA customizable floating action button component that arcs around a main button, revealing multiple action buttons.\n\n```swift\nArcFloatingButton(alignment: .halfmoonTop) {\n \n} label: { isExpanded in\n \n}\n```\n\nParameters:\n- `buttonSize`: The diameter of each action button.\n- `alignment`: The alignment dictates the starting point and direction in which the action buttons will arc (e.g., topLeading, fullmoon).\n- `spacing`: The spacing between the expanded action buttons.\n- `shape`: The shape of each action button, conforming to the `Shape` protocol.\n- `actions`: An array of [FloatingAction](#floatingaction) objects defining the actions for the expanded buttons.\n- `label`: A view builder that generates the content displayed on the expandable floating button.\n\n`ArcFloatingButton` allows for a radial or semi-circular placement of action buttons that emerge from behind the main button. It supports various alignments and can adapt to custom shapes for each action button.\n\n#### FloatingAction\n\nRepresents a customizable floating action button with identifiable properties. Used for `ArcFloatingButton` and `ExpandFloatingButton`.\n\n```swift\nFloatingAction(image: Image(systemName: \"house.fill\"), tint: .blue) {\n print(\"Heart\")\n}\n```\n\nParameters:\n- `id`: A unique identifier for the button, useful for distinguishing multiple instances.\n- `image`: The SwiftUI `Image` to display on the button.\n- `font`: The font style for any textual content inside the button.\n- `tint`: The color of the button's content, typically the icon or text.\n- `background`: The background color of the button.\n- `action`: The closure that executes when the button is tapped.\n\n`FloatingAction` configures a button that can be prominently displayed over content, commonly used for actions such as creating new items or triggering specific functions. This struct allows customization of the button's icon, font, colors, and action.\n\nDefine actions data using [FloatingAction](#floatingaction):\n\n```swift\nprivate let actions = [\n FloatingAction(image: Image(systemName: \"tray.full.fill\"), tint: .red, background: .white) {\n print(\"Tray\")\n },\n FloatingAction(image: Image(systemName: \"lasso.badge.sparkles\"), tint: .red, background: .white) {\n print(\"Spark\")\n },\n FloatingAction(image: Image(systemName: \"square.and.arrow.up.fill\"), tint: .red, background: .white) {\n print(\"Share\")\n }\n]\n```\n\n**Top Leading**:\n\n```swift\nScrollView(.vertical) { ... }\n.overlay(alignment: .topLeading) {\n ArcFloatingButton(alignment: .topLeading, actions: actions) { isExpanded in\n Image(systemName: \"plus\")\n .font(.title3.bold())\n .foregroundStyle(.white)\n .rotationEffect(.init(degrees: isExpanded ? 45 : 0))\n .scaleEffect(1.02)\n .frame(maxWidth: .infinity, maxHeight: .infinity)\n .background(.black, in: .circle)\n // Scaling Effect when expanded\n .scaleEffect(isExpanded ? 0.9 : 1)\n }\n .padding()\n}\n```\n\nhttps://github.com/user-attachments/assets/c8b47675-14ac-4c84-9354-dfa937919bcc\n\n**Top Trailing**:\n\n```swift\nScrollView(.vertical) { ... }\n.overlay(alignment: .topTrailing) {\n ArcFloatingButton(alignment: .topTrailing, actions: actions) { isExpanded in\n Image(systemName: \"plus\")\n .font(.title3.bold())\n .foregroundStyle(.white)\n .rotationEffect(.init(degrees: isExpanded ? 45 : 0))\n .scaleEffect(1.02)\n .frame(maxWidth: .infinity, maxHeight: .infinity)\n .background(.black, in: .circle)\n // Scaling Effect when expanded\n .scaleEffect(isExpanded ? 0.9 : 1)\n }\n .padding()\n}\n```\n\nhttps://github.com/user-attachments/assets/43e79578-d942-4d12-a34f-962539e648b8\n\n**Bottom Leading**:\n\n```swift\nScrollView(.vertical) { ... }\n.overlay(alignment: .bottomLeading) {\n ArcFloatingButton(alignment: .bottomLeading, actions: actions) { isExpanded in\n Image(systemName: \"plus\")\n .font(.title3.bold())\n .foregroundStyle(.white)\n .rotationEffect(.init(degrees: isExpanded ? 45 : 0))\n .scaleEffect(1.02)\n .frame(maxWidth: .infinity, maxHeight: .infinity)\n .background(.black, in: .circle)\n // Scaling Effect when expanded\n .scaleEffect(isExpanded ? 0.9 : 1)\n }\n .padding()\n}\n```\n\nhttps://github.com/user-attachments/assets/d1fbddf2-007d-452a-bd59-c39bc8208beb\n\n**Bottom Trailing**:\n\n```swift\nScrollView(.vertical) { ... }\n.overlay(alignment: .bottomTrailing) {\n ArcFloatingButton(alignment: .bottomTrailing, actions: actions) { isExpanded in\n Image(systemName: \"plus\")\n .font(.title3.bold())\n .foregroundStyle(.white)\n .rotationEffect(.init(degrees: isExpanded ? 45 : 0))\n .scaleEffect(1.02)\n .frame(maxWidth: .infinity, maxHeight: .infinity)\n .background(.black, in: .circle)\n // Scaling Effect when expanded\n .scaleEffect(isExpanded ? 0.9 : 1)\n }\n .padding()\n}\n```\n\nhttps://github.com/user-attachments/assets/27fe45f8-1bdf-461d-83de-c9abcbc626ca\n\nAlternatively, [FloatingAction](#floatingaction) actions can be listed orderly inside the `action closure`.\n\n**Halfmoon Top**:\n\n```swift\n.overlay(alignment: .center) {\n VStack {\n ArcFloatingButton(alignment: .halfmoonTop) {\n FloatingAction(image: Image(systemName: \"tray.full.fill\"), tint: .teal) {\n print(\"Tray\")\n }\n \n FloatingAction(image: Image(systemName: \"lasso.badge.sparkles\"), tint: .teal) {\n print(\"Spark\")\n }\n \n FloatingAction(image: Image(systemName: \"square.and.arrow.up.fill\"), tint: .teal) {\n print(\"Share\")\n }\n \n FloatingAction(image: Image(systemName: \"heart.fill\"), tint: .teal) {\n print(\"Heart\")\n }\n \n FloatingAction(image: Image(systemName: \"house.fill\"), tint: .teal) {\n print(\"Heart\")\n }\n } label: { isExpanded in\n Image(systemName: \"plus\")\n .font(.title3.bold())\n .foregroundStyle(.white)\n .rotationEffect(.init(degrees: isExpanded ? 45 : 0))\n .scaleEffect(1.02)\n .frame(maxWidth: .infinity, maxHeight: .infinity)\n .background(.black, in: .circle)\n // Scaling Effect when expanded\n .scaleEffect(isExpanded ? 0.9 : 1)\n }\n }\n}\n```\n\nhttps://github.com/user-attachments/assets/b1397d03-83a0-4c3f-9b74-f4742c156145\n\n**Halfmoon Bottom**:\n\n```swift\n.overlay(alignment: .center) {\n VStack {\n ArcFloatingButton(alignment: .halfmoonBottom) {\n FloatingAction(image: Image(systemName: \"tray.full.fill\"), tint: .orange) {\n print(\"Tray\")\n }\n \n FloatingAction(image: Image(systemName: \"lasso.badge.sparkles\"), tint: .orange) {\n print(\"Spark\")\n }\n \n FloatingAction(image: Image(systemName: \"square.and.arrow.up.fill\"), tint: .orange) {\n print(\"Share\")\n }\n \n FloatingAction(image: Image(systemName: \"heart.fill\"), tint: .orange) {\n print(\"Heart\")\n }\n \n FloatingAction(image: Image(systemName: \"house.fill\"), tint: .orange) {\n print(\"Heart\")\n }\n } label: { isExpanded in\n Image(systemName: \"plus\")\n .font(.title3.bold())\n .foregroundStyle(.white)\n .rotationEffect(.init(degrees: isExpanded ? 45 : 0))\n .scaleEffect(1.02)\n .frame(maxWidth: .infinity, maxHeight: .infinity)\n .background(.black, in: .circle)\n // Scaling Effect when expanded\n .scaleEffect(isExpanded ? 0.9 : 1)\n }\n }\n}\n```\n\nhttps://github.com/user-attachments/assets/89260d78-8e96-47fb-ac52-7dc2ee190ad7\n\n**Halfmoon Leading**:\n\n```swift\n.overlay(alignment: .center) {\n ArcFloatingButton(alignment: .halfmoonLeading) {\n FloatingAction(image: Image(systemName: \"tray.full.fill\"), tint: .yellow) {\n print(\"Tray\")\n }\n \n FloatingAction(image: Image(systemName: \"lasso.badge.sparkles\"), tint: .yellow) {\n print(\"Spark\")\n }\n \n FloatingAction(image: Image(systemName: \"square.and.arrow.up.fill\"), tint: .yellow) {\n print(\"Share\")\n }\n \n FloatingAction(image: Image(systemName: \"heart.fill\"), tint: .yellow) {\n print(\"Heart\")\n }\n \n FloatingAction(image: Image(systemName: \"house.fill\"), tint: .yellow) {\n print(\"Heart\")\n }\n } label: { isExpanded in\n Image(systemName: \"plus\")\n .font(.title3.bold())\n .foregroundStyle(.white)\n .rotationEffect(.init(degrees: isExpanded ? 45 : 0))\n .scaleEffect(1.02)\n .frame(maxWidth: .infinity, maxHeight: .infinity)\n .background(.black, in: .circle)\n // Scaling Effect when expanded\n .scaleEffect(isExpanded ? 0.9 : 1)\n }\n}\n```\n\nhttps://github.com/user-attachments/assets/64c47986-40a3-466b-9b54-079fc67d0e65\n\n**Halfmoon Trailing**:\n\n```swift\n.overlay(alignment: .center) {\n ArcFloatingButton(alignment: .halfmoonTrailing) {\n FloatingAction(image: Image(systemName: \"tray.full.fill\"), tint: .green) {\n print(\"Tray\")\n }\n \n FloatingAction(image: Image(systemName: \"lasso.badge.sparkles\"), tint: .green) {\n print(\"Spark\")\n }\n \n FloatingAction(image: Image(systemName: \"square.and.arrow.up.fill\"), tint: .green) {\n print(\"Share\")\n }\n \n FloatingAction(image: Image(systemName: \"heart.fill\"), tint: .green) {\n print(\"Heart\")\n }\n \n FloatingAction(image: Image(systemName: \"house.fill\"), tint: .green) {\n print(\"Heart\")\n }\n } label: { isExpanded in\n Image(systemName: \"plus\")\n .font(.title3.bold())\n .foregroundStyle(.white)\n .rotationEffect(.init(degrees: isExpanded ? 45 : 0))\n .scaleEffect(1.02)\n .frame(maxWidth: .infinity, maxHeight: .infinity)\n .background(.black, in: .circle)\n // Scaling Effect when expanded\n .scaleEffect(isExpanded ? 0.9 : 1)\n }\n}\n```\n\nhttps://github.com/user-attachments/assets/311239dd-8353-48cb-87b1-5b9fe6f17056\n\n**FullMoon**:\n\n```swift\n.overlay(alignment: .center) {\n ArcFloatingButton(alignment: .fullmoon) {\n FloatingAction(image: Image(systemName: \"tray.full.fill\"), tint: .red) {\n print(\"Tray\")\n }\n \n FloatingAction(image: Image(systemName: \"lasso.badge.sparkles\"), tint: .orange) {\n print(\"Spark\")\n }\n \n FloatingAction(image: Image(systemName: \"square.and.arrow.up.fill\"), tint: .yellow) {\n print(\"Share\")\n }\n \n FloatingAction(image: Image(systemName: \"heart.fill\"), tint: .green) {\n print(\"Heart\")\n }\n \n FloatingAction(image: Image(systemName: \"house.fill\"), tint: .blue) {\n print(\"Heart\")\n }\n \n FloatingAction(image: Image(systemName: \"paperplane\"), tint: .cyan) {\n print(\"Heart\")\n }\n } label: { isExpanded in\n Image(systemName: \"plus\")\n .font(.title3.bold())\n .foregroundStyle(.white)\n .rotationEffect(.init(degrees: isExpanded ? 45 : 0))\n .scaleEffect(1.02)\n .frame(maxWidth: .infinity, maxHeight: .infinity)\n .background(.black, in: .circle)\n // Scaling Effect when expanded\n .scaleEffect(isExpanded ? 0.9 : 1)\n }\n}\n```\n\nhttps://github.com/user-attachments/assets/a5c087e0-80f0-4b6e-a382-bcb0adf2919d\n\nThis component enhances the user interface by seamlessly integrating multiple actions into a single floating action button, providing both aesthetic appeal and functional space-saving benefits.\n\nThis component is ideal for interfaces that require quick access to multiple actions without cluttering the UI.\n\n[Back to Top](#components)\n\n## ExpandFloatButton\n\nA SwiftUI view component that displays a floating action button with expandable action buttons.\n\n```swift\nExpandFloatButton(alignment: .leading) {\n \n} label: { isExpanded in\n \n}\n```\n\nParameters:\n- `buttonSize`: The size of the floating button and each action button.\n- `alignment`: The direction in which the action buttons will expand from the main button. (e.g., leading, trailing, top, bottom).\n- `spacing`: The space between the expanded action buttons.\n- `shape`: The shape of each action button, conforming to the `Shape` protocol.\n- `actions`: An array of [FloatingAction](#floatingaction) objects defining the actions for the expanded buttons.\n- `label`: A view builder that generates the content displayed on the expandable floating button.\n\n`ExpandFloatButton` offers a dynamic way to present multiple action buttons from a main floating button. It supports expansion in specified directions and can adapt the shape of the action buttons.\n\nDefine actions data using [FloatingAction](#floatingaction):\n\n```swift\nprivate let actions: [FloatingAction] = [\n FloatingAction(image: Image(systemName: \"tray.full.fill\"), tint: .red) {\n print(\"Tray\")\n },\n FloatingAction(image: Image(systemName: \"lasso.badge.sparkles\"), tint: .orange) {\n print(\"Spark\")\n },\n FloatingAction(image: Image(systemName: \"square.and.arrow.up.fill\"), tint: .yellow) {\n print(\"Share\")\n },\n FloatingAction(image: Image(systemName: \"heart.fill\"), tint: .green) {\n print(\"Heart\")\n },\n FloatingAction(image: Image(systemName: \"paperplane\"), tint: .cyan) {\n print(\"Plane\")\n }\n]\n```\n\n**Leading**:\n\n```swift\nScrollView(.vertical) { ... }\n.overlay(alignment: .bottomLeading) {\n ExpandFloatButton(alignment: .leading, actions: actions, shape: .rect(cornerRadius: 8)) { isExpanded in\n Image(systemName: \"plus\")\n .font(.title3.bold())\n .foregroundStyle(.white)\n .rotationEffect(.init(degrees: isExpanded ? 45 : 0))\n .frame(maxWidth: .infinity, maxHeight: .infinity)\n .background(.black, in: .rect(cornerRadius: 8))\n }\n .padding()\n}\n```\n\nhttps://github.com/user-attachments/assets/27aac4f9-f219-4732-bf0b-848ae4ebf562\n\n**Trailing**:\n\n```swift\nScrollView(.vertical) { ... }\n.overlay(alignment: .bottomTrailing) {\n ExpandFloatButton(alignment: .trailing, actions: actions) { isExpanded in\n Image(systemName: \"plus\")\n .font(.title3.bold())\n .foregroundStyle(.white)\n .rotationEffect(.init(degrees: isExpanded ? 45 : 0))\n .frame(maxWidth: .infinity, maxHeight: .infinity)\n .background(.black, in: .circle)\n }\n .padding()\n}\n```\n\nhttps://github.com/user-attachments/assets/9e723ab3-eeed-4da1-8e2d-6b7f16bb483f\n\n**Top**:\n\n```swift\nScrollView(.vertical) { ... }\n.overlay(alignment: .topTrailing) {\n ExpandFloatButton(alignment: .top, actions: actions) { isExpanded in\n Image(systemName: \"plus\")\n .font(.title3.bold())\n .foregroundStyle(.white)\n .rotationEffect(.init(degrees: isExpanded ? 45 : 0))\n .frame(maxWidth: .infinity, maxHeight: .infinity)\n .background(.black, in: .circle)\n }\n .padding()\n}\n```\n\nhttps://github.com/user-attachments/assets/5b53e2e9-5d0a-4f34-b79a-b2e8907dd335\n\n**Bottom**:\n\n```swift\nScrollView(.vertical) { ... }\n.overlay(alignment: .bottomTrailing) {\n ExpandFloatButton(alignment: .bottom, actions: actions) { isExpanded in\n Image(systemName: \"plus\")\n .font(.title3.bold())\n .foregroundStyle(.white)\n .rotationEffect(.init(degrees: isExpanded ? 45 : 0))\n .frame(maxWidth: .infinity, maxHeight: .infinity)\n .background(.black, in: .circle)\n }\n .padding()\n}\n```\n\nhttps://github.com/user-attachments/assets/ddd4a195-e9a6-48e4-aebe-e4b2be86d593\n\nThe `ExpandFloatButton` efficiently enhances the user interface by integrating multiple action options into a single floating button. This design not only saves valuable screen space but also adds a sophisticated aesthetic element to the user interface. \n\nIt is particularly beneficial in applications where quick access to multiple functions is necessary without cluttering the screen, offering an intuitive and streamlined user experience.\n\n[Back to Top](#components)\n\n## GlassMorphism\n\nA view creating a glassmorphism effect with customizable properties.\n\n```swift\nGlassMorphismView(cornerRadius: 25, blurRadius: 8, saturationAmount: 1.8)\n```\n\nParameters:\n- `cornerRadius`: The radius of the corners for the card. Default is 0.\n- `blurRadius`: The intensity of the blur effect. A value of 0 uses the system default.\n- `saturationAmount`: The saturation effect's intensity. A value of 0 uses the system default.\n- `border`: The thickness of the card's border. Default is 0 (no border).\n\nThis view uses blur and saturation effects to achieve a frosted glass look, further enhanced with a customizable border. The effect's intensity and appearance can be tailored through parameters for corner radius, blur, saturation, and border thickness.\n\nExample:\n\n```swift\nZStack {\n Circle()\n .frame(width: 100, height: 100, alignment: .center)\n .foregroundColor(.red)\n \n GlassMorphismView(cornerRadius: 25, blurRadius: 8, saturationAmount: 1.8)\n \n Text(\"CommonSwiftUI made by James Thang\")\n .font(.title3)\n .fontWeight(.medium)\n .foregroundStyle(.white)\n .multilineTextAlignment(.trailing)\n .frame(maxWidth: .infinity, maxHeight: .infinity, alignment: .bottomTrailing)\n .padding()\n}\n.frame(height: 250)\n.padding()\n```\n\n\u003cimg src=\"https://github.com/user-attachments/assets/abbb1edd-f559-451f-9a47-0847d506e942\" width=\"220\"\u003e\n\nThis example illustrates the `GlassMorphismView` with a circular red background, a specified border, and overlaid text to demonstrate the glassmorphism effect.\n\n[Back to Top](#components)\n\n## Glow\n\nApplies a glowing effect to any SwiftUI view using a specified color or gradient and intensity.\n\n```swift\nText(\"CommonSwiftUI\")\n .glow(color: .blue, intensity: 0.5)\n```\n\nParameters:\n- `color`: The `Color` to use for the glow effect.\n- `intensity`: The `CGFloat` that determines the strength of the glow effect.\n\n```swift\nText(\"James Thang\")\n .glow(gradient: gradient, intensity: 5)\n```\n\nParameters:\n- `gradient`: A `LinearGradient` defining the colors of the glow.\n- `intensity`: The `CGFloat` that determines the strength of the glow effect.\n\nExample:\n\n```swift\nlet gradient: LinearGradient = .linearGradient(.init(colors: [.blue, .purple, .orange]), startPoint: .leading, endPoint: .trailing)\n\nvar body: some View {\n VStack {\n Image(systemName: \"apple.logo\")\n .resizable()\n .aspectRatio(contentMode: .fit)\n .frame(width: 200, height: 200)\n .glow(gradient: gradient, intensity: 5)\n \n Text(\"It's Glowtime\")\n .font(.system(size: 54))\n .fontWeight(.semibold)\n .glow(gradient: gradient, intensity: 5)\n \n Text(\"September 9, 2024\")\n }\n}\n```\n\n\u003cimg src=\"https://github.com/user-attachments/assets/aa883b6d-cbec-4a34-93e3-11f2f4a30981\" width=\"220\"\u003e\n\nThis method is useful for adding attention-grabbing highlights to elements of your UI.\n\n[Back to Top](#components)\n\n## HambugMenu\n\nA customizable slide menu in SwiftUI that can be expanded from the side of the screen.\n\n```swift\nHambugSlideMenu()\n```\n\nParameters:\n- `showMenu`: A binding to a Boolean that controls the visibility of the menu.\n- `rotatesWhenExpand`: A Boolean value that determines if the content view should rotate when the menu expands.\n- `enableInteraction`: A Boolean that enables interaction with the background content when the menu is expanded.\n- `sideMenuWidth`: The width of the side menu.\n- `cornerRadius`: The corner radius applied to the content view when the menu is expanded.\n- `background`: The background style of the menu.\n- `overlay`: The overlay style applied over the content when the menu is visible.\n- `content`: A closure returning the content view, taking the current safe area insets as a parameter.\n- `menuView`: A closure returning the menu view, taking the current safe area insets as a parameter.\n\nExample:\n\nDefine Tab Enum case:\n\n```swift\nenum Tab: String, CaseIterable {\n case home = \"house.fill\"\n case bookmark = \"book.fill\"\n case favorites = \"heart.fill\"\n case profile = \"person.crop.circle\"\n case logout = \"rectangle.portrait.and.arrow.forward.fill\"\n \n var title: String {\n switch self {\n case .home:\n return \"Home\"\n case .bookmark:\n return \"Bookmark\"\n case .favorites:\n return \"Favorites\"\n case .profile:\n return \"Profile\"\n case .logout:\n return \"Logout\"\n }\n }\n}\n```\n\nSlide Bar buttons:\n\n```swift\n@ViewBuilder\nfunc SideBarButton(_ tab: Tab, onTap: @escaping () -\u003e () = {}) -\u003e some View {\n Button(action: onTap, label: {\n HStack(spacing: 12) {\n Image(systemName: tab.rawValue)\n .font(.title3)\n \n Text(tab.title)\n .font(.callout)\n \n Spacer(minLength: 0)\n }\n .padding(.vertical, 10)\n .contentShape(.rect)\n .foregroundStyle(.white)\n })\n}\n```\n\nSlide Bar Menu View:\n\n```swift\n@ViewBuilder\nfunc SideBarMenuView(_ safeArea: UIEdgeInsets) -\u003e some View {\n VStack(alignment: .leading, spacing: 12) {\n Text(\"Side Menu\")\n .font(.largeTitle.bold())\n .foregroundStyle(.white)\n .padding(.bottom, 10)\n \n SideBarButton(.home)\n SideBarButton(.bookmark)\n SideBarButton(.favorites)\n SideBarButton(.profile)\n \n Spacer()\n \n SideBarButton(.logout)\n }\n .padding(.horizontal, 15)\n .padding(.vertical, 20)\n .padding(.top, safeArea.top)\n .padding(.bottom, safeArea.bottom)\n .frame(maxWidth: .infinity, maxHeight: .infinity, alignment: .topLeading)\n .environment(\\.colorScheme, .dark)\n}\n```\n\nMain App View:\n\n```swift\n@ViewBuilder\nfunc MainView() -\u003e some View {\n NavigationView {\n List {\n NavigationLink(\"Detail View\") {\n Text(\"Hello world\")\n .navigationTitle(\"Detail\")\n }\n }\n .navigationTitle(\"Home\")\n .toolbar {\n ToolbarItem(placement: .topBarLeading) {\n Button(action: { showMenu.toggle() } , label: {\n Image(systemName: showMenu ? \"xmark\" : \"line.3.horizontal\")\n .foregroundStyle(Color.primary)\n })\n }\n }\n }\n}\n```\n\nImplement Hambug Menu:\n\n```swift\n@State private var showMenu: Bool = false\n\nvar body: some View {\n HambugSlideMenu(showMenu: $showMenu, rotatesWhenExpand: false, enableInteraction: true, background: .primary.opacity(0.85)) { safeArea in\n MainView()\n } menuView: { safeArea in\n SideBarMenuView(safeArea)\n }\n}\n```\n\nhttps://github.com/user-attachments/assets/961787bb-527d-4bac-b5ea-50a96946e0c6\n\nThis component provides a flexible and dynamic slide menu implementation that can toggle visibility with an animated transition. It supports customizable interactions, animations, and dimensions for the slide menu and its content.\n\n[Back to Top](#components)\n\n## HoldDownButton\n\nA SwiftUI view that implements a hold-down button with progress feedback.\n\n```swift\nHoldDownButton(text: \"Hold Down Button\", color: .white, background: .black, loadingTint: .yellow, clipShape: .capsule) {\n print(\"Finish\")\n}\n```\n\nParameters:\n- `text`: The label displayed on the button.\n- `paddingHorizontal`: Horizontal padding around the text.\n- `paddingVertical`: Vertical padding around the text.\n- `duration`: The time in seconds the button needs to be held to activate.\n- `scale`: The scale effect applied to the button when pressed.\n- `color`: The text color.\n- `background`: The button's background color.\n- `loadingTint`: The color of the progress indicator.\n- `shape`: The shape of the button, defined using a generic `Shape`.\n- `action`: The closure to execute when the hold duration is completed.\n\n`HoldDownButton` allows users to interact with a button that requires being held down for a specific duration to activate. It visually indicates the progress of the hold duration using a loading bar and supports customizable text, colors, and shape.\n\nExample:\n\n```swift\nVStack(spacing: 24) {\n HoldDownButton(text: \"Hold Down Button\", color: .white, background: .black, loadingTint: .yellow, clipShape: .capsule) {\n print(\"Finish\")\n }\n \n HoldDownButton(text: \"Hold Down Button\", loadingTint: .white, clipShape: .rect(cornerRadius: 8)) {\n print(\"Finish\")\n }\n \n HoldDownButton(text: \"Hold Down Button\") {\n print(\"Finish\")\n }\n \n HoldDownButton(\n text: \"Press and Hold\",\n paddingHorizontal: 24,\n paddingVertical: 12,\n duration: 2,\n scale: 0.95,\n color: .white,\n background: .blue,\n loadingTint: .green.opacity(0.5),\n clipShape: RoundedRectangle(cornerRadius: 10),\n action: {\n print(\"Action triggered!\")\n }\n )\n}\n```\n\nhttps://github.com/user-attachments/assets/0270f8a3-5170-41bf-a04e-2e52170b78c7\n\nThis component is useful for actions that require confirmation or extended interaction, preventing accidental triggers.\n\n[Back to Top](#components)\n\n## HTMLTextView\n\n`HTMLTextView` allows SwiftUI to integrate HTML formatted text, transforming it into a styled `NSAttributedString` displayed within a UILabel. This view handles dynamic content size and adapts to the environment's constraints.\n\n```swift\nHTMLTextView(content: \"\u003ch1\u003eJames Thang\u003c/h1\u003e\")\n```\n\nParameters:\n- `content`: The HTML string to be rendered.\n- `font`: The base font to apply to the text. HTML styling may override this font partially.\n- `textColor`: The color of the text.\n\nExample HTML:\n\n```swift\nlet htmlString = \"\"\"\n\u003c!DOCTYPE html\u003e\n\u003chtml lang=\"en\"\u003e\n\u003chead\u003e\n \u003cmeta charset=\"UTF-8\"\u003e\n \u003cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"\u003e\n \u003ctitle\u003eSample HTML\u003c/title\u003e\n\u003c/head\u003e\n\u003cbody\u003e\n \u003ch1\u003eWelcome to SwiftUI HTML Rendering\u003c/h1\u003e\n \u003cp\u003eThis is an example of rendering \u003cstrong\u003eHTML content\u003c/strong\u003e within a \u003cem\u003eSwiftUI\u003c/em\u003e application using a \u003ccode\u003eUIViewRepresentable\u003c/code\u003e.\u003c/p\u003e\n \n \u003ch2\u003eFeatures:\u003c/h2\u003e\n \u003cul\u003e\n \u003cli\u003eRendering of \u003cstrong\u003ebold\u003c/strong\u003e and \u003cem\u003eitalic\u003c/em\u003e text.\u003c/li\u003e\n \u003cli\u003eSupport for \u003ca href=\"https://www.linkedin.com/in/jamesthang/\"\u003elinks\u003c/a\u003e.\u003c/li\u003e\n \u003cli\u003eDisplay of \u003cu\u003eunderlined\u003c/u\u003e and \u003cs\u003estrikethrough\u003c/s\u003e text.\u003c/li\u003e\n \u003cli\u003eEmbedding of images:\u003c/li\u003e\n \u003c/ul\u003e\n \u003cp\u003e\u003cimg src=\"https://picsum.photos/200\" alt=\"Placeholder Image\" /\u003e\u003c/p\u003e\n \u003ch2\u003eConclusion\u003c/h2\u003e\n \u003cp\u003eThis demonstrates the ability to \u003cstrong\u003ecustomize\u003c/strong\u003e the display of complex HTML content within a SwiftUI app.\u003c/p\u003e\n\u003c/body\u003e\n\u003c/html\u003e\n\"\"\"\n```\n\nUsage:\n\n```swift\nHTMLTextView(\n content: htmlString,\n font: UIFont(name: \"HelveticaNeue\", size: 16) ?? UIFont.systemFont(ofSize: 16),\n textColor: .label\n)\n.fixedSize(horizontal: false, vertical: true)\n.frame(maxWidth: .infinity, alignment: .leading)\n.background(Color.gray.opacity(0.2))\n.padding()\n```\n\nResult:\n\n\u003cimg src=\"https://github.com/user-attachments/assets/a5dae2d8-3e71-4406-b826-dc3fc9229bf5\" width=\"220\"\u003e\n\nThis component simplifies the display of HTML content by managing the conversion process internally and adjusting the UILabel to fit the content appropriately.\n\n[Back to Top](#components)\n\n## LoadingIndicator\n\n## SimpleLoadingIndicator:\n\nA simple, customizable loading indicator view. This view displays a circular loading indicator that rotates according to the specified loading speed. The appearance of the indicator, including its color, background color, line width, and speed, can be customized.\n\n```swift\nSimpleLoadingIndicator(color: .green, backgroundColor: .clear, lineWidth: 12, loadingSpeed: .custom(2))\n .frame(width: 200, height: 200)\n```\n\nParameters:\n- `color`: The color of the loading indicator. Default is `.blue`.\n- `backgroundColor`: The background color of the loading indicator. Default is `.gray`.\n- `lineWidth`: The thickness of the loading indicator's line. Default is 5.\n- `loadingSpeed`: The speed at which the loading indicator rotates. This uses the shared type [Speed](#speed). Default is `.medium`.\n\n#### Speed\n\nAn enumeration representing the speed of an operation.\n\nThis enum provides both predefined and customizable time intervals to represent different speeds at which an operation can occur. Each case of the enum corresponds to a specific speed, with four predefined speeds and one customizable option, allowing for flexible loading behavior tailored to specific needs.\n\nCases:\n- `flash`: A very fast operation speed, with a time interval of 0.1 second.\n- `fast`: A fast operation speed, with a time interval of 1 second.\n- `medium`: A medium operation speed, with a time interval of 2 seconds.\n- `slow`: A slow operation speed, with a time interval of 3 seconds.\n- `custom(TimeInterval)`: A customizable operation speed, where the time interval can be specified dynamically.\n\nhttps://github.com/user-attachments/assets/d3031c2d-6f4c-4f94-bfa7-ae2c3dd3e0ac\n\nThe loading indicator will rotate continuously to signify an ongoing loading process.\n\nVisibility and Size:\n- Frame Size: Adjust the indicator's frame size with `.frame(width:height:)` modifier to fit various UI spaces.\n- Dynamic Visibility: Manage the visibility using `.opacity()` modifier or `if-else` conditions based on your application's state. This helps integrate the indicator seamlessly into your UI or hide it when not needed.\n\n[Back to Top](#components)\n\n## FancyLoadingView\n\nA SwiftUI view that displays a series of animated concentric circles, creating a dynamic loading indicator.\n\n```swift\nFancyLoading()\n```\n\nParameters:\n- `color`: The color of the circle strokes. The default is `.primary`.\n\nhttps://github.com/user-attachments/assets/ceefa337-ac2d-4001-ae81-c5ee111a033c\n\nEach circle in the animation is individually timed to create a smooth, rhythmic effect that visually indicates an ongoing process.\n\nVisibility: \n- Manage the visibility using `.opacity()` modifier or `if-else` conditions based on your application's state. This helps integrate the indicator seamlessly into your UI or hide it when not needed.\n\n[Back to Top](#components)\n\n## ShimmerView\n\nA view displaying a shimmering loading placeholder.\n\n```swift\nShimmerView()\n```\n\nThis view simulates a 'shimmer' effect commonly used as a placeholder during content loading. It consists of multiple shimmering elements: a pair of small circular views at the top and bottom, and larger rectangular views in between, all showcasing the shimmer effect.\n\nhttps://github.com/user-attachments/assets/8f921028-2d13-4ed6-9281-998a883fe53e\n\nNo additional configuration is needed. The shimmer effect starts automatically, simulating content loading in your UI.\n\nVisibility: \n- Manage the visibility using `.opacity()` modifier or `if-else` conditions based on your application's state. This helps integrate the indicator seamlessly into your UI or hide it when not needed.\n\nFor more customization, look at [Shimmer](#shimmer) view modifier to apply a shimmer effect to any SwiftUI view.\n\n[Back to Top](#components)\n\n## ProgressView\n\n## ProgressBar:\n\nA rectangular progress bar view for SwiftUI that supports a shimmer effect.\n\n```swift\nProgressBar(progress: $progress, color: .blue)\n```\n\nParameters:\n- `progress`: A binding to a `CGFloat` that represents the current progress (from 0.0 to 1.0).\n- `color`: The color of the bar's tint.\n- `colors`: An array of `Color` to create a gradient for the progress bar (used when more than one color is desired).\n- `backgroundColor`: The color of the bar's background.\n- `shimmer`: A Boolean value that determines whether a shimmer effect should be applied to the progress bar.\n\nYou can use either a single color or a gradient of colors for the progress bar. The background of the bar can also be customized.\n\nExample:\n\n```swift\n@State private var progress: CGFloat = 0.75\n\nvar body: some View {\n VStack(spacing: 30) {\n ProgressBar(progress: $progress, color: .green, backgroundColor: .clear)\n .frame(width: 300, height: 20)\n \n ProgressBar(progress: $progress, color: .orange, backgroundColor: .orange.opacity(0.2))\n .frame(width: 300, height: 20)\n \n ProgressBar(progress: $progress, colors: [.red, .blue])\n .frame(width: 300, height: 16)\n \n ProgressBar(progress: $progress, color: .blue)\n .frame(width: 300, height: 8)\n \n ProgressBar(progress: $progress, colors: [.indigo, .teal])\n .frame(width: 300, height: 8)\n }\n}\n```\n\n\u003cimg src=\"https://github.com/user-attachments/assets/60cfef78-3aaa-4567-ae3e-b01a099d6aeb\" width=\"220\"\u003e\n\nShimmering Example:\n\n```swift\n@State private var progress: CGFloat = 0.75\n\nvar body: some View {\n VStack(spacing: 20) {\n ProgressBar(progress: $progress, color: .orange, backgroundColor: .orange.opacity(0.2), shimmer: true)\n .frame(width: 300, height: 20)\n }\n}\n```\n\nhttps://github.com/user-attachments/assets/650154ec-b345-4586-a30e-01d7f58bba12\n\nThis view displays a customizable progress bar that fills up based on the current `progress`. It can be customized with different colors, a background color, and an optional shimmer effect for visual enhancement.\n\nSize:\n- Frame Size: Adjust the view's frame size with `.frame(width:height:)` modifier to fit various UI spaces.\n\n[Back to Top](#components)\n\n## RingProgress:\n\nA circular progress bar view for SwiftUI.\n\n```swift\nRingProgress(progress: $progress, lineWidth: 16, color: .green)\n```\n\nParameters:\n- `progress`: A binding to a `CGFloat` that represents the current progress (from 0.0 to 1.0).\n- `lineWidth`: The thickness of the progress bar's line.\n- `startAngle`: The angle at which the progress starts, with `.zero` being the default.\n- `color`: The color of the bar's tint.\n- `colors`: An array of `Color` to create a gradient for the progress bar (used when more than one color is desired).\n- `backgroundColor`: The color of the bar's background.\n\nYou can use either a single color or a gradient of colors for the progress bar.\n\nExample:\n\n```swift\n@State private var progress: CGFloat = 0.75\n\nvar body: some View {\n VStack(spacing: 50) {\n HStack(spacing: 50) {\n RingProgress(progress: $progress, lineWidth: 16, startAngle: .degrees(90), color: .blue)\n .frame(width: 150, height: 150)\n \n RingProgress(progress: $progress, lineWidth: 12, startAngle: .degrees(90), color: .red)\n .frame(width: 80, height: 80)\n }\n \n HStack(spacing: 50) {\n RingProgress(progress: $progress, lineWidth: 16, startAngle: .degrees(90), colors: [.blue, .green])\n .frame(width: 150, height: 150)\n \n RingProgress(progress: $progress, lineWidth: 8, startAngle: .degrees(90), colors: [.red, .green])\n .frame(width: 50, height: 50)\n }\n }\n}\n```\n\n\u003cimg src=\"https://github.com/user-attachments/assets/34af9314-f8e4-4695-ab76-a433d116b9f7\" width=\"220\"\u003e\n\nThis view displays a circular progress indicator that fills up based on the current `progress`. The progress circle can be customized with different `lineWidth`, `startAngle`, `colors`, and a `backgroundColor`.\n\nSize:\n- Frame Size: Adjust the view's frame size with `.frame(width:height:)` modifier to fit various UI spaces.\n\n[Back to Top](#components)\n\n## ArcProgress:\n\nA customizable circular progress bar for SwiftUI, unique for its adjustable trim and rotation.\n\n```swift\nArcProgress(progress: $progress, lineWidth: 16, color: .orange)\n```\n\nParameters:\n- `progress`: A binding to a `CGFloat` that represents the current progress (from 0.0 to 1.0).\n- `lineWidth`: The thickness of the progress bar's line.\n- `color`: The color of the bar's tint.\n- `colors`: An array of `Color` to create a gradient for the progress bar (used when more than one color is desired).\n- `backgroundColor`: The color of the bar's background.\n\nYou can use either a single color or a gradient of colors for the progress bar.\n\nExample:\n\n```swift\n@State private var progress: CGFloat = 0.75\n\nvar body: some View {\n VStack(spacing: 50) {\n HStack(spacing: 50) {\n ArcProgress(progress: $progress, lineWidth: 16, color: .red)\n .frame(width: 150, height: 150)\n \n \n ArcProgress(progress: $progress, lineWidth: 10, color: .pink)\n .frame(width: 50, height: 50)\n }\n \n HStack(spacing: 50) {\n ArcProgress(progress: $progress, lineWidth: 16, colors: [.orange, .yellow, .purple])\n .frame(width: 150, height: 150)\n \n ArcProgress(progress: $progress, lineWidth: 10, colors: [.yellow, .blue])\n .frame(width: 100, height: 100)\n }\n }\n}\n```\n\n\u003cimg src=\"https://github.com/user-attachments/assets/aa098c14-1738-4c18-b706-50d8754b920c\" width=\"220\"\u003e\n\nThis view displays a circular progress indicator that fills up based on the current `progress`, but unlike traditional full-circle progress bars, this one fills up to 75% of the circle. The progress circle can be customized with different `lineWidth`, `colors`, and a `backgroundColor`.\n\nThe progress bar uniquely fills up to 75% of the circle and starts at a 135-degree angle.\n\nSize:\n- Frame Size: Adjust the view's frame size with `.frame(width:height:)` modifier to fit various UI spaces.\n\n[Back to Top](#components)\n\n## QRCode\n\n## QRGenerator\n\n`QRGeneratorView` is a SwiftUI view component that generates and displays a QR code from various input types.\n\n```swift\nQRGeneratorView(input: .url(URL(string: \"https://www.linkedin.com/in/jamesthang/\")!))\nQRGeneratorView(input: .string(\"CommonSwiftUI\"))\nQRGeneratorView(input: .data(Data(\"James Thang\".utf8)))\n```\n\n`QRGeneratorView` creates a QR code image based on the provided input, which can be a` String`, `URL`, or `Data`. It displays the generated QR code image or an error message if the QR code generation fails.\n\n\u003cimg src=\"https://github.com/user-attachments/assets/37a30266-bd24-4b01-99b5-c002a4941d81\" width=\"220\"\u003e\n\nParameters:\n- `input`: The data used to generate the QR code, specified by the [QRCodeInputType](#QRCodeInputType) enumeration.\n\n#### QRCodeInputType\n\nDefines the types of inputs that can be used to generate a QR code in `QRGeneratorView`.\n\nCases:\n- `string`: A simple string to be encoded into a QR code.\n- `url`: A URL object representing a web address.\n- `data`: Arbitrary data, such as binary encoded information.\n\nThis enumeration simplifies the process of selecting and processing different kinds of data to generate a QR code.\n\nThis component simplifies the process of QR code generation and display within SwiftUI views, handling different input types seamlessly.\n\nAdditionally, we provide the utility struct `QRCodeGenerator` for generating QR codes from various types of inputs.\n\nMethods:\n- `generateQRCode(from string: String)`: Generates a QR code image from a string.\n- `generateQRCode(from url: URL)`: Generates a QR code image from a URL.\n- `generateQRCode(from data: Data)`: Generates a QR code image directly from binary data.\n\nThe resulting image is an optional `UIImage`, which will be nil if the QR code cannot be generated.\n\n```swift\nlet qrImage1 = QRCodeGenerator.generateQRCode(from: \"https://github.com/Enryun/Common_SwiftUI\")\nlet qrImage2 = QRCodeGenerator.generateQRCode(from: URL(string: \"https://www.linkedin.com/in/jamesthang/\")!)\n```\n\n[Back to Top](#components)\n\n## QRScanner\n\nA robust QR code scanner view for SwiftUI, providing interactive scanning capabilities.\n\n```swift\nQRScannerView(isScanning: $isScanning) { result in\n switch result {\n case .success(let code):\n print(\"Scanned code: \\(code)\")\n case .failure(let error):\n print(\"Scanning failed: (error.localizedDescription)\")\n }\n}\n```\n\nParameters:\n- `isScanning`: A binding to control the scanning process.\n- `showScanningAnimation`: A Boolean value that determines whether to show a scanning animation.\n- `showErrorAlert`: A Boolean value that determines whether to show an alert on scanning errors.\n- `completion`: A closure executed with the scanning result, returning a `String` on success or an `Error` on failure.\n\n`QRScannerView` integrates camera functionality to scan QR codes and handle the results dynamically through a completion handler. It supports customization of scanning animation and error handling.\n\n```swift\n@State var isScanning: Bool = false\n@State var successResult: String = \"\"\n\nvar body: some View {\n VStack(spacing: 20) {\n Text(successResult)\n .font(.title)\n .fontWeight(.semibold)\n \n QRScannerView(isScanning: $isScanning, showScanningAnimation: true, showErrorAlert: false) { result in\n switch result {\n case .success(let result):\n successResult = result\n case .failure(let error):\n print(\"This is Error Cases\")\n print(error)\n print(error.localizedDescription)\n }\n }\n \n Button(\"Start Scanning\") {\n successResult = \"\"\n isScanning = true\n }\n \n Button(\"Stop Scanning\") {\n successResult = \"\"\n isScanning = false\n }\n }\n}\n```\n\nhttps://github.com/user-attachments/assets/5d320f81-59a1-4581-99dd-b3efb1566532\n\nThis component is designed to provide a seamless integration of QR scanning functionality within your SwiftUI applications, enhancing user interaction and data capture capabilities.\n\n[Back to Top](#components)\n\n## SegmentControl\n\nA customizable segment control view in SwiftUI.\n\n```swift\nSegmentControl(tabs: SegmentedTab.allCases, activeTab: $activeTab, height: 40, activeTint: .primary, inActiveTint: .gray.opacity(0.5), indicatorConfiguration: .init(tint: .blue, cornerRadius: 0, style: .bottom)) { item in\n HStack {\n Image(systemName: item.imageName)\n Text(item.rawValue)\n }\n .font(.title3)\n}\n```\n\nParameters:\n- `tabs`: An array of `Item`, representing each segment option. Required to conform to `Hashable`.\n- `activeTab`: A binding to the currently active segment.\n- `height`: The height of the segment control.\n- `activeTint`: Color for the active segment.\n- `inActiveTint`: Color for inactive segments.\n- `indicatorConfiguration`: Configuration for the segment indicator, including color and corner radius.\n- `displayItem`: A closure that provides a view for displaying each segment option.\n\n`SegmentControl` provides a customizable segmented control interface, allowing for the selection among multiple options. It features customizable active/inactive tint colors, an adjustable height, and a dynamic or static indicator for the active tab. Additionally, it offers a configuration for the indicator's appearance and position based on the selected segment.\n\nExample:\n\n```swift\nenum SegmentedTab: String, CaseIterable {\n case home = \"Home\"\n case favorite = \"Love\"\n case profile = \"Profile\"\n\n var imageName: String {\n switch self {\n case .home:\n return \"house.fill\"\n case .favorite:\n return \"heart.fill\"\n case .profile:\n return \"person.crop.circle\"\n }\n }\n}\n\n@State private var activeTab: SegmentedTab = .home\n@State private var activeTab2: SegmentedTab = .home\n@State private var activeTab3: SegmentedTab = .home\n\nvar body: some View {\n VStack(spacing: 25) {\n SegmentControl(tabs: SegmentedTab.allCases, activeTab: $activeTab, height: 40, activeTint: .primary, inActiveTint: .gray.opacity(0.5), indicatorConfiguration: .init(tint: .blue, cornerRadius: 0, style: .bottom)) { item in\n HStack {\n Image(systemName: item.imageName)\n Text(item.rawValue)\n }\n .font(.title3)\n }\n \n SegmentControl(tabs: SegmentedTab.allCases, activeTab: $activeTab2, height: 40, activeTint: .primary, inActiveTint: .gray.opacity(0.5), indicatorConfiguration: .init(tint: .orange, cornerRadius: 4, style: .background)) { item in\n HStack {\n Image(systemName: item.imageName)\n \n Text(item.rawValue)\n }\n .font(.title3)\n }\n \n SegmentControl(tabs: SegmentedTab.allCases, activeTab: $activeTab3, height: 40, activeTint: .primary, inActiveTint: .gray.opacity(0.5), indicatorConfiguration: .init(tint: .yellow, cornerRadius: 20, style: .background)) { item in\n HStack {\n Image(systemName: item.imageName)\n \n Text(item.rawValue)\n }\n .font(.title3)\n }\n }\n .padding()\n}\n```\n\nhttps://github.com/user-attachments/assets/6ac4766d-f27f-4885-9b95-927cf67d30cf\n\nThis example demonstrates a `SegmentControl` with custom tab items, including icons and text, showcasing how to integrate it into a SwiftUI view.\n\n[Back to Top](#components)\n\n## Slider\n\n## RangeSlider:\n\nA customizable range slider view in SwiftUI.\n\n```swift\nRangeSlider(\n selection: $selection,\n range: 10...100,\n minimumDistance: 10,\n lineWidth: 15,\n tint: .red,\n controlConfig: .init(width: 20, enableShadow: true)\n)\n.frame(height: 100)\n```\n\nParameters:\n- `selection`: A binding to the selected range of values.\n- `range`: The total range from which values can be selected.\n- `minimumDistance`: The minimum allowable distance between the two thumbs.\n- `lineWidth`: The thickness of the slider's active range.\n- `tint`: The color of the slider's active range and thumbs.\n- `backgroundColor`: The color of the slider's track.\n- `controlConfig`: [ControlConfig](#rangesliderconfiguration) is the configuration for the control's appearance including thumb tint, width, and shadow of `RangeSlider`.\n\nAllows users to select a closed range of values using two draggable thumbs. This component is highly customizable with options for defining the range limits, thumb spacing, and appearance.\n\n#### RangeSliderConfiguration:\n\n`ControlConfig` provides customizable settings for UI controls of `RangeSlider`.\n\nParameters:\n- `tint`: The color used for the control. Defaults to `.white`.\n- `width`: The width of the control in points. This could affect the size of the control or its border depending on how it's used.\n- `enableShadow`: Determines whether a shadow is applied to the control. Defaults to `true`.\n\nThis structure configures the appearance and behavior of the slider controls in `RangeSlider`, including the color, width, and shadow of the slider handles.\n\nExample:\n\n```swift\n@State private var selection: ClosedRange\u003cCGFloat\u003e = 60...90\n@State private var selection2: ClosedRange\u003cCGFloat\u003e = 10...50\n\nvar body: some View {\n VStack(spacing: 50) {\n RangeSlider(\n selection: $selection,\n range: 10...100,\n minimumDistance: 10,\n lineWidth: 15,\n tint: .red,\n controlConfig: .init(width: 20, enableShadow: true)\n )\n .frame(height: 100)\n \n Text(\"\\(Int(selection.lowerBound)):\\(Int(selection.upperBound))\")\n .font(.largeTitle.bold())\n .padding(.top, 10)\n \n RangeSlider(\n selection: $selection2,\n range: 0...100,\n minimumDistance: 1,\n lineWidth: 8,\n tint: .green,\n controlConfig: .init(width: 12, enableShadow: true)\n )\n .frame(height: 100)\n \n Text(\"\\(Int(selection2.lowerBound)):\\(Int(selection2.upperBound))\")\n .font(.largeTitle.bold())\n .padding(.top, 10)\n }\n}\n```\n\nhttps://github.com/user-attachments/assets/1da84ea4-53cc-4565-a63e-8fb03e7b1836\n\nThis setup demonstrates configuring a `RangeSlider`, displaying the selected value range with customized control appearance.\n\n[Back to Top](#components)\n\n## RingSlider:\n\nA customizable ring-shaped slider view for selecting angular ranges.\n\n```swift\nRingSlider(\n startAngle: $startAngle,\n toAngle: $endAngle,\n lineWidth: 40,\n tint: .purple,\n controlConfig: .init(\n width: 40,\n startSliderImage: Image(systemName: \"moon.fill\"),\n endSliderImage: Image(systemName: \"alarm\")\n )\n)\n.frame(width: 300, height: 300)\n```\n\nParameters:\n- `startAngle`: The starting angle of the slider, modifiable via a binding.\n- `toAngle`: The ending angle of the slider, modifiable via a binding.\n- `lineWidth`: The thickness of the ring's line.\n- `tint`: The primary color of the slider's line and handle if not using images.\n- `backgroundColor`: The color behind the slider's line for contrast.\n- `controlConfig`: [ControlConfig](#ringsliderconfiguration) is the configuration for the slider's handles, including color, width, images, and shadow of `RingSlider`.\n\n`RingSlider` provides a visual and interactive way to select a range of angles using draggable handles that can be customized with images or styled directly via a `ControlConfig`. The appearance of the slider, including line width, colors, and handle customization, is adjustable.\n\n#### RingSliderConfiguration:\n\n`ControlConfig` provides customizable settings for UI controls of `RingSlider`.\n\nParameters:\n- `tint`: The color used for the slider control's tint, defaulting to `.white`.\n- `width`: The thickness or size of the slider handles in points.\n- `startSliderImage`: An optional image for the slider's starting handle.\n- `endSliderImage`: An optional image for the slider's ending handle.\n- `enableShadow`: A Boolean value that determines whether a shadow is applied to the slider handles, defaulting to `true`.\n\nThis structure configures the appearance and behavior of the slider controls in `RingSlider`, including optional images for slider handles and shadow effects.\n\nExample:\n\n```swift\n@State var startAngle: Angle = .degrees(50)\n@State var endAngle: Angle = .degrees(90)\n\nvar body: some View {\n VStack(spacing: 50) {\n RingSlider(\n startAngle: $startAngle,\n toAngle: $endAngle,\n lineWidth: 40,\n tint: .purple,\n controlConfig: .init(width: 40, startSliderImage: Image(systemName: \"moon.fill\"),\n endSliderImage: Image(systemName: \"alarm\"))\n )\n .frame(width: 300, height: 300)\n \n Text(\"Start Angle: \\(Int(startAngle.degrees)) - End Angle: \\(Int(endAngle.degrees))\")\n }\n}\n```\n\nhttps://github.com/user-attachments/assets/e87cc06d-2877-4b49-88e8-b45165117e48\n\nThis configuration leverages the `ControlConfig` to apply custom images for the handles and additional styling options, enhancing the user interaction experience.\n\n[Back to Top](#components)\n\n## Text\n\n## CircularText:\n\nA SwiftUI view that arranges text in a circular path with enhanced customization.\n\n```swift\nCircularText(text: \"#OPENTOWORK\", radius: 150, spacing: 8, alignment: .outside, reverseStyle: false)\n .font(.largeTitle.bold())\n .lineSpacing(5)\n```\n\nParameters:\n- `text`: The string of text to be displayed circularly.\n- `radius`: The radius of the circle along which the text is arranged.\n- `spacing`: The spacing between characters, defaulting to 4.\n- `alignment`: The position of the text relative to the circle's radius (`inside`, `center`, `outside`).\n- `reverseStyle`: If `true`, reverses the direction and orientation of the text.\n- `textModifier`: A closure that allows for custom styling of the text, applied per character.\n\n`CircularText` displays text along a specified radius, offering settings for alignment, character spacing, and style reversal. It utilizes a generic view modifier to apply custom styling to each character, making it versatile for various design needs.\n\nExample:\n\n```swift\nVStack(spacing: 40) {\n ZStack {\n Circle()\n .fill(.gray.opacity(0.3))\n \n CircularText(text: \"#OPENTOWORK\", radius: 150, spacing: 8, alignment: .outside, reverseStyle: false)\n .font(.largeTitle.bold())\n .lineSpacing(5)\n }\n .frame(width: 300, height: 300)\n \n ZStack {\n Circle()\n .fill(.gray.opacity(0.3))\n \n CircularText(text: \"#OPENTOWORK\", radius: 150, spacing: 8, alignment: .inside, reverseStyle: true, textModifier: { text in\n text.font(.largeTitle.bold())\n .lineSpacing(5)\n })\n .rotationEffect(.degrees(-140))\n }\n .frame(width: 300, height: 300)\n}\n```\n\n\u003cimg src=\"https://github.com/user-attachments/assets/556ebe60-acb5-440a-a69a-7d6b5ebe987e\" width=\"220\"\u003e\n\nThis view is perfect for creating visually compelling text effects such as circular labels or decorative text in a SwiftUI application.\n\n[Back to Top](#components)\n\n## HackerText:\n\nProvides an animated text effect that mimics hacking by changing characters randomly before revealing the final text.\n\n```swift\nHackerText(\n text: text,\n trigger: trigger,\n transition: .hyper,\n speed: .custom(0.06)\n)\n.font(.largeTitle.bold())\n.lineLimit(2)\n```\n\nParameters:\n- `text`: The final text to display after animation.\n- `trigger`: A Boolean that starts the animation when toggled.\n- `transition`: The style of animation — either `hyper` for all hacker style or `numeric` for wheeling style only.\n- `duration`: Total animation duration.\n- `speed`: Time interval for character changes. This uses the shared type [Speed](#speed).\n\nExample:\n\n```swift\n@State private var trigger: Bool = false\n@State private var text = \"Common SwiftUI\"\n\nvar body: some View {\n VStack(alignment: .leading, spacing: 30) {\n HackerText(\n text: text,\n trigger: trigger,\n transition: .hyper,\n speed: .custom(0.06)\n )\n .font(.largeTitle.bold())\n .lineLimit(2)\n \n HackerText(\n text: text,\n trigger: trigger,\n transition: .numeric,\n speed: .custom(0.06)\n )\n .font(.largeTitle.bold())\n .lineLimit(2)\n \n Button(action: {\n if text == \"Common SwiftUI\" {\n text = \"Made with SwiftUI\\nBy James Thang\"\n } else {\n text = \"Common SwiftUI\"\n }\n trigger.toggle()\n }, label: {\n Text(\"Trigger\")\n .fontWeight(.semibold)\n \n })\n .buttonStyle(.borderedProminent)\n .frame(maxWidth: .infinity)\n }\n .padding(15)\n .frame(maxWidth: .infinity, alignment: .leading)\n}\n```\n\nhttps://github.com/user-attachments/assets/5c0f3ebb-e8e5-41f4-8a30-20ad7bceab9c\n\nThis view is particularly effective for creating engaging and eye-catching textual displays in apps that require a dramatic presentation.\n\n[Back to Top](#components)\n\n## TypeWriterText:\n\nA SwiftUI view that simulates a typewriter effect for displaying text.\n\n```swift\nTypeWriterText(text: \"James Thang\", font: .title, fontWeight: .regular)\n```\n\nParameters:\n- `text`: The text to display using the typewriter effect.\n- `font`: The font style of the text. Default is `.caption`.\n- `fontWeight`: The weight of the font. Default is `.medium`.\n- `color`: The color of the text. Default is `.primary`.\n- `alignment`: The alignment of the text within its container. Default is `.center`.\n- `speed`: The speed at which characters are displayed. This uses the shared type [Speed](#speed). Default is `.flash`.\n\nThis view gradually displays characters of a string, mimicking the typing effect seen in a typewriter. Customization options include font, weight, color, alignment, and the speed of typing. The speed of typing can be one of the predefined speeds or a custom duration specified in seconds.\n\nExample:\n\n```swift\nVStack(spacing: 16){\n TypeWriterText(text: \"James Thang\", font: .title, fontWeight: .regular)\n\n TypeWriterText(text: \"iOS Developer | Author | Builder | Writer | Dreamer\", font: .title2)\n\n TypeWriterText(text: \"My journey through the tech world is a testament to the idea that anyone can follow their passion and acquire new skills. While my educational background lies in Finance and Economics, I felt a compelling drive to explore the dynamic realm of Apps development. The potentials of it that anyone in this modern world now have a smartphone with them and spend most of their daily time on it. With dedication and self-education, I transitioned into a seasoned iOS developer and then a professional one, accumulating over 3 years of valuable industry experience.\", speed: .flash)\n}\n```\n\nhttps://github.com/user-attachments/assets/824d41a8-1e3d-4c07-9607-c669073a7ab1\n\nThis view is ideal for scenarios where text needs to be presented in a dramatic, engaging manner.\n\n[Back to Top](#components)\n\n## TextField\n\n## LimitedTextField:\n\nA SwiftUI view that provides a text field with a character limit and visual feedback on input progress.\n\n```swift\nLimitedTextField(\n config: .init(\n limit: 40,\n tint: .secondary,\n autoResizes: true,\n allowExcessTyping: false\n ),\n hint: \"Type here\",\n value: $text\n)\n.frame(maxHeight: 150)\n```\n\nParameters:\n- `config`: [Config](#limitedtextfieldconfiguration) is the configuration settings including character limit, tint, resizing behavior, and typing overflow control. Details below.\n- `hint`: Placeholder text displayed when the text field is empty.\n- `value`: A binding to the text inputted by the user.\n\n`LimitedTextField` offers a customizable text input field that restricts the number of characters based on a specified limit. It features visual indicators such as a progress ring or text counter and can be styled with custom colors and borders.\n\n#### LimitedTextFieldConfiguration:\n\nManages the main settings for the text field.\n\n```swift\n.init(limit: 40, tint: .secondary, autoResizes: true, allowExcessTyping: false)\n```\n\nParameters:\n- `limit`: The maximum number of characters.\n- `tint`: The color of the text and progress indicators.\n- `autoResizes`: Whether the text field should automatically resize to fit content.\n- `allowExcessTyping`: Allows input beyond the limit without saving excess characters.\n- `progressConfig`: [ProgressConfig](#progressconfig) is settings for the progress indicators.\n- `borderConfig`: [BorderConfig](#borderconfig) is the styling options for the border.\n\n#### ProgressConfig: \n\nConfigures visual feedback on typing progress.\n\nParameters:\n- `showsRing`: Displays a circular progress ring.\n- `showsText`: Shows current and maximum character counts.\n- `alignment`: Aligns the progress text indicator.\n\n#### BorderConfig: \n\nCustomizes the border appearance.\n\nParameters:\n- `show`: Enables or disables the border.\n- `radius`: Sets the border radius.\n- `width`: Defines the border thickness.\n\nExample:\n\n```swift\n@State private var text: String = \"\"\n\nvar body: some View {\n LimitedTextField(\n config: .init(\n limit: 40,\n tint: .secondary,\n autoResizes: true,\n allowExcessTyping: false\n ),\n hint: \"Type here\",\n value: $text\n )\n .frame(height: 150)\n}\n```\n\nhttps://github.com/user-attachments/assets/aa287e0d-11e1-4af8-bb47-ffd2e6ed3bc6\n\nThis component is ideal for forms, comments, or any user input that requires length constraints.\n\n[Back to Top](#components)\n\n## ValidationTextField:\n\nA SwiftUI view that provides a text field with extensive validation capabilities, including secure text entry.\n\n```swift\nValidationTextField(title: \"First Name\", text: $firstName, isValid: $isFormFirstNameValid)\n .autocorrectionDisabled()\n .focused($focus, equals: .firstName)\n .isMandatory(true)\n```\n\nParameters:\n- `title`: The label text for the text field.\n- `text`: A binding to the user input text.\n- `isValidBinding`: A binding reflecting the current validation state.\n- `isSecured`: Indicates if the text field should obscure text input.\n- `config`: Configuration for visual properties like border and validation message styles.\n\nModifiers:\n- `clearButtonHidden`: Controls visibility of the clear button.\n- `secureButtonHidden`: Controls visibility of the secure text toggle button.\n- `isMandatory`: Marks the field as required and provides a custom message if validation fails.\n- `onValidate`: Adds custom validation logic for the text field.\n- `onFormValidate`: Handles form-level validation by providing an array of validation results.\n\n`ValidationTextField` allows visual feedback and validation for user inputs, suitable for both standard and secure text fields. It supports environmental properties to customize behavior and appearance based on validation results.\n\nExample 1:\n\n```swift\nenum FocusableField {\n case firstName, lastName, address, password\n}\n\n@State private var firstName = \"\"\n@State private var lastName = \"\"\n@FocusState private var focus: FocusableField?\n@State private var isFormFirstNameValid = false\n@State private var isFormLastNameValid = false\n\nvar body: some View {\n VStack(spacing: 15) {\n ValidationTextField(title: \"First Name\", text: $firstName, isValid: $isFormFirstNameValid)\n .autocorrectionDisabled()\n .focused($focus, equals: .firstName)\n .isMandatory(true)\n \n \n ValidationTextField(title: \"Last Name\", text: $lastName, isValid: $isFormLastNameValid)\n .focused($focus, equals: .lastName)\n .isMandatory(true)\n \n Spacer()\n Button(\"Submit\") {\n ","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fenryun%2Fcommon_swiftui","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fenryun%2Fcommon_swiftui","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fenryun%2Fcommon_swiftui/lists"}