Added a new component+documentation.

Author: aumChauhan

DOCUMENTATION.md

@@ -7,7 +7,7 @@
 <details>
 <summary>Date Picker</summary>
 
-# MUIDatePicker
+## `MUIDatePicker`
 
 The `MUIDatePicker` SwiftUI component provides a Material Design-style date picker with customizable appearance and behavior.
 
@@ -47,7 +47,7 @@ The date picker includes a formatted representation of the selected date. The `f
 <details>
 <summary>Time Picker</summary>
 
-# MUITimePicker
+## `MUITimePicker`
 
 The `MUITimePicker` SwiftUI component provides a Material Design-style time picker with customizable appearance and behavior.
 
@@ -84,7 +84,7 @@ This example demonstrates how to use the `MUITimePicker` in a SwiftUI view. The
 <details>
 <summary> TextField </summary>
 
-# MUITextField
+## `MUITextField`
 
 The `MUITextField` SwiftUI component provides a Material Design-style text field with customizable appearance and behavior.
 
@@ -137,7 +137,7 @@ struct ContentView: View {
 <details>
 <summary> SecureField </summary>
 
-# MUISecureField
+## `MUISecureField`
 
 The `MUISecureField` SwiftUI component provides a Material Design-style secure field with customizable appearance and behavior.
 
@@ -191,7 +191,7 @@ struct ContentView: View {
 <details>
 <summary> Button </summary>
 
-# MUIButton
+## `MUIButton`
 
 The `MUIButton` SwiftUI component provides a versatile button with various styles to suit different design needs.
 
@@ -235,7 +235,7 @@ MUIButton("Title", style: .elevated, action: {
 <details>
 <summary> Card </summary>
 
-# MUICardView
+## `MUICardView`
 
 The `MUICardView` SwiftUI component represents a MaterialUI style card.
 
@@ -300,7 +300,7 @@ MUICardView(
 <details>
 <summary> Checkbox </summary>
 
-# MUICheckbox
+## `MUICheckbox`
 
 `MUICheckbox` provides a checkbox with a clean and modern MaterialUI design. It allows users to toggle between the checked and unchecked states by tapping the checkbox.
 
@@ -327,7 +327,7 @@ MUICheckbox("Enable Feature", isOn: $isChecked)
 <details>
 <summary> Floating Button </summary>
 
-# MUIFloatingButton
+## `MUIFloatingButton`
 
 A SwiftUI button designed for floating action button (FAB) functionality with various initialization options. MUIIconButton provides the flexibility to create circular icon buttons with different styles, allowing you to choose from elevated, filled, tonal, or secondary background styles.
 
@@ -357,7 +357,7 @@ MUIFloatingButton(image: "customIcon", title: "Custom") {
 <details>
 <summary> Icon Button </summary>
 
-# MUIIconButton
+## `MUIIconButton`
 
 `MUIIconButton` provides the flexibility to create circular icon buttons with different styles, allowing you to choose from elevated, filled, tonal, or secondary background styles.
 
@@ -390,7 +390,7 @@ MUIIconButton("customImage", style: .filled) {
 <details>
 <summary> Switch </summary>
 
-# MUISwitch
+## `MUISwitch`
 
 `MUISwitch` is a SwiftUI view representing a MaterialUI style switch.it provides a custom-styled switch with a MaterialUI design, offering a unique appearance for toggling between states.
 
@@ -418,8 +418,7 @@ MUISwitch("Enable Feature", isOn: $isEnabled)
 <details>
 <summary> Alerts </summary>
 
-
-# MUIAlert
+## `MUIAlert`
 
 `MUIAlert` provides a convenient way to present a MaterialUI style alert over the current view.
 
@@ -473,10 +472,53 @@ struct ContentView: View {
 
 </details>
 
+<details>
+<summary> Dialog Sheet </summary>
+
+## `MUIDialogSheet`
+
+`MUIAlert` provides a convenient way to present a MaterialUI style dialog sheet over the current view.
+
+`.mUIDialogSheet()` is an extension to the `View` protocol in SwiftUI, offering a modifier that can be applied to any view. This modifier presents a MaterialUI style dialog sheet.
+
+## Usage
+
+To use `MUIDialogSheet`, apply the `mUIDialogSheet` modifier to a SwiftUI view and provide the necessary parameters:
+
+## Parameters
+
+- `isPresented: Binding<Bool>`: Binding to control the presentation state of the dialog sheet.
+- `content: View`: A view content to be displayed in the dialog sheet.
+
+## Example
+
+```swift
+struct ContentView: View {
+    @State private var showDialogSheet = false
+
+    var body: some View {
+        VStack {
+            Button("Show Alert") {
+                showDialogSheet.toggle()
+            }
+        }
+        
+        // MUIDialogSheet
+        .mUIDialogSheet(isPresented: $showDialogSheet) {
+            Text("Dialog sheet content")
+        }
+}
+    }
+}
+```
+
+</details>
+
+
 <details>
 <summary> Snackbar </summary>
 
-# MUISnackbar
+## `MUISnackbar`
 `MUISnackbar` provides a customizable MaterialUI style snackbar that can be displayed at the bottom of the screen.
 
 `.mUISnackbar()` is an extension to the `View` protocol in SwiftUI, offering a modifier that can be applied to any view. This modifier presents a MaterialUI style snackbar with customizable parameters such as message, duration, and an optional primary action button.
@@ -526,7 +568,7 @@ struct ContentView: View {
 <details>
 <summary> List </summary>
 
-# MUIList
+## `MUIList`
 `MUIList` is a SwiftUI view that provides a MaterialUI-styled list with various visual styles. The `MUIList` view is designed to display a collection of elements with different visual styles such as plain, inset, or insetGrouped.
 
 ## Usage
@@ -558,7 +600,7 @@ struct ContentView: View {
 <details>
 <summary> Navigation View </summary>
 
-# MUINavigationView
+## `MUINavigationView`
 
 `MUINavigationView` is a custom navigation view that provides a MaterialUI-styled navigation bar.
 
@@ -610,7 +652,7 @@ MUINavigationLink(destination: {
 })
 ```
 
