Implement Tailwind visibility View modifier (#259)

Add support for Tailwind CSS visibility utilities (visible, invisible,
collapse) as a View modifier. This allows controlling element visibility
while maintaining layout space for hidden elements.

- Add Visibility enum with three cases: visible, invisible, collapse
- Implement visibility() View modifier with optional condition support
- Add comprehensive test coverage for all visibility modes and
conditions

Part of #51

---------

Co-authored-by: Claude <noreply@anthropic.com>

Author: jverkoey

Sources/Slipstream/Documentation.docc/TailwindCSS/Layout/Layout-Visibility.md

@@ -0,0 +1,13 @@
+# Visibility
+
+Utilities for controlling the visibility of an element.
+
+## Topics
+
+### Modifiers
+
+- ``View/visibility(_:condition:)``
+
+### Supporting types
+
+- ``Visibility``

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

@@ -12,6 +12,7 @@ Slipstream implementations of Tailwind CSS's utility classes.
 - <doc:Layout-Overflow>
 - <doc:Layout-Position>
 - <doc:Layout-Placement>
+- <doc:Layout-Visibility>
 
 ### Flexbox & Grid
 

Sources/Slipstream/TailwindCSS/Layout/View+visibility.swift

@@ -0,0 +1,37 @@
+import Foundation
+
+/// Utilities for controlling the visibility of an element.
+///
+/// - SeeAlso: Tailwind CSS [visibility](https://tailwindcss.com/docs/visibility)
+@available(iOS 17.0, macOS 14.0, *)
+public enum Visibility: String {
+  /// Sets `visibility: visible` - makes the element visible.
+  case visible
+
+  /// Sets `visibility: hidden` - hides the element but still takes up space in the layout.
+  case invisible
+
+  /// Sets `visibility: collapse` - collapses the element (primarily for table rows/columns).
+  case collapse
+}
+
+@available(iOS 17.0, macOS 14.0, *)
+extension View {
+  /// Sets the visibility of an element.
+  ///
+  /// - Parameters:
+  ///   - visibility: The visibility mode to apply.
+  ///   - condition: An optional condition that controls when this modifier is applied.
+  ///
+  /// ```swift
+  /// Div {
+  ///   Text("This is visible")
+  /// }
+  /// .visibility(.visible)
+  /// ```
+  ///
+  /// - SeeAlso: Tailwind CSS [visibility](https://tailwindcss.com/docs/visibility)
+  public func visibility(_ visibility: Visibility, condition: Condition? = nil) -> some View {
+    return modifier(TailwindClassModifier(add: visibility.rawValue, condition: condition))
+  }
+}

Tests/SlipstreamTests/TailwindCSS/Layout/VisibilityTests.swift

@@ -0,0 +1,34 @@
+import Testing
+import Slipstream
+
+struct VisibilityTests {
+  @Test func visible() throws {
+    try #expect(renderHTML(Div {}.visibility(.visible)) == #"<div class="visible"></div>"#)
+  }
+
+  @Test func invisible() throws {
+    try #expect(renderHTML(Div {}.visibility(.invisible)) == #"<div class="invisible"></div>"#)
+  }
+
+  @Test func collapse() throws {
+    try #expect(renderHTML(Div {}.visibility(.collapse)) == #"<div class="collapse"></div>"#)
+  }
+
+  @Test func condition() throws {
+    try #expect(
+      renderHTML(
+        Div {}.visibility(.invisible, condition: .init(startingAt: .medium))
+      ) == #"<div class="md:invisible"></div>"#
+    )
+  }
+
+  @Test func multipleConditions() throws {
+    try #expect(
+      renderHTML(
+        Div {}
+          .visibility(.invisible, condition: .init(startingAt: .medium))
+          .visibility(.visible, condition: .init(startingAt: .large))
+      ) == #"<div class="md:invisible lg:visible"></div>"#
+    )
+  }
+}