Add support for upper-bound breakpoint.

Sources/Slipstream/TailwindCSS/Breakpoint.swift

@@ -2,10 +2,24 @@
 ///
 /// - SeeAlso: Tailwind CSS' [`responsive design`](https://tailwindcss.com/docs/responsive-design) documentation.
 @available(iOS 17.0, macOS 14.0, *)
-public enum Breakpoint: String {
-  case small = "sm"
-  case medium = "md"
-  case large = "lg"
-  case extraLarge = "xl"
-  case extraExtraLarge = "2xl"
+public enum Breakpoint: Int, Comparable {
+  case small
+  case medium
+  case large
+  case extraLarge
+  case extraExtraLarge
+
+  var asTailwindClass: String {
+    switch self {
+    case .small: return "sm"
+    case .medium: return "md"
+    case .large: return "lg"
+    case .extraLarge: return "xl"
+    case .extraExtraLarge: return "2xl"
+    }
+  }
+
+  public static func < (lhs: Breakpoint, rhs: Breakpoint) -> Bool {
+    lhs.rawValue < rhs.rawValue
+  }
 }

Sources/Slipstream/TailwindCSS/Condition.swift

@@ -6,22 +6,32 @@
 public struct Condition {
   /// Creates a Condition with a set of states.
   public init(state: State.Set) {
-    self.minBreakpoint = nil
+    self.startingAtBreakpoint = nil
+    self.endingBeforeBreakpoint = nil
     self.state = state
   }
 
-  /// Creates a Condition with a minimum breakpoint.
-  public init(minBreakpoint: Breakpoint) {
-    self.minBreakpoint = minBreakpoint
+  /// Creates a Condition that starts at a given breakpoint.
+  public init(startingAt breakpoint: Breakpoint) {
+    self.startingAtBreakpoint = breakpoint
+    self.endingBeforeBreakpoint = nil
     self.state = nil
   }
 
-  /// Creates a Condition with a minimum breakpoint and set of states.
-  public init(minBreakpoint: Breakpoint, state: State.Set) {
-    self.minBreakpoint = minBreakpoint
+  /// Creates a Condition that starts at a given breakpoint and set of states.
+  public init(startingAt breakpoint: Breakpoint, state: State.Set) {
+    self.startingAtBreakpoint = breakpoint
+    self.endingBeforeBreakpoint = nil
     self.state = state
   }
 
+  /// Creates a Condition that applies within the range of breakpoints.
+  public init(within range: Range<Breakpoint>) {
+    self.startingAtBreakpoint = range.lowerBound
+    self.endingBeforeBreakpoint = range.upperBound
+    self.state = nil
+  }
+
   /// A convenience condition representing dark mode.
   public static let dark = Condition(state: .dark)
 
@@ -32,14 +42,22 @@ public struct Condition {
   public static let active = Condition(state: .active)
 
   /// A convenience condition representing a minimum breakpoint.
-  public static func minBreakpoint(_ minBreakpoint: Breakpoint) -> Self {
-    return Condition(minBreakpoint: minBreakpoint)
+  public static func startingAt(_ breakpoint: Breakpoint) -> Self {
+    return Condition(startingAt: breakpoint)
+  }
+
+  /// A convenience condition representing a minimum breakpoint.
+  public static func within(_ range: Range<Breakpoint>) -> Self {
+    return Condition(within: range)
   }
 
   var tailwindClassModifiers: String {
     var modifiers: [String] = []
-    if let minBreakpoint {
-      modifiers.append(minBreakpoint.rawValue)
+    if let startingAtBreakpoint {
+      modifiers.append(startingAtBreakpoint.asTailwindClass)
+    }
+    if let endingBeforeBreakpoint {
+      modifiers.append("max-" + endingBeforeBreakpoint.asTailwindClass)
     }
     if let set = state, set.rawValue != 0 {
       modifiers.append(contentsOf: State.allCases
@@ -51,6 +69,7 @@ public struct Condition {
     return modifiers.joined(separator: ":")
   }
 
-  private let minBreakpoint: Breakpoint?
+  private let startingAtBreakpoint: Breakpoint?
+  private let endingBeforeBreakpoint: Breakpoint?
   private let state: State.Set?
 }

Tests/SlipstreamTests/Sites/CatalogSiteTests.swift

@@ -55,7 +55,7 @@ private struct CatalogSite: View {
         .border(.black, width: 4, edges: .bottom)
         .backgroundImage(URL(string: "/logo.svg"), size: .size(width: 50, height: 100), repeat: .no)
         .textColor(.red, darkness: 800, condition: .dark)
-        .padding(.horizontal, 48, condition: .minBreakpoint(.large))
+        .padding(.horizontal, 48, condition: .startingAt(.large))
         .animation(.easeInOut(duration: 0.3))
       }
       .id("root")

Tests/SlipstreamTests/TailwindCSS/FlexboxAndGrid/FlexDirectionTests.swift

@@ -10,6 +10,6 @@ struct FlexDirectionTests {
   }
 
   @Test func conditions() throws {
-    try #expect(renderHTML(Div {}.flexDirection(.y, condition: .init(minBreakpoint: .medium))) == #"<div class="md:flex-col"></div>"#)
+    try #expect(renderHTML(Div {}.flexDirection(.y, condition: .init(startingAt: .medium))) == #"<div class="md:flex-col"></div>"#)
   }
 }

Tests/SlipstreamTests/TailwindCSS/Layout/DisplayTests.swift

@@ -32,7 +32,7 @@ struct DisplayTests {
         Div {
         }.display(
           .block,
-          condition: .init(minBreakpoint: .medium)
+          condition: .init(startingAt: .medium)
         )) == #"<div class="md:block"></div>"#
     )
   }

Tests/SlipstreamTests/TailwindCSS/Spacing/MarginTests.swift

@@ -53,10 +53,7 @@ struct MarginTests {
   }
 
   @Test func condition() throws {
-    try #expect(
-      renderHTML(
-        Div {
-        }.margin(8, condition: .init(minBreakpoint: .large))) == #"<div class="lg:m-2"></div>"#
-    )
+    try #expect(renderHTML(Div {}.margin(8, condition: .init(startingAt: .large))) == #"<div class="lg:m-2"></div>"#)
+    try #expect(renderHTML(Div {}.margin(8, condition: .within(Breakpoint.small..<Breakpoint.large))) == #"<div class="sm:max-lg:m-2"></div>"#)
   }
 }

Tests/SlipstreamTests/TailwindCSS/Spacing/PaddingTests.swift

@@ -38,7 +38,7 @@ struct PaddingTests {
         }.padding(.top, 0).padding(
           .right,
           4,
-          condition: .init(minBreakpoint: .medium)
+          condition: .init(startingAt: .medium)
         )) == #"<div class="pt-0 md:pr-1"></div>"#
     )
   }

Tests/SlipstreamTests/TailwindCSS/Typography/TextAlignmentTests.swift

@@ -18,7 +18,7 @@ struct TextAlignmentTests {
         Div {
         }.textAlignment(
           .left,
-          condition: .init(minBreakpoint: .extraExtraLarge)
+          condition: .init(startingAt: .extraExtraLarge)
         )) == #"<div class="2xl:text-left"></div>"#
     )
   }