[Bug Fix] Match shadcn sonner styling tokens with Tailwind utilities

Item:
- gap-3 -> gap-1.5 (6px, sonner)
- text-[13px] (sonner font-size)
- p-4 only (close moved out of right side via translate)
- shadow-lg -> shadow-[0_4px_12px_rgba(0,0,0,0.1)] (matches sonner)

Title: drop text-sm so it inherits 13px; leading-tight -> leading-normal.
Description: drop text-sm; add font-normal leading-[1.4].
Content wrapper (skeleton): gap-1 -> gap-0.5 (2px).

Icon span: justify-start, relative, size-4, -ml-[3px] mr-1
(sonner icon margins). SVG: add -ml-px.

Action button: solid dark style — h-6 px-2 text-xs rounded
bg-foreground text-background ml-auto hover:opacity-90.

Cancel button: soft fill — bg-foreground/10 text-foreground
ml-auto hover:bg-foreground/15.

Close button: moved to top-left with -translate-x-[35%] -translate-y-[35%];
size-5 rounded-full border bg-popover; SVG size-3.

Toaster JS: spawn-time action/cancel buttons mirror new classes.

Docs: shorten Header description; move triggering blurb + sonner
credit to an About section after Installation tabs.

Author: djalmaaraujo

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

@@ -101,7 +101,7 @@ export default class extends Controller {
       const btn = document.createElement("button")
       btn.type = "button"
       btn.dataset.slot = "action"
-      btn.className = "inline-flex h-8 shrink-0 cursor-pointer items-center justify-center rounded-md border border-input bg-transparent px-3 text-sm font-medium hover:bg-secondary"
+      btn.className = "inline-flex h-6 shrink-0 cursor-pointer items-center justify-center rounded px-2 text-xs font-medium bg-foreground text-background border-0 ml-auto hover:opacity-90 focus:outline-none focus:ring-2 focus:ring-ring transition-opacity"
       btn.textContent = detail.action.label
       btn.addEventListener("click", (ev) => {
         try { detail.action.onClick?.(ev) } finally {
@@ -116,7 +116,7 @@ export default class extends Controller {
       btn.type = "button"
       btn.dataset.slot = "cancel"
       btn.dataset.action = "click->ruby-ui--toast#dismiss"
-      btn.className = "inline-flex h-8 shrink-0 cursor-pointer items-center justify-center rounded-md px-3 text-sm font-medium text-muted-foreground hover:bg-muted"
+      btn.className = "inline-flex h-6 shrink-0 cursor-pointer items-center justify-center rounded px-2 text-xs font-medium bg-foreground/10 text-foreground border-0 ml-auto hover:bg-foreground/15 focus:outline-none focus:ring-2 focus:ring-ring transition-colors"
       btn.textContent = detail.cancel.label
       node.appendChild(btn)
     }

docs/app/views/docs/toast.rb

@@ -22,7 +22,7 @@ def view_template
     div(class: "max-w-2xl mx-auto w-full py-10 space-y-10") do
       render Docs::Header.new(
         title: "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."
+        description: "An opinionated toast component."
       )
 
       Heading(level: 2) { "Mount" }
@@ -100,6 +100,20 @@ def view_template
 
       render Components::ComponentSetup::Tabs.new(component_name: component)
 
+      Heading(level: 2) { "About" }
+      p(class: "text-muted-foreground text-sm leading-relaxed") do
+        plain "Trigger toasts from the server with Turbo Streams or from JavaScript via "
+        code(class: "rounded bg-muted px-1.5 py-0.5 text-xs") { "window.RubyUI.toast.*" }
+        plain ". Heavily inspired by the original "
+        a(
+          href: "https://github.com/emilkowalski/sonner",
+          target: "_blank",
+          rel: "noopener",
+          class: "underline underline-offset-2 hover:text-foreground"
+        ) { "sonner" }
+        plain "."
+      end
+
       render Docs::ComponentsTable.new(component_files(component))
     end
   end

gem/lib/ruby_ui/toast/toast_action.rb

@@ -20,7 +20,7 @@ def default_attrs
       {
         type: "button",
         data: data,
-        class: "inline-flex h-8 shrink-0 cursor-pointer 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"
+        class: "inline-flex h-6 shrink-0 cursor-pointer items-center justify-center rounded px-2 text-xs font-medium bg-foreground text-background border-0 ml-auto hover:opacity-90 focus:outline-none focus:ring-2 focus:ring-ring transition-opacity disabled:pointer-events-none disabled:opacity-50"
       }
     end
   end

gem/lib/ruby_ui/toast/toast_cancel.rb

@@ -20,7 +20,7 @@ def default_attrs
           slot: "cancel",
           action: "click->ruby-ui--toast#dismiss"
         },
-        class: "inline-flex h-8 shrink-0 cursor-pointer 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"
+        class: "inline-flex h-6 shrink-0 cursor-pointer items-center justify-center rounded px-2 text-xs font-medium bg-foreground/10 text-foreground border-0 ml-auto hover:bg-foreground/15 focus:outline-none focus:ring-2 focus:ring-ring transition-colors"
       }
     end
   end

gem/lib/ruby_ui/toast/toast_close.rb

@@ -6,15 +6,15 @@ def view_template
       button(**attrs) do
         svg(
           xmlns: "http://www.w3.org/2000/svg",
-          width: "15",
-          height: "15",
+          width: "12",
+          height: "12",
           viewbox: "0 0 24 24",
           fill: "none",
           stroke: "currentColor",
           stroke_width: "2",
           stroke_linecap: "round",
           stroke_linejoin: "round",
-          class: "size-4"
+          class: "size-3"
         ) do |s|
           s.path(d: "M18 6 6 18")
           s.path(d: "m6 6 12 12")
@@ -33,7 +33,7 @@ def default_attrs
           slot: "close",
           action: "click->ruby-ui--toast#dismiss"
         },
-        class: "absolute right-1 top-1 cursor-pointer 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 group-data-[close-button=always]/toaster:opacity-100"
+        class: "absolute left-0 top-0 -translate-x-[35%] -translate-y-[35%] size-5 cursor-pointer rounded-full border border-border bg-popover text-foreground p-0 flex items-center justify-center opacity-0 z-10 transition-opacity hover:bg-muted focus:opacity-100 focus:outline-none focus:ring-1 focus:ring-ring group-hover/toast:opacity-100 group-data-[close-button=always]/toaster:opacity-100"
       }
     end
   end

