[Feature] Add Toast component (sonner port) — Phlex side

Adds RubyUI::Toast{Region,Item,Title,Description,Icon,Action,Cancel,Close}
with full variant set (default/success/error/warning/info/loading), inline
lucide SVG icons, role/aria mapping, Rails flash bridge, and per-variant
hidden <template> skeletons inside a turbo-frame for client-side spawning.

No custom CSS — pure Tailwind utilities + tailwindcss-animate.

Author: djalmaaraujo

gem/lib/ruby_ui/toast/toast.rb

@@ -0,0 +1,18 @@
+# frozen_string_literal: true
+
+module RubyUI
+  module Toast
+    FLASH_VARIANTS = {
+      "notice" => :info,
+      "alert" => :warning,
+      "success" => :success,
+      "error" => :error,
+      "warning" => :warning,
+      "info" => :info
+    }.freeze
+
+    def self.flash_variant(key)
+      FLASH_VARIANTS[key.to_s] || :default
+    end
+  end
+end

gem/lib/ruby_ui/toast/toast_action.rb

@@ -0,0 +1,27 @@
+# frozen_string_literal: true
+
+module RubyUI
+  class ToastAction < Base
+    def initialize(label:, on: nil, **attrs)
+      @label = label
+      @on = on
+      super(**attrs)
+    end
+
+    def view_template
+      button(**attrs) { @label }
+    end
+
+    private
+
+    def default_attrs
+      data = {slot: "action"}
+      data[:action] = @on if @on
+      {
+        type: "button",
+        data: data,
+        class: "inline-flex h-8 shrink-0 items-center justify-center rounded-md border border-input bg-transparent px-3 text-sm font-medium ring-offset-background transition-colors hover:bg-secondary hover:text-secondary-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none disabled:opacity-50"
+      }
+    end
+  end
+end

gem/lib/ruby_ui/toast/toast_cancel.rb

@@ -0,0 +1,27 @@
+# frozen_string_literal: true
+
+module RubyUI
+  class ToastCancel < Base
+    def initialize(label:, **attrs)
+      @label = label
+      super(**attrs)
+    end
+
+    def view_template
+      button(**attrs) { @label }
+    end
+
+    private
+
+    def default_attrs
+      {
+        type: "button",
+        data: {
+          slot: "cancel",
+          action: "click->ruby-ui--toast#dismiss"
+        },
+        class: "inline-flex h-8 shrink-0 items-center justify-center rounded-md px-3 text-sm font-medium text-muted-foreground transition-colors hover:bg-muted hover:text-foreground focus:outline-none focus:ring-2 focus:ring-ring"
+      }
+    end
+  end
+end

gem/lib/ruby_ui/toast/toast_close.rb

@@ -0,0 +1,40 @@
+# frozen_string_literal: true
+
+module RubyUI
+  class ToastClose < Base
+    def view_template
+      button(**attrs) do
+        svg(
+          xmlns: "http://www.w3.org/2000/svg",
+          width: "15",
+          height: "15",
+          viewbox: "0 0 24 24",
+          fill: "none",
+          stroke: "currentColor",
+          stroke_width: "2",
+          stroke_linecap: "round",
+          stroke_linejoin: "round",
+          class: "size-4"
+        ) do |s|
+          s.path(d: "M18 6 6 18")
+          s.path(d: "m6 6 12 12")
+        end
+        span(class: "sr-only") { "Close" }
+      end
+    end
+
+    private
+
+    def default_attrs
+      {
+        type: "button",
+        aria_label: "Close toast",
+        data: {
+          slot: "close",
+          action: "click->ruby-ui--toast#dismiss"
+        },
+        class: "absolute right-1 top-1 rounded-md p-1 text-foreground/60 opacity-0 transition-opacity hover:text-foreground focus:opacity-100 focus:outline-none focus:ring-1 focus:ring-ring group-hover/toast:opacity-100"
+      }
+    end
+  end
+end

gem/lib/ruby_ui/toast/toast_description.rb

@@ -0,0 +1,18 @@
+# frozen_string_literal: true
+
+module RubyUI
+  class ToastDescription < Base
+    def view_template(&)
+      div(**attrs, &)
+    end
+
+    private
+
+    def default_attrs
+      {
+        data: {slot: "description"},
+        class: "text-sm text-muted-foreground"
+      }
+    end
+  end
+end

gem/lib/ruby_ui/toast/toast_icon.rb

