v1.5.1

Examples/DemosApp/DemosApp/ComponentsPreview/Helpers/PreviewPickers.swift

@@ -23,7 +23,7 @@ struct AutocapitalizationPicker: View {
   @Binding var selection: TextAutocapitalization
 
   var body: some View {
-    Picker("Autocapitalization", selection: $selection) {
+    Picker("Autocapitalization", selection: self.$selection) {
       Text("Never").tag(TextAutocapitalization.never)
       Text("Characters").tag(TextAutocapitalization.characters)
       Text("Words").tag(TextAutocapitalization.words)
@@ -36,7 +36,7 @@ struct AutocapitalizationPicker: View {
 
 struct BorderWidthPicker: View {
   @Binding var selection: BorderWidth
-  
+
   var body: some View {
     Picker("Border Width", selection: self.$selection) {
       Text("None").tag(BorderWidth.none)
@@ -47,6 +47,22 @@ struct BorderWidthPicker: View {
   }
 }
 
+struct ButtonStylePicker: View {
+  @Binding var selection: ComponentsKit.ButtonStyle
+
+  var body: some View {
+    Picker("Style", selection: $selection) {
+      Text("Filled").tag(ButtonStyle.filled)
+      Text("Plain").tag(ButtonStyle.plain)
+      Text("Light").tag(ButtonStyle.light)
+      Text("Minimal").tag(ButtonStyle.minimal)
+      Text("Bordered with small border").tag(ButtonStyle.bordered(.small))
+      Text("Bordered with medium border").tag(ButtonStyle.bordered(.medium))
+      Text("Bordered with large border").tag(ButtonStyle.bordered(.large))
+    }
+  }
+}
+
 // MARK: - ComponentColorPicker
 
 struct ComponentColorPicker: View {
@@ -203,13 +219,25 @@ struct CaptionFontPicker: View {
   }
 }
 
+struct InputStylePicker: View {
+  @Binding var selection: InputStyle
+
+  var body: some View {
+    Picker("Style", selection: self.$selection) {
+      Text("Light").tag(InputStyle.light)
+      Text("Bordered").tag(InputStyle.bordered)
+      Text("Faded").tag(InputStyle.faded)
+    }
+  }
+}
+
 // MARK: - KeyboardTypePicker
 
 struct KeyboardTypePicker: View {
   @Binding var selection: UIKeyboardType
 
   var body: some View {
-    Picker("Keyboard Type", selection: $selection) {
+    Picker("Keyboard Type", selection: self.$selection) {
       Text("Default").tag(UIKeyboardType.default)
       Text("asciiCapable").tag(UIKeyboardType.asciiCapable)
       Text("numbersAndPunctuation").tag(UIKeyboardType.numbersAndPunctuation)
@@ -260,7 +288,7 @@ struct SubmitTypePicker: View {
   @Binding var selection: SubmitType
 
   var body: some View {
-    Picker("Submit Type", selection: $selection) {
+    Picker("Submit Type", selection: self.$selection) {
       Text("done").tag(SubmitType.done)
       Text("go").tag(SubmitType.go)
       Text("join").tag(SubmitType.join)

Examples/DemosApp/DemosApp/ComponentsPreview/PreviewPages/AlertPreview.swift

@@ -115,14 +115,7 @@ struct AlertPreview: View {
       ComponentRadiusPicker(selection: buttonVM.cornerRadius) {
         Text("Custom: 20px").tag(ComponentRadius.custom(20))
       }
-      Picker("Style", selection: buttonVM.style) {
-        Text("Filled").tag(ButtonStyle.filled)
-        Text("Plain").tag(ButtonStyle.plain)
-        Text("Light").tag(ButtonStyle.light)
-        Text("Bordered with small border").tag(ButtonStyle.bordered(.small))
-        Text("Bordered with medium border").tag(ButtonStyle.bordered(.medium))
-        Text("Bordered with large border").tag(ButtonStyle.bordered(.large))
-      }
+      ButtonStylePicker(selection: buttonVM.style)
     }
   }
 

Examples/DemosApp/DemosApp/ComponentsPreview/PreviewPages/ButtonPreview.swift

@@ -3,10 +3,11 @@ import SwiftUI
 import UIKit
 
 struct ButtonPreview: View {
+  private static let title = "Button"
   @State private var model = ButtonVM {
-    $0.title = "Button"
+    $0.title = Self.title
   }
-
+  
   var body: some View {
     VStack {
       PreviewWrapper(title: "UIKit") {
@@ -19,21 +20,35 @@ struct ButtonPreview: View {
       Form {
         AnimationScalePicker(selection: self.$model.animationScale)
         ComponentOptionalColorPicker(selection: self.$model.color)
+        Picker("Content Spacing", selection: self.$model.contentSpacing) {
+          Text("4").tag(CGFloat(4))
+          Text("8").tag(CGFloat(8))
+          Text("12").tag(CGFloat(12))
+        }
         ComponentRadiusPicker(selection: self.$model.cornerRadius) {
           Text("Custom: 20px").tag(ComponentRadius.custom(20))
         }
-        ButtonFontPicker(selection: self.$model.font)
         Toggle("Enabled", isOn: self.$model.isEnabled)
+        ButtonFontPicker(selection: self.$model.font)
         Toggle("Full Width", isOn: self.$model.isFullWidth)
-        SizePicker(selection: self.$model.size)
-        Picker("Style", selection: self.$model.style) {
-          Text("Filled").tag(ButtonStyle.filled)
-          Text("Plain").tag(ButtonStyle.plain)
-          Text("Light").tag(ButtonStyle.light)
-          Text("Bordered with small border").tag(ButtonStyle.bordered(.small))
-          Text("Bordered with medium border").tag(ButtonStyle.bordered(.medium))
-          Text("Bordered with large border").tag(ButtonStyle.bordered(.large))
+        Picker("Image Location", selection: self.$model.imageLocation) {
+          Text("Leading").tag(ButtonVM.ImageLocation.leading)
+          Text("Trailing").tag(ButtonVM.ImageLocation.trailing)
+        }
+        Picker("Image Source", selection: self.$model.imageSrc) {
+          Text("SF Symbol").tag(ButtonVM.ImageSource.sfSymbol("camera.fill"))
+          Text("Local").tag(ButtonVM.ImageSource.local("avatar_placeholder"))
+          Text("None").tag(Optional<ButtonVM.ImageSource>.none)
         }
+        Toggle("Loading", isOn: self.$model.isLoading)
+        Toggle("Show Title", isOn: Binding<Bool>(
+          get: { !self.model.title.isEmpty },
+          set: { newValue in
+            self.model.title = newValue ? Self.title : ""
+          }
+        ))
+        SizePicker(selection: self.$model.size)
+        ButtonStylePicker(selection: self.$model.style)
       }
     }
   }

Examples/DemosApp/DemosApp/ComponentsPreview/PreviewPages/CardPreview.swift

@@ -15,14 +15,24 @@ struct CardPreview: View {
         SUCard(model: self.model, content: self.suCardContent)
       }
       Form {
+        AnimationScalePicker(selection: self.$model.animationScale)
         Picker("Background Color", selection: self.$model.backgroundColor) {
-          Text("Default").tag(Optional<UniversalColor>.none)
+          Text("Background").tag(UniversalColor.background)
           Text("Secondary Background").tag(UniversalColor.secondaryBackground)
           Text("Accent Background").tag(UniversalColor.accentBackground)
           Text("Success Background").tag(UniversalColor.successBackground)
           Text("Warning Background").tag(UniversalColor.warningBackground)
           Text("Danger Background").tag(UniversalColor.dangerBackground)
         }
+        Picker("Border Color", selection: self.$model.borderColor) {
+          Text("Divider").tag(UniversalColor.divider)
+          Text("Primary").tag(UniversalColor.primary)
+          Text("Accent").tag(UniversalColor.accent)
+          Text("Success").tag(UniversalColor.success)
+          Text("Warning").tag(UniversalColor.warning)
+          Text("Danger").tag(UniversalColor.danger)
+          Text("Custom").tag(UniversalColor.universal(.uiColor(.systemPurple)))
+        }
         BorderWidthPicker(selection: self.$model.borderWidth)
         Picker("Content Paddings", selection: self.$model.contentPaddings) {
           Text("12px").tag(Paddings(padding: 12))
@@ -39,6 +49,7 @@ struct CardPreview: View {
           Text("Large").tag(Shadow.large)
           Text("Custom").tag(Shadow.custom(20.0, .zero, UniversalColor.accentBackground))
         }
+        Toggle("Tappable", isOn: self.$model.isTappable)
       }
     }
   }

Examples/DemosApp/DemosApp/ComponentsPreview/PreviewPages/InputFieldPreview.swift

@@ -34,6 +34,15 @@ struct InputFieldPreview: View {
       Form {
         AutocapitalizationPicker(selection: self.$model.autocapitalization)
         Toggle("Autocorrection Enabled", isOn: self.$model.isAutocorrectionEnabled)
+        Toggle("Caption", isOn: .init(
+          get: {
+            return self.model.caption != nil
+          },
+          set: { newValue in
+            self.model.caption = newValue ? Self.caption : nil
+          }
+        ))
+        CaptionFontPicker(title: "Caption Font", selection: self.$model.captionFont)
         ComponentOptionalColorPicker(selection: self.$model.color)
         ComponentRadiusPicker(selection: self.$model.cornerRadius) {
           Text("Custom: 20px").tag(ComponentRadius.custom(20))
@@ -46,12 +55,13 @@ struct InputFieldPreview: View {
             return self.model.placeholder != nil
           },
           set: { newValue in
-            self.model.placeholder = newValue ? "Placeholder" : nil
+            self.model.placeholder = newValue ? Self.placeholder : nil
           }
         ))
         Toggle("Required", isOn: self.$model.isRequired)
         Toggle("Secure Input", isOn: self.$model.isSecureInput)
         SizePicker(selection: self.$model.size)
+        InputStylePicker(selection: self.$model.style)
         SubmitTypePicker(selection: self.$model.submitType)
         UniversalColorPicker(
           title: "Tint Color",
@@ -62,9 +72,14 @@ struct InputFieldPreview: View {
             return self.model.title != nil
           },
           set: { newValue in
-            self.model.title = newValue ? "Title" : nil
+            self.model.title = newValue ? Self.title : nil
           }
         ))
+        BodyFontPicker(title: "Title Font", selection: self.$model.titleFont)
+        Picker("Title Position", selection: self.$model.titlePosition) {
+          Text("Inside").tag(InputFieldVM.TitlePosition.inside)
+          Text("Outside").tag(InputFieldVM.TitlePosition.outside)
+        }
       }
     }
     .toolbar {
@@ -79,9 +94,14 @@ struct InputFieldPreview: View {
     }
   }
 
+  private static let title = "Email"
+  private static let placeholder = "Enter your email"
+  private static let caption = "Your email address will be used to send a verification code"
   private static var initialModel: InputFieldVM {
     return .init {
-      $0.title = "Title"
+      $0.title = Self.title
+      $0.placeholder = Self.placeholder
+      $0.caption = Self.caption
     }
   }
 }

Examples/DemosApp/DemosApp/ComponentsPreview/PreviewPages/TextInputPreview.swift

@@ -60,6 +60,7 @@ struct TextInputPreviewPreview: View {
           }
         ))
         SizePicker(selection: self.$model.size)
+        InputStylePicker(selection: self.$model.style)
         SubmitTypePicker(selection: self.$model.submitType)
         UniversalColorPicker(
           title: "Tint Color",

Sources/ComponentsKit/Components/Alert/UKAlertController.swift

@@ -143,11 +143,14 @@ public class UKAlertController: UKCenterModalController {
         self.buttonsStackView.removeArrangedSubview(self.secondaryButton)
         self.buttonsStackView.insertArrangedSubview(self.secondaryButton, at: 0)
         self.buttonsStackView.axis = .horizontal
+        self.buttonsStackView.distribution = .fillEqually
       case .vertical:
         self.buttonsStackView.axis = .vertical
+        self.buttonsStackView.distribution = .fillProportionally
       }
     } else {
       self.buttonsStackView.axis = .vertical
+      self.buttonsStackView.distribution = .fillProportionally
     }
   }
 }
@@ -173,7 +176,6 @@ extension UKAlertController {
     }
 
     static func buttonsStackView(_ stackView: UIStackView) {
-      stackView.distribution = .fillEqually
       stackView.spacing = AlertVM.buttonsSpacing
     }
   }

Sources/ComponentsKit/Components/Button/Models/ButtonImageLocation.swift

@@ -0,0 +1,11 @@
+import Foundation
+
+/// Specifies the position of the image relative to the button's title.
+extension ButtonVM {
+  public enum ImageLocation {
+    /// The image is displayed before the title.
+    case leading
+    /// The image is displayed after the title.
+    case trailing
+  }
+}

Sources/ComponentsKit/Components/Button/Models/ButtonImageSource.swift

@@ -0,0 +1,18 @@
+import Foundation
+
+/// Defines the image source options for a button.
+extension ButtonVM {
+  public enum ImageSource: Hashable {
+    /// An image loaded from a system SF Symbol.
+    ///
+    /// - Parameter name: The name of the SF Symbol.
+    case sfSymbol(String)
+
+    /// An image loaded from a local asset.
+    ///
+    /// - Parameters:
+    ///   - name: The name of the local image asset.
+    ///   - bundle: The bundle containing the image resource. Defaults to `nil` to use the main bundle.
+    case local(String, bundle: Bundle? = nil)
+  }
+}