ruby_ui 1.2.0 → 1.3.0

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

data/lib/ruby_ui/toast/toaster_controller.js

@@ -0,0 +1,306 @@
+import { Controller } from "@hotwired/stimulus"
+
+const VARIANTS = ["default", "success", "error", "warning", "info", "loading"]
+
+let streamActionRegistered = false
+
+function registerStreamAction() {
+  if (streamActionRegistered) return
+  if (typeof window === "undefined") return
+  const Turbo = window.Turbo
+  if (!Turbo?.StreamActions) return
+  Turbo.StreamActions.toast = function () {
+    const detail = {}
+    for (const attr of this.attributes) {
+      if (attr.name === "action" || attr.name === "target" || attr.name === "targets") continue
+      detail[attr.name] = attr.value
+    }
+    if (detail.duration != null && detail.duration !== "") detail.duration = Number(detail.duration)
+    if (detail.dismissible != null) detail.dismissible = detail.dismissible !== "false"
+    window.dispatchEvent(new CustomEvent("ruby-ui:toast", { detail }))
+  }
+  streamActionRegistered = true
+}
+
+// Connects to data-controller="ruby-ui--toaster"
+export default class extends Controller {
+  static targets = ["skeleton", "toast", "actionTpl", "cancelTpl", "closeTpl"]
+  static values = {
+    position: { type: String, default: "bottom-right" },
+    expand: { type: Boolean, default: false },
+    max: { type: Number, default: 3 },
+    duration: { type: Number, default: 4000 },
+    gap: { type: Number, default: 14 },
+    offset: { type: Number, default: 24 },
+    theme: { type: String, default: "system" },
+    richColors: { type: Boolean, default: false },
+    closeButton: { type: Boolean, default: false },
+    hotkey: { type: String, default: "alt+t" },
+    dir: { type: String, default: "ltr" },
+  }
+
+  connect() {
+    this._heights = new Map()
+    this._resizeObservers = new WeakMap()
+    this._expanded = this.expandValue
+    this._listEl = this.element.querySelector("ol") || (this.element.tagName === "OL" ? this.element : null)
+    this._registerGlobalApi()
+    registerStreamAction()
+    if (!this._listEl) return
+
+    this._onPointerEnter = () => this._setExpanded(true)
+    this._onPointerLeave = () => { if (!this.expandValue) this._setExpanded(false) }
+    this._onWindowToast = (e) => this._spawn(e.detail || {})
+    this._onWindowDismissAll = () => this._dismissById(null)
+    this._onKey = this._onKey.bind(this)
+
+    window.addEventListener("ruby-ui:toast", this._onWindowToast)
+    window.addEventListener("ruby-ui:toast:dismiss-all", this._onWindowDismissAll)
+    this._listEl.addEventListener("pointerenter", this._onPointerEnter)
+    this._listEl.addEventListener("pointerleave", this._onPointerLeave)
+    document.addEventListener("keydown", this._onKey)
+  }
+
+  disconnect() {
+    window.removeEventListener("ruby-ui:toast", this._onWindowToast)
+    window.removeEventListener("ruby-ui:toast:dismiss-all", this._onWindowDismissAll)
+    this._listEl?.removeEventListener("pointerenter", this._onPointerEnter)
+    this._listEl?.removeEventListener("pointerleave", this._onPointerLeave)
+    document.removeEventListener("keydown", this._onKey)
+  }
+
+  toastTargetConnected(el) {
+    if (typeof ResizeObserver !== "undefined") {
+      const ro = new ResizeObserver(() => {
+        this._heights.set(el, el.offsetHeight)
+        this._reflow()
+      })
+      ro.observe(el)
+      this._resizeObservers.set(el, ro)
+    }
+    this._heights.set(el, el.offsetHeight || 64)
+    this._reflow()
+  }
+
+  toastTargetDisconnected(el) {
+    this._resizeObservers.get(el)?.disconnect()
+    this._resizeObservers.delete(el)
+    this._heights.delete(el)
+    this._reflow()
+  }
+
+  _spawn(detail) {
+    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()}`
+    if (detail.duration != null) {
+      const dur = detail.duration === Infinity ? 0 : detail.duration
+      node.setAttribute("data-ruby-ui--toast-duration-value", String(dur))
+    }
+    if (detail.dismissible === false) {
+      node.setAttribute("data-ruby-ui--toast-dismissible-value", "false")
+    }
+    if (detail.className) node.className += ` ${detail.className}`
+
+    const titleEl = node.querySelector('[data-slot="title"]')
+    if (titleEl) titleEl.textContent = detail.title || detail.message || ""
+    const descEl = node.querySelector('[data-slot="description"]')
+    if (descEl) {
+      if (detail.description) descEl.textContent = detail.description
+      else descEl.remove()
+    }
+
+    if (detail.action && detail.action.label && this.hasActionTplTarget) {
+      const btn = this._cloneSlot(this.actionTplTarget)
+      btn.textContent = detail.action.label
+      btn.addEventListener("click", (ev) => {
+        try { detail.action.onClick?.(ev) } finally {
+          node.dispatchEvent(new CustomEvent("ruby-ui:toast:force-dismiss", { bubbles: true }))
+        }
+      })
+      node.appendChild(btn)
+    }
+
+    if (detail.cancel && detail.cancel.label && this.hasCancelTplTarget) {
+      const btn = this._cloneSlot(this.cancelTplTarget)
+      btn.textContent = detail.cancel.label
+      node.appendChild(btn)
+    }
+
+    if (detail.closeButton && this.hasCloseTplTarget) {
+      const x = this._cloneSlot(this.closeTplTarget)
+      node.classList.add("pr-10")
+      node.appendChild(x)
+    }
+
+    this._listEl.appendChild(node)
+    return node.id
+  }
+
+  _dismissById(id) {
+    if (!id) {
+      this.toastTargets.forEach((el) =>
+        el.dispatchEvent(new CustomEvent("ruby-ui:toast:force-dismiss", { bubbles: true }))
+      )
+      return
+    }
+    const el = this._listEl.querySelector(`#${CSS.escape(id)}`)
+    if (el) el.dispatchEvent(new CustomEvent("ruby-ui:toast:force-dismiss", { bubbles: true }))
+  }
+
+  _skeletonFor(variant) {
+    return this.skeletonTargets.find((t) => t.dataset.variant === variant)
+  }
+
+  _cloneSlot(tpl) {
+    return tpl.content.firstElementChild.cloneNode(true)
+  }
+
+  _setExpanded(value) {
+    if (this._expanded === value) return
+    this._expanded = value
+    document.dispatchEvent(new CustomEvent(value ? "ruby-ui:toast:pause" : "ruby-ui:toast:resume"))
+    this._reflow()
+  }
+
+  _reflow() {
+    if (!this._listEl) return
+    const isBottom = this.positionValue.startsWith("bottom")
+    const items = this.toastTargets
+    const order = isBottom ? items.slice().reverse() : items.slice()
+    const heights = order.map(el => this._heights.get(el) || el.offsetHeight || 64)
+    const gap = this.gapValue
+    const peekOffset = 16
+    const peekScaleStep = 0.05
+    const peekOpacityStep = 0.2
+
+    const expandedHeight = heights.reduce((a, b) => a + b, 0) + gap * Math.max(0, heights.length - 1)
+    const collapsedHeight = (heights[0] || 0) + Math.min(2, Math.max(0, heights.length - 1)) * peekOffset
+    this._listEl.style.minHeight = `${this._expanded ? expandedHeight : collapsedHeight}px`
+
+    let acc = 0
+    order.forEach((el, i) => {
+      const visible = i < this.maxValue
+      let yOffset, scale, opacity
+
+      if (this._expanded) {
+        yOffset = acc + i * gap
+        scale = 1
+        opacity = visible ? 1 : 0
+      } else {
+        yOffset = i * peekOffset
+        scale = Math.max(0.85, 1 - i * peekScaleStep)
+        opacity = visible ? Math.max(0, 1 - i * peekOpacityStep) : 0
+      }
+
+      const sign = isBottom ? -1 : 1
+      const ty = sign * yOffset
+
+      el.style.setProperty("--opacity", String(opacity))
+      el.style.setProperty("--scale", String(scale))
+      el.style.setProperty("--y-offset", `${ty}px`)
+      el.style.transformOrigin = isBottom ? "center bottom" : "center top"
+      el.style.top = isBottom ? "auto" : "0"
+      el.style.bottom = isBottom ? "0" : "auto"
+      el.style.transform = `translate3d(0, ${ty}px, 0) scale(${scale})`
+      el.style.zIndex = String(1000 - i)
+      el.style.pointerEvents = visible ? "auto" : "none"
+      el.tabIndex = visible ? 0 : -1
+
+      acc += heights[i] || 0
+    })
+
+    this._enforceMax(items)
+  }
+
+  _enforceMax(items) {
+    if (items.length <= this.maxValue) return
+    const isBottom = this.positionValue.startsWith("bottom")
+    const dropping = items.length - this.maxValue
+    const candidates = isBottom ? items.slice(0, dropping) : items.slice(-dropping)
+    candidates.forEach(el => {
+      if (el.dataset.state !== "closing") {
+        el.dispatchEvent(new CustomEvent("ruby-ui:toast:force-dismiss", { bubbles: true }))
+      }
+    })
+  }
+
+  _onKey(e) {
+    const parts = (this.hotkeyValue || "alt+t").split("+")
+    const key = parts.pop()
+    const wantAlt = parts.includes("alt")
+    const wantCtrl = parts.includes("ctrl")
+    const wantMeta = parts.includes("meta")
+    if (e.key.toLowerCase() !== key.toLowerCase()) return
+    if (wantAlt !== e.altKey) return
+    if (wantCtrl !== e.ctrlKey) return
+    if (wantMeta !== e.metaKey) return
+    e.preventDefault()
+    const first = this._listEl.firstElementChild
+    first?.focus()
+  }
+
+  _registerGlobalApi() {
+    const fire = (variant, message, opts = {}) =>
+      window.dispatchEvent(new CustomEvent("ruby-ui:toast", {
+        detail: { ...opts, variant, message: opts.title || message }
+      }))
+
+    const api = (message, opts) => fire("default", message, opts)
+    api.success = (m, o) => fire("success", m, o)
+    api.error = (m, o) => fire("error", m, o)
+    api.warning = (m, o) => fire("warning", m, o)
+    api.info = (m, o) => fire("info", m, o)
+    api.loading = (m, o = {}) => fire("loading", m, { ...o, duration: o.duration ?? 0 })
+    api.dismiss = (id) => {
+      if (id) this._dismissById(id)
+      else window.dispatchEvent(new CustomEvent("ruby-ui:toast:dismiss-all"))
+    }
+    api.promise = (p, msgs = {}) => {
+      const id = `toast-${this._uuid()}`
+      fire("loading", typeof msgs.loading === "function" ? msgs.loading() : (msgs.loading || "Loading..."), { id, duration: 0 })
+      Promise.resolve(p).then(
+        (val) => this._mutate(id, "success", typeof msgs.success === "function" ? msgs.success(val) : msgs.success),
+        (err) => this._mutate(id, "error", typeof msgs.error === "function" ? msgs.error(err) : msgs.error)
+      )
+      return id
+    }
+
+    window.RubyUI = window.RubyUI || {}
+    window.RubyUI.toast = api
+  }
+
+  _mutate(id, variant, text) {
+    const el = this._listEl.querySelector(`#${CSS.escape(id)}`)
+    if (!el) return
+    el.dataset.variant = variant
+    el.setAttribute("role", variant === "error" ? "alert" : "status")
+    this._swapIcon(el, variant)
+    const t = el.querySelector('[data-slot="title"]')
+    if (t && text) t.textContent = text
+    const dur = String(this.durationValue)
+    el.setAttribute("data-ruby-ui--toast-duration-value", dur)
+    el.dispatchEvent(new CustomEvent("ruby-ui:toast:restart", { bubbles: true }))
+  }
+
+  _swapIcon(el, variant) {
+    const iconHost = el.querySelector('[data-slot="icon"]')
+    if (!iconHost) return
+    const tpl = this._skeletonFor(variant)
+    if (!tpl) return
+    const sourceIcon = tpl.content.firstElementChild?.querySelector('[data-slot="icon"]')
+    iconHost.innerHTML = sourceIcon ? sourceIcon.innerHTML : ""
+  }
+
+  _uuid() {
+    if (typeof crypto !== "undefined" && crypto.randomUUID) return crypto.randomUUID()
+    return Math.random().toString(36).slice(2) + Date.now().toString(36)
+  }
+}

