Add a separator component

lib/ruby_ui/separator/separator.rb

@@ -0,0 +1,41 @@
+# frozen_string_literal: true
+
+module RubyUI
+  class Separator < Base
+    ORIENTATIONS = %i[horizontal vertical].freeze
+
+    def initialize(as: "div", orientation: :horizontal, decorative: true, **attrs)
+      raise ArgumentError, "Invalid orientation: #{orientation}" unless ORIENTATIONS.include?(orientation.to_sym)
+
+      @as = as
+      @orientation = orientation.to_sym
+      @decorative = decorative
+      super(**attrs)
+    end
+
+    def view_template(&)
+      public_send(@as, **attrs, &)
+    end
+
+    private
+
+    def default_attrs
+      {
+        role: (@decorative ? "none" : "separator"),
+        class: [
+          "shrink-0 bg-border",
+          orientation_classes
+        ],
+        data: {
+          orientation: @orientation
+        }
+      }
+    end
+
+    def orientation_classes
+      return "h-[1px] w-full" if @orientation == :horizontal
+
+      "h-full w-[1px]"
+    end
+  end
+end

test/ruby_ui/separator_test.rb

@@ -0,0 +1,39 @@
+# frozen_string_literal: true
+
+require "test_helper"
+
+class RubyUI::SeparatorTest < ComponentTest
+  def test_render
+    output = phlex do
+      RubyUI.Separator()
+    end
+
+    assert_match(/div/, output)
+    assert_match(/role="none"/, output)
+    assert_match(/data-orientation="horizontal"/, output)
+  end
+
+  def test_render_with_vertical_orientation
+    output = phlex do
+      RubyUI.Separator(orientation: :vertical)
+    end
+
+    assert_match(/data-orientation="vertical"/, output)
+  end
+
+  def test_render_with_decorative_false
+    output = phlex do
+      RubyUI.Separator(decorative: false)
+    end
+
+    assert_match(/role="separator"/, output)
+  end
+
+  def test_render_with_custom_tag
+    output = phlex do
+      RubyUI.Separator(as: "hr")
+    end
+
+    assert_match(/hr/, output)
+  end
+end