Make progress on the components

Sources/HTMLKitComponents/Actions/SubmitAction.swift

@@ -4,19 +4,19 @@ public struct SubmitAction: Action {
 
     public func validate(_ target: String, _ validators: [Validator]) -> SubmitAction {
 
-        var newSelf = self
+        var copy = self
 
         if !validators.isEmpty {
 
             let result = validators.map { "{\"field\":\"\($0.field)\",\"rule\":\"\($0.rule)\"}" }
 
-            newSelf.actions.append("$('#\(target.escape())').validate('[\(result.joined(separator: ","))]');")
+            copy.actions.append("$('#\(target.escape())').validate('[\(result.joined(separator: ","))]');")
 
-            return newSelf
+            return copy
         }
 
-        newSelf.actions.append("$('#\(target.escape())').validate('[]');")
+        copy.actions.append("$('#\(target.escape())').validate('[]');")
 
-        return newSelf
+        return copy
     }
 }

Sources/HTMLKitComponents/Actions/ViewAction.swift

@@ -9,10 +9,10 @@ public struct ViewAction: Action {
     /// - Returns: The action
     public func show(_ target: String) -> ViewAction {
 
-        var newSelf = self
-        newSelf.actions.append("$('#\(target.escape())').show();")
+        var copy = self
+        copy.actions.append("$('#\(target.escape())').show();")
 
-        return newSelf
+        return copy
     }
 
     /// Hide a target based on a event.
@@ -22,10 +22,10 @@ public struct ViewAction: Action {
     /// - Returns: The action
     public func hide(_ target: String) -> ViewAction {
 
-        var newSelf = self
-        newSelf.actions.append("$('#\(target.escape())').hide();")
+        var copy = self
+        copy.actions.append("$('#\(target.escape())').hide();")
 
-        return newSelf
+        return copy
     }
 
     /// Play an animation based on a event.
@@ -35,10 +35,10 @@ public struct ViewAction: Action {
     /// - Returns: The action
     public func animate(_ target: String) -> ViewAction {
 
-        var newSelf = self
-        newSelf.actions.append("$('#\(target.escape())').animate();")
+        var copy = self
+        copy.actions.append("$('#\(target.escape())').animate();")
 
-        return newSelf
+        return copy
     }
 
     /// Open a target based on a event.
@@ -48,10 +48,10 @@ public struct ViewAction: Action {
     /// - Returns: The action
     public func open(_ target: String) -> ViewAction {
 
-        var newSelf = self
-        newSelf.actions.append("$('#\(target.escape())').open();")
+        var copy = self
+        copy.actions.append("$('#\(target.escape())').open();")
 
-        return newSelf
+        return copy
     }
 
     /// Close a target based on a event.
@@ -61,9 +61,9 @@ public struct ViewAction: Action {
     /// - Returns: The action
     public func close(_ target: String) -> ViewAction {
 
-        var newSelf = self
-        newSelf.actions.append("$('#\(target.escape())').close();")
+        var copy = self
+        copy.actions.append("$('#\(target.escape())').close();")
 
-        return newSelf
+        return copy
     }
 }

Sources/HTMLKitComponents/Components/Alert.swift

@@ -15,7 +15,7 @@ public struct Alert: View, Identifiable, Modifiable {
     internal var id: String?
 
     /// The body content of the alert
-    internal var content: [Content]
+    internal let content: [Content]
 
     /// The class names for the alert.
     internal var classes: [String]
@@ -89,7 +89,7 @@ extension Alert: ViewModifier {
     }
 
     public func frame(width: Tokens.ViewWidth, height: Tokens.ViewHeight?, alignment: Tokens.FrameAlignment?) -> Alert {
-        return mutate(frame: width.value, height: height?.value, alignment: alignment?.value)
+        return self.mutate(frame: width.value, height: height?.value, alignment: alignment?.value)
     }
 
     public func margin(insets: EdgeSet, length: Tokens.MarginLength) -> Alert {

Sources/HTMLKitComponents/Components/BarMark.swift

@@ -15,10 +15,10 @@ import HTMLKit
 public struct BarMark: View, Modifiable {
 
     /// The value of the mark.
-    internal var value: Int
+    internal let value: Int
 
     /// The title of the mark.
-    internal var label: String
+    internal let label: String
 
     /// The class names of the bar mark.
     internal var classes: [String]
@@ -54,6 +54,6 @@ public struct BarMark: View, Modifiable {
     ///
     /// - Returns: The mark
     public func foregroundColor(_ color: Tokens.ForegroundColor) -> BarMark {
-        return self.mutate(class: "foreground:\(color.value)")
+        return self.mutate(classes: "foreground:\(color.value)")
     }
 }

Sources/HTMLKitComponents/Components/Button.swift

@@ -16,10 +16,10 @@ public struct Button: View, Modifiable, Actionable {
     internal var id: String?
 
     /// The role of the button.
-    internal var role: HTMLKit.Values.Button
+    internal let role: HTMLKit.Values.Button
 
     /// The body content of the button.
-    internal var content: [Content]
+    internal let content: [Content]
 
     /// The class names for the button.
     internal var classes: [String]
@@ -156,7 +156,7 @@ extension Button: ViewModifier {
     }
 
     public func frame(width: Tokens.ViewWidth, height: Tokens.ViewHeight? = nil, alignment: Tokens.FrameAlignment? = nil) -> Button {
-        return mutate(frame: width.value, height: height?.value, alignment: alignment?.value)
+        return self.mutate(frame: width.value, height: height?.value, alignment: alignment?.value)
     }
 
     public func margin(insets: EdgeSet, length: Tokens.MarginLength = .small) -> Button {

Sources/HTMLKitComponents/Components/Card.swift

@@ -19,10 +19,10 @@ public struct Card: View, Modifiable, Identifiable {
     internal var id: String?
 
     /// The header content of the card.
-    internal var header: [Content]?
+    internal let header: [Content]?
 
     /// The body content of the card.
-    internal var content: [Content]
+    internal let content: [Content]
 
     /// The class names for the card.
     internal var classes: [String]
@@ -32,6 +32,7 @@ public struct Card: View, Modifiable, Identifiable {
     /// - Parameter content: The card's content
     public init(@ContentBuilder<Content> content: () -> [Content]) {
 
+        self.header = nil
         self.content = content()
         self.classes = ["card"]
     }
@@ -125,7 +126,7 @@ extension Card: ViewModifier {
     }
 
     public func frame(width: Tokens.ViewWidth, height: Tokens.ViewHeight? = nil, alignment: Tokens.FrameAlignment? = nil) -> Card {
-        return mutate(frame: width.value, height: height?.value, alignment: alignment?.value)
+        return self.mutate(frame: width.value, height: height?.value, alignment: alignment?.value)
     }
 
     public func margin(insets: EdgeSet = .all, length: Tokens.MarginLength = .small) -> Card {

Sources/HTMLKitComponents/Components/Carousel.swift

@@ -115,7 +115,7 @@ extension Carousel: ViewModifier {
     }
 
     public func frame(width: Tokens.ViewWidth, height: Tokens.ViewHeight? = nil, alignment: Tokens.FrameAlignment? = nil) -> Carousel {
-        return mutate(frame: width.value, height: height?.value, alignment: alignment?.value)
+        return self.mutate(frame: width.value, height: height?.value, alignment: alignment?.value)
     }
 
     public func margin(insets: EdgeSet = .all, length: Tokens.MarginLength = .small) -> Carousel {

Sources/HTMLKitComponents/Components/Chart.swift

@@ -43,6 +43,6 @@ public struct Chart: View, Modifiable {
     ///
     /// - Returns: The chart
     public func innerRadius(_ color: Tokens.InnerRadius) -> Chart {
-        return self.mutate(class: "radius:\(color.value)")
+        return self.mutate(classes: "radius:\(color.value)")
     }
 }

Sources/HTMLKitComponents/Components/CheckField.swift

@@ -27,7 +27,7 @@ public struct CheckField: View, Modifiable, Selectable, Identifiable {
     internal var isSelected: Bool
 
     /// The body content of the field.
-    internal var content: Content
+    internal let content: Content
 
     /// The class names for the field.
     internal var classes: [String]
@@ -147,7 +147,7 @@ extension CheckField: ViewModifier {
     }
 
     public func frame(width: Tokens.ViewWidth, height: Tokens.ViewHeight? = nil, alignment: Tokens.FrameAlignment? = nil) -> CheckField {
-        return mutate(frame: width.value, height: height?.value, alignment: alignment?.value)
+        return self.mutate(frame: width.value, height: height?.value, alignment: alignment?.value)
     }
 
     public func margin(insets: EdgeSet = .all, length: Tokens.MarginLength = .small) -> CheckField {

Sources/HTMLKitComponents/Components/DatePicker.swift

@@ -2,10 +2,10 @@ import HTMLKit
 
 /// A view that represents a date picker.
 ///
-/// Use `DatePicker` to pick a date from a calendar
+/// Use `DatePicker` to pick a date from a calendar.
 ///
 /// ```swift
-/// DatePicker(name: "lorem")
+/// DatePicker(name: "lorem", prompt: "Lorem ipsum", value: "Lorem ipsum")
 /// ```
 public struct DatePicker: View, Modifiable, Identifiable {
 
@@ -15,6 +15,9 @@ public struct DatePicker: View, Modifiable, Identifiable {
     /// The name of the picker.
     internal let name: String
 
+    /// The content hint for the field.
+    internal let prompt: PromptType?
+
     /// The content of the picker.
     internal let value: String?
 
@@ -25,13 +28,30 @@ public struct DatePicker: View, Modifiable, Identifiable {
     internal var events: [String]?
 
     /// Create a date picker.
-    ///
+    /// 
+    /// - Parameters:
+    ///   - name: The name to assign to the field.
+    ///   - prompt: The prompt to guide the user.
+    ///   - value: The date to edit within the field.
+    @_disfavoredOverload
+    public init(name: String, prompt: String? = nil, value: String? = nil) {
+
+        self.name = name
+        self.prompt = prompt.map(PromptType.string(_:))
+        self.value = value
+        self.classes = ["datepicker"]
+    }
+
+    /// Create a date picker.
+    /// 
     /// - Parameters:
     ///   - name: The name to assign to the field.
+    ///   - prompt: The prompt to guide the user.
     ///   - value: The date to edit within the field.
-    public init(name: String, value: String? = nil) {
+    public init(name: String, prompt: LocalizedStringKey? = nil, value: String? = nil) {
 
         self.name = name
+        self.prompt = prompt.map(PromptType.value(_:))
         self.value = value
         self.classes = ["datepicker"]
     }
@@ -45,6 +65,9 @@ public struct DatePicker: View, Modifiable, Identifiable {
                 .modify(unwrap: value) {
                     $0.value($1)
                 }
+                .modify(unwrap: prompt) {
+                    $0.placeholder($1)
+                }
             self.calendar
         }
         .class(classes.joined(separator: " "))
@@ -63,15 +86,15 @@ public struct DatePicker: View, Modifiable, Identifiable {
                             }
                             .points("10 2 4 8 10 14")
                         }
-                        .viewBox("0 0 16 16")
+                        .viewBox(x: 0, y: 0, width: 16, height: 16)
                         .namespace("http://www.w3.org/2000/svg")
                         .fill("currentColor")
                         .strokeWidth(2)
                         .strokeLineCap(.round)
                         .strokeLineJoin(.round)
                     }
                     .type(.button)
-                    .value("previous")
+                    .value(verbatim: "previous")
                 }
                 ListItem {
                     Bold {
@@ -85,15 +108,15 @@ public struct DatePicker: View, Modifiable, Identifiable {
                             }
                             .points("6 2 12 8 6 14")
                         }
-                        .viewBox("0 0 16 16")
+                        .viewBox(x: 0, y: 0, width: 16, height: 16)
                         .namespace("http://www.w3.org/2000/svg")
                         .fill("currentColor")
                         .strokeWidth(2)
                         .strokeLineCap(.round)
                         .strokeLineJoin(.round)
                     }
                     .type(.button)
-                    .value("next")
+                    .value(verbatim: "next")
                 }
             }
             .class("calendar-navigation")
@@ -185,7 +208,7 @@ extension DatePicker: ViewModifier {
     }
 
     public func frame(width: Tokens.ViewWidth, height: Tokens.ViewHeight? = nil, alignment: Tokens.FrameAlignment? = nil) -> DatePicker {
-        return mutate(frame: width.value, height: height?.value, alignment: alignment?.value)
+        return self.mutate(frame: width.value, height: height?.value, alignment: alignment?.value)
     }
 
     public func margin(insets: EdgeSet = .all, length: Tokens.MarginLength = .small) -> DatePicker {

Sources/HTMLKitComponents/Components/Disclosure.swift

@@ -62,7 +62,7 @@ public struct Disclosure: View, Modifiable {
                     }
                     .draw("M7.28,2.241C6.987,1.957 6.987,1.497 7.28,1.213C7.573,0.929 8.048,0.929 8.341,1.213L14.811,7.486C15.103,7.77 15.103,8.23 14.811,8.514L8.28,14.787C7.987,15.071 7.512,15.071 7.22,14.787C6.927,14.503 6.927,14.043 7.22,13.759L13.22,8L7.28,2.241Z")
                 }
-                .viewBox("0 0 20 16")
+                .viewBox(x: 0, y: 0, width: 20, height: 16)
                 .namespace("http://www.w3.org/2000/svg")
                 .class("state-indicator")
             }

Sources/HTMLKitComponents/Components/Divider.swift

@@ -10,7 +10,7 @@ import HTMLKit
 public struct Divider: View {
 
     /// The class names for the divider.
-    internal  var classes: [String]
+    internal var classes: [String]
 
     /// Create a divider.
     public init() {

Sources/HTMLKitComponents/Components/Dropdown.swift

@@ -24,10 +24,10 @@ public struct Dropdown: View, Modifiable, Identifiable {
     internal var id: String?
 
     /// The label content for the dropdown.
-    internal var label: [Content]
+    internal let label: [Content]
 
     /// The body content of the dropdown.
-    internal var content: [Content]
+    internal let content: [Content]
 
     /// The class names for the dropdown.
     internal var classes: [String]
@@ -111,7 +111,7 @@ extension Dropdown: ViewModifier {
     }
 
     public func frame(width: Tokens.ViewWidth, height: Tokens.ViewHeight? = nil, alignment: Tokens.FrameAlignment? = nil) -> Dropdown {
-        return mutate(frame: width.value, height: height?.value, alignment: alignment?.value)
+        return self.mutate(frame: width.value, height: height?.value, alignment: alignment?.value)
     }
 
     public func margin(insets: EdgeSet = .all, length: Tokens.MarginLength = .small) -> Dropdown {

Sources/HTMLKitComponents/Components/FieldLabel.swift

@@ -15,7 +15,7 @@ public struct FieldLabel: View {
     internal let id: String
 
     /// The body content of the label.
-    internal var content: [Content]
+    internal let content: [Content]
 
     /// The class names for the label.
     internal var classes: [String]

Sources/HTMLKitComponents/Components/FileDialog.swift

@@ -106,7 +106,7 @@ extension FileDialog: ViewModifier {
     }
 
     public func frame(width: Tokens.ViewWidth, height: Tokens.ViewHeight? = nil, alignment: Tokens.FrameAlignment? = nil) -> FileDialog {
-        return mutate(frame: width.value, height: height?.value, alignment: alignment?.value)
+        return self.mutate(frame: width.value, height: height?.value, alignment: alignment?.value)
     }
 
     public func margin(insets: EdgeSet = .all, length: Tokens.MarginLength = .small) -> FileDialog {