data/lib/ruby_ui/toggle/toggle.rb

@@ -0,0 +1,101 @@
+# frozen_string_literal: true
+
+module RubyUI
+  class Toggle < Base
+    BASE_CLASSES = [
+      "inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium whitespace-nowrap",
+      "transition-[color,box-shadow] outline-none",
+      "hover:bg-muted hover:text-muted-foreground",
+      "focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50",
+      "disabled:pointer-events-none disabled:opacity-50",
+      "aria-invalid:border-destructive aria-invalid:ring-destructive/20",
+      "data-[state=on]:bg-accent data-[state=on]:text-accent-foreground",
+      "[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4"
+    ].freeze
+
+    VARIANT_CLASSES = {
+      default: "bg-transparent",
+      outline: "border border-input bg-transparent shadow-xs hover:bg-accent hover:text-accent-foreground"
+    }.freeze
+
+    SIZE_CLASSES = {
+      sm: "h-8 min-w-8 px-1.5",
+      default: "h-9 min-w-9 px-2",
+      lg: "h-10 min-w-10 px-2.5"
+    }.freeze
+
+    def self.classes_for(variant:, size:)
+      [BASE_CLASSES, VARIANT_CLASSES.fetch(variant, VARIANT_CLASSES[:default]), SIZE_CLASSES.fetch(size, SIZE_CLASSES[:default])]
+    end
+
+    def initialize(
+      pressed: false,
+      name: nil,
+      value: "1",
+      unpressed_value: nil,
+      variant: :default,
+      size: :default,
+      disabled: false,
+      wrapper: {},
+      **attrs
+    )
+      @pressed = pressed
+      @name = name
+      @value = value
+      @unpressed_value = unpressed_value
+      @variant = variant.to_sym
+      @size = size.to_sym
+      @disabled = disabled
+      @wrapper = wrapper
+      super(**attrs)
+    end
+
+    def view_template(&block)
+      span(**wrapper_attrs) do
+        button(**attrs, &block)
+        render_hidden_input if @name
+      end
+    end
+
+    private
+
+    def wrapper_attrs
+      mix(wrapper_default_attrs, @wrapper)
+    end
+
+    def wrapper_default_attrs
+      {
+        class: "contents",
+        data: {
+          controller: "ruby-ui--toggle",
+          action: "click->ruby-ui--toggle#toggle",
+          "ruby-ui--toggle-pressed-value": @pressed.to_s,
+          "ruby-ui--toggle-value-value": @value.to_s,
+          "ruby-ui--toggle-unpressed-value-value": @unpressed_value.to_s
+        }
+      }
+    end
+
+    def render_hidden_input
+      input(
+        type: "hidden",
+        name: @name,
+        value: @pressed ? @value : @unpressed_value.to_s,
+        data: {"ruby-ui--toggle-target": "input"}
+      )
+    end
+
+    def default_attrs
+      base = {type: "button"}
+      base[:disabled] = true if @disabled
+      base.merge(
+        aria: {pressed: @pressed.to_s},
+        data: {
+          state: @pressed ? "on" : "off",
+          "ruby-ui--toggle-target": "button"
+        },
+        class: self.class.classes_for(variant: @variant, size: @size)
+      )
+    end
+  end
+end