feat: Adds WarningBox to Styleguide

Sources/Styleguide/FormElements.swift

@@ -50,8 +50,10 @@ public struct Input: HTML, Sendable {
     input(
       .id(id), .placeholder(placeholder), .name(name ?? id),
       .class("""
-        w-full px-4 py-2 border border-gray-300 dark:border-gray-400 rounded-md
+        w-full px-4 py-2 border rounded-md
         focus:ring-2 focus:ring-yellow-800 focus:border-yellow-800
+        placeholder-shown:border-gray-300 placeholder-shown:dark:border-gray-400
+        invalid:border-red-500 out-of-range:border-red-500
       """)
     )
   }

Sources/Styleguide/WarningBox.swift

@@ -0,0 +1,63 @@
+import Elementary
+
+/// A container for displaying warnings.
+public struct WarningBox<Header: HTML>: HTML, Sendable {
+
+  let warnings: [String]
+  let header: @Sendable ([String]) -> Header
+
+  public init(
+    warnings: [String],
+    @HTMLBuilder header: @Sendable @escaping ([String]) -> Header
+  ) {
+    self.warnings = warnings
+    self.header = header
+  }
+
+  public init(
+    _ warnings: String...,
+    @HTMLBuilder header: @Sendable @escaping ([String]) -> Header
+  ) {
+    self.warnings = warnings
+    self.header = header
+  }
+
+  public var content: some HTML<HTMLTag.div> {
+    div(.id("warnings")) {
+      header(warnings)
+      ul(.class("list-disc mx-10")) {
+        for warning in warnings {
+          li { warning }
+        }
+      }
+    }
+    .attributes(
+      .class("""
+        mt-6 p-4 rounded-lg shadow-lg
+        text-amber-500
+        bg-amber-100 dark:bg-amber-200
+        border border-amber-500
+      """),
+      when: warnings.count > 0
+    )
+  }
+}
+
+public extension WarningBox where Header == HTMLElement<HTMLTag.span, HTMLText> {
+  init(
+    warnings: [String]
+  ) {
+    self.init(
+      warnings: warnings,
+      header: { warnings in
+        span(.class("font-semibold mb-4 border-b")) { "Warning\(warnings.count > 1 ? "s:" : ":")" }
+      }
+    )
+  }
+
+  init(
+    _ warnings: String...
+  ) {
+    self.init(warnings: warnings)
+  }
+}