@@ -0,0 +1,72 @@
+# frozen_string_literal: true
+
+module RubyUI
+  class ToastIcon < Base
+    def initialize(variant: nil, **attrs)
+      @variant = variant&.to_sym
+      super(**attrs)
+    end
+
+    def view_template
+      return unless renderable?
+      span(**attrs) do
+        svg(
+          xmlns: "http://www.w3.org/2000/svg",
+          width: "16",
+          height: "16",
+          viewbox: "0 0 24 24",
+          fill: "none",
+          stroke: "currentColor",
+          stroke_width: "2",
+          stroke_linecap: "round",
+          stroke_linejoin: "round",
+          class: svg_classes
+        ) { |s| paths(s) }
+      end
+    end
+
+    private
+
+    def renderable?
+      %i[success error warning info loading].include?(@variant)
+    end
+
+    def svg_classes
+      base = "size-4"
+      (@variant == :loading) ? "#{base} animate-spin" : base
+    end
+
+    def paths(s)
+      case @variant
+      when :success
+        s.circle(cx: "12", cy: "12", r: "10")
+        s.path(d: "m9 12 2 2 4-4")
+      when :error
+        s.path(d: "M2.586 16.726A2 2 0 0 1 2 15.312V8.688a2 2 0 0 1 .586-1.414l4.688-4.688A2 2 0 0 1 8.688 2h6.624a2 2 0 0 1 1.414.586l4.688 4.688A2 2 0 0 1 22 8.688v6.624a2 2 0 0 1-.586 1.414l-4.688 4.688a2 2 0 0 1-1.414.586H8.688a2 2 0 0 1-1.414-.586z")
+        s.path(d: "m15 9-6 6")
+        s.path(d: "m9 9 6 6")
+      when :warning
+        s.path(d: "m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3")
+        s.path(d: "M12 9v4")
+        s.path(d: "M12 17h.01")
+      when :info
+        s.circle(cx: "12", cy: "12", r: "10")
+        s.path(d: "M12 16v-4")
+        s.path(d: "M12 8h.01")
+      when :loading
+        s.path(d: "M21 12a9 9 0 1 1-6.219-8.56")
+      end
+    end
+
+    def default_attrs
+      color = case @variant
+      when :success then "text-green-600 dark:text-green-500"
+      when :error then "text-red-600 dark:text-red-500"
+      when :warning then "text-yellow-600 dark:text-yellow-500"
+      when :info then "text-blue-600 dark:text-blue-500"
+      when :loading then "text-muted-foreground"
+      end
+      {data: {slot: "icon"}, class: ["shrink-0 inline-flex items-center justify-center", color].compact}
+    end
+  end
+end

gem/lib/ruby_ui/toast/toast_item.rb

@@ -0,0 +1,77 @@
+# frozen_string_literal: true
+
+module RubyUI
+  class ToastItem < Base
+    ALERT_VARIANTS = %i[error].freeze
+
+    def initialize(
+      variant: :default,
+      id: nil,
+      duration: nil,
+      dismissible: true,
+      invert: false,
+      on_dismiss: nil,
+      on_auto_close: nil,
+      **attrs
+    )
+      @variant = variant.to_sym
+      @id = id
+      @duration = duration
+      @dismissible = dismissible
+      @invert = invert
+      @on_dismiss = on_dismiss
+      @on_auto_close = on_auto_close
+      super(**attrs)
+    end
+
+    def view_template(&)
+      li(**attrs, &)
+    end
+
+    private
+
+    def default_attrs
+      a = {
+        role: ALERT_VARIANTS.include?(@variant) ? "alert" : "status",
+        aria_atomic: "true",
+        tabindex: "0",
+        data: {
+          variant: @variant.to_s,
+          state: "pending",
+          swipe: "none",
+          controller: "ruby-ui--toast",
+          ruby_ui__toast_dismissible_value: @dismissible.to_s,
+          ruby_ui__toast_invert_value: @invert.to_s
+        },
+        class: item_classes
+      }
+      a[:id] = @id if @id
+      a[:data][:ruby_ui__toast_duration_value] = @duration.to_s if @duration
+      a[:data][:ruby_ui__toast_on_dismiss_value] = @on_dismiss if @on_dismiss
+      a[:data][:ruby_ui__toast_on_auto_close_value] = @on_auto_close if @on_auto_close
+      a
+    end
+
+    def item_classes
+      <<~CLASSES.tr("\n", " ").squeeze(" ").strip
+        group/toast pointer-events-auto relative flex w-[356px] max-w-full items-center gap-3
+        overflow-hidden rounded-lg border bg-popover text-popover-foreground
+        border-border p-4 pr-8 shadow-lg
+        transition-all duration-200 ease-out
+        will-change-transform
+        translate-y-[var(--y-offset,0px)] scale-[var(--scale,1)] opacity-[var(--opacity,1)]
+        data-[state=pending]:opacity-0 data-[state=pending]:translate-y-2
+        data-[state=open]:animate-in data-[state=open]:fade-in-0
+        data-[state=closing]:animate-out data-[state=closing]:fade-out-0
+        data-[swipe=move]:transition-none
+        data-[swipe=cancel]:translate-x-0
+        data-[swipe=end]:translate-x-[var(--swipe-end-x,0)]
+        data-[swipe=end]:translate-y-[var(--swipe-end-y,0)]
+        data-[variant=success]:border-green-500/30
+        data-[variant=error]:border-red-500/30
+        data-[variant=warning]:border-yellow-500/30
+        data-[variant=info]:border-blue-500/30
+      CLASSES
+    end
+  end
+end