tailmix

gem 'tailmix'

class MyButtonComponent
  include Tailmix

  tailmix do
    # Define the main element and its base classes
    element :button, "inline-flex items-center font-medium rounded-md" do
      # Define the 'size' dimension
      size do
        option :sm, "px-2.5 py-1.5 text-xs", default: true
        option :md, "px-3 py-2 text-sm"
        option :lg, "px-4 py-2 text-base"
      end

      # Define the 'intent' dimension
      intent do
        option :primary, "bg-blue-600 text-white hover:bg-blue-700", default: true
        option :secondary, "bg-gray-200 text-gray-800 hover:bg-gray-300"
        option :danger, "bg-red-600 text-white hover:bg-red-700"
      end
    end

    # Define another element, like an icon
    element :icon, "inline-block" do
      size do
        option :sm, "h-4 w-4"
        option :md, "h-5 w-5", default: true
        option :lg, "h-6 w-6"
      end
    end
  end
  # ...
end

class MyButtonComponent
  # ... (tailmix DSL from above)

  attr_reader :classes

  def initialize(intent: :primary, size: :md)
    # The `tailmix` helper creates and returns the manager object
    @classes = tailmix(intent: intent, size: size)
  end
  
  def render
    # The manager's methods map to your elements.
    # Ruby's `to_s` is called implicitly when rendering.
    "<button class='#{@classes.button}'>
       <span class='#{@classes.icon}'></span>
       Click me
     </button>"
  end
end

# Renders a medium primary button by default
button = MyButtonComponent.new
button.render

# Renders a small danger button
button = MyButtonComponent.new(intent: :danger, size: :sm)
button.render

class MyButtonComponent
  # ...

  # A method that might be called during a Turbo Stream update
  def set_loading_state!
    # The `combine` method updates the declarative state
    @classes.combine(intent: :secondary)
    
    # The imperative API allows for fine-grained control
    @classes.button.add("cursor-wait opacity-75")
    @classes.icon.add("animate-spin")
  end

  def remove_loading_state!
    @classes.combine(intent: :primary) # Revert to original intent
    @classes.button.remove("cursor-wait opacity-75")
    @classes.icon.remove("animate-spin")
  end
end

button = MyButtonComponent.new(intent: :primary)
button.set_loading_state!
button.render # Renders the button in a loading state

button.remove_loading_state!
button.render # Renders the button back in its primary state