Migrate the steps components to align with Phlex conversions

app/components/steps/builder.rb

@@ -0,0 +1,31 @@
+# frozen_string_literal: true
+
+module Components
+  module Steps
+    class Builder < Components::Base
+      include DeferredRender
+
+      def initialize(**attrs)
+        @attrs = attrs
+        @step_number = 0
+        @steps = []
+      end
+
+      def view_template
+        div(**@attrs) do
+          @steps.each do |step|
+            render step
+          end
+        end
+      end
+
+      def add_step(&)
+        @step_number += 1
+        step = Step.new(number: @step_number, last: true, &)
+        @steps << step
+        # Last false for all steps except the last one
+        @steps[0..-2].each { |s| s.last = false }
+      end
+    end
+  end
+end

app/components/steps/container.rb

@@ -0,0 +1,11 @@
+# frozen_string_literal: true
+
+module Components
+  module Steps
+    class Container < Components::Base
+      def view_template(&)
+        div(class: "space-y-4", &)
+      end
+    end
+  end
+end

app/components/steps/step.rb

@@ -0,0 +1,27 @@
+# frozen_string_literal: true
+
+module Components
+  module Steps
+    class Step < Components::Base
+      def initialize(number: 1, last: false)
+        @number = number
+        @last = last
+      end
+
+      attr_writer :last
+
+      def view_template(&block)
+        div(class: "relative flex space-x-4 md:space-x-8") do
+          div(class: "flex-shrink-0 h-full") do
+            div(class: "flex-0 flex items-center justify-center h-6 w-6 rounded-md border border-amber-500/20 bg-amber-100 dark:bg-amber-100/20 text-amber-700 dark:text-amber-200") do
+              p(class: "font-medium text-sm") { @number }
+            end
+            # vertical line unless last
+            hr(class: "absolute left-3 top-6 -ml-px h-full w-px bg-amber-500/20") unless @last
+          end
+          div(class: "flex-1 space-y-2 pb-10 overflow-hidden -mt-0.5", &block)
+        end
+      end
+    end
+  end
+end