ruby_ui 1.1.0 → 1.3.0

data/lib/ruby_ui/theme_toggle/theme_toggle_docs.rb

@@ -11,39 +11,17 @@ class Views::Docs::ThemeToggle < Views::Base
 
       render Docs::VisualCodeExample.new(title: "With icon", context: self) do
         <<~RUBY
-          ThemeToggle do |toggle|
-            SetLightMode do
-              Button(variant: :ghost, icon: true) do
-                svg(
-                  xmlns: "http://www.w3.org/2000/svg",
-                  viewbox: "0 0 24 24",
-                  fill: "currentColor",
-                  class: "w-4 h-4"
-                ) do |s|
-                  s.path(
-                    d:
-                      "M12 2.25a.75.75 0 01.75.75v2.25a.75.75 0 01-1.5 0V3a.75.75 0 01.75-.75zM7.5 12a4.5 4.5 0 119 0 4.5 4.5 0 01-9 0zM18.894 6.166a.75.75 0 00-1.06-1.06l-1.591 1.59a.75.75 0 101.06 1.061l1.591-1.59zM21.75 12a.75.75 0 01-.75.75h-2.25a.75.75 0 010-1.5H21a.75.75 0 01.75.75zM17.834 18.894a.75.75 0 001.06-1.06l-1.59-1.591a.75.75 0 10-1.061 1.06l1.59 1.591zM12 18a.75.75 0 01.75.75V21a.75.75 0 01-1.5 0v-2.25A.75.75 0 0112 18zM7.758 17.303a.75.75 0 00-1.061-1.06l-1.591 1.59a.75.75 0 001.06 1.061l1.591-1.59zM6 12a.75.75 0 01-.75.75H3a.75.75 0 010-1.5h2.25A.75.75 0 016 12zM6.697 7.757a.75.75 0 001.06-1.06l-1.59-1.591a.75.75 0 00-1.061 1.06l1.59 1.591z"
-                  )
-                end
-              end
-            end
-
-            SetDarkMode do
-              Button(variant: :ghost, icon: true) do
-                svg(
-                  xmlns: "http://www.w3.org/2000/svg",
-                  viewbox: "0 0 24 24",
-                  fill: "currentColor",
-                  class: "w-4 h-4"
-                ) do |s|
-                  s.path(
-                    fill_rule: "evenodd",
-                    d:
-                      "M9.528 1.718a.75.75 0 01.162.819A8.97 8.97 0 009 6a9 9 0 009 9 8.97 8.97 0 003.463-.69.75.75 0 01.981.98 10.503 10.503 0 01-9.694 6.46c-5.799 0-10.5-4.701-10.5-10.5 0-4.368 2.667-8.112 6.46-9.694a.75.75 0 01.818.162z",
-                    clip_rule: "evenodd"
-                  )
-                end
-              end
+          ThemeToggle do
+            svg(
+              xmlns: "http://www.w3.org/2000/svg",
+              viewbox: "0 0 24 24",
+              fill: "currentColor",
+              class: "w-4 h-4"
+            ) do |s|
+              s.path(
+                d:
+                  "M12 2.25a.75.75 0 01.75.75v2.25a.75.75 0 01-1.5 0V3a.75.75 0 01.75-.75zM7.5 12a4.5 4.5 0 119 0 4.5 4.5 0 01-9 0zM18.894 6.166a.75.75 0 00-1.06-1.06l-1.591 1.59a.75.75 0 101.06 1.061l1.591-1.59zM21.75 12a.75.75 0 01-.75.75h-2.25a.75.75 0 010-1.5H21a.75.75 0 01.75.75zM17.834 18.894a.75.75 0 001.06-1.06l-1.59-1.591a.75.75 0 10-1.061 1.06l1.59 1.591zM12 18a.75.75 0 01.75.75V21a.75.75 0 01-1.5 0v-2.25A.75.75 0 0112 18zM7.758 17.303a.75.75 0 00-1.061-1.06l-1.591 1.59a.75.75 0 001.06 1.061l1.591-1.59zM6 12a.75.75 0 01-.75.75H3a.75.75 0 010-1.5h2.25A.75.75 0 016 12zM6.697 7.757a.75.75 0 001.06-1.06l-1.59-1.591a.75.75 0 00-1.061 1.06l1.59 1.591z"
+              )
             end
           end
         RUBY
@@ -51,15 +29,7 @@ class Views::Docs::ThemeToggle < Views::Base
 
       render Docs::VisualCodeExample.new(title: "With text", context: self) do
         <<~RUBY
-          ThemeToggle do |toggle|
-            SetLightMode do
-              Button(variant: :primary) { "Light" }
-            end
-
-            SetDarkMode do
-              Button(variant: :primary) { "Dark" }
-            end
-          end
+          ThemeToggle { "Toggle Theme" }
         RUBY
       end
 

