Add cornerRadius modifier.

Sources/Slipstream/Documentation.docc/Slipstream.md

@@ -66,7 +66,7 @@ print(try renderHTML(HelloWorld()))
 ### Tailwind CSS
 
 - <doc:TailwindCSS-Conditions>
-- <doc:TailwindCSS-Classes>
+- <doc:TailwindCSS-Utilities>
 
 ### Markdown
 

Sources/Slipstream/Documentation.docc/TailwindCSS/Borders/Borders-CornerRadius.md

@@ -0,0 +1,15 @@
+# Corner radius
+
+Utilities for controlling the corner radius of a view.
+
+## Topics
+
+### Modifiers
+
+- ``View/cornerRadius(_:condition:)-n56e``
+- ``View/cornerRadius(_:condition:)-6tvub``
+
+### Supporting types
+
+- ``CornerRadius``
+

Sources/Slipstream/Documentation.docc/TailwindCSS/TailwindCSS-Classes.md → Sources/Slipstream/Documentation.docc/TailwindCSS/TailwindCSS-Utilities.md

@@ -1,6 +1,6 @@
-# Classes
+# Utilities
 
-Slipstream implementations of Tailwind CSS's classes.
+Slipstream implementations of Tailwind CSS's utility classes.
 
 ## Topics
 
@@ -45,6 +45,7 @@ Slipstream implementations of Tailwind CSS's classes.
 ### Borders
 
 - <doc:Borders-Border>
+- <doc:Borders-CornerRadius>
 
 ### Transitions and animations
 

Sources/Slipstream/TailwindCSS/Borders/View+cornerRadius.swift

@@ -0,0 +1,53 @@
+/// Constants that specify the corner radius of the view.
+///
+/// - SeeAlso: Tailwind CSS' [border radius](https://tailwindcss.com/docs/border-radius) documentation.
+public enum CornerRadius: String {
+  case none = "-none"
+  case small = "-sm"
+  case base = ""
+  case medium = "-md"
+  case large = "-lg"
+  case extraLarge = "-xl"
+  case extraExtraLarge = "-2xl"
+  case extraExtraExtraLarge = "-3xl"
+  case full = "-full"
+}
+
+extension View {
+  /// Changes the corner radius of the view.
+  ///
+  /// - SeeAlso: Tailwind CSS' [border radius](https://tailwindcss.com/docs/border-radius) documentation.
+  @available(iOS 17.0, macOS 14.0, *)
+  public func cornerRadius(_ radius: CornerRadius, condition: Condition? = nil) -> some View {
+    return self.modifier(TailwindClassModifier(add: "rounded" + radius.rawValue, condition: condition))
+  }
+
+  /// Set the font corner radius to the closest equivalent Tailwind CSS radius size.
+  ///
+  /// - Parameters:
+  ///   - ptSize: A corner size in `pt` units. The closest Tailwind corner
+  ///   size class that matches this point size will be used. If the size is exactly between
+  ///   two classes, then the smaller of the two will be used.
+  ///   - condition: An optional Tailwind condition defining when to apply this modifier.
+  ///
+  /// - SeeAlso: Tailwind CSS' [`font-size`](https://tailwindcss.com/docs/font-size) documentation.
+  @available(iOS 17.0, macOS 14.0, *)
+  public func cornerRadius(_ ptSize: Int, condition: Condition? = nil) -> some View {
+    return cornerRadius(closestTailwindCornerRadius(ptSize: ptSize), condition: condition)
+  }
+
+  private func closestTailwindCornerRadius(ptSize: Int) -> CornerRadius {
+    let mapping: [(cornerRadius: CornerRadius, ptSize: Int)] = [
+      (.none, 0),
+      (.small, 2),                 // 0.125rem
+      (.base, 4),                  // 0.25rem
+      (.medium, 6),                // 0.375rem
+      (.large, 8),                 // 0.5rem
+      (.extraLarge, 12),           // 0.75rem
+      (.extraExtraLarge, 16),      // 1rem
+      (.extraExtraExtraLarge, 24), // 1.5rem
+    ]
+    let closest = mapping.min { abs($0.ptSize - ptSize) < abs($1.ptSize - ptSize) }
+    return closest?.cornerRadius ?? .none
+  }
+}

Tests/SlipstreamTests/TailwindCSS/Borders/CornerRadiusTests.swift

@@ -0,0 +1,32 @@
+import Testing
+import Slipstream
+
+struct CornerRadiusTests {
+  @Test func enumeration() throws {
+    try #expect(renderHTML(Div {}.cornerRadius(.none)) == #"<div class="rounded-none"></div>"#)
+    try #expect(renderHTML(Div {}.cornerRadius(.small)) == #"<div class="rounded-sm"></div>"#)
+    try #expect(renderHTML(Div {}.cornerRadius(.base)) == #"<div class="rounded"></div>"#)
+    try #expect(renderHTML(Div {}.cornerRadius(.medium)) == #"<div class="rounded-md"></div>"#)
+    try #expect(renderHTML(Div {}.cornerRadius(.large)) == #"<div class="rounded-lg"></div>"#)
+    try #expect(renderHTML(Div {}.cornerRadius(.extraLarge)) == #"<div class="rounded-xl"></div>"#)
+    try #expect(renderHTML(Div {}.cornerRadius(.extraExtraLarge)) == #"<div class="rounded-2xl"></div>"#)
+    try #expect(renderHTML(Div {}.cornerRadius(.extraExtraExtraLarge)) == #"<div class="rounded-3xl"></div>"#)
+    try #expect(renderHTML(Div {}.cornerRadius(.full)) == #"<div class="rounded-full"></div>"#)
+  }
+
+  @Test func points() throws {
+    try #expect(renderHTML(Div {}.cornerRadius(0)) == #"<div class="rounded-none"></div>"#)
+    try #expect(renderHTML(Div {}.cornerRadius(1)) == #"<div class="rounded-none"></div>"#)
+    try #expect(renderHTML(Div {}.cornerRadius(2)) == #"<div class="rounded-sm"></div>"#)
+    try #expect(renderHTML(Div {}.cornerRadius(3)) == #"<div class="rounded-sm"></div>"#)
+    try #expect(renderHTML(Div {}.cornerRadius(4)) == #"<div class="rounded"></div>"#)
+    try #expect(renderHTML(Div {}.cornerRadius(5)) == #"<div class="rounded"></div>"#)
+    try #expect(renderHTML(Div {}.cornerRadius(6)) == #"<div class="rounded-md"></div>"#)
+    try #expect(renderHTML(Div {}.cornerRadius(7)) == #"<div class="rounded-md"></div>"#)
+    try #expect(renderHTML(Div {}.cornerRadius(8)) == #"<div class="rounded-lg"></div>"#)
+    try #expect(renderHTML(Div {}.cornerRadius(9)) == #"<div class="rounded-lg"></div>"#)
+    try #expect(renderHTML(Div {}.cornerRadius(10)) == #"<div class="rounded-lg"></div>"#)
+    try #expect(renderHTML(Div {}.cornerRadius(11)) == #"<div class="rounded-xl"></div>"#)
+    try #expect(renderHTML(Div {}.cornerRadius(12)) == #"<div class="rounded-xl"></div>"#)
+  }
+}