[Documentation] Match shadcn sonner demo style + visual polish

- Drop variant-tinted borders; icons monochrome (currentColor) — matches
  shadcn sonner exactly.
- Rewrite docs page: shadcn-style "Examples > Types" grid (2-col) with
  one box per variant, each containing a 'Show toast' button.
- Position section: 6-button grid; click spawns toast in chosen corner
  via new `position` override in spawn detail (toaster_controller
  swaps data-position before spawning).
- JS API section explains it's sugar over a window CustomEvent
  (Hotwire-friendly: any source can dispatch `ruby-ui:toast`).
- Server-pushed example: fix button_to to use form-level data-turbo-stream.
- toaster_controller: register window.RubyUI.toast earlier so click
  handlers don't race with controller connect.

Author: djalmaaraujo

docs/app/javascript/controllers/ruby_ui/toaster_controller.js

@@ -24,9 +24,8 @@ export default class extends Controller {
     this._heights = new Map()
     this._expanded = this.expandValue
     this._listEl = this.element.tagName === "OL" ? this.element : this.element.querySelector("ol")
-    if (!this._listEl) return
-
     this._registerGlobalApi()
+    if (!this._listEl) return
 
     this._observer = new MutationObserver((records) => {
       for (const r of records) {
@@ -74,6 +73,10 @@ export default class extends Controller {
     const variant = VARIANTS.includes(detail.variant) ? detail.variant : "default"
     const tpl = this._skeletonFor(variant)
     if (!tpl) return null
+    if (detail.position) {
+      this.element.setAttribute("data-position", detail.position)
+      this.positionValue = detail.position
+    }
     const node = tpl.content.firstElementChild.cloneNode(true)
 
     node.id = detail.id || `toast-${this._uuid()}`

docs/app/javascript/controllers/toast_demo_controller.js

@@ -1,22 +1,48 @@
 import { Controller } from "@hotwired/stimulus"
 
+const PRESETS = {
+  default: { variant: "default", title: "Event has been created", description: "Sunday, December 03, 2023 at 9:00 AM" },
+  success: { variant: "success", title: "Event has been created" },
+  info: { variant: "info", title: "Be at the area 10 minutes before the event time" },
+  warning: { variant: "warning", title: "Event start time cannot be earlier than 8am" },
+  error: { variant: "error", title: "Event has not been created" },
+  with_action: { variant: "default", title: "Event has been created", action: { label: "Undo" } },
+}
+
 export default class extends Controller {
   fire(e) {
-    const variant = e.params.variant || "default"
+    const kind = e.params.kind || "default"
     const t = window.RubyUI?.toast
-    if (!t) return
-    const titles = { success: "Saved", error: "Boom", info: "Heads up", warning: "Storage almost full", default: "Hello" }
-    const descs = { success: "Project updated.", error: "Server returned 500.", info: "New version available.", warning: "Almost out of space.", default: "Just so you know." }
-    t[variant]?.(titles[variant], { description: descs[variant] })
+    if (!t) return console.warn("RubyUI.toast not available")
+
+    if (kind === "promise") {
+      t.promise(
+        new Promise((r) => setTimeout(() => r({ name: "Sonner" }), 1500)),
+        {
+          loading: "Loading...",
+          success: (data) => `${data.name} toast has been added`,
+          error: "Error",
+        }
+      )
+      return
+    }
+
+    const preset = PRESETS[kind] || PRESETS.default
+    const opts = { description: preset.description, action: preset.action }
+    const fn = t[preset.variant] || t
+    fn(preset.title, opts)
   }
 
-  promise() {
-    const p = new Promise((r) => setTimeout(() => r({ id: 42 }), 1500))
-    window.RubyUI?.toast.promise(p, {
-      loading: "Saving...",
-      success: (v) => `Saved (id ${v.id})`,
-      error: "Failed",
-    })
+  position(e) {
+    const position = e.params.position || "bottom-right"
+    window.dispatchEvent(new CustomEvent("ruby-ui:toast", {
+      detail: {
+        variant: "default",
+        title: `Position: ${position}`,
+        description: "Toast spawned in this corner",
+        position,
+      }
+    }))
   }
 
   dismissAll() {

docs/app/views/docs/toast.rb

@@ -3,40 +3,67 @@
 class Views::Docs::Toast < Views::Base
   include Phlex::Rails::Helpers::ButtonTo
 
+  EXAMPLES = [
+    {key: "default", label: "Default", title: "Event has been created", description: "Sunday, December 03, 2023 at 9:00 AM"},
+    {key: "success", label: "Success", title: "Event has been created"},
+    {key: "info", label: "Info", title: "Be at the area 10 minutes before the event time"},
+    {key: "warning", label: "Warning", title: "Event start time cannot be earlier than 8am"},
+    {key: "error", label: "Error", title: "Event has not been created"},
+    {key: "with_action", label: "With Action", title: "Event has been created", action_label: "Undo"},
+    {key: "promise", label: "Promise", title: nil}
+  ].freeze
+
+  POSITIONS = %w[top-left top-center top-right bottom-left bottom-center bottom-right].freeze
+
   def view_template
     component = "Toast"
 
     div(class: "max-w-2xl mx-auto w-full py-10 space-y-10") do
       render Docs::Header.new(
         title: "Toast",
-        description: "Hotwire-native sonner port. Push toasts from the server with Turbo Streams or trigger from JavaScript via window.RubyUI.toast."
+        description: "Toast notifications, Hotwire-native. Trigger from the server with Turbo Streams or from JavaScript via window.RubyUI.toast.*. Heavily inspired by the original sonner: https://github.com/emilkowalski/sonner."
       )
 
-      Heading(level: 2) { "Usage" }
-
-      render Docs::VisualCodeExample.new(title: "Mount in your layout", context: self) do
-        <<~RUBY
-          # In application_layout.rb (Phlex) or application.html.erb (ERB), once globally:
+      Heading(level: 2) { "Mount" }
+      div(class: "rounded-md border bg-muted/30 p-4") do
+        Codeblock(<<~RUBY, syntax: :ruby)
+          # In application_layout.rb (Phlex), once globally:
           render RubyUI::ToastRegion.new
+
+          # Pass flash to render Rails flash on initial load:
+          render RubyUI::ToastRegion.new(flash: helpers.flash.to_h)
         RUBY
       end
 
-      Heading(level: 2) { "Variants" }
-      p(class: "text-muted-foreground text-sm") { "Click any to push a toast from the server (Turbo Stream)." }
-      div(class: "flex flex-wrap gap-2 mt-2") do
-        button_to "Default", docs_toast_demo_default_path, data: {turbo_stream: true}, class: button_class
-        button_to "Success", docs_toast_demo_success_path, data: {turbo_stream: true}, class: button_class
-        button_to "Error", docs_toast_demo_error_path, data: {turbo_stream: true}, class: button_class
-        button_to "Warning", docs_toast_demo_warning_path, data: {turbo_stream: true}, class: button_class
-        button_to "Info", docs_toast_demo_info_path, data: {turbo_stream: true}, class: button_class
-        button_to "With action", docs_toast_demo_with_action_path, data: {turbo_stream: true}, class: button_class
+      Heading(level: 2) { "Examples" }
+      Heading(level: 3) { "Types" }
+      div(class: "grid gap-4 sm:grid-cols-2", data: {controller: "toast-demo"}) do
+        EXAMPLES.each { |ex| example_box(ex) }
+      end
+
+      Heading(level: 3) { "Position" }
+      p(class: "text-muted-foreground text-sm") { "Use the position prop to change where toasts mount." }
+      div(class: "rounded-md border p-8 flex flex-wrap items-center justify-center gap-2", data: {controller: "toast-demo"}) do
+        POSITIONS.each do |pos|
+          button(
+            type: "button",
+            class: button_class,
+            data: {action: "click->toast-demo#position", toast_demo_position_param: pos}
+          ) { pos.split("-").map(&:capitalize).join(" ") }
+        end
       end
 
       Heading(level: 2) { "Server-pushed (Turbo Stream)" }
-      div(class: "rounded-md border bg-muted/30 p-4") do
+      p(class: "text-muted-foreground text-sm") { "Append a toast to the global region from any controller." }
+      div(class: "flex flex-wrap gap-2 mt-2") do
+        button_to "Push success from server",
+          docs_toast_demo_success_path,
+          class: button_class,
+          form: {data: {turbo_stream: "true"}, class: "inline"}
+      end
+      div(class: "rounded-md border bg-muted/30 p-4 mt-4") do
         Codeblock(<<~RUBY, syntax: :ruby)
-          # In your controller, respond with a Turbo Stream that appends
-          # a Toast::Item to the global region (id="ruby-ui-toaster"):
+          # In your controller:
           render turbo_stream: turbo_stream.append("ruby-ui-toaster") {
             render RubyUI::ToastItem.new(variant: :success) do
               render RubyUI::ToastIcon.new(variant: :success)
@@ -48,51 +75,26 @@ def view_template
         RUBY
       end
 
-      Heading(level: 2) { "JS API" }
-      div(class: "flex flex-wrap gap-2 mt-2", data: {controller: "toast-demo"}) do
-        %w[success error info warning].each do |variant|
-          button(
-            type: "button",
-            class: button_class,
-            data: {action: "click->toast-demo#fire", toast_demo_variant_param: variant}
-          ) { "toast.#{variant}" }
-        end
-        button(type: "button", class: button_class, data: {action: "click->toast-demo#promise"}) { "toast.promise" }
-        button(type: "button", class: button_class, data: {action: "click->toast-demo#dismissAll"}) { "dismiss all" }
+      Heading(level: 2) { "JavaScript API" }
+      p(class: "text-muted-foreground text-sm") do
+        plain "Hotwire-friendly: window.RubyUI.toast.* is sugar over a CustomEvent dispatch. Either path works."
       end
-
-      div(class: "rounded-md border bg-muted/30 p-4 mt-4") do
+      div(class: "rounded-md border bg-muted/30 p-4 mt-2") do
         Codeblock(<<~JS, syntax: :javascript)
+          // Sugar:
           RubyUI.toast.success("Saved", { description: "Project updated." })
           RubyUI.toast.error("Boom")
           RubyUI.toast.info("Heads up")
           RubyUI.toast.warning("Storage almost full")
           RubyUI.toast.loading("Working...")
-          RubyUI.toast.dismiss(id)  // no-arg dismisses all
+          RubyUI.toast.dismiss(id)              // no-arg: dismiss all
           RubyUI.toast.promise(p, { loading, success, error })
-        JS
-      end
-
-      Heading(level: 2) { "Position" }
-      render Docs::VisualCodeExample.new(title: "Configurable on the Region", context: self) do
-        <<~RUBY
-          render RubyUI::ToastRegion.new(
-            position: :top_right,
-            expand: true,
-            max: 5,
-            duration: 6000
-          )
-        RUBY
-      end
 
-      Heading(level: 2) { "Rails flash bridge" }
-      render Docs::VisualCodeExample.new(title: "Renders flash on initial load", context: self) do
-        <<~RUBY
-          # In your controller:
-          # flash[:notice] = "Saved"
-          # In your layout:
-          render RubyUI::ToastRegion.new(flash: helpers.flash.to_h)
-        RUBY
+          // Equivalent CustomEvent (any source can dispatch this):
+          window.dispatchEvent(new CustomEvent("ruby-ui:toast", {
+            detail: { variant: "success", title: "Saved", description: "..." }
+          }))
+        JS
       end
 
       render Components::ComponentSetup::Tabs.new(component_name: component)
@@ -103,7 +105,17 @@ def view_template
 
   private
 
+  def example_box(ex)
+    div(class: "rounded-md border p-8 flex items-center justify-center min-h-[120px]") do
+      button(
+        type: "button",
+        class: button_class,
+        data: {action: "click->toast-demo#fire", toast_demo_kind_param: ex[:key]}
+      ) { "Show #{ex[:label]} toast" }
+    end
+  end
+
   def button_class
-    "inline-flex items-center justify-center rounded-md border border-input bg-background px-3 py-2 text-sm font-medium hover:bg-accent"
+    "inline-flex items-center justify-center rounded-md border border-input bg-background px-4 py-2 text-sm font-medium hover:bg-accent transition-colors"
   end
 end

gem/lib/ruby_ui/toast/toast_icon.rb

@@ -59,14 +59,7 @@ def paths(s)
     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}
+      {data: {slot: "icon"}, class: "shrink-0 inline-flex items-center justify-center text-foreground"}
     end
   end
 end

gem/lib/ruby_ui/toast/toast_item.rb

@@ -67,10 +67,6 @@ def item_classes
         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

gem/lib/ruby_ui/toast/toaster_controller.js

@@ -24,9 +24,8 @@ export default class extends Controller {
     this._heights = new Map()
     this._expanded = this.expandValue
     this._listEl = this.element.tagName === "OL" ? this.element : this.element.querySelector("ol")
-    if (!this._listEl) return
-
     this._registerGlobalApi()
+    if (!this._listEl) return
 
     this._observer = new MutationObserver((records) => {
       for (const r of records) {
@@ -74,6 +73,10 @@ export default class extends Controller {
     const variant = VARIANTS.includes(detail.variant) ? detail.variant : "default"
     const tpl = this._skeletonFor(variant)
     if (!tpl) return null
+    if (detail.position) {
+      this.element.setAttribute("data-position", detail.position)
+      this.positionValue = detail.position
+    }
     const node = tpl.content.firstElementChild.cloneNode(true)
 
     node.id = detail.id || `toast-${this._uuid()}`