data/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

data/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-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
+end

data/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-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
+end

data/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: "14",
+          height: "14",
+          viewbox: "0 0 24 24",
+          fill: "none",
+          stroke: "currentColor",
+          stroke_width: "2",
+          stroke_linecap: "round",
+          stroke_linejoin: "round",
+          class: "size-3.5"
+        ) 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-2 top-2 size-6 cursor-pointer rounded-md text-foreground/60 p-0 flex items-center justify-center transition-colors hover:bg-muted hover:text-foreground focus:outline-none focus:ring-1 focus:ring-ring"
+      }
+    end
+  end
+end

data/lib/ruby_ui/toast/toast_controller.js

@@ -0,0 +1,151 @@
+import { Controller } from "@hotwired/stimulus"
+
+const SWIPE_THRESHOLD = 45
+const TIME_BEFORE_UNMOUNT = 200
+
+// Connects to data-controller="ruby-ui--toast"
+export default class extends Controller {
+  static values = {
+    duration: { type: Number, default: 4000 },
+    dismissible: { type: Boolean, default: true },
+    invert: { type: Boolean, default: false },
+    onDismiss: String,
+    onAutoClose: String,
+  }
+
+  connect() {
+    this._timer = null
+    this._startedAt = 0
+    this._remaining = this.durationValue
+    this._paused = false
+    this._swipe = { active: false, x: 0, y: 0, startedAt: 0 }
+
+    this._onPointerDown = this._onPointerDown.bind(this)
+    this._onPointerMove = this._onPointerMove.bind(this)
+    this._onPointerUp = this._onPointerUp.bind(this)
+    this._onPointerEnter = () => this._pause()
+    this._onPointerLeave = () => { if (!this._swipe.active) this._resume() }
+    this._onKeyDown = this._onKeyDown.bind(this)
+    this._onForceDismiss = (e) => { e.stopPropagation(); this._close() }
+    this._onRestart = () => this._restart()
+    this._onRegionPause = () => this._pause()
+    this._onRegionResume = () => this._resume()
+
+    this.element.addEventListener("pointerdown", this._onPointerDown)
+    this.element.addEventListener("pointerenter", this._onPointerEnter)
+    this.element.addEventListener("pointerleave", this._onPointerLeave)
+    this.element.addEventListener("keydown", this._onKeyDown)
+    this.element.addEventListener("ruby-ui:toast:force-dismiss", this._onForceDismiss)
+    this.element.addEventListener("ruby-ui:toast:restart", this._onRestart)
+    document.addEventListener("ruby-ui:toast:pause", this._onRegionPause)
+    document.addEventListener("ruby-ui:toast:resume", this._onRegionResume)
+
+    requestAnimationFrame(() => {
+      this.element.dataset.state = "open"
+      this._start()
+    })
+  }
+
+  disconnect() {
+    this._clearTimer()
+    this.element.removeEventListener("pointerdown", this._onPointerDown)
+    this.element.removeEventListener("pointerenter", this._onPointerEnter)
+    this.element.removeEventListener("pointerleave", this._onPointerLeave)
+    this.element.removeEventListener("keydown", this._onKeyDown)
+    this.element.removeEventListener("ruby-ui:toast:force-dismiss", this._onForceDismiss)
+    this.element.removeEventListener("ruby-ui:toast:restart", this._onRestart)
+    document.removeEventListener("ruby-ui:toast:pause", this._onRegionPause)
+    document.removeEventListener("ruby-ui:toast:resume", this._onRegionResume)
+  }
+
+  dismiss(e) {
+    e?.preventDefault()
+    if (!this.dismissibleValue) return
+    this._close("dismiss")
+  }
+
+  _close(reason) {
+    if (this.element.dataset.state === "closing") return
+    this.element.dataset.state = "closing"
+    this.element.dispatchEvent(new CustomEvent(reason === "auto" ? "ruby-ui:toast:auto-close" : "ruby-ui:toast:dismiss", { bubbles: true, detail: { id: this.element.id } }))
+    setTimeout(() => this.element.remove(), TIME_BEFORE_UNMOUNT)
+  }
+
+  _start() {
+    if (!Number.isFinite(this.durationValue) || this.durationValue <= 0) return
+    this._startedAt = performance.now()
+    this._remaining = this.durationValue
+    this._timer = setTimeout(() => this._close("auto"), this._remaining)
+  }
+
+  _restart() {
+    this._clearTimer()
+    this._start()
+  }
+
+  _pause() {
+    if (this._paused || !this._timer) return
+    this._paused = true
+    clearTimeout(this._timer)
+    this._timer = null
+    this._remaining -= performance.now() - this._startedAt
+  }
+
+  _resume() {
+    if (!this._paused) return
+    this._paused = false
+    if (this._remaining <= 0) return this._close("auto")
+    this._startedAt = performance.now()
+    this._timer = setTimeout(() => this._close("auto"), this._remaining)
+  }
+
+  _clearTimer() {
+    if (this._timer) clearTimeout(this._timer)
+    this._timer = null
+  }
+
+  _onKeyDown(e) {
+    if (e.key === "Escape" && this.dismissibleValue) this.dismiss(e)
+  }
+
+  _onPointerDown(e) {
+    if (!this.dismissibleValue) return
+    if (e.target.closest("button")) return
+    try { this.element.setPointerCapture(e.pointerId) } catch {}
+    this._swipe = { active: true, x: e.clientX, y: e.clientY, startedAt: performance.now(), pointerId: e.pointerId }
+    this.element.dataset.swipe = "start"
+    this.element.addEventListener("pointermove", this._onPointerMove)
+    this.element.addEventListener("pointerup", this._onPointerUp)
+    this.element.addEventListener("pointercancel", this._onPointerUp)
+  }
+
+  _onPointerMove(e) {
+    const dx = e.clientX - this._swipe.x
+    const dy = e.clientY - this._swipe.y
+    this.element.dataset.swipe = "move"
+    this.element.style.transform = `translate(${dx}px, ${dy}px)`
+  }
+
+  _onPointerUp(e) {
+    const dx = e.clientX - this._swipe.x
+    const dy = e.clientY - this._swipe.y
+    const dist = Math.hypot(dx, dy)
+    const dt = performance.now() - this._swipe.startedAt
+    const velocity = dist / Math.max(dt, 1)
+    this.element.removeEventListener("pointermove", this._onPointerMove)
+    this.element.removeEventListener("pointerup", this._onPointerUp)
+    this.element.removeEventListener("pointercancel", this._onPointerUp)
+    this._swipe.active = false
+    if (dist > SWIPE_THRESHOLD || velocity > 0.5) {
+      this.element.style.setProperty("--swipe-end-x", `${Math.sign(dx) * 500}px`)
+      this.element.style.setProperty("--swipe-end-y", `${Math.sign(dy) * 500}px`)
+      this.element.dataset.swipe = "end"
+      this.element.style.transform = ""
+      this._close("dismiss")
+    } else {
+      this.element.dataset.swipe = "cancel"
+      this.element.style.transform = ""
+      this._resume()
+    }
+  }
+}