-## MUINavigationHeaderStyle
+## `MUINavigationHeaderStyle`
 
 `MUINavigationHeaderStyle` is an enumeration representing different styles for navigation bar headers.
 
@@ -622,7 +664,7 @@ MUINavigationLink(destination: {
 <details>
 <summary> Tab View</summary>
 
-# MUITabView
+## `MUITabView`
 
 The `MUITabView` SwiftUI component combines main content with a MaterialUI-style tab bar for easy navigation.
 
@@ -655,7 +697,7 @@ MUITabBarView(selection: $selection) {
 <details>
 <summary> Segmented Control </summary>
 
-# MUISegmentedControl
+## `MUISegmentedControl`
 
 The `MUISegmentedControl` SwiftUI component provides a segmented control with customizable appearance and behavior.
 
@@ -699,7 +741,7 @@ struct ContentView: View {
 <details>
 <summary> Divider </summary>
 
-# MUIDivider
+## `MUIDivider`
 
 The `MUIDivider` SwiftUI component represents a MaterialUI-style divider with customizable orientation.
 
@@ -738,7 +780,7 @@ struct ContentView: View {
 <details>
 <summary> Progress View </summary>
 
-# MUIProgressView
+## `MUIProgressView`
 
 The `MUIProgressView` SwiftUI component represents a MaterialUI-style progress view with customizable line width.
 
@@ -777,7 +819,7 @@ struct ContentView: View {
 <details>
 <summary> SearchBar </summary>
 
-# MUISearchBar
+## `MUISearchBar`
 
 The `MUISearchBar` SwiftUI component represents a MaterialUI-style search bar with a customizable placeholder and search text binding.
 

README.md

@@ -32,6 +32,9 @@ MaterialUIKit is a SwiftUI package offering a set of user interface components i
 ### Date Picker
 ![DatePicker](https://github.com/aumChauhan/MaterialUIKit/assets/83302656/ce23247f-4fa4-4c75-9841-8c062902adbc)
 
+### Dialog Sheet
+![Dialog Sheet](https://github.com/aumChauhan/MaterialUIKit/assets/83302656/9d65a7ff-1afc-4d55-bd30-d30491525020)
+
 ### Floating Button
 ![FAB](https://github.com/aumChauhan/MaterialUIKit/assets/83302656/fca45946-4c95-4d65-b834-054763e456ba)
 
@@ -75,7 +78,7 @@ MaterialUIKit is a SwiftUI package offering a set of user interface components i
 To integrate MaterialUIKit into your project, you can use `CocoaPods` or `Swift Package Manager`.
 
 <details>
-<summary> CocoaPods </summary>
+<summary> <strong> CocoaPods </strong> </summary>
                                             
 Add the following line to your Podfile:
 
@@ -88,7 +91,7 @@ Then run `pod install` to install the framework.
 </details>
 
 <details>
-<summary> Swift Package Manager </summary>
+<summary> <strong> Swift Package Manager </strong>  </summary>
 
 In Xcode, go to File -> Swift Packages -> Add Package Dependency and enter the repository URL:
 

Sources/MaterialUIKit/Components/Dialog And Alerts/MUIDialogSheet.swift

@@ -0,0 +1,107 @@
+//
+// MUIDialogSheet.swift
+// MaterialUIKit: https://github.com/aumChauhan/MaterialUIKit.git
+//
+// Author: Aum Chauhan
+// Created On: 24/01/24
+//
+
+import SwiftUI
+
+// MARK: - Extension View
+
+@available(iOS 15.0, *)
+extension View {
+    
+    /// Presents a MaterialUI style dialog sheet over the current view.
+    ///
+    /// - Parameters:
+    ///   - isPresented: Binding to control the presentation state of the dialog sheet.
+    ///   - content: A view content to be displayed in the dialog sheet.
+    public func mUIDialogSheet<Content: View>(isPresented: Binding<Bool>, _ content: () -> Content) -> some View {
+        self.modifier(
+            MUIDialogSheetModifer(isPresented: isPresented, dialogSheetContent: AnyView(content()))
+        )
+    }
+}
+
+// MARK: - MUIDialogSheetModifer
+
+/// A view modifier that adds the MaterialUI style dialog sheet  behavior to any view.
+@available(iOS 15.0, *)
+private struct MUIDialogSheetModifer: ViewModifier {
+    
+    // MARK: - Properties
+    
+    @Binding public var isPresented: Bool
+    public let dialogSheetContent: AnyView
+    
+    // MARK: - Body
+    
+    func body(content: Content) -> some View {
+        content.overlay(
+            MUIDialogSheetView(isPresented: $isPresented, content: dialogSheetContent)
+        )
+    }
+}
+
+// MARK: - MUIDialogSheetView
+
+/// A custom Material UI style dialog sheet that can be presented over other views.
+@available(iOS 15.0, *)
+private struct MUIDialogSheetView: View {
+    
+    // MARK: - Properties
+    
+    @Binding public var isPresented: Bool
+    @State private var animationFlag: Bool = false
+    
+    public let content: any View
+    
+    // MARK: Initializers
+    
+    public init(isPresented: Binding<Bool>, content: any View) {
+        self._isPresented = isPresented
+        self.content = content
+    }
+    
+    // MARK: - View Body
+    
+    var body: some View {
+        ZStack {
+            // Backgorund
+            Color.gray.opacity(0.0)
+                .frame(maxWidth: .infinity, maxHeight: .infinity)
+                .edgesIgnoringSafeArea(.all)
+            
+            VStack(alignment: .leading, spacing: 10) {
+                // Sheet dismiss button
+                HStack {
+                    Button {
+                        isPresented.toggle()
+                    } label: {
+                        Image(systemName: "xmark")
+                            .foregroundColor(MaterialUI.tint.secondaryTitle())
+                    }
+                    
+                    Spacer()
+                }
+                
+                AnyView(content)
+            }
+            .frame(width: UIScreen.main.bounds.width/1.3)
+            .padding(20)
+            .background(MaterialUI.tint.iconColor())
+            .cornerRadius(25)
+            .shadow(color: .black.opacity(0.1), radius: 10, x: 0, y: 1)
+        }
+        // In-Out animation
+        .scaleEffect(animationFlag ? 1 : 0)
+        .opacity(animationFlag ? 1 : 0)
+        .onChangeWithFallback(of: isPresented) { oldValue, newValue in
+            withAnimation(.bouncy) {
+                animationFlag = isPresented
+            }
+        }
+    }
+}