Add ring modifier.

Part of #51.

Author: jverkoey

Sources/Slipstream/Documentation.docc/Guides/SlipstreamForTailwindCSSDevelopers.md

@@ -160,8 +160,8 @@ Tailwind utility | Slipstream modifier
 [Outline Color](https://tailwindcss.com/docs/outline-color) | ``View/outline(_:width:condition:)``, ``View/outline(_:width:style:condition:)``
 [Outline Style](https://tailwindcss.com/docs/outline-style) | ``View/outline(_:width:style:condition:)``
 [Outline Offset](https://tailwindcss.com/docs/outline-offset) | [Not implemented yet](https://github.com/jverkoey/slipstream/issues/51)
-[Ring Width](https://tailwindcss.com/docs/ring-width) | [Not implemented yet](https://github.com/jverkoey/slipstream/issues/51)
-[Ring Color](https://tailwindcss.com/docs/ring-color) | [Not implemented yet](https://github.com/jverkoey/slipstream/issues/51)
+[Ring Width](https://tailwindcss.com/docs/ring-width) | ``View/ring(_:width:condition:)``
+[Ring Color](https://tailwindcss.com/docs/ring-color) | ``View/ring(_:width:condition:)``
 [Ring Offset Width](https://tailwindcss.com/docs/ring-offset-width) | [Not implemented yet](https://github.com/jverkoey/slipstream/issues/51)
 [Ring Offset Color](https://tailwindcss.com/docs/ring-offset-color) | [Not implemented yet](https://github.com/jverkoey/slipstream/issues/51)
 

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

@@ -0,0 +1,9 @@
+# Ring
+
+Utilities for creating outline rings with CSS box-shadows.
+
+## Topics
+
+### Modifiers
+
+- ``View/ring(_:width:condition:)``

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

@@ -51,6 +51,7 @@ Slipstream implementations of Tailwind CSS's utility classes.
 - <doc:Borders-Border>
 - <doc:Borders-CornerRadius>
 - <doc:Borders-Outline>
+- <doc:Borders-Ring>
 
 ### Effects
 

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

@@ -0,0 +1,29 @@
+extension View {
+  /// Changes the ring of the view using a CSS box-shadow.
+  ///
+  /// - SeeAlso: Tailwind CSS' [ring width](https://tailwindcss.com/docs/ring-width) documentation.
+  /// - SeeAlso: Tailwind CSS' [ring color](https://tailwindcss.com/docs/ring-color) documentation.
+  @available(iOS 17.0, macOS 14.0, *)
+  public func ring(_ color: Color? = nil, width: Int = 1, condition: Condition? = nil) -> some View {
+    var classNames: [String] = [
+      "ring" + closestTailwindRingWidth(width: width)
+    ]
+    if let color {
+      classNames.append("ring-" + color.toTailwindColorClass())
+    }
+    return modifier(TailwindClassModifier(add: Set(classNames), condition: condition))
+  }
+
+  private func closestTailwindRingWidth(width: Int) -> String {
+    let mapping: [(classSuffix: String, width: Int)] = [
+      ("-0", 0),
+      ("-1", 1),
+      ("-2", 2),
+      ("", 3),
+      ("-4", 4),
+      ("-8", 8),
+    ]
+    let closest = mapping.min { abs($0.width - width) < abs($1.width - width) }
+    return closest?.classSuffix ?? ""
+  }
+}

Tests/SlipstreamTests/TailwindCSS/Borders/RingTests.swift

@@ -0,0 +1,23 @@
+import Testing
+import Slipstream
+
+struct RingTests {
+  @Test func colors() throws {
+    try #expect(renderHTML(Div {}.ring(.black)) == #"<div class="ring-1 ring-black"></div>"#)
+    try #expect(renderHTML(Div {}.ring(.white.opacity(0.5))) == #"<div class="ring-1 ring-white/50"></div>"#)
+  }
+
+  @Test func widths() throws {
+    try #expect(renderHTML(Div {}.ring(width: 0)) == #"<div class="ring-0"></div>"#)
+    try #expect(renderHTML(Div {}.ring(width: 1)) == #"<div class="ring-1"></div>"#)
+    try #expect(renderHTML(Div {}.ring(width: 2)) == #"<div class="ring-2"></div>"#)
+    try #expect(renderHTML(Div {}.ring(width: 3)) == #"<div class="ring"></div>"#)
+    try #expect(renderHTML(Div {}.ring(width: 4)) == #"<div class="ring-4"></div>"#)
+    try #expect(renderHTML(Div {}.ring(width: 5)) == #"<div class="ring-4"></div>"#)
+    try #expect(renderHTML(Div {}.ring(width: 6)) == #"<div class="ring-4"></div>"#)
+    try #expect(renderHTML(Div {}.ring(width: 7)) == #"<div class="ring-8"></div>"#)
+    try #expect(renderHTML(Div {}.ring(width: 8)) == #"<div class="ring-8"></div>"#)
+    try #expect(renderHTML(Div {}.ring(width: 9)) == #"<div class="ring-8"></div>"#)
+    try #expect(renderHTML(Div {}.ring(width: 100)) == #"<div class="ring-8"></div>"#)
+  }
+}