data/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: "font-normal leading-[1.4] text-muted-foreground"
+      }
+    end
+  end
+end

data/lib/ruby_ui/toast/toast_docs.rb

@@ -0,0 +1,12 @@
+# frozen_string_literal: true
+
+module RubyUI
+  class ToastDocs < Phlex::HTML
+    def view_template
+      div(class: "space-y-4") do
+        h2 { "Toast" }
+        p { "Hotwire-native sonner port. Mount once; trigger via Turbo Stream or window.RubyUI.toast." }
+      end
+    end
+  end
+end

data/lib/ruby_ui/toast/toast_icon.rb

@@ -0,0 +1,65 @@
+# 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} -ml-px"
+        ) { |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
+      {data: {slot: "icon"}, class: "shrink-0 inline-flex items-center justify-start relative size-4 -ml-[3px] mr-1 text-foreground"}
+    end
+  end
+end

data/lib/ruby_ui/toast/toast_item.rb

@@ -0,0 +1,72 @@
+# 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__toaster_target: "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 absolute left-0 right-0
+        flex w-[356px] max-w-full items-center gap-1.5
+        rounded-lg border bg-popover text-popover-foreground
+        border-border p-4 text-[13px] shadow-[0_4px_12px_rgba(0,0,0,0.1)]
+        group-data-[close-button=true]/toaster:pr-10
+        transition-[transform,opacity] duration-300 ease-out
+        will-change-transform
+        opacity-[var(--opacity,1)]
+        data-[state=pending]:opacity-0
+        data-[state=closing]:opacity-0
+        data-[swipe=move]:transition-none
+      CLASSES
+    end
+  end
+end

data/lib/ruby_ui/toast/toast_region.rb

@@ -0,0 +1,124 @@
+# frozen_string_literal: true
+
+module RubyUI
+  class ToastRegion < Base
+    SKELETON_VARIANTS = %i[default success error warning info loading].freeze
+
+    def initialize(
+      position: :bottom_right,
+      expand: false,
+      max: 3,
+      duration: 4000,
+      gap: 14,
+      offset: 24,
+      theme: :system,
+      rich_colors: false,
+      close_button: false,
+      hotkey: %w[alt t],
+      dir: :ltr,
+      flash: nil,
+      **attrs
+    )
+      @position = position.to_sym
+      @expand = expand
+      @max = max
+      @duration = duration
+      @gap = gap
+      @offset = offset
+      @theme = theme.to_sym
+      @rich_colors = rich_colors
+      @close_button = close_button
+      @hotkey = hotkey
+      @dir = dir
+      @flash = flash
+      super(**attrs)
+    end
+
+    def view_template(&block)
+      div(**attrs) do
+        ol(id: "ruby-ui-toaster", class: "pointer-events-auto relative m-0 p-0 list-none w-[356px] max-w-full") do
+          render_flash if @flash
+          yield(self) if block
+        end
+        SKELETON_VARIANTS.each { |v| skeleton(v) }
+        slot_template("actionTpl") { render RubyUI::ToastAction.new(label: "") }
+        slot_template("cancelTpl") { render RubyUI::ToastCancel.new(label: "") }
+        slot_template("closeTpl") { render RubyUI::ToastClose.new }
+      end
+    end
+
+    private
+
+    def render_flash
+      @flash.each do |key, message|
+        next if message.nil? || message.to_s.empty?
+        variant = RubyUI::Toast.flash_variant(key)
+        render RubyUI::ToastItem.new(variant: variant, id: "flash-#{key}") do
+          render RubyUI::ToastIcon.new(variant: variant)
+          render RubyUI::ToastTitle.new { message.to_s }
+        end
+      end
+    end
+
+    def skeleton(variant)
+      template(
+        data: {
+          ruby_ui__toaster_target: "skeleton",
+          variant: variant.to_s
+        }
+      ) do
+        render RubyUI::ToastItem.new(variant: variant) do
+          render RubyUI::ToastIcon.new(variant: variant)
+          div(class: "flex flex-col gap-0.5 flex-1 min-w-0") do
+            render RubyUI::ToastTitle.new
+            render RubyUI::ToastDescription.new
+          end
+          render RubyUI::ToastClose.new if @close_button
+        end
+      end
+    end
+
+    def slot_template(target_name, &)
+      template(data: {ruby_ui__toaster_target: target_name}, &)
+    end
+
+    def default_attrs
+      {
+        id: "ruby-ui-toaster-region",
+        role: "region",
+        aria_label: "Notifications",
+        aria_live: "polite",
+        data: {
+          controller: "ruby-ui--toaster",
+          turbo_permanent: "",
+          close_button: @close_button.to_s,
+          position: @position.to_s.tr("_", "-"),
+          ruby_ui__toaster_position_value: @position.to_s.tr("_", "-"),
+          ruby_ui__toaster_expand_value: @expand.to_s,
+          ruby_ui__toaster_max_value: @max.to_s,
+          ruby_ui__toaster_duration_value: @duration.to_s,
+          ruby_ui__toaster_gap_value: @gap.to_s,
+          ruby_ui__toaster_offset_value: @offset.to_s,
+          ruby_ui__toaster_theme_value: @theme.to_s,
+          ruby_ui__toaster_rich_colors_value: @rich_colors.to_s,
+          ruby_ui__toaster_close_button_value: @close_button.to_s,
+          ruby_ui__toaster_hotkey_value: Array(@hotkey).join("+"),
+          ruby_ui__toaster_dir_value: @dir.to_s
+        },
+        class: region_classes
+      }
+    end
+
+    def region_classes
+      <<~CLASSES.tr("\n", " ").squeeze(" ").strip
+        group/toaster pointer-events-none fixed z-[100] p-4 sm:p-6
+        data-[position=top-left]:top-0 data-[position=top-left]:left-0
+        data-[position=top-center]:top-0 data-[position=top-center]:left-1/2 data-[position=top-center]:-translate-x-1/2
+        data-[position=top-right]:top-0 data-[position=top-right]:right-0
+        data-[position=bottom-left]:bottom-0 data-[position=bottom-left]:left-0
+        data-[position=bottom-center]:bottom-0 data-[position=bottom-center]:left-1/2 data-[position=bottom-center]:-translate-x-1/2
+        data-[position=bottom-right]:bottom-0 data-[position=bottom-right]:right-0
+      CLASSES
+    end
+  end
+end

data/lib/ruby_ui/toast/toast_title.rb

@@ -0,0 +1,18 @@
+# frozen_string_literal: true
+
+module RubyUI
+  class ToastTitle < Base
+    def view_template(&)
+      div(**attrs, &)
+    end
+
+    private
+
+    def default_attrs
+      {
+        data: {slot: "title"},
+        class: "font-medium leading-normal"
+      }
+    end
+  end
+end