gem/lib/ruby_ui/toast/toast_description.rb

@@ -11,7 +11,7 @@ def view_template(&)
     def default_attrs
       {
         data: {slot: "description"},
-        class: "text-sm text-muted-foreground"
+        class: "font-normal leading-[1.4] text-muted-foreground"
       }
     end
   end

gem/lib/ruby_ui/toast/toast_icon.rb

@@ -20,7 +20,7 @@ def view_template
           stroke_width: "2",
           stroke_linecap: "round",
           stroke_linejoin: "round",
-          class: svg_classes
+          class: "#{svg_classes} -ml-px"
         ) { |s| paths(s) }
       end
     end
@@ -59,7 +59,7 @@ def paths(s)
     end
 
     def default_attrs
-      {data: {slot: "icon"}, class: "shrink-0 inline-flex items-center justify-center text-foreground"}
+      {data: {slot: "icon"}, class: "shrink-0 inline-flex items-center justify-start relative size-4 -ml-[3px] mr-1 text-foreground"}
     end
   end
 end

gem/lib/ruby_ui/toast/toast_item.rb

@@ -55,9 +55,9 @@ def default_attrs
     def item_classes
       <<~CLASSES.tr("\n", " ").squeeze(" ").strip
         group/toast pointer-events-auto absolute left-0 right-0
-        flex w-[356px] max-w-full items-center gap-3
+        flex w-[356px] max-w-full items-center gap-1.5
         overflow-hidden rounded-lg border bg-popover text-popover-foreground
-        border-border p-4 pr-8 shadow-lg
+        border-border p-4 text-[13px] shadow-[0_4px_12px_rgba(0,0,0,0.1)]
         transition-[transform,opacity] duration-300 ease-out
         will-change-transform
         opacity-[var(--opacity,1)]

gem/lib/ruby_ui/toast/toast_region.rb

@@ -66,7 +66,7 @@ def skeleton(variant)
       ) do
         render RubyUI::ToastItem.new(variant: variant) do
           render RubyUI::ToastIcon.new(variant: variant)
-          div(class: "flex flex-col gap-1 flex-1 min-w-0") do
+          div(class: "flex flex-col gap-0.5 flex-1 min-w-0") do
             render RubyUI::ToastTitle.new
             render RubyUI::ToastDescription.new
           end

gem/lib/ruby_ui/toast/toast_title.rb

@@ -11,7 +11,7 @@ def view_template(&)
     def default_attrs
       {
         data: {slot: "title"},
-        class: "text-sm font-medium leading-tight"
+        class: "font-medium leading-normal"
       }
     end
   end